*{box-sizing:border-box;margin:0;padding:0}body{background:#0f0f0f;color:#fff;font-family:Helvetica Neue,Arial,sans-serif;min-height:100vh;padding:20px}.container{max-width:780px;margin:0 auto}.header{text-align:center;padding:30px 0 20px}.header h1{font-size:28px;font-weight:700;color:#fff}.header h1 span{color:#ff0000}.header p{color:#aaa;margin-top:8px;font-size:14px}.drop-zone{border:2px dashed #444;border-radius:16px;padding:50px 30px;text-align:center;cursor:pointer;transition:all .3s;background:#1a1a1a;margin-bottom:24px}.drop-zone.drag-over,.drop-zone:hover{border-color:#ff0000;background:#1f0000}.drop-zone .icon{font-size:48px;margin-bottom:12px}.drop-zone h2{font-size:18px;margin-bottom:8px}.drop-zone p{color:#888;font-size:13px}.drop-zone input{display:none}.file-selected{border-color:#ff0000;background:#1a0000}.file-selected h2{color:#ff4444}.settings{background:#1a1a1a;border-radius:16px;padding:24px;margin-bottom:24px}.settings h3{font-size:15px;color:#aaa;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.duration-presets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.preset-btn{padding:8px 18px;border-radius:20px;border:2px solid #333;background:transparent;color:#ccc;cursor:pointer;font-size:14px;transition:all .2s}.preset-btn.active,.preset-btn:hover{border-color:#ff0000;color:#fff}.preset-btn.active{background:#ff0000}.custom-duration{display:flex;align-items:center;gap:12px}.custom-duration input{width:100px;padding:8px 14px;border-radius:8px;border:2px solid #333;background:#111;color:#fff;font-size:16px;text-align:center}.custom-duration input:focus{outline:none;border-color:#ff0000}.custom-duration label{color:#888;font-size:14px}.generate-btn{width:100%;padding:16px;background:#ff0000;color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;margin-bottom:24px;letter-spacing:.5px}.generate-btn:hover:not(:disabled){background:#cc0000;transform:translateY(-1px)}.generate-btn:disabled{background:#444;cursor:not-allowed;transform:none}.progress-area{background:#1a1a1a;border-radius:16px;padding:24px;margin-bottom:24px;display:none}.progress-area.visible{display:block}.step-list{list-style:none;margin-bottom:20px}.step-list li{padding:8px 0;font-size:14px;color:#555;display:flex;align-items:center;gap:10px}.step-list li.active{color:#fff}.step-list li.done{color:#4caf50}.step-list li.error{color:#f44336}.step-icon{font-size:16px;width:20px;text-align:center}.progress-bar-wrap{background:#333;border-radius:8px;height:8px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#ff0000,#ff6600);border-radius:8px;transition:width .4s ease;width:0}.progress-label{text-align:right;font-size:12px;color:#888;margin-top:6px}.waveform-wrap{margin-top:16px;display:none}.waveform-wrap.visible{display:block}.waveform-wrap h4{font-size:13px;color:#888;margin-bottom:8px}canvas{width:100%;height:80px;border-radius:8px;background:#111;display:block}.waveform-legend{display:flex;gap:16px;margin-top:6px;font-size:11px;color:#666}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px}.result-area{background:#1a1a1a;border-radius:16px;padding:24px;margin-bottom:24px;display:none;text-align:center}.result-area.visible{display:block}.result-area h3{margin-bottom:16px;color:#4caf50;font-size:20px}.result-area video{width:100%;max-height:360px;border-radius:10px;background:#000;margin-bottom:16px}.result-meta{color:#888;font-size:13px;margin-bottom:16px}.download-btn{display:inline-block;padding:12px 32px;background:#4caf50;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;transition:background .2s}.download-btn:hover{background:#388e3c}.reset-btn{width:100%;padding:12px;background:transparent;color:#888;border:2px solid #333;border-radius:10px;font-size:14px;cursor:pointer;transition:all .2s;margin-top:12px}.reset-btn:hover{border-color:#666;color:#fff}.loading-overlay{text-align:center;padding:20px;display:none}.loading-overlay.visible{display:block}.spinner{width:32px;height:32px;border:3px solid #333;border-top-color:#ff0000;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(1turn)}}.note{background:#111;border-left:3px solid #ff6600;padding:12px 16px;border-radius:4px;font-size:13px;color:#aaa;margin-bottom:20px}.note strong{color:#ff6600}