/* BloxToolbox, "the market desk" (2026-10-07).
   One sheet for every page. The Roblox economy set like the markets section of a paper: light ground, ink text,
   hairline rules, numbers in tabular figures, one amber accent for the brand and for marks that carry meaning.
   Red Hat Display for headings, Red Hat Text for reading, Red Hat Mono for figures only.

   Token names (--bg-*, --ink-*, --line, --line-strong, --accent, --amber, --success, --danger, --sans, --mono)
   are kept from the previous sheet on purpose: the inline SVG charts and a few page <style> blocks read them.

   Contents: 1 tokens  2 base  3 type  4 layout  5 masthead + nav  6 footer  7 controls  8 tables  9 page heads
   10 prose  11 homepage  12 limiteds  13 tools  14 tools index  15 blog  16 glossary  17 info pages  18 404
   19 search results  20 utilities */

/* ---------------------------------------------------------------- 1 tokens */
:root {
  color-scheme: light;
  --bg-0: #FFFFFF;
  --bg-1: #F5F7F9;
  --bg-2: #EDF0F3;
  --ink-0: #0B1320;
  --ink-1: #0B1320;
  --ink-2: #4A5566;
  --ink-3: #5A6676;
  --line: #D9DEE5;
  --line-strong: #8A96A6;
  --rule: #0B1320;
  --accent: #B7791F;
  --accent-ink: #8A5A12;
  --amber: #B7791F;
  --up: #137A3E;
  --down: #B42318;
  --flat-fill: #C3CAD3;
  --success: #137A3E;
  --danger: #B42318;
  --focus: #0B1320;
  --shadow: 0 10px 28px rgba(11, 19, 32, .14);

  --display: "Red Hat Display", "Red Hat Text", "Segoe UI", sans-serif;
  --sans: "Red Hat Text", "Segoe UI", sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --pad: clamp(16px, 4vw, 40px);
  --wide: 1280px;
  --narrow: 760px;
  --measure: 37em;
}

/* The dark variant: the same tokens redefined. Chosen from the toggle in the menu row; never the default. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0E141B;
  --bg-1: #151D27;
  --bg-2: #1C2633;
  --ink-0: #E9EDF2;
  --ink-1: #E9EDF2;
  --ink-2: #A9B3C0;
  --ink-3: #97A3B1;
  --line: #2A3543;
  --line-strong: #66737F;
  --rule: #E9EDF2;
  --accent: #D9A23E;
  --accent-ink: #E2B25E;
  --amber: #D9A23E;
  --up: #4CC487;
  --down: #F27E70;
  --flat-fill: #56636F;
  --success: #4CC487;
  --danger: #F27E70;
  --focus: #E9EDF2;
  --shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- 2 base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--ink-0); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
::selection { background: rgba(183, 121, 31, .28); }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
code, kbd, samp {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--bg-1);
  border-radius: 2px;
  padding: 1px 4px;
  overflow-wrap: anywhere;
}
sup { line-height: 0; }

/* ---------------------------------------------------------------- 3 type */
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink-0); margin: 0; }
h1 { font-size: clamp(32px, 4.6vw, 44px); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
h4 { font-size: 17px; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 16px; }
strong, b { font-weight: 700; }
small { font-size: 14px; }
.tnum, .num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 4 layout */
.shell { width: 100%; max-width: var(--wide); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.shell--narrow { max-width: calc(var(--narrow) + 2 * var(--pad)); }
main { display: block; padding-bottom: 24px; }

.breadcrumb { padding-top: 18px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb__sep { display: inline-block; margin: 0 6px; color: var(--ink-3); }
.breadcrumb__sep::before { content: ""; }

/* ---------------------------------------------------------------- 5 masthead + nav */
.mast__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 40px; padding-top: 22px; padding-bottom: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-0); text-decoration: none; }
.brand:hover { color: var(--ink-0); }
.brand__mark { flex: none; display: block; }
.brand__stem { stroke: var(--accent); }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 29px; letter-spacing: -.02em; line-height: 1; }
.mast__tag { margin: 0; flex: 1 1 300px; max-width: 520px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.mast__search { position: relative; flex: 0 1 300px; min-width: 0; }
.mast__input {
  display: block; width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--ink-2); border-radius: 2px; background: var(--bg-0); color: var(--ink-0);
  font: 15px/1 var(--sans);
}
.mast__input::placeholder { color: var(--ink-3); opacity: 1; }
.mast__input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .7; cursor: pointer; }
.mast__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink-0); }

