:root{--bg: #1a1d24;--bg-2: #232730;--fg: #e9ecef;--fg-dim: #9aa1ad;--accent: #6cb4ff;--accent-2: #4d8fd1;--ok: #4caf50;--bad: #e05656;--warn: #f0b35a;--black-key: #1d1d1d;--black-key-edge: #000;--white-key: #fafafa;--white-key-edge: #c2c2c2;--selected: #6cb4ff;--selected-black: #2f6fb3;--black-half-width: calc((100% / var(--white-count)) * .32)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{height:100vh;width:100vw;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;padding:16px 24px;min-height:0}.difficulty-screen{align-items:center;justify-content:center;text-align:center}.difficulty-screen h1{font-size:2.2rem;margin:0 0 4px}.subtitle{color:var(--fg-dim);margin:0 0 12px}.howto{color:var(--fg-dim);font-size:.9rem;max-width:520px;margin:0 0 28px;line-height:1.4}.difficulty-row{display:flex;gap:16px;margin-bottom:32px;flex-wrap:wrap;justify-content:center}.title-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--fg-dim);font-size:.9rem;margin:0 0 8px;cursor:pointer;max-width:620px;line-height:1.4}.title-toggle input{cursor:pointer}.midi-hint{color:var(--fg-dim);font-size:.8rem;margin:0 0 24px}.difficulty-btn{background:var(--bg-2);color:var(--fg);border:2px solid transparent;border-radius:12px;padding:20px 28px;min-width:220px;font-size:1rem;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .12s,transform .12s}.difficulty-btn:hover{border-color:var(--accent-2)}.difficulty-btn.active{border-color:var(--accent)}.difficulty-btn .dl{font-size:1.4rem;font-weight:600}.difficulty-btn .dd{font-size:.85rem;color:var(--fg-dim)}.links{display:flex;gap:18px}.link-btn{background:none;border:none;color:var(--accent);font-size:.95rem;cursor:pointer;padding:6px 10px}.link-btn:hover{text-decoration:underline}.link-btn.back{align-self:flex-start;margin-bottom:8px}.round-screen{padding:12px 20px}.round-header{display:flex;justify-content:space-between;align-items:center;font-size:2rem;margin-bottom:8px;gap:16px}.round-header-left{display:flex;flex-direction:column;gap:2px}.round-header-right{display:flex;align-items:center;gap:12px}.prompt-hint{font-size:.7rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;font-weight:500}.scale-name{font-weight:600}.live-score{font-size:.95rem;color:var(--fg-dim);font-weight:500}.timer{font-variant-numeric:tabular-nums;color:var(--fg-dim);font-size:1.6rem}.timer.correct{color:var(--ok)}.timer.incorrect{color:var(--bad)}.end-session-btn{background:transparent;color:var(--fg-dim);border:1px solid var(--fg-dim);border-radius:6px;padding:6px 12px;font-size:.85rem;cursor:pointer;transition:color .12s,border-color .12s}.end-session-btn:hover{color:var(--bad);border-color:var(--bad)}.result-banner{font-size:1.1rem;font-weight:600;text-align:center;padding:8px;border-radius:8px;margin:4px 0 8px}.result-banner.ok{background:#4caf502e;color:var(--ok)}.result-banner.bad{background:#e056562e;color:var(--bad)}.play-area{flex:1;display:flex;align-items:stretch;gap:16px;min-height:0}.piano-host{flex:1;display:flex;align-items:stretch;min-height:0}.submit-btn{width:140px;background:var(--accent);color:#0e1117;border:none;border-radius:12px;font-size:1.4rem;font-weight:700;cursor:pointer;transition:background .12s,transform .12s}.submit-btn:hover{background:#87c2ff}.submit-btn:active{transform:translateY(1px)}.submit-btn.next-btn{background:var(--ok);color:#0e1117}.submit-btn.next-btn:hover{background:#5cc560}.piano{--black-half-width: calc((100% / var(--white-count)) * .32);position:relative;width:100%;height:100%;-webkit-user-select:none;user-select:none}.piano-white-row{position:absolute;top:0;right:0;bottom:0;left:0;display:flex}.piano-black-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.piano-key{border:none;cursor:pointer;padding:0;font:inherit}.piano-key.white{flex:1;background:var(--white-key);border:1px solid var(--white-key-edge);border-radius:0 0 6px 6px;height:100%;position:relative;transition:background 80ms}.piano-key.white.selected{background:var(--selected)}.piano-key.white.correct{background:var(--ok)}.piano-key.white.wrong{background:var(--bad)}.piano-key.white.missed{background:var(--warn)}.piano-key.black{pointer-events:auto;position:absolute;top:0;width:calc(var(--black-half-width) * 2);height:62%;background:var(--black-key);border:1px solid var(--black-key-edge);border-radius:0 0 5px 5px;z-index:2;transition:background 80ms}.piano-key.black.selected{background:var(--selected-black)}.piano-key.black.correct{background:#2e7d32}.piano-key.black.wrong{background:#a83333}.piano-key.black.missed{background:#b8862e}.piano-key:disabled{cursor:default}.summary-screen{align-items:center;overflow:auto;text-align:center}.summary-screen h2{margin:4px 0 12px}.score-hero{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 32px 12px;border-radius:16px;border:2px solid transparent;margin-bottom:12px}.score-hero.excellent{border-color:var(--ok);color:var(--ok)}.score-hero.strong{border-color:var(--accent);color:var(--accent)}.score-hero.building{border-color:var(--warn);color:var(--warn)}.score-hero.low{border-color:var(--bad);color:var(--bad)}.score-number{font-size:3.6rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.score-label{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em}.summary-stats{display:flex;gap:32px;margin-bottom:8px}.stat{display:flex;flex-direction:column;align-items:center}.stat-v{font-size:1.5rem;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}.stat-k{font-size:.8rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em}.comparison{font-size:1rem;color:var(--fg-dim);margin-bottom:16px}.cmp-up{color:var(--ok);font-weight:700}.cmp-down{color:var(--bad);font-weight:700}.cmp-flat{color:var(--fg-dim);font-weight:700}.chart-wrap{width:min(100%,720px);margin-bottom:16px}.chart-title{font-size:.85rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;text-align:left}.chart{width:100%;height:auto;background:var(--bg-2);border-radius:8px;padding:4px}.chart-grid{stroke:#2c313a;stroke-width:1}.chart-axis{fill:var(--fg-dim);font-size:11px}.chart-best{stroke:var(--ok);stroke-width:1;stroke-dasharray:4 4;opacity:.6}.chart-best-label{fill:var(--ok);font-size:10px}.chart-bar{fill:var(--accent-2);transition:fill .12s}.chart-bar.current{fill:var(--accent)}.chart-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.chart-line.scales{stroke:var(--accent)}.chart-line.chords{stroke:var(--warn)}.chart-point.scales{fill:var(--accent);stroke:none}.chart-point.chords{fill:var(--warn);stroke:none}.chart-point.current{stroke:var(--fg);stroke-width:2}.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.chart-filter{display:flex;gap:6px}.chip{background:var(--bg-2);color:var(--fg-dim);border:1px solid #2c313a;border-radius:999px;padding:4px 12px;font-size:.8rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s}.chip:hover{color:var(--fg)}.chip.active{color:var(--fg);border-color:var(--accent);background:#6cb4ff1f}.chart-legend{display:flex;gap:16px;justify-content:center;margin-top:8px;font-size:.8rem;color:var(--fg-dim)}.legend-item{display:inline-flex;align-items:center;gap:6px}.legend-swatch{display:inline-block;width:14px;height:3px;border-radius:2px}.legend-swatch.scales{background:var(--accent)}.legend-swatch.chords{background:var(--warn)}.mode-toggle{display:inline-flex;background:var(--bg-2);border-radius:999px;padding:4px;margin-bottom:24px;gap:4px}.mode-btn{background:transparent;color:var(--fg-dim);border:none;border-radius:999px;padding:8px 22px;font-size:.95rem;font-weight:600;cursor:pointer;transition:color .12s,background .12s}.mode-btn:hover{color:var(--fg)}.mode-btn.active{background:var(--accent);color:#0e1117}.score-mode{font-size:.8rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.summary-actions{display:flex;gap:16px;align-items:center}.history-screen{overflow:auto}.history-table{width:100%;border-collapse:collapse;margin-top:12px}.history-table th,.history-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #2c313a}.history-table th{color:var(--fg-dim);font-weight:600;font-size:.85rem;text-transform:uppercase}.history-table td.ok{color:var(--ok);font-weight:700}.history-table td.bad{color:var(--bad);font-weight:700}.settings-screen .setting-row{display:flex;align-items:center;gap:8px;margin:16px 0;font-size:1rem;cursor:pointer}.danger-btn{margin-top:24px;background:var(--bad);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:1rem;cursor:pointer}.danger-btn:hover{background:#c14040}#rotate-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:1000;align-items:center;justify-content:center}.rotate-msg{color:var(--fg);font-size:1.4rem;text-align:center;padding:24px}@media (orientation: portrait) and (max-width: 900px){#rotate-overlay{display:flex}}