*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd,address{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit}
img,svg,video{max-width:100%}
[id]{scroll-margin-top:calc(var(--bar-h) + 16px)}

:root{
  --c-turf:#08221A;
  --c-turf-mid:#0F3A2A;
  --c-panel:#14332A;
  --c-panel-2:#113028;
  --c-cyan:#35F0D0;
  --c-orange:#FF7A3D;
  --c-crimson:#FF3D5A;
  --c-lime:#C9F24D;
  --c-chalk:#F2FBF7;
  --c-mist:#9FB8AF;
  --c-stone:#B9C4BD;
  --line:rgba(53,240,208,.14);
  --line-soft:rgba(185,196,189,.14);
  --f-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC",sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-64:clamp(38px,7vw,64px);
  --fs-44:clamp(30px,5vw,44px);
  --fs-34:clamp(25px,3.6vw,34px);
  --fs-26:clamp(21px,2.6vw,26px);
  --fs-20:20px;
  --fs-17:17px;
  --fs-15:15px;
  --fs-13:13px;
  --rail-w:88px;
  --rail-open:264px;
  --bar-h:60px;
  --content-max:1180px;
  --gutter:clamp(18px,4vw,54px);
  --radius:14px;
  --radius-lg:22px;
  --panel-pad:clamp(16px,2.4vw,28px);
  --gap:clamp(14px,1.6vw,22px);
  --shadow:0 18px 44px rgba(0,0,0,.38);
}
html.is-compact{--panel-pad:clamp(10px,1.5vw,16px);--gap:clamp(10px,1.1vw,14px)}
html.is-compact .site-nav__link{padding-block:8px}
html.is-compact .tool__dot{background:var(--c-lime)}

body{
  font-family:var(--f-sans);
  font-size:var(--fs-17);
  line-height:1.75;
  color:var(--c-chalk);
  background:
    radial-gradient(1200px 620px at 10% -12%,rgba(53,240,208,.10),rgba(8,34,26,0) 62%),
    radial-gradient(900px 520px at 94% 2%,rgba(255,122,61,.09),rgba(8,34,26,0) 64%),
    var(--c-turf);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-underline-offset:.18em;
}
@media (min-width:960px){body{padding-left:var(--rail-w)}}

:focus-visible{outline:2px solid var(--c-lime);outline-offset:2px;border-radius:6px}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-120px;left:calc(var(--rail-w) + 12px);z-index:200;padding:10px 18px;border-radius:0 0 12px 12px;background:var(--c-lime);color:#06231B;font-weight:800;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:0}

/* ===== 头部：竖向轨道 / 顶部条 ===== */
.site-header{position:sticky;top:0;z-index:80;height:var(--bar-h)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:rgba(185,196,189,.12);pointer-events:none}
.progress__bar{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--c-cyan),var(--c-lime) 52%,var(--c-orange));box-shadow:0 0 14px rgba(53,240,208,.55);will-change:transform}

.rail{
  display:flex;align-items:center;gap:12px;
  height:var(--bar-h);padding-inline:14px;
  background:rgba(8,34,26,.97);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--c-chalk)}
