:root{--bg:#07060a;--pink:#ff2e88;--cyan:#22e5ff;--lime:#b6ff3b;--orange:#ff8a1f;--vox:#ff4fd8;--inst:#2ef2c8}
body{margin:0;background:var(--bg);color:#eee;font-family:'DM Mono',monospace;min-height:100vh;
background-image:radial-gradient(circle at 15% 10%,rgba(255,46,136,.18),transparent 40%),radial-gradient(circle at 85% 30%,rgba(34,229,255,.14),transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px)}
.disp{font-family:'Unbounded',sans-serif}
.glow{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{text-shadow:0 0 18px var(--pink),0 0 40px var(--pink)}}
.glass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(8px)}
.mash{background:linear-gradient(90deg,var(--pink),var(--orange));box-shadow:0 0 30px rgba(255,46,136,.5);transition:transform .15s}
.mash:hover{transform:scale(1.03)}.mash:disabled{opacity:.4;transform:none}
.vinyl{border-radius:50%;background:repeating-radial-gradient(#111 0 2px,#222 3px 4px)}
.spin{animation:spin 1.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .6s both}@keyframes rise{from{opacity:0;transform:translateY(16px)}}
input[type=range]{accent-color:var(--pink)}
select{background:#111;border:1px solid #333;border-radius:8px;padding:2px 6px}
.pill{padding:3px 10px;border-radius:999px;border:1px solid var(--cyan);color:var(--cyan);font-size:11px}
.stem{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
.stem-v{box-shadow:inset 3px 0 0 var(--vox),0 0 14px rgba(255,79,216,.12)}
.stem-v span{color:var(--vox)}
.stem-i{box-shadow:inset 3px 0 0 var(--inst),0 0 14px rgba(46,242,200,.12)}
.stem-i span{color:var(--inst)}
.stretch{font-family:'DM Mono',monospace;padding:2px 8px;border-radius:6px;background:rgba(182,255,59,.1);color:var(--lime)}
.stretch.bad{background:rgba(255,40,60,.15);color:#ff4b5c}
.tag{font-size:10px;padding:1px 6px;border-radius:6px;background:rgba(255,138,31,.15);color:var(--orange)}
.bpm-badge{border:1px solid rgba(34,229,255,.4);border-radius:14px;padding:4px 14px;text-align:right;box-shadow:0 0 20px rgba(34,229,255,.2);color:var(--cyan)}
.beat{display:inline-block;animation:beat .5s ease-out infinite}
@keyframes beat{0%{text-shadow:0 0 16px var(--cyan);transform:scale(1.06)}40%{text-shadow:none;transform:scale(1)}}
.meter{width:8px;height:100%;background:#111;border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}
.meter>div{width:100%;height:0;transition:height .06s}
.pair{font-size:12px;color:var(--lime)}