:root {
  --color-surface: #fafafa;
  --color-surface-alt: #f1f1f1;
  --color-surface-deep: #e4e5e5;
  --color-ink: #3f4a4b;
  --color-ink-soft: #637273;
  --color-ink-muted: #778788;
  --color-line: #d8dada;
  --color-primary: #0c7f88;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #d9e9ea;
  --color-accent: #dc232f;
  --color-accent-ink: #ffffff;
  --color-highlight: #f5d3d5;
  --color-focus: #df1623;
  --color-contrast-surface: #152c2e;
  --color-contrast-ink: #e4e7e7;
  --color-contrast-line: #435557;
  --color-contrast-accent: #e6656e;
  --overlay-scrim: linear-gradient(180deg, rgba(21, 44, 46, 0.35) 0%, rgba(21, 44, 46, 0.72) 55%, rgba(21, 44, 46, 0.92) 100%);
  --font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", monospace;
  --font-body: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 9.7px;
  --text-sm: 13.0px;
  --text-base: 15px;
  --text-lg: 20.0px;
  --text-xl: 26.7px;
  --text-2xl: 35.5px;
  --text-3xl: 47.4px;
  --text-4xl: 63.1px;
  --text-display: clamp(44px, 9.1vw, 117px);
  --text-figure: clamp(37px, 6.6vw, 84px);
  --weight-heading: 677;
  --weight-body: 400;
  --leading-body: 1.79;
  --leading-heading: 1.15;
  --tracking-heading: 0.003em;
  --radius-sm: 206px;
  --radius-md: 468px;
  --radius-lg: 730px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 1px;
  --shadow-1: 0 0 0 1px rgba(220, 35, 47, 0.35);
  --shadow-2: 0 0 28px rgba(220, 35, 47, 0.35);
  --space-1: 7px;
  --space-2: 14px;
  --space-3: 21px;
  --space-4: 28px;
  --space-6: 42px;
  --space-8: 56px;
  --container: 1200px;
  --measure: 68ch;
  --gutter: 14px;
  --section-y: 68px;
  --section-y-lg: 95px;
}

/* =========================================================
   0 · 重置与中文排版基底
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--space-8);
}

body{
  margin:0;
  background-color:var(--color-surface);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--color-line) 52%,transparent) 0 1px,transparent 1px);
  background-size:calc(var(--space-8) * 2) 100%;
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:var(--weight-body);
  line-height:var(--leading-body);
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--space-2);
  color:var(--color-ink);
  font-family:var(--font-heading);
  font-weight:var(--weight-heading);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
  text-wrap:balance;
}

h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-lg)}
h4{font-size:var(--text-base);letter-spacing:.04em}

p{margin:0 0 var(--space-2)}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--color-primary);text-decoration:none;transition:color .2s ease,border-color .2s ease}
a:hover{color:var(--color-accent)}
strong,b{font-weight:var(--weight-heading)}
hr{border:0;border-top:var(--border-thin) dotted var(--color-line);margin:var(--space-4) 0}

:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-pill)}

/* =========================================================
   1 · 布局工具
   ========================================================= */
.u-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-3);
}

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

.u-mono{font-family:var(--font-mono);letter-spacing:.08em}
.u-index{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.24em;color:var(--color-ink-muted)}

.measure{max-width:var(--measure)}

