.notepad-paper{position:relative;width:100%;min-height:300px;aspect-ratio:4/3;background-color:#fffdf5;background-image:radial-gradient(circle,#122c3560 .85px,transparent .9px);background-size:18px 18px;background-position:9px 9px;border:1px solid #122c3570;box-shadow:inset 0 0 0 5px #fffdf5;overflow:hidden;isolation:isolate}
#notepad-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background:transparent}
#notepad-canvas[data-tool="eraser"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='14' fill='white' fill-opacity='.35' stroke='%23173641' stroke-width='1.5'/%3E%3C/svg%3E") 12 12,cell}
.notepad-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 15px}
#notepad-pen,#notepad-eraser,#notepad-clear{border:1px solid #122c35;background:#f8f5ed;padding:8px 12px;font:700 11px/1.4 'Courier New',monospace;box-shadow:2px 2px 0 #122c35;min-height:35px}
#notepad-pen[aria-pressed="true"],#notepad-eraser[aria-pressed="true"]{background:#d6eb74;box-shadow:inset 0 0 0 1px #122c35}
#notepad-pen:hover,#notepad-eraser:hover,#notepad-clear:hover{background:#e8edcf}
#notepad-clear{margin-left:auto}
#notepad-status{font:10px/1.7 'Courier New',monospace;color:#485b60;margin-top:14px;min-height:1.7em}
@media(max-width:900px){.notepad-paper{min-height:300px;aspect-ratio:3/4}.notepad-toolbar{gap:8px}#notepad-pen,#notepad-eraser,#notepad-clear{padding:10px 12px;min-height:40px}#notepad-status{font-size:9px}}
@media print{.notepad-toolbar,#notepad-status{display:none!important}.notepad-paper{box-shadow:none;break-inside:avoid}}