body{color:#212121;background-color:#fafafa;margin:0;padding:20px;font-family:Roboto,sans-serif}#root{justify-content:center;align-items:flex-start;min-height:100vh;display:flex}.app-container{background-color:#fff;border-radius:12px;flex-direction:column;gap:10px;width:100%;max-width:80vw;padding:40px;display:flex;box-shadow:0 6px 18px #00000026}h1{text-align:center;color:#3f51b5;margin-bottom:30px}.video-inputs{justify-content:space-around;gap:30px;display:flex}.video-input-group{background-color:#f9f9f9;border-radius:6px;flex-direction:column;flex:1;align-items:center;gap:10px;padding:15px;display:flex}.video-input-group label{color:#757575;font-weight:700}.video-input-group input[type=file]{width:100%;max-width:300px;padding:10px;font-size:16px;transition:border-color .3s}.video-input-group input[type=file]:focus{border-color:#1976d2;outline:none;box-shadow:0 0 5px #1976d24d}.video-previews{justify-content:space-around;gap:30px;display:flex}.video-preview-item{text-align:center;flex-direction:column;flex:1;align-items:center;display:flex}.video-preview-item video{background-color:#333;border:1px solid #ccc;border-radius:4px;width:100%;max-width:1200px}.video-preview-item canvas{background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;width:100%;max-width:1200px;height:337.5px}.control-button:active{transition:transform .9s;transform:scale(.5)}.controls{flex-direction:column;align-items:center;gap:20px;margin-top:30px;display:flex}.offset-controls{box-sizing:border-box;background-color:#eee;border-radius:12px;align-items:center;gap:20px;max-width:calc(80vw - 80px);padding:20px 30px;display:flex;overflow-x:auto;box-shadow:0 2px 6px #0000001a}.offset-controls button{color:#fff;cursor:pointer;letter-spacing:.5px;background-color:#1976d2;border:none;border-radius:4px;padding:12px 24px;font-size:16px;font-weight:500;transition:background-color .3s,box-shadow .3s;box-shadow:0 2px 4px #0003}.offset-controls button:hover{background-color:#1565c0;box-shadow:0 4px 6px #0000004d}.offset-controls button:disabled{cursor:not-allowed;background-color:#ccc}.offset-display{color:#546e7a;text-align:center;min-width:120px;font-size:1.2em;font-weight:700}.merge-button{color:#fff;cursor:pointer;letter-spacing:.5px;background-color:#1976d2;border:none;border-radius:4px;padding:14px 32px;font-size:18px;font-weight:500;transition:background-color .3s,box-shadow .3s;box-shadow:0 2px 4px #0003}.merge-button:hover{background-color:#1565c0;box-shadow:0 4px 6px #0000004d}.merge-button:disabled,.offset-controls button:disabled{color:#616161;cursor:not-allowed;box-shadow:none;background-color:#bdbdbd}#ffmpeg-command-container{overflow-x:auto}.info-message{color:#333;text-align:center;background-color:#e7f3ff;border:1px solid #b3d9ff;border-radius:5px;margin-top:20px;padding:15px}.info-message strong{color:#1565c0}input[type=text]{border:1px solid #bdbdbd;border-radius:4px;width:-webkit-fill-available;padding:10px;font-size:16px;transition:border-color .3s}input[type=text]:focus{border-color:#1976d2;outline:none;box-shadow:0 0 5px #1976d24d}