.story-book-demo{--paper:#f4ebd9;--book-ink:#183e32;width:100%;min-width:0;color:var(--book-ink);isolation:isolate;background:#e6e9dc;border-radius:24px;padding:22px 22px 18px;position:relative;overflow:hidden;container-type:inline-size}.demo-stage-label{letter-spacing:1.5px;z-index:2;color:#4b6354;align-items:center;gap:7px;font-size:8px;font-weight:600;display:flex;position:relative}.demo-stage-label>span:last-child{color:#677668;margin-left:auto;font-size:7px}.demo-live-dot{background:#b65034;border-radius:50%;width:5px;height:5px}.demo-scene{--leaf-w:43cqw;--leaf-h:calc(var(--leaf-w)*1.4);perspective:1600px;touch-action:pan-y;-webkit-user-select:none;user-select:none;height:86cqw;max-height:500px;position:relative}.demo-light-pool{pointer-events:none;background:radial-gradient(at 50% 55%,#fcf6e9 0%,#fcf6e955 37%,#0000 65%);position:absolute;inset:0 -35%}.demo-perspective{transform-style:preserve-3d;pointer-events:none;position:absolute;inset:0}.demo-book-rig{width:var(--leaf-w);height:var(--leaf-h);transform-style:preserve-3d;transform-origin:0;position:absolute;top:14%;left:50%}.demo-book-bottom{background:repeating-linear-gradient(#d4cbb7 0 1px,#f3ead7 1px 3px);border-radius:2px 7px 7px 2px;position:absolute;inset:-3px -6px -8px -2px;transform:translateZ(-5px);box-shadow:6px 6px #153c31,12px 23px 24px #123a2a35}.demo-final-page{background:var(--paper);text-align:center;border-radius:2px 5px 5px 2px;flex-direction:column;justify-content:center;padding:9%;display:flex;position:absolute;inset:0;box-shadow:inset 12px 0 16px -15px #443b2b}.demo-final-page h3{letter-spacing:-.25cqw;margin:5% 0;font:6.6cqw/1.02 Georgia,serif}.demo-final-page h3 em{color:#b65034}.demo-final-page p{font:2.6cqw/1.6 Georgia,serif}.demo-page-monogram{color:#b65034;margin:10% 0;font:italic 7cqw/1 Georgia,serif}.demo-final-page>.demo-page-kicker{position:absolute;inset:9% 3% auto}.demo-final-page>.demo-page-number{margin-top:auto;font-size:1.15cqw}.demo-leaf{transform-origin:0;transform-style:preserve-3d;will-change:transform;position:absolute;inset:0}.demo-leaf-face{backface-visibility:hidden;background:var(--paper);border:1px solid #d3c8b6;border-radius:2px 6px 6px 2px;position:absolute;inset:0;overflow:hidden}.demo-leaf-front{transform:translateZ(.6px)}.demo-leaf-back{border-radius:6px 2px 2px 6px;transform:rotateY(180deg)translateZ(.6px)}.demo-gutter{pointer-events:none;background:linear-gradient(90deg,#35251222,#0000 13% 92%,#fff6);position:absolute;inset:0}.demo-leaf-back .demo-gutter{background:linear-gradient(90deg,#fff3,#0000 85%,#35251220)}.demo-cover-art{color:#f3ead6;background:#173f32;flex-direction:column;height:100%;padding:10%;display:flex;position:relative}.demo-cover-art:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,#0000 1px 3px);position:absolute;inset:0}.demo-page-kicker{letter-spacing:.25cqw;font-size:1.35cqw;font-weight:600;line-height:1.6;display:block}.demo-cover-art h3{letter-spacing:-.35cqw;margin:12% 0 10%;font:7.2cqw/.98 Georgia,serif}.demo-cover-art>img{object-fit:cover;filter:saturate(.85);width:100%;height:47%}.demo-cover-footer{letter-spacing:.15cqw;justify-content:space-between;margin-top:auto;padding-top:10%;font-size:1.1cqw;display:flex}.demo-cover-seal{color:#e1c78a;text-align:center;background:#173f32eb;border:1px solid #bda56c;border-radius:50%;place-content:center;width:11cqw;height:11cqw;font:1.5cqw/1.4 Georgia,serif;display:grid;position:absolute;bottom:16%;right:5%;transform:rotate(12deg)}.demo-photo-page{flex-direction:column;height:100%;padding:9%;display:flex}.demo-photo-window{background:#d9d4c6;height:65%;margin-top:8%;overflow:hidden}.demo-photo-window img{object-fit:cover;width:100%;height:100%}.demo-photo-page p{margin:9% 0 3%;font:italic 3.55cqw/1.25 Georgia,serif}.demo-page-number{letter-spacing:.16cqw;opacity:.65;margin-top:auto;font-size:1.1cqw;display:block}.demo-map-page{height:100%;padding:10%}.demo-map-page h3{letter-spacing:-.15cqw;margin:10% 0;font:5.25cqw/1.06 Georgia,serif}.demo-map-page svg{object-fit:cover;border-radius:50% 50% 3px 3px;width:100%;height:43%}.demo-city-name{border-bottom:1px solid #c8c8b8;align-items:center;gap:5%;margin-top:6%;font:2.4cqw/1.7 Georgia,serif;display:flex}.demo-city-name i{background:#b65034;border-radius:50%;width:.8cqw;height:.8cqw}.demo-city-name span{margin-left:auto;font:1.1cqw sans-serif}.demo-handwritten{color:#9f492f;margin-top:10%;font:italic 2.7cqw Georgia,serif;transform:rotate(-6deg)}.demo-note-page{flex-direction:column;height:100%;padding:10%;display:flex}.demo-note-page img{object-fit:cover;border:6px solid #fffcf3;width:90%;height:36%;margin:12% auto 4%;transform:rotate(-5deg);box-shadow:2px 5px 8px #183e321c}.demo-note-page p{letter-spacing:-.2cqw;margin:13% 0 8%;font:italic 4.6cqw/1.2 Georgia,serif}.demo-floating-photo{pointer-events:none;background:#fffbf1;width:18%;height:26%;padding:5px 5px 12px;position:absolute;box-shadow:0 5px 13px #183e321d}.demo-floating-photo img{object-fit:cover;width:100%;height:85%}.demo-floating-photo span{text-align:center;margin-top:5%;font:italic 1.6cqw Georgia,serif;display:block}.demo-floating-one{top:1%;left:2%}.demo-floating-two{bottom:0;right:1%}.demo-caption{z-index:2;justify-content:center;align-items:center;gap:12px;display:flex;position:relative}.demo-caption>span{letter-spacing:1px;opacity:.6;font-size:9px}.demo-caption p{margin:0;font:italic 17px Georgia,serif}.demo-controls{justify-content:center;align-items:center;gap:3px;margin-top:9px;display:flex}.demo-controls button{color:#264939;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.demo-controls button:hover{background:#183e3210}.demo-chapter-dots{display:flex}.demo-chapter-dots button{width:25px}.demo-chapter-dots span{background:#183e3255;border-radius:50%;width:5px;height:5px}.demo-chapter-dots [aria-pressed=true] span{background:#b65034;border-radius:4px;width:15px}.demo-create{border-top:1px solid #183e3224;justify-content:center;align-items:center;gap:9px;width:100%;min-height:47px;margin:9px auto 0;font-size:12px;font-weight:600;display:flex}.demo-create>svg:last-child{margin-left:4px}.story-welcome:has(.story-book-demo){grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px;padding:20px 20px 20px 40px;overflow:hidden}@media (max-width:760px){.story-welcome:has(.story-book-demo){grid-template-columns:minmax(0,1fr);gap:22px;padding:20px}.story-welcome:has(.story-book-demo) .story-intro h2{font-size:32px}.story-book-demo{border-radius:18px;padding:16px 10px 10px}.demo-scene{--leaf-w:43cqw;height:87cqw}.demo-stage-label{letter-spacing:1px;font-size:7px}.demo-stage-label>span:last-child{font-size:6px}.demo-caption p{font-size:14px}.demo-caption>span{font-size:8px}.demo-controls{margin-top:4px}.demo-create{margin-top:3px}.demo-floating-photo{padding:3px 3px 9px}}@media (prefers-reduced-motion:reduce){.demo-leaf{will-change:auto}.story-book-demo .demo-leaf,.story-book-demo .demo-book-rig,.story-book-demo .demo-floating-photo{transition:none!important}.demo-map-page svg path{stroke-dasharray:none}}:is(.story-welcome:has(.story-book-demo),.story-welcome:has(.postcard-hero)){align-items:start}.story-welcome .story-intro{padding-top:22px}.story-welcome .story-format-choice{width:max-content;display:flex}.story-welcome .story-intro>.story-small{display:block}.story-welcome .story-intro>p{max-width:320px;font-size:16px;line-height:1.6}.story-welcome:has(.story-book-demo) .story-intro h2{font-size:clamp(36px,3.3vw,48px)}.demo-scene{aspect-ratio:1.15;cursor:grab;width:min(100%,520px);height:auto;max-height:none;margin:auto;container-type:inline-size}.demo-scene:active{cursor:grabbing}.demo-scene:focus-visible{outline-offset:2px;border-radius:12px;outline:2px solid #b65034}@media (max-width:760px){.story-welcome:has(.story-book-demo) .story-intro h2{font-size:32px}.story-welcome .story-intro>p{font-size:14px}.demo-scene{aspect-ratio:1.15;height:auto}.story-welcome .story-intro{padding-top:0}.story-welcome .story-intro>.story-small{display:none}.story-welcome .story-format-choice{margin-bottom:8px}:is(.story-welcome .story-intro h2,.story-welcome:has(.story-book-demo) .story-intro h2){margin:8px 0;font-size:28px}.story-welcome .story-intro>p{margin:8px 0 12px;font-size:14px;line-height:1.45}.story-welcome .story-intro>.bt-primary{min-height:46px;padding:12px 18px;font-size:16px}.story-welcome .story-intro>.story-footnote+.story-footnote{display:none}.story-welcome:has(.story-book-demo) .story-intro>.story-text-button{display:none}.story-welcome:has(.story-book-demo){gap:12px;padding:16px}.demo-map-page svg{height:37%}.demo-city-name{margin-top:3%}.demo-handwritten{margin-top:6%}}
