/* ============================================================
   HO体育 · 共享样式表 /assets/site.css
   侧边轨道导航 + 分屏赛事指挥台
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --ink-950:#041C18;
  --field-800:#0A3B32;
  --teal-600:#106B5B;
  --cyan-400:#33F0C4;
  --cyan-100:#D6FBF1;
  --amber-500:#FF8A2B;
  --wine-700:#6B1F35;
  --indigo-800:#232050;
  --paper-50:#F5F2E9;
  --slate-700:#2E3B39;
  --white:#FFFFFF;

  --line-dark:rgba(51,240,196,.22);
  --line-dark-soft:rgba(51,240,196,.12);
  --line-paper:rgba(46,59,57,.20);
  --ink-soft:rgba(214,251,241,.72);
  --ink-mute:rgba(214,251,241,.52);

  --font-display:"Barlow Semi Condensed","Oswald","PingFang SC","Noto Sans SC",sans-serif;
  --font-body:"Inter","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --rail-w:88px;
  --header-h:56px;
  --gap:24px;
  --shadow-layer:8px 8px 0 rgba(4,28,24,.22);
  --tr:140ms ease-out;
  --tr-slow:180ms ease-out;
}

/* ---------- 2. Reset 与基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
body{
  margin:0;
  min-height:100vh;
  padding-left:var(--rail-w);
  background:var(--field-800);
  color:var(--cyan-100);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{margin:0}
ul,ol{padding:0}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
main{display:block}
::selection{background:var(--cyan-400);color:var(--ink-950)}

/* ---------- 3. 中文排版与工具类 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.18;
  color:inherit;
}
h1{font-size:clamp(30px,4.4vw,40px);line-height:1.1}
h2{font-size:clamp(23px,2.8vw,28px);line-height:1.22}
h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
h4{font-size:16px;line-height:1.4;letter-spacing:0;font-weight:700}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;line-height:1.4;color:var(--cyan-400);
}
.eyebrow::before{content:"";width:20px;height:1px;background:currentColor}
.lede{font-size:17px;line-height:1.8;opacity:.84;max-width:62ch}
.rule{border:0;border-top:1px solid var(--line-dark);margin:0}

/* ---------- 4. 布局骨架 ---------- */
.container{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.section--field{background:var(--field-800);color:var(--cyan-100)}
.section--ink{background:var(--ink-950);color:var(--cyan-100)}
.section--teal{background:var(--teal-600);color:var(--cyan-100)}
.section--paper{background:var(--paper-50);color:var(--slate-700)}
.section--mint{background:var(--cyan-100);color:var(--slate-700)}
.section--wine{background:var(--wine-700);color:#fff}
.section--indigo{background:var(--indigo-800);color:var(--cyan-100)}

.grid{display:grid;gap:var(--gap)}
.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))}
.split{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:40px;
  align-items:start;
}
.split--reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.side-rail{position:sticky;top:32px}

/* 浅底分区的组件色彩适配 */
.section--paper .eyebrow,.section--mint .eyebrow{color:var(--wine-700)}
.section--paper .rule,.section--mint .rule{border-top-color:var(--line-paper)}
.section--paper .tag--cyan,.section--mint .tag--cyan{color:var(--teal-600)}
.section--paper .stat__value,.section--mint .stat__value{color:var(--teal-600)}
.section--paper .index-list li,.section--mint .index-list li{border-bottom-color:var(--line-paper)}
.section--paper .card--stack,.section--mint .card--stack{box-shadow:8px 8px 0 rgba(46,59,57,.14)}

