:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary: #F54900;--background-color: #131313;--viewport-background-color: #111;background-color:var(--background-color)}html,body{height:100%;width:100%;margin:0;padding:0}a{text-decoration:none}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}#root,#app{height:100%;width:100%;margin:0;padding:0}#app{display:flex;flex-direction:column}#main{flex:1;display:flex;flex-direction:column;min-height:0}#app-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--background-color);box-shadow:#00000040 0 5px 20px;z-index:100;height:64px}#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:end;margin-right:1rem}#container{display:flex;flex-direction:column;align-items:center;width:calc(100% - 8px);height:calc(100% - 8px);border:4px solid transparent}.tpose-phase{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000040;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1;display:flex;justify-content:center;align-items:center}.tpose-container{display:flex;flex-direction:column;width:fit-content;height:fit-content;background-color:#131313;border:solid #333 2px;padding:2em;border-radius:16px;text-align:center;box-shadow:#000 0 0 25px}#tpose-buttons{display:flex;justify-content:center;gap:1rem}#camera-overlay{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:50vh;width:60vh}#camera-overlay canvas,#camera-overlay video,#camera-overlay img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:50vh;width:60vh;object-fit:cover;pointer-events:none;border-radius:16px}.camera-controls select{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;padding:1rem;width:100%;border-radius:16px;background-color:#131313;margin-top:1rem;border:2px solid #333;outline:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='20' width='20' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem}.calibrate-overlay{position:absolute;margin-top:1em;right:1em}.calibrate-overlay button,.tpose-overlay button{padding:.5rem 1rem;border-radius:16px;background-color:var(--primary);border:solid 2px transparent;cursor:pointer;transition:.35s ease all}.calibrate-overlay button:hover,.tpose-overlay button:hover{border:solid 2px var(--primary);background-color:transparent;color:var(--primary)}#record-button{position:absolute;background-color:var(--primary);transition:color ease .2s;display:flex;align-items:center;justify-content:center;height:64px;width:64px;bottom:1rem;border:none;border-radius:50%;border:solid 4px white;transition:all .1s ease}#record-button.recording{background-color:#8b0000;border-radius:10%;border:solid 4px var(--primary)}#camera-preview{position:absolute;display:flex;height:10rem;margin-top:1em;left:1em}#camera-preview canvas,#camera-preview video{position:absolute;height:25vh;width:25vh;object-fit:cover;pointer-events:none;border-radius:16px}#calibration-countdown{position:absolute;font-size:6em;color:var(--primary);text-shadow:0px 0px 10px rgba(0,0,0,.7);z-index:100}#countdown-container{position:absolute;top:45%;width:5em;height:5em;display:flex;justify-content:center;align-items:center;background-color:#131313;border:solid 2px #333;font-size:2em;border-radius:1rem;box-shadow:0 0 20px #00000080}#recording-frame{position:absolute;width:calc(100% - 4px);height:calc(100% - 72px);border:solid transparent 2px;pointer-events:none}#recording-frame.recording{border:solid var(--primary) 2px}.no-camera-popup{position:absolute;top:0;width:100%;height:100%;background-color:#000c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;justify-content:center;align-items:center;text-align:center;z-index:9999}.no-camera-popup div{margin-bottom:3rem}#viewport{width:100%;height:100%;background:var(--viewport-background-color);display:flex}canvas{width:100%;height:100%;display:block}#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}