:root {
  --ink: #30241d;
  --muted: #6b5648;
  --paper: #fff2d9;
  --paper-warm: #f2c99f;
  --ground: #e69b6f;
  --accent: #b6422f;
  --coral: #d75d43;
  --sun: #e5a735;
  --sea: #24677a;
  --aqua: #3ac8d5;
  --pink: #f28fb0;
  --peach: #f2b17f;
  --shadow: 0 13px 28px rgba(83, 43, 23, .24);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #b76d51;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

button:focus-visible {
  outline: 3px solid #1f5e72;
  outline-offset: 4px;
}

.audio-toggle {
  position: fixed;
  z-index: 20;
  top: max(72px, calc(env(safe-area-inset-top) + 58px));
  left: max(14px, calc(50% - 226px));
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fffaf0;
  background: var(--sea);
  box-shadow: 3px 4px 0 rgba(49, 36, 29, .32);
  font: 700 1.25rem/1 var(--sans);
  cursor: pointer;
  transform: rotate(-4deg);
}
.audio-toggle[hidden] { display: none; }
.audio-toggle.is-muted { color: var(--ink); background: #f6c991; }
.audio-toggle:active { transform: translateY(2px) rotate(-4deg); }

.scrapbook {
  position: relative;
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,248,226,.38) 0 1px, transparent 1.6px) 0 0/12px 14px,
    linear-gradient(104deg, rgba(255,226,188,.24), transparent 32%),
    var(--ground);
  box-shadow: 0 0 45px rgba(35, 31, 25, .2);
}

.screen {
  position: relative;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  animation: page-in .45s ease both;
}

.collage { position: absolute; inset: 0; pointer-events: none; }

.photo {
  position: absolute;
  margin: 0;
  padding: 4px;
  background: #f7dab4;
  filter: drop-shadow(0 5px 6px rgba(70, 35, 19, .22));
  animation: settle .55s cubic-bezier(.2,.72,.25,1) both;
  animation-delay: var(--delay, 0ms);
}

.photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--position, center);
  clip-path: polygon(1% 2%, 16% 0, 31% 2%, 48% .4%, 66% 2%, 83% .5%, 99% 2%, 98.5% 19%, 100% 38%, 98% 56%, 100% 76%, 98% 99%, 79% 98%, 60% 100%, 41% 98%, 23% 100%, 1% 98%, 2% 78%, 0 61%, 2% 42%, 0 22%);
}

.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f7dab4;
  clip-path: polygon(0 2%, 14% 0, 30% 2%, 47% 0, 64% 2%, 83% 0, 100% 2%, 98% 20%, 100% 39%, 98% 57%, 100% 77%, 98% 100%, 80% 98%, 59% 100%, 42% 98%, 22% 100%, 0 98%, 2% 78%, 0 61%, 2% 42%, 0 21%);
}

.photo-torn-soft img { clip-path: polygon(2% 1%, 27% 2%, 51% 0, 75% 2%, 99% 1%, 98% 25%, 100% 51%, 98% 76%, 99% 99%, 73% 98%, 49% 100%, 25% 98%, 1% 99%, 2% 74%, 0 50%, 2% 25%); }
.photo-small { width: 35%; height: 18%; }
.photo-medium { width: 58%; height: 27%; }
.photo-large { width: 76%; height: 38%; }
.rotate-left { transform: rotate(-4deg); }
.rotate-right { transform: rotate(3.5deg); }

.tape::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 62px;
  height: 20px;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(244, 184, 93, .78);
  box-shadow: inset 0 0 0 1px rgba(120, 98, 63, .08);
  clip-path: polygon(2% 7%, 99% 0, 97% 91%, 2% 100%, 4% 54%);
}

