@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');

:root{
  --neon:#69ff69;
  --cyan:#00ffff;
  --ink:#172617;
  --void:#08130a;
  --card:#101f10;
  --txt:#e2f6e2;
  --dim:#a9c9ab;
  --line:rgba(105,255,105,.26);
  --chrome:linear-gradient(180deg,#ffffff,#d7e2da 36%,#93a89b 52%,#ffffff 74%,#a5b6ab);
}

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

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

body{
  margin:0;
  font-family:Merriweather,Georgia,"Songti SC","Times New Roman",serif;
  font-size:17px;
  line-height:1.8;
  color:var(--txt);
  background-color:var(--void);
  background-image:
    radial-gradient(circle at 50% -8%, rgba(0,255,255,.16), transparent 52%),
    radial-gradient(circle at 88% 6%, rgba(105,255,105,.17), transparent 46%),
    radial-gradient(rgba(105,255,105,.13) 1px, transparent 1px);
  background-size:auto,auto,18px 18px;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--neon)}

/* ---------- 顶部细条 ---------- */
.top{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg, rgba(8,19,10,.97), rgba(8,19,10,.9));
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(0,255,255,.22);
}

.ticker{
  margin:0;
  padding:5px 16px;
  font-size:15px;
  line-height:1.6;
  letter-spacing:.05em;
  text-align:center;
  color:#06170a;
  background:linear-gradient(90deg,#69ff69,#b9ffd8 42%,#00ffff);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brandrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:10px 16px 4px;
}

.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  text-decoration:none;
  color:#08180c;
  font-size:18px;
  line-height:1;
  background:conic-gradient(from 210deg,#ffffff,#9fb3a6,#ffffff,#69ff69,#00ffff,#ffffff);
  box-shadow:0 0 18px rgba(105,255,105,.45), inset 0 1px 2px #fff;
  transition:transform .3s ease, box-shadow .3s ease;
}
.logo:hover,.logo:focus-visible{transform:rotate(18deg) scale(1.06);box-shadow:0 0 26px rgba(0,255,255,.6), inset 0 1px 2px #fff}

.brand{
  font-family:'Abril Fatface',Georgia,serif;
  font-weight:400;
  font-size:clamp(20px,3vw,26px);
  letter-spacing:.06em;
  color:#ddffdf;
  text-shadow:0 0 15px rgba(0,255,255,.42);
}

/* ---------- 药丸导航 ---------- */
.dock{padding:4px 12px 12px}

.dock-nav ul{
  display:flex;
  gap:8px;
  margin:0;
  padding:2px 2px 4px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
  justify-content:flex-start;
}
.dock-nav ul::-webkit-scrollbar{display:none}

.dock-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  font-size:16px;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  color:#d8f6da;
  border:1px solid rgba(105,255,105,.4);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 46%, rgba(0,0,0,.3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 1px rgba(0,255,255,.1);
  transition:color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.dock-nav a:hover,
.dock-nav a:focus-visible{
  color:#05170a;
  background:linear-gradient(180deg,#d8ffd8,#69ff69 42%,#00ffff);
  box-shadow:0 0 22px rgba(0,255,255,.55), inset 0 1px 0 #fff;
  transform:translateY(-1px);
}

/* ---------- 主体骨架 ---------- */
.shell{
  position:relative;
  display:block;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px 56px;
}

/* ---------- 首屏 ---------- */
.stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70vh;
  padding:54px 6px 70px;
  text-align:center;
  overflow:hidden;
}
.stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(0,255,255,.3) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 52%, #000 8%, transparent 74%);
  mask-image:radial-gradient(circle at 50% 52%, #000 8%, transparent 74%);
  opacity:.75;
  pointer-events:none;
}

.orb{position:absolute;inset:0;margin:0;z-index:0;pointer-events:none}
.orb span{position:absolute;display:block;border-radius:50%}
.orb .o1{
  width:230px;height:230px;left:-70px;top:6%;
  background:conic-gradient(from 200deg,#ffffff,#8fd3a5,#ffffff,#69ff69,#ffffff);
  opacity:.17;
}
.orb .o2{
  width:150px;height:150px;right:-40px;bottom:4%;
  background:conic-gradient(from 40deg,#ffffff,#7fe3e3,#ffffff,#00ffff,#ffffff);
  opacity:.2;
}
.orb .o3{
  width:74px;height:74px;right:12%;top:14%;
  background:radial-gradient(circle at 34% 28%, #ffffff, #cfd8d2 42%, #7f9388 70%, #ffffff);
  opacity:.5;
  box-shadow:0 0 30px rgba(105,255,105,.6);
}

.hero-h1{
  position:relative;
  z-index:1;
  max-width:16em;
  margin:0;
  font-family:'Abril Fatface',Georgia,serif;
  font-weight:400;
  font-size:clamp(34px,7.2vw,76px);
  line-height:1.14;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#ffffff 4%,#dcffdc 34%,#69ff69 62%,#00ffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 20px rgba(105,255,105,.45)) drop-shadow(0 3px 0 rgba(0,255,255,.22));
}

/* ---------- 正文章节（内容由程序注入） ---------- */
.shell > article{scroll-margin-top:118px}

.shell > article:not(.stage){
  position:relative;
  margin:0 0 34px;
  padding:26px 22px 32px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(23,38,23,.92), rgba(10,20,11,.94));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 44px -30px #000;
}
.shell > article:not(.stage)::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,#69ff69,#00ffff 58%,rgba(0,255,255,0));
}

.shell small{
  display:block;
  margin:0 0 6px;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.24em;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,255,255,.45);
}

.shell h2{
  margin:.1em 0 .55em;
  font-family:'Abril Fatface',Georgia,serif;
  font-weight:400;
  font-size:clamp(24px,3.4vw,34px);
  line-height:1.28;
  color:#ecffec;
  text-shadow:0 0 18px rgba(0,255,255,.3);
}

.shell h3{
  margin:1.3em 0 .4em;
  font-family:'Abril Fatface',Georgia,serif;
  font-weight:400;
  font-size:clamp(20px,2.4vw,24px);
  line-height:1.35;
  color:#d6ffd8;
}

.shell > article:not(.stage) p{
  margin:0 0 1em;
  color:#d6e8d6;
}
.shell > article:not(.stage) p:last-child{margin-bottom:0}

.shell > article:not(.stage) a{
  color:#9dffa4;
  text-decoration:underline;
  text-decoration-color:rgba(0,255,255,.55);
  text-underline-offset:3px;
}
.shell > article:not(.stage) a:hover{color:#fff;text-decoration-color:#69ff69}

.shell > article:not(.stage) ul,
.shell > article:not(.stage) ol{
  margin:0 0 1em;
  padding-left:1.35em;
}
.shell > article:not(.stage) li{
  margin:.45em 0;
  color:#d0e6d1;
}
.shell > article:not(.stage) li::marker{color:var(--cyan)}

.shell > article:not(.stage) figure{
  margin:1.2em 0;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(0,255,255,.22);
  background:rgba(0,255,255,.05);
}
.shell > article:not(.stage) figure img{border-radius:16px}

.shell > article:not(.stage) blockquote{
  margin:1.2em 0;
  padding:12px 18px;
  border-left:3px solid var(--neon);
  border-radius:0 18px 18px 0;
  background:rgba(105,255,105,.07);
  color:#e4ffe5;
}

.shell > article:not(.stage) table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
}
.shell > article:not(.stage) th,
.shell > article:not(.stage) td{
  padding:10px 12px;
  border-bottom:1px solid rgba(105,255,105,.2);
  text-align:left;
}
.shell > article:not(.stage) th{color:#a8ffb0}

/* ---------- 右侧目录 ---------- */
.rail{margin:4px 0 30px}

.rail-inner{
  padding:16px 16px 14px;
  border-radius:24px;
  border:1px dashed rgba(0,255,255,.34);
  background:linear-gradient(180deg, rgba(0,255,255,.07), rgba(105,255,105,.05));
}

.rail-eyebrow{
  margin:0 0 2px;
  font-size:16px;
  letter-spacing:.2em;
  color:var(--cyan);
}

.rail-h2{
  margin:0 0 10px;
  font-family:'Abril Fatface',Georgia,serif;
  font-weight:400;
  font-size:22px;
  line-height:1.3;
  color:#ecffec;
}

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

.rail-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  color:#ccf3ce;
  border:1px solid rgba(105,255,105,.3);
  background:rgba(255,255,255,.05);
  transition:background .2s ease, color .2s ease;
}
.rail-nav a:hover,
.rail-nav a:focus-visible{color:#05170a;background:linear-gradient(180deg,#c8ffc8,#69ff69)}

/* ---------- 页脚 ---------- */
.base{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  max-width:1180px;
  margin:0 auto;
  padding:30px 20px 46px;
  border-top:1px solid rgba(105,255,105,.28);
}
.base p{margin:0}

.f-brand{
  font-family:'Abril Fatface',Georgia,serif;
  font-size:24px;
  line-height:1.4;
  color:#bcffbe;
  text-shadow:0 0 16px rgba(105,255,105,.45);
}

.f-links{
  display:flex;
  flex-wrap:wrap;
  gap:0 2px;
  grid-column:1 / -1;
}
.f-links a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 8px;
  font-size:16px;
  line-height:1.4;
  color:#cbe9cc;
  text-decoration:none;
}
.f-links a:hover,
.f-links a:focus-visible{color:#05170a;background:rgba(105,255,105,.85);border-radius:999px}

.f-copy{
  grid-column:1 / -1;
  font-size:16px;
  line-height:1.6;
  color:#8fb894;
}

/* ---------- 渐入动画 ---------- */
.rv > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .52s ease, transform .52s cubic-bezier(.22,.9,.32,1);
}
.rv.is-in > *{opacity:1;transform:none}
.rv.is-in > *:nth-child(1){transition-delay:.02s}
.rv.is-in > *:nth-child(2){transition-delay:.08s}
.rv.is-in > *:nth-child(3){transition-delay:.14s}
.rv.is-in > *:nth-child(4){transition-delay:.2s}
.rv.is-in > *:nth-child(5){transition-delay:.26s}
.rv.is-in > *:nth-child(6){transition-delay:.32s}
.rv.is-in > *:nth-child(n+7){transition-delay:.38s}

/* ---------- 断点 ---------- */
@media (min-width:760px){
  .dock-nav ul{flex-wrap:wrap;justify-content:center;overflow:visible;padding-bottom:6px}
  .shell > article{scroll-margin-top:150px}
  .shell > article:not(.stage){padding:34px 34px 40px;margin-bottom:40px}
  .base{grid-template-columns:1.2fr 1fr 1fr auto;align-items:start}
  .f-links{grid-column:auto}
  .f-copy{grid-column:auto;text-align:right;align-self:center}
}

@media (min-width:1024px){
  .shell{padding-right:320px}
  .rail{position:absolute;top:14px;right:20px;bottom:0;width:250px;margin:0}
  .rail-inner{position:sticky;top:150px}
  .rail-nav ul{flex-direction:column;flex-wrap:nowrap}
  .rail-nav a{width:100%}
}

@media (min-width:1180px){
  .hero-h1{letter-spacing:.015em}
}

@media (max-width:759px){
  body{font-size:17px}
  .stage{min-height:64vh;padding:40px 4px 54px}
  .shell{padding:0 16px 40px}
  .shell > article:not(.stage){padding:22px 18px 26px;border-radius:24px}
  .shell > article:not(.stage)::after{left:18px;right:18px}
  .base{padding:26px 16px 40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv > *{transition:none;opacity:1;transform:none}
  .logo,.dock-nav a{transition:none}
}

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