@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
}
@font-face {
  font-family: Gabarito;
  src: url("../fonts/Gabarito.ttf");
  font-weight: 400 900;
}
@font-face {
  font-family: Literata;
  src: url("../fonts/literata-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
}

:root {
  /* Sand page surfaces from docs/brand. */
  --light: oklch(93% .0161 99);
  --dark: oklch(17.5% .008 99);
  /* The brand blue ground from docs/brand. */
  --blue: #095ffd;
  --blue-hover: oklch(50% .24 262);
  /* The full green from docs/brand, for what is new. */
  --green: oklch(58.4% .161 148);
  /* Sand dark rungs from docs/brand, for the navigation. */
  --dk-raised: oklch(25.5% .01 99);
  --dk-hair: oklch(29.5% .009 99);
  --dk-ink: oklch(93.5% .008 99);
  --dk-ink-muted: oklch(74% .008 99);
  /* Sand light rungs from docs/brand, for type and cards on the light sections. */
  --lt-ink: oklch(25% .0177 271);
  --lt-ink-muted: oklch(48% .013 271);
  --lt-hair: oklch(89.5% .012 99);
  --lt-card: oklch(96.5% .009 98);
  --lt-raised: oklch(99.5% .0067 97);
  /* Type on the blue ground, as docs/brand sets it. */
  --on-blue-muted: #d3e3fb;
  /* The warning yellow from docs/brand, for stale work on the map. */
  --yellow: oklch(80% .165 82);
  --seam: 360px;
}
@media (min-width: 64rem) {
  :root { --seam: 520px; }
}

body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
section { padding: 128px 16px; }
/* A seam's ends are plain ground, so they stand in for most of the padding on the side that touches one. */
.seam + section { padding-top: 32px; }
section:has(+ .seam) { padding-bottom: 32px; }
.light { background: var(--light); }
.dark { background: var(--dark); }
.blue { background: var(--blue); }

/* The placeholder split shows until the canvas has drawn. */
.seam { position: relative; height: var(--seam); background: linear-gradient(var(--from) 50%, var(--to) 50%); }
.seam[data-from="light"] { --from: var(--light); }
.seam[data-from="dark"] { --from: var(--dark); }
.seam[data-from="blue"] { --from: var(--blue); }
.seam[data-to="light"] { --to: var(--light); }
.seam[data-to="dark"] { --to: var(--dark); }
.seam[data-to="blue"] { --to: var(--blue); }
.seam canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.nav {
  position: fixed; top: 16px; left: 50%; z-index: 2;
  width: min(1040px, calc(100% - 32px));
  translate: -50% 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--dk-ink);
}
/* Pushed out by the scroll, pixel for pixel, while the document view fills the screen; --nav-shift is set by script. */
.nav { translate: -50% calc(-1 * var(--nav-shift, 0px)); }
.nav :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Three columns so the links sit in the middle whatever the two ends measure. */
.island {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 48px; padding: 0 6px 0 16px;
  border-radius: 999px;
  background: var(--dark);
  /* A plain shadow: depth on sand, and on the dark sections it sinks into the ground. */
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

/* The lockup's box is centred on the mark, so centring the box centres the mark. */
.lock { display: flex; justify-self: start; color: inherit; }
.lock svg { display: block; width: 137px; height: 28px; }

.links { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.links a, .links button {
  display: flex; align-items: center; gap: 4px;
  /* The 1px bottom padding lifts the labels' x-height onto the wordmark's, which sits on the island's centre. */
  height: 32px; padding: 0 12px 1px;
  border: 0; border-radius: 999px; background: transparent;
  color: inherit; font: inherit; font-size: 14px; font-weight: 400;
  text-decoration: none; cursor: pointer;
}
.links a:hover, .links button:hover, .links button[aria-expanded="true"] { background: var(--dk-raised); }
.links button svg { transition: rotate 0.15s; }
.links button[aria-expanded="true"] svg { rotate: 180deg; }

.nav-end { justify-self: end; display: flex; align-items: center; gap: 4px; }
.login {
  display: flex; align-items: center; height: 32px; padding: 0 12px 1px; border-radius: 999px;
  color: inherit; font-size: 14px; text-decoration: none;
}
.login:hover { background: var(--dk-raised); }
.signin {
  display: flex; align-items: center;
  height: 36px; padding: 0 16px 1px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.signin:hover { background: var(--blue-hover); }

.panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 28px 0;
  border: 1px solid var(--dk-hair); border-radius: 20px;
  background: var(--dark);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.25);
  opacity: 0; translate: 0 -4px; visibility: hidden;
  transition: opacity 0.15s, translate 0.15s, visibility 0s 0.15s;
}
.panel.open { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 0.15s, translate 0.15s; }
.panel .col { padding: 0 28px; }
.panel .col + .col { border-left: 1px solid var(--dk-hair); }
.panel .label {
  margin: 0 0 16px;
  font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dk-ink-muted);
}
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel a { display: block; margin: 0 -12px; padding: 10px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
/* Pixel icons are only exact at their native 24px; smaller sizes break up on 1x screens. */
.px { width: 24px; height: 24px; flex: none; fill: currentColor; shape-rendering: crispEdges; }

.panel .feature { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; }
.panel .feature .px { grid-row: span 2; }
/* A 24px line box, so the title's first line lines up with the icon. */
.panel .feature b { margin-bottom: 4px; font-family: Gabarito, sans-serif; font-size: 20px; font-weight: 400; line-height: 24px; }
.panel .feature span { font-size: 14px; line-height: 1.45; color: var(--dk-ink-muted); }
.panel .feature + .feature { margin-top: 8px; }
.panel .list a { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 400; }
.panel .list .px { color: var(--dk-ink-muted); }
.panel .list a:hover, .panel .list a:hover .px { color: var(--blue); }
.panel .feature:hover b, .panel .feature:hover .px { color: var(--blue); }
.panel .list li + li { border-top: 1px solid var(--dk-hair); }

/* Product: three groups of capabilities, each a page, with the audience and deployment pages beneath. */
.panel.product { padding: 28px 0 0; row-gap: 12px; }
.product .cap { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 12px; }
.product .cap .px { grid-row: span 2; color: var(--dk-ink-muted); }
.product .cap b { font-size: 15px; font-weight: 500; line-height: 24px; }
.product .cap span { font-size: 14px; line-height: 1.45; color: var(--dk-ink-muted); }
.product .cap:hover b, .product .cap:hover .px { color: var(--blue); }
.product .caps li + li { border-top: 1px solid var(--dk-hair); }
.product .quick { grid-column: 1 / -1; align-items: center; padding-inline: 16px; }
.product .quick a { display: flex; align-items: center; gap: 8px; color: var(--dk-ink-muted); }
.product .quick a:hover { color: var(--blue); }
/* Solutions: the audiences beside the problems teams bring, laid out like resources. */
.solutions .who { padding: 28px; }

/* Resources: a featured post beside a two-column index, with quick links under the index. */
.panel.resources { grid-template-columns: 1fr 2fr; padding: 0; }
.resources .post { display: flex; flex-direction: column; padding: 28px; }
.resources .post .cover {
  display: grid; place-items: center; aspect-ratio: 16 / 9; margin: 0 0 16px; padding: 0;
  border-radius: 12px; background: var(--blue); color: #fff;
}
.resources .post .cover:hover { background: var(--blue-hover); }
.resources .post .cover svg { height: 32px; aspect-ratio: 255 / 52; }
.resources .post h3 { margin: 0; font-family: Gabarito, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; }
.resources .post footer { display: flex; gap: 20px; margin-top: auto; padding-top: 24px; font-size: 14px; font-weight: 400; }
.resources .post h3 a, .resources .post footer a { margin: 0; padding: 0; border-radius: 0; }
.resources .post h3 a:hover, .resources .post footer a:hover { color: var(--blue); }

.resources .index { display: flex; flex-direction: column; padding-top: 28px; border-left: 1px solid var(--dk-hair); }
.resources .index .label { padding: 0 28px; }
/* The vertical rule between the two columns is a 1px background down the middle of the gap. */
.resources .entries {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 57px; padding: 0 28px 12px;
  background: linear-gradient(var(--dk-hair), var(--dk-hair)) center / 1px calc(100% - 12px) no-repeat;
}
.resources .entries li:nth-child(n + 3) { border-top: 1px solid var(--dk-hair); }
.resources .entry { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 14px 12px; }
.resources .entry .px { grid-row: span 2; color: var(--dk-ink-muted); }
.resources .entry:hover b, .resources .entry:hover .px { color: var(--blue); }
/* Flex rather than inline, so a tag in the title lands on whole pixels. */
.resources .entry b { display: flex; align-items: center; font-size: 15px; font-weight: 500; line-height: 24px; }
.resources .entry span { font-size: 14px; line-height: 1.45; color: var(--dk-ink-muted); }
.panel .quick {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding: 12px 16px;
  border-top: 1px solid var(--dk-hair);
}
.panel .quick a { margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 400; }
.panel .quick a:hover { color: var(--blue); }

.panel span.new {
  /* Trimmed to the capitals, which are 8px tall at 11px (0.73em), so the pill is a whole 18px with the text centred. */
  display: inline-block; margin-left: 8px; padding: 5px 8px;
  text-box: trim-both cap alphabetic;
  border-radius: 999px; background: var(--green); color: var(--dark);
  font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
}
.resources .post span.new { align-self: flex-start; margin: 0 0 10px; }
/* Flex rows already put a 12px gap before it. */
.panel .list span.new { margin-left: -4px; }

@media (max-width: 52rem) {
  .island { grid-template-columns: 1fr auto; }
  .links, .panel, .login { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .panel.open, .links button svg { transition: none; }
}

/* Menu and footer links glide to their section, unless motion is reduced. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── Page sections ─────────────────────────────────────────────────────── */

/* Each ground states its own colour, ink, muted ink and hairline, so a block reads them and sits on any ground. */
.light { --ground: var(--light); --ink: var(--lt-ink); --muted: var(--lt-ink-muted); --hair: var(--lt-hair); color: var(--ink); }
.dark { --ground: var(--dark); --ink: var(--dk-ink); --muted: var(--dk-ink-muted); --hair: var(--dk-hair); color: var(--ink); }
.blue { --ground: var(--blue); --ink: #fff; --muted: var(--on-blue-muted); --hair: rgb(255 255 255 / 0.28); color: var(--ink); }

/* Blocks on the same ground follow each other with one section's padding between them. */
section + section { padding-top: 0; }
/* Between blocks on the same ground, the gap is sized by script so that, with a block centred on screen,
   the next one's eyebrow and the top of its headline just show at the bottom; never less than the minimum,
   so tall blocks keep their room. */
:root { --gap-min: max(128px, 25vh); --peek: 80px; }
/* The viewport without its scrollbar, which 100vw includes; set by script, 100vw until then. */
:root { --vw: 100vw; }
section:has(+ section) { padding-bottom: max(var(--gap-min), var(--fit-gap, 0px)); }

/* The island's width, so section content lines up with the nav and the footer. */
.wrap { width: min(1040px, 100%); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

.eyebrow {
  margin: 0 0 20px;
  font: 400 12px/1 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
/* A glyph ahead of the label, in the full ink, like a terminal marker; the same square as the fact lists. */
.eyebrow::before { content: "■"; margin-right: 0.8em; color: var(--ink); }

/* Balanced so a wrapped headline never strands one word on its last line. */
h1, h2, .title { margin: 0; font-family: Gabarito, sans-serif; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(48px, 7vw, 84px); line-height: 1; }
h2 { max-width: 22ch; font-size: clamp(34px, 4.2vw, 48px); line-height: 1.08; }
.title { font-size: 30px; line-height: 1.15; }

.lede { max-width: 58ch; margin: 24px 0 0; font-size: 18px; line-height: 1.55; }
.lede, .split > div > p:not(.eyebrow), .stages span, .pillars p, .shapes p, .facts li::before, .ticks li { color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 36px; }
.button {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px 1px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-hover); }
.button.quiet { padding: 0; color: inherit; }
.button.quiet:hover { color: var(--blue); }
/* On the blue ground the primary inverts, and hovers lift to the blue tint rather than vanishing into the ground. */
.blue .button.primary { background: #fff; color: var(--blue); }
.blue .button.primary:hover { background: var(--on-blue-muted); }
.blue .button.quiet:hover { color: var(--on-blue-muted); }

/* Two columns of prose and a figure, used for the gate and the review. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 120px; }
.split > div > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; }
.split .title + p { margin-top: 20px; }
.ticks { margin: 24px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; }
.ticks li + li { margin-top: 10px; }
.ticks li::before { content: "→"; position: absolute; left: 0; color: var(--ink); }

/* Hero */

.map {
  margin: 72px 0 0; padding: 24px 24px 12px; overflow-x: auto;
  border: 1px solid var(--lt-hair); border-radius: 16px; background: var(--lt-raised);
}
.map-grid {
  display: grid; grid-template-columns: 168px repeat(7, minmax(96px, 1fr)); align-items: center;
  row-gap: 4px; min-width: 840px;
}
.map-stage {
  padding-bottom: 12px; border-bottom: 1px solid var(--lt-hair); margin-bottom: 8px;
  font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lt-ink-muted);
}
.map-name { grid-column: 1; height: 36px; display: flex; align-items: center; font-size: 14px; }
.map-track { position: relative; height: 2px; margin-right: 4px; background: var(--lt-ink); }
.map-track::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--lt-ink);
}
.map-chip {
  justify-self: start; display: inline-block; padding: 6px 10px;
  text-box: trim-both cap alphabetic;
  border-radius: 999px; font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.04em; white-space: nowrap;
}
.map-chip.gate { background: var(--blue); color: #fff; }
.map-chip.running { background: var(--lt-ink); color: var(--light); }
.map-chip.stale { background: var(--yellow); color: var(--lt-ink); }
.map-chip.done { background: var(--green); color: var(--dark); }
.map-chip.proposed { border: 1px dashed var(--lt-ink-muted); color: var(--lt-ink-muted); padding: 5px 9px; }

/* The hero is a tall scroll track; its viewport-sized pin holds the canvas and the copy while the camera moves. */
.vortex-stage { position: relative; height: 340vh; }
.vortex-stage.still { height: 100vh; }
.vortex-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.vortex-pin canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vortex-copy { position: relative; z-index: 1; padding: 200px 16px 0; }
/* The next section rises over the end of the dive: pulled up over the last of the scroll track, clear where
   it overlaps so the pinned canvas and its scattered glyphs show behind its copy, dark from there on. */
.vortex-stage + section.dark {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--overlap)); padding-top: 0;
  background: linear-gradient(to bottom, transparent var(--overlap), var(--dark) var(--overlap));
  --overlap: 30vh;
}
/* Its copy rises over the dive's scattered glyphs, so each block of text carries the ground behind it,
   reaching a little past its edges without moving the layout. */
.vortex-stage + section.dark :is(.eyebrow, h2, .lede, .pillars li) { background: var(--ground); box-shadow: 0 0 0 12px var(--ground); }
.vortex-stage + section.dark :is(.eyebrow, h2, .lede) { width: fit-content; }

/* The agents, as a logo wall: a label, then a grid of hairline cells with a cross at every join. */
.agents { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 56px; }
.agents-label { margin: 0; font: 400 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.agents-label span { display: table; margin-top: 6px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 4px; }
.agents-grid {
  --cross: 9px;
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.agents-grid li {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 96px;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font: 500 18px/1 Inter, sans-serif; letter-spacing: -.01em; color: var(--ink);
}
/* A cross at the bottom-right join of every cell, and along the top and left edges. */
.agents-grid li::after, .agents-grid li:nth-child(-n + 4)::before {
  content: ""; position: absolute; z-index: 1; width: var(--cross); height: var(--cross);
  background: linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat;
}
.agents-grid li::after { right: calc(var(--cross) / -2 - .5px); bottom: calc(var(--cross) / -2 - .5px); }
.agents-grid li:nth-child(-n + 4)::before { right: calc(var(--cross) / -2 - .5px); top: calc(var(--cross) / -2 - .5px); }
.agents-grid li:nth-child(5)::before {
  content: ""; position: absolute; z-index: 1; left: calc(var(--cross) / -2 - .5px); bottom: calc(var(--cross) / -2 - .5px); width: var(--cross); height: var(--cross);
  background: linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat;
}
.agents-grid::before, .agents-grid::after {
  content: ""; position: absolute; left: calc(var(--cross) / -2 - .5px); width: var(--cross); height: var(--cross);
  background: linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat;
}
.agents-grid::before { top: calc(var(--cross) / -2 - .5px); }
.agents-grid::after { top: calc(50% - var(--cross) / 2); }
.agents-grid .logo { width: 26px; height: 26px; fill: currentColor; }
.agents-grid .wordmark { font: 600 22px/1 "JetBrains Mono", monospace; letter-spacing: -.02em; }

/* Why */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 80px 0 0; padding: 0; list-style: none; }
.pillars li { padding-top: 24px; border-top: 1px solid var(--hair); }
.pillars h3, .shapes h3 { margin: 20px 0 10px; font-size: 18px; font-weight: 500; }
.pillars p, .shapes p { margin: 0; font-size: 15px; line-height: 1.6; }


/* Flow */
.stages {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 72px 0 0; padding: 0; list-style: none;
  border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: var(--hair);
}
.stages li { display: flex; flex-direction: column; gap: 8px; min-height: 168px; padding: 20px; background: var(--ground); }
.stages .n { font: 400 11px/1 "JetBrains Mono", monospace; color: var(--muted); }
.stages b { margin-top: 12px; font-family: Gabarito, sans-serif; font-size: 22px; font-weight: 400; }
.stages span:not(.n) { font-size: 14px; line-height: 1.5; }
/* The gate a stage ends at, in the blue of what a person does. */
.stages em {
  margin-top: auto; align-self: flex-start; padding: 6px 10px; text-box: trim-both cap alphabetic;
  border-radius: 999px; background: var(--blue); color: #fff;
  font: 500 11px/1 "JetBrains Mono", monospace; font-style: normal; letter-spacing: 0.04em;
}


/* In the document: a lookalike of the real document view, with the frontend's light-theme tokens scoped here
   so it reads as the product whatever ground it sits on. */
.docs {
  --ui-canvas: oklch(93% .0161 99); --ui-surface: oklch(96.5% .009 98); --ui-raised: oklch(99.5% .0067 97);
  --ui-inset: oklch(93.5% .011 98); --ui-active: oklch(91% .017 99); --ui-fg: oklch(25% .0177 271);
  --ui-muted: oklch(48% .013 271); --ui-subtle: oklch(64% .01 271); --ui-border-subtle: oklch(92.5% .01 99);
  --ui-border: oklch(89.5% .012 99); --ui-border-strong: oklch(78% .012 99); --ui-accent: oklch(55% .246 262);
  --ui-accent-hover: oklch(45.4% .221 262); --ui-accent-subtle: oklch(90.8% .044 262);
  --ui-accent-border: oklch(82.8% .086 262); --ui-accent-text: oklch(37.1% .245 262);
  --ui-highlight: oklch(55% .246 262 / .38); --ui-highlight-soft: oklch(55% .246 262 / .14);
  --ui-added: oklch(76% .21 158 / .48); --ui-added-border: oklch(66% .16 158);
  --ui-removed: oklch(68% .22 18 / .42); --ui-removed-border: oklch(58% .19 18);
  --ui-warning: oklch(80% .165 82); --ui-xs: .75rem; --ui-sm: .8125rem;
  --ui-on-accent: oklch(99.5% .0067 97); --ui-ok: oklch(52% .14 158);
  /* A rung between the canvas and its hairline, so a strip reads as a surface rather than a thick rule. */
  --ui-strip: oklch(91.3% .014 99);
  /* The app's frame lines: between the hairline and the strong rule. */
  --ui-frame: oklch(84% .012 99);
  --ui-elevation-low: 0 1px 2px oklch(20% .01 90 / .07), 0 0 0 1px oklch(20% .01 90 / .05);
  margin-top: 80px;
}
/* Sand dark, as the frontend's dark theme: soot surfaces, chalk text, dark rules. The blue holds, its states
   move around it; diffs and the conflict amber are the same in both modes. */
.docapp[data-theme="dark"] {
  --ui-canvas: oklch(17.5% .008 99); --ui-surface: oklch(21.5% .009 99); --ui-raised: oklch(25.5% .01 99);
  --ui-inset: oklch(19.5% .008 99); --ui-active: oklch(30% .01 99); --ui-fg: oklch(93.5% .008 99);
  --ui-muted: oklch(74% .008 99); --ui-subtle: oklch(60% .008 99); --ui-border-subtle: oklch(25% .008 99);
  --ui-border: oklch(29.5% .009 99); --ui-border-strong: oklch(44% .01 99);
  --ui-accent-hover: oklch(63% .21 262); --ui-accent-subtle: oklch(37.1% .245 262);
  --ui-accent-border: oklch(45.4% .221 262); --ui-accent-text: oklch(82.8% .086 262);
  --ui-highlight: oklch(66% .2 262 / .36); --ui-highlight-soft: oklch(66% .2 262 / .15); --ui-ok: oklch(72% .14 150);
  --ui-elevation-low: 0 1px 2px oklch(0% 0 0 / .4), 0 0 0 1px oklch(100% 0 0 / .07);
  --ui-strip: oklch(14.5% .007 99);
  --ui-frame: oklch(36% .01 99);
}
.docs [hidden] { display: none !important; }
.docs p { margin: 0; }

.docapp {
  border-radius: 12px; background: var(--ui-canvas); color: var(--ui-fg);
  box-shadow: 0 30px 80px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06);
  font: 400 var(--ui-sm)/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
/* The top bar and the body share one grid, the document at most 960px beside the margin, centred together,
   so the metadata lines up with the document and the margin's header sits above the comments. */
.docapp-top, .docapp-main {
  display: grid; grid-template-columns: minmax(0, 960px) 320px; justify-content: center; column-gap: 20px;
  padding: 14px 20px 10px;
}
.docapp-meta { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.docapp-meta > * { flex: none; }
.docapp-meta > .docapp-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-sha { font: 400 var(--ui-xs)/1 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.docapp-name { font-weight: 500; }
.docapp-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ui-btn.icon-only { padding: .2rem; }
/* Unaddressed comments, sitting on the composer's top edge with revise beside them. */
.chat-pending {
  display: flex; align-items: center; gap: 8px; margin: 10px 6px -1px; padding: 6px 6px 6px 10px;
  border: 1px solid var(--ui-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--ui-inset);
  font-size: var(--ui-xs); color: var(--ui-muted);
}
.chat-pending > .ui-icon { width: 12px; height: 12px; color: var(--ui-subtle); }
.chat-pending .ui-btn { margin-left: auto; }
.chat-pending[hidden], .chat-pending .ui-btn[hidden] { display: none; }
.chat-pending:not([hidden]) + .composer { margin-top: 0; }
.docapp-main { padding-top: 0; padding-bottom: 0; }
.docapp-main > .sheet, .docapp-main > .outline { grid-area: 1 / 1; }
.docapp-main > .margin { grid-area: 1 / 2; }
/* The outline floats at the foot of the document: a pill with how far in you are, opening upwards into
   the list of sections. */
.outline {
  position: relative; z-index: 3; align-self: end; justify-self: center; display: grid; width: 240px; margin-bottom: 20px;
  border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-raised);
  box-shadow: 0 10px 30px oklch(20% .01 90 / .14); transition: width .2s ease;
}
.outline.open { width: 290px; }
.outline-panel { padding: 12px 8px 6px; border-bottom: 1px solid var(--ui-border-subtle); }
.outline-title { padding: 0 8px 8px; font: 600 var(--ui-sm)/1.3 Literata, Georgia, serif; color: var(--ui-fg); }
.outline-list { display: grid; margin: 0; padding: 0; list-style: none; }
.outline-list button {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--ui-muted); font: 400 var(--ui-sm)/1.4 Inter, sans-serif; text-align: left; cursor: pointer;
}
.outline-list button > span:first-child { font-size: var(--ui-xs); line-height: 20px; color: var(--ui-subtle); font-variant-numeric: tabular-nums; }
.outline-list button > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline-list button:hover { background: var(--ui-active); color: var(--ui-fg); }
.outline-list [aria-current="true"] { background: var(--ui-accent-subtle); color: var(--ui-accent-text); }
.outline-list [aria-current="true"] > span:first-child { color: var(--ui-accent-text); }
.outline-pill {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; border-radius: 14px; background: none;
  color: var(--ui-fg); font: 500 var(--ui-sm)/1.4 Inter, sans-serif; text-align: left; cursor: pointer;
}
.outline-pill .ui-icon { width: 12px; height: 12px; color: var(--ui-subtle); }
.outline-ring { width: 16px; height: 16px; flex: none; rotate: -90deg; fill: none; stroke-width: 2.5; }
.outline-ring circle:first-child { stroke: var(--ui-border); }
.outline-ring [data-ring] { stroke: var(--ui-accent); stroke-linecap: round; stroke-dasharray: 0 44; transition: stroke-dasharray .2s; }
.outline-current { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline-pct { margin-left: auto; font: 400 var(--ui-xs)/1 "JetBrains Mono", monospace; color: var(--ui-subtle); }
/* A little room inside the clipped margin, so the + marks' halos and focus rings aren't cut at its edges. */
.margin { padding: 6px 6px 20px; margin: -6px -6px 0; }
/* The view grows while it scrolls into view, filling the screen just as it pins; stays usable while pinned,
   for the hold the stage's extra height gives; and shrinks while it scrolls out. --grow (0 to 1) is set by script. */
.docs-stage { position: relative; height: calc(100svh + 120svh); margin-inline: calc(50% - var(--vw) / 2); }
.docs-pin { position: sticky; top: 0; display: grid; place-items: start; height: 100svh; --grow: 0; --w0: max(min(1008px, calc(var(--vw) - 32px)), calc(var(--vw) * .8)); }
/* Without motion the view just sits in the column. */
.docs-stage.still { height: auto; margin-inline: 0; }
.docs-stage.still .docs-pin { position: static; height: auto; }
.docs-stage.still .docapp { width: auto; height: 620px; margin-left: 0; }
.docapp {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
  /* Sized and placed on whole pixels, so its text and the logo's thin strokes stay sharp. */
  --w: round(calc(var(--w0) + (var(--vw) - var(--w0)) * var(--grow)), 1px);
  width: var(--w);
  height: round(calc(620px + (100svh - 620px) * var(--grow)), 1px);
  margin-left: round(down, calc((var(--vw) - var(--w)) / 2), 1px);
  border-radius: calc(12px * (1 - var(--grow)));
}
.docapp-main { min-height: 0; }
/* The mock never takes the scroll: its panels don't scroll, so the page always keeps moving under the wheel.
   A panel whose content doesn't fit fades out at the bottom instead. */
.sheet, .margin { overflow: hidden; }
.docs .clipped { mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
/* The document runs on out of the frame: cut by the status bar, not faded, and with no bottom edge. */
.docs .sheet.clipped { mask-image: none; border-bottom: 0; }
.margin { align-self: stretch; }


/* The agent column: the chat, and the item's earlier runs, beside the document so neither moves it. */
.runs {
  grid-column: 1; grid-row: 2 / 4; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px;
  overflow: hidden; padding: 14px 16px; border-right: 1px solid var(--ui-frame);
}
.run-pane[data-pane="history"] { align-content: start; overflow: hidden; }

/* The chat: newest at the bottom over the composer, older turns cut off at the top as they move up. */
.chat-pane { grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
.chat-log { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; padding-top: 4px; }
.chat-log > :first-child { margin-top: auto; }
.chat-log.clipped-top { mask-image: linear-gradient(to bottom, transparent, #000 48px); }
.chat-log > * { flex: none; }
.chat-log > .appear { transform-origin: bottom center; }
.chat-day { display: flex; align-items: center; gap: 8px; font: 400 var(--ui-xs)/1 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.chat-day::after { content: ""; flex: 1; border-top: 1px solid var(--ui-border-subtle); }
.msg { font-size: var(--ui-sm); line-height: 1.55; }
.msg.you { align-self: end; max-width: 85%; padding: .45rem .7rem; border-radius: 10px 10px 2px 10px; background: var(--ui-inset); }
.msg.agent { color: var(--ui-fg); }
.msg-quote {
  margin-bottom: 4px !important; padding-left: 8px; border-left: 2px solid var(--ui-accent-border); font-size: var(--ui-xs); color: var(--ui-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-act { display: inline-flex; align-items: center; gap: 6px; font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; }
.msg-act .ui-icon { width: 12px; height: 12px; }
/* The tools it used, one line each, folded to a count once it has moved on. */
.chat-steps { margin: 0; }
details.chat-steps-group summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  font-size: var(--ui-xs); color: var(--ui-subtle);
}
details.chat-steps-group summary::-webkit-details-marker { display: none; }
details.chat-steps-group summary:hover { color: var(--ui-fg); }
details.chat-steps-group summary .ui-icon { width: 12px; height: 12px; rotate: -90deg; transition: rotate .15s; }
details.chat-steps-group[open] summary .ui-icon { rotate: 0deg; }
details.chat-steps-group .lg-log { margin-top: 8px; }
/* Blocks: the parts of a turn you act on. */
.chat-block { display: grid; gap: 8px; padding: .6rem .65rem; border: 1px solid var(--ui-border-subtle); border-radius: 8px; background: var(--ui-surface); font-size: var(--ui-xs); line-height: 1.55; }
.chat-block .ui-quote { margin-bottom: 0 !important; white-space: normal; }
.chat-block.done { opacity: .72; }
.chat-block.done .ui-controls { display: none; }
.chat-block .ui-outcome { margin-left: 0; }
.chat-block .ui-own { font-size: var(--ui-sm); }
.chat-log .ui-change { flex: none; }
/* A decision as it was written on the document, and a way back to it. */
.recorded { display: flex; align-items: center; gap: 6px; font-size: var(--ui-xs); color: var(--ui-muted); }
.recorded > .ui-icon { width: 12px; height: 12px; color: var(--ui-ok); }
.recorded button { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; color: var(--ui-accent-text); text-decoration: underline; text-decoration-color: var(--ui-accent-border); text-underline-offset: 2px; cursor: pointer; }
.chat-working { display: flex; align-items: center; gap: 8px; font-size: var(--ui-xs); color: var(--ui-accent-text); }

/* The composer: what it will read as chips, the message, and + for more. */
.composer {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 10px;
  background: var(--ui-surface); box-shadow: var(--ui-elevation-low);
}
.composer:focus-within { border-color: var(--ui-accent-border); }
.composer.called { animation: status-flash .9s ease; }
.composer-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px; border: 1px solid var(--ui-border-subtle); border-radius: 4px;
  background: var(--ui-inset); font: 400 var(--ui-xs)/1.5 "JetBrains Mono", monospace; color: var(--ui-muted);
}
.chip .ui-icon { width: 11px; height: 11px; }
.chip { min-width: 0; }
.chip.quote { flex: 1 1 100%; }
.chip > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip button { display: grid; padding: 0; border: 0; background: none; color: var(--ui-subtle); cursor: pointer; }
.chip button:hover { color: var(--ui-fg); }
.chip.quote { max-width: 100%; border-left: 2px solid var(--ui-accent-border); font-family: Inter, sans-serif; }
.composer textarea {
  width: 100%; padding: 0; border: 0; background: none; color: var(--ui-fg); resize: none; outline: none;
  font: 400 var(--ui-sm)/1.5 Inter, sans-serif;
}
.composer textarea::placeholder { color: var(--ui-subtle); }
.composer-bar { display: flex; align-items: center; gap: 8px; }
.composer-add { position: relative; }
.composer-btn, .composer-send { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 999px; cursor: pointer; }
.composer-btn { border: 1px solid var(--ui-border); background: none; color: var(--ui-muted); }
.composer-btn:hover, .composer-btn[aria-expanded="true"] { color: var(--ui-fg); border-color: var(--ui-border-strong); }
.composer-send { margin-left: auto; border: 0; background: var(--ui-accent); color: var(--ui-on-accent); }
.composer-send:hover { background: var(--ui-accent-hover); }
.composer-btn .ui-icon, .composer-send .ui-icon { width: 13px; height: 13px; }
.composer-note { display: inline-flex; align-items: center; font-size: var(--ui-xs); color: var(--ui-subtle); }
.add-menu {
  position: absolute; bottom: calc(100% + 6px); left: -4px; z-index: 4; display: grid; width: 250px; padding: 4px;
  border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-raised); box-shadow: 0 10px 30px oklch(20% .01 90 / .14);
}
.add-menu button {
  display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 8px;
  border: 0; border-radius: 6px; background: none; color: var(--ui-fg); text-align: left; font: 400 var(--ui-sm)/1.4 Inter, sans-serif; cursor: pointer;
}
.add-menu button:hover { background: var(--ui-active); }
.add-menu b { font-weight: 500; }
.add-menu button > span { grid-column: 2; font-size: var(--ui-xs); color: var(--ui-subtle); }
.docapp-bar, .docapp-status { grid-column: 1 / -1; }
.docapp-top, .docapp-main { grid-column: 2; }
/* Tabs drawn like the status bar: flat, icon-sized and split by hairlines, on a darker strip that runs on as
   if it had room for more. The open tab is the panel itself: its ground, and no rule under it. */
.run-tabs {
  display: flex; margin: -14px -16px 6px; border-bottom: 1px solid var(--ui-frame);
  background: var(--ui-strip);
}
.run-tabs button {
  display: grid; place-items: center; padding: 8px 14px; margin-bottom: -1px;
  border: 0; border-right: 1px solid var(--ui-frame); border-bottom: 1px solid var(--ui-frame); border-radius: 0;
  background: none; color: var(--ui-subtle); cursor: pointer;
}
.run-tabs button .ui-icon { width: 13px; height: 13px; }
.run-tabs button:hover { color: var(--ui-fg); }
.run-tabs [aria-selected="true"] { color: var(--ui-fg); background: var(--ui-canvas); border-bottom-color: var(--ui-canvas); }
.run-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.run-empty { padding: 1rem .25rem; font-size: var(--ui-xs); color: var(--ui-subtle); }
.run-list { display: grid; margin: 0; padding: 0; list-style: none; }
.run-list button {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px;
  background: none; color: var(--ui-muted); font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; text-align: left; cursor: pointer;
}
.run-list button:hover { background: var(--ui-active); color: var(--ui-fg); }
.run-list [aria-current="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: 0 0 0 1px var(--ui-border-subtle); }
.run-meta { font-family: Inter, sans-serif; font-size: var(--ui-xs); color: var(--ui-subtle); }

/* A run, read as what it did: the agent's sentences, each tool with a glance at its result, and the end. */
.run-output { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.run-output:empty { display: none; }
.lg-title { font-weight: 600; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.lg-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 1px solid var(--ui-border); border-radius: 999px; font-family: Inter, sans-serif; }
.lg-pill .ui-icon { width: 11px; height: 11px; }
.lg-pill.ok { color: var(--ui-ok); border-color: currentColor; }
.lg-pill.working { color: var(--ui-accent-text); border-color: var(--ui-accent-border); }
.lg-pill.waiting { color: oklch(55% .12 82); border-color: var(--ui-warning); }
.lg-wait { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--ui-xs); color: var(--ui-muted); }
.lg-wait .ui-icon { width: 13px; height: 13px; margin-left: 3px; color: var(--ui-warning); }
.lg-spin { width: 9px; height: 9px; border: 1.5px solid var(--ui-accent-border); border-top-color: var(--ui-accent-text); border-radius: 999px; animation: lg-spin .8s linear infinite; }
@keyframes lg-spin { to { rotate: 1turn; } }
.lg-log { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.lg-log > li { animation: lg-in .25s ease both; }
@keyframes lg-in { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .lg-spin, .lg-log > li { animation: none; } }
.lg-said { padding-left: 30px; font-size: var(--ui-xs); line-height: 1.55; color: var(--ui-muted); }
.lg-used { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.lg-icon { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ui-border); border-radius: 5px; color: var(--ui-muted); }
.lg-icon .ui-icon { width: 12px; height: 12px; }
.lg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; line-height: 20px; }
.lg-tool { font: 500 var(--ui-xs)/20px "JetBrains Mono", monospace; color: var(--ui-fg); }
.lg-summary { font-size: var(--ui-xs); color: var(--ui-subtle); min-width: 0; }
.lg-threads { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.lg-threads li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: center; font-size: var(--ui-xs); color: var(--ui-muted); }
.lg-threads li > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-avatar { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ui-active); font: 500 8.5px/1 Inter, sans-serif; color: var(--ui-muted); }
.lg-quote {
  margin-top: 4px !important; padding-left: 8px; border-left: 2px solid var(--ui-accent-border);
  font-size: var(--ui-xs); line-height: 1.5; color: var(--ui-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lg-diff { display: grid; gap: 2px; margin-top: 4px; }
.lg-diff p {
  padding: 2px 6px; border-radius: 3px; font: 400 10.5px/1.5 "JetBrains Mono", monospace; color: var(--ui-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lg-diff .gone { background: var(--ui-removed); box-shadow: inset 2px 0 var(--ui-removed-border); text-decoration: line-through; text-decoration-color: var(--ui-removed-border); }
.lg-diff .came { background: var(--ui-added); box-shadow: inset 2px 0 var(--ui-added-border); }
.lg-ended {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: .55rem .65rem;
  border: 1px solid var(--ui-border-subtle); border-radius: 8px; background: var(--ui-surface); font-size: var(--ui-xs); line-height: 1.55;
}
.lg-ended > .ui-icon { width: 14px; height: 14px; margin: 2px 0 0 3px; color: var(--ui-ok); }
.docapp-status {
  display: flex; gap: 14px; padding: 6px 20px; border-top: 1px solid var(--ui-frame);
  font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; color: var(--ui-subtle);
}
.docapp-status-end { margin-left: auto; }
/* The toolbar, drawn like the status bar: a hairline and outline icons, no filled chrome, so it reads as a
   sketch of the app rather than a screenshot of it. */
.docapp-bar {
  display: flex; align-items: center; gap: 14px; padding: 6px 20px; border-bottom: 1px solid var(--ui-frame);
  color: var(--ui-subtle);
}
/* Whole pixels, so the thin strokes stay sharp. */
.docapp-logo { display: block; width: 24px; height: 24px; margin-left: -9px; color: var(--ui-subtle); }
.docapp-bar-end { display: flex; gap: 4px; margin-left: auto; }
.bar-btn { display: grid; place-items: center; padding: 3px; border: 0; border-radius: 4px; background: none; color: var(--ui-subtle); cursor: pointer; }
.bar-btn:hover { background: var(--ui-active); color: var(--ui-fg); }

.sheet {
  padding: 2rem 2.25rem; border: 1px solid var(--ui-border-subtle); border-radius: 0; background: var(--ui-surface);
  box-shadow: var(--ui-elevation-low);
  font-size: .9375rem; line-height: 1.65;
}
.sheet h3, .sheet h4 { margin: 0; font-family: Literata, Georgia, serif; color: var(--ui-fg); }
.sheet h3 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.sheet h4 { margin-top: 1.6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ui-border); font-size: 1.15rem; font-weight: 600; }
.sheet p { margin-top: .8rem; }
.sheet .doc-lede { margin-top: .6rem; font-size: 1.05rem; color: var(--ui-muted); }
.sheet ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.sheet li + li { margin-top: .35rem; }
.sheet b { font-weight: 600; }
.doc-ref { color: var(--ui-accent-text); text-decoration: underline; text-decoration-color: var(--ui-accent-border); text-underline-offset: 2px; }
.doc-table { width: 100%; margin-top: .8rem; border-collapse: collapse; font-size: .875rem; }
.doc-table th, .doc-table td { padding: .4rem .6rem; border: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.doc-table th { font-weight: 600; background: var(--ui-inset); }
.doc-table code { font: 400 .8rem "JetBrains Mono", monospace; }
.sheet mark { background: var(--ui-highlight-soft); color: inherit; border-radius: 2px; }
.sheet .gone { background: var(--ui-removed); text-decoration: line-through; text-decoration-color: var(--ui-removed-border); border-radius: 2px; }
.sheet .came { background: var(--ui-added); border-radius: 2px; }
.sheet .settled { background: var(--ui-added); border-radius: 2px; transition: background 1.6s ease; }
.sheet .settled.fade { background: transparent; }

.margin { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
.margin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }

.ui-badge { padding: .1rem .4rem; border: 1px solid var(--ui-border); border-radius: 4px; font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; }
.ui-badge.published { background: var(--ui-added-border); border-color: var(--ui-added-border); color: var(--ui-on-accent); }
.ui-badge.draft { background: var(--ui-highlight-soft); border-color: var(--ui-highlight); }
.ui-mono { font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.ui-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.ui-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem;
  border: 1px solid var(--ui-border); border-radius: 4px; background: none; color: var(--ui-muted);
  font: 400 var(--ui-xs)/1.4 Inter, sans-serif; cursor: pointer;
}
.ui-btn .ui-icon { width: 13px; height: 13px; }
.ui-btn:hover:not(:disabled) { color: var(--ui-fg); border-color: var(--ui-border-strong); }
.ui-btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
.ui-btn.primary:hover:not(:disabled) { background: var(--ui-accent-hover); color: var(--ui-on-accent); }
.ui-btn.ghost { border-color: transparent; color: var(--ui-subtle); }
.ui-btn.ghost:hover:not(:disabled) { background: var(--ui-active); }
.ui-btn.danger { background: var(--ui-removed-border); border-color: var(--ui-removed-border); color: var(--ui-on-accent); }
.ui-btn.danger:hover:not(:disabled) { background: oklch(50% .19 18); border-color: oklch(50% .19 18); color: var(--ui-on-accent); }
.ui-btn:disabled { opacity: .45; cursor: default; }
.ui-btn[data-busy] { color: var(--ui-accent-text); }

/* Threads */
.ui-card { padding: .7rem .75rem; border: 1px solid var(--ui-border-subtle); border-radius: 6px; background: var(--ui-surface); }
.ui-card:hover { background: var(--ui-raised); border-color: var(--ui-border-strong); }
.ui-quote { margin-bottom: 8px !important; padding-left: .6rem; border-left: 3px solid var(--ui-accent-border); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-quote.was { background: var(--ui-removed); border-left-color: var(--ui-removed-border); text-decoration: line-through; }
.ui-quote.now { background: var(--ui-added); border-left-color: var(--ui-added-border); color: var(--ui-fg); }
.ui-reworded { margin-bottom: 4px !important; font-size: var(--ui-xs); color: var(--ui-subtle); }
.ui-byline { display: flex; align-items: center; gap: .4rem; }
.ui-byline b { font-weight: 600; }
.ui-avatar { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--ui-active); color: var(--ui-muted); }
.ui-avatar svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-avatar.agent { background: var(--ui-accent-subtle); color: var(--ui-accent-text); }
.ui-kind { padding: 0 .25rem; border: 1px solid var(--ui-border-subtle); border-radius: 4px; font-size: var(--ui-xs); color: var(--ui-subtle); }
.ui-time { font-size: var(--ui-xs); color: var(--ui-subtle); }
.ui-settle { width: 14px; height: 14px; margin-left: auto; fill: none; stroke: var(--ui-subtle); stroke-width: 1.75; }
.ui-message { margin-top: 4px !important; }
.ui-replies { margin-top: 8px; padding-left: .7rem; border-left: 1px solid var(--ui-border); }
.ui-replies .ui-message { color: var(--ui-muted); }
.ui-replies ul { margin: 6px 0; padding-left: 1.1rem; color: var(--ui-muted); }
.ui-replies li { margin: 3px 0; }
.ui-code { padding: 0 .3em; border: 1px solid var(--ui-border-subtle); border-radius: 4px; background: var(--ui-inset); font: 400 .9em "JetBrains Mono", monospace; }
.ui-card { position: relative; }
.ui-reopen { position: absolute; top: .7rem; right: .75rem; width: 14px; height: 14px; fill: none; stroke: var(--ui-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-resolved-by { margin-top: 8px !important; font-size: var(--ui-xs); color: var(--ui-subtle); }
.ui-reply-line { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--ui-border-subtle); }
.ui-reply-line input { width: 100%; padding: 0; border: 0; background: none; color: var(--ui-fg); outline: none; font: 400 var(--ui-xs)/1.6 Inter, sans-serif; }
.ui-reply-line input::placeholder { color: var(--ui-subtle); }
.ui-card.is-resolved .ui-reply-line { display: none; }
.ui-card.is-resolved > :not(.ui-reopen-btn):not(.ui-resolved-by) { opacity: .7; }
.ui-reopen-btn { position: absolute; top: .6rem; right: .65rem; display: grid; padding: 2px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.ui-reopen-btn .ui-reopen { position: static; }
.ui-reopen-btn:hover { background: var(--ui-active); }
.ui-resolved { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ui-card.collapsed { opacity: .55; padding: .45rem .75rem; }
.ui-collapsed-line { font-size: var(--ui-xs); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-resolved-toggle, .ui-link {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 2px; border: 0; background: none;
  font: 400 var(--ui-xs)/1.4 Inter, sans-serif; color: var(--ui-subtle); cursor: pointer;
}
.ui-link { justify-self: end; }
.ui-resolved-toggle:hover, .ui-link:hover { color: var(--ui-fg); }
.ui-compose { display: grid; gap: 8px; }
.ui-compose textarea {
  resize: none; padding: 0; border: 0; background: none; color: var(--ui-fg); outline: none;
  font: 400 var(--ui-sm)/1.5 Inter, sans-serif;
}
.ui-compose textarea::placeholder { color: var(--ui-subtle); }
.ui-compose .ui-controls .ui-time { margin-left: auto; }

/* Changes */
.ui-round { display: flex; align-items: center; gap: 8px; font-size: var(--ui-xs); color: var(--ui-muted); }
.ui-change { border: 1px solid var(--ui-border-subtle); border-radius: 4px; background: var(--ui-surface); }
.ui-change[data-state] { opacity: .72; }
.ui-summary { display: flex; align-items: center; gap: 8px; padding: .55rem .6rem; font-weight: 600; }
.ui-state { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ui-subtle); stroke-width: 2; stroke-linecap: round; }
.ui-change[data-state="accepted"] .ui-state { stroke: var(--ui-added-border); }
.ui-change-body { display: grid; gap: 6px; padding: 0 .6rem .6rem; }
.ui-path { font: 400 var(--ui-xs)/1.4 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.ui-gone, .ui-came { padding: .3rem .4rem; border-radius: 4px; font: 400 var(--ui-xs)/1.5 "JetBrains Mono", monospace; color: var(--ui-fg); }
.ui-gone { background: var(--ui-removed); box-shadow: inset 2px 0 var(--ui-removed-border); }
.ui-came { background: var(--ui-added); box-shadow: inset 2px 0 var(--ui-added-border); }

/* The selection, its island, and the thread it becomes. */
.sheet { position: relative; }
.sheet .is-selected { background: var(--ui-highlight); border-radius: 2px; }
.sheet .is-anchored { background: var(--ui-highlight-soft); border-radius: 2px; }
.sel-island {
  position: absolute; z-index: 2; display: flex; gap: 4px; padding: 4px; border: 1px solid oklch(30% .01 99); border-radius: 8px;
  background: oklch(21.5% .009 99); box-shadow: 0 10px 30px oklch(0% 0 0 / .3);
}
/* Dark in either theme, like a floating toolbar over the page. */
.sel-island .ui-btn.ghost { color: oklch(74% .008 99); }
.sel-island .ui-btn.ghost:hover { background: oklch(30% .01 99); color: oklch(93.5% .008 99); }
/* Opens below and towards the inside of the sheet, which clips anything past its edge. */
.sel-island .hint-pop { bottom: auto; top: calc(100% + 10px); left: auto; right: 0; translate: 0 4px; }
.sel-island .hint.open .hint-pop, .sel-island .hint:hover .hint-pop { translate: 0 0; }
.sel-island .ui-btn { white-space: nowrap; }
.ui-threads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ui-threads:empty { display: none; }

/* The status picker, as the app's: a neutral control with a menu of what each status means. */
.status-pick { position: relative; }
.status-btn .status-chev { width: 11px; height: 11px; color: var(--ui-subtle); }
.status-btn.changed { animation: status-flash .9s ease; }
@keyframes status-flash { 30% { box-shadow: 0 0 0 3px var(--ui-highlight-soft); border-color: var(--ui-accent); } }
.status-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 4; display: grid; width: 300px; padding: 4px;
  border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-raised); box-shadow: 0 10px 30px oklch(20% .01 90 / .14);
}
.status-menu button {
  display: grid; grid-template-columns: 14px 1fr 14px; column-gap: 8px; row-gap: 2px; align-items: center; padding: 7px 10px;
  border: 0; border-radius: 6px; background: none; color: var(--ui-fg); text-align: left; font: 400 var(--ui-sm)/1.4 Inter, sans-serif; cursor: pointer;
}
.status-menu button:hover { background: var(--ui-active); }
.status-menu b { font-weight: 600; }
.status-menu button > span { grid-column: 2 / 4; font-size: var(--ui-xs); color: var(--ui-subtle); }
.status-check { visibility: hidden; color: var(--ui-fg); }
.status-menu [aria-checked="true"] .status-check { visibility: visible; }
/* Reviewers' comments arrive one by one. */
.ui-card.arriving { animation: card-in .45s ease both; }
@keyframes card-in { from { opacity: 0; translate: 0 -6px; } }
/* Each step of the story arrives rather than appears: a short fade and grow from its top edge. */
.appear { animation: appear .45s cubic-bezier(.2, .7, .2, 1) both; transform-origin: top center; }
@keyframes appear { from { opacity: 0; scale: .96; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .ui-card.arriving, .status-btn.changed, .appear { animation: none; } }
.sheet .is-arrived { background: var(--ui-highlight-soft); border-radius: 2px; }
/* Hovering a thread lights up the passage it is anchored to, as in the app. */
.sheet .is-focus, .sheet .is-focus * { background: var(--ui-highlight) !important; border-radius: 2px; }
.ui-btn[aria-pressed="true"] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
.ui-why { color: var(--ui-fg); line-height: 1.6; }
.ui-controls { display: flex; flex-wrap: wrap; gap: 6px; }
/* A proposal folds to its summary line from its chevron, and folds itself once answered. */
.ui-change.folded .ui-change-body { display: none; }
.ui-change[data-state] .ui-controls, .ui-change[data-state] .ui-say { display: none; }
.ui-fold { display: grid; place-items: center; margin-left: auto; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--ui-subtle); cursor: pointer; }
.ui-fold:hover { background: var(--ui-active); color: var(--ui-fg); }
.ui-fold .ui-icon { width: 13px; height: 13px; rotate: 90deg; transition: rotate .15s; }
.ui-change.folded .ui-fold .ui-icon { rotate: 0deg; }
.ui-outcome { margin-left: auto; font-weight: 400; font-size: var(--ui-xs); color: var(--ui-subtle); }
.ui-outcome + .ui-fold { margin-left: 0; }
.ui-summary > span:first-of-type { min-width: 0; }
.ui-reply { padding: .5rem .6rem; border-radius: 4px; background: var(--ui-inset); color: var(--ui-muted); line-height: 1.6; }
.ui-reply > span { margin-right: .4rem; font: 400 var(--ui-xs)/1 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.ui-say textarea { width: 100%; box-sizing: border-box; padding: .4rem .5rem; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-raised); color: var(--ui-fg); resize: none; font: 400 var(--ui-xs)/1.5 Inter, sans-serif; outline: none; }
.ui-note { font-size: var(--ui-xs); color: var(--ui-muted); }

/* Conflicts, settled in the text */
.ui-conflicts { display: grid; gap: 10px; margin: 0 0 1.4rem; padding: .75rem .9rem; border: 1px solid var(--ui-warning); border-radius: 6px; background: var(--ui-raised); font-size: var(--ui-sm); line-height: 1.5; }
.ui-where { margin-left: auto; font-size: var(--ui-xs); color: var(--ui-accent-text); text-decoration: underline; text-decoration-color: var(--ui-accent-border); text-underline-offset: 2px; }
/* The passage being settled stays where it is, marked in the conflict's amber. */
.sheet .in-conflict { padding: .3rem .5rem; margin-inline: -.5rem; border-left: 2px solid var(--ui-warning); background: oklch(80% .165 82 / .14); border-radius: 0 3px 3px 0; }
.ui-conflicts p { margin-top: 0; }
.ui-conflict-head { display: flex; align-items: center; gap: 8px; }
.ui-conflict-head b { font-weight: 600; }
.ui-conflict-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-tally { margin-left: auto; font-size: var(--ui-xs); color: var(--ui-subtle); font-variant-numeric: tabular-nums; }
.ui-passage { display: grid; gap: 6px; }
.ui-side {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; padding: .4rem .5rem; text-align: left;
  border: 1px solid var(--ui-border-subtle); border-radius: 4px; background: var(--ui-surface);
  font: 400 var(--ui-sm)/1.5 Inter, sans-serif; color: var(--ui-fg); cursor: pointer;
}
.ui-side span { font: 400 var(--ui-xs)/1.7 "JetBrains Mono", monospace; color: var(--ui-subtle); }
.ui-side[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-active); }
.ui-own { padding: .3rem .45rem; border-left: 2px solid var(--ui-accent-border); background: var(--ui-surface); border-radius: 0 4px 4px 0; }


/* The + marks: a short explanation on hover, focus or tap. */
.hint { position: relative; display: inline-flex; vertical-align: middle; }
.hint:not(li) { margin-left: 4px; }
.hint-dot {
  display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 999px;
  background: var(--ui-accent); color: #fff; font: 600 12px/1 Inter, sans-serif; cursor: help;
  box-shadow: 0 0 0 4px oklch(55% .246 262 / .18);
}
.hint-pop {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; width: 220px; translate: -50% 4px;
  padding: 10px 12px; border-radius: 8px; background: var(--dark); color: var(--dk-ink);
  font: 400 12px/1.45 Inter, sans-serif; text-align: left; white-space: normal; text-decoration: none;
  box-shadow: 0 12px 32px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, translate .15s, visibility 0s .15s;
}
.hint:hover .hint-pop, .hint :focus-visible + .hint-pop, .hint.open .hint-pop {
  opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .15s, translate .15s;
}
/* In the document view the explanations float above everything instead, so no panel clips them. */
.docs .hint-pop { display: none !important; }
.float-pop {
  position: fixed; z-index: 50; width: 240px; padding: 10px 12px; border-radius: 8px; background: var(--dark); color: var(--dk-ink);
  font: 400 12px/1.45 Inter, sans-serif; box-shadow: 0 12px 32px rgb(0 0 0 / .35); pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.float-pop.shown { opacity: 1; }

/* Interlock */
.interlock h2 { max-width: 13em; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 48px 0 0; padding: 0; list-style: none; }
.facts li { font: 400 13px/1 "JetBrains Mono", monospace; }
.facts li::before { content: "■ "; }

/* The ideas section opens on its split, so the split needs no gap above it. */
.shape .split { margin-top: 0; }


/* Deployment shapes follow the stack's pillars in the same section. */
.stack .shapes { margin-top: 56px; }


/* Scraps sit slightly askew until they become an idea, which sits square. */
.scraps { margin: 0; padding: 24px; border: 1px solid var(--hair); border-radius: 16px; background: var(--dk-raised); }
.scraps ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.scraps li { padding: 12px 14px; border: 1px dashed var(--muted); border-radius: 12px; }
.scraps li:nth-child(1) { rotate: -1.2deg; }
.scraps li:nth-child(2) { rotate: 0.8deg; margin-left: 20px; }
.scraps li:nth-child(3) { rotate: -0.5deg; margin-right: 12px; }
.scrap-kind, .scrap-arrow { font: 400 11px/1.4 "JetBrains Mono", monospace; color: var(--muted); }
.scraps li p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.scrap-arrow { margin: 16px 0; text-align: center; }
.idea { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--dark); }
.idea b { font-family: Gabarito, sans-serif; font-size: 22px; font-weight: 400; }
.idea p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.idea em {
  align-self: flex-start; margin-top: 4px; padding: 6px 10px; text-box: trim-both cap alphabetic;
  border-radius: 999px; background: var(--blue); color: #fff;
  font: 500 11px/1 "JetBrains Mono", monospace; font-style: normal; letter-spacing: 0.04em;
}

/* Deploy */
.shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 72px 0 0; padding: 0; list-style: none; }
.shapes li { padding: 24px; border: 1px solid var(--hair); border-radius: 16px; }

@media (max-width: 52rem) {
  section { padding: 96px 16px; }
  :root { --gap-min: 96px; }
  .vortex-copy { padding-top: 140px; }
  .pillars, .shapes { grid-template-columns: 1fr; }
  .agents { grid-template-columns: minmax(0, 1fr); }
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
  .agents-grid li:nth-child(-n + 4)::before { display: none; }
  .agents-grid li:nth-child(-n + 2)::before { display: block; }
  .agents-grid li:nth-child(5)::before { display: none; }
  .agents-grid::after { display: none; }
  .stages { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; }
  .docs-stage { height: auto; margin-inline: 0; }
  .docs-pin { position: static; height: auto; }
  .docapp { width: auto; height: auto; margin-left: 0; border-radius: 12px; }
  .docapp-top, .docapp-main { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .docapp { grid-template-columns: minmax(0, 1fr); }
  .runs, .outline { display: none; }
  .docapp-main > .margin { grid-area: auto; }
  .docapp-top, .docapp-main { grid-column: 1; }
  .sheet, .margin { overflow: visible; }
  .docs .clipped { mask-image: none; }
  .sheet { padding: 1.25rem; }
}

/* Straight on the last dark section, at the island's width. */
.footer-ground { padding: 0 16px 32px; }
.site {
  width: min(1040px, 100%); margin: 0 auto; box-sizing: border-box;
  /* 16px sides, the island's own inset, so the footer's content lines up with the nav's. */
  padding: 56px 16px 32px;
  color: var(--dk-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.site a { color: inherit; text-decoration: none; }
.site a:hover { color: var(--blue); }
.site ul { margin: 0; padding: 0; list-style: none; }

.site-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; }
.site-lock { display: inline-flex; }
.site-lock svg { display: block; width: 137px; height: 28px; }
.site-lock:hover { color: inherit; }
.site-brand p { max-width: 34ch; margin: 20px 0 24px; font-size: 14px; line-height: 1.6; color: var(--dk-ink-muted); }
.socials { display: flex; gap: 16px; }
.socials a { display: flex; color: var(--dk-ink-muted); }

.site-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.site-links h2 { margin: 4px 0 16px; font-size: 14px; font-weight: 500; }
.site-links li + li { margin-top: 10px; }
.site-links a { font-size: 14px; color: var(--dk-ink-muted); }

/* A grey between the muted ink and the hairline, so it sits below the links. */
.site-legal {
  margin: 56px 0 0; text-align: left;
  font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.04em; color: oklch(52% .008 99);
}

@media (max-width: 52rem) {
  .site { padding: 40px 16px 28px; }
  .site-top { grid-template-columns: 1fr; gap: 40px; }
  .site-links { grid-template-columns: repeat(2, 1fr); }
}