#app,#c{width:100%;height:100%}.compass,.compass .tick,.hiddenVideo,.hud{position:absolute}.controls,.loaderBox{display:flex;gap:10px}.btn,.hud{color:#fff}#app{position:relative;touch-action:none}#c{display:block}@media (max-width:1024px){#app{height:500px}}@media (max-width:768px){#app{height:300px}}.hiddenVideo{left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}.hud{border:1px solid red;left:24px;bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.controls,.title{padding:10px 12px;background:rgba(0,0,0,.35);pointer-events:auto}.title{font-size:20px;font-weight:800;letter-spacing:.5px;opacity:.95;border:1px solid rgba(255,255,255,.12);border-radius:12px}.controls{align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:12px}.btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);font-weight:750;cursor:pointer}.btn:active{transform:translateY(1px)}.toggleBtn.playing{background:rgba(196,173,120,.25);border-color:rgba(196,173,120,.65)}.hint{margin-left:10px;font-size:13px;opacity:.8}.compass{left:15px;bottom:15px;width:60px;height:60px;pointer-events:none}.compass .ring{width:60px;height:60px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);position:relative;overflow:hidden}.compass .tick{left:50%;top:5px;transform:translateX(-50%);width:4px;height:4px;background:#ddb500;border-radius:2px}.compass .labelN,.compass .needle{left:50%;top:18px;position:absolute}.compass .labelN{transform:translateX(-50%);font-weight:100;font-size:14px;letter-spacing:1px;color:rgba(255,255,255,.9)}.compass .needle{transform-origin:50% 90%;transform:translate(-50%,-50%) rotate(0);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:30px solid rgba(255,255,255,.2);border-top-left-radius:10px;border-top-right-radius:10px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));z-index:5}.compass .horizon{position:absolute;border-radius:50%;left:30px;right:30px;top:30px;height:20px;background:#ffffff50;z-index:15!important}.compass .centerDot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);z-index:3}.compass .deg,.compass .deg2{width:60px;height:15px;padding:3px 5px;left:-40px;transform:translateX(-50%);font-size:12px;font-family:futura_medium;font-weight:100;color:rgba(255,255,255,.7);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);position:absolute}.compass .deg{top:18px}.compass .deg2{top:42px}.videoLoader{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#000;opacity:1;visibility:visible;transition:opacity .45s,visibility .45s}.videoLoader.hide{opacity:0;visibility:hidden;pointer-events:none}.loaderBox{flex-direction:column;align-items:center;justify-content:center}.spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;animation:.9s linear infinite spin360}.loaderText{font-family:futura_medium,Arial,sans-serif;font-size:16px;color:#fff;letter-spacing:.6px;text-align:center}.percent,.percent::after,.percent::before{font-size:20px;color:#f0b411!important;font-family:futura_medium,Arial,sans-serif;font-weight:600}@keyframes spin360{to{transform:rotate(360deg)}}.percent{margin-top:-10px}