:root {
  --primary: #ff5c9d;
  --secondary: #ffc1d9;
  --background: #070507;
  --text: #fff7fb;
  --muted: rgba(255, 247, 251, 0.64);
  --line: rgba(255, 193, 217, 0.16);
  --glass: rgba(27, 17, 23, 0.62);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; background: var(--background); }
body {
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 52% 8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28rem),
    radial-gradient(circle at 18% 68%, rgba(126, 35, 78, 0.1), transparent 30rem),
    var(--background);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; }
[hidden] { display: none !important; }
noscript { position: fixed; inset: auto 1rem 1rem; z-index: 50; padding: 1rem; background: #171015; }

.ambient-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.eyebrow {
  margin: 0 0 1rem;
  color: var(--secondary);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.intro {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  overflow: hidden;
  background: #060405;
  opacity: 0;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.is-ready .intro { opacity: 1; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro::before, .intro::after {
  content: '';
  position: absolute;
  width: min(72vw, 46rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 137, 185, 0.08);
  border-radius: 50%;
  animation: intro-orbit 18s linear infinite;
}
.intro::after { width: min(54vw, 32rem); animation-direction: reverse; animation-duration: 13s; }
.intro__glow {
  position: absolute;
  width: 28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 73, 145, 0.18), transparent 68%);
  filter: blur(8px);
  animation: breathe 4s ease-in-out infinite;
}
.intro__content { position: relative; z-index: 1; width: min(42rem, 100%); text-align: center; }
.intro h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 8vw, 5.7rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.intro__subtitle { margin: 1.45rem auto 2.2rem; color: var(--muted); font-size: clamp(0.94rem, 2vw, 1.08rem); line-height: 1.7; }
.primary-button, .letter-button {
  position: relative;
  min-width: 10.5rem;
  min-height: 3.25rem;
  border: 1px solid rgba(255, 193, 217, 0.46);
  border-radius: 999px;
  padding: 0.9rem 1.6rem;
  overflow: hidden;
  background: rgba(255, 94, 158, 0.1);
  box-shadow: 0 0 2.5rem rgba(255, 72, 144, 0.15), inset 0 0 1.2rem rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.primary-button::before, .letter-button::before { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transition: transform .65s ease; }
.primary-button:hover, .letter-button:hover { transform: translateY(-2px); background: rgba(255, 94, 158, 0.18); box-shadow: 0 0 3rem rgba(255, 72, 144, 0.24); }
.primary-button:hover::before, .letter-button:hover::before { transform: translateX(110%); }
.sound-hint { margin-top: 1rem; color: rgba(255, 247, 251, 0.42); font-size: 0.7rem; letter-spacing: .06em; }

.main-content { position: relative; z-index: 1; opacity: 0; transition: opacity 1s ease; }
.main-content.is-visible { opacity: 1; }
.heart-hero { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.heart-hero::before { content: ''; position: absolute; top: 50%; left: 50%; width: min(78vw, 48rem); aspect-ratio: 1; transform: translate(-50%, -48%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 57, 137, 0.12), transparent 67%); filter: blur(14px); }
.heart-hero__copy { position: absolute; z-index: 2; top: max(2rem, env(safe-area-inset-top)); left: clamp(1.25rem, 6vw, 6rem); }
.heart-hero__copy .eyebrow { margin-bottom: .25rem; }
.heart-hero__line { margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3.2rem); font-style: italic; }
.heart-canvas { z-index: 1; display: block; width: 100%; height: min(88svh, 58rem); cursor: pointer; touch-action: pan-y; transition: filter .35s ease; }
.heart-hero.is-secret-glow .heart-canvas { filter: brightness(1.45) drop-shadow(0 0 2.2rem rgba(255, 92, 157, .9)); }
.heart-hint { position: absolute; z-index: 2; bottom: max(4.7rem, calc(env(safe-area-inset-bottom) + 3rem)); left: 50%; margin: 0; transform: translateX(-50%); color: rgba(255,255,255,.36); font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.scroll-cue { position: absolute; z-index: 2; bottom: max(1.4rem, env(safe-area-inset-bottom)); left: 50%; width: 1px; height: 2.1rem; overflow: hidden; background: rgba(255,255,255,.12); }
.scroll-cue span { display: block; width: 100%; height: 45%; background: var(--secondary); animation: scroll-line 2s ease-in-out infinite; }

.content-section { position: relative; width: min(72rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(6rem, 12vw, 10rem) 0; }
.content-section h2, .notes-section h2 {
  max-width: 13ch;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-family: var(--serif);
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.section-number { position: absolute; top: clamp(5rem, 10vw, 8rem); right: 0; color: rgba(255,255,255,.1); font-family: var(--serif); font-size: clamp(4rem, 10vw, 8rem); }
.message-card { position: relative; width: min(47rem, 100%); margin-left: auto; border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(135deg, rgba(255,255,255,.035), transparent); }
.quote-mark { position: absolute; top: -.6rem; left: 1rem; color: rgba(255, 105, 166, .25); font-family: var(--serif); font-size: 7rem; line-height: 1; }
.prose, .letter-text { position: relative; white-space: pre-line; color: rgba(255,247,251,.76); font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.7; }

.flower-card { position: relative; display: grid; grid-template-columns: minmax(12rem, .7fr) 1.3fr; align-items: center; min-height: 32rem; overflow: hidden; border: 1px solid var(--line); border-radius: 2rem; padding: clamp(2rem, 6vw, 5.5rem); background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,99,162,.035)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 2rem 5rem rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.flower-card::before { content: ''; position: absolute; inset: 12% auto auto 4%; width: 20rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 62, 141, .11); filter: blur(60px); }
.flower-card__copy { position: relative; z-index: 2; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.flower-card h2 { max-width: 10ch; font-size: clamp(2.7rem, 5.6vw, 4.8rem); }
.flower-illustration { position: relative; width: min(16rem, 70vw); aspect-ratio: .8; margin: auto; filter: drop-shadow(0 0 2rem rgba(255,84,151,.25)); }
.petal { position: absolute; top: 26%; left: 50%; width: 32%; height: 32%; border: 1px solid rgba(255, 186, 214, .5); border-radius: 70% 30% 70% 30%; background: linear-gradient(145deg, rgba(255,207,226,.42), rgba(255,93,158,.07)); transform-origin: 0 100%; }
.petal--1 { transform: rotate(-12deg) translate(-10%, -54%); }
.petal--2 { transform: rotate(60deg) translate(-10%, -54%); }
.petal--3 { transform: rotate(132deg) translate(-10%, -54%); }
.petal--4 { transform: rotate(204deg) translate(-10%, -54%); }
.petal--5 { transform: rotate(276deg) translate(-10%, -54%); }
.flower-center { position: absolute; z-index: 2; top: 31%; left: 47%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 1.5rem var(--primary); }
.stem { position: absolute; top: 40%; left: 50%; width: 1px; height: 56%; background: linear-gradient(rgba(255,193,217,.55), rgba(255,193,217,.08)); transform: rotate(-7deg); transform-origin: top; }
.leaf { position: absolute; width: 25%; height: 11%; border: 1px solid rgba(255,193,217,.35); border-radius: 100% 0 100% 0; }
.leaf--left { top: 64%; left: 26%; transform: rotate(24deg); }
.leaf--right { top: 73%; left: 49%; transform: scaleX(-1) rotate(16deg); }
.falling-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.falling-petals i { position: absolute; top: -1rem; left: var(--left); width: .55rem; height: .8rem; border-radius: 80% 0 80% 20%; background: rgba(255, 161, 198, .5); animation: petal-fall var(--duration) linear var(--delay) infinite; }

.gallery-section { overflow: visible; opacity: 1; transform: none; }
.gallery-section h2 { max-width: none; }
.photo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; min-width: 0; gap: clamp(1.5rem, 3vw, 2.7rem); align-items: start; overflow: visible; }
.photo-card { position: relative; z-index: 1; grid-column: span 4; display: block; width: 100%; max-width: 100%; min-width: 0; margin-inline: auto; border: 0; padding: 0; opacity: 1; visibility: visible; background: transparent; cursor: zoom-in; text-align: left; transition: transform .35s ease, filter .35s ease; }
.photo-card--left { transform: rotate(-2.2deg); }
.photo-card--right { transform: rotate(2.2deg); }
.photo-card:hover { z-index: 2; transform: rotate(0) translateY(-.5rem); filter: brightness(1.08); }
.photo-card img { display: block; width: 100%; max-height: 35rem; object-fit: cover; border-radius: .35rem; background: #171117; }
.photo-card__caption { display: flex; flex-direction: column; gap: .35rem; padding-top: 1rem; }
.photo-card__caption strong { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; }
.photo-card__caption small { color: var(--muted); font-size: .72rem; }
.photo-card--polaroid { padding: .75rem .75rem 1.4rem; background: #eee7e9; color: #1b1116; box-shadow: 0 1.4rem 3rem rgba(0,0,0,.3); }
.photo-card--polaroid img { border-radius: 0; }
.photo-card--film { padding: .7rem; background: #141014; border: 1px solid rgba(255,255,255,.12); }
.photo-card--large { grid-column: span 8; }
.photo-card--round img { aspect-ratio: 1; border-radius: 50%; }
.photo-card--vertical img { aspect-ratio: 3/4; }
.empty-hint { border: 1px dashed var(--line); border-radius: 1rem; padding: 2rem; color: var(--muted); text-align: center; }

.notes-section { position: relative; width: min(62rem, calc(100% - 2.5rem)); min-height: 36rem; margin: 4rem auto; padding: 7rem 0; text-align: center; }
.notes-section h2 { max-width: none; margin-inline: auto; }
.notes-stage { position: relative; min-height: 11rem; }
.note-card { position: absolute; inset: 0; display: grid; place-items: center; max-width: 40rem; margin: auto; opacity: 0; transform: translateY(1rem); color: rgba(255,247,251,.84); font-family: var(--serif); font-size: clamp(1.75rem, 4.5vw, 3.3rem); font-style: italic; line-height: 1.25; transition: opacity .75s ease, transform .75s ease; }
.note-card.is-active { opacity: 1; transform: none; }
.notes-dots { display: flex; justify-content: center; gap: .65rem; margin-top: 1.4rem; }
.notes-dots button { width: .45rem; height: .45rem; border: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.2); cursor: pointer; }
.notes-dots button.is-active { background: var(--secondary); box-shadow: 0 0 .8rem var(--primary); }

.final-section { position: relative; display: grid; place-items: center; min-height: 75svh; padding: 6rem 1.25rem calc(6rem + env(safe-area-inset-bottom)); text-align: center; overflow: hidden; }
.final-section__prelude { margin-bottom: 2rem; color: var(--muted); font-family: var(--serif); font-size: 1.4rem; font-style: italic; }
.letter-button { max-width: min(24rem, 100%); min-height: 4rem; padding-inline: 2rem; white-space: normal; }
.final-orbit { position: absolute; width: min(65vw, 36rem); aspect-ratio: 1; border: 1px solid rgba(255,128,179,.09); border-radius: 50%; animation: intro-orbit 24s linear infinite; }
.final-orbit i { position: absolute; width: .3rem; aspect-ratio: 1; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 1rem var(--primary); }
.final-orbit i:nth-child(1) { top: 7%; left: 30%; }.final-orbit i:nth-child(2) { top: 63%; right: 2%; }.final-orbit i:nth-child(3) { bottom: 5%; left: 19%; }

.sound-button { position: fixed; z-index: 20; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .6rem; min-height: 2.8rem; border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1rem; background: rgba(12,8,11,.76); backdrop-filter: blur(14px); box-shadow: 0 .5rem 2rem rgba(0,0,0,.25); cursor: pointer; color: var(--muted); font-size: .7rem; }
.sound-button__icon { display: grid; place-items: center; width: 1.35rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255,96,160,.13); color: var(--secondary); }

.modal { position: fixed; z-index: 200; inset: 0; opacity: 0; transition: opacity .28s ease; }
.modal.is-open { opacity: 1; }
.modal-close { position: absolute; z-index: 4; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); display: grid; place-items: center; width: 2.8rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(8,5,7,.64); backdrop-filter: blur(12px); cursor: pointer; font-size: 1.5rem; }
.photo-modal { display: grid; place-items: center; padding: max(4.3rem, env(safe-area-inset-top)) max(3.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)); background: rgba(3,2,3,.94); }
.photo-modal__figure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 23rem); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); width: min(75rem, 100%); max-height: 90vh; margin: 0; }
.photo-modal__figure img { width: 100%; max-height: 80vh; object-fit: contain; }
.photo-modal__figure h2 { margin: .4rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 500; line-height: 1; }
.photo-modal__figure figcaption > p:last-child { color: var(--muted); line-height: 1.7; white-space: pre-line; }
.photo-modal__date { color: var(--secondary); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.photo-nav { position: absolute; z-index: 3; top: 50%; width: 3rem; height: 4rem; border: 0; background: transparent; cursor: pointer; font-family: var(--serif); font-size: 3rem; }
.photo-nav--prev { left: .4rem; }.photo-nav--next { right: .4rem; }

.letter-modal { display: grid; place-items: center; padding: max(4rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom)); }
.letter-backdrop { position: absolute; inset: 0; background: rgba(2,1,2,.88); backdrop-filter: blur(7px); }
.letter-card { position: relative; z-index: 2; width: min(46rem, 100%); max-height: calc(100svh - 6rem); overflow-y: auto; border: 1px solid rgba(255,193,217,.22); border-radius: 1.5rem; padding: clamp(2rem, 7vw, 5rem); background: linear-gradient(145deg, rgba(35,22,29,.96), rgba(12,8,11,.98)); box-shadow: 0 3rem 8rem rgba(0,0,0,.5), 0 0 4rem rgba(255,70,144,.09); transform: translateY(1.5rem) scale(.98); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.letter-modal.is-open .letter-card { transform: none; }
.modal-close--letter { top: 1rem; right: 1rem; }
.letter-card h2 { margin: 0 0 2rem; font-family: var(--serif); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 500; }
.letter-final { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--secondary); font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.5rem); font-style: italic; text-align: right; }
.letter-hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.letter-hearts i { position: absolute; left: var(--x); bottom: -2rem; color: var(--primary); opacity: .5; animation: heart-rise 4s ease-out var(--delay) infinite; }

