:root{--red:#FF3B5C;--green:#3DDC84;--cream:#FFF4E6;--bg:#1A0B2E;}
*{box-sizing:border-box}
html,body{margin:0;background:#0d0518;color:var(--cream);font-family:Fredoka,sans-serif;min-height:100vh}
#stage{position:relative;width:100%;height:calc(100vh - 110px);min-height:240px;background:#000;display:flex;align-items:center;justify-content:center}
canvas{display:block;max-width:100%;max-height:100%}
#splash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#3a1460,#1A0B2E 70%);z-index:5;text-align:center;padding:20px}
#splash.hide{display:none}
#splash{overflow:hidden}
#splash::before{content:'';position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,59,92,.08) 0 10deg,transparent 10deg 20deg);animation:spin 40s linear infinite}
#splash::after{content:'🍓 🫐 🍓 🍇 🍓 🫐 🍓 🍇';position:absolute;left:0;right:0;bottom:8%;font-size:40px;letter-spacing:.6em;opacity:.25;animation:drift 6s ease-in-out infinite alternate}
.splash-inner{position:relative;z-index:1}
.splash-inner>*{animation:rise .8s cubic-bezier(.2,1.4,.4,1) both}
.splash-inner>*:nth-child(2){animation-delay:.15s}.splash-inner>*:nth-child(3){animation-delay:.3s}.splash-inner>*:nth-child(4){animation-delay:.45s}.splash-inner>*:nth-child(5){animation-delay:.6s}
#splash h1{background:linear-gradient(90deg,#FF3B5C,#ffb3c1,#FF3B5C,#3DDC84,#FF3B5C);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px rgba(255,59,92,.6)) drop-shadow(6px 6px 0 #000);animation:rise .8s .15s cubic-bezier(.2,1.4,.4,1) both,shine 4s linear infinite!important}
#bigplay{position:relative;overflow:hidden;background:linear-gradient(135deg,#3DDC84,#2bb36b)!important;box-shadow:0 6px 0 #1c8a50,0 0 40px rgba(61,220,132,.5)!important}
#bigplay::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:sweep 2.2s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(-80px)}}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.9)}}
@keyframes shine{to{background-position:300% 0}}
@keyframes sweep{to{left:130%}}
#controls{background:linear-gradient(180deg,rgba(32,14,56,.95),#0d0518)!important;backdrop-filter:blur(10px);box-shadow:0 -8px 30px rgba(255,59,92,.15)}
#controls button{transition:all .15s}
#controls button:hover{border-color:var(--red);box-shadow:0 0 12px rgba(255,59,92,.5);transform:translateY(-1px)}
#prog{background:linear-gradient(90deg,var(--red),#ff9db0)!important;box-shadow:0 0 10px var(--red)}
.presents{font-family:'JetBrains Mono';letter-spacing:.3em;color:var(--green);font-size:clamp(10px,2vw,16px)}
#splash h1{font-family:Bungee;font-size:clamp(34px,8vw,96px);line-height:.95;margin:.2em 0;color:var(--red);text-shadow:4px 4px 0 var(--cream),8px 8px 0 #000}
.sub{opacity:.7;font-size:14px}
#bigplay{margin-top:24px;font-family:Bungee;font-size:clamp(18px,3vw,28px);background:var(--green);color:var(--bg);border:0;border-radius:999px;padding:16px 36px;cursor:pointer;box-shadow:0 6px 0 #1c8a50;animation:pulse 1s infinite}
#bigplay:active{transform:translateY(4px);box-shadow:0 2px 0 #1c8a50}
@keyframes pulse{50%{transform:scale(1.06)}}
.fan{margin-top:14px;font-family:'JetBrains Mono';font-size:12px;opacity:.8}
#controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;background:#140822;border-top:2px solid var(--red)}
#controls button{font-family:'JetBrains Mono';font-weight:800;background:#2a1445;color:var(--cream);border:1px solid #4a2a70;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px}
#controls button.on{background:var(--green);color:var(--bg)}
#rec.recording{background:var(--red)!important;animation:pulse .6s infinite}
#timeline{position:relative;flex:1;min-width:140px;height:22px}
#prog{position:absolute;left:0;top:8px;height:6px;background:var(--red);border-radius:3px;pointer-events:none;width:0}
#markers{position:absolute;inset:8px 0;height:6px;background:#2a1445;border-radius:3px}
#markers i{position:absolute;top:-5px;width:2px;height:16px;background:var(--green)}
#scrub{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;margin:0}
#time{font-family:'JetBrains Mono';font-size:12px;min-width:36px}
.vol input{width:70px;vertical-align:middle}
footer{text-align:center;font-size:12px;padding:8px;opacity:.75}
footer a{color:var(--green)}