.mx-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}.mx-controls label{display:flex;flex-direction:column;gap:6px;font-weight:600}.mx-controls input,.mx-controls select{width:100%;box-sizing:border-box;min-height:42px;padding:8px;border:1px solid #becbd6;border-radius:7px;background:#fff;color:#172f43}.mx-controls input[type=color]{padding:3px}.mx-preview{margin:18px 0;overflow:auto;border-radius:10px;background:repeating-conic-gradient(#edf1f4 0% 25%,#fff 0% 50%) 50%/20px 20px}.mx-preview canvas{display:block;max-width:100%;height:auto;margin:auto}.mx-preview canvas[hidden]{display:none}.mx-tool[data-mode=picker] canvas{cursor:crosshair}.mx-info{color:#53667a}.mx-result{margin:16px 0;overflow-wrap:anywhere}.mx-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.mx-swatch{border:1px solid #cdd6df;border-radius:8px;overflow:hidden}.mx-chip{height:65px}.mx-swatch p{padding:0 10px;font-variant-numeric:tabular-nums}.mx-downloads{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.mx-result table{border-collapse:collapse;width:100%}.mx-result td,.mx-result th{padding:9px;text-align:left;border-bottom:1px solid #d9e2e9}.mx-result code{font-size:1rem}.mx-tool button{min-height:42px}.mx-controls button{align-self:end}