/* System Prompt design system (sp.css). In every page head, in this order:
     <link rel="stylesheet" href="/fonts/fonts.css">
     <link rel="stylesheet" href="/sp.css">
   Flat colour, square corners, 1px rules. No shadows, no gradients, no tints, no radius.
   Dark mode follows prefers-color-scheme; <html data-theme="light|dark"> forces one.
   Tokens: --blue --yellow --red --black --white --paper --gray --rule --rule-soft (fixed);
   roles that follow the theme: --bg --ink --muted --line --line-soft --link --own (your
   side, text) --other (other side, text) --focus. Use roles for text, fixed colours for fills.

   LAYOUT
   .wrap            1200px container with side gutters.   .wrap-text  760px (reading, forms).
                    Put spacing on an inner element: .wrap's side padding is the gutter.
   .grid            12 columns. Children: .col-1 ... .col-12 (span), optional .start-4/5/6/7/8
                    (first line). Everything stacks full width under 860px.
                    .grid.divided: 1px vertical dividers between the columns.
   .section         1px rule on top, 72/88px padding. .section-flush: the same with no rule.
   .section-head    <div class="section-head"><span class="index">01</span><h2>Title</h2></div>
                    (index in columns 1-3, title from column 4). .index alone: "[01]" in mono;
                    .index.plain drops the brackets.
   .band-black .band-blue .band-yellow   full-bleed colour fields; text and rules follow.
   .dark            any element: use the dark tokens there.  <body class="dark-top">: black header.
   .stack / .stack-lg   children spaced 16px / 32px.   .row  flex row that wraps (.end .between).

   TYPE             body text is Spectral (reading). .ui = IBM Plex Sans 16px (forms, dashboards),
                    .mono = IBM Plex Mono, .display = Young Serif. h1/h2 Young Serif, h3 Plex Sans
                    600, h4 mono caps.  .d1 .d2 .d3  display sizes.  .lede  large Spectral.
   .kicker          mono caps label; .kicker.prompt adds "$ ", .kicker.caret adds "> ";
                    .kicker.own / .kicker.other colour it by side.
   .small .muted .num (tabular mono) .nowrap   .prose  reading column (links blue, lists, quotes).
   .cursor          the yellow cursor block from the logo ("S_"), blinking slowly (stops under
                    reduced motion): <span class="cursor" aria-hidden="true"></span>.

   HEADER / FOOTER  header.site-header and footer.site-footer: copy the markup verbatim from
                    index.html. .wordmark is the "System Prompt" logotype with its cursor.
                    In the nav, aria-current="page" underlines the current link. The footer's
                    <a href="/privacy#p13" data-foot-contact>Contact</a> is made a mailto link
                    to op=config's `contact` (landing.js showContact), or removed when that is
                    null; as written it leads to the privacy page's contact section.

   CONTROLS
   .btn             48px rectangle, mono caps. Variants: .btn-primary (blue) .btn-secondary
                    (1px outline) .btn-danger (red) .btn-yellow (on blue or black) .btn-ghost.
                    Sizes: .btn-sm 36px, .btn-lg 56px, .btn-block full width. Hover inverts.
                    Arrow: last child <span class="arr" aria-hidden="true">→</span>.
                    [disabled] or aria-disabled="true" greys it. .linklike (button or a): a
                    secondary text action, mono caps underlined.
   .field           <div class="field"><label for=x>Email</label><input id=x ...>
                    <p class="hint">...</p><p class="error">...</p></div>
                    Inputs, selects, textareas: 48px, square, 1px ink border, Plex Sans 17px.
                    .field.is-invalid or [aria-invalid="true"] draws the border red.
                    Wrap a <select> in <span class="select"> for the arrow.  fieldset > legend.
   checkbox, radio  square 22px (checked: blue with a tick / an inner square). Put them in
                    <label class="choice"><input type="checkbox"> Text <span class="sub">..</span>
                    </label>; .choices wraps a ruled list of them.
   .seg             a row of square toggles in one 1px frame: <div class="seg"><button
                    aria-pressed="true">Weekly</button>...</div>, or labels with radios inside.
   details.faq      ruled disclosure (+ / −): <details class="faq"><summary>Q</summary>
                    <div class="answer">...</div></details>; wrap several in .faqs.

   LISTS AND TABLES
   ul.ruled, ol.ruled   rows between 1px rules; ol.ruled numbers them 01, 02 in mono.
                    .ruled .title  a bold Plex Sans lead line in a row.
   table.table      mono caps header, 1px rules; td.num for dates and numbers.
                    Wrap wide tables in .table-wrap (scrolls sideways on phones).
   dl.meta          key (mono caps) / value pairs in two columns.

   ASCII AND TERMINAL
   .ascii-bar       <span class="ascii-bar"><span class="off">░░░░░░</span>|<span class="on">████
                    </span><span class="off">░░</span></span>: a map bar drawn from the middle.
                    "█" and "░" render as flat cells from fonts/sp-cells.woff (filled: the side's
                    colour; empty: --line-soft). .is-red (the other side), .is-ink (ink).
   .ascii-progress  <span class="ascii-progress"><b>#####</b><i>-----</i><span>5/16</span></span>
                    renders "[#####-----] 5/16" (keep both b and i, even when one is empty).
   .ascii-rule      <div class="ascii-rule" aria-hidden="true"></div>: a "+-----+" divider.
   pre.ascii        plain preformatted ASCII.   kbd  a key in a 1px box.
   .bust            the landing's ASCII bust (bust.js); .bust-frame sizes it to its column.

   STATUS
   .note            1px ruled box of plain text.  .draft-note  the small mono "Draft" label.
   .alert           box with a thick left bar: .is-error (red) .is-ok (blue) .is-warn (yellow).
                    A first <strong> becomes its mono caps title. Use role="alert"/"status".
   .tag             small mono caps label in a 1px box: .tag-blue .tag-red .tag-yellow .tag-black.
   .sq              a 12px colour square: .sq-blue (your side), .sq-red (the other side).
   .side-own .side-other   text in the side colours (AA on light and dark).
   .panel           a 1px ruled box with 24px padding.
   .sr-only  visually hidden.  .skip  skip link.  .hide-sm (<560px) .hide-md (<860px)
   .hide-lg (>860px) .show-sm (only <560px).  .mt-0/16/32/48  .mb-0/16/32  spacing helpers.

   PAGE PARTS (defined at the end): landing .hero .steps .specimen .sample .para
   .principles .cta; legal pages .legal; 404 .nf.
*/

