.metro-stage{flex-direction:column;align-items:center;padding:6px 0 4px;display:flex;position:relative}.metro-flash{aspect-ratio:1;opacity:0;pointer-events:none;background:radial-gradient(circle,#818cf86b 0%,#38bdf81f 45%,#0000 70%);border-radius:50%;width:min(70vw,280px);margin-top:calc(min(70vw,280px)/-2);margin-left:calc(min(70vw,280px)/-2);position:absolute;top:46%;left:50%;transform:scale(.7)}.metro-flash.accent{background:radial-gradient(circle,#e879f980 0%,#818cf829 45%,#0000 70%)}.metro-body{filter:drop-shadow(0 18px 30px #0000008c);width:min(52vw,210px);height:auto;position:relative;overflow:visible}.metro-shell{stroke:#ffffff1a;stroke-width:1.5px}.metro-plate{stroke:#7dd3fc2e;stroke-width:1px}.metro-scale line{stroke:#ffffff38;stroke-width:1.4px;stroke-linecap:round}.metro-arm{transform-box:view-box;transform-origin:100px 212px;will-change:transform}.metro-weight{transition:transform .45s var(--spring)}.metro-pivot{fill:#e2e8f0;stroke:#0f172ae6;stroke-width:3px}.metro-base{fill:#ffffff0f}.metro-beats{flex-wrap:wrap;justify-content:center;gap:10px;min-height:34px;margin-top:14px;display:flex}.metro-beat{cursor:pointer;width:30px;height:30px;transition:border-color .2s, background .2s, transform .3s var(--spring);background:#ffffff0d;border:2px solid #ffffff29;border-radius:50%;padding:0;position:relative}.metro-beat:after{content:"";background:#ffffff59;border-radius:50%;position:absolute;inset:7px}.metro-beat:hover{border-color:var(--accent)}.metro-beat:active{transform:scale(.88)}.metro-beat[data-level=accent]{border-color:#e879f9bf}.metro-beat[data-level=accent]:after{background:var(--accent-gradient);inset:4px}.metro-beat[data-level=mute]{border-style:dashed;border-color:#ffffff24}.metro-beat[data-level=mute]:after{background:0 0}.metro-beat.is-now{border-color:var(--accent);background:#38bdf838;box-shadow:0 0 18px -2px #38bdf8bf}.metro-beat[data-level=accent].is-now{background:#e879f940;box-shadow:0 0 20px -2px #e879f9cc}.metro-tempo{justify-content:center;align-items:center;gap:14px;margin-top:14px;display:flex}.metro-readout{text-align:center;min-width:150px}.metro-bpm{width:4ch;color:var(--fg);letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums;appearance:textfield;background:0 0;border:none;border-bottom:2px solid #0000;padding:0;font-family:inherit;font-size:clamp(3.2rem,15vw,4.4rem);font-weight:800;line-height:1;transition:border-color .2s}.metro-bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metro-bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.metro-bpm:hover,.metro-bpm:focus{border-bottom-color:#38bdf899;outline:none}.metro-unit{letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);margin:2px 0 0;font-size:.78rem;font-weight:800}.metro-marking{color:var(--accent)}.metro-marking.swap{animation:metro-swap .45s var(--spring);display:inline-block}.metro-step{border:1.5px solid var(--card-border);width:52px;height:52px;color:var(--fg-muted);cursor:pointer;touch-action:manipulation;transition:border-color .15s, color .15s, transform .3s var(--spring);background:#ffffff0a;border-radius:50%;place-items:center;display:grid}.metro-step:hover{color:var(--fg);border-color:var(--accent)}.metro-step:active{transform:scale(.88)}.metro-range{margin-top:6px}.metro-controls{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:12px 0 0;display:grid}.metro-tap{border:1.5px solid var(--card-border);width:74px;height:74px;color:var(--fg);letter-spacing:.04em;cursor:pointer;touch-action:manipulation;transition:border-color .15s, transform .25s var(--spring);background:radial-gradient(circle at 35% 30%,#ffffff1a,#ffffff05);border-radius:50%;justify-self:start;font-family:inherit;font-size:1rem;font-weight:800}.metro-tap:hover{border-color:var(--accent)}.metro-tap:active,.metro-tap.hit{border-color:var(--accent-3);transform:scale(.9)}.metro-main{background:var(--accent-gradient);color:#06101f;cursor:pointer;min-width:150px;height:64px;transition:transform .3s var(--spring);border:none;border-radius:100px;justify-content:center;align-items:center;gap:8px;padding:0 26px;font-family:inherit;font-size:1.05rem;font-weight:800;display:inline-flex;box-shadow:0 14px 34px -14px #38bdf8d9}.metro-main:active{transform:scale(.95)}.metro-main .i-stop{display:none}.metro-card[data-state=running] .metro-main{background:linear-gradient(120deg,#fb7185,#e879f9);box-shadow:0 14px 34px -14px #fb7185d9}.metro-card[data-state=running] .metro-main .i-play{display:none}.metro-card[data-state=running] .metro-main .i-stop{display:block}.metro-counter{font-variant-numeric:tabular-nums;grid-template-columns:auto auto;justify-self:end;align-items:baseline;gap:2px 8px;font-size:.78rem;display:grid}.metro-counter .k{color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700}.metro-counter strong{color:var(--fg);text-align:right;font-size:.95rem}.metro-tap-note{text-align:center;min-height:1.4em;color:var(--accent);margin:8px 0 6px;font-size:.85rem;font-weight:700}.metro-sound-row{align-items:start}.metro-trainer{border:1px solid var(--card-border);border-radius:var(--r-md);background:#ffffff05;margin-top:6px;padding:0 16px}.metro-trainer summary{cursor:pointer;color:var(--fg);justify-content:space-between;align-items:center;padding:14px 0;font-size:.9rem;font-weight:800;list-style:none;display:flex}.metro-trainer summary::-webkit-details-marker{display:none}.metro-trainer summary:after{content:"▾";color:var(--fg-muted);transition:transform .3s var(--ease)}.metro-trainer[open] summary:after{transform:rotate(180deg)}.metro-trainer[open]{padding-bottom:12px}.metro-trainer-grid{grid-template-columns:repeat(3,1fr);gap:0 10px;margin-top:10px;display:grid}.metro-trainer-status{min-height:1.3em;color:var(--accent);margin:0;font-size:.85rem;font-weight:700}.metro-shortcuts{margin-top:14px}@media (width<=520px){.metro-controls{grid-template-columns:auto 1fr}.metro-main{grid-area:1/1/auto/-1;justify-self:center}.metro-tap{width:64px;height:64px}.metro-trainer-grid{grid-template-columns:1fr 1fr}}@media (hover:none){.metro-shortcuts{display:none}}@media (prefers-reduced-motion:no-preference){.metro-beat.hit{animation:metro-pop .32s var(--spring)}.metro-flash.hit{animation:metro-flash .5s var(--ease)}.metro-card[data-state=running] .metro-pivot{animation:1s ease-in-out infinite alternate metro-glow}}@keyframes metro-pop{0%{transform:scale(1)}35%{transform:scale(1.32)}to{transform:scale(1)}}@keyframes metro-flash{0%{opacity:.95;transform:scale(.72)}to{opacity:0;transform:scale(1.18)}}@keyframes metro-swap{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes metro-glow{0%{opacity:1}to{opacity:.7}}.metro-tempo-table{min-width:0}.metro-tempo-table td:nth-child(2){white-space:normal;text-align:left}.metro-tempo-table th:nth-child(2){text-align:left}