/* ---------- 5. 头部：侧边轨道 ---------- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(-180%);
  padding:10px 16px;
  background:var(--cyan-400);color:var(--ink-950);
  border:1px solid var(--ink-950);
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  text-decoration:none;
  transition:transform var(--tr);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}

.site-header{
  position:fixed;
  inset:0 auto 0 0;
  z-index:80;
  width:var(--rail-w);
}
.site-header__bar{display:none}

.rail{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:22px 10px 16px;
  background:var(--ink-950);
  border-right:1px solid var(--line-dark);
  overflow-y:auto;
  scrollbar-width:thin;
}
.rail__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--cyan-100);
}
.brand__mark{
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--cyan-400);
  color:var(--cyan-400);
  font-family:var(--font-display);font-size:17px;font-weight:800;
  letter-spacing:-.02em;
  box-shadow:3px 3px 0 rgba(51,240,196,.18);
  transition:box-shadow var(--tr),transform var(--tr);
}
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark{
  box-shadow:6px 6px 0 rgba(51,240,196,.26);
  transform:translate(-1px,-1px);
}
.brand__word{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--font-display);
  font-size:13px;font-weight:700;
  letter-spacing:.2em;
  color:var(--cyan-100);
}
.brand__tags{
  display:grid;
  gap:6px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1.3;
  letter-spacing:.04em;
  color:var(--ink-mute);
}
.brand__tags span{display:block}

.rail__nav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  min-height:0;
  padding:16px 0;
  overflow-y:auto;
  scrollbar-width:none;
}
.nav-list{list-style:none;display:grid;gap:2px;width:100%}
.nav-link{
  display:grid;
  gap:2px;
  justify-items:center;
  padding:7px 4px;
  text-decoration:none;
  color:var(--ink-mute);
  border-left:3px solid transparent;
  transition:color var(--tr),background var(--tr),border-color var(--tr);
}
.nav-link__idx{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  opacity:.8;
}
.nav-link__label{
  font-size:11px;
  line-height:1.2;
  letter-spacing:0;
  text-align:center;
  font-weight:500;
}
.nav-link:hover{
  color:var(--cyan-100);
  background:rgba(51,240,196,.07);
  border-left-color:rgba(51,240,196,.5);
}
.nav-link[aria-current="page"]{
  color:var(--cyan-400);
  background:rgba(51,240,196,.13);
  border-left-color:var(--cyan-400);
}
.nav-link[aria-current="page"] .nav-link__idx{opacity:1}

.rail__foot{
  flex:0 0 auto;
  padding-top:14px;
  border-top:1px solid var(--line-dark-soft);
}
.rail__cta{
  display:block;
  padding:9px 2px;
  text-align:center;
  font-family:var(--font-display);
  font-size:11px;font-weight:700;
  letter-spacing:0;
  text-decoration:none;
  color:var(--ink-950);
  background:var(--cyan-400);
  border:1px solid var(--cyan-400);
  transition:background var(--tr),color var(--tr);
}
.rail__cta:hover,.rail__cta:focus-visible{
  background:transparent;
  color:var(--cyan-400);
}
.rail__progress{
  position:absolute;
  top:0;right:0;bottom:0;
  width:3px;
  background:rgba(51,240,196,.10);
  pointer-events:none;
}
.rail__progress-bar{
  display:block;
  width:100%;height:100%;
  background:var(--cyan-400);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform 80ms linear;
}

/* 移动端按钮与遮罩（默认不显示） */
.nav-toggle{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:transparent;
  color:var(--cyan-100);
  border:1px solid rgba(51,240,196,.45);
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.08em;
  cursor:pointer;
  transition:background var(--tr),border-color var(--tr);
}
.nav-toggle:hover{background:rgba(51,240,196,.1);border-color:var(--cyan-400)}
.nav-toggle__bars{display:grid;gap:3px;width:16px}
.nav-toggle__bar{
  display:block;height:1.5px;
  background:currentColor;
  transition:transform var(--tr),opacity var(--tr);
}
.nav-toggle__text{line-height:1}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}
.nav-scrim{
  position:fixed;inset:0;
  background:rgba(4,28,24,.64);
  opacity:0;pointer-events:none;
  transition:opacity var(--tr-slow);
  z-index:5;
}

