@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--accent:#b875ff;--cyan:#46f4d1;--pink:#ff4fa5}*{box-sizing:border-box}body{margin:0;background:#090b10;color:#f6f5fa;font-family:'DM Sans',Arial,sans-serif;display:flex;min-height:100vh}button,input{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #30313e;background:#20212c;color:#e8e7ef;border-radius:9px;padding:12px 14px;font-size:12px;font-weight:600;transition:.2s}button:hover{background:#30303f;border-color:#737080}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}.controls{width:410px;flex-shrink:0;border-right:1px solid #22232c;background:linear-gradient(150deg,#14141e,#0d0f15 60%);display:flex;flex-direction:column;padding:30px 36px}.brand{font-size:33px;font-weight:900;letter-spacing:-5px}.brand>span{color:var(--accent);margin-left:4px}.brand small{font-size:10px;letter-spacing:3px;margin-left:15px;font-weight:600;color:#b1aebd}.control-content{margin-top:48px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--accent)}h1{font-size:33px;line-height:1.2;letter-spacing:-1.2px;margin:14px 0}h1 em{font-style:normal;color:var(--accent)}.intro{font-size:12px;color:#92909f;margin-bottom:30px}.panel{padding:20px;background:#181922;border:1px solid #2a2a37;border-radius:13px;margin-bottom:16px}.panel-title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;margin-bottom:22px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #46f4d140}label{display:block;font-size:10px;color:#9995a8;margin:18px 0 9px}.input-wrap{display:flex;align-items:center;border:1px solid #383541;background:#101118;border-radius:8px;padding:0 12px}.input-wrap span{color:#777181}.input-wrap:focus-within{border-color:var(--accent)}input{width:100%;padding:12px 9px;border:0;outline:0;background:transparent;color:white;font-size:12px}.primary{width:100%;background:var(--accent);color:#130a22;border:0;margin-top:11px;display:flex;justify-content:space-between}.primary:hover{background:#c79aff}.connection{font-size:10px;color:#a19aac;line-height:1.6;margin-bottom:5px}.connection.error{color:#ff8594}.text-button{border:0;background:none;color:#bdb0d0;font-size:10px;padding:6px 0}.small-tag{font-size:8px;color:#aaa5ba;border:1px solid #3d384c;padding:4px 6px;border-radius:4px;margin-left:auto}.button-row{display:flex;gap:8px}.button-row button{flex:1;font-size:10px;padding:11px 4px}.themes{display:flex;gap:11px}.swatch{padding:0;width:25px;height:25px;border:5px solid #181922;background:var(--swatch);border-radius:50%;outline:1px solid transparent}.swatch:hover,.swatch.active{background:var(--swatch);border-color:#181922;outline-color:var(--swatch)}.detail{border-top:1px solid #2b2936;display:flex;justify-content:space-between;padding-top:16px;margin-top:20px;font-size:9px;color:#9c97a9}.detail strong{color:#d6ccdf;font-weight:500}.capture{display:flex;justify-content:space-between;background:#242032;border:1px solid #494056;padding:15px 18px;border-radius:9px;font-size:11px}.capture:hover{border-color:var(--accent)}.help,.notice{font-size:10px;line-height:1.8;color:#878291}.help{margin:15px 6px}.notice{font-size:9px;margin:18px 6px;color:#777280}footer{margin-top:auto;padding-top:35px;font-size:9px;color:#797383;display:flex;gap:7px;align-items:center}.preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;min-width:0;background:radial-gradient(ellipse at 50% 45%,#1c162c 0,transparent 60%)}.preview-label,.preview-foot{width:min(100%,405px);display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#817a90;margin-bottom:14px}.preview-label>span:first-child,.preview-foot>span:first-child{display:flex;align-items:center;gap:6px}.preview-label i,.preview-foot i{width:4px;height:4px;background:var(--cyan);border-radius:50%}.preview-foot{font-size:8px;letter-spacing:0;margin:14px 0 0}#scene-wrap{position:relative;width:405px;height:720px;overflow:hidden;border-radius:13px;box-shadow:0 25px 100px #0009,0 0 0 1px #4b355455}#scene{position:absolute;width:1080px;height:1920px;transform-origin:top left;background:#110b23;overflow:hidden}#world,.grain{position:absolute;inset:0;width:100%;height:100%}.grain{pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.28' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.scene-header{position:absolute;top:64px;left:62px;right:62px;display:flex;justify-content:space-between;align-items:center}.live-pill{display:flex;gap:14px;align-items:center;font-size:22px;letter-spacing:3px;font-weight:700;background:#ffffff0b;border:1px solid #ffffff25;border-radius:35px;padding:14px 23px}.live-pill i{width:12px;height:12px;border-radius:50%;background:#ff5378;box-shadow:0 0 22px #ff5378}.audience{font-size:26px;display:flex;align-items:center;gap:12px}.audience>span{color:var(--cyan);font-size:33px}.audience small{font-size:18px;color:#beb1cd}.hero{position:absolute;top:213px;left:0;right:0;text-align:center}.overline{letter-spacing:12px;font-size:19px;color:#d8b5eb}.hero h2{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:200px;line-height:.8;letter-spacing:-5px;margin:41px 0 35px;transform:skew(-5deg);font-weight:900;text-shadow:0 0 75px #b060ff35}.hero h2 span{display:block;color:var(--accent);font-size:236px;text-shadow:0 0 75px #b060ff55}.hero-bottom{font-size:16px;letter-spacing:5px;display:flex;align-items:center;justify-content:center;gap:20px;color:#dbcde6}.hero-bottom>span{width:70px;height:1px;background:#a66bce}.now-playing{position:absolute;top:743px;left:254px;right:254px;display:flex;gap:22px;align-items:center;background:#18102799;border:1px solid #c998ff38;border-radius:15px;padding:20px 24px;font-size:22px;font-weight:700;letter-spacing:2px}.now-playing small{display:block;font-size:10px;font-weight:500;letter-spacing:2px;margin-top:8px;color:#a895c1}.equalizer{display:flex;gap:5px;height:35px;align-items:center}.equalizer i{width:5px;background:var(--cyan);height:100%;animation:equalize .8s infinite alternate}.equalizer i:nth-child(2){height:50%;animation-delay:-.4s}.equalizer i:nth-child(3){height:80%;animation-delay:-.6s}.equalizer i:nth-child(4){height:35%;animation-delay:-.2s}.bpm{margin-left:auto;text-align:center;font-size:22px;color:var(--cyan)}.bpm small{font-size:9px;margin-top:3px}.stage-title{position:absolute;top:1090px;left:0;right:0;text-align:center;letter-spacing:8px;font-size:44px;color:#f6e9ff;text-shadow:0 0 28px #c88bff}.stage-title small{display:block;font-size:12px;letter-spacing:5px;margin-top:13px;color:#b9a3d0}.floor-caption{position:absolute;bottom:115px;left:0;right:0;text-align:center;font-size:22px;letter-spacing:1px;color:#cebddc}.floor-caption .dot{width:8px;height:8px;margin-right:10px}.scene-bottom{position:absolute;bottom:51px;left:68px;right:68px;display:flex;justify-content:space-between;color:#81758e;font-size:14px;letter-spacing:4px}.scene-bottom>span:nth-child(2){color:var(--accent)}#people{position:absolute;inset:0}.person{position:absolute;width:116px;height:190px;transform-origin:center bottom;transition:left 1.2s,top 1.2s,opacity .6s;animation:arrive .6s both;pointer-events:none}.identity{text-align:center;position:relative;z-index:2;animation:bob 1.2s ease-in-out infinite alternate;animation-delay:var(--delay)}.avatar{width:51px;height:51px;border-radius:50%;border:3px solid var(--color);box-shadow:0 0 18px color-mix(in srgb,var(--color),transparent 50%);background:#231932;object-fit:cover;display:block;margin:0 auto}.initials{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:21px;background:linear-gradient(135deg,var(--color),#30204c);color:white}.person-name{font-size:16px;max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 9px;background:#0e0b1fe6;border:1px solid #ffffff18;border-radius:8px;margin-top:5px;display:inline-block;color:#fff}.dancer{width:82px;height:112px;position:relative;margin:-1px auto 0;animation:dance .55s ease-in-out infinite alternate;animation-delay:var(--delay)}.head{position:absolute;top:4px;left:30px;width:26px;height:29px;background:#deb39d;border-radius:12px 12px 10px 10px;border-top:8px solid #231d31;z-index:2}.body{position:absolute;top:31px;left:24px;width:38px;height:43px;background:var(--color);border-radius:12px 12px 8px 8px;box-shadow:inset -10px 0 #0003}.arm{position:absolute;top:34px;left:13px;width:13px;height:41px;background:var(--color);border-radius:8px;transform:rotate(35deg);transform-origin:top;animation:arm .55s infinite alternate;animation-delay:var(--delay)}.arm.right{left:59px;transform:rotate(-55deg);animation-direction:alternate-reverse}.arm:after{content:'';position:absolute;bottom:-3px;left:0;width:13px;height:14px;background:#deb39d;border-radius:6px}.leg{position:absolute;top:70px;left:28px;width:14px;height:37px;background:#25243e;border-radius:2px 2px 5px 5px;transform:rotate(10deg);border-bottom:7px solid #e7deed}.leg.right{left:49px;transform:rotate(-15deg)}.shadow{position:absolute;bottom:0;left:10px;width:67px;height:14px;border-radius:50%;background:#0007;filter:blur(3px)}.person.active .identity:after{content:'♥';position:absolute;top:-22px;right:5px;color:#ff659e;font-size:26px;animation:heart 1.5s forwards}.person.leaving{opacity:0;transition:opacity .6s}#toast{position:absolute;top:890px;left:200px;right:200px;text-align:center;color:var(--cyan);font-size:23px;opacity:0;transition:opacity .3s;letter-spacing:2px}#toast.show{opacity:1}.overlay .controls,.overlay .preview-label,.overlay .preview-foot{display:none}.overlay{display:block;background:#110b23;overflow:hidden}.overlay .preview{padding:0;display:block;background:none}.overlay #scene-wrap{border-radius:0;box-shadow:none;margin:0}.overlay #scene{transform-origin:top left}@keyframes equalize{to{transform:scaleY(.25)}}@keyframes bob{to{transform:translateY(-3px)}}@keyframes dance{to{transform:translateY(-6px) rotate(5deg)}}@keyframes arm{to{transform:rotate(135deg)}}@keyframes arrive{from{opacity:0;filter:brightness(3)}to{opacity:1;filter:brightness(1)}}@keyframes heart{to{transform:translateY(-40px);opacity:0}}@media(max-height:850px) and (min-width:801px){.controls{padding-top:22px;padding-bottom:22px}.control-content{margin-top:25px}.panel{padding:16px;margin-bottom:12px}h1{font-size:29px}.intro{margin-bottom:22px}.notice{margin-top:10px}.preview{padding:20px}}@media(max-width:800px){body{flex-direction:column}.controls{width:100%;border-right:0;padding:24px}.control-content{margin-top:25px}.control-content h1 br{display:none}.controls footer{display:none}.preview{padding:25px 12px}.overlay{display:block}}@media(prefers-reduced-motion:reduce){.person,.identity,.dancer,.arm,.equalizer i{animation:none!important}}