@font-face{font-family:Goodboy;src:url('/assets/font-regular.woff2')}@font-face{font-family:Goodboy;src:url('/assets/font-bold.woff2');font-weight:700}*{box-sizing:border-box}:host{margin:0;background:#f5f6f9;color:#252630;font-family:Goodboy,sans-serif}.page{max-width:760px;min-height:100svh;margin:auto;background:#fff}header{padding:24px 32px 0}header img{display:block;width:108px;height:auto}main{text-align:center;padding:20px 0 28px}h1{font-size:clamp(27px,4vw,38px);line-height:1.3;letter-spacing:-1.2px;margin:0}.intro{font-size:14px;line-height:1.8;color:#7c7e8c;margin:14px 24px 0}.scene{position:relative;width:min(100%,650px);aspect-ratio:1;margin:14px auto -30px;isolation:isolate}.scenery,canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scenery{mix-blend-mode:multiply}.action{position:relative;padding:0 24px;max-width:480px;margin:0 auto}.action p{font-size:14px;line-height:1.8;margin:0 0 18px;color:#606273}.action strong{font-weight:700;color:#414455}.start{display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:16px;background:#494ffa;color:white;text-decoration:none;font-size:16px;font-weight:700}.start:hover{background:#3d43e8}.start:focus-visible{outline:3px solid #8791ff;outline-offset:4px}.spark{position:absolute;border-radius:50%;background:#9cf6ff;box-shadow:0 0 12px #56ddec;width:5px;height:5px;pointer-events:none;animation:drift 5s ease-in-out infinite}.s1{left:42%;top:24%}.s2{left:62%;top:36%;animation-delay:-2s}.s3{left:35%;top:52%;animation-delay:-3.5s}@keyframes drift{0%,100%{opacity:0;transform:translateY(10px)}50%{opacity:.8;transform:translateY(-12px)}}@media(min-width:700px){header{padding:28px 40px 0}main{padding-top:8px}.scene{margin-top:12px;margin-bottom:-36px}.action{max-width:480px}}@media(max-width:380px){header{padding:18px 22px 0}main{padding-top:22px}.intro{font-size:13px}.scene{margin-top:16px;margin-bottom:-12px}.action{padding:0 20px}.action p{font-size:13px;margin-bottom:14px}.start{min-height:54px}}@media(prefers-reduced-motion:reduce){.spark{animation:none;opacity:.3}}
/* Local circular arena exploration; copy and controls remain real HTML. */
:host{background:#08151d;color:#f4f4e9}.page{background:#0c222d;overflow:hidden;position:relative;isolation:isolate}
.page::before{content:'';position:absolute;inset:0;background:linear-gradient(#0c222d55,#0c222de6);opacity:.35;z-index:-1;pointer-events:none}
header img{filter:brightness(0) invert(1)}
h1{text-shadow:0 2px 20px #05131c}.intro{color:#bbcbd0}
.scene{width:min(100%,620px);margin:0 auto -85px}
.scenery{mix-blend-mode:normal;mask-image:linear-gradient(transparent,#000 15%,#000 81%,transparent)}
.action{padding-bottom:12px}.action p{color:#c4d1d3;text-shadow:0 2px 8px #07151c}.action strong{color:#f5f1df}
.start{box-shadow:0 8px 24px #020f2055}
.spark{background:#ffe0a0;box-shadow:0 0 12px #ffc95e}
@media(min-width:700px){.scene{margin-top:0;margin-bottom:-90px}main{padding-top:12px}}
@media(max-width:380px){.scene{margin-top:8px;margin-bottom:-44px}}
@media(min-width:700px){.scene{width:min(100%,620px,max(360px,calc(100svh - 330px)))}}
/* Give the entry button more breathing room below the caption. */
.action p{margin-bottom:24px}
@media(max-width:380px){.action p{margin-bottom:24px}}
/* Lower the caption and CTA together below the arena in both versions. */
.action{margin-top:96px}

.legal{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;font-size:12px;line-height:1.6;color:#a9bbc2}.legal a{color:inherit;text-decoration:none}.legal a:hover{text-decoration:underline}.legal a:focus-visible{outline:2px solid #8791ff;outline-offset:4px}

:host{background:#edf3fa;color:#263649}.page{background:linear-gradient(180deg,#eaf3ff 0%,#f9fcff 24%,#fff 62%,#edf5ff 100%)}.page::before{display:none}header img{filter:none}h1{text-shadow:none;color:#24344a}.intro{color:#748197}.sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.cloud{position:absolute;width:360px;height:150px;border-radius:50%;background:radial-gradient(ellipse,#fff 30%,#ffffff00 72%);filter:blur(12px)}.c1{left:-90px;top:100px}.c2{right:-100px;bottom:60px;width:450px;height:240px}.brand-star{position:absolute;width:100px;height:100px;background:#6ca5ed;mask:url('/brand/welcome-symbol.svg') center/contain no-repeat;opacity:.13}.b1{right:22px;top:100px;transform:rotate(12deg)}.b2{left:10px;bottom:160px;width:140px;height:140px;opacity:.08;transform:rotate(-16deg)}.b3{right:38px;bottom:55px;width:48px;height:48px;opacity:.12}.scenery{mix-blend-mode:multiply;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}.scene{margin-bottom:-60px}.action p{color:#6b7c91;text-shadow:none}.action strong{color:#34475e}.legal{color:#718299}.start{box-shadow:0 8px 24px #515bdf18}.spark{background:#72c9ff;box-shadow:0 0 12px #68b8fb}@media(min-width:700px){.scene{margin-bottom:-60px}}
/* Balance the visible arena between the two copy blocks without moving the CTA. */
.scene{transform:translateY(calc(18px + 3.5%))}
.intro,.action p{line-height:1.7}
.intro{margin-top:12px}
.start{min-height:58px}

/* Keep the entry action at the bottom of tall screens; scroll on short screens. */
.page{display:flex;flex-direction:column;min-height:100svh}
main{display:flex;flex-direction:column;flex:1;padding-bottom:0}
.intro{padding-bottom:24px}
.scene{flex-shrink:0;width:min(100%,620px);margin: auto;transform:none}
.action{flex-shrink:0;width:100%;max-width:none;margin:0;padding:24px 28px max(24px,env(safe-area-inset-bottom))}
.action p{margin-bottom:24px}
.start{min-height:58px}
.legal{margin-top:16px}