/* Shared editorial shell for every VIZ article.
   The interactive scene keeps its dark canvas; article and source views stay text-first. */

#gl,#vignette,#labels{transition:opacity .45s}
#mobilePanels{display:none}

body.proof-active:not(.home) #story{
  width:440px;
}
body.counterfactual-active:not(.home) #story{
  width:540px;
}

.proof-detective,
.counterfactual-lab{
  margin:15px 0 18px;
  color:#d6dbea;
}
.proof-case{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px;
  border:1px solid rgba(94,231,255,.24);
  border-radius:12px;
  background:rgba(94,231,255,.055);
}
.proof-case span,
.cf-head span,
.cf-grid section>span,
.proof-counterexample span{
  color:#8f9aae;
  font:600 9px/1.25 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.proof-case strong{
  color:#f7f8fb;
  font:600 13px/1.5 var(--mono);
}
.proof-steps{
  display:grid;
  gap:7px;
  margin-top:10px;
}
.proof-steps button{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:start;
  width:100%;
  padding:11px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:#bec6d8;
  text-align:left;
  font:400 11px/1.58 var(--sans);
  cursor:pointer;
}
.proof-steps button:hover:not(:disabled){
  border-color:rgba(255,255,255,.27);
  background:rgba(255,255,255,.07);
}
.proof-steps button i{
  display:grid;
  width:25px;
  height:25px;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#8893a7;
  font:500 10px/1 var(--mono);
  font-style:normal;
}
.proof-steps button b{
  display:block;
  margin-bottom:1px;
  color:#f3f5f9!important;
  font-size:11px;
}
.proof-steps button.wrong{
  border-color:rgba(255,196,87,.3);
  background:rgba(255,196,87,.055);
  opacity:.65;
}
.proof-steps button.correct{
  border-color:rgba(94,231,255,.55);
  background:rgba(94,231,255,.1);
}
.proof-steps button.correct i{
  border-color:#5ee7ff;
  color:#5ee7ff;
}
.proof-feedback{
  min-height:44px;
  margin-top:10px;
  padding:12px 13px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:#9da8ba;
  font:400 11px/1.65 var(--sans);
}
.proof-feedback>strong{
  display:block;
  margin-bottom:6px;
  color:#5ee7ff!important;
  font-size:12px;
}
.proof-feedback p{margin:6px 0!important}
.proof-counterexample{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:10px 0;
  padding:11px;
  border-left:2px solid #5ee7ff;
  background:rgba(94,231,255,.055);
}
.proof-counterexample b{
  color:#fff!important;
  font:600 11px/1.5 var(--mono);
}
.proof-counterexample i{
  color:#aeb8ca;
  font:400 10px/1.55 var(--mono);
  font-style:normal;
}

.counterfactual-lab{
  padding-top:4px;
}
.cf-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.cf-head>div{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.cf-head strong{
  color:#fff!important;
  font:600 15px/1.2 var(--sans);
}
.cf-head button{
  flex:0 0 auto;
  padding:9px 12px;
  border:0;
  border-radius:999px;
  background:#f2f4f8;
  color:#11131a;
  font:650 10px/1 var(--sans);
  cursor:pointer;
}
.cf-head button:disabled{
  opacity:.55;
  cursor:progress;
}
#story .body .cf-rule{
  margin:12px 0!important;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  color:#929db1;
  font:400 10px/1.65 var(--mono);
}
.cf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.cf-grid section{
  min-width:0;
  padding:11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.035);
}
.cf-grid section:first-child{
  border-color:rgba(94,231,255,.2);
}
.cf-grid section:last-child{
  border-color:rgba(255,196,87,.2);
}
.cf-grid canvas{
  display:block;
  width:100%;
  height:76px;
  margin:7px 0 6px;
  border-radius:7px;
  background:rgba(0,0,0,.16);
}
.cf-grid [data-cf-value]{
  display:block;
  overflow:hidden;
  color:#dfe4ed!important;
  font:500 9px/1.4 var(--mono);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cf-verdict{
  margin-top:9px;
  padding:11px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:#9faabd;
  font:400 11px/1.65 var(--sans);
}
.cf-verdict strong{
  color:#fff!important;
}
.counterfactual-lab.done .cf-verdict{
  border:1px solid rgba(94,231,255,.26);
  background:rgba(94,231,255,.055);
}
.counterfactual-lab.inconclusive .cf-verdict{
  border:1px solid rgba(255,196,87,.26);
  background:rgba(255,196,87,.055);
}

body
#brand,
#story h2,
.card .who h3{
  font-family:var(--sans);
}
body:not(.home) #brand a{
  color:#f2f5fa;
  font-weight:650;
  letter-spacing:-.04em;
}
#story h2{
  font-weight:550;
  letter-spacing:-.025em;
}
.panel{
  background:rgba(8,10,18,.82);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 56px rgba(0,0,0,.42);
}
.btn{
  font-weight:500;
  letter-spacing:0;
}
:where(a,button,[role="button"],input):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
.card[role="button"]:focus-visible{
  border-color:rgba(255,255,255,.5);
  transform:translateY(-2px);
}

