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

:root{
  --ink:#0d0d0d;
  --ink-2:#131019;
  --pri:#8000ff;
  --acc:#ff00ff;
  --txt:#e9e6f2;
  --dim:#a79fc0;
  --faint:#6f6885;
  --line:rgba(128,0,255,.26);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--ink);
}

html.lock{overflow:hidden}

body{
  margin:0;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  color:var(--txt);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(128,0,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,0,255,.075) 1px,transparent 1px),
    radial-gradient(70% 55% at 12% -8%,rgba(128,0,255,.28),transparent 62%),
    radial-gradient(60% 50% at 104% 34%,rgba(255,0,255,.18),transparent 60%);
  background-size:52px 52px,52px 52px,100% 100%,100% 100%;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.32;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,rgba(0,0,0,0) 1px 3px);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.05em}
h1,h2,h3{line-height:1.26;margin:0 0 .62em;font-weight:600;letter-spacing:-.012em}
::selection{background:rgba(255,0,255,.35);color:#fff}

a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* 左栏导航 */
.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:232px;
  padding:34px 18px 28px;
  background:rgba(13,13,13,.94);
  border-right:1px solid var(--line);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:60;
  overflow-y:auto;
}

.rail ol{
  counter-reset:nav;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rail li:nth-child(3),
.rail li:nth-child(5){margin-top:16px}

.rail li a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 8px 10px 12px;
  border-left:2px solid transparent;
  border-radius:0 4px 4px 0;
  color:#cfc7e4;
  font-size:1rem;
  letter-spacing:.01em;
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}

.rail li a::before{
  counter-increment:nav;
  content:counter(nav,decimal-leading-zero);
  flex:0 0 1.9em;
  font-size:1rem;
  font-weight:500;
  color:var(--pri);
  opacity:.85;
}

.rail li a:hover,
.rail li a:focus-visible{
  color:#fff;
  border-left-color:var(--acc);
  background:linear-gradient(90deg,rgba(255,0,255,.16),rgba(255,0,255,0));
  text-shadow:0 0 14px rgba(255,0,255,.75);
}

.rail li a:hover::before{color:var(--acc)}

/* 顶栏 */
.bar{
  position:fixed;
  top:0;
  left:232px;
  right:0;
  height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 20px;
  background:rgba(13,13,13,.8);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:50;
}

.mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,0,255,.45);
  border-radius:4px;
  color:#ff5cf8;
  font-size:1.2rem;
  background:rgba(255,0,255,.06);
  box-shadow:inset 0 0 16px rgba(255,0,255,.22);
}

.mark img{width:24px;height:24px;object-fit:contain}

.cta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 22px;
  border-radius:4px;
  font-weight:600;
  font-size:1rem;
  color:#fff;
  background:linear-gradient(100deg,var(--pri),var(--acc));
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  box-shadow:0 0 22px rgba(255,0,255,.38);
  transition:filter .18s ease;
}

.cta:hover{filter:brightness(1.15)}

.burger{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,0,255,.45);
  border-radius:4px;
  background:rgba(255,0,255,.08);
  cursor:pointer;
}

.burger span{
  display:block;
  width:18px;
  height:2px;
  margin:2px 0;
  background:#ff5cf8;
}

/* 主体骨架 */
main{
  position:relative;
  z-index:1;
  margin-left:232px;
  padding-top:64px;
}

.wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  max-width:1180px;
  margin:0 auto;
  padding:26px 18px 64px;
}

.stage{order:1;min-width:0}

/* 侧栏 */
.side{
  order:2;
  padding:18px;
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(160deg,rgba(128,0,255,.12),rgba(255,0,255,.04));
}

.side small{
  display:block;
  font-size:1rem;
  letter-spacing:.14em;
  color:#ff5cf8;
  margin-bottom:.2em;
}

.side small::before{content:"▚";margin-right:.5em;color:var(--pri)}

.side h2{
  font-size:1.18rem;
  color:#fff;
  margin:0 0 .85em;
  text-shadow:0 0 16px rgba(128,0,255,.6);
}

.side ul{display:flex;flex-wrap:wrap;gap:8px}

.side ul a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:1rem;
  color:var(--dim);
  transition:color .18s ease,border-color .18s ease;
}

.side ul a:hover{color:#fff;border-color:var(--acc)}

/* 首屏 */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:45vh;
  padding:26px 20px 34px;
  border-radius:4px;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 84%,0 100%);
  background:
    radial-gradient(120% 90% at 0% 100%,rgba(128,0,255,.6),transparent 62%),
    linear-gradient(140deg,#160a24,#24093a 56%,#3c0a50);
}

.hero-media{position:absolute;inset:0;z-index:0}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
  filter:saturate(1.15) contrast(1.05);
  will-change:transform;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,.16),rgba(13,13,13,.86));
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:660px;
  margin-top:auto;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 14px;
  border:1px solid rgba(255,0,255,.45);
  border-radius:4px;
  background:rgba(13,13,13,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-size:1rem;
  color:#ffb0fb;
  transition:background .18s ease,color .18s ease;
}

