:root{--pink:#ffe4ec;--pink-2:#f9ccda;--paper:#fffaf7;--rule:#f8d3df;--berry:#8e2c55;--berry-2:#6a1f40;--muted:#a35a78;--accent:#c8406f;--hand:"Mali", cursive;--ui:"Quicksand", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--berry);background:#000;margin:0;overflow:hidden}body{font-family:var(--ui);-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}[hidden]{display:none!important}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(30px)scale(.85)}}@keyframes rise-in{0%{opacity:0;transform:translate(-50%,24px)}}#scene{touch-action:none;opacity:0;width:100%;height:100%;transition:opacity 2.5s;display:block;position:fixed;inset:0}#scene.visible{opacity:1}#vignette{pointer-events:none;z-index:1;background:radial-gradient(75% 70%,#0000 55%,#0a06046b 100%);position:fixed;inset:0}#greeting{z-index:10;background:var(--pink);transition:opacity 1.4s;position:fixed;inset:0;overflow:hidden auto}#greeting.gone{opacity:0;pointer-events:none}.screen{flex-direction:column;justify-content:center;align-items:center;min-height:100%;padding:96px 16px 40px;animation:.7s fade;display:flex;position:relative}.sticker{filter:drop-shadow(0 6px 10px #8e2c552e);height:auto;display:block}.hearts{pointer-events:none;z-index:0;position:fixed;inset:0}.hearts span{opacity:.75;animation:linear forwards rise;position:absolute;bottom:-40px}@keyframes rise{to{transform:translate(var(--dx), -115vh) rotate(var(--rot));opacity:0}}#g-envelope{gap:0}.env-title{font:700 clamp(28px, 4vw, 44px)/1.1 var(--hand);text-align:center;z-index:1;margin:0 0 28px;position:relative}.envelope{z-index:1;aspect-ratio:300/196;cursor:pointer;background:#fff;border:0;border-radius:18px;width:min(460px,80vw);padding:0;transition:transform .25s;position:relative;overflow:hidden}.envelope:hover{transform:translateY(-4px)rotate(-1deg)}.envelope svg{width:100%;height:100%;position:absolute;inset:0}.envelope .flap{transform-box:fill-box;transform-origin:50% 0;transition:transform .6s}.envelope .seal{aspect-ratio:1;background:var(--accent);border-radius:50%;place-items:center;width:17%;transition:transform .4s,opacity .4s;display:grid;position:absolute;top:57%;left:50%;transform:translate(-50%,-50%)}.envelope .seal svg{width:48%;height:auto;position:static}.env-hint{color:var(--muted);z-index:1;margin:18px 0 0;font-size:17px;font-weight:600;position:relative}.env-left,.env-right{width:clamp(170px,19vw,260px);position:absolute}.env-left{top:30%;left:max(24px,6vw);transform:rotate(-7deg)}.env-right{top:36%;right:max(24px,6vw);transform:rotate(6deg)}#g-envelope.opening .flap{transform:scaleY(-1)}#g-envelope.opening .seal{opacity:0;transform:translate(-50%,-50%)scale(0)}#g-envelope.opening .envelope{animation:.9s ease-in .45s forwards env-away}@keyframes env-away{to{opacity:0;transform:translateY(-40px)scale(1.15)}}@media (max-width:720px){#g-envelope{justify-content:flex-start;padding-top:92px}.env-left,.env-right{width:min(46vw,190px);position:static}.env-left{order:0;align-self:flex-start;margin:0 0 8px 4px}.env-title{order:1}.envelope{order:2}.env-hint{order:3}.env-right{order:4;align-self:flex-end;margin:18px 4px 0 0}.env-title{margin-bottom:22px}}#g-letter{justify-content:flex-start}.book{z-index:1;background:var(--paper);border-radius:18px;grid-template-rows:1fr auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"letter photos""footer photos";width:min(1160px,100%);display:grid;position:relative}.lined{background-image:repeating-linear-gradient(var(--paper) 0 43px, var(--rule) 43px 45px)}.book-letter{border-top-left-radius:18px;grid-area:letter;padding:60px 56px 16px;position:relative}.book-footer{background:var(--paper);border-bottom-left-radius:18px;grid-area:footer;align-items:center;gap:22px;padding:8px 56px 40px;display:flex}.book-letter,.book-footer{border-right:2px dashed #f4bfd0}.tape{opacity:.88;height:28px;position:absolute;top:-6px}.tape-pink{background:#f7a8c0;width:130px;left:60px;transform:rotate(-5deg)}.tape-yellow{background:#fff1b8;width:90px;right:70px;transform:rotate(8deg)}.letter-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:4px;display:flex}.letter-greeting{font:700 30px/45px var(--hand);text-wrap:balance;margin:0}.letter-heart{flex:none;width:110px;transform:rotate(6deg)}.letter-lines{font:24px/45px var(--hand);white-space:pre-line;min-height:90px}.letter-lines .cursor{color:var(--accent);animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.letter-from{text-align:right;font:700 24px/45px var(--hand);color:var(--accent);opacity:0;margin:0;transition:opacity .6s}.letter-from.shown{opacity:1}.footer-sticker{width:150px;transform:rotate(-4deg)}.footer-cta{opacity:0;flex-direction:column;align-items:flex-start;gap:8px;transition:opacity .6s,transform .6s;display:flex;transform:translateY(10px)}.footer-cta.shown{opacity:1;transform:none}.letter-ready{font:700 23px var(--hand)}.pill-btn{background:var(--accent);color:#fff;min-height:52px;font:700 21px var(--hand);cursor:pointer;border:0;border-radius:999px;padding:8px 44px;transition:transform .2s}.pill-btn:hover{transform:translateY(-2px)}.book-photos{grid-area:photos;align-items:center;padding:44px 40px;display:flex}.photo-cluster{grid-template-columns:minmax(0,1fr) minmax(150px,.8fr) minmax(0,1fr);grid-template-areas:"a.b"".c.""d.e";align-items:start;gap:6px 10px;width:100%;max-width:540px;margin:0 auto;display:grid}.photo-cluster .polaroid:first-of-type,.photo-cluster .polaroid:nth-of-type(3){justify-self:end}.photo-cluster .polaroid:first-of-type,.photo-cluster .polaroid:nth-of-type(2){align-self:end}.photo-cluster .polaroid.landscape{width:118%}.polaroid{transform:rotate(var(--r,0deg));animation:.7s cubic-bezier(.2,1.4,.4,1) backwards pop;animation-delay:var(--d,0s);background:#fff;border:1px solid #f1e3e7;margin:0;padding:8px 8px 34px;position:relative}.polaroid img{width:100%;aspect-ratio:var(--ar,4 / 5);object-fit:cover;display:block}.polaroid figcaption{text-align:center;font:15px var(--hand);position:absolute;bottom:6px;left:0;right:0}.cluster-center{border:7px solid #fff;border-radius:20px;grid-area:c;place-self:center;width:min(170px,100%);animation:.7s cubic-bezier(.2,1.4,.4,1) .2s backwards pop}@media (max-width:900px){#g-letter{padding:86px 14px 24px}.book{grid-template:"letter""photos""footer"/minmax(0,1fr)}.book-letter,.book-footer{border-right:0}.book-letter{padding:42px 22px 8px}.lined{background-image:repeating-linear-gradient(var(--paper) 0 37px, var(--rule) 37px 39px)}.letter-greeting{font-size:24px;line-height:39px}.letter-heart{width:92px}.letter-lines,.letter-from{font-size:20px;line-height:39px}.book-photos{padding:20px 22px 8px}.photo-cluster{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b""c c""d e";gap:26px 24px;max-width:none}.photo-cluster .polaroid.landscape{width:100%}.photo-cluster .polaroid.landscape img{aspect-ratio:1}.polaroid{padding:8px 8px 30px}.polaroid figcaption{font-size:14px;bottom:5px}.cluster-center{width:min(180px,60%)}.book-footer{border-radius:0 0 18px 18px;justify-content:space-between;padding:20px 22px 28px}.footer-sticker{width:min(150px,40vw)}.footer-cta{align-items:center}.pill-btn{padding:8px 34px;font-size:20px}}#g-loading{gap:24px}.loading-sticker{z-index:1;border:10px solid #fff;border-radius:32px;width:min(520px,78vw);position:relative}.loading-text{font:700 clamp(25px, 3vw, 35px) var(--hand);z-index:1;margin:0;position:relative}.loading-dots{gap:12px;display:flex}.loading-dots i{background:var(--accent);border-radius:50%;width:14px;height:14px;animation:1.2s ease-in-out infinite dot}.loading-dots i:nth-child(2){background:#e85a8a;animation-delay:.15s}.loading-dots i:nth-child(3){background:#f4bfd0;animation-delay:.3s}@keyframes dot{50%{transform:translateY(-8px)}}#now-playing{z-index:15;top:max(20px, env(safe-area-inset-top));white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:7px;animation:.6s fade;display:flex;position:fixed;left:50%;transform:translate(-50%)}#now-playing .disc{background:#3a2a30;border:8px solid #f07ca0;border-radius:50%;flex:none;width:38px;height:38px;animation:3s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#now-playing .np-text{flex-direction:column;min-width:0;line-height:1.15;display:flex}#now-playing small{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700}#now-playing .np-title{text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}#now-playing .eq{align-items:flex-end;gap:3px;height:18px;display:flex}#now-playing .eq i{background:#e85a8a;border-radius:2px;width:4px;animation:.9s ease-in-out infinite eq}#now-playing .eq i:nth-child(2){animation-delay:-.3s}#now-playing .eq i:nth-child(3){animation-delay:-.6s}#now-playing .eq i:nth-child(4){animation-delay:-.15s}@keyframes eq{0%,to{height:5px}50%{height:18px}}#now-playing.muted .disc,#now-playing.muted .eq i{animation-play-state:paused}#now-playing .np-mute{background:var(--pink);cursor:pointer;border:0;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}#now-playing .np-mute svg{fill:none;width:19px;height:19px;stroke:var(--berry);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}#now-playing .ic-off,#now-playing.muted .ic-on{display:none}#now-playing.muted .ic-off{display:block}#hint{left:50%;bottom:max(34px, env(safe-area-inset-bottom));z-index:4;text-align:center;pointer-events:none;background:#fff;border-radius:999px;max-width:calc(100% - 40px);padding:12px 24px;font-size:clamp(14px,1.4vw,17px);font-weight:600;animation:.6s rise-in;position:fixed;transform:translate(-50%)}#room-card{left:50%;bottom:max(32px, env(safe-area-inset-bottom));z-index:6;pointer-events:none;background:#fff;border-radius:24px;align-items:center;gap:16px;width:min(560px,100% - 40px);padding:14px 24px 14px 14px;animation:.6s rise-in;display:flex;position:fixed;transform:translate(-50%)}#room-card .rc-img{object-fit:cover;border-radius:18px;flex:none;width:96px;height:96px}#room-card .rc-icon{background:var(--pink);border-radius:50%;flex:none;place-items:center;width:60px;height:60px;margin-left:6px;display:grid}#room-card .rc-icon svg{fill:none;width:30px;height:30px;stroke:var(--accent);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}#room-card .rc-text{flex-direction:column;gap:4px;min-width:0;display:flex}#room-card strong{font:700 24px/1.15 var(--hand)}#room-card .rc-text span{color:var(--muted);font-size:16px;font-weight:600}@media (max-width:600px){#room-card{gap:14px;padding:12px 18px 12px 12px}#room-card .rc-img{border-radius:16px;width:84px;height:84px}#room-card .rc-icon{width:52px;height:52px}#room-card strong{font-size:20px}#room-card .rc-text span{font-size:15px}}#letter-book{z-index:20;background:#2a141e8c;place-items:center;padding:16px;animation:.6s fade;display:grid;position:fixed;inset:0}.lb{background:var(--paper);border-radius:22px;grid-template-columns:repeat(2,minmax(0,1fr));width:min(1040px,100%);height:min(620px,100%);animation:.7s cubic-bezier(.2,1.4,.4,1) pop;display:grid;overflow:hidden}.lb-media{background:#fff;border-right:2px dashed #f4bfd0;justify-content:center;align-items:center;min-height:0;padding:36px;display:flex}.lb-media img{object-fit:contain;filter:drop-shadow(0 6px 10px #8e2c552e);max-width:100%;max-height:100%}.lb-body{flex-direction:column;gap:18px;min-height:0;padding:30px 40px 28px;display:flex}.lb-top{justify-content:space-between;align-items:center;display:flex}.lb-count{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:14px;font-weight:700}.lb-title{font:700 32px/1.2 var(--hand);margin:0}.lb-text{font:21px/45px var(--hand);color:var(--berry-2);white-space:pre-line;flex:1;min-height:0;overflow-y:auto}.lb-nav{justify-content:space-between;align-items:center;display:flex}.lb-dots{gap:8px;display:flex}.lb-dots i{background:#f4bfd0;border-radius:5px;width:10px;height:10px;transition:width .3s,background .3s}.lb-dots i.on{background:var(--accent);width:24px}.round-btn{background:var(--pink);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;width:56px;height:56px;display:grid}.round-btn svg{fill:none;width:24px;height:24px;stroke:var(--berry);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.round-btn.primary{background:var(--accent)}.round-btn.primary svg{stroke:#fff}.round-btn:disabled{opacity:.45;cursor:default}.lb-close{width:44px;height:44px}.lb-close svg{width:18px;height:18px}.lb.turn .lb-media img,.lb.turn .lb-title,.lb.turn .lb-text{animation:.5s fade}@media (max-width:760px){#letter-book{padding:84px 18px 36px}.lb{flex-direction:column;gap:14px;height:100%;padding:18px 18px 16px;display:flex}.lb-body{display:contents}.lb-top{order:0}.lb-media{border:0;border-radius:16px;flex:none;order:1;height:min(300px,38vh);padding:0}.lb-title{text-align:center;order:2;font-size:24px}.lb-text{text-align:center;order:3;font-size:18px;line-height:1.6}.lb-nav{order:4;margin-top:auto}.round-btn{width:52px;height:52px}}#letter-btn{left:50%;bottom:max(28px, env(safe-area-inset-bottom));z-index:6;font:700 17px var(--hand);cursor:pointer;background:#fff;border:0;border-radius:999px;padding:12px 22px;position:fixed;transform:translate(-50%)}#lightbox{z-index:25;cursor:zoom-out;background:#000000b3;place-items:center;padding:16px;animation:.4s fade;display:grid;position:fixed;inset:0}#lightbox figure{background:var(--paper);border-radius:4px;flex-direction:column;align-items:center;max-width:100%;max-height:100%;margin:0;padding:12px 12px 16px;animation:.6s cubic-bezier(.2,1.4,.4,1) pop;display:flex}#lightbox img{object-fit:contain;border-radius:2px;max-width:min(88vw,900px);max-height:78vh;display:block}#lightbox figcaption{font:18px var(--hand);text-align:center;margin-top:12px}#editor{z-index:30;color:#ddd;background:#141414e6;border-radius:6px;width:300px;max-height:calc(100% - 24px);padding:12px;font:12px ui-monospace,monospace;position:fixed;top:12px;left:12px;overflow:auto}#editor h3{color:#fc8;margin:10px 0 4px;font-size:12px}#editor label{grid-template-columns:70px 1fr 48px;align-items:center;gap:6px;display:grid}#editor input[type=range]{width:100%}#editor button{width:100%;font:inherit;margin-top:8px;padding:6px}#editor textarea{color:#9f9;background:#111;width:100%;height:120px;margin-top:8px;font:11px ui-monospace,monospace}