/*
 * 01 等待（The wait）· 正片模块的样式
 * 作者: 陈涛 (Alan Chen) <1315333@qq.com> · 2026-09-09
 *
 * 作用域纪律（§二十四.2）：每一条选择器都落在 .act01 里；没有 position:fixed；
 * 没有 backdrop-filter（全页预算 ≤ 2 已被顶栏与手机壳占满，玻璃一律走预烘半透明白）；
 * 每帧只动 transform / opacity / filter / background-position，不动会触发 layout 的属性。
 *
 * 所有色与度量都写成 var(--x, 兜底值)：模块要能在**没有页面 :root**的最小 harness 里
 * 独立跑起来（自验用），落进正片时又必须与页面同一套色板/槽位，两头都得成立。
 */

/* ── 层与舞台 ───────────────────────────────────────────────────────────── */
.act01{position:absolute;inset:0;pointer-events:none}
.act01 .a01-l{position:absolute;inset:0;will-change:transform,opacity}
.act01 .a01-beamlyr,.act01 .a01-haze{contain:paint}

/* ① 房间回暖（§二十四.3「加强到肉眼可见」）
   soft-light 的暖光落点只改色相不提亮，单用它在偏暗的候诊室上几乎读不出来；
   叠一层 screen 的暖空气把整屏色温真的抬起来。两层的峰值由 JS 按 p 给。 */
.act01 .a01-warm{opacity:0;mix-blend-mode:soft-light;
  background:
    radial-gradient(72% 62% at 22% 76%, rgba(255,138,91,.62), rgba(255,138,91,0) 64%),
    radial-gradient(58% 48% at 74% 26%, rgba(242,200,121,.42), rgba(242,200,121,0) 68%)}
.act01 .a01-warmair{opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(120% 96% at 30% 70%, rgba(255,150,96,.30), rgba(255,150,96,0) 72%),
    linear-gradient(184deg, rgba(255,196,140,.10), rgba(255,142,92,.22))}

/* ② 窗光光柱：角度随进度从清晨扫到黄昏 —— 时间在走 */
.act01 .a01-beamlyr{mix-blend-mode:screen;overflow:hidden}
.act01 .a01-beam{position:absolute;left:26%;top:-8%;width:18vmax;height:165vmax;
  transform-origin:50% 0%;will-change:transform,opacity}
.act01 .a01-beam>i{position:absolute;inset:0;display:block}
.act01 .a01-b-cool{
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 22%,
    rgba(255,255,255,.46) 44%,rgba(255,255,255,.52) 58%,rgba(255,255,255,.06) 82%,transparent 100%);
  filter:blur(9px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 44%,transparent 96%)}
.act01 .a01-b-warm{opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 4%,rgba(255,186,132,.52) 46%,rgba(255,146,90,.18) 74%,transparent 100%);
  filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 44%,transparent 96%)}
/* 尘埃走 CSS 关键帧（合成器上跑，每帧零主线程成本），挂在光柱里 → 光柱一转它跟着转 */
.act01 .a01-motes{position:absolute;inset:0;overflow:hidden}
.act01 .a01-motes span{position:absolute;border-radius:50%;background:#fff;opacity:0;
  will-change:transform,opacity;animation:a01mote linear infinite}
@keyframes a01mote{
  0%  {transform:translate3d(0,0,0) scale(.7);opacity:0}
  12% {opacity:.85}
  70% {opacity:.5}
  100%{transform:translate3d(var(--a01dx),var(--a01dy),0) scale(1.15);opacity:0}
}

/* ③ 玻璃上的雾 */
.act01 .a01-haze{opacity:.16;mix-blend-mode:screen}
.act01 .a01-haze b{position:absolute;display:block;background-repeat:no-repeat;background-size:cover;
  filter:blur(3px) saturate(.5) brightness(1.25);will-change:transform}

/* ④ 桌面白渐变（照片上绝不压黑，§十二.2） */
.act01 .a01-scrim{background:linear-gradient(100deg,
  rgba(251,248,243,.76) 0%, rgba(251,248,243,.52) 26%,
  rgba(251,248,243,.16) 46%, rgba(251,248,243,0) 62%)}

