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

:root{
  --ink:#1c1726;
  --ink2:#241d33;
  --ink3:#150f1d;
  --line:#35294d;
  --violet:#6514ff;
  --pink:#bf00ff;
  --txt:#e9e2fb;
  --dim:#c3b7e2;
  --pale:#8d82a8;
  --pad:24px;
  --wide:1180px;
}

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

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

body{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--txt);
  font-family:Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:400;
}

body::before{
  content:"";
  position:fixed;
  inset:-40% -40% -40% -40%;
  z-index:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(191,0,255,.075) 0 2px,transparent 2px 16px);
  background-size:400px 400px;
  animation:drift 30s linear infinite;
}

@keyframes drift{
  from{background-position:0 0;}
  to{background-position:400px 400px;}
}

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

a{color:inherit;}

p{margin:0 0 18px;}

ul,ol,dl{margin:0;padding:0;list-style:none;}

.shine,
.top,
.railbar,
main,
footer,
.totop{position:relative;z-index:1;}

/* 顶条 */
.shine{
  background:var(--violet);
  border-bottom:4px solid var(--pink);
  padding:9px var(--pad);
}
.shine p{
  margin:0;
  max-width:var(--wide);
  margin-inline:auto;
  font-size:16px;
  line-height:1.5;
  color:#fff;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 页头 */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px var(--pad);
  background:var(--ink3);
  border-bottom:4px solid var(--line);
}

.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--violet),var(--pink));
  text-decoration:none;
  border-bottom:4px solid var(--pink);
  transition:transform 220ms ease, filter 220ms ease;
}
.mark:hover,.mark:focus-visible{transform:translateY(-2px);filter:brightness(1.15);}
.mark-img{width:44px;height:44px;object-fit:cover;}

.mark-cube{position:relative;display:block;width:24px;height:24px;}
.mark-cube i{position:absolute;width:17px;height:17px;background:#fff;transform:rotate(45deg);}
.mark-cube i:first-child{left:0;top:0;}
.mark-cube i:last-child{right:0;bottom:0;background:var(--ink);opacity:.7;}

.shards{display:flex;align-items:center;gap:8px;}
.shards i{display:block;width:14px;height:14px;background:var(--pink);}
.shards i:nth-child(2){width:30px;background:var(--violet);}
.shards i:nth-child(3){background:var(--line);}

/* 粘性胶囊导航 */
.railbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(21,15,29,.95);
  border-bottom:3px solid var(--line);
  backdrop-filter:blur(6px);
}

.rail{
  display:flex;
  gap:8px;
  padding:10px var(--pad);
  max-width:var(--wide);
  margin:0 auto;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none;}

.pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 16px;
  background:var(--ink2);
  border-bottom:4px solid var(--line);
  color:var(--dim);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  transition:background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.pill:hover,.pill:focus-visible{
  background:var(--violet);
  border-bottom-color:var(--pink);
  color:#fff;
  transform:translateY(-2px);
}
.pill[aria-current]{
  background:var(--pink);
  border-bottom-color:#fff;
  color:#fff;
}

/* 主区 */
main{
  display:block;
}

.hero{
  display:grid;
  place-content:center;
  justify-items:center;
  gap:18px;
  min-height:45vh;
  padding:56px var(--pad) 44px;
  text-align:center;
  background:linear-gradient(165deg,#2a2140 0%,var(--ink) 72%);
  border-bottom:6px solid var(--violet);
}

.hero h1{
  margin:0;
  font-size:clamp(2.2rem,6.6vw,4.1rem);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}

.lede{
  margin:0;
  max-width:58ch;
  font-size:17px;
  line-height:1.7;
  color:var(--dim);
}

.plate{
  width:min(100%,720px);
  aspect-ratio:16/7;
  margin-top:8px;
  display:grid;
  place-items:center;
  gap:0;
  overflow:hidden;
  background:linear-gradient(120deg,var(--violet),var(--pink));
  border-bottom:6px solid var(--pink);
}
.plate-img{width:100%;height:100%;object-fit:cover;}
.plate i{
  position:absolute;
  width:64px;height:64px;
  background:rgba(28,23,38,.4);
  transform:rotate(45deg);
}
.plate{position:relative;}
.plate i:nth-child(1){left:18%;top:22%;}
.plate i:nth-child(2){width:38px;height:38px;left:46%;top:52%;background:rgba(255,255,255,.42);}
.plate i:nth-child(3){right:14%;top:28%;background:rgba(28,23,38,.55);}

/* 双栏：侧栏在左 */
.deck{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:48px;
  max-width:var(--wide);
  margin:0 auto;
  padding:56px var(--pad) 72px;
}

.railside{
  position:sticky;
  top:82px;
  align-self:start;
  background:var(--ink2);
  border-bottom:6px solid var(--violet);
  padding:20px 18px 12px;
}

.kick{
  display:block;
  font-size:16px;
  line-height:1.4;
  letter-spacing:.14em;
  color:var(--pink);
  margin-bottom:4px;
}

.side-h{
  margin:0 0 14px;
  font-size:1.45rem;
  line-height:1.25;
  font-weight:700;
  color:#fff;
}

.toc li{border-bottom:1px solid var(--line);}
.toc li:last-child{border-bottom:0;}

.toc a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 6px;
  color:var(--dim);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  transition:color 200ms ease, background 200ms ease, padding-left 200ms ease;
}
.toc a:hover,.toc a:focus-visible{
  color:#fff;
  background:var(--violet);
  padding-left:12px;
}

