/* =========================================================
   63 棋牌游戏 · /assets/site.css
   共享外壳：侧边轨道导航 + 深夜棋牌桌页脚
   ========================================================= */

/* ---------- 1. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 20px);
}
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

/* ---------- 2. 变量：近单色体系 + 三点高亮 ---------- */
:root{
  --ink:#0B1F1C;
  --navy:#0B1626;
  --layer:#123B36;
  --felt:#1D5750;
  --neon:#5FF3D9;
  --gold:#F2C36B;
  --magenta:#E15BA6;
  --text:#E8F1EE;
  --muted:#9FB8B2;
  --line:rgba(42,110,102,.62);
  --line-soft:rgba(42,110,102,.34);
  --rail-w:88px;
  --bar-h:60px;
  --radius:2px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --shadow-soft:0 1px 0 rgba(232,241,238,.04),0 10px 26px rgba(0,0,0,.38);
  --font-body:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
html[data-rail="fold"]{--rail-w:60px}

/* ---------- 3. 排版基元：中文正文 + 等宽数字 ---------- */
.display{
  font-size:clamp(42px,7.6vw,96px);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.02;
}
.lead{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.85;
  color:rgba(232,241,238,.8);
  max-width:60ch;
}
.eyebrow{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--muted);
}
.mono{
  font-family:var(--font-mono);
  color:var(--gold);
  letter-spacing:.02em;
  margin-inline:.06em;
}
.rule{height:1px;border:0;background:var(--line-soft)}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  left:10px;
  top:-70px;
  z-index:200;
  padding:10px 16px;
  background:var(--neon);
  color:#062420;
  font-size:13px;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:var(--radius);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:10px}

/* ---------- 5. 页头：移动端顶栏 + 底部抽屉 ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  background:rgba(9,18,32,.97);
  border-bottom:1px solid var(--line-soft);
}
.rail{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  height:var(--bar-h);
  padding:0 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--text);
  padding:4px 2px;
  border-radius:var(--radius);
}
.brand__mark{
  font-family:var(--font-mono);
  font-size:19px;
  line-height:1;
  color:var(--neon);
  letter-spacing:.02em;
}
.brand__name{font-size:14px;letter-spacing:.1em}
.brand__sub{display:none}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-size:12.5px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease);
}
.nav-toggle:hover{border-color:var(--neon);color:var(--neon)}
.site-header[data-open] .nav-toggle{border-color:var(--neon);color:var(--neon);background:rgba(95,243,217,.07)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.nav-toggle__bars i{display:block;height:1px;background:currentColor;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.site-header[data-open] .nav-toggle__bars i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.site-header[data-open] .nav-toggle__bars i:nth-child(2){opacity:0}
.site-header[data-open] .nav-toggle__bars i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

.rail__nav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  max-height:84vh;
  overflow-y:auto;
  padding:20px 18px 26px;
  background:linear-gradient(180deg,#0E2135,#0B1626 55%,#0B1F1C);
  border-top:1px solid var(--neon);
  border-radius:16px 16px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.6);
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .26s var(--ease),visibility .26s var(--ease);
}
.site-header[data-open] .rail__nav{transform:translateY(0);visibility:visible}
.rail__list{display:flex;flex-direction:column}
.rail__item+.rail__item{border-top:1px solid var(--line-soft)}
.rail__link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 6px;
  text-decoration:none;
  color:var(--text);
  transition:color .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.rail__link:hover{color:var(--neon)}
.rail__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--gold);
  min-width:22px;
}
.rail__text{font-size:16px;letter-spacing:.04em}
.rail__link[aria-current="page"]{color:var(--neon)}
.rail__link[aria-current="page"] .rail__num{color:var(--neon)}
.rail__cta{
  display:flex;
  gap:10px;
  margin-top:16px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.rail__cta .btn{flex:1}
.rail__foot{display:none}

.rail__scrim{
  position:fixed;
  inset:0;
  z-index:65;
  background:rgba(4,9,16,.68);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s var(--ease),visibility .22s var(--ease);
}
.site-header[data-open] .rail__scrim{opacity:1;visibility:visible}

.rail__track{
  position:fixed;
  left:0;right:0;
  top:calc(var(--bar-h) - 2px);
  height:2px;
  z-index:61;
  background:rgba(42,110,102,.26);
  pointer-events:none;
}
.rail__thumb{
  display:block;
  height:100%;
  width:var(--p,0%);
  background:linear-gradient(90deg,var(--neon),var(--gold));
  transition:width .12s linear;
}

/* ---------- 6. 页脚 ---------- */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,#0B1F1C,#0B1626);
  border-top:1px solid var(--line-soft);
}
.footer__bento{
  max-width:1280px;
  margin-inline:auto;
  padding:clamp(36px,5vw,68px) clamp(18px,4vw,48px) 30px;
  display:grid;
  gap:clamp(24px,3vw,46px);
  grid-template-columns:1fr;
}
.footer__mark{
  font-size:clamp(28px,4vw,44px);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.1;
}
.footer__num{
  font-family:var(--font-mono);
  color:var(--neon);
  margin-right:.2em;
}
.footer__sub{
  margin-top:10px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--muted);
}
.footer__note{
  margin-top:18px;
  max-width:34ch;
  font-size:13.5px;
  line-height:1.9;
  color:rgba(159,184,178,.86);
}
.footer__head{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line-soft);
  font-size:12px;
  font-weight:400;
  letter-spacing:.16em;
  color:rgba(232,241,238,.72);
}
.footer__list li+li{margin-top:9px}
.footer__link{
  font-size:14.5px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.footer__link:hover{color:var(--neon);border-bottom-color:var(--neon)}
.footer__lines p{
  margin-top:9px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.footer__bar{
  border-top:1px solid var(--line-soft);
  background:rgba(11,22,38,.72);
}
.footer__bar-inner{
  max-width:1280px;
  margin-inline:auto;
  padding:18px clamp(18px,4vw,48px);
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.footer__legal{
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(159,184,178,.86);
}
.footer__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(18,59,54,.55);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--muted);
}
.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:55;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(18,59,54,.94);
  box-shadow:var(--shadow-soft);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.to-top:hover{border-color:var(--neon);color:var(--neon)}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--text);
  font-size:14px;
  letter-spacing:.06em;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{border-color:var(--neon);color:var(--neon)}
