:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0b0f;--surface: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .08);--text: #f0f0f0;--text-muted: rgba(255, 255, 255, .5);--red: #ff4d4d;--blue: #4d94ff;--green: #4dff88;--gold: #ffd24d}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;max-width:480px;margin:0 auto}.header{text-align:center;margin-bottom:2rem}.title{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:.85rem;color:var(--text-muted);margin-top:.25rem}.compass-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;position:relative}.permission-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0b0fd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem}.permission-btn{display:flex;align-items:center;gap:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:none;border-radius:.75rem;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:inherit}.permission-btn:hover{transform:scale(1.03);box-shadow:0 0 24px #2563eb66}.permission-btn:active{transform:scale(.98)}.permission-icon{display:flex;align-items:center}.permission-hint{margin-top:.75rem;font-size:.8rem;color:var(--text-muted)}.heading-display{display:flex;align-items:baseline;justify-content:center;margin-bottom:.25rem}.heading-degrees{font-size:4.5rem;font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1;transition:color .3s}.heading-symbol{font-size:2rem;font-weight:300;color:var(--text-muted);margin-left:.125rem}.heading-cardinal{font-size:1.1rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.75rem;transition:color .3s}.compass-ring{position:relative;width:280px;height:280px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:0 0 0 4px #ffffff05,inset 0 0 40px #0000004d,0 8px 32px #0006;overflow:hidden}.compass-pointer{position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid var(--red);z-index:5;filter:drop-shadow(0 0 6px rgba(255,77,77,.5))}.compass-dial{position:absolute;top:0;right:0;bottom:0;left:0;transition:none}.ticks-container{position:absolute;top:0;right:0;bottom:0;left:0}.tick{position:absolute;top:0;left:50%;width:0;height:50%;transform-origin:bottom center}.tick-line{position:absolute;top:10px;left:-.5px;width:1px;height:10px;background:#fff3}.tick-major .tick-line{top:8px;width:1.5px;height:16px;background:#ffffff73;left:-.75px}.tick-cardinal .tick-line{top:6px;width:2px;height:20px;left:-1px}.tick-cardinal:nth-child(1) .tick-line{background:var(--red)}.tick-cardinal:nth-child(73) .tick-line{background:var(--green)}.tick-cardinal:nth-child(145) .tick-line{background:var(--blue)}.tick-cardinal:nth-child(217) .tick-line{background:var(--green)}.tick-label{position:absolute;top:28px;left:50%;transform:translate(-50%);font-size:.7rem;font-weight:600;color:#ffffff8c;letter-spacing:.05em}.tick-cardinal:nth-child(1) .tick-label{color:var(--red);font-weight:700;font-size:.85rem}.compass-needle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px}.needle-n{position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:60px solid var(--red);filter:drop-shadow(0 0 4px rgba(255,77,77,.3))}.needle-s{position:absolute;top:2px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:60px solid rgba(255,255,255,.2)}.needle-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 8px #ffffff4d}.status-banner{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.6rem 1rem;border-radius:.5rem;font-size:.78rem}.status-warning{background:#ffb4001a;border:1px solid rgba(255,180,0,.2);color:#ffb400}.status-info{background:#4d94ff14;border:1px solid rgba(77,148,255,.15);color:#80b8ff}.footer{width:100%;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.footer-stats{display:flex;align-items:center;justify-content:center;gap:1.25rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.15rem}.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}.stat-value{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;transition:color .3s}.stat-divider{width:1px;height:2rem;background:var(--border)}@media(max-width:360px){.compass-ring{width:240px;height:240px}.heading-degrees{font-size:3.5rem}}