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

:root{
  --red:#ff0000;
  --purple:#8b00ff;
  --ink:#261717;
  --fg:#fff4f7;
  --muted:rgba(255,244,247,.76);
  --glass:rgba(255,255,255,.13);
  --glass-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.22);
  --r:18px;
  --rail:94px;
  --bar:34px;
}

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

html{
  background:#1c1111;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding-left:var(--rail);
  font-family:"Nunito","DM Sans",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--fg);
  background:transparent;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-12%;
  z-index:-1;
  background:
    radial-gradient(42vw 42vw at 14% 6%, rgba(255,0,0,.62), rgba(255,0,0,0) 62%),
    radial-gradient(48vw 48vw at 86% 16%, rgba(139,0,255,.58), rgba(139,0,255,0) 64%),
    radial-gradient(70vw 46vw at 52% 104%, rgba(255,0,0,.3), rgba(255,0,0,0) 62%),
    radial-gradient(40vw 40vw at 6% 86%, rgba(139,0,255,.32), rgba(139,0,255,0) 66%),
    linear-gradient(158deg,#301919,#1c1111 52%,#2a1429);
}

img{max-width:100%;height:auto}

a{color:#ffb9cc}
a:hover{color:#fff}

:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 顶部细条 */
.topbar{
  position:fixed;
  top:0;left:var(--rail);right:0;
  height:var(--bar);
  z-index:30;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.topbar-txt{
  margin:0;
  font-size:16px;font-weight:800;
  letter-spacing:.24em;text-indent:.24em;
  color:#fff;white-space:nowrap;
  text-shadow:0 0 20px rgba(255,0,0,.55);
}

/* 左侧固定竖排导航 */
.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--rail);
  z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 8px 18px;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-right:1px solid var(--line);
}

.mark{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(140deg,rgba(255,0,0,.6),rgba(139,0,255,.6));
  color:#fff;text-decoration:none;
  overflow:hidden;
  transition:transform .28s ease,filter .28s ease;
}
.mark:hover{transform:translateY(-2px) rotate(-3deg);filter:brightness(1.15)}
.mark-img{display:block;width:44px;height:44px;object-fit:cover}
.mark-txt{font-size:20px;font-weight:900;line-height:1}

.rail-nav{width:100%}

.rail-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
  width:100%;
}
.rail-list li{display:flex}
.rail-list a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;min-height:58px;
  padding:9px 4px;
  border-radius:14px;
  border:1px solid transparent;
  font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.04em;
  text-align:center;text-decoration:none;
  color:var(--muted);
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.rail-list a::before{content:"◆";font-size:9px;color:var(--red);letter-spacing:0}
.rail-list a:hover,
.rail-list a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.16);
  border-color:var(--line);
  transform:translateX(2px);
}

