/* ============================================================================
   sorta11y — landing / docs site
   "clean hybrid": the demo's calm, warm-paper cleanliness (system sans body,
   hairlines, soft radii, full-width page) with monospace kept as the brand
   voice — headlines, labels, chips, and the black code/[sr] terminal panels.
   No window chrome, no hard offset shadows.
   A11y notes:
     1. Small caption/label greys stay AA (>= 4.5:1): --faint is #595959.
     2. Real prefers-reduced-motion support.
   Roles + the focusable handle button come from Sorta11y.create() itself.
   ========================================================================== */

/* Space Mono — self-hosted (fonts/, SIL OFL 1.1, see fonts/OFL.txt), latin
   subset, weights 400 + 700. Keeps the site free of third-party requests. */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f7f6f3; /* warm off-white page */
  --surface: #ffffff; /* rows, cards, tables */
  --ink: #1a1a1a;
  --paper: #fff;

  --line: #e3e0d9; /* decorative hairlines */
  --edge: #c9c4b8; /* component boundaries (rows, chips, tables) */
  --zebra: #f4f2ec; /* alternating table rows */

  --code-bg: #000; /* the terminal accents stay pitch black */
  --code-ink: #eee;
  --log-ink: #fff;

  /* Text tiers — all clear WCAG AA on white/off-white at their sizes. */
  --muted: #444; /* body copy, descriptions (~9.7:1) */
  --muted-2: #555; /* prompts (~7.5:1) */
  --faint: #595959; /* small labels/captions (~7:1) */

  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --radius: 6px;
  --shadow-drag: 0 8px 20px rgba(0, 0, 0, 0.16);

  /* Shared by .panel and the .log fixed-height calc — keep in sync via tokens,
     not duplicated magic numbers. */
  --panel-pad: 18px;
  --panel-lh: 1.8;

  --dur-color: 0.12s;
  --dur-move: 0.15s;
  --ease: ease;

  /* Full-bleed bars, centered content: sections pad out to the viewport edge
     until the content column hits its max width. */
  --gutter: max(24px, calc((100% - 1160px) / 2));

  /* Height of the sticky header. site.js overwrites it with the measured
     height (ResizeObserver): the nav wraps onto more lines as the viewport
     narrows or text is zoomed. The values here and in the media queries below
     are only the no-JS / pre-script fallback — its measured one- to four-line
     heights (55 / 91 / 122 / 159px), rounded up, with breakpoints rounded so
     the fallback errs on the tall side. */
  --header-h: 56px;
  /* Clear space between the header and whatever scrolls into view below it
     (fits the 3px + 3px focus ring with room to spare). */
  --focus-gap: 16px;
}
@media (max-width: 42rem) {
  :root {
    --header-h: 92px;
  }
}
@media (max-width: 29rem) {
  :root {
    --header-h: 124px;
  }
}
@media (max-width: 23rem) {
  :root {
    --header-h: 160px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  /* In-page anchors and focus must not hide under the sticky header
     (WCAG 2.4.11). Follows the header's real height via --header-h. */
  scroll-padding-top: calc(var(--header-h) + var(--focus-gap));
  scroll-padding-bottom: var(--focus-gap);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

a {
  color: inherit;
}

/* Focus: keyboard-only ring, strong enough to read on rows and black panels. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}
/* Ink-on-ink is invisible — invert the ring on dark surfaces: footer links,
   and the handle button inside a held/dragged (inverted) row. */
.foot :focus-visible,
.s11y-item--grabbed :focus-visible,
.s11y-item--dragging :focus-visible {
  outline-color: var(--paper);
}

/* ---- Top bar ------------------------------------------------------------ */
/* Sticky lives on the header: .nav is exactly as tall as its parent, so
   sticky on .nav itself had zero room to stick. */
header {
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  padding: 14px var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
}
.nav__brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.nav__links a {
  text-decoration: none;
}
.nav__links a:hover {
  text-decoration: underline;
}
.nav__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.badge {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--surface);
}
.badge--fill {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---- Sections ----------------------------------------------------------- */
.section {
  padding: 56px var(--gutter);
  border-top: 1px solid var(--line);
}
/* (.section:first-of-type would never match — the hero is also a <section>,
   so :first-of-type resolves to it, not to the first .section.) */
.hero + .section {
  border-top: 0;
}
.kicker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin: 0 0 14px;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
}
h1 {
  font-size: clamp(2.4rem, 1rem + 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.6rem, 1rem + 2.5vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  padding: 72px var(--gutter) 48px;
}
.hero__prompt {
  font-family: var(--mono);
  color: var(--muted-2);
  margin: 0 0 18px;
}
.hero__sub {
  max-width: 62ch;
  color: var(--muted);
  font-size: 18px;
  margin: 22px 0 28px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--code-bg);
  color: var(--paper);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: var(--radius);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-color) var(--ease),
    color var(--dur-color) var(--ease);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.cta-note {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
  margin: 14px 0 0;
}
.caret {
  display: inline-block;
  width: 0.5ch;
  /* 4 blinks, then rest visible (WCAG 2.2.2: blinking stops within 5s; the
     log carets re-blink briefly after each announcement, which also stays
     under the limit). */
  animation: blink 1s step-end 4;
}
@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* ---- Playground --------------------------------------------------------- */
.play__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.play__note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}
.demo {
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
/* (.demo:first-of-type would never match — .play__head is the first <div>.) */
.play__head + .demo {
  border-top: 0;
  padding-top: 20px;
}
.demo__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  align-items: baseline;
}
.sig {
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--surface);
  white-space: nowrap;
}
.demo__desc {
  max-width: 82ch;
  font-size: 15px;
  color: var(--muted);
  margin: 10px 0 18px;
}
.demo__desc b {
  color: var(--ink);
}
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 18px;
}
/* Real <fieldset>/<legend> so screen readers hear the group name with each
   control (WCAG 1.3.1) — restyled flat, and the legend floats to escape the
   browser's special fieldset-notch rendering and behave like a flex item. */
