/* Define the visual tokens used by the paper, ink, and vermilion design language. */
:root {

  --paper: #f0ede5;

  --paper-deep: #e8e3d8;

  --ink: #252521;

  --ink-soft: #77746c;

  --line: rgba(37, 37, 33, 0.17);

  --line-light: rgba(37, 37, 33, 0.09);

  --vermilion: #b54833;

  --vermilion-soft: rgba(181, 72, 51, 0.12);

  --sage: #667667;

  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;

  --sans: Inter, "Helvetica Neue", "Microsoft YaHei", sans-serif;

  --shell-gap: clamp(14px, 2vw, 30px);

}

/* Apply predictable sizing and remove browser-specific spacing defaults. */
* {

  box-sizing: border-box;

}

/* Establish the document background and calm reading color. */
body {

  margin: 0;

  min-width: 320px;

  background: #dcd7cc;

  color: var(--ink);

  font-family: var(--sans);

  -webkit-font-smoothing: antialiased;

}

/* Keep controls visually consistent with the editorial interface. */
button,
input {

  color: inherit;

  font: inherit;

}

/* Remove default button chrome while preserving keyboard focus styles. */
button {

  border: 0;

  background: none;

  cursor: pointer;

}

/* Give keyboard users a visible outline without adding permanent clutter. */
:focus-visible {

  outline: 2px solid var(--vermilion);

  outline-offset: 4px;

}

/* Create the warm, framed canvas that replaces a generic full-bleed SaaS shell. */
.site-shell {

  min-height: 100vh;

  margin: var(--shell-gap);

  padding: 0 clamp(20px, 5vw, 76px);

  border: 1px solid rgba(37, 37, 33, 0.14);

  background: var(--paper);

}

/* Keep the header light and horizontal, echoing an editorial portfolio masthead. */
.masthead {

  display: grid;

  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);

  align-items: center;

  min-height: 90px;

  border-bottom: 1px solid var(--line);

}

/* Align the visual brand as a seal and two-level wordmark. */
.brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  width: fit-content;

  color: var(--ink);

  text-decoration: none;

}

/* Use the red seal as the sole saturated brand element. */
.brand__seal {

  display: grid;

  place-items: center;

  width: 25px;

  height: 25px;

  border-radius: 2px;

  background: var(--vermilion);

  color: var(--paper);

  font-family: var(--serif);

  font-size: 15px;

}

/* Stack the product title and descriptor into a restrained wordmark. */
.brand__name {

  display: grid;

  gap: 2px;

}

/* Use serif text only for the Chinese identity to create a quiet contrast. */
.brand__name strong {

  font-family: var(--serif);

  font-size: 17px;

  font-weight: 500;

  letter-spacing: 0.14em;

}

/* Keep the English descriptor small and tracked like a catalog label. */
.brand__name small {

  color: var(--ink-soft);

  font-size: 8px;

  letter-spacing: 0.18em;

}

/* Center the navigation without making it look like a software sidebar. */
.primary-nav {

  display: flex;

  align-items: center;

  gap: 27px;

}

/* Establish quiet navigation labels with an underline-style active cue. */
.nav-link {

  position: relative;

  padding: 10px 0;

  color: var(--ink-soft);

  font-family: var(--serif);

  font-size: 14px;

  letter-spacing: 0.1em;

}

/* Mark the current route with a small vermilion point instead of a filled tab. */
.nav-link::after {

  position: absolute;

  right: 50%;

  bottom: 1px;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: transparent;

  content: "";

  transform: translateX(50%);

}

/* Increase contrast and reveal the point for the active navigation item. */
.nav-link.is-active {

  color: var(--ink);

}

/* Give the active navigation item its quiet red index mark. */
.nav-link.is-active::after {

  background: var(--vermilion);

}

/* State the prototype status with a simple dot and tracked lettering. */
.nav-status {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--ink-soft);

  font-size: 8px;

  letter-spacing: 0.14em;

}