/* 首屏 */
main{padding-bottom:70px}

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--bar) + 46px) 22px 74px;
  overflow:hidden;
}
.hero-wash{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:clamp(90px,24vw,280px);
  font-weight:900;line-height:1;letter-spacing:.02em;
  color:rgba(255,255,255,.075);
  white-space:nowrap;
  pointer-events:none;user-select:none;
}
.hero-h1{
  position:relative;
  margin:0 0 18px;
  max-width:16em;
  font-size:clamp(32px,7vw,72px);
  font-weight:900;line-height:1.24;letter-spacing:.01em;
  background:linear-gradient(94deg,#fff 0%,#ffd6e2 44%,#ddc6ff 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:rise .8s cubic-bezier(.22,.9,.3,1) both;
}
.hero-sub{
  position:relative;
  margin:0;
  max-width:38ch;
  font-size:17px;line-height:1.75;
  color:var(--muted);
  animation:rise .8s .1s cubic-bezier(.22,.9,.3,1) both;
}
.hero-go{
  position:relative;
  margin-top:30px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  padding:12px 30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:linear-gradient(120deg,rgba(255,0,0,.58),rgba(139,0,255,.52));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#fff;font-size:17px;font-weight:800;letter-spacing:.12em;
  text-decoration:none;
  animation:rise .8s .2s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .25s ease,filter .25s ease;
}
.hero-go:hover{transform:translateY(-3px);filter:brightness(1.14);color:#fff}

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

/* 正文区：左栏索引 + 右栏内容 */
.stage{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  align-items:start;
  gap:24px;
  max-width:1200px;
  margin:0 auto;
  padding:56px clamp(14px,3.2vw,40px) 0;
}

.side{
  position:sticky;
  top:calc(var(--bar) + 16px);
  min-width:0;
  padding:18px 16px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.eyebrow{
  display:block;
  font-size:16px;font-weight:800;
  letter-spacing:.16em;
  color:#ffc3d2;
}
.side-h2{
  margin:2px 0 14px;
  font-size:22px;font-weight:900;line-height:1.32;
}
.side-fig{
  margin:0 0 14px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}
.side-img{display:block;width:100%;height:auto}
.side-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;
}
.side-list a{
  display:flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 6px;
  border-radius:10px;
  font-size:16px;text-decoration:none;
  color:var(--muted);
  transition:background .2s ease,color .2s ease;
}
.side-list a::before{content:"◆";font-size:8px;color:var(--red)}
.side-list a:hover{background:rgba(255,255,255,.14);color:#fff}

.prose{
  min-width:0;
  max-width:820px;
  font-size:17px;
}
.prose > article{
  margin:0 0 20px;
  padding:clamp(20px,3vw,34px);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  scroll-margin-top:calc(var(--bar) + 20px);
}
.prose > article:last-child{margin-bottom:0}

.js .prose > article{opacity:0;transform:translateY(18px)}
.js .prose > article.in{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1);
}

.prose small{
  display:block;
  margin-bottom:4px;
  font-size:16px;font-weight:800;letter-spacing:.16em;
  color:#ffc3d2;
}
.prose h2{
  margin:0 0 .62em;
  font-size:clamp(24px,3.2vw,32px);
  font-weight:900;line-height:1.32;
  color:#fff;
}
.prose h3{
  margin:1.4em 0 .5em;
  font-size:21px;font-weight:800;line-height:1.4;
  color:#fff;
}
.prose h4{
  margin:1.2em 0 .4em;
  font-size:18px;font-weight:800;
  color:#ffdbe5;
}
.prose p{margin:.9em 0}
.prose p:first-of-type{margin-top:0}
.prose ul,.prose ol{pargin:0;margin:.8em 0;padding-inline-start:1.35em}
.prose li{margin:.42em 0}
.prose a{text-underline-offset:3px}
.prose img{display:block;margin:1em 0;border-radius:14px}
.prose figure{margin:1.1em 0}
.prose figcaption{font-size:16px;color:var(--muted);margin-top:.5em}
.prose blockquote{
  margin:1.1em 0;
  padding:.4em 0 .4em 1em;
  border-left:3px solid var(--red);
  color:var(--muted);
}
.prose code{
  padding:.12em .38em;
  border-radius:8px;
  background:rgba(0,0,0,.32);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.94em;
}
.prose pre{
  margin:1.1em 0;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.34);
  overflow-x:auto;
}
.prose pre code{padding:0;background:none}
.prose table{
  width:100%;
  margin:1.1em 0;
  border-collapse:collapse;
  font-size:16px;
}
.prose th,.prose td{
  padding:9px 10px;
  border:1px solid var(--line);
  text-align:left;
}
.prose th{background:rgba(255,255,255,.1);font-weight:800}
.prose hr{
  margin:1.6em 0;
  border:0;border-top:1px solid var(--line);
}

/* 页脚 */
.foot{
  margin-top:64px;
  padding:44px clamp(16px,4vw,48px) 26px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.foot-top{max-width:1000px;margin:0 auto 32px;text-align:center}
.foot-brand{
  margin:0 0 8px;
  font-size:26px;font-weight:900;letter-spacing:.12em;
}
.foot-desc{
  margin:0 auto;max-width:46ch;
  font-size:16px;line-height:1.7;
  color:var(--muted);
}
.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  max-width:1000px;
  margin:0 auto;
}
.foot-dl{margin:0;min-width:0}
.foot-dl dt{
  margin-bottom:10px;
  font-size:16px;font-weight:900;letter-spacing:.14em;
  color:#ffc3d2;
}
.foot-dl dd{margin:0 0 6px;font-size:16px;color:var(--muted)}
.foot-dl dd a{
  display:inline-flex;align-items:center;
  min-height:40px;padding:0 2px;
  color:var(--muted);text-decoration:none;
}
.foot-dl dd a:hover{color:#fff}

.sub{display:flex;flex-direction:column;gap:8px;max-width:260px}
.sub label{font-size:16px;color:var(--muted)}
.sub input{
  height:44px;
  padding:0 12px;
  font-size:16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.14);
  color:#fff;
}
.sub input::placeholder{color:rgba(255,255,255,.62)}
.sub button{
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.36);
  background:linear-gradient(120deg,#ff0000,#8b00ff);
  color:#fff;font-size:16px;font-weight:800;letter-spacing:.14em;
  cursor:pointer;
  transition:filter .22s ease,transform .22s ease;
}
.sub button:hover{filter:brightness(1.12);transform:translateY(-1px)}

.copy{
  margin:34px 0 0;
  text-align:center;
  font-size:16px;
  color:rgba(255,255,255,.62);
}

@media (max-width:900px){
  :root{--rail:0px}
  body{padding-left:0;padding-top:calc(var(--bar) + 62px)}
  .topbar{left:0}
  .rail{
    top:var(--bar);left:0;right:0;bottom:auto;
    width:auto;height:auto;
    flex-direction:row;align-items:center;gap:6px;
    padding:6px 8px;
    overflow:visible;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .mark{width:40px;height:40px;border-radius:12px}
  .mark-img{width:40px;height:40px}
  .rail-nav{
    flex:1 1 auto;min-width:0;width:auto;
    overflow-x:auto;overflow-y:hidden;
  }
  .rail-list{
    flex-direction:row;flex-wrap:nowrap;gap:6px;
    width:max-content;
    padding-bottom:2px;
  }
  .rail-list li{flex:0 0 auto}
  .rail-list a{
    flex-direction:row;
    width:auto;min-height:44px;
    padding:10px 14px;
    white-space:nowrap;
    font-size:16px;
  }
  .rail-list a::before{display:none}
  .rail-list a:hover{transform:none}

  .hero{
    min-height:78svh;
    padding:40px 18px 36px;
  }
  .hero-wash{font-size:clamp(64px,20vw,150px)}
  .hero-h1{font-size:clamp(29px,8.4vw,44px)}

  .stage{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    padding:26px 14px 0;
  }
  .side{position:static}
  .side-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .side-list li{flex:0 0 auto}
  .side-list a{
    min-height:40px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
  }
  .side-list a::before{display:none}

  .prose > article{scroll-margin-top:calc(var(--bar) + 74px)}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:22px}
  .sub{max-width:100%}
}

@media (max-width:520px){
  .hero-wash{color:rgba(255,255,255,.06)}
  .prose > article{padding:18px 16px}
  .foot{padding:34px 16px 22px}
  .foot-brand{font-size:22px}
  .copy{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-h1,.hero-sub,.hero-go{animation:none}
  .js .prose > article{opacity:1;transform:none;transition:none}
  .mark,.rail-list a,.hero-go,.sub button{transition:none}
}

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