@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --ink:#1a1a2e;
  --deep:#0d0d18;
  --panel:#171729;
  --panel-2:#1e1e38;
  --red:#ff0000;
  --pink:#ff006e;
  --paper:#f5f4fb;
  --muted:#a8a6c6;
  --line:rgba(255,0,110,.32);
  --line-soft:rgba(255,255,255,.09);
  --glow-pink:0 0 16px -4px rgba(255,0,110,.85);
  --r:4px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--paper);
  background-color:var(--deep);
  background-image:
    radial-gradient(880px 520px at 82% -8%,rgba(255,0,110,.17),transparent 72%),
    radial-gradient(720px 520px at -6% 104%,rgba(255,0,0,.14),transparent 72%);
  background-attachment:fixed;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.32) 0 1px,rgba(255,255,255,0) 1px 3px);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--pink);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  left:10px;
  top:10px;
  z-index:70;
  display:block;
  padding:10px 16px;
  background:var(--pink);
  color:#fff;
  border-radius:var(--r);
}

/* 左侧固定竖排导航 */
.rail{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:236px;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:24px 14px;
  background:linear-gradient(180deg,rgba(26,26,46,.97),rgba(13,13,24,.99));
  border-right:1px solid var(--line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05);
}

.rail-top,
.rail-bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.rail-group{width:100%}

.rail summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 8px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--muted);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.rail summary::-webkit-details-marker{display:none}
.rail summary::after{
  content:'+';
  margin-left:8px;
  font-size:14px;
  color:var(--pink);
}
.rail details[open] summary::after{content:'−'}
.rail summary:hover{
  color:#fff;
  border-color:var(--line);
  box-shadow:var(--glow-pink);
}
.rail details[open] summary{color:#fff;border-color:var(--line)}

.rail menu{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  gap:4px;
}

.rail menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 8px;
  font-size:16px;
  text-align:center;
  color:var(--muted);
  border:1px solid transparent;
  border-radius:var(--r);
  transition:color .18s,background .18s,border-color .18s;
}
.rail menu a:hover{
  color:#fff;
  background:rgba(255,0,110,.15);
  border-color:var(--line);
  box-shadow:0 0 20px -8px var(--pink);
}

.brand{
  display:block;
  padding:10px 4px;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  color:var(--paper);
  text-shadow:0 0 14px rgba(255,0,110,.45);
}
.brand:hover{color:#fff;text-shadow:0 0 18px var(--pink)}
.brand img{width:44px;height:44px;border-radius:var(--r);box-shadow:0 0 20px -6px var(--pink)}

/* 主体骨架 */
main{
  margin-left:236px;
  max-width:1240px;
  padding:26px clamp(16px,3vw,40px) 64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 248px;
  gap:26px;
  align-items:start;
}

.doc{min-width:0;overflow-wrap:break-word}

/* 首屏 */
.hero{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:22px;
  align-items:center;
  min-height:45vh;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    radial-gradient(420px 240px at 12% 16%,rgba(255,0,110,.24),transparent 72%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px),
    linear-gradient(160deg,#1c1c33,#12121f 74%);
  box-shadow:0 34px 60px -44px #000,inset 0 0 90px rgba(255,0,110,.13);
}

.hero-media{
  position:relative;
  min-height:220px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 0 34px -10px rgba(255,0,110,.7);
}
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.2) contrast(1.06);
}
.hero-media.is-empty{
  display:grid;
  place-items:center;
  background:
    repeating-linear-gradient(45deg,rgba(255,0,110,.13) 0 2px,transparent 2px 14px),
    linear-gradient(150deg,#221a33,#141426);
}
.orb{
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff006e,rgba(255,0,110,.35) 44%,transparent 72%);
  box-shadow:0 0 46px rgba(255,0,110,.7);
}

.hero-copy{text-align:center;padding:6px 4px}

h1{
  margin:0;
  font-size:clamp(27px,4.4vw,44px);
  line-height:1.24;
  letter-spacing:-.4px;
  color:#fff;
  text-shadow:0 0 20px rgba(255,0,110,.6),0 0 44px rgba(255,0,0,.35);
  animation:glitch 7s steps(1) infinite;
}

@keyframes glitch{
  0%,100%{transform:translate(0,0)}
  38%{transform:translate(-1px,1px)}
  40%{transform:translate(2px,-1px) skewX(-.7deg)}
  42%{transform:translate(-1px,0)}
  70%{transform:translate(1px,1px) skewX(.5deg)}
  72%{transform:translate(0,0)}
}

.hero-copy hr{
  height:2px;
  border:0;
  margin:16px auto;
  max-width:220px;
  background:linear-gradient(90deg,transparent,var(--red),var(--pink),transparent);
  box-shadow:0 0 14px rgba(255,0,110,.7);
}

.lede{
  margin:0 auto;
  max-width:44ch;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:18px;
  padding:12px 26px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--red),var(--pink));
  box-shadow:0 0 28px -8px var(--pink),0 18px 30px -22px #000;
  transition:transform .18s,box-shadow .18s;
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 0 36px -4px var(--pink)}

/* 正文卡片 */
article > div{
  margin-top:24px;
  padding:24px clamp(16px,2.4vw,28px);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  background:linear-gradient(155deg,var(--panel),var(--ink) 80%);
  box-shadow:0 28px 50px -40px #000,inset 0 1px 0 rgba(255,255,255,.06),inset 0 -20px 44px -34px rgba(255,0,110,.6);
  scroll-margin-top:92px;
  animation:rise .6s cubic-bezier(.2,.7,.3,1) both;
}
article > div:nth-of-type(1){animation-delay:.04s}
article > div:nth-of-type(2){animation-delay:.09s}
article > div:nth-of-type(3){animation-delay:.14s}
article > div:nth-of-type(4){animation-delay:.19s}
article > div:nth-of-type(5){animation-delay:.24s}
article > div:nth-of-type(6){animation-delay:.29s}
article > div:nth-of-type(7){animation-delay:.34s}
article > div:hover{
  border-color:var(--line);
  transition:border-color .25s;
}

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

