/* ---------- tokens ---------- */
:root{
  --page:#e3e8dd;        /* columnar-pad green */
  --page-2:#d8dfd2;
  --rule:#b7c3ad;
  --rule-strong:#7f8f78;
  --ink:#172019;
  --ink-2:#4b5a4f;
  --ink-3:#7c8a80;
  --red:#a4302c;         /* ledger red */
  --red-soft:rgba(164,48,44,.10);
  --focus:#2d5aa8;
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --lane:46px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#131816; --page-2:#0e1311; --rule:#2a352e; --rule-strong:#55665b;
    --ink:#e4eae1; --ink-2:#a9b5ab; --ink-3:#6f7d73;
    --red:#e2655f; --red-soft:rgba(226,101,95,.14); --focus:#8fb4ff;
  }
}
:root[data-theme="dark"]{
  --page:#131816; --page-2:#0e1311; --rule:#2a352e; --rule-strong:#55665b;
  --ink:#e4eae1; --ink-2:#a9b5ab; --ink-3:#6f7d73;
  --red:#e2655f; --red-soft:rgba(226,101,95,.14); --focus:#8fb4ff;
}

/* ---------- skins: swap the whole look with one attribute ---------- */
:root[data-skin="modern"]{
  --page:#ffffff; --page-2:#f4f5f7; --rule:#e4e7eb; --rule-strong:#b5bcc6;
  --ink:#0e1116; --ink-2:#4b5361; --ink-3:#8b93a1;
  --red:#2a5cf0; --red-soft:rgba(42,92,240,.12); --focus:#2a5cf0;
  --serif:"Inter",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
}
:root[data-skin="modern"] .mast h1{font-weight:700;letter-spacing:-.045em}
:root[data-skin="modern"] .mast h1 em{font-style:normal;font-weight:300}
:root[data-skin="modern"] .figure b,:root[data-skin="modern"] .yr-head{font-weight:600;letter-spacing:-.04em}
:root[data-skin="modern"] .row.t1 .e h3{font-weight:600;letter-spacing:-.03em}
:root[data-skin="modern"] .e h3,:root[data-skin="modern"] .ev .lbl b,:root[data-skin="modern"] .detail h2{font-weight:500}
:root[data-skin="modern"] .no,:root[data-skin="modern"] .gap,:root[data-skin="modern"] .zoom output,:root[data-skin="modern"] .detail .dd small{font-style:normal}
:root[data-skin="modern"] .mast{border-bottom-width:1px;border-color:var(--rule)}
:root[data-skin="modern"] .ev .lbl{background:var(--page);border:1px solid var(--rule);border-radius:8px;padding:6px 10px;left:8px;width:calc(100% - 8px)}
:root[data-skin="modern"] .ev.on .lbl{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
:root[data-skin="modern"] .detail{border-radius:18px}
:root[data-skin="modern"] .detail .dd{letter-spacing:-.04em}

:root[data-skin="terminal"]{
  --page:#060906; --page-2:#0b100b; --rule:#183018; --rule-strong:#2d5a2d;
  --ink:#a7ffa7; --ink-2:#6fd46f; --ink-3:#3f8f3f;
  --red:#ffb100; --red-soft:rgba(255,177,0,.16); --focus:#ffb100;
  --serif:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --c-model:#ffb100; --c-product:#7fd7ff; --c-open:#a7ffa7; --c-research:#e0a0ff; --c-policy:#ffe28a; --c-business:#9fbf9f; --c-hardware:#5ff0e0; --c-tools:#ff9a5c;
}
:root[data-skin="terminal"] body{text-shadow:0 0 6px rgba(120,255,120,.25);font-size:14px}
:root[data-skin="terminal"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
:root[data-skin="terminal"] .mast h1{font-weight:500;letter-spacing:-.04em;font-size:clamp(34px,6vw,72px)}
:root[data-skin="terminal"] .mast h1::before{content:"> "}
:root[data-skin="terminal"] .mast h1 em{font-style:normal;color:var(--red)}
:root[data-skin="terminal"] .mast h1::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
:root[data-skin="terminal"] .figure b,:root[data-skin="terminal"] .yr-head{font-weight:500}
:root[data-skin="terminal"] .row.t1 .e h3{font-weight:500;font-size:clamp(20px,2.4vw,28px)}
:root[data-skin="terminal"] .e h3{font-size:15px}
:root[data-skin="terminal"] .spine::before,:root[data-skin="terminal"] .ev .dot,:root[data-skin="terminal"] .filters button::before,:root[data-skin="terminal"] .meta .cat::before{border-radius:0}
:root[data-skin="terminal"] .row.t1 .spine::before{box-shadow:0 0 12px var(--red)}
:root[data-skin="terminal"] .no::before{content:"["} :root[data-skin="terminal"] .no::after{content:"]"}
:root[data-skin="terminal"] .no,:root[data-skin="terminal"] .gap,:root[data-skin="terminal"] .zoom output,:root[data-skin="terminal"] .detail .dd small{font-style:normal}
:root[data-skin="terminal"] .seg,:root[data-skin="terminal"] .seg button,:root[data-skin="terminal"] .filters button{border-radius:0}
:root[data-skin="terminal"] .seg button[aria-pressed="true"]{background:var(--ink);color:var(--page);text-shadow:none}
:root[data-skin="terminal"] .ev .lbl{border-color:var(--ink-3)}
:root[data-skin="terminal"] .detail{box-shadow:0 0 0 1px var(--rule-strong),0 30px 90px rgba(0,0,0,.6)}

:root[data-skin="blueprint"]{
  --page:#0c2a58; --page-2:#0a2249; --rule:#1e4a8a; --rule-strong:#4b7fc6;
  --ink:#eef4ff; --ink-2:#b9cdef; --ink-3:#7e9ccb;
  --red:#ffd166; --red-soft:rgba(255,209,102,.18); --focus:#ffd166;
  --serif:"Space Grotesk",system-ui,sans-serif; --sans:"Space Grotesk",system-ui,sans-serif;
  --c-model:#ffd166; --c-product:#8fd3ff; --c-open:#9be7a8; --c-research:#e2b6ff; --c-policy:#ffb3a7; --c-business:#c9d6ea; --c-hardware:#7fe7dc; --c-tools:#ffb86b;
}
:root[data-skin="blueprint"] body{
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
}
:root[data-skin="blueprint"] .controls,:root[data-skin="blueprint"] .detail{background:var(--page-2);backdrop-filter:blur(6px)}
:root[data-skin="blueprint"] .mast h1{font-weight:300;letter-spacing:-.03em}
:root[data-skin="blueprint"] .mast h1 em{font-style:normal;font-weight:500;color:var(--red)}
:root[data-skin="blueprint"] .figure b,:root[data-skin="blueprint"] .yr-head{font-weight:300}
:root[data-skin="blueprint"] .row.t1 .e h3{font-weight:500}
:root[data-skin="blueprint"] .no,:root[data-skin="blueprint"] .gap,:root[data-skin="blueprint"] .zoom output,:root[data-skin="blueprint"] .detail .dd small{font-style:normal;letter-spacing:.04em}
:root[data-skin="blueprint"] .baseline{background:var(--rule-strong)}
:root[data-skin="blueprint"] .mast{border-bottom-color:var(--rule-strong)}
:root[data-skin="blueprint"] .spine::before,:root[data-skin="blueprint"] .ev .dot{background:var(--page);border:2px solid currentColor;color:var(--ink-3)}
:root[data-skin="blueprint"] .row.t1 .spine::before,:root[data-skin="blueprint"] .ev.t1 .dot{color:var(--red);background:var(--red)}

/* ---------- type: independent of skin ---------- */
:root[data-font="editorial"]{--serif:"Fraunces","Iowan Old Style",Georgia,serif;--sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
:root[data-font="classic"]{--serif:"Playfair Display",Georgia,serif;--sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif}
:root[data-font="grotesk"]{--serif:"Space Grotesk",system-ui,sans-serif;--sans:"Space Grotesk",system-ui,sans-serif}
:root[data-font="neutral"]{--serif:"Inter",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif}
:root[data-font="mono"]{--serif:"JetBrains Mono",ui-monospace,Menlo,monospace;--sans:"JetBrains Mono",ui-monospace,Menlo,monospace}
:root[data-font="grotesk"] .mast h1,:root[data-font="neutral"] .mast h1,:root[data-font="mono"] .mast h1{font-weight:500}
:root[data-font="grotesk"] .mast h1 em,:root[data-font="neutral"] .mast h1 em,:root[data-font="mono"] .mast h1 em{font-style:normal;font-weight:300}
:root[data-font="classic"] .mast h1{font-weight:400}
.pick select{
  font:inherit;color:var(--ink);background:var(--page);border:1px solid var(--rule-strong);border-radius:999px;padding:5px 12px;cursor:pointer
}

/* ---------- search ---------- */
.search{position:relative;flex:1;min-width:220px;max-width:360px}
.search input{
  width:100%;font:inherit;color:var(--ink);background:var(--page-2);border:1px solid var(--rule-strong);border-radius:999px;
  padding:7px 14px 7px 36px;outline:none
}
.search input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:inherit;font-size:11px;color:var(--ink-3);border:1px solid var(--rule-strong);border-radius:4px;padding:0 5px}
.results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--page-2);border:1px solid var(--rule-strong);
  border-radius:12px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:none;z-index:40;max-height:340px;overflow:auto
}
.results.open{display:block}
.results button{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;text-align:left;padding:8px 10px;border-radius:8px}
.results button[aria-selected="true"],.results button:hover{background:var(--red-soft)}
.results b{font-family:var(--serif);font-weight:500;font-size:14px}
.results b mark{background:none;color:var(--red)}
.results i{font-style:normal;color:var(--ink-3);font-size:12px;grid-column:1/-1}
.results .rd{color:var(--ink-2);font-size:12px;white-space:nowrap}
.results .none{padding:10px;color:var(--ink-3);font-size:13px}
@keyframes flash{0%{background:var(--red-soft)}100%{background:transparent}}
.row.flash .row-in{animation:flash 1.8s ease-out}
.ev.flash .lbl{animation:flash 1.8s ease-out}

