.story{--st-line: hsl(240 6% 90%);--st-muted: hsl(240 4% 40%);--st-faint: #9a9aa6;--st-ink: hsl(240 9% 8%);--st-navy: hsl(221 52% 42%);--st-danger: #c23a3a;--st-green: #2f9e5b;--st-coin: #f2b33d;--st-ease: cubic-bezier(.2, .7, .2, 1)}.story .stage{position:relative;aspect-ratio:1000 / 410;max-width:100%;border-radius:26px;background:linear-gradient(180deg,#fafafb,#f1f1f4);border:1px solid var(--st-line);overflow:hidden;container-type:inline-size;--t: clamp(10px, 1.4cqi, 15px)}.story .floor{position:absolute;inset:auto 0 0 0;height:9%;background:#ebebef;border-top:1px solid #e0e0e6}.story .blob{position:absolute;border-radius:50%;transition:background-color .7s}.story .b-maya{left:-4%;bottom:-16%;width:30%;aspect-ratio:1;background:#f7ead9}.story .b-sam{left:38%;bottom:-20%;width:22%;aspect-ratio:1;background:#e3ebf8}.story .b-crowd{left:63%;bottom:-26%;width:40%;aspect-ratio:1.5;background:#ececf0}.story .stage:is([data-scene="4"],[data-scene="5"]) .b-crowd{background:#f8e1e1}.story .peep{position:absolute;bottom:4%;transition:opacity .6s,filter .6s,transform .8s var(--st-ease);transform-origin:50% 100%}.story .peep .breathe{position:absolute;top:0;right:0;bottom:0;left:0;animation:st-breathe 3.8s ease-in-out infinite;transform-origin:50% 100%}.story .peep .face{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .25s}.story .peep .face svg{width:100%;height:100%;display:block}@keyframes st-breathe{0%,to{transform:none}50%{transform:translateY(-.6%) scaleY(1.012)}}.story .s-maya{left:3.5%;height:82%}.story .s-sam{left:45%;height:68%}.story .s-st1{left:66%;height:62%}.story .s-st2{left:77%;height:59%}.story .s-st3{left:87.5%;height:62%}.story .shop{position:absolute;left:14.5%;top:8%;width:25%;background:#fff;border:1px solid var(--st-line);border-radius:1.1em;box-shadow:0 1px 2px #14141e0d,0 18px 40px -22px #1414286b;font-size:var(--t);line-height:1.25;overflow:hidden}.story .shop .item{display:flex;align-items:center;gap:.7em;padding:.8em .85em}.story .gicon{width:2.6em;height:2.6em;border-radius:.7em;background:linear-gradient(160deg,#4d78c9,#2b4f97);display:grid;place-items:center;flex:none;box-shadow:inset 0 -2px #00000026}.story .gicon svg{width:70%;height:70%;display:block}.story .shop .nm{flex:1;font-weight:600;letter-spacing:-.01em;white-space:nowrap}.story .buy{border-radius:.6em;background:var(--st-ink);color:#fff;font-weight:600;padding:.5em .8em;white-space:nowrap}.story .shop .stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--st-line)}.story .shop .stat{padding:.6em .85em .7em;display:grid;gap:.1em}.story .shop .stat+.stat{border-left:1px solid var(--st-line)}.story .shop .stat small{color:var(--st-muted);font-size:.85em}.story .shop .stat b{font-size:1.9em;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;transition:color .3s}.story .shop .stat b.bad{color:var(--st-danger)}.story .shop .stat b.good{color:var(--st-green)}.story .guard{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--st-ease);background:var(--st-ink);color:#fff}.story .guard>span{overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.9em;white-space:nowrap}.story .guard img{width:1.5em;height:1.5em;margin-block:.45em}.story .stage:is([data-scene="4"],[data-scene="5"]) .guard{grid-template-rows:1fr}.story .pulse{position:absolute;left:27%;top:22%;width:10%;aspect-ratio:1;margin:-5% 0 0 -5%;border-radius:50%;border:3px solid var(--st-navy);background:radial-gradient(closest-side,transparent 70%,rgba(51,96,163,.14));opacity:0;pointer-events:none;z-index:1}.story .pulse.go{animation:st-pulse 1.6s var(--st-ease) forwards}.story .pulse.go.p2{animation-delay:.25s}@keyframes st-pulse{0%{opacity:.9;transform:scale(.4)}70%{opacity:.35}to{opacity:0;transform:scale(9)}}.story .laptop{position:absolute;font-size:var(--t);transition:opacity .45s,transform .6s var(--st-ease)}.story .laptop .lid{position:relative;background:#1d1d23;border-radius:.55em .55em .15em .15em;padding:.3em;box-shadow:0 16px 30px -16px #1414288c}.story .laptop .base{display:block;height:.4em;margin:0 -9%;background:linear-gradient(#e2e2e8,#c9c9d2);border-radius:0 0 .5em .5em}.story .view{position:relative;aspect-ratio:16 / 10;border-radius:.25em;background:linear-gradient(#9cc0f2,#dbe8fb 70%);overflow:hidden}.story .view .ground{position:absolute;inset:auto 0 0 0;height:24%;background:#6db36d;border-top:.2em solid #4f9a50}.story .view .cloud{position:absolute;top:16%;left:70%;width:22%;height:11%;background:#fff;border-radius:1em;opacity:.9;animation:st-cloud 6s linear infinite}@keyframes st-cloud{0%{transform:translate(40%)}to{transform:translate(-420%)}}.story .view .sprite{position:absolute;left:38%;bottom:23%;width:24%;aspect-ratio:12 / 8;animation:st-hop .7s steps(4) infinite}.story .view .sprite svg{width:100%;height:100%;display:block}@keyframes st-hop{0%,to{transform:translateY(0)}50%{transform:translateY(-38%)}}.story .view .lock{position:absolute;top:0;right:0;bottom:0;left:0;background:#16161dbd;display:grid;place-items:center;opacity:0;transition:opacity .35s}.story .view .pad{width:2.1em;height:2.1em;border-radius:50%;background:var(--st-danger);display:grid;place-items:center;box-shadow:0 0 0 .3em #c23a3a40;transition:transform .3s var(--st-ease),opacity .25s}.story .view .pad svg{width:56%;height:56%;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round}.story .view .b10{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;background:#fff;color:var(--st-ink);border-radius:.5em;padding:.4em .75em;font-weight:700;font-size:.85em;white-space:nowrap;transition:transform .35s var(--st-ease),opacity .25s}.story .check{position:absolute;right:-.7em;top:-.7em;width:1.9em;height:1.9em;border-radius:50%;background:var(--st-green);border:.2em solid #fff;display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--st-ease);z-index:2}.story .check svg{width:60%;height:60%;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.story .laptop[data-s=off]{opacity:0;transform:translateY(10%) scale(.85)}.story .laptop:is([data-s=lock],[data-s=offer]) .lock{opacity:1}.story .laptop:is([data-s=lock],[data-s=offer]) .sprite{animation-play-state:paused}.story .laptop[data-s=offer]{transform:scale(1.32);transform-origin:100% 0;z-index:3}.story .laptop[data-s=offer] .pad{opacity:0;transform:scale(.5)}.story .laptop[data-s=offer] .b10{opacity:1;transform:translate(-50%,-50%) scale(1)}.story .laptop[data-s=paid] .check{transform:scale(1)}.story .l-sam{left:31%;top:52%;width:12.5%}.story .l-c1{left:65%;top:7%;width:10%}.story .l-c2{left:76.25%;top:7%;width:10%;transition-delay:.08s}.story .l-c3{left:87.5%;top:7%;width:10%;transition-delay:.16s}.story .shake{animation:st-shake .5s ease}@keyframes st-shake{20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.story .say{position:absolute;left:41%;top:9%;display:inline-flex;align-items:center;gap:.6em;background:#fff;border:1px solid var(--st-line);border-radius:1.3em;padding:.45em 1em .45em .45em;font-size:var(--t);font-weight:600;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 18px 36px -20px #14142873;opacity:0;transform:translateY(10%) scale(.9);transform-origin:30% 100%;transition:opacity .4s,transform .5s var(--st-ease)}.story .say:after{content:"";position:absolute;left:2.4em;bottom:-.5em;width:.9em;height:.9em;background:#fff;border-right:1px solid var(--st-line);border-bottom:1px solid var(--st-line);transform:rotate(45deg)}.story .say .gicon{width:2.2em;height:2.2em;border-radius:.55em}.story .stage[data-scene="3"] .say{opacity:1;transform:none}.story .stage .crowd{opacity:.22;filter:grayscale(1)}.story .stage:is([data-scene="3"],[data-scene="4"],[data-scene="5"]) .crowd{opacity:1;filter:none}.story .stage[data-scene="5"] :is(.s-st1,.s-st2,.l-c1,.l-c2){opacity:.35}.story .fly{position:absolute;z-index:9;left:0;top:0;pointer-events:none;font-size:var(--t)}.story .coin{width:2.5em;height:2.5em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,var(--st-coin) 60%,#c98a15);color:#6b4605;display:grid;place-items:center;font-weight:700;font-size:.9em;box-shadow:0 6px 14px -6px #0006}.story .fly .gicon{width:2.2em;height:2.2em;border-radius:.55em;box-shadow:0 8px 18px -8px #00000073}.story .chapters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;margin-top:16px;align-items:center}.story .chap{all:unset;cursor:pointer;display:grid;gap:8px;font-size:14.5px;font-weight:600;color:#6b6b75;transition:color .3s}.story .chap .track{height:3px;border-radius:3px;background:var(--st-line);overflow:hidden}.story .chap .track i{display:block;height:100%;width:0;background:var(--st-ink)}.story .chap.done .track i{width:100%}.story .chap.on{color:#151519}.story .chap.on .track i{animation:st-fill var(--dur, 3s) linear forwards}.story.paused .chap.on .track i{animation-play-state:paused}@keyframes st-fill{to{width:100%}}.story .chap .s{display:none}.story .chap:focus-visible{outline:2px solid var(--st-navy);outline-offset:4px;border-radius:4px}.story .pause{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;border:1px solid var(--st-line);display:grid;place-items:center}.story .pause:focus-visible{outline:2px solid var(--st-navy);outline-offset:2px}.story .pause svg{width:14px;height:14px;fill:currentColor}@media (max-width: 700px){.story .stage{aspect-ratio:100 / 120;--t: clamp(10px, 3cqi, 13px)}.story .chapters{gap:6px}.story .chap{font-size:12.5px}.story .chap .l{display:none}.story .chap .s{display:inline}.story .s-maya{left:3%;height:41%;bottom:56%}.story .shop{left:27%;top:4%;width:70%}.story .pulse{left:62%;top:17%}.story .s-sam{left:4%;height:35%;bottom:4%}.story .l-sam{left:3%;top:46%;width:26%}.story .say{left:30%;top:38%}.story .s-st1{left:54%;height:31%}.story .s-st2{display:none}.story .s-st3{left:76%;height:31%}.story .l-c1{left:51%;top:52%;width:21%}.story .l-c2{display:none}.story .l-c3{left:75%;top:52%;width:21%}.story .b-maya{left:-12%;bottom:46%;width:52%}.story .b-sam{left:-10%;bottom:-14%;width:50%}.story .b-crowd{left:45%;bottom:-24%;width:70%}.story .stage[data-scene="5"] :is(.s-st1,.l-c1){opacity:.35}}@media (prefers-reduced-motion: reduce){.story .stage,.story .stage *{animation:none!important;transition-duration:0s!important}.story .chap.on .track i{width:100%}}
