:root{color-scheme:dark;--bg:#071328;--bg2:#0c1c35;--surface:#10223e;--ink:#f7fbff;--muted:#a8bfd6;--cyan:#20d1fc;--mint:#59f2bd;--coral:#ff6452;--amber:#ffc447;--line:#28445d;--ease-out:cubic-bezier(.23,1,.32,1);--display:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;--body:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;overflow-x:clip}
::selection{background:var(--mint);color:var(--bg)}
a{color:inherit;text-underline-offset:.22em}
button,a,summary{touch-action:manipulation}
a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:4px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
img,video{max-width:100%}
img{display:block}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(3.5rem,6.3vw,6rem);margin-bottom:1.5rem}
h2{font-size:clamp(2.5rem,4.4vw,4.5rem);margin-bottom:1.4rem}
h3{font-size:1.3rem}
p{max-width:70ch}
.shell{width:min(100% - 3rem,1240px);margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--mint);color:var(--bg);padding:.7rem 1rem}
.skip-link:focus{top:1rem}
.site-header{position:relative;z-index:10;background:#071328ef;border-bottom:1px solid #24415a}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(.6rem,2vw,2rem);min-height:5.5rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font:800 1.4rem/1 var(--display);white-space:nowrap}
.brand img{border-radius:9px}
.site-header nav{display:flex;gap:2.2rem}
.site-header nav a,.nav-cta{text-decoration:none;font-weight:650}
.site-header nav a{color:var(--muted)}
.site-header nav a:hover,.text-link:hover,.site-footer a:hover{color:var(--mint)}
.language-picker{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .65rem;border:1px solid #36566c;border-radius:9px;background:#122841;color:#d7edfa;white-space:nowrap}
.language-picker select{max-width:168px;border:0;background:transparent;color:inherit;font:700 .86rem var(--body);cursor:pointer}
.language-picker option{color:#071328;background:#fff}
.nav-cta{background:var(--mint);color:#071328;padding:.68rem 1.05rem;border-radius:99px}
.nav-cta:hover,.button-primary:hover{background:#b9ffe3;color:#071328}
.hero{min-height:640px;display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;align-items:center;padding-block:5rem 6rem}
.availability{display:inline-flex;align-items:center;gap:.6rem;color:var(--mint);font-weight:750;margin-bottom:1.8rem}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mint);outline:3px solid #59f2bd22}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero-lead{font-size:clamp(1.1rem,1.5vw,1.35rem);color:#d5e8f4;max-width:35ch;line-height:1.55}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem;margin:2.2rem 0 1.5rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:54px;padding:.85rem 1.35rem;border-radius:14px;text-decoration:none;font-weight:800}
.button-primary{background:var(--mint);color:var(--bg);box-shadow:0 14px 30px #0003}
.text-link{font-weight:750;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.16rem}
.hero-note{color:var(--muted);font-size:.94rem;max-width:48ch}
.hero-stage{position:relative;min-height:620px;display:grid;place-items:center;isolation:isolate}
.stage-orbit{position:absolute;border:1px solid #26d8fb56;border-radius:50%;z-index:-1}
.stage-orbit-one{width:min(100%,560px);aspect-ratio:1;transform:rotate(-18deg) scaleY(.73)}
.stage-orbit-two{width:min(75%,430px);aspect-ratio:1;transform:rotate(29deg) scaleY(1.15);border-color:#59f2bd35}
.impact-character{position:absolute;z-index:3;left:50%;top:0;width:155px;height:auto;opacity:0;transform:translate(-50%,-150px) rotate(-22deg);pointer-events:none;filter:drop-shadow(0 18px 19px #061221a6)}
.hero-phone{width:min(275px,62%);aspect-ratio:1126/2436;padding:8px;background:#03060b;border:2px solid #496b81;border-radius:39px;box-shadow:0 40px 75px #0008;overflow:hidden;transform:rotate(5deg)}
.hero-phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:30px}
.hero-phone video,.video-player video{pointer-events:none}
.game-demo video{display:block;width:min(100%,320px);height:auto;aspect-ratio:720/1558;border-radius:24px;pointer-events:none;margin:2rem auto;background:#02050a}
.game-detail-art{width:min(65%,280px);height:auto;margin:2rem auto}
.game-card .text-link{display:inline-block;margin-top:1rem;color:var(--mint)}
.game-card{height:auto}
.app-store-cta[aria-disabled="true"]{cursor:default;background:#1c3546;color:#c5d9e6;box-shadow:none;font-size:.88rem}
.language-suggestion{position:fixed;bottom:1rem;left:1rem;right:1rem;margin-inline:auto;width:fit-content;max-width:calc(100% - 2rem);padding:1rem;z-index:50;display:flex;align-items:center;gap:1rem;background:#10223e;box-shadow:0 12px 32px #0008;border-radius:12px;color:var(--ink);flex-wrap:wrap}
.language-suggestion[hidden]{display:none}
.language-suggestion a{color:var(--mint);font-weight:750}
.language-suggestion button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);padding:.5rem .8rem;border-radius:8px;cursor:pointer}
.language-suggestion button:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.article-cta{margin-block:3rem;padding-block:2rem;border-block:1px solid var(--line)}
.article-cta .text-link{display:block;width:fit-content;margin-top:1.5rem}
@media(max-width:700px){.site-header .nav-cta{max-width:110px;white-space:normal;text-align:center;line-height:1.3}.game-card .text-link{font-size:.92rem}}
.falling-phone{position:absolute;z-index:30;overflow:hidden;padding:8px;background:#03060b;border:2px solid #496b81;border-radius:39px;box-shadow:0 30px 55px #0008;pointer-events:none;transform-origin:center center}
.falling-phone img,.falling-phone canvas{display:block;width:100%;height:100%;border-radius:29px;object-fit:cover}
.video-section{background:var(--bg2);padding:6rem 0}
.video-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);align-items:center;gap:clamp(3rem,8vw,8rem)}
.video-copy>p{font-size:1.13rem;color:#cfe0eb}
.video-copy .video-transcript{font-size:1rem;padding:1rem 0;border-top:1px solid var(--line);color:var(--muted)}
.video-stage{position:relative;min-height:705px;isolation:isolate;display:flex;align-items:flex-end;justify-content:center}
.video-player{width:min(100%,292px);padding:7px;background:#02050a;border-radius:31px;box-shadow:0 25px 50px #0008;transform:rotate(3deg)}
.video-player video{display:block;width:100%;aspect-ratio:1126/2436;object-fit:cover;border-radius:23px;background:#02050a}
.games-section{padding-block:7rem}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.5rem}
.section-head p{color:var(--muted);max-width:30ch;font-size:1.1rem}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.game-card{min-width:0;min-height:305px;display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem;background:#0e2039;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}
.game-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 10%,var(--glow),transparent 55%);pointer-events:none}
.game-card>*{position:relative}
.game-card img{width:142px;height:142px;object-fit:contain;align-self:flex-end;filter:drop-shadow(0 12px 18px #0005)}
.game-card h3{font-size:1.5rem;margin:.4rem 0}
.game-card p{color:#c5d8e6;margin-bottom:1rem}
.game-card span{font-size:.79rem;font-weight:800;letter-spacing:.02em;color:var(--tint)}
.game-cyan{--tint:#37d9ff;--glow:#147ea745}.game-violet{--tint:#b3a4ff;--glow:#7666bf40}.game-coral{--tint:#ff8b82;--glow:#b84a4940}.game-mint{--tint:#66f4c5;--glow:#1a947340}.game-amber{--tint:#ffd56d;--glow:#a4781c45}.game-blue{--tint:#82aaff;--glow:#4d74c345}
.how-section{background:#d8f9ee;color:#062033;padding:6rem 0}
.how-layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem}
.how-layout h2{max-width:12ch}
.how-layout p{font-size:1.09rem;color:#234454}
.how-layout .text-link{color:#0d576c}
.how-steps{display:flex;flex-direction:column;justify-content:center}
.how-steps>div{border-top:1px solid #8ebfb7;padding:1.3rem 0;display:grid;grid-template-columns:90px 1fr;column-gap:1rem}
.how-steps span{font-size:.8rem;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:#276e72}
.how-steps strong{font:750 1.3rem var(--display)}
.how-steps p{grid-column:2;margin:.3rem 0 0}
.beyond{display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:center;padding-block:8rem}
.beyond-copy p{font-size:1.12rem;color:#d4e4ef}
.beyond-copy .muted{font-size:.95rem;color:var(--muted)}
.beyond-art{height:370px;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #34516d;border-radius:24px;background:radial-gradient(circle at center,#21486d 0,#10253f 45%,#0a1c34 90%);overflow:hidden}
.medal-gallery{display:flex;align-items:center;justify-content:center;width:100%;gap:clamp(.3rem,1.1vw,1rem);padding:1rem 1rem 2.4rem;perspective:1000px}
.medal-card{width:min(30%,160px);border:0;padding:0;background:transparent;color:var(--ink);font:750 .9rem/1.2 var(--display);cursor:pointer;transform:translateY(7px);transition:transform 260ms var(--ease-out);touch-action:manipulation}
.medal-card:nth-child(2){transform:translateY(-12px)}
.medal-card:hover,.medal-card:focus-visible{transform:translateY(-19px)}
.medal-card:focus-visible{outline:3px solid var(--mint);outline-offset:6px;border-radius:14px}
.medal-rotor{display:block;position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;transition:transform 720ms cubic-bezier(.2,.8,.2,1)}
.medal-card[aria-pressed="true"] .medal-rotor{transform:rotateY(360deg)}
.medal-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px #fff6,0 14px 18px #0008;transition:opacity 0s 360ms}
.medal-face img{width:100%;height:100%;object-fit:cover}
.medal-back{opacity:0}
.medal-card[aria-pressed="true"] .medal-front{opacity:0}
.medal-card[aria-pressed="true"] .medal-back{opacity:1}
.medal-card[aria-pressed="true"] .medal-back:after{content:"";position:absolute;inset:-100% -40%;background:linear-gradient(100deg,transparent 38%,#fff9 50%,transparent 62%);transform:translateX(-80%) rotate(15deg);animation:medal-shine 850ms 250ms both}
.medal-name{display:block;margin-top:.65rem}
.medal-hint{color:var(--mint)!important;font-size:.94rem!important}
@keyframes medal-shine{to{transform:translateX(80%) rotate(15deg)}}
.beyond-art-label{position:absolute;bottom:1.3rem;left:0;right:0;text-align:center;color:#d8eafa;font-weight:750}
.blog-preview{padding-bottom:7rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.blog-grid a{min-height:260px;padding:1.5rem;background:#10233e;border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:border-color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
.blog-grid a:hover{background:#15304b;border-color:var(--cyan)}
.blog-grid span,.article-meta{color:var(--mint);font-size:.83rem;font-weight:750;letter-spacing:.02em}
.blog-grid h3{font-size:1.45rem;margin:2rem 0 1rem}
.blog-grid p{color:var(--muted)}
.faq{padding-bottom:8rem;max-width:880px}
.faq h2{margin-bottom:2rem}
details{border-top:1px solid var(--line);padding:1.1rem 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:750 1.2rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--mint);font-size:1.4rem}
details[open] summary:after{content:"−"}
details p{color:var(--muted);margin:1rem 0 0}
.site-footer{border-top:1px solid var(--line);background:#051020;padding:3rem 0;color:var(--muted)}
.footer-layout{display:grid;grid-template-columns:1fr auto;gap:2rem}
.footer-layout>div:nth-child(2){display:flex;gap:1.4rem;flex-wrap:wrap}
.footer-layout a{text-decoration:none}
.footer-layout small{grid-column:1/-1;border-top:1px solid #21384b;padding-top:1.3rem}
.page-intro{padding-block:5rem 3rem}
.page-intro h1{max-width:12ch}
.page-intro p{color:var(--muted);font-size:1.2rem}
.article-list{display:grid;gap:1rem;padding-bottom:7rem}
.article-list a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding:1.8rem 0;border-top:1px solid var(--line);text-decoration:none}
.article-list a:hover h2{color:var(--mint)}
.article-list h2{font-size:clamp(1.6rem,3vw,2.6rem);margin:.5rem 0}
.article-list p{color:var(--muted);margin:0}
.article-list .arrow{font-size:2rem;color:var(--mint)}
.article-shell{width:min(100% - 3rem,780px);margin-inline:auto;padding:4rem 0 8rem}
.article-shell .back-link{display:inline-block;color:var(--mint);margin-bottom:2rem}
.article-shell h1{font-size:clamp(2.7rem,5vw,4.7rem);margin:.7rem 0 1.5rem}
.article-shell .intro{font-size:1.3rem;color:#d5e8f4}
.article-shell h2{font-size:2rem;margin:3rem 0 1rem}
.article-shell h3{font-size:1.35rem;margin:2rem 0 .6rem}
.article-shell p,.article-shell li{font-size:1.07rem;color:#d0e0ea}
.article-shell li{margin:.6rem 0}
.article-shell ul,.article-shell ol{padding-left:1.5rem}
.article-shell a{color:#75e7fd}
.article-shell a.button-primary{color:var(--bg)}
.article-shell .article-note{padding:1rem 1.2rem;background:#112844;border-radius:12px;color:#c6e0ec}
.article-shell .related{margin-top:4rem;border-top:1px solid var(--line);padding-top:2rem}
.article-shell .related a{display:block;margin:.6rem 0}
.legal-shell{width:min(100% - 3rem,820px);margin-inline:auto;padding:4rem 0 8rem}
.legal-shell h1{font-size:clamp(2.7rem,5vw,4.7rem)}
.legal-shell h2{font-size:1.65rem;margin:2.6rem 0 .8rem}
.legal-shell p,.legal-shell li{color:#d2e2ec}
.legal-shell a{color:#70e9ff}
.legal-shell .legal-date{color:var(--muted);font-size:.9rem}
.legal-shell .legal-notice{background:#17304b;border:1px solid #37617a;border-radius:12px;padding:1rem 1.2rem}
@media(max-width:950px){.hero{grid-template-columns:1fr 1fr;gap:1rem}.hero-stage{min-height:560px}.video-layout{gap:3rem}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.beyond{gap:2rem}}
@media(max-width:700px){.shell{width:min(100% - 2rem,1240px)}.nav-wrap{min-height:4.7rem;gap:.6rem}.brand{font-size:1.15rem}.site-header nav{display:none}.language-picker{margin-left:auto}.language-picker select{max-width:122px}.nav-cta{font-size:.85rem;padding:.6rem .8rem}.hero{display:block;padding-block:4rem 2rem;min-height:auto}.hero h1{font-size:clamp(3.05rem,12vw,5rem)}.hero-stage{min-height:500px;margin-top:1rem}.hero-phone{width:min(235px,55%)}.impact-character{width:120px}.video-section{padding:4rem 0}.video-layout{display:block}.video-copy{margin-bottom:1rem}.video-stage{min-height:660px;max-width:400px;margin-inline:auto}.video-player{width:min(75%,270px)}.games-section{padding-block:5rem}.section-head{display:block}.game-grid{gap:.8rem}.game-card{min-height:245px;padding:1rem}.game-card img{width:100px;height:100px}.game-card h3{font-size:1.22rem}.game-card p{font-size:.95rem}.game-card span{font-size:.78rem}.how-section{padding:4rem 0}.how-layout{display:block}.how-steps{margin-top:3rem}.beyond{display:block;padding-block:5rem}.beyond-art{margin-top:2rem;height:270px}.blog-grid{grid-template-columns:1fr}.blog-grid a{min-height:220px}.blog-grid h3{margin-top:1.4rem}.faq{padding-bottom:5rem}.footer-layout{grid-template-columns:1fr}.footer-layout small{grid-column:1}.article-shell,.legal-shell{padding-block:3rem 5rem}}
@media(max-width:520px){.game-grid{grid-template-columns:1fr}.game-card{min-height:166px;flex-direction:row-reverse;align-items:center;gap:1rem}.game-card img{flex:none;align-self:center;width:112px;height:112px}.game-card>div{flex:1}.game-card h3{margin:.1rem 0 .35rem}.game-card p{margin-bottom:.45rem}.game-card span{font-size:.78rem}.beyond-art{height:250px}}
@media(max-width:430px){.hero-actions{align-items:flex-start;flex-direction:column;gap:1rem}.video-stage{min-height:590px}.video-player{width:min(73%,235px)}.medal-card{width:30%;font-size:.78rem}}
@media(max-width:390px){.nav-cta{display:none}.language-picker select{max-width:118px}}
@media(max-width:390px){.nav-wrap{flex-wrap:wrap;padding-block:.8rem}.nav-wrap .nav-cta{display:inline-block;max-width:none;margin-left:auto}.language-picker select{max-width:100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.blog-grid a,.medal-card,.medal-rotor{transition:none}.medal-back:after{animation:none!important}.hero-phone video{display:none}.hero-phone{background:url("assets/gameplay-poster.jpg") center/cover}.impact-character{display:none}}