/* ==========================================================================
   KAKALOK · 交互增强层 ux.css
   六种精致交互，零依赖：
     ① 完成反馈按钮  .ux-cbtn-*        ② 勾选联动    .ux-check-*
     ③ 叠卡展开      .ux-stack-*       ④ 吸附卡画线  .ux-snap-*
     ⑤ 惯性刻度滚轮  .ux-dial-*        ⑥ 圆形扩散转场 .ux-reveal
   全部尊重 prefers-reduced-motion：动效关闭时仍保持功能与最终形态。
   ========================================================================== */

:root {
  --ux-dur: .44s;
  --ux-ease: cubic-bezier(.22, .68, .24, 1);
  --ux-spring: cubic-bezier(.34, 1.42, .5, 1);
  --ux-snap-fast: .26s;
}

/* ==========================================================================
   ① 完成反馈按钮：文字 → 收成圆 → 画对勾 → 粒子迸发 → 复位
   ========================================================================== */
.ux-cbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; overflow: visible; isolation: isolate;
  transition:
    width var(--ux-dur) var(--ux-ease),
    height var(--ux-dur) var(--ux-ease),
    padding var(--ux-dur) var(--ux-ease),
    border-radius var(--ux-dur) var(--ux-ease),
    background var(--ux-snap-fast) ease,
    box-shadow var(--ux-dur) var(--ux-ease);
}
.ux-cbtn .ux-cbtn-label {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap; transition: opacity .2s ease, transform .28s var(--ux-ease);
}
.ux-cbtn .ux-cbtn-label svg { width: 16px; height: 16px; }

.ux-cbtn.is-busy,
.ux-cbtn.is-done { padding-left: 0; padding-right: 0; width: 56px !important; height: 56px !important; }
.ux-cbtn.is-busy .ux-cbtn-label,
.ux-cbtn.is-done .ux-cbtn-label { opacity: 0; transform: scale(.6); }

/* 圆形容器里的对勾 / 转圈 */
.ux-cbtn .ux-cbtn-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity .18s ease;
}
.ux-cbtn.is-busy .ux-cbtn-mark,
.ux-cbtn.is-done .ux-cbtn-mark { opacity: 1; }

.ux-cbtn .ux-cbtn-mark svg { width: 24px; height: 24px; overflow: visible; }
.ux-cbtn .ux-cbtn-tick {
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
}
.ux-cbtn.is-done .ux-cbtn-tick {
  animation: ux-tick .42s var(--ux-ease) .06s forwards;
}
@keyframes ux-tick { to { stroke-dashoffset: 0; } }

/* 处理中的环形进度 */
.ux-cbtn .ux-cbtn-spin {
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 17 39.6; opacity: .9;
  transform-origin: 50% 50%;
  animation: ux-spin .9s linear infinite;
}
.ux-cbtn.is-done .ux-cbtn-spin { display: none; }
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* 成功态的呼吸光晕 */
.ux-cbtn.is-done { animation: ux-breathe .9s var(--ux-ease); }
@keyframes ux-breathe {
  0% { box-shadow: 0 0 0 0 rgba(223, 156, 236, .62); }
  70% { box-shadow: 0 0 0 16px rgba(223, 156, 236, 0); }
  100% { box-shadow: 0 0 0 0 rgba(223, 156, 236, 0); }
}

