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

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

:root {
  --neon: #69ff69;
  --cyan: #00ffff;
  --ink: #172617;
  --bg: #0a1511;
  --panel: #0f2018;
  --text: #e8fff2;
  --dim: #a8c8b7;
  --line: rgba(105, 255, 105, .32);
  --line2: rgba(0, 255, 255, .28);
  --chrome: linear-gradient(145deg, #ffffff, #c8dece 30%, #f8fffb 46%, #8fae9c 66%, #e9fff4);
  --pop: linear-gradient(120deg, #69ff69, #00ffff);
  --rail: 252px;
  --r: 10px;
  --font: "Baloo 2", "Comic Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(0, 255, 255, .17), transparent 62%),
    radial-gradient(760px 500px at 10% 110%, rgba(105, 255, 105, .14), transparent 64%),
    var(--bg);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); }
h1, h2, h3 { margin: 0; line-height: 1.16; font-weight: 700; }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* 左侧固定竖栏 */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 16px 26px;
  overflow-y: auto;
  z-index: 20;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, #12261b, #08120d 62%, #102219),
    var(--panel);
}

.brand,
.foot-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .62);
  background: var(--chrome);
  color: #0a2418;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  filter: drop-shadow(0 0 14px rgba(105, 255, 105, .45));
}

.brand-img { width: 44px; height: 44px; object-fit: contain; }
.brand-glyph { line-height: 1; }

.search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: rgba(0, 255, 255, .06);
}

.search-ico { color: var(--cyan); font-size: 13px; line-height: 1; }

.search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.search input::placeholder { color: var(--dim); }
.search input:focus { outline: none; }

.rail-nav p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.rail-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.rail-nav a:hover,
.rail-nav a:focus-visible {
  border-color: var(--line);
  background: rgba(105, 255, 105, .12);
  color: var(--neon);
}

.is-off { display: none !important; }

/* 主区域 */
main {
  margin-left: var(--rail);
  max-width: 1180px;
  padding: 26px clamp(16px, 4vw, 52px) 0;
}

/* Hero */
.hero {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  padding: clamp(26px, 5vw, 46px) 0 clamp(34px, 5vw, 52px);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 12px;
  background: var(--pop);
  transform: skewY(-1.6deg);
  box-shadow: 0 0 24px rgba(0, 255, 255, .5);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  letter-spacing: .4px;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, .45));
  margin-bottom: 14px;
}

.hero .lead {
  max-width: 44ch;
  color: var(--dim);
  font-size: 17px;
  margin-bottom: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: var(--pop);
  color: #062012;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .25s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 255, 255, .38); }

.hero-deco {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  opacity: .6;
  mix-blend-mode: screen;
  animation: float 9s ease-in-out infinite;
}

.orb-a {
  width: 178px;
  height: 178px;
  right: 5%;
  top: 6%;
  background: radial-gradient(circle at 32% 26%, #ffffff, #a9e7c6 42%, #00ffff 100%);
}

.orb-b {
  width: 84px;
  height: 84px;
  right: 23%;
  bottom: 16%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #69ff69 55%, #1f7a4a);
  animation-duration: 6.4s;
  animation-direction: reverse;
}

.spark {
  position: absolute;
  color: #ffffff;
  font-size: 20px;
  text-shadow: 0 0 14px #00ffff;
}

.spark-a { right: 19%; top: 20%; }
.spark-b { right: 40%; bottom: 13%; font-size: 13px; color: var(--neon); }
.spark-c { right: 7%; bottom: 32%; font-size: 15px; }

@keyframes float {
  50% { transform: translateY(-16px) scale(1.05); }
}

/* 正文 + 右侧 aside */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(26px, 4vw, 46px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.doc-body > * { scroll-margin-top: 118px; }
.doc-body > * + * { margin-top: 34px; }
.doc-body div + div {
  border-top: 1px dashed var(--line2);
  padding-top: 34px;
}

.doc-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--neon);
  text-shadow: 0 0 18px rgba(105, 255, 105, .35);
  margin-bottom: 12px;
}

.doc-body h3 {
  font-size: 1.16rem;
  color: var(--cyan);
  margin-bottom: 10px;
}

.doc-body p { color: var(--text); }
.doc-body a { text-decoration: underline; text-underline-offset: 3px; }
.doc-body ul,
.doc-body ol { padding-left: 1.25em; margin: 0 0 1em; }
.doc-body li { margin: .38em 0; }

.doc-body blockquote {
  margin: 0 0 1em;
  padding: 12px 16px;
  border-left: 3px solid var(--neon);
  border-radius: 0 var(--r) var(--r) 0;
  background: rgba(105, 255, 105, .08);
  color: var(--dim);
}

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 0 0 1em;
}

