/* Super Bot Investor: one dossier sheet, red on black, built to his T-800 spec poster.
   Every share below is measured off that file (NOTE.md > Reference teardown) and applied to the
   PAGE COLUMN, never to the window. One hue, one scale, one frame. */

@font-face {
  font-family: "Audiowide";
  src: url("/assets/fonts/Audiowide.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "RX100";
  src: url("/assets/fonts/RX100.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* the ground: his frame is 50.4% under luminance 16 and carries no neutral at all */
  --black: #050306;
  --black-lift: #0b0406;

  /* one hue, four inks, every one of them measured against --black:
     paper 14.9:1, lift 9.1:1, ink 5.3:1, muted 5.6:1 (tools/legibility.mjs proves it) */
  --paper: #ffe2de;
  --lift: #ff8178;
  --ink: #ff2e26;
  --muted: #e35a52;

  /* decoration only, never text */
  --rule: #6e1512;
  --rule-lit: #c01a19;
  --grat: #2a0809;
  --fill: #1a0506;

  --t-14: 14px;
  --t-15: 15px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;
  --t-display: 92px;

  --page: 1120px;
  --gutter: 20px;
  --mono: "RX100", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --face: "Audiowide", "RX100", ui-monospace, monospace;
  --caps: 0.08em;
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  margin: 0;
  background: var(--black);
  color: var(--lift);
  font: var(--t-14)/1.6 var(--mono);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--black);
  padding: 12px 20px;
  font-size: var(--t-14);
  z-index: 10;
}
.skip:focus { left: 16px; top: 8px; }

:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* every link on the sheet is printed in its own ink: a browser blue on this ground reads as a
   page that failed to load its own stylesheet */
a { color: var(--paper); text-underline-offset: 3px; text-decoration-color: var(--rule-lit); }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }

h1, h2, p, dl, dd, dt, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

.label {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  font-size: var(--t-14);
}
.val { color: var(--paper); }
.val--down { color: var(--ink); }
.val--none { color: var(--muted); }

/* ---- the sheet ---------------------------------------------------------- */

.sheet {
  width: min(var(--page), 100% - 48px);
  margin: 28px auto 36px;
  display: block;
}

/* 1. the serial line: his top line, 1.9% of the frame, carrying the machine's own number */

.serial {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  min-height: 52px;
  position: relative;
}
.serial::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.serial__name {
  font: var(--t-18)/1 var(--face);
  color: var(--paper);
  letter-spacing: 0.01em;
}
.serial__tick {
  font: var(--t-18)/1 var(--face);
  color: var(--ink);
}
.serial__sep { color: var(--muted); }
.serial__label {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--caps);
}
.serial__mint {
  font-family: var(--mono);
  font-size: var(--t-14);
  color: var(--paper);
  user-select: all;
  word-break: break-all;
  min-width: 0;
}
.serial__mint[data-state="empty"] { color: var(--muted); user-select: none; }
.serial__utc { margin-left: auto; color: var(--lift); white-space: nowrap; }

/* 2. the body: his own shares, taken from the page column (35.7% / 64.3%) */

.body {
  display: grid;
  grid-template-columns: calc(35.7% - var(--gutter) / 2) calc(64.3% - var(--gutter) / 2);
  gap: var(--gutter);
  align-items: stretch;
  margin-top: 16px;
}

/* the blocks fill the column the way his own left column does: the free height is spread
   between them, never left as one hole at the foot */
.rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; justify-content: space-between; }

.block { position: relative; padding-top: 12px; }
.block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.block:first-child { padding-top: 0; }
.block:first-child::before { display: none; }
.block__head {
  font: var(--t-14)/1.4 var(--mono);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  margin-bottom: 8px;
}

.block--premise { position: relative; padding-left: 34px; }
.block--premise p { font-size: var(--t-15); line-height: 1.62; color: var(--lift); }
.block--premise p + p { margin-top: 10px; }
.chev {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--ink);
  font-size: var(--t-18);
  letter-spacing: -0.04em;
}

.block--maker { display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: start; }
.maker__mark { width: 124px; height: 124px; display: block; image-rendering: auto; }
.maker__risk { font-size: var(--t-14); color: var(--muted); line-height: 1.55; }

/* 3. the one display element: his MODEL / T-800 pair, as the live seat count.
      It bleeds past its own column exactly as his does (4.4% of the frame). */

