:root{--base: #1b2430;--surface: #232e3c;--raised: #2a3648;--line: #2e3b4b;--text: #e6eaf0;--muted: #8a97a8;--air: #f2a43a;--sync: #4fc3d9;--down: #e0616b;--ready: #6bc08a;--sans: "IBM Plex Sans", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}.shell{display:grid;grid-template-columns:208px 1fr;min-height:100vh}.rail{border-right:1px solid var(--line);padding:20px 0;display:flex;flex-direction:column;gap:2px}.rail h1{font-size:15px;font-weight:600;margin:0 20px 20px;letter-spacing:-.01em}.rail a{color:var(--muted);text-decoration:none;padding:8px 20px;border-left:2px solid transparent}.rail a:hover{color:var(--text)}.rail a.on{color:var(--text);border-left-color:var(--air);background:var(--surface)}main{padding:28px 32px 64px;max-width:1180px}.head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}.head h2{font-size:22px;font-weight:600;margin:0;letter-spacing:-.015em}.head p{color:var(--muted);margin:4px 0 0;font-size:14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.screen{aspect-ratio:16 / 9;background:var(--surface);border:1px solid var(--line);border-top-width:3px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;cursor:pointer}.screen:hover{background:var(--raised)}.screen:focus-visible{outline:2px solid var(--sync);outline-offset:2px}.screen[data-state=ONLINE]{border-top-color:var(--air)}.screen[data-state=OFFLINE]{border-top-color:var(--down)}.screen[data-state=PENDING]{border-top-color:var(--muted)}.screen[data-state=STALE]{border-top-color:var(--sync)}.screen .label{font-weight:500}.screen .group{color:var(--muted);font-size:13px}.screen .meta{font-family:var(--mono);font-size:12px;color:var(--muted)}.strip{border:1px solid var(--line);background:var(--surface);padding:16px}.ruler{position:relative;height:18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted)}.ruler span{position:absolute;transform:translate(-50%)}.lane{position:relative;height:30px;margin-top:6px}.bar{position:absolute;height:100%;background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--sync);padding:0 8px;font-size:13px;line-height:28px;overflow:hidden;white-space:nowrap}.bar.live{border-left-color:var(--air);background:#33405480}.playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--air);pointer-events:none}.btn{background:var(--raised);border:1px solid var(--line);padding:7px 14px;cursor:pointer}.btn:hover{border-color:var(--muted)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--air);border-color:var(--air);color:#1b2430;font-weight:500}.btn.primary:hover{filter:brightness(1.08)}input[type=text],input[type=number],input[type=time],select{background:var(--base);border:1px solid var(--line);padding:7px 10px;min-width:0}input:focus,select:focus{outline:1px solid var(--sync)}table{width:100%;border-collapse:collapse}th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:6px 10px;border-bottom:1px solid var(--line)}td{padding:10px;border-bottom:1px solid var(--line)}td.num{font-family:var(--mono);font-size:13px;color:var(--muted)}.row{display:flex;gap:10px;align-items:center}.stack{display:flex;flex-direction:column;gap:14px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.empty{border:1px dashed var(--line);padding:40px 24px;text-align:center;color:var(--muted)}.bar-progress{height:3px;background:var(--line)}.bar-progress>div{height:100%;background:var(--sync);transition:width .2s}@media (prefers-reduced-motion: reduce){*{transition:none!important}}@media (max-width: 720px){.shell{grid-template-columns:1fr}.rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.rail h1{display:none}.rail a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap}.rail a.on{border-left:0;border-bottom-color:var(--air)}main{padding:20px 16px 48px}}