/* Use sage to distinguish live-state language from the red brand accent. */
.nav-status i,
.privacy-note__dot,
.scope-dot {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--sage);

}

/* Push language and theme controls to the right edge of the masthead. */
.masthead__tools {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 18px;

}

/* Keep the language control understated and text-based. */
.text-control {

  color: var(--ink-soft);

  font-size: 10px;

  letter-spacing: 0.08em;

}

/* Draw the theme control as a thin ring rather than a heavy icon button. */
.theme-control {

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border: 1px solid var(--line);

  border-radius: 50%;

}

/* Render a half-moon glyph inside the theme ring. */
.theme-control span {

  width: 15px;

  height: 15px;

  border-radius: 50%;

  background: var(--ink);

  box-shadow: 5px -2px 0 var(--paper);

}

/* Reserve a stable stage for route transitions. */
.app-main {

  min-height: calc(100vh - 151px);

}

/* Use grid for the login composition rather than a centered authentication card. */
.view--login {

  display: grid;

  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);

  gap: clamp(45px, 10vw, 170px);

  min-height: calc(100vh - 241px);

  padding: clamp(52px, 9vh, 105px) 0 clamp(35px, 7vh, 75px);

}

/* Keep the main editorial text narrow so the page has deliberate open space. */
.login-layout {

  max-width: 650px;

}

/* Use a numbered eyebrow to introduce each route like a printed catalog. */
.eyebrow {

  display: flex;

  align-items: center;

  gap: 11px;

  margin: 0 0 28px;

  color: var(--ink-soft);

  font-size: 9px;

  letter-spacing: 0.18em;

}

/* Set the number apart with a vermilion signal. */
.eyebrow span {

  color: var(--vermilion);

}

/* Make the welcome headline the primary visual rather than the form. */
h1,
h2 {

  margin: 0;

  font-family: var(--serif);

  font-weight: 400;

  letter-spacing: -0.045em;

  line-height: 1.17;

}

/* Scale the login headline for a strong but calm first impression. */
h1 {

  max-width: 620px;

  font-size: clamp(46px, 6.4vw, 88px);

}

/* Let key words use the vermilion ink as a controlled accent. */
h1 em,
h2 em {

  color: var(--vermilion);

  font-style: normal;

}

/* Set the introductory copy apart from the large serif headline. */
.intro-copy {

  max-width: 350px;

  margin: 28px 0 0;

  color: var(--ink-soft);

  font-size: 13px;

  line-height: 1.95;

}

/* Build an abstract signal field that acts as a data-native hero image. */
.signal-field {

  position: relative;

  width: min(100%, 520px);

  height: 182px;

  margin-top: 65px;

  overflow: hidden;

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

  background: linear-gradient(110deg, rgba(181, 72, 51, 0.03), rgba(102, 118, 103, 0.1));

}

/* Add a fine grid to make the abstract field feel tied to data. */
.signal-field__grid {

  position: absolute;

  inset: 0;

  background: repeating-linear-gradient(90deg, transparent 0, transparent 62px, var(--line-light) 63px), repeating-linear-gradient(0deg, transparent 0, transparent 45px, var(--line-light) 46px);

}

/* Place the first rising signal as a thick editorial pulse. */
.signal-bar {

  position: absolute;

  bottom: 0;

  width: 30px;

  background: var(--ink);

  transform-origin: bottom;

  animation: signal-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;

}

/* Set the first signal height and position. */
.signal-bar--one {

  left: 17%;

  height: 72%;

}

/* Set the second signal with the vermilion accent. */
.signal-bar--two {

  left: 43%;

  height: 44%;

  background: var(--vermilion);

  animation-delay: 130ms;

}

/* Set the third signal as the strongest late-period pulse. */
.signal-bar--three {

  left: 72%;

  height: 88%;

  background: var(--sage);

  animation-delay: 260ms;

}

/* Keep the signal caption close to the lower edge like a technical annotation. */
.signal-field__caption {

  position: absolute;

  right: 17px;

  bottom: 13px;

  color: var(--ink-soft);

  font-size: 8px;

  letter-spacing: 0.18em;

}