.chip:hover{background:rgba(255,0,255,.22);color:#fff}

.hero h1{
  margin:0 0 .45em;
  font-size:clamp(1.75rem,4.4vw,3.1rem);
  font-weight:700;
  color:#fff;
  text-shadow:0 0 22px rgba(255,0,255,.55),0 0 64px rgba(128,0,255,.55);
  animation:glitch 8s linear infinite;
}

@keyframes glitch{
  0%,90%,100%{transform:none}
  91%{transform:translate(-2px,1px) skewX(-4deg)}
  93%{transform:translate(2px,-1px) skewX(3deg)}
  95%{transform:translate(-1px,0) skewX(-2deg)}
  97%{transform:none}
}

.hero-lead{
  margin:0;
  max-width:46ch;
  font-size:1.0625rem;
  color:#d4cde6;
}

/* 正文 */
.prose{min-width:0}

.prose > section{
  scroll-margin-top:84px;
  padding:42px 0 34px;
  border-top:1px dashed rgba(128,0,255,.3);
}

.prose > section:first-of-type{border-top:0;padding-top:34px}

.prose h2{
  font-size:clamp(1.4rem,2.6vw,1.95rem);
  color:#fff;
  text-shadow:0 0 20px rgba(128,0,255,.55);
}

.prose h3{
  font-size:1.18rem;
  color:#ffd9fd;
  text-shadow:0 0 14px rgba(255,0,255,.4);
}

.prose small{
  display:block;
  font-size:1rem;
  font-weight:500;
  letter-spacing:.13em;
  color:#ff5cf8;
  margin-bottom:.25em;
}

.prose small::before{content:"›";margin-right:.45em;color:var(--pri)}

.prose section ul,
.prose section ol{padding-left:1.35em;margin:0 0 1.05em}
.prose section ul{list-style:square}
.prose section ol{list-style:decimal}
.prose section li{margin:.35em 0}

.prose p{color:#d9d3e8;max-width:70ch}

.prose a{
  display:inline-block;
  padding:2px 1px;
  color:#dcb6ff;
  border-bottom:1px solid rgba(255,0,255,.45);
}

.prose a:hover{color:#fff;background:rgba(255,0,255,.18)}

.prose strong{color:#fff}

.prose blockquote{
  margin:1.2em 0;
  padding:12px 18px;
  border-left:3px solid var(--acc);
  background:rgba(255,0,255,.07);
  border-radius:0 4px 4px 0;
  color:#e4dcf3;
}

.prose img{margin:1.2em 0;border-radius:4px;height:auto}

.prose figure{margin:1.2em 0}
.prose figcaption{font-size:1rem;color:var(--faint);margin-top:.4em}

.prose table{
  width:100%;
  border-collapse:collapse;
  margin:1.2em 0;
  font-size:1rem;
}

.prose th,.prose td{
  padding:10px 12px;
  border-bottom:1px solid rgba(128,0,255,.22);
  text-align:left;
}

.prose th{color:#ff9dfb;font-weight:600}

/* 页脚 */
.foot{
  position:relative;
  z-index:1;
  margin-left:232px;
  padding:34px 18px 26px;
  border-top:1px solid var(--line);
  overflow:hidden;
}

.foot-mark{
  font-size:clamp(2.1rem,12.5vw,7.5rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.035em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,0,255,.5);
}

.foot-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 26px;
  margin-top:16px;
}

.foot address{
  font-style:normal;
  font-size:1rem;
  color:var(--dim);
}

.foot ul{display:flex;flex-wrap:wrap;gap:4px 20px}

.foot ul a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:1rem;
  color:#cfc7e4;
}

.foot ul a:hover{color:#fff;text-shadow:0 0 12px var(--acc)}

.copy{
  margin:8px 0 0;
  font-size:1rem;
  color:var(--faint);
}

/* 进入动效 */
.js .prose > section,
.js .side{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}

.js .in{opacity:1;transform:none}

/* 窄屏 */
@media (max-width:1099px){
  .rail{
    width:min(84vw,308px);
    padding-top:82px;
    transform:translateX(-101%);
    transition:transform .3s ease;
    box-shadow:0 0 40px rgba(0,0,0,.6);
  }

  .rail.open{transform:none}

  .bar{left:0;padding:0 14px}
  main,.foot{margin-left:0}
  .burger{display:flex}
  .cta{padding:10px 16px}

  .wrap{padding:20px 14px 52px;gap:24px}

  .hero{
    min-height:0;
    padding:18px 16px 24px;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  }

  .hero-copy{margin-top:0}
  .hero h1{font-size:clamp(1.6rem,7vw,2.2rem)}
  .chips{margin-bottom:14px}
}

@media (min-width:1100px){
  .side{
    order:0;
    position:sticky;
    top:88px;
    align-self:start;
    padding:0 0 0 16px;
    border:0;
    border-left:1px solid rgba(128,0,255,.35);
    border-radius:0;
    background:none;
  }

  .side ul{flex-direction:column;flex-wrap:nowrap;gap:0}

  .side ul a{
    width:100%;
    border:0;
    border-radius:0;
    padding:9px 0;
    min-height:40px;
    color:var(--dim);
  }

  .side ul a:hover{color:#fff;padding-left:6px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1{animation:none}
  .js .prose > section,
  .js .side{opacity:1;transform:none;transition:none}
}

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