.nav { border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.nav__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 30px; }
.nav__link {
  display: inline-block; padding: 11px 0 9px; border-bottom: 3px solid transparent;
  font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--ink-0); text-decoration: none;
}
.nav__link:hover { color: var(--ink-0); border-bottom-color: var(--line-strong); }
.nav__link[aria-current="page"] { font-weight: 700; border-bottom-color: var(--accent); }
.nav__theme {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 0; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: 500 14.5px/1.4 var(--sans);
}
.nav__theme:hover { color: var(--ink-0); }
.nav__theme-icon { flex: none; }

/* ---------------------------------------------------------------- 6 footer */
.foot { margin-top: 72px; border-top: 2px solid var(--rule); padding: 36px 0 40px; font-size: 14.5px; }
.foot__grid { display: grid; grid-template-columns: minmax(220px, 1.1fr) 1.6fr .9fr .9fr; gap: 32px 40px; }
.brand--foot .brand__name { font-size: 22px; }
.brand--foot .brand__mark { width: 16px; height: 23px; }
.foot__blurb { margin: 14px 0 0; max-width: 36ch; color: var(--ink-2); line-height: 1.55; }
.foot__h { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0; margin: 0 0 10px; }
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li { margin: 0; }
.foot__list a { display: inline-block; padding: 3px 0; color: var(--ink-0); text-decoration: none; line-height: 1.5; }
.foot__list a:hover { color: var(--accent-ink); text-decoration: underline; }
.foot__col--tools .foot__list { columns: 2; column-gap: 28px; }
.foot__col--tools .foot__list li { break-inside: avoid; }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 40px;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.foot__legal p { margin: 0; max-width: 820px; }
.foot__legal a { color: var(--ink-2); }
.foot__copy { white-space: nowrap; }

/* ---------------------------------------------------------------- 7 controls */
label { font-weight: 600; font-size: 14.5px; }
input[type="number"], input[type="text"], input[type="search"], input[type="date"], input[type="url"], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--ink-2); border-radius: 2px; background: var(--bg-0); color: var(--ink-0);
  font: 16px/1.3 var(--sans);
}
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink-0); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink-0); vertical-align: -3px; }
select { padding-right: 32px; }

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border: 1px solid var(--ink-0); border-radius: 2px;
  background: var(--ink-0); color: var(--bg-0); cursor: pointer;
  font: 600 15px/1.2 var(--sans); text-decoration: none;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg-0); text-decoration: none; }
