/* Global */
:root{
  --bg:#0a0e18;
  --text:#e8eefc;
  --muted:#a8b6d9;
  --panel:rgba(255,255,255,0.06);
  --panel-strong:rgba(255,255,255,0.12);
  --blue:#5aa9ff;
  --green:#34d399;
  --red:#ef4444;
  --pulse: var(--blue);
  --font:'Rajdhani','Exo 2','Montserrat Alternates','Eurostile','Segoe UI',Roboto,system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%; background:var(--bg); color:var(--text); font-family:var(--font)}
#stars{position:fixed; inset:0; z-index:-3}
.nebula{position:fixed; inset:-10vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 20% 30%, rgba(88,165,255,0.15), transparent 60%),
    radial-gradient(70vmax 70vmax at 80% 20%, rgba(52,211,153,0.12), transparent 60%),
    radial-gradient(60vmax 60vmax at 60% 80%, rgba(239,68,68,0.10), transparent 60%);
  filter: blur(16px) saturate(1.1);
  animation: nDrift 18s ease-in-out infinite alternate;
}
@keyframes nDrift{from{transform:translateY(-1%) scale(1)} to{transform:translateY(1%) scale(1.02)}}
.nebula.idle{animation-duration:8s; filter: blur(20px) saturate(1.35)}

.header{ text-align:center; padding: clamp(16px,3vw,28px) 16px 0;}
.mantra{ font-weight:800; letter-spacing:.4px; font-size: clamp(18px, 2.6vw, 28px); }
.mantra .blue{color:var(--blue)} .mantra .green{color:var(--green)} .mantra .red{color:var(--red)}

.orb-stage{ display:grid; place-items:center; padding: 8px 16px; margin-top: 10px;}
.orb-wrap{ position:relative; width:min(64vmin,560px); aspect-ratio:1/1; }
.orb{ position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  filter: drop-shadow(0 0 24px rgba(90,169,255,.25)); transform-style:preserve-3d}
.orb-core{ width:70%; aspect-ratio:1/1; border-radius:50%; display:grid; place-items:center;
  animation: heartbeat 4s ease-in-out infinite }
.crest{ width:90%; height:auto; opacity:.92; filter: drop-shadow(0 0 10px rgba(255,255,255,.15));
  transform-origin: 50% 50%; animation: crestSpin 28s linear infinite }
.plasma{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode: screen }
.plasma.one{ box-shadow: inset 0 0 60px rgba(90,169,255,.25), 0 0 80px rgba(90,169,255,.18) }
.plasma.two{ box-shadow: inset 0 0 80px rgba(52,211,153,.22), 0 0 100px rgba(239,68,68,.16) }
.lens{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.22), transparent 55%);
  mix-blend-mode: screen }

.halo{ position:absolute; inset:0; animation: halo 20s linear infinite }
.halo-text{ font-size:6.5px; letter-spacing:2.2px; fill: var(--pulse); opacity:.9 }
@keyframes halo{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}

@keyframes heartbeat{
  0%{ transform: scale(0.98) }
  16%{ transform: scale(1.02) }
  33%{ transform: scale(0.985) }
  50%{ transform: scale(1.03) }
  66%{ transform: scale(1.0) }
  83%{ transform: scale(1.02) }
  100%{ transform: scale(0.98) }
}
@keyframes crestSpin{ from{ transform: rotateY(0deg) } to{ transform: rotateY(360deg) } }

.layout{ display:grid; place-items:center; margin-top: 6px; }
.console{ width:min(1100px,92vw); background:var(--panel); border:1px solid var(--panel-strong);
  border-radius:18px; padding:12px; backdrop-filter: blur(8px); transform: translateX(22px); opacity:0;
  transition: transform .9s ease, opacity .9s ease }
.console.active{ transform: translateX(0); opacity:1 }
.console-head{ display:flex; gap:10px; align-items:center; padding: 4px 6px 10px 6px }
.console-head h2{ font-size: clamp(16px,2vw,20px); font-weight:700; letter-spacing:.6px}
.console-head input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--panel-strong);
  background: rgba(255,255,255,0.04); color:var(--text); outline:none }
.console-head input:focus{ border-color: var(--pulse); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse) 25%, transparent) }

.faq{ display:grid; gap:10px; padding:6px }
.item{ background: rgba(255,255,255,0.05); border:1px solid var(--panel-strong); border-radius:14px; overflow:hidden }
.item summary{ list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; position:relative }
.item summary::-webkit-details-marker{ display:none }
.item[open] summary{ background: rgba(255,255,255,0.04) }
.item .answer{ padding:0 16px 16px; color:var(--muted); line-height:1.7 }

.footer{ text-align:center; padding:22px 16px 40px; color:var(--muted) }

.boot-void .orb, .boot-void .mantra, .boot-void .console{ opacity:0 }
.boot-phase2 .mantra{ opacity:.45; transition: opacity 1.2s ease }
.boot-phase3 .orb{ opacity:1; transition: opacity 1.4s ease }
.boot-phase4 .console{ opacity:1 }

@media (max-width:900px){
  .orb-wrap{ width:min(78vmin,560px) }
  .console-head{ flex-direction:column; align-items:stretch }
}