:root {
  --red: #e94238;
  --red-dark: #bd2923;
  --yellow: #f8d44c;
  --blue: #7db7df;
  --blue-dark: #3a7ca9;
  --cream: #fff8df;
  --paper: #fffdf4;
  --ink: #171717;
  --muted: #6f695e;
  --white: #fff;
  --shadow: 7px 8px 0 var(--ink);
  --font-display: "Fredoka", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-hand: "Caveat", cursive;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18px 18px, rgba(248, 212, 76, .27) 0 3px, transparent 3.5px) 0 0 / 64px 64px,
    linear-gradient(145deg, #fffdf4, #fff3bf);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-state {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18px 18px, rgba(248, 212, 76, .25) 0 3px, transparent 3.5px) 0 0 / 64px 64px,
    linear-gradient(145deg, #fffdf4, #fff3bf);
}
.app-loading .app-state { display: grid; }
.app-loading > .screen,
.app-loading > .finale { visibility: hidden; }
.state-card {
  position: relative;
  width: min(100%, 560px);
  padding: clamp(2rem, 7vw, 4rem);
  border: 3px solid var(--ink);
  border-radius: 9px 28px 12px 24px;
  background: var(--paper);
  box-shadow: 9px 11px 0 var(--ink);
  text-align: center;
}
.state-card::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 50%;
  width: 112px;
  height: 30px;
  background: rgba(125, 183, 223, .78);
  transform: translateX(-50%) rotate(-2deg);
}
.state-card h1 { margin: .25rem auto 1rem; font-size: clamp(2rem, 8vw, 3.6rem); }
.state-card > p:not(.eyebrow) { margin: 0 auto 1.4rem; color: var(--muted); font: 600 1.15rem/1.45 var(--font-hand); }
.state-loader { display: flex; justify-content: center; gap: 8px; margin: 0 auto 1.25rem; }
.state-loader i { width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 50%; background: var(--red); animation: state-bounce .8s ease-in-out infinite alternate; }
.state-loader i:nth-child(2) { background: var(--yellow); animation-delay: .15s; }
.state-loader i:nth-child(3) { background: var(--blue); animation-delay: .3s; }
@keyframes state-bounce { to { transform: translateY(-10px) rotate(12deg); } }
.app-state[data-state="not-found"] .state-card { box-shadow: 9px 11px 0 var(--red); }
.app-state[data-state="error"] .state-card { box-shadow: 9px 11px 0 var(--blue-dark); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .2;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 13px 17px, rgba(23, 23, 23, .12) 0 .5px, transparent .7px 5px),
    repeating-radial-gradient(circle at 43px 31px, rgba(255, 255, 255, .5) 0 .5px, transparent .7px 7px);
  background-size: 61px 53px, 73px 67px;
}

.screen {
  display: none;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 0;
}
.screen.is-active { display: flex; animation: screen-in .55s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.eyebrow {
  display: inline-flex;
  margin: 0 0 .8rem;
  padding: .38rem .8rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font: 700 .72rem/1 var(--font-display);
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 2px 3px 0 rgba(23, 23, 23, .15);
}

h1, h2 { margin: 0; font-family: var(--font-display); line-height: .98; letter-spacing: -.045em; }
h1 { max-width: 620px; font-size: clamp(2.25rem, 7vw, 4.65rem); }
h2 { font-size: clamp(2.1rem, 6vw, 4rem); }
p { line-height: 1.6; }

.lead { max-width: 470px; margin: .9rem auto 1.35rem; color: var(--muted); font-size: clamp(.95rem, 2vw, 1.1rem); }
.microcopy, .tap-hint { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }

.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .82rem 1.35rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font: 700 .93rem/1 var(--font-display);
  text-transform: uppercase;
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn--primary { color: var(--white); background: var(--red); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 3px 0 var(--ink); }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible { outline: 4px solid rgba(58, 124, 169, .35); outline-offset: 4px; }

.comic-dots { position: absolute; width: 210px; height: 210px; border-radius: 50%; opacity: .42; background: radial-gradient(var(--red) 0 3px, transparent 3.5px) 0 0/18px 18px; }
.dots-one { top: -78px; left: -62px; }
.dots-two { right: -82px; bottom: -75px; background-image: radial-gradient(var(--blue-dark) 0 3px, transparent 3.5px); }

.gate { position:relative; overflow:hidden; align-items:center; justify-content:center; padding:max(28px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom)); background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(248,212,76,.08)); }
.wish-screen { position:relative; overflow:hidden; align-items:center; justify-content:center; padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom)); }
.gate-card { position:relative; display:grid; width:min(100%,920px); grid-template-columns:minmax(260px,.82fr) minmax(360px,1.18fr); align-items:center; gap:clamp(2rem,5vw,4.6rem); padding:clamp(2rem,5vw,4.2rem); border:3px solid var(--ink); border-radius:8px 32px 10px 28px; background:var(--paper); box-shadow:12px 14px 0 var(--ink); text-align:left; }
.gate-card::before { content:""; position:absolute; inset:13px; z-index:0; border:1px dashed rgba(23,23,23,.17); border-radius:3px 23px 4px 20px; pointer-events:none; }
.gate-card>* { position:relative; z-index:1; }
.wish-card { position:relative; width:min(100%,680px); text-align:center; }