.section{position:relative;padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
.section--tight{padding-block:var(--space-6)}
.section--alt{background:var(--color-surface-alt)}
.section--deep{background:var(--color-contrast-surface);color:var(--color-contrast-ink)}
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4{color:var(--color-contrast-ink)}
.section--deep a{color:var(--color-contrast-accent)}
.section--deep a:hover{color:var(--color-contrast-ink)}
.section--notch{border-top-left-radius:calc(var(--radius-sm) / 1.6)}

.rule-dotted{
  height:0;
  border:0;
  border-top:var(--border-thin) dotted var(--color-line);
  margin-block:var(--space-4);
}
.section--deep .rule-dotted{border-top-color:var(--color-contrast-line)}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
}
.grid > *{min-width:0}
.grid--gap-lg{gap:var(--space-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:1 / -1}

.split{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:var(--space-6);
}
.split--lean-left{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.split--lean-right{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.split--top{align-items:start}

/* =========================================================
   2 · 状态条 · 指示灯 · 胶囊 · 反色小块
   ========================================================= */
.statusbar{display:inline-flex;align-items:center;gap:3px}
.statusbar__seg{
  display:block;
  width:14px;height:6px;
  border-radius:var(--radius-pill);
  background:var(--color-surface-deep);
}
.statusbar__seg.is-on{background:var(--color-primary)}
.statusbar__seg.is-hot{background:var(--color-accent);box-shadow:var(--shadow-1)}
.statusbar--contrast .statusbar__seg{background:var(--color-contrast-line)}
.statusbar--contrast .statusbar__seg.is-on{background:var(--color-contrast-ink)}
.statusbar--contrast .statusbar__seg.is-hot{background:var(--color-contrast-accent);box-shadow:none}

.lamp{
  display:inline-block;
  flex:0 0 auto;
  width:7px;height:7px;
  border-radius:var(--radius-pill);
  background:var(--color-ink-muted);
}
.lamp--live{
  background:var(--color-contrast-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-contrast-accent) 24%,transparent);
  animation:lamp-pulse 3.6s ease-in-out infinite;
}
@keyframes lamp-pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:calc(var(--space-1) / 2) var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--color-surface-deep);
  color:var(--color-ink-soft);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.14em;
  line-height:1.8;
}
.chip--primary{background:var(--color-primary-soft);color:color-mix(in srgb,var(--color-primary) 76%,var(--color-ink))}
.chip--accent{background:var(--color-accent);color:var(--color-accent-ink)}
.chip--ghost{background:transparent;border:var(--border-thin) dotted var(--color-line);color:var(--color-ink-soft)}

.mark{
  display:inline-flex;
  align-items:center;
  padding:0 calc(var(--space-1) * .8);
  border-radius:var(--radius-pill);
  background:var(--color-highlight);
  color:color-mix(in srgb,var(--color-accent) 82%,var(--color-ink));
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1.9;
  letter-spacing:.06em;
}
.mark--primary{background:var(--color-primary);color:var(--color-primary-ink)}
.mark--accent{background:var(--color-accent);color:var(--color-accent-ink);box-shadow:var(--shadow-1)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin:0 0 var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.26em;
  color:var(--color-ink-muted);
}
.section--deep .eyebrow{color:var(--color-contrast-accent)}

/* =========================================================
   3 · 按钮
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  padding:var(--space-2) var(--space-4);
  border:var(--border-thin) solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  line-height:1.4;
  cursor:pointer;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn--primary{background:var(--color-primary);color:var(--color-primary-ink)}
.btn--primary:hover{background:color-mix(in srgb,var(--color-primary) 84%,var(--color-contrast-surface));color:var(--color-primary-ink)}
.btn--accent{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--accent:hover{background:color-mix(in srgb,var(--color-accent) 84%,var(--color-contrast-surface));color:var(--color-accent-ink)}
.btn--ghost{background:transparent;border-color:var(--color-line);color:var(--color-ink)}
.btn--ghost:hover{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary)}
.btn--contrast{background:var(--color-contrast-ink);color:var(--color-contrast-surface)}
.btn--contrast:hover{background:var(--color-contrast-accent);color:var(--color-contrast-surface)}
.btn--sm{padding:calc(var(--space-1) * 1.1) var(--space-3);font-size:var(--text-xs)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  border-bottom:var(--border-thin) dotted currentColor;
  padding-bottom:2px;
}

/* =========================================================
   4 · 面板 · 卡片 · 数据
   ========================================================= */
.panel{
  position:relative;
  padding:var(--space-4);
  background:var(--color-surface);
  border:var(--border-thin) dotted var(--color-line);
  border-radius:calc(var(--radius-sm) / 5);
}
.panel--alt{background:var(--color-surface-alt)}
.panel--soft{background:var(--color-primary-soft);border-color:transparent}
.panel--deep{
  background:var(--color-contrast-surface);
  color:var(--color-contrast-ink);
  border-color:var(--color-contrast-line);
}
.panel--deep h2,.panel--deep h3{color:var(--color-contrast-ink)}
.panel--offset{
  border-top-left-radius:calc(var(--radius-sm) / 1.8);
  border-bottom-right-radius:calc(var(--radius-sm) / 1.8);
}
.panel--capsule{
  border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-6);
}
.panel__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.panel__title{font-size:var(--text-lg);margin:0}
.panel__meta{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.16em;
  color:var(--color-ink-muted);
}

