:root{--bg: #f4f6fb;--card: #ffffff;--ink: #1f2430;--muted: #6b7280;--accent: #ff8a3d;--green: #34c759;--blue: #0a84ff;--shadow: 0 2px 10px rgba(0, 0, 0, .08);--radius: 16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif}#app{max-width:860px;margin:0 auto;padding:16px}h1{font-size:22px;margin:8px 0 16px}h1:before{content:"🎹 "}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.row label,.row .lbl{color:var(--muted);font-size:13px}select,input[type=file],button{font:inherit;border-radius:10px;border:1px solid #d7dbe3;padding:7px 10px;background:#fff}button{background:var(--accent);color:#fff;border:none;cursor:pointer;font-weight:600}button:disabled{opacity:.5;cursor:default}button.ghost{background:#eef1f6;color:var(--ink)}#status{margin:10px 0;font-size:14px;color:var(--muted)}canvas{display:block;width:100%;border-radius:12px;margin-top:8px}#falling{background:#1c1c1e}#keyboard{background:#3a3a3c}input[type=range]{vertical-align:middle}#evalResults h3{margin:0 0 10px}.stars{font-size:22px;color:var(--accent);letter-spacing:2px;margin:4px 0 10px}.scorebar{margin:6px 0}.scorebar .lbl{display:inline-block;width:56px;font-size:13px;color:var(--muted)}.scorebar .track{display:inline-block;width:60%;height:10px;background:#eef1f6;border-radius:6px;vertical-align:middle;overflow:hidden}.scorebar .fill{display:block;height:100%;background:var(--green)}.scorebar .val{margin-left:8px;font-variant-numeric:tabular-nums}.stat-grid{display:flex;gap:18px;flex-wrap:wrap}.stat{text-align:center}.stat .num{font-size:24px;font-weight:700;color:var(--accent)}.stat .cap{font-size:12px;color:var(--muted)}.song-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #eef1f6}.song-row .name{flex:1}.song-row .best{font-weight:600;color:var(--green)}.muted{color:var(--muted);font-size:13px}