@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+SC:wght@500;700;900&display=swap');
:root{--ink:#f6f3eb;--acid:#d6ff00;--pink:#ff3d71;--night:#06070a}*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:var(--night);font-family:"Noto Sans SC",sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}.home{min-height:100svh;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;padding:42px 24px;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.03) 55%,rgba(0,0,0,.55)),url("bg.jpg") center/cover no-repeat}.home:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,transparent 0 18%,rgba(3,4,7,.15) 48%,rgba(3,4,7,.78) 100%);z-index:-1}.grain{position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen}.hero{width:min(850px,100%);position:relative;z-index:2}.eyebrow{margin:0 0 10px;letter-spacing:.28em;font-size:clamp(10px,1.5vw,14px);font-weight:900;color:var(--acid)}h1,h2{font-family:Anton,Impact,sans-serif;text-transform:uppercase;line-height:.86;letter-spacing:.025em;margin:0;font-weight:400}h1{font-size:clamp(66px,13vw,142px);text-shadow:5px 5px 0 var(--pink),8px 8px 16px #000}h1 span{color:var(--acid);text-shadow:5px 5px 0 #171b00,8px 8px 16px #000}.subtitle{font-size:clamp(14px,2vw,19px);font-weight:700;margin:22px 0 28px;letter-spacing:.06em}.choices{display:grid;gap:10px;width:min(600px,100%)}.choice{min-height:68px;border:1px solid rgba(255,255,255,.75);background:rgba(7,8,10,.7);backdrop-filter:blur(5px);display:grid;grid-template-columns:56px 1fr auto;align-items:center;padding:0 18px;text-align:left;transition:.2s;font-size:clamp(18px,3vw,26px);font-weight:900}.choice:hover,.choice:focus-visible{transform:translateX(12px) skewX(-4deg);color:#08090b;outline:2px solid white;outline-offset:3px}.red:hover{background:var(--pink)}.lime:hover{background:var(--acid)}.blue:hover{background:#2be7ff}.choice small,.choice b{font:700 11px monospace;letter-spacing:.1em}.choice small{opacity:.72}.choice b{color:var(--acid)}.choice:hover b{color:#08090b}.tag{position:absolute;bottom:18px;right:24px;margin:0;font:700 10px monospace;letter-spacing:.18em;opacity:.8}.equalizer{position:absolute;right:7vw;bottom:9vh;display:flex;align-items:end;gap:5px;height:90px;opacity:.7}.equalizer i,.scene-eq i{width:5px;background:var(--acid);animation:bounce .85s ease-in-out infinite alternate}.equalizer i:nth-child(2),.scene-eq i:nth-child(2){animation-delay:.18s}.equalizer i:nth-child(3),.scene-eq i:nth-child(3){animation-delay:.47s}.equalizer i:nth-child(4),.scene-eq i:nth-child(4){animation-delay:.1s}.equalizer i:nth-child(5),.scene-eq i:nth-child(5){animation-delay:.65s}.equalizer i:nth-child(6),.scene-eq i:nth-child(6){animation-delay:.3s}.equalizer i:nth-child(7),.scene-eq i:nth-child(7){animation-delay:.52s}@keyframes bounce{from{height:12px}to{height:90px}}.neon{position:absolute;height:2px;width:48vw;transform:rotate(-34deg);opacity:.75;background:var(--pink);box-shadow:0 0 16px 4px var(--pink);animation:sweep 5s linear infinite}.one{left:-18vw;top:18vh}.two{right:-28vw;bottom:22vh;background:var(--acid);box-shadow:0 0 16px 4px var(--acid);animation-delay:-2.5s}@keyframes sweep{50%{opacity:.2;transform:rotate(-34deg) translateX(20vw)}}.scene{position:fixed;inset:0;z-index:10;display:none;overflow:hidden;background:#050508}.scene.active{display:block;animation:appear .35s ease-out}.scene-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(.95) contrast(1.1);transform:scale(1.03);animation:zoom 12s ease-out both}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.25) 70%,rgba(0,0,0,.6)),linear-gradient(0deg,rgba(0,0,0,.72),transparent 60%)}.grid{position:absolute;width:120vw;height:50vh;bottom:-29vh;left:-10vw;background:linear-gradient(rgba(214,255,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(214,255,0,.25) 1px,transparent 1px);background-size:55px 55px;transform:perspective(280px) rotateX(62deg)}.scene-content{position:relative;z-index:2;min-height:100%;padding:clamp(22px,5vw,70px);display:flex;flex-direction:column;justify-content:center}.back{position:absolute;top:26px;left:clamp(22px,5vw,70px);border:0;background:transparent;font:700 14px monospace;letter-spacing:.18em}.back:hover{color:var(--acid)}.scene-content>div:nth-child(2){max-width:650px}.scene h2{font-size:clamp(68px,16vw,180px);text-shadow:6px 6px 0 var(--pink)}.playing{display:flex;align-items:center;gap:9px;font:700 13px monospace;letter-spacing:.18em}.playing i{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:blink .8s infinite alternate}.note{font-size:18px;font-weight:700;letter-spacing:.07em}.sound{position:absolute;bottom:clamp(24px,5vw,70px);left:clamp(22px,5vw,70px);border:1px solid var(--ink);padding:12px 16px;background:rgba(0,0,0,.45);font:700 13px monospace;letter-spacing:.15em}.sound:hover{background:var(--acid);color:#000}.vinyl{position:absolute;right:-7vw;bottom:-13vw;width:min(43vw,530px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(#101015 0 4px,#202028 5px 6px);border:10px solid #09090d;box-shadow:0 0 0 2px #444,0 0 35px #000;animation:spin 5s linear infinite}.vinyl i{width:19%;aspect-ratio:1;border-radius:50%;background:var(--pink);border:17px solid #111;position:absolute;inset:0;margin:auto}.scene-eq{position:absolute;right:clamp(25px,6vw,90px);top:clamp(25px,7vw,100px);display:flex;align-items:end;gap:4px;height:42px;z-index:3}.scene-eq i{width:4px;animation-duration:.55s}@keyframes appear{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes zoom{to{transform:scale(1.13)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{to{opacity:.25}}@media(max-width:600px){.home{align-items:end;padding-bottom:55px}.equalizer{display:none}.choice{min-height:61px;grid-template-columns:44px 1fr auto;padding:0 12px}.choice:hover{transform:translateX(5px)}.tag{left:24px;right:auto;font-size:9px}.vinyl{width:72vw;right:-20vw;bottom:-15vw}.note{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}