:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#131313;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary: #F54900}a{text-decoration:none}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border:none}button:hover{cursor:pointer}.iconButton{background-color:transparent;color:#fff;transition:color ease .2s;display:flex;align-items:center;justify-content:center;height:36px;width:36px;border:none;border-radius:4px;font-size:18px}.iconButton:hover{color:var(--primary)}input{background-color:#0a0a0a;padding:5px;border:solid #333 1px;border-radius:12px;text-align:center;transition:border .25s ease}input:focus{outline:none;border-color:var(--primary)}.dialog{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;width:100vw;height:100vh;position:absolute;top:0;left:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;z-index:1000}#app{width:100vw;height:100vh;display:flex;flex-direction:column}#main{height:100%;display:flex;flex-direction:row}#overlay{margin:1em;display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;gap:2px;right:0}#home-view{width:100%;height:100%}#context-selector{background-color:#131313;border-radius:16px;max-width:90%;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center}#context-selector #header{margin:.5em;display:flex;justify-content:right;align-items:center;width:calc(100% - 1em)}#context-options{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em;margin:1em 2em 2em}.contextButton{background-color:transparent;color:#fff;transition:border ease .25s,color ease .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;height:5em;width:5em;border:solid #333 1px;border-radius:16px;font-size:36px}.contextButton:hover{color:var(--primary);cursor:pointer;border-color:var(--primary)}.contextButton .label{font-size:18px}.contextButton .description{font-size:12px}#app-bar{display:flex;flex-direction:row;align-items:center;background-color:#131313;box-shadow:#00000040 0 5px 20px}#logo{margin:.5em;width:48px;height:48px;-webkit-user-select:none;user-select:none}#button-bar{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.buttonBox{display:flex;flex-direction:row;align-items:center;margin-right:1em}#project-input{width:50%;max-width:100%}.dropdown{position:relative;display:inline-block}.dropdown #select{padding:.5em 1em;cursor:pointer;border-radius:16px;background-color:#131313;transition:border .25s ease,color .25s ease;border:solid 1px #333}.dropdown #select:hover{border-color:var(--primary);color:var(--primary);outline:none}.dropdown #select.open{border-radius:16px 16px 0 0;border-bottom:transparent 1px solid}.dropdown #select:hover~.dropdownMenu{border-color:var(--primary)}.dropdownMenu{position:absolute;top:100%;right:0;left:auto;background-color:#131313;border-radius:16px 0 16px 16px;box-shadow:0 4px 6px #0000001a;padding:.5em 0;min-width:180px;height:fit-content;list-style:none;margin:0;z-index:100;border:solid 1px #333;transition:border .25s ease,color .25s ease}.dropdownItem{display:flex;align-items:center;justify-content:space-between;padding:0 1em;min-height:2em;height:100%;transition:background .2s}.dropdownItem:hover{cursor:pointer;color:var(--primary)}.dropdownItem #name{flex:1;font-size:12px;text-align:left}.dropdownItem .iconButton{font-size:12px}#viewport,#canvas{height:100%;width:100%;background-color:#0a0a0a}#timeline{position:absolute;bottom:0;left:0;width:100%;height:5em;z-index:10;display:flex}#timeline #bar{width:100%;background-color:#131313;border:solid 1px #333;border-radius:16px;margin:.5em;padding:.5em;display:flex;flex-direction:row;align-items:center;justify-content:center}#timeline input{width:3em}#scrollbar{position:relative;flex-grow:1;height:5px;background:#444;margin:0 10px;border-radius:3px;cursor:pointer;display:flex;align-items:center}#scrollbar #handle{position:absolute;top:50%;transform:translateY(-50%);width:10px;height:20px;background:var(--primary);border-radius:3px;pointer-events:none;transition:left 25ms linear}.frameInfo{-webkit-user-select:none;user-select:none}#container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}#home-button{position:absolute;right:0;margin:1em;padding:.5em 1em;border:none;border-radius:8px;background-color:#0a0a0a;outline:none;border:solid #333 1px;color:#fff;cursor:pointer;transition:color .25s ease,border-color .25s ease}#home-button:hover{border-color:var(--primary);color:var(--primary)}#live-view{width:100%;height:100%}#camera-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2em;padding:1em;border-radius:16px;left:0;width:25%;background-color:#131313;border:solid 1px #444}#camera-overlay video{width:100%;height:auto;border:1px solid #444;border-radius:16px}#camera-overlay select{margin-top:1em;padding:.5em 1em;border:none;border-radius:8px;background-color:#0a0a0a;outline:none;border:solid #333 1px;color:#fff;cursor:pointer}#camera-overlay select:hover{border-color:var(--primary);color:var(--primary);transition:color .25s ease,border-color .25s ease}#record-bar{position:absolute;bottom:1em;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;padding:.5em 1em;border-radius:16px;background-color:#131313;border:solid 1px #444}#mocap-container{max-width:1200px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:15px}.header h1{margin:0;color:#2c3e50;font-weight:600}.exit-btn{background:#6c757d;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;transition:background .3s}.exit-btn:hover{background:#5a6268}.upload-area{border:1px solid #444;border-radius:12px;padding:60px 40px;text-align:center;cursor:pointer;transition:all .3s;margin-bottom:30px;background-color:#0a0a0a;color:#fff}.upload-area:hover{border-color:var(--primary);color:var(--primary)}.upload-placeholder h3{margin:20px 0 10px;font-size:22px}.upload-placeholder p{margin:0;color:#6c757d;font-size:16px}.uploaded-files{margin-top:40px}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:1px}.video-preview{position:relative;background:#131313;color:#fff;border-radius:8px;border:solid #333 1px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:transform .3s,box-shadow .3s}.remove-btn{position:absolute;top:.5em;right:.5em;width:28px;height:28px;background:transparent;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:16px;font-weight:700;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}.remove-btn:hover{color:var(--primary);transform:scale(1.1)}.video-thumbnail{position:relative;height:50%;overflow:hidden;background:#000}.video-thumbnail video{width:100%;height:100%;object-fit:cover;opacity:.8}.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000004d;transition:background .3s}.video-preview:hover .video-overlay{background:#00000080}.video-info{padding:15px}.video-name{display:block;font-weight:500;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-details{font-size:12px;color:#6c757d}.action-buttons{text-align:center;margin-top:30px}.process-btn{background:#28a745;color:#fff;border:none;padding:14px 40px;border-radius:6px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 6px #28a74533}.process-btn:hover{background:#218838;transform:translateY(-2px);box-shadow:0 6px 12px #28a7454d}.process-btn:active{transform:translateY(0)}@media (max-width: 768px){.video-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.header{flex-direction:column;gap:15px;text-align:center}.upload-area{padding:40px 20px}}@media (max-width: 480px){.video-grid{grid-template-columns:1fr}}