/* ---- tokens ------------------------------------------------------------------------- */
:root {
  --blue: #1026c8;
  --yellow: #f7bf2e;
  --red: #e1251b;
  --black: #0a0a0a;
  --white: #ffffff;
  --paper: #f7f8ff;
  --gray: #6b6f80;
  --rule: #0a0a0a;
  --rule-soft: #d6d9e6;

  /* Roles (these change in dark mode and inside .dark) */
  --bg: var(--white);
  --ink: var(--black);
  --muted: var(--gray);
  --line: var(--rule);
  --line-soft: var(--rule-soft);
  --link: var(--blue);
  --own: var(--blue);        /* "from your side": text */
  --other: var(--red);       /* "the other side": text */
  --own-fill: var(--blue);   /* fills stay saturated in both modes */
  --other-fill: var(--red);
  --bar-own: var(--blue);    /* graphics (map bars): 3:1 or more against the page */
  --bar-other: var(--red);
  --focus: var(--yellow);
  --focus-edge: var(--black);
  --field-bg: var(--white);

  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 32px;
  --gap: 24px;
  --max: 1200px;
  --text: 760px;
  --header-h: 64px;

  color-scheme: light;
}

/* Dark: paper becomes black, ink becomes the logo's off-white, rules stay 1px. Blue and red
   stay saturated as fills; as text on black they are lifted to pass AA. */