.btn.btn--ghost, .btn.btn--line { background: var(--bg-0); color: var(--ink-0); border-color: var(--ink-0); }
.btn.btn--ghost:hover, .btn.btn--line:hover { background: var(--bg-1); color: var(--ink-0); border-color: var(--ink-0); }
.btn.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14.5px; }
.btn--primary { background: var(--ink-0); color: var(--bg-0); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- 8 tables */
/* .dt: the data tables the bakers write. Generic tables in prose get the same rules below. */
.table-wrap, .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt, .writeup table, .tool-writeup table, .ip-body table, .mini-table, .gid-table {
  width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35;
}
.dt caption, .writeup caption, .ip-body caption {
  caption-side: bottom; text-align: left; padding-top: 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.dt thead th, .writeup thead th, .tool-writeup thead th, .ip-body thead th, .mini-table th, .gid-table th {
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; text-align: left;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--ink-2);
}
.dt td, .dt tbody th, .writeup td, .tool-writeup td, .ip-body td, .mini-table td, .gid-table td {
  padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; text-align: left;
}
.dt tr > :last-child, .writeup tr > :last-child, .tool-writeup tr > :last-child, .mini-table tr > :last-child { padding-right: 0; }
.dt tbody th { font-weight: 600; }
.dt .n, .mini-table .num, .mini-table .wl-num, .writeup td.tnum, .writeup td.num, .tool-writeup td.tnum, .ip-body td.tnum, td.tnum, th.tnum {
  text-align: right; font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dt thead th.n { font-family: var(--sans); font-size: 13.5px; white-space: normal; }
.writeup table, .tool-writeup table { margin: 8px 0 24px; }
.writeup td, .tool-writeup td { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-2); }
.dt .up, .dt .down, .dt .flat { white-space: nowrap; }
.dt .d { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-table th.wl-num, .mini-table th.num { font-family: var(--sans); font-size: 13.5px; }

/* ---------------------------------------------------------------- 9 page heads */
/* Every page title is set the same way: Display 900, a 19px lede, the dates in grey. */
.page-head, .tool-header, .ip-hero, .gd-hero, .bl-hero, .gl-hero, .db-hero {
  padding: 14px 0 26px; margin-bottom: 30px; border-bottom: 2px solid var(--rule);
}
.page-title, .tool-header h1, .ip-hero__title, .gd-hero__title, .bl-hero__title, .gl-hero__title, .db-hero__title, .er-title {
  font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4.6vw, 44px);
  letter-spacing: -.025em; line-height: 1.05; margin: 0;
}
.ip-hero__title em, .gl-hero__title em, .gd-hero__title em { font-style: normal; color: inherit; }
.page-lede, .tool-header__lede, .ip-hero__lede, .gd-hero__lede, .bl-hero__lede, .gl-hero__lede, .db-hero__lede {
  margin: 14px 0 0; max-width: 62ch; font-size: 19px; line-height: 1.5; color: var(--ink-0);
}
.page-dates, .updated-stamp, .ip-hero__updated, .gl-hero__updated {
  display: block; margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.updated-stamp a, .page-dates a { color: var(--ink-2); }
/* Section names that sit above a few titles: plain words, not a label strip. */
.ip-hero__eyebrow, .gd-hero__eyebrow, .bl-hero__eyebrow, .gl-hero__eyebrow, .db-hero__game, .er-tag {
  display: block; margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink-2);
}
.db-hero__top { margin: 0; }
.review-line { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.review-line a { color: var(--ink-2); }

/* ---------------------------------------------------------------- 10 prose */
.writeup, .tool-writeup, .ip-body { font-size: 17px; line-height: 1.65; }
.writeup > *, .tool-writeup > *, .ip-body > * { max-width: var(--measure); }
.writeup > table, .tool-writeup > table, .ip-body > table, .writeup > .table-wrap, .writeup > figure,
.writeup > .fig, .tool-writeup > .table-scroll, .writeup > .table-scroll, .ip-body > .editor-box { max-width: 100%; }
.writeup h2, .tool-writeup h2, .ip-body h2 { margin: 44px 0 12px; font-size: 24px; font-weight: 800; }
.writeup h3, .tool-writeup h3, .ip-body h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 700; }
.writeup > h2:first-child, .tool-writeup > h2:first-child, .ip-body > h2:first-child { margin-top: 8px; }
.writeup p, .tool-writeup p, .ip-body p { margin: 0 0 16px; }
.writeup ul, .writeup ol, .tool-writeup ul, .tool-writeup ol, .ip-body ul, .ip-body ol { margin: 0 0 18px; padding-left: 1.3em; }
.writeup li, .tool-writeup li, .ip-body li { margin: 6px 0; padding-left: 2px; }
.writeup li::marker, .ip-body li::marker { color: var(--ink-2); }
.writeup .muted, .tool-writeup .muted, .ip-body .muted { color: var(--ink-2); }
blockquote { margin: 20px 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); color: var(--ink-2); }

/* FAQ: plain <details> blocks between hairlines (prerender builds FAQPage JSON-LD from them). */
.writeup details, .tool-writeup details, .ip-body details {
  max-width: var(--measure); border-top: 1px solid var(--line); padding: 0;
}
.writeup details:last-of-type, .tool-writeup details:last-of-type { border-bottom: 1px solid var(--line); }
.writeup details + h2, .tool-writeup details + h2 { margin-top: 44px; }
.writeup summary, .tool-writeup summary, .ip-body summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 13px 34px 13px 0; font-weight: 600; font-size: 17px; line-height: 1.45;
}
.writeup summary::-webkit-details-marker, .tool-writeup summary::-webkit-details-marker, .ip-body summary::-webkit-details-marker { display: none; }
.writeup summary::after, .tool-writeup summary::after, .ip-body summary::after {
  content: "+"; position: absolute; right: 4px; top: 11px; font: 400 22px/1 var(--sans); color: var(--ink-2);
}
.writeup details[open] > summary::after, .tool-writeup details[open] > summary::after, .ip-body details[open] > summary::after { content: "\2212"; }
.writeup details > :not(summary), .tool-writeup details > :not(summary), .ip-body details > :not(summary) { margin: 0 0 16px; }
.writeup summary:hover, .tool-writeup summary:hover { color: var(--accent-ink); }

