:root{
  --ink:#060D0B;
  --deep:#0A1A15;
  --layer:#10281F;
  --moss:#1C4F3E;
  --cyan:#2AF0C4;
  --cyan-soft:#B8FBEB;
  --orange:#FF7A29;
  --purple:#A480FF;
  --paper:#EDF4EF;
  --paper-ink:#0B1F19;
  --muted:#8CA79C;
  --text:#E6F1EB;
  --line:rgba(42,240,196,.18);
  --line-strong:rgba(42,240,196,.42);
  --stack:8px 8px 0 var(--moss);
  --font-display:"HarmonyOS Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:var(--font-display);
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:64px;
  --shell:1320px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --header-h:76px;
}
@media (max-width:1120px){:root{--pad:40px}}
@media (max-width:720px){:root{--pad:20px;--header-h:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-nav-open{overflow:hidden}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.16;
  text-wrap:balance;
  color:var(--paper);
}
p{text-wrap:pretty}
a{color:var(--cyan-soft);text-decoration:none}
a:hover{color:var(--cyan)}
button{font:inherit;color:inherit}
::selection{background:var(--cyan);color:#04120E}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:2px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 排版工具 ---------- */
.display-1{font-size:clamp(32px,5.2vw,64px);letter-spacing:.06em}
.display-2{font-size:clamp(26px,3.6vw,40px)}
.display-3{font-size:clamp(20px,2.4vw,28px)}
.lede{font-size:clamp(16px,1.6vw,20px);line-height:1.62;color:rgba(230,241,235,.86);max-width:56ch}
.prose{max-width:68ch;line-height:1.72;color:rgba(230,241,235,.84)}
.prose p + p{margin-top:14px}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.num{color:var(--cyan)}
.label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--cyan)}

/* ---------- 容器与节奏 ---------- */
.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--pad);
}
.section{padding-block:clamp(48px,8vw,112px)}
.section--tight{padding-block:clamp(28px,4vw,56px)}
.void{height:clamp(96px,12vw,160px)}
.grid-auto{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- 跳转链 ---------- */
.skip-link{
  position:fixed;top:0;left:calc(var(--pad) / 2);z-index:200;
  transform:translateY(-140%);
  padding:12px 18px;
  background:var(--cyan);color:#04120E;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  border-radius:0 0 2px 2px;
  transition:transform .22s var(--ease);
}
.skip-link:focus-visible,.skip-link:focus{transform:translateY(0);color:#04120E}

/* ---------- 头部 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(6,13,11,.94);
  border-bottom:1px solid var(--line);
  transition:background-color .24s ease,border-color .24s ease;
}
.site-header__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:24px;
  padding:16px var(--pad);
  transition:padding .28s var(--ease);
}
.site-header[data-scrolled]{
  background:rgba(6,13,11,.99);
  border-bottom-color:var(--line-strong);
}
.site-header[data-scrolled] .site-header__inner{padding-block:9px}
.site-header[data-scrolled] .brand__meta{
  max-height:0;opacity:0;transform:translateY(-4px);
}
.site-header[data-scrolled] .brand__mark{
  width:32px;height:32px;font-size:15px;
}

.brand{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--paper);text-decoration:none;flex:0 0 auto;
}
.brand:hover{color:var(--paper)}
.brand__mark{
  display:grid;place-items:center;
  width:38px;height:38px;
  background:var(--cyan);color:#04120E;
  font-family:var(--font-mono);font-weight:700;font-size:18px;
  clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);
  transition:width .28s var(--ease),height .28s var(--ease),font-size .28s var(--ease);
}
.brand__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand__name{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:.14em;line-height:1.2;white-space:nowrap;
}
.brand__meta{
  display:inline-flex;align-items:center;gap:7px;
  max-height:20px;overflow:hidden;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);white-space:nowrap;
  transition:max-height .28s var(--ease),opacity .24s ease,transform .28s var(--ease);
}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,122,41,.18);
}

.site-nav{
  margin-left:auto;
  display:flex;align-items:center;gap:26px;
  min-width:0;
}
.site-nav__list{
  display:flex;align-items:center;gap:22px;
  list-style:none;margin:0;padding:0;
}
.site-nav__link{
  position:relative;display:inline-block;
  padding:6px 0;
  font-size:14px;font-weight:500;letter-spacing:.06em;
  color:rgba(237,244,239,.78);
  text-decoration:none;white-space:nowrap;
  transition:color .18s ease;
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--cyan);
  transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease);
}
.site-nav__link:hover{color:var(--cyan)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--cyan)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.site-nav__tail{
  display:flex;align-items:center;
  padding-left:22px;
  border-left:1px solid var(--line);
}
.nav-toggle{
  display:none;align-items:center;gap:10px;
  margin-left:auto;
  padding:9px 12px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--cyan-soft);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle__bars{display:flex;flex-direction:column;gap:5px;width:18px}
.nav-toggle__bars span{
  display:block;height:2px;background:currentColor;
  transition:transform .24s var(--ease),opacity .24s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav-toggle[aria-expanded="true"]{border-color:var(--orange);color:var(--orange)}

.nav-scrim{
  position:fixed;inset:0;z-index:85;
  display:none;
  background:rgba(3,8,6,.7);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.nav-scrim[data-open]{opacity:1;visibility:visible}

.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--moss),var(--cyan) 70%,var(--orange));
  transform:scaleX(var(--progress,0));
  transform-origin:left center;
  transition:transform .12s linear;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:.1em;line-height:1.2;
  text-decoration:none;border:1px solid transparent;border-radius:2px;
  cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--cyan);color:#04120E}
.btn--primary:hover{background:var(--cyan-soft);color:#04120E}
.btn--ghost{border-color:var(--line-strong);color:var(--cyan-soft);background:transparent}
.btn--ghost:hover{border-color:var(--cyan);background:rgba(42,240,196,.08);color:var(--cyan)}
.btn--small{padding:8px 14px;font-size:12px;letter-spacing:.14em}

/* ---------- 面包屑 ---------- */
.breadcrumb{padding-block:18px}
.breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0;padding:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);
}
.breadcrumb__item + .breadcrumb__item::before{content:"／";margin-right:8px;color:var(--moss)}
.breadcrumb__link{color:var(--muted);text-decoration:none}
.breadcrumb__link:hover{color:var(--cyan)}
.breadcrumb__item:last-child{color:var(--cyan-soft)}