.ctrl-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ctrl-group legend {
  float: left;
  padding: 0;
}
.controls__label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-transform: uppercase;
}
.opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.opt input {
  width: 15px;
  height: 15px;
  accent-color: var(--ink);
  cursor: pointer;
}
/* A dependent option (e.g. dragOnItem without a handle) reads as inert but
   stays AA-legible (--faint is ~7:1). */
.opt:has(input:disabled) {
  color: var(--faint);
  cursor: not-allowed;
}
.opt input:disabled {
  cursor: not-allowed;
}
.demo__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
/* min(…, 100%) keeps the two-column threshold on wide screens without ever
   exceeding the viewport — fixed minimums forced horizontal page scroll at
   320px (WCAG 1.4.10 reflow). */
.demo__list {
  flex: 1.3;
  min-width: min(320px, 100%);
}
.demo__code {
  flex: 1;
  min-width: min(300px, 100%);
}

/* The sortable list itself */
.slist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-size: 15px;
  transition:
    background var(--dur-color) var(--ease),
    color var(--dur-color) var(--ease),
    transform var(--dur-move) var(--ease),
    box-shadow var(--dur-move) var(--ease);
}
/* Built-in state classes from sorta11y: invert + nudge while held/dragged. */
.slist li.s11y-item--grabbed,
.slist li.s11y-item--dragging {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateX(5px);
}
/* Optional consumer hooks demonstrated by the toggles. */
.slist li.is-held {
  box-shadow: 0 0 0 3px var(--ink);
}
.slist li.is-moving {
  box-shadow: var(--shadow-drag);
}
/* Non-color state cue (WCAG 1.4.1): the custom classes also render a text
   badge, not just a shadow. Rows are inverted while held/dragged, so
   currentColor keeps the badge legible. The second content declaration adds
   empty alt text so screen readers don't read the badge on top of the live
   region; older browsers fall back to the plain declaration above it. */
