:root {
  --night: #141a35;
  --night2: #222a55;
  --ink: #1d2244;
  --cream: #f7efdf;
  --paper: #fbf5e9;
  --butter: #f3d27e;
  --peach: #f2a98e;
  --sage: #9fc2a0;
  --powder: #9db8e8;
  --lilac: #c3a9e6;
  --rose: #eea3b9;
  --muted: rgba(247, 239, 223, .66);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --pad: max(20px, env(safe-area-inset-left));
  --bot: max(22px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, #2c3466 0%, var(--night2) 30%, var(--night) 70%, #0d1128 100%);
  color: var(--cream);
  font-family: var(--sans);
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100svh; display: block; touch-action: none; transition: filter .6s; }
.fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fx .win {
  position: absolute; width: 90vmax; height: 90vmax; right: -38vmax; top: -42vmax;
  background: radial-gradient(closest-side, rgba(255, 220, 160, .16), rgba(255, 220, 160, 0));
  animation: breathe 9s ease-in-out infinite;
}
.fx .grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09; mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0) } 33% { transform: translate(-3%, 2%) } 66% { transform: translate(2%, -3%) } 100% { transform: translate(-1%, 1%) } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .8 } }

/* ---------- header ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) var(--pad) 0;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); text-decoration: none; font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: .01em; }
.brand .ic { color: var(--butter); width: 20px; height: 20px; fill: var(--butter); stroke: none; }
.sound { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(247, 239, 223, .3); background: rgba(20, 26, 53, .35); display: grid; place-items: center; backdrop-filter: blur(6px); }
.sound .off { display: none; }
.sound.muted .on { display: none; }
.sound.muted .off { display: block; }

/* ---------- screens ---------- */
#ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: none; flex-direction: column; justify-content: space-between; align-items: center;
  padding: calc(max(14px, env(safe-area-inset-top)) + 58px) var(--pad) var(--bot);
  text-align: center;
}
.screen.on { display: flex; }
.screen .head, .screen .foot { pointer-events: auto; width: 100%; max-width: 520px; }
.screen .head { pointer-events: none; }
.foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 34px; }

.kicker { margin: 0 0 6px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.title { margin: 0; font-family: var(--serif); font-weight: 340; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(54px, 15vw, 112px); line-height: .88; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(10, 12, 30, .6); }
.title em { display: block; font-style: italic; color: var(--butter); font-weight: 380; }
.title .w { display: block; opacity: 0; filter: blur(14px); transform: translateY(26px); animation: rise 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
.title .w:nth-child(1) { animation-delay: 1.3s; }
.title .w:nth-child(2) { animation-delay: 1.65s; }
.reveal { opacity: 0; transform: translateY(14px); animation: rise 1s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: 2.2s; }
.foot .reveal:nth-child(2) { animation-delay: 2.45s; }
.foot .reveal:nth-child(3) { animation-delay: 2.65s; }
@keyframes rise { to { opacity: 1; filter: none; transform: none; } }
.seen .title .w, .seen .reveal { animation-delay: 0s !important; animation-duration: .6s; }

.steps3 { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; justify-content: center; width: 100%; }
.steps3 li { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.2; color: var(--cream); }
.steps3 .ic { width: 26px; height: 26px; color: var(--butter); }

.name { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 360; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(50px, 14vw, 96px); line-height: .95; color: var(--cream); text-shadow: 0 2px 30px rgba(10, 12, 30, .6); overflow-wrap: anywhere; }
.count { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(247, 239, 223, .1); border: 1px solid rgba(247, 239, 223, .2); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); }
.chip .ic { width: 16px; height: 16px; color: var(--butter); }
.tapline { margin: 0; color: var(--muted); font-size: 14.5px; min-height: 1.2em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 99px; border: 0;
  background: var(--butter); color: var(--ink); font-weight: 700; font-size: 17px; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 30px -10px rgba(243, 210, 126, .6);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.97); }