body.home{
  background:#fff;
  color:#0a0a0a;
}
body.home #gl,
body.home #vignette,
body.home #labels{
  opacity:0;
  pointer-events:none;
}

body.home #top{
  height:68px;
  padding:0 24px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid #deded9;
  backdrop-filter:blur(18px);
  pointer-events:auto;
}
body.home #brand{
  font-family:var(--sans);
  color:#0a0a0a;
  align-items:center;
  gap:13px;
  letter-spacing:0;
}
body.home #brand a{
  color:#0a0a0a;
  font-family:var(--sans);
  font-size:21px;
  font-weight:650;
  letter-spacing:-.055em;
}
body.home #brand b{
  font-size:13px;
  font-weight:500;
  color:#686868;
}
body.home #brand span{display:none}
body.home #nav{
  border:0;
  background:#f4f4f1;
  padding:4px;
  backdrop-filter:none;
}
body.home #nav button{
  color:#5d5d5d;
  font-size:13px;
  letter-spacing:0;
  padding:8px 14px;
}
body.home #nav button:hover{color:#0a0a0a}
body.home #nav button:focus{outline:none}
body.home #nav button:focus-visible{
  outline:2px solid #0a0a0a;
  outline-offset:2px;
}
body.home #nav button.on,
body.home #nav button.on.k,
body.home #nav button.on.g{
  background:#fff;
  color:#0a0a0a;
  box-shadow:none;
}

body.home #home{
  justify-content:flex-start;
  padding:clamp(132px,14vw,190px) 24px 80px;
  background:#fff;
  color:#0a0a0a;
  text-align:center;
}
body.home #home::before{display:none}
body.home #home .eyebrow{
  margin-bottom:28px;
  color:#555;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
body.home #home h1{
  max-width:1050px;
  margin:0 auto 28px;
  color:#0a0a0a;
  font-family:var(--sans);
  font-size:clamp(52px,6.3vw,90px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.06em;
  text-wrap:balance;
}
body.home #home h1 i{
  display:inline;
  color:#0a0a0a;
  background:none;
  -webkit-text-fill-color:currentColor;
}
body.home #home .sub{
  max-width:720px;
  margin:0 auto 34px;
  color:#3f3f3f;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.015em;
  text-wrap:balance;
}
body.home #cards{
  max-width:none;
  gap:10px;
  align-items:center;
}
body.home .card,
body.home .card.kk,
body.home .card.gg{
  width:auto!important;
  min-width:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#f4f4f1;
  box-shadow:none;
  backdrop-filter:none;
  color:#0a0a0a;
  font:inherit;
}
body.home .card:hover{
  transform:translateY(-1px);
  background:#e9e9e5;
  border-color:transparent;
}
body.home .card .who{margin:0}
body.home .card .who h3{
  padding:13px 20px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:550;
}
body.home .card .who span,
body.home .card .tag,
body.home .card .prob,
body.home .card .go{display:none}
body.home #home .foot{
  margin-top:28px;
  color:#777;
  font-size:13px;
  line-height:1.55;
}
body.home #loader{background:#fff;color:#777}

