:root {
  --night: oklch(0.17 0.085 265);
  --night-soft: oklch(0.29 0.16 272);
  --plum: oklch(0.56 0.24 310);
  --coral: oklch(0.74 0.2 48);
  --coral-dark: oklch(0.5 0.19 25);
  --blush: oklch(0.94 0.04 80);
  --heart: oklch(0.68 0.24 28);
  --lime: oklch(0.9 0.18 100);
  --paper: oklch(0.97 0.012 265);
  --white: oklch(1 0 0);
  --ink: oklch(0.2 0.085 272);
  --muted-dark: oklch(0.79 0.065 255);
  --muted-light: oklch(0.43 0.085 270);
  --focus: oklch(0.83 0.15 90);
  --success: oklch(0.75 0.15 145);
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", sans-serif;
  --font-accent: "Michroma", "Arial Black", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-modal: 50;
  --z-confetti: 60;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; background: var(--night); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--night);
  font-family: var(--font-body);
}

body::before,
body::after {
  position: fixed;
  z-index: -2;
  width: clamp(90px, 22vw, 230px);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
}

body::before {
  top: 8%;
  left: -7%;
  background: var(--plum);
  clip-path: polygon(50% 0, 100% 100%, 0 78%);
  opacity: 0.24;
  transform: rotate(-18deg);
  animation: shape-drift 9s steps(3, end) infinite;
}

body::after {
  right: -9%;
  bottom: 7%;
  background: var(--coral);
  clip-path: polygon(15% 0, 100% 20%, 78% 100%, 0 72%);
  opacity: 0.16;
  transform: rotate(12deg);
  animation: shape-drift-reverse 11s steps(4, end) infinite;
}

button { color: inherit; font-family: var(--font-accent); font-size: inherit; }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.page-shell {
  width: min(100%, 680px);
  min-height: 100svh;
  margin-inline: auto;
  padding: max(18px, env(safe-area-inset-top)) clamp(20px, 6vw, 42px) max(20px, env(safe-area-inset-bottom));
}

.stage {
  display: flex;
  min-height: calc(100svh - 38px);
  flex-direction: column;
  justify-content: center;
  padding-bottom: 32px;
  animation: stage-in 700ms var(--ease-out) both;
}

.stage[hidden] { display: none; }

.stage--security {
  justify-content: center;
}

.security-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: clamp(28px, 7svh, 56px);
}

.security-heading .soft-label { margin: 0; }

.security-heading__icon {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--white);
  background: var(--plum);
  border: 2px solid var(--lime);
  border-radius: 2px;
  font-family: var(--font-accent);
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--coral);
  transform: rotate(-6deg);
}

.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  color: var(--muted-dark);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
}

.quiz-progress__dots {
  display: flex;
  gap: 6px;
}

.quiz-progress__dots i {
  width: 22px;
  height: 4px;
  background: var(--night-soft);
  border-radius: 0;
  transition: background 240ms ease, transform 240ms var(--ease-out);
}

.quiz-progress__dots i.is-active {
  background: var(--lime);
  transform: scaleX(1.12);
}

.stage--security h1 {
  max-width: 11ch;
  font-size: clamp(2.7rem, 11.8vw, 5.1rem);
}

.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(28px, 6svh, 44px);
}

.quiz-answer {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 17px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--coral);
  border-radius: 2px;
  font-weight: 650;
  text-align: left;
  box-shadow: 4px 4px 0 var(--plum);
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms ease, opacity 180ms ease;
}

.quiz-answer::after {
  content: "→";
  color: var(--coral-dark);
}

.quiz-answer:hover,
.quiz-answer:focus-visible {
  box-shadow: 7px 7px 0 var(--lime);
  transform: translate(-3px, -3px);
}

.quiz-answer.is-wrong {
  opacity: 0.42;
  text-decoration: line-through;
  transform: none;
}

.quiz-answer.is-wrong::after {
  content: "×";
}

.quiz-answer.is-correct {
  color: var(--ink);
  background: var(--success);
}

