:root {
  color-scheme: light;
  --paper: #f7f0df;
  --ink: #1f2430;
  --panel: rgba(255, 251, 245, 0.72);
  --panel-border: rgba(31, 36, 48, 0.08);
  --shadow: 0 24px 70px rgba(113, 71, 29, 0.16);
  --accent: #ff7f50;
  --accent-2: #f0c93d;
  --blob-base-1: #ffd58a;
  --blob-base-2: #ffad69;
  --blob-base-3: #ff7a57;
  --blob-base-4: #ef5567;
  --blob-spot-1: rgba(255, 240, 170, 0.6);
  --blob-spot-2: rgba(255, 120, 140, 0.24);
  --blob-cheek: rgba(255, 152, 142, 0.45);
  --blob-shadow: rgba(44, 31, 18, 0.18);
  --blob-glow: rgba(255, 162, 98, 0.34);
  --blob-outline: rgba(255, 255, 255, 0.28);
  --blob-texture-a: rgba(255, 255, 255, 0.22);
  --blob-texture-b: rgba(255, 255, 255, 0.08);
  --drip-left: 18%;
  --drip-middle: 55%;
  --drip-right: 79%;
  --drip-scale-left: 0.9;
  --drip-scale-middle: 1.15;
  --drip-scale-right: 0.78;
}

* {
  box-sizing: border-box;
}

html {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 36%),
    radial-gradient(circle at 80% 20%, rgba(240, 201, 61, 0.2), transparent 20%),
    linear-gradient(180deg, #fff6e6 0%, var(--paper) 48%, #f4ead2 100%);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.page-shell {
  width: min(980px, calc(100% - 28px));
  margin: 0 auto;
  padding: 20px 0 44px;
}

.hero,
.control-panel,
.merch-panel {
  backdrop-filter: blur(12px);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 32px;
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 22px 30px;
}

.hero-copy h1,
.panel-copy h2,
.merch-panel h2 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 0.95;
  margin: 0;
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 6.25rem);
  letter-spacing: -0.05em;
  margin: 0;
}

.panel-copy h2,
.merch-panel h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.04em;
}

.eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(31, 36, 48, 0.6);
}

.lede,
.panel-copy p,
.merch-panel p,
.stage-caption span,
.sound-note {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 16px 0 0;
  color: rgba(31, 36, 48, 0.84);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  justify-content: center;
}

.primary-button,
.secondary-button,
.ghost-link,
.merch-button,
.blob-choice,
.sound-choice,
.blob-button {
  border: 0;
  cursor: pointer;
}

.primary-button,
.secondary-button,
.merch-button {
  background: linear-gradient(135deg, var(--accent), #ff9966);
  color: white;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 24px rgba(255, 127, 80, 0.32);
}

.primary-button,
.secondary-button,
.ghost-link,
.merch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
}

.secondary-button {
  background: linear-gradient(135deg, #ffc55f, #ff8f76);
}

.ghost-link {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(31, 36, 48, 0.08);
}

.sound-note {
  min-height: 1.6em;
  margin-top: 0;
  font-size: 0.96rem;
}

.blob-stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 6px 8px 0;
}

.blob-button {
  position: relative;
  width: min(380px, 82vw);
  aspect-ratio: 1 / 1;
  border-radius: 44% 56% 54% 46% / 50% 42% 58% 50%;
  transform-origin: center 70%;
  overflow: visible;
  background:
    radial-gradient(circle at 34% 27%, var(--blob-base-1) 0%, var(--blob-base-2) 28%, var(--blob-base-3) 64%, var(--blob-base-4) 100%);
  transition: transform 120ms ease-out, filter 120ms ease-out, border-radius 180ms ease-out;
  box-shadow:
    inset 0 -24px 50px rgba(0, 0, 0, 0.12),
    inset 0 20px 40px rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px var(--blob-outline),
    0 40px 60px var(--blob-shadow);
  animation: idle-wobble 5.2s ease-in-out infinite;
}

.blob-button::after {
  content: "";
  position: absolute;
  inset: auto 12% -8%;
  height: 16%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blob-shadow) 88%, transparent) 0%, rgba(132, 83, 36, 0) 70%);
  filter: blur(18px);
  z-index: -1;
}

.blob-button.is-poking {
  transform: scaleX(1.09) scaleY(0.88) translateY(10px) rotate(-1.8deg);
  border-radius: 50% 52% 48% 50% / 58% 39% 61% 42%;
  filter: saturate(1.15) brightness(1.02);
}

