/* deriva.dev: Tide, Deriva's visual identity (H:\Deriva\deriva\assets\brand and
   .claude/todo/08x/identity.md in the Deriva repo). Light and dark themes share one
   layout; only the tokens below change. Without data-theme the system preference
   decides; assets/theme.js sets data-theme when the visitor picks one. */

@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}

/* Tide, dark */
:root,
:root[data-theme="dark"] {
  --bg: #0d1416;
  --panel: #121b1e;
  --deep: #0a1012;
  --teal-panel: #142326;
  --line: #1e2b2f;
  --text: #dbe7e5;
  --muted: #8ea3a3;
  --accent: #5bb8a9;
  --on-accent: #0d1416;
  --ring-outer: #5e88ad;
  --ring-second: #4f9ca6;
  --ring-inner: #6cc5a9;
  --core: #a8ecd1;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

/* Tide, light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f6f5;
    --panel: #ffffff;
    --deep: #e9f0ee;
    --teal-panel: #e3eeec;
    --line: #dce5e3;
    --text: #1c2027;
    --muted: #56676a;
    --accent: #2a7680;
    --on-accent: #ffffff;
    --ring-outer: #4a78a0;
    --ring-second: #34858f;
    --ring-inner: #2f9c7f;
    --core: #1f7a5f;
    --shadow: 0 1px 2px rgb(16 40 44 / 0.06), 0 18px 48px rgb(16 40 44 / 0.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f2f6f5;
  --panel: #ffffff;
  --deep: #e9f0ee;
  --teal-panel: #e3eeec;
  --line: #dce5e3;
  --text: #1c2027;
  --muted: #56676a;
  --accent: #2a7680;
  --on-accent: #ffffff;
  --ring-outer: #4a78a0;
  --ring-second: #34858f;
  --ring-inner: #2f9c7f;
  --core: #1f7a5f;
  --shadow: 0 1px 2px rgb(16 40 44 / 0.06), 0 18px 48px rgb(16 40 44 / 0.12);
  color-scheme: light;
}

/* Theme-specific images: .on-dark shows in the dark theme, .on-light in the light one */
.on-light {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .on-light {
    display: block;
  }
  :root:not([data-theme="dark"]) .on-dark {
    display: none;
  }
}
:root[data-theme="light"] .on-light {
  display: block;
}
:root[data-theme="light"] .on-dark {
  display: none;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
img,
svg {
  max-width: 100%;
}
h1,
h2,
h3 {
  font-family: "STIX Two Text", Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
}
h3 {
  font-size: 1.3rem;
}
p {
  margin: 0;
}
code,
pre,
.mono {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
:not(pre) > code {
  font-size: 0.88em;
  background: var(--teal-panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
[hidden] {
  display: none !important;
}
/* Holds the ring paths that every mark on the page refers to (<use href="#ring-...">) */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
}
.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) {
  .wrap {
    padding: 0 32px;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: "STIX Two Text", Georgia, serif;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
}
.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a,
.theme-toggle {
  color: var(--muted);
  text-decoration: none;
  font: 500 0.92rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav a:hover,
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line);
}
.nav a[aria-current="page"] {
  color: var(--text);
}
.nav svg {
  width: 17px;
  height: 17px;
  flex: none;
}
@media (max-width: 480px) {
  .nav .label-wide {
    display: none;
  }
}

/* Mark colours (inline SVG; path data from deriva-mark-*.svg) */
.mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark .r-inner {
  stroke: var(--ring-inner);
}
.mark .r-second {
  stroke: var(--ring-second);
}
.mark .r-outer {
  stroke: var(--ring-outer);
}
.mark .core {
  stroke: var(--core);
}
.mark .core-fill {
  fill: var(--core);
  stroke: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover {
  border-color: var(--accent);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn.primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--text));
}

/* Hero */
.hero {
  padding: 56px 0 40px;
}
.hero .wrap {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 880px) {
  .hero {
    padding: 88px 0 72px;
  }
  .hero .wrap {
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
  }
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 0.8rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 7px 12px;
}
.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ring-inner);
}
.hero h1 {
  font-size: clamp(3.6rem, 10vw, 6rem);
  letter-spacing: -0.01em;
  margin: 22px 0 10px;
}
.tagline {
  font: 500 clamp(0.95rem, 2.2vw, 1.12rem)/1.5 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--accent);
}
.lede {
  margin-top: 18px;
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 34em;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-figure {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 620px;
}
.hero-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.callout polyline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.3;
  stroke-dasharray: 0.9 0.9;
}
.callout circle {
  fill: var(--bg);
  stroke-width: 0.6;
}
.callout text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 4.6px;
  fill: var(--text);
}
.callout .sub {
  font-size: 3.3px;
  fill: var(--muted);
}
.callout .c-outer circle {
  stroke: var(--ring-outer);
}
.callout .c-second circle {
  stroke: var(--ring-second);
}
.callout .c-inner circle {
  stroke: var(--ring-inner);
}
.callout .c-core circle {
  stroke: var(--core);
}
/* Hero animation (only with html.js-anim, which theme.js leaves off under reduced
   motion). The rings wait for site.js (.live) so the settled mark does not flash
   first, and the labels appear once the rings have settled (.settled). If site.js
   never runs, the keyframes below show both after a moment anyway. */
