#root{margin:0 auto;padding:2rem;text-align:center}input{width:100%;background:none;color:#fff;border:1px solid white;border-radius:4px;padding:5px;font:inherit;cursor:pointer}a{width:100%}.page-container{display:flex;flex-direction:column;gap:8px}.control-container{display:flex;flex-direction:row;gap:8px}.video-container{width:800px;height:800px;display:flex;place-items:center;justify-content:center}input,.video-container{--b: 2px;--s: 10px;--color: white;color:var(--color);--_p: var(--s);background:conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));transition:.3s linear,color 0s,background-color 0s;font-size:16px;border:0;user-select:none;-webkit-user-select:none;touch-action:manipulation}.video-container{padding:12px}input{padding:17px}input:hover,input:focus-visible{--_p: 0px;background-color:#1e1e30}.spinner{width:48px;height:48px;border:5px solid rgba(255,255,255,.148);text-align:left;box-sizing:border-box}.spinner:before{content:"";width:48px;height:48px;position:absolute;margin-left:-5px;margin-top:-5px;box-sizing:border-box;border:5px solid white;animation:rotate 2s linear infinite}@keyframes rotate{0%{clip-path:circle(30% at 0 0)}25%{clip-path:circle(30% at 100% 0)}50%{clip-path:circle(30% at 100% 100%)}75%{clip-path:circle(30% at 0% 100%)}to{clip-path:circle(30% at 0 0)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#181820}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}