/* ============================================================
   OnePage 回声 · Simulator styles (NaNaLand 手绘卡通升级版)
   变更点（相对 2026-08-17 版）：
   - 底色改为 NaNaLand 柠檬黄 #FFE94D
   - 全场粗黑描边 2 → 3px + 手绘抖动 filter (svg-hand)
   - 按钮/气泡/卡片一律"贴纸感"硬阴影 offset(0 4px 0)
   - 中文标题字体优先使用系统手写楷体（STKaiti / KaiTi / Yuanti），
     退回到 PingFang SC
   - 修复 BOOT/IDLE/MATCHED 的字图重叠：见对应小节注释
   - 冻结：不改 shared/*.json 的坐标常量。仅通过 CSS 补强
   ============================================================ */

/* 部署版使用 Google Fonts CDN（走 CDN 更快 + 省 16MB 静态资源）:
   - Ma Shan Zheng: 中文手写楷书, 用于标题（NaNaLand 手绘感）
   - Noto Sans SC: 中文正文
   注意: Google Fonts 在国内可能被墙, 保留本地 font-face 作 fallback。
   索引 html 里通过 <link> 引入; 本 CSS 只保留本地 fallback 定义。*/
@font-face {
  font-family: "Noto Sans SC Local";
  src: url("../shared/fonts/NotoSansCJKsc-Regular.otf") format("opentype");
  font-display: swap;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --lab-bg: #FFF6D5;
  --lab-panel: rgba(255, 253, 247, 0.92);
  --lab-border: #E8D8A8;
  --lab-ink: #1F1B16;
  --motion-speed: 1;

  /* NaNaLand 硬阴影 · 贴纸感（无模糊） */
  --shadow-sticker-lg: 0 4px 0 rgba(31, 27, 22, .18);
  --shadow-sticker-sm: 0 3px 0 rgba(31, 27, 22, .12);
  --shadow-sticker-btn: 0 5px 0 rgba(31, 27, 22, .30);

  /* 手写标题字体栈 */
  /* 部署版: 优先 Google Fonts Ma Shan Zheng (手写楷书, NaNaLand 手绘感)
     系统本地字体 (macOS 有 STKaiti) 作降级 */
  --font-hand: "Ma Shan Zheng", "STKaiti", "华文楷体", "KaiTi", "楷体",
               "PingFang SC", "Noto Sans SC", "Noto Sans SC Local", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Noto Sans SC Local", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 980px;
  background: var(--lab-bg);
  color: var(--lab-ink);
  font-family: var(--font-body);
}

button, select { font: inherit; }
button { cursor: pointer; }

