:root {
  color-scheme: light;
  --reader-scale: 1;
  --measure: 43rem;
  --base-size: 18.5px;
  --peak-max: 2.02em;
  --climax-max: 1.68em;

  /* Local system fonts only. Keep every semantic role behind a variable. */
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "BIZ UDPMincho", "Noto Serif CJK JP", serif;
  --font-soft-serif: "Klee", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "BIZ UDPMincho", serif;
  --font-sans: "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
  --font-round: "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: "BIZ UDGothic", "MS Gothic", "Osaka-Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-impact: "Yu Gothic UI Semibold", "Hiragino Kaku Gothic StdN W8", "Arial Black", "Meiryo", sans-serif;
  --font-classic: "Yu Mincho Demibold", "Hiragino Mincho ProN W6", "HGS明朝E", "Yu Mincho", serif;
  --font-hand: "Klee", "Yuji Syuku", "Hannotate SC", "Yu Mincho", cursive;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;

  --font-body: var(--font-serif);
  --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono);
  --font-document: var(--font-mono);
  --font-command: var(--font-impact);
  --font-memory: var(--font-hand);
  --font-comic: var(--font-round);
  --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic);
  --font-name: var(--font-classic);
  --font-sound: var(--font-mono);
  --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif);
  --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);

  --paper: #f5f0e7;
  --paper-2: #e9dfd0;
  --ink: #24211d;
  --muted: #746d63;
  --panel: rgb(250 247 240 / 94%);
  --line: rgb(58 48 37 / 18%);
  --shadow: rgb(45 34 22 / 16%);
  --tone-1: #93632c;
  --tone-2: #315c77;
  --tone-3: #765066;
  --tone-4: #4c6770;
  --tone-5: #9c3b33;
}

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

html {
  min-width: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 5.2rem;
  background: var(--paper-2);
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% -5%, rgb(255 255 255 / 72%), transparent 33rem),
    linear-gradient(90deg, rgb(70 55 35 / 3.5%) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 28px 28px, auto;
  font-family: var(--font-body);
  font-size: calc(var(--base-size) * var(--reader-scale));
  line-height: 2.02;
  letter-spacing: .016em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-theme="night"] {
  color-scheme: dark;
  --paper: #12161a;
  --paper-2: #090c0f;
  --ink: #ebe6dc;
  --muted: #aaa49a;
  --panel: rgb(18 22 27 / 94%);
  --line: rgb(235 230 220 / 16%);
  --shadow: rgb(0 0 0 / 52%);
  --tone-1: #e4b76e;
  --tone-2: #7fc1e1;
  --tone-3: #cf8eb0;
  --tone-4: #99b9c5;
  --tone-5: #ef867b;
  background:
    radial-gradient(circle at 18% -5%, rgb(83 111 130 / 16%), transparent 34rem),
    linear-gradient(90deg, rgb(255 255 255 / 1.6%) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 28px 28px, auto;
}

::selection {
  color: var(--paper);
  background: var(--tone-2);
}

/*
 * Genre presets change role stacks, not the semantic markup. The first eight
 * retain the reference bundle's values; the remaining seven cover CSV genres.
 */
body[data-genre="literary"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-serif);
  --font-system: var(--font-mono); --font-document: var(--font-serif);
  --font-command: var(--font-classic); --font-memory: var(--font-soft-serif);
  --font-comic: var(--font-sans); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-mono); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="military-sf"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-impact);
  --font-sound: var(--font-mono); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="logic-thriller"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-sans); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-mono); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="school-action"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-round);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-serif);
  --font-comic: var(--font-round); --font-magic: var(--font-impact);
  --font-ritual: var(--font-impact); --font-name: var(--font-impact);
  --font-sound: var(--font-impact); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="web-fantasy"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-mono); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="institutional-horror"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-sans); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-mono); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-hand);
  --font-clue: var(--font-mono);
}

body[data-genre="satirical-sf"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-round);
  --font-system: var(--font-mono); --font-document: var(--font-sans);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-sans);
  --font-sound: var(--font-mono); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-hand);
  --font-clue: var(--font-mono);
}

body[data-genre="folklore-dark"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-sans); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-classic); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="adventure-action"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-serif);
  --font-command: var(--font-impact); --font-memory: var(--font-soft-serif);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-impact);
  --font-sound: var(--font-impact); --font-motif: var(--font-classic);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="romance-drama"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-soft-serif);
  --font-system: var(--font-mono); --font-document: var(--font-sans);
  --font-command: var(--font-sans); --font-memory: var(--font-hand);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-soft-serif);
  --font-sound: var(--font-serif); --font-motif: var(--font-classic);
  --font-sensory: var(--font-soft-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="absurd-comedy"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-round);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-serif);
  --font-comic: var(--font-round); --font-magic: var(--font-impact);
  --font-ritual: var(--font-classic); --font-name: var(--font-sans);
  --font-sound: var(--font-impact); --font-motif: var(--font-classic);
  --font-sensory: var(--font-round); --font-horror: var(--font-hand);
  --font-clue: var(--font-mono);
}

