/* provably.fast v2 prototype (#352): "lab notebook, live".
   One serif for the story, one sans for reading, one mono for data. Two themes
   share every token; the canvas reads the same tokens through getComputedStyle. */

:root {
  --display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: var(--sans);
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;

  /* Ink (dark) */
  --bg: #07080a;
  --bg-2: #0e1013;
  --bg-glass: #0b0c0fd9;
  --ink: #f2efe6;
  --ink-2: #bcb9ae;
  --muted: #807d75;
  --line: #1e2024;
  --line-2: #2c2f35;
  --record: #3ddc8a;
  --record-ink: #062a17;
  --accent: #7b88f7;
  --accent-ink: #0b0d24;
  --platform: #4cc6cf;
  --muted-node: #5d6068;
  --coral: #eb5757;
  --amber: #f0bf00;
  --violet: #b18cff;
  --graph-experiment: #67b4ff;
  --pink: #ec8ad6;
  --glow: .9;
}

/* Paper (light). Applied when the system prefers light, unless the reader chose dark,
   and whenever the reader chose light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pf-outline: #4c5dd7;
    --bg: #f3efe4; --bg-2: #ebe5d6; --bg-glass: #f3efe4e6;
    --ink: #15140f; --ink-2: #47443b; --muted: #68645a;
    --line: #dcd5c4; --line-2: #c9c0ab;
    --record: #08703c; --record-ink: #f3efe4;
    --accent: #3a49c4; --accent-ink: #f3efe4;
    --platform: #0b6b74; --muted-node: #a39d8d; --glow: .25; --coral: #ab3524; --amber: #7a5b00; --violet: #6a3fd0; --pink: #b0307f; --graph-experiment: #176bb0;
  }
}
:root[data-theme="light"] {
  --pf-outline: #4c5dd7;
  --bg: #f3efe4; --bg-2: #ebe5d6; --bg-glass: #f3efe4e6;
  --ink: #15140f; --ink-2: #47443b; --muted: #68645a;
  --line: #dcd5c4; --line-2: #c9c0ab;
  --record: #08703c; --record-ink: #f3efe4;
  --accent: #3a49c4; --accent-ink: #f3efe4;
  --platform: #0b6b74; --muted-node: #a39d8d; --glow: .25; --coral: #ab3524; --amber: #7a5b00; --violet: #6a3fd0; --pink: #b0307f; --graph-experiment: #176bb0;
}

* { box-sizing: border-box; }
/* The page never scrolls sideways. body's `overflow-x: hidden` alone did not stop it on phones: a
   figure that overflowed for a moment while it animated widened the layout viewport to 468px for
   good, which also pushed the fixed tab bar's last tab off screen. `clip` on both elements does,
   without making either a scroll container. Wide content scrolls in its own box. */
html { background: var(--bg); color-scheme: dark; scroll-padding-top: 76px; overflow-x: clip; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
a { color: inherit; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 400; }
p { margin: 0; }
.mono { font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; }
.eyebrow { color: var(--muted); font-family: var(--sans); font-size: 14px; font-weight: 500; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 12px; background: var(--accent); color: var(--accent-ink); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* Bar */
.bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  height: 60px; padding: 0 var(--gutter);
  background: linear-gradient(var(--bg) 0, color-mix(in srgb, var(--bg) 70%, transparent) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* The bar reads like the address: the site's name in its colour leads to the site's home, and
   .provably.fast after it to every challenge. */
.brand { display: inline-flex; align-items: center; font-weight: 600; letter-spacing: -.01em; }
.brand-site { --site: var(--accent); display: inline-flex; align-items: center; gap: 10px; color: var(--site); text-decoration: none; }
.brand-site[data-site="proven"] { --site: var(--platform); }
.brand-home { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.brand-home:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.brand-mark { width: 26px; height: 26px; }
/* Between 900px and about 1,080px the nav, the auth button and the call to action outgrew the bar;
   the nav now shrinks and scrolls inside it, as it does on phones. */
.bar-nav { display: flex; gap: 4px; margin-left: 12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bar-nav a { padding: 6px 10px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; transition: color .2s, background-color .2s; }
.bar-nav a:hover, .bar-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* A challenge site's own bar (site-host/worker.js) may hold menus: postquantum.provably.fast's
   signature families. Its menus overflow the bar, so the bar neither scrolls nor shrinks: the
   controls beside it keep their icons alone, the sign-in name and call to action yield from 1081
   to 1260px, and below 1080px the sections move to the tab bar, as on that site's own pages. */
.bar-nav:has(.nav-menu) { overflow: visible; flex-shrink: 0; }
.bar:has(.nav-menu) :is(.kbar-open span, .kbar-open kbd) { display: none; }
.bar:has(.nav-menu) .kbar-open { width: 36px; padding: 0; justify-content: center; }
.bar:has(.nav-menu) .tg-link { gap: 0; width: 36px; padding: 0; justify-content: center; font-size: 0; }
@media (min-width: 1081px) and (max-width: 1260px) {
  .bar:has(.nav-menu) :is(.auth-label, .bar-end .cta) { display: none; }
  .bar:has(.nav-menu) .auth-button { padding: 0 9px; }
}
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 14px; white-space: nowrap; cursor: pointer; transition: color .2s, background-color .2s; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-menu summary:hover, .nav-menu[open] summary { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* The autoresearch club on Telegram, as on postquantum.provably.fast: a pill in the bar, a second
   button beside the hero's, and a line where people bring their agent. */
.tg-link { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.tg-link:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tg-link svg { flex: none; width: 15px; height: 15px; }
.tg-link.tg-club { gap: 10px; height: auto; padding: 14px 24px; font-size: 17px; }
.tg-club svg { width: 18px; height: 18px; }
.join-club a { color: var(--accent); font-weight: 600; text-decoration: none; }
.join-club a:hover { text-decoration: underline; }
.join-club { margin: 0; color: var(--muted); font-size: 14px; }
/* Below 1320px it and the search button keep their icons alone, so the sections keep their room. */
@media (max-width: 1320px) { .bar .tg-link { gap: 0; width: 36px; padding: 0; justify-content: center; font-size: 0; } }
.cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; font-size: 14px;
  transition: transform .3s var(--ease), background-color .2s;
}
.cta:hover { transform: translateY(-1px); background: var(--record); color: var(--record-ink); }
.theme-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; display: grid; place-items: center; }
.theme-toggle span { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border: 1.5px solid var(--ink); }

.data-banner { display: flex; align-items: center; gap: 10px; margin: 0 var(--gutter); padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--amber) 7%, transparent); color: var(--ink-2); font-size: 13.5px; }
.data-banner::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent); }
.capture #data-banner { visibility: hidden; }
.capture #github-auth { display: none !important; }

/* Stage: the time-lapse is the hero. */
.stage {
  position: relative; min-height: min(calc(100svh - 60px), 980px); min-height: max(640px, min(calc(100svh - 60px), 980px));
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 1fr auto auto;
  gap: 0 32px; padding: 24px var(--gutter) 20px; isolation: isolate;
}
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; cursor: crosshair; }
.stage-copy { grid-column: 1; grid-row: 1; align-self: end; max-width: 440px; padding-bottom: 28px; pointer-events: none; }
.figure {
  font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: clamp(56px, 7vw, 112px); line-height: .9; letter-spacing: -.02em; color: var(--record);
  font-variant-numeric: tabular-nums;
}
.figure.empty { color: var(--muted); text-shadow: none; }
.figure-line { font-family: var(--display); font-weight: 420; letter-spacing: -.012em; color: var(--ink-2); font-size: clamp(19px, 1.8vw, 26px); line-height: 1.1; color: var(--ink); }
.stage-stats { margin-top: 18px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.stage-stats b { color: var(--ink); font-weight: 500; }

.feed {
  grid-column: 2; grid-row: 1 / 3; align-self: start; margin-top: 8px; max-height: 64vh; overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.feed-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.feed-head h2 { font-size: 14px; color: var(--ink); font-weight: 600; }
.feed-live { color: var(--muted); }
.feed-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; scrollbar-width: thin; }
.feed-item button {
  all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  animation: feed-in .5s var(--ease) both;
}
.feed-item button:hover, .feed-item button:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.feed-item img, .feed-item .anon { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); }
.feed-text { font-size: 13px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-text b { color: var(--ink); font-weight: 500; }
.feed-text .rec { color: var(--record); font-weight: 600; }
.feed-time { grid-column: 2; color: var(--muted); font-size: 11px; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-6px); } }

.scrubber { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding-top: 6px; }
.play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease); }
.play:hover { transform: scale(1.06); }
.play span { width: 0; height: 0; border-left: 12px solid var(--bg); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.play[aria-pressed="true"] span { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(90deg, var(--bg) 35%, transparent 35% 65%, var(--bg) 65%); }
.scrub-track { position: relative; height: 44px; }
.scrub-steps { position: absolute; inset: 4px 0 10px; width: 100%; height: 30px; overflow: visible; }
.scrub-steps .base { stroke: var(--line-2); stroke-width: 1; }
.scrub-steps .step { fill: none; stroke: var(--record); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.scrub-steps .area { fill: color-mix(in srgb, var(--record) 12%, transparent); }
.scrub-steps .tick { fill: var(--record); }
.scrub-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: ew-resize; }
.scrub-range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.scrub-range::-moz-range-track { height: 44px; background: transparent; }
.scrub-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 44px; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent); }
.scrub-range::-moz-range-thumb { width: 2px; height: 44px; border: 0; border-radius: 0; background: var(--ink); }
.scrub-date { color: var(--ink); min-width: 15ch; text-align: right; }
.stage-key { grid-column: 1 / -1; grid-row: 4; color: var(--muted); padding-top: 10px; max-width: 80ch; }
.stage-tip {
  position: absolute; z-index: 5; max-width: 280px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: var(--ink); color: var(--bg); line-height: 1.35; transform: translate(-50%, calc(-100% - 14px));
}

/* Chapters */
.chapter { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 5.5vw, 80px) var(--gutter) 0; }
.chapter-head { display: grid; gap: 14px; margin-bottom: clamp(20px, 3vw, 40px); }
.chapter-title { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.012em; max-width: 22ch; text-wrap: balance; }
.chapter-note { margin-top: 28px; color: var(--muted); max-width: 80ch; }

.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.people li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.people a { display: grid; gap: 14px; padding: 22px; height: 100%; background: var(--bg); text-decoration: none; transition: background-color .3s; }
.people a:hover { background: var(--bg-2); }
.people img, .people .anon { width: 56px; height: 56px; border-radius: 50%; background: var(--line-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--hue, var(--line-2)); }
.people .who { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 22px; line-height: 1; color: var(--ink); }
.people .since { color: var(--muted); }
.people .counts { color: var(--ink-2); }

.cta-big { padding: 16px 26px; font-size: 17px; }

/* Person and record pages */
.page { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--gutter) 40px; }
.back { display: inline-block; margin-bottom: 22px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }
.page-title { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.015em; overflow-wrap: anywhere; }
.page-sub { margin-top: 12px; color: var(--muted); }
.page-sub a { color: var(--ink-2); }
/* Hairlines drawn by each tile, not a background through the gaps, so a short last row leaves no filled cell. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.facts div { padding: 22px 4px 22px 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 6px 0 0; font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts dd.small { font-family: var(--sans); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.fact-sub { display: block; margin-top: 8px; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.page-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: 56px; }
.page h2 { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 26px; line-height: 1; margin-bottom: 20px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--line-2); }
.timeline li { position: relative; padding: 0 0 22px 18px; }
.timeline li::before { content: ""; position: absolute; left: -23px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--kind, var(--muted)); }
.timeline .when { color: var(--muted); display: block; }
.timeline a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.timeline .rec { color: var(--record); }
.pending { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--muted); display: grid; gap: 6px; background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.pending strong { color: var(--ink-2); font-weight: 500; }
.side > * + * { margin-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 14px; }
.chip img { width: 22px; height: 22px; border-radius: 50%; }
.record-figure { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: clamp(60px, 8vw, 120px); line-height: .9; letter-spacing: -.02em; color: var(--record); }
.record-figure.not { color: var(--ink); }
.record-head { display: grid; gap: 18px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.note-quote { font-family: var(--display); font-weight: 420; letter-spacing: -.015em; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.15; color: var(--ink); max-width: 28ch; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--mono); font-size: 11px; }
.badge.ok { color: var(--record); }
.badge.dim { color: var(--muted); }
.empty-note { color: var(--muted); }

/* Reveal on scroll where the browser supports scroll-driven animation; fully
   visible everywhere else. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chapter-head, .people li {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

/* Page transitions: the old page lifts away, the new one settles in. */
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-group(record-figure), ::view-transition-group(person-avatar) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
::view-transition-old(record-figure), ::view-transition-new(record-figure) { height: 100%; object-fit: contain; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The stage needs ~1200 px for disc, copy and feed side by side (v2.js matches). */
@media (max-width: 1200px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; min-height: 0; }
  .stage-copy { grid-row: 1; align-self: start; padding-top: calc(min(84vw, 400px) + 56px); }
  .scrubber { grid-row: 2; }
  .stage-key { grid-row: 3; }
  .feed { grid-column: 1; grid-row: 4; max-height: 360px; margin-top: 20px; }
}
@media (max-width: 1020px) {
  .page-cols { grid-template-columns: 1fr; }
}

/* Tablet: the bar's pills never wrap; below 900px the header call to action yields to the page's own. */
.cta, .auth-button { white-space: nowrap; }
@media (max-width: 900px) {
  .bar-end .cta { display: none; }
}

