/*
 * Frame and component styles use semantic tokens from tokens.css; frame dimensions are
 * declared here.
 */

/* Disable synthetic styles because no italic font files are supplied. */
@layer base {
  :root {
    font-synthesis: none;
  }

  /* Shared box-sizing reset. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  a {
    color: var(--accent-text);
    text-underline-offset: 0.15em;
  }

  /*
   * No bullets and no browser indent anywhere: a list here is a set of rows, and a row
   * that wants an indent says so.
   */
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  summary {
    cursor: pointer;
  }

  /*
   * The hidden attribute does not hide inline SVG; display:none hides the sprite while
   * use can still reference its symbols.
   */
  .icon-sprite {
    display: none;
  }
}

/* Masthead and colophon align to the frame's width and inset. */

@layer components {
  .masthead {
    background: transparent;
    color: var(--text);
    border-block-end: thin solid var(--hairline);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }


  /*
   * One row that wraps rather than overflows: at 40rem, the smallest window designed
   * for, the name and the actions share a line, and below it the actions take a line of
   * their own at the end.
   */
  .masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-tight) var(--gap-separate);
    padding-block: var(--space-4);
  }

  /* The lockup. */
  .masthead__name {
    margin: 0;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    font-weight: 500;
    white-space: nowrap;
  }

  /*
   * Mark height = cap height x 1.45, centred on the cap height and not sat on the
   * baseline.
   */
  .masthead__mark {
    display: inline-block;
    inline-size: 1.45cap;
    block-size: 1.45cap;
    vertical-align: -0.225cap;
    margin-inline-end: var(--gap-related);
  }

  .masthead__tagline {
    margin: 0;
    color: var(--text-3);
  }

  /*
   * The one slot for a signed-in request's Your teams, who you are and Sign out, pushed
   * to the far end.
   */
  .masthead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-tight) var(--gap-separate);
    margin-inline-start: auto;
    font-size: var(--type-ui-size);
  }

  .masthead__actions a {
    color: var(--text-2);
  }

  .masthead__actions a:hover {
    color: var(--text);
  }

  .masthead__who {
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  .masthead__who strong {
    color: var(--text-2);
    font-weight: 500;
  }

  .sign-out > button {
    padding: var(--space-1) var(--space-3);
    border: thin solid var(--control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
  }

  .sign-out > button:hover {
    border-color: var(--text-3);
    color: var(--text);
  }

  .colophon {
    border-block-start: thin solid var(--hairline);
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .colophon__inner {
    padding-block: var(--space-4) var(--space-6);
  }

  .colophon__inner > p {
    margin: 0;
    max-inline-size: var(--measure-prose);
  }
}

/*
 * Team frame, Memory list and atom layout. Frame dimensions live here as --frame-*
 * properties.
 */

@layer base {
  html.register {
    color-scheme: dark;
    background: var(--ground);
    /* Antialias light text on dark backgrounds to reduce apparent weight. */
    -webkit-font-smoothing: antialiased;
  }

  @media (prefers-color-scheme: light) {
    html.register {
      color-scheme: light;
      -webkit-font-smoothing: auto;
    }
  }

  .register body {
    background: var(--ground);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }

  /*
   * Native option menus may use a light system background even when the select inherits
   * dark text tokens. Give each option the matching ground.
   */
  .register option {
    background: var(--ground);
    color: var(--text);
  }
}

@layer components {
  .register {
    --frame-width: 80rem;
    --frame-tree: 14rem;
    --frame-inbox: 15rem;
    --frame-gap: 2.5rem;
    --page-inset: 2rem;
    --frame-gutter: 8rem;
    /* What the tree's own scroll is measured against. */
    --frame-rail-height: 100dvh;
  }

  /* The masthead and the colophon line up with the frame they sit above. */
  .register .masthead__inner,
  .register .colophon__inner {
    max-inline-size: var(--frame-width);
    margin-inline: auto;
    padding-inline: var(--page-inset);
  }

  .register .page {
    margin-inline: auto;
  }

  /*
   * A very wide window caps the frame and centres it: no claim line runs past the
   * measure, and the extra width is left empty.
   */
  .page--team {
    max-inline-size: var(--frame-width);
    padding-inline: 0;
    padding-block: var(--space-6) var(--space-7);
    container: team-page / inline-size;
  }

  /* The narrowest layout is the base, and the wider ones add to it. */
  .team-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "inbox"
      "scope"
      "page"
      "actions";
    row-gap: var(--gap-related);
    padding-inline: var(--page-inset);
    align-items: start;
  }

  .team-frame > .sidebar {
    grid-area: scope;
    min-inline-size: 0;
  }

  .team-frame__page {
    grid-area: page;
    min-inline-size: 0;
  }

  /*
   * The column is a wrapper for two things that go to different places when there is no
   * column: the counts, and the team's own actions. It draws nothing itself, and is a
   * column again from 72rem.
   */
  .team-frame > .team-column {
    display: contents;
  }

  .team-frame .inbox-aside {
    grid-area: inbox;
    min-inline-size: 0;
  }

  .team-frame .team-actions {
    grid-area: actions;
    min-inline-size: 0;
  }

  /*
   * The Inbox as a line: the three counts each on it and never summed. The three lines
   * of explanation are read and not drawn, so what a screen reader is told does not
   * change with the window.
   */
  @container team-page (width < 72rem) {
    .team-frame .inbox-aside {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--gap-tight) var(--gap-separate);
    }

    .team-frame .inbox-aside .sidebar__heading {
      margin: 0;
    }

    .team-frame .inbox-summary {
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap-tight) var(--gap-separate);
    }

    .team-frame .inbox-summary li {
      margin: 0;
    }

    .team-frame .inbox-summary a {
      display: inline;
    }

    .team-frame .inbox-summary .hint {
      position: absolute;
      inline-size: 0;
      block-size: 0;
      overflow: hidden;
    }
  }

  /*
   * From 54rem the tree stands beside the page, and the Inbox is still a line above
   * both.
   */
  @container team-page (width >= 54rem) {
    .team-frame:not(.team-frame--no-column) {
      grid-template-columns: var(--frame-tree) minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "inbox inbox"
        "scope page"
        "scope actions";
      column-gap: var(--frame-gap);
    }
  }

  /* From 72rem the Inbox is a column again: the counts, then the actions. */
  @container team-page (width >= 72rem) {
    .team-frame:not(.team-frame--no-column) {
      grid-template-columns: var(--frame-tree) minmax(0, 1fr) var(--frame-inbox);
      grid-template-rows: auto auto 1fr;
      grid-template-areas:
        "scope page inbox"
        "scope page actions"
        "scope page .";
      row-gap: 0;
    }
  }

  /*
   * Below 46rem the machine-value column narrows a little, so that the claim beside it
   * is no narrower than it is where the tree still stands beside the page at 54rem,
   * about 50 characters.
   */
  @container team-page (width < 46rem) {
    .team-frame {
      --frame-gutter: 7rem;
    }
  }

  .team-frame a {
    color: var(--accent-text);
  }

  /* Use 500 weight; the supplied font system does not use 600. */
  .team-frame
    :is(
      strong,
      b,
      summary,
      h1,
      h2,
      h3,
      legend,
      .contradiction-reply__state,
      .sidebar__heading,
      .rail__proposed a,
      .inbox-summary a,
      [aria-current="page"]
    ) {
    font-weight: 500;
  }

  /* The left and right columns: the interface's own small sans. */
  .team-frame > .sidebar,
  .team-frame > .team-column {
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    overflow-wrap: anywhere;
  }

  .team-frame .sidebar__heading {
    margin: 0 0 var(--gap-tight);
    color: var(--text-3);
    font-size: var(--type-eyebrow-size);
    line-height: var(--type-eyebrow-leading);
    letter-spacing: var(--type-eyebrow-tracking);
    text-transform: uppercase;
  }

  .team-frame .team-selector {
    margin-block-end: var(--gap-section);
  }

  .team-frame .sidebar li > a {
    color: var(--text-2);
    text-decoration: none;
  }

  .team-frame .sidebar li > a:hover {
    color: var(--text);
    text-decoration: underline;
  }

  .team-frame .sidebar a[aria-current="page"] {
    color: var(--text);
  }

  .team-frame .rail__note,
  .team-frame .rail .hint {
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  .team-frame .rail__note,
  .team-frame .rail p.hint {
    margin: 0 0 var(--gap-related);
  }

  .team-frame .tag {
    padding: 0;
    border: 0;
    color: var(--status-text);
    font-size: var(--type-ui-size);
  }

  /*
   * The tree's own button is text: it says what it does and takes the quiet ink, with no
   * box (an ordinary button is the page's, below).
   */
  .team-frame .sidebar form.archival button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-3);
    font: inherit;
    font-size: var(--type-ui-size);
    text-decoration: underline;
    cursor: pointer;
  }

  /*
   * The page: the team's name is a title in the serif, and the prose measure holds every
   * paragraph under it.
   */
  .team-frame__page > h1 {
    margin: 0 0 var(--gap-tight);
    font-family: var(--font-serif);
    font-size: var(--type-page-size);
    line-height: var(--type-page-leading);
    letter-spacing: var(--type-page-tracking);
    overflow-wrap: anywhere;
  }

  .team-frame__page h2 {
    margin: var(--gap-section) 0 var(--gap-tight);
    font-family: var(--font-serif);
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
  }

  .team-frame .lede {
    margin: 0 0 var(--gap-separate);
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    overflow-wrap: anywhere;
  }

  .team-frame .hint {
    margin: 0;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /*
   * A departure's three consequences: the facts the act's button carries back as its
   * echo, read as copy and held apart from the hint and the act.
   */
  .team-frame .departure-counts {
    margin: 0 0 var(--gap-related);
    padding: 0;
    color: var(--text);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
    font-variant-numeric: tabular-nums;
  }

  .team-frame .departure-counts + .hint {
    margin-block-end: var(--gap-separate);
  }

  /*
   * The Logs page: one row of a log per entry, under a hairline, each field on its own
   * line with its label in the machine-value column, as a Memory Atom's provenance is.
   */
  .team-frame .log-entries {
    margin: 0;
    padding: 0;
  }

  .team-frame .log-kinds [aria-current="page"] {
    color: var(--text);
    text-decoration: none;
  }

  .team-frame .log-entry {
    padding-block: var(--gap-related);
    border-block-start: thin solid var(--hairline);
  }

  .team-frame .log-entry__meta {
    margin: 0 0 var(--gap-tight);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .team-frame :is(.log-fields, .log-scores) {
    display: grid;
    grid-template-columns: var(--frame-gutter) minmax(0, 1fr);
    column-gap: var(--gap-separate);
    row-gap: var(--space-1);
    margin: 0;
    font-size: var(--type-gutter-size);
    line-height: var(--type-gutter-leading);
  }

  .team-frame :is(.log-fields, .log-scores) > dt {
    color: var(--text-3);
    text-align: end;
  }

  .team-frame :is(.log-fields, .log-scores) > dd {
    min-inline-size: 0;
    margin: 0;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .team-frame .log-query {
    color: var(--text);
    white-space: pre-wrap;
  }

  .team-frame .log-returned {
    margin: 0;
    padding: 0;
  }

  .team-frame .log-returned > li + li {
    margin-block-start: var(--gap-related);
  }

  .team-frame .count {
    margin: 0 0 var(--gap-related);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    font-variant-numeric: tabular-nums;
  }

  /*
   * Show more: a text link at a search list's foot, never a filled button and never a
   * scroll area inside the list. Drawn empty where nothing is left, since a Show more
   * answer names it; empty takes no room.
   */
  .team-frame .show-more {
    margin: var(--gap-related) 0 var(--gap-section);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .team-frame .show-more:empty {
    display: none;
  }

  /*
   * Two looks of button: ordinary, and destructive. Neither is filled, none is the main
   * one, and none is ever disabled: a form a viewer cannot use is not rendered. The
   * tree's own buttons are text (`form.archival`, below).
   */
  .team-frame :is(.team-frame__page, .team-column) button {
    padding: var(--space-1) var(--space-3);
    border: thin solid var(--control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    text-decoration: none;
    cursor: pointer;
  }

  .team-frame :is(.team-frame__page, .team-column) button:hover {
    border-color: var(--text-3);
  }

  .team-frame :is(.team-frame__page, .team-column) button.button--destructive {
    border-color: var(--danger-border);
    color: var(--danger-text);
  }

  /* The filter form and the rename form: controls bounded at 3:1. */
  .team-frame :is(select, input, textarea) {
    padding: var(--space-1) var(--space-3);
    border: thin solid var(--control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-field-size);
    line-height: var(--type-field-leading);
    letter-spacing: var(--type-field-tracking);
  }

  .team-frame .filters,
  .team-frame .rename,
  .team-frame .move-target,
  .team-frame .destroy-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--gap-related);
    margin-block: var(--gap-separate) var(--gap-related);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  .team-frame .filters label,
  .team-frame .rename label,
  .team-frame .move-target label,
  .team-frame .destroy-confirm label {
    display: grid;
    gap: var(--gap-tight);
  }

  .team-frame .filters__search {
    flex: 1 1 24ch;
  }

  /*
   * One in-page note. A refusal is text, a wash and a 3px line on the inline start, and
   * nothing else in the app occupies horizontal space with colour; a done note is the
   * status family's text and no box.
   */
  .team-frame .note {
    margin-block: var(--gap-related);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
    max-inline-size: var(--measure-prose);
  }

  .team-frame .note--refused {
    border-inline-start: medium solid var(--danger-border);
    background: var(--danger-wash);
    color: var(--danger-text);
  }

  .team-frame .note--done {
    padding: 0;
    background: transparent;
    color: var(--status-text);
  }

  /* The Memory list: an ordered register, one hairline between entries. */
  .team-frame .atoms {
    margin: 0 0 var(--gap-separate);
    padding: 0;
    list-style: none;
  }

  /*
   * One Memory Atom: machine values hang in the left column, the claim is prose beside
   * them. A value too long for its space wraps and nothing is cut: the gutter is a fixed
   * width, so it is the gutter that grows taller, never the row wider.
   */
  .memory-atom {
    display: grid;
    grid-template-columns: var(--frame-gutter) minmax(0, 1fr);
    column-gap: var(--gap-separate);
    padding-block: var(--gap-separate);
    border-block-start: thin solid var(--hairline);
  }

  /* Mark the refused candidate with the same danger line as its inline refusal. */
  .memory-atom--refused {
    border-inline-start: medium solid var(--danger-border);
    padding-inline-start: var(--space-4);
  }

  .memory-atom__gutter {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-3);
    font-size: var(--type-gutter-size);
    line-height: var(--type-gutter-leading);
    letter-spacing: var(--type-gutter-tracking);
    font-variant-numeric: tabular-nums;
    text-align: end;
    overflow-wrap: anywhere;
  }

  .memory-atom__gutter > li + li {
    margin-block-start: var(--gap-tight);
  }

  .memory-atom__author {
    color: var(--text-2);
  }

  .memory-atom__gutter a {
    color: var(--text-3);
    text-decoration: none;
  }

  .memory-atom__gutter a:hover {
    color: var(--text);
    text-decoration: underline;
  }

  /*
   * State is a word, coloured on `status` alone and only when it is not the ordinary
   * one. The two labels are two classes, so a colour on one cannot reach the other, and
   * the claim is never dimmed for either.
   */
  .team-frame :is(.status, .review-state) {
    display: inline;
    padding: 0;
    border: 0;
    font-size: inherit;
  }

  .team-frame :is(.status--superseded, .status--archived) {
    color: var(--status-text);
  }

  .memory-atom__body {
    min-inline-size: 0;
  }

  .memory-atom__claim,
  .team-frame .claim {
    margin: 0;
    max-inline-size: var(--measure-prose);
    font-family: var(--font-serif);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    overflow-wrap: anywhere;
  }

  .memory-atom__claim a,
  .team-frame .claim a {
    color: var(--text);
    text-decoration: none;
  }

  .memory-atom__claim a:hover,
  .team-frame .claim a:hover {
    text-decoration: underline;
  }

  .memory-atom__detail {
    margin: var(--gap-tight) 0 0;
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-family: var(--font-serif);
    font-size: var(--type-detail-size);
    line-height: var(--type-detail-leading);
    letter-spacing: var(--type-detail-tracking);
    overflow-wrap: anywhere;
  }

  .team-frame .revisit {
    margin: var(--gap-tight) 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-family: var(--font-serif);
    font-size: var(--type-detail-size);
    font-weight: 400;
    line-height: var(--type-detail-leading);
    font-style: normal;
    overflow-wrap: anywhere;
  }

  .team-frame .revisit strong {
    color: var(--text);
  }

  /* Use full ink for incomplete failed approaches that lack a retry condition. */
  .team-frame .revisit--missing,
  .team-frame .revisit--held {
    color: var(--text);
    font-weight: 500;
  }

  .team-frame .meta {
    margin: var(--gap-tight) 0 0;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /*
   * An open Contradiction as a reply (B): the row above is side one and this block holds
   * the other.
   */
  .team-frame .contradiction-reply {
    box-sizing: border-box;
    margin-block: var(--gap-related) 0;
    padding: var(--space-3) var(--space-4);
    max-inline-size: var(--measure-prose);
    border: 0;
    border-inline-start: medium solid var(--disagreement-border);
    background: var(--disagreement-wash);
    color: var(--text);
  }

  /*
   * A side that cannot be read says so with the line and no tint: what is there and what
   * was not shown must not look alike.
   */
  .team-frame .contradiction-reply--unread {
    background: transparent;
  }

  .team-frame .contradiction-reply__who {
    margin: 0 0 var(--gap-tight);
    color: var(--disagreement-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    overflow-wrap: anywhere;
  }

  .team-frame .contradiction-reply__state {
    font-weight: 500;
  }

  .team-frame .contradiction-reply__claim {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    overflow-wrap: anywhere;
  }

  .team-frame .contradiction-reply__claim a {
    color: var(--text);
    text-decoration: none;
  }

  .team-frame .contradiction-reply__claim a:hover {
    text-decoration: underline;
  }

  /* What is gone is said in the interface's voice and not set as a claim. */
  .team-frame .contradiction-reply__claim--gone {
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .team-frame .contradiction-reply__act {
    margin: var(--gap-tight) 0 0;
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /*
   * One Memory's own page: what can be done with it, then its provenance in the same
   * left column the machine values hang in.
   */
  .team-frame .atom-actions {
    margin: var(--gap-related) 0 0;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /* The atom-page approval criteria stay inside the reading column. */
  .team-frame .atom-detail .bar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--gap-tight);
    margin-block-start: var(--gap-separate);
    padding-block-start: var(--gap-related);
    border-block-start: thin solid var(--hairline);
  }

  .team-frame .atom-detail .bar__label {
    text-align: start;
  }

  .team-frame .atom-detail form.archival {
    margin: var(--gap-tight) 0 0;
  }

  .team-frame .atom-detail form.archival button {
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  /*
   * The one irreversible act sits under a hairline of its own, apart from the rest of
   * the page's acts.
   */
  .team-frame .delete {
    margin-block: var(--gap-separate);
    padding-block-start: var(--gap-related);
    border-block-start: thin solid var(--hairline);
  }

  .team-frame .delete > summary {
    font-weight: 500;
  }

  .team-frame .provenance {
    display: grid;
    grid-template-columns: var(--frame-gutter) minmax(0, 1fr);
    column-gap: var(--gap-separate);
    row-gap: var(--space-1);
    margin: 0 0 var(--gap-section);
    font-size: var(--type-gutter-size);
    line-height: var(--type-gutter-leading);
  }

  .team-frame .provenance dt {
    color: var(--text-3);
    text-align: end;
  }

  .team-frame .provenance dd {
    min-inline-size: 0;
    margin: 0;
    color: var(--text-2);
    overflow-wrap: anywhere;
  }

  /* The fork: the weight of a link, opening its field under a hairline. */
  .team-frame .fork {
    margin-block-start: var(--gap-related);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  .team-frame .fork > summary {
    color: var(--accent-text);
    cursor: pointer;
  }

  /* Personal capture and review use the Team frame's existing control tokens. */
  .team-frame .personal-form {
    display: grid;
    gap: var(--gap-related);
    max-inline-size: var(--measure-prose);
    margin-block: var(--gap-related);
  }

  .team-frame .personal-form label {
    display: grid;
    gap: var(--gap-tight);
    color: var(--text-3);
  }

  .team-frame .personal-form :is(input, select, textarea) {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .team-frame .personal-form button {
    justify-self: start;
  }

  .team-frame .fork__form {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--gap-tight);
    margin-block-start: var(--gap-tight);
    padding: 0 0 0 var(--space-4);
    border: 0;
    border-inline-start: thin solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }

  .team-frame .fork__form label {
    display: block;
    inline-size: 100%;
    color: var(--text-3);
  }

  .team-frame .fork__form textarea {
    display: block;
    margin-block-start: var(--space-1);
    inline-size: 100%;
    max-inline-size: var(--measure-prose);
  }

  .team-frame .fork--unavailable {
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  /*
   * The Inbox column: the three counts, each on its own line and never summed, then the
   * team's two actions, quiet.
   */
  .team-frame .inbox-summary {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .team-frame .inbox-summary li {
    margin-block-end: var(--gap-related);
  }

  .team-frame .inbox-summary a {
    display: block;
    font-variant-numeric: tabular-nums;
  }

  .team-frame .inbox-summary .hint {
    display: block;
  }

  .team-frame .rail__proposed a {
    font-variant-numeric: tabular-nums;
  }

  .team-frame .team-actions {
    margin-block-start: var(--gap-section);
    padding-block-start: var(--gap-separate);
    border-block-start: thin solid var(--hairline);
  }

  .team-frame .team-actions h2 {
    margin: var(--gap-separate) 0 var(--gap-tight);
    color: var(--text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  .team-frame .team-actions h2:first-child {
    margin-block-start: 0;
  }

  .team-frame .team-actions p {
    margin: 0 0 var(--gap-related);
    color: var(--text-3);
  }

  /*
   * The Inbox's own column, on an Inbox page: the filters, whose queue and the keys
   * instead of the team summary, one element so the grid places it as one item in the
   * "inbox" area exactly as `.inbox-aside` otherwise would. `.filters` above already
   * covers the nav; these two are the rest of it.
   */
  .team-frame .queue-filters {
    grid-area: inbox;
    min-inline-size: 0;
  }

  .team-frame .views {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-tight) var(--gap-related);
    margin-block: 0 var(--gap-related);
  }

  .team-frame .views [aria-current="page"] {
    color: var(--text);
  }

  .team-frame .keys {
    margin: 0;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /*
   * Physical keycaps: a real border and a heavier one underneath, so a key reads as a
   * small raised control and not as styled text.
   */
  .team-frame kbd {
    padding: 0 var(--space-1);
    border: thin solid var(--control);
    border-block-end-width: medium;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--type-mono-size);
  }

  /*
   * The bar, as the register's own header row: the label hangs in the same gutter width
   * every Memory Atom's machine values do, the sentence sits in the reading column, one
   * hairline underneath, and nothing here is a button — the sentence is never anything
   * but text.
   */
  .team-frame .bar {
    display: grid;
    grid-template-columns: var(--frame-gutter) minmax(0, 1fr);
    column-gap: var(--gap-separate);
    padding-block-end: var(--gap-separate);
    margin-block-end: var(--gap-separate);
    border-block-end: thin solid var(--hairline);
  }

  .team-frame .bar__label {
    margin: 0;
    color: var(--text-3);
    font-size: var(--type-gutter-size);
    line-height: var(--type-gutter-leading);
    letter-spacing: var(--type-gutter-tracking);
    text-align: end;
    overflow-wrap: anywhere;
  }

  .team-frame .bar__sentence {
    margin: 0;
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /*
   * The candidates queue: an ordered register, one Memory Atom each, the same hairline
   * rhythm the browse list already uses.
   */
  .team-frame .candidates {
    margin: 0 0 var(--gap-separate);
    padding: 0;
    list-style: none;
  }

  /*
   * One `<details>` look: the marker is the summary's own weight, the opened content
   * indents under a hairline. The Similarity Check and the Approve verdict's quiet line
   * both take it.
   */
  .team-frame :is(.similarity, .verdict__more) {
    margin-block-start: var(--gap-tight);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  .team-frame :is(.similarity, .verdict__more) > summary {
    color: var(--accent-text);
    cursor: pointer;
  }

  .team-frame .similarity--absent,
  .team-frame .similarity--none {
    margin-block-start: var(--gap-tight);
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  .team-frame .matches {
    margin: var(--gap-tight) 0 0;
    padding: 0 0 0 var(--space-4);
    border-inline-start: thin solid var(--hairline);
    list-style: none;
  }

  .team-frame .match + .match {
    margin-block-start: var(--gap-related);
  }

  .team-frame .match__bucket {
    margin: 0;
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  /*
   * The three verdicts, at full strength and never favoured: Approve and Defer are one
   * click, Discard's own `<summary>` carries the same weight as the other two buttons
   * and opens its reason list in place — no accent, no fill, and there is no disabled
   * state anywhere here.
   */
  .team-frame .verdicts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-related);
    align-items: start;
    margin-block-start: var(--gap-separate);
  }

  .team-frame form.verdict {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-tight);
    align-items: start;
  }

  .team-frame form.verdict--approve,
  .team-frame form.verdict--defer,
  .team-frame .verdict--discard {
    display: contents;
  }

  .team-frame .verdict--approve > button,
  .team-frame .verdict--move {
    grid-column: 1;
    grid-row: 1;
  }

  .team-frame .verdict--discard > summary {
    grid-column: 2;
    grid-row: 1;
  }

  .team-frame .verdict--defer > button {
    grid-column: 3;
    grid-row: 1;
  }

  .team-frame .verdicts > .verdict:not(.verdict--approve, .verdict--defer, .verdict--discard, .verdict--move),
  .team-frame .verdict--discard > form,
  .team-frame .verdict__more,
  .team-frame .verdict--approve > :not(button, input[type="hidden"]),
  .team-frame .verdict--defer > :not(button, input[type="hidden"]) {
    grid-column: 1 / -1;
    min-inline-size: 0;
  }

  .team-frame .verdict--discard:not([open]) > form {
    display: none;
  }

  @container team-page (width < 40rem) {
    .team-frame .memory-atom__body .verdicts {
      margin-inline-start: calc(-1 * (var(--frame-gutter) + var(--gap-related)));
    }
  }

  .team-frame .activity {
    margin-block: var(--gap-related);
    max-inline-size: var(--measure-prose);
  }

  .team-frame .activity__details {
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .team-frame .activity__details dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-tight) var(--gap-related);
  }

  .team-frame .activity__details dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /*
   * A Held candidate's Move stands where Approve would, at the same weight: it is a link
   * to the move page, since approving it is refused.
   */
  .team-frame .verdict--discard > summary,
  .team-frame .verdict--move {
    display: inline-block;
    text-decoration: none;
    padding: var(--space-1) var(--space-3);
    border: thin solid var(--control);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    cursor: pointer;
    list-style: none;
  }

  .team-frame .verdict--discard > summary::-webkit-details-marker {
    display: none;
  }

  .team-frame .verdict--discard > summary:hover,
  .team-frame .verdict--move:hover {
    border-color: var(--text-3);
  }

  .team-frame .verdict--discard[open] > summary {
    margin-block-end: var(--gap-related);
  }

  .team-frame .verdict--discard form,
  .team-frame .verdict__more {
    display: grid;
    gap: var(--gap-related);
    margin-block-start: var(--gap-related);
  }

  .team-frame .verdict__more {
    padding: 0 0 0 var(--space-4);
    border-inline-start: thin solid var(--hairline);
  }

  .team-frame .verdict label {
    display: grid;
    gap: var(--gap-tight);
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  .team-frame .verdict input {
    max-inline-size: var(--measure-prose);
  }

  .team-frame .derivation {
    margin-block: var(--gap-related);
    font-family: var(--font-sans);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }

  .team-frame .derivation h3 {
    margin: 0 0 var(--gap-tight);
  }

  .team-frame .derivation ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .team-frame .derivation li + li {
    margin-block-start: var(--gap-tight);
  }

  .team-frame .source-archive {
    flex-basis: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .team-frame .source-archive legend {
    padding: 0;
    margin-block-end: var(--gap-tight);
  }

  .team-frame .source-archive label {
    display: flex;
    align-items: baseline;
    gap: var(--gap-tight);
    padding-block: var(--space-1);
    color: var(--text-2);
  }

  .team-frame .source-archive input {
    padding: 0;
    flex: none;
  }

  /*
   * A refusal on this one form: text and the danger ink, no box — the row's own refusal
   * already carries the wash and the line.
   */
  .team-frame .field-error {
    margin: 0;
    color: var(--danger-text);
    font-size: var(--type-ui-size);
  }

  /*
   * A verdict's receipt: where the buttons were, one quiet line, announced. Text only —
   * the row's own colour, not the disagreement wash, which is spoken for — and never a
   * button, so a second click on it does nothing.
   */
  .team-frame .receipt {
    margin: 0;
    color: var(--text-2);
    font-size: var(--type-ui-size);
  }

  /* Quiet the claim after a verdict while keeping it legible. */
  .team-frame .candidates > .memory-atom:has(.receipt) .memory-atom__claim {
    color: var(--text-2);
  }

  /*
   * The row holds, then slides away, and the rows below slide up — grid rows, not a
   * measured height, since there is no script here to measure one and `max-height: none`
   * cannot be transitioned.
   */
  .team-frame .candidates > .memory-atom {
    grid-template-rows: 1fr;
    overflow: hidden;
  }

  .team-frame .candidates > .memory-atom > * {
    min-block-size: 0;
  }

  /*
   * Hold the receipt for 0.7s, then collapse over 0.35s; repeated clicks hit the receipt
   * rather than another action.
   */
  @media (prefers-reduced-motion: no-preference) {
    .team-frame .candidates > .memory-atom {
      transition: grid-template-rows 350ms ease 700ms;
    }

    .team-frame .candidates > .memory-atom:has(.receipt) {
      grid-template-rows: 0fr;
    }
  }

  /*
   * Reduced motion: the row stays and nothing moves. Outside the query above,
   * `grid-template-rows` never changes and nothing transitions it, so the receipt shows
   * and the layout holds.
   */
}

/*
 * The icons: Phosphor Bold, drawn from the inline sprite in the team layout
 * (`src/web/icons.ts`).
 */
@layer components {
  .team-frame .icon {
    display: inline-block;
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: var(--gap-tight);
    vertical-align: -0.125em;
  }

  /*
   * In the gutter the icon is the last thing on the line, at the edge beside the claim,
   * so the four glyphs stand in one column while the words are ragged against them.
   */
  .team-frame .memory-atom__gutter > li:has(> .icon) {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .team-frame .memory-atom__gutter .icon {
    margin-inline: var(--gap-tight) 0;
    margin-block-start: calc((1lh - 1em) / 2);
    vertical-align: baseline;
  }
}

/* The Scope tree as an outline with guides. */
@layer components {
  .team-frame .scope-tree ul {
    margin: 0;
    margin-inline-start: calc(var(--space-3) / 2);
    padding: 0;
    padding-inline-start: var(--space-2);
    border-inline-start: thin solid var(--hairline);
    list-style: none;
  }

  .team-frame .scope-tree > ul {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  /* From level 6 down a Scope is drawn where its parent's children are. */
  .team-frame .scope-tree ul.scope-list--flat {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .team-frame .scope {
    min-inline-size: 0;
  }

  .team-frame .scope__row {
    display: grid;
    grid-template-columns: var(--space-3) minmax(0, 1fr) auto;
    column-gap: var(--space-1);
    align-items: baseline;
    padding-block: var(--space-1);
  }

  /* The slot every row keeps, so a leaf's name lines up with a branch's. */
  .team-frame .scope__row::before {
    content: "";
    box-sizing: border-box;
    inline-size: var(--space-3);
  }

  .team-frame summary.scope__row {
    cursor: pointer;
    list-style: none;
  }

  .team-frame summary.scope__row::-webkit-details-marker {
    display: none;
  }

  /*
   * The chevron is drawn in CSS: a folded branch points along the line, an open one down
   * it.
   */
  .team-frame summary.scope__row::before {
    inline-size: var(--space-2);
    block-size: var(--space-2);
    margin-inline: calc(var(--space-1) / 2);
    border-inline-end: thin solid var(--text-3);
    border-block-end: thin solid var(--text-3);
    transform: translateY(-20%) rotate(-45deg);
  }

  .team-frame details[open] > summary.scope__row::before {
    transform: translateY(-60%) rotate(45deg);
  }

  .team-frame .scope__name {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .team-frame .scope__row a {
    color: var(--text-2);
    text-decoration: none;
  }

  .team-frame .scope__row a:hover {
    color: var(--text);
    text-decoration: underline;
  }

  /* The current Scope: the second surface, and weight. */
  .team-frame .scope__row:has(a[aria-current="page"]) {
    background: var(--raise);
  }

  .team-frame .scope__row a[aria-current="page"] {
    color: var(--text);
  }

  .team-frame .scope--archived > .scope__row a,
  .team-frame .scope--archived > details > .scope__row a {
    color: var(--text-3);
  }

  .team-frame .scope--archived .hint {
    display: block;
  }

  .team-frame .scope__level {
    margin-inline-end: var(--space-1);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .team-frame .scope__count {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  /* Read by a screen, not drawn: the number is what is drawn. */
  .team-frame .scope__words {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }

  .team-frame .scope__more {
    padding-block: var(--space-1);
    padding-inline-start: var(--space-3);
    color: var(--text-3);
  }

  .team-frame .sidebar .scope__more > a {
    color: var(--accent-text);
    text-decoration: underline;
  }

  .team-frame .scope-tree form.archival {
    margin: 0;
    padding-block: var(--space-1);
    padding-inline-start: var(--space-3);
  }

  /*
   * Delete, beside Archive on the current Scope: the same quiet text act, a link because
   * its look writes nothing.
   */
  .team-frame .scope-tree .scope__delete {
    margin: 0;
    padding-block: var(--space-1);
    padding-inline-start: var(--space-3);
    font-size: var(--type-ui-size);
  }

  .team-frame .scope-tree .scope__delete > a {
    color: var(--text-3);
    text-decoration: underline;
  }

  /*
   * Change who reads it: each Member on a Scope's list is one row, the name and the one
   * act on it, between hairlines like the list it is.
   */
  .team-frame .readers__member {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: thin solid var(--hairline);
  }

  .team-frame .readers__member > form {
    margin: 0;
  }

  /* The Scope line: the whole tree, and the team selector with it, is one disclosure. */
  .team-frame .scope-fold > summary {
    display: block;
    padding-block: var(--space-2);
    border-block: thin solid var(--hairline);
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
  }

  .team-frame .scope-fold > summary::-webkit-details-marker {
    display: none;
  }

  /*
   * The chevron is drawn as the tree's own is: along the line when it is folded, down it
   * when it is open.
   */
  .team-frame .scope-fold > summary::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    inline-size: var(--space-2);
    block-size: var(--space-2);
    margin-inline: calc(var(--space-1) / 2) var(--space-2);
    border-inline-end: thin solid var(--text-3);
    border-block-end: thin solid var(--text-3);
    transform: translateY(-20%) rotate(-45deg);
  }

  .team-frame .scope-fold[open] > summary::before {
    transform: translateY(-60%) rotate(45deg);
  }

  .team-frame .scope-fold[open] > summary {
    margin-block-end: var(--gap-related);
  }

  /* A path of three hundred characters wraps across the line and is whole. */
  .team-frame .scope-fold__where {
    color: var(--text);
    overflow-wrap: anywhere;
  }

  @container team-page (width >= 54rem) {
    /*
     * Expand closed disclosure content only where the browser supports details-content;
     * keep the summary reachable elsewhere.
     */
    @supports selector(::details-content) {
      .team-frame:not(.team-frame--no-column) .scope-fold > summary {
        display: none;
      }

      .team-frame:not(.team-frame--no-column) .scope-fold::details-content {
        content-visibility: visible;
      }
    }

    /*
     * With the tree beside the page it scrolls on its own, so a hundred Scopes never
     * push the list away; folded into a line it is one block in the stack and has
     * nothing to scroll against.
     */
    .team-frame:not(.team-frame--no-column) > .team-frame__tree {
      position: sticky;
      inset-block-start: var(--space-4);
      max-block-size: calc(var(--frame-rail-height) - 2 * var(--space-4));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-inline: var(--space-1);
    }
  }
}

/* Scope proposal queue in the Team frame. */
@layer components {
  .team-frame .proposals {
    margin: 0 0 var(--gap-separate);
    padding: 0;
    list-style: none;
  }

  /*
   * One grid row, its single child (`.proposal__body`) wrapping everything the row
   * draws, on the candidates queue's own technique: the row holds, then slides away, and
   * the rows below slide up.
   */
  .team-frame .proposal {
    display: grid;
    grid-template-rows: 1fr;
    padding-block: var(--gap-separate);
    border-block-start: thin solid var(--hairline);
    overflow: hidden;
  }

  .team-frame .proposal > * {
    min-block-size: 0;
  }

  .team-frame .proposal:first-child {
    border-block-start: 0;
  }

  /*
   * The hold is 0.7s, the slide is 0.35s, the candidates queue's own timings: long
   * enough that a second click during the hold lands on the receipt, which does nothing.
   */
  @media (prefers-reduced-motion: no-preference) {
    .team-frame .proposal {
      transition: grid-template-rows 350ms ease 700ms;
    }

    .team-frame .proposal:has(.receipt) {
      grid-template-rows: 0fr;
    }
  }

  /*
   * Reduced motion: the row stays and nothing moves. Outside the query above,
   * `grid-template-rows` never changes and nothing transitions it, so the receipt shows
   * and the layout holds.
   */

  .team-frame .summary,
  .team-frame .proposed,
  .team-frame .meta {
    margin: 0 0 var(--gap-tight);
    overflow-wrap: anywhere;
  }

  .team-frame .parent {
    margin: 0 0 var(--gap-tight);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    overflow-wrap: anywhere;
  }

  .team-frame .meta {
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  .team-frame .proposal code {
    font-family: var(--font-mono);
    font-size: var(--type-mono-size);
  }

  /*
   * The neighbourhood, as an outline with guides: the siblings indented under the
   * parent, one level below each of them indented again, the same hairline guide the
   * Scope tree draws.
   */
  .team-frame .neighbourhood {
    margin: 0 0 var(--gap-related);
    padding: 0 0 0 var(--space-2);
    border-inline-start: thin solid var(--hairline);
    list-style: none;
  }

  .team-frame .neighbourhood--empty {
    margin: 0 0 var(--gap-related);
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  .team-frame .sibling + .sibling {
    margin-block-start: var(--gap-tight);
  }

  .team-frame .sibling__name {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .team-frame .below {
    margin: var(--gap-tight) 0 0;
    padding: 0 0 0 var(--space-2);
    border-inline-start: thin solid var(--hairline);
    color: var(--text-3);
    list-style: none;
  }

  .team-frame .below li {
    overflow-wrap: anywhere;
  }

  .team-frame .below--none {
    margin: var(--gap-tight) 0 0 var(--space-2);
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  /*
   * Danger's own treatment: text, a wash and a 3px inline-start line, never shared with
   * the disagreement hue.
   */
  .team-frame .warning {
    margin: var(--gap-related) 0;
    padding: var(--space-3) var(--space-4);
    border-inline-start: medium solid var(--danger-border);
    background: var(--danger-wash);
    color: var(--danger-text);
  }

  .team-frame .warning strong {
    color: inherit;
  }

  .team-frame .parked {
    margin: var(--gap-related) 0;
    font-size: var(--type-ui-size);
  }

  .team-frame .parked--none {
    color: var(--text-3);
  }

  .team-frame .parked__atoms {
    margin: var(--gap-tight) 0 0;
    padding: 0 0 0 var(--space-2);
    border-inline-start: thin solid var(--hairline);
    list-style: none;
  }

  .team-frame .parked__atom + .parked__atom {
    margin-block-start: var(--gap-related);
  }

  .team-frame .parked .claim {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /*
   * The two decisions, at full strength and never favoured: no accent, no fill, and
   * there is no disabled state anywhere here.
   */
  .team-frame .decisions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-related) var(--gap-separate);
    align-items: start;
    margin-block-start: var(--gap-separate);
  }

  .team-frame .decision {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-tight);
  }

  .team-frame .decision .hint {
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }

  /* A refusal on this one form: text and the danger ink, no box. */
  .team-frame .decisions .field-error {
    flex-basis: 100%;
    margin: 0;
    color: var(--danger-text);
    font-size: var(--type-ui-size);
  }

  /*
   * A decision's receipt: where the buttons were, one quiet line, announced. Text only,
   * never a button, so a second click on it does nothing.
   */
  .team-frame .decisions .receipt {
    margin: 0;
    color: var(--text-2);
    font-size: var(--type-ui-size);
  }

}

/* Resolution layout omits the Inbox column to make room for two claims. */
/* Stack claims below 46rem; show the tree beside the pair from 72rem. */

@layer components {
  /*
   * No Inbox row above the tree and no actions below the page: the grid is the Scope
   * line and the page.
   */
  .team-frame--no-column {
    grid-template-areas:
      "scope"
      "page";
  }

  /* From 72rem the tree stands beside the page, and folds into its line below. */
  @container team-page (width >= 72rem) {
    .team-frame--no-column {
      grid-template-columns: var(--frame-tree) minmax(0, 1fr);
      grid-template-areas: "scope page";
      column-gap: var(--frame-gap);
    }

    @supports selector(::details-content) {
      .team-frame--no-column .scope-fold > summary {
        display: none;
      }

      .team-frame--no-column .scope-fold::details-content {
        content-visibility: visible;
      }
    }

    .team-frame--no-column > .team-frame__tree {
      position: sticky;
      inset-block-start: var(--space-4);
      max-block-size: calc(var(--frame-rail-height) - 2 * var(--space-4));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-inline: var(--space-1);
    }
  }

  /*
   * The reminder row: a label in the machine-value column, the sentence beside it, a
   * hairline above and below. Text and never a button.
   */
  .team-frame .reminder {
    display: grid;
    grid-template-columns: var(--frame-gutter) minmax(0, 1fr);
    column-gap: var(--gap-separate);
    margin-block: var(--gap-separate);
    padding-block: var(--gap-related);
    border-block: thin solid var(--hairline);
  }

  .team-frame .reminder .reminder__label {
    margin: 0;
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: var(--type-gutter-size);
    font-weight: 400;
    line-height: var(--type-gutter-leading);
    letter-spacing: var(--type-gutter-tracking);
    text-align: end;
    overflow-wrap: anywhere;
  }

  .team-frame .reminder__text {
    min-inline-size: 0;
  }

  .team-frame .reminder__text p {
    margin: 0;
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .team-frame .reminder__text p + p {
    margin-block-start: var(--gap-tight);
    color: var(--text-3);
  }

  /*
   * The pair (C): two register entries under one line and one tint, the disagreement's
   * own treatment and nothing else's. Stacked by default, side by side from 46rem of
   * frame.
   */
  .team-frame .pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block: var(--gap-separate);
    border-block-start: medium solid var(--disagreement-border);
    background: var(--disagreement-wash);
  }

  .team-frame .pair__side {
    min-inline-size: 0;
    padding: var(--space-4);
  }

  .team-frame .pair__side + .pair__side {
    border-block-start: thin solid var(--hairline);
  }

  @container team-page (width >= 46rem) {
    .team-frame .pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-frame .pair__side + .pair__side {
      border-block-start: 0;
      border-inline-start: thin solid var(--hairline);
    }
  }

  /*
   * The meta row above each claim: the machine values in the gutter's own type, in the
   * order the gutter has them, wrapping and never cut.
   */
  .team-frame .pair__meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2);
    margin: 0 0 var(--gap-tight);
    padding: 0;
    list-style: none;
    color: var(--text-3);
    font-size: var(--type-gutter-size);
    line-height: var(--type-gutter-leading);
    letter-spacing: var(--type-gutter-tracking);
    font-variant-numeric: tabular-nums;
  }

  .team-frame .pair__meta > li {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  /* The dot follows the item it ends, so a wrapped row never starts on one. */
  .team-frame .pair__meta > li:not(:last-child)::after {
    content: "\00b7";
    margin-inline-start: var(--space-2);
  }

  .team-frame .pair__meta a {
    color: var(--text-3);
    text-decoration: none;
  }

  .team-frame .pair__meta a:hover {
    color: var(--text);
    text-decoration: underline;
  }

  .team-frame .pair__name {
    color: var(--disagreement-text);
    font-weight: 500;
  }

  .team-frame .pair__author {
    color: var(--text-2);
  }

  .team-frame .pair__claim {
    margin: 0;
    max-inline-size: var(--measure-prose);
    font-family: var(--font-serif);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    overflow-wrap: anywhere;
  }

  .team-frame .pair__claim a {
    color: var(--text);
    text-decoration: none;
  }

  .team-frame .pair__claim a:hover {
    text-decoration: underline;
  }

  .team-frame .pair__detail {
    margin: var(--gap-tight) 0 0;
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-family: var(--font-serif);
    font-size: var(--type-detail-size);
    line-height: var(--type-detail-leading);
    letter-spacing: var(--type-detail-tracking);
    overflow-wrap: anywhere;
  }

  /* What is gone is said in the interface's voice and not set as a claim. */
  .team-frame .pair__gone {
    margin: 0;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  /*
   * The four forms: heavier than the two claims above them, so they are held to one
   * hairline each and one column, then two from 54rem. Each keeps its label, what it
   * does, its winner control and its note.
   */
  .team-frame .resolve-forms {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-separate);
    margin-block: var(--gap-separate) 0;
  }

  @container team-page (width >= 54rem) {
    .team-frame .resolve-forms {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--gap-section);
    }
  }

  .team-frame .resolve-form {
    display: grid;
    align-content: start;
    gap: var(--gap-tight);
    min-inline-size: 0;
    padding-block-start: var(--gap-related);
    border-block-start: thin solid var(--hairline);
  }

  .team-frame .resolve-form .resolve-form__label {
    margin: 0;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }

  .team-frame .resolve-form__consequence {
    margin: 0;
    max-inline-size: var(--measure-prose);
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .team-frame .resolve-form__field {
    display: grid;
    gap: var(--gap-tight);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  .team-frame .resolve-form :is(select, input, textarea) {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .team-frame .case-resolution input[type="checkbox"] {
    inline-size: auto;
  }

  .team-frame .case-resolution fieldset {
    min-inline-size: 0;
    padding: 0;
    border: 0;
  }

  .team-frame .case-resolution__choice {
    display: flex;
    align-items: baseline;
    gap: var(--gap-tight);
    color: var(--text-2);
    font-size: var(--type-ui-size);
  }

  .team-frame .resolve-form textarea {
    resize: vertical;
  }

  .team-frame .resolve-form button {
    justify-self: start;
  }

  /* The way out of the page, two quiet links. */
  .team-frame .page-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-related) var(--gap-separate);
    margin-block: var(--gap-section) 0;
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }
}

/*
 * Contradiction queue uses shared pairs and the same receipt-collapse behavior as other
 * queues.
 */
@layer components {
  .team-frame .contradictions {
    margin: 0 0 var(--gap-separate);
    padding: 0;
    list-style: none;
  }

  /*
   * One explicit row track, exactly `.candidates >.memory-atom`'s technique:
   * `grid-template-rows` can transition to none where a measured height cannot, with no
   * script to measure one.
   */
  .team-frame .inbox-row {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding-block: var(--gap-separate);
    border-block-start: thin solid var(--hairline);
  }

  .team-frame .inbox-row > * {
    min-block-size: 0;
  }

  /*
   * The blast radius: quiet until there is something to read, and a `<details>` in the
   * same weight the Similarity Check's own uses.
   */
  .team-frame .reach {
    margin-block: var(--gap-related);
    font-size: var(--type-ui-size);
  }

  .team-frame .reach--none,
  .team-frame .reach--pending {
    color: var(--text-3);
  }

  .team-frame .reach summary {
    color: var(--accent-text);
    cursor: pointer;
  }

  .team-frame .dependents {
    margin: var(--gap-tight) 0 0;
    padding: 0 0 0 var(--space-4);
    border-inline-start: thin solid var(--hairline);
    list-style: none;
  }

  .team-frame .dependents > li + li {
    margin-block-start: var(--gap-related);
  }

  /* What is gone is said in the interface's own voice, never as a claim. */
  .team-frame .claim--deleted {
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
  }

  .team-frame .acted {
    margin-block-start: var(--gap-separate);
  }

  /* Hold receipts for 0.7s before a 0.35s collapse, consistently across queues. */
  @media (prefers-reduced-motion: no-preference) {
    .team-frame .inbox-row {
      transition: grid-template-rows 350ms ease 700ms;
    }

    .team-frame .inbox-row:has(.receipt) {
      grid-template-rows: 0fr;
    }
  }

  /*
   * Reduced motion: the row stays and nothing moves. Outside the query above,
   * `grid-template-rows` never changes and nothing transitions it.
   */
}

/* Scope Audience controls, rail badges and reader strips. */

@layer components {
  /*
   * The badge: the glyph and the count, in the rail count's own ink, beside the name.
   * The words a screen reader hears are `.scope__words`.
   */
  .team-frame .audience-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: var(--space-1);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /*
   * The strip: the register's own header row, a hairline under it and no box, since a
   * surface never holds content in this frame.
   */
  .team-frame .audience {
    margin-block-end: var(--gap-separate);
    padding-block-end: var(--gap-related);
    border-block-end: thin solid var(--hairline);
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .team-frame .audience p {
    margin: 0;
    max-inline-size: var(--measure-prose);
    overflow-wrap: anywhere;
  }

  .team-frame .audience__who .icon {
    margin-inline-end: var(--space-1);
    vertical-align: -0.125em;
  }

  .team-frame .audience-choice__lede {
    margin-block-end: var(--gap-tight);
  }

  .team-frame .audience__count {
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  .team-frame .audience__names {
    color: var(--text-3);
  }

  /*
   * Its two acts, Change who reads it and New Scope inside, side by side and wrapping at
   * the narrowest width.
   */
  .team-frame .audience__acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-block-start: var(--gap-tight);
  }

  /*
   * The choice: two options, each a radio beside its name and what it means, and the
   * pick list under them, drawn only once "Only these Members" is chosen.
   */
  .team-frame .audience-choice {
    min-inline-size: 0;
    margin: 0 0 var(--gap-related);
    padding: 0;
    border: 0;
  }

  .team-frame .audience-choice legend {
    padding: 0;
    margin-block-end: var(--gap-tight);
    color: var(--text);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }

  .team-frame .audience-choice__option {
    display: flex;
    align-items: baseline;
    gap: var(--gap-tight);
    padding-block: var(--space-2);
    border-block-end: thin solid var(--hairline);
    cursor: pointer;
  }

  .team-frame .audience-choice__option > span {
    display: grid;
  }

  .team-frame .audience-choice__name {
    color: var(--text);
  }

  .team-frame .audience-choice :is(input[type="radio"], input[type="checkbox"]) {
    padding: 0;
  }

  .team-frame .audience-choice__pick {
    display: none;
    margin: 0;
    padding: var(--space-2) 0 0 var(--space-5);
    columns: 2 12ch;
  }

  .team-frame .audience-choice:has(input[name="audience"][value="only"]:checked) .audience-choice__pick {
    display: block;
  }

  .team-frame .audience-choice__pick label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-block: var(--space-1);
    break-inside: avoid;
  }

  .team-frame .audience-choice__act {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-tight);
    margin: 0;
  }

  /*
   * Disabled until a choice is made: the one disabled button in the frame, and it says
   * why beside it rather than looking pressed.
   */
  .team-frame :is(.team-frame__page, .team-column) button[data-audience-submit]:disabled {
    border-color: var(--hairline);
    color: var(--text-3);
    cursor: not-allowed;
  }

  /*
   * Where no script runs, the disabled button would never enable: its `<noscript>` twin
   * stands in, and the radios are `required`.
   */
  @media (scripting: none) {
    .team-frame .audience-choice__act {
      display: none;
    }
  }

  /*
   * On the node queue the choice sits inside Approve's own form, which is a flex row: it
   * takes the whole line.
   */
  .team-frame .decision--approve {
    flex-basis: 100%;
    display: block;
  }
}

@layer components {
  .team-frame .candidate-editor {
    margin-block: var(--gap-related);
  }

  .team-frame .candidate-editor form {
    display: grid;
    gap: var(--gap-related);
    max-inline-size: var(--measure-prose);
    margin-block: var(--gap-related);
  }

  .team-frame .candidate-editor label {
    display: grid;
    gap: var(--gap-tight);
    color: var(--text-3);
  }

  .team-frame .candidate-editor :is(input, select, textarea) {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .team-frame .candidate-editor button {
    justify-self: start;
  }

  .team-frame .correction-history {
    margin-block: var(--gap-separate);
    max-inline-size: var(--measure-prose);
    overflow-wrap: anywhere;
  }

  .team-frame .correction-history li {
    margin-block: var(--gap-related);
  }
}

@layer components {
  .team-frame .automation-settings {
    display: grid;
    gap: var(--gap-related);
    max-width: var(--measure-prose);
  }
  .team-frame .automation-settings :is(h2, p, ol) { margin: 0; }
  .team-frame .automation-settings ol { list-style: decimal; padding-inline-start: var(--space-6); }
  .team-frame .automation-settings form { display: grid; gap: var(--gap-separate); justify-items: start; }
  .team-frame .automation-settings label { display: flex; gap: var(--gap-related); align-items: center; }
  .team-frame .automation-settings button {
    font: inherit;
    color: var(--ground);
    background: var(--control);
    border: thin solid var(--control);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
  }
}

/* Product workspace: shared navigation, readable records and task-focused controls. */
@layer components {
  .register:not(.register--landing) {
    --frame-width: 96rem;
    --frame-gap: 1.75rem;
    --frame-tree: 13rem;
    --frame-inbox: 14rem;
    --frame-control: 2.75rem;
    --frame-viewport: 100dvh;
    --frame-heading: 2.25rem;
  }
  .register:not(.register--landing) body {
    min-block-size: var(--frame-viewport);
    display: flex;
    flex-direction: column;
  }
  .register:not(.register--landing) .masthead {
    background: var(--ground);
  }
  .register:not(.register--landing) .masthead__inner { align-items: center; }
  .register:not(.register--landing) .masthead__actions { align-items: center; }
  .register:not(.register--landing) .masthead__actions > a {
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    border-radius: var(--radius);
  }
  .register:not(.register--landing) .masthead__actions > a:hover { background: var(--raise); }
  .register:not(.register--landing) .colophon { margin-block-start: auto; }
  .register:not(.register--landing) .page { inline-size: 100%; }
  .register:not(.register--landing) :is(a, button, summary, input, select, textarea):focus-visible {
    outline: medium solid var(--accent-border);
    outline-offset: 0.2em;
  }
  .register:not(.register--landing) :is(input, select, textarea) { accent-color: var(--accent-text); }
  .register:not(.register--landing) :is(button, .action-link) { touch-action: manipulation; }
  .register:not(.register--landing) :is(h1, h2, h3) { text-wrap: balance; }
  .register:not(.register--landing) .page h1 {
    font-family: var(--font-sans);
    font-size: var(--frame-heading);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin-block: 0 var(--space-3);
    overflow-wrap: anywhere;
  }
  .register:not(.register--landing) .page-heading { margin-block-end: var(--space-6); }
  .register:not(.register--landing) .page-heading .lede { margin-block: 0; color: var(--text-2); }
  .page--team:has(> .workspace-nav) { padding-block-start: 0; }
  .workspace-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    margin: 0 var(--page-inset) var(--space-6);
    padding-block: var(--space-3);
    border-block-end: thin solid var(--hairline);
  }
  .workspace-nav__team { font-weight: 600; overflow-wrap: anywhere; }
  .workspace-nav > div { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .workspace-nav a {
    padding: var(--space-2) var(--space-4);
    color: var(--text-2);
    font-size: var(--type-ui-size);
    text-decoration: none;
    border-radius: var(--radius);
  }
  .workspace-nav a:hover { background: var(--raise); color: var(--text); }
  .workspace-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-text); }
  .team-frame > .sidebar {
    padding: var(--space-4);
    background: var(--raise);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
  }
  .team-frame .sidebar__heading {
    font-size: var(--type-ui-size);
    letter-spacing: var(--type-ui-tracking);
    text-transform: none;
    color: var(--text-2);
  }
  .team-frame .rail-help {
    margin-block: var(--space-3);
    color: var(--text-3);
    font-size: var(--type-ui-size);
  }
  .team-frame .rail-help summary { color: var(--text-3); font-weight: 400; }
  .team-frame .rail-help[open] summary { margin-block-end: var(--space-3); }
  .team-frame .scope__row { padding-block: var(--space-2); }
  .team-frame .scope__row:has([aria-current="page"]) { background: var(--accent-wash); border-radius: var(--radius); }
  .team-frame .team-selector a {
    display: block;
    padding-block: var(--space-2);
    text-decoration: none;
  }
  .team-frame .team-selector [aria-current="page"] { color: var(--text); font-weight: 600; }
  .team-frame .rail__new a { display: inline-block; padding-block: var(--space-2); }
  .team-frame .inbox-aside,
  .team-frame .queue-filters {
    padding: var(--space-4);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: var(--raise);
  }
  .team-frame .inbox-summary a { text-decoration: none; padding-block: var(--space-1); }
  .team-frame .inbox-summary a:hover { text-decoration: underline; }
  .team-frame .inbox-summary .hint { margin-block-start: var(--space-1); }
  .team-frame :is(.inbox-fold, .queue-fold) { inline-size: 100%; }
  .team-frame :is(.inbox-fold, .queue-fold) > summary { color: var(--text-2); font-size: var(--type-ui-size); }
  .team-frame :is(.inbox-fold, .queue-fold)[open] > summary { margin-block-end: var(--space-3); }
  .team-frame .team-actions { margin-block-start: var(--space-5); }
  .team-frame .team-actions > p:has(a[href$="/members"], a[href$="/settings"], a[href$="/logs"]) { display: none; }
  .team-frame .team-connect {
    padding-block: var(--space-3);
    border-block-end: thin solid var(--hairline);
  }
  .team-frame .team-connect summary { color: var(--text-2); }
  .team-frame .team-connect h2 { margin-block-start: var(--space-4); }
  .team-frame .team-connect[open] { padding-block-end: var(--space-4); }
  .team-frame form.filters {
    padding: var(--space-4);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: var(--raise);
    gap: var(--space-3);
    margin-block: var(--space-5);
  }
  .team-frame form.filters .filters__search { flex-basis: 100%; }
  .team-frame form.filters label:not(.filters__search) { flex: 1 1 12ch; min-inline-size: 0; }
  .team-frame form.filters :is(input, select) { inline-size: 100%; min-inline-size: 0; }
  .team-frame :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea),
  .register.register--passage .page input:not([type="checkbox"], [type="radio"], [type="hidden"]),
  .register.register--passage .page :is(select, textarea) {
    padding: var(--space-3);
    min-block-size: var(--frame-control);
    max-inline-size: 100%;
    background: var(--ground);
    border-radius: var(--radius);
  }
  .team-frame input:is([type="checkbox"], [type="radio"]) {
    flex: 0 0 auto;
    inline-size: 1.2em;
    block-size: 1.2em;
  }
  .team-frame :is(.team-frame__page, .team-column) button,
  .register.register--passage .page button,
  .register:not(.register--landing) .action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--frame-control);
    padding: var(--space-2) var(--space-4);
    border: thin solid var(--control);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    font-weight: 500;
    text-decoration: none;
    background: var(--ground);
    color: var(--text);
  }
  .team-frame :is(.team-frame__page, .team-column) button:hover,
  .register.register--passage .page button:hover { background: var(--raise); border-color: var(--text-2); }
  .team-frame :is(.team-frame__page, .team-column) button.button--destructive,
  .register.register--passage .page button.button--destructive { color: var(--danger-text); border-color: var(--danger-border); }
  .team-frame .settings-save button,
  .register:not(.register--landing) .action-link { background: var(--accent-text); color: var(--ground); border-color: var(--accent-text); }
  .team-frame .settings-save button:hover,
  .register:not(.register--landing) .action-link:hover { background: var(--text); color: var(--ground); }
  .team-frame .memory-atom {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    margin-block-end: var(--space-4);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: var(--ground);
  }
  .team-frame .memory-atom:focus-within { border-color: var(--accent-border); }
  .team-frame .memory-atom--refused { border-inline-start: medium solid var(--danger-border); }
  .team-frame .memory-atom__gutter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    text-align: start;
    padding-block-end: var(--space-3);
    border-block-end: thin solid var(--hairline);
  }
  .team-frame .memory-atom__gutter > li + li { margin: 0; }
  .team-frame .memory-atom__gutter > li:has(.icon) { flex-direction: row-reverse; }
  .team-frame .memory-atom__gutter > li { max-inline-size: 100%; }
  .team-frame .memory-atom__detail { font-family: var(--font-sans); line-height: 1.7; }
  .team-frame .memory-atom__claim { line-height: 1.6; }
  .team-frame .bar { margin-block: var(--space-5); }
  .team-frame .verdicts { padding-block-start: var(--space-4); border-block-start: thin solid var(--hairline); }
  .team-frame .verdict--discard > summary { min-block-size: var(--frame-control); padding: var(--space-2) var(--space-4); }
  .team-frame .candidate-tools { margin-block: var(--space-3); font-size: var(--type-ui-size); }
  .team-frame .candidate-tools > summary { color: var(--text-2); }
  .team-frame .candidate-tools form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding-block: var(--space-3); }
  .team-frame .candidate-tools label { display: grid; gap: var(--space-2); flex: 1; min-inline-size: 0; }
  .team-frame .resolve-form {
    padding: var(--space-5);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: var(--raise);
  }
  .team-frame .pair { gap: var(--space-5); }
  .team-frame .pair__side { padding: var(--space-4); }
  .team-frame .members { display: grid; gap: var(--space-4); }
  .team-frame .member-row {
    padding: var(--space-5);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: var(--ground);
  }
  .team-frame .member-row > p:first-child { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .team-frame .member-row > p { margin-block: 0 var(--space-3); }
  .team-frame .personal-sections { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-6); }
  .team-frame .personal-compose { padding: var(--space-4); margin-block: var(--space-3); border: thin solid var(--hairline); border-radius: var(--radius); background: var(--raise); }
  .team-frame .personal-compose[open] > summary { margin-block-end: var(--space-4); }
  .team-frame .personal-compose > summary { color: var(--accent-text); }
  .team-frame .member-row > p:first-child strong { font-size: var(--type-claim-size); }
  .team-frame .member-tokens { margin-block-start: var(--space-4); }
  .team-frame .log-entry { border-inline-start: thin solid var(--hairline); padding-inline-start: var(--space-5); }
  .team-frame .note--done { padding: var(--space-4); background: var(--status-wash); border-inline-start: medium solid var(--status-border); }
  .team-frame .settings-form { display: grid; gap: var(--space-5); }
  .team-frame .settings-section {
    inline-size: 100%;
    max-inline-size: none;
    padding: var(--space-5);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: var(--ground);
  }
  .team-frame .settings-section header { padding-block-end: var(--space-4); border-block-end: thin solid var(--hairline); margin-block-end: var(--space-4); }
  .team-frame .settings-section h2 { margin: 0 0 var(--space-2); font-family: var(--font-sans); }
  .team-frame .settings-section h3 { margin-block: var(--space-5) var(--space-2); }
  .team-frame .settings-section p { color: var(--text-2); font-size: var(--type-ui-size); }
  .team-frame .settings-section header p { margin: 0; }
  .team-frame .setting-row { margin: 0; border-block-end: thin solid var(--hairline); }
  .team-frame .setting-switch { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); color: var(--text); cursor: pointer; }
  .team-frame .settings-explanation { margin-block-start: var(--space-4); }
  .team-frame .settings-explanation > summary { color: var(--accent-text); }
  .team-frame .settings-explanation ol { list-style: decimal; padding-inline-start: var(--space-5); color: var(--text-2); }
  .team-frame .settings-explanation li { margin-block: var(--space-2); }
  .team-frame .settings-frequency { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-5); }
  .team-frame .settings-frequency label { flex: 1 1 14ch; display: grid; gap: var(--space-2); min-inline-size: 0; font-size: var(--type-ui-size); }
  .team-frame .settings-frequency input { inline-size: 100%; }
  .team-frame .settings-save { position: sticky; inset-block-end: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border: thin solid var(--hairline); background: var(--ground); z-index: 2; }
  .team-frame .settings-save span { color: var(--text-3); font-size: var(--type-ui-size); }
  .register.register--passage .page { padding-block: var(--space-7); }
  .register.register--passage .page h2 { font-family: var(--font-sans); font-size: var(--type-title-size); font-weight: 500; letter-spacing: var(--type-title-tracking); }
  .register.register--passage .workspace-list { display: grid; gap: var(--space-3); margin-block: var(--space-6); }
  .register.register--passage .workspace-list > li { position: relative; padding: var(--space-5); border: thin solid var(--hairline); border-radius: var(--radius); background: var(--ground); gap: var(--space-3); }
  .register.register--passage .workspace-list > li:hover { border-color: var(--accent-border); background: var(--accent-wash); }
  .register.register--passage .workspace-list > li > a { font-family: var(--font-sans); color: var(--text); font-weight: 500; text-decoration: none; }
  .register.register--passage .workspace-list > li > a::after { content: ""; position: absolute; inset: 0; }
  .register.register--passage .workspace-list > li:focus-within { outline: medium solid var(--accent-border); outline-offset: 0.2em; }
  .register.register--passage .teams-home__create,
  .register.register--passage .account-personal { padding: var(--space-5); background: var(--raise); border: thin solid var(--hairline); border-radius: var(--radius); margin-block: var(--space-6); }
  .register.register--passage .teams-home__create h2,
  .register.register--passage .account-personal h2 { margin-block: 0 var(--space-3); }
  .register.register--passage .account-danger { margin-block: var(--space-7); padding-block: var(--space-5); border-block: thin solid var(--danger-border); }
  .register.register--passage .account-danger > summary { color: var(--danger-text); font-weight: 500; }
  .register.register--passage .account-danger[open] > summary { margin-block-end: var(--space-5); }
  @container team-page (width >= 54rem) {
    .team-frame:not(.team-frame--no-column) > .sidebar { position: sticky; inset-block-start: var(--space-5); }
    @supports selector(::details-content) {
      .team-frame :is(.inbox-fold, .queue-fold)::details-content { content-visibility: visible; }
      .team-frame :is(.inbox-fold, .queue-fold) > summary { display: none; }
    }
  }
  @container team-page (width < 54rem) {
    .workspace-nav { gap: var(--space-2); }
    .workspace-nav__team { flex-basis: 100%; }
    .workspace-nav a { padding-inline: var(--space-2); }
    .team-frame .memory-atom { padding: var(--space-4); }
    .team-frame .scope-fold__line { padding-block: var(--space-2); }
  }
  @container team-page (width < 40rem) {
    .team-frame { --page-inset: 1rem; }
    .workspace-nav { margin-inline: var(--space-4); margin-block-end: var(--space-4); }
    .workspace-nav a { padding-inline: var(--space-1); }
    .team-frame .settings-section { padding: var(--space-4); }
    .team-frame .bar { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .team-frame .bar__label { text-align: start; }
  }
  @media (width < 40rem) {
    .register:not(.register--landing) .masthead__inner { gap: var(--space-3); padding-block: var(--space-3); }
    .register:not(.register--landing) .masthead__actions { gap: var(--space-2); }
    .register:not(.register--landing) .masthead__actions > a { padding-inline: var(--space-1); }
    .register:not(.register--landing) .masthead__who { flex-basis: 100%; }
    .register:not(.register--landing) .masthead__tagline { display: none; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .register:not(.register--landing) :is(button, .action-link, .workspace-nav a, .workspace-list > li) { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
    .register:not(.register--landing) :is(button, .action-link):active { transform: translateY(0.08em); }
    .register:not(.register--landing) .page-heading { animation: workspace-arrive 250ms ease-out both; }
    @keyframes workspace-arrive { from { opacity: 0.6; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }
  }
}

@layer components {
  .team-frame .memory-atom__gutter { font-size: var(--type-ui-size); }
  .team-frame .memory-atom__gutter > li:has(.icon) { gap: var(--space-1); }
  .team-frame .memory-atom__gutter .icon { margin-inline: 0; }
  .team-frame .setting-switch input[role="switch"] {
    appearance: none;
    position: relative;
    inline-size: 2.5em;
    block-size: 1.5em;
    padding: 0.15em;
    margin: 0;
    border: thin solid var(--control);
    border-radius: 2em;
    background: var(--raise);
    cursor: pointer;
  }
  .team-frame .setting-switch input[role="switch"]::before {
    content: "";
    display: block;
    inline-size: 1.05em;
    block-size: 1.05em;
    border-radius: 50%;
    background: var(--text-3);
  }
  .team-frame .setting-switch input[role="switch"]:checked { background: var(--accent-text); border-color: var(--accent-text); }
  .team-frame .setting-switch input[role="switch"]:checked::before { transform: translateX(1em); background: var(--ground); }
  .team-frame .member-tools { margin-block-start: var(--space-4); border-block-start: thin solid var(--hairline); padding-block-start: var(--space-3); }
  .team-frame .member-tools > summary { color: var(--accent-text); font-size: var(--type-ui-size); }
  .team-frame .member-tools[open] > summary { margin-block-end: var(--space-4); }
  .team-frame .team-rename { margin-block: var(--space-7); padding-block-start: var(--space-5); border-block-start: thin solid var(--hairline); }
  .team-frame .team-rename form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
  .team-frame .team-rename label { display: grid; gap: var(--space-2); flex: 1; min-inline-size: 0; }
  .team-frame .team-rename input { inline-size: 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .team-frame .setting-switch input[role="switch"]::before { transition: transform 160ms ease; }
  }
  @media (forced-colors: active) {
    .team-frame .setting-switch input[role="switch"] { appearance: auto; }
    .team-frame .setting-switch input[role="switch"]::before { display: none; }
  }
}

@layer components {
  .team-frame .queue-filters .filters { gap: var(--space-1); margin-block-start: 0; }
  .team-frame .queue-filters .filters a { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-2); border-radius: var(--radius); text-decoration: none; }
  .team-frame .queue-filters .filters a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-text); }
  .team-frame .memory-atom[tabindex]:focus { outline: medium solid var(--accent-border); outline-offset: 0.15em; }
  @container team-page (width >= 72rem) {
    .team-frame .queue-filters .filters { display: grid; }
  }
}

/* Passage frame: one centered content column without a tree or Inbox. */
/*
 * Use --frame-column for content; --frame-width keeps the masthead and colophon aligned
 * to the full page.
 */


@layer components {
  /*
   * Both classes, so this beats the Team frame's `.register` by specificity and not by
   * sitting further down the file.
   */
  .register.register--passage {
    --frame-column: 44rem;
  }

  .page--passage {
    max-inline-size: var(--frame-column);
    padding-inline: var(--page-inset);
    padding-block: var(--space-6) var(--space-7);
  }

  /* The page's own title, in the serif the register sets a name in. */
  .page--passage > h1 {
    margin: 0 0 var(--gap-related);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--type-page-size);
    line-height: var(--type-page-leading);
    letter-spacing: var(--type-page-tracking);
    overflow-wrap: anywhere;
  }

  /*
   * The lede is the page: on a passage page it is the whole of what happened, so it
   * takes the full ink and everything after it is the quieter second text.
   */
  .page--passage p {
    margin: 0 0 var(--gap-separate);
    color: var(--text-2);
    overflow-wrap: anywhere;
  }

  .page--passage .lede {
    color: var(--text);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }

  .page--passage a {
    color: var(--accent-text);
  }

  .page--passage code {
    font-family: var(--font-mono);
    font-size: var(--type-mono-size);
    line-height: var(--type-mono-leading);
    letter-spacing: var(--type-mono-tracking);
  }

  /*
   * The teams, as a register: one hairline between them and no boxes. The row wraps
   * rather than overflowing, so a long name takes the lines it needs and the word beside
   * it drops under it.
   */
  .page--passage .teams {
    margin: 0 0 var(--gap-separate);
    padding: 0;
    list-style: none;
  }

  .page--passage .teams > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-tight) var(--gap-related);
    padding-block: var(--gap-related);
    border-block-start: thin solid var(--hairline);
    overflow-wrap: anywhere;
  }

  .page--passage .teams > li > a {
    font-family: var(--font-serif);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    min-inline-size: 0;
  }

  /* Team Admin is a word and not a badge: no box, no colour of its own. */
  .page--passage .teams > li > span {
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  /* The forms a passage page carries: the consent screen and the device pages. */
  .page--passage .hint {
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  .page--passage strong {
    color: var(--text);
    font-weight: 500;
  }

  /* The code the terminal printed, in the mono the code is read in. */
  .page--passage .user-code code {
    color: var(--text);
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
  }

  .page--passage button {
    padding: var(--space-1) var(--space-3);
    border: thin solid var(--control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    cursor: pointer;
  }

  .page--passage button:hover {
    border-color: var(--text-3);
  }

  .page--passage input:not([type="radio"], [type="hidden"]) {
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--space-1) var(--space-3);
    border: thin solid var(--control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--type-field-size);
    line-height: var(--type-field-leading);
    letter-spacing: var(--type-field-tracking);
  }

  .page--passage label {
    display: grid;
    gap: var(--gap-tight);
    color: var(--text-2);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  /*
   * The team chooser, which is a fieldset over the teams list. Each row is a radio
   * beside the name in the serif a team is named in, on the list's own hairlines.
   */
  .page--passage fieldset {
    min-inline-size: 0;
    margin: 0 0 var(--gap-separate);
    padding: 0;
    border: 0;
  }

  .page--passage legend {
    padding: 0;
    margin-block-end: var(--gap-tight);
    color: var(--text);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }

  .page--passage fieldset .teams {
    margin: 0;
  }

  .page--passage .teams label {
    display: flex;
    align-items: baseline;
    gap: var(--gap-related);
    min-inline-size: 0;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    cursor: pointer;
  }

  /* Team creation, the token panel and the invite pages. */

  /*
   * The sections of the token panel. The panel is four things in a row (the token, two
   * files, the install, the check), so each takes the serif title the Team frame gives
   * its own sections, with the section gap above.
   */
  .page--passage h2 {
    margin: var(--gap-section) 0 var(--gap-tight);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
    overflow-wrap: anywhere;
  }

  /* One block a person copies: a token, a link, a file, a command. */
  .page--passage pre {
    margin: 0 0 var(--gap-separate);
    padding: var(--space-3);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--type-mono-size);
    line-height: var(--type-mono-leading);
    letter-spacing: var(--type-mono-tracking);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: all;
  }

  /* Public setup instructions share the passage frame and its copyable code blocks. */
  .page--passage .setup-back {
    margin-block-end: var(--gap-separate);
  }

  .page--passage .setup-clients {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-related);
    padding-block: var(--space-4);
    border-block: thin solid var(--hairline);
  }

  .page--passage .setup-clients a {
    padding-block: var(--space-2);
    font-weight: 500;
  }

  .page--passage .setup-guide section {
    scroll-margin-block-start: var(--space-6);
  }

  .page--passage .setup-steps {
    padding-inline-start: var(--space-5);
    margin: var(--gap-separate) 0;
    list-style: decimal;
  }

  .page--passage .setup-steps > li {
    padding-inline-start: var(--space-2);
    margin-block-end: var(--gap-separate);
  }

  .page--passage .setup-steps > li::marker {
    color: var(--text-3);
    font-family: var(--font-mono);
  }

  .page--passage .setup-guide h3 {
    margin: 0 0 var(--gap-related);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
    font-weight: 500;
  }

  .page--passage .setup-guide details {
    margin-block-end: var(--gap-related);
    padding: var(--space-3);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
  }

  .page--passage .setup-guide summary {
    color: var(--accent-text);
    overflow-wrap: anywhere;
  }

  .page--passage .setup-guide details[open] > summary {
    margin-block-end: var(--gap-related);
  }

  .page--passage .setup-guide details > :last-child {
    margin-block-end: 0;
  }

  .page--passage .setup-reference {
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }

  /*
   * The line that introduces a block sits close to it, in the gap of related things;
   * every other paragraph keeps the gap between separate ones.
   */
  .page--passage p.lead-in {
    margin-block-end: var(--gap-related);
  }

  /*
   * The standard refusal, in the passage column: text, a wash and a 3px line on the
   * inline start, the way the Team frame draws it.
   */
  .page--passage .note {
    margin: 0 0 var(--gap-separate);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
  }

  .page--passage .note--refused {
    border-inline-start: medium solid var(--danger-border);
    background: var(--danger-wash);
    color: var(--danger-text);
  }

  .page--passage .note--refused strong {
    color: inherit;
  }

  /*
   * The form of creating a team: its fields one under another with the air of a related
   * group, and the one button at the start of the line, never stretched across it.
   */
  .page--passage .create-team {
    display: grid;
    gap: var(--gap-related);
    margin: 0 0 var(--gap-separate);
  }

  .page--passage .create-team .hint {
    margin: 0;
  }

  .page--passage .create-team button {
    justify-self: start;
  }

  /*
   * Your account: what deleting it does, team by team, on the teams list's own
   * hairlines.
   */
  .page--passage .account-teams > li > p {
    flex-basis: 100%;
    margin: 0;
  }

  /*
   * The form that deletes it: the field and its button one under another, the button at
   * the start of the line, never stretched across it.
   */
  .page--passage .account-delete {
    display: grid;
    gap: var(--gap-related);
    margin: 0 0 var(--gap-separate);
  }

  .page--passage .account-delete button {
    justify-self: start;
  }

  /*
   * The email to type is the value about to disappear. It is a `<code>`, so it takes the
   * passage frame's mono; this gives it the full ink, since it is what the field asks
   * for and not a hint beside it.
   */
  .page--passage .account-email {
    color: var(--text);
  }

  .page--passage button.button--destructive {
    border-color: var(--danger-border);
    color: var(--danger-text);
  }
}

/* ------------------------------------------------------------------------- */
/* The landing is a continuous canvas. Its local dimensions and palette do not
   change the signed-in application. Motion progressively enhances readable HTML. */
@layer components {
  .register.register--landing {
    --frame-width: 86rem;
    --frame-display: clamp(3.3rem, 5.7vw, 5.8rem);
    --frame-heading: clamp(2.4rem, 3.7vw, 4rem);
    --frame-section: 8rem;
    --frame-corner: 1.25rem;
    --frame-core-type: 1.55rem;
    --frame-sticky: 7rem;
    --frame-step: 76vh;
    --frame-story-stage: 30rem;
    --frame-story-card: 22rem;
    --frame-orbit: 28rem;
    --frame-scroll-range: 80vh;
    --frame-network-caption: 6rem;
    --page-inset: 2rem;
    background: var(--ground);
    color: var(--text);
  }
  .register--landing .masthead {
    border: 0;
    background: var(--ground);
  }
  .register--landing .masthead__inner {
    padding-block: var(--space-5);
  }
  .register--landing .masthead__tagline {
    color: var(--text-3);
  }
  .register--landing .masthead__name {
    color: var(--text);
  }
  .register--landing .masthead a {
    color: var(--text-2);
  }
  .page--landing {
    max-inline-size: none;
    padding: 0;
    overflow: clip;
  }
  .page--landing .landing-section {
    padding-inline: var(--page-inset);
    position: relative;
  }
  .page--landing .band__inner {
    max-inline-size: var(--frame-width);
    margin-inline: auto;
  }
  .page--landing h1,
  .page--landing h2,
  .page--landing h3 {
    font-family: var(--font-sans);
    font-weight: 500;
    margin: 0;
    color: var(--text);
  }
  .page--landing h1 {
    font-size: var(--frame-display);
    letter-spacing: -0.065em;
    line-height: 1.02;
  }
  .page--landing h2 {
    font-size: var(--frame-heading);
    letter-spacing: -0.05em;
    line-height: 1.08;
    text-wrap: balance;
  }
  .page--landing h3 {
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
  }
  .page--landing p {
    margin: 0;
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
  }
  .page--landing button,
  .page--landing summary,
  .page--landing label,
  .page--landing a {
    font-family: var(--font-sans);
  }
  .page--landing a {
    color: var(--accent-text);
  }
  .page--landing .eyebrow {
    color: var(--accent-text);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
    margin-block-end: var(--gap-section);
  }
  .page--landing :is(a, button, summary, label):focus-visible {
    outline: medium solid var(--accent-text);
    outline-offset: 0.3em;
  }
  .page--landing .hero {
    padding-block-start: var(--space-6);
  }
  .page--landing .hero__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: var(--gap-related);
  }
  .page--landing .hero__copy {
    position: relative;
    z-index: 1;
    padding-block: var(--space-7);
  }
  .page--landing .hero__pain {
    max-inline-size: 39ch;
    margin-block: var(--gap-section);
  }
  .page--landing .hero__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-separate);
    flex-wrap: wrap;
  }
  .page--landing .landing-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-section);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    color: var(--ground);
    background: var(--accent-text);
    text-decoration: none;
    font-weight: 500;
  }
  .page--landing .landing-cta span {
    font-size: 1.35em;
    line-height: 1;
  }
  .page--landing .landing-cta:hover {
    background: var(--text);
  }
  .page--landing .text-link {
    text-decoration: none;
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }
  .page--landing .text-link:hover {
    text-decoration: underline;
  }
  .page--landing .hero__compatibility {
    color: var(--text-3);
    margin-block-start: var(--gap-section);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .hero__compatibility span {
    padding-inline: var(--space-3);
    color: var(--text-3);
  }
  .page--landing .hero__visual {
    min-inline-size: 0;
  }
  .page--landing .constellation {
    position: relative;
    aspect-ratio: 700 / 520;
    isolation: isolate;
  }
  .page--landing .network-wires {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }
  .page--landing .network-tracks {
    fill: none;
    stroke: var(--control);
    stroke-width: 1.2;
  }
  .page--landing .network-signals {
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-dasharray: 18 480;
  }
  .page--landing .constellation[data-selected] .network-signals path {
    opacity: 0.2;
  }
  .page--landing
    .constellation[data-selected="a"]
    .network-signals
    path:nth-child(1),
  .page--landing
    .constellation[data-selected="b"]
    .network-signals
    path:nth-child(2),
  .page--landing
    .constellation[data-selected="c"]
    .network-signals
    path:nth-child(3),
  .page--landing
    .constellation[data-selected="d"]
    .network-signals
    path:nth-child(4) {
    opacity: 1;
  }
  .page--landing .network-orbit {
    fill: none;
    stroke: var(--accent-border);
    stroke-width: 0.8;
    stroke-dasharray: 3 9;
    transform-origin: center;
    transform-box: fill-box;
  }
  .page--landing .network-orbit--outer {
    stroke: var(--hairline);
    stroke-dasharray: 1 9;
  }
  .page--landing .agent-node {
    text-align: start;
    cursor: pointer;
    position: absolute;
    inline-size: 27%;
    padding: var(--space-3) var(--space-4);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--raise), var(--ground));
    font-family: var(--font-sans);
  }
  .page--landing .agent-node:hover,
  .page--landing .agent-node[aria-pressed="true"] {
    border-color: var(--accent-border);
    background: var(--accent-wash);
  }
  .page--landing .agent-node[aria-pressed="true"] strong {
    color: var(--accent-text);
  }
  .page--landing .agent-node > span {
    display: block;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .agent-node .agent-node__person {
    color: var(--accent-text);
  }
  .page--landing .agent-node strong {
    display: block;
    color: var(--text);
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    font-weight: 500;
    margin-block: var(--gap-tight);
  }
  .page--landing .agent-node--a {
    inset: 6% auto auto 3%;
  }
  .page--landing .agent-node--b {
    inset: 6% 3% auto auto;
  }
  .page--landing .agent-node--c {
    inset: auto auto 4% 3%;
  }
  .page--landing .agent-node--d {
    inset: auto 3% 4% auto;
  }
  .page--landing .memory-core {
    position: absolute;
    inset: 48% auto auto 50%;
    transform: translate(-50%, -50%);
    inline-size: 25%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-tight);
    border-radius: 50%;
    background: radial-gradient(
      circle at 35% 20%,
      var(--accent-wash),
      var(--ground) 90%
    );
    border: thin solid var(--accent-border);
    outline: thin solid var(--hairline);
    outline-offset: 0.5em;
    text-align: center;
    filter: drop-shadow(0 0 2em var(--accent-wash));
    font-family: var(--font-sans);
  }
  .page--landing .memory-core .masthead__mark {
    color: var(--accent-text);
    inline-size: 1.8em;
    block-size: 1.8em;
  }
  .page--landing .memory-core strong {
    color: var(--text);
    font-size: var(--frame-core-type);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .page--landing .memory-core > span {
    color: var(--accent-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .network-message {
    position: absolute;
    inset: auto 30% 5%;
    text-align: center;
    font-family: var(--font-sans);
  }
  .page--landing .network-message span {
    display: block;
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .network-message strong {
    display: block;
    margin-block-start: var(--gap-related);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
    font-weight: 500;
    color: var(--accent-text);
  }
  .page--landing .network-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-related);
    margin-block-start: var(--gap-separate);
    padding-inline: var(--space-3);
    font-family: var(--font-sans);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .motion-toggle {
    border: 0;
    padding: var(--space-2);
    color: var(--text-2);
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    white-space: nowrap;
  }
  .page--landing .hero__statement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-section);
    padding-block: var(--space-7);
    margin-block-start: var(--gap-section);
    border-block-end: thin solid var(--hairline);
  }
  .page--landing .hero__statement p {
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
    color: var(--text);
  }
  .page--landing .hero__statement p span {
    color: var(--text-3);
  }
  .page--landing .hero__statement a {
    display: grid;
    place-items: center;
    inline-size: 2.5em;
    block-size: 2.5em;
    border: thin solid var(--control);
    border-radius: 50%;
    text-decoration: none;
  }

  /* A single sticky scene evolves alongside the three narrative steps. */
  .page--landing .story-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--gap-section);
    align-items: start;
    padding-block: var(--space-7);
  }
  .page--landing .story-step {
    min-block-size: var(--frame-step);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-block: var(--space-7);
  }
  .page--landing .story-index {
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: var(--type-mono-size);
    line-height: var(--type-mono-leading);
    letter-spacing: var(--type-mono-tracking);
    margin-block-end: var(--gap-section);
  }
  .page--landing .story-step h2 {
    margin-block-end: var(--gap-section);
  }
  .page--landing .story-step p {
    max-inline-size: 40ch;
  }
  .page--landing .story-step .story-aside {
    margin-block-start: var(--gap-separate);
    color: var(--text-3);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }
  .page--landing .story-board {
    position: sticky;
    inset-block-start: var(--frame-sticky);
    margin-block: var(--gap-section);
    min-inline-size: 0;
  }
  .page--landing:not(.motion-ready) .story-board {
    position: static;
  }
  .page--landing .story-board__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-related);
    justify-content: space-between;
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .story-stage {
    display: grid;
    place-items: center;
    position: relative;
    min-block-size: var(--frame-story-stage);
  }
  .page--landing .story-halo {
    position: absolute;
    inline-size: 85%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: thin solid var(--hairline);
    background: radial-gradient(circle, var(--accent-wash), transparent 67%);
  }
  .page--landing .story-halo::before,
  .page--landing .story-halo::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: thin dashed var(--accent-border);
    border-radius: 50%;
  }
  .page--landing .story-halo::after {
    inset: -10%;
    border-color: var(--hairline);
  }
  .page--landing .story-card {
    position: relative;
    inline-size: min(85%, var(--frame-story-card));
    background: var(--raise);
    border: thin solid var(--control);
    border-radius: var(--frame-corner);
    padding: var(--space-6);
    margin-block: var(--gap-tight);
  }
  .page--landing .story-card[aria-hidden="true"] > * { visibility: hidden; }
  .page--landing .story-card p {
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
    color: var(--text);
    margin-block: var(--gap-section);
  }
  .page--landing .story-card__label,
  .page--landing .story-status {
    font-family: var(--font-sans);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .story-status {
    color: var(--accent-text);
  }
  .page--landing .story-card--review {
    border-color: var(--accent-border);
    background: linear-gradient(135deg, var(--accent-wash), var(--raise));
  }
  .page--landing .story-checks {
    display: flex;
    flex-direction: column;
    gap: var(--gap-tight);
    color: var(--accent-text);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .story-checks span::before {
    content: "✓";
    margin-inline-end: var(--gap-tight);
  }
  .page--landing .story-receivers {
    display: flex;
    justify-content: center;
    gap: var(--gap-related);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .story-receivers span {
    padding: var(--space-3) var(--space-4);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-3);
  }
  .page--landing .story-progress {
    display: flex;
    gap: var(--gap-tight);
    justify-content: center;
    margin-block-start: var(--gap-section);
  }
  .page--landing .story-progress i {
    inline-size: 2em;
    block-size: 0.15em;
    background: var(--hairline);
  }
  .page--landing .story-board[data-step="0"] .story-progress i:first-child,
  .page--landing .story-board[data-step="1"] .story-progress i:nth-child(2),
  .page--landing .story-board[data-step="2"] .story-progress i:last-child {
    background: var(--accent-text);
  }
  .page--landing.story-enhanced .story-stage {
    perspective: var(--frame-scroll-range);
  }
  .page--landing.story-enhanced .story-card {
    grid-area: 1 / 1;
  }
  .page--landing.story-enhanced
    .story-board[data-step="0"]
    .story-card--capture,
  .page--landing.story-enhanced .story-board[data-step="1"] .story-card--review,
  .page--landing.story-enhanced
    .story-board[data-step="2"]
    .story-card--recall {
    transform: translateY(0) rotate(0);
    opacity: 1;
    z-index: 3;
  }
  .page--landing.story-enhanced
    .story-board[data-step="0"]
    :is(.story-card--review, .story-card--recall) {
    transform: translateY(2.4em) scale(0.86) rotate(5deg);
    opacity: 0;
  }
  .page--landing.story-enhanced
    .story-board[data-step="1"]
    .story-card--capture,
  .page--landing.story-enhanced
    .story-board[data-step="2"]
    .story-card--capture {
    transform: translate(-12%, -26%) scale(0.85) rotate(-9deg);
    opacity: 0.15;
  }
  .page--landing.story-enhanced
    .story-board[data-step="1"]
    .story-card--recall {
    transform: translate(10%, 22%) scale(0.85) rotate(8deg);
    opacity: 0;
  }
  .page--landing.story-enhanced
    .story-board[data-step="2"]
    .story-card--review {
    transform: translate(10%, -15%) scale(0.9) rotate(8deg);
    opacity: 0.25;
  }
  .page--landing .story-board[data-step="2"] .story-receivers span {
    color: var(--accent-text);
    border-color: var(--accent-border);
    background: var(--accent-wash);
  }

  .page--landing .grows {
    padding-block: var(--frame-section);
  }
  .page--landing .scope-heading {
    max-inline-size: 60em;
    margin-block-end: var(--gap-section);
  }
  .page--landing .scope-heading > p:last-child {
    max-inline-size: 56ch;
    margin-block-start: var(--gap-section);
  }
  .page--landing .scope-explorer {
    position: relative;
    margin: var(--gap-section) 0 0;
    padding: 0;
    min-inline-size: 0;
    border: thin solid var(--hairline);
    border-radius: var(--frame-corner);
    background: radial-gradient(
      ellipse at 95% 100%,
      var(--accent-wash),
      var(--ground) 65%
    );
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    overflow: hidden;
  }
  .page--landing .scope-explorer legend {
    float: left;
    inline-size: 100%;
    grid-column: 1 / -1;
    padding: var(--space-4) var(--space-6);
    border-block-end: thin solid var(--hairline);
    font-family: var(--font-mono);
    color: var(--text-3);
    font-size: var(--type-mono-size);
    line-height: var(--type-mono-leading);
    letter-spacing: var(--type-mono-tracking);
  }
  .page--landing .visual-radio {
    position: absolute;
    inline-size: 1em;
    block-size: 1em;
    clip-path: inset(50%);
  }
  .page--landing .scope-picker {
    padding: var(--space-7);
    border-inline-end: thin solid var(--hairline);
  }
  .page--landing .scope-root {
    display: flex;
    gap: var(--gap-related);
    align-items: center;
    font-family: var(--font-sans);
    color: var(--text-3);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .scope-root svg {
    inline-size: 2em;
    block-size: 2em;
    color: var(--accent-text);
  }
  .page--landing .scope-root strong {
    display: block;
    color: var(--text);
    font-weight: 500;
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
  }
  .page--landing .scope-choices {
    margin-block: var(--gap-section);
    display: grid;
    gap: var(--gap-related);
  }
  .page--landing .scope-choices label {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-related);
    padding: var(--space-4) var(--space-5);
    border: thin solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-2);
    cursor: pointer;
  }
  .page--landing .scope-choices label:hover {
    border-color: var(--accent-border);
  }
  .page--landing .scope-choices label > span:last-child {
    color: var(--text-3);
  }
  .page--landing #scope-web:checked ~ .scope-picker label[for="scope-web"],
  .page--landing #scope-infra:checked ~ .scope-picker label[for="scope-infra"],
  .page--landing #scope-data:checked ~ .scope-picker label[for="scope-data"] {
    color: var(--accent-text);
    background: var(--accent-wash);
    border-color: var(--accent-border);
  }
  .page--landing
    #scope-web:focus-visible
    ~ .scope-picker
    label[for="scope-web"],
  .page--landing
    #scope-infra:focus-visible
    ~ .scope-picker
    label[for="scope-infra"],
  .page--landing
    #scope-data:focus-visible
    ~ .scope-picker
    label[for="scope-data"] {
    outline: medium solid var(--accent-text);
    outline-offset: 0.2em;
  }
  .page--landing .scope-picker > p,
  .page--landing .scope-permissions {
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
    color: var(--text-3);
  }
  .page--landing .scope-permissions {
    margin-block-start: var(--gap-separate);
  }
  .page--landing .scope-contexts {
    min-inline-size: 0;
    padding: var(--space-7);
  }
  .page--landing .scope-context {
    display: none;
  }
  .page--landing #scope-web:checked ~ .scope-contexts .scope-context--web,
  .page--landing #scope-infra:checked ~ .scope-contexts .scope-context--infra,
  .page--landing #scope-data:checked ~ .scope-contexts .scope-context--data {
    display: block;
  }
  .page--landing .context-path {
    color: var(--accent-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    margin-block-end: var(--gap-separate);
  }
  .page--landing .context-memory {
    padding: var(--space-5) 0;
    border-block-end: thin solid var(--hairline);
  }
  .page--landing .context-memory > span {
    display: block;
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    margin-block-end: var(--gap-tight);
  }
  .page--landing .context-memory--project > span {
    color: var(--accent-text);
  }
  .page--landing .context-memory p {
    color: var(--text);
  }
  .page--landing .context-foot {
    margin-block-start: var(--gap-section);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
    color: var(--text-3);
  }
  .page--landing .gate {
    padding-block: var(--space-7) var(--frame-section);
  }
  .page--landing .gate-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--gap-section);
  }
  .page--landing .gate-layout > div > p:not(.eyebrow) {
    margin-block-start: var(--gap-separate);
  }
  .page--landing .gate-facts {
    max-inline-size: 48ch;
    margin-block-start: var(--gap-section);
  }
  .page--landing .gate-facts p {
    margin-block-start: var(--gap-separate);
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }
  .page--landing .gate-facts strong {
    display: block;
    font-weight: 500;
    color: var(--text);
  }
  .page--landing .conflict-shell {
    border: thin solid var(--hairline);
    border-radius: var(--frame-corner);
    background: var(--raise);
    overflow: hidden;
  }
  .page--landing .conflict-demo summary {
    padding: var(--space-5);
    list-style: none;
    color: var(--text);
  }
  .page--landing .conflict-demo summary::-webkit-details-marker {
    display: none;
  }
  .page--landing .conflict-demo__hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--gap-related);
    color: var(--accent-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
  }
  .page--landing .conflict-demo__hint b {
    font-size: 2em;
    font-weight: 400;
  }
  .page--landing .conflict-preview {
    display: grid;
    place-items: center;
    min-block-size: 18em;
    position: relative;
    overflow: hidden;
  }
  .page--landing .conflict-preview > div {
    position: relative;
    font-family: var(--font-sans);
    font-size: var(--type-title-size);
    line-height: var(--type-title-leading);
    letter-spacing: var(--type-title-tracking);
    padding: var(--space-5);
    color: var(--text);
    background: var(--raise);
  }
  .page--landing .held__line {
    position: absolute;
    inline-size: 130%;
    block-size: 30%;
    border: thin solid var(--disagreement-border);
    transform: rotate(-18deg);
  }
  .page--landing .held__line + .held__line {
    transform: rotate(18deg);
  }
  .page--landing .conflict-shell:has(.conflict-demo[open]) .conflict-preview {
    display: none;
  }
  .page--landing .conflict-demo[open] .conflict-demo__hint b {
    transform: rotate(45deg);
  }
  .page--landing .held {
    padding: 0 var(--space-5) var(--space-5);
  }
  .page--landing .held__claim {
    margin: 0 0 var(--gap-related);
    padding: var(--space-5);
    background: var(--disagreement-wash);
    border-inline-start: medium solid var(--disagreement-border);
  }
  .page--landing .held__claim > span {
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    color: var(--text-2);
  }
  .page--landing .held__claim > p {
    color: var(--disagreement-text);
    margin-block-start: var(--gap-related);
  }
  .page--landing .held > p {
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }
  .page--landing .denials {
    padding-block: var(--space-7) var(--frame-section);
  }
  .page--landing .questions-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--gap-section);
  }
  .page--landing .landing-detail {
    border-block-end: thin solid var(--hairline);
    padding-block: var(--space-5);
  }
  .page--landing .landing-detail:first-child {
    padding-block-start: 0;
  }
  .page--landing .landing-detail summary {
    font-size: var(--type-claim-size);
    line-height: var(--type-claim-leading);
    letter-spacing: var(--type-claim-tracking);
    color: var(--text);
  }
  .page--landing .landing-detail summary:hover {
    color: var(--accent-text);
  }
  .page--landing .landing-detail p {
    margin-block-start: var(--gap-separate);
    max-inline-size: 60ch;
    font-size: var(--type-copy-size);
    line-height: var(--type-copy-leading);
    letter-spacing: var(--type-copy-tracking);
  }
  .page--landing .close {
    padding-block: var(--space-7) var(--frame-section);
    background: radial-gradient(
      ellipse at 50% 100%,
      var(--accent-wash),
      transparent 65%
    );
  }
  .page--landing .close-layout {
    text-align: center;
  }
  .page--landing .close h2 {
    font-size: var(--frame-display);
  }
  .page--landing .close p {
    margin-block: var(--gap-section);
  }
  .page--landing .close-mark {
    color: var(--accent-text);
    margin-block-end: var(--gap-section);
  }
  .page--landing .close-mark svg {
    inline-size: 3em;
    block-size: 3em;
  }
  .page--landing .setup-disclosure {
    max-inline-size: 34em;
    margin: var(--gap-section) auto;
    text-align: start;
    border: thin solid var(--accent-border);
    border-radius: var(--radius);
  }
  .page--landing .setup-disclosure summary {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-section);
    padding: var(--space-4) var(--space-5);
    background: var(--accent-text);
    color: var(--ground);
  }
  .page--landing .setup-disclosure summary::-webkit-details-marker {
    display: none;
  }
  .page--landing .setup-disclosure[open] summary span {
    transform: rotate(45deg);
  }
  .page--landing .install {
    padding: var(--space-5);
    min-inline-size: 0;
    background: var(--ground);
  }
  .page--landing .install p {
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-leading);
    letter-spacing: var(--type-ui-tracking);
    margin: 0 0 var(--gap-related);
  }
  .page--landing .install pre {
    margin: 0;
    overflow-x: auto;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--type-mono-block-size);
    line-height: var(--type-mono-block-leading);
    letter-spacing: var(--type-mono-block-tracking);
  }
  .register--landing .colophon {
    border-color: var(--hairline);
    background: var(--ground);
  }
  .register--landing .colophon__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap-section);
  }
  .register--landing .colophon__links {
    display: flex;
    gap: var(--gap-separate);
  }
  .register--landing .colophon__links a {
    color: var(--text-2);
  }
  @media (max-width: 64rem) {
    .register.register--landing {
      --frame-display: clamp(3rem, 6vw, 4.5rem);
      --frame-heading: 2.8rem;
      --frame-core-type: 1.2rem;
      --frame-story-stage: 25rem;
    }
    .page--landing .agent-node {
      text-align: start;
      cursor: pointer;
      padding: var(--space-3);
    }
    .page--landing .agent-node > span:last-child {
      display: none;
    }
    .page--landing .network-message {
      inset-inline: 25%;
      inset-block-end: 1%;
    }
    .page--landing .story-card {
      padding: var(--space-5);
    }
    .page--landing .story-card p {
      font-size: var(--type-claim-size);
      line-height: var(--type-claim-leading);
      letter-spacing: var(--type-claim-tracking);
    }
    .page--landing .scope-picker,
    .page--landing .scope-contexts {
      padding: var(--space-5);
    }
  }
  @media (width <= 48rem) {
    .register.register--landing {
      --page-inset: 1.25rem;
      --frame-display: clamp(3.1rem, 10vw, 4.5rem);
      --frame-heading: 2.5rem;
      --frame-section: 5rem;
      --frame-story-stage: 24rem;
      --frame-sticky: 1rem;
      --frame-step: 60vh;
    }
    .page--landing .constellation { margin-block-end: var(--frame-network-caption); }
    .page--landing .network-message { inset: 100% 0 auto; padding-block: var(--space-3); }
    .page--landing .memory-core { inline-size: 29%; }
    .page--landing .hero__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--gap-section);
    }
    .page--landing .hero__copy {
      padding-block: var(--space-5) 0;
    }
    .page--landing .hero__pain {
      max-inline-size: 42ch;
    }
    .page--landing .hero__visual {
      max-inline-size: 38em;
      inline-size: 100%;
      margin-inline: auto;
    }
    .page--landing .agent-node strong {
      font-size: var(--type-copy-size);
      line-height: var(--type-copy-leading);
      letter-spacing: var(--type-copy-tracking);
    }

    .page--landing .story-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .page--landing .story-board {
      position: relative;
      inset-block-start: auto;
      grid-row: 1;
      margin-block-end: 0;
    }
    .page--landing.motion-ready:not(.story-enhanced) .story-board {
      display: none;
    }
    .page--landing .story-step > .story-card {
      inline-size: 100%;
      max-inline-size: none;
      margin-block-start: var(--gap-section);
    }
    .page--landing .story-step {
      min-block-size: auto;
      padding-block: var(--space-6);
      border-block-start: thin solid var(--hairline);
    }
    .page--landing .story-index {
      margin-block-end: var(--gap-separate);
    }
    .page--landing .scope-explorer {
      grid-template-columns: minmax(0, 1fr);
    }
    .page--landing .scope-picker {
      border-inline-end: 0;
      border-block-end: thin solid var(--hairline);
    }
    .page--landing .scope-choices {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap-tight);
      margin-block: var(--gap-separate);
    }
    .page--landing .scope-choices label {
      padding: var(--space-3) var(--space-2);
      font-size: var(--type-ui-size);
      line-height: var(--type-ui-leading);
      letter-spacing: var(--type-ui-tracking);
      justify-content: center;
    }
    .page--landing .scope-choices label > span:last-child {
      display: none;
    }
    .page--landing .scope-picker > p {
      display: none;
    }
    .page--landing .gate-layout,
    .page--landing .questions-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--gap-section);
    }
    .page--landing .network-caption {
      flex-wrap: wrap;
    }
    .register--landing .masthead__tagline {
      display: none;
    }
  }
  @media (max-width: 24rem) {
    .register.register--landing {
      --frame-core-type: 1rem;
    }
    .page--landing .agent-node {
      text-align: start;
      cursor: pointer;
      padding: var(--space-2);
      inline-size: 29%;
    }
    .page--landing .agent-node > span {
      font-size: var(--type-gutter-size);
      line-height: var(--type-gutter-leading);
      letter-spacing: var(--type-gutter-tracking);
    }
    .page--landing .memory-core > span { display: none; }
    .page--landing .memory-core .masthead__mark { inline-size: 1.4em; block-size: 1.4em; }
    .page--landing .network-caption > span {
      max-inline-size: 25ch;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .page--landing .motion-toggle {
      display: none;
    }
  }
}

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    .register.register--landing {
      scroll-behavior: smooth;
    }
    .page--landing .hero__copy {
      animation: keel-enter 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .page--landing .agent-node {
      text-align: start;
      cursor: pointer;
      animation: keel-enter 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .page--landing .agent-node--b {
      animation-delay: 120ms;
    }
    .page--landing .agent-node--c {
      animation-delay: 240ms;
    }
    .page--landing .agent-node--d {
      animation-delay: 360ms;
    }
    .page--landing .network-signals path {
      animation: keel-flow 5s linear infinite;
    }
    .page--landing .network-signals path:nth-child(2) {
      animation-delay: -1.2s;
    }
    .page--landing .network-signals path:nth-child(3) {
      animation-delay: -2.4s;
    }
    .page--landing .network-signals path:nth-child(4) {
      animation-delay: -3.6s;
    }
    .page--landing .network-orbit {
      animation: keel-orbit 70s linear infinite;
    }
    .page--landing .network-orbit--outer {
      animation-direction: reverse;
      animation-duration: 95s;
    }
    .page--landing .memory-core {
      animation: keel-breathe 5s ease-in-out infinite;
    }
    .page--landing
      :is(
        .landing-cta,
        .agent-node,
        .scope-choices label,
        .story-receivers span
      ) {
      transition:
        transform 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        color 250ms ease;
    }
    .page--landing .landing-cta:hover {
      transform: translateY(-0.2em);
    }
    .page--landing .landing-cta:active {
      transform: scale(0.97);
    }
    .page--landing .story-card {
      transition:
        transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 600ms ease;
    }
    .page--landing .story-board[data-step="2"] .story-receivers span {
      animation: keel-enter 600ms ease both;
    }
    .page--landing
      .story-board[data-step="2"]
      .story-receivers
      span:nth-child(2) {
      animation-delay: 120ms;
    }
    .page--landing
      .story-board[data-step="2"]
      .story-receivers
      span:nth-child(3) {
      animation-delay: 240ms;
    }
    .page--landing .scope-context .context-memory {
      animation: keel-enter 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .page--landing .scope-context .context-memory--project {
      animation-delay: 100ms;
    }
    .page--landing details[open] :is(.held, .install, p) {
      animation: keel-enter 350ms ease both;
    }
    .page--landing.motion-ready [data-reveal] {
      transition:
        transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 650ms ease;
    }
    .page--landing.motion-ready [data-reveal="waiting"] {
      transform: translateY(2em);
      opacity: 0;
    }
    .page--landing.motion-ready [data-reveal="visible"] {
      transform: translateY(0);
      opacity: 1;
    }
    .page--landing.motion-paused *,
    .page--landing .hero__visual:not(.is-visible) * {
      animation-play-state: paused !important;
    }
    .page--landing.motion-paused .hero__copy,
    .page--landing.motion-paused .agent-node {
      opacity: 1 !important;
      transform: none !important;
    }
    .page--landing.motion-paused * {
      transition: none;
    }
    .page--landing.motion-paused [data-reveal="waiting"] {
      transform: none;
      opacity: 1;
    }
    @supports (animation-timeline: view()) {
      .page--landing .hero__visual {
        animation: keel-recede linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
      .page--landing .scope-heading h2 {
        animation: keel-heading linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
      }
    }
    @keyframes keel-flow {
      from {
        stroke-dashoffset: 498;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes keel-orbit {
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes keel-breathe {
      0%,
      100% {
        filter: drop-shadow(0 0 1em var(--accent-wash));
      }
      50% {
        filter: drop-shadow(0 0 2.5em var(--accent-border));
      }
    }
    @keyframes keel-enter {
      from {
        opacity: 0;
        transform: translateY(1em);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes keel-recede {
      to {
        opacity: 0.2;
        transform: translateY(3em) scale(0.9);
      }
    }
    @keyframes keel-heading {
      from {
        opacity: 0.3;
        transform: translateY(0.5em);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}