/* The page's fonts (SIL Open Font License 1.1, latin subset). Each file is loaded only when the page's
   font names its family. The 400-700 files are variable fonts; Bebas Neue and DM Serif Display have one
   weight (their bold is synthesised). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-400-700.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/montserrat-400-700.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/space-grotesk-400-700.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/playfair-display-400-700.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/lora-400-700.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/dm-serif-display-400.woff2) format("woff2"); }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/bebas-neue-400.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/oswald-400-700.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/caveat-400-700.woff2) format("woff2"); }

:root {
  --bg: #0f1115;
  --bg-end: #0f1115;
  /* on a computer, the colour around the page's card: the end colour with each channel x 0.72 (app.js
     sets it with the theme; this is #0f1115's) */
  --bg-frame: #0b0c0f;
  --text: #f2efe6;
  --btn: #c9a227;
  --btn-text: #15130d;
  --btn-soft: rgba(201, 162, 39, 0.18);
  --btn-glow: rgba(201, 162, 39, 0.7);
  --ttl-shadow: rgba(15, 17, 21, 0.6);
  --radius: 14px;
  --img-r: 10px;
  --th-r: 10px;
  --sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* app.js sets --font to the chosen family followed by var(--sys), and the three sizes (--ttl-size,
     --bio-size, --bt-size) only when the page gives them; unset, each rule below keeps its own size */
  --font: var(--sys);
}

*, *::before, *::after { box-sizing: border-box; }

/* The background and the phone's bars. A browser paints everything outside the page (the rubber-band
   overscroll at both ends, anything past the document's end, the area behind the bottom toolbar while
   the page ends) in ONE solid colour: html's background-color with body's laid over it - gradients and
   background images are never read. So html alone holds it, the END colour (bg2 with a gradient, else
   bg), and body paints NO background (a body colour would replace it, and a body background would also
   cover the layer below). */
html {
  background-color: var(--bg-end);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* The page background STAYS ON THE SCREEN and the content scrolls over it: a fixed layer as tall as the
   largest viewport (100lvh, so it does not resize as the browser's bars move), bg at the top of the
   screen, the end colour from the bottom of the smallest viewport (100svh) down. Its negative z-index
   keeps it under everything and keeps iOS from taking it for a bar colour. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-end);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-end) 100%);
}

/* a declaration holding var() is never dropped where 100svh is unknown (it would compute to no image
   at all), so the svh stop is gated */
@supports (height: 100svh) {
  body::before { background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-end) 100svh); }
}

/* The phone's bars. iOS 26 Safari ignores theme-color: it fills its status bar and the area behind its
   bottom toolbar with a sample of a fixed element hit at the middle of that edge (or a fixed ancestor
   of it) that is about as wide as the screen (90 % or more), or narrower but as tall as the screen (a
   sidebar), or an empty layer with a see-through background (a dimming layer) - unless that element is
   the size of the screen both ways with a negative z-index (this background layer, the Full Picture
   layer) or taller than 1.05 screens. Nothing on this page qualifies at either edge, so at rest both
   bars show the under-page colour (html's: the end colour) and while the page scrolls both show the
   page through their glass, as on Linktree; iOS 15-18 and Android read theme-color (the end colour,
   app.js). Anything else fixed under the middle of the top or the bottom edge must be under 90 % of the
   screen in BOTH width and height, or the size of the screen both ways with a negative z-index. */

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
}

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

/* page */
.hd { text-align: center; margin: 0 0 20px; }

.av {
  display: block;
  width: 96px;
  height: 96px;
  margin: 16px auto 16px;
  border-radius: 50%;
  object-fit: cover;
}

