*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#e8dfc8;--paper:#f5edd8;--kraft:#dcc89a;
  --dark:#1a0f04;--red:#8b1a1a;--redl:#b52020;
  --gold:#a07828;--muted:#7a6040;--cream:#faf5e8;
}
html,body{background:var(--bg);font-family:"Special Elite",cursive}
.app{min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:0}
.screen{display:none;width:100%;max-width:580px;flex-direction:column;align-items:center;gap:1.4rem}.screen:not(#s1){padding:2rem 1rem 5rem}
.screen.active{display:flex}
.prog{display:flex;gap:5px}
.pp{height:3px;border-radius:99px;background:#ccc0a0;transition:all .3s}
.pp.done,.pp.on{background:var(--red)}
.pp.done{width:24px}.pp.on{width:18px}.pp.off{width:10px}
.sh{width:100%;text-align:center}
.sh-eye{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.sh-h{font-family:"Playfair Display",serif;font-size:26px;font-weight:700;color:var(--dark)}
.btn{width:100%;padding:14px;background:var(--red);color:var(--cream);border:none;border-radius:4px;font-family:"Special Elite",cursive;font-size:13px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 0 #5a0a0a,0 6px 18px rgba(139,26,26,.28);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #5a0a0a,0 10px 24px rgba(139,26,26,.32)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #5a0a0a}
.btn-ghost{background:none;border:none;font-size:11px;color:var(--muted);cursor:pointer;letter-spacing:.12em;text-transform:uppercase;transition:color .15s,transform .15s;padding:4px}
.btn-ghost:hover{color:var(--dark);transform:translateX(-2px)}
.btn-sec{width:100%;padding:12px;background:transparent;color:var(--dark);border:1.5px solid #c0a870;border-radius:4px;font-family:"Special Elite",cursive;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .18s}
.btn-sec:hover{background:var(--kraft)}
.dvr{width:100%;display:flex;align-items:center;gap:.5rem}
.dvr-l{flex:1;height:1px;background:rgba(160,120,40,.3)}
.dvr-t{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.logo{font-family:"Playfair Display",serif;font-size:46px;font-weight:700;color:var(--dark);text-align:center;line-height:.95;letter-spacing:-.02em}
.logo em{font-style:italic;font-weight:400;color:var(--red);font-size:36px;display:block}
.s1-tag{font-family:"IM Fell English",serif;font-style:italic;font-size:13px;color:var(--muted);text-align:center}
.entry-wrap{width:100%;perspective:900px}
.entry-card{width:100%;aspect-ratio:1.58/1;background:var(--paper);border-radius:4px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 2px 0 var(--gold),0 8px 32px rgba(26,15,4,.2);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.entry-card:hover{transform:translateY(-7px) rotate(-.4deg);box-shadow:0 2px 0 var(--gold),0 20px 48px rgba(26,15,4,.24)}
.entry-card:active{transform:translateY(-1px) scale(.99)}
.entry-card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,0) 9px);pointer-events:none}
.ec-stripe{position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--red) 0,var(--red) 9px,transparent 9px,transparent 18px)}
.ec-label{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.38em;text-transform:uppercase;color:var(--red);font-family:"IM Fell English",serif;white-space:nowrap}
.ec-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
.ec-icon{font-size:48px;line-height:1}
.ec-cta{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:var(--kraft);padding:6px 18px;border-radius:99px;border:1px solid #c0a870;transition:all .15s}
.entry-card:hover .ec-cta{background:var(--red);color:var(--cream);border-color:var(--red)}
.ec-stamp-box{position:absolute;top:12px;right:12px;width:42px;height:50px;background:#fff;border:1px solid #c8b080;display:flex;align-items:center;justify-content:center;font-size:20px}
.ec-stamp-box::after{content:"";position:absolute;inset:3px;border:1px dashed #c8b080;pointer-events:none}
.ec-pm{position:absolute;bottom:12px;right:12px;width:46px;height:46px;border:1.5px solid rgba(26,15,4,.18);border-radius:50%;display:flex;align-items:center;justify-content:center}
.ec-pm span{font-size:6px;letter-spacing:.06em;text-transform:uppercase;color:rgba(26,15,4,.3);text-align:center;line-height:1.5}
.ec-foot{position:absolute;bottom:9px;left:12px;font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,15,4,.18)}
.tmpl-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tmpl-item{display:flex;flex-direction:column;gap:5px;cursor:pointer}
.tmpl-preview{aspect-ratio:1.58/1;border-radius:4px;overflow:hidden;position:relative;border:2.5px solid transparent;box-shadow:0 2px 8px rgba(26,15,4,.14);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .15s}
.tmpl-preview:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 24px rgba(26,15,4,.2)}
.tmpl-preview:active{transform:scale(.97)}
.tmpl-item.sel .tmpl-preview{border-color:var(--red);box-shadow:0 0 0 3px rgba(139,26,26,.22)}
.tmpl-check{position:absolute;top:5px;right:5px;width:20px;height:20px;background:var(--red);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:11px;color:#fff;font-family:sans-serif;z-index:2;box-shadow:0 2px 6px rgba(139,26,26,.4)}
.tmpl-item.sel .tmpl-check{display:flex}
.tmpl-img{width:100%;height:100%;object-fit:cover;display:block}
.tmpl-name{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center}
.tmpl-item.sel .tmpl-name{color:var(--red)}
.flip-tabs{display:flex;gap:6px;width:100%}
.ftab{flex:1;padding:10px;border-radius:4px;border:1.5px solid #c0a870;background:transparent;font-family:"Special Elite",cursive;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .18s}
.ftab.on{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.ftab:hover:not(.on){background:var(--kraft)}
.flip-wrap{width:100%;perspective:1100px}
.flip-inner{width:100%;aspect-ratio:1.58/1;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,0,.2,1)}
.flip-inner.flipped{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;overflow:hidden;box-shadow:0 2px 0 var(--gold),0 8px 28px rgba(26,15,4,.16)}
.flip-back-face{transform:rotateY(180deg)}
.front-img{width:100%;height:100%;object-fit:cover;display:block}
.back-live{width:100%;height:100%;background:var(--paper);display:flex;flex-direction:column;position:relative}
.bl-stripe{height:3px;flex-shrink:0;background:repeating-linear-gradient(90deg,var(--red) 0,var(--red) 9px,transparent 9px,transparent 18px)}
.bl-top{text-align:center;padding:3px 0;border-bottom:1px solid rgba(160,120,40,.35);flex-shrink:0}
.bl-top span{font-family:"IM Fell English",serif;font-size:8px;letter-spacing:.28em;color:var(--red);text-transform:uppercase}
.bl-body{flex:1;display:grid;grid-template-columns:1fr 1px 1fr;min-height:0}
.bl-left{padding:.5rem .45rem .45rem .65rem;display:flex;flex-direction:column;gap:.25rem}
.bl-lbl{font-size:6px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);flex-shrink:0}
.bl-left textarea{flex:1;background:transparent;border:none;outline:none;font-family:"Special Elite",cursive;font-size:12px;color:var(--dark);resize:none;line-height:1.75;min-height:0;overflow:hidden}
.bl-left textarea::placeholder{color:#c0a060;font-style:italic}
.bl-sig{display:flex;align-items:center;gap:3px;border-top:1px solid rgba(160,120,40,.3);padding-top:4px;flex-shrink:0}
.bl-sig span{font-size:8px;color:var(--red);font-family:"IM Fell English",serif;font-style:italic}
.bl-sig input{flex:1;background:transparent;border:none;outline:none;font-family:"Special Elite",cursive;font-size:11px;color:var(--dark)}
.bl-divider{background:rgba(160,120,40,.35)}
.bl-right{padding:.5rem .5rem .45rem .45rem;display:flex;flex-direction:column;justify-content:space-between}
.bl-stamp{align-self:flex-end;width:34px;height:41px;background:#fff;border:1px solid #d0b880;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;flex-shrink:0;overflow:hidden}
.bl-stamp::after{content:"";position:absolute;inset:2px;border:1px dashed #d0b880;pointer-events:none;z-index:0}
.bl-stamp .bsi{font-size:15px;line-height:1;position:relative;z-index:1}
.bl-stamp .bsl{font-size:5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.bl-stamp img{width:82%;height:82%;object-fit:cover;position:relative;z-index:1}
.bl-to-block{display:flex;flex-direction:column;gap:3px}
.bl-to{font-family:"IM Fell English",serif;font-size:13px;font-style:italic;color:var(--red)}
.bl-aline{border-bottom:1px solid rgba(160,120,40,.38);padding-bottom:1px}
.bl-aline input{width:100%;background:transparent;border:none;outline:none;font-family:"Special Elite",cursive;font-size:11px;color:var(--dark)}
.bl-aline input::placeholder{color:#c0a060}
.bl-pm{align-self:flex-end;width:32px;height:32px;border:1px solid rgba(26,15,4,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bl-pm span{font-size:5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(26,15,4,.28);text-align:center;line-height:1.5}
.bl-foot{padding:2px 8px;border-top:1px solid rgba(160,120,40,.25);display:flex;justify-content:space-between;flex-shrink:0}
.bl-foot span{font-size:5.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.stamp-scroll{width:100%;display:flex;gap:7px;flex-wrap:wrap}
.st{width:48px;aspect-ratio:1/1.25;background:var(--cream);border:1.5px solid #d0b880;border-radius:3px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,border-color .15s;box-shadow:0 1px 4px rgba(26,15,4,.09)}
.st::before{content:"";position:absolute;inset:3px;border:1px dashed #d0b880;border-radius:1px;pointer-events:none;transition:border-color .15s}
.st:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 6px 14px rgba(26,15,4,.14);border-color:var(--gold)}
.st:active{transform:scale(.92)}
.st.sel{border-color:var(--red);box-shadow:0 0 0 2px rgba(139,26,26,.3);background:#fff8f4}
.st.sel::before{border-color:var(--red)}
.st .si{font-size:17px;line-height:1;position:relative;z-index:1}
.st .sl{font-size:6.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.st img{width:78%;object-fit:cover;position:relative;z-index:1}
.st-up{background:var(--kraft);border-style:dashed}
.st-up:hover{background:#d8c090}
.ink-row{display:flex;gap:9px}
.ink{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;box-shadow:0 2px 6px rgba(26,15,4,.16);position:relative}
.ink:hover{transform:scale(1.16)}
.ink:active{transform:scale(.88)}
.ink.sel{border-color:var(--dark);transform:scale(1.12);box-shadow:0 4px 12px rgba(26,15,4,.28)}
.ink::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;opacity:0;transition:opacity .15s;font-family:sans-serif}
.ink.sel::after{opacity:1}
.img-up{width:100%;height:64px;background:var(--kraft);border:1.5px dashed #c0a870;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s;position:relative;overflow:hidden}
.img-up:hover{background:#d4bb88;transform:scale(1.01)}
.img-up:active{transform:scale(.98)}
.img-up span.lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.img-up img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-clr{position:absolute;top:5px;right:7px;background:var(--red);color:#fff;border:none;border-radius:99px;padding:2px 8px;font-size:8px;cursor:pointer;display:none;z-index:2;font-family:"Special Elite",cursive;letter-spacing:.06em}
input[type=file]{display:none}
.ptxt{font-family:"Playfair Display",serif;font-size:20px;font-style:italic;color:var(--dark);text-align:center}
.psub{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-align:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.res-wrap{width:100%;animation:fadeUp .5s cubic-bezier(.34,1.3,.64,1) forwards}
.res-canvas{width:100%;display:block;border-radius:4px;box-shadow:0 2px 0 var(--gold),0 12px 40px rgba(26,15,4,.22)}

/* ── BUNNY LEG WALK ANIMATION ── */
@keyframes legSwingF {
  0%   { transform: rotate(22deg); }
  50%  { transform: rotate(-22deg); }
  100% { transform: rotate(22deg); }
}
@keyframes legSwingB {
  0%   { transform: rotate(-22deg); }
  50%  { transform: rotate(22deg); }
  100% { transform: rotate(-22deg); }
}

/* front legs and back legs alternate — opposite phase */
#lLegF, #rLegB { animation: legSwingF 0.68s ease-in-out infinite; }
#lLegB, #rLegF { animation: legSwingB 0.68s ease-in-out infinite; }

/* gentle body bob while idle */
@keyframes bodyBob {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}
#bunnyL  { animation: bodyBob 1.36s ease-in-out infinite; }
#bunnyR  { animation: bodyBob 1.36s ease-in-out infinite; animation-delay: 0.18s; }
#envelope { animation: bodyBob 1.36s ease-in-out infinite; animation-delay: 0.09s; }

/* walk-off: whole scene slides right */
@keyframes walkOff {
  0%   { transform: translateX(0);   opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}
#bunnyScene.delivering {
  animation: walkOff 0.9s cubic-bezier(.38,0,.78,1) forwards;
  pointer-events: none;
}
#bunnyScene.delivering #lLegF,
#bunnyScene.delivering #rLegB {
  animation: legSwingF 0.28s ease-in-out infinite;
}
#bunnyScene.delivering #lLegB,
#bunnyScene.delivering #rLegF {
  animation: legSwingB 0.28s ease-in-out infinite;
}



/* ── Footer ── */
.site-footer{width:100%;text-align:center;padding:.5rem 1rem .8rem;position:fixed;bottom:0;left:0;z-index:50;pointer-events:none;background:linear-gradient(to top,rgba(232,223,200,.85),transparent)}
.footer-link{display:inline-flex;align-items:center;gap:3px;font-family:"Special Elite",cursive;font-size:10px;letter-spacing:.1em;color:var(--muted);opacity:.6;text-decoration:none;pointer-events:all;transition:opacity .2s}
.footer-link:hover{opacity:.9}
.footer-ig{width:14px;height:14px;object-fit:contain;vertical-align:middle}
.footer-name{color:var(--red)}
/* ── Stamp row ── */
.stamp-scroll{justify-content:safe center}