:root {
  --ink:#0E1319; --surface:#171E27; --raised:#202A36; --line:#2C3846;
  --text:#DDE4EA; --muted:#8798A6; --signal:#E0A356;
  --good:#5FB08A; --bad:#D2735F; --band:#2C3846;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ink); color:var(--text);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
}
a { color:var(--signal); text-decoration:none; }

header {
  position:sticky; top:0; z-index:10; background:var(--ink);
  border-bottom:1px solid var(--line);
  padding:calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;
  display:flex; align-items:center; gap:.75rem;
}
header h1 { font-size:1rem; font-weight:600; margin:0; letter-spacing:-.01em; flex:1; }
header .meta { color:var(--muted); font-size:.75rem; }

nav { display:flex; gap:.25rem; overflow-x:auto; padding:.5rem 1rem; border-bottom:1px solid var(--line);
      scrollbar-width:none; }
nav::-webkit-scrollbar { display:none; }
nav a {
  padding:.4rem .75rem; border-radius:999px; font-size:.8125rem; white-space:nowrap;
  color:var(--muted); background:var(--surface);
}
nav a.on { background:var(--signal); color:var(--ink); font-weight:600; }

main { padding:1rem; max-width:56rem; margin:0 auto; }
.card { background:var(--surface); border-radius:12px; padding:1rem; margin-bottom:.875rem; }
.card h2 { font-size:.9375rem; margin:0 0 .125rem; font-weight:600; }
.card .sub { color:var(--muted); font-size:.8125rem; margin:0 0 .75rem; }
.card .note { color:var(--muted); font-size:.75rem; margin-top:.5rem; line-height:1.45; }

.pill { display:inline-block; padding:.1rem .45rem; border-radius:999px; font-size:.6875rem;
        font-weight:600; vertical-align:middle; }
.pill.away { background:rgba(210,115,95,.18); color:var(--bad); }
.pill.toward { background:rgba(95,176,138,.18); color:var(--good); }
.pill.within { background:var(--raised); color:var(--muted); }

.ranges { display:flex; gap:.25rem; margin-bottom:.75rem; flex-wrap:wrap; }
.ranges button {
  background:var(--raised); color:var(--muted); border:0; border-radius:999px;
  padding:.3rem .7rem; font-size:.75rem; font-family:inherit; cursor:pointer;
}
.ranges button.on { background:var(--signal); color:var(--ink); font-weight:600; }

.chart { width:100%; touch-action:pan-y; display:block; }
.chart .band { fill:var(--band); opacity:.5; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.chart .axis { fill:var(--muted); font-size:10px; }
.chart .ln { fill:none; stroke:var(--signal); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .dot { fill:var(--signal); }
.chart .cursor { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.chart .hit { fill:transparent; }

.readout { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
           font-size:.8125rem; color:var(--muted); min-height:1.25rem; margin-top:.375rem; }
.readout b { color:var(--text); font-size:1rem; font-weight:600; }

.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.5rem; }
.stat { background:var(--raised); border-radius:8px; padding:.625rem .75rem; }
.stat .k { color:var(--muted); font-size:.6875rem; text-transform:uppercase; letter-spacing:.04em; }
.stat .v { font-size:1.25rem; font-weight:600; margin-top:.125rem; }
.stat .d { color:var(--muted); font-size:.75rem; }

.empty { color:var(--muted); font-size:.875rem; padding:1.5rem 0; text-align:center; }
.err { color:var(--bad); font-size:.875rem; }
.skel { height:120px; background:linear-gradient(90deg,var(--raised),var(--surface),var(--raised));
        background-size:200% 100%; animation:sh 1.2s linear infinite; border-radius:8px; }
@keyframes sh { to { background-position:-200% 0; } }
footer { color:var(--muted); font-size:.75rem; text-align:center; padding:1rem 0 2rem; }