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

:root{
  --ink:#000000;
  --g:#00ff80;
  --b:#0000ff;
  --fg:#f3fbf6;
  --dim:#a8c2b3;
  --soft:#123a28;
  --rail:264px;
  --side:168px;
}

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

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

body{
  margin:0;
  color:var(--fg);
  background-color:#000;
  background-image:radial-gradient(circle,rgba(0,255,128,.14) 1px,transparent 1px);
  background-size:20px 20px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.68;
  font-weight:400;
}

img{display:block;max-width:100%;height:auto;border:3px solid var(--g)}
a{color:var(--g)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--g);outline-offset:3px}

h1,h2,h3{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:700;
  line-height:1.08;
  margin:0;
  color:#fff;
  letter-spacing:-.01em;
}

small{
  display:block;
  font-family:Inter,system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.4;
}

/* ---------- 左侧固定栏 ---------- */

.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail);
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 14px 18px;
  background:#000;
  border-right:3px solid var(--g);
  overflow-y:auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:8px;
  border:3px solid var(--g);
  text-decoration:none;
  color:#fff;
  background:#000;
}
.brand:hover{background:var(--b)}
.brand .mark{width:34px;height:34px;flex:0 0 auto;object-fit:cover;border:0;filter:grayscale(1) contrast(1.3)}
.brandname{
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
}