/* Phone */
@media (max-width: 640px) {
  .bar { gap: 12px; height: 56px; }
  html { scroll-padding-top: 104px; }
  .bar { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; row-gap: 6px; }
  .bar-nav { order: 3; width: 100%; margin: 0 -10px; overflow-x: auto; scrollbar-width: none; }
  .bar-nav a { padding: 6px 10px; white-space: nowrap; }
  .brand-home { display: none; }
  .cta { padding: 8px 14px; font-size: 13px; }
  .stage { padding-top: 8px; }
  .stage-copy { padding-bottom: 12px; }
  .scrubber { grid-template-columns: 40px 1fr; gap: 12px; }
  .play { width: 40px; height: 40px; }
  .scrub-date { grid-column: 1 / -1; text-align: left; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people a { padding: 16px; gap: 10px; }
  .people .who { font-size: 18px; overflow-wrap: anywhere; }
  .facts dd { font-size: 24px; }
}

/* Workshop board */
.ws-head { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.ws-title { font-size: clamp(34px, 4.2vw, 58px); max-width: 18ch; margin-top: 14px; text-wrap: balance; }
.ws-lede { margin-top: 22px; max-width: 56ch; font-size: 18px; color: var(--ink-2); text-wrap: pretty; }
.ws-head-side { display: grid; gap: 24px; justify-items: start; }
.ws-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 32px; margin: 0; }
.ws-stats dt { color: var(--muted); font-size: 13px; }
.ws-stats dd { margin: 4px 0 0; font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

.ws-pinned { margin-top: 40px; }
.pin-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pin {
  display: grid; gap: 12px; align-content: start; height: 100%; padding: 20px; border-radius: 16px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--record) 35%, var(--line)); background: color-mix(in srgb, var(--record) 5%, var(--bg));
  transition: transform .35s var(--ease), border-color .3s;
}
.pin:hover { transform: translateY(-3px); border-color: var(--record); }
.pin-figure { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 38px; line-height: .9; color: var(--record); letter-spacing: -.02em; }
.pin-title { color: var(--ink); line-height: 1.35; text-wrap: pretty; }

.ws-controls { position: sticky; top: 60px; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 48px; padding: 12px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; }
.fchip { border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; font: 500 13px var(--sans); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.fchip:hover { color: var(--ink); border-color: var(--muted); }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fchip-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.ws-search, .ws-sort { font: 14px var(--sans); color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; }
.ws-search { width: min(240px, 100%); }
.ws-count { margin-top: 18px; color: var(--muted); }

.ws-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ws-day { padding: 28px 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.ws-row { border-top: 1px solid var(--line); }
.ws-link { display: grid; grid-template-columns: 1fr 200px; grid-template-areas: "meta strip" "title strip" "foot strip"; gap: 8px 40px; align-items: center; padding: 20px 4px; text-decoration: none; transition: padding .4s var(--ease), background-color .3s; }
.ws-link:hover { padding-left: 14px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ws-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-title-line { color: var(--ink); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.35; font-weight: 450; text-wrap: pretty; overflow-wrap: anywhere; }
.ws-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); }
.ws-link > .ws-meta { grid-area: meta; }
.ws-link > .ws-title-line { grid-area: title; }
.ws-link > .ws-foot { grid-area: foot; }
.ws-link > .strip { grid-area: strip; }
/* The plain thread list (thread-pages/worker.js): no activity strip, and the heading's rule
   is the list's first. */
.ws-list.no-strip .ws-link { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "foot"; }
.ws-list.no-strip > .ws-row:first-child { border-top: 0; }
.page .ws-pinned h2 { font: 400 11px/1.4 var(--mono); margin: 0; }
.topic { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.topic::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.topic-platform::before { background: var(--platform); }
.topic-mathematics::before { background: var(--violet); }
.topic-falcon::before { background: var(--pink); }
.topic-quantum::before { background: var(--platform); }
.faces { display: inline-flex; align-items: center; }
.faces img, .faces .anon { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); margin-left: -6px; }
.faces img:first-child { margin-left: 0; }
.faces-more { margin-left: 6px; }
.strip { width: 100%; height: 22px; overflow: visible; }
.strip-base { stroke: var(--line-2); stroke-width: .6; vector-effect: non-scaling-stroke; }
.strip-tick { fill: var(--accent); opacity: .8; }

/* Thread */
.thread-head { display: grid; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.thread-title { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.015em; max-width: 30ch; text-wrap: balance; overflow-wrap: anywhere; }
.thread-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 96px); margin-top: 40px; align-items: start; }
.thread-side { position: sticky; top: 84px; }
.thread-side .cta { justify-content: center; }
.posts { list-style: none; margin: 0; padding: 0; }
.post { position: relative; padding: 26px 0 26px 22px; border-left: 2px solid var(--hue, var(--line-2)); margin-bottom: 4px; }
.post + .post { border-top: 1px solid var(--line); }
.post.is-reply { margin-left: clamp(12px, 3vw, 40px); }
.post.is-removed { color: var(--muted); padding: 14px 0 14px 22px; }
.post:target { background: color-mix(in srgb, var(--hue, var(--accent)) 6%, transparent); }
.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.post-head img, .post-head .anon { width: 32px; height: 32px; border-radius: 50%; }
.post-who { display: grid; gap: 2px; }
.post-name { color: var(--ink); font-weight: 600; text-decoration: none; }
a.post-name:hover { text-decoration: underline; }
.post-sub { color: var(--muted); }
.agent-chip { padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); }
.reply-to { margin-left: auto; color: var(--muted); text-decoration: none; }
.reply-to:hover { color: var(--ink); }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 72ch; }
.post-body.is-long:not(.is-open) { max-height: 17em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.more-posts { margin: 0 0 20px; background: transparent; border: 1px solid var(--line-2); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.post-part { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); overflow-wrap: anywhere; }
/* Replying from the thread page: a plain form, no script. */
.reply-form { display: grid; gap: 10px; margin-top: 12px; }
.reply-form label { color: var(--muted); font-size: 13px; }
.reply-form textarea, .reply-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; }
.reply-form textarea { resize: vertical; min-height: 9em; }
.reply-form textarea:focus-visible, .reply-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.reply-form .cta { justify-self: start; }
.thread-side section + section { margin-top: 28px; }

@media (max-width: 1020px) {
  .ws-head { grid-template-columns: 1fr; }
  .thread-cols { grid-template-columns: 1fr; }
  .thread-side { position: static; order: -1; }
}
@media (max-width: 640px) {
  .ws-link { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "foot" "strip"; gap: 8px; }
  .ws-stats dd { font-size: 28px; }
  .ws-controls { position: static; }
  .ws-link > .strip { display: none; }
  .ws-search, .ws-sort { flex: 1 1 140px; }
  .post { padding-left: 14px; }
  .post.is-reply { margin-left: 10px; }
  .reply-to { margin-left: 0; width: 100%; }
}

/* Workshop sub-views */
.ws-tabs { display: flex; gap: 4px; margin-top: 28px; padding: 4px; width: fit-content; border: 1px solid var(--line-2); border-radius: 999px; }
.ws-tab { padding: 7px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; transition: color .2s, background-color .2s; }
.ws-tab:hover { color: var(--ink); }
.ws-tab[aria-current="page"] { background: var(--ink); color: var(--bg); }
.graph-tabs { flex-wrap: wrap; border-radius: 22px; }
.graph-away { margin-left: auto; font-size: 13px; }
.ws-head-tight { grid-template-columns: 1fr; padding-bottom: 0; border-bottom: 0; }