.secret-modal { z-index: 220; display: grid; place-items: center; 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)); }
.secret-backdrop { position: absolute; inset: 0; background: rgba(2, 1, 2, .88); backdrop-filter: blur(7px); }
.secret-card { position: relative; z-index: 3; width: min(35rem, 100%); border: 1px solid rgba(255, 193, 217, .32); border-radius: 1.6rem; padding: clamp(2rem, 7vw, 4rem); overflow: hidden; background: linear-gradient(145deg, rgba(42, 24, 33, .98), rgba(13, 8, 11, .99)); box-shadow: 0 2rem 7rem rgba(0,0,0,.6), 0 0 4rem rgba(255,70,144,.18); text-align: center; transform: translateY(1.5rem) scale(.94); transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.secret-modal.is-open .secret-card { transform: none; }
.secret-card h2 { margin: 0 0 1.4rem; font-family: var(--serif); font-size: clamp(2.5rem, 8vw, 4.4rem); font-weight: 500; line-height: .98; }
.secret-text { margin: 0 auto 2rem; white-space: pre-line; color: rgba(255,247,251,.78); font-family: var(--serif); font-size: clamp(1.25rem, 4vw, 1.65rem); line-height: 1.55; }
.secret-close-button { position: relative; z-index: 2; }
.secret-hearts { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.secret-hearts i { position: absolute; left: var(--secret-x); top: 52%; color: var(--secondary); opacity: 0; text-shadow: 0 0 1rem var(--primary); animation: secret-heart-burst 1.8s ease-out var(--secret-delay) both; }

.reveal { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.reveal-pending { opacity: 0; transform: translateY(2.2rem); }
.reveal.is-revealed, .gallery-section.reveal { opacity: 1; transform: none; }

@keyframes intro-orbit { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes scroll-line { 0% { transform: translateY(-120%); } 60%,100% { transform: translateY(240%); } }
@keyframes petal-fall { 0% { transform: translate(0,-1rem) rotate(0); opacity: 0; } 12% { opacity: .6; } 100% { transform: translate(var(--drift), 35rem) rotate(300deg); opacity: 0; } }
@keyframes heart-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 18% { opacity: .55; } 100% { transform: translateY(-100svh) scale(1.2) rotate(18deg); opacity: 0; } }
@keyframes secret-heart-burst { 0% { transform: translate(0, 0) scale(.35); opacity: 0; } 16% { opacity: .9; } 100% { transform: translate(var(--secret-drift), -48svh) scale(1.4) rotate(28deg); opacity: 0; } }

@media (max-width: 820px) {
  .flower-card { grid-template-columns: 1fr; padding-top: 2rem; }
  .flower-illustration { width: 10rem; height: 12rem; }
  .flower-card h2 { max-width: none; }
  .photo-card { grid-column: span 6; }
  .photo-card--large { grid-column: span 12; }
  .photo-modal__figure { grid-template-columns: 1fr; overflow-y: auto; text-align: center; }
  .photo-modal__figure img { max-height: 55vh; }
}

@media (max-width: 560px) {
  .heart-hero__copy { top: max(1.4rem, env(safe-area-inset-top)); }
  .heart-canvas { height: min(82svh, 44rem); }
  .content-section { width: min(calc(100% - 2rem), 72rem); }
  .section-number { opacity: .6; }
  .message-card { padding: 2.2rem 1.2rem 1.5rem; }
  .flower-card { border-radius: 1.3rem; padding-inline: 1.3rem; }
  .photo-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .photo-card, .photo-card--large { grid-column: auto; width: min(100%, calc(100vw - 32px)); max-width: 100%; margin-left: auto; margin-right: auto; opacity: 1 !important; visibility: visible !important; }
  .photo-card--left { transform: rotate(-.45deg); }
  .photo-card--right { transform: rotate(.45deg); }
  .photo-card img { width: 100%; height: auto; max-height: 72svh; object-fit: cover; }
  .gallery-section { overflow: visible; opacity: 1 !important; transform: none !important; }
  .photo-modal { padding-inline: .8rem; }
  .photo-nav { top: 45%; background: rgba(0,0,0,.3); }
  .sound-button__label { display: none; }
  .sound-button { width: 2.9rem; padding: .7rem; justify-content: center; }
  .secret-card { max-height: calc(100svh - 2rem); overflow-y: auto; border-radius: 1.25rem; padding: 2.2rem 1.35rem; }
}

@media (max-width: 480px) and (orientation: landscape) {
  .heart-canvas { height: 78svh; }
  .heart-hero__copy { top: .65rem; }
  .heart-hint { bottom: 2.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal.reveal-pending { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .flower-card, .sound-button, .letter-card, .modal-close { backdrop-filter: none; background: #171015; }
}