body[data-genre="historical-drama"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-serif);
  --font-system: var(--font-mono); --font-document: var(--font-classic);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-sans); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-impact); --font-motif: var(--font-classic);
  --font-sensory: var(--font-soft-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="sports-competition"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-sans);
  --font-system: var(--font-mono); --font-document: var(--font-mono);
  --font-command: var(--font-impact); --font-memory: var(--font-soft-serif);
  --font-comic: var(--font-round); --font-magic: var(--font-impact);
  --font-ritual: var(--font-impact); --font-name: var(--font-impact);
  --font-sound: var(--font-impact); --font-motif: var(--font-impact);
  --font-sensory: var(--font-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="music-lyrical"] {
  --font-body: var(--font-serif); --font-dialogue: var(--font-soft-serif);
  --font-system: var(--font-mono); --font-document: var(--font-sans);
  --font-command: var(--font-impact); --font-memory: var(--font-hand);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-classic);
  --font-sound: var(--font-hand); --font-motif: var(--font-soft-serif);
  --font-sensory: var(--font-soft-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

body[data-genre="daily-work"] {
  --font-body: var(--font-sans); --font-dialogue: var(--font-round);
  --font-system: var(--font-mono); --font-document: var(--font-sans);
  --font-command: var(--font-impact); --font-memory: var(--font-soft-serif);
  --font-comic: var(--font-round); --font-magic: var(--font-classic);
  --font-ritual: var(--font-classic); --font-name: var(--font-serif);
  --font-sound: var(--font-sans); --font-motif: var(--font-classic);
  --font-sensory: var(--font-soft-serif); --font-horror: var(--font-serif);
  --font-clue: var(--font-mono);
}

.progress-track {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--tone-2), var(--tone-1), var(--tone-5));
}

.reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .58rem .75rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 8px 28px var(--shadow);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  backdrop-filter: blur(15px) saturate(1.15);
}

.toolbar-title {
  margin-right: .2rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.reader-toolbar label,
.size-group {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.reader-toolbar label {
  color: var(--muted);
}

.reader-toolbar select,
.reader-toolbar button,
.reader-toolbar a {
  min-height: 2.12rem;
  border: 1px solid var(--line);
  border-radius: .62rem;
  color: var(--ink);
  background: var(--paper);
  padding: .34rem .58rem;
  font: inherit;
}

.reader-toolbar button {
  cursor: pointer;
  font-weight: 750;
}

.reader-toolbar a {
  display: inline-flex;
  align-items: center;
  font-weight: 750;
  text-decoration: none;
}

.reader-toolbar button:hover,
.reader-toolbar select:hover,
.reader-toolbar a:hover {
  border-color: var(--tone-2);
  color: var(--tone-2);
}

.reader-toolbar :focus-visible,
.panel :focus-visible {
  outline: 3px solid var(--tone-1);
  outline-offset: 2px;
}

.size-group {
  gap: .25rem;
}

.size-group button {
  min-width: 2.15rem;
}

.panel {
  position: fixed;
  top: 4.35rem;
  z-index: 880;
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 5.4rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 18px 62px var(--shadow);
  font-family: var(--font-ui);
  font-size: .88rem;
  line-height: 1.65;
  overscroll-behavior: contain;
}

.panel[hidden] {
  display: none;
}

.toc-panel {
  left: max(1rem, calc(50vw - 36rem));
}

.info-panel {
  right: max(1rem, calc(50vw - 36rem));
}

.panel h2 {
  margin: 0 0 .7rem;
  font-size: 1rem;
}

.panel h3 {
  margin: 1rem 0 .3rem;
  font-size: .9rem;
}

.panel p {
  margin: .35rem 0;
}

.panel ol,
.panel ul {
  margin: 0;
  padding-left: 1.2rem;
}

.toc-panel ol {
  padding: 0;
  list-style: none;
}

.toc-panel li + li {
  border-top: 1px solid var(--line);
}

.toc-panel a {
  display: block;
  padding: .55rem .25rem;
  color: var(--ink);
  text-decoration: none;
}

.toc-panel a:hover {
  color: var(--tone-2);
}

.legend-grid {
  display: grid;
  gap: .35rem;
}

.legend-item {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) 1fr;
  gap: .5rem;
  align-items: baseline;
}

.legend-sample {
  color: var(--tone-1);
}

.reader-shell {
  padding: clamp(2.7rem, 7vw, 6.5rem) 1rem 8rem;
}

.novel {
  width: min(100%, var(--measure));
  margin-inline: auto;
  font-family: var(--font-body);
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  hanging-punctuation: first allow-end last;
}

.reader-footer {
  width: min(100%, var(--measure));
  margin: 5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.return-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .55rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow);
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.4;
  text-decoration: none;
}

