/* ToolPetal Discord sticker maker. Builds on discord-gif.css (v2), discord-emoji.css (v1) and discord-art.css (v1). */
.ds2-trim { display: grid; gap: var(--sp-2); }
.ds2-trim input[type="range"] { width: 100%; }
.ds2-trimnote { margin: 0; }
.ds2-name { margin: 0 0 var(--sp-3); max-width: 420px; }
.ds2-name label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.ds2-name input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); padding: 0.7rem 0.8rem; font: inherit; font-size: 16px; color: var(--ink); }
.ds2-name input:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.ds2-namecheck { margin: 0.4rem 0 0; font-size: var(--fs-sm); }
.ds2-namecheck.ok span:first-child { color: var(--ok, #2f7d4f); }
.ds2-namecheck.bad { color: var(--warn); }
.ds2-fmt { margin: 0 0 var(--sp-3); }
.ds2-fmt .dg-seg button { min-height: 48px; }
.ds2-still { margin: 0 0 var(--sp-3); }
.ds2-previews { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ds2-previews { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ds2-full { grid-column: 1 / -1; } }
.ds2-msg { display: flex; gap: 0.75rem; align-items: flex-start; }
.ds2-msg b { display: block; font-size: 15px; margin-bottom: 0.3rem; }
.ds2-ava { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #5865f2; }
.ds2-s160 { width: 160px; height: 160px; }
.ds2-full { margin: 0; text-align: center; min-width: 0; }
.ds2-s320 { width: 320px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
.ds2-full figcaption { margin-top: 0.4rem; font-size: var(--fs-xs); color: var(--muted); }