/* ---------- density band ---------- */
.band-wrap{max-width:1180px;margin:0 auto;padding:10px 24px 0}
.band{position:relative;height:44px;display:flex;align-items:flex-end;gap:1px;cursor:pointer}
.band .bar{flex:1;background:var(--ink-3);opacity:.55;min-height:2px;transition:opacity .15s,background .15s;border-radius:1px 1px 0 0}
.band .bar.hot{background:var(--red);opacity:.9}
.band .bar:hover,.band .bar.cur{opacity:1;background:var(--red)}
.band .bar.y{border-left:1px solid var(--rule-strong)}
.band .win{position:absolute;top:-4px;bottom:-4px;background:var(--red-soft);border:1px solid var(--red);pointer-events:none;display:none;border-radius:3px}
.band-l{display:flex;justify-content:space-between;color:var(--ink-3);font-size:12px;padding-top:4px}
.band-tip{position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--ink);color:var(--page);font-size:12px;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;display:none}

/* ---------- around this date ---------- */
.onthis{margin:16px 0 0;color:var(--ink-2);font-size:14px;max-width:60ch;display:grid;gap:4px}
.onthis .ot-h{color:var(--ink-3)}
.onthis .ot-i{display:grid;grid-template-columns:5ch 1fr;gap:8px;align-items:baseline}
.onthis b{font-weight:600;color:var(--ink)}
.onthis button{color:var(--red);text-decoration:underline;text-underline-offset:2px;text-align:left}

