:root {
  --bg: #04050d;
  --fg: #e8ecff;
  --muted: #8b93b8;
  --c1: #7c5cff;
  --c2: #00e5ff;
  --c3: #ff5cf0;
  --c4: #3dffb8;
  --card: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.09);
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  animation: bodyIn 1.2s ease both;
}
body.booting { overflow: hidden; }

@keyframes bodyIn { from { opacity: 0; } }

::selection { background: rgba(124, 92, 255, 0.5); }

#bg, #stars { position: fixed; inset: 0; z-index: 0; }

.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

#glow {
  position: fixed; width: 560px; height: 560px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.18), rgba(0, 229, 255, 0.07) 45%, transparent 65%);
  pointer-events: none; transform: translate(-50%, -50%); filter: blur(8px);
  left: 50%; top: 35%; transition: opacity 0.6s ease;
}

#scrollbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 30;
  background: linear-gradient(90deg, var(--c2), var(--c1), var(--c3));
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.7);
}

main, .nav { position: relative; z-index: 2; }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring { position: fixed; z-index: 40; pointer-events: none; border-radius: 50%; left: 0; top: 0; opacity: 0; }
.cursor-dot { width: 6px; height: 6px; background: var(--c2); box-shadow: 0 0 10px rgba(0, 229, 255, 0.9); }
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(0, 229, 255, 0.55);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring { opacity: 1; }
body.cursor-link .cursor-ring { width: 54px; height: 54px; border-color: rgba(255, 92, 240, 0.8); }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Boot ---------- */
#boot {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(560px, 84vw); }
.boot-logo {
  font-weight: 800; letter-spacing: 0.3em; font-size: 1.1rem; margin-bottom: 22px;
}
.boot-logo span { color: var(--c2); text-shadow: 0 0 14px rgba(0, 229, 255, 0.9); }
#bootLog {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.78rem; line-height: 2; color: var(--muted); white-space: pre-wrap; min-height: 160px;
}
#bootLog b { color: var(--c4); font-weight: 500; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 26px;
  padding: 18px clamp(18px, 4vw, 52px);
  background: linear-gradient(180deg, rgba(4, 5, 13, 0.88), rgba(4, 5, 13, 0.4) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.logo { font-weight: 800; letter-spacing: 0.28em; font-size: 0.95rem; text-transform: uppercase; flex-shrink: 0; }
.logo span { color: var(--c2); text-shadow: 0 0 12px rgba(0, 229, 255, 0.8); }

.ticker {
  flex: 1; overflow: hidden; min-width: 0; height: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: ticker 34s linear infinite;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted);
}
.ticker-track i { font-style: normal; color: var(--c2); margin: 0 6px; }
@keyframes ticker { to { transform: translateX(-50%); } }

.nav-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.clock {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.74rem; letter-spacing: 0.12em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nav-status { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, monospace; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c4); box-shadow: 0 0 10px var(--c4); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

/* ---------- Dots nav ---------- */
.dots-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 16px; }
.dots-nav a {
  width: 10px; height: 10px; border-radius: 50%; display: block;
  border: 1px solid rgba(255, 255, 255, 0.3); position: relative; transition: all 0.3s ease;
}
.dots-nav a.active { background: var(--c2); border-color: var(--c2); box-shadow: 0 0 12px rgba(0, 229, 255, 0.8); }
.dots-nav a::after {
  content: attr(data-label); position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 0.62rem; letter-spacing: 0.2em; color: var(--muted); white-space: nowrap;
  opacity: 0; transition: opacity 0.3s ease;
}
.dots-nav a:hover::after { opacity: 1; }
@media (max-width: 900px) { .dots-nav { display: none; } }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 130px 20px 70px; position: relative;
}

.kicker {
  font-size: clamp(0.6rem, 1.4vw, 0.78rem); letter-spacing: 0.42em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 28px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}

.title {
  font-size: clamp(3.4rem, 13vw, 9.5rem);
  font-weight: 900; letter-spacing: 0.1em; line-height: 1; margin-bottom: 26px;
  background: linear-gradient(100deg, var(--c2), var(--c1) 38%, var(--c3) 68%, var(--c2));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shift 9s linear infinite;
  filter: drop-shadow(0 0 30px rgba(124, 92, 255, 0.35));
  position: relative;
}
@keyframes shift { to { background-position: 300% 0; } }

