@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#26171f;
  --deep:#0b0509;
  --paper:#f8eff6;
  --muted:#c6afc1;
  --pink:#ff0080;
  --magenta:#ff00ff;
  --line:rgba(255,0,255,.18);
  --rail:252px;
  --nav-h:62px;
}

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

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

body{
  margin:0;
  padding-left:var(--rail);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--paper);
  background-color:var(--deep);
  background-image:
    radial-gradient(1100px 760px at 88% -8%, rgba(255,0,128,.30), transparent 62%),
    radial-gradient(880px 660px at 8% 18%, rgba(255,0,255,.22), transparent 66%),
    radial-gradient(760px 620px at 66% 96%, rgba(96,26,190,.28), transparent 70%),
    linear-gradient(168deg,#1b0e17 0%,#0b0509 62%);
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-45%;
  z-index:0;
  pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(255,0,128,.55), rgba(255,0,255,.30) 25%,
    rgba(80,0,255,.42) 50%, rgba(0,240,220,.16) 72%,
    rgba(255,0,128,.55));
  filter:blur(80px) saturate(150%);
  opacity:.42;
  mix-blend-mode:screen;
  animation:aurora 30s linear infinite;
}

@keyframes aurora{to{transform:rotate(1turn)}}

img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

/* ---------- 左侧固定药丸导航 ---------- */

.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail);
  z-index:40;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:22px 16px;
  overflow-y:auto;
  background:linear-gradient(175deg,rgba(20,10,18,.94),rgba(9,4,8,.72));
  border-right:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.rail-set{display:flex;flex-direction:column;gap:8px}

.pill{
  display:block;
  text-align:center;
  padding:10px 14px;
  border:1px solid rgba(255,0,255,.26);
  border-radius:999px;
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  color:#f4e3ef;
  background:rgba(255,255,255,.03);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pill:hover{
  background:linear-gradient(100deg,rgba(255,0,128,.38),rgba(255,0,255,.3));
  border-color:transparent;
  box-shadow:0 12px 30px -14px rgba(255,0,128,.95);
  transform:translateY(-1px);
}

.mark{
  margin:14px auto;
  padding:6px 4px;
  font-size:19px;
  font-weight:700;
  letter-spacing:.16em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  background:linear-gradient(95deg,#ff0080,#ff00ff 55%,#ffd9f4);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- 首屏 ---------- */

.hero{
  position:relative;
  z-index:1;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:100svh;
  padding:clamp(26px,6vw,74px);
  overflow:hidden;
}

.hero-art{position:absolute;inset:0;z-index:-2;overflow:hidden;filter:saturate(118%)}

.hero-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.06);
  will-change:transform;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.45;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(268deg,
    rgba(11,5,9,.94) 0%,
    rgba(11,5,9,.62) 42%,
    rgba(11,5,9,.10) 100%);
}

.hero-sheet{position:relative;z-index:1}

.hero-title{
  margin:0;
  max-width:20ch;
  text-align:right;
  font-size:clamp(2rem,5.4vw,4.3rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 18px 60px rgba(0,0,0,.62), 0 0 44px rgba(255,0,128,.42);
}

/* ---------- 主体 ---------- */

.stage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 288px;
  gap:clamp(22px,4vw,60px);
  align-items:start;
  max-width:1260px;
  margin:0 auto;
  padding:clamp(38px,6vw,92px) clamp(16px,4vw,44px);
}

.doc{min-width:0}

.prose > div{
  position:relative;
  margin:0 0 clamp(20px,3vw,32px);
  padding:clamp(18px,3vw,36px);
  border:1px solid rgba(255,0,128,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  box-shadow:0 30px 70px -40px rgba(255,0,128,.75), inset 0 1px 0 rgba(255,255,255,.05);
  scroll-margin-top:calc(var(--nav-h) + 18px);
  animation:rise .6s cubic-bezier(.2,.75,.25,1) both;
}

.prose > div:nth-child(1){animation-delay:.02s}
.prose > div:nth-child(2){animation-delay:.08s}
.prose > div:nth-child(3){animation-delay:.14s}
.prose > div:nth-child(4){animation-delay:.2s}
.prose > div:nth-child(5){animation-delay:.26s}
.prose > div:nth-child(6){animation-delay:.32s}
.prose > div:nth-child(7){animation-delay:.38s}
.prose > div:nth-child(n+8){animation-delay:.42s}

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

.prose h2{
  margin:0 0 .5em;
  font-size:clamp(1.35rem,2.5vw,1.95rem);
  font-weight:600;
  line-height:1.26;
  letter-spacing:-.02em;
  color:#fff;
}

.prose h2 + hr{margin:0 0 1.1em}

.prose h3{
  margin:1.5em 0 .4em;
  font-size:1.16rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:#ffe4f3;
}

.prose hr{
  border:0;
  height:1px;
  margin:1.6em 0;
  background:linear-gradient(90deg,var(--pink),var(--magenta) 38%,transparent);
}

.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.25em}
.prose li{margin:.35em 0}

.prose a{
  color:#ffb3dd;
  text-decoration:underline;
  text-decoration-color:rgba(255,0,128,.65);
  text-underline-offset:3px;
}

.prose a:hover{color:#fff}

.prose strong{color:#fff;font-weight:600}

.prose img{
  display:block;
  height:auto;
  margin:1.2em 0;
  border:1px solid rgba(255,0,255,.2);
  box-shadow:0 26px 60px -34px rgba(255,0,255,.8);
}

.prose blockquote{
  margin:1.2em 0;
  padding:.5em 0 .5em 1em;
  border-left:2px solid var(--pink);
  color:var(--muted);
}

.prose table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  font-size:16px;
}

.prose th,.prose td{
  padding:.55em .5em;
  border-bottom:1px solid var(--line);
  text-align:left;
}

.prose pre{overflow-x:auto;padding:1em;background:rgba(0,0,0,.35);font-size:16px}
.prose code{font-size:16px}

/* ---------- 右侧栏 ---------- */

.side{
  position:sticky;
  top:clamp(20px,4vw,44px);
  padding:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  box-shadow:0 30px 70px -46px rgba(255,0,255,.9);
}

.side-title{
  margin:0 0 .55em;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.14em;
  color:#ffd9f2;
}

.side hr{
  border:0;
  height:1px;
  margin:0 0 1em;
  background:linear-gradient(90deg,var(--magenta),transparent);
}

.side-list{margin:0}

.side-list dt{margin:0 0 2px}

.side-list dt a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:4px 2px;
  font-size:16px;
  text-decoration:none;
  color:#ecdfe8;
  border-bottom:1px dashed rgba(255,0,255,.16);
}

.side-list dt a:hover{color:#fff;border-bottom-color:var(--pink)}

/* ---------- 页脚 ---------- */

.foot{
  position:relative;
  z-index:1;
  margin-top:clamp(30px,5vw,60px);
  padding:clamp(34px,5vw,58px) clamp(16px,4vw,44px) 26px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,0,128,.07),transparent 40%);
}

