:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#030710;color:#eaf2fc}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#0b1421;border-bottom:1px solid #25334a;min-height:52px}header strong{white-space:nowrap}#display-name{font-weight:400;color:#a8c2dc;margin-left:8px}#connection{font-size:12px;color:#6ce5b2;margin-left:auto}time{font-variant-numeric:tabular-nums;font-size:12px;color:#b2c3d4}button,select,input{font:inherit;color:inherit;background:#152237;border:1px solid #3e536d;border-radius:5px;padding:8px 11px}button,a{cursor:pointer}button:hover{background:#223b59}button:focus-visible,a:focus-visible{outline:2px solid #69caff;outline-offset:3px}a{color:#8cceff}button:disabled{opacity:.5;cursor:wait}#controls{padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#111e30;font-size:13px}#controls[hidden], [hidden]{display:none!important}#warning,#alarms{padding:10px 16px;font-size:14px}#warning{background:#432f0c;color:#ffe1a2}#alarms{background:#4a1821;color:#ffe0e4}#wall{flex:1;min-height:0;display:grid;gap:3px;padding:3px;grid-template-columns:repeat(var(--columns,3),minmax(0,1fr));grid-template-rows:repeat(var(--columns,3),minmax(0,1fr))}.tile{position:relative;min-height:0;min-width:0;overflow:hidden;background:#000;border:1px solid #1e3248}.tile video{width:100%;height:100%;object-fit:contain}.tile .label{position:absolute;top:0;left:0;right:0;padding:6px 9px;background:linear-gradient(#081324e8,#08132470);font-size:12px;z-index:2;text-shadow:0 1px 2px black}.tile .state{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:20px;background:#08111ce6;color:#c1d3e9;font-size:13px}.tile.live .state{display:none}.tile .live-indicator{float:right;color:#6ce5b2;font-size:11px}.tile:not(.live) .live-indicator{display:none}#setup{position:absolute;inset:52px 0 0;overflow:auto;background:#07101cf8;padding:24px}.setup-card{max-width:750px;margin:auto;background:#0f1c2e;border:1px solid #2a415d;border-radius:10px;padding:28px;box-shadow:0 16px 60px #0006}h1{margin:0;font-size:28px}p{line-height:1.6;color:#becfe0}.eyebrow{color:#75c2ff;letter-spacing:.12em;font-size:12px}.note{font-size:12px;color:#94aac1}form>label{display:flex;flex-direction:column;gap:6px;margin:18px 0}.form-row{display:flex;gap:14px;margin:14px 0;flex-wrap:wrap}.form-row label{display:flex;align-items:center;gap:8px}fieldset{border:1px solid #35506c;border-radius:6px}#camera-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:250px;overflow:auto}#camera-list label,.check{font-size:14px;display:flex;gap:8px;align-items:center}.check{flex-direction:row;line-height:1.5}.check input{flex-shrink:0}#enroll-submit{background:#1567bf;border-color:#5da9f8}#setup-message{color:#ffdc99}@media(max-width:700px){header{flex-wrap:wrap;gap:8px;padding:8px}header strong{font-size:13px}#display-name{display:none}time{display:none}button,select{font-size:12px;padding:7px}#setup{inset:60px 0 0;padding:12px}.setup-card{padding:18px}#camera-list{grid-template-columns:1fr}.tile .label{font-size:10px}}