.card{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-4);
  background:var(--color-surface);
  border:var(--border-thin) dotted var(--color-line);
  border-radius:calc(var(--radius-sm) / 5);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.card:hover{
  border-color:var(--color-primary);
  box-shadow:0 0 24px color-mix(in srgb,var(--color-primary) 18%,transparent);
  transform:translateY(-2px);
}
.card__index{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.24em;
  color:var(--color-ink-muted);
}
.card__title{font-size:var(--text-lg);margin:0}
.card__text{color:var(--color-ink-soft);font-size:var(--text-sm);margin:0}
.card--deep{background:var(--color-contrast-surface);color:var(--color-contrast-ink);border-color:var(--color-contrast-line)}
.card--deep .card__title{color:var(--color-contrast-ink)}
.card--deep .card__text{color:color-mix(in srgb,var(--color-contrast-ink) 78%,transparent)}

.stat{display:flex;flex-direction:column;gap:var(--space-1)}
.stat__value{
  font-family:var(--font-mono);
  font-size:var(--text-2xl);
  font-weight:var(--weight-heading);
  line-height:1;
  color:var(--color-ink);
}
.stat__value--accent{color:var(--color-accent)}
.stat__value--primary{color:var(--color-primary)}
.stat__label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.2em;
  color:var(--color-ink-muted);
}
.panel--deep .stat__value{color:var(--color-contrast-ink)}
.panel--deep .stat__label{color:color-mix(in srgb,var(--color-contrast-ink) 62%,transparent)}

/* =========================================================
   5 · 段落级标题 · 正文 · 面包屑
   ========================================================= */
.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  margin-bottom:var(--space-4);
}
.section-head__index{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.3em;
  color:var(--color-ink-muted);
}
.section-head__title{font-size:var(--text-xl);margin:0}
.section-head__lede{
  max-width:var(--measure);
  margin:0;
  color:var(--color-ink-soft);
  font-size:var(--text-base);
}
.section-head--offset{margin-left:calc(var(--space-4) * -1)}
@media (max-width:820px){.section-head--offset{margin-left:0}}

.section--deep .section-head__index{color:var(--color-contrast-accent)}
.section--deep .section-head__lede{color:color-mix(in srgb,var(--color-contrast-ink) 76%,transparent)}

.prose{max-width:var(--measure)}
.prose > *{max-width:100%}
.prose h2{font-size:var(--text-xl);margin-block:var(--space-6) var(--space-2)}
.prose h3{font-size:var(--text-lg);margin-block:var(--space-4) var(--space-2)}
.prose p{margin-bottom:var(--space-3)}
.prose a{border-bottom:var(--border-thin) dotted currentColor}
.prose ul,.prose ol{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  padding-left:var(--space-4);
  margin-bottom:var(--space-3);
}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--color-accent)}
.prose blockquote{
  padding:var(--space-2) var(--space-3);
  border-left:var(--space-1) solid var(--color-primary);
  background:var(--color-surface-alt);
  color:var(--color-ink-soft);
}
.prose code{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  background:var(--color-surface-deep);
  padding:0 calc(var(--space-1) * .8);
  border-radius:var(--radius-pill);
}
.section--deep .prose blockquote{background:color-mix(in srgb,var(--color-contrast-ink) 8%,transparent);color:var(--color-contrast-ink)}
.section--deep .prose code{background:color-mix(in srgb,var(--color-contrast-ink) 14%,transparent)}

.lede{
  font-size:var(--text-lg);
  line-height:1.6;
  color:var(--color-ink-soft);
  max-width:var(--measure);
}
.section--deep .lede{color:color-mix(in srgb,var(--color-contrast-ink) 84%,transparent)}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.14em;
  color:var(--color-ink-muted);
}
.breadcrumbs a{color:var(--color-ink-soft)}
.breadcrumbs a:hover{color:var(--color-primary)}
.breadcrumbs__sep{color:var(--color-line)}

