:root{--kraft:#F5EBDD;--kraft2:#EADBC4;--mat:#2F6B4F;--mat2:#24543e;--tomato:#E2553F;--chalk:#FFFDF8;--ink:#2b2622}
body{margin:0;background:var(--kraft);color:var(--ink);font-family:'IBM Plex Mono',monospace;
background-image:radial-gradient(rgba(120,90,50,.07) 1px,transparent 1px),radial-gradient(rgba(120,90,50,.05) 1px,transparent 1px);background-size:7px 7px,13px 13px;background-position:0 0,3px 5px}
.hand{font-family:'Caveat',cursive}
.disp{font-family:'Fraunces',serif}
.stitch{border:2px dashed rgba(43,38,34,.35)}
.stitch-b{border-bottom:2px dashed rgba(43,38,34,.35)}
.stitch-t{border-top:2px dashed rgba(43,38,34,.35)}
.card{background:var(--chalk);border-radius:14px;box-shadow:0 2px 0 rgba(0,0,0,.06),0 8px 24px -12px rgba(60,40,20,.25);transition:outline .2s}
.card:hover{outline:2px dashed rgba(226,85,63,.45);outline-offset:3px}
.mat{background-color:var(--mat);background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px,50px 50px,10px 10px,10px 10px}
.btn{background:var(--tomato);color:#fff;border-radius:999px;padding:.6rem 1.2rem;font-weight:600;box-shadow:0 4px 0 #a83827;transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a83827}
.btn2{background:var(--chalk);border:2px solid var(--ink);border-radius:999px;padding:.45rem 1rem;font-weight:600}
.btn2:hover{background:var(--kraft2)}
.chip{border:1.5px solid var(--ink);border-radius:999px;padding:.3rem .8rem;font-size:.8rem;background:var(--chalk)}
.chip.on{background:var(--mat);color:#fff;border-color:var(--mat)}
.scan{position:absolute;left:0;right:0;height:3px;background:var(--tomato);box-shadow:0 0 18px 4px rgba(226,85,63,.7);animation:scan 1.6s ease-in-out infinite alternate}
@keyframes scan{from{top:0}to{top:100%}}
.spool{width:36px;height:36px;border-radius:50%;border:6px dotted var(--tomato);animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tape:hover{animation:wob .6s}
@keyframes wob{0%,100%{transform:rotate(0)}30%{transform:rotate(-20deg)}60%{transform:rotate(14deg)}}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
input[type=number]{background:var(--kraft);border-radius:8px;padding:.35rem .5rem;width:100%;border:1.5px solid rgba(43,38,34,.25)}
input[type=range]{accent-color:var(--tomato);width:100%}
select{background:var(--chalk);border:1.5px solid var(--ink);border-radius:8px;padding:.35rem .5rem}
canvas{touch-action:none}