svg {
  background: #e1e3e1;
  shape-rendering: crispEdges;
}

.paper {
  fill: #e1e3e1;
}

.ink {
  fill: #505456;
}

.acid {
  fill: #9ca8a1;
}

.signal {
  fill: #76888b;
}

.hot {
  fill: #82757b;
}

.shade {
  fill: #6b7071;
}

.deep {
  fill: #3d4143;
}

.soft {
  fill: #c6cbc8;
}

.white {
  fill: #eff2ef;
}

.gold {
  fill: #8f8975;
}

.rare-blue {
  fill: #5f7379;
}

.rare-green {
  fill: #6f7d70;
}

.rare-red {
  fill: #7c6066;
}

.rare-gold {
  fill: #8c8165;
}

.aura-gold {
  fill: #aaa05f;
}

.aura-soft {
  fill: #c4bd86;
}

.aura-light {
  fill: #d9d4a7;
}

.namek-sky {
  fill: #70b957;
}

.namek-sky-deep {
  fill: #4f9860;
}

.namek-haze {
  fill: #cbd78d;
}

.namek-blue {
  fill: #4c95b3;
}

.namek-blue-deep {
  fill: #396f83;
}

.namek-tree {
  fill: #315f9a;
}

.namek-tree-light {
  fill: #4a87bd;
}

.turtle-orange {
  fill: #a76b2a;
}

.turtle-orange-deep {
  fill: #7f5429;
}

.turtle-blue {
  fill: #4e6872;
}

.red {
  fill: #ef4444;
}

.orange {
  fill: #f97316;
}

.amber {
  fill: #f59e0b;
}

.yellow {
  fill: #facc15;
}

.lime {
  fill: #84cc16;
}

.green {
  fill: #22c55e;
}

.emerald {
  fill: #10b981;
}

.teal {
  fill: #14b8a6;
}

.cyan {
  fill: #06b6d4;
}

.sky {
  fill: #38bdf8;
}

.blue {
  fill: #3b82f6;
}

.indigo {
  fill: #6366f1;
}

.violet {
  fill: #8b5cf6;
}

.purple {
  fill: #a855f7;
}

.fuchsia {
  fill: #d946ef;
}

.pink {
  fill: #ec4899;
}

.rose {
  fill: #f43f5e;
}

.brown {
  fill: #8b5e3c;
}

.beige {
  fill: #d6c6a5;
}

.navy {
  fill: #172554;
}

.black {
  fill: #111111;
}

.gray {
  fill: #808080;
}

.silver {
  fill: #c0c0c0;
}

