:root{--ink:#394135;--muted:#888b7d;--olive:#707e54;--gold:#c69b34;--yellow:#f1cd53;--serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;--sans:"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html{background:#fff;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-width:280px;min-height:100svh;display:flex;flex-direction:column}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--olive);outline-offset:8px;border-radius:4px}
button:disabled{cursor:default}
[hidden]{display:none!important}
.definitions{position:absolute;width:0;height:0;overflow:hidden}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:28px 5.1%;width:100%;position:relative;z-index:5}
.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:25px;letter-spacing:-1px;color:var(--ink);text-decoration:none}
.brand-flower{width:30px;height:30px;transform:rotate(-12deg)}
.gold{color:var(--gold)}
.header-note{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.035em;color:var(--muted)}
.header-note svg{width:15px;height:15px;color:#bfa35d}
main{position:relative;flex:1;display:grid;min-height:650px}
.intro{padding:23px 20px 21px;text-align:center;align-self:center;transition:opacity .45s ease,transform .6s ease;}
.eyebrow{font-size:9px;font-weight:500;letter-spacing:.21em;color:var(--olive);margin:0 0 24px;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1{font-family:var(--serif);font-size:clamp(44px,5.25vw,70px);font-weight:400;line-height:1.08;letter-spacing:-3.3px;margin-bottom:18px}
h1 em{color:#78815a;font-weight:400}
.intro-subtitle{font-size:12px;letter-spacing:.02em;color:var(--muted);margin-bottom:0}
.first-flower-wrap{position:relative;width:360px;max-width:100%;height:325px;margin:6px auto 0}
.first-flower{border:0;background:transparent;position:absolute;width:235px;height:310px;padding:0;left:50%;top:7px;transform:translateX(-50%);cursor:pointer;transition:filter .3s}
.first-flower svg{width:100%;height:100%;overflow:visible;transform-origin:50% 95%;animation:idle-sway 5s ease-in-out infinite;transition:scale .5s}
.first-flower:hover svg{scale:1.035}
.first-flower:active svg{scale:.96}
.touch-note{position:absolute;right:-6px;top:143px;transform:rotate(-8deg);pointer-events:none;color:#909575;font-family:var(--serif);font-size:17px;font-style:italic}
.touch-note svg{position:absolute;top:-2px;right:59px;width:69px;height:53px;transform:rotate(17deg)}
.touch-note path,.moka-label path{stroke:currentColor;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sparkle{position:absolute;color:#ddc375;font-size:24px;animation:twinkle 4s ease-in-out infinite}
.sparkle-one{top:76px;left:68px;font-size:18px}
.sparkle-two{top:20px;right:73px;animation-delay:-1.5s}
.small-promise{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#93958a;letter-spacing:.035em;margin:5px 0 0}
.small-promise span{width:4px;height:4px;background:#b8c196;border-radius:50%}
.motion-choice{display:block;margin:14px auto 0;padding:5px 0;background:none;border:0;border-bottom:1px solid #e8e6d9;font-size:9px;color:#858b72;cursor:pointer}
.motion-choice span{margin-left:7px}
.site-footer{margin:20px 5.1% 0;padding:22px 0 26px;border-top:1px solid #f0f0e9;display:flex;justify-content:center;align-items:center;gap:15px;font-size:10px;letter-spacing:.025em;color:#939588;position:relative;z-index:2}
.footer-flower{font-size:18px;color:#c4ac69}
body[data-scene="leaving"] .intro{opacity:0;transform:translateY(-12px)}
.interlude{width:100%;max-width:1100px;align-self:center;justify-self:center;text-align:center;position:relative;padding-top:30px;overflow:hidden;min-height:620px}
.interlude-caption{margin-bottom:15px;animation:soft-in .5s both}
.pumpkin-word{position:relative;z-index:2;color:#dba04b;font-family:var(--serif);font-style:italic;font-size:clamp(64px,9vw,104px);font-weight:400;letter-spacing:-5px;margin:0;transform-origin:center bottom;animation:word-bounce 1.3s both}
.theatre{position:relative;height:390px;width:min(850px,100%);margin:-3px auto 0}
.ground-shadow{position:absolute;left:50%;bottom:53px;width:380px;height:14px;max-width:80%;background:radial-gradient(ellipse,#77724e16,transparent 68%);transform:translateX(-50%)}
.pumpkin-position{position:absolute;width:137px;height:137px;left:61%;bottom:76px;transform:translateX(-50%);z-index:2}
#pumpkin{width:100%;overflow:visible;transform-origin:center bottom}
.moka-position{--dog-width:370px;position:absolute;width:var(--dog-width);height:calc(var(--dog-width)*.8261);left:50%;bottom:44px;transform:translateX(-72%);z-index:3;opacity:0}
#moka{width:100%;height:100%;overflow:visible}
.moka-label{position:absolute;left:10%;top:-31px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.15;text-align:left;color:#777965;opacity:0;transform:rotate(-7deg);transition:opacity .4s}
.moka-label svg{width:74px;height:139px;position:absolute;left:76%;top:13px;transform:rotate(2deg)}
.moka-label.visible{opacity:1}
.love-hearts{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;color:#d6af67}
.love-hearts span{position:absolute;left:72%;top:5%;font-size:34px;animation:love-float 2.4s ease-in-out infinite}
.love-hearts span:nth-child(2){left:89%;top:14%;font-size:18px;animation-delay:-.8s}
.love-hearts span:nth-child(3){left:58%;top:0;font-size:23px;animation-delay:-1.6s}
.love-hearts.visible{opacity:1}
.impact{position:absolute;left:63%;bottom:190px;font-size:45px;color:#e4bd62;opacity:0;z-index:4}
.crumbs{position:absolute;inset:0;pointer-events:none}
.crumb{position:absolute;width:8px;height:7px;background:#f3a13a;border-radius:2px;left:25%;top:54%}
.scene-note{color:#969685;font-size:12px;font-family:var(--serif);font-style:italic;margin:0;transition:opacity .3s}
.interlude.exit{animation:soft-out .7s forwards}
.garden{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;max-width:1160px;width:90%;margin:0 auto;gap:45px;align-self:center;padding:20px 0 45px}
.bouquet-wrap{position:relative;text-align:center;width:100%;max-width:590px;justify-self:center;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
#bouquet{width:100%;height:auto;overflow:visible}
.bouquet-note{font-family:var(--serif);font-size:13px;font-style:italic;color:#9a9e85;margin:-5px 0 0;opacity:0;transition:opacity 1s}
.garden.grown .bouquet-note{opacity:1}
.plant{transform-origin:300px 620px}
.grown .plant{animation:garden-sway 7s ease-in-out infinite}
.stem{fill:none;stroke:#83955c;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.stem.main-stem{stroke:#728648;stroke-width:6}
.garden.growing .main-stem{animation:stem-grow 2s cubic-bezier(.37,0,.37,1) forwards}
.garden.growing .branch{animation:stem-grow 1.5s cubic-bezier(.4,0,.25,1) var(--delay) both}
.foliage{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:bottom center}
.garden.growing .foliage{animation:leaf-open 1.3s var(--delay) cubic-bezier(.2,.7,.2,1) both}
.sepal-group{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.garden.growing .sepal-group{animation:sepal-open .85s var(--sepal-delay) ease-out both}
.bloom{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.garden.growing .bloom{animation:flower-open 1.7s var(--bloom-delay) cubic-bezier(.2,.7,.2,1) both}
.flower-petal{transform-origin:0 0}
.letter{opacity:0;transform:translateY(20px);transition:opacity 1.3s ease,transform 1.3s ease;max-width:440px;padding:20px 0;outline:none}
.letter.visible{opacity:1;transform:translateY(0)}
.letter .eyebrow{font-size:8px;letter-spacing:.18em;margin-bottom:19px}
.letter h2{font-family:var(--serif);font-size:69px;font-weight:400;line-height:1;letter-spacing:-3px;margin-bottom:24px}
.letter-content{font-family:var(--serif);font-size:17px;line-height:1.8;color:#727565;position:relative;min-height:304px}
.letter-content p{margin:0 0 17px;white-space:pre-wrap}
.letter-content p:last-child{margin-bottom:0}
.paragraph-slot{display:grid;margin-bottom:17px}
.paragraph-slot:last-child{margin-bottom:0}
.letter-content .paragraph-slot p{grid-area:1/1;margin:0}
.paragraph-space{visibility:hidden;pointer-events:none;user-select:none}
.typed-cursor::after{content:"";display:inline-block;height:1em;border-right:1px solid #ae944e;vertical-align:-.1em;margin-left:2px;animation:cursor 1s steps(1) infinite}
.letter-ending{display:flex;align-items:center;gap:16px;margin-top:26px;font-family:var(--serif);font-style:italic;font-size:27px;color:#788256;opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}
.letter-ending.visible{opacity:1;transform:translateY(0)}
.letter-ending svg{width:20px;height:20px;color:#c1a257;transform:rotate(-12deg)}
.read-all{padding:8px 0;margin-top:18px;border:0;border-bottom:1px solid #dddccc;background:none;color:#959886;cursor:pointer;font-size:10px;letter-spacing:.035em}
.read-all span{padding-left:12px}
.falling-flowers{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.falling-flower{position:absolute;top:-70px;width:28px;height:28px;opacity:0}
.falling-flower svg{width:100%;height:100%;overflow:visible}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript-note{padding:25px;text-align:center}
@keyframes idle-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes garden-sway{0%,100%{transform:rotate(-.65deg)}50%{transform:rotate(.65deg)}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.85) rotate(0)}50%{opacity:1;transform:scale(1.12) rotate(12deg)}}
@keyframes word-bounce{0%{opacity:0;transform:translateY(-100px) scale(.65) rotate(-8deg)}38%{opacity:1;transform:translateY(12px) scale(1.06,.9) rotate(3deg)}58%{transform:translateY(-22px) scale(.98,1.03) rotate(-2deg)}77%{transform:translateY(3px) scale(1.02,.98) rotate(1deg)}100%{transform:none}}
@keyframes soft-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes soft-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes love-float{0%,100%{transform:translateY(0) rotate(-8deg);opacity:.6}50%{transform:translateY(-12px) rotate(8deg);opacity:1}}
@keyframes stem-grow{to{stroke-dashoffset:0}}
@keyframes leaf-open{0%{opacity:0;transform:scale(.05) rotate(-25deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sepal-open{to{opacity:1;transform:scale(1)}}
@keyframes flower-open{0%{opacity:0;transform:scale(.02) rotate(-45deg)}30%{opacity:1}80%{transform:scale(1.035) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes cursor{50%{opacity:0}}
@media(min-width:850px){body[data-scene="growing"] .bouquet-wrap{transform:translateX(46%)}body[data-scene="growing"] .garden{gap:45px}}
@media(min-width:1500px){main{min-height:700px}.intro{padding-top:35px}.first-flower-wrap{height:355px}.first-flower{width:255px;height:340px}.garden{max-width:1240px;gap:65px}}
@media(max-width:849px){.site-header{padding:24px 7%}.garden{width:86%;gap:25px;grid-template-columns:1fr}.bouquet-wrap{max-width:450px}.garden:not(.grown) .bouquet-wrap{max-width:490px}.letter{justify-self:center;width:100%;max-width:480px;padding-top:0}.garden:not(.grown) .letter{display:none}.garden.grown{padding-top:0}.bouquet-note{margin-top:-25px}.letter-content{min-height:0;font-size:17px}.letter h2{font-size:58px}.site-footer{margin-top:20px}.garden{align-self:start}}
@media(max-width:540px){.site-header{padding:22px 7% 12px}.wordmark{font-size:24px}.brand-flower{width:27px;height:27px}.header-note{font-size:9px;gap:7px}.header-note svg{width:12px}main{min-height:600px}.intro{padding:34px 18px 20px}.eyebrow{font-size:8px;letter-spacing:.17em;margin-bottom:22px}h1{font-size:46px;letter-spacing:-2.25px;line-height:1.13;margin-bottom:15px}.intro-subtitle{font-size:10px}.first-flower-wrap{height:311px;width:318px;margin-top:12px}.first-flower{width:219px;height:293px}.touch-note{right:8px;top:132px;font-size:15px}.touch-note svg{right:48px;width:59px;top:2px}.sparkle-one{left:53px}.sparkle-two{right:60px}.small-promise{font-size:9px}.site-footer{padding:17px 0 22px;margin:10px 7% 0;gap:9px;font-size:8px}.footer-flower{font-size:16px}.interlude{min-height:580px;padding-top:55px}.interlude-caption{font-size:7px;letter-spacing:.12em}.pumpkin-word{font-size:77px;letter-spacing:-4px}.theatre{height:350px;margin-top:17px}.moka-position{--dog-width:290px;left:47%;bottom:38px}.pumpkin-position{width:105px;height:105px;left:66%;bottom:61px}.moka-label{font-size:17px;left:20%;top:-18px}.moka-label svg{width:63px}.ground-shadow{bottom:43px}.impact{bottom:152px;left:68%}.scene-note{font-size:12px}.garden{width:88%;gap:30px;padding-bottom:35px}.bouquet-wrap{width:112%;max-width:450px;margin-top:12px}.bouquet-note{font-size:10px;margin-top:-15px}.letter .eyebrow{font-size:7px;margin-bottom:17px}.letter h2{font-size:55px;margin-bottom:20px}.letter-content{font-size:16px;line-height:1.85}.letter-ending{font-size:26px;margin-top:23px}.read-all{font-size:10px}.falling-flower{width:21px;height:21px}}
@media(max-width:360px){.header-note{font-size:8px}h1{font-size:41px}.intro-subtitle{font-size:9px}.moka-position{--dog-width:255px}.pumpkin-position{width:94px;height:94px;bottom:59px}.moka-label{left:24%;font-size:16px}.site-footer{font-size:7px}.first-flower-wrap{width:280px}.touch-note{right:-1px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body:not(.full-motion) *,body:not(.full-motion) *::before,body:not(.full-motion) *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body:not(.full-motion) .intro,body:not(.full-motion) .letter{transform:none}body:not(.full-motion) .grown .plant{animation:none}body:not(.full-motion) .falling-flowers{display:none}}

/* One-touch story and the Deal interlude. */
body{--no-red:0}
main{min-height:calc(100svh - 76px)}
.intro{padding:48px 20px 28px}
.intro-subtitle{font-family:var(--serif);font-size:17px;font-style:italic;color:#8d9179;margin-top:22px}
.first-flower-wrap{width:340px;height:270px;margin:22px auto 0}
.first-flower{width:200px;height:200px;top:25px}
.first-flower svg{transform-origin:50% 50%;animation:flower-float 5s ease-in-out infinite}
.touch-note{right:-4px;top:164px}
.touch-note svg{top:-17px;right:57px;transform:rotate(32deg)}
.sparkle-one{left:43px;top:117px}
.sparkle-two{right:63px;top:26px}
.site-footer{border:0;font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.02em;padding:20px 0 25px;margin:0 7%;min-height:65px}
.red-wash{position:fixed;inset:0;pointer-events:none;z-index:0;background:#d93e37;opacity:var(--no-red);transition:opacity .7s ease}
.interlude{z-index:1;overflow:visible;min-height:650px;padding:34px 20px 25px}
.deal-heading{display:flex;align-items:center;justify-content:center;gap:28px;min-height:126px;position:relative;z-index:8}
.deal-panel{display:flex;flex-direction:column;gap:13px;align-items:center;width:178px;animation:deal-drop 1.05s cubic-bezier(.23,.68,.26,1) both}
.deal-ticket{font-family:var(--serif);font-size:35px;font-style:italic;color:#65714e;background:#fff9e5;border:1px solid #e5d6a6;border-radius:12px;padding:7px 23px;box-shadow:0 5px 0 #e9dcae45;cursor:pointer;transform:rotate(6deg)}
.deal-choices{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:178px}
.choice{border-radius:25px;padding:11px 20px;min-width:78px;min-height:45px;font-family:var(--serif);font-size:18px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 12px #59502309}
.choice-yes{color:#536339;background:#eee8b2;border:1px solid #d5d19a;position:relative;z-index:101}
.choice-yes span{font-size:16px;padding-left:3px}
.choice-yes:hover{background:#e3dc96}
.choice-yes.calling{animation:yes-call 1.25s ease-in-out infinite}
.choice-no{color:#847e71;background:#fffdf8;border:1px solid #d9d4c8}
.choice-no.escaped{position:fixed!important;z-index:100;margin:0;width:78px;touch-action:manipulation}
.theatre{margin:8px auto 0}
.bark-bubble{position:absolute;top:13%;left:73%;white-space:nowrap;font-family:var(--serif);font-size:20px;font-style:italic;color:#8e573e;background:#fffdf7;border:1px solid #e6d6c4;border-radius:45% 45% 45% 8%;padding:10px 14px;opacity:0;transform-origin:left bottom}
.sound-toggle{display:block;margin:13px auto 0;border:0;border-bottom:1px solid #c8c7b57a;background:transparent;color:#858675;font-size:10px;padding:5px 0;cursor:pointer}
.sound-toggle:focus-visible{outline-offset:4px}
#flower-rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20;opacity:0;transition:opacity 1.4s ease}
#flower-rain.active{opacity:1}
#flower-rain.behind{z-index:0;opacity:.45}
.garden{position:relative;z-index:1;padding-top:35px}
.garden.emerging{animation:garden-arrive 6.7s cubic-bezier(.15,.55,.25,1) both;transform-origin:50% 50%}
.garden.forward{z-index:4}
.garden .letter{text-shadow:0 1px 10px #fff,0 0 18px #ffffffb0}
.letter-postscript{font-family:var(--serif);font-style:italic;color:#9b977f;font-size:20px;margin:11px 0 0;opacity:0;transform:translateY(7px);transition:opacity 1s,transform 1s}
.letter-postscript.visible{opacity:1;transform:none}
@keyframes flower-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes deal-drop{0%{opacity:0;transform:translateY(-150px) rotate(-14deg)}52%{opacity:1;transform:translateY(10px) rotate(4deg)}73%{transform:translateY(-13px) rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes yes-call{0%,100%{opacity:1;box-shadow:0 0 0 0 #fff4a884}50%{opacity:.65;box-shadow:0 0 0 10px #fff4a800}}
@keyframes garden-arrive{0%{opacity:0;transform:translateY(45px) scale(.7);filter:blur(4px)}30%{opacity:.55;filter:blur(2px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@media(min-width:850px){body[data-scene="growing"] .bouquet-wrap{transform:translateX(46%)}}
@media(max-width:849px){.garden{padding-top:24px}.garden.emerging{transform-origin:50% 25%}}
@media(max-width:540px){
  main{min-height:calc(100svh - 64px)}
  .intro{padding:42px 22px 15px}
  h1{font-size:43px;letter-spacing:-2px;line-height:1.15}
  .intro .eyebrow{font-size:9px;margin-bottom:24px}
  .intro-subtitle{font-size:15px;margin-top:19px}
  .first-flower-wrap{width:300px;height:247px;margin-top:25px}
  .first-flower{width:181px;height:181px;top:17px}
  .touch-note{right:2px;top:159px;font-size:15px}
  .touch-note svg{right:49px;top:-21px;width:60px}
  .sparkle-one{left:29px;top:103px}.sparkle-two{right:43px;top:11px}
  .site-footer{font-size:12px;min-height:64px;padding:17px 0 24px}
  .interlude{padding:30px 15px 20px;min-height:610px;overflow:clip}
  .interlude-caption{font-size:7px;letter-spacing:.09em;margin-bottom:16px}
  .deal-heading{gap:13px;min-height:130px}
  .pumpkin-word{font-size:61px;letter-spacing:-3px}
  .deal-panel{width:139px;gap:12px}.deal-ticket{font-size:27px;padding:5px 18px}
  .deal-choices{width:139px;gap:7px;grid-template-columns:1fr 1fr}
  .choice{padding:8px 12px;min-width:64px;font-size:17px}.choice-no.escaped{width:70px}
  .theatre{margin:7px auto 0;height:345px;width:100%}
  .moka-position{--dog-width:275px;left:47%;bottom:38px}
  .moka-label{top:-11px;font-size:16px;left:20%}
  .moka-label svg{height:124px;width:62px;top:8px}
  .bark-bubble{font-size:16px;padding:8px 10px;left:71%;top:9%}
  .scene-note{font-size:12px;min-height:17px}
  .garden{gap:22px;padding-bottom:34px}.letter-postscript{font-size:19px}
}
@media(max-width:360px){
  h1{font-size:37px}.intro-subtitle{font-size:14px}
  .first-flower-wrap{width:264px}.touch-note{right:-1px}
  .deal-heading{gap:10px}.pumpkin-word{font-size:51px;letter-spacing:-2.5px}
  .deal-panel,.deal-choices{width:127px}.choice{min-width:60px;padding:8px 8px}
  .moka-position{--dog-width:250px}.moka-label{left:24%;font-size:15px}
}

/* Dialogue follows Moka's entrance and each bite. */
.interlude-caption{text-transform:none;font-family:var(--serif);font-style:italic;font-size:clamp(14px,2.2vw,17px);letter-spacing:0;line-height:1.45;color:#7d826e}
.scene-note{max-width:560px;min-height:2.8em;line-height:1.5;margin:0 auto;padding:0 16px;font-size:clamp(14px,2vw,17px)}
.bouquet-note{font-size:clamp(12px,1.25vw,14px);max-width:390px;padding:0 20px;margin:0 auto;line-height:1.5}