:root {
  --ink: #5b3a29;
  --ink-soft: #8a6a52;
  --rose: #c46a4e;
  --rose-deep: #a4492f;
  --pink: #e9a8a0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f4e6c3;
}

body {
  position: fixed;
  inset: 0;
  font-family: "Nunito", -apple-system, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* ---------- background ---------- */
.tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.tint.a { background: linear-gradient(170deg, #fbf1dc, #f3e2bd); opacity: 1; }

.blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  width: 95vmax; height: 95vmax;
  border-radius: 50%;
  animation: drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.b1 { background: radial-gradient(circle, rgba(255,150,185,.50), rgba(255,150,185,0) 62%); left: -48vmax; top: -45vmax; }
.b2 { background: radial-gradient(circle, rgba(201,182,255,.40), rgba(201,182,255,0) 62%); right: -55vmax; top: 5vh; animation-duration: 27s; }
.b3 { background: radial-gradient(circle, rgba(255,214,130,.34), rgba(255,214,130,0) 62%); left: -35vmax; bottom: -58vmax; animation-duration: 31s; }
.b4 { background: radial-gradient(circle, rgba(150,225,200,.32), rgba(150,225,200,0) 62%); right: -45vmax; bottom: -50vmax; animation-duration: 24s; }
@keyframes drift { to { transform: translate(7vmax, 5vmax) scale(1.08); } }

/* ---------- background images ---------- */
.bgimg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transition: opacity 2s ease;
}
.bg1 { background-image: url("pics/bg2.jpg"); opacity: 1; }   /* lock screen: coral flower pattern */
.bg2 { background-image: url("pics/bg1.jpg"); opacity: 0; }   /* after the flowers: orange iris */
body.story-on .bg1 { opacity: 0; }
body.story-on .bg2 { opacity: 1; }

canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx-back  { z-index: 1; }
#fx-front { z-index: 5; }

.screen {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
}

/* ---------- lock screen ---------- */
.lock {
  justify-content: center;
  text-align: center;
}
.lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -1vh;
}
/* small frosted pills behind text only */
.hint, .dots, .msg:not(:empty) {
  background: rgba(255,248,236,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(120,60,30,.12);
}
.lock-inner > * { transition: opacity .6s ease, transform .6s ease; }

.emblem {
  width: 54px; height: 54px;
  filter: drop-shadow(0 6px 14px rgba(190,110,80,.3));
  animation: bloomSpin 14s linear infinite;
}
@keyframes bloomSpin { to { transform: rotate(360deg); } }

.hint {
  margin: 14px 0 0;
  padding: 5px 16px 6px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

.dots {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 10px 16px;
}
.dots b { width: 5px; }
.dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(164,73,47,.5);
  background: rgba(255,255,255,.6);
  transition: background .15s, border-color .15s, transform .15s;
}
.dots i.on {
  background: #b9583a;
  border-color: #b9583a;
  animation: dotPop .25s ease;
}
.dots.wrong { animation: shake .45s ease; }
.dots.wrong i { background: #c0392b; border-color: #c0392b; }
.dots.correct i { background: #b9583a; border-color: #b9583a; box-shadow: 0 0 10px rgba(185,88,58,.55); }
@keyframes dotPop { 50% { transform: scale(1.35); } }

.msg {
  min-height: 20px;
  margin: 10px 0 0;
  padding: 2px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #b23a26;
}

.keypad {
  --key: min(20vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  gap: min(4vw, 18px) min(6vw, 26px);
  margin-top: 14px;
}
.keypad button {
  width: var(--key);
  height: var(--key);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,248,236,.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(120,60,30,.10), inset 0 1px 0 rgba(255,255,255,.6);
  font-family: "Fraunces", Georgia, serif;
  font-size: calc(var(--key) * .38);
  font-weight: 400;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease, opacity .5s ease;
}
.keypad button.soft {
  background: rgba(243,214,190,.42);
  color: var(--rose-deep);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: calc(var(--key) * .28);
  font-weight: 700;
}
.keypad button.down {
  transform: scale(.9);
  background: rgba(236,196,165,.85);
}

.volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 8px 15px 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(140,80,40,.12);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  animation: nudge 3.2s ease-in-out 1.2s infinite;
}
.volume svg { width: 20px; height: 20px; flex: none; }
.volume .spk { fill: var(--rose); }
.volume .wave { fill: none; stroke: var(--rose); stroke-width: 2; stroke-linecap: round; animation: wave 1.6s ease-in-out infinite; }
.volume .w2 { animation-delay: .25s; }
@keyframes wave  { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes nudge { 0%, 80%, 100% { transform: none; } 86% { transform: translateY(-3px); } 92% { transform: translateY(1px); } }

/* unlocking: everything dissolves into the swirl */
.lock.leaving .emblem,
.lock.leaving .hint,
.lock.leaving .msg,
.lock.leaving .volume { opacity: 0; transform: translateY(-12px); animation: none; }
.lock.leaving .dots { opacity: 0; transform: scale(.6); }
.lock.leaving .keypad button {
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(.2);
  transition: transform .7s cubic-bezier(.55,-0.2,.6,1), opacity .7s ease;
}
.lock-inner { transition: background .8s ease, box-shadow .8s ease, border-color .8s ease, -webkit-backdrop-filter .8s ease, backdrop-filter .8s ease; }
.lock.leaving .lock-inner {
  background: rgba(255,250,246,0);
  border-color: rgba(255,255,255,0);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lock.gone { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }

.swirl {
  position: fixed;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: conic-gradient(#f2a99a, #f7cf8f, #fff0c2, #d6e2b6, #f3b9a3, #e9a0a8, #f2a99a);
  filter: blur(7px) saturate(1.1);
  opacity: 0;
  transform: scale(0) rotate(0deg);
  pointer-events: none;
  z-index: 4;
}
.swirl::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
.swirl.on {
  animation: swirlIn 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes swirlIn {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1) rotate(260deg); }
  75%  { opacity: 1; transform: scale(1.15) rotate(520deg); }
  100% { opacity: 0; transform: scale(1.6) rotate(720deg); }
}

@keyframes shake {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(3px); }
}

/* ---------- storyboard ---------- */
.story {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease;
  padding: 0;
}
.story.on { opacity: 1; visibility: visible; }

.progress {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 16px; right: 16px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.progress span {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(91,58,41,.12);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e3a17f, var(--rose));
  transform-origin: left center;
  transform: scaleX(0);
}

.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 44px) 24px calc(env(safe-area-inset-bottom) + 64px);
}

.scene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  text-align: center;
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
/* text scenes get a frosted box so they read on the busy background */
.text-scene {
  padding: 26px 26px 24px;
  border-radius: 26px;
  background: rgba(255,248,236,.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 18px 44px rgba(120,60,30,.16);
  animation: boxIn .9s ease;   /* no "forwards", so the fade-out still works */
}
.text-scene { padding-left: 20px; padding-right: 20px; }
.text-scene .line.title { font-size: clamp(34px, 9.6vw, 60px); }
@keyframes boxIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.scene.out { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(6px); }

.line {
  margin: 0;
  opacity: 0;
  animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.line.title {
  opacity: 1;
  animation: none;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 12vw, 72px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--rose-deep);
  text-shadow: 0 2px 24px rgba(255,248,230,.95);
}
.line.title .w { display: inline-block; white-space: nowrap; }
.line.title .ch {
  display: inline-block;
  opacity: 0;
  animation: charIn .75s cubic-bezier(.2,.8,.25,1.25) forwards;
}
.line.body {
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-line;
  color: var(--ink);
}
.line.script {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.3;
  white-space: pre-line;
  color: var(--rose-deep);
}
.line.small {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.photo {
  margin: 0 0 6px;
  padding: 10px 10px 14px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(120,70,40,.18);
  opacity: 0;
  animation: photoIn 1.2s cubic-bezier(.2,.8,.2,1) forwards;
}
.photo img {
  display: block;
  width: min(72vw, 340px);
  max-height: 46vh;
  object-fit: cover;
  border-radius: 3px;
}
.photo figcaption {
  margin-top: 10px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

.replay {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%) translateY(8px);
  padding: 12px 22px;
  border: 1.5px solid rgba(164,73,47,.4);
  border-radius: 999px;
  background: rgba(255,250,240,.8);
  font: 700 15px "Nunito", system-ui, sans-serif;
  color: var(--rose-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
  z-index: 6;
}
.replay.show { opacity: 1; pointer-events: auto; transform: translateX(-50%); }

@keyframes rise    { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes charIn  { from { opacity: 0; transform: translateY(.45em) scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes photoIn { from { opacity: 0; transform: translateY(24px) scale(.92) rotate(4deg); } to { opacity: 1; transform: rotate(-2.5deg); } }

/* ---------- silk petal backdrop (story) ---------- */
.silk {
  position: fixed;
  inset: -15%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.4s ease;
  background:
    radial-gradient(55% 40% at 76% 22%, rgba(255,255,255,.8), rgba(255,255,255,0) 62%),
    radial-gradient(110% 70% at 98% 12%, rgba(255,150,185,.85) 0 20%, rgba(255,186,208,.55) 40%, rgba(255,214,226,0) 62%),
    radial-gradient(80% 55% at 108% 66%, rgba(240,110,152,.5), rgba(255,200,215,0) 60%),
    radial-gradient(70% 50% at -4% 102%, rgba(255,170,195,.6), rgba(255,220,230,0) 60%),
    radial-gradient(45% 30% at 28% 78%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
    radial-gradient(60% 40% at 10% 10%, rgba(255,226,236,.7), rgba(255,226,236,0) 70%);
  animation: silkDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}
body.story-on .silk { opacity: 1; }
@keyframes silkDrift { to { transform: translate(-4%, 3%) rotate(3deg) scale(1.06); } }

/* ---------- finale card ---------- */
.text-scene.finale {
  position: relative;
  width: min(84vw, 340px);
  padding: 62px 22px 30px;
  gap: 2px;
  border: none;
  border-radius: 50% 50% 20px 20px / 92px 92px 20px 20px;   /* gentle arch */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* fine grain + soft mottling + aged edges on warm off-white */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .48 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(130% 95% at 50% 42%, rgba(255,252,240,0) 58%, rgba(190,150,85,.20) 100%),
    linear-gradient(172deg, #fffcf3 0%, #fdf6e5 55%, #f8eed6 100%);
  background-size: 220px 220px, 600px 600px, 100% 100%, 100% 100%;
  box-shadow:
    0 30px 60px rgba(120,60,30,.28),
    0 2px 6px rgba(120,60,30,.12),
    inset 0 0 36px rgba(176,132,70,.14);
}
.finale::before {   /* thin inner border */
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.2px solid rgba(164,73,47,.38);
  border-radius: 50% 50% 12px 12px / 83px 83px 12px 12px;
  pointer-events: none;
}
.finale .deco {
  position: absolute;
  top: -46px; left: 50%;
  width: 108px;
  margin-left: -54px;
  filter: drop-shadow(0 8px 12px rgba(120,60,30,.25));
  animation: decoIn 1.2s cubic-bezier(.2,.9,.3,1.3) .2s both;
}
@keyframes decoIn { from { opacity: 0; transform: scale(.3) rotate(-90deg); } to { opacity: 1; transform: none; } }
.finale .line.title {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 8.8vw, 42px);
  color: #a4492f;
  text-shadow: none;
}
.finale .line.em {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(42px, 12.4vw, 60px);
  line-height: 1;
  white-space: nowrap;
  color: #cf7f72;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.finale .flourish {
  width: 150px;
  margin-top: 10px;
  opacity: 0;
  animation: rise 1s ease forwards;
}

/* ---------- photo carousel ---------- */
.carousel-scene { width: 100%; gap: 22px; }
.carousel {
  --cw: min(70vw, 300px);
  --gap: 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 26px 0 30px;
  opacity: 0;
  animation: carIn 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.track {
  --i: 0;
  display: flex;
  gap: var(--gap);
  width: max-content;
  transform: translate3d(calc(50vw - var(--cw) / 2 - var(--i) * (var(--cw) + var(--gap))), 0, 0);
  transition: transform 1s cubic-bezier(.65,0,.25,1);
}
.card {
  flex: none;
  width: var(--cw);
  margin: 0;
  padding: 11px 11px 0;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 22px 46px rgba(110,70,40,.20), 0 2px 6px rgba(110,70,40,.08);
  transform: scale(.84) rotate(var(--r, 0deg));
  opacity: .55;
  transition: transform 1s cubic-bezier(.65,0,.25,1), opacity 1s ease;
}
.card.on { transform: scale(1) rotate(var(--r, 0deg)); opacity: 1; }
.card { display: flex; flex-direction: column; }
.card figcaption { flex: 1; }   /* caption centred in the white strip */
.card-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f6e6cc, #fdf6ea);
  color: var(--ink-soft);
  font: italic 16px "Fraunces", Georgia, serif;
}
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card figcaption {
  min-height: 50px;
  padding: 8px 4px 10px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Mali", "Segoe Print", cursive;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  white-space: pre-line;   /* \n in a caption = new line */
  color: #6b3426;
}
.car-dots { display: flex; gap: 7px; opacity: 0; animation: carIn 1s ease .5s forwards; }
.car-dots i {
  width: 7px; height: 7px;
  border-radius: 4px;
  background: rgba(91,58,41,.2);
  transition: width .6s ease, background .6s ease;
}
.car-dots i.on { width: 20px; background: var(--rose); }
@keyframes carIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- the letter ---------- */
.letter-scene { width: 100%; }
.paper {
  position: relative;
  width: min(88vw, 460px);
  height: min(68vh, 600px);
  margin: 0 auto;
  padding: 30px 24px 18px;
  text-align: left;
  border-radius: 3px;
  /* fine grain + soft mottling + aged edges on warm off-white */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .48 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(130% 95% at 50% 42%, rgba(255,252,240,0) 58%, rgba(190,150,85,.20) 100%),
    linear-gradient(172deg, #fffcf3 0%, #fdf6e5 55%, #f8eed6 100%);
  background-size: 220px 220px, 600px 600px, 100% 100%, 100% 100%;
  box-shadow:
    0 30px 60px rgba(150,90,60,.20),
    0 2px 6px rgba(150,90,60,.10),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 0 36px rgba(176,132,70,.14);
  opacity: 0;
  animation: paperIn 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.paper-flower {
  position: absolute;
  width: 92px;
  top: -34px; right: -16px;
  transform: rotate(14deg);
  filter: drop-shadow(0 6px 10px rgba(120,70,40,.22));
  pointer-events: none;
}
.paper-view {
  position: relative;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 86%, transparent 100%);
}
.paper-text {
  position: relative;
  padding: 10px 0 30%;
  font-family: "Mali", "Segoe Print", cursive;
  font-weight: 400;
  font-size: clamp(18px, 4.9vw, 22px);
  line-height: 1.55;
  color: #6b3426;
  will-change: transform;
}
.paper-text p { margin: 0 0 .75em; }
.paper-text .greet { font-size: 1.14em; }
.paper-text .sign { margin-top: 1.1em; text-align: right; }
.paper-text .li { display: block; position: relative; padding-left: 1em; margin: .12em 0; }
.paper-text .li::before { content: "–"; position: absolute; left: 0; color: var(--ink-soft); opacity: 0; transition: opacity .5s ease; }
.paper-text .li:has(.wd.in)::before { opacity: 1; }   /* dash appears with its first word */
.paper-text .spaced { display: block; margin: .5em 0; }
.paper-text .ps { margin-top: .9em; font-size: .92em; }
.wd {
  display: inline-block;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .55s ease, transform .55s ease;
}
.wd.in { opacity: 1; transform: none; }
@keyframes paperIn { from { opacity: 0; transform: translateY(40px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }

/* ---------- now playing ---------- */
.nowplaying {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(110,70,40,.14);
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, -14px);
  pointer-events: none;
  transition: opacity .9s ease, transform .9s ease;
}
.nowplaying.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nowplaying.show.muted { opacity: .6; }
.disc {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: conic-gradient(#f2a99a, #f7cf8f, #fff0c2, #d6e2b6, #f3b9a3, #e9a0a8, #f2a99a);
  animation: spinSlow 5s linear infinite;
}
.disc::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: #fff; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.np-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.np-text b { max-width: 48vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.np-text small { max-width: 48vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--ink-soft); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--rose); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.4s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.nowplaying.muted .disc, .nowplaying.muted .eq i { animation-play-state: paused; }

.progress { display: none; }
.progress.show { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .blob, .emblem, .silk { animation: none; }
}