.block--display { padding-top: 14px; }
.display {
  font: var(--t-display)/0.92 var(--face);
  color: var(--paper);
  margin: 2px 0 6px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 0 26px rgba(255, 46, 38, 0.45);
}
.display #seatsTaken { color: var(--ink); }
.display__under { font-size: var(--t-14); color: var(--lift); }

/* 4. the readout: his 14 line block, enlarged to a size that can actually be read */

.readout { display: block; }
.readout__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  height: 24px;
  align-items: baseline;
  position: relative;
}
.readout__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0.8; }
.readout__row:last-child::after { display: none; }
.readout dt { color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--t-14); }
.readout dd { color: var(--paper); font-size: var(--t-14); text-align: right; white-space: nowrap; }

/* 5. the order: his connor.sarah line, the ruled stamp, the place line */

.target {
  font: var(--t-22)/1.2 var(--face);
  color: var(--lift);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.stamp {
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  padding: 16px 30px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 4px 4px 12px;
  background: var(--fill);
}
.stamp__line {
  font: var(--t-28)/1.08 var(--face);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.stamp.is-ordered .stamp__line { color: var(--paper); }
.stamp.is-ordered { border-color: var(--paper); outline-color: var(--paper); }
.place { font: var(--t-18)/1.3 var(--face); color: var(--lift); }
.place--count { margin-top: 8px; font-family: var(--mono); font-size: var(--t-14); }

/* 6. the tail of the rail: his micro tail, as the decisions actually taken */

.block--tape { display: flex; flex-direction: column; min-height: 96px; }
.minitape { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.minitape li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: baseline;
  height: 26px;
  position: relative;
  font-size: var(--t-14);
  white-space: nowrap;
  overflow: hidden;
}
.minitape li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0.8; }
.minitape li.minitape__empty::after { display: none; }
.minitape__seat { color: var(--ink); }
.minitape__what { color: var(--lift); overflow: hidden; text-overflow: ellipsis; }
.minitape__when { color: var(--muted); }
.minitape li.minitape__empty { display: block; height: auto; color: var(--muted); white-space: normal; border: 0; overflow: visible; }

/* 7. the plate: his framed panel, the graticule, and the index on its own rule */

.plate { display: flex; flex-direction: column; min-width: 0; }
.plate__rule { padding-bottom: 8px; }
.plate__title {
  font: var(--t-18)/1.2 var(--face);
  color: var(--paper);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-bottom: 8px;
}
/* six equal keys across the plate's own width: equal cells, so the row can never break into
   five and one, and the index reads as one printed line on the frame's edge */
.index { display: grid; grid-template-columns: repeat(6, auto); gap: 6px; justify-content: space-between; }
.index__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--rule-lit);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-14);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.index__key:hover { background: var(--fill); color: var(--paper); }
.index__key.is-open { background: var(--ink); color: var(--black); border-color: var(--ink); }

.plate__body {
  border: 2px solid var(--rule-lit);
  background:
    repeating-linear-gradient(to right, var(--grat) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--grat) 0 1px, transparent 1px 40px),
    var(--black);
  padding: 20px 28px 24px;
  min-height: 812px;
  isolation: isolate;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* the plate closes on its own foot, whatever height the column ends up with, so the free space
   is never one hole under the last row */
.plate__foot { margin-top: auto; }
.plate__loading { color: var(--muted); }

/* the plate's own head: three readings on the left, the record column on the right */

.deck {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 20px;
  align-items: start;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 14px;
  min-height: 200px;
}
.deck::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.reading { position: relative; padding: 6px 0 6px 16px; }
.reading::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--rule-lit); }
.reading__label { display: block; color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--t-14); }
.reading__value { font: var(--t-28)/1.1 var(--face); color: var(--paper); margin-top: 4px; }
.reading__note { display: block; color: var(--muted); font-size: var(--t-14); margin-top: 2px; }

.record { border: 1px solid var(--rule-lit); padding: 16px 24px; background: var(--black-lift); min-height: 200px; }
.record__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.record__seat { font: var(--t-22)/1 var(--face); color: var(--paper); }
.record__post { color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); }
.record__portrait { width: 100%; height: 132px; object-fit: contain; object-position: center; margin: 10px 0 12px; display: block; }
.record__row { position: relative; display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-14); padding-top: 5px; margin-top: 5px; }
.record__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); opacity: 0.8; }
.record__row span:first-child { color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); }
.record__row span:last-child { color: var(--paper); text-align: right; overflow-wrap: anywhere; }
.record__reason { font-size: var(--t-14); color: var(--lift); margin-top: 10px; line-height: 1.5; }
.record__empty { color: var(--muted); font-size: var(--t-14); line-height: 1.55; }

