:root {
  --bg-cream: #0f131b;
  --bg-sand: #141015;
  --ink: #171717;
  --ink-soft: #343434;
  --paper: #f8f3ea;
  --line: #c8b898;
  --accent: #b64324;
  --accent-2: #006b6b;
  --tweet-bg: #0b0d12;
  --tweet-ink: #e7eaef;
  --tweet-subtle: #838a97;
  --ring: 0 0 0 2px #ca5b38;
  --intensity-level: 1;
  --intensity-norm: 0;
  --intensity-hue: 210;
  --heat-alpha: 0.08;
  --heat-blur: 13px;
  --heat-scale: 1;
  --bg-spark: 0.06;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 84% 8%,
      hsl(calc(var(--intensity-hue) - 16) 96% 57% / calc(var(--bg-spark) + 0.14)) 0%,
      transparent 36%
    ),
    radial-gradient(
      circle at 12% 92%,
      hsl(calc(var(--intensity-hue) + 48) 88% 47% / calc(var(--bg-spark) + 0.06)) 0%,
      transparent 40%
    ),
    linear-gradient(145deg, var(--bg-cream), var(--bg-sand));
  transition: background 200ms ease;
}

.bg-aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.11) 1px,
    transparent 1px
  );
  background-size: 36px 36px;
  opacity: calc(0.18 + var(--intensity-norm) * 0.3);
}

.bg-heat {
  position: fixed;
  inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 82%,
      hsl(calc(var(--intensity-hue) + 8) 100% 56% / 0.58) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 14%,
      hsl(calc(var(--intensity-hue) - 18) 100% 60% / 0.52) 0%,
      transparent 38%
    ),
    radial-gradient(
      circle at 52% 48%,
      hsl(calc(var(--intensity-hue) - 32) 96% 50% / 0.44) 0%,
      transparent 58%
    );
  mix-blend-mode: screen;
  opacity: var(--heat-alpha);
  filter: blur(var(--heat-blur)) saturate(calc(1 + var(--intensity-norm) * 2));
  transform: scale(var(--heat-scale));
  animation: heat-wave 3.4s ease-in-out 3;
}

.app-shell {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 20px 48px;
  display: grid;
  gap: 18px;
}

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: hsl(calc(var(--intensity-hue) + 22) 55% 95% / 0.92);
  backdrop-filter: blur(3px);
  padding: 22px 110px 22px 22px;
  animation: rise 600ms ease both;
  transition: background-color 220ms ease;
}

.eyebrow {
  margin: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  font-weight: 700;
}

h1 {
  margin: 8px 0 6px;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.1rem, 6vw, 3.3rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.tagline {
  margin: 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

.horse-track {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: calc(64px + var(--intensity-norm) * 120px);
  pointer-events: none;
}

.horse-runner {
  position: absolute;
  top: calc(1px - var(--intensity-norm) * 34px);
  left: calc(100% - (58px + var(--intensity-norm) * 84px));
  font-size: calc(3.5rem + var(--intensity-norm) * 8.8rem);
  line-height: 1;
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 calc(2px + var(--intensity-level) * 1.8px) hsl(var(--intensity-hue) 96% 58% / 0.45));
  transform: translateY(0) rotate(0deg);
  --horse-face: 1;
  will-change: left, transform;
  transition: font-size 120ms linear, top 120ms linear, left 120ms linear, filter 160ms ease;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: hsl(calc(var(--intensity-hue) + 18) 50% 95% / 0.94);
  box-shadow: 0 18px 45px rgba(30, 30, 30, 0.08);
  animation: rise 700ms ease both;
  transition: background-color 220ms ease, border-color 220ms ease;
}

.controls-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.selector-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.control-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid hsl(calc(var(--intensity-hue) + 28) 32% 67%);
  background: hsl(calc(var(--intensity-hue) + 34) 53% 98%);
  transition: border-color 220ms ease, background-color 220ms ease;
}

