/* PaperLens 教科書シェル — 方眼ノートの意匠。
 * 引き継ぎ書セクション3のデザイントークンをそのまま持ち込んでいる。
 * 色はここでしか定義せず、以下すべて変数経由で参照する（ハードコード禁止）。
 * ライト＝紙、ダーク＝夜の紙。data-theme で切り替え、localStorage に記憶。 */
:root {
  --paper: #f4f5f0; --grid: #dee5e0; --grid-bold: #ccd7d2;
  --panel: #fffefa; --panel-2: #f0f2ec;
  --ink: #1b2732; --ink-2: #48596a; --ink-3: #7b8b98;
  --pen-red: #c33f31; --pen-red-bg: #fdf5f3;
  --pen-blue: #2a5d92; --pen-blue-bg: #f2f6fb;
  --pen-green: #2c7a4f; --pen-green-bg: #f1f7f2;
  --fusen: #f7e08a; --fusen-edge: #ddc972; --fusen-ink: #8a7420;
  --marker: rgba(247, 224, 138, .92);
  --fig-a: #dfe6e2; --fig-b: #e6ebe4;
  --bar: #f4f5f0e6; --shadow: #00000012;
  --ic-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.2'/><path d='M12 11.2v5.6'/><path d='M12 7.6h.01'/></svg>");
  --ic-key: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.2 18.2h5.6'/><path d='M10.2 21h3.6'/><path d='M12 2.8a6.2 6.2 0 0 0-3.6 11.3c.5.4.8 1 .8 1.6h5.6c0-.6.3-1.2.8-1.6A6.2 6.2 0 0 0 12 2.8Z'/></svg>");
  --ic-warn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4 22 20.6H2Z'/><path d='M12 9.6v4.4'/><path d='M12 17.4h.01'/></svg>");
  --hand: 'Klee One', serif;
  --scrawl: 'Yomogi', cursive;
  --body: 'Klee One', 'Zen Kurenaido', serif;
  --code: 'M PLUS 1 Code', ui-monospace, monospace;
}
[data-theme="dark"] {
  --paper: #151a20; --grid: #242d35; --grid-bold: #2f3941;
  --panel: #1c232b; --panel-2: #232b34;
  --ink: #e6ebe7; --ink-2: #bcc6c9; --ink-3: #8d989d;
  --pen-red: #ec8168; --pen-red-bg: #2c1e1a;
  --pen-blue: #82b8dd; --pen-blue-bg: #1a2531;
  --pen-green: #7ac795; --pen-green-bg: #182720;
  --fusen: #332c17; --fusen-edge: #6b5c2a; --fusen-ink: #d5bc72;
  --marker: rgba(214, 176, 74, .30);
  --fig-a: #2a333c; --fig-b: #232b34;
  --bar: #151a20e6; --shadow: #00000040;
}


/* ── token bridge: the whole site now wears the notebook ──
 * style.css defines --bg/--panel/--ink/--accent/... for the original dark
 * theme. Redefining them here (loaded after style.css) repaints every
 * component — including the canvas figures, which read these values live. */
:root {
  --bg: var(--paper);
  --bg-2: var(--panel-2);
  --panel2: var(--panel-2);
  --line: var(--grid-bold);
  --line-strong: var(--ink-3);
  --ink-soft: var(--ink-2);
  --dim: var(--ink-3);
  --accent: var(--pen-red);
  --accent-lift: var(--pen-blue);
  --gold: var(--fusen-ink);
  --serif: 'Klee One', 'Zen Kurenaido', serif;
  --sans: 'Klee One', 'Zen Kurenaido', serif;
  --mono: 'M PLUS 1 Code', ui-monospace, monospace;
}
[data-theme="dark"] {
  --gold: var(--fusen-ink);
}

/* the grid paper is the page, not just the textbook */
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-attachment: fixed;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.95;
  letter-spacing: .02em;
  border-top: 3px solid var(--pen-red);
}
a { color: var(--pen-blue); }
a:hover { color: var(--pen-red); }

