@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap');

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

:root{
  --ink:#26171f;
  --ink-2:#170e14;
  --mag:#ff0080;
  --pink:#ff00ff;
  --cy:#5fe6ff;
  --paper:#f7eaf4;
  --dim:#c9a7bc;
  --line:rgba(255,0,128,.28);
  --r:4px;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:Orbitron,var(--sans);
}

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

body{
  margin:0;
  min-height:100vh;
  background:transparent;
  color:var(--paper);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.8;
  overflow-x:hidden;
}

/* 极光网格层 */
body::before{
  content:"";
  position:fixed;
  inset:-22%;
  z-index:-2;
  pointer-events:none;
  opacity:.6;
  background:
    radial-gradient(40% 44% at 18% 22%, rgba(255,0,128,.9), transparent 72%),
    radial-gradient(46% 40% at 82% 16%, rgba(255,0,255,.72), transparent 74%),
    radial-gradient(52% 46% at 60% 76%, rgba(94,0,255,.7), transparent 74%),
    radial-gradient(38% 40% at 12% 82%, rgba(0,206,255,.42), transparent 74%),
    conic-gradient(from 200deg at 55% 45%, rgba(255,0,128,.5), rgba(255,0,255,.4), rgba(60,0,255,.42), rgba(0,206,255,.3), rgba(255,0,128,.5));
  filter:blur(66px) saturate(130%);
  animation:drift 26s 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,128,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,128,.07) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(130% 90% at 50% 0%, #000 38%, transparent 100%);
  mask-image:radial-gradient(130% 90% at 50% 0%, #000 38%, transparent 100%);
}

@keyframes drift{
  0%{transform:translate3d(-2%,-2%,0) scale(1.04) rotate(0deg);filter:blur(60px) hue-rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.12) rotate(7deg);filter:blur(72px) hue-rotate(42deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.07) rotate(-6deg);filter:blur(60px) hue-rotate(-28deg)}
}

a{color:inherit}

.skip{
  position:fixed;
  top:8px;
  left:8px;
  z-index:80;
  transform:translateY(-220%);
  padding:10px 16px;
  font-size:16px;
  color:#fff;
  background:var(--mag);
  border-radius:var(--r);
  text-decoration:none;
  transition:transform .18s ease;
}
.skip:focus{transform:none}

/* 顶栏 */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg, rgba(18,10,15,.96), rgba(18,10,15,.74));
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.ticker{
  height:28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(255,0,128,.14);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.26em;
  color:#ff8ec9;
}

.ticker-track{
  display:flex;
  align-items:center;
  gap:26px;
  white-space:nowrap;
  animation:slide 30s linear infinite;
}

.ticker-track i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 9px var(--pink);
}

@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.bar{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:1240px;
  margin:0 auto;
  padding:10px 20px;
}

.nav ul,
.drop-menu{
  display:flex;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}

.nav a,
.drop-menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:15px;
  line-height:1.4;
  color:var(--dim);
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--r);
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}

.nav a:hover,
.nav a:focus-visible,
.drop-menu a:hover,
.drop-menu a:focus-visible{
  color:#fff;
  background:rgba(255,0,128,.14);
  border-color:var(--line);
}

.brand{
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 16px;
  font-family:var(--disp);
  font-size:17px;
  letter-spacing:.14em;
  color:#fff;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(120deg, rgba(255,0,128,.18), rgba(255,0,255,.1));
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.brand-mark{
  display:block;
  width:24px;
  height:24px;
  object-fit:contain;
}

.drop{position:relative}

.drop-btn{
  min-height:44px;
  padding:0 14px;
  font-family:var(--sans);
  font-size:15px;
  color:var(--dim);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.drop-btn:hover,
.drop-btn:focus-visible{color:#fff;background:rgba(255,0,128,.14)}

.drop-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  flex-direction:column;
  gap:2px;
  min-width:190px;
  padding:8px;
  display:none;
  background:rgba(23,14,20,.98);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 22px 44px rgba(0,0,0,.55);
}

.drop.open .drop-menu{display:flex}

@media (hover:hover){
  .drop:hover .drop-menu{display:flex}
}

/* 主视觉 */
.hero{
  max-width:1240px;
  margin:0 auto;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,6vw,68px) 20px 44px;
}

.hero-badge{
  align-self:flex-start;
  margin:0 0 18px;
  padding:5px 13px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.24em;
  color:#ffd6ec;
  background:rgba(255,0,128,.14);
  border:1px solid rgba(255,0,255,.42);
  border-radius:var(--r);
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  animation:float 7s ease-in-out infinite alternate;
}

@keyframes float{
  from{transform:translateY(-3px)}
  to{transform:translateY(4px)}
}

.hero h1{
  margin:0 0 28px;
  max-width:20ch;
  font-family:var(--disp);
  font-weight:900;
  font-size:clamp(2rem,6.2vw,4.1rem);
  line-height:1.24;
  letter-spacing:.02em;
  color:#fff;
  text-wrap:balance;
  word-break:break-word;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(102deg, #ffffff 4%, #ffb3dd 32%, var(--mag) 62%, var(--pink) 96%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}

.hero-art{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:radial-gradient(80% 90% at 30% 10%, rgba(255,0,128,.28), rgba(23,14,20,.9));
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

.hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(190deg, transparent 45%, rgba(255,0,255,.16));
  mix-blend-mode:screen;
}

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

/* 内容区 */
main{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:44px;
  align-items:start;
  max-width:1240px;
  margin:0 auto;
  padding:20px 20px 80px;
}

.rail{
  position:sticky;
  top:104px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(165deg, rgba(255,0,128,.1), rgba(23,14,20,.72));
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.rail-h{
  margin:2px 0 4px;
  font-family:var(--mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.26em;
  color:#ff8cc8;
}

.rail-h span{
  position:relative;
  display:inline-block;
  padding-left:13px;
}

.rail-h span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--pink);
  box-shadow:0 0 9px var(--pink);
}

.rail-list{
  list-style:none;
  counter-reset:rail;
  margin:0 0 6px;
  padding:0;
  display:flex;
  flex-direction:column;
}

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

.rail-list a{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-height:40px;
  padding:7px 3px;
  font-size:15px;
  line-height:1.5;
  color:var(--dim);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,0,128,.16);
  transition:color .16s ease;
}

.rail-list a::before{
  content:counter(rail, decimal-leading-zero);
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--mag);
}

.rail-list a:hover,
.rail-list a:focus-visible{color:#fff}

div{min-width:0}

div article{
  position:relative;
  margin:0 0 26px;
  padding:26px 24px 34px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(170deg, rgba(38,23,31,.92), rgba(21,13,18,.95));
  scroll-margin-top:118px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

div article::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg, var(--mag), var(--pink) 45%, transparent 92%);
}

div article:target{
  border-color:rgba(255,0,255,.6);
  box-shadow:0 0 0 1px rgba(255,0,255,.2), 0 18px 50px rgba(255,0,128,.14);
}

div h2{
  margin:0 0 16px;
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(1.32rem,3.3vw,1.72rem);
  line-height:1.45;
  letter-spacing:.02em;
  color:#fff;
}

div h2 span{
  position:relative;
  display:inline-block;
  padding-bottom:9px;
}

div h2 span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:48px;
  height:2px;
  background:var(--pink);
  box-shadow:0 0 8px var(--pink);
}

