/* ============================================================================
   pulse 全部样式（PRD-0004 §3.4）
   规则（第 4 单 A12 / A15 会断言）：
     · 所有间距一律走 var(--space-*)，本文件内**不写死任何间距字面量**；
     · 本文件内的 px 字面量**全部**登记在 SPC-0005 §12 的白名单声明里（值 | 理由），
       其中非 4 倍数的只有描边宽度与焦点轮廓两项（后者是 PRD §3.4 的无障碍硬要求）；
     · 走 token 的还有胶囊圆角（--radius-pill）、字号与时长；
     · 另有 0 / 百分比 / em / vw / calc() 这类非 px 尺度，按 PRD §3.4 豁免。
   三层视觉：#bgWash（背景呼吸）→ .dial（中景同心环/刻度盘）→ 前景交互层。
   ============================================================================ */

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

html, body { height: 100%; margin: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: var(--font-size-md);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

button { font-family: inherit; font-size: var(--font-size-md); }

:focus-visible {
  outline: 2px solid var(--color-focus);   /* ≥2px 且对比度 ≈ 11.62:1（PRD §3.4 无障碍要求；--color-focus 已并进 --color-accent，实测值见 design-tokens.css） */
  outline-offset: var(--space-4);
}

/* ---------------------------------------------------------------- 三层之一：背景呼吸 */
#bgWash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(95, 227, 180, 0.10) 0%, rgba(95, 227, 180, 0.02) 42%, rgba(11, 21, 18, 0) 72%),
    radial-gradient(80% 60% at 84% 92%, rgba(95, 227, 180, 0.06) 0%, rgba(11, 21, 18, 0) 70%),
    linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg) 100%);
  animation: wash-breath var(--motion-breath) ease-in-out infinite alternate; /* ≥20s，幅度极小 */
}
@keyframes wash-breath {
  from { opacity: 0.82; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.03); }
}

/* ---------------------------------------------------------------- 外壳 */
#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }

/* HUD：局内可见；主界面只留产品名与静音按钮（#muteBtn 是同一个元素，位置固定不移动） */
#hud {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-line);
  background: rgba(11, 21, 18, 0.72);
  backdrop-filter: blur(8px);
}
.hud-brand { font-size: var(--font-size-md); letter-spacing: 0.16em; color: var(--color-text-dim); }
.hud-readouts { display: flex; gap: var(--space-24); margin-left: auto; }
#hud.hud--idle .hud-readouts,
#hud.hud--idle #endBtn { display: none; }
#hud:not(.hud--idle) .hud-brand { display: none; }
.readout { display: flex; flex-direction: column; align-items: flex-start; }
.readout-k { font-size: var(--font-size-xs); letter-spacing: 0.08em; color: var(--color-text-dim); }
.readout-v { font-size: var(--font-size-xl); font-weight: 650; font-variant-numeric: tabular-nums; }
#timeLeft.is-warn { color: var(--color-hit); }
#timeLeft.is-ending { color: var(--color-warn); }
/* 末段计时告警的「极短提示」= --duration-tick（60ms）：app.js 在 ≤10s / ≤3s 时 toggle 上面两个状态类，
   颜色的极短过渡即该 token 的用途。附：这是本文件里唯一引用 --duration-tick 的地方（A12 的「声明了用途的
   --duration-* 必须被引用」在 --duration-tick 上同样成立，不止 --duration-slow）。 */
#timeLeft { transition: color var(--duration-tick) ease; }

/* ---------------------------------------------------------------- 通用按钮 */
.btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-12) var(--space-20);
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.btn:hover { border-color: var(--color-accent-weak); }
.btn:disabled { opacity: 0.35; cursor: default; }

.ghost {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--color-text-dim);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-16);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.ghost:hover { color: var(--color-text); border-color: var(--color-accent-weak); }
.ghost[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink);
}

.primary {
  appearance: none; cursor: pointer;
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.02em;
  padding: var(--space-16) var(--space-40);
  transition: filter var(--duration-fast) ease;
}
.primary:hover { filter: brightness(1.06); }