body.home #tl{
  padding:130px 24px 90px;
  background:#fff;
  color:#0a0a0a;
  backdrop-filter:none;
}
body.home .tlin{max-width:900px}
body.home #tl h2{
  max-width:800px;
  margin-bottom:24px;
  font-family:var(--sans);
  font-size:clamp(42px,5vw,68px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.05em;
}
body.home #tl .lead{
  max-width:720px;
  margin-bottom:64px;
  color:#4a4a4a;
  font-size:17px;
  line-height:1.7;
}
body.home .bios{
  grid-template-columns:1fr;
  gap:0;
  margin:50px 0;
}
body.home .bio{
  padding:28px 0;
  border:0;
  border-top:1px solid #deded9;
  border-radius:0;
  background:transparent;
}
body.home .bio:last-child{border-bottom:1px solid #deded9}
body.home .bio h4{
  font-family:var(--sans);
  font-size:22px;
  font-weight:550;
  letter-spacing:-.025em;
}
body.home .bio .m{
  color:#777;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0;
}
body.home .bio p{color:#4f4f4f;font-size:14px;line-height:1.75}
body.home .ev{
  gap:28px;
  padding:25px 0;
  border-top:1px solid #deded9;
}
body.home .ev .yr{width:88px;color:#777}
body.home .ev .ct h4{color:#0a0a0a;font-size:16px}
body.home .ev .ct p{color:#555;font-size:14px;line-height:1.7}
body.home .ev.hot .yr{color:#0a0a0a;font-weight:600}
body.home .ev.hot .ct h4{color:#0a0a0a}
body.home .srcs{
  color:#777;
  border-top-color:#deded9;
  font-size:13px;
  line-height:1.9;
}
body.home .srcs a{
  color:#333;
  border-bottom-color:#aaa;
}
body.home .srcs a:hover{color:#0a0a0a}

@media(max-width:900px){
  body.home #top{height:62px;padding:0 14px}
  body.home #brand b{display:none}
  body.home #nav{
    max-width:calc(100vw - 74px);
    overflow-x:auto;
    scrollbar-width:none;
  }
  body.home #nav::-webkit-scrollbar{display:none}
  body.home #nav button{padding:7px 10px;font-size:12px}
  body.home #home{padding:112px 18px 60px}
  body.home #home h1{font-size:clamp(43px,12vw,62px)}
  body.home #home .sub{font-size:16px}
  body.home #home .sub br{display:none}
  body.home #cards{flex-direction:column}
  body.home .card{width:auto!important}
  body.home #tl{padding:110px 18px 70px}
  body.home #tl h2{font-size:42px}
  body.home .ev{gap:16px}
  body.home .ev .yr{width:70px}

  body:not(.home) #brand b,
  body:not(.home) #brand span{display:none}
  body:not(.home) #top{height:58px}
  body:not(.home) #nav{
    max-width:calc(100vw - 64px);
    overflow-x:auto;
    scrollbar-width:none;
  }
  body:not(.home) #nav::-webkit-scrollbar{display:none}
  body:not(.home) #nav button{padding:6px 9px}

  /* 章节轨道也是导航，不只是装饰。手机上每个触控目标至少 28px，
     放不下时让中间轨道横向滚动，上一章/下一章按钮仍固定在两侧。 */
  body:not(.home) #nav2{gap:6px}
  body:not(.home) #dots{
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
  }
  body:not(.home) #dots::-webkit-scrollbar{display:none}
  body:not(.home) #dots .dot-act{flex:0 0 auto;gap:4px}
  body:not(.home) #dots button{
    flex:0 0 28px;
    min-width:28px;
    max-width:28px;
    height:28px;
    border-radius:7px;
    scroll-snap-align:center;
  }
  body:not(.home) #dots button::after{left:5px;right:5px;top:12px;height:4px}
  body:not(.home) #dots button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:-2px;
  }

  body:not(.home) #mobilePanels{
    position:fixed;
    top:64px;
    right:10px;
    z-index:32;
    display:flex;
    gap:3px;
    padding:3px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(8,10,18,.82);
    backdrop-filter:blur(18px);
  }
      #mobilePanels button{
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--dim);
    padding:7px 12px;
    font:500 11px/1 var(--sans);
    cursor:pointer;
  }
  #mobilePanels button.on{
    background:rgba(255,255,255,.13);
    color:#fff;
  }

  body:not(.home) #right{display:none!important}
  /* 手机上讲解视图只留当前章节真正要看的读数（由各篇标 .m-keep 决定），
     其余的都在「图表」那一档里完整列出。用显式标记而不是 nth-child：
     各篇的读数条目数和顺序不一样，按位置藏会藏错东西。 */
  body:not(.home) #hud{
    top:104px;
    max-width:calc(100% - 132px);
    gap:16px;
  }
  body:not(.home) #hud .stat:not(.m-keep){display:none}
  body:not(.home) #story{
    max-height:46vh;
    bottom:calc(10px + env(safe-area-inset-bottom));
  }
  @supports(height:100dvh){
    body:not(.home) #story{max-height:46dvh}
  }
  /* 正文滚动到一半时给个可以继续滚的提示，别让人以为文章到此为止 */
  body:not(.home) #story .body{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  }
  body.proof-active:not(.home) #story,
  body.counterfactual-active:not(.home) #story{
    width:auto;
  }
  /* 反事实实验台本身就有两张图和一段结论，46vh 装不下 */
  body.counterfactual-active:not(.home) #story{max-height:62vh}
  @supports(height:100dvh){
    body.counterfactual-active:not(.home) #story{max-height:62dvh}
  }
  /* 展开键：长章节可以把讲解面板拉到接近满屏（display 在下面的媒体块里打开） */
  /* 展开后讲解面板会顶到读数下面 —— 读数比正文低一级，先让位 */
  body.story-expanded:not(.home) #hud{display:none!important}
  body.story-expanded:not(.home) #story,
  body.story-expanded.counterfactual-active:not(.home) #story{
    max-height:calc(100vh - 116px);
  }
  @supports(height:100dvh){
    body.story-expanded:not(.home) #story,
    body.story-expanded.counterfactual-active:not(.home) #story{
      max-height:calc(100dvh - 116px);
    }
  }
  .cf-grid{grid-template-columns:1fr}
  .cf-grid canvas{height:68px}

  body.mobile-controls #story,
  body.mobile-charts #story{display:none!important}
  body.mobile-controls #hud{display:none!important}
  body.mobile-controls #right,
  body.mobile-charts #right{
    display:flex!important;
    left:10px;
    right:10px;
    top:104px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;
    max-height:none;
    overflow-y:auto;
  }
  body.mobile-controls #ctrl{
    overflow-y:auto;
  }
  /* 图表档：读数横铺在顶上，图表接在下面，一屏读完 */
  body.mobile-charts #hud{
    display:flex!important;
    top:104px;
    left:10px;
    right:10px;
    bottom:auto;
    max-width:none;
    flex-wrap:wrap;
    gap:14px 20px;
  }
  body.mobile-charts #hud .stat{display:block!important}
  body.mobile-charts #right{
    top:calc(112px + var(--hudH,84px));
  }
  body.mobile-charts #ctrl{display:none}
  body.mobile-charts #charts{
    flex:none;
    order:0;
  }
  body.mobile-charts #charts canvas.chart{height:auto}
  body.mobile-charts .charts-empty{display:block}
  body.mobile-charts #charts.show ~ .charts-empty{display:none}

  /* ── 手机上的舞台 ──
     竖屏里「画面正中」就是读数条和讲解面板之间那一块。它本来只有 ~30vh，
     装不下一张能看清的图，所以主角在台上时讲解面板让出一截。
     另外两档（图表 / 参数）会盖满整屏，那时舞台必须整个撤掉 ——
     它的 z-index 比 #right 高，不撤就会浮在参数面板上面。

     只有这两组放在这里：一组靠更高的选择器权重取胜，一组带 !important。
     纯尺寸的那几条搬到了文件末尾的媒体块 —— 舞台的桌面定义在本块之后，
     媒体查询不加权重，写在前面会被后面的同名规则整条盖掉（写第一版时就是
     这么错的：手机上舞台仍在用桌面的内边距和字号）。 */
  body.staged:not(.home) #story{max-height:37vh}
  @supports(height:100dvh){
    body.staged:not(.home) #story{max-height:37dvh}
  }
  body.mobile-charts #stage,body.mobile-controls #stage,
  body.mobile-charts #stagepick,body.mobile-controls #stagepick,
  body.story-expanded #stage,body.story-expanded #stagepick{display:none!important}
}

