.preview-page{padding:116px 0 86px;background:linear-gradient(180deg,#edf7ff 0%,#fffaf1 470px,#f7f4ed 100%)}
.preview-page .seo-breadcrumbs{margin-bottom:20px}
.preview-intro{text-align:center;margin:0 auto;max-width:1100px}
.preview-intro h1{font-size:clamp(2.25rem,4.3vw,3.375rem);max-width:none;line-height:1.12;margin:10px 0 12px;letter-spacing:-.04em}
.preview-intro p{color:var(--muted);font-size:1.125rem;line-height:1.55;margin:0}
.preview-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:34px 0}
.preview-card{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.86);color:var(--ink);text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.preview-card:hover,.preview-card.active{transform:translateY(-2px);box-shadow:0 12px 30px rgba(13,29,54,.12);border-color:rgba(20,34,58,.4)}
.preview-card:focus-visible,.preview-arrow:focus-visible,.preview-dot:focus-visible,.preview-hotspot:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.preview-card img{width:72px;height:92px;object-fit:contain;background:#fff;border-radius:9px;box-shadow:0 5px 14px rgba(0,0,0,.14);flex:none}
.preview-card span{display:flex;flex-direction:column;gap:5px;min-width:0}.preview-card small{font-size:.7rem;font-weight:800;line-height:1.25;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.preview-card strong{font-size:.9rem;line-height:1.2}
.preview-book-head{text-align:center;max-width:800px;margin:30px auto 18px}.preview-book-head h2{font-size:clamp(1.8rem,4vw,2.875rem);margin:5px 0 10px}.preview-book-head p{color:var(--muted);font-size:1rem;margin:0}
.preview-frame{max-width:1100px;margin:auto;padding:18px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.78);box-shadow:var(--shadow)}
.preview-stage{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:20px;background:#efe8dc}
.preview-pages{position:absolute;inset:0}.preview-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;transform:translateX(30px) scale(.99);pointer-events:none;transition:opacity .28s,transform .28s,visibility .28s}
.preview-slide.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}.preview-slide img{display:block;max-width:100%;max-height:604px;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.16)}
.preview-ending{width:min(720px,92%);padding:54px 46px;text-align:center;border-radius:24px;background:var(--navy);color:#fff;box-shadow:0 18px 50px rgba(13,29,54,.28)}
.preview-ending small{font-size:.75rem;font-weight:900;letter-spacing:.13em;color:var(--sun)}.preview-ending h3{font-size:clamp(1.9rem,5vw,3.125rem);line-height:1.05;margin:12px 0 14px;letter-spacing:-.035em}.preview-ending p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.83);margin:0 auto 28px;max-width:580px}
.preview-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.preview-pending{opacity:.62;cursor:not-allowed;text-align:center}.preview-collection-link{color:#fff;border-color:rgba(255,255,255,.48)}
.preview-navigation{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 6px 0}.preview-arrow{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.6rem;cursor:pointer}.preview-arrow:disabled{opacity:.35;cursor:default}.preview-progress{flex:1;text-align:center;color:var(--muted);font-size:.85rem}.preview-dots{display:flex;justify-content:center;gap:8px;margin-top:9px}.preview-dot{width:12px;height:12px;border:0;border-radius:20px;background:#b9c5d8;cursor:pointer;padding:0}.preview-dot.active{width:26px;background:var(--navy)}
.preview-hotspot{position:absolute;top:0;bottom:0;width:50%;z-index:2;border:0;background:transparent;cursor:pointer}.preview-hotspot:disabled{pointer-events:none}.preview-left{left:0;cursor:w-resize}.preview-right{right:0;cursor:e-resize}.preview-hotspot::after{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.84);color:var(--ink);box-shadow:0 5px 18px rgba(13,29,54,.15);font-size:1.75rem;opacity:0;transition:opacity .18s}.preview-left::after{content:'‹';left:18px}.preview-right::after{content:'›';right:18px}.preview-stage:hover .preview-hotspot:not(:disabled)::after{opacity:.9}.preview-hotspot:disabled::after{display:none}
.preview-hint{text-align:center;color:var(--muted);font-size:.8rem;margin:14px auto 0}
@media(max-width:900px){.preview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.preview-page{padding:106px 0 56px}.preview-intro h1{font-size:clamp(2.1rem,9vw,3rem)}.preview-cards{display:flex;overflow-x:auto;padding:5px 2px 12px;scroll-snap-type:x mandatory}.preview-card{min-width:255px;scroll-snap-align:start}.preview-frame{padding:8px;border-radius:22px}.preview-stage{min-height:470px}.preview-slide{padding:8px}.preview-slide img{max-height:450px}.preview-ending{padding:32px 18px;width:96%}.preview-ending p{margin-bottom:16px}.preview-actions .btn{min-height:44px;padding:9px 15px;font-size:.85rem}.preview-hotspot::after{display:none}}
@media(prefers-reduced-motion:reduce){.preview-slide,.preview-card{transition:none}}