/* ---------------------------------------------------------------- 三屏 */
#main { position: relative; flex: 1 1 auto; min-height: 0; }
/* 小屏可达性修复（D2，QA `lead-viewport-375.mjs` 的原始读数）：
   `justify-content: center` 在**内容高于容器**时会把首个子项顶到容器上边界的**上方**（负向溢出），
   而 `scrollTop` 最小只能是 0 ⇒ 顶部内容永久不可达。实测 375×667：`#screen-start`
   scrollHeight 1015 / clientHeight 602 / maxScrollTop 413，但 `#mode-shrink-btn` 的 top 为**负数**
   （卡片整体落到容器上边界之外），`scrollIntoView({block:'start'})` 之后 `scrollTop` **仍为 0**、
   手动写一个负 scrollTop 被夹到 **0**（逐档原始读数见 `/tmp/m5/shell/REPORT.md`；本注释不写 px 字面量）。
   修法：主轴改为 `flex-start`（内容溢出时顶部可达），居中改由 `.screen.show > *` 的 `margin: auto`
   承担 —— 有剩余空间时上下 auto 均分 = 视觉仍居中；内容溢出时 auto 退化为 0 = 顶部可达。
   本修复不新增任何 px 字面量（`margin: auto` 无长度单位），4px 网格与 SPC-0005 §12 白名单不受影响。 */
.screen {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--space-24); padding: var(--space-24);
  overflow-y: auto;
}
/* 屏切换淡入：把 --duration-slow（480ms）真正用起来（A12 末条：声明了用途的 --duration-* 必须被引用）
   整屏 opacity 0→1，无位移、无循环；`both` 让首帧就是 0（不闪一下内容），结束后停在 opacity 1。
   reduce 侧归入「必须降级」清单（整屏动效，非微反馈）——SPC-0005 §11。 */
.screen.show { display: flex; animation: screen-in var(--duration-slow) ease-out both; }
/* 居中承接（与上面 `.screen` 的 flex-start 配对）：
   纵向 auto 上下均分 = 大屏仍视觉居中；内容溢出时 auto 归 0 = 小屏顶部（首个模式卡）可达。 */
.screen.show > * { margin-top: auto; margin-bottom: auto; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }
.screen--play { padding: 0; gap: 0; overflow: hidden; }

/* ---------------------------------------------------------------- 主界面 */
.start-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-24);
  width: 100%; max-width: 40em; padding: var(--space-16) 0 var(--space-32);
}
.brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.brand-kicker { margin: 0; font-size: var(--font-size-xs); letter-spacing: 0.24em; color: var(--color-text-dim); }
.brand-name {
  margin: 0; font-size: var(--font-size-3xl); font-weight: 750; letter-spacing: 0.06em;
  color: var(--color-text);
}
.brand-tagline { margin: 0; max-width: 28em; font-size: var(--font-size-md); color: var(--color-text-dim); }

.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); width: 100%; }
.mode-card {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8);
  padding: var(--space-16);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.mode-card:hover { border-color: var(--color-accent-weak); }
.mode-card[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-surface-raised); }
.mode-name { font-size: var(--font-size-lg); font-weight: 650; }
.mode-rule { font-size: var(--font-size-md); color: var(--color-text-dim); }
.mode-time { font-size: var(--font-size-xs); letter-spacing: 0.08em; color: var(--color-text-dim); }

/* 模式卡图形符号：三种模式共享同一套「环」语言，表现不同 */
.mode-glyph { position: relative; width: 40px; height: 40px; }
.glyph-ring { position: absolute; inset: 0; border: 1px solid var(--color-accent); border-radius: 50%; opacity: 0.55; }
.glyph-dot { position: absolute; inset: 36%; background: var(--color-accent); border-radius: 50%; }
.glyph-bar { position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: var(--color-line); }
.glyph-knob {
  position: absolute; left: 62%; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-hit);
}
.glyph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.glyph-grid span { border: 1px solid var(--color-accent); border-radius: var(--radius-sm); opacity: 0.55; }
.glyph-grid span:first-child { background: var(--color-accent); opacity: 1; }