.av-ini {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn);
  color: var(--btn-text);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.ttl {
  margin: 0 0 8px;
  font-size: var(--ttl-size, 22px);
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bio {
  margin: 0;
  font-size: var(--bio-size, 15px);
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Full Picture: the photo edge to edge of the column, from the very top of the page (pulled up over the
   column's padding and the top safe-area inset: in a browser tab the inset is 0 and the photo starts
   right under the status bar; in a home-screen app it runs under the status bar), fading into the
   background over its lower 40 %, the name over its lower part. The photo itself is not in the page: it
   sits in a fixed layer (.hero-fx, below) that stays at the top of the SCREEN while the content scrolls
   over it, and the hero keeps its place with an empty box of the photo's exact size (.hero-sp), so at
   scroll 0 everything sits where it would with the photo in the page. Box and name share the hero's
   one grid cell: a name taller than the photo makes the hero grow DOWNWARD, never up under the status
   bar or off the top */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: calc(-20px - env(safe-area-inset-top, 0px)) -20px 0;
}

/* the photo's box - the spacer in the page and both pictures in the layer alike: the column's width,
   square, at most 70vh tall (a phone held sideways) */
.hero-sp, .hero-i, .hero-b {
  grid-area: 1 / 1;
  align-self: start;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 70vh;
}

.hero-i, .hero-b {
  object-fit: cover;
  /* cut down to 70vh, keep the upper part, where a face usually is */
  object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  /* only the opacity changes as the page scrolls: each picture on its own layer, so the blurred copy is
     drawn once and only its opacity changes on the GPU */
  will-change: opacity;
}

/* The layer: fixed, the WHOLE screen (the largest viewport, 100lvh, so it does not resize as the
   browser's bars move), behind the content - a child of #app, so it paints after body::before (both
   z-index -1 in the root stacking context): above the background, below everything else. It must be
   the whole screen: iOS 26 Safari fills its status bar with a still sample of a fixed element at the top
   edge as wide as the screen but shorter than it, and passes over one the size of the screen with a
   negative z-index. Its column (.hero-col), as wide as the page's column and centred like it, holds the
   photo twice in one grid cell: the sharp picture (.hero-i) and a blurred copy (.hero-b, aria-hidden,
   alt ""), scaled 1.2 from its top centre so the blur's soft side and bottom edges fall outside the box
   while its top stays at the top of the screen; the column's overflow:hidden clips the scaled copy, so
   it never widens the page. As the page scrolls, p = scroll / the hero's height (0..1): the sharp
   picture at opacity 1 - p, the blurred at 0.4 * p - the photo melts into the background and stays
   there, faint. Where the browser has scroll-driven animations the compositor runs it (below; app.js
   only sets --hero-h, the hero's height); elsewhere app.js sets both opacities from a scroll listener. */
.hero-fx {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-col {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

/* the mask is scaled with the picture, so its stops are the sharp picture's divided by 1.2: on screen
   the copy fades over the same 60-100 % of the layer and is fully transparent where the layer clips it
   (with the sharp picture's stops it would be cut off there at 42 % of its opacity, a hard line) */
.hero-b {
  opacity: 0;
  filter: blur(24px);
  transform: scale(1.2);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 83.333%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 83.333%);
}

/* The melt on the compositor (Safari 26.4 and Chrome 115 and later; Safari 26.0-26.3 run the same
   animation on the main thread): an animation driven by the window's scroll, not by the clock - from
   scroll 0 to the hero's height (--hero-h, set by app.js on the layer), held at either end; on a phone
   and in a computer's card alike. animation-timeline and animation-range come AFTER the animation
   shorthand, which resets them. The test asks for animation-range too: an engine without it would
   spread the melt over the whole page. app.js makes the same test once and then writes no opacity (an
   inline one would fight the animation) and listens to no scroll. */
@keyframes lb-melt-sharp { from { opacity: 1; } to { opacity: 0; } }

@keyframes lb-melt-blur { from { opacity: 0; } to { opacity: 0.4; } }

@supports (animation-timeline: scroll()) and (animation-range: 0px 1px) {
  .hero-i {
    animation: lb-melt-sharp linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px var(--hero-h, 390px);
  }
  .hero-b {
    animation: lb-melt-blur linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px var(--hero-h, 390px);
  }
}

/* 20 px from the column's sides, 4 px above the photo's bottom, wrapping upward; its top padding (the
   top safe-area inset - 0 in a browser tab - plus 8 px) only counts when the name is taller than the
   photo */
.hero-t {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 1;
  margin: 0 20px 4px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  font-size: var(--ttl-size, 32px);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 1px 2px var(--ttl-shadow), 0 0 18px var(--ttl-shadow);
}

.hd-full .bio { margin-top: 12px; }

/* without masks: an overlay from transparent to bg over the photo's lower 40 %, in the column with it */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .hero-col::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background-image: linear-gradient(180deg, transparent, var(--bg));
  }
}