/* ---------- 分栏 ---------- */
.layout-split{
  display:grid;gap:24px;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  align-items:start;
}
.layout-split--flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.layout-split--sticky > :first-child{position:sticky;top:calc(var(--header-h) + 24px)}

/* ---------- 资料卡 ---------- */
.card{
  position:relative;
  background:var(--layer);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(18px,2.4vw,26px);
}
.card__title{
  font-size:clamp(17px,1.8vw,20px);
  letter-spacing:.06em;margin-bottom:8px;
}
.card__meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);
}
.card--stack{box-shadow:var(--stack)}
.card--paper{
  background:var(--paper);color:var(--paper-ink);
  border-color:#0B1F19;
}
.card--paper h2,.card--paper h3,.card--paper h4{color:var(--paper-ink)}
.card--paper a{color:#12604A}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  border:1px solid currentColor;border-radius:2px;
  line-height:1.4;
}
.tag--live{color:var(--orange);font-weight:700}
.tag--version{color:var(--purple)}
.tag--muted{color:var(--muted)}

/* ---------- 数字 ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat__value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(40px,7vw,96px);line-height:.92;
  letter-spacing:-.02em;color:var(--cyan);
}
.stat__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.stat--hero .stat__value{font-size:clamp(64px,14vw,140px)}

/* ---------- 斜切数据带 ---------- */
.diagonal-band{
  position:relative;
  margin-block:clamp(32px,6vw,72px);
  padding:clamp(28px,5vw,56px) var(--pad);
  background:linear-gradient(118deg,var(--moss),#0C2A21 58%,var(--layer));
  clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);
}
.diagonal-band__inner{
  display:grid;gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:var(--shell);margin-inline:auto;
}
.diagonal-band__seg{padding:6px 18px;border-left:1px solid var(--line-strong)}
.diagonal-band__seg:first-child{border-left:0;padding-left:0}

/* ---------- 版本对照轴 ---------- */
.axis{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--line-strong)}
.axis__item{position:relative;padding:0 0 22px 20px}
.axis__item::before{
  content:"";position:absolute;left:-5px;top:7px;
  width:8px;height:8px;background:var(--moss);
  border:1px solid var(--cyan);transform:rotate(45deg);
}
.axis__item[data-active]::before{background:var(--cyan)}
.axis__num{
  display:block;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  color:var(--cyan);
}
.axis__label{
  display:block;font-size:14px;letter-spacing:.04em;
  color:rgba(230,241,235,.82);
}
.axis__item[data-active] .axis__label{color:var(--paper);font-weight:500}

/* ---------- 对照表 ---------- */
.table-wrap{width:100%;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table caption{
  caption-side:top;text-align:left;padding-bottom:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);
}
.data-table th{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-align:left;
  color:var(--muted);
  padding:10px 12px;border-bottom:1px solid var(--line-strong);
}
.data-table td{
  padding:12px;border-bottom:1px solid var(--line);
  color:rgba(230,241,235,.86);vertical-align:top;
}
.data-table td.num{color:var(--cyan-soft)}
.data-table tbody tr:hover{background:rgba(42,240,196,.05)}

/* ---------- 折叠面板 ---------- */
.fold{background:var(--layer);border:1px solid var(--line);border-radius:2px}
.fold + .fold{margin-top:12px}
.fold__summary{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:16px;
  letter-spacing:.04em;list-style:none;
}
.fold__summary::-webkit-details-marker{display:none}
.fold__summary::after{
  content:"＋";margin-left:auto;
  font-family:var(--font-mono);color:var(--cyan);
}
.fold[open] .fold__summary{color:var(--cyan-soft);border-bottom:1px solid var(--line)}
.fold[open] .fold__summary::after{content:"－"}
.fold__body{padding:16px 18px;font-size:15px;color:rgba(230,241,235,.8)}
.fold__body > :first-child{margin-top:0}

/* ---------- 图片容器 ---------- */
.media{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(150deg,var(--layer),var(--moss));
  border:1px solid var(--line);
  border-radius:2px;
}
.media img,.media svg,.media video{
  display:block;width:100%;height:100%;object-fit:cover;
}
.media::after{
  content:"";position:absolute;inset:6px;
  border:1px solid rgba(42,240,196,.28);
  pointer-events:none;
}
.media--wide{aspect-ratio:21/9}
.media--tall{aspect-ratio:3/4}
.media--square{aspect-ratio:1/1}
.media__caption{
  margin-top:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);
}

/* ---------- 显现动效 ---------- */
html[data-js="on"] [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
html[data-js="on"] [data-reveal].is-revealed{opacity:1;transform:none}

/* ---------- 页脚 ---------- */
.site-footer{
  margin-top:clamp(56px,8vw,112px);
  background:var(--deep);
  border-top:1px solid var(--line);
  color:rgba(230,241,235,.82);
}
.site-footer__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--pad) clamp(28px,4vw,48px);
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);
}
.footer-brand__name{
  font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,26px);
  letter-spacing:.16em;color:var(--paper);margin-bottom:10px;
}
.footer-brand__desc{font-size:14px;line-height:1.66;max-width:34ch;color:rgba(230,241,235,.7)}
.footer-brand__icp{
  margin-top:18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);
}
.footer-nav__title,.footer-contact__title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);
  margin-bottom:14px;
}
.footer-nav__list,.footer-contact__list,.footer-contact__links{
  list-style:none;margin:0;padding:0;
}
.footer-nav__list li + li{margin-top:10px}
.footer-nav__list a{
  font-size:14px;letter-spacing:.06em;color:rgba(230,241,235,.8);
  text-decoration:none;transition:color .18s ease,padding-left .18s ease;
}
.footer-nav__list a:hover{color:var(--cyan);padding-left:4px}
.footer-contact__list{margin-bottom:16px}
.footer-contact__row{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px dashed rgba(42,240,196,.14);
  font-size:13px;
}
.footer-contact__key{
  flex:0 0 34px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);
}
.footer-contact__val{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  color:rgba(230,241,235,.86);word-break:break-all;
}
.footer-contact__links{display:flex;flex-wrap:wrap;gap:8px 0}
.footer-contact__links li{display:inline-flex;align-items:center}
.footer-contact__links li + li::before{content:"／";margin-inline:8px;color:var(--moss)}
.footer-contact__links a{font-size:13px;color:var(--cyan-soft);text-decoration:none}
.footer-contact__links a:hover{color:var(--cyan);text-decoration:underline}
.site-footer__band{
  border-top:1px solid var(--line);
  padding:16px var(--pad) 20px;
  width:100%;max-width:var(--shell);margin-inline:auto;
}
.site-footer__legal{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--muted);line-height:1.8;
}
.site-footer__note{
  margin-top:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:rgba(140,167,156,.8);line-height:1.8;max-width:88ch;
}

