/* The olki.ai home page: one quiet grotesk, the mono for data, one column on a hairline, headings and pictures wider
   than the text. Headings are large and serif; nothing is centred, nothing is italic. */
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Serif"; src: url("fonts/GeistSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ioskeley Mono"; src: url("fonts/IoskeleyMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #2c2b31; --body: #5a5a5e; --dim: #7d7d81; --rule: #ececeb; --wash: #f5f5f4;
  --cobalt: #2f45d8; --red: #e0452a;
  --sans: "Switzer", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Geist Serif", Georgia, "Times New Roman", serif;
  --mono: "Ioskeley Mono", ui-monospace, Menlo, monospace;
  --side: 232px; --text: 680px; --wide: 1040px; --pad: 44px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: .005em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }

/* The side: the name, the pages, and one way in. */
.side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side); padding: 44px 0 36px 44px; display: flex; flex-direction: column; font-size: 14px; }
.side .logo img { height: 26px; width: auto; display: block; margin-left: -2px; }
.side nav { display: flex; flex-direction: column; gap: 7px; margin-top: 34px; color: var(--body); }
.side nav a:hover, .side nav a.on { color: var(--ink); }
.side .foot { margin-top: auto; color: var(--dim); font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.side .foot i { font-style: normal; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); margin-right: 7px; vertical-align: 1px; }

