/* Everything below the hero, and the pages behind it, layered on css/styles.css,
   which holds the brand's tokens, fonts, header, hero, buttons and feature strip.
   Orange is the signal: in diagrams it marks judgement, a model's or a person's,
   and elsewhere the one thing to do next. */
@font-face { font-family: 'Inter'; font-weight: 400 800; font-display: swap; src: url(fonts/Inter-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
:root {
  --paper: var(--color-bg);
  --surface: #070d2b;
  --ink: var(--color-text);
  --ink-2: var(--color-text-nav);
  --muted: #a9b6d8;
  --faint: #8493b8;
  --line: var(--color-line);
  --line-2: rgba(140, 170, 230, .3);
  --bar: #2f3e6c;
  --signal: var(--color-accent);
  --good: #0be2ff;
  --cyan: #0be2ff;
  --font-text: 'Inter', var(--font-sans);
  --sans: var(--font-text);
  --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  /* one design pixel for the header and the strip, as --px is for the hero */
  --c: clamp(.7px, calc(100vw / 1672), 1px);
}
html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.6; }
/* Display cuts are for headlines: everything people read at length is in the text cut. */
.install, .sections, .doc, footer { font-family: var(--font-text); }
.sub a, .more a, .byline a, .prose a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.sub a:hover, .more a:hover, .byline a:hover, .prose a:hover { text-decoration-color: var(--ink); }
p, h1, h2, h3, h4, ol, ul, dl, dd, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
code { font-family: var(--mono); font-size: .92em; }
.signal { color: var(--signal); }
.whole { display: inline-block; }
.mono { font-family: var(--mono); }
.primary-nav__link[aria-current] { color: #fff; }

/* The hero's copy runs longer than the comp's: the stage hangs from the hero's
   bottom edge, so the floor still meets the feature strip. */
.hero__lede { max-width: calc(760 * var(--px)); }
.hero__copy { padding-bottom: calc(44 * var(--px)); }
@media (min-width: 1101px) {
  .hero__visual { align-self: end; margin-top: 0; margin-bottom: calc(151 * var(--v)); }
}
/* The comp's header and strip, scaled with the page as the hero is, on one row. */
@media (min-width: 861px) {
  .site-header__inner { flex-wrap: nowrap; height: calc(116 * var(--c)); padding-top: calc(10 * var(--c)); padding-bottom: 0; }
  .brand { gap: calc(14.5 * var(--c)); }
  .brand__mark { width: calc(86.84 * var(--c)); margin-top: calc(-15.4 * var(--c)); }
  .brand__name { font-size: calc(44 * var(--c)); }
  .primary-nav { order: 0; width: auto; margin-left: calc(106 * var(--c)); overflow: visible; }
  .primary-nav__list { gap: calc(64 * var(--c)); padding: 0; }
  .primary-nav__link { font-size: max(15px, calc(20 * var(--c))); }
  .site-header__actions { gap: calc(35 * var(--c)); }
  .icon-link img { width: calc(34 * var(--c)); height: calc(34 * var(--c)); }
  .button--small { height: max(36px, calc(49 * var(--c))); padding: 0 calc(17 * var(--c)) 0 calc(20 * var(--c)); gap: calc(6.5 * var(--c)); font-size: max(14px, calc(16.4 * var(--c))); }
  .button--small .button__icon { width: calc(13 * var(--c)); }
  .features__list { padding-top: calc(31 * var(--c)); padding-bottom: calc(60 * var(--c)); }
  .feature { gap: calc(27 * var(--c)); min-height: calc(87 * var(--c)); }
  .feature + .feature { padding-left: calc(45 * var(--c)); }
  .feature__icon { width: auto; height: calc(50 * var(--c)); margin-top: calc(9 * var(--c)); }
  .feature__body { padding-top: calc(12 * var(--c)); }
  .feature__title { font-size: max(15px, calc(19.5 * var(--c))); line-height: 1.2; }
  .feature__text { margin-top: calc(9 * var(--c)); font-size: max(13px, calc(16.3 * var(--c))); }
}
/* The strip's lines are shorter than the comp's, so it holds four across for longer. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .features__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature + .feature, .feature:nth-child(3) { padding-left: calc(45 * var(--c)); border-left: 1px solid var(--color-divider); }
}

.kicker { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border: 1px solid var(--color-chip-border); border-radius: 999px; font-size: 14px; line-height: 1.4; color: var(--color-text-chip); }

.install { padding-top: 56px; }

.term { position: relative; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.term-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 0 22px; font: 12.5px/1.5 var(--mono); color: var(--faint); }
.copy { min-height: 30px; padding: 3px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: none; color: var(--ink-2); font: 12.5px var(--mono); cursor: pointer; }
.copy:hover { border-color: var(--faint); color: var(--ink); }
.term pre { margin: 0; padding: 8px 22px 20px; font: 14.5px/1.75 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.term code { font: inherit; }
.term .prompt { color: var(--good); user-select: none; }
.term strong { font-weight: 500; color: var(--ink); }
.term .out { color: var(--faint); }
.term-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.term-foot .mono { font-size: 12.5px; line-height: 1.9; color: var(--faint); }

.sections > section { padding-top: 104px; }
.label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sections h2, .prose h2 { margin-top: 16px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.14; font-weight: 700; letter-spacing: -.024em; }

.sub { max-width: 660px; margin-top: 20px; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--ink-2); }

/* The ways of working: a dial, what a person says, what temper proposes. */
.dial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 32px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; }
.dial button { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 14.5px/1.3 var(--sans); cursor: pointer; }
.dial button:hover { color: var(--ink); }
.dial button[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
html:not(.js) .dial, html:not(.js) .dial-ends { display: none; }
.dial-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 12.5px/1.5 var(--mono); color: var(--faint); }
.pane { display: grid; grid-template-columns: 5fr 7fr; gap: 20px 44px; align-items: start; margin-top: 28px; min-height: 250px; }
.js .pane:not(.on) { display: none; }
.pane-name { grid-column: 1 / -1; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.js .pane-name { display: none; }
.say { font-size: clamp(20px, 2.5vw, 25px); line-height: 1.35; letter-spacing: -.012em; }
.say-by { margin-bottom: 12px; font: 12.5px/1.5 var(--mono); color: var(--faint); }
.proposal { padding: 18px 20px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font: 13px/1.6 var(--mono); color: var(--ink-2); }
.proposal-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; color: var(--faint); font-size: 12.5px; }
.proposal h4 { margin-top: 16px; font-weight: 500; color: var(--ink); }
.proposal li { padding-left: 14px; }
.proposal .gap { color: var(--muted); }

.line-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: 40px; }
.line-title { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.line-sub { margin-top: 8px; color: var(--ink-2); }
.rail { display: block; width: 100%; height: auto; margin-top: 28px; overflow: visible; }
html:not(.js) .rail { display: none; }
.rail text { font: 11.5px var(--mono); fill: var(--faint); paint-order: stroke; stroke: rgba(1, 6, 27, .5); stroke-width: 3px; stroke-linejoin: round; }
.rail text.stn { fill: var(--ink-2); transition: fill .2s; }
.rail .judge { fill: var(--signal); }
.rail .base, .rail .auth, .rail path { fill: none; }
.rail .base { stroke: var(--line-2); stroke-width: 1.5; }
.rail .auth { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 5; }
.rail .road { stroke: var(--line-2); stroke-width: 1.5; }
.rail .road.up { stroke: var(--signal); stroke-opacity: .42; }
.rail .trail { stroke: var(--ink); stroke-width: 2; }
.rail .trail.up { stroke: var(--signal); }
.rail .st use { fill: var(--signal); }
.rail .st rect { fill: var(--ink-2); }
.rail .st circle { fill: var(--paper); stroke: var(--signal); stroke-width: 2.5; }
.rail .st > * { transition: transform .25s; }
.rail .st.on > * { transform: scale(1.4); }
.rail .st.on rect { fill: var(--ink); }
.rail .st.on + text.stn { fill: var(--ink); }
#dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; transition: opacity .12s; }
#dot.held { opacity: 0; }
#dot.up { fill: var(--signal); }
.stops { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 4px 16px; font: 13px/1.7 var(--mono); color: var(--ink-2); }
.stops li::before, .legend i::before { display: inline-block; width: 1.25em; font-style: normal; color: var(--ink-2); content: '■'; }
.stops li[data-k="a"]::before, .legend .a::before { color: var(--signal); content: '✦'; }
.stops li[data-k="p"]::before, .legend .p::before { color: var(--signal); content: '○'; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--muted); }
.legend i { font-style: normal; }
.more { margin-top: 20px; font-size: 15px; color: var(--muted); }
.closing h2 { margin-top: 0; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
.closing .sub { margin-top: 10px; font-size: 16px; }

.byline { margin-top: 14px; font-size: 13.5px; color: var(--faint); }
.wave { display: flex; align-items: stretch; gap: 2px; height: 104px; margin-top: 36px; border-bottom: 1px solid var(--line-2); }
.wave i { position: relative; flex: 1 1 0; min-width: 0; }
.wave i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v) / 84 * 100%); border-radius: 2px 2px 0 0; background: var(--bar); }
.wave i:nth-last-child(-n+24)::after { background: var(--cyan); }
.wave i:hover::after { background: var(--ink); }
.days { position: relative; height: 22px; margin-top: 6px; font: 11.5px/22px var(--mono); color: var(--faint); }
.days span { position: absolute; top: 0; white-space: nowrap; }
.wave-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 24px; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.wave-foot output { font: 12.5px/1.75 var(--mono); color: var(--ink-2); }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.nums dd { font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nums dt { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.nums div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.wpr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 20px; }
.wpr h3 { font-size: clamp(34px, 4.4vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.024em; }
.wpr .mono { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.wpr .mono span { color: var(--faint); }
.wpr article > p:last-child { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* The pages behind the home page. */
.doc { padding-top: 56px; margin: 0 auto; }
.doc h1 { margin-top: 20px; font-size: clamp(36px, 5.4vw, 54px); line-height: 1.06; font-weight: 700; }
.prose .lede { max-width: 34em; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--color-text-soft); }
.prose { max-width: 680px; }
.prose h2 { margin-top: 72px; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 24px; }
.prose h3 { margin-top: 32px; font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -.008em; scroll-margin-top: 24px; }
.prose p { margin-top: 14px; color: var(--ink-2); }
.prose .lede { margin-top: 26px; }
.prose ul.list, .prose ol.list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; color: var(--ink-2); }
.prose ul.list li, .prose ol.list li { padding-left: 14px; border-left: 1px solid var(--line-2); }
.prose li b, .prose p b, td b { font-weight: 500; color: var(--ink); }
.toc { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding-left: 14px; border-left: 1px solid var(--line-2); font-size: 15px; color: var(--muted); }
.block { margin-top: 20px; padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font: 13px/1.7 var(--mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.block b { font-weight: 500; color: var(--ink); }
.block .prompt { color: var(--good); user-select: none; }
.block .out { color: var(--faint); }
.note { margin-top: 12px; font-size: 13.5px; color: var(--faint); }
.scroll { margin-top: 20px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
th, td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
th { font-weight: 500; color: var(--muted); }
tbody th { color: var(--ink); }
.ways-table { min-width: 680px; }
.steps { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 0 10px; counter-increment: step; color: var(--ink-2); }
.steps li::before { font: 13px/1.85 var(--mono); color: var(--faint); content: counter(step); }
.steps.marked li::before { line-height: 1.6; }
.steps.marked li[data-k="a"]::before { color: var(--signal); content: '✦'; }
.steps.marked li[data-k="c"]::before { color: var(--ink-2); content: '■'; }
.steps b { display: block; font-weight: 500; color: var(--ink); }
.steps p { grid-column: 2; margin-top: 2px; }
.thesis { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; margin-top: 56px; scroll-margin-top: 24px; }
.thesis .n { font: 13px/2.3 var(--mono); color: var(--faint); }
.thesis h2 { margin-top: 0; font-size: clamp(23px, 3vw, 29px); line-height: 1.22; letter-spacing: -.018em; }
.thesis p:not(.n) { grid-column: 2; margin-top: 12px; color: var(--ink-2); }

.brand--small { gap: 8px; margin: 0; }
.brand--small .brand__mark { width: 44px; margin: 0; }
.brand--small .brand__name { font-size: 20px; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.links a:hover { color: var(--ink); }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 104px; padding: 26px 0 44px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--faint); }

@media (max-width: 860px) {
  :root { --gutter-start: 16px; --gutter-end: 16px; }
  body { font-family: var(--font-text); background-image: radial-gradient(ellipse 62vw 800px at 100% 320px, #07043a 0, transparent 72%); }

  .site-header__inner { flex-wrap: wrap; row-gap: 2px; padding-top: 12px; padding-bottom: 6px; }
  .brand { gap: 10px; }
  .brand__mark { width: 52px; margin-top: -8px; }
  .brand__name { font-size: 26px; }
  .primary-nav { order: 3; width: 100%; margin-left: 0; padding-top: 0; overflow: visible; }
  .primary-nav__list { flex-wrap: wrap; gap: 4px 20px; padding: 8px 0; }
  .primary-nav__link { font-size: 15px; }
  .site-header__actions { gap: 14px; }
  .site-header__actions .icon-link { display: block; }
  .icon-link img { width: 28px; height: 28px; }
  .site-header__actions .button--small { height: 40px; padding: 0 14px 0 16px; font-size: 14px; }

  .home { display: flex; flex-direction: column; }
  .hero { order: 1; }
  .install { order: 2; padding-top: 24px; }
  .features { order: 3; margin-top: 48px; border-bottom: 1px solid var(--color-line); }
  .sections { order: 4; }

  .hero__copy { padding-top: 28px; padding-bottom: 0; }
  .hero__title { margin-top: 16px; font-size: clamp(32px, 8.9vw, 52px); line-height: 1.04; letter-spacing: -.022em; }
  .hero__line, .hero__line:nth-child(n) { letter-spacing: inherit; white-space: nowrap; }
  .hero__lede { max-width: 34em; margin-top: 18px; font-size: 17px; line-height: 1.38; letter-spacing: 0; color: var(--muted); }
  .hero__actions { flex-direction: row; align-items: center; gap: 16px; margin: 26px 0 0; }
  .button--large, .button--outline.button--large { height: 52px; font-size: 15px; }
  .button--primary.button--large, .button--outline.button--large { padding: 0 24px; gap: 10px; letter-spacing: 0; }
  .button--primary.button--large .button__icon { width: 14px; }
  .button--outline.button--large .button__icon { width: 20px; }
  .hero__visual { --v: calc(min(478px, 100vw - 32px) / 478); margin: 20px auto 0; padding-bottom: calc(64 * var(--v)); }
  .hero__visual::before { -webkit-mask-image: linear-gradient(#000 68%, transparent 86%); mask-image: linear-gradient(#000 68%, transparent 86%); }

  .features__list { row-gap: 14px; padding-top: 24px; padding-bottom: 24px; }
  .feature { align-items: center; gap: 14px; min-height: 0; }
  .feature__icon { width: 34px; height: 34px; margin-top: 0; object-fit: contain; }
  .feature__body { padding-top: 0; }
  .feature__title { font-size: 15px; line-height: 1.5; }
  .feature__text { margin-top: 0; font-size: 13px; }

  .doc { padding-top: 32px; }
  .sections > section { padding-top: 80px; }
  .term pre { padding: 8px 16px 16px; font-size: 13.5px; }
  .term-head { padding-left: 16px; }
  .rail { display: none; }
  .dial { grid-template-columns: repeat(2, 1fr); }
  .pane { grid-template-columns: 1fr; min-height: 0; }
  .wave { gap: 1px; height: 84px; }
  .nums { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }
  .wpr { grid-template-columns: 1fr; gap: 40px; }
  .thesis { grid-template-columns: 1fr; }
  .thesis p:not(.n) { grid-column: 1; }
  footer { margin-top: 80px; }
}
@media (max-width: 760px) {
  .eyebrow { gap: 10px; font-size: 14px; white-space: nowrap; }
}
@media (min-width: 861px) {
  .js .stops { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #dot { display: none; }
}