:root{
  --radius: 18px;
  --radius2: 26px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

html[data-theme="dark"]{
  --bg0:#070A12;
  --bg1:#090B18;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.09);
  --stroke: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.88);
  --muted: rgba(255,255,255,0.66);
  --faint: rgba(255,255,255,0.45);
  --neon1:#7C5CFF;
  --neon2:#00E5FF;
  --neon3:#22FFB2;
  --warn:#FF4D8D;
  --shadow: 0 20px 80px rgba(0,0,0,0.55);
}

html[data-theme="light"]{
  --bg0:#F6F8FF;
  --bg1:#EEF2FF;
  --card: rgba(0,0,0,0.04);
  --card2: rgba(0,0,0,0.06);
  --stroke: rgba(0,0,0,0.12);
  --text: rgba(0,0,0,0.86);
  --muted: rgba(0,0,0,0.62);
  --faint: rgba(0,0,0,0.45);
  --neon1:#5B4BFF;
  --neon2:#00A3FF;
  --neon3:#12C98B;
  --warn:#E62D73;
  --shadow: 0 20px 70px rgba(0,0,0,0.16);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(124,92,255,0.26), transparent 55%),
    radial-gradient(1200px 800px at 80% 35%, rgba(0,229,255,0.18), transparent 55%),
    radial-gradient(900px 700px at 60% 90%, rgba(34,255,178,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-3; overflow:hidden;}
#stars{position:absolute; inset:0; width:100%; height:100%; opacity:0.75;}
.scanlines{
  position:absolute; inset:-2px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  opacity:0.18; mix-blend-mode: overlay;
  animation: drift 10s linear infinite;
}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(18px)}}
.grid{
  position:absolute; inset:-20%;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:56px 56px;
  transform: perspective(900px) rotateX(62deg) translateY(12%);
  transform-origin:center;
  opacity:0.10;
  mask-image: radial-gradient(closest-side at 50% 55%, rgba(0,0,0,1), rgba(0,0,0,0));
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove{from{background-position:0 0,0 0}to{background-position:0 120px,120px 0}}
.nebula{
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 25%, rgba(124,92,255,0.24), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(0,229,255,0.18), transparent 55%),
    radial-gradient(circle at 55% 70%, rgba(34,255,178,0.12), transparent 60%);
  filter: blur(40px) saturate(1.2);
  opacity:0.75;
  animation: nebula 18s ease-in-out infinite alternate;
}
@keyframes nebula{from{transform:translate3d(-2%,-1%,0) scale(1.02)}to{transform:translate3d(2%,1%,0) scale(1.06)}}

.top{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 22px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);}
.mark{
  width:40px; height:40px; border-radius:12px;
  background: radial-gradient(circle at 30% 35%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(124,92,255,0.95), rgba(0,229,255,0.70));
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 40px rgba(124,92,255,0.18), 0 10px 40px rgba(0,229,255,0.12);
}
.brandText{display:flex; flex-direction:column; line-height:1.1}
.brandText strong{font-size:0.98rem; letter-spacing:0.10em; text-transform:uppercase}
.brandText em{font-family:var(--mono); font-style:normal; color:var(--muted); font-size:0.82rem}

.topRight{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  font-family:var(--mono); font-size:0.82rem;
  color:var(--muted);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.03);
  padding: 9px 12px;
  border-radius:999px;
  backdrop-filter: blur(10px);
  display:inline-flex; gap:8px; align-items:center;
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background: linear-gradient(135deg, var(--neon3), var(--neon2));
  box-shadow: 0 0 18px rgba(0,229,255,0.22);
}

.toggle{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,0.05);
  color:var(--text);
  padding: 9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-family:var(--mono);
  display:inline-flex; gap:10px; align-items:center;
}
.toggle:hover{filter:brightness(1.06)}
.toggleIcon{opacity:0.9}

