/* Biscuit Wallet: one column, ivory paper, Times for the text, Helvetica for the title, menus and headings,
   Courier for the small print. Fonts every system has: no scripts, no web fonts. */

:root {
  --paper: #faf9f6;
  --ink: #1b1b1a;
  --muted: #6b6a66;
  --rule: #d2cfc7;
  --link: #1f3fb4;
  --visited: #5b2f8f;
  --mark: #efede7;
  --body: "Times New Roman", Times, Tinos, "Liberation Serif", serif;
  --helv: "Helvetica Neue", Helvetica, Arial, Arimo, "Liberation Sans", sans-serif;
  --mono: "Courier New", Courier, Cousine, "Liberation Mono", monospace;
  --small: 0.875em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212;
    --ink: #e8e8e6;
    --muted: #9a9a97;
    --rule: #3a3a39;
    --link: #93a9ff;
    --visited: #c3a2ee;
    --mark: #222221;
  }
}

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

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3.5rem 1rem 3rem;
  font: 1.2rem/1.55 var(--body);   /* about 21.5 px on a computer, 22 px on phones (below) */
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

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

/* Links: the classic underlined blue, only finer. */
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Masthead */
.masthead { text-align: center; }
.bear {
  display: block;
  margin: 0 auto 1.25rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* The bear on the home page is a link home too: only the bear is clickable. */
.bear-link { display: block; width: fit-content; margin: 0 auto; }
h1 {
  margin: 0;
  font: 700 1.9rem/1.15 var(--helv);
  letter-spacing: -0.01em;
}
.tagline { text-wrap: balance; margin: 0.35rem 0 0; font-style: italic; font-size: 1.125rem; }
/* Home: the menu under the masthead, then the two main links. */
.homenav { display: flex; justify-content: center; margin: 1.5rem 0 0; }
/* Home: the download line under the menu, no buttons. */
.getline { margin: 1.75rem 0 0.6rem; text-align: center; text-wrap: balance; }
.platforms { margin: 0; text-align: center; color: var(--muted); font-size: 0.9375rem; font-style: italic; }
/* Feature sections: a short list, then a "read more" link. */
.feature ul { list-style: square; }
.feature li { margin: 0.45rem 0; }
.more { margin: 0.25rem 0 0; font: inherit; }

/* Rules */
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
hr.double { border-top: 3px double var(--rule); margin: 2.25rem 0; }

/* Index: two columns of links, like a 1996 annual report. */
small {
  color: var(--muted);
  font: 0.6875rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Sections */
section { margin: 0 0 2.75rem; scroll-margin-top: 1.5rem; }
h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  border-bottom-color: var(--ink);
  font: 700 1.3rem/1.3 var(--helv);
}
p { margin: 0 0 1rem; }
.note { color: var(--muted); font-size: 0.9375rem; }

dl { margin: 0; }
dt { font-weight: 700; }
dd { margin: 0 0 1rem; }

/* Tables: ruled, no boxes. */
table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-variant-numeric: lining-nums tabular-nums; }
th, td { padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--rule); }
thead th {
  color: var(--muted);
  font: 700 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--ink);
}
tbody th { font-weight: 700; white-space: nowrap; }
.status { color: var(--muted); font-style: italic; }
table.downloads { table-layout: fixed; font-size: 0.875em; }
table.downloads td.file { font-size: 0.9em; }
table.downloads th:nth-child(1) { width: 32%; }
table.downloads tbody th { white-space: normal; }
table.downloads th:nth-child(3) { width: 4.5rem; }
td.file { overflow-wrap: anywhere; }
table.compare { margin-bottom: 2.75rem; }
/* Download page, Verify and Source: the same size as the download tables above. */
table.files { table-layout: fixed; font-size: 0.875em; }
table.files th { width: 32%; white-space: normal; }
table.files td.file, table.files code { font-size: 0.9em; }
/* Download page: the antivirus advice at the size of the notes. */
section.small p { font-size: 0.9375rem; }
/* Docs: Previous and Next at the bottom of each page. */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.pager a { display: block; font: 700 1.05rem/1.3 var(--helv); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager span { display: block; margin-bottom: 0.25rem; color: var(--muted); font: 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.pager .next { text-align: right; }

/* Docs: the list of every page. A menu at the top on narrow screens, a sidebar on wide ones. */
.docs-nav, .docs-menu { font: 0.9375rem/1.35 var(--helv); }
.docs-nav p, .docs-menu p { margin: 1.25rem 0 0.35rem; color: var(--muted); font: 700 0.6875rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.docs-nav ul, .docs-menu ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li, .docs-menu li { margin: 0; }
.docs-nav a, .docs-menu a { display: block; padding: 0.22rem 0 0.22rem 0.75rem; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; }
.docs-nav a:hover, .docs-menu a:hover { text-decoration: underline; }
.docs-nav a[aria-current="page"], .docs-menu a[aria-current="page"] { border-left-color: var(--ink); font-weight: 700; }
.docs-nav { display: none; }
.docs-menu { margin: 0 0 1.75rem; border: 1px solid var(--rule); background: var(--mark); }
.docs-menu summary { cursor: pointer; padding: 0.6rem 0.9rem; font: 700 0.8125rem/1.4 var(--helv); letter-spacing: 0.08em; text-transform: uppercase; }
.docs-menu[open] { padding-bottom: 0.75rem; }
.docs-menu[open] summary { border-bottom: 1px solid var(--rule); }
.docs-menu p, .docs-menu ul { margin-left: 0.9rem; margin-right: 0.9rem; }
@media (min-width: 60rem) {
  body.docs { max-width: 66rem; }
  .docs-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .docs-menu { display: none; }
  .docs-nav { display: block; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 0.25rem 0 2rem; }
  .docs-nav > p:first-child { margin-top: 0; }
  .docs-page { max-width: 44rem; }
}

/* Inner pages: small brand on the left, site navigation on the right. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
  font: 700 1.125rem/1.2 var(--helv); letter-spacing: -0.01em;
}
.brand:visited { color: var(--ink); }
.brand img { image-rendering: pixelated; image-rendering: crisp-edges; }
nav.site { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; font: 0.8125rem/1.6 var(--helv); letter-spacing: 0.08em; text-transform: uppercase; }
nav.site a { color: var(--muted); text-decoration: none; }
nav.site a:hover { color: var(--ink); text-decoration: underline; }
nav.site a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

h1.page, h1.post { margin: 0 0 1rem; font: 700 1.6rem/1.2 var(--helv); letter-spacing: 0; text-transform: none; }
h1.post { font-size: 2.15rem; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.crumbs { margin: 0 0 0.25rem; font: 0.8125rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.crumbs a { color: var(--muted); }
/* Intro paragraphs: same size as the text. */
.dateline { margin-top: -0.6rem; color: var(--muted); font-style: italic; }
.back { margin-top: 2rem; }
.address { font-size: 1.25rem; }
.summary { color: var(--muted); font-size: 0.9375rem; }

code, .file { font: 0.875em/1.4 var(--mono); }
pre {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  overflow-x: auto;
  border-left: 3px double var(--rule);
  background: var(--mark);
}
pre code { font-size: 0.8125rem; }
/* Docs index: sections of pages. */
.docs-index h2 { margin-top: 0; }
.docs-index dt { font-weight: 400; }
.docs-index dd { color: var(--muted); font-size: 0.9375rem; margin: 0 0 0.6rem; }
td.file { color: var(--muted); white-space: nowrap; }

ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin: 0.25rem 0; }
main > ul, section > ul { list-style: square; }
li::marker { color: var(--muted); }

/* News list and docs contents */
ul.news, ol.toc { padding-left: 0; list-style: none; }
ul.news li, ol.toc li { margin: 0 0 1rem; }
ul.news time { color: var(--muted); font: 0.8125rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.4rem; }
ol.toc { counter-reset: toc; }
ol.toc li { counter-increment: toc; padding-left: 2rem; position: relative; }
ol.toc li::before { content: counter(toc) "."; position: absolute; left: 0; color: var(--muted); font-variant-numeric: lining-nums; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.5rem; }
figure { margin: 0; text-align: center; }
figure img { max-width: 100%; height: auto; }
.hero { margin: 2.25rem 0 3rem; }
.hero img, .shots img:not(.pixel):not(.art) {
  display: block; margin: 0 auto; border-radius: 6px;
  /* The app has the same colour as the page: a window shadow sets it apart. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 28px rgba(0, 0, 0, 0.16);
}
@media (prefers-color-scheme: dark) {
  .hero img, .shots img:not(.pixel):not(.art) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 32px rgba(0, 0, 0, 0.6); }
}
img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
/* Screenshots: one per row, full size a click away. */
.shots { display: grid; gap: 2rem; }
.shots-small { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
figcaption { margin-top: 0.5rem; color: var(--muted); font-size: 0.875rem; font-style: italic; }

/* Why Biscuit: a letter, like the old annual reports. */
.letter .salutation { font-style: italic; }
.letter .signature { margin-top: 2rem; font-style: italic; text-align: right; }
.letter .signature::before { content: "\2014\00a0"; }

/* Footer */
footer { text-align: center; color: var(--muted); font-size: 0.875rem; }
footer p { margin: 0.25rem 0; }
.updated { font-style: italic; }

/* Desktop: larger type and a wider column; phones keep the defaults. */
@media (min-width: 60rem) {
  html { font-size: 112.5%; }
  body { max-width: 46rem; }
}

@media (max-width: 30rem) {
  body { padding-top: 2.5rem; font-size: 1.375rem; }
  /* Phones: one size up for the title and headings too. */
  h1 { font-size: 2.15rem; }
  .tagline { font-size: 1.2rem; }
  h2 { font-size: 1.55rem; }
  h1.page { font-size: 2.05rem; }
  h1.post { font-size: 2.4rem; }
  nav.site { font-size: 0.875rem; }
  .journal .entry h3 { font-size: 1.6rem; }
  .journal .entry.featured h3 { font-size: 2.05rem; }
  /* Tables and long file names stay inside the screen. */
  table { font-size: var(--small); }
  td { overflow-wrap: anywhere; }
  /* Tables with column headers: smaller and tighter, words wrap only between words; a table
     still too wide scrolls inside itself instead of cutting words. */
  table.stack { display: block; overflow-x: auto; font-size: 0.8em; }
  table.stack th, table.stack td { overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; padding: 0.45rem 0.6rem 0.45rem 0; }
  table.stack thead th { white-space: normal; }
  table.downloads th, table.downloads th:nth-child(1) { width: auto; }
  table.downloads td.file { font-size: 0.85em; }
  code { overflow-wrap: anywhere; word-break: break-word; }
  td code { word-break: break-all; display: inline-block; max-width: 100%; }
  table:not(:has(thead)) { table-layout: fixed; }
  table:not(:has(thead)) th { width: 38%; }
  td.file { min-width: 0; white-space: normal; }
  td.file a, table.downloads a { word-break: break-all; }
  .compare tbody th, .compare td { padding-right: 0.5rem; }
  .compare tbody th { white-space: normal; }
  /* Narrow screens: tables wrap instead of pushing the page sideways. */
  tbody th { white-space: normal; }
  td code, td.file { overflow-wrap: anywhere; }
  /* Downloads: one block per file, the build on top, the link and size below. */
  table.downloads, table.downloads tbody { display: block; }
  table.downloads thead { display: none; }
  table.downloads tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--rule);
  }
  table.downloads th, table.downloads td { padding: 0; border: 0; }
  table.downloads tbody th { grid-column: 1 / -1; }
  .bar { justify-content: center; }
  nav.site { justify-content: center; }
}

/* Long reads (news posts with class="essay"): epigraph, pull quotes, theses. */
.subtitle { margin: -0.4rem 0 0.9rem; font-style: italic; font-size: 1.125em; color: var(--muted); text-wrap: balance; }
.essay h2 { margin-top: 2.75rem; }
.essay blockquote.epigraph { margin: 1.75rem auto 2rem; max-width: 30rem; text-align: center; font-style: italic; }
.essay blockquote.epigraph p { margin: 0 0 0.35rem; font-size: 1.125em; }
.essay blockquote.epigraph footer { font-style: normal; color: var(--muted); font-size: var(--small); }
.essay blockquote.epigraph footer::before { content: "\2014\00a0"; }
.essay blockquote.epigraph + p::first-letter {
  float: left; margin: 0.08em 0.1em 0 0; font-size: 3.4em; line-height: 0.8; font-family: var(--body);
}
.essay aside.pull {
  margin: 2.25rem 0; padding: 1.25rem 0.5rem 1rem; text-align: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.essay aside.pull::before { content: "\201C"; display: block; height: 0.55em; font-size: 3.5rem; line-height: 1; color: var(--rule); }
.essay aside.pull p { margin: 0; font-size: 1.45em; line-height: 1.35; font-style: italic; text-wrap: balance; }
.essay ol.theses { list-style: none; counter-reset: thesis; padding: 0; margin: 1.5rem 0 2rem; }
.essay ol.theses li { counter-increment: thesis; position: relative; padding-left: 2.75rem; margin: 0 0 1.1rem; }
.essay ol.theses li::before {
  content: counter(thesis); position: absolute; left: 0; top: -0.15em; width: 2rem; text-align: right;
  font-size: 1.5em; line-height: 1.2; color: var(--muted); font-variant-numeric: lining-nums;
}

/* Research papers (class="essay paper"): formulas, boxes, figures and tables in plain HTML
   and CSS, so they read the same in Tor Browser at its Safest level (no web fonts, no
   MathML, no SVG, no scripts). The PDF and LaTeX source are linked under the title. */
/* Figures as in a paper: lining numbers, all the same height (the old-style ones the
   rest of the site uses make a 1 look like a small I among dates, amounts and formulas). */
.paper { font-variant-numeric: lining-nums; }
/* Formulas in Computer Modern, as in the PDF (public/fonts/math/README.txt). A browser only
   downloads them on a page that has formulas; where downloaded fonts are blocked (Tor
   Browser at Safer or Safest), formulas fall back to Times like the text around them. */
@font-face { font-family: "Biscuit Math"; src: url("/fonts/math/serif-regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Biscuit Math"; src: url("/fonts/math/serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Biscuit Math"; src: url("/fonts/math/symbols-main.woff2") format("woff2"); unicode-range: U+2248, U+21D2, U+22EF; font-display: swap; }
@font-face { font-family: "Biscuit Math"; src: url("/fonts/math/symbols-ams.woff2") format("woff2"); unicode-range: U+25A1; font-display: swap; }
.paper .formula, .paper .math { font-family: "Biscuit Math", var(--body); font-synthesis: none; }
.paper .formula { font-size: 1.1em; }   /* Computer Modern looks smaller than Times at the same size */
.paper .byline { margin: 0 0 2rem; color: var(--muted); font: 0.8125rem/1.5 var(--mono); letter-spacing: 0.04em; }
.paper .abstract { margin: 0 0 2rem; }
.paper h3 { margin: 2rem 0 0.75rem; font: 700 1.1rem/1.3 var(--helv); }
.paper .quote { margin: 1rem 0; text-align: center; font-style: italic; }
.paper .formula { margin: 1rem 0 1.1rem; text-align: center; overflow-x: auto; line-height: 2.4; }
.paper .frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.25; margin: 0 0.15em; }
.paper .frac > span + span { border-top: 1px solid currentColor; padding-top: 0.05em; }
.paper .paren { font-size: 1.9em; font-weight: 300; vertical-align: middle; line-height: 1; }
.paper .qed { float: right; }
.paper sup { line-height: 0; }
.paper .box { margin: 1.75rem 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--ink); }
.paper .box p:last-child, .paper .thm p:last-child { margin-bottom: 0; }
.paper .thm, .paper .proof { margin: 1.5rem 0; }
.paper figure { margin: 2rem 0; }
.paper figure table { margin-bottom: 0.5rem; }
.paper figcaption { color: var(--muted); font-size: var(--small); }
.paper figcaption b { color: var(--ink); }
.essay ol.refs { padding-left: 1.75rem; font-size: 0.9375em; }
.paper dl.glossary dd { margin: 0 0 0.6rem; }
/* Figure 1: three blocks and their arrows, in a column on narrow screens. */
.paper .chain { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.paper .chain .block { flex: 0 1 11rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ink); font-size: 0.875em; line-height: 1.45; }
.paper .chain .block b, .paper .chain .block span { display: block; }
.paper .chain .block b { font-family: var(--helv); }
.paper .chain .fingerprint { color: var(--muted); font-style: italic; }
.paper .chain .arrow, .paper .chain .more { font-size: 1.4em; color: var(--muted); }
@media (max-width: 34rem) {
  .paper .chain { flex-direction: column; }
  .paper .chain .block { flex: none; width: 15rem; max-width: 100%; }
  .paper .chain .arrow { transform: rotate(90deg); }
}
/* Graphs from the paper's PDF: pictures on the paper colour, framed in dark mode. */
.paper figure img { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { .paper figure img { border-radius: 2px; } }
.pinned {
  display: inline-block; margin-right: 0.35rem; padding: 0 0.35rem; border: 1px solid var(--rule);
  color: var(--muted); font: 0.6875rem/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* Donation box (Why page): one line per coin, the QR code unfolds on request. */
.donate { margin: 1.25rem 0 2rem; padding: 0.9rem 1rem 0.1rem; border: 1px solid var(--rule); background: var(--mark); }
.donate dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1rem; margin: 0 0 0.75rem; }
.donate dt { font-weight: 700; }
.donate dd { margin: 0; }
.donate code { display: block; font: 0.8125rem/1.5 var(--mono); padding-top: 0.2rem; overflow-wrap: anywhere; user-select: all; }
.donate summary { cursor: pointer; color: var(--link); font: 0.75rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
/* QR codes stay black on white in dark mode too: some scanners need it. */
.donate details img { display: block; margin: 0.4rem 0 0.5rem; image-rendering: pixelated; background: #fff; padding: 4px; border: 1px solid var(--rule); }
.donate .note { margin: 0 0 0.75rem; }
@media (max-width: 30rem) {
  .donate dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .donate dd { margin-bottom: 0.6rem; }
  .donate code { font-size: 0.66rem; }
}
.onion code { overflow-wrap: anywhere; user-select: all; }

/* Journal: entries with a kicker (category, date, reading time), the pinned piece featured. */
.kicker { margin: 0 0 0.3rem; color: var(--muted); font: 0.8125rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
article > .kicker { margin-bottom: 0.4rem; }
.journal .entry { margin: 0 0 1.75rem; }
/* Under a piece: other pieces to read next. */
.related { margin-top: 3.5rem; }
.journal .entry h3 { margin: 0 0 0.25rem; font: 700 1.3rem/1.22 var(--helv); letter-spacing: -0.005em; }
.journal .entry h3 a { color: var(--ink); text-decoration: none; }
.journal .entry h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.journal .entry .summary { margin: 0; color: var(--ink); }
.journal .entry.featured { padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); margin-bottom: 2.25rem; }
.journal .entry.featured h3 { font-size: 1.85rem; line-height: 1.12; }
.journal .entry-sub { margin: 0.2rem 0 0.6rem; font-style: italic; color: var(--muted); font-size: 1.1em; }
.journal h2.releases { margin-top: 2.5rem; }
.journal .pinned { margin-right: 0.5rem; }

/* Commands (Download): plain blocks. One click selects the whole command (no script);
   the $ prompt is drawn by CSS, so it is never copied. */
.term { margin: 0.5rem 0 1rem; background: var(--mark); border-left: 3px solid var(--rule); }
.term pre { margin: 0; padding: 0.7rem 0.9rem; background: none; border: 0; white-space: pre-wrap; overflow-wrap: anywhere;
            font: 0.875rem/1.55 var(--mono); color: var(--ink); }
.term .cmd { display: block; font: inherit; color: inherit; background: none; padding: 0; user-select: all; -webkit-user-select: all; cursor: pointer; }
.term .cmd::before { content: "$ "; color: var(--muted); user-select: none; -webkit-user-select: none; }
.term-title { margin: 1.75rem 0 0.25rem; font: 700 1.15rem/1.3 var(--helv); }
.term-hint { color: var(--muted); font-size: var(--small); margin-bottom: 0.5rem; }
kbd { font: 0.8em/1 ui-monospace, Menlo, Consolas, monospace; padding: 0.1em 0.35em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; background: var(--paper); }
details.term-for { margin: 0 0 0.35rem; }
details.term-for > summary { cursor: pointer; font: 700 0.95rem/1.6 var(--helv); }
details.term-for[open] > summary { margin-bottom: 0.1rem; }