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

:root{
  --neon:#69ff69;
  --cyan:#00ffff;
  --ink:#172617;
  --deep:#08110a;
  --deep2:#0f1f13;
  --chrome:linear-gradient(115deg,#f4fff8 0%,#a9f2c6 22%,#69ff69 42%,#0d5c3d 58%,#d8ffe8 76%,#8fe9ff 100%);
  --line:rgba(105,255,105,.26);
  --line2:rgba(0,255,255,.30);
  --txt:#e8f8ec;
  --dim:#a2c6ae;
  --r:10px;
  --wrap:1140px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:
    radial-gradient(900px 420px at 82% -12%, rgba(0,255,255,.16), transparent 62%),
    radial-gradient(760px 420px at 8% 4%, rgba(105,255,105,.14), transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, #0b150e 46%, #07100a 100%);
  color:var(--txt);
  font-family:"Jost",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--neon);text-decoration:none}
a:hover{color:var(--cyan)}
h2,h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;line-height:1.28}
h2 span,h3 span{display:inline}

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

/* ===== 顶部 ===== */
.top{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 20px;
  background:linear-gradient(180deg, rgba(8,17,10,.97), rgba(8,17,10,.78));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease, background .3s ease;
}
.top.is-scrolled{
  box-shadow:0 10px 30px -18px rgba(105,255,105,.7);
  border-bottom-color:var(--line2);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding-right:6px;
  flex:0 0 auto;
}
.mark{
  width:30px;
  height:30px;
  border-radius:50%;
  background:conic-gradient(from 210deg,#f4fff8,#69ff69,#00ffff,#0d5c3d,#f4fff8);
  border:1px solid rgba(255,255,255,.6);
  display:inline-block;
  animation:spin 14s linear infinite;
}
.brandName{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:23px;
  letter-spacing:.1em;
  background:var(--chrome);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:sheen 9s linear infinite;
}

.rail{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  white-space:nowrap;
  font-size:16px;
  color:var(--txt);
  border-radius:999px;
  border:1px solid transparent;
  transition:color .2s, border-color .2s, background .2s;
}
.rail a:hover,
.rail a:focus-visible{
  color:var(--neon);
  border-color:var(--line);
  background:rgba(105,255,105,.08);
}

.pick{position:relative;flex:0 0 auto}
.pick summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  font-size:16px;
  letter-spacing:.14em;
  color:#08110a;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(160deg,#f4fff8,#9df3c1 40%,#69ff69 72%,#2f9f6a 100%);
  transition:filter .2s;
}
.pick summary::-webkit-details-marker{display:none}
.pick summary::after{content:"✧";margin-left:8px;color:#0d5c3d}
.pick summary:hover{filter:brightness(1.08)}
.pick[open] summary{border-color:var(--cyan)}

.panel{
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:min(76vw,300px);
  padding:14px;
  display:grid;
  gap:4px;
  border-radius:14px;
  border:1px solid var(--line2);
  background:linear-gradient(165deg,#132a1b,#0a1710 70%);
  box-shadow:0 24px 48px -28px rgba(0,255,255,.6);
}
.grp{
  margin:6px 0 2px;
  font-size:16px;
  letter-spacing:.2em;
  color:var(--cyan);
  opacity:.82;
}
.panel menu{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:2px;
}
.panel menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border-radius:8px;
  color:var(--txt);
  border-left:2px solid transparent;
}
.panel menu a:hover{
  background:rgba(0,255,255,.1);
  border-left-color:var(--cyan);
  color:var(--cyan);
}

/* ===== 主体骨架 ===== */
.core{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 20px 72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 296px;
  gap:44px;
  align-items:start;
}
.doc{min-width:0}
.doc > div{scroll-margin-top:92px}

/* ===== 首屏 ===== */
.hero{
  position:relative;
  min-height:calc(100svh - 68px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px 0 0;
  overflow:hidden;
  border-bottom:1px solid var(--line2);
}
.heroCopy{position:relative;z-index:3;max-width:640px}
.title{
  margin:0;
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:600;
  font-size:clamp(32px,5.6vw,60px);
  line-height:1.14;
  letter-spacing:.01em;
  color:#f2fff7;
  text-shadow:0 0 26px rgba(105,255,105,.55), 0 0 60px rgba(0,255,255,.28);
}
.lede{
  margin:18px 0 0;
  max-width:44ch;
  font-size:17px;
  color:var(--dim);
}
.tag{
  margin:20px 0 0;
  font-size:18px;
  letter-spacing:.6em;
  color:var(--cyan);
  text-shadow:0 0 14px rgba(0,255,255,.65);
}
.heroDeck{
  position:relative;
  z-index:2;
  margin-top:28px;
  height:min(38vh,300px);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;
  background:
    linear-gradient(150deg, rgba(244,255,248,.22), rgba(105,255,105,.16) 34%, rgba(0,255,255,.2) 62%, rgba(13,92,61,.4));
}
.heroPic{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  mix-blend-mode:screen;
  opacity:.92;
}
.bubble{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.92), rgba(0,255,255,.45) 46%, rgba(105,255,105,.12) 74%);
  filter:blur(.4px);
  animation:float 11s ease-in-out infinite;
}
.b1{width:132px;height:132px;left:8%;top:16%}
.b2{width:76px;height:76px;right:12%;bottom:18%;animation-delay:-4s}

.ghost{
  position:absolute;
  z-index:1;
  left:-.06em;
  bottom:-.14em;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(72px,20vw,196px);
  line-height:.9;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:transparent;
  background:var(--chrome);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:.22;
  pointer-events:none;
  animation:sheen 16s linear infinite;
}

