/* MaeVae home page: the rules only this page needs.

   styles.css holds the site: the grounds, the tiers, the type roles, the
   layout primitives (chapter, band, cols, reading) and the hero; mock.css
   holds the drawings of the app. Every section of this page is one of
   those primitives on one ground with one tier, so this file only spaces
   the parts inside a section, sets a few page sizes for the drawings, and
   adds the drawing details the page alone uses. It sets no padding on a
   section and no margin under a section's last part, so the space between
   two sections stays the tier's. */

/* The hero's figures that an agent does not report: the site writes n/a
   in the muted ink, never the app's dash */
.h-na {
  color: var(--night-faint);
}

/* Inline code in the page's sentences: commands a reader types */
main :not(pre) > code {
  padding: 0.05em 0.3em;
  border-radius: var(--radius-small);
  background: var(--strip);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.night :not(pre) > code {
  background: var(--night-raised);
  color: var(--night-ink);
}

/* The numbered mark at the start of a caption ties the drawing to the
   same mark on the hero's window */
.mock-caption > .key {
  margin-right: 0.5em;
  vertical-align: 0.1em;
}

/* --------------------------------------------- spacing inside a section */

/* A sub-heading inside the text of a chapter or a band: more room above
   it than under it, so it reads as the head of what follows */
.chapter-text > h3 + *,
.band-text > h3 + * {
  margin-top: var(--s3);
}

.band-text > * + h3 {
  margin-top: var(--s6);
}

.band-text > p:not(.lead):not(.note):not(.limit) {
  color: var(--quiet);
}

.night .band-text > p:not(.lead):not(.note):not(.limit) {
  color: var(--night-body);
}

.band-text > p strong {
  color: var(--ink);
}

.night .band-text > p strong {
  color: var(--night-ink);
}

/* A heading over a row of cells */
.chapter-foot > h3 + .cols,
.h-tray-title + .cols {
  margin-top: var(--s5);
}

/* A heading at the head of a section whose layout is a row of cells: the
   cells follow at the same distance a lead would */
.h-more-title {
  max-width: var(--measure-heading);
  margin-bottom: var(--s5);
}

/* Cells headed by a fourth-level heading: the reset of styles.css stops at
   h3 */
.h-faces h4,
.h-tray h4,
.h-hud-src h4 {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
}

.night .h-faces h4,
.night .h-tray h4 {
  color: var(--night-ink);
}

/* The drawing beside a long text stays in view while the text is read, so
   the column under a short drawing is never an empty cell on screen. Only
   where the screen is tall enough for the whole drawing, its controls and
   its caption. A sticky box is held inside its parent's whole box, not
   inside its own grid row, so the parent (.h-follow) holds the text and
   the drawing and nothing else: the drawing follows to the end of its
   pair and stops there. Whatever comes after the pair (a limit, a row of
   cells, a table, more bands) stands outside it, in .h-after, where the
   drawing can never paint over it or hide a focused control. The rule
   holds only while the parent has no third child: a row added inside the
   pair later turns the follow off instead of putting a drawing over it. */
@media (min-width: 1024px) and (min-height: 820px) {
  .h-follow:not(:has(> :not(.chapter-text, .chapter-art, .band-text, .band-art))) > :is(.chapter-art, .band-art) {
    position: sticky;
    top: var(--docs-top);
  }
}

/* The rows after a following pair: one pair's distance under it and
   between each other, the gap the pair's own grid gave them before they
   moved out of it */
.h-after {
  margin-top: var(--pair-gap);
}

.h-after > * + * {
  margin-top: var(--pair-gap);
}

/* ------------------------------------------------------- In one minute */

.h-minute .reading-body > * + * {
  margin-top: var(--s3);
}

.h-minute .reading-body p {
  color: var(--night-ink);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.h-minute .reading-foot {
  margin-top: var(--s5);
}

.h-minute .reading-foot p {
  color: var(--night-body);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* ------------------------------------------------------- Restricted mode */

/* The window keeps one height while New profile opens over it and the
   second pane opens beside the first. The panel over it needs about 24em;
   stacked panes on a narrow drawing need more. */
.h-restr-win .mock-panes {
  --m-panes-h: 30em;
}

@container mock (max-width: 39.999rem) {
  .h-restr-win .mock-panes {
    --m-panes-h: 42em;
  }
}

/* A terminal whose newest line must stay in view as lines arrive: they
   stand at its foot, as a terminal that has scrolled */
.mock-pane.h-fit-end > .mock-term {
  justify-content: flex-end;
}

/* ------------------------------------------------------------ Isolation */

/* The four badges, each drawn small beside its meaning. An inset is a
   drawing too small to ask its own width: it takes the width of what it
   holds. */
.h-badges {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-badges li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  color: var(--night-body);
}

/* The meaning beside each badge keeps a reading measure where the
   chapter is one column wide */
.h-badges li > span:not(.mock) {
  max-width: var(--measure);
}

.mock.h-inset {
  container-type: normal;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25em;
  padding: 0.2em 0.5em;
  border: 1px solid var(--m-edge);
  border-radius: var(--radius-small);
  background: var(--m-chrome);
  line-height: 1.3;
  vertical-align: middle;
}

/* The report in a pane's place: its panes are tall enough for the whole
   report at every width, the narrow ones taller, as its rows wrap */
.h-iso-win .mock-panes {
  --m-panes-h: 32em;
}

@container mock (max-width: 39.999rem) {
  .h-iso-win .mock-panes {
    --m-panes-h: 40em;
  }
}

@container mock (max-width: 27.999rem) {
  .h-iso-win .mock-panes {
    --m-panes-h: 48em;
  }
}

/* The Isolation report covers its whole pane, header included, as the
   app's report panel does. It opens over the pane, so the pane keeps its
   size when it opens. */
.h-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--m-pane);
}

.h-panel > .mock-report {
  border: 0;
  border-radius: 0;
}

.h-panel-body {
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

/* In a small pane the report's foot (the Drift face and the buttons) is
   what the scene is about, so it stays in view */
.h-panel-end {
  align-content: end;
}

/* The four faces: the face's name, what it checks, then one row of the
   kind the report shows, its status drawn in the colour mock.css gives it */
.h-faces p {
  color: var(--night-body);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.h-faces .h-face-eg {
  color: var(--night-quiet);
}

/* The three notes that close the Isolation passage */
.h-notes dt {
  color: var(--night-ink);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
}

/* A dd is not a paragraph, so it takes the reading measure here; the
   last of three notes spans two columns between 720px and 1099px */
.h-notes dd {
  max-width: var(--measure);
  margin: 0;
  color: var(--night-body);
}

/* Check all profiles: the sweep's table, Profile, State, fail, warn */
.h-sweep {
  --m-cols: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 0.6fr) minmax(0, 0.6fr);
  --m-cols-narrow: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 0.6fr) minmax(0, 0.6fr);
}

/* A panel open in the rail. The app's rail can be dragged from 200px to
   620px (280px by default), so a drawing that shows the profile editor or
   Quick settings in it draws the rail wider than mock.css's own rail. The
   stage beside it asks for less room than mock.css gives it, so the wide
   rail and the stage still stand side by side from 40rem and the rail is
   never left alone on a line with the stage wrapped under it. */
@container mock (min-width: 40rem) {
  .mock-window.h-rail-wide > .mock-rail {
    flex-basis: 22em;
  }

  .mock-window.h-rail-wide > .mock-stage {
    flex-basis: 16rem;
  }
}

/* ----------------------------------------------------- drawing details */

/* A field the scene is about to change, as the app shows focus */
.mock-select.h-focus,
.mock-input.h-focus {
  border-color: var(--m-ink);
  outline: 1px solid var(--m-ink);
}

/* A click in progress: the part the scene is pressing */
.mock-rail-item.h-press,
.mock-badge.h-press {
  background: var(--m-select);
}

.mock-badge.h-press {
  outline: 1px solid var(--m-field-edge);
  outline-offset: 2px;
  border-radius: 2px;
}

.mock-ico.h-press-ico {
  border-radius: 3px;
  background: var(--m-select);
}

/* A pane drawn on its own beside a long text: tall enough to read as the
   app's pane, not a strip */
.h-pane-tall {
  min-height: 20rem;
}

/* ---------------------------------------- the profile and its accounts */

/* The two panes beside the editor keep one height while the first one
   restarts: they share the stage evenly whatever each holds, so the line
   between them stays put as the restarted pane's lines go and come. On a
   narrow drawing, where the rail stands above them, they get more room. */
.h-acct-win .mock-panes {
  --m-panes-h: 26em;
}

.h-acct-win .mock-panes > .mock-pane {
  flex: 1 1 0;
}

@container mock (max-width: 39.999rem) {
  .h-acct-win .mock-panes {
    --m-panes-h: 30em;
  }
}

/* The account part of the profile editor: the signed-in line, the saved
   logins with the active one marked, and the three buttons */
.h-acct {
  display: grid;
  gap: 0.6em;
}

.h-acct-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.7em;
}

