:root { --paper:#edebe5; --surface:#f8f6f2; --surface2:#e3dfd7; --ink:#1a1917; --muted:#706b63; --faint:#a29d95; --border:#cdc7bd; --border-strong:#b0a99f; --accent:#c2410c; --accent-dim:#fde8dc; --night:#18130f; --night2:#231e19; --night-text:#f0ebe3; --night-muted:#9c958c; --success:#15803d; --error:#b91c1c; color-scheme:light; }
[data-theme="dark"] { --paper:#14100c; --surface:#1e1811; --surface2:#2c251c; --ink:#ece4d8; --muted:#9a9083; --faint:#6b6358; --border:#342c22; --border-strong:#473d30; --accent:#e2571f; --accent-dim:#3a2416; --night:#100c08; --night2:#1c1712; --night-text:#ece4d8; --night-muted:#9a9083; --success:#6bbf85; --error:#e0736b; color-scheme:dark; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font:13px/1.5 "JetBrains Mono",ui-monospace,monospace; -webkit-font-smoothing:antialiased; } button { font:inherit; } .page-shell { width:min(960px, calc(100% - 40px)); margin:0 auto; padding:0 0 38px; }
.topline { height:48px; margin:0 calc((min(960px, calc(100vw - 40px)) - 100vw) / 2); padding:0 max(20px, calc((100vw - 960px) / 2)); display:flex; justify-content:space-between; align-items:center; background:var(--night); color:var(--night-text); }.brand { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; padding-right:16px; border-right:1px solid var(--night2); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.brand svg { opacity:.62; }.brand span { color:var(--night-muted); font-size:10px; letter-spacing:.05em; }.top-actions { display:flex; align-items:center; gap:12px; }.updated, footer { color:var(--muted); letter-spacing:.04em; font-size:10px; }.topline .updated { color:var(--night-muted); }.theme-toggle { width:28px; height:28px; padding:0; color:var(--night-text); background:var(--night2); border:1px solid #332c26; border-radius:3px; cursor:pointer; font-size:14px; }.theme-toggle:hover { border-color:var(--accent); }
.headline { margin-top:20px; padding:22px 24px; display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:5px; position:relative; overflow:hidden; }.headline::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--border-strong); }.headline.operational::before { background:var(--success); }.headline.degraded::before { background:var(--accent); }.headline.outage::before { background:var(--error); }.signal { width:12px; height:12px; flex:0 0 12px; border-radius:50%; background:var(--muted); }.signal.operational { background:var(--success); }.signal.degraded { background:var(--accent); }.signal.outage { background:var(--error); animation:pulse 2s ease-in-out infinite; }.eyebrow { margin:0 0 4px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; } h1 { margin:0; font-size:21px; letter-spacing:-.04em; line-height:1.2; } .lede { margin:5px 0 0; color:var(--muted); font-size:11px; }
.models { margin-top:20px; }.section-heading { display:flex; align-items:center; gap:10px; margin:0 0 9px; color:var(--muted); font-size:12px; font-weight:600; }.section-heading::after { content:""; flex:1; height:1px; background:var(--border); }.section-heading h2 { margin:0; font-size:12px; font-weight:600; }.section-heading span { font-size:10px; font-weight:400; white-space:nowrap; }.model-list { background:var(--surface); border:1px solid var(--border); border-radius:5px; overflow:hidden; }.model { display:grid; grid-template-columns:minmax(180px,1.15fr) minmax(118px,.8fr) minmax(160px,1fr) 100px 95px; align-items:center; gap:14px; min-height:64px; padding:0 17px; border-bottom:1px solid var(--border); }.model:last-child { border-bottom:0; }.model:hover { background:var(--surface2); }.model-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:12px; font-weight:600; }.model-status { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }.dot { width:6px; height:6px; border-radius:50%; background:var(--muted); }.operational .dot { background:var(--success); }.degraded .dot { background:var(--accent); }.outage .dot { background:var(--error); }.metric { text-align:right; font-variant-numeric:tabular-nums; }.metric b { display:block; font-size:12px; font-weight:600; }.metric small { display:block; margin-top:1px; color:var(--muted); font-size:9px; }.pulse { display:grid; grid-template-columns:repeat(24,1fr); gap:2px; }.pulse i { height:13px; background:var(--surface2); border-radius:1px; }.pulse i.ok { background:color-mix(in srgb,var(--success) 65%,var(--surface)); }.pulse i.warn { background:color-mix(in srgb,var(--accent) 65%,var(--surface)); }.pulse i.bad { background:color-mix(in srgb,var(--error) 65%,var(--surface)); }.empty { padding:25px 17px; color:var(--muted); font-size:11px; } footer { padding:17px 2px 0; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.28; } } @media (max-width:760px) { .model { grid-template-columns:1fr auto; gap:7px 12px; padding:13px 14px; min-height:0; }.model-status { grid-column:1; }.pulse { grid-column:1 / -1; grid-row:3; }.metric { grid-column:2; grid-row:1; }.metric:nth-of-type(2) { grid-row:2; }.metric small { display:none; } }
@media (max-width:520px) { .page-shell { width:calc(100% - 28px); }.topline { margin:0 -14px; padding:0 14px; }.updated { font-size:9px; }.headline { padding:18px; }.headline h1 { font-size:18px; }.brand { padding-right:0; border:0; }.brand span { display:none; } }
@media (prefers-reduced-motion:reduce) { .signal.outage { animation:none; } }

@media (min-width:761px) {
  .model { grid-template-columns:minmax(180px,1.15fr) minmax(118px,.8fr) minmax(160px,1fr) 112px 142px; }
  .metric small { white-space:nowrap; }
}