/* ---------- 6. 页脚 ---------- */
.site-footer{
  position:relative;
  background:var(--ink-950);
  color:var(--cyan-100);
  border-top:1px solid var(--line-dark);
}
.site-footer::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cyan-400) 0%,rgba(51,240,196,0) 58%,var(--amber-500) 100%);
}
.footer__strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:16px 0 13px;
  border-bottom:1px solid var(--line-dark-soft);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-mute);
}
.footer__strip-label{display:inline-flex;align-items:center;gap:8px}
.footer__strip-label::before{
  content:"";width:6px;height:6px;background:var(--cyan-400);
}
.footer__strip-note{color:var(--amber-500)}

.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.3fr 1fr;
  gap:36px;
  padding:44px 0 36px;
}
.footer__col{min-width:0}
.footer-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:20px;font-weight:800;letter-spacing:-.01em;
}
.footer-brand__mark{
  display:grid;place-items:center;
  width:34px;height:34px;
  border:1px solid var(--cyan-400);
  color:var(--cyan-400);
  font-size:13px;font-weight:800;
}
.footer__intro{
  margin-top:14px;
  max-width:28ch;
  font-size:14px;line-height:1.7;
  color:var(--ink-soft);
}
.footer__version{
  margin-top:16px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.08em;
  color:var(--ink-mute);
}
.footer__title{
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line-dark-soft);
  font-family:var(--font-body);
  font-size:12px;font-weight:700;
  letter-spacing:.2em;
  color:var(--cyan-400);
}
.footer__list{
  list-style:none;
  display:grid;gap:9px;
  font-size:14px;line-height:1.6;
  color:var(--ink-soft);
}
.footer__list--contact li{word-break:break-word}
.footer__value{font-family:var(--font-mono);font-size:13px;letter-spacing:.01em}
.footer__link{
  color:inherit;
  text-decoration:none;
  padding-bottom:1px;
  background-image:linear-gradient(var(--cyan-400),var(--cyan-400));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:color var(--tr),background-size var(--tr);
}
.footer__link:hover,.footer__link:focus-visible{
  color:var(--cyan-400);
  background-size:100% 1px;
}
.footer__link[aria-current="page"]{color:var(--cyan-400);background-size:100% 1px}
.footer__note{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;
  color:var(--ink-mute);
}
.footer__icp{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em}
.footer__base{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:16px 0 22px;
  border-top:1px solid var(--line-dark-soft);
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.08em;
  color:var(--ink-mute);
}

/* ---------- 7. 链接、按钮、标签 ---------- */
.text-link{
  color:inherit;
  text-decoration:none;
  padding-bottom:1px;
  background-image:linear-gradient(var(--cyan-400),var(--cyan-400));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:color var(--tr),background-size var(--tr);
}
.text-link:hover,.text-link:focus-visible{color:var(--cyan-400);background-size:100% 1px}
.section--paper .text-link:hover,.section--mint .text-link:hover{
  color:var(--teal-600);
  background-image:linear-gradient(var(--teal-600),var(--teal-600));
}

