:root {
  color-scheme: dark;
  --bg: #15130f;
  --panel: #201e19;
  --panel-2: #29261f;
  --paper: #f4f0e7;
  --ink: #191713;
  --muted: #aaa397;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #d4aa61;
  --accent-strong: #f0c879;
  --danger: #8a342c;
  --header-height: 54px;
  --toolbar-height: 58px;
}

* { box-sizing: border-box; }
.preview-ribbon{position:fixed;z-index:1000;top:0;left:50%;transform:translateX(-50%);padding:.35rem 1rem;border-radius:0 0 .45rem .45rem;background:#f2a900;color:#211800;font:800 .78rem/1.2 system-ui,sans-serif;box-shadow:0 .25rem 1rem rgba(0,0,0,.3)}

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(212, 170, 97, 0.08), transparent 30%),
    linear-gradient(135deg, #171510 0%, #0d0c0a 100%);
  color: #f5f0e7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media print{body{overflow:visible;background:white}.topbar,.toolbar,.drawer,.dialog-panel,.zoom-dialog,.backdrop,.page-arrow,.preview-ribbon{display:none!important}.app-shell,.reader,.flip-view,.book-stage{position:static!important;width:100%!important;height:auto!important;background:white!important}.book{transform:none!important;margin:auto!important}}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--accent-strong);
  color: #111;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus { top: 0; }

.app-shell {
  height: 100%;
  display: grid;
  grid-template-rows: var(--header-height) minmax(0, 1fr) var(--toolbar-height);
}

.topbar,
.toolbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 22px;
  background: rgba(17, 16, 13, 0.92);
  backdrop-filter: blur(18px);
  border-color: var(--line);
}

.topbar { border-bottom: 1px solid var(--line); }
.toolbar { border-top: 1px solid var(--line); }

.toolbar {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.brand-kicker,
.eyebrow {
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.brand-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  letter-spacing: 0.055em;
}

.issue-badge {
  padding: 3px 7px;
  border: 1px solid rgba(212, 170, 97, 0.5);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.top-actions,
.toolbar-group,
.zoom-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-button,
.toolbar-button,
.close-button,
.zoom-actions button {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #e8e2d8;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.icon-button:hover,
.toolbar-button:hover,
.close-button:hover,
.zoom-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line);
  color: var(--accent-strong);
}

#footer-prev,
#footer-next {
  min-width: 112px;
  border-color: rgba(240, 200, 121, 0.72);
  background: var(--accent);
  color: #17130c;
  font-size: 1.55rem;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.nav-label { font-size: 0.76rem; letter-spacing: 0.01em; }

#footer-prev:hover,
#footer-next:hover {
  background: var(--accent-strong);
  color: #090806;
}

.icon-button:focus-visible,
.toolbar-button:focus-visible,
.close-button:focus-visible,
.page-arrow:focus-visible,
.page-link:focus-visible,
input:focus-visible,
.search-result:focus-visible,
.thumbnail-button:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}

.button-label { font-size: 0.78rem; font-weight: 650; }

.reader {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.reader::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -45px;
  background-image: linear-gradient(rgba(10,9,7,.58),rgba(10,9,7,.72)), var(--reader-background);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(.72);
  transform: scale(1.08);
  opacity: .72;
  transition: background-image .3s ease;
}

.reader::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at center,transparent 18%,rgba(8,7,6,.52) 100%); pointer-events:none; }

.flip-view,
.book-stage {
  width: 100%;
  height: 100%;
}

.book-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 72px;
  overflow: hidden;
}

.book {
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.46));
}