.blob-aura,
.blob-inner,
.blob-puddle,
.blob-drip,
.blob-speck,
.blob-face,
.blob-cheek,
.blob-shine,
.blob-spark {
  position: absolute;
  pointer-events: none;
}

.blob-aura {
  inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--blob-glow) 0%, rgba(255, 255, 255, 0) 65%);
  filter: blur(18px);
  opacity: 0.9;
}

.blob-inner {
  inset: 17% 19% 23%;
  border-radius: 48% 52% 48% 52% / 42% 48% 52% 58%;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.14) 18%, transparent 48%),
    radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.24) 0%, transparent 16%),
    radial-gradient(circle at 72% 76%, var(--blob-spot-2) 0%, transparent 46%),
    radial-gradient(circle at 20% 72%, var(--blob-spot-1) 0%, transparent 36%),
    repeating-radial-gradient(circle at 58% 50%, var(--blob-texture-a) 0 8px, var(--blob-texture-b) 8px 15px, transparent 15px 24px);
  mix-blend-mode: screen;
  opacity: 0.96;
}

.blob-puddle {
  inset: auto 12% -9%;
  height: 17%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--blob-base-2) 72%, white) 0%, color-mix(in srgb, var(--blob-base-4) 92%, transparent) 62%, transparent 75%);
  filter: blur(4px);
  opacity: 0.92;
  z-index: -1;
}

.blob-drip {
  bottom: 4%;
  width: 12%;
  height: 24%;
  border-radius: 999px 999px 40% 40%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blob-base-1) 82%, white) 0%, color-mix(in srgb, var(--blob-base-3) 94%, transparent) 100%);
  box-shadow:
    inset 0 8px 8px rgba(255, 255, 255, 0.18),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12);
  transform-origin: top center;
  opacity: 0.96;
}

.blob-drip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16%;
  width: 82%;
  height: 32%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: inherit;
}

.blob-drip-one {
  left: var(--drip-left);
  transform: scaleY(var(--drip-scale-left));
}

.blob-drip-two {
  left: var(--drip-middle);
  transform: scaleY(var(--drip-scale-middle));
}

.blob-drip-three {
  left: var(--drip-right);
  transform: scaleY(var(--drip-scale-right));
}

.blob-speck {
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.16);
}

.blob-speck-one {
  top: 22%;
  right: 24%;
}

.blob-speck-two {
  bottom: 25%;
  left: 21%;
  width: 10%;
}

.blob-speck-three {
  top: 42%;
  left: 18%;
  width: 9%;
  opacity: 0.72;
}

.blob-face {
  inset: 24% 18% auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 22px;
  justify-items: center;
  align-items: center;
}

.eye {
  position: relative;
  width: 42px;
  height: 52px;
  border-radius: 48% 52% 46% 54% / 46% 50% 50% 54%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 10%, transparent 11%),
    radial-gradient(circle at 58% 68%, rgba(121, 195, 255, 0.34) 0%, transparent 24%),
    linear-gradient(180deg, rgba(47, 28, 21, 0.98) 0%, rgba(35, 20, 17, 0.98) 100%);
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, 0.24),
    0 2px 0 rgba(255, 255, 255, 0.12);
  transition: transform 120ms ease-out, border-radius 120ms ease-out;
}

.blob-button.is-poking .eye {
  transform: scaleY(0.48) translateY(4px);
}

.mouth {
  grid-column: 1 / -1;
  position: relative;
  width: 104px;
  height: 38px;
  border-radius: 0 0 40px 40px;
  border-bottom: 9px solid rgba(43, 28, 20, 0.84);
}

.mouth::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 26px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 0 0 20px 20px;
  background: rgba(255, 109, 132, 0.7);
}

.blob-cheek {
  top: 50%;
  width: 16%;
  height: 10%;
  border-radius: 999px;
  background: var(--blob-cheek);
  filter: blur(2px);
  opacity: 0.92;
}

.blob-cheek-left {
  left: 24%;
  transform: rotate(-20deg);
}

.blob-cheek-right {
  right: 24%;
  transform: rotate(20deg);
}

.blob-shine {
  inset: 10% auto auto 13%;
  width: 34%;
  height: 24%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 44%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.22) 38%, transparent 72%);
  filter: blur(2px);
  transform: rotate(-18deg);
}

