@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .container-wide { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }

  /* ---------- 页眉：两种表面都保持深色品牌锚点 ---------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: color-mix(in oklab, #070B12 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(232 238 246 / .1);
    color: #E8EEF6;
    /* 页眉固定深色令牌，不随纸面切换 */
    --text: #E8EEF6; --muted: #9FB0C4; --cyan-ink: #00D4FF; --line: rgb(232 238 246 / .08); --line-strong: rgb(232 238 246 / .16);
    --bg: #070B12; --surface: #0D1420; --raised: #121B2A; --focus: 0 0 0 2px #070B12, 0 0 0 4px #00D4FF; --hilite: inset 0 1px 0 rgb(255 255 255 / .06);
  }
  .header-inner { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; }
  .brand { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; min-height: 44px; }
  .brand-mark { width: 40px; height: 24px; flex: none; }
  .brand-mark .mark-start { stroke: var(--cyan); fill: var(--cyan); }
  .brand-mark .mark-end { stroke: var(--amber); fill: var(--amber); }
  .brand-mark .mark-wire { stroke: var(--cyan); }
  .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
  .brand-name { font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em; }
  .brand-sub { font-size: var(--t-xs); color: var(--muted); }
  @media (max-width: 1023px) { .brand-sub { display: none; } }

  .demo-band {
    background: repeating-linear-gradient(135deg, var(--amber) 0 12px, #C98A2E 12px 24px);
    color: #070B12; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em;
    text-align: center; padding: var(--s-1) var(--s-4); font-weight: 700;
  }

  /* ---------- 版块骨架 ---------- */
  .site-main { position: relative; }
  .section { position: relative; padding-block: var(--space-section); }
  .section-tight { padding-block: calc(var(--space-section) * .6); }
  .sec-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: 64ch; position: relative; }
  .sec-no {
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); display: inline-flex; align-items: center; gap: var(--s-3);
  }
  .sec-no::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 25%, transparent);
  }
  .sec-no .sec-topic { color: var(--cyan-ink); }
  .sec-head h2 { font-size: var(--t-xl); }
  .sec-head .lead { margin-top: var(--s-1); }
  .sec-head-row { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; max-width: none; }
  .sec-head-row .sec-head { margin-bottom: 0; }

  /* 导线轨：版块之间 1px 竖线 + 节点圆点，只在宽屏显示 */
  @media (min-width: 1200px) {
    .has-rail::before {
      content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
      left: calc(50% - var(--container) / 2 - var(--s-7));
      background: linear-gradient(to bottom, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent);
      pointer-events: none;
    }
    .has-rail .section .sec-no::before { display: none; }
    .has-rail .section .sec-head::before {
      content: ""; position: absolute; left: calc(-1 * var(--s-7) - 4px); top: 5px;
      width: 9px; height: 9px; border-radius: 50%; background: var(--cyan);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 25%, transparent), 0 0 0 6px var(--bg);
    }
    .has-rail .section-amber .sec-head::before { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 25%, transparent), 0 0 0 6px var(--bg); }
  }

  /* 7/5 非对称栅格 */
  .grid-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: center; }
  .grid-5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; }
  @media (max-width: 1023px) { .grid-7-5, .grid-5-7 { grid-template-columns: 1fr; gap: var(--s-6); } }

  /* 页面头（内页） */
  .page-head { padding-block: var(--s-8) var(--s-6); border-bottom: 1px solid var(--line); }
  .page-head .eyebrow { margin-bottom: var(--s-3); display: block; }
  .page-head h1 { font-size: var(--t-2xl); }
  .page-head .lead { margin-top: var(--s-4); max-width: 60ch; }
  .page-body { padding-block: var(--s-7) var(--s-9); }
  .page-body > * + * { margin-top: var(--s-7); }

  /* 纸面：正文 + 右侧粘性栏 */
  .with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-8); align-items: start; }
  .with-aside > aside { position: sticky; top: 88px; }
  @media (max-width: 1023px) {
    .with-aside { grid-template-columns: 1fr; }
    .with-aside > aside { position: static; order: -1; }
  }

  /* 面板：1px 内描边 + 顶部高光（设计 §6.2 分层） */
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--hilite); }
  .panel-raised { background: var(--raised); }
  .panel-pad { padding: var(--s-5); }
  .stack > * + * { margin-top: var(--s-4); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .split { display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; flex-wrap: wrap; }

  /* 空状态 */
  .empty { text-align: center; padding: var(--s-9) var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--muted); }
  .empty .icon { margin-inline: auto; width: 40px; height: 40px; color: var(--cyan-ink); margin-bottom: var(--s-4); }

  /* ---------- 页脚：图纸标题栏 ---------- */
  .site-footer { margin-top: var(--space-section); padding-block: var(--s-7) calc(var(--s-7) + 64px); border-top: 1px solid var(--line-strong); }
  @media (min-width: 768px) { .site-footer { padding-bottom: var(--s-7); } }
  .titleblock {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr 1.6fr; border: 1px solid var(--line-strong);
    background: var(--surface); box-shadow: var(--hilite); border-radius: var(--r-xs);
  }
  .tb-cell { padding: var(--s-4); border-right: 1px solid var(--line-strong); display: grid; gap: var(--s-1); align-content: start; min-width: 0; }
  .tb-cell:nth-child(5) { border-right: 0; }
  .tb-legal { grid-column: 1 / -1; border-top: 1px solid var(--line-strong); border-right: 0; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s-4); }
  .tb-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
  .tb-value { font-weight: 700; font-size: var(--t-base); }
  .tb-value-sm, .tb-note { font-size: var(--t-xs); color: var(--muted); }
  .tb-list { list-style: none; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-sm); }
  .tb-list a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; }
  .tb-list a:hover { color: var(--cyan-ink); text-decoration: underline; }
  .tb-beian { font-size: var(--t-xs); color: var(--muted); text-decoration: none; }
  .tb-beian:hover { color: var(--cyan-ink); }
  @media (max-width: 1023px) {
    .titleblock { grid-template-columns: 1fr 1fr; }
    .tb-project { grid-column: 1 / -1; border-bottom: 1px solid var(--line-strong); border-right: 0; }
    .tb-cell:nth-child(2) { border-bottom: 1px solid var(--line-strong); }
    .tb-cell:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line-strong); }
    .tb-cell:nth-child(5) { border-right: 0; }
    .tb-legal { grid-auto-flow: row; }
  }
  @media (max-width: 479px) {
    .titleblock { grid-template-columns: 1fr; }
    .tb-cell { border-right: 0; border-bottom: 1px solid var(--line-strong); }
    .tb-legal { border-bottom: 0; }
  }

  /* ---------- 移动端底部粘性 CTA ---------- */
  .sticky-cta {
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-float);
    display: grid; grid-auto-flow: column; gap: var(--s-2); padding: var(--s-2) var(--s-3);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-strong);
  }
  .sticky-cta .btn { min-height: 48px; }
  @media (min-width: 768px) { .sticky-cta { display: none; } }
}