.hero{--hero-h:clamp(620px, calc(100svh - var(--header-h)), 980px);--stage-h:var(--hero-h);--brick-w:clamp(52px, 4.4vw, 76px);--pad-x:max(16px, calc((100% - var(--wrap)) / 2));min-height:var(--hero-h);background:var(--sea);display:grid;overflow:clip}.hero__world{height:var(--stage-h);z-index:var(--z-art);--paint-w:max(106cqw, 130cqh);background:linear-gradient(var(--sky-1) 0%, var(--sky-2) var(--sky-hold,36%), var(--sky-3) 67%, var(--sea) 67%);position:absolute;inset:0 0 auto;container-type:size}.hero__painting{width:var(--paint-w);max-width:none;left:50%;top:calc(67cqh - .1996 * var(--paint-w));transform:translate3d(calc(-50% + var(--par-x,0) * -14px), calc(var(--par-y,0) * -6px), 0);position:absolute}.hero__cloud{height:auto;fill:var(--white);filter:drop-shadow(0 7px 0 color-mix(in srgb, var(--sky-3) 85%, var(--cobalt)));translate:calc(var(--par-x,0) * -10px) 0;animation:46s ease-in-out infinite alternate cloud-drift;position:absolute}.hero__cloud--a{width:15cqw;top:7%;left:83%}.hero__cloud--b{width:11cqw;animation-duration:58s;animation-direction:alternate-reverse;top:33%;left:87%}@keyframes cloud-drift{0%{transform:translate(-14px)}to{transform:translate(14px)}}@media (max-width:900px){.hero__cloud{display:none}}.hero__rival{width:auto;height:88px;left:calc(50% + (.903 - .5) * var(--paint-w) - 27px);top:calc(67cqh + .0125 * var(--paint-w) - 88px);transform-origin:50% 100%;translate:calc(var(--par-x,0) * -14px) calc(var(--par-y,0) * -6px);animation:5.5s ease-in-out infinite alternate rival-sway;display:none;position:absolute}html[data-tier=medium] .hero__rival,html[data-tier=high] .hero__rival{display:block}@keyframes rival-sway{0%{rotate:-1.2deg}to{rotate:1.2deg}}.hero__grade{height:var(--stage-h);z-index:var(--z-art);background:var(--ink);opacity:0;pointer-events:none;position:absolute;inset:0 0 auto}html[data-intro] .hero[data-hero=wall] .hero__grade{opacity:.3}.wall-brick{--bw:var(--brick-w);--bh:calc(var(--bw) / 2);background-color:color-mix(in srgb, var(--brick) 58%, var(--mortar));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3Cg fill='black' fill-opacity='0.05'%3E%3Crect x='0' y='0' width='10' height='5'/%3E%3Crect x='-5' y='5' width='10' height='5'/%3E%3Crect x='55' y='5' width='10' height='5'/%3E%3Crect x='0' y='10' width='10' height='5'/%3E%3Crect x='45' y='15' width='10' height='5'/%3E%3Crect x='20' y='20' width='10' height='5'/%3E%3C/g%3E%3Cg fill='darkorange' fill-opacity='0.12'%3E%3Crect x='10' y='0' width='10' height='5'/%3E%3Crect x='50' y='0' width='10' height='5'/%3E%3Crect x='15' y='5' width='10' height='5'/%3E%3Crect x='45' y='5' width='10' height='5'/%3E%3Crect x='-5' y='15' width='10' height='5'/%3E%3Crect x='55' y='15' width='10' height='5'/%3E%3Crect x='5' y='25' width='10' height='5'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.05'%3E%3Crect x='20' y='0' width='10' height='5'/%3E%3Crect x='40' y='0' width='10' height='5'/%3E%3Crect x='35' y='5' width='10' height='5'/%3E%3Crect x='10' y='10' width='10' height='5'/%3E%3Crect x='20' y='10' width='10' height='5'/%3E%3Crect x='25' y='15' width='10' height='5'/%3E%3Crect x='40' y='20' width='10' height='5'/%3E%3C/g%3E%3Cg fill='darkred' fill-opacity='0.12'%3E%3Crect x='5' y='5' width='10' height='5'/%3E%3Crect x='40' y='10' width='10' height='5'/%3E%3Crect x='15' y='25' width='10' height='5'/%3E%3Crect x='45' y='25' width='10' height='5'/%3E%3C/g%3E%3Cg fill='black' fill-opacity='0.1'%3E%3Crect x='25' y='5' width='10' height='5'/%3E%3Crect x='5' y='15' width='10' height='5'/%3E%3Crect x='35' y='15' width='10' height='5'/%3E%3Crect x='10' y='20' width='10' height='5'/%3E%3Crect x='-5' y='25' width='10' height='5'/%3E%3Crect x='55' y='25' width='10' height='5'/%3E%3Crect x='25' y='25' width='10' height='5'/%3E%3Crect x='35' y='25' width='10' height='5'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.09'%3E%3Crect x='50' y='10' width='10' height='5'/%3E%3Crect x='15' y='15' width='10' height='5'/%3E%3Crect x='0' y='20' width='10' height='5'/%3E%3Crect x='30' y='20' width='10' height='5'/%3E%3C/g%3E%3Cg fill='%237a2f20'%3E%3Crect x='0' y='0' width='.32' height='5'/%3E%3Crect x='10' y='0' width='.32' height='5'/%3E%3Crect x='20' y='0' width='.32' height='5'/%3E%3Crect x='30' y='0' width='.32' height='5'/%3E%3Crect x='40' y='0' width='.32' height='5'/%3E%3Crect x='50' y='0' width='.32' height='5'/%3E%3Crect x='-5' y='5' width='.32' height='5'/%3E%3Crect x='55' y='5' width='.32' height='5'/%3E%3Crect x='5' y='5' width='.32' height='5'/%3E%3Crect x='15' y='5' width='.32' height='5'/%3E%3Crect x='25' y='5' width='.32' height='5'/%3E%3Crect x='35' y='5' width='.32' height='5'/%3E%3Crect x='45' y='5' width='.32' height='5'/%3E%3Crect x='0' y='10' width='.32' height='5'/%3E%3Crect x='10' y='10' width='.32' height='5'/%3E%3Crect x='20' y='10' width='.32' height='5'/%3E%3Crect x='30' y='10' width='.32' height='5'/%3E%3Crect x='40' y='10' width='.32' height='5'/%3E%3Crect x='50' y='10' width='.32' height='5'/%3E%3Crect x='-5' y='15' width='.32' height='5'/%3E%3Crect x='55' y='15' width='.32' height='5'/%3E%3Crect x='5' y='15' width='.32' height='5'/%3E%3Crect x='15' y='15' width='.32' height='5'/%3E%3Crect x='25' y='15' width='.32' height='5'/%3E%3Crect x='35' y='15' width='.32' height='5'/%3E%3Crect x='45' y='15' width='.32' height='5'/%3E%3Crect x='0' y='20' width='.32' height='5'/%3E%3Crect x='10' y='20' width='.32' height='5'/%3E%3Crect x='20' y='20' width='.32' height='5'/%3E%3Crect x='30' y='20' width='.32' height='5'/%3E%3Crect x='40' y='20' width='.32' height='5'/%3E%3Crect x='50' y='20' width='.32' height='5'/%3E%3Crect x='-5' y='25' width='.32' height='5'/%3E%3Crect x='55' y='25' width='.32' height='5'/%3E%3Crect x='5' y='25' width='.32' height='5'/%3E%3Crect x='15' y='25' width='.32' height='5'/%3E%3Crect x='25' y='25' width='.32' height='5'/%3E%3Crect x='35' y='25' width='.32' height='5'/%3E%3Crect x='45' y='25' width='.32' height='5'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, var(--mortar) 0 6.4%, #ffffff21 6.4% 17.4%, transparent 17.4% 86%, #00000024 86% 100%);background-size:calc(var(--bw) * 6) calc(var(--bw) * 3), 100% var(--bh);background-position:0 0,0 0}.wall-css{z-index:var(--z-canvas);pointer-events:none;display:none;position:absolute;inset:0}html[data-intro] .hero[data-hero=wall] .wall-css,html[data-intro] .hero[data-hero=playing] .wall-css,.hero[data-hero=split] .wall-css{display:block}.wall-css__half{position:absolute;inset:0}.wall-css__half--l{clip-path:polygon(0 0,50% 0,46.5% 9%,52.5% 19%,47.5% 30%,53% 41%,47% 52%,52.5% 63%,47.5% 75%,52% 87%,50% 100%,0 100%)}.wall-css__half--r{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,52% 87%,47.5% 75%,52.5% 63%,47% 52%,53% 41%,47.5% 30%,52.5% 19%,46.5% 9%)}.hero[data-hero=playing] .wall-css{opacity:0;transition:opacity calc(var(--motion) * .12s) linear 40ms}.hero[data-hero=split] .wall-css__half--l{animation:wall-split-l calc(var(--motion) * .5s) cubic-bezier(.5, 0, .8, .3) forwards}.hero[data-hero=split] .wall-css__half--r{animation:wall-split-r calc(var(--motion) * .5s) cubic-bezier(.5, 0, .8, .3) forwards}.hero[data-hero=split][data-split=quick] .wall-css__half--l,.hero[data-hero=split][data-split=quick] .wall-css__half--r{animation-duration:calc(var(--motion) * .22s)}@keyframes wall-split-l{to{transform:translate(-62%,7%)rotate(-4deg)}}@keyframes wall-split-r{to{transform:translate(62%,9%)rotate(4deg)}}.hero__survivors{height:var(--stage-h);z-index:var(--z-canvas);pointer-events:none;clip-path:var(--survivor-clip,polygon(0 100%, 0 56%, 4% 56%, 4% 68%, 8% 68%, 8% 79%, 12% 79%, 12% 90%, 100% 90%, 100% 100%));display:none;position:absolute;inset:0 0 auto}.hero[data-hero=rest] .hero__survivors,.hero:not([data-js]) .hero__survivors{display:block}.hero:has(.hero__stage[data-gl=live],.hero__stage[data-gl=fading],.hero__stage[data-gl=snap]) .hero__survivors{display:none}.hero__inner{row-gap:var(--sp-5);padding-top:clamp(24px,5vh,64px);padding-bottom:calc(clamp(24px, 4vh, 40px) + var(--vox) * 3);min-height:var(--hero-h);pointer-events:none;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);align-items:start;display:grid;position:relative}.hero__title{color:var(--white);z-index:var(--z-stage-back);transform:translate3d(calc(var(--par-x,0) * 6px), calc(var(--drift,0) * var(--hero-h) * -.08 + var(--par-y,0) * 3px), 0) scale(calc(1 - var(--drift,0) * .04)) skewX(var(--skew));grid-area:1/1;margin:0;position:relative}html[data-intro] .hero:not([data-broken]) .hero__title{z-index:var(--z-stage-front)}.hero__panel{z-index:var(--z-content);pointer-events:auto;align-self:end;gap:var(--sp-3);--glass-a:color-mix(in srgb, var(--cobalt-deep) 82%, var(--ink-soft));background:linear-gradient(160deg, color-mix(in srgb, var(--glass-a) 94%, transparent), color-mix(in srgb, var(--ink) 96%, transparent) 78%);max-width:560px;box-shadow:inset 0 0 0 1px #ffffff29, 0 4px 0 var(--gold-edge), var(--hard-panel);grid-area:2/1;justify-items:start;display:grid;position:relative}.hero__panel p{margin:0}.hero__claim{margin-bottom:var(--sp-1)}.hero__panel .lede{color:var(--paper)}.hero__round{background:var(--ink);font-size:var(--t-ui);gap:.6em;padding:.3em 1em .3em .35em;box-shadow:inset 0 0 0 1px #ffffff2e,0 3px #00000059}.hero__round:before{content:"";background:radial-gradient(circle, var(--coral) 0 14%, var(--ink-soft) 15% 100%);width:1.15em;height:1.15em;box-shadow:0 0 0 .16em var(--gold);border-radius:50%;flex:none;margin-left:.25em}.hero__free{font-weight:700}.hero__cta{margin-block:var(--sp-2);gap:var(--sp-4)}.hero__android{margin-top:var(--sp-1)}.hero__controls{z-index:var(--z-stage-ui);right:var(--pad-x);top:calc(var(--stage-h) - var(--vox) * 3 - 62px);gap:var(--sp-3);pointer-events:none;display:flex;position:absolute}.hero__controls .btn,.hero__turns{pointer-events:auto}.hero__turns{gap:var(--sp-3);display:flex}.hero__turns[hidden],.hero__skip[hidden]{display:none}.hero .hero__stage{height:var(--stage-h);pointer-events:none;position:absolute;inset:0 0 auto;overflow:clip}.hero__stage>.stage-front>:where(.hero__ring,.hero__flash,.hero__sticker,.hero__hint){pointer-events:none}.hero__stage>.stage-gl,.hero__stage>.stage-snap{transform:translate3d(0, calc(var(--drift,0) * var(--hero-h) * -.08), 0) scale(calc(1 - var(--drift,0) * .04));transform-origin:50% 100%}.hero .hero__twin{width:auto;max-width:none;height:calc(var(--twin-h,.86) * var(--stage-h));inset:auto;left:calc(77.5% + var(--twin-dx,-.3) * var(--stage-h));top:calc(var(--twin-t,.14) * var(--stage-h));object-fit:fill;z-index:var(--z-canvas)}.hero .hero__twin--wide{display:block}.hero .hero__twin--stacked{display:none}.hero__ring{width:400px;height:400px;transform:translate(var(--dx,0px), var(--dy,0px)) translate(-50%, -50%) scale(calc(var(--rs,1) * var(--rk,1)));opacity:var(--ro,1);filter:drop-shadow(0 3px 0 var(--ink));pointer-events:none;display:none;position:absolute;top:40%;left:74%}html[data-intro] .hero[data-hero=wall] .hero__ring{animation:7s linear forwards ring-tighten;display:block}.hero[data-hero=playing] .hero__ring{display:block}@keyframes ring-tighten{0%{transform:translate(-50%, -50%) scale(calc(1 * var(--rk,1)))}to{transform:translate(-50%, -50%) scale(calc(.8 * var(--rk,1)))}}.hero__ring-gold,.hero__ring-shadow{fill:none;vector-effect:non-scaling-stroke}.hero__ring-gold{stroke:var(--gold);stroke-width:6px}.hero__ring-shadow{stroke:var(--ink);stroke-width:11px;opacity:.55}.hero__ring-ticks{fill:none;stroke:var(--gold);stroke-width:6px;stroke-linecap:round;vector-effect:non-scaling-stroke}.hero__ring-dot{fill:var(--coral)}.hero__flash{background:var(--white);opacity:0;pointer-events:none;position:absolute;inset:0}.hero__sticker{right:calc(22.5% + .12 * var(--stage-h));pointer-events:none;translate:calc(var(--par-x,0) * 10px) calc(var(--par-y,0) * 4px);opacity:1;margin:0;position:absolute;top:40%}html[data-intro] .hero:not([data-hero=rest]) .hero__sticker,.hero[data-js]:not([data-rae]) .hero__sticker{opacity:0}.hero__hint{left:50%;top:calc(var(--stage-h) - var(--vox) * 3 - 56px);pointer-events:none;margin:0;position:absolute;translate:-50%}.hero__fail{right:var(--pad-x);top:calc(var(--stage-h) - var(--vox) * 3 - 62px);justify-content:flex-end;align-items:center;gap:var(--sp-3);flex-wrap:wrap;display:flex;position:absolute}.hero__fail[hidden]{display:none}.hero__fail .btn{min-height:44px}.hero__viewer{cursor:grab;position:absolute;inset:4% 0 4% 56%}.hero__viewer:active{cursor:grabbing}.hero__viewer[hidden]{display:none}@media (min-width:901px) and (max-width:1180px){.hero__panel{max-width:480px}.hero__sticker{-webkit-text-stroke-width:3px;font-size:30px}}@media (max-width:900px){.hero{--stage-h:clamp(470px, calc(100svh - var(--header-h) - 200px), 720px);--sky-hold:52%;min-height:0}.hero__inner{grid-template-rows:var(--stage-h) auto;min-height:0;padding-top:0;padding-bottom:calc(var(--sp-6) + var(--vox) * 3);row-gap:0}.hero__title{align-self:start;margin-top:clamp(14px,3vh,28px)}.hero__panel{max-width:none;margin-top:calc(var(--sp-4) * -1);align-self:start}.hero__controls{top:calc(var(--stage-h) - 52px)}.hero__fail{top:calc(var(--stage-h) - 60px)}.hero__hint{top:calc(var(--stage-h) - 52px);left:var(--pad-x);translate:none}.hero .hero__twin--wide{display:none}.hero .hero__twin--stacked{display:block}.hero__sticker{font-size:clamp(30px,8.6vw,44px);top:55%;left:5%;right:auto}.hero__viewer{inset:30% 0 0 38%}.hero .hero__rival{display:none}}@media (prefers-contrast:more){.hero__panel{background:var(--ink);box-shadow:inset 0 0 0 2px var(--white)}.hero__ring-shadow{opacity:1}}@media (forced-colors:active){.hero__panel{border:1px solid canvastext}}:root[data-motion=reduced] .wall-css,:root[data-motion=reduced] .hero__ring{display:none}@media (prefers-reduced-motion:reduce){:root:not([data-motion]) .wall-css,:root:not([data-motion]) .hero__ring{display:none}}.hero{--twin-dx:-1.307;--twin-t:.1316;--twin-h:.8684}@media (max-width:900px){.hero{--twin-dx:-.862;--twin-t:.4028;--twin-h:.5972}}