/* Complete public sample story. All styles are scoped to the reusable component. */
.booklet-page-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:32px;max-width:880px;margin:0 auto;color:inherit;font:inherit}
.booklet-page-grid *{box-sizing:border-box}
.booklet-page-grid figure,.booklet-page-grid p{margin:0}
.booklet-page-grid button{font:inherit;color:inherit;cursor:pointer}
.booklet-page-grid button:focus-visible{outline:3px solid #f6ad7c;outline-offset:4px}
.booklet-page-grid__feature{min-width:0;text-align:center}
.booklet-page-grid__enlarge{position:relative;display:block;width:100%;max-width:290px;margin:auto;padding:0;border:0;background:white;box-shadow:0 7px 20px #0003}
.booklet-page-grid__enlarge img{display:block;width:100%;height:auto;aspect-ratio:655/927;object-fit:contain}
.booklet-page-grid__enlarge>span{position:absolute;bottom:10px;right:10px;background:#fffdf4;color:#342f2a;border-radius:4px;padding:6px 9px;font:12px/1.4 system-ui;box-shadow:0 1px 7px #0002}
.booklet-page-grid__feature figcaption{font:12px/1.5 system-ui;margin-top:12px;color:inherit}
.booklet-page-grid__overview{min-width:0;width:100%;max-width:400px;justify-self:start}
.booklet-page-grid__label{font:13px/1.5 system-ui!important;color:inherit!important;max-width:none!important;margin:0 0 14px!important}
.booklet-page-grid__pages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.booklet-page-grid__thumb{position:relative;display:block;min-width:0;min-height:44px;padding:0;border:2px solid transparent;background:transparent;transition:border-color .15s}
.booklet-page-grid__thumb[aria-pressed=true]{border-color:#f6ad7c}
.booklet-page-grid__thumb:hover{border-color:#f6ad7c99}
.booklet-page-grid__thumb img{display:block;width:100%;height:auto;aspect-ratio:655/927;object-fit:contain;background:var(--color-paper,white);box-shadow:0 2px 6px #0002}
.booklet-page-grid__thumb>span{position:absolute;bottom:0;right:0;min-width:19px;padding:1px 4px;font:10px/1.5 system-ui;background:#fffdf1ee;color:#342f2a}
.booklet-page-grid__dialog{padding:0;border:0;width:min(94vw,720px);max-width:94vw;max-height:96dvh;background:#f6f1e7;color:#342f2a;box-shadow:0 20px 80px #0005}
.booklet-page-grid__dialog::backdrop{background:#1c1917df}
.booklet-page-grid__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;font:13px/1.5 system-ui}
.booklet-page-grid__bar>div{display:flex;gap:4px}
.booklet-page-grid__bar button{border:0;background:transparent;min-width:44px;min-height:44px;font:24px/1 system-ui;color:#342f2a}
.booklet-page-grid__dialog>img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94dvh - 58px);margin:0 auto;object-fit:contain}
@media(max-width:900px){.booklet-page-grid{gap:25px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.booklet-page-grid__pages{gap:7px}}
@media(max-width:600px){.booklet-page-grid{grid-template-columns:1fr;gap:20px}.booklet-page-grid__enlarge{max-width:185px}.booklet-page-grid__feature figcaption{margin-top:8px}.booklet-page-grid__pages{gap:6px}.booklet-page-grid__label{font-size:12px!important;margin-bottom:10px!important}.booklet-page-grid__bar{font-size:12px;gap:4px;padding:5px 6px}}
@media(prefers-reduced-motion:reduce){.booklet-page-grid__thumb{transition:none}}