/* 展开键只在手机上有意义：电脑上讲解面板本来就是整条侧栏 */
#storyExpand{
  position:absolute;
  top:12px;
  right:12px;
  display:none;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#cfd6e4;
  font:500 10.5px/1 var(--sans);
  cursor:pointer;
}
#storyExpand:hover{background:rgba(255,255,255,.14)}

/* ── 舞台：一次只有一个主角 ────────────────────────────────
   画面重心必须跟着叙述走。正文讲到某张图的时候，那张图就该走到画面正中
   并且放大 —— 三维退成还在跑的背景。以前所有图都挤在 274px 的侧栏里，
   于是「先看实测数据，看体积怎么变」这句话，读者得先去角落里把那张
   邮票大的图找出来；找到之后也看不清。那句话等于没写。

   位置由每篇自己的 layoutStage() 按「没有被面板盖住的那块画面」算出来 ——
   和镜头用的是同一块矩形，所以舞台永远压不到讲解面板或读数上。 */
#stage{
  position:fixed;
  z-index:12;
  display:none;
  flex-direction:column;
  padding:17px 19px 13px;
  opacity:0;
  transform:translateY(10px) scale(.986);
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;
}
body.staged #stage{display:flex}
body.staged.stage-in #stage{opacity:1;transform:none}
#stagehost{display:flex;flex:1;flex-direction:column;min-height:0}
/* 舞台上的图表卡片：同一个 DOM 节点，只是换了个家。
   所以图表的绘制代码一份都不用改，尺寸由它当前的容器决定。 */
