*{box-sizing:border-box} :root{color-scheme:dark;--ink:#10110e;--white:#f7f6f1;--duration:1100ms}body{margin:0;background:var(--ink);color:var(--white);font-family:'General Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible{outline:2px solid #ffbd9e;outline-offset:6px}button{color:inherit}header,footer{position:fixed;left:0;width:100%;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:28px 32px}header{top:0}footer{bottom:0;font-size:14px;letter-spacing:-.28px;min-height:77px;gap:16px}.brand{display:flex;gap:6px;align-items:center;font-size:24px;font-weight:500;letter-spacing:-1px;text-decoration:none;color:inherit;line-height:1}.brand svg{width:22px;height:26px}.pill{border:0;border-radius:99px;color:var(--ink);background:var(--white);padding:9px 12px 9px 16px;font-weight:500;font-size:14px;line-height:16px;display:inline-flex;gap:9px;align-items:center;transition:background .2s,transform .2s}.pill:hover{background:#ffc9b1;transform:translateY(-2px)}.pill span{font-size:20px;line-height:14px}.pill.small{font-size:12px;padding:8px 10px 8px 14px}.pill.small span{font-size:17px}main{position:relative;min-height:600px;height:100svh;overflow:hidden}.stage{position:absolute;inset:90px 0 108px;display:flex;align-items:center;justify-content:center;perspective:2200px}.book{width:min(81.4vw,calc((100svh - 245px)*1.903),1400px);aspect-ratio:2192/1152;position:relative;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .6s;filter:drop-shadow(0 30px 35px #0007);container-type:inline-size}.base-pages{position:absolute;inset:0}.page{position:absolute;width:50%;height:100%;top:0;background-size:200% 100%;background-repeat:no-repeat;background-color:#edb295;overflow:hidden;border:1px solid #ead5ad80;box-shadow:0 3px 0 #b3977d,0 6px 0 #57473c}.page.left{left:0;background-position:left;border-radius:7% 0 0 7%}.page.right{right:0;background-position:right;border-radius:0 7% 7% 0}.page-copy{position:absolute;left:10.1%;top:6.3%;width:77%;margin:0;color:#4c2516;font-family:Gambetta,Georgia,serif;font-size:2.73cqw;font-weight:500;line-height:1.2;letter-spacing:-.025em}.page.right .page-copy{color:#2e2f63}.page-copy p{margin:0 0 .7em}.page-copy em{font-weight:500}.gift-line{opacity:0;transform:translateY(7px);transition:opacity .7s,transform .7s}.gift-given .gift-line{opacity:1;transform:none}.spine{position:absolute;left:49.65%;width:.7%;top:0;height:100%;background:linear-gradient(90deg,transparent,#3b241c33,#fff1,transparent);pointer-events:none;z-index:2}.turning-leaf{position:absolute;left:50%;width:50%;height:100%;top:0;transform-origin:left center;transform-style:preserve-3d;z-index:12;display:none}.turning-leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:0 7% 7% 0;box-shadow:2px 2px 0 #e6cca5}.turning-leaf .face.back{transform:rotateY(180deg);border-radius:7% 0 0 7%}.face .page{width:100%;box-shadow:none}.face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0003,transparent 30%,#fff1);opacity:.7}.face.back .page{border-radius:7% 0 0 7%}.cover{position:absolute;top:0;left:25%;width:50%;height:100%;border:0;border-radius:2% 7% 7% 2%;background:url('assets/cover.webp') center/100% 100%;transform-style:preserve-3d;box-shadow:4px 5px 0 #d8c3a1,8px 9px 0 #6f5442;transform-origin:left center;z-index:20;transition:transform 1.3s cubic-bezier(.22,1,.36,1),opacity .4s;backface-visibility:hidden}.cover-title{position:absolute;top:11%;left:7%;width:88%;font:500 3.5cqw/1.05 Gambetta,Georgia,serif;letter-spacing:-.045em;text-align:center;color:#fff8e6}.cover-title small{display:block;font-size:1.18cqw;letter-spacing:0;margin-top:12px}.hero-title{position:absolute;z-index:25;top:14.8%;width:100%;margin:0;text-align:center;font-size:clamp(36px,5vw,80px);font-weight:500;line-height:.9;letter-spacing:-.04em;transition:opacity .5s,filter .5s;animation:title-in 1.4s both}.intro-action{position:absolute;top:78%;left:0;width:100%;text-align:center;transition:opacity .4s}.hint{position:absolute;bottom:83px;left:0;right:0;text-align:center;font-size:14px;letter-spacing:-.2px;margin:0;min-height:20px;transition:opacity .3s}.navigation{display:flex;align-items:center;gap:10px}.navigation button,.text-button{border:0;background:none;padding:8px 0;font-size:14px}.navigation button:hover:not(:disabled){color:#ffc5a9}.progress{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}.progress button{padding:16px 0;border:0;background:none;width:3px;transition:width .5s;position:relative}.progress button:after{content:'';display:block;height:3px;width:100%;background:#fff6;border-radius:10px}.progress button[aria-current=true]{width:32px}.progress button[aria-current=true]:after{background:var(--white)}[hidden]{display:none!important}[data-mode=intro] .book{transform:translateY(35px) rotateX(34deg) rotateZ(-17deg) scale(.76)}[data-mode=intro] .base-pages,[data-mode=intro] .spine{opacity:0}[data-mode=opening] .hero-title,[data-mode=reading] .hero-title,[data-mode=end] .hero-title,[data-mode=opening] .intro-action,[data-mode=reading] .intro-action,[data-mode=end] .intro-action{opacity:0;pointer-events:none}[data-mode=opening] .book{transform:scale(.9)}[data-mode=reading] .cover,[data-mode=end] .cover{display:none}.ending{display:none;pointer-events:none}[data-mode=end] .ending{display:block}[data-mode=end] .book{transform:scale(.77) translateY(20px)}.ending h2{position:absolute;top:10%;left:0;width:100%;margin:0;text-align:center;font-size:clamp(32px,4.17vw,68px);letter-spacing:-.04em;font-weight:500;line-height:.9;animation:title-in 1s both}.end-actions{position:absolute;top:80%;width:100%;display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:auto}.text-button{text-decoration:underline;text-underline-offset:4px}.hotspot{position:absolute;border:0;background:transparent;border-radius:50%;z-index:5;padding:0}.hotspot:after{content:'+';display:grid;place-items:center;position:absolute;right:0;bottom:0;width:25px;height:25px;border:1px solid #fff9;color:#fff;background:#16141266;border-radius:50%;font:18px Arial;transition:transform .3s,opacity .3s}.hotspot:hover:after{transform:scale(1.15);background:#10110ebb}.peek{left:68%;top:56%;width:21%;height:27%}.shadow-hotspot{left:14%;top:24%;width:30%;height:35%}.rabbit-hotspot{left:39%;top:60%;width:13%;height:32%}.light-hotspot{left:66%;top:73%;width:14%;height:24%}.warm-glow{position:absolute;left:43%;top:40%;width:57%;height:62%;background:radial-gradient(ellipse at 57% 76%,#ffd47a80,transparent 65%);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity 1s}.nightlight-on .warm-glow{opacity:1}.book.peeked{animation:peek .7s ease-in-out}.book.brave{animation:brave .7s ease-in-out}.kindness-spark{position:absolute;left:51%;top:66%;font-size:4cqw;color:#ffe1a4;text-shadow:0 0 20px #ffd194;pointer-events:none;animation:kindness 1.4s both}.mobile-copy{display:none}dialog{color:var(--white);background:#1b1c18;border:1px solid #ffffff20;border-radius:8px;padding:70px 60px 48px;max-width:620px;width:calc(100% - 32px);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#080906b8;backdrop-filter:blur(14px)}dialog .close{position:absolute;right:22px;top:22px}dialog h2{font-size:56px;font-weight:500;line-height:1;letter-spacing:-2.4px;margin:30px 0}dialog p:not(.eyebrow){font-size:17px;line-height:1.6;color:#d4d2c8} .eyebrow,.about-note{font-size:11px;letter-spacing:.06em}.about-note{display:block;margin-top:40px;color:#a6a79c}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);border-radius:30px;padding:12px 20px;background:#f7f6f1;color:#10110e;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}#toast.visible{opacity:1}.no-script{position:fixed;top:40%;width:100%;text-align:center}.book.busy #interactions{pointer-events:none;opacity:0}@keyframes title-in{from{opacity:0;filter:blur(12px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}@keyframes peek{50%{transform:translateY(-8px) rotateX(2deg)}}@keyframes brave{40%{transform:scale(1.018) rotateY(-1deg)}70%{transform:scale(.998)}}@keyframes kindness{0%{opacity:0;transform:translate(-30px,15px) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(90px,-70px) scale(1.4)}}
@media(max-width:700px){header{padding:22px 20px}.brand{font-size:22px}footer{padding:18px 20px;font-size:10px;flex-wrap:wrap;min-height:94px;align-content:flex-end;gap:12px}.navigation button{font-size:12px;min-height:44px}.progress{bottom:74px}.hero-title{top:20%;font-size:12vw}.stage{inset:120px 0 190px}.book{width:94vw}.cover-title{font-size:4.2cqw}.cover-title small{font-size:1.5cqw}.intro-action{top:73%}[data-mode=intro] .book{transform:translateY(16px) rotateX(25deg) rotateZ(-15deg) scale(1.2)}.hint{bottom:132px;font-size:11px;padding:0 20px}[data-mode=reading] .stage{inset:100px 0 290px}.mobile-copy{position:absolute;bottom:167px;left:24px;right:24px;font:18px/1.25 Gambetta,Georgia,serif;display:none;grid-template-columns:1fr 1fr;gap:20px;color:#ffc6a9}.mobile-copy .right-copy{color:#b9b9ea}.mobile-copy p{margin:0 0 8px}[data-mode=reading] .mobile-copy{display:grid}.page-copy{font-size:2.9cqw}.ending h2{top:16%;font-size:10vw}.end-actions{top:74%;gap:10px}.end-actions button{font-size:12px}[data-mode=end] .book{transform:scale(.96)}dialog{padding:68px 28px 30px}dialog h2{font-size:44px}.hotspot:after{width:22px;height:22px}}
@media(max-height:620px) and (min-width:701px){.stage{inset:75px 0 90px}.book{width:min(76vw,calc((100svh - 170px)*1.903))}.hero-title{top:15%;font-size:48px}.hint{bottom:65px}.intro-action{top:79%}.ending h2{font-size:40px;top:13%}}
.pop-up{position:absolute;inset:0;pointer-events:none;transform-origin:65% 91%;filter:drop-shadow(2px 8px 5px #30224033);animation:paper-rise 1s cubic-bezier(.22,1,.36,1) both;z-index:3}.pop-up.boy{transform-origin:30% 91%}.pop-art{position:absolute;inset:0;background:url('assets/spread-3.webp') center/100% 100%}.monster .pop-art{clip-path:polygon(50.8% 67%,52.8% 66%,54.4% 69%,55.3% 61%,57.4% 55%,58.2% 49%,59% 44%,60.5% 43.4%,62.5% 47.6%,64% 46.5%,66% 44.2%,67% 46%,69% 47.6%,71% 47.8%,72.4% 50%,74% 50.8%,74.6% 55%,75.2% 61%,75.8% 67%,77.2% 75%,78% 82%,77% 87%,75% 90%,72% 91.5%,71% 90.2%,68% 91%,64% 89.5%,62% 91.2%,59% 90.4%,57% 87%,55% 81%,54% 76%,51% 73%)}.boy .pop-art{clip-path:polygon(17.8% 88%,18% 83%,21.3% 78%,22.4% 72%,21% 68%,21.6% 65%,24% 61%,23% 58%,21% 56%,20.4% 53%,19% 50%,20% 48%,19% 45%,21% 42%,20% 40%,24% 37%,23% 34%,26% 33%,27% 31%,29% 33%,30% 31%,32% 33%,34% 34%,35% 34%,36% 37%,37% 39%,37% 42%,38.5% 45%,38% 48%,37% 52%,36% 58%,34% 62%,35% 66%,39% 71%,40.7% 70%,40.7% 75%,38% 78%,34% 75%,34% 80%,37% 85%,38% 90%,36% 94%,30% 94%,24% 93%,19% 92%)}@keyframes paper-rise{from{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 transparent)}to{transform:translateY(-.5%) scale(1.025);filter:drop-shadow(2px 8px 5px #30224033)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.pop-up{display:none}}