@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--pink:#f4c6dc;--cream:#fff1eb}*{box-sizing:border-box}body{margin:0;background:#211c3b;color:var(--cream);font-family:'DM Sans',sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffe6a7;outline-offset:8px}[hidden]{display:none!important}.welcome{min-height:100svh;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:50px 24px;background:radial-gradient(ellipse at 50% 70%,#6b416450,transparent 60%),radial-gradient(ellipse at 10% 0%,#6c589c40,transparent 60%),#211c3b;position:relative;overflow:hidden}.welcome:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fbe4f1 1px,transparent 1px),radial-gradient(#d4c4ef90 1px,transparent 1px);background-size:137px 131px,223px 199px;background-position:30px 40px,90px 70px;opacity:.45}.eyebrow{font-size:10px;font-weight:500;letter-spacing:3px;color:#e1b7d1}.welcome h1{font:400 clamp(46px,6vw,76px)/1.05 'Cormorant Garamond',Georgia,serif;margin:25px 0 18px;letter-spacing:-1.5px}.welcome p{color:#c0b2cd;font-size:13px;line-height:1.9}.envelope{width:210px;height:137px;border:1px solid #e0acd1;background:linear-gradient(30deg,#c993b9 50%,#d8abca 50%);position:relative;margin:48px 0 27px;box-shadow:0 20px 70px #d797c425;transition:transform .4s,opacity .5s}.envelope:after{content:'';position:absolute;inset:0;clip-path:polygon(0 100%,50% 42%,100% 100%);background:#e1bad5}.flap{position:absolute;inset:-1px;clip-path:polygon(0 0,100% 0,50% 61%);background:#f0d2e7;transform-origin:top;transition:transform .6s;z-index:2}.seal{position:absolute;left:calc(50% - 19px);top:62px;width:38px;height:38px;display:grid;place-items:center;background:#a45b80;border:3px double #d298b4;border-radius:50%;z-index:3;font-size:16px;color:#f5ccdc}.envelope:hover{transform:translateY(-7px) rotate(-2deg)}.envelope.open .flap{transform:rotateX(180deg)}.envelope.open{transform:translateY(20px);opacity:0}.hint{font-size:10px;letter-spacing:1px;color:#d2afca}.tiny{position:absolute;bottom:25px;font-size:9px;color:#988ba9;letter-spacing:1px}.world{height:100svh;min-height:640px;position:relative;isolation:isolate;overflow:hidden;background:#302444}canvas{width:100%;height:100%;position:absolute;inset:0;z-index:-1;image-rendering:pixelated}header{text-align:center;padding-top:55px;text-shadow:0 2px 20px #251832}header h2{font:400 clamp(36px,5vw,60px) 'Cormorant Garamond',Georgia,serif;margin:12px 0 7px}header p{font:italic 17px 'Cormorant Garamond',Georgia,serif;color:#d7bdd7}.chest{position:absolute;right:14%;bottom:18%;width:92px;height:76px;background:none;border:0;filter:drop-shadow(0 0 15px #f8c98b55);transition:transform .3s}.chest:hover{transform:translateY(-5px)}.box{position:absolute;inset:30px 0 0;background:repeating-linear-gradient(0deg,#935f50 0 8px,#5b3942 9px 11px);border:5px solid #442f3b;box-shadow:inset 8px 0 #ce9861,inset -8px 0 #ce9861}.lid{position:absolute;left:0;top:5px;width:92px;height:37px;border:5px solid #442f3b;border-radius:15px 15px 0 0;background:repeating-linear-gradient(0deg,#ab7458 0 8px,#755046 9px 11px);transform-origin:bottom;transition:transform .5s}.chest.open .lid{transform:translateY(-23px) rotate(-12deg)}.lock{position:absolute;top:33px;left:37px;background:#deb77b;font-size:13px;color:#67454c;padding:3px}.chest-label{position:absolute;width:200px;right:-20px;bottom:-32px;font:italic 16px 'Cormorant Garamond',Georgia,serif;color:#f5d9da}.chest-label b{font-size:22px;margin-left:5px}.treasures{position:absolute;right:6%;bottom:34%;text-align:center;animation:reveal .6s both}.treasures>p{font:italic 18px 'Cormorant Garamond',serif}.treasures>div{display:flex;gap:18px;align-items:center}.mini-polaroid{background:#f9ece5;color:#5d4356;border:0;padding:8px 8px 17px;width:125px;transform:rotate(-7deg);box-shadow:0 7px 25px #160c3240;transition:transform .2s}.mini-polaroid:hover{transform:rotate(-3deg) scale(1.08)}.mini-polaroid img{width:109px;height:102px;object-fit:cover}.mini-polaroid span{font:italic 12px 'Cormorant Garamond',serif;display:block;margin-top:8px}.letter-card{width:128px;height:105px;background:#e6cadd;color:#674e68;border:1px solid #f7e1ec;transform:rotate(6deg);box-shadow:0 7px 25px #160c3240}.letter-card>span{font-size:25px}.letter-card strong{display:block;font:italic 18px 'Cormorant Garamond',serif}.letter-card small{font-size:8px}footer{position:absolute;bottom:20px;width:100%;display:flex;justify-content:space-between;padding:0 30px;color:#c1a7c3;font-size:9px;letter-spacing:1px}footer button{border:0;background:none;font-size:10px}dialog{border:0;box-shadow:0 20px 100px #130c2a99;max-height:88svh}dialog::backdrop{background:#1a1326c9;backdrop-filter:blur(9px)}.close{position:absolute;right:12px;top:7px;background:none;border:0;font-size:27px;z-index:1;color:#7f5874}.photo-dialog{padding:17px 17px 28px;background:#fff1e8;color:#70465e;max-width:min(440px,90vw);transform:rotate(-2deg)}figure{margin:0}.photo-dialog img{display:block;max-height:68svh;width:100%;object-fit:contain}.photo-dialog figcaption{text-align:center;font:italic 24px 'Cormorant Garamond',Georgia,serif;padding-top:20px}.letter-dialog{background:#fff1e8;color:#61435a;width:600px;max-width:92vw;padding:50px}.letter-dialog .eyebrow{color:#ad7c98;font-size:8px}.letter-dialog h2{font:italic 35px 'Cormorant Garamond',serif;margin:15px 0 25px}.letter-copy{font:20px/1.8 'Cormorant Garamond',Georgia,serif}.signature{display:block;text-align:right;font:italic 25px 'Cormorant Garamond',serif;color:#ad6e8d;margin-top:25px}@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){header{padding-top:45px}.chest{right:12%;bottom:17%}.treasures{right:6%;bottom:35%}.treasures>div{gap:12px}.mini-polaroid{width:110px}.mini-polaroid img{width:94px;height:85px}.letter-card{width:112px}footer{padding:0 18px}footer>span{max-width:135px;text-align:right;line-height:1.6}.letter-dialog{padding:40px 26px}.letter-copy{font-size:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}