.txt-typewriter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);
  border-right: 0.08em solid var(--c);
  width: 0;
  /* 13 = number of characters in the text */
  animation: txt-typewriter-type 1.6s steps(13) forwards, txt-typewriter-caret 0.8s step-end infinite;}
@keyframes txt-typewriter-type {
  to { width: 13ch; }
}
@keyframes txt-typewriter-caret {
  50% { border-color: transparent; }
}

.txt-typewriter-loop {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);
  border-right: 0.08em solid var(--c);
  width: 0;
  /* 20 = number of characters in the text */
  animation: txt-typewriter-loop-type 2.4s steps(20) infinite alternate, txt-typewriter-loop-caret 0.8s step-end infinite;}
@keyframes txt-typewriter-loop-type {
  0%, 15%   { width: 0; }
  85%, 100% { width: 20ch; }
}
@keyframes txt-typewriter-loop-caret {
  50% { border-color: transparent; }
}

.txt-blinking-cursor-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  color: var(--c);}
.txt-blinking-cursor-text span {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--c);
  animation: txt-blinking-cursor-text-blink 1s steps(2, start) infinite;
}
@keyframes txt-blinking-cursor-text-blink {
  to { visibility: hidden; }
}

.txt-glitch {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  color: var(--c);
  letter-spacing: 0.05em;}
.txt-glitch::before,
.txt-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.txt-glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c8;
  animation: txt-glitch-a 2s infinite linear alternate-reverse;
}
.txt-glitch::after {
  left: -2px;
  text-shadow: 2px 0 #00fff9;
  animation: txt-glitch-b 3s infinite linear alternate-reverse;
}
@keyframes txt-glitch-a {
  0%   { clip-path: inset(20% 0 60% 0); }
  20%  { clip-path: inset(70% 0 10% 0); }
  40%  { clip-path: inset(10% 0 80% 0); }
  60%  { clip-path: inset(50% 0 30% 0); }
  80%  { clip-path: inset(80% 0 5% 0); }
  100% { clip-path: inset(30% 0 50% 0); }
}
@keyframes txt-glitch-b {
  0%   { clip-path: inset(60% 0 20% 0); }
  20%  { clip-path: inset(10% 0 70% 0); }
  40%  { clip-path: inset(80% 0 10% 0); }
  60%  { clip-path: inset(30% 0 50% 0); }
  80%  { clip-path: inset(5% 0 80% 0); }
  100% { clip-path: inset(50% 0 30% 0); }
}

.txt-neon-flicker {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 0.1em #fff, 0 0 0.3em var(--c), 0 0 0.8em var(--c), 0 0 1.6em var(--c);
  animation: txt-neon-flicker-buzz 3s infinite;}
@keyframes txt-neon-flicker-buzz {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
    text-shadow: 0 0 0.1em #fff, 0 0 0.3em var(--c), 0 0 0.8em var(--c), 0 0 1.6em var(--c);
  }
  20%, 24%, 55% {
    opacity: 0.6;
    text-shadow: none;
  }
}

.txt-outline-fill {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  /* a static font: variable system fonts overlap their contours, which a stroke shows */
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  color: transparent;
  letter-spacing: 0.06em;
  -webkit-text-stroke: 0.04em var(--c);
  paint-order: stroke fill;
  animation: txt-outline-fill-pulse 2.4s ease-in-out infinite alternate;}
@keyframes txt-outline-fill-pulse {
  to { color: var(--c); }
}

.txt-gradient {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #a855f7), color-mix(in srgb, var(--c) 40%, #ec4899), var(--c));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-gradient-flow 4s linear infinite;}
@keyframes txt-gradient-flow {
  to { background-position: 300% 0; }
}

.txt-rainbow {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #a855f7, #f43f5e);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-rainbow-cycle 3s linear infinite;}
@keyframes txt-rainbow-cycle {
  to { background-position: 200% 0; }
}

.txt-shimmer {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 45%, transparent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-shimmer-sweep 2s linear infinite;}
@keyframes txt-shimmer-sweep {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.txt-highlight-sweep {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline;
  background: linear-gradient(color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 45%, transparent)) no-repeat 0 85%;
  background-size: 0% 40%;
  animation: txt-highlight-sweep-draw 0.8s ease-out 0.4s forwards;}
@keyframes txt-highlight-sweep-draw {
  to { background-size: 100% 40%; }
}

.txt-fade-up {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  opacity: 0;
  animation: txt-fade-up-in 0.8s ease-out forwards;}
@keyframes txt-fade-up-in {
  from { opacity: 0; transform: translateY(0.6em); }
  to   { opacity: 1; transform: translateY(0); }
}

.txt-blur-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  opacity: 0;
  animation: txt-blur-in-focus 0.9s ease-out forwards;}
@keyframes txt-blur-in-focus {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: blur(0); }
}

.txt-tracking-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  opacity: 0;
  letter-spacing: 0.5em;
  animation: txt-tracking-in-contract 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;}
@keyframes txt-tracking-in-contract {
  from { opacity: 0; letter-spacing: 0.5em; }
  to   { opacity: 1; letter-spacing: 0.08em; }
}

.txt-letters-rise {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-letters-rise span {
  display: inline-block;
  opacity: 0;
  animation: txt-letters-rise-up 0.5s ease-out forwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes txt-letters-rise-up {
  from { opacity: 0; transform: translateY(0.6em); }
  to   { opacity: 1; transform: translateY(0); }
}

.txt-letters-pop {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-letters-pop span {
  display: inline-block;
  transform: scale(0);
  animation: txt-letters-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes txt-letters-pop-in {
  to { transform: scale(1); }
}

.txt-flip-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  opacity: 0;
  transform-origin: 50% 0;
  animation: txt-flip-in-drop 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards;}
@keyframes txt-flip-in-drop {
  from { opacity: 0; transform: perspective(20em) rotateX(-90deg); }
  to   { opacity: 1; transform: perspective(20em) rotateX(0); }
}

.txt-pop-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  opacity: 0;
  animation: txt-pop-in-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
@keyframes txt-pop-in-scale {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.txt-clip-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  clip-path: inset(0 100% 0 0);
  animation: txt-clip-reveal-wipe 0.9s cubic-bezier(0.7, 0, 0.3, 1) forwards;}
@keyframes txt-clip-reveal-wipe {
  to { clip-path: inset(0 0 0 0); }
}

.txt-curtain-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 0 0.15em;
  color: var(--c);
  opacity: 0;
  animation: txt-curtain-reveal-show 0.01s linear 0.45s forwards;}
.txt-curtain-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  animation: txt-curtain-reveal-sweep 0.9s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes txt-curtain-reveal-show {
  to { opacity: 1; }
}
@keyframes txt-curtain-reveal-sweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.txt-mask-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-mask-reveal > span {
  display: block;
  overflow: hidden;
}
.txt-mask-reveal > span > span {
  display: block;
  transform: translateY(110%);
  animation: txt-mask-reveal-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.txt-mask-reveal > span:nth-child(2) > span { animation-delay: 0.15s; }
.txt-mask-reveal > span:nth-child(3) > span { animation-delay: 0.3s; }
@keyframes txt-mask-reveal-up {
  to { transform: translateY(0); }
}

.txt-stroke-draw {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 10em;
  overflow: visible;}
.txt-stroke-draw text {
  font: inherit;
  font-size: 64px;
  fill: var(--c);
  fill-opacity: 0;
  stroke: var(--c);
  stroke-width: 1.5;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: txt-stroke-draw-line 2s ease-out forwards, txt-stroke-draw-fill 0.6s ease-out 1.6s forwards;
}
@keyframes txt-stroke-draw-line {
  to { stroke-dashoffset: 0; }
}
@keyframes txt-stroke-draw-fill {
  to { fill-opacity: 1; }
}

.txt-wave {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-wave span {
  display: inline-block;
  animation: txt-wave-rise 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 80ms);
}
@keyframes txt-wave-rise {
  0%, 40%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-0.35em); }
}

.txt-marquee {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  width: 20em;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  color: var(--c);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}
.txt-marquee span {
  flex-shrink: 0;
  animation: txt-marquee-scroll 12s linear infinite;
}
@keyframes txt-marquee-scroll {
  to { transform: translateX(-100%); }
}

.txt-word-rotate {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  gap: 0.3em;
  color: inherit;}
.txt-word-rotate-words {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  color: var(--c);
}
.txt-word-rotate-words span {
  display: block;
  animation: txt-word-rotate-cycle 6s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@keyframes txt-word-rotate-cycle {
  0%, 25%   { transform: translateY(0); }
  33%, 58%  { transform: translateY(-1.2em); }
  66%, 91%  { transform: translateY(-2.4em); }
  100%      { transform: translateY(-3.6em); }
}

@property --txt-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-count-up {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  counter-reset: txt-n var(--txt-n);
  animation: txt-count-up-tick 2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;}
.txt-count-up::after {
  content: counter(txt-n) "+";
}
@keyframes txt-count-up-tick {
  to { --txt-n: 500; }
}

.txt-blink {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.08em;
  animation: txt-blink-flash 1.2s steps(2, start) infinite;}
@keyframes txt-blink-flash {
  to { visibility: hidden; }
}

.txt-long-shadow {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.06em;
  animation: txt-long-shadow-breathe 2.4s ease-in-out infinite alternate;}
@keyframes txt-long-shadow-breathe {
  from {
    text-shadow:
      0.02em 0.02em 0 color-mix(in srgb, var(--c) 60%, transparent),
      0.04em 0.04em 0 color-mix(in srgb, var(--c) 45%, transparent),
      0.06em 0.06em 0 color-mix(in srgb, var(--c) 30%, transparent);
  }
  to {
    text-shadow:
      0.05em 0.05em 0 color-mix(in srgb, var(--c) 60%, transparent),
      0.10em 0.10em 0 color-mix(in srgb, var(--c) 45%, transparent),
      0.15em 0.15em 0 color-mix(in srgb, var(--c) 30%, transparent);
  }
}

.txt-jello {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  transform-origin: center;
  animation: txt-jello-wobble 3s ease infinite;}
@keyframes txt-jello-wobble {
  0%, 30%, 100% { transform: skewX(0) skewY(0); }
  8%   { transform: skewX(-12deg) skewY(-12deg); }
  12%  { transform: skewX(6deg) skewY(6deg); }
  16%  { transform: skewX(-3deg) skewY(-3deg); }
  20%  { transform: skewX(1.5deg) skewY(1.5deg); }
  24%  { transform: skewX(-0.5deg) skewY(-0.5deg); }
}

.txt-shake {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: #dc2626;
  font-weight: 600;
  animation: txt-shake-no 0.5s ease-in-out;}
@keyframes txt-shake-no {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-0.25em); }
  40%, 80% { transform: translateX(0.25em); }
}

.txt-float {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  animation: txt-float-bob 3s ease-in-out infinite;}
@keyframes txt-float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.2em); }
}

.txt-pulse-scale {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  animation: txt-pulse-scale-beat 2s ease-in-out infinite;}
@keyframes txt-pulse-scale-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.txt-terminal-typing-effect {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: 11em;
  overflow: hidden;
  border-radius: 0.35em;
  background: #0d1117;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, #30363d), 0 0.3em 0.8em -0.3em rgb(0 0 0 / 0.4);}
.txt-terminal-typing-effect-bar {
  display: flex;
  gap: 0.16em;
  padding: 0.28em 0.32em;
  background: #161b22;
}
.txt-terminal-typing-effect-bar i {
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: #ff5f57;
}
.txt-terminal-typing-effect-bar i:nth-child(2) { background: #febc2e; }
.txt-terminal-typing-effect-bar i:nth-child(3) { background: #28c840; }
.txt-terminal-typing-effect-body {
  padding: 0.7em 0.9em 0.9em;
  font-size: 0.5em;
  line-height: 1.6;
}
.txt-terminal-typing-effect-body p {
  margin: 0;
  white-space: nowrap;
}
.txt-terminal-typing-effect-cmd::before {
  content: "$ ";
  color: var(--c);
}
.txt-terminal-typing-effect-typed {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0;
  /* 14 = characters in the command */
  animation: txt-terminal-typing-effect-type 1.3s steps(14) 0.5s forwards;
}
.txt-terminal-typing-effect-caret {
  display: inline-block;
  vertical-align: top;
  width: 1ch;
  height: 1.25em;
  margin-top: 0.18em;
  background: var(--c);
  /* blinks, stays solid while typing, then hands over to the next prompt */
  animation: txt-terminal-typing-effect-hold 2.1s step-end forwards;
}
.txt-terminal-typing-effect-out {
  opacity: 0;
  color: #8b949e;
  animation: txt-terminal-typing-effect-print 0s var(--t) forwards;
}
.txt-terminal-typing-effect-out b {
  color: var(--c);
  font-weight: inherit;
}
.txt-terminal-typing-effect-out .txt-terminal-typing-effect-caret {
  animation: txt-terminal-typing-effect-blink 1s step-end infinite;
}
/* 99.9% as well as 100%: a stepped animation squeezed to near-zero length
   (reduced motion) can stop one step short of 100% */
@keyframes txt-terminal-typing-effect-type {
  99.9%, to { width: 14ch; }
}
@keyframes txt-terminal-typing-effect-hold {
  0%, 24% { opacity: 1; }
  12%, 90%, 100% { opacity: 0; }
}
@keyframes txt-terminal-typing-effect-print {
  to { opacity: 1; }
}
@keyframes txt-terminal-typing-effect-blink {
  50% { opacity: 0; }
}

.txt-multi-line-typewriter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: calc(18ch + 0.1em);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;}
.txt-multi-line-typewriter-line {
  display: block;
  box-sizing: content-box;
  width: 0;
  overflow: hidden;
  white-space: pre;
  border-right: 0.07em solid transparent;
  /* --n = characters in the line, --d = when it starts, --hold = how long it keeps the caret */
  animation:
    txt-multi-line-typewriter-type calc(var(--n) * 75ms) steps(var(--n)) var(--d) forwards,
    txt-multi-line-typewriter-caret var(--hold) step-end var(--d);
}
.txt-multi-line-typewriter-line:first-child {
  color: var(--c);
}
.txt-multi-line-typewriter-line:last-child {
  animation:
    txt-multi-line-typewriter-type calc(var(--n) * 75ms) steps(var(--n)) var(--d) forwards,
    txt-multi-line-typewriter-blink 0.9s step-end var(--d) infinite;
}
@keyframes txt-multi-line-typewriter-type {
  99.9%, to { width: calc(var(--n) * 1ch); }
}
@keyframes txt-multi-line-typewriter-caret {
  0%, 100% { border-right-color: var(--c); }
}
@keyframes txt-multi-line-typewriter-blink {
  0% { border-right-color: var(--c); }
  50% { border-right-color: transparent; }
}

.txt-code-typing-animation {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  overflow: hidden;
  border-radius: 0.3em;
  background: #0d1117;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, #30363d);}
.txt-code-typing-animation-tab {
  display: inline-block;
  padding: 0.35em 0.9em;
  font-size: 0.4em;
  color: #8b949e;
  background: #161b22;
  box-shadow: inset 0 0.12em 0 var(--c);
}
.txt-code-typing-animation-code {
  position: relative;
  box-sizing: content-box;
  /* gutter + the longest line, so the editor keeps its size while typing */
  width: calc(3.5ch + 23ch + 0.2em);
  padding: 0.6em 1.4em 0.7em 0;
  font-size: 0.5em;
  line-height: 1.7;
  counter-reset: txt-code-typing-animation-n;
}
/* the active-line highlight steps down as each line starts */
.txt-code-typing-animation-code::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  right: 0;
  height: 1.7em;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0.15em 0 0 var(--c);
  animation: txt-code-typing-animation-row 3.3s step-end forwards;
}
.txt-code-typing-animation-ln {
  position: relative;
  display: block;
  white-space: pre;
}
.txt-code-typing-animation-ln::before {
  counter-increment: txt-code-typing-animation-n;
  content: counter(txt-code-typing-animation-n);
  display: inline-block;
  width: 2ch;
  margin-right: 1.5ch;
  text-align: right;
  color: #6e7681;
}
.txt-code-typing-animation-t {
  display: inline-block;
  vertical-align: top;
  box-sizing: content-box;
  width: 0;
  overflow: hidden;
  border-right: 0.12em solid transparent;
  animation:
    txt-code-typing-animation-type calc(var(--n) * 55ms) steps(var(--n)) var(--d) forwards,
    txt-code-typing-animation-caret var(--hold) step-end var(--d);
}
.txt-code-typing-animation-ln:last-child .txt-code-typing-animation-t {
  animation:
    txt-code-typing-animation-type calc(var(--n) * 55ms) steps(var(--n)) var(--d) forwards,
    txt-code-typing-animation-blink 1s step-end var(--d) infinite;
}
.txt-code-typing-animation-k { color: color-mix(in srgb, var(--c) 65%, #fff); }
.txt-code-typing-animation-f { color: #d2a8ff; }
.txt-code-typing-animation-s { color: #7ee787; }
@keyframes txt-code-typing-animation-type {
  99.9%, to { width: calc(var(--n) * 1ch); }
}
@keyframes txt-code-typing-animation-caret {
  0%, 100% { border-right-color: var(--c); }
}
@keyframes txt-code-typing-animation-blink {
  0% { border-right-color: var(--c); }
  50% { border-right-color: transparent; }
}
@keyframes txt-code-typing-animation-row {
  0% { transform: translateY(0); }
  60.6% { transform: translateY(100%); }
  100% { transform: translateY(200%); }
}

.txt-ai-code-autocomplete {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  box-sizing: border-box;
  min-width: 13em;
  padding: 0.7em 1em;
  border-radius: 0.6em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.5);
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);}
.txt-ai-code-autocomplete p {
  margin: 0;
  white-space: pre;
}
.txt-ai-code-autocomplete-k {
  color: var(--c);
}
.txt-ai-code-autocomplete-typed {
  display: inline-block;
  vertical-align: top;
  width: 0;
  overflow: hidden;
  /* 20 = characters in the first line */
  animation: txt-ai-code-autocomplete-type 1.1s steps(20) 0.3s forwards;
}
.txt-ai-code-autocomplete-caret {
  display: inline-block;
  vertical-align: top;
  width: 0.12em;
  height: 1.2em;
  margin-top: 0.25em;
  background: var(--c);
  animation:
    txt-ai-code-autocomplete-blink 1s step-end 1.4s infinite,
    txt-ai-code-autocomplete-off 0s 3.1s forwards;
}
.txt-ai-code-autocomplete-end {
  visibility: hidden;
  animation:
    txt-ai-code-autocomplete-on 0s 3.1s forwards,
    txt-ai-code-autocomplete-blink 1s step-end 3.1s infinite;
}
/* ghost text: faint and italic, then accepted */
.txt-ai-code-autocomplete-ghost {
  opacity: 0;
  font-style: italic;
  animation: txt-ai-code-autocomplete-ghost 1.4s ease-out 1.7s forwards;
}
.txt-ai-code-autocomplete-ghost .txt-ai-code-autocomplete-k {
  color: inherit;
  animation: txt-ai-code-autocomplete-accept 0s 3.1s forwards;
}
.txt-ai-code-autocomplete-tab {
  display: inline-block;
  margin-left: 1.2ch;
  padding: 0 0.45em;
  border-radius: 0.3em;
  font: inherit;
  font-size: 0.75em;
  line-height: 1.6;
  vertical-align: 0.1em;
  color: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
  opacity: 0;
  animation: txt-ai-code-autocomplete-press 1.5s ease-out 1.8s forwards;
}
@keyframes txt-ai-code-autocomplete-type {
  99.9%, to { width: 20ch; }
}
@keyframes txt-ai-code-autocomplete-blink {
  50% { opacity: 0; }
}
@keyframes txt-ai-code-autocomplete-off {
  to { visibility: hidden; }
}
@keyframes txt-ai-code-autocomplete-on {
  to { visibility: visible; }
}
@keyframes txt-ai-code-autocomplete-ghost {
  0% { opacity: 0; }
  18%, 90% { opacity: 0.4; font-style: italic; }
  100% { opacity: 1; font-style: normal; }
}
@keyframes txt-ai-code-autocomplete-accept {
  to { color: var(--c); }
}
@keyframes txt-ai-code-autocomplete-press {
  0% { opacity: 0; transform: translateY(0.3em); }
  15%, 70% { opacity: 1; transform: none; }
  78% { transform: scale(0.85); color: #fff; background: var(--c); }
  86% { opacity: 1; transform: none; color: #fff; background: var(--c); }
  100% { opacity: 0; transform: none; }
}

.txt-typo-backspace-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: calc(13ch + 0.2em);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--c);
  text-align: left;}
.txt-typo-backspace-typing-t {
  white-space: pre;
}
.txt-typo-backspace-typing-t > span {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0;
  /* room for the squiggle under the letters */
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}
.txt-typo-backspace-typing-ok {
  animation: txt-typo-backspace-typing-ok 0.81s steps(9) 0.3s forwards;
}
.txt-typo-backspace-typing-typo {
  text-decoration: underline wavy transparent;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.18em;
  animation:
    txt-typo-backspace-typing-typo 1.81s linear 1.11s forwards,
    txt-typo-backspace-typing-squiggle 0.2s ease-out 1.9s forwards;
}
.txt-typo-backspace-typing-fix {
  animation: txt-typo-backspace-typing-fix 0.4s steps(4) 3.1s forwards;
}
.txt-typo-backspace-typing-t > .txt-typo-backspace-typing-caret {
  width: 0.08em;
  height: 1.1em;
  margin-top: 0.05em;
  padding: 0;
  margin-bottom: 0;
  background: currentColor;
  animation: txt-typo-backspace-typing-blink 1s step-end infinite;
}
@keyframes txt-typo-backspace-typing-ok {
  99.9%, to { width: 9ch; }
}
/* type 4 letters, wait, then backspace all 4 */
@keyframes txt-typo-backspace-typing-typo {
  0% { width: 0; animation-timing-function: steps(4); }
  19.89%, 82.32% { width: 4ch; animation-timing-function: steps(4); }
  99.9%, 100% { width: 0; }
}
@keyframes txt-typo-backspace-typing-squiggle {
  to { text-decoration-color: #ef4444; }
}
@keyframes txt-typo-backspace-typing-fix {
  99.9%, to { width: 4ch; }
}
@keyframes txt-typo-backspace-typing-blink {
  50% { opacity: 0; }
}

.txt-typewriter-with-pauses {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: calc(18ch + 0.2em);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  text-align: left;
  white-space: pre;}
.txt-typewriter-with-pauses-t {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0;
  animation: txt-typewriter-with-pauses-type 3.3s linear 0.3s forwards;
}
.txt-typewriter-with-pauses-caret {
  display: inline-block;
  vertical-align: top;
  width: 0.09em;
  height: 1.05em;
  margin-top: 0.08em;
  background: var(--c);
  animation:
    txt-typewriter-with-pauses-think 3.6s step-end,
    txt-typewriter-with-pauses-blink 1s step-end 3.6s infinite;
}
/* "So" fast, three slow dots, a pause, " what's", a pause, " next?" */
@keyframes txt-typewriter-with-pauses-type {
  0% { width: 0; animation-timing-function: steps(2); }
  6.06% { width: 2ch; animation-timing-function: steps(3); }
  37.88%, 50% { width: 5ch; animation-timing-function: steps(7); }
  69.7%, 83.33% { width: 12ch; animation-timing-function: steps(6); }
  99.9%, 100% { width: 18ch; }
}
/* solid while typing, a blink in each pause */
@keyframes txt-typewriter-with-pauses-think {
  0%, 8.3%, 54.2%, 84.7% { opacity: 1; }
  4%, 47.2%, 76.4% { opacity: 0; }
}
@keyframes txt-typewriter-with-pauses-blink {
  50% { opacity: 0; }
}

.txt-typewriter-any-font {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  margin: 0;
  padding-left: 0.2em;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;}
.txt-typewriter-any-font::before {
  content: "“";
  position: absolute;
  left: -0.4em;
  top: -0.2em;
  font-size: 2em;
  font-style: normal;
  line-height: 1;
  color: var(--c);
}
/* caret before the first key */
.txt-typewriter-any-font-t::before {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin-right: -0.06em;
  vertical-align: -0.1em;
  background: var(--c);
  animation: txt-typewriter-any-font-gone 0s 0.4s forwards;
}
.txt-typewriter-any-font-t span {
  position: relative;
  opacity: 0;
  animation: txt-typewriter-any-font-key 0s calc(0.4s + var(--i) * 80ms) forwards;
}
/* each letter owns the caret for one beat */
.txt-typewriter-any-font-t span::after {
  content: "";
  position: absolute;
  top: 0.15em;
  bottom: 0.05em;
  right: -0.05em;
  width: 0.06em;
  background: var(--c);
  opacity: 0;
  animation: txt-typewriter-any-font-caret 80ms step-end calc(0.4s + var(--i) * 80ms);
}
.txt-typewriter-any-font-t span:last-child::after {
  animation: txt-typewriter-any-font-blink 1s step-end calc(0.4s + var(--i) * 80ms) infinite;
}
@keyframes txt-typewriter-any-font-gone {
  to { visibility: hidden; }
}
@keyframes txt-typewriter-any-font-key {
  to { opacity: 1; }
}
@keyframes txt-typewriter-any-font-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-typewriter-any-font-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

.txt-smooth-caret-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  width: calc(13ch + 0.2em);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  text-align: left;
  white-space: pre;}
.txt-smooth-caret-typing-t {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0;
  /* 13 characters, one every 100ms */
  animation: txt-smooth-caret-typing-type 1.3s steps(13, jump-start) 0.4s forwards;
}
.txt-smooth-caret-typing-caret {
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 0.08em;
  height: 1em;
  border-radius: 0.04em;
  background: var(--c);
  /* translate jumps one ch per key; transform starts each jump 1ch behind and eases it in */
  animation:
    txt-smooth-caret-typing-step 1.3s steps(13, jump-start) 0.4s forwards,
    txt-smooth-caret-typing-glide 0.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.4s 13 forwards,
    txt-smooth-caret-typing-fade 0.5s ease-in-out 1.9s infinite alternate;
}
@keyframes txt-smooth-caret-typing-type {
  to { width: 13ch; }
}
@keyframes txt-smooth-caret-typing-step {
  to { translate: 13ch; }
}
@keyframes txt-smooth-caret-typing-glide {
  from { transform: translateX(-1ch); }
  to { transform: translateX(0); }
}
@keyframes txt-smooth-caret-typing-fade {
  0%, 40% { opacity: 1; }
  100% { opacity: 0.05; }
}

.txt-ai-streaming-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  max-width: 11em;
  margin: 0;
  font-size: calc(var(--txt-size, 32px) * 0.8);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;}
.txt-ai-streaming-text span {
  position: relative;
  animation: txt-ai-streaming-text-in 0.35s ease-out calc(0.3s + var(--i) * 0.14s) both;
}
/* the dot rides on the newest word */
.txt-ai-streaming-text span::after {
  content: "";
  position: absolute;
  top: 0.5em;
  right: -0.7em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: txt-ai-streaming-text-dot 0.14s step-end calc(0.5s + var(--i) * 0.14s);
}
.txt-ai-streaming-text span:last-child::after {
  animation: txt-ai-streaming-text-done 1.4s ease-in-out calc(0.5s + var(--i) * 0.14s) forwards;
}
@keyframes txt-ai-streaming-text-in {
  0% { color: transparent; text-shadow: 0 0 0.3em transparent; }
  35% { color: transparent; text-shadow: 0 0 0.25em color-mix(in srgb, var(--c) 75%, transparent); }
}
@keyframes txt-ai-streaming-text-dot {
  0%, 100% { opacity: 1; }
}
@keyframes txt-ai-streaming-text-done {
  0% { opacity: 1; transform: scale(1); }
  30% { transform: scale(0.6); }
  60%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}

.txt-typewriter-carriage-return {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  width: 24ch;
  height: 3.45em;
  overflow: hidden;
  font-family: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
/* the scale under the typing line: a tick every character, a long one every five */
.txt-typewriter-carriage-return::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2.8em;
  height: 0.3em;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 45%, transparent) 0 1px, transparent 1px 5ch) top / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 22%, transparent) 0 1px, transparent 1px 1ch) top / 100% 50% no-repeat;
}
/* the typing point, which rings at the end of a line */
.txt-typewriter-carriage-return::after {
  content: "";
  position: absolute;
  left: 18.5ch;
  top: 3.12em;
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.15em;
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: txt-typewriter-carriage-return-ding 0.4s ease-out 1.4s;
}
/* the paper: its left edge starts at the typing point */
.txt-typewriter-carriage-return-paper {
  position: absolute;
  top: 1.45em;
  left: 18ch;
  animation: txt-typewriter-carriage-return-carriage 3.7s linear forwards;
}
.txt-typewriter-carriage-return-line {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: pre;
  animation: txt-typewriter-carriage-return-a 1.1s steps(11) 0.3s forwards;
}
.txt-typewriter-carriage-return-line + .txt-typewriter-carriage-return-line {
  color: var(--c);
  animation: txt-typewriter-carriage-return-b 1.2s steps(12) 2.5s forwards;
}
@keyframes txt-typewriter-carriage-return-a {
  99.9%, to { width: 11ch; }
}
@keyframes txt-typewriter-carriage-return-b {
  99.9%, to { width: 12ch; }
}
/* type (paper steps left), ding, return and line feed, type again */
@keyframes txt-typewriter-carriage-return-carriage {
  0%, 8.11% { transform: translate(0, 0); animation-timing-function: steps(11); }
  37.84%, 47.3% { transform: translate(-11ch, 0); animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
  60.81%, 67.57% { transform: translate(0, -1.3em); animation-timing-function: steps(12); }
  99.9%, 100% { transform: translate(-12ch, -1.3em); }
}
@keyframes txt-typewriter-carriage-return-ding {
  40% { transform: translateY(-0.12em) scale(1.7); }
}

.txt-chat-bubble-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.45em;
  font-size: calc(var(--txt-size, 32px) * 0.75);
  font-weight: 500;
  line-height: 1.3;}
.txt-chat-bubble-typing-avatar {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 700;
  color: #fff;
  background: var(--c);
}
.txt-chat-bubble-typing-bubble {
  position: relative;
  isolation: isolate;
  display: grid;
  margin: 0;
  padding: 0.5em 0.85em;
  transform-origin: 0 100%;
  animation: txt-chat-bubble-typing-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
/* the bubble fill starts just wide enough for the dots, then opens up */
.txt-chat-bubble-typing-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 1em 1em 1em 0.3em;
  background: color-mix(in srgb, currentColor 10%, transparent);
  clip-path: inset(0 calc(100% - 3.3em) 0 0 round 1em 1em 1em 0.3em);
  animation: txt-chat-bubble-typing-open 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 1.55s forwards;
}
.txt-chat-bubble-typing-dots,
.txt-chat-bubble-typing-msg {
  grid-area: 1 / 1;
}
.txt-chat-bubble-typing-dots {
  display: flex;
  align-items: center;
  gap: 0.22em;
  animation: txt-chat-bubble-typing-hide 0.15s linear 1.55s forwards;
}
.txt-chat-bubble-typing-dots i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 45%, transparent);
  animation: txt-chat-bubble-typing-bounce 0.9s ease-in-out infinite;
}
.txt-chat-bubble-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.txt-chat-bubble-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
.txt-chat-bubble-typing-msg {
  white-space: nowrap;
  animation: txt-chat-bubble-typing-msg 0.35s ease-out 1.75s both;
}
@keyframes txt-chat-bubble-typing-pop {
  from { opacity: 0; transform: scale(0.5); }
}
@keyframes txt-chat-bubble-typing-open {
  to { clip-path: inset(0 0 0 0 round 1em 1em 1em 0.3em); }
}
@keyframes txt-chat-bubble-typing-hide {
  to { opacity: 0; }
}
@keyframes txt-chat-bubble-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-0.2em); opacity: 1; }
}
@keyframes txt-chat-bubble-typing-msg {
  from { opacity: 0; transform: translateY(0.3em); }
}

.txt-ai-prompt-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  box-sizing: border-box;
  width: 17em;
  padding: 0.4em 0.4em 0.4em 0.8em;
  border-radius: 99em;
  font-size: calc(var(--txt-size, 32px) * 0.62);
  font-weight: 500;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);}
.txt-ai-prompt-typing-spark {
  display: block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: var(--c);
  animation: txt-ai-prompt-typing-twinkle 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 2s;
}
.txt-ai-prompt-typing-field {
  display: grid;
  flex: 1;
  white-space: nowrap;
  text-align: left;
}
.txt-ai-prompt-typing-ph,
.txt-ai-prompt-typing-t {
  grid-area: 1 / 1;
}
.txt-ai-prompt-typing-ph {
  color: color-mix(in srgb, currentColor 45%, transparent);
  animation: txt-ai-prompt-typing-gone 0s 0.5s forwards;
}
.txt-ai-prompt-typing-t span {
  position: relative;
  opacity: 0;
  animation: txt-ai-prompt-typing-key 0s calc(0.5s + var(--i) * 50ms) forwards;
}
/* each letter holds the caret for one beat; the last one keeps it */
.txt-ai-prompt-typing-t span::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.05em;
  right: -0.06em;
  width: 0.08em;
  background: var(--c);
  opacity: 0;
  animation: txt-ai-prompt-typing-caret 50ms step-end calc(0.5s + var(--i) * 50ms);
}
.txt-ai-prompt-typing-t span:last-child::after {
  animation: txt-ai-prompt-typing-blink 1s step-end calc(0.5s + var(--i) * 50ms) infinite;
}
.txt-ai-prompt-typing-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  color: color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  animation: txt-ai-prompt-typing-ready 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.95s forwards;
}
.txt-ai-prompt-typing-send svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes txt-ai-prompt-typing-gone {
  to { visibility: hidden; }
}
@keyframes txt-ai-prompt-typing-key {
  to { opacity: 1; }
}
@keyframes txt-ai-prompt-typing-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-ai-prompt-typing-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes txt-ai-prompt-typing-ready {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); color: #fff; background: var(--c); }
}
@keyframes txt-ai-prompt-typing-twinkle {
  50% { transform: rotate(45deg) scale(1.25); }
}

.txt-search-placeholder-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  min-width: 26ch;
  padding: 0.6em 1.1em 0.6em 0.9em;
  border-radius: 99em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.6);
  font-weight: 500;
  white-space: pre;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);}
.txt-search-placeholder-typing-icon {
  display: block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.6em;
  fill: none;
  stroke: color-mix(in srgb, currentColor 55%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.txt-search-placeholder-typing-label {
  margin-right: 1ch;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
/* the phrases overlap, so this box is as wide as the one being typed */
.txt-search-placeholder-typing-words {
  display: inline-grid;
  color: var(--c);
}
.txt-search-placeholder-typing-words span {
  grid-area: 1 / 1;
  width: 0;
  overflow: hidden;
  /* every phrase is 12 characters; each gets a 3s slot of the 9s loop */
  animation: txt-search-placeholder-typing-type 9s linear infinite;
}
/* the first phrase rests fully typed, which is what reduced motion shows */
.txt-search-placeholder-typing-words span:nth-child(1) { width: 12ch; }
/* negative delays start the others mid-cycle, already empty */
.txt-search-placeholder-typing-words span:nth-child(2) { animation-delay: -6s; }
.txt-search-placeholder-typing-words span:nth-child(3) { animation-delay: -3s; }
.txt-search-placeholder-typing-caret {
  width: 0.1em;
  height: 1.15em;
  background: var(--c);
  animation: txt-search-placeholder-typing-blink 1s step-end infinite;
}
@keyframes txt-search-placeholder-typing-type {
  0% { width: 0; animation-timing-function: steps(12); }
  13%, 25% { width: 12ch; animation-timing-function: steps(12); }
  30%, 100% { width: 0; }
}
@keyframes txt-search-placeholder-typing-blink {
  50% { opacity: 0; }
}

.txt-vintage-typewriter-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: color-mix(in srgb, var(--c) 80%, currentColor);}
.txt-vintage-typewriter-text-t span {
  display: inline-block;
  animation: txt-vintage-typewriter-text-strike 0.24s cubic-bezier(0.2, 0.9, 0.3, 1) calc(0.3s + var(--i) * 105ms + var(--late, 0ms)) both;
}
/* worn typebars: a few letters sit high, low or tilted, and some ink lighter */
.txt-vintage-typewriter-text-t span:nth-child(3n) { --y: 0.035em; --r: -2deg; }
.txt-vintage-typewriter-text-t span:nth-child(4n + 1) { --y: -0.03em; --r: 1.5deg; }
.txt-vintage-typewriter-text-t span:nth-child(5n + 2) { --ink: 0.7; }
.txt-vintage-typewriter-text-t span:nth-child(7n) { --ink: 0.82; --r: 2.5deg; }
.txt-vintage-typewriter-text-t span:nth-child(n + 6) { --late: 70ms; }
.txt-vintage-typewriter-text-t span:nth-child(n + 11) { --late: 140ms; }
@keyframes txt-vintage-typewriter-text-strike {
  0% {
    opacity: 0;
    transform: translateY(-0.25em) scale(1.35) rotate(var(--r, 0deg));
  }
  45% {
    opacity: 1;
    transform: translateY(0.04em) scale(0.95) rotate(var(--r, 0deg));
    text-shadow: 0 0 0.08em currentColor;
  }
  100% {
    opacity: var(--ink, 1);
    transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
    text-shadow: 0.015em 0 0.02em currentColor;
  }
}

.txt-sticky-note-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  width: 8.5em;
  padding: 0.9em 1em 0.7em;
  font-family: "Marker Felt", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: calc(var(--txt-size, 32px) * 0.72);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  color: #3b3322;
  background:
    repeating-linear-gradient(transparent 0 calc(1.6em - 1px), rgb(59 51 34 / 0.14) calc(1.6em - 1px) 1.6em) 0 0.9em / 100% calc(100% - 1.6em) no-repeat,
    #fde68a;
  border-radius: 0.1em 0.1em 0.5em 0.1em;
  box-shadow: 0 0.5em 0.8em -0.5em rgb(0 0 0 / 0.35);
  transform: rotate(-2deg);}
/* a strip of tape in the accent color */
.txt-sticky-note-typing::before {
  content: "";
  position: absolute;
  top: -0.35em;
  left: 50%;
  width: 3em;
  height: 0.8em;
  margin-left: -1.5em;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  transform: rotate(3deg);
}
.txt-sticky-note-typing-line {
  display: block;
  white-space: nowrap;
}
.txt-sticky-note-typing-t span span {
  position: relative;
  opacity: 0;
  animation: txt-sticky-note-typing-key 0s calc(0.3s + var(--i) * 90ms) forwards;
}
.txt-sticky-note-typing-t span span::after {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.15em;
  right: -0.06em;
  width: 0.07em;
  background: var(--c);
  opacity: 0;
  animation: txt-sticky-note-typing-caret 90ms step-end calc(0.3s + var(--i) * 90ms);
}
.txt-sticky-note-typing-line:last-child span:last-child::after {
  animation: txt-sticky-note-typing-blink 1s step-end calc(0.3s + var(--i) * 90ms) infinite;
}
@keyframes txt-sticky-note-typing-key {
  to { opacity: 1; }
}
@keyframes txt-sticky-note-typing-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-sticky-note-typing-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

.txt-command-palette-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: 13em;
  overflow: hidden;
  border-radius: 0.7em;
  font-size: calc(var(--txt-size, 32px) * 0.56);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent), 0 0.6em 1.2em -0.8em rgb(0 0 0 / 0.3);}
.txt-command-palette-typing-input {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 0.8em;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 12%, transparent);
}
.txt-command-palette-typing-icon {
  display: block;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: color-mix(in srgb, currentColor 50%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.txt-command-palette-typing-q {
  flex: 1;
  white-space: nowrap;
}
.txt-command-palette-typing-q span span {
  position: relative;
  opacity: 0;
  animation: txt-command-palette-typing-key 0s calc(0.4s + var(--i) * 0.15s) forwards;
}
.txt-command-palette-typing-q span span::after {
  content: "";
  position: absolute;
  top: 0.05em;
  bottom: 0;
  right: -0.07em;
  width: 0.08em;
  background: var(--c);
  opacity: 0;
  animation: txt-command-palette-typing-caret 0.15s step-end calc(0.4s + var(--i) * 0.15s);
}
.txt-command-palette-typing-q span span:last-child::after {
  animation: txt-command-palette-typing-blink 1s step-end calc(0.4s + var(--i) * 0.15s) infinite;
}
.txt-command-palette-typing-kbd {
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
  font: inherit;
  font-size: 0.75em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.txt-command-palette-typing-list {
  margin: 0;
  padding: 0.35em;
  list-style: none;
}
.txt-command-palette-typing-row {
  display: flex;
  align-items: center;
  height: 2em;
  padding: 0 0.6em;
  border-radius: 0.4em;
  animation: txt-command-palette-typing-dim 0.4s cubic-bezier(0.3, 0.9, 0.3, 1) 0.75s forwards;
}
.txt-command-palette-typing-row:first-child { --to: translateY(100%); }
.txt-command-palette-typing-hit {
  animation: txt-command-palette-typing-rise 0.4s cubic-bezier(0.3, 0.9, 0.3, 1) 0.75s forwards;
}
.txt-command-palette-typing mark {
  margin-left: 0.3em;
  color: inherit;
  background: none;
  animation: txt-command-palette-typing-match 0.3s ease-out 1.15s forwards;
}
.txt-command-palette-typing-enter {
  margin-left: auto;
  opacity: 0;
  color: var(--c);
  animation: txt-command-palette-typing-key 0.3s ease-out 1.3s forwards;
}
@keyframes txt-command-palette-typing-key {
  to { opacity: 1; }
}
@keyframes txt-command-palette-typing-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-command-palette-typing-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes txt-command-palette-typing-dim {
  to { opacity: 0.45; transform: var(--to, none); }
}
@keyframes txt-command-palette-typing-rise {
  to { transform: translateY(-100%); background: color-mix(in srgb, var(--c) 14%, transparent); }
}
@keyframes txt-command-palette-typing-match {
  to { color: var(--c); font-weight: 700; }
}

.txt-url-bar-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  box-sizing: border-box;
  width: 15em;
  overflow: hidden;
  padding: 0.6em 1em;
  border-radius: 99em;
  font-size: calc(var(--txt-size, 32px) * 0.62);
  font-weight: 500;
  text-align: left;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);}
.txt-url-bar-typing-lock {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.txt-url-bar-typing-field {
  display: grid;
  white-space: nowrap;
}
.txt-url-bar-typing-ph,
.txt-url-bar-typing-t {
  grid-area: 1 / 1;
}
.txt-url-bar-typing-ph {
  color: color-mix(in srgb, currentColor 45%, transparent);
  animation: txt-url-bar-typing-gone 0s 0.4s forwards;
}
.txt-url-bar-typing-t > span:not(.txt-url-bar-typing-sel) {
  position: relative;
  opacity: 0;
  animation: txt-url-bar-typing-key 0s calc(0.45s + var(--i) * 0.16s) forwards;
}
.txt-url-bar-typing-t > span:not(.txt-url-bar-typing-sel)::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.05em;
  right: -0.06em;
  width: 0.08em;
  background: var(--c);
  opacity: 0;
  animation: txt-url-bar-typing-caret 0.16s step-end calc(0.45s + var(--i) * 0.16s);
}
/* the browser's suggestion: selected text, accepted on Enter */
.txt-url-bar-typing-sel {
  visibility: hidden;
  border-radius: 0.15em;
  animation:
    txt-url-bar-typing-show 0s 0.95s forwards,
    txt-url-bar-typing-accept 1.2s ease-out 0.95s both;
}
.txt-url-bar-typing-load {
  position: absolute;
  left: 1.2em;
  right: 1.2em;
  bottom: 0;
  height: 0.14em;
  border-radius: 0.1em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  animation: txt-url-bar-typing-load 1.1s cubic-bezier(0.3, 0.6, 0.3, 1) 2.2s forwards;
}
@keyframes txt-url-bar-typing-gone {
  to { visibility: hidden; }
}
@keyframes txt-url-bar-typing-key {
  to { opacity: 1; }
}
@keyframes txt-url-bar-typing-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-url-bar-typing-show {
  to { visibility: visible; }
}
@keyframes txt-url-bar-typing-accept {
  0%, 85% { color: #fff; background: var(--c); }
}
@keyframes txt-url-bar-typing-load {
  0% { transform: scaleX(0); opacity: 1; }
  80% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.txt-otp-code-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  gap: 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.8);
  font-variant-numeric: tabular-nums;}
.txt-otp-code-typing-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.7em;
  border-radius: 0.3em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  outline: 0.1em solid transparent;
  outline-offset: 0.08em;
  /* box i has focus for one beat, then the whole row confirms */
  animation:
    txt-otp-code-typing-focus 0.32s step-end calc(0.3s + var(--i) * 0.32s),
    txt-otp-code-typing-done 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) calc(2.45s + var(--i) * 60ms) forwards;
}
.txt-otp-code-typing-box::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 50%;
  width: 0.07em;
  margin-left: -0.035em;
  background: var(--c);
  visibility: hidden;
  animation: txt-otp-code-typing-caret 0.32s step-end calc(0.3s + var(--i) * 0.32s);
}
.txt-otp-code-typing-box b {
  font-weight: 700;
  animation: txt-otp-code-typing-digit 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.62s + var(--i) * 0.32s) both;
}
@keyframes txt-otp-code-typing-focus {
  0%, 100% { outline-color: color-mix(in srgb, var(--c) 45%, transparent); }
}
@keyframes txt-otp-code-typing-caret {
  0%, 100% { visibility: visible; }
}
@keyframes txt-otp-code-typing-digit {
  from { opacity: 0; transform: translateY(0.3em) scale(0.6); }
}
@keyframes txt-otp-code-typing-done {
  50% { transform: translateY(-0.15em); }
  to {
    color: var(--c);
    background: color-mix(in srgb, var(--c) 10%, transparent);
    box-shadow: inset 0 0 0 1px var(--c);
  }
}

.txt-password-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  gap: 0.5em;
  width: 9.5em;
  font-size: calc(var(--txt-size, 32px) * 0.7);
  font-weight: 600;
  text-align: left;}
.txt-password-typing-field {
  display: flex;
  align-items: center;
  height: 2em;
  padding: 0 0.8em;
  border-radius: 0.45em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
.txt-password-typing-field span {
  position: relative;
  display: inline-block;
  width: 1.1ch;
  text-align: center;
}
/* the typed letter shows briefly... */
.txt-password-typing-field b {
  font-weight: inherit;
  animation: txt-password-typing-char 0.55s ease-out calc(0.3s + var(--i) * 0.18s) both;
}
/* ...then a dot takes its place */
.txt-password-typing-field span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.42em;
  height: 0.42em;
  margin: -0.21em 0 0 -0.21em;
  border-radius: 50%;
  background: currentColor;
  animation: txt-password-typing-dot 0.2s ease-out calc(0.7s + var(--i) * 0.18s) both;
}
.txt-password-typing-meter {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.75em;
}
.txt-password-typing-bars {
  display: flex;
  flex: 1;
  gap: 0.25em;
}
.txt-password-typing-bars i {
  flex: 1;
  height: 0.3em;
  border-radius: 0.15em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  animation: txt-password-typing-bar 0.25s ease-out var(--t) forwards;
}
.txt-password-typing-label {
  display: grid;
  width: 3.4em;
  color: var(--c);
}
.txt-password-typing-label em {
  grid-area: 1 / 1;
  font-style: normal;
  visibility: hidden;
  animation: txt-password-typing-label calc(var(--b) - var(--a)) step-end var(--a);
}
.txt-password-typing-label em:last-child {
  animation: txt-password-typing-stay 0s var(--a) forwards;
}
@keyframes txt-password-typing-char {
  0% { opacity: 0; transform: translateY(0.3em); }
  25%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.4); }
}
@keyframes txt-password-typing-dot {
  from { opacity: 0; transform: scale(0.2); }
}
@keyframes txt-password-typing-bar {
  to { background: var(--c); }
}
@keyframes txt-password-typing-label {
  0%, 100% { visibility: visible; }
}
@keyframes txt-password-typing-stay {
  to { visibility: visible; }
}

@property --txt-character-counter-typing-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
.txt-character-counter-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  gap: 0.35em;
  box-sizing: border-box;
  width: 15em;
  padding: 0.75em 0.9em 0.6em;
  border-radius: 0.6em;
  font-size: calc(var(--txt-size, 32px) * 0.6);
  font-weight: 500;
  text-align: left;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  /* 18 characters: the width, the counter and the ring all step together */
  animation: txt-character-counter-typing-count 1.44s steps(18) 0.4s forwards;}
.txt-character-counter-typing-label {
  font-size: 0.75em;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.txt-character-counter-typing-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  white-space: pre;
}
.txt-character-counter-typing-t {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: calc(var(--txt-character-counter-typing-n) * 1ch);
}
.txt-character-counter-typing-caret {
  display: inline-block;
  vertical-align: top;
  width: 0.09em;
  height: 1.1em;
  margin-top: 0.05em;
  background: var(--c);
  animation: txt-character-counter-typing-blink 1s step-end infinite;
}
.txt-character-counter-typing-count {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4em;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 60%, transparent);
  counter-reset: txt-character-counter-typing-c var(--txt-character-counter-typing-n);
}
.txt-character-counter-typing-count::before {
  content: counter(txt-character-counter-typing-c) " / 50";
}
.txt-character-counter-typing-count i {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  /* 7.2deg = one character of 50 */
  background: conic-gradient(var(--c) calc(var(--txt-character-counter-typing-n) * 7.2deg), color-mix(in srgb, currentColor 15%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 55%, #000 58%);
  mask: radial-gradient(farthest-side, transparent 55%, #000 58%);
}
@keyframes txt-character-counter-typing-count {
  99.9%, to { --txt-character-counter-typing-n: 18; }
}
@keyframes txt-character-counter-typing-blink {
  50% { opacity: 0; }
}

.txt-terminal-boot-sequence {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.5);
  font-weight: 500;
  line-height: 1.55;
  text-align: left;}
.txt-terminal-boot-sequence p {
  margin: 0;
  white-space: pre;
  color: color-mix(in srgb, currentColor 80%, transparent);
  clip-path: inset(0 100% 0 0);
  /* each line prints left to right in a few jerky steps */
  animation: txt-terminal-boot-sequence-print 0.22s steps(6) calc(0.3s + var(--i) * 0.42s) forwards;
}
.txt-terminal-boot-sequence p:first-child {
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.txt-terminal-boot-sequence b {
  font-weight: 700;
  color: var(--c);
}
.txt-terminal-boot-sequence-caret {
  display: inline-block;
  width: 1ch;
  height: 0.14em;
  background: var(--c);
  animation: txt-terminal-boot-sequence-blink 0.9s step-end infinite;
}
@keyframes txt-terminal-boot-sequence-print {
  99.9%, to { clip-path: inset(0 0 0 0); }
}
@keyframes txt-terminal-boot-sequence-blink {
  50% { opacity: 0; }
}

.txt-scrolling-terminal-log {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  overflow: hidden;
  border-radius: 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.48);
  font-weight: 500;
  text-align: left;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);}
.txt-scrolling-terminal-log-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1em;
  font-size: 0.85em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 12%, transparent);
}
.txt-scrolling-terminal-log-head i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c);
  animation: txt-scrolling-terminal-log-live 1.5s ease-in-out infinite;
}
/* four rows tall; older rows fade out at the top */
.txt-scrolling-terminal-log-view {
  height: 6em;
  margin: 0.4em 1em 0.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 35%);
  mask-image: linear-gradient(transparent, #000 35%);
}
.txt-scrolling-terminal-log-feed {
  animation: txt-scrolling-terminal-log-scroll 4.5s infinite;
}
.txt-scrolling-terminal-log p {
  margin: 0;
  line-height: 1.5;
  white-space: pre;
}
.txt-scrolling-terminal-log b {
  color: var(--c);
}
/* row 4+k types during 0.9s beat k of the loop, then stays until the loop wraps */
.txt-scrolling-terminal-log-new {
  animation: txt-scrolling-terminal-log-type 4.5s calc(var(--k) * 0.9s) infinite;
}
.txt-scrolling-terminal-log-next {
  clip-path: inset(0 100% 0 0);
  animation: none;
}
@keyframes txt-scrolling-terminal-log-type {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(24); }
  12%, 100% { clip-path: inset(0 0 0 0); }
}
/* hold while a row types, then scroll up one row; 100% equals 0% */
@keyframes txt-scrolling-terminal-log-scroll {
  0%, 17% { transform: translateY(0); animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
  20%, 37% { transform: translateY(-1.5em); animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
  40%, 57% { transform: translateY(-3em); animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
  60%, 77% { transform: translateY(-4.5em); animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
  80%, 97% { transform: translateY(-6em); animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
  100% { transform: translateY(-7.5em); }
}
@keyframes txt-scrolling-terminal-log-live {
  50% { opacity: 0.3; }
}

.txt-receipt-printing-animation {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.46);
  font-weight: 600;}
.txt-receipt-printing-animation-slot {
  position: relative;
  z-index: 1;
  width: 15em;
  height: 0.7em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 55%, #111827);
  box-shadow: inset 0 -0.2em 0 rgb(0 0 0 / 0.35);
}
.txt-receipt-printing-animation-window {
  margin-top: -0.35em;
  padding: 0 0.6em 0.9em;
  overflow: hidden;
}
.txt-receipt-printing-animation-paper {
  position: relative;
  width: 12em;
  padding: 0.9em 1em 0.6em;
  color: #1f2937;
  background: #fff;
  box-shadow: 0 0.2em 0.5em rgb(0 0 0 / 0.12);
  transform: translateY(-105%);
  /* the feed moves in ten jerky steps */
  animation: txt-receipt-printing-animation-feed 2.4s steps(10) 0.3s forwards;
}
/* torn zigzag bottom edge */
.txt-receipt-printing-animation-paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.4em;
  background: conic-gradient(from -45deg at 50% 100%, #fff 90deg, transparent 0) 0 0 / 0.8em 100% repeat-x;
}
.txt-receipt-printing-animation p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  line-height: 1.6;
}
.txt-receipt-printing-animation-head {
  justify-content: center;
  margin-bottom: 0.3em;
  letter-spacing: 0.1em;
  color: var(--c);
}
.txt-receipt-printing-animation-total {
  margin-top: 0.3em;
  padding-top: 0.3em;
  font-weight: 800;
  border-top: 1px dashed rgb(31 41 55 / 0.4);
}
@keyframes txt-receipt-printing-animation-feed {
  99.9%, to { transform: translateY(0); }
}

.txt-select-and-retype-loop {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  justify-items: start;
  white-space: nowrap;}
/* each phrase owns 3s of a 6s loop */
.txt-select-and-retype-loop-phrase {
  position: relative;
  isolation: isolate;
  grid-area: 1 / 1;
  animation: txt-select-and-retype-loop-life 6s step-end infinite;
}
/* delays are negative (slot + beat - 6s) so every element starts mid-cycle and
   the base styles are the readable state that reduced motion falls back to */
.txt-select-and-retype-loop-phrase + .txt-select-and-retype-loop-phrase {
  --slot: 3s;
  visibility: hidden;
  animation-delay: -3s;
}
/* the selection highlight sweeps from the end back to the start */
.txt-select-and-retype-loop-phrase::before {
  content: "";
  position: absolute;
  inset: 0.05em -0.04em;
  z-index: -1;
  border-radius: 0.1em;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  transform: scaleX(0);
  transform-origin: right;
  animation: txt-select-and-retype-loop-select 6s var(--slot, 0s) infinite;
}
.txt-select-and-retype-loop-phrase span {
  position: relative;
  animation: txt-select-and-retype-loop-key 6s step-end calc(var(--slot, 0s) + 0.2s + var(--i) * 80ms - 6s) infinite;
}
.txt-select-and-retype-loop-phrase span::after {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.08em;
  right: -0.05em;
  width: 0.07em;
  background: var(--c);
  opacity: 0;
  animation: txt-select-and-retype-loop-caret 6s step-end calc(var(--slot, 0s) + 0.2s + var(--i) * 80ms - 6s) infinite;
}
.txt-select-and-retype-loop-phrase span:last-child::after {
  animation-name: txt-select-and-retype-loop-wait;
}
@keyframes txt-select-and-retype-loop-life {
  0% { visibility: visible; }
  43.33% { visibility: hidden; }
}
@keyframes txt-select-and-retype-loop-key {
  0% { opacity: 1; }
  40% { opacity: 0; }
}
@keyframes txt-select-and-retype-loop-caret {
  0% { opacity: 1; }
  1.33% { opacity: 0; }
}
/* the last letter keeps the caret, blinking, until the selection starts */
@keyframes txt-select-and-retype-loop-wait {
  0% { opacity: 1; }
  6% { opacity: 0; }
  9% { opacity: 1; }
  12.33% { opacity: 0; }
}
@keyframes txt-select-and-retype-loop-select {
  0%, 31.67% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  38.33%, 43.33% { transform: scaleX(1); }
  43.34%, 100% { transform: scaleX(0); }
}

.txt-typing-test-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;}
.txt-typing-test-text-line {
  position: relative;
}
.txt-typing-test-text-ghost,
.txt-typing-test-text-typed {
  white-space: pre;
}
.txt-typing-test-text-ghost {
  color: color-mix(in srgb, currentColor 28%, transparent);
}
.txt-typing-test-text-typed {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  /* 19 characters at a brisk 65ms each */
  animation: txt-typing-test-text-type 1.24s steps(19) 0.5s forwards;
}
.txt-typing-test-text-caret {
  position: absolute;
  top: 0.12em;
  left: 0;
  width: 0.08em;
  height: 1em;
  border-radius: 0.04em;
  background: var(--c);
  animation:
    txt-typing-test-text-move 1.24s steps(19) 0.5s forwards,
    txt-typing-test-text-fade 0.5s ease-in-out 1.9s infinite alternate;
}
.txt-typing-test-text-stats {
  font-family: system-ui, sans-serif;
  font-size: 0.5em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  animation: txt-typing-test-text-stats 0.4s ease-out 1.9s both;
}
.txt-typing-test-text-stats b {
  margin-left: 0.3em;
  font-size: 1.5em;
  color: var(--c);
}
.txt-typing-test-text-stats b:first-child {
  margin-left: 0;
}
@keyframes txt-typing-test-text-type {
  99.9%, to { width: 19ch; }
}
@keyframes txt-typing-test-text-move {
  99.9%, to { transform: translateX(19ch); }
}
@keyframes txt-typing-test-text-fade {
  0%, 40% { opacity: 1; }
  100% { opacity: 0.1; }
}
@keyframes txt-typing-test-text-stats {
  from { opacity: 0; transform: translateY(0.6em); }
}

.txt-terminal-spinner-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--txt-size, 32px) * 0.6);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;}
.txt-terminal-spinner-text p {
  margin: 0;
  white-space: pre;
}
.txt-terminal-spinner-text-done {
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.txt-terminal-spinner-text b {
  font-weight: inherit;
  color: var(--c);
}
.txt-terminal-spinner-text-spin {
  display: inline-block;
  vertical-align: top;
  width: 1ch;
  height: 1.6em;
  overflow: hidden;
  /* regular weight: heavier weights fall back to a braille font that also draws the empty dots */
  font-weight: 400;
  color: var(--c);
}
/* ten frames, one per line of a 1ch-wide column */
.txt-terminal-spinner-text-spin span {
  display: block;
  width: 1ch;
  word-break: break-all;
  white-space: normal;
  animation: txt-terminal-spinner-text-frames 0.8s steps(10) infinite;
}
.txt-terminal-spinner-text-pkg {
  color: color-mix(in srgb, currentColor 45%, transparent);
}
.txt-terminal-spinner-text-names {
  display: inline-block;
  vertical-align: top;
  height: 1.6em;
  overflow: hidden;
}
/* seven names, one per line; steps(7) shows each in turn and wraps to the first */
.txt-terminal-spinner-text-names span {
  display: block;
  animation: txt-terminal-spinner-text-names 2.8s steps(7) infinite;
}
@keyframes txt-terminal-spinner-text-frames {
  to { transform: translateY(-16em); }
}
@keyframes txt-terminal-spinner-text-names {
  to { transform: translateY(-11.2em); }
}

.txt-mention-chip-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: calc(var(--txt-size, 32px) * 0.85);
  font-weight: 600;
  white-space: nowrap;}
.txt-mention-chip-typing-t span:not([class]) {
  position: relative;
  opacity: 0;
  animation: txt-mention-chip-typing-key 0s calc(0.3s + var(--i) * 80ms + var(--x, 0s)) forwards;
}
.txt-mention-chip-typing-t span:not([class])::after {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.05em;
  right: -0.05em;
  width: 0.07em;
  background: var(--c);
  opacity: 0;
  animation: txt-mention-chip-typing-caret 80ms step-end calc(0.3s + var(--i) * 80ms + var(--x, 0s));
}
/* the caret waits on the last letter of the name while the menu is open */
.txt-mention-chip-typing-at span:nth-child(5)::after {
  animation-duration: 0.73s;
}
.txt-mention-chip-typing-t > span:last-child::after {
  animation: txt-mention-chip-typing-blink 1s step-end calc(0.3s + var(--i) * 80ms + var(--x, 0s)) infinite;
}
.txt-mention-chip-typing-at {
  position: relative;
  border-radius: 0.3em;
  animation: txt-mention-chip-typing-chip 0.25s ease-out 1.93s forwards;
}
.txt-mention-chip-typing-menu {
  position: absolute;
  top: 130%;
  left: -0.2em;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.7em 0.35em 0.4em;
  border-radius: 0.5em;
  font-size: 0.6em;
  font-weight: 500;
  color: currentColor;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
  opacity: 0;
  transform-origin: 0 0;
  animation: txt-mention-chip-typing-menu 0.9s ease-out 1.15s both;
}
.txt-mention-chip-typing-menu i {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent));
}
@keyframes txt-mention-chip-typing-key {
  to { opacity: 1; }
}
@keyframes txt-mention-chip-typing-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-mention-chip-typing-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes txt-mention-chip-typing-menu {
  0% { opacity: 0; transform: translateY(-0.3em) scale(0.95); }
  15%, 70% { opacity: 1; transform: none; background: color-mix(in srgb, currentColor 7%, transparent); }
  80%, 88% { opacity: 1; transform: none; background: color-mix(in srgb, var(--c) 22%, transparent); }
  100% { opacity: 0; transform: none; }
}
@keyframes txt-mention-chip-typing-chip {
  to {
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, transparent);
    box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--c) 15%, transparent);
  }
}

.txt-glowing-typewriter-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.02em;}
.txt-glowing-typewriter-text span span {
  animation: txt-glowing-typewriter-text-cool 1.1s cubic-bezier(0.2, 0.6, 0.3, 1) calc(0.3s + var(--i) * 75ms) both;
}
@keyframes txt-glowing-typewriter-text-cool {
  0% {
    opacity: 0;
    color: color-mix(in srgb, var(--c) 30%, #fff);
    text-shadow: 0 0 0.1em var(--c), 0 0 0.4em var(--c), 0 0 0.9em var(--c);
  }
  6% {
    opacity: 1;
    color: color-mix(in srgb, var(--c) 30%, #fff);
    text-shadow: 0 0 0.1em var(--c), 0 0 0.4em var(--c), 0 0 0.9em var(--c);
  }
  100% {
    opacity: 1;
    color: var(--c);
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  }
}

.txt-someone-is-typing-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: calc(var(--txt-size, 32px) * 0.75);
  font-weight: 500;
  color: color-mix(in srgb, currentColor 60%, transparent);}
.txt-someone-is-typing-text-dots {
  display: inline-flex;
  gap: 0.18em;
}
.txt-someone-is-typing-text-dots i {
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--c);
  animation: txt-someone-is-typing-text-bounce 1s infinite;
}
.txt-someone-is-typing-text-dots i:nth-child(1) { animation-delay: -0.3s; }
.txt-someone-is-typing-text-dots i:nth-child(2) { animation-delay: -0.15s; }
@keyframes txt-someone-is-typing-text-bounce {
  0%, 100% { transform: translateY(-0.3em); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

.txt-strikethrough-typing {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-strikethrough-typing-t span span,
.txt-strikethrough-typing-t > span:not([class]) {
  position: relative;
  opacity: 0;
  animation: txt-strikethrough-typing-key 0s calc(0.3s + var(--i) * 75ms + var(--x, 0s)) forwards;
}
.txt-strikethrough-typing-t span span::after,
.txt-strikethrough-typing-t > span:not([class])::after {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.05em;
  right: -0.05em;
  width: 0.06em;
  background: var(--c);
  opacity: 0;
  animation: txt-strikethrough-typing-caret 75ms step-end calc(0.3s + var(--i) * 75ms + var(--x, 0s));
}
/* the caret waits after "loud" while it gets struck out */
.txt-strikethrough-typing-old span:last-child::after {
  animation-duration: 0.9s;
}
.txt-strikethrough-typing-new span:last-child::after {
  animation: txt-strikethrough-typing-blink 1s step-end calc(0.3s + var(--i) * 75ms + var(--x, 0s)) infinite;
}
.txt-strikethrough-typing-old {
  position: relative;
  animation: txt-strikethrough-typing-dim 0.3s ease-out 1.75s forwards;
}
.txt-strikethrough-typing-old::before {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 55%;
  height: 0.08em;
  border-radius: 0.04em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  animation: txt-strikethrough-typing-strike 0.3s cubic-bezier(0.6, 0, 0.3, 1) 1.6s forwards;
}
.txt-strikethrough-typing-new {
  --x: 0.8s;
  color: var(--c);
}
@keyframes txt-strikethrough-typing-key {
  to { opacity: 1; }
}
@keyframes txt-strikethrough-typing-caret {
  0%, 100% { opacity: 1; }
}
@keyframes txt-strikethrough-typing-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes txt-strikethrough-typing-strike {
  to { transform: scaleX(1); }
}
@keyframes txt-strikethrough-typing-dim {
  to { color: color-mix(in srgb, currentColor 45%, transparent); }
}

.txt-word-by-word-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
/* the slot: clips the word while it is below the line */
.txt-word-by-word-reveal-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.08em;
  margin: 0 -0.06em -0.08em;
}
.txt-word-by-word-reveal-w > span {
  display: inline-block;
  transform-origin: 0 100%;
  animation: txt-word-by-word-reveal-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.1s + var(--i) * 0.09s) both;
}
@keyframes txt-word-by-word-reveal-up {
  from { transform: translateY(110%) rotate(8deg); }
  to   { transform: translateY(0) rotate(0); }
}

.txt-bouncing-letters-drop-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-bouncing-letters-drop-in span {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: txt-bouncing-letters-drop-in-fall 1s calc(var(--i) * 70ms) both;
}
/* ease-in on the way down, ease-out on the way up */
@keyframes txt-bouncing-letters-drop-in-fall {
  0%   { opacity: 0; transform: translateY(-1.6em) scale(0.9, 1.15); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  12%  { opacity: 1; }
  32%  { transform: translateY(0) scale(0.9, 1.15); animation-timing-function: ease-out; }
  40%  { transform: translateY(0) scale(1.2, 0.78); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  58%  { transform: translateY(-0.4em) scale(0.96, 1.05); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  72%  { transform: translateY(0) scale(1.08, 0.9); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  84%  { transform: translateY(-0.1em) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  93%  { transform: translateY(0) scale(1.02, 0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

.txt-split-text-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: transparent;
  animation: txt-split-text-reveal-settle 0s 1s forwards;}
/* the halves are copies; the empty alt text keeps screen readers from reading them */
.txt-split-text-reveal::before,
.txt-split-text-reveal::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  color: var(--c);
}
.txt-split-text-reveal::before {
  clip-path: inset(0 0 50% 0);
  animation: txt-split-text-reveal-left 1s cubic-bezier(0.7, 0, 0.2, 1) both, txt-split-text-reveal-hide 0s 1s forwards;
}
.txt-split-text-reveal::after {
  clip-path: inset(50% 0 0 0);
  animation: txt-split-text-reveal-right 1s cubic-bezier(0.7, 0, 0.2, 1) both, txt-split-text-reveal-hide 0s 1s forwards;
}
@keyframes txt-split-text-reveal-left {
  0%   { opacity: 0; transform: translateX(-1.6em); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes txt-split-text-reveal-right {
  0%   { opacity: 0; transform: translateX(1.6em); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes txt-split-text-reveal-hide {
  to { visibility: hidden; }
}
@keyframes txt-split-text-reveal-settle {
  to { color: var(--c); }
}

.txt-reveal-from-center {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 0 0.25em;
  white-space: nowrap;
  color: var(--c);}
.txt-reveal-from-center-t {
  display: inline-block;
  clip-path: inset(0 50%);
  animation: txt-reveal-from-center-open 1.3s both;
}
/* each line lives in one half of the box and travels from the center to its edge */
.txt-reveal-from-center::before,
.txt-reveal-from-center::after {
  content: "";
  position: absolute;
  top: -0.12em;
  bottom: -0.12em;
  width: 50%;
  border: 0 solid var(--c);
}
.txt-reveal-from-center::before {
  left: 0;
  border-left-width: 0.06em;
  animation: txt-reveal-from-center-left 1.3s both;
}
.txt-reveal-from-center::after {
  right: 0;
  border-right-width: 0.06em;
  animation: txt-reveal-from-center-right 1.3s both;
}
@keyframes txt-reveal-from-center-open {
  0%, 30%   { clip-path: inset(0 50%); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  80%, 100% { clip-path: inset(0 0); }
}
@keyframes txt-reveal-from-center-left {
  0%   { opacity: 1; transform: translateX(100%) scaleY(0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  30%  { transform: translateX(100%) scaleY(1); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  80%  { opacity: 1; transform: translateX(0) scaleY(1); }
  100% { opacity: 0; transform: translateX(0) scaleY(1); }
}
@keyframes txt-reveal-from-center-right {
  0%   { opacity: 1; transform: translateX(-100%) scaleY(0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  30%  { transform: translateX(-100%) scaleY(1); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  80%  { opacity: 1; transform: translateX(0) scaleY(1); }
  100% { opacity: 0; transform: translateX(0) scaleY(1); }
}

.txt-rubber-stamp-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 0.12em 0.45em;
  border: 0.1em solid var(--c);
  border-radius: 0.2em;
  color: var(--c);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  animation: txt-rubber-stamp-text-slam 0.8s both;}
/* the ink ring that spreads on impact */
.txt-rubber-stamp-text::after {
  content: "";
  position: absolute;
  inset: -0.1em;
  border: 0.06em solid var(--c);
  border-radius: 0.3em;
  opacity: 0;
  animation: txt-rubber-stamp-text-ring 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.34s both;
}
@keyframes txt-rubber-stamp-text-slam {
  0%   { opacity: 0; transform: rotate(-13deg) scale(1.7) translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  20%  { opacity: 0.8; }
  42%  { opacity: 1; transform: rotate(-8deg) scale(0.93) translateX(0); animation-timing-function: ease-out; }
  52%  { transform: rotate(-9.5deg) scale(1.03) translateX(0.04em); }
  62%  { transform: rotate(-6.8deg) scale(0.99) translateX(-0.04em); }
  74%  { transform: rotate(-8.6deg) scale(1) translateX(0.02em); }
  86%  { transform: rotate(-7.7deg) scale(1) translateX(0); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1) translateX(0); }
}
@keyframes txt-rubber-stamp-text-ring {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.35); }
}

.txt-spotlight-text-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0 0.3em;
  white-space: nowrap;
  color: var(--c);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 62%), linear-gradient(rgb(0 0 0 / 0.14) 0 0);
          mask-image: radial-gradient(circle, #000 30%, transparent 62%), linear-gradient(rgb(0 0 0 / 0.14) 0 0);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 3em 3em, 100% 100%;
          mask-size: 3em 3em, 100% 100%;
  -webkit-mask-position: -1.5em 50%, 0 0;
          mask-position: -1.5em 50%, 0 0;
  animation: txt-spotlight-text-reveal-sweep 2s forwards, txt-spotlight-text-reveal-lit 0s 2s forwards;}
/* sweep left to right, then open up to the whole line */
@keyframes txt-spotlight-text-reveal-sweep {
  0% {
    -webkit-mask-position: -1.5em 50%, 0 0; mask-position: -1.5em 50%, 0 0;
    -webkit-mask-size: 3em 3em, 100% 100%; mask-size: 3em 3em, 100% 100%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  55% {
    -webkit-mask-position: calc(100% + 1.5em) 50%, 0 0; mask-position: calc(100% + 1.5em) 50%, 0 0;
    -webkit-mask-size: 3em 3em, 100% 100%; mask-size: 3em 3em, 100% 100%;
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  100% {
    -webkit-mask-position: 50% 50%, 0 0; mask-position: 50% 50%, 0 0;
    -webkit-mask-size: 400% 400%, 100% 100%; mask-size: 400% 400%, 100% 100%;
  }
}
/* drop the mask once the light is fully up */
@keyframes txt-spotlight-text-reveal-lit {
  to { -webkit-mask-image: none; mask-image: none; }
}

.txt-scattered-letters-assemble {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
/* --x, --y and --r on each span hold where that letter starts */
.txt-scattered-letters-assemble span {
  display: inline-block;
  animation: txt-scattered-letters-assemble-home 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.1s + var(--i) * 30ms) both;
}
@keyframes txt-scattered-letters-assemble-home {
  0%   { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.7); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

.txt-stacking-words-drop {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  line-height: 1.05;
  text-align: center;
  color: var(--c);}
.txt-stacking-words-drop span {
  display: block;
  transform-origin: 50% 100%;
}
/* bottom word lands first, then one every 0.3s; landing is 45% into the drop */
.txt-stacking-words-drop span:nth-child(3) {
  animation: txt-stacking-words-drop-fall 0.7s both, txt-stacking-words-drop-dip 0.3s ease-out 0.615s 2;
}
.txt-stacking-words-drop span:nth-child(2) {
  animation: txt-stacking-words-drop-fall 0.7s 0.3s both, txt-stacking-words-drop-dip 0.3s ease-out 0.915s;
}
.txt-stacking-words-drop span:nth-child(1) {
  animation: txt-stacking-words-drop-fall 0.7s 0.6s both;
}
@keyframes txt-stacking-words-drop-fall {
  0%   { opacity: 0; transform: translateY(-1.3em) scale(0.94, 1.1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  15%  { opacity: 1; }
  45%  { transform: translateY(0) scale(1.12, 0.8); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  65%  { transform: translateY(-0.12em) scale(0.97, 1.04); animation-timing-function: ease-in-out; }
  82%  { transform: translateY(0) scale(1.02, 0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}
/* the words underneath give a little when a new one lands */
@keyframes txt-stacking-words-drop-dip {
  0%, 100% { translate: 0 0; scale: 1 1; }
  25%      { translate: 0 0.06em; scale: 1.03 0.94; }
}

.txt-light-sweep-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0 0.1em;
  white-space: nowrap;
  color: transparent;
  /* solid, a pale band of light, then clear; the gradient is 2.5x the text width */
  background: linear-gradient(100deg, var(--c) 40%, color-mix(in srgb, var(--c) 40%, #fff) 47%, color-mix(in srgb, var(--c) 20%, #fff) 51%, transparent 60%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  animation: txt-light-sweep-reveal-sweep 1.4s cubic-bezier(0.35, 0, 0.25, 1) forwards;}
@keyframes txt-light-sweep-reveal-sweep {
  to { background-position: 0 0; }
}

.txt-fade-in-left-to-right {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
  color: var(--c);
  /* opaque, then a soft ramp, then clear; the mask is 2.5x the text width */
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  animation: txt-fade-in-left-to-right-wipe 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;}
@keyframes txt-fade-in-left-to-right-wipe {
  from { transform: translateX(-0.15em); }
  to   { transform: translateX(0); -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.txt-speed-slide-in-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
  color: var(--c);
  font-style: italic;
  animation: txt-speed-slide-in-text-dash 1s both;}
@keyframes txt-speed-slide-in-text-dash {
  0% {
    opacity: 0;
    transform: translateX(-3em) skewX(-24deg);
    text-shadow: -0.3em 0 color-mix(in srgb, var(--c) 50%, transparent), -0.6em 0 color-mix(in srgb, var(--c) 28%, transparent), -0.9em 0 color-mix(in srgb, var(--c) 12%, transparent);
    animation-timing-function: cubic-bezier(0.3, 0.5, 0.35, 1);
  }
  8% { opacity: 1; }
  55% {
    transform: translateX(0.15em) skewX(10deg);
    text-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent;
    animation-timing-function: ease-in-out;
  }
  76%  { transform: translateX(-0.04em) skewX(-3deg); }
  100% { opacity: 1; transform: translateX(0) skewX(0); text-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent; }
}

.txt-circle-reveal-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0.1em 0.3em;
  white-space: nowrap;
  color: var(--c);
  clip-path: circle(0% at 50% 50%);
  animation: txt-circle-reveal-text-iris 1s cubic-bezier(0.5, 0, 0.2, 1) forwards;}
@keyframes txt-circle-reveal-text-iris {
  from { clip-path: circle(0% at 50% 50%); transform: scale(1.15); }
  to   { clip-path: circle(75% at 50% 50%); transform: scale(1); }
}

.txt-swing-in-letters {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-swing-in-letters span {
  display: inline-block;
  transform-origin: 50% 0;
  animation: txt-swing-in-letters-swing 1.5s ease-in-out calc(var(--i) * 80ms) both;
}
@keyframes txt-swing-in-letters-swing {
  0%   { opacity: 0; transform: translateY(-0.5em) rotate(50deg); }
  22%  { opacity: 1; transform: translateY(0) rotate(-28deg); }
  42%  { transform: translateY(0) rotate(16deg); }
  60%  { transform: translateY(0) rotate(-8deg); }
  75%  { transform: translateY(0) rotate(4deg); }
  89%  { transform: translateY(0) rotate(-1.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

.txt-text-rise-from-underline {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0 0.1em 0.16em;
  white-space: nowrap;
  color: var(--c);}
.txt-text-rise-from-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.08em;
  border-radius: 0.04em;
  background: var(--c);
  transform-origin: 0 50%;
  animation: txt-text-rise-from-underline-line 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.txt-text-rise-from-underline-t {
  display: inline-block;
  animation: txt-text-rise-from-underline-rise 0.75s cubic-bezier(0.34, 1.35, 0.64, 1) 0.4s both;
}
@keyframes txt-text-rise-from-underline-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes txt-text-rise-from-underline-rise {
  from { transform: translateY(120%); }
  to   { transform: translateY(0); }
}

@property --txt-radial-wipe-reveal-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.txt-radial-wipe-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.15em 0.3em 0;
  white-space: nowrap;
  color: var(--c);}
/* the mask sweeps from 9 o'clock to 3 o'clock around the bottom center */
.txt-radial-wipe-reveal-t {
  display: inline-block;
  -webkit-mask-image: conic-gradient(from -90deg at 50% 100%, #000 var(--txt-radial-wipe-reveal-a), transparent 0);
          mask-image: conic-gradient(from -90deg at 50% 100%, #000 var(--txt-radial-wipe-reveal-a), transparent 0);
  animation: txt-radial-wipe-reveal-sweep 1.2s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
/* the wiper arm rides the edge of the mask */
.txt-radial-wipe-reveal::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.03em);
  bottom: 0;
  width: 0.06em;
  height: 4em;
  border-radius: 0.03em;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: txt-radial-wipe-reveal-arm 1.2s cubic-bezier(0.45, 0, 0.25, 1) forwards, txt-radial-wipe-reveal-fade 0.3s ease-out 1.05s forwards;
}
@keyframes txt-radial-wipe-reveal-sweep {
  from { --txt-radial-wipe-reveal-a: 0deg; }
  to   { --txt-radial-wipe-reveal-a: 180deg; }
}
@keyframes txt-radial-wipe-reveal-arm {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(90deg); }
}
@keyframes txt-radial-wipe-reveal-fade {
  to { opacity: 0; }
}

.txt-letters-rotate-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-letters-rotate-in span {
  display: inline-block;
  transform-origin: 0 100%;
  animation: txt-letters-rotate-in-up 0.75s cubic-bezier(0.3, 1.45, 0.6, 1) calc(var(--i) * 65ms) both;
}
@keyframes txt-letters-rotate-in-up {
  0%   { opacity: 0; transform: rotate(80deg); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0); }
}

.txt-letter-by-letter-blur-in {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-letter-by-letter-blur-in span {
  display: inline-block;
  animation: txt-letter-by-letter-blur-in-focus 1s cubic-bezier(0.25, 0.6, 0.3, 1) calc(var(--i) * 80ms) both;
}
@keyframes txt-letter-by-letter-blur-in-focus {
  0%   { opacity: 0; filter: blur(0.35em); transform: translateX(0.15em); }
  40%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: translateX(0); }
}

.txt-zipper-letters {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-zipper-letters span {
  --from: -0.9em;
  display: inline-block;
  animation: txt-zipper-letters-close 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.15) calc(0.1s + var(--i) * 45ms) both;
}
.txt-zipper-letters span:nth-child(even) {
  --from: 0.9em;
}
@keyframes txt-zipper-letters-close {
  0%   { opacity: 0; transform: translateY(var(--from)) scaleY(1.2); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

.txt-letters-zoom-in-blur {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-letters-zoom-in-blur span {
  display: inline-block;
  animation: txt-letters-zoom-in-blur-land 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 70ms) both;
}
@keyframes txt-letters-zoom-in-blur-land {
  0%   { opacity: 0; transform: scale(3.2); filter: blur(0.12em); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.txt-reverse-letter-stagger {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  /* --n = number of letters */
  --n: 6;
  color: var(--c);
  white-space: nowrap;}
.txt-reverse-letter-stagger span {
  display: inline-block;
  animation: txt-reverse-letter-stagger-in 0.6s cubic-bezier(0.25, 0.9, 0.3, 1.25) calc((var(--n) - 1 - var(--i)) * 90ms) both;
}
@keyframes txt-reverse-letter-stagger-in {
  0%   { opacity: 0; transform: translateX(-1.4em) skewX(15deg); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) skewX(0); }
}

.txt-random-letter-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
/* --d is each letter's place in the shuffled order */
.txt-random-letter-reveal span {
  display: inline-block;
  animation: txt-random-letter-reveal-on 0.45s ease-out calc(0.2s + var(--d) * 90ms) both;
}
@keyframes txt-random-letter-reveal-on {
  0%   { opacity: 0.14; transform: scale(1); }
  35%  { opacity: 1; transform: scale(1.22); }
  100% { opacity: 1; transform: scale(1); }
}

.txt-glow-in-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-glow-in-text span {
  animation: txt-glow-in-text-on 1.3s ease-out calc(var(--i) * 110ms) both;
}
@keyframes txt-glow-in-text-on {
  0% {
    opacity: 0;
    color: color-mix(in srgb, var(--c) 35%, #fff);
    text-shadow: 0 0 0.08em var(--c), 0 0 0.5em var(--c);
  }
  20% {
    opacity: 1;
    color: color-mix(in srgb, var(--c) 35%, #fff);
    text-shadow: 0 0 0.08em var(--c), 0 0 0.5em var(--c);
  }
  100% {
    opacity: 1;
    color: var(--c);
    text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  }
}

.txt-letters-spread-from-center {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  /* --n = number of letters */
  --n: 12;
  color: var(--c);
  white-space: nowrap;}
.txt-letters-spread-from-center span {
  /* how many letter widths this letter sits from the middle */
  --o: calc((var(--n) - 1) / 2 - var(--i));
  display: inline-block;
  animation: txt-letters-spread-from-center-fan 1.4s both;
}
@keyframes txt-letters-spread-from-center-fan {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--o) * 0.55em)) rotate(calc(var(--o) * 5deg)) scale(0.6);
    animation-timing-function: ease-out;
  }
  22% {
    opacity: 1;
    transform: translateX(calc(var(--o) * 0.55em)) rotate(calc(var(--o) * 5deg)) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0.9, 0.3, 1);
  }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

.txt-growing-letters {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-growing-letters span {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: txt-growing-letters-grow 0.8s calc(var(--i) * 55ms) both;
}
@keyframes txt-growing-letters-grow {
  0%   { transform: scale(1.15, 0); animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
  50%  { transform: scale(0.88, 1.22); animation-timing-function: ease-in-out; }
  72%  { transform: scale(1.06, 0.92); animation-timing-function: ease-in-out; }
  88%  { transform: scale(0.98, 1.03); }
  100% { transform: scale(1, 1); }
}

.txt-words-slide-together {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
.txt-words-slide-together-a,
.txt-words-slide-together-b {
  display: inline-block;
}
.txt-words-slide-together-a {
  transform-origin: 100% 50%;
  animation: txt-words-slide-together-left 0.9s both;
}
.txt-words-slide-together-b {
  position: relative;
  transform-origin: 0 50%;
  animation: txt-words-slide-together-right 0.9s both;
}
/* the spark in the gap at the moment of impact */
.txt-words-slide-together-b::before {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.08em;
  left: -0.16em;
  width: 0.06em;
  border-radius: 0.03em;
  background: var(--c);
  opacity: 0;
  animation: txt-words-slide-together-spark 0.45s ease-out 0.42s both;
}
@keyframes txt-words-slide-together-left {
  0%   { opacity: 0; transform: translateX(-2.4em) scaleX(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  20%  { opacity: 1; }
  48%  { transform: translateX(0) scaleX(0.9); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  68%  { transform: translateX(-0.12em) scaleX(1.02); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes txt-words-slide-together-right {
  0%   { opacity: 0; transform: translateX(2.4em) scaleX(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  20%  { opacity: 1; }
  48%  { transform: translateX(0) scaleX(0.9); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  68%  { transform: translateX(0.12em) scaleX(1.02); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes txt-words-slide-together-spark {
  0%   { opacity: 1; transform: scaleY(0.3); }
  30%  { opacity: 1; transform: scaleY(1.5); }
  100% { opacity: 0; transform: scaleY(1); }
}

.txt-diagonal-wipe-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0 0.2em;
  white-space: nowrap;
  color: var(--c);
  /* the edge runs from the bottom point up to a top point 30% further right */
  clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%);
  animation: txt-diagonal-wipe-reveal-wipe 1.1s cubic-bezier(0.45, 0, 0.2, 1) forwards;}
.txt-diagonal-wipe-reveal-t {
  display: inline-block;
  animation: txt-diagonal-wipe-reveal-drift 1.3s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes txt-diagonal-wipe-reveal-wipe {
  to { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); }
}
@keyframes txt-diagonal-wipe-reveal-drift {
  from { transform: translateX(0.6em); }
  to   { transform: translateX(0); }
}

@property --txt-venetian-blinds-reveal-p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.txt-venetian-blinds-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
  color: var(--c);
  /* each 0.24em slat fills from its top edge down */
  -webkit-mask: linear-gradient(#000 var(--txt-venetian-blinds-reveal-p), transparent 0) 0 0 / 100% 0.24em;
          mask: linear-gradient(#000 var(--txt-venetian-blinds-reveal-p), transparent 0) 0 0 / 100% 0.24em;
  animation: txt-venetian-blinds-reveal-open 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards, txt-venetian-blinds-reveal-done 0s 1.1s forwards;}
@keyframes txt-venetian-blinds-reveal-open {
  to { --txt-venetian-blinds-reveal-p: 100%; }
}
/* hand back plain text once the slats are fully open */
@keyframes txt-venetian-blinds-reveal-done {
  to { -webkit-mask: none; mask: none; }
}

@property --txt-halftone-dot-reveal-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.txt-halftone-dot-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  white-space: nowrap;}
/* a 0.2em tile with one dot in it; at 0.15em radius the dots cover the tile */
.txt-halftone-dot-reveal span {
  display: inline-block;
  -webkit-mask: radial-gradient(circle, #000 var(--txt-halftone-dot-reveal-r), transparent calc(var(--txt-halftone-dot-reveal-r) + 0.5px)) 0 0 / 0.2em 0.2em;
          mask: radial-gradient(circle, #000 var(--txt-halftone-dot-reveal-r), transparent calc(var(--txt-halftone-dot-reveal-r) + 0.5px)) 0 0 / 0.2em 0.2em;
  animation:
    txt-halftone-dot-reveal-ink 0.9s cubic-bezier(0.3, 0, 0.4, 1) calc(var(--i) * 70ms) both,
    txt-halftone-dot-reveal-done 0s calc(0.9s + var(--i) * 70ms) forwards;
}
@keyframes txt-halftone-dot-reveal-ink {
  from { --txt-halftone-dot-reveal-r: 0em; }
  to   { --txt-halftone-dot-reveal-r: 0.15em; }
}
@keyframes txt-halftone-dot-reveal-done {
  to { -webkit-mask: none; mask: none; }
}

.txt-unfold-text-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--c);}
.txt-unfold-text-reveal::before {
  content: "";
  position: absolute;
  left: -0.25em;
  right: -0.25em;
  top: 50%;
  height: 0.06em;
  margin-top: -0.03em;
  border-radius: 0.03em;
  background: var(--c);
  animation: txt-unfold-text-reveal-line 1.1s both;
}
.txt-unfold-text-reveal-t {
  display: inline-block;
  animation: txt-unfold-text-reveal-open 1.1s both;
}
@keyframes txt-unfold-text-reveal-line {
  0%   { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  40%  { opacity: 1; transform: scaleX(1); animation-timing-function: ease-out; }
  62%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes txt-unfold-text-reveal-open {
  0%, 38% { opacity: 0; transform: scaleY(0.02); animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
  100%    { opacity: 1; transform: scaleY(1); }
}

.txt-elastic-stretch-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
  color: var(--c);
  transform-origin: 0 50%;
  animation: txt-elastic-stretch-text-snap 1.1s both;}
@keyframes txt-elastic-stretch-text-snap {
  0%   { opacity: 0; transform: scale(0.1, 1.3); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  10%  { opacity: 1; }
  30%  { transform: scale(1.3, 0.82); animation-timing-function: ease-in-out; }
  47%  { transform: scale(0.88, 1.1); animation-timing-function: ease-in-out; }
  63%  { transform: scale(1.07, 0.95); animation-timing-function: ease-in-out; }
  78%  { transform: scale(0.97, 1.02); animation-timing-function: ease-in-out; }
  90%  { transform: scale(1.01, 1); }
  100% { opacity: 1; transform: scale(1, 1); }
}

.txt-gold-text-effect {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.03em;
  background:
    linear-gradient(115deg, transparent 38%, rgb(255 250 225 / 0.9) 50%, transparent 62%) 0 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #fef3c7 0%, #f5c542 22%, #b7791f 45%, #fde68a 53%, #d69e2e 70%, #92600e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.035em 0 #6b3f0a);
  animation: txt-gold-text-effect-sheen 3.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;}
@keyframes txt-gold-text-effect-sheen {
  0%       { background-position: 150% 0, 0 0; }
  55%, 100% { background-position: -50% 0, 0 0; }
}

.txt-chrome-text-effect {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg,
    #cbd5e1 0%,
    #f8fafc 26%,
    color-mix(in srgb, var(--c) 30%, #cbd5e1) 40%,
    color-mix(in srgb, var(--c) 35%, #64748b) 49.5%,
    #1e293b 50%,
    #475569 54%,
    #cbd5e1 64%,
    #f8fafc 74%,
    #94a3b8 100%) 0 0 / 100% 250%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.02em) #64748b;
  filter: drop-shadow(0 0.04em 0 #334155);
  animation: txt-chrome-text-effect-tilt 2.8s ease-in-out infinite alternate;}
@keyframes txt-chrome-text-effect-tilt {
  from { background-position: 0 38%; }
  to   { background-position: 0 62%; }
}

.txt-holographic-foil-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background:
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.7) 47%, transparent 62%) 0 0 / 300% 100%,
    repeating-linear-gradient(115deg, #f472b6 0em, #facc15 0.55em, #4ade80 1.1em, #38bdf8 1.65em, #a78bfa 2.2em, #f472b6 2.75em) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.012em) color-mix(in srgb, color-mix(in srgb, var(--c) 50%, #4c1d95) 60%, transparent);
  animation: txt-holographic-foil-text-tilt 3s ease-in-out infinite alternate;}
@keyframes txt-holographic-foil-text-tilt {
  from { background-position: 0% 0, 0% 0; }
  to   { background-position: 100% 0, 45% 0; }
}

.txt-fire-text-effect {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0.04em;}
.txt-fire-text-effect::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #fb923c;
  filter: blur(0.1em);
  transform-origin: 50% 100%;
  animation: txt-fire-text-effect-flicker 1.7s ease-in-out infinite;
}
.txt-fire-text-effect span {
  background:
    radial-gradient(ellipse 45% 60% at 50% 100%, rgb(254 240 138 / 0.95), transparent 72%) 0 0 / 0.9em 1.3em,
    radial-gradient(ellipse 40% 55% at 50% 100%, rgb(253 186 116 / 0.85), transparent 72%) 0.45em 0 / 0.6em 0.9em,
    linear-gradient(0deg, #facc15 0%, #f97316 38%, #dc2626 72%, #991b1b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-fire-text-effect-rise 1.3s linear infinite;
}
@keyframes txt-fire-text-effect-rise {
  to { background-position: 0 -1.3em, 0.45em -1.8em, 0 0; }
}
@keyframes txt-fire-text-effect-flicker {
  0%, 100% { opacity: 0.5; transform: translateY(-0.03em) scaleY(1); }
  25%      { opacity: 0.8; transform: translateY(-0.07em) scaleY(1.1); }
  50%      { opacity: 0.45; transform: translateY(-0.03em) scaleY(1.03); }
  70%      { opacity: 0.75; transform: translateY(-0.09em) scaleY(1.14); }
}

.txt-aurora-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  background:
    radial-gradient(ellipse 30% 100% at 50% 100%, color-mix(in srgb, #f472b6 80%, transparent), transparent 75%) 0 0 / 5em 100% repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #14b8a6), color-mix(in srgb, var(--c) 20%, #22c55e) 28%, var(--c) 52%, color-mix(in srgb, var(--c) 30%, #a855f7) 76%, color-mix(in srgb, var(--c) 30%, #14b8a6)) 0 0 / 9em 100% repeat-x,
    var(--c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-aurora-text-drift 6s linear infinite;}
@keyframes txt-aurora-text-drift {
  to { background-position: 5em 0, -9em 0; }
}

.txt-sparkle-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #a855f7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;}
.txt-sparkle-text-stars {
  position: absolute;
  inset: -0.25em -0.2em;
  pointer-events: none;
}
.txt-sparkle-text-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(0.6em * var(--s));
  height: calc(0.6em * var(--s));
  margin: calc(-0.3em * var(--s));
  background: radial-gradient(circle, #fff 0 9%, color-mix(in srgb, var(--c) 45%, #fff) 20%, color-mix(in srgb, var(--c) 60%, #a855f7) 42%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: scale(0);
  animation: txt-sparkle-text-twinkle 1.8s cubic-bezier(0.3, 0, 0.3, 1) infinite;
  animation-delay: var(--d);
}
@keyframes txt-sparkle-text-twinkle {
  0%, 55%, 100% { transform: scale(0) rotate(0deg); }
  22%           { transform: scale(1) rotate(70deg); }
  35%           { transform: scale(0.85) rotate(100deg); }
}

.txt-liquid-metal-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.02em;
  background:
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 12%, #fff), transparent) 0% 30% / 45% 220% no-repeat,
    radial-gradient(circle closest-side, #1f2937, transparent) 100% 70% / 40% 220% no-repeat,
    radial-gradient(circle closest-side, #f8fafc, transparent) 50% 0% / 30% 220% no-repeat,
    linear-gradient(180deg, #d1d5db 0%, #f9fafb 30%, #6b7280 52%, #9ca3af 70%, #4b5563 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.012em) #6b7280;
  animation: txt-liquid-metal-text-flow 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;}
@keyframes txt-liquid-metal-text-flow {
  0%, 100% { background-position: 0% 30%, 100% 70%, 50% 0%, 0 0; }
  33%      { background-position: 70% 80%, 20% 20%, 100% 60%, 0 0; }
  66%      { background-position: 100% 10%, 55% 90%, 0% 40%, 0 0; }
}

.txt-gradient-shadow-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0.02em;}
.txt-gradient-shadow-text::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(0.07em, 0.07em);
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #ec4899), color-mix(in srgb, var(--c) 35%, #a855f7), color-mix(in srgb, var(--c) 30%, #22d3ee), var(--c)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-gradient-shadow-text-flow 3s linear infinite;
}
@keyframes txt-gradient-shadow-text-flow {
  to { background-position: 200% 0; }
}

.txt-glossy-shine-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background:
    linear-gradient(110deg,
      transparent 44%, rgb(255 255 255 / 0.9) 45%, rgb(255 255 255 / 0.9) 48.5%, transparent 49.5%,
      transparent 51%, rgb(255 255 255 / 0.75) 51.8%, transparent 52.8%) 0 0 / 300% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--c) 65%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 85%, #000) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-glossy-shine-text-flash 3s cubic-bezier(0.6, 0, 0.3, 1) infinite;}
@keyframes txt-glossy-shine-text-flash {
  0%        { background-position: 100% 0, 0 0; }
  40%, 100% { background-position: 0% 0, 0 0; }
}

.txt-gradient-glow-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  font-weight: 800;}
.txt-gradient-glow-text::before,
.txt-gradient-glow-text span {
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #a855f7), color-mix(in srgb, var(--c) 30%, #ec4899), color-mix(in srgb, var(--c) 35%, #22d3ee), var(--c)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-gradient-glow-text-flow 4s linear infinite;
}
.txt-gradient-glow-text::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: blur(0.25em);
  opacity: 0.85;
}
@keyframes txt-gradient-glow-text-flow {
  to { background-position: 200% 0; }
}

.txt-galaxy-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.02em;
  background:
    radial-gradient(circle, #fff 0 0.035em, transparent 0.06em) 0 0 / 0.7em 0.55em,
    radial-gradient(circle, rgb(255 255 255 / 0.7) 0 0.025em, transparent 0.045em) 0.3em 0.2em / 0.45em 0.4em,
    radial-gradient(circle, #fff 0 0.04em, rgb(254 249 195 / 0.5) 0.06em, transparent 0.11em) 0.5em 0.35em / 1.3em 0.9em,
    radial-gradient(ellipse 60% 90% at 25% 40%, color-mix(in srgb, var(--c) 35%, #ec4899), transparent 70%),
    radial-gradient(ellipse 50% 90% at 80% 60%, color-mix(in srgb, var(--c) 35%, #a855f7), transparent 70%),
    linear-gradient(120deg, color-mix(in srgb, var(--c) 50%, #1e1b4b), color-mix(in srgb, var(--c) 45%, #312e81));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-galaxy-text-drift 8s linear infinite;}
@keyframes txt-galaxy-text-drift {
  to { background-position: -1.4em 0, -0.15em 0.2em, -2.1em 0.35em, 0 0, 0 0, 0 0; }
}

@property --txt-conic-gradient-text-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.txt-conic-gradient-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background: conic-gradient(from var(--txt-conic-gradient-text-a) at 50% 50%,
    var(--c), color-mix(in srgb, var(--c) 30%, #22d3ee), color-mix(in srgb, var(--c) 35%, #a855f7), color-mix(in srgb, var(--c) 30%, #ec4899), var(--c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-conic-gradient-text-spin 4s linear infinite;}
@keyframes txt-conic-gradient-text-spin {
  to { --txt-conic-gradient-text-a: 360deg; }
}

.txt-candy-stripe-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(45deg,
    var(--c) 25%, color-mix(in srgb, var(--c) 30%, #fff) 25% 50%, var(--c) 50% 75%, color-mix(in srgb, var(--c) 30%, #fff) 75%) 0 0 / 0.5em 0.5em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.045em 0 color-mix(in srgb, var(--c) 70%, #000));
  animation: txt-candy-stripe-text-roll 1.2s linear infinite;}
@keyframes txt-candy-stripe-text-roll {
  to { background-position: 0.5em 0; }
}

.txt-split-color-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background: linear-gradient(110deg,
    var(--c) 49%, color-mix(in srgb, var(--c) 45%, #fff) 49.4%, color-mix(in srgb, var(--c) 45%, #fff) 50.2%, currentColor 50.6%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: txt-split-color-text-slide 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;}
@keyframes txt-split-color-text-slide {
  from { background-position: 85% 0; }
  to   { background-position: 15% 0; }
}

.txt-mesh-gradient-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background:
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 20%, #ec4899), transparent) 0% 0% / 65% 250% no-repeat,
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 25%, #8b5cf6), transparent) 100% 100% / 60% 250% no-repeat,
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 20%, #06b6d4), transparent) 50% 0% / 55% 250% no-repeat,
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c) 25%, #10b981), transparent) 0% 100% / 50% 250% no-repeat,
    var(--c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-mesh-gradient-text-wander 6s ease-in-out infinite;}
@keyframes txt-mesh-gradient-text-wander {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%; }
  25%      { background-position: 60% 100%, 30% 0%, 100% 70%, 40% 0%; }
  50%      { background-position: 100% 30%, 0% 60%, 20% 100%, 100% 60%; }
  75%      { background-position: 30% 70%, 70% 20%, 0% 30%, 70% 100%; }
}

.txt-pastel-rainbow-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg,
    #f9a8d4 0 16.66%, #fdba74 0 33.33%, #fde047 0 50%, #86efac 0 66.66%, #7dd3fc 0 83.33%, #c4b5fd 0) 0 0 / 100% 1.2em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.06em 0 color-mix(in srgb, var(--c) 35%, #3b0764));
  animation: txt-pastel-rainbow-text-rise 2.4s linear infinite;}
@keyframes txt-pastel-rainbow-text-rise {
  to { background-position: 0 -1.2em; }
}

.txt-ice-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.06em;
  background:
    linear-gradient(115deg,
      transparent 0 30%, rgb(255 255 255 / 0.65) 30% 33%, transparent 33% 60%,
      rgb(255 255 255 / 0.45) 60% 61.5%, transparent 61.5%) 0 0 / 200% 100%,
    linear-gradient(160deg,
      #bae6fd 0 28%, #7dd3fc 28% 50%, #38bdf8 50% 72%, #0284c7 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.015em) #0c4a6e;
  animation: txt-ice-text-refract 3.5s ease-in-out infinite alternate;}
@keyframes txt-ice-text-refract {
  from { background-position: 100% 0, 0 0; }
  to   { background-position: 0% 0, 0 0; }
}

.txt-lava-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.05em;
  background:
    radial-gradient(ellipse 48% 42% at 30% 40%, rgb(69 10 10 / 0.92), transparent 72%) 0 0 / 1.4em 0.9em,
    radial-gradient(ellipse 42% 48% at 70% 60%, rgb(127 29 29 / 0.88), transparent 72%) 0.5em 0.3em / 1.1em 0.8em,
    linear-gradient(180deg, #fde047 0%, #f97316 45%, #dc2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.08em rgb(249 115 22 / 0.55));
  animation: txt-lava-text-flow 6s linear infinite;}
@keyframes txt-lava-text-flow {
  to { background-position: 1.4em 0, -0.6em 0.3em, 0 0; }
}

.txt-sunset-gradient-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background:
    radial-gradient(ellipse 22% 45% at 50% 50%, rgb(251 191 36 / 0.95), transparent 75%) 0 0 / 100% 200% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #4c1d95) 0%, #db2777 32%, #f97316 58%, #f59e0b 78%, #ea580c 100%) 0 0 / 100% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-sunset-gradient-text-set 5s ease-in-out infinite alternate;}
@keyframes txt-sunset-gradient-text-set {
  from { background-position: 0 50%, 0 100%; }
  to   { background-position: 0 -40%, 0 0%; }
}

.txt-glass-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  background:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.75) 45%, rgb(255 255 255 / 0.15) 55%, transparent 65%) 0 0 / 250% 100%,
    linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 50%),
    color-mix(in srgb, var(--c) 40%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.015em) color-mix(in srgb, var(--c) 85%, transparent);
  filter: drop-shadow(0 0.08em 0.08em color-mix(in srgb, var(--c) 30%, transparent));
  animation: txt-glass-text-tilt 4s ease-in-out infinite alternate;}
@keyframes txt-glass-text-tilt {
  from { background-position: 100% 0, 0 0; }
  to   { background-position: 0% 0, 0 0; }
}

@property --txt-ripple-gradient-text-o {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.txt-ripple-gradient-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  background: repeating-radial-gradient(circle at 50% 50%,
    var(--c) var(--txt-ripple-gradient-text-o),
    var(--c) calc(var(--txt-ripple-gradient-text-o) + 0.1em),
    color-mix(in srgb, var(--c) 30%, #e879f9) calc(var(--txt-ripple-gradient-text-o) + 0.3em),
    var(--c) calc(var(--txt-ripple-gradient-text-o) + 0.5em));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-ripple-gradient-text-spread 1.4s linear infinite;}
@keyframes txt-ripple-gradient-text-spread {
  to { --txt-ripple-gradient-text-o: 0.5em; }
}

.txt-gradient-loading-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.04em;
  background:
    linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #a855f7) 36%, color-mix(in srgb, var(--c) 40%, #ec4899) 50%, transparent 50%) 0 0 / 200% 100% no-repeat,
    color-mix(in srgb, var(--c) 22%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-gradient-loading-text-fill 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
@keyframes txt-gradient-loading-text-fill {
  0%       { background-position: 100% 0; }
  50%, 62% { background-position: 0% 0; }
  100%     { background-position: -100% 0; }
}

.txt-emboss-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  color: var(--c);
  text-shadow: -0.035em -0.035em 0 color-mix(in srgb, var(--c) 30%, #fff), 0.035em 0.035em 0.02em color-mix(in srgb, var(--c) 50%, #000);
  animation: txt-emboss-text-orbit 6s linear infinite;}
@keyframes txt-emboss-text-orbit {
  0%, 100% { text-shadow: -0.035em -0.035em 0 color-mix(in srgb, var(--c) 30%, #fff), 0.035em 0.035em 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  12.5%    { text-shadow: 0 -0.05em 0 color-mix(in srgb, var(--c) 30%, #fff), 0 0.05em 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  25%      { text-shadow: 0.035em -0.035em 0 color-mix(in srgb, var(--c) 30%, #fff), -0.035em 0.035em 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  37.5%    { text-shadow: 0.05em 0 0 color-mix(in srgb, var(--c) 30%, #fff), -0.05em 0 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  50%      { text-shadow: 0.035em 0.035em 0 color-mix(in srgb, var(--c) 30%, #fff), -0.035em -0.035em 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  62.5%    { text-shadow: 0 0.05em 0 color-mix(in srgb, var(--c) 30%, #fff), 0 -0.05em 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  75%      { text-shadow: -0.035em 0.035em 0 color-mix(in srgb, var(--c) 30%, #fff), 0.035em -0.035em 0.02em color-mix(in srgb, var(--c) 50%, #000); }
  87.5%    { text-shadow: -0.05em 0 0 color-mix(in srgb, var(--c) 30%, #fff), 0.05em 0 0.02em color-mix(in srgb, var(--c) 50%, #000); }
}

.txt-staggered-shine-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;}
.txt-staggered-shine-text span {
  display: inline-block;
  background: linear-gradient(110deg, var(--c) 35%, color-mix(in srgb, var(--c) 20%, #fff) 50%, var(--c) 65%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-staggered-shine-text-glint 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes txt-staggered-shine-text-glint {
  0%        { background-position: 100% 0; transform: translateY(0); }
  16%       { transform: translateY(-0.06em); }
  34%, 100% { background-position: 0% 0; transform: translateY(0); }
}

.txt-pearlescent-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  background:
    radial-gradient(ellipse 30% 70% at 50% 35%, rgb(255 255 255 / 0.85), transparent 75%) 0 0 / 200% 100% no-repeat,
    linear-gradient(100deg, color-mix(in srgb, var(--c) 40%, #f0abfc), color-mix(in srgb, var(--c) 40%, #a5b4fc) 25%, color-mix(in srgb, var(--c) 40%, #67e8f9) 45%, color-mix(in srgb, var(--c) 40%, #f9a8d4) 70%, color-mix(in srgb, var(--c) 40%, #f0abfc)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.01em) color-mix(in srgb, color-mix(in srgb, var(--c) 50%, #581c87) 40%, transparent);
  filter: drop-shadow(0 0.03em 0.02em color-mix(in srgb, var(--c) 40%, rgb(46 16 101 / 0.4)));
  animation: txt-pearlescent-text-glide 4s ease-in-out infinite alternate;}
@keyframes txt-pearlescent-text-glide {
  from { background-position: 100% 0, 0% 0; }
  to   { background-position: 0% 0, 100% 0; }
}

.txt-ocean-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  background:
    radial-gradient(ellipse 50% 45% at 50% 50%, transparent 45%, rgb(255 255 255 / 0.55) 62%, transparent 78%) 0 0 / 1.1em 0.55em,
    radial-gradient(ellipse 50% 45% at 50% 50%, transparent 45%, rgb(165 243 252 / 0.6) 62%, transparent 78%) 0.5em 0.25em / 0.8em 0.45em,
    linear-gradient(180deg, color-mix(in srgb, var(--c) 15%, #22d3ee) 0%, color-mix(in srgb, var(--c) 15%, #0284c7) 55%, color-mix(in srgb, var(--c) 15%, #1e3a8a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-ocean-text-swell 3s linear infinite;}
@keyframes txt-ocean-text-swell {
  to { background-position: 1.1em 0.55em, -0.3em 0.25em, 0 0; }
}

.txt-iridescent-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  background:
    radial-gradient(ellipse 45% 110% at 18% 25%, color-mix(in srgb, var(--c) 35%, #ec4899), transparent 70%),
    radial-gradient(ellipse 45% 110% at 82% 75%, color-mix(in srgb, var(--c) 35%, #14b8a6), transparent 70%),
    linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 45%, #8b5cf6) 50%, var(--c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-iridescent-text-shift 6s linear infinite;}
@keyframes txt-iridescent-text-shift {
  to { filter: hue-rotate(360deg); }
}

.txt-glitter-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.02em;
  background:
    radial-gradient(circle, #fff 0 0.03em, transparent 0.06em) 0 0 / 0.43em 0.31em,
    radial-gradient(circle, #fef3c7 0 0.035em, transparent 0.065em) 0.2em 0.1em / 0.53em 0.47em,
    radial-gradient(circle, color-mix(in srgb, var(--c) 15%, #fff) 0 0.03em, transparent 0.06em) 0.35em 0.22em / 0.61em 0.37em,
    linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #ec4899), var(--c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-glitter-text-twinkle 0.8s steps(1, end) infinite;}
@keyframes txt-glitter-text-twinkle {
  0%  { background-position: 0 0, 0.2em 0.1em, 0.35em 0.22em, 0 0; }
  25% { background-position: 0.21em 0.16em, 0.04em 0.33em, 0.12em 0.05em, 0 0; }
  50% { background-position: 0.1em 0.24em, 0.37em 0.2em, 0.48em 0.3em, 0 0; }
  75% { background-position: 0.3em 0.07em, 0.27em 0.02em, 0.23em 0.14em, 0 0; }
}

@property --txt-color-morph-text-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #3b82f6;
}
@property --txt-color-morph-text-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #a855f7;
}
.txt-color-morph-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  --txt-color-morph-text-from: var(--c);
  --txt-color-morph-text-to: color-mix(in srgb, var(--c) 40%, #a855f7);
  background: linear-gradient(90deg, var(--txt-color-morph-text-from), var(--txt-color-morph-text-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
    txt-color-morph-text-a 6s ease-in-out infinite,
    txt-color-morph-text-b 6s ease-in-out -3s infinite;}
@keyframes txt-color-morph-text-a {
  0%, 100% { --txt-color-morph-text-from: var(--c); }
  33%      { --txt-color-morph-text-from: color-mix(in srgb, var(--c) 35%, #ec4899); }
  66%      { --txt-color-morph-text-from: color-mix(in srgb, var(--c) 35%, #14b8a6); }
}
@keyframes txt-color-morph-text-b {
  0%, 100% { --txt-color-morph-text-to: color-mix(in srgb, var(--c) 40%, #a855f7); }
  33%      { --txt-color-morph-text-to: color-mix(in srgb, var(--c) 30%, #22d3ee); }
  66%      { --txt-color-morph-text-to: color-mix(in srgb, var(--c) 35%, #f43f5e); }
}

@property --txt-gradient-pulse-text-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.txt-gradient-pulse-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: radial-gradient(ellipse farthest-side at 50% 50%,
    color-mix(in srgb, var(--c) 40%, #fff) 0%,
    color-mix(in srgb, var(--c) 65%, #fff) calc(var(--txt-gradient-pulse-text-r) * 0.5),
    var(--c) var(--txt-gradient-pulse-text-r));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-gradient-pulse-text-beat 1.8s ease-out infinite;}
@keyframes txt-gradient-pulse-text-beat {
  0%       { --txt-gradient-pulse-text-r: 0%; }
  12%      { --txt-gradient-pulse-text-r: 70%; }
  22%      { --txt-gradient-pulse-text-r: 40%; }
  36%      { --txt-gradient-pulse-text-r: 110%; }
  80%, 100% { --txt-gradient-pulse-text-r: 0%; }
}

.txt-blur-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-blur-rotating-text-words {
  display: inline-grid;
  color: var(--c);
}
.txt-blur-rotating-text-words span {
  grid-area: 1 / 1;
  justify-self: start;
  transform-origin: 0 60%;
  /* 4 words x 2s each = 8s */
  animation: txt-blur-rotating-text-focus 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 2s - 8s);
}
.txt-blur-rotating-text-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-blur-rotating-text-focus {
  0%, 16.25% { opacity: 1; filter: blur(0); transform: scale(1); }
  25%     { opacity: 0; filter: blur(0.22em); transform: scale(1.08); }
  91.25%  { opacity: 0; filter: blur(0.22em); transform: scale(0.92); }
  100%    { opacity: 1; filter: blur(0); transform: scale(1); }
}

.txt-split-flap-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;}
.txt-split-flap-rotating-text-board {
  position: relative;
  display: inline-grid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}
/* the hinge line across the middle of the tile */
.txt-split-flap-rotating-text-board::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgb(0 0 0 / 0.5);
}
.txt-split-flap-rotating-text-board span {
  grid-area: 1 / 1;
  position: relative;
  padding: 0.1em 0.32em;
  color: transparent;
}
.txt-split-flap-rotating-text-board span::before,
.txt-split-flap-rotating-text-board span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: 0.12em;
  background: color-mix(in srgb, var(--c) 30%, #0f172a);
  color: #f8fafc;
  text-align: center;
  /* 4 words x 2s = 8s; the extra 0.6s starts the loop on a settled tile */
  animation: 8s linear infinite;
  animation-delay: calc(var(--i) * 2s - 8.6s);
}
.txt-split-flap-rotating-text-board span::before {
  clip-path: inset(0 0 50% 0);
  animation-name: txt-split-flap-rotating-text-top;
}
.txt-split-flap-rotating-text-board span::after {
  clip-path: inset(50% 0 0 0);
  animation-name: txt-split-flap-rotating-text-bottom;
}
.txt-split-flap-rotating-text-board span:not(:first-child)::before,
.txt-split-flap-rotating-text-board span:not(:first-child)::after {
  opacity: 0;
}
/* top half: shows for its slot, then falls forward over the next word */
@keyframes txt-split-flap-rotating-text-top {
  0%, 24.99% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 1; }
  25% {
    transform: perspective(5em) rotateX(0); opacity: 1; z-index: 2;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  28.75% { transform: perspective(5em) rotateX(-90deg); opacity: 1; z-index: 2; }
  28.76%, 99.99% { transform: perspective(5em) rotateX(-90deg); opacity: 0; z-index: 1; }
  100% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 1; }
}
/* bottom half: swings down from edge-on, lands, stays until the next one covers it */
@keyframes txt-split-flap-rotating-text-bottom {
  0%, 3.75% { transform: perspective(5em) rotateX(90deg); opacity: 0; z-index: 2; }
  3.76% {
    transform: perspective(5em) rotateX(90deg); opacity: 1; z-index: 2;
    animation-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1.3);
  }
  7.5% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 2; }
  7.51%, 32.5% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 1; }
  32.51%, 100% { transform: perspective(5em) rotateX(90deg); opacity: 0; z-index: 2; }
}

.txt-pop-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-pop-rotating-words-words {
  display: inline-grid;
  color: var(--c);
}
.txt-pop-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  transform-origin: 40% 70%;
  /* 3 words x 1.8s = 5.4s */
  animation: txt-pop-rotating-words-pop 5.4s linear infinite;
  animation-delay: calc(var(--i) * 1.8s - 5.9s);
}
.txt-pop-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-pop-rotating-words-pop {
  0% {
    opacity: 0; transform: scale(0.3) rotate(-10deg);
    animation-timing-function: cubic-bezier(0.34, 1.7, 0.6, 1);
  }
  9.26% { opacity: 1; transform: scale(1) rotate(0); }
  29.63% {
    opacity: 1; transform: scale(1) rotate(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  33.33%, 100% { opacity: 0; transform: scale(0.4) rotate(6deg); }
}

.txt-wipe-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-wipe-rotating-text-words {
  position: relative;
  display: inline-grid;
  color: var(--c);
}
.txt-wipe-rotating-text-words span {
  grid-area: 1 / 1;
  /* 3 words x 2.2s = 6.6s */
  animation: txt-wipe-rotating-text-wipe 6.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 2.2s - 6.6s);
}
.txt-wipe-rotating-text-words span:not(:first-child) {
  clip-path: inset(0 100% 0 0);
}
/* the edge layer is as wide as the slot, so translateX(100%) crosses it exactly */
.txt-wipe-rotating-text-edge {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: txt-wipe-rotating-text-edge 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-wipe-rotating-text-edge::before {
  content: "";
  position: absolute;
  left: -0.04em;
  top: 0.06em;
  bottom: 0.06em;
  width: 0.08em;
  border-radius: 0.04em;
  background: currentColor;
}
@keyframes txt-wipe-rotating-text-wipe {
  0%, 24.24% { clip-path: inset(0 0 0 0); }
  33.33%       { clip-path: inset(0 0 0 100%); }
  90.91%       { clip-path: inset(0 100% 0 0); }
  100%         { clip-path: inset(0 0 0 0); }
}
@keyframes txt-wipe-rotating-text-edge {
  0%, 72.68% { transform: translateX(0); opacity: 0; }
  72.73%      { transform: translateX(0); opacity: 1; }
  88%         { opacity: 1; }
  100%        { transform: translateX(100%); opacity: 0; }
}

.txt-block-reveal-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-block-reveal-rotating-text-words {
  position: relative;
  display: inline-grid;
  color: var(--c);
}
.txt-block-reveal-rotating-text-words span {
  grid-area: 1 / 1;
  /* each word shows for one 2.2s slot, switching while the bar covers it */
  animation: txt-block-reveal-rotating-text-show 6.6s infinite;
  animation-delay: calc(var(--i) * 2.2s - 7s);
}
.txt-block-reveal-rotating-text-words span:not(:first-child) {
  opacity: 0;
}
.txt-block-reveal-rotating-text-block {
  position: absolute;
  inset: 0.04em -0.08em;
  background: var(--c);
  transform: scaleX(0);
  animation: txt-block-reveal-rotating-text-sweep 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes txt-block-reveal-rotating-text-show {
  0%, 33.33%    { opacity: 1; }
  33.34%, 100%  { opacity: 0; }
}
@keyframes txt-block-reveal-rotating-text-sweep {
  0%, 63.64% { transform: scaleX(0); transform-origin: left; }
  81.82%     { transform: scaleX(1); transform-origin: left; }
  81.86%     { transform: scaleX(1); transform-origin: right; }
  100%       { transform: scaleX(0); transform-origin: right; }
}

.txt-rotating-text-pill {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-rotating-text-pill-badge {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  animation: txt-rotating-text-pill-squish 2s ease-out infinite;
}
.txt-rotating-text-pill-window {
  display: block;
  height: 1.2em;
  overflow: hidden;
}
.txt-rotating-text-pill-track {
  display: flex;
  flex-direction: column;
  text-align: center;
  /* 3 words x 2s = 6s; the 4th span repeats the 1st so 100% matches 0% */
  animation: txt-rotating-text-pill-roll 6s cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
}
.txt-rotating-text-pill-track span {
  height: 1.2em;
}
@keyframes txt-rotating-text-pill-roll {
  0%, 23.33%     { transform: translateY(0); }
  33.33%, 56.67% { transform: translateY(-1.2em); }
  66.67%, 90%     { transform: translateY(-2.4em); }
  100%            { transform: translateY(-3.6em); }
}
@keyframes txt-rotating-text-pill-squish {
  0%, 70% { transform: scale(1); }
  80%     { transform: scale(1.07, 0.9); }
  90%     { transform: scale(0.97, 1.05); }
  100%    { transform: scale(1); }
}

.txt-underline-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-underline-rotating-words-words {
  display: inline-grid;
  color: var(--c);
}
.txt-underline-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  /* 3 words x 3s = 9s */
  animation: txt-underline-rotating-words-word 9s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 3s - 10s);
}
.txt-underline-rotating-words-words span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.09em;
  border-radius: 0.05em;
  background: currentColor;
  animation: txt-underline-rotating-words-line 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: inherit;
}
.txt-underline-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-underline-rotating-words-word {
  0%      { opacity: 0; transform: translateY(0.35em); }
  4.44%   { opacity: 1; transform: translateY(0); }
  29.44% {
    opacity: 1; transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  33.33%  { opacity: 0; transform: translateY(-0.35em); }
  100%    { opacity: 0; transform: translateY(0.35em); }
}
@keyframes txt-underline-rotating-words-line {
  0%, 3.33% { transform: scaleX(0); transform-origin: left; }
  9.44%    { transform: scaleX(1); transform-origin: left; }
  25%       { transform: scaleX(1); transform-origin: right; }
  28.89%, 100% { transform: scaleX(0); transform-origin: right; }
}

.txt-falling-letters-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-falling-letters-rotating-text-words {
  display: inline-grid;
  color: var(--c);
}
.txt-falling-letters-rotating-text-words > span {
  grid-area: 1 / 1;
  display: flex;
}
.txt-falling-letters-rotating-text-words span span {
  display: inline-block;
  /* 3 words x 2.2s = 6.6s, plus 40ms per letter */
  animation: txt-falling-letters-rotating-text-drop 6.6s infinite;
  animation-delay: calc(var(--i) * 40ms + var(--w) * 2.2s - 7.3s);
}
.txt-falling-letters-rotating-text-words > span:not(:first-child) span {
  opacity: 0;
}
@keyframes txt-falling-letters-rotating-text-drop {
  0% {
    opacity: 0; transform: translateY(-0.6em);
    animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1);
  }
  6.06% { opacity: 1; transform: translateY(0); }
  28.03% {
    opacity: 1; transform: translateY(0) rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  33.33% { opacity: 0; transform: translateY(0.7em) rotate(calc(var(--i) * 9deg - 25deg)); }
  100%   { opacity: 0; transform: translateY(-0.6em); }
}

.txt-flip-card-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-flip-card-rotating-text-card {
  display: inline-grid;
}
.txt-flip-card-rotating-text-card span {
  grid-area: 1 / 1;
  padding: 0.04em 0.45em 0.08em;
  border-radius: 0.24em;
  background: var(--c);
  color: #fff;
  text-align: center;
  backface-visibility: hidden;
  /* 3 words x 2s = 6s */
  animation: txt-flip-card-rotating-text-flip 6s cubic-bezier(0.45, 0, 0.25, 1.3) infinite;
  animation-delay: calc(var(--i) * 2s - 6s);
}
.txt-flip-card-rotating-text-card span:not(:first-child) {
  opacity: 0;
}
/* out: 0 to -180deg; in: 180deg to 0, on the same beat, so the pair reads as one card */
@keyframes txt-flip-card-rotating-text-flip {
  0%, 21.67% { transform: perspective(6em) rotateY(0); }
  0%, 32% { opacity: 1; }
  33.33% { transform: perspective(6em) rotateY(-180deg); opacity: 0; }
  33.34% { transform: perspective(6em) rotateY(180deg); opacity: 0; }
  34%, 100% { opacity: 1; }
  88.33% { transform: perspective(6em) rotateY(180deg); }
  100%   { transform: perspective(6em) rotateY(0); }
}

.txt-smoke-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-smoke-rotating-text-words {
  display: inline-grid;
  color: var(--c);
}
.txt-smoke-rotating-text-words > span {
  grid-area: 1 / 1;
  display: flex;
}
.txt-smoke-rotating-text-words span span {
  display: inline-block;
  /* 3 words x 2.4s = 7.2s, plus 60ms per letter */
  animation: txt-smoke-rotating-text-drift 7.2s cubic-bezier(0.3, 0.6, 0.4, 1) infinite;
  animation-delay: calc(var(--i) * 60ms + var(--w) * 2.4s - 8s);
}
.txt-smoke-rotating-text-words > span:not(:first-child) span {
  opacity: 0;
}
@keyframes txt-smoke-rotating-text-drift {
  0%     { opacity: 0; transform: translate(0, 0.2em) rotate(0) scale(1); filter: blur(0.12em); }
  8.33%  { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0); }
  22.22% {
    opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  27.78% {
    opacity: 0.55; transform: translate(0.12em, -0.35em) rotate(calc(var(--i) * 4deg - 6deg)) scale(1.15);
    filter: blur(0.08em);
  }
  33.33% {
    opacity: 0; transform: translate(0.3em, -0.9em) rotate(calc(var(--i) * 9deg - 14deg)) scale(1.5);
    filter: blur(0.25em);
  }
  100%   { opacity: 0; transform: translate(0, 0.2em) rotate(0) scale(1); filter: blur(0.12em); }
}

.txt-horizontal-text-carousel {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  white-space: nowrap;}
.txt-horizontal-text-carousel-words {
  display: inline-grid;
  padding: 0 0.35em;
  overflow: hidden;
  color: var(--c);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.35em, #000 calc(100% - 0.35em), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 0.35em, #000 calc(100% - 0.35em), transparent);
}
.txt-horizontal-text-carousel-words span {
  grid-area: 1 / 1;
  /* 3 words x 2.2s = 6.6s */
  animation: txt-horizontal-text-carousel-slide 6.6s cubic-bezier(0.7, 0, 0.25, 1) infinite;
  animation-delay: calc(var(--i) * 2.2s - 6.6s);
}
.txt-horizontal-text-carousel-words span:not(:first-child) {
  transform: translateX(calc(100% + 0.4em));
}
@keyframes txt-horizontal-text-carousel-slide {
  0%, 24.24%     { transform: translateX(0); opacity: 1; }
  /* fully out of the slot and faded before it jumps back to the right */
  33.33%          { transform: translateX(calc(-100% - 0.4em)); opacity: 0; }
  33.34%          { transform: translateX(calc(100% + 0.4em)); opacity: 0; }
  90.91%          { transform: translateX(calc(100% + 0.4em)); opacity: 1; }
  100%            { transform: translateX(0); opacity: 1; }
}

.txt-bouncing-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-bouncing-rotating-words-words {
  display: inline-grid;
  color: var(--c);
}
.txt-bouncing-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  transform-origin: 50% 100%;
  /* 3 words x 2.2s = 6.6s */
  animation: txt-bouncing-rotating-words-drop 6.6s infinite;
  animation-delay: calc(var(--i) * 2.2s - 7.6s);
}
.txt-bouncing-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-bouncing-rotating-words-drop {
  0% {
    opacity: 0; transform: translateY(-1.1em) scale(0.9, 1.12);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  3.03%  { opacity: 1; }
  5.3% {
    transform: translateY(0) scale(1.18, 0.82);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  7.58% {
    transform: translateY(-0.2em) scale(0.96, 1.05);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  9.7%  { transform: translateY(0) scale(1.06, 0.94); }
  11.52% { transform: translateY(0) scale(1); }
  28.79% {
    opacity: 1; transform: translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  33.33%  { opacity: 0; transform: translateY(0.6em) scale(1); }
  100%    { opacity: 0; transform: translateY(-1.1em) scale(0.9, 1.12); }
}

.txt-sliding-highlight-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;}
/* a white copy of the line on an accent fill, clipped to the pill.
   Monospace makes every word a known width: Plan. (0-5ch) Build. (6-12ch) Ship. (13-18ch),
   and the copy is 0.35ch wider on each side to pad the pill */
.txt-sliding-highlight-text-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.35ch;
  right: -0.35ch;
  padding: 0 0.35ch;
  background: var(--c);
  color: #fff;
  clip-path: inset(0 13ch 0 0 round 0.2em);
  /* 3 words x 1.5s = 4.5s; halfway through each move the front edge is nearly there */
  animation: txt-sliding-highlight-text-slide 4.5s infinite;
}
@keyframes txt-sliding-highlight-text-slide {
  0%, 22.22% {
    clip-path: inset(0 13ch 0 0 round 0.2em);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.6);
  }
  27.78% {
    clip-path: inset(0 7.05ch 0 0.9ch round 0.2em);
    animation-timing-function: cubic-bezier(0.2, 0.4, 0.45, 1);
  }
  33.33%, 55.56% {
    clip-path: inset(0 6ch 0 6ch round 0.2em);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.6);
  }
  61.11% {
    clip-path: inset(0 0.9ch 0 7.05ch round 0.2em);
    animation-timing-function: cubic-bezier(0.2, 0.4, 0.45, 1);
  }
  66.67%, 88.89% {
    clip-path: inset(0 0 0 13ch round 0.2em);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.6);
  }
  94.44% {
    clip-path: inset(0 1.95ch 0 1.95ch round 0.2em);
    animation-timing-function: cubic-bezier(0.2, 0.4, 0.45, 1);
  }
  100% { clip-path: inset(0 13ch 0 0 round 0.2em); }
}

.txt-color-changing-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  --c2: color-mix(in oklch, var(--c) 40%, #ec4899);
  --c3: color-mix(in oklch, var(--c) 40%, #f59e0b);
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-color-changing-rotating-words-dot {
  align-self: center;
  width: 0.36em;
  height: 0.36em;
  margin-right: 0.08em;
  border-radius: 50%;
  background: var(--c);
  animation:
    txt-color-changing-rotating-words-tint 6.6s ease-in-out infinite,
    txt-color-changing-rotating-words-bump 2.2s ease-out infinite;
}
.txt-color-changing-rotating-words-words {
  display: inline-grid;
}
.txt-color-changing-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  color: var(--c);
  transform-origin: 0 100%;
  /* 3 words x 2.2s = 6.6s */
  animation: txt-color-changing-rotating-words-tilt 6.6s cubic-bezier(0.3, 0.9, 0.3, 1) infinite;
  animation-delay: calc(var(--i) * 2.2s - 7.4s);
}
.txt-color-changing-rotating-words-words span:nth-child(2) { color: var(--c2); }
.txt-color-changing-rotating-words-words span:nth-child(3) { color: var(--c3); }
.txt-color-changing-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-color-changing-rotating-words-tilt {
  0% { opacity: 0; transform: translateY(0.55em) rotate(-8deg); }
  8.33% { opacity: 1; transform: translateY(0) rotate(0); }
  28.79% {
    opacity: 1; transform: translateY(0) rotate(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  33.33% { opacity: 0; transform: translateY(-0.5em) rotate(4deg); }
  100%   { opacity: 0; transform: translateY(0.55em) rotate(-8deg); }
}
/* the dot follows the words: they arrive at 1.4s, 3.6s and 5.8s */
@keyframes txt-color-changing-rotating-words-tint {
  0%, 21.21%     { background: var(--c); }
  27.27%, 54.55% { background: var(--c2); }
  60.61%, 87.88% { background: var(--c3); }
  93.94%, 100%   { background: var(--c); }
}
@keyframes txt-color-changing-rotating-words-bump {
  0%, 61.36% { transform: scale(1); }
  72.73%     { transform: scale(1.5); }
  88.64%, 100% { transform: scale(1); }
}

.txt-scrolling-word-list {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-scrolling-word-list-list {
  display: inline-grid;
}
.txt-scrolling-word-list-dim,
.txt-scrolling-word-list-lit {
  grid-area: 1 / 1;
  height: 3.6em;
  overflow: hidden;
}
.txt-scrolling-word-list-dim {
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(transparent, #000 45%, #000 55%, transparent);
  mask-image: linear-gradient(transparent, #000 45%, #000 55%, transparent);
}
/* only the middle row of the bright copy shows */
.txt-scrolling-word-list-lit {
  color: var(--c);
  clip-path: inset(1.2em 0 1.2em 0);
}
.txt-scrolling-word-list-track {
  display: flex;
  flex-direction: column;
  /* 5 words x 1.7s = 8.5s; the list starts with the last word and ends with the first two */
  animation: txt-scrolling-word-list-scroll 8.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-scrolling-word-list-track span {
  height: 1.2em;
}
@keyframes txt-scrolling-word-list-scroll {
  0%, 14.12% { transform: translateY(0); }
  20%, 34.12% { transform: translateY(-1.2em); }
  40%, 54.12% { transform: translateY(-2.4em); }
  60%, 74.12% { transform: translateY(-3.6em); }
  80%, 94.12% { transform: translateY(-4.8em); }
  100% { transform: translateY(-6em); }
}

.txt-hello-in-languages-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  white-space: nowrap;}
.txt-hello-in-languages-text-hello,
.txt-hello-in-languages-text-lang {
  display: grid;
  justify-items: center;
}
.txt-hello-in-languages-text-hello {
  font-size: 1.35em;
  color: var(--c);
}
.txt-hello-in-languages-text-lang {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}
.txt-hello-in-languages-text-hello span {
  grid-area: 1 / 1;
  /* 5 greetings x 1.8s = 9s */
  animation: txt-hello-in-languages-text-in 9s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 1.8s - 9.7s);
}
.txt-hello-in-languages-text-lang span {
  grid-area: 1 / 1;
  animation: txt-hello-in-languages-text-fade 9s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 1.8s - 9.7s);
}
.txt-hello-in-languages-text-hello span:not(:first-child),
.txt-hello-in-languages-text-lang span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-hello-in-languages-text-in {
  0%     { opacity: 0; letter-spacing: 0.3em; filter: blur(0.06em); }
  7.78% { opacity: 1; letter-spacing: 0; filter: blur(0); }
  16.11% {
    opacity: 1; letter-spacing: 0; filter: blur(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  20%, 100% { opacity: 0; letter-spacing: -0.02em; filter: blur(0.06em); }
}
@keyframes txt-hello-in-languages-text-fade {
  0%     { opacity: 0; }
  7.78% { opacity: 1; }
  16.11% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

.txt-emoji-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-emoji-rotating-words-icons,
.txt-emoji-rotating-words-words {
  display: inline-grid;
}
.txt-emoji-rotating-words-words {
  margin-left: -0.05em;
  color: var(--c);
}
.txt-emoji-rotating-words-icons span,
.txt-emoji-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  /* 3 words x 2.2s = 6.6s; the word lags the emoji by 0.1s */
  animation: 6.6s infinite;
  animation-delay: calc(var(--i) * 2.2s - 7.4s);
}
.txt-emoji-rotating-words-icons span {
  animation-name: txt-emoji-rotating-words-spin;
}
.txt-emoji-rotating-words-words span {
  animation-name: txt-emoji-rotating-words-rise;
  animation-delay: calc(var(--i) * 2.2s - 7.3s);
}
.txt-emoji-rotating-words-icons span:not(:first-child),
.txt-emoji-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-emoji-rotating-words-spin {
  0% {
    opacity: 0; transform: scale(0) rotate(-120deg);
    animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  7.58% { opacity: 1; transform: scale(1) rotate(0); }
  29.55% {
    opacity: 1; transform: scale(1) rotate(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  33.33%, 100% { opacity: 0; transform: scale(0) rotate(60deg); }
}
@keyframes txt-emoji-rotating-words-rise {
  0% {
    opacity: 0; transform: translateY(0.45em);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  6.82% { opacity: 1; transform: translateY(0); }
  28.79% {
    opacity: 1; transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  32.58%, 100% { opacity: 0; transform: translateY(-0.4em); }
}

.txt-morphing-text-effect {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;}
.txt-morphing-text-effect-defs {
  position: absolute;
  width: 0;
  height: 0;
}
.txt-morphing-text-effect-words {
  display: grid;
  justify-items: center;
  font-size: 1.3em;
  color: var(--c);
  filter: url(#txt-morphing-text-effect-goo);
}
.txt-morphing-text-effect-words span {
  grid-area: 1 / 1;
  /* 4 words x 2s = 8s */
  animation: txt-morphing-text-effect-melt 8s linear infinite;
  animation-delay: calc(var(--i) * 2s - 8s);
}
.txt-morphing-text-effect-words span:not(:first-child) {
  opacity: 0;
}
/* blur grows as 1/(1 - t) and opacity falls as (1 - t)^0.4: the words stay
   legible until the middle of the morph, then melt fast */
@keyframes txt-morphing-text-effect-melt {
  0%, 12.5% { opacity: 1; filter: blur(0); }
  15.63%    { opacity: 0.89; filter: blur(0.025em); }
  18.75%    { opacity: 0.76; filter: blur(0.075em); }
  21.88%    { opacity: 0.57; filter: blur(0.22em); }
  25%, 87.5% { opacity: 0; filter: blur(0.5em); }
  90.63%    { opacity: 0.57; filter: blur(0.22em); }
  93.75%    { opacity: 0.76; filter: blur(0.075em); }
  96.88%    { opacity: 0.89; filter: blur(0.025em); }
  100%      { opacity: 1; filter: blur(0); }
}

.txt-odometer-word-roll {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-odometer-word-roll-word {
  display: inline-flex;
  gap: 0.06em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--c);
}
/* one drum per letter */
.txt-odometer-word-roll-word > span {
  height: 1.2em;
  padding: 0 0.08em;
  overflow: hidden;
  border-radius: 0.12em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.txt-odometer-word-roll-word > span > span {
  display: flex;
  flex-direction: column;
  /* 4 words x 1.8s = 7.2s; each drum starts 70ms after the one on its left */
  animation: txt-odometer-word-roll-turn 7.2s cubic-bezier(0.45, 0, 0.25, 1.3) infinite;
  animation-delay: calc(var(--i) * 70ms);
}
.txt-odometer-word-roll-word > span > span > span {
  height: 1.2em;
}
@keyframes txt-odometer-word-roll-turn {
  0%, 17.36%    { transform: translateY(0); }
  25%, 42.36%   { transform: translateY(-1.2em); }
  50%, 67.36%   { transform: translateY(-2.4em); }
  75%, 92.36%   { transform: translateY(-3.6em); }
  100%         { transform: translateY(-4.8em); }
}

.txt-strikethrough-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-strikethrough-rotating-text-words {
  display: inline-grid;
}
.txt-strikethrough-rotating-text-words span {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  color: var(--c);
  /* 3 words x 2.6s = 7.8s */
  animation: txt-strikethrough-rotating-text-word 7.8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 2.6s - 8.3s);
}
.txt-strikethrough-rotating-text-words span::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 52%;
  height: 0.09em;
  border-radius: 0.05em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  animation: txt-strikethrough-rotating-text-strike 7.8s cubic-bezier(0.6, 0, 0.3, 1) infinite;
  animation-delay: inherit;
}
.txt-strikethrough-rotating-text-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-strikethrough-rotating-text-word {
  0%     { opacity: 0; transform: translateY(0.3em); color: var(--c); }
  4.49%  { opacity: 1; transform: translateY(0); }
  15.38% { color: var(--c); }
  20.51% { color: color-mix(in srgb, var(--c) 45%, transparent); }
  28.85% {
    opacity: 1; transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  33.33% { opacity: 0; transform: translateY(-0.3em); }
  100%   { opacity: 0; transform: translateY(0.3em); color: var(--c); }
}
@keyframes txt-strikethrough-rotating-text-strike {
  0%, 15.38% { transform: scaleX(0); }
  20.51%, 100% { transform: scaleX(1); }
}

.txt-highlighter-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-highlighter-rotating-words-words {
  display: inline-grid;
}
.txt-highlighter-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  /* 3 words x 2.4s = 7.2s */
  animation: txt-highlighter-rotating-words-word 7.2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 2.4s - 8.1s);
}
.txt-highlighter-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
/* the marker stroke, behind the letters */
.txt-highlighter-rotating-words-words span::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.42em;
  bottom: 0.04em;
  left: -0.1em;
  right: -0.1em;
  border-radius: 0.08em 0.3em 0.12em 0.25em;
  background: color-mix(in srgb, var(--c) 38%, transparent);
  transform: skewX(-14deg) rotate(-1.5deg) scaleX(0);
  transform-origin: left;
  animation: txt-highlighter-rotating-words-mark 7.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: inherit;
}
@keyframes txt-highlighter-rotating-words-word {
  0%     { opacity: 0; transform: translateY(0.15em); }
  4.17%  { opacity: 1; transform: translateY(0); }
  29.17% {
    opacity: 1; transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  33.33% { opacity: 0; transform: translateY(0.12em); }
  100%   { opacity: 0; transform: translateY(0.15em); }
}
@keyframes txt-highlighter-rotating-words-mark {
  0%, 4.17% { transform: skewX(-14deg) rotate(-1.5deg) scaleX(0); }
  11.11%, 100% { transform: skewX(-14deg) rotate(-1.5deg) scaleX(1); }
}

.txt-code-token-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  white-space: nowrap;
  color: color-mix(in srgb, currentColor 55%, transparent);}
.txt-code-token-rotating-text-token {
  display: inline-flex;
  align-items: center;
  padding: 0 0.12em;
  border-radius: 0.12em;
  color: var(--c);
  animation: txt-code-token-rotating-text-flash 1.8s ease-out infinite;
}
.txt-code-token-rotating-text-window {
  display: block;
  height: 1.2em;
  overflow: hidden;
}
.txt-code-token-rotating-text-track {
  display: flex;
  flex-direction: column;
  /* 4 values x 1.8s = 7.2s; the 5th repeats the 1st */
  animation: txt-code-token-rotating-text-flick 7.2s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
.txt-code-token-rotating-text-track span {
  height: 1.2em;
}
@keyframes txt-code-token-rotating-text-flick {
  0%, 20.83%      { transform: translateY(0); }
  25%, 45.83%     { transform: translateY(-1.2em); }
  50%, 70.83%     { transform: translateY(-2.4em); }
  75%, 95.83%     { transform: translateY(-3.6em); }
  100%          { transform: translateY(-4.8em); }
}
@keyframes txt-code-token-rotating-text-flash {
  0%, 82% { background: transparent; }
  92%     { background: color-mix(in srgb, var(--c) 22%, transparent); }
  100%    { background: transparent; }
}

.txt-picker-wheel-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
/* padded so the mask covers the rows above and below, with no effect on layout */
.txt-picker-wheel-rotating-text-scene {
  position: relative;
  display: inline-grid;
  margin: -1.5em 0;
  padding: 1.5em 0.25em;
  perspective: 8em;
  color: var(--c);
  -webkit-mask-image: linear-gradient(transparent 4%, #000 36%, #000 64%, transparent 96%);
  mask-image: linear-gradient(transparent 4%, #000 36%, #000 64%, transparent 96%);
}
.txt-picker-wheel-rotating-text-scene::before {
  content: "";
  position: absolute;
  inset: 1.5em 0;
  border-radius: 0.22em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.txt-picker-wheel-rotating-text-wheel {
  display: grid;
  transform-style: preserve-3d;
  /* 6 faces x 1.4s = 8.4s; pushed back by the radius so the front face sits at true size */
  animation: txt-picker-wheel-rotating-text-spin 8.4s cubic-bezier(0.6, 0, 0.3, 1.25) infinite;
}
.txt-picker-wheel-rotating-text-wheel span {
  grid-area: 1 / 1;
  text-align: center;
  backface-visibility: hidden;
  /* radius = half a row / tan(30deg) = 0.6em / 0.577 */
  transform: rotateX(calc(var(--i) * -60deg)) translateZ(1.04em);
}
@keyframes txt-picker-wheel-rotating-text-spin {
  0%, 10.71% { transform: translateZ(-1.04em) rotateX(0deg); }
  16.67%, 27.38% { transform: translateZ(-1.04em) rotateX(60deg); }
  33.33%, 44.05% { transform: translateZ(-1.04em) rotateX(120deg); }
  50%, 60.71% { transform: translateZ(-1.04em) rotateX(180deg); }
  66.67%, 77.38% { transform: translateZ(-1.04em) rotateX(240deg); }
  83.33%, 94.05% { transform: translateZ(-1.04em) rotateX(300deg); }
  100% { transform: translateZ(-1.04em) rotateX(360deg); }
}

.txt-glitch-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-glitch-rotating-text-words {
  display: inline-grid;
  color: var(--c);
}
.txt-glitch-rotating-text-words span {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  /* 3 words x 2.2s = 6.6s; each word cuts in, glitches for 0.26s, then holds */
  animation: txt-glitch-rotating-text-cut 6.6s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 2.2s - 7.1s);
}
.txt-glitch-rotating-text-words span:not(:first-child) {
  opacity: 0;
}
.txt-glitch-rotating-text-words span::before,
.txt-glitch-rotating-text-words span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: inset(50% 0 50% 0);
  animation: 6.6s steps(1, end) infinite;
  animation-delay: inherit;
}
.txt-glitch-rotating-text-words span::before {
  color: color-mix(in srgb, var(--c) 45%, #ec4899);
  animation-name: txt-glitch-rotating-text-slice-a;
}
.txt-glitch-rotating-text-words span::after {
  color: color-mix(in srgb, var(--c) 45%, #22d3ee);
  animation-name: txt-glitch-rotating-text-slice-b;
}
@keyframes txt-glitch-rotating-text-cut {
  0%     { opacity: 1; transform: translateX(0.06em) skewX(-10deg); }
  0.91%  { opacity: 1; transform: translateX(-0.05em) skewX(8deg); }
  1.82%  { opacity: 1; transform: translateX(0.03em) skewX(-3deg); }
  2.73%  { opacity: 1; transform: translateX(-0.02em) skewX(0); }
  3.94%  { opacity: 1; transform: none; }
  33.33%, 100% { opacity: 0; transform: none; }
}
@keyframes txt-glitch-rotating-text-slice-a {
  0%     { clip-path: inset(8% 0 58% 0); transform: translateX(-0.1em); }
  0.91%  { clip-path: inset(62% 0 12% 0); transform: translateX(0.12em); }
  1.82%  { clip-path: inset(30% 0 44% 0); transform: translateX(-0.06em); }
  2.73%  { clip-path: inset(78% 0 4% 0); transform: translateX(0.08em); }
  3.94%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes txt-glitch-rotating-text-slice-b {
  0%     { clip-path: inset(55% 0 20% 0); transform: translateX(0.1em); }
  0.91%  { clip-path: inset(12% 0 70% 0); transform: translateX(-0.08em); }
  1.82%  { clip-path: inset(70% 0 8% 0); transform: translateX(0.05em); }
  2.73%  { clip-path: inset(20% 0 60% 0); transform: translateX(-0.1em); }
  3.94%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
}

.txt-auto-width-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-auto-width-rotating-text-chip {
  display: block;
  /* width in ch = letters in the word; content-box keeps the padding outside it */
  box-sizing: content-box;
  width: 8ch;
  height: 1.2em;
  padding: 0.04em 0.3em;
  overflow: hidden;
  border-radius: 0.22em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--c);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 4 words x 2s = 8s */
  animation: txt-auto-width-rotating-text-fit 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-auto-width-rotating-text-track {
  display: flex;
  flex-direction: column;
  animation: txt-auto-width-rotating-text-roll 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-auto-width-rotating-text-track span {
  height: 1.2em;
}
@keyframes txt-auto-width-rotating-text-fit {
  0%, 18.13%   { width: 8ch; }
  25%, 43.13%  { width: 3ch; }
  50%, 68.13%  { width: 6ch; }
  75%, 93.13%  { width: 7ch; }
  100%         { width: 8ch; }
}
@keyframes txt-auto-width-rotating-text-roll {
  0%, 18.13%   { transform: translateY(0); }
  25%, 43.13%  { transform: translateY(-1.2em); }
  50%, 68.13%  { transform: translateY(-2.4em); }
  75%, 93.13%  { transform: translateY(-3.6em); }
  100%         { transform: translateY(-4.8em); }
}

.txt-slot-machine-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-slot-machine-rotating-words-reel {
  position: relative;
  display: block;
  height: 1.2em;
  padding: 0 0.3em;
  overflow: hidden;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
/* shading at the top and bottom sells the curve of the drum */
.txt-slot-machine-rotating-words-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(color-mix(in srgb, var(--c) 35%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, var(--c) 35%, transparent));
}
.txt-slot-machine-rotating-words-strip {
  display: flex;
  flex-direction: column;
  text-align: center;
  /* 21 rows: every spin travels 5 rows and lands on the next word */
  animation:
    txt-slot-machine-rotating-words-spin 8.8s cubic-bezier(0.5, 0, 0.15, 1.04) infinite,
    txt-slot-machine-rotating-words-blur 2.2s linear infinite;
}
.txt-slot-machine-rotating-words-strip span {
  height: 1.2em;
}
@keyframes txt-slot-machine-rotating-words-spin {
  0%, 13.64%    { transform: translateY(0); }
  25%, 38.64%   { transform: translateY(-6em); }
  50%, 63.64%   { transform: translateY(-12em); }
  75%, 88.64%   { transform: translateY(-18em); }
  100%         { transform: translateY(-24em); }
}
@keyframes txt-slot-machine-rotating-words-blur {
  0%, 56% { filter: blur(0); }
  72%     { filter: blur(0.06em); }
  92%, 100% { filter: blur(0); }
}

.txt-hinge-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;}
.txt-hinge-rotating-words-words {
  display: inline-grid;
  color: var(--c);
}
.txt-hinge-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  /* the pivot: top of the first letter */
  transform-origin: 0.1em 25%;
  /* 3 words x 2.8s = 8.4s */
  animation: txt-hinge-rotating-words-hinge 8.4s infinite;
  animation-delay: calc(var(--i) * 2.8s - 9s);
}
.txt-hinge-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-hinge-rotating-words-hinge {
  0% {
    opacity: 0; transform: translateY(-0.5em) rotate(0);
    animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  5.36%  { opacity: 1; transform: translateY(0) rotate(0); }
  21.43% {
    opacity: 1; transform: translateY(0) rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45);
  }
  25%  { transform: translateY(0) rotate(38deg); animation-timing-function: ease-in-out; }
  26.79% { transform: translateY(0) rotate(24deg); animation-timing-function: ease-in-out; }
  28.33% { transform: translateY(0) rotate(34deg); animation-timing-function: ease-in-out; }
  29.52% {
    opacity: 1; transform: translateY(0) rotate(29deg);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  33.33% { opacity: 0; transform: translateY(1.2em) rotate(33deg); }
  100%   { opacity: 0; transform: translateY(-0.5em) rotate(0); }
}

@property --txt-progress-rotating-words-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.txt-progress-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  gap: 0.32em;
  white-space: nowrap;
  /* counts 0 to 4 over the whole cycle, one unit per word */
  animation: txt-progress-rotating-words-count 8.8s linear infinite;}
.txt-progress-rotating-words-line {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
}
.txt-progress-rotating-words-words {
  display: inline-grid;
  color: var(--c);
}
.txt-progress-rotating-words-words span {
  grid-area: 1 / 1;
  justify-self: start;
  /* 4 words x 2.2s = 8.8s, in step with the bars */
  animation: txt-progress-rotating-words-swap 8.8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 2.2s - 8.8s);
}
.txt-progress-rotating-words-words span:not(:first-child) {
  opacity: 0;
}
.txt-progress-rotating-words-bars {
  display: flex;
  gap: 0.18em;
}
.txt-progress-rotating-words-bars i {
  flex: 1;
  height: 0.1em;
  border-radius: 0.05em;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  overflow: hidden;
}
/* segment i shows how far the count has got past i, clamped to 0-1 */
.txt-progress-rotating-words-bars i::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--c);
  transform-origin: left;
  transform: scaleX(clamp(0, var(--txt-progress-rotating-words-p) - var(--i), 1));
}
@keyframes txt-progress-rotating-words-count {
  from { --txt-progress-rotating-words-p: 0; }
  to   { --txt-progress-rotating-words-p: 4; }
}
@keyframes txt-progress-rotating-words-swap {
  0%     { opacity: 0; transform: translateY(0.35em); }
  3.98%  { opacity: 1; transform: translateY(0); }
  22.16% {
    opacity: 1; transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  25%    { opacity: 0; transform: translateY(-0.35em); }
  100%   { opacity: 0; transform: translateY(0.35em); }
}

.txt-bracket-rotating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;}
.txt-bracket-rotating-text-slot {
  position: relative;
  display: inline-grid;
  padding: 0 0.45em;
  color: var(--c);
}
.txt-bracket-rotating-text-slot span {
  grid-area: 1 / 1;
  justify-self: center;
  /* 3 words x 2s = 6s */
  animation: txt-bracket-rotating-text-word 6s infinite;
  animation-delay: calc(var(--i) * 2s - 6s);
}
.txt-bracket-rotating-text-slot span:not(:first-child) {
  opacity: 0;
}
/* each bracket sits on a layer half the slot wide */
.txt-bracket-rotating-text-open,
.txt-bracket-rotating-text-close {
  position: absolute;
  top: 0.08em;
  bottom: 0.08em;
  width: 50%;
  animation: 2s infinite;
}
.txt-bracket-rotating-text-open {
  left: 0;
  animation-name: txt-bracket-rotating-text-open;
}
.txt-bracket-rotating-text-close {
  right: 0;
  animation-name: txt-bracket-rotating-text-close;
}
.txt-bracket-rotating-text-open::before,
.txt-bracket-rotating-text-close::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.22em;
  border: 0.1em solid currentColor;
  border-radius: 0.04em;
}
.txt-bracket-rotating-text-open::before {
  left: 0;
  border-right: 0;
}
.txt-bracket-rotating-text-close::before {
  right: 0;
  border-left: 0;
}
@keyframes txt-bracket-rotating-text-open {
  0%, 70% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  85%     { transform: translateX(calc(100% - 0.36em)); animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); }
  100%    { transform: translateX(0); }
}
@keyframes txt-bracket-rotating-text-close {
  0%, 70% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  85%     { transform: translateX(calc(-100% + 0.36em)); animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); }
  100%    { transform: translateX(0); }
}
@keyframes txt-bracket-rotating-text-word {
  0%, 23.33% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  28.33%     { opacity: 0; transform: scaleX(0.1); }
  95%        { opacity: 0; transform: scaleX(0.1); animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); }
  100%       { opacity: 1; transform: scaleX(1); }
}

.txt-card-stack-rotating-words {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;}
.txt-card-stack-rotating-words-deck {
  display: inline-grid;
}
.txt-card-stack-rotating-words-deck span {
  grid-area: 1 / 1;
  padding: 0.04em 0.4em 0.08em;
  border-radius: 0.24em;
  background: var(--c);
  color: #fff;
  text-align: center;
  transform-origin: 50% 0;
  /* 4 cards x 2s = 8s: back, then front, then flicked away */
  animation: txt-card-stack-rotating-words-deal 8s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
  animation-delay: calc(var(--i) * 2s - 8s);
}
.txt-card-stack-rotating-words-deck span:first-child {
  z-index: 3;
}
.txt-card-stack-rotating-words-deck span:not(:first-child) {
  opacity: 0;
}
@keyframes txt-card-stack-rotating-words-deal {
  0% { opacity: 1; color: #fff; transform: translate(0, 0) rotate(0) scale(1); z-index: 3; }
  18.75% {
    opacity: 1; color: #fff; transform: translate(0, 0) rotate(0) scale(1); z-index: 4;
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  25%    { opacity: 0; transform: translate(0.9em, 0.5em) rotate(14deg) scale(1); z-index: 4; }
  68.75% { opacity: 0; transform: translate(0, -0.5em) rotate(0) scale(0.76); z-index: 1; }
  /* waiting at the back: a lighter card with its word hidden */
  75%, 93.75% { opacity: 0.45; color: transparent; transform: translate(0, -0.3em) rotate(0) scale(0.88); z-index: 2; }
  100%   { opacity: 1; color: #fff; transform: translate(0, 0) rotate(0) scale(1); z-index: 3; }
}

.txt-rgb-split-glitch {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--c);
  letter-spacing: 0.06em;
  animation: txt-rgb-split-glitch-shake 2.6s steps(1, end) infinite;}
.txt-rgb-split-glitch::before,
.txt-rgb-split-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  animation: 2.6s steps(1, end) infinite;
}
.txt-rgb-split-glitch::before {
  color: #ff2d78;
  animation-name: txt-rgb-split-glitch-red;
}
.txt-rgb-split-glitch::after {
  color: #00c2ff;
  animation-name: txt-rgb-split-glitch-cyan;
}
@keyframes txt-rgb-split-glitch-red {
  0%, 89%, 100% { transform: translate(-0.05em, 0); }
  10% { transform: translate(-0.07em, 0.02em); }
  14% { transform: translate(-0.02em, -0.01em); }
  30% { transform: translate(-0.05em, 0); }
  46% { transform: translate(-0.14em, 0.03em); }
  49% { transform: translate(0.06em, -0.02em); }
  52% { transform: translate(-0.05em, 0); }
  74% { transform: translate(-0.03em, 0.01em); }
  86% { transform: translate(-0.1em, -0.02em); }
}
@keyframes txt-rgb-split-glitch-cyan {
  0%, 89%, 100% { transform: translate(0.05em, 0); }
  10% { transform: translate(0.03em, -0.02em); }
  14% { transform: translate(0.06em, 0.01em); }
  30% { transform: translate(0.05em, 0); }
  46% { transform: translate(0.12em, -0.03em); }
  49% { transform: translate(-0.07em, 0.02em); }
  52% { transform: translate(0.05em, 0); }
  74% { transform: translate(0.05em, -0.01em); }
  86% { transform: translate(0.09em, 0.02em); }
}
@keyframes txt-rgb-split-glitch-shake {
  0%, 52%, 89%, 100% { transform: none; }
  46% { transform: translateX(0.03em) skewX(-8deg); }
  49% { transform: translateX(-0.03em); }
  86% { transform: translateX(-0.02em) skewX(5deg); }
}

.txt-slice-glitch {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: transparent;
  letter-spacing: 0.05em;}
.txt-slice-glitch::before,
.txt-slice-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--c);
  animation: 3s steps(1, end) infinite;
}
.txt-slice-glitch::before {
  clip-path: inset(0 0 50% 0);
  animation-name: txt-slice-glitch-top;
}
.txt-slice-glitch::after {
  clip-path: inset(50% 0 0 0);
  animation-name: txt-slice-glitch-bottom;
}
/* the two halves always share one cut line */
@keyframes txt-slice-glitch-top {
  0%, 36%, 48%, 78%, 86%, 100% { clip-path: inset(0 0 50% 0); transform: none; }
  38% { clip-path: inset(0 0 62% 0); transform: translateX(-0.14em); }
  41% { clip-path: inset(0 0 30% 0); transform: translateX(0.08em); }
  44% { clip-path: inset(0 0 55% 0); transform: translateX(-0.05em); }
  80% { clip-path: inset(0 0 70% 0); transform: translateX(0.18em); }
  83% { clip-path: inset(0 0 45% 0); transform: translateX(-0.06em); }
}
@keyframes txt-slice-glitch-bottom {
  0%, 36%, 48%, 78%, 86%, 100% { clip-path: inset(50% 0 0 0); transform: none; }
  38% { clip-path: inset(38% 0 0 0); transform: translateX(0.06em); }
  41% { clip-path: inset(70% 0 0 0); transform: translateX(-0.1em); }
  44% { clip-path: inset(45% 0 0 0); transform: translateX(0.03em); }
  80% { clip-path: inset(30% 0 0 0); transform: translateX(-0.05em); }
  83% { clip-path: inset(55% 0 0 0); transform: translateX(0.1em); }
}

.txt-scanline-glitch {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  letter-spacing: 0.08em;
  background: repeating-linear-gradient(180deg, var(--c) 0 0.06em, color-mix(in srgb, var(--c) 50%, transparent) 0.06em 0.1em);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-scanline-glitch-roll 0.8s linear infinite;}
.txt-scanline-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--c);
  -webkit-text-fill-color: var(--c);
  text-shadow: -0.04em 0 #ff2d78, 0.04em 0 #00c2ff;
  clip-path: inset(0 0 100% 0);
  animation:
    txt-scanline-glitch-band 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    txt-scanline-glitch-jitter 0.24s steps(1, end) infinite;
}
@keyframes txt-scanline-glitch-roll {
  to { background-position: 0 0.1em; }
}
@keyframes txt-scanline-glitch-band {
  0%   { clip-path: inset(0 0 100% 0); }
  8%   { clip-path: inset(0 0 78% 0); }
  62%  { clip-path: inset(78% 0 0 0); }
  70%, 100% { clip-path: inset(100% 0 0 0); }
}
@keyframes txt-scanline-glitch-jitter {
  0%, 100% { transform: translateX(0.07em); }
  33% { transform: translateX(-0.05em); }
  66% { transform: translateX(0.12em); }
}

.txt-glitch-burst {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.06em;
  animation: txt-glitch-burst-jolt 3s steps(1, end) infinite;}
.txt-glitch-burst::before,
.txt-glitch-burst::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: 3s steps(1, end) infinite;
}
.txt-glitch-burst::before {
  color: #ff2d78;
  animation-name: txt-glitch-burst-a;
}
.txt-glitch-burst::after {
  color: #00c2ff;
  animation-name: txt-glitch-burst-b;
}
@keyframes txt-glitch-burst-jolt {
  0%, 62%, 72%, 78%, 100% { transform: none; }
  64% { transform: translateX(-0.04em) skewX(-14deg); }
  66% { transform: translateX(0.05em) skewX(10deg) scaleY(1.08); }
  68% { transform: translate(-0.02em, 0.02em); }
  70% { transform: skewX(20deg); }
  76% { transform: translateX(0.03em) skewX(-6deg); }
}
@keyframes txt-glitch-burst-a {
  0%, 62%, 72%, 78%, 100% { opacity: 0; clip-path: inset(0); transform: none; }
  64% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translateX(-0.12em); }
  66% { opacity: 1; clip-path: inset(55% 0 20% 0); transform: translateX(0.1em); }
  68% { opacity: 1; clip-path: inset(30% 0 45% 0); transform: translateX(-0.2em); }
  70% { opacity: 1; clip-path: inset(75% 0 5% 0); transform: translateX(0.08em); }
  76% { opacity: 1; clip-path: inset(40% 0 40% 0); transform: translateX(-0.1em); }
}
@keyframes txt-glitch-burst-b {
  0%, 62%, 72%, 78%, 100% { opacity: 0; clip-path: inset(0); transform: none; }
  64% { opacity: 1; clip-path: inset(65% 0 10% 0); transform: translateX(0.14em); }
  66% { opacity: 1; clip-path: inset(5% 0 70% 0); transform: translateX(-0.08em); }
  68% { opacity: 1; clip-path: inset(45% 0 35% 0); transform: translateX(0.16em); }
  70% { opacity: 1; clip-path: inset(20% 0 55% 0); transform: translateX(-0.12em); }
  76% { opacity: 1; clip-path: inset(70% 0 12% 0); transform: translateX(0.07em); }
}

.txt-datamosh-glitch {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.04em;
  animation: txt-datamosh-glitch-skew 3.2s steps(1, end) infinite;}
.txt-datamosh-glitch::before,
.txt-datamosh-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  color: var(--c);
  transform-origin: 55% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  animation: 3.2s steps(1, end) infinite;
}
.txt-datamosh-glitch::before {
  clip-path: inset(24% 0 62% 0);
  animation-name: txt-datamosh-glitch-a;
}
.txt-datamosh-glitch::after {
  clip-path: inset(60% 0 26% 0);
  animation-name: txt-datamosh-glitch-b;
}
@keyframes txt-datamosh-glitch-skew {
  0%, 36%, 74%, 100% { transform: none; }
  30% { transform: skewX(-12deg); }
  33% { transform: skewX(7deg) translateX(0.03em); }
  68% { transform: skewX(16deg) translateX(-0.03em); }
  71% { transform: skewX(-5deg); }
}
@keyframes txt-datamosh-glitch-a {
  0%, 27%, 38%, 66%, 76%, 100% { opacity: 0; transform: none; }
  29% { opacity: 1; transform: scaleX(1.5); }
  32% { opacity: 1; transform: scaleX(1.7) translateX(0.05em); }
  35% { opacity: 0.6; transform: scaleX(1.3) translateX(-0.08em); }
  68% { opacity: 1; transform: scaleX(1.7) translateX(-0.1em); }
  72% { opacity: 1; transform: scaleX(1.2); }
}
@keyframes txt-datamosh-glitch-b {
  0%, 27%, 38%, 66%, 76%, 100% { opacity: 0; transform: none; }
  29% { opacity: 0.7; transform: scaleX(1.3) translateX(-0.06em); }
  33% { opacity: 1; transform: scaleX(1.8) translateX(0.04em); }
  67% { opacity: 1; transform: scaleX(1.6); }
  70% { opacity: 1; transform: scaleX(1.7) translateX(0.08em); }
  73% { opacity: 0.6; transform: scaleX(1.2); }
}

.txt-neon-sign-turn-on {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--c) 28%, transparent);}
.txt-neon-sign-turn-on span {
  animation: txt-neon-sign-turn-on-strike 1.2s steps(1, end) var(--d) forwards;
}
@keyframes txt-neon-sign-turn-on-strike {
  0%, 12%, 33%, 42% { color: color-mix(in srgb, var(--c) 28%, transparent); text-shadow: none; }
  8%, 30%, 38%, 50%, 100% {
    color: color-mix(in srgb, var(--c) 30%, #fff);
    text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent);
  }
}

.txt-neon-outline-chase {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.1em;}
.txt-neon-outline-chase span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 0.035em color-mix(in srgb, var(--c) 75%, #fff);
  filter: drop-shadow(0 0 0.06em var(--c)) drop-shadow(0 0 0.18em var(--c));
  opacity: 0.3;
  animation: txt-neon-outline-chase-light 3.2s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 0.14s);
}
@keyframes txt-neon-outline-chase-light {
  0%, 10%, 62%, 100% { opacity: 0.3; }
  6%, 12% { opacity: 1; }
}

.txt-broken-neon-letter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0.12em 0.33em 0.12em 0.45em;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--c) 30%, #fff);
  text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent);
  border: 0.06em solid color-mix(in srgb, var(--c) 30%, #fff);
  border-radius: 0.3em;
  box-shadow: 0 0 0.03em var(--c), 0 0 0.12em var(--c), 0 0 0.35em color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0.03em var(--c), inset 0 0 0.12em var(--c), inset 0 0 0.3em color-mix(in srgb, var(--c) 40%, transparent);}
.txt-broken-neon-letter span:nth-child(4) {
  animation: txt-broken-neon-letter-buzz 3.6s steps(1, end) infinite;
}
@keyframes txt-broken-neon-letter-buzz {
  0%, 6%, 11%, 58%, 62%, 100% { color: color-mix(in srgb, var(--c) 30%, #fff); text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent); }
  4%, 9%, 14%, 60% { color: color-mix(in srgb, var(--c) 28%, transparent); text-shadow: none; }
}

.txt-neon-glow-pulse {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: color-mix(in srgb, var(--c) 30%, #fff);
  letter-spacing: 0.03em;
  text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c);}
.txt-neon-glow-pulse::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--c);
  filter: blur(0.22em);
  opacity: 0.2;
  animation: txt-neon-glow-pulse-breathe 2.8s ease-in-out infinite alternate;
}
@keyframes txt-neon-glow-pulse-breathe {
  to { opacity: 1; transform: scale(1.06); }
}

.txt-synthwave-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 0 0.3em 1.2em;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.02em;}
.txt-synthwave-text::before {
  content: "";
  position: absolute;
  left: -1.5em;
  right: -1.5em;
  bottom: 0;
  height: 1.5em;
  background-image:
    linear-gradient(180deg, #ff3ea5 0.05em, transparent 0.05em),
    linear-gradient(90deg, #ff3ea5 0.05em, transparent 0.05em);
  background-size: 100% 0.4em, 0.8em 100%;
  background-position: 0 0, 50% 0;
  transform: perspective(4em) rotateX(58deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
  animation: txt-synthwave-text-drive 0.7s linear infinite;
}
.txt-synthwave-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.3em;
  width: 3.2em;
  height: 1.6em;
  border-radius: 1.6em 1.6em 0 0;
  background: linear-gradient(180deg, #ffd23f, #ff3ea5);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 55% 62%, #000 62% 74%, transparent 74% 80%, #000 80% 88%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 55% 62%, #000 62% 74%, transparent 74% 80%, #000 80% 88%, transparent 88%);
  transform: translateX(-50%);
  opacity: 0.75;
}
.txt-synthwave-text-title {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 35%, #fff) 0%,
    var(--c) 46%,
    color-mix(in srgb, var(--c) 55%, #000) 50%,
    #ff3ea5 54%,
    color-mix(in srgb, #ff3ea5 45%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.015em color-mix(in srgb, var(--c) 60%, #000);
  filter: drop-shadow(0 0 0.1em color-mix(in srgb, #ff3ea5 70%, transparent));
}
@keyframes txt-synthwave-text-drive {
  to { background-position: 0 0.4em, 50% 0; }
}

.txt-vhs-glitch-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.5em;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  color: var(--c);
  text-shadow: -0.06em 0 rgb(255 0 90 / 0.7), 0.06em 0 rgb(0 170 255 / 0.7);
  animation: txt-vhs-glitch-text-wobble 3.4s steps(1, end) infinite;}
.txt-vhs-glitch-text-icon {
  filter: drop-shadow(-0.06em 0 rgb(255 0 90 / 0.7)) drop-shadow(0.06em 0 rgb(0 170 255 / 0.7));
}
.txt-vhs-glitch-text-icon::before {
  content: "";
  display: block;
  width: 0.62em;
  height: 0.72em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* the tracking band: noise lines that soften whatever they pass over */
.txt-vhs-glitch-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.32em;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, transparent) 0 0.08em, transparent 0.08em 0.2em, color-mix(in srgb, var(--c) 25%, transparent) 0.2em 0.26em, transparent 0.26em 0.5em);
  -webkit-backdrop-filter: blur(0.03em);
  backdrop-filter: blur(0.03em);
  transform: translateY(-0.4em);
  animation: txt-vhs-glitch-text-track 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes txt-vhs-glitch-text-track {
  0%, 38% { transform: translateY(-0.4em); }
  78%, 100% { transform: translateY(1.8em); }
}
@keyframes txt-vhs-glitch-text-wobble {
  0%, 34%, 66%, 100% { transform: none; }
  12% { transform: translateX(0.02em); }
  20% { transform: translateX(-0.015em); }
  52% { transform: translateX(0.05em) skewX(-5deg); text-shadow: -0.12em 0 rgb(255 0 90 / 0.7), 0.1em 0 rgb(0 170 255 / 0.7); }
  55% { transform: translateX(-0.03em); }
  58% { transform: translateX(0.02em) skewX(3deg); }
  61% { transform: none; text-shadow: -0.06em 0 rgb(255 0 90 / 0.7), 0.06em 0 rgb(0 170 255 / 0.7); }
  84% { transform: translateX(0.015em); }
}

.txt-crt-screen-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.6em 0.95em;
  border-radius: 0.5em / 0.7em;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 16%, #10131a), #06070a 78%);
  box-shadow: inset 0 0 0.7em rgb(0 0 0 / 0.85), 0 0 0 0.14em #22252c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--c) 55%, #fff);
  text-shadow: 0 0 0.06em var(--c), 0 0 0.3em var(--c);
  animation: txt-crt-screen-text-flicker 3s steps(1, end) infinite;}
.txt-crt-screen-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgb(0 0 0 / 0.4) 0 0.05em, transparent 0.05em 0.1em);
}
.txt-crt-screen-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 22%, transparent), transparent);
  transform: translateY(-100%);
  animation: txt-crt-screen-text-roll 4s linear infinite;
}
@keyframes txt-crt-screen-text-roll {
  to { transform: translateY(250%); }
}
@keyframes txt-crt-screen-text-flicker {
  0%, 33%, 72%, 100% { opacity: 1; }
  31% { opacity: 0.88; }
  70% { opacity: 0.94; }
}

.txt-pixel-text-bounce {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--c);
  text-shadow: 0.08em 0.08em 0 color-mix(in srgb, var(--c) 40%, #000);
  -webkit-font-smoothing: none;}
.txt-pixel-text-bounce span {
  display: inline-block;
  animation: txt-pixel-text-bounce-hop 1.2s steps(3, end) infinite;
  animation-delay: calc(var(--i) * 0.1s);
}
@keyframes txt-pixel-text-bounce-hop {
  0%, 30%, 100% { transform: translateY(0); }
  15% { transform: translateY(-0.36em); }
}

.txt-insert-coin-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--c);
  text-shadow: 0.07em 0.07em 0 color-mix(in srgb, var(--c) 40%, #000);}
.txt-insert-coin-text-cta {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding-right: 0.85em;
}
.txt-insert-coin-text-arrow {
  width: 0.5em;
  height: 0.6em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: txt-insert-coin-text-nudge 0.8s steps(1, end) infinite;
}
.txt-insert-coin-text-blink {
  animation: txt-insert-coin-text-blink 1.6s steps(1, end) infinite;
}
.txt-insert-coin-text-credit {
  margin-top: 0.7em;
  text-shadow: none;
  font-size: 0.5em;
  letter-spacing: 0.24em;
  opacity: 0.7;
}
@keyframes txt-insert-coin-text-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.15em); }
}
@keyframes txt-insert-coin-text-blink {
  0%, 100% { opacity: 1; color: var(--c); }
  38% { opacity: 0; }
  50% { opacity: 1; color: #f59e0b; }
  88% { opacity: 0; }
}

.txt-hologram-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 0.4em 0.9em;
  font-weight: 800;
  letter-spacing: 0.12em;}
/* projector beam */
.txt-hologram-text::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.3em;
  bottom: 0.1em;
  z-index: -1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--c) 45%, transparent), transparent 85%);
  clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%);
  animation: txt-hologram-text-flicker 3s steps(1, end) infinite;
}
/* emitter */
.txt-hologram-text::after {
  content: "";
  position: absolute;
  left: 40%;
  right: 40%;
  bottom: 0;
  height: 0.2em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.3em var(--c);
}
.txt-hologram-text-word {
  display: inline-block;
  background:
    linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent 58%) 0 150% / 100% 300% no-repeat,
    linear-gradient(var(--c), var(--c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--c) 45%, transparent);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 0.06em, rgb(0 0 0 / 0.35) 0.06em 0.1em);
  mask-image: repeating-linear-gradient(180deg, #000 0 0.06em, rgb(0 0 0 / 0.35) 0.06em 0.1em);
  animation:
    txt-hologram-text-sweep 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite,
    txt-hologram-text-lines 0.8s linear infinite,
    txt-hologram-text-flicker 3s steps(1, end) infinite;
}
@keyframes txt-hologram-text-sweep {
  from { background-position: 0 150%, 0 0; }
  to   { background-position: 0 -50%, 0 0; }
}
/* 0.1em = one line period, so the scroll loops without a seam */
@keyframes txt-hologram-text-lines {
  to { -webkit-mask-position: 0 -0.1em; mask-position: 0 -0.1em; }
}
@keyframes txt-hologram-text-flicker {
  0%, 22%, 63%, 100% { opacity: 0.92; transform: none; }
  20% { opacity: 0.6; }
  61% { opacity: 0.35; transform: skewX(-10deg) translateX(0.04em); }
}

.txt-matrix-rain-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7em;
  height: 2.6em;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
  mask-image: radial-gradient(closest-side, #000 60%, transparent);}
.txt-matrix-rain-text-rain {
  position: absolute;
  inset: 0;
  font-size: 0.4em;
  font-weight: 500;
  color: var(--c);
  opacity: 0.6;
}
.txt-matrix-rain-text-rain i {
  position: absolute;
  top: 0;
  left: var(--x);
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
  mask-image: linear-gradient(180deg, transparent, #000 85%);
  transform: translateY(-100%);
  animation: txt-matrix-rain-text-fall var(--d) linear var(--t) infinite;
}
.txt-matrix-rain-text-word {
  position: relative;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  color: var(--c);
  text-shadow: 0 0 0.25em color-mix(in srgb, var(--c) 60%, transparent);
}
/* 6.5em = the box height (2.6em) in the rain's smaller em */
@keyframes txt-matrix-rain-text-fall {
  to { transform: translateY(6.5em); }
}

.txt-cyberpunk-glitch {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0.14em 0.85em 0.14em 0.6em;
  color: #0b0b0f;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-shadow: -0.05em 0 var(--c);
  animation: txt-cyberpunk-glitch-jolt 2.8s steps(1, end) infinite;}
.txt-cyberpunk-glitch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fcee0a;
  clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 0.55em, 100% 100%, 0.4em 100%, 0 calc(100% - 0.4em));
}
.txt-cyberpunk-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  background: var(--c);
  color: #fcee0a;
  text-shadow: none;
  clip-path: inset(0 0 100% 0);
  animation: txt-cyberpunk-glitch-slice 2.8s steps(1, end) infinite;
}
@keyframes txt-cyberpunk-glitch-slice {
  0%, 58%, 69%, 76%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  60% { clip-path: inset(18% 0 56% 0); transform: translateX(-0.25em); }
  63% { clip-path: inset(62% 0 12% 0); transform: translateX(0.18em); }
  66% { clip-path: inset(36% 0 40% 0); transform: translateX(-0.12em); }
  72% { clip-path: inset(72% 0 6% 0); transform: translateX(0.3em); }
}
@keyframes txt-cyberpunk-glitch-jolt {
  0%, 58%, 69%, 76%, 100% { transform: none; }
  60% { transform: translateX(0.05em); }
  63% { transform: translateX(-0.06em) skewX(-6deg); }
  72% { transform: translateX(0.04em); }
}

.txt-decrypt-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  color: var(--c);}
.txt-decrypt-text span {
  position: relative;
  display: inline-block;
  color: transparent;
  animation: txt-decrypt-text-lock 0.4s ease-out var(--r) forwards;
}
/* the scrambling symbol, hidden once its letter locks */
.txt-decrypt-text span::before {
  content: "";
  position: absolute;
  inset: 0;
  color: color-mix(in srgb, var(--c) 60%, transparent);
  animation:
    txt-decrypt-text-cycle 0.4s steps(1, end) infinite,
    txt-decrypt-text-done 0.01s linear forwards;
  animation-delay: calc(var(--i) * -0.07s), var(--r);
}
@keyframes txt-decrypt-text-cycle {
  0%, 100% { content: "#"; }
  12% { content: "7"; }
  25% { content: "%"; }
  37% { content: "X"; }
  50% { content: "0"; }
  62% { content: "&"; }
  75% { content: "K"; }
  87% { content: "/"; }
}
@keyframes txt-decrypt-text-done {
  to { visibility: hidden; }
}
@keyframes txt-decrypt-text-lock {
  from { color: color-mix(in srgb, var(--c) 30%, #fff); text-shadow: 0 0 0.3em var(--c); }
  to   { color: var(--c); text-shadow: none; }
}

.txt-led-dot-matrix {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0.36em 0.48em;
  border-radius: 0.24em;
  background-color: #0d0f12;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent) 0.035em, transparent 0.045em);
  background-size: 0.12em 0.12em;
  box-shadow: 0 0 0 0.06em #23262d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0.12em;}
.txt-led-dot-matrix-glow {
  display: inline-block;
  filter: drop-shadow(0 0 0.06em var(--c));
}
.txt-led-dot-matrix-text {
  display: inline-block;
  color: color-mix(in srgb, var(--c) 70%, #fff);
  -webkit-mask-image: radial-gradient(circle, #000 0.045em, transparent 0.055em);
  mask-image: radial-gradient(circle, #000 0.045em, transparent 0.055em);
  -webkit-mask-size: 0.12em 0.12em;
  mask-size: 0.12em 0.12em;
  clip-path: inset(0 100% 0 0);
  animation: txt-led-dot-matrix-wipe 4.5s linear infinite;
}
@keyframes txt-led-dot-matrix-wipe {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(24, end); }
  22%, 64% { clip-path: inset(0 0 0 0); animation-timing-function: steps(1, end); }
  67% { clip-path: inset(0 0 0 100%); }
  70% { clip-path: inset(0 0 0 0); }
  73% { clip-path: inset(0 0 0 100%); }
  76% { clip-path: inset(0 0 0 0); animation-timing-function: steps(24, end); }
  90%, 100% { clip-path: inset(0 0 0 100%); }
}

.txt-neon-border-trace {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 8em;
  height: 2.6em;
  letter-spacing: 0.1em;}
.txt-neon-border-trace-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.txt-neon-border-trace-frame path {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 35%, transparent);
  stroke-width: 1.6;
}
/* 20 + 30 = 50, two sparks per lap; the offset loops by one full lap */
.txt-neon-border-trace-frame .txt-neon-border-trace-spark {
  stroke: color-mix(in srgb, var(--c) 60%, #fff);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 20 30;
  filter: drop-shadow(0 0 0.04em var(--c)) drop-shadow(0 0 0.12em var(--c));
  animation: txt-neon-border-trace-run 2.6s linear infinite;
}
.txt-neon-border-trace-text {
  position: relative;
  padding-left: 0.1em;
  color: color-mix(in srgb, var(--c) 30%, #fff);
  text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent);
}
@keyframes txt-neon-border-trace-run {
  to { stroke-dashoffset: -100; }
}

.txt-glitch-reveal {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.06em;
  opacity: 0;
  animation: txt-glitch-reveal-in 1.1s steps(1, end) forwards;}
.txt-glitch-reveal::before,
.txt-glitch-reveal::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: 1.1s steps(1, end) forwards;
}
.txt-glitch-reveal::before {
  color: #ff2d78;
  animation-name: txt-glitch-reveal-red;
}
.txt-glitch-reveal::after {
  color: #00c2ff;
  animation-name: txt-glitch-reveal-cyan;
}
@keyframes txt-glitch-reveal-in {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  8%   { opacity: 1; clip-path: inset(40% 0 35% 0); transform: translateX(-0.12em); }
  16%  { opacity: 1; clip-path: inset(0 0 62% 0); transform: translateX(0.08em); }
  24%  { opacity: 0; }
  32%  { opacity: 1; clip-path: inset(55% 0 0 0); transform: translateX(-0.05em); }
  40%  { opacity: 1; clip-path: inset(0); transform: skewX(-14deg); }
  48%  { opacity: 1; clip-path: inset(12% 0 22% 0); transform: translateX(0.06em); }
  56%  { opacity: 1; clip-path: inset(0); transform: translateX(-0.02em); }
  64%, 100% { opacity: 1; clip-path: inset(0); transform: none; }
}
@keyframes txt-glitch-reveal-red {
  0%, 64%, 100% { opacity: 0; transform: none; }
  8%  { opacity: 1; transform: translateX(-0.1em); }
  24% { opacity: 1; transform: translateX(0.14em); }
  40% { opacity: 1; transform: translateX(-0.07em); }
  56% { opacity: 1; transform: translateX(-0.04em); }
}
@keyframes txt-glitch-reveal-cyan {
  0%, 64%, 100% { opacity: 0; transform: none; }
  16% { opacity: 1; transform: translateX(0.1em); }
  24% { opacity: 1; transform: translateX(-0.12em); }
  48% { opacity: 1; transform: translateX(0.07em); }
  56% { opacity: 1; transform: translateX(0.04em); }
}

.txt-glitch-404 {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  text-align: center;
  color: var(--c);}
.txt-glitch-404-code {
  font-size: 2.4em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
}
.txt-glitch-404-code span {
  display: inline-block;
  animation: txt-glitch-404-jolt 2.7s steps(1, end) var(--d) infinite;
}
.txt-glitch-404-msg {
  margin-top: 0.35em;
  padding-left: 0.4em;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.4em;
  opacity: 0.75;
}
@keyframes txt-glitch-404-jolt {
  0%, 12%, 100% { transform: none; text-shadow: none; opacity: 1; clip-path: none; }
  2%  { transform: translate(-0.04em, -0.05em) skewX(-10deg); text-shadow: -0.05em 0 #ff2d78, 0.05em 0 #00c2ff; }
  4%  { transform: translate(0.05em, 0.02em); text-shadow: 0.06em 0 #ff2d78, -0.04em 0 #00c2ff; clip-path: inset(0 0 45% 0); }
  6%  { transform: scaleY(1.12); opacity: 0.4; }
  8%  { transform: translateX(-0.03em); text-shadow: -0.03em 0 #ff2d78; clip-path: inset(30% 0 0 0); }
  10% { transform: translateX(0.02em) skewX(6deg); text-shadow: 0.03em 0 #00c2ff; }
}

.txt-random-flicker-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--c);}
.txt-random-flicker-text span {
  display: inline-block;
  animation: txt-random-flicker-text-drop var(--d) steps(1, end) var(--t) infinite;
}
@keyframes txt-random-flicker-text-drop {
  0%, 10%, 55%, 100% { opacity: 1; transform: none; }
  2% { opacity: 0.1; }
  4% { opacity: 1; transform: translateX(0.03em); }
  6% { opacity: 0; }
  8% { opacity: 0.7; transform: translateX(-0.02em); }
  51% { opacity: 0.2; }
  53% { opacity: 1; transform: translateY(0.02em); }
}

.txt-two-color-neon {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  gap: 0.4em;
  font-style: italic;
  letter-spacing: 0.08em;}
.txt-two-color-neon-a,
.txt-two-color-neon-b {
  color: color-mix(in srgb, var(--c) 30%, #fff);
  text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent);
  animation: 4s steps(1, end) infinite;
}
.txt-two-color-neon-a {
  filter: hue-rotate(115deg);
  animation-name: txt-two-color-neon-a;
}
.txt-two-color-neon-b {
  animation-name: txt-two-color-neon-b;
}
@keyframes txt-two-color-neon-a {
  0%, 64%, 88%, 100% { color: color-mix(in srgb, var(--c) 30%, #fff); text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent); }
  60%, 62%, 66% { color: color-mix(in srgb, var(--c) 28%, transparent); text-shadow: none; }
}
@keyframes txt-two-color-neon-b {
  0%, 30%, 34%, 60%, 100% { color: color-mix(in srgb, var(--c) 30%, #fff); text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent); }
  32%, 36% { color: color-mix(in srgb, var(--c) 28%, transparent); text-shadow: none; }
}

.txt-crt-power-off {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  letter-spacing: 0.08em;}
.txt-crt-power-off-text {
  display: inline-block;
  color: var(--c);
  text-shadow: 0 0 0.25em color-mix(in srgb, var(--c) 55%, transparent);
  animation: txt-crt-power-off-screen 4.2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
/* the scan line the picture collapses into */
.txt-crt-power-off::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.07em;
  margin-top: -0.035em;
  border-radius: 0.07em;
  background: color-mix(in srgb, var(--c) 30%, #fff);
  box-shadow: 0 0 0.1em var(--c), 0 0 0.35em var(--c);
  opacity: 0;
  animation: txt-crt-power-off-line 4.2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes txt-crt-power-off-screen {
  0%, 44%, 96%, 100% { transform: scale(1, 1); opacity: 1; }
  52%, 88% { transform: scale(1.04, 0.02); opacity: 0; }
}
@keyframes txt-crt-power-off-line {
  0%, 44%, 96%, 100% { transform: scaleX(1); opacity: 0; }
  50% { transform: scaleX(1); opacity: 1; }
  58% { transform: scaleX(0.02); opacity: 1; }
  64%, 80% { transform: scaleX(0); opacity: 0; }
  84% { transform: scaleX(0.02); opacity: 1; }
  90% { transform: scaleX(1); opacity: 1; }
}

.txt-no-signal-static {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8em;
  height: 3.8em;
  overflow: hidden;
  border-radius: 0.35em;
  background: #2a2a2a;
  box-shadow: inset 0 0 0.8em rgb(0 0 0 / 0.8), 0 0 0 0.12em #1d1f24;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.txt-no-signal-static-noise {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.55;
  animation: txt-no-signal-static-jump 0.5s steps(1, end) infinite;
}
/* a darker band rolling down, like a drifting vertical hold */
.txt-no-signal-static::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.45) 50%, transparent 60%) 0 0 / 100% 200%;
  animation: txt-no-signal-static-roll 2.6s linear infinite;
}
.txt-no-signal-static-label {
  position: relative;
  z-index: 1;
  padding: 0.12em 0.5em;
  background: var(--c);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.14em;
  animation: txt-no-signal-static-flick 3s steps(1, end) infinite;
}
@keyframes txt-no-signal-static-jump {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-11%, 7%); }
  40% { transform: translate(13%, -9%); }
  60% { transform: translate(-6%, -12%); }
  80% { transform: translate(9%, 11%); }
}
@keyframes txt-no-signal-static-roll {
  from { background-position: 0 100%; }
  to   { background-position: 0 -100%; }
}
@keyframes txt-no-signal-static-flick {
  0%, 44%, 50%, 100% { opacity: 1; transform: none; }
  42% { opacity: 0.3; transform: translateX(0.04em); }
  48% { opacity: 0.7; transform: translateX(-0.03em); }
}

.txt-old-film-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.6em 1.3em;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 10%, #4a3f33), #15110d 85%);
  box-shadow: inset 0 0 0 0.14em #15110d, inset 0 0 0 0.18em color-mix(in srgb, var(--c) 10%, #cbbd9f);
  color: color-mix(in srgb, var(--c) 10%, #f3ead6);
  font-family: Georgia, "Times New Roman", ui-serif, serif;
  font-weight: 400;
  letter-spacing: 0.24em;
  animation: txt-old-film-text-exposure 0.9s steps(1, end) infinite;}
.txt-old-film-text-title {
  display: inline-block;
  margin-right: -0.24em;
  animation: txt-old-film-text-weave 0.48s steps(1, end) infinite;
}
/* two scratches */
.txt-old-film-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(243 234 214 / 0.55), rgb(243 234 214 / 0.55)) 22% 0 / 0.03em 100% no-repeat,
    linear-gradient(rgb(243 234 214 / 0.3), rgb(243 234 214 / 0.3)) 71% 0 / 0.02em 100% no-repeat;
  animation: txt-old-film-text-scratch 0.64s steps(1, end) infinite;
}
/* dust */
.txt-old-film-text::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgb(243 234 214 / 0.8) 0.025em, transparent 0.04em) 15% 30% / 0.1em 0.1em no-repeat,
    radial-gradient(circle, rgb(0 0 0 / 0.7) 0.03em, transparent 0.045em) 80% 70% / 0.1em 0.1em no-repeat,
    radial-gradient(circle, rgb(243 234 214 / 0.6) 0.02em, transparent 0.035em) 55% 15% / 0.1em 0.1em no-repeat;
  animation: txt-old-film-text-dust 0.36s steps(1, end) infinite;
}
@keyframes txt-old-film-text-exposure {
  0%, 100% { opacity: 1; }
  22% { opacity: 0.86; }
  45% { opacity: 0.96; }
  67% { opacity: 0.9; }
}
@keyframes txt-old-film-text-weave {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.01em, -0.02em); }
  50% { transform: translate(-0.01em, 0.01em); }
  75% { transform: translate(0, -0.01em); }
}
@keyframes txt-old-film-text-scratch {
  0%, 100% { background-position: 22% 0, 71% 0; }
  25% { background-position: 64% 0, 12% 0; }
  50% { background-position: 35% 0, 88% 0; }
  75% { background-position: 80% 0, 47% 0; }
}
@keyframes txt-old-film-text-dust {
  0%, 100% { background-position: 15% 30%, 80% 70%, 55% 15%; opacity: 1; }
  33% { background-position: 70% 80%, 25% 20%, 90% 55%; opacity: 0.6; }
  66% { background-position: 40% 60%, 60% 35%, 10% 85%; opacity: 1; }
}

.txt-misprint-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0.3em 0.65em;
  border-radius: 0.08em;
  background: #f6f1e6;
  box-shadow: 0 0.08em 0.3em -0.1em rgb(0 0 0 / 0.3);
  color: color-mix(in srgb, var(--c) 80%, #fff);
  font-weight: 900;
  letter-spacing: 0.04em;}
.txt-misprint-text::before,
.txt-misprint-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  mix-blend-mode: multiply;
  animation: 3.6s ease-in-out infinite alternate;
}
.txt-misprint-text::before {
  color: #ff6fc4;
  animation-name: txt-misprint-text-pink;
}
.txt-misprint-text::after {
  color: #ffb000;
  -webkit-mask-image: radial-gradient(circle, #000 0.03em, transparent 0.04em);
  mask-image: radial-gradient(circle, #000 0.03em, transparent 0.04em);
  -webkit-mask-size: 0.09em 0.09em;
  mask-size: 0.09em 0.09em;
  animation-name: txt-misprint-text-yellow;
  animation-duration: 2.8s;
}
@keyframes txt-misprint-text-pink {
  from { transform: translate(-0.05em, 0.03em); }
  to   { transform: translate(-0.14em, 0.08em); }
}
@keyframes txt-misprint-text-yellow {
  from { transform: translate(0.08em, -0.05em); }
  to   { transform: translate(0.03em, 0.09em); }
}

.txt-vaporwave-echo-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.1em;}
.txt-vaporwave-echo-text > span {
  grid-area: 1 / 1;
}
.txt-vaporwave-echo-text-main {
  position: relative;
  background: linear-gradient(90deg, #ff71ce, color-mix(in srgb, var(--c) 50%, #b967ff), #01cdfe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.txt-vaporwave-echo-text-echo {
  color: transparent;
  -webkit-text-stroke: 0.025em #01cdfe;
  opacity: calc(1 - var(--i) * 0.22);
  animation: txt-vaporwave-echo-text-drift 3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.txt-vaporwave-echo-text-echo:nth-child(2) { -webkit-text-stroke-color: #b967ff; }
.txt-vaporwave-echo-text-echo:nth-child(3) { -webkit-text-stroke-color: #ff71ce; }
@keyframes txt-vaporwave-echo-text-drift {
  from { transform: translate(calc(var(--i) * 0.02em), calc(var(--i) * 0.02em)); }
  to   { transform: translate(calc(var(--i) * 0.09em), calc(var(--i) * 0.09em)); }
}

.txt-electric-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7em;
  height: 2em;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.06em;}
.txt-electric-text-word {
  color: color-mix(in srgb, var(--c) 30%, #fff);
  text-shadow: 0 0 0.01em var(--c), 0 0 0.03em var(--c), 0 0 0.1em var(--c), 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent), 0 0 0.6em color-mix(in srgb, var(--c) 40%, transparent);
  animation: txt-electric-text-surge 1.4s steps(1, end) infinite;
}
.txt-electric-text-bolts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.txt-electric-text-bolts polyline {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 45%, #fff);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.04em var(--c)) drop-shadow(0 0 0.1em var(--c));
  opacity: 0;
  animation: txt-electric-text-zap 1.4s steps(1, end) var(--d) infinite;
}
@keyframes txt-electric-text-zap {
  0%, 12%, 100% { opacity: 0; }
  2%, 8% { opacity: 1; }
  5% { opacity: 0.25; }
}
@keyframes txt-electric-text-surge {
  0%, 4%, 27%, 31%, 52%, 56%, 73%, 77%, 88%, 92%, 100% { transform: none; filter: none; }
  2%, 29%, 54%, 75%, 90% { transform: translateX(0.015em); filter: brightness(1.3); }
}

.txt-bouncing-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-bouncing-text span span {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: txt-bouncing-text-hop 2.2s infinite;
  animation-delay: calc(var(--i) * 0.08s);
}
@keyframes txt-bouncing-text-hop {
  0%, 42%, 100% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  /* crouch, launch, rise */
  5%  { transform: translateY(0) scale(1.18, 0.82); animation-timing-function: ease-in; }
  9%  { transform: translateY(-0.1em) scale(0.88, 1.16); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  20% { transform: translateY(-0.62em) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.4); }
  /* fall, squash, settle */
  29% { transform: translateY(0) scale(0.9, 1.12); animation-timing-function: ease-out; }
  33% { transform: translateY(0) scale(1.22, 0.78); animation-timing-function: ease-in-out; }
  38% { transform: translateY(0) scale(0.96, 1.04); animation-timing-function: ease-in-out; }
}

.txt-rubber-band-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  animation: txt-rubber-band-text-snap 2.8s infinite;}
@keyframes txt-rubber-band-text-snap {
  0%, 6%, 54%, 100% { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  /* slow pull, building tension */
  26% { transform: scale(1.3, 0.8); animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); }
  /* release: overshoot and ring down */
  31% { transform: scale(0.82, 1.16); animation-timing-function: ease-in-out; }
  37% { transform: scale(1.1, 0.92); animation-timing-function: ease-in-out; }
  43% { transform: scale(0.96, 1.04); animation-timing-function: ease-in-out; }
  49% { transform: scale(1.02, 0.99); animation-timing-function: ease-in-out; }
}

.txt-swinging-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-swinging-text > span {
  display: inline-block;
  padding: 0.55em 0.2em 0;
  border-top: 0.06em solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 0.03em;
}
.txt-swinging-text span span {
  position: relative;
  display: inline-block;
  margin: 0 0.05em;
  /* the pivot is on the rail, 0.55em above the letter */
  transform-origin: 50% -0.55em;
  animation: txt-swinging-text-swing calc(1.3s + var(--i) * 0.07s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.2s);
}
.txt-swinging-text span span::before {
  content: "";
  position: absolute;
  top: -0.55em;
  left: 50%;
  width: 1px;
  height: 0.85em;
  background: color-mix(in srgb, var(--c) 55%, transparent);
}
@keyframes txt-swinging-text-swing {
  from { transform: rotate(10deg); }
  to   { transform: rotate(-10deg); }
}

.txt-heartbeat-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.02em;}
.txt-heartbeat-text span span {
  display: inline-block;
  animation: txt-heartbeat-text-beat 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.04s);
}
@keyframes txt-heartbeat-text-beat {
  0%, 38%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  8%  { transform: scale(1.2); text-shadow: 0 0 0.3em color-mix(in srgb, var(--c) 60%, transparent); }
  16% { transform: scale(1); text-shadow: 0 0 0.1em color-mix(in srgb, var(--c) 25%, transparent); }
  25% { transform: scale(1.1); text-shadow: 0 0 0.25em color-mix(in srgb, var(--c) 45%, transparent); }
}

.txt-breathing-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  white-space: nowrap;
  animation: txt-breathing-text-breathe 5s ease-in-out infinite;}
@keyframes txt-breathing-text-breathe {
  0%, 100% { letter-spacing: 0; text-indent: 0; opacity: 0.55; }
  42%, 55% { letter-spacing: 0.2em; text-indent: 0.2em; opacity: 1; }
}

.txt-levitating-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  padding-bottom: 0.3em;}
.txt-levitating-text span span {
  position: relative;
  display: inline-block;
  animation: txt-levitating-text-lift 3.2s ease-in-out infinite;
  /* 0.7s steps scatter the phases so letters float independently */
  animation-delay: calc(var(--i) * -0.7s);
}
.txt-levitating-text span span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.32em;
  height: 0.16em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
  animation: txt-levitating-text-shadow 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s);
}
@keyframes txt-levitating-text-lift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.3em); }
}
@keyframes txt-levitating-text-shadow {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 1; }
  50%      { transform: translateY(0.3em) scaleX(0.55); opacity: 0.35; }
}

.txt-flipping-letters {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-flipping-letters span span {
  display: inline-block;
  animation: txt-flipping-letters-flip 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.1s);
}
@keyframes txt-flipping-letters-flip {
  0%, 12%   { transform: perspective(3em) rotateY(0); }
  42%, 100% { transform: perspective(3em) rotateY(360deg); }
}

.txt-color-changing-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-color-changing-text span span {
  display: inline-block;
  animation: txt-color-changing-text-hue 3s linear infinite;
  /* minus one period: every letter is already mid-cycle on load */
  animation-delay: calc(var(--i) * 0.18s - 3s);
}
@keyframes txt-color-changing-text-hue {
  0%, 100% { color: var(--c); }
  33%      { color: color-mix(in oklch, var(--c) 45%, #ec4899); }
  67%      { color: color-mix(in oklch, var(--c) 30%, #f59e0b); }
}

.txt-ripple-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.04em;}
.txt-ripple-text span span {
  display: inline-block;
  color: color-mix(in srgb, var(--c) 65%, transparent);
  animation: txt-ripple-text-ring 2.4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.12s);
}
@keyframes txt-ripple-text-ring {
  0%, 20%, 100% { transform: scale(1); color: color-mix(in srgb, var(--c) 65%, transparent); }
  7%            { transform: scale(1.3) translateY(-0.04em); color: var(--c); }
}

.txt-earthquake-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-earthquake-text span span {
  --x: 1;
  display: inline-block;
  animation: txt-earthquake-text-rumble 2.6s linear infinite;
}
.txt-earthquake-text span span:nth-child(2n) { --x: -1; }
.txt-earthquake-text span span:nth-child(3n) { --x: 0.6; }
@keyframes txt-earthquake-text-rumble {
  0%, 36%, 100% { transform: translate(0, 0) rotate(0deg); }
  3%  { transform: translate(calc(var(--x) * 0.07em), -0.06em) rotate(calc(var(--x) * 5deg)); }
  6%  { transform: translate(calc(var(--x) * -0.08em), 0.04em) rotate(calc(var(--x) * -5deg)); }
  9%  { transform: translate(calc(var(--x) * 0.06em), 0.06em) rotate(calc(var(--x) * 4deg)); }
  12% { transform: translate(calc(var(--x) * -0.07em), -0.05em) rotate(calc(var(--x) * -4deg)); }
  15% { transform: translate(calc(var(--x) * 0.08em), 0.03em) rotate(calc(var(--x) * 3deg)); }
  18% { transform: translate(calc(var(--x) * -0.05em), -0.05em) rotate(calc(var(--x) * -2.5deg)); }
  22% { transform: translate(calc(var(--x) * 0.04em), 0.03em) rotate(calc(var(--x) * 1.5deg)); }
  26% { transform: translate(calc(var(--x) * -0.02em), -0.02em) rotate(calc(var(--x) * -1deg)); }
  31% { transform: translate(calc(var(--x) * 0.01em), 0) rotate(0deg); }
}

.txt-wobbly-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-wobbly-text span span {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: txt-wobbly-text-jiggle 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes txt-wobbly-text-jiggle {
  0%, 38%, 100% { transform: skewX(0deg) scaleY(1); }
  5%  { transform: skewX(-18deg) scaleY(0.9); }
  11% { transform: skewX(13deg) scaleY(1.05); }
  17% { transform: skewX(-8deg) scaleY(0.97); }
  23% { transform: skewX(4deg) scaleY(1.01); }
  29% { transform: skewX(-2deg) scaleY(1); }
  34% { transform: skewX(0.5deg) scaleY(1); }
}

.txt-seesaw-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding-bottom: 0.45em;
  color: var(--c);}
/* the fulcrum */
.txt-seesaw-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.6em;
  height: 0.45em;
  margin-left: -0.3em;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.txt-seesaw-text-plank {
  display: block;
  padding: 0 0.7em 0.04em;
  border-bottom: 0.08em solid color-mix(in srgb, var(--c) 70%, transparent);
  border-radius: 0.05em;
  transform-origin: 50% 100%;
  animation: txt-seesaw-text-tilt 3.2s ease-in-out infinite;
}
.txt-seesaw-text-word {
  display: inline-block;
  animation: txt-seesaw-text-slide 3.2s ease-in-out infinite;
  /* 0.4s behind the plank */
  animation-delay: -2.8s;
}
@keyframes txt-seesaw-text-tilt {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes txt-seesaw-text-slide {
  0%, 100% { transform: translateX(-0.55em); }
  50%      { transform: translateX(0.55em); }
}

.txt-rolling-wave-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-rolling-wave-text span span {
  display: inline-block;
  animation: txt-rolling-wave-text-roll 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.2s - 2.4s);
}
@keyframes txt-rolling-wave-text-roll {
  from { transform: rotate(0deg) translateX(0.14em) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(0.14em) rotate(-360deg); }
}

.txt-popcorn-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-popcorn-text span span {
  display: inline-block;
  transform-origin: 50% 70%;
  animation: txt-popcorn-text-pop 2.2s infinite;
  animation-delay: var(--d);
}
@keyframes txt-popcorn-text-pop {
  0%  { transform: translateY(0) rotate(0turn) scale(1, 1); animation-timing-function: ease-in; }
  4%  { transform: translateY(0) rotate(0turn) scale(1.2, 0.8); animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1); }
  14% { transform: translateY(-0.8em) rotate(calc(var(--r) * 0.5turn)) scale(0.96, 1.05); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  24% { transform: translateY(0) rotate(calc(var(--r) * 1turn)) scale(1.12, 0.88); animation-timing-function: ease-out; }
  28% { transform: translateY(-0.1em) rotate(calc(var(--r) * 1turn)) scale(1, 1); animation-timing-function: ease-in; }
  /* a full turn looks the same as none, so the loop closes cleanly */
  32%, 100% { transform: translateY(0) rotate(calc(var(--r) * 1turn)) scale(1, 1); }
}

.txt-trampoline-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 1em 0.8em 0.45em;
  color: var(--c);}
/* the frame legs */
.txt-trampoline-text::before {
  content: "";
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  top: 1.95em;
  height: 0.42em;
  border: 0.08em solid color-mix(in srgb, var(--c) 45%, transparent);
  border-top: 0;
  border-bottom: 0;
}
/* the mat */
.txt-trampoline-text::after {
  content: "";
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  top: 1.95em;
  height: 0.02em;
  border-bottom: 0.09em solid color-mix(in srgb, var(--c) 85%, transparent);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  animation: txt-trampoline-text-mat 1.3s infinite;
}
.txt-trampoline-text-word {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: txt-trampoline-text-jump 1.3s infinite;
}
@keyframes txt-trampoline-text-jump {
  0%, 100% { transform: translateY(0.2em) scale(1.12, 0.86); animation-timing-function: ease-in; }
  10% { transform: translateY(-0.2em) scale(0.92, 1.1); animation-timing-function: ease-out; }
  45% { transform: translateY(-0.95em) scale(1, 1); animation-timing-function: ease-in; }
  80% { transform: translateY(0) scale(0.94, 1.08); animation-timing-function: ease-out; }
}
@keyframes txt-trampoline-text-mat {
  0%, 100% { height: 0.34em; animation-timing-function: ease-in; }
  8%  { height: 0.02em; animation-timing-function: ease-out; }
  13% { height: 0.09em; animation-timing-function: ease-in-out; }
  18% { height: 0.02em; animation-timing-function: ease-in-out; }
  23% { height: 0.05em; animation-timing-function: ease-in-out; }
  28%, 80% { height: 0.02em; animation-timing-function: ease-out; }
}

.txt-dancing-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-dancing-text span span {
  display: inline-block;
  animation: txt-dancing-text-bounce 1s infinite;
}
.txt-dancing-text span span:nth-child(even) {
  animation-delay: -0.5s;
}
@keyframes txt-dancing-text-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%      { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

.txt-springy-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-springy-text span span {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: txt-springy-text-boing 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.05s);
}
@keyframes txt-springy-text-boing {
  0%, 62%, 100% { transform: translateY(0) scale(1, 1); }
  /* wind down slowly, release fast */
  10% { transform: translateY(0.1em) scale(1.12, 0.84); }
  16% { transform: translateY(-0.5em) scale(0.9, 1.14); }
  24% { transform: translateY(0.16em) scale(1.06, 0.92); }
  32% { transform: translateY(-0.22em) scale(0.97, 1.04); }
  40% { transform: translateY(0.07em) scale(1.02, 0.98); }
  48% { transform: translateY(-0.05em) scale(1, 1); }
  55% { transform: translateY(0.02em) scale(1, 1); }
}

.txt-balloon-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  padding-bottom: 0.95em;}
.txt-balloon-text span span {
  --b: var(--c);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.55em;
  margin: 0 0.04em;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  font-size: 0.8em;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--b) 50%, #fff) 0, var(--b) 45%, color-mix(in srgb, var(--b) 80%, #000) 100%);
  /* sway from the bottom of the string */
  transform-origin: 50% calc(100% + 1.1em);
  animation: txt-balloon-text-drift 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
.txt-balloon-text span span:nth-child(3n + 2) { --b: color-mix(in oklch, var(--c) 45%, #ec4899); }
.txt-balloon-text span span:nth-child(3n) { --b: color-mix(in oklch, var(--c) 35%, #f59e0b); }
/* knot */
.txt-balloon-text span span::before {
  content: "";
  position: absolute;
  top: 97%;
  left: 50%;
  width: 0.22em;
  height: 0.14em;
  margin-left: -0.11em;
  background: var(--b);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* string */
.txt-balloon-text span span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 1.1em;
  background: color-mix(in srgb, var(--c) 50%, transparent);
}
@keyframes txt-balloon-text-drift {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-0.18em) rotate(5deg); }
}

.txt-snake-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-snake-text span span {
  display: inline-block;
  animation:
    txt-snake-text-rise 0.8s ease-in-out infinite alternate,
    txt-snake-text-tilt 0.8s ease-in-out infinite alternate;
  /* the tilt leads the rise by a quarter cycle: steepest where the wave crosses the middle */
  animation-delay: calc(var(--i) * 0.16s - 1.6s), calc(var(--i) * 0.16s - 2s);
}
@keyframes txt-snake-text-rise {
  from { translate: 0 -0.2em; }
  to   { translate: 0 0.2em; }
}
@keyframes txt-snake-text-tilt {
  from { rotate: 14deg; }
  to   { rotate: -14deg; }
}

.txt-marquee-lights-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding: 0.25em 0.5em;
  color: var(--c);
  letter-spacing: 0.08em;
  border: 0.12em dotted color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 0.3em;}
.txt-marquee-lights-text span span {
  display: inline-block;
  color: color-mix(in srgb, var(--c) 40%, transparent);
  animation: txt-marquee-lights-text-chase 0.9s linear infinite;
  /* one 0.3s step per letter; minus three cycles so all are running on load */
  animation-delay: calc(var(--i) * 0.3s - 2.7s);
}
@keyframes txt-marquee-lights-text-chase {
  0%, 30%, 100% { color: var(--c); text-shadow: 0 0 0.3em color-mix(in srgb, var(--c) 70%, transparent); }
  36%, 94%      { color: color-mix(in srgb, var(--c) 40%, transparent); text-shadow: 0 0 0 transparent; }
}

.txt-googly-eyes-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  color: var(--c);}
.txt-googly-eyes-text-eyes {
  display: inline-flex;
  gap: 0.05em;
  margin: 0 0.04em;
}
.txt-googly-eyes-text i {
  position: relative;
  box-sizing: border-box;
  width: 0.6em;
  height: 0.6em;
  border: 0.08em solid var(--c);
  border-radius: 50%;
  background: #fff;
  animation: txt-googly-eyes-text-blink 4s infinite;
}
/* the pupil */
.txt-googly-eyes-text i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.24em;
  height: 0.24em;
  margin: -0.12em 0 0 -0.12em;
  border-radius: 50%;
  background: var(--c);
  animation: txt-googly-eyes-text-look 4s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@keyframes txt-googly-eyes-text-look {
  0%, 8%, 76%, 100% { transform: translate(0, 0); }
  12%, 30% { transform: translate(-0.12em, 0.03em); }
  34%, 52% { transform: translate(0.12em, 0.03em); }
  57%, 70% { transform: translate(0.02em, -0.12em); }
}
@keyframes txt-googly-eyes-text-blink {
  0%, 84%, 90%, 100% { transform: scaleY(1); }
  87% { transform: scaleY(0.1); }
}

.txt-sleepy-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: var(--c);}
.txt-sleepy-text span span {
  --t: 1;
  display: inline-block;
  transform-origin: 50% 100%;
  animation: txt-sleepy-text-doze 4s infinite;
  animation-delay: calc(var(--i) * 0.04s);
}
.txt-sleepy-text span span:nth-child(odd) { --t: -0.6; }
@keyframes txt-sleepy-text-doze {
  0%   { transform: translateY(0) rotate(0deg) scaleY(1); animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.6); }
  /* droop, doze, then wake with a start */
  58%  { transform: translateY(0.14em) rotate(calc(var(--t) * 12deg)) scaleY(0.9); animation-timing-function: linear; }
  66%  { transform: translateY(0.16em) rotate(calc(var(--t) * 13deg)) scaleY(0.88); animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
  70%  { transform: translateY(-0.18em) rotate(calc(var(--t) * -3deg)) scaleY(1.08); animation-timing-function: ease-in-out; }
  76%  { transform: translateY(0.03em) rotate(0deg) scaleY(0.98); animation-timing-function: ease-out; }
  82%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); }
}
.txt-sleepy-text-z {
  position: absolute;
  top: -0.35em;
  right: -0.55em;
  font-size: 0.6em;
  opacity: 0;
  animation: txt-sleepy-text-float 4s ease-out infinite;
}
.txt-sleepy-text-z::after {
  content: "z";
  position: absolute;
  left: 0.8em;
  top: -0.8em;
  font-size: 0.75em;
}
@keyframes txt-sleepy-text-float {
  0%, 22% { opacity: 0; transform: translate(0, 0.6em) scale(0.6) rotate(-12deg); }
  38%     { opacity: 1; }
  62%     { opacity: 0.8; transform: translate(0.4em, -0.6em) scale(1.1) rotate(8deg); }
  67%, 100% { opacity: 0; transform: translate(0.4em, -0.6em) scale(1.1) rotate(8deg); }
}

.txt-tick-tock-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.03em;}
.txt-tick-tock-text span span {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: txt-tick-tock-text-tick 1.4s cubic-bezier(0.3, 1.9, 0.5, 1) infinite;
  animation-delay: calc(var(--i) * 0.03s);
}
@keyframes txt-tick-tock-text-tick {
  0%, 42%  { transform: rotate(-9deg); }
  50%, 92% { transform: rotate(9deg); }
  100%     { transform: rotate(-9deg); }
}

.txt-equalizer-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
.txt-equalizer-text span span {
  display: inline-block;
  /* scale from the baseline, not the middle of the line box */
  transform-origin: 50% 80%;
  animation: txt-equalizer-text-level var(--t) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.37s);
}
@keyframes txt-equalizer-text-level {
  0%   { transform: scaleY(0.75); color: color-mix(in srgb, var(--c) 55%, transparent); }
  40%  { transform: scaleY(1.45); color: var(--c); }
  70%  { transform: scaleY(1.05); color: color-mix(in srgb, var(--c) 80%, transparent); }
  100% { transform: scaleY(1.3); color: var(--c); }
}

.txt-accordion-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);}
/* one shared vanishing point, so the folds read as pleats */
.txt-accordion-text > span {
  display: inline-block;
  perspective: 5em;
}
.txt-accordion-text span span {
  --f: 55deg;
  --k: var(--c);
  display: inline-block;
  animation: txt-accordion-text-squeeze 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-accordion-text span span:nth-child(even) {
  --f: -55deg;
  --k: color-mix(in srgb, var(--c) 55%, transparent);
}
@keyframes txt-accordion-text-squeeze {
  0%, 12%, 100% { transform: translateX(0) rotateY(0deg); color: var(--c); }
  /* --o is the letter's distance from the middle, so outer letters travel furthest */
  45%, 62% { transform: translateX(calc(var(--o) * -0.22em)) rotateY(var(--f)); color: var(--k); }
}

.txt-domino-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  letter-spacing: 0.06em;}
.txt-domino-text span span {
  --lean: 24deg;
  display: inline-block;
  /* tip over the bottom right corner */
  transform-origin: 100% 85%;
  animation: txt-domino-text-topple 3.6s infinite;
  animation-delay: calc(var(--i) * 0.09s);
}
.txt-domino-text span span:last-child { --lean: 90deg; }
@keyframes txt-domino-text-topple {
  0%, 100% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }
  8%       { transform: rotate(var(--lean)); animation-timing-function: ease-out; }
  11%      { transform: rotate(calc(var(--lean) - 5deg)); animation-timing-function: ease-in; }
  14%, 58% { transform: rotate(var(--lean)); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  72%      { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
  78%      { transform: rotate(0deg); }
}

.txt-karaoke-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding-top: 0.75em;
  color: var(--c);}
.txt-karaoke-text-line {
  position: relative;
  display: inline-flex;
}
.txt-karaoke-text-line span {
  width: 0.78em;
  text-align: center;
  color: color-mix(in srgb, var(--c) 60%, transparent);
  transform-origin: 50% 85%;
  animation: txt-karaoke-text-hit 3.15s infinite;
  /* the ball lands on letter i after i + 1 hops of 0.35s */
  animation-delay: calc((var(--i) + 1) * 0.35s);
}
.txt-karaoke-text-ball {
  position: absolute;
  top: 0.08em;
  left: 0.26em;
  width: 0.26em;
  height: 0.26em;
  /* 7 letters + 2 hops off the ends = 9 hops of 0.35s */
  animation: txt-karaoke-text-travel 3.15s linear infinite;
}
.txt-karaoke-text-ball::before {
  content: "";
  display: block;
  height: 100%;
  border-radius: 50%;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: txt-karaoke-text-hop 0.35s infinite;
}
@keyframes txt-karaoke-text-hit {
  0%        { transform: scale(1.1, 0.85); color: var(--c); animation-timing-function: ease-out; }
  6%        { transform: scale(1, 1); color: var(--c); }
  30%, 100% { transform: scale(1, 1); color: color-mix(in srgb, var(--c) 60%, transparent); }
}
@keyframes txt-karaoke-text-travel {
  0%       { transform: translateX(-0.78em); opacity: 0; }
  8%, 90%  { opacity: 1; }
  100%     { transform: translateX(6.24em); opacity: 0; }
}
@keyframes txt-karaoke-text-hop {
  0%, 100% { transform: translateY(0) scale(1.3, 0.7); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  12%      { transform: translateY(-0.2em) scale(0.85, 1.15); animation-timing-function: ease-out; }
  50%      { transform: translateY(-0.62em) scale(1, 1); animation-timing-function: ease-in; }
}

.txt-dripping-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  padding-bottom: 0.9em;}
.txt-dripping-text span span {
  position: relative;
  display: inline-block;
}
.txt-dripping-text span span::after {
  content: "";
  position: absolute;
  top: 0.88em;
  left: 50%;
  width: 0.17em;
  height: 0.22em;
  margin-left: -0.085em;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--c);
  transform-origin: 50% 0;
  animation: txt-dripping-text-drip 4s infinite;
  animation-delay: calc(var(--i) * -1.3s);
}
.txt-dripping-text span span:nth-child(3n)::after { animation-duration: 3.3s; }
@keyframes txt-dripping-text-drip {
  0%      { transform: translateY(0) scale(0.3, 0); opacity: 1; animation-timing-function: ease-in-out; }
  /* swell, stretch, let go */
  50%     { transform: translateY(0) scale(0.9, 1); animation-timing-function: ease-in; }
  62%     { transform: translateY(0.06em) scale(0.75, 1.35); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  78%     { transform: translateY(0.95em) scale(0.7, 1.2); opacity: 1; animation-timing-function: linear; }
  84%, 100% { transform: translateY(1.1em) scale(0.6, 1); opacity: 0; }
}

.txt-echo-ping-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.06em;}
.txt-echo-ping-text-echo {
  position: absolute;
  inset: 0;
  color: color-mix(in srgb, var(--c) 50%, transparent);
  animation: txt-echo-ping-text-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes txt-echo-ping-text-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.txt-font-weight-wave {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 200;
  line-height: 1.2;
  color: var(--c);
}
.txt-font-weight-wave span span {
  animation: txt-font-weight-wave-flex 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s - 2.4s);
}
@keyframes txt-font-weight-wave-flex {
  0%, 100% { font-weight: 200; color: color-mix(in srgb, var(--c) 70%, transparent); }
  50%      { font-weight: 900; color: var(--c); }
}

.txt-hand-drawn-circle-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-hand-drawn-circle-text-word {
  position: relative;
  display: inline-block;
  margin: 0 0.4em;
  color: var(--c);
}
.txt-hand-drawn-circle-text-word svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.2em;
  height: 1.6em;
  overflow: visible;
  transform: translate(-50%, -50%) rotate(-3deg);
  fill: none;
  stroke: var(--c);
  stroke-width: 3.2;
  stroke-linecap: round;
  /* the gap is a hair longer than the path, so no round cap shows before the draw */
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  animation: txt-hand-drawn-circle-text-draw 0.9s cubic-bezier(0.55, 0, 0.35, 1) 0.3s forwards;
}
@keyframes txt-hand-drawn-circle-text-draw {
  to { stroke-dashoffset: 0; }
}

.txt-marker-highlight-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-marker-highlight-text-mark {
  position: relative;
  isolation: isolate;
}
.txt-marker-highlight-text-mark::before,
.txt-marker-highlight-text-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 0.6em 0.25em 0.5em 0.2em / 0.5em 0.35em 0.6em 0.3em;
}
/* first pass, left to right */
.txt-marker-highlight-text-mark::before {
  inset: 0.14em -0.16em 0.34em -0.12em;
  transform: rotate(-2deg) skewX(-14deg) scaleX(0);
  transform-origin: 0 50%;
  animation: txt-marker-highlight-text-there 0.45s cubic-bezier(0.5, 0, 0.25, 1) 0.3s forwards;
}
/* return pass, lower and shorter, right to left */
.txt-marker-highlight-text-mark::after {
  inset: 0.5em -0.2em 0.02em 0.06em;
  transform: rotate(1deg) skewX(-14deg) scaleX(0);
  transform-origin: 100% 50%;
  animation: txt-marker-highlight-text-back 0.4s cubic-bezier(0.5, 0, 0.25, 1) 0.72s forwards;
}
@keyframes txt-marker-highlight-text-there {
  to { transform: rotate(-2deg) skewX(-14deg) scaleX(1); }
}
@keyframes txt-marker-highlight-text-back {
  to { transform: rotate(1deg) skewX(-14deg) scaleX(1); }
}

.txt-hand-drawn-box-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-hand-drawn-box-text-word {
  position: relative;
  display: inline-block;
  margin-left: 0.15em;
  padding: 0 0.24em;
  color: var(--c);
}
.txt-hand-drawn-box-text-word i {
  position: absolute;
  border-radius: 0.04em;
  background: var(--c);
  animation: txt-hand-drawn-box-text-x 0.24s cubic-bezier(0.5, 0, 0.4, 1) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.2s);
}
/* top, left to right */
.txt-hand-drawn-box-text-word i:nth-child(1) {
  --r: -1.2deg;
  top: 0.02em; left: -0.06em; right: -0.14em;
  height: 0.07em;
  transform: rotate(var(--r)) scaleX(0);
  transform-origin: 0 50%;
}
/* right, top to bottom */
.txt-hand-drawn-box-text-word i:nth-child(2) {
  --r: 2deg;
  top: -0.1em; bottom: -0.02em; right: 0.02em;
  width: 0.07em;
  transform: rotate(var(--r)) scaleY(0);
  transform-origin: 50% 0;
  animation-name: txt-hand-drawn-box-text-y;
}
/* bottom, right to left */
.txt-hand-drawn-box-text-word i:nth-child(3) {
  --r: 0.8deg;
  bottom: 0.04em; left: -0.12em; right: 0.04em;
  height: 0.07em;
  transform: rotate(var(--r)) scaleX(0);
  transform-origin: 100% 50%;
}
/* left, bottom to top */
.txt-hand-drawn-box-text-word i:nth-child(4) {
  --r: -2.2deg;
  top: -0.02em; bottom: -0.12em; left: 0.04em;
  width: 0.07em;
  transform: rotate(var(--r)) scaleY(0);
  transform-origin: 50% 100%;
  animation-name: txt-hand-drawn-box-text-y;
}
@keyframes txt-hand-drawn-box-text-x {
  to { transform: rotate(var(--r)) scaleX(1); }
}
@keyframes txt-hand-drawn-box-text-y {
  to { transform: rotate(var(--r)) scaleY(1); }
}

.txt-scribble-highlight-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  isolation: isolate;
  white-space: nowrap;}
.txt-scribble-highlight-text-word {
  position: relative;
  display: inline-block;
  margin: 0 0.1em;
}
.txt-scribble-highlight-text-word svg {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 3.4em;
  height: 1.36em;
  transform: translate(-50%, -48%) rotate(-2deg);
  fill: none;
  stroke: color-mix(in srgb, var(--c) 38%, transparent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  animation: txt-scribble-highlight-text-scribble 0.9s cubic-bezier(0.45, 0, 0.55, 1) 0.3s forwards;
}
@keyframes txt-scribble-highlight-text-scribble {
  to { stroke-dashoffset: 0; }
}

.txt-hand-drawn-arrow-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  white-space: nowrap;}
.txt-hand-drawn-arrow-text svg {
  width: 2.4em;
  height: 1.44em;
  overflow: visible;
  transform: translateY(0.25em);
  fill: none;
  stroke: var(--c);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.txt-hand-drawn-arrow-text path {
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  animation: txt-hand-drawn-arrow-text-draw 0.6s cubic-bezier(0.5, 0, 0.3, 1) 0.3s forwards;
}
.txt-hand-drawn-arrow-text path:nth-child(2) {
  animation-duration: 0.22s;
  animation-timing-function: ease-out;
  animation-delay: 0.88s;
}
.txt-hand-drawn-arrow-text-label {
  display: inline-block;
  animation: txt-hand-drawn-arrow-text-nudge 0.5s ease-out 1.05s;
}
@keyframes txt-hand-drawn-arrow-text-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes txt-hand-drawn-arrow-text-nudge {
  30% { transform: translateX(0.12em) rotate(1.5deg); }
  65% { transform: translateX(-0.03em); }
}

.txt-emphasis-lines-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-emphasis-lines-text-word {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
  color: var(--c);
  transform-origin: 30% 90%;
  animation: txt-emphasis-lines-text-hop 0.4s ease-out 0.3s;
}
.txt-emphasis-lines-text-word svg {
  position: absolute;
  left: 96%;
  bottom: 62%;
  width: 0.85em;
  height: 0.85em;
  overflow: visible;
  fill: none;
  stroke: var(--c);
  stroke-width: 4.2;
  stroke-linecap: round;
}
.txt-emphasis-lines-text-word path {
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  animation: txt-emphasis-lines-text-flick 0.18s ease-out forwards;
}
.txt-emphasis-lines-text-word path:nth-child(1) { animation-delay: 0.35s; }
.txt-emphasis-lines-text-word path:nth-child(2) { animation-delay: 0.47s; }
.txt-emphasis-lines-text-word path:nth-child(3) { animation-delay: 0.59s; }
@keyframes txt-emphasis-lines-text-flick {
  to { stroke-dashoffset: 0; }
}
@keyframes txt-emphasis-lines-text-hop {
  40% { transform: translateY(-0.12em) rotate(-4deg) scale(1.08); }
}

.txt-focus-brackets-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.4);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);}
.txt-focus-brackets-text-frame {
  position: relative;
  display: inline-block;
  padding: 0.1em 0.34em;
}
.txt-focus-brackets-text-word {
  display: inline-block;
  opacity: 0.4;
  filter: blur(0.08em);
  animation: txt-focus-brackets-text-sharpen 0.4s ease-out 0.5s forwards;
}
.txt-focus-brackets-text-frame i {
  position: absolute;
  width: 0.3em;
  height: 0.3em;
  border-top: 0.06em solid var(--c);
  border-left: 0.06em solid var(--c);
  border-top-left-radius: 0.06em;
  opacity: 0;
  animation: txt-focus-brackets-text-lock 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}
.txt-focus-brackets-text-frame i:nth-of-type(1) { top: 0; left: 0; }
.txt-focus-brackets-text-frame i:nth-of-type(2) { top: 0; right: 0; }
.txt-focus-brackets-text-frame i:nth-of-type(3) { bottom: 0; right: 0; }
.txt-focus-brackets-text-frame i:nth-of-type(4) { bottom: 0; left: 0; }
@keyframes txt-focus-brackets-text-lock {
  0%   { opacity: 0; transform: translate(calc(var(--x) * 0.5em), calc(var(--y) * 0.5em)) rotate(var(--r)); }
  60%  { opacity: 1; transform: translate(calc(var(--x) * -0.05em), calc(var(--y) * -0.05em)) rotate(var(--r)); }
  100% { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes txt-focus-brackets-text-sharpen {
  to { opacity: 1; filter: blur(0); }
}

.txt-strikethrough-price {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  white-space: nowrap;}
.txt-strikethrough-price-old {
  position: relative;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  animation: txt-strikethrough-price-dim 0.35s ease-out 0.7s forwards;
}
.txt-strikethrough-price-old::after {
  content: "";
  position: absolute;
  left: -0.14em;
  right: -0.14em;
  top: 50%;
  height: 0.09em;
  margin-top: -0.02em;
  border-radius: 0.05em;
  background: var(--c);
  transform: rotate(-14deg) scaleX(0);
  transform-origin: 0 50%;
  animation: txt-strikethrough-price-strike 0.4s cubic-bezier(0.6, 0, 0.3, 1) 0.35s forwards;
}
.txt-strikethrough-price-new {
  display: inline-block;
  font-size: 1.5em;
  font-weight: 800;
  color: var(--c);
  opacity: 0;
  transform: translateY(0.35em) scale(0.7);
  animation: txt-strikethrough-price-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}
.txt-strikethrough-price-new small {
  margin-left: 0.05em;
  font-size: 0.42em;
  font-weight: 600;
  opacity: 0.75;
}
@keyframes txt-strikethrough-price-strike {
  to { transform: rotate(-14deg) scaleX(1); }
}
@keyframes txt-strikethrough-price-dim {
  to { color: color-mix(in srgb, currentColor 45%, transparent); }
}
@keyframes txt-strikethrough-price-pop {
  to { opacity: 1; transform: none; }
}

.txt-todo-strikethrough {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;}
.txt-todo-strikethrough-box {
  display: grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
  border: 0.08em solid var(--c);
  border-radius: 0.26em;
  animation: txt-todo-strikethrough-press 0.45s 0.3s forwards;
}
.txt-todo-strikethrough-box svg {
  width: 0.72em;
  height: 0.72em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  animation: txt-todo-strikethrough-tick 0.3s ease-out 0.6s forwards;
}
.txt-todo-strikethrough-task {
  position: relative;
  animation: txt-todo-strikethrough-dim 0.35s ease-out 1.05s forwards;
}
.txt-todo-strikethrough-task::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 54%;
  height: 0.07em;
  border-radius: 0.04em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: txt-todo-strikethrough-strike 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
}
@keyframes txt-todo-strikethrough-press {
  0%   { transform: scale(1); animation-timing-function: ease-in; }
  35%  { transform: scale(0.8); background-color: transparent; animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  100% { transform: scale(1); background-color: var(--c); }
}
@keyframes txt-todo-strikethrough-tick {
  to { stroke-dashoffset: 0; }
}
@keyframes txt-todo-strikethrough-strike {
  to { transform: scaleX(1); }
}
@keyframes txt-todo-strikethrough-dim {
  to { color: color-mix(in srgb, currentColor 45%, transparent); }
}

.txt-double-underline-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;}
.txt-double-underline-text-sum {
  position: relative;
  display: inline-block;
  margin-left: 0.2em;
  color: var(--c);
}
.txt-double-underline-text-sum::before,
.txt-double-underline-text-sum::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  height: 0.06em;
  border-radius: 0.03em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: txt-double-underline-text-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}
.txt-double-underline-text-sum::before { bottom: 0; }
.txt-double-underline-text-sum::after {
  bottom: -0.14em;
  transform-origin: 100% 50%;
  animation-delay: 0.7s;
}
@keyframes txt-double-underline-text-draw {
  to { transform: scaleX(1); }
}

.txt-brush-stroke-underline {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  isolation: isolate;
  white-space: nowrap;}
.txt-brush-stroke-underline-word {
  position: relative;
  display: inline-block;
}
.txt-brush-stroke-underline-word svg {
  position: absolute;
  z-index: -1;
  left: -0.08em;
  bottom: -0.22em;
  width: calc(100% + 0.2em);
  height: 0.42em;
  fill: var(--c);
  clip-path: inset(0 100% 0 0);
  animation: txt-brush-stroke-underline-paint 0.55s cubic-bezier(0.3, 0, 0.2, 1) 0.35s forwards;
}
@keyframes txt-brush-stroke-underline-paint {
  to { clip-path: inset(0 0 0 0); }
}

.txt-text-decoration-underline {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  max-width: 9.5em;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.02em;
  text-underline-offset: 0.6em;
  animation: txt-text-decoration-underline-rise 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;}
@keyframes txt-text-decoration-underline-rise {
  to {
    text-decoration-color: var(--c);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.12em;
  }
}

.txt-letter-by-letter-stroke-draw {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 8em;
  height: auto;
  overflow: visible;}
.txt-letter-by-letter-stroke-draw text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  fill: var(--c);
  fill-opacity: 0;
  stroke: var(--c);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.txt-letter-by-letter-stroke-draw tspan {
  animation:
    txt-letter-by-letter-stroke-draw-line 0.8s ease-in-out forwards,
    txt-letter-by-letter-stroke-draw-ink 0.45s ease-out forwards;
  animation-delay: calc(0.2s + var(--i) * 0.25s), calc(0.8s + var(--i) * 0.25s);
}
@keyframes txt-letter-by-letter-stroke-draw-line {
  to { stroke-dashoffset: 0; }
}
@keyframes txt-letter-by-letter-stroke-draw-ink {
  to { fill-opacity: 1; }
}

.txt-dotted-to-solid-outline {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 9.5em;
  height: auto;
  overflow: visible;}
.txt-dotted-to-solid-outline text {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  fill: var(--c);
  fill-opacity: 0;
  stroke: var(--c);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* a zero-length dash with a round cap is a dot */
  stroke-dasharray: 0 9;
  animation:
    txt-dotted-to-solid-outline-join 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards,
    txt-dotted-to-solid-outline-fill 0.6s ease-out 1.6s forwards;
}
@keyframes txt-dotted-to-solid-outline-join {
  to { stroke-dasharray: 9 0; }
}
@keyframes txt-dotted-to-solid-outline-fill {
  to { fill-opacity: 0.2; }
}

.txt-sticker-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 7em;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0.05em 0.05em color-mix(in srgb, var(--c) 55%, transparent));
  opacity: 0;
  transform: scale(0.4) rotate(-18deg);
  animation: txt-sticker-text-slap 0.75s forwards;}
.txt-sticker-text text {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  fill: var(--c);
  stroke: color-mix(in srgb, var(--c) 14%, #fff);
  stroke-width: 0;
  stroke-linejoin: round;
  paint-order: stroke;
  animation: txt-sticker-text-border 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) 0.3s forwards;
}
@keyframes txt-sticker-text-slap {
  0%   { opacity: 0; transform: scale(0.4) rotate(-18deg); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  45%  { opacity: 1; transform: scale(1.1) rotate(3deg); animation-timing-function: ease-in-out; }
  75%  { transform: scale(0.97) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
@keyframes txt-sticker-text-border {
  to { stroke-width: 16; }
}

.txt-liquid-fill-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.025em var(--c);
  background-image:
    radial-gradient(50% 100% at 50% 100%, var(--c) 96%, transparent 100%),
    radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--c) 50%, transparent) 96%, transparent 100%),
    linear-gradient(var(--c), var(--c));
  background-size: 1em 0.14em, 1.4em 0.2em, 100% 100%;
  background-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
    txt-liquid-fill-text-flow 1.6s linear infinite,
    txt-liquid-fill-text-level 5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;}
/* crests move sideways by whole tiles, so the loop has no seam */
@keyframes txt-liquid-fill-text-flow {
  from { background-position-x: 0, 0, 0; }
  to   { background-position-x: 2em, -1.4em, 0; }
}
/* each crest sits on top of the body: level minus the crest height */
@keyframes txt-liquid-fill-text-level {
  from { background-position-y: 0.88em, 0.82em, 1.02em; }
  to   { background-position-y: 0.26em, 0.2em, 0.4em; }
}

.txt-svg-text-stroke-loop {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 10em;
  height: auto;
  overflow: visible;}
.txt-svg-text-stroke-loop text {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  fill: none;
  stroke: var(--c);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5% 30%;
  animation: txt-svg-text-stroke-loop-chase 6s linear infinite;
  animation-delay: calc(var(--i) * -1.5s);
}
.txt-svg-text-stroke-loop text:nth-child(1) { fill: color-mix(in srgb, var(--c) 14%, transparent); }
.txt-svg-text-stroke-loop text:nth-child(2) { stroke: color-mix(in srgb, var(--c) 45%, #ec4899); }
.txt-svg-text-stroke-loop text:nth-child(3) { stroke: color-mix(in srgb, var(--c) 45%, #22d3ee); }
.txt-svg-text-stroke-loop text:nth-child(4) { stroke: color-mix(in srgb, var(--c) 45%, #a855f7); }
/* 35% is one full dash + gap, so the loop lands where it began */
@keyframes txt-svg-text-stroke-loop-chase {
  to { stroke-dashoffset: -35%; }
}

.txt-marching-ants-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 9em;
  height: auto;
  overflow: visible;}
.txt-marching-ants-text text {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  fill: color-mix(in srgb, var(--c) 10%, transparent);
  stroke: color-mix(in srgb, var(--c) 35%, transparent);
  stroke-width: 2.6;
}
.txt-marching-ants-text text:nth-child(2) {
  fill: none;
  stroke: var(--c);
  stroke-dasharray: 7 6;
  animation: txt-marching-ants-text-march 0.55s linear infinite;
}
/* 13 = one dash plus one gap */
@keyframes txt-marching-ants-text-march {
  to { stroke-dashoffset: -13; }
}

.txt-sketchy-outline-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.7);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-grid;}
.txt-sketchy-outline-text > span {
  grid-area: 1 / 1;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--c);
  animation: txt-sketchy-outline-text-a 0.45s steps(1) infinite;
}
/* the hatching: diagonal pencil lines clipped to the letters */
.txt-sketchy-outline-text > span:nth-child(1) {
  background: repeating-linear-gradient(-55deg, color-mix(in srgb, var(--c) 55%, transparent) 0 0.02em, transparent 0.02em 0.09em);
  -webkit-background-clip: text;
  background-clip: text;
}
.txt-sketchy-outline-text > span:nth-child(2) {
  opacity: 0.75;
  animation-name: txt-sketchy-outline-text-b;
}
.txt-sketchy-outline-text > span:nth-child(3) {
  opacity: 0.5;
  animation-name: txt-sketchy-outline-text-c;
}
@keyframes txt-sketchy-outline-text-a {
  0%  { transform: translate(0, 0); }
  33% { transform: translate(0.008em, -0.006em); }
  66% { transform: translate(-0.006em, 0.008em); }
}
@keyframes txt-sketchy-outline-text-b {
  0%  { transform: translate(0.02em, 0.012em) rotate(0.5deg); }
  33% { transform: translate(-0.016em, 0.018em) rotate(-0.4deg); }
  66% { transform: translate(0.012em, -0.018em) rotate(0.2deg); }
}
@keyframes txt-sketchy-outline-text-c {
  0%  { transform: translate(-0.022em, -0.01em) rotate(-0.6deg); }
  33% { transform: translate(0.018em, -0.02em) rotate(0.5deg); }
  66% { transform: translate(-0.012em, 0.022em) rotate(-0.3deg); }
}

.txt-offset-outline-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.03em currentColor;
  text-shadow: 0.08em 0.08em 0 var(--c);
  animation: txt-offset-outline-text-orbit 5s cubic-bezier(0.7, 0, 0.3, 1) infinite;}
@keyframes txt-offset-outline-text-orbit {
  0%, 20%, 100% { text-shadow: 0.08em 0.08em 0 var(--c); }
  25%, 45%      { text-shadow: -0.08em 0.08em 0 var(--c); }
  50%, 70%      { text-shadow: -0.08em -0.08em 0 var(--c); }
  75%, 95%      { text-shadow: 0.08em -0.08em 0 var(--c); }
}

.txt-stacked-outline-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-grid;
  transform: translate(-0.09em, -0.09em);}
.txt-stacked-outline-text > span {
  grid-area: 1 / 1;
  z-index: calc(4 - var(--i));
  color: transparent;
  -webkit-text-stroke: 0.025em var(--c);
  transform: translate(calc(var(--i) * 0.06em), calc(var(--i) * 0.06em));
  animation: txt-stacked-outline-text-fill 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.14s);
}
@keyframes txt-stacked-outline-text-fill {
  0%, 12%, 100% { color: transparent; }
  34%, 62%      { color: var(--c); }
}

.txt-striped-shadow-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.7);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-grid;
  color: var(--c);}
.txt-striped-shadow-text > span {
  grid-area: 1 / 1;
}
/* 45 degree stripes in a square tile repeat seamlessly, so one tile of travel loops */
.txt-striped-shadow-text-shadow {
  background: linear-gradient(-45deg, var(--c) 0 16%, transparent 16% 50%, var(--c) 50% 66%, transparent 66%) 0 0 / 0.16em 0.16em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: translate(0.08em, 0.08em);
  animation:
    txt-striped-shadow-text-scroll 0.9s linear infinite,
    txt-striped-shadow-text-shift 3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes txt-striped-shadow-text-scroll {
  to { background-position: 0.16em 0; }
}
@keyframes txt-striped-shadow-text-shift {
  from { transform: translate(0.05em, 0.05em); }
  to   { transform: translate(0.11em, 0.11em); }
}

.txt-rotating-dashed-circle-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  place-items: center;
  color: var(--c);
  font-weight: 800;
  letter-spacing: 0.08em;}
.txt-rotating-dashed-circle-text > span {
  grid-area: 1 / 1;
}
.txt-rotating-dashed-circle-text-ring {
  width: 3.4em;
  height: 3.4em;
  border: 0.08em dashed var(--c);
  border-radius: 50%;
  animation: txt-rotating-dashed-circle-text-spin 12s linear infinite;
}
.txt-rotating-dashed-circle-text-ring + .txt-rotating-dashed-circle-text-ring {
  width: 2.8em;
  height: 2.8em;
  border: 0.08em dotted color-mix(in srgb, var(--c) 55%, transparent);
  animation-duration: 16s;
  animation-direction: reverse;
}
@keyframes txt-rotating-dashed-circle-text-spin {
  to { transform: rotate(360deg); }
}

.txt-underline-to-highlight {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  isolation: isolate;
  white-space: nowrap;}
.txt-underline-to-highlight-word {
  position: relative;
  padding: 0 0.12em;
  /* white bottom half, accent top half; sliding it raises the white */
  background: linear-gradient(to top, #fff 50%, var(--c) 50%) 0 0 / 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-underline-to-highlight-ink 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-underline-to-highlight-word::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.06em 0 -0.06em;
  border-radius: 0.08em;
  background: var(--c);
  transform: scale(0, 0.08);
  transform-origin: 0 100%;
  animation: txt-underline-to-highlight-bar 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes txt-underline-to-highlight-bar {
  0%       { transform: scale(0, 0.08); transform-origin: 0 100%; }
  20%      { transform: scale(1, 0.08); transform-origin: 0 100%; }
  36%, 70% { transform: scale(1, 1); transform-origin: 0 100%; }
  84%      { transform: scale(1, 0.08); transform-origin: 0 100%; }
  85%      { transform: scale(1, 0.08); transform-origin: 100% 100%; }
  97%, 100% { transform: scale(0, 0.08); transform-origin: 100% 100%; }
}
@keyframes txt-underline-to-highlight-ink {
  0%, 20%       { background-position: 0 0; }
  36%, 70%      { background-position: 0 100%; }
  84%, 100%     { background-position: 0 0; }
}

.txt-squiggly-underline {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-squiggly-underline-word {
  position: relative;
  display: inline-block;
  color: var(--c);
}
.txt-squiggly-underline-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.3em;
  overflow: hidden;
}
.txt-squiggly-underline-line svg {
  display: block;
  width: 5em;
  height: 0.3em;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-linecap: round;
  animation: txt-squiggly-underline-flow 0.9s linear infinite;
}
/* one period is 20 of the 200 viewBox units: 10% of the svg */
@keyframes txt-squiggly-underline-flow {
  to { transform: translateX(-10%); }
}

.txt-morphing-underline {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.6em 0.4em 0.2em 0;
  white-space: nowrap;}
.txt-morphing-underline-word {
  position: relative;
  display: inline-block;
  color: var(--c);
}
.txt-morphing-underline-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 0.1em;
  background: var(--c);
  clip-path: inset(0 0 round 0.05em);
  transform-origin: 50% 100%;
  animation: txt-morphing-underline-hop 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/*
 * calc(50% - 0.05em) trims the full-width bar to a 0.1em dot at its center.
 * The hop is five points on a parabola; translateX percentages are of the
 * bar, which is the word's width, so 50% + 0.1em lands just past the last letter.
 */
@keyframes txt-morphing-underline-hop {
  0%, 10%   { clip-path: inset(0 0 round 0.05em); transform: none; }
  22%       { clip-path: inset(0 calc(50% - 0.05em) round 0.05em); transform: none; }
  24%       { transform: scale(1.3, 0.7); animation-timing-function: linear; }
  28%       { transform: translate(calc(12.5% + 0.025em), -1.18em); animation-timing-function: linear; }
  32%       { transform: translate(calc(25% + 0.05em), -1.62em); animation-timing-function: linear; }
  36%       { transform: translate(calc(37.5% + 0.075em), -1.35em); animation-timing-function: linear; }
  40%       { transform: translate(calc(50% + 0.1em), -0.35em) scale(1.8, 1); animation-timing-function: ease-out; }
  46%, 72%  { transform: translate(calc(50% + 0.1em), -0.35em) scale(1.4); }
  78%       { transform: translate(calc(50% + 0.1em), 0); animation-timing-function: ease-in-out; }
  84%       { clip-path: inset(0 calc(50% - 0.05em) round 0.05em); transform: none; }
  94%, 100% { clip-path: inset(0 0 round 0.05em); transform: none; }
}

.txt-glowing-underline-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding-bottom: 0.28em;
  white-space: nowrap;}
.txt-glowing-underline-text::before,
.txt-glowing-underline-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 1em;
}
.txt-glowing-underline-text::before {
  bottom: 0.06em;
  height: 0.05em;
  background: color-mix(in srgb, var(--c) 25%, transparent);
}
.txt-glowing-underline-text::after {
  bottom: 0.04em;
  height: 0.09em;
  background: linear-gradient(90deg, transparent, var(--c) 85%, color-mix(in srgb, var(--c) 35%, #fff)) no-repeat;
  background-size: 40% 100%;
  filter: drop-shadow(0 0 0.12em var(--c));
  animation: txt-glowing-underline-text-run 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* -70% and 170% park the 40% tile just outside each end */
@keyframes txt-glowing-underline-text-run {
  from { background-position: -70% 0; }
  to   { background-position: 170% 0; }
}

.txt-read-along-highlight {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  isolation: isolate;
  white-space: nowrap;}
.txt-read-along-highlight span {
  position: relative;
  display: inline-block;
  animation: txt-read-along-highlight-ink 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.8s);
}
.txt-read-along-highlight span::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.06em -0.12em;
  border-radius: 0.24em;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  opacity: 0;
  transform: scale(0.85);
  animation: txt-read-along-highlight-pill 3.2s ease-in-out infinite;
  animation-delay: inherit;
}
/* each word owns a quarter of the loop: 0.8s of 3.2s */
@keyframes txt-read-along-highlight-pill {
  0%, 30%, 100% { opacity: 0; transform: scale(0.9); }
  5%, 24%       { opacity: 1; transform: scale(1); }
}
@keyframes txt-read-along-highlight-ink {
  0%, 30%, 100% { color: currentColor; }
  5%, 24%       { color: var(--c); }
}

.txt-redacted-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;}
.txt-redacted-text span {
  position: relative;
}
.txt-redacted-text span::after {
  content: "";
  position: absolute;
  inset: 0.12em -0.08em 0.04em;
  border-radius: 0.05em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: txt-redacted-text-bar 4.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--i) * 0.3s);
}
@keyframes txt-redacted-text-bar {
  0%       { transform: scaleX(0); transform-origin: 0 50%; }
  10%, 58% { transform: scaleX(1); transform-origin: 0 50%; }
  59%      { transform: scaleX(1); transform-origin: 100% 50%; }
  70%, 100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

.txt-selection-box-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;}
.txt-selection-box-text-frame {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.18em;
  outline: 0.04em solid transparent;
  animation: txt-selection-box-text-frame 4.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* white squares with an accent edge, one per corner */
.txt-selection-box-text-frame i {
  position: absolute;
  box-sizing: border-box;
  width: 0.16em;
  height: 0.16em;
  /* negative margins center each handle on its corner */
  margin: -0.08em;
  border: 0.04em solid var(--c);
  background: #fff;
  transform: scale(0);
  animation: txt-selection-box-text-handle 4.4s ease infinite;
}
.txt-selection-box-text-frame i:nth-of-type(1) { top: 0; left: 0; }
.txt-selection-box-text-frame i:nth-of-type(2) { top: 0; right: 0; }
.txt-selection-box-text-frame i:nth-of-type(3) { bottom: 0; left: 0; }
.txt-selection-box-text-frame i:nth-of-type(4) { bottom: 0; right: 0; }
.txt-selection-box-text-frame svg {
  position: absolute;
  right: -0.42em;
  bottom: -0.62em;
  width: 0.5em;
  height: 0.6em;
  fill: currentColor;
  stroke: var(--c);
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0;
  animation: txt-selection-box-text-cursor 4.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes txt-selection-box-text-frame {
  0%, 94%, 100% { outline-color: transparent; transform: none; }
  6%, 30%       { outline-color: var(--c); transform: none; }
  45%, 58%      { outline-color: var(--c); transform: scale(1.14); }
  72%, 86%      { outline-color: var(--c); transform: none; }
}
@keyframes txt-selection-box-text-handle {
  0%, 94%, 100% { transform: scale(0); }
  8%, 86%       { transform: scale(1); }
}
@keyframes txt-selection-box-text-cursor {
  0%, 12%   { opacity: 0; transform: translate(0.5em, 0.5em); }
  22%, 78%  { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translate(0.5em, 0.5em); }
}

.txt-odometer-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;}
.txt-odometer-counter-num {
  display: flex;
  color: var(--c);
  height: 1.2em;
  overflow: hidden;
  font-size: 1.6em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  /* soft top and bottom edges, so digits roll in and out of view */
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.txt-odometer-counter-col > span {
  display: block;
  /* one digit per line: the strip is exactly one digit wide */
  width: 1ch;
  word-break: break-all;
  animation: txt-odometer-counter-roll 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.txt-odometer-counter-label {
  font-size: 0.5em;
  font-weight: 600;
  opacity: 0.7;
}
@keyframes txt-odometer-counter-roll {
  to { transform: translateY(calc(var(--to) * -1.2em)); }
}

@counter-style txt-flip-clock-ten {
  system: cyclic;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
}
@counter-style txt-flip-clock-six {
  system: cyclic;
  symbols: "0" "1" "2" "3" "4" "5";
}
@property --txt-flip-clock-d {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-flip-clock {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.1em;}
.txt-flip-clock-card {
  position: relative;
  width: 0.74em;
  height: 1.12em;
  font-size: 1.9em;
  line-height: 1.12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
  background: color-mix(in srgb, var(--c) 22%, #111827);
  border-radius: 0.1em;
  perspective: 2.5em;
  box-shadow: 0 0.05em 0.12em rgb(0 0 0 / 0.3);
}
/* the hinge line across the middle */
.txt-flip-clock-card::before {
  content: "";
  position: absolute;
  inset: calc(50% - 0.02em) 0 auto;
  height: 0.04em;
  background: rgb(0 0 0 / 0.45);
  z-index: 2;
}
.txt-flip-clock-colon {
  width: 0.24em;
  height: 0.95em;
  background:
    radial-gradient(circle closest-side, var(--c) 92%, transparent) top / 0.24em 0.24em no-repeat,
    radial-gradient(circle closest-side, var(--c) 92%, transparent) bottom / 0.24em 0.24em no-repeat;
}
/* four layers: static top (next), static bottom (current),
   falling top flap (current), landing bottom flap (next) */
.txt-flip-clock-card i {
  position: absolute;
  inset: 0;
  font-style: normal;
  border-radius: inherit;
  background: inherit;
  backface-visibility: hidden;
}
.txt-flip-clock-card i:nth-child(odd) { clip-path: inset(0 0 50% 0); }
.txt-flip-clock-card i:nth-child(even) { clip-path: inset(50% 0 0 0); }
.txt-flip-clock-tens,
.txt-flip-clock-ones {
  counter-reset: txt-flip-clock-cur calc(var(--txt-flip-clock-d) + 1) txt-flip-clock-nxt calc(var(--txt-flip-clock-d) + 2);
  animation: txt-flip-clock-count calc(var(--p) * var(--n)) steps(var(--n)) var(--at) infinite;
}
.txt-flip-clock-ones i:is(:nth-child(1), :nth-child(4))::after { content: counter(txt-flip-clock-nxt, txt-flip-clock-ten); }
.txt-flip-clock-ones i:is(:nth-child(2), :nth-child(3))::after { content: counter(txt-flip-clock-cur, txt-flip-clock-ten); }
.txt-flip-clock-tens i:is(:nth-child(1), :nth-child(4))::after { content: counter(txt-flip-clock-nxt, txt-flip-clock-six); }
.txt-flip-clock-tens i:is(:nth-child(2), :nth-child(3))::after { content: counter(txt-flip-clock-cur, txt-flip-clock-six); }
.txt-flip-clock-card i:nth-child(3) { z-index: 1; }
.txt-flip-clock-card i:nth-child(4) { z-index: 1; transform: rotateX(90deg); }
.txt-flip-clock-ones i:nth-child(3) { animation: txt-flip-clock-fall 1s var(--at) infinite; }
.txt-flip-clock-ones i:nth-child(4) { animation: txt-flip-clock-land 1s var(--at) infinite; }
.txt-flip-clock-tens i:nth-child(3) { animation: txt-flip-clock-fall-slow 10s var(--at) infinite; }
.txt-flip-clock-tens i:nth-child(4) { animation: txt-flip-clock-land-slow 10s var(--at) infinite; }
@keyframes txt-flip-clock-count {
  to { --txt-flip-clock-d: var(--n); }
}
/* each flip takes 0.6s: 0.3s for the top to fall, 0.3s for the bottom to land */
@keyframes txt-flip-clock-fall {
  0%       { transform: rotateX(0); filter: brightness(1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  30%, 100% { transform: rotateX(-90deg); filter: brightness(0.55); }
}
@keyframes txt-flip-clock-land {
  0%, 30%  { transform: rotateX(90deg); filter: brightness(0.55); animation-timing-function: cubic-bezier(0.2, 0.8, 0.35, 1.25); }
  60%, 100% { transform: rotateX(0); filter: brightness(1); }
}
@keyframes txt-flip-clock-fall-slow {
  0%      { transform: rotateX(0); filter: brightness(1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  3%, 100% { transform: rotateX(-90deg); filter: brightness(0.55); }
}
@keyframes txt-flip-clock-land-slow {
  0%, 3%  { transform: rotateX(90deg); filter: brightness(0.55); animation-timing-function: cubic-bezier(0.2, 0.8, 0.35, 1.25); }
  6%, 100% { transform: rotateX(0); filter: brightness(1); }
}

@counter-style txt-split-flap-text-abc {
  system: cyclic;
  symbols: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z;
}
@property --txt-split-flap-text-k {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-split-flap-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.25);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  gap: 0.08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step: 70ms;}
.txt-split-flap-text span {
  position: relative;
  width: 0.86em;
  height: 1.3em;
  line-height: 1.3em;
  text-align: center;
  color: #f8fafc;
  background: linear-gradient(color-mix(in srgb, var(--c) 18%, #1f2937) 50%, color-mix(in srgb, var(--c) 18%, #111827) 50%);
  border-radius: 0.1em;
  perspective: 2em;
  counter-reset: txt-split-flap-text-l var(--txt-split-flap-text-k);
  /* --to is the letter (A = 1), --n how many flaps fall before it lands */
  animation: txt-split-flap-text-count calc(var(--n) * var(--step)) steps(var(--n)) forwards;
}
.txt-split-flap-text span::before {
  content: counter(txt-split-flap-text-l, txt-split-flap-text-abc);
}
/* the hinge and a falling flap that ticks once per letter */
.txt-split-flap-text span::after {
  content: "";
  position: absolute;
  inset: 0 0 50%;
  border-bottom: 0.03em solid rgb(0 0 0 / 0.5);
  border-radius: 0.1em 0.1em 0 0;
  background: linear-gradient(rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.35));
  transform-origin: bottom;
  animation: txt-split-flap-text-flap var(--step) ease-in var(--n) forwards;
}
@keyframes txt-split-flap-text-count {
  from { --txt-split-flap-text-k: calc(var(--to) + 26 - var(--n)); }
  to   { --txt-split-flap-text-k: calc(var(--to) + 26); }
}
@keyframes txt-split-flap-text-flap {
  from { transform: rotateX(0); }
  to   { transform: rotateX(-90deg); }
}

@property --txt-percentage-counter-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-percentage-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2em 1em;
  width: 9em;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);}
.txt-percentage-counter-label::before {
  content: "Uploading";
  font-size: 0.6em;
  font-weight: 600;
  opacity: 0.7;
  animation: txt-percentage-counter-done 2.2s forwards;
}
.txt-percentage-counter-num {
  color: var(--c);
  font-variant-numeric: tabular-nums;
  counter-reset: txt-percentage-counter-v var(--txt-percentage-counter-n);
  animation: txt-percentage-counter-count 2.2s var(--ease) forwards;
}
.txt-percentage-counter-num::after {
  content: counter(txt-percentage-counter-v) "%";
}
.txt-percentage-counter-bar {
  grid-column: 1 / -1;
  height: 0.22em;
  border-radius: 1em;
  background: linear-gradient(var(--c), var(--c)) 0 0 / 100% 100% no-repeat, color-mix(in srgb, var(--c) 18%, transparent);
  background-size: 0% 100%, auto;
  animation: txt-percentage-counter-fill 2.2s var(--ease) forwards;
}
@keyframes txt-percentage-counter-count {
  to { --txt-percentage-counter-n: 100; }
}
@keyframes txt-percentage-counter-fill {
  to { background-size: 100% 100%, auto; }
}
@keyframes txt-percentage-counter-done {
  0%, 99.9% { content: "Uploading"; }
  100%      { content: "Complete"; }
}

@property --txt-rating-counter-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --txt-rating-counter-whole {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --txt-rating-counter-tenth {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-rating-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);}
.txt-rating-counter-num {
  font-size: 1.9em;
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  /* 49 tenths: an integer rounds to nearest, so n / 10 - 0.5 is the floor */
  --txt-rating-counter-whole: calc(var(--txt-rating-counter-n) / 10 - 0.5);
  --txt-rating-counter-tenth: calc(var(--txt-rating-counter-n) - var(--txt-rating-counter-whole) * 10);
  counter-reset: txt-rating-counter-w var(--txt-rating-counter-whole) txt-rating-counter-t var(--txt-rating-counter-tenth);
  animation: txt-rating-counter-count 2s var(--ease) forwards;
}
.txt-rating-counter-num::after {
  content: counter(txt-rating-counter-w) "." counter(txt-rating-counter-t);
}
.txt-rating-counter-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  opacity: 0.9;
}
.txt-rating-counter-stars {
  position: relative;
  width: max-content;
  font-size: 1.6em;
  line-height: 1;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--c) 22%, transparent);
}
.txt-rating-counter-stars::after {
  content: "★★★★★";
  position: absolute;
  inset: 0;
  color: var(--c);
  clip-path: inset(0 100% 0 0);
  animation: txt-rating-counter-fill 2s var(--ease) forwards;
}
@keyframes txt-rating-counter-count {
  to { --txt-rating-counter-n: 49; }
}
@keyframes txt-rating-counter-fill {
  to { clip-path: inset(0 3% 0 0); }
}

@property --txt-countdown-to-go-n {
  syntax: "<integer>";
  initial-value: 10;
  inherits: false;
}
.txt-countdown-to-go {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 2.2);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  --tick: 0.4s;
  counter-reset: txt-countdown-to-go-v var(--txt-countdown-to-go-n);
  animation: txt-countdown-to-go-count calc(var(--tick) * 11) steps(11) forwards;}
.txt-countdown-to-go::before,
.txt-countdown-to-go::after {
  grid-area: 1 / 1;
}
.txt-countdown-to-go::before {
  content: counter(txt-countdown-to-go-v);
  animation:
    txt-countdown-to-go-tick var(--tick) cubic-bezier(0.2, 0.9, 0.3, 1) 11,
    txt-countdown-to-go-hide 0.15s calc(var(--tick) * 11) forwards;
}
.txt-countdown-to-go::after {
  content: "GO!";
  opacity: 0;
  animation: txt-countdown-to-go-go 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--tick) * 11) forwards;
}
@keyframes txt-countdown-to-go-count {
  from { --txt-countdown-to-go-n: 10; }
  to   { --txt-countdown-to-go-n: -1; }
}
@keyframes txt-countdown-to-go-tick {
  from { transform: scale(1.35); opacity: 0.35; }
  40%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes txt-countdown-to-go-hide {
  to { opacity: 0; transform: scale(0.6); }
}
@keyframes txt-countdown-to-go-go {
  from { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

@property --txt-seven-segment-clock-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-seven-segment-clock {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.3);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.13em;
  padding: 0.32em 0.48em;
  border-radius: 0.22em;
  background: color-mix(in srgb, var(--c) 8%, #0b0d10);
  --on: var(--c);
  --off: color-mix(in srgb, var(--c) 13%, transparent);}
.txt-seven-segment-clock-digit {
  position: relative;
  width: 0.72em;
  height: 1.3em;
  transform: skewX(-7deg);
  filter: drop-shadow(0 0 0.08em color-mix(in srgb, var(--c) 60%, transparent));
}
/* segments a, b, c, d, e, f, g in source order */
.txt-seven-segment-clock-digit i {
  position: absolute;
  /* slide the ten-cell strip so cell --d shows */
  background-size: 1000% 100%;
  background-position: calc(var(--d) * 100% / 9) 0;
}
.txt-seven-segment-clock-digit i:is(:nth-child(1), :nth-child(4), :nth-child(7)) {
  left: 0.07em;
  right: 0.07em;
  height: 0.12em;
  clip-path: polygon(0.06em 0, calc(100% - 0.06em) 0, 100% 50%, calc(100% - 0.06em) 100%, 0.06em 100%, 0 50%);
}
.txt-seven-segment-clock-digit i:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) {
  width: 0.12em;
  height: calc(50% - 0.12em);
  clip-path: polygon(50% 0, 100% 0.06em, 100% calc(100% - 0.06em), 50% 100%, 0 calc(100% - 0.06em), 0 0.06em);
}
.txt-seven-segment-clock-digit i:nth-child(1) { top: 0; background-image: linear-gradient(90deg, var(--on) 0% 10%, var(--off) 10% 20%, var(--on) 20% 40%, var(--off) 40% 50%, var(--on) 50% 100%); }
.txt-seven-segment-clock-digit i:nth-child(2) { right: 0; top: 0.06em; background-image: linear-gradient(90deg, var(--on) 0% 50%, var(--off) 50% 70%, var(--on) 70% 100%); }
.txt-seven-segment-clock-digit i:nth-child(3) { right: 0; bottom: 0.06em; background-image: linear-gradient(90deg, var(--on) 0% 20%, var(--off) 20% 30%, var(--on) 30% 100%); }
.txt-seven-segment-clock-digit i:nth-child(4) { bottom: 0; background-image: linear-gradient(90deg, var(--on) 0% 10%, var(--off) 10% 20%, var(--on) 20% 40%, var(--off) 40% 50%, var(--on) 50% 70%, var(--off) 70% 80%, var(--on) 80% 100%); }
.txt-seven-segment-clock-digit i:nth-child(5) { left: 0; bottom: 0.06em; background-image: linear-gradient(90deg, var(--on) 0% 10%, var(--off) 10% 20%, var(--on) 20% 30%, var(--off) 30% 60%, var(--on) 60% 70%, var(--off) 70% 80%, var(--on) 80% 90%, var(--off) 90% 100%); }
.txt-seven-segment-clock-digit i:nth-child(6) { left: 0; top: 0.06em; background-image: linear-gradient(90deg, var(--on) 0% 10%, var(--off) 10% 40%, var(--on) 40% 70%, var(--off) 70% 80%, var(--on) 80% 100%); }
.txt-seven-segment-clock-digit i:nth-child(7) { top: calc(50% - 0.06em); background-image: linear-gradient(90deg, var(--off) 0% 20%, var(--on) 20% 70%, var(--off) 70% 80%, var(--on) 80% 100%); }
/* the running seconds: an integer steps 0 to 9 (or 0 to 5) and feeds --d */
.txt-seven-segment-clock-run {
  --d: var(--txt-seven-segment-clock-n);
  animation: txt-seven-segment-clock-count calc(var(--p) * var(--n)) steps(var(--n)) -7s infinite;
}
.txt-seven-segment-clock-colon {
  width: 0.13em;
  height: 0.62em;
  background:
    radial-gradient(circle closest-side, var(--c) 92%, transparent) top / 0.13em 0.13em no-repeat,
    radial-gradient(circle closest-side, var(--c) 92%, transparent) bottom / 0.13em 0.13em no-repeat;
  filter: drop-shadow(0 0 0.08em color-mix(in srgb, var(--c) 60%, transparent));
  animation: txt-seven-segment-clock-blink 1s steps(1) infinite;
}
@keyframes txt-seven-segment-clock-count {
  to { --txt-seven-segment-clock-n: var(--n); }
}
@keyframes txt-seven-segment-clock-blink {
  50% { opacity: 0.2; }
}

.txt-infinite-scrolling-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  width: 14em;
  overflow: hidden;
  white-space: nowrap;
  color: var(--c);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);}
.txt-infinite-scrolling-text-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  font-size: 1.5em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  animation: txt-infinite-scrolling-text-scroll 9s linear infinite;
}
.txt-infinite-scrolling-text-group span:nth-of-type(even) {
  color: transparent;
  -webkit-text-stroke: 0.03em var(--c);
}
.txt-infinite-scrolling-text-group i {
  padding: 0 0.35em;
  font-size: 0.5em;
  font-style: normal;
  color: color-mix(in srgb, var(--c) 70%, transparent);
}
@keyframes txt-infinite-scrolling-text-scroll {
  to { transform: translateX(-100%); }
}

.txt-news-ticker {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.72);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: stretch;
  width: 19em;
  overflow: hidden;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);}
.txt-news-ticker-badge {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.7em;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #dc2626;
}
.txt-news-ticker-badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #fff;
  animation: txt-news-ticker-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.txt-news-ticker-window {
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5em, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.5em, #000 85%, transparent);
}
.txt-news-ticker-track {
  display: flex;
  flex-shrink: 0;
  animation: txt-news-ticker-scroll 16s linear infinite;
}
.txt-news-ticker-track span::after {
  content: "•";
  margin: 0 0.7em;
  color: var(--c);
}
@keyframes txt-news-ticker-scroll {
  to { transform: translateX(-100%); }
}
@keyframes txt-news-ticker-ping {
  0%   { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); }
  100% { box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0); }
}

.txt-circular-text-rotate {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: grid;
  place-items: center;
  width: 4.6em;
  height: 4.6em;}
.txt-circular-text-rotate-ring {
  position: absolute;
  inset: 0;
  overflow: visible;
  fill: currentColor;
  font-weight: 700;
  animation: txt-circular-text-rotate-spin 14s linear infinite;
}
.txt-circular-text-rotate-core {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--c);
  overflow: hidden;
}
.txt-circular-text-rotate-core svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: txt-circular-text-rotate-bob 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes txt-circular-text-rotate-spin {
  to { transform: rotate(360deg); }
}
@keyframes txt-circular-text-rotate-bob {
  0%, 100% { transform: translateY(-0.12em); }
  50%      { transform: translateY(0.14em); }
}

.txt-slot-machine-numbers {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;}
.txt-slot-machine-numbers-frame {
  display: flex;
  gap: 0.14em;
  padding: 0.16em;
  border-radius: 0.35em;
  background: var(--c);
  box-shadow: 0 0.2em 0.5em -0.2em color-mix(in srgb, var(--c) 70%, transparent);
}
.txt-slot-machine-numbers-reel {
  position: relative;
  width: 0.95em;
  height: 1.2em;
  overflow: hidden;
  font-size: 1.9em;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c) 75%, #000);
  background: #fff;
  border-radius: 0.14em;
}
/* shading makes the flat strip read as a drum */
.txt-slot-machine-numbers-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0.3), transparent 32%, transparent 68%, rgb(0 0 0 / 0.3));
}
.txt-slot-machine-numbers-reel > span {
  display: block;
  width: 1ch;
  margin: 0 auto;
  word-break: break-all;
  --d: calc(1.2s + var(--i) * 0.45s);
  animation:
    txt-slot-machine-numbers-spin var(--d) forwards,
    txt-slot-machine-numbers-blur var(--d) ease-in forwards;
}
.txt-slot-machine-numbers-win {
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c);
  opacity: 0;
  animation: txt-slot-machine-numbers-win 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s forwards;
}
/* fast spin that brakes, runs a little past the digit, and settles back */
@keyframes txt-slot-machine-numbers-spin {
  0%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.3, 0.5, 0.4, 1); }
  90% { transform: translateY(calc(var(--to) * -1.2em - 0.28em)); animation-timing-function: ease-in-out; }
  to  { transform: translateY(calc(var(--to) * -1.2em)); }
}
@keyframes txt-slot-machine-numbers-blur {
  0%   { filter: blur(0.05em); }
  85%  { filter: blur(0.02em); }
  100% { filter: blur(0); }
}
@keyframes txt-slot-machine-numbers-win {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@property --txt-price-counter-d {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --txt-price-counter-c {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-price-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;}
.txt-price-counter-sign,
.txt-price-counter-cents {
  margin-top: 0.2em;
  font-size: 0.95em;
}
.txt-price-counter-dollars {
  font-size: 2.6em;
  font-weight: 800;
  letter-spacing: -0.04em;
  counter-reset: txt-price-counter-d var(--txt-price-counter-d);
  animation: txt-price-counter-dollars 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.txt-price-counter-dollars::after {
  content: counter(txt-price-counter-d);
}
.txt-price-counter-cents {
  counter-reset: txt-price-counter-c var(--txt-price-counter-c);
  /* four fast turns, ending on 99 */
  animation: txt-price-counter-cents 0.45s linear 4 forwards;
}
.txt-price-counter-cents::after {
  content: "." counter(txt-price-counter-c, decimal-leading-zero);
}
.txt-price-counter-per {
  align-self: flex-end;
  margin: 0 0 0.65em 0.2em;
  font-size: 0.6em;
  font-weight: 600;
  opacity: 0.65;
}
@keyframes txt-price-counter-dollars {
  to { --txt-price-counter-d: 49; }
}
@keyframes txt-price-counter-cents {
  to { --txt-price-counter-c: 99; }
}

@property --txt-stats-counter-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-stats-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: flex-start;}
.txt-stats-counter-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.7em;
}
.txt-stats-counter-stat + .txt-stats-counter-stat {
  border-left: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.txt-stats-counter-stat b {
  font-size: 1.45em;
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  counter-reset: txt-stats-counter-v var(--txt-stats-counter-n);
  animation: txt-stats-counter-count 1.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.25s) forwards;
}
.txt-stats-counter-stat b::before {
  content: counter(txt-stats-counter-v);
}
.txt-stats-counter-stat b::after {
  content: attr(data-unit);
  display: inline-block;
  opacity: 0;
  animation: txt-stats-counter-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.45s + var(--i) * 0.25s) forwards;
}
.txt-stats-counter-stat span {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}
@keyframes txt-stats-counter-count {
  to { --txt-stats-counter-n: var(--to); }
}
@keyframes txt-stats-counter-pop {
  from { opacity: 0; transform: scale(0.2) translateY(0.3em); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@property --txt-year-counter-y {
  syntax: "<integer>";
  initial-value: 2020;
  inherits: false;
}
@property --txt-year-counter-p {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
.txt-year-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 10em;
  padding-top: 1.4em;
  --w: 10em;
  --hop: 0.5s;}
.txt-year-counter-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.5em;
  background: linear-gradient(color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 22%, transparent)) center / 100% 0.1em no-repeat;
  /* 6 hops of --hop each: move for half a hop, rest for half */
  animation: txt-year-counter-progress calc(var(--hop) * 5.5) cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.txt-year-counter-track::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 0.05em);
  width: 100%;
  height: 0.1em;
  background: var(--c);
  transform-origin: left;
  transform: scaleX(var(--txt-year-counter-p));
}
.txt-year-counter-track i {
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 35%, #9ca3af);
}
.txt-year-counter-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--c) 25%, transparent);
  transform: translate(calc(var(--txt-year-counter-p) * var(--w) - 50%), -50%);
}
.txt-year-counter-dot b {
  position: absolute;
  bottom: 0.8em;
  left: 50%;
  translate: -50% 0;
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  font-size: 0.9em;
  color: #fff;
  background: var(--c);
  font-variant-numeric: tabular-nums;
  counter-reset: txt-year-counter-y var(--txt-year-counter-y);
  animation:
    txt-year-counter-year calc(var(--hop) * 6) steps(6) calc(var(--hop) * -0.5) forwards,
    txt-year-counter-pop var(--hop) cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--hop) * 0.5) 6;
}
.txt-year-counter-dot b::after {
  content: counter(txt-year-counter-y);
}
@keyframes txt-year-counter-progress {
  0% { --txt-year-counter-p: 0; }
  9.09%, 18.18% { --txt-year-counter-p: 0.1667; }
  27.27%, 36.36% { --txt-year-counter-p: 0.3333; }
  45.45%, 54.55% { --txt-year-counter-p: 0.5; }
  63.64%, 72.73% { --txt-year-counter-p: 0.6667; }
  81.82%, 90.91% { --txt-year-counter-p: 0.8333; }
  100% { --txt-year-counter-p: 1; }
}
@keyframes txt-year-counter-year {
  from { --txt-year-counter-y: 2020; }
  to   { --txt-year-counter-y: 2026; }
}
@keyframes txt-year-counter-pop {
  0%  { transform: scale(1.18); }
  40% { transform: scale(0.97); }
  to  { transform: scale(1); }
}

@property --txt-views-counter-n {
  syntax: "<integer>";
  initial-value: 940;
  inherits: false;
}
.txt-views-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.2);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--c);}
.txt-views-counter svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
  animation: txt-views-counter-blink 0.5s ease-in-out 1.6s;
}
.txt-views-counter-num {
  display: inline-grid;
  height: 1.2em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  counter-reset: txt-views-counter-v var(--txt-views-counter-n);
  animation: txt-views-counter-count 1.5s cubic-bezier(0.55, 0, 0.9, 0.55) forwards;
}
.txt-views-counter-num::before,
.txt-views-counter-num::after {
  grid-area: 1 / 1;
}
.txt-views-counter-num::before {
  content: counter(txt-views-counter-v) " views";
  animation: txt-views-counter-out 0.35s cubic-bezier(0.55, 0, 1, 0.45) 1.6s forwards;
}
.txt-views-counter-num::after {
  content: "1K views";
  transform: translateY(110%);
  animation: txt-views-counter-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.75s forwards;
}
@keyframes txt-views-counter-count {
  to { --txt-views-counter-n: 999; }
}
@keyframes txt-views-counter-out {
  to { transform: translateY(-110%); opacity: 0; }
}
@keyframes txt-views-counter-in {
  to { transform: translateY(0); }
}
@keyframes txt-views-counter-blink {
  50% { transform: scaleY(0.15); }
}

@property --txt-circular-countdown-timer-n {
  syntax: "<integer>";
  initial-value: 10;
  inherits: false;
}
.txt-circular-countdown-timer {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.3);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: grid;
  place-items: center;
  width: 2.8em;
  height: 2.8em;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  counter-reset: txt-circular-countdown-timer-v var(--txt-circular-countdown-timer-n);
  animation:
    txt-circular-countdown-timer-count 10s steps(10) infinite,
    txt-circular-countdown-timer-warn 10s step-end infinite;}
.txt-circular-countdown-timer::after {
  content: counter(txt-circular-countdown-timer-v);
}
.txt-circular-countdown-timer svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 7;
}
.txt-circular-countdown-timer circle {
  stroke: color-mix(in srgb, var(--c) 18%, transparent);
}
.txt-circular-countdown-timer circle.txt-circular-countdown-timer-arc {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: txt-circular-countdown-timer-drain 10s linear infinite;
}
@keyframes txt-circular-countdown-timer-count {
  from { --txt-circular-countdown-timer-n: 10; }
  to   { --txt-circular-countdown-timer-n: 0; }
}
@keyframes txt-circular-countdown-timer-drain {
  to { stroke-dashoffset: 100; }
}
@keyframes txt-circular-countdown-timer-warn {
  0%  { color: var(--c); }
  70% { color: #ef4444; }
}

@property --txt-stopwatch-timer-v {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-stopwatch-timer {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.4);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  color: var(--c);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  /* where the watch starts: 00:12.47 */
  --t: -12.47s;}
.txt-stopwatch-timer svg {
  align-self: center;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.txt-stopwatch-timer-hand {
  transform-box: view-box;
  transform-origin: 50% 56.25%;
  animation: txt-stopwatch-timer-hand 60s steps(60) var(--t) infinite;
}
.txt-stopwatch-timer :is(.txt-stopwatch-timer-min, .txt-stopwatch-timer-sec, .txt-stopwatch-timer-hun) {
  counter-reset: txt-stopwatch-timer-v var(--txt-stopwatch-timer-v);
}
.txt-stopwatch-timer :is(.txt-stopwatch-timer-min, .txt-stopwatch-timer-sec)::after {
  content: counter(txt-stopwatch-timer-v, decimal-leading-zero);
}
.txt-stopwatch-timer-min { animation: txt-stopwatch-timer-count 3600s steps(60) var(--t) infinite; }
.txt-stopwatch-timer-sec { animation: txt-stopwatch-timer-count 60s steps(60) var(--t) infinite; }
.txt-stopwatch-timer-hun {
  font-size: 0.6em;
  opacity: 0.6;
  animation: txt-stopwatch-timer-hundredths 1s steps(100) var(--t) infinite;
}
.txt-stopwatch-timer-hun::after {
  content: "." counter(txt-stopwatch-timer-v, decimal-leading-zero);
}
@keyframes txt-stopwatch-timer-count {
  to { --txt-stopwatch-timer-v: 60; }
}
@keyframes txt-stopwatch-timer-hundredths {
  to { --txt-stopwatch-timer-v: 100; }
}
@keyframes txt-stopwatch-timer-hand {
  to { transform: rotate(360deg); }
}

@property --txt-launch-countdown-timer-v {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-launch-countdown-timer {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  gap: 0.3em;}
.txt-launch-countdown-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  width: 2.3em;
  padding: 0.3em 0 0.35em;
  overflow: hidden;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.txt-launch-countdown-timer-unit b {
  font-size: 1.15em;
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}
.txt-launch-countdown-timer-unit span {
  font-size: 0.36em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.txt-launch-countdown-timer :is(.txt-launch-countdown-timer-min, .txt-launch-countdown-timer-sec) {
  counter-reset: txt-launch-countdown-timer-n var(--txt-launch-countdown-timer-v);
}
.txt-launch-countdown-timer :is(.txt-launch-countdown-timer-min, .txt-launch-countdown-timer-sec)::after {
  content: counter(txt-launch-countdown-timer-n, decimal-leading-zero);
}
/* negative delays start the clock at 36:08; minutes roll when seconds pass 00 */
.txt-launch-countdown-timer-min {
  animation: txt-launch-countdown-timer-count 3600s steps(60) -1431s infinite;
}
.txt-launch-countdown-timer-sec {
  animation:
    txt-launch-countdown-timer-count 60s steps(60) -51s infinite,
    txt-launch-countdown-timer-drop 1s cubic-bezier(0.2, 0.9, 0.3, 1.2) -51s infinite;
}
@keyframes txt-launch-countdown-timer-count {
  from { --txt-launch-countdown-timer-v: 59; }
  to   { --txt-launch-countdown-timer-v: -1; }
}
@keyframes txt-launch-countdown-timer-drop {
  0%       { transform: translateY(-0.6em); opacity: 0; }
  35%, 100% { transform: translateY(0); opacity: 1; }
}

.txt-stock-ticker {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.72);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  width: 19em;
  padding: 0.5em 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-block: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: color-mix(in srgb, var(--c) 7%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.txt-stock-ticker-track {
  display: flex;
  flex-shrink: 0;
  animation: txt-stock-ticker-scroll 18s linear infinite;
}
.txt-stock-ticker-track span {
  padding: 0 0.9em;
  border-right: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.txt-stock-ticker-track b {
  color: var(--c);
  font-weight: 800;
}
.txt-stock-ticker-track i {
  font-style: normal;
  font-weight: 700;
}
.txt-stock-ticker-up { color: #16a34a; }
.txt-stock-ticker-down { color: #e5484d; }
.txt-stock-ticker-up::before { content: "▲ "; font-size: 0.7em; }
.txt-stock-ticker-down::before { content: "▼ "; font-size: 0.7em; }
@keyframes txt-stock-ticker-scroll {
  to { transform: translateX(-100%); }
}

.txt-two-row-marquee {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.75);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: grid;
  place-items: center;
  width: 19em;
  height: 5em;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.txt-two-row-marquee-row {
  grid-area: 1 / 1;
  display: flex;
  width: 110%;
  padding: 0.35em 0;
  overflow: hidden;
  color: #fff;
  background: var(--c);
  transform: rotate(-4deg);
  box-shadow: 0 0.2em 0.5em -0.2em rgb(0 0 0 / 0.35);
}
.txt-two-row-marquee-row:first-child {
  z-index: 1;
}
.txt-two-row-marquee-row:last-child {
  background: color-mix(in srgb, var(--c) 30%, #111827);
  transform: rotate(4deg);
}
.txt-two-row-marquee-group {
  flex-shrink: 0;
  animation: txt-two-row-marquee-scroll 12s linear infinite;
}
.txt-two-row-marquee-row:last-child .txt-two-row-marquee-group {
  animation-direction: reverse;
}
@keyframes txt-two-row-marquee-scroll {
  to { transform: translateX(-100%); }
}

.txt-vertical-marquee {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.8);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  height: 5.2em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);}
.txt-vertical-marquee-group {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: txt-vertical-marquee-up 9s linear infinite;
}
.txt-vertical-marquee-group li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 1.75em;
  font-weight: 600;
  white-space: nowrap;
}
.txt-vertical-marquee-group li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  font-size: 0.75em;
  color: #fff;
  background: var(--c);
}
@keyframes txt-vertical-marquee-up {
  to { transform: translateY(-100%); }
}

.txt-marquee-pause-on-hover {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.72);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  width: 19em;
  padding: 0.4em 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.txt-marquee-pause-on-hover-group {
  display: flex;
  flex-shrink: 0;
  gap: 0.5em;
  padding-right: 0.5em;
  animation: txt-marquee-pause-on-hover-scroll 14s linear infinite;
}
.txt-marquee-pause-on-hover:hover .txt-marquee-pause-on-hover-group {
  animation-play-state: paused;
}
.txt-marquee-pause-on-hover-group span {
  padding: 0.35em 0.85em;
  border-radius: 2em;
  font-weight: 600;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  transition: color 0.25s, background-color 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.txt-marquee-pause-on-hover-group span:hover {
  color: #fff;
  background: var(--c);
  transform: translateY(-0.12em);
}
@keyframes txt-marquee-pause-on-hover-scroll {
  to { transform: translateX(-100%); }
}

.txt-led-scrolling-sign {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.3em;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 6%, #0a0b0d);
  box-shadow: inset 0 0 0 0.06em rgb(255 255 255 / 0.06), 0 0.2em 0.5em -0.2em rgb(0 0 0 / 0.5);}
.txt-led-scrolling-sign-glow {
  filter: drop-shadow(0 0 0.15em var(--c));
}
.txt-led-scrolling-sign-screen {
  display: flex;
  align-items: center;
  width: 11em;
  height: 1.12em;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 75%, #fff);
  /* unlit LEDs, then a mask that turns everything into round pixels */
  background: color-mix(in srgb, var(--c) 18%, transparent);
  -webkit-mask: radial-gradient(circle closest-side, #000 72%, transparent 88%) 0 0 / 0.125em 0.125em;
  mask: radial-gradient(circle closest-side, #000 72%, transparent 88%) 0 0 / 0.125em 0.125em;
}
.txt-led-scrolling-sign-group {
  flex-shrink: 0;
  animation: txt-led-scrolling-sign-scroll 11s linear infinite;
}
@keyframes txt-led-scrolling-sign-scroll {
  to { transform: translateX(-100%); }
}

.txt-rotating-badge-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: grid;
  place-items: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  color: var(--c);
  box-shadow: inset 0 0 0 0.07em var(--c);}
.txt-rotating-badge-text::before {
  content: "";
  position: absolute;
  inset: 0.95em;
  border-radius: 50%;
  border: 0.05em dashed color-mix(in srgb, var(--c) 60%, transparent);
}
.txt-rotating-badge-text-ring {
  position: absolute;
  inset: 0;
  font-size: 0.44em;
  font-weight: 800;
  animation: txt-rotating-badge-text-spin 20s linear infinite;
}
/* each letter sits at the top of a full-width spoke that pivots on the center */
.txt-rotating-badge-text-ring span {
  position: absolute;
  inset: 0.55em 0 50%;
  text-align: center;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--i) * 360deg / var(--n)));
}
.txt-rotating-badge-text-core {
  font-size: 1.05em;
  font-weight: 900;
  letter-spacing: -0.03em;
}
@keyframes txt-rotating-badge-text-spin {
  to { transform: rotate(360deg); }
}

@property --txt-score-plus-one-s {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-score-plus-one {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  --beat: 0.5s;}
.txt-score-plus-one-label {
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.txt-score-plus-one-num {
  position: relative;
  display: inline-block;
  font-size: 1.8em;
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  --txt-score-plus-one-s: 120;
  counter-reset: txt-score-plus-one-v var(--txt-score-plus-one-s);
  animation:
    txt-score-plus-one-count calc(var(--beat) * 5) steps(5, start) 0.4s forwards,
    txt-score-plus-one-bump var(--beat) cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.4s 5;
}
.txt-score-plus-one-num::after {
  content: counter(txt-score-plus-one-v);
}
.txt-score-plus-one-num i {
  position: absolute;
  left: 100%;
  top: -0.1em;
  margin-left: 0.1em;
  font-size: 0.45em;
  font-style: normal;
  font-weight: 800;
  opacity: 0;
  animation: txt-score-plus-one-rise var(--beat) cubic-bezier(0.2, 0.7, 0.4, 1) 0.4s 5;
}
@keyframes txt-score-plus-one-count {
  from { --txt-score-plus-one-s: 120; }
  to   { --txt-score-plus-one-s: 170; }
}
@keyframes txt-score-plus-one-bump {
  from { transform: scale(1.2); }
  to   { transform: scale(1); }
}
@keyframes txt-score-plus-one-rise {
  0%   { opacity: 0; transform: translateY(0.4em) scale(0.6); }
  20%  { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { opacity: 0; transform: translateY(-1.1em) scale(1); }
}

@property --txt-binary-counter-v {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-binary-counter {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tick: 0.5s;
  /* start from 45 (00101101) instead of zero */
  --from: calc(var(--tick) * -45);}
.txt-binary-counter-bits {
  display: flex;
  gap: 0.1em;
}
.txt-binary-counter-bits i:nth-child(4) {
  margin-right: 0.22em;
}
.txt-binary-counter-bits i::before {
  content: "0";
  display: grid;
  place-items: center;
  width: 0.95em;
  height: 1.3em;
  border-radius: 0.18em;
  font-style: normal;
  animation: txt-binary-counter-bit calc(var(--tick) * 2 * var(--w)) step-end var(--from) infinite;
}
.txt-binary-counter-dec {
  width: 5ch;
  color: var(--c);
  counter-reset: txt-binary-counter-n var(--txt-binary-counter-v);
  animation: txt-binary-counter-count calc(var(--tick) * 256) steps(256) var(--from) infinite;
}
.txt-binary-counter-dec::after {
  content: "= " counter(txt-binary-counter-n);
}
@keyframes txt-binary-counter-bit {
  0%, 49% { content: "0"; color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
  50%, 100% { content: "1"; color: #fff; background: var(--c); }
}
@keyframes txt-binary-counter-count {
  to { --txt-binary-counter-v: 256; }
}

@counter-style txt-calendar-date-flip-day {
  system: cyclic;
  symbols: "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30";
}
/* September 1, 2026 is a Tuesday */
@counter-style txt-calendar-date-flip-weekday {
  system: cyclic;
  symbols: "Tuesday" "Wednesday" "Thursday" "Friday" "Saturday" "Sunday" "Monday";
}
@property --txt-calendar-date-flip-d {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.txt-calendar-date-flip {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.3);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  width: 3.2em;
  height: 3.5em;
  perspective: 8em;
  --flip: 1.6s;
  /* starts on the 12th */
  counter-reset: txt-calendar-date-flip-now calc(var(--txt-calendar-date-flip-d) + 12) txt-calendar-date-flip-next calc(var(--txt-calendar-date-flip-d) + 13);
  animation: txt-calendar-date-flip-count calc(var(--flip) * 30) steps(30) infinite;}
/* the binding strip and its two rings */
.txt-calendar-date-flip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 0.55em;
  border-radius: 0.28em 0.28em 0 0;
  background:
    radial-gradient(circle at 28% 50%, color-mix(in srgb, var(--c) 45%, #000) 0.07em, transparent 0.08em),
    radial-gradient(circle at 72% 50%, color-mix(in srgb, var(--c) 45%, #000) 0.07em, transparent 0.08em),
    var(--c);
}
.txt-calendar-date-flip-page {
  position: absolute;
  inset: 0.55em 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 0 0 0.28em 0.28em;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 0.1em 0.3em -0.1em rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(0 0 0 / 0.06);
}
.txt-calendar-date-flip-page em {
  font-size: 0.4em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c);
}
.txt-calendar-date-flip-page b {
  font-size: 1.45em;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.txt-calendar-date-flip-page i {
  font-size: 0.34em;
  font-style: normal;
  font-weight: 600;
  color: #6b7280;
}
.txt-calendar-date-flip-now b::after { content: counter(txt-calendar-date-flip-now, txt-calendar-date-flip-day); }
.txt-calendar-date-flip-now i::after { content: counter(txt-calendar-date-flip-now, txt-calendar-date-flip-weekday); }
.txt-calendar-date-flip-next b::after { content: counter(txt-calendar-date-flip-next, txt-calendar-date-flip-day); }
.txt-calendar-date-flip-next i::after { content: counter(txt-calendar-date-flip-next, txt-calendar-date-flip-weekday); }
.txt-calendar-date-flip-now {
  z-index: 1;
  transform-origin: top;
  backface-visibility: hidden;
  animation: txt-calendar-date-flip-tear var(--flip) infinite;
}
@keyframes txt-calendar-date-flip-count {
  to { --txt-calendar-date-flip-d: 30; }
}
@keyframes txt-calendar-date-flip-tear {
  0%, 55% { transform: rotateX(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  92%     { opacity: 1; }
  100%    { transform: rotateX(-110deg); opacity: 0; }
}

.txt-elevator-floor-indicator {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.8);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.45em 0.25em 0.35em;
  border-radius: 0.2em;
  color: var(--c);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--c) 8%, #0b0c0f);
  box-shadow: inset 0 0 0 0.05em rgb(255 255 255 / 0.08);
  --ride: 10.5s;}
.txt-elevator-floor-indicator-arrows {
  display: grid;
  gap: 0.12em;
}
.txt-elevator-floor-indicator-arrows i {
  width: 0.42em;
  height: 0.3em;
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 0.1em var(--c));
  opacity: 0.15;
  animation: txt-elevator-floor-indicator-up var(--ride) step-end infinite;
}
.txt-elevator-floor-indicator-arrows i:last-child {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation-name: txt-elevator-floor-indicator-down;
}
.txt-elevator-floor-indicator-floor {
  height: 1.2em;
  overflow: hidden;
  line-height: 1.2;
  text-shadow: 0 0 0.15em var(--c);
}
.txt-elevator-floor-indicator-floor span {
  display: block;
  width: 1ch;
  word-break: break-all;
  animation: txt-elevator-floor-indicator-ride var(--ride) cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes txt-elevator-floor-indicator-ride {
  0% { transform: translateY(0); }
  7.62% { transform: translateY(0); }
  11.43% { transform: translateY(-1.2em); }
  16.19% { transform: translateY(-1.2em); }
  20% { transform: translateY(-2.4em); }
  24.76% { transform: translateY(-2.4em); }
  28.57% { transform: translateY(-3.6em); }
  33.33% { transform: translateY(-3.6em); }
  37.14% { transform: translateY(-4.8em); }
  41.9% { transform: translateY(-4.8em); }
  45.71% { transform: translateY(-6em); }
  57.14% { transform: translateY(-6em); }
  60.95% { transform: translateY(-4.8em); }
  65.71% { transform: translateY(-4.8em); }
  69.52% { transform: translateY(-3.6em); }
  74.29% { transform: translateY(-3.6em); }
  78.1% { transform: translateY(-2.4em); }
  82.86% { transform: translateY(-2.4em); }
  86.67% { transform: translateY(-1.2em); }
  91.43% { transform: translateY(-1.2em); }
  95.24% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes txt-elevator-floor-indicator-up {
  0% { opacity: 0.15; }
  7.62% { opacity: 1; }
  45.71%, 100% { opacity: 0.15; }
}
@keyframes txt-elevator-floor-indicator-down {
  0% { opacity: 0.15; }
  57.14% { opacity: 1; }
  95.24%, 100% { opacity: 0.15; }
}

@property --txt-live-price-ticker-v {
  syntax: "<integer>";
  initial-value: 218;
  inherits: false;
}
.txt-live-price-ticker {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-variant-numeric: tabular-nums;
  --beat: 1s;}
.txt-live-price-ticker-sym {
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--c);
}
.txt-live-price-ticker-price {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  counter-reset: txt-live-price-ticker-n var(--txt-live-price-ticker-v);
  animation:
    txt-live-price-ticker-tick calc(var(--beat) * 6) step-end infinite,
    txt-live-price-ticker-flash calc(var(--beat) * 6) linear infinite;
}
.txt-live-price-ticker-price::before {
  content: "$64," counter(txt-live-price-ticker-n);
}
.txt-live-price-ticker-price::after {
  content: "▼";
  font-size: 0.55em;
  animation: txt-live-price-ticker-arrow calc(var(--beat) * 6) step-end infinite;
}
@keyframes txt-live-price-ticker-tick {
  0% { --txt-live-price-ticker-v: 218; }
  16.67% { --txt-live-price-ticker-v: 231; }
  33.33% { --txt-live-price-ticker-v: 227; }
  50% { --txt-live-price-ticker-v: 240; }
  66.67% { --txt-live-price-ticker-v: 236; }
  83.33% { --txt-live-price-ticker-v: 229; }
  100% { --txt-live-price-ticker-v: 218; }
}
@keyframes txt-live-price-ticker-arrow {
  0% { content: "▼"; color: #e5484d; }
  16.67% { content: "▲"; color: #16a34a; }
  33.33% { content: "▼"; color: #e5484d; }
  50% { content: "▲"; color: #16a34a; }
  66.67% { content: "▼"; color: #e5484d; }
  83.33% { content: "▼"; color: #e5484d; }
  100% { content: "▼"; color: #e5484d; }
}
@keyframes txt-live-price-ticker-flash {
  0% { background-color: color-mix(in srgb, #e5484d 28%, transparent); animation-timing-function: ease-out; }
  8.33% { background-color: transparent; animation-timing-function: step-end; }
  16.67% { background-color: color-mix(in srgb, #16a34a 28%, transparent); animation-timing-function: ease-out; }
  25% { background-color: transparent; animation-timing-function: step-end; }
  33.33% { background-color: color-mix(in srgb, #e5484d 28%, transparent); animation-timing-function: ease-out; }
  41.67% { background-color: transparent; animation-timing-function: step-end; }
  50% { background-color: color-mix(in srgb, #16a34a 28%, transparent); animation-timing-function: ease-out; }
  58.33% { background-color: transparent; animation-timing-function: step-end; }
  66.67% { background-color: color-mix(in srgb, #e5484d 28%, transparent); animation-timing-function: ease-out; }
  75% { background-color: transparent; animation-timing-function: step-end; }
  83.33% { background-color: color-mix(in srgb, #e5484d 28%, transparent); animation-timing-function: ease-out; }
  91.67% { background-color: transparent; animation-timing-function: step-end; }
  100% { background-color: color-mix(in srgb, #e5484d 28%, transparent); }
}

@property --txt-dice-roll-f {
  syntax: "<integer>";
  initial-value: 5;
  inherits: true;
}
.txt-dice-roll {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;}
.txt-dice-roll-die {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 0.1em;
  width: 2.2em;
  height: 2.2em;
  padding: 0.32em;
  border-radius: 0.42em;
  background: var(--c);
  box-shadow: inset 0 -0.1em 0 color-mix(in srgb, var(--c) 70%, #000), 0 0.12em 0.3em -0.1em rgb(0 0 0 / 0.4);
  animation:
    txt-dice-roll-tumble 1.3s forwards,
    txt-dice-roll-faces 1.1s step-end forwards;
}
/* pips: top left, top right, middle left, center, middle right, bottom left, bottom right */
.txt-dice-roll-die i {
  border-radius: 50%;
  background-size: 600% 100%;
  background-position: calc((var(--txt-dice-roll-f) - 1) * 100% / 5) 0;
}
.txt-dice-roll-die i:nth-child(1) { grid-area: 1 / 1; background-image: linear-gradient(90deg, transparent 0% 16.67%, #fff 16.67% 100%); }
.txt-dice-roll-die i:nth-child(2) { grid-area: 1 / 3; background-image: linear-gradient(90deg, transparent 0% 50%, #fff 50% 100%); }
.txt-dice-roll-die i:nth-child(3) { grid-area: 2 / 1; background-image: linear-gradient(90deg, transparent 0% 83.33%, #fff 83.33% 100%); }
.txt-dice-roll-die i:nth-child(4) { grid-area: 2 / 2; background-image: linear-gradient(90deg, #fff 0% 16.67%, transparent 16.67% 33.33%, #fff 33.33% 50%, transparent 50% 66.67%, #fff 66.67% 83.33%, transparent 83.33% 100%); }
.txt-dice-roll-die i:nth-child(5) { grid-area: 2 / 3; background-image: linear-gradient(90deg, transparent 0% 83.33%, #fff 83.33% 100%); }
.txt-dice-roll-die i:nth-child(6) { grid-area: 3 / 1; background-image: linear-gradient(90deg, transparent 0% 50%, #fff 50% 100%); }
.txt-dice-roll-die i:nth-child(7) { grid-area: 3 / 3; background-image: linear-gradient(90deg, transparent 0% 16.67%, #fff 16.67% 100%); }
.txt-dice-roll-result {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--c);
  opacity: 0;
  animation: txt-dice-roll-show 0.4s ease-out 1.25s forwards;
}
@keyframes txt-dice-roll-tumble {
  0%   { transform: translateY(-1.1em) rotate(-280deg) scale(0.8); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  35%  { transform: translateY(0) rotate(-110deg) scale(1); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  52%  { transform: translateY(-0.45em) rotate(-40deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  68%  { transform: translateY(0) rotate(-8deg) scale(1.1, 0.9); animation-timing-function: ease-out; }
  80%  { transform: translateY(-0.08em) rotate(-2deg) scale(0.97, 1.03); }
  100% { transform: none; }
}
@keyframes txt-dice-roll-faces {
  0% { --txt-dice-roll-f: 3; }
  12.5% { --txt-dice-roll-f: 6; }
  25% { --txt-dice-roll-f: 2; }
  37.5% { --txt-dice-roll-f: 4; }
  50% { --txt-dice-roll-f: 1; }
  62.5% { --txt-dice-roll-f: 6; }
  75% { --txt-dice-roll-f: 3; }
  87.5% { --txt-dice-roll-f: 2; }
  100% { --txt-dice-roll-f: 5; }
}
@keyframes txt-dice-roll-show {
  from { opacity: 0; transform: translateX(-0.3em); }
  to   { opacity: 1; transform: none; }
}

.txt-3d-extruded-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.8);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.02em;
  animation: txt-3d-extruded-text-tilt 5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;}
/* The depth sits on the side turned toward you, so it flips with the tilt. */
@keyframes txt-3d-extruded-text-tilt {
  from {
    transform: perspective(12em) rotateX(10deg) rotateY(-22deg);
    text-shadow:
      0.014em 0.006em 0 color-mix(in srgb, var(--c) 80%, #000),
      0.028em 0.012em 0 color-mix(in srgb, var(--c) 77%, #000),
      0.042em 0.018em 0 color-mix(in srgb, var(--c) 74%, #000),
      0.056em 0.024em 0 color-mix(in srgb, var(--c) 71%, #000),
      0.07em 0.03em 0 color-mix(in srgb, var(--c) 68%, #000),
      0.084em 0.036em 0 color-mix(in srgb, var(--c) 65%, #000),
      0.098em 0.042em 0 color-mix(in srgb, var(--c) 62%, #000),
      0.112em 0.048em 0 color-mix(in srgb, var(--c) 59%, #000),
      0.126em 0.054em 0 color-mix(in srgb, var(--c) 56%, #000),
      0.14em 0.06em 0 color-mix(in srgb, var(--c) 53%, #000),
      0.252em 0.188em 0.14em color-mix(in srgb, var(--c) 28%, transparent);
  }
  to {
    transform: perspective(12em) rotateX(10deg) rotateY(22deg);
    text-shadow:
      -0.014em 0.006em 0 color-mix(in srgb, var(--c) 80%, #000),
      -0.028em 0.012em 0 color-mix(in srgb, var(--c) 77%, #000),
      -0.042em 0.018em 0 color-mix(in srgb, var(--c) 74%, #000),
      -0.056em 0.024em 0 color-mix(in srgb, var(--c) 71%, #000),
      -0.07em 0.03em 0 color-mix(in srgb, var(--c) 68%, #000),
      -0.084em 0.036em 0 color-mix(in srgb, var(--c) 65%, #000),
      -0.098em 0.042em 0 color-mix(in srgb, var(--c) 62%, #000),
      -0.112em 0.048em 0 color-mix(in srgb, var(--c) 59%, #000),
      -0.126em 0.054em 0 color-mix(in srgb, var(--c) 56%, #000),
      -0.14em 0.06em 0 color-mix(in srgb, var(--c) 53%, #000),
      -0.252em 0.188em 0.14em color-mix(in srgb, var(--c) 28%, transparent);
  }
}

.txt-3d-spinning-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.7);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  position: relative;
  display: inline-grid;
  perspective: 10em;
  color: var(--c);
  letter-spacing: 0.04em;}
.txt-3d-spinning-text::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -0.18em;
  height: 0.14em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  filter: blur(0.04em);
  animation: txt-3d-spinning-text-shadow 3.6s infinite;
}
.txt-3d-spinning-text-spin {
  display: grid;
  transform-style: preserve-3d;
  animation: txt-3d-spinning-text-turn 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-3d-spinning-text-front,
.txt-3d-spinning-text-back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.txt-3d-spinning-text-back {
  transform: rotateY(180deg);
  color: color-mix(in srgb, var(--c) 62%, #000);
}
/* Two eased halves: it slows down facing front, then facing back. */
@keyframes txt-3d-spinning-text-turn {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes txt-3d-spinning-text-shadow {
  0%, 50%, 100% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.5); }
  25%, 75%      { transform: scaleX(0.2); animation-timing-function: cubic-bezier(0, 0.5, 0.4, 1); }
}

.txt-3d-text-cube {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.15);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  perspective: 10em;
  letter-spacing: 0.08em;}
.txt-3d-text-cube-box {
  display: grid;
  transform-style: preserve-3d;
  animation: txt-3d-text-cube-roll 8s cubic-bezier(0.5, -0.3, 0.3, 1.35) infinite;
}
.txt-3d-text-cube-box span {
  grid-area: 1 / 1;
  height: 1.5em;
  padding: 0 0.6em;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  background: var(--c);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* face f sits f quarter turns around the X axis, half the height out */
  transform: rotateX(calc(var(--f) * -90deg)) translateZ(0.75em);
}
.txt-3d-text-cube-box span:nth-child(even) {
  background: color-mix(in srgb, var(--c) 72%, #000);
}
@keyframes txt-3d-text-cube-roll {
  0%, 20%   { transform: rotateX(-18deg) rotateX(0deg); }
  25%, 45%  { transform: rotateX(-18deg) rotateX(90deg); }
  50%, 70%  { transform: rotateX(-18deg) rotateX(180deg); }
  75%, 95%  { transform: rotateX(-18deg) rotateX(270deg); }
  100%      { transform: rotateX(-18deg) rotateX(360deg); }
}

.txt-folding-paper-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.3);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  perspective: 9em;}
.txt-folding-paper-text-sheet {
  display: grid;
}
.txt-folding-paper-text-base,
.txt-folding-paper-text-flap {
  grid-area: 1 / 1;
}
.txt-folding-paper-text-base,
.txt-folding-paper-text-front,
.txt-folding-paper-text-back {
  padding: 0.35em 0.7em;
  border-radius: 0.08em;
  color: #fff;
  background: var(--c);
}
/* the bottom half stays put; the top half is the flap */
.txt-folding-paper-text-base {
  clip-path: inset(50% 0 0 0);
}
.txt-folding-paper-text-flap {
  display: grid;
  transform-style: preserve-3d;
  animation: txt-folding-paper-text-fold 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-folding-paper-text-front,
.txt-folding-paper-text-back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.txt-folding-paper-text-front {
  clip-path: inset(0 0 50% 0);
  animation: txt-folding-paper-text-shade 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* flipped half-turn, so its lower half lands on the top half's spot */
.txt-folding-paper-text-back {
  transform: rotateX(180deg);
  clip-path: inset(calc(50% - 0.04em) 0 0 0);
  background: color-mix(in srgb, var(--c) 72%, #fff);
}
@keyframes txt-folding-paper-text-fold {
  0%, 18%   { transform: translateZ(0.02em) rotateX(0deg); }
  46%, 68%  { transform: translateZ(0.02em) rotateX(-180deg); }
  96%, 100% { transform: translateZ(0.02em) rotateX(0deg); }
}
@keyframes txt-folding-paper-text-shade {
  0%, 18%, 96%, 100% { filter: brightness(1); }
  34%, 80%           { filter: brightness(0.72); }
}

.txt-3d-text-cylinder {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  perspective: 14em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);}
.txt-3d-text-cylinder-ring {
  position: relative;
  width: 0.62em;
  height: 1.2em;
  transform-style: preserve-3d;
  animation: txt-3d-text-cylinder-spin 16s linear infinite;
}
.txt-3d-text-cylinder-back,
.txt-3d-text-cylinder-front {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* 26 letters, 360 / 26 degrees apart, 2.6em from the axis */
.txt-3d-text-cylinder-ring span span {
  position: absolute;
  inset: 0;
  text-align: center;
  transform: rotateY(calc(var(--i) * 360deg / 26)) translateZ(2.6em);
}
.txt-3d-text-cylinder-front span {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* a faint copy just inside the ring shows its back through the far side */
.txt-3d-text-cylinder-back span {
  color: color-mix(in srgb, var(--c) 30%, transparent);
  transform: rotateY(calc(var(--i) * 360deg / 26)) translateZ(2.56em);
}
@keyframes txt-3d-text-cylinder-spin {
  from { transform: rotateX(-12deg) rotateY(0deg); }
  to   { transform: rotateX(-12deg) rotateY(-360deg); }
}

.txt-star-wars-text-crawl {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  width: 11em;
  height: 5.4em;
  overflow: hidden;
  perspective: 7em;
  perspective-origin: 50% 0;
  color: var(--c);
  -webkit-mask-image: linear-gradient(transparent 5%, #000 60%);
  mask-image: linear-gradient(transparent 5%, #000 60%);}
/* the floor the text slides along, tipped back from its bottom edge */
.txt-star-wars-text-crawl-plane {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 9em;
  height: 12em;
  margin-left: -4.5em;
  transform-origin: 50% 100%;
  transform: rotateX(58deg);
}
.txt-star-wars-text-crawl-text {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  font-size: 0.55em;
  line-height: 1.35;
  text-align: justify;
  animation: txt-star-wars-text-crawl-roll 15s linear -4s infinite;
}
.txt-star-wars-text-crawl-text p {
  margin: 0 0 0.9em;
}
.txt-star-wars-text-crawl-episode,
.txt-star-wars-text-crawl-heading {
  text-align: center;
}
.txt-star-wars-text-crawl-heading {
  font-size: 1.5em;
  letter-spacing: 0.08em;
}
@keyframes txt-star-wars-text-crawl-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% - 10em)); }
}

.txt-movie-title-zoom-out {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.25);
  font-family: system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.2;
  display: inline-block;
  padding-left: 0.3em; /* balances the trailing letter-spacing */
  color: var(--c);
  letter-spacing: 0.3em;
  animation: txt-movie-title-zoom-out-land 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;}
@keyframes txt-movie-title-zoom-out-land {
  0%   { opacity: 0; transform: scale(2.1); filter: blur(0.2em); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  12%  { opacity: 0.35; transform: scale(1.7); filter: blur(0.12em); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.txt-slam-text-shake {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.5);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  animation: txt-slam-text-shake-shake 0.55s linear 0.3s both;}
.txt-slam-text-shake-word {
  position: relative;
  isolation: isolate; /* keeps the flash behind the letters, not behind the page */
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.02em;
  animation: txt-slam-text-shake-drop 0.45s both;
}
/* a flash of light behind the word at the moment of impact */
.txt-slam-text-shake-word::after {
  content: "";
  position: absolute;
  inset: -0.6em -0.4em;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent);
  opacity: 0;
  animation: txt-slam-text-shake-flash 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s forwards;
}
@keyframes txt-slam-text-shake-drop {
  0%   { opacity: 0; transform: scale(3); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  66%  { opacity: 1; transform: scale(1); animation-timing-function: ease-out; }
  80%  { transform: scale(1.06, 0.92); }
  100% { opacity: 1; transform: none; }
}
@keyframes txt-slam-text-shake-flash {
  0%   { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes txt-slam-text-shake-shake {
  0%, 100% { transform: none; }
  10% { transform: translate(-0.07em, 0.05em) rotate(-1.4deg); }
  24% { transform: translate(0.06em, -0.04em) rotate(1.1deg); }
  38% { transform: translate(-0.045em, 0.03em) rotate(-0.7deg); }
  52% { transform: translate(0.03em, -0.02em) rotate(0.4deg); }
  66% { transform: translate(-0.015em, 0.01em) rotate(-0.2deg); }
  80% { transform: translate(0.008em, 0); }
}

.txt-kinetic-typography {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  font-weight: 900;
  color: var(--c);}
.txt-kinetic-typography-block {
  display: grid;
  grid-template-areas: "make it" "move move";
  align-items: end;
  line-height: 1;
  animation: txt-kinetic-typography-camera 5.2s infinite;
}
.txt-kinetic-typography-make {
  grid-area: make;
  justify-self: start;
  display: block;
  animation: txt-kinetic-typography-make 5.2s infinite;
}
.txt-kinetic-typography-it {
  grid-area: it;
  justify-self: end;
  color: color-mix(in srgb, var(--c) 55%, transparent);
  display: block;
  animation: txt-kinetic-typography-it 5.2s infinite;
}
.txt-kinetic-typography-move {
  grid-area: move;
  font-size: 2.1em;
  letter-spacing: -0.02em;
  display: block;
  animation: txt-kinetic-typography-move 5.2s infinite;
}
@keyframes txt-kinetic-typography-make {
  0%       { opacity: 0; transform: translateX(-1.4em); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.25); }
  8%, 100% { opacity: 1; transform: none; }
}
@keyframes txt-kinetic-typography-it {
  0%, 6%    { opacity: 0; transform: translateY(-1.1em); animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); }
  13%, 100% { opacity: 1; transform: none; }
}
@keyframes txt-kinetic-typography-move {
  0%, 12%   { opacity: 0; transform: scale(2.4); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  18%       { opacity: 1; transform: scale(0.94); animation-timing-function: ease-out; }
  21%, 100% { opacity: 1; transform: none; }
}
/* impact jolt, slow camera drift, then a quarter-turn spin out */
@keyframes txt-kinetic-typography-camera {
  0%, 18% { opacity: 1; transform: none; }
  19.5%   { transform: translateY(0.08em); }
  21%     { transform: translateY(-0.03em); }
  23%     { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  76%     { opacity: 1; transform: rotate(-4deg) scale(1.08); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  88%, 100% { opacity: 0; transform: rotate(-90deg) scale(0.2); }
}

.txt-shattering-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.7);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-grid;
  perspective: 8em;
  color: var(--c);
  letter-spacing: 0.02em;}
.txt-shattering-text-word,
.txt-shattering-text-shards {
  grid-area: 1 / 1;
}
/* the solid word hides the hairline seams while the shards are together */
.txt-shattering-text-word {
  animation: txt-shattering-text-solid 3.6s infinite;
}
.txt-shattering-text-shards {
  display: grid;
  transform-style: preserve-3d;
}
.txt-shattering-text-shards span {
  grid-area: 1 / 1;
  animation: txt-shattering-text-fly 3.6s infinite;
}
/* a tremor first, then the solid word hands over to the shards */
@keyframes txt-shattering-text-solid {
  0%, 22%, 80%, 100% { opacity: 1; transform: none; }
  24%   { transform: translateX(-0.03em); }
  26%   { transform: translateX(0.03em); }
  28%   { transform: translateX(-0.02em); }
  30%   { opacity: 1; transform: none; }
  30.5%, 79% { opacity: 0; }
}
@keyframes txt-shattering-text-fly {
  0%, 30% { transform: none; animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1); }
  40%     { transform: translate3d(var(--x), var(--y), var(--z)) rotateX(var(--t)) rotate(var(--r)); animation-timing-function: linear; }
  60%     { transform: translate3d(calc(var(--x) * 1.15), calc(var(--y) * 1.15), var(--z)) rotateX(calc(var(--t) * 1.2)) rotate(calc(var(--r) * 1.2)); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1.1); }
  80%, 100% { transform: none; }
}

.txt-rack-focus-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  color: var(--c);}
.txt-rack-focus-text-near,
.txt-rack-focus-text-far {
  display: inline-block;
  animation: 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-rack-focus-text-near {
  font-size: 1.7em;
  font-weight: 800;
  animation-name: txt-rack-focus-text-near;
}
.txt-rack-focus-text-far {
  font-size: 0.9em;
  font-weight: 600;
  transform: translateY(-0.9em);
  animation-name: txt-rack-focus-text-far;
}
@keyframes txt-rack-focus-text-near {
  0%, 38%, 96%, 100% { filter: blur(0); opacity: 1; transform: scale(1); }
  50%, 84%           { filter: blur(0.07em); opacity: 0.45; transform: scale(1.03); }
}
@keyframes txt-rack-focus-text-far {
  0%, 38%, 96%, 100% { filter: blur(0.09em); opacity: 0.5; transform: translateY(-0.9em) scale(0.97); }
  50%, 84%           { filter: blur(0); opacity: 1; transform: translateY(-0.9em) scale(1); }
}

.txt-movie-trailer-title {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.1);
  font-family: system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.2;
  display: inline-block;
  padding-left: 0.14em; /* balances the trailing letter-spacing */
  color: var(--c);
  letter-spacing: 0.14em;
  white-space: nowrap;}
.txt-movie-trailer-title span {
  display: inline-block;
  animation: txt-movie-trailer-title-drift 5s linear -1.2s infinite;
}
/* --o is the letter's distance from the middle: 0 at the center */
@keyframes txt-movie-trailer-title-drift {
  0%   { opacity: 0; filter: blur(0.12em); transform: translateX(calc(var(--o) * -0.03em)); }
  18%  { opacity: 1; filter: blur(0); }
  76%  { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(0.1em); transform: translateX(calc(var(--o) * 0.13em)); }
}

.txt-film-credits-roll {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  width: 12em;
  height: 4.6em;
  overflow: hidden;
  color: var(--c);
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);}
.txt-film-credits-roll-track {
  animation: txt-film-credits-roll-roll 12s linear infinite;
}
.txt-film-credits-roll-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  column-gap: 0.8em;
  row-gap: 0.45em;
  margin: 0;
  padding-bottom: 0.45em; /* same as row-gap, so both copies space evenly */
  font-size: 0.62em;
}
.txt-film-credits-roll-list dt {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 65%, transparent);
}
.txt-film-credits-roll-list dd {
  margin: 0;
}
@keyframes txt-film-credits-roll-roll {
  to { transform: translateY(-50%); }
}

.txt-slow-push-in-title {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: grid;
  place-items: center;
  width: 12em;
  aspect-ratio: 2.39;
  overflow: hidden;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) 16%, #05060a);}
/* the vignette: dark corners over the shot */
.txt-slow-push-in-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.75) 100%);
}
.txt-slow-push-in-title-shot {
  text-align: center;
  animation: txt-slow-push-in-title-push 9s linear -1.6s infinite;
}
.txt-slow-push-in-title-main {
  margin: 0;
  padding-left: 0.4em;
  font-size: 0.95em;
  font-weight: 300;
  letter-spacing: 0.4em;
  color: color-mix(in srgb, var(--c) 40%, #fff);
}
.txt-slow-push-in-title-sub {
  margin: 0.4em 0 0;
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 55%, #fff);
  opacity: 0.7;
}
@keyframes txt-slow-push-in-title-push {
  0%   { opacity: 0; transform: scale(0.94); }
  14%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

.txt-zoom-through-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.3);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  perspective: 6em;
  color: var(--c);
  letter-spacing: 0.04em;}
.txt-zoom-through-text-words {
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.txt-zoom-through-text-words span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: txt-zoom-through-text-fly 4.2s infinite backwards;
  animation-delay: calc(var(--i) * 1.4s - 0.4s); /* the first word is already on its way */
}
/* arrive fast and slow down, drift while readable, then accelerate past.
   No filter here: a filtered layer drops out of 3D depth sorting. */
@keyframes txt-zoom-through-text-fly {
  0%   { opacity: 0; transform: translateZ(-14em); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  12%  { opacity: 1; transform: translateZ(-0.6em); animation-timing-function: linear; }
  30%  { opacity: 1; transform: translateZ(0.4em); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  40%, 100% { opacity: 0; transform: translateZ(4.2em); }
}

.txt-echo-trail-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.5);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-grid;
  color: var(--c);
  letter-spacing: 0.04em;}
.txt-echo-trail-text-word,
.txt-echo-trail-text-echoes {
  grid-area: 1 / 1;
}
.txt-echo-trail-text-word {
  position: relative;
  z-index: 1;
  animation: txt-echo-trail-text-slide 2.8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.txt-echo-trail-text-echoes {
  display: grid;
}
/* each copy runs the same path a little later and a little fainter */
.txt-echo-trail-text-echoes span {
  grid-area: 1 / 1;
  opacity: calc(0.55 - var(--i) * 0.11);
  animation: txt-echo-trail-text-slide 2.8s cubic-bezier(0.76, 0, 0.24, 1) infinite backwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes txt-echo-trail-text-slide {
  0%, 12%  { transform: translateX(-1.6em); }
  50%, 62% { transform: translateX(1.6em); }
  100%     { transform: translateX(-1.6em); }
}

.txt-layered-3d-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.7);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  perspective: 10em;
  letter-spacing: 0.02em;}
.txt-layered-3d-text-tilt,
.txt-layered-3d-text-stack {
  display: grid;
  transform-style: preserve-3d;
}
.txt-layered-3d-text-tilt {
  animation: txt-layered-3d-text-pitch 3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.txt-layered-3d-text-stack {
  animation: txt-layered-3d-text-yaw 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
/* layer 0 in front; each one behind is pushed back and turned on the color wheel */
.txt-layered-3d-text-stack span {
  grid-area: 1 / 1;
  color: var(--c);
  filter: hue-rotate(calc(var(--i) * 40deg));
  transform: translateZ(calc(var(--i) * -0.2em));
}
@keyframes txt-layered-3d-text-pitch {
  from { transform: rotateX(14deg); }
  to   { transform: rotateX(-10deg); }
}
@keyframes txt-layered-3d-text-yaw {
  from { transform: rotateY(-28deg); }
  to   { transform: rotateY(28deg); }
}

.txt-isometric-3d-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.5);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  letter-spacing: 0.04em;}
/* laid on the floor: tipped back, then turned 45 degrees */
.txt-isometric-3d-text-floor {
  display: grid;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-45deg);
}
.txt-isometric-3d-text-floor span {
  grid-area: 1 / 1;
  color: color-mix(in srgb, var(--c) 58%, #000);
  animation: txt-isometric-3d-text-rise 4s infinite;
}
.txt-isometric-3d-text-floor span:last-child {
  color: var(--c);
}
@keyframes txt-isometric-3d-text-rise {
  0%, 14%   { transform: translateZ(calc(var(--i) * 0.002em)); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  40%, 72%  { transform: translateZ(calc(var(--i) * 0.045em)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%      { transform: translateZ(calc(var(--i) * 0.002em)); }
}

.txt-book-opening-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  perspective: 20em;
  font-family: ui-serif, Georgia, serif;}
.txt-book-opening-text-book {
  display: grid;
  transform-style: preserve-3d;
  animation: txt-book-opening-text-center 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-book-opening-text-page,
.txt-book-opening-text-cover {
  grid-area: 1 / 1;
  width: 3.6em;
  height: 4.4em;
}
/* the first page, printed with a few faint ruled lines */
.txt-book-opening-text-page {
  display: flex;
  align-items: center;
  border-radius: 0 0.14em 0.14em 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
  background:
    repeating-linear-gradient(transparent 0 0.57em, color-mix(in srgb, var(--c) 14%, transparent) 0.57em 0.6em) 0 0.4em / 100% calc(100% - 0.8em) no-repeat,
    color-mix(in srgb, var(--c) 8%, #fff);
}
.txt-book-opening-text-page p {
  margin: 0;
  padding: 0 0.7em;
  font-size: 0.55em;
  font-style: italic;
  line-height: 1.4;
  color: var(--c);
}
.txt-book-opening-text-cover {
  display: grid;
  transform-origin: 0 50%; /* the spine */
  transform-style: preserve-3d;
  animation: txt-book-opening-text-open 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-book-opening-text-front,
.txt-book-opening-text-back {
  grid-area: 1 / 1;
  border-radius: 0 0.14em 0.14em 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.txt-book-opening-text-front {
  display: grid;
  place-items: center;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0 0.25em, var(--c) 0.25em);
}
.txt-book-opening-text-back {
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 14%, #fff);
}
@keyframes txt-book-opening-text-open {
  0%, 16%   { transform: rotateY(0deg); }
  46%, 76%  { transform: rotateY(-168deg); }
  100%      { transform: rotateY(0deg); }
}
/* slide right by half a cover while open, so the spread stays centered */
@keyframes txt-book-opening-text-center {
  0%, 16%   { transform: rotateX(12deg) translateX(0); }
  46%, 76%  { transform: rotateX(12deg) translateX(1.8em); }
  100%      { transform: rotateX(12deg) translateX(0); }
}

.txt-glossy-reflection-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  display: inline-grid;
  color: var(--c);
  letter-spacing: 0.02em;
  line-height: 1.05;}
/* the floor: a soft line between the word and its reflection */
.txt-glossy-reflection-text::after {
  content: "";
  position: absolute;
  left: -0.4em;
  right: -0.4em;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 45%, transparent), transparent);
}
.txt-glossy-reflection-text-word {
  animation: txt-glossy-reflection-text-drop 1.4s both;
}
.txt-glossy-reflection-text-mirror {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.45), transparent 80%);
  mask-image: linear-gradient(rgba(0, 0, 0, 0.45), transparent 80%);
}
/* flipped, and run on a mirrored drop: it rises as the word falls */
.txt-glossy-reflection-text-mirror span {
  display: block;
  transform: scaleY(-1);
  animation: txt-glossy-reflection-text-drop-mirror 1.4s both;
}
@keyframes txt-glossy-reflection-text-drop {
  0%   { opacity: 0; transform: translateY(-1em); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  45%  { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  62%  { transform: translateY(-0.18em); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  76%  { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  86%  { transform: translateY(-0.04em); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes txt-glossy-reflection-text-drop-mirror {
  0%   { opacity: 0; transform: translateY(1em) scaleY(-1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  45%  { opacity: 1; transform: translateY(0) scaleY(-1); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  62%  { transform: translateY(0.18em) scaleY(-1); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  76%  { transform: translateY(0) scaleY(-1); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  86%  { transform: translateY(0.04em) scaleY(-1); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  100% { opacity: 1; transform: translateY(0) scaleY(-1); }
}

.txt-clapperboard-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  width: 6.6em;
  padding-top: 1.8em; /* room for the open clapper */}
/* the clapper, hinged at its bottom left corner */
.txt-clapperboard-text-stick {
  display: block;
  height: 0.42em;
  border-radius: 0.06em;
  background: repeating-linear-gradient(60deg, #fff 0 0.32em, var(--c) 0.32em 0.64em);
  box-shadow: inset 0 0 0 0.05em color-mix(in srgb, var(--c) 20%, #0c0e14);
  transform-origin: 0 100%;
  animation: txt-clapperboard-text-clap 2.6s infinite;
}
.txt-clapperboard-text-board {
  display: grid;
  gap: 0.2em;
  padding: 0.62em 0.5em 0.5em;
  border-radius: 0 0 0.12em 0.12em;
  box-shadow: 0 0 0 0.05em color-mix(in srgb, var(--c) 20%, #0c0e14);
  color: #fff;
  background:
    repeating-linear-gradient(-60deg, #fff 0 0.32em, var(--c) 0.32em 0.64em) 0 0 / 100% 0.42em no-repeat,
    color-mix(in srgb, var(--c) 20%, #0c0e14);
  animation: txt-clapperboard-text-jolt 2.6s infinite;
}
.txt-clapperboard-text-scene {
  font-size: 0.95em;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.txt-clapperboard-text-take {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 0.7;
}
@keyframes txt-clapperboard-text-clap {
  0%, 26%  { transform: rotate(-15deg); animation-timing-function: ease-in-out; }
  38%      { transform: rotate(-18deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.6); }
  45%      { transform: rotate(0deg); animation-timing-function: ease-out; }
  49%      { transform: rotate(-2.5deg); animation-timing-function: ease-in; }
  53%, 78% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%     { transform: rotate(-15deg); }
}
/* the whole slate jolts when the clapper lands */
@keyframes txt-clapperboard-text-jolt {
  0%, 44.5%, 56%, 100% { transform: none; }
  46.5% { transform: translateY(0.05em); }
  50%   { transform: translateY(-0.02em); }
}

.txt-spin-in-blur-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.03em;
  animation: txt-spin-in-blur-text-spin 1.8s cubic-bezier(0.15, 0.85, 0.3, 1) both;}
@keyframes txt-spin-in-blur-text-spin {
  0%   { opacity: 0; transform: perspective(10em) rotateY(-1080deg) scale(0.4); filter: blur(0.2em); }
  15%  { opacity: 1; }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: perspective(10em) rotateY(0deg) scale(1); filter: blur(0); }
}

.txt-parallax-title-card {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  perspective: 12em;}
.txt-parallax-title-card-pitch,
.txt-parallax-title-card-card {
  transform-style: preserve-3d;
}
.txt-parallax-title-card-pitch {
  animation: txt-parallax-title-card-pitch 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
/* two rotations on different clocks trace a slow, looping figure eight */
.txt-parallax-title-card-card {
  display: grid;
  justify-items: center;
  gap: 0.4em;
  padding: 0.65em 1.1em 0.75em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  animation: txt-parallax-title-card-yaw 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.txt-parallax-title-card-eyebrow {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 75%, transparent);
  transform: translateZ(1.05em); /* 0.45 of the card's em */
}
.txt-parallax-title-card-title {
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1;
  color: var(--c);
  text-shadow: 0 0.08em 0.16em color-mix(in srgb, var(--c) 25%, transparent);
  transform: translateZ(0.54em); /* 0.8 of the card's em */
}
.txt-parallax-title-card-tagline {
  font-size: 0.4em;
  font-weight: 500;
  color: color-mix(in srgb, var(--c) 70%, transparent);
  transform: translateZ(0.62em); /* 0.25 of the card's em */
}
@keyframes txt-parallax-title-card-pitch {
  from { transform: rotateX(12deg); }
  to   { transform: rotateX(-12deg); }
}
@keyframes txt-parallax-title-card-yaw {
  from { transform: rotateY(-18deg); }
  to   { transform: rotateY(18deg); }
}

.txt-hinge-drop-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  padding-bottom: 1.4em; /* room for the drop */}
.txt-hinge-drop-text-sign {
  position: relative;
  display: inline-block;
  padding: 0.3em 0.7em;
  border: 0.07em solid var(--c);
  border-radius: 0.12em;
  color: var(--c);
  letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  transform-origin: 0.3em 0.3em; /* the nail that holds */
  animation: txt-hinge-drop-text-swing 2.4s both;
}
/* the two nails: the left one holds, the right one pops out */
.txt-hinge-drop-text-sign::before,
.txt-hinge-drop-text-sign::after {
  content: "";
  position: absolute;
  top: 0.22em;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--c);
}
.txt-hinge-drop-text-sign::before {
  left: 0.22em;
}
.txt-hinge-drop-text-sign::after {
  right: 0.22em;
  animation: txt-hinge-drop-text-nail 2.4s both;
}
@keyframes txt-hinge-drop-text-swing {
  0%, 20% { transform: rotate(0deg); }
  23%     { transform: rotate(-1.5deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  38%     { transform: rotate(21deg); animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
  52%     { transform: rotate(7deg); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  64%     { transform: rotate(16deg); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  75%     { transform: rotate(10.5deg); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  85%     { transform: rotate(13.5deg); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  100%    { transform: rotate(12deg); }
}
@keyframes txt-hinge-drop-text-nail {
  0%, 22% { opacity: 1; transform: none; }
  40%     { opacity: 0; transform: translate(0.3em, 1.2em) rotate(120deg); }
  100%    { opacity: 0; transform: translate(0.3em, 1.2em) rotate(120deg); }
}

.txt-pop-out-3d-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-grid;
  perspective: 8em;
  letter-spacing: 0.02em;}
.txt-pop-out-3d-text-shadow,
.txt-pop-out-3d-text-word {
  grid-area: 1 / 1;
  animation: 3.4s infinite;
}
.txt-pop-out-3d-text-word {
  color: var(--c);
  animation-name: txt-pop-out-3d-text-lift;
}
/* the shadow stays on the page and only spreads */
.txt-pop-out-3d-text-shadow {
  color: color-mix(in srgb, var(--c) 40%, transparent);
  animation-name: txt-pop-out-3d-text-shadow;
}
@keyframes txt-pop-out-3d-text-lift {
  0%, 14%   { transform: none; animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
  38%, 66%  { transform: translateZ(1.3em) translateY(-0.12em) rotateX(10deg); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  80%       { transform: none; animation-timing-function: ease-out; }
  86%       { transform: translateZ(0.12em); animation-timing-function: ease-in; }
  92%, 100% { transform: none; }
}
@keyframes txt-pop-out-3d-text-shadow {
  0%, 14%   { opacity: 0; filter: blur(0); transform: none; animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); }
  38%, 66%  { opacity: 1; filter: blur(0.06em); transform: translate(0.1em, 0.22em); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  80%, 100% { opacity: 0; filter: blur(0); transform: none; }
}

.txt-moving-light-shadow-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.6);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  position: relative;
  display: inline-grid;
  letter-spacing: 0.04em;}
.txt-moving-light-shadow-text-shadow,
.txt-moving-light-shadow-text-word {
  grid-area: 1 / 1;
}
.txt-moving-light-shadow-text-word {
  position: relative;
  color: var(--c);
}
.txt-moving-light-shadow-text-shadow {
  color: color-mix(in srgb, color-mix(in srgb, var(--c) 40%, #000) 35%, transparent);
  animation: txt-moving-light-shadow-text-cast 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
/* the light: a glowing dot on an arc over the word */
.txt-moving-light-shadow-text-light {
  position: absolute;
  left: 50%;
  top: -0.7em;
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.15em;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, #fff) 0 30%, var(--c) 60%);
  box-shadow: 0 0 0.3em color-mix(in srgb, var(--c) 60%, transparent);
  animation: txt-moving-light-shadow-text-orbit 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes txt-moving-light-shadow-text-orbit {
  0%   { transform: translate(-2.6em, 0.35em); }
  50%  { transform: translate(0, -0.15em); }
  100% { transform: translate(2.6em, 0.35em); }
}
/* the shadow falls away from the light: long and soft when it is low */
@keyframes txt-moving-light-shadow-text-cast {
  0%   { transform: translate(0.28em, 0.16em); filter: blur(0.045em); }
  50%  { transform: translate(0, 0.08em); filter: blur(0.015em); }
  100% { transform: translate(-0.28em, 0.16em); filter: blur(0.045em); }
}

.txt-anamorphic-3d-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  perspective: 8em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);}
.txt-anamorphic-3d-text-scene {
  display: flex;
  transform-style: preserve-3d;
  animation: txt-anamorphic-3d-text-swing 3.4s cubic-bezier(0.65, 0, 0.35, 1) -1.4s infinite alternate; /* starts lined up */
}
/*
 * --z is each letter's depth in em. Seen from straight on (perspective 8em),
 * scale(1 - z/8) cancels the size change and the translateX cancels the
 * drift away from the middle, so the letters line up; --o is the letter's
 * slot from the middle, 0.62em wide.
 */
.txt-anamorphic-3d-text-scene span {
  display: block;
  width: 0.62em;
  text-align: center;
  transform:
    translateX(calc(var(--o) * var(--z) * -0.62em / 8))
    translateZ(calc(var(--z) * 1em))
    scale(calc(1 - var(--z) / 8));
}
@keyframes txt-anamorphic-3d-text-swing {
  0%       { transform: rotateX(14deg) rotateY(-42deg); }
  40%, 60% { transform: rotateX(0deg) rotateY(0deg); }
  100%     { transform: rotateX(-10deg) rotateY(42deg); }
}

.txt-twisting-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.9);
  font-family: system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  color: var(--c);
  letter-spacing: 0.02em;}
.txt-twisting-text-bands {
  display: grid;
}
.txt-twisting-text-bands span {
  grid-area: 1 / 1;
  animation: txt-twisting-text-turn 4s infinite backwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes txt-twisting-text-turn {
  0%, 24%   { transform: perspective(8em) rotateY(0deg); color: var(--c); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  45%       { transform: perspective(8em) rotateY(180deg); color: color-mix(in srgb, var(--c) 62%, #000); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  66%, 100% { transform: perspective(8em) rotateY(360deg); color: var(--c); }
}

.txt-hanging-sign-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.3);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding-top: 0.95em; /* room for the strings */
  perspective: 6em;}
/* the nail */
.txt-hanging-sign-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.18em;
  height: 0.18em;
  margin-left: -0.09em;
  border-radius: 50%;
  background: var(--c);
}
.txt-hanging-sign-text-sign {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.7em;
  border: 0.08em solid var(--c);
  border-radius: 0.14em;
  color: var(--c);
  letter-spacing: 0.1em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  transform-origin: 50% -0.86em; /* swings from the nail */
  animation: txt-hanging-sign-text-swing 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
/* the strings: two borders of a square turned 45deg, apex at the nail */
.txt-hanging-sign-text-sign::before {
  content: "";
  position: absolute;
  top: -0.68em;
  left: 50%;
  width: 1.2em;
  height: 1.2em;
  margin-left: -0.6em;
  border-top: 0.05em solid color-mix(in srgb, var(--c) 70%, transparent);
  border-left: 0.05em solid color-mix(in srgb, var(--c) 70%, transparent);
  transform: rotate(45deg);
}
@keyframes txt-hanging-sign-text-swing {
  from { transform: rotateX(28deg); }
  to   { transform: rotateX(-28deg); }
}

.txt-spinning-newspaper-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  font-family: ui-serif, Georgia, "Times New Roman", serif;}
.txt-spinning-newspaper-text-page {
  width: 7.5em;
  padding: 0.4em 0.5em 0.5em;
  border-radius: 0.06em;
  color: color-mix(in srgb, var(--c) 30%, #1a1a1a);
  background: color-mix(in srgb, var(--c) 6%, #fbfaf4);
  box-shadow: 0 0.12em 0.4em rgba(0, 0, 0, 0.18);
  animation: txt-spinning-newspaper-text-spin 1.6s both;
}
.txt-spinning-newspaper-text-page p {
  margin: 0;
  text-align: center;
}
.txt-spinning-newspaper-text-masthead {
  padding-bottom: 0.15em;
  border-bottom: 1px solid currentColor;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.txt-spinning-newspaper-text-headline {
  padding: 0.12em 0;
  font-size: 1.05em;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--c);
}
/* two columns of body copy, drawn as ruled lines */
.txt-spinning-newspaper-text-columns {
  display: block;
  height: 1.1em;
  background:
    repeating-linear-gradient(currentColor 0 0.06em, transparent 0.06em 0.2em) 0 0 / 47% 100% no-repeat,
    repeating-linear-gradient(currentColor 0 0.06em, transparent 0.06em 0.2em) 100% 0 / 47% 100% no-repeat;
  opacity: 0.35;
}
@keyframes txt-spinning-newspaper-text-spin {
  0%   { opacity: 0; transform: rotate(-1080deg) scale(0.05); animation-timing-function: cubic-bezier(0.3, 0.5, 0.5, 1); }
  12%  { opacity: 1; }
  /* stays small while it spins, then comes forward as it straightens */
  60%  { transform: rotate(-30deg) scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  82%  { transform: rotate(-6deg) scale(1.06); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}