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

:root{
  --mint:#69ff69;
  --cyan:#00ffff;
  --ink:#172617;
  --line:rgba(105,255,105,.34);
  --linec:rgba(0,255,255,.36);
  --txt:#dcf7e6;
  --dim:#a7ccb6;
  --rail:200px;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --chrome:linear-gradient(180deg,#f4fff8 0%,#c2f7d6 38%,#62c79a 52%,#e9fff5 68%,#9fdcc0 100%);
}

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

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

body{
  margin:0;
  overflow-x:hidden;
  font-family:'Exo',system-ui,-apple-system,'Segoe UI','Noto Sans SC',sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--txt);
  background-color:var(--ink);
  background-image:
    radial-gradient(62vw 44vh at 88% -6%,rgba(0,255,255,.18),transparent 72%),
    radial-gradient(56vw 46vh at 2% 92%,rgba(105,255,105,.15),transparent 72%),
    linear-gradient(180deg,#1a2b1a 0%,#141f14 55%,#0c140c 100%);
  background-attachment:fixed;
}

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

a{color:var(--mint);text-decoration:none}

h1,h2,h3{line-height:1.2;margin:0 0 .55em;font-weight:600}

h1,h2{
  background:var(--chrome);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 9px rgba(105,255,105,.32));
}

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

/* 顶部细条 */
.topline{
  position:fixed;
  inset:0 0 auto 0;
  height:48px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border-bottom:1px solid var(--linec);
  background:linear-gradient(90deg,rgba(20,32,20,.97),rgba(20,32,20,.76));
  backdrop-filter:blur(8px);
}

.brandmark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 6px;
  border-radius:50%;
  border:1px solid var(--mint);
  background:linear-gradient(180deg,#eafff2,#9fe8c0 45%,#3f7f63 55%,#d9ffe9);
  color:#0b2016;
  font-family:var(--mono);
  font-weight:700;
  animation:glow 4.5s ease-in-out infinite;
}

.mark-img{width:34px;height:34px;object-fit:contain;border-radius:50%}
.marktxt{font-size:11px;line-height:1;white-space:nowrap;letter-spacing:0}

.slogan{
  margin:0;
  min-width:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tick{
  margin-left:auto;
  flex:0 0 auto;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(0,255,255,.9);
  animation:blink 2.4s steps(1) infinite;
}

/* 左侧竖排导航 */
.rail{
  position:fixed;
  left:0;top:48px;bottom:0;
  width:var(--rail);
  z-index:55;
  padding:18px 12px;
  overflow-y:auto;
  border-right:1px dashed var(--line);
  background:linear-gradient(180deg,rgba(12,20,12,.72),rgba(12,20,12,.28));
}

.railbtn{display:none}

.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

.menu li{animation:rise .45s both}
.menu li:nth-child(1){animation-delay:.04s}
.menu li:nth-child(2){animation-delay:.09s}
.menu li:nth-child(3){animation-delay:.14s}
.menu li:nth-child(4){animation-delay:.19s;margin-top:10px;padding-top:10px;border-top:1px dotted var(--linec)}
.menu li:nth-child(5){animation-delay:.24s}
.menu li:nth-child(6){animation-delay:.29s}
.menu li:nth-child(7){animation-delay:.34s}

.menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  font-size:16px;
  color:var(--txt);
  border:1px solid transparent;
  border-radius:10px;
  transition:background .22s,color .22s,border-color .22s;
}

.menu a:hover,
.menu a:focus-visible{
  color:#0b2016;
  border-color:var(--mint);
  background:var(--chrome);
}

.menu a.on{
  color:var(--cyan);
  border-color:var(--linec);
  background:rgba(0,255,255,.09);
  text-shadow:0 0 10px rgba(0,255,255,.5);
}

/* 主区 */
main{
  margin-left:var(--rail);
  padding:76px 28px 64px;
}

.hero,.stage{max-width:1160px;margin-inline:auto}

main div{scroll-margin-top:78px}

/* 首屏 */
.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:center;
  min-height:calc(100svh - 140px);
  padding:20px 0 48px;
}

.hero-txt{position:relative}

.badge{
  display:inline-block;
  margin:0 0 18px;
  padding:5px 15px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  color:var(--cyan);
  border:1px solid var(--linec);
  border-radius:999px;
  background:rgba(0,255,255,.08);
  text-shadow:0 0 10px rgba(0,255,255,.65);
  animation:float 5.5s ease-in-out infinite;
}

.hero h1{font-size:clamp(30px,4.6vw,56px);margin:0 0 16px}

.lead{margin:0;max-width:46ch;color:var(--dim)}

.hero-art{
  position:relative;
  margin:0;
  aspect-ratio:4/3;
  border:1px solid var(--linec);
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(150deg,rgba(0,255,255,.16),rgba(105,255,105,.1));
  transform:translateY(calc(var(--py,0) * 1px));
  will-change:transform;
}

