*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#3d060b;font-family:'Quicksand',sans-serif;touch-action:manipulation}
:root{--wine:#5b0a12;--red:#a50f1c;--cream:#f5ecda;--ink:#7a0e18}
.chip{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:60;font:700 9px/1 'Quicksand';letter-spacing:1px;color:#f5ecda;background:#3d060bd9;border:1px solid #f5ecda55;border-radius:30px;padding:8px 12px;white-space:nowrap;pointer-events:none}
#app{position:fixed;inset:0}
.pg{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none}
.pg.on{visibility:visible;opacity:1;pointer-events:auto;animation:pin .75s cubic-bezier(.2,.8,.2,1)}
.pg.off{visibility:visible;opacity:0;transition:opacity .45s,transform .6s cubic-bezier(.5,0,.8,.4);transform:translateX(-9%) rotate(-2.5deg) scale(.96)}
@keyframes pin{from{opacity:0;transform:translateX(14%) rotate(3deg) scale(.96)}to{opacity:1;transform:none}}
.st{position:absolute;left:50%;top:50%;transform-origin:center;transform:translate(-50%,-50%) scale(var(--s,1))}
.port .st{width:420px;height:860px}.land .st{width:1280px;height:720px}
.o{position:absolute;rotate:var(--r,0deg)}
.port .o{left:var(--pl);top:var(--pt);width:var(--pw,auto);--r:var(--pr,0deg)}
.land .o{left:var(--ll);top:var(--lt);width:var(--lw,auto);--r:var(--lr,0deg)}
.port .L,.land .P{display:none!important}
/* backgrounds */
.bg-wine{background:radial-gradient(ellipse at 50% 30%,#7c1019,#4a070e 75%),#5b0a12}
.bg-wine::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.7}
.bg-knit{background:radial-gradient(ellipse at 50% 45%,#0000 40%,#8a6e4a55 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26'%3E%3Crect width='22' height='26' fill='%23e9dec9'/%3E%3Cpath d='M2 1 11 14 20 1' stroke='%23c9b99b' stroke-width='5' fill='none' transform='translate(0 2)'/%3E%3Cpath d='M2 1 11 14 20 1' stroke='%23fbf5e8' stroke-width='4' fill='none'/%3E%3Cpath d='M4 3 11 12 18 3' stroke='%23fff' stroke-opacity='.7' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");background-color:#e9dec9}
.bg-knit::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 54px,#7a603a14 54px 58px)}
.bg-ging{background:repeating-linear-gradient(0deg,#c0141f8c 0 38px,#0000 38px 76px),repeating-linear-gradient(90deg,#c0141f8c 0 38px,#0000 38px 76px),#fff4e4}
/* polaroid */
.pol{background:#fff;padding:10px 10px 36px;box-shadow:0 12px 26px #0006,0 2px 4px #0004;position:absolute}
.pol img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.pol .cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:700 19px 'Caveat';color:#6a2a30}
.tape{position:absolute;width:90px;height:28px;background:#f1dfb8cc;box-shadow:0 1px 3px #0003;left:50%;top:-14px;margin-left:-45px;rotate:-4deg}
.tape.l{left:-26px;top:10px;margin:0;rotate:-40deg}
.o svg{display:block;width:100%;height:auto}
.o.hib{pointer-events:none;filter:drop-shadow(0 8px 10px #0005)}
.script{font-family:'Mrs Saint Delafield',cursive;font-weight:400;text-align:center;line-height:.95;margin:0}
.hand{font-family:'Caveat',cursive;font-weight:700}
.tag{background:#f3e7cf;color:var(--ink);padding:9px 20px;font:700 26px 'Caveat';border-radius:3px;box-shadow:0 5px 12px #0006;text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6% 50%)}
.paper{background:#f2e8d3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:0 10px 24px #0005}
.nx{position:absolute;width:58px;height:58px;border-radius:50%;border:0;background:#f5ecda;color:var(--red);font:700 34px/52px 'Quicksand';text-align:center;box-shadow:0 5px 14px #0006,inset 0 0 0 3px #f5ecda,inset 0 0 0 4px #a50f1c55;opacity:0;pointer-events:none;transition:opacity .5s;cursor:pointer;padding:0}
.nx.show{opacity:1;pointer-events:auto;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
.port .nx{left:336px;top:772px}.land .nx{left:1180px;top:630px}
/* keypad */
.kp{text-align:center}
.dots{display:flex;justify-content:center;gap:14px;height:28px;margin-bottom:12px}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid #f5ecda;transition:.25s}
.dots i.f{background:#f5ecda;box-shadow:0 0 14px #ffd9c0;transform:scale(1.15)}
.keys{display:grid;grid-template-columns:repeat(3,64px);gap:12px;justify-content:center}
.keys button{width:64px;height:64px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fffaf0,#e8dcc3);color:#7a0e18;font:700 28px 'Quicksand';box-shadow:0 5px 0 #a89a7c,0 8px 14px #0006;cursor:pointer;transition:transform .08s}
.keys button:active{transform:translateY(4px);box-shadow:0 1px 0 #a89a7c}
.keys button.sm{font-size:20px}
.msg{font:700 22px 'Caveat';color:#ffd9c0;height:26px;margin-top:8px}
.shake{animation:sh .45s}
@keyframes sh{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
/* envelope */
.env{aspect-ratio:3/2;cursor:pointer;perspective:900px}
.env>*{position:absolute}
.env .back{inset:0;background:linear-gradient(160deg,#a8101c,#7d0812);border-radius:6px;box-shadow:0 18px 30px #0007}
.env .card{left:7%;right:7%;top:8%;bottom:8%;background:#fffdf7;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:3px;box-shadow:0 2px 8px #0003;transition:transform 1s cubic-bezier(.3,.8,.2,1) .45s,height 0s;color:#3c3c4a;overflow:hidden}
.env .front{inset:0;z-index:3;background:linear-gradient(120deg,#b9121f,#8a0a14);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:6px}
.env .front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0000 49.5%,#0003 50%,#0000 50.5%);clip-path:polygon(0 100%,50% 56%,100% 100%)}
.env .flap{left:0;right:0;top:0;height:58%;z-index:4;transform-origin:top;background:linear-gradient(#c1202c,#9a0d19);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .7s ease-in-out,z-index 0s .35s;filter:drop-shadow(0 4px 4px #0006)}
.env .seal{width:19%;left:40.5%;top:44%;z-index:6;transition:transform .5s,opacity .4s;filter:drop-shadow(0 3px 4px #0007)}
.env.open .flap{transform:rotateX(180deg);z-index:1}
.env.open .seal{transform:scale(1.6) translateY(-30%);opacity:0}
.env.open .card{transform:translateY(-52%) scale(1.04)}
.env.cream .back{background:linear-gradient(160deg,#f4e7c8,#e3d0a4)}
.env.cream .front{background:linear-gradient(120deg,#f7ecd0,#e8d7ae)}
.env.cream .flap{background:linear-gradient(#f3e5c4,#e5d3a6)}
.env.cream .card{color:#7a0e18}
.cardtxt{font-family:'Mrs Saint Delafield';font-size:52px;line-height:.9;text-align:center;color:#2f3b5e}
.land .cardtxt{font-size:92px}
.hint{font:700 28px 'Caveat';color:var(--ink);text-align:center;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.white{color:#fff;text-shadow:0 3px 8px #5b0a1288}
/* text */
.big{color:var(--ink)}
.port .big{font-size:50px}.land .big{font-size:84px}
.panel{background:#6b0f17;color:#f5ecda;border-radius:16px;padding:20px 20px 22px;box-shadow:0 14px 30px #0006;outline:2px dashed #f5ecda88;outline-offset:-9px}
.panel h3{margin:0 0 12px;font:700 15px 'Quicksand';letter-spacing:2px;text-align:center}
.panel .ln{font:700 21px/1.25 'Caveat';margin:0 0 9px;padding-left:18px;position:relative;clip-path:inset(0 100% 0 0)}
.panel .ln::before{content:"•";position:absolute;left:2px}
.land .panel .ln{font-size:31px;margin-bottom:13px}.land .panel h3{font-size:20px;margin-bottom:18px}
.on .panel .ln{animation:wr 1s forwards cubic-bezier(.4,0,.3,1)}
@keyframes wr{to{clip-path:inset(0 0 0 0)}}
.frm{background:#7c0f19;padding:12px;box-shadow:0 12px 26px #0007;border-radius:3px;outline:2px solid #f5ecda;outline-offset:-6px}
.frm img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
/* letter */
.film{background:#14090a;padding:14px 18px;box-shadow:0 10px 24px #0007;display:flex;flex-direction:column;gap:10px;position:absolute}
.film::before,.film::after{content:"";position:absolute;top:6px;bottom:6px;width:7px;background:repeating-linear-gradient(#f5ecda 0 8px,#0000 8px 16px)}
.film::before{left:5px}.film::after{right:5px}
.film img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.35) contrast(1.05)}
.film.v img{aspect-ratio:3/4}
.letter{color:#7a0e18;font-family:'La Belle Aurore',cursive;padding:26px 24px;line-height:1.7}
.port .letter{font-size:21px}.land .letter{font-size:31px;padding:44px 56px}
.letter .cur::after{content:"|";animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.mini{position:absolute;color:#c4101e;font-size:18px}
.btn{display:inline-block;background:#f5ecda;color:#7a0e18;font:700 18px 'Quicksand';padding:14px 24px;border-radius:40px;border:0;text-decoration:none;box-shadow:0 5px 0 #a89a7c,0 10px 18px #0006;cursor:pointer}
.cursive{font-family:'Mrs Saint Delafield';text-align:center;line-height:.9}
#petals{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
#petals i{position:absolute;top:-30px;width:14px;height:18px;border-radius:70% 10% 70% 10%;background:linear-gradient(135deg,#e5303a,#7d0712);opacity:.75;animation:fall linear infinite}
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(540deg)}}
.pop{animation:popin .8s cubic-bezier(.2,1.4,.4,1) both}
@keyframes popin{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.float{animation:flo 5s ease-in-out infinite}
@keyframes flo{50%{translate:0 -8px}}
.sway{animation:sw 6s ease-in-out infinite;transform-origin:50% 0}
@keyframes sw{50%{transform:rotate(2deg)}}
/* Texture layers are decoration, never tap targets. */
.bg-knit::after,.bg-wine::before{pointer-events:none}
/* Keep decorative envelope pieces inside one generous, accessible hit target. */
.env{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.env>*{pointer-events:none}
.env:focus-visible{outline:3px solid #c9a23a;outline-offset:10px}