/* ==========================================================================
   豪利777官网 V4 · 共享样式表 /assets/site.css
   技术蓝图网格 · 夜间控制台 · 章节索引体系
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 变量
   -------------------------------------------------------------------------- */
:root{
  --ink:#0B0D10;
  --slate:#14181F;
  --graphite:#1C222B;
  --hairline:#2B323B;
  --silver:#C9D0D8;
  --mist:#8B939E;
  --amber:#FFB020;
  --amber-deep:#A66A08;
  --cyan:#2FD4EA;
  --cyan-deep:#0F6E80;
  --white:#FFFFFF;
  --ember:#E8763A;

  --font-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe 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:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --line:1px solid var(--hairline);
  --radius:3px;
  --radius-sm:2px;

  --gutter:clamp(16px,3.2vw,56px);
  --header-h:72px;
  --header-h-min:56px;

  --shadow-card:0 1px 0 rgba(255,255,255,.03),0 14px 30px -26px rgba(0,0,0,.95);
  --shadow-dock:0 18px 40px -22px rgba(0,0,0,.95);

  --ease:180ms ease;
  --ease-slow:220ms ease;
}

/* --------------------------------------------------------------------------
   02 Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:var(--line);margin:0}

/* --------------------------------------------------------------------------
   03 基础排版
   -------------------------------------------------------------------------- */
body{
  background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(20,24,31,.85) 0%,rgba(11,13,16,0) 42%),
    radial-gradient(1200px 620px at 82% -8%,rgba(255,176,32,.055),transparent 62%),
    radial-gradient(900px 520px at 4% 8%,rgba(47,212,234,.045),transparent 60%);
  background-repeat:no-repeat;
  color:var(--silver);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.01em;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--white);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:900;line-height:1.05}
h2{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:800}
h3{font-size:1.125rem;font-weight:700;line-height:1.4;letter-spacing:0}
h4{font-size:1rem;font-weight:700;line-height:1.4;letter-spacing:0}

p{max-width:72ch}
strong{color:var(--white);font-weight:700}
small{font-size:.8125rem}

::selection{background:rgba(255,176,32,.28);color:var(--white)}

/* --------------------------------------------------------------------------
   04 通用工具
   -------------------------------------------------------------------------- */
.shell{
  width:100%;
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.mono{
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mist);
}

.upright-note{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--mist);
  user-select:none;
}

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

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-72px;
  z-index:200;
  display:inline-block;
  padding:10px 20px;
  background:var(--amber);
  color:var(--ink);
  font-weight:700;
  font-size:.875rem;
  letter-spacing:.04em;
  border-radius:0 0 var(--radius) var(--radius);
  transition:top var(--ease);
}
.skip-link:focus{top:0}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.nav-link:focus-visible,
.util-link:focus-visible,
.footer-list a:focus-visible,
.dock-link:focus-visible{
  outline-offset:4px;
}

/* --------------------------------------------------------------------------
   05 蓝图背景层
   -------------------------------------------------------------------------- */
.grid-field{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(43,50,59,.42) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(43,50,59,.42) 1px,transparent 1px);
  background-size:88px 88px;
  opacity:.55;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15) 88%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15) 88%);
}