.control-range {
  width: min(360px, 100%);
  margin: 0 auto;
  padding: 16px 20px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.range-line {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.control-range label {
  align-self: center;
  text-align: center;
}

.control-inline:focus-within {
  box-shadow: none;
}

label {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
}

select,
input[type="range"] {
  margin-top: 0;
}

select {
  width: 240px;
  max-width: 240px;
  border-radius: 8px;
  border: 0;
  padding: 8px 8px;
  font: inherit;
  background: transparent;
  color: var(--ink);
}

select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: none;
}

input[type="range"]:focus,
input[type="range"]:focus-visible,
select:focus,
button:focus,
a:focus {
  outline: none;
  box-shadow: none;
}

.control-range input[type="range"] {
  width: 220px;
  min-width: 0;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    hsl(calc(var(--intensity-hue) - 6) 96% 48%) 0 var(--fill, 50%),
    hsl(calc(var(--intensity-hue) + 34) 78% 64%) var(--fill, 50%) 100%
  );
  box-shadow: 0 0 0 1px hsl(var(--intensity-hue) 60% 28% / 0.22);
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.control-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #fff4e2;
  background: hsl(var(--intensity-hue) 94% 50%);
  box-shadow:
    0 0 0 2px rgba(16, 20, 27, 0.24),
    0 0 calc(5px + var(--intensity-level) * 4px) hsl(var(--intensity-hue) 98% 56% / 0.9);
}

.control-range input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #fff4e2;
  background: hsl(var(--intensity-hue) 94% 50%);
  box-shadow:
    0 0 0 2px rgba(16, 20, 27, 0.24),
    0 0 calc(5px + var(--intensity-level) * 4px) hsl(var(--intensity-hue) 98% 56% / 0.9);
}

.control-range input[type="range"]::-moz-range-track {
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: hsl(calc(var(--intensity-hue) + 28) 62% 70%);
}

#copeValue {
  height: 32px;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid hsl(var(--intensity-hue) 66% 54%);
  border-radius: 999px;
  background: hsl(calc(var(--intensity-hue) + 8) 100% 82%);
  padding: 0 9px;
  font-weight: 700;
  box-shadow: 0 0 calc(4px + var(--intensity-level) * 3px) hsl(var(--intensity-hue) 95% 57% / 0.5);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

button,
.btn-link {
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

button:hover,
.btn-link:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

#generateBtn.regen-armed {
  animation: regen-pop 420ms ease 1 both;
}

.btn-secondary {
  background: var(--accent-2);
  color: #f5fffa;
}

.btn-link {
  background: var(--accent-2);
  color: #f5fffa;
}

.output-panel {
  display: grid;
  gap: 10px;
}

.tweet-card {
  border-radius: 16px;
  background: linear-gradient(
    155deg,
    #070a10 0%,
    hsl(calc(var(--intensity-hue) - 8) 40% 11%) 100%
  );
  color: var(--tweet-ink);
  padding: 18px;
  border: 1px solid hsl(var(--intensity-hue) 62% 44% / calc(0.24 + var(--intensity-norm) * 0.34));
  box-shadow:
    0 14px calc(22px + var(--intensity-level) * 5px) rgba(2, 5, 11, 0.52),
    0 0 calc(6px + var(--intensity-level) * 8px) hsl(var(--intensity-hue) 96% 54% / calc(0.14 + var(--intensity-norm) * 0.34));
  transition: transform 180ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.tweet-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(150deg, #cc5a39, #f0b255);
  color: #170f0d;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.display-name,
.handle,
.tweet-text,
.tweet-meta,
.status-row p {
  margin: 0;
}

.display-name {
  font-weight: 700;
}

.handle {
  color: var(--tweet-subtle);
  font-size: 0.92rem;
}

.tweet-text {
  font-size: clamp(1.15rem, 2.7vw, 1.52rem);
  line-height: 1.36;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
}

.tweet-meta {
  margin-top: 14px;
  color: var(--tweet-subtle);
  font-size: 0.98rem;
  border-top: 1px solid #232734;
  padding-top: 12px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--ink-soft);
  min-height: 22px;
}

.footer-note {
  margin: 0;
  text-align: center;
  color: #e8dcc8;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.footer-note a {
  color: #f3d891;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-note a:hover {
  color: #ffe6b0;
}

body.intensity-shift #copeValue {
  transform: scale(1.06);
}

body.intensity-shift .tweet-card {
  transform: scale(1.006);
}

body.intensity-up #copeValue {
  animation: cope-pop 280ms ease;
}

body.intensity-up .tweet-card {
  animation: tweet-thump 320ms ease;
}

body[data-intensity="5"] .horse-runner {
  transform: translateY(0) rotate(0deg) scale(1.06);
}

body[data-intensity="6"] .horse-runner {
  animation: horse-nudge-6 1.9s ease-in-out infinite alternate;
}

body[data-intensity="7"] .horse-runner {
  animation: horse-nudge-7 1.6s ease-in-out infinite alternate;
}

