@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');

:root{
  --g:#00ff80;
  --b:#0000ff;
  --ink:#000000;
  --fg:#f5f5f5;
  --dim:#a9bdb4;
  --line:#202020;
}

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

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding-bottom:150px;
  background:var(--ink);
  color:var(--fg);
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}

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

a{
  color:var(--g);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

a:focus-visible{outline:3px solid var(--b);outline-offset:3px;}

::selection{background:var(--g);color:#000;}

h1,h2,h3,h4{
  font-family:'Lora',Georgia,serif;
  font-weight:700;
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}

/* ---------- 底部固定条 ---------- */
.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  padding:8px 14px 10px;
  background:#000;
  border-top:4px solid var(--g);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:6px 2px;
  color:var(--g);
  font-family:'Lora',Georgia,serif;
  font-size:1.02rem;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.01em;
}

.brand-logo{width:34px;height:34px;border:2px solid var(--g);object-fit:cover;}

.bar-nav{margin-left:auto;}

.bar-nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-end;
}

.bar-nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 9px;
  color:var(--fg);
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  border:2px solid transparent;
}

.bar-nav a:hover,
.bar-nav a:focus{
  background:var(--b);
  border-color:var(--g);
  color:#fff;
}

.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  background:var(--g);
  color:#000;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  border:3px solid var(--g);
}

.cta:hover,.cta:focus{background:var(--b);color:#fff;border-color:var(--g);}

/* ---------- 头部区块 ---------- */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:70vh;
  padding-top:26px;
  background:#000;
  border-bottom:5px solid var(--g);
}

.hero-ghost{
  position:absolute;
  right:-.04em;
  top:-.1em;
  font-family:'Lora',Georgia,serif;
  font-weight:700;
  font-size:clamp(150px,44vw,430px);
  line-height:.78;
  color:transparent;
  -webkit-text-stroke:2px rgba(0,255,128,.4);
  pointer-events:none;
  will-change:transform;
}

.hero-txt{
  position:relative;
  padding:0 18px 22px;
  text-align:right;
}

.hero-txt h1{
  margin:0;
  font-size:clamp(30px,7vw,66px);
  color:#fff;
  text-shadow:4px 4px 0 rgba(0,0,255,.85);
}

.hero-lead{
  margin:14px 0 0 auto;
  max-width:44ch;
  font-size:1rem;
  line-height:1.65;
  color:var(--dim);
}

.hero-fig{margin:0;border-top:5px solid var(--b);}

.hero-img{
  width:100%;
  height:clamp(190px,36vh,400px);
  object-fit:cover;
  filter:contrast(1.08);
}

/* ---------- 主体 ---------- */
.wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
  max-width:1180px;
  margin:0 auto;
  padding:30px 18px 20px;
}

/* ---------- 左侧栏 ---------- */
.side{
  display:grid;
  gap:16px;
  padding:16px;
  background:#02030f;
  border:3px solid var(--b);
  align-self:start;
}

.side-block h2{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--g);
}

.side-block h2 span{
  display:inline-block;
  padding-bottom:3px;
  border-bottom:3px solid var(--g);
}

.side-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:1px;
}

.side-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:4px 6px;
  color:var(--fg);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px dashed #23234f;
}

.side-list a:hover,.side-list a:focus{background:var(--b);color:#fff;}

.side-top{margin:0;}

.side-top a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 6px;
  font-weight:700;
}

/* ---------- 正文 ---------- */
.doc{min-width:0;}

.doc > section{
  padding:30px 0 14px;
  border-top:4px solid var(--g);
  scroll-margin-top:22px;
  scroll-margin-bottom:200px;
}

.doc > section:first-child{border-top:0;padding-top:6px;}

.doc h2{
  font-size:clamp(23px,3.6vw,36px);
  border-left:11px solid var(--g);
  padding-left:14px;
  margin-bottom:.55em;
}

