:root {
  --paper: #f7efe1;
  --paper-2: #fffaf1;
  --cream: #fdf7ea;
  --ink: #2d2924;
  --muted: #7b6d60;
  --line: rgba(45, 41, 36, 0.14);
  --shadow: 0 28px 90px rgba(71, 55, 35, 0.20);
  --shadow-soft: 0 16px 48px rgba(71, 55, 35, 0.13);
  --blue: #7fa0c3;
  --yellow: #e8c96c;
  --red: #c9796f;
  --green: #8ca77b;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 10%, rgba(232, 201, 108, 0.30), transparent 29rem),
    radial-gradient(circle at 90% 16%, rgba(127, 160, 195, 0.24), transparent 30rem),
    radial-gradient(circle at 74% 92%, rgba(201, 121, 111, 0.18), transparent 24rem),
    linear-gradient(135deg, var(--paper), #fbf1dc 52%, #f6e6cc);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}
body.is-unlocked { overflow: hidden; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.grain,
.desk-shadows,
.ambient {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
.grain {
  inset: 0;
  opacity: 0.42;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(45, 41, 36, 0.07) 0 1px, transparent 1px 7px),
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  mix-blend-mode: multiply;
}
.desk-shadows {
  inset: auto -10vw -16vh -10vw;
  height: 34vh;
  background: radial-gradient(ellipse at 50% 100%, rgba(71, 55, 35, 0.14), transparent 65%);
}
.ambient {
  width: 300px;
  height: 300px;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.45;
}
.ambient-a { left: -95px; top: 15%; background: rgba(232, 201, 108, 0.45); animation: driftA 14s var(--ease) infinite alternate; }
.ambient-b { right: -120px; bottom: 8%; background: rgba(127, 160, 195, 0.35); animation: driftB 16s var(--ease) infinite alternate; }
@keyframes driftA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(42px,62px,0) scale(1.12); } }
@keyframes driftB { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-60px,-44px,0) scale(1.08); } }

.story-progress {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 4px;
  z-index: 70;
  background: rgba(45, 41, 36, 0.08);
}
.story-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--yellow), var(--red));
  border-radius: 0 999px 999px 0;
  transition: width 520ms var(--ease);
}

.lock-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 60;
  transition: opacity 650ms ease, visibility 650ms ease, transform 650ms ease;
}
.lock-screen.is-unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.03);
}

.lock-card,
.chapter-card,
.letter-paper,
.certificate,
.envelope-paper {
  position: relative;
  width: min(100%, 790px);
  border: 1px solid rgba(45, 41, 36, 0.12);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.97), rgba(247, 239, 225, 0.93)),
    radial-gradient(circle at 18px 18px, rgba(45, 41, 36, 0.05) 0 1px, transparent 1px 13px);
  box-shadow: var(--shadow);
}
.lock-card {
  max-width: 620px;
  padding: clamp(28px, 7vw, 54px);
  transform-origin: center;
}
.lock-card::before,
.chapter-card::before,
.letter-paper::before,
.certificate::before,
.envelope-paper::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(45, 41, 36, 0.12);
  border-radius: 24px;
  pointer-events: none;
}
.lock-card.is-opening { animation: openLock 720ms var(--ease) forwards; }
@keyframes openLock {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(0.98) rotate(-0.7deg); }
  100% { transform: translateY(-18px) scale(1.03) rotate(1deg); opacity: 0; filter: blur(6px); }
}

