@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-50:#fffbeb;--color-amber-100:#fef3c6;--color-amber-200:#fee685;--color-neutral-800:#262626;--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--tracking-wide:.025em;--leading-tight:1.25;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-accent:"Savoye LET", "SavoyeLetPlain", "Dancing Script", "Alex Brush", "Great Vibes", "British Green", "Snell Roundhand", cursive;--font-quote:"British Green", Palatino, "Palatino Linotype", Georgia, Constantia, serif}@supports (color:lab(0% 0 0)){:root,:host{--color-amber-50:lab(98.6252% -.635922 8.42309);--color-amber-100:lab(95.916% -1.21653 23.111);--color-amber-200:lab(91.7203% -.505269 49.9084);--color-neutral-800:lab(15.204% 0 -.00000596046)}}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-x-0{inset-inline:0}.top-0{top:0}.top-2{top:calc(var(--spacing) * 2)}.left-0{left:0}.left-2{left:calc(var(--spacing) * 2)}.z-20{z-index:20}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[999\]{z-index:999}.mx-auto{margin-inline:auto}.mt-3{margin-top:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-7{height:calc(var(--spacing) * 7)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-dvh{height:100dvh}.h-full{height:100%}.min-h-full{min-height:100%}.w-7{width:calc(var(--spacing) * 7)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-full{width:100%}.max-w-\[94vw\]{max-width:94vw}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-amber-100\/20{border-color:#fef3c633}@supports (color:color-mix(in lab, red, red)){.border-amber-100\/20{border-color:color-mix(in oklab, var(--color-amber-100) 20%, transparent)}}.border-amber-200{border-color:var(--color-amber-200)}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-t-amber-100\/90{border-top-color:#fef3c6e6}@supports (color:color-mix(in lab, red, red)){.border-t-amber-100\/90{border-top-color:color-mix(in oklab, var(--color-amber-100) 90%, transparent)}}.bg-amber-100\/20{background-color:#fef3c633}@supports (color:color-mix(in lab, red, red)){.bg-amber-100\/20{background-color:color-mix(in oklab, var(--color-amber-100) 20%, transparent)}}.bg-black\/45{background-color:#00000073}@supports (color:color-mix(in lab, red, red)){.bg-black\/45{background-color:color-mix(in oklab, var(--color-black) 45%, transparent)}}.bg-black\/65{background-color:#000000a6}@supports (color:color-mix(in lab, red, red)){.bg-black\/65{background-color:color-mix(in oklab, var(--color-black) 65%, transparent)}}.bg-black\/75{background-color:#000000bf}@supports (color:color-mix(in lab, red, red)){.bg-black\/75{background-color:color-mix(in oklab, var(--color-black) 75%, transparent)}}.bg-neutral-800{background-color:var(--color-neutral-800)}.object-contain{object-fit:contain}.p-1{padding:var(--spacing)}.p-3{padding:calc(var(--spacing) * 3)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.68rem\]{font-size:.68rem}.text-\[11px\]{font-size:11px}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-wrap{text-wrap:wrap}.text-amber-50{color:var(--color-amber-50)}.text-amber-50\/75{color:#fffbebbf}@supports (color:color-mix(in lab, red, red)){.text-amber-50\/75{color:color-mix(in oklab, var(--color-amber-50) 75%, transparent)}}.text-white{color:var(--color-white)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-black\/60:hover{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/60:hover{background-color:color-mix(in oklab, var(--color-black) 60%, transparent)}}}}@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Great+Vibes&display=swap');@font-face{font-family:"Savoye LET";src:local("Savoye LET"),local("SavoyeLetPlain"),url(/gifts/fonts/SavoyeLET.ttc)format("truetype");font-weight:100 900;font-style:normal,italic;font-display:swap}@font-face{font-family:"Amely Shine";src:url(/gifts/fonts/1FTV-VIP-Amely-Shine.ttf)format("truetype");font-weight:100 900;font-style:normal,italic;font-display:swap}@font-face{font-family:"Firlest";src:url(/gifts/fonts/1FTV-VIP-Firlest.otf)format("opentype");font-weight:100 900;font-style:normal,italic;font-display:swap}@font-face{font-family:"British Green";src:url(/gifts/fonts/1FTVVIPBritishGreen-Italic.ttf)format("truetype");font-weight:100 900;font-style:normal,italic;font-display:swap}html,body{height:100%}body{background:#0b0508;margin:0}.paper-scroll{overscroll-behavior:contain;overflow-wrap:anywhere;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}.paper-scroll::-webkit-scrollbar{display:none}.act2-paper-open{--paper-top:max(4dvh, calc(env(safe-area-inset-top,0px) + .5rem));--paper-width:min(calc(100vw - 1.5rem), 44rem);--paper-max-height:min(86dvh, calc(100dvh - var(--paper-top) - max(5dvh, calc(env(safe-area-inset-bottom,0px) + .5rem))));--paper-tilt:-.6deg}.paper-sheet{box-sizing:border-box;max-height:inherit}.paper-inner-border{pointer-events:none;z-index:0;border:1px solid #7452302b;border-radius:2px;position:absolute;inset:.65rem}.paper-heading,.paper-scrollwork{z-index:1;position:relative}.paper-photo-wrap{z-index:1;width:min(58%,12rem);margin:0 auto 1.55rem;position:relative}.paper-handover-note{color:#a08a69;font-family:var(--font-quote);text-align:center;margin:0 0 .75rem;font-size:.95rem;font-style:italic}.paper-wish-trigger{color:#fff8ee;cursor:pointer;font-family:var(--font-quote);background:linear-gradient(135deg,#a8734f,#7d4c3b);border:0;border-radius:999px;justify-content:center;align-items:center;gap:.75rem;margin:0 auto;padding:.72rem 1.2rem;font-size:.96rem;transition:transform .18s,box-shadow .18s;display:flex;box-shadow:0 8px 18px #6537233b}.paper-wish-trigger:hover,.paper-wish-trigger:focus-visible{transform:translateY(-2px);box-shadow:0 11px 24px #6537234d}.paper-wish-modal{pointer-events:auto;z-index:40;isolation:isolate;will-change:opacity;background:#0c050a2e;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.paper-memory-field{pointer-events:none;z-index:3;position:absolute;inset:0;overflow:hidden}.paper-floating-memory{will-change:transform, opacity;width:clamp(5.2rem,18vw,8rem);height:clamp(7rem,25vw,11rem);position:absolute;top:0}.paper-memory-frame{background:#fff9e9;border:.42rem solid #fffdf7f0;border-bottom-width:.9rem;border-radius:.35rem;width:100%;height:100%;animation:7s ease-in-out infinite memorySway;position:relative;overflow:hidden;box-shadow:0 12px 28px #00000052,0 0 25px #ffdaa43d}.paper-floating-photo{filter:saturate(.98)sepia(.04)brightness(1.08);object-fit:cover;width:100%;height:100%;display:block}.paper-memory-halo{background:radial-gradient(#ffcd7f38,#0000 68%);position:absolute;inset:-35%}.paper-memory-glint{background:linear-gradient(115deg,#0000 43%,#fffadf52 50%,#0000 57%);animation:9s ease-in-out infinite memoryGlint;position:absolute;inset:-30% -80%}.paper-memory-spark{color:#fff2c7;text-shadow:0 0 7px #ffd18b,0 0 16px #ffcf80b3;font-family:Georgia,serif;font-size:1.1rem;animation:4.8s ease-in-out infinite memorySpark;position:absolute}.paper-memory-spark-0{top:12%;left:-12%}.paper-memory-spark-1{font-size:2rem;top:45%;right:-14%}.paper-memory-spark-2{font-size:.8rem;bottom:-20%;right:8%}.paper-memory-spark-3{font-size:1.8rem;bottom:-38%;left:18%}@keyframes memorySway{0%,to{transform:rotate(-2deg)translate(-3px)}50%{transform:rotate(2deg)translate(3px)}}@keyframes memoryGlint{0%,55%{opacity:0;transform:translate(-65%)}65%{opacity:1}85%,to{opacity:0;transform:translate(65%)}}@keyframes memorySpark{0%,to{opacity:0;transform:translateY(8px)scale(.45)}45%{opacity:.9;transform:translateY(-3px)scale(1)}80%{opacity:0;transform:translateY(-15px)scale(.6)}}@media (prefers-reduced-motion:reduce){.paper-memory-frame{animation:none}.paper-memory-glint,.paper-memory-spark{animation:none;display:none}}.paper-wish-card{overflow-wrap:anywhere;color:#4a3a2c;text-align:center;backface-visibility:hidden;will-change:transform, opacity;background:linear-gradient(165deg,#fbf4e5,#eee0c5);border:1px solid #fff7e0d9;border-radius:1rem;flex-shrink:0;width:100%;min-width:0;max-width:30rem;max-height:min(90dvh,46rem);padding:1.1rem clamp(1.1rem,5vw,1.6rem) 1.5rem;position:relative;overflow-y:auto;transform:translateZ(0);box-shadow:0 25px 70px #00000073}.paper-wish-close{color:#a08a69;cursor:pointer;z-index:2;background:#fffcf3ad;border:1px solid #74523038;border-radius:50%;justify-content:center;align-items:center;width:2.3rem;height:2.3rem;font-size:1.4rem;line-height:1;display:flex;position:absolute;top:.85rem;right:.85rem}.paper-wish-photo{aspect-ratio:4/3;object-fit:cover;border:.45rem solid #fffdf7;width:100%;margin:0;display:block;transform:rotate(-1.5deg);box-shadow:0 8px 18px #41231433}.paper-wish-photo-wrap{width:min(68vw,14rem);margin:0 auto 1.15rem;position:relative}.paper-wish-photo-mark{color:#8f4531;letter-spacing:.12em;white-space:nowrap;background:#fff3dce6;border:3px double #8f4531bf;border-radius:3px;padding:.3rem .45rem;font-family:ui-serif,Georgia,serif;font-size:.58rem;font-weight:800;position:absolute;bottom:.5rem;right:-.35rem;transform:rotate(-14deg);box-shadow:0 2px 4px #4323121f}.paper-wish-kicker{color:#8e6844;letter-spacing:.3em;margin:0 0 .65rem;font-family:ui-serif,Georgia,Times New Roman,serif;font-size:.78rem;font-weight:800}.paper-wish-title{color:#694735;font-family:var(--font-quote);margin:0;font-size:clamp(1.35rem,6vw,1.75rem);font-weight:500;line-height:1.25}.paper-wish-subtitle{color:#927a5c;font-family:var(--font-quote);max-width:18rem;margin:.55rem auto 1.35rem;font-size:.95rem;line-height:1.6}.paper-wish-label{color:#6f5032;font-family:var(--font-quote);text-align:left;margin-bottom:.45rem;font-size:.95rem;display:block}.paper-wish-input{box-sizing:border-box;color:#4a3a2c;font-family:var(--font-quote);background:#fffdf7a3;border:0;border-bottom:1px solid #74523066;border-radius:.35rem .35rem 0 0;outline:none;width:100%;padding:.75rem .7rem;font-size:1rem}.paper-wish-input:focus{border-bottom-color:#9f6947;box-shadow:0 3px #9f69472e}.paper-wish-input::placeholder{color:#b29a7a;opacity:.8}.paper-wish-privacy{color:#a08a69;font-family:var(--font-quote);margin:.65rem 0 1rem;font-size:.75rem;line-height:1.5}.paper-wish-send{color:#fff8ee;cursor:pointer;font-family:var(--font-quote);background:#8f5b45;border:0;border-radius:999px;width:100%;padding:.7rem 1.25rem;font-size:.9rem}.paper-wish-send:disabled{color:#a08a69;cursor:not-allowed;background:#4a3a2c2e}.paper-wish-skip{color:#a08a69;cursor:pointer;font-family:var(--font-quote);background:0 0;border:0;margin-top:.85rem;font-size:.82rem}.paper-heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem;padding:0 .15rem;display:flex}.paper-heading-mark{color:#b28b54;opacity:.8;font-family:Georgia,serif;font-size:1.15rem;line-height:1}.paper-scrollwork{opacity:.8;width:min(58%,13rem);height:.9rem;margin:-.15rem 0 1.35rem}@media (max-width:420px){.act2-paper-open{--paper-top:max(4dvh, calc(env(safe-area-inset-top,0px) + .35rem));--paper-width:calc(100vw - 1rem);--paper-max-height:min(86dvh, calc(100dvh - var(--paper-top) - max(4dvh, calc(env(safe-area-inset-bottom,0px) + .35rem))));--paper-tilt:0deg}.paper-inner-border{inset:.45rem}.paper-heading{margin-bottom:.65rem}.paper-scrollwork{margin-bottom:1.1rem}.paper-photo-wrap{width:min(62%,11.5rem)}.paper-wish-card{padding-left:1rem;padding-right:1rem}}@media (max-height:520px){.act2-paper-open{--paper-top:max(.5rem, env(safe-area-inset-top,0px));--paper-max-height:min(84dvh, calc(100dvh - var(--paper-top) - max(.5rem, env(safe-area-inset-bottom,0px))));--paper-tilt:0deg}}.reveal-in{animation:.9s ease-out both revealUp}@keyframes revealUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tt-ember{opacity:0;animation:1.1s ease-in infinite emberFall}@keyframes emberFall{0%{opacity:0;transform:translate(0)scale(1)}20%{opacity:.9}to{opacity:0;transform:translate(-26px,40px)scale(.3)}}.tt-sky-lantern{animation:skyLanternRise var(--sl-dur) linear var(--sl-delay) infinite;opacity:0;will-change:transform, opacity;transform-style:preserve-3d;backface-visibility:hidden;contain:layout style paint}@keyframes skyLanternRise{0%{opacity:0;transform:translate3d(0, 0, 0) scaleX(var(--sl-flip))}22%{opacity:var(--sl-op)}72%{opacity:var(--sl-op)}to{opacity:0;transform:translate3d(var(--sl-sway), var(--sl-rise), 0) scaleX(var(--sl-flip))}}.tt-star{animation:starTwinkle var(--st-dur) ease-in-out var(--st-delay) infinite;opacity:var(--st-op)}@keyframes starTwinkle{0%,to{opacity:calc(var(--st-op) * .25)}50%{opacity:var(--st-op)}}.tt-cloud{animation:cloudDrift var(--cl-dur) ease-in-out var(--cl-delay) infinite alternate;will-change:transform}@keyframes cloudDrift{0%{transform:translate(0)}to{transform:translate3d(var(--cl-drift), 0, 0)}}.tt-wish-star{animation:wishStarRise var(--ws-dur) linear var(--ws-delay) both}.tt-wish-star-icon{width:100%;height:100%;animation:2.6s ease-in-out infinite wishStarTwinkle}@keyframes wishStarTwinkle{0%,to{opacity:.65;transform:rotate(-12deg)scale(.88)}50%{opacity:1;transform:rotate(12deg)scale(1)}}@keyframes wishStarRise{0%{opacity:0;transform:translate(0)scale(.15)}14%{opacity:var(--ws-op);transform:translate3d(calc(var(--ws-dx) * .12), calc(var(--ws-dy) * .12), 0) scale(1)}68%{opacity:var(--ws-op)}to{opacity:0;transform:translate3d(var(--ws-dx), var(--ws-dy), 0) scale(var(--ws-scale))}}.tt-word{opacity:0;will-change:opacity, transform;transition:opacity .56s ease-out,transform .56s cubic-bezier(.22,1,.36,1);display:inline-block;transform:translateY(.16em)}.tt-word.is-in{opacity:1;will-change:auto;transform:none}@media (prefers-reduced-motion:reduce){.tt-ember{opacity:0;animation:none}.tt-word{transition:none;transform:none}.tt-wish-star{opacity:0;animation:none}.tt-wish-star-icon{animation:none}.tt-sky-lantern{opacity:var(--sl-op);transform:translate3d(calc(var(--sl-sway) * .45), calc(var(--sl-rise) * .45), 0) scaleX(var(--sl-flip));animation:none}.tt-cloud{animation:none}.tt-star{opacity:var(--st-op);animation:none}}:root[data-no~=blend] *{mix-blend-mode:normal!important}:root[data-no~=blur] *{filter:none!important}:root[data-no~=shadows] *{box-shadow:none!important}:root[data-no~=stars] .tt-star,:root[data-no~=lanterns] .tt-sky-lantern,:root[data-no~=clouds] .tt-cloud{display:none!important}.tt-wish-close{overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 max(6vw, env(safe-area-inset-left)) calc(max(1.25rem, env(safe-area-inset-bottom)) + .75rem) max(6vw, env(safe-area-inset-right));flex-direction:column;display:flex;top:30dvh;bottom:0;overflow-y:auto}.tt-wish-close::-webkit-scrollbar{display:none}.tt-wish-close-inner{background:radial-gradient(70% 60% at 50% 55%,#08040e8c,#0000 72%);width:100%;max-width:34rem;margin:auto auto 0;padding:1rem .5rem 0}@media (min-height:760px) and (min-width:700px){.tt-wish-close{top:52dvh}.tt-wish-close-inner{margin:0 auto auto}}@media (max-width:699px){.tt-wish-memories-dim{opacity:.38;transition:opacity 1.4s ease-out}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

