/* Dasung Touch — an e-ink page. Unbleached paper, near-black ink and no colour at all;
   halftone dots stand in for grey, as on the panel itself.
   Display: Newsreader. Text: IBM Plex Sans. Code: IBM Plex Mono. */

:root {
  --page-bg: #efede6; --page-text: #1a1a18; --page-muted: #5d5c57; --page-line: #cfccc2;
  --page-accent: #1a1a18; --strong: #0a0a09; --surface: #f7f6f1; --raise: #e6e3da;
  --code-bg: #e6e3da; --code-text: #1a1a18;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --dots: radial-gradient(circle, #1a1a18 0.9px, transparent 1.1px) 0 0 / 6px 6px;
  --k-ink: #1a1a18; --k-accent: #1a1a18; --k-b: #4a4a46; --k-ok: #1a1a18; --k-muted: #8c8a82; --k-file: #5d5c57;
  color-scheme: light;
}
body { -webkit-font-smoothing: antialiased; }
.hero { position: relative; }
.hero::after {
  content: ""; display: block; height: 22px; margin-top: 30px; background: var(--dots);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
}
.hero h1 { font: 600 clamp(56px, 8.6vw, 112px)/0.92 var(--display); font-variation-settings: "opsz" 72; letter-spacing: -0.025em; }
.part > h2 { font: 600 clamp(28px, 3.2vw, 40px)/1.1 var(--display); font-style: italic; }
a { color: var(--page-text); text-decoration-thickness: 1px; }
.fig { padding: 16px; background: var(--surface); border: 1.5px solid var(--page-text); border-radius: 2px; box-shadow: 6px 6px 0 -1px var(--page-bg), 6px 6px 0 0 var(--page-text); }
.dg .node { fill: #fbfaf6; }
.dg .shadow { fill: none; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
table thead th { color: var(--page-text); border-bottom: 1.5px solid var(--page-text); }
tbody tr:nth-child(odd) th, tbody tr:nth-child(odd) td { background: rgba(26, 26, 24, 0.035); }
.facts li { border-left: 0; padding-left: 26px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; background: var(--dots); border: 1px solid var(--page-text); }
