/* ============================================================
   HistoriQ — 夜の航海図 v2
   dark-first。:root = 夜（既定）、light = 羊皮紙
   ============================================================ */
:root {
  --ocean: #10283a; --ocean-deep: #07141c; --land: #2b4340; --land-edge: #6f8d7c;
  --grid: rgba(190, 205, 225, 0.07);
  --ink: #ece5d3; --ink-2: #bdb5a4; --ink-3: #847e72;
  --gold: #e8c170; --gold-2: #bd9138; --gold-deep: #8a6420; --silver: #cfd6e0;
  --surface: rgba(10, 24, 30, 0.8); --surface-2: rgba(14, 30, 36, 0.95); --surface-solid: #0f1e24;
  --line: rgba(236, 229, 211, 0.13); --line-strong: rgba(236, 229, 211, 0.3);
  --focus: #ffd98a; --danger: #e0574a;
  --shadow: 0 18px 50px rgba(0,0,0,0.5); --chip-halo: rgba(0,0,0,0.55);
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --codex-w: 400px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ocean: #e6dcc6; --ocean-deep: #d8cdb4; --land: #c7ba9a; --land-edge: #8b7d5c; --grid: rgba(60, 45, 20, 0.10);
    --ink: #2b2419; --ink-2: #5a4f3c; --ink-3: #8b8172; --gold: #9a6d12; --gold-2: #a3741a; --gold-deep: #6a4a0c; --silver: #4f5b6b;
    --surface: rgba(246, 240, 226, 0.86); --surface-2: rgba(240, 232, 214, 0.96); --surface-solid: #f3ecdb;
    --line: rgba(43, 36, 25, 0.16); --line-strong: rgba(43, 36, 25, 0.36); --focus: #7a5200; --shadow: 0 18px 50px rgba(60, 40, 10, 0.18); --chip-halo: rgba(246,240,226,0.8); color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ocean: #e6dcc6; --ocean-deep: #d8cdb4; --land: #c7ba9a; --land-edge: #8b7d5c; --grid: rgba(60, 45, 20, 0.10);
  --ink: #2b2419; --ink-2: #5a4f3c; --ink-3: #8b8172; --gold: #9a6d12; --gold-2: #a3741a; --gold-deep: #6a4a0c; --silver: #4f5b6b;
  --surface: rgba(246, 240, 226, 0.86); --surface-2: rgba(240, 232, 214, 0.96); --surface-solid: #f3ecdb;
  --line: rgba(43, 36, 25, 0.16); --line-strong: rgba(43, 36, 25, 0.36); --focus: #7a5200; --shadow: 0 18px 50px rgba(60, 40, 10, 0.18); --chip-halo: rgba(246,240,226,0.8); color-scheme: light;
}
:root[data-theme="dark"] {
  --ocean: #10283a; --ocean-deep: #07141c; --land: #2b4340; --land-edge: #6f8d7c; --grid: rgba(190, 205, 225, 0.07);
  --ink: #ece5d3; --ink-2: #bdb5a4; --ink-3: #847e72; --gold: #e8c170; --gold-2: #bd9138; --gold-deep: #8a6420; --silver: #cfd6e0;
  --surface: rgba(10, 24, 30, 0.8); --surface-2: rgba(14, 30, 36, 0.95); --surface-solid: #0f1e24;
  --line: rgba(236, 229, 211, 0.13); --line-strong: rgba(236, 229, 211, 0.3); --focus: #ffd98a; --shadow: 0 18px 50px rgba(0,0,0,0.5); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--ocean-deep); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.6; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--gold); }

/* --- 舞台 ---------------------------------------------------- */
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; }
#globe-canvas, #globe-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#globe-svg { overflow: visible; }
#globe-svg .route { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; filter: url(#glow); }
#globe-svg .route-head { stroke: none; filter: url(#glow); }
#globe-svg .city { cursor: pointer; }
#globe-svg .city .halo { fill: var(--gold); opacity: 0.16; }
#globe-svg .city .core { fill: var(--ink); stroke: var(--ocean-deep); stroke-width: 1; }
#globe-svg .city text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
#globe-svg .city.t1 text { font-size: 12px; fill: var(--ink); }
#globe-svg .city:hover .core, #globe-svg .city.selected .core { fill: var(--gold); }
#globe-svg .city:hover .halo { opacity: 0.4; }
#globe-svg .polity-label { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; fill: var(--ink-2); opacity: 0.8; paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; pointer-events: none; text-anchor: middle; }
#globe-svg .mark text { font-family: var(--font-body); font-size: 11.5px; fill: var(--gold); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; }
#globe-svg .mark .ring { fill: none; stroke: var(--gold); stroke-width: 1.5; }
#globe-svg .mark.battle .ring { stroke: var(--danger); } #globe-svg .mark.battle text { fill: var(--danger); }
#globe-svg .mark .pulse { fill: none; stroke: var(--gold); stroke-width: 1; animation: pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
#globe-svg .mark.battle .pulse { stroke: var(--danger); }
@keyframes pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
#globe-svg .range { fill: rgba(232, 193, 112, 0.08); stroke: var(--gold); stroke-dasharray: 4 4; stroke-width: 1; }
#globe-svg .range-label { font-family: var(--font-mono); font-size: 11px; fill: var(--gold); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; }
#globe-svg .arrow { fill: none; stroke: var(--silver); stroke-width: 1.8; marker-end: url(#arrowhead); }
#globe-svg .arrow-label { font-family: var(--font-body); font-size: 11px; fill: var(--silver); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; text-anchor: middle; }
#globe-svg .wind { fill: none; stroke: rgba(160, 200, 240, 0.55); stroke-width: 1.4; stroke-dasharray: 6 5; marker-end: url(#windhead); animation: windflow 1.6s linear infinite; }
#globe-svg .wind.monsoon { stroke: rgba(120, 220, 190, 0.6); }
#globe-svg .wind-label { font-family: var(--font-body); font-size: 10.5px; fill: rgba(160, 200, 240, 0.9); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; }
@keyframes windflow { to { stroke-dashoffset: -22; } }
#globe-svg .tline { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 8 6; opacity: 0.8; }
#globe-svg .tline-label { font-family: var(--font-mono); font-size: 11px; fill: var(--gold); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; }
#globe-svg .highlight-outline { fill: none; stroke-width: 2.2; animation: hl 1.8s ease-in-out infinite alternate; }
@keyframes hl { from { opacity: 0.35; } to { opacity: 1; } }
#globe-svg .lens-m { cursor: pointer; }
#globe-svg .lens-m circle { stroke-width: 1.2; fill-opacity: 0.18; }
#globe-svg .lens-m .g { font-size: 10px; text-anchor: middle; pointer-events: none; }
#globe-svg .lens-m text.l { font-family: var(--font-body); font-size: 10.5px; paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; pointer-events: none; }
#globe-svg .lens-m.new circle { animation: hl 1.4s ease-in-out infinite alternate; }
#globe-svg .lens-f { fill: none; stroke-width: 1.4; stroke-dasharray: 5 4; animation: windflow 2.2s linear infinite; opacity: 0.8; }
#globe-svg .lens-f-label { font-family: var(--font-body); font-size: 10.5px; paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { #globe-svg .mark .pulse, #globe-svg .wind, #globe-svg .highlight-outline, #globe-svg .lens-f, #globe-svg .lens-m.new circle { animation: none; } }

/* --- 上部バー（HUD・肖像メダル） -------------------------------- */
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: var(--surface-2); border-bottom: 1px solid rgba(232,193,112,0.22); z-index: 6; backdrop-filter: blur(10px); transition: height 300ms ease; }
.brand { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.brand h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: 0.22em; color: var(--gold); }
.brand small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--ink-3); }
#hud { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
#hud .hud-year { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 14px 0 4px; border-right: 1px solid var(--line-strong); margin-right: 6px; }
#hud .hud-year span { font-family: var(--font-mono); font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(232,193,112,0.25); }
#hud .hud-year small { font-family: var(--font-display); font-size: 11px; color: var(--gold); letter-spacing: 0.08em; margin-top: 2px; white-space: nowrap; }
#hud .hud-stat { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; }
#hud .hud-stat .ic { width: 22px; height: 22px; color: #c2a779; display: inline-flex; }
#hud .hud-stat .ic svg { width: 22px; height: 22px; }
#hud .hud-stat .t { display: flex; flex-direction: column; line-height: 1.15; }
#hud .hud-stat b { font-family: var(--font-mono); font-weight: 500; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
#hud .hud-stat small { font-size: 9px; letter-spacing: 0.12em; color: var(--ink-3); }
#hud .hud-stat.btn:hover, #hud .hud-stat.btn.active { border-color: var(--line-strong); background: var(--surface); }
#hud .hud-stat.bump b { animation: bump 0.5s ease-out; color: var(--gold); }
@keyframes bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#cast { display: flex; gap: 6px; align-items: center; }
#cast .medal { position: relative; width: 42px; height: 48px; padding: 0; border: 1px solid #9a8155; border-radius: 45% 45% 40% 40%; background: var(--surface); overflow: hidden; transition: transform 0.25s, border-color 0.25s; }
#cast .medal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(0.7); display: block; }
#cast .medal .init { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-display); color: var(--ink-2); }
#cast .medal.selected, #cast .medal:hover { border-color: #ffe0a0; box-shadow: 0 0 16px rgba(208,180,119,0.35); transform: translateY(-2px); }
#cast .medal.dead { opacity: 0.5; filter: grayscale(0.8); }
.topbtns { display: flex; gap: 6px; }
.iconbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-2); font-size: 12px; }
.iconbtn:hover { color: var(--gold); border-color: var(--line-strong); }

/* --- 切り口タブ ---------------------------------------------- */
#modebar { position: absolute; top: 68px; left: 0; right: 0; height: 46px; display: flex; align-items: stretch; justify-content: center; gap: 14px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid rgba(232,193,112,0.14); z-index: 5; backdrop-filter: blur(8px); }
#lenses { display: flex; gap: 4px; }
#lenses button { display: flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font-size: 12px; }
#lenses button .ic svg { width: 20px; height: 20px; }
#lenses button:hover { color: var(--ink); }
#lenses button.on { color: #efd49f; border-bottom-color: var(--lc, var(--gold)); background: linear-gradient(0deg, rgba(232,193,112,0.12), transparent); }
#layers { display: flex; gap: 4px; align-items: center; margin-left: auto; }
#extras { display: flex; gap: 4px; align-items: center; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
#extras .chip { color: var(--gold); border-color: rgba(232,193,112,0.35); }
.chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 11.5px; }
.chip.on { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.chip:hover { border-color: var(--line-strong); }

/* --- 左：物語カード・指標・章 ------------------------------------ */
#left { position: absolute; left: 16px; top: 128px; bottom: 236px; width: 236px; display: flex; flex-direction: column; gap: 12px; overflow: auto; z-index: 5; scrollbar-width: thin; }
.panel { position: relative; background: var(--surface-2); border: 1px solid rgba(197,171,112,0.24); border-radius: 3px; backdrop-filter: blur(8px); }
.panel:before { content: ""; position: absolute; width: 18px; height: 18px; left: -1px; top: -1px; border-left: 2px solid #ba9f69; border-top: 2px solid #ba9f69; pointer-events: none; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid rgba(197,171,112,0.2); color: var(--gold); font-size: 10px; letter-spacing: 0.12em; }
.panel-head .ic svg { width: 18px; height: 18px; }
.panel-body { padding: 12px 14px; }
.kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--gold); }
.scene-title { margin: 6px 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.5; letter-spacing: 0.03em; color: var(--ink); text-wrap: balance; }
.scene-lede { margin: 0; font-family: var(--font-display); font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }
.issue { padding: 10px 14px 12px; border-top: 1px solid rgba(197,171,112,0.2); font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.issue:hover { color: var(--ink); }
.issue b { display: block; color: var(--gold); font-size: 9px; font-weight: 400; letter-spacing: 0.14em; margin-bottom: 3px; }
#metric-body { padding: 10px 12px 10px; }
.metric-name { font-size: 10.5px; color: #aab9af; line-height: 1.5; }
.metric-value { font-family: var(--font-mono); font-size: 26px; color: var(--ink); margin: 4px 0 2px; }
.metric-value small { font-family: var(--font-body); font-size: 10px; color: var(--ink-3); margin-left: 5px; }
.metric-chart { width: 100%; height: 76px; display: block; }
.metric-chart text { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-3); }
.metric-note { font-size: 9.5px; color: #8da097; margin-top: 4px; }
#chapters { display: flex; flex-direction: column; gap: 1px; padding: 6px; }
#chapters button { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: baseline; padding: 4px 8px; border: 0; background: transparent; color: var(--ink-3); text-align: left; font-size: 12px; border-radius: 4px; }
#chapters button .y { font-family: var(--font-mono); font-size: 10.5px; }
#chapters button:hover { background: var(--surface); color: var(--ink-2); }
#chapters button.current { color: var(--ink); background: rgba(232,193,112,0.1); }
#chapters button.current .y { color: var(--gold); }
#chapters button.done { color: var(--ink-2); }
#trail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#trail .crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--ink-2); }
#trail .crumb.current { color: var(--ink); border-color: var(--gold); }
#trail .crumb:hover:not(.current) { border-color: var(--line-strong); color: var(--ink); }
#trail .sep { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }
#trail .crumb .depth { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }

/* --- 舞台の道具 ------------------------------------------------ */
#focus-label { position: absolute; top: 128px; left: 268px; z-index: 4; pointer-events: none; max-width: 50%; text-shadow: 0 2px 10px #000; transition: left 0.3s; }
#focus-label small { color: var(--gold); font-size: 9px; letter-spacing: 0.2em; display: block; }
#focus-label strong { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--ink); }
#map-tools { position: absolute; top: 128px; right: 16px; display: flex; gap: 4px; z-index: 4; transition: right 0.38s; }
#codex.open ~ #stage #map-tools, #codex.open ~ #map-tools { right: calc(var(--codex-w) + 16px); }
#map-tools button { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); width: 34px; height: 30px; border-radius: 3px; font-size: 13px; }
#map-tools button[data-proj] { width: auto; padding: 0 9px; font-size: 10.5px; }
#map-tools button.on { color: var(--gold); border-color: var(--gold); }
#map-tools button:hover { color: var(--gold); }
#legend { position: absolute; left: 268px; bottom: 236px; z-index: 4; pointer-events: none; font-size: 10px; color: #a5b6ad; max-width: 40%; }
#legend strong { color: var(--gold); font-size: 10.5px; display: block; letter-spacing: 0.12em; }
#compass { position: absolute; right: 22px; bottom: 240px; width: 40px; opacity: 0.55; pointer-events: none; color: var(--gold); text-align: center; font-family: var(--font-display); font-size: 10px; z-index: 3; }
#compass:after { content: ""; display: block; margin: 3px auto; width: 18px; height: 28px; background: linear-gradient(90deg, #cdb78a 50%, #637972 50%); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
#globe-svg .bubble circle { fill-opacity: 0.28; stroke: rgba(230,204,137,0.6); stroke-width: 0.8; }
#globe-svg .bubble .bl { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; }
#globe-svg .micon { cursor: pointer; }
#globe-svg .micon .diamond { fill: var(--surface-solid); stroke-width: 1; }
#globe-svg .micon .il { font-family: var(--font-body); font-size: 10.5px; fill: #e9dcb5; paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; }
#globe-svg .telop .big { font-family: var(--font-display); font-size: 26px; fill: var(--ink); paint-order: stroke; stroke: rgba(0,0,0,0.75); stroke-width: 6px; letter-spacing: 0.06em; animation: telopin 0.6s ease-out; }
#globe-svg .telop .sub { font-family: var(--font-mono); font-size: 11px; fill: var(--gold); paint-order: stroke; stroke: rgba(0,0,0,0.75); stroke-width: 4px; }
@keyframes telopin { from { opacity: 0; transform: translateY(8px); } }
.ic-svg { display: inline-block; vertical-align: middle; }

/* --- 語りモード：上部を畳む（docs/stage-focus.md 6） -------------
   消さずに畳む。body.telling が外れれば #topbar の height も #modebar の
   display も既定値に戻り、探索モードの見た目は元のまま（このブロックの
   有無に関係なく既定側は無変化）。 */
body.telling #topbar { height: 40px; }
body.telling #hud .hud-stat { display: none; }   /* 航路・新港・銀・発見・連続・日誌。年と era（hud-year）は対象外 */
body.telling #modebar { display: none; }          /* 切り口の帯。折りたたむと操作できる帯が残ってしまうので隠す */
#map-tools { transition: opacity 300ms ease; }
body.telling #map-tools { opacity: 0; pointer-events: none; }

/* --- 右：図鑑（Codex） ---------------------------------------- */
#codex { position: absolute; right: 0; top: 114px; bottom: 228px; width: var(--codex-w); max-width: calc(100vw - 36px); background: var(--surface-2); border-left: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(14px); transform: translateX(100%); transition: transform 0.38s cubic-bezier(.2,.8,.2,1); z-index: 7; display: flex; flex-direction: column; }
#codex.open { transform: none; }
.cx-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cx-kind { flex: 1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-btn { border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 13px; padding: 4px 9px; border-radius: 6px; }
.cx-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.cx-btn:disabled { opacity: 0.3; cursor: default; }
.cx-body { flex: 1; overflow: auto; padding: 16px 18px 24px; }
.cx-body h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.4; text-wrap: balance; }
.cx-body .src { font-size: 11.5px; color: var(--ink-3); margin-bottom: 10px; }
.cx-body blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 14.5px; line-height: 1.9; color: var(--ink); background: rgba(232,193,112,0.05); }
.cx-body .note { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.cx-body .note b { color: var(--ink); font-weight: 500; }
.cx-body .body { font-size: 13.5px; line-height: 1.85; color: var(--ink); }
.cx-body .gen-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; border: 1px solid var(--line-strong); color: var(--ink-3); margin-left: 6px; vertical-align: middle; }
.cx-body .related { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cx-body .related span, .cx-body .tags span { padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.cx-body .related span, .cx-body .tags span[data-city], .cx-body .tags span[data-person], .cx-body .tags span[data-topic] { cursor: pointer; }
.cx-body .related span:hover, .cx-body .tags span[data-city]:hover, .cx-body .tags span[data-person]:hover, .cx-body .tags span[data-topic]:hover { border-color: var(--gold); color: var(--gold); }
.cx-body .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-body .lens-tag { color: var(--lc); border-color: var(--lc); }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; }
.stat .k { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.stat .v { font-family: var(--font-mono); font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 11px; color: var(--ink-3); margin-left: 3px; }
.stat .v.small { font-family: var(--font-body); font-size: 12.5px; text-align: right; max-width: 190px; }
.spark { width: 100%; height: 48px; display: block; }
.spark path { fill: none; stroke: var(--gold); stroke-width: 1.6; } .spark .area { fill: rgba(232,193,112,0.12); stroke: none; } .spark .now { fill: var(--gold); }
.spark text { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }
.events { display: grid; gap: 3px; font-size: 12px; }
.events div { display: grid; grid-template-columns: 38px 1fr; gap: 8px; color: var(--ink-2); }
.events div.past { color: var(--ink); } .events div.future { opacity: 0.45; }
.events .y { font-family: var(--font-mono); font-size: 11px; color: var(--gold); }
.cc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cc-actions button { flex: 1; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink); font-size: 12px; }
.cc-actions button:hover { border-color: var(--gold); color: var(--gold); }
.card-stack { display: grid; gap: 12px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.ps-top { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
.portrait { width: 104px; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); display: block; }
.portrait.empty { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 34px; color: var(--ink-3); }
.ps-meta { display: grid; gap: 6px; }
.ps-meta .tagline { font-family: var(--font-display); font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.credit { font-size: 10px; color: var(--ink-3); } .credit a { color: var(--ink-3); }
.ev-figure { margin: 0 0 12px; } .ev-figure img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); display: block; }
.ev-figure figcaption { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
/* 索引 */
.cx-index .cx-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); margin-bottom: 10px; }
.cx-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.cx-tabs button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 12px; }
.cx-tabs button.on { color: var(--ink); border-color: var(--gold); }
.cx-tabs button b { font-family: var(--font-mono); font-weight: 400; margin-left: 4px; color: var(--ink-3); }
.cx-list { display: grid; gap: 4px; }
.cx-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.cx-item:hover { border-color: var(--gold); }
.cx-item .ic { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--surface); font-size: 14px; color: var(--ink-2); }
.cx-item .sub { font-size: 11px; color: var(--ink-3); display: block; }
.cx-item .st { font-family: var(--font-mono); font-size: 10px; color: var(--gold); }
.cx-item.undiscovered { color: var(--ink-3); } .cx-item.undiscovered .ic { filter: grayscale(1) brightness(0.6); } .cx-item.undiscovered .st { color: var(--ink-3); }
.cx-progress { height: 4px; background: var(--line); border-radius: 2px; margin: 4px 0 14px; overflow: hidden; }
.cx-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.cx-summary { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.log-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); } .log-list li::marker { color: var(--gold); }
.empty { color: var(--ink-3); font-size: 12.5px; }

/* --- 図・グラフ・戦術図 --- */
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.chart .axis line, .chart .axis path { stroke: var(--line); }
.chart .gridline { stroke: var(--line); stroke-dasharray: 2 3; }
.chart .series-1 { stroke: var(--gold-2); } .chart .series-2 { stroke: #25a898; }
.chart .bar { fill: var(--gold-2); } .chart .bar.hl { fill: var(--gold); }
.chart .dot { fill: var(--surface-solid); stroke-width: 2; }
.chart .dlabel { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-2); }
.chart .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); margin: 6px 0 2px; }
.chart .legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; }
.chart .tip { position: absolute; padding: 4px 8px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; pointer-events: none; white-space: nowrap; }
.chart-wrap { position: relative; }
.scene svg { width: 100%; height: auto; display: block; }
.scene text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); }
.scene .t { fill: var(--ink); } .scene .m { font-family: var(--font-mono); } .scene .g { fill: var(--gold); }
.scene .hull { fill: var(--land); stroke: var(--land-edge); stroke-width: 1; } .scene .sail { fill: rgba(233,226,208,0.85); stroke: var(--ink-3); stroke-width: 0.8; } .scene .mast { stroke: var(--ink-2); stroke-width: 1.4; }
.scene .thin { stroke: var(--line-strong); stroke-width: 1; fill: none; } .scene .box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; } .scene .arrow { stroke: var(--gold); stroke-width: 1.5; fill: none; marker-end: url(#arrowhead-panel); }
/* 要因の卓 — 矢印を引かず、札を並べて積む（docs/visual-design.md） */
.fboard { position: relative; margin: 12px 0 8px; padding: 14px 12px 12px; border-radius: 8px;
  background-color: color-mix(in srgb, var(--surface-solid) 88%, #000);
  background-image: linear-gradient(180deg, rgba(255,240,205,0.055), rgba(0,0,0,0.20)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 5px);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.22), inset 0 0 30px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.30); }
.fb-corner { position: absolute; width: 11px; height: 11px; border: 1px solid var(--gold-2); opacity: 0.5; pointer-events: none; }
.fb-corner.tl { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.fb-corner.br { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.fcards { display: grid; gap: 7px; }
.fcard { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px 8px 9px; border-radius: 3px; outline: none; cursor: default;
  background: linear-gradient(180deg, rgba(240,232,212,0.11), rgba(240,232,212,0.04));
  border: 1px solid rgba(236,229,211,0.16); border-left: 3px solid var(--c);
  box-shadow: 0 2px 0 rgba(0,0,0,0.34), 0 7px 16px rgba(0,0,0,0.26);
  animation: fc-deal 0.36s cubic-bezier(.2,.9,.3,1) var(--d) backwards;
  transition: transform 0.14s, box-shadow 0.14s, opacity 0.16s, background 0.14s; }
.fcard:hover, .fcard:focus-visible { transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(240,232,212,0.16), rgba(240,232,212,0.06));
  box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 12px 22px rgba(0,0,0,0.34); }
.fcard.dim { opacity: 0.38; }
.fc-seal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--c) 65%, transparent);
  background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--c) 30%, transparent), rgba(0,0,0,0.22)); }
.fc-seal .ic-svg { width: 18px; height: 18px; }
.fc-head { display: flex; align-items: baseline; gap: 8px; }
.fc-name { font-family: var(--font-display); font-size: 14px; color: var(--ink); letter-spacing: 0.02em; }
.fc-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-3); }
.fc-note { margin: 3px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
.fc-pips { display: flex; gap: 3px; padding-left: 4px; }
.fc-pips i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.fc-pips i.on { background: var(--c); border-color: var(--c); box-shadow: 0 0 5px color-mix(in srgb, var(--c) 55%, transparent); }
.fb-stack { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; }
.fb-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; color: var(--ink-3); white-space: nowrap; }
.fb-band { display: flex; flex: 1; height: 9px; border-radius: 2px; overflow: hidden; border: 1px solid rgba(0,0,0,0.38); }
.fb-seg { background: var(--c); opacity: 0.7; transition: opacity 0.15s, filter 0.15s; cursor: default; }
.fb-seg.lit { opacity: 1; filter: brightness(1.3); }
.fplate { margin-top: 10px; padding: 9px 12px; text-align: center; border-radius: 3px;
  background: linear-gradient(180deg, rgba(232,193,112,0.13), rgba(232,193,112,0.04));
  border: 1px solid var(--gold-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 4px 12px rgba(0,0,0,0.3);
  animation: fp-stamp 0.34s cubic-bezier(.2,1.4,.4,1) var(--d) backwards; }
.fp-k { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.26em; color: var(--gold); margin-bottom: 5px; }
.fp-t { font-family: var(--font-display); font-size: 15px; color: var(--ink); line-height: 1.5; }
@keyframes fc-deal { from { opacity: 0; transform: translateY(-14px) rotate(-1.2deg); } }
@keyframes fp-stamp { from { opacity: 0; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .fcard, .fplate { animation: none; } }
/* 羊皮紙のときは、卓を木の色にして、札を白く置く（暗い面の重ね方では沈むため） */
:root[data-theme="light"] .fboard,
:root[data-theme="light"] .track-board { background-color: color-mix(in srgb, var(--surface-solid) 64%, #8a6c3c);
  box-shadow: inset 0 0 0 3px rgba(60,40,10,0.14), inset 0 0 24px rgba(60,40,10,0.14), 0 8px 20px rgba(60,40,10,0.18); }
:root[data-theme="light"] .fcard,
:root[data-theme="light"] .tspace { background: linear-gradient(180deg, #fbf6ea, #f1e9d5); border-color: rgba(43,36,25,0.2);
  box-shadow: 0 2px 0 rgba(60,40,10,0.22), 0 6px 12px rgba(60,40,10,0.16); }
:root[data-theme="light"] .fcard:hover { background: linear-gradient(180deg, #fffdf6, #f6efdd); }
:root[data-theme="light"] .fplate { background: linear-gradient(180deg, rgba(154,109,18,0.16), rgba(154,109,18,0.06)); }
:root[data-theme="light"] .tb-note { background: rgba(154,109,18,0.08); }
:root[data-theme="light"] .tb-feed { border-color: rgba(43,36,25,0.28); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .fboard,
  :root:not([data-theme="dark"]) .track-board { background-color: color-mix(in srgb, var(--surface-solid) 64%, #8a6c3c);
    box-shadow: inset 0 0 0 3px rgba(60,40,10,0.14), inset 0 0 24px rgba(60,40,10,0.14), 0 8px 20px rgba(60,40,10,0.18); }
  :root:not([data-theme="dark"]) .fcard,
  :root:not([data-theme="dark"]) .tspace { background: linear-gradient(180deg, #fbf6ea, #f1e9d5); border-color: rgba(43,36,25,0.2);
    box-shadow: 0 2px 0 rgba(60,40,10,0.22), 0 6px 12px rgba(60,40,10,0.16); }
  :root:not([data-theme="dark"]) .fcard:hover { background: linear-gradient(180deg, #fffdf6, #f6efdd); }
  :root:not([data-theme="dark"]) .fplate { background: linear-gradient(180deg, rgba(154,109,18,0.16), rgba(154,109,18,0.06)); }
  :root:not([data-theme="dark"]) .tb-note { background: rgba(154,109,18,0.08); }
  :root:not([data-theme="dark"]) .tb-feed { border-color: rgba(43,36,25,0.28); }
}
/* 工程は盤の道（番号のついたマス）で見せる */
.track-board .tb-head { font-family: var(--font-display); font-size: 13px; color: var(--ink); margin: 0 2px 10px; letter-spacing: 0.03em; }
.track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.track.rev { direction: rtl; }
.tspace { direction: ltr; position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(240,232,212,0.11), rgba(240,232,212,0.04));
  border: 1px solid rgba(236,229,211,0.16); box-shadow: 0 2px 0 rgba(0,0,0,0.32), 0 6px 14px rgba(0,0,0,0.24); }
.ts-n { position: absolute; top: 4px; left: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--gold); }
.ts-seal { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: radial-gradient(circle at 34% 26%, rgba(232,193,112,0.16), rgba(0,0,0,0.2)); }
.ts-seal .ic-svg { width: 15px; height: 15px; color: var(--gold); }
.ts-seal.small { width: 22px; height: 22px; } .ts-seal.small .ic-svg { width: 12px; height: 12px; }
.ts-t { font-family: var(--font-display); font-size: 12px; color: var(--ink); text-align: center; line-height: 1.4; }
.ts-s { font-size: 10px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.tb-feed { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 9px; border-radius: 3px; font-size: 11px; color: var(--ink-2);
  border: 1px dashed rgba(236,229,211,0.2); }
.tb-feed b { color: var(--ink); font-weight: 500; margin-right: 4px; }
.tb-note { margin-top: 10px; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--gold-2); background: rgba(232,193,112,0.06); font-size: 11.5px; color: var(--ink-2); }
.tb-note b { display: block; color: var(--ink); font-weight: 500; font-family: var(--font-display); font-size: 12.5px; margin-bottom: 5px; }
.tb-note span { display: block; padding-left: 12px; position: relative; line-height: 1.75; }
.tb-note span::before { content: "◆"; position: absolute; left: 0; color: var(--gold-2); font-size: 8px; top: 4px; }
.tb-note em { display: block; margin-top: 5px; font-style: normal; color: var(--ink-3); }
/* 距離は棒グラフではなく、目盛りの上の駒で */
.ruler { width: 100%; height: auto; display: block; }
.ruler .rail { stroke: var(--line-strong); stroke-width: 1.2; }
.ruler .tk line { stroke: var(--ink-3); stroke-width: 0.8; }
.ruler .tk text { fill: var(--ink-3); font-family: var(--font-mono); font-size: 8px; }
.ruler .gap { fill: rgba(224,87,74,0.16); }
.ruler .pawn .sh { fill: rgba(0,0,0,0.4); }
.ruler .pawn path { fill: var(--surface-solid); stroke: var(--gold); stroke-width: 1.1; }
.ruler .pawn.real path { stroke: var(--land-edge); }
.ruler .pawn .pl { fill: var(--ink); font-family: var(--font-display); font-size: 11px; }
.ruler .pawn .ps { fill: var(--gold); font-family: var(--font-mono); font-size: 9.5px; }
.ruler .pawn.real .ps { fill: var(--ink-2); }
.ruler .landfall path { fill: var(--danger); } .ruler .landfall line { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 2 2; }
.ruler .landfall text { fill: var(--danger); font-size: 9.5px; font-family: var(--font-body); }
/* 風と帰り道は、当時の海図の言葉で */
.portolan { width: 100%; height: auto; display: block; }
.portolan .sea { fill: color-mix(in srgb, var(--ocean) 70%, var(--surface-solid)); }
.portolan .rhumb { stroke: rgba(232,193,112,0.13); stroke-width: 0.5; }
.portolan .coast { fill: var(--land); stroke: var(--land-edge); stroke-width: 1; }
.portolan .place { fill: var(--ink-2); font-size: 10px; font-family: var(--font-body); }
.portolan .rose circle { fill: none; stroke: rgba(232,193,112,0.4); stroke-width: 0.7; }
.portolan .rose .maj { fill: var(--gold); opacity: 0.85; } .portolan .rose .min { fill: var(--ink-3); opacity: 0.6; }
.portolan .rose .n { fill: var(--gold); font-family: var(--font-mono); font-size: 8px; }
.portolan .trk { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.portolan .trk.out { stroke: var(--gold); stroke-dasharray: 5 3; }
.portolan .trk.back { stroke: #7fb3c9; stroke-dasharray: 2 3; }
.portolan .ship path { fill: none; stroke: var(--ink); stroke-width: 1; }
.portolan .lbl { font-size: 10px; font-family: var(--font-body); }
.portolan .lbl.out { fill: var(--gold); } .portolan .lbl.back { fill: #9fc9dc; }
.battle-map svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; }
.battle-svg .t-sea { fill: #16304a; } .battle-svg .t-shallows { fill: #234f6b; } .battle-svg .t-reef { fill: url(#reefpat); stroke: #6fa0b8; stroke-width: 0.3; } .battle-svg .reef-hatch { stroke: #7fb3c9; stroke-width: 0.35; }
.battle-svg .t-beach { fill: #b9a878; } .battle-svg .t-land { fill: #3c4a3a; } .battle-svg .t-forest { fill: #2f4a30; } .battle-svg .t-hill { fill: #55604a; } .battle-svg .t-marsh { fill: #3d5a4c; }
.battle-svg .t-city { fill: #8c7a55; stroke: #e9e2d0; stroke-width: 0.3; } .battle-svg .t-fort { fill: #6b6b6b; stroke: #e9e2d0; stroke-width: 0.4; }
.battle-svg .t-river { fill: none; stroke: #4f8fb8; stroke-width: 1.2; } .battle-svg .t-road { fill: none; stroke: #a08a5a; stroke-width: 0.5; stroke-dasharray: 1 0.6; }
.battle-svg .t-label { fill: #e9e2d0; font-size: 2.6px; font-family: var(--font-body); paint-order: stroke; stroke: rgba(0,0,0,0.5); stroke-width: 0.5px; }
.battle-svg .unit .ushadow { fill: rgba(0,0,0,0.45); stroke: none; }
.battle-svg .unit .ucard { stroke-width: 0.3; }
.battle-svg .unit .uinner { fill: none; stroke-width: 0.18; }
.battle-svg .unit.side-a .ucard { fill: #b8453a; stroke: #ffd9d4; } .battle-svg .unit.side-a .uinner { stroke: rgba(255,217,212,0.55); }
.battle-svg .unit.side-b .ucard { fill: #1d8577; stroke: #d3fff8; } .battle-svg .unit.side-b .uinner { stroke: rgba(211,255,248,0.5); }
.battle-svg .unit .ustamp { stroke: #fff; opacity: 0.94; }
.battle-svg .unit .un { fill: #fff; font-size: 2.1px; letter-spacing: 0.02em; font-family: var(--font-mono); paint-order: stroke; stroke: rgba(0,0,0,0.6); stroke-width: 0.4px; }
.battle-svg .unit .ul { fill: #e9e2d0; font-size: 2.2px; font-family: var(--font-body); paint-order: stroke; stroke: rgba(0,0,0,0.6); stroke-width: 0.4px; } .battle-svg .unit.old { opacity: 0.45; }
.battle-svg .mv line { stroke-width: 0.9; fill: none; } .battle-svg .mv.side-a line { stroke: #ff8a7a; } .battle-svg .mv.side-b line { stroke: #4fd6c4; }
.battle-svg .mv.fire line { stroke-dasharray: 1.2 0.8; } .battle-svg .mv.retreat line { stroke-dasharray: 0.5 0.8; } .battle-svg .mv.blocked line { stroke-dasharray: 1.5 1; } .battle-svg .mv.old { opacity: 0.35; }
.battle-svg .mh-a { fill: #ff8a7a; } .battle-svg .mh-b { fill: #4fd6c4; } .battle-svg .blocked-x { fill: #ffd98a; font-size: 4px; font-weight: bold; }
.battle-svg .mv-label { fill: #ffe6a8; font-size: 2.3px; font-family: var(--font-body); paint-order: stroke; stroke: rgba(0,0,0,0.6); stroke-width: 0.5px; }
.battle-legend { display: flex; gap: 14px; font-size: 11.5px; margin: 4px 0 8px; } .battle-legend .side-a { color: #e0574a; } .battle-legend .side-b { color: #25a898; }
.battle-phases { margin-top: 8px; } .ph-ctrl { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.ph-ctrl button { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink); }
#ph-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 3px; }
#ph-list li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--ink-3); cursor: pointer; }
#ph-list li .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } #ph-list li.cur { background: var(--surface); color: var(--ink); } #ph-list li.cur .t { color: var(--gold); }

/* --- 通知 ------------------------------------------------------ */
#notices { position: absolute; right: 18px; top: 124px; width: 320px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 11; transition: right .38s; }
#codex.open ~ #notices { position: absolute; right: 18px; top: 124px; width: 320px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 11; transition: right .38s; }
#codex.open ~ #stage #map-tools { right: calc(var(--codex-w) + 16px); }
#notices .n { pointer-events: auto; position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 11px 12px 12px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-left: 3px solid var(--gold); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,0.45); animation: nin .34s cubic-bezier(.2,.9,.3,1.2) both; transition: opacity .45s, transform .45s; }


@keyframes nin { from { opacity: 0; transform: translateX(10px); } }

/* --- 下部：時間・字幕・問い ----------------------------------- */
#deck { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 10px; display: grid; gap: 6px; pointer-events: none; z-index: 5; transition: right 0.38s; }

#deck > * { pointer-events: auto; }
#timeline { position: relative; height: 40px; }
#timeline svg { width: 100%; height: 44px; display: block; overflow: visible; }
#timeline .tick text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); } #timeline .tick line { stroke: var(--line-strong); }
#timeline .rail { stroke: var(--line-strong); stroke-width: 1; }
#timeline .ev { fill: var(--gold); opacity: 0.7; cursor: pointer; } #timeline .ev:hover { opacity: 1; }
#timeline .ev-label { font-family: var(--font-body); font-size: 10px; fill: var(--ink-2); pointer-events: none; opacity: 0; } #timeline .ev:hover + .ev-label { opacity: 1; }
#timeline .needle { stroke: var(--gold); stroke-width: 2; } #timeline .needle-cap { fill: var(--gold); }
#year-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
#narration { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; padding: 12px 22px 12px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-top: 1px solid rgba(232,193,112,0.35); border-radius: 12px; backdrop-filter: blur(12px); min-height: 96px; box-shadow: 0 -10px 40px rgba(0,0,0,0.25); }
#narration .speaker { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
#narration .speaker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
#narration .speaker.playing .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
#narration .speaker.thinking .dot { background: var(--silver); animation: think 1s ease-in-out infinite alternate; }
#narration .speaker.waiting .dot { background: var(--gold); }
@keyframes think { from { opacity: 0.3; } to { opacity: 1; } }
#say { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.75; color: var(--ink); max-width: 64ch; min-height: 1.8em; text-wrap: pretty; letter-spacing: 0.01em; }
#say .cursor { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: -0.15em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.transport { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mode-row { display: flex; gap: 6px; align-items: center; }
#speed { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-3); font-size: 11.5px; }
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.mode-switch button { padding: 4px 12px; border: 0; background: transparent; color: var(--ink-3); font-size: 11.5px; }
.mode-switch button.on { background: var(--gold); color: var(--ocean-deep); font-weight: 500; }
.tbtns { display: flex; gap: 6px; }
.tbtns button { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.tbtns button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-2); }
.tbtns button.primary { color: var(--gold); border-color: var(--gold); }
.tbtns button.primary.glow { background: rgba(232,193,112,0.14); box-shadow: 0 0 0 3px rgba(232,193,112,0.18); }
.tbtns button:disabled { opacity: 0.35; cursor: default; }
.beat-dots { display: inline-flex; gap: 4px; margin-left: 10px; }
.beat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.beat-dots i.done { background: var(--ink-3); } .beat-dots i.cur { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.beat-dots i.pending { border: 1px solid var(--line-strong); background: transparent; width: 4px; height: 4px; }
/* 章の場面が多い長編では、点の列が見出しを潰す。赤い虫・雪めがねと同じく隠す。 */
body[data-book-kind=champagne] #beat-dots,
body[data-book-kind=reading] #beat-dots { display: none; }
#suggest { display: flex; flex-wrap: wrap; gap: 6px; }
#suggest button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; backdrop-filter: blur(6px); }
#suggest button:hover { color: var(--ink); border-color: var(--gold); }
#suggest button.back { color: var(--gold); border-color: var(--gold); }
#ask { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#ask input { padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 14.5px; backdrop-filter: blur(10px); }
#ask input::placeholder { color: var(--ink-3); }
#ask button { padding: 0 18px; border: 1px solid var(--gold); border-radius: 10px; background: transparent; color: var(--gold); font-size: 14px; }
#ask button:hover { background: rgba(232,193,112,0.12); } #ask button:disabled { opacity: 0.5; cursor: wait; }

/* --- 章のタイトルカード ---------------------------------------- */
#chapter-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(6,12,23,0.55), rgba(6,12,23,0.92)); z-index: 8; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#chapter-card.show { opacity: 1; }
#chapter-card .cc-inner { text-align: center; transform: translateY(8px); transition: transform 0.6s; }
#chapter-card.show .cc-inner { transform: none; }
.cc-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.4em; color: var(--gold); }
.cc-title { font-family: var(--font-display); font-size: clamp(34px, 6vw, 62px); font-weight: 500; color: var(--ink); letter-spacing: 0.06em; margin: 8px 0 12px; text-shadow: 0 0 40px rgba(232,193,112,0.2); }
.cc-lede { font-family: var(--font-display); font-size: 16px; color: var(--ink-2); }
.cc-year { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-top: 18px; letter-spacing: 0.2em; }

/* --- タイトル画面 ---------------------------------------------- */
#title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(6,12,23,0.35), rgba(6,12,23,0.85)); z-index: 9; transition: opacity 0.7s; }
#title.hide { opacity: 0; pointer-events: none; }
.t-inner { text-align: center; max-width: 640px; padding: 24px; }
.t-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.4em; color: var(--gold); }
.t-name { margin: 12px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 7vw, 72px); letter-spacing: 0.18em; color: var(--ink); text-shadow: 0 0 60px rgba(232,193,112,0.25); }
.t-sub { font-family: var(--font-display); font-size: 18px; color: var(--ink-2); letter-spacing: 0.2em; } .t-sub span { font-family: var(--font-mono); color: var(--gold); letter-spacing: 0.1em; margin-left: 10px; }
.t-lede { font-family: var(--font-display); font-size: 15px; line-height: 2; color: var(--ink-2); margin: 22px auto 26px; max-width: 34em; }
.t-scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 16px; text-align: left; }
.t-sc { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.t-sc:hover { border-color: var(--gold); }
.t-sc .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--gold); }
.t-sc b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; margin: 4px 0 2px; }
.t-sc small { color: var(--ink-3); font-size: 11.5px; }
.t-sc.primary { border-color: var(--gold); box-shadow: 0 0 30px -10px var(--gold); }
.t-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.t-btn { padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14.5px; backdrop-filter: blur(8px); }
.t-btn.primary { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 30px -8px var(--gold); }
.t-btn:hover { border-color: var(--gold); } .t-btn small { display: block; font-size: 11px; color: var(--ink-3); }
.t-hint { margin-top: 26px; font-size: 12px; color: var(--ink-3); }

/* --- 設定 / トースト ------------------------------------------ */
#settings { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); z-index: 20; }
#settings.open { display: flex; }
#settings .box { width: min(540px, calc(100vw - 36px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow); }
#settings h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; }
#settings p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
#settings .row { display: grid; gap: 6px; margin-bottom: 12px; } #settings label { font-size: 12px; color: var(--ink-3); }
#settings input, #settings select { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
#settings input[type=checkbox] { width: auto; }
#settings .status { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-bottom: 12px; } #settings .status b { color: var(--gold); font-weight: 500; }
#settings .actions { display: flex; align-items: center; gap: 8px; }
#settings .actions button { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink); } #settings .actions button.primary { border-color: var(--gold); color: var(--gold); }
#toast { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); padding: 8px 14px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12.5px; color: var(--ink-2); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 30; max-width: min(560px, calc(100vw - 36px)); }
#toast.show { opacity: 1; }

/* --- 狭い画面 -------------------------------------------------- */
@media (max-width: 900px) {
  :root { --codex-w: 100vw; }
  #left, #modebar #layers, #focus-label, #legend, #compass, #map-tools button[data-proj] { display: none; }
  #modebar { justify-content: flex-start; overflow: auto; }
  #cast { display: none; }
  #hud .hud-stat { display: none; } #hud .hud-stat.btn { display: flex; }
  #topbar { gap: 8px; }
  #hud .hud-year span { font-size: 22px; }
  #notices { position: absolute; right: 18px; top: 124px; width: 320px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 11; transition: right .38s; }
  #codex { top: auto; bottom: 0; height: 62vh; border-left: 0; border-top: 1px solid var(--line-strong); border-radius: 14px 14px 0 0; transform: translateY(100%); }
  #codex.open ~ #deck { right: 0; }
  #narration { grid-template-columns: 1fr; } #say { font-size: 16px; }
  #trail { display: none; }
  .transport { align-items: stretch; }
}

/* --- 人物パネル（ゲーム風） --- */
.portrait-frame { position: relative; width: 104px; height: 130px; border-radius: 6px; overflow: hidden; border: 1px solid #9a8155; box-shadow: 0 0 0 3px rgba(154,129,85,0.18), 0 8px 24px rgba(0,0,0,0.5); }
.portrait-frame .portrait { border: 0; border-radius: 0; filter: saturate(0.8); }
.portrait-frame:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,20,26,0.55), transparent 55%); pointer-events: none; }
.pquote small { display: block; font-family: var(--font-body); font-size: 9.5px; color: var(--ink-3); margin-top: 4px; }
.pquote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 13px; line-height: 1.7; color: var(--ink); background: rgba(232,193,112,0.05); }
.tags.traits span { border-color: rgba(232,193,112,0.4); color: var(--gold); }
.stats { display: grid; gap: 4px; }
.stats .srow { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-2); }
.stats .dots { display: flex; gap: 4px; }
.stats .dots i { width: 14px; height: 8px; border-radius: 2px; background: rgba(236,229,211,0.12); border: 1px solid rgba(236,229,211,0.15); }
.stats .dots i.on { background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-color: var(--gold); box-shadow: 0 0 6px rgba(232,193,112,0.35); }

/* --- 情景・主題・駒・地形 --- */
.story-art { height: 96px; position: relative; overflow: hidden; border-top: 1px solid rgba(197,171,112,0.2); border-bottom: 1px solid rgba(197,171,112,0.2); background: var(--surface); }
.story-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; filter: saturate(0.75); }
.story-art small { position: absolute; right: 4px; bottom: 2px; font-size: 8px; color: #eee5cd; text-shadow: 0 1px 4px #000; }
.theme { padding: 10px 14px 8px; font-family: var(--font-display); font-size: 12px; line-height: 1.7; color: var(--ink); }
.theme b { display: block; font-family: var(--font-body); color: var(--gold); font-size: 9px; font-weight: 400; letter-spacing: 0.14em; margin-bottom: 3px; }
#chapter-card .cc-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0; filter: blur(2px) saturate(0.6) brightness(0.45); transition: opacity 0.8s; }
#chapter-card.show .cc-bg { opacity: 1; }
#chapter-card .cc-inner { position: relative; z-index: 1; max-width: 760px; padding: 0 24px; }
.cc-theme { font-family: var(--font-display); font-size: 14px; color: var(--ink-2); margin-bottom: 18px; letter-spacing: 0.04em; }
#globe-svg .token { cursor: pointer; }
#globe-svg .token .ring { fill: none; stroke: var(--gold); stroke-width: 2; }
#globe-svg .token .pin { fill: var(--gold); }
#globe-svg .token .shade { fill: rgba(0,0,0,0.45); }
#globe-svg .token .init { font-family: var(--font-display); font-size: 16px; fill: var(--ink); text-anchor: middle; }
#globe-svg .token .nm { font-family: var(--font-body); font-size: 11px; fill: var(--ink); paint-order: stroke; stroke: var(--ocean-deep); stroke-width: 3px; text-anchor: middle; }
#globe-svg .token.new .ring { animation: hl 1.2s ease-in-out infinite alternate; }
#focus-label { background: var(--surface); padding: 6px 12px 8px; border-radius: 6px; border: 1px solid var(--line); max-width: 42%; }
#focus-label strong { font-size: 18px; }
#legend { background: var(--surface); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); }

/* 生成カードの代表画像 */
.gen-fig{margin:6px 0 10px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-2)}
.gen-fig img{display:block;width:100%;max-height:220px;object-fit:cover}
.gen-fig figcaption{font-size:10.5px;color:var(--ink-3);padding:4px 8px}

/* Wikipedia から遅れて届く抜粋と画像 */
.wiki-extract{margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px}
.wiki-extract summary{cursor:pointer;font-size:11px;letter-spacing:.06em;color:var(--ink-3);list-style:none}
.wiki-extract summary::-webkit-details-marker{display:none}
.wiki-extract summary::before{content:"▸ ";color:var(--gold)}
.wiki-extract[open] summary::before{content:"▾ "}
.wiki-extract p{font-family:var(--font-body);font-size:12.5px;line-height:1.75;color:var(--ink-2);margin:6px 0 4px}
.wiki-extract small{color:var(--ink-3);font-size:10.5px}
.wiki-fig{margin:0 0 10px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-2)}
.wiki-fig img{display:block;width:100%;max-height:200px;object-fit:cover}

/* 分かれ道（ノベルゲーム風の選択） */
#choice { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at center, rgba(6,12,23,0.72), rgba(4,8,14,0.94)); backdrop-filter: blur(3px); animation: chFade .4s ease both; }
#choice .ch-inner { width: min(980px, 100%); max-height: 100%; overflow: auto; text-align: center; animation: chIn .5s ease both; }
@keyframes chIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#choice .ch-kicker { font-size: 10.5px; letter-spacing: .28em; color: var(--gold); margin-bottom: 12px; }
#choice .ch-prompt { font-family: var(--font-display); font-size: clamp(17px, 2.6vw, 22px); line-height: 1.75; color: var(--ink); max-width: 46ch; margin: 0 auto; }
#choice .ch-opts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 18px; text-align: left; }
#choice .ch-opt { position: relative; background: color-mix(in srgb, var(--surface-solid) 92%, transparent); border: 1px solid var(--line-strong); border-radius: 10px; padding: 18px 18px 20px; color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; min-height: 148px; display: flex; flex-direction: column; gap: 8px; }
#choice .ch-opt:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
#choice .ch-opt b { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.5; }
#choice .ch-opt small { font-family: var(--font-body); color: var(--ink-2); font-size: 12.5px; line-height: 1.75; }
#choice .ch-opt.seen b::after { content: " ✓"; color: var(--gold-dim); }
#choice .ch-skip { margin-top: 18px; background: none; border: 0; color: var(--ink-3); font-size: 12px; cursor: pointer; text-decoration: underline dotted; }
#choice .ch-skip:hover { color: var(--ink-1); }
@media (max-width: 760px) { #choice { padding: 16px; } #choice .ch-opts { grid-template-columns: 1fr; gap: 10px; } #choice .ch-opt { min-height: 0; } }

#chapters .br { margin-left: auto; font-size: 10px; color: var(--gold-dim); letter-spacing: .04em; }
#chapters .br.full { color: var(--gold); }

/* 本文の中の「図鑑にある語」 */
/* 読み上げ（Chirp 3: HD） */
.vbtn { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); font-size: 11.5px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.vbtn:hover { border-color: var(--line-strong); color: var(--ink-2); }
.vbtn.on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.vbtn.on::before { content: "♪ "; }
.voice-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.voice-acts #voice-prog { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
#settings input[type="range"] { width: 100%; accent-color: var(--gold); }
/* その一文の根拠となる資料（wiki / 通史 / 史料）と結ぶ点線。銀。資料の本文と重なった文にだけ引く */
.cite-b { text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--silver) 55%, transparent); text-underline-offset: 5px;
  cursor: help; border-radius: 2px; transition: background 0.15s, text-decoration-color 0.15s; }
.cite-b:hover { background: color-mix(in srgb, var(--silver) 13%, transparent); text-decoration-color: var(--silver); }
/* 資料が無く、語り手の知識だけで書かれた文の印。cite-b（点線・銀）とは見た目を変える――
   根拠があるように見せてはいけない。破線・くすんだ色にして、一目で「点線ではない」と分かるようにする。 */
.cite-m { text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 65%, transparent); text-underline-offset: 5px;
  cursor: help; border-radius: 2px; transition: background 0.15s, text-decoration-color 0.15s; }
.cite-m:hover { background: color-mix(in srgb, var(--ink-3) 10%, transparent); text-decoration-color: var(--ink-3); }
.term { font: inherit; color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dotted var(--gold-dim); transition: color .15s, border-color .15s, background .15s; border-radius: 2px; }
.term:hover, .term:focus-visible { color: var(--ink-0, var(--ink-1)); border-bottom-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); outline: none; }
.term-tip { position: fixed; z-index: 250; max-width: 300px; background: var(--bg-1); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 9px 11px; box-shadow: 0 14px 34px rgba(0,0,0,0.4); pointer-events: none; animation: tipIn .16s ease both; }
@keyframes tipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.term-tip b { display: inline; font-weight: 500; font-size: 13px; color: var(--ink-1); }
.term-tip .k { margin-left: 7px; font-size: 10px; letter-spacing: .12em; color: var(--gold); }
.term-tip p { margin: 5px 0 4px; font-family: var(--font-body); font-size: 12px; line-height: 1.65; color: var(--ink-2); }
.term-tip small { font-size: 10.5px; color: var(--ink-3); }

/* Wikipedia にだけある語（押すと図鑑のカードになる）。.term と同じ金色に固定する。
   以前は灰色に上書きしていたが、点線（.cite-b、銀）と紛れず、語の印は常に金、で統一する。 */

/* 開発情報（1枚にまとめる。既定では出さない） */
#devpanel { position: fixed; right: 12px; top: 104px; bottom: auto; z-index: 41; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 360px); overflow: auto; background: var(--surface-solid); backdrop-filter: blur(8px); border: 1px solid var(--gold-dim); border-radius: 8px; box-shadow: 0 18px 48px rgba(0,0,0,0.55); font-size: 12px; }
#devpanel header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-solid); }
#devpanel header b { font-size: 11px; letter-spacing: .14em; color: var(--gold); }
#devpanel #dev-build { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
#devpanel header button { margin-left: auto; background: none; border: 0; color: var(--ink-3); font-size: 16px; cursor: pointer; line-height: 1; }
#devpanel section { padding: 9px 11px; border-bottom: 1px solid var(--line); }
#devpanel h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .12em; color: var(--ink-3); font-weight: 500; }
#devpanel table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
#devpanel { color: var(--ink); }
#devpanel td { padding: 2px 0; color: var(--ink-2); vertical-align: top; }
#devpanel td.r { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
#devpanel td.k { color: var(--ink-3); padding-right: 8px; white-space: nowrap; }
#devpanel .big { font-family: var(--font-mono); font-size: 16px; color: var(--gold); font-variant-numeric: tabular-nums; }
#devpanel .warn { color: var(--gold); }
#devpanel .muted { color: var(--ink-3); }

/* 想起と収集 */
.cx-modes { display: flex; gap: 6px; margin: 0 0 8px; }
.cx-modes button { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; color: var(--ink-2); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s; }
.cx-modes button:hover { border-color: var(--gold); color: var(--ink); }
.cx-modes button b { display: inline-block; margin-left: 6px; background: var(--gold); color: #1a1205; border-radius: 9px; padding: 0 6px; font-size: 10.5px; font-weight: 700; }
.rc-q { font-size: 14.5px; line-height: 1.95; }
.rc-choices { display: grid; gap: 6px; margin: 10px 0 4px; }
.rc-c { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; color: var(--ink); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.rc-c:hover:not(:disabled) { border-color: var(--gold); }
.rc-c:disabled { cursor: default; opacity: .75; }
.rc-c.right { border-color: #6fbf8b; color: #bdf0cf; }
.rc-c.wrong { border-color: var(--danger); color: #ffc6bf; }
.rc-after p { font-family: var(--font-body); font-size: 13px; color: var(--ink-2); margin: 8px 0 4px; }
.rc-stats { display: flex; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.set { border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; margin-bottom: 9px; background: var(--surface-2); }
.set.done { border-color: var(--gold-dim, var(--gold-2)); }
.set-head { display: flex; align-items: baseline; gap: 8px; }
.set-head b { font-weight: 500; font-size: 13.5px; }
.set-head span { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.set-bar { height: 3px; background: var(--line); border-radius: 2px; margin: 7px 0; overflow: hidden; }
.set-bar i { display: block; height: 100%; background: var(--gold); }
.set-note { font-family: var(--font-body); font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.set-missing { margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.set-missing span { display: inline-block; margin: 2px 5px 0 0; padding: 1px 6px; border: 1px dashed var(--line-strong); border-radius: 9px; }
.set-gift { margin-top: 7px; font-family: var(--font-body); font-size: 12.5px; color: var(--gold); }
.set-ask { margin-left: 6px; background: none; border: 1px solid var(--gold-dim, var(--gold-2)); color: var(--gold); border-radius: 5px; padding: 2px 8px; font-size: 11px; cursor: pointer; }

/* 今日の航海指令 */
#orders-card ul { list-style: none; margin: 0; padding: 0 12px 4px; display: grid; gap: 5px; }
#orders-card li { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
#orders-card li .box { flex: none; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 3px; position: relative; top: 2px; }
#orders-card li.done { color: var(--ink-3); text-decoration: line-through; }
#orders-card li.done .box { background: var(--gold); border-color: var(--gold); }
#orders-card li .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
#orders-card small { display: block; margin: 7px 12px 10px; font-size: 10.5px; color: var(--ink-3); }

/* カードの段階 */
.stage-ladder { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 9px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.stage-ladder span.on { color: var(--gold); }
/* 謎 */
#orders-card .myst-q { display: block; margin-bottom: 8px; }
#orders-card .myst-q b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.6; margin-bottom: 4px; }
#orders-card .myst-lede { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--ink-3); line-height: 1.7; margin-bottom: 6px; }
#orders-card .myst-bar { display: block; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
#orders-card .myst-bar i { display: block; height: 100%; background: var(--gold); transition: width .6s; }
#orders-card .myst-ask { margin-left: auto; background: none; border: 1px solid var(--line-strong); color: var(--ink-3); border-radius: 5px; padding: 1px 7px; font-size: 10.5px; cursor: pointer; }
#orders-card .myst-ask:hover { border-color: var(--gold); color: var(--gold); }

/* アトラス */
.atlas { margin: 10px 0 8px; font-family: var(--font-mono); font-size: 9.5px; }
.atlas-row { display: grid; grid-template-columns: 52px repeat(12, 1fr); gap: 2px; align-items: center; margin-bottom: 2px; }
.atlas-head span { color: var(--ink-3); text-align: center; }
.atlas-lens { color: var(--ink-2); font-family: var(--font-body); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.atlas-cell { height: 13px; border-radius: 2px; background: color-mix(in srgb, var(--c, var(--gold)) calc(var(--v) * 85%), rgba(255,255,255,0.045)); border: 1px solid rgba(255,255,255,0.05); }
.atlas-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.combos { display: grid; gap: 6px; }
.combo { border: 1px dashed var(--line-strong); border-radius: 6px; padding: 7px 10px; }
.combo.on { border-style: solid; border-color: var(--gold-2); }
.combo b { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.combo.on b { color: var(--gold); }
.combo span { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

#orders-card .myst-switch { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#orders-card .myst-switch button { background: none; border: 1px solid var(--line); color: var(--ink-3); border-radius: 5px; padding: 2px 7px; font-size: 10.5px; cursor: pointer; text-align: left; }
#orders-card .myst-switch button:hover { border-color: var(--gold); color: var(--gold); }

@keyframes chFade { from { opacity: 0 } to { opacity: 1 } }
#choice .ch-opt .q { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--gold); }
#choice .ch-opt.seen b::after { content: " ✓"; color: var(--gold-2); }
/* 章カードの謎 */
#chapter-card .cc-mystery { max-width: 44ch; margin: 18px auto 0; padding: 14px 18px; border: 1px solid var(--gold-2); border-radius: 8px; background: rgba(10, 18, 26, 0.5); }
#chapter-card .cc-mlabel { display: block; font-size: 10px; letter-spacing: .26em; color: var(--gold); margin-bottom: 7px; }
#chapter-card .cc-mystery p { font-family: var(--font-body); font-size: 14px; line-height: 1.9; color: var(--ink); margin: 0; }

#choice .ch-opt.live { border-style: dashed; }
#choice .ch-opt.live .q { color: var(--ink-3); }
#choice .ch-opt.live:hover { border-style: solid; }

/* 通史の出典 */
#sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
#sources .src-label { font-size: 10px; letter-spacing: .18em; color: var(--ink-3); }
#sources button { background: none; border: 1px solid var(--line); color: var(--ink-3); border-radius: 5px; padding: 2px 8px; font-size: 11px; cursor: pointer; font-family: var(--font-body); }
#sources button:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   携帯（〜700px）：3列の画面を積み直す。地図が主役、あとは呼び出し式。
   ============================================================ */
@media (max-width: 700px) {
  /* タイトル：中央寄せをやめ、上から流して縦に読ませる */
  #title { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 96px 0 28px; background: linear-gradient(180deg, rgba(6,12,23,0.55), rgba(4,9,16,0.95)); }
  .t-inner { max-width: none; width: 100%; padding: 16px; }
  .t-name { font-size: 27px; letter-spacing: .1em; margin: 8px 0 4px; }
  .t-eyebrow { font-size: 9.5px; letter-spacing: .28em; }
  .t-sub { font-size: 14px; letter-spacing: .12em; }
  .t-lede { font-size: 13px; line-height: 1.95; margin: 14px auto 18px; }
  .t-lede br { display: none; }
  .t-scenarios { grid-template-columns: 1fr; gap: 8px; }
  .t-sc { padding: 11px 13px; }
  .t-sc b { font-size: 14px; }
  .t-sc small { font-size: 11px; line-height: 1.6; }
  .t-actions { gap: 8px; }
  .t-btn { padding: 10px 16px; font-size: 13.5px; flex: 1 1 auto; }
  .t-hint { display: none; }

  /* 上の帯：詰める */
  #topbar { padding: 6px 8px; gap: 6px; }
  .brand { display: none; }   /* 幅が足りないので、携帯では年と図鑑だけ残す */
  #hud { flex: 0 0 auto; margin-left: auto; }
  #topbar > .tb-actions, #topbar .tb-right { flex: 0 0 auto; }
  #hud { gap: 6px; }
  #hud .hud-year span { font-size: 18px; }
  #hud .hud-year small { font-size: 9px; }
  #modebar { padding: 4px 8px; gap: 4px; }
  #modebar button { font-size: 11px; padding: 4px 7px; }

  /* 下の帯：字幕と入力だけを残す */
  #deck { padding: 0 8px 8px; }
  #narration { padding: 10px 12px; min-height: 0; border-radius: 10px; }
  #say { font-size: 15px; line-height: 1.85; }
  .transport { gap: 6px; flex-wrap: wrap; }
  .transport select, .transport button { font-size: 11.5px; padding: 4px 8px; }
  #suggest { gap: 5px; }
  #suggest button { font-size: 11.5px; padding: 5px 9px; }
  #ask input { font-size: 15px; padding: 9px 11px; }   /* 16px 未満だと iOS が拡大する場合があるため大きめ */
  #ask button { padding: 9px 12px; font-size: 13px; }
  #sources { margin-bottom: 4px; }
  #sources button { font-size: 10.5px; }

  /* 図鑑：下からのシート。高さを抑えて地図が見えるようにする */
  #codex { height: 72vh; max-height: 72vh; }
  .cx-modes { flex-wrap: wrap; }
  .cx-modes button { flex: 1 1 30%; font-size: 11px; }
  .ps-top { grid-template-columns: 78px 1fr; gap: 9px; }
  .portrait-frame { width: 78px; height: 98px; }
  .atlas-row { grid-template-columns: 40px repeat(12, 1fr); gap: 1px; }
  .atlas-cell { height: 10px; }
  .atlas-lens { font-size: 9px; }

  /* 章カードと分かれ道：全画面で縦に */
  #chapter-card .cc-inner { padding: 0 18px; }
  #chapter-card .cc-title { font-size: 26px; }
  #chapter-card .cc-lede { font-size: 13px; line-height: 1.9; }
  #chapter-card .cc-mystery { margin-top: 14px; padding: 12px 14px; }
  #chapter-card .cc-mystery p { font-size: 12.5px; line-height: 1.85; }
  #choice { padding: 14px; align-items: flex-start; overflow-y: auto; }
  #choice .ch-inner { padding: 40px 0 24px; }
  #choice .ch-prompt { font-size: 15px; }
  #choice .ch-opt { padding: 13px 14px; }
  #choice .ch-opt b { font-size: 15px; }
  #choice .ch-opt small { font-size: 12px; }

  /* 開発情報：下からのシート。既定では出さない */
  #devpanel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 46vh; }

  /* 設定：全画面 */
  #settings .s-inner { width: 100%; max-width: none; border-radius: 12px 12px 0 0; max-height: 88vh; }
  #settings .row { grid-template-columns: 1fr; gap: 4px; }

  /* 吹き出しは画面幅に収める */
  .term-tip { max-width: calc(100vw - 24px); }
}

.myst-rows { display: grid; gap: 6px; margin-top: 8px; }
.myst-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; }
.myst-row.on { border-color: var(--gold-2); }
.myst-row .b { color: var(--ink-3); } .myst-row.on .b { color: var(--gold); }
.myst-row b { display: block; font-size: 12.5px; font-weight: 500; }
.myst-row small { color: var(--ink-3); font-size: 11px; }

/* 知らせ（押すとその場所へ移る） */
#notices .n .n-ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--gold); opacity: .9; }
#notices .n .n-ic svg { width: 20px; height: 20px; }
#notices .n .n-body { min-width: 0; }
#notices .n .y { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; color: var(--gold); margin-bottom: 3px; }
#notices .n .n-text { font-size: 13px; color: var(--ink); line-height: 1.55; }
#notices .n .n-text b { font-weight: 500; }
#notices .n .n-kind { margin-left: 7px; font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); }
#notices .n .n-note { margin-top: 4px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.7; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#notices .n .n-go { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--gold); letter-spacing: .04em; }
#notices .n .n-x { background: none; border: 0; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
#notices .n .n-x:hover { color: var(--ink); }
#notices .n.act { cursor: pointer; }
#notices .n.act:hover { border-color: var(--gold); transform: translateX(-2px); }
#notices .n.found { border-left-color: #8fd3ff; } #notices .n.found .y, #notices .n.found .n-ic { color: #8fd3ff; }
#notices .n.combo { border-left-color: #e8c170; }
#notices .n.out { opacity: 0; transform: translateX(14px); }
@media (max-width: 700px) {
  #notices { display: flex; right: 8px; left: 8px; width: auto; top: auto; bottom: calc(var(--deck-h, 150px) + 8px); }
  #notices .n { padding: 9px 10px; }
  #notices .n .n-note { -webkit-line-clamp: 2; }
}

/* ビートの出典 */
#sources .src-chip { background: none; border: 1px solid var(--line); color: var(--ink-3); border-radius: 5px; padding: 2px 8px; font-size: 11px; cursor: pointer; font-family: var(--font-body); }
#sources .src-chip:hover { border-color: var(--gold); color: var(--gold); }
#sources .src-chip.wiki { border-color: rgba(143,211,255,0.35); color: #9ed0f0; }
#sources .src-chip.wiki:hover { border-color: #8fd3ff; color: #bfe4ff; }
#sources .src-chip.book { border-color: var(--gold-2); color: var(--gold); }
#sources .src-chip.evidence { border-color: rgba(232,193,112,0.4); color: var(--gold); }
#sources .src-chip.model { border-style: dashed; }

/* ============================================================
   カットシーン — 一枚絵でひと呼吸おく
   ============================================================ */
.cutscene { position: fixed; inset: 0; z-index: 240; background: #05090c; opacity: 0; transition: opacity 0.38s ease; cursor: pointer; overflow: hidden; }
.cutscene.in { opacity: 1; }
.cutscene.out { opacity: 0; }
.cut-art { position: absolute; inset: 0; }
.cut-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: saturate(0.8) contrast(1.04) brightness(0.62) sepia(0.18); }
.cutscene.in .cut-art img { animation: ken-burns 9s ease-out forwards; }
.cut-veil { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 34%, rgba(0,0,0,0) 22%, rgba(3,8,11,0.82) 100%),
              linear-gradient(to bottom, rgba(3,8,11,0.62) 0%, rgba(3,8,11,0.1) 26%, rgba(3,8,11,0.45) 52%, rgba(3,8,11,0.96) 88%); }
.cutscene.tone-dark .cut-art img { filter: saturate(0.5) contrast(1.15) brightness(0.6); }
.cut-bar { position: absolute; left: 0; right: 0; height: 8vh; background: #05090c; transition: transform 0.5s cubic-bezier(.2,.8,.3,1); }
.cut-bar.top { top: 0; transform: translateY(-100%); } .cut-bar.bottom { bottom: 0; transform: translateY(100%); }
.cutscene.in .cut-bar.top, .cutscene.in .cut-bar.bottom { transform: translateY(0); }
.cut-plate { position: absolute; left: 0; right: 0; bottom: calc(8vh + 26px); padding: 0 8vw; text-align: center;
  opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s; }
.cutscene.in .cut-plate { opacity: 1; transform: translateY(0); }
.cut-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.34em; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; }
.cut-rule { width: 0; height: 1px; margin: 0 auto 14px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.cutscene.in .cut-rule { animation: rule-open 0.7s cubic-bezier(.2,.8,.3,1) 0.4s forwards; }
.cut-line { font-family: var(--font-display); font-size: clamp(19px, 4.4vw, 32px); line-height: 1.6; color: #f3ecdb; text-shadow: 0 2px 22px rgba(0,0,0,0.9); }
.cut-sub { margin-top: 12px; font-size: clamp(12px, 2.6vw, 14px); color: #c9c0ad; text-shadow: 0 1px 12px rgba(0,0,0,0.9); }
.cut-credit { margin-top: 16px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: rgba(236,229,211,0.42); }
.cut-skip { position: absolute; right: 16px; bottom: calc(8vh + 8px); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(236,229,211,0.5); opacity: 0; animation: fade-in 0.6s ease 1.8s forwards; }

/* --- 出自の焼き印 ----------------------------------------------
   すべてのカード・図に必ず一つ。位置と形を固定して、書いた人が毎回言い方を変えられないようにする。
   隠さない（ホバーで出す等の逃げをしない）。枠が与える権威は、枠の中で打ち消す。 */
.prov { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 0;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--ink-3); }
.prov-mark { flex: none; padding: 1px 6px; border: 1px solid currentColor; border-radius: 2px;
  font-size: 9.5px; letter-spacing: 0.14em; }
.prov-note { letter-spacing: 0.02em; }
.prov-actual { color: #7fb3a4; } .prov-replica { color: #9fb0c4; } .prov-restored { color: #c0a870; }
.prov-authored { color: #b09a78; } .prov-guess { color: #b08a8a; }
.quote-fig { margin: 12px 0; }
.quote-fig .pquote { margin-bottom: 0; }

/* --- 時代の外（盤を降ろす） ------------------------------------
   訊かれた年がこの盤の範囲外のとき、地球儀を薄暗くして舞台から降ろす。
   黙って1600年に丸めた地球儀を「その年の絵」として出さないための処置。 */
#stage.off-era > #globe-canvas, #stage.off-era > #globe-svg { opacity: 0.16; filter: grayscale(0.7); transition: opacity 0.6s ease, filter 0.6s ease; }
#stage.off-era::after { content: attr(data-off-era); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 2px; padding: 10px 18px; background: var(--surface);
  white-space: nowrap; pointer-events: none; }

/* --- 順序の図（一本の軸＋縦組みの二系列） ----------------------
   縦組みは日本語の利点。横軸の上に長いラベルを並べても、回転も省略も要らない。 */
.sq-wrap, .tp-wrap { margin: 12px -6px 10px; }
.sq-svg, .tp-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sq-axis { stroke: var(--ink); stroke-width: 3.4; stroke-linecap: butt; }
.sq-mh { fill: var(--ink); }
.sq-step, .sq-pre, .sq-end, .sq-lane {
  writing-mode: vertical-rl; text-orientation: upright;
  text-anchor: middle; dominant-baseline: central;
  font-family: var(--font-display); letter-spacing: 0.06em; }
.sq-step { font-size: 13px; fill: var(--ink); animation: fade-in 0.4s ease var(--d) both; }
.sq-pre { font-size: 13px; fill: var(--danger); font-weight: 600; }
.sq-end { font-size: 14px; fill: var(--gold); }
.sq-lane { font-size: 10px; fill: var(--ink-3); letter-spacing: 0.24em; writing-mode: horizontal-tb; text-orientation: mixed; font-family: var(--font-mono); }

/* --- 隣り合わせの図（地理を捨てて、順序だけ残す） --------------- */
.tp-seg { fill: var(--c); fill-opacity: 0.34; stroke: var(--c); stroke-width: 1.4; stroke-opacity: 0.85;
  transform-origin: center; animation: tp-in 0.5s cubic-bezier(.2,.8,.3,1) var(--d) both; }
@keyframes tp-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.tp-label { font-family: var(--font-display); font-size: 13px; fill: var(--ink); text-anchor: middle; dominant-baseline: central;
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.05em; paint-order: stroke;
  stroke: var(--surface-solid); stroke-width: 3px; stroke-linejoin: round;
  animation: fade-in 0.4s ease var(--d) both; }
.tp-center { font-family: var(--font-display); font-size: 12px; fill: var(--ink-3); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.16em; }
.tp-span { stroke: var(--ink-3); stroke-width: 1.2; marker-start: none; }
.tp-spanlabel { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-3); text-anchor: middle; letter-spacing: 0.16em; }
@media (prefers-reduced-motion: reduce) {
  .tp-seg, .tp-label, .sq-step { animation: none; opacity: 1; }
}

/* --- 全画面の板（幕間と同じ殻に乗る型たち） ---------------------
   比率は docs/frame-grammar.md の実測にそろえている。枠＝ビューポート。 */
.cut-art.plain { background:
    radial-gradient(ellipse at 50% 30%, rgba(60,44,20,0.0), rgba(4,8,11,0.6) 100%),
    repeating-linear-gradient(101deg, rgba(120,100,70,0.035) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #1a2228, #0a1014); }
.cut-credit.float { position: absolute; right: 16px; top: calc(8vh + 10px); margin: 0;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: rgba(236,229,211,0.42); }

/* 肖像＋二行の主張 — B 40:01。板の幅は文字ぶんだけ。行ごとに打ち出される。 */
.cut-veil.veil-claim { background:
    linear-gradient(to bottom, rgba(3,8,11,0.5) 0%, rgba(3,8,11,0.06) 24%, rgba(3,8,11,0.5) 58%, rgba(3,8,11,0.95) 92%); }
.claim-plate { position: absolute; left: 0; right: 0; bottom: calc(8vh + 13vh); padding: 0 7vw;
  display: flex; flex-direction: column; align-items: center; gap: 0.7vh; }
.claim-line { display: inline-block; background: #f6f1e4; color: #14110b;
  font-family: var(--font-body); font-weight: 700; font-size: clamp(17px, 5.2vh, 40px); line-height: 1.34;
  padding: 0.28em 0.6em; border-radius: 2px; box-shadow: 0 6px 26px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(10px) scaleX(0.97); transform-origin: left center;
  transition: opacity 0.34s ease var(--d), transform 0.34s cubic-bezier(.2,.8,.3,1) var(--d); }
.cutscene.in .claim-line { opacity: 1; transform: none; }
.claim-who { position: absolute; left: 0; right: 0; bottom: calc(8vh + 4.4vh); text-align: center;
  opacity: 0; transition: opacity 0.5s ease 0.95s; }
.cutscene.in .claim-who { opacity: 1; }
.cw-name { font-family: var(--font-display); font-size: clamp(13px, 2.6vh, 20px); letter-spacing: 0.3em; color: #f3ecdb; text-shadow: 0 2px 16px rgba(0,0,0,0.9); }
.cw-role { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(236,229,211,0.55); }

/* 巨大な一語 — B 1:51。文字高は枠高の30%。半透明にしない。 */
.cut-veil.veil-stamp { background: linear-gradient(to bottom, rgba(3,8,11,0.35), rgba(3,8,11,0.2) 40%, rgba(3,8,11,0.9)); }
.cut-k-stamp .cut-art img { filter: saturate(0.12) contrast(1.2) brightness(0.74); }
.stamp-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); text-align: center;
  font-family: var(--font-display); font-weight: 700; line-height: 1; color: #0c0a07;
  font-size: clamp(56px, 30vh, 260px); letter-spacing: 0.02em;
  text-shadow: 0 0 44px rgba(255,255,255,0.28); }
.stamp-word[data-n="1"] { font-size: clamp(90px, 42vh, 340px); }
.stamp-word[data-n="4"], .stamp-word[data-n="5"], .stamp-word[data-n="6"] { font-size: clamp(40px, 22vh, 190px); }
.stamp-word i { display: inline-block; font-style: normal; opacity: 0; transform: scale(1.5);
  transition: opacity 0.26s ease var(--d), transform 0.36s cubic-bezier(.2,1.5,.4,1) var(--d); }
.cutscene.in .stamp-word i { opacity: 1; transform: none; }
.stamp-caption { position: absolute; left: 0; right: 0; bottom: calc(8vh + 5vh); text-align: center;
  font-family: var(--font-display); font-size: clamp(12px, 2.6vh, 19px); letter-spacing: 0.32em;
  color: rgba(243,236,219,0.88); text-shadow: 0 2px 16px rgba(0,0,0,0.95);
  opacity: 0; transition: opacity 0.5s ease 0.8s; }
.cutscene.in .stamp-caption { opacity: 1; }

/* 原文＋現代語 — B 6:09:11。上がゴシックの訳、下が明朝の原文。 */
.cut-veil.veil-source { background: linear-gradient(to bottom, rgba(3,8,11,0.92) 0%, rgba(3,8,11,0.28) 34%, rgba(3,8,11,0.3) 56%, rgba(3,8,11,0.95) 100%); }
.src-modern, .src-original { position: absolute; left: 0; right: 0; padding: 0 8vw; text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95); opacity: 0; transition: opacity 0.6s ease; }
.src-modern { top: calc(8vh + 4vh); font-family: var(--font-body); font-size: clamp(14px, 3.4vh, 25px); line-height: 1.6; color: #f3ecdb; transition-delay: 0.4s; }
.src-original { bottom: calc(8vh + 7vh); font-family: var(--font-display); font-size: clamp(16px, 4.2vh, 32px); line-height: 1.7; letter-spacing: 0.08em; color: #ffe9b8; transition-delay: 0.85s; }
.cutscene.in .src-modern, .cutscene.in .src-original { opacity: 1; }
.src-cite { position: absolute; left: 0; right: 0; bottom: calc(8vh + 2.2vh); text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(236,229,211,0.5); }
.src-cite span { display: block; margin-top: 3px; color: rgba(236,229,211,0.34); letter-spacing: 0.08em; }

/* 吹き出し — B 2:31。引用が地の文と混ざらないための枠。 */
.cut-veil.veil-quote { background: linear-gradient(to bottom, rgba(3,8,11,0.45), rgba(3,8,11,0.15) 45%, rgba(3,8,11,0.92)); }
.qbubble { position: absolute; top: 26vh; max-width: 62vw; background: #f7f3e7; color: #14110b;
  border-radius: 14px; padding: 2.2vh 2.6vw; display: flex; flex-direction: column; gap: 0.5vh;
  box-shadow: 0 14px 44px rgba(0,0,0,0.5); opacity: 0; transform: translateY(12px) scale(0.97);
  transition: opacity 0.36s ease 0.3s, transform 0.4s cubic-bezier(.2,.9,.3,1) 0.3s; }
.qbubble.left { left: 8vw; } .qbubble.right { right: 8vw; }
.cutscene.in .qbubble { opacity: 1; transform: none; }
.qbubble span { font-family: var(--font-body); font-weight: 700; font-size: clamp(15px, 4.4vh, 34px); line-height: 1.38; }
.qtail { position: absolute; bottom: -16px; width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 18px solid #f7f3e7; }
.qbubble.left .qtail { left: 16%; } .qbubble.right .qtail { right: 16%; }

/* 比較 — B 6:41。2枚まで。3枚にすると比較ではなく一覧になる。 */
.cmp-title { position: absolute; left: 0; right: 0; top: calc(8vh + 3.2vh); text-align: center;
  font-family: var(--font-display); font-size: clamp(15px, 3.2vh, 24px); letter-spacing: 0.26em; color: var(--gold); }
.cmp-board { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-52%);
  display: flex; justify-content: center; align-items: stretch; gap: 6%; padding: 0 5vw; }
.cmp-panel { flex: 0 0 41%; max-width: 41%; padding: 3vh 1.6vw; text-align: center; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
  opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2,.8,.3,1); }
.cmp-panel.l { background: rgba(232,193,112,0.12); border: 1px solid rgba(232,193,112,0.42); color: #f3e6cc; transition-delay: 0.3s; }
.cmp-panel.r { background: rgba(127,179,201,0.12); border: 1px solid rgba(127,179,201,0.42); color: #dcecf3; transition-delay: 0.48s; }
.cutscene.in .cmp-panel { opacity: 1; transform: none; }
.cmp-emblem .ic-svg { width: clamp(26px, 6vh, 52px); height: clamp(26px, 6vh, 52px); }
.cmp-short { font-family: var(--font-mono); font-size: clamp(14px, 3.4vh, 26px); font-weight: 600; letter-spacing: 0.12em; color: var(--danger); }
.cmp-panel.r .cmp-short { color: #7fb3c9; }
.cmp-name { font-family: var(--font-display); font-size: clamp(16px, 4vh, 32px); line-height: 1.3; }
.cmp-face { width: clamp(44px, 11vh, 96px); height: clamp(44px, 11vh, 96px); border-radius: 50%; overflow: hidden; border: 1px solid rgba(236,229,211,0.3); }
.cmp-face img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.3) contrast(1.05); }
.cmp-who { font-family: var(--font-body); font-size: clamp(11px, 2.2vh, 16px); color: rgba(236,229,211,0.8); }
.cmp-note { margin: 0; font-family: var(--font-body); font-size: clamp(10.5px, 2vh, 14px); line-height: 1.6; color: rgba(236,229,211,0.62); }
.cmp-rows { position: absolute; left: 0; right: 0; bottom: calc(8vh + 3vh); padding: 0 8vw;
  opacity: 0; transition: opacity 0.5s ease 0.8s; }
.cutscene.in .cmp-rows { opacity: 1; }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.4vw;
  padding: 0.7vh 0; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: clamp(11px, 2.1vh, 15px); }
.cr-l { text-align: right; color: #f0dfba; } .cr-r { text-align: left; color: #cfe3ee; }
.cr-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); white-space: nowrap; }

/* 拡大インセット＋丸囲み — B 3:21。「この中に、この人がいた」 */
.cut-veil.veil-detail { background: linear-gradient(to bottom, rgba(3,8,11,0.3), rgba(3,8,11,0.08) 40%, rgba(3,8,11,0.9)); }
.det-ring { position: absolute; width: max(3.4vw, var(--rw)); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.92); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 22px rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 0.4s ease 0.5s; }
.cutscene.in .det-ring { opacity: 1; }
.det-inset { position: absolute; right: 5vw; top: calc(8vh + 5vh); width: 32vh; height: 32vh; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(255,255,255,0.92); box-shadow: 0 14px 44px rgba(0,0,0,0.6);
  opacity: 0; transform: scale(0.82); transition: opacity 0.42s ease 0.75s, transform 0.5s cubic-bezier(.2,.9,.3,1) 0.75s; }
.cutscene.in .det-inset { opacity: 1; transform: none; }
.di-img { width: 100%; height: 100%; background-repeat: no-repeat; filter: saturate(0.5) contrast(1.1); }
.det-label { position: absolute; right: 5vw; top: calc(8vh + 38.5vh); width: 32vh; text-align: center;
  font-family: var(--font-body); font-size: clamp(11px, 2.2vh, 16px); color: #f3ecdb; text-shadow: 0 2px 14px rgba(0,0,0,0.9);
  opacity: 0; transition: opacity 0.5s ease 1.05s; }
.cutscene.in .det-label { opacity: 1; }

/* ============================================================
   全画面パネル — 語りモード中、図のビート（page()）が右列の代わりに出す殻
   （docs/stage-focus.md §5）。殻は cutscene 共通のものを使う。中身は右列
   .cx-body 用に作られた html をそのまま流し込むので、幅・文字・余白だけを
   全画面向けに上書きする。cutscene 自体は明暗テーマに関わらず常に暗転
   （#05090c）なので、中の配色（.fboard・.battle-svg・.chart・.cx-body 系は
   すべてテーマ変数を直接使っている）も :root[data-theme="dark"] と同じ値に
   固定する。羊皮紙テーマのまま流し込むと、黒地に明テーマの淡い板が浮いて見える。 */
.cut-k-panel { display: flex; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; cursor: default; }
.cut-panel {
  --ocean: #10283a; --ocean-deep: #07141c; --land: #2b4340; --land-edge: #6f8d7c;
  --ink: #ece5d3; --ink-2: #bdb5a4; --ink-3: #847e72;
  --gold: #e8c170; --gold-2: #bd9138; --gold-deep: #8a6420; --silver: #cfd6e0;
  --surface: rgba(10, 24, 30, 0.8); --surface-2: rgba(14, 30, 36, 0.95); --surface-solid: #0f1e24;
  --line: rgba(236, 229, 211, 0.13); --line-strong: rgba(236, 229, 211, 0.3);
  width: 100%; max-width: min(880px, 92vw); margin: auto; padding: 9vh 4vw 8vh; }
.cut-panel-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; }
.cut-panel-body { color: var(--ink); opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s ease 0.16s, transform 0.45s ease 0.16s; }
.cutscene.in .cut-panel-kicker, .cutscene.in .cut-panel-body { opacity: 1; transform: none; }
.cut-panel-skip { position: fixed; right: 18px; top: 16px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; color: rgba(236,229,211,0.5); opacity: 0; animation: fade-in 0.6s ease 1.2s forwards; pointer-events: none; }

/* 右列（.cx-body）の型をそのまま使う。幅が2倍以上になる分、文字と余白を一段大きくする */
.cut-panel-body h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 3.4vw, 28px); line-height: 1.4; text-wrap: balance; }
.cut-panel-body .src { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.cut-panel-body blockquote { margin: 0 0 18px; padding: 14px 20px; border-left: 3px solid var(--gold);
  font-family: var(--font-display); font-size: 18px; line-height: 1.9; color: var(--ink); background: rgba(232,193,112,0.06); }
.cut-panel-body .note { font-size: 15px; color: var(--ink-2); line-height: 1.8; }
.cut-panel-body .note b { color: var(--ink); font-weight: 500; }
.cut-panel-body .body { font-size: 16px; line-height: 1.9; color: var(--ink); }
.cut-panel-body .related { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.cut-panel-body .related span, .cut-panel-body .tags span { padding: 4px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.cut-panel-body .related span, .cut-panel-body .tags span[data-city], .cut-panel-body .tags span[data-person], .cut-panel-body .tags span[data-topic] { cursor: pointer; }
.cut-panel-body .related span:hover, .cut-panel-body .tags span[data-city]:hover, .cut-panel-body .tags span[data-person]:hover, .cut-panel-body .tags span[data-topic]:hover { border-color: var(--gold); color: var(--gold); }
.cut-panel-body .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cut-panel-body .lens-tag { color: var(--lc); border-color: var(--lc); }

/* 要因の卓・合戦の局面帯・データの凡例 — 右列では11〜12px台だった本文を一段読みやすく。
   図（sq-svg/tp-svg/battle-svg/chart svg）は width:100% の流体なので、.cut-panel の
   幅が広がるだけで自然に大きくなる（ここでの上書きは不要）。 */
.cut-panel-body .fc-name { font-size: 16px; }
.cut-panel-body .fc-note { font-size: 13.5px; }
.cut-panel-body .fp-t { font-size: 17px; }
.cut-panel-body .battle-legend, .cut-panel-body .ph-ctrl, .cut-panel-body #ph-list li { font-size: 13.5px; }
.cut-panel-body .chart .legend { font-size: 13px; }

@media (max-width: 640px) {
  .cut-panel { padding: 7vh 5vw 6vh; }
  .cut-panel-skip { top: 10px; right: 12px; }
}

@media (max-width: 760px) {
  .cmp-board { flex-direction: column; align-items: center; gap: 1.4vh; top: 48%; }
  .cmp-panel, .cmp-panel.l, .cmp-panel.r { flex: 0 0 auto; max-width: 84vw; width: 84vw; padding: 1.6vh 4vw; }
  .cmp-face { display: none; }
  .det-inset { width: 24vh; height: 24vh; right: 4vw; }
  .det-label { width: 24vh; right: 4vw; top: calc(8vh + 30.5vh); }
  .qbubble { max-width: 80vw; left: 6vw; right: 6vw; }
}

@keyframes ken-burns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-1.6%, -1.2%); } }
@keyframes rule-open { to { width: min(320px, 62%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cutscene.in .cut-art img { animation: none; } .cut-rule { width: min(320px, 62%); } .cutscene.in .cut-rule { animation: none; }
}
@media (max-width: 640px) {
  .cut-bar { height: 5vh; } .cut-plate { bottom: calc(5vh + 34px); padding: 0 6vw; }
  .cut-skip { left: 0; right: 0; text-align: center; bottom: calc(5vh + 12px); }
}
.account-entry { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.account-entry small { color:var(--ui-muted); font-size:12px; }
#account-dialog { width:min(430px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--ui-line); border-radius:16px; color:var(--ui-ink); background:var(--ui-panel); box-shadow:0 24px 80px #0007; font-family:var(--font-body); }
#account-dialog::backdrop { background:#070b10b8; backdrop-filter:blur(6px); }
#account-dialog .account-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#account-dialog h2 { margin:0; font-size:24px; }
#account-dialog input { display:block; box-sizing:border-box; width:100%; padding:11px; margin:7px 0 3px; background:var(--ui-raised); color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:8px; font:inherit; }
#account-dialog label { display:block; margin-top:18px; }
#account-dialog small, #account-dialog .account-note { font-size:12px; color:var(--ui-muted); }
#account-dialog button { min-height:40px; padding:10px 14px; margin-top:12px; cursor:pointer; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-raised); color:var(--ui-ink); }
#account-submit { display:block; width:100%; background:var(--ui-accent) !important; color:var(--ui-accent-ink) !important; }
#account-dialog [hidden] { display:none !important; }
#account-error { color:#c86c5c; font-size:14px; }
#account-signup-note { font-size:13px; }

#account-code { display:block; padding:14px; background:var(--ui-raised); border:1px solid var(--ui-line); border-radius:8px; overflow-wrap:anywhere; user-select:all; font-family:monospace; font-size:16px; }
#account-security { border-top:1px solid var(--ui-line); margin-top:16px; }
#account-discard-logout { color:#c86c5c !important; }
#hx-launch { position:fixed; right:20px; bottom:245px; z-index:12; padding:11px 17px; border:1px solid #c6ad78; border-radius:24px; background:#17272a; color:#f5e8ce; font:500 13px sans-serif; cursor:pointer; box-shadow:0 4px 24px #0005; }
#hx-dialog { --hx-ink:#213a3c; --hx-muted:#607170; --hx-line:#d9dfd7; box-sizing:border-box; width:min(1320px,96vw); max-width:96vw; height:min(880px,94dvh); max-height:94dvh; padding:0; border:1px solid #9fac9e; border-radius:16px; background:#f5f3eb; color:var(--hx-ink); box-shadow:0 30px 100px #0008; font:14px/1.6 'IBM Plex Sans JP',sans-serif; }
#hx-dialog::backdrop { background:#06191dc9; backdrop-filter:blur(5px); }
#hx-dialog * { box-sizing:border-box; }
#hx-dialog button,#hx-dialog select,#hx-dialog input,#hx-dialog textarea { font:inherit; }
#hx-dialog button { border:1px solid var(--hx-line); border-radius:7px; color:var(--hx-ink); background:#fff9; padding:7px 11px; cursor:pointer; }
#hx-dialog button:hover { background:#e4ece4; }
#hx-dialog button:focus-visible,#hx-dialog input:focus-visible,#hx-dialog select:focus-visible,#hx-dialog textarea:focus-visible { outline:3px solid #b7772c; outline-offset:2px; }
#hx-dialog .hx-primary,#hx-dialog button[aria-pressed=true] { background:#254f50; color:white; border-color:#254f50; }
.hx-shell { display:flex; flex-direction:column; height:100%; }
.hx-header { display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--hx-line); }
.hx-brand { font-size:19px; font-weight:700; letter-spacing:.05em; margin-right:auto; }
.hx-brand small { display:block; color:var(--hx-muted); font-size:10px; letter-spacing:.16em; font-weight:400; }
.hx-main { overflow:auto; flex:1; padding:24px; }
.hx-intro { max-width:700px; margin:0 0 22px; color:var(--hx-muted); }
.hx-intro h2 { font-family:'Shippori Mincho',serif; font-size:30px; color:var(--hx-ink); font-weight:500; margin:0 0 8px; }
.hx-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#hx-dialog .hx-card { text-align:left; background:#fafbf7; padding:18px; min-height:135px; }
.hx-card .hx-number { font:12px monospace; color:#aa7339; }
.hx-card strong { display:block; font-size:18px; margin:7px 0; }
.hx-card span:last-child { color:var(--hx-muted); font-size:12px; }
.hx-topline { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.hx-topline h2 { margin:0; font:500 26px 'Shippori Mincho',serif; flex:1; }
.hx-badge { background:#e9e1cb; color:#6b5632; padding:3px 9px; border-radius:5px; font-size:11px; }
.hx-note { font-size:12px; color:#6f654e; margin:6px 0 14px; }
.hx-controls { display:flex; flex-wrap:wrap; gap:10px 18px; padding:12px; margin:12px 0; background:#eaece3; border-radius:8px; align-items:center; }
.hx-controls label { display:flex; gap:7px; align-items:center; font-size:12px; }
.hx-controls input[type=range] { width:140px; accent-color:#356768; }
.hx-controls input[type=number] { width:100px; padding:5px; border:1px solid #bac5b9; border-radius:4px; }
.hx-stage { min-height:300px; border:1px solid var(--hx-line); border-radius:10px; overflow:auto; background:#fafbf7; position:relative; }
.hx-stage svg { width:100%; height:auto; display:block; max-height:590px; }
.hx-stage svg text { font-family:'IBM Plex Sans JP',sans-serif; fill:#294347; font-size:13px; }
.hx-stage svg .hx-label { paint-order:stroke; stroke:#fafbf7; stroke-width:4px; stroke-linejoin:round; }
.hx-stage svg [data-select] { cursor:pointer; }
.hx-stage svg [data-node] { touch-action:none; cursor:grab; }
.hx-stage svg [data-node]:active { cursor:grabbing; }
.hx-detail { padding:12px 16px; border-left:3px solid #b08647; background:#eeeadc; margin-top:12px; white-space:pre-line; }
.hx-bottom { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.hx-help { color:var(--hx-muted); font-size:12px; margin:8px 0; }
.hx-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:22px; }
.hx-metric { padding:18px; border:1px solid var(--hx-line); border-radius:8px; }
.hx-metric strong { display:block; font:28px monospace; margin:7px 0; }
.hx-metric small { color:var(--hx-muted); }
.hx-warning { color:#984c32; }
.hx-source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; }
.hx-source { padding:18px; border:1px solid var(--hx-line); border-radius:8px; overflow-wrap:anywhere; }
.hx-source h3 { font-size:16px; margin-top:0; }
.hx-source h4 { font-size:11px; color:#997341; margin-bottom:3px; }
.hx-source p { margin:0 0 14px; }
#hx-dialog table { width:100%; border-collapse:collapse; font-size:13px; }
#hx-dialog th,#hx-dialog td { border-bottom:1px solid var(--hx-line); padding:11px 14px; text-align:left; }
#hx-dialog caption { text-align:left; padding:12px; color:var(--hx-muted); }
#hx-dialog details { margin-top:14px; }
#hx-dialog summary { cursor:pointer; color:var(--hx-muted); }
#hx-dialog textarea { width:100%; min-height:240px; padding:12px; background:#fff; border:1px solid #bfcbbf; border-radius:8px; font:12px/1.6 monospace; }
.hx-error { color:#a63c2e; white-space:pre-line; }
.hx-footer { border-top:1px solid var(--hx-line); padding:9px 22px; color:var(--hx-muted); font-size:11px; }
@media(max-width:760px) { .hx-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .hx-source-grid,.hx-metrics { grid-template-columns:1fr; } .hx-header { padding:12px; gap:6px; } .hx-main { padding:14px; } .hx-brand { font-size:16px; } .hx-header button { font-size:11px!important; padding:5px!important; } .hx-topline h2 { font-size:22px; } #hx-launch { right:12px; bottom:230px; } .hx-stage svg { min-width:620px; } }
@media(prefers-reduced-motion:reduce) { #hx-dialog * { scroll-behavior:auto!important; } }

#hx-launch { display: none !important; }

/* ============================================================
   歴史実験室の見た目を、本体の夜と金にそろえる（後勝ちで上書き）
   道具はカードではなく「装置の一覧」。押せるものは押せるように見せる。
   ============================================================ */
#hx-dialog {
  --hx-ink: #ece5d3; --hx-muted: #948b79; --hx-line: rgba(236,229,211,0.14);
  background: #0c161b; color: var(--hx-ink);
  border: 1px solid rgba(232,193,112,0.34); border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  background-image: radial-gradient(circle at 18% 0%, rgba(232,193,112,0.07), transparent 46%),
                    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
}
#hx-dialog::backdrop { background: rgba(4,9,14,0.82); backdrop-filter: blur(6px); }
#hx-dialog button { background: rgba(255,255,255,0.04); border: 1px solid var(--hx-line); color: var(--hx-ink); border-radius: 7px; transition: border-color .18s, background .18s, transform .18s; }
#hx-dialog button:hover { background: rgba(232,193,112,0.12); border-color: #e8c170; }
#hx-dialog .hx-primary, #hx-dialog button[aria-pressed=true] { background: rgba(232,193,112,0.18); border-color: #e8c170; color: #ffe7b0; }

.hx-header { padding: 14px 20px; border-bottom: 1px solid var(--hx-line); background: linear-gradient(180deg, rgba(232,193,112,0.08), transparent); }
.hx-brand { font-family: "Shippori Mincho", serif; font-weight: 500; letter-spacing: .14em; }
.hx-brand small { color: #e8c170; letter-spacing: .3em; font-size: 9.5px; }
.hx-intro h2 { color: var(--hx-ink); font-size: clamp(22px, 3.4vw, 30px); }
.hx-intro { color: var(--hx-muted); }

/* 道具の一覧：番号を階級章のように、名前を大きく、説明は小さく */
.hx-gallery { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
#hx-dialog .hx-card {
  position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--hx-line); border-radius: 10px; padding: 16px 16px 18px; min-height: 124px;
  overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s;
}
#hx-dialog .hx-card::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(232,193,112,0.16), transparent 70%); opacity: 0; transition: opacity .25s; }
#hx-dialog .hx-card:hover { transform: translateY(-3px); border-color: #e8c170; box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
#hx-dialog .hx-card:hover::after { opacity: 1; }
.hx-card .hx-number { display: inline-block; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .18em; color: #0d1a1f; background: #e8c170; padding: 2px 7px; border-radius: 3px; }
.hx-card strong { font-family: "Shippori Mincho", serif; font-size: 18px; font-weight: 500; color: var(--hx-ink); margin: 10px 0 6px; }
.hx-card span:last-child { color: var(--hx-muted); font-size: 12px; line-height: 1.7; }

.hx-badge { background: rgba(232,193,112,0.16); color: #e8c170; border: 1px solid rgba(232,193,112,0.3); }
.hx-note, .hx-help { color: var(--hx-muted); }
.hx-controls { background: rgba(255,255,255,0.035); border: 1px solid var(--hx-line); border-radius: 9px; }
.hx-controls input[type=range] { accent-color: #e8c170; }
.hx-controls input[type=number] { background: rgba(0,0,0,0.25); border: 1px solid var(--hx-line); color: var(--hx-ink); }
.hx-stage { background: rgba(4,10,14,0.55); border-color: var(--hx-line); }
.hx-stage svg text { fill: #d8d2c2; }
.hx-stage svg .hx-label { stroke: #0c161b; }
.hx-detail { background: rgba(232,193,112,0.08); border-left-color: #e8c170; color: var(--hx-ink); border-radius: 0 8px 8px 0; }
.hx-metric { background: rgba(255,255,255,0.04); border: 1px solid var(--hx-line); border-radius: 9px; }
.hx-footer { border-top: 1px solid var(--hx-line); color: var(--hx-muted); background: rgba(0,0,0,0.25); }
.hx-source, .hx-source-grid { color: var(--hx-muted); }
/* World Stage: one shared visual language for geography, actors and narrative. */
#world-stage { --ws-gold:#d9b777; --ws-pale:#eee7d4; --ws-muted:#9bada7; --ws-line:#c5ab703d; --ws-panel:#101e21ed; position:fixed; inset:0; z-index:15; display:none; overflow:hidden; color:var(--ws-pale); background:#071619; font:13px/1.65 'IBM Plex Sans JP',sans-serif; }
#world-stage.ws-open { display:block; }
#world-stage * { box-sizing:border-box; }
#world-stage button,#world-stage input,#world-stage select { font:inherit; }
#world-stage button { color:inherit; cursor:pointer; border:1px solid transparent; background:none; }
#world-stage button:hover { color:var(--ws-gold); }
#world-stage button:focus-visible,#world-stage input:focus-visible,#world-stage select:focus-visible { outline:2px solid var(--ws-gold); outline-offset:4px; }
#world-stage button:disabled { opacity:.3; cursor:default; }
#world-stage [hidden] { display:none!important; }
.ws-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex-shrink:0; }
.ws-top { position:absolute; inset:0 0 auto; height:72px; border-bottom:1px solid var(--ws-line); background:linear-gradient(180deg,#22302c,#101f22); display:flex; align-items:center; padding:0 24px; gap:28px; z-index:4; }
.ws-brand { font-family:Georgia,serif; color:var(--ws-gold); font-size:21px; letter-spacing:.16em; white-space:nowrap; }
.ws-brand small { display:block; font:9px 'IBM Plex Sans JP',sans-serif; letter-spacing:.3em; color:var(--ws-muted); }
.ws-topstats { display:flex; gap:26px; align-items:center; flex:1; }
.ws-topstat { display:flex; align-items:center; gap:9px; }
.ws-topstat .ws-icon { color:#c2a779; }
.ws-topstat strong { font:20px 'IBM Plex Mono',monospace; display:block; line-height:1.3; }
.ws-topstat small { font-size:9px; color:var(--ws-muted); display:block; }
.ws-top button { border:1px solid var(--ws-line)!important; padding:6px 11px; border-radius:3px; font-size:11px!important; }
.ws-cast { display:flex; gap:7px; }
#world-stage .ws-medal { position:relative; padding:2px; width:43px; height:48px; border:1px solid #9a8155; border-radius:45% 45% 40% 40%; background:#253d39; transition:transform .25s,border-color .25s; }
.ws-medal img { width:100%; height:100%; object-fit:cover; object-position:50% 23%; border-radius:inherit; filter:saturate(.7); }
#world-stage .ws-medal.ws-selected { border-color:#ffe0a0; box-shadow:0 0 16px #d0b4773a; transform:translateY(-3px); }
.ws-medal.ws-dead { opacity:.55; filter:grayscale(.8); }
.ws-modebar { position:absolute; top:72px; left:0; right:0; height:48px; display:flex; justify-content:center; gap:8px; align-items:stretch; border-bottom:1px solid #c5ab7024; background:#101e21b0; z-index:3; }
#world-stage .ws-modebar button { display:flex; gap:7px; align-items:center; font-size:11px; padding:0 16px; border-bottom:2px solid transparent; }
#world-stage .ws-modebar button[aria-pressed=true] { color:#efd49f; background:linear-gradient(0deg,#d9b7771d,transparent); border-bottom-color:var(--ws-gold); }
.ws-map { position:absolute; top:120px; bottom:183px; left:260px; right:286px; background:radial-gradient(ellipse,#163435 0%,#0a1e22 64%,#08191d 100%); overflow:hidden; }
.ws-map[data-mode=terrain] { background:radial-gradient(ellipse,#244347,#0b2024 75%); }
.ws-map[data-mode=population] { background:radial-gradient(ellipse,#192d2d,#061519 75%); }
.ws-map[data-mode=conflict] { background:radial-gradient(ellipse,#302f2c,#111d22 75%); }
.ws-map:after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 100px #0716199c; pointer-events:none; }
.ws-map svg.ws-geography,.ws-map canvas { position:absolute; inset:0; width:100%; height:100%; }
.ws-map canvas { pointer-events:none; }
.ws-map .ws-geography { touch-action:none; cursor:grab; }
.ws-map .ws-geography:active { cursor:grabbing; }
.ws-geography text { fill:#d5dfcc; font:10px 'IBM Plex Sans JP',sans-serif; paint-order:stroke; stroke:#0d2022; stroke-width:3px; stroke-linejoin:round; }
.ws-geography .ws-nation-label { font:13px 'Shippori Mincho',serif; letter-spacing:.12em; opacity:.68; }
.ws-geography [data-city],.ws-geography [data-polity] { cursor:pointer; }
.ws-map-tools { position:absolute; right:15px; top:14px; display:flex; gap:5px; z-index:2; }
#world-stage .ws-map-tools button { border:1px solid var(--ws-line); background:#112224e6; width:34px; height:32px; border-radius:3px; }
#world-stage .ws-map-tools button[data-projection] { width:auto; padding:0 9px; font-size:10px; }
.ws-compass { position:absolute; right:20px; bottom:68px; width:45px; height:60px; opacity:.55; pointer-events:none; color:var(--ws-gold); text-align:center; font:10px Georgia,serif; }
.ws-compass:after { content:""; display:block; margin:4px auto; width:20px; height:30px; background:linear-gradient(90deg,#cdb78a 50%,#637972 50%); clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%); }
.ws-legend { position:absolute; bottom:14px; left:20px; right:18px; font-size:10px; color:#a5b6ad; z-index:2; pointer-events:none; }
.ws-legend strong { color:var(--ws-gold); font-size:11px; display:block; letter-spacing:.12em; }
.ws-focus-label { position:absolute; top:20px; left:24px; z-index:2; pointer-events:none; max-width:70%; text-shadow:0 2px 10px #000; }
.ws-focus-label small { color:var(--ws-gold); font-size:9px; letter-spacing:.2em; display:block; }
.ws-focus-label strong { font:24px 'Shippori Mincho',serif; }
.ws-left { position:absolute; top:132px; bottom:196px; left:16px; width:230px; display:flex; flex-direction:column; gap:13px; overflow:auto; scrollbar-width:thin; scrollbar-color:#536056 transparent; }
.ws-right { position:absolute; top:132px; bottom:196px; right:16px; width:255px; overflow:auto; scrollbar-width:thin; scrollbar-color:#536056 transparent; }
.ws-panel { background:linear-gradient(135deg,#1c2d2bdc,#0c1a1eed); border:1px solid var(--ws-line); border-radius:3px; position:relative; }
.ws-panel:before { content:""; position:absolute; width:20px; height:20px; left:-1px; top:-1px; border-left:2px solid #ba9f69; border-top:2px solid #ba9f69; pointer-events:none; }
.ws-panel-head { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--ws-line); color:var(--ws-gold); font-size:10px; letter-spacing:.11em; }
.ws-panel-body { padding:12px 14px; }
.ws-chapter-number { font:10px 'IBM Plex Mono',monospace; color:var(--ws-gold); letter-spacing:.15em; }
.ws-scene-title { margin:8px 0 14px; font:24px/1.55 'Shippori Mincho',serif; letter-spacing:.035em; }
.ws-story-art { height:105px; position:relative; overflow:hidden; border-top:1px solid var(--ws-line); border-bottom:1px solid var(--ws-line); }
.ws-story-art img { width:100%; height:100%; object-fit:cover; object-position:60% 38%; }
.ws-story-art small { position:absolute; right:4px; bottom:2px; font-size:8px; color:#eee5cd; text-shadow:0 1px 4px #000; }
.ws-issue { padding:12px 14px; font-size:11px; color:#becbc2; }
.ws-issue b { color:var(--ws-gold); display:block; font-size:9px; font-weight:400; letter-spacing:.13em; margin-bottom:4px; }
.ws-metric-name { font-size:10px; color:#aab9af; padding:11px 12px 0; line-height:1.5; }
.ws-metric-value { font:27px 'IBM Plex Mono',monospace; color:#efddb3; padding:4px 12px; }
.ws-metric-value small { font:10px sans-serif; color:var(--ws-muted); margin-left:5px; }
.ws-chart { width:100%; height:80px; display:block; }
.ws-chart text { font:8px sans-serif; fill:#8fa49a; }
.ws-metric-note { color:#8da097; font-size:9px; padding:0 12px 10px; }
.ws-portrait { height:182px; overflow:hidden; position:relative; background:radial-gradient(ellipse at 50% 30%,#425049,#122526 70%); }
.ws-portrait>img { height:100%; width:100%; object-fit:cover; object-position:50% 22%; filter:saturate(.65); }
.ws-portrait:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#132326 0%,transparent 45%); }
.ws-portrait .ws-name { position:absolute; bottom:10px; left:14px; right:12px; z-index:1; }
.ws-name h2 { margin:0; font:22px 'Shippori Mincho',serif; }
.ws-name small { color:#ccb787; font-size:10px; }
.ws-status { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.ws-status span { padding:2px 7px; border:1px solid #bda66e4a; color:#d9bf8b; font-size:10px; }
.ws-status span.ws-dead { color:#9da59f; border-color:#6d7c7340; }
.ws-tagline { font:13px/1.8 'Shippori Mincho',serif; color:#d0d3c5; margin:8px 0 12px; }
.ws-actor-tabs { display:flex; border-bottom:1px solid var(--ws-line); }
#world-stage .ws-actor-tabs button { flex:1; padding:8px; font-size:10px; border-bottom:2px solid transparent; }
#world-stage .ws-actor-tabs button[aria-pressed=true] { color:var(--ws-gold); border-bottom-color:var(--ws-gold); }
.ws-event { border-left:1px solid #bca2655c; padding:0 0 11px 11px; position:relative; color:#879f94; font-size:10px; }
.ws-event:before { content:""; width:5px; height:5px; background:#61796f; border-radius:50%; position:absolute; left:-3px; top:6px; }
.ws-event.ws-past { color:#ccd3c6; }
.ws-event.ws-past:before { background:#d2b67c; }
.ws-event b { font:10px monospace; color:#c3a56f; margin-right:6px; }
.ws-relation { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #c5ab7022; }
.ws-relation .ws-medal { width:36px!important; height:42px!important; flex-shrink:0; }
.ws-relation small { display:block; font-size:9px; color:var(--ws-muted); }
.ws-relation strong { font-size:11px; font-weight:400; }
.ws-actions { display:flex; gap:6px; margin:12px 0 0; }
#world-stage .ws-actions button { flex:1; font-size:10px; border:1px solid var(--ws-line); background:#26392f; padding:6px; border-radius:3px; }
.ws-city-name { font:22px 'Shippori Mincho',serif; margin:0 0 4px; }
.ws-city-pop { color:var(--ws-gold); font:25px monospace; margin:7px 0; }
.ws-city-pop small { font:10px sans-serif; }
.ws-goods { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.ws-good { border:1px solid var(--ws-line); font-size:10px; padding:3px 6px; color:#c6cbbd; }
.ws-city-buttons { display:flex; flex-wrap:wrap; gap:4px; }
#world-stage .ws-city-buttons button { color:#bfcbbc; font-size:10px; padding:3px 5px; border:1px solid #8196773b; }
.ws-bottom { position:absolute; bottom:0; left:0; right:0; height:183px; background:linear-gradient(180deg,#0e2023fa,#101e20); border-top:1px solid var(--ws-line); padding:12px 26px; z-index:4; }
.ws-narration { display:flex; gap:15px; align-items:flex-start; min-height:53px; max-width:1120px; margin:auto; }
.ws-narration .ws-icon { color:var(--ws-gold); margin-top:4px; }
.ws-narration p { margin:0; font:15px/1.9 'Shippori Mincho',serif; color:#e0e1cf; }
.ws-transport { margin:9px auto; display:flex; align-items:center; gap:12px; max-width:1120px; }
#world-stage .ws-play { border:1px solid #b79859; border-radius:3px; color:var(--ws-gold); width:76px; height:31px; background:#d9b7770e; font-size:11px; }
#world-stage .ws-transport select { background:#132629; color:#bfcabb; border:1px solid var(--ws-line); padding:4px; font-size:10px; }
.ws-year { font:20px 'IBM Plex Mono',monospace; color:var(--ws-gold); min-width:72px; }
.ws-time { flex:1; min-width:80px; accent-color:#d4b574; }
.ws-beats { display:flex; max-width:1120px; margin:auto; gap:6px; }
#world-stage .ws-beats button { flex:1; border-top:2px solid #71827855; padding:5px 0 0; font-size:9px; color:#92a59b; }
#world-stage .ws-beats button[aria-current=true] { border-top-color:var(--ws-gold); color:#e8d1a2; }
.ws-progress { height:2px; width:100%; position:absolute; top:0; left:0; transform-origin:left; background:var(--ws-gold); }
.ws-toast { position:absolute; top:128px; left:50%; transform:translateX(-50%); background:#253d35f5; border:1px solid var(--ws-line); padding:8px 15px; z-index:6; font-size:11px; max-width:75%; }
.ws-source-drawer { position:absolute; top:128px; bottom:193px; right:16px; width:420px; max-width:calc(100% - 32px); z-index:6; padding:20px; background:#132527fa; border:1px solid var(--ws-line); overflow:auto; box-shadow:0 10px 70px #0008; }
.ws-source-drawer h3 { font:21px 'Shippori Mincho',serif; color:var(--ws-gold); margin:0 0 12px; }
.ws-source-drawer p { font-size:12px; color:#c5cebe; }
.ws-source-drawer a { color:#dbbb80; }
.ws-source-drawer>button { float:right; }
#world-stage .ws-source-drawer>#codex { position:relative; inset:auto; width:100%; max-width:100%; height:calc(100% - 30px); min-height:300px; transform:none; box-shadow:none; border:0; background:transparent; z-index:auto; }
.ws-process { position:absolute; left:7%; right:7%; bottom:65px; display:flex; align-items:center; justify-content:center; gap:12px; z-index:2; pointer-events:none; }
.ws-process-node { width:80px; text-align:center; color:#d7c498; font-size:10px; }
.ws-process-node .ws-icon { display:block; margin:0 auto 8px; width:40px; height:40px; padding:8px; background:#13292ac9; border:1px solid #c3a463; border-radius:50%; }
.ws-process-arrow { color:#c3a463; }
.ws-pop-groups { display:flex; gap:6px; justify-content:space-around; padding:10px 0; border-top:1px solid var(--ws-line); }
.ws-pop-groups>div { color:#b3c0b3; font-size:9px; text-align:center; }
.ws-pop-groups .ws-icon { display:block; margin:auto auto 5px; color:#c6aa72; }
.ws-entry { display:none; position:fixed; left:18px; bottom:220px; z-index:13; color:#d9b777; border:1px solid #a88c57; background:#12282b; padding:10px 15px; border-radius:3px; cursor:pointer; }
#world-stage .ws-compact-switch { display:none; }
@media(max-width:1150px) { .ws-top { gap:15px; padding:0 16px; } .ws-topstats { gap:14px; } .ws-topstat:last-child { display:none; } .ws-cast .ws-medal { width:34px!important; height:41px!important; } .ws-left { width:200px; } .ws-right { width:220px; } .ws-map { left:225px; right:245px; } .ws-modebar { gap:2px; } #world-stage .ws-modebar button { padding:0 10px; } .ws-brand { font-size:17px; } .ws-scene-title { font-size:21px; } }
@media(max-width:850px) { .ws-left { display:none; } .ws-map { left:0; right:245px; } .ws-topstats { display:none; } .ws-cast { margin-left:auto; } .ws-brand small { font-size:8px; } #world-stage .ws-modebar button { font-size:9px; padding:0 7px; gap:4px; } .ws-modebar .ws-icon { width:17px; } .ws-narration p { font-size:12px; } .ws-bottom { padding:10px 16px; height:190px; } .ws-map,.ws-right { bottom:202px; } }
@media(max-width:600px) { .ws-top { height:62px; padding:0 10px; gap:6px; } .ws-brand { font-size:14px; } .ws-cast { gap:3px; } .ws-cast .ws-medal { width:27px!important; height:34px!important; } .ws-cast .ws-medal:nth-child(n+5) { display:none; } .ws-top button[data-exit] { font-size:9px!important; padding:5px!important; } .ws-modebar { top:62px; height:46px; overflow:auto; justify-content:flex-start; } #world-stage .ws-modebar button { flex-shrink:0; } .ws-map { top:108px; right:0; bottom:207px; } .ws-right { display:none; z-index:5; top:115px; bottom:215px; right:10px; width:255px; box-shadow:0 0 80px #000; } #world-stage.ws-panel-open .ws-right { display:block; } #world-stage .ws-compact-switch { display:block; position:absolute; right:12px; bottom:220px; z-index:5; background:#203630; border:1px solid var(--ws-line); padding:6px 10px; } .ws-map-tools { right:10px; top:10px; } .ws-focus-label { top:50px; left:14px; } .ws-focus-label strong { font-size:19px; } .ws-bottom { height:207px; padding:10px; } .ws-narration { min-height:76px; gap:6px; } .ws-narration p { font-size:12px; line-height:1.7; } .ws-year { font-size:15px; min-width:48px; } .ws-transport { gap:5px; } #world-stage .ws-play { width:56px; } #world-stage .ws-beats button { font-size:8px; } .ws-legend { font-size:8px; left:14px; bottom:8px; max-width:70%; } .ws-process { bottom:60px; gap:4px; } .ws-process-node { width:65px; font-size:9px; } }
@media(prefers-reduced-motion:reduce) { #world-stage * { transition:none!important; animation:none!important; } }
@media(max-width:600px) {
  .ws-brand { font-size:12px; flex:0 0 134px; letter-spacing:.11em; }
  .ws-brand small { font-size:7px; letter-spacing:.15em; }
  .ws-top>button { flex-shrink:0; padding:4px!important; }
  .ws-top>button .ws-icon { width:17px; height:17px; }
  .ws-top .ws-cast { min-width:0; gap:3px; }
  .ws-top .ws-cast .ws-medal { width:24px!important; height:31px!important; flex-shrink:0; }
  .ws-transport { display:grid; grid-template-columns:22px 62px 22px 44px 46px minmax(55px,1fr); gap:4px; margin:6px 0; }
  #world-stage .ws-transport button { white-space:nowrap; padding:3px; font-size:10px; }
  #world-stage .ws-play { width:62px; }
  .ws-time { width:100%; min-width:0; }
  .ws-transport [data-freeze] { grid-column:1 / 4; }
  .ws-transport [data-ask] { grid-column:4 / 7; }
  .ws-bottom { height:222px; }
  .ws-map { bottom:222px; }
  #world-stage .ws-compact-switch { bottom:235px; }
  .ws-right { bottom:270px; }
  .ws-beats { gap:3px; }
}
/* Warm library shell. The renderer keeps its own ocean palette. */
.book-experience { background:#15110e; color:#eadfc9; --paper:#eadcc2; --brass:#b99b66; }
.book-experience button { -webkit-tap-highlight-color:transparent; }
.book-experience #topbar,.book-experience #modebar,.book-experience #left,.book-experience #notices,.book-experience #chapter-card,.book-experience #hx-launch { display:none!important; }
.book-experience #open-book { position:absolute; inset:14px 24px calc(31vh + 38px); border:9px solid #473222; border-radius:14px 14px 9px 9px; background:#17232a; box-shadow:0 0 0 1px #aa8452,inset 0 0 0 2px #bca276,0 8px 0 -2px #d6c5a4,0 11px 0 -2px #796448,0 15px 28px #0009; isolation:isolate; }
.book-heading { position:absolute; top:0; left:0; right:0; height:47px; display:flex; align-items:center; gap:20px; padding:0 22px; background:linear-gradient(90deg,#241c16,#36291e,#241c16); border-bottom:1px solid #8a7146; z-index:4; color:#eadfc9; font-family:var(--font-display); }
.book-heading button { border:0; background:none; color:#c7b695; font:12px var(--font-body); padding:8px 0; }
#book-name { font-size:16px; letter-spacing:.12em; }
.book-experience #stage { inset:48px 3px 49px; overflow:hidden; background:var(--ocean-deep); }
.book-experience #globe-svg { overflow:hidden; }
.book-experience #timeline { position:absolute; bottom:0; left:20px; right:20px; height:46px; opacity:.9; }
.book-experience #timeline .tick text { fill:#c6b697; }
.book-experience #timeline .rail { stroke:#9c8155; }
.book-experience #timeline .ev,.book-experience #timeline .needle-cap { fill:#d0ab67; }
.book-experience #year-range { height:44px; }
.book-experience #deck { position:absolute; bottom:33px; left:25px; right:25px!important; height:30vh; min-height:190px; padding:0; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr); gap:0; border:1px solid #a98958; border-radius:5px; background:linear-gradient(100deg,#d6c4a3,#f0e3ca 47%,#c0a783 49.8%,#ebddc3 50.5%,#e0ceb1); box-shadow:0 5px 0 #473222,0 9px 16px #0006; color:#352b20; overflow:hidden; }
.book-experience #narration { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; min-width:0; min-height:0; padding:19px 27px 12px; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; gap:10px; }
.book-experience .narr-main { min-height:0; overflow:auto; flex:1; }
.book-experience #say { font:clamp(15px,1.3vw,20px)/1.9 var(--font-display); color:#352b20; max-width:unset; min-height:0; }
.book-experience #say a,.book-experience #say .term { color:#604522; }
.book-experience #narration .speaker { color:#7a6346; letter-spacing:.1em; font-size:10px; margin-bottom:9px; }
.book-experience #narration .speaker .dot { background:#977642; box-shadow:none; }
.book-experience .transport { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding-top:8px; border-top:1px solid #997f5438; }
.book-experience .mode-row { gap:5px; }.book-experience .mode-switch { display:none; }
.book-experience .transport button,.book-experience .transport select { border:1px solid #9d80544d; background:transparent; color:#5c472e; border-radius:3px; font-size:11px; padding:5px 8px; box-shadow:none; }
.book-experience .transport .primary { background:#4b3827; border-color:#4b3827; color:#efe4d0; }
#question-desk { display:flex; flex-direction:column; min-height:0; min-width:0; padding:18px 22px 14px; border-left:1px solid #98774b55; gap:10px; }
#question-desk header { display:flex; justify-content:space-between; align-items:center; font:14px var(--font-display); color:#5b432c; }
#question-desk header small { font:9px var(--font-body); letter-spacing:.15em; color:#907452; }
#last-question { font-size:12px; color:#806a50; margin:0; line-height:1.6; max-height:3.2em; overflow:auto; }
#last-question.asked { border-left:2px solid #a38353; padding-left:10px; color:#493821; }
.book-experience #suggest { display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:flex-start; overflow:auto; flex:1; min-height:0; gap:5px; margin:0; }
.book-experience #suggest button { font-size:11px; padding:5px 8px; background:#f4e9d4aa; color:#6b5236; border:1px solid #a88a5955; border-radius:3px; height:fit-content; white-space:normal; text-align:left; }
.book-experience #ask { display:flex; margin:0; gap:6px; padding:0; background:none; border:none; flex-shrink:0; }
.book-experience #ask input { width:0; flex:1; background:#fbf3e4a6; border:1px solid #a48c6877; color:#352b20; border-radius:4px; padding:11px; font-size:12px; }
.book-experience #ask input::placeholder { color:#927b5f; }
.book-experience #ask button { background:#483725; color:#f0e2c8; border:0; border-radius:4px; font-size:12px; padding:8px 13px; }
.book-experience #sources { max-height:35px; overflow:auto; font-size:10px; }
.reading-footer { position:absolute; bottom:5px; left:27px; right:27px; display:flex; justify-content:space-between; align-items:center; color:#a28d6b; font:9px var(--font-display); letter-spacing:.18em; height:21px; }
.reading-footer button { border:0; background:none; color:#b6a17f; font-size:11px; }
.book-experience #map-tools { right:12px; bottom:12px; opacity:.8!important; pointer-events:auto!important; }
.book-experience #focus-label { top:16px; left:20px; }
.book-experience #legend,.book-experience #compass { display:none; }
.book-experience .cutscene { position:absolute; inset:0; z-index:3; opacity:1; cursor:default; overflow:auto; background:radial-gradient(ellipse at 50% 25%,#263a42,#0b1820 90%); }
.book-experience .cut-panel { width:min(1080px,94%); max-width:unset; margin:auto; padding:25px 30px; min-height:100%; }
.book-experience .cut-panel-kicker { margin-bottom:8px; }
.book-experience .cut-panel-body,.book-experience .cut-panel-kicker { opacity:1; transform:none; }
.book-experience .cut-panel-body h3 { font-size:clamp(22px,2.5vw,36px); margin-bottom:16px; }
.book-experience .cut-panel-body .chart { height:auto; }
.book-experience .cut-panel-body .chart svg { width:100%; height:clamp(140px,29vh,340px); }
.book-experience .cut-panel-body .chart-wrap { width:100%; }
.book-experience .cut-panel-body .sq-svg,.book-experience .cut-panel-body .tp-svg,.book-experience .cut-panel-body .battle-svg { width:100%; max-height:32vh; }
.book-experience .cut-panel-skip,.book-experience .stage-ladder,.book-experience .cut-panel-body .related,.book-experience .cut-panel-body .cc-actions { display:none; }
.book-experience .cut-plate { max-width:80%; }.book-experience .cut-art { position:absolute; inset:0; }
.book-experience .cut-plate,.book-experience .claim-line,.book-experience .claim-who { opacity:1; transform:none; }
#chapter-drawer { position:fixed; z-index:100; right:24px; bottom:35px; width:min(420px,90vw); max-height:75vh; overflow:auto; background:#251d17; padding:25px; border:1px solid #ae8954; box-shadow:0 10px 60px #000a; }
#chapter-drawer h2 { font:20px var(--font-display); }#chapter-close { background:none; color:#cbb899; border:0; position:absolute; right:15px; top:20px; }
.book-experience #title { position:fixed; inset:0; display:block; z-index:40; background:radial-gradient(ellipse at 72% 50%,#79522c44,transparent 60%),linear-gradient(110deg,#0d1418,#191510 45%,#30241a); padding:0; overflow:hidden; }
.book-experience #title.hide { display:none; }
.title-copy { position:relative; z-index:2; padding:10vh 0 0 8vw; width:55%; }
.title-overline { font-size:9px; letter-spacing:.34em; color:#a59377; }
.title-copy h1 { font:clamp(44px,6.6vw,102px)/.96 Georgia,serif; letter-spacing:.10em; font-weight:400; color:#ecdfc4; margin:24px 0; text-shadow:0 4px 30px #000; }
.title-copy h1 span { display:block; font:11px var(--font-display); letter-spacing:.55em; margin-top:23px; color:#bba784; }
.title-copy .title-brand img { display:block; width:min(100%,550px); height:auto; }
.title-copy .title-brand span { letter-spacing:.18em; }
.title-tagline { font:14px/2 var(--font-display); color:#cbb99c; }
#title-menu { display:flex; flex-direction:column; gap:4px; margin-top:42px; width:330px; max-width:90%; }
#title-menu button { text-align:left; border:0; border-bottom:1px solid transparent; padding:13px 5px; color:#d7c8ac; background:transparent; font:19px var(--font-display); border-radius:0; }
#title-menu #title-start { border-bottom-color:#95754a; color:#f5e5bf; }
#title-start span { float:right; font:10px var(--font-body); margin-top:9px; color:#b89b70; }
#title-menu button:hover { color:#fff3d6; background:linear-gradient(90deg,#b88b4522,transparent); }
#title-menu #t-continue-info { display:none; }
.title-foot { position:absolute; bottom:30px; left:5vw; right:5vw; display:flex; justify-content:space-between; color:#b6a383; font:11px var(--font-display); letter-spacing:.18em; }
.library-scenery { position:absolute; inset:0 0 0 45%; perspective:1000px; }
.shelf-wall { position:absolute; inset:-10% -15% -10% 0; transform:rotateY(-13deg); background:linear-gradient(0deg,#09080799,transparent 40%,#0b090699),repeating-linear-gradient(0deg,transparent 0 220px,#1b120c 220px 237px,#705034 238px 241px,#23170f 243px 257px),repeating-linear-gradient(90deg,#1e211d 0 35px,#665039 36px 38px,#2d2018 39px 73px,#8b633a 74px 76px,#302925 77px 110px); box-shadow:inset 40px 0 80px #17130e; }
#library { position:fixed; inset:0; z-index:45; overflow:auto; padding:0 6vw; color:#dfd0b6; background:radial-gradient(ellipse at 50% 20%,#4b372144,transparent 65%),#181510; }
.library-header { height:77px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #9f7d4238; font:10px var(--font-body); letter-spacing:.15em; color:#a8977a; }.library-header button { border:0; background:none; color:#c8b591; font-size:12px; }
.library-intro { display:flex; justify-content:space-between; align-items:end; padding:45px 0 38px; gap:25px; }.library-intro small { font:12px var(--font-display); color:#ac9470; letter-spacing:.1em; }.library-intro h1 { font:32px var(--font-display); font-weight:400; margin:12px 0 0; letter-spacing:.15em; }
.book-search { width:340px; max-width:45%; display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #8f7753; }.book-search span { font-size:26px; color:#bca174; }.book-search input { width:100%; border:0; background:transparent; color:#eedec1; font-size:12px; outline-offset:8px; }
#book-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px; align-items:start; padding:25px 0 35px; border-bottom:10px ridge #5e4229; }
.shelf-item { min-width:0; }.book-cover { width:100%; aspect-ratio:.65; padding:10px; background:linear-gradient(90deg,#0008,transparent 9%,#ffffff09 12%,transparent 15%),var(--cover,#293f4c); color:#d6bd89; border:1px solid #a78d5b; border-radius:3px 6px 6px 3px; box-shadow:5px 3px 0 #bcab89,7px 4px 0 #49382b,12px 12px 24px #0008; transition:transform .3s,box-shadow .3s; }
.book-cover.available:hover { transform:translateY(-12px) rotate(-2deg); box-shadow:5px 3px 0 #d5c4a5,7px 4px 0 #49382b,0 15px 40px #c4974233; }.cover-border { height:100%; border:1px solid #c5a16977; display:flex; flex-direction:column; align-items:center; justify-content:space-around; padding:14px 8px; }.cover-border small { font:8px Georgia,serif; letter-spacing:.12em; }.cover-border h2 { font:clamp(16px,1.7vw,27px)/1.6 var(--font-display); writing-mode:vertical-rl; letter-spacing:.12em; margin:8px; }.cover-star { font-size:38px; }.cover-border p { font:9px var(--font-display); margin:0; }.book-cover.unwritten { border-color:#7b684744; cursor:default; opacity:.7; }.blank-ornament { font:46px var(--font-display); color:#c4a57555; }.shelf-caption { margin-top:23px; display:flex; flex-direction:column; gap:7px; font:13px var(--font-display); }.shelf-caption small { font:10px var(--font-body); color:#927e5d; }#library footer { text-align:center; padding:32px; color:#937e5d; font:12px var(--font-display); letter-spacing:.1em; }
body[data-screen="title"] #open-book,body[data-screen="library"] #open-book,body:not([data-screen="story"]) #deck,body:not([data-screen="story"]) .reading-footer { visibility:hidden; }
.book-experience #settings { z-index:150; }.book-experience #toast { z-index:160; }
@media(max-width:900px) { .book-experience #open-book { inset:10px 12px calc(37vh + 36px); }.book-experience #deck { left:13px; right:13px!important; height:36vh; grid-template-columns:1.3fr 1fr; }.book-experience #narration { padding:14px 17px 10px; }#question-desk { padding:14px; }#book-name { font-size:12px; }#book-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }.title-copy { width:60%; } }
@media(max-width:600px) { .title-copy { width:100%; padding:8vh 9vw; }.title-copy h1 { font-size:56px; }.title-tagline { font-size:12px; }.library-scenery { inset:0; opacity:.28; }.title-foot span:last-child { display:none; }#title-menu { margin-top:30px; }.book-experience #open-book { inset:7px 7px calc(44vh + 26px); border-width:6px; }.book-heading { height:36px; padding:0 10px; gap:10px; }#book-name { display:none; }.book-experience #stage { top:37px; bottom:37px; }.book-experience #timeline { height:38px; left:8px; right:8px; }.book-experience #deck { bottom:24px; left:8px; right:8px!important; height:43vh; display:flex; flex-direction:column; }.book-experience #narration { flex:1; min-height:0; padding:10px 14px; }.book-experience #say { font-size:14px; line-height:1.75; }.book-experience #narration .speaker { font-size:9px; margin-bottom:5px; }.book-experience .transport { gap:3px; padding-top:5px; }.book-experience .transport button { padding:4px 6px; font-size:10px; }#question-desk { flex:0 0 auto; padding:8px 12px; border-left:0; border-top:1px solid #997f5455; gap:6px; }#question-desk header,#last-question { display:none; }.book-experience #suggest { max-height:31px; flex-wrap:nowrap; }.book-experience #suggest button { white-space:nowrap; flex-shrink:0; font-size:10px; padding:4px 7px; }.book-experience #ask input { padding:8px; }.reading-footer { bottom:2px; left:12px; right:12px; font-size:7px; }.reading-footer>span:nth-child(2) { display:none; }.book-experience .cut-panel { padding:15px 12px; }.book-experience .cut-panel-body h3 { font-size:20px; }.library-header { height:60px; font-size:8px; }.library-intro { flex-direction:column; align-items:stretch; padding:30px 0 10px; gap:20px; }.library-intro h1 { font-size:27px; }.book-search { max-width:100%; width:100%; }#book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; }.cover-border h2 { font-size:22px; }.cover-border p { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { .book-experience *, .book-experience *:before { animation:none!important; transition:none!important; } }

.book-experience #title { background:linear-gradient(90deg,#080c0fd9,transparent 75%),var(--library-art) center/cover,#15110e; }
.library-scenery .shelf-wall { display:none; }
#library { background:linear-gradient(#15110ef0,#15110ee8),var(--library-art) center/cover fixed,#181510; }
.book-experience #stage:has(.cutscene) #focus-label,.book-experience #stage:has(.cutscene) #map-tools { display:none; }
.book-experience #map-tools { top:auto; }
.book-experience .cut-skip { display:none; }
.book-experience #narration .transport { width:100%; }
.book-experience #narration .mode-row { flex-direction:row; }
.book-experience #choice { position:absolute; inset:0; z-index:20; background:#111a20ed; padding:25px; overflow:auto; }
.book-experience .cut-k-source { display:flex; flex-direction:column; justify-content:center; padding:5% 8%; }
.book-experience .cut-k-source .src-modern,.book-experience .cut-k-source .src-original,.book-experience .cut-k-source .src-cite { position:relative; inset:auto; transform:none; opacity:1; z-index:2; max-width:100%; }
.book-experience .cut-k-source .src-modern { font-size:clamp(18px,2.1vw,30px); line-height:1.9; }
.book-experience .cut-k-source .src-original { font-size:14px; margin-top:20px; }
.book-experience .cut-k-source .src-cite { margin-top:20px; }
.book-experience .cut-k-source .cut-art { opacity:.3; }

.book-experience #narration .transport { flex-direction:row; }
.cover-art { width:85%; height:25%; background:linear-gradient(0deg,#162d3a77,transparent),var(--cover-art) center/cover; border:1px solid #a58c5e77; border-radius:50% 50% 0 0; }
.cover-star { font-size:20px; }
.book-experience #codex:not(.open) { visibility:hidden; }
.book-experience .cut-k-source .src-modern,.book-experience .cut-k-source .src-original { width:auto; flex-shrink:0; }
@media(max-width:600px) {
  .book-experience .cut-k-source { display:block; padding:22px 18px; }
  .book-experience .cut-k-source .src-modern { font-size:17px; line-height:1.8; }
  .book-experience .cut-k-source .src-original { display:none; }
  .book-experience .cut-k-source .src-cite { font-size:10px; line-height:1.6; }
  .book-experience .cut-k-source .cut-credit { display:none; }
}
/* One semantic scene = one complete camera frame. */
/* Chapter selection lives in the contents drawer; pictures use the full page. */
.book-experience #open-book #stage { bottom:0; }
.book-experience #timeline { display:none; }
.semantic-scene { display:flex; flex-direction:column; padding:clamp(14px,2vw,30px); gap:18px; }
/* Old scenery is decorative and defaults to invisible if animation is unavailable. */
.book-experience .cutscene.scene-departure,.scene-departure{opacity:0;pointer-events:none!important;z-index:4;transform-origin:center;overflow:hidden}
.scene-departure *{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.scene-departure{display:none!important}}
.ss-heading { flex:none; }.ss-heading small { color:#c7a774; font-size:10px; letter-spacing:.14em; }
.ss-heading h2 { margin:5px 0 0; color:#efe4cf; font:clamp(21px,2.5vw,34px)/1.35 var(--font-display); }
.ss-canvas { flex:1; min-height:0; position:relative; }
.ss-canvas>svg { width:100%; height:calc(100% - 18px); display:block; }
.ss-icon { width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; color:#d6af6d; }
.ss-comparison { display:grid; grid-template-columns:1fr 1fr; height:100%; align-content:center; gap:12px 24px; }
.ss-subject { text-align:center; min-width:0; padding:0 10px; }.ss-subject:nth-child(2) .ss-icon { color:#8fbfc7; }
.ss-subject h3 { font:clamp(18px,2vw,26px)/1.4 var(--font-display); margin:5px 0; color:#f1e3c8; }.ss-subject p { font-size:13px; margin:0; color:#c1c5c6; }
.ss-axis { grid-column:1 / -1; border-top:1px solid #cbb89133; padding-top:6px; text-align:center; }.ss-axis>small { color:#a3967d; font-size:10px; }.ss-axis>div { display:grid; grid-template-columns:1fr 1fr; gap:24px; color:#e8e0d1; font-size:15px; }
.ss-process { list-style:none; display:flex; align-items:stretch; justify-content:center; padding:0; margin:0; gap:18px; height:100%; }
.ss-process li { flex:1; min-width:0; align-self:center; position:relative; }.ss-process li+li:before { content:'→'; position:absolute; left:-17px; top:40px; color:#cfad72; }
.ss-number { display:block; color:#9e8a6a; font:11px monospace; }.ss-process h3 { color:#eee2ca; font-size:16px; margin:8px 0; }.ss-process p { color:#b9c1c5; font-size:13px; margin:0; line-height:1.7; }
.ss-portrait { display:flex; align-items:center; gap:6%; justify-content:center; height:100%; }.ss-portrait img { height:100%; max-width:44%; object-fit:contain; }.ss-portrait .ss-icon { width:35%; height:70%; }.ss-portrait>div { max-width:48%; }.ss-portrait h3 { color:#efdfc0; font:28px var(--font-display); }.ss-portrait p { color:#d6d6cd; font:17px/1.9 var(--font-display); }.ss-portrait small { font-size:9px; color:#a09480; }
.ss-bars { display:flex; flex-direction:column; justify-content:space-evenly; height:100%; gap:10px; }.ss-bar { display:grid; grid-template-columns:minmax(70px,1fr) 3fr minmax(60px,1fr); gap:14px; align-items:center; color:#ddd4c0; }.ss-bar>i { height:22px; background:linear-gradient(90deg,#bd9653 var(--bar),#ffffff0b var(--bar)); }.ss-bar>b { font:18px var(--font-mono); }.ss-bar small { font-size:10px; margin-left:4px; }
.ss-land { fill:#314948; stroke:#70928b; stroke-width:.65; }.ss-route { stroke:#deb878; stroke-width:2.5; fill:none; stroke-dasharray:6 4; }.ss-location { fill:#f4d598; stroke:#1a2b34; stroke-width:2; }.ss-canvas svg text { fill:#f4ead6; font:13px var(--font-body); paint-order:stroke; stroke:#10212c; stroke-width:4px; stroke-linejoin:round; }.ss-map-note { display:block; text-align:right; font-size:9px; color:#a9b2b4; }
.book-experience #say .cite-b { color:inherit; text-decoration:underline dotted #967a4b; text-underline-offset:5px; text-decoration-thickness:1px; cursor:help; border:0; background:none; }
@media(max-width:600px) {
  .book-experience #app { height:100dvh; }
  .book-experience #open-book { top:0; left:0; right:0; bottom:auto; height:43dvh; border:2px solid #8d7048; border-radius:0; box-shadow:none; }
  .book-experience .book-heading { height:34px; padding:0 12px; }.book-experience .book-heading button { padding:8px; font-size:12px; }
  .book-experience #stage { inset:35px 0 22px; }.book-experience #timeline { height:22px; left:12px; right:12px; bottom:0; }.book-experience #timeline svg { transform:translateY(-23px); }.book-experience #year-range { height:22px; }
  .book-experience #deck { top:43dvh; bottom:0; left:0; right:0!important; height:auto; min-height:0; border:0; border-radius:0; box-shadow:none; background:#f1e6d0; padding-bottom:env(safe-area-inset-bottom,0px); }
  .book-experience #narration { padding:14px 18px 10px; gap:8px; }.book-experience #say { font-size:16px; line-height:1.85; letter-spacing:.015em; }.book-experience #narration .speaker { font-size:10px; margin-bottom:8px; }.book-experience .narr-main { overscroll-behavior:contain; }
  .book-experience #narration .transport { flex-wrap:nowrap; gap:6px; }.book-experience .transport button { min-height:36px; font-size:12px; padding:6px 10px; }.book-experience .mode-row #speed { display:none; }.book-experience #voice-btn { width:36px; font-size:0; padding:0; }.book-experience #voice-btn:before { content:'♪';font-size:18px; }
  #question-desk { background:#e6d8bd; padding:9px 12px 11px; gap:8px; }.book-experience #ask input { font-size:16px; min-height:42px; padding:9px 10px; }.book-experience #ask button { min-width:56px; font-size:13px; }.book-experience #suggest { max-height:32px; }.book-experience #suggest button { min-height:28px; font-size:11px; padding:4px 9px; }
  .reading-footer { display:none; }.book-experience #focus-label { display:none; }.book-experience #map-tools { bottom:4px; right:4px; }.book-experience #map-tools button { min-height:30px; }
  .semantic-scene { padding:12px 14px; gap:8px; }.ss-heading small { display:none; }.ss-heading h2 { font-size:18px; line-height:1.4; }.ss-icon { width:42px; height:42px; }.ss-comparison { gap:7px 12px; }.ss-subject { padding:0; }.ss-subject h3 { font-size:16px; }.ss-subject p { font-size:10px; line-height:1.4; }.ss-axis>div { gap:12px; font-size:12px; }.ss-axis>small { font-size:9px; }
  .ss-process { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; }.ss-process li { align-self:start; }.ss-process .ss-icon { float:right; width:28px; height:28px; }.ss-process h3 { font-size:13px; margin:4px 0; }.ss-process p { font-size:10px; line-height:1.5; }.ss-process li+li:before { display:none; }.ss-number { font-size:9px; }
  .ss-portrait { gap:16px; }.ss-portrait h3 { font-size:20px; }.ss-portrait p { font-size:12px; line-height:1.8; }.ss-bar { grid-template-columns:minmax(65px,1.4fr) 2fr minmax(45px,1fr); gap:8px; font-size:11px; }.ss-bar>b { font-size:14px; }.ss-bar>i { height:17px; }.ss-map-note { font-size:8px; }.ss-canvas svg text { font-size:11px; }
  .book-experience .cut-panel { padding:12px 16px; }.book-experience .cut-panel-body h3 { font-size:19px; margin:4px 0 8px; }.book-experience .cut-panel-body .chart svg { height:22dvh; }.book-experience .cut-panel-kicker { display:none; }
}
@media(max-width:600px) and (max-height:680px) { .book-experience #open-book { height:39dvh; }.book-experience #deck { top:39dvh; }.book-experience #say { font-size:15px; line-height:1.7; }.book-experience #suggest { display:none; } }
.ss-stamp {position:absolute;bottom:5px;right:12px;font:10px var(--font-ui);color:#b7a78f;pointer-events:none}
.semantic-scene .ss-canvas {padding-bottom:15px}
.semantic-scene .ss-stamp {position:static;flex:none;text-align:right;line-height:1.2;font-size:9px}
.semantic-scene .ss-canvas {padding-bottom:0;overflow:auto}
@media(max-width:600px){
 .semantic-scene{gap:5px;padding:10px 14px 8px}
 .ss-comparison{gap:4px 10px;align-content:space-evenly}
 .ss-subject .ss-icon{width:30px;height:30px}
 .ss-subject h3{font-size:14px;margin:3px 0}
 .ss-axis{padding-top:3px}.ss-axis>div{font-size:11px;line-height:1.5}
 .ss-stamp{font-size:8px!important}
}
@media(max-width:600px) and (max-height:720px){
 .semantic-scene .ss-heading h2{font-size:16px;margin-top:0}
 .ss-subject .ss-icon{display:none}
 .ss-axis>small{display:block;line-height:1.3}
 .ss-process:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .ss-process:has(li:nth-child(3):last-child) .ss-icon{display:none}
}
.owned-api #settings .row:has(#provider-select),.owned-api #settings .row:has(#ds-key),.owned-api #settings .row:has(#ds-model),.owned-api #settings .row:has(#api-key),.owned-api #settings .row:has(#api-model),.owned-api #settings .row:has(#prose-model),.owned-api #settings .row:has(#pm-key),.owned-api #settings .row:has(#wiki-proxy){display:none}
.owned-api #settings .row:has(#web-search),.owned-api #settings .row:has(#depth-select),.owned-api #settings .row:has(#rag-toggle),.owned-api #settings .row:has(#style-select),.owned-api #settings .row:has(#think-select){display:none}
/* Dictionary opens only through a user's reference action, above the book shell. */
.book-experience #codex {position:fixed;z-index:120;top:65px;bottom:32px;height:auto;max-height:none}
@media(max-width:600px){.book-experience #codex{top:auto;bottom:0;left:0;right:0;width:100%;max-width:100%;height:72dvh;max-height:72dvh}}
/* Factor rows disclose their explanation on click, tap, Enter or Space. */
.fcard.fc-expandable{display:block;padding:0}
.fc-expandable summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;list-style:none;cursor:pointer;min-height:48px}
.fc-expandable summary::-webkit-details-marker{display:none}
.fc-expandable summary:focus-visible{outline:2px solid var(--c);outline-offset:2px;border-radius:3px}
.fc-expandable .fc-head{flex-wrap:wrap;gap:4px 10px}
.fc-more{font-size:19px;color:var(--c);padding:0 5px}
.fc-expandable[open] .fc-more{font-size:0}
.fc-expandable[open] .fc-more:after{content:'−';font-size:19px}
.fc-detail{padding:0 18px 15px 54px;border-top:1px solid #c9b78022}
.fc-detail p{font-size:14px;line-height:1.9;color:var(--ink);margin:12px 0 6px}
.fc-detail small{font-size:10px;color:var(--ink-3)}
.fcard.fc-expandable[open]{opacity:1}
@media(max-width:600px){.fc-detail{padding:0 14px 14px}.fc-detail p{font-size:14px}.fc-expandable summary{padding:10px 8px}.fc-expandable .fc-name{font-size:14px}}
/* References open only on deliberate activation, in native modal dialogs. */
#codex-modal{box-sizing:border-box;width:min(680px,calc(100vw - 28px));max-width:none;max-height:85dvh;margin:auto;padding:0;border:1px solid #a88b59;border-radius:12px;background:#f5ead5;color:#352e24;box-shadow:0 20px 90px #0009;overflow:hidden}
#codex-modal::backdrop{background:#071218a6;backdrop-filter:blur(3px)}
.book-experience #codex-modal #codex{position:relative;inset:auto;width:100%;max-width:none;height:min(720px,82dvh);max-height:82dvh;border:0;border-radius:0;transform:none;box-shadow:none;visibility:visible;background:#f5ead5;color:#352e24}
.book-experience #codex-modal #cx-body{overflow:auto;min-height:0;overscroll-behavior:contain}
.book-experience #say .term{color:#85600b;border:0;text-decoration:none;font-weight:500;display:inline;white-space:normal}
.book-experience #say .cite-b{cursor:pointer}.book-experience #say .cite-b .term{text-decoration:underline dotted #967a4b;text-underline-offset:5px;text-decoration-thickness:1px}.book-experience #say .term:focus-visible,.book-experience #say .cite-b:focus-visible{outline:2px solid #a07834;outline-offset:3px}
.ss-document{height:100%;margin:0;display:flex;align-items:center;gap:5%;justify-content:center}.ss-document>img,.ss-document>svg{height:100%;max-width:70%;min-width:0;object-fit:contain}.ss-document figcaption{max-width:28%;font:18px/1.7 var(--font-display);color:#dfcca4}.ss-document figcaption p{font:14px/1.8 var(--font-body);color:#c3ccc4}.ss-document figcaption small{font-size:11px}.ss-stamp a{color:inherit;text-decoration:underline}.ss-portrait-image{height:100%;max-width:44%;display:flex;align-items:center;justify-content:center;color:#bcb8a7;font-size:12px}.ss-portrait .ss-portrait-image img{max-width:100%;height:100%;object-fit:contain}
@media(max-width:600px){
 #codex-modal{width:calc(100vw - 20px);max-height:88dvh}.book-experience #codex-modal #codex{height:80dvh;max-height:80dvh}
 .ss-document{flex-direction:column;gap:8px}.ss-document>img,.ss-document>svg{max-width:100%;width:100%;min-height:0;flex:1;object-fit:contain}.ss-document figcaption{flex:none;max-width:100%;width:100%;font-size:11px}.ss-document figcaption p{font-size:11px;line-height:1.6;margin:3px 0}.ss-document figcaption small{font-size:9px}.ss-portrait-image{max-width:44%;font-size:10px}
}
#codex-modal {--ink:#352e24;--ink-2:#5b503f;--ink-3:#786a55;--gold:#82600e;--gold-2:#82600e;--line:#c6b58f;--bg-2:#e7dbc1;--surface:#eadfc7;--surface-2:#eadfc7;--ink-0:#352e24;--ink-1:#352e24}
#codex-modal .gen-fig img{max-height:260px;object-fit:contain;background:#e7dbc1}
#codex-modal .cx-btn{min-height:36px;min-width:36px}

/* Reading uses the full width, with a compact question bar underneath. */
@media(min-width:601px) {
 .book-experience #open-book { bottom:calc(37vh + 38px); }
 .book-experience #deck { height:36vh; display:flex; flex-direction:column; background:linear-gradient(100deg,#e0ceb1,#f0e3ca 50%,#e0ceb1); }
 .book-experience #narration { flex:1; padding:10px 24px 8px; gap:4px; }
 .book-experience #narration .speaker { margin-bottom:4px; }
 .book-experience .transport { padding-top:4px; }
 .book-experience #question-desk { flex:0 0 auto; padding:6px 24px; border-left:0; border-top:1px solid #997f5455; gap:4px; }
 .book-experience #question-desk header, .book-experience #last-question:not(.asked) { display:none; }
 .book-experience #suggest { flex:0 0 auto; flex-wrap:nowrap; max-height:28px; }
 .book-experience #suggest button { flex-shrink:0; white-space:nowrap; }
 .book-experience #ask input { padding:8px 11px; }
 .book-experience #sources { max-height:20px; margin:0; }
}

/* Collection gallery: a quiet, tactile cabinet of encountered knowledge. */
#title-menu #t-codex{display:flex;align-items:center;gap:16px;margin-top:22px;padding:16px 18px;border:1px solid #b79b6559;background:linear-gradient(120deg,#b59a6520,#13232355);color:#eadab7;text-align:left;transition:background .2s,transform .2s}
#title-menu #t-codex:hover{background:#a6874433;transform:translateX(4px)}
#title-menu #t-codex>span:nth-child(2){flex:1;font:17px var(--font-display)}
#title-menu #t-codex small{display:block;font:10px var(--font-body);color:#a89d86;margin-top:7px;letter-spacing:.06em}
#title-menu #t-codex .title-codex-symbol{font-size:30px;color:#c8ae73}
#codex-modal{width:min(1180px,calc(100vw - 64px));max-height:92dvh;border:1px solid #98805c;border-radius:5px;background:#142322;--ink:#eee5d1;--ink-2:#c1baa7;--ink-3:#a49d8b;--gold:#c9ad72;--gold-2:#c9ad72;--line:#b9a77838;--surface:#25322d;--surface-2:#182623}
.book-experience #codex-modal #codex{height:88dvh;max-height:88dvh;background:radial-gradient(ellipse at 50% 0,#30483e66,transparent 65%),#15231f;color:#eee5d1;border-radius:4px}
#codex-modal[open]{animation:cx-gallery-arrive .45s cubic-bezier(.2,.8,.2,1) both}
#codex-modal .cx-bar{padding:14px 24px;border-color:#c7b18330;background:#0d181788}
#codex-modal .cx-btn{border-radius:2px;min-width:40px;min-height:40px}
#codex-modal #cx-body{padding:28px 36px 24px}
.cx-gallery-hero{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:12px 0 30px;border-bottom:1px solid #ccb88344}
.cx-gallery-hero>div>small{font:10px var(--font-mono);letter-spacing:.3em;color:#bca477}
.cx-gallery-hero h2{font:clamp(27px,3vw,40px)/1.5 var(--font-display);letter-spacing:.13em;margin:14px 0 10px;color:#f0e6cc}
.cx-gallery-hero h2>span{display:block;font-size:12px;letter-spacing:.15em;margin-top:8px;color:#c4bda9}
.cx-gallery-hero p{font:12px var(--font-body);color:#8f9b90;margin:15px 0 0}
.cx-collection-count{display:flex;flex-direction:column;align-items:center;min-width:180px;padding:12px 24px;border-left:1px solid #ccb88330}
.cx-collection-count strong{font:64px/1 var(--font-display);color:#dec28a;font-variant-numeric:tabular-nums}
.cx-collection-count>span{font-size:11px;letter-spacing:.15em;margin-top:12px;color:#c4bda9}
.cx-collection-count small{font-size:10px;color:#ccb27d;margin-top:14px}
.cx-gallery-tools{display:flex;align-items:center;gap:20px;margin:24px 0 28px}
#codex-modal .cx-tabs{flex:1;margin:0;gap:6px}
#codex-modal .cx-tabs button{border-radius:2px;font-size:11px;padding:9px 12px;min-height:38px;transition:background .2s}
#codex-modal .cx-tabs button.on{background:#c6ab7920;border-color:#c6ab7999;color:#ead7b0}
.cx-search-wrap{display:flex;align-items:center;gap:8px;border-bottom:1px solid #a89c7366;width:260px;flex-shrink:0;color:#bdab82}
#codex-modal .cx-search{width:100%;border:0;border-radius:0;margin:0;background:transparent;color:#eee5d1;font-size:11px;padding:10px 2px;outline-offset:3px}
#codex-modal .cx-search::placeholder{color:#939d91}
.cx-shelf-heading{display:flex;justify-content:space-between;font:9px var(--font-mono);letter-spacing:.18em;color:#94a093;margin-bottom:14px}
#codex-modal .cx-index>.cx-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
#codex-modal .cx-card{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;overflow:hidden;border:1px solid #a99b704f;border-radius:3px;background:#e4d6b9;color:#292e26;box-shadow:0 5px 14px #0004;text-align:left;position:relative;transition:transform .22s,border-color .22s,box-shadow .22s;animation:cx-card-arrive .42s ease-out backwards;animation-delay:var(--card-delay)}
#codex-modal .cx-card:hover,#codex-modal .cx-card:focus-visible{transform:translateY(-6px);border-color:#e9cc8c;box-shadow:0 12px 28px #0008,0 0 0 1px #dfc48b66;outline:2px solid #c9ad7266;outline-offset:3px}
.cx-card-art{height:156px;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#71847555,transparent 65%),repeating-linear-gradient(45deg,transparent 0 11px,#b8ac7620 11px 12px),#273b34;border-bottom:1px solid #bda875}
.cx-card-art:after{content:'';position:absolute;inset:12px;border:1px solid #c9b37655;pointer-events:none}
.cx-card-art img{width:100%;height:100%;object-fit:contain;background:#203029;transition:transform .4s}
.cx-card:hover img{transform:scale(1.035)}
.cx-monogram{font:64px var(--font-display);color:#ddca9d;text-shadow:0 3px 20px #0006;border:1px solid #bca77e66;border-radius:50%;width:92px;height:92px;display:grid;place-items:center}
.cx-card-number{position:absolute;top:20px;left:21px;font:9px var(--font-mono);letter-spacing:.15em;color:#d0c399}
.cx-new{position:absolute;right:0;top:0;background:#d5b879;color:#283027;padding:7px 10px;font:9px var(--font-mono);letter-spacing:.15em;z-index:1}
.cx-card-copy{display:flex;flex-direction:column;gap:10px;padding:18px 18px 14px;flex:1}
.cx-card-copy>small{font:8px var(--font-mono);letter-spacing:.17em;color:#74674d}
.cx-card-copy>strong{font:20px/1.55 var(--font-display);overflow-wrap:anywhere}
.cx-card-copy>span{font:10px/1.6 var(--font-body);color:#6d6a59}
.cx-card-open{display:flex;justify-content:space-between;border-top:1px solid #87744833;margin:0 18px;padding:12px 0;font-size:10px;color:#6f644c}
.cx-card-open b{font-size:14px;font-weight:400}
.cx-gallery-foot{display:flex;justify-content:space-between;gap:15px;padding-top:26px;margin-top:28px;border-top:1px solid #bba16f33;font-size:10px;color:#929e90;letter-spacing:.06em}
.cx-gallery-foot>span:last-child{font:8px var(--font-mono);letter-spacing:.16em}
.cx-gallery-empty{grid-column:1/-1;text-align:center;padding:44px 16px 55px;border:1px solid #bca67533;background:#09161333}
.cx-gallery-empty>span{display:block;font-size:58px;color:#c3ad7d;margin-bottom:20px}
#codex-modal .cx-gallery-empty h3{font-size:21px;color:#e6dbc1}
.cx-gallery-empty p{font-size:12px;line-height:2;color:#9ea797;margin:16px 0 24px}
.cx-gallery-empty button{padding:12px 22px;background:#c1a36c20;color:#dfcba4;border:1px solid #b79b6577;border-radius:2px}
#codex-modal[data-view=detail]{width:min(780px,calc(100vw - 40px))}
#codex-modal[data-view=detail] #cx-body{padding:30px clamp(20px,5vw,60px);animation:cx-detail-arrive .25s ease-out both}
#codex-modal[data-view=detail] #cx-body h3{font-size:28px;margin-bottom:20px}
#codex-modal[data-view=detail] .body{font-size:15px;line-height:2.1;white-space:pre-line}
#codex-modal[data-view=detail] .gen-fig img{max-height:300px;background:#10201b}
#codex-modal[data-view=detail] a{color:#d6bb80}
@keyframes cx-gallery-arrive{from{transform:translateY(18px) scale(.975);opacity:.65}to{transform:none;opacity:1}}
@keyframes cx-card-arrive{from{transform:translateY(12px);opacity:.55}to{transform:translateY(0);opacity:1}}
@keyframes cx-detail-arrive{from{transform:translateX(10px);opacity:.6}to{transform:none;opacity:1}}
@media(max-width:900px){#codex-modal .cx-index>.cx-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cx-gallery-tools{flex-direction:column;align-items:stretch}.cx-search-wrap{width:100%}}
@media(max-width:600px){#codex-modal{width:calc(100vw - 16px);max-height:96dvh}.book-experience #codex-modal #codex{height:94dvh;max-height:94dvh}#codex-modal .cx-bar{padding:8px 12px}#codex-modal #cx-body{padding:16px}.cx-gallery-hero{gap:12px;padding:6px 0 22px}.cx-gallery-hero h2{font-size:25px;letter-spacing:.08em}.cx-gallery-hero h2>span{font-size:10px;line-height:1.8;letter-spacing:0}.cx-gallery-hero p{display:none}.cx-gallery-hero>div>small{font-size:8px}.cx-collection-count{min-width:96px;padding:8px 0 8px 12px}.cx-collection-count strong{font-size:44px}.cx-collection-count>span{font-size:9px;letter-spacing:0}.cx-collection-count small{font-size:8px}.cx-gallery-tools{margin:18px 0;gap:12px}#codex-modal .cx-index>.cx-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cx-card-art{height:120px}.cx-monogram{width:68px;height:68px;font-size:44px}.cx-card-copy{padding:13px 12px 10px;gap:7px}.cx-card-copy>strong{font-size:17px}.cx-card-copy>span{font-size:9px}.cx-card-open{margin:0 12px;font-size:9px}.cx-gallery-foot{line-height:1.7}.cx-gallery-foot>span:last-child{display:none}#title-menu #t-codex{margin-top:12px;padding:12px}#codex-modal[data-view=detail]{width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){#codex-modal[open],#codex-modal .cx-card,#codex-modal[data-view=detail] #cx-body{animation:none}#codex-modal .cx-card,.cx-card-art img,#title-menu #t-codex{transition:none}}

.source-rights{margin-top:1rem;padding:.8rem;border-top:1px solid #9d916966;font-size:.78rem;line-height:1.65;overflow-wrap:anywhere}
.source-rights dl{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:.35rem .6rem;margin:.6rem 0}
.source-rights dt{opacity:.7}.source-rights dd{margin:0}.source-rights p{font-size:inherit!important;margin:.5rem 0!important}
@media(max-width:420px){.source-rights dl{grid-template-columns:1fr}.source-rights dd{margin-bottom:.4rem}}

/* A semantic scene owns the stage; legacy exploration labels are not its data. */
.book-experience #stage:has(.cut-k-semantic) > :is(#globe-svg,#globe-canvas,#motion-canvas){visibility:hidden;pointer-events:none}

/* Semantic diagrams keep their content in document flow. Tall cards must not
   center into negative overflow in a short stage. */
.semantic-scene .ss-heading{min-height:0;max-height:30%;overflow:auto;overflow-wrap:anywhere;scrollbar-width:thin}
.semantic-scene .ss-heading h2{font-size:clamp(17px,2vw,25px)}
.semantic-scene .ss-process{height:auto;min-height:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));align-items:start;align-content:start}
.semantic-scene .ss-process li{align-self:start;overflow-wrap:anywhere}
.semantic-scene .ss-process li+li:before{display:none}
.semantic-scene .ss-process p{font-size:clamp(12px,1vw,14px);line-height:1.7}
.semantic-scene .ss-canvas{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:600px){.semantic-scene .ss-process{grid-template-columns:1fr!important}.semantic-scene .ss-process li{padding-bottom:12px;border-bottom:1px solid #d6bb7a30}}

.semantic-scene .ss-portrait{height:auto;min-height:100%;align-items:flex-start}.semantic-scene .ss-portrait p{overflow-wrap:anywhere}.semantic-scene .ss-portrait-image{min-height:64px}.semantic-scene .ss-portrait-image>.ss-icon{width:64px;height:64px}

/* Reserve both surfaces for every answer, independent of the selected book or
   visual type. Long content scrolls inside narration; it cannot cover the stage. */
.book-experience.answer-active[data-screen="story"]{--answer-divider:54dvh}
.book-experience.answer-active[data-screen="story"] #open-book{height:calc(var(--answer-divider) - 28px);bottom:auto}
.book-experience.answer-active[data-screen="story"] #open-book #stage{bottom:0}
.book-experience.answer-active[data-screen="story"] #timeline{display:none}
.book-experience.answer-active[data-screen="story"] #deck{top:var(--answer-divider);bottom:26px;height:auto;min-height:0}
.book-experience.answer-active[data-screen="story"] #suggest{display:flex}
@media(min-width:601px) and (max-height:650px){
 .book-experience.answer-active[data-screen="story"]{--answer-divider:48dvh}
}
@media(max-width:600px){
 .book-experience.answer-active[data-screen="story"]{--answer-divider:46dvh}
 .book-experience.answer-active[data-screen="story"] #open-book{height:var(--answer-divider)}
 .book-experience.answer-active[data-screen="story"] #deck{bottom:0}
}

#answer-limitations{font-size:11px;line-height:1.6;color:#79664a;margin-top:12px}#answer-limitations summary{cursor:pointer}#answer-limitations ul{padding-left:1.3em;margin:6px 0}

/* Reading controls and long text must stay within the paper on every viewport. */
.book-experience .mode-switch { display:flex; flex-wrap:wrap; }
.book-experience .mode-switch .on { background:#4b3827; color:#efe4d0; }
.book-experience .transport { flex-shrink:0; }
.book-experience #deck .narr-main { min-width:0; overflow:auto; overscroll-behavior:contain; }
.book-experience #say { overflow-wrap:anywhere; }
.book-heading { min-width:0; gap:10px; }
#book-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.book-heading button { flex-shrink:0; }
.cover-border { min-width:0; min-height:0; overflow:auto; }
.cover-border h2,.cover-border p,.shelf-caption { overflow-wrap:anywhere; }

/* Shelf cards use the artwork as the cover; the full title belongs in the caption. */
#book-grid { grid-template-columns:repeat(auto-fill,minmax(200px,240px)); gap:34px 30px; }
.book-cover { position:relative; display:block; aspect-ratio:.78; padding:7px; overflow:hidden; text-align:left; }
.book-cover .cover-art { display:block; width:100%; height:100%; border:0; border-radius:2px; background-color:var(--cover); background-size:cover; background-position:center; }
.shelf-caption { margin-top:20px; gap:8px; line-height:1.5; }
.shelf-caption .shelf-series { font:10px var(--font-body); letter-spacing:.12em; color:#bca174; }
.shelf-caption strong { font:400 18px/1.55 var(--font-display); color:#eadbc2; overflow-wrap:anywhere; }
.shelf-caption small { font:11px/1.5 var(--font-body); }
@media(max-width:600px) {
 #book-grid { grid-template-columns:minmax(0,220px); justify-content:center; gap:34px; }
 .shelf-caption strong { font-size:17px; }
}
@media(max-width:600px) {
 .book-experience #narration .transport { flex-wrap:wrap; }
 .book-experience .transport .mode-row { width:100%; display:flex; justify-content:space-between; }
 .book-experience .mode-row #speed { display:block; }
 .book-experience .transport .tbtns { margin-left:auto; }
 .book-experience .transport button { padding:4px 7px; min-height:30px; font-size:11px; }
}

/* Clear reading navigation: named actions, then page controls, then preferences. */
.book-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.book-heading .book-actions button,.book-heading #back-shelf { padding:6px 10px; min-height:38px; border:1px solid #bba27666; border-radius:5px; color:#f4e7cd; background:#ffffff0a; font:12px var(--font-body); white-space:nowrap; }
.book-experience #narration .transport { flex-direction:column; align-items:stretch; gap:7px; }
.book-experience .transport .tbtns { order:0; display:flex; align-items:center; gap:8px; width:100%; margin-left:0; }
#reading-position { margin-right:auto; white-space:nowrap; font:12px var(--font-mono); color:#695334; }
.book-experience .transport .mode-row { order:1; width:100%; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.book-experience .transport button { min-height:40px; font-size:12px; border-radius:5px; }
.book-experience #btn-play { background:transparent; color:#48331e; border-color:#8d724a; }
.book-experience #btn-next { background:#49331f; color:#fff0cf; }
.book-experience #voice-btn { width:auto; font:12px var(--font-body); padding:6px 9px; color:#49331f; }
.book-experience #voice-btn:before { display:none; }
.book-experience #voice-btn.on { background:#d1dfcc; border-color:#627d55; color:#263c22; }
.speed-label { display:flex; align-items:center; gap:5px; font:11px var(--font-body); color:#604c30; }
.book-experience .mode-row #speed { display:block; min-height:38px; background:#fff8e8; }
.book-experience .transport .mode-switch { border-radius:5px; }
.book-experience .transport .mode-switch button { border:0; border-radius:0; }
.book-experience :is(button,select,input):focus-visible { outline:3px solid #d39b32; outline-offset:3px; }
#question-desk #ask button { min-height:42px; white-space:nowrap; }
#chapter-drawer { z-index:125; }
@media(max-width:600px) {
 .book-experience .book-heading { height:48px; padding:4px 10px; display:flex; gap:5px; }
 .book-heading #book-name { display:none; }
 .book-heading #back-shelf { justify-self:auto; }
 .book-heading .book-actions { min-width:0; gap:5px; }
 .book-heading .book-actions button,.book-heading #back-shelf { min-height:40px; padding:6px 10px; font-size:12px; }
 .book-experience #stage { top:48px; }
 .book-experience .transport .mode-row { justify-content:space-between; gap:5px; flex-wrap:nowrap; }
 .book-experience .transport .tbtns { gap:5px; }
 .book-experience .transport button { min-height:38px; font-size:11px; padding:5px 8px; }
 .book-experience #voice-btn { min-width:72px; font-size:11px; padding:5px 7px; }
 .speed-label { gap:3px; font-size:10px; }
 .book-experience .mode-row #speed { max-width:77px; padding:4px; font-size:11px; }
 #reading-position { font-size:10px; }
 #chapter-drawer { left:12px; right:12px; bottom:12px; width:auto; max-height:80dvh; }
}
/* The artwork stays atmospheric; labels and filters do the navigation. */
#codex-modal .cx-bar { gap:8px; padding:10px 16px; background:#11251ff2; }
#codex-modal .cx-kind { min-width:0; flex:1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:12px; letter-spacing:0; }
#codex-modal .cx-btn { flex-shrink:0; min-height:42px; padding:6px 11px; color:#f8ebce; border-color:#b69d6b; border-radius:5px; font-size:12px; }
#codex-modal .cx-btn:disabled { opacity:.35; }
#codex-modal .cx-gallery-hero { padding:14px 18px; min-height:0; gap:12px; }
#codex-modal .cx-gallery-hero h2 { margin:0; font-size:30px; letter-spacing:.04em; }
#codex-modal .cx-gallery-hero p { display:block; margin:6px 0 0; font-size:12px; line-height:1.7; color:#e2d9bf; }
#codex-modal .cx-collection-count { min-width:84px; padding:2px 0 2px 16px; }
#codex-modal .cx-collection-count strong { font-size:36px; }
#codex-modal .cx-collection-count>span { font-size:10px; margin-top:4px; letter-spacing:0; }
#codex-modal .cx-collection-count small { display:none; }
#codex-modal .cx-gallery-tools { display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:16px; margin:16px 0; }
#codex-modal .cx-search-wrap { order:0; width:100%; box-sizing:border-box; border:1px solid #bfa36c; border-radius:6px; padding:0 12px; background:#f6edd9; color:#493d28; }
#codex-modal .cx-search { color:#312c21; min-height:44px; font-size:14px; }
#codex-modal .cx-search::placeholder { color:#73674e; opacity:1; }
#codex-modal .cx-tabs { order:1; gap:7px; }
#codex-modal .cx-tabs button { min-height:40px; padding:8px 11px; font-size:12px; color:#ded8c5; border-radius:5px; }
#codex-modal .cx-tabs button.on { background:#eedbbb; color:#322819; border-color:#eedbbb; }
#codex-modal .cx-tabs button.on b { color:#554a33; }
.cx-category-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; background:radial-gradient(ellipse at center,#ead9ae33,transparent 72%); color:#e5d0a3; }
.cx-category-icon .ic-svg { width:60px; height:60px; }
.cx-category-icon small { font:11px var(--font-body); letter-spacing:.1em; }
.cx-category-icon[hidden],.cx-card-art img[hidden] { display:none!important; }
#codex-modal .cx-card:focus-visible { outline:3px solid #ffe0a0; outline-offset:4px; }
#codex-modal .cx-card-copy>strong { line-height:1.5; }
@media(max-width:600px) {
 #codex-modal #cx-body { padding:14px; }
 #codex-modal .cx-bar { padding:8px 10px; gap:6px; }
 #codex-modal .cx-btn { min-height:42px; padding:6px 8px; font-size:12px; }
 #codex-modal .cx-gallery-hero { padding:14px 12px; }
 #codex-modal .cx-gallery-hero h2 { font-size:25px; }
 #codex-modal .cx-gallery-hero p { font-size:11px; }
 #codex-modal .cx-gallery-tools { padding:12px; gap:12px; margin:14px 0; }
 #codex-modal .cx-shelf-heading { font-size:10px; letter-spacing:.04em; }
 #codex-modal .cx-card-copy>strong { font-size:16px; }
}

.language-switch{border:1px solid #c9ae78;border-radius:3px;background:#222a27;color:#f1deb0;padding:7px 11px;font:600 12px Georgia,serif;cursor:pointer;white-space:nowrap}
.language-switch:hover,.language-switch:focus-visible{background:#3a463c;outline:2px solid #e5c47e;outline-offset:2px}
@media(max-width:600px){.book-experience .book-heading #book-name{display:none}.book-experience .book-heading .book-actions{min-width:0}.book-experience .book-heading .book-actions button{padding:6px 7px}}
/* Paper, engraved lines and clear explanatory frames for the banknote book. */
.banknote-scene { display:flex; flex-direction:column; padding:22px 4%; gap:14px; background:#182529; color:#eee3cf; opacity:1; }
.bn-heading { display:flex; justify-content:space-between; flex:none; color:#baa780; font:11px var(--font-body); letter-spacing:.08em; }.bn-heading b{font-weight:400;margin-left:16px;color:#a5b5b3}
.bn-title { margin:0; font:clamp(18px,2vw,28px)/1.4 var(--font-display); }
.bn-canvas { flex:1; min-height:0; position:relative; }
.bn-stamp { flex:none; font:10px/1.5 var(--font-body); color:#aaa28f; text-align:right; }.bn-stamp a{color:inherit;text-decoration:underline}
.bn-question { display:flex; height:100%; align-items:center; gap:6%; }.bn-question>div:last-child{flex:1;min-width:0}.bn-question small { font:12px var(--font-body); color:#d0ab70; }.bn-question h2{font:clamp(24px,3vw,44px)/1.6 var(--font-display);margin:13px 0 18px}.bn-question p{font-size:13px;line-height:1.8;color:#b6c0b9;margin:0}
.bn-motif{width:27%;transform:rotate(-7deg);color:#c6a56a}.bn-motif svg,.bn-notes svg{width:100%;fill:none;stroke:currentColor;stroke-width:.5}.bn-motif svg{stroke-width:.7}
.bn-artifact{margin:0;height:100%;display:flex;gap:30px;align-items:center;justify-content:center}.bn-artifact svg{height:100%;max-width:77%;min-width:0;filter:drop-shadow(0 4px 15px #0006)}.bn-artifact figcaption{max-width:180px;font:16px/1.7 var(--font-display);color:#dfcba6}.bn-artifact figcaption span{display:block;font:11px/1.8 var(--font-body);margin-top:16px;color:#b9b5a8}
.bn-comparison{height:100%;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:26px 8%}.bn-comparison section{border-top:1px solid #bca57670;padding:18px 0 8px}.bn-index{font:12px var(--font-mono);color:#aa9779}.bn-comparison h2{font:clamp(24px,3vw,40px) var(--font-display);margin:12px 0}.bn-comparison p{font-size:clamp(13px,1.5vw,19px);color:#c4c9bf;margin:0;line-height:1.7}.bn-axis{grid-column:1/-1;text-align:center;font:clamp(13px,1.5vw,19px) var(--font-display);color:#e0bb79;padding:12px 0;border-top:1px solid #bca57640}
.bn-artifact svg{width:77%}
.bn-pattern{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px}.bn-pattern-label{font:16px var(--font-display);color:#d7c094}.bn-notes{display:flex;justify-content:space-between;gap:5%;min-height:0}.bn-notes figure{margin:0;flex:1;min-width:0;color:#bca576;text-align:center}.bn-notes svg{max-height:180px}.bn-notes figcaption{font:12px var(--font-body);margin-top:5px;color:#c6c7b9}.bn-pattern p{margin:0;text-align:center;color:#ded4bd;font:15px/1.6 var(--font-display)}
.bn-roadmap{list-style:none;margin:0;padding:0;display:flex;gap:4%;height:calc(100% - 36px);align-items:center}.bn-roadmap li{flex:1;border-top:2px solid #bca57655;padding:20px 0;}.bn-roadmap small{font-size:12px;color:#c4ad84}.bn-roadmap h2{font:clamp(19px,2vw,28px)/1.8 var(--font-display);margin:14px 0 0}.bn-roadmap .active{border-color:#e3bb77}.bn-roadmap .active small{color:#f5d098}.bn-next{margin:0;color:#cfb584;font:13px var(--font-body)}
body[data-book-kind="banknote"] #timeline,body[data-book-kind="banknote"] #stage.off-era::after{display:none!important}
body[data-book-kind="banknote"] #say{white-space:pre-line}
#book-name{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-cover[data-book="banknote"]{--cover:#293e3a!important}.book-cover[data-book="banknote"] h2{writing-mode:horizontal-tb!important;font-size:clamp(17px,1.8vw,26px);line-height:1.8;letter-spacing:.05em;height:auto;margin:8px 8px}.book-cover[data-book="banknote"] .cover-art{height:24%;background:repeating-radial-gradient(ellipse at center,transparent 0 2px,#bca57688 3px,transparent 4px 7px);border-radius:0}.book-cover[data-book="banknote"] .cover-border p{line-height:1.7}
@media(max-width:600px){
 .banknote-scene{padding:10px 15px 7px;gap:7px}.bn-heading{font-size:9px}.bn-heading b{margin-left:8px}.bn-title{font-size:16px}.bn-stamp{font-size:8px;line-height:1.35}.bn-question{gap:0}.bn-motif{display:none}.bn-question small{font-size:10px}.bn-question h2{font-size:24px;line-height:1.65;margin:8px 0 10px}.bn-question p{font-size:11px;line-height:1.7}.bn-artifact{flex-direction:column;gap:4px}.bn-artifact svg{max-width:100%;flex:1;min-height:0;width:100%}.bn-artifact figcaption{max-width:none;font:9px var(--font-body);flex:none}.bn-artifact figcaption span{display:none}.bn-comparison{gap:14px 18px}.bn-comparison section{padding:8px 0 0}.bn-index{font-size:10px}.bn-comparison h2{font-size:23px;margin:8px 0}.bn-comparison p{font-size:12px}.bn-axis{font-size:12px;line-height:1.8;padding:8px 0}.bn-pattern{gap:8px}.bn-pattern-label{font-size:12px}.bn-notes{gap:2%}.bn-notes figcaption{font-size:10px}.bn-pattern p{font-size:12px}.bn-roadmap{display:block;height:auto}.bn-roadmap li{display:flex;align-items:center;gap:15px;padding:9px 0;border-top-width:1px}.bn-roadmap small{font-size:10px;min-width:60px}.bn-roadmap h2{font-size:14px;margin:0;line-height:1.5}.bn-next{font-size:10px;margin-top:8px}
}
/* Compact the diagram itself on short phones; keep narration readable below. */
@media(max-width:600px) and (max-height:720px){
 .banknote-scene{gap:4px;padding-top:7px}
 .bn-title{font-size:14px;line-height:1.3}
 .bn-question h2{font-size:21px;line-height:1.45;margin:4px 0 6px}
 .bn-question p{font-size:10px;line-height:1.5}
 .bn-comparison{gap:5px 14px}
 .bn-comparison section{padding:3px 0 0}
 .bn-comparison h2{font-size:19px;margin:4px 0}
 .bn-comparison p{font-size:11px;line-height:1.5}
 .bn-axis{font-size:11px;line-height:1.4;padding:4px 0}
 .bn-pattern{gap:4px}
 .bn-pattern-label,.bn-pattern p{font-size:11px;line-height:1.4}
 .bn-notes svg{max-height:64px}
 .bn-notes figcaption{font-size:9px;margin-top:1px}
 .bn-roadmap li{padding:4px 0;gap:10px}
 .bn-roadmap h2{font-size:12px;line-height:1.4}
 .bn-roadmap small{font-size:9px}
 .bn-next{font-size:9px;margin-top:3px}
}


@media(max-width:600px) and (max-height:680px){
 .banknote-scene{padding:7px 13px 5px;gap:4px}.bn-heading{font-size:8px}.bn-title{font-size:14px;line-height:1.35}.bn-question h2{font-size:20px;line-height:1.45;margin:5px 0}.bn-question small{font-size:9px}.bn-question p{font-size:10px;line-height:1.5}.bn-stamp{font-size:7px}.bn-comparison{gap:5px 14px}.bn-comparison section{padding:3px 0}.bn-comparison h2{font-size:20px;margin:4px 0}.bn-comparison p{font-size:10px}.bn-axis{padding:4px 0;font-size:10px}.bn-pattern{gap:3px}.bn-pattern-label,.bn-pattern p{font-size:10px}.bn-notes svg{max-height:76px}.bn-notes figcaption{font-size:9px;margin-top:0}.bn-roadmap li{padding:5px 0}.bn-roadmap h2{font-size:12px}.bn-next{font-size:9px;margin-top:5px}
}

.book-cover[data-book="banknote"] h2{font-size:clamp(12px,1.25vw,18px);margin:8px 0;letter-spacing:.03em;width:100%;line-height:1.95}

/* C03 — material, ownership and elapsed time, rather than a two-column diagram. */
.banknote-scene.bn-exchange{padding:14px 24px 10px;gap:8px;background:#171f20;isolation:isolate}
.ex-header{display:flex;align-items:center;gap:24px;color:#bda982;font:10px var(--font-body);flex:none;letter-spacing:.06em}
.ex-header b{font-weight:400;color:#7e9391;margin-left:14px}.ex-header h1{font:12px var(--font-display);color:#d6cfbe;margin:0;flex:1}.ex-header>span:last-child{font:12px var(--font-mono)}
.ex-film{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 72% 40%,#71634455,transparent 63%),linear-gradient(115deg,#282b27,#4c4030 53%,#232a28);container-type:size}
.ex-film::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #090f1080;z-index:5}
.ex-table{position:absolute;inset:-30%;z-index:-1;transform:rotate(-12deg);background:repeating-linear-gradient(0deg,transparent 0 71px,#131b1940 72px,#bb945c16 73px,transparent 74px 146px),repeating-linear-gradient(2deg,transparent 0 3px,#d1b37a05 4px,transparent 5px 9px)}
.ex-light{position:absolute;inset:-50%;z-index:-1;transform:rotate(-27deg) translate(12%,0);background:repeating-linear-gradient(90deg,transparent 0 73px,#f3d79c09 74px 147px,transparent 148px 169px);transition:transform 1500ms ease}
.ex-ledger{position:absolute;right:-2%;bottom:-20%;width:42%;height:100%;transform:rotate(18deg) translate(0,20%);background:linear-gradient(90deg,#90866822,#b9a37419);border:1px solid #c4b98b16;opacity:.25;transition:transform 1300ms,opacity 1300ms;pointer-events:none}
.ex-ledger::before{content:'';position:absolute;left:16%;top:7%;bottom:0;border-left:1px solid #b6756544;box-shadow:3px 0 #b6756522}
.ex-ledger i{display:block;margin:12% 8%;height:1px;background:#c5b99933}
.ex-copy{position:absolute;left:5%;top:8%;z-index:4;max-width:55%;pointer-events:none}
.ex-time{font:11px var(--font-body);letter-spacing:.15em;color:#d7ba82;margin:0 0 13px;display:flex;align-items:center;gap:10px}
.ex-time::before{content:'';width:22px;height:1px;background:currentColor}
.ex-copy h2{font:500 clamp(24px,3.2vw,47px)/1.42 var(--font-display);letter-spacing:.035em;color:#f4e8ce;text-shadow:0 2px 12px #121917; margin:0}
.ex-detail{font:12px/1.8 var(--font-body);color:#c8bfa9;margin:13px 0 0;max-width:31em}
.ex-note,.ex-goods{position:absolute;margin:0;transform:translate(-50%,-50%) rotate(-8deg);transition:left 1500ms cubic-bezier(.22,.8,.2,1),top 1500ms cubic-bezier(.22,.8,.2,1),width 1500ms cubic-bezier(.22,.8,.2,1),transform 1500ms cubic-bezier(.22,.8,.2,1),opacity 750ms;z-index:2}
.ex-note{width:26%;left:28%;top:72%;transform:translate(-50%,-50%) rotate(-9deg)}
.ex-goods{width:28%;left:75%;top:57%;transform:translate(-50%,-50%) rotate(8deg)}
.ex-note svg,.ex-goods svg{width:100%;display:block;overflow:visible;filter:drop-shadow(2px 12px 10px #090e13a0)}
.ex-note figcaption,.ex-goods figcaption{position:absolute;left:-15%;right:-15%;top:calc(100% + 9px);text-align:center;font:11px var(--font-body);letter-spacing:.08em;color:#e8ddc4;text-shadow:0 1px 8px #000;transform:rotate(9deg)}
.ex-goods figcaption{transform:rotate(-8deg)}
.ex-verdict{white-space:nowrap;position:absolute;left:24%;top:27%;width:52%;text-align:center;box-sizing:border-box;border:4px double #812f27;color:#812f27;font:700 clamp(24px,4vw,60px)/1.3 var(--font-display);letter-spacing:.3em;padding-left:.3em;transform:rotate(-12deg) scale(1);opacity:1;transition:opacity 220ms 700ms,transform 350ms 650ms;mix-blend-mode:multiply}
.ex-lens{position:absolute;left:80%;top:59%;width:12%;aspect-ratio:1;border:5px solid #a99158;border-radius:50%;box-shadow:0 0 0 2px #4b4938,0 0 0 6px #191f20,4px 12px 14px #080d1380,inset 0 0 25px #d9e1c820;background:linear-gradient(120deg,#e7efcf30,transparent 45%,#d1dfb61a);transform:translate(-50%,-50%) rotate(-30deg);transition:opacity 500ms,transform 1100ms;pointer-events:none;z-index:3}
.ex-lens::after{content:'';position:absolute;left:calc(50% - 6px);top:100%;width:12px;height:85%;border-radius:3px 3px 7px 7px;background:linear-gradient(90deg,#121b1b,#5d6756 42%,#162121);border-top:13px solid #9b875b;box-shadow:5px 7px 6px #0a121577}
.ex-countermark{position:absolute;left:46%;top:76%;font:14px var(--font-display);writing-mode:vertical-rl;letter-spacing:.24em;color:#b39b6b;border:1px solid #b39b6b55;padding:10px 5px;transform:rotate(6deg);transition:opacity 500ms}
.ex-difference{position:absolute;right:5%;bottom:3%;margin:0;color:#e1d1af;font:14px var(--font-display);letter-spacing:.04em;transition:opacity 600ms}
.ex-difference span{display:inline-block;font:27px var(--font-display);margin:0 17px;vertical-align:middle;color:#d08a66}
.ex-film[data-shot="0"] .ex-verdict,.ex-film[data-shot="1"] .ex-verdict{opacity:0;transform:rotate(-12deg) scale(1.7);transition:none}
.ex-film:not([data-shot="2"]) .ex-lens{opacity:0;transform:translate(70%,20%) rotate(-15deg)}
.ex-film:not([data-shot="1"]) .ex-countermark,.ex-film:not([data-shot="3"]) .ex-difference{opacity:0}
.ex-film[data-shot="1"] .ex-note{left:73%;top:59%;transform:translate(-50%,-50%) rotate(6deg)}
.ex-film[data-shot="1"] .ex-note figcaption{transform:rotate(-6deg)}
.ex-film[data-shot="1"] .ex-goods{left:26%;top:69%;width:24%;transform:translate(-50%,-50%) rotate(-6deg)}
.ex-film[data-shot="1"] .ex-goods figcaption{transform:rotate(6deg)}
.ex-film[data-shot="2"] .ex-note{left:68%;top:56%;width:43%;transform:translate(-50%,-50%) rotate(4deg)}
.ex-film[data-shot="2"] .ex-note figcaption{transform:rotate(-4deg)}
.ex-film[data-shot="2"] .ex-goods,.ex-film[data-shot="3"] .ex-goods{left:-30%;top:90%;opacity:0}
.ex-film[data-shot="2"] .ex-ledger{transform:rotate(8deg);opacity:.75}
.ex-film[data-shot="2"] .ex-light{transform:rotate(-27deg) translate(-9%,0)}
.ex-film[data-shot="3"] .ex-note{left:77%;top:48%;width:32%;transform:translate(-50%,-50%) rotate(5deg)}
.ex-film[data-shot="3"] .ex-note figcaption{transform:rotate(-5deg)}
.ex-film[data-shot="3"] .ex-detail{max-width:27em;font-size:11px}
.ex-transport{display:flex;align-items:center;gap:24px;flex:none;padding-top:1px}
.ex-cuts{display:flex;flex:1;gap:15px}.ex-cuts button{flex:1;position:relative;border:0;border-radius:0;background:none;color:#a9afa3;text-align:left;padding:9px 0 3px;font:10px var(--font-body);cursor:pointer;min-height:32px;white-space:nowrap}
.ex-cuts button i{position:absolute;left:0;right:0;top:0;height:2px;background:#64746a50;transition:background 250ms}
.ex-cuts button.ex-seen i{background:#aa9469}.ex-cuts button[aria-pressed="true"]{color:#f3d7a4}.ex-cuts button[aria-pressed="true"] i{background:#f3d7a4}
.ex-play{background:transparent;border:1px solid #7b806d66;border-radius:2px;color:#d3c8ac;font:11px var(--font-body);min-height:32px;padding:3px 13px;cursor:pointer;min-width:75px}
.ex-cuts button:hover,.ex-play:hover{color:#ffe2a7}.ex-cuts button:focus-visible,.ex-play:focus-visible{outline:2px solid #e6c186;outline-offset:3px}
.bn-exchange .bn-stamp{font-size:9px;color:#a3a390}
@media(min-width:601px){
 @container (max-height:280px){.ex-copy h2{font-size:30px}.ex-time{margin-bottom:7px}.ex-detail{margin-top:7px;font-size:10px}.ex-note{width:23%}.ex-goods{width:23%}.ex-film[data-shot="1"] .ex-goods{width:19%;top:71%}.ex-film[data-shot="2"] .ex-note{width:34%}.ex-film[data-shot="3"] .ex-note{width:27%}.ex-difference{font-size:12px}}
}
@media(max-width:600px){
 .banknote-scene.bn-exchange{padding:8px 9px 5px;gap:5px}.ex-header{font-size:8px;gap:10px}.ex-header b{margin-left:7px}.ex-header h1{font-size:9px}.ex-header>span:last-child{font-size:9px}
 .ex-copy{left:5%;top:7%;max-width:88%}.ex-time{font-size:8px;letter-spacing:.05em;margin:0 0 5px;gap:6px}.ex-time::before{width:12px}.ex-copy h2{font-size:22px;line-height:1.4}.ex-detail{font-size:8px;line-height:1.5;margin-top:3px;max-width:27em}
 .ex-note{width:33%;left:26%;top:68%}.ex-goods{width:33%;left:77%;top:62%}.ex-note figcaption,.ex-goods figcaption{font-size:8px;top:calc(100% + 5px);letter-spacing:0}
 .ex-film[data-shot="1"] .ex-note{left:76%;top:62%}.ex-film[data-shot="1"] .ex-goods{left:26%;top:69%;width:28%}.ex-countermark{font-size:10px;left:47%;top:70%;padding:5px 3px}
 .ex-film[data-shot="2"] .ex-note{width:48%;left:72%;top:63%}.ex-film[data-shot="2"] .ex-copy{max-width:95%}.ex-film[data-shot="2"] .ex-detail{max-width:13em}.ex-lens{width:17%;left:84%;top:70%;border-width:3px}.ex-verdict{font-size:22px;border-width:3px;letter-spacing:.15em;padding-left:.15em}
 .ex-film[data-shot="3"] .ex-note{width:36%;left:78%;top:69%}.ex-film[data-shot="3"] .ex-detail{font-size:8px;max-width:21em}.ex-difference{display:none}
 .ex-transport{gap:12px}.ex-cuts{gap:8px}.ex-cuts button{font-size:8px;min-height:30px;padding:6px 0 0}.ex-cuts button:last-child{flex:1.4}.ex-play{font-size:9px;min-width:57px;padding:3px 6px;min-height:30px}.bn-exchange .bn-stamp{font-size:7px;text-align:left;white-space:nowrap}
 @container(max-height:200px){.ex-copy h2{font-size:20px;line-height:1.3}.ex-time{font-size:7px}.ex-detail{font-size:8px}.ex-note{width:29%;top:68%}.ex-goods{width:29%}.ex-film[data-shot="1"] .ex-goods{width:25%;top:66%}.ex-film[data-shot="2"] .ex-note{width:45%;left:72%;top:59%}.ex-film[data-shot="3"] .ex-note{width:33%;left:78%;top:66%}.ex-note figcaption,.ex-goods figcaption{font-size:7px}.ex-film[data-shot="3"] .ex-detail{font-size:7px;max-width:29em}.ex-lens{left:88%;top:70%}}
}
@media(prefers-reduced-motion:reduce){.ex-film *{transition:none!important}.ex-play{display:none}}

/* Reserve enough room for the four-shot sequence on short phones. The prose
   retains its existing independent scroll area and fixed question controls. */
@media(max-width:600px) and (max-height:680px){
 body[data-book-kind="banknote"]:has(.bn-exchange) #open-book{height:330px}
 body[data-book-kind="banknote"]:has(.bn-exchange) #deck{top:330px}
}
/* Rich semantic scenes. Content is visible by default and scrolls within the art panel. */
.semantic-scene.rich-scene{background:radial-gradient(ellipse at 50% 28%,#294950,#142b33 75%);gap:10px}
.book-experience #stage.off-era:has(.rich-scene)::after{display:none}
.rich-scene .ss-canvas{isolation:isolate;overflow:auto;scrollbar-width:thin;scrollbar-color:#8a806d #172c33}
.rich-scene button{font:inherit;color:inherit;cursor:pointer}
.rich-scene button:focus-visible{outline:2px solid #e4c383;outline-offset:-2px}
.rich-scene button.is-focus{border-color:#e8c886;background-color:#d8b57519;box-shadow:inset 0 0 0 1px #e8c88655}
.vl-illustration{display:block;width:100%;height:100%;max-height:190px;flex:none;filter:drop-shadow(0 7px 4px #0003)}
.vl-note,.vl-relationship-text{margin:7px 0 0;color:#c1c9c5;font:12px/1.5 var(--font-body);text-align:center}
.vl-tableau{position:relative;min-height:180px;height:calc(100% - 28px);display:grid;align-items:center}
.vl-scenery{position:absolute;bottom:0;left:0;width:100%;height:65%;opacity:.37;z-index:-1}
.vl-cast{display:grid;grid-template-columns:repeat(var(--actors),minmax(0,1fr));gap:14px;align-items:end;padding:8px 4% 12px}
.vl-actor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;border:1px solid transparent;border-radius:9px;background:transparent;padding:7px;color:#f0e1c4;transition:background .15s,border-color .15s}
.vl-actor>.vl-illustration{height:clamp(40px,calc(var(--canvas-height) * .48),180px)}
.vl-actor strong{font:600 18px/1.4 var(--font-display);overflow-wrap:anywhere}
.vl-actor span{font:12px/1.5 var(--font-body);color:#c2c9c2;overflow-wrap:anywhere}
.has-focus .vl-actor:not(.is-focus) .vl-illustration{opacity:.55;filter:saturate(.6)}
.vl-exchange{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,1.2fr) minmax(0,1fr);align-items:center;gap:20px;height:calc(100% - 28px);min-height:200px}
.vl-party{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#e9ddc4}
.vl-party>.vl-illustration{height:170px}
.vl-party>strong{font:22px/1.4 var(--font-display)}
.vl-party small{font:12px/1.5 var(--font-body);color:#c1c9c5}
.vl-flows{display:grid;gap:14px}
.vl-flow{border:1px solid #a9946944;border-radius:8px;background:#142c33bb;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.vl-flow>span{font:16px/1.4 var(--font-display);color:#ead8b4}
.vl-flow small{font:11px/1.5 var(--font-body);color:#bac8c3}
.vl-transfer{display:flex;width:100%;height:44px;align-items:center;justify-content:center;gap:10px}
.vl-transfer>.vl-illustration{width:46px;height:46px}
.vl-transfer i{font:42px/1 var(--font-body);color:#d4b77c;font-style:normal}
.vl-transfer.backward{flex-direction:row-reverse}
.vl-family{position:relative;min-height:100px;padding:4px 0;--node-height:clamp(34px,calc((var(--canvas-height) - 90px) / var(--levels)),65px)}
.vl-levels{position:relative;display:grid;gap:28px}
.vl-level{display:flex;justify-content:space-evenly;gap:12px}
.vl-family .vl-actor{flex:0 1 200px;background:#19333d;border:1px solid #7c8d8655;padding:5px;display:grid;grid-template-columns:var(--node-height) minmax(0,1fr)}
.vl-family .vl-actor>.vl-illustration{height:var(--node-height)}
.vl-family .vl-actor strong{font-size:16px}
.vl-family .vl-actor span{font-size:11px;grid-column:1/-1}
.vl-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vl-links path{stroke:#bda674;stroke-width:1.5;fill:none}
.vl-links text{font:11px var(--font-body);fill:#ebdab7;paint-order:stroke;stroke:#1a333c;stroke-width:5px;stroke-linejoin:round}
.vl-relationship-text{font-size:10px}
.vl-chronology{display:grid;gap:8px;min-width:450px}
.vl-chronology-cards{display:none}
.vl-chronology-card{min-width:0;padding:7px 9px;border-top:2px solid #76908b;background:#203b43;overflow-wrap:anywhere}
.vl-chronology-card.is-focus{background:#82673b44;border-color:#e8c383}
.vl-chronology-card small{display:block;color:#d2b67f;font:11px/1.3 var(--font-body)}
.vl-chronology-card strong{display:block;margin-top:3px;font:14px/1.3 var(--font-display)}
.vl-chronology-card p{margin:3px 0 0;color:#c0cdc8;font:11px/1.3 var(--font-body)}
@media(min-width:601px) and (max-width:1100px){
 .vl-chronology{display:none}
 .vl-chronology-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .vl-chronology-cards+.vl-note{display:none}
}
@media(min-width:601px) and (max-width:850px){.vl-chronology-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vl-time-row{display:grid;grid-template-columns:minmax(80px,.55fr) repeat(var(--moments),minmax(0,1fr));gap:8px;align-items:stretch}
.vl-time-row>strong,.vl-time-row>b{display:grid;align-items:center;text-align:center;color:#d2b67f;padding:8px;font:14px/1.4 var(--font-body)}
.vl-event{border-top:2px solid #76908b;background:#203b43;padding:13px 10px;min-height:68px;color:#e9dfcb;overflow-wrap:anywhere}
.vl-event>b{font:16px/1.5 var(--font-display)}
.vl-event>p{font:12px/1.6 var(--font-body);color:#c0cdc8;margin:6px 0 0}
.vl-time-row>.is-focus{background:#82673b44;border-color:#e8c383}
.vl-distribution{display:grid;grid-template-columns:minmax(130px,.85fr) minmax(220px,1.3fr);gap:8%;height:100%;align-items:center}
.vl-donut{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;max-width:300px;width:min(100%,var(--canvas-height));box-shadow:0 8px 25px #0002}
.vl-donut>div{width:64%;height:64%;border-radius:50%;background:#19333d;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ecdfc5}
.vl-donut small{font:12px var(--font-body);color:#baa981}
.vl-donut strong{font:36px/1.3 var(--font-mono)}
.vl-donut span{font:12px var(--font-body)}
.vl-quantities{display:grid;gap:7px}
.vl-quantity{display:grid;grid-template-columns:10px minmax(55px,1fr) auto 55px;align-items:center;gap:10px;border:1px solid transparent;border-bottom-color:#b19b7044;background:transparent;padding:8px;text-align:left}
.vl-quantity>i{width:9px;height:9px;border-radius:50%}
.vl-quantity>span{font:16px var(--font-body);color:#e8dbc1}
.vl-quantity>b{font:19px var(--font-mono);color:#e8dbc1}
.vl-quantity small{font:10px var(--font-body);margin-left:3px}
.vl-quantity>em{font:12px var(--font-mono);color:#c5cfc9;font-style:normal;text-align:right}
.vl-threshold{padding:8px 10px;background:#bd9a5826;color:#e4c486;font:12px/1.4 var(--font-body);border-left:2px solid #d6b378}
.vl-threshold>i{display:none}
.vl-quantity-note{margin:0;font:11px/1.5 var(--font-body);color:#b4c5c1}
.vl-artifact{display:flex;gap:22px;align-items:center;height:100%}
.vl-artifact figure{margin:0;min-width:0;flex:1;height:100%;display:flex;flex-direction:column;gap:5px;align-items:center}
.vl-artifact figure>svg{width:100%;height:calc(100% - 24px);min-height:90px;flex:1;background:#11262d}
.vl-artifact figcaption{font:12px/1.5 var(--font-body);color:#e4d7b8;text-align:center}
.vl-artifact circle{fill:#203d48;stroke:#ebc986;stroke-width:5}
.vl-artifact text{fill:#fff4d1;font-family:var(--font-body);font-weight:600}
.vl-artifact ol{flex:0 0 25%;padding-left:24px;margin:0;color:#e8d7b4;font:14px/1.7 var(--font-body)}
.vl-artifact li+li{margin-top:12px}
.rich-scene .ss-stamp a{color:inherit;text-decoration:underline}
.vl-missing{padding:20px;color:#e6d7b8}
@media(min-width:601px) and (max-height:800px){
 .semantic-scene.rich-scene{padding:16px 24px;gap:6px}
 .rich-scene .ss-heading h2{font-size:26px}
 .vl-tableau{min-height:150px}
 .vl-exchange{min-height:170px;gap:12px}
 .vl-party>.vl-illustration{height:100px}
 .vl-flows{gap:6px}
 .vl-flow{padding:4px}
 .vl-transfer{height:32px}
 .vl-transfer>.vl-illustration{width:34px;height:34px}
 .vl-transfer i{font-size:30px}
 .vl-quantity{padding:5px}
 .vl-quantity-note{font-size:10px}
}
@media(max-width:600px){
 .vl-chronology{display:none}
 .vl-chronology-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .vl-chronology-card{padding:5px 6px}
 .vl-chronology-card small{font-size:9px}
 .vl-chronology-card strong{font-size:11px;margin-top:2px}
 .vl-chronology-card p{font-size:9px;margin-top:2px}
 .vl-chronology-cards+.vl-note{display:none}
 .semantic-scene.rich-scene{gap:4px;padding:8px 12px 6px}
 .rich-scene .ss-heading h2{font-size:17px;margin:0;line-height:1.4}
 .rich-scene .ss-stamp{font-size:8px;line-height:1.4}
 .vl-note,.vl-relationship-text{font-size:9px;margin:4px 0 0}
 .vl-tableau{min-height:112px;height:calc(100% - 20px)}
 .vl-cast{gap:4px;padding:2px 0 4px}
 .vl-actor{gap:3px;padding:3px}
 .vl-actor>.vl-illustration{height:75px}
 .vl-actor strong{font-size:13px}
 .vl-actor span{font-size:10px;line-height:1.4}
 .vl-exchange{gap:6px;grid-template-columns:minmax(0,1fr) minmax(115px,1.35fr) minmax(0,1fr);min-height:130px;height:calc(100% - 34px)}
 .vl-party>.vl-illustration{height:72px}
 .vl-party>strong{font-size:13px}
 .vl-party small{font-size:9px}
 .vl-flows{gap:5px}
 .vl-flow{padding:3px;gap:1px}
 .vl-flow>span{font-size:11px}
 .vl-flow small{font-size:9px;line-height:1.3}
 .vl-transfer{height:24px;gap:5px}
 .vl-transfer>.vl-illustration{width:30px;height:30px}
 .vl-transfer i{font-size:27px}
 .vl-family{min-height:100px;padding:1px 0}
 .vl-levels{gap:25px}
 .vl-level{gap:10px}
 .vl-family .vl-actor{max-width:112px;flex-basis:112px;display:grid;grid-template-columns:27px minmax(0,1fr);gap:3px;padding:4px}
 .vl-family .vl-actor>.vl-illustration{height:30px}
 .vl-family .vl-actor strong{font-size:12px}
 .vl-family .vl-actor span{grid-column:1/-1;font-size:9px}
 .vl-links text{font-size:9px}
 .vl-relationship-text{font-size:8px}
 .vl-chronology{gap:5px;min-width:320px}
 .vl-time-row{grid-template-columns:52px repeat(var(--moments),minmax(0,1fr));gap:4px}
 .vl-time-row>b,.vl-time-row>strong{padding:3px;font-size:10px}
 .vl-event{padding:5px;min-height:43px}
 .vl-event>b{font-size:11px;line-height:1.4}
 .vl-event>p{font-size:9px;line-height:1.4;margin-top:3px}
 .vl-distribution{grid-template-columns:105px minmax(0,1fr);gap:12px;min-height:130px}
 .vl-donut strong{font-size:20px}
 .vl-donut small,.vl-donut span{font-size:9px}
 .vl-quantities{gap:2px}
 .vl-quantity{grid-template-columns:7px minmax(32px,1fr) auto 39px;gap:5px;padding:3px 1px}
 .vl-quantity>i{width:7px;height:7px}
 .vl-quantity>span{font-size:11px}
 .vl-quantity>b{font-size:13px}
 .vl-quantity small{font-size:8px}
 .vl-quantity>em{font-size:9px}
 .vl-threshold{font-size:9px;padding:4px}
 .vl-quantity-note{font-size:9px;line-height:1.35}
 .vl-artifact{gap:9px}
 .vl-artifact figure>svg{min-height:90px}
 .vl-artifact figcaption{font-size:9px;line-height:1.35}
 .vl-artifact ol{font-size:10px;line-height:1.4;flex-basis:27%;padding-left:17px}
 .vl-artifact li+li{margin-top:7px}
}
@media(max-width:600px) and (max-height:720px){
 .vl-actor>.vl-illustration{height:58px}
 .vl-tableau{min-height:98px}
 .vl-exchange{min-height:96px}
 .vl-event{min-height:40px}
 .vl-party>.vl-illustration{height:55px}
 .vl-actor span{font-size:9px}
 .vl-flow small{font-size:8px}
 .vl-flow>span{font-size:10px;line-height:1.25}
 .vl-flows{gap:3px}
 .vl-transfer{height:20px}
 .vl-distribution{grid-template-columns:95px minmax(0,1fr);min-height:116px}
}
@media(prefers-reduced-motion:reduce){.vl-actor{transition:none}}

/* ---- Full-frame kinds (2026-09-18). Content is complete before any motion; motion only introduces it. ---- */
.semantic-scene.rich-scene.bare-scene{padding:0;gap:0;background:#0f191c}
.bare-scene .ss-canvas{overflow:hidden;padding:0}
.bare-scene .ss-stamp{padding:3px 10px 4px;color:#b9ab8f}
.vl-frame{position:relative;width:100%;height:100%;min-height:0;container-type:size;overflow:hidden;color:#ecdcb9;box-sizing:border-box}
.vl-photo{display:block;width:100%;height:100%;object-fit:cover}
.vl-art{object-fit:contain}
.vl-frame .vl-missing{margin:0;padding:10%;text-align:center}
/* film */
.vl-film{display:grid;grid-template-columns:minmax(0,62%) minmax(0,38%);align-items:center}
.vl-film-image{height:100%;min-height:0;overflow:hidden;background:#0b1416}
.vl-film-image>.vl-photo{width:100%;height:100%}
.vl-film-copy{padding:4% 6% 4% 5%;min-width:0}
.vl-film-copy small{display:block;font:10px/1.5 var(--font-body);letter-spacing:.18em;color:#c1a97c}
.vl-film-copy{max-height:100%;overflow:hidden}
.vl-film-copy h3{margin:10px 0;font:500 clamp(15px,min(5.4cqw,calc(92cqw / (var(--chars,12) + 1)),calc(22cqh - 10px)),54px)/1.35 var(--font-display);letter-spacing:.035em;color:#f2e6cc;overflow-wrap:anywhere}
.vl-film-copy p{margin:8px 0 0;font:clamp(11px,1.6cqw,15px)/1.8 var(--font-body);color:#d2c6ab}
.vl-film-wide{grid-template-columns:minmax(0,72%) minmax(0,28%)}
.vl-film-document{grid-template-columns:minmax(0,50%) minmax(0,50%)}
.vl-film-document .vl-film-image{padding:4%;background:transparent;filter:drop-shadow(8px 10px 14px #0007)}
.vl-film-document .vl-film-image>.vl-photo{object-fit:contain}
.vl-film-full{display:block}
.vl-film-full .vl-film-image{position:absolute;inset:0}
.vl-film-full .vl-film-copy{position:absolute;left:0;right:0;bottom:0;padding:4% 6% 5%;background:linear-gradient(transparent,#0b1416e8)}
/* detail */
.vl-detail{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:6px;padding:2% 3%}
.vl-detail-stage{position:relative;min-height:0;overflow:hidden;background:#0b1416}
.vl-detail-full{width:100%;height:100%;object-fit:contain;filter:brightness(.72)}
.vl-detail-full circle.vl-detail-mark{fill:none;stroke:#fff;stroke-width:2.5;paint-order:stroke;filter:drop-shadow(0 0 3px #000c)}
.vl-detail-inset{position:absolute;top:4%;right:3%;width:38cqh;height:38cqh;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 24px #000a;background:#000;transform-origin:20% 80%}
@container (min-aspect-ratio: 3/2){.vl-detail-inset{width:62cqh;height:62cqh;top:calc(50% - 31cqh);right:5%}}
.vl-detail-inset svg{display:block;width:100%;height:100%}
.vl-detail-inset circle{fill:#203d48;stroke:#ebc986;stroke-width:5}
.vl-detail-inset text{fill:#fff4d1;font-family:var(--font-body);font-weight:600}
.vl-detail-callouts{margin:0;padding:0 0 0 1.4em;display:flex;gap:4px 22px;flex-wrap:wrap;font:clamp(11px,1.5cqw,14px)/1.5 var(--font-body);color:#e8d7b4}
.vl-detail .vl-note{margin:0}
/* pair */
.vl-pair-frame{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:0 2%}
.vl-pair-axis{margin:0;text-align:center;font:11px/1.5 var(--font-body);letter-spacing:.14em;color:#c1a97c}
.vl-pair{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:16px;min-height:0;align-items:stretch}
.vl-pair-side{margin:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px}
.vl-pair-picture{min-height:0;overflow:hidden;background:#11262d;border:1px solid #bba57730}
.vl-pair-picture>.vl-photo{object-fit:contain}
.vl-pair-side figcaption{text-align:center}
.vl-pair-side strong{display:block;font:500 clamp(14px,2.4cqw,22px)/1.4 var(--font-display);color:#f0e1c4}
.vl-pair-side small{display:block;font:clamp(10px,1.3cqw,12px)/1.5 var(--font-body);color:#c1c9c5}
.vl-pair-divider{background:#d6b37866;transform-origin:top}
.vl-pair-rows{display:grid;gap:2px}
.vl-pair-row{display:grid;grid-template-columns:minmax(60px,.6fr) 1fr 1fr;gap:10px;align-items:center;border-top:1px solid #b19b7044;padding:4px 0;font:clamp(10px,1.4cqw,13px)/1.5 var(--font-body);color:#e8dbc1}
.vl-pair-row small{color:#c1a97c}
/* claim */
.vl-claim{background:#0b0f10}
.vl-claim-portrait{position:absolute;inset:0}
.vl-claim-portrait>.vl-photo{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.05) brightness(.92)}
.vl-claim-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#0b0f10d6)}
.vl-claim-lines{position:absolute;left:6%;top:60%;max-width:88%;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.vl-claim-line{display:inline;background:#fff;color:#111;padding:.12em .5em;font:700 clamp(14px,6.2cqh,32px)/1.5 var(--font-body);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vl-claim-name{position:absolute;right:6%;bottom:6%;text-align:right;color:#fff}
.vl-claim-name small{display:block;font:10px/1.4 var(--font-body);letter-spacing:.12em;color:#d6c9a8}
.vl-claim-name strong{display:block;font:500 clamp(14px,2.4cqw,22px)/1.4 var(--font-display);letter-spacing:.18em}
.vl-claim-name em{display:block;font:italic 10px/1.5 var(--font-body);color:#c1a97c}
.vl-claim-bare{background:radial-gradient(ellipse at 50% 30%,#294950,#142b33 75%)}
.vl-claim-bare .vl-claim-lines{top:30%}
/* quote */
.vl-quote{display:flex;align-items:center;justify-content:center;gap:4%;padding:4%;background:radial-gradient(ellipse at 50% 30%,#294950,#142b33 75%)}
.vl-quote-tail-right{flex-direction:row-reverse}
.vl-quote-speaker{flex:0 0 24%;height:82%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font:11px/1.4 var(--font-body);color:#d6c9a8}
.vl-quote-speaker>.vl-photo{width:100%;height:0;flex:1;object-fit:cover;object-position:50% 18%;filter:sepia(.3);border-radius:4px}
.vl-quote-bubble{position:relative;flex:0 1 64%;background:#fff;color:#111;border-radius:22px;padding:clamp(12px,3cqh,26px) clamp(14px,3cqw,30px);transform-origin:left center}
.vl-quote-bubble::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);border:11px solid transparent;border-right:16px solid #fff;border-left:0}
.vl-quote-tail-right .vl-quote-bubble{transform-origin:right center}
.vl-quote-tail-right .vl-quote-bubble::before{left:auto;right:-16px;border-right:0;border-left:16px solid #fff}
.vl-quote-tail-none .vl-quote-bubble{transform-origin:center;flex-basis:80%}
.vl-quote-tail-none .vl-quote-bubble::before{display:none}
.vl-quote-bubble p{margin:0;font:700 clamp(14px,5cqh,26px)/1.6 var(--font-body)}
.vl-quote-bubble p+p{margin-top:.15em}
.vl-quote-bubble small{display:block;margin-top:8px;font:10px/1.4 var(--font-body);color:#666}
.vl-quote-name{position:absolute;bottom:5%;left:0;right:0;text-align:center;margin:0;font:12px/1.4 var(--font-display);letter-spacing:.14em;color:#e5c694}
/* source */
.vl-source{background:#0b1416}
.vl-source-picture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vl-source-picture>.vl-photo{max-width:100%;height:100%;object-fit:contain;filter:brightness(.55)}
.vl-source-translation{position:absolute;left:5%;right:5%;top:5%;max-height:30%;overflow:auto;margin:0;font:600 clamp(13px,4.6cqh,22px)/1.6 var(--font-body);color:#fff;text-shadow:0 1px 3px #000c}
.vl-source-original{position:absolute;left:5%;right:5%;bottom:13%;max-height:46%;overflow:auto;margin:0;font:clamp(13px,4.6cqh,22px)/1.75 var(--font-display);color:#fff;text-shadow:0 1px 3px #000c}
.vl-source-original span{display:inline}
.vl-source-attribution{position:absolute;left:5%;right:5%;bottom:4%;font:10px/1.4 var(--font-body);color:#d6c9a8}
.vl-source-paper .vl-source-picture{background:#e4d4b4 repeating-linear-gradient(0deg,transparent 0 30px,#9a805522 30px 31px)}
.vl-source-paper .vl-source-translation,.vl-source-paper .vl-source-original{color:#31280d;text-shadow:none}
.vl-source-paper .vl-source-attribution{color:#6b5a3a}
/* stamp */
.vl-stamp{display:flex;align-items:center;justify-content:center;background:#000}
.vl-stamp-photo{position:absolute;inset:0;filter:grayscale(1) brightness(.85)}
.vl-stamp-photo>.vl-photo{width:100%;height:100%;object-fit:cover}
.vl-stamp-word{position:relative;font:900 clamp(38px,30cqh,200px)/1 var(--font-display);color:#111;letter-spacing:.06em;white-space:nowrap;padding:.1em .28em .13em;border:.05em solid currentColor;border-radius:.1em;background:#fffaf0d9;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 10px 36px #0009}
.vl-stamp-word{font-size:clamp(38px,min(30cqh,calc(92cqw / (var(--chars,4) * 1.06 + .7))),200px)}
.vl-stamp-red .vl-stamp-word{color:#b3261e}
.vl-stamp-place{position:absolute;left:0;right:0;bottom:6%;text-align:center;font:500 clamp(11px,5cqh,20px)/1.4 var(--font-display);color:#fff;letter-spacing:.2em;text-shadow:0 1px 3px #000}
/* plate */
.vl-plate{display:flex;align-items:center;justify-content:center;padding:5% 7%;background:radial-gradient(ellipse at 50% 30%,#294950,#142b33 75%)}
.vl-plate-body{max-width:34em;width:100%;min-width:0}
.vl-plate-body small{display:block;font:10px/1.5 var(--font-body);letter-spacing:.2em;color:#c1a97c;margin-bottom:.8em}
.vl-plate-text{margin:0;font:500 clamp(17px,6.6cqh,40px)/1.7 var(--font-display);letter-spacing:.05em;color:#f2e6cc}
.vl-plate-body em{display:block;margin-top:1em;font:italic 11px/1.5 var(--font-body);color:#baa785}
.vl-plate-paper{background:#e4d4b4 repeating-linear-gradient(0deg,transparent 0 34px,#9a805522 34px 35px)}
.vl-plate-paper .vl-plate-body{background:#efe5cc;padding:5% 6%;box-shadow:10px 12px 26px #0004;border:1px solid #bfa779;transform:rotate(-1.5deg)}
.vl-plate-paper .vl-plate-text{color:#413a2b}
.vl-plate-paper small,.vl-plate-paper em{color:#776745}
/* sequence */
.vl-sequence{display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);background:#e4d4b4 repeating-linear-gradient(90deg,transparent 0 3px,#0000000a 3px 4px);color:#31280d;padding:2% 4%}
.vl-seq-row{display:flex;justify-content:space-around;align-items:flex-end;gap:2%;min-height:0;padding:0 7%}
.vl-seq-below{align-items:flex-start}
.vl-seq-label{writing-mode:vertical-rl;text-orientation:upright;font:500 clamp(11px,min(6cqh,calc(40cqh / var(--chars,6))),24px)/1.15 var(--font-display);letter-spacing:.08em;max-height:100%;overflow:hidden}
.vl-seq-series{align-self:center;font:11px/1.4 var(--font-body);color:#7b6a45;border:1px solid #7b6a45;padding:2px 6px;border-radius:3px}
.vl-seq-axis{display:flex;align-items:center;gap:10px;height:clamp(18px,7cqh,34px)}
.vl-seq-arrow{flex:1;height:clamp(3px,1.4cqh,7px);background:#111;position:relative;transform-origin:left center}
.vl-seq-arrow::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border-left:clamp(10px,4cqh,22px) solid #111;border-top:clamp(7px,3cqh,15px) solid transparent;border-bottom:clamp(7px,3cqh,15px) solid transparent}
.vl-seq-premise{font:700 clamp(10px,4cqh,16px)/1.3 var(--font-body);color:#b3261e;border:2px solid #b3261e;padding:2px 8px;font-style:normal;white-space:nowrap}
.vl-seq-end{font:500 clamp(12px,5cqh,20px)/1.3 var(--font-display);white-space:nowrap}
/* topology */
.vl-topology{display:flex;align-items:center;justify-content:center;background:#fff}
.vl-topology svg{width:100%;height:100%}
.vl-topo-outline{fill:none;stroke:#333;stroke-width:3;stroke-dasharray:2200;stroke-dashoffset:0}
.vl-topo-border{stroke:#b3261e;stroke-width:5}
.vl-topo-label text{font:500 30px var(--font-display);fill:#111;writing-mode:vertical-rl;text-orientation:upright;dominant-baseline:central}
.vl-topo-label text.vl-topo-note{font-size:15px;fill:#444}
.vl-topo-range line{stroke:#31280d;stroke-width:3}
.vl-topo-range text{font:500 22px var(--font-display);fill:#31280d}
@media(max-width:600px){
 .vl-film{grid-template-columns:minmax(0,58%) minmax(0,42%)}
 .vl-film-copy{padding:3% 4% 3% 4%}
 .vl-film-copy h3{margin:5px 0;line-height:1.3}
 .vl-film-copy small{font-size:8px;letter-spacing:.1em}
 .vl-film-copy p{font-size:10px;line-height:1.5}
 .vl-detail{gap:4px;padding:1% 2%}
 .vl-detail-callouts{font-size:10px;gap:2px 12px}
 .vl-pair{gap:8px}
 .vl-pair-row{gap:6px;padding:2px 0}
 .vl-claim-lines{left:4%;top:56%;gap:4px}
 .vl-claim-name{right:4%;bottom:4%}
 .vl-quote{gap:3%;padding:3%}
 .vl-quote-bubble{border-radius:14px}
 .vl-quote-bubble small{font-size:9px;margin-top:5px}
 .vl-source-attribution{font-size:8px}
 .vl-plate{padding:4% 5%}
 .vl-seq-row{padding:0 4%}
 .vl-seq-series{font-size:9px;padding:1px 4px}
 .vl-topo-label text{font-size:34px}
 .vl-topo-label text.vl-topo-note{font-size:18px}
 .vl-topo-range text{font-size:26px}
}
/* A chapter opening occupies the book, leaving the reading desk in place. */
.chapter-opening{position:absolute;inset:47px 2px 0;z-index:20;isolation:isolate;overflow:clip;background:#101e20;color:#f5e7c9;--co-duration:9200ms;--co-x:0px;--co-y:0px;opacity:1;border-top:1px solid #a3885344;container-type:size}
.co-camera{position:absolute;inset:-3%;transform-origin:75% 62%;animation:co-camera var(--co-duration) cubic-bezier(.2,.45,.3,1) both}
.co-art{width:100%;height:100%;object-fit:cover;object-position:66% 55%;transform:translate(var(--co-x),var(--co-y)) scale(1.02);transition:transform 350ms ease-out}
.co-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 30%,#816c3b88,transparent 70%),repeating-radial-gradient(ellipse at 76% 72%,#13302f 0 4px,#977b4544 5px,transparent 6px 11px),#142224}
.co-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a171bbf,transparent 72%),linear-gradient(0deg,#071013e6,transparent 30%,transparent 75%,#071013a6);transition:background 1s}
.co-light{position:absolute;inset:-50%;background:linear-gradient(118deg,transparent 42%,#f3d59116 46%,#f3d5912d 49%,transparent 53%);mix-blend-mode:screen;pointer-events:none;animation:co-light var(--co-duration) ease-in-out both}
.co-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.co-engraving{position:absolute;right:4%;bottom:15%;width:35%;color:#f2d39b;opacity:.3;transform:perspective(700px) rotateX(44deg) rotateZ(-14deg);animation:co-plate var(--co-duration) ease-out both;pointer-events:none}
.co-engraving svg{display:block;width:100%;fill:none;stroke:currentColor;stroke-width:.5;filter:drop-shadow(0 1px 8px #ffe3a955)}
.co-engraving path{stroke-dasharray:1;animation:co-ink 3400ms ease-out backwards;animation-delay:calc(var(--line)*70ms)}
.co-meta{position:absolute;top:6%;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;font:10px var(--font-body);letter-spacing:.14em;color:#d4c49c}
.co-meta span:first-child{display:flex;align-items:center;gap:14px}.co-meta i{display:inline-block;width:34px;height:1px;background:#ba9a5c90}
.co-meta span:last-child{font:12px var(--font-mono);letter-spacing:.12em}
.co-copy{position:absolute;left:6%;top:25%;width:66%;max-width:750px;text-shadow:0 3px 22px #001112}
.co-label{margin:0 0 16px;font:11px var(--font-body);letter-spacing:.2em;color:#d2b072;display:flex;align-items:center;gap:13px}
.co-label:before{content:'';width:6px;height:6px;transform:rotate(45deg);border:1px solid #d2b072}
.co-copy h1{font:500 clamp(30px,4.1vw,65px)/1.45 var(--font-display);margin:0;letter-spacing:.08em;text-wrap:balance}
.co-note{font:12px/1.9 var(--font-body);color:#d3c9b1;max-width:31em;margin:20px 0 0}
.co-bottom{position:absolute;left:6%;right:6%;bottom:4%;display:flex;flex-direction:column;gap:12px}
.co-track{height:1px;background:#d4b87940;overflow:hidden}.co-track span{display:block;width:100%;height:100%;background:#efd3a1;transform-origin:left;animation:co-progress var(--co-duration) linear both}
.co-actions{display:flex;align-items:center}.co-status{font:10px var(--font-body);letter-spacing:.07em;color:#c3bcaa;margin-right:auto}.co-credit{font:8px/1.5 var(--font-body);color:#aba99a;letter-spacing:.02em}.co-credit a{color:inherit}
.chapter-opening[data-paused="true"] *, .chapter-opening[data-paused="true"] *:before{animation-play-state:paused!important}
.chapter-opening[data-theme="general"] .co-copy h1{font-size:clamp(26px,3.3vw,52px)}
.chapter-opening[data-theme="general"] .co-art{opacity:.55}.chapter-opening[data-theme="general"] .co-shade{background:linear-gradient(90deg,#071518e6,#07151822),linear-gradient(0deg,#071518,transparent)}
#open-book[data-opening="true"] #timeline{visibility:hidden}
@keyframes co-camera{0%{transform:scale(1.24) translate(-3%,-1.5%)}45%{transform:scale(1.1) translate(-1%,0)}100%{transform:scale(1)}}
@keyframes co-light{0%{transform:translateX(-18%);opacity:.2}45%{opacity:1}100%{transform:translateX(19%);opacity:.35}}
@keyframes co-plate{0%{transform:perspective(700px) rotateX(35deg) rotateZ(-9deg) scale(1.2);opacity:.7}55%{opacity:.4}100%{transform:perspective(700px) rotateX(44deg) rotateZ(-14deg);opacity:.18}}
@keyframes co-ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes co-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@container(max-height:370px){.co-copy{top:20%}.co-copy h1{font-size:34px}.co-label{margin-bottom:8px}.co-note{margin-top:10px;font-size:10px}.co-bottom{gap:8px}.co-meta{font-size:9px}}
@media(max-width:600px){
 .chapter-opening{inset:34px 0 0}.co-camera{inset:-3% -36%;transform-origin:70% 60%}.co-art{object-position:65% 45%}.co-shade{background:linear-gradient(90deg,#0a171bd9,#0a171b55 80%),linear-gradient(0deg,#071013f2,transparent 55%,#07101377)}
 .co-meta{top:6%;left:6%;right:6%;font-size:8px;letter-spacing:.02em}.co-meta span:last-child{font-size:9px}.co-meta span:first-child{gap:8px}.co-meta i{width:15px}
 .co-copy{top:23%;width:88%;max-width:none}.co-copy h1{font-size:29px;line-height:1.5;letter-spacing:.06em}.co-label{font-size:9px;letter-spacing:.12em;margin-bottom:8px}.co-note{font-size:10px;margin-top:10px;max-width:26em}.co-engraving{width:49%;right:0;bottom:22%;opacity:.2}
 .co-bottom{gap:8px;bottom:4%}.co-status{font-size:8px;letter-spacing:0}.co-credit{font-size:8px;line-height:1.4}.chapter-opening[data-theme="general"] .co-copy h1{font-size:24px}
 @container(max-height:270px){.co-copy{top:20%}.co-copy h1{font-size:24px;line-height:1.35}.co-label{font-size:8px;margin-bottom:5px}.co-note{font-size:9px;margin-top:7px}.co-bottom{gap:5px;bottom:3%}.co-meta{top:5%}.co-credit{font-size:7px}}
}
.chapter-opening.co-reduced .co-track span{animation:none;transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.chapter-opening *, .chapter-opening *:before{animation:none!important;transition:none!important}.chapter-opening .co-camera{transform:none}}

.chapter-opening[data-theme="general"] .co-engraving{display:none}
@media(max-width:600px){.chapter-opening{inset:48px 0 0}}
/* Atlas: geography fills the stage; the chrome stays at its edges. */
.geographic-scene{display:block!important;padding:0!important;overflow:hidden!important;color:#f0e4c9;background:#071620;isolation:isolate}
.geographic-scene .geo-canvas{position:absolute;inset:0;touch-action:none;background:radial-gradient(ellipse at 40% 35%,#173848,#06131d 78%)}
.geo-canvas>svg{width:100%;height:100%;display:block;cursor:grab;outline-offset:-3px}
.geo-canvas>svg:active{cursor:grabbing}
.geo-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#06141cd9,transparent 28%,transparent 67%,#06131ee8),radial-gradient(ellipse,transparent 45%,#020c154d);z-index:1}
.geographic-scene .ss-heading{position:absolute;top:16px;left:22px;right:20px;z-index:2;pointer-events:none;text-shadow:0 2px 10px #04101a}
.geographic-scene .ss-heading small{font:9px var(--font-mono);letter-spacing:2.5px;color:#d6b879;display:block}
.geographic-scene .ss-heading small span{letter-spacing:1px;color:#b6c4bc}
.geographic-scene .ss-heading h2{font:500 clamp(17px,2vw,26px)/1.35 var(--font-title,var(--font-body));margin:7px 0 0;color:#f7ebd3;letter-spacing:.06em}
.geo-controls{position:absolute;top:78px;left:22px;right:22px;z-index:4;display:flex;align-items:center;gap:8px}
.geo-controls button,.geo-places button,.geo-inspector button,.geo-instruments button{border:1px solid #b29a6150;background:#0b202cd9;color:#d8dccc;border-radius:5px;padding:7px 11px;font:11px var(--font-body);cursor:pointer;min-height:34px;transition:background .18s,color .18s,border-color .18s;flex:none}
.geographic-scene button:hover{background:#3b4e4d;color:#fff4d8;border-color:#d4b67b}
.geographic-scene button:disabled{opacity:.35;cursor:default}
.geographic-scene button:focus-visible,.geo-pin:focus-visible,.geographic-scene input:focus-visible,.geo-canvas>svg:focus-visible{outline:2px solid #f4cd7b;outline-offset:3px}
.geo-segment{display:flex;border:1px solid #b29a6150;border-radius:5px;overflow:hidden;background:#081c28e6}
.geo-segment button{border:0;border-radius:0;background:transparent}
.geo-segment button+button{border-left:1px solid #b29a6130}
.geo-controls [aria-pressed=true]{background:#c6a56b;color:#10242b}
.geo-controls [data-expand]{margin-left:auto}
.geo-layer-panel{position:absolute;z-index:7;left:205px;top:120px;width:195px;padding:15px;background:#0b202cf5;border:1px solid #b49a65;border-radius:8px;box-shadow:0 14px 35px #0007;backdrop-filter:blur(16px);font:12px/1.5 var(--font-body)}
.geo-layer-panel[hidden],.geo-inspector[hidden]{display:none}
.geo-layer-panel strong{display:block;color:#e7c994;font-weight:500;margin-bottom:8px}
.geo-layer-panel label{display:flex;align-items:center;gap:9px;min-height:33px;cursor:pointer}
.geo-layer-panel input{accent-color:#d4ae6b;width:16px;height:16px}
.geo-layer-panel small{display:block;border-top:1px solid #b29a6135;padding-top:8px;margin-top:8px;font-size:9px;color:#a9b5ac}
.geo-instruments{position:absolute;left:22px;top:132px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:center}
.geo-instruments button{width:32px;min-height:32px;padding:3px;font-size:17px}
.geo-compass{text-align:center;font:10px/1.3 var(--font-mono);color:#d8bd86;margin-bottom:9px;opacity:.85}
.geo-ocean{stroke:#74b5c16b;stroke-width:1.2}
.geo-coast-shadow{fill:none;stroke:#071e28;stroke-width:6;opacity:.6}
.geo-land{stroke:#d0d4ac9c;stroke-width:.65;stroke-linejoin:round}
.geo-grid{fill:none;stroke:#b4d8d5;stroke-width:.5;opacity:.16}
.geo-shade{pointer-events:none}
.geo-pin{cursor:pointer}.geo-hit{fill:transparent;stroke:none}.geo-halo{fill:#e9c47d13;stroke:#ecd19980;stroke-width:1}.geo-pin.selected .geo-halo{stroke:#f7dca9;stroke-width:1.5;fill:#edc27322}
.geo-pin-core{fill:#f7d595;stroke:#fff0cb;stroke-width:1}.geo-pin.selected .geo-pin-core{fill:#ffe8b7;stroke:#d2a760;stroke-width:3}
.geo-quantity{fill:#edb76a33;stroke:#f4cd8c;stroke-width:1}
.geo-map-illustration>svg{width:44px;height:44px;overflow:visible;filter:drop-shadow(0 3px 3px #0008);pointer-events:none}
.geo-pin text{fill:#fff2d5;font:12px var(--font-body);paint-order:stroke;stroke:#091e29;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.geo-route-underlay{fill:none;stroke:#06232c;stroke-width:6;opacity:.6}
.geo-link{fill:none;stroke:#dfc494;stroke-width:1.7;stroke-dasharray:4 5;opacity:.75}
.geo-route-traveled{fill:none;stroke:#ffda90;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px #eab66c99)}
.geo-area{fill:#77cdb125;stroke:#9ac8b1;stroke-width:1.3;stroke-dasharray:5 4}
.geo-traveler{pointer-events:none}.geo-traveler>circle:first-child{fill:#ffda7c24;stroke:#ffe3a0;stroke-width:1}.geo-traveler>circle:nth-child(2){fill:#fff0bc;stroke:#8b7345}
.geo-inspector{position:absolute;right:22px;top:126px;z-index:3;width:218px;max-height:calc(100% - 260px);overflow:auto;display:grid;grid-template-columns:45px 1fr;gap:10px;padding:14px 14px 9px;border:1px solid #c6ac7666;border-top:2px solid #d6b77a;border-radius:2px 2px 8px 8px;background:linear-gradient(125deg,#17343aec,#0b202cef);box-shadow:0 12px 28px #0004;backdrop-filter:blur(15px);animation:geo-panel-in .25s ease-out}
.geo-inspector-art>svg{width:44px;height:56px;filter:drop-shadow(0 3px 5px #0006)}
.geo-inspector-copy small{font:9px var(--font-mono);letter-spacing:.6px;color:#b4c7bb}
.geo-inspector h3{font:500 19px/1.3 var(--font-title,var(--font-body));margin:4px 0 7px;color:#ffe9b8}
.geo-inspector p{font:11px/1.8 var(--font-body);margin:0 0 8px;color:#e1dfce}
.geo-inspector nav{grid-column:1/-1;display:flex;gap:5px;border-top:1px solid #a7b7a530;padding-top:7px}
.geo-inspector nav button{min-height:27px;padding:1px 12px;background:transparent;border-color:transparent}
.geo-inspector nav button:last-child{margin-left:auto}
.geo-minimap{position:absolute;bottom:92px;right:22px;width:118px;z-index:2;border:1px solid #b0bba22b;border-radius:5px;background:#0c2028b3;pointer-events:none;opacity:.8}
.geo-minimap svg{display:block;width:100%}.geo-mini-ocean{fill:#142c35;stroke:#829b9755}.geo-mini-land{fill:#688273;stroke:none}.geo-mini-focus{fill:#ebc27155;stroke:#ffe2a0;stroke-width:1.5}
.geo-dock{position:absolute;left:22px;right:22px;bottom:32px;z-index:4;border:1px solid #c2ad793d;border-radius:8px;background:linear-gradient(110deg,#0c242ed9,#0b1c28eb);box-shadow:0 8px 25px #0003;backdrop-filter:blur(18px)}
.geo-places{display:flex;gap:5px;overflow:auto;scrollbar-width:thin;padding:8px 12px}
.geo-places button{background:transparent;border:1px solid transparent;padding:4px 8px;min-height:28px;font-size:10px;white-space:nowrap}
.geo-places button>span{color:#b6a779;font:9px var(--font-mono);margin-right:3px}.geo-places button>b{font-weight:400;color:#dec68b;font-size:9px}
.geo-places [aria-pressed=true]{border-color:#d8b98088;background:#c8b17715;color:#ffe4b2}
.geographic-scene .geo-detail{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.geographic-scene .ss-stamp{position:absolute!important;bottom:9px;left:22px;right:22px;z-index:3;text-align:right;font:8px/1.4 var(--font-body);color:#bcc7ba;max-height:20px;overflow:auto}
.geo-dialog{width:calc(100vw - 36px);height:calc(100dvh - 36px);max-width:1600px;max-height:none;padding:0;border:1px solid #bba06f;border-radius:10px;background:#071620;box-shadow:0 30px 100px #0009;overflow:hidden}
.geo-dialog::backdrop{background:#020a10bd;backdrop-filter:blur(8px)}
.geo-dialog>.geographic-scene{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:9px}
.geo-expanded .ss-heading h2{font-size:clamp(22px,3vw,36px)}.geo-expanded .geo-controls{top:98px}.geo-expanded .geo-instruments{top:150px}.geo-expanded .geo-inspector{top:150px}.geo-expanded .geo-layer-panel{top:140px}
@keyframes geo-panel-in{from{transform:translateY(6px)}to{transform:translateY(0)}}
.geo-reduced *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.geographic-scene *{animation:none!important;transition:none!important}}
@media(max-width:600px){
 .geographic-scene .ss-heading{top:9px;left:12px;right:12px}.geographic-scene .ss-heading small{font-size:7px;letter-spacing:1.4px}.geographic-scene .ss-heading h2{font-size:15px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .geo-controls{left:12px;right:12px;top:53px;gap:5px}.geo-controls button{font-size:10px;min-height:30px;padding:5px 9px}.geo-controls [data-expand]>span{display:none}.geo-controls [data-expand]{font-size:17px;min-width:31px;padding:0 6px}
 .geo-layer-panel{left:auto;right:12px;top:88px;width:174px;padding:10px}.geo-layer-panel label{min-height:29px}.geo-layer-panel small{font-size:8px}
 .geo-instruments{left:12px;top:97px;gap:4px}.geo-instruments button{width:29px;min-height:29px;font-size:16px}.geo-compass{display:none}
 .geo-inspector{right:12px;top:95px;width:146px;max-height:calc(100% - 214px);padding:9px;grid-template-columns:25px 1fr;gap:6px}.geo-inspector-art>svg{width:25px;height:38px}.geo-inspector h3{font-size:14px;margin:2px 0 4px}.geo-inspector p{font-size:10px;line-height:1.5;margin-bottom:3px}.geo-inspector-copy small{font-size:8px}.geo-inspector .geo-coordinates{display:none}.geo-inspector nav{padding-top:2px}.geo-inspector nav button{padding:0 9px;min-height:23px}
 .geo-minimap{display:none}.geo-dock{left:10px;right:10px;bottom:29px;border-radius:6px}.geo-places{padding:3px 6px 5px;gap:1px}.geo-places button{font-size:9px;padding:3px 6px;min-height:25px}.geo-places button>span{font-size:8px}
 .geographic-scene .ss-stamp{left:12px;right:12px;bottom:5px;font-size:7px;max-height:19px}.geo-pin text{font-size:10px}.geo-map-illustration>svg{width:36px;height:36px}.geo-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:6px}.geo-expanded .ss-heading h2{font-size:20px}.geo-expanded .geo-controls{top:64px}.geo-expanded .geo-instruments,.geo-expanded .geo-inspector{top:109px}.geo-expanded .geo-layer-panel{top:101px}.geo-expanded .geo-inspector{max-height:calc(100% - 235px)}
}
.book-experience #stage.off-era:has(.geographic-scene)::after{display:none}
.geographic-scene{container-type:size}
@container (max-height:430px) {
 .ss-heading{top:10px!important}.ss-heading h2{font-size:18px!important;margin-top:4px!important}
 .geo-controls{top:57px}.geo-controls button{min-height:28px;padding-top:4px;padding-bottom:4px}
 .geo-instruments{top:98px;gap:3px}.geo-compass{display:none}
 .geo-dock{bottom:27px}
 .geo-places{padding-top:3px;padding-bottom:4px}.geo-places button{min-height:23px}
 .geo-inspector{top:96px;max-height:calc(100% - 197px)}.geo-minimap{display:none}
 .geo-layer-panel{top:94px;max-height:calc(100% - 117px);overflow:auto}
}
@media(max-width:600px){.geographic-scene .ss-heading h2{font-size:15px!important}.geo-controls{top:53px}}
.geo-inspector{grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.geo-inspector-copy{min-height:0;overflow:auto;scrollbar-width:thin}
.geo-inspector nav{position:relative;z-index:1;background:#102a32}
@media(max-width:600px){
 .geo-controls [data-expand]>span{display:inline;font-size:9px}.geo-controls [data-expand]{font-size:13px;padding:3px 7px}
 .geo-instruments{flex-direction:row;top:95px;gap:4px}.geo-instruments button{width:28px;min-height:28px}
 .geo-inspector{grid-template-columns:1fr;gap:3px}.geo-inspector-art{display:none}.geo-inspector-copy{padding-right:3px}.geo-inspector nav{gap:2px}.geo-inspector nav button{min-height:24px}
}
.geo-layer-panel [data-motion-system]{display:block;width:100%;border:1px solid #82937e66;border-radius:4px;background:#17313a;color:#d6d6bf;font:9px var(--font-body);padding:7px;margin-top:6px;cursor:pointer}
/* Authored atlas treatments: an orbit, a distribution, or two hemispheres. */
.geo-story-caption{position:absolute;left:24%;right:9%;bottom:76px;z-index:2;margin:0;color:#f0dcac;font:13px/1.65 var(--font-display);text-align:center;background:linear-gradient(90deg,transparent,#061923df,transparent);padding:8px;pointer-events:none}
.geo-status-label{fill:#f8daa0!important;font-size:11px!important;paint-order:stroke;stroke:#122833;stroke-width:4px}
.geo-pair-name{fill:#e9d7b3;font:16px var(--font-display)}.geo-pair-status{fill:#d3af83;font:12px var(--font-body)}
.geographic-scene[data-treatment="paired"] .geo-instruments,.geographic-scene[data-treatment="paired"] .geo-minimap{display:none}
.geographic-scene[data-treatment="paired"] .geo-controls [data-projection],.geographic-scene[data-treatment="paired"] .geo-controls [data-view],.geographic-scene[data-treatment="paired"] .geo-controls [data-layers]{display:none}
.geographic-scene[data-treatment="paired"] .geo-story-caption{left:10%;right:10%;bottom:64px}
.geo-paired-globes [role="button"]{cursor:pointer}.geo-paired-globes [role="button"]:focus{outline:none;filter:drop-shadow(0 0 4px #ffe2a9)}
@media(max-width:600px){.geo-story-caption{left:14%;right:6%;bottom:62px;font-size:10px;line-height:1.5;padding:3px}.geo-pair-name{font-size:12px}.geo-pair-status{font-size:10px}}
.geo-distribution-name{font-size:13px!important;fill:#f6e4bc!important}.geo-distribution-status{font-size:10px!important;fill:#d1b781!important}
@media(max-width:600px){.geo-distribution-name{font-size:11px!important}.geo-distribution-status{font-size:9px!important}}

/* Expanded maps expose navigation even when an authored story hides compact controls. */
body .geo-dialog .geo-controls .geo-segment{display:flex!important}
body .geo-dialog .geo-controls{left:12px!important;right:12px!important;flex-wrap:wrap}
.kp-scene{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(ellipse at 65% 38%,#3a4036,#161f20 60%,#101718);color:#ecdcb9;overflow:hidden!important;container-type:size;padding:22px 32px 10px;isolation:isolate}
.kp-grain{position:absolute;inset:0;opacity:.055;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:3}
.kp-heading{position:relative;z-index:2;padding-bottom:8px}.kp-heading small{font:9px var(--font-body);letter-spacing:.2em;color:#baa37d}.kp-heading h2{margin:6px 0 0;font:500 clamp(18px,2vw,30px)/1.4 var(--font-display);letter-spacing:.07em}.kp-canvas{min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.kp-canvas>svg{width:100%;height:100%;max-height:100%}.kp-credit{font:8px/1.4 var(--font-body);color:#b7ac96;padding-top:6px;position:relative;z-index:4}
.kp-canvas button{color:#e8cca0;border:1px solid #bba07070;background:#122a2a;padding:8px 12px;font:11px var(--font-body);cursor:pointer;min-height:35px}.kp-canvas button:hover,.kp-canvas button[aria-pressed=true]{background:#c2a679;color:#1b2524}.kp-canvas button:focus-visible{outline:2px solid #fff1c8;outline-offset:3px}.kp-canvas small{font:10px/1.6 var(--font-body);letter-spacing:.06em;color:#c1a97c}
.kp-dogu-layout{width:100%;height:100%;display:grid;grid-template-columns:55% 45%;gap:0}.kp-artifact{position:relative;overflow:hidden;background:#6e665340;border:1px solid #bba57730;border-radius:40% 40% 4px 4px}.kp-dogu-svg{width:100%;height:100%;display:block}.kp-photo-meta{position:absolute;left:12px;bottom:8px;background:#172120d9;color:#dbc9a7;padding:5px 9px;font:9px/1.6 var(--font-body)}.kp-observation{padding:4% 7%;display:flex;flex-direction:column;justify-content:center;min-width:0}.kp-observation h3{font:500 clamp(20px,2.6vw,40px)/1.7 var(--font-display);margin:16px 0;letter-spacing:.08em}.kp-observation p{font:12px/1.9 var(--font-body);color:#c1bba5}.kp-observation>svg{width:100%;max-height:48%}.kp-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.kp-portrait{width:100%;height:100%;display:grid;grid-template-columns:45% 55%;align-items:center}.kp-portrait>img{width:85%;height:94%;object-fit:contain;object-position:center;filter:sepia(.35);mask-image:linear-gradient(to bottom,#000 84%,transparent)}.kp-portrait h3{font:500 clamp(24px,3.7vw,54px)/1.4 var(--font-display);letter-spacing:.14em;margin:14px 0}.kp-portrait p{font:14px/2 var(--font-body);max-width:30em;color:#c7bea4}.kp-portrait blockquote{border-left:1px solid #c2a06a;margin:18px 0;padding:0 20px;font:18px/1.9 var(--font-display)}
.kp-dossier{display:grid;grid-template-columns:52% 48%;width:95%;height:90%;gap:2%}.kp-paper{position:relative;transform:rotate(-2deg);background:#e4d5b1;color:#413a2b;padding:24px 28px;box-shadow:12px 12px 30px #0004;border:1px solid #bfa779;overflow:auto}.kp-paper small{color:#776745}.kp-paper blockquote{position:relative;font:clamp(16px,2vw,27px)/2 var(--font-display);margin:20px 0}.kp-paper p{font:10px/1.7 var(--font-body)}.kp-paper-rules{position:absolute;inset:60px 15px 22px;background:repeating-linear-gradient(90deg,transparent 0 34px,#9a805521 34px 35px);pointer-events:none}.kp-object{display:flex;flex-direction:column;justify-content:center;text-align:center}.kp-object>svg{width:100%;max-height:75%}.kp-object p{font:13px/1.8 var(--font-body);color:#d6c09a;margin:0}
.kp-cast{display:flex;width:100%;height:95%;gap:12px;align-items:center}.kp-cast figure{margin:0;flex:1;min-width:0;height:80%;opacity:.58;transition:opacity 700ms,transform 700ms}.kp-cast figure.kp-active{opacity:1;transform:translateY(-10px)}.kp-cast img{width:100%;height:70%;object-fit:cover;object-position:top;filter:sepia(.5);mask-image:linear-gradient(#000 80%,transparent)}.kp-cast figcaption{display:flex;flex-direction:column;gap:8px;text-align:center;font:14px var(--font-display)}.kp-cast figcaption span{font:10px/1.5 var(--font-body);color:#bea57c}
.kp-quote{max-width:900px;text-align:left;padding:25px 6%;position:relative}.kp-quote>span{position:absolute;left:-25px;top:-35px;font:220px Georgia;color:#d7b77b20}.kp-quote blockquote{margin:14px 0;font:clamp(22px,3.4vw,46px)/1.85 var(--font-display);letter-spacing:.08em}.kp-quote p{font:11px var(--font-body);color:#baa785}
.kp-dating{height:100%;width:100%;display:flex;flex-direction:column;align-items:center}.kp-dating>svg{width:100%;min-height:0;flex:1}.kp-age-axis{display:flex;gap:15px;align-items:center;width:85%;font:10px var(--font-body);min-height:58px}.kp-age-axis>div{position:relative;flex:1;height:45px;border-top:1px solid #beac8355}.kp-age-axis i{position:absolute;inset:-6px 0 auto;height:11px;background:#b8a58535}.kp-age-limit{position:absolute;left:38%;top:-10px;border-left:2px solid #f2d9a2;padding:20px 0 0 7px;font-weight:400;color:#f0d8a3;transition:opacity 600ms}.kp-age-range{position:absolute;left:39%;right:0;top:-7px;height:13px;background:#e4bd7899;font-size:11px;text-align:center;padding-top:30px;white-space:nowrap;transition:clip-path 1300ms,opacity 700ms;clip-path:inset(0);font-weight:400}.kp-dating[data-age=old] .kp-age-limit,.kp-dating[data-age=old] .kp-age-range{opacity:0}.kp-dating[data-age=old] .kp-age-range{clip-path:inset(0 100% 0 0)}.kp-age-note{margin:12px 0 8px;font:12px/1.6 var(--font-body);color:#d2bd94}
.kp-reading{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:15px 40px;width:90%;max-height:100%}.kp-fixed-fact{grid-row:1/3;border-right:1px solid #ac95613d;padding:20px 30px 20px 0;display:flex;flex-direction:column;justify-content:center}.kp-fixed-fact h3{font:500 clamp(22px,3vw,41px)/1.8 var(--font-display);margin:12px 0}.kp-reading-lenses{display:flex;gap:8px;align-items:end}.kp-reading-answer h4{font:22px/1.7 var(--font-display);margin:10px 0}.kp-reading-answer p{font:13px/1.8 var(--font-body);color:#d0c6ad}.kp-reading-answer small{font-size:9px}
.kp-witness{width:90%;display:grid;grid-template-columns:20% 1fr;gap:8%;align-items:center;height:95%}.kp-witness-margin{height:100%;display:flex;flex-direction:column;gap:7px;overflow:hidden;opacity:.28}.kp-witness-margin img{width:100%;height:31%;object-fit:cover;object-position:top;filter:sepia(.5)}.kp-witness h3{font:500 clamp(25px,4vw,56px)/1.5 var(--font-display);letter-spacing:.12em;margin:14px 0}.kp-witness p{font:14px/2 var(--font-body);max-width:38em;color:#d1c8b0}.kp-witness-line{width:65px;height:1px;background:#d8bb80;margin:25px 0}.kp-witness strong{font:18px/1.8 var(--font-display);color:#e5c694}
.chapter-opening[data-theme=koropokkuru]{background:#101a1d}.chapter-opening[data-theme=koropokkuru] .co-engraving{display:none}.chapter-opening[data-theme=koropokkuru] .co-copy{width:62%;top:27%}.chapter-opening[data-theme=koropokkuru] .co-copy h1{font-size:clamp(28px,4vw,62px)}.chapter-opening[data-theme=koropokkuru] .co-shade{background:linear-gradient(90deg,#101a1df5 12%,#101a1db0 47%,#101a1d08 78%),linear-gradient(0deg,#0d181bf5,transparent 40%)}.kp-opening-dogu{position:absolute;inset:-8% -5% -16% 37%;transform:rotate(-8deg)}.kp-opening-dogu img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;mask-image:linear-gradient(90deg,transparent,#000 25%)}.kp-opening-portrait{position:absolute;inset:0 0 -22% 48%}.kp-opening-portrait img{width:100%;height:100%;object-fit:contain;filter:sepia(.7);mask-image:linear-gradient(90deg,transparent,#000 28%)}.kp-opening-text{position:absolute;right:4%;top:12%;font:50px/1.8 var(--font-display);writing-mode:vertical-rl;color:#ebd4a522;transform:rotate(7deg)}.kp-opening-strata{position:absolute;inset:-7% -10% 0 0;opacity:.65}.kp-opening-strata svg,.kp-opening-pipe svg{width:100%;height:100%}.kp-opening-pipe{position:absolute;inset:15% -10% 0 38%;transform:rotate(-18deg)}.kp-opening-return{filter:saturate(.6);inset:-20% -3% -30% 37%;transform:rotate(4deg)}.kp-opening-rings{position:absolute;inset:5% 4% 8% 49%;border:1px solid #d7bb6d4d;border-radius:50%;box-shadow:0 0 0 18px #d7bb6d0a,0 0 0 80px #d7bb6d08}
body[data-book-kind=koropokkuru] #stage.off-era::after{display:none}body[data-book-kind=koropokkuru] #say{white-space:normal}body[data-book-kind=koropokkuru] #timeline{display:none}
@container(max-height:360px){.kp-heading{padding-bottom:3px}.kp-heading h2{font-size:19px}.kp-observation h3{font-size:24px;margin:8px 0}.kp-observation p{font-size:11px;margin:5px 0}.kp-tools{margin-top:6px}.kp-portrait h3{font-size:32px}.kp-portrait p{font-size:12px}.kp-portrait blockquote{font-size:14px;margin:8px 0}.kp-paper{padding:12px 18px}.kp-paper blockquote{font-size:18px;margin:10px 0}.kp-quote blockquote{font-size:25px}.kp-witness h3{font-size:32px}.kp-witness p{font-size:12px}.kp-witness-line{margin:12px 0}.kp-witness strong{font-size:15px}.kp-fixed-fact h3{font-size:25px}.kp-reading-answer h4{font-size:19px}.kp-reading-answer p{font-size:12px}.kp-age-note{font-size:11px;margin:5px 0}.kp-age-axis{min-height:49px}}
@media(max-width:600px){.kp-scene{padding:11px 12px 6px}.kp-heading small{font-size:7px;letter-spacing:.08em}.kp-heading h2{font-size:16px;margin-top:5px;letter-spacing:.01em}.kp-credit{font-size:7px}.kp-dogu-layout{grid-template-columns:51% 49%}.kp-observation{padding:4px 0 4px 12px}.kp-observation small{font-size:8px}.kp-observation h3{font-size:18px;line-height:1.7;margin:8px 0}.kp-observation p{font-size:10px;line-height:1.6;margin:4px 0}.kp-tools{gap:5px;margin-top:7px}.kp-canvas button{font-size:9px;padding:6px 8px;min-height:30px}.kp-photo-meta{font-size:7px;left:4px;bottom:4px;padding:3px}.kp-portrait{grid-template-columns:40% 60%}.kp-portrait h3{font-size:22px;margin:8px 0}.kp-portrait p{font-size:10px;line-height:1.7}.kp-portrait blockquote{font-size:12px;padding-left:8px;margin:8px 0}.kp-canvas small{font-size:8px}.kp-cast{gap:5px;flex-wrap:wrap;align-content:center}.kp-cast figure{flex:0 0 calc(33% - 4px);height:45%;opacity:.8}.kp-cast figure.kp-active{transform:none}.kp-cast figcaption{font-size:10px;gap:2px}.kp-cast figcaption span{font-size:8px}.kp-dossier{width:98%;grid-template-columns:65% 35%;gap:0}.kp-paper{padding:12px}.kp-paper blockquote{font-size:14px;line-height:1.9;margin:12px 0}.kp-paper p{font-size:8px}.kp-object p{font-size:9px}.kp-quote{padding:6px 4%}.kp-quote blockquote{font-size:20px;line-height:1.8;margin:8px 0}.kp-quote p{font-size:9px}.kp-dating>svg{min-height:50px}.kp-age-axis{width:96%;gap:5px;font-size:8px;min-height:55px}.kp-age-range{font-size:8px;padding-top:32px}.kp-age-limit{font-size:8px;padding-top:17px}.kp-age-note{font-size:9px;margin:4px 0}.kp-reading{width:96%;gap:7px 12px;grid-template-columns:44% 56%;padding-right:8px}.kp-fixed-fact{padding:8px 9px 8px 0}.kp-fixed-fact h3{font-size:18px;line-height:1.8}.kp-reading-lenses{gap:4px;flex-wrap:wrap}.kp-reading-answer h4{font-size:15px;line-height:1.6;margin:8px 0}.kp-reading-answer p{font-size:10px;line-height:1.8;margin:5px 0}.kp-reading-answer small{font-size:7px}.kp-witness{width:98%;gap:6%;grid-template-columns:16% 1fr}.kp-witness h3{font-size:25px;letter-spacing:.05em;margin:8px 0}.kp-witness p{font-size:11px;line-height:1.8}.kp-witness-line{margin:12px 0}.kp-witness strong{font-size:13px}.chapter-opening[data-theme=koropokkuru] .co-copy{width:88%;top:24%}.chapter-opening[data-theme=koropokkuru] .co-copy h1{font-size:28px}.chapter-opening[data-theme=koropokkuru] .co-camera{inset:0 -12%}.kp-opening-dogu{inset:-2% -8% -2% 22%;opacity:.75}.kp-opening-portrait{inset:0 -6% -10% 22%}.kp-opening-text{font-size:33px}.kp-opening-pipe{inset:15% -45% 0 0}.chapter-opening[data-theme=koropokkuru] .co-note{max-width:28em}}
@media(prefers-reduced-motion:reduce){.kp-scene *{animation:none!important;transition:none!important}}
.kp-methods{display:flex;width:96%;height:94%;gap:5%;align-items:center}.kp-methods figure{flex:1;min-width:0;margin:0}.kp-methods figure>small{display:block;font:18px var(--font-mono);letter-spacing:.12em;border-top:1px solid #b89c594d;padding-top:12px;color:#c9ac77}.kp-methods svg{width:100%;height:auto;max-height:29cqh}.kp-methods h3{font:22px/1.5 var(--font-display);margin:10px 0}.kp-methods p{font:12px/1.8 var(--font-body);color:#c2b797}.kp-four-methods{gap:3%}.kp-four-methods h3{font-size:19px}.kp-four-methods p{font-size:11px}
@media(max-width:600px){.kp-methods{gap:4%;height:95%;align-items:center}.kp-methods figure>small{font-size:11px;padding-top:5px}.kp-methods h3{font-size:12px;line-height:1.7;margin:5px 0}.kp-methods p{font-size:9px;line-height:1.7;margin:3px 0}.kp-methods svg{max-height:30cqh}.kp-four-methods{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px}.kp-four-methods figure{display:grid;grid-template-columns:42% 58%;grid-template-rows:16px 1fr;align-items:center}.kp-four-methods figure>small{grid-column:1/3}.kp-four-methods h3{font-size:11px}.kp-four-methods svg{height:80px}.kp-four-methods p{font-size:8px}}
/* Keep the defining eye inside the chapter's first image. */
.kp-opening-dogu img{object-position:50% 18%}
/* The upper visual is the main subject, including short phone displays. */
@media(max-width:600px){
 body[data-book-kind=koropokkuru] #open-book{height:47dvh}
 body[data-book-kind=koropokkuru] #deck{top:47dvh}
 body[data-book-kind=koropokkuru] .geo-controls .geo-segment{display:none}
 body[data-book-kind=koropokkuru] .geo-controls{left:auto;right:12px;top:51px}
 body[data-book-kind=koropokkuru] .geo-controls [data-layers]{min-width:40px}
 body[data-book-kind=koropokkuru] .geo-instruments{top:91px;flex-direction:column}
 body[data-book-kind=koropokkuru] .geo-instruments [data-zoom]{display:none}
 body[data-book-kind=koropokkuru] .geo-story-caption{left:8%;right:8%;font-size:10px;bottom:64px;line-height:1.6}
 body[data-book-kind=koropokkuru] .kp-dating>svg{flex:1 1 auto;min-height:85px}
 body[data-book-kind=koropokkuru] .kp-dating .kp-age-axis{min-height:47px}
}
@media(max-width:600px) and (max-height:720px){
 body[data-book-kind=koropokkuru] #open-book{height:49dvh}
 body[data-book-kind=koropokkuru] #deck{top:49dvh}
 body[data-book-kind=koropokkuru] .kp-observation h3{font-size:16px}
 body[data-book-kind=koropokkuru] .kp-observation p{font-size:9px}
 body[data-book-kind=koropokkuru] .kp-tools{margin-top:4px}
}
@media(max-width:600px) and (max-height:720px){
 .kp-dating .kp-age-note{display:none}
 body[data-book-kind=koropokkuru] .kp-dating>svg{min-height:55px}
 .kp-dating [data-age-toggle]{flex-shrink:0;min-height:27px;padding:4px 8px;margin-top:3px}
 .kp-dating .kp-age-axis{flex-shrink:0}
}
.kp-age-range{height:48px;background:linear-gradient(#e4bd7899 0 13px,transparent 13px);line-height:14px}
@media(max-width:600px){body[data-book-kind=koropokkuru] .geographic-scene[data-treatment=distribution] .geo-instruments{display:none}}
@media(max-width:600px){.kp-observation>svg{max-height:29%;flex:0 1 60px;min-height:0}.kp-observation .kp-tools{flex-shrink:0}.kp-observation .kp-tools button{padding:5px 7px}}

/* Keep the narration readable without paragraph-sized gaps or redundant wrapped progress. */
@media(max-width:600px) and (max-height:720px){
 body[data-book-kind=koropokkuru] #narration{padding:8px 14px 6px;gap:4px}
 body[data-book-kind=koropokkuru] #narration .speaker{line-height:16px;margin-bottom:4px;letter-spacing:0}
 body[data-book-kind=koropokkuru] #beat-dots{display:none}
 body[data-book-kind=koropokkuru] #say{line-height:1.6}
}

/* Constrain intrinsic portrait dimensions to the actual canvas row. */
.kp-portrait{min-height:0;min-width:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,45%) minmax(0,55%)}
.kp-portrait>img{min-height:0;min-width:0;max-height:100%;height:100%;object-fit:contain}
.kp-portrait>div{min-width:0;min-height:0;padding:8px 4%}
.kp-portrait h3{font-size:clamp(22px,min(3.5cqw,9cqh),48px);letter-spacing:.06em;overflow-wrap:anywhere}
.kp-portrait p{font-size:clamp(11px,min(1.3cqw,3.5cqh),15px);line-height:1.8}
@media(max-width:600px){.kp-portrait{grid-template-columns:minmax(0,40%) minmax(0,60%)}.kp-portrait>div{padding:4px 0 4px 10px}.kp-portrait h3{font-size:clamp(18px,5cqw,22px);line-height:1.55;letter-spacing:0}.kp-portrait p{font-size:11px}.kp-portrait blockquote{font-size:11px}}

/* Overlapping conditions are stacked, never chained: no arrows, no invented figures. */
.kp-conditions{display:flex;flex-direction:column;justify-content:center;width:94%;height:94%;gap:2%}
.kp-conditions ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2%;flex:1;justify-content:center}
.kp-conditions li{display:flex;align-items:baseline;gap:18px;padding:6px 4px;border-top:1px solid #b89c5940}
.kp-conditions li:last-child{border-bottom:1px solid #b89c5940}
.kp-conditions small{font:17px var(--font-mono);letter-spacing:.12em;color:#c9ac77;flex:0 0 auto}
.kp-conditions h3{font:19px/1.35 var(--font-display);margin:0 0 2px;color:#f0e2c2}
.kp-conditions p{font:12px/1.6 var(--font-body);margin:0;color:#c2b797}
.kp-conditions-note{font:11px/1.5 var(--font-body);color:#a2977c;margin:0;max-width:62%}
@media(max-width:600px){.kp-conditions li{gap:10px;padding:6px 2px}.kp-conditions small{font-size:11px}.kp-conditions h3{font-size:13px;margin-bottom:1px}.kp-conditions p{font-size:10px;line-height:1.6}.kp-conditions-note{font-size:8px}}

/* Nothing in the upper frame may be cut off. The container is .kp-scene, which
   measures about 474px on desktop, 325px at 390 and 255px at 375 — so the
   breakpoints below are on the scene, not on the inner canvas. */
.kp-dogu-layout,.kp-portrait,.kp-dossier,.kp-cast,.kp-witness,.kp-reading,.kp-quote{min-height:0}
.kp-observation,.kp-portrait>div,.kp-witness>div{min-height:0;overflow:hidden}
@container(max-height:520px){
 .kp-observation h3{font-size:clamp(18px,2.1vw,30px);margin:5px 0;line-height:1.45}
 .kp-observation p{font-size:11px;line-height:1.6;margin:3px 0}
 .kp-observation>svg{max-height:30%}
 .kp-tools{margin-top:7px}
 .kp-canvas button{min-height:29px;padding:6px 10px;font-size:10px}
 .kp-portrait h3{font-size:clamp(22px,2.8vw,40px);margin:5px 0;line-height:1.25}
 .kp-portrait p{font-size:12px;line-height:1.7}
 .kp-portrait blockquote{margin:8px 0;font-size:15px;line-height:1.7}
 .kp-dossier{height:96%;gap:1.5%}
 .kp-paper{padding:13px 17px}
 .kp-paper blockquote{margin:8px 0;line-height:1.65;font-size:clamp(13px,1.4vw,19px)}
 .kp-paper-rules{inset:36px 10px 12px}
 .kp-object p{font-size:11px;line-height:1.55}
 .kp-quote{padding:8px 5%}
 .kp-quote blockquote{margin:6px 0;font-size:clamp(16px,2.1vw,29px);line-height:1.6}
 .kp-quote>span{font-size:150px;top:-18px;left:-14px}
 .kp-witness h3{font-size:clamp(22px,2.8vw,40px);margin:6px 0;line-height:1.3}
 .kp-witness p{font-size:12px;line-height:1.7}
 .kp-witness-line{margin:10px 0}
 .kp-witness strong{font-size:14px;line-height:1.6}
 .kp-cast{height:98%}
 .kp-cast figure{height:92%}
 .kp-cast figcaption{gap:3px;font-size:12px}
 .kp-cast figcaption span{font-size:9px;line-height:1.35}
 .kp-age-note{margin:5px 0 3px;font-size:11px}
 .kp-conditions li{padding:4px}
 .kp-conditions h3{font-size:17px}
 .kp-conditions p{font-size:11px;line-height:1.5}
 .kp-methods h3{font-size:17px;margin:5px 0}
 .kp-methods p{font-size:10px;line-height:1.6}
 .kp-methods figure>small{font-size:13px;padding-top:6px}
}
@container(max-height:340px){
 .kp-observation>svg{max-height:24%}
 .kp-portrait p,.kp-witness p{font-size:11px;line-height:1.55}
 .kp-portrait blockquote{font-size:12px;margin:5px 0;line-height:1.6}
 .kp-quote blockquote{font-size:clamp(14px,1.9vw,22px);line-height:1.5;margin:4px 0}
 .kp-quote p{font-size:9px}.kp-quote>span{display:none}
 .kp-paper blockquote{font-size:clamp(11px,1.2vw,15px);line-height:1.5;margin:5px 0}
 .kp-paper{padding:9px 12px}.kp-paper p{font-size:8px}.kp-paper-rules{inset:28px 8px 8px}
 .kp-cast figcaption{font-size:10px}.kp-cast figcaption span{font-size:8px;line-height:1.3}
 .kp-cast img{height:64%}
 .kp-conditions li{padding:2px 4px}.kp-conditions h3{font-size:13px}.kp-conditions p{font-size:9px;line-height:1.45}
 .kp-conditions-note{font-size:8px}
 .kp-methods h3{font-size:12px}.kp-methods p{font-size:9px;line-height:1.5}
 .kp-witness strong{font-size:12px}.kp-witness-line{margin:7px 0}
 .kp-age-note{font-size:9px;margin:3px 0}
}
@container(max-height:270px){
 .kp-portrait p,.kp-witness p{font-size:10px;line-height:1.5}
 .kp-portrait h3,.kp-witness h3{font-size:19px;margin:4px 0}
 .kp-quote blockquote{font-size:clamp(12px,1.6vw,17px);line-height:1.45}
 .kp-paper blockquote{font-size:11px;line-height:1.45}
 .kp-cast figure{height:96%}.kp-cast img{height:58%}
 .kp-cast figcaption span{font-size:7px}
 .kp-conditions h3{font-size:11px}.kp-conditions p{font-size:8px}
 .kp-methods h3{font-size:10px}.kp-methods p{font-size:8px;line-height:1.45}
 .kp-observation>svg{max-height:20%}
}
/* The shared comparison table also has to fit this book's shorter frame. */
body[data-book-kind=koropokkuru] .ss-comparison{gap:4px 18px;align-content:center}
body[data-book-kind=koropokkuru] .ss-subject h3{font-size:clamp(14px,1.6vw,20px);margin:2px 0}
body[data-book-kind=koropokkuru] .ss-subject p{font-size:10px;line-height:1.35}
body[data-book-kind=koropokkuru] .ss-axis{padding-top:3px}
body[data-book-kind=koropokkuru] .ss-axis>div{font-size:11px;line-height:1.45;gap:14px}
body[data-book-kind=koropokkuru] .ss-axis>small{font-size:8px}
@media(max-width:600px){
 body[data-book-kind=koropokkuru] .ss-subject h3{font-size:13px}
 body[data-book-kind=koropokkuru] .ss-subject p{font-size:8px}
 body[data-book-kind=koropokkuru] .ss-axis>div{font-size:9px;line-height:1.4;gap:8px}
 body[data-book-kind=koropokkuru] .ss-axis>small{font-size:7px}
 body[data-book-kind=koropokkuru] .ss-comparison{gap:2px 8px}
}
/* The tilted document sheet grows its own box; give it room instead of clipping. */
.kp-dossier{height:86%}
@container(max-height:340px){.kp-dossier{height:90%}}
/* Five portraits must fit the phone frame in two rows without spilling. */
@media(max-width:600px){
 .kp-cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4px 8px;height:100%;align-content:stretch;flex-wrap:nowrap}
 .kp-cast figure{flex:none;height:100%;min-height:0;display:flex;flex-direction:column;opacity:.72}
 .kp-cast figure.kp-active{opacity:1;transform:none}
 .kp-cast img{flex:1;min-height:0;height:auto;width:100%}
 .kp-cast figcaption{flex:none;gap:1px;font-size:9px;line-height:1.3}
 .kp-cast figcaption span{font-size:7px;line-height:1.25}
}
@container(max-height:520px){
 .kp-portrait>img{height:88%}
 .kp-portrait p{font-size:11px;line-height:1.6;max-width:26em}
 .kp-quote blockquote{font-size:clamp(15px,1.9vw,26px);line-height:1.55}
}
/* Grid rows default to auto, so a tall child grew past its own container. */
.kp-dossier{grid-template-rows:minmax(0,1fr)}
.kp-paper,.kp-object{min-height:0}
.kp-reading{grid-template-rows:auto minmax(0,1fr)}
.kp-methods figure,.kp-methods figcaption{min-height:0}
/* Headings were losing their last few pixels to a clipped line box. */
.kp-portrait h3,.kp-witness h3,.kp-observation h3,.kp-fixed-fact h3{padding-bottom:2px}
@container(max-height:520px){
 .kp-quote{padding:6px 5%;max-height:100%}
 .kp-quote blockquote{font-size:clamp(14px,1.7vw,23px);line-height:1.5;margin:5px 0}
 .kp-dossier{height:88%}
 .kp-paper{padding:11px 15px}
 .kp-paper blockquote{font-size:clamp(12px,1.25vw,17px);line-height:1.55;margin:6px 0}
}
@media(max-width:600px){
 .kp-four-methods{gap:3px 12px}
 .kp-four-methods figure{grid-template-rows:13px 1fr}
 .kp-four-methods figure>small{font-size:9px;padding-top:2px}
 .kp-four-methods h3{font-size:10px;margin:2px 0}
 .kp-four-methods p{font-size:7px;line-height:1.35}
 .kp-four-methods svg{height:56px}
}
/* The oversized opening quotation mark is decoration; it must not size the box. */
.kp-quote>span{line-height:0}
/* A tilted sheet needs room for the corners its rotation adds. */
.kp-dossier{height:78%}
@container(max-height:340px){.kp-dossier{height:84%}}
@media(max-width:600px){.vl-artifact figure>svg{min-height:60px}.vl-artifact ol{font-size:9px;line-height:1.35}}
body[data-book-kind=koropokkuru] .ss-subject{padding:0 6px}
body[data-book-kind=koropokkuru] .ss-subject .ss-icon{width:30px;height:30px}
/* The illustration column was taller than its grid row, pushing the sheet out. */
.kp-object{overflow:hidden}
.kp-object>svg{max-height:60%;min-height:0;flex:0 1 auto}
.kp-paper{transform:rotate(-1.2deg)}
@container(max-height:340px){.kp-object>svg{max-height:48%}}
/* On phones the frame is too short to spare pixels for a decorative tilt. */
@media(max-width:600px){
 .kp-paper{transform:none;box-shadow:6px 6px 16px #0004}
 .kp-dossier{height:94%}
}
/* The sheet is a grid item: pin it to the row so its content cannot grow it. */
.kp-dossier{grid-auto-rows:minmax(0,1fr)}
.kp-paper{height:100%;max-height:100%;box-sizing:border-box}
@media(max-width:600px){.kp-dossier{height:88%}}
@media(max-width:600px){.kp-dossier{height:85%}.kp-object p{font-size:8px;line-height:1.5}}

/* Arrow illustration: generated lettering removed; accessible Japanese lives in HTML. */
.kp-trade-art{width:100%;max-width:min(1100px,170cqh);max-height:100%;background:#fbf3e2;border-radius:6px;padding:14px 8px 10px;box-sizing:border-box;display:flex;flex-direction:column;color:#462d1d}
.kp-trade-art>svg{display:block;width:100%;min-height:0;flex:1 1 auto;aspect-ratio:900/265}
.kp-trade-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;text-align:center;flex:none}
.kp-trade-labels span{font:500 clamp(9px,1.25vw,16px)/1.6 var(--font-body);border-radius:4px;padding:5px 0}
.kp-trade-art>p{text-align:center;font:12px/1.6 var(--font-body);margin:8px 0 0;flex:none}
.kp-trade-collect{transform:translateY(-10px)}
@media(max-width:600px){.kp-trade-art{padding:10px 3px;max-width:100%}.kp-trade-labels{gap:0}.kp-trade-labels span{font-size:9px;letter-spacing:-.04em}.kp-trade-art>p{font-size:10px;margin-top:5px}.kp-trade-art>svg{max-height:38cqh}}

/* Short windows gave the narration 51px of 216 while the question desk took 106.
   Rebalance so the text people read gets the space. Scoped to this book while
   another session is editing the shared layout. */
@media(min-width:601px) and (max-height:860px){
 body[data-book-kind=koropokkuru].book-experience #open-book{bottom:calc(40vh + 38px)}
 body[data-book-kind=koropokkuru].book-experience #deck{height:39vh;min-height:160px}
 body[data-book-kind=koropokkuru] #question-desk{padding:8px 14px}
 body[data-book-kind=koropokkuru] #suggest{gap:4px}
 body[data-book-kind=koropokkuru] #suggest button{font-size:10px;padding:4px 8px}
 body[data-book-kind=koropokkuru].book-experience #say{font-size:15px;line-height:1.72}
}
@media(min-width:601px) and (max-height:700px){
 /* 上の図が潰れない高さを先に取り、本文は字を詰めて同じ行数を確保する。 */
 body[data-book-kind=koropokkuru].book-experience #open-book{bottom:calc(41vh + 14px)}
 body[data-book-kind=koropokkuru].book-experience #deck{height:38vh;min-height:0}
 body[data-book-kind=koropokkuru] #suggest{display:none}
 body[data-book-kind=koropokkuru] #question-desk{padding:5px 12px;gap:5px}
 body[data-book-kind=koropokkuru] .transport{padding-top:2px}
 body[data-book-kind=koropokkuru] .transport button{padding:3px 7px;font-size:10px;min-height:0}
 body[data-book-kind=koropokkuru] #beat-dots{display:none}
 body[data-book-kind=koropokkuru].book-experience #narration{padding:8px 14px 6px;gap:4px}
 body[data-book-kind=koropokkuru].book-experience #say{font-size:13px;line-height:1.56}
}
/* 携帯でも、読むところを先に確保する。 */
@media(max-width:600px){
 body[data-book-kind=koropokkuru] .transport{padding-top:3px;gap:3px}
 body[data-book-kind=koropokkuru] .transport button{padding:3px 6px;font-size:10px;min-height:0}
 body[data-book-kind=koropokkuru] #beat-dots{display:none}
 body[data-book-kind=koropokkuru] #ask input{padding:6px 8px}
 body[data-book-kind=koropokkuru] #question-desk{padding:6px 12px 8px;gap:6px}
}
/* Where the text still runs long, show that it continues instead of ending flat. */
body[data-book-kind=koropokkuru].book-experience .narr-main{scrollbar-width:thin;scrollbar-color:#b39a6e #efe3cb;
 -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}

/* 比較の図は、行が枠より高くなれた。低い窓では字と印を詰めて枠内へ収める。 */
@media(max-height:880px){
 body[data-book-kind=koropokkuru] .ss-comparison{gap:3px 16px;align-content:center}
 body[data-book-kind=koropokkuru] .ss-subject .ss-icon{width:26px;height:26px}
 body[data-book-kind=koropokkuru] .ss-subject h3{font-size:14px;margin:1px 0}
 body[data-book-kind=koropokkuru] .ss-subject p{font-size:9px;line-height:1.3}
 body[data-book-kind=koropokkuru] .ss-axis>small{font-size:8px}
 body[data-book-kind=koropokkuru] .ss-axis>div{gap:10px;font-size:10px;line-height:1.5}
}
@media(max-height:700px){
 body[data-book-kind=koropokkuru] .ss-comparison{gap:1px 10px}
 body[data-book-kind=koropokkuru] .ss-subject .ss-icon{display:none}
 body[data-book-kind=koropokkuru] .ss-subject h3{font-size:12px}
 body[data-book-kind=koropokkuru] .ss-subject p{font-size:8px}
 body[data-book-kind=koropokkuru] .ss-axis>small{font-size:7px;letter-spacing:0}
 body[data-book-kind=koropokkuru] .ss-axis>div{gap:8px;font-size:9px;line-height:1.45}
 body[data-book-kind=koropokkuru] .semantic-scene{padding:8px 12px;gap:6px}
 body[data-book-kind=koropokkuru] .ss-heading h2{font-size:15px;line-height:1.35}
}

/* September revision: material depth supports observation without adding motion loops. */
.kp-scene[data-kp-mode="strata"]{background:radial-gradient(ellipse at 45% 48%,#554634 0,#272923 55%,#111b1d 100%)}
.kp-scene[data-kp-mode="dating"]{background:radial-gradient(ellipse at 50% 35%,#3d4c47,#152323 65%,#101718)}
.kp-artifact{background:radial-gradient(ellipse at 50% 40%,#a48b5945,#252923 70%);box-shadow:inset 0 0 40px #0005,0 12px 32px #0003}
.kp-find-pot,.kp-find-bone{filter:drop-shadow(3px 5px 3px #17130f99)}
.kp-scene[data-kp-mode="dating"] .kp-dating>svg{filter:drop-shadow(0 10px 7px #07100f88)}
.kp-paper{background:radial-gradient(ellipse at 15% 5%,#f4e6c8,#e4d5b1 65%,#cdb98e);border-color:#d1bc91}
.kp-scene[data-kp-mode="dogu"] .kp-observation{border-left:1px solid #ceb58124}

/* Short evidence frames: reserve room for labels instead of clipping their
   intrinsic height. The narration and its font size are left untouched. */
body[data-book-kind=koropokkuru] .vl-artifact figure{min-height:0}
body[data-book-kind=koropokkuru] .vl-artifact figure>svg{height:0;min-height:0;flex:1 1 0}
body[data-book-kind=koropokkuru] .vl-artifact figcaption{flex:none}
body[data-book-kind=koropokkuru] .ss-comparison{align-content:start;grid-auto-rows:min-content}
body[data-book-kind=koropokkuru] .ss-axis{line-height:1.4}
body[data-book-kind=koropokkuru] .ss-axis>small{display:block;line-height:1.4;margin-bottom:3px}
body[data-book-kind=koropokkuru] .ss-subject{display:grid;grid-template-columns:auto 1fr;align-content:center;align-items:center;column-gap:8px}
body[data-book-kind=koropokkuru] .ss-subject .ss-icon{grid-row:1/3}
body[data-book-kind=koropokkuru] .ss-subject h3,
body[data-book-kind=koropokkuru] .ss-subject p{grid-column:2}
body[data-book-kind=koropokkuru] .semantic-scene[data-kind="compare"]{padding:14px 24px 10px;gap:7px}
body[data-book-kind=koropokkuru] .semantic-scene[data-kind="compare"] .ss-heading h2{font-size:clamp(18px,2vw,26px);line-height:1.3}
@media(min-width:601px) and (max-height:700px){
 .kp-scene{padding:10px 24px 7px}
 .kp-heading h2{font-size:18px;margin:3px 0 0;line-height:1.3}
 .kp-heading small{font-size:8px;letter-spacing:.1em}
 .kp-heading{padding-bottom:5px}
 .kp-credit{padding-top:4px}
 .kp-observation{padding:0 5%;overflow:visible}
 .kp-observation h3{font-size:18px;line-height:1.45;margin:4px 0}
 .kp-observation p{font-size:10px;line-height:1.5;margin:3px 0}
 .kp-observation small{font-size:8px;line-height:1.4}
 .kp-tools{margin-top:5px;flex-shrink:0}
 .kp-tools button{min-height:26px;padding:4px 8px}
 .kp-portrait>div,.kp-witness>div{overflow:visible;padding-top:0;padding-bottom:0}
 .kp-portrait h3,.kp-witness h3{font-size:20px;line-height:1.3;margin:4px 0}
 .kp-portrait p,.kp-witness p{font-size:11px;line-height:1.5;margin:4px 0}
 .kp-witness-line{margin:6px 0}
 .kp-witness strong{font-size:12px;line-height:1.5}
 .kp-cast figure.kp-active{transform:none}
 .kp-methods{height:100%;align-items:stretch}
 .kp-methods figure{display:flex;flex-direction:column;justify-content:center;min-height:0}
 .kp-methods figure>svg{flex:1 1 0;min-height:0;height:0;max-height:none}
 .kp-methods figure>small,.kp-methods figcaption{flex:none}
 .kp-methods h3{font-size:12px;line-height:1.4;margin:3px 0}
 .kp-methods p{font-size:9px;line-height:1.4;margin:2px 0}
 .kp-methods figure>small{font-size:11px;padding-top:3px}
 .kp-conditions{height:100%;gap:3px}
 .kp-conditions ol{gap:2px}
 .kp-conditions li{padding:3px 4px;gap:12px}
 .kp-conditions h3{font-size:12px;line-height:1.35}
 .kp-conditions p{font-size:10px;line-height:1.4}
 .kp-conditions-note{max-width:100%;font-size:8px;line-height:1.4}
 .kp-conditions ol:has(li:nth-child(4)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 20px;align-content:center}
 .kp-conditions ol:has(li:nth-child(4)) li{align-items:start}
 .kp-conditions small{font-size:11px;line-height:1.6}
 .kp-reading{width:96%;height:100%;gap:5px 20px;grid-template-columns:40% 60%;box-sizing:border-box;padding-right:16px}
 .kp-fixed-fact{padding:0 16px 0 0}
 .kp-fixed-fact h3{font-size:20px;line-height:1.45;margin:5px 0}
 .kp-reading-answer h4{font-size:16px;line-height:1.45;margin:3px 0}
 .kp-reading-answer p{font-size:10px;line-height:1.45;margin:4px 0}
 .kp-reading-answer small{font-size:8px;line-height:1.4;display:block}
 .kp-reading-lenses{align-items:start}
 body[data-book-kind=koropokkuru] .vl-artifact figcaption{font-size:10px;line-height:1.45}
 body[data-book-kind=koropokkuru] .vl-artifact ol{font-size:11px;line-height:1.45}
 body[data-book-kind=koropokkuru] .vl-artifact li+li{margin-top:6px}
 body[data-book-kind=koropokkuru] .ss-subject{display:block}
 body[data-book-kind=koropokkuru] .semantic-scene[data-kind="compare"]{padding:8px 12px;gap:5px}
 body[data-book-kind=koropokkuru] .semantic-scene[data-kind="compare"] .ss-heading h2{font-size:16px}
}

/* Give the chosen evidence the canvas, with controls outside the artwork. */
.kp-source-svg{display:block;width:100%;height:100%;min-height:0;max-height:100%}
.kp-illustrated,.kp-generated-document{margin:0;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:6px}
.kp-illustrated-picture,.kp-document-picture{flex:1;min-height:0;width:100%}
.kp-illustrated figcaption,.kp-generated-document figcaption{flex:none;font:12px/1.5 var(--font-body);text-align:center}
.kp-generated-document blockquote{margin:2px 0;font:16px/1.5 var(--font-display)}
.kp-generated-document figcaption p{margin:2px 0;font-size:10px}
.kp-generated-methods{display:flex;flex-direction:column;width:100%;height:100%;gap:6px;min-height:0}
.kp-art-choices{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;flex:none}
.kp-observation-art{flex:1;min-height:0}
.kp-observation-detail,.kp-dress-detail{margin:0;font:12px/1.5 var(--font-body);text-align:center}
.kp-comparison-art{flex:1;min-height:0;width:100%}
.kp-generated-observation{gap:7px;padding:0 3%;min-height:0}
.kp-generated-observation p{margin:0}
.kp-generated-comparison{grid-template-columns:minmax(0,45%) minmax(0,55%)}
.kp-dating-art{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.kp-dating-art>.kp-source-svg{flex:1;height:0}
.kp-find-labels{display:flex;justify-content:space-around;flex:none;font:11px/1.4 var(--font-body);text-align:center}
.kp-plate-reader{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;min-height:0}
.kp-plate-tools{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;flex:none}
.kp-plate-tools button,.kp-plate-dialog button{font:12px var(--font-body);padding:5px 10px;min-height:30px;background:#203c42;color:#f5e1b6;border:1px solid #a7906370;cursor:pointer}
.kp-plate-tools button[aria-pressed=true]{background:#ddc08a;color:#182629}
.kp-plate-reader figure{margin:0;flex:1;min-height:0;display:flex;flex-direction:column;gap:5px}
.kp-plate-reader figure>svg{display:block;width:100%;height:0;min-height:0;flex:1;background:#202d2c}
.kp-plate-reader figcaption{font:11px/1.5 var(--font-body);color:#ddd0b3;text-align:center;flex:none}
.kp-plate-dialog{width:min(1200px,96vw);height:94dvh;max-width:96vw;max-height:94dvh;box-sizing:border-box;padding:16px;background:#172526;color:#eee5cb;border:1px solid #af976f}
.kp-plate-dialog[open]{display:flex;flex-direction:column;gap:10px}
.kp-plate-dialog::backdrop{background:#000c}
.kp-plate-dialog header{display:flex;justify-content:space-between;gap:12px;align-items:center;font:16px/1.4 var(--font-body)}
.kp-plate-dialog svg{width:100%;height:0;flex:1;min-height:0}
.kp-plate-dialog p{margin:0;font:12px/1.5 var(--font-body)}
@media(max-width:600px){
 .kp-art-choices button{min-height:26px;padding:4px 7px;font-size:10px}
 .kp-generated-observation{gap:4px;padding:0 0 0 8px}
 .kp-generated-observation>small{font-size:8px}
 .kp-generated-observation p,.kp-observation-detail,.kp-illustrated figcaption{font-size:10px;line-height:1.4}
 .kp-generated-document blockquote{font-size:12px;line-height:1.4}
 .kp-generated-document figcaption p{font-size:8px}
 .kp-find-labels{font-size:9px}
 .kp-plate-tools{gap:3px}
 .kp-plate-tools button{font-size:10px;min-height:26px;padding:4px 6px}
 .kp-plate-reader figcaption{font-size:9px;line-height:1.4}
 .kp-plate-dialog{padding:9px}
 .kp-plate-dialog header{font-size:13px}
}

/* The film edit uses a large subject, followed by a single visual thought. */
.kp-film-hero{display:grid;grid-template-columns:minmax(0,63%) minmax(0,37%);height:100%;width:100%;gap:20px;align-items:center;padding-right:20px;box-sizing:border-box}
.kp-film-image{height:100%;min-height:0;overflow:hidden}
.kp-film-photo{display:block;width:100%;height:100%;object-fit:contain;min-height:0;min-width:0}
.kp-film-copy{min-width:0}
.kp-film-copy h3{font:500 clamp(22px,4cqw,52px)/1.35 var(--font-display);margin:10px 0;letter-spacing:.035em}
.kp-film-copy p{font:14px/1.8 var(--font-body);color:#d2c6ab;margin:8px 0}
.kp-film-tags{display:flex;gap:10px;flex-wrap:wrap;font:12px var(--font-body)}
.kp-film-tags span{border-bottom:1px solid #c5aa7160;padding:5px 0}
.kp-film-wide{grid-template-columns:minmax(0,72%) minmax(0,28%)}
.kp-film-document{grid-template-columns:minmax(0,48%) minmax(0,52%)}
.kp-film-document .kp-film-image{filter:drop-shadow(10px 12px 15px #0006);padding:5px;box-sizing:border-box}
.kp-film-names{display:flex;width:100%;height:100%;gap:20px}
.kp-film-names figure{flex:1;min-width:0;min-height:0;margin:0;display:flex;flex-direction:column;gap:12px}
.kp-film-names .kp-film-photo{height:0;flex:1;background:#293a37}
.kp-film-names figcaption{text-align:center;flex:none}
.kp-film-names strong{display:block;font:500 clamp(23px,4cqw,46px)/1.4 var(--font-display);letter-spacing:.12em}
.kp-film-exchange{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.kp-film-exchange>.kp-source-svg{flex:1;height:0}
.kp-exchange-labels{display:flex;justify-content:space-around;gap:12px;font:14px/1.5 var(--font-body);text-align:center}
.kp-film-society{display:grid;grid-template-columns:28% 72%;width:100%;height:100%;align-items:center}
.kp-society-person{height:100%;min-height:0;display:flex;flex-direction:column;text-align:center;font:12px var(--font-body)}
.kp-society-person img{height:0;flex:1;filter:sepia(.2)}
.kp-society-body{padding:0 5%;min-width:0}
.kp-society-years{display:flex;gap:9%;align-items:center}
.kp-society-years>div{flex:1;min-width:0}
.kp-society-years small{font:36px/1.2 Georgia,serif;color:#d1ae74}
.kp-society-years strong{display:block;font:24px/1.4 var(--font-display);margin:12px 0}
.kp-society-years span{font:12px var(--font-body)}
.kp-members{display:flex;flex-wrap:wrap;max-width:150px;gap:7px;margin-top:14px}
.kp-members i{width:15px;height:15px;border-radius:50%;background:#bfa77a}
.kp-society-body>p{margin:25px 0 0;padding-top:16px;border-top:1px solid #bfa77a44;font:16px/1.5 var(--font-display)}
.kp-film-question{height:100%;width:100%;display:grid;grid-template-columns:50% 50%;gap:16px}
.kp-question-relic{height:100%;min-height:0}
.kp-question-choices{display:flex;flex-direction:column;justify-content:space-around;min-width:0}
.kp-question-choices p{margin:0;font:18px/1.6 var(--font-display)}
.kp-question-choices strong{font-size:clamp(24px,4cqw,50px);font-weight:500}
@media(max-width:600px){
 .kp-film-hero{gap:10px;padding-right:8px;grid-template-columns:minmax(0,60%) minmax(0,40%)}
 .kp-film-copy h3{font-size:20px;line-height:1.35;margin:4px 0}
 .kp-film-copy>small{font-size:8px;letter-spacing:0}
 .kp-film-copy p{font-size:10px;line-height:1.5;margin:4px 0}
 .kp-film-tags{gap:3px;font-size:9px}
 .kp-film-names{gap:8px}
 .kp-film-names figure{gap:5px}
 .kp-film-names small{font-size:8px;letter-spacing:0}
 .kp-film-names strong{font-size:23px;letter-spacing:0}
 .kp-exchange-labels{font-size:9px;gap:4px}
 .kp-film-society{grid-template-columns:24% 76%}
 .kp-society-years{gap:10px}
 .kp-society-years small{font-size:24px}
 .kp-society-years strong{font-size:15px;margin:5px 0}
 .kp-society-years span{font-size:9px}
 .kp-members{max-width:80px;gap:4px;margin-top:7px}
 .kp-members i{width:10px;height:10px}
 .kp-society-body>p{font-size:11px;margin:10px 0 0;padding-top:8px}
 .kp-question-choices p{font-size:12px}
 .kp-question-choices strong{font-size:23px}
}
@media(min-width:601px) and (max-height:700px){
 .kp-film-copy h3{font-size:26px;margin:4px 0}
 .kp-film-copy p{font-size:11px;line-height:1.4}
 .kp-film-names strong{font-size:24px}
 .kp-society-years small{font-size:24px}
 .kp-society-years strong{font-size:16px;margin:4px 0}
 .kp-members{margin-top:5px}
 .kp-society-body>p{margin:8px 0 0;padding-top:8px;font-size:12px}
}
.kp-film-question{grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-sizing:border-box}
/* 第4稿（2026-09-19）: 赤い虫と同じ本文予算。上の映像は57dvh、本文は4行まで。 */
body[data-book-kind=koropokkuru].book-experience #open-book{bottom:auto;height:57dvh}
body[data-book-kind=koropokkuru].book-experience #deck{top:calc(57dvh + 29px);bottom:26px;height:auto;display:flex;flex-direction:column}
body[data-book-kind=koropokkuru] #narration{flex:1;min-height:0}
body[data-book-kind=koropokkuru] #say{font-size:clamp(14px,1.45vw,18px);line-height:1.7}
body[data-book-kind=koropokkuru] #suggest button:nth-child(n+3){display:none}
@media(max-width:600px){
 body[data-book-kind=koropokkuru].book-experience #open-book{height:56dvh}
 body[data-book-kind=koropokkuru].book-experience #deck{top:56dvh;bottom:0;padding-top:6px}
 body[data-book-kind=koropokkuru] #say{font-size:15px;line-height:1.65}
 body[data-book-kind=koropokkuru] #narration{padding:8px 14px 6px;gap:4px}
 body[data-book-kind=koropokkuru] #beat-dots,body[data-book-kind=koropokkuru] #suggest{display:none}
 body[data-book-kind=koropokkuru] .speaker{font-size:9px;line-height:1.4}
 body[data-book-kind=koropokkuru] #ask input{padding:8px}
 body[data-book-kind=koropokkuru] #sources{max-height:22px}
}
/* The color essay owns its layout; it does not alter another book's scene rules. */
.cs-scene{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:18px 28px 8px;box-sizing:border-box;overflow:hidden!important;container-type:size;color:#f2e2c1;background:radial-gradient(ellipse at 45% 40%,#553437,#251b23 65%,#171a22)}
.cs-scene[data-tone=blue]{background:radial-gradient(ellipse at 45% 40%,#294960,#162631 65%,#111923)}
.cs-heading small{font:9px var(--font-body);letter-spacing:.18em;color:#c9af87}.cs-heading h2{font:500 clamp(17px,2.3cqw,28px)/1.35 var(--font-display);margin:5px 0 0}
.cs-canvas{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;min-height:0;align-items:center}
.cs-picture,.cs-art,.cs-illustration{height:100%;min-height:0;min-width:0;margin:0}.cs-picture{overflow:hidden}.cs-picture img,.cs-picture svg{display:block;width:100%;height:100%;object-fit:contain}
.cs-copy{min-width:0}.cs-copy h3{font:500 clamp(21px,min(3.7cqw,8cqh),44px)/1.45 var(--font-display);margin:0 0 12px;letter-spacing:.015em}.cs-copy p{font:clamp(11px,min(1.3cqw,3.2cqh),15px)/1.75 var(--font-body);margin:0;color:#d1c4ad}
.cs-credit{font:8px/1.4 var(--font-body);color:#bdae99}.cs-pair{display:flex;gap:14px;height:100%}.cs-pair figure{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0}.cs-pair img{flex:1;height:0;min-height:0}.cs-pair figcaption{flex:none;text-align:center;font:11px var(--font-body);padding:5px 0}
.cs-layer-study,.cs-fading{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px}.cs-swatches{display:flex;gap:22px;min-height:0;flex:1}.cs-swatch{min-height:0;flex:1;display:flex;flex-direction:column;gap:8px}.cs-swatch>span{font:12px var(--font-body)}.cs-cloth{position:relative;flex:1;min-height:40px;background:linear-gradient(115deg,#84352a,#f0744a 28%,#bf442d 43%,#5c291e 55%,#ee7c50 80%,#bb462d);border-radius:3px 30% 8% 3px;box-shadow:6px 9px 12px #0004}.cs-glaze{position:absolute;inset:0;background:linear-gradient(100deg,#731b4966,#980d5677,#7b0a43aa);border-radius:inherit;transition:opacity .7s}.cs-layer-study button{align-self:flex-start;background:#31272e;color:#ecdbb8;border:1px solid #ad8b70;padding:7px 12px;font:11px var(--font-body)}.cs-layer-study small,.cs-fading small{font:9px/1.5 var(--font-body);color:#c7bba8}.cs-test{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:20px;align-items:center;flex:1;min-height:0}.cs-test strong{font:15px var(--font-display)}.cs-test i{display:block;height:75%;max-height:100px;border-radius:3px;box-shadow:5px 6px 8px #0003}.cs-before{background:#b92150}.cs-after.cs-cochineal{background:#baa09c}.cs-before.cs-madder{background:#a74638}.cs-after.cs-madder{background:#a75849}.cs-test-labels{display:flex;justify-content:space-evenly;margin-left:24%;font:10px var(--font-body)}.cs-dates{display:flex;gap:20px;height:100%;align-items:center}.cs-dates>div{flex:1;border-top:2px solid #ba9677;padding-top:15px}.cs-dates strong{font:clamp(25px,4cqw,45px) var(--font-display)}.cs-dates p{font:13px/1.6 var(--font-body)}
body[data-book-kind=cochineal].book-experience #open-book{bottom:auto;height:56dvh}body[data-book-kind=cochineal].book-experience #deck{top:calc(56dvh + 29px);bottom:26px;height:auto;display:flex;flex-direction:column}body[data-book-kind=cochineal] #narration{flex:1;min-height:0}body[data-book-kind=cochineal] #say{font-size:clamp(14px,1.45vw,18px);line-height:1.85}body[data-book-kind=cochineal] #suggest button:nth-child(n+3){display:none}
@media(max-width:600px){
 .cs-scene{padding:10px 12px 6px;gap:5px}.cs-heading small{font-size:7px}.cs-heading h2{font-size:15px;margin-top:4px}.cs-canvas{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px}.cs-copy h3{font-size:clamp(16px,4.7cqw,21px);line-height:1.45;margin:0 0 6px}.cs-copy p{font-size:10px;line-height:1.6}.cs-credit{font-size:7px}.cs-swatches{gap:10px}.cs-swatch>span{font-size:9px}.cs-layer-study{gap:5px}.cs-layer-study button{font-size:9px;padding:5px}.cs-layer-study small,.cs-fading small{font-size:7px}.cs-test{gap:6px}.cs-test strong{font-size:10px}.cs-test-labels{font-size:8px}.cs-pair{gap:8px}.cs-pair figcaption{font-size:8px}.cs-dates{gap:8px}.cs-dates strong{font-size:20px}.cs-dates p{font-size:10px}.cs-dates>div{padding-top:7px}
 body[data-book-kind=cochineal].book-experience #open-book{height:49dvh}body[data-book-kind=cochineal].book-experience #deck{top:49dvh;bottom:0;padding-top:6px}body[data-book-kind=cochineal] #say{font-size:14px;line-height:1.65}body[data-book-kind=cochineal] #narration{padding:8px 14px 6px;gap:4px}body[data-book-kind=cochineal] #beat-dots,body[data-book-kind=cochineal] #suggest{display:none}body[data-book-kind=cochineal] .speaker{font-size:9px;line-height:1.4}body[data-book-kind=cochineal] #ask input{padding:8px}body[data-book-kind=cochineal] #sources{max-height:30px}body[data-book-kind=cochineal] .geo-instruments{display:none}body[data-book-kind=cochineal] .geo-controls{left:auto;right:8px;top:45px}body[data-book-kind=cochineal] .geo-controls .geo-segment{display:none}
}
@media(prefers-reduced-motion:reduce){.cs-glaze{transition:none}}
body[data-book-kind=cochineal] .cs-scene{background:radial-gradient(ellipse at 45% 40%,#553437,#251b23 65%,#171a22)}
body[data-book-kind=cochineal] .cs-scene[data-tone=blue]{background:radial-gradient(ellipse at 45% 40%,#294960,#162631 65%,#111923)}
.cs-credit{display:flex;justify-content:space-between;align-items:center;gap:8px}.cs-enlarge{flex:none;background:#ffffff0d;color:#ead8b7;border:1px solid #b39a7155;padding:3px 8px;font:9px var(--font-body);cursor:pointer}
.cs-modal{width:94vw;height:92dvh;max-width:1400px;max-height:none;padding:12px;background:#171b21;color:#eadcbb;border:1px solid #b5996d}.cs-modal::backdrop{background:#000c}.cs-modal img{width:100%;height:calc(100% - 75px);object-fit:contain}.cs-modal p{font:11px/1.5 var(--font-body)}.cs-modal button{display:block;margin-left:auto;background:#463a2d;color:#f4e3c5;border:1px solid #967c57;padding:7px 14px}
@media(max-width:600px){
 body[data-book-kind=cochineal].book-experience #open-book{height:53dvh}body[data-book-kind=cochineal].book-experience #deck{top:53dvh}
 .cs-scene[data-mode=illustration] .cs-canvas,.cs-scene[data-mode=pair] .cs-canvas{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:5px}
 .cs-scene[data-mode=illustration] .cs-copy,.cs-scene[data-mode=pair] .cs-copy{display:flex;gap:15px;align-items:center}
 .cs-scene[data-mode=illustration] .cs-copy h3,.cs-scene[data-mode=pair] .cs-copy h3{font-size:16px;flex:1;margin:0}.cs-scene[data-mode=illustration] .cs-copy p,.cs-scene[data-mode=pair] .cs-copy p{font-size:9px;flex:1}
 .cs-credit{font-size:6px}.cs-enlarge{font-size:8px;padding:3px 6px}
}
/* The compact map has a place selector below it; keep the route unobstructed.
   The expanded map retains the full place inspector. */
@media(max-width:600px){body[data-book-kind=cochineal] .geographic-scene:not(.geo-expanded) .geo-inspector{display:none}}
/* Revision 2: the scene is the picture, not a repeated picture-and-slogan card. */
/* Third draft: narration up to four lines on a laptop; the picture keeps 57dvh. */
body[data-book-kind=cochineal].book-experience #open-book{height:57dvh}
body[data-book-kind=cochineal].book-experience #deck{top:calc(57dvh + 29px)}
body[data-book-kind=cochineal] #say{line-height:1.7}
.cs-scene[data-composition=wide],.cs-scene[data-composition=detail]{padding:0;gap:0;grid-template-rows:45px minmax(0,1fr) 26px;background:#172326!important}
.cs-scene[data-composition=wide] .cs-heading,.cs-scene[data-composition=detail] .cs-heading{padding:10px 22px 0;z-index:2;background:#172326}
.cs-scene[data-composition=wide] .cs-heading small,.cs-scene[data-composition=detail] .cs-heading small{display:none}
.cs-scene[data-composition=wide] .cs-heading h2,.cs-scene[data-composition=detail] .cs-heading h2{font-size:clamp(13px,1.6cqw,20px);margin:0;color:#dac9a9}
.cs-scene[data-composition=wide] .cs-canvas,.cs-scene[data-composition=detail] .cs-canvas{display:block;position:relative;height:100%;min-height:0}
.cs-scene[data-composition=wide] .cs-picture,.cs-scene[data-composition=detail] .cs-picture{height:100%;width:100%;padding-bottom:0}
.cs-scene[data-composition=wide] .cs-copy,.cs-scene[data-composition=detail] .cs-copy{position:absolute;bottom:0;left:0;right:0;display:block!important;padding:14px 22px 12px;background:linear-gradient(transparent,#111b21e8);pointer-events:none;text-shadow:0 2px 8px #000}
.cs-scene[data-composition=wide] .cs-copy h3,.cs-scene[data-composition=detail] .cs-copy h3{font-size:clamp(20px,3cqw,38px);line-height:1.3;margin:0!important;letter-spacing:.03em}
.cs-scene[data-composition=wide] .cs-credit,.cs-scene[data-composition=detail] .cs-credit{padding:3px 16px;background:#111b21;z-index:3}
.cs-scene[data-mode=layers] .cs-picture,.cs-scene[data-mode=fading] .cs-picture,.cs-scene[data-mode=fading-before] .cs-picture{padding:12px 35px 65px;box-sizing:border-box}
.cs-scene[data-mode=layers] .cs-copy h3,.cs-scene[data-mode=fading] .cs-copy h3,.cs-scene[data-mode=fading-before] .cs-copy h3{font-size:25px}
@media(max-width:600px){
 body[data-book-kind=cochineal].book-experience #open-book{height:56dvh}
 body[data-book-kind=cochineal].book-experience #deck{top:56dvh}
 body[data-book-kind=cochineal] #say{font-size:15px;line-height:1.65}
 .cs-scene[data-composition] .cs-heading{padding:9px 12px 0}
 .cs-scene[data-composition=wide],.cs-scene[data-composition=detail]{grid-template-rows:37px minmax(0,1fr) 25px}
 .cs-scene[data-composition] .cs-heading h2{font-size:12px}
 .cs-scene[data-composition] .cs-copy{padding:19px 12px 12px}
 .cs-scene[data-composition] .cs-copy h3{font-size:21px!important}
 .cs-scene[data-composition] .cs-credit{padding:3px 9px;font-size:6px}
 .cs-scene[data-mode=layers] .cs-picture,.cs-scene[data-mode=fading] .cs-picture,.cs-scene[data-mode=fading-before] .cs-picture{padding:10px 14px 64px}
 body[data-book-kind=cochineal] #sources{max-height:22px}
}
.theatre-scene{container-type:inline-size;display:flex!important;flex-direction:column;color:#f4ebd9;background:radial-gradient(ellipse at 50% 35%,#243c40,#101d27 78%);overflow:auto;isolation:isolate;min-height:340px;padding:clamp(12px,2.4vw,32px);box-sizing:border-box;gap:10px;font-family:'IBM Plex Sans JP',sans-serif}.ts-head{z-index:2;flex:none}.ts-head small{font:10px monospace;text-transform:uppercase;letter-spacing:.16em;color:#dbc093}.ts-head h2{font-family:'Shippori Mincho',serif;font-size:clamp(18px,2.5cqw,31px);line-height:1.4;margin:7px 0}.ts-stage{position:relative;flex:1;min-height:210px;display:flex;align-items:center;justify-content:center}.ts-stamp{font-size:10px;line-height:1.5;color:#c2bda9;z-index:2;flex:none}.ts-token{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;text-align:center}.ts-token img{object-fit:contain;max-width:100%;width:130px;height:160px;filter:drop-shadow(0 8px 8px #0005)}.ts-token strong{font-size:clamp(12px,2cqw,20px);font-weight:500;overflow-wrap:anywhere;max-width:16em}.ts-monogram{width:68px;height:68px;display:grid;place-items:center;border:1px solid #b69b65;border-radius:50%;background:#223b41;font:30px 'Shippori Mincho',serif}.ts-setting{position:absolute;inset:0;z-index:-1;overflow:hidden}.ts-setting>img{width:100%;height:100%;object-fit:cover;opacity:.3;mask-image:linear-gradient(#000a,#000,transparent)}.ts-setting>span{position:absolute;top:8px;right:12px;border-bottom:1px solid #c0a06e;padding:5px 12px;background:#0d1e24bb;font-size:12px}.ts-duet{display:flex;width:100%;justify-content:space-between;padding:10px 6% 60px;box-sizing:border-box}.ts-duet>.ts-token{width:29%}.ts-duet img{height:clamp(100px,24cqw,240px);width:100%}.ts-lane{position:absolute;left:32%;right:24%;top:25%;height:40%;pointer-events:none}.ts-delivery{position:absolute;right:0;bottom:0;text-align:center}.ts-delivery .ts-token img{width:65px;height:60px}.ts-delivery .ts-monogram{width:45px;height:45px;font-size:20px}.ts-delivery span{font-size:10px;color:#d4c3a0}.ts-lane.ts-return{left:24%;right:32%;top:54%}.ts-return .ts-delivery{right:auto;left:0}.ts-origin{position:absolute;left:0;opacity:.65;transform:scale(.68);transform-origin:left center}.ts-origin img{width:65px;height:60px}.ts-relations{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;width:100%}.ts-relation{display:flex;align-items:center;justify-content:center;gap:10px}.ts-relation .ts-token{width:35%}.ts-relation img{height:90px}.ts-link{border-bottom:1px solid #c7ad71;font-size:12px;padding-bottom:8px;text-align:center;max-width:30%}.ts-replacement{display:flex;justify-content:center;gap:8%;width:100%}.ts-before{opacity:.3}.ts-role{position:absolute;top:0;font:20px 'Shippori Mincho',serif;color:#dfc894}.ts-order{position:absolute;bottom:0;display:flex;justify-content:space-around;width:100%;font-size:12px}.ts-groups{width:100%;display:flex;flex-direction:column;gap:12px}.ts-group{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.ts-group .ts-token{flex:1;max-width:180px}.ts-group img{height:85px}.ts-transition{text-align:center;color:#cfb783;font-size:12px;letter-spacing:.2em}.ts-process{list-style:none;margin:0;padding:10px 0;display:flex;align-items:center;justify-content:space-around;gap:12px;width:100%;flex-wrap:wrap}.ts-process li{flex:1;min-width:75px;max-width:200px;text-align:center}.ts-process small{display:block;margin-bottom:12px;color:#d2b879;border-top:1px solid #9e865955;padding-top:10px}.ts-process img{width:100%;height:100px}.ts-comparison{width:100%;overflow:auto}.ts-comparison table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:clamp(12px,1.9cqw,19px);line-height:1.7}.ts-comparison th,.ts-comparison td{text-align:left;padding:12px;border-bottom:1px solid #b6ab8a44;overflow-wrap:anywhere;vertical-align:top}.ts-comparison th:first-child{width:23%;color:#d0b77f}.ts-comparison thead th{background:#bd9d5b16;font-weight:500}.ts-timeline{width:100%;padding:0 3%;box-sizing:border-box}.ts-time-scale{display:flex;justify-content:space-between;color:#c9b07e;font-size:12px;padding-bottom:12px}.ts-event{margin:8px 0 16px}.ts-event>div:first-child{display:flex;gap:12px;align-items:baseline;font-size:13px;flex-wrap:wrap}.ts-event strong{font-weight:500}.ts-event small,.ts-event span{color:#c8bea9}.ts-time-track{position:relative;height:14px;border-bottom:1px solid #ddd3b233}.ts-time-track i{position:absolute;height:7px;bottom:-3px;background:#d9b96d;min-width:5px;border-radius:4px}.ts-bars{width:90%}.ts-unit{font-size:12px;color:#d2bd90;margin-bottom:20px}.ts-bar{margin-bottom:16px}.ts-bar strong{font-size:14px;font-weight:500}.ts-bar>div{position:relative;padding-top:5px}.ts-bar i{display:block;height:20px;background:linear-gradient(90deg,#739897,#d4ba7c);transform-origin:left}.ts-bar span{font:13px monospace;display:block;text-align:right;margin-top:3px}.ts-evidence{max-width:42em;padding:20px 8%;line-height:1.9;font-family:'Shippori Mincho',serif}.ts-evidence blockquote{margin:14px 0;font-size:clamp(18px,2.8cqw,29px)}.ts-evidence small{font:11px sans-serif;color:#ceae72}.ts-evidence hr{border:0;border-top:1px solid #c3b69755}.ts-photo{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;height:100%;width:100%;gap:9px}.ts-photo>img{width:100%;height:clamp(180px,35cqw,420px);object-fit:contain}.ts-photo figcaption{font-size:11px;color:#ccc3ad;text-align:center}.ts-photo a{color:inherit}.ts-detail{display:flex;align-items:center;width:100%;gap:5%}.ts-detail figure{margin:0;width:47.5%;text-align:center}.ts-detail img{width:100%;height:220px;object-fit:contain}.ts-detail figcaption{margin-top:12px;font-size:14px}.ts-crop{overflow:hidden;border-radius:50%;background:#d6c9ad10;outline:1px solid #c7ad7155}.ts-geographic{display:flex;flex-direction:column;align-items:stretch;min-height:350px}.ts-map{flex:1;min-height:320px;position:relative}.ts-map-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:7px}.ts-map-controls button{color:#e9dab7;background:#243b42;border:1px solid #80775b;border-radius:20px;padding:7px 15px}.ts-map-controls button[aria-pressed=true]{color:#1b272c;background:#e0c58e}.ts-image-error{font-size:12px;padding:20px}
@container(max-width:480px){.ts-stamp{font-size:9px}.ts-stage{min-height:230px}.ts-duet{padding-inline:0}.ts-lane{left:29%;right:22%}.ts-token img{height:115px}.ts-detail img{height:150px}.ts-comparison th,.ts-comparison td{padding:8px 5px}.ts-process{gap:8px}.ts-process li{min-width:25%;max-width:30%}.ts-process img{height:65px}.ts-process .ts-monogram{width:40px;height:40px;font-size:22px}.ts-geographic{min-height:350px}.ts-group img{height:65px}.ts-group{gap:8px}.ts-token strong{font-size:12px}}

.ts-cinematic{display:block;container-type:size;min-height:330px;width:100%}.ts-cinematic .vl-frame{height:100%;min-height:330px}.ts-cinematic .vl-film-document{min-height:330px}
.ts-stamp a{color:inherit;text-decoration:underline}
/* Reader chrome only. Scene palettes and authored illustrations retain their styles. */
.book-experience,.cite-modal {
 --ui-bg:#121416; --ui-panel:#1a1d20; --ui-raised:#24282c;
 --ui-ink:#f2f3f4; --ui-muted:#adb3bb; --ui-line:#ffffff19;
 --ui-accent:#e5eaf0; --ui-accent-ink:#181d23; --ui-link:#b9d7f2;
 background:var(--ui-bg); color:var(--ui-ink); color-scheme:dark;
}
:root[data-theme=light] :is(.book-experience,.cite-modal) {
 --ui-bg:#f4f5f6; --ui-panel:#fff; --ui-raised:#e9edf0;
 --ui-ink:#20262c; --ui-muted:#626d78; --ui-line:#18232e20;
 --ui-accent:#24394b; --ui-accent-ink:#fff; --ui-link:#235b86;
 color-scheme:light;
}
@media(prefers-color-scheme:light) {
 :root:not([data-theme=dark]):not([data-theme=light]) :is(.book-experience,.cite-modal) {
  --ui-bg:#f4f5f6; --ui-panel:#fff; --ui-raised:#e9edf0;
  --ui-ink:#20262c; --ui-muted:#626d78; --ui-line:#18232e20;
  --ui-accent:#24394b; --ui-accent-ink:#fff; --ui-link:#235b86;
  color-scheme:light;
 }
}
.book-experience #open-book {
 border:0; border-radius:12px; box-shadow:none; background:var(--ui-bg); overflow:hidden;
}
.book-experience .book-heading {
 background:var(--ui-bg); border:0; color:var(--ui-ink); font-family:var(--font-body);
 padding:0 16px; height:52px;
}
.book-experience #book-name { font:500 15px var(--font-body); letter-spacing:-.02em; }
.book-experience .book-heading .book-actions button,
.book-experience .book-heading #back-shelf {
 background:transparent; border:0; border-radius:8px; color:var(--ui-muted); min-height:44px;
}
.book-experience .book-heading button:hover { background:var(--ui-raised); color:var(--ui-ink); }
.book-experience #open-book #stage { top:52px; left:0; right:0; }
.book-experience #deck {
 background:var(--ui-panel); border:0; border-radius:12px; box-shadow:none; color:var(--ui-ink);
}
.book-experience #say { color:var(--ui-ink); }
.book-experience #say a,.book-experience #say .term { color:var(--ui-link); }
.book-experience #narration .speaker { color:var(--ui-muted); letter-spacing:.05em; }
.book-experience #narration .speaker .dot { background:var(--ui-muted); }
.book-experience #narration .transport { border-color:var(--ui-line); padding-top:10px; }
.book-experience .transport .tbtns { gap:8px; }
.book-experience .transport .tbtns button {
 min-height:44px; padding:8px 16px; border:0; border-radius:9px;
 color:var(--ui-muted); background:transparent; font:500 13px var(--font-body);
 transition:background .16s,color .16s;
}
.book-experience .transport .tbtns button:hover { background:var(--ui-raised); color:var(--ui-ink); }
.book-experience .transport .tbtns #btn-next {
 background:var(--ui-accent); color:var(--ui-accent-ink); min-width:96px; font-weight:500;
}
.book-experience .transport .tbtns #btn-next:hover { filter:brightness(.93); }
.book-experience .transport .tbtns #voice-btn { flex:none; border:1px solid var(--ui-line); background:var(--ui-raised); color:var(--ui-ink); white-space:nowrap; }
.book-experience .transport .tbtns #voice-btn.on { background:var(--ui-accent); color:var(--ui-accent-ink); }
.book-experience #reading-position { color:var(--ui-muted); margin-right:auto; margin-left:0; font-size:11px; }
.book-experience #question-desk { border-color:var(--ui-line); }
.book-experience #question-desk header,.book-experience #last-question { color:var(--ui-muted); }
.book-experience #question-desk header small { color:var(--ui-muted); letter-spacing:.06em; }
.book-experience #suggest button {
 border:0; border-radius:7px; background:var(--ui-raised); color:var(--ui-muted); padding:7px 10px;
}
.book-experience #ask { gap:8px; }
.book-experience #ask input {
 background:var(--ui-bg); border:1px solid var(--ui-line); border-radius:10px; color:var(--ui-ink);
 font-size:14px; padding:11px 14px;
}
.book-experience #ask input::placeholder { color:var(--ui-muted); }
.book-experience #ask button { background:var(--ui-raised); color:var(--ui-ink); border-radius:10px; padding:8px 17px; }
.book-experience .reading-footer,.book-experience .reading-footer button { color:var(--ui-muted); letter-spacing:.04em; font-family:var(--font-body); }
.book-experience :is(button,input,select,a):focus-visible { outline:2px solid var(--ui-link); outline-offset:3px; }
.book-experience button:disabled { opacity:.4; cursor:default; }
/* The entrance and shelf use artwork without imitation bindings. */
.book-experience #title { background:linear-gradient(90deg,#101419f5,#10141999),var(--library-art) center/cover,#101419; }
.book-experience .title-copy { padding-top:15vh; }
.book-experience .title-overline { color:#aebdca; letter-spacing:.2em; }
.book-experience .title-tagline,.book-experience .title-brand span { color:#d3dae1; }
.book-experience #title-menu { gap:8px; }
.book-experience #title-menu button { font-family:var(--font-body); border-radius:10px; color:#d3dae1; }
.book-experience #title-menu #title-start { padding:15px 18px; background:#e5eaf0; color:#181d23; border:0; font-size:16px; }
.book-experience #title-start span { color:#445567; }
.book-experience #title-menu #t-codex { border:0; background:#ffffff09; border-radius:10px; margin-top:10px; }
.book-experience #library { background:var(--ui-bg); color:var(--ui-ink); }
.book-experience .library-header { border-color:var(--ui-line); color:var(--ui-muted); }
.book-experience .library-header button,.book-experience .library-intro small,.book-experience #library footer { color:var(--ui-muted); }
.book-experience #book-grid { border:0; }
.book-experience .book-cover { padding:0; border:0; border-radius:12px; box-shadow:none; background:var(--ui-panel); }
.book-experience .book-cover.available:hover { transform:translateY(-4px); box-shadow:0 12px 30px #0002; }
.book-experience .book-cover .cover-art { border-radius:0; }
.book-experience .shelf-caption strong { color:var(--ui-ink); }
.book-experience .shelf-caption small,.book-experience .shelf-caption .shelf-series { color:var(--ui-muted); }
.book-experience .book-search { border-color:var(--ui-line); }
.book-experience .book-search input,.book-experience .book-search span { color:var(--ui-ink); }
.book-experience .language-switch { border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-raised); color:var(--ui-ink); font-family:var(--font-body); }
/* Dialogs and collection chrome share the same quiet surfaces. */
.book-experience :is(#chapter-drawer,#settings .box,#codex-modal) {
 background:var(--ui-panel); color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:16px; box-shadow:0 24px 80px #0005;
}
.book-experience .voice-picker { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--ui-line); }
.book-experience .voice-picker label { grid-column:1/-1; color:var(--ui-muted); font:600 12px var(--font-body); }
.book-experience .voice-picker select,.book-experience .voice-picker button {
 box-sizing:border-box; min-width:0; min-height:42px; padding:8px 11px; border:1px solid var(--ui-line); border-radius:8px;
 background:var(--ui-raised); color:var(--ui-ink); font:13px var(--font-body);
}
.book-experience .voice-picker button { cursor:pointer; }
.book-experience .voice-picker button:disabled { opacity:.45; cursor:wait; }
.book-experience .voice-picker small { grid-column:1/-1; color:var(--ui-muted); font:11px/1.4 var(--font-body); }
.book-experience .voice-picker small:empty { display:none; }
.book-experience #settings .mode-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:14px 0; padding:16px 0; border-block:1px solid var(--ui-line); }
.book-experience #settings .mode-switch { display:flex; overflow:hidden; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-raised); }
.book-experience #settings .mode-switch button { min-height:42px; padding:8px 14px; border:0; background:transparent; color:var(--ui-muted); font:13px var(--font-body); }
.book-experience #settings .mode-switch button.on { background:var(--ui-accent); color:var(--ui-accent-ink); }
.book-experience #settings .speed-label { display:flex; align-items:center; gap:8px; color:var(--ui-muted); font:13px var(--font-body); }
.book-experience #settings #speed { display:block; min-height:42px; padding:8px; color:var(--ui-ink); background:var(--ui-raised); border-color:var(--ui-line); font:13px var(--font-body); }
.book-experience #settings .voice-picker { margin:0 0 22px; padding:0; border:0; }
.book-experience .answer-history { box-sizing:border-box; width:min(680px,calc(100vw - 28px)); max-height:85dvh; margin:auto; padding:24px; overflow:auto; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-panel); color:var(--ui-ink); box-shadow:0 24px 80px #0007; font-family:var(--font-body); }
.book-experience .answer-history::backdrop { background:#070b10b8; backdrop-filter:blur(6px); }
.book-experience .answer-history header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.book-experience .answer-history h2 { margin:0; font:500 21px var(--font-display); }
.book-experience .answer-history p,.book-experience .answer-history small { color:var(--ui-muted); }
.book-experience .answer-history article { padding:16px 0; border-bottom:1px solid var(--ui-line); overflow-wrap:anywhere; }
.book-experience .answer-history article p { color:var(--ui-ink); }
.book-experience .answer-history button { min-height:40px; margin:8px 8px 0 0; padding:8px 12px; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-raised); color:var(--ui-ink); cursor:pointer; }
.book-experience #codex-modal #codex { background:var(--ui-panel); color:var(--ui-ink); --ink:var(--ui-ink); --ink-2:var(--ui-muted); --ink-3:var(--ui-muted); --gold:var(--ui-link); --line:var(--ui-line); --surface:var(--ui-raised); }
.book-experience #codex-modal :is(.cx-bar,.cx-gallery-hero,.cx-gallery-tools) { background:transparent; border:0; border-radius:0; box-shadow:none; text-shadow:none; }
.book-experience #codex-modal .cx-card { background:var(--ui-raised); border:0; border-radius:12px; box-shadow:none; }
.book-experience #codex-modal .cx-card:hover { transform:translateY(-4px); box-shadow:none; }
.book-experience #codex-modal .cx-card-art { border:0; }
.book-experience #codex-modal .cx-card-art:after { display:none; }
.book-experience #codex-modal .cx-card-copy strong { color:var(--ui-ink); }
.book-experience #codex-modal .cx-card-copy p { color:var(--ui-muted); }
@media(max-width:600px) {
 .book-experience #open-book,.book-experience #deck { border:0; border-radius:0; }
 .book-experience .book-heading { height:48px; padding:4px 12px; }
 .book-experience #open-book #stage { top:48px; }
 .book-experience .book-heading .book-actions button,.book-experience .book-heading #back-shelf { padding:6px 8px; min-height:40px; }
 .book-experience .transport .tbtns { gap:2px; }
 .book-experience .transport .tbtns button { padding:6px 10px; min-height:44px; font-size:12px; }
 .book-experience .transport .tbtns #btn-next { min-width:76px; }
 .book-experience .transport .tbtns #voice-btn { min-width:0; padding:6px 8px; font-size:11px; }
 .book-experience #reading-position { font-size:10px; }
 .book-experience #narration .transport { padding-top:6px; }
 .book-experience #ask input { font-size:16px; padding:9px 12px; }
 .book-experience .title-copy { padding-top:12vh; }
 :root[data-lang=en] .book-experience #say { font-size:13.5px; line-height:1.55; }
 :root[data-lang=en] .book-experience #narration { padding-top:8px; padding-bottom:5px; gap:2px; }
 :root[data-lang=en] .book-experience #narration .speaker { margin-bottom:0; }
}
@media(prefers-reduced-motion:reduce) {
 .book-experience .book-cover,.book-experience .transport .tbtns button { transition:none; }
}
.book-experience #question-desk { background:var(--ui-panel); }
.book-experience.question-pending[data-screen="story"] #open-book { display:none; }
.book-experience.question-pending[data-screen="story"] #deck { top:70px; bottom:26px; height:auto; }
.book-experience .transport .tbtns #btn-play { color:var(--ui-muted); }
.book-experience #settings .box { --ink:var(--ui-ink); --ink-2:var(--ui-muted); --ink-3:var(--ui-muted); --gold:var(--ui-link); --line-strong:var(--ui-line); --surface:var(--ui-raised); }
.book-experience #chapter-drawer { --ink:var(--ui-ink); --ink-2:var(--ui-muted); --gold:var(--ui-link); --line:var(--ui-line); }
.book-experience #chapter-close { color:var(--ui-muted); }
/* Entrance: one reading decision, with utilities outside the call to action. */
.book-experience #title { background:linear-gradient(90deg,#101318f2 0%,#101318d5 44%,#1013184d 100%),var(--library-art) center/cover,#101318; }
.book-experience .title-header { position:absolute; z-index:3; inset:0 5.5vw auto; height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff2a; }
.book-experience .title-header-brand { font:600 14px var(--font-body); letter-spacing:.01em; color:#f2f3f4; }
.book-experience #title-utilities { display:flex; align-items:center; gap:24px; }
.book-experience #title-utilities button,.book-experience #title-utilities a { border:0; border-radius:0; background:none; color:#d3dae1; font:500 12px var(--font-body); text-decoration:none; padding:8px 0; cursor:pointer; }
.book-experience #title-utilities :is(button,a):hover { color:white; text-decoration:underline; text-underline-offset:5px; }
.book-experience .title-copy { width:min(620px,80vw); padding:clamp(150px,22vh,230px) 0 0 8vw; }
.book-experience .title-overline { color:#aebdca; font:600 11px var(--font-body); letter-spacing:.14em; }
.book-experience .title-copy h1 { margin:25px 0 30px; }
.book-experience .title-copy .title-brand img { width:min(100%,410px); }
.book-experience .title-tagline { color:#e6e9ed; font:400 clamp(17px,2vw,24px)/1.7 var(--font-display); letter-spacing:.04em; }
.book-experience #title-menu { width:250px; margin-top:40px; }
.book-experience #title-menu #title-start { display:flex; align-items:center; justify-content:space-between; width:100%; padding:17px 20px; font:600 15px var(--font-body); }
.book-experience #title-start span { float:none; margin:0; font:20px var(--font-body); }
.book-experience #title #t-continue { display:none!important; }
.book-experience .title-foot { left:8vw; bottom:30px; color:#aebdca; font:600 10px var(--font-body); letter-spacing:.18em; }
/* The shelf remains a separate screen, but a single published book is given
   an editorial feature layout instead of a five-column grid of empty space. */
.book-experience #library { background:var(--ui-bg); }
.book-experience .library-header { height:76px; justify-content:initial; gap:30px; }
.book-experience .library-wordmark { color:var(--ui-ink); font:600 16px var(--font-body); letter-spacing:-.02em; }
.book-experience .library-tools { margin-left:auto; display:flex; align-items:center; gap:24px; }
.book-experience .library-tools .language-switch { border:0; background:none; padding:8px 0; font:500 12px var(--font-body); text-decoration:none; }
.book-experience .library-intro { padding:clamp(36px,6vh,70px) 0 22px; }
.book-experience .library-intro small { color:var(--ui-muted); font:600 11px var(--font-body); letter-spacing:.17em; }
.book-experience .library-intro h1 { margin-top:13px; color:var(--ui-ink); font:500 clamp(28px,4vw,46px)/1.3 var(--font-display); letter-spacing:.02em; }
.book-experience #library:not(.searchable) .book-search { display:none; }
.book-experience #book-grid { border:0; }
.book-experience #library.single-book #book-grid { display:block; max-width:1000px; padding:18px 0 70px; }
.book-experience #library.single-book .shelf-item { display:grid; grid-template-columns:minmax(220px,350px) minmax(0,1fr); align-items:center; gap:clamp(35px,6vw,90px); }
.book-experience #library.single-book .book-cover { aspect-ratio:4/5; }
.book-experience #library.single-book .shelf-caption { margin:0; gap:16px; }
.book-experience a.shelf-caption { text-decoration:none; }
.book-experience a.shelf-caption:hover strong { text-decoration:underline; text-underline-offset:7px; }
.book-experience #library.single-book .shelf-caption .shelf-series { font:600 11px var(--font-body); letter-spacing:.13em; }
.book-experience #library.single-book .shelf-caption strong { font:500 clamp(25px,3.4vw,44px)/1.55 var(--font-display); letter-spacing:.02em; }
.book-experience #library.single-book .shelf-caption small { font:13px var(--font-body); }
@media(max-width:600px) {
 .book-experience .title-header { inset-inline:7vw; height:64px; }
 .book-experience #title-utilities { gap:14px; }
 .book-experience #title-utilities button,.book-experience #title-utilities a { font-size:11px; }
 .book-experience .title-copy { width:auto; padding:clamp(145px,22vh,200px) 8vw 0; }
 .book-experience .title-copy .title-brand img { width:min(100%,300px); }
 .book-experience .title-tagline { max-width:15em; font-size:18px; }
 .book-experience #title-menu { margin-top:30px; }
 .book-experience .library-header { gap:14px; }
 .book-experience .library-wordmark { font-size:13px; }
 .book-experience .library-tools { gap:10px; }
 .book-experience #library.single-book .shelf-item { display:block; }
 .book-experience #library.single-book .book-cover { display:block; width:min(100%,340px); }
 .book-experience #library.single-book .shelf-caption { margin-top:26px; gap:9px; }
 .book-experience #library.single-book .shelf-caption strong { font-size:25px; }
}
.book-experience #chapters button { min-height:44px; padding:9px 11px; border-radius:8px; color:var(--ui-muted); font:13px var(--font-body); }
.book-experience #chapters button:hover { background:var(--ui-raised); color:var(--ui-ink); }
.book-experience #chapters button.current { background:var(--ui-raised); color:var(--ui-ink); }
.book-experience #chapters button.current .y { color:var(--ui-link); }
.book-experience #settings .actions button.primary { background:var(--ui-accent); border-color:transparent; color:var(--ui-accent-ink); }
.book-experience #codex-modal :is(.cx-gallery-hero h2,.cx-collection-count strong,.cx-card-open,.cx-btn) { color:var(--ui-ink); border-color:var(--ui-line); }
.book-experience #codex-modal :is(.cx-gallery-hero p,.cx-gallery-hero small,.cx-collection-count span,.cx-shelf-heading,.cx-gallery-foot) { color:var(--ui-muted); }
.book-experience #codex-modal .cx-search-wrap { background:var(--ui-bg); border-color:var(--ui-line); border-radius:9px; }
.book-experience #codex-modal .cx-search { color:var(--ui-ink); }
.book-experience #codex-modal .cx-search::placeholder { color:var(--ui-muted); }
.book-experience #codex-modal .cx-tabs button { color:var(--ui-muted); border-color:var(--ui-line); border-radius:8px; }
.book-experience #codex-modal .cx-tabs button.on { background:var(--ui-accent); color:var(--ui-accent-ink); border-color:transparent; }
.book-experience #codex-modal .cx-tabs button.on b { color:inherit; }
.book-experience #codex-modal { width:min(1080px,calc(100vw - 24px)); max-height:90dvh; overflow:hidden; box-shadow:0 28px 90px #0008; }
.book-experience #codex-modal #codex { height:88dvh; max-height:88dvh; border-radius:0; background:var(--ui-panel); }
.book-experience #codex-modal #cx-body { background:var(--ui-panel); padding:24px clamp(16px,4vw,40px); }
.book-experience #codex-modal .cx-bar { border-bottom:1px solid var(--ui-line); padding:10px 18px; color:var(--ui-ink); }
.book-experience #codex-modal .cx-btn { background:var(--ui-raised); border:1px solid var(--ui-line); border-radius:8px; color:var(--ui-ink); }
.book-experience #codex-modal .cx-gallery-hero { min-height:0; padding:8px 0 22px; margin:0; border-bottom:1px solid var(--ui-line); }
.book-experience #codex-modal .cx-gallery-hero:before { display:none; }
.book-experience #codex-modal .cx-gallery-hero h2 { margin:0; font-size:clamp(24px,3vw,32px); letter-spacing:0; }
.book-experience #codex-modal .cx-collection-count { border-left:1px solid var(--ui-line); }
.book-experience #codex-modal .cx-collection-count strong { color:var(--ui-ink); font:500 36px var(--font-display); }
.book-experience #codex-modal .cx-gallery-tools { padding:0; margin:18px 0; }
.book-experience #codex-modal .cx-tabs button { background:transparent; }
.book-experience #codex-modal .cx-tabs button.on { background:var(--ui-accent); }
.book-experience #codex-modal .cx-search-wrap { color:var(--ui-muted); }
.book-experience #codex-modal .cx-shelf-heading { background:none; border-bottom:1px solid var(--ui-line); padding:0 0 10px; }
.book-experience #codex-modal .cx-card { overflow:hidden; transform-style:flat; }
.book-experience #codex-modal .cx-card:after { display:none; }
.book-experience #codex-modal .cx-card-art { background:var(--ui-bg); border:0; height:156px; }
.book-experience #codex-modal .cx-card-art img { background:var(--ui-bg); }
.book-experience #codex-modal .cx-card-art img.wiki-fallback { background:var(--ui-raised); padding:22px; }
.book-experience #codex-modal .cx-monogram { color:var(--ui-muted); text-shadow:none; border-color:var(--ui-line); }
.book-experience #codex-modal .cx-card-number { color:var(--ui-muted); background:var(--ui-panel); border:0; border-radius:5px; padding:4px 6px; }
.book-experience #codex-modal .cx-new { background:var(--ui-accent); color:var(--ui-accent-ink); box-shadow:none; }
.book-experience #codex-modal .cx-card-copy>small,.book-experience #codex-modal .cx-card-copy>span { color:var(--ui-muted); }
.book-experience #codex-modal .cx-card-open { border-color:var(--ui-line); }
.book-experience #codex-modal .cx-gallery-foot { background:none; border-color:var(--ui-line); }
.book-experience #codex-modal[data-view=detail] #cx-body { background:var(--ui-panel); }
.book-experience #codex-modal[data-view=detail] .gen-fig { padding:0; border:0; border-radius:9px; overflow:hidden; background:var(--ui-raised); box-shadow:none; }
.book-experience #codex-modal[data-view=detail] .gen-fig img { background:var(--ui-raised); }
.book-experience #codex-modal[data-view=detail] .gen-fig figcaption { background:var(--ui-raised); color:var(--ui-muted); }
.book-experience #codex-modal[data-view=detail] a { color:var(--ui-link); }
@media(max-width:600px) {
 .book-experience #codex-modal { width:calc(100vw - 12px); max-height:96dvh; }
 .book-experience #codex-modal #codex { height:94dvh; max-height:94dvh; }
 .book-experience #codex-modal #cx-body { padding:18px 14px; }
 .book-experience #codex-modal .cx-gallery-hero { padding:4px 0 16px; }
 .book-experience #codex-modal .cx-collection-count { min-width:80px; padding:0 0 0 12px; }
 .book-experience #codex-modal .cx-card-art { height:128px; }
}
/* The evidence dialog is appended to body, so it carries the same appearance tokens itself. */
.cite-modal {
 box-sizing:border-box; width:min(680px,calc(100vw - 32px)); max-width:none; max-height:min(86dvh,780px);
 margin:auto; padding:0; overflow:hidden;
 border:1px solid var(--ui-line); border-radius:18px;
 background:var(--ui-panel); color:var(--ui-ink);
 box-shadow:0 28px 90px #0009;
}
.cite-modal::backdrop { background:#070b10b8; backdrop-filter:blur(6px); }
.cite-modal .cite-modal-body { box-sizing:border-box; position:relative; max-height:min(86dvh,780px); overflow:auto; padding:32px clamp(24px,5vw,44px) 38px; font:14px/1.85 var(--font-body); overscroll-behavior:contain; }
.cite-modal .ct-head { margin:0 48px 10px 0; color:var(--ui-muted); font:600 12px/1.5 var(--font-body); letter-spacing:.04em; }
.cite-modal .ct-sentence { margin:0 44px 28px 0; color:var(--ui-ink); font:500 clamp(18px,2.4vw,23px)/1.75 var(--font-display); }
.cite-modal section+section { margin-top:25px; padding-top:25px; border-top:1px solid var(--ui-line); }
.cite-modal section b { display:block; color:var(--ui-ink); font:600 16px/1.5 var(--font-body); }
.cite-modal .ct-meta { margin-top:5px; color:var(--ui-muted); font:12px/1.65 var(--font-body); }
.cite-modal section p { color:var(--ui-ink); line-height:1.8; overflow-wrap:anywhere; }
.cite-modal section small { margin-top:16px; color:var(--ui-muted); font:11px/1.6 var(--font-body); }
.cite-modal blockquote { margin:8px 0 0; padding:14px 18px; border:0; border-radius:10px; background:var(--ui-raised); color:var(--ui-ink); line-height:1.8; }
.cite-modal a { color:var(--ui-link); text-decoration:underline; text-underline-offset:3px; }
.cite-modal .cite-close { position:absolute; top:22px; right:22px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:10px; background:var(--ui-raised); color:var(--ui-ink); font:24px/1 var(--font-body); cursor:pointer; }
.cite-modal :is(.cite-close,a):focus-visible { outline:2px solid var(--ui-link); outline-offset:3px; }
.cite-modal .source-rights { color:var(--ui-muted); border-color:var(--ui-line); }
@media(max-width:600px) {
 .cite-modal { width:calc(100vw - 16px); max-height:88dvh; border-radius:14px; }
 .cite-modal .cite-modal-body { max-height:88dvh; padding:24px 20px 30px; }
 .cite-modal .ct-sentence { margin-right:30px; font-size:18px; }
 .cite-modal .cite-close { top:14px; right:14px; }
}
/* Short desktop windows keep two narration lines above the transport. */
@media(min-width:601px) and (max-height:750px) {
 .book-experience #narration { padding:12px 22px 10px; }
 .book-experience #question-desk { padding:8px 22px; }
 .book-experience #suggest { display:none; }
}
/* Encyclopedia affordances stay recognizable with and without article photos. */
.book-experience #book-codex { display:inline-flex; align-items:center; gap:6px; }
.book-experience .wiki-entry-icon,.book-experience #title-menu .title-codex-symbol { display:inline-flex; align-items:center; justify-content:center; }
.book-experience .wiki-entry-icon .ic-svg { width:18px; height:18px; }
.book-experience #title-menu .title-codex-symbol .ic-svg { width:26px; height:26px; }
.book-experience #codex-modal .cx-kind-icon { position:absolute; left:10px; bottom:10px; z-index:2; display:grid; place-items:center; width:34px; height:34px; color:var(--ui-ink); background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:9px; box-shadow:0 2px 8px #0005; }
.book-experience #codex-modal .cx-kind-icon .ic-svg { width:20px; height:20px; }
.book-experience #codex-modal .cx-image-credit:empty { display:none; }
@media(max-width:600px) { .book-experience .wiki-entry-icon .ic-svg { width:16px; height:16px; } .book-experience #codex-modal .cx-kind-icon { width:30px; height:30px; left:7px; bottom:7px; } }
.book-experience #codex-modal .cx-card-art:not(.has-image) .cx-kind-icon { display:none; }

.book-experience #codex-modal .cx-card-copy>span:empty { display:none; }

/* Reading-size preference changes prose, while controls and diagrams stay stable. */
:root[data-text-size="small"] .book-experience #say { font-size:15px; }
:root[data-text-size="large"] .book-experience #say { font-size:20px; line-height:1.8; }
:root[data-lang="en"][data-text-size="small"] .book-experience #say { font-size:12.5px; }
:root[data-lang="en"][data-text-size="large"] .book-experience #say { font-size:16px; line-height:1.7; }
@media(max-width:600px) {
 :root[data-text-size="small"] .book-experience #say { font-size:14px; }
 :root[data-text-size="large"] .book-experience #say { font-size:18px; }
 :root[data-lang="en"][data-text-size="small"] .book-experience #say { font-size:12px; }
 :root[data-lang="en"][data-text-size="large"] .book-experience #say { font-size:16px; }
}
/* Do not expose the legacy globe while the reader or next chapter starts. */
html[data-reader-boot] #app { visibility:hidden; }
.book-experience[data-stage-surface="scene"] #stage > :is(#globe-svg,#globe-canvas,#motion-canvas,#focus-label,#map-tools) { visibility:hidden; pointer-events:none; }
.book-experience .cut-k-semantic { transition:none; }