.gif-video-preview{display:block;width:100%;max-height:360px;border-radius:.5rem;background-color:#000}.upload-icon{display:block;font-size:2rem;color:var(--color-primary);margin-bottom:.5rem}.video-info{margin-top:.5rem;font-size:.875rem;color:var(--color-slate-600)}.gif-settings{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1rem}.gif-setting{border:1px solid var(--color-slate-200);border-radius:.5rem;background-color:#fff;padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;min-width:0}.gif-setting legend{padding:0 .25rem;font-weight:700;font-size:.9375rem}.gif-setting input[type=text],.gif-setting input[type=number],.gif-select{width:100%;min-width:0;padding:.5rem .75rem;border-radius:.5rem;border:1px solid var(--color-slate-300);background-color:#fff;font-size:.875rem}.gif-select{width:auto}.gif-setting .time-input label,.gif-setting .size-input label,.gif-setting .size-input span{white-space:nowrap;flex-shrink:0}.gif-setting input:disabled{background-color:var(--color-slate-100);color:var(--color-slate-500)}.size-presets .btn.active{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.gif-hint{font-size:.8125rem;color:var(--color-slate-500);line-height:1.6}.gif-estimate{margin-top:1rem;font-size:.875rem;color:var(--color-slate-700)}.gif-estimate.estimate-error{color:var(--color-error-dark)}.gif-result-image{display:block;max-width:100%;height:auto;margin:0 auto;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.result-container>.btn{justify-self:center}.gif-result-info{margin-top:.75rem;white-space:pre-line}.gif-notes ul{list-style:disc;padding-left:1.25rem;display:grid;gap:.5rem;font-size:.9375rem;line-height:1.7;color:var(--color-slate-700)}.settings-section{margin-top:1.5rem}