.scene-chat{padding:25px;background:#f1ece2}.chat-window{max-width:560px;margin:auto;background:#fffdf8;border:1px solid #ded7c8;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #665b4310}.chat-header{display:flex;align-items:center;gap:11px;padding:16px 19px;border-bottom:1px solid #eae3d5}.chat-avatar{width:32px;height:32px;background:#315ee8;color:white;border-radius:10px;display:grid;place-items:center;font-size:23px}.chat-header strong{display:block;font-size:14px;font-weight:400}.chat-header small{display:block;font-size:10px;color:#9a9387;margin-top:4px}.demo-chip{margin-left:auto;font:8px var(--mono);color:#aaa18f}.chat-messages{display:flex;flex-direction:column;gap:14px;padding:20px;min-height:190px}.bubble{font-size:13px;line-height:1.55;padding:12px 15px;max-width:85%}.user-bubble{align-self:flex-end;background:#315ee8;color:#fff;border-radius:12px 12px 3px 12px}.assistant-bubble{align-self:flex-start;background:#f1ede4;border:1px solid #e6dfd1;border-radius:12px 12px 12px 3px;color:#6c665c}.bubble-author{display:block;font:8px var(--mono);color:#948b7c;margin-bottom:7px}.assistant-bubble b{font-weight:400;color:#383c47}.chat-source{display:block;margin-top:11px;font-size:10px;color:#315ee8}.chat-suggestions{display:flex;flex-wrap:wrap;gap:5px;padding:0 20px 13px}.chat-suggestions button{font-size:9px;padding:8px 9px;background:#fffdf8;border:1px solid #ded6c6;border-radius:15px;color:#8a8172}.chat-suggestions button.selected{background:#edf1ff;color:#315ee8;border-color:#bdcaf2}.chat-input{margin:0 19px 17px;border:1px solid #e7dfd0;border-radius:7px;padding:10px 11px;color:#b1a99b;display:flex;justify-content:space-between;font-size:10px}.chat-input i{font-style:normal;color:#b6bfda}.scene-kicker{font:8px var(--mono);letter-spacing:.07em;color:#9a9284}.content-example{padding:24px;background:#f3efe6}.content-composition{display:grid;grid-template-columns:1fr 66px 1.8fr;align-items:center;margin-top:19px}.content-inputs{display:grid;gap:13px}.content-example figure{margin:0;border:1px solid #e1d8c7;background:#fffdf8;border-radius:7px;padding:11px;min-width:0}.content-example figure>span{font:7px var(--mono);color:#948b7c;display:block;margin-bottom:9px}.content-inputs img{width:100%;height:83px;object-fit:contain;border-radius:3px;display:block;background:#f7f4ed}.content-example figcaption{font-size:9px;color:#a19786;margin-top:9px}.content-merge{position:relative;height:240px;align-self:center}.content-merge svg{width:100%;height:100%;min-height:0;max-height:none}.content-merge path{fill:none;stroke:#879eda;stroke-width:1.2}.content-merge span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:9px var(--mono);color:#315ee8;background:#edf1fc;border:1px solid #becaf0;border-radius:6px;padding:7px}.content-output video{width:100%;aspect-ratio:1.355;object-fit:cover;display:block;border-radius:4px;background:#d9d5c9}.analytics-example{padding:24px 28px;background:#fffdf8}.analytics-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px}.analytics-toolbar>div{display:flex;border:1px solid #e6dece;border-radius:5px;padding:3px;gap:3px}.analytics-toolbar button{border:0;background:none;color:#9e9586;font:9px var(--mono);padding:7px 9px;border-radius:3px}.analytics-toolbar button[aria-pressed=true]{background:#edf1ff;color:#315ee8}.analytics-top{display:flex;align-items:center;gap:17px;margin-top:22px}.analytics-top small{display:block;font-size:10px;color:#a0998a}.analytics-top strong{display:block;font-size:35px;font-weight:400;letter-spacing:-.04em;margin-top:7px;color:#333d52}.metric-growth{font:9px var(--mono);color:#5d826f;margin-top:17px}.metric-demo{font:8px var(--mono);color:#aaa291;margin-left:auto;align-self:flex-end}.analytics-chart{margin:17px -6px 0}.analytics-chart svg{width:100%;min-height:0;max-height:none;display:block}.analytics-chart text{font:9px var(--mono);fill:#aaa393}.metric-grid{stroke:#ece6da;stroke-width:1;stroke-dasharray:3 4}.metric-line{fill:none;stroke:#315ee8;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.metric-forecast{fill:none;stroke:#8199e8;stroke-width:2;stroke-dasharray:5 5}.metric-point{fill:#315ee8;stroke:#fffdf8;stroke-width:2;cursor:pointer;outline:none}.metric-point.predicted{fill:#fffdf8;stroke:#8199e8}.metric-point:hover,.metric-point:focus{r:6;stroke:#b5c5f4;stroke-width:3}.analytics-legend{display:flex;align-items:center;gap:16px;font:8px var(--mono);color:#9d9585;margin:3px 0 16px}.analytics-legend>span{display:flex;gap:6px;align-items:center}.analytics-legend i{width:12px;height:2px;background:#315ee8}.analytics-legend>span:nth-child(2) i{background:none;border-top:2px dashed #8199e8}.analytics-legend output{margin-left:auto;color:#7c8294}.analytics-insight{display:flex;align-items:center;gap:12px;padding:13px 15px;background:#f4f6fc;border:1px solid #e4e9f6;border-radius:7px}.analytics-insight>span{font:9px var(--mono);color:#315ee8}.analytics-insight p{margin:0;font-size:11px;line-height:1.5;color:#7d8494}.learning-example{padding:25px;background:#f3efe6}.learning-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.learning-head h3{font-size:23px;font-weight:400;letter-spacing:-.03em;margin:10px 0 0}.lesson-step{font:10px var(--mono);color:#aaa18f}.learning-split{display:grid;grid-template-columns:1.2fr 1fr;gap:17px}.learning-dialog{padding:18px;background:#fffdf8;border:1px solid #e1d8c7;border-radius:8px}.role-tag{font:8px var(--mono);color:#315ee8}.client-quote{font-size:18px;line-height:1.4;color:#4b4c48;margin:15px 0}.learning-prompt{font-size:10px;line-height:1.5;color:#9c9381;margin:0 0 16px}.lesson-choices{display:grid;gap:7px}.lesson-choices button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:11px;background:#f8f5ed;border:1px solid #e4dbca;border-radius:5px;font-size:11px;line-height:1.5;color:#817766}.lesson-choices button span{color:#315ee8}.lesson-choices button[aria-pressed=true]{border-color:#98afe9;background:#edf1fc;color:#315ee8}.learning-feedback{padding:19px 5px 5px 7px}.feedback-label{font:8px var(--mono);color:#a19886}.learning-feedback h4{font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:400;margin:19px 0 12px;color:#605d54}.learning-feedback p{font-size:12px;line-height:1.65;color:#948a79;margin:0}.learning-feedback[data-result=good] h4{color:#315ee8}.feedback-next{margin-top:20px;border-top:1px solid #ded5c3;padding-top:15px;font-size:11px;line-height:1.6;color:#8f826d}.feedback-next span{display:block;font:7px var(--mono);color:#b0a58f;margin-bottom:8px}.lesson-progress{display:flex;gap:5px;margin-top:20px}.lesson-progress i{width:24px;height:3px;background:#ded6c5;border-radius:2px}.lesson-progress i:first-child{background:#b5c5ef}.lesson-progress .current{background:#315ee8}.turbine-stage{height:360px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#293e55,#111b2b 65%)}.turbine-stage canvas{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}.turbine-stage canvas:active{cursor:grabbing}.turbine-caption{position:absolute;left:19px;top:18px;pointer-events:none}.turbine-caption span{font:7px var(--mono);color:#8096af;letter-spacing:.08em}.turbine-caption strong{display:block;font-size:17px;font-weight:400;letter-spacing:-.02em;color:#c1d0df;margin-top:8px}.turbine-help{position:absolute;bottom:15px;left:0;width:100%;text-align:center;pointer-events:none;font:8px var(--mono);color:#7188a0}.turbine-controls{padding:13px 17px;display:flex;align-items:center;gap:8px;background:#fffdf8;border-top:1px solid #e7dfcf}.turbine-controls button{padding:9px 11px;border:1px solid #e1d8c7;border-radius:4px;font:10px var(--mono);background:#f7f3e9;color:#8a7f6c}.turbine-controls #turbine-explode{background:#315ee8;color:white;border-color:#315ee8}.turbine-controls>span{margin-left:auto;font:8px var(--mono);color:#a79b85}.turbine-labels{position:absolute;bottom:46px;left:15%;right:15%;display:flex;justify-content:space-between;gap:10px;opacity:0;pointer-events:none}.turbine-labels span{font:8px var(--mono);color:#a8bfd6;background:#121f30bb;border:1px solid #4a607533;padding:6px 9px;border-radius:4px}.is-exploded .turbine-labels{opacity:1}.turbine-fallback{position:absolute;inset:45% 10% auto;text-align:center;color:#bbc7da;font-size:13px}
@media(max-width:720px){.scene-chat{padding:15px 12px}.chat-header{padding:13px}.chat-header strong{font-size:13px}.chat-header small{font-size:8px}.chat-messages{padding:15px;min-height:215px}.bubble{font-size:12px;max-width:92%;padding:12px}.chat-suggestions{padding:0 13px 12px}.chat-suggestions button{font-size:9px;padding:8px}.chat-input{margin:0 13px 13px}.content-example{padding:18px 13px}.content-composition{grid-template-columns:1fr;margin-top:15px}.content-inputs{grid-template-columns:1fr 1fr;gap:9px}.content-inputs img{height:80px}.content-example figure{padding:10px}.content-example figure>span{font-size:6px}.content-merge{height:40px}.content-merge svg{display:none}.content-merge span{padding:5px 10px}.content-output video{aspect-ratio:1.355}.analytics-example{padding:19px 16px}.analytics-toolbar{gap:8px;align-items:start}.analytics-toolbar .scene-kicker{font-size:6px;line-height:1.6;max-width:100px}.analytics-toolbar button{font-size:8px;padding:6px}.analytics-top{gap:10px;margin-top:20px}.analytics-top strong{font-size:29px}.metric-growth{font-size:7px}.metric-demo{font-size:6px}.analytics-chart{margin:16px -8px 0}.analytics-legend{font-size:7px;gap:10px;flex-wrap:wrap}.analytics-legend output{margin-left:0;width:100%;padding-top:5px}.analytics-insight{padding:12px;gap:10px}.analytics-insight p{font-size:11px}.learning-example{padding:20px 15px}.learning-head h3{font-size:23px}.learning-split{grid-template-columns:1fr}.learning-dialog{padding:16px}.client-quote{font-size:20px}.learning-prompt{font-size:12px}.lesson-choices button{font-size:12px}.learning-feedback{padding:0 5px}.learning-feedback h4{margin-top:11px}.learning-feedback p{font-size:13px}.feedback-next{font-size:12px}.turbine-stage{height:300px}.turbine-caption{left:14px;top:14px}.turbine-caption strong{font-size:15px}.turbine-controls{padding:12px;gap:6px;flex-wrap:wrap}.turbine-controls button{font-size:9px;padding:9px}.turbine-controls>span{display:none}.turbine-labels{left:6%;right:6%}.turbine-labels span{font-size:7px;padding:5px}}
.turbine-labels{left:10%;right:10%;justify-content:center;flex-wrap:wrap;gap:8px}@media(max-width:720px){.turbine-labels{left:5%;right:5%;gap:5px}.turbine-labels span{font-size:6px;padding:4px 5px}}
.event-driven .webcam-chart{top:40%;height:52%}
.event-driven .webcam-chart .webcam-bars rect,.event-driven .webcam-chart .webcam-line,.event-driven .webcam-chart .webcam-dot{animation:none;transform:none;stroke-dasharray:none}
.event-driven .webcam-chart .webcam-line{stroke-width:3;opacity:1}
.event-driven .webcam-chart-title{font-size:8px;letter-spacing:.04em}
.event-driven .webcam-chart-foot{font-size:7px;text-align:right}
.webcam-event{position:absolute;right:0;top:auto;bottom:calc(100% + 18px);width:260px;max-width:62%;padding:11px 14px;border-left:2px solid #315ee8;background:#fffdf8bd;border-radius:0 6px 6px 0;box-shadow:0 5px 20px #315ee808;color:#344c62}
.webcam-event>span{display:block;font:7px var(--mono);letter-spacing:.08em;color:#315ee8}
.webcam-event strong{display:block;font-size:18px;font-weight:500;line-height:1.25;margin:6px 0 4px}
.webcam-event small{display:block;font-size:10px;line-height:1.4;color:#617889}
.webcam-stage[data-live-event=question] .webcam-event{border-color:#7965aa}
.webcam-stage[data-live-event=subscriber] .webcam-event{border-color:#2a907d}
.event-flash .webcam-event{animation:live-event-in .5s ease-out}
.event-flash .webcam-dot{filter:drop-shadow(0 0 7px #315ee877)}
.webcam-controls .photo-caption{display:block;max-width:380px;white-space:normal;line-height:1.5;font-size:11px;color:#70808b}
.live-events{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 16px 15px;border-bottom:1px solid #ebe5d9;background:#fffdf8}
.live-events>span{font-size:10px;color:#8a8a83;margin-right:6px}
.live-events button{border:1px solid #d9e1ee;background:#f1f5fc;border-radius:5px;padding:8px 11px;color:#3157b5;font:11px Gilroy,Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.live-events button:hover{background:#e4ecff;border-color:#91a8e5}
.live-events button:focus-visible{outline:2px solid #315ee8;outline-offset:3px}
.live-events p{flex-basis:100%;font:9px var(--mono);line-height:1.6;color:#8b948f;margin:4px 0 0;min-height:15px}
@keyframes live-event-in{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){.event-driven .webcam-chart{top:48%;height:43%}.webcam-event{padding:8px 10px;max-width:65%;width:220px}.webcam-event strong{font-size:14px;margin:4px 0}.webcam-event small{font-size:8px}.webcam-event>span{font-size:6px}.event-driven .webcam-chart-title{font-size:6px}.event-driven .webcam-chart-foot{font-size:5px}.live-events{padding:0 11px 12px;gap:7px}.live-events>span{flex-basis:100%;margin:0 0 2px}.live-events button{padding:8px;font-size:10px}.live-events p{font-size:8px}.webcam-controls .photo-caption{max-width:100%;flex-basis:100%;font-size:10px}}
@media(prefers-reduced-motion:reduce){.event-flash .webcam-event{animation:none}.live-events button{transition:none}}
.visual-live{--live-color:#315ee8;overflow:clip}
.visual-live[data-live-event=reaction]{--live-color:#d76189}
.visual-live[data-live-event=question]{--live-color:#8061bc}
.visual-live[data-live-event=subscriber]{--live-color:#289b89}
.visual-live .webcam-chart-title,.visual-live .webcam-chart-foot,.visual-live .webcam-mic{display:none}
.visual-live .webcam-topline>span:last-child{display:none}
.visual-live .webcam-live:after{content:' / DEMO';opacity:.65}
.visual-live .webcam-chart{top:38%;height:47%}
.visual-live .webcam-chart .webcam-line{stroke:var(--live-color);transition:stroke .3s}
.visual-live .webcam-chart .webcam-bars rect{fill:var(--live-color);fill-opacity:.16;transition:fill .3s}
.visual-live .webcam-chart .webcam-dot{fill:var(--live-color)}
.visual-live .webcam-event{bottom:calc(100% + 20px);width:auto;min-width:160px;max-width:65%;border:1px solid #ffffff9e;border-radius:12px;background:#fffdf8d9;padding:13px 18px;box-shadow:0 8px 35px #344c6208}
.webcam-event svg,.live-events.in-frame svg,.live-particle svg{width:24px;height:24px!important;min-height:0!important;margin:0!important;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.live-idle-icons,.live-reaction-total,.live-join{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--live-color)}
.live-idle-icons{opacity:.45;gap:24px}
.webcam-event .live-reaction-total strong,.webcam-event .live-join strong{font-size:32px;line-height:1;margin:0;color:var(--live-color);font-variant-numeric:tabular-nums}
.live-reaction-total>svg{width:32px;height:32px!important;fill:#d7618930}
.live-reaction-total b,.live-join b{font-size:15px;font-weight:500;color:var(--live-color)}
.live-chat-pop{display:flex;gap:10px;align-items:center}
.live-viewer-avatar{display:grid!important;place-items:center;width:33px;height:33px;border-radius:50%;background:#8061bc22;color:#8061bc!important;font:13px Gilroy,Arial!important;flex:none}
.webcam-event .live-chat-pop small{font:9px var(--mono);color:#9a91aa}
.webcam-event .live-chat-pop strong{font-size:16px;margin:5px 0 0;color:#514263;white-space:nowrap}
.live-avatar-stack{display:flex;padding-left:8px}
.live-avatar-stack i{display:grid;place-items:center;width:31px;height:31px;margin-left:-8px;border:2px solid #fffdf8;border-radius:50%;font:11px Gilroy,Arial;color:#64847c;background:#d9e8df}
.live-avatar-stack i:nth-child(2){background:#dcdcf0;color:#7d6d99}
.live-avatar-stack i:last-child{background:#289b89;color:white;animation:live-avatar-join .6s ease-out}
.live-events.in-frame{position:absolute;z-index:4;right:20px;bottom:18px;display:flex;gap:9px;padding:0;border:0;background:transparent;flex-wrap:nowrap}
.live-events.in-frame button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:70px;height:45px;padding:0 12px;border:1px solid #ffffffc7;background:#fffdf8e8;border-radius:24px;color:#617481;font-size:12px;font-variant-numeric:tabular-nums;box-shadow:0 3px 15px #344c6206;transition:transform .2s,background .2s}
.live-events.in-frame button:hover{transform:translateY(-3px);background:#fffdf8}
.live-events.in-frame button:active{transform:scale(.92)}
.live-events.in-frame button[data-live-event=reaction]{color:#d76189}
.live-events.in-frame button[data-live-event=question]{color:#8061bc}
.live-events.in-frame button[data-live-event=subscriber]{color:#289b89}
.live-click-hint{position:absolute;bottom:57px;right:6px;font:11px Gilroy,Arial;color:#718497;white-space:nowrap;animation:live-hint 1.8s ease-in-out infinite}
.has-interacted .live-click-hint{display:none}
.live-events .live-sr-only{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.live-particles{position:absolute;inset:-120px -20px -20px;pointer-events:none;overflow:hidden}
.live-particle{position:absolute;left:var(--x);bottom:0;display:block;animation:live-float 2.4s ease-out both;animation-delay:var(--delay);color:#d76189}
.heart-particle svg{width:27px;height:27px!important;fill:#d7618950;stroke-width:1.5}
.confetti-particle{width:8px;height:12px;border-radius:2px;background:var(--particle-color);animation-name:live-confetti}
@keyframes live-float{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.85}100%{opacity:0;transform:translate(var(--drift),-310px) scale(1.3)}}
@keyframes live-confetti{0%{opacity:0;transform:translate(0,-260px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--drift),20px) rotate(var(--turn))}}
@keyframes live-avatar-join{from{opacity:0;transform:translateX(15px) scale(.5)}to{opacity:1;transform:none}}
@keyframes live-hint{50%{transform:translate(-3px,-3px);opacity:.6}}
@media(max-width:720px){.visual-live .webcam-chart{top:40%;height:45%}.visual-live .webcam-event{padding:10px 12px;min-width:115px;max-width:64%;bottom:calc(100% + 16px)}.webcam-event .live-reaction-total strong,.webcam-event .live-join strong{font-size:25px}.live-idle-icons{gap:14px}.webcam-event .live-chat-pop strong{font-size:12px}.webcam-event .live-chat-pop small{font-size:7px}.live-viewer-avatar{width:25px;height:25px;font-size:10px!important}.live-chat-pop{gap:7px}.live-events.in-frame{right:10px;bottom:13px;gap:5px}.live-events.in-frame button{min-width:46px;height:37px;padding:0 8px;gap:5px;font-size:10px}.live-events.in-frame svg{width:18px;height:18px!important}.live-click-hint{bottom:48px;font-size:10px}.visual-live .webcam-name{bottom:60px;padding:7px 9px}.visual-live .webcam-name small{display:none}.live-avatar-stack i{width:24px;height:24px;font-size:9px}.live-join{gap:8px}.live-reaction-total{gap:10px}}
@media(prefers-reduced-motion:reduce){.live-particle{display:none}.live-click-hint,.live-avatar-stack i:last-child{animation:none}.visual-live .webcam-chart .webcam-line,.visual-live .webcam-chart .webcam-bars rect,.live-events.in-frame button{transition:none}}
.space-live{background:#151e35}
.space-world{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 78% 55%,#35436b 0,transparent 50%),linear-gradient(130deg,#15202f,#20233f 65%,#18263b);overflow:clip}
.space-world[hidden]{display:none}
.space-world>svg{display:block;width:100%;height:100%;min-height:0;max-height:none;margin:0;shape-rendering:crispEdges}
.space-world .space-speech text{fill:#534d69;font:14px Consolas,monospace;letter-spacing:.5px}
.space-live .webcam-person{filter:drop-shadow(12px 0 22px #0b142830)}
.space-live .webcam-name{background:#172339c9;border-color:#ffffff1a;backdrop-filter:blur(8px)}
.space-live .webcam-name span{color:#e8eaf0}
.space-live .webcam-name small{color:#9caac2}
.space-live .live-click-hint{color:#d0cce3}
.space-live .live-events.in-frame button{min-width:47px;width:47px;height:47px;padding:0;background:#f5f2f0f0;border-radius:50%;border-color:#ffffff70}
.space-twinkle{animation:space-twinkle 5s ease-in-out infinite}
.resident-sprite{animation:space-bob 4s ease-in-out infinite;animation-delay:var(--bob)}
.space-new-star{transform-box:fill-box;transform-origin:center;animation:space-star-bloom .8s cubic-bezier(.2,.9,.3,1.4)}
.space-arrival{transform-box:fill-box;transform-origin:center;animation:space-arrive 1s cubic-bezier(.1,.8,.2,1)}
.space-chat-visitor{animation:space-chat-in .6s ease-out}
.space-speech{animation:space-speech-in .7s ease-out;transform-box:fill-box;transform-origin:right bottom}
.space-meteor{animation:space-meteor 1.8s linear both;animation-delay:var(--meteor-delay)}
.space-party .space-world{animation:space-party 4.5s ease-in-out}
@keyframes space-twinkle{50%{opacity:.25}}
@keyframes space-bob{50%{transform:translateY(-7px)}}
@keyframes space-star-bloom{0%{opacity:0;transform:scale(.1)}65%{opacity:1;transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes space-arrive{from{opacity:0;transform:translate(110px,-170px) scale(.3)}to{opacity:1;transform:none}}
@keyframes space-chat-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes space-speech-in{0%,35%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes space-meteor{0%{opacity:0;transform:translate(180px,-50px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(-300px,460px)}}
@keyframes space-party{35%,65%{filter:hue-rotate(35deg) brightness(1.3)}}
@media(max-width:720px){.space-live .live-events.in-frame button{width:39px;min-width:39px;height:39px}.space-live .webcam-name{bottom:14px;max-width:140px}.space-live .webcam-name span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.space-world *,.space-party .space-world{animation:none!important}.space-meteor{opacity:.7}}
.concert-live{height:400px;background:#0b1020;isolation:isolate}
.concert-world{position:absolute;inset:0;z-index:1;overflow:clip;background:#0b1020}
.concert-world[hidden]{display:none}
.concert-world canvas{display:block;width:100%;height:100%}
.concert-live .webcam-person{filter:drop-shadow(8px -4px 18px #524ba833)}
.concert-live .webcam-name{background:#10182ab5;border:1px solid #d5d9ff17;backdrop-filter:blur(12px)}
.concert-live .webcam-name span{color:#eeeef4}
.concert-live .webcam-name small{color:#9b9cb5}
.concert-live .live-click-hint{color:#b2aecf;font-size:11px}
.concert-live .live-events.in-frame button{width:47px;min-width:47px;height:47px;padding:0;border:1px solid #d2cfff35;border-radius:50%;background:#eae8ff0e;backdrop-filter:blur(14px);color:#c8c3e9;box-shadow:inset 0 1px 0 #ffffff0b,0 5px 20px #080b1e40}
.concert-live .live-events.in-frame button:hover{background:#cfc7ff25;border-color:#d9d1ff90;box-shadow:0 0 25px #8b78e82a}
.concert-live .live-events.in-frame button[data-live-event=reaction]{color:#edacd9}
.concert-live .live-events.in-frame button[data-live-event=question]{color:#cabcf7}
.concert-live .live-events.in-frame button[data-live-event=subscriber]{color:#a1e2df}
.concert-messages{position:absolute;inset:0;pointer-events:none;perspective:700px}
.concert-message{position:absolute;right:7%;top:calc(52px + var(--message-slot)*76px);display:flex;gap:12px;align-items:center;padding:13px 18px;max-width:65%;border:1px solid #d5caff35;border-radius:12px;background:linear-gradient(125deg,#aa8cf021,#a0baf00b);backdrop-filter:blur(13px);box-shadow:0 8px 35px #02051933,inset 0 1px 0 #f6eaff0c;color:#eee8ff;animation:concert-message 6.5s ease both;transform-origin:right center}
.concert-message-avatar{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:50%;font:12px Gilroy,Arial;background:#cfb8ff26;border:1px solid #e7d6ff29;color:#e2cfff}
.concert-message small{display:block;font:8px var(--mono);color:#b1a2cf;letter-spacing:.05em;margin-bottom:5px}
.concert-message strong{font-size:15px;font-weight:400;white-space:nowrap;letter-spacing:.01em}
@keyframes concert-message{0%{opacity:0;transform:translate3d(35px,20px,-80px) rotateY(-16deg);filter:blur(5px)}12%,80%{opacity:1;transform:translate3d(0,0,0) rotateY(-4deg);filter:blur(0)}100%{opacity:0;transform:translate3d(-20px,-25px,-40px);filter:blur(3px)}}
@media(max-width:720px){.concert-live{height:300px}.concert-live .live-events.in-frame button{width:40px;min-width:40px;height:40px}.concert-live .webcam-name{bottom:14px;max-width:145px}.concert-live .webcam-name span{font-size:10px}.concert-live .live-click-hint{font-size:10px}.concert-message{right:13px;top:calc(48px + var(--message-slot)*60px);padding:10px 12px;gap:8px;max-width:66%;border-radius:9px}.concert-message strong{font-size:12px}.concert-message-avatar{width:23px;height:23px;font-size:10px}.concert-message small{font-size:7px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.concert-message{animation:none}.concert-live .live-events.in-frame button{transition:none}}