:root{--ink: #111;--paper: #fff;--hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", "Marker Felt", cursive;--wobble: 255px 15px 225px 15px / 15px 225px 15px 255px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font:17px/1.3 var(--hand);color:var(--ink);background:var(--paper)}button,input,select{font:inherit;color:inherit}#scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;filter:url(#rough)}#scene *,#tree *,#machine svg *{fill:none;stroke:var(--ink);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}#scene .solid{fill:var(--paper)}button{padding:6px 14px;border:2px solid var(--ink);border-radius:var(--wobble);background:var(--paper);box-shadow:2px 2px 0 var(--ink);cursor:pointer}button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--ink);color:var(--paper)}main{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:44px 12px 16px}#logo{--w: clamp(100px, min(40vw, 18vh), 240px);margin:0;display:flex;flex-direction:column;align-items:center}#logo img{display:block;width:calc(var(--w) * var(--k, 1));height:auto;margin-block:calc(var(--w) * var(--k, 1) * var(--r) * var(--t) * -1) calc(var(--w) * var(--k, 1) * var(--r) * var(--b) * -1);filter:grayscale(1) contrast(1.8) brightness(.75)}#logo img:nth-child(1){--r: .576;--t: .08;--b: .19}#logo img:nth-child(2){--r: .786;--t: .17;--b: .17}#logo img:nth-child(3){--r: .291;--t: .14;--b: .27;--k: 1.5}#stage{position:relative;flex:1;width:min(420px,92vw);min-height:240px;max-height:52vh;margin:8px 0}#tree{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:5 / 6;transform:translate(-50%);pointer-events:none;filter:url(#rough)}#machine{position:absolute;padding:0;border:0;border-radius:0;background:none;box-shadow:none}#machine.in-tree{left:50%;top:34%;width:13%}#machine.on-ground{left:4%;bottom:4%;width:24%}#machine svg{display:block;width:100%;height:auto;overflow:visible;filter:url(#rough)}#machine svg *{fill:var(--paper);stroke-width:3px}#machine.bump{animation:bump .25s ease-out}#machine.fallen{animation:fall .9s cubic-bezier(.5,0,1,.6) forwards;pointer-events:none}@keyframes bump{0%{transform:scale(1.18,.8)}60%{transform:scale(.94,1.08)}to{transform:scale(1)}}@keyframes fall{0%{transform:translateY(0)}to{transform:translateY(var(--fall, 200px))}}#bubble{position:absolute;left:50%;top:4%;transform:translate(-50%);padding:4px 12px;border:2px solid var(--ink);border-radius:var(--wobble);background:var(--paper);white-space:nowrap}#blocks{display:flex;align-items:stretch;justify-content:center;gap:6px;flex-wrap:wrap;width:min(560px,96vw)}#blocks .arrow{align-self:center;font-size:22px}.block{flex:1 1 120px;max-width:190px;padding:6px 10px;border:2px solid var(--ink);border-radius:var(--wobble);background:var(--paper);box-shadow:2px 2px 0 var(--ink);text-align:center}.block small{display:block;opacity:.6}.block.fire{background:var(--ink);color:var(--paper)}#controls{width:min(420px,92vw);margin-top:12px;padding:8px 14px;border:2px solid var(--ink);border-radius:var(--wobble);background:var(--paper);text-align:center}#controls h2{margin:0 0 2px}#controls p{margin:4px 0}.row{display:flex;justify-content:center;gap:10px}#menu-toggle{position:fixed;z-index:11;top:8px;left:8px}#drawer{position:fixed;z-index:10;top:0;bottom:0;left:0;width:min(300px,85vw);padding:52px 14px 14px;overflow:auto;background:var(--paper);border-right:3px solid var(--ink);transform:translate(-105%);transition:transform .2s}#drawer.open{transform:none}#drawer h2,#drawer h3{margin:4px 0}#drawer ul{list-style:none;margin:0 0 12px;padding:0}#drawer li{display:flex;gap:6px;margin-bottom:8px}#drawer .pick{flex:1;text-align:left}#drawer .pick small{display:block;opacity:.6}#drawer .remove{padding:0 10px}dialog{width:min(380px,92vw);padding:14px;border:3px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit}dialog::backdrop{background:#ffffffb3}dialog h2{margin:0 0 8px}dialog label{display:block;margin:8px 0}dialog input,dialog select{width:100%;padding:4px 8px;border:2px solid var(--ink);border-radius:6px;background:var(--paper)}dialog menu{display:flex;gap:8px;padding:0;margin:12px 0 0}#pad{display:block;width:100%;max-width:min(280px,34vh);aspect-ratio:1;margin:0 auto;border:2px dashed var(--ink);border-radius:12px;background:var(--paper);touch-action:none;cursor:crosshair}@media(prefers-reduced-motion:reduce){#drawer{transition:none}#machine.bump{animation:none}}