/* ===== 正文 ===== */
.doc > div:not(.hero){
  padding:46px 0;
  border-bottom:1px solid var(--line);
}
.doc > div:not(.hero):last-child{border-bottom:0}
.doc p{margin:0 0 16px;max-width:66ch}
.doc h2{
  margin:0 0 16px;
  font-size:clamp(25px,3.4vw,36px);
  color:var(--neon);
  text-shadow:0 0 22px rgba(105,255,105,.32);
}
.doc h2 > span::after,
.cardTitle > span::after{
  content:"✦";
  margin-left:.45em;
  font-size:.62em;
  color:var(--cyan);
  vertical-align:.18em;
  text-shadow:0 0 12px rgba(0,255,255,.8);
}
.doc h3{
  margin:26px 0 10px;
  font-size:clamp(20px,2.4vw,25px);
  color:#dcffe7;
}
.doc ul,.doc ol{margin:0 0 18px;padding-left:1.15em;max-width:66ch}
.doc li{margin:0 0 8px}
.doc li::marker{color:var(--cyan)}
.doc a{
  border-bottom:1px solid rgba(105,255,105,.5);
  padding-bottom:1px;
}
.doc a:hover{border-bottom-color:var(--cyan)}
.doc blockquote{
  margin:22px 0;
  padding:14px 18px;
  border-left:2px solid var(--cyan);
  border-radius:0 var(--r) var(--r) 0;
  background:rgba(0,255,255,.06);
  color:#d6f6e0;
}
.doc blockquote p:last-child{margin-bottom:0}
.doc strong{font-weight:500;color:#fff}
.doc table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
  font-size:16px;
}
.doc th,.doc td{
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
}
.doc th{background:rgba(105,255,105,.1);font-weight:500;color:var(--neon)}
.doc img{border-radius:var(--r);border:1px solid var(--line);margin:8px 0 18px}
.doc code{
  font-family:"Jost",monospace;
  background:rgba(0,255,255,.12);
  border-radius:4px;
  padding:1px 5px;
}

/* ===== 侧栏 ===== */
.side{
  position:sticky;
  top:88px;
  display:grid;
  gap:18px;
  padding-top:44px;
}
.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px 16px;
  background:linear-gradient(165deg, rgba(19,42,27,.92), rgba(10,23,16,.94));
}
.cardTitle{
  margin:0 0 12px;
  font-size:18px;
  color:var(--neon);
  letter-spacing:.04em;
}
.cardTitle .star{
  font-style:normal;
  color:var(--cyan);
  animation:blink 3.4s ease-in-out infinite;
}
.cardText{
  margin:0 0 14px;
  font-size:16px;
  color:var(--dim);
}
.toc{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:toc;
  display:grid;
  gap:2px;
}
.toc li{counter-increment:toc}
.toc a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 8px;
  border-radius:8px;
  font-size:16px;
  color:var(--txt);
  border-left:2px solid transparent;
  transition:background .2s, border-color .2s, color .2s;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:15px;
  color:var(--cyan);
  opacity:.8;
}
.toc a:hover,.toc a.hot{
  background:rgba(105,255,105,.1);
  border-left-color:var(--neon);
  color:var(--neon);
}
.toTop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  width:100%;
  border-radius:999px;
  border:1px solid var(--line2);
  color:var(--cyan);
  letter-spacing:.16em;
  background:rgba(0,255,255,.07);
}
.toTop:hover{background:rgba(0,255,255,.16);color:#fff}

/* ===== 页脚 ===== */
.foot{
  border-top:1px solid var(--line2);
  background:linear-gradient(180deg, rgba(19,42,27,.6), #06100a);
  padding:44px 20px 26px;
}
.footGrid{
  max-width:var(--wrap);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:34px;
}
.brand--foot{min-height:40px}
.footDesc{
  margin:12px 0 0;
  max-width:34ch;
  font-size:16px;
  color:var(--dim);
}
.footCols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.foot dl{margin:0}
.foot dt{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:16px;
  letter-spacing:.16em;
  color:var(--cyan);
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.foot dd{
  margin:0 0 2px;
  font-size:16px;
  color:var(--dim);
}
.foot dd a{display:inline-flex;align-items:center;min-height:40px;color:var(--txt)}
.foot dd a:hover{color:var(--neon)}
.mono{letter-spacing:.1em;color:var(--txt)}
.copy{
  max-width:var(--wrap);
  margin:30px auto 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:16px;
  letter-spacing:.14em;
  color:var(--dim);
}

/* ===== 动效 ===== */
@keyframes float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-16px,0)}
}
@keyframes sheen{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes blink{
  0%,100%{opacity:.35;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.12)}
}

/* ===== 断点 ===== */
@media (max-width:1000px){
  .core{grid-template-columns:minmax(0,1fr) 250px;gap:28px}
  .rail a{padding:0 9px;font-size:16px}
}

@media (max-width:820px){
  .core{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:56px}
  .side{position:static;padding-top:34px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .footGrid{grid-template-columns:1fr;gap:24px}
}

@media (max-width:760px){
  .top{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .rail{order:3;width:100%;justify-content:flex-start;padding-bottom:2px}
  .rail a{min-height:42px}
  .pick{margin-left:auto}
  .hero{min-height:calc(100svh - 116px);padding-top:30px}
  .ghost{font-size:clamp(64px,17vw,120px);opacity:.18}
  .title{font-size:clamp(30px,8.4vw,44px)}
}

@media (max-width:560px){
  .side{grid-template-columns:minmax(0,1fr)}
  .footCols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc > div:not(.hero){padding:36px 0}
  .heroDeck{height:min(34vh,230px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

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