.gif-slot { position: relative; display: grid; place-items: center; overflow: hidden; }
.gif-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gif-slot img:not([hidden]) + .gif-placeholder { display: none; }
.gif-placeholder {
  display: grid;
  min-width: 116px;
  min-height: 104px;
  place-content: center;
  gap: .2rem;
  padding: .8rem;
  border: 2px dashed rgba(23, 23, 23, .4);
  border-radius: 48% 52% 45% 55%;
  color: var(--muted);
  background: rgba(255, 255, 255, .5);
  font: 600 .67rem/1 var(--font-display);
  letter-spacing: .08em;
  text-align: center;
}
.gif-placeholder span { justify-self: center; padding: .28rem .45rem; border-radius: 6px; color: var(--white); background: var(--red); font-size: .55rem; }
.gif-placeholder strong { color: var(--ink); font-size: 1rem; }
.gif-placeholder small { font: 500 .55rem/1.25 var(--font-body); letter-spacing: 0; }
.gate-visual { position:relative; display:grid; place-items:center; }
.gate-polaroid { position:relative; width:min(100%,270px); padding:15px 15px 13px; border:3px solid var(--ink); background:#fff; box-shadow:7px 8px 0 var(--red); transform:rotate(-2deg); }
.gate-polaroid::after { content:""; position:absolute; inset:12px 12px 50px; z-index:-1; background:#fff5c9; }
.gate-polaroid>p { margin:.55rem 0 0; font:600 1.15rem/1 var(--font-hand); text-align:center; }
.gate-tape { position:absolute!important; top:-18px; left:50%; z-index:3!important; width:92px; height:28px; background:rgba(125,183,223,.78); transform:translateX(-50%) rotate(3deg); }
.gate-doodle { position:absolute!important; color:var(--red); font:700 2rem var(--font-hand); }
.gate-doodle--one { top:3%; left:-3%; transform:rotate(-12deg); }.gate-doodle--two { right:-1%; bottom:8%; transform:rotate(9deg); }
.gif-slot--hero { width:190px; height:170px; margin:0 auto; }
.gif-slot--hero img { width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.gate-copy { position:relative; }
.gate-for { display:inline-block; margin:0 0 .9rem; padding-bottom:.25rem; border-bottom:2px solid var(--red); color:var(--muted); font:700 .72rem var(--font-display); letter-spacing:.09em; text-transform:uppercase; }
.gate-for span { color:var(--red); }
.gate-copy h1 { max-width:560px; color:var(--ink); font-size:clamp(2.45rem,5vw,4rem); line-height:1.02; letter-spacing:-.055em; }
.gate-copy h1 em { color:var(--red); font-family:var(--font-hand); font-weight:700; letter-spacing:-.02em; }
.gate-copy .lead { max-width:520px; margin:1rem 0 1.15rem; font-size:.95rem; line-height:1.65; }
.volume-note { display:flex; width:fit-content; align-items:center; gap:.7rem; margin-bottom:1.35rem; padding:.6rem .85rem; border:1px dashed rgba(23,23,23,.45); border-radius:12px; background:#fff8d8; }
.volume-note>span { display:grid; width:34px; height:34px; place-items:center; border:2px solid var(--ink); border-radius:50%; color:#fff; background:var(--blue-dark); font-weight:700; }
.volume-note p { display:grid; gap:.08rem; margin:0; line-height:1.2; }.volume-note strong { font:700 .72rem var(--font-display); text-transform:uppercase; }.volume-note small { color:var(--muted); font-size:.66rem; }
.gate-open-button { min-height:48px; border-radius:12px; color:#fff; background:var(--red); box-shadow:4px 5px 0 var(--ink); font-size:.82rem; text-transform:none; }
.gate-signoff { margin:1rem 0 0; color:var(--muted); font:600 .67rem var(--font-hand); letter-spacing:.02em; }
.gif-slot--wish { width: 155px; height: 135px; margin: 0 auto .6rem; }

.wish-screen { background: linear-gradient(155deg, #112444, #213d68 55%, #132742); color: var(--white); }
.wish-screen::before { content: ""; position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 42px 42px; }
.wish-card { z-index:1; width:min(100%,760px); }
.wish-heading { margin:0 auto 1.2rem; text-align:center; }
.wish-heading h2 { font-size:clamp(2.3rem,6vw,4.1rem); }
.wish-heading>p:last-child { max-width:570px; margin:.7rem auto 0; color:rgba(255,255,255,.72); font-size:.9rem; line-height:1.55; }
.wish-composer { width:100%; padding:clamp(1rem,3vw,1.4rem); border:2px solid rgba(255,255,255,.66); border-radius:22px; background:rgba(255,255,255,.1); box-shadow:0 18px 46px rgba(0,0,0,.2); backdrop-filter:blur(9px); }
.wish-composer.is-complete { display:none; }
.wish-input-card { width:100%; margin:0; text-align:left; }
.wish-input-card label { display:block; margin:0 0 .55rem .15rem; color:var(--white); font:600 1rem var(--font-hand); }
.wish-input-card label span { color:var(--yellow); }
.wish-input-card textarea { display:block; width:100%; min-height:105px; resize:vertical; padding:.9rem 1rem; border:2px solid var(--ink); border-radius:14px; outline:0; color:var(--ink); background:var(--paper); box-shadow:3px 4px 0 var(--ink); font:600 1.05rem/1.4 var(--font-hand); }
.wish-input-card textarea:focus { border-color:var(--yellow); box-shadow:3px 4px 0 var(--yellow),0 0 0 4px rgba(248,212,76,.22); }
.wish-input-card textarea:disabled { opacity:.65; }
.wish-input-meta { display:flex; justify-content:flex-end; gap:1rem; margin:.55rem .2rem 0; color:rgba(255,255,255,.68); font-size:.64rem; }
.wish-input-meta b { color:var(--white); }
.wish-status { min-height:.9rem; margin:.4rem .2rem 0!important; color:#ffd5d2!important; font-size:.7rem; line-height:1.3!important; }
.wish-status.is-loading { color:var(--yellow)!important; }
.wish-stars span { position: absolute; animation: twinkle 2s ease-in-out infinite; }
.wish-stars span:nth-child(1) { top: 14%; left: 15%; }
.wish-stars span:nth-child(2) { top: 23%; right: 18%; animation-delay: .4s; }
.wish-stars span:nth-child(3) { bottom: 20%; left: 23%; animation-delay: .9s; }
.wish-stars span:nth-child(4) { right: 12%; bottom: 13%; animation-delay: 1.3s; }
@keyframes twinkle { 50% { opacity: .3; transform: scale(.65) rotate(25deg); } }

.wish-action { display:flex; align-items:center; justify-content:center; gap:1.15rem; margin-top:.65rem; padding-top:.8rem; border-top:1px dashed rgba(255,255,255,.34); }
.gif-slot--writing { width:116px; height:92px; margin:-.45rem auto .75rem; }
.gif-slot--writing img { object-fit:contain; image-rendering:auto; }
.cake-illustration { position:relative; width:112px; height:112px; flex:0 0 112px; }
.cake-illustration>span { position:absolute; left:50%; transform:translateX(-50%); }
.flame { top: 0; width: 14px; height: 22px; border-radius: 55% 45% 55% 45%; background: #ffb525; box-shadow: 0 0 14px #ffb525; animation: flame 1s ease-in-out infinite alternate; }
@keyframes flame { to { transform: translateX(-50%) rotate(4deg) scale(.88, 1.08); } }
.flame.is-out { animation: flame-out .45s forwards; }
@keyframes flame-out { to { opacity: 0; transform: translate(-50%, -18px) scale(.1); } }
.candle { top: 21px; width: 11px; height: 31px; border: 2px solid var(--ink); border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-45deg,#fff 0 5px,var(--red) 5px 10px); }
.cake-top { top: 48px; z-index:2; width:86px; height:25px; border:2px solid var(--ink); border-radius:50%; background:#fff0e3; }
.cake-body { top:61px; width:86px; height:40px; border:2px solid var(--ink); border-top:0; border-radius:0 0 12px 12px; background:var(--red); }
.cake-body i { position:absolute; top:12px; width:8px; height:13px; border-radius:50%; background:var(--yellow); }
.cake-body i:nth-child(1) { left:16px; }.cake-body i:nth-child(2) { left:38px; }.cake-body i:nth-child(3) { right:15px; }
.cake-plate { top:98px; width:104px; height:11px; border:2px solid var(--ink); border-radius:50%; background:var(--blue); }
.wish-action-copy { display:grid; justify-items:start; gap:.2rem; text-align:left; }
.wish-action-copy>strong { font:700 .95rem var(--font-display); }
.wish-action-copy>small { color:rgba(255,255,255,.64); font-size:.67rem; }
.wish-submit-button { min-height:46px; margin-top:.55rem; border-radius:12px; color:var(--white); background:var(--red); box-shadow:4px 5px 0 var(--ink); font-size:.78rem; text-transform:none; }
.wish-submit-button:disabled { opacity:.58; cursor:wait; }
.wish-reveal { display: none; margin-top: .3rem; }
.wish-reveal.is-visible { display: block; animation: pop-in .65s cubic-bezier(.2, 1.4, .4, 1) both; }
.wish-reveal > strong { display: block; margin-bottom: 1rem; font: 600 clamp(1.3rem, 4vw, 1.8rem) var(--font-hand); }
.submitted-wish { width:min(100%,500px); margin:.3rem auto .65rem; padding:.75rem 1rem; border-left:3px solid var(--yellow); border-radius:0 12px 12px 0; color:var(--white); background:rgba(255,255,255,.08); font:600 clamp(1rem,3vw,1.25rem)/1.45 var(--font-hand); }
.wish-saved-note { display:block; margin-bottom:1rem; color:rgba(255,255,255,.65); font-size:.68rem; }
@keyframes pop-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

.home { flex-direction: column; align-items: center; padding: max(38px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom)); }
.home-header { position: relative; width: min(100%, 900px); margin-bottom: clamp(1.6rem, 4vw, 2.6rem); text-align: center; }
.gif-slot--home-sticker { position: absolute; top: -24px; left: 1%; width: 126px; height: 106px; transform: rotate(-5deg); }
.home-header h2 { color: var(--red); text-shadow: 3px 3px 0 var(--white), 5px 5px 0 var(--yellow); }
.home-header h2 span { color: var(--ink); }
.home-header > p:last-child { margin: .8rem auto 0; color: var(--muted); }
.gift-grid { display: grid; width: min(100%, 850px); grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 2.2vw, 1.4rem); }
.gift-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 295px;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 25px 18px 22px 17px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gift-card:nth-child(odd) { transform: rotate(-1deg); }.gift-card:nth-child(even) { transform: rotate(1deg); }
.gift-card:hover { transform: translate(2px, 3px) rotate(0); box-shadow: 4px 5px 0 var(--ink); }
.gift-card--yellow { background: #ffed9b; }.gift-card--blue { background: #d7edff; }.gift-card--red { background: #ffd4d0; }.gift-card--cream { background: var(--paper); }
.gift-number { font: 700 .75rem var(--font-display); }
.gif-slot--card { width: 100%; height: 145px; }
.gift-label { display: block; padding-top: .75rem; border-top: 2px solid var(--ink); }
.gift-label strong, .gift-label small { display: block; }.gift-label strong { font: 700 1rem var(--font-display); text-transform: uppercase; }.gift-label small { margin-top: .25rem; color: var(--muted); font-size: .67rem; }
.photo-stack { position: relative; width: 142px; height: 145px; margin: auto; }
.photo-stack i { position: absolute; inset: 12px 13px 7px; overflow: hidden; border: 3px solid var(--ink); border-radius: 5px; background: var(--paper); box-shadow: 3px 4px 0 rgba(23,23,23,.2); }
.photo-stack i:nth-child(1) { transform: rotate(-10deg); background: #ffd8d4; }
.photo-stack i:nth-child(2) { transform: rotate(9deg); background: #ffeb8b; }
.photo-stack i:nth-child(3) { transform: rotate(-1deg); background: #d9efff; }
.photo-stack i::before { content:""; position:absolute; top:20px; right:19px; width:21px; height:21px; border:3px solid var(--ink); border-radius:50%; background:var(--yellow); }
.photo-stack i::after { content:""; position:absolute; right:-4px; bottom:17px; left:-4px; height:62px; border-top:3px solid var(--ink); background:linear-gradient(140deg,transparent 0 27%,var(--blue-dark) 28% 53%,transparent 54%),linear-gradient(40deg,transparent 0 31%,var(--red) 32% 61%,transparent 62%),var(--cream); clip-path:polygon(0 100%,0 73%,25% 28%,47% 67%,68% 42%,100% 78%,100% 100%); }
.envelope-mini { position: relative; width: 135px; height: 92px; margin: auto; border: 3px solid var(--ink); border-radius: 8px; background: var(--red); overflow: hidden; }
.envelope-mini::before, .envelope-mini::after { content:""; position:absolute; width: 100px; height:100px; top:-55px; border:3px solid var(--ink); background:var(--cream); transform:rotate(45deg); }.envelope-mini::before { left:15px; }.envelope-mini::after { top:36px; background:#f65a50; }.envelope-mini span { position:absolute; z-index:2; top:39px; left:55px; width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; color:#fff; background:var(--red-dark); }
.home-footer { display: flex; gap: .35rem; align-items: center; margin-top: 2.4rem; color: var(--muted); font: 600 .75rem var(--font-display); text-transform: uppercase; }.home-footer b { color: var(--red); font-size: 1.1rem; }

.detail-screen { position: relative; align-items: center; justify-content: center; padding: max(70px, calc(env(safe-area-inset-top) + 56px)) 20px max(50px, env(safe-area-inset-bottom)); }
.back-button { position: fixed; top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); z-index: 80; min-height: 42px; padding: .55rem .9rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); cursor: pointer; box-shadow: 3px 4px 0 var(--ink); font: 700 .75rem var(--font-display); text-transform: uppercase; }
.detail-view { display: none; width: min(100%, 1000px); }.detail-view.is-visible { display: block; animation: view-in .5s cubic-bezier(.2,1,.3,1) both; }
@keyframes view-in { from { opacity:0; transform:translateY(20px) scale(.98); } }
.detail-heading { text-align: center; }.detail-heading > p:last-child { color: var(--muted); }

.wishes-layout { display: grid; place-items: center; }
.gif-slot--feature { width: min(100%, 255px); min-height: 250px; height: 250px; }
.note-card { position: relative; padding: clamp(1.6rem, 5vw, 3.5rem); border: 3px solid var(--ink); background: var(--paper); box-shadow: 10px 12px 0 var(--red); transform: rotate(1deg); }
.note-card--wishes { display:grid; width:min(100%,850px); grid-template-columns:minmax(190px,.72fr) minmax(300px,1.28fr); align-items:center; gap:clamp(1.2rem,4vw,3rem); }
.note-card::before { content:""; position:absolute; top:-16px; left:50%; width:110px; height:31px; background:rgba(125,183,223,.75); transform:translateX(-50%) rotate(-2deg); }
.note-card h2 { color:var(--red); }.wish-copy > p:not(.eyebrow) { font: 600 clamp(1.25rem, 2.7vw, 1.65rem)/1.45 var(--font-hand); }.note-card .signature { margin-top:1.4rem; color:var(--muted); }
.floating-words { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }.floating-words span { padding:.35rem .7rem; border:2px solid var(--ink); border-radius:999px; background:var(--yellow); font:600 .68rem var(--font-display); text-transform:uppercase; }.floating-words span:nth-child(even) { background:var(--blue); transform:rotate(2deg); }

.memory-stage { display:grid; grid-template-columns:auto minmax(0, 520px) auto; align-items:center; justify-content:center; gap:clamp(.7rem,3vw,1.5rem); margin-top:1.5rem; }
.memory-stage.is-single { grid-template-columns:minmax(0,520px); }
.round-button { display:inline-grid; width:46px; height:46px; place-items:center; flex:0 0 auto; border:3px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--yellow); cursor:pointer; box-shadow:3px 4px 0 var(--ink); font-weight:700; text-decoration:none; }
.round-button:disabled { opacity:.45; cursor:not-allowed; }
.polaroid { margin:0; padding:clamp(.75rem,2vw,1.1rem) clamp(.75rem,2vw,1.1rem) 1.25rem; border:3px solid var(--ink); background:var(--paper); box-shadow:9px 11px 0 var(--ink); transform:rotate(-.7deg); }
.memory-photo { aspect-ratio:4/3; overflow:hidden; border:2px solid var(--ink); background:var(--blue); }.memory-photo img, .memory-photo video { width:100%; height:100%; object-fit:cover; }.photo-placeholder { display:grid; height:100%; place-content:center; color:rgba(23,23,23,.55); background:repeating-linear-gradient(-45deg,rgba(255,255,255,.17) 0 12px,transparent 12px 24px); font:700 clamp(1.4rem,5vw,2.5rem)/1 var(--font-display); text-align:center; }.photo-placeholder small { font-size:.8rem; }
.polaroid figcaption { display:grid; gap:.25rem; padding:.9rem .35rem 0; }.polaroid figcaption strong { font:700 clamp(1.4rem,4vw,2rem) var(--font-hand); }.polaroid figcaption span { color:var(--muted); font-size:.83rem; }
.memory-dots { display:flex; justify-content:center; gap:.55rem; margin-top:1.6rem; }.memory-dots button { width:12px; height:12px; padding:0; border:2px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; }.memory-dots button.is-active { background:var(--red); transform:scale(1.2); }

.music-layout { display:grid; grid-template-columns:minmax(300px,1fr) minmax(310px,.85fr); align-items:center; gap:clamp(1.5rem,5vw,4rem); }
.record-scene { position:relative; min-height:440px; }.gif-slot--music { position:absolute; z-index:3; top:-15px; left:0; width:145px; height:145px; transform:rotate(-4deg); }
.turntable { position:absolute; right:0; bottom:0; width:min(92%,430px); aspect-ratio:1.15; border:3px solid var(--ink); border-radius:24px; background:var(--blue); box-shadow:10px 12px 0 var(--ink); }
.record { position:absolute; top:50%; left:43%; width:72%; aspect-ratio:1; border:3px solid var(--ink); border-radius:50%; background:repeating-radial-gradient(circle,#1c1c1c 0 7px,#333 8px 10px); transform:translate(-50%,-50%); }.record.is-playing { animation:spin 3.5s linear infinite; } @keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.record-label { position:absolute; inset:34%; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--yellow); font:700 .7rem/1 var(--font-display); text-align:center; }
.tonearm { position:absolute; top:16%; right:11%; width:12px; height:62%; border:3px solid var(--ink); border-radius:999px; background:#eee; transform:rotate(17deg); transform-origin:top; }.tonearm::before { content:""; position:absolute; top:-18px; left:-11px; width:28px; height:28px; border:3px solid var(--ink); border-radius:50%; background:var(--red); }
.player-card { padding:clamp(1.5rem,4vw,2.5rem); border:3px solid var(--ink); border-radius:24px; background:var(--paper); box-shadow:8px 10px 0 var(--red); }.player-card h2 { font-size:clamp(2rem,5vw,3.3rem); }.gift-track-cover { display:grid; width:110px; aspect-ratio:1; margin:1rem auto .7rem; place-items:center; overflow:hidden; border:3px solid var(--ink); border-radius:13px; background:var(--yellow); box-shadow:4px 5px 0 var(--ink); transform:rotate(-2deg); }.gift-track-cover img { width:100%; height:100%; object-fit:cover; }.gift-track-cover span { font:700 .65rem var(--font-display); }.track-name { margin:1.2rem 0 .1rem; font:700 1.15rem var(--font-display); }.artist-name { margin:0 0 1.3rem; color:var(--muted); font-size:.85rem; }.progress-wrap { display:grid; grid-template-columns:34px 1fr 34px; align-items:center; gap:.55rem; font-size:.68rem; font-weight:600; }.progress-wrap input { width:100%; accent-color:var(--red); cursor:pointer; }.player-actions { display:flex; justify-content:center; align-items:center; gap:1rem; margin:1.3rem 0; }.play-button { display:grid; width:66px; height:66px; place-items:center; border:3px solid var(--ink); border-radius:50%; color:#fff; background:var(--red); cursor:pointer; box-shadow:4px 5px 0 var(--ink); }.music-help { margin:0; color:var(--muted); font-size:.7rem; text-align:center; }.music-help code { color:var(--ink); }

.letter-view { text-align:center; }
.letter-heading { margin:.35rem 0 1rem; color:var(--red); font-size:clamp(2rem,6vw,3.3rem); }
.letter-paper { position:relative; width:min(100%,720px); margin:auto; padding:clamp(2.2rem,6vw,4.5rem) clamp(1.3rem,6vw,4.3rem) 2.2rem; border:3px solid var(--ink); background:linear-gradient(90deg,transparent 52px,rgba(233,66,56,.16) 53px 55px,transparent 56px),repeating-linear-gradient(#fffdf4 0 31px,#c6d9eb 32px 33px); box-shadow:10px 12px 0 var(--ink); text-align:left; transform:rotate(.3deg); }.letter-paper.is-open { animation:paper-in .65s cubic-bezier(.2,1,.3,1) both; } @keyframes paper-in { from { opacity:0; transform:translateY(70px) rotate(2deg); } }
.tape { position:absolute; top:-16px; left:50%; width:120px; height:32px; background:rgba(248,212,76,.78); transform:translateX(-50%) rotate(-2deg); }.letter-date { margin:0 0 1.4rem; color:var(--muted); font:600 .78rem var(--font-display); text-align:right; text-transform:uppercase; }.letter-copy { min-height:230px; white-space:pre-wrap; font:600 clamp(1.15rem,3.2vw,1.45rem)/1.5 var(--font-hand); }.letter-copy strong { display:block; margin-bottom:.7rem; font-size:1.25em; }.letter-copy em { display:block; margin-top:1rem; font-style:normal; }.gif-slot--letter { width:140px; height:115px; margin:1rem auto 0; }.letter-actions { display:flex; flex-direction:column; align-items:center; gap:.8rem; margin-top:1rem; }.text-button { border:0; border-bottom:1px solid currentColor; color:var(--muted); background:transparent; cursor:pointer; font-size:.75rem; }

.finale { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:18px; overflow-y:auto; background:rgba(17,36,68,.86); backdrop-filter:blur(8px); }.finale-card { position:relative; width:min(100%,520px); padding:clamp(1.5rem,5vw,2.6rem); border:3px solid var(--ink); border-radius:26px; background:var(--cream); box-shadow:10px 12px 0 var(--yellow); text-align:center; }.finale-close { position:absolute; top:10px; right:12px; width:38px; height:38px; border:0; border-radius:50%; background:transparent; cursor:pointer; font-size:2rem; }.gif-slot--finale { width:210px; height:170px; margin:0 auto .5rem; }.finale-card h2 { color:var(--red); }.finale-card > p:not(.eyebrow) { color:var(--muted); }.finale-card .btn { margin-top:.5rem; }

/* Secondary copy uses the softer handwritten voice throughout the gift. */
.lead,
.microcopy,
.tap-hint,
.gif-placeholder small,
.volume-note small,
.wish-heading > p:last-child,
.wish-input-meta,
.wish-status,
.wish-action-copy > small,
.wish-saved-note,
.home-header > p:last-child,
.gift-label small,
.detail-heading > p:last-child,
.polaroid figcaption span,
.artist-name,
.progress-wrap,
.music-help,
.letter-date,
.text-button,
.finale-card > p:not(.eyebrow) {
  font-family: var(--font-hand);
  font-weight: 600;
  letter-spacing: .01em;
}
.home-header > p:last-child { font-size:clamp(1.2rem,2.4vw,1.55rem); }
.gift-label small { font-size:.9rem; line-height:1.1; }
.wish-heading > p:last-child { font-size:1.15rem; }
.wish-action-copy > small,
.wish-saved-note,
.artist-name,
.music-help,
.polaroid figcaption span { font-size:1rem; }

.confetti-layer { position:fixed; inset:0; z-index:190; overflow:hidden; pointer-events:none; }.confetti { position:absolute; top:-20px; width:10px; height:18px; animation:confetti-fall var(--duration) linear forwards; transform:rotate(var(--rotation)); } @keyframes confetti-fall { to { transform:translate(var(--drift),110vh) rotate(800deg); } }

noscript { position:fixed; inset:auto 10px 10px; z-index:300; padding:1rem; color:#fff; background:var(--red); text-align:center; }

@media (max-width: 800px) {
  .gate { align-items:flex-start; overflow-y:auto; }
  .gate-card { width:min(100%,540px); grid-template-columns:1fr; gap:1.7rem; margin:auto; padding:2.3rem 2rem; text-align:center; }
  .gate-polaroid { width:225px; }
  .gif-slot--hero { width:165px; height:145px; }
  .gate-copy .lead { margin-inline:auto; }
  .volume-note { margin-inline:auto; }
  .gift-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px; }
  .gift-card { min-height:255px; }
  .music-layout { grid-template-columns:1fr; }
  .note-card--wishes { grid-template-columns:1fr; gap:.2rem; text-align:center; }
  .gif-slot--feature { min-height:210px; height:220px; margin:auto; }
  .record-scene { min-height:390px; max-width:520px; width:100%; margin:auto; }
  .music-layout { max-width:600px; margin:auto; }
}

@media (max-width: 520px) {
  .gate { padding:18px 14px 24px; }
  .gate-card { gap:1.25rem; padding:2rem 1.15rem 1.5rem; border-radius:7px 23px 8px 19px; box-shadow:8px 9px 0 var(--ink); }
  .gate-card::before { inset:9px; }
  .gate-polaroid { width:195px; padding:10px 10px 11px; box-shadow:5px 6px 0 var(--red); }
  .gate-tape { top:-14px; width:74px; height:23px; }
  .gif-slot--hero { width:150px; height:128px; }
  .gate-polaroid>p { font-size:.95rem; }
  .gate-copy h1 { font-size:clamp(2.05rem,9.7vw,2.75rem); }
  .gate-copy .lead { margin:.8rem auto 1rem; font-size:.82rem; line-height:1.55; }
  .gate-for { margin-bottom:.65rem; font-size:.62rem; }
  .volume-note { margin-bottom:1.1rem; padding:.52rem .65rem; text-align:left; }
  .volume-note>span { width:30px; height:30px; }
  .gate-open-button { width:min(100%,280px); }
  .gate-signoff { margin-top:.85rem; }
  .wish-screen { align-items:flex-start; overflow-y:auto; }
  .wish-card { padding-top:1vh; }
  .wish-heading { margin-bottom:.9rem; }
  .wish-heading h2 { font-size:clamp(2.05rem,10vw,2.8rem); }
  .wish-heading>p:last-child { font-size:.78rem; }
  .wish-composer { padding:.85rem; border-radius:17px; }
  .wish-input-card textarea { min-height:96px; }
  .wish-action { gap:.65rem; justify-content:space-between; }
  .gif-slot--writing { width:96px; height:76px; margin-bottom:.55rem; }
  .cake-illustration { width:84px; height:104px; flex-basis:84px; transform:scale(.8); transform-origin:center; }
  .wish-action-copy { flex:1; }
  .wish-submit-button { width:100%; padding-inline:.75rem; }
  .gift-grid { gap:13px; }
  .gift-card { min-height:205px; padding:.75rem; border-radius:18px; box-shadow:5px 6px 0 var(--ink); }
  .gif-slot--card { height:105px; }.gift-label strong { font-size:.78rem; }.gift-label small { display:none; }
  .photo-stack { width:106px; height:105px; }.photo-stack i { inset:7px 8px 5px; }.photo-stack i::before { top:12px; right:12px; width:15px; height:15px; }.photo-stack i::after { bottom:9px; height:48px; }
  .home { justify-content:flex-start; }.home-header { padding-top:74px; margin-bottom:1.35rem; }.home-header h2 { font-size:clamp(2.15rem,10vw,3rem); }
  .gif-slot--home-sticker { top:-8px; left:50%; width:108px; height:90px; transform:translateX(-50%) rotate(-4deg); }
  .detail-screen { align-items:flex-start; padding-inline:14px; }
  .back-button span { display:none; }
  .wishes-layout { gap:0; }.note-card { box-shadow:7px 8px 0 var(--red); }.note-card--wishes { padding-top:1.9rem; }.floating-words { margin-top:1.4rem; }
  .memory-stage { grid-template-columns:1fr 1fr; align-items:end; }.memory-stage.is-single { grid-template-columns:minmax(0,1fr); }.polaroid { grid-column:1/-1; grid-row:1; }.memory-stage .round-button { grid-row:2; justify-self:center; }
  .record-scene { min-height:330px; }.turntable { width:94%; }.gif-slot--music { width:105px; height:105px; }.player-card { box-shadow:6px 7px 0 var(--red); }
  .letter-paper { background:linear-gradient(90deg,transparent 31px,rgba(233,66,56,.16) 32px 34px,transparent 35px),repeating-linear-gradient(#fffdf4 0 31px,#c6d9eb 32px 33px); box-shadow:6px 7px 0 var(--ink); }
}

@media (max-width: 360px) {
  .gift-card { min-height:188px; }.gif-slot--card { height:92px; }.gift-label strong { font-size:.7rem; }
}

@media (max-width: 420px) {
  .wish-action { flex-direction:column; gap:.55rem; }
  .cake-illustration { width:96px; height:112px; flex:0 0 112px; margin-bottom:.15rem; transform:scale(.8); transform-origin:center top; }
  .wish-action-copy { width:100%; justify-items:center; padding-top:.2rem; text-align:center; }
  .wish-submit-button { max-width:260px; }
}

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