:root{--bg:#09090b;--s1:#111114;--s2:#17171b;--ln:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.14);--tx:#ececf0;--mu:#8e8e98;--ac:#cfae6f;--ac-ink:#17130a;--r:16px;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:var(--bg);color:var(--tx);font:16px/1.6 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60rem 30rem at 85% -10%,rgba(207,174,111,.10),transparent 60%),radial-gradient(40rem 30rem at -10% 40%,rgba(255,255,255,.035),transparent 60%)}
a{color:inherit;text-decoration:none}
.w{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}
.mono{font-family:"Geist Mono",ui-monospace,monospace}
nav{position:sticky;top:0;z-index:50;background:rgba(9,9,11,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--ln)}
nav .w{display:flex;align-items:center;height:68px;gap:32px}
.logo{font-weight:700;letter-spacing:-.02em;font-size:20px;margin-right:auto}
.logo i{color:var(--ac);font-style:normal}
nav a.l{color:var(--mu);font-size:14px;transition:color .2s}
nav a.l:hover,nav a.l.on{color:var(--tx)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;border:1px solid var(--ln2);transition:transform .35s var(--ease),background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.98)}
.btn.p{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
.btn.p:hover{background:#dcbe85}
.btn.g:hover{border-color:var(--ac)}
nav .btn{height:40px;padding:0 20px;font-size:14px}
h1,h2,h3{letter-spacing:-.035em;line-height:1.02;font-weight:650}
h1{font-size:clamp(2.6rem,6vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
em{font-style:normal;color:var(--ac)}
.mu{color:var(--mu)}
.hero{min-height:calc(100dvh - 68px);display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:56px 0}
.hero p.lead{font-size:18px;color:var(--mu);max-width:46ch;margin:24px 0 32px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.code{background:var(--s1);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
.code header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ln);font-size:13px;color:var(--mu)}
.code pre{padding:20px;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-all;color:#cfcfd6}
.code button{background:none;border:1px solid var(--ln2);color:var(--tx);border-radius:999px;padding:4px 14px;font:inherit;font-size:12px;cursor:pointer}
.code button:hover{border-color:var(--ac)}
.facts{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;color:var(--mu);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--ln)}
.stats div{padding:36px 24px;border-left:1px solid var(--ln)}.stats div:first-child{border:0;padding-left:0}
.stats b{display:block;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;font-weight:650}
.stats span{color:var(--mu);font-size:13px;letter-spacing:.08em}
section{padding:120px 0}
.hd{max-width:60ch;margin-bottom:48px}.hd p{color:var(--mu);margin-top:16px}
.tools{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
input[type=search]{height:46px;width:280px;max-width:100%;border-radius:999px;border:1px solid var(--ln2);background:var(--s1);color:var(--tx);padding:0 20px;font:inherit;font-size:15px}
input[type=search]::placeholder{color:#7b7b85}
input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
#genres{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:36px;padding:0 16px;border-radius:999px;background:none;border:1px solid var(--ln);color:var(--mu);font:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer;transition:all .2s}
.chip:hover{color:var(--tx);border-color:var(--ln2)}.chip.on{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
#games{list-style:none;padding:0 6px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;max-height:560px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ln2) transparent}
#games li{background:var(--s1);border:1px solid var(--ln);border-radius:12px;padding:16px 18px;display:grid;gap:4px;transition:border-color .25s,transform .35s var(--ease)}
#games li:hover{border-color:rgba(207,174,111,.5);transform:translateY(-2px)}
#games li span{font-size:11px;letter-spacing:.1em;color:var(--ac)}
#games li b{font-weight:550;font-size:15px}
#games li.empty{grid-column:1/-1;color:var(--mu)}
.steps{display:grid}
.step{display:grid;grid-template-columns:120px 1fr 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--ln);align-items:start}
.step:last-child{border-bottom:1px solid var(--ln)}
.step .n{font-size:64px;line-height:1;font-weight:300;color:var(--ac);letter-spacing:-.05em}
.step h3{font-size:28px;margin-bottom:10px}.step p{color:var(--mu)}
.step ul{list-style:none;padding:0;display:grid;gap:8px;font-size:15px}
.step li::before,.card li::before{content:"+";color:var(--ac);margin-right:10px}
.why{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{background:var(--s1);border:1px solid var(--ln);border-radius:var(--r);padding:32px;position:relative;overflow:hidden;transition:border-color .3s}
.card:hover{border-color:var(--ln2)}
.card h3{font-size:22px;margin-bottom:12px;letter-spacing:-.02em}.card p{color:var(--mu);font-size:15px}
.why .a{grid-column:span 4}.why .b{grid-column:span 2}.why .c{grid-column:span 3}
.why .hl{background:linear-gradient(160deg,rgba(207,174,111,.14),var(--s1) 55%);border-color:rgba(207,174,111,.3)}
details{border-top:1px solid var(--ln);padding:24px 0}details:last-of-type{border-bottom:1px solid var(--ln)}
summary{cursor:pointer;font-size:19px;font-weight:550;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--ac);font-size:24px;line-height:1;transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mu);margin-top:14px;max-width:62ch}
.faq{max-width:820px}
.cta{padding:140px 0}
.cta h2{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:20px}
footer{border-top:1px solid var(--ln);padding:32px 0;color:var(--mu);font-size:14px}
footer .w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gk{padding:88px 0 40px}.gk .hd{margin-bottom:40px}
.gates{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.card ul{list-style:none;padding:0;display:grid;gap:8px;margin:20px 0 28px;font-size:15px}
.tag{display:inline-block;font-size:11px;letter-spacing:.1em;border:1px solid var(--ln2);border-radius:999px;padding:3px 12px;color:var(--mu);margin-bottom:18px}
.tag.ac{border-color:rgba(207,174,111,.5);color:var(--ac)}
.note{color:var(--mu);font-size:14px;margin-top:20px}
.plans{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.plans .stack{display:grid;gap:14px}
.price{font-size:clamp(2.6rem,5vw,4rem);font-weight:650;letter-spacing:-.04em;line-height:1;margin:18px 0 6px}
.price.s{font-size:2.6rem;margin-bottom:20px}
.price small{font-size:16px;color:var(--mu);font-weight:400;letter-spacing:0;margin-left:6px}
.was{color:var(--mu);font-size:14px;text-decoration:line-through}
.plans .card.big{padding:44px;border-color:rgba(207,174,111,.35);background:linear-gradient(160deg,rgba(207,174,111,.12),var(--s1) 55%)}
.pay{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}.pay span{border:1px solid var(--ln);border-radius:8px;padding:4px 12px;font-size:12px;color:var(--mu);letter-spacing:.08em}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.rv.in{opacity:1;transform:none}
@media(max-width:900px){.hero,.gates,.plans,.step{grid-template-columns:1fr}.hero{min-height:0;padding:40px 0}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0;padding-left:0}.why{grid-template-columns:1fr}.why>*{grid-column:auto!important}section{padding:80px 0}nav .l{display:none}.step{gap:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
/* v2 visuals */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1{background:linear-gradient(180deg,#fff,#b9b9c2);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 em{background:linear-gradient(180deg,#e7cb94,#b8944f);-webkit-background-clip:text;background-clip:text;color:transparent}
.vis{position:relative;height:620px}
.rail{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-8deg) scale(1.08);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.rail .col{display:grid;gap:14px;align-content:start;animation:up 60s linear infinite}
.rail .c1{animation-direction:reverse;margin-top:-80px}.rail .c2{animation-duration:75s}
.rail img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:22px;border:1px solid var(--ln2);box-shadow:0 20px 40px -20px #000;opacity:.9}
@keyframes up{to{transform:translateY(-50%)}}
.vis .code{position:absolute;left:-8%;right:-4%;bottom:8%;backdrop-filter:blur(18px);background:rgba(17,17,20,.82);border-color:var(--ln2)}
#games{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;max-height:none}
#games li{padding:0;border-radius:var(--r);overflow:hidden;background:var(--s1);gap:0;position:relative}
#games li .ic{aspect-ratio:1;background:radial-gradient(circle at 30% 20%,rgba(207,174,111,.25),var(--s2));display:grid;place-items:center;overflow:hidden}
#games li .ic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
#games li:hover .ic img{transform:scale(1.07)}
#games li .ic i{font-style:normal;font-size:34px;color:var(--ac);letter-spacing:-.04em}
#games li span{padding:14px 16px 0}
#games li b{padding:2px 16px 16px;line-height:1.3}
#games li.empty{padding:24px}
#games-more{display:block;margin:28px auto 0}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:start}
.foot nav{position:static;background:none;border:0;backdrop-filter:none;display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{color:var(--mu)}.foot nav a:hover{color:var(--tx)}
.fine{max-width:56ch;font-size:13px;line-height:1.6;opacity:.8;margin-top:12px}
.doc{max-width:760px;padding:96px 24px 120px}
.doc h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:12px}
.doc h2{font-size:22px;letter-spacing:-.02em;margin:40px 0 12px}
.doc p,.doc li{color:#b9b9c2}.doc p+p{margin-top:12px}.doc ul{padding-left:20px;display:grid;gap:6px;margin-top:12px}
.doc .upd{color:var(--mu);font-size:14px;margin-bottom:32px}
@media(max-width:900px){.vis{height:380px}.vis .code{left:0;right:0;bottom:0}#games{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.rail .col{animation:none}}
/* v3 polish */
.foot{display:grid;grid-template-columns:1.2fr 1.8fr;gap:48px}
.foot .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx);margin-bottom:14px;font-weight:550}
.foot .cols a{display:block;color:var(--mu);font-size:14px;padding:4px 0;transition:color .2s}.foot .cols a:hover{color:var(--ac)}
.base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--ln);font-size:13px}
footer .logo{display:inline-block;margin-bottom:8px}
.nf{min-height:60dvh;display:grid;align-content:center;gap:20px;justify-items:start;padding:96px 24px}
.nf h1{font-size:clamp(3rem,8vw,6rem)}
.card,#games li,.step{--mx:50%;--my:0%}
.card::before,#games li::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(207,174,111,.13),transparent 60%)}
.card:hover::before,#games li:hover::before{opacity:1}
.why{gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.why .card{border:0;border-radius:0;padding:40px}
.plans .card.big{position:relative}
.plans .card.big::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(231,203,148,.9),transparent 40%,rgba(207,174,111,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.step .n{background:linear-gradient(180deg,#e7cb94,rgba(207,174,111,.2));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){.foot{grid-template-columns:1fr}.foot .cols{grid-template-columns:1fr 1fr}.why .card{padding:28px}}
/* v4: motion + conversion */
:root{--out:cubic-bezier(.22,1,.36,1)}
.rv{transition:opacity .9s var(--out),transform .9s var(--out);will-change:opacity,transform}.rv.in{will-change:auto}
.btn{transition:transform .5s var(--out),background-color .25s,border-color .25s,box-shadow .4s var(--out)}
.btn.p:hover{box-shadow:0 10px 30px -8px rgba(207,174,111,.55)}
.card,#games li{transition:border-color .3s,transform .5s var(--out)}
.card:hover{transform:translateY(-3px)}
@keyframes inup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.in-up{animation:inup 1s var(--out) both;animation-delay:calc(var(--i,0)*90ms + 80ms)}
@keyframes draw{from{stroke-dashoffset:1100}to{stroke-dashoffset:0}}
.draw{stroke-dasharray:1100;animation:draw 2.4s var(--out) .3s both}
.vel{position:relative;isolation:isolate;overflow:hidden}
.vel canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,11,.35),rgba(9,9,11,.15) 40%,var(--bg))}
#hero{min-height:min(86dvh,760px);display:grid;align-items:center;border-bottom:1px solid var(--ln)}
.vel-in{padding-top:72px;padding-bottom:72px}
.vel-in h1{margin-bottom:24px}.vel-in .lead{font-size:18px;color:#c4c4cc;max-width:52ch;margin-bottom:32px}
.cvel{margin:0 -24px;padding:0 24px;border-radius:var(--r);border:1px solid var(--ln);margin-bottom:96px}
.cta-in{padding:120px 0;max-width:640px}.cvel.cta{padding-block:0}
.tight{padding:96px 0 0}.tight:last-child{padding-bottom:120px}
.wide{width:100%}
.save{display:inline-block;margin-left:10px;font-size:12px;letter-spacing:.06em;color:var(--ac);border:1px solid rgba(207,174,111,.45);border-radius:999px;padding:2px 10px;vertical-align:middle}
.pay-off{color:var(--mu);font-size:14px;margin:14px 0 20px!important}
.plans .card.big .btn{margin-top:4px}
.pay a{margin-left:auto;color:var(--mu);font-size:13px;align-self:center}.pay a:hover{color:var(--ac)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs .hl{background:linear-gradient(160deg,rgba(207,174,111,.12),var(--s1) 55%);border-color:rgba(207,174,111,.3)}
.vs ul.neg li::before{content:"-";color:#7b7b85}
.note a,.faq a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento .c2{grid-column:span 2}.bento .c3{grid-column:span 3}
.bento .card{display:flex;flex-direction:column;justify-content:flex-end;min-height:260px}
.stat{position:relative;display:grid;place-items:center;height:104px;margin:0 auto auto;width:220px;color:rgba(255,255,255,.12)}
.stat svg{position:absolute;inset:0;width:100%;height:100%}.stat b{font-size:56px;font-weight:600;color:var(--tx);letter-spacing:-.04em}
.orb{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:0 auto auto;border-radius:50%;border:1px solid var(--ln2);color:var(--ac)}
.orb::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--ln)}
.orb.s{width:48px;height:48px;margin:0 0 auto}
.wave{width:100%;margin:0 0 20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chips span{display:inline-flex;align-items:center;gap:8px;font-size:13px;border:1px solid var(--ln2);border-radius:999px;padding:4px 14px 4px 4px;color:var(--tx)}
.chips img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.bento .card h3,.bento .card p{position:relative}
.buybar{position:fixed;left:50%;bottom:20px;z-index:55;display:flex;align-items:center;gap:20px;padding:10px 10px 10px 24px;border-radius:999px;border:1px solid var(--ln2);background:rgba(17,17,20,.82);backdrop-filter:blur(16px);transform:translate(-50%,140%);opacity:0;transition:transform .6s var(--out),opacity .4s;white-space:nowrap}
.buybar.on{transform:translate(-50%,0);opacity:1}
.buybar b{color:var(--ac);margin:0 4px}.buybar s{color:var(--mu);font-size:13px}
.buybar .btn{height:40px;padding:0 20px;font-size:14px}
@media(max-width:900px){.vs,.bento{grid-template-columns:1fr}.bento .c2,.bento .c3{grid-column:auto}.bento .card{min-height:0}.vel-in{padding-block:48px}.tight{padding-top:64px}.cta-in{padding:72px 0}.cvel{margin-inline:0}}
@media(prefers-reduced-motion:reduce){.in-up,.draw{animation:none}.draw{stroke-dasharray:none}.card:hover{transform:none}.buybar{transition:none}}
main.w{overflow-x:clip}
/* v5 */
.hb .c3{min-height:340px}
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.bento .card .head+h3{margin-top:28px}
.ticks{list-style:none;padding:0;display:grid;gap:8px;margin:18px 0 0;font-size:14px;color:var(--tx)}
.ticks li::before{content:"";display:inline-block;width:14px;height:8px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg) translateY(-3px);margin-right:12px}
.stat.free{margin:24px auto 12px;width:200px;height:96px}.stat.free b{font-size:48px;color:var(--ac)}
.mt{margin-top:18px}
.prem{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding:48px;border:1px solid rgba(207,174,111,.3);border-radius:var(--r);background:linear-gradient(160deg,rgba(207,174,111,.12),var(--s1) 60%)}
.prem h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:10px}.prem p{color:var(--mu);max-width:46ch}
.gh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.gh .tag{margin:0}
.brand{height:32px;width:auto;display:block}.brand.sq{height:36px;border-radius:50%}
.gp{padding-top:72px;padding-bottom:120px}.gp .hd{margin-bottom:32px}.gp h1.h2{font-size:clamp(2.2rem,5vw,3.6rem);background:none;color:var(--tx)}
.gp #games{margin-bottom:56px;max-height:none}
.stats a b{color:inherit;transition:color .2s}.stats a:hover b{color:var(--ac)}
@media(max-width:900px){.prem{padding:28px}}
.promo{display:flex;justify-content:center;align-items:center;gap:16px;padding:8px 16px;font-size:13px;color:var(--ac-ink);background:var(--ac);font-weight:550}
.promo s{opacity:.6;font-weight:400}.promo a{text-decoration:underline;text-underline-offset:3px}
.pay{align-items:center;gap:20px}.pay .logos{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.pay .logos img{height:22px;width:auto;opacity:.85}
.pay span.mu{border:0;padding:0;font-size:13px;letter-spacing:0}
.mykey{margin-top:40px}.keyv{word-break:break-all;font-size:14px;margin:12px 0;color:var(--tx)!important}

/* v6: syntax colours, dashboard, France badge */
.c-kw{color:#d29de6}.c-str{color:#a5c78a}.c-num{color:#e6b673}.c-com{color:#6f7280;font-style:italic}.c-fn{color:#e7cb94}.c-bi{color:#8fb4e3}.c-id{color:#dcdce2}.c-p{color:#8e8e98}
.base{align-items:center}
.fr{display:inline-flex;align-items:center;gap:8px}.fr i{width:6px;height:14px;display:inline-block}
.fr i:nth-child(1){background:#2f5bd1;border-radius:2px 0 0 2px}.fr i:nth-child(2){background:#ededf0;margin-left:-8px}.fr i:nth-child(3){background:#d1343f;margin-left:-8px;border-radius:0 2px 2px 0}
.dash{padding-top:64px;padding-bottom:120px}
.dload{padding:120px 0;color:var(--mu);text-align:center}
.dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.dhead h1.h2{font-size:clamp(2rem,4vw,3rem);background:none;color:var(--tx)}
.dgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:14px}
.dgrid .card{min-height:300px}
.bigtime{font-size:clamp(2.6rem,6vw,4rem);font-weight:650;letter-spacing:-.04em;line-height:1.1;margin:18px 0 8px;color:var(--ac)}
.bar{height:6px;border-radius:99px;background:var(--ln2);overflow:hidden;margin:20px 0 4px}.bar div{height:100%;width:0;background:var(--ac);border-radius:99px;transition:width 1.2s var(--out)}
.keybox{background:var(--bg);border:1px solid var(--ln2);border-radius:12px;padding:16px 18px;margin:18px 0;word-break:break-all;font-size:14px}
.dcode{margin-top:0}.dcode pre{font-size:13px;word-break:break-all}
button.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
button.btn{font-family:inherit;cursor:pointer;background:transparent;color:var(--tx)}button.btn.p{background:var(--ac);color:var(--ac-ink)}
@media(max-width:900px){.dgrid{grid-template-columns:1fr}.dgrid .card{min-height:0}}
[hidden]{display:none!important}
.dash .dhead{margin-bottom:40px}.dash #dnone{margin-top:8px}.dash .dgrid{margin-bottom:20px}

/* v7: apparition animations */
h1[data-split]{background:none;color:var(--tx);-webkit-text-fill-color:currentColor}
.wd{display:inline-block;opacity:0;transform:translateY(.5em) scale(.98);filter:blur(12px);animation:wdin 1s var(--out) forwards;animation-delay:calc(var(--i,0)*110ms + 120ms)}
@keyframes wdin{to{opacity:1;transform:none;filter:blur(0)}}
h1 em.wd{background:linear-gradient(100deg,#b8944f 0%,#f0d9a6 35%,#b8944f 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:wdin 1s var(--out) forwards,sheen 6s ease-in-out 1.6s infinite;animation-delay:calc(var(--i,0)*110ms + 120ms),1.6s}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.rail img{animation:pop 1.1s var(--out) both;animation-delay:calc(var(--n,0)*70ms + 400ms)}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:.9;transform:none}}
.vis{--px:0;--py:0}
.vis .code{transform:translate(calc(var(--px)*-18px),calc(var(--py)*-12px));transition:transform .5s var(--out)}
.vis .rail{translate:calc(var(--px)*14px) calc(var(--py)*10px);transition:translate .6s var(--out)}
[data-type] span{opacity:0;animation:fadein .35s ease forwards;animation-delay:calc(var(--k,0)*45ms + 1.1s)}
@keyframes fadein{to{opacity:1}}
.btn.p{position:relative;overflow:hidden}
.btn.p::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--out)}
.btn.p:hover::after{transform:translateX(120%)}
.rv{transform:translateY(32px) scale(.985);filter:blur(8px);transition:opacity .9s var(--out),transform .9s var(--out),filter .9s var(--out)}
.rv.in{filter:none;transform:none}
.orb{animation:float 6s ease-in-out infinite}.orb::before{animation:ring 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
@keyframes ring{50%{transform:scale(1.12);opacity:.5}}
.rv .draw{animation-play-state:paused}.rv.in .draw{animation-play-state:running}
.stat ellipse{stroke-dasharray:780;stroke-dashoffset:780;transition:stroke-dashoffset 2s var(--out) .3s}.rv.in .stat ellipse{stroke-dashoffset:0}
.stats b{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.wd,.rail img,[data-type] span{animation:none;opacity:1;filter:none;transform:none}h1 em.wd{animation:none}.rv{filter:none}.orb,.orb::before{animation:none}.stat ellipse{stroke-dashoffset:0}}
.card.rv.in:hover{transform:translateY(-3px)}
#games.rv,.tools.rv,.faq.rv{filter:none}