.lab-shell { width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: 42px 0 64px; }
.lab-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 32px; }
.lab-eyebrow, .panel-kicker { margin: 0 0 6px; color: #6B4E1E; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lab-header h1 { margin: 0; font-family: var(--font-hand); font-size: 36px; line-height: 1.2; }
.lab-description { margin: 10px 0 0; color: #6f5b40; font-size: 15px; }
.spec-badge { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #1F1B16; border-radius: 999px; padding: 8px 14px; background: #FFF9EA; color: #3d2f22; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-sticker-sm); }
.spec-badge span { width: 8px; height: 8px; border-radius: 50%; background: #6DAF6E; box-shadow: 0 0 0 3px rgba(109,175,110,.28); }

.devices-stage {
  display: grid;
  grid-template-columns: 1fr 54px 1fr;
  align-items: center;
  gap: 8px;
  padding: 30px;
  border: 3px solid #1F1B16;
  border-radius: 28px;
  background: #FFEEB5;
  box-shadow: var(--shadow-sticker-lg);
}
.device-column { display: grid; justify-items: center; gap: 14px; }
.device-meta { width: 360px; display: flex; justify-content: space-between; align-items: baseline; color: #4d3f28; font-size: 12px; }
.device-meta strong { color: #1F1B16; font-size: 14px; font-weight: 700; }
.device-meta b { display: inline-block; margin-left: 6px; border: 2px solid #1F1B16; border-radius: 999px; padding: 2px 9px; background: #FFF6D5; color: #1F1B16; font-size: 11px; letter-spacing: .04em; font-weight: 700; }

/* 设备外壳：粗黑边、贴纸阴影 */
.device-shell {
  width: 390px; height: 390px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1F1B16;
  box-shadow: var(--shadow-sticker-lg), inset 0 0 0 4px #4a4038;
}
.round-screen {
  position: relative;
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
  background: var(--color-idle);
  color: var(--color-ink);
  user-select: none;
  touch-action: none;
}
.pair-gap { height: 3px; background: #1F1B16; position: relative; border-radius: 3px; }
.pair-gap span { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: 2px solid #1F1B16; border-radius: 50%; background: #FFE94D; transform: translate(-50%, -50%); }

/* ---- device-page 通用 ---- */
.device-page {
  position: absolute; inset: 0;
  padding: calc(var(--layout-pagePaddingPx) * 1px);
  overflow: hidden;
  text-align: center;
  animation: page-in calc(var(--page-fade) / var(--motion-speed)) var(--ease-out) both;
}

/* 标题：手写楷体 · 更粗更醒目 */
.device-title {
  position: relative; z-index: 4;
  max-width: var(--content-width);
  margin: 14px auto 0;
  font-family: var(--font-hand);
  font-size: calc(var(--type-titlePx) * 1px);
  font-weight: 700;
  line-height: var(--type-lineHeightTitle);
  letter-spacing: 0.01em;
  color: #1F1B16;
}
.device-subtitle {
  position: relative; z-index: 4;
  margin: 6px auto 0;
  max-width: var(--content-width);
  color: #6b5233;
  font-size: calc(var(--type-bodyPx) * 1px);
  font-weight: 500;
  line-height: var(--type-lineHeightBody);
}
.device-kicker {
  position: relative; z-index: 4;
  margin: 10px 0 0;
  color: #6b5233;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* ---- Mascot ---- */
.mascot-hit {
  position: absolute; z-index: 3;
  width: 164px; height: 164px;
  padding: 10px;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.mascot {
  display: block;
  width: calc(var(--geometry-mascotSize) * 1px);
  height: calc(var(--geometry-mascotSize) * 1px);
  transform: translate(var(--pose-x), var(--pose-y)) scale(var(--pose-scale)) rotate(var(--pose-rotate));
  transform-origin: 50% 70%;
  image-rendering: auto;
  pointer-events: none;
  /* 给小人配一个非常淡的暖色贴纸阴影，稳固卡通感 */
  filter: drop-shadow(0 3px 0 rgba(31, 27, 22, .08));
}
.idle-mascot {
  left: calc(var(--layout-idleMascotLeftPx) * 1px);
  top: calc(var(--layout-idleMascotTopPx) * 1px);
  animation: idle-breathe calc(var(--idle-cycle) / var(--motion-speed)) var(--ease-in-out) infinite;
}
.tap-feedback .mascot { animation: tap-feedback calc(var(--tap-duration) / var(--motion-speed)) var(--ease-overshoot) both !important; }

/* =========================================================
   BOOT — 修复：大字压小人肩膀
   老版：boot-brand margin-top 58 + boot-mascot top 104 → 重叠
   新版：把大字缩到 26px 且抬到 top:44 位置，小人下移到 top:150
   ========================================================= */
.boot-page {
  background: #FFE94D;
  animation: boot-in calc(var(--boot-fade) / var(--motion-speed)) var(--ease-out) both;
}
.boot-brand {
  margin: 0;
  position: absolute; z-index: 5;
  left: 0; right: 0; top: 44px;
  font-family: var(--font-hand);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .22em;
  text-indent: .22em;
  color: #1F1B16;
}
.boot-mascot { left: 98px; top: 150px; }
.boot-page .device-subtitle {
  position: absolute; left: 0; right: 0; bottom: 46px;
  margin: 0 auto;
  font-family: var(--font-hand);
  font-size: 14px;
  color: #6b5233;
}

/* =========================================================
   IDLE — 修复：副标题挤到小人头顶
   老版：idleTitleTopPx=27 → subtitle 紧接 → mascot top=126
   → subtitle 底部约在 y=90，mascot 头顶 y=126，字-图间距只有 36px
   新版：标题上移到 y=32，副标题紧随（y=68），小人整体下移到 y=155
   → 字-图间距 55px+，视觉透气
   ========================================================= */
.idle-page { background: #FFE94D; }
.idle-page .device-title {
  margin-top: 32px;
  font-size: 26px;
  letter-spacing: 0.02em;
}
.idle-page .device-subtitle {
  margin-top: 6px;
  color: #6b4d1e;
  font-size: 14px;
}
/* IDLE 覆盖 idle-mascot top，把小人下移到远离字底部 */
.idle-page .idle-mascot { top: 155px; }

/* =========================================================
   NEAR — 气泡样式手绘化
   ========================================================= */
.near-page { background: #FFE066; }
.speech-bubble {
  position: relative; z-index: 5;
  width: 268px;
  min-height: 96px;
  margin: 10px auto 0;
  padding: 14px 18px 16px;
  border: 3px solid #1F1B16;
  border-radius: 22px;
  background: #FFF9EA;
  box-shadow: var(--shadow-sticker-lg);
  animation: bubble-in calc(var(--bubble-in) / var(--motion-speed)) var(--ease-overshoot) both;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  left: calc(50% - 10px);
  bottom: -12px;
  width: 18px; height: 18px;
  border-right: 3px solid #1F1B16;
  border-bottom: 3px solid #1F1B16;
  background: #FFF9EA;
  transform: rotate(45deg);
}
.speech-bubble .device-title { margin-top: 0; font-size: 20px; }
.speech-bubble p { margin: 4px 0 0; color: #6b5233; font-size: 14px; font-weight: 500; }
.peek-mascot { top: 172px; }
.role-a .peek-mascot { left: 116px; }
.role-b .peek-mascot { left: 80px; }

/* ---- CONFIRM / WAITING / PREPARE 共用 ---- */
.confirm-page, .waiting-page, .prepare-page { background: #FFF3B8; }
.confirm-page .device-title,
.waiting-page .device-title,
.prepare-page .device-title { margin-top: 14px; font-size: 22px; }
.confirm-page .device-subtitle,
.waiting-page .device-subtitle,
.prepare-page .device-subtitle { color: #6b4d1e; }
.confirm-mascot, .waiting-mascot, .prepare-mascot { left: 98px; top: 108px; }

/* 主按钮：粗黑边 + 硬贴纸阴影 */
.device-button {
  position: absolute; z-index: 8;
  left: 50%;
  bottom: calc(var(--layout-buttonBottomPx) * 1px);
  min-width: calc(var(--geometry-buttonMinWidth) * 1px);
  height: calc(var(--geometry-buttonHeight) * 1px);
  transform: translateX(-50%);
  border: 3px solid #1F1B16;
  border-radius: calc(var(--geometry-radiusButton) * 1px);
  padding: 0 24px;
  background: #E85A4A;  /* NaNaLand 番茄红 */
  color: #FFF9EA;
  font-family: var(--font-hand);
  font-size: calc(var(--type-buttonPx) * 1px);
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: var(--shadow-sticker-btn);
  transition: transform calc(120ms / var(--motion-speed)) ease-out, box-shadow 120ms ease;
}
.device-button:active {
  transform: translate(-50%, 4px) scale(.97);
  box-shadow: 0 1px 0 rgba(31, 27, 22, .30);
}
.device-button.secondary {
  background: #FFF9EA;
  color: #1F1B16;
  box-shadow: var(--shadow-sticker-sm);
}
.device-button.disabled { opacity: .55; }

/* WAITING */
.waiting-page { background: #FFF6D5; }
.waiting-mascot { animation: waiting-reach calc(var(--waiting-pulse) / var(--motion-speed)) var(--ease-in-out) infinite; }
.handwave {
  position: absolute; z-index: 2;
  top: 182px;
  width: 82px; height: 40px;
}
.role-a .handwave { right: 24px; }
.role-b .handwave { left: 24px; transform: scaleX(-1); }
.handwave i {
  position: absolute; left: 0; top: 50%;
  width: 30px; height: 3px;
  border-radius: 3px;
  background: #E85A4A;
  animation: wave-out calc(var(--waiting-pulse) / var(--motion-speed)) var(--ease-out) infinite;
}
.handwave i:nth-child(2) { animation-delay: calc(220ms / var(--motion-speed)); }
.handwave i:nth-child(3) { animation-delay: calc(440ms / var(--motion-speed)); }

/* PREPARE */
.prepare-page { background: #FFE066; }
.prepare-dots {
  position: absolute; z-index: 6;
  left: 50%; bottom: 52px;
  display: flex; gap: 10px;
  transform: translateX(-50%);
}
.prepare-dots i {
  width: 10px; height: 10px;
  border: 2px solid #1F1B16;
  border-radius: 50%;
  background: #FFF9EA;
  animation: prepare-dot calc(900ms / var(--motion-speed)) ease-in-out infinite;
}
.prepare-dots i:nth-child(2) { animation-delay: calc(140ms / var(--motion-speed)); }
.prepare-dots i:nth-child(3) { animation-delay: calc(280ms / var(--motion-speed)); }

/* =========================================================
   MATCHED — 修复：bloom 挡文字 + marks 散乱
   老版：一个 220×220 白椭圆从右下（A）冒出，正好压在标题上
   老 marks：随机撒在圆屏四角
   新版：
   - bloom 变成中心小圆光晕（120×120，位于 mascot 后面）
   - marks 收拢到 mascot 周围 60px 半径
   - 标题移到 top:44，脱离 bloom 影响
   ========================================================= */
.matched-page { background: #FFE94D; }
.matched-page .device-title {
  margin-top: 30px;
  font-size: 26px;
  letter-spacing: .02em;
  animation: title-reveal calc(520ms / var(--motion-speed)) var(--ease-out) both;
  animation-delay: calc(760ms / var(--motion-speed));
}
.matched-mascot {
  top: 128px;
  animation: reach-in calc(900ms / var(--motion-speed)) cubic-bezier(.22,1,.36,1) both;
}
.role-a .matched-mascot { left: 126px; }
.role-b .matched-mascot { left: 70px; }
/* bloom：中心小圆光晕 · 不再是大白椭圆遮挡文字 */
.match-bloom {
  position: absolute; z-index: 0;
  left: 50%; top: 148px;
  width: 160px; height: 160px;
  margin-left: -80px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #FFF9EA 0%, rgba(255,249,234,0) 68%);
  animation: bloom calc(1100ms / var(--motion-speed)) cubic-bezier(.22,1,.36,1) both;
}
/* marks 收到 mascot 周边 60-80px 圈 */
.match-marks i, .match-marks b {
  position: absolute; z-index: 6;
  display: block;
  opacity: 0;
  animation: mark-pop calc(380ms / var(--motion-speed)) cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(940ms / var(--motion-speed));
}
.match-marks i { width: 16px; height: 3px; border-radius: 3px; background: #E85A4A; }
.match-marks b { width: 8px; height: 8px; border-radius: 50%; background: #6DAF6E; border: 2px solid #1F1B16; }
/* 位置：围绕 mascot（假定 mascot 中心约 x=180, y=210） */
.match-marks i:nth-child(1) { left: 108px; top: 178px; transform: rotate(24deg); }
.match-marks i:nth-child(2) { right: 108px; top: 178px; transform: rotate(-24deg); }
.match-marks i:nth-child(3) { left: 122px; top: 268px; transform: rotate(-14deg); }
.match-marks i:nth-child(4) { right: 122px; top: 268px; transform: rotate(14deg); }
.match-marks b:nth-of-type(1) { left: 96px; top: 224px; }
.match-marks b:nth-of-type(2) { right: 96px; top: 224px; background: #F0A95A; }
.match-marks b:nth-of-type(3) { left: 50%; margin-left: -4px; top: 296px; background: #FFE066; }

/* COINCIDENCES：卡片粗黑边 + 硬阴影 */
.coincidences-page { background: #FFF6D5; }
.coincidences-page .device-title { margin-top: 12px; font-size: 22px; }
.coincidence-list {
  display: grid; gap: 9px;
  width: calc(var(--layout-coincidenceWidthPx) * 1px);
  margin: 18px auto 0;
}
.coincidence-card {
  height: 46px;
  display: grid; place-items: center;
  border: 3px solid #1F1B16;
  border-radius: 14px;
  background: #FFF9EA;
  color: #1F1B16;
  font-family: var(--font-hand);
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--shadow-sticker-sm);
  animation: card-in calc(420ms / var(--motion-speed)) cubic-bezier(.34,1.56,.64,1) both;
}
.coincidence-card:nth-child(1) { background: #FFF9EA; }
.coincidence-card:nth-child(2) { background: #FFE0DD; animation-delay: calc(var(--card-stagger) / var(--motion-speed)); }
.coincidence-card:nth-child(3) { background: #E7F4DE; animation-delay: calc(var(--card-stagger) * 2 / var(--motion-speed)); }
.coincidence-note { max-width: 260px; margin: 14px auto 0; color: #6b4d1e; font-size: 12px; }

/* TOPIC */
.topic-page { background: #FFF6D5; }
.topic-page .device-kicker { margin-top: 12px; color: #6b4d1e; }
.topic-page blockquote {
  position: relative; z-index: 4;
  width: calc(var(--layout-topicWidthPx) * 1px);
  min-height: 108px;
  display: grid; place-items: center;
  margin: 14px auto 0;
  padding: 16px 20px;
  border: 3px solid #1F1B16;
  border-radius: 22px;
  background: #FFE94D;
  color: #1F1B16;
  font-family: var(--font-hand);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  quotes: none;
  box-shadow: var(--shadow-sticker-lg);
}
.topic-source { max-width: 260px; margin: 12px auto 0; color: #6b4d1e; font-size: 12px; line-height: 1.5; }
.topic-page .device-button { bottom: calc(var(--layout-topicButtonBottomPx) * 1px); }

/* DIAGNOSTIC */
.diagnostic-page { background: #FFF9EA; }
.diagnostic-page .device-title { margin-top: 8px; font-size: 22px; }
.glyph-sample { width: 274px; margin: 15px auto 0; color: #1F1B16; font-size: 16px; font-weight: 600; line-height: 1.75; }
.glyph-count { margin-top: 11px; color: #6b4d1e; font-size: 12px; }

/* ---- 面板 & 控件（与之前保持一致，只是粗黑边） ---- */
.debug-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; margin-top: 18px; }
.panel {
  border: 2px solid #1F1B16;
  border-radius: 22px;
  background: var(--lab-panel);
  padding: 22px;
  box-shadow: var(--shadow-sticker-sm);
}
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font-family: var(--font-hand); font-size: 20px; }
.speed-control { display: grid; gap: 5px; color: #6b5233; font-size: 11px; }
.speed-control select { border: 2px solid #1F1B16; border-radius: 10px; padding: 6px 9px; background: #FFF9EA; color: #1F1B16; font-weight: 600; }

.control-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.control-group.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.control-group p { grid-column: 1 / -1; margin: 0 0 2px; color: #6b4d1e; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.control-group button {
  min-height: 40px;
  border: 2px solid #1F1B16;
  border-radius: 12px;
  padding: 8px 10px;
  background: #FFF9EA;
  color: #1F1B16;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow-sticker-sm);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.control-group button:hover { background: #FFF3B8; }
.control-group button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 27, 22, .16); }
.control-group button.primary { background: #E85A4A; color: #FFF9EA; }
.footer-actions { margin-bottom: 0; padding-top: 6px; border-top: 2px dashed #E8D8A8; }
.text-button { border: 0; padding: 4px; background: transparent; color: #6B4E1E; font-size: 12px; font-weight: 700; }

.status-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.status-row span { border: 2px solid #1F1B16; border-radius: 999px; padding: 4px 10px; background: #FFF6D5; color: #1F1B16; font-size: 11px; font-weight: 600; }

.event-log {
  height: 276px;
  overflow: auto;
  margin: 0; padding: 0;
  list-style: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.event-log li { display: grid; grid-template-columns: 58px 86px 1fr; gap: 8px; border-top: 1px dashed #E8D8A8; padding: 8px 0; color: #4b3d24; }
.event-log time { color: #8a7a4a; }
.event-log b { color: #E85A4A; font-size: 10px; }
.event-log .empty-log { display: block; border: 0; color: #8a7a4a; }

.font-preview { margin-top: 18px; }
.font-preview > p { margin: 0; font-family: var(--font-hand); font-size: 19px; line-height: 1.8; }
.glyph-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.glyph-grid span {
  width: 30px; height: 34px;
  display: grid; place-items: center;
  border: 2px solid #1F1B16;
  border-radius: 8px;
  background: #FFF9EA;
  font-size: 16px;
  font-weight: 600;
}

/* ---- keyframes（保留原有语义） ---- */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
@keyframes idle-breathe { 0%,100% { transform: translateY(3px) scale(.98); } 50% { transform: translateY(-3px) scale(1.02); } }
@keyframes tap-feedback { 0% { transform: scale(1); } 28% { transform: scale(.92); } 72% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes waiting-reach { 0%,100% { transform: translateX(0); } 50% { transform: translateX(var(--pose-x)); } }
@keyframes wave-out { from { opacity: .72; transform: translateX(0) scaleX(.5); } to { opacity: 0; transform: translateX(64px) scaleX(1); } }
@keyframes prepare-dot { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes reach-in { from { opacity: .4; transform: translateX(calc(var(--pose-x) * -.7)) scale(.9); } to { opacity: 1; transform: translateX(var(--pose-x)) scale(var(--pose-scale)); } }
@keyframes bloom { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes title-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mark-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

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