*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f5f5;justify-content:center;align-items:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}.app{background:#fff;border:3px solid #000;gap:0;display:flex;box-shadow:0 4px 20px #00000026}.toolbar{background:#fff;border-right:3px solid #000;flex-direction:column;align-items:center;gap:6px;width:80px;padding:20px 10px;display:flex}.color-swatch{cursor:pointer;border:3px solid #0000;border-radius: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,.eraser,.separator{display:none}.canvas-wrap{cursor:crosshair;background:#fff;width:520px;height:520px;padding:20px;position:relative}canvas{border:3px solid #000;width:480px;height:480px;display:block}