/* =====================================================================
   二階國考講義 — light pixel theme for MkDocs Material.
   Derived from the ML site (ml-site docs/assets/css/extra.css @ f0a0028);
   keep tokens in sync with the sister sites (med_study_rpg_design.md §4).
   Differences from ML: body face is the game handout reader's sans
   ('Noto Sans TC', system-ui, sans-serif — never downloaded), no site switch,
   no ML-only components (demo box, cards, tabs, math, mermaid).
   Pixel font (Cubic 11) only on chrome + h1-h3; body/table/code stay readable.
   Cubic 11 renders crisp only at 11px multiples (11 / 22 / 33px).
   ===================================================================== */

/* Cubic 11 v1.500 — SIL OFL-1.1, https://github.com/ACh-K/Cubic-11
   License shipped alongside: fonts/Cubic_11_OFL.txt
   url() is relative to this CSS file so it works under the /book-2nd/ sub-path. */
@font-face {
  font-family: "Cubic 11";
  src: url("fonts/Cubic_11.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

/* ---------- tokens ---------- */
:root,
[data-md-color-scheme="default"] {
  --bg-cream: #f4ecd8;
  --bg-cream-deep: #eadfc4;
  --bg-dark: #2d1f1a;
  --bg-paper: #fff8ec;
  --paper: #fffdf7;
  --paper-tint: #f8f2e2;
  --paper-soft: #faf4e6;
  --paper-inset: #fff8e8;
  --frame-dark: #5a3f29;
  --frame-light: #8c6d4a;
  --line-strong: #c9ad7f;
  --line-mid: #d8c39a;
  --line-soft: #e2d4b0;
  --ink-strong: #2a2118;
  --ink-heading: #4a3a22;
  --ink-body: #5a4a33;
  --ink-muted: #6e5436;   /* darkened from biostats #8c6d4a to pass AA on cream */
  --ink-label: #7a5410;
  --accent-gold: #d4a04d;
  --accent-gold-soft: #f3e2bf;
  --accent-leaf: #6a8c3f;
  --accent-leaf-ink: #3a5e1a;
  --accent-leaf-soft: #dff0d0;
  --accent-rose: #c44d4d;
  --rose-ink: #9e3434;
  --rose-bg: #f8e6e2;
  --accent-sky: #6a9bc4;
  --ok-ink: #4c6a2b;
  --ok-bg: #eef4e2;
  --warn-ink: #8a4f22;    /* darkened from #a8632f for AA */
  --warn-bg: #f8eee2;
  --study-ink: #33506f;
  --study-border: #4d6a8c;
  --study-bg: #e7eef6;
  --violet: #7a4d99;
  --violet-bg: #f1e9f6;

  --font-pixel: "Cubic 11", "Noto Sans TC", "PingFang TC", sans-serif;
  /* UI chrome (nav, TOC, tables, footer) stays sans. */
  --font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  /* Same reading face as the game's handout reader (--font-body-cjk). */
  --font-body: "Noto Sans TC", system-ui, sans-serif;
  --md-text-font: "Noto Sans TC";

  /* Material tokens */
  --md-default-bg-color: var(--bg-cream);
  --md-default-fg-color: var(--ink-strong);
  --md-default-fg-color--light: var(--ink-muted);
  --md-default-fg-color--lighter: var(--line-strong);
  --md-default-fg-color--lightest: var(--line-soft);
  --md-typeset-color: var(--ink-body);
  --md-typeset-a-color: var(--study-ink);
  --md-primary-fg-color: var(--bg-paper);
  --md-primary-fg-color--light: var(--paper);
  --md-primary-fg-color--dark: var(--paper-tint);
  --md-primary-bg-color: var(--frame-dark);
  --md-primary-bg-color--light: var(--ink-muted);
  --md-accent-fg-color: var(--accent-leaf-ink);
  --md-accent-fg-color--transparent: #d4a04d26;
  --md-accent-bg-color: var(--bg-paper);
  --md-code-bg-color: var(--paper-inset);
  --md-code-fg-color: var(--ink-strong);
  --md-code-hl-color: var(--accent-gold);
  --md-code-hl-color--light: #d4a04d33;
  --md-typeset-mark-color: #d4a04d59;
  --md-typeset-table-color: var(--line-mid);
  --md-typeset-table-color--light: var(--paper-tint);
  --md-footer-bg-color: var(--paper-tint);
  --md-footer-bg-color--dark: var(--bg-cream);
  --md-footer-fg-color: var(--ink-heading);
  --md-footer-fg-color--light: var(--ink-muted);
  --md-footer-fg-color--lighter: var(--ink-muted);
  --md-shadow-z1: none;
  --md-shadow-z2: 3px 3px 0 var(--frame-light);
  --md-shadow-z3: 3px 3px 0 var(--frame-light);
}

/* 4px 1-bit dither, same as LocalLLMRPG body (no gradients in this theme) */
body {
  background-color: var(--bg-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23d9caa6'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23d9caa6'/%3E%3C/svg%3E");
}

/* ---------- pixel font targets ---------- */
.md-nav__title,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset .md-button,
.md-typeset .admonition-title,
.md-typeset summary,
.md-footer__title,
.md-footer__direction {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-weight: normal;
  letter-spacing: 0;
}

/* ---------- body text ---------- */
.md-typeset {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  color: var(--ink-body);
}
/* Owner found 1.85 + Material's .5em list-item gap too airy for dense TWMLE lists. */
.md-typeset ul li, .md-typeset ol li { margin-bottom: .25em; }
/* Reading column 17px; admonition text up from Material's 12.8px. */
.md-content .md-typeset { font-size: .85rem; }
/* keep code blocks at Material's original size (pre 16px -> code 13.6px) despite the larger body */
.md-content .md-typeset pre { font-size: .8rem; }
.md-content .md-typeset .admonition,
.md-content .md-typeset details { font-size: .72rem; }
/* UI-ish blocks keep the sans face (sister sites use --font-ui for tables). */
.md-typeset table:not([class]),
.md-footer-meta.md-typeset { font-family: var(--font-ui); }
.md-typeset strong { color: var(--ink-strong); }
.md-typeset a { text-underline-offset: 2px; }
.md-typeset a:hover { color: var(--accent-leaf-ink); text-decoration: underline; }

/* ---------- headings (11px multiples) ---------- */
.md-typeset h1 {
  font-size: 33px;
  line-height: 1.34;
  color: var(--ink-heading);
  margin: 0 0 1.1rem;
}
.md-typeset h2 {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-heading);
  border-bottom: 4px solid var(--frame-light);
  padding-bottom: 6px;
  margin-top: 2.2em;
}
.md-typeset h2::before {
  content: "◆ ";
  color: var(--accent-gold);
}
.md-typeset h3 {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-label);
}
.md-typeset h4, .md-typeset h5, .md-typeset h6 { color: var(--ink-heading); font-weight: 700; }
.md-typeset .headerlink { color: var(--line-strong); }
.md-typeset .headerlink:hover, .md-typeset :target > .headerlink { color: var(--accent-leaf-ink); }

/* ---------- header ----------
   Mirrors the sister Astro site LocalLLMRPG (.site-header in
   src/styles/global.css + src/components/Search.astro) so switching
   between sister sites does not make the chrome jump (no site switch here:
   the book and the game link to each other instead — design D2b):
   #2d1f1a ground, 4px wood rule, sticky, 1088px inner, 8px 16px padding,
   24px pixel icon + 16px gold site name, 16px flat nav with
   "▶" on the current section, 200x40 paper search box (44x44 icon on phones).
   Material keeps working through .md-header (sticky offset), the
   label[for=__drawer] (chapter drawer) and label[for=__search] + .md-search.
   Grid slots:
     <768       [title ............ search] / [nav ........... drawer]
     768-1219   [title] ........... [search] / [nav ........... drawer]
     >=1220     [title] ........ [nav][search]   (drawer not needed)
   Contrast on #2d1f1a: cream 13.5:1, gold 6.8:1 (AA). */
.md-header.site-header {
  background: var(--bg-dark);
  color: var(--bg-cream);
  border-bottom: 4px solid var(--frame-dark);
  box-shadow: none;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
}
.site-header__inner {
  max-width: 1088px;
  margin: 0 auto;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title search"
    "nav   drawer";
  align-items: center;
  gap: 8px 16px;
}
.site-header :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 1px; }

