/* Compact sequential explainer cards; all steps are always visible. */
.story{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}
.story-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-height:0}
.story-scene{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:16px;padding:20px;border-radius:24px;overflow:hidden;background:#f4dfec;color:var(--ink);min-width:0}
.story-scene.scene-choose{background:#d8efc8}.story-scene.scene-earn{background:#d9d1fa}
.scene-art{grid-column:1;grid-row:1;height:145px;min-width:0}
.scene-caption{grid-column:2;grid-row:1;padding:0;min-height:0}
.scene-caption h3{font-size:26px;line-height:1.1}.scene-caption p{font-size:16px;line-height:1.4;margin-top:12px}.scene-caption br{display:none}
.scene-index{font-size:14px;margin-bottom:10px}.scene-word{display:none}
.profile-card{width:180px;min-height:205px;padding:15px;border-radius:22px;transform:scale(.6) rotate(-5deg);flex:none}
.profile-hands{width:105px;height:90px;margin:0 auto}.profile-greeting{font-size:17px;margin-bottom:8px}.profile-field{font-size:13px;margin-top:7px;padding-top:7px}
.choice-orbit{width:220px;height:220px;max-width:none;transform:scale(.57);flex:none}
.choice-item:nth-child(1){width:116px;height:116px;top:0;right:0}.choice-item:nth-child(2){width:102px;height:102px;top:80px;left:0}.choice-item:nth-child(3){width:92px;height:92px;top:125px;right:0}.choice-item b{width:27px;height:27px;font-size:16px;opacity:1;transform:none}
.request-card{width:185px;min-height:218px;padding:15px;border-radius:22px;transform:scale(.6) rotate(4deg);flex:none}.request-card img{width:110px;height:90px;margin:0 auto}.request-card>span{font-size:12px}.request-card>strong{font-size:19px;margin:8px 0 12px}.request-options{font-size:10px}.request-options span{padding:8px}
.story .scene-art *{animation:none!important}
/* Figma Secondary brand colors: frame 9, Rectangle 29 (26:13169). */
.join{background:linear-gradient(180deg,#ee7bf9 0%,#ffa070 100%);color:var(--ink);isolation:isolate;padding-bottom:55px}
.join:before,.join:after{display:none}.join-content{position:relative;z-index:2}.join-giant{display:none}
.join-tiddy{display:block;position:relative;width:180px;height:180px;object-fit:contain;margin:0 auto 24px;z-index:1}
.footer.shell{width:100%;max-width:none;padding-inline:24px;background:#ffa070;color:var(--ink);margin:0}
@media(min-width:761px){
 .story-stage{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
 .story-scene{display:flex;flex-direction:column;gap:10px;padding:24px;align-items:stretch}
 .scene-art{height:190px}.scene-caption h3{font-size:32px}.scene-caption p{font-size:17px;max-width:none}
 .profile-card{transform:scale(.8) rotate(-5deg)}.choice-orbit{transform:scale(.8)}.request-card{transform:scale(.8) rotate(4deg)}
 .join-tiddy{position:absolute;width:clamp(190px,23vw,340px);height:auto;aspect-ratio:1;left:1vw;top:26%;margin:0;transform:rotate(-10deg)}
 .footer.shell{padding-inline:5vw}.official-badge img{width:160px;height:54px}.official-badge[data-store=android] img{width:192px;height:74px;margin:-10px -16px}
 .header .official-badge img{width:120px;height:40px}.header .official-badge[data-store=android] img{width:144px;height:56px;margin:-8px -12px}
}
@media(max-width:370px){.story-scene{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:17px}.scene-caption h3{font-size:24px}.profile-card,.request-card{transform:scale(.47)}.choice-orbit{transform:scale(.45)}.official-badge img{width:130px}.official-badge[data-store=android] img{width:156px}.header .official-badge img{width:90px}.header .official-badge[data-store=android] img{width:108px}}

/* Equal visible badge heights; compensate for Google's transparent padding. */
.store-buttons{gap:10px;align-items:center}
.store-button.official-badge,.header .store-button.official-badge{--badge-h:44px;position:relative;display:block;width:calc(var(--badge-h)*3.36);height:var(--badge-h);min-width:0;min-height:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;transform:none;cursor:default}
.store-button.official-badge:before,.store-button.official-badge:after{display:none}
.store-button.official-badge img,.header .store-button.official-badge img{position:absolute;left:50%;top:50%;display:block;width:calc(var(--badge-h)*2.9916);height:var(--badge-h);max-width:none;margin:0;object-fit:contain;transform:translate(-50%,-50%)}
.store-button.official-badge[data-store=android] img,.header .store-button.official-badge[data-store=android] img{width:calc(var(--badge-h)*3.845238);height:calc(var(--badge-h)*1.488095);margin:0}
.header .store-button.official-badge{--badge-h:30px}
/* Secondary brand colors, frame 9, Rectangle 34: blue to pink. */
.join{background:linear-gradient(180deg,#77e1fc 0%,#ef77fc 100%)}
.footer.shell{background:#ef77fc}
.vip-access{display:inline-flex;align-items:center;gap:16px;padding:12px 20px;border:1px solid #14132e44;border-radius:16px;margin:0 auto 26px;background:#ffffff38;font-size:17px;line-height:1.2;backdrop-filter:blur(10px)}
.vip-access-label{font-size:14px;font-weight:700;letter-spacing:.12em;border-left:1px solid #14132e44;padding-left:16px}.vip-access strong{font-weight:700}
.offer-line strong{background:transparent;border:1px solid #14132e44;border-radius:10px;padding:8px 13px}
.tiddy-touch{display:block;position:relative;width:min(310px,85vw);height:auto;aspect-ratio:1;margin:0 auto 30px;padding:0;border:0;background:none;z-index:3;cursor:pointer;touch-action:pan-y;transform:translate(var(--touch-x,0px),var(--touch-y,0px)) rotate(var(--touch-rotate,0deg));transition:transform .35s ease-out;-webkit-tap-highlight-color:transparent}
.tiddy-float{display:block;width:100%;height:100%;animation:tiddyHover 5.8s ease-in-out infinite}
.tiddy-touch .join-tiddy{display:block;position:static;width:100%;height:100%;aspect-ratio:1;margin:0;object-fit:contain;transform:none;filter:drop-shadow(0 24px 22px #49246726);user-select:none}
.tiddy-touch:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:50%}
.story .scene-art{animation:stepHover 5s ease-in-out infinite}
.story .scene-choose .scene-art{animation-delay:-1.7s}.story .scene-earn .scene-art{animation-delay:-3.4s}
@keyframes stepHover{0%,100%{translate:0 4px}50%{translate:0 -5px}}
@keyframes tiddyHover{0%,100%{transform:translateY(5px) rotate(-5deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@media(min-width:761px){
 .store-button.official-badge{--badge-h:48px}.header .store-button.official-badge{--badge-h:36px}
 .join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:20px;padding-inline:5vw;direction:ltr}
 .join-content{direction:rtl;width:100%;max-width:640px;margin:auto;min-width:0}
 .tiddy-touch{position:relative;width:min(100%,480px);height:auto;left:auto;top:auto;margin:0 auto;grid-column:1;grid-row:1}
 .join-content{grid-column:2;grid-row:1}.join h2{font-size:clamp(70px,8vw,120px)}
}
@media(prefers-reduced-motion:reduce){.tiddy-float,.story .scene-art{animation:none!important}.tiddy-touch{transform:none;transition:none}}
.motion-off .tiddy-float,.motion-off .story .scene-art{animation:none!important}

/* Responsive explainer: real layout dimensions, no scaled overflowing artwork. */
.offer-line strong,.vip-access{background:#ef77fc;color:var(--ink);border:0;border-radius:999px;padding:12px 22px}
.story-scene.scene-me{background:linear-gradient(180deg,#c7fc77,#59ffb4)}
.story-scene.scene-choose{background:linear-gradient(180deg,#ef77fc,#77e1fc)}
.story-scene.scene-earn{background:linear-gradient(180deg,#ef77fc,#ffa070)}
.story .story-scene{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:24px;overflow:visible;min-width:0}
.story .scene-art{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:190px;flex:0 0 auto;min-width:0;animation:none!important;transform:none;translate:none;grid-column:auto;grid-row:auto}
.story .scene-caption{position:static;grid-column:auto;grid-row:auto;width:100%;max-width:none;min-width:0;min-height:0;margin:0;padding:0}
.story .scene-caption h3{font-size:30px;line-height:1.12;overflow-wrap:break-word}
.story .scene-caption p{font-size:16px;line-height:1.45;margin-top:12px;max-width:none}
.story .scene-caption br{display:initial}
.story .profile-card{box-sizing:border-box;width:160px;min-height:0;padding:12px;border-radius:18px;transform:rotate(-5deg);flex:none}
.story .profile-hands{width:80px;height:65px;margin:0 auto}.story .profile-greeting{font-size:14px;margin:4px 0 6px}.story .profile-field{font-size:12px;padding-top:6px;margin-top:6px}.story .profile-field b{width:18px;height:18px;font-size:12px}
.story .choice-orbit{width:196px;height:170px;max-width:none;transform:none;flex:none}
.story .choice-item:nth-child(1){width:95px;height:95px;top:0;right:0}
.story .choice-item:nth-child(2){width:85px;height:85px;top:65px;left:0}
.story .choice-item:nth-child(3){width:78px;height:78px;top:89px;right:5px}
.story .choice-item b{width:23px;height:23px;font-size:14px}
.story .request-card{box-sizing:border-box;width:165px;min-height:0;padding:12px;border-radius:18px;transform:rotate(4deg);flex:none}
.story .request-card img{width:85px;height:66px;margin:0 auto 4px}.story .request-card>span{font-size:11px}.story .request-card>strong{font-size:17px;margin:6px 0 10px}.story .request-options{font-size:10px}.story .request-options span{padding:6px}
@media(max-width:760px){.story .story-scene{padding:22px;gap:12px}.story .scene-art{height:180px}.story .scene-caption h3{font-size:29px}.story .scene-caption p{font-size:16px}}

/* Compact mobile cards: independent text and art columns in normal flow. */
@media(max-width:760px){
 .story .story-scene{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:16px;padding:22px 18px;border-radius:26px}
 .story .scene-art{grid-column:1;grid-row:1;width:108px;height:auto;min-height:145px}
 .story .scene-caption{grid-column:2;grid-row:1;text-align:right}
 .story .scene-caption h3{font-size:25px;line-height:1.12}
 .story .scene-caption p{font-size:16px;line-height:1.35;margin-top:10px}
 .story .scene-caption br{display:none}.story .scene-index{margin-bottom:8px}
 .story .profile-card,.story .request-card{width:98px;padding:8px;border-radius:12px;transform:none}
 .story .profile-hands{width:58px;height:48px}.story .profile-greeting{font-size:11px}
 .story .profile-field{font-size:9px;margin-top:5px;padding-top:5px}.story .profile-field b{width:14px;height:14px;font-size:10px}
 .story .request-card img{width:62px;height:52px}.story .request-card>span{font-size:9px}.story .request-card>strong{font-size:13px;margin:5px 0 8px}
 .story .request-options{font-size:8px;gap:3px;flex-wrap:wrap}.story .request-options span{padding:4px}
 .story .choice-orbit{width:108px;height:136px}
 .story .choice-item:nth-child(1){width:64px;height:64px;top:0;right:0}
 .story .choice-item:nth-child(2){width:58px;height:58px;top:48px;left:0}
 .story .choice-item:nth-child(3){width:55px;height:55px;top:79px;right:0}
 .story .choice-item b{width:18px;height:18px;font-size:11px}
}
@media(max-width:360px){.story .story-scene{grid-template-columns:94px minmax(0,1fr);gap:12px;padding:18px 14px}.story .scene-art{width:94px}.story .scene-caption h3{font-size:23px}.story .profile-card,.story .request-card{width:90px}.story .choice-orbit{width:94px}}
/* Supplied flower profile forms the immersive, bubble-free hero. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:#fff}
.hero .hero-content{position:relative;z-index:1}
.hero h1,.hero .title-accent{color:#fff;text-shadow:0 3px 24px #62002055}
.hero .offer-line,.hero .launch-note,.hero .scroll-cue{color:#fff}
.hero .offer-line strong{background:var(--brand-vip-green);color:var(--ink)}
.hero-title-stage{padding-block:110px 80px}
@media(max-width:760px){.hero-title-stage{padding-block:105px 85px}.hero h1{max-width:calc(100% - 32px)}}

/* The supplied locked script mounts itself behind the existing page. */
html { background: #9e0a1c; }
body { background: transparent; }
[data-flower-tunnel] { position: fixed; inset: 0; z-index: -1; }
main { position: relative; z-index: 0; background: transparent; }
body > footer { position: relative; z-index: 0; }
.hero { background: transparent; }

.hero h1 > .title-line:first-child { color: var(--brand-hero-pink); }

.hero h1 { line-height: .98; }
.hero h1 > .title-accent { margin-top: 0; }
.header .brand img { filter: brightness(0) invert(1); }
.header nav a { color: #fff; }
/* #648 (WCAG 2.0 AA / SI 5568): styles.css's base `.footer small` rule sets
   #696576 on this footer's #ef77fc background (.footer.shell above) — 2.34:1,
   below the 4.5:1 AA text minimum. var(--ink) is the color the design already
   uses for text on this exact pink elsewhere (`.offer-line strong,.vip-access`
   further up in this file) — 7.5:1, no new color introduced. Fixed in this
   file, this selector, rather than consent.css — matches this repo's own
   precedent of editing this exact rule directly (f4c8c7ea, the text-align
   override below, which this now shares a declaration block with). */
.footer small { text-align: center; color: var(--ink); }

/* Stable mobile canvas bounds: browser chrome must not reallocate WebGL targets
   on every scroll. Large viewport units cover the viewport with chrome hidden
   and still update normally when orientation changes. Keep the supplied JS intact. */
@media (hover:none) and (pointer:coarse){
  [data-flower-tunnel]{bottom:auto;height:100vh;height:100lvh;transform:translateZ(0);backface-visibility:hidden;pointer-events:none}
}