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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:'Epilogue',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.7;
  padding-bottom:104px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:#00ff80;color:#000}

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

h1,h2,h3,h4{
  font-family:'Anton','Epilogue',system-ui,sans-serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:.5px;
  color:#fff;
  margin:0 0 12px;
}

p{margin:0 0 16px}

a{color:#00ff80;text-decoration:none}

a:hover,a:focus{background:#00ff80;color:#000}

a:focus-visible{outline:3px solid #00ff80;outline-offset:3px}

hr{border:0;border-top:4px solid #00ff80;margin:10px 0 20px}

ul,ol{margin:0 0 16px;padding-left:22px}

strong,b{color:#00ff80}

/* 底部固定条 */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"l b r";
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:#000;
  border-top:4px solid #00ff80;
}

.dock>nav{display:contents}

.dock-brand{
  grid-area:b;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:3px solid #00ff80;
  background:#000;
  color:#00ff80;
  font-family:'Anton',sans-serif;
  font-size:19px;
  letter-spacing:1px;
  white-space:nowrap;
}

.dock-brand:hover{background:#00ff80;color:#000}

.dock-mark{background:#00ff80;color:#000;padding:0 6px}

.dock-brand:hover .dock-mark{background:#000;color:#00ff80}

.dock ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}

.dock-l{grid-area:l;justify-content:flex-end}
.dock-r{grid-area:r;justify-content:flex-start}

.dock li a{
  display:flex;
  align-items:center;
  gap:7px;
  padding:12px 9px;
  font-size:16px;
  line-height:1.2;
  color:#fff;
}

.dock li a::before{
  content:"";
  width:7px;height:7px;
  flex:0 0 auto;
  background:#0000ff;
  border:2px solid #00ff80;
}

.dock li:nth-child(2n) a::before{background:#00ff80;border-color:#0000ff}

.dock li a:hover{background:#00ff80;color:#000}

.dock li a[aria-current]{background:#00ff80;color:#000}

.dock li a[aria-current]::before{background:#000;border-color:#000}

/* 首屏 */
.hero{
  position:relative;
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:92px 20px 72px;
  overflow:hidden;
  border-bottom:8px solid #00ff80;
  background:repeating-linear-gradient(135deg,#000 0 20px,#0b0b0b 20px 40px);
}

.hero-media{position:absolute;inset:0;z-index:0}

.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.12);
}

.hero::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,255,.62));
}

.hero-txt{position:relative;z-index:2;max-width:900px}

.hero h1{
  font-size:clamp(2.5rem,7.5vw,5.2rem);
  line-height:1.02;
  letter-spacing:1px;
  margin:0 0 18px;
  text-shadow:5px 5px 0 #0000ff;
  word-break:break-word;
}

.hero-sub{
  max-width:640px;
  margin:0 auto;
  color:#d9ffe9;
  font-size:1.02rem;
}

/* 主体骨架 */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:34px 20px 70px;
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:0;
  align-items:start;
}

/* 左栏 */
.side{
  border-right:4px solid #00ff80;
  padding:2px 18px 10px 0;
}

.side h2{
  font-size:17px;
  letter-spacing:4px;
  color:#00ff80;
  margin-bottom:8px;
}

.side hr{border-top-width:4px;margin:0 0 14px}

.toc{list-style:none;margin:0;padding:0;counter-reset:toc}

.toc li{counter-increment:toc;border-bottom:2px solid #0e3324}

.toc li a{
  display:block;
  padding:10px 6px;
  font-size:16px;
  line-height:1.35;
  color:#fff;
}

.toc li a::before{
  content:counter(toc,decimal-leading-zero);
  display:inline-block;
  margin-right:8px;
  padding:0 5px;
  font-family:'Anton',sans-serif;
  font-size:13px;
  letter-spacing:1px;
  color:#000;
  background:#00ff80;
}

.toc li a:hover{background:#00ff80;color:#000}

.toc li a[aria-current]{background:#00ff80;color:#000}

/* 正文 */
.body{min-width:0;padding-left:28px;counter-reset:sec}

.body>section{
  counter-increment:sec;
  padding:4px 0 30px;
  margin-bottom:34px;
  border-bottom:3px solid #00ff80;
  scroll-margin-top:24px;
}

.body>section:nth-child(even){border-bottom-color:#0000ff}

.body>section::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  width:max-content;
  margin-bottom:12px;
  padding:1px 9px;
  font-family:'Anton',sans-serif;
  font-size:14px;
  letter-spacing:3px;
  color:#000;
  background:#00ff80;
}

.body h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-bottom:6px}

.body h2+hr{border-top:6px solid #0000ff;margin:0 0 18px}

.body h3{font-size:1.22rem;color:#00ff80;margin-top:24px}

.body p,.body li{max-width:72ch}

.body ul,.body ol{padding-left:20px}

.body li{margin-bottom:8px}

.body a{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.body blockquote{
  margin:22px 0;
  padding:12px 16px;
  border-left:8px solid #0000ff;
  background:#050505;
}

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

/* 页脚 */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 22px;
  padding:28px 20px 32px;
  border-top:8px solid #00ff80;
  background:#000;
}

.f-brand a{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.7rem,4.4vw,2.8rem);
  line-height:1;
  letter-spacing:1px;
  color:#00ff80;
  text-shadow:4px 4px 0 #0000ff;
}

.f-nav{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:4px 2px;
  margin:0;
  padding:0;
}

.f-nav li a{
  display:block;
  padding:11px 8px;
  font-size:16px;
  line-height:1.25;
  color:#fff;
  border:2px solid #143a2b;
}

.f-copy{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  color:#00ff80;
}

.f-copy p{margin:0}

.totop{
  display:block;
  padding:11px 12px;
  border:2px solid #00ff80;
  color:#00ff80;
}

/* 滚动显现 */
html.rv .reveal{opacity:0;transform:translateY(12px)}

html.rv .reveal.in{
  opacity:1;
  transform:none;
  transition:opacity .18s linear,transform .18s linear;
}

/* 断点 */
@media (max-width:1000px){
  .wrap{grid-template-columns:minmax(0,1fr);padding-top:24px}
  .side{
    border-right:0;
    border-bottom:4px solid #00ff80;
    padding:0 0 16px;
    margin-bottom:28px;
  }
  .toc{display:flex;flex-wrap:wrap;gap:6px}
  .toc li{border-bottom:0;border:2px solid #143a2b}
  .toc li a{padding:10px 10px}
  .toc li a::before{display:none}
  .body{padding-left:0}
}

@media (max-width:760px){
  body{padding-bottom:188px}

  .dock{display:block;padding:5px 8px 7px}

  .dock>nav{display:flex;flex-wrap:wrap;justify-content:center}

  .dock ol{flex:1 1 100%;justify-content:center}

  .dock li a{padding:11px 6px;font-size:16px;justify-content:center}

  .dock li a::before{display:none}

  .dock-brand{margin:0 auto 6px;font-size:18px;padding:9px 12px}

  .hero{min-height:64vh;padding:70px 16px 52px}

  .hero h1{text-shadow:4px 4px 0 #0000ff}

  .foot{flex-direction:column;justify-content:center;text-align:center;padding:26px 16px 30px}

  .f-brand a{text-shadow:3px 3px 0 #0000ff}

  .f-nav{justify-content:center}

  .f-copy{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.rv .reveal{transition:none}
}

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