/* Introduce the authentication form with a thin vertical rule. */
.login-panel {

  align-self: center;

  max-width: 350px;

  padding-left: clamp(25px, 4vw, 55px);

  border-left: 1px solid var(--line);

}

/* Label the local access mode in small tracked text. */
.panel-kicker {

  margin: 0 0 32px;

  color: var(--ink-soft);

  font-size: 9px;

  letter-spacing: 0.18em;

}

/* Make the centered dot in the kicker slightly stronger than surrounding copy. */
.panel-kicker span {

  color: var(--vermilion);

}

/* Stack form controls with enough vertical space to retain the reference site's calmness. */
.login-form {

  display: grid;

  gap: 11px;

}

/* Keep labels compact and aligned with the input underline. */
.field-label {

  margin-top: 8px;

  color: var(--ink-soft);

  font-family: var(--serif);

  font-size: 13px;

}

/* Use underlined fields instead of boxed inputs to avoid a template-like form. */
.field-input {

  width: 100%;

  padding: 9px 0 12px;

  border: 0;

  border-bottom: 1px solid var(--line);

  outline: 0;

  background: transparent;

  font-size: 14px;

  transition: border-color 180ms ease;

}

/* Use a vermilion underline to show the current input without adding a box. */
.field-input:focus {

  border-bottom-color: var(--vermilion);

}

/* Tone down placeholder copy so it does not compete with the labels. */
.field-input::placeholder {

  color: #aaa69c;

}

/* Explain prototype limitations before the user submits credentials. */
.form-note {

  margin: 12px 0 14px;

  color: var(--ink-soft);

  font-size: 10px;

  line-height: 1.7;

}

/* Make the main action feel like a printed directional mark. */
.submit-button {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  padding: 15px 0 14px;

  border-bottom: 1px solid var(--ink);

  color: var(--ink);

  font-family: var(--serif);

  font-size: 15px;

  transition: color 180ms ease, border-color 180ms ease;

}

/* Shift the action toward the accent tone on hover. */
.submit-button:hover {

  border-color: var(--vermilion);

  color: var(--vermilion);

}

/* Keep the arrow independent so it reads like a route marker. */
.submit-button b,
.text-action b {

  font-family: var(--sans);

  font-size: 18px;

  font-weight: 400;

}

/* Add the service-side permission note below the action line. */
.privacy-note {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 30px 0 0;

  color: var(--ink-soft);

  font-size: 10px;

}

/* Hide dashboard content until the prototype authentication transition runs. */
.view--dashboard[hidden] {

  display: none;

}

/* Give the dashboard a measured top rhythm after the route transition. */
.view--dashboard {

  padding: clamp(53px, 8vh, 92px) 0 70px;

  animation: view-in 520ms ease both;

}

/* Make dashboard heading and account context sit on one editorial plane. */
.dashboard-heading {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);

  align-items: end;

  gap: 40px;

}

/* Keep the dashboard headline slightly smaller than the landing headline. */
h2 {

  max-width: 760px;

  font-size: clamp(38px, 5vw, 70px);

}

/* Keep dashboard explanatory text aligned to the right column. */
.dashboard-copy {

  max-width: 270px;

  margin: 0 0 4px auto;

  color: var(--ink-soft);

  font-size: 12px;

  line-height: 1.9;

}

/* Draw the identity line as the boundary between introduction and data. */
.identity-line {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 53px;

  padding: 15px 0;

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

  font-size: 11px;

}

/* Tone down the identity label and preserve the account as the useful value. */
.identity-line__label {

  color: var(--ink-soft);

  font-size: 9px;

  letter-spacing: 0.13em;

}

/* Give the active account a slightly heavier visual weight. */
.identity-line strong {

  font-size: 12px;

  font-weight: 500;

}

/* Use a light slash to retain the reference site's typographic rhythm. */
.identity-line__divider {

  color: var(--vermilion);

}

