*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;background:#080808;overflow:auto}body{font-family:Share Tech Mono,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;align-items:center;min-height:100vh;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(255,40,30,.015) 0%,transparent 70%),radial-gradient(ellipse at 50% 50%,#0e0e10,#060606)}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.015) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:0}#root{display:flex;justify-content:center;align-items:center;min-height:100vh;position:relative;z-index:1}.device{width:400px;background:linear-gradient(145deg,#2a2a2e,#1e1e22);border-radius:36px;padding:28px 24px 22px;box-shadow:0 0 0 1.5px #3a3a3e,0 0 0 3px #1a1a1e,0 20px 80px #000c,0 4px 20px #00000080,inset 0 1px #ffffff0f;-webkit-user-select:none;user-select:none;position:relative;animation:devicePowerOn .8s cubic-bezier(.16,1,.3,1) both}.device:after{content:"";position:absolute;inset:0;border-radius:36px;opacity:.35;background-image: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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");background-size:128px 128px;pointer-events:none;z-index:10;mix-blend-mode:overlay}.device:before{content:"";position:absolute;top:6px;left:40px;right:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);border-radius:50%;z-index:11}@keyframes devicePowerOn{0%{opacity:0;transform:scale(.96) translateY(12px);filter:brightness(.6)}60%{opacity:1;transform:scale(1.005) translateY(-2px);filter:brightness(1.05)}to{opacity:1;transform:scale(1) translateY(0);filter:brightness(1)}}.speaker{width:100%;height:220px;background:#0a0a0d;border-radius:16px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:inset 0 2px 12px #000000b3,inset 0 0 0 1px #ffffff08;transition:box-shadow .5s ease;animation:sectionFadeIn .5s ease both;animation-delay:.3s}.speaker:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:1}.ecg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}.progress-pane{margin-bottom:14px;animation:sectionFadeIn .5s ease both;animation-delay:.45s}.progress-label{display:flex;justify-content:space-between;font-family:Share Tech Mono,monospace;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px}.progress-track{width:100%;height:6px;background:#1a1a1e;border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 3px #0006,0 1px #ffffff05}.progress-fill{height:100%;background:linear-gradient(90deg,#ff3a3a,#f64);border-radius:3px;transition:width .25s linear;box-shadow:0 0 8px #ff3a3a4d}.screen{width:100%;background:#0c0c0f;border-radius:14px;padding:14px 18px;margin-bottom:12px;border:1px solid #1e1e22;box-shadow:inset 0 2px 12px #000000b3,0 1px #ffffff08;transition:box-shadow .5s ease;position:relative;animation:sectionFadeIn .5s ease both;animation-delay:.45s}.screen:before{content:"";position:absolute;inset:0;border-radius:14px;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.3) 100%);pointer-events:none}.screen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.mode-label{font-family:Share Tech Mono,monospace;font-size:11px;color:#f44;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 8px rgba(255,68,68,.3)}.status-dots{display:flex;gap:5px}.status-dot{width:6px;height:6px;border-radius:50%;background:#222;border:1px solid #333}.status-dot.on{background:#f44;border-color:#f44;box-shadow:0 0 8px #f44,0 0 2px #f65}.bpm-display{text-align:center;padding:6px 0}.bpm-value{font-family:Orbitron,sans-serif;font-size:68px;font-weight:900;color:#ff3a3a;text-shadow:0 0 20px rgba(255,58,58,.6),0 0 50px rgba(255,58,58,.2),0 2px 4px rgba(0,0,0,.5);line-height:1;letter-spacing:4px}.bpm-label{font-family:Share Tech Mono,monospace;font-size:12px;color:#f44;text-transform:uppercase;letter-spacing:6px;margin-top:4px;opacity:.7;text-shadow:0 0 6px rgba(255,68,68,.2)}.beat-indicators{display:flex;justify-content:center;gap:12px;margin-top:12px}.beat-dot{width:12px;height:12px;border-radius:50%;background:#141417;border:1.5px solid #252528;transition:all .05s;box-shadow:inset 0 1px 3px #00000080}.beat-dot.active{background:#ff3a3a;border-color:#f55;box-shadow:0 0 10px #ff3a3ab3,0 0 20px #ff3a3a33,inset 0 -1px 2px #ff64504d}.beat-dot.downbeat{width:14px;height:14px;border-width:2px}.beat-dot.downbeat.active{background:#f64;border-color:#f75;box-shadow:0 0 14px #ff6644e6,0 0 28px #ff503240,inset 0 -1px 2px #ff825a66}.screen-footer{display:flex;justify-content:space-between;margin-top:12px;font-family:Share Tech Mono,monospace;font-size:10px;color:#f44;text-transform:uppercase;letter-spacing:1px;opacity:.6;text-shadow:0 0 4px rgba(255,68,68,.15)}.settings-row{display:flex;gap:8px;margin-bottom:12px;animation:sectionFadeIn .5s ease both;animation-delay:.6s}.settings-row-3{display:grid;grid-template-columns:1fr 1fr 1fr}.setting-group{flex:1;background:linear-gradient(180deg,#141417,#111114);border-radius:12px;padding:10px 10px 12px;border:1px solid #222;box-shadow:inset 0 1px 4px #0000004d,0 1px #ffffff05}.setting-label{font-family:Share Tech Mono,monospace;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}.setting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.setting-grid-4{grid-template-columns:repeat(4,1fr)}.setting-btn{background:#1a1a1e;border:1px solid #2a2a2e;border-radius:6px;padding:7px 0;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.setting-btn:hover:not(:disabled){border-color:#555;background:#1e1e24}.setting-btn.selected{border-color:#ff3a3a;background:#ff3a3a14;box-shadow:0 0 10px #ff3a3a1a,inset 0 0 8px #ff3a3a0d}.setting-btn:disabled{opacity:.35;cursor:default}.setting-btn-value{font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;color:#555;letter-spacing:.5px}.setting-btn.selected .setting-btn-value{color:#ff3a3a;text-shadow:0 0 8px rgba(255,58,58,.4)}.bpm-input-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.bpm-input{width:100%;background:#1a1a1e;border:1px solid #2a2a2e;border-radius:8px;padding:10px 12px;font-family:Orbitron,sans-serif;font-size:22px;font-weight:700;color:#ff3a3a;text-align:center;letter-spacing:2px;outline:none;transition:all .15s ease;text-shadow:0 0 8px rgba(255,58,58,.3);-moz-appearance:textfield}.bpm-input::-webkit-outer-spin-button,.bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-input:focus{border-color:#ff3a3a;box-shadow:0 0 10px #ff3a3a26,inset 0 0 8px #ff3a3a0d}.bpm-input:disabled{opacity:.35;cursor:default}.bpm-input-max{font-family:Share Tech Mono,monospace;font-size:8px;color:#444;text-transform:uppercase;letter-spacing:1.5px}.transport{display:flex;gap:8px;margin-bottom:14px;animation:sectionFadeIn .5s ease both;animation-delay:.7s}.transport-btn{flex:1;background:linear-gradient(180deg,#1a1a1e,#141417 40%,#111114);border:1px solid #2a2a2e;border-bottom:2px solid #1a1a1e;border-top:1px solid #333;border-radius:12px;padding:14px 0;cursor:pointer;transition:all .12s ease;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:Share Tech Mono,monospace;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1.5px;box-shadow:0 3px 8px #0006,0 1px 2px #0000004d,inset 0 1px #ffffff0a;position:relative}.transport-btn:hover:not(:disabled){border-color:#f44;border-top-color:#f55;color:#f44;background:linear-gradient(180deg,#1e1e24,#181820 40%,#141417);box-shadow:0 3px 12px #ff3a3a1a,0 1px 2px #0000004d,inset 0 1px #ffffff0d}.transport-btn:active:not(:disabled){transform:translateY(1px);background:linear-gradient(180deg,#121215,#0e0e11);border-top:1px solid #222;border-bottom:1px solid #2a2a2e;box-shadow:0 1px 2px #0000004d,inset 0 2px 6px #0006}.transport-btn:disabled{opacity:.25;cursor:default;box-shadow:none}.play-icon{width:0;height:0;border-left:14px solid #ff4444;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;filter:drop-shadow(0 0 4px rgba(255,68,68,.3))}.pause-icon{display:flex;gap:3px}.pause-icon div{width:4px;height:16px;background:#f44;border-radius:1px;box-shadow:0 0 4px #ff44444d}.stop-icon{width:14px;height:14px;background:#f44;border-radius:2px;box-shadow:0 0 4px #ff44444d}.bottom-labels{display:flex;justify-content:space-between;align-items:center;padding:0 4px;margin-bottom:10px;animation:sectionFadeIn .5s ease both;animation-delay:.8s}.bottom-label{font-family:Share Tech Mono,monospace;font-size:9px;color:#3a3a3e;text-transform:uppercase;letter-spacing:1.5px}.brand-divider{width:60%;margin:0 auto 10px;height:1px;background:linear-gradient(90deg,transparent,#2a2a2e,transparent);animation:sectionFadeIn .5s ease both;animation-delay:.75s}.brand-mark{text-align:center;margin-bottom:6px;animation:sectionFadeIn .5s ease both;animation-delay:.85s}.brand-name{font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:6px;text-shadow:0 1px 0 rgba(255,255,255,.04),0 -1px 0 rgba(0,0,0,.6)}.made-in{text-align:center;margin-top:4px;font-family:Share Tech Mono,monospace;font-size:7px;color:#2a2a2e;text-transform:uppercase;letter-spacing:3px;animation:sectionFadeIn .5s ease both;animation-delay:.9s}.credit{text-align:center;margin-top:3px;font-family:Share Tech Mono,monospace;font-size:7px;color:#2a2a2e;letter-spacing:1.5px;transition:color .3s ease;animation:sectionFadeIn .5s ease both;animation-delay:.95s}.credit:hover{color:#555}@keyframes sectionFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes statusPulse{0%,to{box-shadow:0 0 8px #f44,0 0 2px #f65;opacity:1}50%{box-shadow:0 0 4px #f44,0 0 1px #f65;opacity:.7}}.status-dot.on{animation:statusPulse 2s ease-in-out infinite}@keyframes flash{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.bpm-value.beat-flash{animation:flash .1s ease}@keyframes screenGlow{0%,to{box-shadow:inset 0 2px 12px #000000b3,0 1px #ffffff08,0 0 20px #ff3a3a0a}50%{box-shadow:inset 0 2px 12px #000000b3,0 1px #ffffff08,0 0 30px #ff3a3a14}}.screen.playing{animation:screenGlow 2s ease-in-out infinite}.screen.playing.paused{animation-play-state:paused}@keyframes speakerBreath{0%,to{box-shadow:inset 0 2px 12px #000000b3,inset 0 0 0 1px #ffffff08}50%{box-shadow:inset 0 2px 12px #000000b3,inset 0 0 0 1px #ffffff08,inset 0 0 30px #ff3a3a08}}.speaker.active{animation:speakerBreath 2s ease-in-out infinite}.speaker.active.paused{animation-play-state:paused}@media(max-width:440px){.device{width:340px;padding:20px 18px 18px;border-radius:28px}.device:after{border-radius:28px}.bpm-value{font-size:52px}.speaker{height:150px}}