.bg-real-frame {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.bg-real-f1 {
  animation: bg-real-f1 2.4s steps(1) infinite;
}

.bg-real-f2 {
  animation: bg-real-f2 2.4s steps(1) infinite;
}

.bg-real-f3 {
  animation: bg-real-f3 2.4s steps(1) infinite;
}

.bg-real-f4 {
  animation: bg-real-f4 2.4s steps(1) infinite;
}

.bg-aura-fast .bg-real-f1,
.bg-aura-fast .bg-real-f2,
.bg-aura-fast .bg-real-f3,
.bg-aura-fast .bg-real-f4 {
  animation-duration: 1.05s;
}

.trait-float {
  animation: trait-float 2.8s steps(4) infinite;
}

.trait-gold-shift {
  animation: trait-gold-shift 1.8s steps(4) infinite;
}

.trait-blue-shift {
  animation: trait-blue-shift 1.8s steps(4) infinite;
}

.leaf-bandana-count {
  fill: #3d4143;
  opacity: 0;
  animation: leaf-bandana-count 2s steps(1) infinite;
}

.leaf-bandana-count-1 { animation-delay: 0s; }
.leaf-bandana-count-2 { animation-delay: 0.08s; }
.leaf-bandana-count-3 { animation-delay: 0.16s; }
.leaf-bandana-count-4 { animation-delay: 0.24s; }
.leaf-bandana-count-5 { animation-delay: 0.32s; }
.leaf-bandana-count-6 { animation-delay: 0.4s; }
.leaf-bandana-count-7 { animation-delay: 0.48s; }
.leaf-bandana-count-8 { animation-delay: 0.56s; }
.leaf-bandana-count-9 { animation-delay: 0.64s; }
.leaf-bandana-count-10 { animation-delay: 0.72s; }
.leaf-bandana-count-11 { animation-delay: 0.8s; }
.leaf-bandana-count-12 { animation-delay: 0.88s; }
.leaf-bandana-count-13 { animation-delay: 0.96s; }

.saiyan-hair-shift {
  animation: saiyan-hair-shift 1.8s steps(4) infinite;
}

.saiyan-hair-deep-shift {
  animation: saiyan-hair-deep-shift 1.8s steps(4) infinite;
}

.saiyan-hair-light-shift {
  animation: saiyan-hair-light-shift 1.8s steps(4) infinite;
}

.tail-sway {
  animation: tail-sway 0.82s steps(3) infinite;
  transform-box: fill-box;
  transform-origin: 6% 72%;
}

.akatsuki-cloud-slide {
  animation: akatsuki-cloud-slide 5.2s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.akatsuki-cloud-late {
  animation-delay: -1.2s;
}

.akatsuki-cloud-waver {
  animation: akatsuki-cloud-waver 1.1s steps(2) infinite;
}

.akatsuki-cloud-waver-alt {
  animation-delay: -0.55s;
}

.trait-glitch {
  animation: trait-glitch 1.7s steps(2) infinite;
}

.trait-pulse {
  animation: trait-pulse 1.2s steps(2) infinite;
}

.hand-frame-a {
  animation: hand-frame-a 0.72s steps(1) infinite;
}

.hand-frame-b {
  animation: hand-frame-b 0.72s steps(1) infinite;
}

.dance-67-fast .hand-frame-a,
.dance-67-fast .hand-frame-b {
  animation-duration: 0.42s;
}

.bg-frame-a {
  animation: bg-frame-a 0.88s steps(1) infinite;
}

.bg-frame-b {
  animation: bg-frame-b 0.88s steps(1) infinite;
}

.bg-67-number {
  opacity: 0.72;
}

.bg-67-side {
  transform-box: fill-box;
  transform-origin: center;
}

.bg-67-left {
  animation: bg-67-left 0.72s steps(1) infinite;
}

.bg-67-right {
  animation: bg-67-right 0.72s steps(1) infinite;
}

.bg-67-late .bg-67-side {
  animation-delay: -0.24s;
}

.bg-67-slow .bg-67-side {
  animation-duration: 0.96s;
}

.bg-67-fast-wall .bg-67-left,
.bg-67-fast-wall .bg-67-right {
  animation-duration: 0.42s;
}

.bg-67-fast-wall .bg-67-late .bg-67-side {
  animation-delay: -0.14s;
}

.bg-67-fast-wall .bg-67-slow .bg-67-side {
  animation-duration: 0.56s;
}

.bg-soft-shift,
.bg-grid-shift,
.bg-cloud-drift,
.bg-star-twinkle,
.bg-noise-flicker,
.bg-candle-pulse,
.bg-chart-pulse,
.bg-monitor-glow,
.bg-orbit-spin,
.bg-confetti-pop,
.bg-rain-fall,
.bg-scan-sweep {
  transform-box: fill-box;
  transform-origin: center;
}

.bg-soft-shift {
  animation: bg-soft-shift 3.2s steps(3) infinite;
}

.bg-grid-shift {
  animation: bg-grid-shift 2.4s steps(3) infinite;
}

.bg-cloud-drift {
  animation: bg-cloud-drift 4.2s steps(4) infinite;
}

.bg-star-twinkle {
  animation: bg-star-twinkle 1.6s steps(2) infinite;
}

.bg-noise-flicker,
.bg-confetti-pop {
  animation: bg-noise-flicker 0.9s steps(2) infinite;
}

.bg-candle-pulse,
.bg-chart-pulse {
  animation: bg-chart-pulse 1.1s steps(2) infinite;
}

.bg-monitor-glow,
.bg-scan-sweep {
  animation: bg-monitor-glow 1.4s steps(2) infinite;
}

.bg-orbit-spin {
  animation: bg-orbit-spin 2.8s steps(8) infinite;
}

.bg-rain-fall {
  animation: bg-rain-fall 0.95s steps(3) infinite;
}

.camera-lens-flash,
.camera-whiteout {
  opacity: 0;
}

.camera-lens-flash {
  animation: camera-lens-flash 1.6s linear infinite;
}

.camera-whiteout {
  animation: camera-whiteout 1.6s linear infinite;
}

.kame-word,
.kame-blast,
.kame-screen-break {
  opacity: 0;
}

.kame-word,
.kame-orb,
.kame-blast,
.kame-screen-break {
  transform-box: fill-box;
  transform-origin: center;
}

.kame-ka {
  animation: kame-ka 5.2s steps(1) infinite;
}

.kame-me-a {
  animation: kame-me-a 5.2s steps(1) infinite;
}

.kame-ha-a {
  animation: kame-ha-a 5.2s steps(1) infinite;
}

.kame-me-b {
  animation: kame-me-b 5.2s steps(1) infinite;
}

.kame-ha-b {
  animation: kame-ha-b 5.2s steps(1) infinite;
}

.kame-orb {
  animation: kame-orb 5.2s steps(1) infinite;
}

.kame-orb-core {
  animation: kame-orb-core 5.2s steps(1) infinite;
}

.kame-orb-wide {
  animation: kame-orb-wide 5.2s steps(1) infinite;
}

.kame-orb-tall {
  animation: kame-orb-tall 5.2s steps(1) infinite;
}

.kame-orb-spark-a {
  animation: kame-orb-spark-a 5.2s steps(1) infinite;
}

.kame-orb-spark-b {
  animation: kame-orb-spark-b 5.2s steps(1) infinite;
}

.kame-orb-spark-c {
  animation: kame-orb-spark-c 5.2s steps(1) infinite;
}

.kame-blast {
  animation: kame-blast 5.2s steps(1) infinite;
}

.kame-screen-break {
  animation: kame-screen-break 5.2s steps(1) infinite;
}

@keyframes trait-float {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
}

@keyframes trait-gold-shift {
  0%,
  100% {
    opacity: 0;
  }
  38% {
    opacity: 0.45;
  }
  62% {
    opacity: 0.92;
  }
}

@keyframes trait-blue-shift {
  0%,
  100% {
    opacity: 0;
  }
  38% {
    opacity: 0.55;
  }
  62% {
    opacity: 0.95;
  }
}

@keyframes leaf-bandana-count {
  0%,
  10% {
    opacity: 0;
  }
  10.1%,
  68% {
    opacity: 1;
  }
  68.1%,
  100% {
    opacity: 0;
  }
}

@keyframes saiyan-hair-shift {
  0%,
  100% {
    fill: #505456;
  }
  38% {
    fill: #8c8165;
  }
  62% {
    fill: #aaa05f;
  }
}

@keyframes saiyan-hair-deep-shift {
  0%,
  100% {
    fill: #3d4143;
  }
  38% {
    fill: #6f684f;
  }
  62% {
    fill: #8f8748;
  }
}

@keyframes saiyan-hair-light-shift {
  0%,
  100% {
    fill: #6b7071;
  }
  38% {
    fill: #aaa05f;
  }
  62% {
    fill: #d9d4a7;
  }
}

@keyframes tail-sway {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
  25% {
    transform: rotate(-8deg) translate(-4px, 0);
  }
  50% {
    transform: rotate(0deg) translate(0, 0);
  }
  75% {
    transform: rotate(8deg) translate(4px, 0);
  }
}

@keyframes akatsuki-cloud-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(92px);
  }
}

