:root{font-family:system-ui,sans-serif;color:#173b39;background:#edf3f2;font-size:17px}*{box-sizing:border-box}body{margin:0}header{background:#173b39;color:white;padding:22px}header strong{background:#f3d981;color:#173b39;padding:7px;border-radius:6px}main{max-width:1180px;margin:20px auto;display:grid;grid-template-columns:1fr 2fr;gap:18px;padding:0 14px}section{background:white;border:1px solid #bdceca;border-radius:12px;padding:20px}.wide{grid-column:1/-1}label{display:block;margin:10px 0}input,select,textarea,button{font:inherit;border:1px solid #92afa7;border-radius:7px;padding:12px;max-width:100%}input,textarea,select{display:block;width:100%;background:#fff;color:#173b39}textarea{min-height:90px}button{cursor:pointer;margin:4px;background:#e9f3ee;color:#173b39;min-height:48px}button:disabled{cursor:default;opacity:.6}#save{background:#166758;color:white}#saveState{font-weight:bold;padding:12px;background:#f5f6df}.tools{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.tools label{min-width:110px}.canvas-wrap{width:100%;height:620px;background:#fff;border:1px solid #acc0ba}canvas{width:100%;height:100%;display:block;touch-action:pan-y pinch-zoom}article{border-top:1px solid #bccdc6;padding:12px;overflow-wrap:anywhere}#identity{overflow-wrap:anywhere;font-size:.85rem}button[aria-pressed=true]{outline:3px solid #173b39}@media(max-width:750px){main{grid-template-columns:1fr}.canvas-wrap{height:470px}h1{font-size:1.5rem}}

canvas[data-touch-drawing=true]{touch-action:none}#touchState{font-weight:bold}#touchMode[aria-pressed=true]{background:#173b39;color:white}