
:root{
  --landing-bg:#06080b;
  --landing-panel:#0d1116;
  --landing-line:#26303a;
  --landing-cyan:#70dbff;
  --landing-cyan-soft:#b3efff;
  --landing-text:#edf7fb;
  --landing-muted:#7e8a95;
}
*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:var(--landing-bg);color:var(--landing-text);
  font-family:"Courier New",ui-monospace,SFMono-Regular,Consolas,monospace;
}
button,input{font:inherit}button{cursor:pointer}
.landing{
  position:relative;width:100vw;height:100vh;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(63,176,219,.08),transparent 30%),linear-gradient(180deg,#070a0e,#05070a);
}
.retro-grid{
  position:absolute;left:-15vw;right:-15vw;bottom:-19vh;height:58vh;opacity:.24;
  transform:perspective(460px) rotateX(63deg);transform-origin:center bottom;
  background-image:linear-gradient(rgba(112,219,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(112,219,255,.22) 1px,transparent 1px);
  background-size:54px 38px;animation:gridMove 3.2s linear infinite;
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 45%,transparent 100%);
}
@keyframes gridMove{from{background-position:0 0,0 0}to{background-position:0 38px,54px 0}}
.pixel-field,.pixel-field::before,.pixel-field::after{position:absolute;inset:0;content:"";pointer-events:none}
.pixel-field{
  opacity:.52;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.62) 0 1px,transparent 1.4px),
    radial-gradient(circle at 84% 14%,rgba(112,219,255,.58) 0 1px,transparent 1.4px),
    radial-gradient(circle at 63% 29%,rgba(255,255,255,.32) 0 1px,transparent 1.4px),
    radial-gradient(circle at 27% 43%,rgba(112,219,255,.42) 0 1px,transparent 1.4px),
    radial-gradient(circle at 92% 52%,rgba(255,255,255,.36) 0 1px,transparent 1.4px);
  animation:starsPulse 2.8s ease-in-out infinite alternate;
}
.pixel-field::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.pixel-field::after{background:linear-gradient(90deg,transparent,rgba(112,219,255,.025),transparent);animation:scanWide 5s linear infinite}
@keyframes starsPulse{from{opacity:.36}to{opacity:.68}}
@keyframes scanWide{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.crt{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.08) 50%),linear-gradient(90deg,rgba(255,0,0,.012),rgba(0,255,0,.008),rgba(0,0,255,.012));
  background-size:100% 4px,5px 100%;mix-blend-mode:screen;opacity:.42;
}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px rgba(0,0,0,.88)}
.boot-card{
  position:relative;z-index:2;width:min(760px,calc(100vw - 38px));min-height:420px;
  display:grid;place-items:center;padding:34px 28px;border:1px solid rgba(112,219,255,.18);border-radius:18px;
  background:rgba(8,12,16,.58);backdrop-filter:blur(8px);
  box-shadow:0 26px 90px rgba(0,0,0,.45),inset 0 0 40px rgba(112,219,255,.025);
}
.boot-sequence{width:100%;text-align:center}
.boot-mini{color:#63717d;font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;opacity:0;transform:translateY(4px);animation:reveal .35s .25s forwards}
.pixel-logo{
  position:relative;display:inline-block;margin:20px 0 12px;color:#f3fbff;
  font-size:clamp(3.2rem,10vw,6.5rem);line-height:.9;font-weight:900;letter-spacing:-.08em;
  text-shadow:2px 0 0 rgba(112,219,255,.6),-2px 0 0 rgba(255,255,255,.08);
  opacity:0;transform:scale(.94);animation:logoIn .7s .62s cubic-bezier(.2,.9,.2,1) forwards;
}
.pixel-logo::after{
  content:"";position:absolute;left:2%;right:0;bottom:-10px;height:2px;
  background:linear-gradient(90deg,transparent,var(--landing-cyan),transparent);
  transform:scaleX(0);animation:lineIn .6s 1.05s forwards;
}
.logo-sub{color:#95a6b3;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;opacity:0;animation:reveal .4s 1.12s forwards}
.boot-log{width:min(520px,100%);margin:32px auto 0;text-align:left;color:#66747f;font-size:.68rem;line-height:1.7}
.boot-line{opacity:0}.boot-line:nth-child(1){animation:reveal .2s 1.35s forwards}.boot-line:nth-child(2){animation:reveal .2s 1.52s forwards}.boot-line:nth-child(3){animation:reveal .2s 1.69s forwards}.boot-line:nth-child(4){animation:reveal .2s 1.86s forwards}
.boot-ok{color:#75dca7}.boot-accent{color:#89dcf7}
.enter-zone{margin-top:27px;display:grid;justify-items:center;gap:11px;opacity:0;transform:translateY(6px);animation:revealUp .45s 2.22s forwards}
.enter-btn{
  min-width:220px;min-height:46px;padding:9px 22px;border:1px solid rgba(112,219,255,.45);border-radius:7px;
  background:#13232c;color:#eaffff;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.enter-btn:hover{background:#18313d;border-color:rgba(112,219,255,.7)}
.enter-btn:active{transform:translateY(1px)}
.auto-enter{display:flex;align-items:center;gap:8px;color:#66747f;font-size:.62rem;user-select:none}
.auto-enter input{position:absolute;opacity:0;pointer-events:none}
.auto-dot{width:15px;height:15px;display:grid;place-items:center;border:1px solid #4e5963;border-radius:50%;background:#0d1115;transition:.15s}
.auto-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:transparent;transition:.15s}
.auto-enter input:checked + .auto-dot{border-color:#5facc7}
.auto-enter input:checked + .auto-dot::after{background:var(--landing-cyan);box-shadow:0 0 8px rgba(112,219,255,.34)}
.auto-enter:hover{color:#8e9ca7}
.auto-countdown{min-height:14px;color:#6f7d87;font-size:.56rem;letter-spacing:.04em}
.corner-label,.corner-version{position:absolute;z-index:3;bottom:14px;color:#3f4a54;font-size:.53rem;letter-spacing:.08em}
.corner-label{left:16px}.corner-version{right:16px}
@keyframes reveal{to{opacity:1;transform:none}}@keyframes revealUp{to{opacity:1;transform:none}}@keyframes logoIn{to{opacity:1;transform:scale(1)}}@keyframes lineIn{to{transform:scaleX(1)}}
@media(max-width:650px){.boot-card{min-height:390px;padding:27px 18px}.boot-log{font-size:.62rem}.enter-btn{min-width:190px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}}
