@charset "UTF-8";
:root{--paper:#f9f6ef;--ink:#38463d;--muted:#777c6e;--coral:#b96351;--line:#e4e3d7;--green:#53674f;--serif:Georgia,'Times New Roman',serif;--sans:'Avenir Next',Avenir,'Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E");z-index:10}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button{color:inherit}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #8b643e;outline-offset:5px}button:disabled{opacity:.65}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.page-shell{max-width:1320px;margin:auto;padding:0 64px}.site-header{height:78px;display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid var(--line)}.sound-button{display:flex;align-items:center;gap:9px;border:1px solid #dedfd2;padding:10px 15px;background:transparent;border-radius:24px;font-size:11px;min-height:42px}.sound-button:hover{background:#edeee3}.sound-button svg{width:16px;height:16px;display:block}.intro{text-align:center;padding:43px 0 33px}.eyebrow{font-size:9px;letter-spacing:2.7px;font-weight:600;line-height:1.5}.intro .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px;color:#81856d}.eyebrow>span:not(.eyebrow){width:26px;height:1px;background:#b5b69a}h1{font-family:var(--serif);font-size:clamp(48px,5.3vw,76px);font-weight:400;letter-spacing:-3.3px;line-height:1.01;margin:0;position:relative;display:inline-block}h1 em{color:var(--coral);font-weight:400}em{font-weight:400}.heading-heart{position:absolute;width:48px;height:48px;right:-63px;bottom:12px;color:var(--coral);transform:rotate(9deg)}.intro-copy{color:var(--muted);font-size:12px;letter-spacing:.2px;line-height:1.7;margin:22px 0 0}.story{max-width:1192px;margin:auto}.scene{height:444px;border-radius:22px;position:relative;overflow:hidden;isolation:isolate;background:#d5debf;box-shadow:0 10px 30px #32463508}.art{position:absolute;inset:0}.forest-svg{width:100%;height:100%;display:block}.scene-shade{position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#2e483855);pointer-events:none}.caption{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:min(90%,670px);color:#fff9e9;font-family:var(--serif);font-size:22px;line-height:1.45;text-align:center;text-shadow:0 2px 12px #273f32a6;z-index:3;transition:opacity .3s;white-space:pre-line}.caption.caption-enter{animation:caption-in .7s both}.scene-corner{position:absolute;right:28px;bottom:26px;color:#f8f5dfc2;font-size:24px}.story-controls{min-height:93px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative}.control-note{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;flex:1}.tiny-leaf{font-size:24px;color:#788166;transform:rotate(-25deg)}.primary-button{border:1px solid var(--green);background:var(--green);color:#fffdf0;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:15px 25px;min-height:48px;border-radius:30px;font-size:12px;letter-spacing:.2px;box-shadow:0 4px 9px #364c3610;transition:transform .2s,background .2s}.primary-button:hover{background:#42553f;transform:translateY(-2px)}.primary-button svg{width:14px;height:14px}.text-button{border:0;background:transparent;padding:10px 0;color:#777c6d;font-size:10px;letter-spacing:.3px;min-height:44px}.text-button:hover{color:var(--coral)}.text-button span{padding-left:8px;font-size:14px}.skip-button{flex:1;text-align:right}.chapters{list-style:none;display:flex;justify-content:center;gap:35px;padding:27px 0 30px;margin:0;border-top:1px solid var(--line)}.chapters li{display:flex;align-items:center;gap:12px;color:#929586;font-size:10px;letter-spacing:.3px}.chapter-number{font-size:9px;font-weight:500;display:grid;place-items:center;width:25px;height:25px;border:1px solid #dcdfd2;border-radius:50%}.chapters li.active{color:#5a6d51}.chapters li.active .chapter-number{background:#e7ebdf;border-color:#e7ebdf}.chapters li.done .chapter-number{background:#6d805e;color:#fff;border-color:#6d805e}.chapters li i{height:1px;width:64px;background:#dbdfd0;margin-left:18px}.chapters svg{width:19px;height:19px;color:#b26b57;margin-left:4px}footer{display:flex;align-items:center;justify-content:space-between;padding:0 0 24px;color:#909181;font-size:9px;letter-spacing:.3px}.footer-heart{color:var(--coral);font-size:14px;padding-left:5px}
/* The scene remains one illustration; its layers act out the story. */
.tree{transform-box:fill-box;transform-origin:50% 100%;animation:tree-sway 8s ease-in-out infinite alternate}.tree-1{animation-delay:-3s}.tree-2{animation-delay:-5s}.car-position{transform:translate(480px,270px) scale(.84)}.car{transform-origin:center}.bird{animation:bird-drift 7s ease-in-out infinite alternate}.bird-2{animation-delay:-3s}.bird-3{animation-delay:-5s}.bird-4{animation-delay:-4s}.floating-motes{animation:motes 7s ease-in-out infinite alternate}.hikers{opacity:0;transition:opacity 1.3s}.hiker-body{transform-box:fill-box;transform-origin:center bottom}.talking-hand{transform-box:fill-box;transform-origin:center;animation:talking-gesture 2.3s ease-in-out infinite}.talking-mouth{transform-box:fill-box;transform-origin:center;animation:talking-mouth 1.6s ease-in-out infinite}.scene[data-stage="HORN_REACTION"] .talking-hand,.scene[data-stage="HORN_REACTION"] .talking-mouth{animation:none}.hiker-2 .hiker-body{animation:hiker-chat 3s ease-in-out infinite}.hiker-3 .hiker-body{animation:hiker-chat 4s ease-in-out infinite reverse}.hiker-4 .hiker-body{animation:hiker-chat 3.5s -1s ease-in-out infinite}.hiker-5 .hiker-body{animation:hiker-chat 4.5s -2s ease-in-out infinite reverse}.surprise-mark{opacity:0}.blush{opacity:.4}.car-hearts,.sunset-sky{opacity:0;transition:opacity 2s}.comic-horn{display:none;position:absolute;top:22%;left:50%;z-index:7;transform:translateX(-50%) rotate(-9deg);font-family:var(--sans);font-size:clamp(44px,7vw,92px);letter-spacing:-4px;font-weight:900;font-style:italic;color:#fff2bf;-webkit-text-stroke:2px #62483c;filter:drop-shadow(5px 6px 0 #aa675b);white-space:nowrap}.comic-horn>span{position:absolute;font-size:55px;right:-28px;top:-30px;transform:rotate(20deg)}.falling-leaf{display:none;position:absolute;left:57%;top:17%;font-size:35px;color:#aa9054;z-index:3}.horn-control{display:flex;align-items:center;gap:14px;padding:14px 0;color:var(--green)}.horn-button{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#f9f3dd;border:1px solid #e8e5c4;box-shadow:0 0 0 9px #fff4cb26,0 8px 30px #29483544;color:#526c59;animation:horn-pulse 2.5s ease-in-out infinite}.horn-button svg{width:52px;height:52px}.horn-control>span{font-size:12px;font-weight:500;letter-spacing:.5px;white-space:nowrap}.horn-control>span>span{margin-left:7px}.scene[data-stage="HIKERS"] .hikers,.scene[data-stage="WAIT_FOR_HORN"] .hikers,.scene[data-stage="HORN_REACTION"] .hikers,.scene[data-stage="GIFT_REVEAL"] .hikers,.scene[data-stage="WAIT_FOR_GIFT"] .hikers{opacity:1}.scene[data-stage="HORN_REACTION"] .comic-horn{display:block;animation:comic-pop 2.5s both}.scene[data-stage="HORN_REACTION"] .bird{animation:birds-flee 1s .2s forwards}.scene[data-stage="HORN_REACTION"] .hiker-far .hiker-body{animation:startled-far 1.25s var(--reaction-delay) both}.scene[data-stage="HORN_REACTION"] .hiker-near .hiker-body{animation:startled-near 1.25s var(--reaction-delay) both}.scene[data-stage="GIFT_REVEAL"] .hiker-body,.scene[data-stage="WAIT_FOR_GIFT"] .hiker-body{translate:var(--exit-x) var(--exit-y);animation:none}.scene[data-stage="HORN_REACTION"] .surprise-mark{animation:surprise 1.5s .2s both}.scene[data-stage="HORN_REACTION"] .car{animation:car-startle .7s both}.scene[data-stage="HORN_REACTION"] .blush{opacity:1}.scene[data-stage="HORN_REACTION"] .dog-head{transform:rotate(-12deg);transform-box:fill-box;transform-origin:center}.scene[data-stage="HORN_REACTION"] .dog-ear{transform:rotate(20deg);transform-box:fill-box;transform-origin:top right}.scene[data-stage="HORN_REACTION"] .falling-leaf{display:block;animation:leaf-fall 5s 1.1s both}.scene[data-stage="GIFT_REVEAL"] .art,.scene[data-stage="WAIT_FOR_GIFT"] .art,.scene[data-stage="GIFT_OPEN"] .art{filter:blur(2px) brightness(.86);transform:scale(1.04);transition:filter 2s,transform 2s}.scene[data-stage="GIFT_REVEAL"] .caption,.scene[data-stage="WAIT_FOR_GIFT"] .caption{bottom:38px}.gift-button{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:6;appearance:none;border:0;background:none;color:#fff6dc;padding:30px 35px 0;animation:gift-float 3s ease-in-out infinite}.gift-button:disabled{opacity:1}.gift-illustration{display:block;position:relative;width:112px;height:105px;filter:drop-shadow(0 0 28px #fff1bd9c)}.gift-box{position:absolute;inset:31px 7px 0;background:#efd3ad;border-radius:2px 2px 7px 7px;box-shadow:inset -12px 0 #dfb98a}.gift-box::after{content:"";position:absolute;left:40%;width:20%;height:100%;background:#b96859}.gift-lid{position:absolute;left:0;right:0;top:22px;height:23px;background:#f4ddba;border-radius:4px;z-index:2;box-shadow:0 4px 0 #a67c4c1a}.gift-lid::after{content:"";position:absolute;left:41%;width:18%;height:100%;background:#c67d69}.gift-bow{position:absolute;left:50%;top:17px;width:60px;height:32px;transform:translate(-50%,-50%);z-index:3}.gift-bow::before,.gift-bow::after{content:"";position:absolute;top:0;width:29px;height:21px;border:7px solid #c67d69;border-radius:60% 60% 0 60%;transform:rotate(20deg)}.gift-bow::before{left:0}.gift-bow::after{right:0;transform:rotate(80deg)}.gift-sparkles{position:absolute;top:0;left:0;width:100%;font-size:35px;letter-spacing:40px;white-space:nowrap;animation:twinkle 2s infinite alternate}.gift-sparkles i{font-size:18px;font-style:normal;position:relative;top:-25px}.gift-label{display:block;font-size:13px;margin-top:24px;letter-spacing:.6px}.gift-label span{margin-left:8px}.scene[data-stage="GIFT_OPEN"] .gift-button{animation:gift-shake .5s both}.scene[data-stage="GIFT_OPEN"] .gift-lid,.scene[data-stage="GIFT_OPEN"] .gift-bow{animation:lid-open 1.5s .5s forwards}.scene[data-stage="GIFT_OPEN"] .gift-label{opacity:0}.confetti{position:absolute;inset:0;pointer-events:none;z-index:8}.confetti i{position:absolute;left:50%;top:43%;font-size:22px;font-style:normal;color:var(--coral);animation:confetti 2.5s var(--delay) both;transform-origin:center}.birthday-wrap{padding:23px 0 35px;text-align:center;animation:card-open 1s both}.birthday-card{position:relative;max-width:760px;margin:auto;background:#fffdf7;border:1px solid #e9e0cc;padding:59px 74px 45px;box-shadow:0 12px 35px #65574009,5px 5px 0 -1px #f2edde,5px 5px 0 0 #e9e2d1;text-align:center}.birthday-card .eyebrow{color:#a4916d;font-size:8px}.birthday-card h2{font-family:var(--serif);font-size:48px;font-weight:400;line-height:1.15;letter-spacing:-1.5px;margin:20px 0 30px;overflow-wrap:anywhere}.birthday-card h2 em{color:var(--coral)}.message{font-family:var(--serif);font-size:18px;line-height:1.9;overflow-wrap:anywhere}.message p{margin:0 0 20px;animation:paragraph-in 1s both;white-space:pre-line}.message p:nth-child(2){animation-delay:.2s}.message p:nth-child(3){animation-delay:.4s}.message p:nth-child(4){animation-delay:.6s}.signature{margin-top:24px;font-family:var(--serif);font-style:italic;font-size:21px;color:var(--coral);overflow-wrap:anywhere}.signature>span:last-child{display:block;margin-top:10px;font-style:normal;font-size:28px}.card-flower{position:absolute;font-size:64px;line-height:1;color:#b9bc91;opacity:.7}.flower-left{left:18px;top:18px;transform:rotate(-20deg)}.flower-right{right:18px;bottom:18px;transform:rotate(20deg)}.ending-button{margin-top:31px}.scene[data-stage="BIRTHDAY_CARD"]{height:250px;transition:height 1s}.scene[data-stage="BIRTHDAY_CARD"] .car-hearts{opacity:1}.scene[data-stage="BIRTHDAY_CARD"] .caption{bottom:20px}.scene[data-stage="ENDING"] .sunset-sky{opacity:.8}.scene[data-stage="ENDING"] .car-position{transform:translate(1030px,270px) scale(.84);transition:transform 7s ease-in-out}.scene[data-stage="ENDING"] .car-hearts{opacity:1;animation:motes 3s infinite alternate}.scene[data-stage="ENDING"] .light-rays{opacity:.24}.ending-copy{position:absolute;top:21%;left:6%;z-index:3;color:#40513d;max-width:370px;animation:paragraph-in 1.5s both}.ending-copy .eyebrow{font-size:8px;letter-spacing:1.5px}.ending-copy h2{font-family:var(--serif);font-size:44px;font-weight:400;letter-spacing:-1.7px;line-height:1.2;margin:17px 0}.ending-copy h2 em{color:#a85c48}.postscript{max-width:560px;text-align:center;margin:0 auto 14px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.7;color:#84816c;animation:paragraph-in 1s both}.read-again{display:block;margin:0 auto 20px}.story[data-view="BIRTHDAY_CARD"] .story-controls{min-height:68px}.story[data-view="ENDING"] .control-note{flex:unset}
/* Approach, decelerate, wait, then offer the horn. Durations come from Story. */
.scene{--car-start:330px;--car-cruise:430px;--wheel-cruise:207deg;--wheel-stop:310deg;--brake-ease:cubic-bezier(.3,.45,.55,1)}
.scene[data-stage="INTRO"] .car-position{transform:translate(var(--car-start),270px) scale(.84)}
.scene[data-stage="FOREST"] .car-position{transform:translate(var(--car-cruise),270px) scale(.84);animation:car-approach var(--drive-duration) linear both}
.scene[data-stage="HIKERS"] .car-position{animation:car-brake var(--brake-duration) var(--brake-ease) both}
.scene[data-stage="FOREST"] .car{animation:car-idle 1.2s ease-in-out infinite}
.scene[data-stage="HIKERS"] .car{animation:braking-settle var(--brake-duration) ease-out both}
.wheel{transform-box:fill-box;transform-origin:center;rotate:var(--wheel-stop)}
.scene[data-stage="INTRO"] .wheel{rotate:0deg}
.scene[data-stage="FOREST"] .wheel{animation:wheel-drive var(--drive-duration) linear both}
.scene[data-stage="HIKERS"] .wheel{animation:wheel-brake var(--brake-duration) var(--brake-ease) both}
.scene[data-stage="INTRO"] .hikers,.scene[data-stage="FOREST"] .hikers,.scene[data-stage="DRIVER_WAIT"] .hikers{opacity:1}
.driver-frustration,.driver-frustrated-face{opacity:0}
.scene:is([data-stage="DRIVER_WAIT"],[data-stage="WAIT_FOR_HORN"],[data-stage="HORN_REACTION"],[data-stage="DRIVE_PAST"]) .driver-frustration,.scene:is([data-stage="DRIVER_WAIT"],[data-stage="WAIT_FOR_HORN"],[data-stage="HORN_REACTION"],[data-stage="DRIVE_PAST"]) .driver-frustrated-face{opacity:1;transition:opacity .4s .6s}
.scene:is([data-stage="DRIVER_WAIT"],[data-stage="WAIT_FOR_HORN"],[data-stage="HORN_REACTION"],[data-stage="DRIVE_PAST"]) .driver-smile{opacity:0}
.scene:is([data-stage="DRIVER_WAIT"],[data-stage="WAIT_FOR_HORN"],[data-stage="HORN_REACTION"],[data-stage="DRIVE_PAST"]) .frustration-flash{transform-box:fill-box;transform-origin:center;animation:frustration-flash 1.8s .6s ease-in-out infinite both}
.frustration-flash:nth-child(2){animation-delay:.8s!important}.frustration-flash:nth-child(3){animation-delay:1s!important}
.scene.is-paused *{animation-play-state:paused!important}
/* Wait for the jump to finish, then pass the hikers with the camera following. */
.scene:is([data-stage="DRIVE_PAST"],[data-stage="GIFT_REVEAL"],[data-stage="WAIT_FOR_GIFT"],[data-stage="GIFT_OPEN"]) .car-position{transform:translate(980px,270px) scale(.84)}
.scene:is([data-stage="DRIVE_PAST"],[data-stage="GIFT_REVEAL"],[data-stage="WAIT_FOR_GIFT"],[data-stage="GIFT_OPEN"]) .passing-camera{transform:translateX(var(--passing-camera-shift,0px))}
.scene[data-stage="DRIVE_PAST"] .car-position{animation:car-pass var(--pass-duration) ease-in-out both}
.scene[data-stage="DRIVE_PAST"] .passing-camera{animation:camera-follow var(--pass-duration) ease-in-out both}
.scene[data-stage="DRIVE_PAST"] .car{animation:car-idle .9s ease-in-out infinite}
.scene[data-stage="DRIVE_PAST"] .wheel{animation:wheel-pass var(--pass-duration) ease-in-out both}
.scene:is([data-stage="DRIVE_PAST"],[data-stage="GIFT_REVEAL"],[data-stage="WAIT_FOR_GIFT"],[data-stage="GIFT_OPEN"]) .hikers{opacity:1}
.scene:is([data-stage="DRIVE_PAST"],[data-stage="GIFT_REVEAL"],[data-stage="WAIT_FOR_GIFT"],[data-stage="GIFT_OPEN"]) .hiker-body{translate:var(--exit-x) var(--exit-y);animation:none}
.scene:is([data-stage="DRIVE_PAST"],[data-stage="GIFT_REVEAL"],[data-stage="WAIT_FOR_GIFT"],[data-stage="GIFT_OPEN"]) :is(.talking-hand,.talking-mouth){animation:none}
.scene[data-stage="DRIVE_PAST"] .bird{opacity:0;animation:none}
.passenger-shocked-face,.dog-shocked-face,.passenger-shock-marks,.driver-speech{opacity:0}
.scene:is([data-stage="HORN_REACTION"],[data-stage="DRIVE_PAST"]) :is(.passenger-shocked-face,.dog-shocked-face,.passenger-shock-marks){opacity:1}
.scene:is([data-stage="HORN_REACTION"],[data-stage="DRIVE_PAST"]) :is(.passenger-calm-eyes,.passenger-smile){opacity:0}
.scene[data-stage="DRIVE_PAST"] .dog-head{transform:rotate(-12deg);transform-box:fill-box;transform-origin:center}
.scene[data-stage="DRIVE_PAST"] .dog-ear{transform:rotate(20deg);transform-box:fill-box;transform-origin:top right}
.scene[data-stage="DRIVE_PAST"] .driver-speech{opacity:1;animation:speech-appear .45s .35s both}
@keyframes car-pass{from{transform:translate(480px,270px) scale(.84)}to{transform:translate(980px,270px) scale(.84)}}
@keyframes camera-follow{from{transform:translateX(0)}to{transform:translateX(var(--passing-camera-shift,0px))}}
@keyframes wheel-pass{from{rotate:var(--wheel-stop)}to{rotate:calc(var(--wheel-stop) + 1034deg)}}
@keyframes speech-appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes car-approach{from{transform:translate(var(--car-start),270px) scale(.84)}to{transform:translate(var(--car-cruise),270px) scale(.84)}}
@keyframes car-brake{from{transform:translate(var(--car-cruise),270px) scale(.84)}to{transform:translate(480px,270px) scale(.84)}}
@keyframes wheel-drive{from{rotate:0deg}to{rotate:var(--wheel-cruise)}}
@keyframes wheel-brake{from{rotate:var(--wheel-cruise)}to{rotate:var(--wheel-stop)}}
@keyframes braking-settle{0%{translate:0 0;rotate:0deg}25%{translate:0 1px;rotate:.6deg}100%{translate:0 0;rotate:0deg}}
@keyframes frustration-flash{0%,100%{opacity:.2;scale:.8}35%,65%{opacity:1;scale:1.08}}
@media(max-width:640px){.scene{--car-start:420px;--car-cruise:460px;--wheel-cruise:83deg;--wheel-stop:124deg}}
@keyframes tree-sway{from{rotate:-.4deg}to{rotate:.4deg}}@keyframes car-idle{50%{translate:0 -2px;rotate:-.25deg}}@keyframes bird-drift{to{translate:25px -10px}}@keyframes motes{to{translate:0 -15px;opacity:.5}}@keyframes talking-gesture{50%{rotate:var(--hand-turn)}}@keyframes talking-mouth{0%,35%,100%{scale:1 .4}60%,80%{scale:1 1.3}}@keyframes hiker-chat{50%{rotate:3deg}}@keyframes caption-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}@keyframes horn-pulse{50%{box-shadow:0 0 0 15px #fff4cb0a,0 8px 30px #29483544;scale:1.04}}@keyframes comic-pop{0%{opacity:0;scale:.4}20%{opacity:1;scale:1.1}35%,65%{opacity:1;scale:1}100%{opacity:0;scale:1.1}}@keyframes birds-flee{to{translate:160px -250px;opacity:0}}@keyframes startled-far{0%{translate:0 0}25%{translate:-8px -44px;rotate:-12deg}45%{translate:-12px -35px}100%{translate:var(--exit-x) var(--exit-y);rotate:0deg}}@keyframes startled-near{0%{translate:0 0}25%{translate:6px -35px;rotate:12deg}45%{translate:10px 30px}100%{translate:var(--exit-x) var(--exit-y);rotate:0deg}}@keyframes surprise{10%,65%{opacity:1}100%{opacity:0}}@keyframes car-startle{20%{translate:0 -5px;rotate:-1deg}45%{translate:0 1px;rotate:1deg}100%{translate:0 0}}@keyframes laugh{to{translate:0 -2px;rotate:2deg}}@keyframes leaf-fall{0%{opacity:0;translate:0 0;rotate:0deg}10%{opacity:1}80%{opacity:1}100%{translate:-30px 210px;rotate:160deg;opacity:0}}@keyframes gift-float{50%{translate:0 -10px}}@keyframes twinkle{to{opacity:.5}}@keyframes gift-shake{20%,60%{rotate:-6deg}40%,80%{rotate:6deg}100%{rotate:0deg}}@keyframes lid-open{to{translate:12px -110px;rotate:20deg;opacity:0}}@keyframes confetti{0%{opacity:0;translate:0 0}10%{opacity:1}100%{translate:var(--x) var(--y);rotate:var(--rotation);opacity:0}}@keyframes card-open{from{opacity:0;transform:perspective(1000px) rotateX(-8deg) translateY(18px)}to{opacity:1;transform:none}}@keyframes paragraph-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@media(min-width:1500px){.page-shell{max-width:1420px}.scene{height:480px}.intro{padding-top:48px}}
@media(max-width:950px){.page-shell{padding:0 35px}.scene{height:420px}.site-header{height:70px}.intro{padding-top:36px}h1{font-size:64px}.control-note{font-size:10px}.chapters{gap:20px}.chapters li i{width:35px;margin-left:8px}.ending-copy{left:5%;max-width:260px}.ending-copy h2{font-size:36px}}
@media(max-width:640px){.horn-control{grid-column:1/-1;justify-self:center;order:1;padding:4px 0 18px}.horn-button{width:58px;height:58px}.horn-button svg{width:48px;height:48px}.page-shell{padding:0 20px}.site-header{height:64px}.sound-button{font-size:9px;padding:8px 11px;gap:7px;min-height:38px}.sound-button svg{width:14px}.intro{padding:32px 0 26px}.intro .eyebrow{font-size:7px;letter-spacing:2px;margin-bottom:16px;gap:9px}.intro .eyebrow>span{width:20px}h1{font-size:52px;letter-spacing:-2.2px;line-height:1.03}.heading-heart{right:0;bottom:8px;width:29px;height:29px}.intro-copy{font-size:10px;max-width:270px;margin:18px auto 0;line-height:1.8}.scene{height:clamp(280px,82vw,388px);border-radius:16px}.caption{font-size:19px;bottom:25px;width:86%;line-height:1.45}.scene-corner{right:15px;bottom:14px;font-size:19px}.story-controls{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:20px 0 16px}.control-note{grid-column:1/-1;justify-content:center;font-size:10px;margin-bottom:15px;order:2}.story-controls .primary-button{grid-column:1/-1;justify-self:center;padding:14px 25px;min-width:204px;margin-bottom:12px;order:1}.skip-button{grid-column:1/-1;text-align:center;justify-self:center;order:3;min-height:36px;font-size:9px}.story-controls #replay-button{grid-column:1/-1;justify-self:center;order:3}.story-controls:has(#start-button[hidden]){padding-top:14px;padding-bottom:8px}.story-controls:has(#start-button[hidden]) .control-note{margin-bottom:0}.chapters{gap:11px;padding:23px 0 25px;justify-content:space-between}.chapters li{font-size:8px;gap:6px;letter-spacing:0}.chapter-number{width:21px;height:21px;font-size:7px}.chapters li i{display:none}.chapters svg{width:13px;height:13px;margin-left:0}footer{font-size:8px;padding-bottom:16px;gap:10px}.comic-horn{font-size:49px;letter-spacing:-3px;top:27%;-webkit-text-stroke:1px #62483c}.comic-horn>span{font-size:30px;right:-14px;top:-20px}.scene[data-stage="GIFT_REVEAL"] .caption,.scene[data-stage="WAIT_FOR_GIFT"] .caption{font-size:18px;bottom:30px}.gift-button{top:41%}.scene[data-stage="BIRTHDAY_CARD"]{height:185px}.scene[data-stage="BIRTHDAY_CARD"] .scene[data-stage="BIRTHDAY_CARD"] .caption{font-size:18px}.birthday-wrap{padding-top:12px}.birthday-card{padding:44px 25px 32px}.birthday-card h2{font-size:37px;letter-spacing:-1px;margin:21px 0 25px}.birthday-card .eyebrow{font-size:7px;letter-spacing:1.8px}.message{font-size:16px;line-height:1.9}.card-flower{font-size:40px}.flower-left{left:10px;top:10px}.flower-right{right:10px;bottom:10px}.signature{font-size:19px}.ending-button{font-size:10px;padding:14px 20px}.scene[data-stage="ENDING"]{height:430px}.ending-copy{top:21%;left:0;width:100%;max-width:none;text-align:center}.ending-copy h2{font-size:37px}.ending-copy .eyebrow{font-size:7px}.scene[data-stage="ENDING"] .car-position{transform:translate(655px,270px) scale(.84)}.postscript{font-size:12px;padding:5px 14px}}
@media(max-width:640px){.caption[data-long="true"]{top:22px;bottom:auto;font-size:16px;line-height:1.45;width:90%;color:#3e503f;text-shadow:0 1px 4px #fff5d8a6}}
@media(min-width:641px){.story[data-view="INTRO"] .story-controls:has(.control-note[hidden])::before{content:"";flex:1}}
@media(max-width:360px){.page-shell{padding:0 14px}h1{font-size:46px}.heading-heart{width:24px;right:0}.scene{height:280px}.caption{font-size:17px;width:90%;bottom:18px}.chapters{gap:5px}.chapters li{font-size:7px;gap:4px}}
@media(max-height:520px) and (orientation:landscape){.site-header{height:65px}.intro{padding:20px 0}.intro h1{font-size:44px}.intro-copy{margin-top:12px}.scene{height:330px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene[data-stage="HORN_REACTION"] .comic-horn{display:block;opacity:1}.scene[data-stage="HORN_REACTION"] .falling-leaf{display:none}.scene[data-stage="HORN_REACTION"] .hiker-body{translate:var(--exit-x) var(--exit-y)}.scene[data-stage="GIFT_OPEN"] .gift-lid,.scene[data-stage="GIFT_OPEN"] .gift-bow{translate:0 -35px}.scene[data-stage="GIFT_OPEN"] .confetti{display:none}}