.page {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.private-note-marker { position:absolute; z-index:18; top:7%; right:6%; width:34px; height:34px; display:grid; place-items:center; padding:0; border:2px solid rgba(0,0,0,.18); border-radius:8px 8px 8px 2px; background:var(--note-color,#f2cf4a); color:#201b0b; box-shadow:0 5px 16px rgba(0,0,0,.28); cursor:pointer; line-height:1; }
.private-note-marker::after { content:""; position:absolute; right:-2px; bottom:-8px; border:5px solid transparent; border-top-color:var(--note-color,#f2cf4a); border-right-color:var(--note-color,#f2cf4a); }
.note-dot{display:none;width:7px;height:7px;border-radius:50%;background:#f2cf4a;position:absolute;right:3px;top:3px}.icon-button{position:relative}.icon-button.has-note .note-dot{display:block}.icon-button.is-active{border-color:rgba(240,200,121,.6);background:rgba(212,170,97,.14);color:var(--accent-strong)}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 20px rgba(42, 32, 17, 0.08);
}

.page-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  background: #e6e0d5;
  user-select: none;
  -webkit-user-drag: none;
}

.link-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.page-link {
  position: absolute;
  display: block;
  pointer-events: auto;
  border: 1px solid transparent;
  border-radius: 2px;
  background: rgba(212, 170, 97, 0.015);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.page-link:hover,
.page-link:focus-visible {
  background: rgba(231, 178, 75, 0.16);
  border-color: rgba(171, 111, 15, 0.72);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.page-link[data-type="external"]::after {
  content: "↗";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 16, 12, 0.76);
  color: #fff;
  font-size: 10px;
  opacity: 0.9;
  transition: opacity 140ms ease;
}

.page-link[data-type="external"]:hover::after,
.page-link[data-type="external"]:focus-visible::after { opacity: 1; }

.page-link.page-link--badge {
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 0;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: var(--link-badge-color,#d84f72);
  color: #fff;
  box-shadow: 0 4px 16px rgba(24,18,18,.32);
  z-index: 3;
}
.page-link.page-link--badge svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.page-link.page-link--badge span{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);padding:1px 5px;border-radius:8px;background:rgba(20,18,17,.82);color:#fff;font:700 8px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.page-link.page-link--badge::after{display:none}
.page-link.page-link--badge:hover,.page-link.page-link--badge:focus-visible{background:color-mix(in srgb,var(--link-badge-color,#d84f72) 82%,#000);border-color:#fff;box-shadow:0 5px 20px rgba(24,18,18,.42),0 0 0 3px color-mix(in srgb,var(--link-badge-color,#d84f72) 30%,transparent)}

.page-link:not([data-type="external"])::after {
  content: "🔗";
  position: absolute;
  right: 2px;
  top: 2px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 16, 12, 0.82);
  color: #fff;
  font-size: 10px;
}

.page-arrow {
  position: absolute;
  z-index: 12;
  top: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 2px solid rgba(240, 200, 121, 0.82);
  border-radius: 50%;
  background: rgba(18, 16, 12, 0.9);
  color: var(--accent-strong);
  font: 400 2.2rem/1 Georgia, serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

.page-arrow:hover { color: var(--accent-strong); background: rgba(43, 39, 31, 0.9); }
.page-arrow.is-dragging{cursor:grabbing;background:rgba(83,65,34,.96);box-shadow:0 0 0 2px rgba(240,200,121,.75),0 10px 34px rgba(0,0,0,.55)}
.page-arrow:disabled,.toolbar-button:disabled { opacity: 0; pointer-events: none; }
.page-arrow-left { left: var(--previous-arrow-left,14px); }
.page-arrow-right { left: var(--next-arrow-left,calc(100% - 62px)); }

.loading-panel {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  color: var(--muted);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.loading-panel.is-hidden { opacity: 0; visibility: hidden; }

.loading-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 170, 97, 0.55);
  border-radius: 50%;
  color: var(--accent-strong);
  font-family: Georgia, serif;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse { 50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(212, 170, 97, 0.22); } }

.page-form {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.page-form input {
  width: 50px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #11100d;
  color: #fff;
  text-align: center;
  appearance: textfield;
}

.page-form input::-webkit-inner-spin-button { appearance: none; }
.zoom-value { min-width: 54px; font-size: 0.72rem; }

.page-scrubber {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.72rem;
}

.page-scrubber input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--accent-strong);
  cursor: ew-resize;
}

.scrubber-page,
.scrubber-total {
  min-width: 4ch;
  color: #e8e2d8;
  font-variant-numeric: tabular-nums;
}
.scrubber-page{font-weight:800;text-align:right}.scrubber-total{color:var(--muted)}

.link-indicator {
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(240, 200, 121, 0.58);
  border-radius: 999px;
  background: rgba(212, 170, 97, 0.12);
  color: var(--accent-strong);
  font-weight: 800;
}

.link-indicator[hidden] { display: none; }

.drawer {
  position: fixed;
  z-index: 60;
  inset: 0 auto 0 0;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: #181612;
  border-right: 1px solid var(--line);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms ease;
}

.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer-header,
.zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.drawer-header h2 { margin: 4px 0 0; font-family: Georgia, serif; font-weight: 500; }
.eyebrow { margin: 0; }
.close-button { font-size: 1.8rem; }

.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  overflow: auto;
}

.thumbnail-button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.thumbnail-button img {
  width: 100%;
  aspect-ratio: var(--page-ratio, 0.707);
  object-fit: cover;
  background: #ddd;
  border: 2px solid transparent;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.thumbnail-button:hover img,
.thumbnail-button.is-current img { border-color: var(--accent); }
.thumbnail-button.is-current { color: var(--accent-strong); }

.toc-list {
  display: flex;
  flex-direction: column;
  padding: 10px 18px 24px;
  overflow: auto;
}

.toc-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 8px 14px calc(8px + var(--toc-depth) * 18px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #ece6dc;
  text-align: left;
  cursor: pointer;
}

.toc-item:hover { color: var(--accent-strong); background: rgba(255,255,255,.04); }
.toc-item strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.toc-empty { padding: 20px 8px; color: var(--muted); line-height: 1.6; }

.backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(3px);
}

.dialog-panel,
.zoom-dialog {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.dialog-panel.is-open,
.zoom-dialog.is-open { visibility: visible; opacity: 1; pointer-events: auto; }

.dialog-card {
  width: min(720px, 100%);
  max-height: min(720px, calc(100vh - 44px));
  display: flex;
  flex-direction: column;
  background: #1d1b16;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.search-form { display: flex; gap: 10px; padding: 18px 20px 8px; }

.search-form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #100f0c;
  color: #fff;
}

.search-form button {
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #17120b;
  font-weight: 800;
  cursor: pointer;
}

.search-summary { margin: 6px 20px 12px; color: var(--muted); font-size: 0.78rem; }
.search-results { padding: 0 20px 20px; overflow: auto; }

.search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #eee8dd;
  text-align: left;
  cursor: pointer;
}

.result-page { color: var(--accent); font-weight: 800; }
.result-snippet { color: #c5beb2; line-height: 1.45; }
.result-snippet mark { background: #6e5426; color: #fff; }

.compact-dialog{width:min(560px,100%)}.share-panel,.note-form{display:grid;gap:16px;padding:22px}.share-panel label,.note-form>label{display:grid;gap:7px;font-size:.8rem;font-weight:750}.share-panel input,.note-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#100f0c;color:#fff;resize:vertical}.share-actions,.note-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.share-actions button,.share-actions a,.primary-dialog-button,.danger-button{min-height:42px;display:inline-grid;place-items:center;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#2a2720;color:#fff;text-decoration:none;font-weight:800;cursor:pointer}.share-actions button:first-child,.primary-dialog-button{background:var(--accent);color:#17120b;border-color:transparent}.share-panel p{margin:0;color:var(--muted);font-size:.78rem}.note-form fieldset{display:flex;gap:10px;padding:0;border:0}.note-form legend{margin-bottom:8px;color:var(--muted);font-size:.76rem}.note-form fieldset label{cursor:pointer}.note-form fieldset input{position:absolute;opacity:0}.note-form fieldset span{display:block;width:28px;height:28px;border-radius:50%;background:var(--note-color);border:3px solid transparent}.note-form fieldset input:checked+span{border-color:#fff;box-shadow:0 0 0 2px var(--note-color)}.note-actions{justify-content:space-between}.danger-button{color:#ffb4a8}.danger-button:disabled{opacity:.35;cursor:not-allowed}.noted-pages{padding:0 22px 22px;border-top:1px solid var(--line)}.noted-pages>strong{display:block;margin:16px 0 10px;font-size:.78rem}.noted-pages-list,#noted-pages-list{display:flex;gap:8px;flex-wrap:wrap}#noted-pages-list button{padding:6px 10px;border:0;border-left:5px solid var(--note-color);border-radius:5px;background:#302d26;color:#fff;cursor:pointer}

.zoom-dialog {
  z-index: 80;
  padding: 0;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(11, 10, 8, 0.98);
}

.zoom-header { width: 100%; min-height:64px; padding:10px 16px; background: #171510; }
.zoom-help { color: var(--muted); font-size: .76rem; }
.zoom-scroll { width: 100%; height: 100%; overflow: auto; padding: 28px; text-align: center; cursor:grab; touch-action:none; overscroll-behavior:contain; user-select:none; }
.zoom-scroll.is-panning { cursor:grabbing; }
.zoom-page-wrap { position: relative; display: inline-block; width: min(90vw, 1100px); line-height: 0; box-shadow:0 18px 65px rgba(0,0,0,.52); transform-origin:top left; }
.zoom-page-wrap img { display: block; width: 100%; height: auto; background: #eee; pointer-events:none; }
.zoom-page-navigation,.zoom-presets{display:flex;align-items:center;gap:7px}.zoom-page-navigation button,.zoom-presets button{min-height:36px;padding:0 11px;border:1px solid var(--line);border-radius:7px;background:#28251f;color:#fff;cursor:pointer}.zoom-page-navigation button:disabled{opacity:.3;cursor:not-allowed}.zoom-page-navigation strong{min-width:9.5rem;text-align:center;font-size:.82rem}.zoom-presets button.is-active{border-color:var(--accent);background:rgba(212,170,97,.16);color:var(--accent-strong)}#detail-zoom-value{min-width:52px;text-align:center;font-size:.76rem;font-variant-numeric:tabular-nums}

.scroll-view {
  height: 100%;
  overflow: auto;
  padding: 24px max(18px, calc((100vw - 980px) / 2));
  scroll-behavior: smooth;
}

.scroll-page {
  width: min(100%, 980px);
  margin: 0 auto 22px;
  line-height: 0;
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
}

.scroll-page-canvas { position: relative; line-height: 0; }
.scroll-page img { width: 100%; height: auto; display: block; }
.scroll-page-number { padding: 10px; color: var(--muted); line-height: 1; text-align: center; font-size: 0.75rem; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 82px;
  max-width: min(90vw, 460px);
  padding: 10px 14px;
  border: 1px solid rgba(212, 170, 97, 0.42);
  border-radius: 8px;
  background: #292319;
  color: #fff;
  font-size: 0.8rem;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.noscript-message {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: #171510;
  text-align: center;
}

.noscript-message a { color: var(--accent-strong); }

@media (max-width: 1050px) {
  .topbar, .toolbar { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .brand-kicker, .button-label, .nav-label { display: none; }
  #footer-prev, #footer-next { min-width: 44px; }
}

@media (max-width: 760px) {
  :root { --header-height: 54px; --toolbar-height: 112px; }
  .app-shell,.topbar,.toolbar { min-width:0;max-width:100%; }
  .topbar .brand { min-width:0;flex:0 1 38%;overflow:hidden; }
  .topbar .issue-badge { min-width:0;overflow:hidden;text-overflow:ellipsis; }
  .topbar .top-actions { min-width:0;flex:1;overflow-x:auto;scrollbar-width:none; }
  .topbar .top-actions .icon-button { flex-shrink:0; }
  .topbar, .toolbar { padding: 0 10px; gap: 8px; }
  .brand-kicker, .button-label { display: none; }
  .toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px 46px; align-content: center; }
  .page-navigation { justify-self: start; }
  .reader-tools { justify-self: end; }
  .page-scrubber { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 7px; }
  .brand-title { font-size: 0.93rem; }
  .issue-badge { font-size: 0.57rem; }
  .top-actions { gap: 0; }
  .icon-button { min-width: 34px; min-height: 34px; }
  .book-stage { padding: 10px 32px; }
  .page-arrow { width: 46px; height: 46px; border: 2px solid rgba(240, 200, 121, 0.9); background: rgba(18, 16, 12, 0.94); }
  .page-arrow-left { left: 0; }
  .page-arrow-right { left: auto; right: 0; }
  .toolbar-button { min-width: 32px; min-height: 38px; padding: 0 5px; }
  #footer-prev, #footer-next { min-width: 42px; }
  .nav-label { display: none; }
  #first-page, #last-page { display: none; }
  .page-form input { width: 42px; }
  .thumbnail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .zoom-scroll { padding: 12px; }
  .zoom-help { display: none; }
  .zoom-header{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px}.zoom-page-navigation{grid-column:1}.zoom-page-navigation strong{min-width:7.5rem}.zoom-presets{grid-column:1/-1;grid-row:2;justify-content:center}.zoom-actions{grid-column:2;grid-row:1}.zoom-presets button{min-height:34px}
  .private-note-marker{width:30px;height:30px}
}

@media (max-width: 430px) {
  .brand { gap: 6px; }
  .brand-title { font-size: 0.82rem; }
  .issue-badge { padding: 2px 5px; }
  #mode-toggle { display: none; }
  #sound-toggle,#autoplay-toggle{display:none}
  .zoom-value { min-width: 46px; }
}

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

/* Reader chrome 2026 — the publication stays visually dominant. */
:root {
  --bg: #eff0ec;
  --panel: #fafbf8;
  --panel-2: #e7e9e4;
  --chrome: rgba(250,251,248,.94);
  --chrome-ink: #202421;
  --muted: #69706a;
  --line: rgba(25,30,26,.14);
  --stage-overlay: rgba(238,240,235,.38);
  --accent: #a87724;
  --accent-strong: #805817;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111312;
  --panel: #1a1d1b;
  --panel-2: #252925;
  --chrome: rgba(17,19,18,.94);
  --chrome-ink: #f0f2ed;
  --muted: #a4aba5;
  --line: rgba(255,255,255,.13);
  --stage-overlay: rgba(5,7,6,.66);
  --accent: #d4aa61;
  --accent-strong: #f0c879;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--chrome-ink); }
.topbar,.toolbar { background: var(--chrome); color: var(--chrome-ink); }
.brand { color: var(--chrome-ink); text-decoration: none; }
.brand-title { font-family: inherit; font-size: 1.05rem; font-weight: 720; letter-spacing: -.02em; }
.brand-kicker,.eyebrow { font-size: .61rem; letter-spacing: .16em; }
.issue-badge { border-color: color-mix(in srgb,var(--accent) 50%,transparent); }
.icon-button,.toolbar-button,.close-button,.zoom-actions button { color: var(--chrome-ink); border-radius: .5rem; }
.icon-button:hover,.toolbar-button:hover,.close-button:hover,.zoom-actions button:hover { background: var(--panel-2); color: var(--accent-strong); }
.theme-icon { width: 1rem; height: 1rem; display: inline-grid; place-items:center; }
.theme-icon svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.button-label { font-size: .72rem; }

.reader::before {
  background-image: linear-gradient(var(--stage-overlay),var(--stage-overlay)),var(--reader-background);
  filter: blur(34px) saturate(.58);
  opacity: .58;
}
.reader::after { background: radial-gradient(circle at center,transparent 24%,rgba(60,65,60,.15) 100%); }
:root[data-theme="dark"] .reader::after { background: radial-gradient(circle at center,transparent 18%,rgba(2,3,2,.56) 100%); }
.book { filter: drop-shadow(0 20px 28px rgba(16,20,17,.28)); touch-action:none; }
.book.is-page-swiping { cursor:grabbing; }
.book.is-page-turning { pointer-events:none; }
:root[data-theme="dark"] .book { filter: drop-shadow(0 24px 34px rgba(0,0,0,.48)); }

.page-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--chrome);
  color: var(--chrome-ink);
  font: 400 1.8rem/1 inherit;
  box-shadow: 0 5px 18px rgba(20,24,21,.15);
}
.page-arrow:hover { background: var(--panel-2); color: var(--accent-strong); }
.page-arrow.is-dragging { background: var(--panel-2); box-shadow: 0 0 0 2px var(--accent),0 10px 28px rgba(0,0,0,.25); }

#footer-prev,#footer-next {
  min-width: 42px;
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--chrome-ink);
  font-size: 1.2rem;
  box-shadow: none;
}
#footer-prev:hover,#footer-next:hover { background: color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent-strong); }
.nav-label { display: none; }
.page-form input { background: var(--panel); color: var(--chrome-ink); border-color: var(--line); }
.page-scrubber input { accent-color: var(--accent); }
.link-indicator { background: var(--panel-2); color: var(--accent-strong); }

.loading-panel { background: var(--bg); }
.drawer { background: var(--panel); color: var(--chrome-ink); box-shadow: 18px 0 50px rgba(0,0,0,.18); }
.drawer-header { background: var(--panel); }
.drawer-header h2 { font-family: inherit; font-weight: 730; letter-spacing: -.035em; }
.toc-item { color: var(--chrome-ink); }
.toc-item:hover { color: var(--accent-strong); background: var(--panel-2); }
.thumbnail-button img { box-shadow: 0 7px 18px rgba(20,24,21,.18); }
.dialog-card { background: var(--panel); color: var(--chrome-ink); border-radius: .75rem; box-shadow: 0 26px 80px rgba(0,0,0,.3); }
.search-form input,.share-panel input,.note-form textarea { background: var(--bg); color: var(--chrome-ink); }
.search-form button,.share-actions button:first-child,.primary-dialog-button { color:#17120b; }
.search-result { color: var(--chrome-ink); }
.result-snippet { color: var(--muted); }
.result-snippet mark { background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--chrome-ink); }
.share-actions button,.share-actions a,.primary-dialog-button,.danger-button { background: var(--panel-2); color: var(--chrome-ink); }
.share-actions button:first-child,.primary-dialog-button { background:var(--accent);color:#17120b; }
#noted-pages-list button { background:var(--panel-2);color:var(--chrome-ink); }
.zoom-dialog { background: color-mix(in srgb,var(--bg) 97%,transparent); }
.zoom-header { background:var(--panel);color:var(--chrome-ink); }
.zoom-page-navigation button,.zoom-presets button { background:var(--panel-2);color:var(--chrome-ink); }
.scroll-page { box-shadow:0 16px 42px rgba(20,24,21,.22); }
.toast { background:var(--panel);color:var(--chrome-ink);border-color:color-mix(in srgb,var(--accent) 42%,transparent); }
.backdrop { background:rgba(10,12,10,.6); }

@media (max-width: 760px) {
  .page-arrow { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--chrome); }
}

/* Dobra Mama — branded reader chrome */
body.reader-dobra-mama {
  --bg:#f8f1ed;
  --panel:#fffaf7;
  --panel-2:#f2e1de;
  --chrome:rgba(255,250,247,.95);
  --chrome-ink:#17202d;
  --muted:#766d6a;
  --line:rgba(99,74,70,.17);
  --stage-overlay:rgba(249,241,237,.48);
  --accent:#cf6675;
  --accent-strong:#a94457;
}
:root[data-theme="dark"] body.reader-dobra-mama {
  --bg:#141515;
  --panel:#1c1e1d;
  --panel-2:#34282a;
  --chrome:rgba(28,30,29,.95);
  --chrome-ink:#f5eee8;
  --muted:#b8afaa;
  --line:rgba(255,238,232,.15);
  --stage-overlay:rgba(18,15,15,.66);
  --accent:#db7887;
  --accent-strong:#f09aaa;
}
.reader-dobra-mama .topbar,.reader-dobra-mama .toolbar { box-shadow:0 1px 0 color-mix(in srgb,var(--line) 78%,transparent); }
.reader-dobra-mama .brand { gap:.55rem; }
.reader-dobra-mama .brand-kicker { color:var(--chrome-ink);font:700 .82rem/1 Georgia,"Times New Roman",serif;letter-spacing:.055em; }
.reader-dobra-mama .brand-title { margin-left:-.25rem;color:var(--chrome-ink);font:italic .78rem/1 "Segoe Script","Bradley Hand",cursive;letter-spacing:0; }
.reader-dobra-mama .issue-badge { border-color:color-mix(in srgb,var(--accent) 46%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-strong); }
.reader-dobra-mama .reader::before { filter:blur(34px) saturate(.68);opacity:.64; }
.reader-dobra-mama .reader::after { background:radial-gradient(circle at center,transparent 26%,rgba(110,77,72,.12) 100%); }
:root[data-theme="dark"] .reader-dobra-mama .reader::after { background:radial-gradient(circle at center,transparent 18%,rgba(3,2,2,.56) 100%); }
.reader-dobra-mama .page-arrow { border-color:color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:0 6px 20px rgba(79,55,52,.14); }
.reader-dobra-mama .page-arrow:hover { background:color-mix(in srgb,var(--accent) 13%,var(--panel));color:var(--accent-strong); }
.reader-dobra-mama #footer-prev:hover,.reader-dobra-mama #footer-next:hover { background:color-mix(in srgb,var(--accent) 14%,var(--panel)); }
.reader-dobra-mama .drawer-header h2,.reader-dobra-mama .dialog-card h2 { font-family:Georgia,"Times New Roman",serif;font-weight:600; }
.reader-dobra-mama .search-form button,.reader-dobra-mama .share-actions button:first-child,.reader-dobra-mama .primary-dialog-button { background:var(--accent);color:#fff; }
.reader-dobra-mama .loading-mark { background:var(--accent);color:#fff; }
.reader-dobra-mama .toast { border-color:color-mix(in srgb,var(--accent) 55%,transparent); }

@media (max-width:760px) {
  .reader-dobra-mama .brand { gap:.35rem; }
  .reader-dobra-mama .brand-kicker { font-size:.72rem; }
  .reader-dobra-mama .brand-title { font-size:.67rem; }
  .reader-dobra-mama .issue-badge { font-size:.55rem;letter-spacing:.07em; }
}

/* Projekty Domów — red architectural reader chrome */
body.reader-projekty-domow {
  --bg:#ece9e4;
  --panel:#f8f6f2;
  --panel-2:#e6e1db;
  --chrome:rgba(248,246,242,.96);
  --chrome-ink:#17191d;
  --muted:#716d68;
  --line:rgba(45,39,36,.17);
  --stage-overlay:rgba(235,231,225,.48);
  --accent:#c51f2c;
  --accent-strong:#97131d;
}
:root[data-theme="dark"] body.reader-projekty-domow {
  --bg:#111313;
  --panel:#1b1d1d;
  --panel-2:#292424;
  --chrome:rgba(27,29,29,.96);
  --chrome-ink:#f5f2ec;
  --muted:#b9b4ae;
  --line:rgba(255,244,239,.15);
  --stage-overlay:rgba(8,9,9,.67);
  --accent:#e04450;
  --accent-strong:#ff7780;
}
.reader-projekty-domow .topbar,.reader-projekty-domow .toolbar{box-shadow:0 1px 0 color-mix(in srgb,var(--line) 80%,transparent)}
.reader-projekty-domow .brand{gap:.55rem}.reader-projekty-domow .brand-kicker{color:var(--chrome-ink);font:800 .78rem/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.035em}.reader-projekty-domow .brand-title{padding-left:.55rem;border-left:2px solid var(--accent);color:var(--muted);font:650 .7rem/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.reader-projekty-domow .issue-badge{border-color:color-mix(in srgb,var(--accent) 42%,transparent);border-radius:.2rem;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent-strong)}
.reader-projekty-domow .reader::before{filter:blur(30px) saturate(.72);opacity:.65}.reader-projekty-domow .reader::after{background:linear-gradient(135deg,rgba(197,31,44,.06),transparent 40%),radial-gradient(circle at center,transparent 28%,rgba(35,29,27,.15) 100%)}
:root[data-theme="dark"] .reader-projekty-domow .reader::after{background:linear-gradient(135deg,rgba(224,68,80,.08),transparent 35%),radial-gradient(circle at center,transparent 18%,rgba(2,3,3,.58) 100%)}
.reader-projekty-domow .icon-button,.reader-projekty-domow .toolbar-button,.reader-projekty-domow .close-button{border-radius:.25rem}.reader-projekty-domow .page-arrow{border-radius:.3rem;border-color:color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:0 6px 20px rgba(45,34,31,.14)}
.reader-projekty-domow .page-arrow:hover,.reader-projekty-domow #footer-prev:hover,.reader-projekty-domow #footer-next:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent-strong)}
.reader-projekty-domow .drawer-header h2,.reader-projekty-domow .dialog-card h2{font-family:Georgia,"Times New Roman",serif;font-weight:650}.reader-projekty-domow .search-form button,.reader-projekty-domow .share-actions button:first-child,.reader-projekty-domow .primary-dialog-button,.reader-projekty-domow .loading-mark{background:var(--accent);color:#fff}.reader-projekty-domow .toast{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
@media(max-width:760px){.reader-projekty-domow .brand{gap:.32rem}.reader-projekty-domow .brand-kicker{font-size:.67rem}.reader-projekty-domow .brand-title{display:none}.reader-projekty-domow .issue-badge{font-size:.54rem;letter-spacing:.05em}}
/* Full-width single-page reading on phones; navigation stays in the bottom bar. */
@media (max-width:760px) {
 :root { --header-height:48px; --toolbar-height:calc(82px + env(safe-area-inset-bottom)); }
 .book-stage { padding:4px 2px; }
 .toolbar { grid-template-rows:44px 30px; padding-bottom:env(safe-area-inset-bottom); }
 .page-arrow { display:none; }
 #footer-prev,#footer-next { min-width:44px; min-height:44px; }
}