/* ============================================================
   incheesylink.top — HUD / Neon Interface
   零依赖 · 纯静态 · 全平台自适应
   ============================================================ */

/* ---------- 1. 变量与基础 ---------- */
:root{
  --bg:#04060c;
  --bg-soft:#080e1a;

  --cyan:#00e5ff;
  --accent-rgb:0,229,255;
  --cyan-dim:#0aa8c4;
  --violet:#8b5cf6;
  --magenta:#ff2fd0;
  --mint:#00ffa3;

  --text:#dce8ff;
  --text-2:#9fb2d0;
  --muted:#6b7d99;
  --line:rgba(120,180,255,.14);
  --line-strong:rgba(var(--accent-rgb),.34);
  --glass:rgba(11,19,34,.55);
  --glass-2:rgba(9,15,28,.78);

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --radius:14px;
  --shell:min(1180px,92vw);
  --topbar-h:60px;
  --status-h:34px;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:dark;
}

/* ---------- 1.5 配色方案 ----------
   只换主色（--cyan / --accent-rgb），紫色与品红作为副色保留下来，
   所以四套配色共用同一套排版，不会各长各样。 */
html[data-accent="violet"]{
  --cyan:#a78bfa;
  --cyan-dim:#7c5cf0;
  --accent-rgb:167,139,250;
  --line-strong:rgba(167,139,250,.34);
}
html[data-accent="magenta"]{
  --cyan:#ff5ce0;
  --cyan-dim:#c93aae;
  --accent-rgb:255,92,224;
  --line-strong:rgba(255,92,224,.34);
}
html[data-accent="mint"]{
  --cyan:#2effb0;
  --cyan-dim:#12b981;
  --accent-rgb:46,255,176;
  --line-strong:rgba(46,255,176,.34);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar-h) + 18px);
}

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-loading{overflow:hidden}

h1,h2,h3,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
b,strong{font-weight:650}
em{font-style:normal}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

::selection{background:rgba(var(--accent-rgb),.28);color:#fff}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* 滚动条 */
*{scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),.3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#04060c}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.5),rgba(139,92,246,.5));
  border-radius:99px;
  border:3px solid #04060c;
}

/* ---------- 2. 背景层 ---------- */
#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
}

.grid-overlay{
  position:fixed;
  inset:-2px;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--accent-rgb),.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--accent-rgb),.06) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(ellipse 95% 62% at 50% 4%,#000 12%,transparent 78%);
  mask-image:radial-gradient(ellipse 95% 62% at 50% 4%,#000 12%,transparent 78%);
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{
  from{background-position:0 0,0 0}
  to{background-position:62px 62px,62px 62px}
}

.glow{
  position:fixed;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  opacity:.55;
  /* 关键：不用 filter:blur()。
     大半径模糊每一帧都要对整层重新采样，是手机 GPU 最贵的几毫秒之一；
     多层径向渐变画出来和"被模糊的圆"肉眼不可分，却几乎零成本。 */
}
.glow-a{
  width:min(780px,98vw);
  aspect-ratio:1;
  top:-30vh;left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,
    rgba(var(--accent-rgb),.32) 0%,
    rgba(var(--accent-rgb),.20) 16%,
    rgba(var(--accent-rgb),.11) 34%,
    rgba(var(--accent-rgb),.05) 52%,
    rgba(var(--accent-rgb),.015) 66%,
    transparent 78%);
  animation:breathe 11s var(--ease) infinite alternate;
}
.glow-b{
  width:min(640px,90vw);
  aspect-ratio:1;
  bottom:-28vh;right:-16vw;
  background:radial-gradient(circle,
    rgba(139,92,246,.34) 0%,
    rgba(139,92,246,.2) 16%,
    rgba(139,92,246,.1) 34%,
    rgba(139,92,246,.04) 52%,
    transparent 72%);
  animation:breathe 14s var(--ease) infinite alternate-reverse;
}
@keyframes breathe{
  from{opacity:.34;transform:translateX(-50%) scale(.92)}
  to{opacity:.62;transform:translateX(-50%) scale(1.06)}
}
.glow-b{animation-name:breatheB}
@keyframes breatheB{
  from{opacity:.3;transform:scale(.9)}
  to{opacity:.58;transform:scale(1.08)}
}

.noise{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 30%,transparent 42%,rgba(2,4,10,.72) 100%),
    linear-gradient(180deg,rgba(4,6,12,.7),transparent 18%,transparent 82%,rgba(4,6,12,.85));
}

.cursor-glow{
  position:fixed;
  z-index:3;
  top:0;left:0;
  width:340px;height:340px;
  margin:-170px 0 0 -170px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05) 40%,transparent 70%);
  transition:opacity .4s ease;
  will-change:transform;
}
.cursor-glow.on{opacity:1}

.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:60;
  background:rgba(255,255,255,.05);
}
.scroll-progress i{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));
  box-shadow:0 0 12px rgba(var(--accent-rgb),.8);
  transition:transform .1s linear;
}