:root[data-theme="dark"],
.dark,
.band-black,
.site-footer,
body.dark-top .site-header {
  --bg: var(--black);
  --ink: var(--paper);
  --muted: #9a9eb0;
  --line: var(--paper);
  --line-soft: #2a2d3a;
  --link: #5b6dff;
  --own: #5b6dff;
  --other: #ff4d42;
  --bar-own: #3d52f2;        /* the blue lifted for graphics on black: 3.5:1 */
  --focus-edge: var(--black);
  --field-bg: var(--black);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--black);
    --ink: var(--paper);
    --muted: #9a9eb0;
    --line: var(--paper);
    --line-soft: #2a2d3a;
    --link: #5b6dff;
    --own: #5b6dff;
    --other: #ff4d42;
    --bar-own: #3d52f2;
    --field-bg: var(--black);
    color-scheme: dark;
  }
}

/* ---- base --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { border-radius: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 var(--font-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
::selection { background: var(--yellow); color: var(--black); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link); }
.prose a, a.link { color: var(--link); }
.prose a:hover, a.link:hover { background: var(--yellow); color: var(--black); text-decoration-color: var(--black); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 500; }

/* ---- type --------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 400; }
h1, h2, .display, .d1, .d2, .d3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
h1, .d1 { font-size: clamp(44px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.025em; }
h2, .d2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -0.02em; }
.d3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
h3 { font: 600 20px/1.3 var(--font-ui); letter-spacing: -0.005em; }
h4 { font: 500 13px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.lede { font: 400 clamp(20px, 2vw, 24px)/1.45 var(--font-body); }
.ui { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-body); }
.display { font-family: var(--font-display); }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kicker {
  display: block;
  font: 500 13px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
/* Decorative glyphs carry empty alt text ("/ \"\""), so screen readers skip them; the first
   declaration is for browsers without that syntax. */
.kicker.prompt::before { content: "$ "; content: "$ " / ""; color: var(--muted); }
.kicker.caret::before { content: "> "; content: "> " / ""; color: var(--muted); }
.kicker.own { color: var(--own); }
.kicker.other { color: var(--other); }
.side-own { color: var(--own); }
.side-other { color: var(--other); }

.prose { font-size: 19px; line-height: 1.65; max-width: 68ch; }
.prose h2 { font-size: 30px; margin-top: 1.6em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose ul { list-style-type: square; }
.prose li { margin: 0.3em 0; padding-left: 0.2em; }
.prose li::marker { font-family: var(--font-mono); color: var(--muted); }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 3px solid var(--ink); font-style: italic; }

/* The block cursor, as in the logo ("S_"): a flat yellow block on the baseline. */
.cursor {
  display: inline-block;
  width: 0.4em;
  height: 0.17em;
  margin-left: 0.1em;
  background: var(--yellow);
  vertical-align: baseline;
  animation: sp-blink 2.2s steps(1, end) infinite;
}
.cursor.block { height: 0.72em; width: 0.42em; vertical-align: -0.02em; }
@keyframes sp-blink { 0%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } }

/* ---- layout ------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-text { width: 100%; max-width: calc(var(--text) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; }
.col-1 { grid-column-end: span 1; } .col-2 { grid-column-end: span 2; } .col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .col-9 { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; } .col-11 { grid-column-end: span 11; } .col-12 { grid-column-end: span 12; }
.start-1 { grid-column-start: 1; } .start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
.grid.divided { column-gap: 0; }
.grid.divided > * { padding: 0 var(--gap); border-left: 1px solid var(--line); }
.grid.divided > :first-child { border-left: 0; padding-left: 0; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 32px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }

.section { border-top: 1px solid var(--line); padding: 72px 0 88px; }
.section-flush { padding: 72px 0 88px; }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: 48px; align-items: baseline; }
.section-head .index { grid-column: span 3; }
.section-head h2, .section-head .d2 { grid-column: span 9; margin: 0; }
.index {
  display: inline-block;
  font: 500 14px/1 var(--font-mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.index::before { content: "["; content: "[" / ""; color: var(--muted); }
.index::after { content: "]"; content: "]" / ""; color: var(--muted); }
.index.plain::before, .index.plain::after { content: none; }

/* ---- colour fields ------------------------------------------------------------------ */
.band-black, .dark { background: var(--bg); color: var(--ink); }
.band-blue {
  --bg: var(--blue); --ink: var(--white); --muted: var(--white); --line: var(--white);
  --line-soft: var(--white); --link: var(--white); --own: var(--white); --focus-edge: var(--black);
  background: var(--blue); color: var(--white);
}
.band-yellow {
  --bg: var(--yellow); --ink: var(--black); --muted: var(--black); --line: var(--black);
  --line-soft: var(--black); --link: var(--black); --focus: var(--blue); --focus-edge: var(--white);
  background: var(--yellow); color: var(--black);
}