/* Keep the province scope visually locked and non-interactive. */
.province-lock {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--ink);

  font-family: var(--serif);

}

/* Mark the locked scope with a muted green status dot. */
.province-lock i {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--sage);

}

/* Keep the lock label technical and quiet. */
.province-lock b {

  margin-left: 3px;

  color: var(--ink-soft);

  font-family: var(--sans);

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 0.13em;

}

/* Move the preview exit affordance to the far edge of the identity line. */
.logout-link {

  margin-left: auto;

  color: var(--ink-soft);

  font-size: 10px;

}

/* Underline the exit action only when it is being considered. */
.logout-link:hover {

  color: var(--vermilion);

  text-decoration: underline;

  text-underline-offset: 4px;

}

/* Lay primary metrics across a single reading line. */
.metric-line {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 42px;

  border-bottom: 1px solid var(--line);

}

/* Separate metrics with only vertical rules rather than cards. */
.metric {

  min-height: 140px;

  padding: 0 28px 30px 0;

}

/* Keep later metrics aligned with a narrow divider. */
.metric + .metric {

  padding-left: 28px;

  border-left: 1px solid var(--line);

}

/* Make metric labels compact and technical. */
.metric p {

  margin: 0 0 18px;

  color: var(--ink-soft);

  font-family: var(--serif);

  font-size: 13px;

}

/* Keep metric units small and separated from the Chinese label. */
.metric p span {

  margin-left: 6px;

  color: #aaa69c;

  font-family: var(--sans);

  font-size: 8px;

  letter-spacing: 0.13em;

}

/* Use large ink numbers as the main quantitative anchor. */
.metric > strong {

  display: block;

  font-family: var(--serif);

  font-size: clamp(24px, 3vw, 39px);

  font-weight: 400;

  letter-spacing: -0.04em;

}

/* Keep metric comparison copy small and low contrast. */
.metric small {

  display: flex;

  align-items: center;

  gap: 7px;

  margin-top: 14px;

  color: var(--ink-soft);

  font-size: 10px;

}

/* Draw the positive trend as a small angled line. */
.trend-up {

  width: 13px;

  height: 6px;

  border-top: 1px solid var(--sage);

  border-right: 1px solid var(--sage);

  transform: skew(-25deg);

}

/* Arrange the chart and record stream into an intentionally uneven band. */
.data-band {

  display: grid;

  grid-template-columns: minmax(0, 1.25fr) minmax(270px, 0.75fr);

  gap: clamp(34px, 7vw, 96px);

  padding-top: 48px;

}

/* Keep section headings aligned by a thin baseline. */
.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 20px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--line);

}

/* Use the serif style for section titles while retaining a small scale. */
.section-heading h3 {

  margin: 0;

  font-family: var(--serif);

  font-size: 17px;

  font-weight: 500;

}

/* Keep units and scope markers close to the boundary line. */
.section-heading > span {

  color: var(--ink-soft);

  font-size: 9px;

  letter-spacing: 0.08em;

}

/* Reserve the chart area and let the trace sit on a low-contrast grid. */
.trace-chart {

  position: relative;

  height: 245px;

  margin-top: 22px;

}

/* Draw horizontal and vertical chart guides with CSS only. */
.trace-chart__grid {

  position: absolute;

  inset: 0 0 30px;

  background: repeating-linear-gradient(0deg, transparent 0, transparent 49px, var(--line-light) 50px), repeating-linear-gradient(90deg, transparent 0, transparent 13.9%, var(--line-light) calc(13.9% + 1px));

}

/* Place each data point by percentage so the prototype scales without a chart dependency. */
.trace-line {

  position: absolute;

  inset: 0 0 30px;

  clip-path: polygon(0 100%, 3% 78%, 16% 69%, 29% 72%, 42% 51%, 55% 59%, 68% 37%, 81% 29%, 96% 17%, 100% 17%, 100% 100%);

  background: linear-gradient(155deg, transparent 0 42%, rgba(181, 72, 51, 0.18) 43% 100%);

}