.site-title {
  grid-area: title;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--accent-gold);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}
.site-title:hover,
.site-title:focus { color: var(--bg-cream); }
.site-title img { flex: none; width: 24px; height: 24px; image-rendering: pixelated; }
.site-title__text { overflow: hidden; }

.site-nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--bg-cream);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}
.site-nav a[aria-current="page"],
.site-nav a:hover,
.site-nav a:focus { color: var(--accent-gold); }
.site-nav a[aria-current="page"]::before {
  content: "▶";
  font-size: 12px;
  margin-right: 4px;
}

/* Square 44px icon buttons (LLM .search__toggle look) */
.site-drawer,
.site-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bg-cream);
  border: 2px solid var(--frame-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.site-drawer:hover,
.site-search-toggle:hover { color: var(--accent-gold); }
.site-drawer svg,
.site-search-toggle svg { flex: none; }
.site-drawer { grid-area: drawer; justify-self: end; }
.site-search-toggle { grid-area: search; justify-self: end; }
.site-search-toggle__text { display: none; }
.site-header .md-search { grid-area: search; justify-self: end; }

/* LLM rule: <=400px the site name drops to 14px and the icon hides */
@media screen and (max-width: 400px) {
  .site-title { font-size: 14px; }
  .site-title img { display: none; }
}
@media screen and (min-width: 768px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title . search"
      "nav   nav drawer";
  }
  /* Search placeholder box that opens Material's full-screen search (<960) */
  .site-search-toggle {
    width: 200px;
    height: 40px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px;
    background: var(--paper);
    color: var(--ink-muted);
    box-shadow: 2px 2px 0 var(--bg-dark);
  }
  .site-search-toggle:hover { color: var(--ink-strong); }
  .site-search-toggle svg { width: 16px; height: 16px; }
  .site-search-toggle__text { display: inline; font-size: 16px; }
}
/* >=960: Material's inline search form takes over the search slot */
@media screen and (min-width: 60em) {
  .site-search-toggle { display: none; }
  .site-header .md-search { padding: 0; }
  .site-header .md-search__inner,
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__inner {
    float: none;
    width: 200px;
    padding: 0;
    transition: none;
  }
  .site-header .md-search__form,
  .site-header .md-search__form:hover,
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__form {
    height: 40px;
    background: var(--paper);
    color: var(--ink-strong);
    border: 2px solid var(--frame-light);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--bg-dark);
  }
  .site-header .md-search__input,
  .site-header .md-search__suggest {
    padding-left: 34px;
    padding-right: 30px;
    font-family: var(--font-pixel);
    font-size: 16px;
  }
  .site-header .md-search__input { color: var(--ink-strong); }
  .site-header .md-search__input::placeholder { color: var(--ink-muted); }
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__input::placeholder { color: transparent; }
  .site-header .md-search__input + .md-search__icon,
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__input + .md-search__icon {
    color: var(--ink-muted);
  }
  .site-header .md-search__icon[for=__search] { left: 8px; top: 8px; width: 20px; height: 20px; }
  .site-header .md-search__options { top: 6px; right: 6px; }
  /* Results drop down under the box, right-aligned, like LLM's .search__panel */
  .site-header .md-search__output {
    top: 46px;
    left: auto;
    right: 0;
    width: min(520px, calc(100vw - 32px));
  }
  .site-header .md-search__scrollwrap { width: 100%; }
  [data-md-toggle=search]:checked ~ .md-header.site-header .md-search__output {
    border: 4px solid var(--frame-light);
    outline: 2px solid var(--frame-dark);
    box-shadow: 4px 4px 0 var(--bg-dark);
  }
}
@media screen and (min-width: 76.25em) {
  .site-drawer { display: none; }
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "title . nav search";
  }
  .site-nav { flex-wrap: nowrap; }
}

