.lyw-recipient {
  --lr-ink: #644652;
  --lr-muted: #967781;
  --lr-rose: #b76d89;
  --lr-cream: #fffaf4;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--lr-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  background: radial-gradient(ellipse at 15% 5%, #f5dce5 0, transparent 50%), radial-gradient(ellipse at 90% 80%, #f8e6db 0, transparent 55%), #fffaf6;
  container-type: size;
  -webkit-font-smoothing: antialiased;
}
.lyw-recipient *, .lyw-recipient *::before, .lyw-recipient *::after { box-sizing: border-box; }
.lyw-recipient [hidden] { display: none !important; }
.lyw-recipient button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lyw-recipient button:disabled { cursor: default; }
.lyw-recipient button:focus-visible { outline: 3px solid #a86783; outline-offset: 5px; }
.lyw-recipient h2:focus { outline: none; }
.lyw-recipient p, .lyw-recipient h2, .lyw-recipient figure { margin: 0; }
.lyw-recipient .lr-ambience { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.lyw-recipient .lr-ambience::after { position: absolute; inset: 0; content: ""; opacity: .15; background-image: radial-gradient(#a57a84 .5px, transparent .5px); background-size: 4px 4px; }
.lyw-recipient .lr-float-heart { position: absolute; inset-inline-start: var(--x); top: var(--y); color: #d6a1b5; font: 24px/1 Georgia, serif; opacity: .21; transform: rotate(-12deg); animation: lr-float calc(5.3s + var(--n) * .43s) ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.7s); }
.lyw-recipient .lr-float-heart:nth-child(3n) { font-size: 17px; color: #b79374; opacity: .18; }
.lyw-recipient .lr-header { z-index: 2; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 19px 24px 6px; }
.lyw-recipient .lr-signature { color: #a9768a; font: italic 16px Georgia, serif; letter-spacing: -.4px; }
.lyw-recipient .lr-progress { display: flex; gap: 5px; }
.lyw-recipient .lr-progress span { width: 5px; height: 5px; border-radius: 50%; background: #dac7cc; }
.lyw-recipient .lr-progress span.is-active { background: #b77791; }
.lyw-recipient .lr-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #e2c8d0 transparent; }
.lyw-recipient .lr-opener { display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 25px 18px 32px; }
.lyw-recipient .lr-eyebrow { margin-bottom: 6px; color: var(--lr-muted); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.lyw-recipient .lr-name { max-width: 280px; overflow-wrap: anywhere; color: #75505f; font: italic 32px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.6px; }
.lyw-recipient .lr-opening-art { position: relative; flex-shrink: 0; width: 244px; height: 184px; margin: 8px 0 2px; perspective: 900px; }
.lyw-recipient .lr-opening-art::before { position: absolute; inset: 10% -15% -8%; border-radius: 50%; background: radial-gradient(ellipse, #e9b9cd66, transparent 70%); content: ""; animation: lr-glow 4s ease-in-out infinite; pointer-events: none; }
.lyw-recipient .lr-envelope { display: block; position: absolute; inset: 19% 0 0; width: 100%; height: 76%; border: 0; padding: 0; background: transparent; filter: drop-shadow(0 15px 12px #98687a24); transform: rotate(-6deg); transform-style: preserve-3d; animation: lr-tempt 7s ease-in-out infinite; }
.lyw-recipient .lr-envelope-back { position: absolute; inset: 0; border: 1px solid #d8a4b6; border-radius: 6px; background: #d69fb3; }
.lyw-recipient .lr-envelope-note { position: absolute; z-index: 2; inset: 8% 7% 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid #e8cfd1; border-radius: 4px; color: #b5768d; background: #fffaf1; box-shadow: 0 -4px 9px #a5687a12; }
.lyw-recipient .lr-note-star { font-size: 24px; line-height: 1; }
.lyw-recipient .lr-note-words { padding: 0 8px; max-width: 100%; font: italic 23px/1.1 Georgia, serif; overflow-wrap: anywhere; }
.lyw-recipient .lr-note-rule { width: 34px; height: 1px; background: #d8b5bf; }
.lyw-recipient .lr-envelope-front { position: absolute; z-index: 4; inset: 0; border-radius: 5px; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(147deg, transparent 49.7%, #d8a9bb 50%, transparent 50.5%), linear-gradient(33deg, #e9becb 49.7%, #d5a3b7 50%, #eec9d5 50.5%); box-shadow: inset 0 -1px 0 #ba7f9855; }
.lyw-recipient .lr-envelope-flap { position: absolute; z-index: 5; inset: 0 0 40%; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(175deg, #f1cdd9, #e3b4c5); backface-visibility: hidden; }
.lyw-recipient .lr-envelope-seal { position: absolute; z-index: 6; left: 50%; top: 42%; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d996ae; border-radius: 50%; color: #ffe5eb; background: radial-gradient(circle at 30% 20%, #d391a9, #b8748f); box-shadow: 0 3px 7px #8c506245, inset 0 0 0 3px #e6a7bf66; transform: translateX(-50%); font-size: 17px; }
.lyw-recipient .lr-open-hint { position: relative; border: 0; padding: 8px 13px; color: #9c6a7c; background: transparent; font-size: 12px; line-height: 1.3; border-radius: 20px; }
.lyw-recipient .lr-open-hint::after { display: block; width: 24px; height: 1px; margin: 9px auto 0; background: #d0a2b3; content: ""; }
.lyw-recipient .lr-open-hint:hover { color: #714957; background: #f1dce566; }
.lyw-recipient.is-opening .lr-envelope { animation: lr-envelope-settle 1.78s ease both; }
.lyw-recipient.is-opening .lr-envelope-flap { animation: lr-flap-open .7s cubic-bezier(.3,.65,.2,1) both; }
.lyw-recipient.is-opening .lr-envelope-seal { animation: lr-seal-open .4s ease both; }
.lyw-recipient.is-opening .lr-envelope-note { animation: lr-note-open 1.2s .48s cubic-bezier(.2,.65,.2,1) both; }
.lyw-recipient.is-opening .lr-open-hint, .lyw-recipient.is-opening .lr-intro { animation: lr-soft-out .5s ease both; }
.lyw-recipient .lr-scratch-card { position: absolute; inset: 0; overflow: hidden; border: 6px solid #fff8f2; border-radius: 15px; background: #fff8f0; box-shadow: 0 14px 26px #8f566324, 0 0 0 1px #e8c6d0; transform: rotate(-4deg); }
.lyw-recipient .lr-scratch-under { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.lyw-recipient .lr-scratch-under .lr-duo { width: 69%; margin: -5px auto -3px; }
.lyw-recipient .lr-scratch-under > span { color: #9c687b; font: italic 19px Georgia, serif; }
.lyw-recipient .lr-scratch-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.lyw-recipient.is-opening .lr-scratch-canvas { animation: lr-scratch-open .6s ease forwards; }
.lyw-recipient .lr-gift { position: absolute; inset: 0 13%; width: 74%; height: 100%; border: 0; padding: 0; background: transparent; transform: rotate(-5deg); animation: lr-tempt 7s 1s ease-in-out infinite; }
.lyw-recipient .lr-gift-box { position: absolute; z-index: 3; left: 9%; right: 9%; top: 42%; bottom: 0; border: 1px solid #d4a3b5; border-radius: 3px 3px 8px 8px; background: linear-gradient(115deg, #f1cdd8 0, #e6b8ca 70%, #d8a0b8); box-shadow: inset 0 7px 9px #a66f831c, 0 12px 18px #9a61752b; }
.lyw-recipient .lr-gift-band { position: absolute; z-index: 4; top: 42%; bottom: 0; left: 43%; width: 15%; background: linear-gradient(90deg, #f7e5ce, #fff0da 48%, #eed3b9); box-shadow: 1px 0 2px #a06a7120; }
.lyw-recipient .lr-gift-lid { position: absolute; z-index: 6; top: 31%; left: 3%; right: 3%; height: 18%; border: 1px solid #dbaabd; border-radius: 4px; background: linear-gradient(#f8dce5, #e8b9ca); box-shadow: 0 5px 6px #a2667d24; }
.lyw-recipient .lr-gift-lid::before { position: absolute; inset: 0 42%; content: ""; background: linear-gradient(90deg, #f5dec2, #fff0d9, #ecd0b3); }
.lyw-recipient .lr-bow { position: absolute; top: -91%; width: 31%; height: 111%; border: 8px solid #f7e5cb; box-shadow: inset 0 1px 3px #bd8c775e, 0 2px 2px #bf8a7a26; }
.lyw-recipient .lr-bow-left { left: 21%; border-radius: 65% 65% 10% 65%; transform: rotate(21deg); }
.lyw-recipient .lr-bow-right { right: 19%; border-radius: 65% 65% 65% 10%; transform: rotate(-21deg); }
.lyw-recipient .lr-bow-knot { position: absolute; top: -36%; left: 43%; width: 16%; height: 83%; display: grid; place-items: center; border-radius: 50%; color: #c18a99; background: #f9e8d1; font-size: 14px; box-shadow: 0 2px 4px #98687722; }
.lyw-recipient .lr-gift-note { position: absolute; z-index: 2; top: 35%; bottom: 8%; left: 16%; right: 16%; display: flex; flex-direction: column; justify-content: center; gap: 5px; border: 1px solid #e8d5c7; border-radius: 5px; color: #b16d88; background: #fffaf0; font: italic 20px Georgia, serif; }
.lyw-recipient .lr-gift-note > span:first-child { font-size: 35px; line-height: 1; }
.lyw-recipient.is-opening .lr-gift { animation: lr-gift-settle 1.4s ease both; }
.lyw-recipient.is-opening .lr-gift-lid { animation: lr-lid-open 1.2s ease both; }
.lyw-recipient.is-opening .lr-gift-note { animation: lr-gift-note 1.1s .2s ease both; }
.lyw-recipient .lr-letter, .lyw-recipient .lr-choices, .lyw-recipient .lr-result { width: min(100%, 460px); margin: 0 auto; padding: 18px 25px 22px; }
.lyw-recipient .lr-duo { width: 210px; max-width: 82%; margin: 0 auto 2px; }
.lyw-recipient .lr-duo svg { display: block; width: 100%; height: auto; overflow: visible; }
.lyw-recipient .lr-duo-left { transform-origin: 98px 132px; animation: lr-cuddle-left 4.5s ease-in-out infinite; }
.lyw-recipient .lr-duo-right { transform-origin: 168px 132px; animation: lr-cuddle-right 4.5s ease-in-out infinite; }
.lyw-recipient .lr-duo-love { transform-origin: 139px 18px; animation: lr-love 2.3s ease-in-out infinite; }
.lyw-recipient .lr-letter-name { color: #a77588; margin: 3px 0 7px; font: italic 20px Georgia, serif; overflow-wrap: anywhere; }
.lyw-recipient .lr-title { font: 30px/1.13 Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.65px; color: #6b4857; text-wrap: balance; overflow-wrap: anywhere; }
.lyw-recipient .lr-message { margin: 16px auto 20px; max-width: 33ch; font-size: 13px; line-height: 1.7; color: #8b6c77; white-space: pre-wrap; overflow-wrap: anywhere; }
.lyw-recipient .lr-time { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 17px 0; padding: 8px 12px; border: 1px solid #e7cdd52e; border-radius: 30px; font-size: 11px; color: #957481; background: #fffaf8b0; overflow-wrap: anywhere; }
.lyw-recipient .lr-time > span { font-size: 16px; color: #b58498; }
.lyw-recipient .lr-media { display: grid; gap: 12px; margin: 18px 0; text-align: start; }
.lyw-recipient .lr-photos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; align-items: center; padding: 5px; }
.lyw-recipient .lr-photos.has-one { grid-template-columns: minmax(0,1fr); max-width: 245px; margin: 0 auto; }
.lyw-recipient .lr-photo { min-width: 0; padding: 5px 5px 13px; background: #fffefb; box-shadow: 0 4px 14px #8a5f6f18; transform: rotate(-3deg); }
.lyw-recipient .lr-photo:nth-child(2n) { transform: rotate(3deg); }
.lyw-recipient .lr-photo img { display: block; width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; background: #f3e6e9; }
.lyw-recipient .lr-video { display: block; width: 100%; max-height: 300px; border-radius: 12px; background: #3c3036; }
.lyw-recipient .lr-audio { display: block; width: 100%; height: 44px; }
.lyw-recipient .lr-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 47px; border: 1px solid #a96581; border-radius: 14px; padding: 11px 18px; color: #fff9f7; background: linear-gradient(135deg, #c28a9f, #ab6b86); box-shadow: 0 6px 17px #a9658122, inset 0 1px 0 #ffffff25; font-size: 13px; font-weight: 600; transition: transform .2s, box-shadow .2s, opacity .2s; }
.lyw-recipient .lr-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 21px #a9658138; }
.lyw-recipient .lr-primary:active:not(:disabled) { transform: translateY(1px); }
.lyw-recipient .lr-primary:disabled { background: #dbc4ce; border-color: #dbc4ce; box-shadow: none; color: #fff8fa; }
.lyw-recipient .lr-next { justify-content: space-between; gap: 14px; margin-top: 22px; }
.lyw-recipient .lr-next-arrow { font-size: 20px; font-weight: 400; }
.lyw-recipient[dir="rtl"] .lr-next-arrow { transform: rotate(180deg); }
.lyw-recipient .lr-answer-buttons { display: grid; gap: 6px; margin-top: 23px; }
.lyw-recipient .lr-choices { padding-top: 24px; }
.lyw-recipient .lr-choice-ornament { margin-bottom: 9px; color: #b9869c; font: 37px/1 Georgia, serif; }
.lyw-recipient .lr-choice-hint { color: #9b7e88; font-size: 12px; line-height: 1.5; margin: 12px 5px 22px; }
.lyw-recipient .lr-activities { display: grid; gap: 10px; }
.lyw-recipient .lr-activity { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; border: 1px solid #e9d7db; border-radius: 15px; padding: 9px 12px 9px 9px; background: #fffcf8c9; text-align: start; color: #795766; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.lyw-recipient .lr-activity.is-summary { margin-top: 15px; background: #fffaf899; }
.lyw-recipient button.lr-activity:hover { border-color: #cd9db2; transform: translateY(-1px); }
.lyw-recipient .lr-activity.is-selected { border-color: #bc88a0; background: #f5e4eb; box-shadow: 0 3px 12px #aa71891a; }
.lyw-recipient .lr-activity-image, .lyw-recipient .lr-activity-fallback { flex-shrink: 0; display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 11px; background: #f6e8df; }
.lyw-recipient .lr-activity-fallback { display: grid; place-items: center; color: #b9879d; font: 29px Georgia, serif; }
.lyw-recipient .lr-activity-title { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.lyw-recipient .lr-activity-check { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; border: 1px solid #d9bdc9; border-radius: 50%; color: transparent; font-size: 11px; transition: background .2s, color .2s; }
.lyw-recipient .is-selected .lr-activity-check { color: #fff7fa; border-color: #b87d97; background: #b87d97; }
.lyw-recipient .lr-result { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding-top: 30px; padding-bottom: 35px; }
.lyw-recipient .lr-result .lr-duo { width: 250px; margin-bottom: 14px; }
.lyw-recipient .lr-result .lr-eyebrow { margin-bottom: 12px; }
.lyw-recipient .lr-result-title { font-size: 34px; margin-bottom: 9px; }
.lyw-recipient .lr-result .lr-activity { width: 100%; margin-top: 24px; }
.lyw-recipient .lr-result .lr-time { margin-bottom: 0; }
.lyw-recipient .lr-kind-heart { color: #c297a9; font: 100px/1 Georgia, serif; margin-bottom: 20px; }
.lyw-recipient .lr-footer { flex: 0 0 auto; padding: 2px 15px 15px; }
.lyw-recipient .lr-replay { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 9px; border: 0; border-radius: 20px; color: #b493a1; background: transparent; font-size: 10px; }
.lyw-recipient .lr-replay:hover { color: #805265; background: #ead3dc33; }
.lyw-recipient .lr-replay-icon { font-size: 16px; line-height: 1; }
.lyw-recipient .lr-celebration { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.lyw-recipient .lr-burst-heart { position: absolute; top: 72%; left: 50%; font-family: Georgia, serif; font-size: var(--burst-size); line-height: 1; color: #ce91aa; opacity: 0; animation: lr-burst 2.3s var(--burst-delay) cubic-bezier(.12,.6,.32,1) both; }
.lyw-recipient .lr-burst-heart:nth-child(3n) { color: #d6b28d; }
.lyw-recipient .lr-enter { animation: lr-enter .65s cubic-bezier(.18,.65,.3,1) both; }
.lyw-recipient.is-compact .lr-header { padding: 9px 14px 2px; }
.lyw-recipient.is-compact .lr-signature { font-size: 12px; }
.lyw-recipient.is-compact .lr-opener { gap: 3px; padding: 5px 12px 8px; }
.lyw-recipient.is-compact .lr-eyebrow { font-size: 9px; margin-bottom: 3px; }
.lyw-recipient.is-compact .lr-name { max-width: 260px; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyw-recipient.is-compact .lr-opening-art { width: 151px; height: 106px; margin: 2px 0 0; }
.lyw-recipient.is-compact .lr-note-star { font-size: 17px; }
.lyw-recipient.is-compact .lr-note-words { font-size: 15px; }
.lyw-recipient.is-compact .lr-envelope-note { gap: 5px; }
.lyw-recipient.is-compact .lr-envelope-seal { width: 26px; height: 26px; font-size: 13px; }
.lyw-recipient.is-compact .lr-open-hint { padding: 5px 9px; font-size: 10px; }
.lyw-recipient.is-compact .lr-open-hint::after { display: none; }
.lyw-recipient.is-compact .lr-bow { border-width: 5px; }
.lyw-recipient.is-compact .lr-bow-knot { font-size: 10px; }
.lyw-recipient.is-compact .lr-gift-note { font-size: 13px; }
.lyw-recipient.is-compact .lr-gift-note > span:first-child { font-size: 23px; }
.lyw-recipient.is-compact .lr-scratch-card { border-width: 4px; border-radius: 10px; }
.lyw-recipient.is-compact .lr-scratch-under > span { font-size: 13px; }
.lyw-recipient.is-compact .lr-letter, .lyw-recipient.is-compact .lr-choices, .lyw-recipient.is-compact .lr-result { max-width: 400px; padding: 10px 20px 14px; }
.lyw-recipient.is-compact .lr-duo { width: 112px; margin-top: -6px; }
.lyw-recipient.is-compact .lr-letter-name { font-size: 16px; margin: 0 0 4px; }
.lyw-recipient.is-compact .lr-title { font-size: 24px; }
.lyw-recipient.is-compact .lr-message { margin: 10px auto 13px; font-size: 12px; line-height: 1.6; }
.lyw-recipient.is-compact .lr-footer { padding: 0 10px 5px; }
.lyw-recipient.is-compact .lr-replay { min-height: 21px; font-size: 9px; }
.lyw-recipient.is-compact .lr-result .lr-duo { width: 125px; margin-bottom: 4px; }
.lyw-recipient.is-compact .lr-kind-heart { font-size: 58px; margin-bottom: 8px; }
.lyw-recipient.is-compact .lr-choice-ornament { display: none; }
.lyw-recipient.is-compact .lr-choice-hint { margin: 7px 0 13px; }
.lyw-recipient.is-compact .lr-activity { min-height: 62px; padding: 7px; }
.lyw-recipient.is-compact .lr-activity-image, .lyw-recipient.is-compact .lr-activity-fallback { width: 45px; height: 45px; }
.lyw-recipient.is-compact .lr-answer-buttons { margin-top: 14px; }
.lyw-recipient.is-compact .lr-time { margin: 10px 0; }
.lyw-recipient.is-paused *, .lyw-recipient.is-paused *::before, .lyw-recipient.is-paused *::after { animation-play-state: paused !important; }
.lyw-recipient.is-reduced *, .lyw-recipient.is-reduced *::before, .lyw-recipient.is-reduced *::after { animation: none !important; transition: none !important; }
@container (min-height: 300px) {
  .lyw-recipient.is-compact .lr-opener { gap: 10px; }
  .lyw-recipient.is-compact .lr-opening-art { width: 210px; height: 154px; margin: 8px 0; }
  .lyw-recipient.is-compact .lr-name { font-size: 26px; }
  .lyw-recipient.is-compact .lr-open-hint { font-size: 12px; }
  .lyw-recipient.is-compact .lr-envelope-seal { width: 31px; height: 31px; font-size: 15px; }
  .lyw-recipient.is-compact .lr-note-words { font-size: 20px; }
  .lyw-recipient.is-compact .lr-note-star { font-size: 24px; }
  .lyw-recipient.is-compact .lr-duo { width: 155px; }
  .lyw-recipient.is-compact .lr-gift-note { font-size: 18px; }
  .lyw-recipient.is-compact .lr-scratch-under > span { font-size: 17px; }
  .lyw-recipient.is-compact .lr-bow { border-width: 7px; }
}
@container (max-height: 180px) {
  .lyw-recipient.is-compact .lr-header { padding: 5px 12px 0; }
  .lyw-recipient.is-compact .lr-signature { font-size: 11px; }
  .lyw-recipient.is-compact .lr-opener { gap: 2px; padding: 4px 12px; }
  .lyw-recipient.is-compact .lr-intro .lr-eyebrow { display: none; }
  .lyw-recipient.is-compact .lr-name { font-size: 18px; }
  .lyw-recipient.is-compact .lr-opening-art { width: 105px; height: 69px; margin: 0; }
  .lyw-recipient.is-compact .lr-envelope-note { gap: 2px; }
  .lyw-recipient.is-compact .lr-note-star { font-size: 10px; }
  .lyw-recipient.is-compact .lr-note-words { font-size: 12px; }
  .lyw-recipient.is-compact .lr-note-rule { width: 22px; }
  .lyw-recipient.is-compact .lr-envelope-seal { width: 19px; height: 19px; font-size: 10px; }
  .lyw-recipient.is-compact .lr-open-hint { max-width: 100%; padding: 4px 8px; font-size: 10px; }
  .lyw-recipient.is-compact .lr-bow { border-width: 4px; }
  .lyw-recipient.is-compact .lr-bow-knot { font-size: 7px; }
  .lyw-recipient.is-compact .lr-gift-note { font-size: 9px; }
  .lyw-recipient.is-compact .lr-gift-note > span:first-child { font-size: 18px; }
  .lyw-recipient.is-compact .lr-scratch-under > span { font-size: 10px; }
  .lyw-recipient.is-compact[data-scene="letter"] .lr-header,
  .lyw-recipient.is-compact[data-scene="letter"] .lr-footer,
  .lyw-recipient.is-compact[data-scene="choices"] .lr-header,
  .lyw-recipient.is-compact[data-scene="choices"] .lr-footer { display: none; }
  .lyw-recipient.is-compact .lr-letter { padding: 8px 13px; }
  .lyw-recipient.is-compact .lr-letter > .lr-duo { display: none; }
  .lyw-recipient.is-compact .lr-letter-name { margin: 0 0 2px; font-size: 11px; line-height: 1.15; }
  .lyw-recipient.is-compact .lr-letter .lr-title { font-size: 15px; line-height: 1.18; letter-spacing: -.15px; }
  .lyw-recipient.is-compact .lr-letter .lr-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 44ch; max-height: 2.7em; margin: 5px auto 0; overflow: hidden; font-size: 11px; line-height: 1.35; }
  .lyw-recipient.is-compact .lr-letter > .lr-next,
  .lyw-recipient.is-compact .lr-letter > .lr-answer-buttons,
  .lyw-recipient.is-compact .lr-letter > .lr-time,
  .lyw-recipient.is-compact .lr-letter > .lr-activity { display: none; }
  .lyw-recipient.is-compact .lr-media { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; height: 44px; margin: 7px 0 0; overflow: hidden; }
  .lyw-recipient.is-compact .lr-photos,
  .lyw-recipient.is-compact .lr-photos.has-one { display: flex; flex: 0 0 auto; gap: 5px; max-width: none; margin: 0; padding: 0; }
  .lyw-recipient.is-compact .lr-photo { width: 42px; height: 42px; flex: 0 0 42px; padding: 3px; }
  .lyw-recipient.is-compact .lr-photo:nth-child(n+3) { display: none; }
  .lyw-recipient.is-compact .lr-photo img { width: 100%; height: 100%; aspect-ratio: auto; }
  .lyw-recipient.is-compact .lr-video { flex: 0 0 66px; width: 66px; height: 44px; max-height: 44px; border-radius: 6px; object-fit: cover; }
  .lyw-recipient.is-compact .lr-audio { flex: 0 1 160px; width: 160px; min-width: 100px; height: 32px; }
  .lyw-recipient.is-compact .lr-choices { padding: 8px 12px; }
  .lyw-recipient.is-compact .lr-choices .lr-title { font-size: 15px; line-height: 1.2; letter-spacing: -.15px; }
  .lyw-recipient.is-compact .lr-choice-hint { margin: 3px 0 7px; overflow: hidden; font-size: 9px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
  .lyw-recipient.is-compact .lr-activities { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .lyw-recipient.is-compact .lr-activities:has(.lr-activity:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lyw-recipient.is-compact .lr-choices .lr-activity { position: relative; flex-direction: column; gap: 3px; justify-content: center; min-height: 64px; padding: 5px; border-radius: 9px; text-align: center; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-image,
  .lyw-recipient.is-compact .lr-choices .lr-activity-fallback { width: 25px; height: 25px; border-radius: 5px; font-size: 18px; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-title { display: -webkit-box; flex: 0 0 auto; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 10px; line-height: 1.1; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-check { position: absolute; top: 4px; inset-inline-end: 4px; width: 12px; height: 12px; font-size: 8px; }
  .lyw-recipient.is-compact .lr-choices > .lr-time { display: none; }
  .lyw-recipient.is-compact .lr-choices .lr-answer-buttons { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
  .lyw-recipient.is-compact .lr-choices .lr-primary { min-height: 25px; padding: 4px 9px; border-radius: 8px; font-size: 10px; }
}
@container (max-height: 125px) {
  .lyw-recipient.is-compact .lr-header { display: none; }
  .lyw-recipient.is-compact .lr-opener { gap: 2px; padding: 3px 12px; }
  .lyw-recipient.is-compact .lr-name { font-size: 16px; }
  .lyw-recipient.is-compact .lr-opening-art { width: 88px; height: 56px; }
  .lyw-recipient.is-compact .lr-envelope-seal { width: 16px; height: 16px; font-size: 8px; }
  .lyw-recipient.is-compact .lr-open-hint { padding: 3px 8px; }
}
@keyframes lr-float { from { transform: translate3d(0, 4px, 0) rotate(-12deg); } to { transform: translate3d(6px, -13px, 0) rotate(10deg); } }
@keyframes lr-glow { 0%, 100% { opacity: .55; transform: scale(.91); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes lr-tempt { 0%, 74%, 100% { transform: translateY(0) rotate(-6deg); } 78% { transform: translateY(-4px) rotate(-9deg); } 82% { transform: translateY(-5px) rotate(-3deg); } 86% { transform: translateY(-3px) rotate(-7deg); } 90% { transform: translateY(0) rotate(-6deg); } }
@keyframes lr-flap-open { 0% { transform: rotateX(0); z-index: 5; } 49% { z-index: 5; } 50%, 100% { transform: rotateX(178deg); z-index: 1; } }
@keyframes lr-seal-open { to { opacity: 0; transform: translate(-50%, 12px) scale(.7); } }
@keyframes lr-note-open { 0% { transform: translateY(0); } 65% { transform: translateY(-68%); opacity: 1; } 100% { transform: translateY(-79%); opacity: 0; } }
@keyframes lr-envelope-settle { 0% { transform: rotate(-6deg); } 30% { transform: translateY(18%) rotate(0); } 75% { opacity: 1; transform: translateY(18%) rotate(0); } 100% { opacity: 0; transform: translateY(24%) rotate(0); } }
@keyframes lr-soft-out { to { opacity: 0; } }
@keyframes lr-scratch-open { to { opacity: 0; } }
@keyframes lr-lid-open { 0% { transform: translateY(0) rotate(0); } 45% { opacity: 1; transform: translate(-5%, -145%) rotate(-14deg); } 100% { opacity: 0; transform: translate(-10%, -190%) rotate(-22deg); } }
@keyframes lr-gift-note { 0% { transform: translateY(0); } 70% { opacity: 1; transform: translateY(-64%) rotate(5deg); } 100% { opacity: 0; transform: translateY(-80%) rotate(5deg); } }
@keyframes lr-gift-settle { 0% { transform: rotate(-5deg); } 35% { transform: translateY(12%) rotate(0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(18%) rotate(0); } }
@keyframes lr-cuddle-left { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) translateX(3px); } }
@keyframes lr-cuddle-right { 0%,100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg) translateX(-2px); } }
@keyframes lr-love { 0%,100% { transform: translateY(0) scale(.94); opacity: .75; } 50% { transform: translateY(-5px) scale(1.08); opacity: 1; } }
@keyframes lr-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lr-burst { 0% { opacity: 0; transform: translate(-50%, 0) scale(.3); } 13% { opacity: .9; } 75% { opacity: .65; } 100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--burst-rotate)) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .lyw-recipient *, .lyw-recipient *::before, .lyw-recipient *::after { animation: none !important; transition: none !important; } }

/* V8: a small paper theatre, with one obvious action in every scene. */
.lyw-recipient { --lr-ink: #603d4c; --lr-muted: #896471; --lr-rose: #b84676; background: radial-gradient(ellipse at 50% 38%, #f8dce7 0, transparent 63%), #fff8f8; }
.lyw-recipient .lr-signature { color: #a56b82; }
.lyw-recipient .lr-progress span { transition: width .4s, background .4s; }
.lyw-recipient .lr-progress span.is-active { width: 14px; border-radius: 8px; background: #bd6289; }
.lyw-recipient .lr-opening-art::after { position: absolute; inset: -17% -12%; border: 1px solid #d6a4b53d; border-radius: 50%; content: ""; pointer-events: none; transform: rotate(-25deg) scaleX(1.14); }
.lyw-recipient .lr-envelope { filter: drop-shadow(0 18px 14px #9f627632); animation-duration: 4.6s; }
.lyw-recipient .lr-envelope-front { background: linear-gradient(147deg, transparent 49.7%, #dba8bd 50%, transparent 50.5%), linear-gradient(33deg, #edbfd2 49.7%, #dba3bd 50%, #f1cbdb 50.5%); }
.lyw-recipient .lr-envelope-flap { background: linear-gradient(175deg, #f6d7e4, #e8b3cd); }
.lyw-recipient .lr-envelope-seal { color: #fff8f2; border-color: #c17697; background: radial-gradient(circle at 32% 20%, #db8aaa, #a74770); box-shadow: 0 4px 9px #94506a38, inset 0 0 0 3px #f1a9c14d; }
.lyw-recipient .lr-envelope-seal::before { position: absolute; inset: -7px; border: 1px solid #bf658751; border-radius: inherit; content: ""; animation: lr-seal-beacon 2.6s ease-out infinite; }
.lyw-recipient .lr-open-hint { display: inline-flex; align-items: center; justify-content: center; gap: 15px; max-width: 100%; min-height: 45px; padding: 12px 21px; border: 1px solid #b5517c; border-radius: 30px; color: #fffaf7; background: linear-gradient(135deg, #c96590, #ae3d70); box-shadow: 0 6px 16px #b24a752b, inset 0 1px 0 #fff5f64d; font-size: 13px; font-weight: 650; text-align: center; transition: box-shadow .2s, transform .2s; }
.lyw-recipient .lr-open-hint::after { display: none; }
.lyw-recipient .lr-open-hint::before { position: absolute; z-index: -1; inset: 8px 12px -7px; border-radius: inherit; background: #d678a9; filter: blur(12px); opacity: .5; content: ""; animation: lr-action-glow 2.8s ease-in-out infinite; }
.lyw-recipient .lr-open-hint:hover { color: #fff; background: linear-gradient(135deg, #c35b88, #a83366); box-shadow: 0 9px 24px #b24a7540; transform: translateY(-2px); }
.lyw-recipient .lr-open-hint:active { transform: translateY(1px) scale(.97); }
.lyw-recipient .lr-open-hint:disabled { cursor: default; }
.lyw-recipient .lr-open-label { min-width: 0; overflow-wrap: anywhere; }
.lyw-recipient .lr-open-arrow { flex-shrink: 0; font-size: 20px; font-weight: 400; }
.lyw-recipient[dir="rtl"] .lr-open-arrow { transform: rotate(180deg); }
.lyw-recipient .lr-title { color: #593c49; }
.lyw-recipient .lr-message { color: #775563; }
.lyw-recipient .lr-letter { padding-top: 8px; }
.lyw-recipient .lr-duo { position: relative; width: 228px; }
.lyw-recipient .lr-primary { position: relative; isolation: isolate; overflow: visible; min-height: 51px; padding: 13px 18px; border: 1px solid #ad3f6b; border-radius: 17px; background: linear-gradient(130deg, #ca608b, #ad3b6d); box-shadow: 0 7px 20px #b84d782e, inset 0 1px 0 #fff3f640; font-size: 14px; font-weight: 650; letter-spacing: .01em; }
.lyw-recipient .lr-primary:not(:disabled)::after { position: absolute; z-index: -1; inset: 12px 15px -7px; border-radius: inherit; background: #cc6c9c; filter: blur(13px); opacity: .46; content: ""; animation: lr-action-glow 2.8s ease-in-out infinite; }
.lyw-recipient .lr-primary:hover:not(:disabled) { box-shadow: 0 11px 26px #ad4d7840; }
.lyw-recipient .lr-primary:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.lyw-recipient .lr-primary:disabled { color: #785463; background: #ead8df; border-color: #dfc4d0; }
.lyw-recipient .lr-choice-hint { color: #86616f; }
.lyw-recipient .lr-activities { gap: 12px; }
.lyw-recipient .lr-activity { position: relative; min-height: 86px; padding: 8px 13px 8px 8px; gap: 13px; border-radius: 19px; border-color: #e6cbd6; background: #fffdfbe8; color: #674552; box-shadow: 0 4px 12px #9e5a7910; }
.lyw-recipient .lr-activity-image, .lyw-recipient .lr-activity-fallback { width: 66px; height: 66px; border-radius: 13px; }
.lyw-recipient .lr-activity-title { font-size: 14px; font-weight: 600; }
.lyw-recipient .lr-activity-check { flex-basis: 25px; width: 25px; height: 25px; border-color: #dab6c7; color: transparent; font-size: 13px; }
.lyw-recipient .lr-activity.is-selected { border-color: #b84d7a; background: #fff2f7; box-shadow: 0 0 0 1px #c977984a, 0 8px 20px #b5567c20; transform: translateY(-2px); }
.lyw-recipient .is-selected .lr-activity-check { border-color: #b64c78; background: #b64c78; color: white; box-shadow: 0 3px 9px #b64c7830; }
.lyw-recipient .lr-time { border: 1px solid #ead3dd; color: #7a5365; background: #fffaf8db; }
.lyw-recipient .lr-result { position: relative; isolation: isolate; }
.lyw-recipient .lr-result .lr-duo { width: 248px; margin-bottom: 2px; }
.lyw-recipient .lr-result .lr-eyebrow { color: #9b5874; font-size: 11px; letter-spacing: .13em; }
.lyw-recipient .lr-result-title { color: #6e3e54; font-size: 35px; }
.lyw-recipient .lr-result-halo { position: absolute; z-index: -1; top: 10%; left: 50%; width: 250px; height: 250px; transform: translateX(-50%); pointer-events: none; }
.lyw-recipient .lr-result-halo span { position: absolute; inset: 0; border: 1px solid #d295ad50; border-radius: 50%; animation: lr-result-orbit 5s ease-in-out infinite alternate; }
.lyw-recipient .lr-result-halo span:nth-child(2) { inset: -14px; border-color: #ddb6c342; animation-delay: -1.3s; }
.lyw-recipient .lr-result-halo span:nth-child(3) { inset: 16px; border: 0; background: radial-gradient(circle, #efbbd352, transparent 68%); animation-delay: -.7s; }
.lyw-recipient .lr-date-ticket { position: relative; width: 100%; margin-top: 23px; padding: 11px 14px 13px; border: 1px solid #e5c9d5; border-radius: 16px; background: #fffdf6e3; box-shadow: 0 8px 23px #91627812; }
.lyw-recipient .lr-date-ticket::before, .lyw-recipient .lr-date-ticket::after { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fbedeb; content: ""; }
.lyw-recipient .lr-date-ticket::before { left: -7px; box-shadow: inset -1px 0 #e5c9d5; }
.lyw-recipient .lr-date-ticket::after { right: -7px; box-shadow: inset 1px 0 #e5c9d5; }
.lyw-recipient .lr-ticket-seal { position: absolute; top: -12px; left: calc(50% - 12px); display: grid; place-items: center; width: 25px; height: 25px; border: 4px solid #fff8f5; border-radius: 50%; color: #fff7f5; background: #bd688b; font-size: 10px; }
.lyw-recipient .lr-date-ticket .lr-activity { min-height: 69px; border: 0; margin-top: 0; padding: 5px 0; background: transparent; box-shadow: none; }
.lyw-recipient .lr-date-ticket .lr-activity-image { width: 57px; height: 57px; }
.lyw-recipient .lr-date-ticket .lr-time { margin: 8px 0 0; border-width: 1px 0 0; border-style: dashed; border-radius: 0; background: transparent; padding: 12px 0 0; }
.lyw-recipient .lr-result.is-no .lr-title { color: #805c6c; }
.lyw-recipient .lr-celebration[data-kind="open"] .lr-burst-heart { top: 52%; animation-duration: 1.65s; }
.lyw-recipient .lr-burst-heart { color: #ce749b; text-shadow: 0 2px 4px #ad567724; }
.lyw-recipient .lr-burst-heart:nth-child(3n) { color: #d7b478; }
.lyw-recipient .lr-burst-heart:nth-child(4n) { color: #e6a0bd; }
.lyw-recipient .lr-burst-ring { position: absolute; top: 37%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 2px solid #d68dab; border-radius: 50%; animation: lr-ring-burst 1.5s cubic-bezier(.16,.74,.2,1) both; }
.lyw-recipient.has-gsap .lr-enter { animation: none; }
.lyw-recipient.has-gsap.is-opening .lr-envelope, .lyw-recipient.has-gsap.is-opening .lr-envelope-flap, .lyw-recipient.has-gsap.is-opening .lr-envelope-seal, .lyw-recipient.has-gsap.is-opening .lr-envelope-note, .lyw-recipient.has-gsap.is-opening .lr-gift, .lyw-recipient.has-gsap.is-opening .lr-gift-lid, .lyw-recipient.has-gsap.is-opening .lr-gift-note, .lyw-recipient.has-gsap.is-opening .lr-scratch-canvas, .lyw-recipient.has-gsap.is-opening .lr-open-hint { animation: none; }
.lyw-recipient.is-compact .lr-open-hint { min-height: 29px; padding: 5px 11px; gap: 8px; font-size: 10px; }
.lyw-recipient.is-compact .lr-open-arrow { font-size: 14px; }
.lyw-recipient.is-compact .lr-open-hint::before { filter: blur(7px); inset: 8px 12px -3px; }
.lyw-recipient.is-compact .lr-activity { min-height: 63px; }
.lyw-recipient.is-compact .lr-activity-title { font-size: 12px; }
.lyw-recipient.is-compact .lr-result-halo { width: 125px; height: 125px; }
.lyw-recipient.is-compact .lr-date-ticket { margin-top: 16px; padding: 7px 10px 9px; }
.lyw-recipient.is-compact .lr-date-ticket .lr-activity { min-height: 50px; }
.lyw-recipient.is-compact .lr-date-ticket .lr-activity-image { width: 42px; height: 42px; }
@container (min-height: 300px) {
  .lyw-recipient.is-compact .lr-open-hint { min-height: 38px; padding: 8px 17px; font-size: 12px; }
}
@container (max-height: 180px) {
  .lyw-recipient.is-compact .lr-opener { gap: 3px; }
  .lyw-recipient.is-compact .lr-open-hint { min-height: 24px; padding: 4px 9px; font-size: 10px; }
  .lyw-recipient.is-compact .lr-open-arrow { font-size: 12px; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-title { font-size: 10px; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-check { flex-basis: 12px; }
  .lyw-recipient.is-compact .lr-activities { gap: 5px; }
  .lyw-recipient.is-compact .lr-result { padding: 8px 15px; }
  .lyw-recipient.is-compact .lr-result .lr-duo { width: 65px; margin: 0 auto; }
  .lyw-recipient.is-compact .lr-result .lr-eyebrow { font-size: 8px; margin: 0 0 4px; }
  .lyw-recipient.is-compact .lr-result-title { font-size: 17px; margin: 0; }
  .lyw-recipient.is-compact .lr-date-ticket { margin-top: 12px; }
  .lyw-recipient.is-compact .lr-date-ticket .lr-activity { min-height: 30px; }
  .lyw-recipient.is-compact .lr-date-ticket .lr-activity-image { width: 28px; height: 28px; }
  .lyw-recipient.is-compact .lr-date-ticket .lr-time { font-size: 9px; padding-top: 5px; margin-top: 3px; }
}
@container (max-height: 125px) {
  .lyw-recipient.is-compact .lr-open-hint { min-height: 22px; padding: 3px 9px; }
  .lyw-recipient.is-compact .lr-choices { padding: 6px 11px; }
  .lyw-recipient.is-compact .lr-choices .lr-title { font-size: 14px; }
  .lyw-recipient.is-compact .lr-choice-hint { display: none; }
  .lyw-recipient.is-compact .lr-activities { margin-top: 6px; }
  .lyw-recipient.is-compact .lr-choices .lr-activity { min-height: 45px; gap: 2px; padding: 4px; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-image,
  .lyw-recipient.is-compact .lr-choices .lr-activity-fallback { width: 24px; height: 24px; }
  .lyw-recipient.is-compact .lr-choices .lr-activity-title { display: block; max-width: 100%; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
}
@container (min-height: 181px) and (max-height: 260px) {
  .lyw-recipient.is-compact .lr-header { padding: 5px 12px 0; }
  .lyw-recipient.is-compact .lr-opener { gap: 6px; padding: 4px 12px 7px; }
  .lyw-recipient.is-compact .lr-intro .lr-eyebrow { display: none; }
  .lyw-recipient.is-compact .lr-name { font-size: 20px; }
  .lyw-recipient.is-compact .lr-opening-art { width: clamp(126px,70cqh,168px); height: clamp(78px,42cqh,100px); margin: 0; }
  .lyw-recipient.is-compact .lr-open-hint { min-height: 30px; font-size: 11px; }
}
@keyframes lr-action-glow { 0%,100% { opacity: .35; transform: scaleX(.92); } 50% { opacity: .68; transform: scaleX(1.04); } }
@keyframes lr-seal-beacon { 0% { opacity: .75; transform: scale(.8); } 80%,100% { opacity: 0; transform: scale(1.5); } }
@keyframes lr-ring-burst { 0% { opacity: .55; transform: scale(.1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes lr-result-orbit { 0% { transform: scale(.92) rotate(-6deg); opacity: .65; } 100% { transform: scale(1.05) rotate(5deg); opacity: 1; } }

/* A real persisted response is confirmed before showing the celebration. */
.lyw-recipient .lr-response-status { margin: 14px 0 2px; padding: 12px 14px; border: 1px solid #e7c6d5; border-radius: 13px; background: #fff9f9; color: #85566b; font-size: 12px; line-height: 1.5; }
.lyw-recipient .lr-response-status.is-error { border-color: #ce98a7; color: #8c3d59; }
.lyw-recipient .lr-retry-answer { display: block; width: 100%; min-height: 42px; margin-top: 9px; border: 1px solid #b9577d; border-radius: 10px; padding: 8px 12px; color: #fffaf7; background: #b24b76; font-size: 12px; font-weight: 600; }
.lyw-recipient.is-answer-pending .lr-activity { pointer-events: none; }
.lyw-recipient.is-compact .lr-response-status { margin-top: 8px; padding: 7px 9px; font-size: 10px; }

/* Standalone test invitation: labels live outside the invitation artwork. */
body.lyw-public { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 360px; margin: 0; color: #654254; background: #f8eef2; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lyw-public * { box-sizing: border-box; }
.lyw-public [hidden] { display: none !important; }
.lyw-public .lp-test-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-shrink: 0; width: min(100%, 560px); margin: 0 auto; padding: max(12px,env(safe-area-inset-top)) 19px 7px; font-size: 10px; color: #8f6f7e; }
.lyw-public .lp-brand { color: #995774; font-size: 14px; font-weight: 700; letter-spacing: -.3px; }
.lyw-public .lp-test-notice { width: min(100%, 560px); flex-shrink: 0; margin: 0 auto; padding: 0 19px 11px; font-size: 10px; line-height: 1.4; color: #947180; }
.lyw-public .lp-public-main { flex: 1 1 auto; min-height: 0; width: min(100%, 520px); margin: 0 auto; padding: 0 12px max(12px,env(safe-area-inset-bottom)); }
.lyw-public #invitation-host { height: 100%; overflow: hidden; border: 1px solid #edd4df; border-radius: 25px; box-shadow: 0 15px 45px #9b647d14; }
.lyw-public .lp-load-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 260px; padding: 30px; border: 1px solid #edd4df; border-radius: 25px; background: #fff9f6; text-align: center; }
.lyw-public .lp-load-heart { color: #c57d9e; font: 66px/1 Georgia, serif; }
.lyw-public .lp-load-state h1 { margin: 20px 0 0; font: 28px/1.2 Georgia, serif; }
.lyw-public .lp-load-state p { max-width: 32ch; margin: 13px 0 0; color: #8b6578; font-size: 13px; line-height: 1.6; }
.lyw-public #invitation-retry { min-height: 46px; margin-top: 24px; padding: 11px 20px; border: 1px solid #a34670; border-radius: 14px; color: #fffaf7; background: #b44f7b; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.lyw-public #invitation-retry:focus-visible { outline: 3px solid #a86783; outline-offset: 4px; }
.lyw-public noscript p { margin: 15px; font-size: 13px; text-align: center; }
@media (min-width: 600px) { .lyw-public .lp-public-main { padding-bottom: 23px; } }

/* Paper scene: one illustration system, with the revealed sheet becoming the letter. */
.lyw-recipient .lr-ambience::after { opacity: .045; background-size: 3px 3px; }
.lyw-recipient .lr-float-heart { opacity: .10; animation: none; }
.lyw-recipient .lr-float-heart:nth-child(n+5) { display: none; }
.lyw-recipient .lr-signature img { display: block; width: 68px; height: 38px; object-fit: contain; }
.lyw-recipient.is-compact .lr-signature img { width: 43px; height: 24px; }
.lyw-recipient .lr-opening-art::after { display: none; }
.lyw-recipient .lr-opening-art::before { animation: none; inset: 29% -16% -18%; background: radial-gradient(ellipse, #edbed578, transparent 68%); }
.lyw-recipient .lr-envelope { animation-duration: 5.5s; filter: drop-shadow(2px 20px 12px #9a426d27); }
.lyw-recipient .lr-envelope-back { border-radius: 8px; background: linear-gradient(150deg,#b75b83,#d38fab); border-color: #d38fab; }
.lyw-recipient .lr-envelope-front { border-radius: 7px; background: linear-gradient(147deg,transparent 49.5%,#cc8ca94f 49.9%,transparent 50.6%),linear-gradient(33deg,#e8adc6 49.5%,#ce88a651 50%,#f4cadd 50.5%); }
.lyw-recipient .lr-envelope-flap { background: linear-gradient(170deg,#f8d8e6 8%,#e2a2bf 100%); }
.lyw-recipient .lr-envelope-note { background: #fffdf9; border: 1px solid #f1dce4; border-radius: 5px; box-shadow: 0 -4px 14px #813e5f13; gap: 7px; padding: 8px; }
.lyw-recipient .lr-note-star { color: #c66c94; width: 24px; height: 24px; }
.lyw-recipient .lr-note-star svg,.lyw-recipient .lr-seal-heart svg,.lyw-recipient .lr-letter-emblem svg { display: block; width: 100%; height: 100%; }
.lyw-recipient .lr-note-words { font: 21px/1.13 Georgia,serif; color: #713951; text-wrap: balance; }
.lyw-recipient .lr-envelope-seal { width: 39px; height: 39px; top: 41%; border-color: #b65d85; background: radial-gradient(circle at 28% 17%,#e6a0bc,#b9537f 75%); box-shadow: 0 4px 7px #8136563b,inset 0 0 0 3px #f7c0d255,inset 0 0 0 4px #9b426329; }
.lyw-recipient .lr-seal-heart { display: block; width: 23px; height: 23px; color: #ffedf3; }
.lyw-recipient .lr-envelope-seal::before { animation-duration: 4s; }
.lyw-recipient .lr-letter { position: relative; width: calc(100% - 32px); max-width: 410px; margin: 16px auto 22px; padding: 28px 24px; border: 1px solid #edcfdc; border-radius: 7px; background: #fffdf9; box-shadow: 0 14px 30px -18px #82385855; }
.lyw-recipient .lr-letter::before { content: ''; position: absolute; inset: 7px; border: 1px solid #f4e6e9; border-radius: 3px; pointer-events: none; }
.lyw-recipient .lr-letter-emblem { display: block; width: 43px; height: 43px; color: #bd638c; margin: 0 auto 18px; transform: rotate(-8deg); }
.lyw-recipient .lr-letter-name { color: #ac6482; font-size: 20px; margin-bottom: 12px; }
.lyw-recipient .lr-letter .lr-title { font-size: 34px; line-height: 1.08; letter-spacing: -1px; color: #65354c; }
.lyw-recipient .lr-letter .lr-message { font-size: 14px; line-height: 1.65; color: #765967; margin: 20px auto; }
.lyw-recipient .lr-primary { min-height: 50px; border-radius: 13px; background: linear-gradient(120deg,#ba517f,#a63b6b); border-color: #a94170; box-shadow: 0 7px 19px #ad42752b; }
.lyw-recipient.is-compact .lr-envelope-note { padding: 4px; gap: 3px; }
.lyw-recipient.is-compact .lr-note-star { width: 14px; height: 14px; }
.lyw-recipient.is-compact .lr-note-words { font-size: 13px; }
.lyw-recipient.is-compact .lr-envelope-seal { width: 28px; height: 28px; }
.lyw-recipient.is-compact .lr-seal-heart { width: 16px; height: 16px; }
.lyw-recipient.is-compact .lr-letter { width: calc(100% - 22px); margin: 8px auto 15px; padding: 18px 19px; }
.lyw-recipient.is-compact .lr-letter-emblem { width: 28px; height: 28px; margin-bottom: 10px; }
.lyw-recipient.is-compact .lr-letter .lr-title { font-size: 25px; }
.lyw-recipient.is-compact .lr-letter .lr-message { font-size: 12px; margin: 13px auto; }
@container (max-height: 180px) {
  .lyw-recipient.is-compact .lr-signature img { width: 30px; height: 17px; }
  .lyw-recipient.is-compact .lr-envelope-seal { width: 19px; height: 19px; }
  .lyw-recipient.is-compact .lr-seal-heart { width: 12px; height: 12px; }
  .lyw-recipient.is-compact .lr-note-star { display: none; }
  .lyw-recipient.is-compact .lr-note-words { font-size: 10px; }
  .lyw-recipient.is-compact .lr-letter-emblem { display: none; }
}

/* Rive only replaces the artwork once its first frame is ready. */
.lyw-recipient .lr-rive-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.lyw-recipient.has-rive-envelope .lr-opening-art { width: min(320px, calc(100cqw - 36px)); height: auto; aspect-ratio: 5 / 4; }
.lyw-recipient.is-compact.has-rive-envelope .lr-opening-art { width: min(210px, calc(100cqw - 24px), 70cqh); height: auto; aspect-ratio: 5 / 4; }
.lyw-recipient.has-rive-envelope .lr-opening-art::before { display: none; }
.lyw-recipient .lr-envelope.is-rive-ready { inset: 0; width: 100%; height: 100%; transform: none !important; animation: none !important; filter: none; }
.lyw-recipient .lr-envelope.is-rive-ready > span { visibility: hidden; animation: none !important; }
.lyw-recipient .lr-envelope.is-rive-ready .lr-rive-canvas { opacity: 1; visibility: visible; }
.lyw-recipient.has-rive-envelope.is-opening .lr-open-hint { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

/* Small live previews keep the opening action visible below the artwork. */
@container (max-height: 260px) {
  .lyw-recipient.is-compact.has-rive-envelope .lr-intro { display: none; }
  .lyw-recipient.is-compact.has-rive-envelope .lr-opening-art { width: min(210px, calc(100cqw - 24px), calc((100cqh - 86px) * 1.25)); margin: 0; }
}
@container (max-height: 125px) {
  .lyw-recipient.is-compact.has-rive-envelope .lr-opening-art { width: min(210px, calc(100cqw - 24px), calc((100cqh - 40px) * 1.25)); }
}