/* --- 20/10 Pure Code Sparkling Fairy Lights (Clean Vector - No Box Clipping) --- */
.fairy-light-sparkle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fairyTwinkle var(--twinkle-dur, 3s) ease-in-out var(--twinkle-delay, 0s) infinite alternate;
  transform-origin: center center;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  border-radius: 50%;
  overflow: visible;
}

@keyframes fairyTwinkle {
  0% {
    transform: scale3d(0.65, 0.65, 1);
    opacity: 0.5;
  }
  100% {
    transform: scale3d(1.15, 1.15, 1);
    opacity: 0.95;
  }
}

.fairy-glitter-star {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(0);
  pointer-events: none;
}


/* --- DOWNLOADTHIEP ENVELOPE & RUNNING TEXT ANIMATIONS --- */

@import url("/gifts/style/fonts/fonts.css");
:root {
  --pink: #f56f9d;
  --pink-dark: #d94d7c;
  --pink-soft: #fff0f5;
  --ink: #603646;
  --white: #fffafd;
}

.letter-modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  background: transparent;
  transition:
    opacity 0.35s,
    visibility 0.35s,
    background 0.5s,
    backdrop-filter 0.5s;
}

.letter-modal.show {
  visibility: visible;
  opacity: 1;
}

.letter-modal.reading {
  background: transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.close-letter {
  position: fixed;
  z-index: 30;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: white;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  background: rgba(112, 49, 73, 0.35);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

.letter-modal:not(.reading) .close-letter {
  display: none;
}

.envelope-scene {
  display: grid;
  justify-items: center;
  transition:
    opacity 0.45s,
    transform 0.55s;
}

.envelope-scene.hide {
  opacity: 0 !important;
  transform: translateY(120px) scale(0.72) !important;
  pointer-events: none !important;
}

.envelope {
  position: relative;
  width: min(390px, 82vw);
  aspect-ratio: 1.48;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  filter:
    drop-shadow(0 28px 24px rgba(93, 31, 55, 0.22)) drop-shadow(0 8px 7px rgba(93, 31, 55, 0.16));
  perspective: 1100px;
  transform-style: preserve-3d;
  animation:
    envelopeHover 2.3s ease-in-out infinite;
}

.envelope-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(184, 72, 111, 0.28);
  border-radius: 13px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.32), transparent 30%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f7aac2, #e878a0);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.42),
    inset 0 -5px 12px rgba(151, 46, 83, 0.12);
}

