.video-gif-workflow{gap:clamp(1.25rem,3vw,2.2rem);display:grid}.video-gif-upload{text-align:center;justify-items:center;gap:.75rem;padding:clamp(2rem,7vw,5rem) clamp(1rem,4vw,3rem);display:grid}.video-gif-upload h2,.video-gif-upload p{margin:0}.video-gif-upload p{color:#60759a}.video-gif-upload small{color:#63779a;line-height:1.5}.video-gif-upload-icon{color:#7442ed;background:#f0eafe;border-radius:20px;place-items:center;width:68px;height:68px;font-size:2rem;display:grid}.video-gif-editor{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:1.2rem;display:grid}.video-gif-source,.video-gif-settings{background:#fbfcff;border:1px solid #d5e1f2;border-radius:20px;padding:clamp(1rem,2.5vw,1.6rem)}.video-gif-stage,.video-gif-result-stage{background:#0b1630;border:1px solid #cfdbec;border-radius:16px;place-items:center;min-height:260px;margin-top:1rem;padding:.75rem;display:grid;overflow:hidden}.video-gif-stage video{object-fit:contain;width:100%;height:auto;max-height:520px;display:block}.video-gif-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1rem 0;display:grid}.video-gif-meta div{background:#f0f5fc;border-radius:12px;min-width:0;padding:.75rem}.video-gif-meta dt{color:#63789b;font-size:.78rem;font-weight:700}.video-gif-meta dd{color:#10244d;text-overflow:ellipsis;white-space:nowrap;margin:.25rem 0 0;font-weight:850;overflow:hidden}.video-gif-notice{color:#705100;background:#fff7df;border-radius:12px;gap:.55rem;margin:.8rem 0 1rem;padding:.75rem;font-size:.86rem;line-height:1.55;display:flex}.video-gif-time-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1rem;display:grid}.video-gif-time-grid label{color:#12244d;gap:.55rem;font-weight:850;display:grid}.video-gif-time-grid input[type=number]{color:#081b47;min-height:48px;font:inherit;background:#fff;border:1px solid #cbdaf0;border-radius:12px;padding:0 .8rem;font-weight:850}.video-gif-time-grid input[type=range]{accent-color:#7442ed;width:100%;min-height:30px}.video-gif-clip-duration{color:#5634c7;margin:.55rem 0;font-weight:850;display:block}.video-gif-play{justify-content:center;width:100%}.video-gif-options{border:0;margin:1rem 0 0;padding:0}.video-gif-options legend{color:#12244d;margin-bottom:.55rem;font-weight:850}.video-gif-options>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;display:grid}.video-gif-options button{color:#203760;min-height:44px;font:inherit;cursor:pointer;background:#fff;border:1px solid #cbdaf0;border-radius:12px;padding:.5rem;font-weight:800}.video-gif-options button[aria-pressed=true]{color:#5b30d5;background:#f1ecff;border-color:#7442ed;box-shadow:0 0 0 3px #7442ed1a}.video-gif-create,.video-gif-cancel{justify-content:center;width:100%;min-height:56px;margin-top:1rem}.video-gif-progress{grid-template-columns:1fr auto;align-items:center;gap:.75rem;margin-top:1rem;display:grid}.video-gif-progress progress{accent-color:#7442ed;width:100%;height:14px}.video-gif-progress output{color:#5030bd;text-align:right;min-width:3.2rem;font-weight:850}.video-gif-status{color:#267153;min-height:1.4em;margin:.65rem 0 0}.video-gif-result{background:#fbfcff;border:1px solid #d5e1f2;border-radius:20px;grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr);gap:1.2rem;padding:clamp(1rem,2.5vw,1.6rem);display:grid}.video-gif-result-stage{background-color:#eef4fd;background-image:linear-gradient(45deg,#dfe9f7 25%,#0000 25%),linear-gradient(-45deg,#dfe9f7 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#dfe9f7 75%),linear-gradient(-45deg,#0000 75%,#dfe9f7 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;margin:0}.video-gif-result-stage img{object-fit:contain;width:100%;height:auto;max-height:520px;display:block}@media (width<=980px){.video-gif-editor,.video-gif-result{grid-template-columns:1fr}.video-gif-result-stage{margin-top:.5rem}}@media (width<=600px){.video-gif-time-grid,.video-gif-meta{grid-template-columns:1fr}.video-gif-options button{min-width:0}.video-gif-stage{min-height:180px}.video-gif-source,.video-gif-settings{padding:.9rem}.video-gif-result-stage{min-height:180px;padding:.6rem}}