/* On a computer (a wide window, a mouse) the page is a CARD: 40 px below the window's top, 480 px wide,
   centred, every corner rounded, a soft shadow, on a darker frame colour (html's). The card paints the
   gradient itself and scrolls with the page, so the fixed background layer is not shown. Its own
   stacking context (z-index 0) keeps the Full Picture layer (z-index -1) above the card's background;
   there the layer is not fixed and not the screen's height but the photo's: it sits in the card's top,
   edge to edge (the hero's -20 px margins reach the card's sides and top), clipped by its rounded
   corners, and scrolls away with it - the melt still follows the window's scroll. body is its own
   block formatting context, so the card's 40 px top margin does not leak through it and scroll a short
   page. Phones and touch tablets keep the layout above. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  html { background-color: var(--bg-frame); }
  body { display: flow-root; }
  body::before { display: none; }
  .wrap {
    position: relative;
    z-index: 0;
    margin: 40px auto;
    min-height: calc(100vh - 80px);
    border-radius: 24px;
    overflow: hidden;
    overflow: clip;
    background-color: var(--bg-end);
    background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-end) 100%);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  }
  .hero-fx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    z-index: -1;
  }
  .hero-col { max-width: none; }
}

.ics {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -4px -4px 16px;
  padding: 0;
}

.ics li { margin: 4px; }

.ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text);
  text-decoration: none;
}

.ic svg { display: block; width: 26px; height: 26px; }

.bts { list-style: none; margin: 0; padding: 0; }

.bts li + li { margin-top: 12px; }

.bt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 18px;
  border: 2px solid var(--btn);
  border-radius: var(--radius);
  background-color: var(--btn);
  color: var(--btn-text);
  font-family: inherit;
  font-size: var(--bt-size, 16px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

html[data-style="outline"] .bt { background-color: transparent; color: var(--text); }

html[data-style="soft"] .bt { background-color: var(--btn-soft); border-color: transparent; color: var(--text); }

.bt-t { min-width: 0; }

/* A button's picture is shown WHOLE (never cropped; a transparent picture stays transparent - nothing is
   painted behind it) and the img IS the picture: app.js gives it the picture's aspect ratio as --ar once
   it has loaded, and the img is sized from that, so its rounded corners are the picture's own corners,
   never an empty letterbox's. Until then --ar is the default and the width/height attributes hold the
   place. */

/* with an image: a 44 px slot at the left, the picture scaled to fit inside it and centred there (44 px
   wide, or 44 px tall when it is taller than wide), all four corners rounded; the title centred in the rest */
.bt-th { justify-content: flex-start; padding: 2px 16px 2px 2px; }