.btn--neon{background:var(--neon);border-color:var(--neon);color:#062420}
.btn--neon:hover{background:#8FFBE6;border-color:#8FFBE6;color:#04201C}
.btn--wire{border-color:rgba(95,243,217,.45);color:var(--neon)}
.btn--wire:hover{background:rgba(95,243,217,.08)}
.btn--gold{border-color:rgba(242,195,107,.5);color:var(--gold)}
.btn--gold:hover{background:rgba(242,195,107,.1);color:var(--gold)}
.btn--sm{padding:8px 14px;font-size:12.5px}

/* ---------- 8. 布局基元 ---------- */
.container{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
}
.container--wide{max-width:1440px}
.container--narrow{max-width:720px}
.section{padding-block:clamp(44px,6vw,88px)}
.section--tight{padding-block:clamp(26px,3.5vw,52px)}
.section__head{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:16px;
  margin-bottom:clamp(22px,3vw,38px);
  border-bottom:1px solid var(--line-soft);
}
.section__index{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--gold);
}
.section__title{
  font-size:clamp(26px,4vw,48px);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.12;
}
.section__note{
  max-width:44ch;
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
}
.grid-12{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:1fr}

/* ---------- 9. Bento 信息板 ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.bento__cell{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:118px;
  padding:clamp(16px,2vw,26px);
  background:var(--layer);
  color:inherit;
  text-decoration:none;
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease);
}
a.bento__cell:hover{
  background:#164A43;
  box-shadow:inset 0 0 0 1px rgba(95,243,217,.55);
}
.bento__cell--focus{
  grid-column:span 4;
  background:linear-gradient(155deg,#17544C,#0E2B28 72%);
}
.bento__kicker{font-size:11.5px;letter-spacing:.14em;color:var(--muted)}
.bento__title{font-size:clamp(17px,1.6vw,21px);font-weight:400;line-height:1.4}
.bento__value{
  font-family:var(--font-mono);
  font-size:clamp(24px,3vw,38px);
  line-height:1;
  color:var(--gold);
}
.bento__text{font-size:14px;line-height:1.8;color:var(--muted)}

/* ---------- 10. 标签 / 说明牌 / 角标 ---------- */
.plate{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px 5px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(11,22,38,.5);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(232,241,238,.72);
  transition:transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.plate::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 8px rgba(95,243,217,.7);
}
.plate:hover{transform:rotate(-2deg);border-color:var(--neon);color:var(--neon)}
.plate--gold::before{background:var(--gold);box-shadow:none}
.plate--magenta::before{background:var(--magenta);box-shadow:none}
.badge{
  position:absolute;
  top:0;right:0;
  padding:4px 8px;
  background:var(--magenta);
  color:#1A0714;
  font-size:10.5px;
  letter-spacing:.1em;
}

/* ---------- 11. 横向主题带 / 房间轨道 ---------- */
.band{
  border-block:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(11,22,38,.92),rgba(29,87,80,.42));
  padding-block:14px;
}
.band__inner{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--felt) transparent;
}
.band__inner>*{flex:0 0 auto;scroll-snap-align:start}