/* 全屏 HUD 取景框 */
.hud-frame{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.hud-frame i{
  position:absolute;
  width:26px;
  height:26px;
  border:1px solid rgba(var(--accent-rgb),.32);
  opacity:.8;
}
.hud-frame i:nth-child(1){top:calc(var(--topbar-h) + 16px);left:16px;border-right:0;border-bottom:0}
.hud-frame i:nth-child(2){top:calc(var(--topbar-h) + 16px);right:16px;border-left:0;border-bottom:0}
.hud-frame i:nth-child(3){bottom:calc(var(--status-h) + 16px + env(safe-area-inset-bottom));left:16px;border-right:0;border-top:0}
.hud-frame i:nth-child(4){bottom:calc(var(--status-h) + 16px + env(safe-area-inset-bottom));right:16px;border-left:0;border-top:0}

/* ---------- 3. 启动自检层 ---------- */
#boot{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(var(--accent-rgb),.08),transparent 60%),
    var(--bg);
  transition:opacity .6s ease,visibility .6s ease;
}
#boot.done{opacity:0;visibility:hidden}

.boot-inner{
  width:min(420px,88vw);
  text-align:center;
}
.boot-mark{
  position:relative;
  width:74px;height:74px;
  margin:0 auto 22px;
}
.boot-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.25);
  border-top-color:var(--cyan);
  animation:spin 1.1s linear infinite;
  box-shadow:0 0 22px rgba(var(--accent-rgb),.35),inset 0 0 22px rgba(var(--accent-rgb),.1);
}
.boot-core{
  position:absolute;
  inset:26px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 24px 4px rgba(var(--accent-rgb),.7);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.45;transform:scale(.82)}}

.boot-title{
  font-family:var(--mono);
  font-size:1rem;
  letter-spacing:.22em;
  text-transform:lowercase;
  color:var(--text-2);
  margin-bottom:20px;
}
.boot-title em{color:var(--cyan)}

.boot-bar{
  height:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border-radius:2px;
}
.boot-bar i{
  display:block;
  height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.9);
}
.boot-row{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--muted);
}
.boot-row b{color:var(--cyan)}
.boot-log{
  margin:18px 0 0;
  min-height:96px;
  text-align:left;
  font-family:var(--mono);
  font-size:.68rem;
  line-height:1.9;
  color:var(--muted);
  white-space:pre-wrap;
  word-break:break-word;
}
.boot-log .ok{color:var(--mint)}
.boot-log .live{color:var(--cyan)}

/* ---------- 4. 顶栏 ---------- */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 clamp(14px,4vw,34px);
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.topbar.scrolled{
  background:rgba(4,6,12,.72);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--text);
  margin-right:auto;
  transition:color .25s ease;
}
.brand:hover{color:var(--cyan)}
.brand-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 10px var(--mint);
  animation:blinkDot 2.4s ease-in-out infinite;
}
@keyframes blinkDot{50%{opacity:.25;box-shadow:0 0 3px var(--mint)}}
.brand-text em{color:var(--cyan)}

.nav{
  display:flex;
  gap:4px;
}
.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  border-radius:9px;
  font-size:.85rem;
  color:var(--text-2);
  transition:color .25s ease,background .25s ease;
}
.nav a i{
  font-family:var(--mono);
  font-size:.62rem;
  font-style:normal;
  color:var(--cyan-dim);
}
.nav a:hover{color:#fff;background:rgba(var(--accent-rgb),.07)}
.nav a::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:3px;
  height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after{transform:scaleX(1)}

.topbar-meta{display:flex;align-items:center;gap:10px}
.pill{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--text-2);
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:99px;
  background:rgba(255,255,255,.02);
  font-variant-numeric:tabular-nums;
}

.menu-btn{
  display:none;
  width:40px;height:36px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  padding:0;
  place-items:center;
  gap:5px;
  flex-direction:column;
}
.menu-btn i{
  display:block;
  width:16px;height:1.5px;
  background:var(--text-2);
  transition:transform .3s var(--ease),opacity .3s ease,background .3s ease;
}

/* ---------- 5. 首屏 ---------- */
.hero{
  position:relative;
  z-index:4;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:calc(var(--topbar-h) + 46px) 20px 96px;
  overflow:hidden;
}

.reactor{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  transform:translate(-50%,-50%) scale(var(--rx,1));
  pointer-events:none;
  z-index:0;
  opacity:.85;
}
.ring{
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.24);
  box-shadow:inset 0 0 34px rgba(var(--accent-rgb),.07);
  transform-origin:center;
}
.ring::after{
  content:"";
  position:absolute;
  top:-3px;left:50%;
  width:6px;height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px 2px rgba(var(--accent-rgb),.85);
}
.r1{width:430px;height:430px;margin:-215px 0 0 -215px;animation:spin 26s linear infinite}
.r2{width:590px;height:590px;margin:-295px 0 0 -295px;border-style:dashed;border-color:rgba(139,92,246,.26);box-shadow:inset 0 0 34px rgba(139,92,246,.08);animation:spin 44s linear infinite reverse}
.r2::after{background:var(--violet);box-shadow:0 0 12px 2px rgba(139,92,246,.85)}
.r3{width:770px;height:770px;margin:-385px 0 0 -385px;border-color:rgba(var(--accent-rgb),.13);animation:spin 70s linear infinite}
.r3::after{background:var(--mint);box-shadow:0 0 10px 2px rgba(0,255,163,.7)}

.core{
  position:absolute;
  top:50%;left:50%;
  width:210px;height:210px;
  margin:-105px 0 0 -105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.2),rgba(139,92,246,.08) 45%,transparent 70%);
  filter:blur(14px);
  animation:pulseCore 5.5s ease-in-out infinite;
}
@keyframes pulseCore{50%{transform:scale(1.14);opacity:.7}}

