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

:root{
  --ink:#000000;
  --green:#00ff80;
  --blue:#0000ff;
  --w:#ffffff;
  --dim:#a8a8a8;
  --line:#1d1d1d;
  --edge:3px solid var(--green);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--w);
  font-family:Rubik,"Nunito Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;line-height:1.62;overflow-x:hidden;padding-bottom:78px;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--green)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;line-height:1.12;margin:0}
p{margin:0}
button{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.topline{height:8px;background:var(--green);border-bottom:3px solid var(--ink)}

/* ---------- 顶部 ---------- */
.top{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px 16px;background:var(--ink);border-bottom:var(--edge);
}
.logo{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--green);color:var(--ink);
  min-width:44px;min-height:44px;padding:6px 10px;font-weight:700;font-size:18px;line-height:1;border-radius:10px}
.logo-mark{display:block;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.find{display:flex;flex:1 1 180px;min-width:0;border:3px solid var(--green);border-radius:10px;overflow:hidden;background:#050505}
.find input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--w);
  padding:10px 12px;font-size:16px;min-height:44px;outline:none;
}
.find input::placeholder{color:#8a8a8a}
.find button{
  border:0;border-left:3px solid var(--green);background:var(--green);color:var(--ink);
  font-weight:700;font-size:16px;padding:0 14px;min-height:44px;cursor:pointer;
}
.burger{
  border:3px solid var(--green);border-radius:10px;background:var(--ink);color:var(--green);
  font-weight:700;font-size:16px;padding:0 16px;min-height:44px;cursor:pointer;
}
.topnav{flex:1 0 100%;order:5;overflow-x:auto;border-top:1px dashed #2a2a2a;padding-top:8px}
.topnav p{display:flex;gap:6px;flex-wrap:nowrap;margin:0;min-width:max-content}
.topnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;
  color:var(--w);text-decoration:none;font-size:16px;font-weight:500;
  border:2px solid #2a2a2a;border-radius:10px;white-space:nowrap;
}
.topnav a:hover,.topnav a:focus-visible{background:var(--green);color:var(--ink);border-color:var(--green)}
@media(min-width:860px){
  .top{gap:14px;padding:14px 24px}
  .topnav{flex:1 1 auto;order:0;border-top:0;padding-top:0;overflow:visible}
  .topnav p{min-width:0;flex-wrap:wrap}
}

/* ---------- 头图 ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:56px 18px 16vw;background:var(--blue);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8vw),0 100%);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media--blank{background:linear-gradient(140deg,var(--blue) 0%,#000 78%)}
.hero-shot{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25);opacity:.5}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.82) 72%)}
.hero-band{position:absolute;left:-5%;right:-5%;bottom:10%;height:14px;background:var(--green);
  transform:rotate(-2.2deg);z-index:2}
.hero-inner{position:relative;z-index:3;max-width:900px}
.eyebrow{
  display:inline-block;background:var(--green);color:var(--ink);
  font-weight:700;font-size:16px;letter-spacing:.14em;padding:3px 10px;margin-bottom:14px;
  text-transform:uppercase;
}
.hero h1{font-size:clamp(2.15rem,7.2vw,4.6rem);font-weight:700;line-height:1.03;text-wrap:balance}
.lead{margin-top:16px;max-width:36em;color:#e9e9e9;font-size:17px}
.hero-cta{margin-top:24px}
.btn{
  display:inline-flex;align-items:center;min-height:48px;padding:12px 26px;
  background:var(--green);color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;
  border:3px solid var(--green);border-radius:10px;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--green)}

/* ---------- 主体 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.panel{display:grid;grid-template-columns:1fr;gap:28px;padding:34px 0 46px}
.prose{min-width:0}
.prose section{padding:34px 0 30px;border-top:3px solid #131313}
.prose section:first-child{border-top:0;padding-top:6px}
.prose h2{
  font-size:clamp(1.45rem,4.4vw,2.05rem);margin:0 0 10px;
  border-left:9px solid var(--green);padding-left:13px;
}
.prose h3{font-size:clamp(1.15rem,3.2vw,1.35rem);margin:26px 0 8px;color:var(--green)}
.prose hr{border:0;border-top:5px solid var(--blue);width:76px;margin:0 0 20px}
.prose p{margin:0 0 17px;color:#e6e6e6}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose a{color:#fff;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{background:var(--green);color:var(--ink);text-decoration:none}
.prose strong{color:var(--green)}
.prose blockquote{margin:0 0 18px;padding:12px 16px;border:3px solid var(--blue);border-radius:10px;background:#080810}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;background:#111;border:1px solid #262626;padding:1px 5px}
.prose img{border:3px solid var(--green);border-radius:10px;margin:6px 0 18px}
.prose table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:16px}
.prose th,.prose td{border:2px solid #242424;padding:8px 10px;text-align:left}
.prose th{background:#0d0d0d;color:var(--green)}
.prose [id]{scroll-margin-top:22px}

/* 侧栏 */
.side{border:var(--edge);border-radius:10px;background:#050505;padding:16px;align-self:start}
.side h2{font-size:1.2rem;margin:0 0 8px}
.side hr{border:0;border-top:3px solid var(--blue);width:56px;margin:0 0 12px}
.side-links{display:grid;gap:4px}
.side-link{
  display:flex;align-items:center;min-height:44px;padding:8px 10px;
  color:#fff;text-decoration:none;font-size:16px;
  border:2px solid #1e1e1e;border-radius:10px;
}
.side-link:hover,.side-link:focus-visible{background:var(--green);color:var(--ink);border-color:var(--green)}
@media(min-width:960px){
  .panel{grid-template-columns:minmax(0,1fr) 300px;gap:38px;padding:48px 0 64px}
  .prose{grid-column:1;grid-row:1}
  .side{grid-column:2;grid-row:1;position:sticky;top:18px}
}

/* ---------- 页脚 ---------- */
.foot{
  display:grid;grid-template-columns:1fr;gap:16px;
  border-top:4px solid var(--green);padding:26px 18px 30px;background:#040404;
}
.cta{border:4px solid var(--green);border-radius:10px;background:var(--blue);padding:22px}
.cta-brand{font-size:clamp(1.8rem,8vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.02em;word-break:break-word}
.cta-link{margin-top:16px}
.cta-link a{
  display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;
  background:var(--green);color:var(--ink);text-decoration:none;font-weight:700;border-radius:10px;border:3px solid var(--green);
}
.cta-link a:hover,.cta-link a:focus-visible{background:var(--ink);color:var(--green)}
.f-brand{border-top:3px solid #171717;padding-top:14px}
.f-logo{font-size:1.5rem;font-weight:700;color:var(--green);line-height:1.2}
.f-desc{margin-top:8px;color:var(--dim);font-size:16px}
.f-links h2{font-size:1.15rem;margin:0 0 8px}
.f-links hr{border:0;border-top:3px solid var(--blue);width:52px;margin:0 0 10px}
.f-linkrow{display:flex;flex-wrap:wrap;gap:6px}
.f-link{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;
  color:#fff;text-decoration:none;font-size:16px;border:2px solid #222;border-radius:10px;
}
.f-link:hover,.f-link:focus-visible{background:var(--green);color:var(--ink);border-color:var(--green)}
.copy{border-top:1px solid #1c1c1c;padding-top:12px;color:#8d8d8d;font-size:16px}
@media(min-width:820px){
  .foot{grid-template-columns:1fr 1fr;padding:34px 24px 30px;gap:20px}
  .cta{grid-column:1 / -1}
  .copy{grid-column:1 / -1}
}

/* ---------- 底部固定条 ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 12px;background:var(--ink);border-top:3px solid var(--green);
}
.bar-logo,.bar-top,.bar-menu{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;
  font-weight:700;font-size:16px;text-decoration:none;border-radius:10px;border:3px solid var(--green);
  background:var(--ink);color:var(--green);
}
.bar-logo{background:var(--green);color:var(--ink);min-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:38vw}
.bar-menu{cursor:pointer}
.bar-top:hover,.bar-top:focus-visible,.bar-menu:hover,.bar-menu:focus-visible{background:var(--green);color:var(--ink)}

/* ---------- 全屏菜单 ---------- */
.menu{
  position:fixed;inset:0;z-index:90;display:none;flex-direction:column;
  padding:20px;background:var(--green);color:var(--ink);overflow-y:auto;
}
.menu[data-open="true"]{display:flex}
.menu-x{
  align-self:flex-end;min-height:44px;padding:8px 18px;cursor:pointer;
  border:3px solid var(--ink);background:var(--ink);color:var(--green);font-weight:700;border-radius:10px;
}
.menu-tag{margin:16px 0 6px;font-weight:700;letter-spacing:.14em;font-size:16px}
.menu-links{display:flex;flex-direction:column}
.menu-link{
  display:flex;align-items:center;min-height:52px;padding:8px 4px;
  color:var(--ink);text-decoration:none;font-weight:700;
  font-size:clamp(1.35rem,6.4vw,2.3rem);border-bottom:3px solid var(--ink);
}
.menu-link:hover,.menu-link:focus-visible{background:var(--ink);color:var(--green)}
body.menu-open{overflow:hidden}

/* ---------- 滚动出现 ---------- */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity 0ms linear,transform 0ms linear;
  transition-delay:calc(var(--i,0) * 60ms)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition-delay:0ms}
}

@media(min-width:960px){
  body{font-size:18px}
  .wrap{padding:0 24px}
}

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