.btn{
  display:inline-flex;
  align-items:center;justify-content:center;
  gap:8px;
  padding:12px 20px;
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  letter-spacing:.02em;line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr);
}
.btn--primary{background:var(--cyan-400);color:var(--ink-950);border-color:var(--cyan-400)}
.btn--primary:hover{background:transparent;color:var(--cyan-400);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{transform:translateY(-1px);box-shadow:4px 4px 0 rgba(4,28,24,.18);border-color:var(--cyan-400);color:var(--cyan-400)}
.btn--amber{background:var(--amber-500);color:var(--ink-950);border-color:var(--amber-500)}
.btn--amber:hover{background:transparent;color:var(--amber-500);transform:translateY(-1px)}
.btn--dark{background:var(--ink-950);color:var(--cyan-100);border-color:var(--ink-950)}
.btn--dark:hover{background:transparent;color:var(--ink-950);transform:translateY(-1px)}
.btn--block{display:flex;width:100%}

.copy-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.04em;
  color:var(--cyan-400);
  background:transparent;
  border:1px solid rgba(51,240,196,.45);
  cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.copy-btn:hover{background:rgba(51,240,196,.12);border-color:var(--cyan-400)}
.copy-btn[data-copied="true"]{background:var(--cyan-400);color:var(--ink-950);border-color:var(--cyan-400)}
.section--paper .copy-btn,.section--mint .copy-btn{color:var(--teal-600);border-color:rgba(16,107,91,.45)}
.section--paper .copy-btn:hover,.section--mint .copy-btn:hover{background:rgba(16,107,91,.1)}
.section--paper .copy-btn[data-copied="true"],.section--mint .copy-btn[data-copied="true"]{
  background:var(--teal-600);color:#fff;border-color:var(--teal-600);
}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;
  border:1px solid currentColor;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.06em;line-height:1.5;
  color:var(--cyan-400);
}
.tag--cyan{color:var(--cyan-400)}
.tag--amber{color:var(--amber-500)}
.tag--paper{color:var(--slate-700);background:var(--cyan-100);border-color:var(--line-paper)}
.tag--wine{color:#fff;background:var(--wine-700);border-color:var(--wine-700)}
.tag--solid{color:var(--ink-950);background:var(--cyan-400);border-color:var(--cyan-400)}

.float-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px 7px 12px;
  background:var(--amber-500);
  color:var(--ink-950);
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.06em;
  text-decoration:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:transform var(--tr),background var(--tr);
}
.float-tag:hover,.float-tag:focus-visible{transform:translateX(6px);background:#FFA24F}

/* ---------- 8. 卡片与面板 ---------- */
.card{
  position:relative;
  padding:20px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-dark);
  color:inherit;
  transition:transform var(--tr),border-color var(--tr),background var(--tr);
}
.card:hover{transform:translateY(-2px);border-color:rgba(51,240,196,.5)}
.card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line-dark-soft);
}
.card__title{
  font-family:var(--font-display);
  font-size:18px;font-weight:700;letter-spacing:-.01em;
}
.card__meta{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.08em;
  color:var(--ink-mute);
}
.card__foot{
  margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line-dark-soft);
  font-size:13px;color:var(--ink-soft);
}
.card--paper{
  background:var(--paper-50);
  color:var(--slate-700);
  border-color:var(--line-paper);
  box-shadow:var(--shadow-layer);
}
.card--paper .card__head,.card--paper .card__foot{border-color:var(--line-paper)}
.card--paper .card__meta{color:rgba(46,59,57,.62)}
.card--white{
  background:var(--white);
  color:var(--slate-700);
  border-color:var(--line-paper);
}
.card--wine{
  background:var(--wine-700);
  color:#fff;
  border-color:rgba(255,255,255,.24);
}
.card--stack{box-shadow:var(--shadow-layer)}
.card--stack:hover{box-shadow:12px 12px 0 rgba(4,28,24,.28)}

.slash-panel{
  position:relative;
  padding:28px 26px 36px;
  background:var(--wine-700);
  color:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 26px));
}
.slash-panel--amber{background:var(--amber-500);color:var(--ink-950)}
.slash-panel--teal{background:var(--teal-600);color:var(--cyan-100)}

.stat{display:grid;gap:4px}
.stat__value{
  font-family:var(--font-mono);
  font-size:26px;font-weight:700;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--cyan-400);
}
.stat__label{
  font-size:12px;letter-spacing:.08em;
  color:var(--ink-mute);
}
.section--paper .stat__label,.section--mint .stat__label{color:rgba(46,59,57,.66)}

