:root {
    --ground: #E9EAE4;
    --surface: #F7F8F4;
    --surface-2: #DFE1D9;
    --ink: #141A18;
    --muted: #5B6560;
    --rule: #C4C9BF;
    --rule-soft: #D6DAD0;
    --lane-dl: #9C4C15;
    --lane-simple: #0C6349;
    --accent: #0C6349;
    --warn: #8A5A00;
    --warn-bg: #F1E7CF;
    --code-bg: #E1E4DB;
    --shadow: 0 1px 0 rgba(20,26,24,.06);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #0F1412;
      --surface: #171E1B;
      --surface-2: #1F2823;
      --ink: #E3E8E2;
      --muted: #96A199;
      --rule: #2C3833;
      --rule-soft: #232D28;
      --lane-dl: #E39D57;
      --lane-simple: #52C29B;
      --accent: #52C29B;
      --warn: #E0B663;
      --warn-bg: #26200F;
      --code-bg: #1D2622;
      --shadow: 0 1px 0 rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"] {
    --ground: #0F1412;
    --surface: #171E1B;
    --surface-2: #1F2823;
    --ink: #E3E8E2;
    --muted: #96A199;
    --rule: #2C3833;
    --rule-soft: #232D28;
    --lane-dl: #E39D57;
    --lane-simple: #52C29B;
    --accent: #52C29B;
    --warn: #E0B663;
    --warn-bg: #26200F;
    --code-bg: #1D2622;
    --shadow: 0 1px 0 rgba(0,0,0,.3);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 19px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: 78ch;
    margin: 0 auto;
    padding: 0 24px 96px;
  }

  /* ---- masthead ---- */
  header.masthead {
    border-bottom: 2px solid var(--ink);
    padding: 56px 0 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .waybill {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
  }
  .waybill a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .waybill a:hover, .waybill a:focus-visible {
    color: var(--accent);
  }
  h1 {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(30px, 6vw, 50px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
  }
  .standfirst {
    font-size: 22px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    max-width: 60ch;
    text-wrap: balance;
  }

  /* ---- sections ---- */
  section { margin: 0 0 56px; }
  .eyebrow {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
  }
  h2 {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(21px, 3.4vw, 27px);
    letter-spacing: -0.025em;
    font-weight: 600;
    margin: 0 0 18px;
    text-wrap: balance;
  }
  h3 {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17.5px;
    letter-spacing: -0.01em;
    font-weight: 600;
    margin: 30px 0 10px;
  }
  p { margin: 0 0 16px; }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:focus-visible, summary:focus-visible, label:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  strong { font-weight: 700; }

  code, kbd, .mono {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .84em;
  }
  p code, li code, td code, th code, dd code, dt code, legend code {
    background: var(--code-bg);
    padding: .1em .34em;
    border-radius: 2px;
  }
  /* Inline code that carries spaces (an expression, a header, a CLI flag)
     wraps as one whole chip, never mid-expression. Stays a plain inline
     element (not inline-block) so trailing punctuation stays glued to it --
     inline-block boxes get an unconditional wrap opportunity right after
     them even with no space, which orphans a lone period on the next line. */
  p code, li code, dd code, dt code, legend code {
    white-space: nowrap;
  }

  pre {
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 18px;
    border-radius: 2px;
  }
  pre.lane-dl { border-color: var(--lane-dl); }
  pre.lane-simple { border-color: var(--lane-simple); }
  pre code { font-size: inherit; background: none; padding: 0; }

  ul, ol { margin: 0 0 16px; padding-left: 1.3em; }
  li { margin-bottom: 7px; }
  li::marker { color: var(--muted); }

  /* ---- stage list (a real sequence, so it is numbered) ---- */
  .stages {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .stages li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .stages .n {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--muted);
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .stages .body > :last-child { margin-bottom: 0; }
  .stages h4 {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16.5px;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .stages .where {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
    display: block;
    margin-bottom: 8px;
    word-break: break-word;
  }

  /* ---- figures ---- */
  figure {
    margin: 26px 0;
    padding: 0;
  }
  .figscroll {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 18px 16px;
  }
  figure svg {
    display: block;
    min-width: 640px;
    width: 100%;
    height: auto;
    color: var(--ink);
  }
  figcaption {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
    margin-top: 10px;
  }
  .svg-box { fill: var(--surface-2); stroke: var(--rule); stroke-width: 1; }
  .svg-box-ghost { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 4 3; }
  .svg-lbl { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; fill: currentColor; }
  .svg-sub { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; fill: var(--muted); }
  .svg-edge { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; fill: var(--muted); }
  .flow { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 16 3; animation: flow-move-solid 1.9s linear infinite; }
  .flow-dash { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; animation: flow-move-dash 0.9s linear infinite; }
  @keyframes flow-move-solid { to { stroke-dashoffset: -19; } }
  @keyframes flow-move-dash { to { stroke-dashoffset: -9; } }
  .stripe-dl { fill: var(--lane-dl); }
  .stripe-simple { fill: var(--lane-simple); }

  /* ---- tables ---- */
  .tablescroll { overflow-x: auto; margin: 0 0 20px; }
  table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
  }
  th, td {
    text-align: left;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
  }
  th {
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 10.5px;
    color: var(--muted);
  }
  td.num { font-variant-numeric: tabular-nums; color: var(--muted); width: 3ch; }

  /* ---- checkpoint (quiz) ---- */
  .check {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 16px 20px;
    margin: 28px 0;
    box-shadow: var(--shadow);
  }
  .check-hd {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 -20px 18px;
    padding: 0 20px 10px;
    border-bottom: 1px solid var(--rule);
  }
  .q { border: 0; margin: 0 0 22px; padding: 0; }
  .q:last-of-type { margin-bottom: 0; }
  .q legend {
    padding: 0;
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 10px;
    text-wrap: balance;
  }
  .q legend .qn {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--muted);
    display: block;
    margin-bottom: 3px;
  }
  .opts { display: flex; flex-direction: column; gap: 2px; }
  .opts label {
    display: grid;
    grid-template-columns: 16px 34px minmax(0, 1fr);
    align-items: start;
    gap: 0 8px;
    padding: 6px 8px 6px 4px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1.5;
  }
  .opts label:hover { background: var(--surface-2); }
  .opts input { margin: 5px 0 0; accent-color: var(--accent); }
  .opts label .mark {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    padding-top: 2px;
  }
  .opts label:has(input:checked) { background: var(--surface-2); }
  .opts label.correct:has(input:checked) { color: var(--lane-simple); font-weight: 600; }
  .opts label.correct:has(input:checked) .mark::after { content: " OK"; }
  .opts label:not(.correct):has(input:checked) { color: var(--lane-dl); }
  .opts label:not(.correct):has(input:checked) .mark::after { content: " NO"; }

  .why {
    display: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--rule-soft);
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
  }
  .q:has(input:checked) .why { display: block; }
  .why b { color: var(--ink); }

  /* ---- callout ---- */
  .note {
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    padding: 14px 18px;
    margin: 24px 0;
    border-radius: 2px;
    font-size: 17.5px;
  }
  .note > :last-child { margin-bottom: 0; }
  .note .tag {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--warn);
    display: block;
    margin-bottom: 6px;
  }
  .note pre { background: var(--surface); border-color: var(--rule); }

  dl.defs { margin: 0 0 20px; }
  dl.defs dt {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 14px;
  }
  dl.defs dd { margin: 4px 0 0; padding-left: 0; }

  blockquote {
    margin: 20px 0;
    padding: 2px 0 2px 18px;
    border-left: 2px solid var(--accent);
    font-size: 18px;
  }
  blockquote p { margin-bottom: 6px; }
  blockquote .cite {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
    display: block;
  }

  footer.colophon {
    border-top: 2px solid var(--ink);
    padding-top: 18px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--muted);
  }

  .series-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 56px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
  }
  .series-nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    padding: 4px 0;
  }
  .series-nav a:hover, .series-nav a:focus-visible { color: var(--accent); }
  .series-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .series-nav .dir {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .series-nav .ttl {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
  }
  .series-nav .next { grid-column: 2; text-align: right; align-items: flex-end; }
  @media (max-width: 480px) {
    .series-nav { grid-template-columns: 1fr; }
    .series-nav .next { grid-column: 1; text-align: left; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ---- expand-to-view: diagrams, and code that actually overflows ---- */
  .figscroll, pre { position: relative; }
  .is-expandable { cursor: zoom-in; }
  .expand-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 3px 8px;
    line-height: 1.4;
  }
  .expand-btn::before { content: "\2922"; font-size: 12px; }
  .is-expandable .expand-btn { display: inline-flex; }
  .is-expandable:hover .expand-btn,
  .is-expandable:focus-visible .expand-btn {
    color: var(--accent);
    border-color: var(--accent);
  }

  dialog.lightbox {
    max-width: min(96vw, 1400px);
    max-height: 92vh;
    width: 96vw;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
  }
  dialog.lightbox::backdrop { background: rgba(10,12,11,.6); }
  .lightbox-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-2);
  }
  .lightbox-hd span {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .lightbox-close {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--muted);
    background: none;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 3px 9px;
    cursor: pointer;
  }
  .lightbox-close:hover, .lightbox-close:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
  }
  .lightbox-body {
    overflow: auto;
    padding: 20px;
    max-height: calc(92vh - 45px);
  }
  .lightbox-body svg {
    display: block;
    min-width: 980px;
    width: 100%;
    height: auto;
    color: var(--ink);
  }
  .lightbox-body pre {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ---- table of contents ---- */
  .toc-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 16px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow), 0 4px 16px rgba(0,0,0,.14);
  }
  .toc-toggle:hover, .toc-toggle:focus-visible { color: var(--accent); border-color: var(--accent); }
  .toc-panel {
    position: fixed;
    right: 20px;
    bottom: 76px;
    z-index: 40;
    width: min(280px, calc(100vw - 40px));
    max-height: min(60vh, 520px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: var(--shadow), 0 8px 30px rgba(0,0,0,.2);
    display: none;
  }
  .toc-panel.open { display: block; }
  .toc-label {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
  }
  .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .toc-list a {
    display: block;
    padding: 6px 10px;
    margin: 0 -10px;
    border-radius: 4px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
  }
  .toc-list a:hover, .toc-list a:focus-visible { background: var(--surface-2); color: var(--ink); }
  .toc-list a.active { color: var(--accent); font-weight: 600; }
  .toc-top {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid var(--rule-soft);
    background: none;
    color: var(--muted);
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }
  .toc-top:hover, .toc-top:focus-visible { color: var(--accent); }
  @media (min-width: 1500px) {
    .toc-toggle { display: none; }
    .toc-panel {
      display: block;
      position: fixed;
      top: 160px;
      right: 40px;
      bottom: auto;
      width: 220px;
      max-height: calc(100vh - 200px);
      background: none;
      border: none;
      box-shadow: none;
      padding: 0 0 0 16px;
      border-left: 1px solid var(--rule-soft);
      border-radius: 0;
    }
  }
  /* ---- Pyramid-isms glossary ---- */
  /* Glossary + search toggles share one fixed row so their panels, which
     both drop down from left:20px, never open underneath a button --
     that's what happened when each toggle carried its own top offset. */
  .left-toolbar {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 42;
    display: flex;
    gap: 8px;
  }
  .glossary-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 16px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow), 0 4px 16px rgba(0,0,0,.14);
  }
  .glossary-toggle:hover, .glossary-toggle:focus-visible { color: var(--accent); border-color: var(--accent); }
  .glossary-panel {
    position: fixed;
    left: 20px;
    top: 68px;
    z-index: 40;
    width: min(360px, calc(100vw - 40px));
    max-height: min(64vh, 560px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: var(--shadow), 0 8px 30px rgba(0,0,0,.2);
    display: none;
  }
  .glossary-panel.open { display: block; }
  .glossary-panel .toc-label { margin-bottom: 10px; }
  .glossary-list { margin: 0; }
  .glossary-list dt {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 12px;
  }
  .glossary-list dt:first-child { margin-top: 0; }
  .glossary-list dd {
    margin: 3px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
  }
  /* ---- global search ---- */
  .search-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 16px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow), 0 4px 16px rgba(0,0,0,.14);
  }
  .search-toggle:hover, .search-toggle:focus-visible { color: var(--accent); border-color: var(--accent); }
  .search-panel {
    position: fixed;
    left: 20px;
    top: 68px;
    z-index: 41;
    width: min(420px, calc(100vw - 40px));
    max-height: min(70vh, 620px);
    overflow: hidden;
    display: none;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: var(--shadow), 0 8px 30px rgba(0,0,0,.2);
  }
  .search-panel.open { display: flex; }
  .search-panel .toc-label { margin-bottom: 10px; }
  #search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    background: var(--ground);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
  }
  #search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .search-results {
    overflow-y: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .search-result {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
  }
  .search-result:hover, .search-result:focus-visible { background: var(--surface-2); }
  .search-result-guide {
    display: block;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2px;
  }
  .search-result-heading {
    display: block;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .search-result-excerpt {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--muted);
  }
  .search-group-label {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 10px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rule-soft);
  }
  .search-group-label:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  /* Search-term highlight: both inside the results dropdown and, carried
     over via ?hl=, on the destination page after following a result. */
  mark.search-hl {
    background: var(--accent);
    color: var(--ground);
    padding: 0 2px;
    border-radius: 2px;
  }
  .search-empty, .search-hint {
    font-size: 13px;
    color: var(--muted);
    margin: 8px 0 0;
  }
@media print {
  body { background: #fff; color: #111; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .why { display: block !important; }
  .check, .note, figure, .stages li { break-inside: avoid; }
  .figscroll { overflow: visible; }
  figure svg { min-width: 0; }
  .opts label:hover { background: none; }
  a { color: inherit; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .expand-btn, dialog.lightbox { display: none !important; }
  .toc-toggle, .toc-panel { display: none !important; }
  .flow, .flow-dash { animation: none !important; }
}

/* Long package filenames and commands must fit the reading column. */
p code, li code, dd code, dt code, legend code { white-space: normal; overflow-wrap: anywhere; }
section, .standfirst, .colophon { overflow-wrap: anywhere; }
.skip-link { position: absolute; top: 8px; left: 20px; z-index: 100; transform: translateY(-200%); padding: 8px 12px; background: var(--surface); }
.skip-link:focus { transform: none; }
button:focus-visible, pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--ground); }
@media (max-width: 1499px) { header.masthead { padding-top: 80px; } }
@media print { .left-toolbar, .search-panel, .glossary-panel, .skip-link { display: none !important; } }