/* The column: a hairline on its left; headings, standfirsts and pictures run wider than the text. */
main { margin-left: var(--side); border-left: 1px solid var(--rule); min-height: 100vh; position: relative; }
section { position: relative; padding: 0 var(--pad); }
section + section { margin-top: 150px; }
h2 { position: relative; }
h2 .anchor { position: absolute; left: -30px; top: 0; padding: 0 6px; color: #a9a9a7; font-family: var(--mono); font-size: 24px; line-height: 53px; opacity: 0; transition: opacity .15s; }
h2:hover .anchor, h2 .anchor:focus { opacity: 1; }
h2 .anchor:hover { color: var(--cobalt); }
section[id] { scroll-margin-top: 56px; }
h1, h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 14px; max-width: var(--text); }
h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.015em; }
/* Every part of the story opens at one size, so a new heading always reads as a new part. */
h2 { font-size: 48px; line-height: 1.1; letter-spacing: -.018em; margin-bottom: 18px; max-width: min(var(--wide), 100%); text-wrap: balance; }
.stand { font-size: 22px; text-wrap: pretty; line-height: 1.5; color: var(--ink); max-width: 820px; margin: 0 0 14px; letter-spacing: -.003em; }
h2 + .stand { margin-top: 4px; }
/* Under a standfirst, where the page answers each of its questions. */
.asks { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 4px 0 18px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.asks span { color: var(--dim); }
.asks a:hover, .asks a:hover span { color: var(--cobalt); }
figure + p { margin-top: 40px; }
p.next { margin-top: 36px; }
h3 { font-weight: 500; font-size: 15px; margin: 0 0 4px; letter-spacing: 0; }
p { margin: 0 0 12px; max-width: var(--text); color: var(--body); }
section > p:not([class]) { font-size: 16px; }
p.lead { color: var(--ink); font-size: 17px; line-height: 1.6; max-width: 660px; }
p.lead a { text-decoration: underline; text-decoration-color: #c9c9c7; text-decoration-thickness: 1px; text-underline-offset: 4px; }
p.lead a:hover { color: var(--cobalt); text-decoration-color: var(--cobalt); }
.btns { display: flex; gap: 8px; margin-top: 20px; }
.btn { font-size: 13.5px; padding: 5px 11px; border-radius: 4px; background: var(--wash); color: var(--ink); border: 1px solid #e4e4e2; }
.btn.go { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.btn.go:hover { background: #2337bd; }
.wide { width: min(var(--wide), calc(100vw - var(--side) - 2 * var(--pad) - 24px)); }

.hero { padding-top: 92px; }
/* The opening spans the width of the recording under it. */
.hero h1, .hero p.lead { max-width: min(var(--wide), 100%); }
.hero h1 { font-size: 62px; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; margin-bottom: 22px; }
.hero p.lead { font-size: 19.5px; line-height: 1.6; text-wrap: pretty; }
/* The two parts before the session's story follow the opening without a rule between them. */
#code, #line { margin-top: 0; padding-top: 150px; }
#line { padding-bottom: 10px; }
#code .vs { max-width: min(var(--wide), 100%); }

/* Between the parts of the story, a rule of dots, the dots in Olki's mark. When a part comes into view the mark
   eats its rule once, left to right, and rests at the end; a part not reached yet keeps its dots, so the rules
   say how far the reader has come. home.js draws the mark and moves it; --p runs from 0 to 1. */
.brk { position: relative; height: 22px; margin: 104px var(--pad) 0; max-width: min(var(--wide), 100%); --p: 0;
  background: radial-gradient(circle, #aab0e8 1.7px, transparent 2.2px) 22px 50% / 14px 22px repeat-x; }
.brk + section { margin-top: 44px; }
.brk .trail { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * (100% - 22px) + 11px); background: linear-gradient(#fff, #fff) 0 0 / 100% 100% no-repeat; }
.brk .trail::after { content: ""; position: absolute; left: 11px; right: 0; top: 50%; border-top: 1px solid #dededc; }
.brk svg { position: absolute; top: 0; left: calc(var(--p) * (100% - 22px)); width: 22px; height: 22px; display: block; }

/* The loop, after John Boyd: lanes of what comes in, feeding forward into orient, decide and act, and the
   curves back. Drawn in home.js; text sizes are the drawing's own at full width. */
.boyd { margin: 56px 0 0; }
.boyd svg { display: block; width: 100%; height: auto; overflow: visible; }
.boyd figcaption { margin-top: 10px; font-size: 13px; color: var(--dim); max-width: var(--text); }
.b-title { font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -.02em; fill: var(--ink); }
.b-sub, .b-note { font-family: var(--mono); font-size: 11px; fill: var(--dim); }
.b-lane { font-family: var(--sans); font-size: 12.5px; fill: var(--body); }
.b-in { font-family: var(--mono); font-size: 11.5px; fill: #2b3a8f; }
.b-act { font-family: var(--mono); font-size: 11px; fill: #fff; }
.b-dec { font-family: var(--mono); font-size: 11px; fill: var(--ink); }

/* Every line: the reader picks a line, the line comes apart into its steps, and the verdict reads as a sentence
   whose own words are the controls. The parts of the string keep one colour each, from the line to its rows. */
.reader { position: relative; z-index: 1; background: #fff; margin: 40px 0 0; overflow-x: clip; }
.rd-pick { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 16px 0 0; }
.rd-pick button { appearance: none; border: 0; background: none; padding: 5px 0; font: 13.5px/1.3 var(--sans); color: var(--dim); cursor: pointer; }
.rd-pick button i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.rd-pick button:hover { color: var(--ink); }
.rd-pick button.on { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
.rd-line { margin: 22px 0 0; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 15.5px; line-height: 1.8; color: #a9a9ab; overflow-wrap: anywhere; min-height: 72px; }
.sg { transition: color .35s, box-shadow .35s, background .2s; }
.sg.lit { color: var(--c); box-shadow: inset 0 -1.5px 0 var(--c); }
.sg.hover { background: #eef0fb; }
.sp { color: #c4c4c2; }
.rd-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; margin-top: 8px; align-items: start; }
.rd-say { padding-top: 14px; }
.rd-sent { margin: 0; font-size: 15px; line-height: 1.75; color: var(--body); }
.opts { white-space: nowrap; }
.opts button { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--dim); cursor: pointer; }
.opts button:hover { color: var(--ink); }
.opts button.on { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cobalt); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.opts .or { color: #c9c9c7; }
.rd-v { font-family: var(--serif); font-size: 26px; line-height: 1.2; margin: 10px 0 8px; min-height: 31px; }
.rd-v.ok { color: #2c5a46; }
.rd-v.would, .rd-v.stop { color: var(--red); }
.rd-why { font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 0; }
.fly { position: absolute; z-index: 3; font-family: var(--mono); font-size: 15.5px; color: var(--c); white-space: nowrap; pointer-events: none; transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .6s ease-in; }
.legend { margin-top: 14px; font-size: 13px; color: var(--dim); }
.rec-head { display: flex; align-items: center; gap: 10px; padding: 12px 0 11px; border-bottom: 1px solid var(--rule); }
.rec-hash { font-family: var(--mono); font-size: 13px; color: var(--ink); min-width: 10.5ch; }
.rec-hash:empty::before { content: "#···· ····"; color: #d4d4d2; }
.shape-chip { font-size: 12px; border-radius: 999px; padding: 1px 10px; }
.rec-n { margin-left: auto; font-size: 12px; color: var(--body); }
.rec-row { display: grid; grid-template-columns: 14px 52px 76px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; padding: 8px 0; border-bottom: 1px solid #f2f2f1; font-family: var(--mono); font-size: 12.5px; align-items: baseline; animation: rowin .45s ease both; }
@keyframes rowin { from { opacity: 0; transform: translateX(-12px); } }
.rec-i { color: var(--body); font-size: 11.5px; }
.rec-row.ghost { animation: none; min-height: 58px; align-content: center; }
.rec-row.ghost .bar { height: 7px; border-radius: 2px; background: #ebebea; align-self: center; }
.rec-row.ghost .bar.w { width: 70%; }
.rec-row.ghost .fx-bar { grid-column: 3 / -1; width: 96px; height: 14px; border-radius: 4px; }
.rec-row { transition: background .2s; }
.rec-row.hover { background: #f6f7fd; }
.rec-kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
.rec-prog { color: var(--c); }
.rec-args { color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row.steered .rec-args { color: var(--red); }
.fxs { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.fx { font-size: 11.5px; border-radius: 4px; padding: 0 7px; line-height: 1.7; background: #eef0fb; color: #2b3a8f; }
.fx-FS { background: #e8f3ee; color: #2c5a46; }
.fx-Net { background: #fbf0e1; color: #7a4a12; }
.fx-Env { background: #f3eefa; color: #5a3a6a; }
.fx.ceil { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: .85; }
.fx.no { background: #fdecea; color: var(--red); }
.fx.none { background: transparent; color: var(--dim); padding: 0; }


/* The rogue chain and the exposure map, drawn from Olki's own safety review: the chain plays a step at a time, its
   moments landing on the session's clock; the map lights a program's or a host's lines under the pointer. */
.chain, .exmap, .relay { position: relative; z-index: 1; background: #fff; margin: 40px 0 0; }
.chain figcaption, .exmap figcaption, .relay figcaption { display: flex; justify-content: space-between; gap: 24px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.chain svg, .exmap svg, .relay svg { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.chain .legend, .exmap .legend, .relay .legend { margin: 10px 0 0; }
.again { appearance: none; border: 0; background: none; padding: 0 0 0 10px; font: 12px var(--mono); color: var(--cobalt); cursor: pointer; }
/* The handover: one row per session that took over, its questions riding to the record and back, its claims as
   squares. relay.js draws it. */
.r-id { font-family: var(--mono); font-size: 11.5px; fill: var(--ink); }
.r-word { font-family: var(--mono); font-size: 11.5px; transition: opacity .3s; }
.r-total { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.r-band { transition: opacity .35s; }
.r-row rect[fill]:not(.r-band) { transition: opacity .2s; }
.relay .tip { white-space: pre-line; max-width: 440px; }
.ch-ax { font-family: var(--mono); font-size: 11px; fill: var(--dim); }
.ch-big { font-family: var(--sans); font-size: 38px; letter-spacing: -.02em; fill: var(--ink); }
.ch-unit { font-family: var(--sans); font-size: 15px; fill: var(--body); }
.ch-node { fill: var(--ink); }
.ch-name { font-family: var(--sans); font-size: 17px; font-weight: 500; fill: var(--ink); }
.ch-what { font-family: var(--mono); font-size: 12px; fill: var(--body); }
.ch-base { stroke: #e2e2e0; }
.ch-faint { stroke: #cfcfcd; }
.ch-mark { stroke: var(--ink); stroke-width: 1.6; }
.ch-span { stroke: var(--ink); stroke-width: 3; }
.ch-pre { stroke: #b9b9b7; stroke-width: 3; }
.ch-hit { fill: transparent; cursor: default; }
.ch-tie, .ch-loose, .ch-looked { stroke-width: 2; }
.ch-tie { stroke: var(--red); }
.ch-loose { stroke: var(--red); stroke-dasharray: 2 4; }
.ch-looked { stroke: #b9b9b7; }
.ch-words { font-family: var(--sans); font-size: 14.5px; fill: var(--red); }
/* The play: a step waits faint until its turn; its marks drop onto the clock; the line to the next step draws down. */
.chain .ch-step { opacity: .16; transition: opacity .5s; }
.chain .ch-step.on { opacity: 1; }
.chain .ch-mark { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1.3); }
.chain .ch-step.on .ch-mark { transform: none; }
.chain .ch-link line { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .6s ease; }
.chain .ch-link.on line { stroke-dashoffset: 0; }
.chain .ch-loose { stroke-dasharray: 2 4; }
.chain .ch-link text { opacity: 0; transition: opacity .5s .3s; }
.chain .ch-link.on text { opacity: 1; }
.tip { position: absolute; z-index: 5; max-width: 360px; padding: 6px 9px; background: var(--ink); color: #fff; font: 12px/1.45 var(--mono); border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.tip.on { opacity: 1; }
.ex-h { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; fill: var(--dim); }
.exmap text { font-family: var(--mono); font-size: 12.5px; fill: var(--ink); }
.exmap .ex-d { fill: var(--body); }
.exmap .ex-red { font-size: 11.5px; fill: var(--red); }
.exmap .ex-new { font-size: 11.5px; fill: var(--red); }
.ex-br { fill: none; stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.ex-edge { fill: none; stroke: #c9c9c7; stroke-opacity: .55; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.1s ease, stroke .2s, stroke-opacity .2s; }
.ex-edge.strong { stroke: #5a5a5e; stroke-opacity: .7; }
.exmap.on .ex-edge { stroke-dashoffset: 0; }
.ex-bar { fill: #c4c4c2; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ex-bar.strong { fill: var(--ink); }
.exmap.on .ex-bar { transform: none; }
.ex-node { cursor: default; transition: opacity .2s; }
.exmap.hovering .ex-node:not(.lit) { opacity: .28; }
.exmap.hovering .ex-edge:not(.lit) { stroke-opacity: .08; }
.exmap .ex-edge.lit { stroke: var(--cobalt); stroke-opacity: .9; }

/* What a log of tool calls keeps: the line as one string, and what is inside it. */
.vs { margin: 36px 0 0; max-width: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.vs figcaption { margin-bottom: 8px; }
.vs-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 6px 0; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.vs-k { color: var(--dim); font-size: 11.5px; padding-top: 2px; }
.vs-tool { color: var(--ink); }
.vs-str { font-family: inherit; color: #8a5a2a; word-break: break-all; }
.vs-in { font-size: 12.5px; color: var(--body); }
.vs-in .st { color: var(--c); white-space: nowrap; }
.vs-in .dot { color: #c4c4c2; margin: 0 7px; }
#vs-in { display: flex; flex-wrap: wrap; align-items: baseline; }
.vs-in .tail { flex-basis: 100%; color: var(--body); margin-top: 2px; }
/* Figures in a sentence, and Olki's own pages as pictures: a mono caption, then the page on the same white. */
.shot { margin: 40px 0 0; }
.shot figcaption, .vs figcaption, .reader figcaption { display: flex; justify-content: space-between; gap: 24px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.shot img { display: block; width: 100%; height: auto; margin-top: 18px; }
.shot a { cursor: zoom-in; }
.flow { position: relative; z-index: 1; background: #fff; margin: 64px 0 0; }
.flow figcaption { display: flex; justify-content: space-between; gap: 24px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.flow #flow-page { color: var(--ink); }
.flow video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-top: 18px; border: 1px solid var(--rule); background: #fff; }
.chapters { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; }
.chapters button { appearance: none; border: 0; background: none; padding: 4px 0 5px; font: 11.5px/1.2 var(--mono); color: var(--dim); cursor: pointer; }
.chapters button:hover { color: var(--ink); }
.chapters button.on { color: var(--ink); background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / calc(var(--p, 0) * 100%) 1px; }
.chapters .pp { margin-left: auto; }
.loopfig { position: relative; z-index: 1; background: #fff; margin: 40px 0 0; }
.loopfig figcaption { display: flex; justify-content: space-between; gap: 24px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.loopfig svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.loopfig .yl-text { margin: 10px 0 0; max-width: var(--text); min-height: 3.2em; color: var(--body); }
.loopfig .yl-text b { font-weight: 500; color: var(--ink); }
.yl-node { transition: opacity .5s; }
.yl-name { font-family: var(--sans); font-size: 14px; fill: var(--ink); }
.yl-n { font-family: var(--mono); font-size: 12.5px; fill: var(--ink); }
.yl-d { font-family: var(--sans); font-size: 11.5px; fill: var(--body); }
.yl-end { font-family: var(--sans); font-size: 12.5px; }
.yl-tag { font-family: var(--mono); font-size: 11px; }
.yl-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.next { font-family: var(--mono); font-size: 13px; color: var(--ink) !important; }
.next::before { content: "next run  "; color: var(--cobalt); white-space: pre; }

/* The measures. */
.measures { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 36px; margin: 22px 0 26px; }
.measures div { font-size: 13px; color: var(--dim); max-width: 130px; }
.measures b { display: block; font-weight: 400; font-family: var(--mono); font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.more::after { content: " →"; }
.more { color: var(--cobalt); font-size: 14px; }
pre.circuit { margin: 18px 0 0; padding: 16px 18px; background: #f9f9f8; border-radius: 6px; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--ink); overflow-x: auto; white-space: pre; }
pre.circuit .c { color: #9a9a9d; }
/* The circuit's own words in quiet colours: keywords cobalt, the circuits it calls in deep blue, flags plum, strings
   umber, types green, and its effects in the colours the record gives their kinds. */
pre.circuit .k { color: var(--cobalt); }
pre.circuit .def, pre.circuit .c-n { color: var(--ink); font-weight: 500; }
pre.circuit .n { color: #2b3a8f; }
pre.circuit .f { color: #7a4a86; }
pre.circuit .s { color: #8a5a2a; }
pre.circuit .t { color: #2c6a4e; }
pre.circuit .v { color: #b0532a; }
pre.circuit .p { color: #a3a3a6; }
pre.circuit .ok { color: #2c6a4e; }
pre.circuit .fx-fs { color: #4f8a6c; } pre.circuit .fx-proc { color: #5c6bc0; } pre.circuit .fx-io { color: #8a6aa0; }
/* One language, four jobs: a word for the job, what a circuit does there, and the circuits that do it. */
.jobs { list-style: none; margin: 26px 0 30px; padding: 0; max-width: min(var(--wide), 100%); border-top: 1px solid var(--rule); position: relative; z-index: 1; background: #fff; }
.jobs li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; gap: 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.jobs-k { font-family: var(--mono); font-size: 12px; color: var(--cobalt); }
.jobs p { margin: 0; color: var(--ink); font-size: 15px; }
.jobs code { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* The way in: three steps on hairlines, each a word for when, what happens, and the one thing to do. Commands
   wrap instead of scrolling, and copy whole. */
.start { list-style: none; margin: 30px 0 0; padding: 0; max-width: var(--text); border-top: 1px solid var(--rule); }
.start li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.start-k { font-family: var(--mono); font-size: 12px; color: var(--cobalt); padding-top: 3px; }
.start p { margin: 0 0 12px; color: var(--ink); }
.btn.big { display: inline-block; font-size: 14.5px; padding: 8px 16px; }
.cmd { display: flex; align-items: flex-start; gap: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); }
.cmd code { font-family: inherit; overflow-wrap: anywhere; }
.cmd code::before { content: "$ "; color: var(--dim); }
.copy { appearance: none; border: 0; background: none; padding: 1px 0 0; margin-left: auto; font: 12px var(--mono); color: var(--dim); cursor: pointer; }
.copy:hover { color: var(--cobalt); }
.copy.done { color: #2c5a46; }
.legend code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
/* The request for a token: opens in place under its button, four plain fields on hairlines. */
.ask { margin: 6px 0 0; max-width: 460px; }
.ask[hidden], #ask-open[hidden] { display: none; }
.ask label { display: block; margin: 14px 0 5px; font-size: 13px; color: var(--body); }
.ask label span { color: var(--dim); }
.ask input, .ask textarea { width: 100%; font: 15px/1.45 var(--sans); color: var(--ink); background: #fff; border: 1px solid #dcdcda; border-radius: 4px; padding: 8px 10px; }
.ask textarea { resize: vertical; min-height: 72px; }
.ask input:focus, .ask textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(47, 69, 216, .14); }
.ask input[aria-invalid="true"] { border-color: var(--red); }
.ask-go { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ask-go button { border: 0; cursor: pointer; font-family: var(--sans); }
.ask-go button[disabled] { opacity: .6; cursor: default; }
.ask-say { font-size: 13.5px; color: var(--body); }
.ask-say.bad { color: var(--red); }
.ask-note { margin: 12px 0 0; font-size: 12.5px; color: var(--dim); }
.ask-done { margin: 4px 0 0; padding: 14px 0 2px; color: var(--ink); max-width: 460px; }
.ask-done b { font-weight: 500; }

/* The end: a few links, then the sea. */
.end { margin-top: 140px; padding: 26px var(--pad) 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 160px) 1fr; gap: 24px; font-size: 13px; color: var(--body); }
.end div { display: flex; flex-direction: column; gap: 5px; }
.end b { font-weight: 400; color: var(--dim); margin-bottom: 4px; }
.end .note { text-align: right; color: var(--dim); align-self: end; }
.end .colophon { grid-column: 1 / -1; margin: 18px 0 0; max-width: var(--text); font-size: 12.5px; color: var(--dim); }
.photo { margin: 30px 10px 10px; }
.photo img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: center 62%; border-radius: 10px; }

/* Big screens: the page keeps its proportions and grows, instead of sitting in the left half of a wide window. */
@media screen and (min-width: 1680px) { html { zoom: 1.12; } }
@media screen and (min-width: 2000px) { html { zoom: 1.3; } }
@media screen and (min-width: 2400px) { html { zoom: 1.5; } }
@media screen and (min-width: 3200px) { html { zoom: 1.9; } }

@media screen and (max-width: 1240px) {
      }

@media screen and (max-width: 900px) {
  h1, .hero h1 { font-size: 34px; }
  .hero p.lead { font-size: 17px; }
  :root { --side: 0px; --pad: 22px; }
  .side { position: static; width: auto; flex-direction: row; align-items: center; padding: 18px 22px; }
  .side nav, .side .foot { display: none; }
  main { border-left: 0; }
    .hero { padding-top: 36px; }
  .boyd, .chain, .exmap, .relay { overflow-x: auto; }
  .chain svg, .exmap svg, .relay svg { width: 900px; }
  .boyd svg { width: 900px; }
  .wide { width: 100%; }
  .rd-body { grid-template-columns: 1fr; gap: 8px; }
  .stand { font-size: 17px; }
  h2 { font-size: 32px; }
  h2 .anchor { display: none; }
  section + section { margin-top: 96px; }
  .brk { margin-top: 68px; }
  .brk + section { margin-top: 30px; }
  #code, #line { margin-top: 0; padding-top: 96px; }
  .shot figcaption, .vs figcaption, .reader figcaption, .chain figcaption, .exmap figcaption, .flow figcaption, .loopfig figcaption { flex-direction: column; gap: 2px; }
  /* Olki's pages as pictures stay readable: they keep a reading width and pan sideways under a finger. */
  .shot, .loopfig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot img { width: auto; max-width: none; height: auto; min-width: 100%; width: 720px; }
  .loopfig svg { width: 720px; }
  .rec-row { grid-template-columns: 14px 46px 70px minmax(0, 1fr); }
  .measures { grid-template-columns: 1fr 1fr; }
  .end { grid-template-columns: 1fr 1fr; }
  .start li { grid-template-columns: 1fr; gap: 6px; }
  .jobs li { grid-template-columns: 1fr; gap: 4px; }
  .end .note { text-align: left; }
  .photo img { height: 240px; }
}