.intro{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080808;padding:90px 28px 70px}.intro-copy{width:min(690px,100%);font-size:clamp(19px,2.05vw,25px);line-height:2.25;letter-spacing:.055em;animation:intro-copy 2.6s ease both;color:#e8e4db}.intro-copy p{margin:0 0 1.35em}.intro-copy p:last-child{margin-bottom:0}.continue{margin-top:48px;font:15px var(--ui);color:#b9ae99;letter-spacing:.22em;min-height:48px;padding:12px 20px;animation:continue-in 4s ease both}.continue span{margin-left:20px}.continue:hover{color:#fff}.intro .continue:focus-visible{outline-color:var(--gold)}
.room{display:flex;align-items:center;justify-content:center;background:#080705;padding:72px 0 70px}.room-frame{position:relative;width:100%;aspect-ratio:1536/650;max-height:calc(100svh - 142px);overflow:hidden;box-shadow:0 0 85px #000}.room-camera{position:absolute;inset:0;transform-origin:20% 44%}.room-art{position:absolute;inset:0;background:url('../assets/room.webp') center top/100% auto no-repeat}.room.entering .room-camera{animation:camera-pull 11s cubic-bezier(.32,.04,.22,1) both}.window-opening{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;animation:window-dissolve 4.5s ease both}.notebook-hotspot{position:absolute;left:33%;top:80%;width:45%;height:16%;transform:rotate(3deg);border-radius:50%;min-height:44px}.notebook-hotspot::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#fff5cc88 0%,#f4d38933 46%,transparent 73%);mix-blend-mode:screen;filter:blur(10px);animation:breathe 3s ease-in-out infinite}.hotspot-ring{position:absolute;inset:20% 16%;border:1px solid #fff1b299;border-radius:50%;box-shadow:0 0 20px #ffda8855;animation:breathe 3s ease-in-out infinite}.notebook-hotspot:hover .hotspot-ring{border-color:#fff4c4;box-shadow:0 0 25px #ffda88aa}
.book-scene{display:flex;align-items:center;justify-content:center;padding:82px 28px 76px;background:radial-gradient(ellipse at center,#483621 0%,#251b12 48%,#0d0b08 95%)}.book-wrap{position:relative;width:min(1120px,94vw);height:min(73svh,735px);min-height:460px;perspective:1800px;filter:drop-shadow(0 20px 25px #0009)}.book-cover{position:absolute;inset:-7px -9px -13px;background:#422c1f;border:2px solid #79542c;border-radius:6px 14px 14px 6px;box-shadow:inset 0 0 0 4px #302018,inset 0 0 0 5px #946c3c}.paper-stack{position:absolute;inset:-2px -5px -8px;background:repeating-linear-gradient(0deg,#bba989 0px,#e9ddc1 2px,#e9ddc1 3px,#c7b692 4px);border-radius:4px 13px 12px 4px;box-shadow:0 4px 8px #0007}.book-spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;border-radius:4px 8px 8px 4px;overflow:hidden;background:var(--paper)}.page{position:relative;color:var(--ink);min-width:0;min-height:0;padding:clamp(18px,2.1vw,32px) clamp(18px,2.4vw,36px) 18px;background-color:#f4ead2;background-image:repeating-linear-gradient(9deg,#66491803 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 15%,#fff7e8a1,transparent 70%)}.page-left{background-image:linear-gradient(90deg,#ceb98a21,transparent 7%,transparent 83%,#93764a1c 95%,#6c512b38),repeating-linear-gradient(9deg,#66491804 0 1px,transparent 1px 4px)}.page-right{background-image:linear-gradient(90deg,#6c512b38,#a0865520 5%,transparent 17%,transparent 95%,#ceb98a30),repeating-linear-gradient(9deg,#66491804 0 1px,transparent 1px 4px)}.page::after{content:'';pointer-events:none;position:absolute;inset:14px;border:1px solid #a0824c28}.spine{position:absolute;top:0;bottom:0;left:50%;width:24px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#51412c19 40%,#35281c4a 49%,#fff7da50 52%,transparent);pointer-events:none;z-index:4}.page-content{height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;overflow:hidden}.illustration{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.page-art{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;user-select:none}.page-prose{font-size:clamp(18px,1.65vw,23px);line-height:1.85;letter-spacing:.04em;width:100%;padding:0 4px;text-align:left;flex-shrink:0}.page-prose p{margin:0}.page-prose p+p{margin-top:.3em}.page-number{font-size:14px;color:#90754a;line-height:1;margin-top:2px;flex-shrink:0}.write-page{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;z-index:5;color:#91713b}.page-ready::before{content:'';pointer-events:none;position:absolute;inset:10%;background:radial-gradient(ellipse,#fffef5bd,transparent 70%);animation:breathe 3s ease-in-out infinite}.first-guide{font:15px/2 var(--ui);letter-spacing:.2em;text-align:center;color:#9d8255;animation:breathe 3.5s ease-in-out infinite}.first-guide>span{display:block;font:36px var(--serif);margin-bottom:12px}.paper-glint{font-size:34px;opacity:.7;animation:breathe 3s infinite}.ink-reveal .illustration{animation:ink-picture 1.9s ease both}.ink-reveal .page-prose{animation:ink-words 2.1s ease both}.turn-page{position:absolute;z-index:8;top:6%;right:-18px;width:49px;height:88%;color:#7d5d2a;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;background:linear-gradient(90deg,transparent 20%,#ffeabd4d 80%,#e9d6a4a6);border-radius:0 12px 12px 0;animation:breathe 2.8s ease-in-out infinite}.turn-page span{font-size:38px}.turning-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;z-index:10;transform-origin:left center;background:linear-gradient(90deg,#bfa979,#f4ead2 8%,#fffaeb 80%,#c8b487);box-shadow:8px 0 24px #30200b44;animation:page-turn .85s ease-in-out both;pointer-events:none}.enter-road{position:absolute;left:8%;right:8%;top:5%;height:64%;z-index:5;border:1px solid transparent}.enter-road::after{content:'';position:absolute;inset:1%;box-shadow:inset 0 0 24px #eebf6477;animation:breathe 3s infinite;pointer-events:none}.mini-road{position:relative;aspect-ratio:1/1;width:100%;max-height:100%;overflow:hidden;border:1px solid #b8a070;background:#eddfbd}.mini-landscape{position:absolute;inset:0;background:url('../assets/landscape.webp') left center/auto 100% no-repeat}.carriage{position:relative;width:100%;aspect-ratio:1.5;container-type:inline-size}.carriage-body{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;user-select:none;-webkit-mask-image:radial-gradient(circle 11.7cqw at 13.7% 67.4%,transparent 99%,#000 100%),radial-gradient(circle 8.8cqw at 47.5% 71%,transparent 99%,#000 100%);mask-image:radial-gradient(circle 11.7cqw at 13.7% 67.4%,transparent 99%,#000 100%),radial-gradient(circle 8.8cqw at 47.5% 71%,transparent 99%,#000 100%);mask-composite:intersect;-webkit-mask-composite:source-in}.wheel{position:absolute;object-fit:contain;pointer-events:none}.wheel-back{width:25.4%;height:38.1%;left:1%;top:48.35%}.wheel-front{width:19.6%;height:29.4%;left:37.7%;top:56.3%}.mini-road .carriage{position:absolute;width:93%;left:3%;bottom:2%}.road-scene{background:radial-gradient(ellipse,#443722,#0c0b09 78%);display:flex;align-items:center;justify-content:center;padding:76px 0 70px}.road-frame{position:relative;width:min(1300px,100vw);aspect-ratio:1.85;max-height:calc(100svh - 146px);overflow:hidden;background:#ebdfc5;border-top:1px solid #897241;border-bottom:1px solid #897241;box-shadow:0 20px 80px #0008}.road-landscape{position:absolute;left:0;top:0;bottom:0;width:190%;background:url('../assets/landscape.webp') left center/100% 100% no-repeat;will-change:transform}.road-vehicle{position:absolute;width:56%;left:24%;bottom:6%;will-change:transform;filter:drop-shadow(0 6px 3px #47331e20)}.wheel-hotspot{position:absolute;left:0;top:45%;width:29%;height:46%;border-radius:50%;background:radial-gradient(ellipse,transparent 30%,#ffdd8566 65%,transparent 73%);animation:breathe 2.8s ease-in-out infinite;min-width:44px;min-height:44px}.wheel-hotspot span{position:absolute;inset:9%;border:2px solid #ffe29b;border-radius:50%;box-shadow:0 0 20px #ffe9a8b3}.road-ready .road-frame{animation:into-road 1.3s cubic-bezier(.2,.5,.2,1) both}.departing-spine{position:absolute;left:0;top:0;bottom:0;width:22px;pointer-events:none;background:linear-gradient(90deg,#30281755,#8d74452e,transparent);opacity:.8}.road-ready .departing-spine{animation:none}.arrival-caption{position:absolute;right:4%;top:6%;padding:18px 22px;color:#302a21;text-align:center;background:#f4ebd7ec;box-shadow:0 3px 30px #70522535;border:1px solid #9f854f88;animation:hint-in 1.8s ease both;max-width:40%}.arrival-caption>span{font:13px var(--ui);letter-spacing:.4em;color:#876839}.arrival-caption h1{font-weight:400;font-size:clamp(19px,2.2vw,29px);letter-spacing:.1em;margin:10px 0}.arrival-caption p{font-size:16px;line-height:1.7;margin:10px 0}.end-button{font:14px var(--ui);border-bottom:1px solid #8a744a;padding:9px 4px;min-height:44px}.end-button:hover{color:#957333}.travel-hint{opacity:.75}
@keyframes intro-copy{from{opacity:0}to{opacity:1}}@keyframes continue-in{0%,65%{opacity:0}100%{opacity:1}}@keyframes camera-pull{0%,16%{transform:scale(2.65);opacity:0}35%{opacity:1}100%{transform:scale(1);opacity:1}}@keyframes window-dissolve{0%{opacity:0}25%,55%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes ink-picture{0%{opacity:0;filter:sepia(1) blur(5px);clip-path:inset(0 0 100% 0)}100%{opacity:1;filter:none;clip-path:inset(0)}}@keyframes ink-words{0%,30%{opacity:0;filter:blur(2px)}100%{opacity:1;filter:none}}@keyframes page-turn{0%{transform:rotateY(0deg)}100%{transform:rotateY(-180deg)}}@keyframes into-road{from{clip-path:inset(15% 4% 15% 48%);opacity:.5}to{clip-path:inset(0);opacity:1}}@keyframes spine-enter{from{left:48%;opacity:1}to{left:0;opacity:.8}}
@media(min-width:1600px){.room-frame{width:min(100%,1900px)}}
@media(max-width:700px){.intro{padding:82px 27px 40px}.intro-copy{font-size:19px;line-height:2.05;letter-spacing:.025em}.continue{margin-top:27px}.room{padding:72px 0 78px}.room-frame{max-height:none}.notebook-hotspot{min-height:36px;top:77%;height:20%}.book-scene{padding:76px 12px 76px}.book-wrap{width:calc(100vw - 34px);height:min(68svh,500px);min-height:440px}.page{padding:15px 12px 16px}.page::after{inset:6px}.page-content{gap:12px}.illustration{flex:0 1 auto;min-height:100px;max-height:46%;width:100%;aspect-ratio:1;align-self:center}.page-art{width:100%;height:100%}.page-prose{font-size:18px;line-height:1.65;letter-spacing:0;padding:0 1px}.page-prose p+p{margin-top:.5em}.page-number{margin-top:auto;font-size:13px}.spine{width:17px}.first-guide{font-size:14px;letter-spacing:.05em}.turn-page{right:-15px;width:42px}.enter-road{left:6%;right:6%;top:3%;height:45%}.mini-road{aspect-ratio:1}.road-frame{aspect-ratio:1.15;max-height:calc(100svh - 156px)}.road-landscape{width:260%;background-size:100% 100%}.road-vehicle{width:72%;bottom:9%}.arrival-caption{max-width:53%;padding:12px;right:3%;top:5%}.arrival-caption h1{font-size:21px}.arrival-caption p{font-size:15px}.end-button{font-size:13px}.room .scene-hint{bottom:26%}}
@media(max-height:500px) and (min-width:501px){.toolbar{padding:4px 12px}.toolbar button{min-height:36px;font-size:13px;padding:5px 10px}.intro{padding:58px 38px 24px}.intro-copy{font-size:18px;line-height:1.75;max-width:800px}.intro-copy p{margin-bottom:.7em}.continue{margin-top:10px}.book-scene{padding:55px 24px 49px;align-items:flex-start}.book-wrap{min-height:0;height:calc(100svh - 104px);width:min(90vw,840px)}.page{padding:9px 16px 8px}.page-content{display:grid;grid-template-columns:44% 1fr;grid-template-rows:1fr 15px;gap:6px 10px;align-items:center}.illustration{grid-column:1;grid-row:1;max-height:100%;min-height:0;aspect-ratio:1;flex:initial}.page-prose{grid-column:2;grid-row:1;font-size:17px;line-height:1.55;padding:0;letter-spacing:0}.page-prose p+p{margin-top:.35em}.page-number{grid-column:1/3;grid-row:2;justify-self:center;margin:0;font-size:12px}.page::after{inset:4px}.enter-road{top:5%;left:4%;width:43%;height:75%;right:auto}.scene-hint{bottom:12px;font-size:12px}.room{padding:45px 0}.room-frame{max-height:calc(100svh - 85px);width:auto;height:calc(100svh - 85px);aspect-ratio:1536/650}.road-scene{padding:45px 0 38px}.road-frame{max-height:calc(100svh - 83px);height:calc(100svh - 83px);width:100%;aspect-ratio:auto}.road-vehicle{width:42%;bottom:-3%}.arrival-caption{padding:8px 13px;top:5%;right:5%}.arrival-caption h1{font-size:21px;margin:6px 0}.arrival-caption p{display:none}.end-button{min-height:34px;padding:5px}.first-guide{font-size:13px}.first-guide>span{font-size:24px;margin-bottom:3px}}
@media(max-width:374px){.page{padding-left:9px;padding-right:9px}.page-prose{font-size:18px;line-height:1.62}.book-wrap{min-height:446px}.intro-copy{font-size:18px}}

.write-page:disabled{pointer-events:none}.page-ready:has(.write-page:disabled)::before,.write-page:disabled .paper-glint{opacity:0;animation:none}.first-guide{color:#856838;animation:guide-breathe 3.5s ease-in-out infinite}@keyframes guide-breathe{0%,100%{opacity:.7}50%{opacity:1}}

.road-leftleaf{position:absolute;inset:0 auto 0 0;width:23.5%;background:linear-gradient(90deg,#f4ead2 0%,#f4ead2 90%,#c8b892 100%);border-right:1px solid #72583766;box-shadow:10px 0 22px #44311c30;pointer-events:none;display:flex;align-items:center;padding:16px}.road-leftleaf img{width:100%;mix-blend-mode:multiply}.departing-spine{left:23.5%;width:20px}.arrival-caption{left:3%;right:auto}.page-number{line-height:1.2}

.road-leftleaf{overflow:hidden}.road-leftleaf img{position:absolute;height:82%;width:auto;max-width:none;right:12%;top:9%;opacity:.65}.arrival-caption{position:absolute;left:16px;right:16px;top:auto;bottom:24px;max-width:none;padding:0;background:none;box-shadow:none;border:0;color:#e9dfcb;display:flex;justify-content:center;align-items:center;gap:18px}.arrival-caption>span{color:#b8a17a;font-size:14px;letter-spacing:.2em}.arrival-caption h1{font-size:22px;margin:0}.arrival-caption p{display:none}.arrival-caption .end-button{color:#bdaa87;margin-left:10px}@media(max-width:700px){.road-vehicle{width:68%}.arrival-caption{bottom:30px;gap:10px;flex-wrap:wrap}.arrival-caption h1{font-size:20px}.arrival-caption .end-button{font-size:13px}}@media(max-height:500px) and (min-width:501px){.road-vehicle{width:42%}.arrival-caption{bottom:3px;gap:12px;flex-wrap:nowrap}.arrival-caption h1{font-size:16px}.arrival-caption>span{font-size:12px}.arrival-caption .end-button{min-height:32px;font-size:12px}}
/* Keep painted colours stable in WebKit's compositing path. */
.book-wrap{filter:none}.book-cover{box-shadow:0 20px 28px #0009,inset 0 0 0 4px #302018,inset 0 0 0 5px #946c3c}.page-art,.road-leftleaf img{mix-blend-mode:normal}.road-vehicle{filter:none}

/* Keep each paper face opaque and independent of stale composited ink layers. */
.book-spread{isolation:isolate}.page{isolation:isolate}.page.blank{background-color:#f4ead2}.page.blank>.page-content{display:none!important}