.wrap{max-width:1180px; margin:0 auto; padding: 14px 22px 56px;}
.hero{
  position:relative;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroInner{position:relative; padding: 26px 26px 24px; min-height: 460px; display:grid; gap:14px; z-index:1}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{
  font-family:var(--mono);
  font-size:0.80rem;
  color: rgba(255,255,255,0.84);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--stroke);
  padding: 7px 10px;
  border-radius:999px;
  backdrop-filter: blur(12px);
  display:inline-flex; gap:8px; align-items:center;
}
html[data-theme="light"] .badge{
  background: rgba(255,255,255,0.70);
  color: rgba(0,0,0,0.78);
}
.spark{width:10px;height:10px;border-radius:999px;background: linear-gradient(135deg,var(--neon1),var(--neon2)); box-shadow:0 0 22px rgba(124,92,255,0.20);}

h1{margin:0; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height:1.06; letter-spacing:-0.02em;}
.sub{margin:0; max-width: 66ch; color: var(--muted); line-height:1.55; font-size:1.03rem;}

.tiles{
  margin-top: 4px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .tiles{grid-template-columns:1fr}
  .heroInner{min-height:auto}
}

.tile{
  text-decoration:none;
  color: var(--text);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  transition: transform .12s ease, filter .12s ease;
}
.tile:hover{transform: translateY(-2px); filter:brightness(1.05)}
.tileTop{display:flex; gap:12px; align-items:center}
.tileGlyph{
  width:30px; height:30px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,255,178,0.65), rgba(0,229,255,0.28));
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(0,229,255,0.10);
}
.tileGlyph.alt{background: linear-gradient(135deg, rgba(124,92,255,0.65), rgba(0,229,255,0.22))}
.tileGlyph.warn{background: linear-gradient(135deg, rgba(255,77,141,0.55), rgba(0,229,255,0.18))}
.tileTitle{font-weight:800; letter-spacing:0.02em}
.tileDesc{margin:10px 0 0; color:var(--muted); line-height:1.45}
.tileMeta{margin-top: 10px; display:flex; justify-content:space-between; font-family:var(--mono); color:var(--faint); font-size:0.82rem}

.terminal{
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.28);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.78);
  display:flex; gap:8px; align-items:center;
  overflow:hidden;
}
html[data-theme="light"] .terminal{
  background: rgba(255,255,255,0.75);
  color: rgba(0,0,0,0.78);
}
.prompt{color: rgba(34,255,178,0.85);}
.path{color: var(--muted)}
.cmd{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cursor{width:10px; height:1.1em; border-radius:2px; background: rgba(0,229,255,0.75); animation: blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}

.holo{
  position:absolute;
  right:-30px;
  top:-26px;
  width: 420px;
  height: 420px;
  opacity: 0.92;
  filter: drop-shadow(0 18px 40px rgba(0,229,255,0.16)) drop-shadow(0 18px 40px rgba(124,92,255,0.12));
  pointer-events:none;
}
@media (max-width: 980px){
  .holo{position:relative; right:auto; top:auto; margin: 8px auto 0; width:min(520px, 92vw); height:min(520px, 92vw)}
}

.ring{
  position:absolute; inset: 40px;
  border-radius: 999px;
  border: 2px dashed rgba(0,229,255,0.35);
  opacity: 0.7;
  animation: rot 12s linear infinite;
}
.r2{inset: 84px; border-style:dotted; border-color: rgba(255,255,255,0.26); animation-duration: 16s; animation-direction: reverse;}
html[data-theme="light"] .r2{border-color: rgba(0,0,0,0.20);}
.r3{inset: 124px; border-style: dashed; border-color: rgba(124,92,255,0.35); animation-duration: 20s;}
@keyframes rot{to{transform: rotate(360deg)}}

.core{
  position:absolute; inset: 170px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 45%, rgba(0,0,0,0) 70%),
              linear-gradient(135deg, rgba(124,92,255,0.25), rgba(0,229,255,0.16));
  border: 1px solid var(--stroke);
}

.nodes .node{
  position:absolute; width:10px; height:10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--neon3), var(--neon2));
  box-shadow: 0 0 22px rgba(0,229,255,0.18);
}
.n1{left: 210px; top: 55px}
.n2{right: 80px; top: 155px}
.n3{left: 95px; bottom: 125px}
.n4{right: 170px; bottom: 65px; background: linear-gradient(135deg, var(--neon1), var(--neon2));}

.foot{
  margin-top: 18px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  font-family: var(--mono);
  color: var(--faint);
}
.sep{opacity:0.45}