*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040b;color:#eaffff;font-family:Arial,Helvetica,sans-serif;touch-action:none}body{background:radial-gradient(circle at 50% 20%,#10265c 0,#030817 45%,#000 100%)}#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}.brand{font-weight:900;letter-spacing:2px;color:#7dfff7;text-shadow:0 0 14px #00eaff}#hud{position:fixed;top:10px;left:10px;right:10px;z-index:10;max-width:760px;margin:auto;padding:10px 12px;border:1px solid rgba(0,234,255,.45);border-radius:16px;background:linear-gradient(180deg,rgba(2,13,33,.78),rgba(0,0,0,.55));box-shadow:0 0 28px rgba(0,234,255,.22);backdrop-filter:blur(8px)}#status{font-size:13px;color:#b7fff8;margin:4px 0}.grid2{display:grid;grid-template-columns:1fr auto 1fr auto;gap:5px 12px;font-size:12px}.grid2 b{color:#fff;text-shadow:0 0 12px #00eaff}#compass{position:relative;width:min(94vw,620px);height:min(94vw,620px);margin-top:50px;perspective:900px;border-radius:50%;overflow:hidden;border:1px solid rgba(0,234,255,.6);box-shadow:0 0 50px rgba(0,234,255,.3),inset 0 0 80px rgba(0,0,0,.9)}.sky{position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(34,106,255,.35),transparent 28%),radial-gradient(circle at 50% 60%,rgba(0,255,210,.12),transparent 45%),#030714}.stars{position:absolute;inset:-40%;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#8ff 1px,transparent 1px);background-size:42px 42px,67px 67px;opacity:.5;animation:stars 24s linear infinite}@keyframes stars{to{transform:rotate(360deg)}}.horizon{position:absolute;left:-10%;right:-10%;top:50%;height:50%;background:linear-gradient(180deg,rgba(0,255,230,.11),rgba(0,0,0,.75));border-top:1px solid rgba(0,255,230,.35)}#sunDot{position:absolute;width:26px;height:26px;border-radius:50%;left:50%;top:50%;margin:-13px;background:#fff7a4;box-shadow:0 0 18px #fff,0 0 42px #ffe600,0 0 100px #ff9d00;transform:translate(-50%,-50%)}.ring{position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(0,255,230,.35)}.ring2{inset:20%;border-style:dashed}.ring3{inset:34%;border-color:rgba(255,255,255,.22)}.cross{position:absolute;background:rgba(0,255,230,.25);box-shadow:0 0 12px #00eaff}.cross.v{width:1px;top:5%;bottom:5%;left:50%}.cross.h{height:1px;left:5%;right:5%;top:50%}#north,#east,#south,#west{position:absolute;font-weight:900;color:#fff;text-shadow:0 0 14px #00eaff}#north{top:12px;left:50%;transform:translateX(-50%)}#south{bottom:12px;left:50%;transform:translateX(-50%)}#east{right:16px;top:50%;transform:translateY(-50%)}#west{left:16px;top:50%;transform:translateY(-50%)}#pyramidWrap{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:filter .15s linear;filter:drop-shadow(0 0 22px #00eaff)}#pyramid{position:absolute;width:120px;height:120px;left:-60px;top:-60px;transform-style:preserve-3d;transform:rotateX(-62deg) rotateZ(45deg)}.face{position:absolute;left:20px;top:20px;width:80px;height:80px;clip-path:polygon(50% 0,0 100%,100% 100%);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(0,234,255,.42));border:1px solid rgba(255,255,255,.45);transform-origin:50% 100%;box-shadow:inset 0 0 30px rgba(0,234,255,.3)}.f1{transform:rotateY(0deg) rotateX(58deg) translateZ(40px)}.f2{transform:rotateY(90deg) rotateX(58deg) translateZ(40px)}.f3{transform:rotateY(180deg) rotateX(58deg) translateZ(40px)}.f4{transform:rotateY(270deg) rotateX(58deg) translateZ(40px)}.base{position:absolute;left:20px;top:20px;width:80px;height:80px;background:rgba(0,255,230,.18);border:1px solid #00eaff;transform:rotateX(90deg) translateZ(-40px);box-shadow:0 0 25px #00eaff}.tipGlow{position:absolute;left:53px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff,0 0 40px #ffe600}#alignText{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);padding:8px 14px;border-radius:99px;background:rgba(0,0,0,.55);border:1px solid rgba(0,255,230,.45);text-align:center;font-weight:800;text-shadow:0 0 10px #00eaff}.controls{position:fixed;left:10px;right:10px;bottom:10px;z-index:12;max-width:760px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls button{border:0;border-radius:14px;padding:12px;font-weight:900;color:#001015;background:linear-gradient(90deg,#00eaff,#8dff00,#ffe600);box-shadow:0 0 18px rgba(0,234,255,.25)}.controls p{grid-column:1/-1;margin:0;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.5);font-size:12px;color:#c9fffb;text-align:center}@media(max-width:640px){#compass{margin-top:72px;width:96vw;height:96vw}.grid2{grid-template-columns:1fr auto;font-size:12px}.controls{grid-template-columns:1fr}.controls p{display:none}#pyramid{transform:scale(.85) rotateX(-62deg) rotateZ(45deg)}}