/* ---- header ------------------------------------------------------------------------- */
.site-header { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font: 400 23px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: inherit; }
.wordmark .cursor { width: 0.42em; height: 0.19em; margin-left: 0.12em; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) {
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:not(.btn):hover { color: inherit; border-bottom-color: currentColor; }
.site-nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* ---- footer ------------------------------------------------------------------------- */
.site-footer { background: var(--bg); color: var(--ink); padding: 56px 0 40px; margin-top: auto; border-top: 1px solid var(--line-soft); }
.site-footer .foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.site-footer .wordmark { font-size: 32px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot-nav a { font: 500 13px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.foot-nav a:hover { color: inherit; border-bottom-color: currentColor; }
.foot-note { font: 400 15px/1.55 var(--font-ui); max-width: 62ch; margin: 28px 0 20px; }
.foot-copy { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ---- buttons ------------------------------------------------------------------------ */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 22px;
  font: 500 14px/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}
.btn:hover { color: var(--btn-bg-h, var(--bg)); background: var(--btn-fg); border-color: var(--btn-fg); }
.btn-primary { --btn-bg: var(--blue); --btn-fg: var(--white); --btn-bd: var(--blue); }
.btn-primary:hover { background: var(--bg); color: var(--own); border-color: var(--blue); }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-danger { --btn-bg: var(--red); --btn-fg: var(--white); --btn-bd: var(--red); }
.btn-danger:hover { background: var(--bg); color: var(--other); border-color: var(--red); }
.btn-yellow { --btn-bg: var(--yellow); --btn-fg: var(--black); --btn-bd: var(--yellow); }
.btn-yellow:hover { background: var(--black); color: var(--yellow); border-color: var(--black); }
.btn-ghost { --btn-bd: transparent; padding-left: 0; padding-right: 0; }
.btn-ghost:hover { background: transparent; color: var(--ink); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn .arr { font-family: var(--font-mono); transition: transform 0.15s; }
.btn:hover .arr { transform: translateX(3px); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent; color: var(--muted); border-color: var(--line-soft); cursor: not-allowed;
}
.btn[disabled] .arr { transform: none; }
/* A secondary text action ("Start over", "Swap this story", "Remove", "Sign out everywhere"):
   mono caps with an underline, so every action on the site speaks in one voice. */
button.linklike, a.linklike {
  background: none; border: 0; padding: 0;
  font: 500 13px/1.4 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
button.linklike:hover, a.linklike:hover { color: var(--link); }

/* ---- forms -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.field > label, .label, legend {
  font: 500 12px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}
fieldset { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
legend { margin-bottom: 12px; }
input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="url"],
input[type="password"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: 400 17px/1.4 var(--font-ui);
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
textarea { padding: 12px 14px; min-height: 120px; resize: vertical; line-height: 1.5; }
select {
  padding-right: 40px;
  background-image: none;
  cursor: pointer;
}
.select { position: relative; display: block; }
.select::after { content: "▾"; content: "▾" / ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-family: var(--font-mono); }
::placeholder { color: var(--muted); opacity: 1; }
.hint { font: 400 14px/1.45 var(--font-ui); color: var(--muted); }
.error { font: 500 14px/1.45 var(--font-ui); color: var(--other); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, [aria-invalid="true"] { border-color: var(--red); border-width: 2px; }

/* Square checkboxes and radios. A checkbox fills blue with a white tick; a radio shows a
   filled inner square. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--field-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: -5px;
}
input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translateY(-2px) rotate(-45deg);
  visibility: hidden;
}
input[type="checkbox"]:checked { background: var(--blue); border-color: var(--blue); }
input[type="checkbox"]:checked::before { visibility: visible; }
input[type="radio"]::before { content: ""; width: 10px; height: 10px; background: var(--ink); visibility: hidden; }
input[type="radio"]:checked { border-color: var(--ink); }
input[type="radio"]:checked::before { visibility: visible; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--line-soft); cursor: not-allowed; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  font: 400 17px/1.45 var(--font-ui);
  cursor: pointer;
}
.choice input { margin-top: 1px; }
.choice .sub { display: block; font-size: 14px; color: var(--muted); }
.choices { border-top: 1px solid var(--line); }
.choices .choice { border-bottom: 1px solid var(--line-soft); padding: 14px 4px; }
.choices .choice:last-child { border-bottom-color: var(--line); }
.choices .choice:hover { color: var(--link); }

/* A row of square toggles (a scale, a frequency). Pressed = blue. */
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); }
.seg > button, .seg > label {
  flex: 1 1 0;
  min-height: 48px;
  padding: 8px 12px;
  font: 500 13px/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.seg > :first-child { border-left: 0; }
.seg > button:hover, .seg > label:hover { background: var(--ink); color: var(--bg); }
.seg > button[aria-pressed="true"], .seg > label:has(input:checked) { background: var(--blue); color: var(--white); }
.seg > label input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ---- disclosure --------------------------------------------------------------------- */
.faqs { border-bottom: 1px solid var(--line); }
details.faq { border-top: 1px solid var(--line); }
details.faq > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  font: 500 20px/1.35 var(--font-ui);
  cursor: pointer;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; content: "+" / ""; font: 400 24px/1 var(--font-mono); flex: 0 0 auto; }
details.faq[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
details.faq > summary:hover { color: var(--link); }
details.faq > .answer { padding: 0 0 28px; max-width: 64ch; }

/* ---- ruled lists, tables, key/value ------------------------------------------------- */
ul.ruled, ol.ruled { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
ul.ruled > li, ol.ruled > li { border-top: 1px solid var(--line); padding: 20px 0; }
ol.ruled { counter-reset: sp-ruled; }
ol.ruled > li { counter-increment: sp-ruled; display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; }
ol.ruled > li::before {
  content: counter(sp-ruled, decimal-leading-zero);
  font: 500 14px/1.9 var(--font-mono);
  color: var(--muted);
}
ol.ruled > li > * { grid-column: 2; }
.ruled .title { display: block; font: 600 19px/1.35 var(--font-ui); margin-bottom: 4px; }

table.table { width: 100%; border-collapse: collapse; font: 400 16px/1.4 var(--font-ui); }
.table th {
  text-align: left;
  font: 500 12px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 12px 12px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr:last-child td { border-bottom-color: var(--line); }
.table .num, .table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; font: 400 16px/1.45 var(--font-ui); }
dl.meta dt { font: 500 12px/1.9 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
dl.meta dd { margin: 0; }

/* ---- ASCII and terminal ------------------------------------------------------------- */
/* The bar's cells come from fonts/sp-cells.woff (see fonts.css): flat, evenly spaced, the
   same on every platform. Filled cells are the side's colour at full strength (3:1 or more
   against the page), empty ones the soft rule colour; the "|" tick and labels stay Plex Mono. */
.ascii-bar { font: 400 15px/1 "SP Cells", var(--font-mono); letter-spacing: 0; white-space: pre; color: var(--ink); }
.ascii-bar .on { color: var(--bar-own); }
.ascii-bar .off { color: var(--line-soft); }
.ascii-bar.is-red .on { color: var(--bar-other); }
.ascii-bar.is-ink .on { color: var(--ink); }
.ascii-progress { font: 500 14px/1 var(--font-mono); white-space: pre; letter-spacing: 0.02em; }
.ascii-progress::before { content: "["; content: "[" / ""; }
.ascii-progress > b { font-weight: 500; color: var(--own); }
.ascii-progress > i { font-style: normal; color: var(--muted); }
.ascii-progress > b + i::after { content: "]"; content: "]" / ""; color: var(--ink); }
.ascii-progress > span { margin-left: 0.8em; }
.ascii-rule { position: relative; display: block; overflow: hidden; white-space: nowrap; height: 1.2em; font: 400 14px/1.2 var(--font-mono); color: var(--muted); margin: 40px 0; }
.ascii-rule::before { content: "+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------"; }
.ascii-rule::after { content: "+"; position: absolute; right: 0; top: 0; background: var(--bg); padding-left: 0; }
pre, code, kbd { font-family: var(--font-mono); }
pre.ascii { margin: 0; font: 400 14px/1.2 var(--font-mono); white-space: pre; overflow-x: auto; }
kbd { font-size: 0.85em; padding: 0 5px; border: 1px solid var(--line); }

/* The landing's ASCII bust: 96 columns by 60 rows of Plex Mono (0.6em wide, 1.2em tall),
   so the frame is 57.6em by 72em; the font size follows the frame's width. */
.bust-frame { container-type: inline-size; width: 100%; }
.bust {
  margin: 0;
  width: 100%;
  font: 500 10px/1.2 var(--font-mono);
  font-size: calc(100cqi / 57.6);
  letter-spacing: 0;
  white-space: pre;
  overflow: hidden;
  color: var(--paper);
  aspect-ratio: 57.6 / 72;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.bust:active { cursor: grabbing; }

/* ---- status ------------------------------------------------------------------------- */
.note { border: 1px solid var(--line); padding: 18px 20px; font: 400 16px/1.5 var(--font-ui); }
.note.draft, .draft-note {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 6px 10px;
  font: 500 12px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.alert {
  border: 1px solid var(--line);
  border-left: 8px solid var(--ink);
  padding: 16px 20px;
  font: 400 16px/1.5 var(--font-ui);
}
.alert > strong:first-child, .alert .alert-title { display: block; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.alert.is-error { border-left-color: var(--red); }
.alert.is-error > strong:first-child, .alert.is-error .alert-title { color: var(--other); }
.alert.is-ok { border-left-color: var(--blue); }
.alert.is-ok > strong:first-child, .alert.is-ok .alert-title { color: var(--own); }
.alert.is-warn { border-left-color: var(--yellow); }

.tag {
  display: inline-block;
  padding: 4px 7px 3px;
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}
.tag-blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.tag-red { background: var(--red); border-color: var(--red); color: var(--white); }
.tag-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.tag-black { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sq { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; background: var(--ink); }
.sq-blue { background: var(--bar-own); }
.sq-red { background: var(--bar-other); }
.sq-yellow { background: var(--yellow); }
.panel { border: 1px solid var(--line); padding: 24px; }

/* ---- utilities ---------------------------------------------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--yellow); color: var(--black); padding: 10px 14px; font: 500 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; }
.skip:focus { top: 8px; }
.show-sm { display: none !important; }
.mt-0 { margin-top: 0; } .mt-16 { margin-top: 16px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mb-32 { margin-bottom: 32px; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---- focus -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--focus-edge);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.dark :focus-visible, .band-black :focus-visible, .site-footer :focus-visible { box-shadow: none; }

/* ---- motion ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- landing (index.html) ----------------------------------------------------------- */
.hero { padding: 32px 0 40px; border-bottom: 1px solid var(--line-soft); }
.hero-grid { align-items: center; }
/* The bust fills its six columns, but never taller than the screen below the header. */
.hero-art { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.hero-art .bust-frame {
  width: min(100%, calc((100vh - var(--header-h) - 72px) * 0.8));
  width: min(100%, calc((100svh - var(--header-h) - 72px) * 0.8));
}
.hero h1 { margin: 0 0 32px; max-width: 9.5em; }
.hero .lede { max-width: 31ch; margin-bottom: 36px; }
.hero-meta { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hero-meta span::before { content: "/ "; content: "/ " / ""; color: var(--yellow); }
.hero-meta span:first-child::before { content: none; }

.steps { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.steps > li { display: flex; flex-direction: column; }
.steps .step-n { align-self: flex-start; margin-bottom: 28px; }
.steps h3 { font: 400 30px/1.12 var(--font-display); letter-spacing: -0.01em; margin-bottom: 14px; }
.steps p { font-size: 18px; }
.specimen {
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font: 400 13px/1.7 var(--font-mono);
  white-space: pre;
  overflow: hidden;
}
.steps .specimen { margin-top: 32px; }
.specimen .dim { color: var(--muted); }
.specimen .sq { width: 10px; height: 10px; vertical-align: 0; }

/* 02 A sample: the card spans columns 4 to 12, as the principles and questions do; the text
   keeps a reading measure, and the marks sit in a column to its right, as on /read. */
.sample { border: 1px solid var(--line); padding: 44px 56px 36px; }
.sample-intro { max-width: 40em; }
.sample-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.sample-q { font: 400 16px/1.5 var(--font-ui); color: var(--muted); margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); max-width: 44em; }
.sample-q b { color: var(--ink); font-weight: 500; }
.sample h3 { font: 400 clamp(28px, 3vw, 38px)/1.1 var(--font-display); letter-spacing: -0.015em; margin: 0 0 16px; }
.para { display: grid; grid-template-columns: minmax(0, 34em) max-content; column-gap: 28px; align-items: start; margin: 0 0 22px; font-size: 19px; line-height: 1.65; }
.para > p { margin: 0 0 0 -23px; padding-left: 20px; border-left: 3px solid transparent; cursor: pointer; }
.para > p:focus-visible { outline-offset: 4px; }
.para:hover > p, .para.open > p, .para:focus-within > p { border-left-color: var(--line-soft); }
.para.is-landed > p { border-left-color: var(--bar-own); }
.para.is-missed > p { border-left-color: var(--red); }
/* The pair shows on hover, focus, or tap, and stays on a marked paragraph. */
.para-marks { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; opacity: 0; transition: opacity 0.15s; }
.para:hover .para-marks, .para.open .para-marks, .para:focus-within .para-marks,
.para.is-landed .para-marks, .para.is-missed .para-marks { opacity: 1; }
.para-marks .btn { min-height: 30px; padding: 0 10px; font-size: 11px; justify-content: flex-start; }
.para-marks .btn[aria-pressed="true"].yes { background: var(--blue); border-color: var(--blue); color: var(--white); }
.para-marks .btn[aria-pressed="true"].no { background: var(--red); border-color: var(--red); color: var(--white); }
.sample-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-soft); font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

.principles .title { font: 600 20px/1.35 var(--font-ui); }
.principles li p { margin: 0; color: var(--muted); font: 400 16px/1.55 var(--font-ui); max-width: 60ch; }

.cta { padding: 96px 0; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.cta h2 { margin: 0; max-width: 11em; font-size: clamp(40px, 6vw, 80px); line-height: 1; }
.cta p { margin: 16px 0 0; font: 500 13px/1.4 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }

/* ---- legal pages and 404 ------------------------------------------------------------ */
/* Legal pages sit on the grid as /read does: the draft note, date, and contents in columns
   1 to 3; the text in columns 4 to 10. */
.legal { padding-top: 56px; padding-bottom: 96px; }
.legal-side { align-self: start; position: sticky; top: 24px; }
.legal-side .updated { font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 32px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.legal-toc li { border-bottom: 1px solid var(--line-soft); }
.legal-toc a { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 8px 0; font: 400 14px/1.35 var(--font-ui); text-decoration: none; }
.legal-toc a:hover { color: var(--link); }
.legal-toc .index { font-size: 12px; line-height: 1.6; }
.legal h1 { font-size: clamp(40px, 6vw, 72px); margin: 0 0 32px; }
.legal .prose { max-width: 68ch; }
.legal .prose h2 { font-size: 26px; line-height: 1.2; margin: 2.2em 0 0.6em; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: baseline; scroll-margin-top: 16px; }
.legal .prose h2 .index { font-size: 13px; flex: 0 0 auto; }

.nf { padding-top: 72px; padding-bottom: 96px; }
.nf pre { color: var(--yellow); font: 400 clamp(9px, 2.1vw, 18px)/1.15 var(--font-mono); margin: 0 0 40px; white-space: pre; overflow: hidden; }
.nf h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 16px; }
.nf .lede { margin-bottom: 32px; max-width: 34ch; }

/* ---- responsive --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --gutter: 24px; --gap: 20px; }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; --gap: 16px; }
  body { font-size: 17px; }
  .grid > [class*="col-"] { grid-column: 1 / -1; }
  .grid.divided { row-gap: 0; }
  .grid.divided > * { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
  .grid.divided > :first-child { border-top: 0; padding-top: 0; }
  .section, .section-flush { padding: 56px 0 64px; }
  .section-head { display: block; margin-bottom: 32px; }
  .section-head .index { display: block; margin-bottom: 14px; }
  .hide-md { display: none !important; }
  .legal { padding-top: 32px; }
  .legal-side { position: static; }
  .legal-side .updated { margin-bottom: 0; }
  .hero { padding: 24px 0 48px; }
  .hero h1 { margin-bottom: 24px; }
  .hero-grid { row-gap: 20px; }
  /* Stacked, the bust comes first, cropped to the head and beard (the top 46 rows). */
  .hero-art { order: -1; justify-content: center; }
  .hero-art .bust-frame { width: min(100%, 460px); aspect-ratio: 57.6 / 55.2; overflow: hidden; }
  .steps .step-n { margin-bottom: 16px; }
  .sample { padding: 28px 20px 24px; }
  .para { display: block; }
  .para-marks { display: none; flex-direction: row; gap: 8px; margin-top: 10px; opacity: 1; }
  .para.open .para-marks, .para:focus-within .para-marks,
  .para.is-landed .para-marks, .para.is-missed .para-marks { display: flex; }
  .cta { padding: 64px 0; }
  ol.ruled > li { grid-template-columns: 44px 1fr; }
}
@media (max-width: 560px) {
  .hide-sm { display: none !important; }
  .show-sm { display: revert !important; }
  .site-nav { gap: 18px; }
  .wordmark { font-size: 21px; }
  .site-footer .wordmark { font-size: 26px; }
  .btn-lg { min-height: 52px; padding: 0 22px; }
  .hero { padding-top: 12px; }
  /* On a phone the kicker, headline, bust, and Start button fit the first screen. */
  .hero-art .bust-frame { width: min(100%, 290px); aspect-ratio: 57.6 / 52.8; }
  .hero h1 { font-size: 40px; margin-bottom: 16px; }
  .hero .lede { font-size: 18px; margin-bottom: 24px; max-width: none; }
  .hero .row .btn { flex: 1 1 auto; }
  .hero-meta { gap: 6px 12px; letter-spacing: 0.05em; }
  .cta .btn { width: 100%; }
  details.faq > summary { font-size: 18px; }
  .sample { border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; }
  .para > p { margin-left: -16px; padding-left: 13px; }
}
@media (min-width: 861px) {
  .hide-lg { display: none !important; }
}