:root{color-scheme:dark;--bg: #0d1117;--panel: rgba(18, 25, 36, .9);--text: #f2f5fa;--accent: #69e3ff;--danger: #ff8f8f}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at top,#132033 0%,var(--bg) 55%);color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}canvas{display:block;width:100%;height:100%}.loading-overlay{position:fixed;inset:0;display:grid;place-content:center;gap:.75rem;padding:1.5rem;background:linear-gradient(180deg,#0a101af0,#060910f5);transition:opacity .2s ease-in;z-index:10}.loading-title{margin:0;text-align:center;font-size:clamp(1rem,2.5vw,1.5rem);letter-spacing:.06em}.loading-bar{width:min(520px,80vw);height:14px;border-radius:999px;overflow:hidden;background:#ffffff14;border:1px solid rgba(255,255,255,.15)}.loading-fill{height:100%;width:0%;background:linear-gradient(90deg,#2cb6ff,var(--accent));transition:width .12s ease-out}.loading-label{text-align:center;font-size:.95rem;opacity:.95}.loading-help{margin:0;text-align:center;font-size:.85rem;opacity:.75}.hidden{opacity:0;pointer-events:none}.hud{position:fixed;top:12px;left:12px;padding:.5rem .75rem;border-radius:10px;background:var(--panel);border:1px solid rgba(255,255,255,.15);font-size:.8rem;z-index:5;-webkit-user-select:none;user-select:none}.stream-controls{position:fixed;top:12px;right:12px;display:grid;grid-template-columns:auto minmax(220px,1fr);grid-template-areas:"button title" "button volume" "button status";align-items:center;gap:.45rem .75rem;min-width:min(420px,75vw);padding:.7rem .8rem;border-radius:10px;background:var(--panel);border:1px solid rgba(255,255,255,.15);font-size:.8rem;z-index:5;-webkit-user-select:none;user-select:none}.stream-title{grid-area:title;justify-self:end;color:inherit;text-decoration:underline;font-weight:600;letter-spacing:.01em}.stream-status{grid-area:status;justify-self:start;opacity:.88}.stream-button{grid-area:button;justify-self:start;align-self:center;border-radius:7px;border:1px solid rgba(255,255,255,.22);background:#060c14b3;color:var(--text);padding:.35rem .75rem;font-size:.8rem;font-weight:600;cursor:pointer}.stream-button:hover{background:#09121ee6}.stream-volume{grid-area:volume;display:grid;gap:.2rem}.stream-volume input[type=range]{width:100%}.error{margin:1rem;color:var(--danger)}body.lightbox-open{overflow:hidden}.lightbox-overlay{position:fixed;inset:0;display:grid;place-items:center;padding:clamp(.75rem,2vw,1.5rem);background:#000000b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:40;opacity:0;pointer-events:none;transition:opacity .18s ease-out}.lightbox-overlay.is-open{opacity:1;pointer-events:auto}.lightbox-overlay[hidden]{display:none}.lightbox-panel{position:relative;width:min(92vw,1120px);max-height:min(88vh,1000px);max-height:min(88dvh,1000px);display:grid;place-items:center;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:#070c14e6;box-shadow:0 16px 46px #0000006b}.lightbox-image{display:block;width:100%;height:auto;max-height:min(88vh,1000px);max-height:min(88dvh,1000px);object-fit:contain;background:#0000004d}.lightbox-close{position:absolute;top:.5rem;right:.5rem;padding:.4rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#060c14c7;color:#fff;font-weight:600;cursor:pointer}.lightbox-close:hover{background:#0b1523eb}@media(max-width:768px){.hud{top:8px;left:8px;font-size:.74rem}.stream-controls{inset:auto 8px 8px;width:calc(100vw - 16px);min-width:0;font-size:.74rem;grid-template-columns:auto 1fr auto;grid-template-areas:"button status title";align-items:center;gap:.35rem .7rem;padding:.4rem .6rem;border-radius:12px;position:fixed}.stream-title{grid-area:title;justify-self:end;font-size:.52rem;opacity:.95}.stream-button{grid-area:button;justify-self:start;align-self:center;padding:.46rem 1.05rem;font-size:.86rem;border-radius:18px}.stream-volume{display:none}.stream-status{grid-area:status;justify-self:start;margin-left:0;font-size:.54rem;line-height:1;opacity:.75}.lightbox-panel{width:min(96vw,1120px)}.lightbox-close{top:.4rem;right:.4rem;padding:.45rem .8rem}}