/* Motion is progressive: the complete page remains visible without JavaScript. */
body{isolation:isolate}
.scroll-progress{position:fixed;z-index:25;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--accent),#d6ff8f);transform:scaleX(var(--scroll-progress,0));transform-origin:left;box-shadow:0 0 14px #a4ff3566;pointer-events:none}
.motion-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.motion-atmosphere i{position:absolute;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,#8fff0011,transparent 65%);top:-300px;right:-300px;animation:ambient-drift 23s ease-in-out infinite alternate;will-change:transform}
.motion-atmosphere i:nth-child(2){width:900px;height:900px;right:auto;left:-550px;top:42%;background:radial-gradient(circle,#00d9ff09,transparent 67%);animation-duration:31s;animation-delay:-11s}
.motion-atmosphere i:nth-child(3){top:auto;bottom:-430px;right:5%;background:radial-gradient(circle,#a4ff350c,transparent 65%);animation-duration:27s;animation-delay:-17s}
.motion-ready .hero-copy>*{animation:hero-arrive .95s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--intro-delay,0ms)}
.motion-ready .hero-art .target-art svg{animation:reticle-arrive 1.4s cubic-bezier(.16,1,.3,1) both}
.hero-art .orbit:before{content:"";position:absolute;width:6px;height:6px;top:-3px;left:50%;border-radius:50%;background:var(--green);box-shadow:0 0 22px #a4ff3590}
.hero-art .orbit-two:before{width:3px;height:3px;top:-2px;opacity:.6}
.floating-label{animation:label-float 5s ease-in-out infinite;animation-delay:-2s}
.motion-ready [data-reveal]{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal]:not(.is-visible){opacity:0;transform:translate3d(0,36px,0) scale(.985);filter:blur(5px)}
.motion-ready [data-reveal].is-visible{opacity:1;filter:none}
.showcase{position:relative}
.showcase:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid transparent;background:radial-gradient(320px circle at var(--pointer-x,50%) var(--pointer-y,50%),#a4ff350c,transparent 80%);opacity:0;transition:opacity .4s}
.showcase:hover:after{opacity:1}
.showcase figure{position:relative}
.showcase #app-screenshot{transform-origin:center;backface-visibility:hidden}
.showcase figcaption{padding-right:160px;min-height:49px}
.expand-gallery{position:absolute;bottom:17px;right:23px;color:var(--green);font-size:10px;z-index:1}
.screenshot-switcher button{transition:background .35s,color .35s,border-color .35s}
.screenshot-switcher button:hover{background:#a4ff350c;color:var(--green)}
.feature-notes article{position:relative;padding-bottom:20px;border-bottom:1px solid #26332b;transition:transform .4s,border-color .4s}
.feature-notes article:after{content:"";position:absolute;bottom:-1px;left:0;width:0;height:1px;background:var(--green);box-shadow:0 0 10px #a4ff3566;transition:width .6s cubic-bezier(.16,1,.3,1)}
.feature-notes article:hover:after{width:100%}
.feature-notes article:hover{border-color:#8fff0055}
.games>div{transition:transform .45s,filter .45s}
.games>div:hover{transform:translateY(-4px);filter:drop-shadow(0 4px 16px #a4ff3529)}
.button{position:relative;overflow:hidden}
.button:before{content:"";position:absolute;inset:-30% auto -30% -75%;width:45%;background:linear-gradient(90deg,transparent,#ffffff38,transparent);transform:skewX(-22deg);pointer-events:none}
.button:hover:before,.button:focus-visible:before{animation:button-sheen .8s ease-out}
.button>span{transition:transform .35s}
.button:hover>span{transform:translateY(2px)}
.hero-actions .text-link span,.support-strip .button span{transition:transform .35s}
.hero-actions .text-link:hover span,.support-strip .button:hover span{transform:translate(3px,-3px)}
.steps li>span{transition:transform .4s,color .4s;text-shadow:0 0 20px #7cff0025}
.steps li:hover>span{transform:translateX(7px);color:#d7ffae}
.demo-stage:after{animation:demo-ring 30s linear infinite}
.demo-reticle ellipse{transition:fill .25s,rx .16s ease-out,ry .16s ease-out}
.color-options button[data-color]{transition:transform .25s,box-shadow .25s}
.color-options button[data-color]:hover{transform:translateY(-3px) scale(1.12)}
.download-section:after{content:"+";position:absolute;right:36%;top:-63px;font:200px/1 Arial,sans-serif;color:#15210908;pointer-events:none;animation:download-mark 8s ease-in-out infinite}
.download-section>div{position:relative;z-index:1}
.faq-list details[open]>p{animation:faq-arrive .35s ease-out}
.motion-toggle{font:inherit;color:var(--muted);font-size:11px}
.motion-toggle:hover{color:var(--green)}
.motion-toggle:disabled{cursor:default;opacity:.75}
.gallery-dialog{width:min(1480px,96vw);max-width:96vw;max-height:94vh;max-height:94dvh;padding:0;border:1px solid #4e6b3e;border-radius:15px;background:#0b100d;color:var(--text);box-shadow:0 30px 140px #000b;overflow:auto}
.gallery-dialog::backdrop{background:#020603e8;backdrop-filter:blur(9px)}
.gallery-dialog[open]{animation:dialog-arrive .35s cubic-bezier(.16,1,.3,1)}
.gallery-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 21px;border-bottom:1px solid var(--line)}
.gallery-dialog-top p{font-size:12px;color:var(--muted)}
.gallery-dialog-top button{display:grid;place-items:center;width:36px;height:36px;font-size:28px;background:#ffffff06;border:1px solid var(--line);border-radius:6px}
.gallery-dialog>img{display:block;width:100%;height:auto;max-height:78vh;max-height:78dvh;object-fit:contain;background:#080b0a}
.gallery-dialog-caption{padding:13px 21px;color:var(--muted);font-size:10px}
.page-inactive .orbit,.page-inactive .target-art,.page-inactive .floating-label,.page-inactive .motion-atmosphere i,.page-inactive .demo-stage:after,.page-inactive .download-section:after{animation-play-state:paused!important}
.hero-art[data-motion-visible=false] .orbit,.hero-art[data-motion-visible=false] .target-art,.hero-art[data-motion-visible=false] .floating-label{animation-play-state:paused}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off [data-reveal]{opacity:1;filter:none;transform:none}
@media(hover:hover) and (pointer:fine){
  .motion-ready .hero-art{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s cubic-bezier(.16,1,.3,1)}
  .motion-ready .showcase.is-visible{transform:perspective(1900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .9s,filter .9s}
  .motion-ready .demo-card{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s cubic-bezier(.16,1,.3,1)}
}
@media(max-width:680px){
  .showcase figcaption{padding-right:0;padding-bottom:7px;min-height:0}
  .expand-gallery{position:relative;right:auto;bottom:auto;margin:4px 0 13px;font-size:9px}
  .gallery-dialog{border-radius:9px;width:96vw}
  .gallery-dialog-top{padding:12px}
  .gallery-dialog-top p{font-size:10px}
  .gallery-dialog-caption{padding:12px;font-size:9px}
  .motion-toggle{font-size:10px}
  .motion-atmosphere i{width:460px;height:460px}
  .download-section:after{right:0;top:20px;font-size:180px}
}
@media(prefers-reduced-motion:reduce){
  .motion-atmosphere i,.floating-label,.demo-stage:after,.download-section:after{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .motion-ready .hero-art,.motion-ready .showcase.is-visible,.motion-ready .demo-card{transform:none!important}
}
@keyframes hero-arrive{from{opacity:0;transform:translate3d(0,30px,0);filter:blur(8px)}to{opacity:1;transform:translateZ(0);filter:blur(0)}}
@keyframes reticle-arrive{from{opacity:0;transform:scale(.68) rotate(-22deg);filter:blur(9px)}to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}}
@keyframes ambient-drift{to{transform:translate3d(-85px,95px,0) scale(1.14)}}
@keyframes label-float{50%{transform:translateY(-8px)}}
@keyframes button-sheen{to{left:150%}}
@keyframes demo-ring{to{transform:rotate(360deg)}}
@keyframes download-mark{50%{transform:translateY(13px) rotate(8deg)}}
@keyframes faq-arrive{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}