/* Sticky offsets follow the taller (wrapped) header below 1220px */
.md-sidebar { top: 116px; }
.md-typeset :target { --md-scroll-margin: 132px; }
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: 64px; }
  .md-typeset :target { --md-scroll-margin: 80px; }
}

/* Content starts 24px under the header, as LLM's <main> padding does */
.md-main__inner { margin-top: 24px; }
.md-content__inner { padding-top: 0; }
.md-content__inner::before { height: 0; }

.md-search__input::placeholder,
.md-search__input ~ .md-search__icon { color: var(--ink-muted); }
.md-search__scrollwrap { background: var(--paper); }
.md-search-result__meta { background: var(--paper-tint); color: var(--ink-muted); }
.md-search-result mark { background: var(--accent-gold-soft); color: var(--ink-strong); text-decoration: underline; }
.md-search-result__link:hover,
.md-search-result__link:focus,
.md-search-result__more > summary:hover > div { background: var(--accent-gold-soft); }

/* ---------- sidebar nav / TOC ---------- */
.md-nav__title { color: var(--ink-heading); font-size: 11px; }
.md-nav__item--section > .md-nav__link {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 11px;
  font-weight: normal;
  color: var(--ink-label);
}
.md-nav__link { color: var(--ink-body); }
.md-nav__link:hover, .md-nav__link:focus { color: var(--accent-leaf-ink); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--study-ink); font-weight: 700; }
/* mobile drawer header (uses primary colors) */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background: var(--bg-dark);
  color: var(--accent-gold);
  border-bottom: 4px solid var(--frame-dark);
  font-size: 22px;
}

