:root{--bg: #0f1419;--card: #1a222c;--text: #f3f6f9;--muted: #9aa7b5;--accent: #3dd6c6;--accent-dim: #2a9d90;--good: #5bd67a;--bad: #ff6b7a;--border: #2c3744;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(1200px 600px at 50% -10%,#1d3a36 0%,transparent 55%),var(--bg);color:var(--text)}.app{max-width:440px;margin:0 auto;padding:20px 16px 32px}.header h1{margin:4px 0 6px;font-size:1.45rem;letter-spacing:.02em}.eyebrow{margin:0;color:var(--accent);font-size:.75rem}.sub{margin:0;color:var(--muted);font-size:.9rem}.score-row{display:flex;gap:12px;margin:18px 0;color:var(--muted);font-size:.85rem}.score-row.is-practice{display:none}.score-row strong{color:var(--text)}.player-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}.play-btn{width:100%;border:0;border-radius:999px;padding:14px 18px;font-size:1.05rem;font-weight:700;color:#062824;background:linear-gradient(180deg,var(--accent),var(--accent-dim));cursor:pointer}.play-btn:active{transform:scale(.98)}.hint{margin:12px 0 0;color:var(--muted);font-size:.82rem}.piano-roll{--pr-row: 11px;--pr-key-w: 42px;--pr-note: #6fd66f;--pr-note-edge: #3ea83e;margin-top:16px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#12171d;text-align:left}.piano-roll-ruler{display:grid;grid-template-columns:var(--pr-key-w) repeat(4,1fr);align-items:center;height:22px;border-bottom:1px solid #2a323c;background:#171d24;color:#8b97a5;font-size:.68rem;font-variant-numeric:tabular-nums}.piano-roll-ruler-gutter{border-left:0}.piano-roll-ruler span:not(.piano-roll-ruler-gutter){padding-left:6px;border-left:1px solid #2a323c}.piano-roll-body{display:grid;grid-template-columns:var(--pr-key-w) 1fr;max-height:min(42vh,320px);overflow:auto}.piano-keys{display:flex;flex-direction:column;border-right:1px solid #2a323c;background:#1a2028}.piano-key{height:var(--pr-row);flex:0 0 var(--pr-row);display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-size:.58rem;line-height:1;color:#c5ced8;border-bottom:1px solid #2a323c;box-sizing:border-box}.piano-key.is-black{background:#0e1217;color:#7f8b99}.piano-key.is-c{color:var(--accent);font-weight:700}.piano-grid{position:relative;background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),#2a323c calc(25% - 1px),#2a323c 25%),repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),#1e252e calc(6.25% - 1px),#1e252e 6.25%);background-color:#151a21}.piano-grid-rows{display:flex;flex-direction:column}.piano-grid-row{height:var(--pr-row);flex:0 0 var(--pr-row);border-bottom:1px solid #1e252e;box-sizing:border-box}.piano-grid-row.is-black{background:#00000047}.piano-notes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.piano-note{position:absolute;left:2%;width:46%;height:calc(var(--pr-row) - 2px);margin-top:1px;border-radius:3px;background:linear-gradient(180deg,#8aef8a,var(--pr-note));border:1px solid var(--pr-note-edge);box-shadow:0 0 0 1px #00000040;opacity:0;transform:scaleX(.85);transform-origin:left center;transition:opacity .16s ease,transform .2s ease}.piano-note.is-on{opacity:1;transform:scaleX(1)}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.choices.is-dense{grid-template-columns:repeat(4,1fr);gap:8px}.choice{border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);padding:16px 8px;font-size:1.05rem;font-weight:700;cursor:pointer;line-height:1.2}.choices.is-dense .choice{padding:10px 4px;font-size:.78rem;border-radius:10px}.choice:disabled{opacity:.55;cursor:default}.choice.correct{border-color:var(--good);background:#173323}.choice.active{border-color:var(--accent);background:#143532;box-shadow:0 0 0 1px #3dd6c659}.play-btn.is-hidden{display:none!important}.play-btn.is-next{display:block!important;width:100%}.feedback{min-height:1.4em;margin:14px 0 0;text-align:center;font-weight:700}.feedback.ok{color:var(--good)}.feedback.ng{color:var(--bad)}.wave-panel{margin-top:14px}.wave-panel[hidden]{display:none}.wave-caption,.staff-caption{margin:0 0 8px;color:var(--muted);font-size:.82rem;text-align:center;line-height:1.45}.staff-caption{margin-top:14px}.wave-crop,.staff-crop{--crop-y: 100;--mark-x: 50%;--mark-y: 50%;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#1e2430}.wave-crop{aspect-ratio:960 / 108}.staff-crop{--crop-y: 740;aspect-ratio:960 / 252}.wave-crop img,.staff-crop img{display:block;width:100%;height:auto;transform:translateY(calc(var(--crop-y) / -1025 * 100%));pointer-events:none;-webkit-user-select:none;user-select:none}.staff-mark{position:absolute;left:var(--mark-x);top:var(--mark-y);width:11%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #3dd6c6d9;pointer-events:none}.footer{margin-top:24px}.mode{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.82rem}.mode select{border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);padding:10px 12px;font-size:.95rem}.credit{margin-top:14px;color:#6d7b8a;font-size:.72rem;line-height:1.4}.player-card.is-visual .play-btn:not(.is-next),.player-card.is-visual .piano-roll{display:none}.visual-prompt{margin-bottom:12px}.visual-prompt[hidden]{display:none}.visual-direction{margin:0 0 8px;color:var(--muted);font-size:.78rem}.visual-main{display:flex;justify-content:center;align-items:center;min-height:120px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#12171d}.visual-letter{font-size:3.2rem;font-weight:800;letter-spacing:.04em;line-height:1}.visual-meta{margin:8px 0 0;color:var(--muted);font-size:.78rem;min-height:1.2em}.chord-diagram{width:min(100%,240px);height:auto}.chord-diagram .dg-nut{stroke:#e8eef5;stroke-width:4}.chord-diagram .dg-fret,.chord-diagram .dg-string{stroke:#6a7786;stroke-width:1.5}.chord-diagram .dg-dot{fill:#6fd66f;stroke:#2f7a2f;stroke-width:1}.chord-diagram .dg-open{fill:none;stroke:#c5ced8;stroke-width:2}.chord-diagram .dg-mute{fill:#ff8a96;font-size:14px;font-weight:700}.chord-diagram .dg-fretnum{fill:var(--accent);font-size:11px;font-weight:700}.tab-quiz{width:min(100%,280px);height:auto;display:block;background:#fff;border-radius:8px}.tab-quiz .tb-string{stroke:#1a222c;stroke-width:1.25}.tab-quiz .tb-knockout{fill:#fff}.tab-quiz .tb-clef-img{opacity:1}.tab-quiz .tb-num{fill:#1a222c;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800}.handedness{margin-top:14px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:.82rem}.handedness[hidden]{display:none}.handedness legend{padding:0 4px;color:var(--text)}.handedness label{margin-right:14px}.play-btn.is-next{display:inline-block}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#060a0eb8}.overlay[hidden]{display:none}.overlay-card{width:min(100%,360px);max-height:min(80dvh,560px);overflow:auto;padding:22px 18px 18px;border:1px solid var(--border);border-radius:16px;background:var(--card);text-align:center}.overlay-title{margin:0 0 8px;font-size:1.15rem;font-weight:800}.overlay-body{margin:0 0 18px;color:var(--muted);font-size:.95rem}.overlay-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.overlay-btn{border:1px solid var(--border);border-radius:12px;padding:12px 10px;background:#12171d;color:var(--text);font-size:1rem;font-weight:700;cursor:pointer}.overlay-btn.primary{border:0;color:#062824;background:linear-gradient(180deg,var(--accent),var(--accent-dim))}.mode-picker-list{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;text-align:left}.mode-picker-item{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:#12171d;color:var(--text);font-size:.95rem;font-weight:700;text-align:left;cursor:pointer}.mode-picker-item.is-current{border-color:var(--accent);box-shadow:0 0 0 1px #3dd6c659}.mode-picker-group{margin:10px 0 4px;color:var(--muted);font-size:.75rem;font-weight:700}.paywall-price{margin:0 0 16px;font-size:1.25rem;font-weight:800;color:var(--accent)}.paywall-actions{grid-template-columns:1fr}.paywall-note{margin:14px 0 0;color:#6d7b8a;font-size:.72rem;line-height:1.4}.mode-picker-item.is-locked{opacity:.85}.mode-picker-item .lock{margin-left:6px;color:var(--muted);font-size:.85em}.premium-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#3dd6c62e;color:var(--accent);font-size:.7rem;font-weight:700;vertical-align:middle}.staff-quiz{width:min(100%,300px);height:auto;background:#f7f8fa;border-radius:8px}.staff-quiz .st-line{stroke:#1a222c;stroke-width:1.5}.staff-quiz .st-brace{stroke:#1a222c;stroke-width:3;stroke-linecap:round}.staff-quiz .st-note{fill:#1a222c}.staff-quiz .st-clef{fill:#1a222c;font-family:Noto Music,Segoe UI Symbol,Apple Symbols,serif}