.slist li.is-held::after,
.slist li.is-moving::after {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 2px 6px;
}
.slist li.is-held::after {
  content: "GRABBED";
  content: "GRABBED" / "";
}
.slist li.is-moving::after {
  content: "DRAGGING";
  content: "DRAGGING" / "";
}
/* animation:0 → snappy: kill transitions for this instance. */
.slist--snappy li {
  transition: none;
}

/* Real, focusable braille handle (comes through as a <button> to sorta11y).
   .s11y-handle is the library-generated fromSelect twin — same look.
   At least 24×24 CSS px (WCAG 2.5.8) on its own, without leaning on the
   spacing exception; the glyph stays centred. 24px is also the row's text
   line height, so rows keep their height. */
.drag-handle,
.s11y-handle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 24px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.1em;
  /* ⠿ inks only the top three rows of its 8-dot braille cell, so it sits
     ~0.15em above the text's centre. An extra 0.3em on top (none below)
     lowers the glyph by half that while the 24px box itself stays centred,
     focus ring included. */
  padding: 0.3em 4px 0;
  cursor: grab;
}
.s11y-item--dragging .drag-handle,
.s11y-item--dragging .s11y-handle {
  cursor: grabbing;
}
.s11y-handle--right {
  order: 2;
  margin-left: auto;
}

.spoken {
  font-family: var(--mono);
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}
.spoken b {
  color: var(--ink);
}

/* Black code / log panels — the terminal accent that stays. */
.panel {
  background: var(--code-bg);
  color: var(--code-ink);
  border: 0;
  border-radius: var(--radius);
  padding: var(--panel-pad);
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: var(--panel-lh);
  overflow-x: auto;
  white-space: pre;
}
/* Terminal syntax colors — GitHub-Dark-inspired; every value clears 7:1 on
   the pure-black panel (AA needs 4.5:1 at this size). The page around the
   terminals stays monochrome; the color lives where a terminal would have
   ANSI colors. */
.panel .tok-key {
  font-weight: 700;
  color: #d2a8ff; /* API names + literals — ~10.3:1 */
}
.panel .tok-prop {
  color: #79c0ff; /* option / attribute names — ~10.8:1 */
}
.panel .tok-str {
  color: #a5d6ff; /* strings — ~13.4:1 */
}
.panel .tok-num {
  color: #ffa657; /* numbers — ~10:1 */
}
.panel .tok-tag {
  color: #7ee787; /* HTML tag names — ~14:1 */
}
.panel .tok-com {
  color: #9aa5b1; /* comments — ~8.6:1 */
}

/* Visually-hidden (one, shared). */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Playground: keyhint, [sr] log panel, segmented language toggle ---- */
.keyhint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}
.loghead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
/* In blocks A–C the log sits below the code panel — breathe between the two. */
.panel + .loghead {
  margin-top: 18px;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}
.seg__btn {
  appearance: none;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  cursor: pointer;
}
.seg__btn + .seg__btn {
  border-left: 1px solid var(--ink);
}
.seg__btn:hover:not(.is-on) {
  background: var(--zebra);
}
.seg__btn.is-on {
  background: var(--ink);
  color: var(--paper);
}
/* .seg's overflow:hidden clips the global 3px-offset ring entirely — draw the
   indicator inside the button instead, inverted on the filled state. */
.seg__btn:focus-visible {
  outline-offset: -3px;
}
.seg__btn.is-on:focus-visible {
  outline-color: var(--paper);
}
.log {
  color: var(--log-ink);
  /* Logs wrap instead of scrolling: long announcements stay readable and the
     aria-hidden panel never becomes a keyboard-unreachable scroll region. */
  white-space: pre-wrap;
  /* Fixed height — the fullest realistic state (LOG_MAX = 7 entries, one of
     them wrapping onto a second line, plus the caret line) so streaming
     announcements never resize the panel: no layout jumps. Should the log ever
     get fuller than that, align-content pins the newest lines to the bottom
     like a real terminal and the oldest clip away at the top. */
  height: calc(9 * var(--panel-lh) * 1em + 2 * var(--panel-pad));
  overflow: hidden;
  /* "unsafe" is required: plain end gets safety-clamped back to start the
     moment the content overflows — exactly the case we need it for. */
  align-content: end;
  align-content: unsafe end;
}