/* Draw the visible line using a repeating border-based data path. */
.trace-line::before {

  position: absolute;

  inset: 0;

  background: linear-gradient(155deg, transparent 0 41%, var(--vermilion) 41.3% 41.7%, transparent 42% 100%);

  content: "";

  opacity: 0.9;

}

/* Place each point at its semantic x/y coordinates. */
.trace-line span {

  position: absolute;

  left: var(--point-x);

  top: var(--point-y);

  z-index: 1;

  width: 7px;

  height: 7px;

  border: 2px solid var(--paper);

  border-radius: 50%;

  background: var(--vermilion);

  transform: translate(-50%, -50%);

}

/* Place the January data point on the first coordinate of the trace. */
.trace-line span:nth-child(1) {

  --point-x: 3%;

  --point-y: 78%;

}

/* Place the February data point on the second coordinate of the trace. */
.trace-line span:nth-child(2) {

  --point-x: 16%;

  --point-y: 69%;

}

/* Place the March data point on the third coordinate of the trace. */
.trace-line span:nth-child(3) {

  --point-x: 29%;

  --point-y: 72%;

}

/* Place the April data point on the fourth coordinate of the trace. */
.trace-line span:nth-child(4) {

  --point-x: 42%;

  --point-y: 51%;

}

/* Place the May data point on the fifth coordinate of the trace. */
.trace-line span:nth-child(5) {

  --point-x: 55%;

  --point-y: 59%;

}

/* Place the June data point on the sixth coordinate of the trace. */
.trace-line span:nth-child(6) {

  --point-x: 68%;

  --point-y: 37%;

}

/* Place the July data point on the seventh coordinate of the trace. */
.trace-line span:nth-child(7) {

  --point-x: 81%;

  --point-y: 29%;

}

/* Place the August data point on the final coordinate of the trace. */
.trace-line span:nth-child(8) {

  --point-x: 96%;

  --point-y: 17%;

}

/* Highlight the current point with a larger faint ring. */
.trace-line span.is-current {

  width: 11px;

  height: 11px;

  box-shadow: 0 0 0 6px var(--vermilion-soft);

}

/* Spread month labels along the chart base. */
.trace-labels {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  display: flex;

  justify-content: space-between;

  color: var(--ink-soft);

  font-size: 8px;

  letter-spacing: 0.12em;

}

/* Give the record list a direct relationship with its heading. */
.record-list {

  border-bottom: 1px solid var(--line);

}

/* Use a four-column row to keep recent records compact and scannable. */
.record-row {

  display: grid;

  grid-template-columns: 30px 1fr auto 45px;

  align-items: center;

  gap: 10px;

  min-height: 58px;

  border-bottom: 1px solid var(--line-light);

}

/* Keep row numbering low contrast. */
.record-row > span,
.record-row > small {

  color: var(--ink-soft);

  font-size: 9px;

}

/* Keep customer names readable while leaving room for the amount. */
.record-row strong {

  overflow: hidden;

  font-family: var(--serif);

  font-size: 13px;

  font-weight: 500;

  text-overflow: ellipsis;

  white-space: nowrap;

}

/* Align amounts to the right for quick financial scanning. */
.record-row em {

  color: var(--vermilion);

  font-size: 11px;

  font-style: normal;

}

/* Align dates to the far edge of the record row. */
.record-row small {

  text-align: right;

}

/* Style the future details route as a quiet text action. */
.text-action {

  display: flex;

  justify-content: space-between;

  width: 100%;

  padding: 19px 0;

  color: var(--ink-soft);

  font-family: var(--serif);

  font-size: 13px;

}

/* Bring the details action to the accent color on hover. */
.text-action:hover {

  color: var(--vermilion);

}

/* Keep the footer sparse and aligned with the main frame. */
.site-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  min-height: 60px;

  border-top: 1px solid var(--line);

  color: var(--ink-soft);

  font-size: 8px;

  letter-spacing: 0.15em;

}

