:root{
  --ink-900:#061426;
  --ink-800:#0A2440;
  --paper:#F5FAFC;
  --cyan:#12D6C4;
  --orange:#FF7A2F;
  --amber:#F0B64D;
  --slate:#5E7184;
  --mist:#CFEFEA;
  --teal:#0B6B66;
  --line:rgba(207,239,234,.16);
  --rail-w:96px;
  --bar-h:62px;
  --font-display:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.68,.28,1);
}

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

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

body{
  margin:0;
  padding-top:var(--bar-h);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.8;
  color:var(--paper);
  background:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;}
img{height:auto;}

h1,h2,h3,h4{
  margin:0 0 .6em;
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.22;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.05rem,5.2vw,3.5rem);}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem);}
h3{font-size:clamp(1.12rem,2vw,1.4rem);font-weight:800;}
h4{font-size:1rem;font-weight:800;letter-spacing:.02em;}

p{margin:0 0 1.1em;}

a{color:var(--cyan);text-underline-offset:.22em;text-decoration-thickness:1px;}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,122,47,.32);
}

#main-content:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;}

.u-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 容器与排版 ---------- */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
}

.prose{max-width:40em;line-height:1.88;color:var(--paper);}
.prose p:last-child{margin-bottom:0;}

.section{padding-block:clamp(38px,6vw,88px);}
.section__title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6em;
  margin-bottom:.9em;
}

.rule{
  border:0;
  border-top:1px solid var(--line);
  margin-block:clamp(22px,4vw,44px);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--orange);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.35em .7em;
  border:1px solid rgba(207,239,234,.3);
  border-radius:1px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  line-height:1.3;
  color:var(--mist);
}
.tag--cyan{color:var(--cyan);border-color:rgba(18,214,196,.5);}
.tag--amber{color:var(--amber);border-color:rgba(240,182,77,.55);background:rgba(240,182,77,.08);}
.tag--orange{color:var(--orange);border-color:rgba(255,122,47,.5);background:rgba(255,122,47,.08);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.35em;
  border:1px solid transparent;
  border-radius:2px;
  background:var(--cyan);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{background:var(--mist);transform:translateY(-2px);}
.btn--ghost{
  background:transparent;
  color:var(--paper);
  border-color:rgba(207,239,234,.35);
}
.btn--ghost:hover{background:rgba(207,239,234,.08);color:var(--paper);}
.btn--orange{background:var(--orange);color:var(--ink-900);}
.btn--orange:hover{background:var(--amber);}
.btn--amber{
  background:transparent;
  color:var(--amber);
  border-color:rgba(240,182,77,.55);
}
.btn--amber:hover{background:rgba(240,182,77,.12);color:var(--amber);}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--slate);
}
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
  margin:0;padding:0;
  list-style:none;
}
.breadcrumb__item{display:inline-flex;align-items:center;gap:.5em;}
.breadcrumb__link{
  color:var(--slate);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.breadcrumb__link:hover{color:var(--cyan);border-bottom-color:rgba(18,214,196,.6);}
.breadcrumb__sep{color:var(--teal);}
.breadcrumb__item[aria-current]{color:var(--mist);}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,32px);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}

@media (max-width:820px){
  .grid--2,.grid--3,.grid--split{grid-template-columns:1fr;}
}

/* ---------- 面板与框景 ---------- */
.panel{
  padding:clamp(18px,2.6vw,32px);
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:3px;
}

.frame{
  position:relative;
  padding:clamp(20px,3vw,42px);
  border:1px solid var(--line);
  border-radius:3px;
  background:rgba(10,36,64,.35);
}
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:1px solid var(--cyan);
}
.frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.frame::after{bottom:-1px;right:-1px;border-top:0;border-left:0;}
.frame__tag{
  position:absolute;
  top:-.72em;
  left:18px;
  padding:0 .5em;
  background:var(--ink-900);
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.18em;
  color:var(--cyan);
}

