*{box-sizing:border-box}body{margin:0;background:#030105;color:white;font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:#08060ceF;border-bottom:1px solid #753783;gap:20px}nav{display:flex;gap:25px;font-size:12px;font-weight:bold}nav a:hover,.active{color:#ff18d4}.brand{font-size:36px;font-weight:1000;text-shadow:0 0 12px #de68ff;line-height:.85}.brand small{display:block;font-size:8px;margin-top:6px}header>a:last-child{font-size:11px}main{min-height:calc(100vh - 188px);background:radial-gradient(ellipse at 5% 60%,#b706662b,transparent 40%),radial-gradient(ellipse at 90% 65%,#2551c937,transparent 40%),#050207;padding-bottom:28px}.stage{height:51vh;min-height:330px;max-height:580px;background:url('assets/image-one-stage.jpg') center center/100% 100% no-repeat;position:relative;overflow:hidden}.stage:after{content:'';position:absolute;bottom:0;width:100%;height:35px;background:linear-gradient(transparent,#050207)}#motion{position:absolute;right:18px;top:12px;color:#fff;background:#06020c85;border:1px solid #aa63be;border-radius:4px;padding:7px;z-index:2;font-size:10px}.beams i{position:absolute;width:3px;height:130%;background:#a4eeff;box-shadow:0 0 15px 5px #19baff80;top:-20%;left:25%;transform:rotate(40deg);transform-origin:top;animation:sweep 7s ease-in-out infinite alternate;opacity:.35}.beams i+ i{left:80%;background:#ffa8ee;animation-delay:-3s}@keyframes sweep{to{transform:rotate(-35deg)}}.paused .beams i{animation-play-state:paused}.portals{width:min(1100px,85%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:30px}.portals>a{display:flex;align-items:center;padding:20px 26px;gap:25px;min-height:128px;border:2px solid #ff7ff1;box-shadow:0 0 8px #ff16d5,inset 0 0 30px #bd11a546;border-radius:8px;background:linear-gradient(120deg,#74146365,#0d031ee8)}.portals .record{border-color:#70ddff;box-shadow:0 0 10px #00baff,inset 0 0 30px #1181bd46;background:linear-gradient(120deg,#033362,#080a1e)}h1,h2{font-size:28px;line-height:1.05;margin:0;font-weight:900}.portals p{font-size:12px;margin:12px 0 0}.icon{font-size:65px;color:#ee50dd}.record .icon{color:#08c2ff}.portals b{margin-left:auto;font-size:28px}.quick{width:min(1200px,90%);margin:27px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.quick>a{border:1px solid currentColor;color:#ffb441;border-radius:7px;box-shadow:0 0 9px currentColor;display:flex;gap:16px;align-items:center;min-height:83px;padding:13px 18px}.quick>a:nth-child(2){color:#84ff32}.quick>a:nth-child(3){color:#c97dff}.quick>a:nth-child(4){color:#fff329}.quick span{font-size:37px}.quick div{color:white;font-size:13px;font-weight:bold;flex:1}.quick small{display:block;font-size:9px;font-weight:normal;margin-top:8px}.player{border-top:1px solid #e263bd;border-bottom:1px solid #ab759b;min-height:124px;background:#060609;display:flex;align-items:center;gap:20px;padding:14px 24px}.player>img{width:76px;height:76px;object-fit:cover}.now{display:flex;flex-direction:column;gap:6px;min-width:220px;font-size:13px}.now strong,.up strong{color:#ff16d5;font-size:11px}.now small{font-size:11px}.wave{height:52px;display:flex;gap:3px;align-items:center;flex:1;min-width:80px}.wave i{width:4px;background:#f518aa;height:var(--h)}.playing .wave i{animation:beat .55s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes beat{to{transform:scaleY(.25)}}button{cursor:pointer}.controls{display:flex;align-items:center;gap:16px}.controls button{background:none;border:0;color:white;font-size:24px}#play{border:4px solid #98067e;border-radius:100%;width:59px;height:59px}.controls label{display:flex;align-items:center;gap:10px}.controls input{width:90px;accent-color:#ff0dce}.up{border-left:1px solid #302130;padding-left:24px;display:flex;flex-direction:column;gap:5px;font-size:11px}.up img{width:44px;height:44px;cursor:pointer;margin-right:7px}#stop{background:#0e0710;border:1px solid #ff00c6;color:#ff16d5;font-weight:bold;padding:14px 22px;white-space:nowrap}#error{position:absolute;bottom:0;font-size:11px}a:hover{filter:brightness(1.25)}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}@media(max-width:1100px){nav{gap:12px;font-size:10px}.wave{display:none}.up{display:none}.player{justify-content:space-between}.quick{gap:12px}.quick>a{padding:10px}.quick span{font-size:27px}.portals{width:90%}}@media(max-width:700px){header{height:auto;min-height:64px;flex-wrap:wrap;padding:12px}nav{order:3;flex-wrap:wrap}.stage{height:35vh;min-height:250px;background-size:cover}.portals{gap:15px;grid-template-columns:1fr}.portals>a{min-height:100px;padding:15px}h1,h2{font-size:23px}.quick{grid-template-columns:1fr 1fr}.player{flex-wrap:wrap;gap:12px;padding:15px}.now{min-width:160px;flex:1}.controls{gap:10px}#stop{margin-left:auto}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* Continuous rave scene: real controls float inside the crowd. */
main{position:relative;isolation:isolate;min-height:calc(100svh - 64px);padding-bottom:160px;background:url('assets/rave-immersive.png') center top/100% 100% no-repeat;overflow:hidden}
.stage{background:none;height:50vh;min-height:330px;max-height:580px;overflow:visible}.stage:after,.beams{display:none}
.portals,.quick{position:relative;z-index:3}.portals>a{background:linear-gradient(120deg,#460c3d5c,#0902138c);backdrop-filter:blur(3px);text-shadow:0 2px 5px black}.portals .record{background:linear-gradient(120deg,#0429446b,#05071885)}
.quick>a{background:#03010669;backdrop-filter:blur(3px);text-shadow:0 2px 5px black}
.player{position:fixed;bottom:0;left:0;right:0;z-index:8;background:linear-gradient(180deg,#080510b8,#030207eb);backdrop-filter:blur(8px)}
.rave-lights{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.rave-lights>i{position:absolute;left:var(--x);top:-5%;height:140%;width:18%;transform-origin:50% 0;clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);background:linear-gradient(rgb(var(--colour)/.65),rgb(var(--colour)/.13) 55%,transparent);filter:blur(2px);animation:scan var(--speed) ease-in-out infinite alternate;animation-delay:var(--delay);transform:rotate(var(--angle))}
@keyframes scan{0%{transform:rotate(var(--angle));opacity:.3}45%{opacity:.75}100%{transform:rotate(calc(var(--angle) * -1));opacity:.4}}
.light-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 24% 36%,#ff00bf65,transparent 50%),radial-gradient(ellipse at 80% 55%,#0088ff55,transparent 45%);animation:rave-glow 5s ease-in-out infinite}
@keyframes rave-glow{0%,100%{opacity:.12}35%{opacity:.55}60%{opacity:.18}80%{opacity:.7}}
.follow-light{position:absolute;inset:0;background:radial-gradient(ellipse 240px 360px at var(--cursor-x,50%) var(--cursor-y,60%),#d9efff35,transparent 75%);transition:background-position .25s;opacity:.7}
.paused .rave-lights *{animation-play-state:paused}.paused .follow-light{opacity:0}
@media(max-width:700px){main{background-size:auto 100%;background-position:center top;padding-bottom:225px}.stage{height:35vh;min-height:250px}.rave-lights>i{width:30%}.player{min-height:150px}.portals>a{background:#09031c80}}
@media(prefers-reduced-motion:reduce){.rave-lights{display:none}}

.beat-logo{position:absolute;left:32%;top:14%;width:37%;height:30%;z-index:2;pointer-events:none;background:url('assets/rave-immersive.png');background-size:270.27027% 333.33333%;background-position:50.79365% 20%;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);transform:scale(var(--beat-scale,1));filter:brightness(var(--beat-brightness,1)) drop-shadow(0 0 var(--beat-glow,0px) #ff24da);will-change:transform,filter;transform-origin:50% 50%}
@media(max-width:700px){.beat-logo{display:none}}
@media(prefers-reduced-motion:reduce){.beat-logo{transform:none!important;filter:none!important}}