.blob-spark {
  width: 11%;
  height: 11%;
  background:
    linear-gradient(transparent 42%, rgba(255, 255, 255, 0.7) 42%, rgba(255, 255, 255, 0.7) 58%, transparent 58%),
    linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.7) 42%, rgba(255, 255, 255, 0.7) 58%, transparent 58%);
  opacity: 0.65;
}

.blob-spark-one {
  top: 8%;
  right: 7%;
  transform: rotate(18deg);
}

.blob-spark-two {
  bottom: 14%;
  right: 17%;
  width: 8%;
  height: 8%;
  transform: rotate(-12deg);
}

.blob-melon {
  --blob-base-1: #ffe39d;
  --blob-base-2: #ffb56e;
  --blob-base-3: #ff7e66;
  --blob-base-4: #ea4d73;
  --blob-spot-1: rgba(255, 245, 195, 0.7);
  --blob-spot-2: rgba(255, 87, 135, 0.3);
  --blob-cheek: rgba(255, 171, 144, 0.5);
  --blob-shadow: rgba(87, 35, 21, 0.18);
  --blob-glow: rgba(255, 168, 96, 0.34);
  --blob-texture-a: rgba(255, 245, 204, 0.24);
  --blob-texture-b: rgba(255, 125, 106, 0.12);
  --drip-left: 16%;
  --drip-middle: 54%;
  --drip-right: 78%;
  clip-path: path("M 188 24 C 286 16 348 84 348 176 C 348 274 284 354 190 356 C 90 358 34 292 32 192 C 30 96 92 30 188 24 Z");
}

.blob-blueberry {
  --blob-base-1: #d8f7ff;
  --blob-base-2: #7fd4ff;
  --blob-base-3: #5c91ff;
  --blob-base-4: #6553de;
  --blob-spot-1: rgba(202, 243, 255, 0.64);
  --blob-spot-2: rgba(122, 95, 255, 0.28);
  --blob-cheek: rgba(160, 187, 255, 0.36);
  --blob-shadow: rgba(37, 46, 108, 0.2);
  --blob-glow: rgba(115, 174, 255, 0.28);
  --blob-texture-a: rgba(221, 245, 255, 0.24);
  --blob-texture-b: rgba(99, 123, 255, 0.12);
  --drip-left: 20%;
  --drip-middle: 57%;
  --drip-right: 76%;
  clip-path: path("M 192 20 C 300 26 356 108 334 208 C 316 288 270 358 182 360 C 102 362 42 300 40 208 C 38 112 98 18 192 20 Z");
}

.blob-lime {
  --blob-base-1: #f7ffb4;
  --blob-base-2: #b7f06f;
  --blob-base-3: #5fcf66;
  --blob-base-4: #1ca170;
  --blob-spot-1: rgba(245, 255, 185, 0.68);
  --blob-spot-2: rgba(40, 143, 91, 0.26);
  --blob-cheek: rgba(181, 237, 120, 0.34);
  --blob-shadow: rgba(18, 90, 61, 0.2);
  --blob-glow: rgba(127, 231, 124, 0.27);
  --blob-texture-a: rgba(244, 255, 195, 0.22);
  --blob-texture-b: rgba(55, 163, 102, 0.1);
  --drip-left: 22%;
  --drip-middle: 52%;
  --drip-right: 74%;
  clip-path: path("M 170 30 C 266 0 354 66 350 164 C 346 274 280 356 176 350 C 84 346 20 274 34 176 C 46 90 92 54 170 30 Z");
}

.blob-jamdrop {
  --blob-base-1: #ffd6e6;
  --blob-base-2: #ff94c5;
  --blob-base-3: #ef4d98;
  --blob-base-4: #a71f69;
  --blob-spot-1: rgba(255, 226, 238, 0.68);
  --blob-spot-2: rgba(150, 21, 83, 0.28);
  --blob-cheek: rgba(255, 157, 194, 0.42);
  --blob-shadow: rgba(102, 14, 53, 0.24);
  --blob-glow: rgba(255, 118, 188, 0.22);
  --blob-texture-a: rgba(255, 234, 242, 0.28);
  --blob-texture-b: rgba(169, 24, 92, 0.12);
  --drip-left: 14%;
  --drip-middle: 50%;
  --drip-right: 72%;
  --drip-scale-left: 1.18;
  --drip-scale-middle: 1.36;
  --drip-scale-right: 0.92;
  clip-path: path("M 199 10 C 240 61 283 102 322 148 C 354 187 351 247 322 294 C 289 346 239 369 182 362 C 118 354 75 315 62 257 C 50 204 70 157 109 120 C 148 82 175 54 199 10 Z");
}