.paper {
  position: relative;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(99,78,43,.025) 50%, transparent 50%) 0 0/5px 100%,
    var(--paper);
  box-shadow: var(--shadow);
  clip-path: polygon(1% 1.5%, 18% 0, 37% 1.2%, 56% 0, 76% 1.3%, 99% .3%, 98.6% 22%, 100% 45%, 98.8% 67%, 100% 99%, 78% 98.5%, 58% 100%, 38% 98.8%, 19% 100%, .5% 98%, 1.2% 76%, 0 52%, 1.4% 27%);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; }
h1 { margin: 0; font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: .97; }
h2 { margin: 0; font-size: 1.95rem; line-height: 1.03; }
p { line-height: 1.55; }

.button {
  min-height: 50px;
  border: 0;
  padding: 13px 20px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .2s ease, background .2s ease;
}
.button:active { transform: translateY(2px) rotate(.5deg); }
.button-dark { color: #fffaf0; background: var(--coral); box-shadow: 4px 5px 0 #742f27; clip-path: polygon(1% 5%, 99% 0, 97% 95%, 2% 100%); }
.button-quiet { color: var(--ink); background: #f6c991; box-shadow: 3px 4px 0 rgba(107,65,35,.28); clip-path: polygon(2% 0, 99% 4%, 97% 100%, 0 96%); }

.intro {
  justify-content: center;
  background:
    linear-gradient(100deg, transparent 0 47%, rgba(39,81,86,.04) 49%, transparent 51%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.7) 0 1px, transparent 1.5px) 0 0/14px 16px,
    #67d6df;
}
.quiz .collage::after,
.result .collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28,25,20,.03), rgba(28,25,20,.16));
}
.birthday-stage { position: absolute; inset: 0; overflow: hidden; }
.birthday-stage::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 17%;
  height: 1px;
  background: rgba(130,55,40,.32);
  transform: rotate(-4deg);
}
.birthday-composition { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: center; }
.birthday-gif-card {
  position: relative;
  z-index: 1;
  width: min(78vw, 292px);
  aspect-ratio: 1;
  margin: 0;
  padding: 7px;
  background: #fff3d6;
  box-shadow: 8px 9px 0 rgba(42,111,119,.3), 0 18px 34px rgba(63,63,40,.18);
  transform: rotate(2deg);
  overflow: hidden;
  clip-path: polygon(1% 2%, 22% 0, 43% 2%, 64% 0, 99% 2%, 98% 27%, 100% 52%, 98% 76%, 99% 99%, 72% 98%, 48% 100%, 23% 98%, 1% 100%, 2% 74%, 0 49%, 2% 24%);
  animation: gift-photo-in .65s cubic-bezier(.2,.75,.25,1) both;
}
.card-tape {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 82px;
  height: 24px;
  background: rgba(239,185,79,.82);
  transform: translateX(-50%) rotate(1.5deg);
  clip-path: polygon(1% 7%, 99% 0, 96% 92%, 3% 100%);
}
.birthday-gif { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: cover; }
.birthday-message {
  position: relative;
  z-index: 3;
  width: 91%;
  margin-top: -18px;
  padding: 24px 52px 22px 22px;
  background: #ffd5df;
  box-shadow: 7px 8px 0 rgba(117,49,60,.25);
  transform: rotate(-1.4deg);
  animation: gift-message-in .55s .2s cubic-bezier(.2,.75,.25,1) both;
}
.birthday-message h1 { font-size: clamp(1.9rem, 8.4vw, 2.55rem); line-height: .94; }
.birthday-message h1 span { color: #b83d45; white-space: nowrap; }
.paper-heart {
  position: absolute;
  right: 17px;
  bottom: 15px;
  color: #d94c54;
  font: normal 2.5rem/1 var(--serif);
  transform: rotate(9deg);
  text-shadow: 3px 3px 0 rgba(126,44,48,.16);
}
.gift-tag { position: relative; z-index: 4; width: 78%; margin-top: -3px; transform: rotate(.8deg); animation: gift-tag-in .45s .38s ease both; }
.ribbon { position: absolute; top: 16%; width: 44%; height: 10px; background: #b74635; opacity: .86; box-shadow: 0 3px 0 rgba(99,42,30,.15); }
.ribbon-left { left: -5%; transform: rotate(-8deg); }
.ribbon-right { right: -5%; transform: rotate(2deg); }
.confetti {
  position: absolute;
  width: 7px;
  height: 20px;
  background: var(--confetti-color, #9b4a38);
  clip-path: polygon(8% 0, 100% 7%, 90% 100%, 0 91%);
  transform: rotate(var(--confetti-angle, 10deg));
  animation: confetti-drift 3.8s ease-in-out infinite alternate;
  animation-delay: var(--confetti-delay, 0s);
}
.confetti-1 { left: 8%; top: 8%; --confetti-angle: 24deg; --confetti-delay: -.8s; }
.confetti-2 { left: 25%; top: 11%; width: 18px; height: 6px; --confetti-color: #315f70; --confetti-angle: -12deg; }
.confetti-3 { right: 19%; top: 7%; --confetti-color: #c18a46; --confetti-angle: 42deg; --confetti-delay: -1.9s; }
.confetti-4 { right: 5%; top: 22%; width: 16px; height: 6px; --confetti-color: #764536; --confetti-angle: -22deg; }
.confetti-5 { left: 5%; top: 35%; --confetti-color: #c18a46; --confetti-angle: -30deg; --confetti-delay: -2.4s; }
.confetti-6 { right: 7%; top: 43%; --confetti-color: #315f70; --confetti-angle: 17deg; }
.confetti-7 { left: 12%; bottom: 22%; width: 17px; height: 6px; --confetti-color: #315f70; --confetti-angle: 12deg; }
.confetti-8 { right: 14%; bottom: 18%; --confetti-color: #c18a46; --confetti-angle: -16deg; --confetti-delay: -1.1s; }
.confetti-9 { left: 31%; bottom: 9%; --confetti-angle: 36deg; }
.confetti-10 { right: 34%; bottom: 7%; width: 17px; height: 6px; --confetti-color: #315f70; --confetti-angle: -9deg; }
.confetti-11 { left: 2%; bottom: 42%; --confetti-angle: 18deg; --confetti-delay: -1.7s; }
.confetti-12 { right: 3%; bottom: 38%; width: 16px; height: 6px; --confetti-color: #9b4a38; --confetti-angle: 31deg; }
.confetti-13 { left: 43%; top: 4%; width: 15px; height: 5px; --confetti-color: #315f70; --confetti-angle: 5deg; }
.confetti-14 { right: 42%; bottom: 3%; --confetti-color: #c18a46; --confetti-angle: -34deg; }
.confetti-15 { left: 16%; top: 24%; width: 14px; height: 5px; --confetti-angle: -18deg; }
.confetti-16 { right: 21%; top: 29%; --confetti-color: #315f70; --confetti-angle: 28deg; --confetti-delay: -2.1s; }
.intro.is-opening .birthday-gif-card { animation: unwrap-left .52s cubic-bezier(.55,.05,.75,.35) both; }
.intro.is-opening .birthday-message { animation: unwrap-right .52s cubic-bezier(.55,.05,.75,.35) both; }
.intro.is-opening .gift-tag { animation: fade-out .25s ease both; }
.intro.is-opening .birthday-stage { animation: fade-out .42s .08s ease both; }

.quiz { justify-content: flex-end; }
.quiz-topbar { position: absolute; z-index: 8; top: max(17px, env(safe-area-inset-top)); left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; }
.back-button { border: 0; background: #ffd99f; color: var(--ink); padding: 9px 13px; cursor: pointer; box-shadow: 3px 4px 0 rgba(84,49,29,.27); clip-path: polygon(2% 2%, 98% 0, 100% 94%, 0 100%); transform: rotate(-1deg); }
.progress { display: flex; gap: 7px; padding: 9px 11px; background: #ffe9bc; box-shadow: 3px 4px 0 rgba(84,49,29,.22); clip-path: polygon(2% 0, 99% 5%, 97% 98%, 0 94%); transform: rotate(1deg); }
.progress i { width: 8px; height: 8px; display: block; border: 1.5px solid #7c3b2e; border-radius: 48% 52% 45% 55%; transform: rotate(20deg); }
.progress i:nth-child(even) { transform: rotate(-18deg) scale(.9); }
.progress i.active { background: var(--coral); }

.question-wrap { z-index: 5; margin-bottom: 1vh; position: relative; }
.question-wrap::before {
  content: var(--question-number);
  position: absolute;
  z-index: -1;
  right: -3px;
  top: -58px;
  color: #ffd063;
  font: 600 6.7rem/.8 var(--serif);
  text-shadow: 4px 5px 0 rgba(108,45,32,.34);
  transform: rotate(7deg);
}
.question-paper { padding: 20px 20px 17px; margin: 0 4px 10px; transform: rotate(var(--paper-angle, -.5deg)); box-shadow: 6px 7px 0 rgba(108,45,32,.28), var(--shadow); }
.layout-a .question-paper { background: #fff0ca; }
.layout-b .question-paper { background: #ffd0dc; }
.layout-c .question-paper { background: #bfeef0; }
.layout-d .question-paper { background: #ffe38c; }
.question-paper h1 { font-size: clamp(1.78rem, 7.7vw, 2.35rem); line-height: 1.02; }
.answers { display: grid; gap: 9px; padding-inline: 2px; }
.answer {
  position: relative;
  min-height: 58px;
  border: 0;
  padding: 13px 17px 13px 41px;
  color: var(--ink);
  text-align: left;
  line-height: 1.3;
  background: #ffdaa2;
  box-shadow: 4px 5px 0 rgba(91,52,31,.25), 0 7px 14px rgba(70,35,20,.12);
  cursor: pointer;
  clip-path: polygon(1% 4%, 25% 1%, 49% 3%, 74% 0, 99% 4%, 98% 96%, 75% 99%, 51% 97%, 26% 100%, 1% 96%);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.answer:nth-child(1) { transform: rotate(-.7deg); background: #ffd395; }
.answer:nth-child(2) { transform: rotate(.65deg); background: #c3eef0; }
.answer:nth-child(3) { transform: rotate(-.35deg); background: #f7b3ca; }
.answer::before { content: attr(data-letter); position: absolute; left: 13px; top: 11px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 46% 54% 49% 51%; background: var(--coral); color: #fff7e8; font-family: var(--serif); font-size: .95rem; transform: rotate(-5deg); }
.answer:hover { transform: translateY(-2px) rotate(0); }
.answer.selected { color: #fffaf0; background: var(--sea); transform: translateY(-3px) rotate(.5deg); box-shadow: 5px 7px 0 #173e49; }
.answer.selected::before { color: #6b3026; background: #ffd56e; }
.answer.selected::after { content: "SCELTA FATTA"; position: absolute; right: 10px; top: -9px; padding: 3px 7px; color: #853426; background: #ffd56e; font-size: .56rem; font-weight: 600; letter-spacing: .11em; transform: rotate(3deg); box-shadow: 2px 2px 0 rgba(74,37,23,.18); }
.answer:disabled { cursor: default; }

.quiz .p3::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: -8px;
  left: 38%;
  width: 55px;
  height: 18px;
  background: rgba(246,180,76,.78);
  transform: rotate(-4deg);
  clip-path: polygon(2% 5%, 99% 0, 96% 94%, 0 100%);
}

.quiz .photo { opacity: 1; }
.quiz .p1 { top: -2%; left: -5%; width: 65%; height: 25%; transform: rotate(-1.2deg); z-index: 1; }
.quiz .p2 { top: -2%; right: -5%; width: 45%; height: 27%; transform: rotate(1.6deg); z-index: 2; }
.quiz .p3 { top: 21%; left: -5%; width: 48%; height: 29%; transform: rotate(1.3deg); z-index: 3; }
.quiz .p4 { top: 20%; right: -5%; width: 64%; height: 31%; transform: rotate(-1.1deg); z-index: 2; }
.quiz .p5 { bottom: -3%; left: -7%; width: 62%; height: 56%; transform: rotate(-1.5deg); z-index: 1; }
.quiz .p6 { bottom: -4%; right: -7%; width: 57%; height: 58%; transform: rotate(1.7deg); z-index: 2; }
.layout-b .p1, .layout-d .p1 { width: 48%; height: 28%; }
.layout-b .p2, .layout-d .p2 { width: 64%; height: 25%; }
.layout-b .p3 { width: 58%; }
.layout-c .p4 { width: 54%; }
.layout-d .p5 { width: 47%; }
.layout-b .p5 { left: -4%; width: 54%; transform: rotate(1.4deg); }
.layout-b .p6 { right: -5%; width: 65%; transform: rotate(-1.2deg); }
.layout-c .p5 { left: -5%; width: 68%; transform: rotate(-1deg); }
.layout-c .p6 { right: -7%; width: 45%; transform: rotate(1.8deg); }
.layout-d .p5 { left: -6%; width: 49%; transform: rotate(1.5deg); }
.layout-d .p6 { right: -5%; width: 66%; transform: rotate(-1.1deg); }

.transition { align-items: center; justify-content: flex-end; gap: 18px; background: #57d2db; }
.transition .paper { width: 82%; padding: 28px; margin-bottom: 9vh; transform: rotate(-1.5deg); background: #fff1c9; box-shadow: 8px 9px 0 rgba(126,48,35,.3); }
.transition h1 { font-size: 2.7rem; }
.transition-gif { position: absolute; top: 8%; left: 10%; width: 80%; aspect-ratio: 1; margin: 0; padding: 7px; background: #fff3d5; box-shadow: 8px 9px 0 rgba(104,48,32,.25); transform: rotate(2deg); clip-path: polygon(1% 2%, 24% 0, 49% 2%, 73% 0, 99% 2%, 98% 27%, 100% 51%, 98% 75%, 99% 99%, 74% 98%, 49% 100%, 24% 98%, 1% 100%, 2% 74%, 0 50%, 2% 25%); animation: transition-gif-in .7s .15s cubic-bezier(.2,.75,.25,1) both; }
.transition-gif img { width: 100%; height: 100%; display: block; object-fit: cover; }

.result { justify-content: flex-end; }
.result { background: #68d4dc; }
.result .r1 { top: 34%; left: -6%; width: 45%; height: 19%; transform: rotate(-4deg); z-index: 2; opacity: .9; }
.result .r2 { top: 36%; right: -6%; width: 43%; height: 18%; transform: rotate(4deg); z-index: 1; opacity: .9; }
.result-gif {
  position: absolute;
  z-index: 4;
  top: 3%;
  left: 50%;
  width: min(72%, 280px);
  aspect-ratio: 1;
  margin: 0;
  padding: 5px;
  background: #fff4dd;
  box-shadow: 6px 7px 0 rgba(93,44,30,.28);
  transform: translateX(-50%) rotate(2deg);
  clip-path: polygon(2% 1%, 25% 2%, 49% 0, 74% 2%, 99% 1%, 98% 26%, 100% 51%, 98% 76%, 99% 99%, 73% 98%, 48% 100%, 24% 98%, 1% 99%, 2% 74%, 0 49%, 2% 25%);
  animation: result-gif-in .65s .18s cubic-bezier(.2,.75,.25,1) both;
}
.result-gif::after { content: ""; position: absolute; width: 70px; height: 21px; top: -7px; left: calc(50% - 35px); background: rgba(246,180,76,.8); transform: rotate(-4deg); }
.result-gif img { width: 100%; height: 100%; display: block; object-fit: cover; }
.result-paper { padding: 26px 23px 23px; margin-top: 48vh; background: #fff0cf; box-shadow: 7px 8px 0 rgba(105,45,31,.3), var(--shadow); }
.result-travel .result-paper { background: #ffe5a8; }
.result-spa .result-paper { background: #ffe2ec; }
.result-sailing .result-paper { background: #c7f0f1; }
.result-travel .result-gif { background: #ffd66e; }
.result-spa .result-gif { background: #fff; }
.result-sailing .result-gif { background: #4ed7df; }
.result-paper h1 { font-size: clamp(2.45rem, 10vw, 3.35rem); line-height: .92; }
.result-copy { margin: 15px 0 20px; color: #56382d; font-size: 1.12rem; font-weight: 500; line-height: 1.42; }
.result-actions { display: grid; gap: 9px; }

.details-dialog { width: min(calc(100% - 32px), 420px); padding: 0; border: 0; background: transparent; overflow: visible; }
.details-dialog::backdrop { background: rgba(30,28,23,.65); backdrop-filter: blur(2px); }
.dialog-paper { position: relative; padding: 32px 25px 25px; background: #fff0cf; box-shadow: 8px 9px 0 rgba(112,47,32,.32), 0 20px 60px rgba(0,0,0,.28); clip-path: polygon(1% 1%, 26% 0, 50% 1%, 75% 0, 99% 2%, 98% 98%, 73% 100%, 48% 98%, 24% 100%, 0 98%); }
.dialog-paper h2 { font-size: 2.1rem; }
.dialog-paper p:not(.eyebrow) { color: var(--muted); }
.dialog-close { position: absolute; top: 9px; right: 13px; border: 0; background: transparent; font-family: var(--serif); font-size: 2rem; cursor: pointer; }
.dialog-done { width: 100%; margin-top: 8px; }

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; transform: translateY(-12px) rotate(0); } }
@keyframes add-piece { from { opacity: 0; transform: translate(30px,-24px) rotate(9deg) scale(1.04); } to { opacity: 1; transform: rotate(3.5deg); } }
@keyframes gift-photo-in { from { opacity: 0; transform: translate(-18px,-12px) rotate(-3deg); } to { opacity: 1; transform: rotate(2deg); } }
@keyframes gift-message-in { from { opacity: 0; transform: translate(22px,14px) rotate(3deg); } to { opacity: 1; transform: rotate(-1.4deg); } }
@keyframes gift-tag-in { from { opacity: 0; transform: translateY(8px) rotate(-2deg); } to { opacity: 1; transform: rotate(.8deg); } }
@keyframes unwrap-left { to { opacity: 0; transform: translate(-110px,-28px) rotate(-9deg); } }
@keyframes unwrap-right { to { opacity: 0; transform: translate(110px,25px) rotate(7deg); } }
@keyframes confetti-drift { from { translate: 0 -3px; } to { translate: 2px 5px; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes result-gif-in { from { opacity: 0; transform: translate(-45%,-18px) rotate(8deg) scale(.92); } to { opacity: 1; transform: translateX(-50%) rotate(2deg); } }
@keyframes transition-gif-in { from { opacity: 0; transform: translate(20px,-18px) rotate(8deg) scale(.92); } to { opacity: 1; transform: rotate(2deg); } }

@media (max-height: 690px) {
  .screen { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .question-paper { padding: 15px 18px 13px; }
  .question-paper h1 { font-size: 1.55rem; }
  .answers { gap: 6px; }
  .answer { min-height: 50px; padding-block: 10px; font-size: .9rem; }
  .answer::before { top: 12px; }
  .quiz .p5, .quiz .p6 { height: 48%; }
  .birthday-gif-card { width: 210px; }
  .birthday-message { padding-block: 18px; }
  .birthday-message h1 { font-size: 1.75rem; }
}

@media (max-height: 590px) {
  .screen { min-height: 590px; }
  .scrapbook { overflow-y: auto; }
}

@media (min-width: 700px) {
  body { padding: 28px 0; background: #aaa398; }
  .scrapbook, .screen { min-height: min(860px, calc(100dvh - 56px)); }
  .scrapbook { border: 10px solid rgba(238,233,220,.5); }
  .screen { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}