#stage .ckd{
  display:flex!important;
  flex:1;
  flex-direction:column;
  min-height:0;
  margin:0;
  padding-left:15px;
  border-left-width:3px;
}
#stage .ckd h4{
  margin-bottom:7px;
  font-size:clamp(17px,1.55vw,23px);
  line-height:1.3;
  letter-spacing:-.015em;
}
#stage .ckd .ckd-how{margin-bottom:13px;font-size:12.5px;line-height:1.65}
#stage .ckd .ckd-now{margin-top:12px;font-size:13.5px}
#stage canvas.chart{flex:1;min-height:0}

/* 三维退到背景，但不停 —— 图表就是从它身上量出来的，停下来就不诚实了 */
/* 0.24 试过，太狠：读者的原话是「画面里没有球了」。三维是这些图的来源，
   它得一直在场，只是不抢焦点。 */
body.staged:not(.home) #gl{opacity:.42}
body.staged:not(.home) #labels{opacity:.4}
body.staged:not(.home) #hint{opacity:0}

/* 主角切换器。「放大到画面中央」不能是一条单行道：
   读者随时要能把镜头切回三维，或者换看另一张图。 */
#stagepick{
  position:fixed;
  z-index:13;
  display:none;
  align-items:center;
  gap:3px;
  padding:4px;
  /* layoutStage() 给的 left 是那块空地的中心线，不是左边缘 */
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(8,10,18,.86);
  backdrop-filter:blur(18px);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
body.has-stagepick:not(.home) #stagepick{display:flex}
#stagepick>b{
  padding:0 7px 0 9px;
  color:#7d879b;
  font:500 10px/1 var(--sans);
  font-weight:500;
  letter-spacing:.1em;
  white-space:nowrap;
}
#stagepick button{
  border:0;
  border-radius:999px;
  background:transparent;
  color:#98a2b6;
  padding:6px 12px;
  font:500 11.5px/1 var(--sans);
  white-space:nowrap;
  cursor:pointer;
}
#stagepick button:hover{color:#f2f5fa}
#stagepick button.on{background:rgba(255,255,255,.14);color:#fff}

