:root{--sky:#dce8f2;--paper:#fffaf0;--ink:#1d2a44;--muted:#53627c;--marigold:#f4b829;--berry:#d6457f;--line:#b9cadb;--shadow:rgba(29,42,68,.18);
  --f-display:"Young Serif",Georgia,serif;--f-body:"Figtree",system-ui,sans-serif;--f-hand:"Caveat","Comic Sans MS",cursive}
@media (prefers-color-scheme:dark){:root{--sky:#141c2b;--paper:#1f2a3d;--ink:#eef2f8;--muted:#a5b3c9;--line:#33425b;--shadow:rgba(0,0,0,.45);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sky);color:var(--ink);font:16px/1.5 var(--f-body);overflow-x:clip;min-height:100vh;display:flex;flex-direction:column;
  background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:22px 22px;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}
header{padding:18px 0;text-align:center}
.logo{font-family:var(--f-display);font-size:22px;text-decoration:none;color:var(--ink)}
main{flex:1;display:flex;justify-content:center;align-items:center;padding:12px 0 24px}
h1{font-family:var(--f-display);font-weight:400;margin:0 0 8px;text-wrap:balance}
.btn{font:700 15px/1 var(--f-body);border:2px solid var(--ink);border-radius:999px;padding:12px 20px;cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--ink);text-decoration:none;display:inline-flex}
.btn.pink{background:var(--berry);color:#fff}.btn.yellow{background:var(--marigold);color:#1d2a44}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
.scene{--w:min(360px,44vw);--h:calc(var(--w)*1.05);width:calc(var(--w)*2);max-width:100%;height:calc(var(--h) + 60px);perspective:1600px;display:flex;justify-content:center;align-items:center}
.card{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);transform:rotateX(8deg)}
.card.open{transform:translateX(calc(var(--w)/2)) rotateX(var(--tx,10deg)) rotateY(var(--ty,0deg))}
.inside{position:absolute;inset:0;background:var(--paper);border-radius:4px 10px 10px 4px;transform-style:preserve-3d;box-shadow:0 18px 30px var(--shadow)}
.cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,.7,.2,1);z-index:5;cursor:pointer}
.card.open .cover{transform:rotateY(-178deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px 10px 10px 4px}
.front{background:var(--marigold);color:#1d2a44;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px;
  background-image:radial-gradient(rgba(255,255,255,.35) 2px,transparent 2.5px);background-size:18px 18px;box-shadow:0 18px 30px var(--shadow)}
.front .big{font-family:var(--f-display);font-size:calc(var(--w)*.13)}
.front .tag{font:800 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:#1d2a44;color:#fff;padding:5px 10px;border-radius:999px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{transform:rotateY(180deg);background:var(--paper);border-radius:10px 4px 4px 10px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px;font-family:var(--f-hand);font-size:calc(var(--w)*.075);line-height:1.15;overflow:hidden}
.back small{font-size:.75em;color:var(--muted)}
.layer{position:absolute;left:0;right:0;bottom:0;transform-origin:50% 100%;transform:rotateX(-88deg);transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.card.open .layer{transform:translateZ(var(--z)) rotateX(0)}
.card:not(.open) .layer:not(.wall){opacity:0;transition:transform .5s,opacity .2s .3s}
.wall{--z:0px;top:0;transform:none!important;background-size:cover;background-position:center top;filter:blur(10px) saturate(1.2) brightness(1.05);opacity:.55;border-radius:4px 10px 10px 4px;overflow:hidden}
.bunting{--z:20px;top:0;bottom:auto;height:18%}.card.open .bunting{transition-delay:.35s}
.bunting svg{width:100%;height:100%;display:block}
.art{--z:50px;height:88%;display:flex;align-items:flex-end;justify-content:center;padding:0 6% 14%}.card.open .art{transition-delay:.5s}
.art img{width:100%;border:3px solid var(--paper);border-radius:8px;box-shadow:0 10px 18px var(--shadow);display:block}
.ribbon{--z:85px;bottom:4%}.card.open .ribbon{transition-delay:.7s}
.banner{margin:0 auto;width:84%;background:var(--marigold);border:2px solid #1d2a44;color:#1d2a44;text-align:center;font-family:var(--f-display);font-size:calc(var(--w)*.07);padding:6px 4px;
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.bubble{position:absolute;left:50%;top:4%;transform:translateX(-50%) translateZ(120px);background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:8px 12px;font-family:var(--f-hand);font-size:21px;line-height:1.1;width:max-content;max-width:calc(var(--w)*.95);text-align:center;box-shadow:0 6px 0 var(--ink);opacity:0;transition:opacity .25s;pointer-events:none}
.bubble b{display:block;font:800 10px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--berry)}
.bubble.show{opacity:1}
.controls,.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font:700 14px var(--f-body);padding:7px 15px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hint{font:600 13px var(--f-body);color:var(--muted);margin:0}
.state{max-width:440px;text-align:center;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:28px}
.state p{color:var(--muted);margin:0 0 14px}.state .link{font:600 13px ui-monospace,monospace;word-break:break-all}
.fold{width:64px;height:64px;margin:0 auto 14px;background:var(--marigold);border:2px solid var(--ink);border-radius:6px;animation:fold 1.4s ease-in-out infinite;transform-origin:left center}
@keyframes fold{50%{transform:perspective(200px) rotateY(-150deg)}}
.make{text-align:center;padding:24px 0 36px;display:grid;gap:10px;justify-items:center;color:var(--muted)}
.make p{margin:0}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px}
@media (max-width:520px){.scene{--w:44vw}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}}