/*
 * 首页版式系统（home.css）。
 *
 * 这一页原来同时跑着两套设计语言：#products 及以上是 yp-*（1180 容器、左对齐、
 * eyebrow 小标签、1px 细边框卡），#features 及以下是 Tailwind（1280 容器、
 * 居中大标题、py-24、每张卡一个色相）。两者拼在一起，容器宽度会跳、标题层级对不上、
 * 卡片风格不统一——看上去就是「把需求一块块堆上去」。
 *
 * 本文件做三件事：
 *   1. 补齐一套页面级 token（间距、圆角、阴影、字号），让所有区块用同一把尺子；
 *   2. 提供统一的区块骨架 .yp-sec / .yp-sec-wrap / .yp-sec-head / .yp-step；
 *   3. 承载首屏简介、考期条这两个新版式。
 *
 * **必须最后加载。** assets/css/tailwind.css 是预编译产物、不能往里加类，
 * 所以下半页那三节的 utility（py-24 / max-w-7xl / rounded-2xl / bg-*-100）
 * 只能靠本文件在后、或用更高的选择器权重盖掉。
 */

/* ---------------------------------------------------------------- token */

:root {
  /*
   * 压深一档。#7a8aa2 用在 12–14px 正文上，落到浅底只有约 3.4:1，
   * 达不到 WCAG AA 对普通文字的 4.5:1；本页这种小字很多。
   */
  --yp-muted: #62738a;

  /* 交替底色：白 / --yp-bg 隔节轮换，整页只有考期条一处深色 */
  --yp-bg: #f7f9fc;
  --yp-ink-dark: #14243d;

  /* 卡片三档：平面（清单）/ 抬起（内容卡）/ 重点（首屏、结果、第一推荐） */
  --yp-radius-flat: 12px;
  --yp-radius-raised: 14px;
  --yp-radius-featured: 16px;
  --yp-shadow-1: 0 4px 14px rgba(20, 36, 61, 0.06);
  --yp-shadow-2: 0 12px 28px rgba(20, 36, 61, 0.1);
}

/*
 * 锚点让位。导航是 fixed 且高 80px，不给这一条，从导航或页内链接跳过来的那一节
 * 标题正好被压在导航底下——本页大半的浏览路径都是页内锚点。
 */
#yp-cert,
#yp-intro,
#yp-fit,
#yp-hero,
#products,
#features,
#updates,
#resources {
  scroll-margin-top: 88px;
}

/* ------------------------------------------------------------- 区块骨架 */

/*
 * .yp-sec / .yp-sec-wrap 挂在仍带着 Tailwind utility 的那三节上，
 * 把容器宽度拉回 1180、把 py-24（上下各 96px）收到 76px。
 * 96px 的上下留白配上「标题—大空白—卡片阵列」的结构，读起来是空的不是松的。
 */
.yp-sec {
  padding: 76px 0;
}

.yp-sec-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 统一的区块标题：eyebrow / h2 / 一句说明，一律左对齐 */
.yp-sec-head {
  margin-bottom: 32px;
  text-align: left;
}

.yp-sec-head h2 {
  margin: 14px 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--yp-ink);
}

.yp-sec-head p {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--yp-ink-2);
  font-size: 15px;
  line-height: 1.9;
}

/*
 * 徽章 / eyebrow 当标题用时，别被上面那条 .yp-sec-head h2 拉成 32px 大字。
 *
 * 「进入备考系统」和「免费」这两节的大标题被产品方去掉了，只剩一个小标签。
 * 标签仍用 <h2>，页面大纲里才不会缺一节；字号靠这条规则按标签走。
 * 权重必须高过 .yp-sec-head h2（0,1,1），所以写成两个类选择器（0,2,1）。
 */
.yp-sec-head h2.yp-step,
.yp-sec-head h2.yp-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--yp-accent);
}

/* 只剩一个徽章的区块，标题区不需要整档 32px 的下边距 */
.yp-sec-head-slim {
  margin-bottom: 22px;
}

/* 备考动态那一节是「左标题 + 右查看全部」，别把右侧链接也压成左对齐块 */
.yp-sec-head-row p {
  margin-bottom: 0;
}

.yp-sub-head {
  text-align: left;
}

.yp-sub-head h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--yp-ink);
}

.yp-sub-head p {
  margin: 0;
  color: var(--yp-muted);
  font-size: 14px;
}

/*
 * 步骤徽章。
 *
 * 产品方的需求文档本身就是 3)如何选科 4)生成备考计划 5)进入备考系统 这条路径，
 * 页面上却完全没有「第几步」，所以三节读起来是平铺的板块。把编号显式画出来，
 * 页面就有了一条脊柱。只给这三节编号——优势、动态、资源不在路径上，不编号。
 */