/* ── 分层阅读 ──────────────────────────────────────────────
   同一篇文章要同时喂饱两种读者：想跟住主线的，和想看推导的。
   .lede 是每章开头的一句话（无公式，读它就够了）；
   details.deep 把公式推导收起来，想看的人自己点开。 */
.lede{
  margin:0 0 15px;
  padding:0 0 13px;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#e8ecf6;
  font:500 15px/1.75 var(--sans);
  letter-spacing:.005em;
}
.lede b{color:#ffd866;font-weight:600}
details.deep{
  margin:15px 0;
  border:1px solid rgba(120,160,230,.24);
  border-radius:9px;
  background:rgba(96,140,220,.055);
}
details.deep>summary{
  padding:10px 13px;
  color:#9fc0ee;
  font:600 12.5px/1.5 var(--sans);
  cursor:pointer;
  list-style:none;
  user-select:none;
}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::before{
  content:"▸ ";
  display:inline-block;
  transition:transform .18s ease;
}
details.deep[open]>summary::before{content:"▾ "}
details.deep>summary:hover{color:#cfe0fb}
details.deep>*:not(summary){
  margin-left:13px;
  margin-right:13px;
}
details.deep>*:last-child{margin-bottom:12px}
/* 「现在动手做这个」的指令，和叙述区分开 */
.watch{
  margin:13px 0;
  padding:9px 12px;
  border-left:2px solid rgba(255,196,87,.6);
  background:rgba(255,196,87,.06);
  color:#e6d6b0;
  font:500 13px/1.7 var(--sans);
}
.watch b{color:#ffd866}

/* ── 先猜一下 ──────────────────────────────────────────────
   揭晓之前先让读者押一个答案。押错那一下的意外感，
   比把正确结论读十遍都更能长出直觉。 */
.predict{
  margin:16px 0;
  padding:13px 14px;
  border:1px solid rgba(255,196,87,.30);
  border-radius:10px;
  background:rgba(255,196,87,.05);
}
.predict .pq{
  margin:0 0 11px;
  color:#ffd866;
  font:600 13px/1.65 var(--sans);
}
.predict [data-pick]{
  display:block;
  width:100%;
  margin-bottom:7px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#dfe4ef;
  font:500 12.5px/1.5 var(--sans);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.predict [data-pick]:hover:not(:disabled){border-color:rgba(255,216,102,.5);background:rgba(255,255,255,.07)}
.predict [data-pick]:disabled{cursor:default;opacity:.55}
.predict [data-pick].correct{
  border-color:rgba(92,208,179,.75);
  background:rgba(92,208,179,.13);
  color:#9fe8d6;
  opacity:1;
}
.predict [data-pick].wrong{
  border-color:rgba(252,98,85,.6);
  background:rgba(252,98,85,.10);
  color:#f2a7a0;
  opacity:1;
}
.predict .pans{display:none}
.predict .pans.show{
  display:block;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.11);
  font:400 12.5px/1.75 var(--sans);
  color:#c3cbd9;
}
.predict .pans strong{display:block;margin-bottom:3px;color:#ffd866;font-weight:650}

/* ── 这个初态有多特殊 ────────────────────────────────────
   「测度极小」是一句读者接不住的抽象话。让他自己拖 N，
   看着那个数掉进没有任何东西可以类比的量级。 */
[data-odds]{
  margin:16px 0;
  padding:14px;
  border:1px solid rgba(120,160,230,.26);
  border-radius:10px;
  background:rgba(96,140,220,.06);
}
[data-odds] label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px;
  color:#9fc0ee;
  font:600 12.5px/1.4 var(--sans);
}
[data-odds] label b{
  font-family:var(--mono);
  font-size:13px;
  color:#e8ecf6;
  background:rgba(255,255,255,.08);
  padding:3px 9px;
  border-radius:6px;
}
[data-odds] .odds-out{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.10);
}
[data-odds] .odds-out span{color:#8f9aae;font:400 11.5px/1.5 var(--sans)}
[data-odds] .odds-out b{
  font-family:var(--mono);
  font-size:19px;
  font-weight:600;
  color:#ffd866;
  white-space:nowrap;
}
[data-odds] .odds-out b sup{font-size:12px}
[data-odds] [data-odds-cmp]{
  margin:10px 0 0;
  font:400 12px/1.7 var(--sans);
  color:#c3cbd9;
}
[data-odds] [data-odds-cmp] b{color:#ffd866;font-weight:600}

/* 正文里的「打开图表 / 打开参数」按钮 —— 电脑上面板就在旁边，不需要它 */
.open-charts,.open-controls{
  display:none;
  width:100%;
  margin:12px 0 14px;
  padding:11px 13px;
  border:1px solid rgba(255,196,87,.42);
  border-radius:10px;
  background:rgba(255,196,87,.1);
  color:#ffd866;
  font:600 12px/1.4 var(--sans);
  text-align:left;
  cursor:pointer;
}
/* 带明确目标的那种（data-open-charts="mb"）不是「去角落里找」，
   而是「把这张图搬到画面正中」—— 电脑上同样需要，所以放出来。 */
.open-charts[data-open-charts]:not([data-open-charts=""]){display:block}
.open-charts[data-open-charts]:not([data-open-charts=""]):hover{
  border-color:rgba(255,196,87,.7);
  background:rgba(255,196,87,.16);
}
.charts-empty{
  display:none;
  margin:0;
  padding:16px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:4px;
  color:#8f9aae;
  font:400 12px/1.75 var(--sans);
}
#charts.flash,#ctrl.flash{
  animation:chartsFlash 1.1s ease-out 2;
}
@keyframes chartsFlash{
  0%,100%{box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
  40%{box-shadow:0 0 0 2px rgba(255,196,87,.75),0 18px 40px -22px rgba(0,0,0,.9)}
}

/* ── 本章相关的控件 ────────────────────────────────────────
   全部摆出来是 877px 的内容塞进 295px 的面板：底下的按钮要滚很久才够得到，
   体感就是「被截断」。所以默认只留本章用得上的那几组，
   其余收进「显示全部参数」——一键就能全部拿回来。 */
.ckgrp{transition:opacity .25s ease}
.ckgrp.ck-dim{display:none}
body.ctrl-all .ckgrp.ck-dim{display:block;opacity:.5}
body.ctrl-all .ckgrp.ck-dim:hover,body.ctrl-all .ckgrp.ck-dim:focus-within{opacity:1}
.ck-toggle{
  display:block;
  width:100%;
  margin-top:16px;
  padding:9px 10px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:8px;
  background:transparent;
  color:#8f9aae;
  font:500 11.5px/1.4 var(--sans);
  cursor:pointer;
}
.ck-toggle:hover{border-color:rgba(255,255,255,.34);color:#c3cbd9}
.ckhint{
  margin:6px 2px 0;
  color:#7d879b;
  font:400 11px/1.55 var(--sans);
}

@media(max-width:900px){
  /* 舞台在手机上的排版。必须写在舞台的桌面定义之后 —— 见上面那段注释。 */
  #stage{padding:12px 13px 10px}
  #stage .ckd{padding-left:11px;border-left-width:2px}
  #stage .ckd h4{font-size:15.5px}
  #stage .ckd .ckd-how{margin-bottom:9px;font-size:11px}
  #stage .ckd .ckd-now{margin-top:9px;font-size:12px}
  #stagepick>b{display:none}
  #stagepick button{padding:6px 10px;font-size:11px}

  .open-charts,.open-controls{display:block}
  /* 手机上「参数」是独立一档，屏幕整个归它，不必收起来 */
  .ckgrp.ck-dim{display:block;opacity:1}
  .ck-toggle{display:none!important}
  #storyExpand{display:block}
  /* 标题别钻到展开键底下 */
  body:not(.home) #story h2{padding-right:52px}
}

@media(max-width:430px){
  body.home #home h1{font-size:clamp(41px,12vw,52px)}
  body.home #nav button{padding:7px 8px}
  body:not(.home) #nav button{padding:6px 8px;font-size:11px}
  body:not(.home) #mobilePanels button{padding:7px 10px}
  body:not(.home) #hud{gap:12px}
  body:not(.home) #hud .stat{min-width:48px}
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}