body[data-intensity="8"] .horse-runner {
  animation:
    horse-warmup-trot 2.4s ease-in-out 1 forwards,
    horse-ready-idle-8 1.15s ease-in-out 2.4s infinite alternate;
}

body[data-intensity="8"][data-intensity-direction="down"] .horse-runner {
  animation:
    horse-step-back-9to8 560ms cubic-bezier(0.25, 0.78, 0.3, 1) 1 forwards,
    horse-ready-idle-8 1.15s ease-in-out 560ms infinite alternate;
}

body[data-intensity="9"] .horse-runner {
  animation:
    horse-slow-trot 2.2s cubic-bezier(0.3, 0.7, 0.35, 1) 1 forwards,
    horse-ready-idle-9 1s ease-in-out 2.2s infinite alternate;
}

body[data-intensity="10"] .horse-runner {
  animation: none;
}

body[data-intensity="10"] .horse-runner.horse-fly-triple {
  --horse-face: 1;
  animation: horse-run-across 1.32s cubic-bezier(0.25, 0.75, 0.3, 1) 3 forwards;
}

body[data-intensity="10"] .horse-runner.horse-fly-r2l {
  --horse-face: 1;
  animation: horse-run-across 1.32s cubic-bezier(0.25, 0.75, 0.3, 1) 1 forwards;
}

body[data-intensity="10"] .horse-runner.horse-fly-l2r {
  --horse-face: -1;
  animation: horse-run-across-l2r 1.32s cubic-bezier(0.25, 0.75, 0.3, 1) 1 forwards;
}

body[data-intensity="7"] .tweet-card,
body[data-intensity="8"] .tweet-card,
body[data-intensity="9"] .tweet-card,
body[data-intensity="10"] .tweet-card {
  box-shadow:
    0 16px calc(30px + var(--intensity-level) * 6px) rgba(2, 5, 11, 0.58),
    0 0 calc(18px + var(--intensity-level) * 12px) hsl(var(--intensity-hue) 100% 56% / calc(0.28 + var(--intensity-norm) * 0.42));
}