.envelope-letter {
  position: absolute;
  z-index: 1;
  left: 7%;
  right: 7%;
  top: 8%;
  height: 78%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(190, 139, 109, 0.22);
  border-radius: 7px 7px 3px 3px;
  color: #bb4c73;
  font:
    24px "Pacifico",
    cursive;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(225, 159, 179, 0.12) 25px 26px),
    linear-gradient(135deg, #fffdf7, #fff5e9);
  box-shadow: 0 -4px 12px rgba(96, 31, 55, 0.12);
  transition: transform 0.78s cubic-bezier(0.25, 0.8, 0.25, 1) 0.18s;
}

.envelope-front {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(34deg, #e86f9b 0 49.7%, transparent 50.1%),
    linear-gradient(-34deg, #f39bb9 0 49.7%, transparent 50.1%),
    linear-gradient(to bottom, transparent 0 43%, #ed86a9 43% 100%);
  box-shadow:
    inset 0 -4px 10px rgba(130, 35, 70, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.36);
}

.envelope-front::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background: repeating-linear-gradient(108deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 6px);
  pointer-events: none;
}

.envelope-flap {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 62%;
  transform-origin: top;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: visible;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.34), transparent 55%),
    linear-gradient(155deg, #ffd0de, #f6a7c0 72%);
  filter: drop-shadow(0 4px 3px rgba(119, 35, 66, 0.13));
  transition: transform 0.72s cubic-bezier(0.45, 0, 0.2, 1);
}

.envelope-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 51%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: white;
  font-size: 20px;
  text-shadow: 0 1px rgba(118, 29, 62, 0.2);
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.42), transparent 18%),
    radial-gradient(circle at 50% 55%, #e76290 0 48%, #cc4776 72%, #b93b68 100%);
  border: 2px solid rgba(255, 178, 201, 0.55);
  box-shadow:
    0 7px 12px rgba(125, 36, 69, 0.3),
    inset 0 2px 3px rgba(255, 255, 255, 0.28),
    inset 0 -3px 4px rgba(111, 25, 57, 0.2);
  transition: 0.25s;
}