.track{position:relative}
.track__rail{
  display:flex;
  gap:12px;
  padding:4px 2px 20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--felt) transparent;
}
.track__rail>*{flex:0 0 clamp(210px,26vw,282px);scroll-snap-align:start}
.track__card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--layer);
  color:inherit;
  text-decoration:none;
  transition:border-color .18s var(--ease),transform .18s var(--ease),background-color .18s var(--ease);
}
.track__card:hover{border-color:var(--neon);transform:translateY(-2px)}
.track__nav{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.track__btn{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.track__btn:hover{border-color:var(--neon);color:var(--neon)}

/* ---------- 12. 时间线 / 折叠面板 ---------- */
.timeline{
  position:relative;
  padding-left:22px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:5px;top:6px;bottom:6px;
  width:1px;
  background:var(--line);
}
.timeline__item{position:relative;padding:0 0 26px 8px}
.timeline__item::before{
  content:"";
  position:absolute;
  left:-22px;top:8px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--ink);
  border:1px solid var(--neon);
}
.timeline__time{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--gold);
}
.fold{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:rgba(18,59,54,.5);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.fold+.fold{margin-top:10px}
.fold:hover{border-color:rgba(95,243,217,.45)}
.fold__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  font-size:15px;
  cursor:pointer;
  list-style:none;
}
.fold__head::-webkit-details-marker{display:none}
.fold__head::after{
  content:"+";
  font-family:var(--font-mono);
  color:var(--neon);
}
.fold[open] .fold__head::after{content:"–"}
.fold__body{
  padding:0 18px 18px;
  font-size:15px;
  line-height:1.85;
  color:var(--muted);
}

/* ---------- 13. 图片容器 ---------- */
.media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:linear-gradient(140deg,#0B1626,#123B36);
}
.media img,
.media video{width:100%;height:100%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--portrait{aspect-ratio:3/4}
.media--wide{aspect-ratio:21/9}
.media__cap{
  position:absolute;
  left:10px;bottom:10px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(11,22,38,.78);
  font-size:11.5px;
  letter-spacing:.08em;
  color:rgba(232,241,238,.8);
}

/* ---------- 14. 面包屑 / 正文 / 章节索引 ---------- */
.breadcrumb{font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--line)}
.breadcrumb a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.breadcrumb a:hover{color:var(--neon);border-bottom-color:var(--neon)}

.prose{
  max-width:720px;
  font-size:16.5px;
  line-height:1.85;
  color:rgba(232,241,238,.86);
}
.prose>*+*{margin-top:1.1em}
.prose h2{
  margin-top:1.8em;
  padding-top:1.1em;
  border-top:1px solid var(--line-soft);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.3;
}
.prose h3{margin-top:1.6em;font-size:19px;font-weight:400}
.prose ul,.prose ol{padding-left:1.3em;list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.4em}
.prose a{
  color:var(--neon);
  text-decoration:none;
  border-bottom:1px solid rgba(95,243,217,.4);
}
.prose a:hover{border-bottom-color:var(--neon)}
.prose strong{font-weight:500;color:var(--text)}