.yp-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
  font-size: 13px;
  font-weight: 600;
}

.yp-step i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yp-accent);
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

/* -------------------------------------------------------------- 通用按钮 */

.yp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--yp-accent);
  border-radius: 8px;
  background: var(--yp-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
}

.yp-cta:hover {
  background: #1f4fd8;
  border-color: #1f4fd8;
}

.yp-cta i {
  width: 16px;
  height: 16px;
}

.yp-cta-ghost {
  border-color: #dbe3f0;
  background: #ffffff;
  color: var(--yp-accent);
}

.yp-cta-ghost:hover {
  border-color: var(--yp-accent);
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
}

/*
 * 窄屏导航 CTA。
 *
 * 导航右侧那一整块是 hidden lg:flex，1024 以下全部收起——手机上导航栏只剩 logo，
 * 顶部 80px 什么都不做。整站的移动端菜单是另一件事（要动 52 个页面），
 * 这里先把首页最该有的那个动作放回去。
 */
.yp-nav-cta-m {
  display: none;
}

@media (max-width: 1023px) {
  .yp-nav-cta-m {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--yp-ink-dark);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }
}

/* ------------------------------------------------------------ 首屏：简介 */

.yp-intro {
  padding: 64px 0 0;
  color: var(--yp-ink);
  /* 点阵呼应「星图」。整页只此一处，出现第二次它就不是标识了 */
  background:
    radial-gradient(circle at 1px 1px, rgba(47, 106, 255, 0.07) 1px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(180deg, #f1f5ff 0%, #f8fafd 62%, #ffffff 100%);
}

.yp-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 52px;
  align-items: start;
}

/*
 * 标题行：h1 与考试全称链接同行。
 *
 * 用 flex + baseline 而不是把链接塞进 h1：它不是标题的一部分，
 * 进了 h1 会被搜索引擎当成标题正文的一截。baseline 对齐让 46px 的标题
 * 和 14px 的小字落在同一条底线上；窄屏交给 wrap 换行到标题下面。
 */
.yp-intro-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.yp-intro h1 {
  margin: 0;
  font-size: 46px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--yp-ink);
}

/* 考试全称：浏览型出口，压到与首屏说明同一量级，不跟两个主按钮抢 */
.yp-intro-exam {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--yp-muted);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 106, 255, 0.22);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.yp-intro-exam:hover {
  color: var(--yp-accent);
  border-bottom-color: var(--yp-accent);
}

.yp-intro-exam i {
  width: 14px;
  height: 14px;
}

/*
 * 定稿三段里的第一段。它回答「我们是做什么的、覆盖哪些科目」，是首屏该被读到的那一段，
 * 所以放大到 17px；另外两段在下面的说明带里按正文 15px 排。
 * 限宽 620：一行超过四十来个汉字，眼睛回到行首容易串行。
 */
.yp-intro-lead {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--yp-ink-2);
  font-size: 17px;
  line-height: 1.8;
}

.yp-intro-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.yp-intro-note {
  margin: 18px 0 0;
  color: var(--yp-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* 产品方要的两个锚点。它们是浏览型出口，压成文字链，不跟主按钮抢 */
.yp-intro-note a {
  margin-right: 20px;
  color: var(--yp-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 106, 255, 0.28);
}

.yp-intro-note a:hover {
  border-bottom-color: var(--yp-accent);
}

/* ---- 闭环卡 ---- */

/*
 * 定稿第二段里那句「评估—计划—学习—练习—检测—反馈调整」的可视化。
 *
 * 做成竖向轨道而不是圆环：六个中文标签在 420px 宽的卡里摆成环形，
 * 在 1024 与 390 两档上必然错位或换行。轨道式在三档宽度下是同一套盒子，
 * 只改字号，风险为零，而首屏需要的「有个东西可看」它同样给得到。
 */
.yp-loop {
  padding: 22px 24px 20px;
  border: 1px solid #dbe6fb;
  border-radius: var(--yp-radius-featured);
  background: #ffffff;
  box-shadow: var(--yp-shadow-2);
}

.yp-loop-title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--yp-ink);
}

.yp-loop-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yp-loop-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding-bottom: 14px;
}

/* 序号之间那条竖线。最后一项不画，它下面没有下一个节点了 */
.yp-loop-steps li::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 2px;
  left: 12px;
  width: 2px;
  background: #e4ecfa;
}

.yp-loop-steps li:last-child {
  padding-bottom: 0;
}

.yp-loop-steps li:last-child::before {
  display: none;
}

.yp-loop-steps i {
  grid-column: 1;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.yp-loop-steps b {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--yp-ink);
}

