:root{--bg:#FFF8E1;--ink:#3E2723;--y:#FFE135;--o:#FF9F1C;--card:#fffdf4;--line:#3E2723}
.dark{--bg:#1e1310;--ink:#fff3c4;--card:#2b1b16;--line:#FFE135}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Mono',monospace}
.app{min-height:100vh;background:var(--bg);color:var(--ink);
 background-image:radial-gradient(circle at 10% 10%,rgba(255,225,53,.35),transparent 40%),radial-gradient(circle at 90% 80%,rgba(255,159,28,.25),transparent 40%),repeating-linear-gradient(45deg,transparent 0 22px,rgba(62,39,35,.04) 22px 23px)}
.disp{font-family:'Fredoka',sans-serif}
.card{background:var(--card);border:2.5px solid var(--line);border-radius:22px;box-shadow:6px 6px 0 var(--line)}
.btn{border:2.5px solid var(--line);border-radius:14px;box-shadow:3px 3px 0 var(--line);transition:transform .12s,box-shadow .12s;background:var(--card);color:var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--line)}
.peel{background:linear-gradient(135deg,var(--y),var(--o));color:#3E2723}
.chip{border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;background:var(--card);color:var(--ink)}
.chip:hover{background:var(--y);color:#3E2723}
.wobble{display:inline-block;animation:wob 3s infinite}
@keyframes wob{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}95%{transform:rotate(-6deg)}}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1}}
.spin{animation:sp 1.4s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.confetti{position:fixed;top:-30px;font-size:26px;pointer-events:none;animation:fall 1.8s ease-in forwards;z-index:99}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.6}}
textarea,input{background:transparent;color:var(--ink)}
.drop{border:3px dashed var(--line);border-radius:22px}
.drop.over{background:rgba(255,225,53,.4)}