.gif{--gif-well:#0d0d0d;gap:var(--s-6);flex-direction:column;width:100%;max-width:1120px;margin:0 auto;display:flex;overflow-x:clip}.gif-head{isolation:isolate;align-items:center;gap:var(--s-2);text-align:center;flex-direction:column;display:flex;position:relative}.gif-title{font-size:calc(var(--fs-display) * 1.2);line-height:1.04}.gif-lede{max-width:56ch;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty;margin:0}.gif-grid{gap:var(--s-6);grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start;display:grid}.gif-controls{gap:var(--s-4);flex-direction:column;min-width:0;display:flex}.gif-output{top:calc(var(--control-h) + var(--s-6));align-items:center;gap:var(--s-3);flex-direction:column;min-width:0;display:flex;position:sticky}.gif-image{background:var(--gif-well);border-radius:20px;width:100%;height:auto;display:block}.gif-field{gap:var(--s-2);min-width:0;font-size:var(--fs-body-sm);border:0;flex-direction:column;margin:0;padding:0;display:flex}.gif-field>span:first-child,.gif-field>legend{padding:0;font-weight:500}.gif-row{align-items:center;gap:var(--s-2);min-width:0;display:flex}.gif-row .ui-input,.gif-row select{flex:1;min-width:0}.gif-field select{min-height:var(--control-h);padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font:inherit;color:var(--text)}.gif-pgn{width:100%;min-height:150px;padding:var(--s-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-family:var(--font-mono-stack);font-size:var(--fs-caption);color:var(--text);resize:vertical;line-height:1.5}.gif-bgs{gap:var(--s-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.gif-bgs>legend{margin-bottom:var(--s-2);grid-column:1/-1}.gif-bg{align-items:center;gap:var(--s-1);padding:var(--s-1);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:var(--fs-caption);color:var(--muted);cursor:pointer;flex-direction:column;display:flex}.gif-bg[data-on="1"]{border-color:var(--halo-ring);box-shadow:inset 0 0 0 1px var(--halo-soft);color:var(--text);font-weight:500}.gif-bg-swatch{aspect-ratio:1;width:100%;box-shadow:inset 0 0 0 1px var(--border);border-radius:6px}.gif-settings{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.gif-settings>summary{padding:var(--s-3) var(--s-4);font-weight:500;font-size:var(--fs-body-sm);cursor:pointer}.gif-settings-body{gap:var(--s-3);padding:0 var(--s-4) var(--s-4);flex-direction:column;display:flex}.gif-check{align-items:center;gap:var(--s-2);font-size:var(--fs-body-sm);display:flex}.gif-check input{width:18px;height:18px;accent-color:var(--brand)}.gif-progress{gap:var(--s-2);font-size:var(--fs-caption);color:var(--muted);flex-direction:column;display:flex}.gif-privacy,.gif-meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted);text-wrap:pretty;margin:0}.gif-download{justify-content:center;width:min(100%,360px)}.gif-cta{align-items:flex-start;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--gif-well);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--muted);flex-direction:column;display:flex}.gif-cta a{color:var(--accent-text);font-weight:500;text-decoration:none}.gif-cta a:hover{text-decoration:underline}@media (max-width:860px){.gif-grid{grid-template-columns:minmax(0,1fr)}.gif-output{order:-1;position:static}.gif-bgs{gap:var(--s-1)}}