[data-spy-link]{
  color:var(--muted);
  text-decoration:none;
  border-left:1px solid var(--line-soft);
  padding-left:12px;
  font-size:13.5px;
  letter-spacing:.06em;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
[data-spy-link]:hover{color:var(--text);border-left-color:var(--neon)}
[data-spy-link][data-current="true"]{color:var(--neon);border-left-color:var(--neon)}

/* ---------- 15. 断点 ---------- */
@media (min-width:700px){
  .footer__bento{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:901px){
  html{scroll-padding-top:24px}
  body{padding-left:var(--rail-w)}
  .site-header{
    top:0;left:0;bottom:0;right:auto;
    width:var(--rail-w);
    border-right:1px solid var(--line-soft);
    border-bottom:0;
    background:linear-gradient(180deg,#0C1C30,#0B1626 40%,#0B1F1C);
    transition:width .22s var(--ease);
  }
  .rail{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    height:100%;
    padding:0;
  }
  .rail__scrim{display:none}
  .brand{
    flex-direction:column;
    gap:5px;
    padding:20px 6px 16px;
    border-bottom:1px solid var(--line-soft);
  }
  .brand__mark{font-size:20px}
  .brand__name{font-size:12px;letter-spacing:.14em}
  .brand__sub{
    display:block;
    font-size:10px;
    letter-spacing:.14em;
    color:var(--muted);
  }
  .nav-toggle{display:none}
  .rail__nav{
    position:static;
    transform:none;
    visibility:visible;
    max-height:none;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:12px 0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    scrollbar-width:thin;
    scrollbar-color:var(--felt) transparent;
  }
  .rail__list{
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  .rail__item+.rail__item{border-top:0}
  .rail__link{
    flex-direction:column;
    gap:8px;
    width:72px;
    padding:11px 4px;
    border:1px solid transparent;
  }
  .rail__link:hover{
    border-color:rgba(95,243,217,.4);
    background:rgba(95,243,217,.06);
  }
  .rail__link:hover .rail__text{transform:rotate(2deg)}
  .rail__link[aria-current="page"]{
    border-color:var(--neon);
    background:rgba(95,243,217,.08);
  }
  .rail__num{font-size:11px;color:rgba(159,184,178,.75)}
  .rail__link[aria-current="page"] .rail__num{color:var(--gold);min-width:0}
  .rail__text{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:12.5px;
    letter-spacing:.18em;
    line-height:1;
    color:inherit;
    transition:transform .18s var(--ease);
  }
  .rail__cta{
    flex-direction:row;
    justify-content:center;
    gap:6px;
    margin-top:0;
    padding:14px 0;
  }
  .rail__cta .btn{
    flex:0 0 auto;
    width:32px;
    padding:12px 0;
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:12px;
    letter-spacing:.14em;
  }
  .rail__foot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:12px 0 18px;
    border-top:1px solid var(--line-soft);
  }
  .rail__ver{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.04em;
    color:var(--gold);
  }
  .rail__fold{
    padding:6px 9px;
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    color:var(--muted);
    font-size:10.5px;
    letter-spacing:.12em;
    cursor:pointer;
    transition:border-color .18s var(--ease),color .18s var(--ease);
  }
  .rail__fold:hover{border-color:var(--neon);color:var(--neon)}
  .site-header[data-fold="true"] .rail__text,
  .site-header[data-fold="true"] .brand__name,
  .site-header[data-fold="true"] .brand__sub,
  .site-header[data-fold="true"] .rail__cta,
  .site-header[data-fold="true"] .rail__ver{display:none}
  .site-header[data-fold="true"] .rail__link{width:44px;padding:9px 2px}
  .rail__track{
    position:absolute;
    top:0;right:0;bottom:0;left:auto;
    width:2px;
    height:auto;
  }
  .rail__thumb{
    width:100%;
    height:var(--p,0%);
    background:linear-gradient(180deg,var(--neon),var(--gold));
    transition:height .12s linear;
  }
  .to-top{right:24px;bottom:24px}
  .grid-12{grid-template-columns:repeat(12,1fr)}
  .bento{grid-template-columns:repeat(12,1fr)}
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 12}
  .span-3{grid-column:span 3}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .bento__cell--focus{grid-column:span 6;grid-row:span 2}
}
@media (min-width:1000px){
  .footer__bento{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .footer__brand{padding-right:clamp(0px,2vw,32px)}
}
@media (max-width:420px){
  .nav-toggle__text{display:none}
}

/* ---------- 16. 无障碍与降级动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .track__rail{scroll-behavior:auto}
  .rail__link:hover .rail__text{transform:none}
  .plate:hover{transform:none}
  .track__card:hover{transform:none}
}