/* --------------------------------------------------------------------------
   06 头部
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,#171C24 0%,#0E1116 100%);
  border-bottom:var(--line);
  transition:box-shadow var(--ease-slow);
}
.site-header.is-condensed{
  box-shadow:0 12px 28px -26px rgba(0,0,0,1);
}
.site-header .grid-field{
  background-size:64px 64px;
  opacity:.34;
}

.header-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,36px);
  transition:min-height var(--ease-slow);
}
.site-header.is-condensed .header-inner{min-height:var(--header-h-min)}

.brand-block{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.brand-mark{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  color:var(--white);
}
.brand-name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.25rem;
  letter-spacing:-.01em;
}
.brand-note{
  font-size:.75rem;
  letter-spacing:.24em;
  color:var(--mist);
}
.brand-mark:hover .brand-name{color:var(--amber)}

.version-badge{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--amber);
  border:1px solid rgba(255,176,32,.45);
  background:rgba(255,176,32,.07);
  border-radius:var(--radius-sm);
  padding:2px 7px;
  line-height:1.4;
}

.header-utility{
  display:flex;
  align-items:center;
  gap:14px;
  margin-right:auto;
  padding-left:clamp(4px,1.4vw,22px);
  border-left:var(--line);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--mist);
  max-width:none;
  white-space:nowrap;
}
.util-item{color:var(--mist)}
.util-sep{
  display:inline-block;
  width:1px;
  height:12px;
  background:var(--hairline);
}
.util-link{
  color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.util-link:hover,.util-link:focus-visible{
  color:var(--cyan);
  border-bottom-color:rgba(47,212,234,.5);
}

/* 导航 */
.site-nav{
  flex:0 0 auto;
  z-index:3;
}
.nav-drawer-heading{display:none}
.nav-list{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,32px);
}
.nav-item{position:relative}
.nav-link{
  position:relative;
  display:inline-block;
  padding:6px 0;
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--silver);
  transition:color var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--ease);
}
.nav-link:hover,.nav-link:focus-visible{color:var(--white)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{
  color:var(--amber);
}
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);
  background:linear-gradient(90deg,var(--amber),rgba(255,176,32,0));
}

/* 移动端按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  background:rgba(28,34,43,.75);
  border:var(--line);
  border-radius:var(--radius);
  color:var(--silver);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease);
}
.nav-toggle:hover{border-color:var(--amber);color:var(--white)}
.nav-toggle-bars{
  position:relative;
  display:inline-block;
  width:16px;
  height:10px;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
  transition:transform var(--ease),top var(--ease),bottom var(--ease);
}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars::after{bottom:0}
.nav-toggle[data-open]{border-color:var(--amber);color:var(--amber)}
.nav-toggle[data-open] .nav-toggle-bars::before{top:4px;transform:rotate(45deg)}
.nav-toggle[data-open] .nav-toggle-bars::after{bottom:5px;transform:rotate(-45deg)}

/* 遮罩 */
.nav-scrim{
  position:fixed;
  inset:0;
  z-index:65;
  background:rgba(11,13,16,.66);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--ease);
}
.nav-scrim[data-open]{opacity:1;pointer-events:auto}

/* 阅读进度 */
.progress-track{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:rgba(43,50,59,.55);
  z-index:4;
}
.progress-bar{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan) 0%,#7FD6D2 42%,var(--amber) 100%);
}

/* --------------------------------------------------------------------------
   07 页脚
   -------------------------------------------------------------------------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,120px);
  border-top:var(--line);
  background:linear-gradient(180deg,var(--slate) 0%,var(--ink) 82%);
  color:var(--mist);
  font-size:.875rem;
}
.footer-inner{
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1.5fr;
}
.footer-zone{
  padding:30px clamp(14px,1.6vw,26px);
  border-left:var(--line);
  min-width:0;
}
.footer-zone:first-child{
  border-left:0;
  padding-left:0;
}
.footer-mark{
  display:inline-block;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--white);
}
.footer-mark:hover{color:var(--amber)}
.footer-note{
  margin-top:8px;
  max-width:26ch;
  font-size:.75rem;
  letter-spacing:.08em;
  line-height:1.8;
  color:var(--mist);
}
.footer-icp{
  margin-top:12px;
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--mist);
}
.footer-title{
  font-size:.75rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.2em;
  color:var(--silver);
  text-transform:uppercase;
  margin-bottom:14px;
}
.footer-list li{margin-bottom:8px;line-height:1.7}
.footer-list a{
  color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.footer-list a:hover,.footer-list a:focus-visible{
  color:var(--amber);
  border-bottom-color:rgba(255,176,32,.45);
}
.footer-list--plain li{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.footer-label{
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--hairline);
  filter:brightness(2.1);
}
.footer-list--plain .mono{color:var(--silver);font-size:.8125rem}

.footer-base{
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  padding:14px var(--gutter) 20px;
  border-top:var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.75rem;
  letter-spacing:.06em;
}
.footer-base-line{max-width:none;color:var(--mist)}
.footer-base-meta{max-width:none;color:var(--mist);display:flex;align-items:center;gap:8px}
.footer-dot{color:var(--hairline);filter:brightness(2)}

/* --------------------------------------------------------------------------
   08 右下联系入口
   -------------------------------------------------------------------------- */