div h3{
  margin:24px 0 10px;
  font-size:1.15rem;
  line-height:1.5;
  color:#ffd8ee;
}

div p{
  max-width:66ch;
  margin:0 0 16px;
  color:#f0e2ec;
}

div ul,
div ol{
  max-width:66ch;
  margin:0 0 16px;
  padding-left:1.3em;
}

div li{margin:0 0 8px}

div a{
  color:#ffa2d7;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,0,128,.5);
}

div a:hover{color:#fff}

div strong{color:#fff}

div blockquote{
  margin:0 0 18px;
  padding:14px 18px;
  color:#f2dbe9;
  background:rgba(255,0,255,.07);
  border-left:3px solid var(--pink);
  border-radius:0 var(--r) var(--r) 0;
}

div blockquote p:last-child{margin:0}

div img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 0 16px;
  border-radius:var(--r);
}

div table{
  display:block;
  overflow-x:auto;
  width:100%;
  margin:0 0 18px;
  border-collapse:collapse;
  font-size:15.5px;
}

div th,
div td{
  padding:8px 10px;
  text-align:left;
  border:1px solid var(--line);
}

div th{background:rgba(255,0,128,.12);color:#fff}

div code{
  font-family:var(--mono);
  font-size:.92em;
  padding:1px 5px;
  border-radius:3px;
  background:rgba(255,0,255,.14);
}

/* 页脚 */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:22px 44px;
  max-width:1240px;
  margin:0 auto;
  padding:30px 20px 46px;
  border-top:1px solid var(--line);
}

.foot-name{
  margin:0;
  font-family:var(--disp);
  font-size:16px;
  letter-spacing:.18em;
  color:#fff;
}

.foot-desc{
  margin:6px 0 0;
  max-width:36ch;
  font-size:14px;
  line-height:1.7;
  color:var(--dim);
}

.foot-nav dl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 15px;
  margin:0;
}

.foot-nav dt{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.2em;
  color:var(--mag);
}

.foot-nav dd{margin:0}

.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 2px;
  font-size:14px;
  color:var(--dim);
  text-decoration:none;
}

.foot-nav a:hover,
.foot-nav a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}

.foot-legal p{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  color:#96798c;
}

/* 窄屏 */
@media (max-width:900px){
  main{display:block;padding:16px 16px 64px}

  .rail{
    position:static;
    margin-bottom:26px;
    padding:14px 14px 16px;
  }

  .rail-list{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
  }

  .rail-list li{flex:0 0 auto}

  .rail-list a{
    align-items:center;
    min-height:40px;
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:var(--r);
  }

  div article{padding:22px 16px 30px;scroll-margin-top:96px}
}

@media (max-width:720px){
  .topbar{position:static}

  .bar{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 14px 12px;
  }

  .brand{order:-1;justify-content:center;margin:0}

  .nav ul{justify-content:center;flex-wrap:wrap}

  .nav a{justify-content:center}

  .drop{display:flex;justify-content:center}

  .drop-menu{
    position:static;
    margin-top:8px;
    min-width:0;
    flex:1 1 100%;
    box-shadow:none;
  }

  .hero{min-height:auto;padding:26px 16px 34px}

  .hero h1{max-width:none}

  .foot{flex-direction:column;text-align:center;gap:18px;padding:26px 16px 40px}

  .foot-nav dl{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,
  .ticker-track,
  .hero-badge{animation:none !important}
}

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