*{box-sizing:border-box;margin:0;padding:0}:root{--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}body{min-height:100vh;padding:20px;padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right));padding-top:max(20px, env(safe-area-inset-top));padding-bottom:max(20px, env(safe-area-inset-bottom));font-family:var(--font-sans);color:#fff;background:#111;justify-content:center;align-items:center;display:flex}.metro-wrap{-webkit-user-select:none;user-select:none;background:#111;border-radius:24px;width:100%;max-width:380px;padding:24px 20px 28px}.beat-dots{justify-content:center;gap:10px;margin-bottom:28px;display:flex}.beat-dot{background:#444;border-radius:50%;width:14px;height:14px;transition:background 50ms,transform 50ms}.beat-dot.accent{background:#555}.beat-dot.active{background:#ff5c00;transform:scale(1.35)}.beat-dot.active.accent{background:#ff8c00}.beat-dot.silent-active{background:#666;transform:scale(1.2)}.bpm-ring{justify-content:center;align-items:center;width:220px;height:220px;margin:0 auto 24px;display:flex;position:relative}.bpm-ring canvas{position:absolute;top:0;left:0}.bpm-inner{z-index:2;text-align:center;position:relative}.bpm-number{color:#fff;letter-spacing:-2px;font-size:72px;font-weight:500;line-height:1}.bpm-label{color:#999;letter-spacing:2px;text-transform:uppercase;margin-top:4px;font-size:13px}.tempo-label{color:#ff5c00;letter-spacing:1px;min-height:16px;margin-top:6px;font-size:12px}.silent-badge{letter-spacing:1px;text-transform:uppercase;color:#666;background:#222;border:1px solid #444;border-radius:20px;min-height:22px;margin-top:8px;padding:3px 10px;font-size:11px;transition:all .2s;display:inline-block}.silent-badge.active{color:#c90;background:#1a1200;border-color:#640}.silent-badge.warmup{color:#2a9955;background:#001a0a;border-color:#1a5533}.bpm-controls{justify-content:center;align-items:center;gap:16px;margin-bottom:20px;display:flex}.bpm-btn{color:#ddd;cursor:pointer;background:#2a2a2a;border:1.5px solid #555;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;line-height:1;transition:background .1s;display:flex}.bpm-btn:hover{background:#383838}.bpm-btn:active{background:#444}.bpm-slider{appearance:none;cursor:pointer;background:#444;border-radius:2px;outline:none;width:180px;height:4px}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#ff5c00;border:2px solid #111;border-radius:50%;width:20px;height:20px}.divider{background:#2a2a2a;height:1px;margin:16px 0}.row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.section-label{color:#888;letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;font-size:11px}.pill-group{flex-wrap:wrap;justify-content:flex-end;gap:5px;display:flex}.pill{color:#bbb;cursor:pointer;background:#252525;border:1.5px solid #555;border-radius:20px;padding:5px 11px;font-size:13px;transition:all .12s}.pill:hover{color:#eee;background:#2e2e2e;border-color:#777}.pill.active{color:#fff;background:#ff5c00;border-color:#ff5c00}.sub-pill{padding:5px 9px;font-size:12px}.stepper{align-items:center;gap:8px;display:flex}.stepper-val{color:#fff;text-align:center;min-width:24px;font-size:18px;font-weight:500}.stepper-btn{color:#ddd;cursor:pointer;background:#252525;border:1.5px solid #555;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;padding:0;font-size:18px;line-height:1;transition:background .1s;display:flex}.stepper-btn:hover{background:#2e2e2e;border-color:#777}.stepper-btn:active{background:#383838}.stepper-btn:disabled{opacity:.3;cursor:default}.toggle-switch{cursor:pointer;flex-shrink:0;width:44px;height:24px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-track{background:#444;border-radius:12px;transition:background .2s;position:absolute;inset:0}.toggle-thumb{background:#aaa;border-radius:50%;width:18px;height:18px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}.toggle-switch input:checked+.toggle-track{background:#2a1800}.toggle-switch input:checked+.toggle-track+.toggle-thumb{background:#c90;transform:translate(20px)}.silence-config{opacity:0;max-height:0;transition:max-height .28s,opacity .25s;overflow:hidden}.silence-config.open{opacity:1;max-height:240px}.silence-inner{padding-top:14px}.swing-control{flex:1;justify-content:flex-end;align-items:center;gap:10px;display:flex}.swing-slider{appearance:none;cursor:pointer;background:#444;border-radius:2px;outline:none;width:140px;height:4px}.swing-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#ff5c00;border:2px solid #111;border-radius:50%;width:16px;height:16px}.swing-value{color:#bbb;text-align:right;min-width:32px;font-size:12px}.mode-toggle{color:#666;cursor:pointer;vertical-align:middle;background:0 0;border:none;padding:0 4px;font-size:12px;line-height:1}.mode-toggle:hover{color:#ff5c00}.main-controls{gap:12px;margin-top:20px;display:flex}.tap-btn{color:#ddd;letter-spacing:1px;cursor:pointer;background:#252525;border:1.5px solid #555;border-radius:14px;flex:1;padding:16px;font-size:14px;transition:background .1s}.tap-btn:hover{background:#2e2e2e;border-color:#777}.tap-btn:active{background:#383838}.play-btn{color:#fff;letter-spacing:1px;cursor:pointer;background:#ff5c00;border:none;border-radius:14px;flex:2;padding:16px;font-size:15px;font-weight:500;transition:background .1s,transform 80ms}.play-btn:hover{background:#e05200}.play-btn:active{transform:scale(.97)}.play-btn.playing{background:#c40}.play-btn.playing:hover{background:#b83c00}@media (width<=480px){body{padding:8px;padding-left:max(8px, env(safe-area-inset-left));padding-right:max(8px, env(safe-area-inset-right));padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(8px, env(safe-area-inset-bottom))}.metro-wrap{border-radius:16px;padding:16px 12px 18px}.bpm-ring{margin-bottom:16px}.bpm-controls{margin-bottom:14px}.main-controls{margin-top:14px}.divider{margin:12px 0}.row{margin-bottom:12px}}