.app{grid-template-rows:42px minmax(0,1fr) auto}
.dock{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:10px 16px max(10px,env(safe-area-inset-bottom))}
.tool-row,.material-row,.supply-row{display:flex;align-items:center;gap:10px;min-width:0}
.tool-btn{font:700 14px Tahoma,sans-serif;height:38px;min-width:95px}
.tool-row .material{margin-left:auto;min-width:140px;font-size:13px}
.material b{font-size:14px}.palette{margin:0;gap:7px}.sizebox{font-size:14px}.sizebox input{width:130px}
.supply-row{min-height:36px;font-size:14px}.reserve{display:flex;gap:8px;align-items:center;white-space:nowrap}
.reserve meter{width:105px;height:18px}.reserve output{min-width:39px;font-variant-numeric:tabular-nums}
.refill{min-height:36px;padding:6px 14px;font:700 14px Tahoma,sans-serif;background:#eee9dd;border:2px solid;border-color:#fff #777 #777 #fff;cursor:pointer;white-space:nowrap}
.refill[data-paint="true"]{border-left:12px solid var(--paint)}.refill:disabled{opacity:.6;cursor:wait}
#supplyHint{color:#45443e;font-size:13px}.refill:focus-visible,.tool-btn:focus-visible,.swatch:focus-visible{outline:3px solid #5842d1;outline-offset:3px}
.easel{height:min(66vh,690px);max-height:calc(100% - 56px)}
.hand-rig[data-tool="knife"],.hand-rig[data-tool="marker"]{width:430px}
@media(max-width:760px){
 .app{height:100dvh;grid-template-rows:38px minmax(0,1fr) auto}.dock{gap:8px;padding:9px 9px max(9px,env(safe-area-inset-bottom))}
 .tool-row{overflow-x:auto;padding:2px 2px 4px;flex:none;touch-action:pan-x;gap:6px}.tool-btn{flex:0 0 auto;min-width:0;padding:0 10px;height:39px}
 .tool-row .material{display:none}.material-row{flex-wrap:wrap;gap:9px}.palette{order:0;width:auto;justify-content:flex-start;gap:6px}.swatch{width:25px;height:25px;flex:none}
 .sizebox{margin-left:auto;gap:5px;font-size:14px}.sizebox input{width:80px}
 .supply-row{flex-wrap:wrap;gap:6px 10px}.reserve{font-size:14px;gap:6px}.reserve meter{width:64px}.refill{margin-left:auto;padding:6px 8px;font-size:14px}#supplyHint{flex-basis:100%;line-height:1.25}
 .easel{width:90vw;height:100%;max-height:calc(100% - 45px)}.hand-rig[data-tool="knife"],.hand-rig[data-tool="marker"]{width:285px}
}