.record__key { margin-top: 10px; width: 100%; }
.record { display: flex; flex-direction: column; }

/* one seat, in full: the bot page the brief asks for */
/* the left column runs the whole height of the plate, closed by its own rule, so the space under
   the seat's readings reads as a ruled column and not as a hole */
.seatpage { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.seatpage__art { width: 100%; height: 150px; object-fit: contain; display: block; margin: 10px 0 12px; }
.seatpage__left { position: relative; padding-right: 20px; }
.seatpage__left::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.seatpage__right { min-width: 0; }

/* the roster: seventeen rows, the whole point of the first plate */

.roster { width: 100%; border-collapse: collapse; table-layout: fixed; }
.roster caption { text-align: left; color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--t-14); padding: 0 10px 6px; }
.roster th {
  text-align: left;
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  font-size: var(--t-14);
  padding: 0 8px 6px 0;
  white-space: nowrap;
  position: relative;
}
.roster th::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-lit); }
.roster td {
  position: relative;
  padding: 0 8px 0 0;
  height: 30px;
  font-size: var(--t-14);
  color: var(--lift);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster td::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0.8; }
.roster tr.is-open td::before { content: ""; position: absolute; inset: 0; background: var(--fill); z-index: -1; }
.roster tr.is-empty td { color: var(--muted); }
.roster tr.is-next td { color: var(--lift); }
.roster tr.is-next .seatpost { color: var(--paper); }
.roster tr[data-seat] { cursor: pointer; }
.roster tr[data-seat]:hover td::before { content: ""; position: absolute; inset: 0; background: var(--fill); z-index: -1; }
.roster tr[data-seat]:hover td { color: var(--paper); }
.roster tr[data-seat]:focus-within td::before { content: ""; position: absolute; inset: 0; background: var(--fill); z-index: -1; }
.seatno { color: var(--ink); width: 46px; }
/* the open row carries a fill, so its first and last cells keep their text off the fill edge */
.roster td:first-child, .roster th:first-child { padding-left: 10px; }
.roster td:last-child, .roster th:last-child { padding-right: 10px; }
.roster { margin-left: -10px; width: calc(100% + 20px); }
.seatpost { color: var(--paper); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.rowbtn {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plate__foot { position: relative; margin-top: 14px; padding-top: 11px; display: grid; gap: 6px; }
.plate__foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.plate__foot code { color: var(--paper); font-family: var(--mono); }

/* the tape plate */

.tape { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tape th { position: relative; text-align: left; font-weight: 400; color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--t-14); padding: 0 8px 6px 0; }
.tape th::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-lit); }
.tape td { position: relative; padding: 8px 8px 8px 0; font-size: var(--t-14); color: var(--lift); vertical-align: top; }
.tape td::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0.8; }
.tape .reason { color: var(--paper); white-space: normal; line-height: 1.5; }
.tape td:first-child { white-space: nowrap; }
.seatpage .tape { table-layout: auto; }
.seatpage .tape td { vertical-align: top; }
.tape .hash { color: var(--muted); font-size: var(--t-14); overflow-wrap: anywhere; }
.tape--three td { padding: 10px 10px 10px 0; }
.proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.proof .key { height: 34px; padding: 0 16px; }
.verdict { display: block; margin-top: 6px; }
.verdict--ok { color: var(--paper); }
.verdict--bad { color: var(--ink); }

/* the bench plate */

.bench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cand { border: 1px solid var(--rule-lit); padding: 18px 24px; display: flex; flex-direction: column; gap: 8px; background: var(--black-lift); }
.cand__post { font: var(--t-22)/1.1 var(--face); color: var(--paper); }
.cand__model { color: var(--ink); font-size: var(--t-14); overflow-wrap: anywhere; }
.cand__strategy { font-size: var(--t-14); color: var(--lift); line-height: 1.55; }
.cand__strategy li { padding-left: 14px; position: relative; }
.cand__strategy li::before { content: "·"; position: absolute; left: 2px; color: var(--ink); }
.cand__bar { height: 10px; border: 1px solid var(--rule-lit); }
.cand__fill { height: 100%; background: var(--ink); width: 0; display: block; }
/* the weight, the bar and the key are one group at the foot of every candidate, so three cards of
   different lengths still line up on their last three rows */
