/* ============================================================
   Linux 发展史 · 幻灯片
   1280×720 舞台等比缩放，零依赖
   ============================================================ */

:root{
  --bg:        #06080f;
  --ink:       #eef2f8;
  --ink-2:     #a6b0c2;
  --ink-3:     #6b7688;

  --server:    #4c9dff;   /* 企业 / 服务器 */
  --server-d:  rgba(76,157,255,.14);
  --desktop:   #34d39a;   /* 个人 / 桌面 / 设备 */
  --desktop-d: rgba(52,211,154,.14);
  --both:      #b98bff;
  --both-d:    rgba(185,139,255,.14);

  --accent:    #7cc4ff;
  --line:      rgba(255,255,255,.09);
  --card:      rgba(255,255,255,.035);
  --card-2:    rgba(255,255,255,.06);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  --ease: cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- 背景 ---------- */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
  will-change:transform;
}
.b1{ width:60vw; height:60vw; left:-12vw; top:-18vw;
     background:radial-gradient(circle,rgba(76,157,255,.30),transparent 68%);
     animation:drift1 34s var(--ease) infinite alternate; }
.b2{ width:52vw; height:52vw; right:-10vw; top:6vh;
     background:radial-gradient(circle,rgba(52,211,154,.22),transparent 68%);
     animation:drift2 41s var(--ease) infinite alternate; }
.b3{ width:46vw; height:46vw; left:28vw; bottom:-22vw;
     background:radial-gradient(circle,rgba(185,139,255,.20),transparent 68%);
     animation:drift3 47s var(--ease) infinite alternate; }
@keyframes drift1{ to{ transform:translate3d(9vw,7vh,0) scale(1.14); } }
@keyframes drift2{ to{ transform:translate3d(-8vw,9vh,0) scale(1.1); } }
@keyframes drift3{ to{ transform:translate3d(6vw,-8vh,0) scale(1.18); } }

.grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 78%);
  animation:gridpan 40s linear infinite;
}
@keyframes gridpan{ to{ background-position:64px 64px,64px 64px; } }

.vignette{ position:absolute; inset:0;
  background:radial-gradient(ellipse 92% 78% at 50% 42%,transparent 42%,rgba(0,0,0,.62) 100%); }

/* ---------- 顶部进度条 ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.06); z-index:60;
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--server),var(--both),var(--desktop));
  box-shadow:0 0 14px rgba(124,196,255,.55);
  transition:width .55s var(--ease);
}

/* ---------- 舞台 ---------- */
.stage-wrap{
  position:fixed; inset:0; z-index:10;
  display:grid; place-items:center;
}
.stage{
  position:relative;
  width:1280px; height:720px;
  flex:0 0 auto;
  transform:scale(var(--scale,1));
  transform-origin:center center;
}

/* ---------- 幻灯片 ---------- */
.slides{ position:absolute; inset:0; }

.js .slide{
  position:absolute; inset:0;
  padding:64px 88px 132px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transform:translate3d(70px,0,0);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility .6s;
  pointer-events:none;
}
.js .slide.is-past{ transform:translate3d(-70px,0,0); }
.js .slide.is-active{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }

.layout-center{ align-items:center; justify-content:center; text-align:center; }

/* 元素入场动画 */
.js [data-anim]{
  opacity:0; transform:translateY(26px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.js .slide.is-active [data-anim]{ opacity:1; transform:none; }
[data-anim]:nth-child(1){ transition-delay:.02s; }
[data-anim-group] > [data-anim]:nth-child(1){ transition-delay:.16s; }
[data-anim-group] > [data-anim]:nth-child(2){ transition-delay:.28s; }
[data-anim-group] > [data-anim]:nth-child(3){ transition-delay:.40s; }
[data-anim-group] > [data-anim]:nth-child(4){ transition-delay:.52s; }
[data-anim-group] > [data-anim]:nth-child(5){ transition-delay:.64s; }
[data-anim-group] > [data-anim]:nth-child(6){ transition-delay:.76s; }
.js .slide [data-anim]{ transition-delay:calc(var(--base,.1s) + var(--i,0) * .09s); }
.js .slide.is-active [data-anim]{ transition-delay:calc(var(--base,.1s) + var(--i,0) * .09s); }

/* ---------- 通用排版 ---------- */
.kicker{
  margin:0 0 18px;
  font-size:15px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:14px;
}
.kicker::before{
  content:""; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--server),var(--desktop));
  flex:0 0 auto;
}
.layout-center .kicker{ justify-content:center; }

