@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap');

:root{
  --green:#00ff80;
  --blue:#0000ff;
  --ink:#000000;
  --paper:#eafff6;
  --dim:#8fb3a4;
  --edge:rgba(0,255,128,.42);
  --sans:'DM Sans','Nunito',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --round:'Nunito','DM Sans',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.75;
  padding-left:266px;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--green);}
ul,ol{list-style-position:outside;}

::selection{background:var(--green);color:var(--ink);}

:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:99;
  background:var(--green);
  color:var(--ink);
  font-weight:800;
  padding:12px 18px;
  text-decoration:none;
}
.skip:focus{left:10px;top:10px;}

/* ---------- 左侧竖排导航 ---------- */
.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:266px;
  height:100vh;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:22px 18px 26px;
  background:var(--ink);
  border-right:4px solid var(--blue);
  overflow-y:auto;
}

.rail-brand{
  display:flex;
  align-items:center;
  padding-bottom:14px;
  border-bottom:3px solid var(--green);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:none;
  color:var(--green);
  font-family:var(--round);
  font-weight:900;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.02em;
}

.brand-mark{
  width:32px;
  height:32px;
  border:3px solid var(--green);
  flex:0 0 auto;
}

.brand-txt{padding:2px 3px;}
.brand:hover .brand-txt,
.brand:focus-visible .brand-txt{background:var(--green);color:var(--ink);}

.rail-cap{
  margin:8px 0 0;
  font-size:15px;
  font-weight:800;
  letter-spacing:.24em;
  line-height:1.6;
  color:var(--dim);
  font-family:var(--sans);
}

.rail-cap > span{
  display:inline-block;
  border-bottom:3px solid var(--blue);
  padding-bottom:2px;
}

.rail-cap--c{
  margin-top:20px;
  padding-top:16px;
  border-top:3px solid var(--blue);
}

.rail-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}

.rail-nav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 10px;
  text-decoration:none;
  color:var(--paper);
  font-weight:700;
  border-bottom:2px solid rgba(0,255,128,.18);
}

.rail-nav a:hover,
.rail-nav a:focus-visible{background:var(--green);color:var(--ink);}

.rail-mail{margin:0;}

.rail-mail a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:9px 12px;
  font-weight:800;
  text-decoration:none;
  color:var(--green);
  border:2px solid var(--blue);
}

.rail-mail a:hover,
.rail-mail a:focus-visible{background:var(--blue);color:#fff;}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:hidden;
  padding:120px 44px 78px;
  border-bottom:6px solid var(--blue);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(0,255,128,.16),transparent 62%),
    var(--ink);
}

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

.hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.93));
}

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

.ghost{
  position:absolute;
  right:-.04em;
  top:7%;
  z-index:2;
  font-family:var(--round);
  font-weight:900;
  font-size:clamp(150px,29vw,420px);
  line-height:.8;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:3px rgba(0,255,128,.42);
  pointer-events:none;
  user-select:none;
}

.hero-edge{
  position:absolute;
  right:0;
  top:0;
  z-index:3;
  width:14px;
  height:100%;
  background:var(--green);
}

.hero-in{
  position:relative;
  z-index:4;
  max-width:780px;
  text-align:right;
}

.hero-title{
  margin:0 0 18px;
  font-family:var(--round);
  font-weight:900;
  font-size:clamp(38px,6.2vw,80px);
  line-height:1.03;
  letter-spacing:-.035em;
}

.hero-lede{
  margin:0;
  text-align:right;
  font-size:clamp(16px,1.45vw,19px);
  line-height:1.75;
  color:var(--paper);
  background:rgba(0,0,0,.62);
  border-right:6px solid var(--green);
  border-radius:18px 0 0 18px;
  padding:14px 18px;
}

/* ---------- 正文 ---------- */
.wrap{
  max-width:1020px;
  margin:0 auto;
  padding:46px 32px 22px;
}

.paper{
  border-left:6px solid var(--blue);
  padding-left:26px;
}

.prose{
  counter-reset:sec;
  font-size:17.5px;
  line-height:1.8;
}

.prose > div{
  position:relative;
  counter-increment:sec;
  margin:0 0 30px;
  padding:26px 24px 24px;
  border:2px solid var(--edge);
  border-radius:18px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  scroll-margin-top:100px;
}