.lock-stamp {
  position: absolute;
  top: 18px;
  right: 18px;
  min-height: 0;
  padding: 8px 12px;
  border: 1px solid rgba(201, 121, 111, 0.32);
  border-radius: 999px;
  background: rgba(201, 121, 111, 0.1);
  color: #9f5f58;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(8deg);
  cursor: pointer;
}
.lock-stamp:active { transform: rotate(8deg) scale(0.94); }
.eyebrow,
.cover-kicker {
  margin: 0 0 10px;
  color: #9f5f58;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  line-height: 0.98;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 12vw, 5.2rem); letter-spacing: -0.065em; }
h2 { font-size: clamp(2rem, 8.5vw, 4rem); letter-spacing: -0.055em; }
h3 { font-size: clamp(1.3rem, 4.8vw, 2rem); letter-spacing: -0.035em; }
p { color: var(--muted); line-height: 1.65; }
.lock-subtitle { margin: 18px 0 0; max-width: 42rem; font-size: 1.08rem; }
.tiny-note { margin: 16px 0 0; color: rgba(123, 109, 96, 0.82); font-size: 0.84rem; }
.pin-form { margin-top: 28px; }
.pin-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 850;
}
.pin-row { display: grid; gap: 10px; }
.pin-row input,
.pin-row button,
.primary-btn,
.secondary-btn,
.music-button,
.icon-button,
.pill,
.ticket,
.ghost-link,
.capsule-note {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(45, 41, 36, 0.13);
  transition: transform 180ms var(--ease), box-shadow 180ms ease, background 180ms ease, opacity 180ms ease;
}
.pin-row input {
  width: 100%;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  outline: none;
  font-weight: 800;
}
.pin-row input:focus { box-shadow: 0 0 0 4px rgba(127, 160, 195, 0.24); }
.pin-row button,
.primary-btn {
  border: 0;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--ink), #4a4037);
  color: var(--cream);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(45, 41, 36, 0.18);
}
.secondary-btn,
.music-button,
.icon-button,
.ghost-link {
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}
.primary-btn:hover,
.secondary-btn:hover,
.music-button:hover,
.icon-button:hover,
.pill:hover,
.ticket:hover,
.ghost-link:hover,
.capsule-note:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.primary-btn:active,
.secondary-btn:active,
.music-button:active,
.icon-button:active,
.pill:active,
.ticket:active,
.ghost-link:active,
.capsule-note:active,
.pin-row button:active { transform: translateY(1px) scale(0.98); }
.primary-btn:disabled,
.secondary-btn:disabled,
.icon-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.pin-message { min-height: 1.5em; margin: 12px 0 0; color: #9f5f58; font-weight: 850; }

.app {
  position: relative;
  z-index: 1;
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
}
.app.is-visible { display: block; }
.topbar {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(calc(100% - 24px), 1060px);
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid rgba(45, 41, 36, 0.1);
  border-radius: 999px;
  background: rgba(253, 247, 234, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(71, 55, 35, 0.10);
}
.icon-button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; }
.music-button.is-playing { background: rgba(127, 160, 195, 0.20); }
.chapter-meter { min-width: 0; display: grid; place-items: center; gap: 4px; }
.chapter-meter > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chapter-dots { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.chapter-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(45, 41, 36, 0.22);
  cursor: pointer;
  padding: 0;
  transition: width 260ms var(--ease), background 260ms ease, transform 260ms ease;
}
.chapter-dot.active { width: 28px; background: linear-gradient(90deg, var(--blue), var(--yellow)); }

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: 78px 14px 76px;
}
.chapter {
  position: absolute;
  inset: 78px 14px 76px;
  display: grid;
  place-items: center;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(36px) scale(0.985);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease), visibility 560ms var(--ease);
  pointer-events: none;
  overflow: hidden;
}
.chapter.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.chapter.exiting-left { transform: translateX(-36px) scale(0.985); }
.chapter-shell {
  position: relative;
  width: min(100%, 960px);
  max-height: 100%;
  min-height: min(560px, calc(100dvh - 180px));
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.chapter-card,
.letter-paper,
.certificate {
  width: min(100%, 900px);
  max-height: calc(100dvh - 190px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 5vw, 52px);
  scrollbar-width: thin;
  opacity: 0;
  transform: translateY(22px) scale(0.98) rotateX(5deg);
  transform-origin: center 18%;
  filter: blur(8px);
  pointer-events: none;
}
.chapter-shell.is-open .chapter-content {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
  filter: blur(0);
  pointer-events: auto;
  transition: opacity 520ms ease 360ms, transform 620ms var(--ease) 360ms, filter 620ms ease 360ms;
  animation: pageUnfold 760ms var(--ease) 260ms both;
}
@keyframes pageUnfold {
  0% { opacity: 0; transform: translateY(26px) scale(0.965) rotateX(12deg); filter: blur(8px); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.012) rotateX(-1deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); }
}
.hero-card { text-align: left; }
.hero-card h1 { margin-bottom: 10px; }
.hero-subtitle { font-weight: 750; }
.hero-copy { font-size: clamp(1.02rem, 2vw, 1.16rem); }
.typewriter {
  min-height: 1.8em;
  margin: 12px 0;
  color: #9f5f58;
  font-weight: 950;
}
.helper-text { margin: 12px 0 0; font-size: 0.88rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.wide { width: 100%; }

.chapter-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  z-index: 2;
  perspective: 1100px;
  transform-style: preserve-3d;
  transition: opacity 360ms ease 500ms, visibility 360ms ease 500ms, transform 620ms var(--ease);
}
.chapter-shell.is-open .chapter-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px) scale(0.98);
}
.envelope-paper {
  z-index: 2;
  width: 100%;
  min-height: var(--envelope-height);
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(26px, 7vw, 58px);
  overflow: hidden;
  transform: none;
}
.envelope-paper h2 { margin-bottom: 14px; }
.envelope-paper p { max-width: 35rem; font-size: 1.03rem; }
.seal-btn { margin-top: 10px; }

