.metro{position:relative;max-width:760px;margin:0 auto;background:var(--card);color:var(--foreground);border:1px solid var(--border);border-radius:16px;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.metro .metro-body{display:flex;flex-direction:column;height:min(680px,calc(100dvh - 150px));min-height:500px}.metro .stage{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--foreground) 4%,var(--card)),var(--card) 72%)}.metro .panel{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card)}@media(min-width:768px){.metro{max-width:820px}.metro .metro-body{flex-direction:row;height:560px;min-height:0}.metro .stage{flex:1 1 auto}.metro .panel{flex:0 0 300px;justify-content:center;border-top:0;border-left:1px solid var(--border);padding:24px;gap:14px}}.metro.full{position:fixed;inset:0;z-index:60;max-width:none;border:0;border-radius:0}.metro.full .metro-body{height:100dvh}@media(min-width:768px){.metro.full .metro-body{height:100dvh}.metro.full .mviz{height:min(74vh,660px)}.metro.full .zen-num{font-size:clamp(140px,34vh,300px)}}.metro .fs-btn{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--muted-foreground);cursor:pointer}.metro .fs-btn:before{content:"";position:absolute;inset:-6px}.metro .fs-btn:hover{color:var(--foreground);background:var(--muted)}.metro .fs-btn:active{transform:scale(.92)}.metro .zen-btn{position:absolute;top:54px;right:10px;z-index:5;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--muted-foreground);cursor:pointer}.metro .zen-btn:before{content:"";position:absolute;inset:-6px}.metro .zen-btn:hover{color:var(--foreground);background:var(--muted)}.metro .zen-btn:active{transform:scale(.92)}.metro .zen-view{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.metro .zen-num{font-size:clamp(84px,22vh,190px);font-weight:200;line-height:.9;letter-spacing:-6px;font-variant-numeric:tabular-nums;color:var(--foreground);transition:transform .09s ease-out}.metro .zen-num.hit{transform:scale(1.06)}.metro .zen-unit{margin-top:16px;font-size:12px;letter-spacing:6px;color:var(--muted-foreground)}.metro .mviz{flex:0 1 auto;min-height:0;height:min(46vh,340px);width:auto;max-width:100%;overflow:visible}@media(min-width:768px){.metro .mviz{height:min(56vh,460px)}}.metro .mviz .cap,.metro .mviz .body,.metro .mviz .base,.metro .mviz .foot{fill:var(--muted);stroke:var(--foreground);stroke-width:4.5;stroke-linejoin:round}.metro .mviz .spine{stroke:var(--muted-foreground);stroke-width:2.5;opacity:.5}.metro .mviz .tick{stroke:var(--muted-foreground);stroke-width:3.5;stroke-linecap:round}.metro .mviz .tick.mid{stroke:var(--foreground);stroke-width:4.5;opacity:1}.metro .mviz .arm{stroke:var(--foreground);stroke-width:5;stroke-linecap:round}.metro .mviz .weight{fill:var(--foreground);transition:transform .2s ease}.metro .mviz .pivot{fill:var(--foreground)}.metro .mviz .armgrp{will-change:transform}.metro .ptimer{position:absolute;top:10px;left:12px;z-index:2;color:var(--foreground);opacity:.6;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.5px}.metro .beats{display:flex;justify-content:center;align-items:center;gap:12px;min-height:14px}.metro .dot{width:10px;height:10px;border-radius:50%;background:var(--muted-foreground);opacity:.35;transition:transform .06s,opacity .06s}.metro .dot.acc{width:13px;height:13px}.metro .dot.on{background:var(--foreground);opacity:1;transform:scale(1.3)}.metro .bpm{text-align:center;line-height:1}.metro .bpm b{display:block;font-size:40px;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums}.metro .bpm span{font-size:11px;color:var(--muted-foreground);letter-spacing:2px}.metro .btn{height:40px;padding:0 16px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--foreground);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:background .12s}.metro .btn:hover{background:var(--muted)}.metro .btn:active{transform:scale(.97)}.metro .btn.icon{width:40px;padding:0;font-size:20px}.metro .btn.play{height:44px;margin-top:2px;font-size:15px;font-weight:700;background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}.metro .btn.play:hover{background:color-mix(in srgb,var(--primary) 90%,var(--foreground))}.metro .row{display:flex;align-items:center;gap:10px}.metro .row.split{margin-top:6px}.metro .row.split .btn{flex:1;min-width:0;padding:0 8px;white-space:normal;line-height:1.25}.metro .tapwrap{display:flex;align-items:center;gap:6px;flex:1}.metro .tapwrap .btn,.metro .beatsel{flex:1}.metro .beatsel select{width:100%;height:40px;border-radius:8px;padding:0 10px;font-size:14px;font-weight:600;font-family:inherit;background:var(--card);color:var(--foreground);border:1px solid var(--border);cursor:pointer}.metro .beatsel select:hover{background:var(--muted)}.metro .help{position:relative;flex:none;width:24px;height:24px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--muted-foreground);font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}.metro .help:before{content:"";position:absolute;inset:-10px}.metro .help:active{transform:scale(.9)}.metro .pop{display:none}.metro .pop:popover-open{display:block}.metro .pop{position:fixed;inset:auto 16px 24px;max-width:408px;margin:0 auto;padding:16px 18px;background:var(--card);color:var(--foreground);border:1px solid var(--border);border-radius:14px;font-size:13.5px;line-height:1.75;box-shadow:0 10px 34px #00000047}.metro .pop b{color:var(--foreground)}.metro .pop::backdrop{background:#00000059}.metro .toast{display:none}.metro .toast:popover-open{display:block}.metro .toast{position:fixed;inset:auto 16px 24px;max-width:360px;margin:0 auto;padding:12px 16px;border:1px solid var(--border);background:var(--card);color:var(--foreground);border-radius:12px;font-size:13px;line-height:1.6;box-shadow:0 10px 34px #00000047}.metro .volwrap{display:flex;align-items:center;gap:8px;font-size:15px}.metro .volwrap input{flex:1;min-width:0}.metro input[type=range]{width:100%;height:28px;background:transparent;cursor:pointer;accent-color:var(--primary)}.metro .rangewrap{display:flex;flex-direction:column}.metro .range-row{display:flex;align-items:center;gap:8px}.metro .range-row input{flex:1;min-width:0}.metro .range-lab{display:flex;justify-content:space-between;margin-top:-2px;padding:0 48px;font-size:11px;color:var(--muted-foreground);font-variant-numeric:tabular-nums}.metro .checks{display:flex;flex-wrap:wrap;gap:6px 14px}.metro .checks label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-foreground);cursor:pointer}.metro .checks input{width:15px;height:15px;margin:0;accent-color:var(--primary);cursor:pointer}.metro .note{margin:0;font-size:12px;line-height:1.5;color:var(--muted-foreground);text-align:center}