:root {
  --paper:#faf6ed;
  --ink:#25241f;
  --orange:rgb(234, 0, 42);
  --blue:#3154db;
  --line:#dcd8cf}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Roboto',sans-serif}
a {
  color:inherit;
  text-decoration:none}
button,a {
  -webkit-tap-highlight-color:transparent}
a:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px}
.wrap {
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto}
.skip {
  position:absolute;
  top:-100px;
  background:white;
  padding:15px;
  z-index:10}
.skip:focus {
  top:10px}
.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:30px;
  border-bottom:1px solid var(--line)}
.brand {
  font-family:'Rubik Dirt',sans-serif;
  font-weight:700;
  font-size:25px;
  line-height:.93;
  letter-spacing:-1.5px}
.brand>span {
  display:block}
.brand-star {
  color:var(--orange);
  display:inline-block;
  font-size:28px;
  margin-left:4px}
.inline-icon {
  display:inline-block;
  width:1em;
  height:1em;
  flex-shrink:0;
  vertical-align:-.125em}
nav {
  display:flex;
  gap:30px;
  font-size:14px;
  font-weight:700}
nav a:last-child {
  border-bottom:2px solid var(--orange);
  padding-bottom:5px}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:54px;
  align-items:center;
  padding-block:64px 68px}
.eyebrow {
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:700;
  margin:0 0 23px;
  line-height:1.7}
.live-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  margin-right:7px}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  font-family:'Rubik Dirt',sans-serif}
h1 {
  font-size:clamp(44px,5.1vw,67px);
  line-height:1.03;
  letter-spacing:-3.5px;
  margin-bottom:25px}
em {
  font-style:normal;
  color:var(--orange)}
.intro {
  font-size:16px;
  line-height:1.75;
  max-width:440px;
  color:#55544e}
.event-date {
  display:flex;
  gap:13px;
  align-items:center;
  margin-block:25px}
.date-icon {
  border:1.5px solid var(--ink);
  border-radius:7px;
  text-align:center;
  padding:6px 12px;
  font:bold 24px/.95 'Rubik Dirt',sans-serif}
.date-icon small {
  font-size:10px;
  letter-spacing:1px}
.event-date strong {
  font-size:14px;
  display:block}
.event-date div>span {
  display:block;
  font-size:12px;
  margin-top:6px;
  color:#66645b}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:var(--ink);
  color:white;
  padding:18px 23px;
  border-radius:5px;
  font-size:13px;
  font-weight:700;
  transition:transform .2s}
.button:hover {
  transform:translateY(-3px)}
.button span {
  font-size:21px;
  line-height:1}
.hero-art {
  height:460px;
  position:relative;
  overflow:hidden;
  background:#eadff3;
  border-radius:180px 180px 12px 12px}
.art-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#25241f0c 1px,transparent 1px),linear-gradient(90deg,#25241f0c 1px,transparent 1px);
  background-size:30px 30px}
.art-label {
  position:absolute;
  top:43px;
  left:0;
  width:100%;
  text-align:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px}
.robot {
  position:absolute;
  width:165px;
  height:230px;
  top:126px;
  left:calc(50% - 82px);
  animation:bob 3s ease-in-out infinite}
.robot-head {
  position:absolute;
  top:0;
  left:0;
  width:165px;
  height:110px;
  background:var(--blue);
  border:3px solid var(--ink);
  border-radius:28px 28px 18px 18px;
  box-shadow:inset -10px -8px #0002;
  z-index:2;
  transform:rotate(-6deg)}
.antenna {
  position:absolute;
  top:-34px;
  left:80px;
  height:36px;
  width:4px;
  background:var(--ink);
  transform:rotate(-6deg)}
.antenna:before {
  content:'';
  position:absolute;
  top:-10px;
  left:-7px;
  width:18px;
  height:18px;
  background:var(--orange);
  border:3px solid var(--ink);
  border-radius:50%}
.eyes {
  display:flex;
  gap:28px;
  justify-content:center;
  padding-top:28px}
.eyes i {
  background:var(--paper);
  width:25px;
  height:30px;
  border-radius:50%;
  animation:blink 5s infinite}
.mouth {
  width:34px;
  height:14px;
  border:3px solid var(--paper);
  border-top:0;
  border-radius:0 0 20px 20px;
  margin:14px auto}