/* 读数条：累计局数 / 最佳 / 连续天数（数字要显眼） */
.stats-bar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12);
  width: 100%; padding: var(--space-16);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.stat-k { font-size: var(--font-size-xs); letter-spacing: 0.08em; color: var(--color-text-dim); }
.stat-v { font-size: var(--font-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-sub { grid-column: 1 / -1; margin: 0; text-align: center; font-size: var(--font-size-xs); color: var(--color-text-dim); }

.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-8); width: 100%;
}
#legalEntry { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* ---------------------------------------------------------------- 分享行（D17 触摸目标修复，P0-A）
   D17（TSK-0005 §缺陷清单）：`.share-row` / `.share-input` 此前在样式表里**一条规则都没有**
   （index.html:113-119 有元素、有 class，styles.css 里 0 命中），`input#shareUrl` 于是拿到浏览器
   默认盒子。真浏览器实测（`node scripts/check-tap-targets.mjs`，@390×844，量的是渲染结果）：
   `input#shareUrl.share-input 153×21` —— 高度低于 24px 的触摸目标下限，rc=1。
   修法：只补 token 化样式，让输入框与同排 `.ghost` 按钮同高（`--space-40` = 40px ≥ 24px 下限，
   也与按钮的 40px 视觉对齐）；元素、id、`readonly`、可聚焦性（A10 要求它同时属交互集合与
   可聚焦集合，**不许**换成 <p> 或加 tabindex="-1"）一律不动，index.html 结构不变。
   本块**不含任何 px 字面量**：高度 / 内边距 / 间距全部走 `var(--space-*)`（故 SPC-0005 §13 的
   表 12-A 白名单无需增条，也不会产生新的「需声明项」）；`flex-basis` 用 em（非 px 尺度，按 PRD §3.4 豁免）。 */
.share-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-8); width: 100%;
}
.share-input {
  flex: 1 1 12em; min-width: 0;
  min-height: var(--space-40);
  padding: var(--space-8) var(--space-12);
  font-family: inherit; font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  text-overflow: ellipsis;
}
.hint { margin: 0; min-height: 1.6em; font-size: var(--font-size-md); color: var(--color-text-dim); text-align: center; }

/* ---------------------------------------------------------------- 局内：舞台 */
#stage { position: relative; flex: 1 1 auto; overflow: hidden; touch-action: manipulation; }
/* 舞台宽度修复（dev 第 3 单实测所加，无新增间距字面量）：
   #screen-play 是 flex-direction:column + align-items:center 的绝对定位屏，而 #stage 是
   width:auto 的 flex 项、其子节点全是绝对定位（无内在宽度）→ 实测 #stage 的布局宽度被压成
   **0**：W1 的锚点百分比全乘 0（所有圆点叠在正中）、指针/触摸坐标无法与圆点中心比较、
   W2 的轨道 left/right 也为 0。这使 §4.4 的「指针与触摸成立」不可能达成，
   故补一条最小宽度声明（不含 px 字面量，不影响 4px 网格与既有 token 口径）。 */
#stage { width: 100%; }
#layer { position: absolute; inset: 0; z-index: 2; }

