@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&display=swap');

:root{
  --neon:#00ff80;
  --blue:#0000ff;
  --ink:#000000;
  --fg:#e9fff2;
  --soft:#c4e3d3;
  --dim:#4d7a66;
  --rule:#123a2a;
  --pad:clamp(1rem,4vw,3.2rem);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --serif:"Playfair Display","Times New Roman",Times,serif;
  --body:"Source Serif 4",Georgia,"Songti SC",serif;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0;transition:none}

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

body{
  margin:0;
  background:#000;
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
}

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

a{color:var(--neon);text-decoration:none}
a:hover,a:focus-visible{background:var(--neon);color:#000;outline:none}

h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,7.2vw,5.2rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
h4{font-size:1.05rem;font-family:var(--mono);font-weight:500;letter-spacing:.06em}

small{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.28em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--neon);
}
small::before{
  content:"";
  display:inline-block;
  width:.6em;height:.6em;
  background:var(--blue);
  margin-right:.5em;
  vertical-align:baseline;
}

/* ---------- 顶部导航 ---------- */
.top{
  position:sticky;
  top:0;
  z-index:30;
  background:#000;
  border-bottom:3px solid var(--neon);
}
.bar{
  display:grid;
  grid-template-areas:"l logo r" "seek seek seek";
  grid-template-columns:1fr auto 1fr;
  margin:0;
}
.rail{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  margin:0;
  padding:0;
  list-style:none;
  grid-area:l;
}
.rail-l{justify-content:flex-start;border-right:2px solid var(--rule)}
.rail-r{grid-area:r;justify-content:flex-end;border-left:2px solid var(--rule)}
.rail > li{position:relative;display:flex;align-items:stretch}
.rail > li > a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:.35rem .65rem;
  font-family:var(--mono);
  font-size:16px;
  line-height:1.2;
  color:var(--fg);
  border-right:1px dotted var(--dim);
}
.rail-r > li > a{border-right:0;border-left:1px dotted var(--dim)}

.drop{position:relative}
.drop summary{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:.35rem .55rem;
  font-family:var(--mono);
  font-size:16px;
  color:var(--neon);
  cursor:pointer;
  list-style:none;
  border-right:1px dotted var(--dim);
}
.drop summary::-webkit-details-marker{display:none}
.drop summary::after{content:"+";margin-left:.4rem;color:var(--blue);font-weight:500}
.drop[open] summary::after{content:"−"}
.drop summary:hover{background:var(--neon);color:#000}
.sub{
  position:absolute;
  left:0;
  top:100%;
  z-index:40;
  min-width:13rem;
  margin:0;
  padding:0;
  list-style:none;
  background:#000;
  border:3px solid var(--neon);
}
.sub li{border-bottom:2px solid var(--rule)}
.sub li:last-child{border-bottom:0}
.sub a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.3rem .8rem;
  font-family:var(--mono);
  font-size:16px;
  color:var(--fg);
}

