.publication-reader { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 12px; background: rgba(236, 246, 250, 0.9); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.publication-reader.is-visible { opacity: 1; pointer-events: auto; }
.publication-reader__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1060px, 100%); height: min(900px, calc(100dvh - 24px)); overflow: hidden; border: 1px solid #b9d4df; border-radius: var(--museum-radius); background: #f7fbfd; color: #063a59; box-shadow: 0 28px 80px rgba(6, 58, 89, 0.2); }
.publication-reader__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 32px); border-bottom: 1px solid #c8dde5; background: #ffffff; }
.publication-reader__header p { margin: 0 0 4px; color: #a66b00; font: 700 0.72rem var(--museum-font); letter-spacing: 0.14em; }
.publication-reader__header h2 { margin: 0; font: 700 clamp(1rem, 2vw, 1.45rem) var(--museum-font); }
.publication-reader__header button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 4px; background: transparent; color: #087db8; font-size: 2rem; cursor: pointer; }
.publication-reader__header button:hover { background: #e5f3f8; }
.publication-reader__stage { display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 0; background: radial-gradient(ellipse at center, #ffffff 0%, #eef7fa 72%, #dceff7 100%); }
.publication-reader__book { position: relative; width: auto; max-width: 100%; height: 100%; aspect-ratio: 840 / 594; }
.publication-reader__book.stf__parent { position: relative; box-sizing: border-box; }
.publication-reader__book .stf__wrapper { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; transform: translateX(var(--publication-page-offset, 0px)); }
.publication-reader__book .stf__block { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.publication-reader__book .stf__item { position: absolute; transform-style: preserve-3d; }
.publication-reader__book .stf__outerShadow,
.publication-reader__book .stf__innerShadow,
.publication-reader__book .stf__hardShadow,
.publication-reader__book .stf__hardInnerShadow { position: absolute; }
.publication-page { background: #fdfcf8; box-shadow: inset 0 0 12px rgba(50, 42, 28, 0.14); }
.publication-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
.publication-reader__controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 72px; padding: 10px clamp(14px, 3vw, 32px); border-top: 1px solid #c8dde5; background: #f7fbfd; }
.publication-reader__controls button { min-height: 44px; min-width: 116px; padding: 8px 14px; border: 1px solid #159ccb; border-radius: 4px; background: #ffffff; color: #063a59; font: 700 0.82rem var(--museum-font); cursor: pointer; }
.publication-reader__controls button:hover:not(:disabled) { background: #dceff7; }
.publication-reader__controls button:disabled { opacity: 0.35; cursor: default; }
.publication-reader__controls output { color: #063a59; text-align: center; font: 600 0.82rem var(--museum-font); }
@media (max-width: 600px) { .publication-reader__controls button { min-width: 44px; font-size: 0.72rem; } .publication-reader__header { padding: 10px 14px; } }