:root {
  --paper: #fffaf0;
  --paper-deep: #f5e6d2;
  --ink: #3f2728;
  --muted: #755f5e;
  --coral: #ef665a;
  --coral-dark: #c94745;
  --pink: #f5b8bf;
  --lavender: #b9a6d9;
  --sky: #a9d3e9;
  --gold: #d5a338;
  --cream: #fbf2e5;
  --shadow: 0 22px 60px rgba(91, 55, 43, 0.2);
  --soft-shadow: 0 12px 28px rgba(91, 55, 43, 0.18);
  color-scheme: light;
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #f2e5d5;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(245, 184, 191, 0.7), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(169, 211, 233, 0.7), transparent 30rem),
    radial-gradient(circle at 70% 92%, rgba(185, 166, 217, 0.48), transparent 27rem),
    linear-gradient(135deg, #f8efe3, #f4e1d8 48%, #edf2ed);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.38;
  background-image:
    repeating-linear-gradient(96deg, transparent 0 5px, rgba(93, 62, 46, 0.035) 5px 6px),
    repeating-linear-gradient(3deg, transparent 0 8px, rgba(255, 255, 255, 0.4) 8px 9px);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
}

.login-screen,
.slideshow {
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.login-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.paper-sheet {
  position: relative;
  width: min(100%, 72rem);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.46), transparent 44%),
    var(--paper);
  box-shadow: var(--shadow);
  clip-path: polygon(
    0.3% 1%, 3% 0.2%, 7% 0.8%, 12% 0.1%, 18% 0.7%, 25% 0.1%, 31% 0.8%,
    39% 0.2%, 46% 0.7%, 53% 0.1%, 61% 0.8%, 68% 0.2%, 76% 0.7%, 83% 0.1%,
    91% 0.8%, 99.6% 0.2%, 99.2% 8%, 99.8% 16%, 99.2% 25%, 99.8% 34%,
    99.2% 44%, 99.8% 53%, 99.2% 63%, 99.8% 74%, 99.2% 84%, 99.8% 94%,
    99.2% 99.5%, 91% 99%, 83% 99.7%, 74% 99.1%, 66% 99.8%, 57% 99.1%,
    48% 99.8%, 39% 99.1%, 29% 99.8%, 20% 99.1%, 11% 99.8%, 0.3% 99.2%,
    0.8% 91%, 0.2% 82%, 0.8% 72%, 0.2% 62%, 0.8% 51%, 0.2% 41%,
    0.8% 31%, 0.2% 20%, 0.8% 10%
  );
}

.login-layout {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.35rem, 5vw, 4.5rem);
}

.login-envelope-visual {
  position: relative;
  display: grid;
  width: min(100%, 31rem);
  min-height: 22rem;
  place-items: center;
  margin-inline: auto;
  padding: 4rem 1rem 1rem;
}

.login-envelope {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 1.55;
  border-radius: 0.45rem;
  background: #ed887f;
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
}

.login-envelope::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  content: "";
  background:
    linear-gradient(32deg, #ed887f 49.5%, transparent 50%) left / 51% 100% no-repeat,
    linear-gradient(-32deg, #e77b74 49.5%, transparent 50%) right / 51% 100% no-repeat;
  pointer-events: none;
}

.login-envelope__flap {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 58%;
  background: #f6a39d;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
}

.login-envelope__letter {
  position: absolute;
  z-index: 1;
  right: 9%;
  bottom: 25%;
  left: 9%;
  display: grid;
  min-height: 90%;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(117, 95, 94, 0.14);
  padding: 1.1rem 1rem 2.5rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(169, 211, 233, 0.38) 25px 26px),
    #fffaf0;
  box-shadow: 0 9px 22px rgba(91, 55, 43, 0.16);
  transform: translateY(-34%) rotate(2.5deg);
}