/* 中景：同心环 + 刻度盘（把「节拍」这件事可视化；三种玩法共用一套环语言） */
.dial {
  position: absolute; inset: 0; margin: auto; z-index: 1; pointer-events: none;
  width: min(78vw, 360px); height: min(78vw, 360px); opacity: 0.9;
}
.dial-ring { position: absolute; border: 1px solid var(--color-line); border-radius: 50%; }
.dial-ring.r1 { inset: 0; }
.dial-ring.r2 { inset: 12%; }
.dial-ring.r3 { inset: 24%; }
.dial-ticks {
  position: absolute; inset: 24%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(95, 227, 180, 0.34) 0deg 1deg, rgba(95, 227, 180, 0) 1deg 15deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 86%, #000 87% 94%, rgba(0, 0, 0, 0) 95%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 0) 86%, #000 87% 94%, rgba(0, 0, 0, 0) 95%);
}
.dial-sweep {
  position: absolute; inset: 12%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(95, 227, 180, 0.16), rgba(95, 227, 180, 0) 22%, rgba(95, 227, 180, 0) 100%);
  animation: dial-turn var(--motion-sweep) linear infinite;
}
.dial-core {
  position: absolute; inset: 45%; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, var(--color-accent), rgba(95, 227, 180, 0.06) 78%);
  box-shadow: 0 0 24px rgba(95, 227, 180, 0.22);
}
@keyframes dial-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 同一套环语言的三种表现：W1 恒定 / W2 更宽的相位盘 / W3 环上刻度收束 */
#stage[data-mode="tempo"] .dial { width: min(86vw, 400px); height: min(86vw, 400px); }
#stage[data-mode="tempo"] .dial-sweep { animation-duration: var(--motion-breath); }
#stage[data-mode="sequence"] .dial-ring.r3 { border-color: var(--color-accent-weak); }
#stage[data-mode="sequence"] .dial-core { inset: 47%; }

/* 节拍条（W1 生成、W2 相位——局内始终可见的一条时间轴） */
#beatBar { flex: 0 0 auto; height: 4px; background: rgba(70, 119, 95, 0.35); }
#beatFill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--color-accent-weak), var(--color-accent)); transition: width var(--duration-base) linear; }

/* W1 圆点 */
.dot {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--color-text) 0%, var(--color-accent) 46%, var(--color-accent-weak) 100%);
  box-shadow: 0 0 20px rgba(95, 227, 180, 0.35);
  will-change: transform;
}
.dot.is-hit { animation: dot-pop var(--duration-base) ease-out forwards; }
@keyframes dot-pop { to { opacity: 0; filter: brightness(1.7); } }

/* W2 相位玩法 */
.track { position: absolute; left: 8%; right: 8%; top: 50%; height: 4px; background: var(--color-line); border-radius: var(--radius-pill); }
.window { position: absolute; top: 50%; height: 32px; width: 12%; transform: translate(-50%, -50%); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); }
.knob { position: absolute; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-hit); box-shadow: 0 0 16px rgba(255, 199, 115, 0.45); }

/* W2 状态反馈（A16②：加类必须产生**可观测的效果**，且读数要能即时判定）：
   本机 headless 实测 document.timeline 每 400ms 只推进 1–6 帧、transition 的 currentTime 长期停在 0，
   所以「表达状态」的主通道必须放在**不参与过渡**的属性上：background-color / transform / opacity 立即可读；
   240ms（--duration-base）的过渡留给 box-shadow（光晕扩散）与 border-color（描边变色）——
   既有真实的过渡语义，又不把状态判定绑在「过渡有没有跑完」上。
   三处时长 240ms ≤600ms，属交互微反馈 → 进 SPC-0005 §11 豁免清单。 */
.knob.is-perfect {
  background: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 24px rgba(95, 227, 180, 0.75);
  transition: box-shadow var(--duration-base) ease;
}
.knob.is-good {
  background: var(--color-accent-weak);
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 16px rgba(62, 122, 98, 0.65);
  transition: box-shadow var(--duration-base) ease;
}
.window.is-miss {
  border-color: var(--color-warn);
  background: rgba(240, 160, 106, 0.14);
  opacity: 0.72;
  transition: border-color var(--duration-base) ease;
}

/* W3 序列玩法 */
/* W3 命中面修复（D1 的 CSS 一半，QA 读数：14,668 次 pointerdown 全部落在 #layer：
   `#layer` 有 z-index 2 而 `.cells` 无 z-index ⇒ 同为绝对定位的兄弟节点里 #layer 在上面）
   ⇒ 给 `.cells` 明确层级，让格位自身成为 W3 局内的真实命中面。
   只抬 `.cells`、**不动 `#layer`**：W1/W2 的命中面仍是 #layer（点圆点得分、点空白按原语义）。
   本修复不含 px 字面量，4px 网格与 SPC-0005 §12 白名单不受影响。 */