body[data-intensity="6"] {
  background:
    radial-gradient(circle at 84% 10%, hsl(30 100% 54% / 0.2) 0%, transparent 34%),
    radial-gradient(circle at 14% 90%, hsl(20 92% 50% / 0.14) 0%, transparent 42%),
    linear-gradient(145deg, #101018, #1a1512 60%, #151014);
}

body[data-intensity="7"] {
  background:
    radial-gradient(circle at 84% 9%, hsl(26 100% 56% / 0.32) 0%, transparent 36%),
    radial-gradient(circle at 14% 90%, hsl(14 98% 52% / 0.22) 0%, transparent 44%),
    linear-gradient(145deg, #110f16, #21130f 62%, #180f11);
}

body[data-intensity="8"] {
  background:
    radial-gradient(circle at 84% 8%, hsl(20 100% 56% / 0.36) 0%, transparent 36%),
    radial-gradient(circle at 12% 92%, hsl(10 98% 52% / 0.24) 0%, transparent 42%),
    radial-gradient(circle at 52% 46%, hsl(34 100% 60% / 0.16) 0%, transparent 48%),
    linear-gradient(145deg, #120f13, #24120f 62%, #1a0d0d);
}

body[data-intensity="9"] {
  background:
    radial-gradient(circle at 86% 9%, hsl(6 100% 58% / 0.56) 0%, transparent 38%),
    radial-gradient(circle at 14% 90%, hsl(355 100% 52% / 0.5) 0%, transparent 44%),
    radial-gradient(circle at 52% 42%, hsl(14 100% 54% / 0.3) 0%, transparent 46%),
    linear-gradient(145deg, #12070d, #2a090d 58%, #1f070c);
}

body[data-intensity="6"] .bg-heat {
  background:
    radial-gradient(circle at 20% 82%, hsl(30 100% 56% / 0.46) 0%, transparent 44%),
    radial-gradient(circle at 84% 18%, hsl(16 100% 52% / 0.36) 0%, transparent 40%),
    radial-gradient(circle at 52% 54%, hsl(40 100% 58% / 0.24) 0%, transparent 58%);
  opacity: 0.58;
  filter: blur(calc(var(--heat-blur) + 4px)) saturate(2.2);
}

body[data-intensity="7"] .bg-heat {
  background:
    radial-gradient(circle at 18% 84%, hsl(26 100% 56% / 0.62) 0%, transparent 44%),
    radial-gradient(circle at 86% 16%, hsl(12 100% 54% / 0.48) 0%, transparent 40%),
    radial-gradient(circle at 56% 56%, hsl(34 100% 58% / 0.34) 0%, transparent 58%);
  opacity: 0.72;
  filter: blur(calc(var(--heat-blur) + 6px)) saturate(2.6);
}

body[data-intensity="8"] .bg-heat {
  background:
    radial-gradient(circle at 18% 84%, hsl(18 100% 56% / 0.72) 0%, transparent 44%),
    radial-gradient(circle at 86% 16%, hsl(8 100% 54% / 0.56) 0%, transparent 40%),
    radial-gradient(circle at 56% 56%, hsl(30 100% 58% / 0.5) 0%, transparent 58%);
  opacity: 0.8;
  filter: blur(calc(var(--heat-blur) + 7px)) saturate(2.9) brightness(1.03);
}

body[data-intensity="9"] .bg-heat {
  background:
    radial-gradient(circle at 16% 86%, hsl(10 100% 56% / 0.9) 0%, transparent 46%),
    radial-gradient(circle at 88% 15%, hsl(355 100% 54% / 0.88) 0%, transparent 42%),
    radial-gradient(circle at 52% 48%, hsl(28 100% 58% / 0.64) 0%, transparent 56%),
    radial-gradient(circle at 58% 12%, hsl(8 100% 52% / 0.52) 0%, transparent 36%);
  opacity: 0.94;
  filter: blur(calc(var(--heat-blur) + 12px)) saturate(3.4) brightness(1.08);
}

body[data-intensity="6"] .tweet-card {
  background: linear-gradient(155deg, #080a10 0%, #211912 100%);
  border-color: hsl(24 80% 48% / 0.34);
}

body[data-intensity="7"] .tweet-card {
  background: linear-gradient(155deg, #09090f 0%, #25140f 100%);
  border-color: hsl(18 88% 50% / 0.42);
}

body[data-intensity="8"] .tweet-card {
  background: linear-gradient(155deg, #09080d 0%, #2c0f10 100%);
  border-color: hsl(12 92% 50% / 0.5);
}

body[data-intensity="9"] .tweet-card {
  background: linear-gradient(155deg, #080608 0%, #33080f 56%, #25070d 100%);
  border-color: hsl(4 98% 54% / 0.62);
}

body[data-intensity="10"] {
  background:
    radial-gradient(circle at 84% 8%, hsl(357 100% 26% / 0.44) 0%, transparent 42%),
    radial-gradient(circle at 12% 92%, hsl(354 92% 14% / 0.36) 0%, transparent 50%),
    linear-gradient(145deg, #030203, #0d0305 56%, #040305 100%);
}

body[data-intensity="10"] .bg-heat {
  background:
    radial-gradient(ellipse at 14% 94%, hsl(356 100% 24% / 0.62) 0%, transparent 60%),
    radial-gradient(ellipse at 46% 103%, hsl(2 100% 30% / 0.68) 0%, transparent 62%),
    radial-gradient(ellipse at 76% 96%, hsl(8 100% 34% / 0.66) 0%, transparent 58%),
    radial-gradient(ellipse at 54% 82%, hsl(354 100% 22% / 0.56) 0%, transparent 46%),
    radial-gradient(circle at 50% 42%, hsl(358 100% 30% / 0.5) 0%, transparent 68%);
  opacity: 0.9;
  filter: blur(calc(var(--heat-blur) + 18px)) saturate(3.2) brightness(0.88);
  mix-blend-mode: normal;
  animation:
    inferno-surge 1.25s ease-in-out 3,
    hellfire-flicker 420ms ease-in-out 4;
}

body[data-intensity="10"] .bg-heat::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -14%;
  height: 42%;
  background:
    radial-gradient(36% 92% at 4% 100%, hsl(8 100% 30% / 0.76) 0%, transparent 74%),
    radial-gradient(32% 90% at 16% 100%, hsl(2 100% 28% / 0.74) 0%, transparent 74%),
    radial-gradient(38% 94% at 30% 100%, hsl(10 100% 34% / 0.78) 0%, transparent 74%),
    radial-gradient(34% 88% at 44% 100%, hsl(355 100% 26% / 0.76) 0%, transparent 74%),
    radial-gradient(40% 98% at 58% 100%, hsl(12 100% 36% / 0.8) 0%, transparent 74%),
    radial-gradient(36% 92% at 72% 100%, hsl(0 100% 28% / 0.74) 0%, transparent 74%),
    radial-gradient(34% 90% at 86% 100%, hsl(8 100% 32% / 0.78) 0%, transparent 74%),
    radial-gradient(30% 84% at 98% 100%, hsl(2 100% 26% / 0.74) 0%, transparent 74%);
  filter: blur(2px) saturate(1.25);
  transform-origin: 50% 100%;
  animation: hellfire-flame-lift 1.15s ease-in-out 6 alternate;
}

body[data-intensity="10"] .bg-heat::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -8%;
  height: 26%;
  background:
    linear-gradient(to top, hsl(0 0% 0% / 0.82) 0%, hsl(0 0% 0% / 0.12) 56%, transparent 100%),
    radial-gradient(110% 120% at 50% 100%, hsl(355 100% 18% / 0.64) 0%, transparent 68%);
  filter: blur(6px);
  animation: hellfire-ember-pulse 520ms ease-in-out 5;
}

body[data-intensity="10"] .bg-aura {
  opacity: 0.32;
  background-image:
    linear-gradient(to right, hsl(4 100% 56% / 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(352 100% 48% / 0.1) 1px, transparent 1px);
}

body[data-intensity="10"] .control-range {
  animation: slider-rattle 150ms steps(2, end) 4;
}

body[data-intensity="10"] .control-range input[type="range"] {
  background: linear-gradient(
    90deg,
    hsl(calc(var(--intensity-hue) - 8) 100% 52%) 0%,
    hsl(calc(var(--intensity-hue) + 22) 100% 62%) 25%,
    hsl(calc(var(--intensity-hue) + 54) 100% 68%) 50%,
    hsl(calc(var(--intensity-hue) - 18) 100% 54%) 75%,
    hsl(calc(var(--intensity-hue) + 16) 100% 60%) 100%
  );
  background-size: 220% 100%;
  animation: slider-chaos 520ms linear 3;
  filter: saturate(2.8) brightness(1.1);
  box-shadow:
    0 0 0 1px hsl(var(--intensity-hue) 100% 34% / 0.7),
    0 0 22px hsl(var(--intensity-hue) 100% 56% / 0.82);
}

body[data-intensity="10"] .control-range input[type="range"]::-webkit-slider-thumb {
  animation: thumb-chaos 260ms linear 4;
}

body[data-intensity="10"] .control-range input[type="range"]::-moz-range-thumb {
  animation: thumb-chaos 260ms linear 4;
}

body[data-intensity="10"] .tweet-card {
  animation: tweet-thump 920ms ease-in-out 2;
}

body[data-intensity="10"] #copeValue {
  animation: heat-flicker 900ms ease-in-out 2;
}

.tweet-card.tweet-meltdown {
  animation: meltdown-card 120ms steps(2, end) 8;
  border-color: hsl(2 100% 58% / 0.9);
  box-shadow:
    0 0 0 1px hsl(8 100% 58% / 0.9),
    0 0 30px hsl(7 100% 56% / 0.82),
    0 14px 36px rgba(8, 8, 11, 0.78);
}

.tweet-card.tweet-meltdown .tweet-text {
  animation: meltdown-text 120ms steps(2, end) 8;
  text-shadow:
    2px 0 0 #ff3f2f,
    -2px 0 0 #11e4ff,
    0 0 11px rgba(255, 74, 44, 0.72);
}

.tweet-card.tweet-meltdown .tweet-meta {
  animation: meltdown-meta 160ms steps(2, end) 6;
}

@keyframes rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes regen-appear {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes regen-pop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsl(var(--intensity-hue) 100% 64% / 0);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 8px hsl(var(--intensity-hue) 100% 64% / 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsl(var(--intensity-hue) 100% 64% / 0);
  }
}

@keyframes cope-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes tweet-thump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.014);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes horse-warmup-trot {
  0% {
    left: calc(100% - (58px + var(--intensity-norm) * 84px));
    transform: translateY(0) rotate(0deg) scale(calc(1 + var(--intensity-norm) * 0.08));
  }
  28% {
    left: calc(100% - (90px + var(--intensity-norm) * 120px));
    transform: translateY(-2px) rotate(-4deg) scale(calc(1.02 + var(--intensity-norm) * 0.1));
  }
  54% {
    left: calc(100% - (126px + var(--intensity-norm) * 160px));
    transform: translateY(2px) rotate(3deg) scale(calc(1.04 + var(--intensity-norm) * 0.12));
  }
  78% {
    left: calc(100% - (104px + var(--intensity-norm) * 136px));
    transform: translateY(-2px) rotate(-2deg) scale(calc(1.03 + var(--intensity-norm) * 0.1));
  }
  100% {
    left: calc(100% - (116px + var(--intensity-norm) * 148px));
    transform: translateY(0) rotate(0deg) scale(calc(1.04 + var(--intensity-norm) * 0.11));
  }
}

@keyframes horse-slow-trot {
  0% {
    left: calc(100% - (58px + var(--intensity-norm) * 84px));
    transform: translateY(0) rotate(0deg) scale(calc(1 + var(--intensity-norm) * 0.12));
  }
  22% {
    left: calc(100% - (102px + var(--intensity-norm) * 138px));
    transform: translateY(-3px) rotate(-5deg) scale(calc(1.07 + var(--intensity-norm) * 0.14));
  }
  50% {
    left: calc(100% - (136px + var(--intensity-norm) * 176px));
    transform: translateY(2px) rotate(4deg) scale(calc(1.11 + var(--intensity-norm) * 0.16));
  }
  76% {
    left: calc(100% - (160px + var(--intensity-norm) * 198px));
    transform: translateY(-3px) rotate(-3deg) scale(calc(1.15 + var(--intensity-norm) * 0.2));
  }
  100% {
    left: calc(100% - (148px + var(--intensity-norm) * 184px));
    transform: translateY(0) rotate(0deg) scale(calc(1.13 + var(--intensity-norm) * 0.17));
  }
}

@keyframes horse-nudge-6 {
  0% {
    left: calc(100% - (58px + var(--intensity-norm) * 84px));
    transform: translateY(0) rotate(0deg) scale(calc(1.02 + var(--intensity-norm) * 0.06));
  }
  50% {
    left: calc(100% - (64px + var(--intensity-norm) * 92px));
    transform: translateY(-1px) rotate(-1.1deg) scale(calc(1.03 + var(--intensity-norm) * 0.07));
  }
  100% {
    left: calc(100% - (61px + var(--intensity-norm) * 88px));
    transform: translateY(0.7px) rotate(0.8deg) scale(calc(1.025 + var(--intensity-norm) * 0.07));
  }
}

@keyframes horse-nudge-7 {
  0% {
    left: calc(100% - (58px + var(--intensity-norm) * 84px));
    transform: translateY(0) rotate(0deg) scale(calc(1 + var(--intensity-norm) * 0.07));
  }
  50% {
    left: calc(100% - (68px + var(--intensity-norm) * 98px));
    transform: translateY(-1.2px) rotate(-1.4deg) scale(calc(1.015 + var(--intensity-norm) * 0.08));
  }
  100% {
    left: calc(100% - (63px + var(--intensity-norm) * 92px));
    transform: translateY(0.9px) rotate(1deg) scale(calc(1.01 + var(--intensity-norm) * 0.08));
  }
}

@keyframes horse-step-back-9to8 {
  0% {
    left: calc(100% - (156px + var(--intensity-norm) * 200px));
    transform: translateY(0) rotate(0deg) scale(calc(1.13 + var(--intensity-norm) * 0.18));
  }
  48% {
    left: calc(100% - (134px + var(--intensity-norm) * 172px));
    transform: translateY(-1.5px) rotate(-2.1deg) scale(calc(1.09 + var(--intensity-norm) * 0.15));
  }
  100% {
    left: calc(100% - (116px + var(--intensity-norm) * 148px));
    transform: translateY(0) rotate(0deg) scale(calc(1.04 + var(--intensity-norm) * 0.11));
  }
}

@keyframes horse-ready-idle-8 {
  0% {
    transform: translateY(0) rotate(0deg) scale(calc(1.04 + var(--intensity-norm) * 0.11));
  }
  50% {
    transform: translateY(-1.4px) rotate(-1.8deg) scale(calc(1.06 + var(--intensity-norm) * 0.12));
  }
  100% {
    transform: translateY(1px) rotate(1.2deg) scale(calc(1.05 + var(--intensity-norm) * 0.12));
  }
}

@keyframes horse-ready-idle-9 {
  0% {
    transform: translateY(0) rotate(0deg) scale(calc(1.13 + var(--intensity-norm) * 0.17));
  }
  50% {
    transform: translateY(-1.9px) rotate(-2.1deg) scale(calc(1.15 + var(--intensity-norm) * 0.19));
  }
  100% {
    transform: translateY(1.2px) rotate(1.5deg) scale(calc(1.14 + var(--intensity-norm) * 0.18));
  }
}

@keyframes horse-run-across {
  0% {
    left: calc(100% - (58px + var(--intensity-norm) * 84px));
    transform: translateY(0) rotate(0deg) scale(1) scaleX(var(--horse-face));
    opacity: 1;
  }
  12% {
    transform: translateY(-2px) rotate(-5deg) scale(1.06) scaleX(var(--horse-face));
    opacity: 1;
  }
  32% {
    transform: translateY(1px) rotate(3deg) scale(1.1) scaleX(var(--horse-face));
    opacity: 1;
  }
  52% {
    transform: translateY(-2px) rotate(-4deg) scale(1.14) scaleX(var(--horse-face));
    opacity: 1;
  }
  72% {
    transform: translateY(1px) rotate(3deg) scale(1.2) scaleX(var(--horse-face));
    opacity: 0.98;
  }
  88% {
    left: calc(-180px - var(--intensity-norm) * 190px);
    transform:
      translateY(-2px)
      rotate(-3deg)
      scale(calc(1.55 + var(--intensity-norm) * 0.82))
      scaleX(var(--horse-face));
    opacity: 0.86;
  }
  100% {
    left: calc(-360px - var(--intensity-norm) * 420px);
    transform:
      translateY(0)
      rotate(0deg)
      scale(calc(2 + var(--intensity-norm) * 1.1))
      scaleX(var(--horse-face));
    opacity: 0;
  }
}

@keyframes horse-run-across-l2r {
  0% {
    left: calc(-220px - var(--intensity-norm) * 220px);
    transform:
      translateY(0)
      rotate(0deg)
      scale(calc(2 + var(--intensity-norm) * 1.1))
      scaleX(var(--horse-face));
    opacity: 0.3;
  }
  12% {
    left: calc(-110px - var(--intensity-norm) * 118px);
    transform:
      translateY(-2px)
      rotate(3deg)
      scale(calc(1.55 + var(--intensity-norm) * 0.82))
      scaleX(var(--horse-face));
    opacity: 0.9;
  }
  32% {
    transform: translateY(1px) rotate(-3deg) scale(1.2) scaleX(var(--horse-face));
    opacity: 0.98;
  }
  52% {
    transform: translateY(-2px) rotate(4deg) scale(1.14) scaleX(var(--horse-face));
    opacity: 1;
  }
  72% {
    transform: translateY(1px) rotate(-3deg) scale(1.1) scaleX(var(--horse-face));
    opacity: 1;
  }
  88% {
    left: calc(100% - (58px + var(--intensity-norm) * 84px));
    transform: translateY(-2px) rotate(5deg) scale(1.06) scaleX(var(--horse-face));
    opacity: 1;
  }
  100% {
    left: calc(100% + 220px + var(--intensity-norm) * 260px);
    transform: translateY(0) rotate(0deg) scale(1.18) scaleX(var(--horse-face));
    opacity: 0;
  }
}

@keyframes heat-wave {
  0% {
    transform: scale(var(--heat-scale)) translate3d(0, 0, 0);
  }
  33% {
    transform: scale(calc(var(--heat-scale) + 0.05)) translate3d(0.8%, -1.2%, 0);
  }
  66% {
    transform: scale(calc(var(--heat-scale) + 0.1)) translate3d(-1.1%, 0.9%, 0);
  }
  100% {
    transform: scale(var(--heat-scale)) translate3d(0, 0, 0);
  }
}

@keyframes inferno-surge {
  0% {
    transform: scale(calc(var(--heat-scale) + 0.02)) translate3d(0, 0, 0);
  }
  24% {
    transform: scale(calc(var(--heat-scale) + 0.18)) translate3d(1.5%, -2.3%, 0);
  }
  52% {
    transform: scale(calc(var(--heat-scale) + 0.28)) translate3d(-2.2%, -1.3%, 0);
  }
  78% {
    transform: scale(calc(var(--heat-scale) + 0.2)) translate3d(1.7%, -1.8%, 0);
  }
  100% {
    transform: scale(calc(var(--heat-scale) + 0.04)) translate3d(0, 0, 0);
  }
}

@keyframes hellfire-flicker {
  0% {
    opacity: 0.82;
  }
  18% {
    opacity: 0.96;
  }
  36% {
    opacity: 0.86;
  }
  58% {
    opacity: 1;
  }
  80% {
    opacity: 0.88;
  }
  100% {
    opacity: 0.95;
  }
}

@keyframes hellfire-flame-lift {
  0% {
    transform: translateY(0) scaleY(0.98);
    opacity: 0.84;
  }
  35% {
    transform: translateY(-6px) scaleY(1.06);
    opacity: 0.92;
  }
  70% {
    transform: translateY(-3px) scaleY(1.02);
    opacity: 0.86;
  }
  100% {
    transform: translateY(-8px) scaleY(1.08);
    opacity: 0.94;
  }
}

@keyframes hellfire-ember-pulse {
  0% {
    opacity: 0.68;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.74;
  }
}

@keyframes heat-flicker {
  0% {
    box-shadow: 0 0 10px hsl(var(--intensity-hue) 98% 58% / 0.55);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 26px hsl(var(--intensity-hue) 100% 62% / 0.85);
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 11px hsl(var(--intensity-hue) 96% 58% / 0.58);
    transform: scale(1.01);
  }
}

@keyframes slider-rattle {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(-1px, 0, 0) rotate(-0.4deg);
  }
  50% {
    transform: translate3d(1px, 0, 0) rotate(0.4deg);
  }
  75% {
    transform: translate3d(-1px, 1px, 0) rotate(-0.3deg);
  }
  100% {
    transform: translate3d(1px, -1px, 0) rotate(0.3deg);
  }
}

@keyframes slider-chaos {
  0% {
    background-position: 0% 50%;
    filter: saturate(2.4) brightness(1.05);
  }
  50% {
    background-position: 100% 50%;
    filter: saturate(3.6) brightness(1.3);
  }
  100% {
    background-position: 0% 50%;
    filter: saturate(2.5) brightness(1.08);
  }
}

@keyframes thumb-chaos {
  0% {
    transform: scale(1) rotate(0deg) translateY(0);
  }
  25% {
    transform: scale(1.16) rotate(-10deg) translateY(-1px);
  }
  50% {
    transform: scale(0.96) rotate(10deg) translateY(1px);
  }
  75% {
    transform: scale(1.14) rotate(-7deg) translateY(-1px);
  }
  100% {
    transform: scale(1) rotate(0deg) translateY(0);
  }
}

@keyframes meltdown-card {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  20% {
    transform: translate3d(-3px, 1px, 0) rotate(-0.45deg);
  }
  40% {
    transform: translate3d(3px, -2px, 0) rotate(0.55deg);
  }
  60% {
    transform: translate3d(-2px, 2px, 0) rotate(-0.5deg);
  }
  80% {
    transform: translate3d(2px, 0, 0) rotate(0.35deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes meltdown-text {
  0% {
    transform: translate(0, 0) skewX(0deg);
    filter: hue-rotate(0deg) blur(0);
  }
  25% {
    transform: translate(-1px, 1px) skewX(-8deg);
    filter: hue-rotate(35deg) blur(0.25px);
  }
  50% {
    transform: translate(1px, -1px) skewX(9deg);
    filter: hue-rotate(-28deg) blur(0.4px);
  }
  75% {
    transform: translate(-1px, 0) skewX(-7deg);
    filter: hue-rotate(22deg) blur(0.2px);
  }
  100% {
    transform: translate(0, 0) skewX(0deg);
    filter: hue-rotate(0deg) blur(0);
  }
}

@keyframes meltdown-meta {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  35% {
    opacity: 0.45;
    transform: translateX(-2px);
  }
  70% {
    opacity: 0.8;
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: 20px 14px 30px;
  }

  .panel,
  .hero,
  .tweet-card {
    border-radius: 14px;
  }

  .hero {
    padding: 18px 82px 18px 18px;
  }

  .horse-track {
    top: 7px;
    left: 6px;
    right: 6px;
    height: calc(52px + var(--intensity-norm) * 86px);
  }

  .horse-runner {
    top: calc(3px - var(--intensity-norm) * 24px);
    font-size: calc(2.7rem + var(--intensity-norm) * 6.5rem);
    left: calc(100% - (46px + var(--intensity-norm) * 54px));
  }

  .button-row > * {
    flex: 1 1 auto;
    text-align: center;
  }

  .selector-strip {
    flex-direction: column;
  }

  .control-inline {
    width: 100%;
    border-radius: 12px;
  }

  select {
    flex: 1;
    width: auto;
    max-width: none;
  }

  .control-range input[type="range"] {
    flex: 1;
    width: auto;
  }
}