.brand__mark{position:relative;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:conic-gradient(from 210deg,var(--c-cyan),var(--c-turf-mid) 52%,var(--c-orange));box-shadow:0 0 0 1px rgba(53,240,208,.5),0 0 16px rgba(53,240,208,.28)}
.brand__mark::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--c-turf)}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{font-size:var(--fs-15);font-weight:800;letter-spacing:.04em;white-space:nowrap}
.brand__tagline{display:none;font-size:var(--fs-13);color:var(--c-mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:172px}

.nav-toggle{display:inline-flex;align-items:center;gap:10px;margin-left:auto;padding:8px 14px;border-radius:999px;border:1px solid rgba(53,240,208,.4);background:rgba(53,240,208,.08);font-size:var(--fs-13);letter-spacing:.14em;cursor:pointer;transition:background .2s,color .2s}
.nav-toggle:hover{background:rgba(53,240,208,.16);color:var(--c-cyan)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle__bars span{display:block;height:2px;border-radius:2px;background:var(--c-cyan);transition:transform .25s ease,opacity .25s ease}
.site-header[data-nav-open="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header[data-nav-open="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.site-header[data-nav-open="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.site-nav{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(86vw,340px);
  padding:calc(var(--bar-h) + 14px) 0 210px;
  background:linear-gradient(180deg,#0D2E24,#08221A 72%);
  border-left:1px solid var(--line);
  overflow-y:auto;
  transform:translateX(103%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.4,.1,.2,1),visibility .3s ease;
}
.site-header[data-nav-open="true"] .site-nav{transform:translateX(0);visibility:visible}
.site-nav__caption{padding:0 22px 10px;font-size:var(--fs-13);letter-spacing:.2em;color:var(--c-cyan)}
.site-nav__list{display:flex;flex-direction:column}
.site-nav__item+.site-nav__item{border-top:1px solid rgba(185,196,189,.08)}
.site-nav__link{position:relative;display:flex;align-items:center;gap:12px;padding:14px 22px;text-decoration:none;font-size:var(--fs-17);font-weight:700;color:var(--c-chalk);transition:background .2s ease,color .2s ease}
.site-nav__link::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--c-cyan);transform:translateY(-50%);transition:height .25s ease}
.site-nav__link:hover,.site-nav__link:focus-visible{background:rgba(53,240,208,.08);color:var(--c-cyan)}
.site-nav__link[aria-current="page"]{background:rgba(53,240,208,.12);color:var(--c-cyan)}
.site-nav__link[aria-current="page"]::before{height:64%;box-shadow:0 0 12px rgba(53,240,208,.9)}
.site-nav__link[aria-current="page"] .site-nav__index{color:var(--c-cyan)}
.site-nav__index{font-family:var(--f-mono);font-size:var(--fs-13);letter-spacing:.08em;color:var(--c-mist)}
.site-nav__label{min-width:0}
.site-nav__meta{margin-left:auto;font-size:var(--fs-13);letter-spacing:.08em;color:var(--c-orange);opacity:.9}

.rail__tools{
  position:fixed;right:0;bottom:0;z-index:95;
  width:min(86vw,340px);
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px 22px;
  background:linear-gradient(180deg,rgba(20,51,42,.97),#0B2A20);
  border-top:1px solid var(--line);
  transform:translateX(103%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.4,.1,.2,1),visibility .3s ease;
}
.site-header[data-nav-open="true"] .rail__tools{transform:translateX(0);visibility:visible}
.tool{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--c-mist);font-size:var(--fs-15);letter-spacing:.04em;text-align:left;text-decoration:none;cursor:pointer;transition:color .2s,background .2s}
.tool:hover,.tool:focus-visible{color:var(--c-lime);background:rgba(201,242,77,.10)}
.tool__dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--c-cyan);box-shadow:0 0 10px currentColor}
.tool__dot--orange{background:var(--c-orange)}
.tool__dot--lime{background:var(--c-lime)}

.nav-scrim{position:fixed;inset:0;z-index:85;background:rgba(4,16,12,.64);opacity:0;pointer-events:none;transition:opacity .3s ease}
.site-header[data-nav-open="true"] .nav-scrim{opacity:1;pointer-events:auto}

@media (min-width:960px){
  body{padding-left:var(--rail-w)}
  .site-header{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);height:auto}
  .rail{
    height:100%;width:100%;flex-direction:column;align-items:stretch;gap:16px;
    padding:20px 0 16px;
    background:linear-gradient(180deg,#0C2B21,#08221A 55%,#0A2620);
    border-right:1px solid var(--line);
    border-bottom:0;
    overflow-x:hidden;overflow-y:auto;
    transition:width .28s ease,box-shadow .28s ease;
  }
  .site-header:hover .rail,.site-header:focus-within .rail{width:var(--rail-open);box-shadow:26px 0 60px rgba(0,0,0,.5)}
  .brand{padding:0 22px}
  .brand__tagline{display:block}
  .site-nav{
    position:static;transform:none;visibility:visible;width:auto;height:auto;
    padding:0;border:0;background:none;overflow:visible;
    flex:1 1 auto;min-height:0;
  }
  .site-nav__caption{padding:0 24px 8px;opacity:0;transform:translateX(-6px);transition:opacity .22s ease,transform .22s ease}
  .site-nav__item+.site-nav__item{border-top:0}
  .site-nav__link{padding:11px 22px;border-radius:0 12px 12px 0;font-size:var(--fs-15)}
  .rail__tools{
    position:static;transform:none;visibility:visible;width:auto;
    margin:0 14px;padding:14px 0 0;
    background:none;border-top:1px solid var(--line);border-radius:0;
  }
  .nav-toggle{display:none}
  .nav-scrim{display:none}
  .brand__text,.tool__text,.site-nav__label,.site-nav__meta{
    opacity:0;transform:translateX(-6px);transition:opacity .22s ease,transform .22s ease;
  }
  :where(.site-header:hover,.site-header:focus-within) :where(.brand__text,.tool__text,.site-nav__label,.site-nav__meta,.site-nav__caption){
    opacity:1;transform:none;
  }
  .progress{left:var(--rail-w)}
}

