*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;min-width:320px;overflow:hidden;background:#090a10;color:#f5f7ff;font:16px system-ui,-apple-system,sans-serif}body{overscroll-behavior:none}*{scrollbar-width:none}*::-webkit-scrollbar{display:none}main{width:100%;height:100%;overflow:hidden}h1{margin:0 0 8px;font-size:clamp(28px,5vw,46px);letter-spacing:-.03em}p{color:#b8bdd0}button{font:inherit;padding:10px 14px;border:1px solid transparent;border-radius:8px;background:#5865f2;color:#fff;cursor:pointer}button:hover:not(:disabled){background:#707bf5}button:disabled{cursor:not-allowed;opacity:.6}#join{position:relative;width:min(620px,calc(100% - 32px));margin:auto;padding:clamp(24px,6vw,56px) 0;min-height:100%;display:flex;flex-direction:column;justify-content:center}#join.adding{position:fixed;inset:50% auto auto 50%;z-index:20;width:min(560px,calc(100% - 28px));min-height:0;margin:0;padding:28px;transform:translate(-50%,-50%);border:1px solid #343852;border-radius:16px;background:#111422f2;box-shadow:0 24px 80px #000b;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}#join.adding:before{content:"";position:fixed;top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-1;background:#0008}.modal-close{display:none}#join.adding .modal-close{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#25283a;color:#fff;font:400 24px/1 Arial,sans-serif}#join.adding .modal-close:hover{background:#d64b65}#status{min-height:1.4em;margin:0 0 14px;color:#b8bdd0}.code-label{display:block;margin:18px 0 6px;color:#b8bdd0;font-size:13px}textarea{display:block;width:100%;resize:none;min-height:82px;padding:12px;border:1px solid #555;border-radius:8px;background:#121522;color:#f5f7ff;font:inherit}.join-row{display:flex;gap:8px;margin-top:10px}.hint{font-size:13px}#error{min-height:1.4em;color:#ff7b7b}.catalog{margin-top:24px;padding-top:16px;border-top:1px solid #ffffff18}.catalog h2{margin:0 0 8px;font-size:16px}.catalog p{margin:0 0 10px;font-size:13px}.catalog-list{display:grid;gap:8px}#history-list{max-height:min(260px,34vh);padding:2px 6px 2px 1px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5865f2 transparent}#history-list::-webkit-scrollbar{display:block;width:6px}#history-list::-webkit-scrollbar-track{background:transparent}#history-list::-webkit-scrollbar-thumb{border-radius:999px;background:#5865f2}.catalog-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #ffffff20;border-radius:9px;background:#121522;color:#f5f7ff;text-align:left}.catalog-item button{padding:6px 10px;font-size:13px}.catalog-item.offline{opacity:.6}.catalog-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#b8bdd0}.catalog-status:before{content:"";width:8px;height:8px;border-radius:50%;background:#f0b84b}.catalog-item.online .catalog-status:before{background:#77e8b8}.catalog-item.offline .catalog-status:before{background:#8d91a3}.history-heading{display:flex;align-items:center;justify-content:space-between}.history-heading button{padding:4px 8px;background:#25283a;font-size:12px}#debug{max-height:160px;overflow:auto;text-align:left;color:#9aa3bd;font-size:11px;white-space:pre-wrap}#player{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;background:#000}.streams{position:relative;width:100%;height:100%;overflow:hidden;background:#000}.streams.dragging{outline:3px dashed #77e8b8;outline-offset:-4px}.stream-card{position:absolute;top:0;right:0;bottom:0;left:0;display:none;overflow:hidden;background:#000}.stream-card.active{display:block}.stream-card.floating{display:block;inset:auto;z-index:4;border:1px solid #ffffff55;border-radius:12px;box-shadow:0 14px 40px #000b}.stream-card.floating>video{border-radius:11px}.stream-card>video{display:block;width:100%;height:100%;object-fit:contain;background:#000;transform-origin:center center;will-change:transform}.stream-card.zoomed>video{cursor:grab}.stream-card.zoomed>video:active{cursor:grabbing}.stream-zoom-zone{position:absolute;top:0;right:0;z-index:6;width:150px;height:52px;pointer-events:auto}.stream-zoom-controls{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #ffffff30;border-radius:9px;background:#090a10d9;box-shadow:0 8px 22px #0008;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .18s ease}.stream-zoom-zone:hover .stream-zoom-controls,.stream-zoom-controls:focus-within,.stream-card.zoom-interacting .stream-zoom-controls{opacity:1;pointer-events:auto}.stream-zoom-controls button{display:grid;place-items:center;width:25px;height:24px;padding:0;border:1px solid #ffffff30;border-radius:5px;background:#25283a;color:#fff;font-size:16px;line-height:1}.stream-zoom-controls button:hover:not(:disabled){background:#5865f2}.stream-zoom-controls button:disabled{opacity:.4}.stream-zoom-controls .zoom-reset{width:28px;font-size:15px;line-height:1}.stream-zoom-controls .zoom-value{min-width:42px;color:#e7e9ff;font-size:11px;font-variant-numeric:tabular-nums;text-align:center}.stream-card.floating .stream-zoom-zone{top:32px;height:52px}.window-titlebar{position:absolute;top:0;left:0;right:0;z-index:3;display:none;align-items:center;justify-content:space-between;gap:8px;height:32px;padding:0 10px;border-bottom:1px solid #ffffff24;background:#090a10b8;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;-webkit-user-select:none;user-select:none;cursor:grab}.window-titlebar:active{cursor:grabbing}.window-titlebar span:first-child{overflow:hidden;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}.window-titlebar .window-hint{display:grid;place-items:center;width:24px;height:24px;color:#dfe3ff;font-size:19px;line-height:1;cursor:grab}.window-close{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #ffffff38;border-radius:50%;background:#25283a;color:#fff;font:400 17px/1 Arial,sans-serif;cursor:pointer}.window-close:hover{background:#d64b65}.window-resize-handle{position:absolute;right:5px;bottom:5px;z-index:4;display:none;place-items:center;width:24px;height:24px;border:1px solid #ffffff38;border-radius:6px;background:#090a10a8;color:#ffffffb8;font-size:17px;line-height:1;cursor:nwse-resize}.window-resize-handle:before{content:"✥"}.stream-card.floating .window-titlebar,.stream-card.floating .window-resize-handle{display:flex}.stream-card.floating .window-resize-handle{display:block}.stream-card audio{display:none}.stream-audience{position:absolute;left:12px;bottom:12px;z-index:6;display:grid;gap:6px;max-width:min(360px,calc(100% - 24px));padding:8px 10px;border:1px solid #ffffff25;border-radius:10px;background:#090a10d9;box-shadow:0 8px 22px #0008;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f1f4ff;font-size:11px;pointer-events:none}.stream-audience strong{font-size:11px;font-weight:700}.stream-audience-list{display:flex;flex-wrap:wrap;gap:4px;max-height:48px;overflow:hidden}.stream-audience-list span{padding:3px 7px;border:1px solid #77e8b844;border-radius:999px;background:#77e8b812;color:#c8d8d1;font-size:10px;white-space:nowrap}.stream-card.floating .stream-audience{bottom:10px;left:10px;max-width:calc(100% - 20px)}.rail-trigger{position:absolute;top:0;bottom:0;left:0;z-index:1000;width:46px}.rail-trigger:after{content:"";position:absolute;top:50%;left:7px;width:4px;height:58px;transform:translateY(-50%);border-radius:999px;background:#ffffff70;box-shadow:0 0 12px #ffffff26;opacity:.34;transition:width .18s ease,opacity .18s ease,background .18s ease}.rail-trigger:hover:after{width:5px;background:#77e8b8;opacity:.82}.stream-rail{position:absolute;top:50%;left:10px;z-index:1001;display:flex;flex-direction:column;align-items:center;gap:10px;width:132px;max-height:calc(100% - 24px);padding:10px 8px;overflow-y:auto;transform:translate(-125%,-50%);opacity:0;pointer-events:none;border:1px solid #ffffff1c;border-radius:14px;background:#090a10d9;box-shadow:0 12px 34px #0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .18s ease,opacity .18s ease}.rail-trigger:hover~.stream-rail,.stream-rail:hover,.stream-rail:focus-within{transform:translateY(-50%);opacity:1;pointer-events:auto}.rail-add{display:grid;place-items:center;width:112px;height:52px;padding:0;border:1px dashed #8b93ff99;border-radius:9px;background:#121522;color:#cbd0ff;font-size:26px;line-height:1}.rail-add:hover:not(:disabled){border-color:#77e8b8;background:#1a1e35}.rail-item{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;width:116px;padding:4px;border:1px solid #5865f2;border-radius:8px;outline:none;background:#121522ef;box-shadow:0 8px 20px #0008;cursor:pointer}.rail-item:hover,.rail-item:focus-visible{border-color:#aab0ff}.rail-item>.rail-drag-handle{position:absolute;top:6px;left:6px;z-index:2;display:grid;place-items:center;width:24px;height:24px;overflow:visible;border:1px solid #ffffff38;border-radius:6px;background:#090a10b8;color:#ffffffd9;font-size:17px;line-height:1;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.rail-item>.rail-drag-handle:active{cursor:grabbing}.rail-item>.rail-drag-handle:focus-visible{outline:2px solid #77e8b8;outline-offset:1px}.rail-item.active{border-color:#77e8b8;box-shadow:0 0 0 2px #77e8b855,0 8px 20px #0008}.rail-item video{display:block;width:106px;height:66px;object-fit:contain;border-radius:5px;background:#000;pointer-events:none}.rail-item>span:not(.rail-meta):not(.rail-drag-handle){overflow:hidden;color:#fff;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap;text-align:left}.rail-meta{display:flex;flex-direction:column;min-height:25px;overflow:hidden;text-align:left}.rail-audio-controls{display:flex;align-items:center;gap:4px;width:100%;padding-top:4px;border-top:1px solid #ffffff1c}.rail-audio-controls button{width:25px;height:24px;padding:0;border-radius:5px;font-size:13px;line-height:1}.rail-audio-controls input{min-width:0;width:76px;height:18px;margin:0;accent-color:#8b93ff}.stream-card.floating .rail-audio-controls{position:absolute;left:50%;bottom:10px;z-index:5;width:auto;min-width:120px;padding:6px 8px;border:1px solid #ffffff30;border-radius:9px;background:#090a10d9;box-shadow:0 8px 22px #0008;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transform:translate(-50%);transition:opacity .18s ease}.stream-card.floating:hover .rail-audio-controls,.stream-card.floating .rail-audio-controls:focus-within{opacity:1;pointer-events:auto}.stream-card.floating .rail-audio-controls input{width:76px}.stream-status{overflow:hidden;color:#b8bdd0;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.stream-error{overflow:hidden;color:#ff7b7b;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.stream-context-menu{position:fixed;z-index:2000;display:grid;gap:5px;min-width:190px;padding:8px;border:1px solid #ffffff30;border-radius:11px;background:#111422f5;box-shadow:0 14px 38px #000b;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.stream-context-menu[hidden]{display:none}.stream-context-menu strong{padding:3px 7px;color:#dfe3ff;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stream-context-menu button{width:100%;padding:8px 9px;border:1px solid transparent;border-radius:7px;background:#25283a;color:#f5f7ff;font-size:12px;text-align:left}.stream-context-menu button:hover:not(:disabled){background:#5865f2}.stream-context-menu button:disabled{opacity:.45}.stream-context-menu .context-danger{color:#ffb3bc}.stream-context-menu .context-danger:hover:not(:disabled){background:#a43e53}.context-volume{display:grid;gap:4px;padding:5px 7px;color:#b8bdd0;font-size:11px}.context-volume input{width:100%;margin:0;accent-color:#8b93ff}.rail-remove{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid #ffffff38;border-radius:50%;background:#090a10d9;color:#fff;font:400 17px/1 Arial,sans-serif}.rail-remove:hover:not(:disabled){background:#d64b65}@media (hover:none),(max-width:700px){.rail-trigger{display:none}.stream-zoom-controls{opacity:.88;pointer-events:auto}.stream-rail{transform:translateY(-50%);opacity:.92;pointer-events:auto}.stream-card.floating{min-width:0;min-height:0}.stream-card.floating .stream-zoom-controls{right:7px}.stream-card.floating .rail-audio-controls{opacity:.88;pointer-events:auto;bottom:7px}}@media (hover:hover) and (max-width:700px){.stream-zoom-controls{opacity:0;pointer-events:none}}@media (max-width:520px){#join{width:min(100% - 28px,420px)}.stream-rail{left:6px;width:118px;padding:8px 6px}.rail-item,.rail-add{width:104px}.rail-item video{width:94px;height:58px}.rail-audio-controls input{width:67px}}