:root{
  --navy:#1B2A4A; --ink:#1B2A4A; --muted:#566079; --line:#E3E5EB; --paper:#FFFFFF; --soft:#F7F6F0;
  --lime:#A4D82E; --yellow:#F9D923; --purple:#5C2D91; --red:#E42320; --orange:#F47920; --green:#0B5A22; --teal:#0E9E8E; --blue:#38B6FF; --pink:#FF66C4;
  --serif:"Plus Jakarta Sans", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --sans:"Plus Jakarta Sans", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --hand:"Caveat", "Segoe Print", cursive;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
.starter > *, .chama .top > *, .quiz .box > *, .made, .made > *{min-width:0}
html{overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit; cursor:pointer; color:inherit}
img{display:block; max-width:100%}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}
.kick{font-size:14px; font-weight:700; letter-spacing:.01em}
.hand{font-family:var(--hand); font-weight:700; line-height:1.05}
.h2{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(33.6px,4.8vw,60.8px); line-height:.98; letter-spacing:-.01em}
.lede{font-size:18px; color:var(--muted); max-width:52ch}
section{padding-block:clamp(64px,9vw,112px)}

/* sketches */
.sk{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; filter:url(#rough)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 24px; border-radius:999px; font:700 15.5px/1 var(--sans);
  text-decoration:none; border:1.5px solid transparent; transition:transform .2s, background .2s, color .2s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px; height:20px; flex:none}
.btn-wa{background:#1FAF55; color:#fff}
.btn-dark{background:var(--navy); color:#fff}
.btn-red{background:var(--red); color:#fff}
.btn-white{background:#fff; color:var(--navy)}
.btn-line{border-color:currentColor; background:transparent}
.btn-sm{min-height:42px; padding:0 16px; font-size:14.5px}

/* invite banner */
.invite{background:var(--navy); color:#fff; padding:14px 0}
.invite .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.invite p{font-size:16px}
.invite b{color:var(--lime); font-weight:700}
.invite small{display:block; color:rgba(255,255,255,.75); font-size:14px}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.nav .logo img{height:42px; width:auto}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0; font-size:15px; font-weight:600}
.nav ul a{text-decoration:none; color:var(--muted)}
.nav ul a:hover{color:var(--navy)}
.nav .right{display:flex; gap:10px; align-items:center}
.bagbtn{position:relative; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); background:#fff; display:grid; place-items:center}
.bagbtn svg{width:20px; height:20px}
.bagbtn b{position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; border-radius:10px; background:var(--red); color:#fff; font-size:12px; display:grid; place-items:center; padding-inline:5px}

/* hero */
.hero{padding:0; background:var(--yellow); position:relative; overflow:hidden}
.hero .top{padding-block:clamp(40px,6vw,76px) 0; position:relative; z-index:2}
.hero .say{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.hero h1{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(60.8px,12vw,152px); line-height:1; letter-spacing:-.025em}
.hero h1 i{font-style:italic}
.hero .tr{font-family:var(--hand); font-size:clamp(28px,3.4vw,40px); color:var(--green); margin-top:10px}
.hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:end; margin-top:22px}
.hero .copy{display:grid; gap:20px; max-width:560px}
.hero .copy p{font-size:19px; color:#2A2A1A}
.hero .copy p b{font-weight:700}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero .domain{display:inline-flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:8px 16px 8px 8px; font-weight:700; font-size:15px; width:max-content; max-width:100%}
.hero .domain span{background:var(--navy); color:var(--lime); border-radius:999px; padding:4px 10px; font-size:12.5px}
.hero .farm{margin-top:clamp(28px,4vw,48px); width:100%; aspect-ratio:1400/560; object-fit:cover; object-position:50% 62%}
.hero .sk{position:absolute; color:var(--navy); opacity:.75; z-index:1}

/* welcome back */
.back{padding-block:0; background:var(--navy); color:#fff}
.back .wrap{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding-block:28px}
.back .code{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(27.2px,3.2vw,38.4px); line-height:1; color:var(--lime); border:1.5px dashed rgba(164,216,46,.6); border-radius:14px; padding:10px 18px; background:none; letter-spacing:.02em}
.back p{color:rgba(255,255,255,.86); max-width:56ch}
.back p b{color:#fff}
.back .note{font-size:13px; color:rgba(255,255,255,.6); margin-top:4px}

/* story */
.story{background:#fff}
.story .head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.chapters{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.chapter{display:grid; gap:14px; align-content:start}
.chapter .pic{background:var(--c); border-radius:10px; aspect-ratio:1/1; display:grid; place-items:center; padding:8%; overflow:hidden}
.chapter .pic img{max-height:100%; width:auto; mix-blend-mode:multiply}
.chapter .n{font-family:var(--hand); font-size:28px; color:var(--orange)}
.chapter h3{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(22.4px,2.08vw,28.8px); line-height:1.05}
.chapter p{color:var(--muted)}
.pull{margin-top:clamp(48px,7vw,88px); display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border-radius:10px; overflow:hidden; background:var(--soft)}
.pull img{width:100%; height:100%; object-fit:cover; min-height:320px}
.pull .t{padding:clamp(28px,5vw,64px); display:grid; gap:18px; align-content:center}
.pull blockquote{margin:0; font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(27.2px,3.2vw,43.2px); line-height:1.02}
.pull p{color:var(--muted)}
.places{display:flex; flex-wrap:wrap; gap:8px}
.places span{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px; font-size:15px; font-weight:600}

/* voices */
.voices{background:var(--soft)}
.voices .head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px; margin-bottom:32px}
.vgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.v{background:#fff; border-radius:12px; padding:22px 22px 20px; display:grid; gap:14px; align-content:space-between; border:1px solid var(--line)}
.v q{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:19.2px; line-height:1.18; quotes:"“" "”"}
.v .who{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted)}
.v .who b{color:var(--ink); font-weight:700}
.v .dot{width:34px; height:34px; border-radius:50%; background:var(--c); display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; flex:none}
.v.big{grid-column:span 2; background:var(--purple); color:#fff; border:0}
.v.big q{font-size:clamp(28px,3vw,38px)}
.v.big .who{color:rgba(255,255,255,.75)}
.v.big .who b{color:#fff}
.radio{margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:15px; color:var(--muted)}
.radio b{color:var(--ink)}

/* chama */
.chama{background:var(--lime); position:relative; overflow:hidden}
.chama .top{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:start}
.chama .h2 em{font-style:italic}
.chama .lede{color:#2B3A16}
.chama .what{margin-top:18px; font-size:16px; color:#2B3A16; max-width:52ch}
.calc{background:#fff; border-radius:14px; padding:clamp(20px,3vw,32px); display:grid; gap:18px}
.calc label{font-weight:700; font-size:15px}
.calc .row{display:flex; align-items:center; gap:14px}
.calc input[type=range]{flex:1; accent-color:var(--green); height:32px}
.calc output{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:32px; line-height:1; min-width:2ch; text-align:right}
.homes{display:flex; flex-wrap:wrap; gap:6px; min-height:34px}
.homes svg{width:30px; height:30px; color:var(--green); transition:transform .3s}
.homes svg.pop{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.25)}}
.result{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.result div{border-radius:10px; background:var(--soft); padding:12px 14px}
.result small{display:block; font-size:13px; color:var(--muted); font-weight:600}
.result b{font-family:var(--serif); font-weight:700; letter-spacing:-.03em;  font-size:27.2px; line-height:1.05; font-variant-numeric:tabular-nums}
.calc .msg{font-weight:600; font-size:15.5px; color:var(--green)}
.ladder{list-style:none; margin:clamp(36px,5vw,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.ladder li{background:rgba(255,255,255,.55); border-radius:12px; padding:18px; display:grid; gap:6px; border:1.5px solid transparent; transition:background .3s, border-color .3s}
.ladder li.on{background:#fff; border-color:var(--green)}
.ladder .k{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:27.2px; line-height:1}
.ladder p{font-size:15px; color:#2B3A16}
.ladder b{font-weight:700}

.starter{margin-top:clamp(36px,5vw,56px); background:var(--navy); color:#fff; border-radius:16px; display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden}
.starter .steps{padding:clamp(24px,4vw,44px); display:grid; gap:18px; align-content:start}
.starter h3{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(27.2px,2.88vw,36.8px); line-height:1.02}
.starter ol{margin:0; padding:0; list-style:none; display:grid; gap:14px; counter-reset:s}
.starter ol li{display:grid; grid-template-columns:34px 1fr; gap:12px; color:rgba(255,255,255,.86); font-size:16px}
.starter ol li::before{counter-increment:s; content:counter(s); width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--navy); display:grid; place-items:center; font-weight:700}
.starter form{background:#24365C; padding:clamp(24px,4vw,44px); display:grid; gap:14px; align-content:start}
.fl{display:grid; gap:6px}
.starter label{font-size:14px; font-weight:700; color:rgba(255,255,255,.9)}
.starter input,.starter select{width:100%; font:inherit; font-size:17px; min-height:50px; padding:0 14px; border:1.5px solid rgba(255,255,255,.3); border-radius:10px; background:rgba(255,255,255,.06); color:#fff}
.starter select option{color:var(--ink)}
.starter input::placeholder{color:rgba(255,255,255,.5)}
.starter input:focus,.starter select:focus{outline:none; border-color:var(--lime)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.err{color:#FFB4A8; font-size:14.5px; font-weight:600; min-height:1.2em}
.made{display:grid; gap:14px; background:#fff; color:var(--ink); border-radius:12px; padding:18px}
.made .code{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:27.2px; line-height:1}
.made .code small{display:block; font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:600; margin-bottom:4px}
.bubble{overflow-wrap:anywhere; background:#DCF8C6; border-radius:12px 12px 12px 2px; padding:12px 14px; font-size:15px; line-height:1.5; white-space:pre-wrap; color:#1b2a1b}
.shares{display:flex; flex-wrap:wrap; gap:8px}
.made .shares .btn{flex:1 1 auto}
.chama > .sk{position:absolute; color:var(--green); opacity:.55}

/* quiz */
.quiz{background:#fff}
.quiz .box{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,5vw,64px); align-items:start}
.qcard{background:var(--soft); border-radius:16px; padding:clamp(20px,3vw,36px); display:grid; gap:18px; min-height:420px; align-content:start}
.qprog{display:flex; gap:6px}
.qprog i{flex:1; height:5px; border-radius:3px; background:var(--line)}
.qprog i.on{background:var(--orange)}
.qcard h3{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(24px,2.4vw,32px); line-height:1.05}
.opts{display:grid; gap:10px}
.opt{text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; min-height:54px; padding:12px 16px; font-size:16.5px; font-weight:600; transition:border-color .2s, transform .15s}
.opt:hover{border-color:var(--navy); transform:translateX(3px)}
.res{display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:center}
.res img{width:130px; filter:drop-shadow(0 14px 14px rgba(20,30,50,.2))}
.res .kick{color:var(--orange)}
.res h3{margin:4px 0 8px}
.res p{color:var(--muted)}
.qactions{display:flex; flex-wrap:wrap; gap:8px}
.qactions .btn{white-space:normal; text-align:center; line-height:1.2; padding-block:10px}
.linkbtn{background:none; border:0; text-decoration:underline; font-weight:600; font-size:15px; padding:8px 4px; color:var(--muted)}

/* story reward */
.reward{background:var(--yellow)}
.reward .box{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,5vw,64px); align-items:center}
.reward .poster{border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(80,60,0,.5); max-width:420px; transform:rotate(-2deg)}
.reward ol{margin:0; padding:0; list-style:none; display:grid; gap:12px; counter-reset:r}
.reward ol li{display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; font-size:17px}
.reward ol li::before{counter-increment:r; content:counter(r); font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:24px; line-height:1; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags button{border:0; background:var(--navy); color:#fff; border-radius:999px; padding:8px 14px; font-weight:700; font-size:15px}
.reward .t{display:grid; gap:22px}

/* friends */
.friends{background:var(--purple); color:#fff}
.friends .box{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,64px); align-items:center}
.friends .lede{color:rgba(255,255,255,.85)}
.jars3{display:flex; gap:10px; align-items:flex-end}
.jars3 .slot{flex:1; aspect-ratio:3/4; border:2px dashed rgba(255,255,255,.45); border-radius:14px; display:grid; place-items:center; font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:24px; color:rgba(255,255,255,.6); position:relative}
.jars3 .slot.free{border-style:solid; border-color:var(--lime); background:rgba(164,216,46,.12)}
.jars3 .slot img{width:78%}
.jars3 small{position:absolute; bottom:-26px; left:0; right:0; text-align:center; font-family:var(--sans); font-size:13px; font-weight:600; color:rgba(255,255,255,.8)}
.mylink{margin-top:36px; display:grid; gap:10px; background:rgba(255,255,255,.08); border-radius:12px; padding:18px}
.mylink label{font-weight:700; font-size:14px}
.mylink .row{display:flex; gap:8px; flex-wrap:wrap}
.mylink input{flex:1 1 200px; min-width:0; min-height:48px; border-radius:10px; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:16px; padding:0 14px}
.mylink input::placeholder{color:rgba(255,255,255,.5)}
.mylink .url{font-size:14px; color:var(--lime); word-break:break-all}

/* new */
.new{background:#fff}
.newgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; margin-top:36px}
.nw{border-radius:12px; overflow:hidden; background:var(--c); display:grid; grid-template-rows:auto 1fr}
.nw img{width:100%; aspect-ratio:1/.8; object-fit:cover}
.nw .t{padding:18px 20px 22px; display:grid; gap:6px; align-content:start}
.nw .tag{font-size:12.5px; font-weight:700; background:#fff; color:var(--ink); border-radius:999px; padding:3px 10px; width:max-content}
.nw h3{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:22.4px; line-height:1.05}
.nw p{font-size:15px; opacity:.85}

/* pantry */
.pantry{background:var(--soft)}
.pantry .head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px}
.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{border:1.5px solid var(--line); background:#fff; border-radius:999px; min-height:42px; padding:0 16px; font-size:15px; font-weight:600; color:var(--muted)}
.tab[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.pgrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
.prod{background:#fff; border-radius:12px; padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; border:1px solid var(--line)}
.prod .shot{background:var(--tint); border-radius:8px; aspect-ratio:1/1.05; display:grid; place-items:center; padding:10%}
.prod .shot img{max-height:100%; width:auto; filter:drop-shadow(0 10px 10px rgba(20,30,50,.18))}
.prod h3{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:17.6px; line-height:1.05; margin-top:4px}
.prod .sub{font-size:13.5px; color:var(--muted); line-height:1.3}
.prod .add{margin-top:auto; background:var(--navy); color:#fff; border:0; border-radius:999px; min-height:42px; font-weight:700; font-size:14.5px}
.prod .add.done{background:var(--green)}

/* gift */
.gift{background:var(--teal); color:#fff}
.gift .box{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,5vw,56px); align-items:center}
.gift img{border-radius:10px}
.gift .t{display:grid; gap:18px}
.gift .lede{color:rgba(255,255,255,.88)}

/* stockists */
.shops{background:#fff; padding-block:clamp(56px,7vw,88px)}
.shops ul{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.shops li{border:1.5px solid var(--line); border-radius:999px; padding:12px 22px; font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:20.8px; line-height:1}

/* tell a friend */
.tell{background:var(--orange); color:#fff; text-align:center; position:relative; overflow:hidden}
.tell .wrap{display:grid; justify-items:center; gap:22px; position:relative; z-index:2}
.tell .h2{max-width:14ch}
.tell p{max-width:46ch; color:rgba(255,255,255,.92)}
.tell .shares{justify-content:center}
.tell > .sk{position:absolute; color:#fff; opacity:.4}

footer{background:var(--navy); color:#DCE1EE; padding-block:48px calc(96px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center}
footer img{width:120px; background:#fff; border-radius:999px; padding:8px 18px}
footer .hash{font-family:var(--hand); font-size:34px; color:var(--lime)}
footer small{display:block; opacity:.7; font-size:14px}

/* sticky bar (mobile) */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:45; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); display:none; gap:10px; background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.dock .btn{flex:1; min-height:48px; padding:0 12px}

/* drawer */
.scrim{position:fixed; inset:0; background:rgba(27,42,74,.45); z-index:60; opacity:0; pointer-events:none; transition:opacity .3s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:#fff; z-index:61; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); display:grid; grid-template-rows:auto 1fr auto; padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px); visibility:hidden}
.drawer.on{transform:none; visibility:visible}
.drawer .hd{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px}
.drawer h3{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:25.6px}
.drawer .x{border:0; background:none; font-size:30px; line-height:1; color:var(--muted); width:44px; height:44px}
.drawer ul{list-style:none; margin:0; padding:14px 0; display:grid; gap:12px; align-content:start; overflow:auto}
.drawer li{display:flex; align-items:center; gap:12px; border-bottom:1px dashed var(--line); padding-bottom:12px}
.drawer li img{width:44px; height:54px; object-fit:contain}
.drawer li .nm{flex:1; font-weight:600}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff}
.drawer .empty{color:var(--muted); border:0; display:block}
.drawer .ft{padding-top:14px; border-top:1px solid var(--line); display:grid; gap:10px}
.drawer .ft p{font-size:14px; color:var(--muted)}
.drawer .ctag{background:var(--lime); border-radius:10px; padding:10px 12px; font-size:14.5px; font-weight:600}

.toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); background:var(--navy); color:#fff; padding:12px 18px; border-radius:999px; font-weight:600; font-size:15px; z-index:70; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; max-width:calc(100% - 32px); text-align:center}
.toast.on{opacity:1; transform:translate(-50%,0)}

@media (max-width:1100px){ .nav ul{display:none} .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:880px){
  .hero .grid,.story .head,.pull,.chama .top,.starter,.quiz .box,.reward .box,.friends .box,.gift .box,.back .wrap{grid-template-columns:1fr}
  .chapters{grid-template-columns:1fr; gap:36px}
  .chapter{grid-template-columns:120px 1fr; gap:6px 18px; align-items:start}
  .chapter .pic{grid-row:span 3; padding:6%}
  .ladder{grid-template-columns:1fr 1fr}
  .newgrid{grid-template-columns:1fr 1fr}
  .newgrid .nw:first-child{grid-column:span 2}
  .dock{display:flex}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .reward .poster{max-width:300px; margin-inline:auto}
  .hero .farm{aspect-ratio:1400/760}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgrid{grid-template-columns:1fr}
  .v.big{grid-column:auto}
  .two{grid-template-columns:1fr}
  .result b{font-size:28px}
  .nav .btn{display:none}
  .newgrid{grid-template-columns:1fr}
  .newgrid .nw:first-child{grid-column:auto}
  .res{grid-template-columns:96px 1fr}
  .res img{width:96px}
  .shops li{font-size:22px; padding:10px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}