/* =========================================================
   6 · 时间轴 · 主题带
   ========================================================= */
.timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding-left:var(--space-4);
  margin:0;
}
.timeline::before{
  content:"";
  position:absolute;
  left:3px;top:0;bottom:0;
  border-left:var(--border-thin) dotted var(--color-primary);
}
.timeline__item{position:relative}
.timeline__mark{
  position:absolute;
  left:calc(var(--space-4) * -1);
  top:calc(var(--space-1) * 1.1);
  width:7px;height:7px;
  border-radius:var(--radius-pill);
  background:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent);
}
.timeline__item--accent .timeline__mark{background:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 18%,transparent)}
.timeline__time{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.2em;
  color:var(--color-ink-muted);
}
.timeline__item--accent .timeline__time{color:var(--color-accent)}
.timeline__title{font-size:var(--text-lg);margin:calc(var(--space-1) / 2) 0 var(--space-1)}
.timeline__text{margin:0;color:var(--color-ink-soft);font-size:var(--text-base)}
.section--deep .timeline::before{border-left-color:var(--color-contrast-line)}
.section--deep .timeline__time{color:var(--color-contrast-accent)}
.section--deep .timeline__text{color:color-mix(in srgb,var(--color-contrast-ink) 78%,transparent)}

.band{
  background:var(--color-surface-alt);
  border-block:var(--border-thin) dotted var(--color-line);
  padding-block:var(--space-3);
}
.band-scroll{
  display:flex;
  gap:var(--space-3);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--space-2);
}
.band-scroll::-webkit-scrollbar{height:6px}
.band-scroll::-webkit-scrollbar-thumb{background:var(--color-surface-deep);border-radius:var(--radius-pill)}
.band-scroll > *{
  flex:0 0 auto;
  scroll-snap-align:start;
  min-width:min(320px,78vw);
}

/* =========================================================
   7 · 图片容器（展签式）
   ========================================================= */
.figure{
  position:relative;
  overflow:hidden;
  background:var(--color-surface-alt);
  border-radius:calc(var(--radius-sm) / 6);
}
.figure__frame{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--color-surface-deep);
}
.figure__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.05);
}
.figure__scrim{
  position:absolute;
  inset:0;
  background:var(--overlay-scrim);
  pointer-events:none;
}
.figure__tag{
  position:absolute;
  left:var(--space-2);
  bottom:var(--space-2);
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:calc(var(--space-1) / 2) var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-1);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.12em;
  line-height:1.8;
}
.figure__caption{
  padding:var(--space-2) var(--space-3);
  border-top:var(--border-thin) dotted var(--color-line);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.08em;
  color:var(--color-ink-soft);
  background:var(--color-surface);
}
.figure--wide .figure__frame{aspect-ratio:21 / 9}
.figure--tall .figure__frame{aspect-ratio:4 / 5}
.figure--square .figure__frame{aspect-ratio:1 / 1}
.section--deep .figure{background:color-mix(in srgb,var(--color-contrast-ink) 8%,transparent)}
.section--deep .figure__caption{background:transparent;border-top-color:var(--color-contrast-line);color:color-mix(in srgb,var(--color-contrast-ink) 74%,transparent)}

/* 纯 CSS 主题视觉：分屏首屏右侧用 */
.orb{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb,var(--color-primary) 42%,var(--color-contrast-surface)) 0%, var(--color-contrast-surface) 62%),
    var(--color-contrast-surface);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.orb__ring{
  position:absolute;
  inset:9%;
  border-radius:var(--radius-lg);
  border:var(--border-thin) dotted var(--color-contrast-line);
}
.orb__core{
  position:absolute;
  left:50%;top:50%;
  width:26%;height:26%;
  transform:translate(-50%,-50%);
  border-radius:var(--radius-lg);
  background:var(--color-accent);
  box-shadow:var(--shadow-2);
}
.orb__label{
  position:absolute;
  left:var(--space-3);
  bottom:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.24em;
  color:var(--color-contrast-ink);
}

/* =========================================================
   8 · 头部
   ========================================================= */
.site-header{
  position:relative;
  z-index:60;
  background:var(--color-surface);
}