/* 粒子层 */
.ux-particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ux-particles i {
  position: absolute; left: 50%; top: 50%;
  width: var(--s, 5px); height: var(--s, 5px); margin: calc(var(--s, 5px) / -2) 0 0 calc(var(--s, 5px) / -2);
  border-radius: 50%; background: var(--c, #DF9CEC);
  opacity: 0; transform: translate(0, 0) scale(.4);
  animation: ux-particle .78s cubic-bezier(.16, .72, .32, 1) var(--d, 0ms) forwards;
}
@keyframes ux-particle {
  0%   { opacity: 1; transform: translate(0, 0) scale(.5); }
  62%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}
/* 细长条粒子，增加动感层次 */
.ux-particles i.bar { border-radius: 2px; }

/* ==========================================================================
   ② 勾选联动：勾一项 → 进度环增长 + 数字滚动 + 整块背景渐变 + 顶部进度条
   ========================================================================== */
.ux-check {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(26px, 6vw, 48px);
  background: var(--ph); border: 1px solid var(--ph-stroke);
  transition: border-color var(--ux-dur) var(--ux-ease), box-shadow var(--ux-dur) var(--ux-ease);
}
/* 背景双层交叉淡化：由 --p（0→1）驱动 */
.ux-check .ux-check-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, #F1E6F8 0%, #FBE9F3 100%);
  opacity: 0; transition: opacity .55s var(--ux-ease);
}
.ux-check[data-p="1"] { border-color: var(--purple); box-shadow: 0 24px 60px rgba(185, 117, 214, .16); }
.ux-check .ux-check-bar {
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--grad); transition: width .55s var(--ux-ease);
  border-radius: 0 3px 3px 0;
}
.ux-check-head {
  position: relative; display: flex; align-items: center; gap: clamp(16px, 4vw, 26px);
  flex-wrap: wrap; margin-bottom: clamp(22px, 5vw, 34px);
}
.ux-ring { position: relative; width: 84px; height: 84px; flex: none; }
.ux-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ux-ring .ux-ring-bg { fill: none; stroke: rgba(185, 117, 214, .18); stroke-width: 7; }
.ux-ring .ux-ring-fg {
  fill: none; stroke: url(#uxRingGrad); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ux-ease);
}
.ux-ring .ux-ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ux-ring .ux-ring-num::after { content: '%'; font-size: 11px; margin-left: 1px; opacity: .5; }
.ux-check-head .ux-check-copy { flex: 1; min-width: 220px; }
.ux-check-head h3 { font-size: clamp(19px, 4.6vw, 26px); font-weight: 900; letter-spacing: -.02em; }
.ux-check-head p { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

.ux-check-list { position: relative; list-style: none; display: grid; gap: 10px; }
.ux-item {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  background: #fff; border: 1px solid var(--ph-stroke); border-radius: 16px;
  padding: 16px 18px; cursor: pointer;
  transition: border-color .3s var(--ux-ease), transform .3s var(--ux-ease),
              background .3s ease, box-shadow .3s ease;
}
.ux-item:hover { transform: translateX(3px); border-color: var(--purple); }
.ux-item[aria-checked="true"] {
  border-color: transparent; background: #fff;
  box-shadow: 0 10px 26px rgba(185, 117, 214, .18);
}
.ux-box {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 8px;
  border: 1.8px solid var(--ph-stroke); background: #fff; margin-top: 1px;
  display: grid; place-items: center; transition: .3s var(--ux-spring);
}
.ux-box svg { width: 14px; height: 14px; }
.ux-box path {
  fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s var(--ux-ease) .05s;
}
.ux-item[aria-checked="true"] .ux-box { background: var(--grad); border-color: transparent; transform: scale(1.08); }
.ux-item[aria-checked="true"] .ux-box path { stroke-dashoffset: 0; }
.ux-item .ux-item-t { font-size: 14.5px; font-weight: 700; }
.ux-item .ux-item-d { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.ux-item[aria-checked="true"] .ux-item-t { color: var(--purple-deep); }

.ux-check-out {
  position: relative; margin-top: 20px; display: flex; align-items: center; gap: 12px;
  opacity: 0; translate: 0 8px; pointer-events: none;
  transition: opacity .4s var(--ux-ease) .1s, translate .4s var(--ux-ease) .1s;
}
.ux-check[data-p="1"] .ux-check-out { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ==========================================================================
   ③ 叠卡展开：多张卡层叠 → 点击依次展开 → 再点整齐叠回
   ========================================================================== */
.ux-stack {
  position: relative; display: flex; gap: 0;
  /* 必须裁剪：收起态靠 transform 把卡片叠回去，但它们在文档流里仍占满各自高度，
     不裁的话会溢出到后面的区块底下（并被盖住），点击就全落空了。 */
  overflow: hidden;
  transition: height var(--ux-dur) var(--ux-ease), gap var(--ux-dur) var(--ux-ease);
  perspective: 1400px;
}
.ux-stack.is-desk { flex-direction: row; }
.ux-stack:not(.is-desk) { flex-direction: column; }
/* 收起态靠 transform 叠合，gap 必须为 0；展开态才有间距 */
.ux-stack[data-open="true"].is-desk { gap: 16px; }
.ux-stack[data-open="true"]:not(.is-desk) { gap: 14px; }
.ux-stack.measuring .ux-stack-card { transition: none !important; }
.ux-stack.measuring { transition: none !important; }

.ux-stack-card {
  /* 基础用 flex:0 0 auto —— 纵向排列时 flex-basis 作用于高度，
     写成 100% 会让卡片高度跟着容器跑，整叠卡尺寸全错。宽度只在桌面横向时用 flex-basis 控。 */
  flex: 0 0 auto; min-width: 0; position: relative;
  transform-origin: 50% 82%;
  transform:
    translate3d(calc(var(--txp, 0%) + var(--tx, 0px)), var(--ty, 0px), 0)
    rotate(var(--rot, 0deg))
    scale(var(--sc, 1));
  z-index: var(--z, 1);
  transition:
    flex-basis var(--ux-dur) var(--ux-ease),
    transform var(--ux-dur) var(--ux-ease),
    box-shadow var(--ux-dur) var(--ux-ease),
    filter var(--ux-dur) var(--ux-ease);
  cursor: pointer;
  will-change: transform;
}

/* 桌面：卡片宽度两种状态一致（1/n）。
   ⚠️ 收起态绝不能写 flex-basis:100% —— 那样卡片会按「整行宽度」算出 16:10 大图
   （1140×712），整叠高 943px，反而比展开态（455px）还高一倍，「叠起来省空间」
   当场反转，而且展开瞬间下面整段内容会往上一跳（手指底下的东西跑到别处去了）。
   宽度一致才能做到「同一块地方叠起 / 摊开」。 */
.ux-stack.is-desk .ux-stack-card { flex-basis: calc((100% - 32px) / var(--n)); }

/* 关闭态 · 桌面：扇形叠合 —— 每张只错开一部分卡宽，露出前面那张的右侧一条，
   层层向右下压过去。--txp 是「叠回来多少」：-55% 表示盖掉 55%，露出 45%。
   卡宽与展开态同量级，整叠高 ≈ 一张卡高，所以展开只是「原地横向摊开」，
   点击瞬间下面整段内容不会往上跳。 */
.ux-stack.is-desk[data-open="false"] .ux-stack-card {
  flex-basis: calc((100% - 32px) / var(--n) * 1.2);
  --txp: calc(-55% * var(--oi));
  --tx: calc(var(--oi) * 18px);
  --ty: calc(var(--oi) * 10px);
  --rot: calc(var(--oi) * 1.5deg);
  --z: calc(12 - var(--oi));
}
/* 收起态必须 flex-start：容器高度 = 一张卡 + 错位 + 余量，默认的 align-items:stretch
   会把卡片拉高到容器高度，卡里 flex:1 的正文跟着撑开、「典型场景」被推到最后一行，
   正好撞上下方那枚「点开看三件」徽标（实测撞上了）。不给拉伸，卡片保持自然高度，
   容器底部就空出一段给徽标站。 */
.ux-stack.is-desk[data-open="false"] { align-items: flex-start; }
/* 关闭态 · 移动：向下错开，露出每一张的下边缘（--tyj 由脚本按实测高度修正） */
.ux-stack:not(.is-desk)[data-open="false"] .ux-stack-card {
  --txp: 0%;
  --tx: 0px;
  --ty: var(--tyj, 0px);
  --rot: calc((var(--oi) - 0.5) * 1.2deg);
  --z: calc(12 - var(--oi));
}
/* 展开态 */
.ux-stack[data-open="true"] .ux-stack-card { transform: none; }

/* 「依次展开」：按序错开一点点 —— 展开时从第 1 张起依次摊开，叠回时从最后一张起依次归位，
   所以两态的延迟顺序是相反的。首屏那次 apply(false) 走的是 measuring（transition:none），
   不会在加载时平白演一遍动画。 */
.ux-stack[data-open="true"] .ux-stack-card { transition-delay: calc(var(--oi) * 55ms); }
.ux-stack[data-open="false"] .ux-stack-card { transition-delay: calc((var(--n) - 1 - var(--oi)) * 55ms); }

.ux-stack[data-open="false"] .ux-stack-card:not(:first-child) { filter: saturate(.9) brightness(.95); }
.ux-stack[data-open="false"] .ux-stack-card:first-child { box-shadow: 0 22px 52px rgba(36, 32, 41, .18); }

/* 展开提示徽标 */
.ux-stack-hint {
  position: absolute; right: 14px; bottom: 14px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(17, 17, 17, .78); color: #fff; backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  border-radius: 999px; padding: 7px 14px;
  transition: opacity .3s ease, transform .3s var(--ux-ease), top .3s var(--ux-ease), bottom .3s var(--ux-ease);
}
.ux-stack-hint .t-close { display: none; }
.ux-stack[data-open="true"] .ux-stack-hint .t-open { display: none; }
.ux-stack[data-open="true"] .ux-stack-hint .t-close { display: inline; }
/* 展开后按钮挪到右上角，避免压住卡片正文 */
.ux-stack[data-open="true"] .ux-stack-hint { top: 14px; bottom: auto; background: rgba(17, 17, 17, .6); }
/* 收起态：徽标挪到整叠卡的左下方，跟卡左缘、也跟标题左轴对齐 ——
   贴在卡上才像「这张卡的按钮」；留在容器右下角会飘到右边的空地里，跟卡片没关系。 */
.ux-stack.is-desk[data-open="false"] .ux-stack-hint { left: 14px; right: auto; bottom: 14px; top: auto; }
.ux-stack-hint svg { width: 13px; height: 13px; }

/* ==========================================================================
   ④ 吸附卡 + 画线：滑动吸附居中 → 停稳后时间线逐段绘出
   ========================================================================== */
.ux-snap {
  position: relative; display: grid; gap: clamp(16px, 4vw, 30px);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .ux-snap { grid-template-columns: 1fr 62px; } }

.ux-snap-view {
  position: relative; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--r-lg);
  padding: var(--snap-pad, 0px) 0;
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.ux-snap-view::-webkit-scrollbar { display: none; }

.ux-snap-card {
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--r-lg); padding: clamp(22px, 5vw, 30px) clamp(20px, 5vw, 28px);
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  transition: background .45s var(--ux-ease), transform .45s var(--ux-ease),
              box-shadow .45s var(--ux-ease), border-color .45s var(--ux-ease), opacity .45s;
  transform: scale(.94); opacity: .55;
}
.ux-snap-card + .ux-snap-card { margin-top: var(--snap-gap, 14px); }
.ux-snap-card.on {
  background: #fff; color: var(--ink); border-color: transparent;
  transform: scale(1); opacity: 1;
  box-shadow: 0 26px 56px rgba(0, 0, 0, .3);
}
.ux-snap-card .no { font-size: 11px; font-weight: 700; letter-spacing: .2em; opacity: .55; }
.ux-snap-card .zh { font-size: clamp(26px, 7vw, 40px); font-weight: 900; letter-spacing: .02em; margin-top: 6px; line-height: 1.1; }
.ux-snap-card .en { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; opacity: .6; margin-top: 4px; }
.ux-snap-card .d { font-size: 13.5px; margin-top: 12px; line-height: 1.7; opacity: .88; }
.ux-snap-card .hit { font-size: 12px; font-weight: 700; margin-top: 12px; opacity: .7; }

/* 时间线 */
.ux-tl { position: relative; display: none; }
@media (min-width: 820px) { .ux-tl { display: block; } }
.ux-tl svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ux-tl .ux-tl-base { stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-linecap: round; fill: none; }
.ux-tl .ux-tl-prog {
  stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none;
  transition: stroke-dashoffset .62s var(--ux-ease);
}
.ux-tl .ux-tl-node { fill: rgba(255, 255, 255, .34); transition: .4s var(--ux-ease); }
.ux-tl .ux-tl-node.on { fill: #fff; r: 7; }
.ux-tl .ux-tl-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  fill: rgba(255, 255, 255, .5); transition: fill .4s var(--ux-ease);
}
.ux-tl .ux-tl-label.on { fill: #fff; }
.ux-tl .ux-tl-runner {
  fill: #DF9CEC; r: 5.5;
  filter: drop-shadow(0 0 8px rgba(223, 156, 236, .95));
  transition: cy .5s var(--ux-ease);
}

/* ==========================================================================
   ⑤ 惯性刻度滚轮：轻划 → 惯性减速 → 吸附刻度 → 越界橡皮筋回弹
   ========================================================================== */
.ux-dial { position: relative; display: grid; gap: clamp(18px, 4vw, 32px); }
@media (min-width: 780px) { .ux-dial { grid-template-columns: 1fr 1.1fr; align-items: center; } }

/* --item-h 必须先有默认值：否则首帧测量会把「文字行高」当成档高，整条滚轮塌掉 */
.ux-dial-wrap {
  position: relative; user-select: none; -webkit-user-select: none; touch-action: none;
  cursor: grab; --item-h: 68px;
}
.ux-dial-wrap:active { cursor: grabbing; }
.ux-dial-view {
  position: relative; overflow: hidden;
  height: calc(var(--item-h, 68px) * 5);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.ux-dial-track { will-change: transform; padding: 0; }
.ux-dial-item {
  height: var(--item-h, 68px); display: flex; align-items: center; gap: 14px;
  padding-left: clamp(18px, 4vw, 28px); position: relative;
  transition: opacity .3s ease; cursor: pointer;
  opacity: .32;
}
.ux-dial-item .w {
  flex: none;
  font-size: clamp(24px, 6vw, 34px); font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: color .3s ease, transform .3s var(--ux-ease);
}
.ux-dial-item .t {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 700; opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ux-dial-item.on { opacity: 1; }
.ux-dial-item.on .w { transform: scale(1.06); transform-origin: left center; }
/* 选中带 */
.ux-dial-band {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%;
  height: var(--item-h, 68px); border-radius: 16px; pointer-events: none;
  border: 1.5px solid var(--purple); background: rgba(223, 156, 236, .10);
}
.ux-dial-band::before, .ux-dial-band::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 2px;
  background: var(--purple-deep); translate: 0 -50%; border-radius: 2px;
}
.ux-dial-band::before { left: -6px; }
.ux-dial-band::after { right: -6px; }

.ux-dial-out {
  border-radius: var(--r-lg); border: 1px solid var(--ph-stroke); background: #fff;
  padding: clamp(22px, 5vw, 30px); min-height: 190px;
  display: flex; flex-direction: column; justify-content: center;
}
.ux-dial-out .tag {
  display: inline-flex; align-self: flex-start; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; border-radius: 999px; padding: 5px 12px;
  background: var(--ink); color: #fff;
}
.ux-dial-out .t { font-size: clamp(20px, 5vw, 27px); font-weight: 900; margin-top: 14px; letter-spacing: -.02em; }
.ux-dial-out .d { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.ux-dial-out .ux-dial-fade { animation: ux-fadeup .42s var(--ux-ease); }
@keyframes ux-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   ⑥ 圆形扩散转场
   ========================================================================== */
.ux-reveal {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: linear-gradient(118deg, #8C4BB3 0%, #C74A9A 52%, #E0559A 100%);
  will-change: clip-path, opacity;
}
.ux-reveal .ux-reveal-mark {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 54px; opacity: 0;
}
.ux-reveal.ramp .ux-reveal-mark { animation: ux-mark-in .5s var(--ux-ease) .12s forwards; }
@keyframes ux-mark-in { from { opacity: 0; transform: scale(.6); } to { opacity: .92; transform: none; } }

/* ---------------------------------------------------- 细节补丁 / 反馈动效 */
.ux-item-body { display: block; min-width: 0; }
.ux-item .ux-item-t { display: block; }
.ux-item .ux-item-d { display: block; }
.ux-check-note { font-size: 12.5px; color: var(--muted); }

/* 校验失败：按钮抖动（animation 优先级高于 hover 的 transform，不会互踩） */
.ux-shake { animation: ux-shake .54s cubic-bezier(.36, .07, .19, .97); }
@keyframes ux-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ==========================================================================
   降级：用户声明减少动效
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ux-cbtn, .ux-cbtn .ux-cbtn-label, .ux-stack, .ux-stack-card,
  .ux-check, .ux-check .ux-check-bg, .ux-check .ux-check-bar,
  .ux-item, .ux-box, .ux-box path, .ux-snap-card, .ux-tl .ux-tl-prog,
  .ux-dial-item .w { transition-duration: .01ms !important; }
  .ux-particles, .ux-reveal { display: none !important; }
  .ux-cbtn.is-done .ux-cbtn-tick { animation: none; stroke-dashoffset: 0; }
  .ux-cbtn .ux-cbtn-spin { animation: none; }
  .ux-snap-card { transform: none; opacity: 1; }
}

/* ==========================================================================
   v3 · 2026 最终版 VI 配色（2026-10-14）
   交互层的品牌紫全部换成主粉系（#FF8FBD / 深粉 #B0547F）。
   注意：本文件在 style.css 之后加载，同优先级覆盖必须写在这里。
   ========================================================================== */
.ux-check[data-p="1"] { border-color: var(--pink); box-shadow: 0 24px 60px rgba(255, 143, 189, .22); }
.ux-check .ux-check-bar { background: linear-gradient(115deg, #B0547F 0%, #FF8FBD 100%); }
.ux-ring .ux-ring-bg { stroke: rgba(255, 143, 189, .20); }
.ux-item:hover { border-color: var(--pink); }
.ux-item[aria-checked="true"] .ux-item-t { color: var(--pink-deep); }
.ux-tl .ux-tl-runner { fill: #FF8FBD; filter: drop-shadow(0 0 8px rgba(255, 143, 189, .95)); }
.ux-dial-band { border-color: var(--pink); background: rgba(255, 143, 189, .12); }
.ux-dial-band::before, .ux-dial-band::after { background: var(--pink-deep); }
.ux-particles i { background: var(--c, #FF8FBD); }