@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root{
  --pink:#ff0080;
  --magenta:#ff00ff;
  --ink:#26171f;
  --deep:#140b11;
  --panel:#1e1119;
  --txt:#f7eaf2;
  --dim:#cbb2c4;
  --line:rgba(255,0,128,.32);
  --radius:10px;
  --font-h:'Bebas Neue','Source Sans 3','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-b:'Source Sans 3','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  position:relative;
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.72;
  color:var(--txt);
  background:var(--deep);
}

body::before{
  content:'';
  position:fixed;
  inset:-18%;
  z-index:-1;
  pointer-events:none;
  background:
    conic-gradient(from 210deg at 32% 28%, #ff0080, #ff00ff, #5c1136, #ff0080),
    radial-gradient(52% 48% at 74% 72%, #ff00ff, rgba(255,0,255,0) 72%),
    radial-gradient(48% 44% at 18% 84%, #ff0080, rgba(255,0,128,0) 70%);
  background-blend-mode:screen;
  filter:blur(46px) saturate(1.15);
  opacity:.62;
  animation:aurora 27s ease-in-out infinite alternate;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,0,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,128,.06) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  mix-blend-mode:screen;
  opacity:.55;
}

@keyframes aurora{
  0%{transform:translate3d(-3%,-2%,0) scale(1.08) rotate(0deg)}
  50%{transform:translate3d(2%,3%,0) scale(1.22) rotate(7deg)}
  100%{transform:translate3d(4%,-4%,0) scale(1.14) rotate(-5deg)}
}

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

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

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

/* ── 顶栏 ── */
.masthead{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px clamp(10px,3vw,26px);
  background:linear-gradient(180deg, rgba(20,11,17,.94), rgba(20,11,17,.66));
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,0,128,.26);
}

.mark{
  flex:0 0 auto;
  width:44px;
  height:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,0,255,.5);
  background:linear-gradient(142deg, var(--pink), var(--magenta));
  color:#1a0d15;
  text-decoration:none;
  font-family:var(--font-h);
  font-size:22px;
  line-height:1;
  overflow:hidden;
}

.mark-img{width:100%; height:100%; object-fit:cover; border-radius:11px; display:block}

.strip{
  flex:1 1 auto;
  display:flex;
  gap:2px;
  padding:2px 0;
  overflow-x:auto;
  scrollbar-width:none;
}

.strip::-webkit-scrollbar{display:none}

.strip a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 11px;
  white-space:nowrap;
  font-size:16px;
  color:var(--dim);
  text-decoration:none;
  border-radius:9px;
  transition:color .22s, background .22s;
  animation:rise .5s ease both;
  animation-delay:calc(.045s * var(--i, 0));
}

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

.pip{width:6px; height:6px; border-radius:50%; background:var(--pink); flex:0 0 auto}
.pip.p1{background:var(--magenta)}
.pip.p2{background:#ff7abb}

.reach{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  color:#1a0d15;
  text-decoration:none;
  background:linear-gradient(118deg, var(--pink), var(--magenta));
}

/* ── 首屏 ── */
.hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(300px, 45vh, 460px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  text-align:right;
  padding:clamp(30px,6vh,62px) clamp(16px,5vw,56px) clamp(44px,7vh,70px);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
  background:
    radial-gradient(72% 92% at 82% 8%, rgba(255,0,255,.55), transparent 70%),
    radial-gradient(62% 82% at 12% 88%, rgba(255,0,128,.62), transparent 72%),
    linear-gradient(158deg, #3c1531, #180b13);
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
  filter:saturate(1.25) contrast(1.05);
}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(198deg, rgba(20,7,15,.1), rgba(20,7,15,.9) 82%);
}

.hero-band{
  position:absolute;
  left:0;
  right:0;
  bottom:46px;
  height:5px;
  z-index:2;
  transform:skewY(-.7deg);
  background:linear-gradient(90deg, var(--pink), var(--magenta) 46%, rgba(255,0,128,.1));
}

.hero-copy{
  position:relative;
  z-index:3;
  max-width:min(700px, 94%);
  animation:lift .8s ease both;
}

.hero h1{
  margin:0 0 .34em;
  font-family:var(--font-h);
  font-weight:700;
  font-size:clamp(2.3rem, 7.4vw, 4.8rem);
  line-height:1.03;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 8px 34px rgba(255,0,128,.5);
}

.lede{
  margin:0 0 0 auto;
  max-width:52ch;
  font-size:clamp(1rem, 1.5vw, 1.14rem);
  line-height:1.68;
  color:#f1dae7;
}

/* ── 主体 ── */
.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:clamp(26px,4vw,50px) clamp(14px,3.5vw,28px) 72px;
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
  align-items:start;
}

