@font-face{font-family:Mali;src:url('assets/mali.ttf') format('truetype');font-display:swap} @font-face{font-family:Dancing;src:url('assets/dancing.ttf') format('truetype');font-display:swap}
.space-item:not(.space-photo):not(.space-heart){font-family:Mali,'Segoe UI',sans-serif;font-weight:400;line-height:1.3;letter-spacing:-.04em;max-width:540px}
#letter-button{position:fixed;top:24px;right:24px;width:72px;height:48px;z-index:25;border:1px solid #dcb4ad;border-radius:1px;background:linear-gradient(150deg,#fff2e9,#e9bdc1);box-shadow:0 3px 16px #724b522b;color:#a16359;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;transform:rotate(-3deg)}
#letter-button[hidden]{display:none}#letter-button span{font-size:6px}#letter-button b{font:16px Dancing,cursive}#letter-button i{font-size:9px;color:#bd7373}body:has(#universe:not([hidden])) nav{top:88px}
#letter-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:#9b6559;overflow:auto}#letter-dialog::backdrop{background:#180d20b8;backdrop-filter:blur(9px)}
.letter-close{position:fixed;top:18px;right:22px;width:44px;height:44px;border:1px solid #efd2d277;border-radius:50%;background:#41233077;color:#ffe6e0;font:30px Arial;cursor:pointer;z-index:3}.letter-wrap{min-height:calc(100dvh - 48px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 0;box-sizing:border-box}.envelope{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;width:min(630px,88vw);aspect-ratio:1.55;background:linear-gradient(135deg,#ffece4,#e8b9c0);border:1px solid #e1b8af;box-shadow:0 16px 60px #0004;color:#a36957;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding-top:6%;font:18px Georgia,serif}.envelope:before{content:'';position:absolute;inset:-65% 0 25%;background:linear-gradient(135deg,#ffefe8,#efd0cd);border:1px solid #c7958f;transform:rotate(45deg);z-index:-1}.envelope strong{font:clamp(38px,7vw,58px) Dancing,cursive;margin:16px 0 4px}.envelope small{font-size:14px}.wax{display:grid;place-items:center;width:78px;height:78px;margin-top:25px;border-radius:45%;border:5px double #d49390;background:radial-gradient(#d18a86,#a85459);color:#ffccc2;box-shadow:2px 4px 8px #975d6355,inset 0 0 7px #f1b6a8;font:28px Dancing,cursive;transform:rotate(-9deg)}.letter-instruction{font:italic 14px Georgia,serif;color:#f5d5d4;margin:22px 0 0}.letter-paper{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;width:min(560px,88vw);min-height:650px;padding:75px 34px 220px;box-sizing:border-box;background:linear-gradient(130deg,#fff8ed,#f9ece1);box-shadow:0 20px 70px #0004,0 15px 0 10px #eac1c4;transform:rotate(-1deg);font:23px/1.55 Dancing,Georgia,serif}.letter-paper h2{font-size:clamp(29px,5vw,40px);font-weight:500;line-height:1.2;margin:0 0 25px;color:#b16c59}.letter-paper p{margin:12px 0;position:relative;z-index:1}.letter-portrait{position:absolute;bottom:16px;right:45px;width:190px;height:230px;object-fit:contain;object-position:bottom}.letter-flower{position:absolute;width:190px;pointer-events:none;filter:drop-shadow(0 2px 2px #8c5a4422)}.flower-left{left:-50px;bottom:-100px;transform:rotate(-35deg);width:250px}.flower-right{right:-65px;bottom:-120px;transform:rotate(-30deg);width:240px}.envelope[hidden],.letter-paper[hidden]{display:none}@media(max-width:600px){#letter-button{top:18px;right:18px;width:62px;height:42px}.letter-paper{padding:45px 24px 190px;min-height:560px;font-size:21px}.letter-portrait{width:150px;height:190px;right:32px}.envelope{padding-top:24px}.envelope strong{margin:10px 0 0}.envelope span{font-size:14px}.envelope small{font-size:11px}.wax{width:52px;height:52px;margin-top:12px;font-size:22px}}@media(prefers-reduced-motion:no-preference){.letter-paper{animation:letter-reveal .6s ease-out}@keyframes letter-reveal{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}}

.space-photo.space-landscape{width:210px;height:140px}@media(max-width:600px){.space-photo.space-landscape{width:174px;height:116px}}

@media(max-width:600px){.letter-paper .flower-right{width:140px;height:150px;object-fit:contain;right:8px;bottom:8px;transform:rotate(-12deg);z-index:0}}