:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa;overflow:hidden}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative}.heading-display{text-align:center;margin-bottom:2rem}.heading-degrees{font-size:4rem;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}.heading-direction{font-size:1.25rem;color:#ffffff8c;margin-top:.25rem;text-transform:uppercase;letter-spacing:.15em;font-weight:500}.compass-container{position:relative;width:300px;height:300px}.compass-ring{width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.12);position:relative;transition:transform .15s ease-out}.compass-inner-ring{position:absolute;top:12px;left:12px;right:12px;bottom:12px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}.tick{position:absolute;top:0;left:50%;width:2px;height:12px;background:#ffffff40;transform-origin:50% 150px;margin-left:-1px}.tick.major{height:18px;background:#ffffff80;width:2px}.tick.cardinal{height:22px;background:#fffc;width:2.5px;margin-left:-1.25px}.cardinal-label{position:absolute;font-size:1rem;font-weight:700;color:#ffffffd9;text-align:center;width:30px;transform-origin:center}.cardinal-label.n{top:28px;left:50%;transform:translate(-50%);color:#ef4444}.cardinal-label.e{right:28px;top:50%;transform:translateY(-50%)}.cardinal-label.s{bottom:28px;left:50%;transform:translate(-50%)}.cardinal-label.w{left:28px;top:50%;transform:translateY(-50%)}.intercardinal-label{position:absolute;font-size:.7rem;font-weight:500;color:#ffffff59;text-align:center;width:30px}.intercardinal-label.ne{top:52px;right:52px}.intercardinal-label.se{bottom:52px;right:52px}.intercardinal-label.sw{bottom:52px;left:52px}.intercardinal-label.nw{top:52px;left:52px}.needle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:100px;z-index:10}.needle-north{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:44px solid #ef4444;position:absolute;top:6px;left:50%;transform:translate(-50%)}.needle-south{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:44px solid rgba(255,255,255,.3);position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.needle-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#fafafa;border:2px solid rgba(255,255,255,.5);z-index:11}.status-bar{position:absolute;bottom:2rem;text-align:center}.status-text{font-size:.75rem;color:#ffffff59;letter-spacing:.05em}.permission-btn{margin-top:.75rem;padding:.6rem 1.5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:#fafafa;font-size:.85rem;cursor:pointer;transition:background .2s}.permission-btn:hover{background:#ffffff1a}.demo-badge{position:absolute;top:1.5rem;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:#ffffff59;border:1px solid rgba(255,255,255,.08);padding:.2rem .6rem;border-radius:.25rem}