.timeline-entry.threaded-chapter { border-left: 2px solid #356f72; padding-left: 10px; }
:root {
  --ink: #17181c;
  --ink-soft: #23252b;
  --panel: #f1eee6;
  --paper: #faf8f1;
  --line: #d2cec2;
  --muted: #686a70;
  --cyan: #42d9c8;
  --coral: #e96d51;
  --gold: #d6a83f;
  --focus: #197f76;
  --radius: 6px;
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--ink);
  background-image: radial-gradient(#383b43 0.7px, transparent 0.7px);
  background-size: 14px 14px;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  color: #f8f4e9;
  background: rgba(23, 24, 28, 0.96);
  border-bottom: 1px solid #3b3d44;
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font: 700 11px/1 "Avenir Next", sans-serif;
}
.brand strong { display: block; font: 600 18px/1 "Baskerville", Georgia, serif; }
.brand div span { display: block; margin-top: 4px; color: #999ca5; font-size: 10px; text-transform: uppercase; }

.view-tabs { display: flex; padding: 3px; background: #0f1013; border: 1px solid #373941; border-radius: var(--radius); }
.tab { min-width: 92px; padding: 7px 13px; border: 0; border-radius: 3px; color: #aeb0b8; background: transparent; }
.tab.is-active { color: var(--ink); background: var(--cyan); font-weight: 700; }

.server-state { justify-self: end; color: #aeb0b8; font-size: 12px; }
.server-state span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px #42d9c822; }
.server-state.is-offline span { background: var(--coral); }

main { min-height: calc(100vh - 64px); }
.studio-view { display: none; grid-template-columns: minmax(320px, 420px) 1fr; height: calc(100vh - 64px); min-height: 0; }
.studio-view.is-active { display: grid; }

.controls-panel { padding: 26px 28px 40px; background: var(--panel); border-right: 1px solid #050506; overflow: auto; }
.panel-heading, .gallery-heading, .workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel-heading { margin-bottom: 24px; }
h1 { margin: 2px 0 0; font: 600 25px/1.1 "Baskerville", Georgia, serif; letter-spacing: 0; }
.eyebrow { color: var(--coral); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }

form { display: grid; gap: 17px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field, .stat-grid label { display: grid; gap: 6px; min-width: 0; }
.field > span, .stat-grid span, .range-field > span { color: #4f5157; font-size: 11px; font-weight: 700; }
.field small { justify-self: end; margin-top: -3px; color: var(--muted); font-size: 10px; }

input, textarea, select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #bbb8ae;
  border-radius: 3px;
  outline: none;
  color: var(--ink);
  background: var(--paper);
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: var(--focus); box-shadow: 0 0 0 2px #197f7622; }

.seed-row { display: grid; grid-template-columns: 1fr 38px; align-items: end; gap: 8px; }
.portable-seed-field { display: grid; gap: 8px; padding: 11px; border: 1px solid #cbc7bc; background: #e8e4da; }
.portable-seed-field textarea { min-height: 70px; font: 10px/1.45 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.seed-actions { display: flex; justify-content: flex-end; gap: 7px; }
.secondary-form-button { min-height: 32px; padding: 6px 11px; border: 1px solid #aaa79e; border-radius: 3px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; }
.secondary-form-button:hover { border-color: var(--focus); color: var(--focus); background: #f7f4eb; }
.icon-button { width: 38px; height: 38px; padding: 0; border: 1px solid #aaa79e; border-radius: 3px; color: var(--ink); background: transparent; font-size: 19px; }
.icon-button:hover { border-color: var(--ink); background: #e5e1d7; }

fieldset { min-width: 0; margin: 2px 0 0; padding: 14px; border: 1px solid #cbc7bc; border-radius: var(--radius); }
legend { padding: 0 7px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.art-mode-fieldset { padding: 5px; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.segmented-control label { position: relative; min-width: 0; cursor: pointer; }
.segmented-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented-control span { display: grid; place-items: center; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 3px; color: #55575d; background: #e5e1d7; }
.segmented-control strong { font-size: 12px; }
.segmented-control input:checked + span { border-color: var(--focus); color: #f4fffc; background: var(--focus); }
.segmented-control input:focus-visible + span { box-shadow: 0 0 0 2px #197f7633; }
.range-field { display: grid; gap: 7px; }
.range-field + .range-field { margin-top: 12px; }
.advanced-fields { display: grid; gap: 12px; }
.scene-family-field { margin-top: 1px; }
.consumables-fieldset { display: grid; gap: 11px; }
.consumable-picker { display: grid; grid-template-columns: minmax(0, 1fr) 64px 38px; align-items: end; gap: 8px; }
.consumable-picker .icon-button { font-size: 22px; }
.quantity-field input { padding-inline: 6px; }
.consumable-list { display: grid; gap: 6px; }
.consumable-list > p { margin: 2px 0; color: var(--muted); font-size: 11px; }
.consumable-entry { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-left: 3px solid var(--focus); background: #e5e1d7; }
.consumable-entry strong, .consumable-entry small { display: block; }
.consumable-entry strong { font-size: 11px; }
.consumable-entry small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.remove-consumable { width: 27px; height: 27px; padding: 0; border: 1px solid #b5b1a6; border-radius: 3px; color: #6b3028; background: transparent; font-weight: 800; }
.range-field > span { display: flex; justify-content: space-between; }
input[type="range"] { height: 5px; padding: 0; border: 0; accent-color: var(--focus); background: #c9c5ba; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-grid input { padding-inline: 7px; }

.preview-workspace { display: grid; grid-template-rows: 72px minmax(0, 1fr); min-width: 0; min-height: 0; color: #f6f2e8; }
.workspace-toolbar { padding: 0 30px; background: var(--ink-soft); border-bottom: 1px solid #3b3d44; }
.workspace-toolbar strong { display: block; margin-top: 3px; font: 600 18px/1 "Baskerville", Georgia, serif; }
.toolbar-actions { display: flex; gap: 9px; }
.primary-button, .secondary-button { min-height: 38px; padding: 8px 14px; border-radius: 3px; font-weight: 700; }
.primary-button { border: 1px solid var(--cyan); color: var(--ink); background: var(--cyan); }
.primary-button:disabled { cursor: wait; opacity: 0.45; }
.secondary-button { border: 1px solid #575a64; color: #efecdf; background: transparent; }
.secondary-button:hover { border-color: #9da0a9; background: #ffffff08; }

.preview-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 24px 32px 46px; overflow: hidden; }
.stage-grid { position: absolute; inset: 0; opacity: 0.18; background-image: linear-gradient(#747782 1px, transparent 1px), linear-gradient(90deg, #747782 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.render-shell { position: relative; z-index: 1; width: min(880px, calc(100% - 32px), calc((100vh - 190px) * 1.143)); aspect-ratio: 320 / 280; filter: drop-shadow(0 20px 30px #0009); }
.render-shell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.render-shell.is-loading img { opacity: 0.35; }
.render-shell.has-error { outline: 1px solid var(--coral); }
.render-loading { position: absolute; inset: 0; display: none; place-items: center; grid-auto-flow: column; gap: 5px; }
.render-shell.is-loading .render-loading { display: grid; }
.render-loading span { width: 7px; height: 7px; background: var(--cyan); animation: pulse 0.8s steps(2) infinite alternate; }
.render-loading span:nth-child(2) { animation-delay: 0.16s; }
.render-loading span:nth-child(3) { animation-delay: 0.32s; }
@keyframes pulse { to { transform: translateY(-9px); background: var(--gold); } }

.render-meta { position: absolute; z-index: 1; bottom: 22px; display: flex; gap: 20px; color: #a9abb3; font: 11px/1 monospace; }
.render-meta span { min-width: 0; }
.render-meta #render-seed { max-width: min(52vw, 520px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.render-meta span + span::before { content: "/"; margin-right: 20px; color: #565861; }

.gallery-view { display: none; min-height: calc(100vh - 64px); padding: 34px clamp(20px, 4vw, 64px) 60px; color: #f7f3e8; }
.gallery-view.is-active { display: block; }
.gallery-heading { margin-bottom: 28px; }
.gallery-heading .secondary-button { min-width: 105px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 18px; }
.gallery-card { margin: 0; min-width: 0; }
.gallery-card button { display: block; width: 100%; padding: 0; border: 1px solid #44464e; border-radius: var(--radius); overflow: hidden; background: #0e0f12; }
.gallery-card button:hover { border-color: var(--cyan); transform: translateY(-2px); }
.gallery-card img { display: block; width: 100%; aspect-ratio: 320 / 280; object-fit: contain; }
.gallery-card figcaption { padding-top: 10px; }
.gallery-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 "Baskerville", Georgia, serif; }
.gallery-card span { display: block; margin-top: 4px; color: #999ca5; font-size: 10px; text-transform: uppercase; }
.gallery-skeleton { aspect-ratio: 320 / 280; border: 1px solid #41434a; background: #272930; animation: shimmer 1s steps(4) infinite alternate; }
@keyframes shimmer { to { background: #353841; } }

.chronicle-view { display: none; grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - 64px); color: #f7f3e8; }
.chronicle-view.is-active { display: grid; }
.chronicle-sidebar { padding: 28px 22px; background: #111216; border-right: 1px solid #3b3d44; }
.chronicle-sidebar-heading, .chronicle-heading, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chronicle-sidebar-heading { margin-bottom: 24px; }
.chronicle-sidebar .icon-button { color: #ddd8ca; border-color: #4b4d55; }
.collection-creator { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-bottom: 24px; }
.collection-creator .field > span { color: #aaa9a4; }
.collection-creator .primary-button { padding-inline: 12px; }
.collection-list { display: grid; gap: 6px; }
.collection-button { display: grid; gap: 4px; width: 100%; padding: 12px; border: 1px solid #353740; border-radius: 3px; color: #ddd9ce; background: #1b1c21; text-align: left; }
.collection-button strong { font: 600 15px/1.1 "Baskerville", Georgia, serif; }
.collection-button span { color: #898c95; font-size: 10px; }
.collection-button.is-active { border-color: var(--cyan); background: #202b2c; }
.chronicle-workspace { min-width: 0; padding: 34px clamp(22px, 4vw, 54px) 60px; }
.chronicle-heading { align-items: flex-end; padding-bottom: 26px; border-bottom: 1px solid #3b3d44; }
.chronicle-heading p { margin: 8px 0 0; color: #999ca5; font-size: 12px; }
.chronicle-actions { display: flex; align-items: center; gap: 10px; }
.chronicle-mode { display: flex; padding: 3px; border: 1px solid #454750; border-radius: 3px; background: #141519; }
.chronicle-mode button { min-height: 32px; padding: 6px 11px; border: 0; border-radius: 2px; color: #9699a2; background: transparent; font-size: 10px; font-weight: 700; }
.chronicle-mode button.is-active { color: var(--ink); background: var(--coral); }
.chronicle-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 0.8fr); gap: 38px; margin-top: 28px; }
.chronicle-columns[hidden], .story-book[hidden] { display: none; }
.section-title { margin-bottom: 18px; }
.section-title h2 { margin: 0; font: 600 18px/1 "Baskerville", Georgia, serif; }
.section-title span { color: #898c95; font-size: 10px; text-transform: uppercase; }
.section-title > div:first-child > span { display: block; margin-top: 5px; }
.timeline-sort { display: flex; padding: 3px; border: 1px solid #454750; border-radius: 3px; background: #141519; }
.timeline-sort button { min-height: 28px; padding: 5px 9px; border: 0; border-radius: 2px; color: #9699a2; background: transparent; font-size: 10px; font-weight: 700; }
.timeline-sort button.is-active { color: var(--ink); background: var(--cyan); }
.timeline { position: relative; display: grid; gap: 12px; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 7px; width: 1px; background: #4a4c54; }
.timeline-empty { margin: 30px 0; color: #8f929b; font: 16px/1.5 "Baskerville", Georgia, serif; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 15px; padding: 15px; border: 1px solid #3b3d44; border-radius: var(--radius); background: #202126; }
.timeline-entry::before { content: ""; position: absolute; left: -24px; top: 22px; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--coral); }
.timeline-date strong, .timeline-date span { display: block; }
.timeline-date strong { color: var(--cyan); font-size: 12px; }
.timeline-date span { margin-top: 4px; color: #858892; font-size: 9px; }
.timeline-copy h3 { margin: 0; font: 600 17px/1.1 "Baskerville", Georgia, serif; }
.timeline-copy p { margin: 6px 0 0; color: #b2b2ae; font-size: 11px; line-height: 1.45; }
.timeline-copy small { display: block; margin-top: 7px; color: #777a83; font-size: 9px; text-transform: uppercase; }
.chapter-record { margin-top: 10px; border-top: 1px solid #383a42; }
.chapter-record summary { padding: 8px 0 2px; color: var(--cyan); cursor: pointer; font-size: 10px; font-weight: 700; }
.chapter-record dl { display: grid; gap: 7px; margin: 9px 0 4px; }
.chapter-record dl > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.chapter-record dt { color: #7f828b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.chapter-record dd { margin: 0; color: #c7c4bb; font-size: 10px; line-height: 1.4; }
.chapter-cast { margin: 10px 0; }
.chapter-continuity, .book-continuity { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #70b9c0; background: #172224; color: #c3cfce; }
.chapter-continuity > span, .book-continuity > strong { display: block; margin-bottom: 4px; color: #70b9c0; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.chapter-continuity p, .book-continuity p { margin: 0; line-height: 1.5; }
.chapter-continuity.origin { border-left-color: var(--gold); }
.chapter-cast h4 { margin: 0 0 7px; color: var(--coral); font-size: 9px; text-transform: uppercase; }
.chapter-cast article { display: grid; grid-template-columns: minmax(105px, 0.45fr) minmax(0, 1fr); gap: 9px; padding: 7px 0; border-bottom: 1px solid #34363d; }
.chapter-cast article div { display: grid; align-content: start; }
.chapter-cast article strong { color: var(--ink); font-size: 10px; }
.chapter-cast article span { color: var(--gold); font-size: 8px; text-transform: uppercase; }
.chapter-cast article p { margin: 0; }
.chapter-cast article small { display: block; margin-top: 5px; color: #979aa2; font-size: 9px; line-height: 1.4; }
.chapter-cast article small b { margin-right: 4px; color: var(--coral); text-transform: uppercase; }
.character-profile { margin: 9px 0 0; padding-top: 7px; border-top: 1px dotted #3c3e45; }
.character-profile > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.character-profile dt { color: #a7a196; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.character-profile dd { margin: 0; color: #c7c2b8; font-size: 9px; line-height: 1.45; }
.instinctive-profile { border-color: #58715e; }
.instinctive-profile dt, .instinctive-profile strong { color: #94b49a; }
.character-drama { margin-top: 9px; padding: 9px 10px; border-left: 2px solid #b96d47; background: #241f1c; }
.character-drama > strong { color: #d7986f; font-size: 8px; text-transform: uppercase; }
.character-drama p { margin: 4px 0 0 !important; color: #c9bbb0; font-size: 9px; }
.character-drama b { color: #e0c0a7; }
.chapter-record .thread-question { padding: 8px; border-left: 2px solid var(--coral); background: #271f20; }
.chapter-record .thread-question.inherited { border-left-color: var(--cyan); background: #1c2829; }
.chapter-mysticism { margin-top: 12px; padding: 11px; border: 1px solid #616047; background: #28271d; }
.chapter-mysticism h4 { margin: 0 0 5px; color: var(--gold); font-size: 9px; text-transform: uppercase; }
.chapter-mysticism p { margin: 0; color: #d2cdbb; font-size: 10px; line-height: 1.5; }
.chapter-mysticism small { display: block; margin-top: 6px; color: #a78e83; font-size: 9px; }
.chapter-life-event, .chapter-mentions { margin: 10px 0 0; padding: 9px; border-left: 2px solid #767983; background: #1b1c21; color: #bbb8af; font-size: 10px; }
.chapter-life-event strong, .chapter-mentions strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 8px; text-transform: uppercase; }
.chapter-life-event.death { border-left-color: #b94f47; }
.chapter-life-event.resurrection { border-left-color: var(--gold); }
.chapter-life-event small, .life-ledger small { display: block; margin-top: 4px; color: #d3aaa4; }
.open-chapter { align-self: center; width: 34px; height: 34px; padding: 0; border: 1px solid #555862; border-radius: 3px; color: #e4dfd3; background: transparent; font-size: 18px; }
.codex-panel { min-width: 0; }
.codex-group + .codex-group { margin-top: 24px; }
.codex-group h3 { margin: 0 0 9px; color: #8e9199; font-size: 10px; text-transform: uppercase; }
.codex-entry { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid #34363d; }
.codex-entry strong { font-size: 12px; }
.codex-entry span { color: #858892; font-size: 9px; }
.codex-state { color: var(--gold) !important; text-transform: uppercase; }
.seed-modal { width: min(520px, calc(100vw - 28px)); padding: 0; border: 1px solid #5d6069; border-radius: var(--radius); color: var(--ink); background: var(--panel); box-shadow: 0 24px 70px #000b; }
.seed-modal::backdrop { background: #08090cc7; backdrop-filter: blur(4px); }
.seed-modal-card { display: grid; gap: 18px; padding: 24px; }
.seed-modal-card header { display: flex; align-items: center; justify-content: space-between; }
.seed-modal-card > p { margin: -4px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.modal-seed-row { display: grid; grid-template-columns: 1fr 38px; gap: 8px; }
.seed-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.chapter-modal { width: min(1060px, calc(100vw - 28px)); height: min(820px, calc(100vh - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid #5d6069; border-radius: var(--radius); color: var(--ink); background: var(--panel); box-shadow: 0 24px 70px #000b; overflow: hidden; }
.chapter-modal::backdrop { background: #08090cdb; backdrop-filter: blur(4px); }
.chapter-modal-card { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; padding: 20px; }
.chapter-modal-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.chapter-modal-card h1 { margin: 3px 0 0; font: 600 26px/1 "Baskerville", Georgia, serif; }
.chapter-modal-content { display: grid; min-height: 0; grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr); gap: 24px; }
.chapter-image-shell { position: sticky; top: 0; display: grid; place-items: center; min-height: 300px; max-height: 100%; align-self: start; background: #111216; overflow: hidden; }
.chapter-image-shell img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.chapter-image-shell:not(.is-loading) .render-loading { display: none; }
.chapter-modal-copy { min-height: 0; padding-right: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.chapter-modal-copy > p { margin: 0 0 16px; color: #4f5055; font: 14px/1.55 "Baskerville", Georgia, serif; }
.chapter-modal-copy .chapter-cast article { grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr); }
.chapter-modal-copy .chapter-cast article strong { font-size: 12px; }
.chapter-modal-copy .chapter-cast article p, .chapter-modal-copy dd { font-size: 11px; }
.chapter-modal-copy dl { display: grid; gap: 9px; margin: 14px 0 0; }
.chapter-modal-copy dl > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; }
.chapter-modal-copy dt { color: #858892; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.chapter-modal-copy dd { margin: 0; color: #34353a; line-height: 1.45; }
.chapter-era-context { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--coral); background: #e7e2d7; }
.chapter-era-context h4 { margin: 0 0 8px; color: #9b3f2d; font-size: 9px; text-transform: uppercase; }
.chapter-era-context p { margin: 0; color: #3d3e42; font: 12px/1.55 "Baskerville", Georgia, serif; }
.chapter-era-context p + p { margin-top: 8px; }
.chapter-era-context strong { display: block; margin-bottom: 2px; color: #24252a; font: 800 8px/1.4 "Avenir Next", "Trebuchet MS", sans-serif; text-transform: uppercase; }

.story-book { width: min(1240px, 100%); margin: 36px auto 80px; }
.book-empty { color: var(--muted); font: 18px/1.5 "Baskerville", Georgia, serif; }
.book-cover { min-height: 220px; display: grid; align-content: end; padding: 34px 0; border-bottom: 3px double #555861; }
.book-cover > span, .book-part > header > span, .book-lives > header > span { color: var(--coral); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.book-cover h1 { max-width: 680px; margin: 7px 0 12px; font: 600 clamp(34px, 6vw, 62px)/0.95 "Baskerville", Georgia, serif; }
.book-cover p { max-width: 590px; margin: 0; color: #999ca5; font: 14px/1.55 "Baskerville", Georgia, serif; }
.book-page-stack { min-height: min(820px, 82vh); }
.book-part { display: none; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; padding: 28px 0 40px; }
.book-part.is-active { display: grid; }
.book-part > header { align-self: start; position: sticky; top: 24px; }
.book-chapters { position: relative; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; filter: drop-shadow(0 24px 34px #050a0b66); }
.book-chapters::after { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 1px; content: ""; background: linear-gradient(180deg, transparent, #807454 8%, #354545 50%, #807454 92%, transparent); box-shadow: -5px 0 13px #17202038, 5px 0 13px #fff8; pointer-events: none; }
.book-part > header h2, .book-lives > header h2 { margin: 6px 0; font: 600 24px/1.05 "Baskerville", Georgia, serif; }
.book-part > header p { margin: 0; color: #777a83; font-size: 10px; }
.book-page { min-height: 760px; padding: 30px clamp(22px, 3vw, 38px) 38px; border: 1px solid #aebbb5; color: #263231; background-color: #e9eeea; background-image: linear-gradient(90deg, #75898512 1px, transparent 1px), linear-gradient(#7589850a 1px, transparent 1px), radial-gradient(circle at 50% 12%, #fff 0, #eef2ed 46%, #dfe7e3 100%); background-size: 28px 28px, 28px 28px, 100% 100%; box-shadow: inset 0 0 48px #8aa09a1f; overflow: hidden; }
.book-page:nth-child(odd) { border-radius: 6px 0 0 6px; box-shadow: inset -18px 0 28px #72857f1a, inset 0 0 48px #8aa09a1f; }
.book-page:nth-child(even) { border-radius: 0 6px 6px 0; box-shadow: inset 18px 0 28px #72857f1a, inset 0 0 48px #8aa09a1f; }
.book-page[hidden] { display: none; }
.book-page.is-active { display: block; animation: book-page-enter 280ms ease-out; }
.book-pagination { position: sticky; z-index: 3; top: 50px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 12px; margin: 0 0 16px; padding: 8px; border: 1px solid #3b3d44; background: #18191df2; backdrop-filter: blur(8px); }
.book-pagination:last-of-type { position: static; margin: 16px 0 0; }
.book-pagination button { width: 38px; height: 34px; border: 1px solid #555861; color: var(--ink); background: #25262b; font-size: 18px; }
.book-pagination button:disabled { color: #555861; cursor: default; }
.book-pagination span { color: #898c94; font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
.book-pagination b { color: var(--gold); }
.book-pagination span > b { display: block; }
.book-pagination span > small { display: block; margin-top: 3px; color: #777a83; font: inherit; }
.book-page-kind { margin: 18px 0 0; padding-bottom: 8px; border-bottom: 1px solid #aab9b4; color: #71612d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-opening-layout { margin-top: 24px; }
.book-card-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 24px); width: min(100%, 340px); margin: 0 auto 26px; }
.book-card-face { min-width: 0; margin: 0; }
.book-card-face > div { position: relative; aspect-ratio: 160 / 256; overflow: hidden; border: 1px solid #4b4d54; background: #101115; box-shadow: 0 14px 30px #0007; }
.book-card-face img { display: block; width: 200%; max-width: none; height: 100%; image-rendering: pixelated; }
.book-card-face.after img { transform: translateX(-50%); }
.book-memory-card { width: min(100%, 520px); margin: 0 auto 26px; }
.book-memory-card > div { position: relative; aspect-ratio: 320 / 224; overflow: hidden; border: 1px solid #5f5848; background: #101115; box-shadow: 0 14px 30px #0007; }
.book-memory-card img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.book-card-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #777a83; font-size: 9px; text-transform: uppercase; }
.book-page[data-image-loaded="true"] .book-card-loading { display: none; }
.book-page-lead { max-width: 560px; margin: 24px auto 0; color: #4a5a57; font: italic 15px/1.65 "Baskerville", Georgia, serif; text-align: center; }
@keyframes book-page-enter { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.book-page > header span { color: #3e7472; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.book-page > header h3 { margin: 5px 0 3px; color: #202d2d; font: 600 28px/1.05 "Baskerville", Georgia, serif; }
.book-page > header small { color: #667572; font-size: 9px; text-transform: uppercase; }
.book-context-link { padding: 0; border: 0; border-bottom: 1px solid #5d7779; color: var(--cyan); background: transparent; font: inherit; text-transform: inherit; }
.book-context-link:hover, .book-context-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.book-chapter > p { margin: 17px 0 0; color: #354442; font: 16px/1.7 "Baskerville", Georgia, serif; }
.book-chapter .book-thread { padding-left: 13px; border-left: 2px solid var(--cyan); color: #aebfc0; }
.book-chapter blockquote { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--coral); color: #e1b3a9; background: #251d1e; font: italic 16px/1.5 "Baskerville", Georgia, serif; }
.book-life-event small { display: block; margin: 3px 0 5px; color: #8c9693; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.book-lives { padding-top: 52px; }
.book-lives > header { margin-bottom: 24px; }
.book-life { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 34px; padding: 18px 0; border-top: 1px solid #3b3d44; }
.book-life h3 { margin: 0; font: 600 19px/1.1 "Baskerville", Georgia, serif; }
.book-life > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding-bottom: 10px; }
.book-life time { color: var(--cyan); font-size: 10px; font-weight: 800; }
.book-life p { margin: 0; color: #b9b6ae; font-size: 11px; line-height: 1.5; }
.book-life p strong { display: block; color: var(--gold); font-size: 8px; text-transform: uppercase; }
.book-life p small { display: block; margin-top: 3px; color: #747781; }
.book-guide-nav { position: sticky; z-index: 4; top: 0; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 34px; padding: 6px; border-top: 1px solid #555861; border-bottom: 1px solid #555861; background: #18191deF; backdrop-filter: blur(8px); }
.book-guide-nav button { min-height: 38px; border: 0; color: #8e9199; background: transparent; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.book-guide-nav button.is-active { color: #16171a; background: var(--gold); }
.book-pane { display: none; }
.book-pane.is-active { display: block; }
.rarity-mark { display: inline-flex; align-items: center; width: fit-content; min-height: 20px; padding: 3px 7px; border: 1px solid #565962; color: #aaa; font: 800 8px/1 sans-serif; text-transform: uppercase; }
.rarity-mark.uncommon { border-color: #49705a; color: #8bc59f; }
.rarity-mark.rare { border-color: #476d78; color: #83c0ca; }
.rarity-mark.epic { border-color: #745984; color: #c9a0df; }
.rarity-mark.legendary { border-color: #8e7737; color: #e2c66a; }
.book-page > header .rarity-mark { margin-top: 9px; }
.book-document { margin-top: 22px; padding: 22px 0; border-top: 1px solid #aebbb5; border-bottom: 1px solid #aebbb5; }
.book-document > header { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline; margin-bottom: 20px; }
.book-document > header > span { color: var(--coral); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.book-document > header > strong { color: #2e3c3a; font: 600 15px/1.2 "Baskerville", Georgia, serif; }
.book-document > header > small { grid-column: 2; color: #697875; font-size: 8px; text-transform: uppercase; }
.book-setting { margin: 0 0 22px; padding: 13px 15px; border-left: 2px solid #59696b; color: #aebbbc; background: #1b2022; font: italic 14px/1.6 "Baskerville", Georgia, serif; }
.book-passages p { margin: 0 0 15px; color: #33413f; font: 16px/1.75 "Baskerville", Georgia, serif; }
.book-passages .opening-passage::first-letter { float: left; margin: 5px 7px 0 0; color: var(--gold); font: 600 42px/0.72 "Baskerville", Georgia, serif; }
.book-literary-text { min-width: 0; }
.book-literary-text > p { margin: 0 0 18px; color: #33413f; font: 16px/1.78 "Baskerville", Georgia, serif; }
.book-literary-text .opening-passage::first-letter { float: left; margin: 6px 8px 0 0; color: #9a633f; font: 600 44px/0.72 "Baskerville", Georgia, serif; }
.book-fragment-source { padding-bottom: 10px; border-bottom: 1px solid #b8c3bf; color: #72807d !important; font: 800 8px/1.4 "Avenir Next", "Trebuchet MS", sans-serif !important; text-transform: uppercase; }
.book-scene-cast { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; margin: 0 0 20px; padding: 11px 0 12px; border-bottom: 1px solid #c6cfca; }
.book-scene-cast > span { padding-top: 3px; color: #8a5639; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.book-scene-cast > div { display: grid; gap: 8px; }
.book-scene-cast p { margin: 0; color: #4c5b58; font: 12px/1.45 "Avenir Next", "Trebuchet MS", sans-serif; }
.book-scene-cast strong { color: #263432; font: 600 14px/1.2 "Baskerville", Georgia, serif; }
.book-scene-cast small { margin: 0 7px; color: #76837f; font: 800 7px/1 "Avenir Next", "Trebuchet MS", sans-serif; text-transform: uppercase; }
.book-scene-cast em { font-style: normal; }
.book-scene-cast em::before { color: #9aa5a1; content: "· "; }
.book-memory-explanation { margin: 0 0 22px !important; padding: 13px 15px; border-left: 2px solid #9a633f; color: #694b3c !important; font-style: italic !important; }
.book-literary-ending { margin-top: 26px; }
.book-literary-continuation { margin-top: 24px; }
.book-continuation-label { margin: 0; padding-bottom: 9px; border-bottom: 1px solid #aab9b4; color: #64716f; font: 800 9px/1.4 "Avenir Next", "Trebuchet MS", sans-serif; text-transform: uppercase; }
.book-last-line { margin-top: 32px !important; padding-top: 18px; border-top: 1px solid #a78c62; color: #694b3c !important; font-style: italic; }
.book-time-transition { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; color: #7b5144; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-time-transition::before, .book-time-transition::after { height: 1px; background: #b8aaa0; content: ""; }
.book-time-transition::before { width: 22px; }
.book-time-transition::after { flex: 1; }
.book-time-transition span { color: #687674; white-space: nowrap; }
.book-time-transition:first-child { margin-top: 0; }
.book-document.form-letter .book-passages { padding-left: 18px; border-left: 1px solid #584d43; }
.book-document.form-inscription .book-passages p { color: #c4bda7; letter-spacing: 0; }
.book-document.form-world-memory { border-top-color: #70b9c0; }
.book-document.form-world-memory > header span { color: #70b9c0; }
.world-memory-profile { margin: 18px 0 24px; padding: 16px 18px; border: 1px solid #385a5d; background: #172224; }
.world-memory-profile > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #345054; }
.world-memory-profile > header span { color: #70b9c0; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.world-memory-profile > header strong { color: #d8e6e5; font: 600 18px/1.2 "Baskerville", Georgia, serif; }
.world-memory-profile dl { margin: 0; }
.world-memory-profile dl > div { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px dotted #314649; }
.world-memory-profile dl > div:last-child { border-bottom: 0; }
.world-memory-profile dt { color: #83aeb0; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.world-memory-profile dd { margin: 0; color: #c3cfce; font: 13px/1.5 "Baskerville", Georgia, serif; }
.guide-personal-profile { margin: 12px 0; padding: 11px 13px; border-left: 2px solid #b96d47; background: #211e1c; }
.guide-personal-profile p { margin: 5px 0; }
.guide-personal-profile strong { display: inline-block; min-width: 116px; color: #d7986f; font-size: 8px; text-transform: uppercase; }
.book-thought { margin: 22px 8% 0; padding: 12px 16px; border: 0; border-top: 1px solid #48565a; border-bottom: 1px solid #48565a; color: #b9c8c8; background: transparent; font: italic 15px/1.55 "Baskerville", Georgia, serif; }
.book-thought span { display: block; margin-bottom: 5px; color: #788f91; font: 800 8px/1.2 sans-serif; text-transform: uppercase; }
.entity-commentary { margin: 25px 0 4px; padding: 17px 19px; border-left: 3px double var(--gold); background: #242218; }
.entity-commentary span { color: var(--gold); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.entity-commentary p { margin: 7px 0 0; color: #ddd4af; font: italic 18px/1.5 "Baskerville", Georgia, serif; }
.book-document > footer { margin-top: 22px; padding-top: 10px; border-top: 1px dotted #45474e; color: #787b84; font-size: 9px; line-height: 1.5; }
.book-document > footer strong { margin-right: 7px; color: #9b9ea6; text-transform: uppercase; }
.book-resolution { margin: 26px 0 18px; padding: 16px 18px; border-top: 1px solid #9e8760; border-bottom: 1px solid #9e8760; color: #33413f; }
.book-resolution > span { display: block; color: #9a633f; font: 800 8px/1 sans-serif; text-transform: uppercase; }
.book-resolution > p { margin: 8px 0 5px; font: italic 17px/1.55 "Baskerville", Georgia, serif; }
.book-resolution > small { display: block; color: #68736f; font: 12px/1.5 "Baskerville", Georgia, serif; }
.book-resolution .book-question { margin-top: 14px; }
.book-chapter-archive { margin-top: 20px; border-top: 1px solid #aebbb5; color: #465451; }
.book-chapter-archive > summary { padding: 13px 2px; color: #60706d; cursor: pointer; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-chapter-archive[open] > summary { color: #9a633f; }
.book-chapter-archive > div { padding: 2px 0 12px; }
.book-history-shift { margin: 24px 0; padding: 16px 18px; border: 1px solid #4b4430; background: #211f19; }
.book-history-shift header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.book-history-shift header span { color: var(--gold); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-history-shift header strong { color: #d9c980; font: 600 16px/1.2 "Baskerville", Georgia, serif; }
.book-history-shift p { margin: 7px 0; color: #b9b4a4; font: 13px/1.55 "Baskerville", Georgia, serif; }
.book-history-shift p b { color: #ded8c5; }
.book-history-shift footer { margin-top: 12px; padding-top: 9px; border-top: 1px solid #47412f; color: #aaa187; font-size: 9px; text-transform: uppercase; }
.book-history-shift footer b { margin-right: 8px; color: var(--gold); }
.book-term { --entity-color: #aeb1b8; position: relative; display: inline; padding: 0 2px; border: 0; border-bottom: 2px solid var(--entity-color); color: color-mix(in srgb, var(--entity-color) 78%, white); background: color-mix(in srgb, var(--entity-color) 10%, transparent); font: inherit; letter-spacing: inherit; text-align: inherit; }
.book-term:hover, .book-term:focus-visible { color: #fff; background: color-mix(in srgb, var(--entity-color) 24%, transparent); }
.book-term::after { content: attr(data-reference-tooltip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 9px); width: max-content; max-width: min(280px, 70vw); padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--entity-color) 55%, #454750); color: #ece8dd; background: #111216f5; box-shadow: 0 8px 24px #0009; font: 700 9px/1.45 sans-serif; text-transform: uppercase; white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 120ms ease, transform 120ms ease; }
.book-term:hover::after, .book-term:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.type-personagem { --entity-color: #70b9c0; }
.type-animal { --entity-color: #83b978; }
.type-criatura { --entity-color: #df806b; }
.type-lugar { --entity-color: #d5b95f; }
.type-mundo { --entity-color: #7199d1; }
.type-reliquia { --entity-color: #b490c9; }
.type-capitulo { --entity-color: #a4a6ae; }
.book-legend { margin-top: 72px; padding: 24px 0 8px; border-top: 3px double #555861; }
.book-legend header > span { color: var(--coral); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-legend h2 { margin: 5px 0 18px; font: 600 26px/1.1 "Baskerville", Georgia, serif; }
.book-legend > div { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.book-legend > div > span { --entity-color: #aeb1b8; padding: 5px 7px; border-left: 4px solid var(--entity-color); color: color-mix(in srgb, var(--entity-color) 80%, white); background: color-mix(in srgb, var(--entity-color) 10%, transparent); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-legend > p { margin: 16px 0 0; color: #81848c; font-size: 10px; line-height: 1.5; }
.reference-entry summary span { color: var(--coral); }
.chapter-source { margin: 0 0 16px; padding: 11px 12px; border-left: 2px solid var(--gold); background: #211f19; }
.chapter-source > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chapter-source > div > span, .chapter-source > small { color: #898b92; font-size: 8px; text-transform: uppercase; }
.chapter-source > strong { display: block; margin-top: 7px; color: #d4cdb6; }
.chapter-source > p { margin: 4px 0; color: #9c998f; font-size: 10px; }
.chapter-thought, .chapter-entity { margin: 12px 0; padding: 10px 12px; border-left: 2px solid #5c7476; color: #b8c4c4; background: #1b2022; font: italic 11px/1.5 "Baskerville", Georgia, serif; }
.chapter-entity { border-left-color: var(--gold); color: #d2c69e; background: #252217; }
.chapter-thought strong, .chapter-entity strong { display: block; margin-bottom: 4px; color: inherit; font: 800 8px/1.2 sans-serif; text-transform: uppercase; }
.chapter-interactions { margin: 16px 0; padding: 12px 14px; border-left: 2px solid var(--cyan); background: #1a2021; }
.chapter-interactions h4 { margin: 0 0 9px; color: var(--cyan); font-size: 9px; text-transform: uppercase; }
.chapter-interactions article { padding: 9px 0; border-bottom: 1px solid #304042; }
.chapter-interactions article:last-child { border-bottom: 0; }
.chapter-interactions p { margin: 4px 0; color: #aebbbb; font-size: 11px; line-height: 1.5; }
.chapter-interactions article > strong { display: block; margin-bottom: 2px; color: #d4dddd; font-size: 9px; }
.chapter-interactions small { display: block; margin-top: 5px; color: #91a5a5; font-size: 9px; line-height: 1.45; }
.chapter-interactions small b { margin-right: 5px; color: #bed1d1; text-transform: uppercase; }
.chapter-interactions .relationship-state { color: #c6d1cb; }
.relationship-metrics { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; }
.relationship-metrics span { color: #8da4a4; font-size: 8px; text-transform: uppercase; }
.chapter-history { margin: 16px 0; padding: 13px 14px; border: 1px solid #524a32; background: #221f18; }
.chapter-history h4 { margin: 0 0 9px; color: var(--gold); font-size: 9px; text-transform: uppercase; }
.chapter-history p { margin: 5px 0; color: #bbb5a4; font-size: 11px; line-height: 1.5; }
.chapter-history p strong { display: block; color: #ddd1a0; font-size: 9px; text-transform: uppercase; }
.chapter-history small { display: block; margin-top: 10px; color: #888273; line-height: 1.45; }
.chapter-journey, .chapter-apparition { margin: 16px 0; padding: 13px 14px; border-left: 3px solid #7199d1; background: #1b2028; }
.chapter-apparition { border-left-color: #d5b95f; background: #242117; }
.chapter-apparition.malignant { border-left-color: #df806b; background: #281b1a; }
.chapter-journey h4, .chapter-apparition h4 { margin: 0 0 9px; color: #a9c4e8; font-size: 9px; text-transform: uppercase; }
.chapter-journey header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.journey-state { display: inline-block; padding: 3px 7px; border: 1px solid #7199d1; color: #c9ddf6; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.journey-state.trapped { border-color: #c47b65; color: #efb09c; }
.journey-state.returned { border-color: #6ea784; color: #a9d7b9; }
.journey-state.settled { border-color: #c3a45d; color: #e3ca8f; }
.chapter-apparition h4 { color: #e1c96f; }
.chapter-journey p, .chapter-apparition p, .chapter-appearance-change { margin: 6px 0; color: #b9c1cd; font-size: 11px; line-height: 1.5; }
.chapter-journey p strong, .chapter-apparition p strong, .chapter-appearance-change strong { display: block; color: #d8dde6; font-size: 8px; text-transform: uppercase; }
.guide-heading { padding: 14px 0 28px; border-bottom: 1px solid #3b3d44; }
.guide-heading span { color: var(--coral); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.guide-heading h2 { margin: 6px 0; font: 600 34px/1 "Baskerville", Georgia, serif; }
.guide-heading p { max-width: 560px; margin: 0; color: #8e9199; font-size: 11px; line-height: 1.5; }
.guide-list, .guide-section { margin-top: 28px; }
.guide-section + .guide-section { margin-top: 42px; }
.guide-section > h3 { margin: 0 0 10px; color: var(--cyan); font-size: 10px; text-transform: uppercase; }
.guide-era-overview { margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid #464850; }
.guide-era-overview > h4, .guide-rule-history > h4 { margin: 0 0 12px; color: var(--gold); font-size: 9px; text-transform: uppercase; }
.guide-era-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #3b3d44; }
.guide-era { min-width: 0; padding: 13px; background: #1b1c20; }
.guide-era time { color: var(--cyan); font-size: 8px; }
.guide-era h4 { margin: 6px 0; color: #d6d2c8; font: 600 15px/1.15 "Baskerville", Georgia, serif; }
.guide-era p { min-height: 72px; margin: 0 0 10px; color: #908e88; font-size: 9px; line-height: 1.5; }
.guide-era > small { color: #696c74; font-size: 8px; }
.guide-era .guide-history-link { grid-template-columns: 1fr; padding: 7px 0; }
.guide-era .guide-history-link time { display: none; }
.guide-era .guide-history-link small { display: none; }
.guide-rule-history { margin: 20px 0; padding-top: 16px; border-top: 1px solid #3b3d44; }
.guide-rule-history article { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px dotted #3b3d44; }
.guide-rule-history time { color: var(--cyan); font-size: 9px; font-weight: 800; }
.guide-rule-history strong { color: #d7ca98; font-size: 9px; text-transform: uppercase; }
.guide-rule-history p { margin: 4px 0 6px; color: #aaa79f; font-size: 10px; line-height: 1.45; }
.guide-rule-history button { padding: 0; border: 0; color: #81858e; background: transparent; font-size: 8px; text-align: left; text-decoration: underline; }
.guide-character, .guide-entry { border-top: 1px solid #3b3d44; }
.guide-character:last-child, .guide-entry:last-child { border-bottom: 1px solid #3b3d44; }
.guide-character summary, .guide-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 4px; cursor: pointer; list-style: none; }
.guide-character summary::-webkit-details-marker, .guide-entry summary::-webkit-details-marker { display: none; }
.guide-character summary div, .guide-entry summary { min-width: 0; }
.guide-character summary strong, .guide-entry summary strong { display: block; font: 600 18px/1.1 "Baskerville", Georgia, serif; }
.guide-character summary span, .guide-entry summary span { display: block; margin-top: 3px; color: #7f828b; font-size: 9px; text-transform: uppercase; }
.guide-entry summary::after { content: "+"; color: var(--cyan); font-size: 18px; }
.guide-entry[open] summary::after { content: "−"; }
.life-state { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #4b4e56; color: #aeb1b8; font-size: 8px; text-transform: uppercase; }
.life-state.alive { border-color: #47745d; color: #85c7a2; }
.life-state.dead { border-color: #713e3a; color: #d17b72; }
.life-state.resurrected { border-color: #847342; color: #e0c76e; }
.guide-detail { padding: 4px 4px 20px; }
.guide-detail > p { margin: 7px 0; color: #aaa79f; font-size: 11px; line-height: 1.5; }
.guide-detail > p > strong { margin-right: 6px; color: #d5d1c7; font-size: 9px; text-transform: uppercase; }
.guide-detail > h4 { margin: 20px 0 7px; color: var(--cyan); font-size: 8px; text-transform: uppercase; }
.guide-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0; }
.guide-tags > span { margin-right: 3px; color: #777a83; font-size: 8px; font-weight: 800; }
.guide-tags > b { padding: 4px 6px; border: 1px solid #3e4149; color: #b8b5ad; background: #202126; font-size: 8px; font-weight: 600; text-transform: uppercase; }
.guide-history { border-top: 1px solid #303239; }
.guide-history-link { display: grid; width: 100%; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 2px; border: 0; border-bottom: 1px solid #303239; color: inherit; background: transparent; text-align: left; }
.guide-history-link:hover, .guide-history-link:focus-visible { background: #22242a; }
.guide-history-link time { padding-top: 2px; color: var(--cyan); font-size: 9px; font-weight: 800; }
.guide-history-link strong, .guide-history-link small { display: block; }
.guide-history-link strong { color: #d5d1c7; font: 600 14px/1.2 "Baskerville", Georgia, serif; }
.guide-history-link small { margin-top: 3px; color: #71747d; font-size: 8px; text-transform: uppercase; }
.guide-fact { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #2f3137; }
.guide-fact time { color: var(--cyan); font-size: 9px; font-weight: 800; }
.guide-fact p { margin: 0; color: #b9b6ae; font-size: 11px; line-height: 1.5; }
.guide-fact p strong, .guide-fact p small { display: block; }
.guide-fact p strong { color: var(--gold); font-size: 8px; text-transform: uppercase; }
.guide-fact p small { margin-top: 3px; color: #71747d; }
.life-ledger { padding: 10px 12px; border-left: 3px solid #b94f47; background: #261b1b; }
.life-ledger.resurrection { border-left-color: var(--gold); background: #292619; }
.life-ledger strong { display: block; color: var(--ink); }
.guide-appearance { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px 0; padding: 11px 12px; background: #1b2022; }
.appearance-swatch { width: 18px; height: 18px; border: 2px solid #d7d2c4; background: var(--appearance-color); box-shadow: 0 0 0 1px #111; }
.guide-appearance p { margin: 0; color: #b8c4c4; font-size: 11px; line-height: 1.5; }
.guide-appearance strong, .appearance-ledger strong { display: block; color: var(--cyan); font-size: 8px; text-transform: uppercase; }
.appearance-ledger { padding: 10px 12px; border-left: 3px solid #7199d1; background: #1b2028; color: #b9c1cd; font-size: 11px; line-height: 1.5; }
.appearance-ledger small { display: block; margin-top: 3px; color: #747d8a; }
.guide-world-memory { margin: 12px 0; padding: 12px 14px; border-left: 3px solid #70b9c0; background: #172224; }
.guide-world-memory > strong { color: #70b9c0; font-size: 8px; text-transform: uppercase; }
.guide-world-memory p { margin: 6px 0; color: #b8c7c6; font: 12px/1.5 "Baskerville", Georgia, serif; }
.guide-world-memory small { color: #718486; }
.guide-entry.mystical summary strong { color: var(--gold); text-transform: capitalize; }
.guide-relic { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 1px solid #3b3d44; }
.guide-relic span { color: #7f828b; font-size: 9px; text-transform: uppercase; }
.magical-item > summary { align-items: center; }
.magical-item .item-state { color: #b490c9; font-size: 8px; text-transform: uppercase; }
.magical-item .item-state.destroyed { color: #c57969; }
.magical-item .item-state.forgotten { color: #858994; }
.artifact-memory p strong { color: #b490c9; }
.chapter-magical-items { margin-top: 18px; padding: 14px 16px; border-left: 3px solid #9b75ad; background: #201c24; }
.chapter-magical-items article + article { margin-top: 12px; padding-top: 12px; border-top: 1px solid #493b50; }
.chapter-magical-items header { display: flex; justify-content: space-between; gap: 12px; }
.chapter-magical-items header span { color: #b490c9; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.chapter-magical-items p { margin: 7px 0 0; }
.guide-mystery { padding: 18px 4px; border-bottom: 1px solid #3b3d44; }
.guide-mystery span { color: var(--cyan); font-size: 9px; text-transform: uppercase; }
.guide-mystery p { margin: 7px 0; color: #d5d1c7; font: italic 18px/1.45 "Baskerville", Georgia, serif; }
.guide-mystery b { color: #898c95; font-size: 8px; text-transform: uppercase; }
.book-mysticism { margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--gold); background: #28271d; }
.book-mysticism strong { color: var(--gold); font-size: 9px; text-transform: uppercase; }
.book-mysticism p { margin: 6px 0; color: #cac5b4; font-size: 12px; line-height: 1.5; }
.book-mysticism small { color: #a98d83; }
.book-journey, .book-apparition, .book-appearance-change { margin-top: 20px; padding: 14px 16px; border-left: 3px solid #7199d1; background: #1b2028; }
.book-temporal-sequence, .chapter-temporal-sequence { margin-top: 20px; padding: 14px 16px; border-left: 3px solid #d0a85c; background: #211f1a; }
.book-temporal-sequence header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.book-temporal-sequence header span, .book-temporal-sequence time, .chapter-temporal-sequence time { color: #d9bc7d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-temporal-sequence ol, .chapter-temporal-sequence ol { display: grid; gap: 10px; margin: 0; padding: 0 0 0 18px; }
.book-temporal-sequence li, .chapter-temporal-sequence li { padding-left: 5px; }
.book-temporal-sequence li::marker, .chapter-temporal-sequence li::marker { color: #d0a85c; }
.book-temporal-sequence p, .chapter-temporal-sequence p { margin: 3px 0 0; }
.book-apparition { border-left-color: #d5b95f; background: #242117; }
.book-apparition.malignant { border-left-color: #df806b; background: #281b1a; }
.book-appearance-change { border-left-color: #70b9c0; background: #192324; }
.book-journey header, .book-apparition header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.book-journey header span, .book-apparition header span, .book-appearance-change > strong { color: #9bb7dd; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.book-apparition header span, .book-apparition header strong { color: #dcc66f; }
.book-apparition.malignant header span, .book-apparition.malignant header strong { color: #e4917f; }
.book-journey p, .book-apparition p, .book-appearance-change p { margin: 6px 0; color: #c2c7cf; font: 13px/1.5 "Baskerville", Georgia, serif; }
.book-appearance-change small { color: #789193; }
.book-life-event { margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid #b94f47; background: #261b1b; color: #c9b4b0; font-size: 11px; }
.book-life-event.resurrection { border-left-color: var(--gold); background: #292619; }
.book-life-event strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 8px; text-transform: uppercase; }
.book-era-context { margin: 22px 0; padding: 18px 20px; border: 1px solid #4d4f57; border-left: 3px solid var(--coral); background: #17181dcc; }
.book-era-context header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.book-era-context header span { color: var(--coral); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.book-era-context header strong { color: #f0ece2; font: 600 16px/1.2 "Baskerville", Georgia, serif; }
.book-era-context p { margin: 6px 0 0; color: #bbb8af; font: 13px/1.6 "Baskerville", Georgia, serif; }
.book-era-context b { color: #e3ded2; font-family: "Avenir Next", "Trebuchet MS", sans-serif; font-size: 9px; text-transform: uppercase; }

.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(360px, calc(100vw - 44px)); padding: 11px 14px; border-radius: 3px; color: #fff; background: #34363d; box-shadow: 0 10px 30px #0006; opacity: 0; transform: translateY(12px); pointer-events: none; transition: 160ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { background: #8f382b; }

@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto; padding-inline: 15px; }
  .server-state { display: none; }
  .studio-view.is-active { display: block; }
  .controls-panel { border-right: 0; }
  .studio-view { height: auto; min-height: calc(100vh - 64px); }
  .preview-workspace { min-height: 700px; }
  .preview-stage { min-height: 620px; }
  .chronicle-view.is-active { grid-template-columns: 220px minmax(0, 1fr); }
  .chronicle-view.is-active:has(.story-book:not([hidden])) { display: block; }
  .chronicle-view.is-active:has(.story-book:not([hidden])) .chronicle-sidebar { display: none; }
  .chronicle-columns { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .topbar { height: auto; min-height: 62px; }
  .brand div span { display: none; }
  .brand strong { font-size: 16px; }
  .view-tabs .tab { min-width: 72px; padding-inline: 9px; }
  .controls-panel { padding: 22px 17px 32px; }
  .field-grid { grid-template-columns: 1fr; }
  .preview-workspace { grid-template-rows: auto 1fr; min-height: 650px; }
  .workspace-toolbar { align-items: flex-start; flex-direction: column; padding: 16px 17px; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions button { flex: 1; padding-inline: 8px; }
  .world-memory-profile dl > div { grid-template-columns: 1fr; gap: 3px; }
  .preview-stage { min-height: 520px; padding-inline: 16px; }
  .render-shell { width: min(88vw, 400px); }
  .gallery-view { padding-inline: 17px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .chronicle-view.is-active { display: block; }
  .chronicle-sidebar { border-right: 0; border-bottom: 1px solid #3b3d44; }
  .chronicle-workspace { padding-inline: 17px; }
  .chronicle-heading { align-items: flex-start; flex-direction: column; }
  .chronicle-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .chronicle-heading .primary-button, .chronicle-mode { width: 100%; }
  .chronicle-mode button { flex: 1; }
  .timeline-entry { grid-template-columns: 86px minmax(0, 1fr) auto; gap: 9px; }
  .section-title { align-items: flex-start; }
  .chapter-modal-card { overflow-y: auto; }
  .chapter-modal-content { display: block; min-height: auto; }
  .chapter-image-shell { position: static; min-height: 0; max-height: none; margin-bottom: 20px; }
  .chapter-image-shell img { height: auto; }
  .chapter-modal-copy { overflow: visible; padding-right: 0; }
  .chapter-modal-copy .chapter-cast article { grid-template-columns: 1fr; }
  .chapter-cast .character-profile > div { grid-template-columns: 1fr; gap: 1px; }
  .book-cover { min-height: 170px; }
  .book-part, .book-life { grid-template-columns: 1fr; gap: 18px; }
  .book-part > header { position: static; }
  .book-chapters { display: block; filter: drop-shadow(0 16px 24px #050a0b55); }
  .book-chapters::after { display: none; }
  .book-page { min-height: 0; max-height: none; padding: 22px 16px 26px; border-radius: 0; overflow: visible; }
  .book-page:nth-child(odd) { border-radius: 6px 6px 0 0; box-shadow: inset 0 0 36px #8aa09a1f; }
  .book-page:nth-child(even) { border-top: 0; border-radius: 0 0 6px 6px; box-shadow: inset 0 0 36px #8aa09a1f; }
  .book-reading-page > .book-page-kind { display: none; }
  .book-page-stack { min-height: 0; }
  .book-pagination { top: 48px; }
  .book-card-spread { gap: 12px; width: min(100%, 310px); }
  .book-chapter > header h3 { font-size: 25px; }
  .book-guide-nav { grid-template-columns: repeat(2, 1fr); }
  .book-guide-nav button:last-child { grid-column: 1 / -1; }
    .guide-era-list { grid-template-columns: 1fr; }
    .guide-era p { min-height: 0; }
  .book-document > header { grid-template-columns: 1fr; }
  .book-document > header > small { grid-column: 1; }
  .book-term::after { position: fixed; right: 16px; bottom: 16px; left: 16px; width: auto; max-width: none; transform: translateY(4px); }
  .book-term:hover::after, .book-term:focus-visible::after { transform: translateY(0); }
  .guide-character summary, .guide-entry summary { align-items: flex-start; }
  .guide-fact { grid-template-columns: 70px minmax(0, 1fr); }
  .guide-history-link { grid-template-columns: 68px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}