:root{--cream:#fbf3e4;--terra:#c8643b;--caramel:#d9a25f;--sage:#8fa98a;--ink:#3b2a1f;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Fredoka',sans-serif;
background-image:radial-gradient(circle at 12px 12px,rgba(200,100,59,.08) 3px,transparent 4px),radial-gradient(circle at 36px 30px,rgba(143,169,138,.10) 3px,transparent 4px);background-size:48px 48px;}
.mono{font-family:'Courier Prime',monospace}
.card{background:#fffaf1;border:2px solid #3b2a1f;border-radius:18px;box-shadow:4px 5px 0 rgba(59,42,31,.85)}
.btn{border:2px solid #3b2a1f;border-radius:14px;padding:.5rem 1rem;font-weight:700;box-shadow:3px 3px 0 #3b2a1f;transition:transform .12s}
.btn:hover{transform:rotate(-2deg) translateY(-1px)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #3b2a1f}
.chip{border:2px solid #3b2a1f;border-radius:999px;padding:.15rem .6rem;font-family:'Courier Prime',monospace;font-weight:700;cursor:pointer;transition:transform .1s}
.chip:hover{transform:scale(1.08)}
.chip.dom{background:#3b2a1f;color:#fbf3e4}
.chip.rec{background:transparent;color:#3b2a1f}
.fadein{animation:fadein .5s both}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
.paw{position:fixed;top:-40px;font-size:28px;pointer-events:none;animation:fall 2.2s linear forwards;z-index:60}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
canvas{display:block}