/* ── ⑤ 便签（桌面：窗上的玻璃卡，真 3D 翻面）────────────────────────────── */
.act01 .a01-notes{perspective:1400px;perspective-origin:22% 34%;transform-style:preserve-3d}
.act01 .a01-note{position:absolute;transform-style:preserve-3d;pointer-events:auto}
.act01 .a01-note[data-n="0"]{left:5.2%;top:12.0%;width:27.2%;height:7.8%;transform:rotate(-2.1deg)}
.act01 .a01-note[data-n="1"]{left:15.0%;top:21.4%;width:27.2%;height:7.8%;transform:rotate(1.5deg)}
.act01 .a01-note[data-n="2"]{left:4.6%;top:30.8%;width:27.2%;height:7.8%;transform:rotate(-1.2deg)}
.act01 .a01-note[data-n="3"]{left:14.8%;top:40.2%;width:27.2%;height:7.8%;transform:rotate(1.9deg)}
/* hover 的位移单独一层：倾斜在 .a01-note 上、翻面在 .a01-flip 上，
   三种变换各占一层才不会互相覆盖（同一节点上写两次 transform 是踩过的坑）。 */
.act01 .a01-lift{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.22,.8,.3,1),filter .32s ease}
.act01 .a01-note.a01-hov .a01-lift{transform:translate3d(0,-4px,26px);filter:brightness(1.06)}
.act01 .a01-flip{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateY(180deg);
  /* 「点睛动作」的弹性在这条 cubic-bezier 里（back.out 的等价形状），不在 scrub 时间线里。
     用 CSS transition 而不是 GSAP：模块不该假设页面一定给了 gsap，而且
     状态本身仍然是 p 的纯函数（下面的 .a01-open 由 update(p) 加/减），
     快速滚动时只是「直接到位」，永远不会漏掉一张。 */
  transition:transform .62s cubic-bezier(.18,.92,.28,1.12)}
.act01 .a01-note.a01-open .a01-flip{transform:rotateY(0deg)}
/* 抓帧脚本要的是终态，不是一段还在跑的 0.62 s 动画（§十九 的幂等探针） */
.act01.a01-settled .a01-flip,.act01.a01-settled .a01-lift{transition:none}

