/* ============================================================
   QUANTDIGITALS — CORE STYLESHEET
   One file for the whole site: tokens, layout, components.

   Contents
     1. Fonts          self-hosted, no external origins
     2. Tokens         dark is the default; light is a full theme
     3. Reset + base
     4. Layout         shell, prose measure, section rhythm
     5. Header + nav
     6. Components     buttons, tags, status, cards, fields
     7. Terminal
     8. Command palette
     9. States         empty, loading, error
    10. Footer
    11. Motion         everything here is off under reduced-motion
   ============================================================ */

/* ---------- 1. FONTS -------------------------------------- */
/* Latin subsets, self-hosted. Serif is loaded by guide pages
   only, since it is used for guide prose and nothing else.    */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;      /* variable: one file covers both */
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- 2. TOKENS ------------------------------------- */
/* Dark is the base. Light is applied when the OS asks for it,
   or when the toggle sets data-theme. The toggle always wins. */
:root {
  /* Shared with .qd-workstation (assets/css/workstation.css) so the
     marketing shell and the workspace are one palette, not two. */
  --bg:        #0A0C0B;
  --surface:   #101312;
  --surface-2: #161A18;
  --line:      #212625;
  --line-2:    #353C39;
  --ink:       #E7EBE9;
  --ink-2:     #97A19C;
  --ink-3:     #6A746F;
  --pass:      #4CB489;
  --warn:      #D3A140;
  --fail:      #E8535C;
  --mark:      #E8535C;
  --btn-bg:    #E7EBE9;
  --btn-fg:    #0A0C0B;
  --focus:     #E8535C;
  --selection: rgba(232, 83, 92, 0.28);

  /* The terminal is dark in both themes — it is a terminal. */
  --term-bg:   #05070A;
  --term-line: #232A33;
  --term-ink:  #DDE6EC;
  --term-out:  #A9C6BC;
  --term-dim:  #7B8998;

  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Spacing scale — nothing between these steps. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --shell: 1120px;
  --measure: 68ch;
  --r-chip: 2px;
  --r-box: 4px;
  --r-term: 6px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #F4F7F5;
    --surface:   #EDF1EF;
    --surface-2: #FBFCFB;
    --line:      #D2D8D4;
    --line-2:    #B6BEBA;
    --ink:       #0F1412;
    --ink-2:     #49514D;
    --ink-3:     #77817C;
    --pass:      #1A6E4C;
    --warn:      #83610F;
    --fail:      #C9262F;
    --mark:      #C9262F;
    --btn-bg:    #0F1412;
    --btn-fg:    #F4F7F5;
    --focus:     #C9262F;
    --selection: rgba(201, 38, 47, 0.18);
  }
}

:root[data-theme="light"] {
  --bg:        #F4F7F5;
  --surface:   #EDF1EF;
  --surface-2: #FBFCFB;
  --line:      #D2D8D4;
  --line-2:    #B6BEBA;
  --ink:       #0F1412;
  --ink-2:     #49514D;
  --ink-3:     #77817C;
  --pass:      #1A6E4C;
  --warn:      #83610F;
  --fail:      #C9262F;
  --mark:      #C9262F;
  --btn-bg:    #0F1412;
  --btn-fg:    #F4F7F5;
  --focus:     #C9262F;
  --selection: rgba(201, 38, 47, 0.18);
}

/* ---------- 3. RESET + BASE ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

h1, h2, h3, h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

/* One focus style, used everywhere, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

img, svg { max-width: 100%; }
svg { display: block; }

code, kbd, samp { font-family: var(--mono); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; font-family: var(--mono); font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. LAYOUT ------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--s5); }
.prose { max-width: var(--measure); }

.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--line); }
@media (max-width: 768px) { .section { padding: var(--s7) 0; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px;
  background: var(--mark); flex: none;
}

.section-title { font-size: 25px; margin: 0 0 var(--s4); max-width: 26ch; }
.section-intro { color: var(--ink-2); max-width: var(--measure); margin: 0 0 var(--s6); }

/* Breadcrumb above a page title. Shared by tools and, later, guides. */
.crumbs-line {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-3); margin: 0 0 var(--s3);
}
.crumbs-line a { color: var(--ink-3); }
.crumbs-line a:hover { color: var(--ink-2); }