section[id]{scroll-margin-top:84px}

.rail{
  position:sticky;
  top:82px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(30,17,25,.74);
  padding:16px 15px 18px;
}

.rail-h{
  margin:0 0 8px;
  font-family:var(--font-h);
  font-size:1.05rem;
  letter-spacing:.24em;
  color:#ff9ed0;
}

.rail hr{
  border:0;
  height:2px;
  margin:0 0 12px;
  background:linear-gradient(90deg, var(--pink), rgba(255,0,255,.15));
}

.rail-list{
  list-style:none;
  counter-reset:r;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}

.rail-list li{counter-increment:r}

.rail-list a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:6px 8px;
  font-size:16px;
  color:var(--dim);
  text-decoration:none;
  border-radius:8px;
  border-left:2px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}

.rail-list a::before{
  content:counter(r, decimal-leading-zero);
  font-family:var(--font-h);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--pink);
}

.rail-list a:hover,
.rail-list a.on{
  color:#fff;
  background:rgba(255,0,128,.16);
  border-left-color:var(--magenta);
}

.prose{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(38,23,31,.84), rgba(24,13,20,.9));
  padding:clamp(18px,3.2vw,44px);
  overflow-wrap:break-word;
}

.prose > section + section{
  margin-top:44px;
  padding-top:32px;
  border-top:1px dashed rgba(255,0,255,.24);
}

.prose h2{
  margin:0 0 10px;
  font-family:var(--font-h);
  font-size:clamp(1.55rem, 3.4vw, 2.25rem);
  line-height:1.16;
  letter-spacing:.01em;
  color:#fff;
}

.prose h3{
  margin:26px 0 10px;
  font-size:1.2rem;
  color:#ff8fd0;
}

.prose hr{
  border:0;
  height:2px;
  margin:10px 0 20px;
  background:linear-gradient(90deg, var(--pink), var(--magenta) 40%, transparent);
}

.prose p{margin:0 0 18px; color:#f3e3ed}
.prose p:last-child{margin-bottom:0}
.prose a{color:#ffa7d5; text-decoration-color:rgba(255,0,128,.55); text-underline-offset:3px}
.prose strong{color:#fff}
.prose ul, .prose ol{pargin:0 0 18px; padding-left:1.35em}
.prose li{margin:0 0 8px}

.prose blockquote{
  margin:0 0 20px;
  padding:12px 18px;
  border-left:3px solid var(--magenta);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(255,0,128,.1);
}

.prose img{display:block; max-width:100%; height:auto; margin:0 0 18px; border-radius:var(--radius)}

.prose table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:16px}
.prose th, .prose td{border:1px solid rgba(255,0,255,.28); padding:9px 12px; text-align:left}
.prose th{background:rgba(255,0,128,.14); color:#fff}
.prose pre{overflow-x:auto; padding:14px; border-radius:var(--radius); background:rgba(10,4,8,.7); border:1px solid var(--line)}

.prose > section.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.prose > section.reveal.in{opacity:1; transform:none}

/* ── 页脚 ── */
.foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px clamp(12px,3vw,30px);
  padding:22px clamp(16px,4vw,40px);
  border-top:1px solid rgba(255,0,255,.32);
  background:linear-gradient(0deg, rgba(40,10,30,.96), rgba(20,11,17,.7));
}

.foot-brand{
  flex:0 0 auto;
  font-family:var(--font-h);
  font-size:clamp(1.7rem, 4.4vw, 2.6rem);
  line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(100deg, var(--pink), var(--magenta));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.foot-brand a{text-decoration:none; color:inherit}

.foot-nav{flex:1 1 300px}

.foot-nav dl{display:flex; flex-wrap:wrap; gap:2px 2px; margin:0}

.foot-nav dt{margin:0}

.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 10px;
  font-size:16px;
  color:var(--dim);
  text-decoration:none;
  border-radius:8px;
  transition:color .2s, background .2s;
}

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

.foot-legal{flex:0 0 auto; font-size:16px; color:#ad8fa6}

/* ── 窄屏 ── */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .rail{position:static; order:-1}
  .rail-list{grid-template-columns:repeat(2, minmax(0,1fr))}
  .hero{justify-content:flex-start; text-align:left}
  .lede{margin-left:0}
}

@media (max-width:620px){
  body{font-size:16px}
  .hero-band{bottom:38px}
  .hero h1{font-size:clamp(2rem, 9vw, 2.9rem)}
  .prose table{display:block; overflow-x:auto}
  .foot{flex-direction:column; align-items:flex-start}
  .foot-nav{flex:1 1 auto; width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before{animation:none}
  .strip a, .hero-copy{animation:none}
  .prose > section.reveal{opacity:1; transform:none; transition:none}
}

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