:root {
  --bg: #0b0e12;
  --panel: #0f1318;
  --line: #1f262e;
  --grid: #171c22;
  --ink: #d7dde4;
  --muted: #8b949e;
  --dim: #4b535c;
  --term: #7ee787;          /* terminal chrome, never data */
  --pos: #7ee787;
  --neg: #ff7b72;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #f85149;

  /* data hues — validated for CVD separation on the dark surface */
  --act: #2ea043;
  --food: #3b8eea;
  --body: #c9801f;
  --heart: #e8457f;
  --sleep: #8570f0;
  --deep: #8570f0;
  --core: #2ea043;
  --rem: #3b8eea;
  --awake: #c9801f;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(126, 231, 135, .07), transparent 60%),
    radial-gradient(circle at 1px 1px, #161b22 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 13px/1.55 var(--mono);
  font-feature-settings: "zero", "ss01";
}
body::before {               /* faint scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,.012) 2px 3px);
}
a { color: var(--term); text-decoration: none; border-bottom: 1px dotted currentColor; }
.dim { color: var(--dim); }
.pos { color: var(--pos); } .neg { color: var(--neg); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 40px; }

/* ── header ─────────────────────────────── */
.top { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; margin-bottom: 18px; }
.logo { margin: 0; font: 700 26px/1 var(--mono); letter-spacing: -.02em; color: var(--term); text-shadow: 0 0 10px rgba(126, 231, 135, .55), 0 0 28px rgba(126, 231, 135, .2); }
.hd { display: grid; gap: 3px; padding-bottom: 2px; }
.prompt { font-size: 15px; }
.prompt .u { color: var(--term); } .prompt .h { color: #79c0ff; }
.cursor { color: var(--term); animation: blink 1.1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.meta { color: var(--muted); font-size: 12px; }
.meta b { color: var(--ink); font-weight: 500; }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--term); margin-right: 6px; box-shadow: 0 0 8px var(--term); }
.live.stale { background: var(--awake); box-shadow: none; }

.bar-sticky {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  margin: 0 -16px 20px; padding: 9px 16px; background: rgba(11, 14, 18, .82); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.jump { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.jump a { border: 0; color: var(--muted); padding: 3px 8px; border-radius: 4px; white-space: nowrap; font-size: 12px; }
.jump a::before { content: "["; color: var(--dim); } .jump a::after { content: "]"; color: var(--dim); }
.jump a:hover, .jump a.on { color: var(--term); background: rgba(126, 231, 135, .07); }
.ranges { display: flex; gap: 6px; }
.ranges button {
  font: inherit; color: var(--muted); background: transparent; border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 4px; cursor: pointer;
}
.ranges button:hover { color: var(--ink); border-color: var(--dim); }
.ranges button.on { color: var(--bg); background: var(--term); border-color: var(--term); box-shadow: 0 0 12px rgba(126, 231, 135, .35); }

/* ── panels ─────────────────────────────── */
.panel { border: 1px solid var(--line); background: linear-gradient(180deg, #10151b, var(--panel) 120px); border-radius: 6px; padding: 18px 16px 16px; margin: 0 0 22px; position: relative; scroll-margin-top: 64px; }
.panel::before, .panel::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--term); opacity: .5; pointer-events: none; }
.panel::before { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.panel::after { left: -1px; bottom: -1px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .panel { animation: boot .5s cubic-bezier(.2, .7, .2, 1) both; }
  .panel:nth-of-type(2) { animation-delay: .05s; } .panel:nth-of-type(3) { animation-delay: .1s; }
  .panel:nth-of-type(4) { animation-delay: .15s; } .panel:nth-of-type(n+5) { animation-delay: .2s; }
}
@keyframes boot { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.panel h2 {
  position: absolute; top: -10px; left: 12px; right: 12px; margin: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; pointer-events: none;
}
.panel h2 > span { background: var(--bg); padding: 0 8px; color: var(--term); }
.panel h2 > span::before { content: "┤ "; color: var(--dim); } .panel h2 > span::after { content: " ├"; color: var(--dim); }
.panel h2 .legend { background: var(--bg); padding: 0 8px; color: var(--muted); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px; pointer-events: auto; }
.panel h3 { font-size: 12px; font-weight: 400; color: var(--muted); margin: 20px 0 10px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; }
.sw.act { background: var(--act); } .sw.deep { background: var(--deep); } .sw.core { background: var(--core); }
.sw.rem { background: var(--rem); } .sw.awake { background: var(--awake); }
.sw.sq { border-radius: 1px; }
.legend-in { font-style: normal; color: var(--muted); margin-left: 6px; }
.legend-in .sw { margin-left: 6px; }
.note { color: var(--muted); font-size: 12px; margin: 4px 0 12px; }

/* ── now tiles ──────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-top: 4px; }
.tile { border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px 8px; position: relative; overflow: hidden; background: var(--bg); transition: border-color .15s, box-shadow .15s, transform .15s; }
.tile:hover { border-color: color-mix(in oklab, var(--c) 60%, var(--line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 25%, transparent), 0 8px 24px -12px var(--c); transform: translateY(-1px); }
.tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 60px at 100% 0, color-mix(in oklab, var(--c) 14%, transparent), transparent); pointer-events: none; }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c, var(--dim)); }
.tile .k { color: var(--muted); font-size: 11px; text-transform: lowercase; }
.tile .v { font-size: 26px; font-weight: 500; line-height: 1.2; margin: 2px 0 0; letter-spacing: -.02em; text-shadow: 0 0 18px color-mix(in oklab, var(--c) 45%, transparent); }
.tile .v small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; letter-spacing: 0; }
.tile .d { font-size: 11px; color: var(--muted); }
.tile .spark { font-size: 12px; letter-spacing: -1px; color: color-mix(in oklab, var(--c) 70%, var(--muted)); margin-top: 4px; white-space: nowrap; overflow: hidden; }
.tile .none { color: var(--dim); }

/* ── charts ─────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 10px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.chart { position: relative; min-height: 150px; margin-top: 6px; }
.chart.tall { min-height: 190px; }
.chart .ttl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.chart .ttl b { color: var(--ink); font-weight: 500; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .empty { color: var(--dim); font-size: 12px; padding: 40px 0; text-align: center; border: 1px dashed var(--line); border-radius: 4px; }
.ax text { fill: var(--dim); font: 10px var(--mono); }
.ax line { stroke: var(--grid); }
.xh { stroke: var(--dim); stroke-dasharray: 2 3; }

.heat { overflow-x: auto; padding: 6px 0 2px; }
.heat svg { display: block; }

/* ── meals ──────────────────────────────── */
.meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.meal { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--bg); transition: border-color .15s, transform .15s; }
.meal:hover { border-color: var(--food); transform: translateY(-2px); }
.meal .img { aspect-ratio: 4/3; background: #10151b center/cover no-repeat; filter: saturate(.9) contrast(1.02); }
.meal .img.noimg { display: grid; place-items: center; color: var(--dim); font-size: 22px; }
.meal .b { padding: 7px 9px 8px; }
.meal .n { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal .m { color: var(--muted); font-size: 11px; }
.meal .x { color: var(--food); font-size: 11px; }
.meal .est { color: var(--dim); }

pre.log, pre.ins { margin: 0; font: 12px/1.7 var(--mono); color: var(--muted); white-space: pre; overflow-x: auto; }
pre.log .t { color: var(--dim); } pre.log .n { color: var(--ink); }
pre.ins .bar { color: var(--ink); } pre.ins .k { color: var(--ink); }

/* ── tables ─────────────────────────────── */
.tablewrap { overflow-x: auto; margin-top: 12px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
table.t th { text-align: right; color: var(--dim); font-weight: 400; padding: 4px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { text-align: right; padding: 4px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.t th:first-child, table.t td:first-child, table.t td.l, table.t th.l { text-align: left; }
table.t tr:hover td { background: #131920; }
table.t .up { color: var(--pos); } table.t .down { color: var(--neg); }

/* ── tooltip ────────────────────────────── */
.tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .08s;
  background: #161b22; border: 1px solid var(--dim); border-radius: 4px; padding: 6px 9px;
  font: 11px/1.5 var(--mono); color: var(--ink); white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.tip.on { opacity: 1; }
.tip .d { color: var(--muted); }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

.foot a { border: 0; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; color: var(--dim); font-size: 11px; margin-top: 26px; }
.foot a { color: var(--muted); }

/* ── inbody ─────────────────────────────── */
.scanpick { flex-wrap: wrap; margin: 2px 0 8px; }
.ib { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 26px; align-items: start; margin-bottom: 8px; }
@media (max-width: 760px) { .ib { grid-template-columns: 1fr; } }
.ib-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fig { border: 1px solid var(--line); border-radius: 5px; background:
  linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 16px,
  linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 16px 100%, var(--bg); padding: 8px 6px 4px; }
.fig .ft { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 0 4px; }
.fig .ft b { color: var(--ink); font-weight: 500; }
.fig svg { display: block; width: 100%; height: auto; }
.fig .seg { stroke: var(--bg); stroke-width: 2; transition: filter .12s; cursor: default; }
.fig .seg:hover { filter: brightness(1.25); }
.fig .head { fill: none; stroke: var(--dim); stroke-width: 1.5; }
.fig .lbl { font: 10px var(--mono); fill: var(--ink); }
.fig .lbl.sub { fill: var(--muted); }
.fig .lbl.over { fill: var(--neg); } .fig .lbl.under { fill: #79c0ff; }
.fig .side { font: 9px var(--mono); fill: var(--dim); letter-spacing: .1em; }
.fig .scale { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim); padding: 2px 4px 2px; }
.fig .scale i { flex: 1; height: 5px; border-radius: 3px; }
.ib-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ib-stats .st { border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; }
.ib-stats .k { font-size: 11px; color: var(--muted); }
.ib-stats .v { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.ib-stats .v small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.ib-stats .d { font-size: 11px; color: var(--dim); }
.ib-stats .score { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.ib-stats .bar { font-size: 12px; letter-spacing: -1px; color: var(--body); }
.ib-stats .bar span { color: var(--dim); }

@media (max-width: 560px) {
  .logo { font-size: 20px; }
  .bar-sticky { justify-content: flex-start; }
}

/* ── now: heroes, minis, rail ───────────── */
.now { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-top: 4px; }
@media (max-width: 980px) { .now { grid-template-columns: 1fr; } }
.heroes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .hrow { gap: 6px; } .gauge { width: 58px; } .hero .v { font-size: 24px; } }
.hero, .mini { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.hero:hover, .mini:hover { border-color: color-mix(in oklab, var(--c) 55%, var(--line)); box-shadow: 0 10px 30px -18px var(--c); }
.hero { padding: 12px 14px 0; display: flex; flex-direction: column; }
.hero .k, .mini .k { color: var(--muted); font-size: 11px; }
.ic { color: var(--c); margin-right: 6px; display: inline-block; width: 1em; text-align: center; }
.hrow { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; min-width: 0; }
.hrow > div { min-width: 0; }
.gauge { width: 60px; flex: none; }
.gauge text { fill: var(--muted); font: 10px var(--mono); }
.hero .v { font-size: clamp(20px, 2.1vw, 28px); white-space: nowrap; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; text-shadow: 0 0 18px color-mix(in oklab, var(--c) 40%, transparent); }
.hero .v small, .mini .v small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 3px; letter-spacing: 0; }
.hero .d { font-size: 11px; color: var(--dim); min-height: 1.5em; }
.aspark { display: block; width: calc(100% + 28px); height: 44px; margin: 6px -14px 0; }
.st { font-size: 11px; color: var(--muted); white-space: nowrap; }
.st.good { color: var(--good); } .st.watch { color: var(--warn); } .st.off { color: var(--bad); }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.mini { padding: 9px 12px 6px; }
.mini .mh { display: flex; justify-content: space-between; gap: 6px; }
.mini .v { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 2px 0 2px; }
.mini .aspark { width: 100%; height: 26px; margin: 0; }
.ends { display: flex; justify-content: space-between; font-size: 9px; color: var(--dim); margin-top: 1px; }
.rail { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 12px 14px; align-self: start; }
.rh { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 10px; }
.rh b { color: var(--term); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { font-size: 10.5px; border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; color: var(--muted); }
.chip::before { content: "●"; margin-right: 5px; }
.chip.off::before { color: var(--bad); } .chip.watch::before { color: var(--warn); } .chip.good::before { color: var(--good); }
.fi { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 10px 0; border-top: 1px dashed var(--line); }
.fic { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); }
.fi.good .fic { color: var(--good); border-color: color-mix(in oklab, var(--good) 40%, var(--line)); }
.fi.watch .fic { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, var(--line)); }
.fi.off .fic { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, var(--line)); }
.ft2 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ft2 b { font-weight: 500; color: var(--ink); } .ft2 span { color: var(--dim); font-size: 10.5px; white-space: nowrap; }
.fi p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.rfoot { font-size: 10px; margin-top: 6px; }