/* ---------- 平板 ---------- */
@media (max-width:1120px){
  .site-nav{gap:18px}
  .site-nav__list{gap:16px}
  .site-nav__link{font-size:13px;letter-spacing:.04em}
}

/* ---------- 移动 / 窄平板导航 ---------- */
@media (max-width:920px){
  .nav-toggle{display:inline-flex}
  .nav-scrim{display:block}
  .site-nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(86vw,360px);height:100dvh;
    margin:0;
    display:flex;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;
    padding:84px 22px 28px;
    background:var(--deep);
    border-left:1px solid var(--line-strong);
    box-shadow:-16px 0 0 rgba(6,13,11,.6);
    transform:translateX(103%);
    transition:transform .3s var(--ease);
    overflow-y:auto;
    z-index:90;
  }
  .site-nav[data-open]{transform:translateX(0)}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__list li + li{border-top:1px solid rgba(42,240,196,.12)}
  .site-nav__link{
    display:block;padding:15px 6px;
    font-size:16px;letter-spacing:.1em;
  }
  .site-nav__link::after{display:none}
  .site-nav__link[aria-current="page"]{
    color:var(--cyan);
    background:rgba(42,240,196,.07);
    padding-left:12px;
  }
  .site-nav__tail{
    margin-top:auto;
    padding:22px 0 0;
    border-left:0;border-top:1px solid var(--line);
  }
  .site-nav__cta{width:100%;padding:14px 18px;font-size:14px}

  .layout-split,.layout-split--flip{grid-template-columns:minmax(0,1fr)}
  .layout-split--sticky > :first-child{position:static}
  .diagonal-band__inner{grid-template-columns:minmax(0,1fr)}
  .diagonal-band__seg{border-left:0;border-top:1px solid var(--line-strong);padding:12px 0 0}
  .diagonal-band__seg:first-child{border-top:0;padding-top:0}
  .site-footer__inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .brand{max-width:70%}
}

@media (max-width:560px){
  .brand__name{font-size:15px;letter-spacing:.1em}
  .brand__mark{width:32px;height:32px;font-size:15px}
  .footer-contact__row{flex-direction:column;gap:2px}
  .footer-contact__key{flex: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;
    transition-delay:0ms !important;
  }
  .btn:hover,.footer-nav__list a:hover{transform:none;padding-left:0}
  html[data-js="on"] [data-reveal]{opacity:1;transform:none}
  .scroll-progress{transition:none}
}

/* ---------- 打印 ---------- */
@media print{
  body{background:#fff;color:var(--paper-ink)}
  .skip-link,.site-header,.scroll-progress,.nav-toggle,.nav-scrim{display:none !important}
  .site-footer{background:#fff;color:var(--paper-ink);border-top:1px solid #999}
  .site-footer__band{border-top:1px solid #999}
  .footer-brand__desc,.footer-brand__icp,.footer-contact__val,.site-footer__legal,.site-footer__note{color:#333}
  a{color:var(--paper-ink);text-decoration:underline}
  .card,.data-table,.fold,.media{break-inside:avoid}
  .diagonal-band{clip-path:none;background:#fff;border:1px solid #999}
  html[data-js="on"] [data-reveal]{opacity:1;transform:none}
}