:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-bg:#f5f3ff;--color-surface:#fff;--color-primary:#6d28d9;--color-primary-dark:#5b21b6;--color-accent:#0ea5e9;--color-text:#1f2937;--color-text-muted:#6b7280;--color-correct:#16a34a;--color-incorrect:#dc2626;--color-border:#e5e7eb;--radius:14px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;margin:0}button{cursor:pointer;font-family:inherit}button:disabled{opacity:.5;cursor:default}.page{max-width:480px;min-height:100%;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);flex-direction:column;margin:0 auto;display:flex}.page__header{justify-content:space-between;align-items:center;padding:12px;display:flex}.page__title{text-align:center;flex:1;margin:0;font-size:1.1rem}.page__back-btn,.page__back-btn-spacer{width:40px;height:40px}.page__back-btn{background:var(--color-surface);border:none;border-radius:999px;font-size:1.1rem;box-shadow:0 1px 3px #0000001a}.page__content{flex-direction:column;flex:1;gap:16px;padding:8px 16px 24px;display:flex}.home-menu{flex-direction:column;gap:14px;margin-top:12px;display:flex}.home-menu__item{border-radius:var(--radius);background:var(--color-surface);text-align:left;color:var(--color-text);border:none;align-items:center;gap:14px;padding:20px;font-size:1.05rem;display:flex;box-shadow:0 2px 8px #6d28d914}.home-menu__icon{font-size:1.8rem}.home-menu__label{font-weight:600}.home-menu__desc{color:var(--color-text-muted);font-size:.8rem;font-weight:400;display:block}.chip-group{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:999px;min-height:40px;padding:10px 14px;font-size:.95rem}.chip.is-selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.settings-section{background:var(--color-surface);border-radius:var(--radius);padding:16px}.settings-section__title{color:var(--color-text);margin:0 0 10px;font-size:.95rem;font-weight:700}.tempo-control{gap:8px;display:grid}.tempo-control__label,.tempo-control__bounds{justify-content:space-between;align-items:center;display:flex}.tempo-control__label{font-size:.9rem;font-weight:600}.tempo-control__value{align-items:center;gap:8px;display:flex}.tempo-control__label output{color:var(--color-primary);font-variant-numeric:tabular-nums;font-size:1.05rem}.tempo-control__cleared{color:#15803d;background:#dcfce7;border-radius:999px;padding:2px 7px;font-size:.72rem;font-weight:800}.tempo-control input[type=range]{width:100%;min-height:40px;accent-color:var(--color-primary)}.tempo-control__bounds,.tempo-control__help{color:var(--color-text-muted);font-size:.75rem}.tempo-control__help{margin:0}.settings-section__bulk{gap:8px;margin-bottom:10px;display:flex}.settings-section__bulk-btn{border:1px solid var(--color-border);background:#f9fafb;border-radius:8px;padding:6px 12px;font-size:.8rem}.start-btn{border-radius:var(--radius);background:var(--color-primary);color:#fff;border:none;padding:16px;font-size:1.1rem;font-weight:700;box-shadow:0 4px 12px #6d28d959}.start-btn:disabled{box-shadow:none;background:#9ca3af}.play-hud{flex-direction:column;gap:8px;display:flex}.play-hud__timer{color:var(--color-primary);align-self:center;font-size:1.6rem;font-weight:800}.play-hud__timer.is-urgent{color:var(--color-incorrect);animation:.6s infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.play-hud__stats{color:var(--color-text-muted);justify-content:space-between;font-size:.85rem;display:flex}.play-hud__stat--correct{color:var(--color-correct)}.play-hud__stat--incorrect{color:var(--color-incorrect)}.question-card{background:var(--color-surface);border-radius:var(--radius);text-align:center;padding:24px 16px;box-shadow:0 2px 8px #0000000f}.question-card__text{margin:0;font-size:1.3rem;font-weight:700}.answer-preview{min-height:32px;color:var(--color-primary);letter-spacing:2px;font-size:1.2rem;font-weight:700}.reference-btn{border:1px solid var(--color-primary);color:var(--color-primary);background:#fff;border-radius:999px;align-self:center;padding:8px 16px;font-size:.85rem}.note-pad{flex-direction:column;gap:10px;display:flex}.note-pad__accidentals{justify-content:center;gap:10px;display:flex}.note-pad__accidental-btn{border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:10px;width:56px;height:44px;font-size:1.1rem}.note-pad__accidental-btn.is-selected{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.note-pad__letters{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.note-pad__letter-btn{background:var(--color-primary);color:#fff;border:none;border-radius:12px;min-height:56px;font-size:1.15rem;font-weight:700}.note-pad__letter-btn:active{background:var(--color-primary-dark)}.chord-sequence{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.chord-sequence__slot{border:1.5px dashed var(--color-border);min-width:44px;height:44px;color:var(--color-primary);border-radius:10px;justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;display:flex}.chord-sequence__slot.is-filled{background:#ede9fe;border-style:solid}.chord-controls{justify-content:center;gap:10px;display:flex}.chord-controls__btn{border:1px solid var(--color-border);background:var(--color-surface);border-radius:10px;padding:10px 16px;font-size:.9rem}.key-answer-pad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.key-answer-pad__btn{background:var(--color-primary);color:#fff;border:none;border-radius:10px;min-height:48px;font-size:1rem;font-weight:700}.staff{width:100%;max-width:260px;margin:0 auto;display:block}.staff svg{display:block}.grand-staff{max-inline-size:100%;margin:0 auto;display:block}.grand-staff svg{width:100%;height:auto;display:block}.grand-staff--large{width:min(92vw,420px)}.grand-staff--normal{width:min(72vw,320px)}.grand-staff--real{width:min(50vw,220px)}.continuous-reading-status{text-align:center;color:var(--color-primary);font-size:.95rem;font-weight:800}.continuous-reading-status span{color:var(--color-text-muted);font-weight:600}.continuous-reading-card{background:var(--color-surface);border-radius:var(--radius);padding:14px 8px 10px;overflow:visible;box-shadow:0 2px 8px #0000000f}.continuous-reading-card>p{color:var(--color-text-muted);text-align:center;margin:8px 8px 0;font-size:.78rem}.continuous-grand-staff{max-inline-size:100%;margin:0 auto;position:relative;overflow:visible}.continuous-grand-staff--large{inline-size:min(100%,448px)}.continuous-grand-staff--normal{inline-size:min(94%,416px)}.continuous-grand-staff--real{inline-size:min(88%,384px)}.continuous-grand-staff__notation svg{inline-size:100%;display:block}.continuous-grand-staff__cursor{background:var(--color-incorrect);pointer-events:none;border-radius:999px;width:3px;transition:left .11s linear;position:absolute;top:8%;bottom:9%;transform:translate(-50%);box-shadow:0 0 0 3px #dc26262e}.continuous-reading-pause{border:1px solid var(--color-primary);background:var(--color-surface);color:var(--color-primary);border-radius:999px;align-self:center;padding:10px 18px;font-weight:700}.continuous-reading-answer-status{min-height:1.5em;color:var(--color-text-muted);text-align:center;margin:-4px 0 0;font-size:.85rem;font-weight:700}@media (width<=360px){.continuous-grand-staff--normal{inline-size:min(96%,416px)}.continuous-grand-staff--real{inline-size:min(90%,384px)}}@media (prefers-reduced-motion:reduce){.continuous-grand-staff__cursor,.play-hud__timer.is-urgent{transition:none;animation:none}}.dual-note-pad{flex-direction:column;gap:14px;display:flex}.dual-note-pad__row{flex-direction:column;gap:6px;display:flex}.dual-note-pad__row-label{color:var(--color-text-muted);text-align:center;font-size:.8rem;font-weight:700}.dual-note-pad__letters{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.dual-note-pad__letter-btn{background:var(--color-primary);color:#fff;border:none;border-radius:10px;min-height:52px;font-size:1rem;font-weight:700}.dual-note-pad__letter-btn.is-selected{background:var(--color-accent);outline-offset:-3px;outline:3px solid #0369a1}.dual-note-pad__row--treble .dual-note-pad__letter-btn.is-selected{background:#16a34a;outline-color:#15803d}.dual-note-pad__row--bass .dual-note-pad__letter-btn.is-selected{background:#ea580c;outline-color:#c2410c}.feedback-flash{color:#fff;z-index:20;white-space:nowrap;border-radius:999px;padding:10px 20px;font-weight:700;position:fixed;bottom:90px;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #0003}.feedback-flash--correct{background:var(--color-correct)}.feedback-flash--incorrect{background:var(--color-incorrect)}.result-score{text-align:center;background:var(--color-surface);border-radius:var(--radius);padding:20px}.result-score__value{color:var(--color-primary);font-size:2.6rem;font-weight:800}.result-score__new-record{color:#78350f;background:#fbbf24;border-radius:999px;margin-top:8px;padding:4px 12px;font-size:.8rem;font-weight:800;display:inline-block}.result-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.result-grid__item{background:var(--color-surface);text-align:center;border-radius:10px;padding:12px}.result-grid__label{color:var(--color-text-muted);font-size:.75rem}.result-grid__value{font-size:1.2rem;font-weight:700}.result-actions{flex-direction:column;gap:10px;display:flex}.result-actions__btn{border:none;border-radius:12px;padding:14px;font-size:1rem;font-weight:700}.result-actions__btn--primary{background:var(--color-primary);color:#fff}.result-actions__btn--secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.wrong-list{flex-direction:column;gap:10px;display:flex}.wrong-item{background:var(--color-surface);border-radius:10px;padding:12px 14px}.wrong-item__question{margin-bottom:6px;font-weight:700}.wrong-item__row{color:var(--color-text-muted);font-size:.9rem}.wrong-item__row--correct{color:var(--color-correct)}.wrong-item__row--wrong{color:var(--color-incorrect)}.history-empty{text-align:center;color:var(--color-text-muted);padding:40px 0}.history-select{border:1px solid var(--color-border);background:var(--color-surface);width:100%;color:var(--color-text);border-radius:10px;padding:10px 12px;font-size:.85rem}.history-single-group{color:var(--color-text-muted);text-align:center;margin:0;font-size:.85rem}.history-hero{text-align:center;padding:8px 0 2px}.history-hero__label{color:var(--color-text-muted);font-size:.8rem;font-weight:600}.history-hero__value{color:var(--color-primary);font-variant-numeric:proportional-nums;font-size:3rem;font-weight:800;line-height:1.1}.history-hero__sub{color:var(--color-text-muted);font-size:.8rem}.history-chart-card{background:var(--color-surface);border-radius:var(--radius);flex-direction:column;gap:4px;padding:14px 4px 6px;display:flex}.history-metric-toggle{justify-content:center;gap:4px;padding:0 10px;display:flex}.history-metric-toggle__btn{color:var(--color-text-muted);background:0 0;border:none;border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600}.history-metric-toggle__btn.is-selected{color:var(--color-primary);background:#ede9fe}.history-chart{width:100%;height:160px}.history-tooltip{background:var(--color-text);color:#fff;border-radius:10px;max-width:250px;padding:8px 12px;font-size:.75rem;box-shadow:0 4px 14px #00000040}.history-tooltip__value{font-size:1.2rem;font-weight:800}.history-tooltip__label{opacity:.85;margin-top:1px}.history-tooltip__meta{opacity:.7;margin-top:4px;line-height:1.4}.history-stat-strip{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.history-stat-strip__item{background:var(--color-surface);text-align:center;border-radius:10px;padding:10px 4px}.history-stat-strip__value{color:var(--color-text);font-size:1.05rem;font-weight:700}.history-stat-strip__label{color:var(--color-text-muted);margin-top:2px;font-size:.65rem}.modal-overlay{z-index:30;background:#0006;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-sheet{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:480px;max-height:80vh;padding:20px;overflow-y:auto}.modal-sheet__close{background:var(--color-primary);color:#fff;border:none;border-radius:999px;margin:16px auto 0;padding:10px 24px;font-weight:700;display:block}.key-reference-table{border-collapse:collapse;text-align:center;width:100%}.key-reference-table th,.key-reference-table td{border-bottom:1px solid var(--color-border);padding:8px 4px}@media (width>=480px){.page{box-shadow:0 0 24px #0000000f}}