*{box-sizing:border-box} :root{color-scheme:light;--wine:#803641}body{margin:0;background:#281a14;color:#eee0c9;font-family:Georgia,serif;min-height:100vh;background-image:radial-gradient(ellipse at 50% 40%,#68452a33,transparent 65%),repeating-linear-gradient(2deg,#ffffff02 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,#150d09 0,#3e281b 3px,#2f2017 65px,#1c120e 68px,#40281a 70px);overflow-x:hidden}body:after{content:'';position:fixed;inset:0;box-shadow:inset 0 0 180px #080403b0;pointer-events:none;z-index:0}.still-life{position:absolute;inset:0;overflow:hidden;min-height:1050px;pointer-events:none}main{position:relative;z-index:1;max-width:1100px;margin:auto;text-align:center;padding:65px 24px 24px}header .eyebrow{font:10px Arial,sans-serif;letter-spacing:4px;color:#d3b795}h1{font-size:clamp(32px,4.5vw,53px);font-weight:normal;line-height:1.18;margin:23px 0 16px;text-shadow:0 2px 12px #0006}h1 em{color:#d7b19c;font-weight:normal}header p{font-style:italic;color:#c2ac96;font-size:15px}.letter-stage{margin:60px auto 0;max-width:650px;padding-top:50px;transition:padding .7s}.envelope{position:relative;height:330px;isolation:isolate;filter:drop-shadow(0 25px 25px #0007)}.envelope-back{position:absolute;inset:0;background:#d6c5a5;border-radius:5px}.flap{position:absolute;inset:0 0 auto;height:200px;background:linear-gradient(145deg,#f3e6c9,#d6c4a0);clip-path:polygon(0 0,100% 0,50% 98%);transform-origin:top;transition:transform .65s,z-index .3s;z-index:5}.paper{--paper:#f3e9d2;--ink:#803641;background-color:var(--paper);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='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23866e43' opacity='.10' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:relative;margin:0 auto;width:90%;height:285px;overflow:hidden;padding:25px 45px;color:#493629;text-align:left;z-index:2;border-radius:3px;transform:translateY(10px);transition:transform .8s .2s,height .8s .2s;outline:none;box-shadow:0 0 12px #48301825}.paper-mark{display:block;text-align:center;color:var(--ink);font-size:25px}h2{font-style:italic;font-weight:normal}.paper h2{color:var(--ink);font-size:clamp(28px,4vw,41px);margin:15px 0 22px}#message{white-space:pre-wrap;line-height:1.75;overflow-wrap:anywhere}.sign{margin-top:30px;text-align:right;color:var(--ink);font-style:italic;font-size:24px;line-height:1.5}.sign strong{display:block;font-weight:normal;font-size:18px}.paper-end{text-align:center;padding-top:30px;color:#9d7e59}.envelope-front{position:absolute;inset:0;z-index:4;background:linear-gradient(32deg,transparent 49.6%,#b6a27d66 50%,transparent 50.5%),linear-gradient(-32deg,transparent 49.6%,#b6a27d66 50%,transparent 50.5%),linear-gradient(155deg,#f2e5c8,#dacaab);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);border-radius:4px}.seal{position:absolute;top:135px;left:calc(50% - 38px);border:3px solid #68222a;background:radial-gradient(circle at 35% 20%,#b35d60,#722a31 70%);box-shadow:0 4px 9px #32120b66,inset 0 0 0 4px #923c43,inset 0 0 0 6px #5d1c23;width:76px;height:76px;border-radius:43% 48% 45% 48%;z-index:6;color:#d09488;cursor:pointer;transition:transform .3s,opacity .3s;font:40px Georgia}.seal:hover{transform:scale(1.07)}.envelope-label{position:absolute;bottom:41px;left:0;right:0;z-index:5;color:#8a7152;font-style:italic;font-size:17px;pointer-events:none}.opened{height:auto;min-height:660px;padding-bottom:120px}.opened .flap{transform:rotateX(180deg);z-index:1}.opened .paper{height:auto;min-height:570px;transform:translateY(-70px);z-index:3;overflow:visible}.opened .envelope-back{top:auto;height:330px;bottom:0}.opened .envelope-front{top:auto;height:240px;bottom:0}.opened .seal{opacity:0;pointer-events:none}.opened .envelope-label{bottom:32px}.invitation{margin-top:32px}button{font:inherit} .invitation button{background:none;border:0;color:#e5cfb3;font-size:17px;font-style:italic;cursor:pointer;padding:12px}.invitation button span{margin-left:15px;color:#d69b8b}.invitation p{font:9px Arial,sans-serif;letter-spacing:3px;color:#a88d71;margin:20px 0}footer{font:italic 12px Georgia;color:#9b826d;margin-top:65px}footer span{color:#c38a7e;margin-left:8px}.secret{position:fixed;right:0;top:0;width:58px;height:58px;z-index:20;border:0;opacity:0;cursor:default}.secret:focus-visible{opacity:1;background:#eadcc7;color:#803641;outline:2px solid #803641}.secret:focus-visible:after{content:'⚙'}.vinyl{position:absolute;left:calc(50% - 610px);top:340px;width:360px;height:360px;border-radius:50%;background:repeating-radial-gradient(circle,#151415 0 2px,#262324 3px,#101010 4px);box-shadow:5px 20px 25px #0009;transform:rotate(-20deg)}.vinyl:before{content:'';position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,#171313 0 5px,#a5956b 6px 20px,#d3c7a4 21px);box-shadow:0 0 0 2px #000}.photographs{position:absolute;right:calc(50% - 550px);top:240px;transform:rotate(14deg);width:210px;height:270px}.photographs i{position:absolute;inset:0;background:linear-gradient(110deg,#b9a57588,#d9cbb499),radial-gradient(ellipse at 70% 15%,#e6c999,#6b7058 50%,#40382c);border:12px solid #e9e2d5;border-bottom-width:45px;box-shadow:0 10px 20px #0006;transform:rotate(10deg)}.photographs i:nth-child(2){transform:rotate(-13deg)}.photographs i:nth-child(3){transform:rotate(-2deg);background:radial-gradient(ellipse at 65% 15%,#e0c596aa,transparent 40%),linear-gradient(60deg,#4d4b32,#a1966d,#cfb68d)}.rose{position:absolute;width:250px;filter:drop-shadow(5px 15px 10px #0008)}.rose-one{top:650px;left:calc(50% - 530px);transform:rotate(-20deg);z-index:2}.rose-two{right:-40px;top:760px;width:360px;filter:sepia(.3) brightness(.6);transform:rotate(125deg)}.rose-three{right:20px;top:-150px;width:300px;filter:brightness(.5);transform:rotate(40deg)}.candle{position:absolute;right:12%;top:-20px;width:100px;height:170px;background:radial-gradient(ellipse at 50% 80%,#d0a85d,#4a3019 55%,#b18d50 59%,#3a281b 64%,transparent 66%);transform:rotate(12deg)}.candle span{position:absolute;left:29px;top:0;width:42px;height:110px;background:linear-gradient(90deg,#bbae8d,#f4e8c9,#c7ba99);border-radius:5px}.ribbon{position:absolute;bottom:0;left:10%;height:160px;width:80%;border:25px solid #aa8b6b30;border-radius:50%;transform:rotate(-35deg)}dialog{border:1px solid #cbb997;border-radius:12px;background:#f7f1e6;color:#4d392f;padding:36px;width:min(680px,calc(100% - 28px));max-height:90vh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#160d09b8;backdrop-filter:blur(7px)}dialog h2{font-size:32px;color:#803641;margin:15px 0}dialog p{line-height:1.5;font-size:14px}.modal-kicker{font:9px Arial;letter-spacing:3px;color:#927854}.close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:28px;color:#765c4b;cursor:pointer}label{display:flex;flex-direction:column;gap:7px;font:12px Arial,sans-serif;color:#765d4b;margin:18px 0}input,textarea,select{width:100%;background:#fffaf2;border:1px solid #d8c8b2;border-radius:5px;padding:11px;color:#48372d;font:15px Georgia}textarea{resize:vertical;line-height:1.6}input[type=color]{padding:3px;height:42px}input[type=range]{padding:0;accent-color:#803641}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #b98064;outline-offset:4px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.design-fields{grid-template-columns:2fr 1.5fr .6fr .6fr}.actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.primary,.secondary{padding:13px 20px;border-radius:5px;cursor:pointer;border:1px solid #803641}.primary{background:#803641;color:#fff4e5}.secondary{color:#803641;background:transparent}button:disabled{opacity:.5;cursor:wait}.error,#save-status{color:#9e303f}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#f4e9d5;color:#613b32;padding:15px 24px;border-radius:8px;z-index:30;transition:.3s;pointer-events:none;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:650px){main{padding:48px 18px 25px}.eyebrow{letter-spacing:2px!important;font-size:8px!important}.letter-stage{margin-top:55px}.envelope{height:230px}.flap{height:145px}.paper{padding:24px;height:200px}.seal{top:90px;width:65px;height:65px;left:calc(50% - 32px)}.envelope-label{bottom:25px;font-size:14px}.opened{height:auto;min-height:600px;padding-bottom:80px}.opened .paper{min-height:500px}.opened .envelope-front{height:180px}.opened .envelope-back{height:230px}.vinyl{left:-160px;top:300px;width:290px;height:290px}.photographs{right:-80px;top:280px;width:160px;height:210px}.rose-one{left:-70px;top:610px;width:190px}.rose-two{right:-130px}.fields{grid-template-columns:1fr;gap:0}.design-fields{grid-template-columns:1fr 1fr;gap:10px}dialog{padding:28px 22px}footer{margin-top:45px}.sign{font-size:21px}#message{font-size:clamp(16px,4.6vw,22px)!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Fixed numeric endpoints allow the sheet and its surrounding layout to animate
   together. The flap finishes opening before the paper starts to emerge. */
.letter-stage{width:100%;padding-top:clamp(70px,14vw,130px);margin-top:20px}
.envelope{--body-height:330px;--sheet-height:700px;height:var(--body-height);min-height:0;padding-bottom:0;perspective:1200px;transition:height 1s cubic-bezier(.22,.65,.25,1) 0s}
.envelope-back,.opened .envelope-back{inset:auto 0 0;height:var(--body-height)}
.flap,.opened .flap{inset:auto 0 auto;top:calc(100% - var(--body-height));height:calc(var(--body-height)*.61);transform:rotateX(0deg);z-index:5;transition:transform .6s ease .95s,z-index 0s 1.25s}
.paper,.opened .paper{height:calc(var(--body-height) - 35px);min-height:0;overflow:hidden;transform:translateY(10px);z-index:2;opacity:0;transition:height 1s cubic-bezier(.22,.65,.25,1),transform 1s cubic-bezier(.22,.65,.25,1),opacity .25s .8s}
/* Keep the front edge below the whole sheet, including the signature.
   Both endpoints use the same measured sheet height at every viewport width. */
.opened{height:calc(var(--sheet-height) + var(--body-height) - 40px);min-height:0;padding-bottom:0;transition-delay:.6s}
.opened .flap{transform:rotateX(180deg);z-index:1;transition:transform .6s ease,z-index 0s .3s}
.opened .paper{height:var(--sheet-height);transform:translateY(-40px);opacity:1;transition:height 1s cubic-bezier(.22,.65,.25,1) .6s,transform 1s cubic-bezier(.22,.65,.25,1) .6s,opacity .3s .6s}
.envelope-front,.opened .envelope-front{inset:auto 0 0;height:var(--body-height)}
.seal{top:auto;bottom:calc(var(--body-height)*.43 - 38px)}
.envelope-label,.opened .envelope-label{bottom:32px}
.paper h2,.sign,.sign strong,header p{overflow-wrap:anywhere}
#message{font-size:clamp(16px,4.5vw,var(--message-size,22px))!important}
.fields>*{min-width:0}
@media(max-width:650px){
 main{padding:36px 16px 24px}
 h1{font-size:clamp(27px,7.3vw,40px)}
 header p{font-size:14px;line-height:1.6}
 .letter-stage{margin-top:8px}
 .envelope{--body-height:clamp(180px,59vw,300px)}
 .paper{width:92%;padding:24px clamp(18px,5vw,30px)}
 .paper h2{font-size:clamp(26px,7vw,36px)}
 .seal{bottom:calc(var(--body-height)*.43 - 32px)}
 .envelope-label,.opened .envelope-label{bottom:22px;font-size:13px}
 .invitation button{font-size:16px;min-height:48px}
 .invitation p{font-size:8px;letter-spacing:1.8px;line-height:1.8}
 dialog{max-height:calc(100dvh - 24px);overflow-y:auto}
 input,textarea,select{font-size:16px}
 .actions{flex-wrap:wrap}.actions button{flex:1}
 .rose-one{width:140px;left:-75px}
}
@media(prefers-reduced-motion:reduce){.envelope,.flap,.paper,.opened,.opened .flap,.opened .paper{transition:none!important}}

/* Indicate that the hidden admin entry can be clicked. */
#admin-entry{cursor:pointer}
.backup-actions{border-top:1px solid #d8c8b2;padding-top:18px;align-items:center}
.restore-label{margin:0;cursor:pointer;font:14px Georgia,serif;text-align:center;position:relative}
.restore-label input{position:absolute;inset:0;opacity:0;cursor:pointer}
.restore-label:focus-within{outline:2px solid #b98064;outline-offset:4px}