:root{--ink:#111827;--muted:#6b7280;--faint:#9ca3af;--surface:#f3f4f6;--border:#e5e7eb;--accent:#2563eb;--error:#dc2626;--correct:#16a34a;--mono:ui-monospace, "SF Mono", monospace;--rounded:"Hiragino Maru Gothic ProN", system-ui, sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;background:#fff;font-family:system-ui,sans-serif;line-height:1.5}body{margin:0;position:relative}#root{isolation:isolate}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 32px;font-size:1.125rem}button.secondary{background:var(--surface);color:var(--ink);min-width:8.5em;padding:12px 16px}.error-message{color:var(--error);margin:0}.score-card{border:2px solid var(--ink);box-sizing:border-box;background:#fff;border-radius:24px;width:min(460px,94vw);padding:20px 14px;transition:box-shadow .3s}.score-card.is-correct{box-shadow:0 0 0 6px #16a34a40}.score-card svg{width:100%;height:auto;display:block}.score-card .vf-wrong-note{transition:opacity .5s}.score-card.is-wrong-fading .vf-wrong-note{opacity:0}@media (prefers-reduced-motion:reduce){.score-card .vf-wrong-note{transition:none}}.settings-button{font-family:var(--rounded);border-radius:999px;padding:10px 32px;font-size:1rem}.settings-backdrop{background:#11182773;transition:opacity .2s;position:fixed;inset:0}.settings-backdrop[data-starting-style],.settings-backdrop[data-ending-style]{opacity:0}.settings-viewport{justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.settings-popup{background:#fff;border-radius:20px;flex-direction:column;gap:24px;width:min(420px,100%);max-height:100%;padding:28px 24px;transition:opacity .2s,transform .2s;display:flex;overflow-y:auto;box-shadow:0 20px 60px #00000040}.settings-popup[data-starting-style],.settings-popup[data-ending-style]{opacity:0;transform:scale(.95)}.settings-title{text-align:center;font-family:var(--rounded);margin:0;font-size:1.5rem;font-weight:800}.settings-section{flex-direction:column;gap:12px;display:flex}.settings-heading{font-family:var(--rounded);margin:0;font-size:1.05rem;font-weight:700}.preset-list{flex-direction:column;gap:4px;display:flex}.preset-option{cursor:pointer;font-family:var(--rounded);border-radius:12px;align-items:center;gap:12px;padding:10px 14px;font-size:1.05rem;display:flex}.preset-option:has(.radio[data-checked]){background:var(--surface)}.radio{border:2px solid var(--faint);cursor:pointer;background:#fff;border-radius:999px;flex:none;place-items:center;width:22px;height:22px;padding:0;display:grid}.radio[data-checked]{border-color:var(--accent)}.radio-indicator{background:var(--accent);border-radius:999px;width:11px;height:11px}.custom-range{background:var(--surface);border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:14px 12px;display:flex}.custom-range-steppers{justify-content:center;align-items:flex-end;gap:12px;display:flex}.custom-range-sep{color:var(--muted);padding-bottom:8px;font-size:1.25rem}.reset-button{font-family:var(--rounded);border-radius:999px;padding:8px 24px;font-size:.95rem}.range-preview{flex-direction:column;align-items:center;gap:8px;display:flex}.mini-keyboard{width:100%;height:auto;display:block}.mk-white{fill:#fff;stroke:var(--faint);stroke-width:.5px}.mk-white.is-active{fill:var(--accent);fill-opacity:.35}.mk-black{fill:#374151}.mk-black.is-active{fill:var(--accent)}.mk-middle{fill:var(--error)}.range-preview-caption{font-family:var(--rounded);align-items:baseline;gap:10px;margin:0;font-size:1.25rem;font-weight:800;display:flex}.range-preview-legend{color:var(--error);font-size:.75rem;font-weight:400}.note-stepper{flex-direction:column;align-items:center;gap:8px;display:flex}.note-stepper-label{font-family:var(--rounded);color:var(--muted);font-size:.85rem}.note-stepper-control{align-items:center;gap:10px;display:flex}.note-stepper-value{text-align:center;min-width:3ch;font-family:var(--rounded);font-size:1.4rem;font-weight:800}.stepper-button{width:42px;height:42px;color:var(--ink);border:2px solid var(--border);background:#fff;border-radius:999px;place-items:center;padding:0;font-size:1.5rem;line-height:1;display:grid}.switch-row{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.switch{background:var(--border);cursor:pointer;border:none;border-radius:999px;flex:none;align-items:center;width:52px;height:30px;padding:3px;transition:background .2s;display:inline-flex}.switch[data-checked]{background:var(--correct)}.switch-thumb{background:#fff;border-radius:999px;width:24px;height:24px;transition:transform .2s}.switch[data-checked] .switch-thumb{transform:translate(22px)}.settings-close{font-family:var(--rounded);border-radius:999px;align-self:center;margin-top:4px;padding:12px 40px;font-size:1.15rem}@media (prefers-reduced-motion:reduce){.settings-backdrop,.settings-popup,.switch,.switch-thumb{transition:none}}.howto-button{font-family:var(--rounded);border-radius:999px;padding:10px 32px;font-size:1rem}.howto-backdrop{background:#11182773;transition:opacity .2s;position:fixed;inset:0}.howto-backdrop[data-starting-style],.howto-backdrop[data-ending-style]{opacity:0}.howto-viewport{justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.howto-popup{background:#fff;border-radius:20px;flex-direction:column;gap:24px;width:min(420px,100%);max-height:100%;padding:28px 24px;transition:opacity .2s,transform .2s;display:flex;overflow-y:auto;box-shadow:0 20px 60px #00000040}.howto-popup[data-starting-style],.howto-popup[data-ending-style]{opacity:0;transform:scale(.95)}.howto-viewport[hidden],.howto-popup[hidden]{display:none}.howto-title{text-align:center;font-family:var(--rounded);margin:0;font-size:1.5rem;font-weight:800}.howto-steps{counter-reset:step;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;display:flex}.howto-steps li{counter-increment:step;font-family:var(--rounded);align-items:flex-start;gap:14px;font-size:1.15rem;font-weight:700;line-height:1.5;display:flex}.howto-steps li:before{content:counter(step);color:#fff;background:var(--accent);border-radius:999px;flex:none;place-items:center;width:32px;height:32px;font-size:1.05rem;display:grid}.howto-note{background:var(--surface);border-radius:12px;padding:16px}.howto-note-title{font-family:var(--rounded);color:var(--muted);margin:0 0 6px;font-size:.95rem;font-weight:700}.howto-note p{color:var(--muted);margin:0;font-size:.9rem;line-height:1.7}.howto-close{font-family:var(--rounded);border-radius:999px;align-self:center;margin-top:4px;padding:12px 40px;font-size:1.15rem}@media (prefers-reduced-motion:reduce){.howto-backdrop,.howto-popup{transition:none}}.game{box-sizing:border-box;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:32px;min-height:100svh;padding:24px;display:flex}.game-title{font-family:var(--rounded);letter-spacing:.05em;margin:0;font-size:2rem;font-weight:700;line-height:1.35}.game-tagline{color:#4b5563;margin-top:.75em;font-size:1.2rem;font-weight:500;display:inline-block}.game-title-emoji{margin-right:.25em}.start-actions{flex-direction:column;align-items:center;gap:1rem;margin-top:1rem;display:flex}.start-button{font-size:1.5rem;font-family:var(--rounded);border-radius:999px;padding:18px 56px}.game.is-playing{justify-content:space-between;gap:16px}.correct-count{font-family:var(--rounded);color:var(--muted);margin:0;font-size:1.25rem}.correct-count strong{color:var(--correct);margin:0 .15em;font-size:1.75rem}.play-actions{align-items:center;gap:12px;display:flex}.skip-button{font-family:var(--rounded);border-radius:999px;padding:14px 40px}.finish-button{font-family:var(--rounded);color:var(--muted);box-shadow:inset 0 0 0 2px var(--border);background:0 0;border-radius:999px;padding:14px 28px}.skip-button:disabled,.finish-button:disabled{opacity:.4;cursor:default}.card-stage{position:relative}.correct-name{font-family:var(--rounded);color:var(--correct);pointer-events:none;text-shadow:0 0 4px #fff,0 0 10px #fff,0 0 20px #fff;place-items:center;margin:0;font-size:clamp(3.5rem,16vw,6rem);font-weight:800;line-height:1;animation:.45s cubic-bezier(.18,1.4,.4,1) correct-pop;display:grid;position:absolute;inset:0}@keyframes correct-pop{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.correct-name{animation:none}}.finish-message{font-family:var(--rounded);flex-direction:column;align-items:center;gap:.5rem;animation:.5s cubic-bezier(.18,1.4,.4,1) finish-pop;display:flex}.finish-message-emoji{margin:0;font-size:clamp(3rem,14vw,5rem);line-height:1}.finish-message-title{color:var(--correct);margin:0;font-size:clamp(2rem,9vw,3rem);font-weight:800}.finish-message-count{color:var(--muted);margin:0;font-size:1.25rem}.finish-message-count strong{color:var(--correct);margin:0 .15em;font-size:1.75rem}@keyframes finish-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.finish-message{animation:none}}.pitch-debug{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:40px;min-height:100svh;padding:40px 24px;display:flex}.pitch-debug header h1{margin:0;font-size:1.25rem;font-weight:600}.pitch-debug .phase-label{color:var(--muted);margin:4px 0 0;font-size:.875rem}.pitch-debug .note-display{flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:9rem;display:flex}.pitch-debug .note-katakana{font-size:clamp(4.5rem,16vw,7rem);font-weight:700;line-height:1}.pitch-debug .note-name{font-family:var(--mono);color:var(--muted);font-size:1.125rem}.pitch-debug .note-placeholder{color:var(--faint);font-size:1.5rem}.pitch-debug .readout dl{justify-content:center;gap:32px;margin:0;display:flex}.pitch-debug .readout dt{color:var(--muted);font-size:.75rem}.pitch-debug .readout dd{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:6ch;margin:0}.pitch-debug .readout .below-threshold{color:var(--error)}.pitch-debug .level-meter{background:var(--border);border-radius:999px;width:min(320px,80vw);height:6px;margin:16px auto 0;position:relative}.pitch-debug .level-meter-bar{background:var(--accent);border-radius:inherit;height:100%}.pitch-debug .level-meter-tick{background:var(--ink);width:2px;position:absolute;top:-3px;bottom:-3px}.pitch-debug .meter-caption{color:var(--muted);margin:8px 0 0;font-size:.75rem}.pitch-debug .history h2{color:var(--muted);margin:0 0 12px;font-size:.875rem;font-weight:600}.pitch-debug .history ol{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.pitch-debug .history li{background:var(--surface);border-radius:8px;padding:6px 14px}.pitch-debug .history small{color:var(--muted)}