/*
 * efr-home — the service directory.
 * Shares the elbflorace design language with efr-intel: 60% black / 30% white
 * / 10% orange, pure grays without blue tint. The token block, the shell, the
 * sidebar, the cards, the chips and the search box are the same rules as
 * efr-intelligence/frontend/public/css/style.css, so the two sites read as one
 * system. Everything under SERVICE TILES is new here.
 */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Surfaces — pure black/gray, no blue tint */
  --bg:   #0a0a0a;
  --s1:   #111111;   /* sidebar */
  --s2:   #161616;   /* card */
  --s3:   #1c1c1c;   /* elevated / hover */
  --s4:   #222222;   /* input, deepest */

  /* Borders */
  --b1: rgba(255,255,255,0.06);
  --b2: rgba(255,255,255,0.09);
  --b3: rgba(255,255,255,0.15);

  /* Text */
  --t1: #f0f0f0;
  --t2: #888888;
  --t3: #505050;

  /* Accent */
  --orange:     #ff630f;
  --orange-dim: #c44e0b;
  --orange-bg:  rgba(255,99,15,0.08);
  --orange-glow:rgba(255,99,15,0.18);

  /* Semantic */
  --danger: #ef4444;
  --ok:     #22c55e;
  --info:   #3b82f6;
  --warn:   #f59e0b;

  /* Layout */
  --sidebar-w: 224px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  /* Shadows */
  --sh1: 0 1px 3px rgba(0,0,0,.4);
  --sh2: 0 4px 16px rgba(0,0,0,.5);
  --sh3: 0 10px 36px rgba(0,0,0,.6);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--t1);
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--t1);
  line-height: 1.2;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }

/* ─── APP SHELL ──────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
}
#sidebar-root {
  width: var(--sidebar-w);
  flex-shrink: 0;
}
.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  min-width: 0;
  padding: 2rem 2.25rem;
  max-width: 1400px;
  width: 100%;
}

/* ─── SIDEBAR ────────────────────────────────────────────── */
.topbar-mobile { display: none; }
.sidebar-overlay { display: none; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--s1);
  border-right: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--b1) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sb-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.sb-brand img { height: 26px; width: auto; }
.sb-brand-text { display: flex; flex-direction: column; }
.sb-brand-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--t1);
  letter-spacing: -0.01em;
}
.sb-brand-title span { color: var(--orange); }
.sb-brand-sub {
  font-size: 0.7rem;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sb-section { padding: 1rem 0.75rem 0.25rem; }
.sb-section.grow { flex: 1; }
.sb-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t3);
  padding: 0 0.5rem;
  margin-bottom: 0.35rem;
  margin-top: 0.75rem;
}
.sb-section-label:first-child { margin-top: 0; }
.sb-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  color: var(--t2);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.sb-item:hover { background: rgba(255,255,255,0.04); color: var(--t1); box-shadow: none; }
.sb-item.active {
  background: var(--orange-bg);
  color: var(--orange);
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 2px;
  background: var(--orange);
  border-radius: 0 2px 2px 0;
}
.sb-item svg { flex-shrink: 0; opacity: 0.8; }
.sb-item.active svg { opacity: 1; }
/* Count of services in a category, right-aligned in the nav row. */
.sb-item .sb-count {
  margin-left: auto;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--t3);
  font-weight: 600;
}
.sb-item.active .sb-count { color: var(--orange); }
.sb-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--b1);
  flex-shrink: 0;
}
.sb-note {
  font-size: 0.7rem;
  color: var(--t3);
  line-height: 1.45;
  padding: 0 0.15rem;
}
.sb-note a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.sb-note a:hover { color: var(--orange); }

/* ─── PAGE HEADER ────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 { line-height: 1.15; }
.page-header h1 .accent { color: var(--orange); }
/* The welcome line. Held to a readable measure — a sentence running the full
   width of a desktop window is a sentence nobody finishes. */
.page-header .welcome {
  color: var(--t2);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  max-width: 56ch;
}
.page-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: border-color 0.15s;
}
.card:last-child { margin-bottom: 0; }
.card h2 { font-size: 1.05rem; margin-bottom: 0.35rem; }