.robot-body {
  position:absolute;
  top:107px;
  left:17px;
  width:132px;
  height:98px;
  background:var(--blue);
  border:3px solid var(--ink);
  border-radius:15px;
  box-shadow:inset -8px -4px #0002;
  z-index:2}
.robot-body>span {
  display:block;
  font:bold 40px 'Rubik Dirt',sans-serif;
  color:white;
  padding:5px 18px}
.leds {
  display:flex;
  gap:7px;
  padding-left:20px}
.leds i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d8ed80}
.leds i:nth-child(2) {
  background:#fa643d;
  animation:blink 1.3s infinite}
.arm {
  position:absolute;
  top:123px;
  width:25px;
  height:77px;
  background:var(--blue);
  border:3px solid var(--ink);
  border-radius:20px}
.arm.left {
  left:-13px;
  transform:rotate(24deg)}
.arm.right {
  right:-17px;
  top:91px;
  transform-origin:bottom center;
  animation:wave 2s ease-in-out infinite}
.leg {
  position:absolute;
  top:199px;
  width:32px;
  height:36px;
  background:var(--ink);
  border-radius:0 0 8px 8px}
.leg.left {
  left:32px}
.leg.right {
  right:31px}
.orbit {
  position:absolute;
  z-index:3}
.orbit-one {
  top:118px;
  left:33px;
  font:bold 24px 'Rubik Dirt',sans-serif;
  transform:rotate(-13deg)}
.orbit-two {
  right:30px;
  top:92px;
  color:var(--orange);
  font-size:80px;
  animation:spin 25s linear infinite}
.art-sticker {
  position:absolute;
  right:17px;
  bottom:65px;
  background:#e2ed8b;
  border:1.5px solid var(--ink);
  padding:18px 12px;
  transform:rotate(10deg);
  text-align:center;
  font-size:26px;
  font-family:'Rubik Dirt',sans-serif;
  font-weight:700;
  border-radius:50%}
.art-sticker strong {
  font-size:8px;
  display:block}
.art-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  display:flex;
  justify-content:space-between;
  background:#ffffff65;
  font-size:8px;
  letter-spacing:1.3px;
  font-weight:700}
.countdown-band {
  background:var(--blue);
  color:white;
  padding-block:30px}
