@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;--chord-major:#e0a030;--chord-minor:#4d9de0;--chord-dim:#b06fd1;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 h3{letter-spacing:.03em;color:#fff;margin:0 0 8px;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}.patterns-type-row{align-items:center;gap:6px;display:flex}.patterns-type-row label{flex:1;margin:0}.info-button{border:1px solid var(--border);background:var(--surface-raised);width:18px;height:18px;color:var(--text-dim);cursor:pointer;border-radius:50%;flex:none;padding:0;font-size:.7rem;font-style:italic;line-height:1}.info-button:hover,.info-button:focus{border-color:var(--accent);color:var(--accent-bright)}.info-tooltip{background:var(--surface-raised);border:1px solid var(--border);color:var(--text-dim);border-radius:8px;margin:2px 0 8px;padding:8px 10px;font-size:.8rem}.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}.pitch-map-dot{fill:var(--accent);opacity:.85}.chord-dot{opacity:.9}.chord-dot--major{fill:var(--chord-major)}.chord-dot--minor{fill:var(--chord-minor)}.chord-dot--diminished{fill:var(--chord-dim)}.chord-dot--root{stroke:var(--text);stroke-width:2px}.chord-shape-line{fill:none;stroke:var(--text-dim);stroke-width:1.5px;opacity:.55;pointer-events:none}.pattern-dot{fill:var(--accent);opacity:.9}.pattern-dot--root{stroke:var(--text);stroke-width:2px}.pattern-degree-label{fill:#fff;text-anchor:middle;pointer-events:none;font-size:9px;font-weight:600}.pattern-shape-line{fill:none;stroke:var(--text-dim);stroke-width:1.5px;opacity:.55;pointer-events:none}.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}.chord-legend{color:var(--text-dim);gap:16px;margin:4px 0 12px;font-size:.8rem;display:flex}.chord-legend-swatch{border-radius:50%;width:10px;height:10px;margin-right:4px;display:inline-block}.chord-legend-swatch--major{background:var(--chord-major)}.chord-legend-swatch--minor{background:var(--chord-minor)}.chord-legend-swatch--diminished{background:var(--chord-dim)}.chord-list{flex-direction:column;gap:8px;margin:8px 0 16px;display:flex}.chord-entry{text-align:left;border-left:4px solid #0000;align-items:baseline;gap:10px;padding:10px 14px;display:flex}.chord-entry[data-quality=major]{border-left-color:var(--chord-major)}.chord-entry[data-quality=minor]{border-left-color:var(--chord-minor)}.chord-entry[data-quality=diminished]{border-left-color:var(--chord-dim)}.chord-entry.active{box-shadow:0 0 0 1px var(--text) inset}.chord-entry-roman{min-width:2.4em;font-weight:600}.chord-entry-note{color:var(--text)}.chord-entry-quality{color:var(--text-dim);margin-left:auto;font-size:.85rem}.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}.tips-content{flex-direction:column;gap:14px;margin:18px 0;display:flex}.tip-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:10px;padding:14px 16px}.tip-card p{color:var(--text);margin:0;line-height:1.5}.tip-card p+p,.tip-card .tip-list{margin-top:10px}.tip-list{color:var(--text);padding-left:20px;line-height:1.6}.tip-card p.tip-credit{color:var(--text-dim);margin-top:8px;font-size:.82rem}.tip-credit a{color:var(--text-dim);text-underline-offset:2px;text-decoration:underline}.tip-credit a:hover{color:var(--accent-bright)}@media (width<=480px){.note-buttons{grid-template-columns:repeat(3,1fr)}}.app-footer{text-align:center;color:var(--text-dim);margin-top:24px;font-size:.85rem}.app-footer a{color:var(--text-dim);text-underline-offset:2px;text-decoration:underline;transition:color .12s}.app-footer a:hover{color:var(--accent-bright)}