/* 全站共享：顶部导航栏 + 手机适配的通用补丁。
   颜色全部取自各页面自己定义的 token（--panel/--line/--ink/--accent…），导航自动贴合每页配色。 */
.sn{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper, #EBEDE8) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line, #C7CCC4);
  padding-top:env(safe-area-inset-top, 0px);
  font-family:"Archivo","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.sn-in{
  max-width:1320px; margin:0 auto; padding-inline:max(16px, env(safe-area-inset-left, 0px));
  display:flex; align-items:center; gap:4px 18px; min-height:48px;
}
.sn-brand{
  display:flex; align-items:center; gap:8px; flex:none;
  color:var(--ink, #13181A); text-decoration:none; font-weight:700; font-size:14px; letter-spacing:-.01em;
}
.sn-brand svg{width:20px; height:20px; flex:none}
.sn-links{
  display:flex; gap:2px; flex:1 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0; padding:0; list-style:none;
}
.sn-links::-webkit-scrollbar{display:none}
.sn-links a{
  display:block; white-space:nowrap; text-decoration:none;
  color:var(--muted, #6A7679); font-size:13px; font-weight:500;
  padding:6px 10px; border-radius:4px; transition:background .12s, color .12s;
}
.sn-links a:hover{color:var(--ink, #13181A); background:var(--sunk, rgba(0,0,0,.05))}
.sn-links a[aria-current="page"]{color:var(--accent, #1C6F69); background:var(--accent-soft, rgba(0,0,0,.06)); font-weight:600}
.sn-links a:focus-visible,.sn-theme:focus-visible,.sn-brand:focus-visible{outline:2px solid var(--accent, #1C6F69); outline-offset:1px}
.sn-theme{
  appearance:none; flex:none; cursor:pointer; display:grid; place-items:center;
  width:34px; height:34px; border-radius:4px; border:1px solid var(--line, #C7CCC4);
  background:var(--panel, transparent); color:var(--ink-2, #3D4749);
}
.sn-theme svg{width:16px; height:16px}

/* 窄屏：品牌 + 主题按钮一行，页面链接单独一行横向滑动 */
@media (max-width:760px){
  .sn-in{flex-wrap:wrap; padding-block:6px 0; min-height:0; gap:4px 10px}
  .sn-brand{flex:1 1 auto}
  .sn-links{order:3; flex-basis:100%; margin-inline:-6px; padding-bottom:6px;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent); mask-image:linear-gradient(to right,#000 88%,transparent)}
  .sn-links a{padding:6px 9px}
}

/* ---------- 通用手机补丁（对所有页面生效） ---------- */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (max-width:520px){
  .wrap{padding-inline:16px !important; padding-top:18px !important}
  /* 分段按钮组允许换行，避免撑出横向滚动 */
  html .seg{flex-wrap:wrap}
  html .seg button{flex:1 1 auto}
  .sub,.lede{min-width:0 !important}
  /* 三维画布：桌面 16:10 + min-height 在手机上会撑出横向滚动，改成接近方形 */
  html .canvas-box,html .cbox,html .cube-box{min-height:0; aspect-ratio:1/1; width:100%}
  /* 回射光效实验台：夜景改成方形，路牌在画面里放大，三块膜片的亮度标签不再互相压住 */
  html .night{aspect-ratio:1/1}
  html .night .tag{font-size:10px}
  html .night .tag b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.sn *{transition:none!important}}