:root{--bg: #050807;--surface: #0b120e;--surface-raised: #101a14;--text: #c8ffd4;--text-dim: #6fae84;--accent: #39ff88;--accent-dim: #1d7a48;--danger: #ff5d5d;--font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", "Courier New", monospace;--text-base: clamp(.95rem, .9rem + .3vw, 1.05rem);--space-1: .5rem;--space-2: 1rem;--space-3: 2rem;--duration-fast: .15s;--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:var(--text-base);overscroll-behavior:none}button,select,input,label{touch-action:manipulation}#toolbar,.upload-btn,.toggle{-webkit-user-select:none;user-select:none}#app{min-height:100dvh;display:flex;flex-direction:column}#landing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);text-align:center}#landing-title{margin:0;font-size:clamp(2rem,1rem + 6vw,4rem);letter-spacing:.18em;color:var(--accent);text-shadow:0 0 24px color-mix(in oklab,var(--accent) 40%,transparent)}.tagline{margin:0;color:var(--text-dim)}#start-btn{font-family:inherit;font-size:1.1rem;padding:.9em 2.2em;background:transparent;color:var(--accent);border:1px solid var(--accent-dim);border-radius:4px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}#start-btn:hover{background:var(--surface-raised);box-shadow:0 0 18px color-mix(in oklab,var(--accent) 25%,transparent)}#start-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.upload-btn{font-size:.9rem;padding:.6em 1.6em;color:var(--text-dim);border:1px dashed var(--accent-dim);border-radius:4px;cursor:pointer}.upload-btn:hover{color:var(--accent);border-style:solid}#rec-btn[aria-pressed=true],#rec-btn.recording{color:var(--danger);border-color:var(--danger)}.privacy-note{max-width:42ch;color:var(--text-dim);font-size:.8rem;line-height:1.5}.about{max-width:46ch;font-size:.8rem;color:var(--text-dim)}.about summary{cursor:pointer;color:var(--accent-dim)}.about summary:hover{color:var(--accent)}.about p{line-height:1.6;text-align:left}#viewer{flex:1;display:grid;place-items:center;overflow:hidden;background:var(--bg)}#ascii-output{margin:0;font-family:var(--font-mono);font-size:8px;line-height:.8;letter-spacing:0;white-space:pre;user-select:text}#ascii-output.mirrored{transform:scaleX(-1)}#hud{position:fixed;top:calc(.75rem + env(safe-area-inset-top,0px));right:calc(.75rem + env(safe-area-inset-right,0px));padding:.3em .6em;font-size:.7rem;color:var(--text-dim);background:color-mix(in oklab,var(--surface) 85%,transparent);border:1px solid var(--accent-dim);border-radius:4px}#toolbar{position:fixed;bottom:calc(.6rem + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);display:flex;flex-wrap:nowrap;gap:.3rem;padding:.3rem;max-width:calc(100vw - .5rem);background:color-mix(in oklab,var(--surface-raised) 85%,transparent);border:1px solid var(--accent-dim);border-radius:10px;backdrop-filter:blur(6px)}#toolbar button{font-family:inherit;font-size:.9rem;min-height:44px;padding:.4em .9em;white-space:nowrap;background:transparent;color:var(--text);border:1px solid transparent;border-radius:6px;cursor:pointer}@media(max-width:380px){#toolbar{gap:.15rem;padding:.25rem}#toolbar button{font-size:.82rem;padding:.35em .6em}}#toolbar button:hover{border-color:var(--accent-dim);color:var(--accent)}#toolbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#toolbar button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}#settings-drawer{position:fixed;bottom:calc(4.4rem + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);width:min(420px,calc(100vw - 1rem));max-height:calc(100dvh - 8rem - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));overflow-y:auto;padding:var(--space-2);display:grid;gap:1rem;background:color-mix(in oklab,var(--surface-raised) 92%,transparent);border:1px solid var(--accent-dim);border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 12px 40px #0009}.drawer-title{margin:0;color:var(--text-dim);letter-spacing:.2em;font-size:.75rem;text-transform:uppercase}.ctl{display:grid;gap:.35rem}.ctl>label{display:flex;justify-content:flex-start;align-items:baseline;gap:.5ch;font-size:.8rem;color:var(--text-dim)}.ctl>label:before{content:">";color:var(--accent-dim)}.ctl output{color:var(--accent);font-size:.8rem;margin-left:auto}.ctl .hint{color:var(--accent-dim);font-size:.7rem}.ctl select,.ctl input[type=text]{font-family:inherit;font-size:.9rem;padding:.45em .6em;color:var(--text);background:var(--surface);border:1px solid var(--accent-dim);border-radius:4px}.ctl select:focus-visible,.ctl input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ctl-error{margin:0;color:var(--danger);font-size:.75rem}.ctl-static{margin:0;font-size:.8rem;color:var(--text-dim)}.ctl-static:before{content:"> ";color:var(--accent-dim)}.export-row{display:flex;gap:.4rem}.export-row .drawer-action{flex:1}.drawer-action{font-family:inherit;font-size:.85rem;min-height:44px;padding:.5em 1em;background:transparent;color:var(--text-dim);border:1px dashed var(--accent-dim);border-radius:4px;cursor:pointer}.drawer-action:hover{color:var(--accent);border-style:solid}.drawer-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#settings-drawer input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}#settings-drawer input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--accent-dim)}#settings-drawer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:3px;background:var(--accent);box-shadow:0 0 8px color-mix(in oklab,var(--accent) 60%,transparent)}#settings-drawer input[type=range]::-moz-range-track{height:2px;background:var(--accent-dim)}#settings-drawer input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:3px;background:var(--accent);box-shadow:0 0 8px color-mix(in oklab,var(--accent) 60%,transparent)}#settings-drawer input[type=range]:disabled{opacity:.35;cursor:not-allowed}.ctl-toggles{display:flex;flex-wrap:wrap;gap:var(--space-2)}.toggle{display:inline-flex;align-items:center;gap:.45em;font-size:.85rem;color:var(--text-dim);cursor:pointer}.toggle input{accent-color:var(--accent);width:1.25rem;height:1.25rem}.toggle:has(input:checked) span{color:var(--accent)}#scan-me{display:none}@media(min-width:900px)and (pointer:fine){#app[data-state=landing] #scan-me{display:grid;justify-items:center;gap:.4rem;position:fixed;right:var(--space-2);bottom:var(--space-2);margin:0;padding:var(--space-1);border:1px solid var(--accent-dim);border-radius:6px;background:color-mix(in oklab,var(--surface) 70%,transparent)}#scan-me figcaption{font-size:.7rem;color:var(--text-dim)}}#save-bar{position:fixed;left:50%;bottom:calc(4.4rem + env(safe-area-inset-bottom,0px));transform:translate(-50%);width:min(460px,calc(100vw - 2rem));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-1);padding:.7rem var(--space-2);background:color-mix(in oklab,var(--surface-raised) 94%,transparent);border:1px solid var(--accent);border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 10px 36px #0009,0 0 18px color-mix(in oklab,var(--accent) 18%,transparent);font-size:.8rem}#save-bar[hidden]{display:none}.save-actions{display:flex;gap:.4rem}#save-bar button{font-family:inherit;font-size:.85rem;padding:.5em 1em;background:transparent;color:var(--text);border:1px solid var(--accent-dim);border-radius:4px;cursor:pointer}#save-bar button:hover{color:var(--accent);border-color:var(--accent)}#save-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#save-share{color:var(--accent);border-color:var(--accent)}#error-banner{position:fixed;inset:auto var(--space-2) var(--space-2) var(--space-2);padding:var(--space-2);background:var(--surface-raised);border:1px solid var(--danger);border-radius:6px;color:var(--text)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}