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

:root{
  --ink:#001e3c;
  --deep:#00121f;
  --mint:#99ffcc;
  --neon:#00ff41;
  --text:#d8f5e9;
  --dim:#8db8ac;
  --line:rgba(153,255,204,.2);
  --rail:268px;
  --cond:"Barlow Condensed","Barlow","PingFang SC","Microsoft YaHei",sans-serif;
  --body:"Barlow","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}

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

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

body{
  margin:0;
  min-height:100vh;
  font:400 17px/1.75 var(--body);
  color:var(--text);
  background:
    radial-gradient(1100px 680px at 84% -10%,rgba(0,255,65,.13),transparent 62%),
    radial-gradient(880px 620px at 4% 92%,rgba(153,255,204,.1),transparent 64%),
    var(--deep);
  background-attachment:fixed;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 16px}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{margin:0;font-family:var(--cond);font-weight:600;line-height:1.16}
hr{border:0;height:1px;background:var(--line);margin:12px 0 16px}

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

/* ---------- 左栏 ---------- */
.rail{
  position:fixed;
  left:0;top:0;bottom:0;
  width:var(--rail);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 22px 22px;
  background:linear-gradient(180deg,rgba(0,30,60,.97),rgba(0,18,31,.99));
  border-right:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:6px 0;
  font-family:var(--cond);
  font-size:21px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--mint);
}
.brand .mark{flex:0 0 34px;width:34px;height:34px;color:var(--neon);display:block}
.mark-svg{width:100%;height:100%;display:block;animation:breathe 8s ease-in-out infinite}
.brand-name{display:block;line-height:1.1;max-width:9em}

.rail-nav{margin-top:4px}
.rail-nav ul{display:flex;flex-direction:column;gap:1px}
.rail-nav a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:9px 8px;
  font-size:16px;
  color:var(--dim);
  border-left:2px solid transparent;
  transition:color .25s,border-color .25s,background .25s;
}
.rail-nav a:hover,.rail-nav a:focus-visible{color:var(--mint);border-left-color:var(--neon);background:rgba(153,255,204,.06)}

.idx{font-family:var(--cond);font-size:13px;letter-spacing:.14em;color:var(--neon);min-width:19px}

.burger{
  margin-top:auto;
  min-height:48px;
  padding:12px 16px;
  border:0;
  cursor:pointer;
  font:600 16px/1 var(--body);
  color:var(--ink);
  background:var(--mint);
  clip-path:polygon(0 0,100% 0,100% 74%,90% 100%,0 100%);
  transition:background .25s,transform .25s;
}
.burger:hover{background:var(--neon);transform:translateY(-1px)}

/* ---------- 全屏遮罩菜单 ---------- */
.veil{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:78px 24px 40px;
  background:rgba(0,18,31,.975);
  transform:translateY(-102%);
  visibility:hidden;
  transition:transform .55s cubic-bezier(.22,.85,.24,1),visibility .55s;
}
.veil.open{transform:none;visibility:visible}
.veil ul{width:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.veil a{
  display:flex;
  align-items:center;
  min-height:52px;
  padding:13px 4px;
  font-family:var(--cond);
  font-size:clamp(24px,5vw,32px);
  border-bottom:1px solid var(--line);
  transition:color .2s,padding-left .25s;
}
.veil a:hover{color:var(--neon);padding-left:10px}
.veil-close{
  position:absolute;
  top:16px;right:18px;
  min-height:46px;
  padding:11px 20px;
  background:transparent;
  color:var(--mint);
  border:1px solid var(--line);
  font:500 16px var(--body);
  cursor:pointer;
}
.veil-close:hover{color:var(--neon);border-color:var(--neon)}

/* ---------- 主区 ---------- */
main{
  position:relative;
  z-index:1;
  margin-left:var(--rail);
  padding:0 clamp(18px,4vw,56px);
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:45vh;
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,38px);
  padding:clamp(30px,6vh,62px) 0 clamp(26px,5vh,52px);
  border-bottom:1px solid var(--line);
}
.hero-fig{
  position:relative;
  z-index:1;
  flex:0 0 clamp(74px,12vw,128px);
  width:clamp(74px,12vw,128px);
  aspect-ratio:1;
  margin:0;
}
.hero-fig svg{width:100%;height:100%;display:block;animation:breathe 7.5s ease-in-out infinite}
.hero-img{
  width:100%;height:100%;object-fit:cover;
  clip-path:polygon(14% 0,100% 6%,94% 88%,50% 100%,4% 82%,0 18%);
  filter:saturate(1.1);
}
.hero-copy{position:relative;z-index:1}
.hero h1{
  font-size:clamp(31px,6.1vw,72px);
  font-weight:700;
  letter-spacing:-.005em;
  color:#eafff5;
  max-width:20ch;
  text-shadow:0 0 38px rgba(0,255,65,.3);
}
.hero-ghost{
  position:absolute;
  left:-.05em;
  bottom:-.2em;
  z-index:0;
  font-family:var(--cond);
  font-size:clamp(56px,11vw,148px);
  font-weight:700;
  line-height:.78;
  white-space:nowrap;
  color:rgba(153,255,204,.085);
  pointer-events:none;
}

/* ---------- 正文区 ---------- */
.reading{
  display:grid;
  grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:clamp(22px,4vw,52px);
  align-items:start;
  padding:clamp(26px,5vh,50px) 0 0;
}