/* ---------- replay ---------- */
.run{display:flex;align-items:center;gap:20px;margin-top:26px}
.play{position:relative;width:84px;height:84px;border-radius:50%;flex:none;color:var(--red);display:grid;place-items:center;transition:transform .25s cubic-bezier(.2,1.4,.3,1)}
.play:hover{transform:scale(1.06)}
.play .ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-dasharray:6 8;stroke-linecap:round;animation:spin 14s linear infinite;opacity:.8}
.play:hover .ring{animation-duration:3s;opacity:1}
.play.on .ring{stroke-dasharray:1 0;animation:none}
.play .tri{width:30px;height:30px;fill:currentColor;margin-left:5px;transition:transform .2s}
.play.on .tri{transform:scale(0);}
.play.on::after{content:"";width:24px;height:24px;background:currentColor;border-radius:4px;position:absolute}
@keyframes spin{to{transform:rotate(360deg)}}
.run-t{display:flex;flex-direction:column;gap:4px;max-width:34ch}
.run-t b{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.01em;line-height:1.1}
.run-t span{color:var(--ink-3);font-size:14px}
.overture{position:fixed;inset:0;z-index:60;background:var(--page);display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .45s ease}
.overture.on{opacity:1;pointer-events:auto}
.overture .od{font-family:var(--serif);font-weight:300;font-size:clamp(72px,18vw,220px);line-height:.9;letter-spacing:-.04em;color:var(--red)}
.overture .ot{font-family:var(--serif);font-size:clamp(18px,3vw,30px);margin-top:18px;color:var(--ink-2);font-style:italic}
.overture.on .od{animation:thump .7s cubic-bezier(.2,1.5,.3,1)}
.overture.on .ot{animation:rise .6s .35s both ease-out}
.hud{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:35;
  display:none;gap:18px;align-items:center;
  background:var(--ink);color:var(--page);border-radius:999px;padding:10px 12px 10px 22px;box-shadow:0 12px 40px rgba(0,0,0,.3);
  white-space:nowrap;max-width:calc(100vw - 24px)
}
.hud.on{display:flex}
.hud .hd{font-family:var(--serif);font-size:26px;font-weight:300;letter-spacing:-.02em;line-height:1;min-width:8ch}
.hud .hn{opacity:.7;font-size:13px;line-height:1}
.hud .hn b{display:block;opacity:1;font-weight:400;font-family:var(--serif);font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hud button{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);font-size:13px;color:inherit}
.hud button:hover{background:var(--page);color:var(--ink);border-color:var(--page)}
.hud .stop{background:var(--red);border-color:var(--red);color:#fff}
.hud .stop:hover{background:#fff;color:var(--red)}
.now{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:4;pointer-events:none;display:none;box-shadow:0 0 12px var(--red)}
.now.on{display:block}
.strip.replay .ev.pending{opacity:0}
.strip.replay .ev.stamp .lbl{animation:stamp .55s cubic-bezier(.2,1.4,.3,1)}
.strip.replay .ev.stamp .dot{animation:pulse .7s ease-out}
@keyframes stamp{0%{transform:translateY(var(--ty,0)) scale(1.5);opacity:0}60%{opacity:1}100%{transform:translateY(var(--ty,0)) scale(1)}}
.ev.up .lbl{--ty:-100%}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--red)}100%{box-shadow:0 0 0 18px transparent}}

