/* ===== Play demo 按钮（Uiverse by morgan_9597）转纯 CSS 版 ===== */
/* 白底 + 深绿图标块 + 白色图标 + 深绿粗体字；hover 深绿块横向铺满并遮住文字 */
.demo-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: 0.5rem;
  width: 16rem;
  height: 3.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-left: 4.5rem;
  padding-right: 1.25rem;
  background: #ffffff;
  color: #0b3b35;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18), 0 4px 6px -4px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.demo-btn:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.22), 0 8px 10px -6px rgba(0, 0, 0, 0.16);
}

/* 左侧图标块：深绿底白图标；hover 时横向铺满并盖住文字 */
.demo-btn-icon {
  position: absolute;
  z-index: 2;
  left: 0.25rem;
  top: 0.25rem;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.5rem;
  background: #0b3b35;
  color: #ffffff;
  border-radius: 0.375rem;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.demo-btn:hover .demo-btn-icon { width: calc(100% - 0.5rem); }
.demo-btn-icon svg { display: block; width: 100%; height: 100%; }

/* 文字位于深绿块之下（块展开时会盖住），故不加定位/层叠 */
.demo-btn-text { position: static; }

/* Hero 那排：三个按钮，间距拉开 */
.lp-cta-row.lp-cta-nav { gap: 30px; margin-top: 20px; align-items: center; }

@media (max-width: 1080px) {
  .demo-btn { width: 14rem; height: 3.5rem; font-size: 1.1rem; padding-left: 4rem; }
  .demo-btn-icon { width: 3rem; height: 3rem; }
}
@media (max-width: 760px) {
  .demo-btn { width: 13rem; height: 3.25rem; padding-left: 3.75rem; }
  .demo-btn-icon { width: 2.75rem; height: 2.75rem; padding: 0.42rem; }
}

/* ===== 滑动填充按钮（Uiverse by AKAspidey01 · Go Back）转纯 CSS 版 =====
   白底圆角 + 左侧绿色块；hover 时绿块向右铺满整条、箭头跟着滑到正中，
   文字被绿块盖住 —— 原 demo 里 fill 就是 z-10 压在文字上，这里保持一致。
   刻意不加子元素：::before 当绿块、::after 当箭头，HTML 只要多一个类名。
   用法：加 .uv-slide（默认画「‹」左箭头，适合返回）；
        要右箭头（下一个 ›）再加 .uv-next；
        顶栏胶囊里那种 34px 小高度再加 .uv-slide-sm。 */
.uv-slide {
  --uv-inset: 4px;      /* 滑块离按钮边的内缩（对应 demo 的 left-1 / top-[4px]） */
  --uv-ir: 12px;        /* 滑块圆角（对应 rounded-xl） */
  --uv-block: #4ade80;  /* 滑块底色（demo 原色 green-400） */
  --uv-arrow: #111;     /* 滑块里那个箭头的颜色 */
  position: relative !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
  cursor: pointer;
}
/* 滑块：宽度 25% → hover 时铺满（对应 w-1/4 → group-hover:w-[184px]） */
.uv-slide::before {
  content: '';
  position: absolute; left: var(--uv-inset); top: var(--uv-inset); bottom: var(--uv-inset);
  width: 25%; border-radius: var(--uv-ir); background: var(--uv-block);
  z-index: 2;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.uv-slide:hover::before { width: calc(100% - var(--uv-inset) * 2); }
/* 箭头：默认「‹」= 左边+下边两条边旋转 45°；跟着滑块从 12.5% 滑到 50% */
.uv-slide::after {
  content: '';
  position: absolute; top: 50%; left: 12.5%; z-index: 3;
  width: 7px; height: 7px; margin: -5px 0 0 -4px;
  border-left: 2px solid var(--uv-arrow); border-bottom: 2px solid var(--uv-arrow);
  transform: rotate(45deg);
  transition: left .5s cubic-bezier(.4, 0, .2, 1);
}
.uv-slide:hover::after { left: 50%; }
/* 「›」= 上边+右边两条边旋转 45° */
.uv-slide.uv-next::after {
  border-left: 0; border-bottom: 0;
  border-top: 2px solid var(--uv-arrow); border-right: 2px solid var(--uv-arrow);
}
/* 顶栏胶囊里的小号版：高度只有 34px，内缩/圆角都要收一点。
   左边必须给绿块让位 —— 原来沿用 .tbp-back 的 padding-left: 9px，
   「返回」两个字直接被压在绿块下面（用户反馈的"穿模"）。
   34px 的绿块宽 ≈ 25%×88 ≈ 22px，左边留 34px 让文字从绿块右侧起排。 */
.uv-slide.uv-slide-sm {
  --uv-inset: 3px; --uv-ir: 9px;
  border-radius: 11px !important;
  min-width: 88px;
  padding-left: 34px !important;
  padding-right: 14px !important;
}
/* 深色外壳版：给浅色页面上的按钮用（白壳落在白底页面上等于隐身）。
   黑底白字 + 同一块绿块（绿块里的箭头仍是黑色，压绿底上很清楚）。 */
.uv-slide.uv-slide-dark { background: #111 !important; color: #fff !important; }
/* 深色滑块版：滑块本身改成黑底 + 白箭头（用户要求「返回」用这一版，
   绿块在黑胶囊里太跳；白箭头压黑底很清楚）。 */
.uv-slide.uv-slide-darkblock { --uv-block: #111; --uv-arrow: #fff; }

/* ===== "NEXT" 胶囊按钮（Uiverse by Li-Deheng）转纯 CSS =====
   结构：<div class="uv-nextpill"><span>下一个词</span><svg>三个箭头</svg></div>
   效果：hover 时底色呼吸变色 + 一圈外扩涟漪 + 三个箭头依次闪动（走马灯）。
   注意：background 不能加 !important —— !important 会盖过动画，底色呼吸就没了。 */
.uv-nextpill {
  --main-size: 1rem;
  --color-text: #ffffff;
  --color-background: #ff135a;
  --color-background-hover: #ff1472;
  --color-outline: rgba(255, 20, 90, .25);
  --color-shadow: rgba(0, 0, 0, .25);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: .33em 0 .33em .66em;
  font-weight: 600;
  font-size: var(--main-size);
  color: var(--color-text);
  background: var(--color-background);
  box-shadow: 0 0 .2em 0 var(--color-background);
  transition: .5s;
}
.uv-nextpill:active { transform: scale(.95); }
.uv-nextpill:hover {
  outline: .1em solid transparent;
  outline-offset: .2em;
  box-shadow: 0 0 1em 0 var(--color-background);
  animation: uvRipple 1s linear infinite, uvColorize 1s infinite;
}
.uv-nextpill > span { margin-right: .3em; transition: .5s; }
.uv-nextpill:hover > span { text-shadow: 5px 5px 5px var(--color-shadow); }
.uv-nextpill:active > span { text-shadow: none; }
.uv-nextpill > svg {
  height: .8em;
  fill: var(--color-text);
  margin-right: -.16em;
  position: relative;
  transition: .5s;
}
.uv-nextpill:hover > svg {
  margin-right: .66em;
  filter: drop-shadow(5px 5px 2.5px var(--color-shadow));
}
.uv-nextpill:active > svg { filter: none; }
.uv-nextpill > svg polygon:nth-child(1) { transition: .4s; transform: translateX(-60%); }
.uv-nextpill > svg polygon:nth-child(2) { transition: .5s; transform: translateX(-30%); }
.uv-nextpill:hover > svg polygon:nth-child(1) {
  transform: translateX(0);
  animation: uvOpacity 1s infinite .6s;
}
.uv-nextpill:hover > svg polygon:nth-child(2) {
  transform: translateX(0);
  animation: uvOpacity 1s infinite .4s;
}
.uv-nextpill:hover > svg polygon:nth-child(3) { animation: uvOpacity 1s infinite .2s; }
@keyframes uvOpacity { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes uvColorize {
  0%, 100% { background: var(--color-background); }
  50%      { background: var(--color-background-hover); }
}
@keyframes uvRipple {
  0%   { outline: 0em solid transparent; outline-offset: -.1em; }
  50%  { outline: .2em solid var(--color-outline); outline-offset: .2em; }
  100% { outline: .4em solid transparent; outline-offset: .4em; }
}
/* 红色版：「结束」按钮用（原来是 .sb-end 的红渐变，这里改成同款胶囊 + 红色呼吸/涟漪） */
.uv-nextpill.uv-nextpill-end {
  --color-background: #ef4444;
  --color-background-hover: #f05252;
  --color-outline: rgba(239, 68, 68, .25);
}
/* 返回按钮原来那个「‹」字符要藏掉（箭头改由 ::after 画） */
.uv-slide .tbp-arrow { display: none; }