:root{color-scheme:light;font-family:ui-sans-serif,system-ui,sans-serif;color:oklch(.26 .045 320);background:oklch(.975 .009 320)}*{box-sizing:border-box}body{margin:0}.recipient{max-width:620px;padding:70px 24px 30px;margin:auto;text-align:center}h1{font-family:Georgia,'Songti SC',serif;font-weight:400;font-size:clamp(30px,5vw,48px);text-wrap:balance;overflow-wrap:anywhere;margin:16px 0 38px}.greeting{font-size:14px;color:oklch(.44 .04 320)}.envelope{position:relative;width:min(100%,420px);height:280px;background:oklch(.9 .045 320);border:1px solid oklch(.76 .04 320);border-radius:8px;cursor:pointer;overflow:hidden;color:inherit;margin:28px 0 42px;transition:transform .2s}.envelope:hover{transform:translateY(-4px)}.flap{position:absolute;top:0;left:0;width:100%;height:70%;background:oklch(.94 .029 320);clip-path:polygon(0 0,100% 0,50% 100%)}.seal{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);background:oklch(.4 .11 335);color:white;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:29px}.open-label{position:absolute;bottom:32px;width:100%;left:0;font-size:15px}.gift-content img,.noscript-image{width:100%;height:auto;border-radius:12px;display:block}.gift-content{animation:reveal .6s ease-out}.message{font-family:Georgia,'Songti SC',serif;font-size:clamp(20px,3vw,26px);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:32px 12px}.expiry,footer{font-size:12px;color:oklch(.46 .03 320);margin:24px 0}.rewrap{border:0;background:none;text-decoration:underline;font:inherit;font-size:13px;color:inherit;cursor:pointer;padding:12px}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid oklch(.5 .15 335);outline-offset:5px}[hidden]{display:none!important}@keyframes reveal{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:480px){.recipient{padding-top:40px}.envelope{height:240px}}

.gift-music-player {margin: 24px auto; max-width: 480px;}
.gift-music-player p {font-size:14px; margin-bottom:12px;}
.gift-music-player audio {width:100%;}

