*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:#430305;font-family:Arima,serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.bigbg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.card{position:relative;z-index:1;margin:0 auto;height:calc(var(--vh,1svh)*100);max-width:500px;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);background:#430305}
.deck{position:relative;height:100%;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.deck .wishes,.deck input,.deck textarea{user-select:text;-webkit-user-select:text}
.track{height:100%;will-change:transform}
.card.opened .deck{height:calc(100% - 60px)}
.autobar{position:absolute;top:0;left:0;height:4px;width:100%;background:#90a655;z-index:35;transform-origin:left;pointer-events:none}
.slide{position:relative;height:100%;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.slide>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;-webkit-user-drag:none}
.deck img{-webkit-user-drag:none}
.slide.moving iframe{pointer-events:none}
.ct{width:100%;padding:0 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.t{white-space:pre-line;padding-top:4px;padding-bottom:4px}
.s{font-family:"Pinyon Script",cursive;font-weight:400}
b{font-weight:700}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font:12px/1 Fahkwang;color:#fefac2;border:2px solid #e8d9aa;border-radius:5px;background:var(--bg,rgba(75,54,31,.6));overflow:hidden}
.btn.sm{padding:8px 16px;font-size:11px}
.btn.ig{color:#f3ecd6;border-color:#a67a5e}
.btn.pill{border-radius:25px;color:#fff;--bg:rgba(147,120,66,.7);min-width:10rem}
.ic{display:inline-block;width:1.2em;height:1.2em;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

.pair{display:flex;justify-content:center;gap:28px;margin:36px 0}
.ph{position:relative;width:150px;height:150px}
.ph .pp{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ph .fr{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.25);z-index:1;pointer-events:none}

.timer{display:grid;grid-template-columns:repeat(4,min(80px,calc((100vw - 80px) / 4)));gap:8px;margin:20px 0 4px}
.timer div{aspect-ratio:1;border-radius:8px;border:2px solid #e8d9aa;background:rgba(75,54,31,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fefac2}
.timer b{font:400 36px/1 Arima}
.timer span{font:11px Arima}

.map{border:3px solid #cdb483;border-radius:10px;overflow:hidden;margin-bottom:20px;line-height:0}
.map iframe{border:0;height:200px;aspect-ratio:16/9;max-width:calc(100vw - 46px)}

.gal{width:320px;display:flex;flex-direction:column;gap:8px}
.gal>div{display:flex;gap:8px}
.gal button{flex:1;height:150px;border-radius:8px;overflow:hidden;padding:0}
.gal .sm button{height:100px}
.gal img{width:100%;height:100%;object-fit:cover;display:block}

.nav{position:absolute;left:0;right:0;bottom:0;height:60px;background:#fff;overflow:hidden;z-index:30;touch-action:none;user-select:none;-webkit-user-select:none}
.navtrack{display:flex;height:100%;will-change:transform}
.nav button{flex:0 0 var(--bw,33.333%);-webkit-user-drag:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#b88391;transition:color .3s}
.nav button.on{color:#831013}
.nav .ic{width:16px;height:16px}
.nav span:last-child{font-size:12px;line-height:1;white-space:nowrap}

.music{position:absolute;right:16px;bottom:80px;z-index:40;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:grid;place-items:center}
.music::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#ef4444;transition:background .3s}
.music.off::before{background:#9ca3af}
.music .ic{position:relative;width:20px;height:20px;color:#fff}
.music .slash{position:absolute;width:20px;height:2px;background:#fff;transform:rotate(42deg);display:none}
.music.off .slash{display:block}

.dlg{border:0;margin:0;width:100vw;max-width:100vw;height:100svh;max-height:100svh;background:#430305;color:#fff;padding:0;overflow:hidden}
.dlg[open]{display:grid;place-items:center;animation:fade .5s}
.dlg::backdrop{background:#430305}
.dlg .x{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);opacity:.8;z-index:2}
.dlg .x .ic{width:28px;height:28px;color:#fff}
.rail{display:flex;width:100%;height:calc(100svh - 120px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px}
.st img{width:160px;height:160px;object-fit:cover;margin-bottom:24px}
.st>p{font:11px "Open Sans",sans-serif;margin-bottom:40px}
.st>div{font:11px/1.5 "Open Sans",sans-serif;text-align:center;max-width:420px;margin-bottom:48px}
.st br{display:block;content:"";height:24px}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.dots{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 24px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid #e8d9aa;transition:background .3s}
.dots i.on{background:#e8d9aa}
.gift{text-align:center;color:#f1e9cd;padding:24px;max-width:360px;width:100%}
.gift .box{margin-top:8px;padding:24px 16px;border:2px solid #e8d9aa;border-radius:12px;background:rgba(75,54,31,.45);font:15px/1.5 Arima;white-space:pre-line;display:flex;flex-direction:column;align-items:center;gap:6px}
.gift .bank{font:700 13px Fahkwang;letter-spacing:.15em;color:#e8d9aa}
.gift .no{font:700 24px Arima;letter-spacing:.06em;color:#fff}
.gift .btn{margin-top:12px}

.wishes{touch-action:pan-y;overscroll-behavior:contain;width:100%;max-width:24rem;max-height:min(400px,46svh);overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;text-align:left}
.wishes::-webkit-scrollbar{display:none}
.wishes article{border-radius:12px;background:rgba(255,255,255,.9);padding:12px 16px;font-family:Arima;color:#1f2937}
.wishes header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.wishes header b{font-size:14px;text-transform:capitalize}
.wishes header i{font:normal 10px "Open Sans",sans-serif;color:#6b7280}
.wishes header em{margin-left:auto;font:normal 10px "Open Sans",sans-serif;padding:2px 8px;border-radius:999px;background:#f3e8d0;color:#6b4423}
.wishes article p{font-size:12px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.wishes .empty{color:#faf7ed;text-align:center;font-size:14px;padding:14px;border-radius:12px;background:rgba(56,16,17,.55)}
.form{display:flex;flex-direction:column;gap:12px;text-align:left}
.form>.s{text-align:center}
.form label{display:flex;flex-direction:column;gap:6px;font:600 12px Fahkwang;letter-spacing:.05em;color:#e8d9aa}
.form input:not([type=radio]),.form textarea{font:15px Arima;padding:10px 12px;border-radius:8px;border:2px solid #a67a5e;background:#fffaf0;color:#2a0d0d;resize:vertical}
.form fieldset{border:0;display:flex;flex-direction:column;gap:4px}
.form legend{font:600 12px Fahkwang;letter-spacing:.05em;color:#e8d9aa;margin-bottom:8px;width:100%}
.form .r{flex-direction:row;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:8px;border:1px solid rgba(232,217,170,.35);font:15px Arima;letter-spacing:0;color:#f1e9cd}
.form .r input{accent-color:#e8d9aa;width:18px;height:18px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .err{color:#fca5a5;font-size:13px;min-height:1em;text-align:center}
.form .btn{align-self:center}
.form .btn[disabled]{opacity:.6}

.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:rgba(0,0,0,.8);color:#fff;font:13px Arima;padding:8px 16px;border-radius:999px;opacity:0;transition:.3s;pointer-events:none;z-index:100}
.toast.on{opacity:1;transform:translate(-50%,0)}

.rd,.ru,.rl,.rr,.zo{opacity:0}
.slide.in .rd,.slide.in .ru,.slide.in .rl,.slide.in .rr,.slide.in .zo{opacity:1;animation:var(--a) var(--d,3s) ease both}
.rd{--a:rise-down}.ru{--a:rise-up}.rl{--a:rise-left}.rr{--a:rise-right}.zo{--a:zoom-out}
@keyframes rise-down{0%{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes rise-up{0%{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes rise-left{0%{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes rise-right{0%{transform:translateX(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes zoom-out{0%{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rd,.ru,.rl,.rr,.zo{opacity:1}.slide.in .rd,.slide.in .ru,.slide.in .rl,.slide.in .rr,.slide.in .zo{animation:none}}
@media(max-height:700px){.ct{transform:scale(.88)}}
@media(max-height:620px){.ct{transform:scale(.78)}}