.scan{
  position:absolute;
  top:50%;left:50%;
  width:640px;height:640px;
  margin:-320px 0 0 -320px;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(var(--accent-rgb),.16) 40deg,transparent 90deg);
  -webkit-mask-image:radial-gradient(circle,transparent 34%,#000 36%,#000 70%,transparent 72%);
  mask-image:radial-gradient(circle,transparent 34%,#000 36%,#000 70%,transparent 72%);
  animation:spin 9s linear infinite;
}

.hero-inner{
  position:relative;
  z-index:2;
  width:var(--shell);
  max-width:900px;
  text-align:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cyan);
  padding:7px 15px;
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:99px;
  background:rgba(var(--accent-rgb),.04);
  margin-bottom:26px;
}
.blink{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 9px var(--mint);
  animation:blinkDot 1.6s ease-in-out infinite;
}

.hero-title{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18em;
  line-height:1;
  font-weight:800;
  margin-bottom:22px;
}
.t-main{
  position:relative;
  font-size:clamp(3.1rem,13vw,9rem);
  letter-spacing:.06em;
  margin-right:-.06em;
  background:linear-gradient(175deg,#ffffff 6%,#d6e6ff 44%,#8fa8cf 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 70px rgba(var(--accent-rgb),.18);
}
/* 高光扫过 */
.t-main::after{
  content:"芝士链";
  position:absolute;
  inset:0;
  color:transparent;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);
  -webkit-background-clip:text;
  background-clip:text;
  background-size:280% 100%;
  animation:sheen 6.5s var(--ease) infinite;
  pointer-events:none;
}
.t-sub{
  font-family:var(--mono);
  font-size:clamp(.66rem,2.2vw,1.02rem);
  font-weight:500;
  letter-spacing:.46em;
  margin-right:-.46em;
  background:linear-gradient(100deg,var(--cyan),var(--violet) 58%,var(--magenta));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 34px rgba(var(--accent-rgb),.35);
}
@keyframes sheen{
  0%,62%{background-position:180% 0}
  92%,100%{background-position:-80% 0}
}

.lede{
  max-width:34em;
  margin:0 auto 32px;
  font-size:clamp(.95rem,2.6vw,1.06rem);
  color:var(--text-2);
  line-height:1.85;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:13px;
  margin-bottom:34px;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 26px;
  border-radius:11px;
  font-size:.92rem;
  font-weight:550;
  letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform .28s var(--ease),box-shadow .28s ease,background .28s ease,color .28s ease,border-color .28s ease;
  cursor:pointer;
  overflow:hidden;
}
.btn b{font-weight:400;transition:transform .3s var(--ease)}
.btn:hover b{transform:translateX(4px)}

.btn-primary{
  color:#02121a;
  background:linear-gradient(120deg,var(--cyan),#63d6ff 40%,var(--violet));
  box-shadow:0 10px 34px -12px rgba(var(--accent-rgb),.85),inset 0 0 0 1px rgba(255,255,255,.25);
  font-weight:650;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px -12px rgba(var(--accent-rgb),.95),inset 0 0 0 1px rgba(255,255,255,.4);
}
.btn-ghost{
  color:var(--text);
  border-color:var(--line-strong);
  background:rgba(var(--accent-rgb),.05);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  background:rgba(var(--accent-rgb),.12);
  border-color:var(--cyan);
  box-shadow:0 14px 34px -16px rgba(var(--accent-rgb),.8);
}
.btn:active{transform:translateY(0) scale(.98)}

.type-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  min-height:1.6em;
  max-width:100%;
}
.type-line .prompt{color:var(--cyan)}
#typeText{color:var(--text-2);word-break:break-word}
.caret{
  display:inline-block;
  width:8px;height:1.05em;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  animation:caretBlink 1.05s steps(1) infinite;
  vertical-align:-.16em;
}
@keyframes caretBlink{50%{opacity:0}}

.scroll-hint{
  position:absolute;
  bottom:calc(var(--status-h) + 22px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.32em;
  color:var(--muted);
}
.scroll-hint span{
  width:1px;height:40px;
  background:linear-gradient(180deg,transparent,var(--cyan));
  position:relative;
  overflow:hidden;
}
.scroll-hint span::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:12px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:scrollDot 2.1s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(-14px);opacity:0}
  40%{opacity:1}
  100%{transform:translateY(40px);opacity:0}
}

/* ---------- 6. 数据条 ---------- */
.stats{
  position:relative;
  z-index:4;
  width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(11,19,34,.7),rgba(8,13,25,.4));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.stat{
  padding:26px 18px;
  text-align:center;
  position:relative;
}
.stat + .stat::before{
  content:"";
  position:absolute;
  left:0;top:22%;bottom:22%;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--line-strong),transparent);
}
.stat b{
  display:block;
  font-family:var(--mono);
  font-size:clamp(1.5rem,4.6vw,2.1rem);
  font-weight:600;
  color:#fff;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(var(--accent-rgb),.35);
}
.stat b i{
  font-style:normal;
  font-size:.55em;
  color:var(--cyan);
  margin-left:2px;
}
.stat > span{
  display:block;
  margin-top:6px;
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--muted);
}

/* ---------- 7. 通用区块 ---------- */
.section{
  position:relative;
  z-index:4;
  width:var(--shell);
  margin:0 auto;
  padding:clamp(72px,11vw,132px) 0 0;
}

