:root{
  --v:#6514ff;
  --m:#bf00ff;
  --ink:#1c1726;
  --ink-2:#241c33;
  --deep:#161120;
  --line:rgba(191,0,255,.32);
  --text:#efe9ff;
  --dim:#b9b0cc;
  --top:66px;
}
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:132px;
  -webkit-text-size-adjust:100%;
  background-color:var(--ink);
  background-image:
    repeating-linear-gradient(135deg, rgba(101,20,255,.16) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(45deg, rgba(191,0,255,.10) 0 2px, transparent 2px 28px);
  animation:drift 34s linear infinite;
}
@keyframes drift{
  to{background-position:280px 280px, -280px 280px}
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:'Plus Jakarta Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  overflow-wrap:break-word;
}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
small{
  display:block;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.4;
  color:var(--m);
}
.skip{
  position:absolute;
  top:-70px;
  left:10px;
  z-index:99;
  padding:12px 18px;
  background:var(--m);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:top .2s ease;
}
.skip:focus{top:10px}

/* ---------- 顶栏：品牌居中，菜单分列 ---------- */
.bar{
  position:sticky;
  top:0;
  z-index:60;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  min-height:var(--top);
  padding:0 18px;
  background:rgba(28,23,38,.94);
  border-bottom:2px solid var(--line);
  backdrop-filter:blur(10px);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:8px 18px;
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:.05em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(100deg,var(--v),var(--m));
  transition:filter .2s ease, transform .2s ease;
}
.brand:hover{filter:brightness(1.15) saturate(1.2);transform:translateY(-1px)}
.brand .mark{display:block;width:24px;height:24px}
.menu ul{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.menu-r ul{justify-content:flex-end}
.menu a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 12px;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  color:var(--text);
  border:2px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.menu a:hover,.menu a:focus-visible{background:var(--v);border-color:var(--m);color:#fff}
.has-sub{position:relative}
.menu .sub{
  position:absolute;
  top:100%;
  left:0;
  display:none;
  flex-direction:column;
  min-width:186px;
  padding:6px;
  background:var(--ink-2);
  border:2px solid var(--m);
}
.menu .has-sub:hover .sub,
.menu .has-sub:focus-within .sub{display:flex}
.menu .sub a{width:100%}

/* ---------- 粘性锚点条 ---------- */
.subbar{
  position:sticky;
  top:var(--top);
  z-index:50;
  background:rgba(36,28,51,.96);
  border-bottom:2px solid var(--line);
  backdrop-filter:blur(8px);
}
.subbar ul{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.subbar ul::-webkit-scrollbar{display:none}
.subbar li{flex:0 0 auto;scroll-snap-align:start}
.subbar a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:8px 16px;
  font-size:1rem;
  font-weight:600;
  color:var(--dim);
  text-decoration:none;
  border-right:2px solid rgba(255,255,255,.07);
  transition:background .2s ease, color .2s ease;
}
.subbar a:hover,.subbar a.on{background:var(--m);color:#fff}

/* ---------- 主栅格 ---------- */
.doc{
  display:grid;
  grid-template-columns:204px minmax(0,1fr);
  gap:48px;
  align-items:start;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px 96px;
}
.doc > *{grid-column:2;min-width:0}
.doc > .hero{grid-column:1 / -1}
.doc > .rail{grid-column:1}

/* ---------- 首屏 ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  min-height:45vh;
  padding:44px 0 48px;
  border-bottom:2px solid var(--line);
  margin-bottom:56px;
}
.hero h1{
  margin:.15em 0 .35em;
  font-size:clamp(2.2rem,6.2vw,4rem);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:800;
  background:linear-gradient(96deg,#fff 34%,var(--m));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero .lead{
  max-width:46ch;
  margin:0;
  color:var(--dim);
  font-size:1.06rem;
}
.hero-art{margin:0;width:clamp(150px,20vw,240px);flex:none}
.hero-art img{width:100%;height:auto;display:block;border:2px solid var(--line)}
.glyph{
  display:block;
  aspect-ratio:1;
  width:clamp(110px,16vw,168px);
  border:2px solid var(--m);
  background:
    conic-gradient(from 45deg, var(--v) 0 25%, var(--m) 0 50%, var(--v) 0 75%, var(--m) 0);
  animation:spin 18s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- 左侧目录 ---------- */
.rail{
  position:sticky;
  top:calc(var(--top) + 64px);
  align-self:start;
  padding:20px 16px 14px;
  background:rgba(22,17,32,.82);
  border:2px solid var(--line);
}
.rail-h{
  margin:.35em 0 .8em;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.2em;
}
.rail ul{list-style:none;margin:0;padding:0;counter-reset:sec}
.rail li{counter-increment:sec}
.rail a{
  display:flex;
  gap:10px;
  align-items:baseline;
  min-height:40px;
  padding:8px 2px;
  font-size:1rem;
  color:var(--dim);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s ease, padding-left .2s ease;
}
.rail a::before{
  content:counter(sec,decimal-leading-zero);
  font-size:.82rem;
  font-weight:700;
  color:var(--m);
  letter-spacing:.06em;
}
.rail a:hover{color:#fff;padding-left:8px}

/* ---------- 正文块 ---------- */
.doc > div{
  scroll-margin-top:132px;
  margin:0 0 48px;
  padding:38px 34px;
  background:rgba(255,255,255,.035);
  border:2px solid var(--line);
}
.doc > div:nth-of-type(even){background:rgba(101,20,255,.07);border-color:rgba(101,20,255,.46)}
.doc h2{
  margin:.1em 0 .55em;
  font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:800;
}
.doc h3{
  margin:1.4em 0 .4em;
  font-size:1.32rem;
  line-height:1.3;
  color:#fff;
}
.doc p{margin:0 0 1em;max-width:68ch}
.doc ul,.doc ol{padding-left:1.35em;margin:0 0 1em}
.doc li{margin:.35em 0}
.doc a{color:#dcb6ff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.doc a:hover{color:#fff;background:rgba(191,0,255,.28)}
.doc blockquote{
  margin:1.4em 0;
  padding:14px 20px;
  background:rgba(191,0,255,.12);
  border-left:6px solid var(--m);
}
.doc blockquote p:last-child{margin-bottom:0}
.doc img{max-width:100%;height:auto;display:block;margin:1.2em 0;border:2px solid var(--line)}
.doc hr{border:0;border-top:2px solid var(--line);margin:2em 0}
.doc table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:1.2em 0;
}
.doc th,.doc td{padding:10px 14px;border:2px solid var(--line);text-align:left}
.doc th{background:rgba(191,0,255,.18)}
.doc code,.doc pre{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace}
.doc pre{
  overflow-x:auto;
  padding:16px;
  font-size:1rem;
  background:var(--deep);
  border:2px solid var(--line);
}

/* ---------- 页脚 ---------- */
.foot{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:48px;
  padding:60px max(24px, calc((100% - 1132px) / 2)) 28px;
  background:var(--deep);
  border-top:4px solid var(--m);
}
.foot-a .mega{
  margin:.12em 0 .3em;
  font-size:clamp(2.4rem,10vw,6rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:800;
  background:linear-gradient(100deg,var(--v),var(--m));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.foot-desc{max-width:42ch;margin:.6em 0 0;color:var(--dim);font-size:1rem}
.foot-b ul{
  list-style:none;
  margin:.6em 0 0;
  padding:0;
  columns:2;
  column-gap:24px;
}
.foot-b a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:4px 0;
  font-size:1rem;
  color:var(--dim);
  text-decoration:none;
  transition:color .2s ease;
}
.foot-b a:hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.foot-c{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:20px;
  border-top:2px solid rgba(255,255,255,.1);
  font-size:1rem;
  color:var(--dim);
}
.foot-c a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:4px 14px;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--m);
  transition:background .2s ease;
}
.foot-c a:hover{background:var(--m)}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .3s ease, transform .3s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 断点 ---------- */
@media (max-width:960px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0}
  .doc > .rail{display:none}
  .doc > *{grid-column:1}
}
@media (max-width:820px){
  :root{--top:56px}
  html{scroll-padding-top:112px}
  .bar{grid-template-columns:1fr;justify-items:center;padding:8px 16px}
  .menu{display:none}
  .doc{padding:0 16px 64px}
  .hero{grid-template-columns:minmax(0,1fr) 84px;gap:16px;min-height:0;padding:26px 0 32px;margin-bottom:34px}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .hero-art,.glyph{width:84px}
  .doc > div{padding:26px 20px;margin-bottom:34px;scroll-margin-top:112px}
  .foot{grid-template-columns:minmax(0,1fr);padding:44px 18px 24px;gap:32px}
  .foot-b ul{columns:2}
  .foot-c{justify-content:space-between}
}
@media (max-width:420px){
  .subbar a{padding:8px 12px;font-size:.95rem}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-art,.glyph{width:72px;order:-1}
}
@media (prefers-reduced-motion: reduce){
  html{animation:none}
  .glyph{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important}
}

button[aria-expanded]{min-width:44px;min-height:44px}