/* hippo landing page.
   One rule for colour: yellow is only ever something you said to an agent,
   or the rule that came out of it. Everything else stays navy and grey.
   No script, and nothing moves: the page is static. */

:root {
  --bg: #0f1528;
  --panel: #151c33;
  --panel2: #1c2542;
  --inset: #0a0f1f;
  --line: rgba(165, 180, 225, .16);
  --line2: rgba(165, 180, 225, .32);
  --text: #edf0f9;
  --muted: #a9b4d4;
  --faint: #8e9ac0;

  --you: #ffd166;
  --you-ink: #ffd166;
  --you-bg: rgba(255, 209, 102, .1);
  --you-line: rgba(255, 209, 102, .55);
  --focus: #ffd166;

  --needs: #ff9d5c;
  --needs-bg: #262536;
  --work: #7fb0ff;
  --ok: #62d6a0;
  --ok-bg: rgba(98, 214, 160, .1);
  --bad: #ff8585;
  --bad-bg: rgba(255, 133, 133, .1);
  --bar: #3a4979;
  --bar-live: #5585e6;
  --wo: #a53f76;
  --de: #6a4fc0;
  --cc: #b5562f;
  --cx: #1f7a68;
  --ds: #3d5bd9;
  --oc: #6b5b3e;
  --mu: #8b4a8c;
  --cm: #5a6b2a;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .7);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f9;
    --panel: #ffffff;
    --panel2: #eef0f7;
    --inset: #1e2a4a;
    --line: rgba(30, 42, 74, .14);
    --line2: rgba(30, 42, 74, .32);
    --text: #1e2a4a;
    --muted: #4a557e;
    --faint: #5a658c;

    --you: #f2b705;
    --you-ink: #1e2a4a;
    --you-bg: #ffe9a6;
    --you-line: #d9a514;
    --focus: #2b5fcc;

    --needs: #ab4707;
    --needs-bg: #fbf2ec;
    --work: #2b5fcc;
    --ok: #147446;
    --ok-bg: rgba(20, 116, 70, .09);
    --bad: #b52f2f;
    --bad-bg: rgba(181, 47, 47, .08);
    --bar: #c2cae2;
    --bar-live: #4a78d6;
    --shadow: 0 24px 50px -30px rgba(30, 42, 74, .45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ul, ol, dl, dd, figure, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
i, em { font-style: normal; }
q { quotes: "“" "”"; }
a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
code, pre { font-family: var(--mono); }
code { font-size: .9em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; font: 14px var(--mono); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }

h2 { font: 620 28px/1.15 var(--sans); letter-spacing: -.018em; text-wrap: balance; }
h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.01em; text-wrap: balance; }

/* your words, and the rule made from them */
.said, .kept { color: var(--you-ink); background: var(--you-bg); border-radius: 3px; padding: 1px 3px; margin: 0 -3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the mark for "you corrected it" */
.mk { display: inline-block; width: 9px; height: 9px; background: var(--you); transform: rotate(45deg); flex: none; }

/* account badges, as in the app */
.ac { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: 5px; font: 700 10px/1 var(--mono); color: #fff; flex: none; }
.ac.wo { background: var(--wo); }
.ac.de { background: var(--de); }

/* agent badges: which coding agent a session ran in */
.ag { display: inline-grid; place-items: center; min-width: 24px; height: 18px; padding: 0 4px; border-radius: 5px; font: 700 10px/1 var(--mono); color: #fff; flex: none; }
.ag.cc { background: var(--cc); }
.ag.cx { background: var(--cx); }
.ag.ds { background: var(--ds); }
.ag.oc { background: var(--oc); }
.ag.mu { background: var(--mu); }
.ag.cm { background: var(--cm); }

/* ---------- top ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 20px/1 var(--sans); letter-spacing: -.01em; }
.brand svg { width: 40px; }
.aka { font: 400 12.5px var(--mono); color: var(--faint); letter-spacing: 0; margin-left: 2px; }
.top nav { display: flex; align-items: center; gap: 2px; font: 14px var(--mono); }
.top nav a { text-decoration: none; padding: 8px 10px; color: var(--muted); border-radius: 6px; }
.top nav a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; }
.top nav a.gh { color: var(--text); border: 1px solid var(--line2); margin-left: 8px; padding: 7px 12px; }
.top nav a.gh:hover { border-color: var(--text); text-decoration: none; }
.gh span { color: var(--faint); margin-left: 6px; }
@media (max-width: 560px) { .top nav a.opt { display: none; } }

/* ---------- hero ---------- */
.hero { padding-top: 28px; }
h1 { font: 650 clamp(30px, 3.5vw, 46px)/1.1 var(--sans); letter-spacing: -.026em; text-wrap: balance; }
.intro { margin-top: 10px; color: var(--muted); font-size: 17px; max-width: 1040px; text-wrap: pretty; }
.hero-get { display: grid; grid-template-columns: auto minmax(0, 730px) minmax(0, 1fr); gap: 8px 18px; align-items: center; margin-top: 22px; }
.hero-get .cmd { margin-top: 0; }
.get-k { font: 600 13px var(--mono); }
.get-f { font-size: 13.5px; line-height: 1.45; color: var(--faint); }

.cmd {
  display: block; margin-top: 8px; padding: 12px 14px;
  background: var(--inset); color: #e6eaf7;
  border: 1px solid var(--line2); border-radius: 8px;
  font: 12.5px/1.5 var(--mono); white-space: nowrap; overflow-x: auto;
  cursor: text;
}
.cmd .p { color: #939ec4; margin-right: 10px; -webkit-user-select: none; user-select: none; }
.cmd .c { -webkit-user-select: all; user-select: all; }
.cmd:hover { border-color: var(--you-line); }

/* the cycle: a day of sessions, the night's pass, the next morning.
   The night band is dark in both schemes, like the terminals. */
.cycle { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; margin-top: 26px; overflow: hidden; }
.phases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 1.08fr); }
.ph { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; min-width: 0; }
.ph-k { display: flex; align-items: baseline; gap: 9px; font: 12.5px/1.4 var(--mono); color: var(--muted); padding-bottom: 2px; }
.ph-k b { font: 700 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--text); }
.ph-f { margin-top: auto; padding-top: 6px; font: 12px/1.5 var(--mono); color: var(--faint); }

.ph-night {
  --text: #edf0f9; --muted: #a9b4d4; --faint: #8e9ac0;
  --line: rgba(165, 180, 225, .16); --line2: rgba(165, 180, 225, .32);
  --you-ink: #ffd166; --you-bg: rgba(255, 209, 102, .1);
  --ok: #62d6a0; --ok-bg: rgba(98, 214, 160, .1); --bad: #ff8585; --bad-bg: rgba(255, 133, 133, .1);
  background: var(--inset); color: var(--text);
}

/* day: the sessions, two of them corrected */
.dl li { padding: 7px 0; border-top: 1px solid var(--line); }
.dl li:first-child { border-top: 0; padding-top: 2px; }
.dl-h { display: flex; align-items: center; gap: 9px; font-size: 13.5px; min-width: 0; }
.dl-h .ttl { flex: 1; }
.dl-h em { font: 11.5px var(--mono); color: var(--faint); white-space: nowrap; }
.dl-q { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; margin-top: 5px; font-size: 13.5px; line-height: 1.45; align-items: baseline; }
.dl-q .tk { font: 11.5px var(--mono); color: var(--faint); text-align: right; }
.dl-q q { justify-self: start; }

/* night: what the pass proposed, and what the reviewer said */
.prop { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px 11px; min-width: 0; }
.prop-k { display: flex; justify-content: space-between; gap: 12px; font: 11.5px var(--mono); color: var(--faint); }
.prop-k span { color: var(--muted); }
.prop-t { margin-top: 7px; font-size: 14.5px; font-weight: 550; line-height: 1.4; }
.prop-t.n-c { font: 12.5px/1.5 var(--mono); }
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); }
.verdict b { display: inline-flex; align-items: center; gap: 7px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.verdict b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.verdict.ok b { color: var(--ok); }
.verdict.no b { color: var(--bad); }
.verdict.no { margin: 9px -12px -11px; padding: 9px 12px 11px; background: var(--bad-bg); border-top-color: transparent; border-radius: 0 0 9px 9px; color: var(--text); }
.verdict.no q { grid-column: 1 / 3; }

/* morning: the rule waits for you, then sessions start with it */
.sess { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; min-width: 0; }
.sess-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 13px; }
.sess-h b { font-weight: 600; margin-right: 4px; }
.sess-h span { margin-left: auto; font: 11.5px var(--mono); color: var(--faint); white-space: nowrap; }
.sess .ib-t { margin-top: 8px; }
.block { margin-top: 9px; padding: 9px 11px 10px; background: var(--inset); color: #dfe4f5; border-radius: 7px; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.block .dim { color: #939ec4; }
.block .kept { color: #ffd166; background: rgba(255, 209, 102, .12); }
.fit { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; margin-top: 9px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fitbar { position: relative; width: 48px; height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; flex: none; }
.fitbar::after { content: ""; position: absolute; inset: 0; background: var(--muted); transform-origin: left; transform: scaleX(.06); }

.how { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.how-k { font: 12px var(--mono); color: var(--faint); }
.how-a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.how b { color: var(--text); font-weight: 600; }
.how code { color: var(--text); }

/* the day: Fleet, further down the page */
.day { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-width: 0; margin-top: 24px; }
.day-top { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: baseline; padding: 13px 20px; border-bottom: 1px solid var(--line); font: 13px var(--mono); color: var(--muted); }
.day-top b { color: var(--text); font-weight: 600; }
.day-date { color: var(--text); font-weight: 700; }
.day-you { display: inline-flex; align-items: baseline; gap: 9px; }
.day-you .mk { align-self: center; }

.lanes { padding: 10px 20px 12px; }
.lane { --cover: var(--panel); display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr) 156px; column-gap: 18px; align-items: center; padding: 4px 0; }
.who { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; }
.ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pj { font: 12px var(--mono); color: var(--faint); white-space: nowrap; }
.track { grid-column: 2; grid-row: 1; position: relative; height: 22px; overflow: hidden;
  background-color: var(--cover);
  background-image: linear-gradient(to right,
    transparent calc(19.108% - 1px), var(--line) calc(19.108% - 1px), var(--line) 19.108%, transparent 19.108%,
    transparent calc(38.217% - 1px), var(--line) calc(38.217% - 1px), var(--line) 38.217%, transparent 38.217%,
    transparent calc(57.325% - 1px), var(--line) calc(57.325% - 1px), var(--line) 57.325%, transparent 57.325%,
    transparent calc(76.433% - 1px), var(--line) calc(76.433% - 1px), var(--line) 76.433%, transparent 76.433%,
    transparent calc(95.541% - 1px), var(--line) calc(95.541% - 1px), var(--line) 95.541%, transparent 95.541%);
}
.st { grid-column: 3; grid-row: 1; font: 12px var(--mono); color: var(--faint); text-align: right; white-space: nowrap; }
.more { grid-column: 1 / 3; grid-row: 2; padding-left: 31px; margin-top: 1px; font-size: 13px; color: var(--muted); }

.bar, .wait { position: absolute; top: 7px; height: 8px; border-radius: 2px; background: var(--bar); }
.live .bar { background: var(--bar-live); border-radius: 2px 0 0 2px; }
.live .st { color: var(--work); }
.wait { border-radius: 0; background: repeating-linear-gradient(-55deg, var(--needs) 0 3px, transparent 3px 6px); }
.track .mk { position: absolute; top: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--cover); }

/* the axis runs 12:30 to 15:07; one minute is 0.63694% */
.la .bar { left: 80.89%; width: 13.38%; }   .la .wait { left: 94.27%; width: 5.73%; }
.lb .bar { left: 92.36%; width: 7.64%; }
.li .bar { left: 37.58%; width: 1.91%; }    .li .mk { left: 39.49%; }

.needs { --cover: var(--needs-bg); background: var(--needs-bg); margin: 0 -20px 4px; padding: 9px 20px; box-shadow: inset 2px 0 0 var(--needs); }
.needs .st { color: var(--needs); font-weight: 600; }


.axis { padding: 0 0 2px; }
.axis .ticks { grid-column: 2; position: relative; height: 16px; }
.axis .t { position: absolute; top: 0; transform: translateX(-50%); font: 11px/16px var(--mono); color: var(--faint); }
.t1 { left: 19.108%; } .t2 { left: 38.217%; } .t3 { left: 57.325%; } .t4 { left: 76.433%; }
.axis .tn { left: auto; right: 0; transform: none; color: var(--muted); }

.day-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding: 12px 20px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--faint); }
.key { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.key li { display: inline-flex; align-items: center; gap: 8px; }
.k-bar { width: 18px; height: 8px; border-radius: 2px; background: var(--bar-live); }
.k-wait { width: 18px; height: 8px; background: repeating-linear-gradient(-55deg, var(--needs) 0 3px, transparent 3px 6px); }
.room { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; }
.room-a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.room-a b { color: var(--muted); font-weight: 600; }
.room-a b.low { color: var(--needs); }
.room-a em { color: var(--work); margin-left: 4px; }
.meter { position: relative; width: 34px; height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; margin-left: 4px; }
.meter::after { content: ""; position: absolute; inset: 0; background: var(--muted); transform-origin: left; }
.m88::after { transform: scaleX(.88); } .m70::after { transform: scaleX(.7); } .m19::after { transform: scaleX(.19); }
.meter.low::after { background: var(--needs); }

.day-note { margin-top: 12px; font-size: 13.5px; color: var(--faint); }
.day-note code { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- what keeps the brain right: a heading and a figure per row ---------- */
.rows { margin-top: 56px; }
.row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px 56px; align-items: start; padding: 40px 0; border-top: 1px solid var(--line); }
.row:last-child { padding-bottom: 0; }
.row h2 { font-size: 24px; }
.say p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.say code { color: var(--text); }
.figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }

/* terminals: dark in both schemes */
.term { --t: #dfe4f5; --tf: #939ec4; background: var(--inset); border: 1px solid var(--line2); border-radius: 10px; color: var(--t); min-width: 0; }
.term-h { padding: 9px 16px; border-bottom: 1px solid rgba(165, 180, 225, .18); font: 12px var(--mono); color: var(--tf); }
.term-h b { color: #fff; font-weight: 600; margin-right: 8px; }
.term pre { padding: 14px 16px 16px; font-size: 12.5px; line-height: 1.7; overflow-x: auto; }
.term .p, .term .dim { color: var(--tf); }
.term .tool { color: #62d6a0; }
.term .hot { color: #ff8f8f; }
.term .said, .term .kept { color: #ffd166; background: rgba(255, 209, 102, .12); }
.term .cmdline { color: #fff; font-weight: 600; }

/* incidents */
.inc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.inc .term-h { color: var(--faint); border-bottom-color: var(--line); }
.inc .term-h b { color: var(--text); }
.also { padding: 8px 16px 10px; }
.also li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 14px; padding: 5px 0; font-size: 14px; color: var(--muted); align-items: baseline; }
.also b { font: 12.5px var(--mono); color: var(--faint); font-weight: 400; }
.also q { justify-self: start; }

/* a proposed rule */
.ib-t { font-size: 14.5px; font-weight: 550; }
.ib-b { margin-top: 11px; display: flex; gap: 8px; }
.btn { display: inline-block; font: 500 12.5px/1 var(--sans); padding: 6px 11px; border: 1px solid var(--line2); border-radius: 7px; color: var(--text); white-space: nowrap; }
.btn.go { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 650; }

/* what it reads, and how much */
.src { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.src-in { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.src-in li { display: inline-flex; align-items: center; gap: 8px; }
.src-in code { font-size: 12.5px; color: var(--muted); }
.src-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 30px; padding: 16px 18px 4px; font: 13px var(--mono); color: var(--muted); }
.src-n span, .score p span { white-space: nowrap; }
.src-n b { font: 650 30px/1.1 var(--sans); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 8px; }
.src-f { padding: 4px 18px 14px; font-size: 13.5px; color: var(--faint); }

/* measured */
.score { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.score li { padding: 13px 18px 14px; border-top: 1px solid var(--line); }
.score li:first-child { border-top: 0; }
.score p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 30px; font: 13px var(--mono); color: var(--muted); }
.score b { font: 650 30px/1.1 var(--sans); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 8px; }
.score li > span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--faint); }
.score .n-cmd { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 11px 18px; background: var(--inset); color: #dfe4f5; font: 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.n-cmd .p { color: #939ec4; margin-right: -4px; }
.n-cmd em { color: #939ec4; margin-left: auto; }
.n-cmd:focus-visible { outline-offset: -3px; }

/* the reviewer's diff */
.n-c del, .n-c ins { display: inline-block; }
.n-c del { color: var(--bad); background: var(--bad-bg); text-decoration: line-through; padding: 2px 6px; border-radius: 4px; }
.n-c ins { color: var(--ok); background: var(--ok-bg); text-decoration: none; padding: 2px 6px; border-radius: 4px; }
.n-c ins::before { content: "→ "; }
.n-c ins.off { color: var(--faint); background: none; outline: 1px dashed var(--line2); outline-offset: -1px; }

/* ---------- why it is not a memory file: two measured claims ---------- */
.proof { margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.pf h2 { font-size: 24px; }
.pf-p { margin: 10px 0 18px; color: var(--muted); font-size: 15.5px; min-height: 3.1em; }

/* what git shares */
.share { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.share li { display: grid; grid-template-columns: 190px 76px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.share li:first-child { border-top: 0; }
.share li > code { font-size: 12.5px; color: var(--text); }
.share b { font: 600 12px var(--mono); color: var(--ok); }
.share .own b { color: var(--faint); font-weight: 400; }

/* packs */
.packs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--faint); }
.packs span { padding: 5px 10px; border: 1px solid var(--line2); border-radius: 7px; font: 12.5px var(--mono); color: var(--muted); background: var(--panel); }
.packs a { margin: 0 -3px 0 6px; }

/* ---------- seeing them ---------- */
.see { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.see-p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.grid2 .term pre { font-size: 12px; }

/* ---------- the Mac app: tabs without script (radio inputs + labels) ---------- */
.tabs { position: relative; margin-top: 44px; }
.tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tablist { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 3px; }
.tabs-k { font: 600 15px var(--sans); margin-right: 14px; white-space: nowrap; }
.tablist label { font: 13px var(--mono); color: var(--muted); padding: 7px 13px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.tablist label:hover { color: var(--text); }
#v-home:checked ~ .tablist [for="v-home"],
#v-fleet:checked ~ .tablist [for="v-fleet"],
#v-incidents:checked ~ .tablist [for="v-incidents"],
#v-inbox:checked ~ .tablist [for="v-inbox"],
#v-memory:checked ~ .tablist [for="v-memory"] { color: var(--text); background: var(--panel); border-color: var(--line2); }
#v-home:focus-visible ~ .tablist [for="v-home"],
#v-fleet:focus-visible ~ .tablist [for="v-fleet"],
#v-incidents:focus-visible ~ .tablist [for="v-incidents"],
#v-inbox:focus-visible ~ .tablist [for="v-inbox"],
#v-memory:focus-visible ~ .tablist [for="v-memory"] { outline: 2px solid var(--focus); outline-offset: 1px; }
.panes { margin-top: 14px; }
.pane { display: none; }
#v-home:checked ~ .panes .p-home,
#v-fleet:checked ~ .panes .p-fleet,
#v-incidents:checked ~ .panes .p-incidents,
#v-inbox:checked ~ .panes .p-inbox,
#v-memory:checked ~ .panes .p-memory { display: block; }
/* 1x captures, 1600 wide: shown at 70% so they stay sharp */
.pane a { display: block; max-width: 1120px; border-radius: 9px; }
.pane img { width: 100%; filter: drop-shadow(0 0 .6px var(--line2)) drop-shadow(0 22px 34px rgba(0, 0, 0, .35)); }

/* ---------- on disk ---------- */
.disk { margin-top: 88px; }
.io { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 2fr); margin-top: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.io p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; padding: 16px 20px; border-left: 1px solid var(--line); min-width: 0; font-size: 13.5px; color: var(--muted); }
.io p:first-child { border-left: 0; }
.io b { flex-basis: 100%; font: 12px var(--mono); color: var(--faint); font-weight: 400; }
.io code { font-size: 12.5px; background: var(--panel2); padding: 3px 8px; border-radius: 5px; overflow-wrap: anywhere; }
.io .out b { color: var(--needs); }

/* ---------- install ---------- */
.install { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 72px; align-items: start; }
.in-main h2 { margin-bottom: 20px; }
.in-row { margin-bottom: 18px; }
.in-k { font-size: 14px; font-weight: 600; }
.in-more { font-size: 13.5px; color: var(--faint); }
.limits h2 { font-size: 20px; margin: 6px 0 16px; }
.limits ul { font-size: 15px; color: var(--muted); }
.limits li { position: relative; padding: 0 0 10px 18px; }
.limits li::before { content: "–"; position: absolute; left: 0; color: var(--faint); }
.limits p { margin-top: 6px; font-size: 14px; color: var(--faint); }
:target { scroll-margin-top: 24px; }

/* ---------- foot ---------- */
.foot .aka { display: none; }
.foot { margin-top: 96px; padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 13px var(--mono); color: var(--faint); }
.foot nav a { text-decoration: none; color: var(--muted); }
.foot nav a:hover { color: var(--text); text-decoration: underline; }

/* ---------- narrower ---------- */
@media (max-width: 1080px) {
  .hero-get { grid-template-columns: minmax(0, 1fr); }
  .lane { grid-template-columns: minmax(0, 290px) minmax(0, 1fr) 150px; }
  .pj { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
  .io { grid-template-columns: minmax(0, 1fr); }
  .io p { border-left: 0; border-top: 1px solid var(--line); padding: 12px 18px; }
  .io p:first-child { border-top: 0; }
  .io b { flex-basis: 56px; }
}

@media (max-width: 940px) {
  /* the cycle reads top to bottom */
  .phases { grid-template-columns: minmax(0, 1fr); }
  .ph-f { margin-top: 0; }
  .top .aka { display: none; }
  .foot .aka { display: inline; }
}

@media (max-width: 820px) {
  .grid2, .install, .proof { grid-template-columns: minmax(0, 1fr); }
  .pf-p { min-height: 0; }
  .proof { margin-top: 56px; }
  .see, .disk, .install { margin-top: 64px; }
  .rows { margin-top: 56px; }
  /* narrow: the app's sidebar is cropped off and the view pans inside its box */
  .panes { overflow-x: auto; padding-bottom: 12px; }
  .pane a { width: 874px; max-width: none; overflow: hidden; border: 1px solid var(--line2); }
  .pane img { width: 1040px; max-width: none; margin-left: -166px; filter: none; }
  .lane { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .who { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .who .ac { margin-top: 1px; }
  .ttl { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
  .st { grid-column: 2; grid-row: 1; align-self: start; line-height: 19px; }
  .track { grid-column: 1 / 3; grid-row: 2; margin-top: 2px; height: 16px; }
  .bar, .wait { top: 4px; }
  .more { grid-column: 1 / 3; grid-row: 3; padding-left: 31px; }
  .axis .ticks { grid-column: 1 / 3; grid-row: 2; }
  .axis .st { display: none; }
  .share li { grid-template-columns: minmax(0, 1fr) auto; }
  .share li > span { grid-column: 1 / 3; }
}

@media (max-width: 640px) {
  h2, .row h2 { font-size: 22px; }
  .hero { padding-top: 16px; }
  .intro { font-size: 16px; }
  .ph { padding: 14px 14px 16px; }
  .how { padding: 11px 14px; }
  .how-a { white-space: normal; }
  .src-n b, .score b { font-size: 24px; }
  .src-n, .score p { column-gap: 18px; }
  .n-cmd em { margin-left: 0; }
  .day-top { padding: 12px 14px; gap: 2px 16px; font-size: 12.5px; }
  .lanes { padding: 6px 14px 10px; }
  .who { font-size: 13.5px; }
  .st { font-size: 11.5px; }
  .st .w { display: none; }
  .more { padding-left: 0; }
  .needs { margin: 0 -14px 4px; padding: 9px 14px; }
  .axis .t4 { display: none; }
  .day-foot { padding: 12px 14px; }
  .tabs-k { display: none; }
  .tablist { gap: 2px; padding: 3px 0; }
  .tablist label { font-size: 12.5px; padding: 7px 9px; }
  .pane a { height: 470px; }
  .also { padding: 8px 14px 10px; }
  .also li { grid-template-columns: minmax(0, 1fr); }
  .share li { padding: 10px 14px; }
  .foot { margin-top: 72px; }
}