:root{color-scheme:dark;--bg: #17171a;--panel: #1f2025;--fg: #ececea;--muted: #9a9a94;--accent: #e65a1a;--border: #33333a;--ok: #3fa66a;--down: #c2543f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}.app{display:grid;grid-template:auto 1fr / 19rem 1fr;grid-template-areas:"header header" "aside main";height:100vh}header{grid-area:header;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--border)}h1{margin:0 .5rem 0 0;font-size:1.1rem;letter-spacing:-.01em}h2{margin:1.25rem 0 .5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}h2:first-child{margin-top:0}.pill{padding:.1rem .6rem;border-radius:999px;border:1px solid var(--border);font-size:.8rem}.pill:before{content:"●";margin-right:.35rem}.pill.ok:before{color:var(--ok)}.pill.down:before{color:var(--down)}.error{color:var(--down)}.muted{color:var(--muted)}aside{grid-area:aside;overflow-y:auto;padding:1rem;background:var(--panel);border-right:1px solid var(--border)}.scenarios{list-style:none;margin:0;padding:0}.scenarios li{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;border-radius:6px}.scenarios li.active{background:#2a2b33;box-shadow:inset 2px 0 0 var(--accent)}.scenarios li span{flex:1;min-width:0}.scenarios small{display:block;color:var(--muted)}form{display:grid;gap:.45rem}label{display:grid;grid-template-columns:1fr 6.5rem;align-items:center;gap:.5rem}input{width:100%;padding:.3rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:inherit;font:inherit}button{padding:.3rem .7rem;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;cursor:pointer}button.quiet{background:none;color:var(--muted);padding:.3rem .4rem}form button{margin-top:.4rem}button:disabled{opacity:.45;cursor:default}.panel+.panel{margin-top:1.5rem}main{grid-area:main;position:relative;min-width:0;min-height:0}.monitor{position:absolute;top:0;right:0;bottom:0;left:0}.monitor canvas{display:block}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0;color:var(--muted);pointer-events:none}.hud{position:absolute;top:1rem;right:1rem;width:20rem;padding:.6rem;background:#1f2025eb;border:1px solid var(--border);border-radius:8px}.hud img{display:block;width:100%;aspect-ratio:4 / 3;background:#000;border-radius:4px}.hud dl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .75rem;margin:.6rem 0 .4rem}.hud dt{color:var(--muted)}.hud dd{margin:0;font-variant-numeric:tabular-nums}.hud p{margin:0;font-size:.8rem}.viewer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--bg)}.viewer-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.viewer-bar input[type=range]{width:14rem;padding:0}.viewer-bar .quiet{margin-left:auto}.viewer-frame{position:relative;align-self:flex-start;max-width:100%;min-height:0}.viewer-frame img{display:block;max-width:100%;max-height:calc(100vh - 9rem)}.viewer-frame svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.open-remote{margin-left:auto}.remote{display:grid;grid-template-rows:1fr auto;height:100vh}.remote-feed{display:grid;place-items:center;min-height:0;background:#000}.remote-feed img{width:100%;height:100%;object-fit:contain}.remote-bar{display:flex;align-items:center;gap:2rem;padding:.75rem 1rem;background:var(--panel);border-top:1px solid var(--border)}.remote-bar dl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .75rem;margin:0}.remote-bar dt{color:var(--muted)}.remote-bar dd{margin:0;font-variant-numeric:tabular-nums}.remote-bar p{margin:0}.remote-pad{display:grid;grid-template-areas:"left forward right . up" "left back right . down";grid-template-columns:repeat(3,4rem) 1rem 4rem;gap:.4rem}.remote-pad button{height:3.2rem;background:#2a2b33;font-size:1.3rem;line-height:1;touch-action:none;-webkit-user-select:none;user-select:none}.remote-pad button[style*=left],.remote-pad button[style*=right]{height:auto}.remote-pad button.held{background:var(--accent)}.remote-pad small{display:block;font-size:.65rem;color:var(--muted)}.remote-pad button.held small{color:#fff}