/* ─── BUTTONS ────────────────────────────────────────────── */
button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
  text-decoration: none;
  white-space: nowrap;
  background: var(--orange);
  color: #000;
  border-color: var(--orange);
  font-family: inherit;
  width: auto;
}
button:hover, .btn:hover {
  background: var(--orange-dim);
  border-color: var(--orange-dim);
  box-shadow: 0 0 0 3px var(--orange-glow);
}
button:active, .btn:active { transform: scale(0.98); }
button.secondary, .btn.secondary {
  background: var(--s3);
  color: var(--t1);
  border-color: var(--b2);
}
button.secondary:hover, .btn.secondary:hover {
  background: var(--s4);
  border-color: var(--b3);
  box-shadow: none;
}
button.small, .btn.small { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

/* ─── FORMS & INPUTS ─────────────────────────────────────── */
input[type="search"], input[type="text"] {
  width: 100%;
  background: var(--s4);
  color: var(--t1);
  border: 1px solid var(--b2);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
input::placeholder { color: var(--t3); }
code {
  background: var(--s3);
  color: var(--t1);
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-size: 0.85em;
}
pre {
  background: var(--s4);
  border: 1px solid var(--b1);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code { background: none; padding: 0; font-size: 0.78rem; line-height: 1.6; }

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--s3);
  color: var(--t2);
  border: 1px solid var(--b2);
}
.badge.accent { color: var(--orange); background: var(--orange-bg); border-color: rgba(255,99,15,0.3); }
.badge.ok     { color: #86efac; background: rgba(22,163,74,0.14); border-color: rgba(22,163,74,0.35); }
.badge.warn   { color: #f4c26a; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
.badge.info   { color: #93c5fd; background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); }

/* ─── MUTED / EMPTY / DIVIDERS ───────────────────────────── */
.muted { color: var(--t2); font-size: 0.85rem; }
.dim   { color: var(--t3); }
.empty { color: var(--t3); text-align: center; padding: 2.5rem 1rem; font-size: 0.9rem; }
.divider { height: 1px; background: var(--b1); margin: 1rem 0; }

/* ─── FILTER CHIPS ───────────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  background: var(--s3);
  color: var(--t2);
  border: 1px solid var(--b2);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  white-space: nowrap;
  /* Comfortable to hit with a thumb. */
  min-height: 38px;
}
.chip:hover { background: var(--s4); color: var(--t1); box-shadow: none; border-color: var(--b3); }
.chip.selected {
  background: var(--orange-bg);
  color: var(--orange);
  border-color: rgba(255,99,15,0.35);
}
.chip .count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  opacity: 0.7;
  font-size: 0.75rem;
}

/* ─── SEARCH BOX ─────────────────────────────────────────── */
.search-slot { margin-bottom: 1rem; }
.search-bar { position: relative; }
.search-bar .search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  pointer-events: none;
}
.search-bar input[type="search"] { padding-left: 2.1rem; }
.search-bar input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  cursor: pointer;
  background: currentColor;
  color: var(--t3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-meta {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--t3);
}

/* ─── SECTION HEADS ──────────────────────────────────────── */
/* A category heading belongs to the tiles under it, so the space above opens
   up and the space below closes — proximity decides grouping. */
.sec-head {
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: 1rem;
}
.sec-head:first-of-type { margin-top: 0; }
/* Name and count on one line, the blurb on its own under them — both flush
   left, under each other, so the eye runs down a single edge instead of
   jumping to the far side of the window for a caption. */
.sec-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.sec-head h2 { font-size: 1rem; }
.sec-head .count { color: var(--t3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.sec-head .sec-note {
  color: var(--t3);
  font-size: 0.78rem;
  margin-top: 0.15rem;
  max-width: 60ch;
}

/* ─── SERVICE TILES ──────────────────────────────────────── */
/* One tile per service: favicon, title, description, host. The whole tile is
   the link — a link inside a link is not a thing HTML allows, so nothing else
   in it is clickable. min() lets a column shrink below its preferred width on
   a narrow screen; a bare minmax(260px, 1fr) cannot, and overflows instead. */
.svc-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  margin-bottom: 0.5rem;
}
.svc {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.35rem;
  align-items: start;
  padding: 1rem 1.1rem;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  color: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
  position: relative;
  min-width: 0;
}
.svc:hover {
  background: var(--s3);
  border-color: rgba(255,99,15,0.35);
}
.svc:hover .svc-name { color: var(--orange); }
.svc:active { transform: scale(0.995); }
.svc:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-glow);
}

/* The favicon. Anything a service ships — png, ico, svg — lands in the same
   rounded tile, so a wall of mismatched icons still lines up. */
.svc-icon {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  /* The artwork fills the tile bar a hairline of inset, so a logo reads as a
     logo rather than as a stamp floating in a box. Uploaded marks bring their
     own margins; anything more here and they shrink twice over. */
  padding: 5px;
  border-radius: var(--r-sm);
  background: var(--s4);
  border: 1px solid var(--b1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.svc-icon img {
  width: 100%;
  height: 100%;
  /* contain, not cover: a wordmark that is wider than it is tall keeps its
     proportions instead of being cropped to a square. */
  object-fit: contain;
  display: block;
}
/* Fallback when a service has no reachable favicon: its own initial, in the
   accent. Set by js/app.js on the image's error. */
.svc-icon.letter {
  background: var(--orange-bg);
  border-color: rgba(255,99,15,0.25);
  color: var(--orange);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.svc-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}
.svc-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--t1);
  letter-spacing: -0.01em;
  transition: color 0.15s;
  overflow-wrap: anywhere;
}
.svc-desc {
  grid-column: 2;
  color: var(--t2);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.svc-host {
  grid-column: 2;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--t3);
  overflow-wrap: anywhere;
}
/* External-link arrow, top right, quiet until the tile is hovered. */
.svc-out {
  position: absolute;
  top: 0.75rem;
  right: 0.8rem;
  color: var(--t3);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.svc:hover .svc-out, .svc:focus-visible .svc-out { opacity: 1; color: var(--orange); }

/* A service that is down for maintenance, or not yet live. Still listed —
   "does this exist?" is a question this page has to answer either way. */
.svc.off { opacity: 0.55; }
.svc.off:hover { opacity: 0.85; }

/* Nothing answers on that address yet, so the tile is a label, not a control:
   it must not light up, lift, or offer a cursor that promises a page. */
.svc.no-link { cursor: default; }
.svc.no-link:hover {
  background: var(--s2);
  border-color: var(--b1);
}
.svc.no-link:hover .svc-name { color: var(--t1); }
.svc.no-link:active { transform: none; }

.svc-hidden { display: none !important; }

/* ─── PAGE FOOT ──────────────────────────────────────────── */
/* Where a link comes from, for the handful of people who add them. */
.page-foot {
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: 2.5rem;
  max-width: 70ch;
}
.page-foot a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.page-foot a:hover { color: var(--orange); }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fade-in 0.2s ease; }
.slide-up { animation: slide-up 0.25s ease; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .content { padding: 1.5rem 1.25rem; }
}

