:root{color-scheme:light;--paper:#effbfa;--tiffany:#81d8d0;--ink:#176b65;--deep:#124f4b;--white:#fff; font-family:Georgia,'Times New Roman',serif;color:var(--deep);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 20%,#fff 0,transparent 65%),var(--paper)}main{min-height:100svh;display:grid;place-items:center;padding:38px 20px 24px}section{width:100%;max-width:560px;text-align:center}[hidden]{display:none!important}
.envelope-stage{height:235px;display:grid;place-items:center;perspective:1000px}.envelope{position:relative;width:310px;height:194px;filter:drop-shadow(0 18px 18px #176b651b);isolation:isolate}.envelope-back{position:absolute;inset:0;background:#57bcb3;border-radius:5px;z-index:0}.envelope-front{position:absolute;inset:0;z-index:3;background:linear-gradient(150deg,#96e1d9,#81d8d0);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:5px}.flap{position:absolute;inset:0;background:#a5e7df;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .8s ease,z-index 0s .35s;z-index:5;backface-visibility:visible}.ribbon{position:absolute;inset:0 auto 0 48%;width:15px;background:#ffffffb3;z-index:4}.seal{position:absolute;top:77px;left:132px;width:47px;height:47px;border-radius:50%;background:var(--ink);color:white;display:flex;align-items:center;justify-content:center;font-style:italic;font-size:24px;z-index:6;border:3px double #ade6dc;box-shadow:0 2px 4px #176b6533;transition:opacity .2s}.seal span{font-size:11px;margin-top:12px}.address{position:absolute;bottom:23px;inset-inline:0;font-size:25px;font-style:italic;z-index:6;letter-spacing:.3px}.letter{position:absolute;inset:12px 17px 10px;background:white;z-index:1;padding:24px 12px;font-size:16px;display:flex;flex-direction:column;gap:6px;transition:transform 1s .45s ease;box-shadow:0 0 0 1px #176b650c}.letter strong{font-size:23px;font-weight:normal;font-style:italic}.letter-heart{font-size:32px;color:var(--ink)}.envelope.open .flap{transform:rotateX(180deg);z-index:0}.envelope.open .seal{opacity:0}.envelope.open .letter{transform:translateY(-100px)}
.secret{font-family:'Segoe UI',Arial,sans-serif;font-size:12px;letter-spacing:.25px;margin:6px 0 31px;color:#427d77}h1{font-weight:normal;font-size:clamp(20px,4.8vw,25px);line-height:1.45;max-width:420px;margin:0 auto 18px}.equation{padding:10px 0 17px;display:flex;flex-direction:column;gap:13px;font-size:24px}math{margin:0;line-height:1.7}form{max-width:405px;margin:auto;font-family:'Segoe UI',Arial,sans-serif}label{display:block;text-align:left;font-size:12px;margin:8px 0;color:#427d77}.answer-row{display:flex;gap:9px}input,button{font:inherit;border-radius:7px;min-height:47px}input{width:0;flex:1;border:1px solid #b6dcd7;background:#ffffffd9;padding:11px 13px;color:var(--deep);font-size:16px}input::placeholder{color:#70958f}button{background:var(--ink);color:white;border:1px solid var(--ink);padding:11px 19px;cursor:pointer;font-family:'Segoe UI',Arial,sans-serif;font-size:14px;white-space:nowrap}button span{margin-left:6px}button:hover{background:var(--deep)}button:disabled{cursor:wait;opacity:.65}:focus-visible{outline:3px solid #318e85;outline-offset:4px}#message{min-height:36px;line-height:1.5;font-size:13px;margin:10px 0 0;color:#94504b}.shake{animation:shake .38s ease}#challenge{transition:opacity .35s}body.opening #challenge{opacity:0;pointer-events:none}
#gift{max-width:760px;animation:reveal .7s ease both}h2{font-size:clamp(28px,6vw,42px);font-weight:normal;line-height:1.2;margin:0 0 25px}h2 span{font-style:italic}h2:focus{outline:none}.video-frame{border:6px solid white;border-radius:6px;box-shadow:0 16px 45px #176b651a;background:#124f4b}video{display:block;width:100%;max-height:68svh;min-height:160px;object-fit:contain}#play-button,#retry-button{margin-top:18px}#video-message{font:14px 'Segoe UI',Arial,sans-serif;line-height:1.5}.signoff{font-size:14px;font-style:italic;margin-top:24px;color:#427d77}
@keyframes shake{25%{transform:translateX(-7px) rotate(-1deg)}75%{transform:translateX(7px) rotate(1deg)}}@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.bow{position:absolute;top:66px;left:50%;z-index:6;transition:opacity .2s}.bow::before,.bow::after{content:'';position:absolute;width:34px;height:22px;border:6px solid #fff;border-radius:60% 65% 50% 60%;transform:rotate(25deg);right:-2px}.bow::after{left:-2px;right:auto;transform:rotate(-25deg)}.envelope.open .bow{opacity:0}
@media(max-width:400px){main{padding:28px 16px 18px}.envelope{width:280px;height:175px}.envelope-stage{height:210px}.seal{left:118px;top:68px}.address{font-size:23px;bottom:20px}.secret{font-size:11px;margin-bottom:25px}.equation{font-size:21px;gap:11px}button{padding-inline:14px}.letter{padding-top:19px}.letter strong{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:400px){.bow{top:57px}}
.video-frame{width:fit-content;max-width:100%;margin-inline:auto}video{width:auto;max-width:100%}
.hint-today,.hint-instruction{display:block}.hint-instruction{font-size:clamp(15px,4.5vw,21px);white-space:nowrap;margin-top:3px}
/* Embed complete Vietnamese fonts, including genuine italic glyphs. */
@font-face{font-family:'Birthday Lora';src:url('/fonts/lora.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'Birthday Lora';src:url('/fonts/lora-italic.ttf') format('truetype');font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:'Birthday Archivo';src:url('/fonts/archivo.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{font-family:'Birthday Lora',serif;font-synthesis:none}
.secret,form,button,#video-message{font-family:'Birthday Archivo',Arial,sans-serif}
.signoff{font-size:15px;line-height:1.7}
.hint-instruction{font-size:clamp(14px,4vw,19px)}