.rail nav{min-width:0}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.menu li a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:9px 8px;
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid var(--soft);
  font-size:15px;
  font-weight:600;
  line-height:1.35;
}
.menu li a .n{width:10px;height:10px;flex:0 0 auto;background:var(--g)}
.menu li a:hover,.menu li a:focus-visible{background:var(--b);color:#fff}
.menu li a:hover .n{background:#fff}

.railtail{margin-top:auto;padding-top:12px}
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 12px;
  background:var(--b);
  color:#fff;
  border:3px solid var(--g);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
}
.cta:hover{background:var(--g);color:#000}

/* ---------- 主区 ---------- */

main{
  margin-left:var(--rail);
  padding:0 26px 0 0;
  display:grid;
}

section{
  grid-column:1;
  grid-row:1;
  min-width:0;
  max-width:880px;
  padding:0 0 64px;
}

/* ---------- 首屏 ---------- */

.hero{
  display:grid;
  border-bottom:4px solid var(--g);
  background:#000;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  padding:34px 0 26px;
  text-align:right;
}
.hero-copy::before{
  content:"";
  display:block;
  width:72px;
  height:10px;
  margin-left:auto;
  background:var(--g);
}

h1{
  font-size:clamp(2.1rem,5.4vw,4.2rem);
  text-wrap:balance;
  letter-spacing:-.025em;
}

.hero-desc{
  margin:0 0 0 auto;
  max-width:44ch;
  color:var(--dim);
  font-size:17px;
}

.hero-media{
  margin:0;
  min-height:38vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-top:3px solid var(--g);
  background:#050505;
}
.hero-media img{width:100%;height:100%;object-fit:cover;border:0}
.hero-media.fallback{
  background-image:radial-gradient(circle,rgba(0,255,128,.55) 2px,transparent 2px);
  background-size:16px 16px;
  min-height:34vh;
}

/* ---------- 正文区块 ---------- */

section > div:not(.hero){
  border-top:4px solid var(--g);
  padding:40px 0 8px;
  scroll-margin-top:22px;
}
section > div:not(.hero):nth-of-type(even){
  background:rgba(0,255,128,.04);
  padding-left:16px;
  padding-right:16px;
}
section > div:not(.hero) small{
  color:var(--g);
  margin-bottom:8px;
}
section > div:not(.hero) h2{
  font-size:clamp(1.55rem,3.2vw,2.35rem);
  margin-bottom:14px;
}
section > div:not(.hero) h3{
  font-size:1.28rem;
  color:var(--g);
  margin:26px 0 10px;
}
section > div:not(.hero) p{
  margin:0 0 16px;
  max-width:66ch;
  color:#dbe9e0;
}
section > div:not(.hero) ul,
section > div:not(.hero) ol{
  margin:0 0 18px;
  padding-left:1.4em;
  max-width:66ch;
}
section > div:not(.hero) li{margin-bottom:8px}
section > div:not(.hero) a{
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}
section > div:not(.hero) a:hover{background:var(--b);color:#fff;text-decoration:none}
section > div:not(.hero) strong{color:#fff}
section > div:not(.hero) img{margin:20px 0}
section > div:not(.hero) blockquote{
  margin:22px 0;
  padding:14px 18px;
  border-left:8px solid var(--b);
  background:#04070f;
  color:#e2ecff;
}
section > div:not(.hero) blockquote p:last-child{margin-bottom:0}
section > div:not(.hero) hr{border:0;border-top:3px dashed var(--soft);margin:26px 0}
section > div:not(.hero) table{width:100%;border-collapse:collapse;margin:20px 0;font-size:16px}
section > div:not(.hero) th,
section > div:not(.hero) td{border:2px solid var(--g);padding:8px 10px;text-align:left}
section > div:not(.hero) code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#0b0b0b;
  border:1px solid var(--soft);
  padding:1px 5px;
  font-size:15px;
}

/* ---------- 侧栏 ---------- */

.side{
  grid-column:1;
  grid-row:2;
  align-self:start;
  position:sticky;
  top:22px;
  margin:0 0 32px;
  padding:16px 14px 14px;
  background:var(--b);
  color:#fff;
  border:3px solid var(--g);
}
.side small{color:#cfd6ff}
.side h2{
  font-size:20px;
  margin:6px 0 12px;
  color:#fff;
}
.side-list{list-style:none;margin:0;padding:0;counter-reset:sec}
.side-list li a{
  display:block;
  min-height:44px;
  padding:9px 0;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.side-list li a::before{
  counter-increment:sec;
  content:counter(sec,decimal-leading-zero);
  color:var(--g);
  font-weight:700;
  margin-right:8px;
}
.side-list li a:hover{background:#000;color:var(--g)}
.totop{
  display:block;
  margin-top:12px;
  min-height:44px;
  padding:10px 0;
  color:var(--g);
  font-weight:700;
  text-decoration:none;
  border-top:3px solid var(--g);
}
.totop:hover{color:#fff}

/* ---------- 页脚 ---------- */

footer{
  margin-left:var(--rail);
  border-top:4px solid var(--g);
  background:#050505;
  display:grid;
  grid-template-columns:1fr;
}
footer > div{
  padding:28px 22px;
  border-bottom:2px solid var(--soft);
  min-width:0;
}
footer > div small{color:var(--g);margin-bottom:12px}
.fbrand{
  margin:0 0 10px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:24px;
  font-weight:700;
  line-height:1.15;
  color:#fff;
}
.fdesc{margin:0;max-width:36ch;color:var(--dim);font-size:15px}

.flinks{list-style:none;margin:0;padding:0}
.flinks li a{
  display:block;
  min-height:44px;
  padding:11px 0;
  color:var(--fg);
  text-decoration:none;
  font-size:15px;
  border-bottom:1px solid var(--soft);
}
.flinks li a:hover{color:var(--g);background:#000}

.sub{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.sub input{
  min-height:48px;
  padding:10px 12px;
  background:#000;
  color:#fff;
  border:3px solid var(--g);
  border-radius:0;
  font:inherit;
}
.sub input::placeholder{color:#7f9a8b}
.sub button{
  min-height:48px;
  padding:10px 14px;
  background:var(--g);
  color:#000;
  border:3px solid var(--g);
  border-radius:0;
  font:inherit;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
}
.sub button:hover{background:var(--b);color:#fff}

.flink{
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--g);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--soft);
}
.flink:hover{color:#fff}

.copy{
  grid-column:1/-1;
  margin:0;
  padding:18px 14px;
  text-align:center;
  font-size:14px;
  color:var(--dim);
  border-top:3px solid var(--g);
  background:#000;
}

/* ---------- 滚动显现 ---------- */

.rev-on .rev:not(.in){opacity:0;transform:translateY(12px)}
.rev-on .rev{transition:opacity .15s linear,transform .15s linear}

/* ---------- 中屏 ---------- */

@media (min-width:760px){
  footer{grid-template-columns:1.15fr 1fr 1.2fr}
  footer > div + div{border-left:2px solid var(--soft)}
}

/* ---------- 宽屏 ---------- */

@media (min-width:1080px){
  main{
    grid-template-columns:var(--side) minmax(0,1fr);
    column-gap:30px;
  }
  .side{grid-column:1;grid-row:1;margin:26px 0 32px}
  section{grid-column:2;grid-row:1;padding-top:26px}
  .hero{
    grid-template-columns:1fr 1fr;
    min-height:70vh;
  }
  .hero-copy{
    grid-column:2;
    grid-row:1;
    padding:48px 6px 48px 36px;
  }
  .hero-media{
    grid-column:1;
    grid-row:1;
    min-height:100%;
    border-top:0;
    border-right:4px solid var(--g);
  }
}

/* ---------- 移动端 ---------- */

@media (max-width:899px){
  .rail{
    position:sticky;
    inset:auto;
    top:0;
    width:100%;
    height:auto;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-right:0;
    border-bottom:3px solid var(--g);
    overflow:visible;
  }
  .brand{flex:0 0 auto;border-width:2px;padding:6px}
  .brand .mark{width:26px;height:26px}
  .brandname{display:none}
  .rail nav{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden}
  .menu{flex-direction:row;gap:6px}
  .menu li a{
    white-space:nowrap;
    padding:9px 10px;
    border:1px solid var(--soft);
  }
  .railtail{margin:0;padding:0;flex:0 0 auto}
  .cta{min-height:44px;padding:0 12px;border-width:2px}
  main{margin-left:0;padding:0}
  section{padding:0 16px 44px;max-width:none}
  .side{position:static;margin:0 16px 30px}
  footer{margin-left:0}
  section > div:not(.hero){scroll-margin-top:74px}
  .hero-copy{padding-top:24px;text-align:left}
  .hero-copy::before{margin-left:0}
  .hero-desc{margin-left:0}
  h1{font-size:clamp(1.95rem,8.4vw,2.9rem)}
}

@media (max-width:400px){
  body{font-size:16px}
  .menu li a{font-size:14px;padding:9px 8px}
}

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

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