.cells { position: absolute; inset: 0; margin: auto; z-index: 3; width: min(64vw, 280px); height: min(64vw, 280px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
/* A16② 的可判性与过渡解耦：命中/错位的**底色与描边瞬时切换**（加类后同一帧即可读出差值），
   120ms 的过渡一律留给 box-shadow（光晕淡入）。注：判据脚本读状态类时会注入
   `*{transition:none !important}`（当前实现在 `verify.mjs` 的 `NO_MOTION_CSS` 常量里），所以「过渡有没有跑完」本来就不参与判定；
   光晕的过渡是给真机观感用的，与 A16② 的同步读数无关。 */
.cell { appearance: none; cursor: pointer; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); transition: box-shadow var(--duration-fast) ease; }
.cell.is-lit { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 16px rgba(95, 227, 180, 0.55); transition: box-shadow var(--duration-fast) ease; }
.cell.is-bad { background: var(--color-warn); border-color: var(--color-warn); box-shadow: 0 0 16px rgba(240, 160, 106, 0.55); transition: box-shadow var(--duration-fast) ease; }

/* 漏过反馈：全屏一次极轻的暗淡呼吸（不闪、不刺眼） */
#stage.is-dip::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #000; animation: stage-dip var(--duration-base) ease-out;
}
@keyframes stage-dip { 0% { opacity: 0; } 40% { opacity: 0.09; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- 结算 */
.over-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.over-kicker { margin: 0; font-size: var(--font-size-xs); letter-spacing: 0.24em; color: var(--color-text-dim); }
.over-pair { display: flex; gap: var(--space-32); }
.over-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.over-cell .k { font-size: var(--font-size-xs); letter-spacing: 0.08em; color: var(--color-text-dim); }
.over-cell .v { font-size: var(--font-size-3xl); font-weight: 750; font-variant-numeric: tabular-nums; }
.over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }

/* ---------------------------------------------------------------- 合规三页 */
#legalWrap {
  position: fixed; inset: 0; z-index: 10; overflow-y: auto;
  padding: var(--space-24);
  background: var(--color-bg);
}
#legalWrap[hidden] { display: none; }
.legal-sheet { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; max-width: 42em; margin: 0 auto; padding-bottom: var(--space-40); }
.legal-page {
  padding: var(--space-24);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
.legal-page[hidden] { display: none; }
.legal-page > h2 { margin: 0 0 var(--space-16); font-size: var(--font-size-xl); }
.legal-block { margin: 0 0 var(--space-16); }
.legal-block > h3 { margin: 0 0 var(--space-8); font-size: var(--font-size-md); color: var(--color-accent); }
.legal-block > p { margin: 0 0 var(--space-8); font-size: var(--font-size-md); color: var(--color-text-dim); }
.legal-list { margin: 0; padding-left: var(--space-24); color: var(--color-text-dim); }
.legal-list > li { margin-bottom: var(--space-4); }
.legal-actions { display: flex; justify-content: center; }

/* ---------------------------------------------------------------- 小屏与无障碍偏好 */
@media (max-width: 640px) {
  .mode-grid, .stats-bar { grid-template-columns: minmax(0, 1fr); }
  .over-pair { gap: var(--space-24); }
}
/* 降级动效（A14）：这一块是 SPC-0005 §11「必须降级」清单的**唯一落点**，逐选择器显式把 animation 整条置 none。
   本块内不含任何豁免项；豁免清单（≤600ms 的交互微反馈）与理由同样在 SPC-0005 §11，二者并集覆盖本文件
   每一条 animation / transition 声明所在的选择器（闭合性）。 */
@media (prefers-reduced-motion: reduce) {
  #bgWash { animation: none; }
  .dial-sweep { animation: none; }
  #stage[data-mode="tempo"] .dial-sweep { animation: none; }
  .screen.show { animation: none; }
}