.skip-link{
  position:absolute;
  left:var(--space-2);
  top:-120px;
  z-index:99;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--color-contrast-surface);
  color:var(--color-contrast-ink);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.1em;
  transition:top .2s ease;
}
.skip-link:focus{top:var(--space-2);color:var(--color-contrast-ink)}

.status-strip{
  background:var(--color-contrast-surface);
  color:var(--color-contrast-ink);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.12em;
}
.status-strip__inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding-block:var(--space-2);
  min-height:calc(var(--space-4) + var(--space-1));
}
.status-strip__live{color:var(--color-contrast-ink)}
.status-strip__note{color:color-mix(in srgb,var(--color-contrast-ink) 70%,transparent)}
.status-strip__sep{color:var(--color-contrast-line)}
.status-strip__code{
  margin-left:auto;
  color:var(--color-contrast-accent);
  letter-spacing:.22em;
}

.masthead{
  padding-top:var(--space-4);
  background:var(--color-surface);
}
.masthead__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-3);
}
.masthead__aside{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.14em;
  color:var(--color-ink-muted);
}
.masthead__aside--end{justify-content:flex-end}
.masthead__edition{white-space:nowrap}
.masthead__brand{text-align:center}
.masthead__name{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:var(--weight-heading);
  font-size:var(--text-3xl);
  line-height:1;
  letter-spacing:.08em;
  color:var(--color-ink);
}
.masthead__name:hover{color:var(--color-primary)}
.masthead__tagline{
  margin:var(--space-1) 0 0;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.2em;
  color:var(--color-ink-soft);
}

.primary-nav{
  margin-top:var(--space-3);
  border-top:var(--border-thin) dotted var(--color-line);
}
.primary-nav__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-1);
  padding:var(--space-2) 0;
}
.primary-nav__item{display:flex}
.primary-nav__link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:calc(var(--space-1) * 1.2) var(--space-3);
  border:var(--border-thin) solid transparent;
  border-radius:var(--radius-pill);
  color:var(--color-ink);
  font-size:var(--text-sm);
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.primary-nav__link:hover{background:var(--color-primary-soft);color:var(--color-primary)}
.primary-nav__link[aria-current="page"]{
  background:var(--color-primary);
  color:var(--color-primary-ink);
  box-shadow:0 0 22px color-mix(in srgb,var(--color-primary) 34%,transparent);
}
.primary-nav__link[aria-current="page"] .nav-index{
  color:color-mix(in srgb,var(--color-primary-ink) 74%,transparent);
}
.nav-index{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.1em;
  color:var(--color-ink-muted);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:var(--space-1);
  padding:calc(var(--space-1) * 1.1) var(--space-3);
  border:var(--border-thin) solid transparent;
  border-radius:var(--radius-pill);
  background:var(--color-surface-deep);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.14em;
}
.nav-toggle:hover{background:var(--color-primary-soft);color:var(--color-primary)}
.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  width:14px;
}
.nav-toggle__bars i{
  display:block;
  height:1.5px;
  border-radius:var(--radius-pill);
  background:currentColor;
}
.nav-toggle[aria-expanded="true"]{
  background:var(--color-primary);
  color:var(--color-primary-ink);
}

/* =========================================================
   9 · 页脚（反色）
   ========================================================= */
.site-footer{
  position:relative;
  background:var(--color-contrast-surface);
  color:var(--color-contrast-ink);
  padding-top:var(--space-6);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:min(38%,420px);
  height:var(--space-1);
  background:var(--color-accent);
}
.site-footer a{color:color-mix(in srgb,var(--color-contrast-ink) 84%,transparent)}
.site-footer a:hover{color:var(--color-contrast-accent)}

