@charset "utf-8";

:root{
  --red:#ff0000;
  --pink:#ff006e;
  --ink:#1a1a2e;
  --ink-2:#0b0b18;
  --cyan:#39e6ff;
  --txt:#ece9ff;
  --dim:#a89fd8;
  --line:rgba(255,0,110,.28);
  --hair:rgba(255,255,255,.08);
  --pad:clamp(14px,4vw,40px);
  --rail:256px;
}

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

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

body{
  margin:0;
  min-height:100vh;
  font-family:"Nunito","DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--txt);
  background:
    radial-gradient(880px 620px at 14% -8%,rgba(255,0,110,.20),transparent 62%),
    radial-gradient(760px 520px at 96% 8%,rgba(255,0,0,.16),transparent 60%),
    linear-gradient(180deg,#1a1a2e 0%,#10101f 55%,#08080f 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* CRT 扫描线 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  opacity:.6;
  mix-blend-mode:screen;
}

/* 暗角 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%,transparent 52%,rgba(0,0,0,.6) 100%);
}

::selection{background:var(--pink);color:#12000a}

a{color:var(--pink)}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

code{
  font-family:"DM Sans",ui-monospace,"Courier New",monospace;
  font-size:.95em;
  letter-spacing:.02em;
  color:var(--cyan);
}

/* ---------- 框架 ---------- */
.page{
  display:flex;
  align-items:flex-start;
  min-height:100vh;
}

.rail{
  position:sticky;
  top:0;
  z-index:40;
  flex:0 0 var(--rail);
  width:var(--rail);
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 18px 18px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(26,26,46,.97),rgba(8,8,15,.97));
  box-shadow:10px 0 44px rgba(0,0,0,.6);
  overflow-y:auto;
}

.rail-head{display:block}

.logo{
  display:block;
  text-decoration:none;
  color:#fff;
}

.mark{
  display:block;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:0;
  font-weight:900;
  font-size:18px;
  line-height:1.3;
  letter-spacing:.06em;
  text-shadow:0 0 10px var(--pink),0 0 26px rgba(255,0,0,.6);
  background:rgba(255,0,110,.06);
}

.logo-img{
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:0;
}

.rail-title{
  margin:4px 0 0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.34em;
  color:var(--dim);
  text-shadow:none;
}

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

.rail-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:navi;
}

.rail-nav li{counter-increment:navi}

.rail-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 8px;
  font-size:16px;
  font-weight:700;
  color:var(--txt);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}

.rail-nav a::before{
  content:counter(navi,decimal-leading-zero);
  font-family:"DM Sans",monospace;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--pink);
  opacity:.9;
  font-variant-numeric:tabular-nums;
}

.rail-nav a:hover,
.rail-nav a:focus-visible{
  color:#fff;
  border-left-color:var(--pink);
  background:rgba(255,0,110,.12);
  transform:translateX(3px);
  text-shadow:0 0 12px rgba(255,0,110,.9);
}

.rail-cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 12px;
  font-weight:900;
  letter-spacing:.1em;
  text-decoration:none;
  color:#fff;
  border:1px solid var(--pink);
  border-radius:0;
  background:linear-gradient(180deg,rgba(255,0,110,.3),rgba(255,0,0,.12));
  box-shadow:0 0 18px rgba(255,0,110,.35),inset 0 0 18px rgba(255,0,110,.16);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}

.rail-cta:hover,
.rail-cta:focus-visible{
  background:var(--pink);
  color:#16000b;
  box-shadow:0 0 28px rgba(255,0,110,.8);
}

.rail-foot{
  padding-top:6px;
  border-top:1px dashed rgba(255,255,255,.14);
  font-size:16px;
}

/* ---------- 内容区 ---------- */
.frame{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

main{padding:0 var(--pad)}

div{
  max-width:940px;
  margin:0 auto;
  padding-bottom:12px;
}

.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 8px 48px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,0,110,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,0,110,.13) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(62% 62% at 50% 46%,#000 26%,transparent 100%);
  mask-image:radial-gradient(62% 62% at 50% 46%,#000 26%,transparent 100%);
}

.hero-art{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.shot{
  position:absolute;
  margin:0;
  width:clamp(118px,19vw,222px);
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid rgba(255,0,110,.5);
  border-radius:0;
  background:rgba(10,10,24,.75);
  box-shadow:0 0 26px rgba(255,0,110,.34);
  opacity:.82;
}

.shot .hero-img,
.shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.15) contrast(1.05);
}

.shot.a{left:1.5%;top:7%;transform:rotate(-4deg)}
.shot.b{right:1.5%;bottom:6%;transform:rotate(4deg)}

.hero-text{
  position:relative;
  z-index:2;
  max-width:780px;
}

h1{
  margin:0 0 16px;
  font-size:clamp(28px,5.1vw,54px);
  line-height:1.24;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:
    0 0 14px rgba(255,0,110,.85),
    0 0 42px rgba(255,0,0,.55),
    2px 2px 0 rgba(0,0,0,.65);
  animation:glitch 6s steps(1) infinite;
}

@keyframes glitch{
  0%,90%,100%{transform:none;text-shadow:0 0 14px rgba(255,0,110,.85),0 0 42px rgba(255,0,0,.55)}
  91%{transform:skewX(-3deg) translateX(-2px);text-shadow:-3px 0 var(--cyan),3px 0 var(--pink)}
  94%{transform:skewX(2deg) translateX(2px);text-shadow:3px 0 var(--cyan),-3px 0 var(--pink)}
  97%{transform:none;text-shadow:-2px 0 var(--pink),2px 0 var(--cyan)}
}