/* Callouts: a full hairline box, never a coloured side rule. */
.callout, .note {
  margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg-1); font-size: 15.5px; line-height: 1.55;
}
.callout--warn, .note--warn { border-color: var(--down); background: var(--bg-0); }

/* Figures baked by scripts/figures.py */
.fig { margin: 24px 0 28px; }
.fig__title { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.fig__svg { display: block; width: 100%; height: auto; }
.fig__cap { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }

/* ---------------------------------------------------------------- 11 homepage */
.desk-top { border-bottom: 1px solid var(--line); }
.desk-intro { padding: 26px 0 18px; }
.desk-intro__title { font-size: clamp(28px, 3.4vw, 36px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; max-width: 28ch; }
.desk-intro__deck { margin: 10px 0 0; max-width: 72ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.kf { padding: 18px 0 24px; border-top: 1px solid var(--line); }
.kf__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-bottom: 16px; }
.kf__title { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.kf__src { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.kf__wrap, .cols-wrap, .figs-wrap { overflow: hidden; padding: 4px; margin: -4px; }
.kf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 18px 0; margin: 0 0 0 -21px; }
.kf__item { min-width: 0; padding: 4px 20px 2px; border-left: 1px solid var(--line); }
.kf__label { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.kf__item dd { margin: 0; }
.kf__num { margin: 6px 0 4px !important; font-family: var(--mono); font-weight: 500; font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kf__num--up { color: var(--up); }
.kf__num--down { color: var(--down); }
.kf__note { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

.desk-sec { padding-top: 48px; }
.desk-sec + .desk-sec { padding-top: 56px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; padding-top: 12px; border-top: 2px solid var(--rule); }
.sec-head__title { font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sec-head__link { font-size: 15px; font-weight: 600; }
.sec-lead { margin: 6px 0 26px; max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 32px 0; margin: 0 -24px 0 -25px; }
.cols__col { min-width: 0; padding: 0 24px; border-left: 1px solid var(--line); }
.col-h { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.col-h--sub { margin: 28px 0 4px; font-size: 17px; }
.col-note { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.col-sub { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }

.breadth__bar, .breadth__keys { display: flex; gap: 2px; }
.breadth__seg { flex: 1 1 0; height: 14px; }
.breadth__seg--up { background: var(--up); }
.breadth__seg--flat { background: var(--flat-fill); }
.breadth__seg--down { background: var(--down); }
.breadth__key { flex: 1 1 0; min-width: 0; padding-top: 6px; font-size: 14px; line-height: 1.2; }
.breadth__key--up { color: var(--up); }
.breadth__key--flat { color: var(--ink-2); }
.breadth__key--down { color: var(--down); }
.breadth__n { display: block; font-family: var(--mono); font-weight: 600; font-size: 20px; line-height: 1.2; }

.bands__row { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; }
.bands__label { flex: 0 0 96px; font-size: 14px; color: var(--ink-2); }
.bands__track { flex: 1 1 auto; min-width: 0; }
.bands__bar { display: block; min-width: 3px; height: 12px; background: var(--accent); }
.bands__num { flex: 0 0 40px; text-align: right; font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.fig--bands .bands { margin-bottom: 4px; }

.board { margin: 0; }
.board__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.spark { min-width: 0; }
.spark__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.spark__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.spark__last { font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.spark__svg { display: block; width: 100%; height: 64px; margin: 6px 0 4px; overflow: visible; }
.spark__range { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.board__cap { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.board__cap a { color: var(--ink-2); }

.dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 56px; }
.dir__col { min-width: 0; }
.dir__group + .dir__group { margin-top: 26px; }
.dir__h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 700;
}
.dir__count { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.dir__list { list-style: none; margin: 0; padding: 0; }
.dir__item { display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 9px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.dir__name { flex: 1 1 200px; font-weight: 600; font-size: 15px; text-decoration: none; }
.dir__name:hover { text-decoration: underline; }
.dir__line { flex: 1 1 200px; font-size: 14.5px; color: var(--ink-2); }
.desk-note .writeup { margin-top: 8px; }

/* ---------------------------------------------------------------- 12 limiteds */
.page-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.page-head__text { flex: 1 1 560px; min-width: 0; }
.figs-wrap { flex: 0 1 520px; min-width: 0; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 14px 0; margin: 0 0 0 -19px; }
.figs__item { padding: 2px 18px; border-left: 1px solid var(--line); min-width: 0; }
.figs dt { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.figs dd { margin: 4px 0 0; font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.block-h { margin: 0 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.lim-layout__aside .block-h, .lim-explain__aside .block-h, .lim-block .block-h { font-size: 19px; font-weight: 700; letter-spacing: 0; }
.lim-layout { display: flex; flex-wrap: wrap; gap: 48px 56px; padding-top: 2px; }
.lim-layout__main { flex: 1 1 640px; min-width: 0; }
.lim-layout__aside { flex: 1 1 340px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.dt--ranked td, .dt--ranked tbody th { padding-top: 6px; padding-bottom: 6px; font-size: 14.5px; }
.dt--ranked tbody th { font-weight: 600; }
.dt__rank { width: 2.4em; color: var(--ink-2); font-size: 14px !important; }
.dt--compact td, .dt--compact tbody th { padding-top: 7px; padding-bottom: 7px; font-size: 14.5px; }
.lim-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
.lim-more__note { margin: 0; font-size: 14px; color: var(--ink-2); }
.lim-more__note a { color: var(--ink-2); }

.panel { border: 1px solid var(--rule); border-radius: 2px; padding: 20px 20px 18px; }
.lim-watch .block-h { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.lim-watch > p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; }
.lim-watch .updated-stamp { margin: 0 0 14px; font-size: 13.5px; }
.lim-watch .input-group { margin: 0; }
.lim-watch label { display: block; margin-bottom: 6px; }
.lim-watch .wl-search-wrap { position: relative; }
.lim-watch .mini-table { margin-top: 16px; font-size: 14.5px; }
.lim-watch #wl-empty { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.lim-watch #wl-error { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--down); border-radius: 2px; font-size: 14.5px; }
.lim-watch .wl-totals { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 12px 0 4px; font-size: 14.5px; font-weight: 600; }
.lim-watch .wl-totals strong { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.lim-watch .wl-totals .wl-muted { flex-basis: 100%; font-weight: 400; }
.lim-watch .wl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lim-watch .wl-actions .btn { min-height: 38px; font-size: 14.5px; padding: 0 16px; }
.lim-watch > p.muted { margin: 12px 0 0; font-size: 13.5px !important; }
.wl-results, .calc-page .tc-results, .calc-page .gh-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px;
  max-height: 320px; overflow-y: auto; background: var(--bg-0);
  border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--shadow);
}
.wl-result, .calc-page .tc-result, .calc-page .gh-result {
  display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 12px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-0); font: 15px/1.35 var(--sans); cursor: pointer;
}
.wl-result:last-child, .calc-page .tc-result:last-child, .calc-page .gh-result:last-child { border-bottom: 0; }
.wl-result:hover, .wl-result:focus-visible, .calc-page .tc-result:hover, .calc-page .gh-result:hover { background: var(--bg-1); }
.wl-result:disabled, .calc-page .tc-result:disabled { opacity: .55; cursor: default; }
.wl-muted, .calc-page .tc-muted, .calc-page .gh-muted { color: var(--ink-2); font-size: .9em; opacity: 1; }
.wl-creator { display: block; }
.wl-num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.wl-remove, .calc-page .tc-remove {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--bg-0); color: var(--ink-0); cursor: pointer; font: 16px/1 var(--sans);
}
.wl-remove:hover, .calc-page .tc-remove:hover { border-color: var(--down); color: var(--down); }

.lim-pending { margin-top: 48px; padding: 18px 0 20px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.lim-pending .block-h { font-size: 21px; margin-bottom: 6px; }
.lim-pending-note { max-width: var(--measure); font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.lim-disclosure > summary {
  display: inline-block; list-style: none; cursor: pointer; line-height: 1.45;
  padding: 9px 16px; border: 1px solid var(--rule); border-radius: 2px; font-weight: 600; font-size: 15px;
}
.lim-disclosure > summary::-webkit-details-marker { display: none; }
.lim-disclosure > summary:hover { background: var(--bg-1); }
.lim-disclosure__why { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.lim-disclosure[open] > summary { margin-bottom: 18px; }

.lim-explain { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 44px; }
.lim-explain__body { flex: 1 1 600px; min-width: 0; }
.lim-explain__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 36px; padding-top: 6px; }
.related { list-style: none; margin: 0; padding: 0; }
.related li { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.related li:first-child { border-top: 1px solid var(--line); }
.related a { font-weight: 600; font-size: 15px; text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }

/* ---------------------------------------------------------------- 13 tools (calc-page) */
.tool-shell { margin: 0 0 8px; padding: 22px 22px 20px; border: 1px solid var(--rule); border-radius: 2px; }
.tool-shell + .tool-shell { margin-top: 24px; }
.tool-shell > .tool-result__label:first-child { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink-0); margin: 0 0 4px; }
.tool-shell h2, .tool-shell h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.tool-shell label { display: block; margin: 0 0 6px; }
.tool-shell label.row { display: inline-flex; margin: 0; font-weight: 500; font-size: 15.5px; }
.tool-shell input[type="number"], .tool-shell input[type="date"], .tool-shell select { max-width: 360px; }
.tool-shell .input-group--2 input, .tool-shell .input-group--3 input, .tool-shell .input-group--2 select, .tool-shell .input-group--3 select { max-width: none; }
.input-group { display: grid; gap: 16px 20px; }
.input-group--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.input-group--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.tool-result { padding-top: 16px; border-top: 1px solid var(--line); }
/* each figure carries a left hairline; the grid is shifted left and clipped so the first figure of every row starts flush */
.tool-result__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 16px 0; margin-left: -19px; clip-path: inset(0 0 0 19px); }
.tool-result__cell { min-width: 0; padding: 2px 18px; border-left: 1px solid var(--line); }
.tool-result__label { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink-2); }
.tool-result__value {
  margin: 4px 0 2px; font-family: var(--mono); font-weight: 500; font-size: 22px; line-height: 1.2;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink-0);
}
.tool-result__sub { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.tool-result > .tool-result__value { font-size: 32px; }
.tool-shell .row { gap: 10px 18px; }
.tool-shell .muted { color: var(--ink-2); }
.pos { color: var(--up); }
.neg { color: var(--down); }
tr.is-best td, tr.is-best th, .is-best { background: var(--bg-1); }
tr.is-best td:first-child { font-weight: 700; }
.calc-page .tool-shell > .muted, .calc-page .tool-shell p { max-width: var(--measure); }
.calc-page .writeup, .calc-page .tool-writeup { margin-top: 44px; }

/* page <style> blocks on three tool pages are left byte-for-byte (a verifier pins one of them); these rules
   restyle them from here, one level more specific. */
.calc-page .tc-grid { gap: 20px; }
.calc-page .tc-side { border: 1px solid var(--line-strong); border-radius: 2px; padding: 18px; }
.calc-page .tc-side h2 { font-size: 19px; font-weight: 700; }
.calc-page .tc-num, .calc-page .tc-total strong, .calc-page #clean-url { font-family: var(--mono); }
.calc-page th.tc-num { font-family: var(--sans); font-size: 13.5px; }
.calc-page .tc-total strong { font-size: 22px; font-weight: 500; }
.calc-page .tc-actions button { border-radius: 2px; border: 1px solid var(--rule); font-weight: 600; padding: 0 16px; min-height: 38px; color: var(--ink-0); background: var(--bg-0); }
.calc-page .tc-actions button:hover { background: var(--bg-1); }
.calc-page #tc-verdict { border: 1px solid var(--rule); border-left: 1px solid var(--rule); border-radius: 2px; padding: 12px 16px; background: var(--bg-1); }
.calc-page #tc-error, .calc-page #gh-error { border: 1px solid var(--down); border-left: 1px solid var(--down); border-radius: 2px; padding: 10px 14px; }
.calc-page #psc-note { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 2px; padding: 10px 14px; background: var(--bg-1); }
.calc-page .gh-popular { gap: 8px; }
.calc-page .gh-chip { border-radius: 2px; border: 1px solid var(--line-strong); padding: 5px 10px; font-size: 14px; color: var(--ink-0); background: var(--bg-0); }
.calc-page .gh-chip:hover { border-color: var(--rule); background: var(--bg-1); }
.calc-page .gh-chip--on { border-color: var(--rule); color: var(--ink-0); font-weight: 600; background: var(--bg-1); }
.calc-page .gh-current { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 22px 0 6px; }
.calc-page .gh-stats { gap: 14px 0; margin: 8px 0 16px; }
.calc-page .gh-stat { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; padding: 2px 16px; }
.calc-page .gh-stat__label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.calc-page .gh-stat__value { font-size: 22px; font-weight: 500; }
.calc-page .gh-stat__sub { font-family: var(--sans); font-size: 13px; }
.calc-page .gh-chart-wrap { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-0); }
.calc-page .gh-line { stroke: var(--ink-0); stroke-width: 1.75; }
.calc-page .gh-dot { fill: var(--ink-0); stroke: var(--bg-0); }
.calc-page .gh-active { fill: var(--accent); stroke: var(--bg-0); }
.calc-page .gh-tip { background: var(--bg-0); border: 1px solid var(--rule); border-radius: 2px; backdrop-filter: none; color: var(--ink-0); box-shadow: var(--shadow); }
.calc-page .gh-caption { color: var(--ink-2); font-size: 13.5px; }
.calc-page .gh-data summary { color: var(--ink-0); font-weight: 600; font-size: 15px; }
.calc-page .gid-table td, .calc-page .gid-table th { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- 14 tools index */
.tools-index__cat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 40px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 21px; font-weight: 800;
}
.tools-index > .tools-index__cat:first-child { margin-top: 8px; }
.tools-index__count { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.lp-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 0 56px; }
.lp-tool {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "desc" "top";
  align-content: start; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-0); text-decoration: none;
}
.lp-tool:hover { color: var(--ink-0); }
.lp-tool:hover .lp-tool__name { text-decoration: underline; text-underline-offset: 3px; }
.lp-tool__name { grid-area: name; font-weight: 700; font-size: 16px; line-height: 1.35; }
.lp-tool__desc { grid-area: desc; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.lp-tool__top { grid-area: top; display: flex; gap: 0; font-size: 13px; color: var(--ink-3); }
.lp-tool__top span + span::before { content: "\00b7"; margin: 0 6px; }

/* ---------------------------------------------------------------- 15 blog */
.gx-grid { display: block; margin-top: -30px; }
.gx-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 0 22px;
  border-bottom: 1px solid var(--line); color: var(--ink-0); text-decoration: none;
}
.gx-card:hover { color: var(--ink-0); }
.gx-card:hover .gx-card__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.gx-card__tag { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gx-card__title { font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.gx-card__desc { margin: 2px 0 0; max-width: var(--measure); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.gx-card__foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gx-card__cta { font-weight: 600; color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }

.gd-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.gd-progress__bar { display: block; height: 100%; width: var(--progress, 0%); background: var(--accent); }
.gd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 18px; font-size: 14.5px; color: var(--ink-2); }
.gd-meta__byline { display: flex; flex-direction: column; gap: 2px; }
.gd-meta__author { font-weight: 700; color: var(--ink-0); }
.gd-meta__sub { color: var(--ink-2); }
.gd-meta__divider { align-self: stretch; width: 1px; background: var(--line); }
.gd-meta__stats { display: flex; gap: 0 28px; }
.gd-meta__stat { display: flex; flex-direction: column-reverse; gap: 2px; }
.gd-meta__stat-num { font-family: var(--mono); font-size: 16px; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.gd-meta__stat-label { font-size: 13.5px; color: var(--ink-2); }
.gd-toc { margin: 0 0 32px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gd-toc__summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; list-style: none; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 17px; }
.gd-toc__summary::-webkit-details-marker { display: none; }
.gd-toc__count { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink-2); }
.gd-toc__list { margin: 10px 0 0; padding-left: 1.4em; font-size: 15.5px; }
.gd-toc__item { margin: 4px 0; break-inside: avoid; }
.gd-toc__item::marker { color: var(--ink-2); font-family: var(--mono); font-size: 14px; }
.byline--bio { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); max-width: var(--measure); }
.byline--bio p { margin: 0; }
.byline__author { color: var(--ink-2); }

/* ---------------------------------------------------------------- 16 glossary */
.gl-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 18px; }
.gl-search__field { flex: 1 1 320px; max-width: 520px; }
.gl-search__count { font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gl-search__count strong { color: var(--ink-0); font-weight: 600; }
.gl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 0 56px; border-top: 1px solid var(--rule); }
.gl-term { padding: 16px 0 18px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.gl-term:target { background: var(--bg-1); }
.gl-term__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gl-term__title { font-size: 19px; font-weight: 700; letter-spacing: 0; }
.gl-term__anchor { font-family: var(--mono); font-size: 14px; color: var(--ink-3); text-decoration: none; padding: 0 4px; }
.gl-term__anchor:hover { color: var(--ink-0); }
.gl-term__def { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-0); max-width: var(--measure); }
.gl-empty { grid-column: 1 / -1; padding: 28px 0; color: var(--ink-2); }
.gl-empty__icon { display: none; }

/* ---------------------------------------------------------------- 17 info pages */
.ip-toc { margin: 0 0 28px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ip-toc__summary { cursor: pointer; font-weight: 700; font-family: var(--display); font-size: 17px; }
.ip-toc__list { margin: 10px 0 0; padding-left: 1.4em; columns: 2 260px; column-gap: 40px; font-size: 15.5px; }
.ip-toc__list li { break-inside: avoid; margin: 3px 0; }
.editor-box { margin: 0 0 36px; padding: 20px 22px 6px; border: 1px solid var(--rule); border-radius: 2px; max-width: var(--measure); }
.editor-box h2 { margin: 0 0 10px !important; font-size: 21px; }
.editor-box p { font-size: 16px; }
.ip-cards { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--measure); margin-top: -12px; }
.ip-card { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.ip-card__tag { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.ip-card__title { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.ip-card__body { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.ip-card__action { font-weight: 600; }
.corr-log { max-width: var(--measure); }
.corr-entry { padding: 18px 0 6px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.corr-entry:first-child { border-top: 0; padding-top: 0; }
.corr-entry:target { background: var(--bg-1); }
.corr-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px !important; font-size: 19px !important; font-weight: 700 !important; }
.corr-entry__kind { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.corr-entry__head .muted { color: var(--ink-0); }
.corr-note { color: var(--ink-2); }

/* ---------------------------------------------------------------- 18 404 */
.er-wrap { padding-top: 56px; padding-bottom: 32px; }
.er-num { font-family: var(--mono); font-weight: 500; font-size: 96px; line-height: 1; color: var(--ink-3); margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.er-sub { margin: 14px 0 22px; max-width: 56ch; font-size: 19px; line-height: 1.5; }
.er-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- 19 search results (masthead) */
.search-results {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px;
  max-height: 60vh; overflow-y: auto; background: var(--bg-0);
  border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--shadow);
}
.search-results__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-0); text-decoration: none; line-height: 1.35;
}
.search-results__item:last-child { border-bottom: 0; }
.search-results__item:hover, .search-results__item[aria-selected="true"] { background: var(--bg-1); color: var(--ink-0); }
.search-results__name { font-weight: 600; font-size: 15px; }
.search-results__meta { flex: none; font-size: 13px; color: var(--ink-2); }
.search-results__empty { margin: 0; padding: 12px; font-size: 14.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- 20 utilities */
.muted { color: var(--ink-2); }
.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; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.row--between { justify-content: space-between; }
.ad-slot:empty { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .mast__row { gap: 10px 20px; padding-top: 18px; padding-bottom: 14px; }
  .brand__name { font-size: 26px; }
  .mast__tag { flex-basis: 100%; max-width: none; font-size: 14px; }
  .mast__search { flex: 1 1 100%; }
  .nav__row { gap: 0 22px; }
  .nav__theme { margin-left: 0; }
  .sec-head__title { font-size: 24px; }
  .kf__num { font-size: 26px; }
  .figs dd { font-size: 24px; }
  .tool-shell { padding: 16px 14px; }
  .tool-result__value { font-size: 22px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .foot__legal { flex-direction: column; }
  .page-lede, .tool-header__lede, .ip-hero__lede, .gd-hero__lede, .bl-hero__lede, .gl-hero__lede, .db-hero__lede { font-size: 17.5px; }
  .dt, .writeup table, .tool-writeup table { font-size: 14.5px; }
  /* a prose table wider than the phone scrolls inside its own box instead of pushing the page sideways */
  .writeup > table, .tool-writeup > table, .ip-body > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dt .n { font-size: 14px; }
  .dt td, .dt tbody th, .dt thead th { padding-right: 8px; }
  .dt--ranked td, .dt--ranked tbody th { font-size: 14px; }
  .dt__rank { width: 1.8em; }
  .dt--ranked tbody th, .dt--pending tbody th { min-width: 150px; }
  /* a table that scrolls sideways keeps its caption inside the screen */
  .table-wrap caption { max-width: calc(100vw - 2 * var(--pad)); }
  .er-num { font-size: 72px; }
  .gd-meta__divider { display: none; }
}
@media (max-width: 420px) {
  .board__grid { gap: 18px 16px; }
  .bands__label { flex-basis: 84px; }
}

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

@media print {
  .mast__search, .nav, .foot__grid, .gd-progress, .lim-more, .nav__theme { display: none !important; }
  body { font-size: 11pt; }
  a { text-decoration: none; }
}