/* Envelope geometry: flap, wax seal and card now share the same coordinate system.
   This prevents the seal/flap from drifting at normal browser zoom or on desktop. */
.envelope-wrap {
  --envelope-height: 360px;
  --seal-y: 48%;
  --flap-height: 210px;
  --flap-width: min(82%, 600px);
  position: relative;
  isolation: isolate;
  width: min(100%, 720px);
  transform: rotate(-0.8deg) translateZ(0);
  transform-style: preserve-3d;
  animation: coverBreathe 4.4s ease-in-out infinite;
}
.chapter-shell.is-open .envelope-wrap { animation-play-state: paused; }
.envelope-piece {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  border-radius: 28px;
  opacity: 0.84;
  pointer-events: none;
}
.envelope-piece.back {
  z-index: 0;
  width: 100%;
  height: 260px;
  bottom: -55px;
  background:
    linear-gradient(135deg, rgba(127, 160, 195, 0.20), rgba(232, 201, 108, 0.22)),
    rgba(255, 250, 241, 0.72);
  box-shadow: var(--shadow-soft);
}
.envelope-piece.flap {
  z-index: 3;
  top: calc(var(--seal-y) - var(--flap-height));
  width: var(--flap-width);
  height: var(--flap-height);
  background: linear-gradient(135deg, rgba(255, 250, 241, 0.94), rgba(247, 239, 225, 0.88));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  animation: flapIdle 4s ease-in-out infinite;
}
.chapter-shell.is-open .envelope-piece.flap { animation: flapOpen 620ms var(--ease) forwards; }
.chapter-shell.is-open .envelope-paper { animation: paperRelease 620ms var(--ease) forwards; }
.wax {
  position: absolute;
  left: 50%;
  top: var(--seal-y);
  z-index: 4;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, #d99086, var(--red));
  color: #fff7ef;
  font-family: var(--serif);
  font-size: 1.45rem;
  box-shadow: 0 16px 32px rgba(201, 121, 111, 0.32);
  transform: translate(-50%, -50%) rotate(-6deg) translateZ(1px);
  pointer-events: none;
}
.chapter-shell.is-open .wax { animation: sealBreak 540ms var(--ease) forwards; }
@keyframes coverBreathe { 0%,100% { transform: rotate(-0.8deg) translateY(0) translateZ(0); } 50% { transform: rotate(0.5deg) translateY(-6px) translateZ(0); } }
@keyframes flapIdle { 0%,100% { transform: translateX(-50%) rotateX(0deg) translateZ(0); } 50% { transform: translateX(-50%) rotateX(5deg) translateZ(0); } }
@keyframes flapOpen { to { transform: translateX(-50%) rotateX(72deg) translateY(-24px) translateZ(0); opacity: 0.35; } }
@keyframes sealBreak { to { transform: translate(-50%, -50%) scale(0.2) rotate(30deg) translateZ(1px); opacity: 0; filter: blur(3px); } }
@keyframes paperRelease {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-18px) scale(1.015); }
  100% { transform: translateY(-28px) scale(0.98); opacity: 0.25; }
}