.num{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:16px;
  color:var(--pink);
}
.toc a:hover .num{color:#fff;}

/* 正文 */
.flow{
  min-width:0;
  font-size:17px;
  line-height:1.8;
  color:var(--txt);
}

.flow section{
  margin:0 0 48px;
  padding-bottom:38px;
  border-bottom:4px solid var(--line);
}
.flow section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0;}

.flow h2{
  margin:0 0 20px;
  font-size:clamp(1.55rem,3.4vw,2.15rem);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
}
.flow h2::after{
  content:"";
  display:block;
  width:64px;
  height:6px;
  margin-top:14px;
  background:var(--pink);
}

.flow h3{
  margin:32px 0 14px;
  font-size:1.25rem;
  line-height:1.35;
  font-weight:500;
  color:#fff;
}

.flow p{color:var(--txt);}

.flow a{
  color:#cbaaff;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color 200ms ease;
}
.flow a:hover{color:var(--pink);}

.flow ul,.flow ol{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.flow ul li,.flow ol li{
  position:relative;
  padding:6px 0 6px 24px;
  border-bottom:1px solid rgba(53,41,77,.7);
}
.flow ul li::before{
  content:"";
  position:absolute;
  left:4px;
  top:1.05em;
  width:9px;height:9px;
  background:var(--pink);
}
.flow ol{counter-reset:step;}
.flow ol li{counter-increment:step;}
.flow ol li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:6px;
  font-weight:700;
  font-size:16px;
  color:var(--pink);
}

.flow blockquote{
  margin:24px 0;
  padding:18px 20px;
  background:var(--ink2);
  border-left:6px solid var(--pink);
  color:var(--dim);
}
.flow blockquote p:last-child{margin-bottom:0;}

.flow strong{color:#fff;font-weight:700;}

.flow table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 22px;
  font-size:16px;
}
.flow th,.flow td{
  border-bottom:2px solid var(--line);
  padding:10px 8px;
  text-align:left;
}
.flow th{color:#fff;background:var(--ink2);}

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

/* 页脚 */
footer.base{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  padding:48px var(--pad) 64px;
  background:var(--ink3);
  border-top:6px solid var(--violet);
  max-width:100%;
}

.fnav{flex:1 1 320px;min-width:0;}
.fnav dl{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:2px 18px;
}
.fnav dd{display:none;}
.fnav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:4px 0;
  color:var(--dim);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 200ms ease, border-color 200ms ease;
}
.fnav a:hover,.fnav a:focus-visible{color:#fff;border-bottom-color:var(--pink);}

.fmark{flex:0 0 auto;}
.fnote{flex:0 0 auto;text-align:right;}
.fnote p{
  margin:0;
  padding-top:12px;
  font-size:16px;
  line-height:1.5;
  color:var(--pale);
}

/* 回到顶部 */
.totop{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:30;
  min-height:44px;
  padding:11px 16px;
  background:var(--pink);
  color:#fff;
  border:0;
  border-bottom:4px solid var(--violet);
  font:inherit;
  font-size:16px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.totop.is-on{opacity:1;visibility:visible;transform:none;}
.totop:hover{background:var(--violet);}

/* 滚动显现 */
.js [data-rv]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 300ms ease, transform 300ms ease;
}
.js [data-rv].is-in{opacity:1;transform:none;}

@media (max-width:860px){
  :root{--pad:18px;}
  .shine p{font-size:16px;}
  .deck{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
    padding:36px var(--pad) 56px;
  }
  .railside{position:static;}
  .hero{min-height:0;padding:40px var(--pad) 32px;}
  .plate{aspect-ratio:16/9;max-width:340px;}
  footer.base{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    padding:36px var(--pad) 56px;
  }
  .fnote{text-align:left;}
  .fnote p{padding-top:0;}
  .flow section{margin-bottom:36px;padding-bottom:28px;}
  section[id]{scroll-margin-top:76px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body::before{animation:none;}
  .js [data-rv]{opacity:1;transform:none;transition:none;}
  .pill,.mark,.totop,.toc a,.fnav a{transition:none;}
}

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