/* ---- Prose -------------------------------------------------------------- */
.prose {
  max-width: 68ch;
  color: var(--muted);
  margin: 14px 0 24px;
}
.prose--small {
  font-size: 14px;
  margin-top: 20px;
}
.prose b {
  color: var(--ink);
}

/* ---- Comparison table (Why) --------------------------------------------- */
/* Tables keep their min-content width; the wrapper scrolls instead of the
   page (and is focusable so keyboard users can scroll it). */
.table-scroll {
  overflow-x: auto;
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--edge);
  background: var(--surface);
  font-size: 14px;
}
.cmp th,
.cmp td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
}
.cmp thead th {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.cmp tbody tr:nth-child(even) {
  background: var(--zebra);
}
.cmp th:nth-child(n + 2),
.cmp td:nth-child(n + 2) {
  text-align: center;
  width: 20%;
}

/* ---- Keyboard split ------------------------------------------------------ */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
/* .table-scroll wraps .keys inside the flex split — it takes the flex sizing. */
.split > .table-scroll {
  flex: 1;
  min-width: min(300px, 100%);
}
.keys {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--edge);
  background: var(--surface);
  font-size: 14px;
}
.keys th,
.keys td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.keys th {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.keys td {
  color: var(--muted);
}
.callout {
  flex: 1;
  min-width: min(300px, 100%);
  background: var(--code-bg);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: 22px;
}
.callout p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* ---- API panels ----------------------------------------------------------- */
.apis {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.api {
  flex: 1;
  min-width: min(300px, 100%);
  margin: 0;
}
.api figcaption {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* ---- Features grid -------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile {
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tile:nth-child(3n) {
  border-right: 0;
}
.tile:nth-last-child(-n + 3) {
  border-bottom: 0;
}
.tile h3 {
  font-size: 14px;
  margin-bottom: 6px;
}
.tile p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .tiles {
    grid-template-columns: 1fr;
  }
  .tile {
    border-right: 0;
  }
  .tile:nth-last-child(1) {
    border-bottom: 0;
  }
}

/* ---- Footer --------------------------------------------------------------- */
.foot {
  background: var(--code-bg);
  color: var(--paper);
  padding: 44px var(--gutter);
  margin-top: 56px;
}
.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
}
.foot__wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
}
.foot__desc {
  color: #b9b9b9; /* ~11:1 on black */
  font-size: 13px;
  max-width: 42ch;
  margin: 0;
}
.foot__cols {
  display: flex;
  gap: 48px;
}
.foot__coltitle {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #b9b9b9;
  margin: 0 0 10px;
}
.foot__cols a {
  display: block;
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
  padding: 3px 0;
}
.foot__cols a:hover {
  text-decoration: underline;
}
.foot__rule {
  font-family: var(--mono);
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid #555;
  color: #b9b9b9;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* ---- Print ---------------------------------------------------------------- */
@media print {
  header {
    position: static;
  }
  .panel,
  .callout,
  .foot {
    background: #fff;
    color: #000;
    border: 1px solid #000;
  }
  .panel .tok-key,
  .panel .tok-str,
  .panel .tok-num,
  .panel .tok-tag,
  .panel .tok-prop,
  .foot__desc,
  .foot__coltitle,
  .foot__rule,
  .foot__cols a {
    color: #000;
  }
  .panel .tok-com {
    color: #555;
  }
  /* The [sr] logs are transient session output — skip them on paper. */
  .log,
  .loghead,
  .caret {
    display: none;
  }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .caret {
    animation: none;
    opacity: 1;
  }
}