/* Horrible mode: 1997 GeoCities fever dream. Off = this file is a no-op. */

html[data-horrible="on"] {
  --horrible-ink: #1a0033;
  --horrible-hot: #ff2d95;
  --horrible-lime: #39ff14;
  --horrible-cyan: #00e5ff;
  --horrible-gold: #ffe600;
  --horrible-orange: #ff8c1a;
  --horrible-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-family: var(--horrible-comic);
  color: var(--horrible-ink);
  background: #ff4ecd;
}

html[data-horrible="on"] :is(body, button, input, textarea, label, legend, h1, h2, h3, p, li, span, output, code) {
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] body {
  background: transparent;
  overflow-x: clip;
}

html[data-horrible="on"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, #ff4ecd 0 18%, transparent 42%),
    radial-gradient(circle at 80% 20%, #7cff3e 0 16%, transparent 40%),
    radial-gradient(circle at 15% 80%, #00e5ff 0 18%, transparent 44%),
    radial-gradient(circle at 85% 75%, #ffe600 0 16%, transparent 42%),
    linear-gradient(160deg, #ff4ecd, #ff8c1a, #ffe600, #7cff3e, #00e5ff, #c44dff, #ff4ecd);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 280% 280%;
}

html[data-horrible="on"] .app-shell {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

html[data-horrible="on"] .construction-banner {
  display: block;
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-bottom: 3px solid #111;
  /* Static hazard stripes. They do not scroll or flash; wobble is 2.4s pose-only. */
  background: repeating-linear-gradient(
    -45deg,
    #111 0 14px,
    #ffe600 14px 28px,
    #111 28px 42px,
    #ff4ecd 42px 56px
  );
  color: #fff;
  font-family: var(--horrible-comic);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 2px 2px 0 #111;
}

html[data-horrible="on"] .visitor-banner,
html[data-horrible="on"] .horrible-ticker {
  display: block;
  position: relative;
  z-index: 4;
  overflow: hidden;
  margin: 0;
  padding: 0.35rem 0;
  border-bottom: 2px dotted #39ff14;
  background: #000;
  color: #39ff14;
  font-family: var(--horrible-comic);
  font-size: 0.95rem;
  white-space: nowrap;
}

html[data-horrible="on"] .horrible-ticker {
  border-bottom-color: #00e5ff;
  color: #00e5ff;
}

html[data-horrible="on"] .visitor-marquee,
html[data-horrible="on"] .horrible-ticker-track {
  display: inline-block;
  margin: 0;
  padding-left: 100%;
}

html[data-horrible="on"] .page-toolbar .eyebrow {
  color: #fff;
  font-family: var(--horrible-comic);
  text-shadow: 2px 2px 0 #ff2d95, 4px 4px 0 #00e5ff;
}

html[data-horrible="on"] h1 {
  position: relative;
  margin: 1.5rem 0 0.75rem;
  font-family: var(--horrible-comic);
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  background-image: linear-gradient(
    90deg,
    #ff2d95,
    #ff8c1a,
    #ffe600,
    #39ff14,
    #00e5ff,
    #b14dff,
    #ff2d95
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(4px 4px 0 #ffe600)
    drop-shadow(8px 8px 0 #39ff14)
    drop-shadow(12px 12px 0 #00e5ff)
    drop-shadow(16px 16px 0 #ff2d95);
}

html[data-horrible="on"] h1::before {
  content: "NEW!";
  position: absolute;
  left: -0.4rem;
  top: -1.15rem;
  padding: 0.2rem 0.45rem;
  border: 2px solid #fff;
  background: #ff2d95;
  color: #ffe600;
  font-family: var(--horrible-comic);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  transform: rotate(-18deg);
  filter: none;
  -webkit-text-fill-color: #ffe600;
}

html[data-horrible="on"] h1::after {
  content: "© 2026 ALL RIGHTS RESERVED";
  position: absolute;
  right: 0;
  bottom: -1.1rem;
  color: #1a0033;
  font-family: var(--horrible-comic);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  filter: none;
  -webkit-text-fill-color: #1a0033;
}

html[data-horrible="on"] .intro {
  margin-top: 1.6rem;
  color: #3b0066;
  font-family: var(--horrible-comic);
  font-size: 1.05rem;
}

html[data-horrible="on"] .clean-form {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 5px dashed #ff2d95;
  background: #fff38a;
  box-shadow: 10px 10px 0 #00e5ff, -4px 6px 0 #39ff14;
  transform: rotate(-2deg);
}

html[data-horrible="on"] .clean-form label[for="url-input"] {
  color: #9b0870;
  font-family: var(--horrible-comic);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

html[data-horrible="on"] #url-input {
  border: 3px inset #fff;
  background: #fff;
  color: #111;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .input-row {
  align-items: center;
  justify-content: space-between;
}

html[data-horrible="on"] .input-row .secondary-button {
  border: 3px outset #c47bff;
  background: #c47bff;
  color: #fff;
  font-family: var(--horrible-comic);
  box-shadow: 3px 3px 0 #3b0066;
}

html[data-horrible="on"] .input-row .primary-button {
  position: relative;
  z-index: 3;
  width: 9.6rem;
  height: 9.6rem;
  padding: 0.6rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #ffe600;
  color: #ff2d95;
  font-family: var(--horrible-comic);
  font-size: 1.2rem;
  line-height: 1.1;
  text-transform: uppercase;
  box-shadow:
    0 0 0 4px #ff2d95,
    0 0 18px #ffe600;
  transform: rotate(-8deg);
}

html[data-horrible="on"] .input-row .primary-button::before {
  content: "";
  position: absolute;
  inset: -1.15rem;
  z-index: -1;
  background: repeating-conic-gradient(#ffe600 0 9deg, transparent 9deg 20deg);
  border-radius: 50%;
}

html[data-horrible="on"] .input-row .primary-button.horrible-dodge-a {
  transform: translate(4.4rem, -1.6rem) rotate(-18deg);
}

html[data-horrible="on"] .input-row .primary-button.horrible-dodge-b {
  transform: translate(-3.8rem, 2rem) rotate(14deg);
}

html[data-horrible="on"] .input-row .primary-button.horrible-dodge-c {
  transform: translate(3rem, 2.4rem) rotate(-6deg);
}

html[data-horrible="on"] .settings legend {
  color: #9b0870;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .setting {
  color: #1a0033;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .setting:nth-of-type(1) { transform: rotate(-4deg); }
html[data-horrible="on"] .setting:nth-of-type(2) { transform: rotate(5deg); }
html[data-horrible="on"] .setting:nth-of-type(3) { transform: rotate(-7deg); }
html[data-horrible="on"] .setting:nth-of-type(4) { transform: rotate(6deg); }
html[data-horrible="on"] .setting:nth-of-type(5) { transform: rotate(-2deg); }

html[data-horrible="on"] .setting input[type="checkbox"] {
  border: 2px solid #ff2d95;
  background: #fff;
}

html[data-horrible="on"] .setting input[type="checkbox"]:checked {
  border-color: #39ff14;
  background-color: #39ff14;
}

html[data-horrible="on"] .message[data-kind="success"] {
  padding: 0.4rem 0.6rem;
  border: 3px ridge #39ff14;
  background: #39ff14;
  color: #062;
  font-family: var(--horrible-comic);
  letter-spacing: 0.04em;
}

html[data-horrible="on"] .result-panel,
html[data-horrible="on"] .fingerprint-summary {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 6px 6px 0 #00e5ff;
}

html[data-horrible="on"] .result-panel {
  transform: skew(-1.4deg) rotate(0.8deg);
}

html[data-horrible="on"] h2,
html[data-horrible="on"] h3 {
  font-family: var(--horrible-comic);
  color: #1a0033;
}

html[data-horrible="on"] .url-output,
html[data-horrible="on"] .url-parts dd,
html[data-horrible="on"] .totd-example-url,
html[data-horrible="on"] .totd-name,
html[data-horrible="on"] .batch-list .batch-url {
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .fingerprint-score {
  width: 7.2rem;
  height: 7.2rem;
  min-width: 7.2rem;
  border: 6px solid #fff;
  border-radius: 50%;
  background: #ffe600;
  color: #1a0033;
  box-shadow: 0 0 0 4px #ff2d95;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .fingerprint-count-value {
  font-size: 2.4rem;
}

html[data-horrible="on"] .removed-list {
  gap: 0.7rem 0.9rem;
}

html[data-horrible="on"] .removed-list li {
  border: 2px dashed #1a0033;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .removed-list li:nth-child(3n + 1) {
  background: #ff90e8;
  transform: rotate(-8deg) translate(0.3rem, 0.2rem);
}

html[data-horrible="on"] .removed-list li:nth-child(3n + 2) {
  background: #7cff3e;
  transform: rotate(7deg) translate(-0.2rem, 0.35rem);
}

html[data-horrible="on"] .removed-list li:nth-child(3n) {
  background: #00e5ff;
  transform: rotate(-3deg) translate(0.55rem, -0.15rem);
}

html[data-horrible="on"] .totd {
  border: 10px solid #c4a574;
  border-radius: 18px 18px 8px 8px;
  background:
    linear-gradient(#f7e7c2, #f0d9a0);
  box-shadow: inset 0 0 24px #c4a574, 8px 8px 0 #6b4a1b;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .totd-label {
  color: #6b4a1b;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .privacy-note {
  color: #1a0033;
  font-family: var(--horrible-comic);
  text-shadow: 1px 1px 0 #ffe600;
}

html[data-horrible="on"] .horrible-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

html[data-horrible="on"] .horrible-best-viewed {
  margin: 0;
  color: #1a0033;
  font-family: var(--horrible-comic);
  letter-spacing: 0.04em;
}

html[data-horrible="on"] .horrible-hit-counter {
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 4px double #39ff14;
  background: #111;
  color: #39ff14;
  font-family: var(--horrible-comic);
  letter-spacing: 0.16em;
}

html[data-horrible="on"] .horrible-webring,
html[data-horrible="on"] .horrible-guestbook {
  display: block;
  margin: 0.6rem 0 0;
  color: #1a0033;
  font-family: var(--horrible-comic);
}

html[data-horrible="on"] .horrible-webring button,
html[data-horrible="on"] .horrible-guestbook {
  border: 2px outset #ddd;
  background: #eee;
  color: blue;
  font-family: var(--horrible-comic);
  text-decoration: underline;
}

html[data-horrible="on"] .horrible-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  margin: 1rem auto 0;
  border: 6px double #c00;
  border-radius: 50%;
  background: #fff8dc;
  color: #c00;
  font-family: var(--horrible-comic);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
}

html[data-horrible="on"] .horrible-stop {
  display: inline-flex;
  position: fixed;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border: 3px solid #111;
  border-radius: 4px;
  background: #111;
  color: #ffe600;
  font-family: var(--horrible-comic);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #ffe600;
  pointer-events: auto;
  transform: none !important;
  animation: none !important;
}

html[data-horrible="on"] .horrible-stop:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

html[data-horrible="on"] .horrible-dvd {
  display: flex;
  position: fixed;
  top: 12vh;
  left: 6vw;
  z-index: 6;
  align-items: center;
  justify-content: center;
  width: 8.6rem;
  padding: 0.35rem 0.5rem;
  border: 3px solid #fff;
  background: #111;
  color: #39ff14;
  font-family: var(--horrible-comic);
  letter-spacing: 0.08em;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-stars,
html[data-horrible="on"] .horrible-confetti,
html[data-horrible="on"] .horrible-toasters {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

html[data-horrible="on"] .horrible-stars span {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  box-shadow: 0 0 6px #ffe600;
}

html[data-horrible="on"] .horrible-stars span:nth-child(1) { top: 12%; left: 8%; }
html[data-horrible="on"] .horrible-stars span:nth-child(2) { top: 22%; left: 78%; }
html[data-horrible="on"] .horrible-stars span:nth-child(3) { top: 48%; left: 18%; }
html[data-horrible="on"] .horrible-stars span:nth-child(4) { top: 63%; left: 88%; }
html[data-horrible="on"] .horrible-stars span:nth-child(5) { top: 81%; left: 28%; }
html[data-horrible="on"] .horrible-stars span:nth-child(6) { top: 16%; left: 52%; }
html[data-horrible="on"] .horrible-stars span:nth-child(7) { top: 72%; left: 62%; }
html[data-horrible="on"] .horrible-stars span:nth-child(8) { top: 38%; left: 92%; }

html[data-horrible="on"] .horrible-confetti span {
  position: absolute;
  font-size: 1.4rem;
}

html[data-horrible="on"] .horrible-confetti span:nth-child(1) { top: 18%; left: 4%; }
html[data-horrible="on"] .horrible-confetti span:nth-child(2) { top: 44%; right: 5%; }
html[data-horrible="on"] .horrible-confetti span:nth-child(3) { bottom: 18%; left: 9%; }
html[data-horrible="on"] .horrible-confetti span:nth-child(4) { top: 8%; right: 18%; }
html[data-horrible="on"] .horrible-confetti span:nth-child(5) { bottom: 10%; right: 12%; }

html[data-horrible="on"] .horrible-toasters span {
  position: absolute;
  width: 2.4rem;
  height: 1.5rem;
  border: 2px solid #6b3a1f;
  border-radius: 0.2rem 0.2rem 0.35rem 0.35rem;
  background: #c47a3a;
}

html[data-horrible="on"] .horrible-toasters span:nth-child(1) { top: 20%; left: -10%; }
html[data-horrible="on"] .horrible-toasters span:nth-child(2) { top: 55%; left: -16%; }
html[data-horrible="on"] .horrible-toasters span:nth-child(3) { top: 78%; left: -8%; }

html[data-horrible="on"] .horrible-popups {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147482998;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-joke-tag {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 2px dashed #111;
  border-radius: 999px;
  background: #ffe600;
  color: #1a0033;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

html[data-horrible="on"] .horrible-popup {
  position: fixed;
  z-index: 2147482998;
  width: min(16.5rem, calc(100vw - 2.4rem));
  padding: 0.7rem 0.75rem 0.8rem;
  border: 4px solid #111;
  border-radius: 1.4rem 0.4rem 1.6rem 0.7rem;
  color: #1a0033;
  box-shadow: 8px 8px 0 #111;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-popup h2 {
  margin: 0 2.2rem 0.35rem 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

html[data-horrible="on"] .horrible-popup p {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
}

html[data-horrible="on"] .horrible-popup-skin-1 { background: #ff90e8; }
html[data-horrible="on"] .horrible-popup-skin-2 { background: #7cff3e; }
html[data-horrible="on"] .horrible-popup-skin-3 { background: #00e5ff; }
html[data-horrible="on"] .horrible-popup-skin-4 { background: #ffe600; }

html[data-horrible="on"] .horrible-popup-slot-0 { top: 18%; left: 3%; }
html[data-horrible="on"] .horrible-popup-slot-1 { top: 30%; left: 58%; }
html[data-horrible="on"] .horrible-popup-slot-2 { top: 46%; left: 5%; }
html[data-horrible="on"] .horrible-popup-slot-3 { top: 54%; left: 56%; }
html[data-horrible="on"] .horrible-popup-slot-4 { top: 68%; left: 8%; }
html[data-horrible="on"] .horrible-popup-slot-5 { top: 72%; left: 52%; }
html[data-horrible="on"] .horrible-popup-slot-6 { top: auto; bottom: 6%; left: 18%; }
html[data-horrible="on"] .horrible-popup-slot-7 { top: 38%; left: 28%; }

html[data-horrible="on"] .horrible-popup-x {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  z-index: 2147482999;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 3px solid #111;
  border-radius: 50%;
  background: #fff;
  color: #c00;
  font-size: 1rem;
  line-height: 1;
  transform: none !important;
  animation: none !important;
  pointer-events: auto;
}

html[data-horrible="on"] .horrible-popup:hover,
html[data-horrible="on"] .horrible-popup:focus-within {
  animation: none !important;
  transform: none;
}

html[data-horrible="on"] .horrible-popup-action {
  border: 3px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #1a0033;
  padding: 0.35rem 0.7rem;
  pointer-events: auto;
}

html[data-horrible="on"] .horrible-loading {
  display: block;
  position: fixed;
  left: 0;
  right: 22%;
  bottom: 0;
  z-index: 35;
  padding: 0.55rem 0.8rem 0.7rem;
  border-top: 4px solid #111;
  background: #ff2d95;
  color: #fff;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-loading p {
  margin: 0 0 0.35rem;
}

html[data-horrible="on"] .horrible-loading-track {
  height: 1rem;
  border: 3px solid #111;
  background: #fff;
}

html[data-horrible="on"] .horrible-loading-bar {
  display: block;
  width: 99%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #ffe600 0 10px, #39ff14 10px 20px);
}

html[data-horrible="on"] .horrible-spin-banner {
  display: flex;
  position: fixed;
  left: 0.6rem;
  bottom: 5.6rem;
  z-index: 8;
  width: 8.4rem;
  height: 8.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  border: 5px dashed #ffe600;
  border-radius: 50%;
  background: #1a0033;
  color: #39ff14;
  text-align: center;
  font-size: 0.72rem;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-pow {
  display: none;
  position: fixed;
  top: 28%;
  left: 50%;
  z-index: 55;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 4px solid #111;
  background: #ffe600;
  color: #c00;
  font-family: var(--horrible-comic);
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  letter-spacing: 0.04em;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
}

html[data-horrible="on"] .horrible-pow.is-popping {
  display: block;
}

html[data-horrible="on"] .horrible-trail-dot {
  position: fixed;
  left: var(--tx);
  top: var(--ty);
  z-index: 50;
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #ffe600;
  box-shadow: 0 0 8px #ff2d95;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-burst {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
}

html[data-horrible="on"] .horrible-burst-piece {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 10px;
  height: 14px;
  background: #ff2d95;
}

html[data-horrible="on"] .horrible-burst-piece:nth-child(4n) { background: #39ff14; }
html[data-horrible="on"] .horrible-burst-piece:nth-child(4n + 1) { background: #00e5ff; }
html[data-horrible="on"] .horrible-burst-piece:nth-child(4n + 2) { background: #ffe600; }
html[data-horrible="on"] .horrible-burst-piece:nth-child(4n + 3) { background: #ff8c1a; }

html[data-horrible="on"] .theme-toggle {
  border: 2px dashed #ffe600;
  background: rgba(0, 0, 0, 0.25);
  color: #ffe600;
}

@media (max-width: 580px) {
  html[data-horrible="on"] .input-row .primary-button {
    order: 0;
    flex: none;
    width: 8.6rem;
    max-width: 8.6rem;
    height: 8.6rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-horrible="on"]::before {
    /* Luminance cycle ~0.04 Hz (28s). Stay well under the 2 Hz cap. */
    animation: horrible-bg-shift 28s linear infinite, horrible-hue 40s linear infinite;
  }

  html[data-horrible="on"] .construction-banner {
    animation: horrible-wobble 2.4s ease-in-out infinite;
  }

  html[data-horrible="on"] .visitor-marquee {
    animation: horrible-marquee 18s linear infinite;
  }

  html[data-horrible="on"] .horrible-ticker-track {
    animation: horrible-marquee 22s linear infinite;
  }

  html[data-horrible="on"] h1 {
    animation: horrible-rainbow-shift 8s linear infinite, horrible-title-drift 6s ease-in-out infinite;
  }

  html[data-horrible="on"] h1::before {
    animation: horrible-spin 6s linear infinite;
  }

  html[data-horrible="on"] .intro {
    animation: horrible-wobble 3.2s ease-in-out infinite;
  }

  html[data-horrible="on"] .clean-form {
    animation: horrible-card-pulse 3.6s ease-in-out infinite;
  }

  html[data-horrible="on"] #url-input {
    animation: horrible-input-jiggle 4.8s ease-in-out infinite;
  }

  html[data-horrible="on"] .horrible-loading-bar {
    animation: horrible-loading-shimmer 2.4s linear infinite;
  }

  html[data-horrible="on"] .horrible-spin-banner {
    animation: horrible-spin 8s linear infinite;
  }

  html[data-horrible="on"] .input-row .primary-button {
    animation: horrible-blink 1.6s step-end infinite;
    transition: transform 0.22s ease;
  }

  html[data-horrible="on"] .setting:nth-of-type(1) { animation: horrible-wobble 3.1s ease-in-out infinite; }
  html[data-horrible="on"] .setting:nth-of-type(2) { animation: horrible-wobble 2.7s ease-in-out infinite reverse; }
  html[data-horrible="on"] .setting:nth-of-type(3) { animation: horrible-wobble 3.4s ease-in-out infinite; }
  html[data-horrible="on"] .setting:nth-of-type(4) { animation: horrible-wobble 2.9s ease-in-out infinite reverse; }
  html[data-horrible="on"] .setting:nth-of-type(5) { animation: horrible-wobble 3.6s ease-in-out infinite; }

  html[data-horrible="on"] .result-panel {
    animation: horrible-card-pulse 4.2s ease-in-out infinite;
  }

  html[data-horrible="on"] .fingerprint-score {
    animation: horrible-score-pulse 2.2s ease-in-out infinite;
  }

  html[data-horrible="on"] .removed-list li:nth-child(3n + 1) {
    animation: horrible-chip-spin 7s linear infinite;
  }

  html[data-horrible="on"] .removed-list li:nth-child(3n + 2) {
    animation: horrible-chip-spin 8s linear infinite reverse;
  }

  html[data-horrible="on"] .removed-list li:nth-child(3n) {
    animation: horrible-chip-spin 6.5s linear infinite;
  }

  html[data-horrible="on"] .totd {
    animation: horrible-scroll-drift 5s ease-in-out infinite;
  }

  html[data-horrible="on"] .horrible-dvd {
    animation: horrible-dvd 18s linear infinite, horrible-hue 7s linear infinite;
  }

  html[data-horrible="on"] .horrible-stars span {
    animation: horrible-twinkle 2s step-end infinite;
  }

  html[data-horrible="on"] .horrible-stars span:nth-child(odd) {
    animation-delay: 0.6s;
  }

  html[data-horrible="on"] .horrible-confetti span:nth-child(1) { animation: horrible-float 5.2s ease-in-out infinite; }
  html[data-horrible="on"] .horrible-confetti span:nth-child(2) { animation: horrible-float 6s ease-in-out infinite reverse; }
  html[data-horrible="on"] .horrible-confetti span:nth-child(3) { animation: horrible-spin 8s linear infinite; }
  html[data-horrible="on"] .horrible-confetti span:nth-child(4) { animation: horrible-float 4.6s ease-in-out infinite; }
  html[data-horrible="on"] .horrible-confetti span:nth-child(5) { animation: horrible-spin 7s linear infinite reverse; }

  html[data-horrible="on"] .horrible-toasters span:nth-child(1) { animation: horrible-toaster 14s linear infinite; }
  html[data-horrible="on"] .horrible-toasters span:nth-child(2) { animation: horrible-toaster 17s linear infinite; animation-delay: -6s; }
  html[data-horrible="on"] .horrible-toasters span:nth-child(3) { animation: horrible-toaster 15s linear infinite; animation-delay: -10s; }

  html[data-horrible="on"] .horrible-seal {
    animation: horrible-spin 10s linear infinite;
  }

  html[data-horrible="on"] .horrible-hit-counter {
    animation: horrible-wobble 2.8s ease-in-out infinite;
  }

  html[data-horrible="on"] .page-toolbar .eyebrow {
    animation: horrible-rainbow-text 6s linear infinite;
  }

  html[data-horrible="on"] .horrible-pow.is-popping {
    animation: horrible-pow-pop 1.6s ease-out forwards;
  }

  html[data-horrible="on"] .horrible-trail-dot {
    animation: horrible-trail-fade 0.7s linear forwards;
  }

  html[data-horrible="on"] .horrible-burst-piece {
    animation: horrible-burst 1.8s ease-out forwards;
  }

  html[data-horrible="on"] .horrible-burst-piece:nth-child(1) { --dx: -8rem; --dy: -6rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(2) { --dx: 7rem; --dy: -7rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(3) { --dx: -3rem; --dy: 8rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(4) { --dx: 9rem; --dy: 4rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(5) { --dx: -10rem; --dy: 1rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(6) { --dx: 2rem; --dy: -9rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(7) { --dx: 6rem; --dy: 8rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(8) { --dx: -6rem; --dy: -9rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(9) { --dx: 10rem; --dy: -2rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(10) { --dx: -1rem; --dy: 9rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(11) { --dx: 4rem; --dy: -5rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(12) { --dx: -7rem; --dy: 6rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(13) { --dx: 8rem; --dy: 1rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(14) { --dx: -9rem; --dy: -3rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(15) { --dx: 1rem; --dy: -8rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(16) { --dx: 5rem; --dy: 7rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(17) { --dx: -4rem; --dy: -7rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(18) { --dx: 3rem; --dy: 9rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(19) { --dx: -8rem; --dy: 8rem; }
  html[data-horrible="on"] .horrible-burst-piece:nth-child(20) { --dx: 9rem; --dy: -6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-horrible="on"] *,
  html[data-horrible="on"] *::before,
  html[data-horrible="on"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes horrible-hue {
  to { filter: hue-rotate(360deg); }
}

@keyframes horrible-bg-shift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0%; }
  50% { background-position: 0 0, 0 0, 0 0, 0 0, 100% 60%; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0%; }
}

@keyframes horrible-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes horrible-rainbow-shift {
  to { background-position: 220% 0; }
}

@keyframes horrible-rainbow-text {
  0%, 100% { color: #fff; }
  33% { color: #ffe600; }
  66% { color: #00e5ff; }
}

@keyframes horrible-title-drift {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  50% { transform: translateX(0.4rem) rotate(1deg); }
}

@keyframes horrible-wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes horrible-popup-wiggle {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-4px); }
}

@keyframes horrible-input-jiggle {
  0%, 78%, 100% { transform: translateX(0); }
  82% { transform: translateX(-5px) rotate(-0.5deg); }
  86% { transform: translateX(5px) rotate(0.5deg); }
  90% { transform: translateX(-3px); }
  94% { transform: translateX(2px); }
}

@keyframes horrible-loading-shimmer {
  from { filter: brightness(1); }
  50% { filter: brightness(1.18); }
  to { filter: brightness(1); }
}

@keyframes horrible-card-pulse {
  0%, 100% { box-shadow: 10px 10px 0 #00e5ff, -4px 6px 0 #39ff14; }
  50% { box-shadow: 14px 14px 0 #ff2d95, -8px 8px 0 #ffe600; }
}

@keyframes horrible-blink {
  50% { filter: brightness(1.22); }
}

@keyframes horrible-score-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes horrible-chip-spin {
  from { transform: rotate(-8deg); }
  to { transform: rotate(352deg); }
}

@keyframes horrible-scroll-drift {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(0.35rem) rotate(0.6deg); }
}

@keyframes horrible-dvd {
  0% { transform: translate(0, 0); }
  20% { transform: translate(62vw, 18vh); }
  40% { transform: translate(8vw, 58vh); }
  60% { transform: translate(54vw, 68vh); }
  80% { transform: translate(18vw, 8vh); }
  100% { transform: translate(0, 0); }
}

@keyframes horrible-twinkle {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

@keyframes horrible-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes horrible-spin {
  to { transform: rotate(360deg); }
}

@keyframes horrible-toaster {
  from { transform: translateX(0) translateY(0); }
  to { transform: translateX(120vw) translateY(-18vh); }
}

@keyframes horrible-pow-pop {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.15); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 0; }
}

@keyframes horrible-trail-fade {
  to { transform: scale(0.2); opacity: 0; }
}

@keyframes horrible-burst {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx, 6rem)), calc(-50% + var(--dy, -6rem))) scale(0.4); opacity: 0; }
}