/* OptimizeGIF - Add Text to GIF: live preview */
@font-face { font-family: 'OG Anton'; src: url('/assets/fonts/Anton-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'OG Archivo'; src: url('/assets/fonts/ArchivoBlack-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'OG Bebas'; src: url('/assets/fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'OG Marker'; src: url('/assets/fonts/PermanentMarker-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'OG Comic'; src: url('/assets/fonts/ComicNeue-Bold.ttf') format('truetype'); font-display: swap; }

#ogImgWrap { position: relative; }
.tx-line {
    position: absolute; left: 4%; right: 4%; text-align: center; line-height: 1.1; pointer-events: none;
    white-space: pre-wrap; overflow-wrap: anywhere; paint-order: stroke fill;
}
.tx-line--top { top: 4%; }
.tx-line--bottom { bottom: 4%; }
.tx-bar { position: absolute; left: 0; right: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4%; line-height: 1.1; white-space: pre-wrap; }
.tx-bar--top { top: 0; }
.tx-bar--bottom { bottom: 0; }
.font-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.font-pick .preset { text-align: center; padding: 9px 6px; }
.font-pick .preset__name { justify-content: center; font-size: 1rem; font-weight: 400; }
.color-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }