:root{
  --ink:#0B1B2B;
  --ink-deep:#07131F;
  --paper:#F2F5F4;
  --text:#EAF2F4;
  --muted:#9FB3C1;
  --cyan:#38D6E0;
  --orange:#FF8A3D;
  --sage:#A8C7B8;
  --line:#294257;
  --amber:#FFD166;
  --rail:280px;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","Sarasa Mono SC",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.3,1);
  --gutter:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
main{display:block}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

body{
  min-height:100vh;
  overflow-x:hidden;
  background-color:var(--ink);
  background-image:
    linear-gradient(to right,rgba(41,66,87,.30) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(41,66,87,.30) 1px,transparent 1px);
  background-size:104px 104px;
  background-position:-1px -1px;
  color:var(--text);
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cyan);color:var(--ink-deep)}

h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(38px,6.4vw,68px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(19px,2.2vw,24px)}
h4{font-size:17px;letter-spacing:0}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:fixed;
  left:12px;
  top:12px;
  z-index:200;
  padding:10px 16px;
  background:var(--cyan);
  color:var(--ink-deep);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.08em;
  transform:translateY(-160%);
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- 页头：移动端顶部工具条 + 抽屉 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink-deep);
  border-bottom:1px solid var(--line);
}
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px var(--gutter);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 8px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
}
.brand-words{display:block;min-width:0}
.brand-name{display:block;font-size:16px;font-weight:800;letter-spacing:.01em;line-height:1.3}
.brand-sub{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--muted);
  line-height:1.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:12px;
  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:block;width:16px}
.nav-toggle__bars span{display:block;height:1px;background:currentColor;transition:transform .18s var(--ease),opacity .18s var(--ease)}
.nav-toggle__bars span+span{margin-top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{transform:translateY(-3px) rotate(-45deg)}

.site-nav{
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  border-top:1px solid transparent;
  background:var(--ink-deep);
  transition:max-height .22s var(--ease),visibility .22s var(--ease),border-color .22s var(--ease);
}
.site-nav[data-open]{
  max-height:calc(100vh - 62px);
  overflow-y:auto;
  visibility:visible;
  border-top-color:var(--line);
}
.nav-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:16px var(--gutter) 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.nav-heading__mono{color:var(--muted)}
.nav-link{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:14px var(--gutter);
  border-top:1px solid rgba(41,66,87,.55);
  color:var(--text);
  transition:color .16s var(--ease),background-color .16s var(--ease);
}
.nav-item:last-child .nav-link{border-bottom:1px solid rgba(41,66,87,.55)}
.nav-code{
  flex:0 0 auto;
  min-width:2.1em;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  transition:color .16s var(--ease);
}
.nav-label{font-size:16px;font-weight:600}
.nav-link:hover{color:var(--cyan);background:rgba(56,214,224,.06)}
.nav-link:hover .nav-code{color:var(--cyan)}
.nav-link[aria-current="page"]{
  color:var(--cyan);
  background:rgba(56,214,224,.08);
}
.nav-link[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:2px;
  background:var(--cyan);
}
.nav-link[aria-current="page"] .nav-code{color:var(--cyan)}
.nav-link[aria-current="page"] .nav-label{font-weight:800}
.nav-foot{
  margin-top:8px;
  padding:16px var(--gutter) 22px;
  border-top:1px solid rgba(41,66,87,.55);
}
.nav-foot__title{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--orange);
}
.nav-foot__text{margin-top:4px;font-size:13.5px;color:var(--text)}
.nav-foot__meta{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted);
  word-break:break-all;
}

.rail-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:rgba(41,66,87,.55);
  pointer-events:none;
}
.rail-progress__bar{
  display:block;
  width:calc(var(--p,0) * 1%);
  height:100%;
  background:var(--cyan);
  transition:width .12s linear;
}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  margin-top:72px;
  padding-bottom:8px;
  background:var(--ink-deep);
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:132px;
  height:2px;
  background:var(--cyan);
}
.footer-watermark{
  position:absolute;
  right:6px;
  top:-18px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(120px,20vw,250px);
  line-height:.8;
  letter-spacing:-.04em;
  color:rgba(56,214,224,.055);
  pointer-events:none;
  user-select:none;
}
.footer-top{
  position:relative;
  display:grid;
  gap:32px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:44px var(--gutter) 34px;
}
.footer-brand{max-width:34ch}
.footer-eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--cyan);
}
.footer-title{
  margin-top:10px;
  font-size:clamp(28px,4.4vw,42px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
}
.footer-tagline{margin-top:8px;font-size:14px;color:var(--muted)}
.footer-brand .btn{margin-top:18px}
.footer-col{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.footer-col__title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--muted);
}
.footer-list{margin-top:12px}
.footer-list a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:5px 0;
  font-size:14.5px;
  color:var(--text);
  transition:color .16s var(--ease);
}
.footer-list a::before{
  content:"";
  width:7px;
  height:1px;
  background:var(--line);
  transition:width .16s var(--ease),background-color .16s var(--ease);
}
.footer-list a:hover{color:var(--cyan)}
.footer-list a:hover::before{width:15px;background:var(--cyan)}
.footer-line{
  display:flex;
  gap:10px;
  margin-top:10px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--text);
  word-break:break-word;
}
.footer-line__k{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
  padding-top:3px;
}
.footer-note{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(41,66,87,.8);
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
}
.footer-bottom{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  max-width:1180px;
  margin:0 auto;
  padding:16px var(--gutter) 22px;
  border-top:1px solid var(--line);
}
.footer-legal,.footer-mono{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--muted);
}
.footer-mono{color:var(--orange)}

/* ---------- 通用排版与容器 ---------- */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(44px,6vw,88px) 0}
.prose{max-width:68ch}
.prose p+p{margin-top:1em}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(56,214,224,.4)}
.prose a:hover{border-bottom-color:var(--cyan)}
.prose ul,.prose ol{margin:1em 0;padding-left:1.15em;list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.45em}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--text);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn::after{
  content:"→";
  font-family:var(--font-mono);
  font-size:13px;
  transition:transform .18s var(--ease);
}
.btn:hover::after{transform:translateX(3px)}
.btn--primary{background:var(--cyan);border-color:var(--cyan);color:#04161d}
.btn--primary:hover{background:#63e4ec;border-color:#63e4ec}
.btn--ghost{border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn--accent{background:var(--orange);border-color:var(--orange);color:#20120a}
.btn--accent:hover{background:#ffa268;border-color:#ffa268}

/* ---------- 面包屑 ---------- */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--muted);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a:hover{color:var(--cyan)}
.crumbs [aria-current="page"]{color:var(--text)}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:24px;grid-template-columns:1fr}
.split{display:grid;gap:28px;grid-template-columns:1fr}

/* ---------- 卡片与标签 ---------- */
.card{
  position:relative;
  padding:22px;
  background:rgba(7,19,31,.72);
  border:1px solid var(--line);
}
.card--paper{background:var(--paper);border-color:#d5ded9;color:#0B1B2B}
.card--paper h3,.card--paper h4,.card--paper p{color:#0B1B2B}
.card--paper .tag{color:#3d5566;border-color:#c3d0cb}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid var(--line);
  background:rgba(7,19,31,.6);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
}
.tag--cyan{color:var(--cyan);border-color:rgba(56,214,224,.45)}
.tag--orange{color:var(--orange);border-color:rgba(255,138,61,.45)}
.tag--done{color:var(--sage);border-color:rgba(168,199,184,.45)}
.tag--warn{color:var(--amber);border-color:rgba(255,209,102,.45)}

/* ---------- 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  border:1px solid var(--line);
  background:linear-gradient(158deg,#0E2233 0%,#07131F 100%);
}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(to right,rgba(41,66,87,.45) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(41,66,87,.45) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}
.media-frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--square{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--phone{aspect-ratio:9/19.5;max-width:340px}
.media-frame__tag{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  padding:6px 10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink-deep);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--cyan);
}

/* ---------- 清单核对 ---------- */
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(41,66,87,.55);
  font-size:15.5px;
}
.checklist li::before{
  content:"";
  flex:0 0 auto;
  width:14px;
  height:14px;
  margin-top:5px;
  border:1px solid var(--line);
  background:transparent;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.checklist li[data-state="done"]{color:var(--muted)}
.checklist li[data-state="done"]::before{background:var(--sage);border-color:var(--sage)}

/* ---------- 展开索引组 ---------- */
.expand{border-bottom:1px solid var(--line)}
.expand:first-child{border-top:1px solid var(--line)}
.expand__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding:17px 2px;
  border:0;
  background:none;
  color:var(--text);
  font-size:17px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:color .16s var(--ease);
}
.expand__trigger:hover{color:var(--cyan)}
.expand__icon{
  position:relative;
  flex:0 0 auto;
  width:15px;
  height:15px;
  border:1px solid var(--line);
}
.expand__icon::before,.expand__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:var(--cyan);
}
.expand__icon::before{width:7px;height:1px}
.expand__icon::after{width:1px;height:7px;transition:transform .18s var(--ease)}
.expand[data-open] .expand__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.expand__panel{display:none;padding:0 2px 20px;font-size:15.5px;color:var(--muted);max-width:68ch}
.expand[data-open] .expand__panel{display:block}
.expand__panel p+p{margin-top:.8em}

/* ---------- 平板 ---------- */
@media (min-width:640px){
  :root{--gutter:28px}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
  .footer-brand{grid-column:1/-1}
}
@media (min-width:768px){
  :root{--gutter:32px}
  .footer-top{padding:52px var(--gutter) 38px}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 桌面：左侧固定索引轨道 ---------- */
@media (min-width:1024px){
  :root{--gutter:44px}
  .site-header{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:var(--rail);
    display:flex;
    flex-direction:column;
    border-bottom:0;
    border-right:1px solid var(--line);
    background:linear-gradient(180deg,#07131F 0%,#0A1826 58%,#07131F 100%);
  }
  .header-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:26px 24px 22px;
    border-bottom:1px solid var(--line);
  }
  .brand{gap:13px}
  .brand-mark{font-size:17px;padding:9px 10px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:9.5px;letter-spacing:.18em}
  .nav-toggle{display:none}
  .site-nav{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    visibility:visible;
    border-top:0;
    padding:18px 0 0;
    background:transparent;
  }
  .nav-heading{padding:0 24px 10px}
  .nav-link{padding:12px 24px}
  .nav-link[aria-current="page"]::before{top:10px;bottom:10px}
  .nav-foot{margin-top:auto;padding:18px 24px 24px}
  .rail-progress{
    left:auto;
    top:0;
    bottom:0;
    right:-1px;
    width:2px;
    height:auto;
    background:rgba(41,66,87,.4);
  }
  .rail-progress__bar{width:100%;height:calc(var(--p,0) * 1%);transition:height .12s linear}

  #main-content,.site-footer{margin-left:var(--rail)}
  .footer-top{
    grid-template-columns:1.35fr .8fr .85fr 1.25fr;
    gap:40px;
    padding:56px var(--gutter) 40px;
  }
  .footer-brand{grid-column:auto}
  .split{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px}
}

@media (min-width:1400px){
  :root{--rail:300px}
}

/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}