:root{--bg:#fbf7f2;--surface:#fff;--border:#e6ded3;--track:#ede6dc;--text:#1c1a17;--text-2:#3d3830;--muted:#6b6358;--staff:#b9afa2;--accent:#c62839;--on-accent:#fff;--wrong-bg:#fcebec;--wrong-border:#f2c4c8;--wrong-text:#a61e2e;--right:#1e7b53;--idle:#ddd5ca;--radius:14px;--font:Outfit, system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}#app{max-width:560px;min-height:100%;padding:max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));flex-direction:column;gap:24px;margin:0 auto;display:flex}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:13px;font-weight:600}h1{margin:0;font-size:28px;font-weight:600}.lede{color:var(--muted);margin:0;font-size:16px;line-height:1.45}.top-bar{align-items:center;gap:12px;display:flex}.icon-button{border:1px solid var(--border);background:var(--surface);border-radius:999px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:flex}.button{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);justify-content:center;align-items:center;gap:8px;min-height:54px;padding:0 20px;font-size:17px;font-weight:500;display:flex}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px}.push-down{margin-top:auto}.home-title{flex-direction:column;gap:8px;padding-top:24px;display:flex}.home-title h1{letter-spacing:-.02em;font-size:46px;font-weight:700;line-height:1}.modes{flex-direction:column;gap:12px;display:flex}.mode-row{background:var(--surface);border:1px solid var(--border);border-radius:20px;align-items:center;gap:14px;padding:14px 16px 14px 14px;display:flex}.mode-row .art{background:var(--bg);border-radius:14px;flex:none;justify-content:center;align-items:center;width:76px;height:76px;display:flex}.mode-row .art.letter{color:var(--accent);font-size:34px;font-weight:600}.mode-row .art svg{fill:var(--text)}.mode-row .art .lines line{stroke:var(--staff);stroke-width:1.2px}.mode-row .art .hit{stroke:var(--accent);stroke-width:2px}.mode-row .art .target,.mode-row .art .badge{fill:var(--accent)}.mode-row .art text{fill:var(--on-accent);font-family:var(--font);font-size:15px;font-weight:700}.mode-row .text{flex-direction:column;flex:1;gap:3px;display:flex}.mode-row .title{flex-wrap:wrap;align-items:center;gap:8px;font-size:20px;font-weight:600;display:flex}.mode-row .desc{color:var(--muted);font-size:14px;line-height:1.35}.mode-row .tag{background:var(--wrong-bg);color:var(--wrong-text);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}.mode-row>svg{color:var(--accent);flex:none}.hearing{background:var(--surface);border:1px solid var(--border);border-radius:24px;flex-direction:column;align-items:center;gap:8px;padding:32px 20px;display:flex}.hearing .label{letter-spacing:.12em;color:var(--muted);font-size:13px;font-weight:600}.hearing .note{letter-spacing:-.03em;color:var(--idle);font-size:104px;font-weight:600;line-height:1}.hearing .note.live{color:var(--text)}.hearing .note.held{color:var(--accent)}.hearing .sub{color:var(--muted);min-height:1.2em;font-size:15px}.hearing .steady{color:var(--right);visibility:hidden;align-items:center;gap:6px;font-size:14px;display:flex}.hearing .steady.on{visibility:visible}.meter{flex-direction:column;gap:10px;display:flex}.meter .caption{color:var(--muted);justify-content:space-between;font-size:14px;display:flex}.meter .track{background:var(--track);border-radius:999px;height:14px;position:relative}.meter .fill{background:var(--idle);border-radius:999px;width:0;height:100%}.meter .fill.open{background:var(--accent)}.meter .gate{background:var(--text);border-radius:2px;width:3px;height:24px;position:absolute;top:-5px}.slider{flex-direction:column;gap:8px;display:flex}.slider label{justify-content:space-between;font-size:16px;font-weight:500;display:flex}.slider label span:last-child{color:var(--muted);font-weight:400}.slider input{width:100%;height:32px;accent-color:var(--accent);margin:0}.slider .ends{color:var(--muted);justify-content:space-between;font-size:13px;display:flex}.facts{flex-direction:column;gap:10px;font-size:15px;display:flex}.facts div{justify-content:space-between;display:flex}.facts span:first-child{color:var(--muted)}.permission{flex-direction:column;flex:1;justify-content:center;gap:22px;display:flex}.permission .badge{background:var(--wrong-bg);width:96px;height:96px;color:var(--accent);border-radius:999px;justify-content:center;align-items:center;display:flex}.permission h1{font-size:34px;font-weight:700;line-height:1.1}.permission .lede{font-size:17px;line-height:1.5}.notice{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:14px 16px;font-size:14px;line-height:1.45}.notice strong{color:var(--text);margin-bottom:4px;font-size:15px;display:block}.notice.error{background:var(--wrong-bg);border-color:var(--wrong-border);color:var(--wrong-text)}body.test-mode #app{padding-bottom:190px}.test-keyboard{z-index:10;padding:12px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.test-keyboard>*{width:100%;max-width:560px;margin:0 auto}.test-head{align-items:center;gap:12px;font-size:14px;display:flex}.test-held{color:var(--muted);flex:1}.test-octave{color:var(--muted);align-items:center;gap:8px;display:flex}.test-octave button{border:1px solid var(--border);background:var(--bg);border-radius:999px;width:36px;height:36px;font-size:18px}.test-keys{gap:4px;display:grid}.test-keys.sharps{grid-template-columns:repeat(14,minmax(0,1fr))}.test-keys.naturals{grid-template-columns:repeat(7,minmax(0,1fr))}.test-keys button{border:1px solid var(--border);background:var(--bg);touch-action:none;border-radius:10px;height:44px;font-size:15px;font-weight:600}.test-keys.sharps button{background:var(--text-2);border-color:var(--text-2);color:var(--on-accent);height:36px;font-size:13px}.test-keys button.down{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--surface);border:1px solid var(--border);color:var(--text-2);border-radius:999px;padding:6px 12px;font-size:14px}.button-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.start-gate .lede+.lede{margin-top:-8px}.segmented{grid-template-columns:repeat(var(--count), minmax(0, 1fr));border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);gap:4px;padding:4px;display:grid}.segmented button{background:0 0;border:0;border-radius:10px;min-height:44px;padding:0 4px;font-size:15px}.segmented button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}.pause-overlay{z-index:20;background:#1c1a1773;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.pause-sheet{width:100%;max-width:560px;padding:28px max(20px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));background:var(--surface);border-radius:28px 28px 0 0;flex-direction:column;gap:20px;display:flex}.pause-head{flex-direction:column;gap:6px;display:flex}.pause-head h1{font-size:30px;font-weight:700}.pause-head .lede{font-size:15px}.pause-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.pause-stats>div{background:var(--bg);border-radius:14px;flex-direction:column;gap:2px;padding:12px;display:flex}.pause-stats span:first-child{color:var(--muted);font-size:13px}.pause-stats span:last-child{font-size:20px;font-weight:600}.pause-stats .right{color:var(--right)}.pause-stats .wrong{color:var(--wrong-text)}.pause-actions{flex-direction:column;gap:10px;display:flex}.pause-actions .button-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.pause-actions .button-row .button{min-height:50px;font-size:16px}.staff-svg{width:100%;height:auto;max-height:100%;display:block}.staff-line{stroke:var(--staff);stroke-width:1.5px}.staff-clef{fill:var(--text);font-family:Noto Music;font-size:72px}.staff-band{fill:var(--accent);fill-opacity:.12}.staff-note{fill:var(--text);stroke:var(--text)}.staff-note .staff-line{stroke:var(--staff)}.staff-note text{stroke:none;font-family:Noto Music;font-size:34px}.staff-note ellipse{stroke:none}.staff-stem{stroke-width:2px}.staff-note.placing{fill:var(--accent);stroke:var(--accent)}.staff-note.right{fill:var(--right);stroke:var(--right)}.staff-note.wrong{fill:var(--wrong-text);stroke:var(--wrong-text)}.letters-bar{align-items:center;gap:10px;display:flex}.letters-bar .letters-progress{margin-left:4px}.letters-progress{flex-direction:column;flex:1;gap:6px;display:flex}.letters-progress .caption{color:var(--muted);justify-content:space-between;font-size:14px;display:flex}.letters-progress .caption span:last-child{color:var(--text);font-weight:600}.letters-progress .track{background:var(--track);border-radius:999px;height:6px;overflow:hidden}.letters-progress .track[hidden]{display:none}.letters-progress .fill{background:var(--accent);border-radius:999px;width:0;height:100%;transition:width .3s}.letters-prompt{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;display:flex}.letters-prompt .label{letter-spacing:.12em;color:var(--muted);font-size:13px;font-weight:600}.letters-prompt .letter{letter-spacing:-.03em;color:var(--text);white-space:nowrap;font-size:176px;font-weight:600;line-height:1;transition:color .15s}.letters-prompt .letter.long{font-size:min(132px,24vw)}.letters-prompt .letter.right{color:var(--right)}.letters-prompt .sub{color:var(--muted);font-size:15px}.letters-feedback{visibility:hidden;border:1px solid #0000;border-radius:18px;align-items:center;gap:12px;padding:18px;display:flex}.letters-feedback.wrong,.letters-feedback.right{visibility:visible}.letters-feedback.wrong{background:var(--wrong-bg);border-color:var(--wrong-border)}.letters-feedback.right{background:color-mix(in srgb, var(--right) 10%, var(--surface));border-color:color-mix(in srgb, var(--right) 30%, var(--surface))}.letters-feedback .mark{width:36px;height:36px;color:var(--on-accent);border-radius:999px;flex:none;justify-content:center;align-items:center;display:flex}.letters-feedback.wrong .mark{background:var(--accent)}.letters-feedback.right .mark{background:var(--right)}.letters-feedback .text{flex-direction:column;gap:2px;display:flex}.letters-feedback .title{min-height:1.2em;font-size:18px;font-weight:600}.letters-feedback .detail{color:var(--muted);min-height:1.2em;font-size:14px}.letters-feedback.wrong .title{color:var(--wrong-text)}.letters-feedback.right .title{color:var(--right)}.letters-foot{color:var(--muted);justify-content:space-between;align-items:center;font-size:14px;display:flex}.letters-foot .listening{align-items:center;gap:10px;display:flex}.letters-foot .level{align-items:flex-end;gap:3px;height:18px;display:flex}.letters-foot .level span{background:var(--idle);border-radius:2px;width:4px}.letters-foot .level span:first-child{height:6px}.letters-foot .level span:nth-child(2){height:10px}.letters-foot .level span:nth-child(3){height:14px}.letters-foot .level span:nth-child(4),.letters-foot .level span:nth-child(5){height:18px}.letters-foot .level span.on{background:var(--accent)}.letters-prompt .letter.longer{white-space:normal;text-align:center;font-size:min(84px,19vw);line-height:1.05}.letters-prompt .letter[hidden],.letters-staff[hidden]{display:none}.letters-staff{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:100%;max-width:520px}.quiz-prompt{text-align:center;flex-direction:column;align-items:center;gap:2px;display:flex}.quiz-prompt .label{letter-spacing:.12em;color:var(--muted);font-size:13px;font-weight:600}.quiz-prompt .name{letter-spacing:-.03em;font-size:88px;font-weight:600;line-height:1}.quiz-prompt .name.long{font-size:min(72px,20vw)}.quiz-prompt .hint{color:var(--muted);font-size:14px}.quiz-staff{background:var(--surface);border:1px solid var(--border);outline-offset:3px;border-radius:24px;flex:1;align-items:center;min-height:180px;display:flex}.quiz-staff.placing{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none}.quiz-answers{flex-direction:column;gap:10px;display:flex}.quiz-keys{gap:6px;display:grid}.quiz-keys.naturals{grid-template-columns:repeat(7,minmax(0,1fr))}.quiz-keys.sharps{grid-template-columns:repeat(14,minmax(0,1fr))}.quiz-key{border:1px solid var(--border);background:var(--surface);border-radius:14px;height:62px;padding:0;font-size:21px;font-weight:600}.quiz-keys.sharps .quiz-key{background:var(--text-2);border-color:var(--text-2);height:50px;color:var(--on-accent);border-radius:12px;font-size:17px}.quiz-key.wrong,.quiz-keys.sharps .quiz-key.wrong{background:var(--wrong-bg);border-color:var(--wrong-border);color:var(--wrong-text);cursor:default;text-decoration:line-through}.quiz-key.right,.quiz-keys.sharps .quiz-key.right{background:var(--right);border-color:var(--right);color:var(--on-accent)}.quiz-key{font-size:min(21px,4.6vw)}.quiz-signs button{font-family:Noto Music,serif;font-size:24px}.quiz-answers .button[disabled]{opacity:.45;cursor:default}.quiz-foot{color:var(--muted);justify-content:space-between;font-size:14px;display:flex}.quiz-foot .right{color:var(--right);font-weight:600}.quiz-foot .wrong{color:var(--wrong-text);font-weight:600}.quiz-key.chosen,.quiz-keys.sharps .quiz-key.chosen{background:var(--wrong-bg);border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.quiz-octaves{grid-template-columns:repeat(var(--count), minmax(0, 1fr));gap:6px;display:grid}.quiz-octaves .quiz-key{height:54px;font-size:19px}.quiz-octaves-hint{height:54px;color:var(--muted);justify-content:center;align-items:center;font-size:14px;display:flex}.quiz-prompt .name.longer{font-size:min(56px,14vw)}.quiz-octaves .quiz-key{font-size:min(17px,4vw)}.setting{flex-direction:column;gap:12px;display:flex}.setting h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;font-size:13px;font-weight:600}.setting .caption{color:var(--muted);font-size:14px}.pickers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.pickers label{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.pickers select{border:1px solid var(--border);background:var(--surface);height:48px;color:var(--text);font:inherit;border-radius:12px;padding:0 12px;font-size:17px}.range-staff svg{width:100%;height:auto;display:block}.range-staff .lines line{stroke:var(--staff);stroke-width:1.5px}.range-staff .ledger{stroke:var(--muted);stroke-width:1.5px}.range-staff .glyph{fill:var(--text);font-family:Noto Music,serif}.range-staff .head{fill:var(--accent)}.range-staff .span{stroke:var(--accent);stroke-opacity:.35;stroke-width:2px;stroke-dasharray:4 5}.setting .row{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:14px 16px;font-size:17px;display:flex}.setting .row .text{flex-direction:column;gap:2px;display:flex}.switch{appearance:none;background:var(--track);border:1px solid var(--border);cursor:pointer;border-radius:999px;flex:none;width:50px;height:30px;margin:0;transition:background .15s;position:relative}.switch:after{content:"";background:var(--surface);border-radius:999px;width:24px;height:24px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003}.switch:checked{background:var(--accent);border-color:var(--accent)}.switch:checked:after{transform:translate(20px)}.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.name-preview{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.name-preview div{border:1px solid var(--border);border-radius:10px;justify-content:center;align-items:center;height:52px;font-size:18px;font-weight:600;display:flex}.slider.disabled{opacity:.4}.octave-preview{grid-template-columns:repeat(3,minmax(0,1fr))}#app.staff-screen{gap:12px;max-width:none;height:100dvh;min-height:0}body.test-mode #app.staff-screen{height:calc(100dvh - 160px);padding-bottom:12px}.staff-bar{align-items:center;gap:16px;display:flex}.staff-track{background:var(--track);border-radius:999px;flex:1;height:6px;overflow:hidden}.staff-track[hidden]{visibility:hidden}.staff-track .fill{background:var(--accent);border-radius:999px;width:0;height:100%;transition:width .3s}.staff-count{font-size:15px;font-weight:600}.staff-pill{border:1px solid var(--border);color:var(--muted);white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:13px}.staff-stage{flex:1;min-height:0;position:relative}.staff-stage canvas{width:100%;height:100%;position:absolute;inset:0}.staff-foot{min-height:40px;color:var(--muted);grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-size:14px;display:grid}.staff-foot .listening{align-items:center;gap:10px;display:flex}.staff-foot .level{align-items:flex-end;gap:3px;height:18px;display:flex}.staff-foot .level span{background:var(--idle);border-radius:2px;width:4px}.staff-foot .level span:first-child{height:6px}.staff-foot .level span:nth-child(2){height:10px}.staff-foot .level span:nth-child(3){height:14px}.staff-foot .level span:nth-child(4){height:18px}.staff-foot .level span.on{background:var(--accent)}.staff-score{justify-self:end}.staff-score .right{color:var(--right);font-weight:600}.staff-score .wrong{color:var(--wrong-text);font-weight:600}.staff-feedback{visibility:hidden;border:1px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-weight:600;display:flex}.staff-feedback.wrong,.staff-feedback.right{visibility:visible}.staff-feedback.wrong{background:var(--wrong-bg);border-color:var(--wrong-border);color:var(--wrong-text)}.staff-feedback.right{background:color-mix(in srgb, var(--right) 10%, var(--surface));border-color:color-mix(in srgb, var(--right) 30%, var(--surface));color:var(--right)}.staff-feedback .mark{display:flex}.staff-feedback .mark svg{width:14px;height:14px}@media (orientation:portrait){.staff-foot{grid-template-columns:1fr auto;grid-template-areas:"feedback feedback""listening score";row-gap:16px}.staff-foot .listening{grid-area:listening}.staff-score{grid-area:score}.staff-feedback{border-radius:18px;grid-area:feedback;justify-content:flex-start;padding:16px 18px;font-size:18px}.staff-feedback .mark svg{width:18px;height:18px}}.summary-head{flex-direction:column;gap:6px;display:flex}.summary-head .score{align-items:baseline;gap:10px;display:flex}.summary-head .big{letter-spacing:-.03em;font-size:64px;font-weight:700;line-height:1}.summary-head .of{color:var(--muted);font-size:24px}.summary-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.summary-stats>div{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:4px;padding:16px;display:flex}.summary-stats span:first-child{color:var(--muted);font-size:13px}.summary-stats span:last-child{font-size:30px;font-weight:600}.summary-missed{flex-direction:column;gap:10px;display:flex}.summary-missed h2{margin:0;font-size:18px;font-weight:600}.missed-list{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;display:flex}.missed-row{align-items:center;gap:14px;padding:14px 16px;display:flex}.missed-row+.missed-row{border-top:1px solid var(--border)}.missed-row .note{min-width:52px;font-size:22px;font-weight:600}.missed-row .usual{color:var(--muted);flex:1;font-size:15px}.missed-row .count{color:var(--wrong-text);font-size:15px;font-weight:600}.missed-row.empty{color:var(--muted);font-size:15px}.summary-actions{flex-direction:column;gap:12px;display:flex}