.title::before, .title::after {
  content: attr(data-text); position: absolute; inset: 0;
  background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; pointer-events: none;
}
.title::before { animation: glitchA 7s infinite steps(1); }
.title::after { animation: glitchB 7s infinite steps(1); }
@keyframes glitchA {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.8; transform: translate(-3px, -2px); clip-path: inset(12% 0 58% 0); }
  95% { opacity: 0.8; transform: translate(3px, 2px); clip-path: inset(55% 0 8% 0); }
  97% { opacity: 0; }
}
@keyframes glitchB {
  0%, 93%, 100% { opacity: 0; }
  94% { opacity: 0.7; transform: translate(3px, -1px); clip-path: inset(38% 0 30% 0); }
  96% { opacity: 0.7; transform: translate(-2px, 2px); clip-path: inset(5% 0 75% 0); }
  98% { opacity: 0; }
}

.subtitle {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color: var(--muted); font-size: clamp(0.85rem, 2vw, 1.05rem);
  min-height: 1.6em; margin-bottom: 40px; letter-spacing: 0.04em;
}
.prompt-sign { color: var(--c2); }

.caret {
  display: inline-block; width: 9px; height: 1.05em; margin-left: 2px;
  background: var(--c2); vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.9);
}
@keyframes blink { 50% { opacity: 0; } }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.btn {
  display: inline-block; padding: 13px 32px; border-radius: 999px;
  font-size: 0.9rem; letter-spacing: 0.08em; text-decoration: none; color: var(--bg);
  background: linear-gradient(100deg, var(--c2), var(--c1));
  font-weight: 700; transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 42px rgba(124, 92, 255, 0.6); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn.ghost:hover { border-color: rgba(0, 229, 255, 0.6); box-shadow: 0 0 26px rgba(0, 229, 255, 0.2); }

.chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.chip {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.7rem; letter-spacing: 0.18em; color: var(--muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.chip b { color: var(--fg); font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }

.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.6rem; letter-spacing: 0.4em; color: var(--muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.scroll-hint span { width: 1px; height: 46px; display: block; background: linear-gradient(180deg, var(--c2), transparent); animation: drip 2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Sections ---------- */
.pulse, .core, .terminal-sec { padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 72px); max-width: 1280px; margin: 0 auto; }

.section-title {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); letter-spacing: 0.1em;
  margin-bottom: 40px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.section-title span {
  font-size: 0.66em; color: var(--muted); letter-spacing: 0.34em;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-weight: 400;
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.lower { margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  position: relative; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 30px 26px; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, 0.12), transparent 45%);
  opacity: 0; transition: opacity 0.35s ease;
}
.card:hover { border-color: rgba(0, 229, 255, 0.35); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.08); }
.card:hover::after { opacity: 1; }

.tilt { transform-style: preserve-3d; will-change: transform; }

.card.wide { grid-column: span 2; }
@media (max-width: 640px) { .card.wide { grid-column: span 1; } }

/* ---------- Rings ---------- */
.ring-card { display: flex; align-items: center; justify-content: center; padding: 34px 20px; }
.ring { width: 168px; height: 168px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring-bg { stroke: rgba(255, 255, 255, 0.06); }
.ring-fg { stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease; }
.ring-fg.cpu { stroke: var(--c2); filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.9)); }
.ring-fg.mem { stroke: var(--c1); filter: drop-shadow(0 0 7px rgba(124, 92, 255, 0.9)); }
.ring-fg.disk { stroke: var(--c3); filter: drop-shadow(0 0 7px rgba(255, 92, 240, 0.9)); }
.ring-fg.alarm { stroke: #ff4d6d; filter: drop-shadow(0 0 7px rgba(255, 77, 109, 0.9)); }

.ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ring-label b { font-size: 2rem; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ring-label i { font-style: normal; font-size: 0.9rem; color: var(--muted); margin-left: 3px; }
.ring-label small { display: block; text-align: center; margin-top: 6px; font-size: 0.66rem; letter-spacing: 0.24em; color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.ring-label > div { display: flex; flex-direction: column; align-items: center; }

/* ---------- Charts ---------- */
.spark-card, .latency-card { display: flex; flex-direction: column; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.72rem; letter-spacing: 0.24em; color: var(--muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace; margin-bottom: 18px;
}
.badge { padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; color: var(--c2); border: 1px solid rgba(0, 229, 255, 0.35); background: rgba(0, 229, 255, 0.07); font-variant-numeric: tabular-nums; }

.legend { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; }
.legend .lg { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-left: 12px; }
.legend .lg.cpu { background: var(--c2); box-shadow: 0 0 8px rgba(0, 229, 255, 0.8); }
.legend .lg.mem { background: var(--c1); box-shadow: 0 0 8px rgba(124, 92, 255, 0.8); }

#spark { width: 100%; height: 150px; display: block; }
#latency { width: 100%; height: 84px; display: block; }

.spark-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.spark-meta b { color: var(--fg); font-weight: 600; }

/* ---------- Uptime & info ---------- */
.uptime-card { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.uptime-card small { font-size: 0.68rem; letter-spacing: 0.3em; color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.uptime-card b {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800;
  background: linear-gradient(100deg, var(--c2), var(--c1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.uptime-card span { color: var(--muted); font-size: 0.8rem; }

.info-card ul { list-style: none; }
.info-card li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); font-size: 0.84rem; }
.info-card li:last-child { border-bottom: none; }
.info-card li span { color: var(--muted); letter-spacing: 0.08em; }
.info-card li b { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Reactor ---------- */
.core-wrap { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(300px, 1fr); gap: 22px; }
@media (max-width: 860px) { .core-wrap { grid-template-columns: 1fr; } }

.reactor-card { display: flex; align-items: center; justify-content: center; min-height: 380px; padding: 20px; }
#reactor { width: 100%; max-width: 420px; aspect-ratio: 1; display: block; }
.reactor-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.reactor-label b { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(0, 229, 255, 0.7); }
.reactor-label i { font-style: normal; color: var(--muted); font-size: 1.1rem; margin-top: 2px; }
.reactor-label small { margin-top: 10px; font-size: 0.64rem; letter-spacing: 0.34em; color: var(--c4); font-family: "SF Mono", ui-monospace, Menlo, monospace; }

.feed-card { display: flex; flex-direction: column; max-height: 460px; }
.feed {
  flex: 1; overflow-y: auto; font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.72rem; line-height: 1.9;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.feed-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); animation: feedIn 0.35s ease both; }
.feed-line b { color: var(--fg); font-weight: 500; }
.feed-line .ok { color: var(--c4); }
.feed-line .warn { color: #ffd166; }
.feed-line .err { color: #ff4d6d; }
.feed-line .info { color: var(--c2); }
.feed-line.dim { opacity: 0.6; }
@keyframes feedIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Terminal ---------- */
.terminal { padding: 0; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 0.72rem; color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.term-bar span { margin-left: 10px; }
.t-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.t-dot.red { background: #ff5f57; } .t-dot.yellow { background: #febc2e; } .t-dot.green { background: #28c840; }

#term {
  padding: 26px; min-height: 300px; font-size: 0.86rem; line-height: 1.85;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color: #b8ffdd; white-space: pre-wrap; word-break: break-word;
}
#term .t-prompt { color: var(--c2); }
#term .t-cmd { color: var(--fg); }
#term .t-out { color: var(--muted); }
#term .t-ok { color: var(--c4); }

/* ---------- Footer ---------- */
footer { text-align: center; padding: 70px 20px 60px; color: var(--muted); font-size: 0.84rem; line-height: 2; }
footer b { color: var(--fg); font-weight: 600; }
footer .muted { font-size: 0.76rem; opacity: 0.75; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .title, .caret, .dot, .scroll-hint span, .ticker-track { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 880px) {
  .ticker { display: none; }
}
@media (max-width: 720px) {
  .card { padding: 24px 20px; }
  .ring { width: 138px; height: 138px; }
  .ring-label b { font-size: 1.6rem; }
  .nav { padding: 15px 18px; gap: 14px; }
  #term { padding: 18px; font-size: 0.78rem; }
  .nav-right .clock { display: none; }
}