@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Rajdhani:wght@400;500;600;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#090909;--surface:#1a1a1a;--surface-raised:#222;--border:#2d2d2d;--text:#dedede;--text-dim:#888;--accent:#c00;--accent-bright:#ff2020;--accent-dim:#cc000030;--accent-glow:#cc000061;--success:#8c4;--error:#ff2020;--fingerboard:#3a2a1e;--fret-wire:#b8b3c4;--string-line:#d8d5e0;font-family:Inter,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top, #151515, var(--bg) 60%);color:var(--text);min-height:100vh;margin:0}#app{max-width:760px;margin:0 auto;padding:24px 20px 60px}.app-header h1{text-align:center;text-transform:uppercase;letter-spacing:.08em;color:#fff;text-shadow:0 2px 24px var(--accent-glow);margin:0 0 24px;font-family:Rajdhani,sans-serif;font-size:1.8rem;font-weight:700}.screen.hidden{display:none}.screen{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;animation:.22s ease-out screen-in;position:relative;overflow:hidden}.screen h2{text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-top:0;font-family:Rajdhani,sans-serif;font-weight:600}.screen:before{content:"";background:linear-gradient(90deg, transparent 0%, var(--accent) 25%, var(--accent) 75%, transparent 100%);height:2px;position:absolute;top:0;left:0;right:0}@keyframes screen-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.field-row{flex-wrap:wrap;gap:20px;margin-bottom:18px;display:flex}fieldset{border:1px solid var(--border);border-radius:10px;flex:200px;padding:10px 14px}legend{color:var(--text-dim);padding:0 6px;font-size:.85rem}fieldset label{cursor:pointer;margin:6px 0;display:block}.field{color:var(--text-dim);flex-direction:column;flex:160px;gap:6px;font-size:.85rem;display:flex}.field input[type=number]{font-size:1rem}.fret-range-inputs{color:var(--text);align-items:center;gap:8px;display:flex}input[type=number],input[type=text]{background:var(--surface-raised);border:1px solid var(--border);color:var(--text);border-radius:8px;width:84px;padding:8px 10px}input[type=radio]{accent-color:var(--accent);margin-right:6px}.error{color:var(--error);margin:0 0 14px}.button-row{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}button{font:inherit;cursor:pointer;border:1px solid var(--border);background:var(--surface-raised);color:var(--text);border-radius:10px;padding:10px 16px;transition:transform .12s,background .12s,border-color .12s}button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover:not(:disabled){background:var(--accent-bright);border-color:var(--accent-bright);box-shadow:0 0 18px var(--accent-glow)}.quiz-hud{color:var(--text-dim);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:12px;display:flex}.timer-bar-track{background:var(--surface-raised);border-radius:4px;height:8px;margin-bottom:20px;overflow:hidden}.timer-bar{background:var(--accent);transform-origin:0;border-radius:4px;width:100%;height:100%;transform:scaleX(1)}.timer-bar.timer-bar-low{background:var(--error)}.fretboard-container{justify-content:center;margin:8px 0 16px;display:flex}.fretboard-svg{width:100%;max-width:320px;height:auto;display:block}.fingerboard{fill:var(--fingerboard)}.string-line{stroke:var(--string-line);stroke-width:1.6px}.fret-wire{stroke:var(--fret-wire);stroke-width:1.4px}.fret-wire.nut{stroke-width:4px}.inlay-dot{fill:#d8c9a8;opacity:.6}.fret-number{fill:var(--text-dim);font-size:10px}.string-label{fill:var(--text-dim);font-size:12px}.range-mask{fill:#0e0e14;opacity:.55;pointer-events:none}.fret-target{fill:var(--accent);opacity:0;transition:opacity .12s}.fret-target.active{opacity:1;animation:1.1s ease-in-out infinite target-pulse}.fret-target.correct{opacity:1;fill:var(--success);animation:.5s ease-out target-flash}.fret-target.incorrect{opacity:1;fill:var(--error);animation:.42s ease-in-out target-shake}@keyframes target-pulse{0%,to{r:12}50%{r:15}}@keyframes target-flash{0%{r:18;opacity:.5}to{r:12;opacity:1}}@keyframes target-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.quiz-feedback{text-align:center;min-height:1.4em;margin:4px 0 16px;font-weight:600}.feedback-correct{color:var(--success)}.feedback-incorrect{color:var(--error)}.quiz-continue-hint{text-align:center;color:var(--text-dim);margin:-8px 0 16px;font-size:.85rem;display:none}.quiz-continue-hint.active{display:block}.note-buttons{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.note-button{text-align:center;padding:14px 0;font-size:1.05rem;font-weight:600}.note-button:hover:not(:disabled){background:var(--accent-dim)}.summary-score{text-align:center;margin:4px 0 20px;font-size:1.3rem;font-weight:700}.missed-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.missed-list li{background:var(--surface-raised);border-radius:8px;padding:10px 14px}.stats-list{counter-reset:rank;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.stats-row{background:var(--surface-raised);border-left:3px solid var(--error);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.stats-row-clean{border-left-color:var(--success)}.stats-note{font-size:1.05rem;font-weight:700}.stats-detail{color:var(--text-dim);font-size:.9rem}@media (width<=480px){.note-buttons{grid-template-columns:repeat(3,1fr)}}