.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--space-6);
  padding-block:var(--space-6) var(--space-6);
}
.footer-brand__name{
  margin:0 0 var(--space-1);
  font-family:var(--font-heading);
  font-size:var(--text-2xl);
  color:var(--color-contrast-ink);
  letter-spacing:.06em;
}
.footer-brand__tagline{
  margin:0 0 var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.22em;
  color:var(--color-contrast-accent);
}
.footer-brand__note{
  max-width:44ch;
  margin:var(--space-3) 0 var(--space-4);
  font-size:var(--text-sm);
  color:color-mix(in srgb,var(--color-contrast-ink) 74%,transparent);
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
}
.footer-col:nth-child(2){margin-top:var(--space-4)}
.footer-col:nth-child(3){margin-top:var(--space-1)}
.footer-col__title{
  display:flex;
  align-items:baseline;
  gap:var(--space-1);
  margin:0 0 var(--space-2);
  padding-bottom:var(--space-1);
  border-bottom:var(--border-thin) dotted var(--color-contrast-line);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:var(--weight-heading);
  letter-spacing:.2em;
  color:var(--color-contrast-ink);
}
.footer-col__index{
  font-size:var(--text-xs);
  color:var(--color-contrast-accent);
}
.footer-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}
.footer-list a{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:2px 0;
  border-radius:var(--radius-pill);
  font-size:var(--text-sm);
}
.footer-list a::before{
  content:"";
  flex:0 0 auto;
  width:5px;height:5px;
  border-radius:var(--radius-pill);
  background:var(--color-contrast-line);
  transition:background-color .2s ease;
}
.footer-list a:hover::before{background:var(--color-contrast-accent)}
.footer-list--contact{gap:var(--space-2)}
.footer-list--contact li{display:flex;flex-direction:column;gap:2px}
.footer-label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.2em;
  color:var(--color-contrast-accent);
}
.footer-value{
  font-size:var(--text-sm);
  color:color-mix(in srgb,var(--color-contrast-ink) 80%,transparent);
  overflow-wrap:anywhere;
}

.footer-bottom{
  margin-top:var(--space-4);
  border-top:var(--border-thin) dotted var(--color-contrast-line);
}
.footer-bottom__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding-block:var(--space-4) var(--space-6);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.12em;
  color:color-mix(in srgb,var(--color-contrast-ink) 68%,transparent);
}
.footer-bottom__inner p{margin:0}
.footer-bottom__meta{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  color:var(--color-contrast-ink);
}

/* =========================================================
   10 · 滚动进度 · 滚动显现
   ========================================================= */
.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:90;
  pointer-events:none;
  background:color-mix(in srgb,var(--color-line) 50%,transparent);
}
.scroll-progress__bar{
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--color-accent);
  box-shadow:var(--shadow-2);
}

.has-js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.has-js [data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* =========================================================
   11 · 响应式
   ========================================================= */
@media (max-width:1040px){
  .footer-top{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .split{gap:var(--space-4)}
}

@media (max-width:1000px){
  .col-3,.col-4,.col-5,.col-6{grid-column:span 6}
  .col-7,.col-8,.col-9{grid-column:1 / -1}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .masthead__inner{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .masthead__brand{text-align:left;justify-self:start}
  .masthead__aside--start{display:none}
  .masthead__aside--end{justify-self:end}
  .masthead__cta{display:none}
  .nav-toggle{display:inline-flex}

  .primary-nav{display:none}
  .primary-nav[data-open]{display:block}
  .primary-nav__list{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:calc(var(--space-1) / 2);
    padding:var(--space-2) 0 var(--space-3);
  }
  .primary-nav__item{width:100%}
  .primary-nav__link{
    width:100%;
    justify-content:flex-start;
    font-size:var(--text-base);
  }

  .split,
  .split--lean-left,
  .split--lean-right{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .footer-col:nth-child(2),
  .footer-col:nth-child(3){margin-top:0}
  .footer-bottom__inner{justify-content:flex-start}
}

@media (max-width:660px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-3,.col-4,.col-5,.col-6{grid-column:1 / -1}
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .masthead__name{font-size:var(--text-2xl)}
  .band-scroll > *{min-width:min(280px,84vw)}
  .panel,.card{padding:var(--space-3)}
  .panel--capsule{padding:var(--space-3) var(--space-4)}
}

@media (max-width:420px){
  .status-strip__code{margin-left:0}
  .primary-nav__link{padding:var(--space-1) var(--space-2)}
}

/* =========================================================
   12 · 动效偏好
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .lamp--live{animation:none;opacity:1}
  .has-js [data-reveal],
  .has-js [data-reveal].is-visible{
    opacity:1;
    transform:none;
    transition:none;
  }
  .card:hover{transform:none}
}