html{background:#120a10}
:root{
  --red:#ff0000;
  --purple:#8b00ff;
  --ink:#261717;
  --txt:#f4ecec;
  --dim:#cdb9bf;
  --line:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.07);
  --glass2:rgba(255,255,255,.12);
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.75;
  color:var(--txt);
  background:transparent;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit}
:focus-visible{outline:2px solid #ff7070;outline-offset:2px}
img,svg{max-width:100%}

/* 背景光层 */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(58vw 58vw at 14% 6%,rgba(255,0,0,.32),transparent 62%),
    radial-gradient(54vw 54vw at 88% 16%,rgba(139,0,255,.32),transparent 62%),
    radial-gradient(72vw 50vw at 48% 104%,rgba(139,0,255,.2),transparent 72%),
    linear-gradient(180deg,#2b141a 0%,#1b0f15 46%,#11090f 100%);
}
.glow{
  position:absolute;
  display:block;
  filter:blur(64px);
  opacity:.5;
  will-change:transform;
}
.g1{width:46vw;height:46vw;left:-10vw;top:-2vh;background:radial-gradient(circle,rgba(255,0,0,.9),transparent 66%)}
.g2{width:42vw;height:42vw;right:-8vw;top:24vh;background:radial-gradient(circle,rgba(139,0,255,.85),transparent 66%)}
.g3{width:64vw;height:36vw;left:16vw;top:74vh;background:radial-gradient(circle,rgba(255,0,70,.5),transparent 70%)}
.grain{
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  opacity:.65;
}

/* 顶栏 */
.bar{
  position:sticky;
  top:0;
  z-index:40;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  background:rgba(28,14,19,.58);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 14px 44px rgba(0,0,0,.4);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  justify-self:center;
  text-decoration:none;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.02em;
  color:#fff;
}
.mark{
  width:20px;
  height:20px;
  background:linear-gradient(135deg,var(--red),var(--purple));
  transform:skewX(-12deg);
  box-shadow:0 0 18px rgba(255,0,0,.5);
  flex:0 0 auto;
}
.bar-end{justify-self:end;display:flex;align-items:center;gap:8px}
.drop{position:relative}
summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 12px;
  list-style:none;
  cursor:pointer;
  font-size:.9rem;
  color:var(--txt);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}
summary::-webkit-details-marker{display:none}
summary:hover{background:rgba(255,255,255,.13)}
details[open]>summary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
.ic-bars{
  width:14px;
  height:11px;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;
}
.drop menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:238px;
  margin:0;
  padding:8px;
  list-style:none;
  background:rgba(26,13,18,.8);
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 26px 64px rgba(0,0,0,.6);
}
.drop-r menu{left:auto;right:0}
details:not([open]) menu{display:none}
.drop menu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 10px;
  text-decoration:none;
  font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.drop menu li:last-child a{border-bottom:0}
.drop menu a:hover{background:rgba(255,0,0,.24)}
.ic{
  width:7px;
  height:7px;
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--red),var(--purple));
  transform:rotate(45deg);
}
.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 16px;
  text-decoration:none;
  color:#fff;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.02em;
  background:linear-gradient(135deg,#ff0000,#8b00ff);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 28px rgba(255,0,0,.3);
}
.cta:hover{filter:brightness(1.12)}

