/* Interactive, local-only recreations based on the native App and its assets. */
.phone{--phone-width:min(340px,31vw,35svh)}
.phone-screens{container-type:inline-size;color:#23392f;color-scheme:light}
.demo-screen{pointer-events:none;visibility:hidden;transition:opacity .12s linear,visibility 0s .12s}
.demo-screen.is-active{pointer-events:auto;visibility:visible;transition:opacity .12s linear,visibility 0s}
.demo-screen button{cursor:pointer}
.demo-base{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.demo-bar{position:absolute;inset:0;background:url('assets/web-20261028/demo-bar-bg.webp') center/100% 100%}
.demo-bar:after{content:'';position:absolute;inset:71% 0 0;background:linear-gradient(transparent,#f1f5f2 85%);pointer-events:none}
.demo-status{position:absolute;top:2.6%;left:13.5%;right:10%;display:flex;justify-content:space-between;font-size:4.2cqw;line-height:1.2;color:#151d19}
.demo-status span{font-size:3.5cqw;letter-spacing:.1em}
.demo-heading{position:absolute;top:7.5%;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between;height:5%;font-size:6cqw}
.demo-heading i{font-style:normal;border-radius:50%;width:10cqw;height:10cqw;display:inline-grid;place-items:center;background:#225a49;color:white;font-size:4cqw}
.demo-heading-actions{display:flex;align-items:center;gap:3cqw}
.demo-segment{position:absolute;top:15.1%;left:4.5%;right:4.5%;height:4.6%;border-radius:20cqw;background:#f0f5f2;display:flex;font-size:3.8cqw;align-items:stretch;text-align:center}
.demo-segment>*{width:50%;display:grid;place-items:center}
.demo-segment b{border-radius:20cqw;background:#225a49;color:#fff}
.bar-carousel{position:absolute;inset:21% 0 9%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab;user-select:none;z-index:2;outline-offset:-4px!important}
.bar-carousel.is-dragging{cursor:grabbing}
.bar-glasses{display:flex;position:relative;width:max-content;height:64.2857%;padding:0 25cqw;box-sizing:content-box}
.bar-glasses img{position:absolute;left:-22.5%;bottom:0;width:145%;height:86%;max-width:none;object-fit:contain;object-position:center bottom;transform-origin:center bottom;pointer-events:none;will-change:transform}
.bar-summary{position:absolute;top:67.3%;width:100%;text-align:center;display:grid;gap:1.5cqw;z-index:2}
.bar-summary strong{font-size:4.6cqw}.bar-summary span{font-size:4.7cqw;color:#225a49;letter-spacing:.1em}.bar-summary small{font-size:3.3cqw;color:#5b7167}


.demo-tabs{position:absolute;left:4.5%;right:4.5%;bottom:2.2%;height:6.5%;display:flex;align-items:stretch;background:#f9fffcde;border-radius:15cqw;padding:1cqw;z-index:3;pointer-events:none}
.demo-tab{width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.8cqw;font-weight:600;gap:.4cqw;border-radius:12cqw}.demo-tab img{width:6cqw;height:6cqw;object-fit:contain}.demo-tab.selected{background:#30443b18;color:#225a49}
.demo-hotspot{position:absolute;border:0;background:none;padding:0;z-index:3;min-height:44px}
.demo-hotspot span{display:grid;place-items:center;position:absolute;inset:0;background:#225a49;color:white;border-radius:3.5cqw;font-size:4.2cqw;font-weight:600;transition:background .25s,scale .2s}
.demo-hotspot:active span{scale:.97}.demo-hotspot:focus-visible{outline-offset:2px}
.mix-start{left:29%;top:85%;width:66.5%;height:5.4%}

.mix-results{position:absolute;inset:0;background:url('assets/web-20261028/demo-mix-bg.webp') center/100% 100%;z-index:4}
.mix-result-content{position:absolute;top:16%;left:4.5%;right:4.5%}
.mix-ready{font-size:3.5cqw;color:#225a49;margin:0 0 5cqw}
.mix-result-content h3{font-size:5cqw;margin:0 0 4cqw;display:flex;justify-content:space-between}.mix-result-content h3 small{font-size:3.8cqw;color:#657b70}
.mix-card{display:flex;align-items:center;gap:3cqw;padding:4cqw 3cqw;background:#f4f7f3e8;border-radius:4cqw;margin-bottom:3cqw;min-height:30cqw}
.mix-card>img{width:24%;height:23cqw;object-fit:contain}.mix-card>div{display:grid;gap:1.5cqw}.mix-card strong{font-size:4.2cqw}.mix-card span{color:#225a49;font-size:3.8cqw}.mix-card small{font-size:3cqw;color:#64766b}.mix-card em{font-style:normal;font-size:3cqw;color:#416848}
.mix-reset{position:absolute;left:29%;width:66.5%;top:calc(87.7% - 22px);height:44px;padding:0;border:0;background:none;z-index:3}

.map-bulb{position:absolute;left:54.2%;top:22.7%;width:13.7%;height:auto;z-index:2;filter:drop-shadow(0 0 9px #6ce1ee);pointer-events:none}
.map-visit-status{position:absolute;left:10.9%;top:80.7%;width:72%;height:2.2%;background:#f4f5e9;color:#557266;font-size:3.1cqw;line-height:1.3;z-index:2}
.map-checkin{left:51.5%;top:83%;width:37.5%;height:5.8%}.map-checkin span{border-radius:15cqw;font-size:4.2cqw}
.map-demo.is-lit .map-checkin span{background:#225a49}
.map-demo.is-lit .map-bulb{animation:light-up .65s ease-out both}
@keyframes light-up{from{scale:.8;filter:drop-shadow(0 0 0 #6ce1ee)}60%{scale:1.13;filter:drop-shadow(0 0 20px #6ce1ee)}to{scale:1;filter:drop-shadow(0 0 9px #6ce1ee)}}
.screen-caption{width:130%;text-align:center;line-height:1.5;bottom:-38px}
.memory-heading h2{font-size:clamp(33px,4.1vw,59px)}
@media(max-width:800px){.phone{--phone-width:min(310px,36vw,34svh)}.story-float{width:75px}.float-leading{right:-6%}.float-trailing{left:-9%}}
@media(max-width:600px){.phone{--phone-width:min(250px,62vw,25svh)}.story-stage{gap:12px;padding-top:22px;padding-bottom:45px;min-height:750px}.story-headings{height:162px}.story-copy>.eyebrow{margin-bottom:10px}.story-step h2{font-size:29px}.story-float{display:none}.screen-caption{bottom:-28px;font-size:9px}.story-controls button{min-height:44px}.story-controls{width:240px}.memory-heading h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.story-headings{height:260px}.story-step{position:absolute;opacity:0;visibility:hidden;padding-bottom:0}.story-step.is-active{opacity:1;visibility:visible}.story-controls{display:flex}.demo-screen{transition:none}.map-demo.is-lit .map-bulb{animation:none}.story-stage{min-height:750px}.story-step h2{transform:none}}

.demo-screen [hidden]{display:none!important}

.maker-story{margin:0 10vw;padding:105px 0 100px;border-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8vw;align-items:start}.maker-intro h2{font-size:clamp(29px,3.4vw,48px);line-height:1.35;letter-spacing:-.02em;margin:25px 0 30px}.maker-intro>img{width:130px;opacity:.7}.maker-letter{max-width:580px;font-size:14px;line-height:2.1;color:var(--muted)}.maker-letter p{margin:0 0 23px}.maker-letter .maker-signoff{color:var(--ink);margin-top:35px}.maker-intro .eyebrow{font-size:9px}@media(max-width:800px){.maker-story{margin:0 6vw;gap:5vw}.maker-letter{font-size:13px}}@media(max-width:600px){.maker-story{display:block;margin:0 24px;padding:clamp(28px,5svh,44px) 0 48px}.maker-intro h2{font-size:33px}.maker-intro>img{display:none}.maker-letter{font-size:14px;line-height:2}.maker-intro{margin-bottom:30px}}@media(prefers-color-scheme:dark){.maker-intro>img{filter:invert(1)}}

/* Keep the native button artwork height while enlarging only its hit target. */
.mix-start{top:calc(87.7% - 22px);height:44px}.mix-start span{top:50%;bottom:auto;height:11.7cqw;translate:0 -50%}
.map-checkin{top:calc(85.9% - 22px);height:44px}.map-checkin span{top:50%;bottom:auto;height:12.6cqw;translate:0 -50%}

.bar-carousel::-webkit-scrollbar{display:none}.bar-carousel.is-mouse-scrolling{scroll-snap-type:none}.bar-slide{position:relative;flex:0 0 50cqw;width:50cqw;height:100%;scroll-snap-align:center}.bar-summary{pointer-events:none}
.bar-summary .rating-stars,.mix-card .rating-stars{display:flex;align-items:center;gap:.65cqw;color:#225a49;line-height:1;letter-spacing:0}.bar-summary .rating-stars{justify-content:center}.rating-stars svg{display:block;width:4.5cqw;height:4.5cqw;flex:none}.mix-card .rating-stars svg{width:3.6cqw;height:3.6cqw}
.phone-world[data-scene="2"] .story-float{filter:drop-shadow(0 10px 15px #72aebb22)}

@media(max-width:600px){.story-float{display:block;width:60px}.float-leading{top:10%;right:0}.float-trailing{bottom:10%;left:0;width:62px}}

/* 2.0: four main tabs plus the separate iridescent Tipsy button. */
.demo-tabs-v2{position:absolute;inset:90.7% 4.5% 2.2%;z-index:5;display:flex;gap:1.5cqw;pointer-events:none}
.demo-tabs-v2 .demo-tabs{position:relative;inset:auto;flex:1;height:100%;padding:1cqw}
.demo-tipsy{height:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%}
.demo-tipsy img{width:66%;height:66%;object-fit:contain}
[data-screen="1"]:has(.mix-results:not([hidden]))>.demo-tabs-v2{visibility:hidden}
/* The map fills the phone; no navigation chrome or venue card. */
.map-canvas{position:absolute;inset:0;overflow:hidden;background:#ebebdf}
.map-image-layer{position:absolute;width:220%;height:220%;left:-84%;top:-35%}
.map-image{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.map-demo .demo-heading{top:8%;text-shadow:0 1px 5px #fff;background:none}
.map-checkin{position:absolute;left:14%;top:auto;bottom:11%;width:72%;height:auto;min-height:50px;padding:3cqw 3.5cqw;border:1px solid #fff;border-radius:30cqw;display:flex;align-items:center;justify-content:center;gap:2cqw;background:#f8fbf6ed;color:#3c625c;box-shadow:0 5px 18px #20463a25;z-index:3;transition:background .25s,transform .25s}
.map-checkin img{width:12cqw;height:12cqw;object-fit:contain}
.map-checkin span{position:static;inset:auto;translate:none;height:auto;background:none!important;color:inherit;font-size:4cqw;font-weight:600;white-space:nowrap}
.map-checkin:active{transform:scale(.96)}
.map-demo.is-lit .map-checkin{background:#225a49;color:white}
.map-attribution{position:absolute;bottom:4%;right:6%;font-size:2.7cqw;color:#41564b;text-shadow:0 1px 2px white}
/* Visible affordances belong to the object they explain. */
.interaction-cue{pointer-events:none;transition:opacity .25s}
.has-interacted .interaction-cue{opacity:0}
/* A hand moves across the cup, then disappears when the visitor takes over. */
.swipe-guide{position:absolute;left:24%;right:24%;top:49%;height:23cqw;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:#225a49;font-size:max(10px,3.7cqw)}
.swipe-trail{position:absolute;top:1cqw;left:0;width:100%;height:10cqw;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:.65}
.swipe-guide>span,.tap-guide{font-size:max(11px,3.5cqw);font-weight:400;line-height:1.4;letter-spacing:normal;font-style:normal;white-space:nowrap;background:#fffdf4;color:#225a49;border:1px solid #225a4925;padding:2.3cqw 3cqw;border-radius:3cqw;box-shadow:0 3px 9px #294a3815}
.story-track.is-in-view .demo-screen.is-active .swipe-pointer{animation-play-state:running}
.tap-guide{position:absolute;bottom:calc(100% + 9px);right:0}
.tap-guide:after{content:'';position:absolute;bottom:-5px;right:25%;width:8px;height:8px;background:#fffdf4;transform:rotate(45deg);border-right:1px solid #225a4925;border-bottom:1px solid #225a4925}
.mix-start span,.mix-reset span{position:absolute;left:0;right:0;top:50%;bottom:auto;height:11.7cqw;translate:0 -50%;display:flex;gap:1.8cqw;align-items:center;justify-content:center;border-radius:20cqw;font-size:max(11px,4.2cqw);font-weight:600;line-height:1;letter-spacing:.02em}
.mix-reset span{background:#f7faf5e8;color:#225a49;border:1px solid #225a492e;box-shadow:0 2px 7px #294a3810;transition:background .2s,scale .2s}
.mix-reset svg{width:5cqw;height:5cqw;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mix-reset:active span{scale:.97;background:#e2ebe5}
.demo-screen.is-active:not(.has-interacted) .mix-start span,.map-demo.is-active:not(.has-interacted) .map-checkin{animation:tap-halo 1.8s ease-out 3}

.coaster.has-interacted 
.coaster:active{scale:.98}
.closeup-single{width:62%;left:19%;top:22%;z-index:2;--turn:8deg}
.closeup-orbit{z-index:1}
.closeup-orbit:nth-of-type(1){width:44%;left:-14%;top:10%;--turn:-20deg;animation-delay:-1.7s}
.closeup-orbit:nth-of-type(2){width:46%;left:27%;top:-18%;--turn:12deg;animation-delay:-3s}
.closeup-orbit:nth-of-type(3){width:43%;left:76%;top:15%;--turn:20deg;animation-delay:-.8s}
.closeup-orbit:nth-of-type(4){width:46%;left:58%;top:66%;--turn:17deg;animation-delay:-2.3s}
.closeup-orbit:nth-of-type(5){width:46%;left:2%;top:67%;--turn:-25deg;animation-delay:-4s}
#our-story{scroll-margin-top:30px}
@keyframes tap-halo{0%{box-shadow:0 0 0 0 #225a4955}85%,100%{box-shadow:0 0 0 10px #225a4900}}
@media(max-width:600px){.swipe-guide{font-size:4cqw}.map-checkin{width:80%;left:10%}.memory-heading h2{font-size:31px}}

.mix-start span,.map-checkin span{font-size:max(11px,4.2cqw)}
@media(prefers-reduced-motion:reduce){.interaction-cue,.mix-start span,.map-checkin{animation:none!important}}

.story-track:not(.is-in-view) .swipe-pointer,.story-track:not(.is-in-view) .mix-start span,.story-track:not(.is-in-view) .map-checkin{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){.swipe-hand{animation:none}}

.mix-action-background{position:absolute;inset:0;background:url('assets/web-20261028/demo-mix-bg.webp') center/100% 100%;clip-path:inset(84.3% 0 0);pointer-events:none;color:#4a7064;font-size:3.4cqw}.mix-action-background>span{position:absolute;left:5%;top:87.7%;translate:0 -50%}

/* Re-entering a chapter starts a fresh, discoverable interaction. */
.map-tap-guide{right:0;bottom:calc(100% + 14px);font-weight:400}
.story-track.is-in-view .demo-screen.is-active .tap-hand{animation-play-state:running}
.demo-screen.guide-restarting .swipe-pointer,.demo-screen.guide-restarting .tap-hand,.demo-screen.guide-restarting .mix-start>span,.demo-screen.guide-restarting .map-checkin{animation:none!important}
@media(prefers-reduced-motion:reduce){.tap-hand{animation:none!important}}

/* Approved four-finger cartoon glove, shared by every gesture guide. */
.swipe-hand,.tap-hand{object-fit:contain}


/* The source glove's index fingertip is at 46% x / 4% y, not its image centre.
   Position this contact point first; animate around it so the tip never misses. */
.toy-grab-cue{position:absolute;left:72%;top:65%;width:0;height:0;z-index:2;opacity:var(--drag-guide-opacity,1)}
.toy .toy-grab-cue img{position:absolute;width:42px;height:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 2px 2px #233e4520);transform:translate(-46%,-4%) rotate(-20deg);transform-origin:46% 4%}
.has-interacted .toy-grab-cue{opacity:0}
.toy-grab-cue:before,.tap-target:before{content:'';position:absolute;left:0;top:0;width:14px;height:14px;border:1px solid #335e5b80;border-radius:50%;translate:-50% -50%;box-shadow:0 0 0 3px #ffffff45}
.swipe-guide{top:49%;height:25cqw}
.swipe-trail{top:-5cqw;height:10cqw}
.swipe-pointer{position:absolute;left:50%;top:0;width:0;height:0;animation:swipe-finger 2.6s ease-in-out 4;animation-play-state:paused}
.swipe-hand{position:absolute;left:0;top:0;width:16cqw;height:auto;max-width:none;transform:translate(-46%,-4%);transform-origin:46% 4%}
@keyframes swipe-finger{0%,100%{translate:8cqw 0}45%,65%{translate:-8cqw 0}}
.tap-guide{right:auto;left:0;bottom:calc(100% + 16px)}
.tap-guide:after{display:none}
.tap-target{position:absolute!important;left:80%;top:50%;width:0;height:0;z-index:5}
.tap-hand,.map-checkin .tap-hand{position:absolute;left:0;top:0;right:auto;width:15cqw;height:auto;max-width:none;transform:translate(-46%,-4%) rotate(-145deg);transform-origin:46% 4%;filter:drop-shadow(0 2px 2px #294a3826);animation:tap-finger 1.8s ease-in-out 3;animation-play-state:paused}
@keyframes tap-finger{0%,100%{transform:translate(-46%,-4%) rotate(-145deg) scale(1)}45%,60%{transform:translate(-46%,-4%) rotate(-145deg) scale(.88)}}
.tap-target:before{animation:contact-pulse 1.8s ease-out 3;animation-play-state:paused}
@keyframes contact-pulse{0%,100%{opacity:0;scale:.8}45%{opacity:1;scale:1}80%{opacity:0;scale:1.7}}
.story-track.is-in-view .demo-screen.is-active .tap-target:before{animation-play-state:running}
.demo-screen.guide-restarting .tap-target:before{animation:none!important}
@media(prefers-reduced-motion:reduce){.swipe-pointer,.tap-hand,.tap-target:before{animation:none!important}}

/* The coaster itself flips; its guide is anchored to the edge, with no extra button. */
.coaster-tap{position:absolute;left:84%;top:78%;width:0;height:0;z-index:4}
.coaster-tap img{position:absolute;left:0;top:0;width:clamp(36px,4vw,52px);height:auto;max-width:none;transform:translate(-46%,-4%) rotate(-20deg);transform-origin:46% 4%;filter:drop-shadow(0 2px 3px #233e4530);animation:coaster-touch 2s ease-in-out infinite}
@keyframes coaster-touch{0%,100%{transform:translate(-46%,-4%) rotate(-20deg) scale(1)}45%,60%{transform:translate(-46%,-4%) rotate(-20deg) scale(.9)}}
@media(prefers-reduced-motion:reduce){.coaster-tap img{animation:none}}

/* Shared translucent material for all 2.0 tabs, including the map. */
.demo-tabs-v2 .demo-tabs,.demo-tabs-v2 .demo-tipsy{background:linear-gradient(155deg,#ffffff66,#f4f8f533 55%,#ffffff4d);border:.5px solid #ffffffa6;box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -1px 1px #263d3229,0 0 0 .5px #304b3e33,0 3px 9px #263e3212;-webkit-backdrop-filter:blur(12px) saturate(135%);backdrop-filter:blur(12px) saturate(135%)}
.map-attribution{bottom:9.8%;right:4.5%}
@media(prefers-reduced-transparency:reduce){.demo-tabs-v2 .demo-tabs,.demo-tabs-v2 .demo-tipsy{background:#f0f4f1;-webkit-backdrop-filter:none;backdrop-filter:none}}

.mix-start,.mix-reset{left:14%;width:72%;top:auto;bottom:11%;height:max(50px,calc(18cqw + 2px))}
.mix-start>span,.mix-reset>span{inset:0;translate:none;height:100%;border-radius:30cqw;font-size:max(11px,4.2cqw)}
@media(max-width:600px){.mix-start,.mix-reset{left:10%;width:80%}}

.demo-status .demo-status-icons{display:flex;align-items:center;gap:1.3cqw;line-height:1}
.demo-status-icons svg{display:block;fill:currentColor;flex:none;height:3.8cqw}
.demo-status-icons .status-signal{width:5.4cqw}
.demo-status-icons .status-wifi{width:5.4cqw;height:4cqw}
.demo-status-icons .status-battery{width:7.6cqw}

/* Both mixing states share the result view header; cover the baked screenshot chrome. */
.mix-chrome{position:absolute;inset:0;z-index:5;pointer-events:none;clip-path:inset(0 0 86.5%);background:url('assets/web-20261028/demo-mix-bg.webp') center/100% 100%}
/* Device hardware stays above the shared screen chrome. */
.phone-screens>.dynamic-island{z-index:6}

@media(max-width:600px){#our-story{scroll-margin-top:0}}
@media(max-width:600px){.memory-heading h2{font-size:29px}}