/* ---------- lineages ---------- */
.lines{position:absolute;inset:0;pointer-events:none;z-index:1;display:none}
.strip.lin .lines{display:block}
.lines path{fill:none;stroke-width:1.25;opacity:.6}
.strip.lin .ev.l-gpt .dot{background:var(--l-gpt)} .strip.lin .ev.l-claude .dot{background:var(--l-claude)}
.strip.lin .ev.l-gemini .dot{background:var(--l-gemini)} .strip.lin .ev.l-llama .dot{background:var(--l-llama)} .strip.lin .ev.l-deepseek .dot{background:var(--l-deepseek)}
.strip.lin .ev.t1 .dot{box-shadow:none}
:root{--l-gpt:#1d7f5f;--l-claude:#b5541b;--l-gemini:#2f5fa8;--l-llama:#6b3fa0;--l-deepseek:#1e6f8a}
.legend{display:none;gap:16px;flex-wrap:wrap;color:var(--ink-2);font-size:13px}
.strip-wrap.lin .legend{display:flex}
.legend span::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:3px}
@media (max-width:760px){ .hud{gap:10px;padding:8px 8px 8px 14px} .hud .hd{font-size:18px;min-width:7ch} .hud .hn b{font-size:20px} .hud .hn:nth-child(3){display:none} .band{height:32px} .play{width:64px;height:64px} .play .tri{width:22px;height:22px} }

