.sg-pad{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.sg-pad canvas{display:block;width:100%;height:auto;aspect-ratio:5/2;cursor:crosshair;touch-action:none;position:relative;z-index:1}
.sg-line{position:absolute;left:8%;right:8%;bottom:24%;border-bottom:1.5px dashed #c9ced8}
.sg-line::before{content:"✕";position:absolute;left:-2px;bottom:4px;color:#b3b9c6;font-size:16px}
.sg-ph{position:absolute;inset:0;display:grid;place-items:center;color:#9aa1ae;font-size:15px;pointer-events:none;padding-bottom:12%}
.sg-tools{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.sg-width{flex:1 1 180px;max-width:280px}
.sg-val{font-variant-numeric:tabular-nums;color:var(--text)}
.sg-colors{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sg-swatches{display:flex;gap:10px;align-items:center}
.sg-sw{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0}
.sg-sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--brand)}
.sg-custom{position:relative;width:36px;height:36px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--border);background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red);cursor:pointer}
.sg-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.sg-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:6px}
.sg-font{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:#111;cursor:pointer;overflow:hidden}
.sg-font[aria-pressed=true]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft),inset 0 0 0 1px var(--brand)}
.sg-fname{font-size:32px;line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-font small{font:12px/1.2 system-ui,sans-serif;color:#6b7280}
.sg-out{display:grid;place-items:center;min-height:150px;margin-top:8px;padding:16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background-color:#fff;background-image:linear-gradient(45deg,#eceef2 25%,transparent 25%,transparent 75%,#eceef2 75%),linear-gradient(45deg,#eceef2 25%,transparent 25%,transparent 75%,#eceef2 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.sg-out.sg-white{background-image:none}
.sg-out img{max-width:100%;max-height:220px;height:auto;display:block}
@media (max-width:480px){.sg-fonts{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-fname{font-size:26px}}
.sg-dl>.btn{flex:1 1 140px}