.yp-loop-steps small {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2px;
  color: var(--yp-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ---- 说明带：定稿第二、三段 ---- */

/*
 * 两段各占整行通排，不再分左右两栏，也不给它们各套一张浮起卡片——
 * 卡片里套卡片正是「模板堆砌感」的来源。只用一条上边框把它与首屏分开。
 *
 * 字号压到 13px：这两段是定稿正文，必须留在页面上（SEO / GEO 的抓取对象），
 * 但它不是首屏要人读的东西，排成两栏 15px 时体量看着比上面的转化区还重。
 */
.yp-intro-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 40px;
  padding: 28px 24px 40px;
  border-top: 1px solid #e2e9f5;
}

.yp-intro-more p {
  margin: 0;
  color: var(--yp-ink-2);
  font-size: 13px;
  line-height: 1.85;
}

/* ------------------------------------------------------------- 顶部考期条 */

/*
 * 导航正下方的一行通告，整页唯一的深色带。
 *
 * 一行三段：固定的考期与倒计时 / 滚动的本期科目 / 文字链出口。
 * 高度压到 44px 一行——它挪到首屏之上以后，多占的每一像素都是从
 * 「智能备考管家」那块转化区里扣的。深色 + 琥珀色倒计时是全页唯一的暖色。
 */
.yp-exam-bar {
  background: var(--yp-ink-dark);
  color: #ffffff;
  font-size: 13px;
}

.yp-exam-bar-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
}

/* ---- 固定段：考期与倒计时 ---- */

.yp-exam-bar-fixed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.yp-exam-bar-fixed b {
  font-weight: 600;
  color: #ffffff;
}

.yp-exam-bar-when {
  color: rgba(255, 255, 255, 0.66);
}

/*
 * 倒计时。默认 hidden，由 exam-countdown.js 算出来后才显示，
 * 所以这里不必给「算不出来」留占位样式。
 */
.yp-exam-bar-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 197, 61, 0.14);
  color: #ffc53d;
}

/* 本文件在 tailwind.css 之后加载，上面那条 display 会盖掉 preflight 的 [hidden] */
.yp-exam-bar-count[hidden] {
  display: none;
}

.yp-exam-bar-count b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffc53d;
}

/* 考试进行中 / 已结束时 b 里是文字不是数字，跟着正文字号走 */
.yp-exam-bar-count.is-text b {
  font-size: 13px;
}

.yp-exam-bar-count span:empty {
  display: none;
}

/* ---- 滚动段：本期开考科目 ---- */

/*
 * 跑马灯而不是换行铺开：六个开考科目的名字一行放不下，
 * 换成两行又会把这条通告顶成一个小区块。
 * 轨道里是两份完全相同的内容，位移 -50% 正好接上，接缝看不出来；
 * 第二份 aria-hidden，读屏与抓取只读第一份。
 */
.yp-exam-bar-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* 两端淡出，让科目名是「滚进来」而不是从固定段边上硬切出来 */
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.yp-exam-bar-track {
  display: flex;
  width: max-content;
  animation: yp-exam-bar-marquee 42s linear infinite;
}

/* 想看清某一科时能停下来 */
.yp-exam-bar-scroll:hover .yp-exam-bar-track {
  animation-play-state: paused;
}

.yp-exam-bar-run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 40px;
  white-space: nowrap;
}

.yp-exam-bar-run b {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 400;
}

.yp-exam-bar-run em {
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-style: normal;
}

@keyframes yp-exam-bar-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---- 固定段：出口 ---- */

/* 链接样式，不是按钮：它是浏览型出口，做成按钮会跟首屏那两个转化按钮抢 */
.yp-exam-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease;
}

.yp-exam-bar-link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yp-exam-bar-link i {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------- 第 1 步：选科 */

/* 上一节是深色带，这里不需要再画分隔线；节奏统一到 76px 一档 */
.yp-links {
  padding: 68px 0 60px;
  border-top: 0;
  background: #ffffff;
}

/*
 * 四张事实页入口降级为辅助读物：去掉白底与浮起，改浅灰平面卡。
 * 这一节的主任务是「选出一科」，视觉上唯一该被抬起的是下面的问卷。
 *
 * 栅格布局是为了那个箭头：把标题与箭头放在同一行的两端、说明另起一行通栏。
 * 这四张卡在浅灰底上没有按钮相，光看不出来能点——箭头是它们唯一的可点击暗示。
 */
.yp-links-grid a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 16px 18px;
  border-color: #e8edf5;
  border-radius: var(--yp-radius-flat);
  background: var(--yp-bg);
}

.yp-links-grid a:hover {
  background: #ffffff;
}

.yp-links-grid b {
  grid-column: 1;
  font-size: 15px;
}

