@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&family=Prata&display=swap');

:root { color-scheme: dark; --background:#110a11; --cream:#f4e7df; --muted:#ac929e; --pink:#e9a3b8; --rose:#ce6f94; --line:rgba(241,201,217,.16); --serif:'Prata',Georgia,serif; --sans:'Be Vietnam Pro',Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--cream); font-family:var(--sans); font-weight:300; overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,a:focus-visible { outline:2px solid var(--pink); outline-offset:6px; }
button { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.atmosphere { position:fixed; inset:0; background:radial-gradient(ellipse at 50% 48%,#34132685 0%,#1d0d1d55 35%,transparent 70%),radial-gradient(ellipse at 90% 10%,#2d182b60,transparent 50%),#110a11; }
#universe { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.055; z-index:8; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.site-header { position:fixed; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:32px 48px; z-index:10; }
.wordmark { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:400; letter-spacing:-.4px; }
.wordmark-icon { width:23px; height:23px; color:var(--pink); transform:rotate(-12deg); }
.wordmark-dot { color:var(--rose); }
.header-note { position:absolute; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:2.3px; color:var(--muted); white-space:nowrap; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); background:rgba(25,14,24,.6); border-radius:50%; transition:background .2s,border-color .2s,transform .2s; }
.icon-button:hover { background:#3e2034; border-color:#ae748b; }
.sound-button { width:42px; height:42px; }
.sound-button .icon { width:18px; height:18px; }
.sound-button[aria-pressed=true] { color:var(--pink); border-color:#9e546f; }
.invitation { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; transition:opacity 1s,visibility 1s,transform 1.3s; text-align:center; }
.invitation-copy { position:relative; padding:50px 20px 0; }
.eyebrow { display:inline-flex; align-items:center; justify-content:center; gap:11px; font-size:9px; letter-spacing:2.7px; font-weight:400; color:#cda9b8; line-height:1.8; }
.tiny-star { font-size:15px; color:var(--pink); }
h1,h2,p { margin:0; }
.invitation h1 { font-family:var(--serif); font-size:clamp(36px,4.5vw,66px); line-height:1.5; font-weight:400; letter-spacing:-2.3px; margin:23px 0 19px; }
em { font-weight:400; color:var(--pink); }
.invitation p { font-size:12px; line-height:2.2; color:#bba2ae; }
.open-gift { display:flex; align-items:center; justify-content:center; gap:13px; margin:37px auto 17px; padding:17px 25px; border:1px solid #b7788e77; background:linear-gradient(120deg,#623047b0,#45213599); color:#f9e6ee; border-radius:4px; font-size:12px; box-shadow:0 0 45px #bd47751a,inset 0 1px 0 #e6a4bb22; transition:background .25s,box-shadow .25s,transform .25s; }
.open-gift:hover { background:#71364e; box-shadow:0 0 55px #bd477533; transform:translateY(-2px); }
.open-gift .icon { width:18px; height:18px; }
.open-gift .arrow { margin-left:16px; width:17px; }
.invitation-footnote { font-size:9px; color:#947885; letter-spacing:.4px; }
.invitation-orbit { position:absolute; left:50%; top:50%; width:min(75vw,880px); height:min(75vw,880px); border:1px solid #c28b9c10; border-radius:50%; transform:translate(-50%,-50%) rotate(-25deg) scaleY(.65); pointer-events:none; }
.orbit-one::after { content:'✦'; position:absolute; top:15%; left:10%; font-size:17px; color:#d6a6b7; }
.orbit-two { width:min(95vw,1100px); height:min(95vw,1100px); transform:translate(-50%,-50%) rotate(35deg) scaleY(.6); }
.orbit-two::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:#edb3c5; bottom:16%; right:12%; box-shadow:0 0 15px #edb3c5; }
.intro-mark { position:absolute; bottom:100px; font-family:var(--serif); font-size:17px; font-style:italic; color:#b78d9b; transform:rotate(-6deg); }
.bottom-dedication { position:absolute; bottom:35px; font-size:8px; letter-spacing:2.8px; color:#8e7480; }
.experience { position:fixed; inset:0; opacity:0; visibility:hidden; transition:opacity 1.8s,visibility 1.8s; overflow:hidden; }
body.opened .experience { opacity:1; visibility:visible; }
body.opened .invitation { opacity:0; visibility:hidden; transform:scale(1.06); pointer-events:none; }
.scene-world { position:absolute; inset:0; transform:translate(var(--pan-x,0px),var(--pan-y,0px)); transition:transform 1.2s ease-out; }
.scene-copy { position:absolute; top:48%; left:50%; width:640px; max-width:96%; transform:translate(-50%,-50%); text-align:center; z-index:2; pointer-events:none; text-shadow:0 2px 35px #110a11; }
.scene-copy .eyebrow { font-size:8px; letter-spacing:2.6px; }
.scene-copy h1 { font-family:var(--serif); font-size:clamp(28px,3.3vw,48px); font-weight:400; line-height:1.6; letter-spacing:-1.5px; margin:20px 0 15px; outline:none; }
.scene-copy p { font-size:11px; line-height:1.9; color:#c0a5b3; padding:0 15px; }
.memory-card { position:absolute; left:var(--x); top:var(--y); width:var(--width,135px); padding:7px 7px 10px; background:linear-gradient(130deg,#ead7d5,#cbb6c1); border:0; border-radius:2px; color:#48323d; transform:translate(-50%,-50%) rotate(var(--rotation)); box-shadow:0 12px 45px #0005,0 0 36px #a5466720; text-align:left; animation:float-memory var(--duration,9s) ease-in-out infinite; animation-delay:var(--delay,0s); transition:filter .3s,box-shadow .3s; z-index:3; }
.memory-card:hover,.memory-card:focus-visible { filter:brightness(1.13); box-shadow:0 10px 50px #a5466760; z-index:4; }
.memory-card img { display:block; width:100%; height:auto; aspect-ratio:4/4.6; object-fit:cover; filter:saturate(.7); }
.memory-card .memory-label { display:block; padding-top:8px; font-size:8px; text-align:center; font-weight:400; letter-spacing:-.25px; white-space:nowrap; }
.memory-card .placeholder-label { position:absolute; bottom:34px; left:0; width:100%; font-size:6px; letter-spacing:1.4px; text-align:center; color:#fff9; }
.memory-card::after { content:''; width:38px; height:14px; background:#dbbec14f; position:absolute; left:50%; top:-7px; transform:translateX(-50%) rotate(-8deg); backdrop-filter:blur(5px); }
@keyframes float-memory { 0%,100% { transform:translate(-50%,-50%) rotate(var(--rotation)); } 50% { transform:translate(-50%,calc(-50% - 14px)) rotate(calc(var(--rotation) + 3deg)); } }
.floating-message { position:absolute; left:var(--x); top:var(--y); white-space:nowrap; font-family:var(--serif); font-size:var(--size,12px); color:#c783a299; letter-spacing:.2px; transform:translate(-50%,-50%) rotate(var(--rotation)); animation:float-message var(--duration) ease-in-out infinite; animation-delay:var(--delay); text-shadow:0 0 15px #d2609166; }
@keyframes float-message { 0%,100% { opacity:.35; translate:0 0; } 50% { opacity:.8; translate:12px -13px; } }
.scene-bottom { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; align-items:center; flex-direction:column; z-index:5; width:max-content; max-width:100%; }
.explore-hint { font-size:8px; color:#a28494; margin-bottom:19px; display:flex; align-items:center; gap:9px; letter-spacing:.4px; }
.hint-line { display:block; width:20px; height:1px; background:#916178; }
.gift-toolbar { display:flex; align-items:center; padding:6px; border:1px solid #a06d853d; border-radius:9px; background:#241420b8; box-shadow:0 8px 30px #0003; backdrop-filter:blur(16px); }
.toolbar-button { min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; background:none; border:0; border-radius:5px; padding:0 17px; font-size:10px; transition:background .25s; }
.toolbar-button:hover { background:#a85d7a20; }
.toolbar-button .icon { width:17px; height:17px; color:#ddb1c1; }
.letter-trigger { color:#f2d5e1; }
.toolbar-divider { width:1px; height:20px; background:var(--line); }
.notification-dot { width:4px; height:4px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px #f4adcb; }
.motion-button { padding:0 13px; }
.scene-signature { font-family:var(--serif); font-size:9px; font-style:italic; color:#8d6f7e; margin-top:18px; }
.side-note { position:absolute; right:35px; top:50%; writing-mode:vertical-rl; font-size:7px; letter-spacing:3px; color:#745665; }
dialog { border:0; padding:0; max-height:calc(100dvh - 60px); max-width:calc(100vw - 32px); overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#0b050bdd; backdrop-filter:blur(12px); }
dialog[open] { animation:dialog-in .35s ease both; }
@keyframes dialog-in { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
.close-dialog { position:absolute; right:16px; top:16px; z-index:2; width:36px; height:36px; }
.close-dialog .icon { width:16px; height:16px; }
.letter-dialog { width:580px; background:#f1e6dc; color:#513d45; border-radius:5px; }
.letter-dialog .close-dialog { background:transparent; border-color:#684b5e33; color:#73505f; }
.letter-dialog .close-dialog:hover { background:#b6758f22; }
.letter-paper { padding:57px 48px 35px; position:relative; background:radial-gradient(ellipse at top,#fff9,transparent 60%); }
.letter-overline { display:block; font-size:6px; font-weight:500; letter-spacing:1.5px; text-align:center; color:#a17c89; }
.letter-heart { display:block; width:26px; height:26px; color:#ae617b; margin:27px auto 21px; }
.letter-paper h2 { font-family:var(--serif); font-weight:400; font-size:25px; line-height:1.7; text-align:center; margin-bottom:22px; }
.letter-body { font-size:12px; line-height:2.15; color:#6c5661; }
.letter-body p+p { margin-top:15px; }
.letter-signature { display:flex; align-items:flex-start; flex-direction:column; gap:5px; margin-top:27px; font-size:11px; color:#97727e; }
.letter-signature strong { font-family:var(--serif); font-size:29px; font-weight:400; color:#9d5772; margin-top:4px; }
.letter-signature .icon { width:18px; height:18px; margin-top:7px; color:#ad7286; }
.paper-footer { display:block; border-top:1px solid #99758333; text-align:center; margin-top:26px; padding-top:21px; font-size:6px; letter-spacing:1.6px; color:#ae8f99; }
.dark-dialog { background:#1b101c; border:1px solid #a76a8733; border-radius:9px; color:var(--cream); box-shadow:0 30px 100px #0005; }
.album-dialog { width:810px; padding:47px 36px 35px; text-align:center; }
.album-dialog .eyebrow { font-size:7px; letter-spacing:2px; }
.album-dialog h2 { font-family:var(--serif); font-weight:400; font-size:32px; line-height:1.6; margin:17px 0 9px; }
.album-note { font-size:10px; line-height:1.9; color:#b393a5; margin-bottom:25px; }
.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.album-card { padding:6px 6px 12px; color:#4c3542; background:#dfcfd0; border:0; border-radius:2px; transition:transform .2s; }
.album-card:hover { transform:translateY(-3px); }
.album-card img { width:100%; height:auto; aspect-ratio:4/4.3; object-fit:cover; display:block; }
.album-card span { display:block; font-size:9px; font-weight:400; margin-top:10px; }
.memory-dialog { width:750px; }
.memory-dialog[open] { display:grid; grid-template-columns:1.05fr 1fr; }
.memory-image-wrap { background:#291b28; min-width:0; }
.memory-image-wrap img { display:block; width:100%; height:100%; max-height:70dvh; object-fit:contain; }
.memory-detail { display:flex; flex-direction:column; justify-content:center; padding:65px 27px 35px; }
.memory-detail .eyebrow { justify-content:flex-start; font-size:7px; letter-spacing:1.8px; }
.memory-detail h2 { font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.6; margin:20px 0 15px; }
.memory-detail p { color:#b69aaa; font-size:11px; line-height:2; }
.memory-navigation { display:flex; align-items:center; gap:20px; margin-top:30px; }
.memory-navigation .icon-button { width:36px; height:36px; }
.memory-navigation .icon { width:16px; height:16px; }
.memory-navigation span { font-size:9px; color:#aa8b9d; }
.previous-memory .icon { transform:rotate(180deg); }
.toast { position:fixed; left:50%; bottom:110px; transform:translate(-50%,10px); z-index:30; background:#efe1e8; color:#4e3544; border-radius:6px; padding:13px 20px; max-width:90vw; font-size:11px; line-height:1.8; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; text-align:center; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.noscript-notice { position:fixed; bottom:0; left:0; right:0; text-align:center; padding:15px; background:#f4d3de; color:#422232; z-index:50; font-size:12px; }
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after { animation-play-state:paused!important; }
body.motion-paused .scene-world { transition:none; }
@media (min-width:1500px) { .memory-card { width:calc(var(--width)*1.18); } }
@media (max-width:1000px) { .header-note { display:none; } .site-header { padding:25px 28px; } .memory-card { width:calc(var(--width)*.8); } .side-note { right:18px; } }
@media (max-width:600px) {
  .site-header { padding:calc(16px + env(safe-area-inset-top)) 20px 16px; }
  .wordmark { font-size:12px; gap:8px; } .wordmark-icon { width:20px; height:20px; }
  .sound-button { width:38px; height:38px; }
  .invitation-copy { padding:0 15px 15px; }
  .invitation h1 { font-size:clamp(30px,7.7vw,44px); letter-spacing:-1.3px; margin:25px 0 19px; line-height:1.6; }
  .invitation .eyebrow { font-size:7px; letter-spacing:2px; }
  .invitation p { font-size:10px; line-height:2.3; }
  .open-gift { margin-top:31px; padding:16px 21px; font-size:11px; }
  .invitation-footnote { font-size:8px; }
  .invitation-orbit { width:130vw; height:130vw; } .orbit-two { width:175vw; height:175vw; }
  .intro-mark { font-size:15px; bottom:calc(90px + env(safe-area-inset-bottom)); }
  .bottom-dedication { bottom:calc(26px + env(safe-area-inset-bottom)); font-size:6px; letter-spacing:1.7px; }
  .scene-copy { top:47%; width:100%; }
  .scene-copy h1 { font-size:clamp(25px,6.8vw,38px); line-height:1.7; margin:16px 0 13px; letter-spacing:-1px; }
  .scene-copy .eyebrow { font-size:6px; letter-spacing:1.5px; gap:7px; }
  .scene-copy p { font-size:8px; }
  .memory-card { left:var(--mx); top:var(--my); width:var(--mw,83px); padding:5px 5px 9px; }
  .memory-card .memory-label { font-size:6px; padding-top:7px; }
  .memory-card .placeholder-label { font-size:4px; letter-spacing:.8px; bottom:27px; }
  .memory-card::after { width:27px; height:11px; top:-5px; }
  .floating-message { left:var(--mx); top:var(--my); font-size:calc(var(--size)*.65); opacity:.6; }
  .scene-bottom { bottom:calc(22px + env(safe-area-inset-bottom)); }
  .explore-hint { font-size:6px; margin-bottom:15px; letter-spacing:.2px; }
  .gift-toolbar { padding:5px; border-radius:8px; }
  .toolbar-button { font-size:9px; padding:0 12px; gap:8px; min-height:42px; }
  .toolbar-button .icon { width:16px; height:16px; }
  .motion-button { padding:0 11px; }
  .scene-signature { font-size:8px; margin-top:15px; }
  .side-note { display:none; }
  dialog { max-height:calc(100dvh - 34px); max-width:calc(100vw - 28px); }
  .letter-paper { padding:55px 25px 28px; }
  .letter-overline { font-size:5px; letter-spacing:1.2px; }
  .letter-paper h2 { font-size:22px; }
  .letter-body { font-size:11px; line-height:2.1; }
  .letter-signature strong { font-size:25px; }
  .album-dialog { padding:60px 19px 25px; }
  .album-dialog h2 { font-size:25px; margin-top:13px; }
  .album-dialog .eyebrow { font-size:6px; letter-spacing:1.3px; }
  .album-note { font-size:8px; }
  .album-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .album-card span { font-size:8px; }
  .memory-dialog { width:350px; }
  .memory-dialog[open] { display:block; }
  .memory-image-wrap img { height:37dvh; width:100%; object-fit:contain; }
  .memory-detail { padding:22px 25px 23px; }
  .memory-detail h2 { font-size:24px; margin:10px 0; }
  .memory-detail p { font-size:10px; }
  .memory-navigation { margin-top:17px; justify-content:center; }
}
@media (max-height:680px) and (min-width:601px) { .scene-copy h1 { font-size:34px; } .scene-copy { top:46%; } .memory-card { width:calc(var(--width)*.75); } .scene-bottom { bottom:15px; } .scene-signature { display:none; } .invitation-copy { padding-top:10px; } .invitation h1 { font-size:43px; margin:13px 0; } .intro-mark { display:none; } }
@media (max-height:660px) and (max-width:600px) { .scene-copy h1 { font-size:24px; } .memory-card { width:calc(var(--mw,83px)*.8); } .scene-signature { display:none; } .scene-copy { top:46%; } .invitation h1 { font-size:29px; } .intro-mark { display:none; } .scene-bottom { bottom:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; } }