.btn.big { min-height: 62px; width: 100%; max-width: 360px; font-size: 19px; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn.line { background: rgba(20, 26, 53, .35); color: var(--cream); border: 1.5px solid rgba(247, 239, 223, .35); box-shadow: none; backdrop-filter: blur(6px); }
.btn.soft { background: rgba(247, 239, 223, .14); color: var(--cream); box-shadow: none; border: 1.5px solid rgba(247, 239, 223, .3); }
.btn.glow { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(243, 210, 126, .12), 0 0 60px rgba(243, 210, 126, .55); } }
.btn:disabled { opacity: .5; }
.row { display: flex; gap: 10px; width: 100%; max-width: 360px; }
.row .btn { flex: 1; padding: 0 10px; font-size: 15.5px; white-space: nowrap; gap: 8px; }
.row .btn.only { flex: 0 0 52px; padding: 0; }
.ghost { background: none; border: 0; color: var(--muted); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; padding: 6px; }

/* ---------- paper card screens ---------- */
.card-screen { justify-content: flex-end; }
@media (min-width: 900px) and (min-height: 760px) { .card-screen { justify-content: center; } }
.paper, .reader {
  pointer-events: auto; position: relative; width: 100%; max-width: 460px; max-height: 100%;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(180deg, #fcf7ec, #f4ead6);
  color: var(--ink); border-radius: 28px; padding: 26px 22px 22px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: pop .5s cubic-bezier(.2, .9, .3, 1.2);
}
.paper::after, .reader::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.paper.center { align-items: center; text-align: center; }
.paper .btn.line, .reader .btn.line { color: var(--ink); background: transparent; border-color: rgba(29, 34, 68, .25); }
.paper .btn.soft { background: rgba(29, 34, 68, .07); color: var(--ink); border-color: rgba(29, 34, 68, .2); }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 26px; height: 5px; border-radius: 9px; background: rgba(29, 34, 68, .15); transition: background .3s, width .3s; }
.dots i.on { background: var(--ink); width: 40px; }
.step { display: none; flex-direction: column; gap: 14px; margin: 0; min-height: 0; }
.step.on { display: flex; animation: stepIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } }
.step.back { animation-name: stepBack; }
@keyframes stepBack { from { opacity: 0; transform: translateX(-24px); } }
.q { margin: 0; font-family: var(--serif); font-size: 31px; line-height: 1.1; font-weight: 420; font-variation-settings: "SOFT" 100, "opsz" 72; letter-spacing: -.01em; }
.q b { font-style: italic; font-weight: 420; }
.q.small { font-size: 24px; }
.hint { margin: 0; color: rgba(29, 34, 68, .6); font-size: 14.5px; }
.field {
  width: 100%; border: 0; border-bottom: 2px solid rgba(29, 34, 68, .3); background: transparent;
  font-family: var(--serif); font-style: italic; font-size: 34px; padding: 8px 2px; color: var(--ink); outline: none; border-radius: 0;
}
.field:focus { border-color: var(--ink); }
.field::placeholder { color: rgba(29, 34, 68, .28); }
input[type="date"].field { font-size: 26px; min-height: 58px; -webkit-appearance: none; appearance: none; }
.nav { display: flex; gap: 10px; align-items: center; justify-content: center; }
.nav .btn.line { flex: 0 0 62px; min-height: 62px; padding: 0; }
.nav .btn.big { flex: 1; }
.paper .btn { box-shadow: 0 8px 20px -10px rgba(29, 34, 68, .5); }
.paper .btn.big:not(.soft) { background: var(--ink); color: var(--cream); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ages button {
  aspect-ratio: 1.35; border-radius: 22px; border: 2px solid rgba(29, 34, 68, .15); background: rgba(255, 255, 255, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); transition: all .2s;
}
.ages b { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; font-variation-settings: "SOFT" 100; }
.ages small { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 600; }
.ages button.on { background: var(--ink); color: var(--butter); border-color: var(--ink); transform: rotate(-2deg) scale(1.03); }
.ages button.on small { color: var(--cream); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1.5px solid rgba(29, 34, 68, .2); background: rgba(255, 255, 255, .55); border-radius: 99px; padding: 10px 16px; font-weight: 600; font-size: 15px; color: var(--ink); }
.chips button:active { background: var(--butter); }

.letter {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 14px; border-radius: 16px;
  background: #fffdf6;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(29, 34, 68, .35);
}
.dear { margin: 0; font-family: var(--hand); font-size: 30px; line-height: 34px; color: #2b3a78; }
.letter textarea {
  border: 0; outline: none; resize: none; background: transparent; width: 100%;
  height: clamp(136px, 36svh, 340px); font-family: var(--hand); font-size: 25px; line-height: 34px; color: #2b3a78; padding: 0;
  background: repeating-linear-gradient(180deg, transparent 0 32px, rgba(110, 140, 200, .25) 32px 33px, transparent 33px 34px) local;
}
.letter textarea::placeholder { color: rgba(43, 58, 120, .35); }
.sig { margin: 0; text-align: right; font-family: var(--hand); font-size: 26px; color: #2b3a78; }

.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative; aspect-ratio: 1; border-radius: 24px; border: 2px dashed rgba(29, 34, 68, .25); background: rgba(255, 255, 255, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--ink); overflow: hidden; cursor: pointer;
}
.tile .ic { width: 38px; height: 38px; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.tile.has { border-style: solid; border-color: var(--ink); }
.tile.has img { display: block; }
.tile.has img + .ic, .tile.has img ~ span { display: none; }
.tile.rec-on { background: #fde3dc; border-color: #d9574a; border-style: solid; }
.tile.has-audio { background: var(--sage); border-style: solid; border-color: var(--ink); }
.rec { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.recbtn { width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; display: grid; place-items: center; }
.recbtn i { width: 26px; height: 26px; border-radius: 50%; background: #d9574a; transition: all .2s; }
.recbtn.on i { border-radius: 6px; width: 22px; height: 22px; }
.recbtn.on { animation: recpulse 1.2s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 10px rgba(217, 87, 74, .15); } }
.rectime { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; min-width: 52px; }
.rec audio { width: 100%; height: 40px; }

.charms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.charms button { aspect-ratio: 1; border-radius: 18px; border: 2px solid rgba(29, 34, 68, .12); background: rgba(255, 255, 255, .55); display: grid; place-items: center; padding: 3px; transition: all .2s; }
.charms svg { width: 100%; height: 100%; }
.charms button.on { border-color: var(--ink); transform: translateY(-4px) rotate(-4deg); background: #fff; }
.swatches { display: flex; gap: 10px; justify-content: center; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(29, 34, 68, .2); transition: transform .2s; }
.swatches button.on { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.12); }

/* ---------- made ---------- */
.seal { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e88a7a, #b84a45); box-shadow: 0 6px 0 #8f3532, 0 14px 30px -8px rgba(143, 53, 50, .7); color: #fbe1d5; animation: stamp .7s cubic-bezier(.2, .9, .3, 1.4); }
.seal .ic { width: 34px; height: 34px; fill: currentColor; stroke: none; }
@keyframes stamp { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } }
.todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.todo li { display: flex; align-items: center; gap: 12px; }
.todo .n { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-family: var(--serif); }
.todo li.done .n { background: var(--sage); border-color: var(--sage); color: transparent; position: relative; }
.todo li.done .n::after { content: ""; position: absolute; width: 12px; height: 7px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.todo .btn { flex: 1; max-width: none; font-size: 17px; }

/* ---------- envelope ---------- */
#s-seal { justify-content: center; }
.envelope { position: relative; width: min(78vw, 320px); aspect-ratio: 1.45; margin-top: 10vh; perspective: 900px; }
.envelope > * { position: absolute; }
.env-back { inset: 0; background: #e9d3ae; border-radius: 10px; }
.env-paper { left: 7%; right: 7%; top: -48%; height: 86%; background: #fffdf6; border-radius: 8px; padding: 14px 16px; color: #2b3a78; font-family: var(--hand); font-size: 22px; text-align: left; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.env-paper p { margin: 0 0 10px; }
.env-paper i { display: block; height: 2px; margin: 12px 0; background: rgba(110, 140, 200, .35); }
.env-front { inset: 0; border-radius: 10px; background: linear-gradient(to top right, #f1dfbd 50%, transparent 50.5%) left / 50.5% 100% no-repeat, linear-gradient(to top left, #ecd8b3 50%, transparent 50.5%) right / 50.5% 100% no-repeat, linear-gradient(to top, #f4e3c4 52%, transparent 52.5%); }
.env-flap { left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(to bottom, #e3c99e, #dcc092); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transform: rotateX(180deg); z-index: -1; }
.env-wax { left: 50%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e88a7a, #b84a45); display: grid; place-items: center; color: #fbe1d5; opacity: 0; transform: scale(2); box-shadow: 0 4px 0 #8f3532; }
.env-wax .ic { fill: currentColor; stroke: none; width: 24px; height: 24px; }
.envelope.go .env-paper { animation: slidein .7s .2s cubic-bezier(.5, 0, .3, 1) forwards; }
.envelope.go .env-flap { animation: flap .5s .9s ease-in forwards; }
.envelope.go .env-wax { animation: wax .45s 1.35s cubic-bezier(.2, .9, .3, 1.4) forwards; }
.envelope.go { animation: flyup 1s 2.1s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes slidein { to { top: 8%; } }
@keyframes flap { 0% { transform: rotateX(180deg); z-index: -1; } 50% { z-index: 3; } 100% { transform: rotateX(0); z-index: 3; } }
@keyframes wax { to { opacity: 1; transform: scale(1); z-index: 4; } }
@keyframes flyup { to { transform: translateY(-48vh) scale(.12) rotate(-12deg); opacity: 0; } }

/* ---------- reader ---------- */
.reader { max-width: 520px; height: min(100%, 760px); gap: 14px; }
.readbar { display: flex; align-items: center; justify-content: space-between; }
.pager { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(29, 34, 68, .6); }
.page { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; animation: stepIn .5s cubic-bezier(.2, .8, .2, 1); }
.page.back { animation-name: stepBack; }
.page .from { display: flex; align-items: center; gap: 12px; }
.page .from .badge { width: 46px; height: 46px; flex: none; }
.page .from b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.page .from small { color: rgba(29, 34, 68, .6); font-size: 13.5px; }
.page .polaroid { align-self: center; background: #fff; padding: 10px 10px 34px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); transform: rotate(-2.2deg); max-width: 88%; }
.page .polaroid img { display: block; max-width: 100%; max-height: 38svh; object-fit: contain; }
.page .body { font-family: var(--hand); font-size: 26px; line-height: 1.3; color: #2b3a78; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 99px; background: rgba(29, 34, 68, .07); }
.voice button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: var(--cream); display: grid; place-items: center; flex: none; }
.voice .bars { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.voice .bars i { flex: 1; background: rgba(29, 34, 68, .3); border-radius: 3px; }
.voice.playing .bars i { background: var(--ink); animation: bar .8s ease-in-out infinite alternate; }
@keyframes bar { to { transform: scaleY(.35); } }
.voice span { font-weight: 600; font-size: 14px; }

/* ---------- sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 8; background: rgba(8, 10, 24, .55); display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; animation: fade .25s; }
.sheet__in { width: 100%; max-width: 480px; max-height: 80svh; background: var(--paper); color: var(--ink); border-radius: 28px 28px 0 0; padding: 24px 22px calc(var(--bot) + 10px); display: flex; flex-direction: column; gap: 12px; animation: up .35s cubic-bezier(.2, .9, .3, 1); }
.sheet .btn.line { color: var(--ink); background: transparent; border-color: rgba(29, 34, 68, .25); }
.sheet .btn.big { background: var(--ink); color: var(--cream); max-width: none; }
.who { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.who li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(29, 34, 68, .1); }
.who li span { flex: 1; font-weight: 600; text-align: left; }
.who li small { color: rgba(29, 34, 68, .55); }
.who .badge { width: 30px; height: 30px; }
.who button { border: 0; background: none; color: #b84a45; font-weight: 600; padding: 6px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

/* ---------- toast + alert ---------- */
.toast { position: fixed; left: 50%; top: 46%; transform: translate(-50%, -20px); z-index: 9; background: var(--cream); color: var(--ink); padding: 12px 18px; border-radius: 99px; font-weight: 600; font-size: 15px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: all .35s cubic-bezier(.2, .9, .3, 1.2); max-width: calc(100vw - 40px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.alert { position: fixed; inset: 0; z-index: 10; background: rgba(8, 10, 24, .6); display: grid; place-items: center; padding: 20px; }
.alert__in { max-width: 420px; background: #fff3ef; color: #5a1c17; border: 2px solid #d9574a; border-radius: 20px; padding: 20px; font-size: 16px; line-height: 1.4; display: flex; flex-direction: column; gap: 12px; }
.alert__in b { color: #c0392b; }
.alert__do { font-size: 15px; }
.alert__row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.alert .btn.line { color: #5a1c17; border-color: rgba(90, 28, 23, .3); background: transparent; }
.alert .btn { background: #5a1c17; color: #fff3ef; box-shadow: none; }
.nojs { position: fixed; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; z-index: 20; }

/* charm badge colours (svg) */
.badge path, .badge circle, .badge ellipse { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }

/* ---------- small phones ---------- */
@media (max-height: 700px) {
  .screen { padding-top: calc(max(10px, env(safe-area-inset-top)) + 50px); }
  .title { font-size: clamp(46px, 13vw, 90px); }
  .name { font-size: clamp(42px, 12vw, 80px); }
  .steps3 li { font-size: 12.5px; }
  .foot { gap: 10px; padding-bottom: 30px; }
  .btn.big { min-height: 56px; }
  .q { font-size: 26px; }
  .paper { padding: 20px 18px 18px; gap: 14px; }
  .field { font-size: 28px; }
  .ages b { font-size: 38px; }
  .ages button { aspect-ratio: 1.6; }
  .extras { grid-template-columns: 1fr 1fr; }
  .tile { aspect-ratio: 1.25; }
}
@media (min-width: 900px) {
  .screen:not(.card-screen) { padding-left: 6vw; padding-right: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; }
}
/* keep the Tassh badge (fixed bottom-right) clear of the cards */
.card-screen { padding-bottom: calc(var(--bot) + 38px); }
@media (min-width: 900px) and (min-height: 760px) { .card-screen { padding-bottom: var(--bot); } }
.reader { text-align: left; }
.reader .btn.big { background: var(--ink); color: var(--cream); }
.page .dear { margin: 4px 0 -6px; }

/* day / month / year pickers */
.dob { display: grid; grid-template-columns: .85fr 1.75fr 1.25fr; gap: 7px; }
.dob label { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.dob span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(29, 34, 68, .55); padding-left: 4px; }
.dob select {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 60px; border-radius: 16px;
  border: 2px solid rgba(29, 34, 68, .18); padding: 0 22px 0 10px; color: var(--ink); text-overflow: clip;
  font-family: var(--serif); font-size: 19px; font-variation-settings: "SOFT" 100;
  background: rgba(255, 255, 255, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2244' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center / 16px;
}
.dob select:focus { outline: none; border-color: var(--ink); }
.ages button.past { opacity: .35; border-style: dashed; }
.ages button.past small::after { content: " · passed"; }
button, .btn, .tile, select, a { touch-action: manipulation; }

/* ---------- how it works ---------- */
.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; position: relative; }
.how::before { content: ""; position: absolute; left: 25px; top: 30px; bottom: 30px; border-left: 2px dashed rgba(29, 34, 68, .2); }
.how li { display: flex; align-items: center; gap: 14px; position: relative; opacity: 0; transform: translateY(12px); animation: rise .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.how li:nth-child(1) { animation-delay: .15s; } .how li:nth-child(2) { animation-delay: .35s; }
.how li:nth-child(3) { animation-delay: .55s; } .how li:nth-child(4) { animation-delay: .75s; }
.how .hi { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--butter); color: var(--ink); box-shadow: 0 0 0 5px #f8f0e0; }
.how li:nth-child(2) .hi { background: var(--peach); } .how li:nth-child(3) .hi { background: var(--powder); } .how li:nth-child(4) .hi { background: var(--sage); }
.how .hi .ic { width: 24px; height: 24px; }
.how b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; }
.how small { display: block; font-size: 15px; color: rgba(29, 34, 68, .65); margin-top: 2px; }
.kicker.ink { color: rgba(29, 34, 68, .55); margin: 0; }
.big-name { font-style: italic; font-size: 44px; margin-top: -10px; }
.ghost.dark { color: rgba(29, 34, 68, .6); }
.links { display: flex; gap: 6px; align-items: center; color: var(--muted); }

/* ---------- letter attachments ---------- */
.attach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.att {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; cursor: pointer;
  border: 2px dashed rgba(29, 34, 68, .28); border-radius: 18px; background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 700; font-size: 14.5px; padding: 6px;
}
.att .ic { width: 24px; height: 24px; }
.att:active { background: var(--butter); }
.att.done { border-style: solid; border-color: var(--ink); background: #fff; }
.strip { display: flex; gap: 8px; overflow-x: auto; min-height: 0; padding: 2px 0; scrollbar-width: none; }
.strip:empty { display: none; }
.strip::-webkit-scrollbar { display: none; }
.thumb { position: relative; flex: none; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--ink); color: var(--cream); display: grid; place-items: center; animation: pop .35s cubic-bezier(.2, .9, .3, 1.3); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .tag { position: absolute; left: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(29, 34, 68, .8); display: grid; place-items: center; }
.thumb .tag .ic { width: 11px; height: 11px; color: #fff; }
.thumb.voice-t { background: var(--sage); color: var(--ink); }
.thumb.voice-t .ic { width: 26px; height: 26px; }
.thumb .x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; padding: 0; }
.thumb .x .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.letter textarea { height: clamp(96px, 24svh, 300px); }
.progress { height: 8px; border-radius: 9px; background: rgba(29, 34, 68, .12); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 9px; transition: width .2s; }

/* voice sheet */
.sheet__in.center { align-items: center; text-align: center; }
.sheet .recbtn { margin-top: 6px; }
.row2 { display: flex; gap: 10px; width: 100%; }
.row2 .btn { flex: 1; }
.sheet audio { width: 100%; }

/* reader media */
.gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin: 0 -2px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery .polaroid { scroll-snap-align: center; flex: none; max-width: 86%; margin: 0; }
.gallery .polaroid:nth-child(even) { transform: rotate(1.8deg); }
.gallery.one { justify-content: center; }
.page .polaroid img { max-height: 27svh; }
.page video { width: 100%; max-height: 40svh; border-radius: 14px; background: #000; }
.swipe { text-align: center; font-size: 13px; color: rgba(29, 34, 68, .55); margin-top: -8px; }
.sheet__in { padding-bottom: calc(var(--bot) + 46px); }
.page > * { flex-shrink: 0; }

/* ---------- the book finale ---------- */
.finale { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 0 4px; }
.finale .q { margin-top: 6px; }
.finale .btn.big { max-width: 340px; }
.finale .btn.line { color: var(--ink); background: transparent; border-color: rgba(29, 34, 68, .25); font-size: 15px; }
.finale .hint.small { font-size: 12.5px; }
.book3d { position: relative; width: 150px; height: 206px; perspective: 900px; margin: 6px 0 4px; animation: bookIn 1.2s cubic-bezier(.2, .8, .2, 1); }
.book3d > div { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; }
.bk-page { background: repeating-linear-gradient(90deg, #fff 0 2px, #ece6d8 2px 3px); transform: translate(7px, 5px); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .45); }
.bk-cover {
  background: radial-gradient(120% 80% at 50% 0%, #2c3466, #161b36 70%); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 10px 22px; gap: 2px;
  transform-origin: left center; animation: bookOpen 4.5s ease-in-out infinite; box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .5);
}
.bk-moon { position: absolute; top: 22px; width: 56px; height: 56px; fill: var(--butter); }
.bk-cover small { font-size: 7px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.bk-cover b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--butter); font-size: 28px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cover i { font-family: var(--serif); font-size: 9px; font-style: normal; opacity: .85; }
@keyframes bookIn { from { opacity: 0; transform: translateY(20px) rotate(-6deg) scale(.9); } }
@keyframes bookOpen { 0%, 55%, 100% { transform: rotateY(0); } 70%, 85% { transform: rotateY(-28deg); } }
.btn.busy { opacity: .75; pointer-events: none; }
@media (max-height: 700px) { .book3d { width: 118px; height: 162px; } .bk-moon { width: 44px; height: 44px; top: 16px; } .bk-cover b { font-size: 22px; } }

/* ---------- shop / checkout (light, calm, Shopify-clear) ---------- */
.screen.shop { padding: 0; background: #faf6ee; color: var(--ink); z-index: 6; pointer-events: auto; display: none; text-align: left; }
.screen.shop.on { display: block; }
.shop__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 calc(var(--bot) + 60px); -webkit-overflow-scrolling: touch; }
.shop__scroll.center { display: flex; align-items: center; justify-content: center; padding: 70px 20px calc(var(--bot) + 60px); }
.shop__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: rgba(250, 246, 238, .94); backdrop-filter: blur(10px); border-bottom: 1px solid #ebe3d3; }
.shop__back { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #ddd3bf; background: #fff; display: grid; place-items: center; color: var(--ink); flex: none; }
.shop__brand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--serif); font-style: italic; font-size: 17px; }
.shop__brand .ic { width: 18px; height: 18px; fill: #e6b84e; stroke: none; }
.shop__secure { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #3d7a52; }
.shop__secure .ic { width: 16px; height: 16px; }
.shop__demo { margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px; background: #fff3cd; border: 1px solid #f0d98a; font-size: 14px; font-weight: 600; text-align: center; }
.shop__grid { max-width: 1060px; margin: 0 auto; padding: 18px 16px 0; display: grid; gap: 22px; }
@media (min-width: 900px) {
  .shop__grid { grid-template-columns: 1.15fr .85fr; gap: 44px; padding-top: 36px; }
  .shop__side { position: sticky; top: 90px; align-self: start; }
}
.pv { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.pv::-webkit-scrollbar { display: none; }
.pv figure { flex: none; margin: 0; scroll-snap-align: center; width: 62%; max-width: 270px; aspect-ratio: 148 / 210; border-radius: 6px 12px 12px 6px; overflow: hidden; background: #eee7d8; box-shadow: 0 14px 30px -14px rgba(29, 34, 68, .45), 0 0 0 1px rgba(0, 0, 0, .05); position: relative; }
.pv figure img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.pv figure img.in { opacity: 1; }
.pv figure .lock { position: absolute; inset: auto 10px 10px 10px; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(22, 27, 54, .82); color: #fff; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 99px; }
.pv figure .lock .ic { width: 15px; height: 15px; }
.shop__kicker { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #9a8f78; }
.shop__title { margin: 4px 0 6px; font-family: var(--serif); font-weight: 420; font-size: clamp(28px, 7vw, 40px); line-height: 1.05; font-variation-settings: "SOFT" 100; }
.shop__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.shop__price b { font-size: 24px; }
.shop__price span { font-size: 13px; font-weight: 700; color: #3d7a52; background: #e3f1e6; padding: 3px 9px; border-radius: 99px; }
.shop__inside { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.shop__inside li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.shop__inside .ic { width: 20px; height: 20px; color: #b88a2e; }
.bumps { display: grid; gap: 12px; margin-bottom: 16px; }
.bump { border: 2px dashed #d9534f; border-radius: 14px; background: #fff; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.bump.on { border-style: solid; border-color: #3d7a52; box-shadow: 0 8px 24px -14px rgba(61, 122, 82, .7); }
.bump__head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: #fff3cd; font-weight: 800; font-size: 15px; }
.bump.on .bump__head { background: #e3f1e6; }
.bump__arrow { color: #d9534f; animation: nudge 1.1s ease-in-out infinite; display: inline-flex; }
.bump__arrow .ic { width: 20px; height: 20px; stroke-width: 2.4; }
.bump.on .bump__arrow { display: none; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.bump__box { width: 24px; height: 24px; flex: none; border-radius: 6px; border: 2px solid var(--ink); background: #fff; display: grid; place-items: center; }
.bump__box .ic { width: 16px; height: 16px; stroke-width: 3; opacity: 0; }
.bump.on .bump__box { background: #3d7a52; border-color: #3d7a52; color: #fff; }
.bump.on .bump__box .ic { opacity: 1; }
.bump__head em { font-style: normal; margin-left: auto; white-space: nowrap; }
.bump__body { display: flex; gap: 12px; padding: 12px; align-items: center; }
.bump__body img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; background: #eee7d8; }
.bump__body p { margin: 0; font-size: 14px; line-height: 1.35; color: #4a4e66; }
.bump__body b { color: var(--ink); }
.sum { background: #fff; border: 1px solid #ebe3d3; border-radius: 14px; padding: 12px 14px; display: grid; gap: 7px; margin-bottom: 14px; }
.sum div { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.sum .tot { border-top: 1px solid #ebe3d3; padding-top: 9px; margin-top: 2px; font-weight: 800; font-size: 18px; }
.sum .tot small { font-weight: 600; color: #8b8fa3; font-size: 12px; margin-right: 6px; }
.btn.pay { width: 100%; max-width: none; background: var(--ink); color: #fff; min-height: 64px; font-size: 18px; box-shadow: 0 14px 30px -12px rgba(29, 34, 68, .6); position: relative; overflow: hidden; }
.btn.pay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.paywith { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 6px; }
.paywith span { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; border: 1px solid #ddd3bf; background: #fff; color: #4a4e66; }
.fine { font-size: 12.5px; line-height: 1.45; color: #7a7d93; text-align: center; margin: 8px 0 0; }
.th-step { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; animation: pop .5s cubic-bezier(.2, .9, .3, 1.2); }
.spin { width: 54px; height: 54px; border-radius: 50%; border: 4px solid #e6dcc6; border-top-color: var(--ink); animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.ok-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; border-radius: 99px; background: #e3f1e6; color: #2f6a44; font-weight: 800; font-size: 14px; }
.ok-pill .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.a4mock { position: relative; height: 210px; width: 230px; margin: 6px 0; }
.a4mock > div { position: absolute; bottom: 0; border-radius: 4px 10px 10px 4px; background: radial-gradient(120% 80% at 50% 0%, #2c3466, #161b36 70%); color: var(--butter); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .5); font-family: var(--serif); font-style: italic; }
.a4mock small { font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 11px; color: var(--cream); letter-spacing: .14em; opacity: .7; }
.a4-big { left: 0; width: 148px; height: 209px; font-size: 26px; animation: grow 2.4s ease-in-out infinite; transform-origin: bottom left; }
.a4-small { right: 0; width: 104px; height: 147px; font-size: 18px; }
@keyframes grow { 50% { transform: scale(1.04) rotate(-1deg); } }
.offer-line { margin: 0; font-size: 16px; line-height: 1.45; }
.dl { width: 100%; display: grid; gap: 10px; }
.dl a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1.5px solid #e2d8c4; color: var(--ink); text-decoration: none; text-align: left; transition: transform .15s; }
.dl a:active { transform: scale(.98); }
.dl a img { width: 46px; height: 60px; object-fit: cover; border-radius: 3px 6px 6px 3px; flex: none; background: #eee7d8; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); }
.dl a b { display: block; font-size: 16px; }
.dl a small { color: #7a7d93; font-size: 13px; }
.dl a .go { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.dl a .go .ic { width: 18px; height: 18px; }
.btn.line.dark { color: var(--ink); background: transparent; border-color: #d9cfbb; }
.center-row { justify-content: center; }
.finale .pv { margin: 0; padding: 4px 0 10px; justify-content: center; }
.finale .pv figure { width: 112px; }
.finale .price-tag { font-weight: 800; }

.shopping .top, .shopping #tassh-mark { display: none !important; }

.paybar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(var(--bot) - 6px); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid #ebe3d3;
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .9, .3, 1); }
.paybar.on { transform: none; }
.paybar small { display: block; font-size: 11px; font-weight: 700; color: #8b8fa3; text-transform: uppercase; letter-spacing: .1em; }
.paybar b { font-size: 20px; }
.paybar .btn { background: var(--ink); color: #fff; min-height: 50px; padding: 0 26px; box-shadow: none; }