:root {
  color-scheme: light;
  --night: #fff3f6;
  --pink: #d77d99;
  --pink-bright: #c45f80;
  --lilac: #c99bb4;
  --blue: #d9a7b9;
  --muted: #8f6b79;
  --white: #684651;
  font-family: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--white);
  background: radial-gradient(ellipse at 50% 38%, #fff9fb 0, #fce8ef 48%, #f6dce6 100%);
}
button { font: inherit; }
.starfield, .nebula, .scan-glow { position: fixed; inset: 0; pointer-events: none; }
.starfield { z-index: 0; overflow: hidden; }
.star { position: absolute; border-radius: 50%; background: #fff; animation: starPulse var(--duration, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.nebula { width: 42rem; height: 42rem; border-radius: 50%; filter: blur(95px); opacity: .20; }
.nebula-a { background: #f0b5c8; top: -23rem; left: -15rem; animation: nebulaDrift 24s ease-in-out infinite alternate; }
.nebula-b { background: #e7a9bd; right: -20rem; top: 15%; animation: nebulaDrift 30s ease-in-out infinite alternate-reverse; }
.nebula-c { background: #f2c4d3; left: 25%; bottom: -32rem; animation: nebulaDrift 26s ease-in-out infinite alternate; }
.scan-glow { z-index: 0; opacity: .14; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(215,125,153,.025) 5px); }
.scene { position: relative; z-index: 1; width: min(100% - 36px, 980px); min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 27px 2px; }
.made { display: flex; align-items: center; gap: 9px; color: #9e7180; font-size: .68rem; letter-spacing: .2em; font-weight: 700; }
.made-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink), 0 0 30px var(--pink); animation: dotPulse 2s ease-in-out infinite; }
.top-mark { color: var(--pink); font-size: 1.35rem; animation: twinkle 2.7s ease-in-out infinite; }
.hero { flex: 1; min-height: 620px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; isolation: isolate; padding: 70px 0 85px; }
.eyebrow { color: #a87888; font-size: .65rem; letter-spacing: .19em; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 25px; }
.eyebrow span { width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink)); }
.eyebrow span:last-child { transform: rotate(180deg); }
h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(3.3rem, 9vw, 7rem); letter-spacing: -.055em; line-height: 1.08; margin: 0; text-shadow: 0 0 55px rgba(241,166,200,.17); }
h1 em { display: block; color: var(--pink-bright); font-weight: 500; text-shadow: 0 0 38px rgba(255,176,224,.2); }
.subtitle { color: var(--muted); font-size: clamp(.88rem, 2vw, 1rem); line-height: 1.8; max-width: 380px; margin: 24px 20px 30px; }
.open-button { display: inline-flex; align-items: center; gap: 15px; padding: 14px 18px; border: 1px solid rgba(255,185,216,.36); border-radius: 100px; color: #8e4f64; background: linear-gradient(110deg, rgba(255,255,255,.8), rgba(247,204,219,.75)); box-shadow: 0 0 35px rgba(241,166,200,.08), inset 0 0 20px rgba(255,255,255,.025); cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.open-button:hover { transform: translateY(-3px); border-color: rgba(255,185,216,.8); box-shadow: 0 10px 38px rgba(241,166,200,.17); }
.button-icon { color: var(--pink-bright); font-size: 1.2rem; }
.button-arrow { color: var(--pink); margin-left: 3px; }
.tiny-note { color: #a27b89; font-size: .57rem; letter-spacing: .2em; margin-top: 23px; }
.cosmic-ring { position: absolute; z-index: -1; border: 1px solid rgba(215,125,153,.18); border-radius: 50%; pointer-events: none; }
.ring-one { width: min(74vw, 650px); aspect-ratio: 1; animation: ringSpin 42s linear infinite; }
.ring-two { width: min(59vw, 520px); aspect-ratio: 1; border-color: rgba(215,125,153,.18); border-style: dashed; animation: ringSpin 55s linear infinite reverse; }
.ring-three { width: min(44vw, 390px); aspect-ratio: 1; border-color: rgba(215,125,153,.15); animation: ringSpin 32s linear infinite; }
.orbit-star { position: absolute; color: var(--pink); text-shadow: 0 0 20px currentColor; }
.orbit-star-one { top: 21%; right: 17%; font-size: 1.4rem; animation: twinkle 3s ease-in-out infinite; }
.orbit-star-two { bottom: 24%; left: 16%; color: var(--lilac); font-size: 2rem; animation: twinkle 4s ease-in-out infinite .7s; }
.orbit-star-three { top: 58%; right: 10%; font-size: .9rem; animation: twinkle 2.4s ease-in-out infinite 1s; }
.orbit-star-four { top: 28%; left: 20%; color: var(--blue); font-size: 2.4rem; animation: twinkle 3.7s ease-in-out infinite .4s; }
.b-particle-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.b-particle { position: absolute; font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: transparent; -webkit-text-stroke: 1px rgba(255,190,226,.45); text-shadow: 0 0 18px rgba(241,166,200,.28); animation: bDrift var(--duration, 12s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.particle { position: fixed; z-index: 3; bottom: -30px; pointer-events: none; color: var(--pink); opacity: 0; text-shadow: 0 0 14px currentColor; animation: rise linear forwards; }
.scroll-cue { position: absolute; bottom: 20px; width: 20px; height: 32px; border: 1px solid rgba(241,166,200,.3); border-radius: 99px; display: flex; justify-content: center; padding-top: 6px; opacity: .7; }
.scroll-cue span { width: 3px; height: 6px; background: var(--pink); border-radius: 4px; animation: scrollDot 1.8s ease-in-out infinite; }
.letter-wrap { width: min(100%, 620px); margin: 0 auto 55px; perspective: 1200px; animation: panelAppear .7s ease both; }
.envelope-scene { position: relative; padding: 35px 12px 10px; }
.envelope-aura { position: absolute; width: 80%; height: 70%; top: 10%; left: 10%; background: #bd64c9; filter: blur(75px); opacity: .13; border-radius: 50%; }
.envelope { position: relative; width: min(100%, 490px); height: 310px; margin: 0 auto; transform-style: preserve-3d; filter: drop-shadow(0 25px 45px rgba(0,0,0,.35)); }
.envelope-back { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(145deg, #4a315c, #241a3d); border: 1px solid rgba(255,190,226,.28); }
.letter-paper { position: absolute; z-index: 2; left: 5%; width: 90%; height: 275px; bottom: 10px; padding: 23px clamp(17px, 4vw, 34px); color: #4e3c58; background: linear-gradient(145deg, #fff7fc, #f2e9ff); border-radius: 5px; box-shadow: 0 5px 30px rgba(0,0,0,.2); transform: translateY(0); transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .25s; }
.paper-top, .paper-bottom { display: flex; justify-content: space-between; gap: 10px; font-size: .57rem; letter-spacing: .12em; color: #8a6b9b; }
.paper-symbol { color: #b86cbd; text-align: center; font-size: 1.6rem; margin: 20px 0 4px; }
.letter-paper h2 { text-align: center; font: 500 1.65rem Georgia, "Times New Roman", serif; margin: 0 0 12px; }
.letter-message {
  direction: rtl;
  text-align: right;
  color: #5b4664;
  line-height: 1.85;
  font-family: Georgia, "Times New Roman", Tahoma, serif;
  font-size: .82rem;
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 4px 1px;
  scrollbar-width: thin;
  scrollbar-color: #c59acb transparent;
}
.letter-message p { margin: 0 0 8px; }
.letter-message p:first-child { font-weight: 700; color: #9b579b; font-size: .88rem; }
.letter-message .letter-signoff { font-weight: 700; color: #9b579b; margin-top: 10px; }
.letter-message::-webkit-scrollbar { width: 4px; }
.letter-message::-webkit-scrollbar-thumb { background: #c59acb; border-radius: 8px; }
.paper-bottom { position: absolute; bottom: 17px; left: 23px; right: 23px; padding-top: 12px; border-top: 1px solid rgba(138,107,155,.2); }
.paper-bottom span:last-child { color: #c16da5; font-size: 1rem; }
.envelope-front { position: absolute; z-index: 3; inset: 0; border-radius: 8px; background: linear-gradient(145deg, #382648, #21182f); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); border: 1px solid rgba(255,190,226,.15); }
.envelope-flap { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 65%; background: linear-gradient(145deg, #684675, #392748); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transform: rotateX(0deg); transition: transform .85s cubic-bezier(.2,.7,.2,1); backface-visibility: visible; filter: drop-shadow(0 4px 4px rgba(0,0,0,.12)); }
.wax-seal { position: absolute; z-index: 5; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff0fa; font: 600 1.25rem "Playfair Display", Georgia, serif; background: radial-gradient(circle at 35% 25%, #f0a9d2, #a84c91 75%); border: 1px solid rgba(255,226,245,.55); box-shadow: 0 0 25px rgba(218,115,190,.3); transition: opacity .3s ease, transform .3s ease; }
.envelope-caption { text-align: center; color: #8b7c9f; font-size: .58rem; letter-spacing: .2em; margin: 30px 0 0; }
.letter-wrap.opened .envelope-flap { transform: rotateX(180deg); z-index: 1; }
.letter-wrap.opened .wax-seal { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
.letter-wrap.opened .letter-paper { transform: translateY(-205px); transition-delay: .4s; }
.letter-wrap.opened .envelope-front { z-index: 3; }
.letter-wrap.opened .envelope { margin-bottom: 190px; transition: margin-bottom .8s ease .35s; }
.footer { display: flex; justify-content: center; align-items: center; gap: 13px; padding: 22px 0 28px; color: #a27b89; font-size: .57rem; letter-spacing: .19em; text-align: center; }
.footer-star { color: var(--pink); }
[hidden] { display: none !important; }
@keyframes starPulse { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes nebulaDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(55px,40px) scale(1.15); } }
@keyframes twinkle { 0%,100% { opacity: .4; transform: scale(.85) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(18deg); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes bDrift { 0%,100% { transform: translate3d(0,0,0) rotate(-10deg); opacity: .18; } 50% { transform: translate3d(15px,-24px,0) rotate(8deg); opacity: .75; } }
@keyframes rise { 0% { transform: translateY(0) scale(.7) rotate(0); opacity: 0; } 12% { opacity: .8; } 90% { opacity: .35; } 100% { transform: translateY(-115vh) scale(1.25) rotate(45deg); opacity: 0; } }
@keyframes panelAppear { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 8px var(--pink); } 50% { box-shadow: 0 0 20px var(--pink), 0 0 34px var(--pink); } }
@keyframes scrollDot { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }
@media (max-width: 600px) {
  .scene { width: min(100% - 26px, 480px); }
  .topbar { padding: 21px 2px; }
  .hero { min-height: 590px; padding: 55px 0 70px; }
  .eyebrow { font-size: .53rem; letter-spacing: .12em; gap: 7px; }
  .ring-one { width: 94vw; } .ring-two { width: 76vw; } .ring-three { width: 58vw; }
  .orbit-star-one { right: 7%; } .orbit-star-two { left: 5%; }
  .envelope { height: 265px; }
  .letter-paper { height: 242px; padding-top: 18px; }
  .letter-paper h2 { font-size: 1.5rem; }
  .letter-wrap.opened .letter-paper { transform: translateY(-165px); }
  .letter-wrap.opened .envelope { margin-bottom: 150px; }
  .envelope-caption { margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Full-screen letter after the envelope-opening animation */
.close-letter {
  display: none;
  position: fixed;
  z-index: 1002;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 208, 235, .5);
  border-radius: 999px;
  color: #fff;
  background: rgba(18, 10, 34, .88);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.close-letter span { font-size: .78rem; }
.letter-wrap.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  perspective: none;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(87, 52, 130, .34), transparent 58%),
    rgba(7, 6, 17, .84);
  animation: panelAppear .5s ease both;
}
.letter-wrap.fullscreen .close-letter { display: inline-flex; }
.letter-wrap.fullscreen .envelope-scene {
  min-height: 100%;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.letter-wrap.fullscreen .envelope-aura,
.letter-wrap.fullscreen .envelope-back,
.letter-wrap.fullscreen .envelope-front,
.letter-wrap.fullscreen .envelope-flap,
.letter-wrap.fullscreen .wax-seal,
.letter-wrap.fullscreen .envelope-caption,
.letter-wrap.fullscreen .paper-top,
.letter-wrap.fullscreen .paper-symbol,
.letter-wrap.fullscreen .letter-paper h2,
.letter-wrap.fullscreen .paper-bottom {
  display: none !important;
}
.letter-wrap.fullscreen .envelope {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0 !important;
  filter: none;
  transform: none;
}
.letter-wrap.fullscreen .letter-paper {
  position: relative;
  inset: auto;
  z-index: 1001;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: max(76px, calc(env(safe-area-inset-top) + 68px)) clamp(22px, 6vw, 76px) max(30px, env(safe-area-inset-bottom));
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
  transition: none;
  background: rgba(24, 14, 35, .22);
  color: #fff8ff;
}
.letter-wrap.fullscreen .letter-message {
  width: min(100%, 900px);
  max-height: none;
  overflow: visible;
  margin: 0 auto;
  padding: 0 0 28px;
  color: #fff8ff;
  font-family: Georgia, "Times New Roman", Tahoma, serif;
  font-size: clamp(.92rem, 1.55vw, 1.02rem);
  font-weight: 400;
  line-height: 1.85;
  text-align: right;
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.letter-wrap.fullscreen .letter-message p { margin: 0 0 1.15em; }
.letter-wrap.fullscreen .letter-message p:first-child,
.letter-wrap.fullscreen .letter-message .letter-signoff {
  color: #ffd0eb;
  font-size: 1em;
  font-weight: 700;
}
body.letter-is-fullscreen { overflow: hidden; }
@media (max-width: 600px) {
  .letter-wrap.fullscreen .letter-paper {
    padding-left: 20px;
    padding-right: 20px;
  }
  .letter-wrap.fullscreen .letter-message {
    font-size: .92rem;
    line-height: 1.85;
  }
  .close-letter { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
}

/* Elegant pale-pink theme for K's version */
.nebula { opacity: .12; }
.scan-glow { opacity: .05; }
.cosmic-ring { border-color: rgba(199, 111, 139, .16); }
.ring-two { border-color: rgba(199, 111, 139, .18); }
.ring-three { border-color: rgba(199, 111, 139, .12); }
.letter-paper { color: #684653; }
.paper-top, .paper-bottom { color: #a66c80; }
.letter-message { color: #684653; }
.envelope-caption { color: #9c6e7c; }
.wax-seal { color: #fff5f8; }


/* Classic, simple typography for the letter */
.letter-message { font-family: Georgia, "Times New Roman", Tahoma, serif; font-size: .92rem; line-height: 2; }
.letter-paper h2 { font-family: Georgia, "Times New Roman", serif; }
.letter-message p:first-child, .letter-message .letter-signoff { font-family: Georgia, "Times New Roman", Tahoma, serif; }

/* Small-screen performance tuning: preserve the design, reduce expensive rendering. */
@media (max-width: 600px) {
  .nebula { filter: blur(65px); }
  .envelope-aura { filter: blur(52px); }
  .close-letter { backdrop-filter: blur(6px); }
}


/* Soft, matching password screen */
.password-gate {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  padding: 24px; background: radial-gradient(ellipse at 50% 35%, rgba(255,249,251,.97), rgba(252,232,239,.96) 52%, rgba(246,220,230,.98));
}
.password-card {
  width: min(100%, 370px); padding: 34px 25px 27px; text-align: center;
  border: 1px solid rgba(215,125,153,.25); border-radius: 24px;
  background: rgba(255,255,255,.46); box-shadow: 0 18px 60px rgba(172,94,120,.12);
  backdrop-filter: blur(10px);
}
.gate-star { color: var(--pink-bright); font-size: 1.7rem; }
.gate-kicker { margin: 9px 0 15px; color: #a87888; font-size: .58rem; letter-spacing: .2em; }
.password-card h1 { font-size: clamp(2.7rem, 12vw, 3.5rem); }
.password-card h1 em { display: inline; }
.gate-copy { margin: 14px 0 26px; color: var(--muted); font-size: .88rem; }
.password-label { display: block; margin-bottom: 9px; color: #916575; font-size: .78rem; }
.password-card input { display: block; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid rgba(199,111,139,.35); border-radius: 12px; outline: none; background: rgba(255,255,255,.8); color: #684651; font: inherit; text-align: center; }
.password-card input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(215,125,153,.12); }
.password-submit { width: 100%; margin-top: 13px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: #fffafc; background: linear-gradient(110deg, #d77d99, #c45f80); box-shadow: 0 8px 24px rgba(196,95,128,.18); cursor: pointer; }
.password-submit span { margin-left: 7px; }
.password-error { margin: 10px 0 0; color: #b7476b; font-size: .75rem; }
.gate-foot { margin: 24px 0 0; color: #a27b89; font-size: .55rem; letter-spacing: .19em; }


/* Delicate lily accents — decorative only, preserving the existing layout. */
.password-gate { overflow: hidden; }
.password-gate::before,
.password-gate::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  pointer-events: none;
  opacity: .72;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 5px 12px rgba(196,95,128,.08));
}
.password-gate::before {
  top: max(18px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left));
  transform: rotate(-13deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c97996' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M59 91 Q58 67 61 43'/%3E%3Cpath d='M59 78 Q38 63 29 72 Q42 87 59 82'/%3E%3Cpath d='M61 68 Q82 52 91 63 Q80 77 61 73'/%3E%3Cpath d='M61 47 C43 37 42 19 54 16 C59 25 61 34 61 47 C65 29 77 18 83 25 C88 34 76 45 61 47 C73 41 94 42 94 52 C91 62 72 57 61 47 C49 59 32 60 30 50 C29 40 48 40 61 47 Z' fill='%23f9dfe8' fill-opacity='.72'/%3E%3Cpath d='M60 47 L55 34 M61 47 L70 32 M61 47 L81 47' stroke='%23b96a86'/%3E%3Ccircle cx='61' cy='47' r='2.4' fill='%23d9a15d' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.password-gate::after {
  right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  transform: rotate(164deg) scale(.82);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23c97996' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M59 91 Q58 67 61 43'/%3E%3Cpath d='M59 78 Q38 63 29 72 Q42 87 59 82'/%3E%3Cpath d='M61 68 Q82 52 91 63 Q80 77 61 73'/%3E%3Cpath d='M61 47 C43 37 42 19 54 16 C59 25 61 34 61 47 C65 29 77 18 83 25 C88 34 76 45 61 47 C73 41 94 42 94 52 C91 62 72 57 61 47 C49 59 32 60 30 50 C29 40 48 40 61 47 Z' fill='%23f9dfe8' fill-opacity='.72'/%3E%3Cpath d='M60 47 L55 34 M61 47 L70 32 M61 47 L81 47' stroke='%23b96a86'/%3E%3Ccircle cx='61' cy='47' r='2.4' fill='%23d9a15d' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.password-card { position: relative; z-index: 1; }
.letter-wrap.fullscreen::before,
.letter-wrap.fullscreen::after {
  content: "";
  position: fixed;
  z-index: 1002;
  width: clamp(74px, 17vw, 132px);
  height: clamp(74px, 17vw, 132px);
  pointer-events: none;
  opacity: .52;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%23f0b5cb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M59 98 Q58 72 61 45'/%3E%3Cpath d='M59 82 Q38 67 29 76 Q42 91 59 86'/%3E%3Cpath d='M61 71 Q82 55 91 66 Q80 80 61 76'/%3E%3Cpath d='M61 49 C43 39 42 21 54 18 C59 27 61 36 61 49 C65 31 77 20 83 27 C88 36 76 47 61 49 C73 43 94 44 94 54 C91 64 72 59 61 49 C49 61 32 62 30 52 C29 42 48 42 61 49 Z' fill='%23f8dce8' fill-opacity='.13'/%3E%3Cpath d='M60 49 L55 36 M61 49 L70 34 M61 49 L81 49' stroke='%23f5c3d5'/%3E%3Ccircle cx='61' cy='49' r='2.5' fill='%23e9c18c' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.letter-wrap.fullscreen::before { top: 8px; left: 5px; transform: rotate(-16deg); }
.letter-wrap.fullscreen::after { right: 4px; bottom: 8px; transform: rotate(164deg); }
@media (max-width: 600px) {
  .password-gate::before, .password-gate::after { width: 84px; height: 84px; opacity: .62; }
  .letter-wrap.fullscreen::before { top: max(6px, env(safe-area-inset-top)); left: 0; }
  .letter-wrap.fullscreen::after { right: 0; bottom: max(6px, env(safe-area-inset-bottom)); }
}