/* Inline keyboard keys in prose. */
kbd {
  font-family: var(--mono); font-size: 0.85em;
  border: 1px solid var(--line-2); border-radius: var(--r-chip);
  padding: 1px 5px; background: var(--surface-2); color: var(--ink);
}

.stack   { display: flex; flex-direction: column; gap: var(--s4); }
/* A heading needs more air above it than below, or it reads as
   belonging to the paragraph before it. The flex gap alone gives
   equal spacing both sides, so headings add their own top margin. */
.prose.stack > .section-title { margin: var(--s4) 0 0; }
.prose.stack > .section-title:first-child { margin-top: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- 5. BAR (marketing pages) ------------------------ */
/* The rail and bar frame (.qd-workstation, .w-rail, .w-mark,
   .w-nav, .w-item, .w-bar) live entirely in workstation.css and
   are shared byte-for-byte with the globe workspace — marketing
   pages load that stylesheet and wrap in .qd-workstation.qd-page
   (see workstation.css section 2) to get normal scrolling flow
   instead of the fixed workspace app-shell. Two copies of the
   same rail would drift pixel by pixel over time; one copy can't.
   This file only owns what workstation.css has no opinion on:
   the working search trigger and theme toggle inside .w-bar.    */

/* Marketing pages have no .w-search filler in the bar, so the
   trigger + toggle need to push themselves to the right instead.
   The bar also needs to stay put while the page scrolls — inside
   the workspace's fixed app-shell it never had to.               */
.qd-page .w-bar { justify-content: flex-end; position: sticky; top: 0; z-index: 50; }

.header-tools { display: flex; align-items: center; gap: var(--s2); }

/* Visible palette trigger — the shortcut alone is not discoverable. */
.palette-trigger {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--r-box);
  padding: 6px 9px; cursor: pointer; min-height: 34px;
}
/* The icon is the one part that never hides: on narrow screens the
   label and shortcut go away, and without it the button is empty. */
.palette-trigger svg { width: 15px; height: 15px; flex: none; }
.palette-trigger kbd { margin-left: var(--s3); }
.palette-trigger:hover { color: var(--ink-2); border-color: var(--ink-3); }
.palette-trigger kbd {
  font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 1px 4px; background: var(--surface);
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-box);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }

/* Theme toggle shows the icon of the theme you would switch TO. */
.theme-toggle .to-light { display: none; }
.theme-toggle .to-dark  { display: block; }
:root[data-theme="light"] .theme-toggle .to-light { display: block; }
:root[data-theme="light"] .theme-toggle .to-dark  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .to-light { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .to-dark  { display: none; }
}

/* Rail collapse at 760px is workstation.css's rule (.w-rail etc.,
   shared with the workspace) — nothing to duplicate here. */
@media (max-width: 720px) {
  .palette-trigger .pt-label,
  .palette-trigger kbd { display: none; }
  .palette-trigger { padding: 6px; width: 34px; justify-content: center; gap: 0; }
}
@media (max-width: 480px) {
  .shell { padding: 0 var(--s4); }
  .w-bar { padding: 0 var(--s4); gap: var(--s1); }
  .terminal-bar .hint { display: none; }   /* wrapped to two lines and looked broken */
}

