.compass-instrument{--heading-rotation:0deg;flex-direction:column;flex:1;justify-content:space-evenly;align-items:center;gap:15px;width:100%;min-height:0;padding:10px 0 14px;display:flex}.compass-heading{text-align:center;flex-shrink:0}.compass-facing-label{color:#7a806f;letter-spacing:2.2px;font-size:9px}.compass-bearing{font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;margin:9px 0 7px;line-height:1;display:flex}[data-compass-value]{letter-spacing:-5px;min-width:1.1em;font-size:clamp(65px,9vw,90px);font-weight:500}.bearing-degrees{align-self:flex-start;margin-top:5px;margin-left:3px;font-size:37px}.bearing-direction{letter-spacing:-1px;margin-left:13px;font-size:30px;font-weight:450}.compass-direction-name{color:#737b65;min-height:21px;font-size:14px}.compass-visual{aspect-ratio:1;flex-shrink:0;width:min(84vw,420px,100svh - 330px);min-width:170px;position:relative}.compass-dial{width:100%;height:100%;transform:rotate(var(--heading-rotation));will-change:transform;overflow:visible}.dial-outline{stroke:#dce0d3;stroke-width:1px}.compass-tick{stroke:#b4bba7;stroke-width:1px}.compass-tick.medium{stroke:#858f76;stroke-width:1.3px}.compass-tick.major{stroke:#555e48;stroke-width:1.7px}.compass-degree-label{fill:#8a927e;letter-spacing:.5px;font-family:inherit;font-size:10px}.compass-cardinal{fill:#313a28;font-family:inherit;font-size:31px;font-weight:550}.compass-cardinal.north{fill:#b34e3c}.compass-center-ring{stroke:#e2e5d8;stroke-width:1px}.compass-needle-north{fill:#b34e3c}.compass-needle-south{fill:#cbd1bf}.compass-index{z-index:2;color:#b34e3c;position:absolute;top:-16px;left:calc(50% - 10px)}.compass-hairline{pointer-events:none;background:#dde2d3;position:absolute}.compass-hairline.vertical{width:1px;height:78%;top:11%;left:calc(50% - .5px)}.compass-hairline.horizontal{width:78%;height:1px;top:calc(50% - .5px);left:11%}.compass-center-dot{background:#faf9f6;border:1px solid #9fa78d;border-radius:50%;width:7px;height:7px;position:absolute;top:calc(50% - 3.5px);left:calc(50% - 3.5px)}.compass-instrument[data-has-reading=false] .compass-dial{opacity:.56}.compass-instrument[data-has-reading=false] .compass-index{color:#a2a995}.compass-instrument[data-has-reading=false] .bearing-direction{color:#9da48f}.compass-bottom{text-align:center;flex-shrink:0;width:min(100%,340px)}.compass-status{color:#667057;justify-content:center;align-items:center;max-width:340px;min-height:37px;margin:0 auto 11px;font-size:12px;line-height:1.55;display:flex}.compass-start{color:#faf9f6;background:#293223;border:1px solid #293223;border-radius:9px;justify-content:center;align-items:center;gap:18px;width:100%;min-height:52px;padding:13px 21px;font-size:14px;font-weight:500;display:flex}.compass-start:hover:enabled{background:#424e36}.compass-start:active:enabled{background:#566148}.compass-instrument[data-has-reading=true] .compass-start{color:#48523d;background:0 0;border-color:#ccd2bf}.compass-bottom-note{color:#868b7b;margin-top:12px;font-size:10px}.compass-sensor-details{background:#edf0e4;border-radius:10px;margin:22px 0;padding:14px 16px}.compass-sensor-details>div{flex-direction:column;gap:3px;margin:8px 0;font-size:11px;display:flex}.compass-sensor-details strong{color:#48523d;font-size:12px;font-weight:550}.compass-sensor-details span{color:#737c65}@media (width<=520px){.compass-instrument{gap:11px;padding-block:8px 15px}.compass-bearing{margin-block:8px 7px}[data-compass-value]{font-size:77px}.bearing-degrees{font-size:33px}.bearing-direction{font-size:27px}.compass-visual{width:min(88vw,100svh - 326px)}.compass-direction-name{font-size:13px}}@media (height<=650px) and (orientation:portrait){.compass-instrument{gap:7px;padding-block:0 6px}[data-compass-value]{font-size:65px}.compass-facing-label{font-size:8px}.compass-visual{width:min(84vw,100svh - 305px)}.compass-status{min-height:34px;margin-bottom:7px;font-size:11px}.compass-start{min-height:47px}.compass-bottom-note{margin-top:7px;font-size:9px}}@media (orientation:landscape) and (height<=500px){.compass-instrument{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;gap:4px 40px;max-width:720px;margin-inline:auto;padding:5px 0;display:grid}.compass-visual{grid-area:1/1/3;justify-self:center;width:min(42vw,100svh - 116px);min-width:160px}.compass-heading{grid-area:1/2}[data-compass-value]{font-size:57px}.bearing-degrees{font-size:27px}.bearing-direction{font-size:23px}.compass-direction-name{min-height:17px;font-size:11px}.compass-facing-label{font-size:8px}.compass-bottom{grid-area:2/2;align-self:start}.compass-status{min-height:31px;margin-bottom:6px;font-size:10px}.compass-start{min-height:44px;padding-block:9px;font-size:12px}.compass-bottom-note{margin-top:7px;font-size:9px}}