:root{
  --c-ink-950:#070908; --c-ink-900:#0B0E0C; --c-ink-800:#121613; --c-ink-700:#1A201C;
  --c-ink-400:#556057; --c-ink-300:#8A968C; --c-ink-200:#C2CBC4; --c-ink-100:#E8ECE9;
  --c-green-300:#86F2AC; --c-green-400:#4DEB88; --c-green-500:#1FE06B; --c-green-wash:#0C2A18;
  --c-gold-500:#F5C518; --c-gold-600:#E0B00A; --c-gold-wash:#2A2206;
  --c-red-500:#FF4D4D; --c-red-wash:#2E1212;
  --a-white-06:rgba(232,236,233,0.06); --a-white-10:rgba(232,236,233,0.10);
  --a-white-16:rgba(232,236,233,0.16); --a-green-24:rgba(31,224,107,0.24);
  --a-green-45:rgba(31,224,107,0.45);
  --bg:var(--c-ink-950); --surface-1:var(--c-ink-900);
  --border:var(--a-white-10); --border-strong:var(--a-white-16);
  --text-primary:var(--c-ink-100); --text-secondary:var(--c-ink-300); --text-muted:var(--c-ink-400);
  --primary:var(--c-green-500); --up:var(--c-green-500); --down:var(--c-red-500); --warn:var(--c-gold-500);
  --font-body:"Archivo",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-md:14px; --r-lg:18px; --r-pill:999px;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--c-green-400)}
*{scrollbar-color:var(--c-ink-700) transparent;scrollbar-width:thin}

.wrap{min-height:100vh;display:flex;flex-direction:column;gap:clamp(16px,3vw,26px);
      padding:clamp(14px,3.5vw,32px);max-width:1180px;margin:0 auto}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;
        letter-spacing:.06em;color:var(--text-secondary)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:16px;height:3px;border-radius:2px}
.chartcard{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
           padding:18px 14px 14px;display:flex;flex-direction:column;gap:8px}
.plot{position:relative;width:100%;height:clamp(230px,42vw,330px);--ytick-gutter:52px}
.plot svg{position:absolute;top:0;left:0;height:100%;
  width:calc(100% - var(--ytick-gutter));overflow:visible}
.charttip{position:absolute;top:6px;z-index:3;pointer-events:none;background:var(--c-ink-800);
  border:1px solid var(--border);border-radius:var(--r-md);padding:7px 9px;font-size:12px;
  white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.ytick{position:absolute;right:2px;transform:translateY(-50%);font-family:var(--font-mono);
       font-size:10px;letter-spacing:.06em;color:var(--text-muted);padding:0 3px}
.xaxis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;
       letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
       padding:0 2px;margin-right:var(--ytick-gutter,52px)}
.chartfoot{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--a-white-06);
           padding-top:12px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
           font-size:13px;color:var(--text-secondary)}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.overline{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
          text-transform:uppercase;color:var(--text-secondary)}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--text-primary)}

header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wordmark{font-size:clamp(30px,7vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1;
          color:var(--c-gold-600);align-self:center;font-style:italic;padding-right:14px}

.subtitle{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.18em;
          text-transform:uppercase;color:var(--c-green-400);align-self:center;
          padding-left:14px;border-left:1px solid var(--a-white-16)}
.pills{display:flex;align-items:center;gap:6px;align-self:center;flex-wrap:wrap}
.pill{font-family:var(--font-mono);font-size:10px;letter-spacing:.10em;text-transform:uppercase;
      padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;min-height:28px;line-height:1;
      border:1px solid var(--a-white-16);color:var(--text-muted);background:transparent;
      transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.pill:hover{border-color:var(--a-green-45);color:var(--c-green-400)}
.pill.on{border-color:var(--a-green-45);color:var(--primary);background:var(--c-green-wash)}
.pill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,224,107,0.40)}
.right{margin-left:auto;display:flex;align-items:center;align-self:center;gap:10px;flex-wrap:wrap}

.badge{display:inline-flex;align-items:center;gap:7px;align-self:center;font-family:var(--font-mono);
       font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
       color:var(--text-secondary);padding-left:4px}
.badge .dot{width:7px;height:7px;border-radius:var(--r-pill);background:currentColor;
            box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.badge.live{color:var(--primary)}
.badge.sim{color:var(--warn)}
.badge.bad{color:var(--down)}

.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);
      font-size:10px;letter-spacing:.10em;text-transform:uppercase;padding:3px 9px;
      border-radius:var(--r-pill);border:1px solid var(--a-white-16);
      color:var(--text-secondary);background:var(--c-ink-800)}
.chip.ok{border-color:var(--a-green-45);color:var(--primary);background:var(--c-green-wash)}
.chip.warn{border-color:rgba(224,168,31,.45);color:var(--warn);background:var(--c-gold-wash)}
.chip.bad{border-color:rgba(255,77,77,.45);color:var(--down);background:var(--c-red-wash)}
.navlink{font-family:var(--font-mono);font-size:10px;letter-spacing:.10em;text-transform:uppercase;
         padding:5px 11px;border-radius:var(--r-pill);min-height:28px;line-height:1;
         display:inline-flex;align-items:center;border:1px solid var(--a-white-16);
         color:var(--text-secondary);background:var(--c-ink-900)}
.navlink:hover{border-color:var(--a-green-45);color:var(--primary)}

.navlink.on{border-color:var(--a-green-45);color:var(--primary);background:var(--c-green-wash)}
#clock{font-family:var(--font-mono);font-size:12px;letter-spacing:.10em;text-transform:uppercase;
       color:var(--text-muted)}
#clock.stale{color:var(--warn)} #clock.dead{color:var(--down)}

section{display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
      padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.card.glow{border-color:var(--a-green-24);gap:12px;
           box-shadow:0 0 0 1px rgba(31,224,107,.10),0 0 40px -18px rgba(31,224,107,.55)}
.card.glow.short{border-color:rgba(255,77,77,.24);
                 box-shadow:0 0 0 1px rgba(255,77,77,.10),0 0 40px -18px rgba(255,77,77,.55)}
.card.glow.none{border-color:var(--border);box-shadow:none}
.big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:23px;font-weight:700;
     line-height:1.05}
.sub{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}
.legpair{display:flex;flex-direction:column;gap:3px}
.legpair .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
            color:var(--text-secondary)}
.legpair .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;
            color:var(--text-primary)}

.site-footer{margin-top:var(--space-6);padding:var(--space-6) 0 var(--space-4);
             border-top:1px solid var(--a-white-06);display:flex;gap:16px;
             flex-wrap:wrap;align-items:baseline;
             font-family:var(--font-mono);font-size:11px;letter-spacing:.10em;
             text-transform:uppercase;color:var(--text-muted)}
.site-footer a{color:var(--text-secondary);border-bottom:1px dotted var(--c-ink-500);
               padding-bottom:1px}
.site-footer a:hover{color:var(--primary);border-bottom-color:var(--a-green-45)}
.site-footer .sep{color:var(--c-ink-600)}