#story-paper-intro{display:none}
html.story-paper-active{overflow:hidden}
.story-paper-active #story-paper-intro{display:block;position:fixed;inset:0;z-index:32000;overflow:hidden;isolation:isolate}
.story-paper-stage,.story-paper-cover,.story-paper-piece{position:absolute;inset:0}
.story-paper-cover,.story-paper-piece{background-color:#f8f1df;background-image:radial-gradient(ellipse at 47% 38%,#fffdf5bb,transparent 65%),radial-gradient(ellipse at 4% 100%,#b4945430,transparent 60%),repeating-linear-gradient(9deg,#977e4310 0px,#977e4300 1px,#fff6 2px,#fff0 4px);box-shadow:inset 0 0 70px #b2986233}
.story-paper-cover{z-index:2}
.story-paper-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;color:#1e1a12}
.story-paper-copy>span{font:600 10px/1.5 Arial,sans-serif;letter-spacing:3px;color:#99732e;margin-bottom:25px}
.story-paper-copy h2{font:500 clamp(36px,6.7vw,95px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:0}
.story-paper-copy h2 em{font-style:normal;color:#8f6726}
.story-paper-copy>i{width:65px;height:1px;background:linear-gradient(90deg,transparent,#a77c31,transparent);margin-top:29px}
.story-paper-piece{transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
.story-paper-playing .story-paper-cover{animation:storyPaperCover 1.47s linear both}
.story-paper-playing .story-paper-piece{animation:storyPaperBreak 1.35s cubic-bezier(.46,.05,.59,1) var(--paper-delay) both}
.story-paper-skip{position:absolute;right:24px;bottom:25px;z-index:4;border:1px solid #ad8d4c88;border-radius:24px;padding:10px 17px;background:#fffaf0df;color:#705324;font:600 11px/1.2 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 9px #75572712}
.story-paper-skip:hover{background:#e8d5a7}.story-paper-skip:focus-visible{outline:2px solid #80591e;outline-offset:4px}
@keyframes storyPaperCover{0%,98%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes storyPaperBreak{0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}20%{opacity:1}72%{opacity:.9}100%{opacity:0;transform:translate3d(var(--paper-x),var(--paper-y),0) rotate(var(--paper-turn)) scale(.83)}}
@media(max-width:700px){.story-paper-copy>span{font-size:8px;letter-spacing:2px;max-width:280px}.story-paper-copy h2{font-size:clamp(36px,9vw,60px)}.story-paper-skip{right:17px;bottom:max(20px,env(safe-area-inset-bottom));font-size:10px}}
@media(prefers-reduced-motion:reduce){.story-paper-active #story-paper-intro{display:none}.story-paper-active{overflow:auto}.story-paper-piece,.story-paper-cover{animation:none!important}}

/* A visible marker follows the ink strokes before the paper separates. */
.story-marker-art{display:block;width:min(880px,91vw);height:auto;overflow:visible;transform:rotate(-3deg)}
.story-writing-marker{transition:opacity .18s;filter:drop-shadow(3px 5px 3px #0003)}
.story-paper-playing .story-paper-cover,.story-paper-playing .story-paper-piece{animation:none}
.story-paper-breaking .story-paper-cover{visibility:hidden;opacity:0}
.story-paper-breaking .story-paper-piece{animation:storyPaperBreak 1.35s cubic-bezier(.46,.05,.59,1) var(--paper-delay) both}
@media(max-width:700px){.story-marker-art{width:94vw}.story-writing-marker{filter:drop-shadow(2px 3px 2px #0003)}}
@media(prefers-reduced-motion:reduce){.story-marker-art{transform:none}.story-writing-marker{display:none}}