/* Adapted from Brad Traversy's MIT Drawing App; see TEMPLATE.json. */
*{box-sizing:border-box}body{margin:0;padding:24px 16px;background:#f5f5f5;color:#263c55;font:16px/1.5 system-ui,sans-serif}main{width:min(100%,800px);margin:auto}h1{margin:0 0 8px}canvas{display:block;width:100%;height:auto;background:white;border:2px solid #3f77ac;touch-action:none}.toolbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#3f77ac;color:white;padding:14px}.toolbox label{display:flex;align-items:center;gap:8px}.toolbox button{min-height:44px;padding:10px 14px;background:white;color:#263c55;border:0;border-radius:5px;font:600 14px system-ui;cursor:pointer}.toolbox input{height:44px;width:50px}output{min-width:26px;text-align:center}button:focus-visible,input:focus-visible{outline:3px solid #ffc56a;outline-offset:3px}p{overflow-wrap:anywhere}

dialog{width:420px;max-width:calc(100vw - 32px);padding:24px;border:1px solid #8797a8;border-radius:12px;color:#263c55}dialog::backdrop{background:#13243399}.dialog-actions{display:flex;justify-content:flex-end;gap:12px}.dialog-actions button{min-height:44px;padding:10px 14px;border:1px solid #3f77ac;border-radius:6px;background:white;color:#263c55;cursor:pointer}#confirm-clear{background:#3f77ac;color:white}