.countdown-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
.countdown-band .eyebrow {
  margin-bottom:3px;
  color:#dedfff}
.countdown-band h2 {
  font-size:30px;
  letter-spacing:-1px;
  margin:0}
.countdown-band h2 span {
  color:#e2ed8b}
.countdown {
  display:flex;
  gap:22px;
  align-items:flex-start}
.countdown>div {
  text-align:center;
  min-width:66px}
.countdown strong {
  display:block;
  font:500 49px/1.1 'Rubik Dirt',sans-serif;
  font-variant-numeric:tabular-nums}
.countdown div>span {
  display:block;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:1.8px;
  margin-top:8px}
.countdown b {
  font-size:30px;
  line-height:1.6;
  font-weight:400;
  opacity:.45}
.ticker {
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:17px 0;
  white-space:nowrap;
  font:bold 14px 'Rubik Dirt',sans-serif;
  letter-spacing:1px}
.ticker>div {
  width:max-content}
.ticker span {
  color:var(--orange);
  margin-inline:26px}
.section {
  padding-block:85px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px;
  margin-bottom:40px}
h2 {
  font-size:43px;
  line-height:1.1;
  letter-spacing:-2px;
  margin-bottom:0}
.section-heading>p {
  max-width:430px;
  font-size:14px;
  line-height:1.8;
  color:#646158;
  margin:0}
.topics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px}
.topics article {
  border-top:1px solid var(--line);
  padding-top:25px}
.topic-icon {
  font:bold 34px 'Rubik Dirt',sans-serif;
  color:var(--blue);
  display:block;
  margin-bottom:20px}
.topics h3 {
  font-size:21px;
  letter-spacing:-.6px;
  margin-bottom:12px}
.topics p {
  font-size:14px;
  line-height:1.75;
  color:#646158;
  margin-bottom:0}
.program {
  background:#f0ede5}
.schedule article {
  display:flex;
  gap:30px;
  padding:25px 0;
  border-top:1px solid #d4d0c7;
  align-items:flex-start}
.schedule time {
  font:500 24px 'Rubik Dirt',sans-serif;
  min-width:82px;
  padding-top:5px;
  font-variant-numeric:tabular-nums}
.schedule article>div {
  flex:1}
.tag {
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:9px;
  line-height:1.5;
  padding:4px 8px;
  background:#e0e5cf;
  border-radius:3px;
  margin-bottom:10px}
.pink {
  background:#eddae1}
.blue {
  background:#dce2f5}
.yellow {
  background:#f3e6bf}
.schedule h3 {
  font-size:24px;
  letter-spacing:-.7px;
  margin-bottom:8px}
.schedule p {
  font-size:13px;
  line-height:1.7;
  color:#646158;
  max-width:700px;
  margin-bottom:0}
.row-arrow {
  font-size:26px;
  padding-top:24px;
  color:#8b887f}
.program-note {
  font-size:11px;
  color:#646158;
  border-top:1px solid #d4d0c7;
  padding-top:20px;
  margin-bottom:0}
.memory-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px}
.memory-card {
  height:230px;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  overflow:hidden}
.coral {
  background:#f5aa91}
.lime {
  background:#dfe998}
.lavender {
  background:#dcd4ed}
.memory-doodle {
  font:700 72px/.5 'Rubik Dirt',sans-serif;
  text-align:center;
  margin:auto;
  color:#25241f;
  transform:rotate(-8deg)}
.lime .memory-doodle {
  font-size:70px;
  transform:rotate(7deg)}
.lavender .memory-doodle {
  font-size:130px}
.memory-card>span:last-child {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700}
.visit {
  background:var(--orange);
  border-radius:8px;
  padding:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  overflow:hidden}
.visit h2 {
  font-size:40px}
.visit p:not(.eyebrow) {
  font-size:14px;
  line-height:1.9;
  margin:22px 0}
.light {
  background:var(--paper);
  color:var(--ink)}
.visit-star {
  font-size:210px;
  line-height:1;
  color:#25241f;
  animation:spin 50s linear infinite}
footer {
  padding-block:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
footer p {
  font-size:11px;
  line-height:1.8;
  color:#646158;
  margin:0}
footer>a:last-child {
  font-size:12px}
@keyframes bob {
  50% {
  transform:translateY(-9px) rotate(3deg)}
}
@keyframes wave {
  0%,100% {
  transform:rotate(28deg)}
50% {
  transform:rotate(52deg)}
}
@keyframes blink {
  0%,43%,47%,100% {
  transform:scaleY(1)}
45% {
  transform:scaleY(.1)}
}
@keyframes spin {
  to {
  transform:rotate(360deg)}
}

@media(min-width:1400px) {
  .hero {
  padding-block:80px}
.hero-art {
  height:480px}
}

@media(max-width:760px) {
  .wrap {
  width:calc(100% - 36px)}
.header {
  padding-block:22px}
.brand {
  font-size:22px}
nav {
  gap:16px;
  font-size:12px}
nav a:first-child {
  display:none}
.hero {
  grid-template-columns:1fr;
  gap:32px;
  padding-block:36px}
.hero .eyebrow {
  margin-bottom:19px}
h1 {
  font-size:clamp(42px,10.7vw,68px);
  letter-spacing:-2.6px}
.intro {
  font-size:14px;
  line-height:1.75;
  margin-bottom:0}
.event-date {
  margin-block:22px}
.button {
  padding:16px 20px}
.hero-art {
  height:330px;
  border-radius:140px 140px 8px 8px;
  max-width:480px;
  width:100%;
  margin:auto}
.art-label {
  top:25px;
  font-size:8px}
.robot {
  top:79px;
  transform:scale(.85);
  animation:bob-mobile 3s ease-in-out infinite}
.orbit-one {
  top:98px;
  left:26px;
  font-size:20px}
.orbit-two {
  font-size:58px;
  top:60px;
  right:23px}
.art-sticker {
  bottom:51px;
  padding:14px 10px;
  font-size:22px}
.art-caption {
  padding:16px;
  font-size:7px}
.countdown-inner {
  flex-direction:column;
  text-align:center;
  gap:20px}
.countdown-band {
  padding-block:26px}
.countdown-band h2 {
  font-size:28px}
.countdown-band .eyebrow {
  font-size:9px}
.countdown {
  gap:10px;
  justify-content:center;
  width:100%}
.countdown>div {
  min-width:52px}
.countdown strong {
  font-size:40px}
.countdown b {
  font-size:24px}
.countdown div>span {
  font-size:7px}
.ticker {
  font-size:11px;
  padding:15px 0}
.ticker span {
  margin-inline:17px}
.section {
  padding-block:53px}
.section-heading {
  display:block;
  margin-bottom:28px}
h2 {
  font-size:35px;
  letter-spacing:-1.7px}
.section-heading>p {
  margin-top:20px;
  font-size:13px}
.eyebrow {
  font-size:9px;
  margin-bottom:17px}
.topics {
  grid-template-columns:1fr;
  gap:24px}
.topics article {
  padding-top:20px}
.topic-icon {
  float:left;
  width:55px;
  height:85px;
  font-size:29px;
  margin:0}
.topics h3 {
  font-size:20px;
  margin-bottom:8px}
.topics p {
  font-size:13px;
  margin-left:55px}
.schedule article {
  gap:15px;
  padding-block:22px}
.schedule time {
  font-size:17px;
  min-width:49px}
.schedule h3 {
  font-size:20px;
  line-height:1.2}
.schedule p {
  font-size:12px}
.tag {
  font-size:8px;
  letter-spacing:.35px}
.row-arrow {
  display:none}
.program-note {
  font-size:10px;
  line-height:1.7}
.memory-grid {
  gap:10px;
  grid-template-columns:1fr}
.memory-card {
  height:150px;
  position:relative;
  padding:18px}
.memory-doodle {
  font-size:62px}
.lime .memory-doodle {
  font-size:45px}
.lavender .memory-doodle {
  font-size:96px}
.memory-card>span:last-child {
  font-size:9px}
.visit {
  padding:28px 23px;
  position:relative}
.visit h2 {
  font-size:31px;
  position:relative;
  z-index:1}
.visit p:not(.eyebrow) {
  font-size:12px}
.visit-star {
  position:absolute;
  font-size:170px;
  right:-65px;
  top:-55px;
  opacity:.15}
.visit .button {
  font-size:12px}
footer {
  flex-wrap:wrap;
  padding-block:32px}
footer p {
  font-size:10px}
footer>a:last-child {
  font-size:11px}
@keyframes bob-mobile {
  0%,100% {
  transform:scale(.85)}
50% {
  transform:scale(.85) translateY(-8px) rotate(3deg)}
}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
.robot {
  transform:none}
@media(max-width:760px) {
  .robot {
  transform:scale(.85)}
}
}

/* Supplied festival artwork */
.hero {
  grid-template-columns: 1fr;
  gap: 36px;
  padding-top: 32px;
}
.hero-banner {
  grid-row: 1;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #25241f;
  aspect-ratio: 1920 / 700;
}
.hero-banner > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 10px 14px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.hero-copy {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.hero-copy .intro {
  max-width: 620px;
  margin-inline: auto;
}
.hero-copy .event-date {
  justify-content: center;
  text-align: left;
}
.visit-makey {
  width: 230px;
  height: auto;
  object-fit: contain;
  align-self: end;
  margin: -20px 0 -45px 24px;
}
.magazine-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.magazine-link img {
  width: 66px;
  height: auto;
}
.magazine-link > span {
  font-size: 11px;
  line-height: 1.8;
}
.magazine-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
}
@media (max-width: 760px) {
  .hero { gap: 28px; padding-top: 22px; }
  .hero-banner { aspect-ratio: 4 / 3; }
  .hero-banner > :is(img, video) { object-position: 48% center; }
  .banner-label { left: 10px; bottom: 10px; font-size: 7px; padding: 8px; letter-spacing: .6px; }
  .hero-copy { text-align: left; }
  .hero-copy .event-date { justify-content: start; }
  .visit { align-items: start; flex-direction: column; }
  .visit-makey { width: 150px; margin: 20px 0 -28px; }
  .magazine-link { width: 100%; border-top: 1px solid var(--line); padding-top: 20px; }
}

.partners { margin-top: 64px; padding: 48px 0; background: #25241f; color: #faf6ed; }
.partners h2 { font-size: 32px; }
.partners .eyebrow { color: #e2ed8b; margin-bottom: 10px; }
.partner-logos { display: flex; align-items: center; gap: 44px; margin-top: 30px; }
.partner-city { width: 100px; height: auto; flex-shrink: 0; }
.partner-strip { width: min(913px, calc(100% - 144px)); height: auto; }
@media (max-width: 760px) {
  .partners { margin-top: 40px; padding: 32px 0; }
  .partner-logos { flex-direction: column; gap: 28px; align-items: start; }
  .partner-city { width: 80px; }
  .partner-strip { width: 100%; }
}

.exhibitor-map { display: block; position: relative; }
.exhibitor-map img { display: block; width: 100%; height: auto; border-radius: 8px; }
.exhibitor-map > span { display: block; margin-top: 12px; text-align: right; font-size: 12px; font-weight: 700; }
.exhibitor-list { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 13px; }
.exhibitor-list summary { cursor: pointer; font-weight: 700; }
.exhibitor-list ol { columns: 3; padding-left: 24px; line-height: 2; }
.location iframe { display: block; width: 100%; height: 380px; border: 0; border-radius: 8px; background: #eee; }
.location .section-heading > div { font-size: 14px; line-height: 1.8; }
.location + .partners { margin-top: 0; }
@media (max-width: 760px) {
  .exhibitor-list ol { columns: 1; }
  .location .section-heading > div { margin-top: 24px; font-size: 12px; }
  .location iframe { height: 300px; }
}

/* Full-width banner and festival typography */
.hero.wrap { width: 100%; }
.hero-banner { border-radius: 0; aspect-ratio: 1920 / 700; }
.hero-copy { width: min(820px, calc(100% - 48px)); }
.hero h1, h2, h3, .brand { font-weight: 400; }
h1 { letter-spacing: -1.5px; }
h2 { letter-spacing: -.6px; }
h3 { letter-spacing: 0; }
.countdown strong, .schedule time, .date-icon { font-family: 'Roboto', sans-serif; }
@media (max-width: 760px) {
  .hero-copy { width: calc(100% - 36px); }
  .hero-banner { aspect-ratio: 4 / 3; }
  h1 { font-size: clamp(37px, 9.7vw, 60px); letter-spacing: -1px; }
}

/* Display the three retained logos from the supplied strip. */
.partner-city { filter: grayscale(1) invert(1) sepia(.35); }
.partner-strip-frame { width: min(560px, calc(100% - 144px)); overflow: hidden; }
.partner-strip-frame .partner-strip { display: block; width: 194.25532%; max-width: none; margin-left: -65.95745%; height: auto; }
@media (max-width: 760px) {
  .partner-strip-frame { width: 100%; }
}

/* Keep all four partner logos on the same row. */
.partner-logos { flex-direction: row; align-items: center; gap: 28px; }
.partner-city { width: 90px; }
.partner-strip-frame { flex: 1; min-width: 0; max-width: 740px; width: auto; }
@media (max-width: 760px) {
  .partner-logos { flex-direction: row; align-items: center; gap: 16px; }
  .partner-city { width: 60px; }
  .partner-strip-frame { width: auto; }
}

/* Keep the visit illustration alongside the content on phones too. */
.visit > div { flex: 1; min-width: 0; }
.visit-makey { flex-shrink: 0; }
@media (max-width: 760px) {
  .visit { flex-direction: row; align-items: center; gap: 12px; padding: 24px 18px; }
  .visit h2 { font-size: clamp(22px, 5.7vw, 31px); }
  .visit-makey { width: 24%; max-width: 130px; margin: 0; align-self: center; }
  .visit .button { padding: 13px 10px; gap: 10px; font-size: 11px; }
}

.topic-icon { color: var(--orange); }
.topic-icon svg { display: block; width: 34px; height: 34px; }

.ticker > div { padding-left: 18px; }
.ticker .ticker-item { margin: 0; color: inherit; }
@media (max-width: 760px) {
  .ticker > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    width: 100%;
    padding-inline: 18px;
  }
  .ticker .ticker-separator, .ticker .ticker-repeat { display: none; }
}

/* Surprise art direction: a handwritten note in a strawberry-milk envelope. */
body.surprise-open { overflow: hidden; }
.surprise-prompt {
  --surprise-cream: #fff9ec;
  --surprise-pink: #f9e3e9;
  --surprise-berry: #923c56;
  padding: clamp(40px, 7vw, 80px) 20px;
  margin-block: 48px;
  border-radius: 32px;
  background-color: var(--surprise-pink);
  background-image: radial-gradient(#bd71872b 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--surprise-berry);
  text-align: center;
}
.surprise-prompt.surprise-started {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  border-radius: 0;
}
.surprise-card {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
  padding: 32px 24px 40px;
  border: 1px solid #e9c9c2;
  border-radius: 20px;
  background: var(--surprise-cream);
  box-shadow: 0 6px 0 #eac6cd, 0 18px 36px #923c5610;
  animation: surprise-card-in .65s ease-out both;
}
.surprise-tape {
  position: absolute;
  top: -13px;
  left: calc(50% - 44px);
  width: 88px;
  height: 28px;
  transform: rotate(-5deg);
  background: repeating-linear-gradient(90deg, #e8bd7070 0 6px, #efd29980 6px 12px);
  clip-path: polygon(3% 0, 97% 0, 100% 25%, 97% 50%, 100% 75%, 97% 100%, 3% 100%, 0 75%, 3% 50%, 0 25%);
}
.surprise-letter {
  display: block;
  margin: 0 auto 16px;
  transform: rotate(-4deg);
  animation: surprise-letter-float 4s .65s ease-in-out infinite;
}
.surprise-prompt h2 {
  margin: 0 0 28px;
  font-family: 'Mali', 'Comic Sans MS', cursive;
  font-size: clamp(36px, 8vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.5px;
}
.surprise-prompt h2 span { color: #bc4968; font-style: italic; }
.surprise-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid var(--surprise-berry);
  border-radius: 999px;
  background: var(--surprise-berry);
  color: var(--surprise-cream);
  font: 600 16px/1.25 'Mali', 'Comic Sans MS', cursive;
  box-shadow: 0 4px 0 #6f2b41;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation: surprise-button-pulse 3s 1s ease-in-out infinite;
}
.surprise-button > svg { animation: surprise-heart-beat 3s 1s ease-in-out infinite; }
.surprise-button:hover { animation: none; background: #803149; transform: translateY(-2px); box-shadow: 0 6px 0 #6f2b41; }
.surprise-button:focus-visible { animation: none; }
.surprise-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #6f2b41; }
.surprise-button:focus-visible { outline: 3px solid var(--surprise-berry); outline-offset: 6px; }
.surprise-started .surprise-card { animation: surprise-card-away .5s ease forwards; }
.surprise-started .surprise-letter,
.surprise-started .surprise-button,
.surprise-started .surprise-button > svg { animation: none; }
@keyframes surprise-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes surprise-letter-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes surprise-button-pulse {
  0%, 65%, 100% { transform: scale(1); box-shadow: 0 4px 0 #6f2b41, 0 0 0 0 #bc496800; }
  25% { transform: scale(1.035); box-shadow: 0 4px 0 #6f2b41, 0 0 0 7px #bc496818; }
  45% { transform: scale(1); box-shadow: 0 4px 0 #6f2b41, 0 0 0 12px #bc496800; }
}
@keyframes surprise-heart-beat {
  0%, 45%, 100% { transform: scale(1); }
  15%, 32% { transform: scale(1.15); }
  23% { transform: scale(1); }
}
.puppy-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  outline: none;
}
.puppy-stage[hidden] { display: none; }
.puppy-walker { animation: puppy-arrive 3.6s .35s linear both; }
.puppy-question {
  position: absolute;
  z-index: 2;
  text-shadow: 0 0 12px #f9e3e9, 0 2px 4px #f9e3e9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 40px));
  margin: 0;
  color: var(--surprise-berry);
  font: 500 clamp(23px, 5.5vw, 34px)/1.45 'Mali', 'Comic Sans MS', cursive;
  text-wrap: balance;
  animation: puppy-question-appear 3.2s 6.8s cubic-bezier(.25,.1,.25,1) both;
}
@keyframes puppy-question-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-height: 500px) {
  .puppy-stage { padding-bottom: 100px; }
  .puppy-question { font-size: 23px; }
  .puppy-question-break { display: none; }
}
.puppy { display: block; width: clamp(160px, 42vw, 240px); height: auto; overflow: visible; animation: puppy-pop .25s 3.95s forwards; }
.puppy-confetti { position: absolute; left: 50%; top: 50%; z-index: 1; }
.puppy-confetti span {
  position: absolute;
  width: 8px;
  height: 13px;
  margin: -6px -4px;
  border-radius: 2px;
  background: var(--confetti-color);
  animation: puppy-confetti-burst var(--confetti-duration) var(--confetti-delay) linear both;
}
.puppy-confetti span:nth-child(3n) { width: 9px; height: 9px; border-radius: 50%; }
.puppy-gifs { position: absolute; inset: 0; }
.puppy-gifs img {
  position: absolute;
  left: var(--gif-x);
  top: var(--gif-y);
  width: calc(clamp(90px, 20vw, 190px) * var(--gif-scale));
  height: calc(clamp(90px, 20vw, 190px) * var(--gif-scale));
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 6px 8px #923c5620);
  animation: puppy-gif-burst .9s var(--gif-delay) cubic-bezier(.16,1,.3,1) both;
}
@keyframes puppy-gif-burst {
  from { opacity: 0; transform: translate(calc(50vw - var(--gif-x) - 50%), calc(50svh - var(--gif-y) - 50%)) scale(.1); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--gif-angle)); }
}
@keyframes puppy-pop {
  45% { transform: scale(1.12); opacity: 1; }
  to { transform: scale(.3); opacity: 0; }
}
@keyframes puppy-confetti-burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.2); animation-timing-function: cubic-bezier(.12,.65,.25,1); }
  2% { opacity: 1; }
  18% { opacity: 1; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-turn)); animation-timing-function: ease-in; }
  38% { transform: translate(calc(var(--confetti-x) + 12px), calc(var(--confetti-y) + 12svh)) rotate(calc(var(--confetti-turn) + 70deg)); }
  58% { transform: translate(calc(var(--confetti-x) - 14px), calc(var(--confetti-y) + 36svh)) rotate(calc(var(--confetti-turn) + 150deg)); }
  78% { opacity: 1; transform: translate(calc(var(--confetti-x) + 18px), calc(var(--confetti-y) + 66svh)) rotate(calc(var(--confetti-turn) + 240deg)); }
  100% { opacity: 0; transform: translate(var(--confetti-x), calc(var(--confetti-y) + 110svh)) rotate(calc(var(--confetti-turn) + 330deg)); }
}
.puppy-bounce { animation: puppy-bob .45s .35s 8; }
.puppy-leg { transform-box: fill-box; transform-origin: 50% 0; }
.puppy-leg-front { animation: puppy-step .45s .35s 8; }
.puppy-leg-back { animation: puppy-step .45s .35s 8 reverse; }
.puppy-tail { transform-box: fill-box; transform-origin: 100% 90%; animation: puppy-wag .3s .35s 20 alternate; }
@keyframes surprise-card-away {
  to { opacity: 0; transform: translateY(-20px) scale(.94); }
}
@keyframes puppy-arrive {
  from { transform: translateX(calc(-50vw - 150px)); }
  to { transform: translateX(0); }
}
@keyframes puppy-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes puppy-step {
  0%, 50%, 100% { transform: rotate(0); }
  25% { transform: rotate(10deg); }
  75% { transform: translateY(-2px) rotate(-10deg); }
}
@keyframes puppy-wag {
  from { transform: rotate(-12deg); }
  to { transform: rotate(16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-card, .surprise-letter, .surprise-button, .surprise-button > svg { animation: none; }
  .surprise-started .surprise-card { animation: none; visibility: hidden; }
  .puppy-walker, .puppy, .puppy-bounce, .puppy-leg, .puppy-tail, .puppy-question { animation: none; }
  .puppy-confetti, .puppy-gifs { display: none; }
  .surprise-button { transition: none; }
  .surprise-button:hover, .surprise-button:active { transform: none; }
}