.hero-art::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(circle at 18% 26%,#fff 0 1.3px,transparent 1.4px),
    radial-gradient(circle at 68% 62%,#fff 0 1px,transparent 1.1px),
    radial-gradient(circle at 44% 84%,#00ffff 0 1.2px,transparent 1.3px);
  background-size:96px 96px,132px 132px,164px 164px;
}

.hero-img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.06)}

.orb{
  position:absolute;
  inset:14% 16%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#f6fffa,#bdf5d2 34%,#54d295 61%,#14503a 100%);
  filter:drop-shadow(0 0 28px rgba(0,255,255,.45));
}

.orb::after{
  content:'';
  position:absolute;
  left:18%;top:14%;
  width:26%;height:18%;
  border-radius:50%;
  background:linear-gradient(120deg,rgba(255,255,255,.92),rgba(255,255,255,.1));
  filter:blur(2px);
}

/* 正文 + 右侧 aside */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 226px;
  gap:30px;
  align-items:start;
  padding:8px 0 48px;
}

.doc div{
  margin:0 0 22px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(158deg,rgba(105,255,105,.07),rgba(0,255,255,.05));
  animation:rise .5s both;
}

.doc div:nth-child(1){animation-delay:.02s}
.doc div:nth-child(2){animation-delay:.06s}
.doc div:nth-child(3){animation-delay:.1s}
.doc div:nth-child(4){animation-delay:.14s}
.doc div:nth-child(5){animation-delay:.18s}
.doc div:nth-child(6){animation-delay:.22s}
.doc div:nth-child(7){animation-delay:.26s}

.doc h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:.5em}
.doc h3{font-size:19px;color:var(--mint);margin-top:1.3em}

.doc h2 + p,.doc h3 + p{margin-top:.2em}

.doc small,
.jump small{
  display:block;
  margin:0 0 6px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,255,255,.45);
}

.doc p{margin:0 0 1em}
.doc p:last-child{margin-bottom:0}

.doc a{border-bottom:1px solid var(--linec)}

.doc ul,.doc ol{padding-left:1.35em;margin:0 0 1em}
.doc li{margin:0 0 .4em}

.doc time,.doc .date{
  font-family:var(--mono);
  font-size:14px;
  color:var(--dim);
}

.doc blockquote{
  margin:1em 0;
  padding:10px 16px;
  border-left:3px solid var(--cyan);
  background:rgba(0,255,255,.06);
  border-radius:0 10px 10px 0;
  color:#c6f0dc;
}

.doc table{width:100%;border-collapse:collapse;margin:1em 0;font-size:16px}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left}

.doc img{border:1px solid var(--linec);border-radius:10px;margin:1em 0}

.jump{
  position:sticky;
  top:70px;
  padding:16px;
  border:1px solid var(--linec);
  border-radius:10px;
  background:linear-gradient(160deg,rgba(0,255,255,.11),rgba(23,38,23,.6));
}

.jump h2{font-size:18px;margin:0 0 10px}

.jump ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

.jump a{
  display:block;
  padding:8px 6px;
  font-size:16px;
  color:var(--txt);
  border-bottom:1px dotted rgba(105,255,105,.22);
}

.jump a:hover,.jump a:focus-visible{color:var(--cyan)}

.jump li:last-child a{border-bottom:0}

/* 页脚 */
footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:26px 28px 44px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,20,12,.2),rgba(12,20,12,.6));
}

.f-brand{flex:0 0 auto}

.f-mark{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--mint);
  border-radius:999px;
  color:#0b2016;
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  background:var(--chrome);
}

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

.f-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:6px 12px;
  font-size:15px;
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:999px;
}

.f-nav a:hover,.f-nav a:focus-visible{color:#0b2016;background:var(--chrome);border-color:var(--mint)}

.f-copy{font-family:var(--mono);font-size:14px;color:var(--dim)}

/* 动效 */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 4px rgba(105,255,105,.5))}50%{filter:drop-shadow(0 0 13px rgba(0,255,255,.75))}}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}

@media (max-width:960px){
  .rail{
    top:auto;bottom:0;left:0;right:0;
    width:auto;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    border-right:0;
    border-top:1px solid var(--linec);
    background:rgba(12,20,12,.97);
    backdrop-filter:blur(8px);
  }

  .railbtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    font-family:var(--mono);
    font-size:16px;
    letter-spacing:.2em;
    color:var(--mint);
    background:transparent;
    border:1px solid var(--line);
    border-radius:10px;
  }

  .menu{display:none;margin-top:8px;max-height:56vh;overflow-y:auto}
  .rail.open .menu{display:flex}

  main{margin-left:0;padding:64px 16px 132px}

  .hero{grid-template-columns:1fr;min-height:0;gap:22px;padding:10px 0 30px}

  .hero h1{font-size:clamp(28px,8.4vw,40px)}

  .stage{grid-template-columns:1fr;gap:22px}

  .jump{position:static}

  .doc div{padding:18px}

  footer{flex-direction:column;align-items:flex-start;padding:24px 16px 40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-art{transform:none}
}

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