@media (max-width: 768px) {
  #sidebar-root { width: 0; }
  .sidebar {
    left: -100%;
    transition: left 0.25s ease;
    z-index: 300;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
  .app-body { padding-top: 52px; }
  .topbar-mobile {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--s1);
    border-bottom: 1px solid var(--b1);
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    z-index: 200;
  }
  .topbar-mobile .mb-brand {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--t1);
  }
  .topbar-mobile .mb-brand span { color: var(--orange); }
  .topbar-mobile .mb-brand img { height: 22px; }
  .hamburger {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--t2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hamburger:hover { color: var(--t1); box-shadow: none; background: none; }

  .content { padding: 1rem 0.85rem; }
  .card { padding: 1rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; }

  /* Touch targets, and a 16px font so iOS stops zooming the page on focus. */
  input[type="search"], input[type="text"] { font-size: 16px; padding: 0.65rem 0.75rem; }
  button, .btn { padding: 0.65rem 1.1rem; min-height: 42px; }
  button.small, .btn.small { min-height: 36px; }

  .page-actions { width: 100%; }
  .page-actions > * { flex: 1 1 140px; min-width: 0; }
  .page-actions button, .page-actions .btn { width: 100%; justify-content: center; }

  /* The search box follows the reader down a long list — on a phone the whole
     directory is several screens of scrolling. It needs its own opaque fill
     and a little breathing room, or tiles show through as they slide under. */
  .search-slot {
    position: sticky;
    top: 52px;
    z-index: 50;
    background: var(--bg);
    padding: 0.6rem 0;
    margin-bottom: 0.6rem;
  }
  /* Which category you are scrolling through stays answerable without
     scrolling back: the heading holds under the search box until the next
     section pushes it out. */
  /* 134px = the 52px top bar plus the 82px the sticky search box occupies.
     A few pixels short and tiles show through the gap between the two. */
  .sec-head {
    position: sticky;
    top: 134px;
    z-index: 40;
    background: var(--bg);
    padding: 0.35rem 0;
    margin-top: 1.6rem;
    scroll-margin-top: 150px;
  }
  /* The category blurb is the first thing to go: a sticky heading has to stay
     one line tall, and the blurb says nothing the tiles under it do not. */
  .sec-head .sec-note { display: none; }
}

@media (max-width: 560px) {
  /* One tile per row: two would cut every description to a word a line. */
  .svc-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .svc {
    padding: 0.85rem 0.9rem;
    column-gap: 0.75rem;
    /* A whole tile is the tap target, so it gets a tap target's height. */
    min-height: 64px;
    align-content: center;
  }
  .svc-icon { width: 38px; height: 38px; padding: 4px; }
  /* The arrow is decoration on a tile that is entirely a tap target already. */
  .svc-out { display: none; }
  /* Two lines of description, then an ellipsis: a paragraph-long entry must
     not turn the list into a scroll marathon. The full text is one tap away
     anyway — at the service itself. */
  .svc-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .chip { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
  .page-header { margin-bottom: 1rem; }
  .page-header .welcome { font-size: 0.85rem; margin-top: 0.4rem; }
}

/* iPhones in landscape put the home indicator and the notch inside the
   viewport (viewport-fit=cover in the markup), so the shell keeps its own
   clear space rather than letting a tile end under the rounded corner. */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 768px) {
    .content {
      padding-left: max(0.85rem, env(safe-area-inset-left));
      padding-right: max(0.85rem, env(safe-area-inset-right));
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    .topbar-mobile {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
    .sidebar { padding-left: env(safe-area-inset-left); }
  }
}

/* A tap on a tile should look like the hover state, not like a blue flash the
   OS painted over it. */
@media (hover: none) {
  .svc, .chip, .sb-item, button, .btn { -webkit-tap-highlight-color: transparent; }
  a.svc:active { background: var(--s3); border-color: rgba(255,99,15,0.35); }
  .svc-out { opacity: 1; }
}

/* Somebody who has asked their phone to stop animating things means it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}