.bt-ths {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.bt-thi {
  display: block;
  width: min(44px, calc(44px * var(--ar, 1)));
  height: auto;
  border-radius: var(--th-r);
}

.bt-th .bt-t { flex: 1 1 auto; padding: 6px 0 6px 12px; text-align: center; }

/* featured: a card, the picture 8 px in from its top and sides at its OWN aspect ratio - as wide as that
   room, unless that would make it taller than 420 px: then 420 px tall, narrower, centred - all four
   corners rounded; the title under it (its own top padding is the gap) */
.bt-card { display: block; padding: 0; }

.bt-ci {
  display: block;
  width: min(calc(100% - 16px), calc(420px * var(--ar, 1.7778)));
  height: auto;
  margin: 8px auto 0;
  border-radius: var(--img-r);
}

.bt-card .bt-t { display: block; padding: 12px 16px 14px; font-size: var(--bt-size, 16px); font-weight: 700; }

/* featured without an image: a taller button, its label 1 px larger than a button's */
.bt-big { min-height: 72px; font-size: calc(var(--bt-size, 16px) + 1px); font-weight: 700; }

.bt:active, .ic:active { transform: scale(0.98); opacity: 0.88; }

/* motion: one class a-<name> per button; each plays in a loop with a rest, except electricity and orbit,
   which run gently all the time. All of it stops under reduced motion (the end of this file). */
.a-wiggle { animation: a-wiggle 3.5s ease-in-out infinite; }

@keyframes a-wiggle {
  0%, 17.2%, 100% { transform: rotate(0deg); }
  2.8% { transform: rotate(-3deg); }
  5.6% { transform: rotate(3deg); }
  8.4% { transform: rotate(-3deg); }
  11.2% { transform: rotate(3deg); }
  14% { transform: rotate(-2deg); }
}

.a-pop { animation: a-pop 3.5s ease-in-out infinite; }

@keyframes a-pop {
  0%, 14.3%, 100% { transform: scale(1); }
  7.1% { transform: scale(1.06); }
}

.a-electricity { animation: a-electricity 2s ease-in-out infinite; }

@keyframes a-electricity {
  0%, 100% { box-shadow: 0 0 3px 0 var(--btn-glow), 0 0 0 0 rgba(255, 255, 255, 0); }
  40% { box-shadow: 0 0 14px 3px var(--btn-glow), 0 0 4px 1px rgba(255, 255, 255, 0.6); }
  46% { box-shadow: 0 0 7px 1px var(--btn-glow), 0 0 1px 0 rgba(255, 255, 255, 0.3); }
  52% { box-shadow: 0 0 16px 4px var(--btn-glow), 0 0 5px 1px rgba(255, 255, 255, 0.7); }
}

.a-glitch { animation: a-glitch 3.5s steps(1, end) infinite; }

@keyframes a-glitch {
  0%, 11.5%, 100% { transform: none; text-shadow: none; }
  1.5% { transform: translate(-2px, 1px) skewX(-3deg); text-shadow: -2px 0 #ff2bd6, 2px 0 #19e3ff; }
  3% { transform: translate(2px, -1px) skewX(2deg); text-shadow: 2px 0 #ff2bd6, -2px 0 #19e3ff; }
  4.5% { transform: translate(-1px, 0) skewX(0deg); text-shadow: -1px 0 #ff2bd6, 1px 0 #19e3ff; }
  6% { transform: translate(1px, 1px) skewX(-2deg); text-shadow: 3px 0 #ff2bd6, -3px 0 #19e3ff; }
  7.5% { transform: translate(-2px, -1px) skewX(3deg); text-shadow: -2px 0 #ff2bd6, 2px 0 #19e3ff; }
  9% { transform: translate(1px, 0) skewX(-1deg); text-shadow: 1px 0 #ff2bd6, -1px 0 #19e3ff; }
}

/* these three hold transform for their whole cycle, which would beat the press scale of .bt:active */
.a-wiggle:active, .a-pop:active, .a-glitch:active { animation: none; }

/* scramble is drawn by app.js; while it runs the button keeps its height and clips the letters */
.a-scramble { overflow: hidden; }

@property --orbit-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.a-orbit { position: relative; }

.a-orbit::before {
  /* declared, so a browser without @property draws a still dot instead of a blinking one */
  --orbit-a: 0deg;
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background-image: conic-gradient(from var(--orbit-a), transparent 0deg, transparent 290deg, var(--btn-glow) 335deg, #fff 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: a-orbit 3s linear infinite;
}

@keyframes a-orbit { to { --orbit-a: 360deg; } }

.a-emoji { position: relative; }

.a-emoji::before, .a-emoji::after {
  content: attr(data-emoji);
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -12px;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  opacity: 0;
  pointer-events: none;
  animation: a-emoji 3s ease-out infinite;
}

.a-emoji::after { right: 36px; font-size: 16px; animation-name: a-emoji-b; animation-delay: 0.45s; }

@keyframes a-emoji {
  0% { opacity: 0; transform: translate(0, 4px) scale(0.6); }
  8% { opacity: 1; }
  45%, 100% { opacity: 0; transform: translate(-6px, -46px) scale(1.15); }
}

@keyframes a-emoji-b {
  0% { opacity: 0; transform: translate(0, 4px) scale(0.6); }
  8% { opacity: 0.9; }
  45%, 100% { opacity: 0; transform: translate(7px, -38px) scale(1.05); }
}

.a-shimmer { position: relative; overflow: hidden; }

/* the band starts 160 % of its width to the left: the skew moves its top edge right by about a sixth of
   the height, which on a tall card would otherwise show a wedge at the start of every cycle */
.a-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  pointer-events: none;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: a-shimmer 3.5s ease-in-out infinite;
}

@keyframes a-shimmer {
  0% { transform: translateX(-160%) skewX(-18deg); }
  25.7%, 100% { transform: translateX(340%) skewX(-18deg); }
}

a:focus, button:focus { outline: 3px solid var(--text); outline-offset: 3px; }

a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* states */
.msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.msg-t { margin: 0 0 20px; font-size: 17px; line-height: 1.4; }

.msg .bt { width: auto; min-width: 160px; }

/* loading */
.sk-av, .sk-l, .sk-b {
  background-color: rgba(255, 255, 255, 0.08);
  animation: sk-pulse 1.4s ease-in-out infinite;
}

.sk-av { width: 96px; height: 96px; margin: 16px auto 16px; border-radius: 50%; }

.sk-l { height: 14px; margin: 0 auto 10px; border-radius: 7px; }

.sk-l1 { width: 55%; height: 20px; }

.sk-l2 { width: 75%; margin-bottom: 28px; }

.sk-b { height: 52px; margin-bottom: 12px; border-radius: 14px; background-color: rgba(255, 255, 255, 0.06); }

@keyframes sk-pulse { 50% { opacity: 0.45; } }

/* the Full Picture melt is left out: it follows the reader's own scroll, not the clock (as the scroll
   listener did before it) */
@media (prefers-reduced-motion: reduce) {
  *:not(.hero-i):not(.hero-b), *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .bt:active, .ic:active { transform: none; }
  .a-orbit::before, .a-emoji::before, .a-emoji::after, .a-shimmer::after { content: none; }
}