@keyframes appear {
  to {
    opacity: 1;
  }
}
.js-anim .hero-figure .rings {
  opacity: 0;
  animation: appear 0.01s linear 1.2s forwards;
}
.js-anim .hero-figure.live .rings {
  opacity: 1;
  animation: none;
}
.js-anim .hero-figure .callout g {
  opacity: 0;
  animation: appear 0.6s ease 2.4s forwards;
}
.js-anim .hero-figure.live .callout g {
  animation: none;
  transition: opacity 0.6s ease;
}
.js-anim .hero-figure.live.settled .callout g {
  opacity: 1;
}
.js-anim .hero-figure.live.settled .callout .c-second {
  transition-delay: 0.12s;
}
.js-anim .hero-figure.live.settled .callout .c-inner {
  transition-delay: 0.24s;
}
.js-anim .hero-figure.live.settled .callout .c-core {
  transition-delay: 0.36s;
}

/* Sections */
.section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 880px) {
  .section {
    padding: 96px 0;
  }
}
.eyebrow {
  font: 500 0.8rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-intro {
  max-width: 40em;
  color: var(--muted);
  margin-top: 14px;
  font-size: 1.06rem;
}

/* How it works */
.steps {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  gap: 16px;
  counter-reset: step;
}
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}
.steps li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  position: relative;
}
.steps .step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.steps .step-head svg {
  width: 40px;
  height: 40px;
  flex: none;
}
.steps .step-num {
  font: 500 0.78rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}
.steps p {
  color: var(--muted);
  font-size: 0.98rem;
}
.steps .phases {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font: 400 0.75rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--text);
  background: var(--teal-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
}

/* Studio screenshot */
.shot {
  margin: 40px 0 0;
}
.shot .frame {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.shot .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}
.shot .bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.shot .bar span {
  margin-left: 10px;
  font: 400 0.75rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
}
.shot img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /* no gap under the image; display stays with .on-dark/.on-light */
}
.shot figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Get started */
.quick {
  margin-top: 36px;
  display: grid;
  gap: 28px;
}
@media (min-width: 880px) {
  .quick {
    grid-template-columns: 1fr 1.35fr;
    gap: 48px;
    align-items: start;
  }
}
.needs {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}
.needs li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
}
.needs li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--ring-inner);
  flex: none;
  transform: translateY(-1px);
}
.needs strong {
  color: var(--text);
  font-weight: 600;
}
.more {
  margin-top: 22px;
}