.toc{
  position:sticky;
  top:24px;
  padding:16px 15px 20px;
  background:rgba(0,30,60,.62);
  border-left:2px solid var(--neon);
  clip-path:polygon(0 0,100% 0,100% 95%,92% 100%,0 100%);
}
.toc h2{font-size:19px;letter-spacing:.14em;color:var(--mint)}
.toc hr{margin:9px 0 10px;background:rgba(153,255,204,.3)}
.toc a{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 5px;
  font-size:16px;
  color:var(--dim);
  border-bottom:1px dashed rgba(153,255,204,.13);
  transition:color .2s,padding-left .2s;
}
.toc a:hover,.toc a:focus-visible{color:var(--neon);padding-left:10px}

.body{max-width:76ch;min-width:0}
.body > article{
  padding:clamp(26px,4vh,44px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:36px;
}
.body > article:first-child{border-top:0;padding-top:0}
.body h2{font-size:clamp(25px,3.3vw,37px);color:#eafff5;margin:0}
.body h2 + hr{margin:11px 0 20px;background:linear-gradient(90deg,var(--neon),rgba(0,255,65,0))}
.body h3{font-size:21px;color:var(--mint);margin:26px 0 8px}
.body ul,.body ol{margin:0 0 18px;padding-left:0}
.body ul{list-style:none}
.body ul li{position:relative;padding-left:20px;margin-bottom:8px}
.body ul li::before{
  content:"";
  position:absolute;
  left:0;top:.68em;
  width:8px;height:8px;
  background:var(--neon);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.body ol{padding-left:1.35em;list-style:decimal}
.body ol li{margin-bottom:8px}
.body a{color:var(--neon);border-bottom:1px solid rgba(0,255,65,.4)}
.body a:hover{border-bottom-color:var(--neon)}
.body blockquote{
  margin:0 0 18px;
  padding:14px 18px;
  background:rgba(153,255,204,.07);
  border-left:3px solid var(--mint);
}
.body blockquote p:last-child{margin:0}
.body strong{color:#fff}
.body code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:15px;background:rgba(0,255,65,.12);padding:1px 5px}

/* ---------- 页脚 ---------- */
.foot{
  margin-left:var(--rail);
  margin-top:clamp(34px,7vh,70px);
  padding:clamp(34px,6vh,60px) clamp(18px,4vw,56px) 26px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,30,60,.4),rgba(0,18,31,0));
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,38px) clamp(14px,2.4vw,30px);
  font-size:16px;
}
.cta{
  grid-column:1/-1;
  padding-bottom:clamp(18px,3vh,30px);
  border-bottom:1px solid var(--line);
}
.cta h2{font-size:clamp(27px,5.2vw,56px);color:#eafff5;max-width:22ch}
.cta hr{margin:12px 0 18px;background:linear-gradient(90deg,var(--neon),rgba(0,255,65,0))}
.cta-btn{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:12px 28px;
  font:600 17px/1 var(--body);
  color:var(--ink);
  background:var(--neon);
  clip-path:polygon(0 0,100% 0,100% 76%,91% 100%,0 100%);
  transition:background .25s,transform .25s;
}
.cta-btn:hover{background:var(--mint);transform:translateY(-1px)}
.foot h3{font-size:15px;letter-spacing:.18em;color:var(--mint);margin-bottom:8px}
.foot p{color:var(--dim);margin:0 0 8px;word-break:break-word}
.foot ul li a{
  display:block;
  min-height:42px;
  padding:9px 0;
  color:var(--dim);
  transition:color .2s,padding-left .2s;
}
.foot ul li a:hover{color:var(--neon);padding-left:6px}
.copy{
  grid-column:1/-1;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--cond);
  font-size:15px;
  letter-spacing:.12em;
  color:rgba(141,184,172,.85);
}

/* ---------- 回到顶部 ---------- */
.totop{
  position:fixed;
  right:18px;bottom:18px;
  z-index:55;
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:11px 17px;
  font:500 15px/1 var(--body);
  color:var(--ink);
  background:var(--mint);
  clip-path:polygon(0 0,100% 0,100% 78%,89% 100%,0 100%);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s,transform .3s,background .25s;
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--neon)}

/* ---------- 动效 ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.85,.25,1)}
.rv.in{opacity:1;transform:none}

@keyframes breathe{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.06) rotate(2.2deg)}
}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  body{background-attachment:scroll}
  .rail{
    inset:0 0 auto 0;
    width:auto;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:8px 14px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .brand{font-size:18px;gap:8px;padding:4px 0}
  .brand .mark{flex:0 0 28px;width:28px;height:28px}
  .rail-nav{display:none}
  .burger{margin:0 0 0 auto;min-height:44px;padding:11px 18px;font-size:15px}
  main{margin-left:0;padding:0 16px;padding-top:62px}
  .hero{min-height:38vh;align-items:flex-start;padding:26px 0 30px;gap:14px}
  .hero h1{font-size:clamp(29px,8.2vw,42px);max-width:none}
  .hero-ghost{font-size:clamp(48px,17vw,96px);bottom:-.14em}
  .reading{grid-template-columns:minmax(0,1fr);gap:22px}
  .toc{position:static;order:2;clip-path:none}
  .toc ul{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .body > article{scroll-margin-top:84px}
  .body table{display:block;overflow-x:auto}
  .foot{margin-left:0;padding:30px 16px 92px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot ul li a{min-height:44px}
  .totop{right:14px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

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