:root{--bg:#fff;--text:#1f2937;--border:#d1d5db;--muted:#6b7280;--accent:#e5e7eb}[data-theme=dark]{--bg:#0a0e16;--text:#e5e7eb;--border:#334155;--muted:#94a3b8;--accent:#1e293b}*{box-sizing:border-box}body{display:flex;background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;margin:0;transition:background .2s,color .2s;font-family:ui-monospace,Cascadia Code,SF Mono,Menlo,Consolas,Liberation Mono,monospace}nav{display:flex;border-bottom:1px solid var(--border);justify-content:space-between;align-items: center;gap:1rem;padding:.75rem 1.25rem}.logo{width:auto;height:36px}.nav-actions{display:flex;align-items: center;gap:.75rem}.btn{background:var(--text);color:var(--bg);border:1px solid var(--border);font:inherit;cursor:pointer;border-radius:8px;padding:.55rem 1.1rem;transition:filter .15s;font-size:.9rem}.btn:hover{filter:brightness(1.2)}.btn-git{display:inline-flex;align-items: center;line-height:0}.btn-git:hover{border-color:var(--text)}.btn-git img{display:block}main{display:flex;flex-direction:column;flex:1;align-items: center;gap:1.25rem;width:100%;max-width:640px;margin:0 auto;padding:2rem 1.25rem}.description{text-align:center;color:var(--muted);max-width:55ch;margin:0;line-height:1.5}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%}.controls label{display:flex;color:var(--muted);align-items: center;gap:.5rem;font-size:.9rem}select,textarea{background:var(--bg);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:8px;padding:.5rem}select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-git:focus-visible{outline:2px solid var(--accent);outline-offset:2px}textarea{resize:vertical;width:100%;min-height:140px}.output{border:1px dashed var(--border);word-break:break-word;border-radius:8px;width:100%;min-height:2.5rem;margin:0;padding:.75rem 1rem;line-height:1.5}footer{border-top:1px solid var(--border);text-align:center;color:var(--muted);padding:1rem;font-size:.85rem}@media (max-width:600px){nav{flex-direction:column;gap:.75rem}main{padding:1.5rem 1rem}.controls{flex-direction:column}.controls label{justify-content:space-between}select{width:100%}}