/* Research graph and map. */
.edge-key { width: 18px; height: 2px; background: var(--line-2); }
.edge-key.supports { background: var(--record); }
.edge-key.refutes { border-top: 2px dashed var(--coral); background: transparent; }
.edge-key.reproduces { background: var(--platform); }
.edge-key.lineage { background: #91908e; }
.research-graph-svg { display: block; width: 100%; height: 100%; overflow: hidden; touch-action: none; }
.research-graph-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.world-canvas-host { position: relative; height: 560px; border: 1px solid var(--line); background: #08090a; overflow: hidden; border-radius: 6px; }
.world-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.world-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.world-marker-label { position: absolute; pointer-events: none; padding: 4px 8px; background: #16171a; color: #f2efe6; border: 1px solid var(--line-2); border-radius: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.world-atlas { border: 1px solid var(--line); background: var(--bg-2); border-radius: 6px; padding: 14px; max-height: 640px; overflow: auto; }
.world-atlas h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.world-atlas ul, .world-atlas .atlas-markers { list-style: none; margin: 0; padding: 0; }
.atlas-biome { border-top: 1px solid var(--line); padding: 10px 0; }
.atlas-biome:first-child { border-top: 0; padding-top: 0; }
.atlas-biome-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.atlas-fly { background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-align: left; }
.atlas-fly:hover { color: var(--accent); }
.atlas-status { font-size: 10px; color: var(--muted); }
.atlas-status-sea { color: var(--platform); }
.atlas-summary { color: var(--muted); font-size: 12px; margin: 4px 0 6px; }
.atlas-marker { display: block; width: 100%; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; padding: 3px 0; text-align: left; }
.atlas-marker:hover { color: var(--accent); }
.atlas-marker-active { color: var(--accent); }
.atlas-note { color: var(--muted); font-size: 11px; margin: 2px 0 6px 10px; }
.atlas-kind { color: var(--muted); font-size: 10px; margin: 0 0 2px 10px; text-transform: none; }
.atlas-attribution { color: var(--muted); font-family: var(--mono); font-size: 10px; margin: 0 0 6px 10px; }
.world-empty { color: var(--muted); font-size: 13px; padding: 10px 0 0; }
.graph-tools { display: flex; gap: 6px; }
.inspect { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.page .inspect h2 { font-size: 26px; line-height: 1.1; margin: 0; }
.inspect-summary { color: var(--ink-2); font-size: 15px; line-height: 1.5; max-height: 14em; overflow: auto; overflow-wrap: anywhere; }
.inspect-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; align-items: center; }
.inspect-facts dt { color: var(--muted); font-size: 12.5px; }
.inspect-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.world-canvas-host { height: min(70svh, 680px); min-height: 420px; border-radius: 16px; }
.world-atlas { border-radius: 16px; }

@media (max-width: 640px) {
  .graph-tools { display: none; }
  .world-canvas-host { height: 360px; min-height: 0; }
  .ws-tabs { width: 100%; }
  .ws-tab { flex: 1; text-align: center; padding: 7px 8px; font-size: 13px; }
}
.ws-head-tight .ws-title { font-size: clamp(28px, 3.2vw, 44px); max-width: none; }
.ws-head-tight .ws-lede { margin-top: 12px; }

.post-body { white-space: normal; }
.post-body p { margin: 0 0 .9em; white-space: pre-wrap; }
.post-body ul { margin: 0 0 .9em; padding-left: 1.2em; }
.post-body li { margin: .25em 0; }
.post-body code { font: .88em var(--code); padding: .1em .35em; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.post-body b { color: var(--ink); font-weight: 600; }
.post-body pre { margin: 0 0 .9em; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); overflow-x: auto; font: .85em/1.5 var(--code); white-space: pre; }
.post-body pre code { padding: 0; border: 0; background: none; font: inherit; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 .9em; font-size: .92em; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.post-body th { background: var(--bg-2); font-weight: 600; }

/* The latest record link, status dots and the challenge page. */

.latest { display: grid; max-width: 100%; gap: 6px; margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 16px; text-decoration: none; pointer-events: auto; background: var(--bg-glass); transition: border-color .3s, transform .35s var(--ease); }
.latest:hover { border-color: var(--record); transform: translateY(-2px); }
.latest-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.latest .figure { font-size: clamp(36px, 3.2vw, 50px); line-height: 1; }
.latest .figure-line { font-size: clamp(16px, 1.3vw, 19px); }


/* Graph and map, first class: home previews and wide pages. */
.explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.explore-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; transition: border-color .3s, transform .35s var(--ease); }
.explore-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.explore-art { display: block; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 9%, var(--bg-2)) 0, var(--bg-2) 75%); border-bottom: 1px solid var(--line); }
#explore-map .explore-art { background: radial-gradient(circle at 50% 45%, #13202c 0, #0b1118 80%); }
.preview-svg { display: block; width: 100%; height: 100%; padding: 6%; }
.pv-node { fill: var(--bg); stroke: color-mix(in srgb, var(--accent) 65%, var(--line-2)); stroke-width: 2; animation: pv-in .6s var(--ease) both; }
.pv-edge { fill: none; stroke: var(--muted); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: .7; }
.pv-biome { opacity: .55; }
.pv-marker { fill: #f2efe6; stroke: #0b1118; stroke-width: 3; animation: pv-in .6s var(--ease) both; }
@keyframes pv-in { from { opacity: 0; } }
.explore-text { display: grid; gap: 8px; padding: 20px 22px 22px; align-content: start; }
.explore-name { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 25px; line-height: 1.05; color: var(--ink); }
.explore-copy { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.explore-meta { color: var(--muted); }
@media (max-width: 760px) { .explore { grid-template-columns: 1fr; } }

.scope-note { margin-top: 18px; }
.record-head + .ws-tabs { margin-top: 24px; }

/* Research workspace: graph and map in one pane, the selected record beside
   them, the discussion under them. */
.workspace { display: grid; gap: 16px; margin-top: 32px; }
.ws-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px 24px; align-items: start; }
.pane { min-width: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.pane-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.seg-btn { border: 0; background: transparent; color: var(--muted); font: 500 14px var(--sans); padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pane-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; color: var(--muted); flex: 1 1 auto; }
.pane-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pane-stage { position: relative; height: min(66svh, 680px); min-height: 420px; }
.pane-graph, .pane-map { position: absolute; inset: 0; }
.pane-graph { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 0, var(--bg) 70%); }
.pane-graph[hidden], .pane-map[hidden] { display: none; }
.pane .world-canvas-host { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.pane-none { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.pane-none[hidden] { display: none; }
.workspace.is-none .pane-graph, .workspace.is-none .pane-map, .workspace.is-none .pane-top, .workspace.is-none .pane-list, .workspace.is-none .graph-tools { display: none; }
.workspace.is-none .pane-stage { height: auto; min-height: 0; }
.workspace.is-none .pane-none { position: static; }
.pane-status { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); }
.rail { position: sticky; top: 84px; display: grid; gap: 18px; max-height: calc(100svh - 100px); overflow: auto; scrollbar-width: thin; }
.rail-hint { margin: 0; }
.rail-talk { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; }
.rail-h { font: 500 11px var(--mono); color: var(--ink); margin: 0; }
.cmd { display: grid; gap: 8px; }
.cmd code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font: 11.5px/1.5 var(--code); color: var(--ink-2); overflow-wrap: anywhere; }
.cmd .fchip { justify-self: start; }
.pane-list { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.pane-list[hidden] { display: none; }
.pane-list summary { cursor: pointer; color: var(--ink-2); }
.atlas-box ul { list-style: none; margin: 12px 0 0; padding: 0; }
.board-title { font-family: var(--display); font-weight: 540; letter-spacing: -.028em; font-size: 30px; margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.ws-row.is-linked { background: color-mix(in srgb, var(--record) 7%, transparent); }
.pinned-to { color: var(--muted); }
.pinned-to a { color: var(--ink); }

@media (max-width: 1020px) {
  .ws-main { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .pane-stage { height: 420px; min-height: 0; }
  .pane-legend { display: none; }
}

/* Craft details. */
::selection { background: color-mix(in srgb, var(--record) 32%, transparent); color: var(--ink); }
html { scrollbar-color: var(--line-2) transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Text links draw their underline in. */
.timeline a, .page-sub a, .pinned-to a, .chapter-note a, .post-body a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease), color .2s;
}
.timeline a:hover, .page-sub a:hover, .pinned-to a:hover, .chapter-note a:hover, .post-body a:hover { background-size: 100% 1px, 100% 1px; }

/* Arrows nudge toward where they go. */
.cta .arr { display: inline-block; transition: transform .35s var(--ease); }
.cta:hover .arr { transform: translate(2px, -2px); }
.back { transition: color .2s, transform .35s var(--ease); }
.back:hover { transform: translateX(-3px); }

/* The hero arrives in order. */
@media (prefers-reduced-motion: no-preference) {
  .stage-copy > * { animation: rise .9s var(--ease) both; }
  .stage-copy > :nth-child(2) { animation-delay: .08s; }
  .stage-copy > :nth-child(3) { animation-delay: .16s; }
  .stage-copy > :nth-child(4) { animation-delay: .26s; }
  .feed, .scrubber { animation: rise .9s .32s var(--ease) both; }
}

/* Loading: placeholders where data is on its way, never a blank. */
.feed-list:empty::before, #home-challenges:empty::before, #people-grid:empty::before, .ws-list:empty::before {
  content: ""; display: block; height: 140px; border-radius: 14px;
  background: linear-gradient(90deg, var(--bg-2) 0, color-mix(in srgb, var(--ink) 6%, var(--bg-2)) 50%, var(--bg-2) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
#home-challenges:empty::before, #people-grid:empty::before { grid-column: 1 / -1; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Footer */
.foot { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; max-width: var(--max); margin: 96px auto 0; padding: 48px var(--gutter) 40px; border-top: 1px solid var(--line); color: var(--muted); }
.foot-mark { display: inline-flex; align-items: center; gap: 10px; align-self: start; color: var(--ink); font: 600 17px var(--display); letter-spacing: -.01em; }
.foot-mark .brand-mark { width: 24px; height: 24px; }
.foot h2 { margin: 2px 0 14px; color: var(--ink); font: 600 13px var(--sans); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.foot a { color: var(--muted); text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--ink); }
.foot .foot-mark { color: var(--ink); }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot-mark { grid-column: 1 / -1; } }

.leader[hidden] { display: none; }

/* Leaderboard */
.lb-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lb-table th { text-align: left; font: 500 10.5px var(--mono); color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lb-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-table tbody tr { transition: background-color .2s; }
.lb-table tbody tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lb-rank { width: 48px; color: var(--muted); }
.lb-who a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.lb-who img, .lb-who .anon { width: 28px; height: 28px; border-radius: 50%; }
.lb-best a { font: 600 18px var(--display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }

@media (max-width: 1020px) { .leader { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .lb-wide { display: none; } }
@media (max-width: 640px) { .lb-opt { display: none; } }

.lb-best, .lb-table td.lb-opt:last-child { white-space: nowrap; }

/* The journey chapter: the spiral sits in the same column as every other chapter. */
.journey .chapter-head { margin-bottom: 8px; }
.journey .stage { min-height: min(calc(100svh - 120px), 900px); padding-left: 0; padding-right: 0; }

/* Hero: the current site's challenge card, on v2's tokens. */
.leader { display: block; padding: 0; border: 0; background: none; }
.card { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 34px) clamp(18px, 3.4vw, 44px) 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent), 0 24px 60px -30px #000000b0; }
.card-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.card-brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-size: 17px; font-weight: 600; }
.card-brand .brand-mark { width: 26px; height: 26px; }
.card-arcs { position: relative; margin-top: 26px; }
.arcs { display: block; width: 100%; height: 200px; overflow: visible; }
.arcs-pulse { fill: none; stroke: var(--record); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: arcs-pulse 2.6s ease-out infinite; }
@keyframes arcs-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.arcs-tick { fill: var(--muted); font-family: var(--mono); font-size: 12px; }
.card-key { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin: 12px 0 0; color: var(--muted); }
.key-entry { display: inline-flex; gap: 9px; align-items: center; }
.key-post { display: inline-block; width: 2px; height: 11px; border-radius: 1px; background: var(--muted); }
.key-reply { display: inline-block; width: 14px; height: 7px; border: 1.5px solid var(--muted); border-bottom: 0; border-radius: 7px 7px 0 0; }
@keyframes arcs-in { from { opacity: 0; } }
@media (max-width: 640px) { .arcs { height: 150px; } }

/* Leaderboard: every submission, and contributors across areas. */
.lb-when { white-space: nowrap; color: var(--muted); }
.th-sort { all: unset; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap; }
.th-sort:hover, [aria-sort="descending"] .th-sort { color: var(--ink); }
[aria-sort="descending"] .th-sort::after { content: " ↓"; }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.contrib-table td.is-sorted { color: var(--ink); font-weight: 600; }
.lb-total { text-align: right; }
.contrib-table .lb-opt { text-align: right; }


/* Hero contributions: a lane per contributor. */
.card .arcs { height: auto; }
.lane-rule { stroke: var(--line); stroke-width: 1; }
.lane-label { cursor: pointer; }
.lane-label:focus { outline: none; }
.lane-label:focus-visible circle:first-child { stroke: var(--accent); stroke-width: 2; }
.lane-name { fill: var(--ink-2); font: 500 13px var(--sans); }
.lane-label:hover .lane-name { fill: var(--ink); text-decoration: underline; }
.lane-reply { fill: none; stroke-width: 1; stroke-opacity: .2; }
.lane-post { stroke-width: 2; stroke-linecap: round; stroke-opacity: .85; }
.arcs.is-narrow .lane-post { stroke-width: 1.2; stroke-opacity: .55; }
.lane-result { fill: var(--bg-2); stroke: var(--muted); stroke-width: 1.6; }
.lane-record { fill: var(--record); stroke: var(--bg-2); stroke-width: 1.5; }
.lane-credit { fill: none; stroke: var(--record); stroke-width: 1.6; stroke-dasharray: 2.2 2; }
.lane-mark:focus { outline: none; }
.lane-mark:focus-visible > * { stroke: var(--ink); stroke-width: 2; }
/* A column per day, and the standing records named where they were set. */
.wk-day { stroke: var(--line); stroke-dasharray: 2 4; }
.wk-flag { font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; fill: var(--record); paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; stroke-linejoin: round; }
.wk-flag.is-ram, .arcs-pulse.is-ram { fill: var(--accent); }
.arcs-pulse.is-ram { fill: none; stroke: var(--accent); }
/* The pointer readout: a hairline at its moment, and a card for what is under it. */
.wk-hair { stroke: var(--ink); stroke-opacity: 0; stroke-width: 1; pointer-events: none; transition: stroke-opacity .15s; }
.arcs.is-scrubbing .wk-hair { stroke-opacity: .22; }
/* scale, not transform: the play leaves an inline transform on every mark. */
.arcs .is-hot { scale: 1.45; }
.arcs .lane-post.is-hot { stroke-width: 3; stroke-opacity: 1; scale: 1 1.5; }
.wk-tip { position: absolute; top: 0; left: 0; z-index: 3; display: grid; gap: 3px; max-width: 280px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); color: var(--ink-2); font-size: 13px; line-height: 1.35; pointer-events: none; }
.wk-tip-who { display: flex; gap: 8px; align-items: center; color: var(--ink); font-weight: 600; }
.wk-tip-who img { width: 20px; height: 20px; border-radius: 50%; }
.wk-tip-when { color: var(--muted); font: 11.5px var(--mono); }
.arcs.has-focus .lane:not(.is-lit) { opacity: .18; }
.arcs.has-focus .lane-reply:not(.is-lit) { opacity: .06; }
.arcs.has-focus .lane-reply.is-lit { stroke-opacity: .85; stroke-width: 1.6; }
.lane, .lane-reply { transition: opacity .2s; }
.key-result { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--record); }
.key-diamond { display: inline-block; width: 8px; height: 8px; background: var(--record); transform: rotate(45deg); }
.key-credit { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.6px dashed var(--record); }
.arcs.is-entering .lane-post, .arcs.is-entering .lane-result, .arcs.is-entering .lane-record { animation: arcs-in .5s ease-out both; }
.arcs.is-entering .lane-reply { animation: arcs-in .9s ease-out .2s both; }
.arcs.is-entering :is(.wk-flag, .arcs-pulse) { animation: arcs-in .6s ease-out .7s both; }

/* The discussion column beside the graph and map. */
@media (min-width: 1021px) { .ws-main { grid-template-columns: minmax(0, 1fr) 380px; } }
.rail { gap: 14px; max-height: calc(min(66svh, 680px) + 96px); padding-right: 4px; }
.rail-head { display: grid; gap: 4px; }
.rail-title { font: 500 11px var(--mono); color: var(--ink); margin: 0; }
.rail-back { all: unset; cursor: pointer; color: var(--muted); font-size: 12px; width: fit-content; }
.rail-back:hover { color: var(--ink); }
.rail-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rt-btn { all: unset; box-sizing: border-box; display: grid; gap: 6px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.rt-btn:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.rt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.rt-title { color: var(--ink); font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.rt-foot .faces img, .rt-foot .faces .anon { width: 18px; height: 18px; }
@media (max-width: 1020px) { .rail { max-height: 520px; } }

.page .rail-title { font: 500 11px var(--mono); color: var(--ink); margin: 0; }
.chapter-head .ws-lede { margin-top: 0; }

/* The research graph in v2's language: a dotted canvas, quiet section panels,
   display titles, mono labels and hairline edges in each relation's colour. */
.pane-graph { background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }
/* The map sits in the same frame, its backdrop matched to the pane. */
.pane-map { background: var(--bg-2); }
.pane .world-canvas-host canvas { display: block; }
.pane .world-marker-label { background: var(--ink); color: var(--bg); border: 0; border-radius: 8px; font: 500 12px var(--sans); padding: 5px 9px; }
.pane-top { background: color-mix(in srgb, var(--bg-2) 92%, transparent); }

.pane-legend[hidden], .graph-tools[hidden] { display: none; }

/* Ledger v2: filters, lineage, record chips. */
.terr-select { padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.terr-select[hidden] { display: none; }
.pane-top .asof { margin-left: auto; }
.pane-stage .graph-tools { position: absolute; top: 12px; right: 12px; z-index: 2; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pane-stage .graph-tools .fchip { border: 0; background: transparent; color: var(--ink-2); min-width: 28px; height: 28px; padding: 0 8px; font-size: 13px; }
.pane-stage .graph-tools .fchip:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.pane-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 8px 14px; border-top: 1px solid var(--line); }
.pane-foot .pane-status { padding: 0; border: 0; }
.pane-foot .pane-legend { flex: 0 1 auto; gap: 4px 12px; font-size: 10.5px; }
.graph-export { display: inline-flex; gap: 6px; }
.pane-foot .edge-key { width: 12px; }
.asof { display: flex; align-items: center; gap: 10px; flex: 0 1 420px; }
.asof-label, .asof-value { color: var(--muted); white-space: nowrap; }
/* Fixed width: a label that changes length would resize the range under the pointer. */
.asof-value { flex: none; width: 21ch; overflow: hidden; text-overflow: ellipsis; }
.asof-range { flex: 1; accent-color: var(--record); }
.lin { display: grid; gap: 8px; margin-top: 4px; }
.lin-list { display: grid; gap: 6px; }
.lin-item { display: grid; gap: 4px; }
.lin-edge { color: var(--muted); font-size: 10.5px; }
.lin-edge.e-supports { color: var(--record); } .lin-edge.e-refutes { color: var(--coral); } .lin-edge.e-reproduces { color: var(--platform); } .lin-edge.e-tests, .lin-edge.e-combines { color: var(--accent); }
.rchip { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .2s; }
.rchip:hover { border-color: var(--line-2); }
.rchip-type { font-size: 10px; color: var(--muted); }
.rchip-type.t-lead { color: var(--accent); } .rchip-type.t-experiment { color: var(--record); } .rchip-type.t-reproduction { color: var(--platform); } .rchip-type.t-source { color: var(--amber, #c3aa5c); }
.rchip-title { color: var(--ink); font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rchip-by { color: var(--muted); font-size: 11px; }
.rchip-note { color: var(--ink-2); font-size: 12.5px; font-style: normal; }
.chip-quiet { padding: 4px 10px; font-size: 12.5px; color: var(--ink-2); }
.lb-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-roles .chip { padding: 2px 8px; font-size: 11px; }
.side .lin-list { margin-bottom: 8px; }
/* v2 edges and records on the graph. */
.edge-key.tests { background: var(--accent); }
.edge-key.combines { background: linear-gradient(90deg, var(--accent) 40%, transparent 40% 60%, var(--accent) 60%); }
.edge-key.informed { border-top: 2px dotted var(--muted); background: transparent; height: 0; }

.lb-table th { white-space: nowrap; }
.lb-table td.lb-nw, .lb-table td .badge { white-space: nowrap; }
@media (max-width: 640px) { .asof { flex-wrap: wrap; max-width: none; } .asof-value { width: 100%; } }

/* Toward a phone (Season 2): the memory meter on the hero card and the memory boards. */
.lane-record.is-ram { fill: var(--accent); }
.key-diamond.key-ram { background: var(--accent); }

/* Sign-in, joining and your submissions */
button.cta { border: 0; cursor: pointer; font-family: inherit; }
button.cta:disabled { opacity: .6; cursor: progress; }
.auth-button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.auth-button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.auth-button:disabled { opacity: .6; cursor: progress; }
.auth-icon { width: 18px; height: 18px; flex: none; }
.auth-avatar { border-radius: 50%; }
.me-body { margin-top: 32px; display: grid; gap: 16px; justify-items: start; }
.me-table { width: 100%; }
.me-table .lb-table { font-size: 14px; }
.me-details { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); min-width: 260px; }
.me-details .me-note { color: var(--ink-2); flex-basis: 100%; }
.me-details a { color: var(--ink-2); }
.me-id { color: var(--muted); white-space: nowrap; }
.badge.warn { color: var(--coral); }
@media (max-width: 720px) { .auth-label { display: none; } .auth-button { padding: 0 9px; } }
.me-section { margin: 40px 0 8px; display: grid; gap: 8px; }
.me-section .me-body { margin-top: 8px; }
.me-tools { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.me-search { flex: 1 1 180px; min-width: 0; border: 1px solid var(--line-2); background: transparent; color: var(--ink); padding: 7px 14px; border-radius: 999px; font: 400 14px var(--sans); }

/* Live pages show the brand once, in the bar; a capture keeps it on the card. */
html:not(.capture) .card-brand { display: none; }
html:not(.capture) .card-head { justify-content: flex-start; }

/* Someone without a public profile: a neutral silhouette, never an empty ring. */
.anon { position: relative; display: inline-block; flex: none; overflow: hidden; background-color: var(--line-2); }
.anon::after { content: ""; position: absolute; inset: 20%; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.4'/%3E%3Cpath d='M3 22c.9-4.9 4.4-7.6 9-7.6s8.1 2.7 9 7.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.4'/%3E%3Cpath d='M3 22c.9-4.9 4.4-7.6 9-7.6s8.1 2.7 9 7.6z'/%3E%3C/svg%3E") center / contain no-repeat; }

.latest[hidden] { display: none; }

/* Bring your agent: one panel, the action on the left, the three steps on the right. */
.join-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: 24px; background: var(--bg-2); }
.join-lead { display: grid; gap: 20px; align-content: start; }
.join-lead .chapter-title { margin: 0; }
.join-sub { margin: 0; max-width: 34ch; color: var(--muted); font-size: 18px; line-height: 1.45; }
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.join-n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.join-steps h3 { margin: 2px 0 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.join-steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) { .join-panel { grid-template-columns: 1fr; } }
.about-page .ws-lede { margin-bottom: clamp(28px, 4vw, 44px); }

/* Hero card: the question and the action on top, two figure tiles, where it was measured. */
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.card-title { margin: 0; max-width: 40ch; color: var(--ink-2); font: 500 clamp(18px, 1.7vw, 22px)/1.3 var(--display); letter-spacing: -.01em; }
/* A milestone beside the tile's label: a proof that fits a phone. */
.built-by { margin: 8px 0 32px; }
.page-solo { margin-top: 56px; }
.lineage-panel { margin-top: 56px; padding: clamp(20px, 3vw, 32px); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.lineage-panel > .fchip { margin-top: 20px; }
.lg-fig { margin: 0 0 28px; }
.lg-scroll { overflow-x: auto; border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); }
.lg-svg { display: block; margin: 0 auto; max-width: none; }
.lg-edge { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.lg-edge.is-chain { stroke: var(--accent); stroke-width: 2.4; }
.lg-node circle { fill: var(--muted); stroke: var(--bg); stroke-width: 2; transition: r .15s; }
.lg-node.t-lead circle { fill: var(--accent); } .lg-node.t-experiment circle { fill: var(--record); } .lg-node.t-reproduction circle { fill: var(--platform); } .lg-node.t-source circle { fill: var(--amber, #c3aa5c); }
.lg-node:not(.is-chain) circle { opacity: .6; }
.lg-node:hover circle, .lg-node:focus circle { opacity: 1; stroke: var(--ink); }
.lg-node.is-chain circle { stroke: var(--ink); stroke-width: 2; }
.lg-node.is-this circle { stroke: var(--record); stroke-width: 3; }
.lg-label { fill: var(--ink-2); font-size: 11px; font-family: var(--mono, monospace); }
.lg-node.is-this .lg-label { fill: var(--record); }
.lg-key { display: inline-block; width: 18px; height: 0; border-top: 1.5px solid var(--line-2); vertical-align: middle; margin-right: 6px; }
.lg-key.is-chain { border-top: 2.5px solid var(--accent); }
.lg-fig .pane-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; color: var(--muted); }
.lin-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .lin-cols { grid-template-columns: 1fr; } }
.card-empty { margin: 24px 0 0; color: var(--muted); font-size: 18px; }

/* The brief as a block to copy, and the three steps as a line. */
.prompt { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); overflow: hidden; }
.prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 16px; border-bottom: 1px solid var(--line); }
.prompt-name { color: var(--muted); font: 13px var(--code); text-decoration: none; transition: color .2s; }
.prompt-name:hover { color: var(--ink); }
.prompt-copy { padding: 7px 16px; border: 0; border-radius: 999px; background: var(--record); color: var(--record-ink); font: 600 13px var(--sans); cursor: pointer; }
.prompt-copy:disabled { opacity: .6; cursor: progress; }
.prompt-text { margin: 0; padding: 16px 16px 4px; max-height: 8.4em; overflow: hidden; color: var(--ink-2); font: 13px/1.6 var(--code); white-space: pre-wrap; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.prompt-status { margin: 0; padding: 0 16px 12px; color: var(--muted); font-size: 13px; }
.prompt-status:empty { display: none; }
.join-steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 0 0 30px; }
.join-steps li:last-child { padding-bottom: 0; }
.join-steps li:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 6px; left: 13.5px; width: 1px; background: linear-gradient(var(--tone), var(--next)); opacity: .55; }
.join-steps li { --tone: var(--accent); --next: var(--platform); }
.join-steps li:nth-child(2) { --tone: var(--platform); --next: var(--record); }
.join-steps li:nth-child(3) { --tone: var(--record); }
.join-steps .join-n { border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 14%, var(--bg-2)); color: var(--tone); font-weight: 600; }
.join-page .prompt { max-width: 640px; margin-top: 32px; }
.join-page .join-steps { max-width: 640px; margin-top: 40px; }
.join-page .join-club { margin-top: 24px; }

/* Motion. Springs are written as linear() easings; nothing moves for reduced motion or in a
   capture (the script settles every element at once there). */
:root {
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.077, 1.121 24%, 1.149 26.3%, 1.159, 1.163 30.6%, 1.157, 1.143 35.4%, 1.083 44%, 1.04 51.2%, 1.009 59.4%, 0.993 70.1%, 0.996 85.3%, 1);
  --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.3%, 1);
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform 1s var(--spring-soft); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }
.join-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tone, var(--accent)) 11%, transparent), transparent 62%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.join-panel:hover::before { opacity: 1; }
.join-panel { position: relative; }
.prompt-copy { transition: transform .45s var(--spring), background-color .25s, color .25s; }
.prompt-copy.is-done { transform: scale(1.06); background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .prompt-copy { transition: none; }
}

/* Colour: each hero tile, the join panel and the "Beat it" action carry the graph's palette. */
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.card-top .cta { background: var(--record); color: var(--record-ink); font-weight: 600; }
/* The frontier's code and its diff from the pinned Stwo, beside the call to action. */
.src-icon { width: 16px; height: 16px; flex: none; }
.card-top .cta:hover{ background: color-mix(in srgb, var(--record) 80%, var(--ink)); }
.join-panel::after { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--platform), var(--record), transparent); }

