/* ============================================================================
   引擎层 —— 由 peek.html 提取（脚本 _tools/提取-引擎层.py 生成，勿手改）
   内容：十主题变量 · 影像四层 · 过场 · 揭示 · 天光带仪表 · 金底条 · 换主题过场
   参数与 peek.html 完全一致，一处未改。
============================================================================ */

/* ============================================================================
   看看 —— 在「theme handle」这套已认可的语言上做的第二个动作
   ----------------------------------------------------------------------------
   一、入口＝仪表自己的**金色底条**（与主题栏等宽、通栏）：一只大眼 ＋ 眼下四字。
       金色的职能是「数据·行动·状态·结构」，而「看看」是行动 —— 合规。
       「活气」全在眼睛上：桌面端「跟着你 ＋ 会眨眼」（鼠标停手 2.6s 就归位到正中、
       并开始不固定频率地眨眼）；触屏端「好奇地东瞧瞧西看看」，眨眼同样不固定频率。
   二、揭开走 .rv 的同一套配方（不是另发明一套）：
       `--rv-r` + 三段软边 mask（#000 0 66% / .45 90% / transparent 100%），
       620ms cubic-bezier(.16,1,.3,1) 铺开 —— 与换主题过场**同一手感**。
       区别只在作用对象：换主题是「光盖上来」，看看是「光把雾推开」。
   三、多一圈**推进光环**：两层 mask 做 XOR 得到一圈跟着走的光，
       所以「雾散」读起来是光在推进，而不是一块圆在放大。
   四、停留 1 秒。到点就合 —— 来不及看仔细是这个动作的意义本身。
      合上用 420ms ease（＝ .rv 的退光时长），缓动与打开**不对称**。
============================================================================ */

/* ---------------------------------------------------------------- 十主题变量 */
/* 「雾的厚度倍率」——过场第一段用它做「整屏均匀变薄」（见 @keyframes thin）。
   注册成可插值的 <number>，才能被动画平滑地插值；不注册就只能整段跳变。 */
