:root{--cream:#FFF8E7;--banana:#FFD93D;--ink:#1f1b16;--peel:#6b5a2e;--blush:#ffb4a2}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Mono',monospace;
background-image:radial-gradient(circle at 10% 0%,#ffe9a6 0,transparent 40%),radial-gradient(circle at 100% 100%,#ffd6c9 0,transparent 35%),repeating-linear-gradient(45deg,rgba(31,27,22,.025) 0 2px,transparent 2px 14px);min-height:100vh}
.display{font-family:'Fraunces',serif}
.card{background:#fffdf6;border:2px solid var(--ink);border-radius:1.25rem;box-shadow:6px 6px 0 var(--ink)}
.btn{border:2px solid var(--ink);border-radius:999px;transition:transform .15s cubic-bezier(.3,1.8,.5,1),box-shadow .15s;box-shadow:3px 3px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5;pointer-events:none}
.drop{border:3px dashed #e0b400;border-radius:1.25rem}
.drop.over{animation:wig .3s infinite;background:#fff3c4}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}
.spin{animation:sp 1.2s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.masonry{columns:2 180px;column-gap:1rem}
.masonry>*{break-inside:avoid;margin-bottom:1rem}
input[type=range].slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}