@font-face{font-family:"Noto Sans Thai";src:url("/fonts/NotoSansThai-Variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
/* Shared by the initial HTML and React so startup has one visual identity. */
.startup-screen{--startup-glow:#53faff;--startup-blue:#087dff;position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:auto;isolation:isolate;padding:28px 20px;background:var(--startup-background,#078fc8);color:#fff;font-family:"Noto Sans Thai",sans-serif}
.startup-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:-3;pointer-events:none}
.startup-screen::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#00387508 18%,#00385f40 57%,#00385f08);pointer-events:none}
.startup-center{position:relative;width:min(100%,440px);text-align:center;padding:0 12px;text-shadow:0 2px 5px #00314edb,0 1px 2px #00314e}
.startup-scene{position:relative;width:clamp(200px,55vw,288px);aspect-ratio:1;margin:0 auto 32px;perspective:900px;isolation:isolate}
.startup-sphere{position:absolute;inset:9%;border:2px solid #d4fcff;border-radius:50%;display:grid;place-items:center;background:radial-gradient(ellipse at 28% 14%,#ffffffad 0%,#ffffff26 17%,transparent 42%),linear-gradient(135deg,#b8f6ff5e,#158ff52e 55%,#b9ffff61);box-shadow:inset 5px 7px 14px #e1ffffa8,inset -5px -8px 17px #7ceaff9c,0 8px 28px #006fbf55}
.startup-sphere::before{content:"";position:absolute;left:13%;top:10%;width:31%;height:10%;border-radius:50%;background:#ffffff8f;transform:rotate(-35deg);filter:blur(2px)}
.startup-logo{width:80%;height:72%;object-fit:contain;filter:drop-shadow(0 5px 5px #004d9255);animation:startup-logo-turn 5s cubic-bezier(.4,0,.2,1) infinite}
.startup-ring{position:absolute;border-radius:50%;pointer-events:none}
.startup-ring-outer{inset:0;border:6px solid #59f8ffbd;border-top-color:#e1ffff;border-right-color:#16a0ff;box-shadow:0 3px 14px #2defff8c,inset 0 3px 9px #b8ffff;animation:startup-ring-turn 6s linear infinite}
.startup-ring-outer::after{content:"";position:absolute;inset:-12px;border:1px solid transparent;border-top-color:#d7ffff;border-bottom-color:#ffffff80;border-radius:50%}
.startup-ring-inner{inset:4%;border:3px solid transparent;border-left-color:#026bff;border-bottom-color:#86ffff;animation:startup-ring-turn 4s linear infinite reverse}
.startup-trail{position:absolute;inset:30% -12%;border:1px solid #a2ffffa3;border-radius:50%;box-shadow:0 3px 9px #63f9ff5c;z-index:-1;animation:startup-trail-tilt 8s ease-in-out infinite alternate}
.startup-trail::after{content:"";position:absolute;top:50%;right:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 9px 3px var(--startup-glow)}
.startup-trail-one{transform:rotate(-16deg)}
.startup-trail-two{inset:24% -8%;border-color:#efaaff9c;transform:rotate(24deg);animation-delay:-4s}
.startup-satellite{position:absolute;display:grid;place-items:center;width:23%;aspect-ratio:1;border:1px solid #cbfbffbc;border-radius:15px;background:linear-gradient(135deg,#e0ffff70,#47baff38 58%,#b8ffff8c);box-shadow:inset 0 2px 7px #e4ffff85,0 7px 18px #006b9740;color:#e3fcff;animation:startup-float 4s ease-in-out infinite;transform:rotate(var(--tilt));--tilt:12deg}
.startup-satellite svg{width:60%;height:60%;stroke-width:2.5}
.startup-satellite-ai{left:-23%;top:7%;--tilt:-15deg;font:600 clamp(24px,7vw,36px)/1 sans-serif}
.startup-satellite-ai svg{position:absolute;width:27%;height:27%;right:10%;top:8%}
.startup-satellite-game{right:-22%;top:8%;--tilt:12deg;animation-delay:-1.3s}
.startup-satellite-chart{right:-26%;bottom:8%;--tilt:14deg;animation-delay:-2.6s}
.startup-sparks{position:absolute;inset:-12%;pointer-events:none}
.startup-sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e8ffff;box-shadow:0 0 7px 2px #79ffff;animation:startup-spark 3s ease-in-out infinite}
.startup-sparks i:nth-child(1){left:19%;top:18%;width:5px;height:5px}
.startup-sparks i:nth-child(1)::after{content:"";position:absolute;inset:-10px;background:linear-gradient(transparent,#fff,transparent);clip-path:polygon(46% 0,56% 43%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%)}
.startup-sparks i:nth-child(2){left:25%;top:0;animation-delay:-.5s}
.startup-sparks i:nth-child(3){right:10%;top:27%;animation-delay:-1s}
.startup-sparks i:nth-child(4){right:40%;bottom:2%;animation-delay:-1.5s}
.startup-sparks i:nth-child(5){left:0;bottom:28%;animation-delay:-2s}
.startup-sparks i:nth-child(6){right:24%;bottom:12%;animation-delay:-2.5s}
.startup-center h1{font-size:clamp(22px,5.8vw,30px);font-weight:700;line-height:1.4;margin:0 0 8px;color:#fff}
.startup-stage{font-size:clamp(14px,3.8vw,18px);line-height:1.6;margin:0;color:#e3f7ff;min-height:29px}
.startup-meter{height:13px;border:1px solid #b1f8ff;border-radius:999px;background:#00527c66;box-shadow:inset 0 2px 5px #c2f8ff6b,0 3px 13px #1be7ff4d;overflow:hidden;margin:26px auto 12px;width:86%}
.startup-meter>span{position:relative;display:block;height:100%;border-radius:inherit;width:100%;transform-origin:left;background:linear-gradient(180deg,#b9ffff,#00dfff 50%,#009fdf);box-shadow:inset 0 0 4px #fff,0 0 12px #39ffff;transition:transform 180ms ease-out;overflow:hidden}
.startup-meter>span::after{content:"";position:absolute;inset:0;width:50%;background:linear-gradient(110deg,transparent,#ffffffa1,transparent);transform:translateX(-200%);animation:startup-meter-flow 1.8s linear infinite}
.startup-percent{display:block;font-size:clamp(30px,8vw,42px);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.startup-percent small{font-size:inherit}
.startup-caption{display:flex;align-items:center;justify-content:center;gap:10px;margin:clamp(32px,7vh,68px) 0 0;font-size:13px;color:#e1f9ff}
.startup-caption::before,.startup-caption::after{content:"";height:1px;width:18px;background:#d4ffff8c}
.startup-caption svg{width:16px;height:16px;flex:none}
.startup-recovery{margin-top:20px;padding:14px;border-radius:12px;background:#003d68e6;text-shadow:none}
.startup-recovery p{font-size:14px;line-height:1.6;margin:0}
.startup-recovery button{margin-top:12px;padding:10px 18px;border:1px solid #b1f8ff;border-radius:8px;background:#086cb0;color:#fff;font:inherit;cursor:pointer}
.startup-recovery button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.startup-screen[data-home-warm="true"]::before,.startup-screen[data-warm="true"]::before{display:none}
.startup-screen[data-warm="true"] .startup-center{display:none}
@keyframes startup-logo-turn{0%,24%{transform:rotateY(0)}84%,100%{transform:rotateY(360deg)}}
@keyframes startup-ring-turn{to{transform:rotate(360deg)}}
@keyframes startup-trail-tilt{to{transform:rotate(12deg) scaleY(.75)}}
@keyframes startup-float{50%{transform:translateY(-9px) rotate(calc(var(--tilt) - 5deg))}}
@keyframes startup-spark{50%{opacity:.3;transform:translateY(-7px) scale(.7)}}
@keyframes startup-meter-flow{to{transform:translateX(300%)}}
@media(min-width:1024px){.startup-background{object-position:center}.startup-scene{width:260px}.startup-center{width:440px}}
@media(max-width:360px){.startup-scene{width:185px}.startup-center{padding:0}.startup-satellite-ai{left:-21%}.startup-satellite-chart{right:-23%}}
@media(max-height:640px){.startup-screen{padding-block:22px}.startup-scene{width:170px;margin-bottom:20px}.startup-caption{margin-top:22px}.startup-meter{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.startup-screen *,.startup-screen *::after{animation:none!important;transition:none!important}}