h1{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
h2{ margin:0 0 34px; font-size:46px; font-weight:800; letter-spacing:-.02em; line-height:1.22; }
h2 b{ color:var(--accent); font-weight:800; }
h3{ margin:0 0 8px; font-size:22px; font-weight:700; letter-spacing:-.01em; }

.title-xl{ font-size:88px; letter-spacing:-.035em; }
.lead{ margin:22px 0 0; font-size:25px; line-height:1.62; color:var(--ink-2); }
.lead-sub{ margin:-16px 0 30px; font-size:19px; color:var(--ink-3); }
.footnote{
  margin:auto 0 0; padding-top:26px;
  font-size:17px; line-height:1.7; color:var(--ink-3);
  border-top:1px solid var(--line);
}
.footnote b{ color:var(--ink-2); font-weight:700; }
.footnote::before{ content:""; }

.hint-inline{ margin:56px 0 0; font-size:15px; color:var(--ink-3); animation:breathe 2.6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{opacity:.45} 50%{opacity:1} }

kbd{
  display:inline-block; min-width:22px; padding:2px 7px; margin:0 1px;
  font-family:var(--mono); font-size:.85em; text-align:center;
  color:var(--ink); background:var(--card-2);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:6px;
}

p{ line-height:1.75; }
ul{ margin:0; padding:0; list-style:none; }
code{ font-family:var(--mono); font-size:.9em; padding:2px 7px; border-radius:5px; background:var(--card-2); color:var(--accent); }

/* ---------- 卡片 ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
  padding:26px 24px 22px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.js .slide.is-active .card:hover{ transform:translateY(-5px); background:var(--card-2); }
.card p{ margin:0; font-size:16px; color:var(--ink-2); }
.card-hint{
  margin-top:14px !important; padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:13px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) !important;
}
.card-tag{
  display:inline-block; margin-bottom:14px; padding:4px 11px;
  font-size:12px; font-weight:700; letter-spacing:.1em;
  border-radius:999px;
}
.tag-server{ color:var(--server); background:var(--server-d); }
.tag-desktop{ color:var(--desktop); background:var(--desktop-d); }
.tag-both{ color:var(--both); background:var(--both-d); }

.card:has(.tag-server){ border-color:rgba(76,157,255,.3); }
.card:has(.tag-desktop){ border-color:rgba(52,211,154,.3); }
.card:has(.tag-both){ border-color:rgba(185,139,255,.3); }

/* ---------- 分栏 ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.split-2{ grid-template-columns:1fr 1fr; }
.split.mt{ margin-top:30px; }
.col{ padding-left:24px; border-left:2px solid var(--line); }
.col p{ margin:0; font-size:17px; color:var(--ink-2); }
.col p b{ color:var(--ink); }
.col ul li{ position:relative; padding-left:18px; margin-bottom:9px; font-size:16.5px; color:var(--ink-2); }
.col ul li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--ink-3);
}
.col ul li b{ color:var(--ink); }
.col-server{ border-left-color:rgba(76,157,255,.5); }
.col-desktop{ border-left-color:rgba(52,211,154,.5); }

.dot{ width:12px; height:12px; border-radius:50%; margin-bottom:16px; }
.dot-server{ background:var(--server); box-shadow:0 0 0 5px var(--server-d),0 0 18px rgba(76,157,255,.6); }
.dot-desktop{ background:var(--desktop); box-shadow:0 0 0 5px var(--desktop-d),0 0 18px rgba(52,211,154,.6); }
.dot-both{ background:var(--both); box-shadow:0 0 0 5px var(--both-d),0 0 18px rgba(185,139,255,.6); }

/* ---------- 引用页 ---------- */
.layout-quote .quote{ margin:6px 0 0; }
.quote{ position:relative; padding:32px 36px; border-radius:20px;
        background:linear-gradient(140deg,rgba(76,157,255,.10),rgba(185,139,255,.06));
        border:1px solid rgba(124,196,255,.22); }
.quote-text{ margin:0; font-size:31px; line-height:1.5; font-weight:600; letter-spacing:-.01em; color:#fff; }
.quote-text::before{ content:"\201C"; }
.quote-text::after{ content:"\201D"; }
.quote-by{ margin:20px 0 0; font-size:15.5px; line-height:1.7; color:var(--ink-3); }

/* ---------- 拼图页 ---------- */
.puzzle{ display:flex; align-items:center; justify-content:center; gap:18px; }
.pz{
  flex:1 1 0; min-width:0; padding:24px 20px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
}
.pz b{ display:block; font-size:21px; margin-bottom:6px; }
.pz span{ display:block; font-size:14.5px; color:var(--ink-2); font-family:var(--mono); }
.pz small{ display:block; margin-top:10px; font-size:12.5px; color:var(--ink-3); }
.pz-a{ border-color:rgba(52,211,154,.34); } .pz-a b{ color:var(--desktop); }
.pz-b{ border-color:rgba(185,139,255,.34); } .pz-b b{ color:var(--both); }
.pz-c{ border-color:rgba(76,157,255,.4); background:rgba(76,157,255,.09); } .pz-c b{ color:var(--server); }
.pz-plus,.pz-eq{ font-size:32px; font-weight:300; color:var(--ink-3); flex:0 0 auto; }

/* ---------- VS 页 ---------- */
.vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.vs-side{ padding:24px 26px; background:var(--card); border:1px solid var(--line); border-radius:18px; }
.vs-side p{ margin:0; font-size:16.5px; color:var(--ink-2); }
.vs-name{ font-size:27px; font-weight:800; margin-bottom:10px; letter-spacing:-.01em; }
.vs-side:first-child .vs-name{ color:var(--desktop); }
.vs-side:last-child .vs-name{ color:var(--server); }
.vs-mid{
  font-size:16px; font-weight:800; letter-spacing:.16em; color:var(--ink-3);
  padding:10px 14px; border:1px solid var(--line); border-radius:999px;
}

/* ---------- 大数字卡 ---------- */
.two-big{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.big-card{ padding:30px 30px 26px; border-radius:20px; background:var(--card); border:1px solid var(--line); position:relative; overflow:hidden; }
.big-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 100% 0%,rgba(76,157,255,.16),transparent 60%);
  opacity:.85; pointer-events:none;
}
.big-card:last-child::after{ background:radial-gradient(120% 90% at 100% 0%,rgba(52,211,154,.16),transparent 60%); }
.big-card p{ margin:0; font-size:17.5px; color:var(--ink-2); }
.big-card p b{ color:var(--ink); }
.big-year{
  font-family:var(--mono); font-size:15px; letter-spacing:.16em;
  color:var(--accent); margin-bottom:12px;
}
.big-card h3{ font-size:26px; }
.big-card:last-child .big-year{ color:var(--desktop); }

/* ---------- 双轨框 ---------- */
.lanes-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.lane-box{ padding:24px 24px 20px; border-radius:20px; background:var(--card); border:1px solid var(--line); }
.lane-box-desktop{ border-color:rgba(52,211,154,.3); }
.lane-box-server{ border-color:rgba(76,157,255,.3); }
.lane-box-head{ display:flex; align-items:center; gap:11px; font-size:17px; font-weight:700; margin-bottom:16px; }
.lane-box-head .dot{ margin:0; width:10px; height:10px; }
.lane-box li{ position:relative; padding-left:20px; margin-bottom:13px; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.lane-box li::before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:7px; border-radius:2px; background:var(--ink-3); transform:rotate(45deg); }
.lane-box li b{ color:var(--ink); font-family:var(--mono); font-size:14.5px; margin-right:6px; }
.lane-box-desktop li::before{ background:var(--desktop); }
.lane-box-server li::before{ background:var(--server); }

/* ---------- 数据页 ---------- */
.layout-stats{ align-items:center; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%; }
.stat{ padding:26px 18px 22px; text-align:center; border-radius:18px; background:var(--card); border:1px solid var(--line); }
.stat-server{ border-color:rgba(76,157,255,.28); }
.stat-desktop{ border-color:rgba(52,211,154,.28); }
.stat-num{ font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.stat-server .stat-num{ color:var(--server); }
.stat-desktop .stat-num{ color:var(--desktop); }
.stat-label{ margin-top:10px; font-size:14px; color:var(--ink-3); }
.punchline{
  margin:38px 0 0; padding:22px 30px; text-align:center;
  font-size:24px; line-height:1.6; color:var(--ink-2);
  background:linear-gradient(120deg,rgba(76,157,255,.12),rgba(52,211,154,.1));
  border:1px solid rgba(124,196,255,.24); border-radius:18px;
}
.punchline b{ color:#fff; font-weight:800; }
.layout-stats .footnote{ align-self:center; width:100%; text-align:center; border-top:0; padding-top:14px; }

/* ---------- 回望初衷 ---------- */
.layout-return .title-xl{ background:linear-gradient(100deg,var(--server),var(--both) 45%,var(--desktop));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.gpl{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:44px 0 0; width:100%; max-width:940px; }
.gpl-item{ padding:18px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line);
  font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.gpl-k{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:10px;
  font-size:17px; font-weight:800; color:#fff; border-radius:10px;
  background:linear-gradient(140deg,var(--server),var(--both));
}
.layout-return .footnote{ align-self:center; width:100%; max-width:940px; text-align:center; }

/* ---------- 步骤页 ---------- */
.steps{
  margin:0; padding:0; list-style:none; counter-reset:s;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
}
.steps li{
  counter-increment:s; position:relative;
  padding:16px 20px 16px 66px; border-radius:16px;
  background:var(--card); border:1px solid var(--line);
  font-size:16px; color:var(--ink-2); line-height:1.5;
}
.steps li::before{
  content:counter(s); position:absolute; left:20px; top:14px;
  width:32px; height:32px; display:grid; place-items:center;
  font-size:15px; font-weight:800; color:#0a0f18; border-radius:10px;
  background:linear-gradient(140deg,var(--desktop),var(--server));
}
.steps li b{ display:block; color:var(--ink); font-size:17.5px; margin-bottom:2px; }
.steps li code{ font-size:.88em; }

/* ---------- 底部双轨时间线 ---------- */
.chrome{ position:absolute; inset:0; pointer-events:none; }
.chrome > *{ pointer-events:auto; }

.rail{ position:absolute; left:88px; right:268px; bottom:44px; }
.rail-legend{ display:flex; gap:26px; justify-content:flex-end; margin-bottom:14px; }
.lg{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); letter-spacing:.04em; }
.lg i{ width:8px; height:8px; border-radius:50%; }
.lg-server i{ background:var(--server); box-shadow:0 0 10px rgba(76,157,255,.8); }
.lg-desktop i{ background:var(--desktop); box-shadow:0 0 10px rgba(52,211,154,.8); }
.lg-both i{ background:var(--both); box-shadow:0 0 10px rgba(185,139,255,.8); }

.rail-axis{ position:relative; height:22px; }
.rail-line{
  position:absolute; left:0; right:0; top:10px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.16));
}
.rail-ticks{ position:absolute; inset:0; }
.rail-ticks i{
  position:absolute; top:5px; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:#0a0f18; border:2px solid var(--ink-3);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rail-ticks i.s{ border-color:var(--server); }
.rail-ticks i.d{ border-color:var(--desktop); }
.rail-ticks i.b{ border-color:var(--both); }
.rail-ticks i.on{ background:currentColor; transform:scale(1.55); }
.rail-ticks i.s.on{ background:var(--server); box-shadow:0 0 14px rgba(76,157,255,.85); }
.rail-ticks i.d.on{ background:var(--desktop); box-shadow:0 0 14px rgba(52,211,154,.85); }
.rail-ticks i.b.on{ background:var(--both); box-shadow:0 0 14px rgba(185,139,255,.85); }
.rail-ticks i[data-tip]:hover{ transform:scale(1.9); }

.rail-now{
  position:absolute; top:2px; left:0; transform:translateX(-50%);
  transition:left .6s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.rail-now b{
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.04em;
  color:var(--accent); white-space:nowrap;
  text-shadow:0 0 14px rgba(124,196,255,.55);
}
.rail-now::after{ content:""; width:2px; height:9px; border-radius:2px; background:linear-gradient(180deg,var(--accent),transparent); }
.rail-years{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:11.5px; color:rgba(107,118,136,.7);
}

/* ---------- 导航 ---------- */
.nav{ position:absolute; right:88px; bottom:44px; display:flex; align-items:center; gap:12px; }
.nbtn{
  width:40px; height:40px; display:grid; place-items:center;
  font-size:24px; line-height:1; color:var(--ink-2);
  background:var(--card-2); border:1px solid var(--line); border-radius:12px;
  cursor:pointer; transition:all .25s var(--ease); padding:0 0 3px;
}
.nbtn:hover{ color:#fff; background:rgba(124,196,255,.16); border-color:rgba(124,196,255,.45); transform:translateY(-2px); }
.nbtn:active{ transform:translateY(0); }
.nbtn:disabled{ opacity:.3; cursor:not-allowed; transform:none; }
.counter{ font-family:var(--mono); font-size:13px; color:var(--ink-3); min-width:52px; text-align:center; }
.counter b{ color:var(--ink); font-size:16px; }

/* ---------- 提示条 ---------- */
.toast{
  position:absolute; top:36px; right:88px; z-index:30;
  display:flex; gap:18px; padding:9px 18px;
  font-size:12.5px; color:var(--ink-3);
  background:rgba(10,14,22,.72); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.toast.hide{ opacity:0; transform:translateY(-10px); pointer-events:none; }

/* ---------- 讲者备注 ---------- */
.notes-drawer{
  position:absolute; left:0; right:0; bottom:0; padding:22px 88px 26px;
  background:linear-gradient(180deg,rgba(6,8,15,0),rgba(6,8,15,.93) 26%);
  border-top:1px solid var(--line);
  animation:notesIn .35s var(--ease);
}
@keyframes notesIn{ from{ opacity:0; transform:translateY(22px); } }
.notes-head{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; }
.notes-body{ font-size:17.5px; line-height:1.7; color:var(--ink-2); max-width:1050px; }

/* ---------- 帮助 ---------- */
.help{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(4,6,11,.86); backdrop-filter:blur(8px); z-index:20;
}
.help-card{ width:520px; padding:36px 40px 28px; background:rgba(14,18,28,.96);
  border:1px solid var(--line); border-radius:22px; }
.help-card h3{ font-size:24px; margin-bottom:22px; }
.help-card dl{ display:grid; grid-template-columns:auto 1fr; gap:13px 22px; margin:0; align-items:center; }
.help-card dt{ text-align:right; }
.help-card dd{ margin:0; font-size:15.5px; color:var(--ink-2); }
.help-foot{ margin:26px 0 0; text-align:center; font-size:12.5px; color:var(--ink-3); letter-spacing:.14em; }

/* ---------- 总览 ---------- */
.overview{ position:absolute; inset:0; z-index:20; overflow:auto;
  background:rgba(4,6,11,.95); backdrop-filter:blur(10px); padding:52px 60px; }
.ov-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ov-item{ padding:16px 18px; border-radius:14px; background:var(--card);
  border:1px solid var(--line); cursor:pointer; transition:all .25s var(--ease); }
.ov-item:hover{ background:var(--card-2); border-color:rgba(124,196,255,.45); transform:translateY(-3px); }
.ov-item.cur{ border-color:var(--accent); background:rgba(124,196,255,.1); }
.ov-num{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.ov-ttl{ margin-top:5px; font-size:14.5px; line-height:1.45; color:var(--ink); }
.ov-item.s .ov-num{ color:var(--server); }
.ov-item.d .ov-num{ color:var(--desktop); }
.ov-item.b .ov-num{ color:var(--both); }

/* ---------- 动画安全网 ----------
   入场动画是"锦上添花"。如果浏览器不推进 transition（后台标签页、
   动画被禁用/拦截等），内容必须仍然可见 —— 否则整页空白。 */
html.no-anim *,
html.no-anim *::before,
html.no-anim *::after{
  transition:none !important;
  animation:none !important;
}
html.no-anim .js .slide,
html.no-anim .slide{ opacity:1 !important; visibility:visible !important; transform:none !important; }
/* 降级模式下没有淡入淡出，就不要让 13 页叠在一起 */
html.no-anim .js .slide:not(.is-active),
html.no-anim .slide:not(.is-active){ display:none !important; }
html.no-anim [data-anim]{ opacity:1 !important; transform:none !important; }
html.no-anim .toast{ display:none !important; }

/* ---------- 无障碍 / 降级 ---------- */
/* class 选择器的 display 会盖过 UA 的 [hidden]{display:none}，必须显式压回去 */
[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  .blob,.grid{ animation:none !important; }
}
@media print{
  html,body{ overflow:visible; height:auto; background:#fff; }
  .progress,.toast,.nav,.help,.overview,.notes-drawer{ display:none !important; }
}