.metro-page{--metro-accent:#aa3bff;--metro-beat:#c9a6f5;--metro-soft:#e4d6f7;--metro-lit:#d4a017;--metro-panel:#faf8fd;--metro-ok:#15803d;--metro-warn:#b45309;--metro-ink:#2b2433;flex-direction:column;gap:16px;width:100%;max-width:1040px;margin:0 auto;padding:24px 24px 80px;display:flex}@media (prefers-color-scheme:dark){.metro-page{--metro-accent:#b45cff;--metro-beat:#6d4a99;--metro-soft:#3a2f4a;--metro-panel:#1d1b24;--metro-ok:#4ade80;--metro-warn:#fbbf24;--metro-ink:#ece8f3}}.metro-hero{border:1px solid var(--border);background:var(--metro-panel);border-radius:18px;flex-direction:column;gap:16px;padding:18px 18px 12px;display:flex;position:relative;overflow:hidden}.metro-flash{pointer-events:none;background:var(--metro-accent);opacity:0;animation:.22s ease-out metro-flash;position:absolute;inset:0}.metro-flash.strong{animation-name:metro-flash-strong}@keyframes metro-flash{0%{opacity:.12}to{opacity:0}}@keyframes metro-flash-strong{0%{opacity:.24}to{opacity:0}}.metro-beats{flex-wrap:wrap;justify-content:center;gap:6px;display:flex;position:relative}.metro-beat{font:inherit;border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;width:52px;height:92px;padding:6px 4px 4px;transition:transform 60ms;display:flex}.metro-beat-bar{background:var(--metro-beat);border-radius:4px;width:70%}.metro-beat.level-3 .metro-beat-bar{background:var(--metro-accent);height:52px}.metro-beat.level-2 .metro-beat-bar{height:36px}.metro-beat.level-1 .metro-beat-bar{background:var(--metro-soft);height:20px}.metro-beat.level-0 .metro-beat-bar{border:1px dashed var(--text);background:0 0;height:4px}.metro-beat.active{border-color:var(--metro-lit);box-shadow:0 0 0 2px var(--metro-lit);transform:translateY(-2px)}.metro-beat.active .metro-beat-bar{background:var(--metro-lit)}.metro-beat.active.unsounded .metro-beat-bar{border:2px dashed var(--metro-lit);background:0 0}.metro-beat-subs{gap:3px;height:6px;display:flex}.metro-beat-subs i{background:var(--border);border-radius:50%;width:6px;height:6px}.metro-beat-subs i.on{background:var(--metro-lit)}.metro-beat-number{color:var(--text);font-size:12px;line-height:1}@media (width<=520px){.metro-beat{width:38px;height:76px}.metro-beat.level-3 .metro-beat-bar{height:40px}.metro-beat.level-2 .metro-beat-bar{height:28px}.metro-beat.level-1 .metro-beat-bar{height:16px}}.metro-main{flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;display:flex;position:relative}.metro-pendulum{flex:none;width:190px}.metro-pendulum-body{fill:var(--metro-soft);stroke:var(--border)}.metro-pendulum-arm{stroke:var(--metro-ink);stroke-width:4px;stroke-linecap:round}.metro-pendulum-weight{fill:var(--metro-accent)}.metro-pendulum-pivot{fill:var(--metro-ink)}.metro-tempo{flex-direction:column;align-items:center;gap:10px;width:min(100%,380px);min-width:0;display:flex}.metro-bpm-row{align-items:center;gap:14px;display:flex}.metro-step{font:inherit;border:1px solid var(--control-border);background:var(--bg);width:54px;height:54px;color:var(--text-h);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:50%;font-size:30px;line-height:1}.metro-step:active{background:var(--accent-bg)}.metro-bpm{flex-direction:column;align-items:center;display:flex}.metro-bpm input{font:inherit;font-variant-numeric:tabular-nums;text-align:center;width:3.3ch;color:var(--text-h);appearance:textfield;background:0 0;border:none;padding:0;font-size:64px;font-weight:700;line-height:1}.metro-bpm input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metro-bpm input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.metro-bpm-unit{color:var(--text);font-size:13px}.metro-slider{width:100%;accent-color:var(--metro-accent)}.metro-marking{align-items:baseline;gap:8px;font-size:14px;display:flex}.metro-marking strong{color:var(--text-h);font-size:17px;font-style:italic}.metro-actions{gap:10px;width:100%;display:flex}.metro-tap,.metro-start{font:inherit;cursor:pointer;touch-action:manipulation;border-radius:12px;padding:12px 16px;font-size:18px;font-weight:600}.metro-tap{border:1px solid var(--control-border);background:var(--bg);color:var(--text-h);flex:1}.metro-tap:active{background:var(--accent-bg)}.metro-start{border:1px solid var(--metro-accent);background:var(--metro-accent);color:#fff;flex:2}.metro-start.stop{background:var(--bg);color:var(--text-h)}.metro-readout{font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center;gap:4px 14px;min-height:1.4em;font-size:13px;display:flex}.metro-silent-tag{color:var(--metro-warn);font-weight:600}.metro-markings{flex-wrap:wrap;justify-content:center;gap:6px;display:flex;position:relative}.metro-markings button,.metro-chips button{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;padding:4px 10px;font-size:13px}.metro-markings button{font-style:italic}.metro-markings button.active,.metro-chips button.active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h);font-weight:600}.metro-keys{text-align:center;color:var(--text);margin:0;font-size:12px}@media (width<=520px){.metro-keys{display:none}.metro-pendulum{width:130px}.metro-bpm input{font-size:54px}}.metro-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;display:grid}@media (width<=800px){.metro-grid{grid-template-columns:minmax(0,1fr)}}.metro-card{border:1px solid var(--border);text-align:left;border-radius:12px;flex-direction:column;gap:10px;padding:14px 16px;font-size:14px;display:flex}.metro-card h2{color:var(--text-h);margin:0;font-size:18px}.metro-card h3{color:var(--text-h);margin:4px 0 0;font-size:14px}.metro-chips{flex-wrap:wrap;gap:6px;display:flex}.metro-chip-symbol{font-family:serif}.metro-row{flex-wrap:wrap;align-items:center;gap:8px 14px;display:flex}.metro-row.indent{padding-left:26px}.metro-row label,.metro-label{color:var(--text-h);align-items:center;gap:6px;display:inline-flex}.metro-card select,.metro-card input[type=number]{font:inherit;border:1px solid var(--control-border);background:var(--bg);color:var(--text-h);border-radius:6px;padding:3px 6px;font-size:13px}.metro-card input[type=number]{width:4.2em}.metro-stepper{border:1px solid var(--control-border);border-radius:8px;align-items:center;display:inline-flex;overflow:hidden}.metro-stepper button{font:inherit;background:var(--bg);width:28px;height:28px;color:var(--text-h);cursor:pointer;border:none}.metro-stepper strong{text-align:center;font-variant-numeric:tabular-nums;min-width:2ch}.metro-slider-label{color:var(--text-h);flex-direction:column;gap:2px;display:flex}.metro-slider-label input{width:100%;accent-color:var(--metro-accent)}.metro-check{color:var(--text-h);cursor:pointer;align-items:flex-start;gap:8px;display:flex}.metro-check input{accent-color:var(--metro-accent);margin-top:3px}.metro-hint{color:var(--text);margin:0;font-size:13px;font-weight:400}.metro-segmented{border:1px solid var(--border);border-radius:8px;display:inline-flex;overflow:hidden}.metro-segmented button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;padding:4px 10px;font-size:12px}.metro-segmented button.active{background:var(--accent-bg);color:var(--text-h);font-weight:600}.metro-btn{font:inherit;cursor:pointer;border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);border-radius:8px;padding:6px 12px;font-size:13px}.metro-btn.subtle{border-color:var(--border);background:var(--code-bg)}.metro-btn:disabled{opacity:.5;cursor:default}.metro-calibrating,.metro-warning,.metro-ok{border-radius:8px;margin:0;padding:8px 10px;font-size:13px}.metro-calibrating{background:var(--accent-bg);color:var(--text-h)}.metro-warning{border:1px solid var(--metro-warn);color:var(--metro-warn)}.metro-ok{border:1px solid var(--metro-ok);color:var(--metro-ok)}.metro-input{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;display:grid}.metro-input .metro-hint{grid-column:1/-1}.metro-level{background:var(--code-bg);border-radius:6px;height:12px;position:relative;overflow:hidden}.metro-level-fill{background:var(--metro-ok);height:100%;transition:width 40ms linear}.metro-level-fill.hot{background:var(--metro-warn)}.metro-level-fill.clip{background:#dc2626}.metro-level-mark{background:var(--text-h);width:2px;position:absolute;top:0;bottom:0}.metro-note-light{color:var(--text);font-size:12px}.metro-note-light.flash{animation:.4s ease-out metro-note}@keyframes metro-note{0%{color:var(--metro-lit);text-shadow:0 0 6px var(--metro-lit)}to{color:var(--text)}}.metro-btn.active{border-color:var(--accent-border);background:var(--accent-bg)}.metro-hitmeter{width:100%}.metro-hit-track{fill:var(--code-bg)}.metro-hit-zone{fill:#15803d2e}.metro-hit-center{stroke:var(--metro-ok);stroke-width:2px}.metro-hit{fill:var(--metro-accent)}.metro-hit.silent{fill:var(--metro-warn)}.metro-hit.last{stroke:var(--text-h);stroke-width:1.5px}.metro-hit-mean{fill:var(--text-h)}.metro-hit-axis{fill:var(--text);font-size:10px}.metro-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;display:grid}.metro-stats div{background:var(--code-bg);border-radius:8px;flex-direction:column;padding:6px 8px;display:flex}.metro-stats small{color:var(--text);font-size:11px}.metro-stats strong{color:var(--text-h);font-variant-numeric:tabular-nums;font-size:15px}