@property --veil-k { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --duo-k  { syntax: '<number>'; inherits: true; initial-value: 1; }
:root {
  --veil-k: 1; --duo-k: 1;
  --veil-light: linear-gradient(180deg,
      rgb(var(--p) / calc(.62 * var(--veil-k))) 0%, rgb(var(--p) / calc(.18 * var(--veil-k))) 26%,
      rgb(var(--p) / calc(.26 * var(--veil-k))) 58%, rgb(var(--p) / calc(.94 * var(--veil-k))) 100%);
  --veil-dark: linear-gradient(180deg,
      rgb(var(--p) / calc(.52 * var(--veil-k))) 0%, rgb(var(--p) / calc(.14 * var(--veil-k))) 26%,
      rgb(var(--p) / calc(.34 * var(--veil-k))) 58%, rgb(var(--p) / calc(.90 * var(--veil-k))) 100%);
}
[data-th="snow"]{
  --page:#F5F3EE; --ink:#22262C; --ink2:#5B6472; --ink3:#7A8494; --hair:rgba(34,38,44,.14);
  --on-img:#22262C; --on-img2:rgba(34,38,44,.70); --on-img3:rgba(34,38,44,.54);
  --seg:#DAE0E8; --halo-rgb:198 210 222;
  --rv-bg:linear-gradient(168deg,#F2F5F8 0%,#DFE6EE 52%,#C9D2DC 100%);
  --p:245 243 238; --veil:var(--veil-light);
  --img:saturate(.40) brightness(1.56) contrast(.70);
  --duo:#DAE0E8; --duo-op:.95; --glow:none;
}
[data-th="gravel"]{
  --page:#F5F3EE; --ink:#22262C; --ink2:#5A483E; --ink3:#7A8494; --hair:#D9D2C6;
  --on-img:#202024; --on-img2:rgba(32,32,36,.72); --on-img3:rgba(32,32,36,.56);
  --seg:#C6C2BE; --halo-rgb:184 178 172;
  --rv-bg:linear-gradient(168deg,#DDD9D4 0%,#CFCAC5 52%,#B4AFAA 100%);
  --p:245 243 238; --veil:var(--veil-light);
  --img:saturate(.30) brightness(1.44) contrast(.76);
  --duo:#C6C2BE; --duo-op:.92; --glow:none;
}
[data-th="sky"]{
  --page:#F5F3EE; --ink:#1B2A38; --ink2:#41586E; --ink3:#7A8494; --hair:rgba(27,42,56,.14);
  --on-img:#F5F3EE; --on-img2:rgba(245,243,238,.76); --on-img3:rgba(245,243,238,.56);
  --seg:#88B2D2; --halo-rgb:136 178 210;
  --rv-bg:linear-gradient(168deg,#C8DBEA 0%,#A8C6DE 46%,#88B2D2 100%);
  --p:16 30 44; --veil:var(--veil-dark);
  --img:saturate(1.02) brightness(1.24) contrast(.86);
  --duo:#88B2D2; --duo-op:.80;
  --glow:radial-gradient(58% 44% at 78% 12%, rgba(255,255,255,.28), rgba(255,255,255,0) 66%);
}
[data-th="sand"]{
  --page:#F5F3EE; --ink:#3A2B1E; --ink2:#6B5541; --ink3:#8C7A66; --hair:rgba(58,43,30,.14);
  --on-img:#F7F3EC; --on-img2:rgba(247,243,236,.78); --on-img3:rgba(247,243,236,.58);
  --seg:#AD9177; --halo-rgb:173 145 119;
  --rv-bg:linear-gradient(168deg,#D8C6B3 0%,#C0A489 50%,#96795F 100%);
  --p:40 30 20; --veil:var(--veil-dark);
  --img:saturate(.72) brightness(1.16) contrast(.88);
  --duo:#AD9177; --duo-op:.84;
  --glow:linear-gradient(0deg, rgba(255,214,150,.26) 0%, rgba(255,214,150,0) 32%);
}
[data-th="lake"]{
  --page:#F5F3EE; --ink:#1B242E; --ink2:#42556A; --ink3:#7A8494; --hair:rgba(27,36,46,.14);
  --on-img:#F5F3EE; --on-img2:rgba(245,243,238,.76); --on-img3:rgba(245,243,238,.56);
  --seg:#5488B2; --halo-rgb:84 136 178;
  --rv-bg:linear-gradient(168deg,#5488B2 0%,#43708F 46%,#36617F 100%);
  --p:16 22 30; --veil:var(--veil-dark);
  --img:saturate(1.16) brightness(.78) contrast(1.02);
  --duo:#5488B2; --duo-op:.90;
  /* 签名光落点规矩（创始人 2026-09-24 指出「灯打在文字背后」后立的）：
     ① 亮光不得与正文矩形相交 —— 正文在左下（约 x 2%–48% / y 65%–87%），亮光一律往右上走；
     ② 光与文字色反相 —— 浅字主题只允许「比底更暗」压角，或把亮光移出文字区；
     ③ 一主题一光源保留（十主题不塌成一种灰的关键）—— 只挪落点，不删。
     本主题：光移到右上角（正午水面反光），左下不再打光。
     实测改造前：文字背后底色中位亮度 69.1（去光 39.4），对比度 11.9 → 24.2。 */
  --glow:radial-gradient(50% 36% at 86% 6%, rgba(168,208,232,.40), rgba(168,208,232,0) 68%);
}
[data-th="ochre"]{
  --page:#F5F3EE; --ink:#241C14; --ink2:#5E4A38; --ink3:#8A7663; --hair:rgba(36,28,20,.14);
  --on-img:#F6F1E9; --on-img2:rgba(246,241,233,.78); --on-img3:rgba(246,241,233,.58);
  --seg:#876B55; --halo-rgb:135 107 85;
  --rv-bg:linear-gradient(168deg,#8A6E56 0%,#6E5847 48%,#5A483E 100%);
  --p:36 28 20; --veil:var(--veil-dark);
  --img:saturate(.78) brightness(.70) contrast(1.04);
  --duo:#876B55; --duo-op:.82;
  /* 签名光：**无**（创始人 2026-09-25 裁定：「土垣主题有一条横杠元素，我觉得没什么意义，去掉」）。
     原为压在正文下方的一线金色地平线（底部 78~104px，峰值 .60）；更早是底部 34% 一大片暖光。
     两条都没有承担视觉职能，已整体移除 —— 本主题不设光源，由影像与蒙版独立成屏。 */
  --glow:none;
}
[data-th="far"]{
  --page:#F5F3EE; --ink:#16242E; --ink2:#3C5568; --ink3:#7A8494; --hair:rgba(22,36,46,.14);
  --on-img:#F4F6F8; --on-img2:rgba(244,246,248,.76); --on-img3:rgba(244,246,248,.56);
  --seg:#36617F; --halo-rgb:54 97 127;
  --rv-bg:linear-gradient(168deg,#4D7EA3 0%,#3B6B8C 46%,#2D3B4C 100%);
  --p:12 20 30; --veil:var(--veil-dark);
  --img:saturate(1.10) brightness(.62) contrast(1.06);
  --duo:#36617F; --duo-op:.84;
  /* 签名光：**无**（创始人 2026-09-25 裁定：「远航主题有一条横杠元素，我觉得没什么意义，去掉」）。
     原为贴着下缘的一道金色地平线（底部 46~50px，峰值 .62）；更早是 70%×40% 的一大片暖光。
     两条都没有承担视觉职能，已整体移除 —— 本主题不设光源，由影像与蒙版独立成屏。 */
  --glow:none;
}
[data-th="rock"]{
  --page:#F5F3EE; --ink:#241E19; --ink2:#54473D; --ink3:#877A6E; --hair:rgba(36,30,25,.15);
  --on-img:#F5F1EC; --on-img2:rgba(245,241,236,.76); --on-img3:rgba(245,241,236,.56);
  --seg:#5A483E; --halo-rgb:90 72 62;
  --rv-bg:linear-gradient(168deg,#6B564A 0%,#4E3E35 50%,#3F312A 100%);
  --p:26 20 16; --veil:var(--veil-dark);
  --img:saturate(.74) brightness(.64) contrast(1.05);
  --duo:#5A483E; --duo-op:.84;
  --glow:linear-gradient(180deg, rgba(232,168,98,.20) 0%, rgba(232,168,98,0) 26%);
}
[data-th="dusk"]{
  --page:#F5F3EE; --ink:#141C26; --ink2:#3A4C60; --ink3:#7A8494; --hair:rgba(20,28,38,.15);
  --on-img:#F2F4F7; --on-img2:rgba(242,244,247,.76); --on-img3:rgba(242,244,247,.56);
  --seg:#2D3B4C; --halo-rgb:45 59 76;
  --rv-bg:linear-gradient(172deg,#3B5169 0%,#31445A 48%,#2D3B4C 100%);
  --p:10 16 24; --veil:var(--veil-dark);
  --img:saturate(1.02) brightness(.46) contrast(1.08);
  --duo:#2D3B4C; --duo-op:.88;
  /* 签名光：二次改造（2026-09-24）。第一步只把它挪出了文字区，创始人又点了一次：
     「冷底出现一坨暖光，很奇怪，需要改。」—— 实测印证得比话更狠：
     本主题全幅是冷调（R−B = −15.6），而那团金光把右上角染成 R−B = **+5.9（暖）**，
     冷暖正面对撞。根因是**按「画面」挑光源、没按「主题色相」挑** ——
     暮山 21–24 时是冷蓝灰的暮色，这里的光只能是**同族的冷光**（云缝里最后一片月色），
     不能是日出金。改为冷光后：右上 R−B = −29.0（冷）、亮度比无光时 **+22.7**
     —— 光还在、仍是这一主题独有的光源，只是回到了自己的色系。
     实测文字区「带宽/去光」读数完全一致（光未触碰正文，正文底边在 65vh）。 */
  --glow:radial-gradient(84% 62% at 76% 4%, rgba(170,192,216,.26), rgba(170,192,216,0) 72%);
}
[data-th="ink"]{
  --page:#F5F3EE; --ink:#131316; --ink2:#3E4046; --ink3:#7A8494; --hair:rgba(19,19,22,.15);
  --on-img:#F1F1F3; --on-img2:rgba(241,241,243,.74); --on-img3:rgba(241,241,243,.54);
  --seg:#202024; --halo-rgb:32 32 36;
  --rv-bg:linear-gradient(168deg,#2D3B4C 0%,#252934 50%,#141416 100%);
  --p:8 8 10; --veil:var(--veil-dark);
  --img:saturate(.60) brightness(.42) contrast(1.12);
  --duo:#202024; --duo-op:.78;
  --glow:radial-gradient(118% 82% at 84% -6%, rgba(45,59,76,.98), rgba(45,59,76,0) 70%);
}

/* ---------------------------------------------------------------- 影像层
   ★ 层序（2026-09-24 三改，为「一片纯色」上的保险）：
     ① **主题版永远完整地画在最底下**（它不再带 mask）；
     ② 原片在上，用 mask **揭进来** —— 不是把主题版遮出去。
   于是洞里露出的必然是「原片」；**原片若因任何原因没画出来，露出的也是完整的主题版**，
   绝不会是一块底色 #101318（老结构实测：原片缺失时纯色覆盖 97.5% 屏、且持续整个一秒停留）。 */
.media { position: absolute; inset: 0; z-index: 0; overflow: hidden;
         background: rgb(var(--p, 16 19 24)); }   /* 兜底＝该主题的底色，不写死冷黑 */
.media__themed { position: absolute; inset: 0; z-index: 0; }
.media__native {                       /* 原片：被 mask 从按钮那个点揭出来（<picture>） */
  position: absolute; inset: 0; display: block; z-index: 1;
  -webkit-mask-image: radial-gradient(circle var(--pk, 0px) at var(--px, 50%) var(--py, 50%),
      #000 0 66%, rgba(0,0,0,.45) 90%, transparent 100%);
  mask-image: radial-gradient(circle var(--pk, 0px) at var(--px, 50%) var(--py, 50%),
      #000 0 66%, rgba(0,0,0,.45) 90%, transparent 100%);
  /* ★ 揭示半径与缓动：见 :root 里的 --pk-max 说明。时长/曲线收进变量，
     好让「打开」与「合上」两段各自成套；JS 也从同一批变量取时长，不会再两处漂移。 */
  transition: --pk var(--pk-t-open, .48s) var(--pk-e-open, cubic-bezier(.22,.61,.36,1));
}
/* 原片层：只承担几何，**不带任何主题滤镜** —— 「让我看看」揭开的必须是真容。 */
.media__native > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.media__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--img); transition: filter .62s cubic-bezier(.4,0,.2,1);
}
.media__duo {
  position: absolute; inset: 0; background-color: var(--duo);
  mix-blend-mode: color; opacity: calc(var(--duo-op) * var(--duo-k, 1));
  transition: opacity .5s ease, background-color .5s ease;
}
.media__veil { position: absolute; inset: 0; background: var(--veil); }
.media__glow { position: absolute; inset: 0; z-index: 3; background: var(--glow);
               transition: background .5s ease; }   /* 签名光永远最上 */

/* 前沿光（2026-09-24 三改）：**紧贴揭示边的一条窄环**，用单层 background 渐变做出来 ——
   · **不用 mask**，所以不依赖 `mask-composite`。老版是两层 mask 做 XOR，一旦合成不被支持就
     退化成一整块圆盘（实测覆盖 42% 屏的均匀白糊）—— 那就是「一片纯色」的来源之一。
   · 半径**直接就是 `--pk`**（与遮罩同一个变量、同一条缓动），所以光和雾的边**永远是同一条线**。
     老版光是 0.35~0.7×半径、雾边在 0.66~1.0×半径 → 光必然漂在雾后面，把刚露出的画面糊白
     （实测覆盖 13~25% 屏、该处细节被吃掉 7~35%）。
   · 环心偏白、外肩压一层极淡的暗 —— 亮主题（雪线/砾径）上这条光才有「界」，
     暗主题上那一层暗几乎看不见。单色环必有一半主题糊掉，这条规矩与金底条同源。
   · ★ 这里**不存在任何「线」** —— 与创始人明确认可过的换主题过场（`.rv`：软边 66%/90%/100%、
     无硬线）用同一套语言。演化过程（都是量出来的）：
       ① 宽而软的 34% 白带 → 占地 13~25% 屏，把刚露出的画面糊白（他反馈的「一片纯色」）；
       ② 收成窄亮线（峰值在 pk 正上方）→ 干净了，但照片上出现一条**像用笔画的白圆圈**，
          读起来是「数字感」不是「雾」；
       ③ 定案：**光只存在于雾里**（峰值在 pk+10px，即已经盖上雾的那一侧），
          且峰值只有 .13、外侧摊到 ~120px —— 软光晕，无线、不沾照片、不糊画面。
       判据：峰值 ≥.20 会被读成「线」；占地 >10% 会被读成「糊」。 */
.pk-halo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%),
      rgba(255,251,244,0)   calc(var(--pk, 0px) - 40px),
      rgba(255,253,248,.13) calc(var(--pk, 0px) + 10px),
      rgba(255,251,244,.07) calc(var(--pk, 0px) + 70px),
      rgba(20,16,10,.06)    calc(var(--pk, 0px) + 120px),
      rgba(20,16,10,0)      calc(var(--pk, 0px) + 190px));
  transition: --pk var(--pk-t-open, .48s) var(--pk-e-open, cubic-bezier(.22,.61,.36,1)),
              opacity .2s ease;
}
@property --pk { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* ---------------------------------------------------------------- 揭示半径：必须按视口实算
   写死 210vmax（＝视口长边 2.1 倍）时，洞在一帧之内就冲出画面：
   实测把半径锁到 max 的 42% 与 100% 两帧截图逐像素对比 —— 平均差只有 3.5（几乎一样），
   也就是「扫过画面」这件事只占 620ms 的**前 ~11%（≈68ms）**走完。
   观感就是「啪」一下整屏换掉，不是「雾被推开」—— 这正是「打开的动效很廉价」的来源。
   → 半径＝镜头到最远那个角的距离 ÷ .62（软边外沿也要出屏）＋ 余量；
     配合中速收尾缓动，可见的扫过过程拉长到 ~384ms（约 5.6 倍），动作才看得见。
   由 JS 的 seatRadius() 写进 --pk-max；下面的兜底值只在 JS 未执行时生效。 */
:root {
  --pk-max: 210vmax;                                  /* 兜底；实际由 seatRadius() 写 */
  /* 时长与缓动：**JS 也从这三个变量取**（不再各写一份，避免漂移）。
     散开从 620ms 收到 480ms —— 老的 620ms 里约 236ms 是「半径已经出屏、动画还在走」的空转，
     那才是「时间不短」的实感来源；前沿光窄化之后，480ms 已经足够看清一次扫过。 */
  --pk-t-open: .48s;  --pk-e-open: cubic-bezier(.22,.61,.36,1);   /* 雾退：起得决断、收得软 */
  --pk-t-close: .46s;                                     /* 雾合：比打开略慢，收得更软 */
}

/* ---------------------------------------------------------------- 屏 */
.screen { position: relative; min-height: 100svh; overflow: hidden; display: grid;
          /* ★ 与首屏同一条坑，别再漏：网格隐式列默认按 max-content 定宽，
             于是 .screen__inner 被最长的那个句子撑宽 → 长句不换行、直接溢出被裁。
             minmax(0,1fr) 把列钉在容器宽度上（首屏 .hero 早就这么解了）。 */
          grid-template-columns: minmax(0, 1fr);
          align-items: end; color: var(--on-img); }
.screen__inner { position: relative; z-index: 4; width: 100%; max-width: var(--maxw);
                 margin-inline: auto; padding: 0 var(--gutter) 13vh; }
.screen__type {
  opacity: var(--to, 1);
  transform: translateY(var(--ty, 0px)) scale(var(--ts, 1));
  transform-origin: 50% 100%;
  /* 让位要跟着雾走、并在这段里走完：雾先动（0ms）、字随后（延迟 .32s）×  .4s
     → 字在揭开段结束前就位，停留的一秒里画面是静的。 */
  transition: opacity .34s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.kicker { font-size: 12px; letter-spacing: .22em; color: var(--on-img3);
          margin: 0 0 1.1em; }
.screen__type h1 { margin: 0 0 .5em; font-size: clamp(28px, 4.1vw, 60px); line-height: 1.16;
                   letter-spacing: -.02em; font-weight: 650; max-width: 22ch; }
.screen__type p { margin: 0; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.7;
                  color: var(--on-img2); max-width: 34em; }
.screen__type .stage { margin-top: 1.5em; font-size: 13px; color: var(--on-img2);
                       border-left: 2px solid var(--c-sun); padding-left: .9em; }

/* 揭开：字退一半给画面让路（错峰 320ms）；合上时最后回来 */
.screen.peeking .screen__type { --to: .5; --ts: .965; --ty: 8px; transition-delay: .32s; }
.screen.closing .screen__type { --to: .5; --ts: .965; --ty: 8px; }
.screen.peeking  { --pk: var(--pk-max); animation: thin var(--pk-t-open, .48s) cubic-bezier(.22,.61,.36,1); }
.screen.peeking  .pk-halo { opacity: 1; }
.screen.closing  { --pk: 0px; }
.screen.closing  .media__native,
.screen.closing  .pk-halo { transition: --pk var(--pk-t-close, .46s) ease, opacity .2s ease; }

/* ============================================================================
   过场第一段（前 34% 时长）：**整屏均匀变薄** —— 雾与色cast 一起减一点，**没有任何边界**。
   这一步是「高级感」的关键：它让点击的第一下读起来是「空气清了一瞬」，
   而不是「一块什么东西糊过去」。第二段才由 mask 从按钮把雾推开，
   并且到第二段结束时厚度回到原值 —— 于是观感是「雾往外退、在外圈重新聚拢」，
   而不是「全屏变亮了一下」。两个量都注册过，才能被插值。 */
@keyframes thin {
  0%   { --veil-k: 1;   --duo-k: 1; }
  34%  { --veil-k: .74; --duo-k: .84; }
  100% { --veil-k: 1;   --duo-k: 1; }
}
/* 合上的最后一记余韵：**雾在收拢末端轻轻过冲一下再落回**（像液面落定时的回弹）。
   ⚠️ 第一版把这一笔做在 `.media__img` 的 `filter: saturate(1.14)` 上 —— 实测只影响 **0.1%** 的像素，
   因为那张图被 `.veil` 盖着（底部蒙版 .90 近不透明），滤镜根本透不出来。**凡是被蒙版盖住的层，
   别指望它的滤镜能被看见**；要留下印象，就动那个真正在被看见的东西 —— 这里就是「雾」。 */
@keyframes settle {
  0%, 50% { --veil-k: 1;   --duo-k: 1; }
  76%     { --veil-k: .90; --duo-k: .95; }
  100%    { --veil-k: 1;   --duo-k: 1; }
}
.screen.closing { animation: settle var(--pk-t-close, .46s) ease-out; }

/* 取证专用：验收入口（?p= / ?pk=）必须**不依赖过渡与动画**。
   无头里动画时钟不推进，靠过渡走到终态是碰运气 —— 会量出「某些主题没揭开」的假象。
   这里一刀切掉整个 .screen 子树的动画与过渡（仪表/眼睛在 .screen 之外，不受影响）。 */
.screen.noanim, .screen.noanim * { animation: none !important; transition: none !important; }

/* ---------------------------------------------------------------- 天光带（照搬 trial.html 的仪表） */
.band {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; align-items: stretch;
  padding: 14px 16px; border-radius: 8px 0 0 8px;
  background: rgb(var(--p) / .34);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: inset 1px 0 0 rgb(var(--halo-rgb) / .22);
  color: var(--on-img);
  transition: background-color .5s ease, color .5s ease;
}
/* 仪表：上半＝「换一程 → 到了哪里（名字＋时辰）＋ 天光带」，下半＝金色底条「让我看看」。
   （创始人 2026-09-24 定的从上到下顺序，窄屏同样保持） */
.band__row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.band__meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.band__name { order: 0; font-size: 15px; font-weight: 700; letter-spacing: .14em; }
.band__hour { order: 1; margin-top: 4px; font-family: var(--ff-mono); font-size: 11px;
              letter-spacing: .08em; color: var(--on-img3); }
.band__acts { order: -1; display: flex; flex-direction: column; align-items: flex-end;
              gap: 6px; margin: 0 0 9px; }
.band__act {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: .1em; color: var(--on-img2);
  border-bottom: 1px solid rgb(var(--halo-rgb) / .45);
  transition: color .2s ease, border-color .2s ease;
}
.band__act:hover { color: var(--c-sun); border-color: var(--c-sun); }
.band__act svg { width: 12px; height: 12px; }
.band__segs { display: flex; flex-direction: column; align-items: flex-end; }
.band__seg {
  width: 9px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: var(--sc); position: relative;
  transition: width .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.band__seg:first-child { border-radius: 4px 4px 0 0; }
.band__seg:last-child { border-radius: 0 0 4px 4px; }
.band__seg:hover { width: 17px; }
.band__seg[aria-pressed="true"] { width: 21px;
  box-shadow: 0 0 0 1px rgb(var(--halo-rgb) / .55), 0 0 22px rgb(var(--halo-rgb) / .45); }
.band__seg:focus-visible { outline: 2px solid var(--c-sun); outline-offset: 2px; }

/* ---------------------------------------------------------------- 换主题过场（照搬） */
.rv { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0;
      background: var(--rv-bg); clip-path: circle(0px at var(--rv-x, 50%) var(--rv-y, 50%)); }
.rv::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle 54vmax at var(--rv-x, 50%) var(--rv-y, 50%),
              rgba(255,255,255,.20), rgba(255,255,255,0) 70%); }
.rv.on { animation: rvIn .62s cubic-bezier(.16,1,.3,1) forwards, rvOut .42s .66s ease forwards; }
@keyframes rvIn { from { clip-path: circle(0px at var(--rv-x) var(--rv-y)); opacity: 1; }
                  to   { clip-path: circle(170vmax at var(--rv-x) var(--rv-y)); opacity: 1; } }
@keyframes rvOut { to { opacity: 0; } }
@property --rv-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@supports (mask-image: radial-gradient(#000, transparent)) {
  .rv { clip-path: none;
    -webkit-mask-image: radial-gradient(circle var(--rv-r) at var(--rv-x) var(--rv-y),
                        #000 0 66%, rgba(0,0,0,.45) 90%, transparent 100%);
    mask-image: radial-gradient(circle var(--rv-r) at var(--rv-x) var(--rv-y),
                        #000 0 66%, rgba(0,0,0,.45) 90%, transparent 100%); }
  @keyframes rvIn { from { --rv-r: 0px; opacity: 1; } to { --rv-r: 210vmax; opacity: 1; } }
}
.rvmark { position: fixed; z-index: 85; pointer-events: none; width: 9px; height: 34px;
          transform-origin: right center; background: var(--c-sun); opacity: 0; }
.rvmark.on { animation: mark .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes mark { 0% { opacity: 0; transform: scaleY(.2); }
                  22% { opacity: .95; transform: scaleY(1.5); }
                  100% { opacity: 0; transform: scaleY(1); } }

/* ---------------------------------------------------------------- 让我看看（仪表的金色底条）
   2026-09-24 二改（创始人）：「跟主题栏一样宽、高度拉高、眼睛做大、四字放到眼睛下面」。
   做法：把它从 .band__meta 里挪出来、成为 .band 自身的第二行，并用负 margin 抵消
   .band 的内边距 → **宽度＝主题栏宽度**、贴底、底角与面板圆角对齐。
   整件仪表因此读成「一块面板 ＋ 一条金色行动条」，且不再依赖 fixed 定位（少一个坑）。
   眼睛＝上睑厚、下睑薄的两条弧 ＋ 虹膜 ＋ 带高光缺口的瞳孔（高光是眼睛「活」的来源）。 */
.peek {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  margin: 13px -16px -14px;
  padding: 10px 6px 11px;
  border: 0; border-radius: 0 0 0 8px;
  background: var(--c-sun); color: #1E2328;
  font-family: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
  /* 环抽成变量：box-shadow 是**整体替换**，hover 直接写会把基础环吃掉（踩过）。
     外圈一道深褐细线管「亮主题」（雪线/砾径的浅面板），投影管「深主题」。 */
  --ring: 0 0 0 1px rgba(74,46,12,.24), 0 8px 22px rgba(38,24,4,.30),
          inset 0 1px 0 rgba(255,255,255,.28);
  box-shadow: var(--ring);
  transition: background-color .2s ease, color .2s ease,
              box-shadow .32s ease;
}
.peek__ico { width: 44px; height: 30px; overflow: visible; transform-origin: 50% 50%;
             transition: transform .1s ease; }
.peek__label { font-size: 11.5px; letter-spacing: .18em; text-indent: .18em; }
/* 瞳孔：跟鼠标要跟手（快），归位/东瞧西看要像眼睛在转（稍慢） */
.peek__pupil { transform-origin: center; transition: transform .22s cubic-bezier(.22,.61,.36,1); }
/* 眨眼＝换形不换色（class 切换两层的 opacity）：
   ① 频率要随机（由 JS 排），keyframes 做不到；
   ② 两个静态态在无头里可以**确定性地**取证（?blink=1 直接给出闭眼那一帧）。 */
.peek__open, .peek__shut { transition: opacity .1s linear; }
.peek__shut { opacity: 0; }
.peek.isblink .peek__open { opacity: 0; }
.peek.isblink .peek__shut { opacity: 1; }
.peek:hover { background: #F0B673;
              box-shadow: var(--ring), 0 0 30px rgba(232,168,98,.44); }
.peek:active { background: #D99A56; }
.peek.pulsing { animation: pkpulse 1s cubic-bezier(.16,1,.3,1); }
@keyframes pkpulse {
  0%   { box-shadow: var(--ring); }
  22%  { box-shadow: var(--ring), 0 0 0 9px rgba(232,168,98,.30), 0 0 34px rgba(232,168,98,.42); }
  100% { box-shadow: var(--ring); }
}
body.peeking .peek { box-shadow: var(--ring), 0 0 34px rgba(232,168,98,.40); }

/* ============================================================================
   入口「有趣」的其余做法 —— ?fx=a|b|c|d（**默认已不用**，留给比对页回看）
     已定稿：ab ＝ 跟着你 ＋ 会眨眼（桌面）／好奇地东瞧西看（触屏）→ 见文末 JS
     a 只跟鼠标（无归位、无眨眼）   b 只按固定节拍眨眼
     c 镜片里就是这一屏的雾         d 跟鼠标 ＋ 呼吸 ＋ 按下眯眼
   共同的底线：只动 transform / opacity，绝不引起重排。
   ========================================================================== */
.peek[data-fx="b"] .peek__ico { animation: blinkeye 6.5s ease-in-out infinite; }
@keyframes blinkeye {
  0%, 91.6%, 100% { transform: scaleY(1); }
  93.4% { transform: scaleY(.07); }
  95.6% { transform: scaleY(1); }
}
/* d：更疏的一层呼吸，别和眨眼挤在一起 */
.peek[data-fx="d"] .peek__ico { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* 按下眯眼（c 用整片镜片，不眯；ab 也眯 —— 那是「看一眼」的本能） */
.peek[data-fx="a"]:active .peek__ico,
.peek[data-fx="b"]:active .peek__ico,
.peek[data-fx="d"]:active .peek__ico,
.peek[data-fx="ab"]:active .peek__ico { transform: scaleY(.42); }

/* c：镜片本身就是那扇小窗 */
.peek__win {
  flex: none; width: 44px; height: 30px; border-radius: 15px;
  position: relative; overflow: hidden; display: none;
  background-image: var(--win-url, linear-gradient(140deg, #7FA8C6, #2D3B4C));
  background-size: 300%; background-position: 50% 40%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  filter: saturate(1.15) brightness(.9);
}
.peek__win::after {                    /* 里面那层雾，缓缓流动 */
  content: ""; position: absolute; inset: -45%;
  background: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 44%,
                              rgba(255,255,255,.20) 60%, rgba(255,255,255,0) 100%);
  animation: drift 9s ease-in-out infinite alternate;
  transition: opacity .5s ease;
}
@keyframes drift { from { transform: translateX(-13%); } to { transform: translateX(13%); } }
.peek[data-fx="c"] .peek__win { display: block; }
.peek[data-fx="c"] .peek__ico,
.peek[data-fx="c"] .peek__pupil { display: none; }
body.peeking .peek__win::after { opacity: 0; }   /* 里外两层雾同时变薄 */

@media (max-width: 900px) {
  .band { padding: 10px 12px; }
  .peek { margin: 9px -12px -10px; }      /* 负 margin 必须跟着 .band 的内边距走 */
  .band__seg { height: 26px; }
  .band__name { font-size: 13px; }
}

/* ---------------------------------------------------------------- 窄屏
   本页原先只做桌面评审，一条窄屏规则都没有 —— 390 宽时仪表会横溢出画面（实测坏掉）。
   2026-09-24 二改：整件仪表收成**一行**底栏 ——
       换一程 · 到了哪里（名字＋时辰） | 天光带 | 让我看看
   「让我看看」与主题栏**并排**（不再另起一行）：原先那一版通栏堆叠要吃掉 104px 高度，
   既占地方也不好看。现在一行 ~56px，正文让位也随之减到 92px。 */
@media (max-width: 640px) {
  .band {
    right: 0; left: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 0;
    box-shadow: inset 0 1px 0 rgb(var(--halo-rgb) / .22);
  }
  .band__row { flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
  /* 面板背景现在由整条 .band 承担，小板自己不再画底 —— 一行里三件事共用一层磨砂 */
  .band__meta { flex-direction: row; align-items: center; gap: 8px; white-space: nowrap;
                margin: 0; padding: 0; background: none;
                -webkit-backdrop-filter: none; backdrop-filter: none; }
  .band__acts { order: 0; flex-direction: row; margin: 0; }
  .band__act { font-size: 11.5px; }
  .band__name { font-size: 12.5px; letter-spacing: .08em; }
  .band__hour { margin: 0; font-size: 10px; }
  .band__segs { flex: 1 1 90px; min-width: 56px; flex-direction: row; height: 20px; }
  .band__seg { width: auto; flex: 1 1 0; height: 20px; }
  .band__seg:first-child { border-radius: 3px 0 0 3px; }
  .band__seg:last-child  { border-radius: 0 3px 3px 0; }
  .band__seg:hover, .band__seg[aria-pressed="true"] {
    width: auto;
    box-shadow: 0 0 0 1.5px rgb(var(--halo-rgb) / .75), 0 0 16px rgb(var(--halo-rgb) / .5);
  }
  /* 金色底条：与主题栏并排的一小块（不再通栏），眼睛依旧明显 */
  .peek { flex: 0 0 auto; align-self: center; margin: 0; padding: 5px 10px 6px; gap: 2px;
          border-radius: 6px; }
  .peek__ico { width: 30px; height: 20px; }
  .peek__win { width: 30px; height: 20px; border-radius: 10px; }
  .peek__label { font-size: 9.5px; letter-spacing: .14em; text-indent: .14em; }
  /* 底栏只占一行：正文（含那行不能说省的话）让位随之从 148 收到 92 */
  .screen__inner { padding-bottom: 92px; }
  /* ★ 长句在窄屏被切，根因不是字号：.screen 是 grid，.screen__inner 作为 grid 项
     默认 min-width:auto，会被内容的 min-content 撑宽（本页早先踩过同源坑，见 _plan 笔记）。
     补 min-width:0 + overflow-wrap:anywhere，让长句正常换行；字号只做温和收敛。 */
  .screen__inner, .screen__type { min-width: 0; }
  .screen__type h1 { font-size: clamp(24px, 7.6vw, 34px); max-width: none; overflow-wrap: anywhere; }
  .screen__type p { max-width: none; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- 静态多页：影像 <picture> 三格式协商
   每个影像层都是：<picture><source avif><source webp><img 兜底></picture>
   换主题时 JS 同时改三处（两个 source 的 srcset ＋ img 的 src）。
   为什么不用 <img srcset>：srcset 不携带格式，无法做 AVIF→WebP→JPEG 的降级协商。 */
.media__themed picture { display: block; }
.media source { display: none; }