.metro *{box-sizing:border-box}.metro{--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--ease:cubic-bezier(.22, 1, .36, 1);--font:"Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Palatino, "Palatino Linotype", serif;--font-ui:"PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Segoe UI", sans-serif}.metro[data-theme=walnut]{--bg:#16110e;--wood:#4a2f22;--wood-mid:#5c3a28;--wood-light:#7a5238;--panel:#2a1c16;--ivory:#f4ead6;--ivory-edge:#e6d5b8;--ebony:#14110f;--fg:#f3eadc;--muted:#cbb89f;--accent:#d7b48a;--accent-fg:#1c1410;--key-glow:#f0d5a8;--shadow:0 24px 60px #00000073}.metro[data-theme=ebony]{--bg:#09090b;--wood:#121214;--wood-mid:#1a1a1e;--wood-light:#2a2a30;--panel:#0e0e10;--ivory:#f6f1e8;--ivory-edge:#ddd4c6;--ebony:#050506;--fg:#f4f1ea;--muted:#b8b3a8;--accent:#cfc6b4;--accent-fg:#111;--key-glow:#eee6d6;--shadow:0 24px 60px #0000008c}.metro[data-theme=ivory]{--bg:#e9dfd0;--wood:#d7c4a8;--wood-mid:#cbb396;--wood-light:#eee4d4;--panel:#f7f0e4;--ivory:#fffaf1;--ivory-edge:#e8dcc6;--ebony:#2a221c;--fg:#3a2c22;--muted:#7a6858;--accent:#8b5e4b;--accent-fg:#fffaf1;--key-glow:#8b5e4b;--shadow:0 20px 50px #5a3c282e}.metro[data-theme=night]{--bg:#0c1018;--wood:#151c28;--wood-mid:#1c2533;--wood-light:#2a3548;--panel:#101722;--ivory:#e8eef6;--ivory-edge:#c5d0de;--ebony:#07090d;--fg:#e8eef6;--muted:#9aa8ba;--accent:#8eb4d4;--accent-fg:#0c1018;--key-glow:#a8c8e4;--shadow:0 24px 60px #00000080}.metro[data-theme=rose]{--bg:#1a1214;--wood:#3d2428;--wood-mid:#4a2c32;--wood-light:#6a4248;--panel:#24181b;--ivory:#f7ebe6;--ivory-edge:#e8d0cc;--ebony:#140e10;--fg:#f6e8e4;--muted:#c9aaa8;--accent:#d4a09a;--accent-fg:#1a1214;--key-glow:#e8b8b4;--shadow:0 24px 60px #0000007a}.metro[data-theme=concert]{--bg:#070605;--wood:#1a1410;--wood-mid:#241c16;--wood-light:#3a2e24;--panel:#120f0c;--ivory:#f3ead8;--ivory-edge:#d9cbb0;--ebony:#090807;--fg:#f6efe4;--muted:#cbb79a;--accent:#e0c49a;--accent-fg:#1a140e;--key-glow:#f0d5a8;--shadow:0 24px 60px #0000008c}.metro[data-theme=morning]{--bg:#e8e2d6;--wood:#d9d0c2;--wood-mid:#cfc5b6;--wood-light:#f3eee4;--panel:#f7f3eb;--ivory:#fffcf7;--ivory-edge:#e6ddd0;--ebony:#2c2824;--fg:#2c261f;--muted:#6f675c;--accent:#6b5a46;--accent-fg:#fffcf7;--key-glow:#6b5a46;--shadow:0 20px 50px #3c322829}.metro[data-theme=parlor]{--bg:#1a120c;--wood:#5a3c28;--wood-mid:#6a4a32;--wood-light:#8a6244;--panel:#2a1c14;--ivory:#f4ead6;--ivory-edge:#e0d0b4;--ebony:#14100c;--fg:#f4eadc;--muted:#cbb89f;--accent:#e0b888;--accent-fg:#1c140e;--key-glow:#f0d5a8;--shadow:0 24px 60px #00000073}.metro[data-theme=loft]{--bg:#0a1018;--wood:#121820;--wood-mid:#182028;--wood-light:#283040;--panel:#10161e;--ivory:#e8eef4;--ivory-edge:#c4d0dc;--ebony:#07090c;--fg:#e8eef6;--muted:#9aa8ba;--accent:#8eb4d4;--accent-fg:#0c1018;--key-glow:#a8c8e4;--shadow:0 24px 60px #00000080}.metro[data-theme=atelier]{--bg:#d8d2c8;--wood:#c8c0b4;--wood-mid:#b8b0a4;--wood-light:#ece8e0;--panel:#f4f0ea;--ivory:#fffcf8;--ivory-edge:#ddd6cc;--ebony:#1c1c1c;--fg:#22201c;--muted:#6a6660;--accent:#3a3a38;--accent-fg:#f4f0ea;--key-glow:#3a3a38;--shadow:0 20px 50px #28241e24}.metro[data-theme=rosewood]{--bg:#140c0c;--wood:#4a2420;--wood-mid:#5a3028;--wood-light:#7a4840;--panel:#241414;--ivory:#f7ebe6;--ivory-edge:#e8d0cc;--ebony:#120808;--fg:#f6e8e4;--muted:#c9aaa8;--accent:#d4a09a;--accent-fg:#1a1214;--key-glow:#e8b8b4;--shadow:0 24px 60px #0000007a}.metro,.metro *{-webkit-tap-highlight-color:transparent;margin:0;padding:0}.metro{width:100%;min-height:100dvh;font-family:var(--font-ui);background:var(--bg);color:var(--fg);padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex;position:relative}.metro:before{content:"";background:var(--scene) center / cover no-repeat;z-index:0;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);position:fixed;inset:0;transform:scale(1.04)}.metro[data-photo="1"][data-scene="1"]:before{opacity:1}.metro[data-photo="1"]:after{content:"";background:color-mix(in srgb, var(--bg) 42%, transparent);z-index:0;pointer-events:none;position:fixed;inset:0}.metro .stage{z-index:1;width:100%;max-width:440px;position:relative}.metro .piano{background:linear-gradient(180deg, color-mix(in srgb, var(--wood-light) 40%, transparent), transparent 28%), repeating-linear-gradient(90deg, #0000001f 0 1px, transparent 1px 7px), var(--wood);border-radius:var(--radius-xl);box-shadow:var(--shadow), inset 0 1px 0 #ffffff2e;border:1px solid color-mix(in srgb, #000 35%, var(--wood-light));overflow:hidden}.metro[data-photo="1"] .piano{background:color-mix(in srgb, var(--panel) 78%, transparent);-webkit-backdrop-filter:blur(12px)saturate(1.15);border:1px solid color-mix(in srgb, var(--fg) 16%, transparent)}.metro .lid{padding:16px 18px 6px;position:relative}.metro .lid-row{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.metro .kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:11px}.metro h1{font-family:var(--font);letter-spacing:.04em;font-size:24px;font-weight:600;line-height:1.15}.metro .subtitle{color:var(--muted);margin-top:6px;font-size:13px;line-height:1.5}.metro .theme-field{flex-direction:column;flex-shrink:0;gap:6px;min-width:118px;display:flex}.metro .theme-field span{color:var(--muted);text-align:right;font-size:11px}.metro .theme-field select{min-width:118px;height:36px}.metro .desk{padding:4px 18px 12px}.metro .bpm-wrap{text-align:center;margin-top:2px}.metro .bpm{font-family:var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:transform .12s var(--ease);font-size:58px;font-weight:500;line-height:1}.metro .bpm.pulse{transform:scale(1.03)}.metro .tempo-name{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:4px;font-size:13px}.metro .stand{justify-content:center;align-items:flex-start;height:78px;margin:2px 0 0;display:flex}.metro .pendulum{background:linear-gradient(var(--accent), var(--wood-light));transform-origin:top;width:5px;height:58px;transition:transform var(--swing-ms,90ms) cubic-bezier(.22, 1, .36, 1);will-change:transform;border-radius:3px;position:relative;box-shadow:0 0 0 1px #0003}.metro .pendulum:before{content:"";background:var(--accent);border-radius:2px;width:14px;height:8px;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.metro .pendulum:after{content:"";background:radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 35%, var(--accent)), var(--accent) 55%, var(--wood));border-radius:50%;width:24px;height:24px;position:absolute;bottom:-14px;left:50%;transform:translate(-50%);box-shadow:0 4px 10px #00000059}.metro .dots{justify-content:center;gap:14px;margin:2px 0 12px;display:flex}.metro .dot{background:color-mix(in srgb, var(--fg) 16%, transparent);width:11px;height:11px;transition:transform .12s var(--ease), background .12s, box-shadow .12s;border-radius:50%}.metro .dot.on{background:var(--accent);box-shadow:0 0 10px var(--key-glow);transform:scale(1.35)}.metro .row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.metro .label{width:36px;color:var(--muted);flex-shrink:0;font-size:12px}.metro input[type=range]{appearance:none;background:color-mix(in srgb, var(--fg) 28%, transparent);border-radius:99px;outline:none;flex:1;height:4px}.metro input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 6px #0000004d}.metro .btns{gap:8px;margin-bottom:14px;display:flex}.metro button{font-family:var(--font-ui);cursor:pointer;border:0}.metro .ghost{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--fg) 8%, transparent);height:44px;color:var(--fg);flex:1;font-size:15px;font-weight:500}.metro .ghost:active{transform:scale(.98)}.metro .tap{flex:1.4}.metro .grid{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;display:grid}.metro .field{flex-direction:column;gap:6px;display:flex}.metro .field span{color:var(--muted);font-size:11px}.metro select{border-radius:var(--radius-sm);border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);background:var(--panel);height:40px;color:var(--fg);outline:none;padding:0 10px;font-size:14px}.metro .play{border-radius:var(--radius-md);background:var(--accent);width:100%;height:48px;color:var(--accent-fg);letter-spacing:.12em;font-size:16px;font-weight:600}.metro .play.playing{filter:brightness(1.08)}.metro .play:active{transform:scale(.99)}.metro .hint{text-align:center;color:var(--muted);margin-top:10px;font-size:11px}.metro .bottom-wrap{background:linear-gradient(var(--wood-mid), var(--wood));padding:0 10px 10px}.metro[data-photo="1"] .bottom-wrap{background:0 0}.metro .view-switch{gap:6px;margin:0 0 8px;display:flex}.metro .view-switch button{background:color-mix(in srgb, var(--fg) 8%, transparent);height:32px;color:var(--muted);border-radius:99px;flex:1;font-size:12px;font-weight:500}.metro .view-switch button.on{background:var(--accent);color:var(--accent-fg)}.metro .beat-matrix{background:color-mix(in srgb, var(--ebony) 70%, var(--panel));border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);border-radius:14px;grid-template-rows:repeat(3,18px);gap:5px 4px;padding:10px 8px;display:grid}.metro[data-theme=morning] .beat-matrix,.metro[data-theme=ivory] .beat-matrix,.metro[data-theme=atelier] .beat-matrix,.metro[data-tone=light] .beat-matrix{background:color-mix(in srgb, var(--ivory) 82%, var(--wood-light));border-color:color-mix(in srgb, var(--fg) 12%, transparent);box-shadow:inset 0 1px #fffc}.metro .beat-cell{background:color-mix(in srgb, var(--fg) 16%, transparent);transition:background 80ms linear, box-shadow 80ms linear, transform 80ms var(--ease);border-radius:4px}.metro .beat-cell.down{background:color-mix(in srgb, var(--fg) 26%, transparent)}.metro .beat-cell.on{background:color-mix(in srgb, var(--accent) 78%, var(--panel))}.metro .beat-cell.col-now{background:color-mix(in srgb, var(--accent) 28%, var(--panel))}.metro .beat-cell.now{background:var(--accent);box-shadow:0 0 10px color-mix(in srgb, var(--key-glow) 75%, transparent);transform:scaleY(1.08)}.metro[data-tone=light] .beat-cell{background:color-mix(in srgb, var(--fg) 8%, #fff)}.metro[data-tone=light] .beat-cell.down{background:color-mix(in srgb, var(--fg) 12%, #fff)}.metro[data-tone=light] .beat-cell.on{background:color-mix(in srgb, var(--accent) 38%, var(--ivory))}.metro[data-tone=light] .beat-cell.col-now{background:color-mix(in srgb, var(--accent) 18%, #fff)}.metro[data-tone=light] .beat-cell.now{background:var(--accent);box-shadow:0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)}.metro .keyboard{background:0 0;height:92px;padding:0 0 8px;display:flex;position:relative}.metro .wkey{background:linear-gradient(#fff, var(--ivory) 70%, var(--ivory-edge));box-shadow:inset 0 -8px 0 #00000014, 0 4px 0 var(--ebony);border-radius:0 0 5px 5px;flex:1;margin:0 1.5px;transition:filter 80ms,transform 80ms;position:relative}.metro .wkey.lit{filter:brightness(1.12);box-shadow:inset 0 -8px 0 color-mix(in srgb, var(--key-glow) 35%, transparent), 0 0 12px color-mix(in srgb, var(--key-glow) 45%, transparent)}.metro .bkeys{pointer-events:none;height:62px;position:absolute;top:0;left:10px;right:10px}.metro .bkey{background:linear-gradient(#3a3a3e, var(--ebony));border-radius:0 0 3px 3px;width:3.5%;height:100%;position:absolute;box-shadow:inset 1px 0 #ffffff1f}.metro .welcome{background:color-mix(in srgb, var(--bg) 48%, transparent);z-index:20;transition:opacity .4s var(--ease), visibility .4s;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.metro .welcome.hidden{opacity:0;visibility:hidden;pointer-events:none}.metro .welcome-card{background:var(--wood);width:min(380px,100%);color:var(--fg);border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow);border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);padding:36px 28px 28px;position:relative}.metro .welcome-card .kicker{margin-bottom:10px}.metro .welcome-card h2{font-family:var(--font);margin-bottom:16px;font-size:26px;font-weight:600}.metro .welcome-card .line{font-family:var(--font);margin-bottom:10px;font-size:18px;line-height:1.6}.metro .welcome-card .note{color:var(--muted);margin-bottom:24px;font-size:14px;line-height:1.7}.metro .welcome-card .go{border-radius:var(--radius-md);background:var(--accent);width:100%;height:48px;color:var(--accent-fg);font-size:16px;font-weight:600}.metro .mini-keys{opacity:.9;height:28px;margin-top:22px;display:flex}.metro .mini-keys i{background:var(--ivory);border-radius:0 0 3px 3px;flex:1;margin:0 1px}.metro .mini-keys i:nth-child(3n){background:var(--ebony);flex:.55}@media (prefers-reduced-motion:reduce){.metro,.metro *{transition:none!important}}@media (width<=400px){.metro .bpm{font-size:52px}.metro h1{font-size:22px}}