@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title { font-size: 22px; background: var(--paper-tint); color: var(--ink-heading); }
  .md-nav--primary .md-nav__title[for="__drawer"] { background: var(--bg-dark); color: var(--accent-gold); }
}

/* ---------- code ---------- */
.md-typeset code {
  background: var(--paper-inset);
  color: var(--ink-strong);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}
.md-typeset pre > code { border: 0; }
.md-typeset div.highlight {
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  margin: 1em 3px 1.2em 0;
}
.md-typeset div.highlight pre { margin: 0; }
.md-typeset .highlight .c, .md-typeset .highlight .c1,
.md-typeset .highlight .cm, .md-typeset .highlight .ch { color: #6e5f4a; }
.md-clipboard { color: var(--ink-muted); }
.md-clipboard:hover { color: var(--accent-leaf-ink); }

/* ---------- tables ---------- */
.md-typeset table:not([class]) {
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  background: var(--paper);
}
.md-typeset table:not([class]) th {
  background: var(--paper-tint);
  color: var(--ink-heading);
  border-bottom: 2px solid var(--line-strong);
}
.md-typeset table:not([class]) tr:hover { background: var(--paper-inset); box-shadow: none; }
.md-typeset__scrollwrap { margin-right: 0; padding: 0 3px 3px 0; }

/* ---------- admonitions / details ---------- */
.md-typeset .admonition,
.md-typeset details {
  --adm-ink: var(--frame-dark);
  --adm-bg: var(--paper-tint);
  border: 2px solid var(--frame-dark);
  border-left: 6px solid var(--adm-ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--frame-light);
  background: var(--paper-soft);
  color: var(--ink-body);
}
/* Material's per-type rules (.admonition.note etc.) out-specify the base rule */
.md-typeset .admonition[class],
.md-typeset details[class] {
  border-color: var(--frame-dark);
  border-left-color: var(--adm-ink);
}
.md-typeset .admonition:focus-within,
.md-typeset details:focus-within { box-shadow: 3px 3px 0 var(--frame-light); }
.md-typeset .admonition-title,
.md-typeset summary {
  font-size: 11px;
  line-height: 22px;
  color: var(--adm-ink);
  background: var(--adm-bg) !important;
  border-left: 0;
  border-bottom: 1px solid var(--line-mid);
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--adm-ink) !important; }
.md-typeset summary::after { color: var(--adm-ink); }
.md-typeset details:not([open]) > summary { border-bottom: 0; }

