:root{--ink:#090814;--paper:#e7ddc9;--gold:#ffc94a;--pulse:0}*{box-sizing:border-box}body{margin:0;background:#090814;color:var(--paper);font-family:"Space Grotesk",sans-serif;min-height:100vh;overflow-x:hidden}header{height:64px;border-bottom:2px solid #ffffff2b;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;font:500 11px "DM Mono";letter-spacing:.06em;background:#08070e}header a{color:inherit;text-decoration:none}header button{color:inherit;border:1px solid #ffffff66;background:#171522;padding:9px 12px;font:inherit;cursor:pointer}.marquee{padding:25px 4vw 18px;position:relative;background:radial-gradient(circle at 20% 10%,#392044,#0c0a15 52%)}.marquee>p,.hint{font:500 10px "DM Mono";letter-spacing:.12em;color:#d7c8a7}.marquee h1{font:clamp(52px,7vw,105px)/.85 "Archivo Black";letter-spacing:-.065em;margin:20px 0 0}.marquee h1 span{color:#f45472;-webkit-text-stroke:2px #f4dca7;text-shadow:0 0 22px #ff315a66}.controls{position:absolute;right:4vw;bottom:20px;width:min(430px,43vw);display:grid;gap:10px}.controls button{border:3px solid #e7ddc9;background:#ffc94a;color:#090814;box-shadow:5px 5px 0 #e7ddc9;padding:12px 15px;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer}.controls button b{font-size:25px}.play-label{font:17px "Archivo Black"}.play-label small,.now span{display:block;font:9px "DM Mono";margin-top:3px}.now{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff55;padding:4px 0}.now strong{font:11px "DM Mono"}.theatre{height:510px;position:relative;overflow:hidden;background:linear-gradient(#05040c,#171023 70%,#07060b);border-top:7px solid #321328;border-bottom:12px solid #2d1723;box-shadow:inset 0 20px 50px #000}.proscenium{height:45px;position:absolute;top:0;left:0;right:0;z-index:12;background:linear-gradient(#6f1738,#32091f);border-bottom:7px solid #d89c35;display:flex;justify-content:space-around}.proscenium i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff8a5 0 18%,#ffc33c 22% 47%,#54200a 50%);box-shadow:0 0 22px #ffbe35}.curtain{position:absolute;top:35px;bottom:0;width:17%;z-index:9;background:repeating-linear-gradient(90deg,#410b28 0 22px,#77183d 24px 43px,#2c071c 45px 55px);border:4px solid #18040f}.curtain:after{content:"";position:absolute;top:41%;width:120%;height:28px;background:#d59b35;border:5px solid #4b2305;border-radius:50%}.curtain.left{left:-4%;clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}.curtain.right{right:-4%;clip-path:polygon(0 0,100% 0,100% 100%,28% 100%)}.spot{position:absolute;top:35px;width:34%;height:92%;opacity:calc(.22 + var(--pulse)*.75);filter:blur(2px);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);z-index:1}.spot-a{left:8%;background:linear-gradient(#9ed7ff88,#624eff0a)}.spot-b{left:33%;background:linear-gradient(#fff3bd88,#ffcf5b08)}.spot-c{right:7%;background:linear-gradient(#ff9add88,#ff2e9d08)}.backdrop{position:absolute;inset:45px 12% 52px;display:grid;place-items:center;border:2px solid #ffffff13;background:radial-gradient(ellipse at center,#31213e 0,#110d1b 64%,#05040a 100%);z-index:0}.backdrop span{font:clamp(32px,7vw,100px) "Archivo Black";color:#ffffff06;transform:rotate(-4deg)}.ensemble{position:absolute;z-index:5;left:10%;right:10%;bottom:45px;height:300px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(0px,1.3vw,20px)}.singer{width:clamp(105px,15vw,190px);height:245px;position:relative;transform:translateY(var(--bob,0)) rotate(var(--sway,0deg));transform-origin:50% 100%;will-change:transform}.singer:nth-child(2),.singer:nth-child(4){height:220px}.singer:nth-child(3){height:260px}.body,.head{position:absolute;left:9%;width:82%;border:5px solid #090814;background:linear-gradient(145deg,#fff9 0 8%,transparent 9%),var(--c);box-shadow:inset -13px -12px 0 #0002}.body{bottom:35px;height:126px;border-radius:13% 13% 50% 50%;z-index:2}.head{bottom:151px;height:88px;border-radius:62% 38% 12% 9%;z-index:5;transform:translateY(calc(var(--lift,0px)*-1));transition:transform 45ms linear}.baritone .head{border-radius:28% 72% 8% 15%}.tenor .head{border-radius:50% 50% 3% 22%}.alto .head{border-radius:72% 28% 18% 4%}.soprano .head{border-radius:36% 64% 7% 20%}.mouth{position:absolute;z-index:3;left:19%;bottom:142px;width:62%;height:calc(12px + var(--lift,0px));max-height:56px;border:5px solid #090814;border-radius:10% 8% 52% 45%;background:radial-gradient(ellipse at 48% 100%,#fa718c 0 28%,#650a26 30% 100%);overflow:hidden}.mouth i{position:absolute;right:14%;top:2px;width:11px;height:18px;background:#f3e7c9;border-radius:0 0 5px 5px}.head>i{position:absolute;top:30px;width:30%;height:39px;border:4px solid #090814;border-radius:50%;background:#f8f1df}.head>i:after{content:"";position:absolute;width:8px;height:13px;background:#090814;border-radius:50%;top:11px;left:43%}.head>i:first-child{left:14%;transform:rotate(-8deg) scale(.82,1.15)}.head>i:nth-child(2){right:13%;transform:rotate(10deg) scale(1.18,.84)}.tenor .head>i:first-child{top:39px}.alto .head>i:nth-child(2){top:20px}.soprano .head>i:first-child{width:20%;left:22%}.arm{position:absolute;top:38%;width:52%;height:15px;background:var(--c);border:4px solid #090814;border-radius:50%;z-index:-1}.arm:after{content:"";position:absolute;width:18px;height:18px;border:4px solid #090814;border-radius:50%;background:var(--c);top:-6px}.arm.a1{left:-38%;transform:rotate(calc(-18deg - var(--energy,0)*22deg))}.arm.a2{right:-38%;transform:rotate(calc(18deg + var(--energy,0)*22deg))}.arm.a1:after{left:-8px}.arm.a2:after{right:-8px}.note{position:absolute;right:0;top:-34px;font:40px "Archivo Black";color:var(--c);-webkit-text-stroke:1px #090814;opacity:calc(.2 + var(--energy,0));transform:translateY(calc(var(--energy,0)*-14px)) rotate(calc(var(--energy,0)*16deg));z-index:7}.aura{position:absolute;inset:15% 4% 10%;background:var(--c);opacity:calc(var(--energy,0)*.22);filter:blur(25px);border-radius:50%}.singer strong{position:absolute;bottom:0;width:100%;text-align:center;color:#f4e5c6;font:11px "Archivo Black";letter-spacing:.04em;text-shadow:0 2px #090814;z-index:8}.singer strong small{display:block;font:7px "DM Mono";margin-top:3px;color:#ad9cb0}.bow:before,.bow:after{content:"";position:absolute;top:68px;width:27px;height:22px;border:4px solid #090814;background:var(--d)}.bow:before{left:calc(50% - 27px);transform:skewY(22deg)}.bow:after{right:calc(50% - 27px);transform:skewY(-22deg)}.hat{position:absolute;bottom:79px;left:2%;width:70%;height:45px;background:#17131d;border:4px solid #090814;transform:rotate(-10deg)}.hat:after{content:"";position:absolute;left:-16%;bottom:-8px;width:140%;height:12px;background:#17131d;border:3px solid #090814}.antenna{position:absolute;top:-36px;left:47%;width:6px;height:40px;background:var(--d);border:2px solid #090814;transform:rotate(15deg)}.antenna:after{content:"";position:absolute;top:-12px;left:-7px;width:16px;height:16px;background:var(--c);border:3px solid #090814;border-radius:50%}.horn{position:absolute;top:-28px;width:30px;height:38px;background:var(--d);border:4px solid #090814;clip-path:polygon(0 100%,50% 0,100% 100%)}.h1{right:10%;transform:rotate(23deg)}.h2{left:9%;transform:rotate(-18deg)}.sprout,.flower,.ribbon{position:absolute;top:-25px;right:13%;font-size:26px;color:var(--d);-webkit-text-stroke:1px #090814}.flower{color:#f7e8c5}.ribbon{transform:rotate(30deg)}.footlights{position:absolute;bottom:0;left:12%;right:12%;height:30px;display:flex;justify-content:space-around;z-index:10}.footlights i{width:24px;height:18px;border-radius:50% 50% 8px 8px;background:#fff0a8;box-shadow:0 -12px 35px #ffcc51;border:3px solid #4c2c09}.hint{text-align:center;margin:15px}.paused .note{opacity:.12}.paused .spot{opacity:.12}@media(max-width:760px){header span{display:none}.marquee{padding-bottom:145px}.marquee h1{font-size:54px}.controls{right:4vw;bottom:18px;width:92vw}.theatre{height:405px}.ensemble{left:4%;right:4%;bottom:35px;height:245px}.singer,.singer:nth-child(2),.singer:nth-child(3),.singer:nth-child(4){width:19vw;height:190px}.body{height:95px;bottom:28px}.head{height:67px;bottom:117px}.mouth{bottom:108px}.head>i{top:23px;height:30px}.singer strong{font-size:7px}.singer strong small{display:none}.note{font-size:25px}.curtain{width:12%}.arm{display:none}.hat{bottom:59px;height:34px}.bow:before,.bow:after{top:52px;width:18px;height:15px}.bow:before{left:calc(50% - 18px)}.bow:after{right:calc(50% - 18px)}}