.doc h2 span,
.doc h3 span{
  background:linear-gradient(transparent 64%,rgba(0,255,128,.42) 64%);
}

.doc h3{
  font-size:clamp(19px,2.6vw,24px);
  color:var(--g);
}

.doc p{max-width:70ch;margin:0 0 1.05em;}

.doc ul,.doc ol{max-width:70ch;margin:0 0 1.2em;padding-left:1.5em;}

.doc li{margin:0 0 .5em;}

.doc li::marker{color:var(--g);font-weight:700;}

.doc strong{color:var(--g);font-weight:700;}

.doc blockquote{
  margin:0 0 1.3em;
  padding:14px 18px;
  background:#050505;
  border-left:8px solid var(--b);
  color:var(--fg);
}

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

.doc figure{margin:0 0 1.3em;}

.doc figcaption{
  padding-top:8px;
  font-size:1rem;
  color:var(--dim);
  border-top:2px solid var(--line);
}

.doc table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.3em;
  font-size:1rem;
}

.doc th,.doc td{
  border:2px solid var(--line);
  padding:9px 11px;
  text-align:left;
}

.doc th{background:var(--b);color:#fff;font-weight:700;}

.doc hr{border:0;border-top:4px solid var(--g);margin:26px 0;}

.doc code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:#111;
  border:2px solid var(--line);
  padding:1px 5px;
  font-size:.95em;
}

/* ---------- 页脚 ---------- */
footer{
  display:grid;
  gap:22px;
  margin-top:44px;
  padding:34px 18px 30px;
  border-top:5px solid var(--g);
  background:#020202;
}

footer p{margin:0;font-size:1rem;line-height:1.6;}

.foot-cta a{
  display:inline-block;
  padding:6px 16px;
  background:var(--g);
  color:#000;
  font-family:'Lora',Georgia,serif;
  font-size:clamp(24px,5vw,42px);
  font-weight:700;
  text-decoration:none;
  border:3px solid var(--g);
}

.foot-cta a:hover,.foot-cta a:focus{background:var(--b);color:#fff;}

.foot-brand{
  font-family:'Lora',Georgia,serif;
  font-size:1.15rem;
  color:var(--g);
  border-top:3px solid var(--b);
  padding-top:12px;
}

.foot-nav{
  display:flex;
  flex-wrap:wrap;
  gap:2px 10px;
  border-top:3px solid var(--line);
  padding-top:12px;
}

.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 4px;
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
}

.foot-nav a:hover,.foot-nav a:focus{background:var(--b);color:#fff;}

footer small{
  display:block;
  grid-column:1 / -1;
  padding-top:14px;
  font-size:1rem;
  color:var(--dim);
  border-top:2px solid var(--line);
}

/* ---------- 动效 ---------- */
html.js .stagger{opacity:0;}

html.js .stagger.in{
  opacity:1;
  animation:rise .34s steps(5,end) both;
  animation-delay:calc(var(--i,0) * 55ms);
}

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

/* ---------- 断点 ---------- */
@media (max-width:800px){
  body{padding-bottom:200px;}
  .bar-nav{flex-basis:100%;margin-left:0;}
  .bar-nav p{justify-content:flex-start;}
  .hero{min-height:auto;padding-top:34px;}
  .hero-txt h1{text-shadow:3px 3px 0 rgba(0,0,255,.85);}
  .doc > section{scroll-margin-bottom:230px;}
}

@media (min-width:900px){
  .wrap{
    grid-template-columns:255px minmax(0,1fr);
    gap:38px;
    padding-top:42px;
  }
  .side{position:sticky;top:20px;}
  footer{
    grid-template-columns:1.5fr 1fr 1.2fr;
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-left:18px;
    padding-right:18px;
  }
  .hero-txt{padding:0 34px 30px;}
}

@media (min-width:1200px){
  .wrap{gap:52px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js .stagger{opacity:1;}
  html.js .stagger.in{animation:none;}
  .hero-ghost{transform:none !important;}
}

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