.md-typeset .note, .md-typeset .abstract, .md-typeset .summary, .md-typeset .tldr { --adm-ink: var(--study-ink); --adm-bg: var(--study-bg); }
.md-typeset .info, .md-typeset .todo { --adm-ink: #2f5f6b; --adm-bg: #e3f0f0; }
.md-typeset .tip, .md-typeset .hint, .md-typeset .important,
.md-typeset .success, .md-typeset .check, .md-typeset .done { --adm-ink: var(--ok-ink); --adm-bg: var(--ok-bg); }
.md-typeset .question, .md-typeset .help, .md-typeset .faq { --adm-ink: var(--ink-label); --adm-bg: var(--accent-gold-soft); }
.md-typeset .warning, .md-typeset .caution, .md-typeset .attention { --adm-ink: var(--warn-ink); --adm-bg: var(--warn-bg); }
.md-typeset .failure, .md-typeset .fail, .md-typeset .missing,
.md-typeset .danger, .md-typeset .error, .md-typeset .bug { --adm-ink: var(--rose-ink); --adm-bg: var(--rose-bg); }
.md-typeset .example { --adm-ink: var(--violet); --adm-bg: var(--violet-bg); }
.md-typeset .quote, .md-typeset .cite { --adm-ink: var(--ink-muted); --adm-bg: var(--paper-tint); }

/* ---------- buttons ---------- */
.md-typeset .md-button {
  font-size: 11px;
  line-height: 22px;
  padding: 6px 16px;
  color: var(--frame-dark);
  background: var(--bg-paper);
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--frame-dark);
  transition: transform 80ms steps(2, end), box-shadow 80ms steps(2, end);
}
.md-typeset .md-button--primary {
  background: var(--frame-dark);
  color: var(--bg-paper);
  border-color: var(--frame-dark);
  box-shadow: 2px 2px 0 var(--frame-light);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--accent-gold);
  color: var(--ink-strong);
  border-color: var(--frame-dark);
  box-shadow: 3px 3px 0 var(--frame-dark);
  transform: translate(-1px, -1px);
  text-decoration: none;
}
.md-typeset .md-button:active { box-shadow: 1px 1px 0 var(--frame-dark); transform: translate(1px, 1px); }
.md-typeset .md-button .twemoji { vertical-align: -3px; }

/* back-to-top */
.md-top {
  background: var(--bg-paper);
  color: var(--frame-dark);
  border: 2px solid var(--frame-dark);
  border-radius: 4px;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 11px;
}
.md-top:hover, .md-top:focus { background: var(--accent-gold); color: var(--ink-strong); }

/* ---------- footer ---------- */
.md-footer { border-top: 2px solid var(--line-strong); }
.md-footer__link:hover, .md-footer__link:focus { opacity: 1; color: var(--accent-leaf-ink); }
.md-footer__title { font-size: 11px; }
.md-footer__direction { font-size: 11px; opacity: 1; color: var(--ink-muted); }
.md-footer__button { color: var(--frame-dark); }
/* footer meta = sister-site footer (LocalLLMRPG .site-footer). Background is
   --bg-dark rather than wood: gold links on #5a3f29 are only 4.1:1 (< AA). */
