:root{--paper:#eee2c8;--ink:#182938;--white:#fffaf0;--night:#192733;--focus:#ffe6a1;--nav:76px;--stage:calc(100svh - var(--nav));--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{background:var(--ink);scroll-padding-top:var(--nav)}body{font-family:var(--font);background:var(--ink);color:var(--white);-webkit-font-smoothing:antialiased}figure,p,h1{margin:0}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}[hidden]{display:none!important}.skip{position:fixed;left:16px;top:-100px;z-index:80;background:var(--ink);padding:12px}.skip:focus{top:14px}
.site-nav{height:var(--nav);position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#182938f2;border-bottom:1px solid #fffaf025;backdrop-filter:blur(16px);gap:24px}.nav-brand{font-size:21px;font-weight:650;white-space:nowrap;letter-spacing:-.03em}.nav-right{display:flex;gap:28px;align-items:center}.nav-tagline{font-size:15px;letter-spacing:.04em}.download-menu{position:relative}#download-toggle{border:1px solid #fffaf066;color:var(--white);background:none;padding:10px 18px;border-radius:5px;cursor:pointer;white-space:nowrap;font-size:14px}#download-toggle:hover,#download-toggle[aria-expanded=true]{background:var(--white);color:var(--ink)}#download-popover{position:absolute;right:0;top:calc(100% + 14px);padding:18px;background:var(--white);color:var(--ink);border-radius:8px;box-shadow:0 12px 40px #0005;width:216px}#download-popover img{width:180px;height:180px}#download-popover span{display:block;text-align:center;font-size:13px;margin-top:12px}#film{padding-top:var(--nav)}
.shot{height:var(--stage);position:relative;overflow:hidden}.shot figure{width:100%;height:100%;position:relative}.scene-art{width:100%;height:100%;object-fit:cover;object-position:center}.opening-shot .scene-art{object-fit:contain}
.discovery-sequence{height:600svh;position:relative}.discovery-sticky,.walk-sticky,.kitchen-sticky{position:sticky;top:var(--nav);height:var(--stage);overflow:hidden;background:var(--night)}.discovery-scene,.phone-scene,.walk-sticky figure{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.discovery-scene .scene-art{transform-origin:45% 45%;will-change:transform}.thinking-scene{z-index:1}.idea-scene{z-index:2;opacity:0}.phone-scene{z-index:3;opacity:0;display:grid;place-items:center;background:var(--night)}.phone-closeup{position:relative;width:min(calc(var(--stage) * 2 / 3),100vw);height:min(var(--stage),150vw);isolation:isolate;transform-origin:center center}.phone-frame{width:100%;height:100%;object-fit:contain}.phone-ui{position:absolute;left:var(--screen-left);top:var(--screen-top);width:var(--screen-width);height:var(--screen-height);overflow:hidden;border-radius:9% / 4%;container-type:inline-size;background:#f9f6ed;isolation:isolate}.home-screen,.recipe-screen{position:absolute;inset:0}.home-screen{background:#25394a;color:#fffaf0}.phone-status{display:flex;justify-content:space-between;align-items:center;padding:5cqw 8cqw 3cqw;font:650 4cqw/1 var(--font);height:15cqw}.phone-status i{width:30cqw;height:7cqw;border-radius:9cqw;background:#101419}.widget-tap{display:block;width:88%;margin:10cqw auto 0;padding:0;border:0;background:none;border-radius:7cqw;cursor:pointer}.widget-tap img{width:100%;height:auto;border-radius:7cqw}.home-label{display:block;text-align:center;font-size:3.2cqw;margin-top:2cqw}.home-icon{width:22cqw;margin:13cqw 8cqw 0;display:flex;flex-direction:column;align-items:center;gap:2cqw;white-space:nowrap}.home-icon img{width:18cqw;border-radius:4cqw}.home-icon span{font-size:3cqw}.home-line{position:absolute;bottom:3cqw;left:35%;width:30%;height:1.4cqw;border-radius:2cqw;background:#172331;pointer-events:none;z-index:5}.recipe-screen{background:#f9f6ed;color:#172331;opacity:0;pointer-events:none;display:flex;flex-direction:column}.recipe-screen.is-active{opacity:1;pointer-events:auto}.native-status{flex-shrink:0;background:#f9f6ed}.recipe-heading{font-size:5cqw;padding:2cqw 6cqw 4cqw;flex-shrink:0;background:#f9f6ed}.recipe-viewport{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding-bottom:9cqw}.recipe-viewport::-webkit-scrollbar{display:none}.recipe-long{width:100%;height:auto;max-width:none}
.walk-sequence{height:290svh;position:relative}.walk-wide{z-index:1}.walk-near{z-index:2;opacity:0}.walk-decision{z-index:3;opacity:0}.walk-wide .scene-art,.walk-near .scene-art{transform-origin:36% 38%}.walk-decision .scene-art{transform-origin:48% 40%}.kitchen-sequence{height:330svh;position:relative}.kitchen-track{position:relative;width:100%;height:100%}.kitchen-panel{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:var(--night)}.kitchen-panel+.kitchen-panel{clip-path:inset(0 0 0 100%)}.kitchen-panel .scene-art{object-fit:contain}.photo-shot .scene-art{object-position:center 58%}
@media(max-width:700px){:root{--nav:92px}.site-nav{padding:12px 20px;align-items:flex-start}.nav-brand{font-size:19px;padding-top:3px}.nav-right{gap:0}.nav-tagline{position:absolute;left:20px;bottom:12px;font-size:12px;letter-spacing:.035em}#download-toggle{font-size:12px;padding:8px 12px}#download-popover{top:calc(100% + 40px)}.shot{height:auto}.shot figure{aspect-ratio:3/2}.shot .scene-art{object-fit:contain}.discovery-sequence{height:520svh}.discovery-scene .scene-art,.walk-sticky .scene-art{object-fit:contain}.kitchen-sequence{height:290svh}.walk-sequence{height:250svh}}
body:not(.has-motion) .discovery-sequence,body:not(.has-motion) .walk-sequence,body:not(.has-motion) .kitchen-sequence,body:not(.has-motion) .discovery-sticky,body:not(.has-motion) .walk-sticky,body:not(.has-motion) .kitchen-sticky,body:not(.has-motion) .discovery-scene,body:not(.has-motion) .phone-scene,body:not(.has-motion) .walk-sticky figure,body:not(.has-motion) .kitchen-panel{position:relative;height:auto;opacity:1!important;clip-path:none!important;pointer-events:auto!important}body:not(.has-motion) .scene-art{height:auto;transform:none!important}body:not(.has-motion) .phone-closeup{transform:none!important}body:not(.has-motion) .kitchen-track{height:auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Portrait screens keep the story edge-to-edge inside each pinned scene. */
@media(max-width:700px){.discovery-scene .scene-art,.walk-sticky .scene-art,.kitchen-panel .scene-art{object-fit:cover}.thinking-scene .scene-art{object-position:34% center}.idea-scene .scene-art{object-position:48% center}.walk-wide .scene-art,.walk-near .scene-art{object-position:35% center}.walk-decision .scene-art{object-position:48% center}}
/* Text and comic marks are independent vector/HTML layers over untouched art. */
.nav-brand{display:flex;flex-direction:column;gap:6px;align-items:flex-start;letter-spacing:0}.nav-title{font-size:21px;font-weight:650;letter-spacing:-.03em}.nav-tagline{position:static;font-size:11px;font-weight:400;letter-spacing:.055em;line-height:1.3;color:#fffaf0bd}.nav-right{gap:0}#download-toggle{display:flex;align-items:center;gap:6px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;padding:11px 20px;box-shadow:0 2px 0 #0002}#download-toggle:hover,#download-toggle[aria-expanded=true]{background:#f3f3f3;color:var(--ink)}
.comic-bubble{--bubble-fill:#fffaf0;position:absolute;top:9%;right:10%;width:max-content;max-width:40%;min-width:160px;z-index:8;isolation:isolate;color:var(--ink);font-size:clamp(18px,1.8cqw,27px);font-weight:800;line-height:1.5;text-align:center;letter-spacing:.025em;padding:26px 36px 48px;transform:rotate(-3deg);pointer-events:none;filter:drop-shadow(4px 5px 0 #182938b3)}.bubble-shape{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;z-index:-1;fill:var(--bubble-fill);stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.bubble-shape path,.bubble-shape ellipse{vector-effect:non-scaling-stroke}.bubble-text{position:relative;display:block}.bubble-thought{padding:30px 36px 52px;transform:rotate(2deg);font-weight:650}.bubble-burst{--bubble-fill:#ffe5a0;padding:38px 45px;transform:rotate(-5deg);font-size:clamp(22px,2.3cqw,34px)}.comic-spark{position:absolute;right:-14px;top:-19px;color:#ffe5a0;-webkit-text-stroke:2px var(--ink);font-size:42px;transform:rotate(10deg)}
.kitchen-panel .comic-bubble{top:7%;left:12%;right:auto;max-width:47%;font-size:clamp(17px,1.6cqw,24px);transform:rotate(-2deg)}.kitchen-panel:nth-child(even) .comic-bubble{left:auto;right:12%;transform:rotate(2deg)}
@media(max-width:700px){:root{--nav:80px}.site-nav{padding:12px 16px;align-items:center;gap:12px}.nav-brand{padding:0;gap:5px;min-width:0}.nav-title{font-size:18px}.nav-tagline{position:static;font-size:9px;white-space:nowrap;letter-spacing:0}#download-toggle{font-size:12px;padding:10px 13px;gap:3px}#download-popover{top:calc(100% + 14px)}.comic-bubble{font-size:16px;min-width:112px;max-width:72%;padding:17px 25px 34px;filter:drop-shadow(3px 3px 0 #182938a0)}.bubble-shape{stroke-width:2}.bubble-thought{padding:21px 28px 40px}.bubble-burst{font-size:21px;padding:26px 29px}.comic-spark{font-size:29px;right:-9px;top:-13px;-webkit-text-stroke:1.5px var(--ink)}.kitchen-panel .comic-bubble,.kitchen-panel:nth-child(even) .comic-bubble{top:7%;left:6%;right:auto;max-width:88%;font-size:16px;padding:20px 27px 38px}}
@media(max-width:360px){.site-nav{padding-inline:12px;gap:8px}.nav-title{font-size:16px}.nav-tagline{font-size:8px}#download-toggle{padding:10px 11px;font-size:11px}}
@media(max-width:700px){}
/* Shared scene plane keeps dialogue attached to the illustrated camera movement. */
.scene-plane{position:absolute;inset:0;width:100%;height:100%;transform-origin:36% 28%;will-change:transform}.scene-plane>.scene-art{transform:none!important}.walk-sticky .scene-plane{transform-origin:33% 28%}.thinking-scene .scene-plane{transform-origin:32% 24%}.idea-scene .scene-plane{transform-origin:48% 25%}body:not(.has-motion) .scene-plane{position:relative;transform:none!important;height:auto}
.apple-logo{display:block;width:17px;height:20px;flex:none}.phone-scene{isolation:isolate}.phone-atmosphere{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(55px) saturate(.85);opacity:.66;z-index:-2;pointer-events:none}.phone-scene:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#18293800 15%,#18293866 100%);z-index:-1;pointer-events:none}.phone-closeup{z-index:1}
.opening-shot .comic-bubble{top:13%;right:16%;min-width:175px}.thinking-scene .comic-bubble{top:8%;left:44%;right:auto;max-width:34%;font-size:clamp(17px,1.65cqw,25px)}.idea-scene .comic-bubble{top:12%;left:68%;right:auto;max-width:21%;min-width:150px}.walk-decision .comic-bubble{top:7%;left:60%;right:auto;max-width:28%;font-size:clamp(20px,1.9cqw,29px)}.fridge-shot .comic-bubble{top:6%;left:53%;right:auto;max-width:32%}.kitchen-panel:nth-child(4) .comic-bubble{font-size:clamp(22px,2.3cqw,34px);min-width:240px}.kitchen-panel.photo-panel .comic-bubble{top:10%;left:57%;right:auto;max-width:28%;min-width:180px;transform:rotate(-3deg)}.kitchen-sequence{height:400svh}
@media(max-width:700px){.apple-logo{width:14px;height:17px}.opening-shot .comic-bubble{top:3%;right:10%;min-width:110px;font-size:14px;padding:11px 20px 25px}.thinking-scene .comic-bubble{top:2%;left:auto;right:5%;max-width:57%;font-size:14px;padding:18px 21px 36px}.idea-scene .comic-bubble{top:2%;left:auto;right:7%;max-width:40%;min-width:120px;font-size:20px;padding:25px 25px}.walk-decision .comic-bubble{top:2%;left:auto;right:7%;max-width:54%;min-width:0;font-size:17px;padding:25px 27px}.fridge-shot .comic-bubble{top:0;left:53%;right:auto;max-width:44%;font-size:12px;padding:15px 20px 30px}.kitchen-panel:nth-child(4) .comic-bubble{min-width:168px;font-size:23px;padding:27px 32px}.kitchen-panel.photo-panel .comic-bubble{top:12%;left:51%;right:auto;max-width:45%;min-width:0;font-size:15px;padding:17px 23px 34px}.kitchen-panel.photo-panel .scene-art{object-position:43% center}.kitchen-sequence{height:360svh}.phone-atmosphere{filter:blur(34px)}}
/* Reserve room for the maximum shared zoom, including the balloon's outline. */
@media(max-width:700px){.thinking-scene .comic-bubble{top:6%;right:15%;max-width:52%;font-size:13px}.idea-scene .comic-bubble{top:10%;right:16%}.walk-decision .comic-bubble{top:8%;right:15%}}
@media(max-width:700px){.kitchen-panel.photo-panel .comic-bubble{top:36%;left:auto;right:3%;max-width:35%;font-size:13px;padding:13px 18px 29px}}
/* App icon exactly matches the combined title, subtitle and their gap. */
.nav-brand{--brand-title-size:21px;--brand-subtitle-size:11px;--brand-gap:6px;--brand-height:calc(var(--brand-title-size)*1.2 + var(--brand-subtitle-size)*1.3 + var(--brand-gap));flex-direction:row;align-items:center;gap:12px}.nav-copy{display:flex;flex-direction:column;gap:var(--brand-gap)}.nav-app-icon{width:var(--brand-height);height:var(--brand-height);flex:none;object-fit:contain;border-radius:22%}.nav-title{font-size:var(--brand-title-size);line-height:1.2}.nav-tagline{font-size:var(--brand-subtitle-size);line-height:1.3}
@media(max-width:700px){.nav-brand{--brand-title-size:18px;--brand-subtitle-size:9px;--brand-gap:5px;gap:10px}}
@media(max-width:360px){.nav-brand{--brand-title-size:16px;--brand-subtitle-size:8px;gap:8px}}
/* Emphasis balloons are doubled independently, then follow the shared camera zoom. */
.idea-scene .comic-bubble{left:13%;right:auto;top:18%;transform:rotate(-5deg) scale(2);transform-origin:top left}
.walk-decision .comic-bubble{left:auto;right:10%;top:10%;width:250px;max-width:20%;transform:rotate(-5deg) scale(1.35);transform-origin:top right}
@media(max-width:700px){.idea-scene .comic-bubble{left:15%;right:auto;top:57%;width:120px;max-width:120px}.walk-decision .comic-bubble{left:auto;right:6%;top:4%;width:145px;max-width:38%;padding:23px 20px;transform:rotate(-5deg) scale(1.15)}}
/* Leave the basil-sprinkling hand clear in cooking shot three. */
.kitchen-panel:nth-child(3) .comic-bubble{left:auto;right:12%}
@media(max-width:700px){.kitchen-panel:nth-child(3) .comic-bubble{left:auto;right:6%}}
/* One pinned dining scene: empty wall, white lettering, then a large transparent logo. */
.ending-sequence{position:relative;height:330svh;background:#182c3d;--title-opacity:0;--logo-opacity:0;--title-shift:18px;--logo-shift:18px}.ending-stage{position:sticky;top:var(--nav);height:var(--stage);overflow:hidden;isolation:isolate;background:#182c3d}.ending-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.ending-wall{position:absolute;left:64%;right:4%;top:13%;height:65%;z-index:2;display:grid;align-items:center}.ending-title,.ending-logo-stage{grid-area:1/1;margin:0;width:100%;line-height:0;will-change:opacity,transform;pointer-events:none}.ending-title{opacity:var(--title-opacity);transform:translateY(var(--title-shift))}.ending-title img{width:100%;height:auto;max-height:51svh;object-fit:contain;filter:none}.ending-logo-stage{opacity:var(--logo-opacity);transform:translateY(var(--logo-shift))}.ending-logo{width:clamp(80px,8cqw,112px);height:auto;object-fit:contain;border-radius:22%;margin-inline:auto}
@media(max-width:700px){.ending-sequence{height:300svh}.ending-art{height:auto;aspect-ratio:3/2;object-fit:contain;object-position:top center}.ending-wall{left:12%;right:12%;top:calc(66.6667vw + 22px);height:calc(var(--stage) - 66.6667vw - 44px)}.ending-title img{max-height:31svh}.ending-logo{width:80px}}
body:not(.has-motion) .ending-sequence{height:auto}body:not(.has-motion) .ending-stage{position:relative;top:0;min-height:520px}body:not(.has-motion) .ending-wall{display:flex;flex-direction:column;justify-content:center;gap:20px}body:not(.has-motion) .ending-title,body:not(.has-motion) .ending-logo-stage{opacity:1;transform:none}body:not(.has-motion) .ending-title img,body:not(.has-motion) .ending-logo{max-height:24svh}
/* Every narrative frame shares a stable, centered width on wide displays. */
:root{--story-width:min(1200px,100vw);--stage:min(800px,calc(100svh - var(--nav)))}
html,body{background:#f6f5f2}#film{width:var(--story-width);max-width:100%;margin-inline:auto;background:var(--ink);container-type:inline-size}.site-nav{padding-inline:max(24px,calc((100vw - 1200px)/2 + 24px))}
.shot figure,.discovery-scene,.walk-sticky figure,.kitchen-panel,.phone-closeup{margin:0}.scene-art,.opening-shot .scene-art,.kitchen-panel .scene-art,.photo-shot .scene-art,.ending-art{object-fit:cover;object-position:center}.phone-closeup{width:min(calc(var(--stage)*2/3),100%);height:min(var(--stage),calc(var(--story-width)*1.5));margin-inline:auto}.discovery-sticky,.walk-sticky,.kitchen-sticky,.ending-stage{width:100%}
@media(max-width:700px){.site-nav{padding-inline:16px}.shot .scene-art,.discovery-scene .scene-art,.walk-sticky .scene-art,.kitchen-panel .scene-art,.kitchen-panel.photo-panel .scene-art{object-position:center}.ending-art{object-fit:contain;object-position:center top}}
@media(max-width:360px){.site-nav{padding-inline:12px}}
/* Frame color sampled from the original App Icon's yellow disk. */
:root{--brand-yellow:#f8c004}html,body{background:var(--brand-yellow)}.site-nav{background:var(--brand-yellow);border-bottom-color:#0000001a;backdrop-filter:none}.nav-brand,.nav-title,.nav-tagline{color:#111}.site-nav a:focus-visible,.site-nav button:focus-visible{outline-color:#182938}
/* Native homepage titleBar: verified against TodayGPTEatApp.swift and simulator capture. */
.recipe-screen{--native-title-size:7.9602cqw;--native-title-weight:700;--native-header-offset:4.4776cqw;background:#faf7f0}.native-status{color:#383631;background:#faf7f0}.recipe-heading{height:17.4129cqw;padding:0 5.9701cqw;display:flex;align-items:center;justify-content:space-between;gap:1.9901cqw;flex-shrink:0;background:#faf7f0;color:#383631}.native-app-title{color:#f5c800;font-size:var(--native-title-size);font-weight:var(--native-title-weight);font-family:-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.2;white-space:nowrap;letter-spacing:0;transform:translateY(calc(var(--native-header-offset)/2))}.native-settings{width:10.9453cqw;height:10.9453cqw;flex:none;transform:translateY(calc(var(--native-header-offset)/2))}.recipe-heading svg{overflow:visible}
/* Longer approved dialogue wraps inside its own balloon. */
.thinking-scene .comic-bubble{max-width:40%}.kitchen-panel:nth-child(4) .comic-bubble{max-width:47%}
@media(max-width:700px){.thinking-scene .comic-bubble{max-width:58%;right:15%;font-size:13px}.fridge-shot .comic-bubble{max-width:45%;font-size:12px}.kitchen-panel:nth-child(4) .comic-bubble{max-width:83%;font-size:21px}}
/* Three thoughts replace one another without resizing or moving their shared balloon. */
.thinking-scene .bubble-text{display:grid;align-items:center}.thought-line{grid-area:1/1}.thought-line[aria-hidden=true]{visibility:hidden}body:not(.has-motion) .thinking-scene .bubble-text{display:block}body:not(.has-motion) .thought-line{display:block;visibility:visible}
/* The header CTA appears only after the complete hero has left the viewport. */
.has-hero .nav-right{opacity:0;visibility:hidden;pointer-events:none}.has-hero.hero-has-left .nav-right{opacity:1;visibility:visible;pointer-events:auto}.hero-intro{position:relative;min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:center;background:var(--brand-yellow);padding:22px 16px 40px;isolation:isolate}.hero-art{position:relative;display:grid;grid-template-columns:54% 46%;align-items:center;min-height:0}.hero-wolf{width:100%;height:auto;max-height:64svh;object-fit:contain;object-position:center bottom}.hero-title{margin:0;padding:0 5% 0 0;line-height:0}.hero-title img{width:100%;height:auto;max-height:52svh;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(6px 7px 0 #000)}.hero-actions{display:flex;justify-content:center;margin-top:22px;z-index:8}.hero-download-toggle{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;background:#fff;color:#182938;padding:14px 26px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px;box-shadow:0 2px 0 #0002}.hero-download-toggle:hover{background:#f3f3f3}.hero-download-popover{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:200px;padding:16px;background:#fffaf0;color:#182938;border-radius:10px;box-shadow:0 10px 36px #0003}.hero-download-popover img{width:168px;height:168px}.hero-download-popover span{display:block;text-align:center;font-size:12px;margin-top:8px}
@media(max-width:700px){.hero-intro{padding:28px 18px 36px;min-height:calc(100svh - var(--nav))}.hero-art{grid-template-columns:1fr;gap:0}.hero-wolf{height:38svh;width:100%;max-height:370px}.hero-title{padding:0 12%;margin-top:12px}.hero-title img{max-height:23svh}.hero-actions{margin-top:24px}.hero-download-toggle{font-size:14px;padding:12px 22px}.hero-download-popover{top:auto;bottom:calc(100% + 12px)}}

@media(max-width:700px){.hero-title img{filter:brightness(0) invert(1) drop-shadow(4px 5px 0 #000)}}
.hero-intro button:focus-visible{outline-color:#182938}
/* Screen information lives inside the walking story, without a separate held-phone scene. */
.discovery-sequence{height:280svh}.walk-sequence{height:620svh}.walk-phone-screen{position:absolute;left:auto;right:7%;top:22%;height:72%;width:auto;aspect-ratio:1206/2622;max-width:28%;border-radius:16px;overflow:hidden;container-type:inline-size;background:#faf7f0;box-shadow:0 12px 28px #0005;z-index:6}.walk-phone-screen .recipe-screen{opacity:1;pointer-events:auto}.walk-phone-screen .home-screen{opacity:1}.walk-phone-screen .recipe-viewport{padding-bottom:6cqw}
@media(max-width:700px){.discovery-sequence{height:260svh}.walk-sequence{height:600svh}.walk-phone-screen{top:32%;right:4%;width:46%;max-width:46%;height:auto;max-height:63%;aspect-ratio:1206/2622;border-radius:12px}}
body:not(.has-motion) .walk-phone-screen{position:relative;inset:auto;width:min(86%,320px);height:auto;max-width:none;max-height:none;aspect-ratio:1206/2622;margin:24px auto}
.walk-sticky .chapter-frame>figure{pointer-events:none}.walk-phone-screen{pointer-events:auto}
/* Four chapters. Only chapter boundaries scroll vertically; shots change inside pinned stages. */
.chapter-one{position:relative}.discovery-sequence{height:350svh}.goodbye-scene{z-index:1}.thinking-scene{z-index:2}.goodbye-scene .scene-plane{transform-origin:65% 30%}.walk-sequence{height:720svh}.walk-idea{z-index:1}.walk-wide{z-index:2}.walk-near{z-index:3}.walk-decision{z-index:4}.kitchen-sequence{height:520svh}.walk-phone-screen{right:12%;top:23%;height:64%;max-width:25%;z-index:6}.walk-sticky .scene-plane{pointer-events:none}.walk-phone-screen{pointer-events:auto}
.hero-intro{height:var(--stage);min-height:0;padding:0;justify-content:stretch}.hero-art{height:100%;grid-template-columns:53% 47%;align-items:stretch}.hero-visual{height:100%;overflow:hidden;display:flex;align-items:flex-end}.hero-wolf{width:120%;height:100%;max-width:none;max-height:none;margin-left:-12%;object-fit:contain;object-position:center bottom}.hero-right{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:28px 5% 38px 0}.hero-title{padding:0;margin:0}.hero-title img{width:110%;max-width:none;max-height:none;transform:translateX(-4%)}.hero-actions{justify-content:center;margin-top:32px}.hero-download-popover{top:calc(100% + 12px);bottom:auto}
@media(max-width:700px){.discovery-sequence{height:340svh}.walk-sequence{height:700svh}.kitchen-sequence{height:480svh}.walk-phone-screen{right:10%;top:32%;width:40%;max-width:40%;height:auto;max-height:59%}.hero-intro{height:auto;min-height:var(--stage)}.hero-art{height:auto;grid-template-columns:1fr}.hero-visual{height:44svh;max-height:430px}.hero-wolf{width:112%;margin-left:-6%;height:100%;max-height:none}.hero-right{padding:12px 12% 34px}.hero-title img{width:100%;max-width:100%;max-height:25svh;transform:none}.hero-actions{margin-top:22px}.hero-download-popover{top:auto;bottom:calc(100% + 12px)}}
body:not(.has-motion) .goodbye-scene{position:relative;height:auto;opacity:1!important}body:not(.has-motion) .walk-phone-screen{position:relative;inset:auto;width:min(86%,320px);max-width:none;max-height:none;height:auto;margin:24px auto}
/* Final chapter boundaries: hero / the complete journey / kitchen / dinner. */
.walk-sequence{height:1100svh}.walk-sticky .goodbye-scene{z-index:1}.walk-sticky .thinking-scene{z-index:2}.walk-sticky .walk-idea{z-index:3}.walk-sticky .walk-wide{z-index:4}.walk-sticky .walk-near{z-index:5}.walk-sticky .walk-decision{z-index:6}
@media(max-width:700px){.walk-sequence{height:1080svh}}
/* Height-led framing: one complete viewport below the navigation, no 800px cap. */
:root{--stage:calc(100dvh - var(--nav));--story-width:100vw}
.site-nav{border:0;box-shadow:none;padding-inline:max(24px,calc((100vw - var(--story-width))/2 + 24px))}
#film,.story-chapter,.walk-sequence,.walk-sticky,.kitchen-sequence,.kitchen-sticky,.kitchen-panel,.ending-sequence,.ending-stage{background:var(--brand-yellow)}
.ending-composition{position:absolute;inset:0;width:100%;height:100%}
.hero-actions{margin-top:clamp(48px,8dvh,96px)}
@media(orientation:landscape){
 :root{--frame-height:min(var(--stage),calc(100vw*2/3));--story-width:calc(var(--frame-height)*1.5)}
 .walk-sticky,.kitchen-sticky,.ending-stage{height:var(--stage)}
 .walk-sticky .scene-plane,.kitchen-panel .scene-plane,.ending-composition{inset:50% auto auto 50%;width:min(100%,calc(var(--stage)*1.5));height:min(100%,calc(var(--story-width)*2/3));margin:0;translate:-50% -50%}
 .scene-plane>.scene-art,.ending-art{width:100%;height:100%;object-fit:contain;object-position:center}
 .hero-intro{height:var(--stage);min-height:0;padding:0}.hero-art{height:100%;grid-template-columns:53% 47%;align-items:stretch}
 .hero-visual{height:100%;max-height:none}.hero-wolf{height:100%;width:120%;max-height:none;margin-left:-12%}
 .hero-right{padding:28px 5% 38px 0}.hero-title img{width:110%;max-width:none;max-height:calc(var(--stage)*.60);transform:translateX(-4%)}
 .hero-actions{margin-top:clamp(48px,8dvh,96px)}
 .ending-wall{left:64%;right:4%;top:13%;height:65%}.ending-title img{max-height:51dvh}
}
@media(orientation:landscape) and (max-height:600px){.hero-right{padding:12px 5% 12px 0}.hero-title img{max-height:calc(var(--stage)*.50)}.hero-actions{margin-top:clamp(18px,4dvh,30px)}.hero-download-toggle{min-height:40px;padding:10px 18px}}
@media(orientation:portrait){.hero-actions{margin-top:clamp(34px,6dvh,58px)}}
@media(max-width:700px){.site-nav{padding-inline:16px}}
@media(max-width:360px){.site-nav{padding-inline:12px}}
body:not(.has-motion) .scene-plane{inset:auto;width:100%;height:auto;translate:none}body:not(.has-motion) .ending-composition{position:relative;inset:auto;translate:none;width:100%;height:var(--stage)}
@media(orientation:landscape) and (max-height:600px){.hero-download-popover{top:auto;bottom:calc(100% + 12px)}}
/* The fixed clipping boundary uses the dining illustration's verified 1536×1024 ratio. */
.chapter-frame{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;isolation:isolate;background:var(--brand-yellow)}
@media(orientation:landscape){
 .chapter-frame{inset:50% auto auto 50%;width:var(--story-width);height:var(--frame-height);translate:-50% -50%}
 .walk-sticky .scene-plane,.kitchen-panel .scene-plane{inset:0;width:100%;height:100%;translate:none}
}
body:not(.has-motion) .chapter-frame{position:relative;inset:auto;translate:none;width:100%;height:auto;overflow:visible}body:not(.has-motion) .ending-composition{height:var(--stage);overflow:hidden}

/* Compact QR cards stay inside the visible viewport; JS selects the open side. */
#download-popover,.hero-download-popover{position:fixed;inset:auto;transform:none;width:180px;max-width:calc(100vw - 24px);padding:8px;border-radius:10px;z-index:90}
#download-popover a,.hero-download-popover a{display:block;line-height:0}
#download-popover img,.hero-download-popover img{display:block;width:100%;height:auto;aspect-ratio:1}

/* Extended torso raises the face while keeping the full phone-side hand in frame. */
.hero-wolf{flex:none;width:110%;margin-left:-10%;object-position:center bottom}
@media(orientation:portrait) and (max-width:700px){.hero-wolf{width:100%;margin-left:0}}

/* Download controls are native links; tap opens the App Store directly. */
.download-menu>a{font:inherit;text-decoration:none;cursor:pointer}
/* Static reading uses normal flow; pinned offsets must not overlap the next chapter. */
body:not(.has-motion) .discovery-sticky,
body:not(.has-motion) .walk-sticky,
body:not(.has-motion) .kitchen-sticky{inset:auto}
body:not(.has-motion) .scene-plane{display:flow-root}
body:not(.has-motion) .kitchen-panel{overflow:visible}
/* Bring the static mobile ending lettering closer to the dining illustration. */
@media(max-width:700px){
 body:not(.has-motion) .ending-wall{left:8%;right:8%;top:calc(66.6667vw + 24px);height:auto;justify-content:flex-start}
 body:not(.has-motion) .ending-title img{width:88%;margin-inline:auto;max-height:none}
 body:not(.has-motion) .ending-logo-stage{width:100%}
}

.filing-footer{padding:16px 20px;background:var(--brand-yellow);color:#111;text-align:center;font-size:12px;line-height:1.6}.filing-footer a{color:inherit}