/* ---------- 图片容器基础规则 ---------- */
.media{margin:0;display:grid;gap:.75rem;}
.media__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid rgba(207,239,234,.18);
  border-radius:3px;
  background:
    repeating-linear-gradient(135deg,rgba(18,214,196,.10) 0 2px,transparent 2px 10px),
    var(--ink-800);
}
.media__img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.media--tall .media__frame{aspect-ratio:4/5;}
.media--square .media__frame{aspect-ratio:1/1;}
.media__caption{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--slate);
}

/* ---------- 章节索引 ---------- */
.toc{
  margin:0;padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.toc__link{
  display:grid;
  grid-template-columns:3.4em 1fr;
  gap:.8em;
  align-items:baseline;
  padding:.55em .65em;
  border-left:2px solid transparent;
  color:var(--slate);
  font-size:.9rem;
  text-decoration:none;
  transition:color .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease);
}
.toc__link:hover{color:var(--paper);background:rgba(207,239,234,.06);}
.toc__link[data-active="true"]{
  color:var(--ink-900);
  background:var(--mist);
  border-left-color:var(--orange);
  font-weight:700;
}
.toc__num{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.08em;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:fixed;
  top:8px;left:8px;
  z-index:200;
  padding:10px 16px;
  background:var(--cyan);
  color:var(--ink-900);
  font-weight:700;
  font-size:.86rem;
  text-decoration:none;
  border-radius:2px;
  transform:translateY(-180%);
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* =========================================================
   HEADER —— 移动优先：顶部命令栏 + 序号抽屉
   ========================================================= */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:80;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-900));
  border-bottom:1px solid var(--line);
  color:var(--paper);
}

.site-header__bar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  height:var(--bar-h);
  padding:0 16px;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-900));
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--paper);
}
.brand__num{
  font-family:var(--font-mono);
  font-size:.78rem;
  line-height:1;
  letter-spacing:.06em;
  color:var(--cyan);
  border:1px solid rgba(18,214,196,.45);
  border-radius:2px;
  padding:.2em .42em;
}
.brand__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.04em;
  white-space:nowrap;
}

.site-header__status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 0 auto;
}
.status-chip{
  font-family:var(--font-mono);
  font-size:.64rem;
  line-height:1;
  letter-spacing:.1em;
  color:var(--amber);
  border:1px solid rgba(240,182,77,.55);
  border-radius:1px;
  padding:.28em .45em;
  white-space:nowrap;
}
.status-text{
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--slate);
  white-space:nowrap;
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
  padding:.5em .7em;
  background:transparent;
  color:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:14px;
}
.nav-toggle__bars i{
  display:block;
  height:1.5px;
  background:currentColor;
  transition:transform .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child{transform:translateY(2.75px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child{transform:translateY(-2.75px) rotate(-45deg);}

.site-nav{
  position:absolute;
  top:100%;left:0;right:0;
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  background:var(--ink-900);
  border-bottom:1px solid var(--line);
  transition:max-height .22s var(--ease),visibility .22s var(--ease);
}
.site-nav[data-open="true"]{
  max-height:min(78vh,560px);
  overflow-y:auto;
  visibility:visible;
}

.site-nav__list{
  margin:0;padding:6px 0;
  list-style:none;
  display:flex;
  flex-direction:column;
}
.site-nav__item{border-bottom:1px solid rgba(207,239,234,.08);}
.site-nav__link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:.85em 20px;
  color:var(--paper);
  text-decoration:none;
  font-size:.98rem;
  letter-spacing:.04em;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.site-nav__link:hover{background:rgba(207,239,234,.07);}
.site-nav__link[aria-current="page"]{
  background:var(--cyan);
  color:var(--ink-900);
  font-weight:700;
}
.site-nav__num{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--cyan);
}
.site-nav__link[aria-current="page"] .site-nav__num{color:var(--ink-900);}
.site-nav__label{
  font-size:.98rem;
  letter-spacing:.04em;
  color:inherit;
}
.site-nav__foot{padding:14px 20px 20px;}
.site-nav__cta{
  display:inline-flex;
  align-items:center;
  padding:.72em 1.1em;
  background:var(--orange);
  color:var(--ink-900);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:2px;
  transition:background-color .18s var(--ease),transform .18s var(--ease);
}
.site-nav__cta:hover{background:var(--amber);transform:translateY(-1px);}

.site-header__meta{display:none;}

.header-progress{
  position:fixed;
  z-index:90;
  top:0;left:0;right:0;
  height:3px;
  background:rgba(207,239,234,.12);
  pointer-events:none;
}
.header-progress__bar{
  display:block;
  width:100%;height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  transform:scaleX(var(--p,0));
  transform-origin:left center;
  transition:transform .08s linear;
}

@media (max-width:400px){
  .status-text{display:none;}
  .brand__name{font-size:.84rem;}
}

/* =========================================================
   HEADER —— 桌面：96px 竖向序号脊
   ========================================================= */
@media (min-width:900px){
  body{padding-top:0;padding-left:var(--rail-w);}

  .site-header{
    top:0;bottom:0;left:0;right:auto;
    width:var(--rail-w);
    display:flex;
    flex-direction:column;
    border-bottom:0;
    border-right:1px solid var(--line);
    background:linear-gradient(180deg,var(--ink-800) 0%,var(--ink-900) 65%);
  }

  .site-header__bar{
    flex:0 0 auto;
    flex-direction:column;
    align-items:center;
    gap:16px;
    height:auto;
    padding:22px 8px 10px;
    background:none;
  }

  .brand{flex-direction:column;gap:10px;}
  .brand__num{font-size:1rem;padding:.24em .45em;}
  .brand__name{
    writing-mode:vertical-rl;
    font-size:.72rem;
    letter-spacing:.26em;
  }

  .site-header__status{flex-direction:column;gap:6px;margin:0;}
  .status-text{display:none;}

  .nav-toggle{display:none;}

  .site-nav{
    position:static;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    max-height:none;
    overflow:visible;
    visibility:visible;
    background:none;
    border-bottom:0;
    padding:14px 0 8px;
  }
  .site-nav__list{padding:0;gap:2px;}
  .site-nav__item{border-bottom:0;}
  .site-nav__link{
    justify-content:center;
    gap:0;
    height:44px;
    padding:0;
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:.06em;
    color:var(--slate);
  }
  .site-nav__link::before{
    content:"";
    position:absolute;
    left:0;top:50%;
    width:8px;height:1px;
    background:currentColor;
    opacity:.45;
    transition:width .18s var(--ease),background-color .18s var(--ease),opacity .18s var(--ease);
  }
  .site-nav__link:hover{color:var(--paper);background:rgba(207,239,234,.06);}
  .site-nav__link:hover::before{width:20px;background:var(--orange);opacity:1;}
  .site-nav__link[aria-current="page"]{background:var(--cyan);color:var(--ink-900);font-weight:700;}
  .site-nav__link[aria-current="page"]::before{width:0;opacity:0;}

  .site-nav__num{font-size:.8rem;color:inherit;}
  .site-nav__link[aria-current="page"] .site-nav__num{color:var(--ink-900);}

  .site-nav__label{
    position:absolute;
    left:calc(100% + 8px);
    top:50%;
    z-index:20;
    transform:translate(-8px,-50%);
    padding:.42em .72em;
    background:var(--ink-800);
    border:1px solid rgba(18,214,196,.45);
    border-left:2px solid var(--orange);
    border-radius:1px;
    color:var(--paper);
    font-family:var(--font-body);
    font-size:.72rem;
    letter-spacing:.1em;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s var(--ease),transform .18s var(--ease);
  }
  .site-nav__link:hover .site-nav__label,
  .site-nav__link:focus-visible .site-nav__label,
  .site-nav__link[aria-current="page"] .site-nav__label{
    opacity:1;
    transform:translate(0,-50%);
  }

  .site-nav__foot{margin-top:auto;padding:12px 8px 6px;text-align:center;}
  .site-nav__cta{
    display:inline-block;
    writing-mode:vertical-rl;
    padding:.85em .45em;
    font-size:.68rem;
    letter-spacing:.22em;
  }

  .site-header__meta{
    display:block;
    margin:0;
    padding:10px 4px 14px;
    border-top:1px solid rgba(207,239,234,.1);
    font-family:var(--font-mono);
    font-size:.58rem;
    letter-spacing:.1em;
    color:var(--slate);
    text-align:center;
  }

  .header-progress{
    top:0;bottom:0;
    left:calc(var(--rail-w) - 3px);
    right:auto;
    width:3px;
    height:auto;
  }
  .header-progress__bar{
    background:linear-gradient(180deg,var(--cyan),var(--orange));
    transform:scaleY(var(--p,0));
    transform-origin:center top;
  }
}

@media (min-width:900px) and (max-height:720px){
  .site-nav__link{height:38px;}
  .brand__name{font-size:.62rem;letter-spacing:.2em;}
  .site-header__bar{padding-top:16px;gap:12px;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative;
  margin-top:clamp(48px,8vw,110px);
  padding:clamp(32px,6vw,64px) 0 24px;
  background:var(--ink-800);
  border-top:1px solid var(--line);
  color:var(--paper);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:clamp(18px,4vw,48px);
  width:64px;height:2px;
  background:var(--orange);
}

.site-footer__inner{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px,4vw,56px);
}

.site-footer__mark{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.45rem,3.4vw,2.05rem);
  line-height:1.2;
  letter-spacing:.02em;
}
.site-footer__mark::before{
  content:"";
  display:block;
  width:34px;height:3px;
  margin-bottom:14px;
  background:var(--orange);
}
.site-footer__tagline{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--cyan);
}
.site-footer__note{
  margin:0;
  max-width:30em;
  font-size:.84rem;
  line-height:1.8;
  color:var(--slate);
}