/* ===== 页脚 ===== */
.site-footer{position:relative;margin-top:clamp(48px,7vw,104px);background:linear-gradient(180deg,#071C16,#0B2A20 45%,#08221A);border-top:1px solid rgba(185,196,189,.16);overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;opacity:.5;background:repeating-linear-gradient(90deg,rgba(185,196,189,.28) 0 12px,rgba(0,0,0,0) 12px 26px)}
.ridge{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:0;overflow:hidden;pointer-events:none}
.ridge__band{position:absolute;border-radius:50% 50% 0 0/100% 100% 0 0}
.ridge__band--1{left:-14%;bottom:-70px;width:74%;height:180px;background:linear-gradient(180deg,rgba(53,240,208,.13),rgba(53,240,208,0) 72%)}
.ridge__band--2{right:-10%;bottom:-50px;width:60%;height:140px;background:linear-gradient(180deg,rgba(255,122,61,.12),rgba(255,122,61,0) 74%)}
.ridge__band--3{left:18%;bottom:-96px;width:86%;height:200px;background:linear-gradient(180deg,rgba(185,196,189,.09),rgba(185,196,189,0) 76%)}
.site-footer__inner{position:relative;z-index:1;max-width:var(--content-max);margin:0 auto;padding:clamp(36px,5.5vw,64px) var(--gutter) 26px}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
@media (min-width:720px){.site-footer__grid{grid-template-columns:1.1fr 1fr}}
@media (min-width:1060px){.site-footer__grid{grid-template-columns:1.5fr .9fr .9fr 1.1fr}}
.footer-brand__name{font-size:var(--fs-26);font-weight:900;letter-spacing:.02em}
.footer-brand__name::after{content:"";display:block;width:56px;height:3px;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,var(--c-cyan),var(--c-orange))}
.footer-brand__line{margin-top:14px;max-width:34ch;font-size:var(--fs-15);color:#CFE4DB}
.footer-brand__note{margin-top:10px;font-size:var(--fs-13);color:var(--c-mist)}
.footer-col{display:flex;flex-direction:column}
.footer-heading{margin-bottom:14px;font-size:var(--fs-13);letter-spacing:.2em;color:var(--c-cyan)}
.footer-list{display:flex;flex-direction:column;gap:2px}
.footer-link{display:inline-flex;align-items:center;gap:9px;padding:5px 0;font-size:var(--fs-15);color:var(--c-mist);text-decoration:none;transition:color .2s}
.footer-link::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--c-orange);opacity:.55;transition:opacity .2s,box-shadow .2s}
.footer-link:hover,.footer-link:focus-visible{color:var(--c-chalk)}
.footer-link:hover::before{opacity:1;box-shadow:0 0 10px var(--c-orange)}
.footer-text{font-size:var(--fs-15);color:var(--c-mist)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start;justify-content:space-between;margin-top:clamp(28px,4vw,44px);padding-top:18px;border-top:1px solid rgba(185,196,189,.14);font-size:var(--fs-13);color:var(--c-mist)}
.footer-bottom__legal p+p{margin-top:4px}
.footer-address{display:flex;flex-direction:column;gap:4px;font-style:normal}
.footer-copy{font-family:var(--f-mono);letter-spacing:.06em}

/* ===== 通用组件 ===== */
.container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:860px}
.section{padding-block:clamp(30px,5vw,64px)}
.section+.section{border-top:1px solid var(--line-soft)}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(18px,2.6vw,30px)}
.section-head__title{font-size:var(--fs-34);font-weight:900;line-height:1.12;letter-spacing:-.01em}
.section-head__desc{max-width:62ch;font-size:var(--fs-15);color:var(--c-mist)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:700px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:940px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:880px){.grid--split{grid-template-columns:1.7fr 1fr}}

