:root{color-scheme:dark;--cyan:#00c5d4;--cyan-soft:#003c42;--bg:#000;--card:#1c1c1e;--muted:#929297;--line:#38383a;--green:#30d158;--red:#ff453a;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f7f7f8;background:var(--bg);font-synthesis:none;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button:disabled{cursor:default}button:disabled:not(.note-buttons button){opacity:.45}a{color:var(--cyan);text-underline-offset:3px}[hidden]{display:none!important}.app{width:100%;max-width:780px;margin:0 auto;min-height:100vh;min-height:100dvh}.app-header{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;min-height:80px;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;background:#000e;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}h1{margin:0;text-align:center;font-size:21px;font-weight:650;letter-spacing:-.5px}.round-button{width:44px;height:44px;border-radius:50%;background:linear-gradient(#29292b,#171719);border:1px solid #3b3b3d;display:grid;place-items:center;font-size:29px;line-height:1}.round-button svg{width:30px;height:30px}.settings-screen{padding:20px 18px calc(115px + var(--safe-bottom))}.card{background:var(--card);border-radius:26px;padding:0 17px;overflow:hidden}.intro{padding:21px 18px}.intro h2{display:flex;align-items:center;gap:14px;font-size:25px;margin:0;padding-bottom:17px;border-bottom:1px solid var(--line);letter-spacing:-.6px}.intro h2 span{font-size:43px;line-height:1;color:var(--cyan)}.intro p{color:var(--muted);font-size:18px;line-height:1.4;margin:17px 0 0}.setting-section{margin-top:27px}.setting-section>h2{font-size:18px;line-height:1.3;color:var(--muted);font-weight:600;margin:0 16px 12px}.card fieldset{border:0;margin:0;padding:16px 0;border-bottom:1px solid var(--line);min-width:0}.segmented{display:flex;background:#303034;border-radius:999px;padding:3px;gap:2px}.segmented button{flex:1;min-width:0;min-height:36px;padding:5px 8px;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:550}.segmented button[aria-pressed=true]{background:#68686e;box-shadow:0 1px 5px #0002}.card-row{padding:16px 0;margin:0;font-size:18px;line-height:1.4;border-bottom:1px solid var(--line)}.card-row:last-child{border:0}.muted{color:var(--muted)}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.switch{appearance:none;-webkit-appearance:none;width:55px;height:32px;flex:0 0 55px;border-radius:99px;background:#57575d;margin:0;position:relative;transition:background .15s}.switch:after{content:'';width:28px;height:28px;position:absolute;left:2px;top:2px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003;transition:transform .15s}.switch:checked{background:var(--cyan)}.switch:checked:after{transform:translateX(23px)}.tempo-row{display:flex;align-items:center;justify-content:space-between}.stepper{display:flex;background:#303034;border-radius:99px;padding:3px}.stepper button{border:0;background:transparent;color:#eee;font-size:26px;line-height:1;min-width:44px;min-height:34px}.stepper button+button{border-left:1px solid #555}input[type=range]{width:100%;height:30px;accent-color:var(--cyan);margin:0}.tempo-disabled{color:var(--muted)}.information{padding:0 17px}.link-row{display:flex;align-items:center;gap:12px;width:100%;padding:18px 0;border:0;background:transparent;text-align:left;font-size:18px;min-height:60px}.link-row span:first-child{color:var(--cyan);font-size:25px}.link-row span:last-child{margin-left:auto;color:var(--muted)}.signature{text-align:center;color:#777;font-size:12px;margin:24px 0 4px}.start-bar{position:fixed;z-index:6;left:0;right:0;bottom:0;max-width:780px;margin:auto;padding:14px 18px calc(14px + var(--safe-bottom));background:#1c1c1ef0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.primary,.secondary,.text-button,.danger{border:0;border-radius:999px;min-height:44px;padding:10px 17px;font-size:18px;line-height:1.25}.primary{background:var(--cyan);color:white;font-weight:550}.primary:hover{filter:brightness(1.08)}.primary:active,.secondary:active{transform:scale(.98)}.primary.big{min-height:54px;font-size:22px;width:100%}.primary span{font-size:.85em;margin-right:5px}.secondary{color:var(--cyan);background:var(--cyan-soft)}.text-button{background:transparent;color:var(--cyan)}.danger{background:#421e20;color:#ff9998}.green{color:var(--green)}.red{color:var(--red)}.gray{color:#9b9b9f}.stats-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--card);border-radius:23px;padding:10px 8px;text-align:center;gap:8px}.stats-card strong{display:block;font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.15}.stats-card span{display:block;color:#9b9b9f;font-size:14px;margin-top:5px}.practice-description{color:var(--muted);font-size:16px;text-align:center;margin:0}.score-panel{position:relative;overflow:hidden;min-height:0;border-radius:25px;background:var(--card)}#staff{position:absolute;inset:0;width:100%;height:100%}#staff .staff-line{stroke:#bdbdc2;stroke-width:1.65}#staff .clef{fill:#fff}#staff .note-head{fill:#fff}#staff .ledger,#staff .stem{stroke:#fff;stroke-linecap:round}#staff .ledger{stroke-width:1.8}#staff .stem{stroke-width:3}#staff .correct .note-head{fill:var(--green)}#staff .wrong .note-head{fill:var(--red)}#staff .correct .stem{stroke:var(--green)}#staff .wrong .stem{stroke:var(--red)}.answer-feedback{min-height:44px;margin:0;text-align:center;font-size:17px;line-height:1.3;display:flex;align-items:center;justify-content:center;padding:0 5px;overflow-wrap:anywhere}.answer-feedback.success{color:var(--green)}.answer-feedback.error{color:var(--red)}.rhythm-label{font-size:14px;color:var(--muted);text-align:center;margin:0}.practice-dock{border-radius:24px 24px 0 0;background:#1c1c1e;padding:10px 12px calc(12px + var(--safe-bottom));margin:0 -12px}.note-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;padding:4px 0 10px}.note-buttons button{min-width:0;min-height:48px;border:1px solid #007580;border-radius:16px;background:linear-gradient(#133a3e,#163e43);box-shadow:inset 0 3px 0 #18282b,0 4px 0 #00616a;color:#fff;font-size:20px;font-weight:700;padding:8px 4px;transition:box-shadow .08s,background .08s,transform .08s;user-select:none;-webkit-user-select:none}.note-buttons button:active,.note-buttons button.pressed{box-shadow:inset 0 5px 9px #0008,0 1px 0 #00454d;transform:translateY(3px);background:#11292d}.note-buttons button:disabled{color:#a0abad;opacity:.8}.note-buttons button.hit-correct{border-color:var(--green);background:#17432b;color:#c6ffda}.note-buttons button.hit-wrong{border-color:var(--red);background:#492626;color:#ffb3b0}.practice-controls{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;padding-top:8px}.practice-controls .primary,.practice-controls .secondary{font-size:18px;white-space:nowrap;padding:10px 12px}.mute-button{border:0;color:var(--cyan);background:transparent;min-height:44px;width:44px;padding:8px}.mute-button svg{width:28px;height:28px;display:block}.pause-banner{background:#3b2c1e;border-radius:17px;display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:10px}.pause-circle{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#3b2c1e;background:#fff;font-size:18px;font-weight:700}.pause-banner strong{display:block;font-size:17px}.pause-banner div>span{display:block;font-size:13px;margin-top:2px;color:#dfd5cb}body[data-screen=practice]{height:100vh;height:100dvh;overflow:hidden}body[data-screen=practice] .app{height:100%;min-height:0;max-width:1000px;display:flex;flex-direction:column}body[data-screen=practice] .app-header{position:relative;flex-shrink:0;min-height:64px}body[data-screen=practice] .practice-screen{padding:4px 12px 0;display:grid;grid-template-rows:auto auto minmax(100px,1fr) auto 4px auto auto;gap:12px;flex:1;min-height:0}.summary-screen{padding:18px 22px 40px;text-align:center;max-width:640px;margin:auto}.complete-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--cyan);color:#000;font-size:30px;font-weight:600;margin:16px auto 25px}.summary-screen h2{font-size:29px;margin:0 0 19px;letter-spacing:-.8px}.summary-description{font-size:20px;color:var(--muted);margin:0 0 24px}.summary-screen .stats-card{margin:0 -4px 24px;padding:13px 8px}.summary-screen h3{font-size:28px;margin:0 0 12px}.summary-screen #summaryTotals{font-size:18px;margin:0 0 10px;line-height:1.35}#activeTime{font-size:18px;margin:0}.summary-note{font-size:16px;line-height:1.4;margin:24px 0}.summary-actions{display:flex;flex-direction:column;align-items:center;gap:16px}.summary-actions button{font-size:20px;max-width:100%}.summary-actions .text-button{max-width:360px}dialog{width:min(680px,calc(100vw - 24px));max-height:88vh;max-height:88dvh;border:1px solid #38383a;background:#121214;color:#f7f7f8;border-radius:25px;padding:0;box-shadow:0 20px 80px #000c}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-header{position:sticky;top:0;z-index:2;background:#1c1c1e;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}.dialog-header h2{font-size:19px;margin:0}.round-button.small{width:36px;height:36px;font-size:26px}.dialog-content,.history-list{padding:16px 18px}.dialog-footer{position:sticky;bottom:0;background:#1c1c1e;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line)}.dialog-footer button{font-size:15px}.dialog-footer button:only-child{margin-left:auto}.history-entry{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);padding:16px 0;color:#fff;background:transparent}.history-entry:first-child{padding-top:0}.history-entry strong{display:block;font-size:17px}.history-entry .history-date{color:var(--muted);font-size:13px;display:block;margin:5px 0 9px}.history-stats{display:flex;gap:15px;font-size:14px;flex-wrap:wrap}.empty{text-align:center;padding:35px 10px;color:var(--muted);line-height:1.5}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap}th,td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:center;font-variant-numeric:tabular-nums}th{color:var(--muted);font-size:12px}th:first-child,td:first-child{text-align:left;padding-left:0}.comparison-text{font-size:16px;line-height:1.45;margin:2px 0 15px}.small-text{font-size:13px;line-height:1.5}.prose p{font-size:15px;line-height:1.6;color:#c9c9cc}.prose h3{font-size:18px}.about-logo{display:block;width:72px;height:72px;border-radius:16px;margin:auto}.toast{position:fixed;z-index:30;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 30px);padding:13px 17px;border:1px solid #555;background:#29292d;border-radius:14px;font-size:14px;box-shadow:0 8px 30px #0008;opacity:0;pointer-events:none}.toast.show{opacity:1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:700px){.settings-screen{padding-top:28px}.card-row{padding:19px 0}.setting-section>h2{font-size:19px}.settings-screen .intro h2{font-size:29px}body[data-screen=practice] .practice-screen{padding-left:22px;padding-right:22px;gap:16px}.practice-dock{margin:0 -22px;padding-left:22px;padding-right:22px}.note-buttons{gap:13px}.note-buttons button{min-height:64px;font-size:24px}.practice-controls{grid-template-columns:44px minmax(130px,200px) auto;justify-content:center;gap:14px}.practice-controls .primary,.practice-controls .secondary{font-size:20px}.stats-card{padding:14px 8px}.stats-card strong{font-size:30px}.stats-card span{font-size:16px}.practice-description{font-size:19px}.answer-feedback{font-size:20px}.rhythm-label{font-size:16px}}
@media(max-height:720px) and (orientation:portrait){.app-header{min-height:62px;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}body[data-screen=practice] .practice-screen{gap:7px}.stats-card{padding:8px}.stats-card strong{font-size:23px}.stats-card span{font-size:12px;margin-top:2px}.practice-description{font-size:14px}.answer-feedback{font-size:15px;min-height:36px}.rhythm-label{font-size:12px}.note-buttons button{min-height:43px;font-size:18px}.practice-dock{padding-top:6px;padding-bottom:calc(8px + var(--safe-bottom))}.pause-banner{padding:7px 10px;margin-bottom:5px}.practice-controls{padding-top:3px}.practice-controls .primary,.practice-controls .secondary{font-size:16px}.note-buttons{gap:8px;padding-bottom:6px}}
@media(orientation:landscape) and (max-height:600px){body[data-screen=practice] .app-header{min-height:46px;padding-top:max(4px,env(safe-area-inset-top,0px));padding-bottom:4px}body[data-screen=practice] h1{font-size:18px}.app-header .round-button{width:36px;height:36px}.app-header .round-button svg{width:24px;height:24px}body[data-screen=practice] .practice-screen{grid-template-columns:1fr minmax(280px,44%);grid-template-rows:auto minmax(70px,1fr) auto;gap:8px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(8px,var(--safe-bottom))}.stats-card{padding:5px 8px;grid-column:2;grid-row:1}.stats-card strong{font-size:21px}.stats-card span{font-size:11px;margin-top:1px}.practice-description{grid-column:1;grid-row:1;font-size:14px;align-self:center}.score-panel{grid-column:1;grid-row:2 / 4}.answer-feedback{grid-column:2;grid-row:2;align-self:start;font-size:14px;min-height:30px}.rhythm-label{grid-column:1;grid-row:4;font-size:12px}.practice-dock{grid-column:2;grid-row:2 / 5;align-self:end;margin:38px 0 0;padding:7px 10px 8px;border-radius:20px}.note-buttons{gap:7px;padding-bottom:6px}.note-buttons button{min-height:39px;font-size:17px}.practice-controls{grid-template-columns:36px minmax(0,1fr) auto;gap:5px;padding-top:2px}.practice-controls .primary,.practice-controls .secondary{font-size:14px;padding:8px;min-height:38px}.mute-button{width:36px;min-height:38px;padding:5px}.pause-banner{padding:5px 8px;margin-bottom:5px;gap:8px}.pause-banner strong{font-size:14px}.pause-banner div>span{font-size:11px}.pause-circle{width:22px;height:22px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

.answer-feedback{flex-direction:column;gap:3px}.answer-feedback strong{font-weight:500}.answer-feedback #responseTime{font-size:.8em;color:var(--muted)}.progress-track{height:3px;background:#303034;border-radius:99px;overflow:hidden}#timeProgress{height:100%;background:var(--cyan);transform-origin:left;will-change:transform}.note-buttons button{position:relative}.note-buttons button.hit-correct:after{content:'✓';position:absolute;right:6px;top:3px;font-size:14px}.note-buttons button.hit-wrong:after{content:'×';position:absolute;right:6px;top:3px;font-size:14px}.note-buttons button.reveal-correct{outline:2px solid var(--green);outline-offset:-2px;color:white;background:#18231c;opacity:1}.note-buttons button.hit-correct,.note-buttons button.hit-wrong{opacity:1}
@media(orientation:landscape) and (max-height:600px){.progress-track{grid-column:1;grid-row:4}.rhythm-label{grid-row:5}.practice-dock{grid-row:2 / 6;margin-top:50px}.answer-feedback{min-height:40px}}

.next-note{width:100%;min-height:40px;margin:3px 0;font-size:16px}.switch:disabled{opacity:.45}

/* Clear labels and larger touch targets, including compact phones. */
:root{--muted:#b0b0b7}.primary{color:#001c20;font-weight:650}.segmented button{min-height:44px;font-size:16px}.note-buttons button{min-height:48px}.app-header{grid-template-columns:76px 1fr 76px}.app-header #historyButton{width:76px;height:52px;border-radius:14px;gap:2px;font-size:12px}.app-header #historyButton svg{width:23px;height:23px}.practice-controls{grid-template-columns:80px minmax(0,1fr) auto}.mute-button{width:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px;font-size:12px;min-height:48px}.mute-button svg{width:23px;height:23px}.practice-controls .primary,.practice-controls .secondary{min-height:48px}.answer-feedback strong{font-weight:650}.intro p{color:#d0d0d5}.next-note{min-height:44px}
@media(max-width:380px){.app-header{padding-left:12px;padding-right:12px;grid-template-columns:64px 1fr 64px;gap:4px}.app-header #historyButton{width:64px}h1{font-size:18px}.practice-controls{grid-template-columns:72px minmax(0,1fr) auto;gap:5px}.mute-button{width:72px}.practice-controls .primary,.practice-controls .secondary{padding:8px;font-size:15px}}
@media(orientation:landscape) and (max-height:600px){.app-header #historyButton{height:40px;display:flex;font-size:11px}.note-buttons button{min-height:44px}.practice-controls{grid-template-columns:70px minmax(0,1fr) auto}.mute-button{width:70px;font-size:11px}.practice-controls .primary,.practice-controls .secondary{font-size:14px;min-height:44px}.next-note{min-height:44px}.practice-dock{margin-top:50px}.pause-banner div>span{display:none}}
@media(max-height:620px) and (orientation:portrait){body[data-screen=practice] .practice-screen{grid-template-rows:auto auto minmax(45px,1fr) auto 3px auto auto;gap:4px}.practice-description{font-size:13px}.rhythm-label{font-size:12px}.practice-dock{padding-top:4px}.note-buttons{gap:7px;padding-top:2px;padding-bottom:4px}.pause-banner div>span{display:none}.pause-banner{padding:5px 8px;margin-bottom:3px}.answer-feedback{min-height:34px}.app-header #historyButton{height:44px}body[data-screen=practice] .app-header{min-height:56px}}

.summary-range{font-size:16px;color:var(--muted);margin:-12px 0 22px;line-height:1.4}.history-range{display:block;color:#c9c9cc;font-size:14px;margin-top:6px}