.section-head{max-width:640px;margin-bottom:46px}
.kicker{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.3em;
  color:var(--cyan);
  margin-bottom:14px;
}
.section-head h2{
  font-size:clamp(1.5rem,4.4vw,2.4rem);
  font-weight:750;
  letter-spacing:-.02em;
  line-height:1.25;
  color:#fff;
}
.section-sub{
  margin-top:12px;
  color:var(--text-2);
  font-size:clamp(.9rem,2.5vw,1rem);
}

/* ---------- 8. 模块卡片 ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
}

.card{
  position:relative;
  padding:26px 24px 30px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.12),transparent 62%),
    linear-gradient(180deg,rgba(12,20,36,.72),rgba(7,12,22,.5));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  overflow:hidden;
  transition:border-color .35s ease,transform .35s var(--ease),box-shadow .35s ease;
  transform-style:preserve-3d;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.5),transparent 40%,transparent 62%,rgba(139,92,246,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 26px 60px -30px rgba(var(--accent-rgb),.75);
}
.card:hover::before{opacity:1}

.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.card-idx{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--cyan-dim);
}
.card-top svg{
  width:26px;height:26px;
  color:var(--cyan);
  opacity:.85;
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.5));
}
.card h3{
  font-size:1.1rem;
  font-weight:650;
  color:#fff;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
.card p{
  font-size:.88rem;
  color:var(--text-2);
  line-height:1.8;
  min-height:3.3em;
}
.card-bar{
  margin-top:22px;
  height:2px;
  background:rgba(255,255,255,.07);
  border-radius:2px;
  overflow:hidden;
}
.card-bar i{
  display:block;
  height:100%;
  width:34%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:barSlide 3.6s var(--ease) infinite;
}
.card:nth-child(2) .card-bar i{animation-delay:.5s}
.card:nth-child(3) .card-bar i{animation-delay:1s}
.card:nth-child(4) .card-bar i{animation-delay:1.5s}
@keyframes barSlide{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}

/* ---------- 9. 终端与读数 ---------- */
.console-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}

.term{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(8,14,26,.92),rgba(6,10,20,.8));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.term-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 15px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.dots{display:flex;gap:6px}
.dots i{
  width:9px;height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
}
.dots i:first-child{background:rgba(255,95,86,.75)}
.dots i:nth-child(2){background:rgba(255,189,46,.75)}
.dots i:nth-child(3){background:rgba(39,201,63,.75)}
.term-title{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.06em;
}
.term-body{
  flex:1 1 auto;
  padding:18px 18px 24px;
  font-family:var(--mono);
  font-size:.79rem;
  line-height:2.05;
  color:var(--text-2);
  overflow-x:auto;
}
.term-body p{white-space:pre-wrap;word-break:break-word}
.term-body .t-dim{color:var(--cyan);margin-right:8px}
.term-body .t-out{color:var(--mint);padding-left:20px}
.term-body .t-out b{color:#fff}
.term-body .t-sep{color:var(--muted)}
.term-body .caret{width:7px}

.readout{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(12,20,36,.7),rgba(7,12,22,.5));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.readout li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  font-family:var(--mono);
  font-size:.76rem;
  border-bottom:1px solid rgba(120,180,255,.07);
}
.readout li:last-child{border-bottom:0}
.readout li > span{color:var(--muted);letter-spacing:.1em;flex:none}
.readout li > b{
  color:var(--cyan);
  font-weight:500;
  text-align:right;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- 9.5 接口卡片 ---------- */
.api-card{
  padding:28px 26px 30px;
  background:
    radial-gradient(520px circle at 8% 0%,rgba(0,255,163,.09),transparent 60%),
    linear-gradient(180deg,rgba(12,20,36,.72),rgba(7,12,22,.5));
}
.api-card p{min-height:0}

.api-head{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.api-method{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  color:#02121a;
  background:linear-gradient(120deg,var(--mint),var(--cyan));
  padding:5px 12px;
  border-radius:7px;
  box-shadow:0 6px 20px -8px rgba(0,255,163,.9);
}
.api-path{
  font-family:var(--mono);
  font-size:clamp(.72rem,2.2vw,.86rem);
  color:var(--cyan);
  word-break:break-all;
  letter-spacing:.01em;
}
.api-desc{
  max-width:62em;
  font-size:.9rem;
  line-height:1.85;
  color:var(--text-2);
  margin-bottom:20px;
}
.api-sample{
  margin:0;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(3,7,14,.8);
  font-family:var(--mono);
  font-size:.74rem;
  line-height:1.9;
  color:var(--mint);
  white-space:pre;
  overflow:auto;
  max-height:360px;
  overscroll-behavior:contain;
}
.api-foot{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.btn-sm{padding:9px 18px;font-size:.82rem;border-radius:9px}

#apiState.ok{color:var(--mint);border-color:rgba(0,255,163,.42);background:rgba(0,255,163,.06)}
#apiState.err{color:#ff9d9d;border-color:rgba(255,120,120,.42);background:rgba(255,120,120,.06)}
#apiState.busy{color:var(--cyan);border-color:var(--line-strong)}

/* ---------- 10. 关于 ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}
.about-text{
  max-width:52em;
  font-size:clamp(.95rem,2.6vw,1.08rem);
  line-height:2;
  color:var(--text-2);
}
.about-text b{color:#fff}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:flex-start;
}
.tags span{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--text-2);
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:99px;
  background:rgba(255,255,255,.02);
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s var(--ease);
}
.tags span:hover{
  color:var(--cyan);
  border-color:var(--line-strong);
  background:rgba(var(--accent-rgb),.07);
  transform:translateY(-2px);
}

/* ---------- 11. 页脚 ---------- */
.footer{
  position:relative;
  z-index:4;
  margin-top:clamp(84px,13vw,150px);
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
.footer-line{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),rgba(139,92,246,.4),transparent);
}
.footer-inner{
  width:var(--shell);
  margin:0 auto;
  padding-top:34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer-brand{
  font-family:var(--mono);
  font-size:.9rem;
  letter-spacing:.05em;
  color:var(--text);
}
.footer-brand em{color:var(--cyan)}
.footer-note{
  font-size:.76rem;
  color:var(--muted);
}

/* ---------- 12. 底部状态栏 ---------- */
.statusbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:45;
  display:flex;
  align-items:center;
  gap:clamp(10px,2.6vw,26px);
  height:34px;
  padding:0 clamp(12px,4vw,30px);
  padding-bottom:env(safe-area-inset-bottom);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--muted);
  background:linear-gradient(180deg,rgba(4,6,12,.4),rgba(4,6,12,.92));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(120,180,255,.08);
}
.sb-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sb-item b{color:var(--cyan);font-weight:500;font-variant-numeric:tabular-nums}
.sb-led{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint);
  animation:blinkDot 2.4s ease-in-out infinite;
}
.sb-spacer{flex:1}

