:root{
  --ink:#14161f; --sky1:#2a7fe6; --sky2:#55b9ff; --cyan:#43d3ff; --beige:#e8c6a2; --beige2:#dcb38b;
  --grass:#5fcf4c; --grass2:#3c9d34; --paper:#f1ece0; --white:#fff;
  --toon:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M4 3 L28 17 L17 19 L12 30 Z' fill='white' stroke='%2314161f' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sky1);color:var(--ink);font:800 17px/1.5 var(--ui);overflow-x:hidden;cursor:var(--cursor);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a,button{cursor:pointer}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:400}

/* paper grain over everything, like printed comic stock */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* outlined cartoon lettering */
.toon{font-family:var(--toon);color:var(--white);-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;letter-spacing:.01em;
  text-shadow:0 .07em 0 var(--ink),0 .12em 0 var(--ink),0 .2em .12em rgba(0,0,0,.25)}
.toon-sm{font-family:var(--toon);color:var(--white);-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;text-shadow:0 .1em 0 var(--ink)}
.title{text-align:center;font-size:clamp(46px,7.4vw,104px);line-height:1;margin:0 auto clamp(28px,4vw,46px)}

[data-reveal]{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s ease,transform .8s cubic-bezier(.2,1.4,.4,1)}
[data-reveal].in{opacity:1;transform:none}

.layer{--mx:0;--my:0;translate:calc(var(--mx) * var(--d,0) * 1px) calc(var(--my) * var(--d,0) * 1px);transition:translate .4s ease-out}
.cloud{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 0 rgba(20,22,31,.12))}
.cloud.blur{filter:blur(9px);opacity:.92;z-index:6}
.drift{animation:drift 16s ease-in-out infinite;animation-delay:var(--t,0s)}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(28px)}}
.drift-l{animation-name:drift-l}
@keyframes drift-l{0%,100%{transform:translateX(0)}50%{transform:translateX(-28px)}}
.deco-coin{position:absolute;width:var(--s,60px);rotate:var(--rot,0deg);animation:bob 5s ease-in-out infinite;animation-delay:var(--t,0s);pointer-events:none;z-index:5;filter:drop-shadow(0 6px 0 rgba(20,22,31,.2))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(8deg)}}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:2;min-height:max(100svh,760px);overflow:hidden;overflow:clip visible;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,#3d95f0 0%,var(--sky1) 45%,#3aa0f5 100%)}
.rays{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-conic-gradient(from -8deg at 50% 62%,rgba(255,255,255,.12) 0deg 3deg,transparent 3deg 13deg);
  -webkit-mask:radial-gradient(circle at 50% 62%,transparent 12%,#000 45%);mask:radial-gradient(circle at 50% 62%,transparent 12%,#000 45%)}
.cloudbank{position:absolute;top:0;left:50%;translate:-50% 0;width:max(1600px,110vw);max-width:none;height:auto;z-index:1;pointer-events:none}

.hero-stage{position:relative;z-index:4;margin-top:clamp(56px,9vh,110px);display:flex;flex-direction:column;align-items:center}
.hero-mascot{width:clamp(240px,30vw,440px);filter:drop-shadow(0 18px 0 rgba(20,22,31,.18));animation:hover 5s ease-in-out infinite;user-select:none}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ticker{--n:8;position:relative;z-index:2;margin-top:calc(-.36 * clamp(240px,30vw,440px));display:flex;flex-direction:column;align-items:center;
  font-size:clamp(30px,calc(135vw / var(--n)),min(190px,calc(1250px / var(--n))));line-height:1;
  -webkit-text-stroke:.1em var(--ink);
  text-shadow:0 .03em 0 var(--ink),0 .06em 0 var(--ink),0 .09em 0 var(--ink),0 .12em 0 var(--ink),0 .2em .1em rgba(0,0,0,.28)}
.ticker .line{display:flex}
.ticker .line span{display:inline-block;animation:letterIn .8s cubic-bezier(.3,1.7,.5,1) backwards;animation-delay:calc(var(--i) * .07s + .2s);transition:transform .2s}
.ticker .line span:hover{transform:translateY(-.12em) rotate(-6deg)}
.hero-stage.no-mascot{margin-top:clamp(90px,13vh,150px)}
.no-mascot .ticker{margin-top:0}
/* the tweet, sitting in a cloud under the ticker; tap opens it full size */
.tweet-cloud{position:absolute;z-index:4;left:2%;top:calc(clamp(90px,13vh,150px) + var(--title-lines,2) * clamp(30px,calc(135vw / var(--title-n,9)),min(190px,calc(1250px / var(--title-n,9)))) + 70px);display:block;width:clamp(380px,38vw,580px);aspect-ratio:900/460;margin:0;padding:0;border:0;background:none;cursor:zoom-in;rotate:-7deg;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.tweet-cloud:hover{transform:scale(1.04) rotate(2deg)}
.tweet-cloud-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tweet-cloud-img{position:absolute;left:16.5%;top:24%;width:67%;height:auto;pointer-events:none}
@keyframes letterIn{from{transform:translateY(.8em) scale(.3) rotate(-14deg);opacity:0}}

.play{position:absolute;left:-12%;top:14%;z-index:3;width:clamp(58px,6vw,78px);aspect-ratio:1;border-radius:50%;border:5px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,#ff7a7a,#e32b2b 60%,#b11717);box-shadow:0 6px 0 var(--ink);color:#fff;display:grid;place-items:center;transition:transform .15s}
.play:hover{transform:scale(1.08) rotate(-6deg)}
.play:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.play svg{width:52%;fill:#fff;stroke:var(--ink);stroke-width:1.5;paint-order:stroke}
.play .i-pause,.play.playing .i-play{display:none}
.play.playing .i-pause{display:block}

.sticker{position:absolute;z-index:5;width:clamp(150px,19vw,290px);border-radius:26px;user-select:none;touch-action:none;cursor:grab;
  filter:drop-shadow(0 12px 0 rgba(20,22,31,.18));transition:scale .15s}
.sticker:active{cursor:grabbing;scale:1.05}

.sticker-r{right:4%;top:8%;rotate:7deg}

/* characters peeking over the cloud row at the bottom of the sky.
   --cl = height of the cloud line above the band's bottom; each character shows --show of its height above it */
.cast{--cl:min(11vw,150px);position:absolute;left:0;right:0;bottom:0;height:clamp(300px,32vw,470px);z-index:3;overflow:hidden;pointer-events:none}
.peek{position:absolute;width:var(--w);bottom:calc(var(--cl) - (1 - var(--show)) * var(--w) * var(--ar));
  filter:drop-shadow(0 8px 0 rgba(20,22,31,.18));animation:peek 4.5s ease-in-out infinite;animation-delay:var(--t,0s)}
@keyframes peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.peek-spider{--w:clamp(120px,12vw,190px);--ar:2.184;--show:.42;left:3%;rotate:-4deg;--t:-1s}
.peek-snoop {--w:clamp(100px,10.5vw,160px);--ar:1.88;--show:.52;left:19%;rotate:3deg;--t:-2.5s}
.peek-sponge{--w:clamp(130px,14vw,215px);--ar:1.357;--show:.55;right:19%;rotate:-3deg;--t:-.4s}
.peek-doge  {--w:clamp(160px,17vw,265px);--ar:.877;--show:.66;right:1%;--t:-3.2s}
.cast-clouds{position:absolute;left:-3%;width:106%;max-width:none;height:min(20vw,270px);object-fit:cover;object-position:center top;bottom:-2px;z-index:2}
@media (min-width:641px){ .hero{min-height:max(100svh,1200px)} }
@media (max-width:1000px){ .hero .cloud.blur,.hero .deco-coin{display:none} }   /* title + tweet cloud fill most of the width here; keep them clear */


/* ---------- FOREST ---------- */
.forest{position:relative;z-index:1;overflow:hidden;padding:clamp(170px,22vw,300px) var(--gutter) clamp(200px,20vw,280px);
  background:linear-gradient(180deg,#3aa0f5 0%,var(--cyan) 18%,#1b2438 48%,#232937 60%)}
.forest-art{position:absolute;left:0;top:4%;width:100%;height:62%;object-fit:cover;object-position:bottom;pointer-events:none}
.ground-art{position:absolute;left:0;top:56%;width:100%;height:44%;object-fit:cover;object-position:top;pointer-events:none}
.side{position:absolute;bottom:clamp(90px,10vw,150px);z-index:3;width:clamp(170px,22vw,340px);user-select:none;filter:drop-shadow(0 12px 0 rgba(0,0,0,.25))}
.side-l{left:2%}
.side-r{right:2%}
.pills{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,20px);max-width:600px;margin:0 auto}
.pill{display:flex;align-items:center;gap:18px;width:100%;padding:14px 22px;border-radius:24px;text-decoration:none;
  background:var(--bg);border:5px solid var(--ink);box-shadow:inset 0 -7px 0 rgba(0,0,0,.18),inset 0 5px 0 rgba(255,255,255,.25),0 8px 0 var(--ink);
  rotate:var(--r);transition:transform .18s cubic-bezier(.3,1.8,.5,1),box-shadow .18s}
.pill:hover{transform:scale(1.04) rotate(calc(var(--r) * -1))}
.pill:active{transform:translateY(5px);box-shadow:inset 0 -7px 0 rgba(0,0,0,.18),0 3px 0 var(--ink)}
.pill .toon{font-size:clamp(26px,3vw,38px);line-height:1}
.pill-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:#fff;border:3px solid rgba(255,255,255,.2)}
.pill-ico svg{width:28px;height:28px}
.forest .deco-coin{z-index:4}
.beige-curve{position:absolute;left:-2%;width:104%;bottom:-2px;height:clamp(90px,14vw,220px);z-index:2;pointer-events:none}

/* ---------- BEIGE ---------- */
.beige{position:relative;background:var(--beige);padding:clamp(40px,6vw,80px) var(--gutter) clamp(90px,10vw,140px);overflow:hidden}
.monitor{max-width:980px;margin:0 auto clamp(70px,9vw,120px);display:flex;flex-direction:column;align-items:center}
.monitor-screen{position:relative;width:100%;aspect-ratio:16/9;background:#0e1118;border:clamp(10px,1.4vw,16px) solid #2a2e3b;border-radius:26px;
  outline:5px solid var(--ink);box-shadow:0 14px 0 var(--ink),0 30px 50px -10px rgba(0,0,0,.35);overflow:hidden}
.monitor-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chart-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#8a93ad;font-weight:800}
.monitor-neck{width:16%;height:clamp(22px,3vw,40px);background:#2a2e3b;border:5px solid var(--ink);border-top:0;margin-top:14px}
.monitor-base{width:34%;height:clamp(14px,1.6vw,22px);background:#2a2e3b;border:5px solid var(--ink);border-radius:14px 14px 6px 6px;margin-top:-2px}

.carousel{position:relative;max-width:1200px;margin:0 auto;touch-action:pan-y}
.track{display:grid;justify-items:center;user-select:none}
.step{grid-area:1/1;width:min(420px,78vw);display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .6s cubic-bezier(.3,1.25,.4,1),filter .5s,opacity .5s;will-change:transform}
.step[data-pos="0"]{z-index:3}
.step[data-pos="-1"]{transform:translateX(-112%) scale(.82);filter:blur(6px);opacity:.8;z-index:2;cursor:pointer}
.step[data-pos="1"]{transform:translateX(112%) scale(.82);filter:blur(6px);opacity:.8;z-index:2;cursor:pointer}
.step[data-pos="-2"]{transform:translateX(-200%) scale(.6);opacity:0;pointer-events:none}
.step[data-pos="2"]{transform:translateX(200%) scale(.6);opacity:0;pointer-events:none}
.step-art{width:min(280px,64vw);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 10px 0 rgba(20,22,31,.15));pointer-events:none}
.step-title{display:flex;align-items:center;gap:12px;margin-top:6px}
.step-title .toon{font-size:clamp(28px,3vw,38px)}
.step-n{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:5px solid var(--ink);box-shadow:0 4px 0 var(--ink);font:400 26px var(--toon)}
.step-text{margin:14px 0 0;font-size:17px;line-height:1.4;color:#fff;-webkit-text-stroke:.3em var(--ink);paint-order:stroke fill}
.step-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.dark-btn{padding:12px 22px;border-radius:999px;background:#23262f;color:#fff;text-decoration:none;font-weight:900;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .15s}
.dark-btn:hover{transform:translateY(-3px)}
.dark-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.arrow{width:62px;height:62px;border-radius:50%;border:5px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 5px 0 var(--ink);display:grid;place-items:center;transition:transform .15s}
.arrow svg{width:30px;height:30px}
.arrow:hover:not(:disabled){transform:scale(1.08)}
.arrow:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.arrow:disabled{opacity:.35;cursor:default}
.carousel .arrow{position:absolute;top:26%;z-index:5}
.arrow-prev{left:calc(50% - min(420px,78vw) / 2 - 90px)}
.arrow-next{right:calc(50% - min(420px,78vw) / 2 - 90px)}
.dots{display:flex;justify-content:center;gap:10px;margin-top:28px}
.dots button{width:16px;height:16px;border-radius:50%;border:3px solid var(--ink);background:#fff;padding:0;transition:transform .2s,background .2s}
.dots button[aria-selected="true"]{background:var(--ink);transform:scale(1.25)}

/* ---------- SKY 2: physics ---------- */
.sky2{position:relative;overflow:hidden;padding:clamp(70px,9vw,120px) var(--gutter) 0;background:linear-gradient(180deg,#3aa0f5,var(--sky2))}
.sky2 .title{margin-bottom:10px;position:relative;z-index:2}
.hint{text-align:center;font-size:clamp(20px,2.2vw,26px);margin:0 0 20px;position:relative;z-index:2}
.pile{position:relative;z-index:2;max-width:1200px;height:clamp(380px,46vw,520px);margin:0 auto;overflow:hidden;touch-action:pan-y}
.coin{position:absolute;left:0;top:0;border-radius:50%;display:grid;place-items:center;text-align:center;text-decoration:none;user-select:none;-webkit-user-select:none;cursor:grab;
  font:400 var(--fs,19px)/1.05 var(--toon);color:#fff;-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;padding:10px;will-change:transform;touch-action:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),transparent 42%),var(--c1);border:5px solid var(--ink);box-shadow:inset 0 -8px 0 rgba(0,0,0,.2),0 6px 0 var(--ink)}
.coin:active{cursor:grabbing}
.coin img{width:58%;height:auto;pointer-events:none}

/* ---------- FOOTER ---------- */
.footer{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--grass) 0%,var(--grass2) 100%);padding:0 var(--gutter) calc(130px + env(safe-area-inset-bottom,0px));text-align:center}
.hill{display:block;position:relative;left:50%;translate:-50% 0;width:calc(100% + 2 * var(--gutter) + 20px);height:clamp(70px,9vw,140px);margin-top:calc(-1 * clamp(70px,9vw,140px) + 2px)}
.footer-inner{position:relative;max-width:860px;margin:0 auto}
.footer-mascot{width:clamp(150px,17vw,230px);margin:-40px auto 26px;animation:hover 5s ease-in-out infinite}
.ca-box{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px;border-radius:26px;background:#fff;border:5px solid var(--ink);box-shadow:0 8px 0 var(--ink)}
.ca-label{font-size:28px}
.ca{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 clamp(12px,1.7vw,17px) ui-monospace,Menlo,monospace;text-align:left}
.ca-copy{flex:none;padding:12px 22px;border-radius:18px;border:4px solid var(--ink);background:#ffd23f;color:var(--ink);font:400 19px var(--toon);box-shadow:0 4px 0 var(--ink);transition:transform .15s}
.ca-copy:hover{transform:translateY(-2px)}
.ca-copy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.stat{padding:16px 12px;border-radius:22px;background:#fff;border:5px solid var(--ink);box-shadow:0 6px 0 var(--ink);rotate:var(--r,0deg)}
.stat:nth-child(1){--r:-1.5deg}.stat:nth-child(3){--r:1.5deg}
.stat span{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.stat strong{font:400 clamp(20px,2.4vw,28px) var(--toon)}
.contact{margin:30px 0 4px}
.contact a{color:#fff;font-weight:900;text-decoration:none;-webkit-text-stroke:.25em var(--ink);paint-order:stroke fill}
.copyright{margin:24px auto 0;max-width:620px;font-size:13px;color:#103d10;opacity:.85}

/* ---------- fixed buy button ---------- */
.buy-fixed{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:900;text-decoration:none;
  padding:14px 30px 16px;border-radius:999px;font-size:clamp(20px,2.4vw,28px);line-height:1;white-space:nowrap;-webkit-text-stroke:.12em var(--ink);
  background:linear-gradient(180deg,#6fd0ff,#1f86ea);border:5px solid var(--ink);box-shadow:inset 0 5px 0 rgba(255,255,255,.45),inset 0 -6px 0 rgba(0,0,0,.18),0 7px 0 var(--ink);
  transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.buy-fixed:hover{transform:scale(1.06) rotate(-2deg)}
.buy-fixed:active{transform:translateY(5px)}

/* ---------- story reader ---------- */
.reader{width:min(1000px,96vw);max-width:none;max-height:94vh;padding:clamp(18px,3vw,36px);border:6px solid var(--ink);border-radius:30px;background:var(--beige);box-shadow:0 12px 0 var(--ink);overflow:auto}
.reader::backdrop{background:rgba(20,40,80,.55);backdrop-filter:blur(4px)}
.reader[open]{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.8) rotate(-3deg);opacity:0}}
.reader-close{position:absolute;top:12px;right:12px;width:52px;height:52px;border-radius:50%;border:5px solid var(--ink);background:#ff5a5a;color:#fff;font:400 30px/1 var(--toon);box-shadow:0 4px 0 var(--ink);z-index:5}
.book-stage{display:flex;flex-direction:column;align-items:center;padding-top:30px}
.book{position:relative;width:min(880px,86vw);aspect-ratio:1.5;perspective:2600px;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.book.is-closed-front{transform:translateX(-25%)}
.book.is-closed-back{transform:translateX(25%)}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.1s cubic-bezier(.45,.05,.2,1);cursor:pointer}
.leaf.flipped{transform:rotateY(-180deg)}
.page{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper);color:#1d1b18;border:4px solid var(--ink);border-radius:4px 16px 16px 4px}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 12%)}
.page.back{transform:rotateY(180deg);border-radius:16px 4px 4px 16px}
.page.back::after{background:linear-gradient(270deg,rgba(0,0,0,.16),transparent 12%)}
.page-img{width:100%;height:100%;object-fit:cover}
.page-text{display:flex;flex-direction:column;justify-content:center;height:100%;padding:clamp(20px,3.6vw,48px)}
.page-text .num{font:700 13px var(--ui);letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.page-text h3{font:400 clamp(30px,4vw,54px)/.95 "Anton",Impact,sans-serif;text-transform:uppercase;margin:10px 0 14px}
.page-text p{margin:0;font:400 clamp(15px,1.6vw,19px)/1.4 "Old Standard TT",Georgia,serif}
.page-text .folio{margin-top:auto;padding-top:14px;font:700 11px var(--ui);letter-spacing:.2em;opacity:.45}
.cover .page-img{position:absolute;inset:0}
.cover-title{position:absolute;left:0;right:0;bottom:0;padding:26px;text-align:center;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
.cover-title h3{font-size:clamp(30px,4.4vw,56px);line-height:1}
.cover-title p{margin:6px 0 0;color:#fff;font:900 12px var(--ui);letter-spacing:.24em;text-transform:uppercase}
.book-nav{display:flex;align-items:center;gap:18px;margin-top:26px}
.book-count{min-width:130px;text-align:center;font-size:24px}
.story-cards{display:none}

/* ---------- tweet lightbox ---------- */
.zoom{padding:clamp(14px,2vw,22px);border:6px solid var(--ink);border-radius:26px;background:#fff;box-shadow:0 10px 0 var(--ink);overflow:visible}
.zoom::backdrop{background:rgba(20,40,80,.55);backdrop-filter:blur(4px)}
.zoom[open]{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.zoom img{width:min(820px,84vw);height:auto;border-radius:10px}
.zoom .reader-close{top:-22px;right:-22px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translate(-50%,200px);padding:12px 22px;border-radius:18px;background:#fff;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-weight:900;transition:transform .35s cubic-bezier(.3,1.5,.5,1),visibility .35s;z-index:1000;visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .side{width:clamp(120px,24vw,200px);bottom:40px;opacity:.95}
  .carousel .arrow{top:auto;bottom:-6px}
  .arrow-prev{left:calc(50% - 130px)}
  .arrow-next{right:calc(50% - 130px)}
  .dots{margin-top:36px;padding-bottom:70px}
}
@media (max-width:760px){
  .book-stage{display:none}
  .story-cards{display:flex;flex-direction:column;gap:18px;padding-top:44px}
  .story-card{background:var(--paper);border:4px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 6px 0 var(--ink)}
  .story-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .story-card div{padding:18px 18px 22px}
  .story-card .num{font:700 12px var(--ui);letter-spacing:.24em;text-transform:uppercase;opacity:.6}
  .story-card h3{font:400 34px/.95 "Anton",Impact,sans-serif;text-transform:uppercase;margin:8px 0 10px}
  .story-card p{margin:0;font:400 16px/1.4 "Old Standard TT",Georgia,serif}
}
@media (max-width:640px){
  .sticker{width:112px;border-radius:16px}
  .sticker-r{right:3%;top:13%}
  .hero-stage{margin-top:150px}
  .hero-stage.no-mascot{margin-top:170px}
  .monitor-screen{aspect-ratio:4/5}   /* a 16:9 screen is ~200px tall on phones; the chart's toolbars ate all of it */
  .tweet-cloud{position:relative;left:auto;top:auto;align-self:flex-start;width:88vw;margin:22px 0 4px 3vw;rotate:-5deg}
  .cast{position:relative;align-self:stretch;height:210px;margin-top:auto}   /* sits at the bottom of the sky now the newspaper is gone */
  .hero .deco-coin,.hero .cloud.blur{display:none}   /* no room for them around the character row on phones */
  .peek-spider{--w:20vw;left:1%}
  .peek-snoop{--w:17vw;left:22%}
  .peek-sponge{--w:24vw;right:22%}
  .peek-doge{--w:31vw;right:-2%}
  .play{left:-6%;top:6%}
  .pill{padding:12px 16px;gap:14px}
  .pill-ico{width:44px;height:44px}
  .forest{padding-bottom:240px}
  .side{width:120px;bottom:70px}
  .step[data-pos="-1"]{transform:translateX(-96%) scale(.8)}
  .step[data-pos="1"]{transform:translateX(96%) scale(.8)}
  .stats{grid-template-columns:1fr}
  .ca-box{padding-left:14px}
  .ca-label{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}