/* ---------- 9. 表格 ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line-paper);
  background:var(--white);
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.55;
  color:var(--slate-700);
}
.table caption{
  padding:10px 12px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;
  color:var(--slate-700);
  background:var(--cyan-100);
  border-bottom:1px solid var(--line-paper);
}
.table th{
  padding:10px 12px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;
  letter-spacing:.08em;
  background:var(--cyan-100);
  color:var(--slate-700);
  border-bottom:1px solid rgba(46,59,57,.3);
}
.table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(46,59,57,.14);
  vertical-align:top;
}
.table tbody tr{transition:background var(--tr)}
.table tbody tr:hover{background:rgba(255,138,43,.10)}
.table tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--amber-500)}
.table--data td.num,.table--data th.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  white-space:nowrap;
}
.table--dark{background:var(--field-800);color:var(--cyan-100);border-color:var(--line-dark)}
.table--dark th{background:var(--teal-600);color:var(--cyan-100)}
.table--dark td{border-bottom-color:rgba(51,240,196,.16)}

/* ---------- 10. 索引列表 / 章节目录 ---------- */
.index-list{list-style:none;display:grid;gap:0;margin:0}
.index-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:baseline;
  padding:11px 4px;
  border-bottom:1px solid var(--line-dark-soft);
  font-size:14px;
  transition:background var(--tr),box-shadow var(--tr);
}
.index-list li:hover{background:rgba(51,240,196,.06);box-shadow:inset 3px 0 0 var(--cyan-400)}
.index-list__idx{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan-400);
}
.index-list__meta{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-mute);
  white-space:nowrap;
}

.spy-nav{
  list-style:none;
  display:grid;gap:2px;
  margin:0;
  border-left:1px solid var(--line-dark);
}
.spy-nav a{
  display:block;
  margin-left:-1px;
  padding:7px 14px;
  border-left:2px solid transparent;
  font-size:13px;line-height:1.5;
  text-decoration:none;
  color:inherit;
  opacity:.7;
  transition:color var(--tr),opacity var(--tr),border-color var(--tr),background var(--tr);
}
.spy-nav a:hover{opacity:1;color:var(--cyan-400)}
.spy-nav a[aria-current="true"]{
  opacity:1;
  color:var(--cyan-400);
  border-left-color:var(--cyan-400);
  background:rgba(51,240,196,.08);
}
.section--paper .spy-nav,.section--mint .spy-nav{border-left-color:var(--line-paper)}
.section--paper .spy-nav a:hover,.section--paper .spy-nav a[aria-current="true"],
.section--mint .spy-nav a:hover,.section--mint .spy-nav a[aria-current="true"]{
  color:var(--teal-600);
  border-left-color:var(--teal-600);
  background:rgba(16,107,91,.08);
}

/* ---------- 11. 面包屑 ---------- */
.breadcrumbs{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-mute);
}
.breadcrumbs ol{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0;
}
.breadcrumbs li{display:inline-flex;align-items:center;gap:10px}
.breadcrumbs li+li::before{content:"/";opacity:.45}
.breadcrumbs a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--tr),border-color var(--tr);
}
.breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:var(--cyan-400);border-bottom-color:var(--cyan-400)}
.breadcrumbs [aria-current="page"]{color:var(--cyan-100)}
.section--paper .breadcrumbs,.section--mint .breadcrumbs{color:rgba(46,59,57,.7)}
.section--paper .breadcrumbs a:hover,.section--mint .breadcrumbs a:hover{color:var(--teal-600);border-bottom-color:var(--teal-600)}
.section--paper .breadcrumbs [aria-current="page"],.section--mint .breadcrumbs [aria-current="page"]{color:var(--slate-700)}

/* ---------- 12. 图片容器基础规则 ---------- */
.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--line-dark);
  background-color:var(--field-800);
  background-image:
    linear-gradient(115deg,transparent 0 46%,rgba(51,240,196,.16) 46% 46.5%,transparent 46.5%),
    linear-gradient(rgba(51,240,196,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(51,240,196,.10) 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px;
}
.media img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--tr-slow);
}
.media:hover img{transform:scale(1.02)}
.media--wide{aspect-ratio:16/9}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:4/5}
.media__caption{
  padding:8px 10px;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;
  color:var(--ink-mute);
  border:1px solid var(--line-dark);
  border-top:0;
}
.section--paper .media,.section--mint .media{border-color:var(--line-paper)}
.section--paper .media__caption,.section--mint .media__caption{
  border-color:var(--line-paper);color:rgba(46,59,57,.66);
}

