/* Playground Engage · catalogue and access page. Playground identity: off-black, off-white, electric blue. */
:root{--pg-bg:#f5f5f3;--pg-surface:#ffffff;--pg-ink:#0b0b0c;--pg-ink-2:#4a4b50;--pg-muted:#77787e;--pg-line:#e3e3df;--pg-blue:#1f42e3;--pg-blue-soft:#e6eafc;--pg-r:16px;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--pg-bg:#0d0d0f;--pg-surface:#17171a;--pg-ink:#f2f2ef;--pg-ink-2:#c3c3c6;--pg-muted:#8d8d93;--pg-line:#2a2a2e;--pg-blue:#5672ff;--pg-blue-soft:#1a2150;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pg{margin:0;background:var(--pg-bg);color:var(--pg-ink);font-family:Geist,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--pg-blue);color:#fff;font:600 15px/1 Geist,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s cubic-bezier(.16,1,.3,1),background .15s}
.pg-btn:hover{background:color-mix(in srgb,var(--pg-blue) 88%,#000)}.pg-btn:active{transform:scale(.97)}
.pg-btn.ghost{background:transparent;color:var(--pg-ink);box-shadow:inset 0 0 0 1.5px var(--pg-line)}
.pg-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--pg-ink)}
.pg-sub{color:var(--pg-ink-2);margin:0 0 18px}
.nf{min-height:100dvh;display:grid;place-content:center;text-align:center;padding:24px}.nf h1{font-size:44px;letter-spacing:-.03em;margin:0 0 18px}.nf h1 b{color:var(--pg-blue)}

/* access page */
.lg{display:grid;grid-template-columns:1.1fr 1fr;min-height:100dvh}
.lg-art{position:relative;overflow:hidden;background:#0b0b0c;color:#f2f2ef;padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.lg-art::after{content:"";position:absolute;width:560px;height:560px;right:-200px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,#1f42e3 0,rgba(31,66,227,.25) 45%,transparent 70%)}
.lg-mark{position:relative;z-index:1;font-weight:700;font-size:22px;letter-spacing:-.02em}.lg-mark b{color:#5672ff}.lg-mark span{font-weight:400;font-size:14px;color:#8d8d93;margin-left:6px}
.lg-tiles{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,110px));gap:14px;align-self:center}
.lg-t{aspect-ratio:1;border-radius:22px;background:#17171a;display:grid;place-items:center;border:1px solid #2a2a2e;animation:lgIn .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 60ms)}
.lg-t:nth-child(5){background:#1f42e3;border-color:#1f42e3}
.lg-t svg{width:62%;height:62%}
@keyframes lgIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
.lg-claim{position:relative;z-index:1;max-width:30ch;font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:0}
.lg-form{display:grid;place-items:center;padding:32px 20px}
.lg-box{width:min(380px,100%);display:grid;gap:6px}
.lg-box h1{margin:0 0 4px;font-size:34px;letter-spacing:-.03em;line-height:1.1}
.lg-box label{font-size:14px;font-weight:600;margin-top:4px}
.lg-box input{height:52px;padding:0 16px;border-radius:12px;border:1.5px solid var(--pg-line);background:var(--pg-surface);font:16px Geist,system-ui,sans-serif;color:var(--pg-ink);outline:0;margin-bottom:10px}
.lg-box input:focus{border-color:var(--pg-blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--pg-blue) 18%,transparent)}
.lg-err{margin:-4px 0 10px;color:#d93025;font-size:14px;font-weight:600}
@media (prefers-color-scheme:dark){.lg-err{color:#ff7a6e}}
@media (max-width:820px){.lg{grid-template-columns:1fr}.lg-art{min-height:auto;gap:28px;padding:28px 20px}.lg-tiles{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;align-self:stretch}.lg-t{border-radius:10px}.lg-claim{font-size:20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- catalogue */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;height:64px;padding:0 max(20px,calc((100vw - 1320px) / 2));background:color-mix(in srgb,var(--pg-bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--pg-line) 70%,transparent)}
.nav-mark{font-weight:700;font-size:18px;letter-spacing:-.02em;text-decoration:none;color:var(--pg-ink);white-space:nowrap}.nav-mark b{color:var(--pg-blue)}.nav-mark span{font-weight:400;font-size:13px;color:var(--pg-muted);margin-left:4px}
.nav-links{display:flex;gap:4px;margin-left:auto}.nav-links a{padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;color:var(--pg-ink-2)}.nav-links a:hover{background:var(--pg-surface);color:var(--pg-ink)}
.nav-out{font-size:14px;color:var(--pg-muted);text-decoration:none}.nav-out:hover{color:var(--pg-ink)}
main,.foot{max-width:1320px;margin:0 auto;padding:0 20px}
.pg-btn.sm{min-height:40px;padding:0 18px;font-size:14px}

.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px 0 40px;min-height:min(720px,calc(100dvh - 64px))}
.hero h1{margin:0 0 18px;font-size:clamp(40px,5.4vw,74px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:13ch}.hero h1 b{color:var(--pg-blue)}
.hero-sub{margin:0 0 28px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--pg-ink-2);max-width:46ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-bento{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:12px;height:min(560px,62vw)}
.hb{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--k-bg);text-decoration:none;color:var(--k-ink);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.hb:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px color-mix(in srgb,var(--k-primary) 70%,transparent)}
.hb .art{flex:1}.hb>span{padding:10px 16px 14px;font-family:var(--k-display);font-weight:800;font-size:15px;color:var(--k-ink)}
.hb-wheel{grid-row:span 2}.hb-scratch{grid-column:span 2}
.hb-scratch{flex-direction:row;align-items:center}.hb-scratch .art{height:100%}.hb-scratch>span{flex:0 0 40%;font-size:17px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:28px 0 44px;border-top:1px solid var(--pg-line)}
.facts div{padding:6px 28px 0 0}.facts div+div{padding-left:28px;border-left:1px solid var(--pg-line)}
.facts b{display:block;font-size:44px;line-height:1;letter-spacing:-.04em;font-weight:700;color:var(--pg-ink);margin-bottom:8px}.facts span{color:var(--pg-ink-2);font-size:15px}

.cat{padding:64px 0 24px;scroll-margin-top:64px}
.cat-head h2,.how-intro h2,.totem h2{margin:0 0 10px;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;line-height:1.08;font-weight:700}
.cat-head{max-width:720px;margin-bottom:22px}
.skins{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}.skins::-webkit-scrollbar{display:none}
.sk{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;border:1.5px solid var(--pg-line);background:var(--pg-surface);color:var(--pg-ink);cursor:pointer;text-align:left;font:inherit;transition:border-color .2s,transform .15s}
.sk:hover{border-color:color-mix(in srgb,var(--pg-ink) 40%,transparent)}.sk:active{transform:scale(.98)}
.sk[aria-checked=true]{border-color:var(--pg-ink);box-shadow:inset 0 0 0 1px var(--pg-ink)}
.sk-dot{position:relative;width:40px;height:40px;border-radius:12px;background:var(--k-bg);flex-shrink:0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sk-dot i{position:absolute;border-radius:50%}.sk-dot i:first-child{inset:8px 14px 14px 8px;background:var(--k-primary)}.sk-dot i:last-child{inset:18px 6px 6px 18px;background:var(--k-accent)}
.sk b{display:block;font-family:var(--k-display);font-size:15px;line-height:1.15}.sk small{display:block;color:var(--pg-muted);font-size:12.5px}
.filters{display:flex;gap:4px;flex-wrap:wrap;margin:18px 0 6px;border-bottom:1px solid var(--pg-line)}
.filters button{border:0;background:none;font:500 15px Geist,system-ui,sans-serif;color:var(--pg-ink-2);padding:12px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.filters button span{font-size:12px;color:var(--pg-muted);margin-left:2px}
.filters button[aria-selected=true]{color:var(--pg-ink);border-bottom-color:var(--pg-blue);font-weight:600}
.filter-note{min-height:24px;margin:12px 0 18px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.gc{display:flex;flex-direction:column;border-radius:22px;background:var(--pg-surface);border:1px solid var(--pg-line);overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.gc[hidden]{display:none}
.gc:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(11,11,12,.35)}
.gc-art{display:block;aspect-ratio:16/11;background:var(--k-bg);position:relative;overflow:hidden}
.gc-art .art{position:absolute;inset:0}
.gc-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.gc-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--pg-bg);color:var(--pg-ink-2)}
.tag-instant{background:var(--pg-blue-soft);color:var(--pg-blue)}
.gc-t{margin:2px 0 0;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.gc-body p{margin:0;color:var(--pg-ink-2);font-size:14.5px;line-height:1.5;flex:1}
.gc-meta{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--pg-muted)}
.gc-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:500;text-decoration:none;color:var(--pg-ink);box-shadow:inset 0 0 0 1.5px var(--pg-line);transition:box-shadow .15s}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--pg-ink)}
.chip-totem{gap:6px}.chip-totem::before{content:"";width:9px;height:14px;border-radius:3px;border:1.5px solid currentColor}

/* previews (inherit the retail version of their card) */
.art{position:relative;width:100%;height:100%;overflow:hidden;color:var(--k-ink)}
.art svg{width:100%;height:100%;display:block}
.a-ic{position:absolute;display:block;width:22%;aspect-ratio:1}
.a-catch .fall{top:6%;left:var(--x);width:17%;animation:aFall 2.6s cubic-bezier(.5,0,.8,.6) infinite;animation-delay:var(--d);animation-play-state:paused}
.a-catch .cart{left:38%;bottom:4%;width:30%}
@keyframes aFall{from{transform:translateY(-30%)}to{transform:translateY(240%)}}
.a-memory{position:absolute;inset:12% 16%;display:grid;grid-template-columns:repeat(3,1fr);gap:8%}
.m-card{border-radius:calc(var(--k-r) * .6);background:var(--k-primary);box-shadow:0 4px 0 color-mix(in srgb,var(--k-primary) 60%,#000)}
.m-card.open{background:var(--k-surface);display:grid;place-items:center;padding:12%;box-shadow:0 0 0 3px var(--k-primary)}
.a-grid{position:absolute;inset:8% 22%;display:grid;gap:4%}.a-grid.g4{grid-template-columns:repeat(4,1fr)}
.a-grid span{border-radius:8px;background:color-mix(in srgb,var(--k-surface) 70%,transparent);padding:6%}.a-grid span.hl{background:var(--k-primary)}
.a-merge{position:absolute;inset:10% 24%;display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:5%;border-radius:calc(var(--k-r) + 4px);background:color-mix(in srgb,var(--k-primary) 22%,var(--k-surface))}
.a-merge span{position:relative;border-radius:var(--k-r);background:var(--k-surface);display:grid;place-items:center;padding:14%}
.a-merge span b{position:absolute;right:8%;bottom:4%;font-size:11px;opacity:.7}
.a-stack span{position:absolute;left:50%;bottom:calc(8% + var(--i) * 15%);width:var(--w);height:15%;transform:translateX(calc(-50% + var(--o)));border-radius:6px;background:var(--k-primary);display:grid;place-items:center;transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.a-stack span:nth-child(even){background:var(--k-accent)}.a-stack span svg{width:auto;height:80%}
.gc:hover .a-stack span{transform:translateX(-50%)}
.a-lane{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr)}
.ln{position:relative;background:rgba(0,0,0,.05)}.ln.safe{background:color-mix(in srgb,var(--k-surface) 60%,transparent)}
.ln .car{top:5%;height:90%;width:auto;aspect-ratio:1;animation:aDrive 4s linear infinite;animation-delay:calc(var(--d) - 1.6s);animation-play-state:paused}
@keyframes aDrive{from{left:-20%}to{left:110%}}
.a-lane .pl{left:44%;bottom:2%;width:15%;height:auto;z-index:2}
.a-snake{position:absolute;inset:0}.a-snake span{position:absolute;top:46%;left:calc(18% + var(--i) * 9%);width:8%;aspect-ratio:1;border-radius:22%;background:var(--k-primary)}
.a-snake span:nth-child(even){background:var(--k-accent)}.a-snake span:last-of-type{background:var(--k-ink)}
.a-snake .food{left:78%;top:40%;width:13%}
.a-hidden{position:absolute;inset:4% 3%;display:grid;grid-template-columns:repeat(6,1fr);align-content:center;gap:6% 2%;border-bottom:5px solid var(--k-primary)}
.a-hidden .a-ic{position:static;width:100%;transform:rotate(var(--r))}
.a-hidden .lens{position:absolute;left:52%;top:18%;width:24%;aspect-ratio:1;border-radius:50%;border:5px solid var(--k-ink);background:rgba(255,255,255,.25);transition:transform .6s cubic-bezier(.2,1.2,.4,1)}
.a-hidden .lens::after{content:"";position:absolute;right:-30%;bottom:-30%;width:40%;height:9px;border-radius:5px;background:var(--k-ink);transform:rotate(45deg)}
.gc:hover .a-hidden .lens{transform:translate(-90%,40%)}
.a-puzzle{position:absolute;inset:10% 28%;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--k-ink);padding:3px;border-radius:8px}
.a-puzzle span{background:var(--k-primary);display:grid;place-items:center;padding:12%}.a-puzzle span:nth-child(odd){background:var(--k-accent)}
.a-puzzle span.off{transform:translate(30%,-40%) rotate(8deg);box-shadow:0 8px 16px rgba(0,0,0,.25);transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.gc:hover .a-puzzle span.off{transform:none;box-shadow:none}
.a-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2%}
.a-word span{width:14%;aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:var(--k-surface);font-family:var(--k-display);font-weight:900;font-size:clamp(16px,2.4vw,26px);border:2px solid color-mix(in srgb,var(--k-ink) 15%,transparent)}
.a-word .g{background:var(--k-primary);color:#fff;border-color:transparent}.a-word .y{background:#e3a008;color:#fff;border-color:transparent}
.a-ws{position:absolute;inset:12% 24%;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;font-family:var(--k-display);font-weight:800;font-size:clamp(13px,1.6vw,18px)}
.a-ws span{display:grid;place-items:center;border-radius:6px;background:var(--k-surface)}.a-ws span.hl{background:var(--k-primary);color:#fff}
.a-blocks{position:absolute;inset:8% 34%;border-radius:8px;background:color-mix(in srgb,var(--k-surface) 70%,transparent)}
.a-blocks span{position:absolute;left:calc(var(--x) * 12.5%);top:calc(var(--y) * 25% - 12%);width:calc(var(--w) * 12.5%);height:calc(var(--h) * 25%);border-radius:3px;background:var(--k-primary);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.a-blocks span:nth-child(3n+1){background:var(--k-accent)}.a-blocks span:nth-child(3n+2){background:#e3a008}
.a-runner .shelf{position:absolute;inset:14% 0 30%;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--k-primary) 25%,transparent) 0 40px,transparent 40px 52px);opacity:.6}
.a-runner .cart{left:16%;bottom:12%;width:24%;animation:aJump 1.4s ease-in-out infinite;animation-play-state:paused}
.a-runner .box{position:absolute;left:62%;bottom:14%;width:12%;aspect-ratio:1;border-radius:4px;background:#c9925a}
.a-runner .coin{left:60%;top:22%;width:13%}
.a-runner::after{content:"";position:absolute;left:0;right:0;bottom:12%;height:3px;background:var(--k-ink);opacity:.25}
@keyframes aJump{40%{transform:translateY(-55%)}}
.a-maze{position:absolute;inset:16% 18%;display:grid;grid-template-columns:repeat(8,1fr)}
.a-maze span.w{background:var(--k-primary);border-radius:4px;margin:1px}.a-maze span.d{display:grid;place-items:center}.a-maze span.d::after{content:"";width:22%;aspect-ratio:1;border-radius:50%;background:var(--k-accent)}
.a-maze .pl{left:16%;top:32%;width:13%}.a-maze .ghost{left:66%;top:32%;width:13%}
.a-wheel .wh{position:absolute;left:50%;top:52%;width:min(78%,90cqh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--k-primary) 0 45deg,var(--k-surface) 45deg 90deg,var(--k-accent) 90deg 135deg,var(--k-surface) 135deg 180deg,var(--k-primary) 180deg 225deg,var(--k-surface) 225deg 270deg,var(--k-accent) 270deg 315deg,var(--k-surface) 315deg);box-shadow:0 0 0 6px var(--k-ink);animation:aSpin 6s linear infinite;animation-play-state:paused}
.a-wheel .wh::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--k-surface);box-shadow:0 0 0 4px var(--k-primary)}
.a-wheel .pin{position:absolute;left:50%;top:6%;width:7%;aspect-ratio:.8;transform:translateX(-50%);background:var(--k-ink);clip-path:polygon(0 0,100% 0,50% 100%)}
@keyframes aSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.a-scratch{position:absolute;inset:18% 14%;display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:6%;border-radius:calc(var(--k-r) + 4px);background:var(--k-primary)}
.a-scratch span{border-radius:var(--k-r);background:var(--k-surface);display:grid;place-items:center;padding:10%}
.a-scratch .cov{position:absolute;right:6%;top:10%;bottom:10%;width:41%;padding:0;background:linear-gradient(135deg,#c9ccd1,#eef0f2 50%,#b6b9bf);transition:clip-path .6s ease;clip-path:inset(0 0 0 0)}
.gc:hover .a-scratch .cov,.hb:hover .a-scratch .cov{clip-path:inset(0 0 0 100%)}
.a-pick{position:absolute;inset:26% 12% 18%;display:grid;grid-template-columns:repeat(3,1fr);gap:8%}
.a-pick span{position:relative;border-radius:calc(var(--k-r) * .6);background:var(--k-primary);box-shadow:inset 0 -10px 0 rgba(0,0,0,.14)}
.a-pick span::before{content:"";position:absolute;left:42%;width:16%;top:0;bottom:0;background:var(--k-accent)}
.a-pick span.open{background:transparent;box-shadow:none;display:grid;place-items:center;transform:translateY(-14%)}.a-pick span.open::before{display:none}
.a-slot{position:absolute;inset:20% 14%;display:grid;grid-template-columns:repeat(3,1fr);gap:4%;padding:4%;border-radius:calc(var(--k-r) + 6px);background:var(--k-primary)}
.a-slot span{border-radius:var(--k-r);background:var(--k-surface);display:grid;place-items:center;padding:12%}
.a-whack{position:absolute;inset:10% 18%;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.a-whack span{border-radius:var(--k-r);background:color-mix(in srgb,var(--k-ink) 8%,var(--k-surface));box-shadow:inset 0 -8px 0 var(--k-primary);display:grid;place-items:center;padding:10% 14% 22%}
.a-quiz{position:absolute;inset:12% 18%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.2fr 1fr 1fr;gap:6%}
.a-quiz .q{grid-column:span 2;border-radius:var(--k-r);background:var(--k-surface);display:grid;place-items:center;font-family:var(--k-display);font-weight:900;font-size:34px;color:var(--k-primary)}
.a-quiz .o{border-radius:var(--k-r);background:var(--k-surface)}.a-quiz .o.ok{background:var(--k-primary)}
.a-receipt .paper{position:absolute;left:28%;top:10%;width:36%;height:84%;background:#fffdf7;box-shadow:0 10px 24px rgba(0,0,0,.15);transform:rotate(-4deg);padding:8% 6%;display:grid;gap:9%;align-content:start}
.a-receipt .paper b{height:9%;background:var(--k-primary);border-radius:2px}.a-receipt .paper i{height:4px;background:#d9d9d9}.a-receipt .paper em{height:7px;width:60%;background:#555}
.a-receipt .st{right:18%;top:18%;width:24%;transform:rotate(12deg)}
.gc:hover .art *,.hb:hover .art *,.hero-bento .art *{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.art *{animation:none!important}}

/* contests */
.how{padding:88px 0 40px;scroll-margin-top:64px}
.how-intro{max-width:760px;margin-bottom:36px}.how-try{margin-top:18px}
.how-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.how-col{padding:28px;border-radius:24px;background:var(--pg-surface);border:1px solid var(--pg-line)}
.how-col:first-child{background:var(--pg-blue);color:#fff;border-color:var(--pg-blue)}
.how-col h3{margin:0 0 8px;font-size:26px;letter-spacing:-.03em}.how-col>p{margin:0 0 20px;opacity:.85;max-width:52ch}
.how-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.how-list li{display:grid;gap:3px;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.how-list b{font-size:16px}.how-list span{opacity:.8;font-size:14.5px;line-height:1.5}
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:st}
.steps li{position:relative;padding:44px 18px 0 0;counter-increment:st}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pg-ink);color:var(--pg-bg);font-weight:700;font-size:14px}
.steps li::after{content:"";position:absolute;left:38px;right:8px;top:15px;height:1.5px;background:var(--pg-line)}.steps li:last-child::after{display:none}
.steps b{display:block;font-size:16px;margin-bottom:4px}.steps span{color:var(--pg-ink-2);font-size:14px;line-height:1.45}
.how-foot{margin-top:26px;font-size:13px;color:var(--pg-muted)}

/* totem */
.totem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center;margin:72px 0 64px;padding:48px;border-radius:32px;background:var(--pg-surface);border:1px solid var(--pg-line);scroll-margin-top:84px}
.totem-list{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:12px}
.totem-list li{position:relative;padding-left:28px;color:var(--pg-ink-2);line-height:1.5}.totem-list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:3px;background:var(--pg-blue)}
.totem-list b{color:var(--pg-ink)}
.totem-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.totem-acts .pg-sub{margin:0;font-size:14px}
.dev{position:relative;width:300px;padding:14px 14px 0;border-radius:28px 28px 8px 8px;background:#0b0b0c;box-shadow:0 30px 60px -20px rgba(11,11,12,.55)}
.dev-screen{position:relative;width:272px;height:484px;border-radius:14px;overflow:hidden;background:#000}
.dev-screen iframe{position:absolute;left:0;top:0;width:540px;height:960px;border:0;transform:scale(.5037);transform-origin:0 0;pointer-events:none}
.dev-base{height:70px;margin:0 -14px;border-radius:0 0 8px 8px;background:linear-gradient(#1a1a1d,#0b0b0c)}
.dev::after{content:"";position:absolute;left:50%;bottom:-24px;width:120px;height:24px;transform:translateX(-50%);background:#1a1a1d;border-radius:0 0 10px 10px}

.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:28px 20px 48px;border-top:1px solid var(--pg-line)}.foot .pg-sub{margin:0;flex:1 1 260px;font-size:14px}.foot a{color:var(--pg-muted);font-size:14px}

@media (max-width:980px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:36px}.hero-bento{height:420px}.how-cols{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr;row-gap:22px}.steps li::after{display:none}.totem{grid-template-columns:1fr;padding:28px}.totem-dev{justify-self:center}}
@media (max-width:640px){.nav-links{display:none}.nav-out{margin-left:auto}.hero-bento{height:360px;gap:8px}.hb>span{font-size:13px;padding:8px 12px 10px}.facts{grid-template-columns:1fr;gap:18px}.facts div,.facts div+div{padding:0;border:0}.facts b{font-size:36px}.steps{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.dev{transform:scale(.86);transform-origin:top center;margin-bottom:-70px}}