:root{
  --x-bg:#050607;--x-panel:#0b0e0c;--x-ink:#f2f5e9;--x-dim:#9aa391;
  --x-acid:#c8ff2e;--x-pink:#ff2d78;--x-line:rgba(242,245,233,.16);
  --x-display:"Arial Black","Helvetica Neue",Impact,"PingFang SC","Microsoft YaHei",sans-serif;
  --x-body:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --x-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{background:var(--x-bg);scroll-behavior:smooth}
body{background:var(--x-bg);color:var(--x-ink);font-family:var(--x-body);margin:0;line-height:1.7;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 78% 12%,rgba(200,255,46,.13),transparent 62%),
    radial-gradient(700px 480px at 12% 72%,rgba(255,45,120,.10),transparent 65%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 74px);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.5) 3px 4px);}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.x-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto;position:relative;z-index:2}
.x-mono{font-family:var(--x-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--x-dim)}
.x-acid{color:var(--x-acid)}
.x-nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  border-bottom:1px solid var(--x-line);background:rgba(5,6,7,.72)}
.x-nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.x-brand{display:flex;align-items:center;gap:10px;font-family:var(--x-display);font-weight:900;
  letter-spacing:-.04em;font-size:22px;text-transform:uppercase}
.x-brand i{width:11px;height:11px;background:var(--x-acid);display:block;border-radius:50%;
  box-shadow:0 0 0 6px rgba(200,255,46,.12)}
.x-links{display:flex;gap:26px;font-family:var(--x-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.x-links a{color:var(--x-dim);transition:color .2s}
.x-links a:hover{color:var(--x-acid)}
.x-hero{min-height:min(92svh,880px);display:grid;align-items:center;position:relative;padding:clamp(54px,9vh,110px) 0 40px;overflow:hidden}
.x-hero__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center}
.x-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--x-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--x-acid);border:1px solid rgba(200,255,46,.4);
  padding:7px 11px;border-radius:999px;background:rgba(200,255,46,.06)}
.x-kicker::before{content:"";width:7px;height:7px;background:var(--x-acid);border-radius:50%;}
.x-title{font-family:var(--x-display);font-weight:900;text-transform:uppercase;letter-spacing:-.065em;
  line-height:.82;font-size:clamp(58px,11vw,142px);margin:22px 0 0;position:relative;z-index:2}
.x-title em{font-style:normal;color:var(--x-acid);display:inline-block;
  text-shadow:0 0 30px rgba(200,255,46,.28)}