.contact-dock{
  position:fixed;
  right:clamp(12px,2vw,28px);
  bottom:clamp(12px,2vw,28px);
  z-index:90;
}
.dock-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  background:linear-gradient(150deg,#20262F 0%,#14181F 100%);
  border:1px solid rgba(255,176,32,.42);
  border-radius:var(--radius);
  color:var(--amber);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  cursor:pointer;
  box-shadow:var(--shadow-dock);
  transition:border-color var(--ease),color var(--ease),transform var(--ease);
}
.dock-toggle:hover{color:var(--white);border-color:var(--amber);transform:translateY(-1px)}
.dock-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(47,212,234,.16);
}
.contact-dock[data-open] .dock-dot{background:var(--amber);box-shadow:0 0 0 3px rgba(255,176,32,.18)}

.dock-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  width:min(320px,80vw);
  padding:18px 20px 20px;
  background:linear-gradient(165deg,var(--graphite) 0%,var(--ink) 100%);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-dock);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
}
.contact-dock[data-open] .dock-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dock-title{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--mist);
  text-transform:uppercase;
  margin-bottom:12px;
  max-width:none;
}
.dock-list li{margin-bottom:10px}
.dock-list li:last-child{margin-bottom:0}
.dock-link{
  display:inline-block;
  color:var(--cyan);
  font-size:.875rem;
  border-bottom:1px solid rgba(47,212,234,.35);
  transition:color var(--ease),border-color var(--ease);
}
.dock-link:hover{color:var(--white);border-bottom-color:var(--white)}
.dock-row{display:flex;flex-direction:column;gap:2px}
.dock-label{
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--mist);
}
.dock-value{font-size:.8125rem;color:var(--silver);word-break:break-all}

/* --------------------------------------------------------------------------
   09 按钮
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 24px;
  background:var(--graphite);
  border:var(--line);
  border-radius:var(--radius);
  color:var(--silver);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.4;
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease),transform var(--ease),background-color var(--ease);
}
.btn:hover{
  border-color:var(--amber);
  color:var(--white);
  transform:translateY(-1px);
}
.btn--primary{
  background:linear-gradient(135deg,var(--amber) 0%,var(--amber-deep) 100%);
  border-color:transparent;
  color:var(--ink);
}
.btn--primary:hover{color:#05070A;border-color:transparent}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:rgba(255,176,32,.06)}
.btn--sm{padding:8px 16px;font-size:.8125rem}

/* --------------------------------------------------------------------------
   10 面包屑 / 主内容
   -------------------------------------------------------------------------- */
#main-content{display:block;scroll-margin-top:calc(var(--header-h) + 16px)}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:22px 0 0;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--mist);
}
.crumbs__item{display:inline-flex;align-items:center;gap:10px}
.crumbs__item + .crumbs__item::before{
  content:"/";
  color:var(--hairline);
  filter:brightness(1.9);
}
.crumbs a{color:var(--mist);transition:color var(--ease)}
.crumbs a:hover{color:var(--cyan)}
.crumbs__item[aria-current="page"]{color:var(--amber)}

.prose{max-width:68ch}
.prose p{margin-bottom:1.15em;line-height:1.85}
.prose p:last-child{margin-bottom:0}
.prose h3{margin:2em 0 .7em;color:var(--white)}
.prose ul{margin:0 0 1.2em;padding-left:0}
.prose ul li{
  position:relative;
  padding-left:20px;
  margin-bottom:.5em;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.85em;
  width:6px;
  height:1px;
  background:var(--amber);
}
.prose a{
  color:var(--cyan);
  border-bottom:1px solid rgba(47,212,234,.35);
  transition:border-color var(--ease),color var(--ease);
}
.prose a:hover{color:var(--white);border-bottom-color:var(--white)}