.unlock-note {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 45;
  width: min(calc(100% - 32px), 650px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid rgba(45, 41, 36, 0.12);
  border-radius: 24px;
  background: rgba(253, 247, 234, 0.92);
  box-shadow: var(--shadow-soft);
  transform: translate(-50%, 24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms ease, transform 350ms var(--ease), visibility 350ms ease;
  backdrop-filter: blur(16px);
}
.unlock-note.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.unlock-note p { margin: 0; font-size: 0.94rem; }
.spark { color: #9f5f58; }

.lead { font-size: clamp(1rem, 2vw, 1.13rem); }
.memory-switcher { margin-top: 20px; }
.memory-panel {
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(45, 41, 36, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 10%, rgba(232, 201, 108, 0.26), transparent 8rem),
    rgba(255, 255, 255, 0.50);
  box-shadow: var(--shadow-soft);
}
.memory-panel h3,
.memory-panel p { margin-bottom: 0; }
.panel-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(127, 160, 195, 0.22);
  font-size: 1.35rem;
}
.pill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.pill { padding: 0 14px; background: rgba(255, 255, 255, 0.56); color: var(--ink); cursor: pointer; }
.pill.active { background: var(--ink); color: var(--cream); }
.center-quote {
  margin: 22px 0 0;
  padding: 18px 20px;
  border-left: 4px solid var(--yellow);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.44);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 4vw, 2.1rem);
  line-height: 1.22;
}
.timeline-play { margin-top: 18px; }
.timeline-reader {
  min-height: 170px;
  padding: 22px;
  border: 1px solid rgba(45, 41, 36, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.50);
  box-shadow: var(--shadow-soft);
}
.reader-kicker { margin-bottom: 8px; color: #9f5f58; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; }
.ticket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ticket {
  min-height: 78px;
  padding: 12px;
  border: 1px dashed rgba(45, 41, 36, 0.18);
  border-radius: 20px;
  background: rgba(255, 250, 241, 0.72);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 24px rgba(71, 55, 35, 0.08);
  cursor: pointer;
}
.ticket small { display: block; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

.affirmation-envelope {
  position: relative;
  margin: 24px 0;
  min-height: 250px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 34px 24px;
  border: 1px solid rgba(45, 41, 36, 0.14);
  border-radius: 30px;
  background:
    linear-gradient(150deg, transparent 48%, rgba(232, 201, 108, 0.18) 48% 52%, transparent 52%),
    linear-gradient(30deg, rgba(127, 160, 195, 0.12), rgba(255, 255, 255, 0.5));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.affirmation-envelope.opening { animation: letterPop 420ms var(--ease); }
.affirmation-envelope p { margin: 0; color: var(--muted); font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; }
.affirmation-envelope h3 { margin: 12px 0 0; }
.wax-seal {
  position: absolute;
  right: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--red);
  color: #fff7ef;
  box-shadow: 0 10px 22px rgba(201, 121, 111, 0.28);
}
@keyframes letterPop { from { transform: translateY(12px) rotateX(8deg); opacity: 0.4; } to { transform: translateY(0) rotateX(0); opacity: 1; } }
.ghost-link { margin-top: 10px; min-height: 44px; padding: 0 16px; }

.letter-paper {
  width: min(100%, 780px);
  min-height: min(650px, calc(100dvh - 190px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(34px, 5vw, 58px) clamp(26px, 6vw, 66px) clamp(28px, 5vw, 46px);
  background:
    linear-gradient(90deg, transparent 0 52px, rgba(201, 121, 111, 0.20) 52px 53px, transparent 53px),
    linear-gradient(rgba(255,255,255,0.32) 1px, transparent 1px) 0 86px / 100% 34px,
    radial-gradient(circle at 92% 10%, rgba(232, 201, 108, 0.18), transparent 8rem),
    linear-gradient(135deg, rgba(255, 250, 241, 0.99), rgba(251, 241, 220, 0.97));
}
.letter-paper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 78px;
  height: 78px;
  background: linear-gradient(135deg, rgba(45, 41, 36, 0.10), rgba(255, 255, 255, 0.62) 48%, rgba(255, 250, 241, 0.95) 50%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0.55;
  pointer-events: none;
}
.private-letter h2 { max-width: 92%; }
.private-letter .eyebrow { padding-right: 58px; }
.letter-copy {
  flex: 1 1 auto;
  min-height: 170px;
  max-height: min(45dvh, 430px);
  overflow: auto;
  padding: 8px 8px 4px 0;
  margin: 8px 0 16px;
  scrollbar-width: thin;
}
.paperclip {
  position: absolute;
  top: 14px;
  right: 58px;
  z-index: 3;
  width: 30px;
  height: 58px;
  border: 4px solid rgba(127, 160, 195, 0.72);
  border-bottom-color: transparent;
  border-radius: 18px 18px 0 0;
  transform: rotate(9deg);
  filter: drop-shadow(0 6px 8px rgba(71, 55, 35, 0.12));
}
.hidden-heart {
  position: absolute;
  right: 22px;
  top: 92px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(201, 121, 111, 0.10);
  color: rgba(201, 121, 111, 0.72);
  cursor: pointer;
  transition: transform 220ms var(--ease), background 220ms ease;
}
.hidden-heart:hover { transform: scale(1.12) rotate(-8deg); background: rgba(201, 121, 111, 0.18); }
.letter-copy p,
.final-letter-body p {
  margin: 0 0 16px;
  font-size: 1.04rem;
  animation: lineIn 420ms var(--ease) both;
}
@keyframes lineIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.signature,
.big-signature {
  margin: 18px 0 0;
  font-family: var(--serif);
  color: var(--ink);
  font-size: 2.1rem;
  line-height: 1;
}

.playful-card { background: linear-gradient(135deg, rgba(255, 250, 241, 0.97), rgba(248, 234, 210, 0.93)); }
.article-stack { display: grid; gap: 10px; min-height: 190px; margin: 18px 0; }
.article-card {
  padding: 15px 16px;
  border: 1px solid rgba(45, 41, 36, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 8px 18px rgba(71, 55, 35, 0.08);
  animation: articlePop 350ms var(--ease) both;
}
@keyframes articlePop { from { opacity: 0; transform: translateY(8px) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.article-card p { margin: 0; font-weight: 800; }
.motivation-box { margin-top: 18px; padding: 16px; border: 1px dashed rgba(45, 41, 36, 0.16); border-radius: 24px; background: rgba(255, 255, 255, 0.42); }
.motivation-box p { margin: 12px 0 0; font-weight: 800; }

.photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.polaroid {
  margin: 0;
  padding: 10px 10px 14px;
  border-radius: 12px;
  background: #fffaf1;
  box-shadow: 0 14px 34px rgba(71, 55, 35, 0.14);
  cursor: pointer;
  transform: rotate(var(--tilt, -1deg));
  transition: transform 200ms var(--ease), box-shadow 200ms ease;
}
.polaroid:nth-child(2n) { --tilt: 1.4deg; }
.polaroid:nth-child(3n) { --tilt: -2deg; }
.polaroid:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-soft); }
.photo-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(127, 160, 195, 0.18), rgba(232, 201, 108, 0.18)),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 6rem);
}
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease; }
.photo-frame.has-image img { opacity: 1; }
.photo-frame.has-image .photo-placeholder { display: none; }
.photo-placeholder { color: var(--muted); font-weight: 900; text-transform: lowercase; }
.polaroid figcaption { margin-top: 10px; color: var(--ink); font-size: 0.84rem; font-weight: 800; line-height: 1.35; }
.polaroid.is-flipped .photo-frame::after {
  content: attr(data-secret);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(45, 41, 36, 0.78);
  color: var(--cream);
  text-align: center;
  font-weight: 850;
  line-height: 1.35;
}

.certificate {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 201, 108, 0.32), transparent 12rem),
    linear-gradient(135deg, rgba(255, 250, 241, 0.98), rgba(247, 239, 225, 0.95));
}
.certificate-ribbon {
  display: inline-grid;
  place-items: center;
  margin: 0 auto 14px;
  padding: 8px 14px;
  border: 1px solid rgba(201, 121, 111, 0.28);
  border-radius: 999px;
  background: rgba(201, 121, 111, 0.12);
  color: #9f5f58;
  font-weight: 950;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.certificate-ribbon.stamped { animation: stampHit 420ms var(--ease); }
@keyframes stampHit { 0% { transform: scale(1.8) rotate(-12deg); opacity: 0.35; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.certificate-fields { display: grid; gap: 10px; margin: 20px 0 0; text-align: left; }
.certificate-fields div { padding: 14px 16px; border: 1px solid rgba(45, 41, 36, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.45); }
.certificate-fields dt { margin-bottom: 4px; color: var(--muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }
.certificate-fields dd { margin: 0; font-weight: 850; }

.constellation {
  position: relative;
  min-height: 245px;
  margin: 20px 0;
  border: 1px solid rgba(45, 41, 36, 0.1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 15% 25%, rgba(232, 201, 108, 0.28), transparent 2rem),
    radial-gradient(circle at 78% 38%, rgba(127, 160, 195, 0.26), transparent 2.4rem),
    radial-gradient(circle at 42% 78%, rgba(201, 121, 111, 0.20), transparent 2rem),
    rgba(255, 255, 255, 0.38);
  overflow: hidden;
}
.constellation::before {
  content: "";
  position: absolute;
  inset: 12%;
  background:
    linear-gradient(35deg, transparent 0 44%, rgba(45,41,36,0.10) 44% 45%, transparent 45% 100%),
    linear-gradient(145deg, transparent 0 50%, rgba(45,41,36,0.08) 50% 51%, transparent 51% 100%);
  opacity: 0.45;
}
.star-button {
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #9f5f58;
  font-size: 1.25rem;
  box-shadow: 0 10px 26px rgba(71, 55, 35, 0.12);
  cursor: pointer;
  animation: pulseStar 2.4s ease-in-out infinite;
}
@keyframes pulseStar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.admiration-output,
.capsule-output { padding: 18px 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.48); border: 1px solid rgba(45, 41, 36, 0.1); font-weight: 800; }
.capsule-grid { display: grid; gap: 10px; margin: 20px 0; }
.capsule-note { min-height: 68px; padding: 14px 18px; border: 1px dashed rgba(45, 41, 36, 0.16); border-radius: 22px; background: rgba(255, 250, 241, 0.72); color: var(--ink); text-align: left; cursor: pointer; }
.final-letter {
  width: min(100%, 820px);
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(232, 201, 108, 0.20), transparent 10rem),
    linear-gradient(135deg, rgba(255, 250, 241, 0.98), rgba(247, 239, 225, 0.95));
}
.final-letter-body {
  max-height: min(44dvh, 420px);
  overflow: auto;
  padding: 4px 8px 4px 0;
  margin: 8px 0 16px;
  scrollbar-width: thin;
}
.big-signature { font-size: clamp(3rem, 14vw, 5.6rem); color: rgba(45, 41, 36, 0.9); }

.footer-note {
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(calc(100% - 24px), 820px);
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
  pointer-events: none;
}
.footer-note p { margin: 0; line-height: 1.4; }
.footer-star { width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.42); color: #9f5f58; cursor: pointer; pointer-events: auto; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 95;
  width: min(calc(100% - 32px), 560px);
  padding: 14px 16px;
  border: 1px solid rgba(45, 41, 36, 0.12);
  border-radius: 22px;
  background: rgba(45, 41, 36, 0.92);
  color: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
  font-weight: 800;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 220ms ease, transform 220ms var(--ease), visibility 220ms ease;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sparkle-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.confetti,
.float-sparkle {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  opacity: 0.92;
  animation: confettiFall 1.5s var(--ease) forwards;
}
.float-sparkle {
  top: auto;
  width: auto;
  height: auto;
  color: #9f5f58;
  font-size: 1.5rem;
  background: transparent !important;
  animation: floatSparkle 1.8s var(--ease) forwards;
}
@keyframes confettiFall { 0% { transform: translateY(-12px) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: 0; } }
@keyframes floatSparkle { from { transform: translateY(0) scale(0.75); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-90px) scale(1.2); opacity: 0; } }

@media (min-width: 700px) {
  .pin-row { grid-template-columns: 1fr auto; }
  .pill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ticket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capsule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .certificate-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .stage { padding: 92px 40px 78px; }
  .chapter { inset: 92px 40px 78px; padding: 0; }
  .chapter-shell { width: min(100%, 1080px); min-height: calc(100dvh - 190px); }
  .chapter-card, .certificate { max-height: calc(100dvh - 206px); }
  .letter-paper { max-height: calc(100dvh - 206px); min-height: min(640px, calc(100dvh - 206px)); }
  .chapter-card:not(.hero-card), .certificate { width: min(100%, 940px); }
  .hero-card { width: min(100%, 860px); }
  .envelope-wrap { --envelope-height: 390px; }
  .envelope-paper { width: 100%; min-height: var(--envelope-height); }
  .final-letter-body { max-height: min(43dvh, 430px); }
}

@media (max-width: 560px) {
  .topbar { top: 10px; width: calc(100% - 16px); grid-template-columns: 42px minmax(0, 1fr) auto; }
  .music-button { padding: 0 12px; font-size: 0.86rem; }
  .chapter-meter > span { display: none; }
  .chapter-dots { gap: 4px; }
  .chapter-dot { width: 6px; height: 6px; }
  .chapter-dot.active { width: 18px; }
  .stage { padding: 74px 8px 68px; }
  .chapter { inset: 74px 8px 68px; padding: 0; overflow: hidden; }
  .chapter-shell { min-height: calc(100dvh - 150px); }
  .chapter-card, .certificate { border-radius: 26px; max-height: calc(100dvh - 150px); padding: 24px; }
  .letter-paper { border-radius: 26px; max-height: calc(100dvh - 150px); min-height: calc(100dvh - 150px); padding: 30px 24px 22px 30px; }
  .letter-copy { max-height: 44dvh; }
  .final-letter-body { max-height: 40dvh; }
  .paperclip { right: 42px; top: 10px; transform: scale(0.88) rotate(9deg); }
  .hidden-heart { top: 78px; right: 16px; }
  .envelope-wrap { --envelope-height: 410px; --seal-y: 51%; --flap-height: 190px; --flap-width: 92%; }
  .envelope-paper { border-radius: 28px; min-height: var(--envelope-height); }
  .envelope-piece.back { bottom: -50px; }
  .button-row { align-items: stretch; }
  .button-row > * { flex: 1 1 100%; }
  .ticket-grid { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: 1fr 1fr; }
  .footer-note { font-size: 0.68rem; }
}

@media (max-height: 720px) and (min-width: 700px) {
  h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); }
  h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
  .chapter-card, .certificate { padding: 28px 34px; }
  .letter-paper { padding: 32px 38px 24px 46px; min-height: auto; }
  .letter-copy { max-height: 34dvh; }
  .final-letter-body { max-height: 34dvh; }
  .envelope-wrap { --envelope-height: 300px; --flap-height: 174px; }
  .envelope-paper { min-height: var(--envelope-height); }
  .lead, p { line-height: 1.55; }
}

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

@media print {
  body { overflow: visible; background: white; }
  .topbar,
  .footer-note,
  .story-progress,
  .ambient,
  .desk-shadows,
  .grain,
  .toast,
  .sparkle-layer,
  .print-hidden,
  .lock-screen,
 .chapter-cover { display: none !important; }
  .app { display: block !important; }
  .stage { height: auto; padding: 0; overflow: visible; }
  .chapter { display: none !important; position: static; inset: auto; opacity: 1; visibility: visible; transform: none; }
  .certificate-chapter { display: block !important; }
  .certificate { max-height: none; overflow: visible; box-shadow: none; border: 2px solid #2d2924; width: 100%; opacity: 1; transform: none; filter: none; }
}