.x-title .x-out{-webkit-text-stroke:1px var(--x-ink);color:transparent}
.x-lede{max-width:540px;color:#c7cec1;font-size:clamp(15px,1.5vw,18px);margin:24px 0 0}
.x-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.x-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid var(--x-line);
  font-family:var(--x-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:.2s;color:var(--x-ink)}
.x-btn:hover{transform:translateY(-2px);border-color:var(--x-acid);color:var(--x-acid)}
.x-btn--solid{background:var(--x-acid);color:#070a05;border-color:var(--x-acid);font-weight:700}
.x-btn--solid:hover{background:#e2ff8a;color:#070a05}
.x-orb{position:relative;width:100%;aspect-ratio:1;max-width:400px;margin-inline:auto;display:grid;place-items:center}
.x-orb__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(200,255,46,.28);}
.x-orb__ring:nth-child(2){inset:9%;border-style:dashed;border-color:rgba(255,45,120,.4);animation-direction:reverse}
.x-orb__ring:nth-child(3){inset:17%;border-color:rgba(242,245,233,.18);}
.x-orb__core{width:52%;aspect-ratio:1;border-radius:50%;background:
  radial-gradient(circle at 34% 28%,#f2ffd0 0 5%,#c8ff2e 18%,#4d7a00 55%,#0a1003 76%);
  box-shadow:0 0 70px rgba(200,255,46,.25),inset -16px -20px 40px rgba(0,0,0,.7);
  position:relative;z-index:2;}
.x-orb__core::after{content:"XG";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--x-display);font-size:clamp(42px,5vw,66px);letter-spacing:-.08em;color:#071004;transform:rotate(-8deg)}
.x-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--x-line);
  border:1px solid var(--x-line);margin-top:52px}
.x-stat{background:var(--x-bg);padding:18px 18px 16px}
.x-stat b{display:block;font-family:var(--x-display);font-size:clamp(28px,3.6vw,46px);line-height:1;letter-spacing:-.05em}
.x-stat span{display:block;margin-top:8px;font-family:var(--x-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--x-dim)}
.x-section{padding:clamp(60px,9vw,110px) 0;position:relative;z-index:2}
.x-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.x-h2{font-family:var(--x-display);font-size:clamp(32px,5vw,64px);text-transform:uppercase;letter-spacing:-.06em;line-height:.92;margin:0}
.x-h2 span{color:var(--x-acid)}
.x-games{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.x-game{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:330px;padding:20px;
  background:linear-gradient(160deg,var(--x-panel),#070908 70%);border:1px solid var(--x-line);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);transition:.25s}
.x-game::before{content:"";position:absolute;inset:auto -30% -55% -30%;height:75%;
  background:radial-gradient(circle,var(--g) 0,transparent 66%);opacity:.32;transition:.3s}
.x-game:hover{transform:translateY(-6px);border-color:var(--x-acid)}
.x-game:hover::before{opacity:.55}
.x-game__no{font-family:var(--x-mono);font-size:10px;color:var(--x-dim);letter-spacing:.14em}
.x-game h3{font-family:var(--x-display);font-size:clamp(28px,2.6vw,40px);line-height:.94;letter-spacing:-.05em;margin:16px 0 8px;text-transform:uppercase}
.x-game p{color:#b8c0b2;font-size:13px;margin:0;max-width:28ch}
.x-game__meta{display:flex;justify-content:space-between;align-items:center;margin-top:34px;padding-top:14px;border-top:1px solid var(--x-line);
  font-family:var(--x-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--x-dim)}
.x-game__meta b{color:var(--x-acid);font-weight:400}
.x-manifesto{border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);padding:28px 0;overflow:hidden;background:#070908}
.x-marquee{display:flex;gap:34px;white-space:nowrap;font-family:var(--x-display);font-size:clamp(24px,4vw,52px);
  text-transform:uppercase;letter-spacing:-.04em;width:max-content}
.x-marquee span{color:transparent;-webkit-text-stroke:1px rgba(242,245,233,.42)}
.x-marquee b{color:var(--x-acid);font-weight:900}
.x-lab{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.x-lab p{color:#b8c0b2;max-width:52ch}
.x-links-list{display:grid;gap:0;border-top:1px solid var(--x-line)}
.x-links-list a{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--x-line);transition:.2s}
.x-links-list a:hover{padding-left:8px;color:var(--x-acid)}
.x-links-list small{font-family:var(--x-mono);font-size:10px;color:var(--x-dim)}
.x-footer{padding:34px 0 46px;border-top:1px solid var(--x-line);position:relative;z-index:2}
.x-footer__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.x-footer a{color:var(--x-dim)}.x-footer a:hover{color:var(--x-acid)}
@keyframes xspin{to{transform:rotate(360deg)}}
@keyframes xfloat{50%{transform:translateY(-14px)}}
@keyframes xpulse{50%{opacity:.25}}
@keyframes xmarquee{to{transform:translateX(-50%)}}
@media(max-width:820px){
  .x-hero__grid{grid-template-columns:1fr}.x-orb{max-width:300px;order:-1;margin-bottom:6px}
  .x-games{grid-template-columns:1fr}.x-lab{grid-template-columns:1fr}
  .x-stats{grid-template-columns:1fr 1fr}.x-links{gap:14px}.x-links a:nth-child(2){display:none}
}
/* 非首页：把 starter 的浅色组件压成同一套暗色霓虹 */
body:not(.x-body){background:var(--x-bg);color:var(--x-ink)}
body:not(.x-body) .nav{background:rgba(5,6,7,.8);border-bottom:1px solid var(--x-line);backdrop-filter:blur(14px)}
body:not(.x-body) .nav a,body:not(.x-body) .brand{color:var(--x-ink)}
body:not(.x-body) .nav a[aria-current="page"]{color:var(--x-acid)}
body:not(.x-body) .brand__dot{background:var(--x-acid);box-shadow:0 0 16px var(--x-acid)}
body:not(.x-body) h1,body:not(.x-body) h2,body:not(.x-body) h3,body:not(.x-body) h4{font-family:var(--x-display);letter-spacing:-.04em;text-transform:uppercase}
body:not(.x-body) .eyebrow{font-family:var(--x-mono);color:var(--x-pink);letter-spacing:.14em;text-transform:uppercase}
body:not(.x-body) .lede,body:not(.x-body) p{color:#c7cec1}
body:not(.x-body) .card{background:linear-gradient(160deg,var(--x-panel),#070908);border:1px solid var(--x-line);color:var(--x-ink)}
body:not(.x-body) .card:hover{border-color:var(--x-acid)}
body:not(.x-body) .btn{border:1px solid var(--x-line);color:var(--x-ink);background:transparent}
body:not(.x-body) .btn--solid{background:var(--x-acid);color:#070a05}
body:not(.x-body) .wrap{width:min(1000px,calc(100% - 40px))}
body:not(.x-body) .footer{border-top:1px solid var(--x-line);color:var(--x-dim)}
body:not(.x-body) .faint,body:not(.x-body) .muted{color:var(--x-dim)}
body:not(.x-body) a{color:var(--x-acid)}


# xgame upgrade additions
.x-cover{display:block;width:calc(100% + 40px);height:168px;object-fit:cover;margin:-20px -20px 16px;filter:saturate(1.05) contrast(1.05)}
.x-links-list div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--x-line)}
.x-links-list div small{font-family:var(--x-mono);font-size:10px;color:var(--x-acid);letter-spacing:.1em}

.x-shotwall{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:36px 0 0;border-block:1px solid var(--x-line)}
.x-shotwall img{width:100%;height:230px;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.x-pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--x-line);border:1px solid var(--x-line)}
.x-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:36px 0 10px}
.x-gallery img{width:100%;height:230px;object-fit:cover;border:1px solid var(--x-line)}
.x-pipe div{background:var(--x-bg);padding:22px 18px;min-height:150px}
.x-pipe b{font-family:var(--x-mono);font-size:28px;color:var(--x-acid);display:block;margin-bottom:18px}
.x-pipe span{display:block;font-weight:800;font-size:16px;margin-bottom:6px}
.x-pipe small{color:var(--x-dim);font-size:12px;line-height:1.6}
@media(max-width:760px){.x-shotwall{grid-template-columns:1fr}.x-shotwall img{height:190px}.x-pipe{grid-template-columns:1fr 1fr}}
.x-service-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:46px 0;padding:26px 24px;border:1px solid var(--x-line);background:linear-gradient(120deg,#0b0f0a,#0a0d0b 55%,rgba(200,255,46,.08))}
.x-service-cta h2{margin:8px 0 6px;font-size:clamp(22px,3vw,34px)}
.x-service-cta p{margin:0;color:var(--x-dim);font-size:14px}
@media(max-width:640px){.x-service-cta{padding:18px}.x-service-cta .x-btn{width:100%;text-align:center}}

.x-service-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:38px 0 10px;padding:20px;border:1px solid var(--x-line);background:linear-gradient(120deg,#0b0f0a,rgba(200,255,46,.06))}
.x-service-strip h3{margin:6px 0 4px;font-size:20px}
.x-service-strip p{margin:0;color:var(--x-dim);font-size:13px}
@media(max-width:640px){.x-service-strip{padding:16px}.x-service-strip .x-btn{width:100%;text-align:center}}

.x-cases{margin-top:46px}
.x-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--x-line);border:1px solid var(--x-line)}
.x-case{display:block;background:#080a09;text-decoration:none;color:inherit;transition:background .25s}
.x-case:hover{background:#0d110b}
.x-case img{display:block;width:100%;height:170px;object-fit:cover}
.x-case div{padding:16px}
.x-case span{font:10px/1.4 var(--x-mono,monospace);color:var(--x-acid);letter-spacing:.12em}
.x-case h3{margin:8px 0 6px;font-size:17px}
.x-case p{margin:0;color:var(--x-dim);font-size:12px;line-height:1.7}
.x-quote{margin-top:30px;border:1px solid var(--x-line);padding:24px;background:#080a09}
.x-quote h3{margin:0 0 12px;font-size:20px}
.x-quote ol{margin:0 0 18px;padding-left:20px;color:var(--x-dim);font-size:14px;line-height:1.9}
@media(max-width:760px){.x-case-grid{grid-template-columns:1fr}.x-case img{height:200px}}