.envelope.opening {
  animation-play-state: paused;
}

.envelope.opening .envelope-flap {
  z-index: 0;
  transform: rotateX(178deg);
}

.envelope.opening .envelope-letter {
  transform: translateY(-76%);
}

.envelope.opening .envelope-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}

.envelope.closing-letter .envelope-letter {
  transform: translateY(0);
  transition-delay: 0s;
}

.envelope.closing-flap .envelope-flap {
  z-index: 4;
  transform: rotateX(0);
}

.envelope.closing-seal .envelope-seal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.open-hint,
.swipe-hint {
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(80, 25, 47, 0.35);
}

.open-hint {
  margin-top: 28px;
  animation: heartbeat 1.5s infinite;
}

.papers-scene {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: 0.55s;
}

.papers-scene.show {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.paper-stack {
  position: relative;
  width: min(560px, 84vw);
  height: min(390px, 58vh);
  perspective: 1200px;
  filter: drop-shadow(0 9px 10px rgba(59, 24, 38, 0.1));
}

.paper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(35px, 7vw, 68px);
  overflow: hidden;
  border: 1px solid rgba(151, 105, 77, 0.25);
  border-radius: 3px 9px 4px 7px;
  color: #684352;
  cursor: grab;
  user-select: none;
  touch-action: none;
  background-color: #fffaf0;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(180, 133, 83, 0.055) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 68%, rgba(164, 110, 72, 0.045) 0 1px, transparent 1.5px),
    repeating-linear-gradient(102deg, rgba(124, 89, 62, 0.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(218, 145, 169, 0.15) 30px 31px),
    linear-gradient(135deg, #fffdf7 0%, #fff9ed 58%, #f9f0df 100%);
  background-size: 37px 41px, 53px 47px, auto, auto, auto;
  box-shadow:
    2px 3px 0 rgba(128, 81, 55, 0.06),
    0 7px 12px rgba(73, 30, 47, 0.12),
    0 22px 42px rgba(73, 30, 47, 0.2),
    inset 1px 1px rgba(255, 255, 255, 0.9),
    inset -3px -4px 16px rgba(168, 113, 72, 0.07),
    inset 0 0 55px rgba(224, 172, 125, 0.06);
  transform: translateY(calc(var(--depth) * 7px)) rotate(var(--paper-rotation)) scale(calc(1 - var(--depth) * 0.018));
  transform-origin: center bottom;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.45s;
}

.paper::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 11px 12px 12px 10px;
  border: 1px solid rgba(216, 143, 166, 0.22);
  border-radius: 2px 6px 3px 5px;
  box-shadow: inset 0 0 18px rgba(176, 116, 78, 0.035);
  pointer-events: none;
}

.paper::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -1px;
  bottom: -1px;
  width: 34px;
  height: 34px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: linear-gradient(135deg, rgba(210, 181, 145, 0.14) 0 48%, #eee0ca 51% 100%);
  filter: drop-shadow(-2px -2px 2px rgba(97, 64, 43, 0.12));
  pointer-events: none;
}

.paper:nth-child(even) {
  border-radius: 7px 3px 8px 4px;
  background-position: 7px 3px, 13px 9px, 0 0, 0 2px, 0 0;
}

.paper.current {
  cursor: grab;
}

.paper.dragging {
  cursor: grabbing;
  transition: none;
}

.paper.fly-left {
  opacity: 0;
  transform: translate(-125vw, 25px) rotate(-28deg) !important;
}

.paper.fly-right {
  opacity: 0;
  transform: translate(125vw, 25px) rotate(28deg) !important;
}

.paper-text {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: pre-wrap;
  font: 24px/1.75 "Pacifico", cursive;
}

.typing-caret::after {
  content: "|";
  color: var(--pink);
  animation: caretBlink 0.7s infinite;
}

.paper-count {
  position: absolute;
  right: 25px;
  bottom: 20px;
  color: #c691a4;
  font-size: 11px;
  z-index: 3;
}

.paper-gif {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 16px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(12px) scale(0.8) rotate(-5deg);
  filter: drop-shadow(0 5px 7px rgba(116, 55, 78, 0.16));
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.falling-photos {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.falling-photo {
  position: absolute;
  top: -240px;
  width: var(--fall-size);
  height: auto;
  max-width: var(--fall-size);
  object-fit: contain;
  border: 6px solid rgba(255, 250, 252, 0.92);
  border-radius: 10px;
  opacity: 0;
  box-shadow: 0 12px 24px rgba(66, 25, 42, 0.25);
  will-change: transform, opacity;
  animation: photoFall var(--fall-duration) linear forwards;
}

.paper.current .paper-gif.loaded {
  opacity: 0.9;
  transform: translateY(0) scale(1) rotate(-2deg);
}

.swipe-hint {
  position: relative;
  z-index: 5;
  min-height: 22px;
  margin: 72px 0 0;
  color: #fff;
  text-shadow: 0 2px 10px rgba(80, 25, 47, 0.7);
}

@keyframes gridDrift {
  to {
    transform: rotate(-12deg) scale(1.15) translate(72px, 72px);
  }
}

@keyframes shimmer {
  50% {
    transform: translateX(18%);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.98);
  }
}

@keyframes shake {
  25% {
    transform: translateX(-7px);
  }

  50% {
    transform: translateX(7px);
  }

  75% {
    transform: translateX(-4px);
  }
}

@keyframes heartbeat {
  50% {
    transform: scale(1.16);
  }
}

@keyframes pinHeartFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(-7px) scale(1.14);
  }

  55% {
    transform: translateY(-4px) scale(0.96);
  }

  75% {
    transform: translateY(-7px) scale(1.08);
  }
}

