body,html{height:100%}#dropText,h1{margin-bottom:10px}#file-chosen,#status,p{text-align:center;color:#7f8c8d}*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}body{background-color:#f5f5f5;color:#333}.container{max-width:900px;margin:0 auto;padding:20px}#ffwarn,.upload-section{margin-bottom:20px;width:100%}h1{text-align:center;color:#2c3e50}p{margin-bottom:30px}.upload-section{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center}.drop-area{width:100%;max-width:400px;min-height:80px;border:2px dashed #3498db;border-radius:6px;background:#ecf6fc;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:border-color .3s,background .3s;margin-bottom:15px;user-select:none}.drop-area.dragover{border-color:#2ecc71;background:#e0ffe7}#dropText{color:#3498db;font-size:1.1em;text-align:center}#file-chosen{margin-bottom:8px;font-style:italic}input[type=file]{display:none;margin-bottom:15px}::file-selector-button,button{background-color:#3498db;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;transition:background-color .3s}button:hover{background-color:#2980b9}button:disabled{background-color:#95a5a6;cursor:not-allowed}.progress-container{margin:20px 0;padding:5px;border-radius:8px;background-color:#d3d3d3;width:100%}.progress-bar{height:10px;background-color:#3498db;width:0%;border-radius:5px;transition:width .3s}#status{margin-top:8px;font-size:14px}.video-container{margin:20px auto;background-color:#222;padding:10px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.2);height:100%;width:fit-content;display:flex;max-height:90vh;max-width:95vw}#ffwarn,.info-section{box-shadow:0 2px 10px rgba(0,0,0,.1)}video{width:100%;border-radius:4px;display:block}.info-section{background-color:#fff;padding:20px;border-radius:8px}.info-section h2{margin-bottom:10px;color:#2c3e50}.info-section ol{padding-left:20px}.info-section li{margin-bottom:8px;line-height:1.5}.video-container-right{float:right;max-height:90vh;padding:0;border:.25em solid #000}.video-container-right>video{max-height:inherit}.container-left{float:left}.toggle-container{display:flex;justify-content:center;align-items:center;margin-top:20px}#layoutToggle{margin-left:10px}@media (min-width:900px){#main-wrapper.vertical-layout{display:flex;align-items:flex-start}#main-wrapper.vertical-layout .container{flex:1;max-width:none;margin:0}#main-wrapper.vertical-layout .video-container{width:auto;height:100vh;margin:0 20px;padding:0;background-color:transparent;box-shadow:none}#main-wrapper.vertical-layout .video-container video{height:100%;width:auto}}hr{width:100%}footer{bottom:0;width:100%;background-color:#ccc}footer a{color:#3498db;text-decoration:none;margin:0 15px;font-size:16px;transition:color .3s}footer a:hover{color:#2980b9}#ffwarn{display:none;color:#dc143c;border-radius:8px;border:.1em solid #dc143c;flex-direction:column;align-items:center;padding:1em}