@font-face{font-family:Bravura;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/bravura-latin-400-normal-BVtSfpnN.woff2)format("woff2"),url(/assets/bravura-latin-400-normal-029JyKns.woff)format("woff")}:root{--color-bg:#0c1017;--color-bg-elevated:#121820;--color-surface:#161d28;--color-surface-raised:#1e2736;--color-border:#2a3547;--color-border-subtle:#1f2836;--color-text:#eef2f7;--color-text-muted:#7d8da3;--color-accent:#cc2929;--color-accent-hover:#e83333;--color-accent-soft:#cc292924;--color-correct:#45b07a;--color-incorrect:#d66a6a;--color-staff-line:#d5dee8;--color-staff-line-dim:#d5dee873;--color-note-inactive:#a8b0bc;--color-note-inactive-opacity:.6;--color-note-active:#fff;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "Cascadia Code", monospace;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:2.5rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--layout-max-width:680px;--staff-max-width:640px}.app-shell{min-height:100vh;padding:var(--space-md) var(--space-md) var(--space-lg);flex-direction:column;align-items:center;display:flex}.app-shell__header{width:100%;max-width:var(--layout-max-width);margin-bottom:var(--space-md);text-align:center}.app-shell__title{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);margin:0;font-size:clamp(1.125rem,2.5vw,1.375rem);font-weight:600}.app-shell__subtitle{margin:var(--space-xs) 0 0;color:var(--color-text-muted);opacity:.75;font-size:.8125rem}.app-shell__main{width:100%;max-width:var(--layout-max-width)}.setup-screen{align-items:center;gap:var(--space-lg);padding:var(--space-xl) var(--space-md) var(--space-lg);flex-direction:column;justify-content:flex-start;min-height:min(100vh - 2rem,720px);display:flex}.setup-screen__title{letter-spacing:.08em;text-transform:uppercase;text-align:center;color:#cc2929;margin:0;font-size:clamp(1.75rem,5vw,2.25rem);font-weight:700}.setup-screen__start-over{appearance:none;color:var(--color-text-muted);font-family:var(--font-sans);cursor:pointer;text-underline-offset:.2em;opacity:.85;background:0 0;border:none;padding:0;font-size:.8125rem;text-decoration:underline;transition:opacity .15s,color .15s}.setup-screen__start-over:hover{opacity:1;color:#cc2929}.setup-screen__settings{align-items:center;gap:var(--space-md);flex-direction:column;width:100%;max-width:45rem;margin-inline:auto;display:flex}.setup-screen__section{border:none;width:100%;margin:0;padding:0;animation:.22s ease-out setup-section-reveal}@keyframes setup-section-reveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.setup-screen__section-title{margin:0 0 var(--space-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);text-align:center;width:100%;font-size:.75rem;font-weight:600}.setup-screen__section-subtitle{margin:0 0 var(--space-xs);letter-spacing:.03em;color:var(--color-text-muted);text-align:center;font-size:.75rem}.setup-screen__card-grid{gap:var(--space-xs);grid-template-columns:1fr;width:100%;max-width:26rem;margin-inline:auto;display:grid}.setup-screen__card-wrap{width:100%;display:block}.setup-screen__card-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.setup-screen__card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface-raised);width:100%;padding:var(--space-sm) var(--space-md);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;display:block}.setup-screen__card-title{color:#cc2929;font-size:.95rem;font-weight:700;display:block}.setup-screen__card-description{color:var(--color-text-muted);margin-top:.15rem;font-size:.8rem;line-height:1.35;display:block}.setup-screen__card-input:checked+.setup-screen__card,.setup-screen__card-input:checked+.setup-screen__option-card{background:var(--color-surface-raised);border-color:var(--color-accent);box-shadow:0 0 0 1px #6eb5e873}.setup-screen__card-input:focus-visible+.setup-screen__card,.setup-screen__card-input:focus-visible+.setup-screen__option-card{outline:2px solid var(--color-accent);outline-offset:2px}.setup-screen__card--selected{border-color:var(--color-accent);cursor:default;box-shadow:0 0 0 1px #6eb5e873}.setup-screen__selection{align-items:center;gap:var(--space-xs);flex-direction:column;width:100%;max-width:26rem;margin-inline:auto;display:flex}.setup-screen__change-link{appearance:none;color:var(--color-text-muted);font-family:var(--font-sans);cursor:pointer;text-underline-offset:.2em;background:0 0;border:none;padding:0;font-size:.8125rem;text-decoration:underline;transition:color .15s}.setup-screen__change-link:hover{color:#cc2929}.setup-screen__option-grid{gap:var(--space-xs);grid-template-columns:1fr;width:100%;max-width:26rem;margin-inline:auto;display:grid}.setup-screen__section--note-set .setup-screen__option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.setup-screen__section--challenge .setup-screen__option-grid{grid-template-columns:1fr}.setup-screen__section--challenge .setup-screen__option-card{text-align:left;justify-content:space-between;align-items:center;gap:1rem;min-height:2.75rem}.setup-screen__option-wrap{width:100%;display:block}.setup-screen__option-card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface-raised);width:100%;min-height:3rem;padding:var(--space-sm) var(--space-md);color:#cc2929;text-align:center;cursor:pointer;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;line-height:1.2;transition:border-color .15s,background .15s,box-shadow .15s;display:flex}.setup-screen__option-card-title{flex:none;font-weight:700;display:block}.setup-screen__option-card-subtitle{color:var(--color-text-muted);text-align:right;flex:none;font-size:.85rem;font-weight:400;display:block}.setup-screen__start{appearance:none;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-bg);font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;min-width:12rem;padding:var(--space-md) var(--space-xl);cursor:pointer;font-size:1rem;font-weight:700;transition:background .15s,border-color .15s,transform .1s;animation:.22s ease-out setup-section-reveal}.setup-screen__start:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.setup-screen__start:active{transform:scale(.98)}.gameplay-screen__header{justify-content:space-between;align-items:center;gap:var(--space-sm);min-height:1.25rem;display:flex}.gameplay-screen__key-info{flex-direction:column;gap:.125rem;min-width:0;display:flex}.gameplay-screen__key{letter-spacing:.04em;color:#cc2929;margin:0;font-size:.875rem;font-weight:600}.gameplay-screen__key-subtitle{letter-spacing:.06em;color:var(--color-text-muted);margin:0;font-size:.6875rem;font-weight:500}.gameplay-screen__home{appearance:none;color:var(--color-text-muted);font-family:var(--font-sans);padding:var(--space-xs) var(--space-sm);cursor:pointer;text-underline-offset:.2em;opacity:.7;background:0 0;border:none;font-size:.8125rem;text-decoration:underline;transition:opacity .15s,color .15s}.gameplay-screen__home:hover{opacity:1;color:#cc2929}.results-screen{padding:var(--space-xl) var(--space-md);justify-content:center;align-items:center;min-height:min(60vh,480px);display:flex}.timed-results__actions{justify-content:center;gap:var(--space-sm);flex-wrap:wrap;width:100%;display:flex}.timed-results__home{appearance:none;border:1px solid var(--color-border);border-radius:var(--radius-md);color:#cc2929;font-family:var(--font-sans);padding:var(--space-sm) var(--space-lg);cursor:pointer;background:0 0;font-size:.9375rem;font-weight:600;transition:background .15s,border-color .15s}.timed-results__home:hover{background:var(--color-surface-raised);border-color:var(--color-text-muted)}.collection-pro-tip{text-align:left;width:100%;max-width:18rem;margin-top:var(--space-xs);padding-top:var(--space-sm);border-top:1px solid var(--color-border-subtle)}.collection-pro-tip__title{margin:0 0 var(--space-xs);letter-spacing:.06em;text-transform:uppercase;color:#cc2929;font-size:.875rem;font-weight:700}.collection-pro-tip__intro{margin:0 0 var(--space-xs);color:var(--color-text-muted);font-size:.8125rem;line-height:1.45}.collection-pro-tip__list{color:#cc2929;margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.practice-screen{gap:var(--space-sm);flex-direction:column;display:flex}.difficulty-selector,.clef-selector,.mode-selector,.note-set-selector{justify-content:center;align-items:center;gap:var(--space-xs) var(--space-sm);border:none;flex-wrap:wrap;min-width:0;margin:0;padding:0;display:flex}.difficulty-selector:disabled,.clef-selector:disabled,.mode-selector:disabled,.note-set-selector:disabled{opacity:.55}.difficulty-selector__legend,.clef-selector__legend,.mode-selector__legend,.note-set-selector__legend{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin:0;padding:0;font-size:.6875rem;font-weight:500}.difficulty-selector__options,.clef-selector__options,.mode-selector__options,.note-set-selector__options{border-radius:var(--radius-md);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);flex-wrap:wrap;justify-content:center;gap:2px;padding:2px;display:inline-flex}.difficulty-selector__input,.clef-selector__input,.mode-selector__input,.note-set-selector__input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.difficulty-selector__option,.clef-selector__option,.mode-selector__option,.note-set-selector__option{border-radius:calc(var(--radius-md) - 2px);letter-spacing:.02em;color:var(--color-text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:.35rem .65rem;font-size:.75rem;font-weight:600;transition:background .15s,color .15s;display:inline-block}.difficulty-selector__input:checked+.difficulty-selector__option,.clef-selector__input:checked+.clef-selector__option,.mode-selector__input:checked+.mode-selector__option,.note-set-selector__input:checked+.note-set-selector__option{background:var(--color-accent);color:var(--color-bg)}.difficulty-selector__input:focus-visible+.difficulty-selector__option,.clef-selector__input:focus-visible+.clef-selector__option,.mode-selector__input:focus-visible+.mode-selector__option,.note-set-selector__input:focus-visible+.note-set-selector__option{outline:2px solid var(--color-accent);outline-offset:1px}.difficulty-selector:disabled .difficulty-selector__option,.clef-selector:disabled .clef-selector__option,.mode-selector:disabled .mode-selector__option,.note-set-selector:disabled .note-set-selector__option{cursor:not-allowed}.stats-bar__stat--time .stats-bar__value{font-variant-numeric:tabular-nums;text-align:center;min-width:2.5rem}.timed-results{align-items:center;gap:var(--space-lg);padding:var(--space-md) 0 var(--space-sm);text-align:center;flex-direction:column;display:flex}.timed-results__title{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text);margin:0;font-size:1.625rem;font-weight:800;line-height:1.15}.timed-results__stats{gap:var(--space-sm);width:100%;max-width:18rem;margin:0;display:grid}.timed-results__row{justify-content:space-between;align-items:baseline;gap:var(--space-md);padding:.125rem 0;font-size:1rem;line-height:1.45;display:flex}.timed-results__row dt{letter-spacing:.04em;color:var(--color-text-muted);margin:0;font-size:.8125rem;font-weight:500}.timed-results__row dd{font-variant-numeric:tabular-nums;color:var(--color-text);margin:0;font-size:1.0625rem;font-weight:600}.timed-results__row--highlight{align-items:center;gap:var(--space-xs);padding:var(--space-sm) 0 var(--space-md);margin-bottom:var(--space-xs);border-bottom:1px solid var(--color-border-subtle);flex-direction:column;line-height:1.2}.timed-results__row--highlight dt{letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);font-size:.75rem;font-weight:600}.timed-results__row--highlight dd{color:var(--color-accent);font-size:3rem;font-weight:700;line-height:1}.timed-results__play-again{appearance:none;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-bg);font-family:var(--font-sans);padding:var(--space-sm) var(--space-lg);cursor:pointer;font-size:.9375rem;font-weight:600;transition:background .15s,border-color .15s}.timed-results__play-again:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.note-display{background:var(--color-bg-elevated);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);margin-top:var(--space-md);padding:var(--space-md) var(--space-md);justify-content:center;align-items:center;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff08,0 12px 40px #00000059}.note-display__staff{width:100%;max-width:var(--staff-max-width);line-height:0}.note-display--extended{padding-top:var(--space-xl);padding-bottom:var(--space-xl);overflow:visible}.staff{width:100%;height:auto;display:block}.stats-bar{justify-content:center;align-items:center;gap:var(--space-sm) var(--space-md);flex-wrap:wrap;min-height:1.25rem;padding:0;display:flex}.stats-bar__stat{align-items:baseline;gap:.35rem;display:inline-flex}.stats-bar__label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-size:.6875rem;font-weight:500}.stats-bar__value{font-variant-numeric:tabular-nums;color:var(--color-text);font-size:.9375rem;font-weight:600}.stats-bar__stat--streak .stats-bar__value{color:var(--color-accent)}.stats-bar__sep{background:var(--color-border);flex-shrink:0;width:1px;height:.875rem}@media (width<=480px){.stats-bar__sep{display:none}.stats-bar{gap:var(--space-xs) var(--space-md)}}.practice-screen__play{gap:var(--space-sm);margin-top:var(--space-sm);flex-direction:column;display:flex}.answer-pad{flex-direction:column;display:flex}.answer-pad__buttons{gap:var(--space-sm);grid-template-columns:repeat(7,1fr);display:grid}@media (width<=560px){.answer-pad__buttons{grid-template-columns:repeat(4,1fr)}}.answer-button{appearance:none;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-raised);color:var(--color-text);font-family:var(--font-sans);min-height:3.25rem;padding:var(--space-md) var(--space-sm);cursor:pointer;font-size:clamp(1.125rem,2.5vw,1.375rem);font-weight:700;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}.answer-button:hover:not(:disabled){background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);box-shadow:0 4px 16px #6eb5e840}.answer-button:active:not(:disabled){transform:scale(.97)}.answer-button:disabled{opacity:.45;cursor:not-allowed}.answer-button--correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.answer-button--incorrect{background:var(--color-incorrect);border-color:var(--color-incorrect);color:#fff}.practice-screen__feedback{text-align:center;color:#0000;-webkit-user-select:none;user-select:none;min-height:1rem;margin:0;font-size:.8125rem;line-height:1rem}.practice-screen__feedback--correct{color:var(--color-correct)}.practice-screen__feedback--incorrect{color:var(--color-incorrect)}.practice-screen__actions{margin-top:calc(var(--space-xs) * -1);justify-content:center;display:flex}.practice-screen__reset{appearance:none;color:var(--color-text-muted);font-family:var(--font-sans);padding:var(--space-xs) var(--space-sm);cursor:pointer;text-underline-offset:.2em;opacity:.7;background:0 0;border:none;font-size:.8125rem;text-decoration:underline;transition:opacity .15s,color .15s}.practice-screen__reset:hover{opacity:1;color:var(--color-text)}*,:before,:after{box-sizing:border-box}html{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}button{font-family:inherit}.staff__line{stroke:var(--color-staff-line-dim);stroke-width:1.75px}.staff__glyph--clef{fill:var(--color-staff-line)}.staff__ledger-line{stroke:var(--color-staff-line);stroke-width:1.75px}.staff__note--inactive .staff__ledger-line{stroke:var(--color-note-inactive);opacity:var(--color-note-inactive-opacity)}.staff__stem{stroke:var(--color-note-inactive);opacity:var(--color-note-inactive-opacity);stroke-linecap:butt}.staff__stem--active{stroke:var(--color-note-active);opacity:1;stroke-width:1.4px}.staff__note-head{fill:var(--color-note-inactive);opacity:var(--color-note-inactive-opacity);stroke:none}.staff__note-head--active{fill:var(--color-note-active);opacity:1;stroke:none}.staff__note--inactive .staff__accidental{fill:var(--color-note-inactive);opacity:var(--color-note-inactive-opacity)}.staff__note--active .staff__accidental{fill:var(--color-note-active);opacity:1}.staff__key-signature-glyph{fill:var(--color-staff-line);opacity:1}.staff defs{pointer-events:none}