/* chrome shared by every page */
.hd { background: var(--bar); border-bottom: 1.5px solid var(--ink); }
.logo, .hd nav a { color: var(--ink); }
.logo-kanji { background: var(--pen-red); box-shadow: none; }
.hd nav a.lang, .ghost {
  border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); border-radius: 8px;
}
.ghost:hover { border-color: var(--pen-red); color: var(--pen-red); }
.cta {
  background: var(--pen-red); color: var(--paper); border-radius: 8px;
  font-weight: 700; box-shadow: 2px 2px 0 var(--shadow);
}
.cta:hover { background: var(--pen-red); color: var(--paper); opacity: .9; }

/* journal surfaces become paper panels with ruled borders */
.card, .fcard, .panel, .lgenre, .planned-box, .me-box, .anim, .lab-readout,
.lab-matrix, .lab-controls, .srcbox, .pg-cell, .lab-cta, .paywall, #install-bar {
  background: var(--panel);
  border-color: var(--ink-3);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.hero-t, .pg-t, .sec-t, .row-title, .fname, .prose h1, .prose h2, .prose h3,
.comments h3, .panel h3, .lgenre h3, .lgroup > h2 { font-family: var(--serif); }
.hero-t em { color: var(--pen-red); background: linear-gradient(transparent 64%, var(--marker) 64%); }
.kicker, .gnav-label, .row-meta, .a-meta, .badge, .chip, .tags a, .tags span,
.ax-label, .crumb, .eq-n, .anim-n, .ft, .fmeta, .lstep-n, .lstep-min, .pg-dir {
  font-family: var(--mono);
}
.prose strong { box-shadow: inset 0 -.34em 0 var(--marker); -webkit-text-stroke: .4px currentColor; }
.prose p, .prose li { color: var(--ink); }
.prose code { background: var(--panel-2); color: var(--pen-red); border: 0; }
.prose pre { background: var(--panel); color: var(--ink); border: 1.5px solid var(--ink-3); border-left: 4px solid var(--pen-blue); }
.prose pre code { color: var(--ink); }
.prose h2 { border-top-color: var(--ink-3); }
.prose h2::before { color: var(--pen-red); }
.badge.free { color: var(--ink-2); border: 1.5px solid var(--ink-3); background: var(--panel); }
.badge.premium { color: var(--fusen-ink); background: var(--fusen); border: 1px solid var(--fusen-edge); }
.badge.paper { color: var(--pen-blue); border: 1px solid var(--pen-blue); background: transparent; }
.row { border-bottom: 1px dashed var(--ink-3); }
.gnav { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink-3); }
.gchip { background: var(--panel); border: 1.5px solid var(--ink-3); color: var(--ink); }
.gchip b, .fmark, .fcard::after { color: var(--pen-red); }
.fcard::after { background: linear-gradient(90deg, var(--pen-red), transparent); }
.eq-block { border-left: 2px solid var(--ink-3); }
.lab-canvas { background: var(--panel); border-color: var(--ink-3); }
#comment-form textarea {
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink-3);
  border-radius: 7px; font-family: var(--sans); font-weight: 600;
}
.comment { border-bottom: 1px dashed var(--ink-3); }
.comment .txt { color: var(--ink); }
.member-badge { color: var(--fusen-ink); background: var(--fusen); }
.ft { border-top: 2px solid var(--ink); }
.ft-rule { border-top-color: var(--pen-red); }

/* ── the textbook shell ── */
body[data-shell="book"] {
  margin: 0; color: var(--ink);
  font-family: var(--body); font-size: 18.5px; font-weight: 600;
  line-height: 2.0; letter-spacing: .02em;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-attachment: fixed;
  border-top: 0;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}
body[data-shell="book"] a { color: var(--pen-blue); }
body[data-shell="book"] a:hover { color: var(--pen-red); }
body[data-shell="book"] main { max-width: none; padding: 0; }
body[data-shell="book"] .sheet { max-width: 980px; margin: 0 auto; padding: 0 28px 140px; }
@media (min-width: 1500px) { body[data-shell="book"] .sheet { max-width: 1120px; } }

