:root{--bg:#14161a;--panel:#1e2127;--text:#eceef1;--muted:#8a8f98;--accent:#f2b84b;--accent-text:#1a1406;--wood:#3a2d22;--fret:#9aa0a8;--nut:#e8dcc0;--string:#c9c2b4;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:light){:root{--bg:#f6f4ef;--panel:#fff;--text:#1b1d21;--muted:#6b707a;--accent:#d9901a;--accent-text:#fff;--wood:#d9c3a3;--fret:#7c818a;--nut:#fdf8ec;--string:#6e6a62;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;margin:0}main{max-width:900px;padding:max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));margin:0 auto}h1{margin:8px 0 16px;font-size:1.5rem}h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;font-size:.8rem}section{margin-bottom:20px}button,select{font:inherit;color:var(--text);background:var(--panel);border:1px solid color-mix(in srgb, var(--muted) 40%, transparent);cursor:pointer;border-radius:10px;min-height:44px;padding:10px 14px}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.chip.static{border-radius:10px;align-items:center;padding:10px 14px;display:inline-flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.slider{grid-template-columns:9em 1fr 3em;align-items:center;gap:10px;margin-bottom:8px;display:grid}.slider output{text-align:right;font-variant-numeric:tabular-nums}.check{align-items:center;gap:10px;min-height:36px;display:flex}.check input{width:20px;height:20px}.start{margin-top:28px}.start .primary{width:100%;padding:16px;font-size:1.25rem}.hint{color:var(--muted);font-size:.85rem}.quiz{flex-direction:column;gap:12px;min-height:100dvh;display:flex}.quiz-top{color:var(--text);font-variant-numeric:tabular-nums;justify-content:flex-end;font-size:clamp(1.25rem,4vw,1.75rem);font-weight:600;display:flex}.prompt{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:40vh;display:flex}.prompt-note,.countdown{font-size:clamp(6rem,28vw,14rem);font-weight:700;line-height:1}.prompt-string{color:var(--muted);margin-bottom:8px;font-size:clamp(1.5rem,6vw,3rem)}.paused .prompt{opacity:.4}.timer-track{background:var(--panel);border-radius:3px;height:6px;overflow:hidden}.timer-bar{transform-origin:0;background:var(--muted);width:100%;height:100%;animation-name:drain;animation-timing-function:linear;animation-fill-mode:forwards}.timer-bar.reveal{background:var(--accent)}.paused .timer-bar{animation-play-state:paused}@keyframes drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.controls{justify-content:center;gap:10px;display:flex}.controls button{min-width:100px}.keys{text-align:center;margin:0}@media (pointer:coarse){.keys{display:none}}.fretboard{width:100%;height:auto;display:block}.fb-wood{fill:var(--wood)}.fb-out{fill:var(--bg);opacity:.55}.fb-inlay{fill:color-mix(in srgb, var(--nut) 35%, transparent)}.fb-fret{stroke:var(--fret);stroke-width:3px}.fb-nut{stroke:var(--nut);stroke-width:8px}.fb-string line{stroke:var(--string)}.fb-string text,.fb-fretnum{fill:var(--muted);font-size:18px}.fb-string.active line{stroke:var(--accent)}.fb-string.active text{fill:var(--accent);font-weight:700}.fb-dot circle{fill:var(--accent);stroke:var(--bg);stroke-width:3px}.fb-dot text{fill:var(--accent-text);font-size:16px;font-weight:700}.summary{text-align:center;padding-top:15vh}.summary .big{margin:0;font-size:3rem;font-weight:700}.summary .controls{margin-top:32px}@media (orientation:landscape) and (height<=500px){.prompt{flex-direction:row;gap:24px;min-height:0}.prompt-note,.countdown{font-size:30vh}}button.link{color:var(--accent);background:0 0;border:none;min-height:36px;padding:4px 0 4px 30px}.record .row h1{margin:0}.clip{border-radius:10px;grid-template-columns:1.2em 1fr auto auto auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.clip.recording{background:color-mix(in srgb, var(--accent) 18%, transparent)}.clip-status{color:var(--accent);font-weight:700}.clip-script{font-size:1.1rem}.clip button{padding:8px 10px}.error{color:#e5675a}