@keyframes envelopeIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
}

@keyframes envelopeHover {
  50% {
    transform: translateY(-9px) rotate(1deg);
  }
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}

@keyframes heartBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.15) rotate(var(--burst-rotation));
  }
}

@keyframes photoFall {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(0, -20px, 0) rotate(var(--fall-start-rotation));
  }

  10% {
    opacity: 0.72;
  }

  88% {
    opacity: 0.68;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translate3d(var(--fall-drift), 125vh, 0) rotate(var(--fall-end-rotation));
  }
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--start-rotation)) scale(0.9);
  }

  12% {
    opacity: 0.28;
  }

  85% {
    opacity: 0.22;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--drift), -120vh, 0) rotate(var(--end-rotation)) scale(1.08);
  }
}

@media (max-width: 720px) {

  .moving-grid,
  .moving-grid::after {
    animation: none;
  }

  .page-shell {
    padding: 16px;
  }

  .login-card {
    width: min(500px, 100%);
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    margin: 0;
    border-radius: 30px;
  }

  .photo-panel {
    min-height: 0;
    max-height: none;
    padding: clamp(18px, 4vh, 30px) 18px 8px;
  }

  .photo-panel img {
    width: min(190px, 48vw);
    height: min(190px, 48vw);
    aspect-ratio: 1;
    object-position: center 42%;
    border-radius: 24px;
  }

  .form-panel {
    min-height: 0;
    justify-content: flex-start;
    padding: 8px 24px 20px;
  }

  .pin-heading {
    gap: 7px;
    margin-bottom: 10px;
  }

  .pin-heading .tiny-heart {
    width: 42px;
    height: 42px;
  }

  .pin-dots {
    gap: 24px;
    margin-top: 0;
    margin-bottom: 12px;
  }

  .message {
    min-height: 20px;
    padding-top: 5px;
  }

  .pin-keypad {
    max-width: 280px;
    row-gap: 8px;
    column-gap: 8px;
    margin-top: 4px;
  }

  .pin-keypad button,
  .key-spacer {
    width: 60px;
    height: 60px;
  }

  .paper-text {
    font-size: 20px;
  }

  .paper-gif {
    left: 16px;
    bottom: 14px;
    width: 56px;
    height: 56px;
  }

  .falling-photo {
    border-width: 4px;
  }
}