/* --------------------------------------------------------------------------
   11 章节单元
   -------------------------------------------------------------------------- */
.section{
  position:relative;
  padding:clamp(48px,7vw,104px) 0;
  border-top:var(--line);
}
.section:first-of-type{border-top:0}
.section > .grid-field{opacity:.28;background-size:112px 112px}

.section__head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(56px,92px) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px);
  align-items:start;
}
.section__no{
  font-family:var(--font-mono);
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  color:var(--mist);
  transition:color var(--ease);
}
.section__no::after{
  content:"";
  display:block;
  width:1px;
  height:44px;
  margin-top:14px;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform var(--ease);
}
.section.is-active .section__no{color:var(--amber)}
.section.is-active .section__no::after{transform:scaleY(1)}

.section__body{min-width:0}
.section__title{margin-bottom:14px}
.section__summary{
  font-size:1.0625rem;
  line-height:1.85;
  color:var(--mist);
  max-width:66ch;
}
.section__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

/* --------------------------------------------------------------------------
   12 栅格
   -------------------------------------------------------------------------- */
.grid{
  display:grid;
  gap:clamp(16px,2vw,28px);
}
.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))}
.grid--flush{gap:0}

.rail{
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(220px,3fr);
  gap:clamp(20px,3vw,48px);
  align-items:start;
}

/* --------------------------------------------------------------------------
   13 数据卡 / 统计 / 索引 / 标签 / 表格
   -------------------------------------------------------------------------- */
.data-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px 22px 24px;
  background:linear-gradient(160deg,var(--graphite) 0%,var(--ink) 78%);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  transition:transform var(--ease),border-color var(--ease);
}
.data-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  background:radial-gradient(220px 120px at 100% 0%,rgba(255,176,32,.09),transparent 70%);
  pointer-events:none;
}
.data-card:hover{
  transform:translateY(-2px);
  border-color:#3B4553;
}
.data-card--amber::before{background:radial-gradient(220px 120px at 100% 0%,rgba(255,176,32,.14),transparent 70%)}
.data-card--cyan::before{background:radial-gradient(220px 120px at 100% 0%,rgba(47,212,234,.14),transparent 70%)}
.data-card--ember::before{background:radial-gradient(220px 120px at 100% 0%,rgba(232,118,58,.15),transparent 70%)}

.data-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.data-card__label{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--mist);
}
.data-card__value{
  font-family:var(--font-mono);
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.1;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.data-card--cyan .data-card__value{color:var(--cyan)}
.data-card--ember .data-card__value{color:var(--ember)}
.data-card__unit{
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--mist);
  margin-left:8px;
}
.data-card__list li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  border-bottom:1px dashed var(--hairline);
  font-size:.875rem;
  color:var(--silver);
}
.data-card__list li:last-child{border-bottom:0;padding-bottom:0}
.data-card__list .mono{color:var(--mist);font-size:.8125rem}

.stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat__value{
  font-family:var(--font-mono);
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.05;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.stat__unit{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--mist);
}

.index-list li{border-bottom:1px dashed var(--hairline)}
.index-list li:last-child{border-bottom:0}
.index-list a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  font-size:.9375rem;
  color:var(--silver);
  transition:color var(--ease);
}
.index-list a:hover{color:var(--amber)}
.index-list__meta{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--mist);
  flex:0 0 auto;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:var(--line);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--mist);
  white-space:nowrap;
}
.tag--amber{color:var(--amber);border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.06)}
.tag--cyan{color:var(--cyan);border-color:rgba(47,212,234,.35);background:rgba(47,212,234,.06)}
.tag--ember{color:var(--ember);border-color:rgba(232,118,58,.4);background:rgba(232,118,58,.07)}