.md-footer-meta {
  background: var(--bg-dark);
  border-top: 4px solid var(--frame-dark);
}
.md-footer-meta, .md-copyright, .md-copyright__highlight { color: var(--bg-cream); }
.md-copyright { width: 100%; margin: .6rem 0; font-size: .7rem; line-height: 1.7; }
.site-footer-meta__line { margin: 0 0 .25rem; }
.site-footer-meta__credit { opacity: .85; }
html .md-footer-meta.md-typeset a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 2px; }
html .md-footer-meta.md-typeset a:hover,
html .md-footer-meta.md-typeset a:focus { color: var(--bg-cream); }

/* ---------- chapter images (white PNG on cream) ---------- */
.md-typeset img[src*="images/"] {
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--line-mid);
  padding: 4px;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
img.pixel { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }

/* ---------- misc ---------- */
.md-typeset mark { color: var(--ink-strong); }
.md-typeset hr { border-bottom: 2px dashed var(--line-strong); }
.md-typeset blockquote {
  margin: 1.2em 3px 1.2em 0;
  padding: .6rem .9rem;
  background: var(--paper);
  border-left: 8px solid var(--accent-gold);
  box-shadow: 2px 2px 0 var(--bg-dark);
  color: var(--ink-body);
}
.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }
.md-typeset kbd { background: var(--paper); color: var(--ink-strong); box-shadow: 0 0 0 1px var(--frame-dark), 0 2px 0 var(--frame-light); }
:focus-visible { outline: 2px solid var(--study-border); outline-offset: 2px; }
::selection { background: var(--accent-gold-soft); color: var(--ink-strong); }

/* ---------- home hero: sister-site .dialogue box ---------- */
.md-typeset .dialogue {
  position: relative;
  margin: 0 4px 1.2rem 0;
  padding: 16px 16px 24px;
  background: var(--bg-dark);
  color: var(--bg-cream);
  border: 4px solid var(--frame-light);
  box-shadow: 4px 4px 0 var(--bg-dark);
  line-height: 1.8;
}
.md-typeset .dialogue p { margin: 0 0 .5em; color: var(--bg-cream); }
.md-typeset .dialogue p:last-child { margin-bottom: 0; }
.md-typeset .dialogue::after {
  content: "▼";
  position: absolute;
  right: 12px;
  bottom: 4px;
  font-size: 11px;
  color: var(--accent-gold);
  animation: dialogue-blink 1s steps(2, start) infinite;
}
@keyframes dialogue-blink { to { visibility: hidden; } }
.md-typeset .dialogue .hero-wild {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-size: 22px;
  line-height: 1.5;
  text-shadow: var(--pixel-bold);
  letter-spacing: .5px;
  margin-bottom: .4em;
}
.md-typeset .dialogue .hero-boss { color: var(--accent-gold); }
.md-typeset .dialogue .hero-sub { font-size: .7rem; color: #d9caa6; }
.md-typeset .hero-actions { margin: 0 0 1.6rem; }
/* md_in_html wraps the two links in one <p>; flex that paragraph */
.md-typeset .hero-actions > p { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.md-typeset .hero-actions .md-button { margin: 0; min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .md-typeset .md-button { transition: none; }
  .md-typeset .dialogue::after { animation: none; }
}

/* ---------- emphasis pass: bigger, crisper pixel labels ----------
   Pixel fonts blur under synthetic bold, so "bold" is a 1px same-colour hard
   shadow. Small labels go 11px -> 16.5px (= 33 device px on 2x screens, a
   clean 3x of the 11px design grid). */
:root { --pixel-bold: 1px 0 0 currentColor; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset .md-button {
  text-shadow: var(--pixel-bold);
  letter-spacing: .5px;
}
/* ML bumps h1 to 38.5px and labels to 16.5px here; the book keeps strict
   11px multiples (spec: offline-book-web-presentation), so labels stay 11px. */
.md-typeset .md-button { padding: .45em 1.1em; }