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

:root{
  --g:#87ff71;
  --c:#01cdfe;
  --p:#b967ff;
  --ink:#192617;
  --ink-2:#101a10;
  --txt:#dcecd8;
  --dim:#9db39a;
  --glass:rgba(135,255,113,.05);
  --glass-2:rgba(1,205,254,.055);
  --line:rgba(135,255,113,.22);
  --line-2:rgba(1,205,254,.28);
  --wrap:1120px;
  --dock-h:64px;
}

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

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

body{
  margin:0;
  padding-bottom:calc(var(--dock-h) + 18px);
  font-family:'Lexend','Source Sans 3',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.8;
  color:var(--txt);
  letter-spacing:.012em;
  overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 50% -12%,rgba(1,205,254,.20),transparent 62%),
    radial-gradient(820px 480px at 96% 4%,rgba(135,255,113,.12),transparent 60%),
    radial-gradient(700px 500px at 4% 42%,rgba(185,103,255,.10),transparent 62%),
    var(--ink);
  background-attachment:fixed,scroll,scroll,fixed;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  opacity:.42;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.30) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

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

a{color:var(--c);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--g)}

p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.32;letter-spacing:.01em}

:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:4px}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:20px;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-height:44vh;
  padding:8vh 20px 0;
  overflow:hidden;
  text-align:center;
}

.hero-sky{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  will-change:transform;
}

.sun{
  position:absolute;
  left:50%;
  top:6%;
  width:min(58vw,330px);
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,#c8ffae 0%,var(--g) 20%,var(--c) 58%,var(--p) 100%);
  filter:blur(1px) saturate(1.2);
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.25) 78%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.25) 78%,transparent 97%);
  animation:float 9s ease-in-out infinite alternate;
}

.floor{
  position:absolute;
  left:-32%;
  right:-32%;
  bottom:0;
  height:46%;
  opacity:.32;
  background-image:
    linear-gradient(rgba(1,205,254,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(135,255,113,.6) 1px,transparent 1px);
  background-size:100% 26px,54px 100%;
  transform:perspective(300px) rotateX(74deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 78%);
  mask-image:linear-gradient(180deg,transparent,#000 78%);
}

.haze{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(25,38,23,.92));
}

.hero-copy{
  position:relative;
  z-index:2;
  width:100%;
  max-width:860px;
  padding:26px 0 14px;
}

.mark{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 auto 14px;
  padding:5px 15px 5px 13px;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.3em;
  color:var(--g);
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(135,255,113,.07);
  backdrop-filter:blur(6px);
}

.mark .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 10px var(--g);
}

.hero h1{
  position:relative;
  margin:0;
  font-size:clamp(28px,6.4vw,54px);
  font-weight:600;
  line-height:1.2;
  color:#efffe6;
  text-shadow:0 0 18px rgba(135,255,113,.5),0 0 46px rgba(1,205,254,.32);
}

.hero h1::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:-1;
  color:var(--c);
  opacity:.6;
  clip-path:inset(0 0 58% 0);
  transform:translateX(-2px);
  animation:glitch 7s steps(1) infinite;
}

.hero-media{
  position:relative;
  z-index:2;
  width:100%;
  max-width:760px;
  margin-top:10px;
}

.hero-media img{
  width:100%;
  height:clamp(120px,21vh,210px);
  object-fit:cover;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:4px 4px 0 0;
  filter:saturate(1.15) contrast(1.04);
}

.slash{
  position:relative;
  z-index:2;
  width:100%;
  height:52px;
  background:linear-gradient(90deg,var(--g),var(--c) 56%,var(--p));
  clip-path:polygon(0 60%,100% 0,100% 100%,0 100%);
  opacity:.82;
}

/* ---------- 主列 ---------- */

main{padding-top:34px}

.cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  gap:34px;
  align-items:start;
  padding-bottom:50px;
}

.prose{min-width:0}

section{min-width:0}

section > article{
  position:relative;
  margin:0 0 24px;
  padding:26px 24px 22px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--glass);
  backdrop-filter:blur(9px);
  scroll-margin-top:26px;
  scroll-margin-bottom:calc(var(--dock-h) + 26px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.72,.3,1),border-color .25s ease;
}

section > article::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,var(--g),var(--c) 45%,transparent 92%);
  opacity:.75;
}

section > article:nth-child(even){
  background:var(--glass-2);
  border-color:var(--line-2);
}

section > article:nth-child(even)::before{
  background:linear-gradient(90deg,var(--c),var(--g) 45%,transparent 92%);
}

section > article:hover{border-color:rgba(135,255,113,.42)}

section > article.reveal{opacity:0;transform:translateY(18px)}
section > article.in{opacity:1;transform:none}

section h2{
  font-size:clamp(21px,3.4vw,27px);
  color:#eaffdf;
  margin-bottom:10px;
  text-shadow:0 0 14px rgba(135,255,113,.32);
}

section h3{
  font-size:19px;
  color:#e5f8e0;
  margin:26px 0 10px;
  padding-left:12px;
  border-left:3px solid var(--c);
}

section hr{
  height:2px;
  border:0;
  margin:0 0 18px;
  background:linear-gradient(90deg,var(--g),var(--c) 40%,rgba(1,205,254,0));
  opacity:.75;
}

section h3 + hr{margin-top:12px}