/* With the motion runtime: the script owns the headline, the chart and the brief; these are
   their resting and starting states. */
.arcs.is-pending { opacity: 0; }
.arcs :is(.lane-post, .lane-result, .lane-record, .lane-credit) { transform-box: fill-box; transform-origin: center; transition: scale .15s; }
.prompt-line { display: block; }
.prompt-line + .prompt-line { margin-top: 1.6em; }
.card-top .cta { transition: transform .3s var(--ease), background-color .2s, translate .6s var(--spring); }
.prompt-copy { transition: transform .45s var(--spring), background-color .25s, color .25s, translate .6s var(--spring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Footer: the record, live. */
.foot-lead { display: grid; gap: 14px; align-content: start; }
.foot-live { display: inline-flex; align-items: center; gap: 8px; max-width: 34ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; text-decoration: none; }
.foot-live:hover { color: var(--ink); }
.live-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--record); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--record); border-radius: 50%; animation: ping 2.8s cubic-bezier(0, 0, .2, 1) infinite; }
@media (max-width: 760px) { .foot-lead { grid-column: 1 / -1; } }
/* Search palette. */
.kbar-open { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--muted); font: 500 13.5px var(--sans); cursor: pointer; transition: color .2s, border-color .2s; }
.kbar-open:hover { color: var(--ink); border-color: var(--muted); }
.kbar-open svg { width: 15px; height: 15px; }
.kbar-open kbd { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--muted); font: 500 11.5px var(--sans); }
@media (max-width: 1320px) { .kbar-open span, .kbar-open kbd { display: none; } .kbar-open { width: 36px; padding: 0; justify-content: center; } }
.kbar { width: min(640px, calc(100vw - 32px)); max-height: min(560px, 76vh); margin: 12vh auto 0; padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-2); color: var(--ink-2); box-shadow: 0 30px 80px rgb(0 0 0 / .5), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.kbar[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: kbar-in .32s cubic-bezier(.2, .9, .1, 1); }
.kbar::backdrop { background: rgb(4 5 8 / .55); backdrop-filter: blur(6px); animation: kbar-fade .25s ease; }
@keyframes kbar-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes kbar-fade { from { opacity: 0; } }
.kbar-input { width: 100%; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 17px var(--sans); outline: none; }
.kbar-input::-webkit-search-cancel-button { display: none; }
.kbar-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.kbar-group { padding: 12px 12px 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kbar-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); cursor: pointer; }
.kbar-item img, .kbar-item .anon { width: 20px; height: 20px; border-radius: 50%; }
.kbar-item.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.kbar-item.is-record .kbar-label { color: var(--record); }
.kbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbar-hint { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.kbar-mark { width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--muted); }
.kbar-mark.g-pages { background: var(--ink-2); } .kbar-mark.g-actions { background: var(--amber); } .kbar-mark.g-results { background: var(--record); } .kbar-mark.g-threads { background: var(--accent); }
.kbar-empty { padding: 20px 12px; color: var(--muted); }
.kbar-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
/* Leaderboard: rows that rise in, the heatmap and the fine print. */
@keyframes row-in { from { opacity: 0; transform: translateY(var(--shift, 12px)); } }
.contrib-table td.heat { color: var(--ink); text-align: center; }
.contrib-table td.is-zero { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.fine-print { margin-top: 28px; }
.fine-print summary { width: max-content; color: var(--ink-2); font-size: 14px; cursor: pointer; }
.fine-print summary:hover { color: var(--ink); }
.fine-print .chapter-note { margin-top: 12px; }

/* Record page: the receipt. */
.receipt { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 28px 0 8px; }
.rc-panel { margin: 0; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.rc-title { color: var(--ink); font-size: 14px; font-weight: 600; }
.rc-svg { display: block; width: 100%; height: auto; margin: 10px 0 6px; overflow: visible; }
.rc-cap { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rc-axis { stroke: var(--line-2); }
.rc-frontier { stroke: var(--ink-2); stroke-width: 1.2; }
.rc-bar { stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 3 3; }
.rc-small { fill: var(--muted); font: 11px var(--sans); }
.rc-label { fill: var(--ink); font: 600 12px var(--sans); }
.rc-band { fill: color-mix(in srgb, var(--muted) 30%, transparent); stroke: var(--muted); }
.rc-band.is-ok { fill: color-mix(in srgb, var(--record) 28%, transparent); stroke: var(--record); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--record) 45%, transparent)); }
.rc-point { fill: var(--ink-2); stroke: var(--bg-2); stroke-width: 2; }
.rc-point.is-ok { fill: var(--record); }
.rc-step { fill: none; stroke: var(--record); stroke-width: 2; stroke-opacity: .8; }
.rc-dot { fill: color-mix(in srgb, var(--accent) 70%, transparent); }
.rc-dot.is-record { fill: var(--record); }
.rc-this { fill: none; stroke: var(--ink); stroke-width: 2; }
.rc-this.is-record { stroke: var(--record); fill: color-mix(in srgb, var(--record) 30%, transparent); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--record) 60%, transparent)); }
.rc-phone { stroke: var(--amber); stroke-dasharray: 3 4; }
.rc-phone-label { fill: var(--amber); }
/* Person page: calendar, orbit, story by day. */
.calendar { margin: 28px 0 8px; }
.calendar h2 { margin-bottom: 12px; }
.cal-strip { display: flex; align-items: flex-end; gap: 4px; height: 70px; padding: 0 2px; overflow-x: auto; }
.cal-bar { flex: 0 0 12px; height: var(--h); border-radius: 4px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); transform-origin: bottom; }
.cal-bar.is-quiet { height: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: none; }
.cal-bar.has-result { background: linear-gradient(var(--record), color-mix(in srgb, var(--record) 55%, var(--accent))); box-shadow: 0 0 12px color-mix(in srgb, var(--record) 60%, transparent); }
.cal-axis { display: flex; justify-content: space-between; max-width: 100%; margin: 8px 2px 0; color: var(--muted); font-size: 12px; }
html.has-motion .cal-bar { animation: cal-in .7s cubic-bezier(.2, .9, .1, 1) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes cal-in { from { transform: scaleY(0); } }
.orbit-wrap .orbit { display: block; width: 100%; max-width: 300px; height: auto; margin: 6px 0 4px; overflow: visible; }
.orbit-ring { fill: none; stroke: var(--line); stroke-dasharray: 2 5; }
.orbit-spoke { stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
.orbit-thread { fill: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 60%, transparent)); transform-box: fill-box; transform-origin: center; }
.orbit-thread.is-platform { fill: var(--platform); }
.orbit-result { fill: var(--bg-2); stroke: var(--muted); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.orbit-result.is-record { fill: var(--record); stroke: var(--record); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--record) 70%, transparent)); }
.orbit-core { fill: var(--bg-2); stroke: var(--line-2); }
.timeline li.day { padding-bottom: 10px; color: var(--ink); font-weight: 600; font-size: 14px; }
.timeline li.day::before { background: var(--ink-2); border-color: var(--ink-2); }
.timeline li.day + li { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .cal-bar { animation: none; } }
.asof-play { margin-right: 8px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12.5px var(--sans); cursor: pointer; }
.asof-play:hover { color: var(--ink); border-color: var(--accent); }
.data-banner[hidden] { display: none; }
/* The memory staircase. */
.mem-stairs { position: relative; width: 100%; }
.mem-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mem-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.mem-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.has-motion .mem-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .2s; }
html.has-motion .is-in .mem-line, html.has-motion .mem-stairs.is-in .mem-line { stroke-dashoffset: 0; }
.mem-phone { stroke: var(--amber); stroke-dasharray: 3 4; }
.mem-phone-label { fill: var(--amber); font: 11px var(--sans); }
.mem-label { fill: var(--muted); font: 11.5px var(--sans); }
.mem-label.is-now { fill: var(--ink); font-weight: 600; }
.mem-end { fill: var(--accent); }
.mem-step { fill: var(--accent); }
.mem-step.is-lit { fill: color-mix(in srgb, var(--accent) 35%, transparent); stroke: var(--accent); stroke-width: 2; }
.mem-face-ring { fill: var(--bg-2); stroke: var(--accent); stroke-width: 1.5; }
.mem-togo { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 2 3; }
.mem-togo-label { fill: var(--ink-2); font: 11.5px var(--sans); }
.mem-under-label { fill: var(--amber); font: 600 11.5px var(--sans); }
.is-compact .mem-under-label { font-size: 10.5px; }
.is-compact .mem-label, .is-compact .mem-phone-label, .is-compact .mem-togo-label { font-size: 10.5px; }
.badge.phone { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.record-figure.is-memory { color: var(--accent); }
.rc-wide { grid-column: 1 / -1; }
/* People directory. */
.people-page .people { margin-top: 26px; }
.people li { background: var(--bg); }
.people a { position: relative; gap: 12px; transition: background-color .3s, transform .45s cubic-bezier(.2, .9, .1, 1); }
.people a:hover { transform: translateY(-2px); }
.people img, .people .anon { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--hue, var(--line-2)), 0 0 22px color-mix(in srgb, var(--hue, var(--accent)) 45%, transparent); }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc-best { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--record) 45%, var(--line)); border-radius: 999px; color: var(--record); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pc-best.is-record { background: color-mix(in srgb, var(--record) 14%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--record) 30%, transparent); }
.mini-sky { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.mini-sky .mini-bar { flex: 0 0 5px; border-radius: 2px; background: var(--hue, var(--accent)); opacity: .85; }
.mini-sky .mini-bar.has-result { background: var(--record); opacity: 1; box-shadow: 0 0 6px color-mix(in srgb, var(--record) 60%, transparent); }
html.has-motion .people li { animation: row-in .6s cubic-bezier(.2, .9, .1, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
/* Profile. */
.pf-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 36px; align-items: center; margin-top: 18px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--hue) 16%, var(--bg-2)) 0, var(--bg-2) 62%); overflow: hidden; }
.pf-ring { position: relative; width: clamp(104px, 11vw, 148px); aspect-ratio: 1; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, var(--hue), var(--accent), var(--record), var(--hue)); box-shadow: 0 0 40px color-mix(in srgb, var(--hue) 45%, transparent); }
html.has-motion .pf-ring { animation: ring-turn 14s linear infinite; }
html.has-motion .pf-ring > * { animation: ring-turn 14s linear infinite reverse; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
.pf-ring img, .pf-ring .anon { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg-2); object-fit: cover; }
.pf-id { display: grid; gap: 10px; }
.pf-name { margin: 0; color: var(--ink); font: 600 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.pf-sub { margin: 0; color: var(--muted); font-size: 14.5px; }
.pf-sub a { color: var(--ink-2); }
.pf-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-role { --tone: var(--accent); padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--tone) 45%, var(--line)); border-radius: 999px; color: var(--tone); font-size: 12.5px; font-weight: 500; background: color-mix(in srgb, var(--tone) 10%, transparent); }
.pf-role.r-originator { --tone: var(--pink); } .pf-role.r-implementer { --tone: var(--record); } .pf-role.r-reproducer { --tone: var(--platform); } .pf-role.r-sourcer { --tone: var(--amber); } .pf-role.r-steward { --tone: var(--coral); } .pf-role.r-helper, .pf-role.r-tester { --tone: var(--violet); } .pf-role.r-falsifier { --tone: var(--coral); }
.pf-sig { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.pf-fig { --tone: var(--ink); display: grid; gap: 6px; padding: 18px 18px 4px 0; color: inherit; text-decoration: none; }
.pf-fig.is-time { --tone: var(--record); } .pf-fig.is-memory { --tone: var(--accent); } .pf-fig.is-accent { --tone: var(--violet); }
.pf-fig-num { color: var(--tone); font: 600 clamp(30px, 3.2vw, 44px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
a.pf-fig:hover .pf-fig-num { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.pf-fig-label { color: var(--muted); font-size: 13px; }
.pf-stats { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13.5px; }
@media (max-width: 640px) { .pf-hero { grid-template-columns: 1fr; } }
.profile .page-cols { margin-top: 36px; }
.pf-main > * + * { margin-top: 44px; }
/* Ideas they started. */
.ideas-lede { margin: 6px 0 16px; color: var(--muted); font-size: 14.5px; }
.idea-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.idea { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, .7fr) minmax(130px, .8fr); align-items: center; gap: 0; }
.ideas:not(.is-all) .idea.is-extra { display: none; }
html.has-motion .idea { animation: row-in .6s cubic-bezier(.2, .9, .1, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.idea-card { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: inherit; text-decoration: none; transition: border-color .2s, transform .4s cubic-bezier(.2, .9, .1, 1); }
.idea-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateX(2px); }
.idea-title { color: var(--ink); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idea-meta { color: var(--muted); font-size: 12.5px; }
.idea-joined, .idea-out { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 34px; min-height: 40px; }
.idea-joined::before, .idea-out::before { content: ""; position: absolute; left: 4px; top: 50%; width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--violet)); opacity: .7; }
.idea.has-record .idea-out::before { background: linear-gradient(90deg, var(--violet), var(--record)); box-shadow: 0 0 8px color-mix(in srgb, var(--record) 50%, transparent); opacity: 1; }
.idea-joined .faces img, .idea-joined .faces .anon { width: 26px; height: 26px; }
.idea-count { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.idea-count.is-quiet, .idea-open { color: var(--muted); font-size: 13px; }
.idea-record { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid color-mix(in srgb, var(--record) 45%, var(--line)); border-radius: 999px; color: var(--record); font-size: 12.5px; font-weight: 600; text-decoration: none; background: color-mix(in srgb, var(--record) 10%, transparent); }
.idea-record img, .idea-record .anon { width: 18px; height: 18px; border-radius: 50%; }
.idea-more { margin-top: 12px; padding: 7px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 13px var(--sans); cursor: pointer; }
.idea-more:hover { color: var(--ink); border-color: var(--accent); }
@media (max-width: 760px) { .idea { grid-template-columns: 1fr; gap: 6px; } .idea-joined, .idea-out { padding-left: 16px; min-height: 0; } .idea-joined::before, .idea-out::before { width: 8px; left: 2px; } }
/* Profile results and story. */
.pf-results .rc-panel { margin-top: 12px; }
.pf-cards { display: flex; gap: 10px; margin-top: 12px; padding-bottom: 6px; overflow-x: auto; }
.pf-card { flex: 0 0 auto; display: grid; gap: 8px; min-width: 150px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: inherit; text-decoration: none; transition: border-color .2s, transform .4s cubic-bezier(.2, .9, .1, 1); }
.pf-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--record) 50%, var(--line)); }
.pf-card.is-record { border-color: color-mix(in srgb, var(--record) 55%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--record) 60%, transparent), 0 0 18px color-mix(in srgb, var(--record) 14%, transparent); }
.pf-card-fig { color: var(--ink); font: 600 24px var(--display); letter-spacing: -.02em; }
.pf-card.is-record .pf-card-fig { color: var(--record); }
.pf-card .badge { justify-self: start; }
.pf-card-meta { color: var(--muted); font-size: 12px; }
.pf-story:not(.is-all) li.is-extra { display: none; }
/* Worked alongside. */
.circle-wrap .circle { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible; }
.circle-link { opacity: .55; stroke-linecap: round; }
.circle-node circle { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 35%, transparent)); transition: opacity .2s; }
.circle-node:hover circle { opacity: .8; }
.circle-name { fill: var(--muted); font: 10px var(--sans); }
.circle-self-ring { fill: var(--bg-2); stroke-width: 3; filter: drop-shadow(0 0 10px currentColor); }
/* Research: thread cards, the conversation, the minimap. */
.rt-spark { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 8px; }
.rt-spark span { flex: 0 0 4px; border-radius: 1px; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.thread-record { display: inline-grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline; margin-top: 24px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--record) 45%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--record) 8%, var(--bg-2)); color: inherit; text-decoration: none; box-shadow: 0 0 22px color-mix(in srgb, var(--record) 12%, transparent); }
.thread-record-label { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.thread-record-fig { color: var(--record); font: 600 26px var(--display); letter-spacing: -.02em; }
.thread-record-by { color: var(--ink-2); font-size: 13.5px; }
.post { padding: 18px 20px; margin-bottom: 12px; border: 1px solid var(--line); border-left: 3px solid var(--hue, var(--line-2)); border-radius: 14px; background: var(--bg-2); }
.post + .post { border-top: 1px solid var(--line); }
.post.is-removed { padding: 12px 20px; background: transparent; }
@media (prefers-reduced-motion: reduce) { .people li, .idea { animation: none; } .pf-ring, .pf-ring > * { animation: none; } }
/* Phones, and below 1080px a bar with menus (as on postquantum.provably.fast's own pages): the
   sections move to a tab bar at the bottom. */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 12px; color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; transition: color .2s; }
.tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.2, .9, .1, 1); }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a[aria-current="page"] svg { stroke: var(--accent); transform: translateY(-1px); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
@media (max-width: 760px) {
  .bar-nav { display: none; }
  .tabbar { display: grid; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1080px) {
  .bar-nav:has(.nav-menu) { display: none; }
  body:has(.nav-menu) .tabbar { display: grid; }
  body:has(.nav-menu) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
/* While the record loads, the card holds its place. */
.card-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 0 24px; }
.card-skeleton .sk { display: block; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, transparent); animation: sk-pulse 1.6s ease-in-out infinite; }
.sk-title { grid-column: 1 / -1; height: 30px; width: min(520px, 70%); }
.sk-tile { height: 260px; }
@keyframes sk-pulse { 50% { opacity: .5; } }
@media (max-width: 640px) { .card-skeleton { grid-template-columns: 1fr; } .sk-tile { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .card-skeleton .sk { animation: none; } }
.capture .card-skeleton { display: none; }
/* Grid columns may shrink below their content, so a scrolling row of cards stays inside. */
.page-cols > *, .pf-main { min-width: 0; }
/* Research constellation. */
.research-graph-svg.cn { cursor: grab; touch-action: none; }
.research-graph-svg.cn:active { cursor: grabbing; }
.cn-territory { fill: var(--tone); font: 600 16px var(--sans); }
.cn-axis-line { stroke: var(--line-2); }
.cn-axis-tick { stroke: var(--muted); }
.cn-axis-label { fill: var(--muted); font: 13px var(--sans); }
.cn-axis-label.is-name { fill: color-mix(in srgb, var(--muted) 70%, transparent); }
.cn-link { fill: none; stroke-width: var(--link-width, 2px); stroke-linecap: round; opacity: var(--link-opacity, .8); transition: opacity .3s, stroke-width .3s; }
.cn-link.is-hidden { opacity: 0; }
.cn-node { cursor: pointer; outline: none; transition: opacity .3s; }
.cn-orb { transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.2, .9, .1, 1) var(--d, 0ms), opacity .5s ease var(--d, 0ms); }
.cn:not(.is-in) .cn-orb { transform: scale(0); opacity: 0; }
.cn:not(.is-in) .cn-label, .cn:not(.is-in) .cn-link { opacity: 0; }
.cn-halo { fill: var(--tone); opacity: .1; transition: opacity .3s; }
.cn-core { fill: color-mix(in srgb, var(--tone) 22%, var(--bg)); stroke: var(--tone); stroke-width: 2; transition: stroke-width .3s; }
.cn-dot { fill: var(--tone); }
.cn-face-ring { fill: var(--bg); stroke: var(--tone); stroke-width: 1.2; }
.cn-label { fill: var(--ink-2); font: 500 13px var(--sans); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; transition: opacity .5s ease calc(var(--d, 0ms) + .2s), fill .2s; }
.cn-node:hover .cn-halo, .cn-node:focus-visible .cn-halo, .cn-node.is-selected .cn-halo { opacity: .3; }
.cn-node:hover .cn-label, .cn-node.is-selected .cn-label { fill: var(--ink); }
.cn-node.is-selected .cn-core { stroke-width: 3.2; }
.cn-node:focus-visible .cn-core { stroke: var(--ink); }
.cn.has-focus .cn-node:not(.is-lit) { opacity: .2; }
.cn.has-focus .cn-link:not(.is-lit) { opacity: .08; }
.cn.has-focus .cn-link.is-lit:not(.is-hidden) { opacity: 1; stroke-width: max(3px, var(--link-width, 2px)); }
.cn-link.is-pruned:not(.is-lit) { display: none; }
.cn:not(.has-focus) .cn-node.is-quiet:not(.is-hidden):not(.is-selected) { opacity: .35; }
.graph-tools .fchip[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.cn-node.is-hidden { opacity: 0; pointer-events: none; }
.cn-node.is-hidden .cn-orb { transform: scale(.2); }
.cn.is-far .cn-label { opacity: 0; }
.cn.is-far .cn-node:hover .cn-label, .cn.is-far .cn-node.is-selected .cn-label { opacity: 1; }
.cn-card { --tone: var(--accent); position: absolute; z-index: 3; width: 290px; padding: 14px 16px; transform: translateY(-50%); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line-2)); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgb(0 0 0 / .45), 0 0 24px color-mix(in srgb, var(--tone) 14%, transparent); pointer-events: none; animation: cn-card-in .22s ease; }
.cn-card.is-left { transform: translate(-100%, -50%); }
@keyframes cn-card-in { from { opacity: 0; } }
.cn-card-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--tone); font-size: 12px; font-weight: 600; }
.cn-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px var(--tone); }
.cn-card-title { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cn-card-text { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.cn-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--ink-2); font-size: 12.5px; }
.cn-card-foot img, .cn-card-foot .anon { width: 18px; height: 18px; border-radius: 50%; }
.cn-card-meta { color: var(--muted); }
.cn-card-hint { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .cn-orb, .cn-label { transition: none; } }
/* Plain words: dotted terms explain themselves on hover or focus. */
.term { position: relative; border-bottom: 1px dotted currentColor; cursor: help; outline: none; }
.term::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: 280px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink-2); font: 400 13px/1.45 var(--sans); letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 0 12px 30px rgb(0 0 0 / .35); opacity: 0; transform: translate(-50%, 4px); transition: opacity .18s, transform .18s; pointer-events: none; }
.term:hover::after, .term:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.term:focus-visible { border-bottom-style: solid; }
/* Writing in the workshop. */
.composer { margin-top: 20px; }
/* Signed out: an anonymous mark, and a quiet way to put your name on it instead. */
.composer-anon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line-2); color: var(--ink-2); font: 600 12px var(--sans); }
.composer-signin-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rail-start { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 13px var(--sans); cursor: pointer; }
.rail-start { margin: 4px 0 10px; background: var(--record); color: var(--record-ink); border-color: transparent; }
.composer-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent); }
.composer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer-who { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-weight: 600; font-size: 14px; }
.composer-who img, .composer-who .anon { width: 24px; height: 24px; border-radius: 50%; }
.composer-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.composer-tab { padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; }
.composer-tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.composer-title, .composer-topic, .composer-body { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 15px var(--sans); }
.composer-title { font-weight: 600; }
.composer-topic { width: auto; }
.composer-body { min-height: 120px; resize: vertical; line-height: 1.55; }
.composer-title:focus, .composer-body:focus, .composer-topic:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.composer-preview { min-height: 120px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.composer-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.composer-publish { padding: 9px 18px; border: 0; border-radius: 999px; background: var(--record); color: var(--record-ink); font: 600 14px var(--sans); cursor: pointer; transition: transform .3s cubic-bezier(.2, .9, .1, 1); }
.composer-publish:hover { transform: translateY(-1px); }
.composer-publish:disabled { opacity: .6; cursor: progress; }
.composer-dialog { width: min(680px, calc(100vw - 32px)); margin: 10vh auto 0; padding: 18px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg); color: var(--ink-2); box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
.composer-dialog::backdrop { background: rgb(4 5 8 / .55); backdrop-filter: blur(6px); }
.composer-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.composer-dialog-head h2 { margin: 0; color: var(--ink); font-size: 20px; }
.composer-close { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; }
/* Live notices. */
.live-notice { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--record) 45%, var(--line-2)); border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: 0 18px 50px rgb(0 0 0 / .4), 0 0 24px color-mix(in srgb, var(--record) 18%, transparent); opacity: 0; transform: translate(-50%, 16px); transition: opacity .35s, transform .5s cubic-bezier(.2, .9, .1, 1); }
.live-notice.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .live-notice { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1080px) { body:has(.nav-menu) .live-notice { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* Results, dense. */
.results .ws-head { margin-bottom: 0; }
.results-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.results-meta span + span::before { content: "·"; margin: 0 10px; color: var(--line-2); }
.results .lb-table td, .results .lb-table th { padding: 9px 12px; }
.results .lb-best a { font-size: 16px; }

/* Results: the speed staircase in the record colour, the memory caps in one line, and the latest
   results in words. */
.results-latest { margin-top: 32px; }
.results-latest > h2 { margin: 0 0 10px; color: var(--ink); font-size: 16px; font-weight: 600; }
.rl-list { margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.rl-link { display: grid; grid-template-columns: minmax(0, 1.2fr) max-content 76px minmax(0, 1.6fr) 96px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.rl-link:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rl-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.rl-who :is(img, .anon) { flex: none; width: 24px; height: 24px; border-radius: 50%; }
.rl-peak { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-mem { color: var(--ink-2); font-size: 12.5px; }
.rl-verdict { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-when { justify-self: end; color: var(--muted); font-size: 12px; white-space: nowrap; }
.rl-all { margin-top: 10px; }
.rl-all > summary { width: max-content; color: var(--ink-2); font-size: 13.5px; cursor: pointer; }
.rl-all > summary:hover { color: var(--ink); }
.rl-all[open] > .seg { margin: 10px 0; }
@media (max-width: 720px) {
  .rl-link { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
  .rl-verdict { grid-column: 1 / -2; }
  .rl-when { grid-column: -2 / -1; }
}

/* Research: two views (the discussion first), who works with whom, threads that open in place,
   and a pseudonym in its own colour for everyone without a public profile. */
.ws-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-start { border: 0; background: var(--record); color: var(--record-ink); font-weight: 600; cursor: pointer; font-family: inherit; }
.ws-start:hover { background: color-mix(in srgb, var(--record) 82%, var(--ink)); color: var(--record-ink); }
.ws-join { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.together { margin: 0 0 26px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.board-title + .together { margin-top: 24px; }
.together-title { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; }
.together-lede { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.together-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.together-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marks names" "marks n"; column-gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.together-pair:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.together-marks { grid-area: marks; display: inline-flex; }
.together-marks > :last-child { margin-left: -7px; box-shadow: 0 0 0 2px var(--bg-2); border-radius: 50%; }
.together-names { grid-area: names; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.together-n { grid-area: n; color: var(--muted); font-size: 11.5px; }
.ws-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-filters:not(:empty) { margin-top: 12px; }
.ws-filter { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line-2)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ws-filter-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 10%, transparent); font-size: 13px; line-height: 1; }
.ws-row { position: relative; }
.ws-toggle { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ws-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.ws-row.is-open > .ws-toggle { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ws-open { position: absolute; top: 16px; right: 0; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 11.5px; text-decoration: none; opacity: 0; transition: opacity .2s; }
.ws-row:hover > .ws-open, .ws-row.is-open > .ws-open, .ws-open:focus-visible { opacity: 1; }
.ws-open:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--line-2)); }
.ws-convo { margin: 0 0 22px; padding: 6px 0 4px 18px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.anon.pseudo { display: inline-grid; place-items: center; flex: none; width: var(--size, 24px); height: var(--size, 24px); border-radius: 50%; background: color-mix(in srgb, var(--hue) 22%, var(--bg)); box-shadow: inset 0 0 0 1.5px var(--hue); color: var(--hue); font: 600 calc(var(--size, 24px) * .42) var(--mono); }
.convo-summary { display: grid; gap: 6px; margin: 4px 0 14px; }
.convo-voices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.convo-voice { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); font-size: 13px; text-decoration: none; }
a.convo-voice:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line-2)); }
.convo-voice-meta { color: var(--muted); font-size: 11px; }
.convo-pairs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 11.5px; }
.convo-summary.is-side .convo-pairs { flex-direction: column; font-size: 12.5px; color: var(--ink-2); }
.convo-h { margin: 12px 0 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
.thread-side .convo-voices { flex-direction: column; align-items: flex-start; }
.posts.is-compact .post { margin: 0; padding: 12px 0 12px 14px; border: 0; border-left: 2px solid var(--hue, var(--line-2)); border-radius: 0; background: none; }
.posts.is-compact .post + .post { margin-top: 4px; border-top: 0; }
.posts.is-compact .post-body { font-size: 14.5px; }
.post-ref { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.post-ref code { color: inherit; }
.rail-convo { margin: 4px 0 12px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rail-all { margin-top: 10px; }
/* A large graph is not a wall of text: titles on landmarks, and on whatever is in focus. */
.cn-node:not(.is-landmark):not(.is-selected):not(.is-lit):not(:hover):not(:focus-visible) .cn-label { opacity: 0; }
@media (max-width: 640px) { .ws-open { opacity: 1; position: static; display: inline-block; margin: 0 0 10px; } .ws-convo { padding-left: 12px; } }

.ws-more-row { padding: 18px 0 6px; border-top: 1px solid var(--line); }
.ws-more { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.ws-more:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line-2)); }
@media (max-width: 640px) { .together-pair:nth-child(n+4) { display: none; } }

/* Share card on your own profile: the canvas is the image that downloads. */
.sc-body { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.sc-canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 16px; }
.sc-controls { display: grid; gap: 18px; align-content: start; }
.sc-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.sc-group legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.sc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-opts label { cursor: pointer; }
.sc-opts input { position: absolute; opacity: 0; pointer-events: none; }
.sc-opts span { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 14px; }
.sc-opts input:checked + span { border-color: var(--ink); color: var(--ink); background: var(--bg-2); }
.sc-opts input:focus-visible + span, .sc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-btn { padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.sc-btn:hover { border-color: var(--ink-2); }
@media (max-width: 720px) { .sc-body { grid-template-columns: minmax(0, 1fr); } .sc-canvas { max-width: 360px; } }

/* The hero's answer: one figure, one line, the drop it took, and who did it (2026-10-10). */
.lead-text { margin-top: clamp(18px, 2.6vw, 30px); }
.lead-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; color: inherit; text-decoration: none; }
.lead-num { color: var(--accent); font: 600 clamp(76px, 11vw, 150px)/.86 var(--display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.lead-num number-flow { --number-flow-mask-height: .1em; font-variant-numeric: tabular-nums; }
.lead-unit { color: var(--ink); font: 600 clamp(26px, 3.2vw, 44px)/1 var(--display); letter-spacing: -.03em; }
.lead-figure:hover .lead-unit { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lead-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px clamp(36px, 6vw, 96px); }
.lead-cost { display: grid; gap: 12px; }
.cost-figure { display: inline-flex; align-items: baseline; gap: 10px; color: var(--record); text-decoration: none; }
.cost-num { font: 600 clamp(58px, 7.4vw, 104px)/.86 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cost-num number-flow { --number-flow-mask-height: .1em; font-variant-numeric: tabular-nums; }
.cost-num number-flow::part(suffix) { margin-left: .32em; color: var(--ink); font-size: .37em; letter-spacing: -.02em; }
.cost-unit { color: var(--ink); font: 600 clamp(24px, 2.7vw, 38px)/1 var(--display); letter-spacing: -.03em; }
.cost-figure:hover .cost-unit, .cost-figure:hover number-flow::part(suffix) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cost-note { margin: 0; color: var(--ink-2); font-size: clamp(14px, 1.25vw, 17px); }
.cost-was { position: relative; color: var(--muted); white-space: nowrap; }
.cost-was::after { content: ""; position: absolute; top: 54%; left: -1px; right: -1px; height: 1.5px; border-radius: 1px; background: var(--ink-2); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.has-motion .lead-cost:not(.is-struck) .cost-was::after { transform: scaleX(0); }
.lead-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; }
.src-link { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; text-decoration: none; transition: color .2s; }
.src-link:hover { color: var(--ink); }
.src-link:focus-visible { outline: 2px solid var(--record); outline-offset: 3px; border-radius: 4px; }
.drop { position: relative; width: 100%; margin-top: clamp(26px, 3.4vw, 40px); }
.drop-canvas { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.drop-svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.drop-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.drop-pen { fill: var(--ink); stroke: var(--bg-2); stroke-width: 2.5; }
.drop-limit { stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .75; }
.drop-handset { transform-box: fill-box; transform-origin: 50% 100%; }
.drop-phone { fill: none; stroke: var(--amber); stroke-width: 1.8; transition: stroke .35s; }
.drop-island { fill: var(--amber); transition: fill .35s; }
.drop-handset.is-over .drop-phone { stroke: var(--coral); }
.drop-handset.is-over .drop-island { fill: var(--coral); }
.drop-end { fill: var(--record); stroke: var(--bg-2); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.drop-step { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.drop-face-ring { fill: var(--bg-2); stroke: var(--accent); stroke-width: 2; transition: stroke-width .2s; }
.drop-dot-step { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.drop-step:hover .drop-face-ring, .drop-step:focus-visible .drop-face-ring { stroke-width: 3.5; }
.drop-step:focus-visible { outline: none; }
.drop-hit { fill: transparent; cursor: crosshair; }
.drop-cross { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .15s; pointer-events: none; }
.drop-ring { fill: var(--bg-2); stroke: var(--accent); stroke-width: 2.5; opacity: 0; transition: opacity .15s; pointer-events: none; }
.drop-cross.is-on, .drop-ring.is-on { opacity: 1; }
.drop-label { fill: var(--ink-2); font: 600 13px var(--sans); }
.drop-label-sub { fill: var(--muted); font-weight: 400; }
.drop-limit-label { fill: var(--amber); font: 600 12.5px var(--sans); }
.drop-now-label { fill: var(--ink); font: 600 14px var(--sans); transform-box: fill-box; transform-origin: 100% 100%; }
.drop-tick { fill: var(--muted); font: 12px var(--sans); }
.drop-tip { position: absolute; z-index: 2; display: grid; gap: 3px; min-width: 132px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 30px -12px #000000a0; pointer-events: none; }
.drop-tip[hidden] { display: none; }
.drop-tip strong { color: var(--ink); font: 600 17px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.drop-tip-when { color: var(--muted); font-size: 12.5px; }
.drop-tip-who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.drop-tip-who img, .drop-tip-who .anon { width: 18px; height: 18px; border-radius: 50%; }
.drop-thanks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 18px); }
.drop-thanks strong { color: var(--ink); font-weight: 600; }
.drop-faces { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 6px; color: var(--muted); text-decoration: none; }
.drop-faces img, .drop-faces .anon { width: 26px; height: 26px; margin-right: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-2); transition: transform .25s cubic-bezier(.2, .9, .1, 1); }
.drop-faces img:hover { transform: translateY(-3px); }
.drop-more { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--line-2); color: var(--ink-2); font-size: 12px; box-shadow: 0 0 0 2px var(--bg-2); }
.drop-faces-text { margin-left: 20px; }
.drop-faces:hover .drop-faces-text { color: var(--ink); }

/* Built together: the counts value first, then who built on what (2026-10-10). */
.together-panel { margin-top: 20px; padding: clamp(22px, 3vw, 34px) clamp(18px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); }
.tp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.tp-title { margin: 0; color: var(--ink); font: 600 clamp(24px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -.02em; }
.tp-open { color: var(--ink-2); font-size: 14px; text-decoration: none; }
.tp-open:hover { color: var(--ink); }
.tp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 24px clamp(20px, 3vw, 40px); margin: 28px 0 0; }
.tp-fig { display: grid; gap: 5px; align-content: start; }
.tp-num { color: var(--ink); font: 600 clamp(38px, 4.2vw, 56px)/.95 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tp-label { color: var(--ink-2); font-size: 15px; }
.tp-fig-sub { color: var(--muted); font-size: 13px; line-height: 1.35; }
.crew { position: relative; margin-top: clamp(30px, 4vw, 46px); }
.crew-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; }
.crew-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }
.crew-legend li { display: inline-flex; align-items: center; gap: 7px; }
.crew-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.crew-legend .is-experiment i { opacity: .5; }
.crew-legend .is-proof i { background: var(--ink); opacity: .8; }
.crew-legend .is-post i { width: 5px; height: 5px; background: var(--ink); opacity: .3; }
.crew-box { position: relative; margin-top: 6px; }
.crew-svg { display: block; width: 100%; height: auto; overflow: visible; }
.crew-link { fill: none; stroke-linecap: round; transition: opacity .25s; }
.crew-stop-from { stop-color: var(--accent); stop-opacity: .06; }
.crew-stop-to { stop-color: var(--accent); }
.crew-node { outline: none; transition: opacity .25s; }
.crew-dot { fill: var(--accent); }
.crew-dot.is-lead { fill-opacity: .95; }
.crew-dot.is-experiment { fill-opacity: .5; }
.crew-dot.is-source { fill-opacity: .3; }
.crew-dot.is-proof { fill: var(--ink); fill-opacity: .8; }
.crew-dot.is-post { fill: var(--ink); fill-opacity: .26; }
.crew-face { transform-box: fill-box; transform-origin: center; }
.crew-ring { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1.5; transition: stroke .2s; }
.crew-node:hover .crew-ring, .crew-node:focus-visible .crew-ring, .crew-node.is-on .crew-ring { stroke: var(--accent); }
.crew-name { fill: var(--ink-2); font: 500 13px var(--sans); paint-order: stroke; stroke: var(--bg-2); stroke-width: 5px; stroke-linejoin: round; }
.crew-anon { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2.5 3; }
.crew.is-focus .crew-node:not(.is-on), .crew.is-focus .crew-link:not(.is-on) { opacity: .16; }
.crew-tip { position: absolute; z-index: 2; display: grid; gap: 3px; max-width: 300px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 30px -12px #000000a0; color: var(--ink-2); font-size: 13px; pointer-events: none; }
.crew-tip[hidden] { display: none; }
.crew-tip-who { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; }
.crew-tip-who img, .crew-tip-who .anon { width: 18px; height: 18px; border-radius: 50%; }
.tp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px clamp(28px, 5vw, 64px); margin-top: clamp(26px, 3.4vw, 38px); }
.tp-col { min-width: 0; }
.tp-h { margin: 0 0 6px; color: var(--ink); font-size: 15px; font-weight: 600; }
.tp-lede { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.tp-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.tp-rows.is-scroll { max-height: 318px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
.tp-rows.is-scroll.is-end { -webkit-mask-image: none; mask-image: none; }
.tp-rows.is-scroll .tp-row { scroll-snap-align: start; }
.tp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.tp-main { display: grid; gap: 5px; min-width: 0; }
.tp-name { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 15px; line-height: 1.35; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tp-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.tp-meta img, .tp-meta .anon { width: 16px; height: 16px; border-radius: 50%; background: var(--line-2); }
.tp-value { color: var(--ink); font: 600 18px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.tp-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 28px; }
.tp-sub { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.tp-bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.tp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; font-size: 13px; }
.tp-bar-name { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.tp-bar-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.tp-bar-fill { grid-column: 1 / -1; height: 3px; min-width: 2px; border-radius: 2px; background: var(--accent); }
.tp-bar.is-unstated .tp-bar-name { color: var(--muted); }
.tp-bar.is-unstated .tp-bar-fill { background: var(--line-2); }
.tp-note { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
@media (min-width: 1021px) {
  .tp-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "figs figs" "crew cols" "note note"; column-gap: clamp(32px, 3.6vw, 56px); align-items: start; }
  .tp-body > .tp-figs { grid-area: figs; }
  .tp-body > .crew { grid-area: crew; }
  .tp-body > .tp-cols { grid-area: cols; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: clamp(30px, 4vw, 46px); }
  .tp-body > .tp-note { grid-area: note; }
  .tp-body .tp-rows.is-scroll { max-height: 236px; }
}

/* Wide screens: the figures beside the drop, as in the share image, so the whole answer fits
   one screen and one screenshot. The workshop chart runs the full width below. */
@media (min-width: 1021px) {
  .card.has-drop { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head head" "top top" "text drop" "thanks drop" "arcs arcs"; column-gap: clamp(32px, 3.6vw, 56px); align-items: end; }
  .card.has-drop .card-head { grid-area: head; }
  .card.has-drop .card-top { grid-area: top; }
  .card.has-drop .lead-text { grid-area: text; align-self: start; }
  .card.has-drop .drop { grid-area: drop; margin-top: 18px; }
  .card.has-drop .drop-thanks { grid-area: thanks; display: block; }
  .card.has-drop .drop-thanks .drop-faces { display: flex; margin-top: 10px; }
  .card.has-drop .card-arcs { grid-area: arcs; }
  .card.has-drop .lead-num { font-size: clamp(76px, 8.2vw, 122px); }
  .card.has-drop .cost-num { font-size: clamp(56px, 5.4vw, 80px); }
}


/* The chihuahua around the page (2026-10-10): over the hero card's corner, lounging with a
   mezcal in the corner of Who built on whom, asleep on the footer. Decorative; nothing reads it out, and it never takes a click. */
.mascot { display: block; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mascot-peek-spot { --w: clamp(104px, 10.5vw, 150px); position: absolute; z-index: 3; right: clamp(20px, 2.6vw, 40px); bottom: calc(100% - var(--w) * .086); width: var(--w); height: calc(var(--w) * 1.128); overflow: hidden; }
.mascot-peek { width: 100%; }
.crew-box .mascot-lounge { position: absolute; z-index: 1; right: 0; bottom: 0; height: auto; transform-origin: 50% 96%; }
.foot { position: relative; }
.mascot-nap-spot { position: absolute; right: var(--gutter); top: 0; width: clamp(150px, 15vw, 230px); transform: translateY(-86%); }
.mascot-nap { width: 100%; transform-origin: 60% 88%; }
.nap-z { position: absolute; left: 44%; top: 4%; color: var(--accent); font: 800 26px/1 var(--display); opacity: 0; }
.nap-z:nth-of-type(2) { font-size: 20px; }
.nap-z:nth-of-type(3) { font-size: 15px; }
.has-motion .mascot-lounge { animation: mascot-rock 5.5s ease-in-out infinite; }
.has-motion .mascot-nap { animation: mascot-breathe 3.8s ease-in-out infinite; }
.has-motion .nap-z { animation: mascot-z 3.9s ease-out infinite; }
.has-motion .nap-z:nth-of-type(2) { animation-delay: 1.3s; }
.has-motion .nap-z:nth-of-type(3) { animation-delay: 2.6s; }
@keyframes mascot-rock { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes mascot-breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.012, 1.03); } }
@keyframes mascot-z { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 18% { opacity: .95; } 100% { opacity: 0; transform: translate(30px, -54px) scale(1.1); } }
@media (max-width: 900px) { .mascot-lounge { display: none; } }
@media (max-width: 720px) { .mascot-peek-spot { display: none; } .mascot-nap-spot { width: 140px; } }
.capture .mascot, .capture .mascot-peek-spot, .capture .mascot-nap-spot { display: none; }

/* The drop's padlock and its labels, and the workshop chart's season marks. */
.drop-shackle { fill: none; stroke: var(--amber); stroke-width: 3.5; stroke-linecap: round; transition: stroke .35s, d .45s var(--ease); }
.drop-handset.is-over .drop-shackle { stroke: var(--coral); }
.drop-end.is-over { fill: var(--coral); }
.drop-limit-label.is-line { font-weight: 500; paint-order: stroke; stroke: var(--bg-2); stroke-width: 5px; stroke-linejoin: round; }
.drop-limit-label.is-inside { paint-order: stroke; stroke: var(--bg-2); stroke-width: 6px; stroke-linejoin: round; }
.wk-season { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .75; }
.wk-season-label { fill: var(--accent); font: 600 12px var(--sans); }

.key-replay { margin-left: auto; color: var(--ink-2); text-decoration: none; }
.key-replay:hover { color: var(--ink); }

/* Keep the record-type key visible on narrow screens as well as desktop. */
.pane-foot .cn-legend:not([hidden]) { display: flex; }
.cn-legend .record-key { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }

/* Standalone season archive (#644). Shares the site's ink, paper and brand. */
.retrospective .bar { border-bottom: 1px solid var(--line); }
.retro-main { max-width: 1120px; margin: 0 auto; padding: 64px var(--gutter) 0; }
.retro-intro { max-width: 820px; }
.retro-intro h1 { margin-top: 20px; font-size: clamp(38px, 5.8vw, 72px); font-weight: 540; line-height: 1.04; letter-spacing: -.035em; }
.retro-lede { max-width: 57ch; margin-top: 24px; color: var(--ink-2); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.retro-seasons { margin-top: 48px; }
.retro-season-card { display: block; max-width: 820px; padding: 32px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); text-decoration: none; transition: border-color .2s; }
.retro-season-card:hover { border-color: var(--accent); }
.retro-card-top, .retro-card-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.retro-status { padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 12px; }
.retro-season-card h2 { margin-top: 24px; font-size: clamp(29px, 4vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -.025em; }
.retro-season-card p { max-width: 54ch; margin-top: 20px; }
.retro-card-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 14px; }
.retro-arrow { color: var(--accent); font-size: 24px; }
.retro-caption { margin-top: 20px; color: var(--muted); font-size: 14px; }
.retro-breadcrumb { display: flex; gap: 12px; margin-bottom: 36px; font-size: 14px; color: var(--muted); }
.retro-breadcrumb a { text-underline-offset: 4px; }
.retro-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0 0; padding: 28px 0; border-block: 1px solid var(--line); }
.retro-facts dt { font-size: 13px; color: var(--muted); }
.retro-facts dd { margin: 6px 0 0; color: var(--ink); }
.retro-campaign { grid-column: 1 / -1; }
.retro-campaign code { font: 13px var(--code); overflow-wrap: anywhere; }
.retro-slots { margin-top: 44px; }
.retro-slots > h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.retro-slot { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.retro-slot-number { color: var(--muted); font-size: 14px; padding-top: 3px; }
.retro-slot-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.retro-slot h3 { font-size: 21px; font-weight: 500; }
.retro-proposed { font-size: 12px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 999px; padding: 2px 9px; }
.retro-slot p { max-width: 65ch; margin-top: 10px; }
.retro-record { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; margin-top: 40px; padding: 24px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.retro-record h2 { font-size: 17px; font-weight: 500; }
.retro-record p { max-width: 55ch; margin-top: 8px; font-size: 14px; }
.retro-record a { color: var(--accent); font-size: 14px; text-underline-offset: 4px; }
.retro-foot-note { font-size: 14px; }
@media (max-width: 760px) {
  /* The archive has its own header navigation and no app bottom tab bar. */
  body.retrospective { padding-bottom: 0; }
  .retrospective .bar-nav { display: flex; order: initial; width: auto; margin: 0 0 0 auto; }
}
@media (max-width: 600px) {
  .retro-main { padding-top: 36px; }
  .retro-season-card { padding: 22px; }
  .retro-facts { grid-template-columns: minmax(0, 1fr); }
  .retrospective .bar { gap: 8px; }
  .retrospective .bar-nav { margin-left: auto; }
  .retrospective .bar-nav a { padding-inline: 6px; font-size: 13px; }
}

/* Season report draft (#645): prose, tables and inline SVG charts, scoped to the archive. */
.rc-pending { display: inline-block; margin-left: 8px; padding: 2px 9px; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--muted); font: 500 12px/1.4 var(--sans); letter-spacing: 0; vertical-align: middle; }
.rc-toc { margin: 40px 0 0; padding: 20px 0; border-block: 1px solid var(--line); }
.rc-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 24px; margin: 0; padding-left: 20px; font-size: 15px; }
.rc-body { max-width: 760px; }
.rc-body section { margin-top: 56px; scroll-margin-top: 24px; }
.rc-body h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; letter-spacing: -.02em; }
.rc-body h3 { margin-top: 28px; font-size: 19px; font-weight: 500; }
.rc-body p, .rc-body li { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.rc-body p { margin-top: 14px; }
.rc-body ul, .rc-body ol { margin-top: 12px; padding-left: 22px; }
.rc-body li + li { margin-top: 6px; }
.rc-body a { color: var(--ink); text-underline-offset: 3px; }
.rc-body code { font: 13.5px var(--code); }
.cite { margin-left: 1px; font-size: 11px; line-height: 0; }
.cite a { color: var(--accent); text-decoration: none; }
.rc-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; margin: 20px 0 0; }
.rc-glance dt { color: var(--muted); font-size: 13px; }
.rc-glance dd { margin: 4px 0 0; color: var(--ink); font-size: 17px; }
.rc-thanks { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; }
.rc-thanks a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.rc-thanks a:hover span, .rc-thanks a:focus-visible span { text-decoration: underline; }
.rc-thanks img { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--line); }
.rc-figure { margin: 24px 0 0; }
.rc-chart { display: block; width: 100%; height: auto; }
.rc-figure figcaption { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.rc-grid { stroke: var(--line-2); }
.rc-tick, .rc-axis { fill: var(--muted); font: 12px var(--sans); }
.rc-label { fill: var(--ink-2); font: 12.5px var(--sans); }
.rc-dot { fill: var(--accent); stroke: var(--bg-2); stroke-width: 1.5; }
.rc-dot.is-memory { fill: var(--record); }
.rc-dot.is-untimed { fill: none; stroke: var(--muted); }
.rc-split { stroke: var(--muted); stroke-dasharray: 4 4; }
.rc-bar.is-graph { fill: var(--accent); }
.rc-bar.is-jobs { fill: var(--record); }
.rc-bar.is-posts { fill: var(--platform); }
.rc-rule { stroke: var(--amber); stroke-width: 2; }
.rc-scroll { margin-top: 20px; overflow-x: auto; }
.rc-body table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-body table.data caption { margin-bottom: 8px; color: var(--muted); font-size: 13.5px; text-align: left; }
.rc-body table.data th, .rc-body table.data td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.rc-body table.data th { color: var(--muted); font-weight: 500; }
.rc-sources { font-size: 14px; }
@media (max-width: 600px) {
  .rc-body p, .rc-body li { font-size: 16px; }
  .rc-body section { margin-top: 44px; }
}
.rc-mech { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 24px; }
.rc-mech h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.rc-mech p { margin-top: 8px; font-size: 15.5px; }
.rc-mech p strong { color: var(--ink); font-weight: 600; }
.rc-status { display: inline-block; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font: 500 12.5px/1.5 var(--sans); white-space: nowrap; }
.rc-status.is-promoted { border-color: color-mix(in oklab, var(--record) 55%, var(--line)); color: var(--record); }
.rc-status.is-part { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); color: var(--accent); }
.rc-status.is-not { border-style: dashed; }
.rc-status a.rc-step { color: inherit; }
.rc-terms li { font-size: 15px; }
.rc-mech p.rc-browser { color: var(--muted); }
.rc-rating { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font: 600 12px/1.5 var(--sans); vertical-align: 1px; }
.rc-rating.is-broad { background: color-mix(in oklab, var(--record) 18%, transparent); color: var(--record); }
.rc-rating.is-partial { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.rc-rating.is-host-specific { background: color-mix(in oklab, var(--amber) 18%, transparent); color: var(--amber); }
.rc-rating.is-untested { border: 1px dashed var(--line-2); color: var(--muted); }

/* Anatomy report figures (vendor/anatomy/iso.css): the kit themes by data-theme, the site by
   prefers-color-scheme, so its light palette is applied wherever the site is light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .iso {
    --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
    --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
    --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
    --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
    --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
    --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
    --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
    --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
  }
}
:root[data-theme="light"] .iso {
    --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
    --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
    --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
    --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
    --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
    --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
    --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
    --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.rc-anatomy { margin: 28px 0 8px; }

/* Report layout pass: sticky contents beside the text on wide screens, numbered sections,
   stat tiles, framed charts and quieter reference furniture. */
.rc-layout { margin-top: 40px; }
.rc-toc { margin: 0; }
.rc-toc-title { margin: 0 0 10px; color: var(--muted); font: 600 13px/1 var(--sans); }
.rc-body { counter-reset: rc-section; }
.rc-body > section { counter-increment: rc-section; }
.rc-body > section > h2::before { content: counter(rc-section, decimal-leading-zero); display: block; margin-bottom: 6px; color: var(--muted); font: 500 13px/1 var(--code); }
@media (min-width: 1100px) {
  .rc-layout { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 56px; align-items: start; }
  .rc-toc { position: sticky; top: 24px; padding: 0; border: 0; }
  .rc-toc ol { display: block; padding-left: 18px; font-size: 14px; }
  .rc-toc li + li { margin-top: 8px; }
  .rc-body > section:first-child { margin-top: 0; }
}
.rc-toc a { color: var(--ink-2); text-decoration: none; }
.rc-toc a:hover, .rc-toc a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rc-glance { gap: 12px; }
.rc-glance > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.rc-glance dd { font-size: 19px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.rc-figure { padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.rc-figure figcaption { margin-top: 10px; }
.rc-terms { margin: 18px 0 0; padding: 14px 16px 14px 34px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.rc-terms li { color: var(--ink-2); }
.rc-body table.data td, .rc-body table.data th { font-variant-numeric: tabular-nums; }
.rc-body table.data tbody tr:hover td { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.rc-sources-box { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.rc-sources-box > summary { cursor: pointer; color: var(--ink); font-size: 17px; font-weight: 500; }
.rc-sources-box[open] > summary { margin-bottom: 8px; }
.rc-mech { background: var(--bg-2); }
@media (prefers-reduced-motion: no-preference) { html:has(.rc-body) { scroll-behavior: smooth; } }
@media (max-width: 600px) {
  /* Keep chart labels legible on a phone: the chart scrolls inside its frame, the page does not. */
  .rc-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rc-figure .rc-chart { min-width: 560px; }
  .rc-figure figcaption { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter, 16px) - 34px); }
}
.rc-mech p.rc-general { color: var(--ink-2); }
.rc-legend { margin-top: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.8; }

/* Multi-page report (#645): page tabs, the key takeaways box, mechanism rows that expand, and
   "more on another page" links. */
.rc-tabs { margin: 28px 0 0; border-bottom: 1px solid var(--line); }
.rc-tabs ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rc-tabs a { display: block; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: 15px; text-decoration: none; }
.rc-tabs a:hover, .rc-tabs a:focus-visible { color: var(--ink); }
.rc-tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.rc-takeaways { padding: 18px 20px 20px; border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line)); border-radius: 14px; background: var(--bg-2); }
.rc-takeaways > h2::before { content: none; }
.rc-takeaways ul { margin-top: 12px; }
.rc-takeaways li + li { margin-top: 10px; }
.rc-body > section.rc-takeaways { counter-increment: none; }
details.rc-mech { margin-top: 10px; padding: 0; }
details.rc-mech > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
details.rc-mech > summary::-webkit-details-marker { display: none; }
details.rc-mech > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
details.rc-mech[open] > summary::before { transform: rotate(90deg); }
details.rc-mech > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.rc-mech-name { color: var(--ink); font-size: 16.5px; font-weight: 600; }
details.rc-mech > p { margin: 0 16px; padding-bottom: 4px; }
details.rc-mech > p:last-child { padding-bottom: 16px; }
details.rc-mech > p:first-of-type { margin-top: 2px; }
.rc-more { font-size: 15px; }
.rc-more a { color: var(--accent); text-decoration: none; }
.rc-more a:hover { text-decoration: underline; }
.rc-body > section.rc-takeaways > h2::before { content: none; }
details.rc-mech > .rc-anatomy { margin: 4px 16px 16px; }
.rc-bar.is-pages { fill: var(--amber); }
.rc-callout { padding: 10px 14px; border-left: 3px solid var(--amber); background: var(--bg-2); border-radius: 0 10px 10px 0; color: var(--ink-2); }
.rc-callout strong { color: var(--ink); }
.rc-beyond th[scope="row"] { color: var(--ink); font-weight: 500; min-width: 140px; }
.rc-beyond td { min-width: 200px; }
/* Frontier timeline: two aligned panels, step lines, a shaded memory track. */
.rc-track-band { fill: color-mix(in oklab, var(--record) 7%, transparent); }
.rc-track-label { fill: var(--muted); font: 600 11.5px var(--sans); }
.rc-panel-title { fill: var(--ink-2); font: 600 12.5px var(--sans); }
.rc-step-line { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linejoin: round; }
.rc-panel.is-timepanel .rc-step-line { stroke: color-mix(in oklab, var(--accent) 55%, var(--line-2)); }
.rc-panel.is-peakpanel .rc-step-line { stroke: color-mix(in oklab, var(--record) 55%, var(--line-2)); }
.rc-dot.is-time { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.rc-dot.is-memory { stroke: var(--bg-2); stroke-width: 2; }
.rc-hit { fill: transparent; }
a:hover > .rc-dot, a:focus-visible > .rc-dot { r: 6.5; }
.rc-ref { stroke: var(--muted); stroke-dasharray: 4 4; }
.rc-ref-label { fill: var(--muted); font: 11.5px var(--sans); }
.rc-annot { fill: var(--ink); font: 600 12px var(--sans); paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; stroke-linejoin: round; }
.retro-status-published { font-size: 12px; color: var(--record); border: 1px solid color-mix(in oklab, var(--record) 55%, var(--line)); border-radius: 999px; padding: 2px 9px; }
.retro-read { color: var(--accent); text-underline-offset: 4px; }

/* The shared board's home (kit.css): the models board, every record by model, then the workshop
   chart and Built together on the same gutter as the board. */
.leader > .card, .leader > .together-panel { margin-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.models-workshop > .card { margin-top: 18px; }
.models-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: start; gap: 18px 28px; }
.models-panel > :not(.models-chart):not(.models-newest) { grid-column: 1 / -1; }
.models-smaller { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.models-smaller h3 { margin: 0; color: var(--ink); font: 600 16px/1.3 var(--sans); }
.models-smaller > p { margin: 0; }
.models-newest { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.models-rec { display: grid; gap: 3px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.models-rec:hover { background: var(--card-hi); }
.models-rec-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.models-rec-who :is(img, .anon) { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.models-rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-left: 38px; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) {
  .models-panel { grid-template-columns: 1fr; }
  .model-row { grid-template-areas: "name lead" "peak size" "proof proof" "trend trend" "code code"; }
  .model-row > :nth-child(1) { grid-area: name; }
  .model-row > :nth-child(2) { grid-area: lead; justify-items: end; text-align: right; }
  .model-row > :nth-child(3) { grid-area: peak; }
  .model-row > :nth-child(4) { grid-area: size; justify-items: end; text-align: right; }
  .model-row > :nth-child(5) { grid-area: proof; }
  .model-row > :nth-child(6) { grid-area: trend; }
  .model-row > :nth-child(7) { grid-area: code; }
}
.kit-person :is(img, .anon) { flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); object-fit: cover; }
/* The results page holds the board inside its own page gutter. */
.page .kit-board { max-width: none; padding: clamp(28px, 3vw, 40px) 0 0; }