/* Draw the footer mark as three quiet signal ticks. */
.footer-mark {

  display: flex;

  align-items: end;

  gap: 3px;

  height: 13px;

}

/* Give each footer tick a slightly different signal height. */
.footer-mark i {

  display: block;

  width: 3px;

  height: 7px;

  background: var(--vermilion);

}

/* Make the middle footer tick carry the strongest signal. */
.footer-mark i:nth-child(2) {

  height: 13px;

}

/* Keep future capability messages floating at the edge without creating a modal. */
body > div[role="status"] {

  position: fixed;

  right: 28px;

  bottom: 27px;

  z-index: 10;

  max-width: min(320px, calc(100vw - 56px));

  padding: 12px 15px;

  border: 1px solid var(--line);

  background: var(--ink);

  color: var(--paper);

  font-size: 11px;

  line-height: 1.5;

  opacity: 0;

  pointer-events: none;

  transform: translateY(9px);

  transition: opacity 180ms ease, transform 180ms ease;

}

/* Lift the status message into view only when JavaScript marks it visible. */
body > div[role="status"].is-visible {

  opacity: 1;

  transform: translateY(0);

}

/* Add a dimmed ink mode without changing the dashboard's data semantics. */
:root[data-dimmed] {

  --paper: #e4e0d6;

  --paper-deep: #d9d3c7;

  --ink: #171715;

  --ink-soft: #65635d;

}

/* Provide a subtle appearance transition for route views. */
@keyframes view-in {

  from {

    opacity: 0;

    transform: translateY(12px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* Animate the abstract signal bars into the page on first paint. */
@keyframes signal-rise {

  from {

    opacity: 0;

    transform: scaleY(0);

  }

  to {

    opacity: 1;

    transform: scaleY(1);

  }

}

/* Collapse the editorial spread into a readable tablet layout. */
@media (max-width: 900px) {

  .masthead {

    grid-template-columns: 1fr auto;

  }

  .primary-nav {

    grid-column: 1 / -1;

    grid-row: 2;

    justify-content: center;

    padding-bottom: 16px;

  }

  .masthead__tools {

    grid-column: 2;

    grid-row: 1;

  }

  .view--login,
  .dashboard-heading,
  .data-band {

    grid-template-columns: 1fr;

  }

  .login-panel {

    max-width: 480px;

    padding-top: 40px;

    padding-left: 0;

    border-top: 1px solid var(--line);

    border-left: 0;

  }

  .dashboard-copy {

    margin-left: 0;

  }

}

/* Make the frame, navigation, metrics, and table fit narrow mobile screens. */
@media (max-width: 600px) {

  .site-shell {

    margin: 8px;

    padding: 0 18px;

  }

  .masthead {

    min-height: 122px;

  }

  .primary-nav {

    justify-content: flex-start;

    gap: 18px;

    overflow-x: auto;

  }

  .nav-status {

    display: none;

  }

  .text-control {

    display: none;

  }

  .view--login {

    padding-top: 45px;

  }

  h1 {

    font-size: clamp(43px, 14vw, 68px);

  }

  .signal-field {

    margin-top: 47px;

  }

  .identity-line {

    flex-wrap: wrap;

  }

  .logout-link {

    width: 100%;

    margin-left: 0;

    padding-top: 8px;

    text-align: left;

  }

  .metric-line {

    grid-template-columns: 1fr;

    gap: 0;

  }

  .metric,
  .metric + .metric {

    min-height: 0;

    padding: 24px 0;

    border-left: 0;

    border-bottom: 1px solid var(--line-light);

  }

  .metric:last-child {

    border-bottom: 0;

  }

  .record-row {

    grid-template-columns: 24px 1fr auto;

  }

  .record-row small {

    display: none;

  }

  .site-footer {

    gap: 12px;

    font-size: 7px;

  }

}

/* Respect reduced-motion preferences for users who disable animation. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

  }

}