.pad-wrap{background:linear-gradient(45deg,#f4f6f9 25%,#0000 25% 75%,#f4f6f9 75%) 0 0/16px 16px,linear-gradient(45deg,#f4f6f9 25%,#fff 25% 75%,#f4f6f9 75%) 8px 8px/16px 16px;border:1px solid #d3d8e0;border-radius:10px;position:relative}#pad{touch-action:none;cursor:crosshair;width:100%;height:clamp(180px,42vw,300px);display:block}.pad-hint{font-family:var(--serif);color:#a8b0bd;pointer-events:none;place-items:center;margin:0;font-size:20px;display:grid;position:absolute;inset:0}.pad-line{background:var(--foil);opacity:.6;pointer-events:none;height:2px;position:absolute;bottom:22%;left:8%;right:8%}.controls{flex-wrap:wrap;justify-content:space-between;gap:10px 16px;margin:14px 0 10px;display:flex}.swatches,.widths{gap:6px;display:flex}.swatch input,.widths input{opacity:0;position:absolute}.swatch span,.widths span{color:#1b2230;cursor:pointer;background:#fff;border:1px solid #d3d8e0;border-radius:999px;align-items:center;gap:6px;padding:7px 11px;font-size:14px;display:inline-flex}.swatch span:before{content:"";background:var(--c);border-radius:50%;width:12px;height:12px}.swatch input:checked+span,.widths input:checked+span{border-color:var(--board);box-shadow:inset 0 0 0 1px var(--board);font-weight:700}.swatch input:focus-visible+span,.widths input:focus-visible+span{outline:3px solid var(--foil);outline-offset:2px}.pad-actions{gap:8px;display:flex}.pad-actions .ghost{color:#1b2230;border-color:#d3d8e0}.pad-actions .ghost:disabled{opacity:.4;cursor:default}.white{align-items:center;gap:6px;margin:14px 0;font-size:15px;display:flex}.white input{width:18px;height:18px;accent-color:var(--board)}.make:disabled{opacity:.5}.result img{background:linear-gradient(45deg,#eef1f5 25%,#0000 25% 75%,#eef1f5 75%) 0 0/12px 12px,linear-gradient(45deg,#eef1f5 25%,#fff 25% 75%,#eef1f5 75%) 6px 6px/12px 12px;border-radius:6px;max-width:100%;max-height:160px;margin:0 auto 14px;display:block}.howto ul{word-break:keep-all}