/* 用 ::after 而不是往四张卡里各塞一个 <i>：它纯粹是装饰，不该被读屏念出来 */
.yp-links-grid a::after {
  content: "→";
  grid-column: 2;
  grid-row: 1;
  color: var(--yp-accent);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.yp-links-grid a:hover::after {
  transform: translateX(3px);
}

.yp-links-grid small {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 12px;
}

/* -------------------------------------------- 第 3 步：进入备考系统 */

/*
 * 「更多产品即将上线」那张卡原来和七张真科目卡长得一模一样，并排看像第八个产品。
 * 改成虚线描边 + 弱化底色：它是一个占位与预约入口，不是可以现在开始用的科目。
 */
.yp-course-soon {
  border-style: dashed;
  border-color: #dde4ee;
  background: var(--yp-bg);
}

/* 卡片底色换成浅灰后，「敬请期待」那个 chip 的浅灰底就没了对比，得换回白 */
.yp-course-soon .yp-course-term {
  background: #ffffff;
}

.yp-course-soon:hover {
  border-color: #c7d6f5;
  box-shadow: none;
  transform: none;
}

/* ---------------------------------------- 下半页三节：拉回同一套版式 */

/* 卡片圆角收到 14px：16px 圆角 + 大阴影 + 厚边框三者同时出现最显廉价 */
.yp-sec .rounded-2xl {
  border-radius: var(--yp-radius-raised);
}

/*
 * 图标底色统一。
 *
 * 优势六卡原来一张一个色相（蓝绿橙靛红青），免费工具八卡又是另一套七色，
 * 并排看是两条彩虹——而这些图标之间并没有需要用颜色区分的语义。
 * 全部收成品牌蓝；绿 / 橙 / 红在本页留给「开考、偏紧、排不下」这类真状态，
 * 颜色一旦到处都是，它作为状态信号就失效了。
 */
.yp-ico {
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
}

/*
 * 文章摘要两行截断。
 *
 * .line-clamp-2 靠 display:-webkit-box 生效，而这个 <p> 是卡片（flex flex-col）的
 * 直接子项——flex 项的 display 会被 blockify 成 flow-root，-webkit-line-clamp 随之作废，
 * 只剩 overflow:hidden 在硬切。标题占一行的那张卡里 <p> 因为 flex-1 长得更高，
 * 于是切口落在字的中间，露出半行。
 *
 * 直接把它锁成两行的高度（text-sm 行高 20px），切口就永远落在行与行之间。
 * 卡片底部那行元信息带 mt-auto，不会因此上移。
 */
#updates .line-clamp-2 {
  flex: 0 0 auto;
  height: 40px;
}

/* 「免费内容与资料」那两张卡原来居中且只占 3xl 宽，与上面八张工具卡对不齐 */
.yp-free-pair {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ------------------------------------------------------------- 窄屏 */

@media (max-width: 1180px) {
  .yp-intro-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 36px;
  }

  .yp-intro h1 {
    font-size: 42px;
  }
}

@media (max-width: 1024px) {
  .yp-sec {
    padding: 60px 0;
  }

  .yp-links {
    padding: 56px 0;
  }

  .yp-sec-head h2 {
    font-size: 28px;
  }

  /*
   * 一行摆不下三段时，滚动的科目条整条换到第二行：
   * 挤压的只能是它——考期与出口都是不能被截断的固定信息。
   */
  .yp-exam-bar-wrap {
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .yp-exam-bar-link {
    margin-left: auto;
  }

  .yp-exam-bar-scroll {
    order: 3;
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  .yp-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .yp-loop {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .yp-intro {
    padding-top: 44px;
  }

  .yp-intro h1 {
    font-size: 32px;
  }

  .yp-intro-lead {
    font-size: 16px;
  }

  .yp-intro-cta .yp-cta {
    flex: 1 1 100%;
  }

  .yp-intro-note a {
    margin-right: 16px;
  }

  /* 手机上「2026 下半年软考 / 10 月 24 日—25 日开考 / 倒计时」三块允许折行 */
  .yp-exam-bar-fixed {
    flex-wrap: wrap;
    white-space: normal;
  }

  .yp-sec-head h2 {
    font-size: 26px;
  }

  .yp-free-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- 页脚二维码 */

/*
 * 页脚那排二维码原来是 w-24（96px）四个，加上鸿蒙 App 变五个后，
 * 96×5 + 间距超出了页脚这一列的宽度，第五个会独占一行。
 * 缩到 80px 正好排下，但 tailwind.css 是预编译产物、里面没有 w-20，
 * 所以尺寸写在这儿。
 */
.yp-qr-tile {
  width: 80px;
  height: 80px;
}

.yp-qr-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------- 动效 */

/*
 * 全站统一的减弱动效兜底。原来只有选科问卷那一块处理了，
 * 而下半页的卡片浮起、图片缩放、图标放大都还在动。
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}