/* base reset */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one full-screen paper "page" at a time, like the story-style video; swipe or tap arrows to turn pages */
:root{
  --paper:#FFF1F4;
  --paper-2:#FDE2EA;
  --wine:#8C1F4B;
  --olive:#C04A74;
  --sage:#F1B3C6;
  --ink:#4A2C36;
  --muted:#8C6571;
  --white:#FFFFFB;
  --f-display:"Yellowtail","Brush Script MT",cursive;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  --f-body:"Patrick Hand","Comic Sans MS","Segoe Print",sans-serif;
  --f-arab:"Amiri","Traditional Arabic","Times New Roman",serif;
  color-scheme:only light;
}
/* keep the same light look even when the phone is in dark mode */
:root,:root[data-theme="dark"],:root[data-theme="light"]{color-scheme:only light}
@media (prefers-color-scheme:dark){:root{color-scheme:only light}html,body{background-color:var(--paper)!important;color:var(--ink)!important}}
input,textarea,button,select{color-scheme:only light}
/* top bar (page arrows, progress, page number) and floating music icon removed */
.topbar,.fab{display:none!important}
/* upload card */
#gwish{resize:none;height:88px;min-height:88px;max-height:88px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
@media (max-height:700px){#gwish{height:68px;min-height:68px;max-height:68px}}
/* cover hearts: heartbeat on the main heart, floating sprinkles */

@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(.96)}36%{transform:scale(1.18)}52%{transform:scale(1)}}
#cover .sprinkle{overflow:visible}
#cover .sprinkle use{transform-box:fill-box;transform-origin:center;animation:floaty 2.4s ease-in-out infinite}
#cover .sprinkle use:nth-child(2){animation-delay:.8s}
#cover .sprinkle use:nth-child(3){animation-delay:1.6s}
#cover .sprinkle.r use:nth-child(1){animation-delay:.4s}
#cover .sprinkle.r use:nth-child(2){animation-delay:1.2s}
#cover .sprinkle.r use:nth-child(3){animation-delay:2s}
@keyframes floatyNR{0%,100%{transform:translateY(0) scale(1);opacity:.85}30%{transform:translateY(-5px) scale(1.25);opacity:1}60%{transform:translateY(-7px) scale(1.1)}}
@keyframes floaty{0%,100%{transform:translateY(0) scale(1) rotate(0);opacity:.85}25%{transform:translateY(-4px) scale(1.35) rotate(-8deg);opacity:1}40%{transform:translateY(-6px) scale(1.05) rotate(4deg)}55%{transform:translateY(-8px) scale(1.3) rotate(0);opacity:1}80%{transform:translateY(-3px) scale(1);opacity:.7}}
@media (prefers-reduced-motion:reduce){#cover use,#penutup use{animation:none!important}}

.story q{font-style:italic;color:var(--wine);quotes:"\201C" "\201D"}
/* ---------- small-detail animations (off when the viewer prefers reduced motion) ---------- */
#kisah .pola.p1{--r:5deg}#kisah .pola.p2{--r:2deg}#kisah .pola.p3{--r:-6deg}#kisah .pola.p4{--r:-6deg}
@media (prefers-reduced-motion:no-preference){
  /* cover: candle flame flickers, "Aku dong!" bobs */
  .candle path:first-child{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.4s ease-in-out infinite}
  .q2{animation:bob 3s ease-in-out infinite}
  /* salam: play button glows until music starts */
  .play:not([aria-label="Jeda musik"]){animation:ring 2s ease-out infinite}
  /* mempelai: heart on the red thread beats, portraits float gently */
  .thread path:nth-child(2){transform-box:fill-box;transform-origin:center;animation:beat 1.8s ease-in-out infinite}
  .person .oval{animation:drift 5s ease-in-out infinite}
  .person.b .oval{animation-delay:-2.5s}
  /* save the date: disco ball sways on its string, sparkles twinkle, date heart beats */
  .page.active .bloom .fl{animation:bloomOpen 1s cubic-bezier(.3,1.5,.5,1) both,flSway 4s ease-in-out infinite}
  .page.active .bloom .f1{animation-delay:.35s,1.4s}
  .page.active .bloom .f2{animation-delay:.6s,1.8s}
  .page.active .bloom .f3{animation-delay:.85s,2.2s}
  .page.active .bloom .bud{animation-delay:1.05s,2.6s}
  .page.active .bloom .fl-in{animation:bloomInner 1.1s ease-out both;animation-delay:inherit}
  .page.active .bloom .f1 .fl-in{animation-delay:.8s}.page.active .bloom .f2 .fl-in{animation-delay:1.05s}
  .page.active .bloom .stems path{stroke-dasharray:120;stroke-dashoffset:120;animation:orn 1s ease-out .1s forwards}
  .page.active .bloom .lf{transform-box:fill-box;transform-origin:100% 100%;animation:leafIn .7s ease-out .5s both}
  .bloom .spk{animation:twinkle 1.6s ease-in-out infinite}
  .cal .heart{animation:calbeat 1.8s ease-in-out infinite}
  /* timeline: rings wiggle, glasses clink */
  .zig .rings,.cd-title .rings{transform-origin:50% 60%;animation:wiggle 3s ease-in-out infinite}
  .zig .cheers{transform-origin:50% 100%;animation:clink 2.6s ease-in-out infinite}
  /* venue: chandelier sways, table candles flicker */
  .chand-art,.page.active>.in>.chand-art{transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
  .chand-art .line-w,.venue-art .line-w{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.2s ease-in-out infinite}
  .venue-art .line-w:nth-of-type(2n){animation-delay:-.5s}
  /* our story: polaroids swing like hung photos, timeline hearts pulse */
  #kisah .pola{transform-origin:50% 0;animation:polasway 5s ease-in-out infinite}
  #kisah.active .pola{animation:polaDrop .8s cubic-bezier(.3,1.5,.5,1) both,polasway 5s ease-in-out .8s infinite}
  #kisah.active .pola.p1{animation-delay:.1s,.9s}#kisah.active .pola.p2{animation-delay:.3s,1.1s}#kisah.active .pola.p3{animation-delay:.5s,1.3s}#kisah.active .pola.p4{animation-delay:.7s,1.5s}
  #kisah .pola.p2{animation-delay:-1.2s}#kisah .pola.p3{animation-delay:-2.4s}#kisah .pola.p4{animation-delay:-3.6s}
  .story li::before{animation:beat 2.2s ease-in-out infinite}
  .story li:nth-child(2)::before{animation-delay:.3s}.story li:nth-child(3)::before{animation-delay:.6s}.story li:nth-child(4)::before{animation-delay:.9s}
  /* gifts: card peeks out of the envelope */
  .envelope .card{animation:peek 3.5s ease-in-out infinite}
  #hadiah.active .envelope .card{animation:cardRise 1.1s cubic-bezier(.3,1.3,.5,1) 1.5s both,peek 3.5s ease-in-out 2.8s infinite}
  /* countdown: seconds tick */
  #cs{display:inline-block;animation:tick 1s ease-out infinite}
  /* momen: camera hearts float, lens shines */
  .cam-art use{transform-box:fill-box;transform-origin:center;animation:floatyNR 2.6s ease-in-out infinite}
  .cam-art use:nth-of-type(2){animation-delay:.7s}.cam-art use:nth-of-type(3){animation-delay:1.4s}
  .cam-art circle:nth-of-type(2){transform-box:fill-box;transform-origin:center;animation:shutter 3s ease-in-out infinite}
  .gal-empty use{transform-box:fill-box;transform-origin:center;animation:beat 1.8s ease-in-out infinite}
  /* footer: active icon pops, scroll cue nudges */
  .dock a.active svg{animation:pop .45s ease-out}
  .more.show svg{animation:nudge 1.4s ease-in-out infinite}
}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(.92,1.08) rotate(-3deg)}50%{transform:scale(1.05,.94) rotate(2deg)}75%{transform:scale(.96,1.05) rotate(-1deg)}}
@keyframes bob{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(192,74,116,.45)}70%{box-shadow:0 0 0 12px rgba(192,74,116,0)}100%{box-shadow:0 0 0 0 rgba(192,74,116,0)}}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.25)}28%{transform:scale(.95)}42%{transform:scale(1.15)}60%{transform:scale(1)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes calbeat{0%,100%{transform:translate(-50%,-46%) scale(1)}14%{transform:translate(-50%,-46%) scale(1.12)}28%{transform:translate(-50%,-46%) scale(.97)}42%{transform:translate(-50%,-46%) scale(1.08)}60%{transform:translate(-50%,-46%) scale(1)}}
@keyframes wiggle{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-10deg)}86%{transform:rotate(8deg)}94%{transform:rotate(-4deg)}}
@keyframes clink{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(8deg)}90%{transform:rotate(-4deg)}}
@keyframes polasway{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + 3deg)) translateY(-2px)}}
@keyframes peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tick{0%{transform:scale(1.18)}30%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes shutter{0%,80%,100%{fill:var(--paper-2);transform:scale(1)}86%{fill:#fff;transform:scale(.78)}90%{fill:#fff;transform:scale(1.06)}94%{transform:scale(1)}}
@keyframes lens{0%,80%,100%{fill:var(--paper-2)}88%{fill:#fff}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* mempelai: doves tie the red-thread knot */
.doves{position:absolute;inset:0;pointer-events:none;z-index:2}
.dove{position:absolute;width:52px;top:calc(12px + env(safe-area-inset-top,0px));z-index:3;pointer-events:none}
.dove.l{left:max(12px,env(safe-area-inset-left,0px))}
.dove.r{right:max(12px,env(safe-area-inset-right,0px))}
.dove.r .d-in{transform:scaleX(-1)}
.dove svg{display:block;width:100%;overflow:visible}
.d-body,.d-tail{fill:var(--white);stroke:var(--wine);stroke-width:1.4;stroke-linejoin:round}
.d-wing{fill:var(--white);stroke:var(--wine);stroke-width:1.4;stroke-linejoin:round;transform-box:fill-box;transform-origin:20% 100%}
.d-eye{fill:var(--wine)}
.knot{position:absolute;left:51%;top:28%;width:26px;height:24px;margin:-12px 0 0 -13px}
.knot svg{display:block;width:100%;height:100%}
.burst{position:absolute;left:51%;top:28%}
.burst i{position:absolute;width:8px;height:8px;margin:-4px;background:var(--olive);opacity:0;
  clip-path:path("M4 8C4 8 0 5.2 0 2.4 0 1 1 0 2 0 2.9 0 3.6.6 4 1.3 4.4.6 5.1 0 6 0 7 0 8 1 8 2.4 8 5.2 4 8 4 8Z")}
@media (prefers-reduced-motion:no-preference){
  .page.active .thread-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s ease-in-out .1s forwards}
  .page.active .dove.l{animation:perchL .9s ease-out both}
  .page.active .dove.r{animation:perchR .9s ease-out .15s both}
  .page.active .dove .d-in svg{animation:hover 2.8s ease-in-out .9s infinite}
  .page.active .dove.r .d-in svg{animation-delay:1.3s}
  .page.active .d-wing{animation:flap .22s ease-in-out 4 alternate,flapSoft 2.4s ease-in-out 1s infinite}
  .page.active .dove.r .d-wing{animation-delay:.15s,1.5s}
  .page.active .knot{animation:knotPop .6s cubic-bezier(.3,1.6,.5,1) 1.6s both,beat 1.8s ease-in-out 2.3s infinite}
  .page.active .burst i{animation:burst .9s ease-out 1.7s both}
  .burst i:nth-child(1){--dx:-26px;--dy:-18px}.burst i:nth-child(2){--dx:26px;--dy:-18px}.burst i:nth-child(3){--dx:-30px;--dy:8px}
  .burst i:nth-child(4){--dx:30px;--dy:8px}.burst i:nth-child(5){--dx:-8px;--dy:-30px}.burst i:nth-child(6){--dx:10px;--dy:24px}
}
@keyframes perchL{0%{transform:translate(-40px,-30px) rotate(-15deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes perchR{0%{transform:translate(40px,-30px) rotate(15deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flyL{0%{transform:translate(-170px,-90px) rotate(-12deg);opacity:0}15%{opacity:1}70%{transform:translate(-14px,-10px) rotate(6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes flyR{0%{transform:translate(170px,-110px) rotate(12deg);opacity:0}15%{opacity:1}70%{transform:translate(14px,-12px) rotate(-6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
@keyframes flapSoft{0%,60%,100%{transform:scaleY(1)}70%{transform:scaleY(-.4)}80%{transform:scaleY(1)}90%{transform:scaleY(-.3)}}
@keyframes knotPop{0%{transform:scale(0) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes burst{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* "These kids are getting married": tilted handwriting over the top-left corner of the photos, like the video */
#ayat .kids-music{position:relative;margin-top:40px}
#ayat .kids-music .kidsnote{position:absolute;z-index:2;left:-34px;top:-24px;margin:0;transform:rotate(-9deg);transform-origin:left bottom;
  display:flex;flex-direction:column;align-items:flex-start;line-height:1;font-size:22px;pointer-events:none;text-align:left}
#ayat .kids-music .k1{color:var(--ink);padding-left:12px}
#ayat .kids-music .k1,#ayat .kids-music .k2{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  /* written by hand: each line is revealed left to right, then the note sways gently */
  .page.active .kids-music .k1{animation:handwrite 1.1s cubic-bezier(.5,.1,.4,1) 2.3s both}
  .page.active .kids-music .k2{animation:handwrite 1.3s cubic-bezier(.5,.1,.4,1) 3.2s both}
  .page.active .kids-music .kidsnote{animation:notesway 3.6s ease-in-out 4.6s infinite}
}
@keyframes handwrite{0%{clip-path:inset(-20% 100% -20% 0);opacity:.2;transform:translateY(2px)}15%{opacity:1}100%{clip-path:inset(-20% -6% -20% 0);opacity:1;transform:none}}
@keyframes notesway{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-3px)}}
#ayat .kids-music .k2{color:var(--wine);text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 6px var(--paper)}
@media (max-width:360px){#ayat .kids-music .kidsnote{left:-18px;font-size:19px}}
@media (max-height:700px){#ayat .kids-music{margin-top:34px}#ayat .kids-music .kidsnote{font-size:18px;top:-20px}}

/* cover: one cut-out "sticker" photo of the couple as kids */
#cover .quotes .q1{top:0;max-width:min(185px,54%)}
#cover .quotes .q2{top:2px}
@media (prefers-reduced-motion:no-preference){
  /* the question is written out, then the answer pops in */
  .page.active #cover .q1,#cover.active .q1{animation:qwrite 2s cubic-bezier(.45,.1,.4,1) 1.9s both,qfloat 4s ease-in-out 4s infinite}
  .page.active #cover .q2,#cover.active .q2{animation:qpop .7s cubic-bezier(.3,1.7,.5,1) 4s both,bob 3s ease-in-out 4.8s infinite}
}
@keyframes qwrite{0%{clip-path:inset(-20% 100% -20% -10%);opacity:.3}10%{opacity:1}100%{clip-path:inset(-20% -10% -20% -10%);opacity:1}}
@keyframes qfloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-3px)}}
@keyframes qpop{0%{transform:rotate(8deg) scale(0);opacity:0}60%{transform:rotate(-4deg) scale(1.3);opacity:1}80%{transform:rotate(10deg) scale(.95)}100%{transform:rotate(8deg) scale(1);opacity:1}}
#cover .quotes{margin-top:-2px;margin-bottom:-6px;height:80px;position:relative;z-index:2;pointer-events:none}
#cover .quotes span{text-shadow:0 0 4px var(--paper),0 0 4px var(--paper)}
#cover .candle{right:9%;top:calc(30% - 92px)}
.duo{display:block;width:var(--duo-w,min(340px,88vw));max-width:none;height:auto;margin-bottom:-6px;position:relative;z-index:1;
  filter:drop-shadow(2px 0 0 #FFFFFB) drop-shadow(-2px 0 0 #FFFFFB) drop-shadow(0 2px 0 #FFFFFB) drop-shadow(0 -2px 0 #FFFFFB)
         drop-shadow(3px 0 0 #8C1F4B) drop-shadow(-3px 0 0 #8C1F4B) drop-shadow(0 3px 0 #8C1F4B) drop-shadow(0 -3px 0 #8C1F4B)}
/* candle: glowing, flickering flame */
.candle .flame,.candle .flame-in{transform-box:fill-box;transform-origin:50% 100%}
.candle .glow{opacity:.35;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .candle .flame{animation:flame 1.1s ease-in-out infinite}
  .candle .flame-in{animation:flame 0.8s ease-in-out infinite reverse}
  .candle .glow{animation:glow 1.6s ease-in-out infinite}
}
@keyframes flame{0%,100%{transform:scale(1,1) rotate(0)}20%{transform:scale(.9,1.12) rotate(-4deg)}40%{transform:scale(1.06,.92) rotate(3deg)}60%{transform:scale(.94,1.08) rotate(-2deg)}80%{transform:scale(1.03,.96) rotate(2deg)}}
@keyframes glow{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.5;transform:scale(1.15)}}
#ayat .portrait.photo{border-radius:6px;place-items:stretch}
#ayat .portrait.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* merged Acara & Lokasi page: compact so it fits one screen */
#acara>.in{gap:8px}
#acara .sec-gap{height:6px}
#acara h2{font-size:clamp(30px,9vw,40px)}
#acara .cal h2{font-size:clamp(30px,9.5vw,46px)}
#acara .zig{gap:8px}
#acara .zrow .t{font-size:16.5px}
#acara .zrow .t small{font-size:14px}
#acara .zig svg{transform:scale(.85)}
#acara .chand-art{width:min(120px,32vw)!important}
#acara p{font-size:15px;line-height:1.45}
@media (max-height:700px){#acara .chand-art{width:90px!important}#acara .cal{max-width:300px}#acara .cal .num{font-size:32px}}

#acara .ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;align-items:start;margin-top:6px}
#acara .ac-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
#acara .ac-col h2{font-size:clamp(28px,8vw,36px)}
#acara .tlist{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:100%}
#acara .ti{display:flex;flex-direction:column;align-items:center;gap:2px}
#acara .ti svg{transform:none;width:40px;height:auto}
#acara .ti .t{font-size:16px;line-height:1.25;text-align:center}
#acara .ti .t small{display:block;color:var(--muted);font-size:13.5px}
#acara .addr{font-size:13.5px!important;line-height:1.4;max-width:22ch}
#acara .ac-col .chand-art{width:min(96px,26vw)!important;margin-bottom:-4px}
#acara .ac-grid .ac-col:first-child{border-right:1px dashed var(--sage);padding-right:8px}

/* Acara & Lokasi without the table drawing: give the remaining parts more room */
#acara>.in{gap:14px}
#acara .ac-grid{margin-top:14px;gap:14px}
#acara .ac-col{gap:10px}
#acara .ac-col h2{font-size:clamp(32px,9vw,40px)}
#acara .ti svg{width:48px}
#acara .ti .t{font-size:17px}
#acara .ti .t small{font-size:14.5px}
#acara .addr{font-size:14.5px!important}
#acara .ac-col .chand-art{width:min(130px,34vw)!important}
#acara .cal{max-width:340px}
@media (max-height:640px){#acara>.in{gap:8px}#acara .ac-col .chand-art{width:96px!important}#acara .ac-grid{margin-top:6px}}

/* cover name typewriter */
#coverName .ch{opacity:0}
#coverName .ch.on{opacity:1;transition:opacity .08s}
#coverName .caret{display:inline-block;width:0;height:.9em;border-right:2px solid var(--wine);margin-right:-2px;vertical-align:-.08em;animation:caret .8s steps(1) infinite}
#coverName.done .caret{animation:caret .8s steps(1) 3 forwards}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* opening the invitation: envelope opens, card slides out, then page 2 */
.opener{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(255,241,244,.96)}
.opener[hidden]{display:none!important}
.op-env{position:relative;width:min(300px,78vw);aspect-ratio:1.45;perspective:900px}
.op-back{position:absolute;inset:0;background:#B23E69;border-radius:6px}
.op-front{position:absolute;inset:0;border-radius:6px;z-index:3;background:#C04A74 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L50 52 L100 100' fill='%23CF5C86'/%3E%3Cpath d='M0 0 L50 56 L100 0' fill='none' stroke='%23A9325F' stroke-width='.6'/%3E%3Cpath d='M0 100 L50 52 L100 100' fill='none' stroke='%23A9325F' stroke-width='.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.op-env{filter:drop-shadow(0 10px 18px rgba(120,40,70,.25))}
.op-flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:4;transform-origin:50% 0;background:#D86A92;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:6px 6px 0 0}
.op-seal{position:absolute;left:50%;top:58%;z-index:5;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#8C1F4B;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25),inset 0 0 0 3px #A9325F}
.op-card{position:absolute;left:7%;right:7%;top:8%;bottom:8%;z-index:2;background:var(--white);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;box-shadow:0 2px 8px rgba(120,40,70,.15)}
.ec-small{font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ec-name{font-family:var(--f-display);font-size:clamp(26px,8vw,34px);color:var(--wine);line-height:1.1}
.ec-date{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.opener.go .op-env{animation:envIn .45s ease-out both}
.opener.go .op-seal{animation:sealOff .35s ease-in .45s both}
.opener.go .op-flap{animation:flapOpen .6s ease-in-out .6s both}
.opener.go .op-card{animation:cardOut .75s cubic-bezier(.3,.9,.3,1) 1.1s both}
.opener.go{animation:openerOut .5s ease-in 2.15s both}
@keyframes envIn{from{transform:scale(.7) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes sealOff{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(0) rotate(40deg);opacity:0}}
@keyframes flapOpen{0%{transform:rotateX(0)}100%{transform:rotateX(180deg);z-index:1}}
@keyframes cardOut{0%{transform:translateY(0)}55%{transform:translateY(-62%);z-index:2}56%{z-index:6}100%{transform:translateY(-10%) scale(1.35);z-index:6}}

.opener{flex-direction:column;gap:22px;display:flex!important;align-items:center;justify-content:center;cursor:pointer;
  background:var(--paper);background-image:radial-gradient(rgba(192,74,116,.07) 1px,transparent 1px);background-size:18px 18px}
.opener[hidden]{display:none!important}
.opener:focus-visible{outline:none}.opener:focus-visible .op-seal{outline:3px solid var(--sage);outline-offset:3px}
.op-to{text-align:center;font-size:15px;color:var(--muted);line-height:1.6}
.op-to b{font-weight:400;color:var(--wine);font-size:18px}
.op-hint{font-family:var(--f-hand);font-size:20px;color:var(--olive)}
@media (prefers-reduced-motion:no-preference){
  .opener:not(.go) .op-seal{animation:sealPulse 1.6s ease-in-out infinite}
  .opener:not(.go) .op-env{animation:envFloat 3s ease-in-out infinite}
  .opener:not(.go) .op-hint{animation:hintBlink 1.8s ease-in-out infinite}
}
.opener.go .op-to,.opener.go .op-hint{transition:opacity .3s;opacity:0}
@keyframes sealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes envFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hintBlink{0%,100%{opacity:1}50%{opacity:.45}}
/* while the envelope is still closed, the cover waits */
body.sealed #cover *{animation-play-state:paused!important}
body.sealed .dock{opacity:0;pointer-events:none}
@keyframes openerOut{to{opacity:0;transform:scale(1.08)}}
.oval .op-photo{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.oval .portrait{place-items:stretch}

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px}
.pill svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill-ghost{background:var(--white);color:var(--olive);border:1.5px solid var(--olive)}
.pill:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
#acara .date{margin-bottom:-4px}
@media (max-height:600px),(max-width:300px){#acara .ac-col .chand-art{display:none}#acara>.in{gap:6px}#acara .ac-grid{margin-top:4px}}


/* photobooth collage: one large photo + two small, in colour */
.boothwrap{width:min(64%,236px)!important;padding:24px 20px!important}
.boothwrap .booth{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:1.02}
.boothwrap .ph.photo{filter:none;background:#E9B6C6;overflow:hidden;aspect-ratio:auto;height:100%}
.boothwrap .ph.photo.big{grid-row:1 / span 2}
.boothwrap .ph.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
@media (max-height:860px){.boothwrap{width:min(60%,222px)!important}}
@media (max-height:760px){.boothwrap{width:min(54%,200px)!important;padding:20px 16px!important}#wishes .wall{max-height:19vh}#wishes>.in{gap:10px}}
@media (max-height:700px){
  #wishes>.in{gap:8px}
  #wishes h2{font-size:clamp(30px,9vw,40px)}
  #wishes .wall{max-height:17vh}
  #wishes .boothwrap{width:min(54%,200px)!important;padding:18px 16px!important}
  #wishes .cd-title{margin-top:4px!important}
  #wishes .countbox{padding:8px 14px 6px}
  #wishes .count .n{font-size:24px}
}
@media (max-height:600px){#wishes .boothwrap{width:min(46%,170px)!important}#wishes .wall{max-height:15vh}#wishes .small{display:none}}


.boothwrap .ph.photo{cursor:zoom-in;transition:transform .2s}
.boothwrap .ph.photo:hover{transform:scale(1.03)}
.boothwrap .ph.photo:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.lb-img img{object-fit:contain;background:var(--paper-2)}

/* page 2 (Salam & Musik) entrance: ornament draws, verse fades in, photos drop like snapshots */
@media (prefers-reduced-motion:no-preference){
  #ayat.active>.in>svg:first-child path,#ayat.active>.in>svg:first-child circle{stroke-dasharray:700;stroke-dashoffset:700;animation:orn 1.6s ease-out .1s forwards}
  #ayat.active>.in>.salam{animation:fadeUp .8s ease-out .5s both}
  #ayat.active>.in>.arab{animation:verseIn 1.3s ease-out .9s both}
  #ayat.active>.in>.trans{animation:fadeUp .9s ease-out 1.6s both}
  #ayat.active>.in>.kids-music{animation:none}
  #ayat.active .kids-music .portrait.o{animation:dropL .8s cubic-bezier(.3,1.4,.5,1) 2s both}
  #ayat.active .kids-music .portrait.w{animation:dropR .8s cubic-bezier(.3,1.4,.5,1) 2.25s both}
  #ayat.active>.in>.player{animation:fadeUp .8s ease-out 3s both}
  #ayat.active .player .bar b{animation:knobPulse 1.6s ease-in-out 3.8s infinite}
}
@keyframes orn{to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes verseIn{from{opacity:0;filter:blur(6px);transform:scale(.96)}to{opacity:1;filter:none;transform:none}}
@keyframes dropL{0%{opacity:0;transform:translate(-40px,-30px) rotate(-14deg)}100%{opacity:1;transform:rotate(-2deg)}}
@keyframes dropR{0%{opacity:0;transform:translate(40px,-30px) rotate(14deg)}100%{opacity:1;transform:rotate(2deg)}}
@keyframes knobPulse{0%,100%{box-shadow:0 0 0 0 rgba(140,31,75,.35)}50%{box-shadow:0 0 0 6px rgba(140,31,75,0)}}
/* floating music notes while the song plays */
.player{position:relative}
.mnote{position:absolute;left:50%;top:40%;font-size:18px;color:var(--olive);pointer-events:none;animation:noteUp 2.2s ease-out forwards}
@keyframes noteUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-90px) rotate(var(--rot,0deg)) scale(1.1)}}
@keyframes bloomOpen{0%{transform:scale(0) rotate(-60deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes bloomInner{0%{transform:scale(.2) rotate(40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes flSway{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
@keyframes leafIn{0%{transform:scale(0)}100%{transform:scale(1)}}

/* bloom as thread / line art: every petal is stitched in with a single line */
.bloom *{stroke-linecap:round;stroke-linejoin:round}
.bloom .leaves{fill:none!important}
@media (prefers-reduced-motion:no-preference){
  .page.active .bloom .fl ellipse,.page.active .bloom .fl circle,.page.active .bloom .fl path,.page.active .bloom .lf{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.1s ease-out forwards}
  .page.active .bloom .f1 ellipse,.page.active .bloom .f1 circle{animation-delay:.45s}
  .page.active .bloom .f1 .fl-in ellipse{animation-delay:.9s}
  .page.active .bloom .f2 ellipse,.page.active .bloom .f2 circle{animation-delay:.7s}
  .page.active .bloom .f2 .fl-in ellipse{animation-delay:1.1s}
  .page.active .bloom .f3 ellipse,.page.active .bloom .f3 circle{animation-delay:.95s}
  .page.active .bloom .bud path{animation-delay:1.2s}
  .page.active .bloom .lf{animation-delay:.5s}
}
@keyframes stitch{to{stroke-dashoffset:0}}

/* Save the Date: two interlocked rings, a red thread runs from them into a heart */
@media (prefers-reduced-motion:no-preference){
  .page.active .rings-deco .rd-rings circle,.page.active .rings-deco .rd-gem{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1s ease-out forwards}
  .page.active .rings-deco .rd-r1{animation-delay:.3s}.page.active .rings-deco .rd-r1b{animation-delay:.5s}
  .page.active .rings-deco .rd-r2{animation-delay:.6s}.page.active .rings-deco .rd-r2b{animation-delay:.8s}
  .page.active .rings-deco .rd-gem{animation:stitch .6s ease-out 1.1s forwards,twinkle 1.8s ease-in-out 2s infinite}
  .page.active .rings-deco .rd-thread{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.8s ease-in-out 1.3s forwards}
  .page.active .rings-deco .rd-heart{transform-box:fill-box;transform-origin:50% 40%;animation:beat 1.8s ease-in-out 3.3s infinite}
  .page.active .rings-deco .rd-rings{transform-box:fill-box;transform-origin:50% 50%;animation:wiggle 4s ease-in-out 3s infinite}
}

/* Save the Date: one-line flower drawn in a single continuous stroke */
@media (prefers-reduced-motion:no-preference){
  .page.active .oneline .ol-flower{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 3s cubic-bezier(.45,.05,.4,1) .3s forwards}
  .page.active .oneline .bB{animation-duration:1.1s;animation-delay:1s}
  .page.active .oneline .bC{animation-duration:.9s;animation-delay:1.5s}
  .page.active .oneline .bA{animation-duration:2s;animation-delay:1.8s}
  .page.active .oneline .bA2{animation-duration:.8s;animation-delay:2.8s}
  .page.active .oneline .bD{animation-duration:1.2s;animation-delay:2.4s}
  .page.active .oneline .bE{animation-duration:.9s;animation-delay:2.9s}
  .page.active .oneline .berry{opacity:0;animation:fadeUp .5s ease-out 3.4s forwards}
  .page.active .oneline .lfx{animation-duration:.7s;animation-delay:1.4s}
  .page.active .oneline .lfx1{animation-delay:2s}
  .page.active .oneline .lfx2{animation-delay:2.6s}
  .page.active .oneline .ol-flower{transform-box:fill-box;transform-origin:10% 98%}
}

/* one-line floral vine climbing the calendar's right edge and resting on the table */
#acara .cal .bloom.oneline{position:absolute;top:-62px;right:-12px;height:calc(100% + 64px);width:min(52%,176px)!important;z-index:6;transform:translate(var(--vx,0px),var(--vy,0px));filter:drop-shadow(0 0 .7px #FFF4F7) drop-shadow(0 0 .7px #FFF4F7)}
@media (max-height:700px){#acara .cal .bloom.oneline{top:-36px;height:calc(100% + 38px)}}


/* Our Story entrance: snapshots drop in, the dashed timeline draws down, chapters slide in, the red thread is pulled taut */
@media (prefers-reduced-motion:no-preference){
  #kisah.active .pola{animation:polaDrop .9s cubic-bezier(.3,1.4,.5,1) both,polasway 5s ease-in-out infinite}
  #kisah.active .pola.p1{animation-delay:.15s,1.1s}
  #kisah.active .pola.p2{animation-delay:.35s,1.3s}
  #kisah.active .pola.p3{animation-delay:.55s,1.5s}
  #kisah.active .pola.p4{animation-delay:.75s,1.7s}
  #kisah.active>.in>h2{animation:fadeUp .8s ease-out .9s both}
  #kisah.active .story{animation:lineDraw 2.6s ease-in-out 1.2s both}
  #kisah.active .story li{animation:chapterIn .7s ease-out both}
  #kisah.active .story li:nth-child(1){animation-delay:1.4s}
  #kisah.active .story li:nth-child(2){animation-delay:2s}
  #kisah.active .story li:nth-child(3){animation-delay:2.6s}
  #kisah.active .story li:nth-child(4){animation-delay:3.2s}
  #kisah.active .story li::before{animation:heartPop .5s cubic-bezier(.3,1.8,.5,1) both,beat 2.2s ease-in-out infinite}
  #kisah.active .story li:nth-child(1)::before{animation-delay:1.5s,2.2s}
  #kisah.active .story li:nth-child(2)::before{animation-delay:2.1s,2.5s}
  #kisah.active .story li:nth-child(3)::before{animation-delay:2.7s,2.8s}
  #kisah.active .story li:nth-child(4)::before{animation-delay:3.3s,3.6s}
  #kisah.active .hands path:last-of-type{stroke-dasharray:900;stroke-dashoffset:900}
  #kisah.active .hands.seen{animation:fadeUp .8s ease-out both}
  #kisah.active .hands.seen path:last-of-type{animation:orn 2s ease-in-out .5s forwards}
  #kisah.active .hands{overflow:visible}
}
@keyframes polaDrop{0%{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) - 20deg))}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes lineDraw{from{clip-path:inset(0 0 100% -40px)}to{clip-path:inset(0 0 -10% -40px)}}
@keyframes chapterIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes heartPop{from{transform:scale(0)}to{transform:scale(1)}}

/* Our Story entrance: photos drop in, the dashed timeline unrolls, chapters slide in one by one, the hands draw the red string */
@media (prefers-reduced-motion:no-preference){
  #kisah.active>.in>h2{animation:fadeUp .7s ease-out .9s both}
  #kisah.active .story{animation:unroll 2.4s ease-in-out 1.2s both}
  #kisah.active .story li{animation:chapterIn .7s ease-out both}
  #kisah.active .story li:nth-child(1){animation-delay:1.3s}
  #kisah.active .story li:nth-child(2){animation-delay:1.8s}
  #kisah.active .story li:nth-child(3){animation-delay:2.3s}
  #kisah.active .story li:nth-child(4){animation-delay:2.8s}
  #kisah.active .story li::before{animation:heartPop .6s cubic-bezier(.3,1.8,.5,1) both,beat 2.2s ease-in-out 3.6s infinite}
  #kisah.active .story li:nth-child(1)::before{animation-delay:1.35s,3.6s}
  #kisah.active .story li:nth-child(2)::before{animation-delay:1.85s,3.9s}
  #kisah.active .story li:nth-child(3)::before{animation-delay:2.35s,4.2s}
  #kisah.active .story li:nth-child(4)::before{animation-delay:2.85s,4.5s}
  #kisah.active .hands .hand{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.2s ease-out 3.2s forwards}
  #kisah.active .hands .hand.string{animation:stitch 1.6s ease-in-out 4.1s forwards}
}
@keyframes polaDrop{0%{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) * -3))}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes unroll{from{clip-path:inset(0 0 100% -40px)}to{clip-path:inset(0 0 0 -40px)}}
@keyframes chapterIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes heartPop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* A Few Notes from Us entrance: title, tag & text in turn, envelope drops in, card rises, hearts float out */
@media (prefers-reduced-motion:no-preference){
  #hadiah.active>.in>h2{animation:fadeUp .7s ease-out .1s both}
  #hadiah.active .gift-tag{animation:tagPop .6s cubic-bezier(.3,1.7,.5,1) .5s both}
  #hadiah.active .gift-lead{animation:fadeUp .8s ease-out .7s both}
  #hadiah.active .envelope{animation:envDrop .8s cubic-bezier(.3,1.4,.5,1) 1s both;clip-path:inset(-140px -30px 0 -30px)}
  #hadiah.active .card .acct{animation:fadeUp .6s ease-out both}
  #hadiah.active .card .acct{animation-delay:2.2s}
  #hadiah.active .card .acct + .acct{animation-delay:2.45s}
  #hadiah.active .copy{animation:copyPulse 2.4s ease-in-out 3.2s infinite}
  .wall-heart{position:absolute;width:14px;height:13px;z-index:4;pointer-events:none;opacity:0}
  #wishes.active .wall-heart{animation:wallFloat 3.2s ease-out infinite}
  #wishes.active .wall-heart.h1{left:-14%;top:62%;animation-delay:.6s}
  #wishes.active .wall-heart.h2{right:-12%;top:48%;animation-delay:1.4s;width:11px;height:10px}
  #wishes.active .wall-heart.h3{left:-9%;top:30%;animation-delay:2.2s;width:10px;height:9px}
  #wishes.active .wall-heart.h4{right:-15%;top:74%;animation-delay:3s}
}
@keyframes tagPop{0%{opacity:0;transform:scale(.4) rotate(-10deg)}100%{opacity:1;transform:none}}
@keyframes envDrop{0%{opacity:0;transform:translateY(40px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes cardRise{0%{transform:translateY(70px)}100%{transform:none}}
@keyframes copyPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,74,116,.35)}50%{box-shadow:0 0 0 5px rgba(192,74,116,0)}}
@keyframes wallFloat{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.1) rotate(-12deg)}}
@keyframes giftFloat{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(1.1) rotate(15deg)}}

/* RSVP page entrance: gazebo sketches itself, form card rises, fields appear one by one, sparkles on the title */
@media (prefers-reduced-motion:no-preference){
  #ucapan.active .rsvp-art path{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.6s ease-out .1s forwards}
  #ucapan.active .rsvp-art path:nth-child(n+4){animation-delay:.6s}
  #ucapan.active>.in>p{animation:fadeUp .7s ease-out .7s both}
  #ucapan.active .rsvp{animation:formRise .8s cubic-bezier(.3,1.2,.5,1) 1s both}
  #ucapan.active .rsvp>*{animation:fadeUp .5s ease-out both}
  #ucapan.active .rsvp>*:nth-child(1){animation-delay:1.4s}#ucapan.active .rsvp>*:nth-child(2){animation-delay:1.55s}
  #ucapan.active .rsvp>*:nth-child(3){animation-delay:1.7s}#ucapan.active .rsvp>*:nth-child(4){animation-delay:1.85s}
  #ucapan.active .rsvp>*:nth-child(5){animation-delay:2s}#ucapan.active .rsvp>*:nth-child(6){animation-delay:2.15s}
  #ucapan.active .rsvp h3{animation:fadeUp .5s ease-out 1.4s both,titleGlow 3s ease-in-out 2.4s infinite}
  #ucapan.active .att label svg{animation:iconBob 2.4s ease-in-out 2.6s infinite}
  #ucapan.active .att label[for=attNo] svg{animation-delay:3.8s}
  #ucapan.active .send{animation:fadeUp .5s ease-out 2.15s both,sendPulse 2.6s ease-in-out 3s infinite}
}
@keyframes formRise{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes titleGlow{0%,100%{text-shadow:none}50%{text-shadow:0 0 12px rgba(192,74,116,.35)}}
@keyframes iconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) scale(1.1)}}
@keyframes sendPulse{0%,100%{box-shadow:0 4px 0 #93345A,0 0 0 0 rgba(192,74,116,.35)}50%{box-shadow:0 4px 0 #93345A,0 0 0 8px rgba(192,74,116,0)}}

/* guest wall messages: avatar initial, name + attendance chip, compact text, soft fade at the scroll edge */
#wishes .wall{gap:8px;padding:2px 4px 14px 2px;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
#wishes .wish{display:flex;gap:10px;align-items:flex-start;background:var(--white);border:1px solid #F6D3DE;border-left:none;border-radius:14px;padding:10px 12px;box-shadow:0 2px 6px rgba(120,40,70,.06)}
#wishes .wish .av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--paper-2);color:var(--wine);display:grid;place-items:center;font-family:var(--f-display);font-size:18px;border:1.5px solid var(--sage)}
#wishes .wish .wb{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
#wishes .wish .wh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#wishes .wish b{font-weight:700;font-size:14.5px;color:var(--wine);padding-right:0!important;line-height:1.3}
#wishes .wish .st{font-size:11px;line-height:1;padding:3px 8px;border-radius:999px}
#wishes .wish .st.yes{background:var(--olive);color:var(--white)}
#wishes .wish .st.no{border:1px solid var(--sage);color:var(--muted)}
#wishes .wish .tag{position:static!important;margin-left:auto;font-size:10px!important;padding:1px 6px!important}
#wishes .wish p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){#wishes.active .wish{animation:fadeUp .5s ease-out both;animation-delay:calc(.3s + var(--i,0) * .12s)}}
/* Guest Wall animations */
#wishes .boothwrap .ph.photo{position:relative}
@media (prefers-reduced-motion:no-preference){
  #wishes.active>.in>h2:first-child{animation:handwrite 1.1s ease-out .05s both}
  #wishes.active .boothframe path{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.4s ease-out .25s forwards}
  #wishes.active .boothframe path+path{animation-delay:1.3s;animation-duration:.6s}
  #wishes.active .boothwrap .ph.photo{animation:develop .8s cubic-bezier(.3,1.3,.5,1) backwards;animation-delay:calc(.9s + var(--k,0) * .18s)}
  #wishes.active .count .sep{animation:sepBlink 1s steps(1) infinite}
  #wishes.active .countbox{animation:rise .6s ease both,cbGlow 3s ease-in-out 1.2s infinite}
}
#wishes .boothwrap .ph.photo:nth-child(2){--k:1}#wishes .boothwrap .ph.photo:nth-child(3){--k:2}
@keyframes develop{from{opacity:0;transform:scale(.82) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes sepBlink{0%{opacity:1}50%{opacity:.25}}
@keyframes cbGlow{0%,100%{box-shadow:0 0 0 0 rgba(192,74,116,0)}50%{box-shadow:0 0 0 4px rgba(192,74,116,.12),0 4px 14px rgba(192,74,116,.14)}}
#wishes .count .n{display:inline-block}
/* bigger photo frame, compact countdown box */
#wishes .in .boothwrap{width:min(66vw,250px)!important;max-width:100%;padding:20px 18px!important}
@media (max-height:760px){#wishes .in .boothwrap{width:min(56vw,214px)!important}}
@media (max-height:700px){#wishes .in .boothwrap{width:min(50vw,184px)!important;padding:16px 14px!important}}
@media (max-height:600px){#wishes .in .boothwrap{width:min(46vw,156px)!important}}
#wishes .in .countbox{width:min(100%,320px);padding:5px 14px 4px;gap:1px;border-radius:6px}
#wishes .in .count{gap:6px}
#wishes .in .count div{min-width:clamp(42px,14vw,56px)}
#wishes .in .count .n{font-size:clamp(17px,5.4vw,21px)!important;line-height:1.25}
#wishes .in .count .u{font-size:10.5px;line-height:1.2}
#wishes .in .count .sep{font-size:17px;line-height:1.25}
#wishes .in .countbox .date{font-size:11px;letter-spacing:.12em}
#wishes .in .cd-title{font-size:clamp(24px,7.2vw,30px)!important}
#wishes .in .cd-title .rings{width:30px}

/* guest wall: no avatar; list height set by fitWall() */
#wishes>.in{gap:8px!important}
#wishes .boothwrap{width:min(50%,196px)!important;padding:18px 16px!important}
#wishes .cd-title{font-size:clamp(28px,8.4vw,36px)!important;margin-top:4px!important}
#wishes .cd-title .rings{width:36px;height:auto}
#wishes .countbox{padding:8px 16px 6px}
#wishes .count .n{font-size:clamp(22px,7vw,28px)}
@media (max-height:700px){#wishes .boothwrap{width:min(42%,150px)!important;padding:14px 12px!important}#wishes h2{font-size:clamp(26px,8vw,34px)}}

.next-hint{display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:none;cursor:pointer;color:var(--olive);font-family:var(--f-body);font-size:13px;padding:2px 8px}
.next-hint svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.next-hint svg{animation:nudge 1.4s ease-in-out infinite}}
.next-hint:focus-visible{outline:3px solid var(--sage);border-radius:8px}
@media (max-height:700px){.next-hint{font-size:12px;padding:0 8px}}
.vh{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.up-card{width:100%;max-width:360px;background:var(--white);border:1px solid var(--sage);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;box-shadow:0 6px 16px rgba(120,40,70,.10)}
.up-label{font-size:14px;color:var(--muted);margin-bottom:-6px}
.up-card input[type=text]{width:100%;font-family:var(--f-body);font-size:16px;border:1px solid var(--sage);border-radius:10px;padding:9px 12px;background:var(--paper);color:var(--ink)}
.up-card input[type=text]:focus-visible{outline:3px solid var(--sage);outline-offset:1px}
.up-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px 6px;border-radius:12px;cursor:pointer;font-size:15px;text-align:center;line-height:1.2;transition:transform .15s}
.pick svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pick.cam{background:var(--olive);color:var(--white)}
.pick.lib{background:var(--paper-2);color:var(--wine);border:1.5px dashed var(--sage)}
.pick:active{transform:scale(.97)}
.vh:focus-visible+.pick,.pick:focus-within{outline:3px solid var(--sage);outline-offset:2px}
.up-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.up-thumbs:empty{display:none}
.up-thumbs::-webkit-scrollbar{display:none}
.th{position:relative;flex:none;width:58px;height:58px;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(120,40,70,.2)}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(60,18,36,.75);color:#fff;font-size:14px;line-height:20px;padding:0;cursor:pointer}
.up-progress{height:6px;border-radius:6px;background:var(--paper-2);overflow:hidden}
.up-progress i{display:block;height:100%;width:0;background:var(--olive);transition:width .2s}
.up-card .btn-up{align-self:stretch;justify-content:center;margin-top:2px}
.btn-up:disabled{opacity:.45;box-shadow:none;cursor:default}
.up-msg{font-size:14px;text-align:center;min-height:1.2em;color:var(--muted)}
.up-msg.ok{color:#2f7a4f}.up-msg.err{color:var(--wine)}
.up-hint{font-size:12px;color:var(--muted);text-align:center;margin-top:-4px}
/* gallery box: scrolls inside when many photos */
.gal-box{width:100%;max-width:400px;max-height:calc(100dvh - 300px);min-height:180px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sage) transparent;padding:4px 6px 10px}
.gal-box::-webkit-scrollbar{width:4px}.gal-box::-webkit-scrollbar-thumb{background:var(--sage);border-radius:999px}
.gal-box .gallery{max-width:none;padding:6px 2px}
.gal-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 8px;color:var(--muted);font-size:15px;text-align:center}
.gal-empty[hidden]{display:none}
.lb-by{font-size:13px;color:var(--muted);text-align:center;padding-bottom:2px}

/* momen buttons */
.momen-btns{display:flex;flex-direction:column;align-items:center;gap:10px}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;color:var(--olive);text-decoration:none;font-family:var(--f-body);font-size:15px;padding:6px 18px;border:1.5px solid var(--olive);border-radius:999px;background:var(--white)}
.btn-ghost svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost:hover{background:var(--paper-2)}
.btn-ghost:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
/* galeri momen */
#galeri>.in{gap:10px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;width:100%;max-width:400px;padding:6px 4px}
.gitem{position:relative;background:var(--white);padding:5px 5px 16px;box-shadow:2px 6px 12px rgba(120,40,70,.18);border:none;cursor:pointer;display:block;width:100%;transition:transform .2s}
.gitem:nth-child(3n+1){transform:rotate(-3deg)}.gitem:nth-child(3n+2){transform:rotate(2deg) translateY(6px)}.gitem:nth-child(3n){transform:rotate(-1.5deg)}
.gitem:hover,.gitem:focus-visible{transform:rotate(0) scale(1.04);z-index:1}
.gitem:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.gitem .gph{aspect-ratio:1;overflow:hidden;background:linear-gradient(#f6dbe4,#eec3d1);display:block}
.gitem .gph img{width:100%;height:100%;object-fit:cover;display:block}
.gitem .gcap{position:absolute;left:0;right:0;bottom:1px;font-family:var(--f-hand);font-size:12px;color:var(--wine);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
@media (max-height:700px){.gal-box{max-height:calc(100dvh - 324px)}}
/* Galeri Momen animations */
.gitem:nth-child(3n+1){--r:-3deg;--ty:0px}.gitem:nth-child(3n+2){--r:2deg;--ty:6px}.gitem:nth-child(3n){--r:-1.5deg;--ty:0px}
.gitem:nth-child(n){transform:rotate(var(--r,0deg)) translateY(var(--ty,0px))}
.gitem:nth-child(n):hover,.gitem:nth-child(n):focus-visible{transform:rotate(0) scale(1.04)}
@media (prefers-reduced-motion:no-preference){
  #galeri.active>.in>h2{animation:handwrite 1s ease-out .1s both}
  #galeri.active .gal-box{animation:fadeUp .6s ease-out .35s backwards}
  #galeri.active .gitem.gin{animation:gitemIn .7s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(.5s + var(--i,0) * .1s)}
  #galeri.active .gitem.gin .gph img{animation:gphDev 1s ease-out backwards;animation-delay:calc(.55s + var(--i,0) * .1s)}
  #galeri.active .gitem.gin::before{content:"";position:absolute;left:50%;top:-6px;width:22px;height:9px;margin-left:-11px;background:rgba(240,170,190,.7);transform:rotate(-4deg);z-index:2;animation:tapeIn .4s ease-out backwards;animation-delay:calc(.9s + var(--i,0) * .1s)}
  #galeri.active .gal-empty svg{animation:galFloat 3.4s ease-in-out infinite}
  #galeri.active .gal-empty svg .line{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.1s ease-out .4s forwards}
  #galeri.active .gal-empty p{animation:fadeUp .6s ease-out .9s backwards}
  #galeri.active .btn-ghost{animation:fadeUp .6s ease-out 1.1s backwards,ghostPulse 2.8s ease-in-out 2.2s infinite}
}
.gitem.gin::before{pointer-events:none}
@keyframes gitemIn{from{opacity:0;transform:translateY(36px) scale(.7) rotate(calc(var(--r,0deg) * 4))}}
@keyframes gphDev{from{filter:blur(4px) saturate(.3)}to{filter:none}}
@keyframes tapeIn{from{opacity:0;transform:rotate(-4deg) scaleX(.2)}}
@keyframes galFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ghostPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,74,116,0)}50%{box-shadow:0 0 0 6px rgba(192,74,116,.16)}}
.gitem .gtag{position:absolute;right:6px;top:6px;font-size:9px;background:rgba(255,255,251,.9);color:var(--muted);border-radius:999px;padding:0 5px;line-height:1.6}
/* lightbox */
.lightbox[hidden]{display:none!important}
@media (max-height:700px){.cam-art{width:110px!important}#momen>.in{gap:7px}.momen-lead{font-size:14.5px;line-height:1.45}.momen-btns{gap:7px}}
.lightbox button{z-index:2}
.lb-fig{max-width:min(78vw,440px)!important}
.lightbox{position:fixed;inset:0;z-index:20;background:rgba(60,18,36,.86);display:flex;align-items:center;justify-content:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-fig{margin:0;background:var(--white);padding:10px 10px 8px;max-width:min(92vw,440px);width:100%;transform:rotate(-1deg);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lb-img{aspect-ratio:1;background:linear-gradient(#f6dbe4,#eec3d1);overflow:hidden}
.lb-img img,.lb-img svg{width:100%;height:100%;object-fit:contain;display:block}
.lb-fig figcaption{font-family:var(--f-hand);font-size:20px;color:var(--wine);text-align:center;padding-top:6px;min-height:1.4em}
.lightbox button{position:absolute;border:none;background:var(--white);color:var(--wine);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.lightbox button svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px))}
.lb-nav.prev{left:max(8px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-nav.next{right:max(8px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
@media (max-height:640px){.gallery{gap:8px 6px;max-width:300px}}

/* Bagikan Momen page */
#momen>.in{gap:10px}
.momen-lead{max-width:34ch;font-size:15.5px;color:var(--ink)}
.qr-card{flex:none;background:var(--white);padding:10px 10px 6px;box-shadow:0 6px 16px rgba(120,40,70,.16);transform:rotate(-2deg);display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:2px}
.qr{width:116px;height:116px;display:grid;place-items:center;background:var(--white)}
.qr img,.qr canvas{width:116px!important;height:116px!important;image-rendering:pixelated}
.qr-cap{font-family:var(--f-hand);font-size:16px;color:var(--wine);white-space:nowrap;max-width:116px;overflow:hidden;text-overflow:clip}
.btn-up{display:inline-flex;align-items:center;gap:8px;background:var(--olive);color:var(--white);text-decoration:none;font-family:var(--f-body);font-size:17px;padding:10px 26px;border-radius:999px;box-shadow:0 5px 0 #93345A;margin-top:4px;transition:transform .15s,box-shadow .15s}
.btn-up svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-up:active{transform:translateY(3px);box-shadow:0 2px 0 #93345A}
.btn-up:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
.momen-row{display:flex;align-items:center;gap:16px;justify-content:center;width:100%;margin:4px 0}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left;max-width:170px;min-width:0}
.steps li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.35}
.steps .sn{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--olive);color:var(--olive);display:grid;place-items:center;font-size:13px}
.hashtag{font-family:var(--f-display);color:var(--wine);font-size:22px;line-height:1.2}
/* Momen page animations */
@media (prefers-reduced-motion:no-preference){
  #momen.active .cam-art path.line:last-of-type{transform-box:fill-box;transform-origin:center;animation:twinkle 1.6s ease-in-out infinite}
  #momen.active>.in>h2{animation:handwrite 1s ease-out .35s both}
  #momen.active .up-card{animation:momCard .55s ease-out .45s backwards}
  #momen.active .up-card>*{animation:rowIn .45s ease-out backwards}
  #momen.active .up-card>:nth-child(1){animation-delay:.6s}#momen.active .up-card>:nth-child(2){animation-delay:.66s}
  #momen.active .up-card>.up-pick{animation:none}
  #momen.active .pick.cam{animation:pickPop .5s cubic-bezier(.3,1.5,.5,1) .72s backwards,camPulse 2.6s ease-in-out 2.2s infinite}
  #momen.active .pick.lib{animation:pickPop .5s cubic-bezier(.3,1.5,.5,1) .82s backwards}
  #momen.active .up-card>.btn-up{animation:rowIn .45s ease-out .92s backwards}
  #momen.active .btn-up:not(:disabled) svg{animation:nudgeUp 1.4s ease-in-out infinite}
  #momen.active .up-card>.up-msg,#momen.active .up-card>.up-hint{animation:rowIn .45s ease-out 1s backwards}
  #momen.active .hashtag{animation:rowIn .6s ease-out 1.15s backwards,tagGlow 3.2s ease-in-out 2.2s infinite}
}
@keyframes momCard{from{opacity:0;transform:translateY(18px)}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
@keyframes camPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes camFlash{0%,86%{opacity:0}90%{opacity:.9}100%{opacity:0}}
@keyframes pickPop{from{opacity:0;transform:scale(.8)}}
@keyframes camPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,74,116,0)}50%{box-shadow:0 0 0 6px rgba(192,74,116,.18)}}
@keyframes camTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}}
@keyframes nudgeUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tagGlow{0%,100%{text-shadow:0 0 0 rgba(192,74,116,0)}50%{text-shadow:0 0 10px rgba(192,74,116,.35)}}
#momen .example{font-size:12px;margin-top:-4px}
#momen{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
@media (max-height:760px){.cam-art{width:150px}}
@media (max-height:640px){.cam-art{display:none}.qr,.qr img,.qr canvas{width:96px!important;height:96px!important}#momen>.in{gap:8px}.momen-lead{font-size:14.5px}}
@media (max-width:340px){.momen-row{gap:10px}.steps li{font-size:13px}}
.dock a span{white-space:nowrap}
@media (max-width:400px){.dock a span{font-size:10.5px}}
@media (max-width:340px){.dock a span{font-size:9px}.dock nav{padding:4px;gap:0}}

/* scrollbars: hidden on full pages, thin pink on the guest wall */
.page{scrollbar-width:none}
.page::-webkit-scrollbar{display:none;width:0;height:0}
.wall{scrollbar-width:thin;scrollbar-color:var(--sage) transparent;padding-right:6px}
.wall::-webkit-scrollbar{width:4px}
.wall::-webkit-scrollbar-track{background:transparent}
.wall::-webkit-scrollbar-thumb{background:var(--sage);border-radius:999px}
.wall::-webkit-scrollbar-thumb:hover{background:var(--olive)}
.wish{position:relative}
.wish .tag{position:absolute;right:8px;top:6px;font-size:11px;color:var(--muted);border:1px solid var(--sage);border-radius:999px;padding:0 7px;line-height:1.5}
.wish.sample b{padding-right:54px}
/* salam + musik page: smaller Arabic, compact so it fits one screen */
#ayat>.in{gap:8px}
#ayat .salam{font-size:16px;line-height:1.5}
#ayat .arab{font-size:clamp(16px,4.6vw,19px);line-height:1.8}
#ayat .trans{font-size:14px;line-height:1.5;max-width:46ch;width:100%}
#ayat .kidsnote{font-size:20px;margin:2px 0 4px}
#ayat .portrait{width:var(--kid-w,min(130px,34vw))}
#ayat .controls{gap:18px}
#ayat .player{margin-top:16px}
@media (max-height:640px){#ayat .player{margin-top:10px}}
#ayat .play{width:46px;height:46px}
#ayat .playtxt{font-size:19px;line-height:1.2}
#ayat{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
@media (max-height:700px){#ayat .arab{font-size:15.5px;line-height:1.7}#ayat .trans{font-size:13px}#ayat .salam{font-size:14px}#ayat>.in{gap:6px}#ayat .kidsnote{font-size:17px}#ayat .player{gap:4px}}
@media (max-height:600px){#ayat .controls{gap:12px}#ayat .play{width:40px;height:40px}#ayat .playtxt{font-size:16px}#ayat>.in>svg:first-child{width:180px}}

/* --- detail refinements matched to the video --- */
.stage{position:relative}
.candle{position:absolute;right:4%;top:-34px;height:auto;z-index:2}
.kids{position:relative}
.sprinkle{position:absolute;width:26px;height:52px;top:20%}
.sprinkle.l{left:-30px}.sprinkle.r{right:-30px;top:8%}
.zig{width:100%;max-width:320px;display:flex;flex-direction:column;gap:18px}
.zrow{display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
.zrow .t{text-align:center;font-size:18px;line-height:1.3}
.zrow .t small{display:block;color:var(--muted);font-size:15px}
.h2-one{font-size:clamp(28px,8.4vw,42px);white-space:nowrap}
.boothwrap{position:relative;width:min(80%,270px);padding:34px 30px}
.boothframe{position:absolute;inset:0;width:100%;height:100%}
.boothwrap .booth{position:relative;border:none;background:none;max-width:none;width:100%;padding:0;gap:6px;border-radius:0}
.boothwrap .ph{aspect-ratio:4/3;background:linear-gradient(#d8d6d8,#bdbabd);filter:grayscale(1);display:block}
.cd-title{display:flex;align-items:center;gap:8px;justify-content:center}
.cd-title .rings{flex:none}
.countbox{background:var(--paper-2);padding:12px 18px 8px;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,320px)}

/* Our Story polaroids: scattered snapshots across the top, like the video */
#kisah .polas{position:relative;display:block;width:100%;max-width:460px;aspect-ratio:576/205;margin:0 0 4px}
#kisah .pola{position:absolute;margin:0;padding:5px 5px 18px;width:auto;background:var(--white);box-shadow:4px 8px 14px rgba(120,40,70,.22)}
#kisah .pola .ph{aspect-ratio:4/3.2;background:repeating-linear-gradient(90deg,#d9d6dc 0 6px,#cfccd3 6px 9px,#e2dfe5 9px 14px);display:block}
#kisah .pola .ph svg{display:block}
#kisah .pola .ph img{width:100%;height:100%;object-fit:cover;display:block}
#kisah .pola.p1{left:2.5%;top:6%;width:16%;transform:rotate(var(--r,5deg))}
#kisah .pola.p2{left:26%;top:30%;width:19%;transform:rotate(var(--r,2deg))}
#kisah .pola.p3{left:52.5%;top:26%;width:21.5%;transform:rotate(var(--r,-6deg))}
#kisah .pola.p4{left:78.5%;top:11%;width:16%;transform:rotate(var(--r,-6deg))}

.hand{stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* venue table illustration: larger, fills the column on every phone */
.venue-art{width:var(--venue-w,min(75%,290px))!important;height:auto;margin-top:4px}
.page{padding-top:calc(20px + env(safe-area-inset-top,0px))!important}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  background-image:radial-gradient(rgba(192,74,116,.07) 1px,transparent 1px);background-size:18px 18px}
.deck{position:fixed;inset:0;overflow:hidden;overflow:clip;touch-action:pan-y}
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;
  padding-top:calc(52px + env(safe-area-inset-top,0px));padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  opacity:0;visibility:hidden;transform:translateX(40px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.page.before{transform:translateX(-40px)}
.page.active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}
.page>.in{margin-block:auto;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.page.active>.in>*{animation:rise .6s ease both}
.page.active>.in>*:nth-child(2){animation-delay:.06s}.page.active>.in>*:nth-child(3){animation-delay:.12s}
.page.active>.in>*:nth-child(4){animation-delay:.18s}.page.active>.in>*:nth-child(n+5){animation-delay:.24s}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
.cover{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
@media (prefers-reduced-motion:reduce){.page,.page.active{transition:none;transform:none}.page.active>.in>*{animation:none}}

/* top progress + page arrows */
.topbar{position:fixed;left:0;right:0;top:0;z-index:7;padding:calc(9px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  display:flex;align-items:center;gap:8px;pointer-events:none}
.segs{flex:1;display:flex;gap:3px}
.segs i{flex:1;height:3px;border-radius:3px;background:var(--sage);opacity:.45;transition:opacity .3s,background .3s}
.segs i.on{background:var(--wine);opacity:1}
.count-lbl{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.topbar{max-width:none;padding-right:calc(max(16px,env(safe-area-inset-right,0px)) + 48px)}
.arrow{pointer-events:auto;flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--olive);background:var(--white);color:var(--olive);display:grid;place-items:center;cursor:pointer;padding:0}
.arrow svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow.next{background:var(--olive);color:var(--paper)}
.arrow:disabled{opacity:.3;cursor:default}
.hint{position:fixed;left:0;right:0;bottom:calc(80px + env(safe-area-inset-bottom,0px));text-align:center;font-family:var(--f-hand);font-size:18px;color:var(--olive);pointer-events:none;z-index:4;transition:opacity .4s}
.hint.gone{opacity:0}
body.on-cover .topbar,body.on-cover .hint,body.on-cover .dock{opacity:0;pointer-events:none!important}
body.on-cover .dock nav{pointer-events:none}
#cover{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
.dock,.topbar{transition:opacity .3s}
.topbar::before{content:"";position:absolute;inset:0 0 -14px 0;z-index:-1;background:linear-gradient(var(--paper) 72%,rgba(255,241,244,0))}
.topbar{isolation:isolate}
.more{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);z-index:5;
  display:flex;align-items:center;gap:4px;border:1px solid var(--sage);background:var(--white);color:var(--olive);border-radius:999px;
  padding:3px 12px 3px 8px;font-family:var(--f-body);font-size:13px;cursor:pointer;box-shadow:0 3px 10px rgba(120,40,70,.15);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.more svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.more.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media (max-height:480px){.more{bottom:calc(58px + env(safe-area-inset-bottom,0px))}}
h1,h2{font-family:var(--f-display);color:var(--wine);font-weight:400;margin:0;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(34px,11vw,52px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
p{margin:0}
.line{stroke:var(--olive);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.line-w{stroke:var(--wine);fill:none;stroke-width:1.8;stroke-linecap:round}
.small{font-size:15px;color:var(--muted)}
.btn{font-family:var(--f-body);font-size:16px;border:2px solid var(--wine);background:var(--white);color:var(--wine);
  border-radius:999px;padding:8px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn:hover{background:var(--wine);color:var(--white)}
.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.pill{background:var(--olive);color:var(--paper);border:none;border-radius:999px;padding:4px 16px;font-family:var(--f-body);font-size:15px;text-decoration:none}



/* cover */
.cover>.in{gap:6px}
.cover .eyebrow{font-family:var(--f-hand);font-size:26px;color:var(--wine)}
.cover .kami{letter-spacing:.14em;color:var(--wine);font-size:18px}
.cover h1{font-family:var(--f-hand);font-weight:500;font-size:46px;color:var(--ink)}
.cover h1 .amp{font-family:var(--f-hand);font-weight:700;color:var(--wine);font-size:.85em;margin:0 8px}
.sign .amp{font-family:var(--f-hand);font-weight:700;font-size:.9em;margin:0 4px}
.amp{font-family:var(--f-hand);font-weight:700;font-style:normal}
.quotes{position:relative;width:100%;height:100px}
.quotes span{position:absolute;font-family:var(--f-hand);font-size:16px;color:var(--ink);line-height:1.2}
.q1{left:2%;top:8px;transform:rotate(-8deg);max-width:min(150px,48%);text-align:left}
@media (max-width:340px){.quotes span{font-size:14px}.q2{font-size:18px!important;top:0!important}.cover h1{font-size:40px}.btn{font-size:14px;padding:7px 16px}}
.btn{white-space:nowrap}
.q2{right:6%;top:6px;transform:rotate(8deg);font-size:22px!important}
.kids{display:flex;gap:10px;justify-content:center;margin-top:-6px;position:relative;z-index:1}
.stage{width:100%;padding:40px 20px 76px;margin-top:-34px;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.stage{min-height:0;padding:0!important;aspect-ratio:360/214;width:min(100%,380px)!important;justify-content:flex-start}
.stage .swipe-btn{position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);white-space:nowrap;z-index:2}
@media (max-height:720px){.stage{width:min(82%,320px)!important}.stage .swipe-btn{font-size:13.5px;padding:6px 14px}}
@media (max-height:600px){.stage{width:min(76%,290px)!important}}
@media (max-height:600px),(max-width:340px){.stage .swipe-btn{font-size:12px;padding:5px 10px;gap:4px}}
.swipe-btn{font-size:15px;gap:6px}
.swipe-btn svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.swipe-btn svg{animation:swipeNudge 1.4s ease-in-out infinite}}
.swipe-hint{font-family:var(--f-hand);font-size:19px;color:var(--olive);margin-top:6px;display:flex;align-items:center;gap:6px}
.swipe-hint svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.swipe-hint svg{animation:swipeNudge 1.4s ease-in-out infinite}body.sealed .swipe-hint svg{animation-play-state:paused}}
@keyframes swipeNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.stage .cake{position:absolute;inset:0;width:100%;height:100%;z-index:-1;filter:drop-shadow(0 6px 8px rgba(120,40,70,.18))}
.stage .inv{font-family:var(--f-hand);color:var(--paper);font-size:24px;letter-spacing:.06em}

/* portraits (placeholder illustrations) */
.portrait{width:min(120px,36vw);aspect-ratio:3/4;border-radius:10px;display:grid;place-items:end center;overflow:hidden;max-width:100%}
.portrait.o{background:var(--olive)}
.portrait.w{background:var(--wine)}
.oval{width:min(128px,38vw);aspect-ratio:128/158;height:auto;border-radius:50%;border:3px solid var(--sage);padding:6px;background:var(--white);box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--sage)}
.oval .portrait{width:100%;height:100%;border-radius:50%;aspect-ratio:auto}

/* ayat */
.arab{font-family:var(--f-arab);font-size:24px;line-height:2;color:var(--wine);direction:rtl}
.salam{font-family:var(--f-arab);font-size:20px;color:var(--wine)}
.trans{font-size:15px;color:var(--ink);max-width:36ch}
.kidsnote{font-family:var(--f-hand);font-size:24px;color:var(--ink);align-self:flex-start;transform:rotate(-8deg);line-height:1.05;margin-bottom:6px;text-align:left}
.h2s{font-size:clamp(30px,9vw,40px)}

/* player */
.player{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px;align-items:center}
.bar{width:100%;height:3px;background:var(--sage);border-radius:3px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);border-radius:3px}
.bar b{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);left:0}
.controls{display:flex;align-items:center;gap:22px}
.controls button{background:none;border:none;padding:4px;cursor:pointer;color:var(--ink)}
.controls svg{display:block}
.play{width:52px;height:52px;border-radius:50%;border:3px solid var(--olive)!important;display:grid;place-items:center;color:var(--olive)!important}
.playtxt{font-family:var(--f-hand);font-size:22px;color:var(--wine)}

/* couple */
.couple{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.person{display:flex;flex-direction:column;align-items:center;gap:8px}
.person.b{margin-top:120px}
.name{font-family:var(--f-display);color:var(--wine);font-size:26px;line-height:1.1}
.parents{font-size:14px;color:var(--muted);line-height:1.45}
.thread{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}

/* save the date */
.cal{position:relative;width:100%;max-width:340px;transform:rotate(-4deg)}
.cal h2{position:relative;z-index:1;font-size:clamp(32px,10.5vw,52px)}
.cal .month{background:var(--olive);color:var(--paper);font-size:16px;letter-spacing:.06em;padding:2px 0;width:78%}
.cal .days{display:grid;grid-template-columns:repeat(3,1fr);width:78%;border-bottom:2px solid var(--ink)}
.cal .days div{border-right:2px solid var(--ink);padding:2px 0 8px}
.cal .days div:last-child{border-right:none}
.cal .dn{font-size:15px;color:var(--ink);letter-spacing:.05em}
.cal .num{font-family:var(--f-display);font-size:38px;color:var(--olive);line-height:1.1;position:relative}
.cal .num.hl{color:var(--white)}
.cal .heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);z-index:-1}
.bloom{position:absolute;right:-14px;top:-66px;width:104px;overflow:visible;z-index:2}
.date{letter-spacing:.14em;font-size:15px;color:var(--muted)}

/* timeline */
.tl{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;width:100%;max-width:320px}
.tl .t{font-size:18px;color:var(--ink);text-align:left;line-height:1.3}
.tl .t small{display:block;color:var(--muted);font-size:15px}

/* story */
.polas{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.pola{background:var(--white);padding:6px 6px 18px;box-shadow:0 4px 10px rgba(120,40,70,.18);width:86px}
.pola:nth-child(1){transform:rotate(-7deg)}.pola:nth-child(2){transform:rotate(3deg) translateY(10px)}
.pola:nth-child(3){transform:rotate(-3deg) translateY(4px)}.pola:nth-child(4){transform:rotate(6deg)}
.pola .ph{aspect-ratio:1;background:var(--paper-2);display:grid;place-items:end center;overflow:hidden}
.story{list-style:none;margin:6px 0 0 14px;padding:0 0 0 26px;text-align:left;border-left:2px dashed var(--wine);display:flex;flex-direction:column;gap:22px;max-width:40ch}
.story li{position:relative}
.story li::before{content:"";position:absolute;left:-36px;top:6px;width:18px;height:16px;background:var(--wine);
  clip-path:path("M9 16 C9 16 0 10 0 4.5 C0 1.5 2.3 0 4.6 0 C6.6 0 8.1 1.3 9 2.8 C9.9 1.3 11.4 0 13.4 0 C15.7 0 18 1.5 18 4.5 C18 10 9 16 9 16Z")}
.story h3{margin:0;font-weight:400;font-size:20px;color:var(--ink);line-height:1.2}
.story .when{color:var(--wine);font-size:16px;display:block;margin-bottom:4px}
.story p{font-size:15.5px;color:var(--ink)}

/* gifts */
.envelope{position:relative;width:100%;max-width:320px;margin-top:10px}
.card{position:relative;z-index:1;background:var(--white);margin:0 28px;padding:18px 14px 120px;box-shadow:0 2px 8px rgba(120,40,70,.12);display:flex;flex-direction:column;gap:12px;align-items:center}
.acct{display:flex;flex-direction:column;align-items:center;gap:0}
.acct .no{font-family:var(--f-display);font-size:24px;color:var(--wine);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.acct .an{font-size:14px;color:var(--muted)}
.copy{font-family:var(--f-body);font-size:13px;background:none;border:1px solid var(--olive);color:var(--olive);border-radius:999px;padding:1px 12px;margin-top:4px;cursor:pointer}
.env-back{position:absolute;left:0;right:0;bottom:0;height:210px;z-index:0}
.env-front{position:absolute;left:0;right:0;bottom:0;height:110px;z-index:2;pointer-events:none}
.example{font-size:13px;color:var(--muted);font-style:italic}

/* rsvp */
.rsvp{width:100%;background:linear-gradient(160deg,var(--white),var(--paper-2));border:1px solid var(--sage);border-radius:14px;padding:20px 18px;text-align:left;display:flex;flex-direction:column;gap:12px}
.rsvp h3{margin:0;font-family:var(--f-hand);font-size:30px;font-weight:700;text-align:center;color:var(--ink)}
.rsvp .meta{font-size:14px;color:var(--muted);line-height:1.4}
.rsvp label{font-size:15px;display:block;margin-bottom:2px}
.rsvp input[type=text],.rsvp textarea{width:100%;font-family:var(--f-body);font-size:16px;border:1px solid var(--sage);border-radius:8px;padding:8px 10px;background:var(--white);color:var(--ink)}
.att{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.att input{position:absolute;opacity:0;pointer-events:none}
.att label{border:1px solid var(--sage);border-radius:10px;background:var(--white);text-align:center;padding:10px 6px;cursor:pointer;margin:0}
.att input:checked+label{border:2px solid var(--wine);color:var(--wine)}
.att input:focus-visible+label{outline:3px solid var(--sage)}
.send{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--olive);color:var(--white);border:none;border-radius:999px;padding:10px 28px;font-family:var(--f-body);font-size:16px;cursor:pointer;box-shadow:0 4px 0 #93345A;transition:transform .15s,box-shadow .15s}
.send svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.send:active{transform:translateY(3px);box-shadow:0 1px 0 #93345A}
.send:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
.att label{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--wine);transition:background .2s,color .2s,border-color .2s}
.att label svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.att input:checked+label{background:var(--olive);color:var(--white);border:2px solid var(--olive)!important}
.wall{width:100%;display:flex;flex-direction:column;gap:8px;text-align:left;max-height:22vh;overflow-y:auto;overscroll-behavior:contain}
.wish{background:var(--white);border-radius:8px;padding:8px 10px;font-size:15px;border-left:3px solid var(--wine)}
.wish b{font-weight:400;color:var(--wine)}
.wish .st{font-size:13px;color:var(--muted)}
.empty{font-size:14px;color:var(--muted);text-align:center;padding:8px}
.msg{font-size:14px;color:var(--olive);text-align:center;min-height:1.2em}

/* countdown */
.booth{width:100%;max-width:300px;border:3px solid var(--olive);border-radius:28px 40px 30px 44px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--white)}
.booth .ph{aspect-ratio:4/3;background:#F3E4E8;display:grid;place-items:end center;overflow:hidden;filter:grayscale(1)}
.count{display:flex;gap:6px;align-items:flex-start;justify-content:center;font-variant-numeric:tabular-nums}
.count div{min-width:clamp(42px,14vw,56px);display:flex;flex-direction:column;align-items:center}
.count .n{font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,8vw,30px);color:var(--wine);font-weight:700}
.count .u{font-size:13px;color:var(--muted)}
.count .sep{font-size:28px;color:var(--wine);font-weight:700;line-height:1.4}
/* Penutup animations */
.pn-hearts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pn-h{position:absolute;bottom:-24px;width:14px;height:13px;opacity:0}
.pn-h.h1{left:8%;width:12px}.pn-h.h2{left:22%;width:18px}.pn-h.h3{left:36%;width:10px}.pn-h.h4{left:52%;width:16px}
.pn-h.h5{left:66%;width:11px}.pn-h.h6{left:79%;width:19px}.pn-h.h7{left:90%;width:12px}.pn-h.h8{left:14%;width:9px}
@media (prefers-reduced-motion:no-preference){
  #penutup.active svg path.line-w{stroke-dasharray:100;stroke-dashoffset:100;animation:stitch 1.1s ease-out .3s forwards}
  #penutup.active svg path.line-w+path.line-w{animation-delay:.5s}
  #penutup.active .pn-main{transform-box:fill-box;transform-origin:center;animation:pnPop .7s cubic-bezier(.3,1.8,.5,1) .9s backwards}
  #penutup.active .closing{animation:fadeUp .8s ease-out .45s backwards}
  #penutup.active .sign{animation:handwrite 1.4s ease-out 1.5s both}
  #penutup.active .sign .amp{display:inline-block;animation:beat 1.8s ease-in-out 3s infinite}
  #penutup.active .btn{animation:fadeUp .6s ease-out 2.4s backwards,ghostPulse 2.8s ease-in-out 3.2s infinite}
  #penutup.active .pn-h{animation:pnRise 7s linear infinite}
  #penutup.active .pn-h.h1{animation-delay:.2s;animation-duration:7.5s}#penutup.active .pn-h.h2{animation-delay:1.4s;animation-duration:8.5s}
  #penutup.active .pn-h.h3{animation-delay:3.1s;animation-duration:6.5s}#penutup.active .pn-h.h4{animation-delay:.8s;animation-duration:9s}
  #penutup.active .pn-h.h5{animation-delay:2.4s;animation-duration:7s}#penutup.active .pn-h.h6{animation-delay:4.2s;animation-duration:8s}
  #penutup.active .pn-h.h7{animation-delay:1.9s;animation-duration:6.8s}#penutup.active .pn-h.h8{animation-delay:5.2s;animation-duration:9.5s}
}
@media (max-height:700px){#penutup>.in>svg{width:170px}#penutup .closing{font-size:20px;line-height:1.35}#penutup .sign{font-size:34px}}
@keyframes pnPop{from{opacity:0;transform:scale(0)}}
@keyframes pnRise{0%{opacity:0;transform:translate(0,0) scale(.7)}12%{opacity:.5}50%{transform:translate(10px,-45vh) scale(1)}88%{opacity:.35}100%{opacity:0;transform:translate(-8px,-100vh) scale(1.1)}}
.closing{font-family:var(--f-hand);font-size:24px;color:var(--ink);max-width:30ch}
.sign{font-family:var(--f-display);font-size:40px;color:var(--wine)}

/* floating music toggle */

/* sticky footer nav */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;
  padding:0 max(10px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));pointer-events:none}
.dock nav{pointer-events:auto;width:100%;max-width:460px;background:var(--olive);border-radius:20px;padding:6px;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
  box-shadow:0 6px 18px rgba(120,40,70,.28)}
.dock a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;border-radius:14px;color:var(--paper);text-decoration:none;font-family:var(--f-body);font-size:12px;line-height:1.1;opacity:.78;transition:background .2s,opacity .2s}
.dock a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock a:hover{opacity:1}
.dock a.active{background:var(--paper);color:var(--wine);opacity:1}
.dock a:focus-visible{outline:3px solid var(--sage);outline-offset:1px}
@media (max-width:360px){.dock a span{font-size:10.5px}.dock nav{padding:4px}}
@media (max-width:300px){.dock a span{font-size:9px}.dock a svg{width:18px;height:18px}}
/* landscape / short screens: icons only so the footer stays slim */
@media (max-height:480px){.dock a span{display:none}.dock a{padding:7px 2px}.dock nav{max-width:420px}.page{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));padding-top:calc(46px + env(safe-area-inset-top,0px))}.hint{display:none}}
.env-back,.env-front{width:100%;display:block}

@media (max-height:700px){.rsvp .meta{display:none}.rsvp{padding:14px;gap:8px}.rsvp h3{font-size:24px}#gwish{height:64px}}
.person.b{margin-top:min(120px,12vh)}
@media (max-height:760px){
  .page>.in{gap:10px}
  .portrait{width:min(104px,30vw)}
  .oval{width:min(110px,32vw)}
  .quotes{height:84px}
  .venue-art{width:220px}
  .booth{max-width:240px;padding:12px}
  .pola{width:74px}
  .rsvp-art{width:200px}
}
@media (max-height:640px){
  .portrait{width:min(88px,27vw)}
  .oval{width:min(96px,30vw)}
  .stage{padding:36px 16px 22px}
  .venue-art{width:180px}
  .booth{max-width:200px}
  .rsvp-art{display:none}
  .card{padding-bottom:100px}
}
.bloom{width:clamp(88px,30vw,124px)!important}
@media (max-height:700px){.bloom{top:-36px;width:clamp(78px,26vw,104px)!important}}
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:calc(6px + env(safe-area-inset-top,0px));width:38px;height:38px;border-radius:50%;
  background:var(--wine);color:var(--paper);border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(120,40,70,.3);z-index:8}
.fab.on svg{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fab.on svg{animation:none}}

/* Bagikan Momen: upload is only open on the wedding day */
.up-closed{margin:0;padding:10px 12px;border-radius:12px;background:var(--paper-2);color:var(--wine);font-size:14.5px;line-height:1.35;text-align:center}
.up-card.closed .up-pick{opacity:.45;pointer-events:none}
.up-card.closed input[type=text]{opacity:.6}
#momen.active .up-card.closed .pick.cam{animation:none}