.preview-panel { position: relative; overflow: hidden; padding: 13px 14px 18px; background: #313536; transition: opacity .15s ease, visibility .15s ease, padding .22s ease; }
.preview-panel::before { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-radial-gradient(circle at 50% 30%, transparent 0 17px, rgba(255,255,255,.08) 18px 19px); }
.preview-toolbar { position: relative; z-index: 2; height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid #191b1b; border-radius: 8px; background: rgba(25,27,27,.88); color: #a4a9a9; }
.preview-toolbar button { border: 0; background: transparent; color: inherit; }
.device-picker { flex: 1; font-size: 12px; font-weight: 700; }
.device-shell { --shell-border: 8px; --preview-width: 390px; --preview-height: 624px; --preview-scale: 1; position: absolute; z-index: 1; left: 50%; top: 51%; width: var(--preview-width); height: var(--preview-height); transform: translate(-50%, -45%) scale(var(--preview-scale)); transform-origin: center center; border: var(--shell-border) solid #1f2020; border-radius: 21px; background: #171818; box-shadow: 0 10px 18px rgba(0,0,0,.46), inset 0 0 0 1px #444; transition: transform .18s ease, border-radius .18s ease, border-width .18s ease, background .18s ease; }
.preview-nav-zone { position: absolute; z-index: 8; top: calc(-1 * var(--shell-border)); bottom: calc(-1 * var(--shell-border)); width: 75px; padding: 0; border: 0; color: rgba(255,255,255,.86); background: transparent; cursor: default; opacity: 1; }
.preview-nav-previous { left: 0; }
.preview-nav-next { right: 0; }
.preview-nav-bubble { position: absolute; top: 50%; display: grid; place-items: center; width: 58px; height: 96px; transform: translateY(-50%); background: rgba(175,183,190,.52); box-shadow: 0 4px 18px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.18); opacity: 0; transition: opacity .16s ease, background .16s ease, transform .16s ease; pointer-events: none; }
.preview-nav-bubble i { font-size: 28px; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.preview-nav-previous .preview-nav-bubble { left: 0; border-radius: 0 58px 58px 0; transform: translate(-18px, -50%); }
.preview-nav-next .preview-nav-bubble { right: 0; border-radius: 58px 0 0 58px; transform: translate(18px, -50%); }
.preview-nav-zone:hover .preview-nav-bubble,
.preview-nav-zone:focus-visible .preview-nav-bubble { opacity: 1; background: rgba(183,191,198,.64); transform: translateY(-50%); }
.preview-nav-zone:focus-visible { outline: 2px solid #74a8ff; outline-offset: -3px; }
.device-camera { position: absolute; top: 10px; left: 50%; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: #0b0b0b; }
.book-page { position: absolute; inset: 48px 18px 34px; overflow: hidden; padding: 6% 3.333% 4%; color: #171717; background: #f8f8f5; font-family: Georgia, "Times New Roman", serif; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.book-page h3 { margin: 0 0 2.333%; text-align: center; font-size: 13px; letter-spacing: .04em; }
.book-page .preview-chapter-title { margin: 0 0 5.333%; text-align: left; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; }
.book-page.heading-small { padding-top: 3.333%; }
.book-page.heading-medium { padding-top: 5.667%; }
.book-page.heading-large { padding-top: 8%; }
.book-page.heading-align-left h3 { text-align: left; }
.book-page.heading-align-center h3 { text-align: center; }
.book-page.heading-align-right h3 { text-align: right; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 22px; letter-spacing: 0; }
.book-page.heading-small h3 { font-size: 11px; }
.book-page.heading-large h3 { font-size: 16px; }
.book-page.heading-align-right .preview-chapter-title { margin-top: 6%; }
.preview-copy { font-size: 10px; line-height: 1.4; text-align: left; }
.body-justify .preview-copy,
.body-justify .print-page-content { text-align: justify; }
.preview-copy p { margin: 0 0 1.4em; }
.body-indentation .preview-copy p + p,
.body-indentation .print-page-content p + p { text-indent: 1.35em; }
.body-spacing .preview-copy p,
.body-spacing .print-page-content p { margin-bottom: 1.8em; text-indent: 0; }
.body-hyphenate .preview-copy,
.body-hyphenate .print-page-content { hyphens: auto; }
.page-number { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 9px; }
.book-page[data-theme="sepia"] { color: #493c2d; background: #eee2bf; }
.book-page[data-theme="black"] { color: #ddd; background: #151515; }