.h-acct-who {
  color: var(--m-body);
}

/* The editor's offer to take the signed-in account as the label, a plain
   underlined line as the app draws it */
.h-acct-use {
  justify-self: start;
  color: var(--m-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.h-slots {
  display: grid;
  gap: 0.3em;
}

.h-slot {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.3em 0.55em;
  border: 1px solid var(--m-split);
  border-radius: 4px;
}

.h-slot-dot {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--m-faint);
}

.h-slot-dot.is-on {
  background: var(--m-ok);
}

.h-slot-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--m-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Switch is a plain underlined word in the app */
.h-slot-act {
  flex: none;
  color: var(--m-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.h-slot-act.h-pressed {
  background: var(--m-select);
}

.h-slot > .mock-ico-close {
  color: var(--m-quiet);
}

/* ---------------------------------------------------------------- HUD */

/* What each agent reports: a table at the content width, its header row
   on the strip, its rows on white */
.h-hud-table {
  width: 100%;
  margin-top: var(--s5);
  border: 1px solid var(--line-strong);
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.h-hud-table th,
.h-hud-table td {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.h-hud-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--strip);
  color: var(--ink);
  font-weight: 600;
}

.h-hud-table tbody th {
  width: 18%;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.h-hud-table td {
  color: var(--quiet);
}

/* The longer column keeps a reading measure: at the content width it is
   about 650px, near 70 characters */
.h-hud-table td:nth-child(2) {
  width: 48%;
}

.band-foot > .h-hud-table + .note {
  margin-top: var(--s4);
}

/* Where the figures come from: four short cells under the pair, then the
   table; the cells follow their heading as a lead would, and the table's
   heading stands a pair's distance below them */
.h-hud-foot > h3 + .cols {
  margin-top: var(--s5);
}

.h-hud-foot > .cols + h3 {
  margin-top: var(--pair-gap);
}

.h-hud-src p {
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.h-hud-src p strong {
  color: var(--ink);
}

/* On a phone three columns would leave a word a line, so each agent
   becomes a short block: its name, then what it shows and what it does not
   report, each named by its column's heading */
@media (max-width: 719.98px) {
  .h-hud-table,
  .h-hud-table tbody,
  .h-hud-table tr,
  .h-hud-table th,
  .h-hud-table td {
    display: block;
    width: auto;
  }

  .h-hud-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .h-hud-table tr {
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--line);
  }

  .h-hud-table tbody tr:first-child {
    border-top: 0;
  }

  .h-hud-table th,
  .h-hud-table td {
    padding: 0;
    border: 0;
  }

  .h-hud-table td {
    margin-top: var(--s1);
  }

  .h-hud-table td::before {
    content: attr(data-label) ": ";
    color: var(--ink);
    font-weight: 600;
  }
}

/* ------------------------------------------------- the attention queue */

/* The statement across the band, its lead under it, then the pair. From
   1024px the lead stands beside the statement, level with its foot, so
   neither leaves a blank half of the track beside it. */
.h-attn-head > .statement {
  max-width: 20ch;
}

.h-attn-head > .lead {
  margin-top: var(--s5);
}

@media (min-width: 1024px) {
  .h-attn-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--pair-gap);
    align-items: end;
  }

  .h-attn-head > .lead {
    margin-top: 0;
  }
}

.h-attn-head + .band {
  margin-top: var(--pair-gap);
}

/* The tray: its own heading, three short cells, their limits */
.h-tray {
  margin-top: var(--s8);
}

.h-tray-title {
  max-width: var(--measure-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h-tray-title > span {
  display: block;
}

.h-tray .cols p {
  color: var(--night-body);
}

.h-tray > .limit {
  margin-top: var(--pair-gap);
}

/* The taskbar runs the full width of the screen and closes the passage, so
   the scene's caption and controls stand above it, on the content column */
.h-desk-fig {
  margin-top: var(--pair-gap);
}

.h-desk-fig > .mock-caption,
.h-desk-fig > .mock-controls {
  margin-inline: max(var(--gutter), (100% - var(--content)) / 2);
}

.h-desk-fig > .mock-caption {
  margin-top: 0;
}

/* The desk with no window on it: the night of the passage behind it, no
   frame, room above the taskbar for the notification, and the tray at the
   content's right edge, under the notification */
.mock-desk.h-desk-full {
  align-content: end;
  min-height: 15rem;
  margin-top: var(--s3);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mock-desk.h-desk-full > .mock-taskbar {
  margin: 0;
  padding-inline: max(var(--gutter), (100% - var(--content)) / 2);
}

.mock-desk.h-desk-full > .mock-toast.is-over {
  right: max(var(--gutter), (100% - var(--content)) / 2);
  bottom: 4em;
}

/* --------------------------------------------------------- the showcase */

.h-show-head .chapter-art.is-note > * + * {
  margin-top: var(--s4);
}

.h-show-track {
  margin-top: var(--pair-gap);
}

.h-show-fig > .mock-caption {
  max-width: 62ch;
}

/* The panes keep one height through every layout; a drawing as wide as
   the wide track carries more rows, and three stacked rows on a narrow
   drawing need more height again */
.h-show .mock-panes {
  --m-panes-h: 30rem;
}

@container mock (min-width: 75rem) {
  .h-show .mock-panes {
    --m-panes-h: 34rem;
  }
}

@container mock (max-width: 39.999rem) {
  .h-show .mock-panes {
    --m-panes-h: 46rem;
  }
}

/* The stage under the top bar: the empty stage's words stand over the
   panes while no pane is open, so the panes' own box never moves */
.h-stage-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.h-stage-body > .mock-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--m-term);
}

/* A terminal shows its newest line at the foot; older ones leave by the
   top as the pane fills */
.h-show .mock-term {
  justify-content: flex-end;
}

.h-story-wrap {
  margin-top: var(--pair-gap);
}

.h-story {
  max-width: 76rem;
  margin-top: var(--s4);
  padding-left: 1.4em;
}

.h-story li {
  max-width: var(--measure);
  margin-bottom: var(--s3);
  color: var(--night-body);
  break-inside: avoid;
}

.h-story li:last-child {
  margin-bottom: 0;
}

.h-story li::marker {
  color: var(--night-quiet);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .h-story {
    columns: 2;
    column-gap: var(--pair-gap);
  }
}

/* ---------------------------------------------------- Also in the app */

.h-tiles > li > h3 {
  font-size: var(--fs-label);
  line-height: 1.35;
}

.h-tiles > li > .mock-scene {
  margin-top: var(--s4);
}

.h-tiles > li > p {
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.6;
}

.h-tiles > li > .mock-scene + p,
.h-tiles > li > p + .limit {
  margin-top: var(--s4);
}

/* Layouts: in a tile the three panes carry only their names and a line,
   so they can stand as columns and in the grid at a tile's width, which
   mock.css keeps for wider drawings */
.h-lay .mock-panes {
  --m-panes-h: 12em;
}

.h-lay .mock-panes:not(.is-rows):not(.is-grid) {
  flex-direction: row;
}

.h-lay .mock-panes:not(.is-rows):not(.is-grid) > .mock-pane {
  flex-basis: 0;
}

.h-lay .mock-panes.is-grid {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h-lay .mock-panes.is-grid > .mock-pane:last-child:nth-child(odd) {
  grid-column: span 2;
}

/* The palette keeps its height while its list narrows */
.h-pal .mock-palette-list {
  height: 14em;
  align-content: start;
  overflow: hidden;
}

/* Broadcast: the box is the point of this tile, so it shows at a tile's
   width, where mock.css leaves it out; typed text is the ink, the hint
   the faint */
.h-bc .mock-broadcast {
  display: inline-block;
}

.mock-broadcast.h-typed {
  color: var(--m-ink);
}

.h-bc .mock-panes {
  --m-panes-h: 15em;
}

/* Alt keys: the panes keep one height while one fills the window, and the
   page's own drawing of the key pressed stands at the window's corner */
.h-alt .mock-panes {
  --m-panes-h: 14em;
}

.h-keycap {
  position: absolute;
  right: 0.8em;
  bottom: 0.8em;
  z-index: 3;
  padding: 0.1em 0.6em;
  border: 1px solid var(--m-field-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--m-chrome);
  color: var(--m-ink);
  font-weight: 600;
}

/* A panel with the message MaeVae shows at the window's lower right under
   it: the two drawn together, the message at the right */
.mock.h-compose {
  display: grid;
  gap: 0.8em;
}

.h-say {
  justify-self: end;
  width: min(22rem, 100%);
}

/* List models: the button, the search box and the count on one row, then
   the list of the models the endpoint serves */
.h-models {
  display: grid;
  gap: 0.5em;
}

.h-models-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em 0.6em;
}

.h-models-find {
  flex: 1 1 8em;
  min-width: 0;
}

.h-models-box {
  display: grid;
  padding: 0.25em 0;
  border: 1px solid var(--m-field-edge);
  border-radius: 4px;
  background: var(--m-field);
  font-family: var(--mono);
}

.h-model {
  padding: 0.15em 0.6em;
  color: var(--m-body);
}

.h-model.is-sel {
  background: var(--m-select);
  color: var(--m-ink);
}

.h-chime > .mock-select {
  flex: 1 1 8em;
  min-width: 0;
}

/* Panic: the stage keeps its height when it empties */
.h-panic .mock-panes {
  --m-panes-h: 12em;
}

/* Redraw: the pane keeps its height when the stray characters go */
.mock-pane.h-redraw {
  height: 15em;
}

.h-junk {
  color: var(--m-faint);
}

/* The usage dashboard's columns */
.h-dash {
  --m-cols: minmax(0, 1.9fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.6fr) minmax(0, 0.7fr) minmax(0, 0.6fr);
  --m-cols-narrow: minmax(0, 1.9fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
}

/* ------------------------------------------ From install to the first pane */

.h-steps p {
  color: var(--quiet);
}

.h-steps .mock-scene {
  margin-top: var(--s4);
}

/* The note under New profile's first step about a missing tool */
.h-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  color: var(--m-body);
}

/* One step of New profile in the scene that walks all three */
.h-wiz-step {
  display: grid;
  align-content: start;
  gap: 0.7em;
}

/* A first start: the terminal keeps its height while the agent's setup
   questions come and go, and its newest line stays at the foot */
.h-first {
  height: 17rem;
}

.h-first .mock-term {
  justify-content: flex-end;
}

/* ---------------------------------------------------- What it never does */

/* Four statements set at the sub-heading size: two to a row only from
   900px, where each column is wide enough for a statement on one or two
   lines */
@media (max-width: 899.98px) {
  .cols.h-never {
    grid-template-columns: minmax(0, 1fr);
  }
}

.h-never li {
  max-width: var(--measure);
  color: var(--night-body);
}

.h-never strong {
  display: block;
  margin-bottom: var(--s1);
  color: var(--night-ink);
  font-size: var(--fs-h3);
  line-height: 1.3;
}

/* ---------------------------------------------------------- Coming next */

/* One frame with the one dashed edge on the site, so the two items read as
   not in the app yet; the words say so plainly too */
.h-next-frame {
  padding: var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

@media (min-width: 720px) {
  .h-next-frame {
    padding: var(--s6);
  }
}

.h-next-list {
  display: grid;
  gap: var(--s5) var(--pair-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-next-list > li + li {
  margin-top: 0;
}

.h-next-list li {
  padding-top: var(--s4);
  border-top: 1px solid var(--line-strong);
}

.h-next-list p {
  margin-top: var(--s2);
  color: var(--quiet);
}

@media (min-width: 720px) {
  .h-next-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A list with one item left spans both columns, so the block is not half empty */
  .h-next-list > li:only-child {
    grid-column: 1 / -1;
  }
}

/* "in development": a plain frame beside the name, in the quiet ink, so
   it reads as a state and never as a promise */
.h-dev {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.45em;
  border: 1px solid var(--quiet);
  border-radius: var(--radius-small);
  color: var(--quiet);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* On the dark ground the light quiet ink, so the state stays legible
   beside a night heading */
.night .h-dev {
  border-color: var(--night-quiet);
  color: var(--night-quiet);
}

/* ------------------------------------------------- questions, closing */

.h-more-link {
  font-weight: 600;
}

/* Beside the six questions, the way into the rest: the FAQ's groups as a
   short list of links on hairlines, so the heading's column is never an
   empty cell beside the open answer */
.h-faq-groups {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-meta);
  line-height: 1.45;
}

.h-faq-groups > li {
  border-bottom: 1px solid var(--line);
}

/* The padding is on the link, not the row, so the whole row is the link's
   target: about 40px tall, above the 24px a pointer needs */
.h-faq-groups a {
  display: block;
  padding-block: var(--s2);
}

.h-closing .reading-body > * + * {
  margin-top: var(--s5);
}

.h-closing-fact {
  max-width: 52ch;
  color: var(--night-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .h-closing .reading-body {
    padding-top: var(--s3);
  }
}

/* ------------------------------------------------------------ the launch */

/* The launch date, under the hero's window beside its caption, and again
   in the closing section with what comes at launch. The date line is the
   whole message where script does not run; launch.js shows the countdown
   under it and hides it again once the date has passed. Nothing here is
   amber: the date is not an agent waiting for you. */
.h-launch-when {
  max-width: 40ch;
  color: var(--night-ink);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.h-launch-label {
  margin-right: 0.5em;
  color: var(--night-quiet);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.h-launch-when time {
  font-weight: 600;
  white-space: nowrap;
}

/* Days, hours and minutes as figures, each with its word. The hidden
   attribute keeps it out until the script has written it. */
.h-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35em;
  margin-top: var(--s3);
  color: var(--night-quiet);
  font-size: var(--fs-meta);
  line-height: 1.3;
}

.h-count[hidden] {
  display: none;
}

.h-count-n {
  color: var(--night-ink);
  font-family: var(--mono);
  font-size: var(--fs-fact);
  font-variant-numeric: tabular-nums;
}

/* Each number is held with its unit, and the minutes with "to go", so a
   narrow line wraps between the pairs and never between a number and its
   word; the gap and the margins keep the spacing the loose spans had */
.h-count-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0 0.35em;
  white-space: nowrap;
}

.h-count-pair + .h-count-pair > .h-count-n,
.h-count-u + .h-count-to {
  margin-left: 0.5em;
}

/* In the hero the figures stay at the sub-heading size, beside the
   window's caption */
.hero .h-count-n {
  font-size: var(--fs-h3);
}

.h-launch > * + * {
  margin-top: var(--s5);
}

.h-launch > .h-count {
  margin-top: var(--s3);
}

.h-launch-title {
  font-size: var(--fs-h3);
}

.h-launch-list > li {
  color: var(--night-body);
}

.h-launch-more {
  font-weight: 600;
}

/* -------------------------------------------------------------- the hero */

/* The mark above the tagline, at 120px in the headline's ink, with the
   accent drawn by the markup. Each facet is its own path so it can move
   on its own. The transform box is the view box, so each origin below is
   in the mark's own 64 unit grid: the crease that facet folds from. The
   left leg rises from its foot, the long diagonal from the bottom crease
   it shares with the accent's turn, the right leg comes down from the
   top crease it shares with the diagonal, and the accent from its top
   edge. */
.hero-mark {
  display: block;
  flex: none;
  width: 120px;
  height: 120px;
  overflow: visible;
  color: var(--night-ink);
}

/* The logo: the mark and the name beside it, paired as on the share card.
   The name is a picture drawn from the card's own wordmark, so the joined
   ae is the same on every computer; the mark stays a vector. The picture
   is 628 by 136 at twice its size, cut to the ink with a 4px margin, and
   the M's cap runs from its row 4 to its row 129. The cap is 55 percent
   of the height of the mark's ink at 120px (90px, its units 8 to 56 of
   64): 49.5px, so the picture is 49.5 x 136 / 126 = 53.4286px tall and
   246.71px wide. Its baseline is 130 x 53.4286 / 136 = 51.0714px down it,
   so a 53.9286px top margin puts the baseline on the ink's foot (105px)
   and the cap's top 40.5px below the ink's top (55.5px against 15px). The
   left margin keeps the space between the mark's ink and the word's ink
   at 24px: the mark's box holds 11.25px of air right of its ink and the
   picture 1.5714px left of its own (4 x 53.4286 / 136), so 11.1786px.

   The pair is 3.15 times the mark's size wide (120 + 11.1786 + 246.71 =
   377.89px at 120). Where the column is narrower, as at 390px or in the
   left column just above 1024px, every size below is the same share of
   the column instead, so the two scale down together and fit it: the
   logo row is a size container, and 20.75 percent of its width is the
   mark, so 1px at 120 is 0.172917 percent of it. A browser without
   container units keeps the px sizes. */
.hero-logo {
  display: flex;
  align-items: flex-start;
  container-type: inline-size;
}

.hero-logo .hero-mark {
  width: min(120px, 20.75cqi);
  height: min(120px, 20.75cqi);
}

.hero-wordmark {
  display: block;
  flex: none;
  width: auto;
  height: 53.4286px;
  height: min(53.4286px, 9.2387cqi);
  margin-top: 53.9286px;
  margin-top: min(53.9286px, 9.3252cqi);
  margin-left: 11.1786px;
  margin-left: min(11.1786px, 1.9330cqi);
}

/* The name as text, shown only where the picture cannot be (below) */
.hero-wordmark-text {
  display: none;
}

@keyframes hero-word-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-mark path {
  transform-box: view-box;
}

.hero-mark .f-left { transform-origin: 11.5px 56px; }
.hero-mark .f-diag { transform-origin: 32px 52px; }
.hero-mark .f-right { transform-origin: 55.78px 29px; }
.hero-mark .f-accent { transform-origin: 11.5px 9.25px; }

@keyframes hero-mark-fold {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* The accent unfolds at a dim value in its first 160 ms of 370, then
   brightens to full: the pane where an agent waits lights up last */
@keyframes hero-mark-fold-accent {
  0% {
    transform: scaleY(0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  43% {
    transform: scaleY(1);
    opacity: 0.35;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Every rule that folds the mark away or moves the logo is here, so with
   reduced motion on the logo shows whole at once. The facets fold away,
   and the name waits unseen, only once mark.js has armed the mark with
   is-armed, the way the hero scene's own script arms its window; if the
   script never loads or fails, the logo is drawn whole. is-unfolded then
   plays the unfold once: the ink facets from the left at 0, 110 and 220
   ms, 160 ms each, then the accent from 330 ms to 700 ms, and the name
   fades in with the accent, over 300 ms from 330 ms. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-mark.is-armed:not(.is-unfolded) path {
    transform: scaleY(0);
    opacity: 0;
  }

  .js .hero-mark.is-unfolded .f-left {
    animation: hero-mark-fold 160ms var(--arrive) 0ms both;
  }

  .js .hero-mark.is-unfolded .f-diag {
    animation: hero-mark-fold 160ms var(--arrive) 110ms both;
  }

  .js .hero-mark.is-unfolded .f-right {
    animation: hero-mark-fold 160ms var(--arrive) 220ms both;
  }

  .js .hero-mark.is-unfolded .f-accent {
    animation: hero-mark-fold-accent 370ms linear 330ms both;
  }

  .js .hero-mark.is-armed:not(.is-unfolded) + .hero-wordmark {
    opacity: 0;
  }

  .js .hero-mark.is-unfolded + .hero-wordmark {
    animation: hero-word-fade 300ms linear 330ms both;
  }
}

/* With reduced motion the logo is drawn whole at once and nothing moves,
   whatever state the script has left it in */
@media (prefers-reduced-motion: reduce) {
  .hero-mark path,
  .hero-wordmark {
    transform: none;
    opacity: 1;
    animation: none;
  }
}

/* A contrast theme recolors text but not a picture, and the name's light
   ink would all but vanish on a light theme's ground; there the picture
   gives way to the same name as text, in the theme's text color, at the
   picture's size: its M is 0.7 of the font that drew it at 700, so a
   49.5px M is a 70.7143px font */
@media (forced-colors: active) {
  .hero-wordmark {
    display: none;
  }

  .hero-wordmark-text {
    display: block;
    align-self: center;
    margin-left: 11.1786px;
    margin-left: min(11.1786px, 1.9330cqi);
    font-size: 70.7143px;
    font-size: min(70.7143px, 12.2277cqi);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
  }
}

/* On a wide screen the logo takes the first row of the left column and
   the tagline with its two buttons moves down under it, its own rules
   unchanged. The lead spans the tagline's two rows, the headline and the
   buttons, and sits at their foot: its last line ends level with the
   buttons' bottom edge. The logo's negative bottom margin takes the
   grid's 32px row gap down to 12px under the logo only, so the space
   between the headline and the buttons stays as it was.

   The headline keeps its two set lines in the left column. Its longer
   line, "Every agent in its place.", is 10.36 times the font size wide in
   Segoe UI at this weight and spacing, and the column is seven twelfths
   of the row less the split gap: 756px from 1440px wide, but 713px at
   1366px and 663px at 1280px, where the 72px headline broke onto a third
   line, pushed the window 73px further down and left only its heads and
   first lines above the fold of a laptop screen. So the size is the
   column's width over 10.5 (a small margin over 10.36), never above the
   site's headline size: 72px from 1440px wide as before, 67.9px at 1366px
   and 63.2px at 1280px. The row is a size container for this. The rule
   stands behind a test for container units: the size holds custom
   properties, so a browser without those units would not drop it but
   reset the headline to the text size around it; behind the test such a
   browser keeps the site's size and may wrap as before. */
@media (min-width: 1024px) {
  .hero .hero-top > .hero-logo {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: calc(var(--s3) - var(--s6));
  }

  .hero .hero-top > h1 {
    grid-row: 2;
  }

  @supports (font-size: 1cqi) {
    .hero .hero-top {
      container-type: inline-size;
    }

    .hero .hero-top > h1 {
      font-size: min(var(--fs-h1), (100cqi - var(--split-gap)) * 7 / 12 / 10.5);
    }
  }

  .hero .hero-top > .lead {
    grid-row: 2 / span 2;
    align-self: end;
  }

  .hero .hero-top > .actions {
    grid-row: 3;
  }
}

/* The stage as a grid, so the caption and the launch line can share one
   row under the window. The middle track is the content column, the same
   width the caption's wrap gave it; the side tracks take what is left.
   The window and the scene's button span every track and keep their own
   width and inset: one margin expression gives both the inset of a
   narrower screen and the centering of a wider one, without auto margins,
   which would stop a grid item from stretching. The stage keeps the
   site's own top margin.

   Every item names its own row and column, so the order on the screen
   does not follow the markup's. The caption comes first in the markup,
   since a figure's caption must be its first or last child, so a screen
   reader meets it before the launch line, in the order the screen shows
   the two at every width; on the screen it stays under the window. */
.stage {
  --stage-col: min(100% - 2 * var(--gutter), var(--content));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stage-col) minmax(0, 1fr);
}

.stage > .window {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-inline: max(var(--wide-inset), (100% - var(--content-wide)) / 2);
}

.stage > .window + .scene-ctl {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-inline: max(var(--wide-inset), (100% - var(--content-wide)) / 2);
}

/* Narrow: the caption first, then the launch line, each across the
   content column */
.stage > figcaption {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  width: auto;
  margin-inline: 0;
  padding-right: 0;
}

.stage > .h-launch-line {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  margin-top: var(--s5);
}

/* From 720px the two share a row: the caption runs 59 percent of the
   content column, so it takes fewer lines than at its old 62ch measure,
   then a 9 percent gap, then the launch line in the last 32 percent.
   Both start at the row's top but keep different margins, so the
   launch line's top stands 24px below the caption's (the two margins
   are at the end).

   The scene's button gives up its own row: it shares the window's row,
   at its foot, and hangs 28px below it, so its 40px overlaps the
   window's lower right corner by 12px, the status strip's empty end.
   The scene's notification stands 0.8em (12px) above the window's lower
   edge, so the button never covers it. It is lifted over the window,
   which is positioned. The caption starts 12px under the window; the
   launch line, under the button's foot, starts 8px below it (36px). */
@media (min-width: 720px) {
  .stage {
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--stage-col) * 0.59)
      calc(var(--stage-col) * 0.09)
      calc(var(--stage-col) * 0.32)
      minmax(0, 1fr);
  }

  .stage > .window + .scene-ctl {
    position: relative;
    z-index: 2;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    margin-bottom: -28px;
  }

  .stage > figcaption {
    margin-top: var(--s3);
  }

  .stage > .h-launch-line {
    grid-column: 4;
    grid-row: 3;
    margin-top: 36px;
  }
}

/* The first screen ends at the screen's lower edge. The hero, from its
   top to the foot of the agents row (the tools MaeVae drives) and the
   section's end under it, is at least as tall as the screen under the
   header, up to the cap in the last paragraph, so the next section
   starts at that edge and not inside the first screen. The space is won
   by trimming space, not text: the hero's top padding is 24px, the logo
   stands 12px above the headline, the stage keeps the site's margin,
   the scene's button shares the window's row and the caption row starts
   12px under the window. At a 2000px wide viewport the parts around the
   window are 700.13px tall: 24 + 358.88 (the logo, the headline and the
   buttons) + 48 + 143.75 (the caption row) + 32 + 69.5 (the agents row)
   + 24 (the section's end).

   The window is the look the hero is built on: it stands at nearly the
   full width of the screen, the wide track of up to 1680px with a small
   inset from the screen's edge (the margins on .stage > .window above),
   so its three panes stand side by side as a wide band. No rule sets its
   width at any breakpoint. Under 1760px wide its height is set by its
   text; from 1760px it takes the room the first screen leaves it as its
   height (the block after this rule), and only its height.

   The hero is a column of three: the logo with the tagline, the stage,
   and the agents row. Under 1760px wide, on a taller screen its spare
   height goes into the two gaps, half above the stage and half above the
   agents row, so the agents row stands on the section's end at the foot
   of the screen and the margins above stay the least space; from 1760px
   the window takes the spare height first and what it leaves goes under
   the stage, so the window stands at the stage's own gap under the
   buttons. On a shorter screen, where the parts around the window and
   the window's text need more than the screen under the header, the
   content sets the height and the page scrolls into it.

   The header is its 64px row and a 1px border, which a browser draws as
   one device pixel: 1px at a device pixel ratio of 1, 0.8px at 1.25.
   Only the row's 64px is taken off, so the hero ends at the screen's
   lower edge or below it by no more than the border, never above it,
   and no sliver of the next section shows in the first screen. The svh
   line keeps the height to the screen with a phone browser's bars
   shown; the vh line is for a browser without it.

   The cap: the spare height stops growing once the hero is 1376px tall,
   so on a very tall screen the window does not drift down to the middle
   between two wide empty bands. Up to a 1440px tall screen (the cap and
   the header's row) the hero still ends at the lower edge; on a taller
   one the next section begins inside the first screen, its top about
   719px above the lower edge of a 2160px tall screen. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: min(calc(100vh - 64px), 1376px);
  min-height: min(calc(100svh - 64px), 1376px);
  padding-top: var(--s5);
}

/* The window's height. From 1760px wide nothing around the window
   changes size any more (the content column stops growing there), so the
   room the first screen leaves it is known: the screen under the
   header's 64px row, up to the hero's cap of 1376px, less the parts
   around the window (the 700.13px named above, each measured at 2000px
   wide) and less 80px kept between the launch line and the agents row.
   The window takes that room as its height; its width stays the wide
   track's at every height. The stage keeps its own top margin and the
   spare height left beside the window goes under the stage, so the
   window starts 48px under the hero's text and, on a 1214px tall screen,
   stands 369.87px tall with the agents row still on the section's end at
   the foot of the screen. The 80px also absorbs a part around the window
   that grows on another font, such as a caption line that wraps.

   Its least height is 16.75em, 251.25px at its 15px text: the window's
   heads, HUD strips and status strip with about three lines of each
   terminal, which a 1080px tall screen still has room for; on a screen
   under about 1095px tall at these widths the window keeps that height.
   Where the room is shorter than the window's text (a screen under about
   1200px tall), each terminal shows its latest lines, the earlier ones
   cut at its top edge the way a terminal scrolls, so a 1080px tall
   screen still ends at the agents row. The terminal's top padding fades
   out toward its top edge, so the line the cut falls on passes under a
   soft edge instead of showing a strip of its letters; where nothing is
   cut, the first line starts below the fade and shows whole. Where the
   room is taller than the text, the panes fill the window and each
   terminal takes what its head and HUD leave, its lines at the top and
   its prompt or its approval at the foot. The terminal is cut with clip,
   where supported, so it is not a scroll container that find in page
   could move. The svh line keeps to the screen with a phone browser's
   bars shown; the vh line is for a browser without it. */
@media (min-width: 1760px) {
  .stage {
    --hero-top-pad: var(--s5);
    --hero-text: 358.88px;
    --hero-stage-gap: clamp(32px, 3vw, 48px);
    --hero-caption-row: 143.75px;
    --hero-agents-gap: var(--s6);
    --hero-agents-row: 69.5px;
    --hero-end: var(--section-end);
    --hero-below: 80px;
    --hero-around: calc(var(--hero-top-pad) + var(--hero-text)
      + var(--hero-stage-gap) + var(--hero-caption-row)
      + var(--hero-agents-gap) + var(--hero-agents-row) + var(--hero-end));
    --hero-room: calc(min(100vh - 64px, 1376px) - var(--hero-around)
      - var(--hero-below));
  }

  @supports (height: 100svh) {
    .stage {
      --hero-room: calc(min(100svh - 64px, 1376px) - var(--hero-around)
        - var(--hero-below));
    }
  }

  .hero > .stage {
    margin-bottom: auto;
  }

  /* The window's text grows with the room, as the room over 30, from its
     15px up to 125 percent (18.75px). At 15px the window's text needs
     355.95px, and a 1440px tall screen gives it a 595.87px room: more than
     half of each pane stood empty, a few lines at the top over a band of
     bare terminal. The heads, the lines, the HUD strips and the status
     strip are sized in em, so they grow together, and the window's height
     stays the room; the numbered marks are sized in rem and keep their
     size, as marks on the page. The text stays 15px up to a 450px
     room (a screen about 1294px tall) and reaches 18.75px at a 562.5px
     room (about 1407px). On a 1440px tall screen the panes then stand 29
     to 40 percent empty where they stood 43 to 52 percent empty at 15px.
     Nothing around the window changes. */
  .stage > .window {
    display: flex;
    flex-direction: column;
    height: max(16.75em, var(--hero-room));
    font-size: clamp(var(--fs-small), var(--hero-room) / 30, var(--fs-small) * 1.25);
  }

  .stage > .window > .panes {
    flex: 1 1 0;
    min-height: 0;
  }

  /* The terminal's lines stand at its foot when they overflow it, so the
     cut falls on the earliest; where there is room, the prompt's and the
     approval's own top margins, and the last line's bottom margin in the
     pane that has neither, keep the lines at the top. The mask fades the
     top padding, the only place a cut line can stand. */
  .stage .win-body {
    justify-content: flex-end;
    min-height: 0;
    overflow: hidden;
    overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0.4em, #000 0.9em);
    mask-image: linear-gradient(to bottom, transparent 0.4em, #000 0.9em);
  }

  /* Each line keeps its height, so the cut falls on whole lines at the
     top. A line hides its overflow (it ends in an ellipsis), which lets a
     flex item shrink to nothing: without this, where the room is shorter
     than the text, every line shrank to a sliver of its letters laid over
     the next instead of the earliest lines leaving at the top. */
  .stage .win-body > * {
    flex-shrink: 0;
  }

  .stage .win-body > .out:last-child {
    margin-bottom: auto;
  }
}

/* The scene's further terminal lines. The scene's rules in the site's
   stylesheet hold every terminal line empty until its state arrives and
   bring in each pane's first lines; the lines after them arrive here, one
   state each, on the same tempo and in the order the agent writes them.
   Pane 1's test command keeps its chevron turned as it rises, as pane 2's
   push does. Pane 3's lines all wear .out, which its result state brings
   in at once, so each later one is held back until its own state. */
@media screen and (prefers-reduced-motion: no-preference) {
  .window.is-armed:not(.is-done):not(.s-p3-out2) .p3 .win-body > .out:nth-child(2),
  .window.is-armed:not(.is-done):not(.s-p3-out3) .p3 .win-body > .out:nth-child(3),
  .window.is-armed:not(.is-done):not(.s-p3-out4) .p3 .win-body > .out:nth-child(4),
  .window.is-armed:not(.is-done):not(.s-p3-out5) .p3 .win-body > .out:nth-child(5) {
    opacity: 0;
    transform: translateY(4px);
    transition: none;
  }

  .window.is-armed:not(.is-done).s-p1-out3 .p1 .win-body > :nth-child(3),
  .window.is-armed:not(.is-done).s-p1-out4 .p1 .win-body > :nth-child(4),
  .window.is-armed:not(.is-done).s-p1-run .p1 .cmd > *,
  .window.is-armed:not(.is-done).s-p1-pass .p1 .win-body > :nth-child(6),
  .window.is-armed:not(.is-done).s-p2-out2 .p2 .win-body > :nth-child(2),
  .window.is-armed:not(.is-done).s-p2-out3 .p2 .win-body > :nth-child(3),
  .window.is-armed:not(.is-done).s-p2-out4 .p2 .win-body > :nth-child(4) {
    opacity: 1;
    transform: none;
    transition: opacity var(--beat) var(--arrive),
                transform var(--beat) var(--arrive);
  }

  .window.is-armed:not(.is-done).s-p1-run .p1 .cmd > .chev {
    transform: translateY(0) rotate(45deg);
  }
}

/* Windows contrast themes replace backgrounds, which would erase the
   saved-login dots, the insets' frames, the drawn key and the model list's
   highlight; real borders and system colours keep them */
@media (forced-colors: active) {
  .h-slot-dot {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }

  .mock.h-inset,
  .h-slot,
  .h-keycap,
  .h-models-box,
  .h-hud-table {
    border-color: CanvasText;
  }

  .h-model.is-sel {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}