:root {
  --bg: #0b1018;
  --panel: #141c29;
  --panel-2: #1b2434;
  --panel-dark: #0b111a;
  --surface: #111824;
  --ink: #f1eee9;
  --muted: #a5b0c0;
  --soft: #798598;
  --line: rgba(184, 200, 219, .15);
  --accent: #d6b078;
  --accent-bright: #f3d2a4;
  --accent-wash: rgba(214, 176, 120, .12);
  --shadow: 0 22px 65px rgba(0, 0, 0, .30);
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Trebuchet MS", "Segoe UI", sans-serif; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 85% 10%, rgba(92, 107, 163, .13), transparent 40%), linear-gradient(150deg, rgba(214,176,120,.04), transparent 55%); }
body[data-theme="light"] {
  --bg: #eeeae3; --panel: #f9f7f2; --panel-2: #eee9df; --panel-dark: #e5dfd4;
  --surface: #f7f4ed; --ink: #202a39; --muted: #5c6676; --soft: #6f7882;
  --line: rgba(42, 52, 66, .18); --accent: #916535; --accent-bright: #69481e;
  --accent-wash: rgba(145,101,53,.08); --shadow: 0 22px 55px rgba(43,45,50,.13);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .42; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
[hidden] { display: none !important; }
.shell { margin: 0 auto; max-width: 1900px; min-height: 100vh; }
.masthead { display: flex; align-items: center; gap: 20px; padding: 25px 34px 22px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 62px; height: 62px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-bright); font: 31px Georgia, serif; letter-spacing: -.12em; padding-right: 5px; box-shadow: inset 0 0 0 5px var(--bg); }
.brand-mark span { position: relative; top: 7px; left: -4px; font-size: 19px; }
.brand-text { flex: 1; min-width: 0; }
.eyebrow { margin: 0 0 5px; text-transform: uppercase; letter-spacing: .23em; color: var(--accent); font-weight: 700; font-size: 10px; }
.brand-text h1 { margin: 0; font: 500 clamp(19px, 2.2vw, 32px)/1.18 Georgia, "Times New Roman", serif; letter-spacing: .045em; }
.brand-text h1 span { color: var(--accent-bright); }
.edition { margin: 9px 0 0; letter-spacing: .15em; font-size: 11px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.edition-rule { background: var(--accent); width: 28px; height: 1px; opacity: .6; }
.header-actions, .reader-tools, .tab-group, .zoom-actions, .report-actions { display: flex; gap: 8px; align-items: center; }
.icon-button, .tool-button, .secondary-button, .primary-button, .sidebar-toggle { border-radius: 5px; color: var(--ink); padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); transition: background .18s ease, border .18s ease, transform .15s ease; }
.icon-button:hover:not(:disabled), .tool-button:hover:not(:disabled), .secondary-button:hover:not(:disabled), .sidebar-toggle:hover { background: var(--panel-2); border-color: var(--accent); }
.icon-button { font-size: 20px; min-height: 43px; min-width: 43px; padding: 5px; }
.primary-button { background: var(--accent); color: #151924; border-color: var(--accent); font-weight: 700; }
.primary-button:hover:not(:disabled) { background: var(--accent-bright); }
.secondary-button, .primary-button { font-size: 13px; font-weight: 700; min-height: 42px; }
.nav-bar { display: flex; align-items: center; gap: 24px; padding: 0 34px; min-height: 62px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tab { padding: 18px 10px 17px; background: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.tab.active { color: var(--accent-bright); border-color: var(--accent); }
.nav-meta { margin-left: auto; color: var(--muted); font-size: 12px; }
.sidebar-toggle { display: none; }
.layout { display: grid; grid-template-columns: minmax(245px, 292px) minmax(0, 1fr); align-items: start; }
.sidebar { min-height: 75vh; border-right: 1px solid var(--line); padding: 26px 17px 70px 27px; background: var(--surface); }
.sidebar-section + .sidebar-section { margin-top: 31px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 12px; gap: 10px; }
.section-heading h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; margin: 0; font-weight: 700; color: var(--accent); }
.section-heading > span { color: var(--soft); font-size: 10px; }
.arc-list, .chapter-list, .bookmark-list { display: grid; gap: 3px; }
.arc-item, .chapter-item { display: flex; align-items: center; background: transparent; color: var(--muted); text-align: left; border: 1px solid transparent; border-radius: 4px; padding: 10px 11px; width: 100%; gap: 12px; }
.arc-item { justify-content: space-between; font-size: 12px; }
.arc-item:hover, .chapter-item:hover { background: var(--accent-wash); color: var(--ink); }
.arc-item.active, .chapter-item.active { color: var(--accent-bright); background: var(--accent-wash); border-color: rgba(214,176,120,.21); }
.arc-count { display: grid; place-items: center; min-width: 23px; padding: 2px 6px; border-radius: 20px; background: var(--panel-2); color: var(--muted); font-size: 10px; }
.field { display: block; width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); padding: 11px 12px; border-radius: 5px; font-size: 13px; }
.field::placeholder { color: var(--soft); }
#chapterSearch { margin-bottom: 10px; }
.chapter-list { max-height: min(450px, 55vh); overflow-y: auto; scrollbar-color: var(--panel-2) transparent; }
.chapter-item { gap: 13px; padding: 9px 10px; }
.chapter-number { flex: 0 0 auto; min-width: 40px; font: 18px Georgia, serif; color: var(--accent); }
.chapter-details { display: grid; gap: 1px; overflow: hidden; }
.chapter-details strong { font-size: 12px; font-weight: 600; }
.chapter-details small { font-size: 10px; color: var(--soft); }
.empty-mini, .small-muted { color: var(--soft); font-size: 11px; line-height: 1.65; padding: 0 8px; }
.bookmark-row { display: flex; align-items: stretch; padding: 2px 0; }
.bookmark-link { flex: 1; min-width: 0; text-align: left; display: grid; background: none; border: none; color: var(--ink); padding: 7px 9px; border-radius: 4px; }
.bookmark-link:hover { background: var(--accent-wash); }
.bookmark-link strong { font-size: 11px; color: var(--accent); }
.bookmark-link span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-remove { background: none; border: none; color: var(--soft); font-size: 22px; }
.bookmark-remove:hover { color: var(--accent); }
.content { min-width: 0; padding: clamp(20px, 2.8vw, 42px); }
.reader-info { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.breadcrumb { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.reader-heading { margin: 0 0 7px; font: 500 clamp(24px, 2.8vw, 37px)/1.18 Georgia, serif; letter-spacing: -.03em; }
.reader-subtitle { margin: 0; font-size: 12px; color: var(--muted); }
.tool-button { padding: 10px 13px; white-space: nowrap; font-size: 12px; }
.progress-track { height: 3px; width: 100%; background: var(--panel-2); margin-bottom: 16px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width .2s ease; }
.reader-frame { background: #090c12; position: relative; border: 1px solid var(--line); border-radius: 5px; padding: 13px; box-shadow: var(--shadow); }
.reader-frame:fullscreen { display: grid; place-items: center; background: #050607; padding: 18px; }
.reader-frame:fullscreen .spread { width: min(100%, 180vh); }
.spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; min-width: 0; position: relative; }
.comic-page { position: relative; min-width: 0; overflow: hidden; background: #20232b; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.06); }
.page-canvas { display: block; width: 100%; flex: 1 1 auto; min-width: 0; min-height: 0; border: none; padding: 0; position: relative; background: #11131b; color: #ddd; cursor: pointer; }
.page-canvas:hover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(214,176,120,.48); pointer-events: none; }
.page-canvas.edge-page { cursor: default; }
.page-image { display: block; width: 100%; height: clamp(360px, 46vw, 730px); object-fit: contain; object-position: center; }
.image-error { padding: 40px 12px; font-size: 12px; color: #efc1b5; overflow-wrap: anywhere; }
.page-caption { padding: 9px 12px; min-height: 52px; background: #161922; color: #e9e4de; display: grid; align-content: center; gap: 1px; }
.caption-title { font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caption-characters { font-size: 10px; color: #a8abb7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-number-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(8,10,15,.8); color: #f3efe8; border: 1px solid rgba(255,255,255,.15); border-radius: 3px; padding: 3px 8px; font-size: 11px; }
.page-overlays { position: absolute; top: 11px; right: 11px; z-index: 2; display: flex; gap: 6px; }
.page-action { min-width: 32px; min-height: 32px; border-radius: 4px; background: rgba(10,13,19,.85); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 17px; line-height: 1; }
.page-action:hover { border-color: #eac28e; color: #eac28e; background: #10141d; }
.flag-action { font-weight: 900; }
.zoom-action { font-size: 23px; }
.spread-gutter { position: absolute; z-index: 1; pointer-events: none; top: 12px; bottom: 13px; width: 1px; left: 50%; transform: translateX(-50%); background: #030409; box-shadow: -2px 0 7px rgba(0,0,0,.35), 2px 0 7px rgba(0,0,0,.35); }
.blank-page { border: none; width: 100%; cursor: pointer; min-height: clamp(360px, 46vw, 730px); flex: 1; display: flex; gap: 20px; flex-direction: column; align-items: center; justify-content: center; font: 16px Georgia,serif; color: #9295a1; background: #171a21; text-align: center; padding: 30px; }
.blank-page:disabled { opacity: 1; cursor: default; }
.blank-page:hover:not(:disabled) { box-shadow: inset 0 0 0 2px rgba(214,176,120,.48); }
.blank-ornament { font: 52px Georgia,serif; color: #b18e65; }
.reader-bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 12px; gap: 14px; }
.page-position { color: var(--accent-bright); font-size: 11px; text-align: center; font-weight: 700; letter-spacing: .12em; }
.reading-guide { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--soft); font-size: 11px; padding-top: 8px; border-top: 1px solid var(--line); }
.reading-notes { margin-top: 24px; padding: 15px 18px; font-size: 12px; line-height: 1.65; background: var(--accent-wash); border-left: 2px solid var(--accent); color: var(--muted); }
.reading-notes strong { color: var(--ink); }
.flag-demo { display: inline-grid; place-items: center; color: var(--accent-bright); border: 1px solid var(--accent); border-radius: 3px; width: 18px; height: 18px; font-weight: 800; }
.gallery-header { margin-bottom: 21px; }
.gallery-filters { display: grid; grid-template-columns: 1fr 1fr minmax(220px, 1.4fr); gap: 14px; padding: 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; }
.gallery-filters label { color: var(--muted); font-size: 11px; font-weight: 700; display: grid; gap: 5px; }
.gallery-meta { display: flex; justify-content: space-between; margin: 17px 0 12px; font-size: 11px; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; }
.gallery-card { min-width: 0; padding: 0; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; color: var(--ink); overflow: hidden; }
.gallery-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.gallery-thumb { aspect-ratio: .78; background: #10151e; display: grid; place-items: center; overflow: hidden; }
.gallery-thumb img { height: 100%; width: 100%; object-fit: contain; }
.gallery-card-caption { padding: 12px 10px; display: grid; gap: 4px; }
.gallery-card-count { color: var(--accent); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.gallery-card-caption strong { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-card-caption small { color: var(--soft); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-empty { grid-column: 1 / -1; border: 1px dashed var(--line); text-align: center; padding: 55px 25px; color: var(--muted); }
.gallery-empty h3 { color: var(--ink); font: 22px Georgia,serif; }
.gallery-pagination { margin-top: 25px; display: flex; align-items: center; justify-content: center; gap: 25px; color: var(--muted); font-size: 12px; }
.site-error { padding: 18px; background: var(--accent-wash); border-left: 2px solid var(--accent); margin: 20px 0; color: var(--ink); font-size: 13px; }
.empty-reader .spread { display: none; }
.footer { padding: 22px 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; color: var(--soft); font-size: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.modal { background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; padding: 0; box-shadow: 0 25px 100px rgba(0,0,0,.55); }
.modal::backdrop { background: rgba(0, 0, 0, .86); }
.zoom-modal { width: min(98vw, 1600px); max-width: none; height: min(97vh, 1150px); max-height: none; }
.zoom-toolbar { background: var(--surface); height: 57px; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.zoom-caption { color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.zoom-actions .icon-button { font-size: 14px; min-width: 36px; min-height: 35px; }
.zoom-stage { display: grid; place-items: center; overflow: auto; height: calc(100% - 57px); padding: 10px; background: #080a0d; }
.zoom-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s ease; }
.report-modal { width: min(94vw, 510px); }
.report-modal form { padding: 31px; }
.report-modal h2 { margin: 0 0 10px; font: 27px Georgia,serif; }
.report-filename { overflow-wrap: anywhere; font-size: 12px; color: var(--accent-bright); background: var(--accent-wash); padding: 10px 12px; border-left: 2px solid var(--accent); }
.report-label { font-size: 12px; font-weight: 700; margin: 22px 0 8px; display: block; }
.report-label span { font-weight: normal; color: var(--soft); }
.report-privacy { color: var(--muted); font-size: 11px; line-height: 1.6; }
.form-status { color: var(--accent-bright); font-size: 12px; min-height: 18px; }
.report-actions { justify-content: flex-end; margin-top: 14px; }
.toast { position: fixed; bottom: 25px; right: 25px; z-index: 9999; border: 1px solid var(--accent); padding: 12px 18px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); border-radius: 6px; font-size: 12px; max-width: min(90vw, 500px); opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1250px) {
  .layout { grid-template-columns: 246px minmax(0, 1fr); }
  .sidebar { padding-left: 13px; padding-right: 12px; }
  .content { padding: 24px; }
  .page-image, .blank-page { height: clamp(350px, 50vw, 650px); }
  .gallery-filters { grid-template-columns: 1fr 1fr; }
  .gallery-filters label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .masthead { padding: 17px 20px; }
  .brand-mark { width: 47px; height: 47px; font-size: 25px; }
  .brand-mark span { font-size: 15px; }
  .header-actions .secondary-button { display: none; }
  .nav-bar { padding: 0 20px; }
  .sidebar-toggle { display: inline-block; font-size: 11px; }
  .nav-meta { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; min-height: 0; border-bottom: 1px solid var(--line); border-right: 0; padding: 20px; }
  .sidebar.open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; }
  .sidebar-section + .sidebar-section { margin-top: 0; }
  .chapter-list { max-height: 270px; }
  .content { padding: 24px; }
  .page-image, .blank-page { height: min(70vw, 680px); }
}
@media (max-width: 670px) {
  .masthead { gap: 11px; }
  .brand-mark { width: 36px; height: 36px; font-size: 18px; }
  .brand-mark span { font-size: 13px; top: 5px; }
  .brand-text h1 { font-size: clamp(14px, 4.5vw, 21px); }
  .brand-text h1 span { display: block; }
  .edition { margin-top: 5px; font-size: 9px; gap: 6px; }
  .brand-text .eyebrow { font-size: 9px; }
  .nav-bar { flex-wrap: wrap; min-height: 55px; justify-content: space-between; gap: 5px; }
  .tab { padding: 16px 5px 14px; font-size: 10px; }
  .sidebar-toggle { padding: 8px 7px; font-size: 10px; }
  .sidebar.open { grid-template-columns: 1fr; }
  .content { padding: 18px 10px 28px; }
  .reader-info { align-items: flex-start; flex-wrap: wrap; }
  .reader-tools { width: 100%; }
  .reader-heading { font-size: 27px; }
  .reader-frame { padding: 4px; border-radius: 2px; }
  /* Keep both pages fully readable on phones: earlier page above later page. */
  .spread { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .spread-gutter { display: none; }
  .page-image { height: auto; max-height: 82vh; min-height: 0; }
  .blank-page { min-height: min(67vh, 480px); }
  .page-caption { padding: 6px; min-height: 50px; }
  .caption-title { font-size: 10px; }
  .caption-characters { font-size: 9px; }
  .page-overlays { top: 5px; right: 5px; flex-direction: column; gap: 5px; }
  .page-number-badge { top: 6px; left: 5px; padding: 1px 5px; }
  .page-action { min-width: 29px; min-height: 29px; }
  .reader-bottom { gap: 4px; }
  .reader-bottom .primary-button, .reader-bottom .secondary-button { font-size: 10px; padding: 7px; }
  .page-position { font-size: 9px; }
  .reading-guide { font-size: 10px; }
  .reading-guide span:last-child { width: 100%; }
  .gallery-filters { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .gallery-filters label:last-child { grid-column: auto; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .footer { flex-direction: column; padding: 20px; }
  .report-modal form { padding: 19px; }
  .zoom-toolbar { padding: 6px; }
  .zoom-caption { font-size: 10px; }
  .zoom-actions { gap: 2px; }
  .zoom-actions .icon-button { min-width: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ━━━ The Dream · immersive reading edition ━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --bg:#090a19; --surface:#101225; --panel:#15182e; --panel-2:#1c203c;
  --panel-dark:#0b0e21; --ink:#f3f5ff; --muted:#bbc0de; --soft:#888fb6;
  --line:rgba(120,171,242,.20); --accent:#65dafa; --accent-bright:#f590e9;
  --accent-wash:rgba(168,98,234,.14);
  --shadow:0 20px 60px rgba(0,0,0,.45);
}
body { background:var(--bg); }
body::before { background:
  radial-gradient(ellipse 60% 55% at 93% 4%,rgba(79,76,214,.20),transparent),
  radial-gradient(ellipse 50% 55% at 5% 78%,rgba(213,70,174,.10),transparent); }
body[data-theme="light"] {
 --bg:#f5f1fa; --surface:#fff9ff; --panel:#fdf8ff; --panel-2:#ece5fc;
 --panel-dark:#ebe4f5; --ink:#22233a; --muted:#595d78; --soft:#666c87;
 --line:rgba(90,75,140,.18); --accent:#176eb9; --accent-bright:#ae318e;
 --accent-wash:rgba(136,70,200,.09);
}
.brand-cover { background:#161333 url('cover-art.webp') center 46% /cover no-repeat;
 height:72px; width:56px; flex:0 0 auto; border:2px solid rgba(107,215,252,.6);
 border-radius:8px; box-shadow:0 0 18px rgba(93,211,255,.17); }
.masthead { position:relative; overflow:hidden; min-height:106px; }
.masthead::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.35;
 background:linear-gradient(90deg,var(--surface) 38%,transparent 100%),
 url('cover-art.webp') right 41% / 420px auto no-repeat; }
.brand-text h1 { font-family:Impact,'Arial Narrow','Trebuchet MS',sans-serif;
 font-size:clamp(20px,2.3vw,34px); font-weight:900; line-height:1.09;
 letter-spacing:.035em; color:#faffff; -webkit-text-stroke:.4px #58dfff;
 text-shadow:2px 2px 0 #0c8ed4,0 0 16px rgba(46,220,255,.22); }
.brand-text h1 span { color:#ffabf2; -webkit-text-stroke:.3px #fe93f1;
 text-shadow:2px 2px 0 #a22b98,0 0 14px rgba(245,102,211,.2); }
.edition strong { color:#ffa4ed; font-family:Georgia,serif; text-transform:none;
 font-style:italic; letter-spacing:.04em; font-size:14px; }
.eyebrow,.breadcrumb,.section-heading h2 { color:var(--accent); }
.primary-button { background:linear-gradient(115deg,#7addff,#b982f6); color:#120f2b; border-color:#89dfff; }
.primary-button:hover:not(:disabled) { background:linear-gradient(115deg,#a4ebff,#e7abf5); }
.tab.active { color:var(--accent-bright); border-color:var(--accent-bright); }
.nav-bar { position:relative; z-index:15; }
.reader-ornament { color:var(--accent-bright); letter-spacing:1em; opacity:.75; }
/* The reader uses the full main column. The library remains a pull-out drawer. */
body.reader-mode .layout { display:block; }
body.reader-mode .sidebar { display:none; }
body.reader-mode .sidebar.open { display:block; position:fixed; z-index:40;
 width:min(350px,91vw); top:0; left:0; bottom:0; overflow:auto;
 min-height:0; padding:26px 18px 50px; background:var(--surface);
 border-right:1px solid var(--accent); box-shadow:14px 0 70px #000c; }
body.reader-mode .sidebar-toggle { display:inline-flex; }
body.reader-mode .content { padding:14px clamp(14px,2.1vw,30px) 20px; }
.reader-info { margin-bottom:8px; }
.reader-heading { font-size:clamp(20px,2vw,28px); margin-bottom:3px; }
.progress-track { margin-bottom:8px; height:2px; }
/* Stage comprises the artwork, a slim status strip, and optional tools below.
   Fullscreen targets this entire element, NOT merely the illustration frame. */
.reader-stage { height:calc(100dvh - 245px); min-height:260px; max-height:none;
 display:flex; flex-direction:column; position:relative; background:#08091a;
 border:1px solid rgba(128,148,219,.26); border-radius:9px; overflow:hidden;
 box-shadow:var(--shadow); }
.reader-frame { border:0; border-radius:0; box-shadow:none; background:#060613;
 position:relative; flex:1 1 0; min-height:0; padding:4px;
 display:flex; justify-content:center; align-items:stretch; overflow:hidden; }
.spread { height:100%; width:100%; max-width:100%; min-height:0;
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.comic-page { border:0; overflow:hidden; min-height:0; min-width:0;
 background:transparent; align-items:center; justify-content:center; }
.page-canvas { flex:1 1 auto; display:flex; align-items:center; justify-content:center;
 min-height:0; height:100%; width:100%; overflow:hidden; background:transparent;
 -webkit-tap-highlight-color:transparent; touch-action:pan-y; }
.page-canvas:hover::after { display:none; }
.page-image { display:block; object-fit:contain; object-position:center;
 width:100%; height:100%; min-height:0; max-height:100%; user-select:none;
 -webkit-user-drag:none; }
.spread-gutter { top:4px; bottom:4px; background:rgba(113,110,196,.32);
 box-shadow:none; width:1px; }
.blank-page { height:100%; min-height:0; background:#0e1028; border:0;
 color:#b9b0dc; padding:10px; }
.blank-ornament { color:#c986df; }
/* All report, zoom and bookmark buttons are outside the art frame. */
.reader-status { background:linear-gradient(90deg,#13132d,#17102d,#11152f);
 color:#d7dfff; border:0; border-top:1px solid rgba(130,156,226,.22);
 display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
 min-height:35px; padding:5px 15px; width:100%; font-size:11px;
 font-weight:700; letter-spacing:.08em; text-align:left; }
.reader-status:hover { background:#1c1a40; }
#pagePosition { color:#b8eaf8; }
#toolsToggleLabel { color:#fac4f1; white-space:nowrap; }
.reader-controls { flex:0 0 auto; max-height:min(45dvh,230px); overflow-y:auto;
 background:linear-gradient(135deg,#11122c,#17142e); border-top:1px solid var(--line);
 padding:8px clamp(7px,1.3vw,15px) 10px; }
.reader-bottom { display:flex; padding:0; gap:7px; }
.reader-bottom .secondary-button,.reader-bottom .primary-button { flex:0 0 auto; }
.reader-control-actions { display:flex; justify-content:center; align-items:center; flex:1; gap:7px; }
.reader-control-actions .tool-button { min-height:36px; }
.page-tools { margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.page-tool-row { display:flex; flex-wrap:wrap; align-items:center; gap:5px;
 min-width:0; border:1px solid var(--line); padding:5px 8px; border-radius:5px; }
.page-tool-label { font-size:10px; color:#bddffa; font-weight:700; flex:1 1 100%;
 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.page-tool-button { flex:1 0 auto; background:#272043; color:#f4eafd;
 padding:5px 8px; border:1px solid #5d507a; border-radius:4px;
 font-size:11px; min-height:30px; }
.page-tool-button:hover { border-color:#8de6ff; background:#342754; }
.reader-instructions { font-size:10px; color:#aaa7c9; padding:7px 0 0; }
.reading-guide { display:block; font-size:11px; padding:9px 3px 0; border:0; }
.reader-stage:fullscreen,.reader-stage:-webkit-full-screen { height:100dvh !important;
 width:100vw !important; max-height:none !important; min-height:0;
 background:#02040c; border:0; border-radius:0; box-shadow:none; padding:0; }
.reader-stage:fullscreen .reader-frame { padding:1px; }
.reader-stage:fullscreen .reader-status { min-height:30px; }
.reader-stage:fullscreen .reader-controls { max-height:38dvh; }
/* Mobile reading eliminates the original site's header and body padding so
   the artwork fits the viewport height, including while rotating a phone. */
@media (max-width:960px) {
 body.reader-mode .masthead { display:none; }
 body.reader-mode .nav-bar { position:sticky; top:0; min-height:48px; height:48px;
   padding:0 9px; justify-content:space-between; background:#101126; }
 body.reader-mode .sidebar-toggle { font-size:11px; padding:7px 10px; }
 body.reader-mode .content { padding:0; }
 body.reader-mode .reader-info,body.reader-mode .progress-track,
 body.reader-mode .reading-guide,body.reader-mode .footer { display:none; }
 body.reader-mode .reader-stage { height:calc(100dvh - 48px); min-height:0;
   border:0; border-radius:0; box-shadow:none; }
 body.reader-mode .reader-status { min-height:35px; }
 .reader-controls { padding:6px; }
 .reader-control-actions .tool-button { font-size:11px; }
}
/* Phones upright: one complete illustration, no captions or floating icons. */
@media (orientation:portrait) and (max-width:900px) {
 .spread { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
 .spread .right-page { display:none !important; }
 .spread-gutter { display:none !important; }
 .page-canvas { width:100%; height:100%; }
 .page-image { height:100%; max-height:100%; width:100%; object-fit:contain; }
 .page-tools { grid-template-columns:1fr; }
 .reader-stage .reader-control-actions .tool-button span { display:none; }
 .reader-bottom .secondary-button,.reader-bottom .primary-button { padding:7px 8px; font-size:11px; }
}
/* Phones on their side: two pages, side by side, with no vertical stacking. */
@media (orientation:landscape) and (max-height:680px) {
 body.reader-mode .nav-bar { min-height:37px; height:37px; }
 body.reader-mode .tab { padding:9px 7px; }
 body.reader-mode .reader-stage { height:calc(100dvh - 37px); }
 .reader-status { min-height:27px !important; padding:3px 12px; font-size:10px; }
 .reader-frame { padding:1px; }
 .spread { gap:2px; }
 .reader-controls { max-height:45dvh; }
 .reader-instructions { display:none; }
}
@media (max-width:670px) {
 body.reader-mode .reader-frame { padding:1px; }
 body.reader-mode .spread { gap:2px; }
 .reader-bottom { gap:4px; }
 .reader-control-actions { gap:4px; }
 .reader-control-actions .tool-button { padding:5px 7px; }
 .reader-status { font-size:10px; padding-left:10px; padding-right:10px; }
 .brand-text h1 span { display:block; }
}

/* Final viewport discipline: give the book the height, not the page header. */
.masthead { min-height:80px; padding:8px 23px; }
.brand-cover { height:60px; width:47px; }
.nav-bar { min-height:51px; padding:0 23px; gap:14px; }
.nav-bar .tab { padding:14px 9px 13px; }
.resume-nav { min-height:32px; padding:6px 10px; white-space:nowrap; }
body.reader-mode .reader-info,body.reader-mode .progress-track { display:none; }
body.reader-mode .reader-stage { height:calc(100dvh - 157px); }
.left-page .page-image { object-position:right center; }
.right-page .page-image { object-position:left center; }
@media (max-width:960px) {
 body.reader-mode .reader-stage { height:calc(100dvh - 48px); }
 body.reader-mode .nav-bar { gap:5px; }
 body.reader-mode .resume-nav { padding:4px 8px; min-height:31px; font-size:11px; }
 body.reader-mode .nav-meta { display:none; }
}
@media (orientation:portrait) and (max-width:900px) {
 .left-page .page-image { object-position:center center; }
}
@media (orientation:landscape) and (max-height:680px) {
 body.reader-mode .reader-stage { height:calc(100dvh - 37px); }
}
@media (max-width:380px) {
 body.reader-mode .sidebar-toggle { font-size:10px; }
 body.reader-mode .tab { font-size:9px; padding-left:4px; padding-right:4px; }
}
.drawer-backdrop { position:fixed; inset:0; z-index:39; background:rgba(2,3,15,.66); }
.sidebar-close { display:none; background:var(--panel-2); border:1px solid var(--line);
 color:var(--ink); padding:10px 12px; border-radius:5px; width:100%;
 margin:0 0 18px; text-align:left; }
body.reader-mode .sidebar.open .sidebar-close { display:block; }
@media (max-width:960px) { .sidebar.open .sidebar-close { display:block; } }
.sidebar-short { display:none; }
@media (max-width:670px) {
 body.reader-mode .sidebar-long { display:none; }
 body.reader-mode .sidebar-short { display:inline; }
}
body[data-theme="light"] .brand-text h1 { color:#1869ad; -webkit-text-stroke:0;
 text-shadow:1px 1px 0 #b6eafa; }
body[data-theme="light"] .brand-text h1 span { color:#c13aa5; -webkit-text-stroke:0;
 text-shadow:1px 1px 0 #ffdaf8; }
/* Leave enough room to keep the page-position strip visible at the viewport edge. */
@media (min-width:961px) {
 body.reader-mode .reader-stage { height:calc(100dvh - 177px); }
}