/* Keepsake is opt-in: historical snapshots retain the classic layout above. */
.keepsake-body {
  background: oklch(0.19 0.035 305);
  color: oklch(0.96 0.008 305);
}
.keepsake {
  --wrap: oklch(0.91 0.018 290);
  --wrap-light: oklch(0.97 0.008 290);
  --seal: oklch(0.47 0.12 330);
  --accent: oklch(0.83 0.065 75);
  max-width: 1180px;
  min-height: 100svh;
  padding: 0 32px 24px;
  position: relative;
  isolation: isolate;
}
.keepsake::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 25%,
    oklch(0.32 0.06 300 / 0.65),
    transparent 65%
  );
  pointer-events: none;
}
.keepsake[data-palette="anniversary"] {
  --wrap: oklch(0.87 0.035 345);
  --wrap-light: oklch(0.95 0.016 345);
  --seal: oklch(0.4 0.11 345);
}
.keepsake[data-palette="thanks"] {
  --wrap: oklch(0.88 0.035 155);
  --wrap-light: oklch(0.96 0.012 155);
  --seal: oklch(0.38 0.07 155);
}
.gift-demo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  border-bottom: 1px solid oklch(0.9 0 0 / 0.16);
  font-size: 13px;
  text-align: left;
}
.gift-demo-nav .demo-brand {
  font-size: 21px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.gift-demo-nav > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gift-demo-nav > div a {
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 100px;
  color: oklch(0.83 0.01 305);
}
.gift-demo-nav a[aria-current] {
  background: oklch(0.9 0 0 / 0.12);
  color: white;
}
.gift-demo-nav > span {
  color: oklch(0.76 0.01 305);
  max-width: 180px;
  line-height: 1.5;
}
.keepsake-heading {
  padding: 18px 0 6px;
}
.keepsake-heading .greeting {
  color: var(--accent);
  font-size: 14px;
}
.keepsake h1 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.025em;
  margin: 12px 0;
  line-height: 1.15;
}
.sender {
  margin: 12px 0;
  font-family: Georgia, serif;
  font-style: italic;
  color: oklch(0.8 0.025 305);
}
.gift-stage {
  position: relative;
  margin: 20px auto 0;
  max-width: 1000px;
}
.envelope-scene {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 3/2;
  margin: 30px auto 24px;
  perspective: 1400px;
}
.keepsake .envelope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  background: var(--wrap);
  border: 0;
  border-radius: 8px;
  color: oklch(0.27 0.03 305);
  box-shadow: 0 5px 8px oklch(0.08 0.02 305 / 0.4);
  transform-style: preserve-3d;
  transition: transform 0.25s;
}
.keepsake .envelope:hover {
  transform: translateY(-5px) rotate(-1deg);
}
.envelope-lining {
  position: absolute;
  inset: 8px;
  background: var(--wrap-light);
  border-radius: 5px;
}
.envelope-pocket {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--wrap);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  border-radius: 8px;
}
.keepsake .flap {
  height: 60%;
  z-index: 3;
  background: var(--wrap-light);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
}
.keepsake .seal {
  z-index: 4;
  top: 58%;
  width: 64px;
  height: 64px;
  background: var(--seal);
  box-shadow: 0 3px 5px oklch(0.1 0.02 305 / 0.25);
  border: 3px double oklch(0.8 0.05 70 / 0.55);
  transition:
    opacity 0.2s,
    transform 0.25s;
  font-size: 30px;
}
.keepsake .open-label {
  bottom: 24px;
  z-index: 4;
  letter-spacing: 0.025em;
  font-size: 13px;
}
.envelope-address {
  position: absolute;
  left: 24px;
  top: 30%;
  z-index: 1;
  font-family: Georgia, serif;
  font-size: 28px;
  transform: rotate(-5deg);
}
.envelope-card {
  position: absolute;
  inset: 6% 12%;
  background: oklch(0.99 0.003 290);
  padding: 12px 12px 0;
  transform: rotate(-3deg);
  transition: transform 0.85s 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.envelope-card img {
  display: block;
  width: 100%;
  height: 80%;
  object-fit: cover;
}
.envelope-card span {
  display: block;
  color: oklch(0.3 0.03 305);
  font-family: Georgia, serif;
  font-size: 22px;
  padding-top: 8px;
}
.envelope-scene.is-opening .envelope {
  transform: none;
  pointer-events: none;
}
.envelope-scene.is-opening .flap {
  transform: rotateX(-180deg);
}
.envelope-scene.is-opening .seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65);
}
.envelope-scene.is-opening .envelope-card {
  transform: translateY(-35%) rotate(2deg);
}
.envelope-scene.is-opening {
  animation: envelope-away 0.35s 0.9s forwards;
}
@keyframes envelope-away {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}
.keepsake .gift-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  background: oklch(0.985 0.003 290);
  color: oklch(0.28 0.035 315);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  animation: keepsake-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.keepsake-art {
  padding: 22px;
}
.keepsake .keepsake-art img {
  border-radius: 6px;
}
.keepsake-letter {
  padding: 32px 36px 28px 22px;
  min-width: 0;
}
.letter-mark {
  display: block;
  font-size: 32px;
  color: var(--seal);
}
.keepsake .message {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.65;
  margin: 18px 0 20px;
}
.letter-signature {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: oklch(0.44 0.03 315);
}
.keepsake .rewrap {
  display: block;
  margin-top: 18px;
  padding: 10px 0;
  min-height: 44px;
  color: oklch(0.43 0.04 315);
  text-underline-offset: 4px;
}
.music-hint {
  font-size: 13px;
  color: oklch(0.78 0.015 305);
  margin: 28px 0;
}
.keepsake .expiry,
.keepsake footer {
  color: oklch(0.8 0.015 305);
  font-size: 12px;
  line-height: 1.7;
}
.keepsake footer a {
  color: oklch(0.96 0.01 305);
  text-underline-offset: 4px;
  display: inline-block;
  padding: 12px 0;
}
.gift-player {
  border-top: 1px solid oklch(0.87 0.015 305);
  margin-top: 24px;
  padding-top: 20px;
}
.song-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.5;
}
.song-note {
  font-size: 12px;
  line-height: 1.6;
  color: oklch(0.45 0.02 315);
  margin: 0 0 14px;
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.player-controls button {
  border: 0;
  border-radius: 50%;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--seal);
  color: white;
  font-size: 17px;
  cursor: pointer;
}
.player-controls input {
  accent-color: var(--seal);
  width: 100%;
  min-width: 30px;
  min-height: 44px;
}
#song-time {
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#mute-song {
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--seal);
  border: 1px solid currentColor;
}
.song-status {
  font-size: 12px;
  line-height: 1.6;
  color: oklch(0.42 0.08 340);
}
.gift-player audio {
  width: 100%;
}
@keyframes keepsake-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 700px) {
  .keepsake {
    padding: 0 20px 20px;
  }
  .gift-demo-nav {
    min-height: 108px;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 0;
  }
  .gift-demo-nav > span {
    display: none;
  }
  .gift-demo-nav > div a {
    padding: 10px 12px;
  }
  .keepsake-heading {
    padding-top: 28px;
  }
  .envelope-scene {
    margin-top: 38px;
  }
  .keepsake .gift-content {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: auto;
  }
  .keepsake-art {
    padding: 16px 16px 0;
  }
  .keepsake-letter {
    padding: 24px;
  }
  .keepsake .message {
    font-size: 22px;
  }
  .keepsake .envelope .open-label {
    bottom: 18px;
  }
  .keepsake .seal {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .envelope-scene.is-opening {
    animation: none;
  }
  .envelope-scene.is-opening .envelope-card {
    transform: none;
  }
  .envelope-scene.is-opening .flap {
    transform: none;
  }
}

.keepsake .sender,
.letter-signature,
.song-title {
  overflow-wrap: anywhere;
}
.keepsake input:focus-visible {
  outline: 3px solid var(--seal);
  outline-offset: 4px;
}

/* Long names remain legible in the letter without overflowing the envelope. */
.envelope-address { right:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.envelope-card span { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.keepsake .gift-demo-nav a:focus-visible, .keepsake footer a:focus-visible, .keepsake .envelope:focus-visible { outline:3px solid oklch(0.93 0.04 75); outline-offset:5px; }