:root{color-scheme:dark;--gap:8px}*{box-sizing:border-box}body{color:#e8eaed;background:#101214;margin:0;font:15px/1.4 system-ui,sans-serif}main{padding:var(--gap);flex-direction:column;height:100dvh;display:flex}.splash{z-index:1000;transform-origin:50%;background:#000;position:fixed;inset:0;overflow:hidden}.splash.fading img{animation:.7s steps(7,end) .5s forwards splash-crt-collapse}.splash.fading:before{animation:.14s linear infinite splash-scanlines,.7s steps(7,end) .5s forwards splash-crt-collapse}.splash.fading:after{animation:.7s steps(7,end) .5s forwards splash-crt-glow}.splash:before,.splash:after{z-index:1;content:"";pointer-events:none;position:absolute;inset:0}.splash:before{mix-blend-mode:overlay;background:repeating-linear-gradient(#ffffff0a 0 1px,#0000001f 1px 3px);animation:.14s linear infinite splash-scanlines}.splash:after{background:radial-gradient(#0000 35%,#000000e6 100%),linear-gradient(90deg,#ff000008,#0000 35% 65%,#00ffff08);animation:.12s steps(2,end) infinite splash-vhs-flicker}.splash img{object-fit:contain;filter:contrast(1.12)saturate(.72)brightness(.92);width:100%;height:100%;position:absolute;inset:0}@keyframes splash-scanlines{to{background-position:0 6px}}@keyframes splash-vhs-flicker{50%{opacity:.72}}@keyframes splash-crt-collapse{0%{filter:contrast(1.12)saturate(.72)brightness(.92);transform:none}30%{filter:contrast(1.5)saturate(.6);transform:translate(2%)skew(-2deg)scaleX(1.03)}55%{filter:contrast(1.9)brightness(1.25);transform:translate(-3%)skew(3deg)scaleX(1.08)}72%{filter:grayscale(.7)contrast(2.5)brightness(3);transform:scaleX(1.1)scaleY(.035)}85%{filter:grayscale()contrast(3)brightness(6);transform:scaleX(.08)scaleY(.025)}to{filter:grayscale()brightness(8);transform:scale(0)}}@keyframes splash-crt-glow{0%,65%{filter:none;opacity:1;background:radial-gradient(#0000 35%,#000000e6 100%),linear-gradient(90deg,#ff000008,#0000 35% 65%,#00ffff08)}72%{filter:drop-shadow(0 0 6px #fff);opacity:1;background:linear-gradient(#0000 calc(50% - 2px),#fff 50%,#0000 calc(50% + 2px))}85%{filter:drop-shadow(0 0 12px #fff);opacity:1;background:radial-gradient(circle,#fff 0 2px,#ffffffd9 3px,#0000 16px)}95%{filter:drop-shadow(0 0 8px #fff);opacity:1;background:radial-gradient(circle,#fff 0 1px,#ffffffa6 2px,#0000 9px)}to{filter:none;opacity:0;background:radial-gradient(circle,#0000 0)}}.bar{justify-content:space-between;align-items:center;gap:var(--gap);margin-bottom:var(--gap);flex-shrink:0;display:flex}.bar h1{margin:0;font-size:16px;font-weight:600}.brand,.toggles{align-items:center;gap:8px;display:flex}.polling{background:#2f6fdb;border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite blink}.online{color:#81c995;white-space:nowrap;align-items:center;gap:4px;font-size:13px;display:flex}.online:before{content:"";background:currentColor;border-radius:50%;width:7px;height:7px}@keyframes blink{50%{opacity:.15}}.github{color:#2f6fdb;background:0 0;border:1px solid #2f6fdb;border-radius:6px;justify-content:center;align-items:center;padding:6px 14px;display:flex}.github:hover{color:#e8eaed}.notice{margin:var(--gap) 0;color:#9aa2ab}.notice.error{color:#ff8a80}.stage{gap:var(--gap);flex:1;min-height:0;display:flex}.grid{align-content:start;gap:var(--gap);flex:1;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));align-items:start;min-width:0;min-height:0;display:grid}.grid.solo-xl{grid-template-columns:repeat(auto-fit, minmax(max(80px, calc((100% + var(--gap)) / var(--channel-count) - var(--gap))), 1fr));grid-template-rows:minmax(240px,1fr);grid-auto-rows:max-content;align-content:stretch}.grid.solo-xl .cell.active{order:-2;grid-column:1/-1;align-self:stretch}.grid.solo-xl .cell:not(.active){order:0;grid-column:auto}.grid.solo-xl .cell.active .tile{aspect-ratio:auto;height:100%}.grid.solo-xl .cell:not(.active) .tile{min-height:96px}.solo-toggle{display:none}@media (width>=701px){.solo-toggle{display:inline-block}.grid.solo-x4{grid-template-columns:repeat(3,1fr)}.grid.solo-x4 .cell{grid-column:auto}.grid.solo-x4 .cell.active{order:-1;grid-area:span 2/span 2}}.cell{gap:var(--gap);grid-column:span 2;min-width:0;display:flex;position:relative}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.cell .tile{flex:1;min-width:0}.drag-handle{z-index:2;color:#cfd4d9;cursor:grab;touch-action:none;background:0 0;border:0;width:36px;height:48px;padding:0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.drag-handle:before{content:"";background:#16191ce8;border:1px solid #2c3238;border-left:0;border-radius:0 999px 999px 0;width:24px;height:32px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.drag-handle-icon{width:16px;height:16px;display:block;position:absolute;top:50%;left:12px;transform:translate(-50%,-50%)}.drag-handle:active{cursor:grabbing}.drag-handle:focus-visible{outline-offset:2px;outline:2px solid #2f6fdb}.cell.dragging{opacity:.65}.cell.drag-over .tile{box-shadow:0 0 0 2px #2f6fdb}.chat{background:#0f0f0f;border-radius:8px;flex:0 0 340px;align-self:stretch;overflow:hidden}.chat iframe{border:0;width:100%;height:100%}@media (width<=700px){.bar{flex-direction:column;align-items:flex-start}.toggles{flex-wrap:nowrap;gap:4px;width:100%}.toggles>*{flex:auto;min-width:0}.bar .toggles button,.bar .toggles .github{white-space:nowrap;padding-inline:clamp(4px,1.5vw,10px);font-size:clamp(10px,3vw,15px)}.bar .toggles button{text-overflow:ellipsis;overflow:hidden}.toggles .github{flex-shrink:0;align-self:stretch;padding-block:0}.stage{flex-direction:column}.grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto}.stage:has(>.chat){grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;display:grid;overflow:auto}.stage:has(>.chat)>.grid{display:contents}.stage:has(>.chat) .cell.active{order:-2;grid-column:1/-1}.stage:has(>.chat) .grid.solo-xl .cell.active{min-height:240px}.stage:has(>.chat)>.chat{order:-1;grid-column:1/-1;height:60vh}}.tile{aspect-ratio:16/9;background:#000;border-radius:8px;position:relative;overflow:hidden}.tile-player,.tile-player iframe{border:0;width:100%;height:100%}.tile-overlay{justify-content:space-between;align-items:flex-end;gap:var(--gap);color:#fff;font:inherit;text-align:left;cursor:pointer;text-shadow:0 1px 3px #000;background:0 0;border:0;padding:8px 10px;display:flex;position:absolute;inset:0}.tile-overlay[aria-pressed=true]{box-shadow:inset 0 0 0 2px #2f6fdb}.playback-status{color:#fff;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;background:#000a;border-radius:4px;max-width:calc(100% - 44px);padding:2px 4px;font-size:12px;position:absolute;top:6px;left:6px;overflow:hidden}.playback-start{overflow-wrap:anywhere;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tile-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.tile-sound{color:#cfd4d9;font-size:13px}.grid.solo-xl .cell:not(.active) .tile-sound{display:none}.tile-volume{accent-color:#2f6fdb;cursor:pointer;width:96px;position:absolute;bottom:10px;right:10px}.stop{color:#fff;cursor:pointer;background:#000a;border:0;border-radius:50%;width:26px;height:26px;font:16px/1 system-ui,sans-serif;position:absolute;top:6px;right:6px}.idle{color:#9aa2ab;font:inherit;text-align:center;background:#16191c;border:1px dashed #2c3238;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:96px;padding:6px 6px 6px 42px;display:flex}.idle>span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.idle-state{font-size:13px}.bar button,.start{color:#e8eaed;cursor:pointer;font:inherit;background:#1c2024;border:1px solid #2c3238;border-radius:6px;padding:6px 14px}.start{background:#14532d;max-width:100%;padding:6px;font-size:12px}.bar button[aria-pressed=true]{background:#2f6fdb;border-color:#2f6fdb}