.foot-lead{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(22px,4vw,48px);
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}

.foot-word{
  margin:0;
  font-size:clamp(2.4rem,8.5vw,5.6rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.04em;
  background:linear-gradient(100deg,#ff0080,#ff00ff 58%,#ffd9f4);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.foot a{text-decoration:none;color:#ecdfe8}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.foot dt{
  margin-bottom:6px;
  font-size:16px;
  letter-spacing:.1em;
  color:#ff9fd4;
}

.foot dd{margin:0}

.foot dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:2px 0;
  font-size:16px;
}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,3vw,32px);
  max-width:1100px;
  margin:clamp(26px,4vw,40px) auto 0;
  padding-top:clamp(20px,3vw,28px);
  border-top:1px solid rgba(255,255,255,.08);
}

.foot-end{
  max-width:1100px;
  margin:clamp(26px,4vw,36px) auto 0;
  text-align:center;
}

.foot-end p{
  margin:0;
  font-size:16px;
  color:var(--muted);
}

/* ---------- 移动端 ---------- */

@media (max-width:900px){
  body{padding-left:0}

  .rail{
    position:sticky;
    inset:0 0 auto 0;
    width:auto;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:9px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .rail-set{flex-direction:row;gap:8px}

  .mark{
    order:-2;
    margin:0 6px 0 0;
    padding:8px 6px;
    font-size:17px;
    letter-spacing:.1em;
  }

  .rail .pill{padding:9px 14px;white-space:nowrap;font-size:16px}

  .hero{
    min-height:calc(100svh - var(--nav-h));
    padding:22px 18px 26px;
  }

  .hero-title{max-width:100%}

  .hero::after{
    background:linear-gradient(4deg,
      rgba(11,5,9,.95) 0%,
      rgba(11,5,9,.6) 46%,
      rgba(11,5,9,.16) 100%);
  }

  .stage{
    grid-template-columns:minmax(0,1fr);
    padding:26px 14px 40px;
  }

  .side{position:static;top:auto;order:2}

  .foot-lead{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

  .prose table{font-size:16px}
}

@media (max-width:420px){
  .foot-cols{gap:8px}
  .foot dd a{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before{animation:none}
  .prose > div{animation:none}
  .pill{transition:none}
}

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