.doc-body th,
.doc-body td {
  border: 1px solid rgba(105, 255, 105, .22);
  padding: 8px 10px;
  text-align: left;
}

.doc-body th { background: rgba(0, 255, 255, .1); color: var(--cyan); }

.doc-body img { border-radius: var(--r); border: 1px solid var(--line2); }

/* 侧栏 */
.side {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: rgba(0, 255, 255, .06);
}

.side-title {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--cyan);
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }

.side-nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
}

.side-nav a:hover,
.side-nav a:focus-visible {
  border-left-color: var(--neon);
  background: rgba(105, 255, 105, .12);
  color: var(--neon);
}

.side-top {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 10px;
  padding: 8px;
  font-size: 15px;
  color: var(--dim);
  text-decoration: none;
}

.side-top:hover { color: var(--neon); }

/* 大 CTA */
.cta {
  position: relative;
  margin-top: 56px;
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
  border: 2px solid var(--neon);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(105, 255, 105, .15), rgba(0, 255, 255, .15));
}

.cta::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 255, .38), transparent 70%);
}

.cta h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  color: #ffffff;
  text-shadow: 0 0 22px rgba(0, 255, 255, .55);
}

.cta .subtitle {
  position: relative;
  z-index: 1;
  margin: 10px 0 20px;
  max-width: 52ch;
  color: var(--text);
}

.cta .btn { position: relative; z-index: 1; }

/* 页脚 */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 48px;
  padding: 20px 0 36px;
  border-top: 1px solid var(--line);
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--neon);
}

.foot-mark { width: 40px; height: 40px; font-size: 18px; }
.foot-mark .brand-img { width: 34px; height: 34px; }

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  flex: 1 1 300px;
}

.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 2px;
  font-size: 15px;
  color: var(--dim);
  text-decoration: none;
}

.foot-nav a:hover { color: var(--neon); }

.foot-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--dim);
}

.foot-copy a { color: var(--dim); text-decoration: none; }
.foot-copy a:hover { color: var(--neon); }

/* 动效 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}

.js [data-reveal].in { opacity: 1; transform: none; }

/* 断点 */
@media (max-width: 900px) {
  .rail {
    position: sticky;
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px 12px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand { width: 44px; height: 44px; font-size: 18px; }
  .brand-img { width: 36px; height: 36px; }

  .search { padding: 0 12px; }

  .rail-nav { grid-column: 1 / -1; }

  .rail-nav p {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .rail-nav a {
    white-space: nowrap;
    padding: 10px 12px;
  }

  main {
    margin-left: 0;
    padding: 16px 16px 0;
  }

  .hero { min-height: 0; padding: 22px 0 38px; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .hero .lead { font-size: 16px; }
  .orb-a { width: 118px; height: 118px; right: -8px; top: -6px; opacity: .42; }
  .orb-b { width: 62px; height: 62px; right: 16%; bottom: 8%; opacity: .45; }
  .spark-c { display: none; }

  .doc { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .side { position: static; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-nav a { border-left: 0; border: 1px solid var(--line2); border-radius: 999px; padding: 8px 12px; }

  .doc-body > * { scroll-margin-top: 132px; }

  .foot { gap: 10px 16px; }
  .foot-nav { flex-basis: 100%; }
  .foot-copy { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

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