article h2{
  margin:.15em 0 .5em;
  font-size:clamp(20px,3.2vw,26px);
  line-height:1.35;
  color:#fff;
  text-shadow:0 0 18px rgba(255,0,110,.5);
}
article h3{
  margin:1.4em 0 .4em;
  font-size:19px;
  line-height:1.45;
  color:#fff;
}
article > div > h2:first-child,
article > div > h3:first-child{margin-top:0}

article p{margin:.85em 0}
article ul,
article ol{margin:.85em 0;padding-left:1.25em}
article li{margin:.4em 0}
article strong{color:#fff}
article a{
  color:var(--pink);
  border-bottom:1px dashed rgba(255,0,110,.55);
}
article a:hover{color:#fff;border-bottom-color:#fff}
article hr{
  height:2px;
  border:0;
  margin:12px 0 18px;
  background:linear-gradient(90deg,var(--red),var(--pink),rgba(255,0,110,0));
  box-shadow:0 0 12px rgba(255,0,110,.65);
}
article blockquote{
  margin:1em 0;
  padding:8px 0 8px 16px;
  border-left:2px solid var(--pink);
  color:var(--muted);
}
article img{
  margin:1em 0;
  border:1px solid var(--line-soft);
  border-radius:var(--r);
}
article table{
  width:100%;
  margin:1em 0;
  border-collapse:collapse;
  font-size:16px;
}
article th,
article td{
  padding:10px 12px;
  border:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
article th{color:#fff;background:rgba(255,0,110,.1)}
article pre{
  overflow-x:auto;
  padding:14px;
  border-radius:var(--r);
  background:#0a0a14;
  border:1px solid var(--line-soft);
}

/* 右侧栏 */
.side{
  position:sticky;
  top:20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(26,26,46,.78);
  backdrop-filter:blur(6px);
  box-shadow:0 26px 50px -40px #000,inset 0 0 40px rgba(255,0,110,.08);
}
.side h2{
  margin:0;
  font-size:16px;
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 0 14px rgba(255,0,110,.55);
}
.side hr{
  height:2px;
  border:0;
  margin:12px 0 10px;
  background:linear-gradient(90deg,var(--pink),rgba(255,0,110,0));
  box-shadow:0 0 10px rgba(255,0,110,.6);
}
.side ul{list-style:none;margin:0;padding:0}
.side a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 10px;
  font-size:16px;
  color:var(--muted);
  border-left:2px solid transparent;
  border-radius:0 var(--r) var(--r) 0;
  transition:color .18s,background .18s,border-color .18s;
}
.side a:hover{
  color:#fff;
  background:rgba(255,0,110,.12);
  border-left-color:var(--pink);
}

/* 页脚 */
.foot{
  margin-left:236px;
  padding:34px clamp(16px,3vw,40px) 20px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#101020,#0a0a14);
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 26px;
  max-width:1240px;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col a,
.foot-mini a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 0;
  font-size:16px;
  color:var(--muted);
}
.foot-col a:hover,
.foot-mini a:hover{color:#fff;text-shadow:0 0 12px var(--pink)}
.foot-logo{
  display:inline-block;
  padding:6px 0;
  font-size:16px;
  font-weight:700;
  color:#fff;
}
.foot-logo img{width:40px;height:40px;border-radius:var(--r)}
address{
  font-style:normal;
  margin-top:6px;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}
.foot-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:1240px;
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.copy{margin:0;font-size:16px;color:var(--muted)}
.foot-mini{display:flex;gap:18px;list-style:none;margin:0;padding:0}

/* 断点 */
@media (max-width:1099px){
  main{grid-template-columns:minmax(0,1fr) 220px;gap:20px}
}

@media (max-width:899px){
  .rail{
    position:sticky;
    top:0;
    left:auto;
    bottom:auto;
    width:auto;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 12px;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:rgba(13,13,24,.95);
    backdrop-filter:blur(8px);
    box-shadow:0 12px 30px -22px #000;
  }
  .rail-top,
  .rail-bottom{width:auto;flex-direction:row}
  .rail-group{width:auto;position:relative}
  .rail summary{padding:12px 14px;letter-spacing:.06em;min-width:44px}
  .rail summary::after{margin-left:6px}
  .rail menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:174px;
    margin:0;
    padding:8px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:0 28px 50px -26px #000;
    z-index:45;
  }
  .rail-bottom menu{left:auto;right:0}
  .rail menu a{justify-content:flex-start;padding-left:14px}
  .brand{padding:8px 2px;font-size:16px}

  main{
    margin-left:0;
    grid-template-columns:minmax(0,1fr);
    padding:18px 14px 48px;
    gap:20px;
  }
  .side{position:static;order:2}
  .foot{margin-left:0}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:719px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
    padding:18px;
    gap:14px;
  }
  .hero-media{order:2;min-height:145px}
  .hero-copy{order:1}
  .hero-copy hr{max-width:160px;margin:12px auto}
  article > div{scroll-margin-top:84px;padding:20px 16px}
  article table{display:block;overflow-x:auto;white-space:nowrap}
}

@media (max-width:420px){
  body{font-size:16px}
  .brand{max-width:118px;line-height:1.15}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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