/* ---------- popovers ---------- */
.more{display:flex;gap:8px;margin-left:auto}
.pop-wrap{position:relative}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--ink-2);height:32px
}
.pill svg{width:16px;height:16px}
.pill:hover,.pill[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.badge{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;line-height:18px;text-align:center}
.badge.on{display:inline-block}
.pop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:45;min-width:260px;
  background:var(--page-2);border:1px solid var(--rule-strong);border-radius:14px;padding:14px 16px;
  box-shadow:0 16px 48px rgba(0,0,0,.18);display:none
}
.pop.open{display:block}
.pop-h{color:var(--ink-3);font-size:12px;margin:10px 0 8px}
.pop-h:first-child{margin-top:0}
.pop-link{color:var(--red);text-decoration:underline;text-underline-offset:2px;font-size:13px;margin-top:10px}
.pop select{font:inherit;color:var(--ink);background:var(--page);border:1px solid var(--rule-strong);border-radius:8px;padding:6px 10px;width:100%}
.seg.wrap{flex-wrap:wrap;border:0;padding:0;gap:6px}
.seg.wrap button{border:1px solid var(--rule-strong)}
.seg.wrap button[aria-pressed="true"]{border-color:var(--ink)}
@media (max-width:760px){
  .more{margin-left:0;width:100%;justify-content:flex-end}
  .pop{position:fixed;left:12px;right:12px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-width:0}
}

/* ---------- replay spotlight for major entries ---------- */
.spot{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:34;
  width:min(560px,calc(100vw - 32px));background:var(--page-2);border:1px solid var(--rule-strong);border-radius:18px;
  padding:22px 26px 24px;box-shadow:0 24px 70px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.2,1)
}
.spot.on{opacity:1;transform:translate(-50%,0)}
.spot .stamp{
  display:inline-block;font-family:var(--serif);font-weight:500;color:var(--red);border:2px solid var(--red);border-radius:6px;
  padding:3px 10px;font-size:15px;letter-spacing:.02em;transform:rotate(-3deg);transform-origin:center;margin-bottom:12px
}
.spot.on .stamp{animation:thump .5s cubic-bezier(.2,1.6,.3,1)}
@keyframes thump{0%{transform:rotate(-3deg) scale(2.2);opacity:0}55%{opacity:1}100%{transform:rotate(-3deg) scale(1)}}
.spot h3{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.4vw,36px);line-height:1.08;letter-spacing:-.02em}
.spot.on h3,.spot.on p{animation:rise .5s .18s both ease-out}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spot p{margin:8px 0 0;color:var(--ink-2);font-size:15px;max-width:52ch}
.spot .org{color:var(--ink-3);font-size:13px;margin-top:8px}
.spot .prog{position:absolute;left:26px;right:26px;bottom:10px;height:2px;background:var(--rule)}
.spot .prog i{display:block;height:100%;width:0;background:var(--red)}
.spot.on .prog i{animation:fill var(--hold,3s) linear forwards}
@keyframes fill{to{width:100%}}
@media (max-width:760px){ .spot{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:16px 18px 20px} }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;height:100%}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- masthead ---------- */
.mast{
  max-width:1180px;margin:0 auto;padding:56px 24px 28px;
  display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:end;
  border-bottom:2px solid var(--ink);
}
.mast h1{
  font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 30;
  font-size:clamp(40px,7vw,88px);line-height:.95;letter-spacing:-.02em;margin:0;
}
.mast h1 em{font-style:italic;font-weight:400}
.lede{max-width:52ch;color:var(--ink-2);margin:18px 0 0;font-size:16px}
.figures{display:flex;gap:36px;align-items:flex-end}
.figure{display:flex;flex-direction:column}
.figure b{
  font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,56px);line-height:1;letter-spacing:-.02em;
  font-variation-settings:"opsz" 144;
}
.figure b.red{color:var(--red)}
.figure span{color:var(--ink-3);font-size:13px;margin-top:6px}

