:root {
  color-scheme: dark;
  --ink: #071014; --panel: #0d1b20; --raised: #11252b; --grid: #19343d;
  --text: #d8e6e3; --muted: #789096; --mint: #67d6b4; --amber: #f2b45f;
  --coral: #f06a6a; --blue: #79a7ff;
  font-family: "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--text); }
button, summary { font: inherit; }
.masthead { min-height: 76px; display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; padding: 13px clamp(16px,3vw,42px); border-bottom: 1px solid var(--grid); background: #09151a; }
.identity { display: flex; align-items: center; gap: 13px; }
.identity h1 { margin: 0; font-size: 27px; letter-spacing: -.04em; line-height: 1; }
.identity p, .section-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.signal-mark { width: 28px; height: 28px; border: 1px solid var(--mint); clip-path: polygon(0 0,100% 0,100% 72%,72% 72%,72% 100%,0 100%); position: relative; }
.signal-mark::after { content:""; position:absolute; left:5px; right:5px; top:13px; height:1px; background:var(--mint); box-shadow: 6px -5px 0 -0.2px var(--mint), 12px 3px 0 -0.2px var(--mint); }
.stream-state { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent); }
body[data-stream="live"] .pulse { background: var(--mint); box-shadow: 0 0 0 3px color-mix(in srgb,var(--mint) 18%,transparent); }
body[data-stream="degraded"] .pulse { background: var(--coral); }
button { border: 1px solid var(--grid); color: var(--text); background: transparent; padding: 8px 13px; cursor: pointer; }
button:hover, button:focus-visible { border-color: var(--mint); outline: none; }
main { padding: 0 clamp(16px,3vw,42px) 48px; }
.telemetry-strip { min-height: 94px; display: grid; grid-template-columns: repeat(3,minmax(120px,190px)) 1fr; gap: 1px; border-bottom: 1px solid var(--grid); align-items: stretch; }
.telemetry-strip > div:not(.trace) { display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--grid); }
.telemetry-strip span { color:var(--muted); font-size:12px; }
.telemetry-strip strong { font-family: Menlo,Consolas,monospace; font-size:14px; margin-top:4px; }
.trace { min-width: 150px; align-self:center; height:44px; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; background: repeating-linear-gradient(90deg,transparent 0 29px,var(--grid) 30px), repeating-linear-gradient(0deg,transparent 0 14px,var(--grid) 15px); }
.trace i { width:18%; height:1px; background:var(--mint); position:relative; }
.trace i:nth-child(2)::before,.trace i:nth-child(4)::before { content:""; position:absolute; right:20%; bottom:0; width:18px; height:18px; border-left:1px solid var(--mint); border-top:1px solid var(--mint); transform:skewY(-48deg); }
.error-banner { border-left: 3px solid var(--coral); background:#29181b; margin:14px 0 0; padding:10px 13px; color:#ffd5d5; }
.primary-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(280px,.75fr); gap:18px; padding-top:22px; }
.service-panel,.stream-panel,.charts-panel,.timeline-panel { background:var(--panel); border-top:2px solid var(--grid); }
.section-head { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 15px; border-bottom:1px solid var(--grid); }
.section-head h2 { font-size:18px; margin:0; letter-spacing:-.02em; }
.legend { font-size:11px; display:flex; align-items:center; gap:5px; color:var(--muted); }
.legend i { width:6px; height:6px; background:var(--mint); margin-left:7px; }.legend i:nth-of-type(2){background:var(--amber)}.legend i:nth-of-type(3){background:var(--coral)}
.services { display:flex; flex-direction:column; }
.service-row { display:grid; grid-template-columns:minmax(90px,1.2fr) 72px repeat(6,minmax(66px,1fr)); gap:8px; align-items:center; width:100%; min-height:55px; border:0; border-bottom:1px solid var(--grid); border-left:3px solid var(--mint); padding:7px 11px; text-align:left; background:transparent; }
.service-row.warning{border-left-color:var(--amber)}.service-row.critical{border-left-color:var(--coral)}.service-row.selected{background:var(--raised)}.service-row.stale{opacity:.5}
.service-name { font-weight:700; font-size:15px; }.state-word{font-size:11px;color:var(--mint)}.warning .state-word{color:var(--amber)}.critical .state-word{color:var(--coral)}
.service-row b,.service-row small { display:block; font-family:Menlo,Consolas,monospace; }.service-row b{font-size:13px}.service-row small{font-size:9px;color:var(--muted);margin-top:2px}
.stream-panel { min-width:0; }.packet-log { min-height:126px; padding:8px 14px; border-bottom:1px solid var(--grid); font-family:Menlo,Consolas,monospace; font-size:11px; }
.packet-log>div { display:grid;grid-template-columns:1fr auto auto auto;gap:8px;padding:7px 0;border-bottom:1px dotted var(--grid)}.packet-log span{color:var(--mint)}
details summary { padding:11px 14px; color:var(--muted); cursor:pointer; }pre { margin:0;padding:14px;max-height:390px;overflow:auto;background:#081216;color:#a7c9c2;font:11px/1.6 Menlo,Consolas,monospace;white-space:pre-wrap; }
.charts-panel,.timeline-panel { margin-top:18px; }.charts { display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grid)}figure{margin:0;padding:12px 14px;background:var(--panel)}figcaption{font-size:13px;font-weight:650}figcaption span{float:right;color:var(--muted);font:10px Menlo,monospace}canvas{display:block;width:100%;height:135px;margin-top:8px}
.timeline { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr); }.event { display:grid;grid-template-columns:72px 1fr;gap:8px;padding:13px 15px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid)}.event time{font:10px Menlo,monospace;color:var(--muted)}.event strong,.event span{display:block}.event strong{font-size:13px}.event span{font-size:11px;color:var(--muted);margin-top:3px}.event.incident{box-shadow:inset 3px 0 var(--coral)}.event.rising{box-shadow:inset 3px 0 var(--amber)}.event.recovery{box-shadow:inset 3px 0 var(--mint)}
.empty { color:var(--muted);font-size:13px;padding:13px 15px;margin:0; }
@media (max-width:1050px){.primary-grid{grid-template-columns:1fr}.service-row{grid-template-columns:minmax(100px,1.2fr) 72px repeat(3,1fr)}.service-row span:nth-child(n+6){display:none}.timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.masthead{grid-template-columns:1fr auto;gap:10px}.stream-state{grid-row:2}.telemetry-strip{grid-template-columns:repeat(2,1fr)}.trace{display:none}.charts{grid-template-columns:1fr}.service-row{grid-template-columns:1fr 65px repeat(2,65px)}.service-row span:nth-child(n+5){display:none}.timeline{grid-template-columns:1fr}.legend{display:none}}
@media (prefers-reduced-motion:no-preference){body[data-stream="connecting"] .pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}}