.act01 .a01-face{position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 18px 40px rgba(15,31,61,.10)}
/* 背面：还没被光照到时它只是一张日期条 —— 你还不知道自己会撞上什么 */
.act01 .a01-back{transform:rotateY(180deg);
  background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(206,221,242,.74));
  border:1px solid rgba(15,31,61,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  display:flex;align-items:center;gap:12px;padding:0 16px;
  color:var(--body,#3B4A63);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.act01 .a01-back .a01-rule{flex:1;height:1px;background:rgba(15,31,61,.14)}
.act01 .a01-back b{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:22px;
  color:var(--muted,#7C8AA5);line-height:1;transform:translateY(1px)}
/* 正面：预烘半透明白 + 2% 噪声（不用 backdrop-filter，§十五.2） */
.act01 .a01-front{border:1px solid rgba(15,31,61,.10);
  background-color:rgba(255,255,255,.66);background-image:var(--noise,none);
  display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px}
/* 缩略图 = 卡后面那块画面被玻璃放大偏移后透出来的（真折射）。
   §二十四.3「四张取景各不相同且可辨」：每张的放大倍率与偏移都不同（见 act01.js 的
   PEEK 表），叠上卡片自身位置不同 → 四块是房间的四处、四种景别。
   56px 而不是样机的 52px、且**不再 blur** —— 「可辨」是这一条的字面要求。 */
.act01 .a01-peek{flex:0 0 auto;width:56px;height:56px;border-radius:10px;overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);background-repeat:no-repeat;
  filter:saturate(1.04) contrast(1.14) brightness(1.04)}
.act01 .a01-peek:after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,0) 58%)}
.act01 .a01-txt{min-width:0}
.act01 .a01-lb{display:flex;align-items:baseline;gap:8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted,#7C8AA5)}
.act01 .a01-dot{width:6px;height:6px;border-radius:50%;background:#B9C4D6;flex:0 0 auto;
  transform:translateZ(0);transition:background-color .45s ease,box-shadow .45s ease}
.act01 .a01-note.a01-open .a01-dot{background:var(--coral,#FF8A5B);box-shadow:0 0 14px 2px rgba(255,138,91,.55)}
.act01 .a01-ln{display:block;margin-top:4px;font-size:13.5px;line-height:1.35;color:var(--ink,#0F1F3D)}
.act01 .a01-big{font-family:var(--serif,Georgia,serif);font-size:19px;color:var(--ink,#0F1F3D);line-height:1;font-weight:400}

/* ── ⑥ 文案 ─────────────────────────────────────────────────────────────── */
/* 数字的字号是**排版的地基**：一整块文案（眉标 + Waiting + 数字 + 尾句 + 副文）
   的高度基本由它决定，而收尾句要落在这块之下、不许压字。
   232px 那一档在 1728×962 上把副文推到 y=864（离屏底只剩 98px），收尾句无处可放；
   208px 之后整块墨迹收到 838，收尾句 851 起 —— 中间 13px 的空隙是算出来的。 */
.act01 .a01-copy{--a01-num:clamp(96px,11.6vw,208px)}
.act01 .a01-block{position:absolute;left:8%;top:50%;width:46%}
.act01 .a01-mob{display:none}
.act01 .a01-sr-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.act01 .a01-eyebrow{margin:0;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted,#7C8AA5)}
.act01 .a01-eyebrow em{font-style:normal;color:var(--coral,#FF8A5B)}
.act01 .a01-h1{margin:0;font-weight:400}
.act01 .a01-lead{display:block;font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:clamp(26px,3.0vw,44px);color:var(--ink,#0F1F3D);line-height:1;margin-top:12px}
.act01 .a01-tail{display:block;font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:clamp(20px,2.3vw,36px);color:var(--ink,#0F1F3D);line-height:1.06;margin-top:4px}
.act01 .a01-sub{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--body,#3B4A63);max-width:30em;
  font-family:var(--sans,system-ui,sans-serif);font-weight:300}

/* 有体积的「47」：六层叠在同一个字上 */
.act01 .a01-num{position:relative;display:inline-block;vertical-align:top;
  height:calc(var(--a01-num) * .92);margin:2px 0 0 -.055em;
  font-size:var(--a01-num);line-height:.78;font-family:var(--serif,Georgia,serif);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;will-change:transform,opacity}
.act01 .a01-nl{position:absolute;left:0;top:0;white-space:nowrap;display:block}
.act01 .a01-sizer{visibility:hidden;display:block;white-space:nowrap}
/* ① 投影：随窗光角度斜切平移 —— 光在动，影子就在动 */
.act01 .a01-cast{color:rgba(15,31,61,.30);filter:blur(9px);transform-origin:0% 100%}
/* ② 挤出：体积。逐层偏移用 em，字号一变整摞跟着缩放 */
.act01 .a01-ext{color:#2B4470;text-shadow:
  .0023em .0035em 0 rgb(53 79 125), .0046em .0071em 0 rgb(51 76 120), .0069em .0106em 0 rgb(49 73 117),
  .0092em .0141em 0 rgb(48 71 114), .0115em .0176em 0 rgb(46 69 111), .0139em .0212em 0 rgb(45 68 108),
  .0162em .0247em 0 rgb(44 66 106), .0185em .0282em 0 rgb(43 64 103), .0208em .0318em 0 rgb(42 63 101),
  .0231em .0353em 0 rgb(41 61 99),  .0254em .0388em 0 rgb(40 60 97),  .0277em .0423em 0 rgb(39 58 95),
  .0300em .0459em 0 rgb(38 57 93),  .0323em .0494em 0 rgb(37 56 91),  .0347em .0529em 0 rgb(36 54 89),
  .0370em .0564em 0 rgb(35 53 87),  .0393em .0600em 0 rgb(34 52 85),  .0416em .0635em 0 rgb(33 50 83),
  .0439em .0670em 0 rgb(32 49 81),  .0462em .0706em 0 rgb(31 48 79),  .0485em .0741em 0 rgb(30 47 78),
  .0508em .0776em 0 rgb(29 46 76),  .0531em .0811em 0 rgb(29 44 74),  .0554em .0847em 0 rgb(28 43 72),
  .0578em .0882em 0 rgb(27 42 71),  .0601em .0917em 0 rgb(26 41 69),  .0624em .0953em 0 rgb(25 40 67),
  .0647em .0988em 0 rgb(25 39 66),  .0670em .1023em 0 rgb(24 37 64),  .0693em .1058em 0 rgb(23 36 62),
  .0716em .1094em 0 rgb(22 35 61),  .0739em .1129em 0 rgb(22 34 59),  .0762em .1164em 0 rgb(21 33 58),
  .0785em .1200em 0 rgb(20 32 56)}
/* ③ 折射：字面里透出的是它背后那块房间，被放大并偏移 —— 真玻璃 */
.act01 .a01-refr{color:transparent;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  filter:blur(.5px) saturate(1.30) brightness(1.45) contrast(1.12)}
/* ④ 玻璃本身的色：上冷下暖，边缘更亮 */
.act01 .a01-tint{color:transparent;mix-blend-mode:screen;
  -webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(168deg,rgba(255,255,255,.86) 0%,rgba(234,243,255,.42) 26%,
    rgba(255,255,255,.10) 52%,rgba(124,196,255,.30) 78%,rgba(255,255,255,.58) 100%)}
/* ⑤ 高光带：随窗光角度扫过字面 */
.act01 .a01-spec{color:transparent;mix-blend-mode:screen;
  -webkit-background-clip:text;background-clip:text;background-size:260% 100%;
  background-image:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.94) 46%,
    rgba(255,255,255,.30) 54%,transparent 68%)}
/* ⑥ 点燃后：字面转珊瑚 */
.act01 .a01-emberf{color:transparent;opacity:0;
  -webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(170deg,#FFD8B0 0%,var(--coral,#FF8A5B) 46%,#F2703A 100%)}

/* 收尾句落在整块文案**之下**（不是样机那样压在尾句上）。88.5% 是量出来的：
   副文墨迹底沿 838，这里 851，中间 13px。它也远在光种子的飞行轨迹之下 ——
   种子从数字中心（y≈654）一路向上，最低点就是起点。 */
.act01 .a01-closer{position:absolute;left:8%;top:88.5%;width:42%;margin:0;opacity:0;
  font-family:var(--serif,Georgia,serif);font-style:italic;font-weight:400;line-height:1.18;
  font-size:clamp(22px,2.4vw,40px);color:var(--ink,#0F1F3D);will-change:opacity,transform}

/* ── ⑦ 余烬与光种子 ─────────────────────────────────────────────────────── */
.act01 .a01-fx{z-index:2}
.act01 .a01-ember{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFE0BC 0%,var(--coral,#FF8A5B) 48%,rgba(255,138,91,0) 72%);
  will-change:transform,opacity}
.act01 .a01-seed{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF3E2 0%,#FFC79A 34%,var(--coral,#FF8A5B) 60%,rgba(255,138,91,0) 74%);
  box-shadow:0 0 44px 12px rgba(255,138,91,.42);will-change:transform,opacity}

/* ══════════════════════════════════════════════════════════════════════════
   手机端（§十六.2 竖向三槽 + §二十 一主一次一辅）
   主：一句 44px 的衬线主句（倒数缩在句子里），顶槽；
   次：无（数字与主句一体，§二十.2 原话）；
   辅：一行痛点 chip，底槽 —— 便签在这里不是四张卡，是四个词。
   槽位变量沿用页面的 --sA0 / --sCB；harness 里没有页面 :root，所以都带兜底值。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .act01 .a01-dsk{display:none}
  .act01 .a01-mob{display:block}
  /* 桌面白渐变与折射数字整块不出现：手机端底是满幅照片 + 页面的 #scrimT/#scrimB，
     再叠一层白纱就是「整屏发灰」。 */
  .act01 .a01-scrim,.act01 .a01-sub{display:none}
  .act01 .a01-eyebrow{display:none}
  .act01 .a01-beam{left:6%;width:44vmax;height:180vmax}

  /* 顶槽主句：与页面其余五幕同一套（§二十.1） */
  .act01 .a01-block{left:5vw;right:5vw;width:auto;top:var(--sA0,72px)}
  .act01 .a01-h1{font-family:var(--serif,Georgia,serif);font-size:var(--m1,44px);line-height:1.05;
    letter-spacing:-.015em;color:var(--paper,#FBF8F3);padding-bottom:.06em;text-wrap:wrap}
  /* 数字要能做「拉焦」那一下（scale + blur），行内元素不吃 transform → inline-block。
     min-width:2ch 让 47 → 1 时宽度不变，整句不重排、换行位不动。 */
  .act01 .a01-cd{font-style:normal;display:inline-block;min-width:2ch;text-align:center;
    will-change:transform,filter,opacity}
  .act01 .a01-cd>b{display:inline-block;font-weight:inherit;font-style:normal}
  .act01 .a01-cd.a01-one{color:var(--coral,#FF8A5B)}
  .act01 .a01-cdu{font-style:normal}

  /* 底槽一行痛点：没有底色、没有边框、没有缩略图 —— 一行 chip 是 Level 3，
     四个小药丸就是四张卡（§二十.4「同一屏最多一张卡」）。 */
  .act01 .a01-notes{position:absolute;inset:auto 0 auto 0;
    left:5vw;right:5vw;top:auto;bottom:calc(var(--sCB,8dvh));
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:0;
    perspective:none;transform-style:flat;
    font-size:var(--m4,13px);white-space:nowrap;
    color:color-mix(in srgb,var(--paper,#FBF8F3) 86%,transparent)}
  /* 选择器写 `[data-n]` 不是 `.a01-note`，是为了**具体度**，不是为了选得更准：
     桌面那四条 `.act01 .a01-note[data-n="N"]`（0,3,0）钉死了 left/top/width/height/rotate，
     而 `.act01 .a01-note`（0,2,0）一条都盖不住 —— 媒体查询不加具体度，写在后面也没用。
     实测后果（五档全中）：四个 chip 被钉成等宽 27.2%、按桌面的 left 百分比相对偏移、
     彼此重叠，整行右沿出屏 —— 360 档 note3 右沿 390.2 > 舞台内缘 342（越界 48.2px），
     390 档 422.7 > 370.5，440 档 476.8 > 418，最后一个词「Language」被裁掉半截。
     上一版把 `text-transform:uppercase` 关掉只削掉了一部分宽度，没碰到根子。 */
  .act01 .a01-note[data-n]{position:relative;left:auto;top:auto;width:auto;height:auto;
    transform:none;transform-style:flat;display:flex;align-items:center;opacity:.55;
    flex:0 1 auto;min-width:0;
    transition:opacity .4s ease}
  .act01 .a01-note[data-n].a01-open{opacity:1;color:var(--paper,#FBF8F3)}
  .act01 .a01-note+.a01-note::before{content:"·";margin:0 7px;opacity:.6}
  .act01 .a01-lift,.act01 .a01-flip{position:relative;inset:auto;transform:none!important;
    transition:none;transform-style:flat}
  .act01 .a01-face{position:relative;inset:auto;border:0;box-shadow:none;background:none;
    backface-visibility:visible;-webkit-backface-visibility:visible;border-radius:0;padding:0;overflow:visible}
  .act01 .a01-back,.act01 .a01-peek,.act01 .a01-ln,.act01 .a01-big,.act01 .a01-dot{display:none}
  .act01 .a01-front{padding:0;gap:0;background:none}
  /* 标签在 DOM 里就是 Title Case（"Referral"），桌面靠 .a01-lb 的 uppercase 变成小型大写眉标。
     手机这里必须把 uppercase 关掉：全大写 + 字距的四个词在 390 上排 383px，
     比 5vw 内缩后的 351px 宽 32px，末尾那个词被舞台裁掉（实测 note3 越界 32.7px）。 */
  .act01 .a01-lb{font-size:var(--m4,13px);letter-spacing:.01em;text-transform:none;color:inherit;gap:0}
  .act01 .a01-tag{text-transform:none;letter-spacing:.01em}

  /* 收尾句落**底槽**（痛点那一行此时已经退干净了，见 act01.js 的时序表）。
     这就是 §二十四.3「手机端收尾句被光种子/便签压字」的解法：
     换位置（顶槽 → 底槽）＋ 换时序（痛点先退 → 收尾句再进），两条同时做。 */
  .act01 .a01-closer{left:5vw;right:5vw;width:auto;top:auto;
    bottom:calc(var(--sCB,8dvh) + 14px);
    font-size:var(--m1,44px);line-height:1.05;font-style:italic;
    color:var(--paper,#FBF8F3);letter-spacing:-.015em}
}

/* ══════════════════════════════════════════════════════════════════════════
   退化流（无 JS / GSAP 未到位 / prefers-reduced-motion）
   退化不是「把动画停住」，是换一套版式：没有 render(p) 的世界里，
   所有靠 JS 定位的绝对层没有意义，一律不出现；文字与四条痛点走文档流。
   页面那边已经把 .lay 变成 flex 列、把 .lay>* 放回文档流，这里只补 01 幕自己的部分。
   ══════════════════════════════════════════════════════════════════════════ */
html:not(.motion) .act01{position:relative;inset:auto;pointer-events:auto}
html:not(.motion) .act01 .a01-warm,html:not(.motion) .act01 .a01-warmair,
html:not(.motion) .act01 .a01-beamlyr,html:not(.motion) .act01 .a01-haze,
html:not(.motion) .act01 .a01-scrim,html:not(.motion) .act01 .a01-fx{display:none}
html:not(.motion) .act01 .a01-copy,html:not(.motion) .act01 .a01-notes{position:relative;inset:auto}
html:not(.motion) .act01 .a01-block{position:relative;left:auto;top:auto;width:100%}
html:not(.motion) .act01 .a01-closer{position:relative;left:auto;top:auto;bottom:auto;width:100%;
  opacity:1;transform:none;margin-top:26px}
html:not(.motion) .act01 .a01-notes{display:grid;gap:12px;width:100%;perspective:none;transform-style:flat;
  margin-top:28px;flex-direction:column;white-space:normal}
html:not(.motion) .act01 .a01-note{position:relative;left:auto;top:auto;width:auto;height:auto;
  transform:none;opacity:1;transform-style:flat;display:block}
html:not(.motion) .act01 .a01-note+.a01-note::before{content:none}
html:not(.motion) .act01 .a01-lift,html:not(.motion) .act01 .a01-flip{position:relative;inset:auto;
  transform:none!important;transition:none;transform-style:flat}
html:not(.motion) .act01 .a01-back{display:none}
html:not(.motion) .act01 .a01-face{position:relative;inset:auto;height:auto;
  backface-visibility:visible;-webkit-backface-visibility:visible}
html:not(.motion) .act01 .a01-front{display:flex;min-height:66px;background-color:rgba(255,255,255,.86);
  padding:8px 14px 8px 8px;border-radius:14px;box-shadow:0 10px 28px rgba(15,31,61,.08)}
html:not(.motion) .act01 .a01-peek{display:block;background-size:cover;background-position:center}
html:not(.motion) .act01 .a01-cast{display:none}
/* 退化流里没有「卡后面正好是那块画面」这回事，折射层整块不出现 —— 数字仍有体积（挤出层还在）。 */
html:not(.motion) .act01 .a01-refr,html:not(.motion) .act01 .a01-spec,
html:not(.motion) .act01 .a01-emberf{display:none}