:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100vh;background:#05070c;color:#f4f2ee;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.metro__page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;padding:4.5rem 1.5rem 2.5rem;text-align:center}.metro__title{margin:0;font-size:2rem;letter-spacing:.04em}.metro__bpmRow{display:flex;align-items:center;gap:1.5rem}.metro__stepBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;color:#f4f2ee;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .15s ease}.metro__stepBtn:hover{background:#ffffff1f}.metro__bpmDisplay{display:flex;flex-direction:column;align-items:center;min-width:6rem}.metro__bpmValue{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;color:#a78bfa;line-height:1}.metro__bpmUnit{font-size:.8rem;opacity:.6;letter-spacing:.08em}.metro__slider{width:min(80vw,20rem);accent-color:#a78bfa}.metro__beats{display:flex;gap:.6rem;min-height:1.4rem}.metro__beatDot{width:1rem;height:1rem;border-radius:999px;background:#ffffff26;transition:background .06s ease,transform .06s ease}.metro__beatDot--accent{background:#a78bfa4d}.metro__beatDot--active{background:#a78bfa;transform:scale(1.3)}.metro__controls{display:flex;gap:.75rem}.metro__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;color:#f4f2ee;padding:.7rem 1.3rem;border-radius:.6rem;font-size:.95rem;cursor:pointer;transition:transform .1s ease,background .15s ease}.metro__btn:hover{background:#ffffff1f;transform:translateY(-1px)}.metro__btn--primary{background:linear-gradient(135deg,#ddd6fe,#a78bfa,#7c3aed 60%,#4c1d95);box-shadow:inset 0 1px #ffffff80;border-color:transparent;font-weight:600;color:#1a0e33}.metro__btn--primary:hover{background:linear-gradient(135deg,#ede9fe,#bfa5fb,#7c3aed 60%,#4c1d95)}.metro__btn--active{background:linear-gradient(135deg,#fecaca,#f87171,#dc2626 60%,#7f1d1d);color:#2d0a0a}.metro__signatureRow{display:flex;align-items:center;gap:.75rem}.metro__signatureLabel{font-size:.85rem;opacity:.6}.metro__signatureList{display:flex;gap:.5rem}.metro__signatureBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.16);background:#ffffff0d;color:#f4f2ee;padding:.4rem .7rem;border-radius:.5rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease}.metro__signatureBtn:hover{background:#ffffff1a}.metro__signatureBtn--active{border-color:#a78bfa;background:#a78bfa33;color:#ddd6fe}
