:root{--bg: #0e0f12;--panel: #16181d;--line: #262a32;--text: #e7e9ee;--dim: #949aa8;--accent: #6ea8ff;--warn: #f0b429;--bad: #ef5f5f;--radius: 10px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{height:100%}button{font:inherit;color:var(--text);background:#232732;border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}button:hover{background:#2b3140}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#0b1220;font-weight:600}button.danger{color:var(--bad)}input{font:inherit;color:var(--text);background:#10131a;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.landing{height:100%;display:grid;place-items:center;padding:24px}.card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:14px}.card h1{margin:0;font-size:20px}.card p{margin:0;color:var(--dim)}.row{display:flex;gap:8px}.row>input{flex:1;min-width:0}.error{color:var(--bad)}.room{height:100%;display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 260px;grid-template-areas:"bar bar" "grid strip"}.bar{grid-area:bar;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}.code{font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.spacer{flex:1}.grid{grid-area:grid;position:relative;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:8px;overflow:hidden}.grid.focused{align-content:flex-start}.tile{position:relative;margin:0;background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;min-width:0;min-height:0}.tile[hidden]{display:none}.tile video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.grid .tile{flex:1 1 320px;max-width:100%;max-height:100%;aspect-ratio:var(--ar, 16 / 9)}.grid.focused .tile{flex:0 0 auto;height:116px}.grid.focused .tile.is-focus{order:-1;flex:1 1 100%;width:100%;height:calc(100% - 124px);aspect-ratio:auto}.tile figcaption{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:12px;background:linear-gradient(transparent,#000000bf);opacity:0;transition:opacity .12s ease}.tile:hover figcaption,.tile.is-focus figcaption{opacity:1}.tile figcaption .tier{color:var(--dim);font-variant-numeric:tabular-nums}.tile input[type=range]{width:72px}.empty{color:var(--dim);text-align:center;display:grid;gap:8px}.empty .code{font-size:28px;color:var(--text)}.strip{grid-area:strip;border-left:1px solid var(--line);background:var(--panel);padding:12px;overflow-y:auto;display:grid;align-content:start;gap:10px}.strip h2{margin:0;font-size:12px;text-transform:uppercase;color:var(--dim);letter-spacing:.08em}button.link{background:none;border:0;padding:0 2px;font-size:11px;color:var(--dim);text-decoration:underline}button.link:hover{background:none;color:var(--text)}.person input.rename{padding:2px 6px;font-size:13px;width:11em}.person{display:grid;gap:3px;padding-bottom:8px;border-bottom:1px solid var(--line)}.person .name{display:flex;align-items:center;gap:6px}.person .tag{font-size:11px;color:var(--dim)}.person .tag.warn{color:var(--warn)}.dot{width:8px;height:8px;border-radius:50%;background:#4c5566;flex:0 0 auto}.dot.on{background:#4ade80}.quality{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}.quality.starved{color:var(--warn)}.switcher{grid-area:switch;display:flex;gap:8px;padding:8px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.switcher[hidden]{display:none}.switcher button{flex:0 0 auto;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room.mobile{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"bar" "switch" "grid"}.room.mobile .strip{position:fixed;inset:auto 0 0;max-height:70%;z-index:15;display:none;border-left:0;border-top:1px solid var(--line)}.room.mobile.people .strip{display:grid}.room.mobile .grid{padding:0}.room.mobile .grid .tile,.room.mobile .grid.focused .tile,.room.mobile .grid.focused .tile.is-focus{order:0;flex:0 1 auto;width:100%;height:auto;max-height:100%;aspect-ratio:var(--ar, 16 / 9);border-radius:0;border-left:0;border-right:0;cursor:default}.room.mobile .tile figcaption{opacity:1}.room.mobile .tile input[type=range]{width:110px}@media(max-width:820px){.room:not(.mobile){grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"bar" "grid" "strip"}.room:not(.mobile) .strip{max-height:40%;border-left:0;border-top:1px solid var(--line)}}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:20px;z-index:20}.modal .card{width:min(560px,100%);max-height:86vh;overflow-y:auto}.modal code{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#10131a;border:1px solid var(--line);border-radius:6px;padding:6px 8px;display:block;overflow-wrap:anywhere}.modal table{width:100%;border-collapse:collapse;font-size:13px}.modal td{padding:4px 6px;border-top:1px solid var(--line);vertical-align:top}.modal td:first-child{color:var(--dim);white-space:nowrap}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0e0f12d1;color:var(--dim);z-index:10}