/* masthead reskin */
body[data-shell="book"] .hd {
  background: var(--bar); backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--ink); position: sticky;
}
body[data-shell="book"] .hd-in { max-width: none; padding: 9px 14px; }
body[data-shell="book"] .logo { font-family: var(--hand); font-size: 16px; color: var(--ink); }
body[data-shell="book"] .logo-kanji { background: var(--pen-red); box-shadow: none; }
body[data-shell="book"] .hd nav a { color: var(--ink); font-family: var(--body); }
body[data-shell="book"] .hd nav a:not(.lang)::after { border-bottom-color: var(--pen-red); }
body[data-shell="book"] .hd nav a.lang,
body[data-shell="book"] .ghost {
  border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink);
  font-family: var(--code); border-radius: 8px;
}
body[data-shell="book"] .ghost:hover { border-color: var(--pen-red); color: var(--pen-red); }
body[data-shell="book"] .cta {
  background: var(--pen-red); color: var(--paper); border-radius: 8px;
  font-family: var(--body); font-weight: 700; box-shadow: 2px 2px 0 var(--shadow);
}
body[data-shell="book"] .cta:hover { background: var(--pen-red); opacity: .9; color: var(--paper); }

/* ── sidebar of contents ── */
#side {
  position: fixed; top: 0; left: 0; bottom: 0; width: 290px; z-index: 50;
  background: var(--panel); border-right: 2px solid var(--ink);
  transform: translateX(-102%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
#side.open { transform: none; }
#side .sh { padding: 14px 16px 10px; border-bottom: 1.5px solid var(--ink); display: flex; gap: 8px; align-items: center; }
#side .sh input {
  flex: 1; min-width: 0; font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 7px 10px; border: 1.5px solid var(--ink-3); border-radius: 7px;
  background: var(--paper); color: var(--ink);
}
#side .sh input:focus { outline: none; border-color: var(--pen-blue); }
#side nav { overflow-y: auto; padding: 10px 0 40px; flex: 1; }
#side .grp { font-family: var(--code); font-size: 10.5px; letter-spacing: .16em; color: var(--pen-red); padding: 14px 16px 6px; }
#side a {
  display: block; padding: 8px 16px; font-size: 14.5px; line-height: 1.6;
  color: var(--ink); text-decoration: none; border-left: 3px solid transparent;
}
#side a:hover { background: var(--panel-2); color: var(--ink); }
#side a.act { border-left-color: var(--pen-red); background: var(--panel-2); color: var(--pen-red); }
#side a b { font-family: var(--code); font-size: 11px; color: var(--ink-3); margin-right: 7px; font-weight: 500; }
#side a.act b { color: var(--pen-red); }
#side .none { padding: 16px; font-size: 13px; color: var(--ink-3); }
#scrim { position: fixed; inset: 0; background: #0009; z-index: 45; opacity: 0; pointer-events: none; transition: opacity .25s; }
#scrim.on { opacity: 1; pointer-events: auto; }

/* ── cover ── */
body[data-shell="book"] .cover { padding: 56px 0 0; }
.series {
  font-family: var(--code); font-size: 12px; letter-spacing: .14em; color: var(--pen-red);
  border: 1.5px solid var(--pen-red); display: inline-block; padding: 3px 12px; transform: rotate(-1.2deg);
}
body[data-shell="book"] h1 {
  font-family: var(--hand); font-weight: 600; font-size: clamp(2rem, 6.2vw, 3.2rem);
  line-height: 1.42; margin: 26px 0 0;
}
body[data-shell="book"] h1 .sub { display: block; font-size: .44em; color: var(--ink-2); margin-top: 14px; letter-spacing: .05em; line-height: 1.7; }
.byline {
  font-family: var(--code); font-size: 13px; color: var(--ink-3); margin-top: 30px;
  padding-top: 14px; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: 6px 26px;
}
body[data-shell="book"] .abstract { font-size: 1.1rem; line-height: 2.05; margin: 32px 0 0; max-width: 40em; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.legend span {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--code); font-size: 12.5px;
  border: 1.5px solid currentColor; border-radius: 999px; padding: 5px 14px 5px 10px;
}
.legend i {
  width: 17px; height: 17px; background: currentColor; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: var(--ic); mask-image: var(--ic);
}
.legend .lg-i { color: var(--pen-green); --ic: var(--ic-info); }
.legend .lg-k { color: var(--pen-blue); --ic: var(--ic-key); }
.legend .lg-w { color: var(--pen-red); --ic: var(--ic-warn); }

