body[data-layout='reader'] { background: #1c1a17; color: #ece4d6; }
.reader-main { min-height: 100vh; }
.reader-main:focus { outline: none; }

.reader { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #1c1a17; color: #ece4d6; }
.reader:fullscreen { width: 100vw; }
.reader-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.45rem 0.75rem;
  background: #262320; border-bottom: 1px solid #3a352f; position: relative; z-index: 5;
}
.reader-bar__back { display: inline-flex; align-items: center; gap: 0.35rem; color: #e9dfcf; text-decoration: none; font-size: 0.86rem; padding: 0.4rem 0.5rem; border-radius: var(--radius); min-height: 36px; }
.reader-bar__back:hover { background: #37322c; color: #fff; }
.reader-bar__title { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 1 1 200px; }
.reader-bar__title h1 { font-size: 1rem; margin: 0; color: #f4ecdf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.reader-bar__nav { display: flex; align-items: center; gap: 0.15rem; }
.reader-bar__tools { display: flex; align-items: center; gap: 0.1rem; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.reader-bar__sep { width: 1px; height: 22px; background: #46403a; margin: 0 0.3rem; flex: none; }
.reader-btn { color: #e9dfcf; flex: none; }
.reader-btn:hover { background: #3a342e; color: #fff; }
.reader-btn[disabled] { opacity: 0.35; cursor: default; }
.reader-btn[aria-disabled='true'] { opacity: 0.45; }
.reader-btn[aria-pressed='true'] { background: #f0e6d6; color: #1f1c18; }
.reader-btn[aria-expanded='true'] { background: #3f3831; color: #fff; }
.reader-jump { display: flex; align-items: center; gap: 0.35rem; }
.reader-jump__input { width: 3.6rem; font: 500 0.9rem var(--font-sans); text-align: center; padding: 0.3rem; border-radius: 5px; border: 1px solid #5a5249; background: #15130f; color: #fff; min-height: 34px; font-variant-numeric: tabular-nums; }
.reader-jump__total { font: 0.82rem var(--font-sans); color: #b8ad9b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reader-zoom { min-width: 3.2rem; text-align: center; font: 0.82rem var(--font-sans); color: #d8cdbb; font-variant-numeric: tabular-nums; }
.reader .spec-ref span { background: #233f44; color: #bfe0e3; border-color: #4f7d82; white-space: nowrap; }

.reader-body { flex: 1; min-height: 0; display: flex; position: relative; }
.reader-stage { flex: 1; min-width: 0; overflow: auto; display: flex; background: radial-gradient(circle at 50% 40%, #2b2824, #191714 70%); touch-action: pan-x pan-y pinch-zoom; }
.reader-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.reader-spread { margin: auto; display: flex; gap: 14px; padding: 28px; align-items: center; }

.reader-panel {
  display: none; flex-direction: column; background: #f6f1e8; color: var(--ink);
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 58%; z-index: 4;
  border-top: 1px solid var(--rule); box-shadow: 0 -12px 30px rgb(0 0 0 / 0.35); border-radius: 12px 12px 0 0;
}
.reader.is-panel-open .reader-panel { display: flex; }
@media (min-width: 900px) {
  .reader-panel { position: static; width: 330px; max-height: none; flex: none; border-top: 0; border-right: 1px solid #3a352f; box-shadow: none; border-radius: 0; }
  .reader-panel__close { display: none; }
}
.reader-panel__head { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
.reader-panel__close { color: var(--ink-2); margin-left: auto; }
.reader-panel__close:hover { background: var(--sunk); color: var(--ink); }
.reader-tabs { display: flex; gap: 0.1rem; overflow-x: auto; flex: 1; min-width: 0; }
.reader-tab {
  display: inline-flex; align-items: center; gap: 0.3rem; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: 500 0.85rem var(--font-sans); padding: 0.55rem 0.6rem; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 36px; flex: 1; justify-content: center;
}
.reader-tab[aria-selected='true'] { color: var(--accent); border-bottom-color: var(--accent); }
.reader-panel__content { flex: 1; overflow: auto; padding: 0.85rem; }
.reader-panel__content:focus-visible { outline-offset: -3px; }

.reader-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.6rem; }
.reader-thumb { width: 100%; border: 2px solid transparent; background: none; padding: 3px; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; color: var(--ink-2); position: relative; }
.reader-thumb:hover { border-color: var(--rule); }
.reader-thumb[aria-current='page'] { border-color: var(--accent); }
.reader-thumb.is-hit::after { content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #e0b437; border: 2px solid #fff; }
.reader-thumb__page {
  width: 100%; aspect-ratio: 1 / 1.414; background-color: #fbf7ee; border: 1px solid #d9cfbe; box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
  background-image: repeating-linear-gradient(180deg, transparent 0 5px, #cfc6b6 5px 6px); background-size: 72% 70%; background-position: 50% 55%; background-repeat: no-repeat;
}
.reader-thumb__page--title { background-image: linear-gradient(#bdb3a2, #bdb3a2), linear-gradient(#cfc6b6, #cfc6b6); background-size: 60% 6px, 40% 4px; background-position: 50% 35%, 50% 48%; }
.reader-thumb__page--hand { background-image: repeating-linear-gradient(180deg, transparent 0 5px, #8a7a62 5px 6px); background-color: #f1e8d4; }
.reader-thumb__label { font: 0.74rem var(--font-sans); font-variant-numeric: tabular-nums; }

.reader-toc ul { list-style: none; margin: 0; padding: 0; }
.reader-toc ul ul { padding-left: 0.9rem; border-left: 1px solid var(--rule); margin-left: 0.4rem; }
.reader-toc__item { width: 100%; display: flex; justify-content: space-between; gap: 0.5rem; text-align: left; border: 0; background: none; padding: 0.45rem 0.4rem; border-radius: 4px; cursor: pointer; font: 0.9rem var(--font-sans); color: var(--ink); }
.reader-toc__item:hover { background: var(--sunk); }
.reader-toc__page { font: 0.78rem var(--font-sans); color: var(--muted); font-variant-numeric: tabular-nums; }

.reader-search__row { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.reader-hits__nav { margin: 0.85rem 0 0.5rem; }
.reader-hits__count { font-size: 0.86rem; color: var(--ink-2); margin-bottom: 0.4rem; }
.reader-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.reader-hit { width: 100%; text-align: left; border: 1px solid var(--rule); background: var(--surface); border-radius: 5px; padding: 0.5rem 0.6rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; color: var(--ink); }
.reader-hit:hover, .reader-hit.is-active { border-color: var(--accent); }
.reader-hit.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.reader-hit__page { font: 600 0.76rem var(--font-sans); color: var(--muted); }
.reader-hit__text { font: 0.86rem/1.45 var(--font-sans); }

.reader-text + .reader-text { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.reader-text__title { font-size: 1rem; margin-bottom: 0.3rem; }
.reader-text__meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; }
.reader-text__body { font: 0.95rem/1.6 var(--font-sans); margin-bottom: 0.6rem; user-select: text; }

.paper-slot { position: relative; flex: none; }
.paper {
  container-type: inline-size; position: absolute; left: 50%; top: 50%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #fbf6ea 55%, #efe4cd 100%);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 40px rgb(0 0 0 / 0.45);
  color: #2b241b; transition: transform 0.2s ease;
}
.paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(120 90 50 / 0.12), transparent 6%, transparent 94%, rgb(120 90 50 / 0.1)); }
.paper--verso::after { background: linear-gradient(90deg, rgb(120 90 50 / 0.1), transparent 6%, transparent 90%, rgb(80 60 30 / 0.22)); }
.paper--recto::after { background: linear-gradient(90deg, rgb(80 60 30 / 0.22), transparent 10%, transparent 94%, rgb(120 90 50 / 0.1)); }
.paper__inner { position: absolute; inset: 0; padding: 9cqi 10cqi 8cqi; display: flex; flex-direction: column; font: 3.6cqi/1.55 var(--font-sans); }
.paper__head { text-align: center; font-size: 2.5cqi; letter-spacing: 0.08em; text-transform: uppercase; color: #6b5d48; border-bottom: 0.25cqi solid #b8a888; padding-bottom: 1.4cqi; margin: 0 0 3cqi; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper__text { flex: 1; overflow: hidden; text-align: justify; hyphens: auto; }
.paper__text mark { background: rgb(244 196 48 / 0.65); }
.paper__folio { margin: 2cqi 0 0; text-align: center; font-size: 2.6cqi; color: #5d4f3c; }
.paper--fraktur .paper__inner { font-family: var(--font-fraktur); font-size: 3.8cqi; line-height: 1.5; }
.paper--fraktur .paper__head { font-family: var(--font-fraktur); text-transform: none; letter-spacing: 0.02em; font-size: 3cqi; }
.paper__title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2cqi; }
.paper__title p { margin: 0; }
.paper__author { font-size: 3.4cqi; letter-spacing: 0.12em; text-transform: uppercase; }
.paper__title-main { font: 600 8cqi/1.1 var(--font-sans); }
.paper--fraktur .paper__title-main { font-family: var(--font-fraktur); font-weight: 400; }
.paper__subtitle { font-size: 3.6cqi; max-width: 80%; }
.paper__ornament { font-size: 6cqi; color: #8a6d3e; }
.paper__imprint { font-size: 3.2cqi; letter-spacing: 0.06em; }
.paper__publisher { font-size: 2.6cqi; color: #6b5d48; }
.paper--manuscript { background: radial-gradient(ellipse at 50% 45%, #f4ead2 50%, #e2d2ad 100%); }
.paper__hand { position: absolute; inset: 6cqi 7cqi 10cqi; width: calc(100% - 14cqi); height: calc(100% - 16cqi); color: #3d2f1e; opacity: 0.85; }
.paper__note {
  position: absolute; left: 8cqi; right: 8cqi; bottom: 10cqi; margin: 0; padding: 1.6cqi 2.4cqi; font: 600 2.6cqi/1.35 var(--font-sans);
  background: rgb(255 253 248 / 0.92); color: #5f3e00; border: 0.3cqi solid #e3cd96; border-radius: 1cqi; text-align: center;
}
.paper__note--hit { bottom: auto; top: 4cqi; color: #173c5e; border-color: #b9cde2; }
.paper--manuscript .paper__folio { position: absolute; left: 0; right: 0; bottom: 4cqi; }

.reader-unavailable { padding-top: 1.75rem; }
.reader-download { display: grid; gap: 0.5rem; }
.reader-download__range { margin: 0.25rem 0 0 1.6rem; }

.paper-frame { width: 100%; }
.paper-frame .paper { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: 1 / 1.414; }
.page-text__layout { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .page-text__layout { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); } }
.page-text__figure { margin: 0; display: grid; gap: 0.5rem; max-width: 420px; }
.page-text__content { display: grid; gap: 1.25rem; min-width: 0; }
.page-text__content h2 { margin-bottom: 0.4rem; }
.page-text__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.page-text__body { font: 1.05rem/1.7 var(--font-sans); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.15rem; max-width: 70ch; }
.page-text__pager { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.page-seo__url { word-break: break-all; }
.page-seo__reason { margin: 0.75rem 0 0.5rem; }
.page-seo__checks { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.page-seo__checks li { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.page-seo__checks .is-ok .icon { color: var(--good); }
.page-seo__checks .is-no .icon { color: var(--danger); }

.media-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .media-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.media-main, .media-side { display: grid; gap: 1.25rem; min-width: 0; }
.media-player { background: #1d1a17; color: #eee5d6; border-radius: 10px; overflow: hidden; }
.media-player__screen { position: relative; aspect-ratio: 16 / 9; background: #141210; display: grid; place-items: center; }
.media-player--audio .media-player__screen { aspect-ratio: auto; height: 170px; }
.media-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-player__big {
  position: relative; width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.9); color: #1d1a17; box-shadow: 0 6px 20px rgb(0 0 0 / 0.4);
}
.media-player.is-playing .media-player__big { opacity: 0; }
.media-player.is-playing .media-player__screen:hover .media-player__big, .media-player.is-playing .media-player__big:focus-visible { opacity: 0.85; }
.media-player__caption { position: absolute; left: 8%; right: 8%; bottom: 0.9rem; margin: 0; text-align: center; background: rgb(0 0 0 / 0.75); color: #fff; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.95rem; }
.media-wave { position: absolute; inset: 1.2rem 1rem; display: flex; align-items: center; gap: 2px; }
.media-wave__bar { flex: 1; background: #5c544a; border-radius: 2px; min-width: 2px; }
.media-wave__bar.is-played { background: #d9a441; }
.media-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; padding: 0.6rem 0.75rem; background: #262320; }
.media-btn { color: #eee5d6; }
.media-btn:hover { background: #3a342e; color: #fff; }
.media-btn[aria-pressed='true'] { background: #f0e6d6; color: #1d1a17; }
.media-time { font: 0.82rem var(--font-sans); color: #d3c8b6; min-width: 3.4rem; font-variant-numeric: tabular-nums; }
.media-seek { flex: 1 1 160px; min-width: 120px; accent-color: #d9a441; }
.media-volume { width: 90px; accent-color: #d9a441; }
.media-rate { width: auto; min-height: 32px; background: #15130f; color: #fff; border-color: #5a5249; }
.media-controls .btn--ghost { background: #34302b; color: #eee5d6; border-color: #4f4840; }
.media-controls .btn--ghost:hover, .media-controls .btn--ghost[aria-pressed='true'] { background: #f0e6d6; color: #1d1a17; }
.media-transcript__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.media-segment { width: 100%; display: flex; gap: 0.85rem; text-align: left; border: 1px solid transparent; background: var(--surface); padding: 0.55rem 0.7rem; border-radius: 5px; cursor: pointer; color: var(--ink); font: 0.95rem/1.45 var(--font-sans); }
.media-segment:hover { border-color: var(--rule); }
.media-segment.is-active { border-color: var(--accent); background: var(--accent-soft); }
.media-segment__time { font: 0.8rem var(--font-sans); color: var(--teal); padding-top: 0.15rem; flex: none; font-variant-numeric: tabular-nums; }
.media-files { list-style: none; padding: 0; margin: 0 0 0.6rem; display: grid; gap: 0.5rem; }
.media-file { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.media-file .icon { margin-right: 0.3rem; }
.media-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; }

@media (prefers-reduced-motion: reduce) {
  .paper { transition: none; }
}