@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{--paper:#fff8ee;--ink:#243dd0;--muted:#66666e;--orange:#e56634;--line:#dbd8d2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}header{height:80px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;width:100%;z-index:3}.wordmark{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}.wordmark span{font-size:32px}.made{font-size:13px;color:var(--muted)}.made span{color:var(--orange);margin-left:8px;font-size:21px}#journey{height:610vh}.stage{height:100svh;min-height:720px;position:sticky;top:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:90px 5% 0}.paper-note{position:absolute;top:120px;right:4.5%;font-size:12px;color:var(--orange);max-width:135px;line-height:1.7;transform:rotate(8deg);text-align:center}.message{text-align:center;max-width:730px;z-index:2;flex-shrink:0}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:700;margin:10px 0 14px}h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(42px,5.7vw,80px);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:0 0 22px}h1 em{font-weight:400;color:var(--orange)}.wish{max-width:635px;margin:0 auto;color:#54545f;font-size:16px;line-height:1.85}.scene-wrap{position:relative;width:min(920px,100%);flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column}.art-window{width:430px;max-width:65%;height:100%;max-height:310px;min-height:180px;position:relative;overflow:hidden;isolation:isolate;mix-blend-mode:multiply}.art{width:100%;height:100%;background-image:url('journey.png');background-size:600% 100%;background-repeat:no-repeat;animation:amble 2s ease-in-out infinite;transform-origin:50% 90%;transition:filter .3s}.side-note{position:absolute;top:43%;font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:19px;line-height:1.4;color:var(--orange)}.left-note{left:5%;transform:rotate(-8deg)}.right-note{right:5%;transform:rotate(7deg)}.right-note span{display:block;font-size:32px;margin-left:40px}.ground-line{position:absolute;bottom:35px;left:5%;right:5%;height:1px;background:var(--line);z-index:-1}.scene-caption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted);min-height:30px}.caption-dot{height:5px;width:5px;border-radius:50%;background:var(--orange)}.bottom-bar{width:100%;max-width:1050px;display:flex;justify-content:space-between;align-items:center;padding:14px 0 24px}.scroll-hint{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}.scroll-hint span{font-size:23px;color:var(--ink);animation:hint 2s ease-in-out infinite}.next{border:1px solid var(--ink);border-radius:30px;padding:12px 20px;background:transparent;color:var(--ink);font-size:13px;cursor:pointer;transition:background .2s,color .2s}.next:hover{background:var(--ink);color:white}.next span{margin-left:24px;font-size:17px}.chapter-nav{width:100%;max-width:1050px;display:grid;grid-template-columns:repeat(6,1fr);padding:0 0 20px;gap:0}.chapter-nav button{text-align:left;position:relative;display:grid;grid-template-columns:25px 1fr;align-items:center;gap:8px;border:0;background:none;color:#85858c;padding:9px 0;cursor:pointer;font-size:12px}.chapter-nav i{display:block;height:1px;background:var(--line);margin-right:12px}.chapter-nav b{font-weight:500;grid-column:1/3;font-size:12px}.chapter-nav button[aria-current]{color:var(--ink)}.chapter-nav button[aria-current] i{height:2px;background:var(--ink)}.chapter-nav button.passed i{background:#999ed2}.message.entering{animation:enter .5s ease both}#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}.confetto{position:absolute;width:7px;height:12px;top:-20px;animation:fall 3s ease-in forwards}@keyframes amble{0%,100%{transform:translate(-5px,0) rotate(-1deg)}50%{transform:translate(5px,-7px) rotate(1deg)}}@keyframes work{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg) translateY(-2px)}}@keyframes lift{0%,100%{transform:translateY(4px) scaleY(.97)}50%{transform:translateY(-8px) scaleY(1.025)}}@keyframes breathe{50%{transform:scale(1.018)}}@keyframes nibble{50%{transform:rotate(-2deg) translateY(-3px)}}@keyframes strong{50%{transform:scale(1.07) translateY(-3px)}}@keyframes hint{50%{transform:translateY(4px)}}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
@media(min-height:950px){.stage{padding-top:130px}.art-window{max-height:400px}.wish{font-size:18px}}
@media(max-width:700px){header{height:65px;padding:0 6%}.wordmark{font-size:12px}.wordmark span{font-size:26px}.made{font-size:0}.made span{font-size:22px}.stage{padding:85px 6% 0;min-height:700px}.paper-note{display:none}.eyebrow{font-size:10px;margin-bottom:17px}h1{font-size:48px;max-width:360px;margin:0 auto 20px}.wish{font-size:15px;line-height:1.8;max-width:390px}.side-note{font-size:14px;top:35%}.left-note{left:-1%;max-width:75px}.right-note{right:0;max-width:60px}.art-window{max-width:80%;width:340px;max-height:230px}.scene-caption{font-size:10px}.chapter-nav b{display:none}.chapter-nav{padding-bottom:20px}.bottom-bar{padding:12px 0 15px;gap:10px}.scroll-hint{font-size:11px;max-width:140px}.next{font-size:11px;padding:11px 13px}.next span{margin-left:7px}.scene-wrap{min-height:195px}.ground-line{bottom:29px}}
.art-window{width:220px;max-width:65%;max-height:330px}.art{background-image:url('journey.png');background-size:600% auto;background-position-y:center}
@media(max-width:700px){.art-window{width:170px;max-height:245px}.stage{min-height:640px}}
@media(max-height:720px){.stage{padding-top:67px;min-height:620px}h1{font-size:43px;margin-bottom:14px}.wish{font-size:14px;line-height:1.65}.eyebrow{margin-top:4px;margin-bottom:10px}.art-window{width:155px;max-height:220px}.bottom-bar{padding:8px 0 12px}.chapter-nav{padding-bottom:10px}}
@media(max-width:700px) and (max-height:720px){.scene-wrap{min-height:145px}.art-window{width:115px;min-height:140px;max-height:170px}.side-note{font-size:12px}.wish{font-size:13px;line-height:1.6}h1{font-size:39px}.stage{padding-top:62px}.chapter-nav{padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Blend complete scenes without sliding through the sprite sheet. */
.message{width:100%;transition:opacity 180ms ease,transform 420ms cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.message.leaving{opacity:0;transform:translate3d(0,-5px,0)}
.measure-message{position:absolute!important;visibility:hidden!important;pointer-events:none;min-height:0!important;top:0;left:0;transition:none!important}
.side-note,.scene-caption{transition:opacity 180ms ease}.side-note.leaving,.scene-caption.leaving{opacity:0}
.art-layer{position:absolute;inset:0;opacity:0;transform:translate3d(12px,0,0) scale(.985);transition:opacity 650ms ease,transform 850ms cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.art-layer.visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.art{animation:amble 3.6s ease-in-out infinite;backface-visibility:hidden;will-change:transform;transition:none}
.art[data-pose="1"]{animation:work 3.2s ease-in-out infinite}
.art[data-pose="2"]{animation:lift 3.4s ease-in-out infinite}
.art[data-pose="3"]{animation:breathe 4.8s ease-in-out infinite}
.art[data-pose="4"]{animation:nibble 3.6s ease-in-out infinite}
.art[data-pose="5"]{animation:strong 4s ease-in-out infinite}
@keyframes amble{0%,100%{transform:translate3d(-3px,0,0) rotate(-.5deg)}50%{transform:translate3d(3px,-4px,0) rotate(.5deg)}}
@keyframes lift{0%,100%{transform:translate3d(0,2px,0) scaleY(.99)}50%{transform:translate3d(0,-4px,0) scaleY(1.01)}}
@keyframes strong{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.chapter-nav button{transition:color 300ms ease}.chapter-nav i{transition:background 400ms ease}
@media(prefers-reduced-motion:reduce){.message,.art-layer,.art,.side-note,.scene-caption{animation:none!important;transition:none!important;transform:none!important}}