/* Code */
.code {
  position: relative;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 14px 0 0;
}
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text);
}
.code .c {
  color: var(--muted);
}
.code .p {
  color: var(--accent);
  user-select: none;
}
.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font: 500 0.72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.code:hover .copy,
.copy:focus-visible,
.copy.done {
  opacity: 1;
}
@media (hover: none) {
  .copy {
    opacity: 1;
  }
}
.copy:hover {
  color: var(--text);
}

/* Numbered command steps */
.cmds {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: cmd;
  display: grid;
  gap: 18px;
}
.cmds > li {
  counter-increment: cmd;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 14px;
  min-width: 0;
}
.cmds > li::before {
  content: counter(cmd);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ring-second);
  color: var(--text);
  font: 500 0.8rem/25px "IBM Plex Mono", ui-monospace, monospace;
  text-align: center;
  grid-row: span 2;
}
.cmds > li > * {
  grid-column: 2;
  min-width: 0;
}
.cmds .code {
  margin-top: 8px;
}
.cmds .what {
  font-weight: 600;
  padding-top: 2px;
}
.cmds .what span {
  font-weight: 400;
  color: var(--muted);
}

/* Research */
.research .wrap {
  display: grid;
  gap: 18px;
}
@media (min-width: 880px) {
  .research .wrap {
    grid-template-columns: 1fr 1.35fr;
    gap: 48px;
  }
}
.research p {
  color: var(--muted);
  font-size: 1.06rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
  color: var(--muted);
  font-size: 0.92rem;
}
.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.site-footer .brand {
  font-size: 1.15rem;
}
.site-footer .brand svg {
  width: 24px;
  height: 24px;
}
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--text);
}
.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-left: auto;
}
.footnote {
  margin-top: 28px;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.footnote .word {
  font-family: "STIX Two Text", Georgia, serif;
  font-style: italic;
  font-size: 1.12em;
}
.footnote .pronunciation {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-size: 1.08em;
  margin: 0 0.2em;
}

/* Guide */
.page-head {
  padding: 56px 0 8px;
}
.page-head h1 {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  margin-top: 6px;
}
.page-head > p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 38em;
}
.guide {
  display: grid;
  gap: 32px;
  padding: 32px 0 80px;
}
@media (min-width: 960px) {
  .guide {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
  }
}
.toc {
  font-size: 0.92rem;
}
@media (min-width: 960px) {
  .toc {
    position: sticky;
    top: 84px;
    align-self: start;
  }
}
.toc h2 {
  font: 500 0.78rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.toc ol ol {
  padding-left: 12px;
  margin: 2px 0 6px;
  border-left: 1px solid var(--line);
}
.toc a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
}
.toc a:hover {
  color: var(--text);
  background: var(--panel);
}
@media (max-width: 959px) {
  .toc {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
  }
}
.doc {
  min-width: 0;
  max-width: 760px;
}
.doc > section + section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.doc h2 {
  margin-bottom: 14px;
}
.doc h3 {
  margin: 36px 0 10px;
}
.doc p:not(.what),
.doc ul,
.doc ol:not(.cmds) {
  color: var(--muted);
  margin: 12px 0 0;
}
.doc li + li {
  margin-top: 6px;
}
.doc strong {
  color: var(--text);
  font-weight: 600;
}
.doc .cmds {
  margin-top: 20px;
}
.doc .cmds p {
  margin-top: 6px;
}
.note {
  max-width: 46em;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--ring-outer) 55%, var(--line));
  background: color-mix(in srgb, var(--ring-outer) 10%, var(--panel));
  border-radius: 12px;
  color: var(--text);
  font-size: 0.96rem;
}
.note strong {
  font-weight: 600;
}
.note p {
  color: var(--text);
  margin: 0;
}
.table-scroll {
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}
th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tr:last-child td {
  border-bottom: 0;
}
th {
  font: 500 0.75rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--deep);
}
td {
  color: var(--muted);
}
td:first-child {
  color: var(--text);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}