@keyframes akatsuki-cloud-waver {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@keyframes trait-glitch {
  0%,
  100% {
    opacity: 1;
  }
  35% {
    opacity: 0.9;
  }
  37% {
    opacity: 1;
  }
  40% {
    opacity: 0.95;
  }
}

@keyframes trait-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

@keyframes hand-frame-a {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes hand-frame-b {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

@keyframes bg-frame-a {
  0%,
  49% {
    opacity: 0.74;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes bg-frame-b {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 0.74;
  }
}

@keyframes bg-67-left {
  0%,
  49% {
    transform: translateY(-8px);
  }
  50%,
  100% {
    transform: translateY(8px);
  }
}

@keyframes bg-67-right {
  0%,
  49% {
    transform: translateY(8px);
  }
  50%,
  100% {
    transform: translateY(-8px);
  }
}

@keyframes bg-soft-shift {
  0%,
  100% { transform: translateX(0); opacity: 0.78; }
  50% { transform: translateX(-8px); opacity: 0.9; }
}

@keyframes bg-grid-shift {
  0%,
  100% { transform: translate(0, 0); opacity: 0.82; }
  50% { transform: translate(4px, 4px); opacity: 0.95; }
}

@keyframes bg-cloud-drift {
  0%,
  100% { transform: translateX(-8px); opacity: 0.76; }
  50% { transform: translateX(12px); opacity: 0.92; }
}

@keyframes bg-star-twinkle {
  0%,
  49% { opacity: 0.55; transform: scale(0.98); }
  50%,
  100% { opacity: 1; transform: scale(1.02); }
}

@keyframes bg-noise-flicker {
  0%,
  49% { opacity: 0.45; transform: translate(0, 0); }
  50%,
  100% { opacity: 0.9; transform: translate(4px, -4px); }
}

@keyframes bg-chart-pulse {
  0%,
  49% { opacity: 0.72; transform: translateY(0); }
  50%,
  100% { opacity: 1; transform: translateY(-6px); }
}

@keyframes bg-monitor-glow {
  0%,
  49% { opacity: 0.6; }
  50%,
  100% { opacity: 1; }
}

@keyframes bg-orbit-spin {
  0% { transform: rotate(0deg); opacity: 0.72; }
  50% { transform: rotate(6deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0.72; }
}

@keyframes bg-rain-fall {
  0% { transform: translateY(-12px); opacity: 0.55; }
  50% { transform: translateY(8px); opacity: 0.95; }
  100% { transform: translateY(20px); opacity: 0.55; }
}

@keyframes camera-lens-flash {
  0%,
  8% {
    opacity: 1;
  }
  8.1%,
  100% {
    opacity: 0;
  }
}

@keyframes camera-whiteout {
  0%,
  13% {
    opacity: 0;
  }
  13.1%,
  24% {
    opacity: 0.92;
  }
  24.1%,
  36% {
    opacity: 0.32;
  }
  36.1%,
  100% {
    opacity: 0;
  }
}

@keyframes kame-ka {
  0%,
  15% { opacity: 1; }
  15.1%,
  100% { opacity: 0; }
}

@keyframes kame-me-a {
  0%,
  15% { opacity: 0; }
  15.1%,
  30% { opacity: 1; }
  30.1%,
  100% { opacity: 0; }
}

@keyframes kame-ha-a {
  0%,
  30% { opacity: 0; }
  30.1%,
  45% { opacity: 1; }
  45.1%,
  100% { opacity: 0; }
}

@keyframes kame-me-b {
  0%,
  45% { opacity: 0; }
  45.1%,
  60% { opacity: 1; }
  60.1%,
  100% { opacity: 0; }
}

@keyframes kame-ha-b {
  0%,
  60% { opacity: 0; }
  60.1%,
  76% { opacity: 1; }
  76.1%,
  100% { opacity: 0; }
}

@keyframes kame-orb {
  0% { opacity: 0.55; transform: translate(0, 4px) scale(0.42); }
  15% { opacity: 0.72; transform: translate(-4px, 2px) scale(0.72); }
  30% { opacity: 0.82; transform: translate(4px, 0) scale(1); }
  45% { opacity: 1; transform: translate(-4px, -2px) scale(1.28); }
  60% { opacity: 1; transform: translate(0, -4px) scale(1.58); }
  60.1%,
  100% { opacity: 0; transform: translate(0, -4px) scale(1.64); }
}

@keyframes kame-orb-core {
  0%,
  15% { opacity: 0.35; }
  30%,
  45% { opacity: 0.75; }
  60% { opacity: 1; }
  60.1%,
  100% { opacity: 0; }
}

@keyframes kame-orb-wide {
  0%,
  15% { opacity: 0; }
  15.1%,
  30% { opacity: 1; }
  30.1%,
  45% { opacity: 0; }
  45.1%,
  60% { opacity: 1; }
  60.1%,
  100% { opacity: 0; }
}

@keyframes kame-orb-tall {
  0%,
  15% { opacity: 1; }
  15.1%,
  30% { opacity: 0; }
  30.1%,
  45% { opacity: 1; }
  45.1%,
  60% { opacity: 0; }
  60.1%,
  100% { opacity: 0; }
}

@keyframes kame-orb-spark-a {
  0%,
  30% { opacity: 0; }
  30.1%,
  60% { opacity: 1; }
  60.1%,
  100% { opacity: 0; }
}

@keyframes kame-orb-spark-b {
  0%,
  15% { opacity: 0; }
  15.1%,
  45% { opacity: 1; }
  45.1%,
  100% { opacity: 0; }
}

@keyframes kame-orb-spark-c {
  0%,
  45% { opacity: 0; }
  45.1%,
  60% { opacity: 1; }
  60.1%,
  100% { opacity: 0; }
}

@keyframes kame-blast {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.18);
  }
  60.1%,
  78% {
    opacity: 1;
    transform: scale(1.18);
  }
  78.1%,
  100% {
    opacity: 0;
    transform: scale(1.72);
  }
}

@keyframes kame-screen-break {
  0%,
  78% {
    opacity: 0;
    transform: scale(1);
  }
  86% {
    opacity: 0;
    transform: scale(1);
  }
  86.1%,
  98.5% {
    opacity: 1;
    transform: scale(1);
  }
  98.6%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes bg-real-f1 {
  0%,
  24.9% { opacity: 1; }
  25%,
  100% { opacity: 0; }
}

@keyframes bg-real-f2 {
  0%,
  24.9% { opacity: 0; }
  25%,
  49.9% { opacity: 1; }
  50%,
  100% { opacity: 0; }
}

@keyframes bg-real-f3 {
  0%,
  49.9% { opacity: 0; }
  50%,
  74.9% { opacity: 1; }
  75%,
  100% { opacity: 0; }
}

@keyframes bg-real-f4 {
  0%,
  74.9% { opacity: 0; }
  75%,
  100% { opacity: 1; }
}