.quiz-answer.is-correct::after {
  color: var(--ink);
  content: "✓";
}

.quiz-feedback {
  min-height: 25px;
  margin: 18px 0 0;
  color: var(--muted-dark);
  font-size: 0.88rem;
  font-weight: 600;
}

.quiz-feedback:empty { display: none; }
.quiz-feedback.is-wrong { color: var(--coral); }
.quiz-feedback.is-correct { color: var(--success); }

.page-shell.is-shaking {
  animation: security-shake 420ms ease-out;
}

.soft-label {
  width: fit-content;
  margin: 0 0 14px;
  color: var(--lime);
  font-family: var(--font-accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

h1, h2 {
  margin: 0;
  font-size: clamp(3rem, 13.2vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-family: var(--font-display);
  text-shadow: 3px 3px 0 var(--plum), -2px -2px 0 var(--coral-dark);
  text-wrap: balance;
  animation: chroma-pop 4.2s steps(1, end) infinite;
}

h1 { max-width: 9ch; }
h2 { max-width: 10ch; }

.lead {
  max-width: 38ch;
  margin: var(--space-lg) 0 0;
  color: var(--muted-dark);
  font-size: clamp(1.05rem, 4.6vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.hero-cow {
  display: grid;
  position: relative;
  isolation: isolate;
  width: clamp(190px, 56vw, 290px);
  place-items: center;
  margin: clamp(24px, 4svh, 32px) auto clamp(32px, 5svh, 44px);
}

.hero-cow::before,
.hero-cow::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hero-cow::before {
  z-index: -1;
  inset: 10% 2% 2% 8%;
  background: var(--plum);
  border: 4px solid var(--lime);
  border-radius: 4px 50% 4px 50%;
  box-shadow: 9px 9px 0 var(--coral);
  animation: cow-backdrop-turn 10s linear infinite;
}

.hero-cow::after {
  z-index: -2;
  top: 30%;
  left: -10%;
  width: 44%;
  aspect-ratio: 1;
  background: var(--coral);
  transform: rotate(24deg);
}

.hero-cow img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(7px 7px 0 var(--night));
  transform-origin: 50% 82%;
  animation: cow-float 4.2s ease-in-out infinite;
}

.hero-cow span {
  position: absolute;
  bottom: 2%;
  padding: 7px 13px;
  color: var(--night);
  background: var(--lime);
  border: 2px solid var(--night);
  border-radius: 2px;
  font-family: var(--font-accent);
  font-size: 0.68rem;
  font-weight: 600;
  box-shadow: 4px 4px 0 var(--coral-dark);
  transform: rotate(-3deg);
}

.primary-button, .yes-button, .no-button {
  min-height: 56px;
  border: 2px solid var(--paper);
  border-radius: 2px;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.primary-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  color: var(--night);
  background: var(--coral);
  box-shadow: 5px 5px 0 var(--plum), 9px 9px 0 var(--lime);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  animation: arcade-shadow 2.8s steps(1, end) infinite;
}

.primary-button:active { box-shadow: 2px 2px 0 var(--plum); transform: translate(5px, 5px); }
.primary-button--dark { color: var(--paper); background: var(--night); box-shadow: 5px 5px 0 var(--plum), 9px 9px 0 var(--coral); }

.microcopy { margin: var(--space-lg) 0 0; color: var(--muted-dark); font-size: 0.82rem; text-align: center; }
.stage--letter { justify-content: flex-start; padding-top: clamp(12px, 4svh, 38px); }

.letter {
  position: relative;
  padding: clamp(26px, 8vw, 48px) clamp(22px, 7vw, 40px);
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--coral);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--plum), 13px 13px 0 var(--lime);
}

.letter::before {
  position: absolute;
  top: -45px;
  right: -28px;
  color: var(--coral);
  opacity: 0.24;
  content: "♥";
  font-size: 10rem;
  line-height: 1;
  transform: rotate(9deg);
}

.letter__date { position: relative; margin-bottom: 24px; color: var(--coral-dark); font-size: 1.05rem; font-weight: 650; }
.letter h2 { position: relative; max-width: 11ch; font-size: clamp(2.5rem, 10.5vw, 4.3rem); }
.letter__body { position: relative; margin-top: 28px; color: var(--ink); font-size: 1.05rem; line-height: 1.58; }
.letter__body p { margin: 0 0 16px; }
.letter__signoff { position: relative; margin: 26px 0 0; color: var(--coral-dark); font-weight: 650; }

.inside-joke {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  margin: 18px 0 24px;
  padding: 14px 16px;
  color: var(--paper);
  background: var(--night-soft);
  border: 2px solid var(--plum);
  border-radius: 2px;
  box-shadow: 5px 5px 0 var(--coral);
}

.inside-joke__gif { width: 62px; height: 62px; object-fit: contain; image-rendering: auto; }
.inside-joke__cow { display: none; font-size: 2rem; }
.inside-joke p { margin: 0; color: var(--muted-dark); font-size: 0.88rem; line-height: 1.4; }
.inside-joke strong { color: var(--paper); }

.stage--question { align-items: center; text-align: center; }
.stage--question .soft-label { margin-inline: auto; }
.stage--question h2 { max-width: 10ch; }
.stage--question .lead { max-width: 33ch; }

.question__pulse { display: grid; width: clamp(86px, 24vw, 126px); aspect-ratio: 1; place-items: center; margin-bottom: 30px; background: var(--plum); border: 3px solid var(--lime); box-shadow: 7px 7px 0 var(--coral); transform: rotate(3deg); }
.question__pulse img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.question__pulse span { display: none; grid-area: 1 / 1; color: var(--heart); font-size: 6rem; line-height: 1; }
.answer-arena { position: relative; width: 100%; min-height: clamp(210px, 30svh, 260px); margin-top: 32px; }

.yes-button, .no-button { position: absolute; min-width: 148px; padding: 15px 22px; }
.yes-button { top: 0; left: 50%; color: var(--night); background: var(--lime); box-shadow: 5px 5px 0 var(--plum), 9px 9px 0 var(--coral); transform: translateX(-50%) scale(var(--yes-scale, 1)); transform-origin: top center; transition: transform 260ms var(--ease-out); animation: arcade-shadow 2.8s steps(1, end) infinite; }
.no-button { bottom: 12px; left: 50%; color: var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--coral-dark); transform: translateX(-50%); transition: left 180ms var(--ease-out), top 180ms var(--ease-out), transform 180ms var(--ease-out); touch-action: none; }
.no-button.is-running { bottom: auto; transform: none; }
.no-button[hidden] { display: none; }
.no-popup { position: absolute; z-index: 2; max-width: min(230px, 75vw); color: var(--heart); font-family: var(--font-accent); font-size: clamp(0.72rem, 3.2vw, 0.9rem); font-weight: 700; line-height: 1.35; pointer-events: none; text-align: center; animation: no-popup-out 1400ms var(--ease-out) forwards; }
.no-reaction { min-height: 22px; margin: -4px 0 0; color: var(--muted-dark); font-size: 0.84rem; }

.ambient { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ambient span { position: absolute; color: var(--heart); opacity: 0.18; font-size: clamp(4rem, 20vw, 10rem); animation: ambient-heart-spin 18s linear infinite; }
.ambient span:nth-child(1) { top: 8%; left: -6%; animation-duration: 22s; }
.ambient span:nth-child(2) { top: 42%; right: -9%; animation-direction: reverse; }
.ambient span:nth-child(3) { bottom: 5%; left: 12%; font-size: 3rem; animation-duration: 13s; }
.ambient span:nth-child(4) { top: 20%; right: 16%; font-size: 2rem; animation-duration: 9s; animation-direction: reverse; }

.loader {
  display: grid;
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  place-content: center;
  justify-items: center;
  padding: 24px;
  background: var(--night);
  transition: opacity 500ms ease, visibility 500ms ease;
}

.loader::before,
.loader::after {
  position: absolute;
  width: clamp(100px, 28vw, 260px);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
}

.loader::before {
  top: -7%;
  left: -8%;
  background: var(--plum);
  clip-path: polygon(50% 0, 100% 100%, 0 75%);
  animation: security-shape 6s steps(4, end) infinite;
}

.loader::after {
  right: -8%;
  bottom: -8%;
  background: var(--coral);
  clip-path: polygon(12% 0, 100% 18%, 78% 100%, 0 70%);
  animation: security-shape 7s steps(5, end) reverse infinite;
}

.loader.is-finished { visibility: hidden; opacity: 0; }
.security-lock { display: grid; position: relative; z-index: 1; width: min(62vw, 220px); aspect-ratio: 1; place-items: center; }
.security-lock__orbit { position: absolute; width: 100%; height: 100%; overflow: visible; animation: security-text-spin 7s linear infinite; }
.security-lock__orbit text { fill: var(--lime); font-family: var(--font-accent); font-size: 10px; letter-spacing: 1.25px; }
.security-lock__marker { position: absolute; color: var(--coral); font-family: var(--font-accent); font-size: 1.2rem; font-weight: 700; animation: marker-flash 1.1s steps(1, end) infinite; }
.security-lock__marker--one { top: 13%; right: 15%; }
.security-lock__marker--two { bottom: 16%; left: 13%; color: var(--plum); animation-delay: 550ms; }
.security-lock__icon { position: relative; width: 88px; height: 102px; }
.security-lock__shackle { position: absolute; top: 0; left: 18px; width: 52px; height: 48px; border: 8px solid var(--coral); border-bottom: 0; border-radius: 26px 26px 0 0; transform-origin: bottom right; animation: lock-open 2.6s var(--ease-out) both; }
.security-lock__body { display: grid; position: absolute; bottom: 0; left: 0; width: 88px; height: 66px; place-items: center; background: var(--plum); border: 4px solid var(--lime); box-shadow: 7px 7px 0 var(--coral); }
.security-lock__body i { width: 12px; height: 25px; background: var(--lime); clip-path: polygon(50% 0, 100% 36%, 76% 55%, 76% 100%, 24% 100%, 24% 55%, 0 36%); }
.loader__for { position: relative; z-index: 1; margin: 22px 0 8px; color: var(--lime); font-family: var(--font-accent); font-size: clamp(0.78rem, 3.2vw, 0.94rem); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.loader__explanation { position: relative; z-index: 1; max-width: 34ch; margin: 0; color: var(--paper); font-size: 1rem; line-height: 1.45; text-align: center; text-wrap: pretty; }
.loader__status { position: relative; z-index: 1; min-height: 20px; margin: 15px 0 18px; color: var(--coral); font-family: var(--font-accent); font-size: 0.63rem; letter-spacing: 0.03em; }
.loader__line { position: relative; z-index: 1; width: min(62vw, 230px); height: 5px; overflow: hidden; background: var(--night-soft); }
.loader__line span { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: left; animation: load-line 2.6s steps(8, end) both; }

.celebration {
  width: min(calc(100% - 30px), 520px);
  padding: clamp(28px, 8vw, 46px);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--coral);
  border-radius: 2px;
  text-align: left;
  box-shadow: 9px 9px 0 var(--plum), 15px 15px 0 var(--lime);
}

.celebration::backdrop { background: oklch(0.1 0.06 292 / 0.9); }
.celebration[open] { animation: dialog-in 520ms var(--ease-out) both; }
.celebration h2 { max-width: 11ch; font-size: clamp(2.5rem, 10vw, 4.5rem); }
.celebration > p:not(.soft-label) { color: var(--muted-light); font-size: 1.1rem; line-height: 1.5; }
.celebration__heart { margin-bottom: 20px; color: var(--heart); font-size: 4rem; line-height: 0.8; animation: tiny-heart-spin 3s linear infinite; }
.celebration__aside { display: flex; align-items: center; gap: 8px; margin: 22px 0; font-size: 1.8rem; }
.celebration__aside img { width: 72px; height: 61px; object-fit: contain; }
.celebration__aside span { color: var(--coral-dark); font-size: 0.85rem; font-weight: 650; }

.confetti-layer { position: fixed; z-index: var(--z-confetti); inset: 0; overflow: hidden; pointer-events: none; }
.confetti { position: absolute; top: -12vh; width: 8px; height: 15px; background: var(--confetti-color); animation: confetti-fall var(--fall-time) linear var(--delay) forwards; }

@keyframes stage-in { from { opacity: 0; transform: translateY(22px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes security-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-0.35deg); } 40% { transform: translateX(7px) rotate(0.3deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes tiny-heart-spin { to { transform: rotate(360deg); } }
@keyframes ambient-heart-spin { to { transform: rotate(360deg); } }
@keyframes shape-drift { 50% { transform: translate(18px, 12px) rotate(8deg); } }
@keyframes shape-drift-reverse { 50% { transform: translate(-16px, -10px) rotate(-12deg); } }
@keyframes security-text-spin { to { transform: rotate(360deg); } }
@keyframes security-shape { 50% { transform: translate(18px, 10px) rotate(20deg); } }
@keyframes marker-flash { 0%, 49% { opacity: 1; transform: scale(1) rotate(0); } 50%, 100% { opacity: 0.25; transform: scale(0.7) rotate(45deg); } }
@keyframes lock-open { 0%, 62% { transform: translate(0, 0) rotate(0); } 78%, 100% { transform: translate(7px, -9px) rotate(24deg); } }
@keyframes chroma-pop { 0%, 74%, 100% { text-shadow: 3px 3px 0 var(--plum), -2px -2px 0 var(--coral-dark); } 75%, 78% { text-shadow: -3px 2px 0 var(--coral), 3px -2px 0 var(--plum); } }
@keyframes arcade-shadow { 0%, 49%, 100% { box-shadow: 5px 5px 0 var(--plum), 9px 9px 0 var(--lime); } 50%, 54% { box-shadow: 5px 5px 0 var(--lime), 9px 9px 0 var(--plum); } }
@keyframes cow-backdrop-turn { to { transform: rotate(360deg); } }
@keyframes cow-float { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-7px) rotate(0.6deg); } }
@keyframes load-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes no-popup-out { 0% { opacity: 0; transform: translate(-50%, -35%) rotate(var(--popup-tilt)) scale(0.8); } 12% { opacity: 1; transform: translate(-50%, -70%) rotate(var(--popup-tilt)) scale(1); } 72% { opacity: 1; transform: translate(-50%, -92%) rotate(var(--popup-tilt)) scale(1); } 100% { opacity: 0; transform: translate(-50%, -150%) rotate(var(--popup-tilt)) scale(1); } }
@keyframes confetti-fall { to { transform: translate3d(var(--drift), 115vh, 0) rotate(720deg); } }

@media (min-width: 700px) {
  .page-shell { box-shadow: -4px 0 0 var(--plum), 4px 0 0 var(--coral); }
  .stage { min-height: 760px; }
  .stage--hero { text-align: center; align-items: center; }
  .stage--hero h1, .stage--hero .lead, .stage--hero .soft-label { margin-inline: auto; }
  .primary-button { width: fit-content; min-width: 300px; align-self: center; }
}

@media (max-height: 700px) and (max-width: 699px) {
  .hero-cow { width: 170px; margin: var(--space-sm) auto var(--space-lg); }
  h1, h2 { font-size: clamp(2.7rem, 11.5vw, 3.4rem); }
}

@media (max-width: 420px) {
  h1, h2 { line-height: 1.04; }
  .stage--hero .lead { margin-top: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .question__pulse img, .inside-joke__gif { display: none; }
  .question__pulse span, .inside-joke__cow { display: block; }
}