/* Design tokens and the handful of components the site is built from.
   The theme follows UniProt's (franklin) design: sapphire and sea blue on
   near-white, Lato body text with Source Sans headings, square controls, grey
   bands for secondary content and a grey footer carrying the logo. Confidence
   is still carried by glyph and fill density rather than colour, so a
   screenshot in greyscale still reads. */

@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* UniProt palette */
  --sapphire: #014371;      /* links, navigation, headings in blue */
  --sea: #00639a;           /* primary buttons, the logo */
  --cerulean: #00a6d5;      /* accents: bars, the logo's dots */
  --yankees: #161d39;       /* headings */
  --platinum: #e4e8eb;      /* grey bands, footer, borders */
  --gainsborough: #d2dce3;  /* stronger borders */
  --sky-white: #fbfeff;     /* header */

  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --tint: #f5f9fc;
  --ink: #1f2533;
  --ink-2: #5b6474;
  --ink-3: #8194a1;
  --line: var(--platinum);
  --accent: var(--sapphire);
  --accent-bg: #e8f3fa;
  --brand: var(--sea);

  /* The scatter canvas is the only dark surface on the site */
  --well: #12161B;
  --well-ink: #C9D1D9;
  --well-line: #2A313A;

  /* Reference cohort groups, Okabe-Ito, red-green safe */
  --ctrl: #0072B2;
  --case: #D55E00;
  --you: #16181C;

  --font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --heading: "Source Sans 3", "Source Sans Pro", var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", Consolas,
          monospace;

  --content: 1160px;
  --radius: 0;
  --ease: 150ms ease-out;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; font-weight: 700; }
a:hover { color: var(--sea); text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--yankees);
}
h1 { font-size: 36px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }

/* Wide measure: the content column is 1,112 px, and a narrower one left most
   of every block empty on the right. */
p { margin: 0 0 16px; max-width: 118ch; }

section > h2 { padding-top: 8px; }

code, .mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* Layout ------------------------------------------------------------------ */

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding-inline: 24px;
}

main { padding: 40px 0 64px; }

.lede { font-size: 18px; color: var(--ink); max-width: none; }

.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.spread { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; }
.stack > * + * { margin-top: 16px; }

/* Logo -------------------------------------------------------------------- */

/* The wordmark is text in the heading face; the mark beside it is a trail of
   dots growing into a cluster, the OTUs that share a niche. */
.logo {
  display: inline-flex;
  align-items: flex-start;
  color: var(--sea);
  line-height: 1;
}
.logo:hover { color: var(--sea); text-decoration: none; }
.logo__word {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.logo__mark { width: 38px; height: 38px; margin-left: -3px; flex: none; }
.logo--large .logo__word { font-size: 56px; margin-top: 13px; }
.logo--large .logo__mark { width: 62px; height: 62px; margin-left: -5px; }

/* Header ------------------------------------------------------------------ */

.site-header {
  background: var(--sky-white);
  border-bottom: 1px solid var(--platinum);
}
.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 28px;
  min-height: 64px;
  padding: 6px 20px;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a {
  font-family: var(--heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--sapphire);
}
.site-nav a[aria-current="page"] { color: var(--sea); box-shadow: inset 0 -3px 0 var(--cerulean); }
.site-nav--utility { margin-left: auto; }
.site-nav--utility a { font-size: 17px; }

@media (max-width: 720px) {
  .site-nav--utility { margin-left: 0; }
  h1 { font-size: 30px; }
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--platinum);
  margin-top: 64px;
  font-size: 13px;
  color: var(--ink);
}
.site-footer a { color: var(--sapphire); font-weight: 700; }
.site-footer__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 32px 24px 16px;
  display: grid;
  grid-template-columns: 280px repeat(3, minmax(120px, 1fr)) minmax(200px, 1.4fr);
  gap: 28px;
}
.site-footer__brand p { margin: 12px 0 0; }
.site-footer h2 {
  font-size: 16px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gainsborough);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer__notice p { margin: 0 0 8px; color: var(--ink-2); }