/* ---------- 13. 进场动画 ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:none}

/* ---------- 14. 响应式 ---------- */
@media (max-width:1024px){
  .console-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .reactor{--rx:.78}
}

@media (max-width:760px){
  :root{--topbar-h:56px}

  .menu-btn{display:flex;align-items:center;justify-content:center}

  .nav{
    position:fixed;
    inset:0;
    z-index:-1;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    background:rgba(4,6,12,.93);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease;
  }
  body.nav-open .nav{z-index:49;opacity:1;visibility:visible}
  .nav a{
    font-size:1.35rem;
    padding:14px 22px;
    color:var(--text);
  }
  .nav a i{font-size:.75rem}
  body.nav-open .menu-btn i:first-child{transform:translateY(3.25px) rotate(45deg);background:var(--cyan)}
  body.nav-open .menu-btn i:last-child{transform:translateY(-3.25px) rotate(-45deg);background:var(--cyan)}

  .pill-clock{display:none}

  .hero{padding-top:calc(var(--topbar-h) + 34px);padding-bottom:110px}
  .reactor{--rx:.5;opacity:.6}
  .r3{display:none}
  .t-main{font-size:clamp(2.8rem,16vw,4.4rem)}
  .t-sub{font-size:clamp(.62rem,2.9vw,.82rem);letter-spacing:.36em;margin-right:-.36em}
  .lede{margin-bottom:26px}
  .btn{flex:1 1 auto;justify-content:center;min-width:140px}

  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:20px 14px}
  .stat:nth-child(3)::before,
  .stat:nth-child(odd)::before{display:none}
  .stat:nth-child(even)::before{display:block}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .stat:nth-child(3),
  .stat:nth-child(4){border-top-color:var(--line)}

  .section-head{margin-bottom:32px}
  .cards{grid-template-columns:1fr}
  .card p{min-height:0}
  .footer-inner{flex-direction:column;align-items:flex-start}

  .hud-frame i{width:17px;height:17px;opacity:.55}
  .hud-frame i:nth-child(1),.hud-frame i:nth-child(2){top:calc(var(--topbar-h) + 10px)}
  .hud-frame i:nth-child(1),.hud-frame i:nth-child(3){left:11px}
  .hud-frame i:nth-child(2),.hud-frame i:nth-child(4){right:11px}

  .statusbar{gap:14px}
  .sb-hide{display:none}

  /* 移动端去掉毛玻璃，改用不透明底色，省电也更顺滑 */
  .card,.stats,.readout,.term{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background-color:rgba(9,15,28,.82);
  }
}

@media (max-width:400px){
  .t-main{font-size:clamp(2.6rem,16.5vw,3.4rem)}
  .btn{padding:12px 18px;font-size:.86rem}
}

/* 横屏手机：压扁首屏 */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--topbar-h) + 40px);padding-bottom:60px}
  .reactor{display:none}
  .scroll-hint{display:none}
}

/* 触屏设备去掉悬停位移，避免"粘住"效果 */
@media (hover:none){
  .card:hover{transform:none}
  .btn:hover{transform:none}
  .tags span:hover{transform:none}
}

/* ---------- 15. 无障碍：减少动态 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .scroll-hint{display:none}
  .caret{opacity:1}
}

/* ============================================================
   16. 新增：配色开关 / 读数释义 / 可交互终端 / 延迟图 / 测速
   ============================================================ */