.return-link:hover {
  border-color: var(--tone-2);
  color: var(--tone-2);
}

.return-link:focus-visible {
  outline: 3px solid var(--tone-1);
  outline-offset: 3px;
}

.title-page {
  display: grid;
  min-height: min(63vh, 42rem);
  place-items: center;
  padding: 4rem 0 6rem;
}

.title-line {
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-motif);
  font-size: clamp(1.9rem, 6.8vw, 4.35rem);
  line-height: 1.35;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 .08em .3em var(--shadow);
  text-wrap: balance;
  white-space: normal;
}

.prologue,
.chapter,
.prose-section {
  margin-block: 0 8.5rem;
}

.chapter,
.prologue,
.prose-section {
  scroll-margin-top: 5.5rem;
}

.chapter-heading {
  margin: 0 0 3.6rem !important;
  padding: 0 0 .95rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-motif);
  font-size: clamp(1.35rem, 4.4vw, 2.2rem);
  line-height: 1.42;
  letter-spacing: .11em;
  text-align: center;
  white-space: normal;
}

.source-line {
  position: relative;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.source-indent {
  display: none;
}

.gap-0 { margin-top: .12em; }
.gap-1 { margin-top: 1.15em; }
.gap-2 { margin-top: 2.45em; }
.gap-3 { margin-top: 4em; }

.scene-break {
  color: var(--muted);
  padding-left: .8em;
  text-align: center;
  letter-spacing: .8em;
  white-space: normal;
}

.end-mark {
  margin-top: 5rem !important;
  font-family: var(--font-motif);
  text-align: center;
  letter-spacing: .55em;
  white-space: normal;
}

.role-narration { font-family: var(--font-body); }
.role-dialogue { font-family: var(--font-dialogue); letter-spacing: .008em; }
.role-sensory { font-family: var(--font-sensory); }
.role-memory,
.role-thought { font-family: var(--font-memory); font-style: italic; letter-spacing: .035em; }
.role-comic { font-family: var(--font-comic); font-weight: 700; }
.role-magic { font-family: var(--font-magic); letter-spacing: .055em; }
.role-ritual { font-family: var(--font-ritual); letter-spacing: .12em; }
.role-name { font-family: var(--font-name); font-weight: 700; letter-spacing: .07em; }
.role-sound { font-family: var(--font-sound); letter-spacing: .15em; }
.role-system,
.role-interface { font-family: var(--font-system); letter-spacing: .045em; font-variant-numeric: tabular-nums; }
.role-document {
  border-inline-start: .22em solid var(--tone-4);
  padding: .38em .78em;
  background: color-mix(in srgb, var(--tone-4) 7%, transparent);
  font-family: var(--font-document);
  font-variant-numeric: tabular-nums;
}
.role-clue { font-family: var(--font-clue); font-variant-numeric: tabular-nums; }
.role-command,
.role-action { font-family: var(--font-command); font-weight: 850; letter-spacing: .045em; }
.role-horror { font-family: var(--font-horror); letter-spacing: .075em; }
.role-motif { font-family: var(--font-motif); font-weight: 700; }

.term {
  font-family: inherit;
  font-weight: 700;
}

.term-skill,
.term-magic,
.term-world,
.term-ritual { font-family: var(--font-magic); letter-spacing: .05em; }
.term-system,
.term-code,
.term-document { font-family: var(--font-system); font-variant-numeric: tabular-nums; }
.term-name,
.term-title,
.term-proper { font-family: var(--font-name); }
.term-food { font-family: var(--font-sensory); }
.term-memory { font-family: var(--font-memory); }
.term-horror { font-family: var(--font-horror); }
.term-motif { font-family: var(--font-motif); }
.term-product { font-family: var(--font-sans); letter-spacing: .04em; }
.term-threat { font-family: var(--font-command); }
.term-object { font-family: var(--font-classic); }
.term-clue,
.term-number { font-family: var(--font-clue); font-variant-numeric: tabular-nums; }
.term-sound { font-family: var(--font-sound); letter-spacing: .1em; }

.tone-1 { color: var(--tone-1); }
.tone-2 { color: var(--tone-2); }
.tone-3 { color: var(--tone-3); }
.tone-4 { color: var(--tone-4); }
.tone-5 { color: var(--tone-5); }

.fx-whisper {
  font-size: .94em;
  letter-spacing: .035em;
  opacity: .94;
}

.fx-key {
  font-size: 1.075em;
  font-weight: 700;
}

.fx-beat {
  font-size: clamp(1.08em, 2.5vw, 1.24em);
  line-height: 1.82;
}

.fx-shout {
  font-size: clamp(1.16em, 3.5vw, 1.52em);
  line-height: 1.7;
  font-weight: 850;
}

.fx-climax {
  margin-block: 1.45em !important;
  border-inline-start: .16em solid currentColor;
  padding-inline-start: clamp(.45rem, 2vw, 1.1rem);
  font-size: clamp(1.26em, 4.6vw, var(--climax-max));
  line-height: 1.62;
}

.fx-peak {
  margin-block: 2em !important;
  border-block: 1px solid currentColor;
  padding: .7em .25em;
  font-family: var(--font-motif);
  font-size: clamp(1.4em, 6vw, var(--peak-max));
  line-height: 1.48;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

.fx-silence {
  margin-block: 2.2em !important;
  font-size: .92em;
  letter-spacing: .08em;
  opacity: .82;
}

body[data-effects="standard"] .role-comic.fx-shout,
body[data-effects="restrained"] .role-comic.fx-shout {
  transform: rotate(-.32deg);
  transform-origin: left center;
}

body[data-effects="off"] {
  --font-dialogue: var(--font-body);
  --font-system: var(--font-body);
  --font-document: var(--font-body);
  --font-command: var(--font-body);
  --font-memory: var(--font-body);
  --font-comic: var(--font-body);
  --font-magic: var(--font-body);
  --font-ritual: var(--font-body);
  --font-name: var(--font-body);
  --font-sound: var(--font-body);
  --font-motif: var(--font-body);
  --font-sensory: var(--font-body);
  --font-horror: var(--font-body);
  --font-clue: var(--font-body);
}

/* Motion is opt-in through standard mode and loops only while in the viewport. */
.motion-character {
  display: inline-block;
  transform-origin: 50% 72%;
}

body[data-motion="on"] .motion-active.experience-anxiety {
  animation: experience-anxiety 1.8s ease-in-out both;
}

body[data-motion="on"] .motion-active.experience-fear {
  animation: experience-fear .72s steps(2, jump-none) 2 both;
}

body[data-motion="on"] .motion-active.experience-heartbeat {
  animation: experience-heartbeat 1.35s ease-in-out 2 both;
  transform-origin: left center;
}

body[data-motion="on"] .motion-active.experience-radiance .motion-character {
  animation: experience-radiance 1.8s ease-out both;
  animation-delay: calc(var(--motion-index) * 24ms);
}

body[data-motion="on"] .motion-active.experience-radiance[data-motion-prepared="fallback"] {
  animation: experience-radiance 1.8s ease-out both;
}

body[data-motion="on"] .motion-active.experience-power .motion-character {
  animation: experience-power .48s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(var(--motion-index) * 34ms);
}

body[data-motion="on"] .motion-active.experience-power[data-motion-prepared="fallback"] {
  animation: experience-power .72s cubic-bezier(.2, .8, .25, 1) both;
}

body[data-motion="on"] .motion-active.experience-relief {
  animation: experience-relief 1.6s ease-out both;
}

body[data-motion="on"] .motion-active.experience-grief {
  animation: experience-grief 1.8s ease-out both;
}

body[data-motion="on"] .motion-active.experience-disorientation {
  animation: experience-disorientation 1.35s ease-in-out both;
}

body[data-motion="on"] .motion-active.experience-silence {
  animation: experience-silence 1.8s ease-out both;
}

/* Three independent layers: role-* (semantics), emotion-* (felt state),
 * and arc-* (narrative function). In standard mode the motion-* selection
 * animates through emotion/arc rules; restrained keeps static extended
 * typography, and off is normalized below. */
body[data-effects="standard"] {
  transition: background-color 1.8s ease, color 1.2s ease;
}

body[data-effects="standard"] .prose-section,
body[data-effects="standard"] .chapter {
  transition: transform 1.4s ease, filter 1.4s ease;
}

body[data-effects="standard"] .prose-section.scene-active,
body[data-effects="standard"] .chapter.scene-active {
  transform: translateY(var(--scene-lift, 0));
  filter: saturate(var(--scene-saturation, 1));
}

body[data-motion="on"] .motion-active.arc-seed { animation: arc-seed 1.35s ease-out both; }
body[data-motion="on"] .motion-active.arc-buildup { animation: arc-buildup 1.45s ease-in-out both; }
body[data-motion="on"] .motion-active.arc-sustain { animation: arc-sustain 1.3s ease-in-out both; }
body[data-motion="on"] .motion-active.arc-rupture { animation: arc-rupture .72s cubic-bezier(.2,.8,.3,1) both; }
body[data-motion="on"] .motion-active.arc-climax { animation: arc-climax 1.15s cubic-bezier(.2,.8,.25,1) both; }
body[data-motion="on"] .motion-active.arc-release { animation: arc-release 1.8s ease-out both; }
body[data-motion="on"] .motion-active.arc-afterglow { animation: arc-afterglow 2.1s ease-out both; }

body[data-motion="on"] .motion-active.emotion-terror { animation: emotion-terror .86s steps(3, jump-none) 2 both; }
body[data-motion="on"] .motion-active.emotion-anxiety { animation: emotion-anxiety 1.7s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-excitement { animation: emotion-excitement 1.25s ease-out both; }
body[data-motion="on"] .motion-active.emotion-joy { animation: emotion-joy 1.65s ease-out both; }
body[data-motion="on"] .motion-active.emotion-warmth { animation: emotion-warmth 1.8s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-tenderness { animation: emotion-tenderness 2s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-relief { animation: emotion-relief 1.9s ease-out both; }
body[data-motion="on"] .motion-active.emotion-disgust { animation: emotion-disgust 1.4s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-anger { animation: emotion-anger .9s cubic-bezier(.2,.8,.25,1) both; }
body[data-motion="on"] .motion-active.emotion-grief { animation: emotion-grief 2s ease-out both; }
body[data-motion="on"] .motion-active.emotion-awe { animation: emotion-awe 2.2s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-wistfulness { animation: emotion-wistfulness 2.15s ease-out both; }
body[data-motion="on"] .motion-active.emotion-catharsis { animation: emotion-catharsis 2.25s ease-out both; }
body[data-motion="on"] .motion-active.emotion-confusion { animation: emotion-confusion 1.45s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-nostalgia { animation: emotion-nostalgia 2.3s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-compassion { animation: emotion-compassion 2s ease-in-out both; }
body[data-motion="on"] .motion-active.emotion-silence { animation: experience-silence 1.8s ease-out both; }

@keyframes arc-seed { from { opacity: .58; letter-spacing: .075em; transform: translateY(.08em); } to { opacity: 1; letter-spacing: inherit; transform: none; } }
@keyframes arc-buildup { 0% { opacity: .72; transform: translateX(-.11em) scaleX(.985); } 58% { opacity: 1; transform: translateX(.035em) scaleX(1.01); } 100% { transform: none; } }
@keyframes arc-sustain { 0%,100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.09); transform: scale(1.012); } }
@keyframes arc-rupture { 0% { transform: scaleX(.97) skewX(-1deg); } 38% { transform: translateX(-.09em) skewX(1.4deg); } 68% { transform: translateX(.075em) scaleX(1.018); } 100% { transform: none; } }
@keyframes arc-climax { 0% { transform: translateY(.08em) scale(.985); } 62% { transform: translateY(-.025em) scale(1.018); } 100% { transform: none; } }
@keyframes arc-release { from { letter-spacing: -.018em; opacity: .58; transform: scaleX(.975); } to { letter-spacing: inherit; opacity: 1; transform: none; } }
@keyframes arc-afterglow { from { filter: saturate(.45) blur(.018em); opacity: .55; transform: translateY(-.06em); } to { filter: none; opacity: 1; transform: none; } }
@keyframes emotion-terror { 0%,100% { transform:none; } 28% { transform:translate(-.07em,.02em); } 61% { transform:translate(.055em,-.025em); } }
@keyframes emotion-anxiety { 0%,100% { letter-spacing:inherit; transform:none; } 35% { letter-spacing:.045em; transform:translateX(-.08em); } 72% { transform:translateX(.065em); } }
@keyframes emotion-excitement { 0% { opacity:.55; transform:translateY(.14em) scale(.965); } 52% { opacity:1; transform:translateY(-.07em) scale(1.04); } 100% { transform:none; } }
@keyframes emotion-joy { 0% { opacity:.5; filter:brightness(.92); letter-spacing:inherit; transform:scale(.97); } 55% { opacity:1; filter:brightness(1.28); letter-spacing:.065em; transform:scale(1.025); } 100% { filter:none; letter-spacing:inherit; transform:none; } }
@keyframes emotion-warmth { 0% { opacity:.55; transform:translateY(.12em); letter-spacing:.035em; } 55% { opacity:1; transform:translateY(-.025em); color:var(--tone-1); } 100% { transform:none; letter-spacing:inherit; } }
@keyframes emotion-tenderness { 0% { opacity:.58; transform:scale(.965); } 42% { opacity:1; transform:scale(1.025); } 64% { transform:scale(1.008); } 100% { transform:none; } }
@keyframes emotion-relief { from { transform:scaleX(.985); opacity:.76; letter-spacing:-.008em; } to { transform:none; opacity:1; letter-spacing:inherit; } }
@keyframes emotion-disgust { 0% { opacity:.6; transform:skewX(-1.6deg) translateX(-.1em); } 58% { opacity:1; transform:skewX(1deg) translateX(.055em); } 100% { transform:none; } }
@keyframes emotion-anger { 0% { transform:scaleX(.96); letter-spacing:-.018em; } 58% { transform:scaleX(1.025); font-weight:850; } 100% { transform:none; letter-spacing:inherit; } }
@keyframes emotion-grief { from { opacity:.55; transform:translateY(-.12em); filter:saturate(1); } to { opacity:1; transform:translateY(.08em); filter:saturate(.58); } }
@keyframes emotion-awe { 0%,100% { letter-spacing:inherit; filter:brightness(1); } 50% { letter-spacing:.065em; filter:brightness(1.16); } }
@keyframes emotion-wistfulness { from { filter:saturate(.45); opacity:.5; transform:translateX(-.12em); } to { filter:none; opacity:1; transform:none; } }
@keyframes emotion-catharsis { 0% { transform:scaleX(.965); opacity:.7; } 48% { transform:scaleX(1.02); opacity:1; } 100% { transform:none; } }
@keyframes emotion-confusion { 0%,100% { transform:none; } 32% { transform:skewX(-1.8deg) translateX(-.1em); } 69% { transform:skewX(1.2deg) translateX(.075em); } }
@keyframes emotion-nostalgia { 0% { opacity:.52; filter:sepia(.48) saturate(.65); transform:scale(.975); } 55% { opacity:1; filter:sepia(.18) saturate(.88); color:var(--tone-3); transform:scale(1.012); } 100% { filter:none; transform:none; } }
@keyframes emotion-compassion { 0% { opacity:.52; transform:translateX(-.12em) scaleX(.97); } 55% { opacity:1; transform:translateX(.025em) scaleX(1.008); letter-spacing:.018em; } 100% { transform:none; letter-spacing:inherit; } }
@keyframes experience-anxiety {
  0%, 100% { transform: translateX(0); letter-spacing: inherit; }
  24% { transform: translateX(-.045em); letter-spacing: .025em; }
  52% { transform: translateX(.035em); letter-spacing: .008em; }
  76% { transform: translateX(-.02em); letter-spacing: .02em; }
}

@keyframes experience-fear {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-.075em, .025em); }
  40% { transform: translate(.065em, -.035em); }
  60% { transform: translate(-.04em, -.015em); }
  80% { transform: translate(.055em, .025em); }
}

@keyframes experience-heartbeat {
  0%, 18%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.055); }
  28% { transform: scale(1.025); }
}

@keyframes experience-radiance {
  0% { color: inherit; filter: brightness(1); transform: translateY(0); }
  35% { color: #b5548a; filter: brightness(1.25); transform: translateY(-.04em); }
  62% { color: #287e91; filter: brightness(1.18); }
  82% { color: #a06b18; }
  100% { color: inherit; filter: brightness(1); transform: translateY(0); }
}

@keyframes experience-power {
  0% { transform: translateY(.18em) scale(.94); filter: blur(.035em); font-weight: 500; }
  58% { transform: translateY(-.035em) scale(1.08); filter: blur(0); font-weight: 900; }
  100% { transform: translateY(0) scale(1); filter: blur(0); font-weight: 850; }
}

@keyframes experience-relief {
  0% { transform: scale(1.025); opacity: .82; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes experience-grief {
  0% { transform: translateY(-.06em); filter: saturate(1); }
  100% { transform: translateY(.06em); filter: saturate(.62); }
}

@keyframes experience-disorientation {
  0%, 100% { transform: skewX(0) translateX(0); }
  30% { transform: skewX(-1.1deg) translateX(-.035em); }
  67% { transform: skewX(.8deg) translateX(.03em); }
}

@keyframes experience-silence {
  0% { opacity: .68; letter-spacing: .05em; }
  100% { opacity: 1; letter-spacing: .08em; }
}

/* Perceptual motion vocabulary. Each timeline contains its own long still
 * interval and loops in CSS while visible; JavaScript only controls viewport
 * activation. Later rules deliberately supersede the legacy one-shot rules. */
body[data-motion="on"] .motion-active.motion-effect-fear { animation: motion-fear-cycle 3s steps(2, jump-none) var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-anxiety { animation: motion-anxiety-cycle 3s ease-in-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-heartbeat { animation: motion-heartbeat-cycle 1.35s ease-in-out var(--motion-phase, 0s) infinite both; transform-origin:left center; }
body[data-motion="on"] .motion-active.motion-effect-relief { animation: motion-relief-cycle 2.8s ease-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-recoil { animation: motion-recoil-cycle 2.6s cubic-bezier(.2,.8,.3,1) var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-disorientation { animation: motion-disorientation-cycle 2.6s ease-in-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-silence { animation: motion-silence-cycle 2.8s ease-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-tenderness { animation: motion-tenderness-cycle 3s ease-in-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-awe { animation: motion-awe-cycle 2.8s ease-in-out var(--motion-phase, 0s) infinite both; transform-origin:center; }
body[data-motion="on"] .motion-active.motion-effect-afterimage { animation: motion-afterimage-cycle 2.9s ease-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-emergence { animation: motion-emergence-cycle 2.8s ease-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-wave { animation: motion-wave-cycle 2.7s ease-in-out var(--motion-phase, 0s) infinite both; }
body[data-motion="on"] .motion-active.motion-effect-breath { animation: motion-breath-cycle 3.2s ease-in-out var(--motion-phase, 0s) infinite both; }

body[data-motion="on"] .motion-active.motion-effect-radiance .motion-character {
  animation: motion-radiance-cycle 2.7s ease-out infinite both;
  animation-delay: calc(var(--motion-phase, 0s) + var(--motion-index) * 22ms);
}
body[data-motion="on"] .motion-active.motion-effect-power .motion-character {
  animation: motion-power-cycle 2.6s cubic-bezier(.2,.8,.25,1) infinite both;
  animation-delay: calc(var(--motion-phase, 0s) + var(--motion-index) * 28ms);
}
body[data-motion="on"] .motion-active.motion-effect-grief .motion-character {
  animation: motion-grief-cycle 2.8s ease-out infinite both;
  animation-delay: calc(var(--motion-phase, 0s) + var(--motion-index) * 18ms);
}
body[data-motion="on"] .motion-active.motion-effect-memory .motion-character {
  animation: motion-memory-cycle 2.9s ease-in-out infinite both;
  animation-delay: calc(var(--motion-phase, 0s) + var(--motion-index) * 16ms);
}
body[data-motion="on"] .motion-active.motion-effect-catharsis .motion-character {
  animation: motion-catharsis-cycle 2.8s cubic-bezier(.2,.8,.25,1) infinite both;
  animation-delay: calc(var(--motion-phase, 0s) + var(--motion-index) * 13ms);
}
body[data-motion="on"] .motion-active.motion-effect-fear .motion-character {
  animation: motion-glyph-fear-cycle 3s steps(2, jump-none) infinite both;
  animation-delay: calc(var(--motion-phase, 0s) + var(--motion-index) * 9ms);
}

@keyframes motion-fear-cycle { 0%,34%,100%{transform:none} 6%{transform:translate(-.09em,.03em)} 12%{transform:translate(.08em,-.04em)} 20%{transform:translate(-.055em,-.02em)} 28%{transform:translate(.065em,.03em)} }
@keyframes motion-glyph-fear-cycle { 0%,34%,100%{transform:none;filter:none} 9%{transform:translateY(-.08em) rotate(-1.4deg);filter:blur(.02em)} 21%{transform:translateY(.055em) rotate(1deg)} }
@keyframes motion-anxiety-cycle { 0%,40%,100%{transform:none;letter-spacing:inherit} 8%{transform:translateX(-.1em);letter-spacing:.045em} 18%{transform:translateX(.075em);letter-spacing:.012em} 30%{transform:translateX(-.04em);letter-spacing:.035em} }
@keyframes motion-heartbeat-cycle { 0%,18%,40%,100%{transform:scale(1)} 10%{transform:scale(1.055)} 28%{transform:scale(1.028)} }
@keyframes motion-radiance-cycle { 0%,28%,100%{color:inherit;filter:none;transform:none} 6%{color:#b5548a;filter:brightness(1.35);transform:translateY(-.07em) scale(1.04)} 13%{color:#287e91;filter:brightness(1.2);transform:translateY(-.025em)} 20%{color:#a06b18} }
@keyframes motion-power-cycle { 0%,24%,100%{transform:none;filter:none;font-weight:inherit} 4%{transform:translateY(.2em) scale(.92);filter:blur(.04em);font-weight:500} 11%{transform:translateY(-.06em) scale(1.11);filter:none;font-weight:900} 18%{transform:scale(1.025);font-weight:850} }
@keyframes motion-relief-cycle { 0%,30%,100%{transform:none;opacity:1;letter-spacing:inherit} 3%{transform:scaleX(.965);opacity:.68;letter-spacing:-.018em} 14%{transform:scaleX(1.012);opacity:1;letter-spacing:.028em} }
@keyframes motion-recoil-cycle { 0%,23%,100%{transform:none;filter:none} 4%{transform:skewX(-2.4deg) translateX(-.14em);filter:saturate(.45)} 10%{transform:skewX(1.5deg) translateX(.08em)} 17%{transform:translateX(-.025em)} }
@keyframes motion-grief-cycle { 0%,30%,100%{transform:none;filter:none;opacity:1} 5%{transform:translateY(-.1em);filter:saturate(.9);opacity:.7} 18%{transform:translateY(.1em);filter:saturate(.48);opacity:.9} }
@keyframes motion-disorientation-cycle { 0%,25%,100%{transform:none} 4%{transform:skewX(-2deg) translateX(-.1em)} 9%{transform:skewX(1.3deg) translateX(.07em) translateY(-.025em)} 16%{transform:skewX(-.6deg) translateY(.035em)} }
@keyframes motion-silence-cycle { 0%,32%,100%{opacity:1;letter-spacing:inherit;filter:none} 5%{opacity:.38;letter-spacing:.09em;filter:blur(.018em)} 20%{opacity:.82;letter-spacing:.065em} }
@keyframes motion-tenderness-cycle { 0%,100%{transform:scale(1);opacity:1} 22%{transform:scale(.982);opacity:.72} 52%{transform:scale(1.022);opacity:1} 76%{transform:scale(1.006)} }
@keyframes motion-awe-cycle { 0%,32%,100%{transform:none;letter-spacing:inherit;filter:none} 6%{transform:scale(.97);letter-spacing:.01em;filter:brightness(.9)} 19%{transform:scale(1.035);letter-spacing:.085em;filter:brightness(1.2)} }
@keyframes motion-afterimage-cycle { 0%,34%,100%{transform:none;opacity:1;filter:none;text-shadow:none} 5%{transform:translateX(-.13em);opacity:.45;filter:saturate(.45);text-shadow:.12em 0 .08em color-mix(in srgb,currentColor 24%,transparent)} 20%{transform:none;opacity:.9;filter:saturate(.8)} }
@keyframes motion-memory-cycle { 0%,34%,100%{transform:none;opacity:1;filter:none;color:inherit} 6%{transform:translateY(.08em);opacity:.42;filter:sepia(.55) saturate(.6)} 18%{transform:translateY(-.025em);opacity:.92;filter:sepia(.2);color:var(--tone-3)} }
@keyframes motion-catharsis-cycle { 0%,32%,100%{transform:none;opacity:1;filter:none} 4%{transform:translateY(.16em) scale(.88);opacity:.35;filter:blur(.04em)} 14%{transform:translateY(-.08em) scale(1.1);opacity:1;filter:brightness(1.25)} 24%{transform:none;filter:none} }
@keyframes motion-emergence-cycle { 0%,30%,100%{transform:none;opacity:1;letter-spacing:inherit} 5%{transform:translateY(.1em);opacity:.5;letter-spacing:.075em} 18%{transform:none;opacity:1;letter-spacing:inherit} }
@keyframes motion-wave-cycle { 0%,27%,100%{transform:none;filter:none} 5%{transform:translateX(-.12em) scaleX(.98);filter:brightness(.94)} 13%{transform:translateX(.055em) scaleX(1.012);filter:brightness(1.08)} 21%{transform:translateX(-.015em)} }
@keyframes motion-breath-cycle { 0%,100%{transform:scale(1);filter:none} 50%{transform:scale(1.014);filter:brightness(1.075)} }

body[data-effects="off"] .source-line,
body[data-effects="off"] .source-line * {
  border: 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  background: transparent !important;
  font-size: 1em !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: .016em !important;
  text-align: start !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body[data-effects="off"] .source-line {
  margin-bottom: 0 !important;
}

body[data-effects="off"] .gap-0 { margin-top: .12em !important; }
body[data-effects="off"] .gap-1 { margin-top: 1.15em !important; }
body[data-effects="off"] .gap-2 { margin-top: 2.45em !important; }
body[data-effects="off"] .gap-3 { margin-top: 4em !important; }

body[data-effects="off"] .title-line {
  font-size: clamp(1.7rem, 5vw, 3rem) !important;
  text-align: center !important;
}

body[data-effects="off"] .chapter-heading {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: .8rem !important;
  font-size: 1.45rem !important;
  text-align: center !important;
}

body[data-effects="off"] .scene-break,
body[data-effects="off"] .end-mark {
  text-align: center !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@supports not (color: color-mix(in srgb, black, white)) {
  .role-document {
    background: transparent;
  }

}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 4.2rem;
  }

  .reader-toolbar {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: .45rem;
    scrollbar-width: thin;
  }

  .reader-toolbar label,
  .reader-toolbar button,
  .reader-toolbar a,
  .size-group {
    flex: 0 0 auto;
  }

  .toolbar-title {
    display: none;
  }

  .panel {
    top: 4rem;
  }

  .reader-shell {
    padding-inline: .82rem;
  }

  .fx-climax {
    padding-inline-start: .45rem;
  }
}

@media (max-width: 390px) {
  :root {
    --base-size: 17px;
  }

  .reader-toolbar select {
    max-width: 10.5rem;
  }

  .title-line {
    font-size: clamp(1.65rem, 9vw, 2.7rem);
  }

  .fx-peak {
    font-size: min(var(--peak-max), 1.68em);
  }

  .legend-item {
    grid-template-columns: 5rem 1fr;
  }
}

@media (forced-colors: active) {
  .reader-toolbar,
  .panel,
  .role-document,
  .fx-climax,
  .fx-peak {
    border-color: CanvasText;
  }

  .progress-bar {
    background: Highlight;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  .reader-toolbar,
  .panel,
  .progress-track,
  .reader-footer {
    display: none !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
    font-size: 11pt;
  }

  .reader-shell {
    padding: 0;
  }

  .novel {
    width: auto;
    max-width: none;
  }

  .source-line,
  .source-line * {
    color: #000 !important;
    background: transparent !important;
    text-shadow: none !important;
  }

  .chapter {
    break-before: page;
  }

  .fx-peak,
  .fx-climax {
    border-color: #777 !important;
  }
}