/* ---------- controls ---------- */
.controls{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--page);border-bottom:1px solid var(--rule);
}
.controls-in{
  max-width:1180px;margin:0 auto;padding:12px 24px;
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
}
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;padding:2px}
.seg button{padding:5px 14px;border-radius:999px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.zoom{display:flex;align-items:center;gap:12px;flex:1;min-width:260px}
.zoom input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;max-width:260px;height:2px;background:var(--rule-strong);border-radius:2px
}
.zoom input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid var(--page);box-shadow:0 0 0 1px var(--red);cursor:pointer
}
.zoom input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid var(--page);cursor:pointer}
.zoom output{font-family:var(--serif);font-style:italic;color:var(--ink);min-width:19ch;white-space:nowrap}
.count{color:var(--ink-3);white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{
  padding:4px 10px;border-radius:999px;border:1px solid transparent;color:var(--ink-2);
  transition:color .15s,border-color .15s,background .15s
}
.filters button::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:1px}
.filters button[aria-pressed="false"]{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}
.filters button[aria-pressed="false"]::before{opacity:.3}
.filters button:hover{border-color:var(--rule-strong)}
.hint kbd{font-family:inherit;border:1px solid var(--rule-strong);border-radius:4px;padding:0 5px;font-size:12px}

/* category colours */
:root{
  --c-model:#a4302c; --c-product:#2f5fa8; --c-open:#2a7a4b; --c-research:#7a4c9a;
  --c-policy:#8a6a1d; --c-business:#4b5a4f; --c-hardware:#1e7a7a; --c-tools:#c45a1e;
}

/* ---------- register (vertical) ---------- */
.register{max-width:1180px;margin:0 auto;padding:8px 24px 120px}
.yr{
  display:grid;grid-template-columns:150px 1fr;align-items:start;
  border-top:1px solid var(--rule-strong);margin-top:44px;padding-top:0;
}
.yr:first-child{margin-top:0;border-top:0}
.yr-head{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--ctrl-h,62px));
  font-family:var(--serif);font-weight:300;font-size:64px;line-height:1;letter-spacing:-.03em;
  padding:22px 0;color:var(--ink);font-variation-settings:"opsz" 144;
}
.yr-head small{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-top:8px;letter-spacing:0}
.rows{display:grid}
.row{
  display:grid;grid-template-rows:1fr;opacity:1;
  /* --step is set per row by renderRegister, so a reveal cascades down the page
     instead of arriving as one shove. */
  transition:grid-template-rows .34s cubic-bezier(.22,.8,.24,1) var(--step,0ms),
             opacity .26s ease var(--step,0ms);
}
/* Collapsing never waits its turn: a staggered disappearance just reads as the
   page lagging behind the control that asked for it. */
.row.hide{grid-template-rows:0fr;opacity:0;pointer-events:none;transition-delay:0ms}
/* Rows off screen, or above the reader's line, are changed outright. Animating
   them would relayout the register every frame for motion nobody can see. */
.row.instant{transition:none}
.row>div{overflow:hidden;min-height:0}
.row-in{
  display:grid;grid-template-columns:96px 24px 1fr;gap:0 18px;
  padding:14px 0;border-top:1px solid var(--rule);
}
.row.t1 .row-in{padding:22px 0}
.gap{
  grid-column:1/-1;display:grid;grid-template-columns:96px 24px 1fr;gap:0 18px;color:var(--ink-3);font-style:italic;
  font-family:var(--serif);font-size:13px;padding:6px 0 2px;
}
.gap span{grid-column:2/-1}
.d{text-align:right;color:var(--ink-2);padding-top:3px;font-size:14px}
.row.t1 .d{color:var(--red);font-weight:600}
.row.t3 .d{color:var(--ink-3);font-size:13px}
.spine{position:relative}
.spine::before{
  content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--ink-3)
}
.row.t1 .spine::before{background:var(--red);width:12px;height:12px;left:6px;top:9px;box-shadow:0 0 0 4px var(--red-soft)}
.row.t2 .spine::before{background:var(--ink-2)}
.e{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%}
.e h3{
  margin:0;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;letter-spacing:-.005em
}
.row.t1 .e h3{font-size:clamp(26px,3.2vw,38px);font-weight:300;line-height:1.08;letter-spacing:-.015em;font-variation-settings:"opsz" 144}
.row.t3 .e h3{font-size:15px;color:var(--ink-2)}
.meta{color:var(--ink-3);font-size:13px;display:flex;gap:14px;flex-wrap:wrap}
.meta .org{color:var(--ink-2)}
.meta .cat::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.note{color:var(--ink-2);max-width:64ch;margin:4px 0 0;font-size:14px}
.row.t3 .note{display:none}
.no{color:var(--ink-3);font-size:12px;font-family:var(--serif);font-style:italic}
.e:hover h3{color:var(--red)}