.logo{
  grid-area:logo;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1.1rem;
  background:var(--neon);
  color:#000;
  font-family:var(--serif);
  font-weight:900;
  font-size:1rem;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  border-left:3px solid #000;
  border-right:3px solid #000;
}
.logo:hover,.logo:focus-visible{background:var(--blue);color:#fff}

.seek{grid-area:seek;display:flex;border-top:2px solid var(--rule)}
.seek input{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  padding:.4rem .8rem;
  background:#000;
  color:var(--fg);
  border:0;
  font-family:var(--mono);
  font-size:16px;
}
.seek input::placeholder{color:var(--dim)}
.seek button{
  min-height:44px;
  padding:0 1.1rem;
  background:var(--blue);
  color:#fff;
  border:0;
  border-left:3px solid var(--neon);
  font-family:var(--mono);
  font-size:16px;
  cursor:pointer;
}
.seek button:hover,.seek button:focus-visible{background:var(--neon);color:#000}

/* ---------- 主体骨架 ---------- */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  align-items:start;
  border-bottom:4px solid var(--neon);
}
.doc{min-width:0}

/* ---------- 头版 ---------- */
.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:calc(100vh - 100px);
  border-bottom:4px solid var(--neon);
}
.hero-txt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.1rem;
  padding:var(--pad);
  position:relative;
}
.hero-txt h1{margin:0;max-width:14ch}
.lede{
  margin:0;
  max-width:42ch;
  font-size:1.05rem;
  color:var(--soft);
  border-left:4px solid var(--blue);
  padding-left:1rem;
}
.acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.cta{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:.55rem 1.2rem;
  background:var(--neon);
  color:#000;
  font-family:var(--mono);
  font-size:16px;
  font-weight:500;
  border:3px solid var(--neon);
}
.cta.alt{background:#000;color:var(--neon)}
.cta:hover,.cta:focus-visible{background:var(--blue);color:#fff;border-color:var(--blue)}
.cta.alt:hover,.cta.alt:focus-visible{background:#fff;color:#000;border-color:#fff}

.badge{
  align-self:flex-start;
  padding:.35rem .7rem;
  background:var(--blue);
  color:#fff;
  border:3px solid var(--neon);
  letter-spacing:.16em;
  font-size:.78rem;
  transform-origin:left center;
  animation:jolt 2.6s steps(2,end) infinite;
}
@keyframes jolt{
  0%,100%{transform:rotate(-2.5deg)}
  50%{transform:rotate(1.5deg)}
}

.hero-fig{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:260px;
  background:var(--blue);
  border-left:4px solid var(--neon);
}
.hero-fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}

/* ---------- 正文章节 ---------- */
section > div{
  padding:2.4rem var(--pad);
  border-top:4px solid var(--neon);
  scroll-margin-top:130px;
}
section > div:nth-of-type(even){background:#040b07}
section > div > h2{max-width:26ch;margin-bottom:.7em}
section > div h3{margin-top:1.6em}
section > div p{max-width:66ch;margin:0 0 1rem}
section > div ul,section > div ol{max-width:66ch;padding-left:1.4rem;margin:0 0 1rem}
section > div li{margin-bottom:.4rem}
section > div a{border-bottom:2px solid #2d6b52}
section > div img{margin:1.2rem 0;border:3px solid var(--neon)}
section > div blockquote{
  margin:1.2rem 0;
  padding:.5rem 1.1rem;
  background:#040b07;
  border-left:6px solid var(--blue);
  color:var(--soft);
}
section > div table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.96rem}
section > div th,section > div td{border:2px solid var(--neon);padding:.5rem .6rem;text-align:left}
section > div th{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
section > div strong{color:#fff}

/* ---------- 右侧栏 ---------- */
.side{
  position:sticky;
  top:100px;
  max-height:calc(100vh - 110px);
  overflow:auto;
  border-left:4px solid var(--neon);
  background:#040b07;
  padding:1.4rem 1.1rem 1.8rem;
}
.toc h2{font-size:1.15rem;margin:.25rem 0 .9rem;word-break:break-word}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;border-bottom:2px solid var(--rule)}
.toc a{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  padding:.3rem .1rem;
  font-family:var(--mono);
  font-size:16px;
  line-height:1.2;
  color:var(--fg);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  color:var(--neon);
  font-size:.78rem;
  letter-spacing:.05em;
}
.side-note{margin-top:1.7rem;border-top:4px solid var(--blue);padding-top:1rem}
.side-note h3{font-size:1.05rem;margin:.3rem 0 .7rem}
.side-note ul{list-style:none;margin:0;padding:0}
.side-note a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.3rem 0;
  font-family:var(--mono);
  font-size:16px;
  border-bottom:2px dotted var(--rule);
}

/* ---------- 页脚 ---------- */
.colophon{border-top:4px solid var(--neon);background:#000;padding:2rem var(--pad) 1.2rem}
.foot-top{
  display:grid;
  grid-template-columns:1fr minmax(0,420px);
  gap:1rem;
  align-items:end;
  padding-bottom:1.4rem;
  border-bottom:3px solid var(--blue);
}
.foot-top h2{font-size:clamp(1.15rem,3vw,1.8rem);margin:.3rem 0 0}
.sub{display:flex}
.sub input{
  flex:1 1 auto;
  min-width:0;
  min-height:46px;
  padding:.4rem .8rem;
  background:#000;
  color:var(--fg);
  border:3px solid var(--neon);
  border-right:0;
  font-family:var(--mono);
  font-size:16px;
}
.sub input::placeholder{color:var(--dim)}
.sub button{
  min-height:46px;
  padding:0 1.1rem;
  background:var(--neon);
  color:#000;
  border:3px solid var(--neon);
  font-family:var(--mono);
  font-size:16px;
  font-weight:500;
  cursor:pointer;
}
.sub button:hover,.sub button:focus-visible{background:var(--blue);color:#fff;border-color:var(--blue)}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:1.5rem 0 1.2rem;
}
.foot-cols dl{
  margin:0;
  padding:0 1rem;
  border-left:3px solid var(--rule);
}
.foot-cols dl:first-child{padding-left:0;border-left:0}
.foot-cols dt{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:.6rem;
}
.foot-cols dd{margin:0;font-size:.95rem;color:var(--soft);word-break:break-word}
.foot-cols ol{list-style:none;margin:0;padding:0}
.foot-cols li a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.15rem 0;
  font-family:var(--mono);
  font-size:16px;
  line-height:1.2;
}
.copy{
  margin:0;
  padding:1rem 0 0;
  border-top:3px solid var(--neon);
  text-align:center;
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--soft);
}
.copy a{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem}

/* ---------- 断点 ---------- */
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{
    position:static;
    max-height:none;
    overflow:visible;
    border-left:0;
    border-top:4px solid var(--neon);
  }
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding-top:2rem;padding-bottom:2rem}
  .hero-fig{border-left:0;border-top:4px solid var(--neon);min-height:230px}
  .foot-top{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .foot-cols dl{border-left:0;border-top:2px solid var(--rule);padding:.8rem 0}
  .foot-cols dl:first-child{padding-left:0}
}

@media (max-width:760px){
  .bar{
    grid-template-areas:"logo logo" "l r" "seek seek";
    grid-template-columns:1fr 1fr;
  }
  .logo{border-left:0;border-right:0;border-bottom:3px solid #000}
  .rail-l{border-right:2px solid var(--rule)}
  .rail > li > a,.drop summary{font-size:16px;padding:.3rem .45rem}
  .sub{position:static;border:0;border-left:3px solid var(--neon);min-width:0}
  .sub a{border-bottom:2px solid var(--rule)}
  section > div{padding-left:1rem;padding-right:1rem;scroll-margin-top:170px}
  .colophon{padding-left:1rem;padding-right:1rem}
}

@media (prefers-reduced-motion:reduce){
  .badge{animation:none}
  html{scroll-behavior:auto}
}

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