/* ── table of contents ── */
body[data-shell="book"] .toc { margin: 52px 0 0; background: var(--panel); border: 2px solid var(--ink); padding: 24px 26px 20px; }
body[data-shell="book"] .toc h2 { font-family: var(--hand); font-size: 1.15rem; margin: 0 0 6px; font-weight: 600; }
.toc .pt { font-family: var(--code); font-size: 11px; letter-spacing: .14em; color: var(--pen-red); margin: 20px 0 6px; }
.toc .pt:first-of-type { margin-top: 10px; }
.toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 34px; }
.toc li { font-size: 15px; line-height: 1.95; break-inside: avoid; }
.toc li b { font-family: var(--code); color: var(--ink-3); font-size: 11.5px; font-weight: 500; margin-right: 6px; }
.toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.toc a:hover { border-bottom-color: var(--pen-red); color: var(--pen-red); }

/* ── chapter ── */
body[data-shell="book"] .chapter { margin: 40px 0 0; }
.chapnum { font-family: var(--code); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--pen-red); }
h3.ch {
  font-family: var(--hand); font-weight: 600; font-size: clamp(1.4rem, 4.4vw, 1.95rem);
  margin: 6px 0 0; line-height: 1.5; border-bottom: 2.5px solid var(--ink); padding-bottom: 10px; display: inline-block;
}
.chmeta { display: flex; gap: .7rem; align-items: center; font-family: var(--code); font-size: 12px; color: var(--ink-3); margin-top: 14px; }
body[data-shell="book"] .crumb { font-family: var(--code); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; }
.chapbody h3 { font-family: var(--hand); font-weight: 600; font-size: 1.2rem; margin: 36px 0 8px; color: var(--pen-blue); }
.chapbody p { margin: 0 0 18px; max-width: 44em; }
body[data-shell="book"] strong {
  font-weight: 700; -webkit-text-stroke: .4px currentColor;
  box-shadow: inset 0 -.34em 0 var(--marker); padding: 0 2px; background: none; color: inherit;
}
q { font-family: var(--hand); color: var(--pen-blue); font-weight: 600; quotes: none; }
body[data-shell="book"] code {
  font-family: var(--code); font-size: .88em; font-weight: 500;
  background: var(--panel-2); color: var(--ink); border: 0; padding: 1px 5px; border-radius: 2px;
}
.eq {
  font-family: var(--code); font-size: 1.02rem; background: var(--panel);
  border-left: 4px solid var(--pen-blue); padding: 12px 18px; margin: 22px 0;
  max-width: 44em; letter-spacing: .03em; overflow-x: auto;
}

