:root{--bg:#0a0a0f;--surface:#12121a;--surface-2:#1a1a26;--border:#2a2a3a;--text:#e8e6f0;--text-dim:#7a7890;--accent:#ff6b3d;--accent-glow:#ff6b3d4d;--beat-off:#1e1e2e;--beat-on:#ff6b3d;--beat-accent:#fa4;--green:#3ddc84;--red:#f46}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;font-family:DM Sans,sans-serif;display:flex;overflow-x:hidden}body:after{content:"";pointer-events:none;z-index:1000;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");position:fixed;inset:0}.beat-flash{pointer-events:none;z-index:10;opacity:0;background:0 0;position:fixed;inset:0}.beat-flash.active.on-beat{background:#ff6b3d33;animation:.15s ease-out forwards beat-flash-anim}.beat-flash.active.accent{background:#fa46;animation:.18s ease-out forwards beat-flash-anim}@keyframes beat-flash-anim{0%{opacity:1}to{opacity:0}}.container{flex-direction:column;width:100%;max-width:480px;min-height:100vh;padding:1rem 1rem .5rem;display:flex}.header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.header h1{letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:800}.status-bar{color:var(--text-dim);letter-spacing:.05em;align-items:center;gap:.4rem;font-family:JetBrains Mono,monospace;font-size:.6rem;display:flex}.status-dot{background:var(--red);border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:background .3s}.status-dot.connected{background:var(--green)}.rtt-display{opacity:.7}.main-layout{flex-direction:row;flex:1;align-items:stretch;gap:1rem;display:flex}.viz-col{flex-direction:column;flex-shrink:0;width:clamp(90px,30vw,130px);display:flex}.beat-viz{flex:1;justify-content:center;align-items:stretch;display:flex}.tempo-col{flex-direction:column;flex-shrink:0;justify-content:space-between;align-items:center;gap:.4rem;width:32px;padding:.5rem 0;display:flex}.tempo-max,.tempo-min{color:var(--text-dim);font-family:JetBrains Mono,monospace;font-size:.5rem;line-height:1}.tempo-slider-v{writing-mode:vertical-lr;appearance:slider-vertical;cursor:pointer;background:var(--surface-2);direction:rtl;border-radius:2px;outline:none;flex:1;width:4px;margin:0;padding:0}.tempo-slider-v::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%}.tempo-slider-v::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px}.ctrl-col{flex-direction:column;flex:1;gap:.75rem;min-width:0;display:flex}.bpm-section{text-align:center;padding-top:.25rem}.bpm-wrap{display:inline-block;position:relative}.bpm-value{color:var(--text);text-shadow:0 0 40px var(--accent-glow);cursor:pointer;font-family:JetBrains Mono,monospace;font-size:6rem;font-weight:800;line-height:1;transition:text-shadow .1s;position:relative}input.bpm-edit{border:none;border-bottom:2px solid var(--accent);color:var(--text);text-align:center;cursor:text;-moz-appearance:textfield;background:0 0;border-radius:0;outline:none;width:4ch}input.bpm-edit::-webkit-outer-spin-button{-webkit-appearance:none}input.bpm-edit::-webkit-inner-spin-button{-webkit-appearance:none}.bpm-value.flash{text-shadow:0 0 60px var(--accent-glow), 0 0 100px var(--accent-glow)}.bpm-label{letter-spacing:.4em;color:var(--text-dim);margin-top:.15rem;font-family:JetBrains Mono,monospace;font-size:.6rem}.nudge-grid{grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.6rem;display:grid}.btn.nudge-btn{width:100%;min-width:0;padding:.45rem 0;font-size:1.2rem}.pulse-ring{pointer-events:none;opacity:0;border:2px solid #0000;border-radius:50%;width:120px;height:120px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8)}.pulse-ring.pulse{opacity:1;border-color:var(--accent);animation:.3s ease-out forwards pulse-out}@keyframes pulse-out{0%{opacity:.6;transform:translate(-50%,-50%)scale(.7)}to{opacity:0;transform:translate(-50%,-50%)scale(1.4)}}.viz-selector{justify-content:center;gap:.4rem;display:flex}.viz-btn{min-width:54px;padding:.3rem .6rem;font-size:.6rem}.viz-btn.active{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}.beat-dots{flex-direction:column;justify-content:space-evenly;align-items:center;width:100%;height:100%;padding:.5rem 0;display:flex}.beat-dot{background:var(--beat-off);border:2px solid var(--border);border-radius:50%;flex-shrink:0;width:clamp(50px,22vw,90px);height:clamp(50px,22vw,90px);transition:transform 80ms,background 80ms,border-color 80ms,box-shadow 80ms}.beat-dot.active{background:var(--beat-on);border-color:var(--beat-on);box-shadow:0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);transform:scale(1.3)}.beat-dot.accent.active{background:var(--beat-accent);border-color:var(--beat-accent);box-shadow:0 0 20px #fa46,0 0 40px #fa43}.ball-canvas{display:block;width:100%!important;height:100%!important}.controls{flex-direction:column;gap:.9rem;display:flex}.control-row{align-items:center;gap:.75rem;display:flex}.control-label{letter-spacing:.15em;color:var(--text-dim);text-transform:uppercase;flex-shrink:0;width:44px;font-family:JetBrains Mono,monospace;font-size:.65rem}.slider-wrap{flex:1;min-width:0}input[type=range]{appearance:none;background:var(--surface-2);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:18px;height:18px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px}.btn-row{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.btn{letter-spacing:.1em;border:2px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-transform:uppercase;text-align:center;border-radius:6px;min-width:44px;padding:.55rem .9rem;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700;transition:all .15s}.btn:hover{border-color:var(--accent);background:var(--surface-2)}.btn:active{transform:scale(.96)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;min-width:100px}.btn.primary:hover{background:#ff8055;border-color:#ff8055}.btn.primary.playing{background:var(--surface);border-color:var(--red);color:var(--red)}.btn.primary.playing:hover{background:var(--surface-2)}.btn.icon-btn{border-color:var(--text-dim);min-width:46px;color:var(--text-dim);justify-content:center;align-items:center;padding:.55rem;font-size:1.1rem;line-height:1;display:inline-flex}.btn.icon-btn.active{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}.time-sig-btns{flex-wrap:wrap;gap:.3rem;display:flex}.time-sig-btns .btn{min-width:32px;padding:.35rem .45rem;font-size:1rem}.time-sig-btns .btn.active{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}.footer{text-align:center;color:var(--text-dim);opacity:.5;letter-spacing:.1em;margin-top:1rem;padding-bottom:.5rem;font-family:JetBrains Mono,monospace;font-size:.6rem}