/* 首屏 */
.hero{
  position:relative;
  display:grid;
  place-items:center;
  min-height:45vh;
  padding:60px 20px 66px;
  text-align:center;
  overflow:hidden;
}
.hero h1{
  margin:0;
  max-width:16ch;
  font-size:clamp(2.15rem,8.4vw,5.2rem);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.035em;
  color:#fff;
  background:linear-gradient(178deg,#ffffff 34%,#ecc7d0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 24px 70px rgba(0,0,0,.35);
}
.slash{
  position:absolute;
  left:-10%;
  width:120%;
  height:clamp(9px,1.5vw,18px);
  background:linear-gradient(90deg,var(--red),var(--purple) 62%,rgba(139,0,255,0));
  transform:skewY(-2.4deg);
  opacity:.85;
}
.slash.a{top:18px}
.slash.b{bottom:20px;background:linear-gradient(270deg,var(--red),var(--purple))}

/* 版心 */
.wrap{max-width:1180px;margin:0 auto;padding:34px 20px 64px}
.shell{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.prose{min-width:0}
.prose div{
  position:relative;
  margin:0 0 26px;
  padding:26px 22px 30px;
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  box-shadow:0 22px 64px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.15);
  scroll-margin-top:96px;
}
.prose div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:46px;
  background:linear-gradient(180deg,var(--red),var(--purple));
}
.prose div:last-child{margin-bottom:0}
.prose small{
  display:block;
  margin-bottom:8px;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.28em;
  color:#ff8f8f;
}
.prose h2{
  margin:0 0 16px;
  padding-bottom:12px;
  font-size:clamp(1.28rem,3.1vw,1.72rem);
  line-height:1.28;
  font-weight:650;
  letter-spacing:-.015em;
  color:#fff;
  border-bottom:1px solid var(--line);
}
.prose h3{
  margin:22px 0 10px;
  font-size:1.1rem;
  line-height:1.4;
  color:#fff;
}
.prose p{margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose a{color:#ffa1a1;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#fff}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.25em}
.prose li{margin:.36em 0}
.prose strong{color:#fff}
.prose blockquote{
  margin:0 0 16px;
  padding:12px 16px;
  border-left:3px solid var(--purple);
  background:rgba(255,255,255,.06);
  color:var(--dim);
}
.prose img{display:block;width:100%;height:auto;margin:0 0 16px}
.prose figure{margin:0 0 16px}
.prose figcaption{font-size:.82rem;color:var(--dim)}

/* 侧栏 */
.rail{
  position:sticky;
  top:84px;
  padding:20px 18px;
  background:var(--glass2);
  border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 22px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16);
}
.rail small{
  display:block;
  margin-bottom:6px;
  font-size:.72rem;
  letter-spacing:.28em;
  color:#ff8f8f;
}
.rail h2{
  margin:0 0 14px;
  font-size:1.16rem;
  font-weight:650;
  color:#fff;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.toc{
  counter-reset:t;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.toc li{counter-increment:t;border-bottom:1px solid rgba(255,255,255,.1)}
.toc a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:4px 0;
  text-decoration:none;
  font-size:.92rem;
  color:var(--dim);
}
.toc a::before{
  content:counter(t,decimal-leading-zero);
  font-size:.72rem;
  letter-spacing:.1em;
  color:#ff7d7d;
}
.toc a:hover{color:#fff}
.pulse{border-top:1px solid var(--line);padding-top:14px}
.pulse-lbl{
  display:block;
  margin-bottom:6px;
  font-size:.72rem;
  letter-spacing:.28em;
  color:#c9a4ff;
}
.rot{margin:0;padding:0;list-style:none}
.rot.anim li{display:none}
.rot.anim li.on{display:block}
.rot a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:40px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
}
.rot a::after{content:"→";color:#ff7d7d}

/* 页脚 */
.foot{
  display:grid;
  grid-template-columns:1.25fr 1.45fr 1fr .95fr;
  gap:26px;
  align-items:start;
  margin-top:36px;
  padding:40px 22px 24px;
  background:rgba(18,9,14,.62);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:.9rem;
}
.f-brand .brand{justify-self:start}
.f-nav ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 14px;
  margin:0;
  padding:0;
  list-style:none;
}
.f-nav a{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  text-decoration:none;
  color:var(--dim);
  font-size:.88rem;
}
.f-nav a:hover{color:#fff}
.f-cta .big{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  min-height:98px;
  padding:16px;
  text-decoration:none;
  font-weight:600;
  color:#fff;
  background:linear-gradient(150deg,rgba(255,0,0,.85),rgba(139,0,255,.85));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 16px 40px rgba(139,0,255,.28);
}
.f-cta .big span{font-size:1.3rem;line-height:1}
.f-cta .big:hover{filter:brightness(1.12)}
.copy{margin:0;font-size:.82rem;line-height:1.9;color:#a9939b}

/* 断点 */
@media (min-width:900px){
  .shell{grid-template-columns:minmax(0,1fr) 292px;gap:30px;align-items:start}
}
@media (max-width:899px){
  .rail{position:static}
}
@media (max-width:820px){
  .bar{padding:8px 10px;gap:6px}
  summary{padding:8px 10px;font-size:.84rem;gap:6px}
  .brand .name{font-size:.95rem}
  .cta{padding:8px 12px;font-size:.8rem}
  .drop menu{left:0;right:auto;min-width:min(256px,86vw)}
  .drop-r menu{left:auto;right:0}
  .foot{grid-template-columns:1fr 1fr;gap:22px;padding:32px 18px 20px}
  .hero{padding:44px 16px 50px}
  .wrap{padding:26px 16px 48px}
  .prose div{padding:22px 16px 24px}
}
@media (max-width:520px){
  .foot{grid-template-columns:1fr}
  .f-cta .big{min-height:76px;flex-direction:row;align-items:center;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glow{transform:none !important}
}

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