:root{--blue:#2D5BFF;--cream:#FFF6E5;--red:#FF4B5C;--butter:#FFD95A;--mint:#5FD3A5;--ink:#1f2544}
body{font-family:'Fredoka',sans-serif;color:var(--ink);background:var(--cream);
background-image:radial-gradient(circle at 10% 10%,#ffe3b3 0,transparent 40%),radial-gradient(circle at 90% 80%,#dbe4ff 0,transparent 45%),repeating-linear-gradient(45deg,rgba(45,91,255,.035) 0 12px,transparent 12px 24px);min-height:100vh}
.serif{font-family:'Young Serif',serif}
.flagline{height:5px;background:linear-gradient(90deg,var(--blue) 33%,#fff 33% 66%,var(--red) 66%);border-radius:4px}
.scene{perspective:1200px}
.card3d{position:relative;transition:transform .6s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d;cursor:pointer}
.card3d.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.back{transform:rotateY(180deg)}
.stackcard{position:absolute;inset:0;border-radius:24px;border:3px solid var(--ink);background:#ffe9c2;transform:rotate(-4deg) translate(-6px,10px)}
.scene:hover .card3d:not(.flipped){transform:rotate(1.5deg)}
.btn{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:16px;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-2px) rotate(-1deg);box-shadow:5px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.wob{animation:wob 2.5s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-4px)}}
.conf{position:fixed;pointer-events:none;font-size:26px;animation:fall 1.4s ease-out forwards;z-index:60}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
.drawer{animation:slide .35s ease-out}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
.fadein{animation:pop .5s both}