.cand__votes { font-size: var(--t-14); color: var(--paper); margin-top: auto; }

.bankchart { width: 100%; height: 160px; display: block; margin: 4px 0 8px; }

/* forms, keys */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--rule-lit);
  background: var(--fill);
  color: var(--paper);
  font: var(--t-14)/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s, background 0.18s, color 0.18s;
}
.key:hover { background: var(--ink); color: var(--black); border-color: var(--ink); }
.key:active { transform: translateY(1px); }
.key--small { height: 36px; padding: 0 16px; }
.key[disabled], .key[aria-disabled="true"] {
  opacity: 0.74;
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}
.key--mark img { width: 20px; height: 20px; object-fit: contain; display: block; }
.key[aria-disabled="true"] img { filter: grayscale(1) brightness(0.8); }

.field {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--rule-lit);
  background: var(--black-lift);
  color: var(--paper);
  font: var(--t-14)/1 var(--mono);
  min-width: 0;
  width: 100%;
}
.field::placeholder { color: var(--muted); }

.note { color: var(--muted); font-size: var(--t-14); line-height: 1.55; }
.note--warn { color: var(--ink); }

/* the steps of the method plate */

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.step { position: relative; padding-top: 14px; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule-lit); }
.step__n { font: var(--t-28)/1 var(--face); color: var(--ink); }
.step__h { font: var(--t-18)/1.2 var(--face); color: var(--paper); margin: 6px 0 6px; }
.step p { font-size: var(--t-15); color: var(--lift); line-height: 1.6; }

/* 8. the manufacturer's band that closes the sheet: his bottom band, between two rules */

.band {
  position: relative;
  margin-top: 22px;
  padding: 19px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  gap: 20px;
  align-items: center;
}
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule-lit); }
.band::before { top: 0; }
.band::after { bottom: 0; }
.band__word {
  font: 34px/1 var(--face);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.band__row { position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-14); padding-bottom: 3px; margin-bottom: 3px; }
.band__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0.8; }
.band__row dt { color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps); }
.band__row dd { color: var(--paper); }
.band__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.band__links .key { width: 100%; padding: 0 16px; justify-content: flex-start; }
.band__mark { display: flex; align-items: center; gap: 12px; }
.band__mark img { width: 72px; height: 72px; object-fit: contain; }
.band__maker { font: var(--t-14)/1.3 var(--face); color: var(--paper); letter-spacing: 0.01em; }

/* ---- widths ------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --t-display: 76px; }
  /* the model id is the first thing to go when the plate narrows: the lab beside it already names
     the maker, and the full id is one row click away on the seat plate */
  .roster .hide-m { display: none; }
  .roster { table-layout: auto; }
  .roster col { width: auto !important; }
  .deck { grid-template-columns: 1fr 200px; }
}

@media (max-width: 900px) {
  :root { --t-display: 72px; --page: 760px; }
  .body { grid-template-columns: minmax(0, 1fr); }
  /* the display block moves to the top of the column on a phone, so the printed rule moves with it */
  .block--display { order: -1; }
  .block--display::before { display: none; }
  .block:first-child::before { display: block; }
  .plate__body { min-height: 560px; }
  .deck { grid-template-columns: minmax(0, 1fr); }
  .record { min-height: 0; }
  .bench { grid-template-columns: minmax(0, 1fr); }
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .seatpage { grid-template-columns: minmax(0, 1fr); }
  .seatpage__left { padding-right: 0; padding-bottom: 16px; }
  .seatpage__left::after { right: auto; left: 0; top: auto; bottom: 0; width: auto; height: 1px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .band { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .band__mark { justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --t-display: 64px; }
  .sheet { width: min(var(--page), 100% - 32px); margin-top: 18px; }
  .block--maker { grid-template-columns: 84px 1fr; }
  .maker__mark { width: 84px; height: 84px; }
  .plate__body { padding: 16px 16px 18px; min-height: 520px; }
  .readings { grid-template-columns: minmax(0, 1fr); }
  .serial__utc { margin-left: 0; }
  .roster .hide-s, .tape .hide-s { display: none; }
  .roster { table-layout: auto; }
  .roster col { width: auto !important; }
  .seatno { width: auto; padding-right: 10px; }
  .band__links { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 400px) {
  :root { --t-display: 56px; }
  /* three keys of the index do not fit 296 px without pressing their own labels: two do */
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { width: min(var(--page), 100% - 24px); }
}

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