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

:root{
  --neon:#69ff69;
  --cyan:#00ffff;
  --ink:#172617;
  --ink2:#1d3220;
  --txt:#e2f7e7;
  --dim:#a3c9ab;
  --line:rgba(105,255,105,.22);
  --line2:rgba(0,255,255,.16);
  --chrome:linear-gradient(135deg,#f2fff6 0%,#a6ffbd 20%,#69ff69 40%,#dcfff1 54%,#00ffff 76%,#7dffe6 100%);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Poppins","Open Sans",system-ui,-apple-system,"Segoe UI","Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:1rem;line-height:1.7;color:var(--txt);
  background:
    radial-gradient(900px 520px at 10% -8%,rgba(0,255,255,.14),transparent 64%),
    radial-gradient(760px 460px at 94% 6%,rgba(105,255,105,.15),transparent 60%),
    var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--neon)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* 左侧竖排导航 */
.rail{
  position:fixed;inset:0 auto 0 0;width:220px;z-index:30;
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.3rem 1rem 1.5rem;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(23,38,23,.97),rgba(23,38,23,.9));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow-y:auto;
}
.rail::before{
  content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:var(--chrome);opacity:.85;
}
.brand{
  display:flex;align-items:center;min-height:44px;padding:.3rem 0;
  font-weight:700;font-size:1.45rem;letter-spacing:.06em;text-decoration:none;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-filter:drop-shadow(0 0 8px rgba(105,255,105,.55));
  filter:drop-shadow(0 0 8px rgba(105,255,105,.55));
}
.brand::after{content:"✦";font-size:.7em;margin-left:.35rem;color:var(--cyan);-webkit-text-fill-color:var(--cyan)}

.rail nav{display:flex;flex-direction:column;gap:.6rem}
.nav-group{display:flex;flex-wrap:wrap;gap:.2rem;margin:0}
.nav-label{
  display:block;width:100%;font-size:.8rem;letter-spacing:.24em;
  color:#7fd8a1;padding-left:.55rem;text-transform:none;
}
.rail nav a{
  display:inline-flex;align-items:center;min-height:42px;padding:.3rem .55rem;
  font-size:1rem;line-height:1.35;color:var(--txt);text-decoration:none;
  border:1px solid transparent;border-radius:var(--r);
}
.rail nav a:hover,.rail nav a:focus-visible{
  color:#0c1a10;background:var(--chrome);border-color:#c8ffd6;
  box-shadow:0 0 16px rgba(0,255,255,.4);
}
.rail nav a[aria-current="true"]{
  color:var(--cyan);border-color:var(--line2);background:rgba(0,255,255,.08);
  box-shadow:inset 0 0 12px rgba(0,255,255,.16);
}

.contact{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.5rem .9rem;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;color:#0b1a0e;
  background:var(--chrome);border:1px solid #c8ffd6;
  box-shadow:0 0 20px rgba(105,255,105,.45),inset 0 1px 0 #fff;
}
.contact:hover{box-shadow:0 0 28px rgba(0,255,255,.6),inset 0 1px 0 #fff}

/* 正文 */
main{padding:0 1.1rem 2.4rem;max-width:1180px}
main > article{padding:1.7rem 0;border-top:1px solid rgba(105,255,105,.15);scroll-margin-top:1.2rem}

.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;align-items:center;
  min-height:45vh;padding:1.4rem 0 1.8rem;border-top:0;
  border-bottom:1px solid var(--line2);text-align:center;
}
.hero-copy{margin:0}
.hero-title{
  margin:0 0 .55rem;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.24;letter-spacing:.02em;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-filter:drop-shadow(0 0 12px rgba(0,255,255,.4));
  filter:drop-shadow(0 0 12px rgba(0,255,255,.4));
}
.hero-lede{margin:0 auto;max-width:46ch;font-size:1rem;color:var(--dim)}
.hero-figure{
  margin:0;min-height:200px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line2);
  background:
    radial-gradient(120px 120px at 22% 26%,rgba(0,255,255,.55),transparent 70%),
    radial-gradient(90px 90px at 78% 70%,rgba(105,255,105,.5),transparent 70%),
    linear-gradient(135deg,rgba(0,255,255,.18),rgba(105,255,105,.14));
  display:flex;align-items:center;justify-content:center;
}
.hero-figure img{display:block;width:100%;height:100%;object-fit:cover}

main > article h2{margin:0 0 .8rem;font-size:1.32rem;line-height:1.35}
main > article h3{margin:1.2rem 0 .5rem;font-size:1.08rem}
main > article h2 > span,main > article h3 > span{
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-filter:drop-shadow(0 0 8px rgba(0,255,255,.42));
  filter:drop-shadow(0 0 8px rgba(0,255,255,.42));
}
main > article p{margin:0 0 .9rem}
main > article ul,main > article ol{margin:0 0 1rem;padding-left:1.25rem}
main > article li{margin:.28rem 0}
main > article a{color:var(--neon);text-underline-offset:3px}
main > article img{max-width:100%;height:auto;border-radius:var(--r)}
main > article figure{margin:1rem 0}
main > article blockquote{
  margin:1rem 0;padding:.7rem 1rem;border-left:3px solid var(--cyan);
  background:rgba(0,255,255,.07);border-radius:0 var(--r) var(--r) 0;
}
main > article table{width:100%;border-collapse:collapse;margin:0 0 1rem}
main > article th,main > article td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left}

/* 右侧栏 */
.side{
  margin-top:1.6rem;padding:1rem;border:1px solid var(--line2);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(0,255,255,.07),rgba(105,255,105,.04));
}
.side-title{margin:0 0 .55rem;font-size:1rem;letter-spacing:.08em;color:var(--cyan)}
.side-title span{border-bottom:2px solid var(--neon);padding-bottom:2px}
.side-links{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
.side-links a{
  display:inline-flex;align-items:center;min-height:42px;padding:.25rem .55rem;
  font-size:1rem;color:var(--txt);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);
}
.side-links a:hover{color:#0c1a10;background:var(--chrome);border-color:#c8ffd6}
.side-host{margin:0;font-size:.95rem;color:var(--dim);word-break:break-all}

/* 页脚 */
.foot{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.2rem;
  padding:1.8rem 1.1rem 1.2rem;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,255,255,.06),transparent);
}
.foot-col{
  margin:0;display:flex;flex-direction:column;gap:.35rem;
  font-size:1rem;color:var(--dim);
}
.foot-links{flex-flow:row wrap;align-items:flex-start;gap:.35rem}
.foot-col a{
  display:inline-flex;align-items:center;min-height:42px;padding:.15rem .5rem;
  color:var(--txt);text-decoration:none;border:1px solid var(--line);border-radius:var(--r);
}
.foot-col a:hover{color:#0c1a10;background:var(--chrome);border-color:#c8ffd6}
.foot-brand{
  font-weight:700;letter-spacing:.05em;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot-desc{font-size:.95rem;line-height:1.6}
.foot-copy{
  grid-column:1 / -1;font-size:.9rem;color:#8fb79a;
  border-top:1px dashed rgba(105,255,105,.2);padding-top:.7rem;
}

/* 动效 */
@keyframes popIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rail nav a,.side-links a{animation:popIn .45s ease both}
.rail nav a:nth-of-type(1){animation-delay:.04s}
.rail nav a:nth-of-type(2){animation-delay:.08s}
.rail nav a:nth-of-type(3){animation-delay:.12s}
.rail nav a:nth-of-type(4){animation-delay:.16s}
.rail nav a:nth-of-type(5){animation-delay:.2s}
.rail nav a:nth-of-type(6){animation-delay:.24s}
.rail nav a:nth-of-type(7){animation-delay:.28s}

.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.in{opacity:1;transform:none}

/* 宽屏栅格 */
@media (min-width:881px){
  body{padding-left:220px}
  main{
    display:grid;grid-template-columns:minmax(0,1fr) 15rem;
    column-gap:2.2rem;align-items:start;padding:0 2rem 3rem;
  }
  main > article{grid-column:1}
  main > article.hero{grid-column:1 / -1}
  .side{
    grid-column:2;grid-row:2 / span 40;align-self:start;
    position:sticky;top:1.2rem;
  }
  .foot{padding-left:2rem;padding-right:2rem}
}

/* 窄屏 */
@media (max-width:880px){
  .rail{
    position:sticky;inset:auto;top:0;width:auto;overflow:visible;margin-top:0;
    display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand contact" "nav nav";
    gap:.4rem .6rem;padding:.55rem .8rem .5rem;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .brand{grid-area:brand;font-size:1.2rem;min-height:44px}
  .contact{grid-area:contact;margin-top:0;font-size:.95rem;min-height:44px;padding:.4rem .85rem}
  .rail nav{
    grid-area:nav;flex-direction:row;gap:.25rem;padding-bottom:.15rem;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  }
  .rail nav::-webkit-scrollbar{display:none}
  .nav-group{flex-wrap:nowrap;gap:.25rem}
  .nav-label{display:none}
  .rail nav a{white-space:nowrap}
  main{padding:0 .9rem 2rem}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:1.1rem}
  .hero-figure{min-height:160px;order:2}
  .foot{grid-template-columns:1fr;padding-bottom:1rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .rail nav a,.side-links a{animation:none}
}

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