.lede{
  margin:0 auto;
  max-width:46ch;
  font-size:16px;
  color:var(--dim);
}

.body{padding:32px 0 10px}

.body section{
  position:relative;
  margin:0 0 26px;
  padding:26px clamp(15px,3vw,30px);
  border:1px solid var(--hair);
  border-bottom:3px solid var(--pink);
  border-radius:0;
  background:rgba(255,255,255,.026);
  box-shadow:inset 0 0 0 1px rgba(255,0,110,.05);
  scroll-margin-top:22px;
  animation:rise .5s both;
}

.body section:hover{
  border-color:rgba(255,0,110,.42);
  border-bottom-color:var(--red);
  box-shadow:0 0 26px rgba(255,0,110,.2),inset 0 0 0 1px rgba(255,0,110,.08);
}

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

@keyframes slideIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:none}
}

.body p,
.body li{font-size:16px}

.body p{margin:0 0 1em}

.body h2{
  margin:.1em 0 .6em;
  font-size:clamp(20px,2.9vw,27px);
  line-height:1.36;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 12px rgba(255,0,110,.7);
}

.body h3,
.body h4{
  margin:1.2em 0 .5em;
  font-size:18px;
  line-height:1.4;
  font-weight:800;
  color:#fff;
  text-shadow:0 0 10px rgba(255,0,110,.45);
}

div hr{
  height:2px;
  margin:0 0 18px;
  border:0;
  background:linear-gradient(90deg,var(--red),var(--pink) 42%,rgba(255,0,110,0));
  box-shadow:0 0 12px rgba(255,0,110,.5);
}

.body ul,
.body ol{
  margin:0 0 1em;
  padding-left:1.25em;
}

.body li{
  margin:.35em 0;
  animation:slideIn .42s both;
}

.body li:nth-child(1){animation-delay:.02s}
.body li:nth-child(2){animation-delay:.05s}
.body li:nth-child(3){animation-delay:.08s}
.body li:nth-child(4){animation-delay:.11s}
.body li:nth-child(5){animation-delay:.14s}
.body li:nth-child(6){animation-delay:.17s}
.body li:nth-child(7){animation-delay:.2s}
.body li:nth-child(n+8){animation-delay:.23s}

.body li::marker{color:var(--pink)}

.body a{
  color:var(--pink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

.body a:hover{
  color:#fff;
  text-shadow:0 0 12px rgba(255,0,110,.9);
}

.body strong{color:#fff}

.body blockquote{
  margin:0 0 1em;
  padding:12px 16px;
  border-left:3px solid var(--pink);
  background:rgba(255,0,110,.09);
  color:var(--txt);
}

.body blockquote p:last-child{margin:0}

.body table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1em;
  font-size:16px;
}

.body th,
.body td{
  padding:10px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.body th{
  color:#fff;
  font-weight:800;
  background:rgba(255,0,110,.1);
}

.body figure{margin:0 0 1em}

.body img{
  max-width:100%;
  height:auto;
  border:1px solid var(--hair);
  border-radius:0;
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:auto;
  padding:32px var(--pad) 20px;
  border-top:1px solid var(--line);
  background:rgba(8,8,15,.78);
}

.foot-grid{
  max-width:940px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.foot-col{margin:0}

.foot dt{
  margin-bottom:8px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--pink);
  text-shadow:0 0 10px rgba(255,0,110,.6);
}

.foot dd{
  margin:0;
  color:var(--dim);
}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:2px 14px;
}

.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--txt);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.foot-links a:hover,
.foot-links a:focus-visible{
  color:var(--pink);
  border-bottom-color:var(--pink);
}

.copy{
  max-width:940px;
  margin:22px auto 0;
  padding-top:14px;
  border-top:1px solid var(--hair);
  font-size:16px;
  color:var(--dim);
}

.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:70;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:18px;
  color:#fff;
  cursor:pointer;
  border:1px solid var(--pink);
  border-radius:0;
  background:rgba(26,26,46,.92);
  box-shadow:0 0 18px rgba(255,0,110,.5);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}

.to-top.on{opacity:1;transform:none;pointer-events:auto}

.to-top:hover{background:var(--pink);color:#16000b}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  .page{display:block}

  .rail{
    position:static;
    width:auto;
    height:auto;
    flex:none;
    padding:12px 14px 14px;
    border-right:0;
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 30px rgba(0,0,0,.55);
    overflow:visible;
  }

  .rail-title,
  .rail-rule{display:none}

  .mark{
    display:inline-block;
    width:auto;
    padding:0;
    border:0;
    background:none;
    font-size:19px;
  }

  .rail-nav{
    margin-top:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .rail-nav ul{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:max-content;
    padding-bottom:4px;
  }

  .rail-nav a{
    min-height:44px;
    padding:9px 13px;
    white-space:nowrap;
    border:1px solid var(--line);
  }

  .rail-nav a::before{display:none}

  .rail-nav a:hover,
  .rail-nav a:focus-visible{transform:none}

  .rail-cta{
    margin-top:12px;
    min-height:44px;
  }

  .rail-foot{margin-top:10px}

  main{padding:0 14px}

  .hero{
    min-height:0;
    padding:38px 4px 34px;
  }

  .hero-art{z-index:1}

  .shot{width:104px;opacity:.38}

  .shot.a{left:-8px;top:2%}

  .shot.b{right:-8px;bottom:2%}

  .body{padding:22px 0 6px}

  .body section{padding:20px 14px;margin-bottom:20px}

  .foot{padding:24px 14px 18px}

  .foot-grid{grid-template-columns:1fr;gap:16px}

  .to-top{right:12px;bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  h1{animation:none}
}

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