.footer-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 16px;
}
.footer-nav__title{
  display:flex;
  align-items:center;
  gap:.5em;
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--mist);
}
.footer-nav__title::before{
  content:"";
  width:6px;height:6px;
  background:var(--amber);
}
.footer-nav__list{
  margin:0;padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55em;
}
.footer-nav__link{
  color:var(--slate);
  font-size:.88rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.footer-nav__link:hover{color:var(--cyan);border-bottom-color:rgba(18,214,196,.6);}

.site-footer__meta{
  width:100%;
  max-width:1180px;
  margin:clamp(26px,4vw,44px) auto 0;
  padding:clamp(16px,3vw,26px) clamp(18px,4vw,48px) 0;
  border-top:1px solid rgba(207,239,234,.12);
}
.site-footer__contact{
  margin:0 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
  font-size:.84rem;
  color:var(--mist);
}
.site-footer__contact-item{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6em;
}
.site-footer__k{
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.16em;
  color:var(--amber);
  border:1px solid rgba(240,182,77,.4);
  padding:.15em .45em;
}
.site-footer__service{
  margin:0 0 14px;
  max-width:52em;
  font-size:.78rem;
  line-height:1.8;
  color:var(--slate);
}
.site-footer__inline-link{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(18,214,196,.5);
}
.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:.6em;
  margin:0;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--slate);
}
.site-footer__dot{color:var(--teal);}

@media (min-width:640px){
  .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
}
@media (min-width:900px){
  .site-footer__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,2fr);}
}
@media (max-width:520px){
  .footer-nav{grid-template-columns:1fr;}
  .site-footer__contact-item{display:block;}
  .site-footer__k{margin-right:.5em;}
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .site-nav{transition:none;}
  .header-progress__bar{transition:none;}
}