/* ---------- 13. 焦点与动效降级 ---------- */
a,button,[tabindex]:focus{outline-offset:2px}
:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:2px;
}
.section--paper :focus-visible,.section--mint :focus-visible{outline-color:var(--teal-600)}
.nav-link:focus-visible,.footer__link:focus-visible,.rail__cta:focus-visible{outline-offset:1px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .card:hover,.btn:hover,.float-tag:hover,.brand:hover .brand__mark{transform:none}
  .media:hover img{transform:none}
}

/* ---------- 14. 响应式 ---------- */
@media (max-width:1279px){
  .split,.split--reverse{grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);gap:32px}
  .footer__grid{gap:28px}
}

@media (max-width:1023px){
  :root{--rail-w:0px}
  body{padding-left:0}
  body.is-locked{overflow:hidden}

  .site-header{
    position:sticky;
    top:0;left:auto;right:auto;bottom:auto;
    width:auto;
    background:var(--ink-950);
    border-bottom:1px solid var(--line-dark);
    z-index:90;
  }
  .site-header__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 16px;
    min-height:var(--header-h);
  }
  .brand--bar{flex-direction:row;align-items:center;gap:10px}
  .brand--bar .brand__mark{
    width:34px;height:34px;font-size:14px;
    box-shadow:2px 2px 0 rgba(51,240,196,.18);
  }
  .brand--bar .brand__word{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:15px;
    letter-spacing:.04em;
  }

  .rail{
    position:fixed;
    top:0;right:0;bottom:0;left:auto;
    width:min(320px,86vw);
    height:100%;
    padding:18px 20px 22px;
    border-right:0;
    border-left:1px solid var(--line-dark);
    background:var(--ink-950);
    transform:translateX(101%);
    transition:transform var(--tr-slow);
    overflow-y:auto;
    z-index:10;
  }
  .site-header[data-open="true"] .rail{transform:translateX(0)}
  .site-header[data-open="true"] .nav-scrim{opacity:1;pointer-events:auto}

  .rail__brand{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:12px 16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line-dark-soft);
  }
  .rail .brand{flex-direction:row;align-items:center;gap:10px}
  .rail .brand__word{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:16px;
    letter-spacing:.04em;
  }
  .rail .brand__mark{width:38px;height:38px;font-size:15px}
  .rail .brand__tags{
    display:flex;flex-wrap:wrap;gap:6px;
    text-align:left;font-size:10px;
  }
  .rail .brand__tags span{
    padding:2px 6px;
    border:1px solid rgba(51,240,196,.28);
    color:var(--ink-soft);
  }

  .rail__nav{align-items:stretch;padding:16px 0;overflow:visible}
  .nav-list{gap:0}
  .nav-link{
    grid-template-columns:auto minmax(0,1fr);
    justify-items:start;
    align-items:baseline;
    gap:14px;
    padding:11px 10px;
  }
  .nav-link__idx{font-size:11px}
  .nav-link__label{font-size:15px;text-align:left}
  .nav-link:hover{background:rgba(51,240,196,.06)}

  .rail__foot{margin-top:auto}
  .rail__cta{font-size:14px;padding:12px 8px;letter-spacing:.04em}
  .rail__progress{display:none}

  .container{width:calc(100% - 32px)}
  .section{padding:48px 0}
  .split,.split--reverse{grid-template-columns:minmax(0,1fr);gap:28px}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-rail{position:static;top:auto}

  .footer__grid{grid-template-columns:1fr 1fr;gap:28px;padding:36px 0 28px}
}

@media (max-width:639px){
  :root{--gap:16px}
  body{font-size:15px}
  .section{padding:36px 0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .footer__strip{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    letter-spacing:.06em;
  }
  .footer__base{flex-direction:column;gap:6px}
  .footer__title{letter-spacing:.14em}
  .card{padding:16px}
  .slash-panel{padding:22px 18px 30px}
}