/* The landing page's palette and type, so the site feels like one place. */
:root {
  --bg: #FBF6EE;
  --card: #FFFFFF;
  --ink: #1D1B19;
  --muted: #6B645C;
  --line: #EAE1D3;
  --grid: #F1EADF;
  --tongue: #E2607F;
  --tongue-soft: #FCE3E9;
  --grass: #4F7D2E;
  --grass-soft: #E6EFDA;
  --track: #F3ECE1;
  --shadow: 0 1px 2px rgb(60 40 20 / 6%), 0 12px 32px -12px rgb(60 40 20 / 22%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161514;
    --card: #211F1D;
    --ink: #F4EEE6;
    --muted: #ABA197;
    --line: #34302C;
    --grid: #2B2825;
    --tongue: #F0839C;
    --tongue-soft: #3E2229;
    --grass: #9CC57A;
    --grass-soft: #26301E;
    --track: #2E2B28;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -12px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid var(--tongue); outline-offset: 3px; border-radius: 6px; }

main {
  max-width: 920px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom));
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--muted); text-decoration: none;
}
.eyebrow svg { width: 18px; height: 18px; fill: var(--tongue); }

h1 { margin: 22px 0 4px; font-size: clamp(32px, 7vw, 48px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.spec { margin: 0; color: var(--muted); }
.updated { margin: 2px 0 0; color: var(--muted); font-size: 14px; min-height: 1.5em; }
.updated.stale { color: var(--tongue); font-weight: 700; }

h2 {
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 36px 0 12px; font-weight: 700;
}

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 18px; box-shadow: var(--shadow);
}

/* Stat tiles */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile .label { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.tile .value { margin: 2px 0 0; font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.tile .value small { font-size: .5em; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.tile .note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.meter { height: 8px; border-radius: 4px; background: var(--track); margin-top: 10px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--grass); transition: width .4s ease; }
.meter.hot span { background: var(--tongue); }

/* Charts */
.charts { display: grid; gap: 12px; }
@media (min-width: 760px) { .charts { grid-template-columns: 1fr 1fr; } }
.chart h3 { margin: 0; font-size: 16px; }
.chart .sub { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.plot { position: relative; touch-action: pan-y; }
.plot svg { display: block; width: 100%; height: 150px; overflow: visible; }
.plot .grid line { stroke: var(--grid); stroke-width: 1; }
.plot .axis text { fill: var(--muted); font-size: 11px; }
.plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .area { opacity: .14; }
.plot .cross { stroke: var(--muted); stroke-width: 1; }
.plot .dot { stroke: var(--card); stroke-width: 2; }
.cpu { --series: var(--tongue); }
.mem { --series: var(--grass); }
.plot .line { stroke: var(--series); }
.plot .area, .plot .dot { fill: var(--series); }
.tip {
  position: absolute; top: 0; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--bg); border-radius: 10px; padding: 6px 10px;
  font-size: 13px; line-height: 1.3; transform: translateX(-50%);
}
.tip b { display: block; font-size: 15px; }
.empty { color: var(--muted); font-size: 14px; margin: 40px 0; text-align: center; }

/* Who's using what */
.rows { list-style: none; margin: 0; padding: 4px 18px; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name .kind { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }
.row .nums { text-align: right; font-size: 15px; }
.row .nums .cpu-num { color: var(--muted); font-size: 13px; margin-left: 8px; }
.row .meter { grid-column: 1 / -1; margin-top: 6px; height: 6px; }
.row .meter span { background: var(--grass); opacity: .85; }
.row.other .name { font-weight: 400; color: var(--muted); }
.row.other .meter span { background: var(--muted); opacity: .45; }
.fine { color: var(--muted); font-size: 13px; margin: 10px 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .meter span { transition: none; }
}