.site-footer__bottom {
  max-width: var(--content);
  margin: 0 auto;
  padding: 12px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--ink-2);
}
@media (max-width: 960px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand, .site-footer__notice { grid-column: 1 / -1; }
}

/* Home page --------------------------------------------------------------- */

/* The blue band: title, search and examples, as on UniProt's front page. */
.hero-band {
  color: #fff;
  background:
    radial-gradient(60% 80% at 18% 30%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(50% 70% at 70% 85%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(135deg, #0b5d8f 0%, var(--sapphire) 55%, #013a62 100%);
}
.hero-band__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 20px;
}
.hero-band h1 {
  color: #fff;
  font-size: 52px;
  text-align: center;
  margin-bottom: 20px;
}
.hero-search { display: flex; }
.hero-search__scope {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--sea);
  font-size: 15px;
  white-space: nowrap;
}
.hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 0;
  color: var(--ink);
}
.hero-search button { border-color: var(--sea); padding-inline: 22px; }
.hero-band__examples { margin: 8px 0 0; max-width: none; }
.hero-band__examples a { color: #fff; }
.hero-band__tagline {
  margin: 64px auto 0;
  max-width: none;
  text-align: center;
  font-size: 17px;
}
.hero-band__tagline a { color: #fff; text-decoration: underline; }

/* Information bar: white, a light-blue rule on the left. */
.banner {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border-left: 4px solid var(--cerulean);
  box-shadow: 0 1px 4px rgba(22, 29, 57, .12);
  padding: 12px 16px;
  font-size: 14px;
}
.banner p { margin: 0; max-width: none; }
.banner__icon { color: var(--cerulean); flex: none; font-weight: 700; }

/* Resource tiles: a coloured block, a large white title, a dark strip with
   the description. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 290px;
  color: #fff;
  overflow: hidden;
}
.tile:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
/* Illustrations after panel b of the paper's workflow figure, drawn in white
   so the three tiles share one look whatever their colour. */
.tile__art { display: block; width: 190px; height: auto; margin: 8px auto 12px; }
.tile--atlas { background: linear-gradient(160deg, #0a73ad, var(--sapphire)); }
.tile--dysbiosis { background: linear-gradient(160deg, #e9776c, #9d4a4d); }
.tile--data { background: linear-gradient(160deg, #6fb389, #2d7a4f); }
.tile__title {
  position: relative;
  padding: 18px 16px 0;
  text-align: center;
  font-family: var(--heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.tile__title small { display: block; font-size: 20px; }
.tile__text {
  position: relative;
  margin: 0;
  max-width: none;
  padding: 12px 16px;
  background: rgba(10, 16, 34, .45);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* A grey band holding link-like items, each with a short blue rule. */
.grey-band { background: var(--platinum); padding: 20px 24px; }
.grey-band h2 { margin-bottom: 12px; }
.ruled { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 32px; }
.ruled > * { border-left: 3px solid #9ecbe6; padding-left: 12px; margin: 0; max-width: none; }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sea);
  margin: 0 0 8px;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.figures > div { background: var(--tint); border-top: 3px solid var(--cerulean); padding: 12px 14px; }
.figures b {
  display: block;
  font-family: var(--heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sapphire);
  font-variant-numeric: tabular-nums;
}
.figures span { font-size: 13px; color: var(--ink-2); }

.cite-box {
  background: var(--tint);
  border-left: 4px solid var(--cerulean);
  padding: 16px 20px;
}
.cite-box p:last-child { margin-bottom: 0; }

/* Text and a figure side by side; the figure drops below on narrow screens. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px 40px;
}
.hero .lede { max-width: none; }
/* The text column sets the row height and the figure fills it: the image
   takes whatever the caption leaves, scaled to fit. */
.hero__figure { margin: 0; display: flex; flex-direction: column; }
.hero__figure > a { flex: 1 1 0; min-height: 0; display: block; }
.hero__figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero__figure figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.swatches i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__figure { max-width: 420px; }
  .hero__figure > a { flex: none; }
  .hero__figure img { height: auto; }
  .hero-band h1 { font-size: 36px; }
}

/* One-line notices: a warning or disclaimer reads as a single statement. */
.warn p, p.disclaimer { max-width: none; }

/* Cards ------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.card__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Controls ---------------------------------------------------------------- */

button, .button {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  display: inline-block;
  color: #fff;
  background: var(--sea);
  border: 1px solid var(--sea);
  border-radius: var(--radius);
  padding: 8px 18px;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
button:hover, .button:hover { background: var(--sapphire); color: #fff; text-decoration: none; }
button:disabled { opacity: .45; cursor: default; }

.button--quiet {
  background: var(--surface);
  color: var(--sea);
}
.button--quiet:hover { background: var(--tint); color: var(--sapphire); }

/* A button that reads as an inline link, for example queries in running text. */
.link, .link:hover {
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
}
.link:hover { text-decoration: underline; }

label { font-weight: 700; }

input[type="text"], input[type="search"], input[type="file"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--gainsborough);
  border-radius: var(--radius);
  padding: 7px 10px;
}

input[type="text"] { font-family: var(--mono); }

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

.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-row label {
  font-weight: 400;
  border: 1px solid var(--gainsborough);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 6px 12px;
  cursor: pointer;
}
.radio-row input { margin-right: 6px; }
.radio-row input:checked + span { font-weight: 700; }
.radio-row label:has(input:checked) { border-color: var(--sea); background: var(--accent-bg); }

.note {
  background: var(--tint);
  border-left: 4px solid var(--cerulean);
  padding: 16px 20px;
}
.note p:last-child { margin-bottom: 0; }

.warn {
  border-left: 4px solid var(--case);
  background: #FDF3EC;
  padding: 12px 16px;
}

details { border-top: 1px solid var(--line); padding: 12px 0; }
section > h2 + details { border-top: 0; }
details > summary { cursor: pointer; font-weight: 700; color: var(--sapphire); }
details > summary::marker { color: var(--ink-3); }

/* Progress ---------------------------------------------------------------- */

.progress {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 120ms linear;
}

/* Trait bar --------------------------------------------------------------- */

.trait {
  border-left: 1px dashed var(--line);
  padding-left: 12px;
  margin-bottom: 12px;
}
.trait--measured { border-left: 2px solid var(--ink); padding-left: 11px; }

.trait__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.trait__name { font-weight: 600; }
.trait__value { color: var(--ink-2); }

.trait__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.bar {
  position: relative;
  width: 120px;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  flex: none;
}
.bar__fill { display: block; height: 100%; background: var(--accent); }

/* Confidence is a glyph plus fill density, never a colour of its own. All
   three steps keep text at 4.5:1 or better: --ink-3 is for disabled and
   placeholder text, which this is not. */
.conf { font-family: var(--mono); }
.conf--strong { color: var(--ink); }
.conf--medium { color: var(--ink-2); }
.conf--weak { color: var(--ink-2); }

.trait__auc { color: var(--ink-2); }

/* Distribution band ------------------------------------------------------- */

.band { margin-top: 12px; }
.band svg { display: block; width: 100%; height: auto; }
.band__axis { stroke: var(--line); stroke-width: 1; }
.band__tick { stroke: var(--line); stroke-width: 1; }
.band__label { fill: var(--ink-2); font-size: 10px; font-family: var(--font); }
/* Group names and the marker's label are HTML under the plot, so a long
   label wraps instead of running into the one beside it. */
.band__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-2);
}
.band__key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.band__key--ctrl { background: var(--ctrl); }
.band__key--case { background: var(--case); }
.band__key--you { color: var(--you); margin-right: 4px; }
.band__dot--ctrl { fill: var(--ctrl); opacity: .55; }
.band__dot--case { fill: var(--case); opacity: .55; }
.band__you { fill: var(--you); }

/* Scatter (well) ---------------------------------------------------------- */

/* The map and, below it, the card: both in the content column, so the page
   has one left and one right edge. */
.well {
  position: relative;
  background: var(--well);
  border-radius: var(--radius);
  overflow: hidden;
  height: min(620px, 70vh);
  min-height: 420px;
}
/* The canvas has to be told to fill the well. Without this it lays out at its
   intrinsic 300x150 default, and the scatter draws into a letterbox in the
   corner of a 560-pixel-tall panel. */
.well canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;   /* the page must not pan or zoom under a finger on the map */
}

/* The name of the point under the cursor. */
.well__tip {
  position: absolute;
  pointer-events: none;
  transform: translate(12px, -50%);
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
  background: rgba(18, 22, 27, .9);
  border: 1px solid var(--well-line);
  padding: 2px 8px;
}
.well__tip i { color: var(--well-ink); }

.well__status {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  color: var(--well-ink);
  font-size: 13px;
  background: rgba(18, 22, 27, .86);
  border: 1px solid var(--well-line);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.well__status p:last-child { margin-bottom: 0; }

.well__legend {
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--well-ink);
  font-size: 12px;
  background: rgba(18, 22, 27, .8);
  border: 1px solid var(--well-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  max-width: 300px;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 10px 2px 0;
  cursor: pointer;
}
.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.card-panel { padding: 24px; }

/* Neighbours first, then traits below them. */
.card-body { display: grid; gap: 28px; }
/* Taxon names at every rank are italic, as in the nomenclature codes. */
.lineage { font-style: italic; }

/* Neighbour columns ------------------------------------------------------- */

.neighbours { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.neighbours h3 { margin-bottom: 8px; }
.neighbours ol { list-style: none; margin: 0; padding: 0; }
.neighbours li {
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.neighbours li:last-child { border-bottom: 0; }
.neighbours .overlap { background: var(--accent-bg); }
.neighbours > p { grid-column: 1 / -1; margin: 0; max-width: none; }
/* The caption belongs to its own column, so it must not span like the note. */
.neighbours__caption { margin: 8px 0 0; max-width: none; }

.card__taxon { font-style: italic; }
.provenance { font-weight: 700; max-width: none; }

/* The per-trait fold-out is secondary: a small link, no rule of its own. */
.trait details { border-top: 0; padding: 4px 0 0; }
.trait details > summary { font-size: 13px; font-weight: 400; color: var(--accent); }

.taxon { color: var(--ink-2); font-style: italic; }
.neighbours li .otu-id { display: block; font-size: 11px; line-height: 1.3; }
.otu-id { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* Tables ------------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-weight: 700; color: var(--yankees); background: var(--tint); }
thead th { border-bottom: 2px solid var(--gainsborough); }
/* The file table's columns are wider than a phone. It scrolls inside its own
   box, so the page itself never scrolls sideways. */
#files-table, .table-box { overflow-x: auto; }
tbody tr:hover { background: var(--tint); }
td.num, th.num { text-align: right; font-family: var(--mono); }

/* Result ------------------------------------------------------------------ */

.result__sentence { font-size: 19px; }
.result__number {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.attn-list { list-style: none; margin: 0; padding: 0; }
/* Three columns: taxon and lineage, then the two numbers in fixed columns so
   they line up down the list however long a lineage runs. */
.attn-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 200px;
  align-items: baseline;
  gap: 4px 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .attn-list li { grid-template-columns: 1fr auto; }
  .attn-list__taxon { grid-column: 1 / -1; }
}
.attn-list li:last-child { border-bottom: 0; }
.attn-list__taxon { min-width: 0; }
.attn-list__taxon .lineage { line-height: 1.4; }
.attn-list .weight {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  text-align: right;
}

.disclaimer {
  color: var(--ink-2);
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--surface);
}

.badge {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
  color: var(--ink-2);
}

/* Motion ------------------------------------------------------------------ */

.fade-in { animation: fade-in 160ms ease-out; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Spacing. The design uses a 4-pixel scale and three of its steps account
   for every gap between blocks on the site, so they are named once here
   rather than spelled out as an inline style on each element. */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* A code or sample block: monospace, on paper rather than on a card, with a
   hairline border and its own scroll if a line runs long. */
.code {
  font-family: var(--mono);
  font-size: 13px;
  overflow-x: auto;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}