:root{color-scheme:dark;--ink:#e9f6ff;--muted:#8fa6b4;--cyan:#61dafb;--yellow:#ffcf5c;--red:#ff6685;--green:#8cff98;--panel:#0b1720}*{box-sizing:border-box}body{margin:0;background:#03080d;color:var(--ink);font:14px ui-monospace,SFMono-Regular,Consolas,monospace;min-height:100vh;background-image:radial-gradient(circle at 30% 10%,#103245 0,transparent 35%)}header,main,footer{max-width:1500px;margin:auto}header{display:flex;justify-content:space-between;align-items:end;padding:28px 28px 14px}h1{font-size:clamp(27px,4vw,54px);margin:3px 0}h1 span{color:var(--cyan)}p,small{color:var(--muted)}.eyebrow{letter-spacing:.15em;color:var(--yellow)}#statusDot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px currentColor}.freshness{text-align:right}.freshness strong{display:block;font-size:25px;color:var(--cyan)}main{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);gap:16px;padding:0 28px;align-items:start}.stage,aside section{background:#071119cc;border:1px solid #183747;border-radius:10px;overflow:hidden}#chart{width:100%;height:auto;display:block}#fieldViewport{overflow:auto;-webkit-overflow-scrolling:touch;max-height:min(70vh,900px);position:relative;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;background:#050d13}#fieldViewport:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}#field{display:block;height:auto;width:var(--field-zoom,100%);max-width:none}.controls{display:flex;gap:12px;align-items:center;padding:12px;flex-wrap:wrap;border-top:1px solid #183747}.controls #connection{margin-left:auto;color:var(--muted)}.zoom{display:flex;gap:5px}.zoom button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:#123240}button,select{background:#102633;color:var(--ink);border:1px solid #285064;padding:8px 12px;border-radius:5px}button:disabled{opacity:.45}aside{display:flex;flex-direction:column;gap:12px}aside section{padding:14px}h2{margin:0 0 10px;font-size:13px;letter-spacing:.1em}h2 b{color:var(--cyan)}h2 i{color:var(--yellow);font-style:normal}ul{margin:0;padding-left:19px;color:var(--muted);line-height:1.6}.stats #stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{padding:9px;background:#0d202b}.metric strong{display:block;font-size:22px;color:#fff}.room{display:grid;grid-template-columns:1fr auto;gap:3px;padding:7px 0;border-bottom:1px solid #173441}.room small{grid-column:1/3}.state-live{color:var(--green)}.state-delayed,.state-connecting{color:var(--yellow)}.state-stale{color:#ff9c5a}.state-offline{color:var(--red)}.rule{border-color:#66541d}.warning{border-color:#7d3f45}.warning div{color:#ff9cae;font-size:12px;line-height:1.5}footer{padding:18px 28px 30px;color:#718897}@media(max-width:900px){main{grid-template-columns:1fr}header{align-items:start;gap:10px;flex-direction:column}.freshness{text-align:left}.controls #connection{margin-left:0;width:100%}}@media(orientation:landscape) and (max-height:500px){main{grid-template-columns:1fr}aside{order:2}#fieldViewport{max-height:82vh}header{padding-top:14px}.freshness{text-align:left}}