:root{--bg:#0c2949;--surface:#133b61;--line:#28557c;--text:#fff9ed;--soft:#d1e1ed;--muted:#adc4dc;--yellow:#ffd875;--pink:#f9a8c9;--purple:#c0a2f4;--mint:#a5dfd0;--ink:#291e38;--radius:1.3rem;--font:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:1.0625rem/1.65 var(--font);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}a{color:var(--yellow)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:5px;border-radius:.25rem}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}p{text-wrap:pretty}
.wrap{width:min(72rem,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;top:-8rem;left:1rem;z-index:10;padding:.6rem 1rem;background:var(--yellow);color:var(--ink)}.skip:focus{top:1rem}
.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.3rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);font-size:1.2rem;font-weight:850;line-height:1.05;letter-spacing:-.03em}
.brand img{width:9rem;height:auto}
.lang{position:relative}.lang summary{list-style:none;display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:.875rem;cursor:pointer}
.lang summary::-webkit-details-marker{display:none}.lang summary:hover,.lang[open] summary{border-color:var(--purple)}.lang svg{width:1rem;height:1rem}
.lang ul{position:absolute;right:0;top:calc(100% + .6rem);min-width:10rem;list-style:none;padding:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:0 .6rem 2rem #0006}
.lang a{display:block;padding:.6rem .8rem;border-radius:.6rem;text-decoration:none;color:var(--text);font-size:.9375rem}.lang a:hover{background:var(--line)}.lang [aria-current]{color:var(--yellow);font-weight:700}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% 70%,#a471d122,transparent 60%)}
.hero-grid{display:grid;align-items:center;gap:1.5rem;padding-block:2.6rem 3rem}
.eyebrow{font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.13em;color:var(--yellow)}
h1{font-size:clamp(2.7rem,1.35rem + 4.3vw,4.75rem);margin-block:1rem 1.3rem;max-width:12ch}
.lead{max-width:35rem;color:var(--soft);font-size:1.125rem}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:1.7rem}
.store{display:inline-block;border-radius:.6rem;transition:transform .15s}.store:hover{transform:translateY(-3px)}.store img{height:3.375rem;width:auto}
.text-link{font-size:.9375rem;font-weight:650;text-underline-offset:.3rem}.text-link span{margin-left:.35rem}.note{font-size:.8125rem;color:var(--muted);margin-top:.8rem}
.hero-art{position:relative;min-width:0;width:100%;max-width:32rem;justify-self:center;margin-block:1rem 0}
.card-stage{position:relative;width:100%;height:clamp(23rem,73vw,29rem);isolation:isolate}
.art-card{position:absolute;width:74%;height:auto;border-radius:1rem;box-shadow:0 .5rem 0 #0002,0 1.2rem 2rem #0005;border:2px solid #ffffff33}
.art-card.back-left{top:.5rem;left:1%;transform:rotate(-12deg)}.art-card.back-right{right:1%;top:3rem;transform:rotate(12deg)}.art-card.front{z-index:1;top:8rem;left:12%;transform:rotate(-4deg)}.card-star{position:absolute;z-index:2;right:1%;top:0;width:3rem;transform:rotate(15deg);color:var(--mint)}
.confetti{position:absolute;width:.5rem;height:1.4rem;border-radius:.2rem;background:var(--pink);left:4%;bottom:1rem;transform:rotate(25deg)}.confetti.two{background:var(--yellow);left:auto;right:1%;top:0;transform:rotate(-30deg)}
.hero-art figcaption{font-size:.8125rem;color:var(--muted);text-align:center;max-width:26rem;margin:auto}
.stats{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-block:3rem 4.5rem}
.stats li{background:var(--bg);padding:1.25rem}.stats strong{display:block;color:var(--yellow);font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.2;letter-spacing:-.04em}.stats li:nth-child(2) strong{color:var(--pink)}.stats li:nth-child(3) strong{color:var(--purple)}.stats li:nth-child(4) strong{color:var(--mint)}.stats span{display:block;margin-top:.4rem;color:var(--muted);font-size:.875rem}
h2{font-size:clamp(2rem,1.2rem + 2.5vw,3rem);margin-bottom:1rem}.intro{max-width:37rem;color:var(--soft)}
.how{padding-bottom:5rem}.how-grid{display:grid;gap:3rem;align-items:center}.steps{list-style:none;padding:0;margin-top:1.7rem;display:grid;gap:1rem;counter-reset:step}
.steps li{position:relative;padding:1.1rem 1.25rem 1.2rem 4.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:1.1rem;top:1.1rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--purple);color:var(--ink);font-weight:750}.steps li:nth-child(2)::before{background:var(--pink)}.steps li:nth-child(3)::before{background:var(--mint)}
.steps h3{font-size:1.125rem;letter-spacing:-.02em;margin-bottom:.4rem}.steps p{font-size:.9375rem;color:var(--muted)}
.demo{order:2;max-width:24rem;width:100%;justify-self:center;text-align:center}.demo>.eyebrow{margin-bottom:1.4rem}.demo-card{padding:2rem 1.8rem;border-radius:1.5rem;background:#fff4e3;color:var(--ink);box-shadow:.6rem .6rem 0 var(--purple);transform:rotate(-3deg)}
.demo-card svg{width:3.8rem;height:3.8rem;color:#775393;margin:1.3rem auto}.demo-card .category{font-size:.875rem;color:#695470}.demo-card h3{font-size:2.8rem;margin-bottom:.75rem}.demo-card .hint{font-size:.9375rem;color:#695470}.demo-card .prompt{padding-top:1.4rem;margin-top:1.4rem;border-top:1px dashed #c0a8c7;font-size:.8125rem;font-weight:700}
.demo figcaption{margin-top:1.7rem;font-size:.75rem;color:var(--muted)}
.modes{padding-bottom:5rem;scroll-margin-top:2rem}.mode-grid{display:grid;gap:1.2rem;margin-top:2rem}.mode{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:1.7rem}
.mode::after{content:"";position:absolute;right:-3rem;bottom:-5rem;width:13rem;height:13rem;border-radius:50%;background:radial-gradient(closest-side,var(--accent),transparent);opacity:.13;pointer-events:none}.mode .eyebrow{color:var(--accent);font-size:.6875rem}.mode svg{width:3rem;height:3rem;padding:.55rem;background:var(--accent);color:var(--ink);border-radius:.9rem;margin-bottom:1.4rem}.mode .game-art{width:100%;height:9rem;object-fit:contain;margin:0 auto 1rem}.mode h3{font-size:2rem;margin-block:.8rem}.mode .tagline{font-weight:650;color:var(--text);margin-bottom:.55rem}.mode p:last-child{color:var(--muted);font-size:.9375rem}
.categories{margin-top:2rem;padding:1.5rem 1.7rem;border:1px dashed var(--line);border-radius:var(--radius)}.categories h3{font-size:1.2rem;margin-bottom:.5rem}.categories p{font-size:.9375rem;color:var(--muted)}.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.chips li{display:flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:99px;background:var(--surface);font-size:.8125rem;color:var(--soft)}.chips svg{width:1rem;height:1rem;color:var(--pink)}
.faq{width:min(48rem,100% - 2.5rem);margin-inline:auto;padding-bottom:5rem}.faq details{border-bottom:1px solid var(--line)}.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.3rem;padding-block:1.25rem;font-size:1.0625rem;line-height:1.4;font-weight:650}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:1.6rem;font-weight:400;flex:none;color:var(--pink)}.faq [open] summary::after{content:"−"}.faq details p{padding-bottom:1.4rem;color:var(--muted);font-size:.9375rem}
.cta{text-align:center;border:1px solid var(--line);border-radius:2rem;background:radial-gradient(ellipse at 50% 0,#c0a2f426,transparent 70%),var(--surface);padding:3rem 1.5rem;margin-bottom:3rem}.cta .app-icon{width:5rem;height:5rem;border-radius:1.2rem;margin:0 auto 1.5rem;box-shadow:0 .5rem 1.5rem #0005}.cta>p{color:var(--soft)}.cta .store{margin-top:1.7rem}
.foot{padding-block:2rem 2.5rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}.foot-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.foot nav{display:flex;flex-wrap:wrap;gap:1rem}.foot a{color:var(--soft);text-underline-offset:.25rem}.foot small{display:block;margin-top:1.2rem;max-width:58rem;font-size:.6875rem;color:var(--muted)}
.error-page{min-height:100vh;display:grid;place-content:center;text-align:center;padding:2rem}.error-page .brand{justify-content:center}.error-page h1{max-width:none;margin-inline:auto}.error-page section{margin-block:2rem}.error-page h2{font-size:1.4rem}.error-page p{color:var(--muted);margin-bottom:.6rem}
@media (min-width:48rem){.mode-grid{grid-template-columns:1fr 1fr}.hero-grid{padding-block:3.5rem}.card-stage{height:28rem}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stats li{padding:1.5rem}}
@media (min-width:60rem){.hero-grid{grid-template-columns:1.12fr 1fr;gap:2.8rem;padding-block:3rem 4.5rem}.hero-art{margin:0}.how-grid{grid-template-columns:1fr 1.1fr;gap:5rem}.demo{order:0}.mode{padding:2rem}.categories{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}.chips{margin:0;justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.store{transition:none}}