/* Broadcast light, reactions and metrics share active viewing time. */
[data-live-motion]{--live-ink:#bfa9d8;--live-muted:#8e86a7;--live-heart:#f68cba;--live-chat-bg:#a78bd40c}
html[data-theme="light"] [data-live-motion]{--live-ink:#785294;--live-muted:#80738f;--live-heart:#b7477d;--live-chat-bg:#a78bd40c}
[data-live-motion] .live-screen{isolation:isolate}
[data-live-motion] .live-screen:before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(ellipse at 35% 35%,#b27eea24,transparent 45%),radial-gradient(ellipse at 70% 60%,#6399f321,transparent 40%);transform:rotate(-8deg)}
[data-live-motion] .live-badge{display:flex;align-items:center;gap:5px;z-index:2;line-height:1.3}
[data-live-motion] .live-badge>i{width:4px;height:4px;flex-shrink:0;background:#ffb9d1;border-radius:50%}
[data-live-motion] .live-badge>small{font:6px var(--mono);opacity:.7;padding-left:4px;border-left:1px solid #e995b755;letter-spacing:.04em}
[data-live-motion] .live-viewers{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;color:#d2c4e5;font-size:8px;z-index:2}
[data-live-motion] .live-viewers>b{font:500 10px var(--mono);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
[data-live-motion] .live-orb{border:0;opacity:.9;background:conic-gradient(from 30deg,#6e4ea2 0deg,#c69bff 70deg,#91b6ff 106deg,#704b9e 170deg,#a976cf 230deg,#e7c9ff 284deg,#6e4ea2 360deg);mask:radial-gradient(closest-side,transparent 68%,#000 70%,#000 96%,transparent 98%);box-shadow:none;top:42%}
[data-live-motion] .live-orbit-rim{position:absolute;left:50%;top:42%;width:176px;height:176px;border:1px solid #bea0e72b;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 35px #a47ad516,inset 0 0 30px #ae85d91a;pointer-events:none}
[data-live-motion] .live-play{inset:0 0 16%;pointer-events:none;color:#ecddff}
[data-live-motion] .live-play>svg{width:36px;height:36px;filter:drop-shadow(0 0 12px #b98eff66);stroke-width:1.1}
[data-live-motion] .live-caption{left:20px;right:58px;bottom:34px;line-height:1.5;letter-spacing:.05em;font-size:13px}
[data-live-motion] .live-audio{position:absolute;left:20px;bottom:16px;display:flex;align-items:flex-end;gap:3px;height:13px;width:64px;opacity:.8}
[data-live-motion] .live-audio>i{width:3px;height:100%;border-radius:2px;background:linear-gradient(#cfb1f5,#8e75b8);transform:scaleY(var(--audio-level));transform-origin:bottom}
[data-live-motion] .live-time{position:absolute;left:94px;bottom:15px;color:#bcacd0;font:8px var(--mono);font-variant-numeric:tabular-nums;line-height:1.6}
[data-live-motion] .live-reactions{position:absolute;right:17px;top:50px;bottom:18px;width:40px;pointer-events:none}
[data-live-motion] .live-reactions>span{position:absolute;bottom:0;left:12px;width:16px;height:16px;color:#eea1cc;opacity:0;filter:drop-shadow(0 0 5px #e590c122)}
[data-live-motion] .live-reactions svg{display:block;width:100%;height:100%}
[data-live-motion] .live-comments{align-items:center;gap:10px;padding:13px 0;line-height:1.6}
[data-live-motion] .live-comments>span:first-child{min-width:0;overflow-wrap:anywhere}
[data-live-motion] .live-comments .live-likes{display:flex;align-items:center;gap:5px;letter-spacing:0;color:var(--live-heart);flex-shrink:0;font-size:8px}
[data-live-motion] .live-likes>svg{width:12px;height:12px}
[data-live-motion] .live-likes>b{font:500 10px var(--mono);font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
[data-live-motion] .live-chat{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 9px;background:var(--live-chat-bg);border:1px solid color-mix(in srgb,var(--live-ink) 13%,transparent);border-radius:4px;color:var(--live-ink)}
[data-live-motion] .live-chat-avatars{display:flex;flex-shrink:0;padding-left:3px}
[data-live-motion] .live-chat-avatars>i{display:grid;place-items:center;width:17px;height:17px;margin-left:-3px;border:1px solid color-mix(in srgb,var(--live-ink) 35%,transparent);border-radius:50%;background:#23223b;color:#dac7f2;font:6px var(--mono)}
html[data-theme="light"] [data-live-motion] .live-chat-avatars>i{background:#ede8f6;color:#785294}
[data-live-motion] .live-chat-avatars>i:nth-child(2){background:#293549;color:#b1c4f0}
html[data-theme="light"] [data-live-motion] .live-chat-avatars>i:nth-child(2){background:#e5edf9;color:#5177b4}
[data-live-motion] .live-chat-copy{display:grid;min-width:0;align-items:center;font-size:9px;line-height:1.65;overflow-wrap:anywhere}
[data-live-motion] [data-live-chat]{grid-area:1/1;visibility:hidden}
[data-live-message="0"] [data-live-chat="0"],[data-live-message="1"] [data-live-chat="1"],[data-live-message="2"] [data-live-chat="2"]{visibility:visible}
[data-live-motion] .live-demo{display:block;margin-top:7px;color:var(--live-muted);font:7px/1.6 var(--mono);text-align:right}
[data-live-ready="true"] .live-orb{animation:live-orb-flow 14s linear infinite;animation-play-state:paused}
[data-live-ready="true"] .live-screen:before{animation:live-screen-light 9s ease-in-out infinite alternate;animation-play-state:paused}
[data-live-ready="true"] .live-badge>i{animation:live-on-air 2.4s ease-in-out infinite;animation-play-state:paused}
[data-live-ready="true"] .live-audio>i{animation:live-audio-level calc(850ms + var(--audio-index)*75ms) ease-in-out infinite alternate;animation-delay:calc(var(--audio-index)*-130ms);animation-play-state:paused}
[data-live-ready="true"] .live-reactions>span{animation:live-reaction-rise 4.8s ease-out infinite;animation-delay:calc(var(--reaction-index)*1.2s);animation-play-state:paused}
[data-live-motion].is-live-running :is(.live-orb,.live-badge>i,.live-audio>i,.live-reactions>span){animation-play-state:running}
[data-live-motion].is-live-running .live-screen:before{animation-play-state:running}
[data-live-motion].compact .live-orb{width:100px;height:100px;top:38%}
[data-live-motion].compact .live-orbit-rim{width:112px;height:112px;top:38%}
[data-live-motion].compact .live-play{bottom:24%}
[data-live-motion].compact .live-badge{top:10px;left:10px;font-size:6px;padding:3px 5px;gap:3px}
[data-live-motion].compact .live-badge>small{font-size:5px}
[data-live-motion].compact .live-viewers{top:12px;right:10px;font-size:6px;gap:4px}
[data-live-motion].compact .live-viewers>b{font-size:8px}
[data-live-motion].compact .live-play>svg{width:26px;height:26px}
[data-live-motion].compact .live-caption{left:13px;right:45px;bottom:28px;font-size:10px}
[data-live-motion].compact .live-audio{left:13px;bottom:11px;height:9px;gap:2px;width:42px}
[data-live-motion].compact .live-audio>i{width:2px}
[data-live-motion].compact .live-time{left:66px;bottom:9px;font-size:6px}
[data-live-motion].compact .live-reactions{right:9px;top:30px;bottom:12px;width:30px}
[data-live-motion].compact .live-reactions>span{width:12px;height:12px}
[data-live-motion].compact .live-comments{padding:9px 0}
[data-live-motion].compact .live-comments .live-likes{font-size:6px}
[data-live-motion].compact .live-likes>b{font-size:8px}
[data-live-motion].compact .live-chat{padding:6px;gap:6px}
[data-live-motion].compact .live-chat-copy{font-size:7px}
@keyframes live-orb-flow{from{transform:translate(-50%,-50%) rotate(-30deg)}to{transform:translate(-50%,-50%) rotate(330deg)}}
@keyframes live-screen-light{from{transform:rotate(-8deg) translateX(-2%);opacity:.6}to{transform:rotate(8deg) translateX(3%);opacity:1}}
@keyframes live-on-air{0%,100%{opacity:.6;box-shadow:0 0 0 0 #ee9bb600}50%{opacity:1;box-shadow:0 0 0 3px #ee9bb612}}
@keyframes live-audio-level{from{transform:scaleY(calc(var(--audio-level)*.35))}to{transform:scaleY(var(--audio-level))}}
@keyframes live-reaction-rise{0%{opacity:0;transform:translate(0,0) scale(.65)}8%{opacity:.8}48%{opacity:.6}70%,100%{opacity:0;transform:translate(var(--reaction-drift),-115px) scale(1.1)}}
@media(max-width:700px){[data-live-motion] .live-viewers{font-size:7px;gap:4px}[data-live-motion] .live-viewers>b{font-size:9px}[data-live-motion] .live-caption{font-size:12px}[data-live-motion] .live-comments{font-size:10px}}
@media(max-width:700px){[data-live-motion]:not(.compact) .live-orb{width:136px;height:136px;top:38%}[data-live-motion]:not(.compact) .live-orbit-rim{width:150px;height:150px;top:38%}[data-live-motion]:not(.compact) .live-play{bottom:24%}[data-live-motion]:not(.compact) .live-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){[data-live-motion] :is(.live-orb,.live-badge>i,.live-audio>i,.live-reactions>span),[data-live-motion] .live-screen:before{animation:none!important}[data-live-motion] .live-reactions>span{opacity:0!important}[data-live-motion] .live-orb{transform:translate(-50%,-50%) rotate(-30deg)}[data-live-motion] .live-audio>i{transform:scaleY(var(--audio-level))}}