.blob-honeydrop {
  --blob-base-1: #fff0aa;
  --blob-base-2: #ffc96e;
  --blob-base-3: #ff9648;
  --blob-base-4: #d7612f;
  --blob-spot-1: rgba(255, 244, 194, 0.72);
  --blob-spot-2: rgba(227, 121, 37, 0.24);
  --blob-cheek: rgba(255, 186, 116, 0.36);
  --blob-shadow: rgba(125, 71, 21, 0.22);
  --blob-glow: rgba(255, 183, 88, 0.24);
  --blob-texture-a: rgba(255, 246, 199, 0.3);
  --blob-texture-b: rgba(255, 164, 72, 0.12);
  --drip-left: 18%;
  --drip-middle: 56%;
  --drip-right: 81%;
  --drip-scale-left: 0.86;
  --drip-scale-middle: 1.44;
  --drip-scale-right: 0.74;
  clip-path: path("M 198 8 C 230 54 282 111 331 165 C 357 194 361 238 344 274 C 316 334 258 367 192 362 C 120 358 72 310 60 247 C 52 203 66 162 100 132 C 139 97 177 65 198 8 Z");
}

.blob-raspberryjam {
  --blob-base-1: #ffd9df;
  --blob-base-2: #ff8da3;
  --blob-base-3: #dd4d69;
  --blob-base-4: #8b1c44;
  --blob-spot-1: rgba(255, 225, 232, 0.68);
  --blob-spot-2: rgba(139, 28, 68, 0.28);
  --blob-cheek: rgba(255, 168, 189, 0.4);
  --blob-shadow: rgba(93, 14, 42, 0.24);
  --blob-glow: rgba(227, 88, 126, 0.22);
  --blob-texture-a: rgba(255, 232, 238, 0.26);
  --blob-texture-b: rgba(132, 28, 61, 0.14);
  --drip-left: 12%;
  --drip-middle: 46%;
  --drip-right: 70%;
  --drip-scale-left: 1.02;
  --drip-scale-middle: 1.22;
  --drip-scale-right: 0.88;
  clip-path: path("M 150 34 C 229 18 321 57 341 141 C 351 184 338 223 347 255 C 357 291 332 335 286 350 C 246 363 213 336 178 337 C 138 338 97 370 64 336 C 25 296 44 249 57 212 C 69 176 43 109 91 70 C 109 55 127 41 150 34 Z");
}

.stage-caption {
  text-align: center;
  max-width: 24ch;
}

.stage-caption strong {
  display: block;
  font-size: 1rem;
}

.control-panel,
.merch-panel {
  margin-top: 16px;
  padding: 18px 20px;
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.picker {
  margin: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(31, 36, 48, 0.08);
  background: rgba(255, 255, 255, 0.54);
}

.picker legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.blob-choice,
.sound-choice {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  border: 1px solid rgba(31, 36, 48, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  font-size: 0.88rem;
}

.blob-choice[aria-pressed="true"],
.sound-choice[aria-pressed="true"] {
  transform: translateY(-1px);
  border-color: rgba(31, 36, 48, 0.24);
  box-shadow: 0 12px 24px rgba(31, 36, 48, 0.09);
}

.merch-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.control-panel .eyebrow,
.merch-panel .eyebrow {
  margin-bottom: 8px;
  font-size: 0.64rem;
}

.control-panel h2,
.merch-panel h2 {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.ghost-link:focus-visible,
.merch-button:focus-visible,
.blob-choice:focus-visible,
.sound-choice:focus-visible,
.blob-button:focus-visible {
  outline: 3px solid rgba(31, 36, 48, 0.28);
  outline-offset: 3px;
}

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

  35% {
    transform: rotate(1.8deg) translateY(4px);
  }

  68% {
    transform: rotate(-1deg) translateY(-2px);
  }
}

@media (max-width: 860px) {
  .controls-grid,
  .merch-panel {
    grid-template-columns: 1fr;
    display: grid;
  }

  .merch-panel {
    justify-content: stretch;
  }

  .merch-button {
    width: 100%;
  }

  .blob-face {
    inset: 24% 16% auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}