:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #fff;
  background: #0a0a0a;
  font-synthesis: none;
  --bg: #0a0a0a;
  --red: #ff304f;
  --signal: #ff5b70;
  --muted: #aaa9ae;
  --line: #2d2c30;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, .72, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; position: relative; isolation: isolate; margin: 0; }
body::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 63% 48% at 78% 30%, #1e0b10, transparent 100%);
}
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button:enabled { cursor: pointer; }
:is(a, button):focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.shell { width: min(1320px, calc(100% - 104px)); margin-inline: auto; }
main.shell { flex: 1; display: grid; align-items: center; }
.matrix { position: fixed; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.site-header { border-bottom: 1px solid var(--line); background: #0b0b0be8; }
.header-inner { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand img { display: block; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%); }
.site-nav { display: flex; align-items: center; gap: 35px; }
.site-nav a { padding-block: 12px; color: #d8d7da; font-size: 14px; transition: color .18s; }
.site-nav a:hover, .site-nav a span { color: var(--signal); }
.gateway-indicator {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #101011;
  color: #d7d6d9;
  white-space: nowrap;
  font-size: 12px;
}
.gateway-indicator i { width: 7px; height: 7px; background: currentColor; }
.gateway-indicator[data-state="checking"] i { color: #79777c; }
.gateway-indicator[data-state="ready"] i { color: #f0eff1; box-shadow: 0 0 10px #fff8; }
.gateway-indicator[data-state="unavailable"] { color: var(--signal); border-color: #681e2a; }
.gateway-indicator[data-state="unavailable"] i { box-shadow: 0 0 10px #ff304f80; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  gap: 16px;
  align-items: center;
  min-height: 550px;
  padding-block: 22px;
}
.hero-copy { position: relative; z-index: 1; min-width: 0; padding: 18px 0 18px 19px; }
.hero h1 {
  font-size: clamp(58px, 7.2vw, 111px);
  font-weight: 850;
  line-height: .99;
  letter-spacing: -.075em;
}
.hero h1 span { display: block; width: max-content; max-width: 100%; }
.chromatic {
  position: relative;
  color: #fff;
  isolation: isolate;
  text-shadow: 2px 1px #ff304f, -1.5px -1px #79e8ec80;
}
.chromatic::before, .chromatic::after {
  position: absolute;
  content: attr(data-text);
  inset: 0;
  pointer-events: none;
}
.chromatic::before {
  color: var(--red);
  clip-path: inset(38% 0 53%);
  transform: translateX(5px);
  animation: split-red 8s steps(1, end) infinite;
}
.chromatic::after {
  z-index: -1;
  color: #9ef4f0;
  opacity: .59;
  clip-path: inset(72% 0 5%);
  transform: translateX(-4px);
  animation: split-light 8s steps(1, end) infinite;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 53px;
  padding: 0 17px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 730;
  transition: background .18s, border-color .18s, color .18s;
}
.action-primary { background: var(--red); border-color: var(--red); color: #0c0809; }
.action-primary:hover { background: #ff6076; border-color: #ff6076; }
.action-secondary { background: #111113; color: #eeedf0; }
.action-secondary:enabled:hover { background: #1b1115; border-color: var(--signal); }
.action-secondary:disabled { cursor: progress; opacity: .7; }
.action-arrow { font-size: 19px; font-weight: 600; transition: transform .18s var(--ease); }
.action-primary:hover .action-arrow { transform: translate(2px, -2px); }
.diagnose-icon { width: 13px; height: 13px; position: relative; border: 1px solid var(--signal); transform: rotate(45deg); }
.diagnose-icon::after { content: ""; position: absolute; inset: 4px; background: var(--signal); }

.planet-stage { position: relative; min-width: 0; height: clamp(400px, 42vw, 550px); isolation: isolate; }
.planet-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.planet-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 5% 4%;
  background: radial-gradient(ellipse at center, #5a122340, #2010172e 41%, transparent 76%);
}
.stage-frame {
  position: absolute;
  z-index: -1;
  inset: 19px 6px;
  border: 1px solid #ffffff15;
  background-image: radial-gradient(#ffffff2c .55px, transparent .55px);
  background-size: 13px 13px;
  mask-image: radial-gradient(ellipse at center, transparent 16%, #000 75%);
}
.stage-axis { position: absolute; z-index: -1; pointer-events: none; }
.stage-axis-x { left: 7px; right: 7px; top: 50%; border-top: 1px dashed #ff304f35; }
.stage-axis-y { top: 19px; bottom: 19px; left: 50%; border-left: 1px dashed #ffffff21; }
.stage-bracket { position: absolute; width: 17px; height: 17px; border: solid #ac5360; pointer-events: none; }
.stage-bracket-tl { left: 6px; top: 19px; border-width: 1px 0 0 1px; }
.stage-bracket-tr { right: 6px; top: 19px; border-width: 1px 1px 0 0; }
.stage-bracket-bl { left: 6px; bottom: 19px; border-width: 0 0 1px 1px; }
.stage-bracket-br { right: 6px; bottom: 19px; border-width: 0 1px 1px 0; }
.stage-scale { position: absolute; left: 20px; bottom: 19px; width: 87px; height: 6px; background: repeating-linear-gradient(90deg, #8f4c57 0 1px, transparent 1px 7px); }

.diagnostic-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#diagnostic-dialog {
  width: min(440px, calc(100% - 36px));
  padding: 20px;
  background: #121113;
  color: inherit;
  border: 1px solid var(--line);
  border-top-color: var(--red);
  box-shadow: 0 18px 65px #000b;
}
#diagnostic-dialog::backdrop { background: #000a; }
#diagnostic-dialog h2 { font-size: 17px; }
.dialog-close { min-height: 34px; padding: 0 10px; border: 1px solid #414045; background: #19191b; font-size: 13px; }
.dialog-close:hover { color: var(--signal); border-color: #8c3442; }
.terminal { margin-top: 13px; min-height: 42px; color: var(--muted); font: 12px/1.75 var(--mono); }
.terminal-line { display: flex; align-items: baseline; gap: 8px; overflow-wrap: anywhere; }
.terminal-line::before { flex-shrink: 0; content: ">"; color: var(--signal); }
.terminal-line[data-level="ok"] { color: #efedf1; }
.terminal-line[data-level="error"] { color: var(--signal); }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 19px 24px; color: var(--muted); font: 11px/1.5 var(--mono); letter-spacing: .08em; }
.clock { display: flex; gap: 8px; }
#clock { min-width: 8ch; color: #dfdce1; font-variant-numeric: tabular-nums; }

@keyframes split-red {
  0%, 11%, 55%, 100% { clip-path: inset(38% 0 53%); transform: translateX(5px); }
  9%, 51% { clip-path: inset(61% 0 32%); transform: translateX(-4px); }
  10%, 53% { clip-path: inset(21% 0 67%); transform: translateX(9px); }
}
@keyframes split-light {
  0%, 11%, 55%, 100% { transform: translateX(-4px); }
  9%, 51% { transform: translateX(5px); }
  10%, 53% { transform: translateX(-8px); }
}

@media (max-width: 1050px) {
  .shell { width: calc(100% - 64px); }
  .hero { min-height: 0; }
  .hero-copy { padding-left: 0; }
  .hero h1 { font-size: clamp(54px, 8.6vw, 88px); }
}
@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }
  .header-inner { min-height: 64px; gap: 12px; }
  .site-nav { gap: 15px; }
  .site-nav a { font-size: 12px; }
  .brand { gap: 7px; font-size: 12px; }
  .brand img { width: 30px; height: 30px; }
  .gateway-indicator { min-height: 30px; padding-inline: 7px; gap: 5px; font-size: 11px; }
  .gateway-indicator i { width: 6px; height: 6px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 36px 8px; }
  .hero-copy { padding-block: 0; }
  .hero h1 { font-size: clamp(49px, 12.8vw, 78px); }
  .hero-actions { margin-top: 19px; }
  .action { min-height: 47px; }
  .planet-stage { width: min(100%, 550px); height: auto; aspect-ratio: 1.05; margin-inline: auto; }
  .stage-frame { inset: 11px 0; }
  .stage-bracket-tl { top: 11px; left: 0; }
  .stage-bracket-tr { top: 11px; right: 0; }
  .stage-bracket-bl { bottom: 11px; left: 0; }
  .stage-bracket-br { bottom: 11px; right: 0; }
  .stage-axis-y { top: 11px; bottom: 11px; }
  .stage-scale { bottom: 11px; }
}
@media (max-width: 450px) {
  .brand { letter-spacing: .025em; }
  .site-nav { justify-self: end; gap: 8px; white-space: nowrap; }
  .header-inner { grid-template-columns: 1fr auto auto; gap: 8px; }
}
@media (max-width: 360px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding-block: 8px 0; }
  .site-nav { grid-row: 2; grid-column: 1 / -1; justify-self: start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}