/* ── annotation bubbles ── */
.note {
  --nc: var(--pen-green); --nbg: var(--pen-green-bg); --ic: var(--ic-info);
  position: relative; margin: 2px 0 30px 2.6em; max-width: 34em;
  background: var(--nbg); border: 1.5px solid var(--nc); border-radius: 12px;
  padding: 15px 19px 15px 56px;
  font-family: var(--scrawl); color: var(--nc); font-size: 1.02rem; line-height: 1.85;
  -webkit-text-stroke: .3px currentColor;
}
.note.key { --nc: var(--pen-blue); --nbg: var(--pen-blue-bg); --ic: var(--ic-key); }
.note.warn { --nc: var(--pen-red); --nbg: var(--pen-red-bg); --ic: var(--ic-warn); }
.note::before, .note::after { content: ""; position: absolute; left: 30px; width: 0; height: 0; border-style: solid; }
.note::before { top: -12px; border-width: 0 11px 12px; border-color: transparent transparent var(--nc); }
.note::after { top: -10px; border-width: 0 10px 11px; border-color: transparent transparent var(--nbg); }
.note strong { box-shadow: none; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.note q { color: inherit; }
.note .ico {
  position: absolute; left: 17px; top: 16px; width: 24px; height: 24px;
  background: currentColor; -webkit-text-stroke: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: var(--ic); mask-image: var(--ic);
}

/* ── fusen / defbox / table / figure / timeline ── */
.fusen { background: var(--fusen); border: 1px solid var(--fusen-edge); padding: 18px 20px 16px; margin: 30px 0; max-width: 44em; box-shadow: 2px 2px 0 var(--shadow); }
.fusen .lab { font-family: var(--code); font-size: 11px; letter-spacing: .14em; color: var(--fusen-ink); display: block; margin-bottom: 8px; }
.fusen p { margin-bottom: 0; }
.fusen p + p { margin-top: 12px; }
.fusen strong { box-shadow: inset 0 -.34em 0 color-mix(in srgb, var(--paper) 55%, transparent); }

.defbox { border: 2px solid var(--ink); background: var(--panel); padding: 20px 22px 16px; margin: 30px 0; max-width: 44em; }
.defbox dl { margin: 0; }
.defbox dt { font-family: var(--hand); font-weight: 600; font-size: 1.02rem; color: var(--pen-blue); margin-top: 14px; }
.defbox dt:first-of-type { margin-top: 0; }
.defbox dd { margin: 2px 0 0; font-size: 16px; line-height: 1.9; }

body[data-shell="book"] table {
  width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px;
  background: var(--panel); max-width: 44em; display: table;
}
body[data-shell="book"] th, body[data-shell="book"] td {
  border: 1px solid var(--ink-3); padding: 10px 12px; text-align: left; vertical-align: top;
  line-height: 1.8; font-size: 15.5px; color: var(--ink);
}
body[data-shell="book"] thead th { background: var(--panel-2); font-family: var(--hand); font-weight: 600; }
.tablecap { font-family: var(--code); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); padding-bottom: 8px; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 44em; margin: 26px 0; }
.scrollx table { min-width: 520px; margin: 0; }

body[data-shell="book"] figure { margin: 34px 0; max-width: 44em; padding: 0; background: none; border: 0; }
body[data-shell="book"] figure svg { width: 100%; height: auto; display: block; background: var(--panel); border: 2px solid var(--ink); }
body[data-shell="book"] figcaption { font-family: var(--code); font-size: 12.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.75; display: block; }

.tl { margin: 30px 0; max-width: 44em; border-left: 2px solid var(--ink); }
.tl .ev { position: relative; padding: 0 0 22px 24px; }
.tl .ev::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; background: var(--pen-red); border-radius: 50%; }
.tl .yr { font-family: var(--code); font-size: 13px; color: var(--pen-red); letter-spacing: .06em; }
.tl .ti { font-family: var(--hand); font-weight: 600; font-size: 1.1rem; margin-top: 1px; }
.tl .de { font-size: 15.5px; line-height: 1.85; margin-top: 2px; color: var(--ink-2); }

/* ── glossary ── */
.glos { margin-top: 40px; border-top: 3px double var(--ink); padding-top: 26px; }
.glos h2 { font-family: var(--hand); font-size: 1.4rem; margin: 0 0 10px; font-weight: 600; }
.glos .g { padding: 13px 0; border-bottom: 1px dashed var(--ink-3); max-width: 44em; }
.glos .gt { font-family: var(--code); font-size: 14px; color: var(--pen-blue); font-weight: 500; }
.glos .gd { font-size: 15.5px; line-height: 1.85; margin-top: 2px; }