.page-hidden *,
.page-hidden *::before,
.page-hidden *::after {
  animation-play-state: paused !important;
}

@media (max-height: 540px) and (min-width: 721px) {
  .form-panel {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .pin-heading {
    gap: 4px;
    margin-bottom: 8px;
  }

  .pin-heading .tiny-heart {
    width: 38px;
    height: 38px;
  }

  .pin-dots {
    margin-top: 0;
  }

  .message {
    min-height: 18px;
    padding-top: 3px;
  }

  .pin-keypad {
    gap: 6px;
    margin-top: 2px;
  }

  .pin-keypad button,
  .key-spacer {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 720px) and (max-height: 650px) {
  .form-panel {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .pin-heading {
    gap: 4px;
    margin-bottom: 6px;
  }

  .pin-heading .tiny-heart {
    width: 34px;
    height: 34px;
  }

  .pin-dots {
    gap: 22px;
    margin-bottom: 10px;
  }

  .pin-keypad {
    row-gap: 6px;
  }

  .pin-keypad button,
  .key-spacer {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mini Envelope on Moon */
.sky-mini-envelope {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1.48 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  box-shadow: 0 4px 12px rgba(93, 31, 55, 0.18) !important;
  pointer-events: none !important;
  animation: none !important;
}
.sky-mini-envelope .envelope-back {
  border-radius: 8px !important;
}
.sky-mini-envelope .envelope-front {
  border-radius: 8px !important;
}
.sky-mini-envelope .envelope-letter {
  display: block !important;
  top: 10% !important;
  height: 48% !important;
  font-size: clamp(6px, 1.1vw, 9px) !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}
.sky-mini-envelope .envelope-flap {
  border-radius: 8px 8px 0 0 !important;
}
.sky-mini-envelope .envelope-seal {
  width: clamp(14px, 2.2vw, 20px) !important;
  height: clamp(14px, 2.2vw, 20px) !important;
  font-size: clamp(8px, 1.2vw, 11px) !important;
  box-shadow: 0 2px 6px rgba(184, 18, 67, 0.5) !important;
}

@keyframes letterFlyFromMoon {
  0% {
    transform: translate3d(27vw, -37vh, 0) scale(0.24) rotate(8deg);
    opacity: 1;
    pointer-events: none;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    pointer-events: auto;
    opacity: 1;
  }
}

.envelope-scene.fly-from-moon {
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: letterFlyFromMoon 1.8s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

.envelope-scene.fly-from-moon .open-hint {
  opacity: 0;
  animation: hintReveal 0.8s ease-out 1.8s forwards;
}

@keyframes hintReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- Reply Cards & Capture Moment Styles --- */
.ask-reply-paper {
  border-color: rgba(220, 140, 165, 0.45) !important;
}

.ask-reply-container {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.ask-reply-container .paper-text {
  font-size: clamp(17px, 3.2vw, 22px);
  line-height: 1.6;
  color: #7b2c4c;
}

.ask-reply-action {
  margin-top: 4px;
}

.btn-ask-reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e85d88 0%, #f472b6 50%, #fb7185 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: clamp(13px, 2.4vw, 15px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(232, 93, 136, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: replyPulse 2.2s infinite ease-in-out;
  user-select: none;
  touch-action: manipulation;
}

.btn-ask-reply:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 7px 20px rgba(232, 93, 136, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.btn-ask-reply:active {
  transform: translateY(1px) scale(0.98);
}

@keyframes replyPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(232, 93, 136, 0.35);
  }
  50% {
    box-shadow: 0 6px 24px rgba(232, 93, 136, 0.65), 0 0 16px rgba(255, 200, 220, 0.7);
  }
}

/* Write Reply Card */
.write-reply-paper {
  border-color: rgba(230, 120, 160, 0.5) !important;
  cursor: default !important;
  animation: writePaperIn 0.8s cubic-bezier(0.25, 0.9, 0.35, 1) both;
}

.write-reply-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.write-reply-title {
  margin: 0;
  font: clamp(18px, 3.4vw, 22px)/1.3 "Pacifico", cursive, serif;
  color: #8b254c;
}

.write-reply-sub {
  margin: 0;
  font-size: clamp(11px, 2vw, 13px);
  color: #9d5371;
  font-family: inherit;
}

.reply-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 120px;
  padding: 10px 14px;
  border: 1.5px solid rgba(220, 140, 165, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #552438;
  font-size: clamp(13px, 2.2vw, 14.5px);
  line-height: 1.6;
  font-family: inherit;
  resize: none;
  outline: none;
  box-shadow: inset 0 2px 6px rgba(100, 30, 50, 0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
  cursor: text;
  user-select: text;
  touch-action: auto;
}

.reply-textarea:focus {
  border-color: #e85d88;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 93, 136, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-submit-reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d94676 0%, #ec4899 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 9px 26px;
  font-size: clamp(13px, 2.2vw, 14.5px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 70, 118, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
  touch-action: manipulation;
}

.btn-submit-reply:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217, 70, 118, 0.5);
}

.btn-submit-reply:active {
  transform: translateY(1px);
}

/* Sent Message Card Overlay */
.sent-message-overlay {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 4, 9, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.sent-message-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Hide background paper stack when sent-message-overlay is visible */
body:has(.sent-message-overlay.show) #papersScene,
body:has(.sent-message-overlay.show) #envelopeScene {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease;
}

.sent-message-card {
  position: relative;
  width: min(620px, 94vw);
  min-height: min(440px, 66vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 42px) clamp(22px, 5vw, 38px);
  border-radius: 24px;
  background: linear-gradient(145deg, #fffcf6 0%, #fff6ec 100%);
  border: 2px solid rgba(240, 185, 205, 0.75);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 45px rgba(245, 111, 157, 0.35),
    inset 0 0 25px rgba(255, 235, 210, 0.6);
  text-align: center;
  transform: scale(0.92) translateY(18px);
  transition: transform 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.25);
}

.sent-message-overlay.show .sent-message-card {
  transform: scale(1) translateY(0);
}

.close-sent-overlay {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(220, 140, 165, 0.15);
  color: #9d5371;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.close-sent-overlay:hover {
  background: rgba(220, 140, 165, 0.35);
  color: #7b2c4c;
}

.sent-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.sent-card-icon {
  font-size: 32px;
  filter: drop-shadow(0 3px 6px rgba(217, 70, 118, 0.25));
}

.sent-card-title {
  margin: 0;
  font: clamp(19px, 3.8vw, 24px)/1.3 "Pacifico", cursive, serif;
  color: #9f2250;
  letter-spacing: 0.01em;
}

.sent-card-body {
  position: relative;
  background: rgba(255, 242, 246, 0.7);
  border-radius: 14px;
  border: 1px dashed rgba(220, 140, 165, 0.55);
  padding: 16px 20px;
  margin: 14px 0;
}

.sent-card-text {
  margin: 0;
  font: italic clamp(15px, 2.8vw, 18px)/1.7 Georgia, serif;
  color: #68263f;
  white-space: pre-wrap;
  word-break: break-word;
}

.sent-card-footer {
  font-size: 12px;
  color: #ad6d87;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}

.sent-card-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.btn-capture-moment {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  gap: 8px;
  background: linear-gradient(135deg, #b81843 0%, #db2777 50%, #f43f5e 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 12px 32px;
  font-size: clamp(14px, 2.6vw, 16px);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(219, 39, 119, 0.45),
    0 0 15px rgba(255, 200, 220, 0.6);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: captureGlow 2.4s infinite alternate ease-in-out;
  user-select: none;
}

.btn-capture-moment:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 8px 24px rgba(219, 39, 119, 0.6),
    0 0 20px rgba(255, 200, 220, 0.85);
}

.btn-capture-moment:active {
  transform: translateY(1px);
}

@keyframes captureGlow {
  0% {
    box-shadow: 0 6px 20px rgba(219, 39, 119, 0.45);
  }
  100% {
    box-shadow: 0 8px 28px rgba(219, 39, 119, 0.7), 0 0 22px rgba(255, 180, 210, 0.75);
  }
}

/* Capturing layout adjustments (Hide button & clean layout) */
.sent-message-card.is-capturing .close-sent-overlay,
.sent-message-card.is-capturing .sent-card-actions {
  display: none !important;
}

.sent-message-card.is-capturing {
  padding: clamp(28px, 6vw, 42px) clamp(22px, 5vw, 36px) clamp(30px, 6.5vw, 44px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 45px rgba(245, 111, 157, 0.4) !important;
}

.sent-message-card.is-capturing .sent-card-footer {
  margin-bottom: 0 !important;
  font-size: clamp(12.5px, 2.5vw, 14px) !important;
  color: #9f496e !important;
  font-weight: 500 !important;
}

/* --- Falling Photos Behind Letters (Letters Stack in Front) --- */
.falling-photos {
  z-index: 5 !important;
}

.papers-scene,
.paper-stack {
  z-index: 25 !important;
}

.falling-photo {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  touch-action: manipulation !important;
  transition: filter 0.25s ease, box-shadow 0.25s ease !important;
}

.falling-photo:hover {
  animation-play-state: paused !important;
  filter: brightness(1.15) !important;
  box-shadow: 0 0 20px 4px rgba(255, 180, 210, 0.9), 0 14px 28px rgba(66, 25, 42, 0.35) !important;
}

.falling-photo:active {
  filter: brightness(0.95) !important;
}

/* Photo Lightbox Fullscreen Modal */
.photo-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.photo-lightbox-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 4, 8, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.photo-lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 90vh;
}

.photo-lightbox-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.5vw, 10px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.7),
    0 0 35px rgba(245, 111, 157, 0.35),
    inset 0 0 10px rgba(0, 0, 0, 0.05);
  transform: scale(0.88);
  transition: transform 0.38s cubic-bezier(0.18, 0.89, 0.32, 1.25);
}

.photo-lightbox-modal.show .photo-lightbox-frame {
  transform: scale(1);
}

.photo-lightbox-img {
  max-width: min(88vw, 820px);
  max-height: min(78vh, 760px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.photo-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: #e85d88;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s, background 0.2s;
  z-index: 2;
}

.photo-lightbox-close:hover {
  transform: scale(1.12);
  background: #db2777;
}

.photo-lightbox-close:active {
  transform: scale(0.92);
}

.photo-lightbox-hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(255, 235, 245, 0.85);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

/* Smooth Ultra-Slow Outgoing Animation for Reply Prompt Paper */
.paper.fly-reply-out {
  transition: transform 2.0s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translate3d(-100vw, -15px, 0) rotate(-12deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
}

@keyframes writePaperIn {
  0% {
    opacity: 0.3;
    transform: scale(0.95) translateY(12px) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(-1.2deg);
  }
}