.prose > div::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  font-family:var(--round);
  font-weight:900;
  font-size:44px;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--green);
  margin-bottom:12px;
}

.prose h2{
  margin:0 0 .62em;
  font-family:var(--round);
  font-weight:900;
  font-size:clamp(24px,3.3vw,34px);
  line-height:1.24;
  letter-spacing:-.015em;
}

.prose h2 > span{
  border-bottom:5px solid var(--blue);
  padding-bottom:2px;
}

.prose h3{
  margin:1.4em 0 .55em;
  font-family:var(--round);
  font-weight:800;
  font-size:21px;
  line-height:1.35;
}

.prose h3 > span{
  border-bottom:3px solid var(--green);
  padding-bottom:1px;
}

.prose p{margin:0 0 1.05em;}

.prose ul,
.prose ol{margin:0 0 1.1em;padding-left:1.35em;}

.prose li{margin:0 0 .42em;}

.prose li::marker{color:var(--green);font-weight:800;}

.prose a{
  text-decoration:underline;
  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 1.2em;
  padding:16px 20px;
  border-left:6px solid var(--blue);
  border-radius:0 18px 18px 0;
  background:rgba(0,0,255,.14);
}

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

.prose figure{margin:0 0 1.2em;}

.prose img{
  width:100%;
  border:3px solid var(--blue);
  border-radius:14px;
}

.prose figcaption{
  font-size:16px;
  color:var(--dim);
  padding-top:8px;
}

.prose hr{
  border:0;
  border-top:3px solid var(--blue);
  margin:1.6em 0;
}

.prose div > :last-child{margin-bottom:0;}

/* ---------- 页脚 ---------- */
footer{
  border-top:5px solid var(--green);
  background:var(--ink);
  padding:32px 32px 24px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px 24px;
}

footer p{margin:0;font-size:16px;line-height:1.7;}

.f-brand strong{
  font-family:var(--round);
  font-size:19px;
  font-weight:900;
  color:var(--green);
  letter-spacing:-.01em;
}

.f-col a{
  display:inline-block;
  min-height:44px;
  padding:8px 0;
  color:var(--paper);
  text-decoration:none;
  border-bottom:2px solid transparent;
}

.f-col a:hover,
.f-col a:focus-visible{color:var(--ink);background:var(--green);border-bottom-color:var(--blue);}

footer small{
  grid-column:1/-1;
  display:block;
  margin-top:14px;
  padding-top:14px;
  border-top:3px solid var(--blue);
  font-size:15px;
  color:var(--dim);
}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  body{padding-left:0;padding-top:64px;font-size:17px;}

  .rail{
    inset:0 0 auto 0;
    width:auto;
    height:auto;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-right:0;
    border-bottom:4px solid var(--blue);
    overflow:hidden;
  }

  .rail-brand{
    flex:0 0 auto;
    border-bottom:0;
    padding-bottom:0;
  }

  .brand{font-size:17px;gap:8px;}
  .brand-mark{width:26px;height:26px;}

  .rail-cap,
  .rail-mail{display:none;}

  .rail-nav{
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .rail-nav ul{display:flex;gap:6px;}

  .rail-nav a{
    white-space:nowrap;
    min-height:44px;
    padding:8px 10px;
    border-bottom:0;
    border-left:2px solid rgba(0,255,128,.32);
  }

  .hero{
    min-height:calc(100svh - 64px);
    padding:84px 20px 56px;
  }

  .hero-title{font-size:clamp(30px,8.6vw,44px);}

  .ghost{
    top:4%;
    font-size:clamp(120px,44vw,240px);
    -webkit-text-stroke-width:2px;
  }

  .hero-edge{width:9px;}
  .hero-lede{padding:12px 14px;}

  .wrap{padding:28px 16px 14px;}
  .paper{border-left:4px solid var(--blue);padding-left:12px;}

  .prose > div{
    padding:20px 16px;
    scroll-margin-top:84px;
  }

  .prose > div::before{font-size:32px;margin-bottom:8px;}

  footer{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:26px 16px 22px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-img,.ghost{transform:none !important;}
}

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