@font-face{font-family:Bravura;src:url('assets/Bravura.otf') format('opentype');font-display:block}
:root{--answer-pitch-size:24px;color-scheme:light;--ink:#263e38;--muted:#78817a;--accent:#315e50;--paper:#fffefb;--border:#e2e5de;--green:#257046;--red:#a13c37;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#f5f4ef;color:var(--ink);min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #517eac;outline-offset:4px}button{touch-action:manipulation} [hidden]{display:none!important}
.toolbar{background:#fffefbd9;border-bottom:1px solid var(--border)}.toolbar-inner{max-width:1180px;margin:auto;min-height:98px;padding:20px 32px;display:flex;justify-content:space-between;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:40px;height:40px;flex-shrink:0;object-fit:contain}.brand-mark rect{fill:var(--accent)}.brand-mark path{stroke:#fff;stroke-width:2.6;fill:none}.brand-mark ellipse{fill:#fff}h1{font-size:19px;font-weight:650;letter-spacing:-.5px;margin:0}.brand p{font-size:12px;color:var(--muted);margin:5px 0 0}.toolbar-controls{display:flex;align-items:center;gap:30px}.metric{display:grid;gap:6px;min-width:65px}.metric-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em}.metric strong{font-size:17px;line-height:1.3;font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}.accuracy-metric{min-width:134px}.icon-button{display:flex;gap:8px;align-items:center;background:transparent;border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--ink);font-size:13px}.icon-button:hover{background:#edf0e9}.icon-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:var(--paper)}.progress-track{height:3px;background:#edf0e9}.progress-track>div{height:100%;width:0;background:#7b9b88;transition:width .25s ease}
main{max-width:900px;margin:30px auto 0;padding:0 24px}.practice-card{padding:26px 30px 14px;background:var(--paper);border:1px solid var(--border);border-radius:20px;box-shadow:0 8px 30px #263e3805}.card-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:38px}.question-meta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);white-space:nowrap}.clef-badge{background:#eef1e9;border:1px solid #e1e7dc;border-radius:6px;padding:6px 9px;color:#466247;font-weight:600}.correction{font-size:14px;font-weight:650;color:var(--red);text-align:right;height:24px;min-height:24px;display:flex;align-items:center;justify-content:flex-end;gap:.35em;line-height:24px;white-space:nowrap}.notation{width:100%;height:285px;display:flex;align-items:center;justify-content:center}.notation svg{width:100%;height:100%;overflow:visible;color:#17251f}.music-glyph{font-family:Bravura;font-size:112px}.staff-line,.ledger-line{stroke:currentColor;stroke-width:1.4}.ledger-line{stroke-width:1.65}.answer-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0 14px}.answer-heading h2{font-size:15px;font-weight:600;margin:0}.answer-heading span{font-size:12px;color:var(--muted)}.answer-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.answer-button{height:65px;border:1px solid #dfe3dc;border-radius:10px;background:#f8f9f5;color:#293c33;font-size:var(--answer-pitch-size);font-weight:450;position:relative;transition:background-color .1s,border-color .1s;user-select:none}.answer-button:hover:not(:disabled){background:#eef2e9;border-color:#a7b6a4}.answer-button:active:not(:disabled){transform:translateY(1px)}.answer-button.is-wrong,.answer-button.is-wrong:hover{background:#f8dedb;border-color:#d9938e;color:#9c2f2d}.answer-button.is-correct,.answer-button.is-correct:disabled{background:#d6eddd;border-color:#84b495;color:#175f37}.answer-button.is-wrong::after{content:'×';position:absolute;right:7px;top:3px;font-size:14px}.answer-button.is-correct::after{content:'✓';position:absolute;right:7px;top:5px;font-size:11px}.answer-button:disabled:not(.is-correct):not(.is-wrong){color:#92988f;background:#f5f6f2;border-color:#e8ebe3}.pitch-label{display:inline-flex;align-items:baseline;font-size:1em;font-weight:450;line-height:1.2;white-space:nowrap}.pitch-label .accidental{font-family:Arial,sans-serif;font-size:1em;margin-left:.083333em}.pitch-label .accidental-flat{margin-left:-.06em}.pitch-label .accidental:empty{display:none}.correction .pitch-label{font-size:calc(var(--answer-pitch-size) * .825)}.feedback{min-height:22px;margin:18px 0 2px;text-align:center;font-size:13px;line-height:1.5;color:var(--muted)}.feedback[data-tone="wrong"]{color:var(--red)}.feedback[data-tone="correct"]{color:var(--green)}.page-footer{display:flex;justify-content:space-between;padding:18px 4px 24px;color:#888e83;font-size:11px}.primary-button,.secondary-button{border:0;border-radius:9px;padding:12px 18px;font-size:14px;font-weight:550}.primary-button{background:var(--accent);color:white}.primary-button:hover{background:#254a3d}.secondary-button{background:#eef1e9;color:var(--ink)}.text-button{border:0;background:none;color:#68776a;font-size:13px;text-decoration:underline;text-underline-offset:3px}.results-card{text-align:center;padding:48px 32px}.completion-mark{display:grid;place-items:center;border-radius:50%;background:#e5efdf;color:#416541;width:64px;height:64px;font-size:26px;margin:0 auto 24px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.results-card h2{font-size:36px;letter-spacing:-1.2px;font-weight:550;margin:12px 0}.results-description{color:var(--muted);font-size:14px;line-height:1.7}.results-metrics{display:flex;justify-content:center;gap:70px;margin:38px 0}.results-metrics div{display:grid;gap:12px}.results-metrics span{font-size:12px;color:var(--muted)}.results-metrics strong{font-size:44px;font-weight:450;font-variant-numeric:tabular-nums}.result-accuracy{font-size:15px;margin:0 0 32px}.result-accuracy strong{font-variant-numeric:tabular-nums}#restart-results span{margin-left:22px}
dialog{border:1px solid var(--border);border-radius:18px;background:var(--paper);padding:28px;width:min(440px,calc(100vw - 32px));color:var(--ink);box-shadow:0 20px 70px #162a322e}dialog::backdrop{background:#1f322e66;backdrop-filter:blur(3px)}dialog h2{font-size:23px;letter-spacing:-.5px;margin:0}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.close-button{border:0;background:#eef1e9;color:var(--ink);border-radius:50%;width:29px;height:29px;font-size:22px}.dialog-description,dialog>p{font-size:14px;color:#69756a;line-height:1.6}fieldset{border:0;margin:25px 0 0;padding:0}legend{font-size:12px;font-weight:650;margin:0 0 12px}.clef-option{display:flex;align-items:center;gap:13px;border:1px solid var(--border);border-radius:9px;padding:13px;margin-bottom:9px;cursor:pointer}.clef-option:has(input:checked){border-color:#769383;background:#eef3e9}.clef-option input{accent-color:var(--accent)}.clef-option span{display:grid;gap:4px}.clef-option strong{font-size:14px;font-weight:550}.clef-option small{font-size:12px;color:var(--muted)}.settings-note{font-size:12px;color:var(--muted);line-height:1.5;margin:19px 0 25px}.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px}.asset-error{text-align:center;background:#fae7df;color:#8a352b;border-radius:12px;padding:25px;margin:20px 0}.asset-error h2{font-size:20px}.asset-error p{font-size:14px;line-height:1.6}
@media(max-width:800px){.toolbar-inner{padding:18px 24px;gap:16px}.brand p{display:none}.brand-mark{width:34px;height:34px}h1{max-width:135px;font-size:16px}.toolbar-controls{gap:20px}.icon-button span{display:none}.accuracy-metric{min-width:125px}main{margin-top:24px}.notation{height:260px}}
@media(max-width:560px){:root{--answer-pitch-size:21px}.toolbar-inner{flex-wrap:wrap;padding:16px 20px;gap:20px}.brand{width:100%}h1{max-width:none;font-size:18px}.brand p{display:block}.toolbar-controls{width:100%;justify-content:space-between;gap:10px}.icon-button span{display:inline}.metric strong{font-size:15px}.metric-label{font-size:10px}.accuracy-metric{min-width:119px}.toolbar-inner{min-height:0}main{padding:0 12px;margin-top:16px}.practice-card{padding:16px 12px 12px;border-radius:14px}.card-topline{align-items:flex-start;flex-direction:column;gap:8px;min-height:62px}.correction{align-self:flex-end;font-size:13px}.notation{height:230px}.answer-heading h2{font-size:13px}.answer-heading span{font-size:10px}.answer-grid{gap:5px}.answer-button{height:56px;font-size:var(--answer-pitch-size);border-radius:7px}.answer-button.is-wrong::after,.answer-button.is-correct::after{font-size:9px;right:3px;top:2px}.feedback{font-size:11px}.page-footer{font-size:9px;padding-top:13px}.results-metrics{gap:35px}.results-card{padding:35px 20px}.dialog-actions{gap:9px}.dialog-actions button{font-size:12px;padding:11px}}
@media(max-height:760px) and (min-width:561px){.toolbar-inner{min-height:80px;padding-top:14px;padding-bottom:14px}main{margin-top:20px}.notation{height:220px}.answer-button{height:58px}.practice-card{padding-top:20px}.page-footer{padding-top:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
.notation[aria-busy="true"] svg{visibility:hidden}