/* ===========================================================
   base.css — reset + 排版 + 焦点 + 降级基线
   ⛔ 第一纪律：任何选择器都不得把 opacity:0 / visibility:hidden /
      transform:translateY(100%) 作为元素的「默认状态」。
      英文站 spotube.cc 就是因为把 opacity:0 当入场初始态，在滚动动效未触发时
      整页出现数千像素空白 —— 10 张特性卡与整个 FAQ 全部未渲染。
      本站只允许位移增强：html.js [data-reveal="pending"]{transform:...}，opacity 全程为 1。
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--t-body-lh);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:var(--brand-text);text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);line-height:1.3;font-weight:600}
h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.01em;line-height:var(--t-h1-lh)}
h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.01em;line-height:var(--t-h2-lh)}
h3{font-size:var(--t-h3);line-height:var(--t-h3-lh)}
h4{font-size:var(--t-h4);line-height:var(--t-h4-lh)}
p{margin:0}
p+p{margin-top:var(--s-3)}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
[hidden]{display:none!important}
table{border-collapse:collapse;width:100%}

/* 数字与版本号：单独字族 + 等宽数字，保证纵向对齐 */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* 长文件名 / URL 不许撑破容器 —— 在需要的地方用 overflow-wrap:anywhere */

/* ---------- 焦点：全站唯一实现 ---------- */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:inherit}
.on-soft :focus-visible{box-shadow:var(--focus-on-soft)}
@supports not selector(:focus-visible){
  :focus{box-shadow:var(--focus);border-radius:inherit}
}
@media (forced-colors:active){
  :focus-visible{outline:2px solid ButtonText;box-shadow:none}
}

/* ---------- 跳到主内容：用 position 藏，绝不用 opacity:0 ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;background:var(--brand);color:var(--text-invert);
  border-radius:0 0 var(--r-sm) 0;font-size:14px;font-weight:600;
}
.skip:focus{left:0;text-decoration:none}

/* ---------- 屏幕阅读器专用 ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 动效：只做位移/缩放增强，永不改 opacity ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{transition:transform var(--dur-slow) var(--ease-out)}
  /* 只有 JS 成功执行过（html.js）才可能进入 pending；无 JS 时这个类根本不存在 */
  html.js [data-reveal="pending"]{transform:translateY(10px) scale(.99)}
}
@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-reveal]{transform:none!important}
}

/* ---------- 触屏上 :hover 会「粘住」，全部 hover 规则一律关在这个查询里 ---------- */
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration:underline;text-underline-offset:3px}
}