/* ---------- 16.1 配色开关 ---------- */
.theme-switch{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:99px;
  background:rgba(255,255,255,.02);
}
.theme-switch button{
  position:relative;
  width:13px;height:13px;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background:currentColor;
  opacity:.45;
  transition:opacity .25s ease,transform .25s var(--ease),box-shadow .25s ease;
}
.theme-switch button::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid transparent;
  transition:border-color .25s ease;
}
.theme-switch button[data-theme="cyan"]{color:#00e5ff}
.theme-switch button[data-theme="violet"]{color:#a78bfa}
.theme-switch button[data-theme="magenta"]{color:#ff5ce0}
.theme-switch button[data-theme="mint"]{color:#2effb0}
.theme-switch button:hover{opacity:.9;transform:scale(1.18)}
.theme-switch button[aria-pressed="true"]{
  opacity:1;
  box-shadow:0 0 9px currentColor;
}
.theme-switch button[aria-pressed="true"]::after{border-color:currentColor}

/* ---------- 16.2 读数释义 ---------- */
.readout li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:3px 14px;
  padding:13px 18px;
}
.readout li > span{grid-column:1;flex:none}
.readout li > b{grid-column:2}
.readout li > em{
  grid-column:1 / -1;
  font-style:normal;
  font-size:.7rem;
  line-height:1.75;
  color:var(--muted);
  letter-spacing:0;
  text-align:left;
  max-width:46em;
}

/* ---------- 16.3 可交互终端 ---------- */
.term-body{
  overflow:auto;
  overscroll-behavior:contain;
  max-height:min(72vh,640px);
}
.term-badge{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.18em;
  color:var(--cyan);
  border:1px solid var(--line-strong);
  border-radius:99px;
  padding:3px 9px;
  background:rgba(var(--accent-rgb),.07);
}
.term-line{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:2px;
}
.term-line .t-dim{margin-right:0;flex:none}
.term-cmd{
  flex:0 1 auto;
  width:auto;
  min-width:4.5ch;
  max-width:100%;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  font-family:var(--mono);
  font-size:.79rem;
  line-height:2.05;
  color:#fff;
  caret-color:var(--cyan);
}
.term-cmd::placeholder{color:rgba(120,140,175,.5)}
.term-line .caret{width:7px;flex:none}
.term-line:focus-within .caret{display:none}
.term-body .t-err{color:#ff9d9d}
.term-body .t-ok{color:var(--cyan)}
.term-body .t-hint{color:var(--muted)}
.term-body .t-out.is-tight{padding-left:20px}
.term-body .t-bar{
  display:block;
  height:6px;
  margin:4px 0 4px 20px;
  border-radius:3px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  max-width:280px;
}
.term-body .t-bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}

/* ---------- 16.4 延迟脉冲图 ---------- */
.latency{
  margin-top:18px;
  padding:18px 20px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(12,20,36,.7),rgba(7,12,22,.5));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.lat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.lat-title{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  color:var(--text-2);
}
.lat-meta{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--muted);
}
.lat-meta b{color:var(--cyan);font-weight:500;font-variant-numeric:tabular-nums}
.lat-meta i{font-style:normal;margin:0 6px;opacity:.45}
.lat-canvas-wrap{position:relative;height:112px}
#latCanvas{display:block;width:100%;height:112px}
.lat-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.lat-hint{font-size:.72rem;color:var(--muted)}

/* ---------- 16.5 测速与端点 ---------- */
.tool-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.tool{
  padding:24px 22px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(12,20,36,.7),rgba(7,12,22,.5));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.tool-kicker{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.26em;
  color:var(--cyan);
  margin-bottom:11px;
}
.tool h3{font-size:1.02rem;font-weight:650;color:#fff;margin-bottom:9px}
.tool-desc{font-size:.85rem;line-height:1.8;color:var(--text-2);max-width:40em}

.speed-read{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:18px 0 10px;
  font-family:var(--mono);
}
.speed-read b{
  font-size:clamp(1.7rem,5vw,2.3rem);
  font-weight:600;
  color:#fff;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(var(--accent-rgb),.45);
}
.speed-read i{font-style:normal;font-size:.76rem;letter-spacing:.14em;color:var(--cyan)}
.speed-bar{
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.speed-bar i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.8);
  transition:width .25s var(--ease);
}
.tool-foot{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.ep-list{display:flex;flex-direction:column;margin-top:14px}
.ep-list li{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 0;
  border-bottom:1px solid rgba(120,180,255,.07);
}
.ep-list li:last-child{border-bottom:0}
.ep-list code{
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--cyan);
  word-break:break-all;
}
.ep-list em{font-style:normal;font-size:.72rem;color:var(--muted)}
.tool-note{margin-top:12px;font-size:.74rem;color:var(--muted)}

.ic{
  font-family:var(--mono);
  font-size:.9em;
  color:var(--cyan);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 6px;
  white-space:nowrap;
}

#speedState.ok{color:var(--mint);border-color:rgba(0,255,163,.42);background:rgba(0,255,163,.06)}
#speedState.err{color:#ff9d9d;border-color:rgba(255,120,120,.42);background:rgba(255,120,120,.06)}
#speedState.busy{color:var(--cyan);border-color:var(--line-strong)}

/* ---------- 16.6 新组件的响应式 ---------- */
@media (max-width:1024px){
  .tool-grid{grid-template-columns:1fr}
}

@media (max-width:760px){
  .theme-switch{gap:4px;padding:4px 6px}
  .theme-switch button{width:12px;height:12px}
  .pill-clock{display:none}

  .term-body{max-height:58vh;font-size:.75rem}
  .term-line{gap:7px}

  .readout li{padding:12px 15px}
  .readout li > em{font-size:.67rem}

  .latency,.tool{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background-color:rgba(9,15,28,.82);
  }
  .latency{padding:16px 15px 14px}
  .lat-canvas-wrap,#latCanvas{height:88px}
  .tool{padding:20px 17px 18px}
  .lat-foot,.tool-foot{gap:10px}
}

/* ============================================================
   17. 性能档位
   ------------------------------------------------------------
   html[data-perf] 由 JS 打在 <html> 上。思路很直接：
   把最烧 GPU 的三类东西按档位逐级关掉 ——
     1. 大面积的 filter:blur()，尤其是还在做动画的
     2. 全屏 mix-blend-mode（每帧都要重新合成一遍）
     3. 无限循环动画（哪怕只有 1px 的变化也要走一次合成）
   手机 SoC 的功耗墙基本就卡在这三样上。
   ============================================================ */

/* ---------- 17.1 mid：先砍掉最贵的两样 ---------- */
html[data-perf="mid"] .glow{
  animation:none;
  opacity:.45;
}
html[data-perf="mid"] .grid-overlay{animation:none}
html[data-perf="mid"] .noise{
  mix-blend-mode:normal;
  opacity:.035;
}
html[data-perf="mid"] .scan{animation-duration:20s}
html[data-perf="mid"] .r3{display:none}

/* ---------- 17.2 low：只留最基本的氛围 ---------- */
html[data-perf="low"] .glow{
  animation:none;
  opacity:.5;
}
html[data-perf="low"] .noise{display:none}
html[data-perf="low"] .grid-overlay{animation:none}
html[data-perf="low"] .scan{display:none}
html[data-perf="low"] .r2,
html[data-perf="low"] .r3{display:none}
html[data-perf="low"] .core{animation:none;filter:blur(8px)}
html[data-perf="low"] .t-main::after{display:none}
html[data-perf="low"] .card-bar i{animation:none;width:100%;opacity:.22}
html[data-perf="low"] .cursor-glow{display:none}
html[data-perf="low"] .brand-dot,
html[data-perf="low"] .blink,
html[data-perf="low"] .sb-led{animation:none}
html[data-perf="low"] .scroll-hint span::after{animation:none}
html[data-perf="low"] .stat b{text-shadow:none}
html[data-perf="low"] .card-top svg{filter:none}
html[data-perf="low"] .term,
html[data-perf="low"] .card,
html[data-perf="low"] .stats,
html[data-perf="low"] .readout,
html[data-perf="low"] .latency,
html[data-perf="low"] .tool,
html[data-perf="low"] .topbar.scrolled,
html[data-perf="low"] .statusbar{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-perf="low"] .topbar.scrolled,
html[data-perf="low"] .statusbar{background:rgba(4,6,12,.94)}

/* ---------- 17.3 static：完全静止 ---------- */
html[data-perf="static"] .glow,
html[data-perf="static"] .noise,
html[data-perf="static"] .scroll-hint,
html[data-perf="static"] .cursor-glow,
html[data-perf="static"] .type-line,
html[data-perf="static"] .scan{display:none}
html[data-perf="static"] .grid-overlay{animation:none}
html[data-perf="static"] .reactor{opacity:.5}
html[data-perf="static"] .ring,
html[data-perf="static"] .core{animation:none}
html[data-perf="static"] .r2,
html[data-perf="static"] .r3{display:none}
html[data-perf="static"] .t-main::after{display:none}
html[data-perf="static"] .card-bar i{animation:none;width:100%;opacity:.22}
html[data-perf="static"] .brand-dot,
html[data-perf="static"] .blink,
html[data-perf="static"] .sb-led,
html[data-perf="static"] .caret{animation:none}
html[data-perf="static"] .stat b{text-shadow:none}
html[data-perf="static"] .card-top svg{filter:none}
html[data-perf="static"] .reveal{transition:none}
html[data-perf="static"] .scroll-progress i{transition:none}
html[data-perf="static"] .term,
html[data-perf="static"] .card,
html[data-perf="static"] .stats,
html[data-perf="static"] .readout,
html[data-perf="static"] .latency,
html[data-perf="static"] .tool,
html[data-perf="static"] .topbar.scrolled,
html[data-perf="static"] .statusbar{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-perf="static"] .topbar.scrolled,
html[data-perf="static"] .statusbar{background:rgba(4,6,12,.94)}

/* ---------- 17.4 手机：能砍的装饰一律按机型档砍 ----------
   这些全是"每帧都有成本、但手机上几乎看不出差别"的东西。 */
@media (max-width:760px){
  /* 固定栏的毛玻璃最贵：内容在下面滚动时每一帧都要重新模糊 */
  .topbar.scrolled,
  .statusbar{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(4,6,12,.93);
  }
  .glow{animation:none}
  /* 全屏噪点层：混叠合成一次整屏，直接不要了 */
  .noise{display:none}
  .grid-overlay{animation-duration:60s}
  /* 大标题上的扫光动画 = 逐帧重绘剪贴文字，手机不开 */
  .t-main::after{display:none}
  .t-main,.t-sub{text-shadow:none}
  /* 扫描扇形 = conic 渐变 + mask + 旋转，手机全档不开 */
  .scan{display:none}
  /* 标准档再砍掉虚线的副环，只剩一个主环 */
  html[data-perf="mid"] .r2,
  html[data-perf="mid"] .r3{display:none}
}

/* ============================================================
   18. 桌面满血档的画质增强
   ------------------------------------------------------------
   只在"桌面 + high"同时成立时开，全是把细节往更精细的方向调：
   更亮的网格、更强的光晕与辉光。这些是一次性光栅化成本，
   桌面独显吃着跟玩一样，手机上永远看不到这些规则。 */
@media (min-width:761px){
  html[data-perf="high"] .glow{opacity:.68}  html[data-perf="high"] .noise{opacity:.07}
  html[data-perf="high"] .grid-overlay{
    background-image:
      linear-gradient(to right,rgba(var(--accent-rgb),.09) 1px,transparent 1px),
      linear-gradient(to bottom,rgba(var(--accent-rgb),.09) 1px,transparent 1px);
    background-size:56px 56px;
  }
  html[data-perf="high"] .stat b{text-shadow:0 0 36px rgba(var(--accent-rgb),.5)}
  html[data-perf="high"] .card{
    box-shadow:0 34px 80px -44px rgba(var(--accent-rgb),.55),inset 0 0 0 1px rgba(120,180,255,.04);
  }
  html[data-perf="high"] .readout,
  html[data-perf="high"] .term,
  html[data-perf="high"] .latency,
  html[data-perf="high"] .tool{
    box-shadow:0 30px 70px -40px rgba(var(--accent-rgb),.35);
  }
  html[data-perf="high"] .cursor-glow{
    background:radial-gradient(circle,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.06) 40%,transparent 70%);
  }
}

/* ============================================================
   19. 站内公告条（由后台下发，没配置就不存在）
   ============================================================ */
.notice{
  position:relative;
  z-index:4;
  width:var(--shell);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 16px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:linear-gradient(100deg,rgba(var(--accent-rgb),.1),rgba(139,92,246,.07));
  font-size:.85rem;
  color:var(--text);
}
/* hidden 要压得住 display:flex */
.notice[hidden]{display:none}
.notice-dot{
  flex:none;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  animation:blinkDot 2.4s ease-in-out infinite;
}
.notice p{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  line-height:1.6;
  word-break:break-word;
}
.notice-x{
  flex:none;
  width:26px;height:26px;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease;
}
.notice-x:hover{color:var(--cyan);border-color:var(--line-strong)}

/* 公告条出现在首屏上方，把 hero 的顶部内边距压一点 */
.notice + .hero{padding-top:calc(var(--topbar-h) + 26px)}

@media (max-width:760px){
  .notice{font-size:.8rem;padding:10px 13px;gap:10px}
}

/* ============================================================
   20. 语言开关 / 实时数据条 / 地球与街机的挂载点
   ============================================================ */

/* ---------- 20.1 中英文开关 ---------- */
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:3px;
  height:26px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:99px;
  background:rgba(255,255,255,.02);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.lang-btn:hover{border-color:var(--line-strong);color:var(--text)}
.lang-btn .lb-sep{opacity:.3}
.lang-btn .lb-zh,
.lang-btn .lb-en{transition:color .25s ease,text-shadow .25s ease}
/* 当前语言在 html[data-lang] 上，亮哪一边纯靠 CSS，不用 JS 再画一遍 */
html[data-lang="zh"] .lang-btn .lb-zh,
html[data-lang="en"] .lang-btn .lb-en{
  color:rgb(var(--accent-rgb));
  text-shadow:0 0 10px rgba(var(--accent-rgb),.55);
}

/* ---------- 20.2 实时数据条 ---------- */
/* 右上角那颗一直在呼吸的小点，是在说"这几个数不是写死的" */
.stat-pulse{
  position:absolute;
  top:12px;right:13px;
  width:5px;height:5px;
  border-radius:50%;
  background:rgb(var(--accent-rgb));
  box-shadow:0 0 8px rgb(var(--accent-rgb));
  opacity:.7;
  animation:statPulse 2.6s ease-in-out infinite;
}
@keyframes statPulse{
  0%,100%{opacity:.22;transform:scale(.75)}
  50%{opacity:.95;transform:scale(1)}
}
html[data-perf="low"] .stat-pulse,
html[data-perf="static"] .stat-pulse{animation:none;opacity:.3}

/* 四个数字在手机上排 2×2：英文标签（Visitors today 之类）塞不进四列 */
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:18px 12px}
  .stat + .stat::before{display:none}
  .stat:nth-child(odd)::after{
    content:"";
    position:absolute;
    right:0;top:22%;bottom:22%;
    width:1px;
    background:linear-gradient(180deg,transparent,var(--line-strong),transparent);
  }
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .stat b{font-size:clamp(1.3rem,7.2vw,1.9rem)}
  .stat > span{font-size:.66rem;letter-spacing:.1em}
  .stat-pulse{top:9px;right:10px}
}

