*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:transparent;font-family:Arial,sans-serif}header{position:absolute;z-index:3;left:36px;right:36px;top:25px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;height:59px}header img{display:block;object-fit:contain;object-position:left center;height:54px;width:auto;max-width:35vw}.danantara{max-width:200px}.plnes{max-width:270px;object-position:right center}#viewport{position:absolute;inset:0;width:100%;height:100%;height:100dvh;outline:none;touch-action:none}canvas{display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}nav{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:#ffffffed;border:1px solid #152c4021;border-radius:50px;box-shadow:0 3px 18px #143c5510;z-index:5;backdrop-filter:blur(12px)}button{width:39px;height:39px;border:0;border-radius:50%;background:transparent;color:#2a4053;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;transition:background .15s}button:hover{background:#eaf0f5}button[aria-pressed=true]{background:#e3eff7;color:#006b9a}button:focus-visible{outline:2px solid #0086ac;outline-offset:2px}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}nav i{height:20px;width:1px;background:#143c5518;margin:0 3px}#loading{position:absolute;width:26px;height:26px;top:50%;left:50%;margin:-13px;border:2px solid #e7edf1;border-top-color:#16669a;border-radius:50%;animation:spin 1s linear infinite;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}body.immersive header{opacity:0}body.immersive nav{opacity:.25}body.immersive nav:hover,body.immersive nav:focus-within{opacity:1}@media(max-width:600px){header{left:19px;right:19px;top:max(22px,env(safe-area-inset-top));height:41px}header img{height:auto;max-height:41px;max-width:40vw}.danantara{width:130px}.plnes{width:180px}nav{bottom:max(22px,env(safe-area-inset-bottom));padding:5px;gap:3px}button{width:37px;height:37px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}#loading{animation:none}}