/* ── shared chrome recoloured for the notebook ── */
body[data-shell="book"] .paywall {
  background: var(--panel); border: 2px solid var(--ink); border-radius: 0;
  box-shadow: 3px 3px 0 var(--shadow);
}
body[data-shell="book"] .paywall h3, body[data-shell="book"] .paywall h1 { font-family: var(--hand); }
body[data-shell="book"] .paywall p { color: var(--ink-2); }
body[data-shell="book"] .paywall-mark { color: var(--pen-red); }
body[data-shell="book"] .badge.free { color: var(--ink-2); border: 1.5px solid var(--ink-3); background: var(--panel); }
body[data-shell="book"] .badge.premium { color: var(--fusen-ink); background: var(--fusen); border: 1px solid var(--fusen-edge); }
body[data-shell="book"] .comments { border-top: 2px solid var(--ink); }
body[data-shell="book"] .comments h3 { font-family: var(--hand); color: var(--ink); }
body[data-shell="book"] #comment-form textarea {
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink-3); border-radius: 7px;
  font-family: var(--body); font-weight: 600;
}
body[data-shell="book"] .comment { border-bottom: 1px dashed var(--ink-3); }
body[data-shell="book"] .comment .txt { color: var(--ink); }
body[data-shell="book"] .member-badge { color: var(--fusen-ink); background: var(--fusen); }
body[data-shell="book"] .pager { margin-top: 50px; }
body[data-shell="book"] .pg-cell { background: var(--panel); border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); }
body[data-shell="book"] .pg-next { border-right: 4px solid var(--pen-red); }
body[data-shell="book"] .pg-prev { border-left: 4px solid var(--ink-3); }
body[data-shell="book"] .pg-dir { font-family: var(--code); color: var(--ink-3); }
body[data-shell="book"] .pg-next .pg-dir { color: var(--pen-red); }
body[data-shell="book"] .pg-title { font-family: var(--hand); }
body[data-shell="book"] .anim { background: var(--panel); border: 1.5px solid var(--ink); border-left: 4px solid var(--pen-blue); }
body[data-shell="book"] .anim figcaption { color: var(--ink-3); font-family: var(--code); }
body[data-shell="book"] .anim-n { color: var(--pen-red); border-color: var(--pen-red); }
body[data-shell="book"] .ft { border-top: 2px solid var(--ink); color: var(--ink-3); font-family: var(--code); }
body[data-shell="book"] .ft-rule { border-top-color: var(--pen-red); }

@media (min-width: 1180px) {
  body[data-shell="book"] #side { transform: none; }
  body[data-shell="book"] #scrim { display: none; }
  body[data-shell="book"] #menu { display: none; }
  /* the gutter belongs to the sidebar — never reserve it on a page without one */
  body[data-shell="book"]:has(#side) { padding-left: 290px; }
}
@media (max-width: 640px) {
  body[data-shell="book"] { font-size: 18px; line-height: 1.98; background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px; }
  body[data-shell="book"] .sheet { padding: 0 16px 110px; }
  body[data-shell="book"] .cover { padding-top: 30px; }
  .toc ol { columns: 1; }
  .note { margin-left: 1.2em; padding-left: 50px; }
  #side { width: 84vw; max-width: 320px; }
  body[data-shell="book"] th, body[data-shell="book"] td { padding: 8px 9px; font-size: 13.5px; }
}
@media print {
  #side, #scrim, .hd, .comments, .engage, .pager, .paywall { display: none !important; }
  body[data-shell="book"] { padding-left: 0; background: #fff; color: #000; }
}

/* ── theme cross-fade ──
 * The transition is switched on only while the theme is actually changing.
 * Leaving it on permanently would also animate hover states and every
 * :focus ring, which makes the whole interface feel sluggish. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color .5s ease,
    background-image .5s ease,
    color .5s ease,
    border-color .5s ease,
    outline-color .5s ease,
    box-shadow .5s ease,
    fill .5s ease,
    stroke .5s ease !important;
}
/* the grid paper is a background-image, so it needs the same window */
html.theme-anim body { transition: background-color .5s ease, background-image .5s ease !important; }

@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: none !important;
  }
}