*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f5f5;flex-direction:column;justify-content:center;align-items:center;gap:15px;min-height:100vh;padding:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}.tool-name{color:#333;text-align:center;min-height:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:18px;font-weight:500}.app{background:#fff;border:3px solid #000;gap:0;width:fit-content;max-width:100%;display:flex;box-shadow:0 4px 20px #00000026}.toolbar{background:#fff;border-right:3px solid #000;flex-direction:column;flex-shrink:0;align-items:center;gap:6px;width:80px;padding:20px 10px;display:flex}.color-swatch{cursor:pointer;border:3px solid #0000;border-radius:0;flex-shrink:0;width:45px;height:45px;transition:border-color .2s;position:relative}.color-swatch:hover{opacity:.8}.color-swatch.active{border-color:#000}.color-swatch .chord-label{display:none}.eraser{background:repeating-conic-gradient(#e0e0e0 0% 25%,#fff 0% 50%) 50%/16px 16px;border:3px solid #ccc}.eraser.active{border-color:#000}.separator{display:none}.canvas-wrap{cursor:crosshair;background:#fff;justify-content:center;align-items:center;width:520px;max-width:calc(100vw - 100px);height:auto;padding:20px;display:flex;position:relative}canvas{aspect-ratio:1;border:3px solid #000;width:100%;max-width:480px;height:auto;display:block}@media (width<=640px){body{padding:5px}.app{flex-direction:column;max-width:calc(100vw - 10px)}.toolbar{border-bottom:3px solid #000;border-right:none;flex-flow:wrap;justify-content:center;gap:8px;width:100%;padding:10px}.color-swatch{width:40px;height:40px}.canvas-wrap{width:100%;max-width:100%;padding:15px}canvas{max-width:100%}}