/* ---------- strip (horizontal) ---------- */
.strip-wrap{position:relative;border-bottom:1px solid var(--rule);}
.strip{
  overflow-x:auto;overflow-y:hidden;position:relative;cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;
  -webkit-overflow-scrolling:touch;
}
.strip.dragging{cursor:grabbing;user-select:none}
.strip-in{position:relative;height:var(--h)}
.baseline{position:absolute;left:0;right:0;top:var(--base);height:2px;background:var(--ink)}
.tick{position:absolute;top:var(--base);width:1px;background:var(--rule-strong);height:14px;margin-top:-7px}
.tick.yr{height:36px;margin-top:-18px;background:var(--ink)}
.tick-l{
  position:absolute;top:calc(var(--base) + 9px);color:var(--ink-3);font-size:11px;white-space:nowrap
}
.tick-l.yr{
  font-family:var(--serif);font-size:20px;color:var(--ink);top:calc(var(--base) + 6px);font-weight:300;letter-spacing:-.02em
}
.tick-l.mo{opacity:0;transition:opacity .2s}
.strip.z2 .tick-l.mo{opacity:1}
.ev{position:absolute;left:var(--x);width:var(--w);top:0;bottom:0}
.ev .dot{
  position:absolute;left:-4px;width:8px;height:8px;border-radius:50%;background:var(--ink-2);
  top:calc(var(--base) - 4px);
}
.ev.t1 .dot{width:12px;height:12px;left:-6px;top:calc(var(--base) - 6px);background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.ev.t3 .dot{background:var(--ink-3);width:6px;height:6px;left:-3px;top:calc(var(--base) - 3px)}
.ev .stem{position:absolute;left:0;width:1px;background:var(--rule-strong)}
.ev.up .stem{bottom:calc(100% - var(--base));top:var(--y)}
.ev.down .stem{top:var(--base);height:calc(var(--y) - var(--base))}
.ev .lbl{
  position:absolute;left:6px;top:var(--y);transform:translateY(-100%);
  text-align:left;width:100%;padding:2px 0 4px;line-height:1.2;
  border-bottom:1px solid var(--rule-strong);
  transition:color .15s;
}
.ev.down .lbl{transform:none;border-bottom:0;border-top:1px solid var(--rule-strong);padding:4px 0 2px}
.ev .lbl b{display:block;font-family:var(--serif);font-weight:400;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.t1 .lbl b{font-size:17px;font-weight:500}
.ev.t3 .lbl b{font-size:12.5px;color:var(--ink-2);font-weight:400}
.ev .lbl i{display:block;font-style:normal;color:var(--ink-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.t1 .lbl i{color:var(--red)}
.ev:hover .lbl b,.ev.on .lbl b{color:var(--red)}
.ev.on .lbl{border-color:var(--red)}
.strip-foot{max-width:1180px;margin:0 auto;padding:14px 24px 120px;color:var(--ink-3);font-size:13px;display:flex;gap:24px;flex-wrap:wrap}

/* ---------- detail: a card, not a drawer ----------
   The same gesture as the Day 1 overture that opens the replay — the page steps
   back, one entry steps forward — at the scale of a single line rather than the
   whole screen. <dialog> supplies the top layer, the backdrop, Escape and the
   focus trap; @starting-style is what lets it animate in and out in pure CSS. */
.detail{
  position:fixed;inset:0;margin:auto;
  width:min(620px,calc(100vw - 32px));max-width:none;max-height:min(82vh,760px);
  padding:0;border:1px solid var(--rule-strong);border-radius:22px;
  background:var(--page-2);color:var(--ink);
  box-shadow:0 40px 120px rgba(0,0,0,.34);
  overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(20px) scale(.97) perspective(1000px) rotateX(8deg);
  transition:opacity .26s ease,transform .42s cubic-bezier(.2,.9,.25,1),
             overlay .42s allow-discrete,display .42s allow-discrete;
}
.detail[open]{opacity:1;transform:none}
@starting-style{
  .detail[open]{opacity:0;transform:translateY(20px) scale(.97) perspective(1000px) rotateX(8deg)}
}
.detail::backdrop{
  background:rgba(6,10,8,.46);opacity:0;
  transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete;
}
.detail[open]::backdrop{opacity:1}
@starting-style{ .detail[open]::backdrop{opacity:0} }
@supports (backdrop-filter:blur(1px)){ .detail::backdrop{backdrop-filter:blur(4px) saturate(.85)} }
body.modal{overflow:hidden}

.detail-in{padding:26px 30px 28px;display:grid;gap:10px;position:relative}
.detail .dd{
  font-family:var(--serif);font-weight:300;font-size:clamp(26px,4.4vw,38px);line-height:1;
  letter-spacing:-.025em;color:var(--red);font-variation-settings:"opsz" 144;padding-right:44px
}
.detail .dd small{
  display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3);
  margin-top:9px;font-style:italic;letter-spacing:0
}
.detail h2{margin:2px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.8vw,28px);line-height:1.18;letter-spacing:-.012em}
.detail p{margin:0;max-width:64ch;color:var(--ink-2)}
.detail .src{font-size:13px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:13px;margin-top:4px}
.detail .src a{color:var(--ink-2)}
.detail .x{
  position:absolute;top:2px;right:0;font-size:24px;line-height:1;padding:3px 9px;
  color:var(--ink-3);border-radius:9px;transition:color .15s,background .15s
}
.detail .x:hover{color:var(--red);background:var(--red-soft)}
/* The contents land a beat behind the card, the way the overture's date lands
   before its line. `rise` is the overture's own keyframe. */
.detail[open] .dd{animation:rise .42s .08s both cubic-bezier(.2,.9,.25,1)}
.detail[open] h2{animation:rise .42s .15s both cubic-bezier(.2,.9,.25,1)}
.detail[open] .meta,.detail[open] #dn,.detail[open] .src{animation:rise .42s .21s both cubic-bezier(.2,.9,.25,1)}

/* ---------- misc ---------- */
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{max-width:1180px;margin:0 auto;padding:0 24px 48px;color:var(--ink-3);font-size:13px}

@media (max-width:1000px){ .mast{grid-template-columns:1fr} }
@media (max-width:760px){
  .mast{padding-top:36px}
  .figures{gap:24px;flex-wrap:wrap}
  .yr{grid-template-columns:1fr}
  .yr-head{position:static;font-size:44px;padding:16px 0 4px}
  .row-in,.gap{grid-template-columns:64px 20px 1fr;gap:0 12px}
  .d{font-size:13px}
  .detail{
    width:100%;max-width:100%;max-height:86vh;margin:auto auto 0;
    border-radius:24px 24px 0 0;border-bottom:0;
    transform:translateY(26px);
  }
  @starting-style{ .detail[open]{transform:translateY(26px)} }
  .detail-in{padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  .detail .x{right:0;top:0}
  .controls-in{gap:10px 18px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- lively motion (Look → Motion) ----------
   Scroll-driven animations run on the compositor: no JavaScript, no scroll
   listener, no main-thread work per frame. Where the browser does not have
   them the @supports block never applies and the register is simply static,
   which is why this needs no fallback. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    :root[data-motion="lively"] .row:not(.hide) .row-in{
      animation:lift linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 30%;
    }
    :root[data-motion="lively"] .yr-head{
      animation:recede linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
  }
}
@keyframes lift{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes recede{from{opacity:1}to{opacity:.25}}

/* ---------- source kind + load failure ---------- */
.detail .src .skind{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.loaderr{max-width:1180px;margin:90px auto;padding:0 24px;font:400 17px/1.6 var(--sans);color:var(--ink-2)}
.loaderr button{margin-left:6px;color:var(--ink);border-bottom:1px solid var(--rule-strong)}
body.dataless .controls,body.dataless .band-wrap,body.dataless .run,body.dataless .figures,body.dataless .onthis{display:none}