*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:40px;color:#fff}header h1{font-size:2.5rem;margin-bottom:10px;font-weight:700}header p{font-size:1.1rem;opacity:.9}.upload-section{margin-bottom:40px}.upload-area{border:3px dashed #fff;border-radius:12px;padding:60px 20px;text-align:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;cursor:pointer}.upload-area:hover,.upload-area.drag-over{border-color:#4caf50;background:#fff3}.upload-content{color:#fff}.upload-icon{font-size:3rem;margin-bottom:20px}.upload-btn{background:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:1rem;transition:background .3s ease}.upload-btn:hover{background:#45a049}.upload-hint{margin-top:10px;opacity:.8;font-size:.9rem}.processing-section{background:#fff;border-radius:12px;padding:30px;box-shadow:0 10px 30px #0003}.video-controls{display:grid;grid-template-columns:1fr 300px;gap:30px;margin-bottom:30px}.video-container{position:relative;background:#000;border-radius:8px;overflow:hidden}#videoPreview{width:100%;height:auto;display:block}.crop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.crop-box{position:absolute;border:2px solid #4CAF50;background:#4caf501a;pointer-events:all;cursor:move;min-width:50px;min-height:50px}.crop-handle{position:absolute;width:12px;height:12px;background:#4caf50;border:2px solid white;border-radius:50%;cursor:pointer}.crop-handle[data-corner=nw]{top:-6px;left:-6px;cursor:nw-resize}.crop-handle[data-corner=ne]{top:-6px;right:-6px;cursor:ne-resize}.crop-handle[data-corner=sw]{bottom:-6px;left:-6px;cursor:sw-resize}.crop-handle[data-corner=se]{bottom:-6px;right:-6px;cursor:se-resize}.controls{display:flex;flex-direction:column;gap:20px}.time-control{display:flex;flex-direction:column;gap:10px}.time-control label{font-weight:600;color:#333}#timeSlider{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}#timeSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer}#timeSlider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer;border:none}#timeDisplay{font-weight:600;color:#666}.crop-info{background:#f5f5f5;padding:15px;border-radius:8px;font-size:.9rem}.crop-info p{margin-bottom:5px}.action-buttons{display:flex;flex-direction:column;gap:10px}.primary-btn,.secondary-btn{padding:12px 24px;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:600}.primary-btn{background:#4caf50;color:#fff}.primary-btn:hover{background:#45a049;transform:translateY(-2px)}.primary-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.secondary-btn{background:#fff;color:#666;border:2px solid #ddd}.secondary-btn:hover{border-color:#bbb;color:#333}.progress-section{margin:20px 0}.progress-bar{width:100%;height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#45a049);width:0%;transition:width .3s ease}#progressText{text-align:center;color:#666;font-weight:500}.result-section{text-align:center}.result-preview{display:inline-flex;flex-direction:column;align-items:center;gap:20px;padding:20px;background:#f9f9f9;border-radius:8px;border:2px solid #4CAF50}#resultGif{border:2px solid #ddd;border-radius:4px;background:#fff}.result-info p{font-size:1.1rem;font-weight:600;color:#4caf50;margin-bottom:10px}footer{text-align:center;margin-top:40px;color:#fff;opacity:.8}@media (max-width: 768px){.container{padding:15px}header h1{font-size:2rem}.video-controls{grid-template-columns:1fr;gap:20px}.upload-area{padding:40px 15px}.processing-section{padding:20px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus,input:focus,.crop-box:focus{outline:2px solid #4CAF50;outline-offset:2px}.loading{pointer-events:none;opacity:.6}.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f3f3f3;border-top:2px solid #4CAF50;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}