section ul,
section ol{margin:0 0 1.1em;padding-left:1.4em}
section li{margin:0 0 .5em}
section li::marker{color:var(--g)}

section strong{color:#f0ffe9;font-weight:600}

section blockquote{
  margin:22px 0;
  padding:16px 20px;
  border-left:3px solid var(--g);
  border-radius:0 4px 4px 0;
  background:rgba(135,255,113,.07);
  color:#e7f8e2;
}

section blockquote p:last-child{margin-bottom:0}

section code{
  padding:1px 6px;
  font-size:.92em;
  border-radius:4px;
  background:rgba(1,205,254,.14);
  color:#c9f6ff;
}

section table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.2em;
  font-size:16px;
}

section th,
section td{
  padding:10px 12px;
  border:1px solid var(--line);
  text-align:left;
}

section th{background:rgba(1,205,254,.12);color:#e6fbff}

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

.rail{
  position:sticky;
  top:26px;
  padding-left:20px;
  border-left:1px solid var(--line);
}

.rail-h{
  font-size:15px;
  letter-spacing:.22em;
  color:var(--g);
  margin-bottom:10px;
}

.rail hr{
  height:2px;
  border:0;
  margin:0 0 14px;
  background:linear-gradient(90deg,var(--c),transparent);
}

.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}

.rail-list li{margin:0 0 2px}

.rail-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:4px 10px;
  border:1px solid transparent;
  border-radius:4px;
  color:var(--txt);
  font-size:15px;
  line-height:1.4;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}

.rail-list a:hover,
.rail-list a.on{
  color:var(--g);
  background:rgba(135,255,113,.08);
  border-color:var(--line);
}

.rn{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--c);
  min-width:20px;
}

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

.foot{
  margin-top:26px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(1,205,254,.07),rgba(25,38,23,0) 62%);
  padding-top:42px;
}

.fgrid{
  display:grid;
  grid-template-columns:1.15fr 1.35fr 1fr;
  gap:28px;
  padding-bottom:28px;
}

.foot dl{margin:0}

.foot dt{
  font-size:13px;
  line-height:1.6;
  letter-spacing:.2em;
  color:var(--g);
  margin-bottom:10px;
}

.foot dd{
  margin:0;
  font-size:16px;
  line-height:1.65;
  color:var(--dim);
}

.f-brand dd{max-width:34em}

.f-nav dd a,
.f-meta dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:2px 0;
  color:var(--txt);
}

.f-nav dd a:hover,
.f-meta dd a:hover{color:var(--g)}

.f-bar{
  border-top:1px solid rgba(135,255,113,.13);
  padding:16px 20px;
  text-align:center;
  font-size:14px;
  color:var(--dim);
}

.f-bar p{margin:0}

/* ---------- 底部固定条 ---------- */

.dock{
  position:fixed;
  inset:auto 0 0 0;
  z-index:50;
  border-top:1px solid var(--line-2);
  background:rgba(16,26,16,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 -12px 34px rgba(0,0,0,.42);
}

.dock-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}

.dock-scroll::-webkit-scrollbar{display:none}

.dock-inner{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:6px;
  width:max-content;
  min-width:100%;
  min-height:var(--dock-h);
  padding:7px 12px;
}

.dock-side{
  display:flex;
  align-items:stretch;
  gap:2px;
}

.dock-a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:58px;
  min-height:48px;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:4px;
  color:var(--dim);
  font-size:14px;
  line-height:1.3;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}

.dock-a .ico{opacity:.75}

.dock-a:hover,
.dock-a.on{
  color:var(--g);
  background:rgba(135,255,113,.10);
  border-color:var(--line);
  text-shadow:0 0 12px rgba(135,255,113,.6);
}

.dock-a.on .ico{opacity:1}

.dock-brand{
  align-self:center;
  padding:0 16px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.16em;
  white-space:nowrap;
  color:var(--g);
  text-shadow:0 0 14px rgba(135,255,113,.55);
}

.dock-brand:hover{color:#eaffdf}

/* ---------- 动效 ---------- */

@keyframes float{
  from{transform:translateX(-50%) translateY(0)}
  to{transform:translateX(-50%) translateY(14px)}
}

@keyframes glitch{
  0%,88%,100%{transform:translateX(-2px)}
  90%{transform:translateX(3px)}
  92%{transform:translateX(-4px)}
  94%{transform:translateX(1px)}
}

/* ---------- 断点 ---------- */

@media (max-width:900px){
  .cols{
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }

  .rail{
    position:static;
    padding-left:0;
    padding-top:18px;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .rail-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
    gap:4px;
  }

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

  .f-brand{grid-column:1 / -1}
}

@media (max-width:620px){
  body{font-size:16px}

  .hero{min-height:42vh;padding-top:7vh}

  .hero-copy{padding:18px 0 12px}

  .mark{letter-spacing:.22em}

  section > article{padding:20px 16px 16px;margin-bottom:18px}

  .fgrid{grid-template-columns:1fr}

  .rail-list{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}

  .dock-inner{gap:2px;padding:7px 8px}

  .dock-a{min-width:54px;padding:6px 8px}

  .dock-brand{padding:0 10px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sun{animation:none}
  .hero h1::before{animation:none}
  section > article{transition:none}
  section > article.reveal{opacity:1;transform:none}
}

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