:root{
  color-scheme:dark;
  --red:#c93342;
  --red2:#f0555e;
  --cyan:#68e8ff;
  --gold:#ffd36a;
  --ink:#161a1e;
  --panel:rgba(21,24,26,.74);
  --line:rgba(255,255,255,.18);
  --text:#f5f6f2;
  --muted:#a7aaa6;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#cfd0ca;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button{font:inherit}
#webglHost,#webglHost canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
.hidden{display:none!important}

.boot-screen{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#d8d9d3;color:#222;transition:.45s ease}
.boot-screen.done{opacity:0;visibility:hidden}
.boot-robot{position:relative;width:100px;height:82px}
.boot-robot span{position:absolute;inset:0;border-radius:42px 42px 28px 28px;background:linear-gradient(115deg,#f7f7f2 0 33%,#c73342 34% 66%,#f7f7f2 67%);box-shadow:inset -12px -14px 18px rgba(0,0,0,.14),0 24px 55px rgba(0,0,0,.18)}
.boot-robot:after{content:"";position:absolute;left:19px;right:19px;top:39px;height:20px;border-radius:10px;background:#22282c}
.boot-robot i{position:absolute;z-index:2;top:45px;width:21px;height:8px;border-radius:6px;background:#68e8ff;box-shadow:0 0 17px #68e8ff}
.boot-robot i:nth-child(2){left:27px}.boot-robot i:nth-child(3){right:27px}
.boot-screen p{margin:23px 0 11px;font-size:9px;font-weight:900;letter-spacing:.2em}
.boot-track{width:min(370px,70vw);height:4px;background:rgba(0,0,0,.1)}.boot-track b{display:block;width:3%;height:100%;background:linear-gradient(90deg,var(--red),var(--cyan));transition:width .2s ease}

.main-menu{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:#14181c}
.main-menu.visible{display:flex}
.banner-image{position:absolute;inset:0;background:url("./reference-banner.png") center/cover no-repeat;filter:saturate(1.08) contrast(1.05)}
.banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,18,21,.98) 0%,rgba(15,18,21,.76) 45%,rgba(15,18,21,.16) 75%),linear-gradient(0deg,rgba(14,17,20,.84),transparent 45%)}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:23px 34px;border-bottom:1px solid rgba(255,255,255,.16);background:rgba(15,18,20,.32);backdrop-filter:blur(8px)}
.brand{display:grid}.brand span{font-size:7px;font-weight:900;letter-spacing:.22em;color:var(--cyan)}.brand b{font-size:13px;letter-spacing:.08em}
.source-badge{font-size:7px;letter-spacing:.16em;color:rgba(255,255,255,.62)}
.menu-content{position:relative;flex:1;display:grid;grid-template-columns:minmax(520px,1.1fr) minmax(320px,.55fr);align-items:center;gap:50px;width:min(1340px,calc(100% - 68px));margin:auto}
.hero-copy>p,.panel-card>p,.pause-overlay p{margin:0;color:var(--cyan);font-size:8px;font-weight:900;letter-spacing:.2em}
.hero-copy h1{margin:14px 0 18px;font-size:clamp(66px,8vw,132px);line-height:.79;letter-spacing:-.075em;font-weight:950;text-shadow:0 14px 50px rgba(0,0,0,.5)}.hero-copy h1 em{font-style:normal;color:#f0f0ea}
.description{max-width:700px;color:#c1c4c0;line-height:1.65;font-size:13px}
.hero-copy nav{display:grid;width:min(440px,100%);gap:8px;margin-top:27px}
.hero-copy button,.pause-overlay button{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border:1px solid rgba(255,255,255,.18);background:rgba(18,22,24,.72);color:white;font-size:9px;font-weight:900;letter-spacing:.11em;cursor:pointer;transition:.17s ease}
.hero-copy button:hover,.pause-overlay button:hover{transform:translateX(5px);border-color:var(--cyan)}
button.primary{border:0!important;background:linear-gradient(90deg,#e94a54,#f47b70)!important;color:white!important}
.visual-profile{display:grid;border:1px solid rgba(255,255,255,.17);background:rgba(17,21,23,.66);backdrop-filter:blur(17px)}
.visual-profile>span{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.1);color:#aeb3af;font-size:7px;letter-spacing:.16em}
.visual-profile article{padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.visual-profile article:last-child{border:0}.visual-profile b{display:block;font-size:10px}.visual-profile em{display:block;margin-top:4px;color:#999f9b;font-size:8px;font-style:normal}
.main-menu footer{position:relative;display:flex;justify-content:space-between;padding:17px 34px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);font-size:7px;letter-spacing:.15em}

.panel-overlay,.pause-overlay{position:fixed;inset:0;z-index:180;display:none;align-items:center;justify-content:center;background:rgba(14,16,18,.75);backdrop-filter:blur(16px)}
.panel-overlay.visible,.pause-overlay.visible{display:flex}
.panel-card,.pause-overlay article{position:relative;width:min(870px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:32px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(145deg,rgba(25,29,31,.97),rgba(35,37,37,.94));box-shadow:0 35px 120px rgba(0,0,0,.62)}
.panel-card h2,.pause-overlay h2{margin:8px 0 23px;font-size:clamp(40px,6vw,72px);letter-spacing:-.06em}.panel-card p{color:#b7bbb7;line-height:1.75}
.close{position:absolute;right:18px;top:12px;border:0;background:transparent;color:#ddd;font-size:33px;cursor:pointer}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.controls-grid div{display:grid;grid-template-columns:120px 1fr;align-items:center;padding:13px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}kbd{display:inline-grid;place-items:center;min-height:30px;padding:5px 8px;background:#292d2f;color:var(--cyan);font-weight:900}.controls-grid span{color:#b1b5b1;font-size:10px}

.hud{position:fixed;inset:0;z-index:40;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 13px 35px rgba(0,0,0,.22)}
.objective{position:absolute;left:20px;top:20px;width:300px;padding:12px 14px}.objective span,.target span,.telemetry span,.vitality span{color:#a1a5a0;font-size:7px;letter-spacing:.15em}.objective b{display:block;margin-top:4px;font-size:11px}.objective i,.target i,.vitality>i,.combo>i{display:block;height:4px;margin-top:8px;background:rgba(255,255,255,.09);overflow:hidden}.objective i u{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--red2),var(--cyan))}
.telemetry{position:absolute;right:20px;top:20px;display:grid;grid-template-columns:repeat(3,76px);padding:11px 10px}.telemetry div{text-align:center;border-right:1px solid rgba(255,255,255,.08)}.telemetry div:last-child{border:0}.telemetry b{display:block;margin-top:4px;font-size:15px}
.vitality{position:absolute;left:20px;bottom:20px;width:295px;padding:12px 14px}.vitality div{display:flex;justify-content:space-between}.vitality b{font-size:9px}.vitality i u{display:block;width:100%;height:100%}.vitality i.health u{background:linear-gradient(90deg,#d94b55,#ff8a72)}.vitality i.energy u{width:0;background:linear-gradient(90deg,#68e8ff,#ffd36a)}
.combo{position:absolute;left:50%;bottom:21px;transform:translateX(-50%);width:210px;text-align:center}.combo span{display:block;color:#9da19d;font-size:7px;letter-spacing:.18em}.combo b{display:block;font-size:48px;line-height:.9}.combo em{font-size:8px;font-weight:900;font-style:normal;letter-spacing:.16em;color:var(--cyan)}.combo>i{width:155px;margin:7px auto}.combo>i u{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold))}
.target{position:absolute;right:20px;bottom:20px;width:230px;padding:11px 13px}.target b{display:block;margin:4px 0 8px;font-size:10px}.target i u{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red2),var(--gold))}
.counter-prompt{position:absolute;left:50%;top:29%;transform:translate(-50%,-50%) scale(.78);opacity:0;padding:11px 18px;border:1px solid rgba(255,211,106,.62);background:rgba(40,33,17,.82);text-align:center;transition:.13s ease}.counter-prompt.visible{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 50px rgba(255,211,106,.18)}.counter-prompt span{display:block;color:var(--gold);font-size:7px;letter-spacing:.18em}.counter-prompt b{display:block;margin-top:3px;font-size:18px}
.control-line{position:absolute;right:20px;bottom:92px;color:rgba(255,255,255,.34);font-size:7px;letter-spacing:.08em}
.pause-overlay article{width:min(430px,calc(100% - 28px));display:grid;gap:8px}.pause-overlay h2{margin-bottom:17px}.pause-overlay button{width:100%}.pause-overlay #gameOverStats{margin-bottom:15px;color:#b2b6b2}

.wave-banner{position:fixed;left:50%;top:46%;z-index:100;transform:translate(-50%,-50%) scale(.8);opacity:0;text-align:center;pointer-events:none}.wave-banner.visible{animation:wave 2s ease forwards}.wave-banner span{display:block;color:var(--cyan);font-size:9px;letter-spacing:.2em}.wave-banner b{display:block;font-size:100px;line-height:.85}.wave-banner em{color:#a9adaa;font-size:8px;font-style:normal;letter-spacing:.15em}@keyframes wave{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.toast{position:fixed;left:50%;top:112px;z-index:110;transform:translate(-50%,-15px);opacity:0;padding:9px 13px;border:1px solid rgba(255,255,255,.16);background:rgba(25,28,28,.83);font-size:8px;font-weight:900;letter-spacing:.09em;transition:.18s ease}.toast.visible{opacity:1;transform:translate(-50%,0)}
.damage-flash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 40%,rgba(206,36,58,.36));transition:.14s}.damage-flash.visible{opacity:1}
.hit-marker{position:fixed;left:50%;top:50%;z-index:71;opacity:0;transform:translate(-50%,-50%);font-size:32px;text-shadow:0 1px 6px #000}.hit-marker.visible{animation:hit .22s ease}@keyframes hit{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@media(max-width:900px){.menu-content{grid-template-columns:1fr;width:calc(100% - 28px)}.visual-profile{display:none}.hero-copy h1{font-size:73px}.topbar,.main-menu footer{padding-left:15px;padding-right:15px}.controls-grid{grid-template-columns:1fr}.objective{width:220px}.telemetry{grid-template-columns:repeat(3,55px)}.vitality{width:215px}.control-line{display:none}}


/* V3 clear visibility and visual-profile controls */
.visual-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.visual-options button {
  min-height: 100px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
  color: white;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.visual-options button:hover,
.visual-options button.selected {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: rgba(104,232,255,.10);
  box-shadow: 0 13px 34px rgba(0,0,0,.22);
}
.visual-options b {
  display: block;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: .13em;
}
.visual-options span {
  display: block;
  margin-top: 7px;
  color: #b6bbb7;
  font-size: 9px;
  line-height: 1.55;
}
.camera-status {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 13px 15px;
  border-left: 3px solid var(--cyan);
  background: rgba(104,232,255,.055);
}
.camera-status span {
  color: #929894;
  font-size: 7px;
  letter-spacing: .16em;
}
.camera-status b {
  font-size: 9px;
  letter-spacing: .08em;
}
.visibility-badge {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 39;
  transform: translateX(-50%);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(28,31,31,.66);
  color: rgba(255,255,255,.72);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
@media(max-width:700px) {
  .visual-options { grid-template-columns: 1fr; }
  .visibility-badge { display: none; }
}


/* =========================================================
   V7 GLITCH-FREE MOTION BOOT SEQUENCE
   ========================================================= */
.boot-screen {
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  color: #f5f8f4;
  background:
    radial-gradient(circle at 25% 45%, rgba(201,51,66,.16), transparent 28rem),
    radial-gradient(circle at 78% 34%, rgba(104,232,255,.13), transparent 32rem),
    linear-gradient(145deg,#090d12,#12171c 57%,#080b0f);
}
.boot-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center,#000,transparent 78%);
  animation: bootGrid 12s linear infinite;
}
@keyframes bootGrid {
  to { transform: translate3d(46px,46px,0); }
}
.boot-glow {
  position: absolute;
  width: 50vw;
  height: 50vw;
  right: -12vw;
  top: -20vw;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(104,232,255,.15),transparent 65%);
  filter: blur(10px);
  animation: bootGlow 4s ease-in-out infinite alternate;
}
@keyframes bootGlow { to { opacity: .45; transform: scale(1.12); } }
.boot-layout {
  position: relative;
  width: min(1180px,calc(100% - 42px));
  margin: auto;
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  gap: clamp(30px,7vw,110px);
  align-items: center;
}
.boot-visual {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
}
.boot-visual .boot-robot {
  position: relative;
  width: 176px;
  height: 142px;
  z-index: 4;
  filter: drop-shadow(0 34px 50px rgba(0,0,0,.46));
  animation: bootRobotFloat 2.6s ease-in-out infinite;
}
@keyframes bootRobotFloat {
  50% { transform: translateY(-12px) rotate(-2deg); }
}
.boot-visual .boot-robot span {
  border-radius: 74px 74px 50px 50px;
  background:
    linear-gradient(112deg,#f3f4ed 0 29%,#ca3545 30% 69%,#f3f4ed 70%);
  box-shadow:
    inset -22px -22px 30px rgba(0,0,0,.18),
    inset 16px 11px 24px rgba(255,255,255,.24),
    0 0 55px rgba(201,51,66,.19);
}
.boot-visual .boot-robot:after {
  left: 31px;
  right: 31px;
  top: 68px;
  height: 34px;
  border-radius: 16px;
}
.boot-visual .boot-robot i {
  top: 79px;
  width: 36px;
  height: 12px;
  box-shadow: 0 0 24px #68e8ff;
}
.boot-visual .boot-robot i:nth-child(2) { left: 48px; }
.boot-visual .boot-robot i:nth-child(3) { right: 48px; }
.boot-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 22px rgba(104,232,255,.035);
}
.orbit-a { width: 300px; height: 300px; animation: bootSpin 8s linear infinite; }
.orbit-b { width: 380px; height: 210px; border-color: rgba(201,51,66,.24); animation: bootSpinReverse 6s linear infinite; }
.orbit-c { width: 220px; height: 410px; border-color: rgba(104,232,255,.19); animation: bootSpin 10s linear infinite; }
.boot-orbit:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #68e8ff;
  box-shadow: 0 0 18px #68e8ff;
}
.orbit-b:after { background: #ef5a65; box-shadow: 0 0 18px #ef5a65; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@keyframes bootSpinReverse { to { transform: rotate(-360deg); } }
.boot-pulse {
  position: absolute;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  border: 1px solid rgba(104,232,255,.55);
  animation: bootPulse 1.7s ease-out infinite;
}
@keyframes bootPulse {
  from { transform: scale(.55); opacity: .8; }
  to { transform: scale(2.5); opacity: 0; }
}
.boot-copy {
  min-width: 0;
}
.boot-kicker {
  color: #68e8ff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .23em;
}
.boot-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 11px 0 25px;
}
.boot-heading h1 {
  margin: 0;
  color: white;
  font-size: clamp(52px,7vw,100px);
  line-height: .79;
  letter-spacing: -.075em;
  text-align: left;
}
.boot-heading h1 em {
  color: #d8ddd8;
  font-style: normal;
}
.boot-heading strong {
  color: #68e8ff;
  font: 900 clamp(28px,5vw,66px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-shadow: 0 0 28px rgba(104,232,255,.22);
}
.boot-copy > p {
  margin: 0 0 11px;
  color: #e4e9e4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}
.boot-copy .boot-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.boot-copy .boot-track b {
  width: 0;
  background: linear-gradient(90deg,#c93342,#f06b67 42%,#68e8ff);
  box-shadow: 0 0 22px rgba(104,232,255,.35);
}
.boot-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 9px;
  color: #78858f;
  font-size: 8px;
  letter-spacing: .12em;
}
.boot-meta b {
  min-width: 0;
  color: #b8c2c7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boot-stages {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 6px;
  margin-top: 25px;
}
.boot-stages span {
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.08);
  color: #59656d;
  background: rgba(255,255,255,.018);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .09em;
  transition: .2s ease;
}
.boot-stages span.active {
  color: #f1f8f6;
  border-color: rgba(104,232,255,.36);
  background: rgba(104,232,255,.075);
  box-shadow: inset 0 -2px #68e8ff;
}
.boot-stages span.done {
  color: #8eeeb9;
  border-color: rgba(113,255,176,.24);
}
.boot-tip {
  margin-top: 14px;
  color: #65717a;
  font-size: 7px;
  letter-spacing: .10em;
  line-height: 1.6;
}
.mobility {
  position: absolute;
  left: 330px;
  bottom: 20px;
  width: 165px;
  padding: 10px 12px;
}
.mobility div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobility span {
  color: #a1a5a0;
  font-size: 7px;
  letter-spacing: .13em;
}
.mobility b {
  font-size: 8px;
}
.mobility > i {
  display: block;
  height: 3px;
  margin: 5px 0 8px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.mobility > i u {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,#c93342,#68e8ff);
  transition: width .12s linear;
}
@media(max-width:900px) {
  .boot-layout { grid-template-columns: 1fr; width: calc(100% - 28px); }
  .boot-visual { display: none; }
  .boot-heading h1 { font-size: 64px; }
  .boot-stages { grid-template-columns: 1fr; }
  .boot-stages span { padding: 7px 8px; }
  .mobility { left: 20px; bottom: 143px; width: 215px; }
}

/* =========================================================
   V9 ZERO-JITTER MOTION — LIVE TELEMETRY BOOT INTERFACE
   ========================================================= */
.boot-screen {
  --boot-progress: 0;
  --boot-progress-pct: 0%;
  --boot-progress-scale: 0;
  --boot-ring-angle: 0deg;
  position: fixed;
  inset: 0;
  z-index: 400;
  display: block;
  overflow: hidden;
  color: #f7fbf8;
  background:
    radial-gradient(circle at 19% 48%, rgba(218, 47, 70, .20), transparent 31rem),
    radial-gradient(circle at 78% 31%, rgba(69, 226, 255, .16), transparent 35rem),
    linear-gradient(138deg, #07090e 0%, #10171d 52%, #071016 100%);
  transition: opacity .65s cubic-bezier(.2,.8,.2,1), visibility .65s step-end;
  isolation: isolate;
}
.boot-screen.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-particles,
.boot-grid,
.boot-noise,
.boot-scan,
.boot-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.boot-particles { z-index: -1; width: 100%; height: 100%; opacity: .70; }
.boot-grid {
  z-index: -3;
  opacity: .18;
  background-image:
    linear-gradient(rgba(151, 220, 231, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 220, 231, .075) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at center, #000 5%, rgba(0,0,0,.72) 55%, transparent 93%);
  animation: v8GridDrift 16s linear infinite;
}
@keyframes v8GridDrift { to { transform: translate3d(54px,54px,0); } }
.boot-noise {
  z-index: 8;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.boot-scan {
  z-index: 7;
  height: 26%;
  top: -28%;
  background: linear-gradient(to bottom, transparent, rgba(102, 232, 255, .035) 38%, rgba(102, 232, 255, .14) 50%, transparent 62%);
  animation: v8Scan 4.8s linear infinite;
}
@keyframes v8Scan { to { transform: translateY(500%); } }
.boot-glow {
  z-index: -2;
  width: 58vw;
  height: 58vw;
  left: 58%;
  top: -33vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82, 223, 255, .17), rgba(82, 223, 255, .035) 36%, transparent 68%);
  filter: blur(9px);
  animation: v8Glow 5s ease-in-out infinite alternate;
}
@keyframes v8Glow { to { opacity: .48; transform: translate(-3vw, 5vw) scale(1.12); } }
.boot-corner {
  position: absolute;
  z-index: 10;
  width: 72px;
  height: 72px;
  opacity: .55;
  pointer-events: none;
}
.boot-corner:before,
.boot-corner:after { content:""; position:absolute; background:rgba(112,230,250,.55); box-shadow:0 0 10px rgba(112,230,250,.18); }
.boot-corner:before { width:100%; height:1px; }
.boot-corner:after { width:1px; height:100%; }
.corner-a { left:22px; top:22px; }
.corner-b { right:22px; top:22px; transform:scaleX(-1); }
.corner-c { left:22px; bottom:22px; transform:scaleY(-1); }
.corner-d { right:22px; bottom:22px; transform:scale(-1); }

.boot-layout {
  position: relative;
  z-index: 3;
  width: min(1320px, calc(100% - 90px));
  height: calc(100% - 110px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, .83fr) minmax(520px, 1.32fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: center;
}
.boot-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
}
.boot-visual:before {
  content:"";
  position:absolute;
  inset:12% 5%;
  border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(135deg,rgba(255,255,255,.018),transparent 45%);
  clip-path:polygon(7% 0,100% 0,100% 87%,92% 100%,0 100%,0 7%);
}
.boot-visual-label {
  position:absolute;
  top:13%; left:9%; right:9%;
  display:flex;
  justify-content:space-between;
  color:#697983;
  font-size:8px;
  font-weight:900;
  letter-spacing:.22em;
}
.boot-visual-label b { color:#67e7ff; }
.boot-reactor {
  position:relative;
  width:min(410px, 31vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.42));
}
.boot-reactor:before {
  content:"";
  position:absolute;
  inset:5%;
  border-radius:50%;
  background:conic-gradient(from -90deg, rgba(104,232,255,.95) 0 var(--boot-ring-angle), rgba(255,255,255,.065) var(--boot-ring-angle) 360deg);
  mask:radial-gradient(circle,transparent 0 70%,#000 70.5% 71.4%,transparent 72%);
  filter:drop-shadow(0 0 10px rgba(104,232,255,.35));
  transition:background .1s linear;
}
.boot-reactor:after {
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
  animation:v8Spin 22s linear infinite;
}
.boot-visual .boot-robot {
  position:relative;
  z-index:5;
  width:182px;
  height:148px;
  animation:v8RobotFloat 3.2s ease-in-out infinite;
  filter:drop-shadow(0 36px 50px rgba(0,0,0,.55));
}
@keyframes v8RobotFloat { 50% { transform:translateY(-11px) rotate(-1.4deg); } }
.boot-visual .boot-robot span {
  position:absolute;
  inset:0;
  border-radius:77px 77px 53px 53px;
  background:
    linear-gradient(112deg,#f2f4ee 0 29%,#cf3247 30% 69%,#f2f4ee 70%);
  box-shadow:
    inset -24px -25px 29px rgba(0,0,0,.22),
    inset 14px 10px 22px rgba(255,255,255,.32),
    0 0 65px rgba(211,46,68,.22);
}
.boot-visual .boot-robot:before {
  content:"";
  position:absolute;
  z-index:2;
  left:28px; right:28px; top:68px; height:38px;
  border-radius:19px;
  background:linear-gradient(180deg,#232d33,#10171b);
  box-shadow:inset 0 2px 9px rgba(255,255,255,.07),0 0 18px rgba(0,0,0,.45);
}
.boot-visual .boot-robot:after {
  content:"";
  position:absolute;
  z-index:1;
  left:50%; bottom:-28px;
  width:110px; height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(0,0,0,.34);
  filter:blur(9px);
}
.boot-visual .boot-robot i {
  position:absolute;
  z-index:3;
  top:82px;
  width:39px; height:12px;
  border-radius:8px;
  background:#6eeaff;
  box-shadow:0 0 8px #6eeaff,0 0 25px rgba(110,234,255,.92);
  animation:v8Eye 1.6s ease-in-out infinite alternate;
}
.boot-visual .boot-robot i:nth-child(2) { left:45px; }
.boot-visual .boot-robot i:nth-child(3) { right:45px; animation-delay:.08s; }
@keyframes v8Eye { to { opacity:.72; box-shadow:0 0 4px #6eeaff,0 0 14px rgba(110,234,255,.68); } }
.boot-visual .boot-robot u {
  position:absolute;
  z-index:4;
  left:50%; bottom:9px;
  width:15px; height:15px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#67e7ff;
  box-shadow:0 0 18px #67e7ff;
  text-decoration:none;
  animation:v8Core 1.2s ease-in-out infinite alternate;
}
@keyframes v8Core { to { transform:translateX(-50%) scale(.72); opacity:.65; } }
.boot-orbit {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 0 30px rgba(104,232,255,.028);
}
.boot-orbit:after {
  content:"";
  position:absolute;
  top:-5px; left:50%;
  width:9px; height:9px;
  border-radius:50%;
  background:#68e8ff;
  box-shadow:0 0 18px #68e8ff;
}
.orbit-a { width:72%; height:72%; animation:v8Spin 9s linear infinite; }
.orbit-b { width:95%; height:52%; border-color:rgba(214,55,76,.27); animation:v8SpinReverse 7s linear infinite; }
.orbit-b:after { background:#ef5265; box-shadow:0 0 18px #ef5265; }
.orbit-c { width:54%; height:99%; border-color:rgba(104,232,255,.20); animation:v8Spin 12s linear infinite; }
.orbit-d { width:83%; height:83%; border-style:dashed; opacity:.55; animation:v8SpinReverse 18s linear infinite; }
@keyframes v8Spin { to { transform:rotate(360deg); } }
@keyframes v8SpinReverse { to { transform:rotate(-360deg); } }
.boot-pulse {
  position:absolute;
  width:42%; height:42%;
  border-radius:50%;
  border:1px solid rgba(104,232,255,.62);
  animation:v8Pulse 1.9s ease-out infinite;
}
@keyframes v8Pulse { from{transform:scale(.55);opacity:.8} to{transform:scale(2.55);opacity:0} }
.boot-core-ring {
  position:absolute;
  inset:31%;
  border-radius:50%;
  border:1px solid rgba(104,232,255,.13);
  animation:v8Breath 2.2s ease-in-out infinite alternate;
}
.boot-core-ring span { position:absolute; inset:10%; border-radius:50%; border:1px dashed rgba(209,52,72,.22); }
@keyframes v8Breath { to { transform:scale(1.08); opacity:.52; } }
.boot-diagnostics {
  position:absolute;
  left:9%; right:9%; bottom:13%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.boot-diagnostics div {
  padding:10px 11px;
  border-top:1px solid rgba(104,232,255,.22);
  background:rgba(255,255,255,.018);
}
.boot-diagnostics span,
.boot-diagnostics b { display:block; }
.boot-diagnostics span { color:#5b6871; font-size:7px; letter-spacing:.16em; }
.boot-diagnostics b { margin-top:5px; color:#dce8e7; font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }

.boot-copy { min-width:0; position:relative; }
.boot-copy:before {
  content:"";
  position:absolute;
  left:-28px; top:1px; bottom:2px;
  width:1px;
  background:linear-gradient(transparent,rgba(104,232,255,.28) 16% 84%,transparent);
}
.boot-kicker {
  display:flex;
  align-items:center;
  gap:9px;
  color:#72e9ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.23em;
}
.boot-kicker span {
  width:7px; height:7px; border-radius:50%; background:#66e8ff;
  box-shadow:0 0 13px #66e8ff;
  animation:v8Live .85s ease-in-out infinite alternate;
}
@keyframes v8Live { to { opacity:.25; transform:scale(.65); } }
.boot-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin:14px 0 25px;
}
.boot-heading h1 {
  margin:0;
  color:#fff;
  font-size:clamp(60px,7vw,108px);
  line-height:.78;
  letter-spacing:-.078em;
  text-align:left;
  text-shadow:0 16px 45px rgba(0,0,0,.28);
}
.boot-heading h1 em { color:#d4dbd9; font-style:normal; }
.boot-heading strong {
  display:flex;
  align-items:flex-start;
  color:#68e8ff;
  font:900 clamp(34px,5.4vw,72px)/.9 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-.08em;
  text-shadow:0 0 28px rgba(104,232,255,.24);
}
.boot-heading strong small { margin:5px 0 0 5px; font-size:.5em; letter-spacing:-.04em; }
.boot-status-line { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.boot-copy .boot-status-line p,
.boot-status-line p {
  margin:0 0 10px;
  color:#edf2ef;
  font-size:9px;
  font-weight:900;
  letter-spacing:.17em;
}
.boot-status-line > span {
  margin-bottom:9px;
  padding:4px 7px;
  border:1px solid rgba(111,238,185,.25);
  color:#75efba;
  font-size:7px;
  font-weight:900;
  letter-spacing:.16em;
  animation:v8Live 1.2s ease-in-out infinite alternate;
}
.boot-copy .boot-track {
  position:relative;
  width:100%; height:7px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.052);
  overflow:visible;
  box-shadow:inset 0 0 14px rgba(0,0,0,.22);
}
.boot-copy .boot-track:before {
  content:"";
  position:absolute; inset:0;
  opacity:.26;
  background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.16) 29px 30px);
  z-index:2;
  pointer-events:none;
}
.boot-copy .boot-track b {
  position:absolute;
  inset:-1px auto -1px -1px;
  width:100%;
  transform-origin:left center;
  transform:scaleX(var(--boot-progress-scale));
  background:linear-gradient(90deg,#cb3045,#ed5b66 38%,#67e7ff 88%,#d8fbff);
  box-shadow:0 0 22px rgba(104,232,255,.35);
  transition:transform .08s linear;
}
.boot-copy .boot-track b:after {
  content:"";
  position:absolute; inset:0;
  width:32%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:v8BarSweep 1.4s linear infinite;
}
@keyframes v8BarSweep { from{transform:translateX(-130%)} to{transform:translateX(330%)} }
.boot-copy .boot-track > i {
  position:absolute;
  z-index:4;
  left:var(--boot-progress-pct);
  top:50%;
  width:9px; height:15px;
  transform:translate(-50%,-50%);
  border-radius:2px;
  background:#d8fbff;
  box-shadow:0 0 13px #68e8ff;
  transition:left .08s linear;
}
.boot-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:10px;
  color:#6e7b84;
  font-size:8px;
  letter-spacing:.13em;
}
.boot-meta b {
  min-width:0;
  color:#b9c6ca;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}
.boot-stages {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-top:25px;
}
.boot-stages span {
  position:relative;
  min-width:0;
  padding:11px 9px 10px;
  border:1px solid rgba(255,255,255,.075);
  color:#55636c;
  background:rgba(255,255,255,.016);
  transition:.25s ease;
  overflow:hidden;
}
.boot-stages span:after {
  content:"";
  position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:#68e8ff;
  box-shadow:0 0 12px #68e8ff;
  transition:.28s ease;
}
.boot-stages span i,
.boot-stages span b { display:block; font-style:normal; }
.boot-stages span i { color:#56636b; font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.boot-stages span b { margin-top:5px; font-size:7px; letter-spacing:.08em; white-space:nowrap; }
.boot-stages span.active {
  color:#eef8f6;
  border-color:rgba(104,232,255,.34);
  background:rgba(104,232,255,.07);
  box-shadow:inset 0 0 22px rgba(104,232,255,.035);
}
.boot-stages span.active:after { right:0; animation:v8StagePulse 1.1s ease-in-out infinite alternate; }
@keyframes v8StagePulse { to { opacity:.35; } }
.boot-stages span.done { color:#8eeebb; border-color:rgba(113,255,176,.22); background:rgba(113,255,176,.025); }
.boot-stages span.done i { color:#6dc89e; }
.boot-stages span.done:after { right:0; background:#74efb7; box-shadow:0 0 10px rgba(116,239,183,.55); }
.boot-lower {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:12px;
  margin-top:14px;
}
.boot-log,
.boot-systems {
  border:1px solid rgba(255,255,255,.065);
  background:rgba(0,0,0,.13);
  min-height:98px;
}
.boot-log { padding:10px 12px; overflow:hidden; }
.boot-log span {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:8px;
  align-items:center;
  height:26px;
  border-bottom:1px solid rgba(255,255,255,.035);
  color:#89979e;
  font-size:7px;
  letter-spacing:.08em;
  animation:v8LogIn .25s ease both;
}
.boot-log span:last-child { border-bottom:0; }
.boot-log i { color:#67e7ff; font-style:normal; font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.boot-log b { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
@keyframes v8LogIn { from { opacity:0; transform:translateX(-8px); } }
.boot-systems { display:grid; grid-template-columns:1fr; }
.boot-systems div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 11px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.boot-systems div:last-child { border-bottom:0; }
.boot-systems span { color:#5f6c74; font-size:7px; letter-spacing:.13em; }
.boot-systems b { color:#78efba; font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.boot-tip {
  margin-top:14px;
  color:#64717a;
  font-size:7px;
  letter-spacing:.105em;
  line-height:1.7;
}
.boot-tip span { color:#d2d9d7; margin-right:9px; }
.boot-footer {
  position:absolute;
  z-index:4;
  left:45px; right:45px; bottom:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#52616a;
  font-size:7px;
  letter-spacing:.16em;
}
.boot-footer b { color:#78efba; font-weight:800; }

@media (max-width: 980px) {
  .boot-layout { width:min(760px,calc(100% - 44px)); grid-template-columns:1fr; height:calc(100% - 78px); }
  .boot-visual { display:none; }
  .boot-copy:before { display:none; }
  .boot-heading h1 { font-size:clamp(58px,14vw,96px); }
  .boot-heading strong { font-size:clamp(40px,10vw,68px); }
  .boot-footer { left:22px; right:22px; bottom:15px; }
}
@media (max-width: 620px) {
  .boot-layout { width:calc(100% - 28px); align-items:center; }
  .boot-kicker { font-size:6px; letter-spacing:.13em; }
  .boot-heading { margin:12px 0 20px; gap:10px; }
  .boot-heading h1 { font-size:17vw; }
  .boot-heading strong { font-size:11vw; }
  .boot-stages { grid-template-columns:repeat(5,1fr); gap:3px; }
  .boot-stages span { padding:8px 3px; text-align:center; }
  .boot-stages span b { display:none; }
  .boot-lower { grid-template-columns:1fr; }
  .boot-systems { display:none; }
  .boot-footer span:last-child { display:none; }
  .boot-footer { font-size:5px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-screen *, .boot-screen *:before, .boot-screen *:after { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}