:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#111714;--surface:#18201c;--surface-raised:#202a25;--border:#34433b;--text:#f4f7f5;--muted:#aab8b0;--accent:#f6b85b;--offline:#7f9187;--online:#63d793;--error:#ff9a8f}*{box-sizing:border-box}html{background:var(--background)}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at top right, #253b2f 0, transparent 34rem), var(--background);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}.siteHeader{border-bottom:1px solid var(--border);background:#111714d1;justify-content:space-between;align-items:center;min-height:4.5rem;padding:0 5vw;display:flex}.siteHeader nav{color:var(--muted);gap:1.5rem;display:flex}.brand{color:var(--accent);letter-spacing:.02em;font-size:1.1rem;font-weight:750}main{width:min(70rem,90vw);margin:4rem auto}.panel{border:1px solid var(--border);background:#18201cf0;border-radius:1.25rem;padding:clamp(1.5rem,4vw,3rem);box-shadow:0 2rem 5rem #0003}.narrow{width:min(32rem,100%);margin:0 auto}.pageHeading{justify-content:space-between;align-items:flex-start;gap:2rem;margin-bottom:2rem;display:flex}h1,h2,p{margin-top:0}h1{margin-bottom:.6rem;font-size:clamp(2rem,5vw,3.5rem);line-height:1}h2{margin-bottom:.25rem;font-size:1rem}.eyebrow{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.75rem;font-size:.75rem;font-weight:750}.muted,.deviceCard p{color:var(--muted);line-height:1.6}.errorMessage{color:var(--error);line-height:1.5}button,input{border:1px solid var(--border);min-height:2.75rem;font:inherit;border-radius:.65rem}button{cursor:pointer;color:#1b160e;background:var(--accent);padding:.65rem 1rem;font-weight:700}button:disabled{cursor:not-allowed;filter:saturate(.35);opacity:.65}.form{gap:.75rem;margin-top:2rem;display:grid}.form input{color:var(--text);background:var(--surface-raised);margin-bottom:.75rem;padding:.65rem .75rem}.deviceList{gap:1rem;display:grid}.deviceCard{border:1px solid var(--border);background:var(--surface-raised);border-radius:.85rem;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem;display:grid}.deviceCard p{margin-bottom:0}.deviceLink{display:inline-block}.deviceLink:after{content:" →";color:var(--accent)}.statusDot{background:var(--offline);border-radius:50%;width:.65rem;height:.65rem}.statusDot.online{background:var(--online);box-shadow:0 0 .8rem #63d79373}.badge{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:.3rem .55rem;font-size:.75rem}.secondaryButton{border:1px solid var(--border);min-height:2.75rem;color:var(--text);background:var(--surface-raised);font:inherit;border-radius:.65rem;justify-content:center;align-items:center;padding:.65rem 1rem;font-weight:700;display:inline-flex}button.secondaryButton:disabled{cursor:not-allowed}.viewer{gap:1.5rem;display:grid}.viewerControls{border:1px solid var(--border);background:var(--surface-raised);border-radius:.85rem;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding:1rem;display:flex}.viewerControls fieldset{border:0;gap:1.25rem;margin:0;padding:0;display:flex}.viewerControls legend{color:var(--muted);margin-bottom:.65rem;font-size:.8rem;font-weight:700}.viewerControls label{align-items:center;gap:.45rem;display:inline-flex}.viewerControls input{width:1.1rem;height:1.1rem;min-height:auto;accent-color:var(--accent);margin:0}.viewerActions{align-items:center;gap:.75rem;display:flex}.connectionStatus{min-width:6.5rem;color:var(--muted);text-align:right;font-size:.85rem}.videoGrid,.audioGrid{grid-template-columns:repeat(auto-fit,minmax(min(25rem,100%),1fr));gap:1rem;display:grid}.videoFeed,.audioFeed{min-width:0;margin:0}.videoFeed figcaption,.audioFeed figcaption{color:var(--muted);margin-bottom:.5rem;font-size:.85rem;font-weight:700}.videoFrame,.audioFrame{border:1px solid var(--border);background:#080b09;border-radius:.85rem;place-items:center;min-height:15rem;display:grid;position:relative;overflow:hidden}.audioFrame{min-height:6rem;padding:1rem}.videoFrame video,.audioFrame audio{object-fit:contain;background:#080b09;width:100%;max-height:70vh;display:block}.audioFrame audio{max-height:none}.videoPlaceholder{min-height:15rem;color:var(--muted);text-align:center;place-items:center;padding:1rem;display:grid}.videoFrame .videoPlaceholder,.audioFrame .videoPlaceholder{position:absolute;inset:0}.snapshotPanel{border-top:1px solid var(--border);gap:1rem;padding-top:.5rem;display:grid}.snapshotPreview{margin:0}.snapshotPreview img{object-fit:contain;border:1px solid var(--border);background:#080b09;border-radius:.85rem;width:100%;max-height:28rem;display:block}.snapshotPreview figcaption,.snapshotThumb span{color:var(--muted);margin-top:.5rem;font-size:.85rem;display:block}.snapshotGrid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.snapshotThumb{border:1px solid var(--border);width:100%;color:inherit;background:var(--surface-raised);text-align:left;border-radius:.75rem;padding:.45rem;display:grid}.snapshotThumb.selected{border-color:var(--accent)}.snapshotThumb img{aspect-ratio:16/10;object-fit:cover;background:#080b09;border-radius:.5rem;width:100%;display:block}@media (max-width:42rem){.pageHeading{flex-direction:column}.deviceCard{grid-template-columns:auto 1fr}.badge{display:none}.viewerControls,.viewerActions{flex-direction:column;align-items:stretch}.connectionStatus{text-align:left;min-width:0}}