.table-rail{display:flex;flex-direction:column}
.table-rail__row{
  display:grid;
  grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) minmax(90px,.9fr);
  gap:16px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:var(--line);
  font-size:.9375rem;
}
.table-rail__row:first-child{border-top:var(--line)}
.table-rail__key{
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--mist);
}
.table-rail__val{color:var(--silver)}
.table-rail__num{
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--amber);
  text-align:right;
}

/* --------------------------------------------------------------------------
   14 图片容器
   -------------------------------------------------------------------------- */
.media-frame{
  position:relative;
  overflow:hidden;
  border:var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(150deg,var(--slate) 0%,var(--ink) 68%),
    radial-gradient(300px 160px at 88% 8%,rgba(255,176,32,.1),transparent 72%);
  aspect-ratio:16/9;
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-frame__cap{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--mist);
  text-shadow:0 1px 8px rgba(11,13,16,.9);
}

/* --------------------------------------------------------------------------
   15 响应式
   -------------------------------------------------------------------------- */
@media (max-width:1200px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-inner{grid-template-columns:1.3fr 1fr 1fr;}
  .footer-zone{border-top:var(--line)}
  .footer-zone:nth-child(-n+3){border-top:0;padding-top:0}
  .footer-zone:nth-child(3n+1){border-left:0;padding-left:0}
}

@media (max-width:1000px){
  .rail{grid-template-columns:minmax(0,1fr)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  :root{--header-h:60px;--header-h-min:56px}

  .header-utility{display:none}
  .nav-toggle{display:inline-flex}

  .site-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:70;
    background:linear-gradient(180deg,var(--slate) 0%,var(--ink) 100%);
    border-top:var(--line);
    padding:18px clamp(16px,5vw,34px) calc(26px + env(safe-area-inset-bottom,0px));
    max-height:82vh;
    overflow-y:auto;
    transform:translateY(103%);
    transition:transform var(--ease-slow);
  }
  .site-nav[data-open]{transform:translateY(0)}

  .nav-drawer-heading{
    display:block;
    font-family:var(--font-mono);
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.2em;
    color:var(--mist);
    margin-bottom:14px;
    max-width:none;
  }
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-link{
    display:block;
    padding:15px 0;
    border-bottom:var(--line);
    font-size:1rem;
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]::before{
    content:"";
    display:inline-block;
    width:8px;
    height:1px;
    margin-right:10px;
    vertical-align:middle;
    background:var(--amber);
  }
  .nav-item:last-child .nav-link{border-bottom:0}

  .section__head{grid-template-columns:minmax(44px,64px) minmax(0,1fr)}
  .section__no::after{height:30px;margin-top:10px}

  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-zone{padding:24px clamp(12px,3vw,22px)}
  .footer-zone:nth-child(-n+3){border-top:var(--line);padding-top:24px}
  .footer-zone:nth-child(-n+2){border-top:0;padding-top:24px}
  .footer-zone:nth-child(odd){border-left:0;padding-left:0}
  .footer-zone:nth-child(even){border-left:var(--line)}
}

@media (max-width:640px){
  :root{--gutter:18px}

  h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  h2{font-size:clamp(1.4rem,6vw,1.8rem)}

  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}

  .table-rail__row{
    grid-template-columns:minmax(0,1fr);
    gap:6px;
  }
  .table-rail__num{text-align:left}

  .footer-inner{grid-template-columns:minmax(0,1fr)}
  .footer-zone{
    border-left:0;
    border-top:var(--line);
    padding:22px 0;
  }
  .footer-zone:first-child{border-top:0;padding-top:26px}
  .footer-base{flex-direction:column;align-items:flex-start}

  .contact-dock{right:14px;bottom:14px}
  .dock-panel{width:min(300px,86vw)}
}

/* --------------------------------------------------------------------------
   16 动效降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .data-card:hover{transform:none}
  .btn:hover{transform:none}
  .dock-toggle:hover{transform:none}
}