/* ---------- 6. COMPONENTS --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  padding: 12px 20px; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--r-box);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn-quiet { background: transparent; color: var(--ink-2); padding: 12px 4px; }
.btn-quiet:hover { color: var(--ink); }

.tag {
  font-family: var(--mono); font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-chip);
  color: var(--ink-2); background: transparent;
  display: inline-block; white-space: nowrap;
}

/* Status — colour, a word and a dot shape all carry the finding. */
.status {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid; border-radius: var(--r-chip);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-pass { color: var(--pass); border-color: var(--pass); }
.status-warn { color: var(--warn); border-color: var(--warn); }
.status-fail { color: var(--fail); border-color: var(--fail); }
.status-none { color: var(--ink-3); border-color: var(--line-2); }
.status-none::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* Runtime disclosure — sits above every tool. */
.runchip {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-chip);
  padding: 4px 10px; display: inline-flex; align-items: center; gap: var(--s2);
  white-space: nowrap;
}
.runchip svg { width: 13px; height: 13px; flex: none; }
/* The disclosure sentence is longer than a phone is wide, and nowrap
   pushed the whole page sideways. It wraps below 560px instead. */
@media (max-width: 560px) {
  .runchip { white-space: normal; align-items: flex-start; line-height: 1.45; }
  .runchip svg { margin-top: 3px; }
}

.card {
  display: block;
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--bg); padding: var(--s4) var(--s4) var(--s4);
  text-decoration: none; color: inherit;
}
a.card:hover { border-color: var(--ink-3); }
.card h2,
.card h3 { font-size: 15px; margin: 0 0 6px; }
.card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 var(--s3); }
.card-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.card-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .card-grid { grid-template-columns: 1fr; } }

.field { display: flex; width: 100%; max-width: 460px; }
.field input {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 14px; padding: 12px 13px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-right: none;
  border-radius: var(--r-box) 0 0 var(--r-box);
}
.field input::placeholder { color: var(--ink-3); }
.field .btn { border-radius: 0 var(--r-box) var(--r-box) 0; }

/* Hero — homepage only. */
.hero-title {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.16;
  margin: 0 0 var(--s4);
  max-width: 17ch;
}
.hero-lede { font-size: 17px; color: var(--ink-2); max-width: 54ch; margin: 0 0 var(--s5); }
.hero-actions { margin: 0 0 var(--s6); }
.hero-terminal { max-width: 720px; margin: 0 0 var(--s5); }
.hero-note { max-width: 720px; }

/* Two-up grid. These rules must come AFTER .card-grid's own media
   queries, or the 1-column mobile rule above would be overridden
   by this class and cards would stay two-up on a phone. */
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .card-grid-2 { grid-template-columns: 1fr; } }

/* ---------- 7. TERMINAL ----------------------------------- */
.terminal {
  background: var(--term-bg);
  border: 1px solid var(--term-line);
  border-radius: var(--r-term);
  overflow: hidden;
  /* Height is reserved on the box, not the output area, so the prompt
     follows the output directly and nothing shifts as lines arrive. */
  display: flex;
  flex-direction: column;
  min-height: 268px;
}
.terminal-bar {
  font-family: var(--mono); font-size: 11px; color: var(--term-dim);
  padding: 9px 14px; letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; justify-content: space-between; gap: var(--s3);
}
.terminal-bar .hint { color: var(--term-dim); opacity: 0.75; }

.terminal-body {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  padding: var(--s4) var(--s4) var(--s3);
  color: var(--term-ink);
  overflow-y: auto; max-height: 340px;
}
@media (max-width: 560px) {
  .terminal { min-height: 236px; }
  .terminal-body { font-size: 12.5px; }
}

.terminal-body .line { white-space: pre-wrap; word-break: break-word; }
.terminal-body .prompt { color: var(--mark); margin-right: var(--s2); }
.terminal-body .out { color: var(--term-out); }
.terminal-body .err { color: var(--fail); }
.terminal-body a { color: var(--term-ink); text-decoration-color: var(--term-dim); }

/* The input line is a real, labelled input. */
.terminal-input-line { display: flex; align-items: baseline; padding: 0 var(--s4) var(--s4); }
.terminal-input-line .prompt { color: var(--mark); font-family: var(--mono); font-size: 13.5px; margin-right: var(--s2); }
.terminal-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none; padding: 0;
  font-family: var(--mono); font-size: 13.5px; color: var(--term-ink);
  caret-color: var(--term-ink);
}
.terminal-input::placeholder { color: var(--term-dim); }
.terminal-input-line:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }

.cursor {
  display: inline-block; width: 7px; height: 15px;
  background: var(--term-ink); vertical-align: -2px; margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 8. COMMAND PALETTE ---------------------------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3, 5, 8, 0.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--s4) var(--s4);
}
.palette-backdrop[hidden] { display: none; }

.palette {
  width: 100%; max-width: 560px;
  background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-box);
  /* The one shadow on the site: this genuinely floats. */
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: palette-in 120ms ease-out;
}
@keyframes palette-in { from { opacity: 0; transform: translateY(2px); } }

.palette-field { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.palette-field svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.palette-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: var(--mono); font-size: 14.5px; color: var(--ink); padding: 4px 0;
}
.palette-input::placeholder { color: var(--ink-3); }

.palette-results { max-height: 46vh; overflow-y: auto; padding: var(--s2); }
.palette-group {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-3);
  padding: var(--s3) var(--s3) 6px;
}
.palette-item {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-chip);
  cursor: pointer; text-decoration: none; color: var(--ink);
}
.palette-item[aria-selected="true"] { background: var(--surface-2); }
.palette-item .pi-name { font-family: var(--mono); font-size: 13.5px; }
.palette-item .pi-desc {
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-item .pi-path { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.palette-empty { padding: var(--s5) var(--s3); color: var(--ink-3); font-size: 14px; text-align: center; }

.palette-foot {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s2) var(--s4); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
.palette-foot kbd { border: 1px solid var(--line); border-radius: var(--r-chip); padding: 0 4px; background: var(--surface); }

/* Below 560px the palette fills the screen, so there is no backdrop left
   to tap and a phone keyboard has no Escape key. Without this button the
   palette cannot be dismissed at all on a touch device. */
.palette-close {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: var(--r-box);
  cursor: pointer;
}
.palette-close svg { width: 15px; height: 15px; }
.palette-close:hover { color: var(--ink); border-color: var(--ink-3); }

@media (max-width: 560px) {
  .palette-backdrop { padding: 0; }
  .palette { max-width: none; height: 100%; border: none; border-radius: 0; display: flex; flex-direction: column; }
  .palette-results { max-height: none; flex: 1; }
  .palette-close { display: inline-flex; }
}

/* ---------- 9. STATES ------------------------------------- */
.empty-state {
  border: 1px dashed var(--line-2); border-radius: var(--r-box);
  padding: var(--s7) var(--s5); text-align: center;
}
.empty-state h3,
.empty-state .empty-title { font-size: 15px; margin: 0 0 var(--s2); }
.empty-state p { color: var(--ink-2); font-size: 14.5px; max-width: 46ch; margin: 0 auto; }
.empty-state .cluster { justify-content: center; margin-top: var(--s5); }

.notice {
  border-left: 2px solid var(--line-2);
  background: var(--surface);
  padding: var(--s3) var(--s4);
  font-size: 14px; color: var(--ink-2);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
}
.notice b {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 3px;
}
.notice-warn { border-left-color: var(--warn); }
.notice-warn b { color: var(--warn); }

.skeleton {
  background: var(--surface-2); border-radius: var(--r-chip);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }

.field-error { color: var(--fail); font-size: 13.5px; font-family: var(--sans); margin-top: var(--s2); }

/* ---------- 10. FOOTER ------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s7) 0 var(--s8);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
}
.site-footer .shell { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.site-footer a { color: var(--ink-3); }
.site-footer a:hover { color: var(--ink-2); }
.site-footer nav { display: flex; gap: var(--s4); flex-wrap: wrap; }

/* ---------- 11. MOTION ------------------------------------ */
.btn, .card, .icon-btn, .palette-trigger, .w-item, .tag {
  transition: color 140ms ease, border-color 140ms ease,
              background-color 140ms ease, opacity 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cursor { animation: none; }
}