:root {
  --void: #050713;
  --panel: #0c1024;
  --line: #242a4d;
  --electric: #6df7ff;
  --violet: #a269ff;
  --acid: #c9ff5a;
  --text: #eef5ff;
  --muted: #96a0c3;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--void); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.command-layout { min-height: 100vh; display: grid; grid-template-columns: 116px 1fr; }
.command-rail { position: sticky; z-index: 20; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 24px 12px; border-right: 1px solid var(--line); background: #070916; }
.console-mark { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--electric); background: linear-gradient(135deg, #171c39, #080a17); box-shadow: 0 0 24px #6df7ff22; }
.console-mark span { font-size: 27px; font-weight: 900; }
.console-mark small { color: var(--electric); font-size: 9px; letter-spacing: .15em; }
.command-rail nav { display: grid; gap: 10px; width: 100%; margin: 50px 0 auto; }
.command-rail nav a { display: grid; place-items: center; gap: 7px; min-height: 68px; padding: 9px; color: var(--muted); border: 1px solid transparent; font-size: 11px; text-align: center; }
.command-rail nav a i { font-size: 17px; }
.command-rail nav a[aria-current="page"] { color: var(--electric); border-color: #354466; background: #11162e; }
.system-light { display: grid; place-items: center; gap: 8px; color: #7782a8; font-size: 9px; text-align: center; }
.system-light i, .footer-status i { width: 8px; height: 8px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 12px var(--acid); }
.rail-trigger { display: none; }
.system-shell { min-width: 0; }
.console-topbar { height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px, 4vw, 70px); border-bottom: 1px solid var(--line); background: #080b18e8; }
.console-topbar div { display: grid; }
.console-topbar span { font-weight: 800; letter-spacing: .08em; }
.console-topbar small { margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .2em; }
.console-topbar a { color: var(--electric); font-size: 13px; }
.arena-main > section, .arena-main > header, .ecosystem-page > section, .ecosystem-page > header, .bracket-page > section, .bracket-page > header, .ticker-page > section, .ticker-page > header, .terminal-page > section, .terminal-page > header, .terminal-page > figure { max-width: 1320px; margin-inline: auto; }
.command-hero { position: relative; min-height: 670px; display: grid; grid-template-columns: 1fr 1.25fr; align-items: stretch; padding: 54px clamp(24px, 5vw, 80px); overflow: hidden; }
.command-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#151a31 1px, transparent 1px), linear-gradient(90deg, #151a31 1px, transparent 1px); background-size: 44px 44px; opacity: .35; }
.hero-terminal { position: relative; z-index: 2; align-self: center; padding-right: 45px; }
.hero-terminal > p:first-child, .bracket-zone header p, .mobile-console p, .arena-final > p { color: var(--electric); font: 700 12px Consolas, monospace; letter-spacing: .12em; }
.hero-terminal h2 { margin: 18px 0; font-size: clamp(46px, 6vw, 84px); line-height: .98; letter-spacing: -.05em; }
.hero-terminal > p:nth-of-type(2) { max-width: 580px; color: var(--muted); line-height: 1.8; }
.command-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.command-tags span { padding: 6px 9px; color: var(--electric); border: 1px solid var(--line); font: 10px Consolas, monospace; }
.hero-terminal > div { display: flex; align-items: center; gap: 18px; margin-top: 35px; }
.hero-terminal a, .arena-final a { padding: 15px 22px; color: #061019; background: var(--electric); font-weight: 900; }
.hero-terminal div span { color: #6f7899; font: 11px Consolas, monospace; }
.command-hero figure { position: relative; z-index: 1; margin: 0; clip-path: polygon(10% 0, 100% 0, 100% 90%, 88% 100%, 0 100%, 0 12%); }
.command-visual { height: 100%; min-height: 560px; filter: saturate(1.25) contrast(1.08); }
.command-hero figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #a269ff22, #6df7ff22), linear-gradient(0deg, #050713c7, transparent 45%); }
.command-hero figcaption { position: absolute; z-index: 2; left: 22px; bottom: 18px; color: #d9e8ff; font: 11px Consolas, monospace; }
.signal-card { position: absolute; z-index: 3; right: 4%; top: 12%; display: grid; padding: 18px; border: 1px solid var(--electric); background: #080b18dd; }
.signal-card span, .signal-card small { color: var(--muted); font: 9px Consolas, monospace; }
.signal-card strong { margin: 5px 0; color: var(--acid); font-size: 26px; }
.game-bento { display: grid; grid-template-columns: 1.6fr 1fr .7fr 1fr; gap: 14px; padding: 30px clamp(24px, 5vw, 80px) 90px; }
.game-bento article { position: relative; min-height: 240px; padding: 28px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.game-bento .bento-wide { background: linear-gradient(135deg, #131b3c, #27133d); }
.game-bento .bento-wide span { color: var(--electric); font: 11px Consolas, monospace; }
.game-bento h3 { position: relative; z-index: 2; font-size: 24px; }
.game-bento p { max-width: 390px; color: var(--muted); line-height: 1.7; }
.game-bento img { position: absolute; inset: 0; height: 100%; opacity: .55; }
.game-bento .metric { display: grid; place-items: center; align-content: center; text-align: center; }
.game-bento .metric strong { color: var(--acid); font-size: 40px; }
.bracket-zone { padding: 80px clamp(24px, 5vw, 80px); border-block: 1px solid var(--line); background: #080b1b; }
.bracket-zone h2 { margin: 10px 0 40px; font-size: 42px; }
.bracket-zone ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0; list-style: none; }
.bracket-zone li { display: grid; gap: 13px; padding: 25px; border-left: 3px solid var(--violet); background: #10152c; }
.bracket-zone li span { color: var(--muted); }
.roster-strip { display: grid; grid-template-columns: 1fr 1fr; min-height: 450px; margin-block: 90px; border: 1px solid var(--line); }
.roster-strip figure { margin: 0; }
.roster-strip img { height: 100%; }
.roster-strip div { align-self: center; padding: 60px; }
.roster-strip div > p { color: var(--violet); font: 12px Consolas, monospace; }
.roster-strip h2 { font-size: 40px; }
.roster-strip div p:last-child { color: var(--muted); line-height: 1.8; }
.feature-console { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 0 clamp(24px, 5vw, 80px) 90px; }
.feature-console article { padding: 32px; border: 1px solid var(--line); }
.feature-console i { color: var(--electric); font-size: 28px; }
.feature-console p { color: var(--muted); }
.mobile-console { display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 60px; padding: 70px clamp(24px, 5vw, 80px); background: linear-gradient(100deg, #151130, #0a1830); }
.mobile-console h2 { font-size: 42px; }
.mobile-console div p:last-child { color: var(--muted); line-height: 1.8; }
.mobile-console img { height: 520px; }
.community-feed { padding: 80px clamp(24px, 5vw, 80px); }
.community-feed header { display: flex; justify-content: space-between; align-items: center; }
.community-feed header span { color: var(--acid); font: 11px Consolas, monospace; }
.community-feed > div { display: grid; grid-template-columns: 230px 1fr; padding: 20px; border-top: 1px solid var(--line); }
.community-feed b { color: var(--electric); }
.community-feed p { margin: 0; color: var(--muted); }
.review-scan { padding: 80px; text-align: center; border: 1px solid var(--line); }
.review-scan blockquote { max-width: 900px; margin: auto; font-size: 30px; line-height: 1.5; }
.review-scan span { display: block; margin-top: 20px; color: var(--violet); }
.terminal-faq { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 90px clamp(24px, 5vw, 80px); }
.tab-list { display: grid; align-content: start; }
.tab-list button { padding: 17px; color: var(--muted); border: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.tab-list button[aria-selected="true"] { color: var(--electric); background: #121733; }
.tab-panel { padding: 30px; border-left: 2px solid var(--electric); }
.tab-panel p { color: var(--muted); }
.arena-final { padding: 80px clamp(24px, 5vw, 80px); margin-bottom: 90px; background: var(--acid); color: #0a1021; }
.arena-final > p { color: #38480f; }
.arena-final h2 { max-width: 800px; font-size: 42px; }
.arena-final a { display: inline-block; color: white; background: #0a1021; }
.console-footer { display: grid; grid-template-columns: auto 1fr; gap: 25px 50px; align-items: center; padding: 45px clamp(24px, 5vw, 80px); border-top: 1px solid var(--line); }
.footer-status { display: flex; align-items: center; gap: 9px; font: 10px Consolas, monospace; }
.console-footer > a { justify-self: end; font-weight: 800; }
.console-footer > p { grid-column: 1 / -1; color: #737d9c; font-size: 11px; line-height: 1.7; }
.node-heading, .matrix-heading, .ticker-heading, .support-prompt { padding: 90px clamp(24px, 6vw, 100px); background: radial-gradient(circle at 75% 10%, #342052, transparent 33%), #090d20; }
.node-heading span, .matrix-heading span, .ticker-heading span, .support-prompt code { color: var(--electric); font: 12px Consolas, monospace; }
.node-heading h2, .matrix-heading h2, .ticker-heading h2, .support-prompt h2 { max-width: 950px; font-size: clamp(40px, 5vw, 70px); }
.node-heading p, .matrix-heading p, .ticker-heading p, .support-prompt p { max-width: 760px; color: var(--muted); line-height: 1.8; }
.node-map { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 100px clamp(24px, 8vw, 150px); }
.central-node { grid-column: 1 / -1; justify-self: center; display: grid; min-width: 280px; padding: 25px; border: 1px solid var(--electric); background: #101631; text-align: center; }
.central-node span { color: var(--muted); }
.node-map article { padding: 32px; border: 1px solid var(--line); background: var(--panel); }
.node-map article i { color: var(--violet); font-size: 28px; }
.node-map article p { color: var(--muted); }
.ecosystem-visual, .lab-visual, .transmission-lead { display: grid; grid-template-columns: 1.15fr .85fr; margin-bottom: 90px; border: 1px solid var(--line); }
.ecosystem-visual img, .transmission-lead img { height: 430px; }
.ecosystem-visual div, .transmission-lead div { align-self: center; padding: 50px; }
.ecosystem-visual p, .transmission-lead p { color: var(--muted); line-height: 1.8; }
.matrix-heading { display: grid; grid-template-columns: 1fr 430px; align-items: end; gap: 60px; }
.bracket-lab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; padding: 90px clamp(24px, 5vw, 80px); }
.round { position: relative; }
.round::after { content: ""; position: absolute; top: 50%; right: -35px; width: 25px; height: 1px; background: var(--violet); }
.round:last-child::after { display: none; }
.round article { display: flex; justify-content: space-between; margin: 12px 0; padding: 22px; border: 1px solid var(--line); background: #0e1329; }
.round article span { color: var(--electric); font: 10px Consolas, monospace; }
.lab-visual figure { margin: 0; }
.lab-visual img { height: 520px; }
.lab-visual > div { padding: 50px; }
.lab-visual ul { padding: 0; list-style: none; }
.lab-visual li { display: grid; gap: 6px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.lab-visual li span { color: var(--muted); }
.ticker-heading { border-bottom: 1px solid var(--line); }
.transmission-lead { margin-top: 80px; }
.transmission-lead > img { min-height: 430px; }
.transmission-lead small { color: var(--violet); font: 10px Consolas, monospace; }
.transmission-lead h3 { font-size: 38px; }
.ticker-log { padding: 0 clamp(24px, 5vw, 80px) 90px; }
.ticker-log article { display: grid; grid-template-columns: 130px 1fr 120px; gap: 30px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.ticker-log code { color: var(--electric); }
.ticker-log p, .ticker-log > article > span { color: var(--muted); }
.command-list { display: flex; gap: 12px; padding: 60px clamp(24px, 5vw, 80px) 25px; }
.command-list button { padding: 14px 18px; color: var(--electric); border: 1px solid var(--line); background: #0e1329; cursor: pointer; }
.terminal-output { padding: 35px; border: 1px solid var(--electric); background: #08151e; }
.terminal-output > span { color: var(--acid); font: 10px Consolas, monospace; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 30px clamp(24px, 5vw, 80px) 70px; }
.support-grid article { padding: 28px; border: 1px solid var(--line); }
.support-grid p { color: var(--muted); }
.terminal-figure { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 90px; }
.terminal-figure img { grid-column: 1 / -1; height: 380px; }
.terminal-figure figcaption { margin-top: 10px; color: var(--muted); }

@media (max-width: 980px) {
  .command-layout { grid-template-columns: 1fr; }
  .command-rail { position: sticky; width: 100%; height: 68px; flex-direction: row; justify-content: space-between; padding: 8px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .console-mark { width: 52px; height: 52px; }
  .console-mark small, .system-light { display: none; }
  .rail-trigger { display: block; padding: 10px; color: var(--electric); border: 1px solid var(--line); background: transparent; }
  .command-rail nav { position: absolute; top: 67px; right: 12px; display: none; width: 260px; margin: 0; padding: 12px; background: #080a18; box-shadow: 0 20px 45px #000a; }
  .command-rail nav.is-open { display: grid; }
  .command-rail nav a { grid-template-columns: 30px 1fr; justify-items: start; min-height: auto; text-align: left; }
  .console-topbar { display: none; }
  .command-hero, .roster-strip, .mobile-console, .ecosystem-visual, .lab-visual, .transmission-lead { grid-template-columns: 1fr; }
  .game-bento { grid-template-columns: 1fr 1fr; }
  .bracket-zone ol { grid-template-columns: 1fr 1fr; }
  .mobile-console img { height: 360px; }
}

@media (max-width: 600px) {
  .command-hero { grid-template-columns: 1fr; padding: 45px 20px; }
  .hero-terminal { padding-right: 0; }
  .hero-terminal h2 { font-size: 46px; }
  .command-visual { min-height: 340px; }
  .signal-card { top: auto; bottom: 8%; }
  .game-bento, .feature-console, .bracket-lab, .support-grid, .node-map { grid-template-columns: 1fr; }
  .bracket-zone ol { grid-template-columns: 1fr; }
  .roster-strip { margin: 50px 20px; }
  .roster-strip div, .review-scan, .transmission-lead div { padding: 30px; }
  .terminal-faq { grid-template-columns: 1fr; padding-inline: 20px; }
  .console-footer { grid-template-columns: 1fr; }
  .console-footer > a { justify-self: start; }
  .matrix-heading { grid-template-columns: 1fr; }
  .round::after { display: none; }
  .ticker-log article { grid-template-columns: 1fr; gap: 5px; }
  .command-list { flex-direction: column; }
}