/* ---------- 20.3 状态栏：标签变暗，数值保持青色 ---------- */
.sb-k{color:var(--muted);opacity:.78}
.sb-dyn{
  font-style:normal;
  font-size:.58rem;
  color:var(--muted);
  opacity:.7;
  font-variant-numeric:tabular-nums;
}
.sb-dyn[hidden]{display:none}

/* ---------- 20.4 地球 / 街机的挂载点 ----------
   两个模块自己往里面塞 canvas 和样式；没塞进来之前不占任何空间。 */
.globe-stage,
.game-stage{
  position:relative;
  z-index:4;
  width:var(--shell);
  margin:26px auto 0;
}
.globe-stage:empty,
.game-stage:empty{display:none;margin:0}

/* ---------- 20.5 首屏 SCROLL 提示 ---------- */
.scroll-hint b{font-weight:500}

/* ---------- 20.6 窄屏顶栏：多了个语言开关，把别的东西收一收 ---------- */
@media (max-width:430px){
  .topbar-meta{gap:7px}
  .lang-btn{height:24px;padding:0 7px;font-size:.62rem}
  .theme-switch{padding:4px 6px;gap:5px}
  .theme-switch button{width:11px;height:11px}
  .pill-clock{font-size:.66rem;padding:0 7px}
}