.metro{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;margin-bottom:14px;background:radial-gradient(110% 75% at 50% -8%,rgba(251,146,60,.13) 0%,transparent 62%),linear-gradient(180deg,var(--bg-2) 0%,var(--bg-1) 100%);box-shadow:0 32px 80px -36px #000000d9,inset 0 1px #ffffff0d}.metro:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(85% 70% at 50% 35%,#000 0%,transparent 100%);-webkit-mask-image:radial-gradient(85% 70% at 50% 35%,#000 0%,transparent 100%)}.metro-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}.metro-tempo{display:flex;align-items:center;justify-content:center;gap:14px}.metro-nudge{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;font-size:15px;border-radius:50%;color:var(--accent-text);background:#ffffff0a;border:1px solid rgba(251,146,60,.22);transition:background .15s ease,border-color .15s ease,transform .15s cubic-bezier(.16,1,.3,1)}.metro-nudge:hover{background:#fb923c24;border-color:#fb923c80;transform:translateY(-1px)}.metro-nudge:active{transform:translateY(0)}.metro-nudge:focus-visible{outline:none;box-shadow:0 0 0 3px #fb923c66}.metro-bpm-wrap{text-align:center;min-width:170px}.metro-bpm{width:100%;display:block;border:none;background:transparent;text-align:center;font-family:inherit;font-size:clamp(56px,6.6vw,78px);font-weight:800;line-height:.92;letter-spacing:-.05em;font-variation-settings:"opsz" 96;font-variant-numeric:tabular-nums;color:var(--text);padding:0;border-radius:12px;caret-color:var(--accent);transition:box-shadow .16s ease,color .16s ease;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.metro-bpm::-webkit-outer-spin-button,.metro-bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.metro-bpm:hover{color:var(--accent-warm)}.metro-bpm:focus{outline:none;box-shadow:0 0 0 2px #fb923c73}.metro-bpm-unit{display:block;margin-top:1px;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text)}.metro-marking{display:block;margin-top:5px;font-size:12px;font-style:italic;color:var(--text-faint)}.metro-analog{width:clamp(180px,24vh,262px)}.metro-analog svg{width:100%;height:auto;display:block;overflow:visible}.metro-case-edge{fill:none;stroke:#000000ad;stroke-width:1.6;stroke-linejoin:round}.metro-arris-light{stroke:#ffd8a461;stroke-width:2;fill:none}.metro-arris-dark{stroke:#00000080;stroke-width:2.4;fill:none}.metro-cavity{fill:#0b0703}.metro-cavity-lip{fill:none;stroke:#0000008c;stroke-width:2.2;stroke-linejoin:round}.metro-scale{stroke:#d6b27680;stroke-width:1.2;stroke-linecap:round}.metro-plinth{fill:#7a5f2c;stroke:#0006;stroke-width:.8}.metro-pivot{fill:#d8b476}.metro-rod{transform-box:view-box;transform-origin:100px 206px;transform:rotate(-26deg);transition:transform .4s cubic-bezier(.37,0,.63,1)}.metro-rod.is-right{transform:rotate(26deg)}.metro-rod.is-idle{transform:rotate(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}.metro-rod-bar{fill:#c9ad74}.metro-weight{fill:url(#metroWeight);stroke:#00000059;stroke-width:1;transition:y .32s cubic-bezier(.16,1,.3,1)}.metro-bob{fill:var(--accent);filter:drop-shadow(0 0 9px rgba(251,146,60,.8))}@media(prefers-reduced-motion:reduce){.metro-rod,.metro-rod.is-right,.metro-rod.is-idle{transition:none;transform:rotate(0)}}.metro-beats{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:20px}.metro-transport{display:flex;flex-direction:column;align-items:center;gap:7px}.metro-play{width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;font-size:25px;color:#0a0a0c;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);box-shadow:0 14px 38px -12px #fb923ccc,inset 0 1px #ffffff59;transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .22s ease}.metro-play:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px #fb923cf2,inset 0 1px #ffffff59}.metro-play:focus-visible{outline:none;box-shadow:0 0 0 4px #fb923c73}.metro-play[aria-pressed=true]{background:linear-gradient(135deg,#2a2a31,#1b1b20);color:var(--accent-text);box-shadow:0 0 0 1px #fb923c66,inset 0 1px #ffffff14}.metro-status{margin:0;font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;min-height:15px;text-align:center}.metro-status kbd{font-family:inherit;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff17}.metro-output{position:absolute;right:0;bottom:2px;display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:999px;background:#00000052;border:1px solid var(--border)}.metro-mute{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;cursor:pointer;border:none;border-radius:999px;background:#ffffff0d;color:var(--text-dim);font-size:15px;transition:color .16s ease,background .16s ease}.metro-mute:hover{color:var(--text);background:#ffffff17}.metro-mute:focus-visible{outline:none;box-shadow:0 0 0 3px #fb923c66}.is-muted .metro-mute{color:var(--accent-text);background:#fb923c29}.metro-volume{--fill: 100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:96px;height:20px;background:transparent;cursor:pointer}.metro-volume:focus-visible{outline:none}.metro-volume::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill),rgba(255,255,255,.13) var(--fill),rgba(255,255,255,.13) 100%)}.metro-volume::-moz-range-track{height:4px;border-radius:999px;background:#ffffff21}.metro-volume::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}.metro-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-4.5px;border-radius:999px;background:#f5e7d6;box-shadow:0 2px 6px #0009;-webkit-transition:transform .14s cubic-bezier(.16,1,.3,1);transition:transform .14s cubic-bezier(.16,1,.3,1)}.metro-volume::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:999px;background:#f5e7d6;box-shadow:0 2px 6px #0009}.metro-volume:hover::-webkit-slider-thumb{transform:scale(1.15)}.metro-volume:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fb923c73}.metro-volume:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fb923c73}.is-muted .metro-volume::-webkit-slider-runnable-track{background:#ffffff21}.is-muted .metro-volume::-moz-range-progress{background:#ffffff21}.is-muted .metro-volume::-webkit-slider-thumb{background:var(--text-faint)}.is-muted .metro-volume::-moz-range-thumb{background:var(--text-faint)}.metro-volume-value{min-width:22px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--text-faint)}@media(prefers-reduced-motion:reduce){.metro-volume:hover::-webkit-slider-thumb{transform:none}}.metro-controls{display:grid;grid-template-columns:1.4fr .9fr .9fr 1.6fr;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}.metro-group{min-width:0}.metro-group>.field-label{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:10px}.metro-group>.field-label i{font-size:11px;color:var(--accent)}.seg-grid{display:grid;gap:4px;padding:4px;border-radius:13px;background:#0000004d;border:1px solid var(--border)}.seg-grid--7{grid-template-columns:repeat(7,minmax(0,1fr))}.seg-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}.seg-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.seg-grid button{cursor:pointer;border:none;background:transparent;color:var(--text-faint);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:-.02em;padding:8px 2px;min-height:34px;border-radius:9px;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .16s ease,background .16s ease}.seg-grid button:hover{color:var(--text-dim);background:#ffffff0a}.seg-grid button[aria-pressed=true]{color:#0a0a0c;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);box-shadow:0 6px 18px -8px #fb923cb3,inset 0 1px #ffffff40}.seg-grid button:focus-visible{outline:none;box-shadow:0 0 0 2px #fb923c73}.metro-group--quiet>.field-label{color:#ffffff47}.metro-group--quiet>.field-label i{color:#ffffff4d}.sound-seg button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:600;letter-spacing:0;padding:6px 2px}.sound-seg button i{font-size:15px;transition:color .16s ease}.sound-seg button[aria-pressed=true]{color:var(--accent-text);background:#fb923c21;box-shadow:inset 0 0 0 1px #fb923c4d}.sound-seg button[aria-pressed=true] i{color:var(--accent-text)}@media(prefers-reduced-motion:reduce){.metro-play:hover,.metro-nudge:hover{transform:none}}@media(max-width:620px){.metro-output{position:static;align-self:center;padding:6px 12px 6px 6px}.metro-volume{width:132px}}@media(max-width:900px){.metro{padding:22px 16px;border-radius:18px}.metro-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.metro-group:first-child,.metro-group--quiet{grid-column:1 / -1}.seg-grid button{min-height:40px;font-size:12px}.sound-seg button{font-size:10px}}