.display{font-weight:900;line-height:1.06;letter-spacing:-.01em}
.display--xl{font-size:var(--fs-64)}
.display--lg{font-size:var(--fs-44)}
.display--md{font-size:var(--fs-34)}
.display--sm{font-size:var(--fs-26)}
.display--tilt{padding-right:.06em;transform:rotate(-1.4deg);transform-origin:left center}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);letter-spacing:.2em;color:var(--c-cyan)}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--c-cyan)}
.lead{font-size:var(--fs-20);line-height:1.7;color:#D6EAE2}
.meta{font-size:var(--fs-13);letter-spacing:.04em;color:var(--c-mist)}
.rule{height:1px;border:0;background:linear-gradient(90deg,var(--c-cyan),rgba(53,240,208,0))}

.panel{position:relative;overflow:hidden;padding:var(--panel-pad);border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(20,51,42,.95),rgba(11,42,32,.9));box-shadow:var(--shadow)}
.panel--flat{background:var(--c-panel);box-shadow:none}
.panel--signal{border-color:rgba(255,122,61,.35)}
.panel__label{font-size:var(--fs-13);letter-spacing:.14em;color:var(--c-mist)}

.stat{display:flex;flex-direction:column;gap:4px}
.stat__value{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-44);font-weight:700;line-height:1;letter-spacing:.02em;color:var(--c-cyan)}
.stat__value--signal{color:var(--c-orange)}
.stat__value--alert{color:var(--c-crimson)}
.stat__value--lime{color:var(--c-lime)}
.stat__unit{margin-left:.08em;font-size:var(--fs-15);letter-spacing:.08em;color:var(--c-mist)}
.stat__label{font-size:var(--fs-13);letter-spacing:.12em;color:var(--c-mist)}

.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid currentColor;border-radius:999px;font-size:var(--fs-13);letter-spacing:.10em;color:var(--c-cyan);background:rgba(53,240,208,.08)}
.tag--orange{color:var(--c-orange);background:rgba(255,122,61,.10)}
.tag--crimson{color:var(--c-crimson);background:rgba(255,61,90,.10)}
.tag--lime{color:var(--c-lime);background:rgba(201,242,77,.10)}
.tag--muted{color:var(--c-mist);background:rgba(159,184,175,.10)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid transparent;border-radius:999px;font-size:var(--fs-15);font-weight:700;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:transform .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn--primary{background:linear-gradient(120deg,var(--c-cyan),var(--c-lime));color:#052018;box-shadow:0 10px 26px rgba(53,240,208,.22)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost{border-color:rgba(53,240,208,.45);background:rgba(53,240,208,.06);color:var(--c-cyan)}
.btn--ghost:hover{background:rgba(53,240,208,.14)}
.btn--signal{border-color:rgba(255,122,61,.5);background:rgba(255,122,61,.14);color:var(--c-orange)}
.btn--signal:hover{background:rgba(255,122,61,.22)}

.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--c-mist)}
.breadcrumbs a{color:var(--c-mist);text-decoration:none}
.breadcrumbs a:hover{color:var(--c-cyan)}
.breadcrumbs__sep{color:rgba(159,184,175,.5)}
.breadcrumbs [aria-current="page"]{color:var(--c-chalk)}

.figure{display:flex;flex-direction:column;gap:10px;margin:0}
.figure__frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(150deg,#0F3A2A,#08221A)}
.figure__frame--tall{aspect-ratio:4/5}
.figure__frame--wide{aspect-ratio:21/9}
.figure__frame img,.figure__frame video,.figure__frame svg{display:block;width:100%;height:100%;object-fit:cover}
.figure__caption{font-size:var(--fs-13);color:var(--c-mist)}

.prose{max-width:68ch;font-size:var(--fs-17);line-height:1.78;color:#DCEBE4}
.prose h2{margin:1.6em 0 .6em;font-size:var(--fs-26);font-weight:900;line-height:1.2}
.prose h3{margin:1.4em 0 .5em;font-size:var(--fs-20);font-weight:800}
.prose p{margin-bottom:1em}
.prose ul{margin-bottom:1em}
.prose li{position:relative;margin-bottom:.5em;padding-left:20px}
.prose li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:2px;background:var(--c-cyan)}
.prose strong{font-weight:800;color:var(--c-chalk)}
.prose a{color:var(--c-cyan)}

.reveal{transition:opacity .5s ease,transform .5s ease}
html.js-motion .reveal{opacity:0;transform:translateY(16px)}
html.js-motion .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.js-motion .reveal{opacity:1;transform:none}
  .progress__bar{transition:none}
}