.login-envelope__eyebrow,
.login-envelope__note {
  color: var(--muted);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(0.64rem, 2vw, 0.82rem);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-envelope__level {
  margin-block: 0.1rem;
  color: var(--coral-dark);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(3.3rem, 12vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.08em;
}

.login-envelope__seal {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 16%;
  left: 0;
  display: grid;
  width: 3.4rem;
  aspect-ratio: 1;
  place-items: center;
  margin: auto;
  border: 3px double rgba(255, 250, 240, 0.78);
  border-radius: 50%;
  color: #fffaf0;
  background: var(--coral-dark);
  box-shadow: 0 5px 12px rgba(91, 55, 43, 0.2);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1rem;
  font-weight: 800;
}

.login-sticker {
  position: absolute;
  z-index: 5;
  right: 4%;
  bottom: 8%;
  border-radius: 0.35rem 0.7rem 0.4rem 0.65rem;
  padding: 0.6rem 0.85rem;
  color: #4d3b5f;
  background: #e5dcf4;
  box-shadow: 0 6px 12px rgba(91, 55, 43, 0.12);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.78rem;
  font-weight: 750;
  transform: rotate(5deg);
}

.login-card {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(91, 55, 43, 0.1);
  background: rgba(255, 250, 240, 0.78);
  box-shadow: var(--soft-shadow);
}

.eyebrow {
  margin: 0 0 0.55rem;
  color: var(--coral-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.display-title {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(2.15rem, 8.5vw, 5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.display-title:focus {
  outline: 0;
}

.lead {
  max-width: 42rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.login-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.field {
  display: grid;
  gap: 0.42rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.field input {
  min-height: 3.2rem;
  width: 100%;
  border: 2px solid rgba(117, 95, 94, 0.22);
  border-radius: 0.8rem 0.95rem 0.75rem 1rem;
  padding: 0.72rem 0.95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.field input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(239, 102, 90, 0.17);
  transform: translateY(-1px);
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 0.75rem 1rem 0.7rem 0.95rem;
  padding: 0.76rem 1.1rem;
  cursor: pointer;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.button:hover {
  transform: translateY(-2px) rotate(-0.35deg);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible,
.progress__dot:focus-visible {
  outline: 3px solid #5b3a76;
  outline-offset: 3px;
}

.button:disabled {
  cursor: default;
  filter: grayscale(0.5);
  opacity: 0.46;
  transform: none;
}

.button--primary {
  color: #fffdf8;
  background: linear-gradient(135deg, #c94745, #b83f58);
  box-shadow: 0 8px 18px rgba(201, 71, 69, 0.26);
}

.button--ghost {
  border: 2px solid rgba(117, 95, 94, 0.2);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
}

.button--light {
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.button--wide {
  width: 100%;
  margin-top: 0.25rem;
}

.form-message {
  min-height: 1.4em;
  margin: 0;
  color: #b22d3a;
  font-weight: 750;
}

.tiny-note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.78rem;
  text-align: center;
}

.tiny-note__line {
  height: 1px;
  flex: 1;
  background: rgba(117, 95, 94, 0.26);
}

.polaroid {
  position: relative;
  margin: 0;
  padding: 0.62rem 0.62rem 2.3rem;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.polaroid img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.polaroid-caption,
.polaroid figcaption {
  position: absolute;
  right: 0.7rem;
  bottom: 0.52rem;
  left: 0.7rem;
  color: #654c4b;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.8rem;
  text-align: center;
}

.tape {
  position: absolute;
  z-index: 5;
  top: -0.7rem;
  left: 50%;
  width: 4.8rem;
  height: 1.7rem;
  transform: translateX(-50%) rotate(-3deg);
  opacity: 0.82;
  background: rgba(245, 184, 191, 0.86);
  clip-path: polygon(4% 7%, 98% 0, 94% 92%, 2% 100%);
}

.tape::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.28;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.7) 7px 9px);
}

.tape--blue {
  background: rgba(151, 202, 226, 0.88);
}

.tape--coral {
  background: rgba(239, 102, 90, 0.74);
}

.tape--pink {
  background: rgba(245, 184, 191, 0.9);
}

.tape--wide {
  width: 6.5rem;
}

.ambient-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.confetti {
  position: absolute;
  width: 0.8rem;
  height: 2.4rem;
  border-radius: 999px;
  opacity: 0.65;
  animation: drift 7s ease-in-out infinite;
}

.confetti--one {
  top: 9%;
  left: 5%;
  rotate: 25deg;
  background: var(--coral);
}

.confetti--two {
  top: 22%;
  right: 4%;
  rotate: -32deg;
  background: var(--lavender);
  animation-delay: -2s;
}

.confetti--three {
  bottom: 8%;
  left: 14%;
  rotate: 62deg;
  background: var(--sky);
  animation-delay: -4s;
}

.doodle-heart {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-bottom: 4px solid var(--coral);
  border-left: 4px solid var(--coral);
  border-radius: 0 0 0 0.55rem;
  opacity: 0.6;
  transform: rotate(-45deg);
}

.doodle-heart::before,
.doodle-heart::after {
  position: absolute;
  content: "";
  border: 4px solid var(--coral);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.doodle-heart::before {
  top: -1.32rem;
  left: -0.26rem;
  width: 1.52rem;
  height: 1.2rem;
  transform: rotate(45deg);
}

.doodle-heart::after {
  right: -1.08rem;
  bottom: -0.26rem;
  width: 1.2rem;
  height: 1.52rem;
  transform: rotate(135deg);
}

.doodle-heart--one {
  top: 5%;
  right: 15%;
}

.doodle-heart--two {
  bottom: 6%;
  right: 6%;
  scale: 0.7;
  rotate: 14deg;
  opacity: 0.38;
}

.slideshow {
  display: grid;
  place-items: center;
}

.story-frame {
  display: grid;
  min-height: min(54rem, calc(100vh - 2rem));
  min-height: min(54rem, calc(100dvh - 2rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.story-header {
  display: grid;
  gap: 0.85rem;
  align-items: center;
  padding: 1.15rem 1.2rem 0.7rem;
  border-bottom: 1px dashed rgba(117, 95, 94, 0.25);
}

.story-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.88rem;
  font-weight: 750;
}

.story-mark__heart {
  width: 1.15rem;
  height: 1.15rem;
  background: var(--coral);
  clip-path: polygon(50% 92%, 8% 50%, 7% 26%, 22% 8%, 42% 9%, 50% 21%, 58% 9%, 78% 8%, 93% 26%, 92% 50%);
}

.progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
}

.progress__item:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 0.55rem;
  left: calc(50% + 0.65rem);
  width: calc(100% - 1.3rem);
  border-top: 2px dashed rgba(117, 95, 94, 0.26);
  content: "";
}

.progress__dot {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.18rem;
  height: 1.18rem;
  place-items: center;
  border: 2px solid rgba(117, 95, 94, 0.35);
  border-radius: 50%;
  background: var(--paper);
}

.progress__item.is-active {
  color: var(--coral-dark);
  font-weight: 800;
}

.progress__item.is-active .progress__dot,
.progress__item.is-complete .progress__dot {
  border-color: var(--coral);
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(239, 102, 90, 0.12);
}

.scenes {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.scene {
  height: 100%;
  min-height: 31rem;
  overflow: auto;
  padding: clamp(1.4rem, 5vw, 4.2rem);
  animation: page-in 460ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.scene--greeting,
.scene--closing {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.scene-copy {
  position: relative;
  z-index: 2;
}

.signature {
  margin: 1.2rem 0 0;
  color: var(--coral-dark);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
}

.level-collage {
  position: relative;
  width: min(100%, 38rem);
  min-height: 25rem;
  margin: 0 auto;
  padding: 0.8rem;
}

.level-card {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 10%;
  display: grid;
  width: 72%;
  min-height: 17rem;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(117, 95, 94, 0.14);
  padding: 2rem 1.2rem;
  background:
    radial-gradient(circle at 20% 18%, rgba(245, 184, 191, 0.6), transparent 28%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(169, 211, 233, 0.4) 28px 29px),
    #fffaf0;
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}

.level-card__label {
  color: var(--muted);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(0.9rem, 2.3vw, 1.15rem);
}

.level-card__score {
  color: var(--coral-dark);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(4.8rem, 14vw, 8.2rem);
  line-height: 0.9;
  letter-spacing: -0.09em;
}

.level-card__caption {
  margin-top: 0.6rem;
  border-radius: 999px;
  padding: 0.42rem 0.75rem;
  color: #4d3b5f;
  background: #e5dcf4;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-prop {
  position: absolute;
  z-index: 4;
  bottom: 4%;
  left: 0;
  display: grid;
  width: 9rem;
  height: 6.5rem;
  grid-template-columns: 1fr 1fr;
  filter: drop-shadow(0 7px 8px rgba(91, 55, 43, 0.2));
  transform: rotate(-9deg);
}

.book-prop__page {
  border: 3px solid var(--coral-dark);
  background:
    repeating-linear-gradient(0deg, transparent 0 0.68rem, rgba(117, 95, 94, 0.24) 0.68rem 0.74rem),
    #fffaf0;
}

.book-prop__page--left {
  border-radius: 0.8rem 0.15rem 0.15rem 0.55rem;
  transform: skewY(5deg);
}

.book-prop__page--right {
  border-radius: 0.15rem 0.8rem 0.55rem 0.15rem;
  transform: skewY(-5deg);
}

.gamepad-prop {
  position: absolute;
  z-index: 4;
  top: 3%;
  right: 0;
  width: 9rem;
  height: 5.8rem;
  border: 0.32rem solid #4d3b5f;
  border-radius: 2.8rem 2.8rem 2.1rem 2.1rem;
  background: var(--lavender);
  box-shadow: 0 8px 15px rgba(91, 55, 43, 0.2);
  transform: rotate(8deg);
}

.gamepad-prop__cross,
.gamepad-prop__cross::after {
  position: absolute;
  width: 2.3rem;
  height: 0.72rem;
  border-radius: 0.3rem;
  background: #4d3b5f;
}

.gamepad-prop__cross {
  top: 2.25rem;
  left: 1.15rem;
}

.gamepad-prop__cross::after {
  content: "";
  transform: rotate(90deg);
}

.gamepad-prop__button {
  position: absolute;
  width: 0.95rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral-dark);
  box-shadow: inset 0 0 0 0.16rem rgba(255, 255, 255, 0.28);
}

.gamepad-prop__button--one {
  top: 1.7rem;
  right: 1.25rem;
}

.gamepad-prop__button--two {
  top: 3rem;
  right: 2.35rem;
  background: #4d7490;
}

.road-prop {
  position: absolute;
  z-index: 3;
  right: 1%;
  bottom: 0;
  width: 5.6rem;
  height: 13rem;
  overflow: hidden;
  border-right: 0.5rem solid #e5dcf4;
  border-left: 0.5rem solid #e5dcf4;
  background: #655c62;
  box-shadow: var(--soft-shadow);
  transform: rotate(22deg);
}

.road-prop__line {
  position: absolute;
  top: -1rem;
  bottom: -1rem;
  left: calc(50% - 0.14rem);
  width: 0.28rem;
  background: repeating-linear-gradient(to bottom, #fff3bd 0 1.5rem, transparent 1.5rem 2.7rem);
}

.moto-prop {
  position: absolute;
  right: 0;
  bottom: 20%;
  left: 0;
  display: grid;
  place-items: center;
  transform: rotate(-22deg);
}

.moto-prop::before {
  content: "🏍️";
  font-size: 2.65rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3));
}

.sticker {
  display: inline-block;
  margin-top: 1.5rem;
  border-radius: 0.4rem 0.8rem 0.45rem 0.7rem;
  padding: 0.62rem 0.9rem;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.84rem;
  font-weight: 700;
  transform: rotate(-2deg);
  box-shadow: 0 6px 12px rgba(91, 55, 43, 0.12);
}

.sticker--lavender {
  background: #e5dcf4;
}

.sticker--coral {
  background: #fac8c1;
  transform: rotate(2deg);
}

.paper-flower {
  position: absolute;
  width: 3.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 0 18%, transparent 19%),
    conic-gradient(from 20deg, var(--pink) 0 15%, transparent 15% 25%, var(--pink) 25% 40%, transparent 40% 50%, var(--pink) 50% 65%, transparent 65% 75%, var(--pink) 75% 90%, transparent 90%);
  filter: drop-shadow(0 4px 5px rgba(91, 55, 43, 0.18));
  animation: float 5s ease-in-out infinite;
}

.paper-flower--one {
  right: -0.2rem;
  bottom: 0;
}

.paper-flower--two {
  top: -0.6rem;
  left: 0;
  scale: 0.7;
  background:
    radial-gradient(circle, var(--coral) 0 18%, transparent 19%),
    conic-gradient(from 20deg, var(--sky) 0 15%, transparent 15% 25%, var(--sky) 25% 40%, transparent 40% 50%, var(--sky) 50% 65%, transparent 65% 75%, var(--sky) 75% 90%, transparent 90%);
  animation-delay: -2s;
}

.scene--memories {
  display: grid;
  gap: 1.15rem;
  align-content: center;
  padding-block: clamp(1.1rem, 3vw, 2.4rem);
}

.memories-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  align-items: end;
}

.memories-heading .eyebrow,
.memories-heading .display-title {
  grid-column: 1;
}

.memories-heading .lead {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 19rem;
  margin: 0;
  text-align: right;
}

.display-title--memories {
  font-size: clamp(1.75rem, 4.7vw, 3.6rem);
}

.memories-recap {
  display: grid;
  gap: 0.85rem;
}

.memory-pages {
  min-height: clamp(25rem, 46vw, 31rem);
}

.memory-page {
  position: relative;
  display: grid;
  min-height: clamp(25rem, 46vw, 31rem);
  grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  overflow: hidden;
  border: 1px solid rgba(63, 39, 40, 0.12);
  border-radius: 0.65rem 1.4rem 0.8rem 1.1rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--soft-shadow);
  animation: memory-page-in 380ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
  isolation: isolate;
}

.memory-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.3;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.88), transparent 23%),
    repeating-linear-gradient(103deg, transparent 0 18px, rgba(255, 255, 255, 0.2) 18px 19px);
}

.memory-page--coral {
  background: #f5a29a;
}

.memory-page--sky {
  background: #abd8e9;
}

.memory-page--gold {
  background: #eccb74;
}

.memory-page--lavender {
  background: #cbbbe6;
}

.memory-page--mint {
  background: #afd8c4;
}

.memory-page--pink {
  background: #efbbc8;
}

.memory-page--peach {
  background: #f2bd91;
}

.memory-page--blue {
  background: #aebfde;
}

.memory-page__copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
}

.memory-page__number {
  position: absolute;
  z-index: -1;
  top: -4.5rem;
  left: -0.4rem;
  margin: 0;
  color: rgba(255, 250, 240, 0.48);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(6.5rem, 14vw, 11rem);
  font-weight: 900;
  line-height: 1;
}

.memory-page__title {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  line-height: 1.05;
  text-wrap: balance;
}

.memory-page__title:focus {
  outline: 0;
}

.memory-page__value {
  max-width: 13ch;
  margin: 0.65rem 0 0;
  color: var(--ink);
  font-size: clamp(2rem, 5.4vw, 4.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.memory-page__note {
  max-width: 24rem;
  margin: 1rem 0 0;
  color: rgba(63, 39, 40, 0.8);
  font-size: clamp(0.9rem, 1.8vw, 1.08rem);
  font-weight: 720;
  line-height: 1.45;
}

.memory-photo-grid {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: clamp(0.45rem, 1.2vw, 0.85rem);
}

.memory-photo-grid--hero-pair {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: center;
}

.memory-photo-grid--hero-pair .memory-photo--hero {
  height: 86%;
}

.memory-photo-grid--hero-pair .memory-photo--polaroid {
  aspect-ratio: 4 / 3;
}

.memory-photo-grid--single {
  place-items: center;
}

.memory-photo-grid--portrait-single .memory-photo {
  width: min(100%, 15rem);
  aspect-ratio: 9 / 16;
}

.memory-photo-grid--landscape-single .memory-photo {
  width: min(100%, 34rem);
  aspect-ratio: 4 / 3;
}

.memory-photo-grid--wide-single .memory-photo {
  width: min(100%, 43rem);
  aspect-ratio: 16 / 9;
}

.memory-photo-grid--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.memory-photo-grid--duo .memory-photo {
  aspect-ratio: 4 / 3;
  align-self: center;
}

.memory-photo-grid--featured-trio {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.memory-photo-grid--featured-trio .memory-photo--hero {
  grid-row: 1 / span 2;
}

.memory-photo-grid--triptych {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.memory-photo-grid--triptych .memory-photo {
  aspect-ratio: 3 / 4;
}

.memory-photo-grid--pets {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: center;
}

.memory-page--pets .memory-photo--dog {
  aspect-ratio: 16 / 9;
}

.memory-page--pets .memory-photo--cat {
  aspect-ratio: 1;
}

.memory-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: clamp(0.28rem, 0.7vw, 0.48rem) solid #fffaf0;
  background: rgba(255, 250, 240, 0.68);
  box-shadow: 0 10px 22px rgba(91, 55, 43, 0.2);
  transform: rotate(1deg);
}

.memory-photo:nth-child(even) {
  transform: rotate(-1.2deg);
}

.memory-photo picture {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 7rem;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 10px, transparent 10px 20px),
    rgba(255, 250, 240, 0.52);
}

.memory-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-photo--portrait img {
  object-position: center 30%;
}

.memory-page--pets .memory-photo img {
  object-position: center;
}

.memory-photo picture.has-error::before {
  max-width: 14ch;
  padding: 0.75rem;
  color: var(--muted);
  content: "Цей кадр тимчасово сховався";
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.memories-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.memories-controls .button:first-child {
  justify-self: start;
}

.memories-controls .button:last-child {
  justify-self: end;
}

.memories-counter {
  margin: 0;
  color: var(--muted);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.scene--intrigue {
  display: grid;
  gap: 2rem;
  place-items: center;
  text-align: center;
}

.postcard {
  position: relative;
  z-index: 2;
  width: min(100%, 38rem);
  border: 1px solid rgba(117, 95, 94, 0.16);
  padding: clamp(1.6rem, 5vw, 3.5rem);
  background:
    linear-gradient(rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.64)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(169, 211, 233, 0.45) 27px 28px);
  box-shadow: var(--soft-shadow);
  transform: rotate(-0.6deg);
}

.postcard .lead {
  margin-inline: auto;
}

.surprise-button {
  margin-top: 1.5rem;
  padding-inline: 1.35rem;
}

.tiny-note--center {
  display: block;
}

.gift-collage {
  position: relative;
  width: min(76vw, 15rem);
  height: 9rem;
}

.envelope {
  position: absolute;
  inset: 0;
  border-radius: 0.45rem;
  background: #ed887f;
  box-shadow: var(--soft-shadow);
  transform: rotate(5deg);
  clip-path: polygon(0 8%, 50% 44%, 100% 8%, 100% 100%, 0 100%);
}

.envelope::before {
  position: absolute;
  inset: 8% 0 auto;
  height: 60%;
  content: "";
  background: #f6a39d;
  clip-path: polygon(0 0, 50% 68%, 100% 0);
}

.envelope__heart {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0.7rem;
  left: 0;
  width: 2.2rem;
  height: 2.2rem;
  margin: auto;
  background: #fff6e9;
  clip-path: polygon(50% 92%, 8% 50%, 7% 26%, 22% 8%, 42% 9%, 50% 21%, 58% 9%, 78% 8%, 93% 26%, 92% 50%);
}

.spark {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle 2.8s ease-in-out infinite;
}

.spark--one {
  top: -1.2rem;
  left: 12%;
}

.spark--two {
  top: 15%;
  right: -1.2rem;
  scale: 0.65;
  animation-delay: -0.8s;
}

.spark--three {
  bottom: -1.2rem;
  left: 42%;
  scale: 0.8;
  animation-delay: -1.6s;
}

.scene--video {
  display: grid;
  gap: 1.3rem;
  align-content: center;
}

.display-title--video {
  font-size: clamp(1.9rem, 6vw, 3.7rem);
}

.video-polaroid {
  position: relative;
  width: min(100%, 56rem);
  margin-inline: auto;
  padding: clamp(0.55rem, 1.8vw, 1rem) clamp(0.55rem, 1.8vw, 1rem) 2.6rem;
  background: #fff;
  box-shadow: var(--shadow);
  transform: rotate(0.35deg);
}

.video-frame {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-items: center;
  background: #211a1a;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-fallback {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 2rem);
}

.video-caption {
  position: absolute;
  right: 0;
  bottom: 0.56rem;
  left: 0;
  margin: 0;
  color: var(--muted);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.78rem;
  text-align: center;
}

.closing-photos {
  position: relative;
  min-height: 18rem;
}

.polaroid--closing-one,
.polaroid--closing-two {
  position: absolute;
  width: min(85%, 24rem);
  padding-bottom: 0.7rem;
}

.polaroid--closing-one {
  top: 0;
  left: 0;
  transform: rotate(-5deg);
}

.polaroid--closing-two {
  right: 0;
  bottom: 0;
  transform: rotate(5deg);
}

.polaroid--closing-one img,
.polaroid--closing-two img {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.polaroid--closing-one img {
  object-position: 16% center;
}

.polaroid--closing-two img {
  object-position: 82% center;
}

.tape--closing {
  top: 45%;
  transform: translateX(-50%) rotate(8deg);
}

.story-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding:
    0.75rem
    max(1rem, env(safe-area-inset-right))
    max(0.9rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  border-top: 1px dashed rgba(117, 95, 94, 0.25);
}

.story-navigation .button:first-child {
  justify-self: start;
}

.story-navigation .button:last-child {
  justify-self: end;
}

.scene-counter {
  margin: 0;
  color: var(--muted);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.76rem;
  text-align: center;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(0.7rem) rotate(0.2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes memory-page-in {
  from {
    opacity: 0;
    transform: translateX(0.8rem) rotate(0.15deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-0.45rem) rotate(3deg);
  }
}

@keyframes drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0.4rem 0.8rem;
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.75) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.08) rotate(32deg);
  }
}

@media (min-width: 44rem) {
  .login-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .story-header {
    grid-template-columns: auto minmax(22rem, 34rem);
    justify-content: space-between;
    padding-inline: 2rem;
  }

  .scene--greeting,
  .scene--closing {
    grid-template-columns: minmax(0, 0.85fr) minmax(22rem, 1.15fr);
  }

  .scene--greeting .level-collage {
    order: 2;
  }

  .scene--intrigue {
    grid-template-columns: minmax(22rem, 1fr) minmax(12rem, 0.55fr);
    text-align: left;
  }

  .postcard .lead {
    margin-inline: 0;
  }

  .tiny-note--center {
    text-align: left;
  }

  .scene--video {
    grid-template-columns: minmax(12rem, 0.42fr) minmax(28rem, 1.58fr);
  }

  .scene--closing {
    grid-template-columns: minmax(22rem, 1.15fr) minmax(0, 0.85fr);
  }

  .scene-copy--closing {
    order: 2;
  }
}

@media (min-height: 67rem) {
  .login-screen {
    align-items: center;
  }
}

@media (max-width: 43.999rem) {
  .login-layout {
    padding-bottom: 2rem;
  }

  .login-envelope-visual {
    width: min(100%, 29rem);
    min-height: clamp(17rem, 68vw, 21rem);
    padding-top: 3.2rem;
  }

  .scene {
    min-height: 0;
    padding-bottom: 2rem;
  }

  .scene--memories {
    gap: 0.85rem;
    padding: 1rem;
  }

  .memories-heading {
    display: block;
  }

  .memories-heading .lead {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: left;
  }

  .display-title--memories {
    font-size: clamp(1.65rem, 8vw, 2.6rem);
  }

  .memory-pages,
  .memory-page {
    min-height: 30rem;
  }

  .memory-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(15rem, 1fr);
    gap: 0.75rem;
    padding: 0.9rem;
  }

  .memory-page__copy {
    align-content: start;
  }

  .memory-page__number {
    top: -2.4rem;
    right: 0;
    left: auto;
    font-size: 6rem;
  }

  .memory-page__title {
    font-size: 1.2rem;
  }

  .memory-page__value {
    max-width: 17ch;
    margin-top: 0.35rem;
    font-size: clamp(1.75rem, 9vw, 2.65rem);
  }

  .memory-page__note {
    margin-top: 0.5rem;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .memory-photo-grid {
    min-height: 15rem;
  }

  .memory-photo-grid--hero-pair {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .memory-photo-grid--hero-pair .memory-photo--hero {
    height: 82%;
  }

  .memory-photo-grid--portrait-single .memory-photo {
    width: min(72%, 16rem);
  }

  .memory-photo-grid--featured-trio {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .memory-photo-grid--featured-trio .memory-photo--hero {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .memory-photo-grid--featured-trio .memory-photo:not(.memory-photo--hero) {
    aspect-ratio: 4 / 3;
  }

  .memory-photo-grid--pets {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .memory-page--pets .memory-photo--cat {
    width: min(48%, 11rem);
    justify-self: center;
  }

  .memories-controls {
    gap: 0.4rem;
  }

  .memories-controls .button {
    min-height: 2.7rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
  }

  .memories-counter {
    font-size: 0.7rem;
  }

  .level-collage {
    order: -1;
  }

  .scene--greeting .level-collage {
    width: min(100%, 30rem);
  }

  .scene--greeting .display-title {
    font-size: clamp(2.2rem, 12vw, 4.2rem);
  }

  .story-navigation .button {
    min-width: 3.25rem;
    padding-inline: 0.75rem;
  }

  .scene--closing {
    gap: 1rem;
    align-content: start;
  }

  .scene--closing .closing-photos {
    min-height: clamp(9rem, 36vw, 13rem);
  }

  .scene--closing .display-title {
    font-size: clamp(1.85rem, 9.8vw, 3.2rem);
  }

  .scene--closing .lead {
    margin-top: 0.65rem;
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .scene--closing .signature {
    margin-top: 0.7rem;
    font-size: 1.02rem;
  }

  .scene--closing .sticker {
    margin-top: 0.75rem;
  }

  .progress__item span:last-child {
    display: none;
  }
}

@media (max-width: 25rem) {
  .login-screen,
  .slideshow {
    padding-inline:
      max(0.55rem, env(safe-area-inset-left))
      max(0.55rem, env(safe-area-inset-right));
  }

  .story-header {
    padding-inline: 0.85rem;
  }

  .story-mark {
    font-size: 0.78rem;
  }

  .scene {
    padding-inline: 1rem;
  }

  .scene--memories {
    padding-inline: 0.7rem;
  }

  .memory-pages,
  .memory-page {
    min-height: 28rem;
  }

  .memory-page {
    grid-template-rows: auto minmax(13rem, 1fr);
  }

  .memory-photo-grid {
    min-height: 13rem;
  }

  .memory-photo-grid--featured-trio,
  .memory-photo-grid--pets {
    min-height: 0;
  }

  .memories-controls {
    grid-template-columns: 1fr 1fr;
  }

  .memories-controls .button {
    width: 100%;
  }

  .memories-counter {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .memories-controls .button:first-child,
  .memories-controls .button:last-child {
    grid-row: 2;
  }

  .login-envelope-visual {
    min-height: 15.5rem;
    padding-inline: 0.25rem;
  }

  .login-sticker {
    right: 0;
    bottom: 2%;
  }

  .level-collage {
    min-height: 21rem;
  }

  .level-card {
    min-height: 14.5rem;
  }

  .book-prop {
    width: 7.4rem;
    height: 5.4rem;
  }

  .gamepad-prop {
    width: 7.2rem;
    height: 4.8rem;
  }

  .gamepad-prop__cross {
    top: 1.85rem;
    left: 0.85rem;
    scale: 0.8;
  }

  .gamepad-prop__button--one {
    top: 1.35rem;
    right: 0.95rem;
  }

  .gamepad-prop__button--two {
    top: 2.55rem;
    right: 1.8rem;
  }

  .road-prop {
    width: 4.6rem;
    height: 10rem;
  }

  .story-navigation {
    gap: 0.4rem;
    padding-inline: 0.7rem;
  }

  .story-navigation .button {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}