.compass-section{background:radial-gradient(ellipse at 25% 55%,#28533b 0,transparent 60%),#183c2d}
.compass-explorer{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);gap:clamp(30px,5vw,90px);align-items:center;margin:54px 0 42px}
.compass-instrument{min-width:0;position:relative}
.compass-rim-label,.compass-instrument-note,.compass-kicker,.dial-inscription{font-family:monospace;letter-spacing:.14em;text-transform:uppercase}
.compass-rim-label{font-size:10px;color:#a5b7a5;text-align:center;margin-bottom:20px}
.compass-face{position:relative;aspect-ratio:1;max-width:720px;margin:auto}
.compass-dial{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 20px 30px #06120b35)}
.compass-ticks .minor{stroke:#b4c6b1;stroke-opacity:.28;stroke-width:1}
.compass-ticks .major{stroke:#c7d8b0;stroke-opacity:.7;stroke-width:1.5}
.dial-inscription{font-size:10px;fill:#a3b69c;letter-spacing:2px}
.compass-needle{transform-origin:300px 300px;transform:rotate(0deg);filter:drop-shadow(3px 6px 5px #0008);transition:transform 1.2s cubic-bezier(.22,.7,.25,1)}
.compass-points{list-style:none;padding:0;margin:0;position:absolute;inset:0}
.compass-point{position:absolute;transform:translate(-50%,-50%);width:140px;text-align:center}
.compass-point button{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;padding:8px 3px;color:#f2f0e7;background:transparent;border:0;cursor:pointer;font:inherit}
.compass-point-number{display:grid;place-items:center;width:39px;height:39px;border:1px solid #92a97b;border-radius:50%;background:#183c2d;box-shadow:0 0 0 6px #183c2d;font:12px monospace;transition:background .18s,color .18s,box-shadow .18s}
.compass-point-label{font-size:13px;line-height:1.3;max-width:130px;text-wrap:balance;text-shadow:0 2px 8px #10251a}
.point-1{left:50%;top:7%}.point-2{left:90%;top:37%}.point-3{left:75%;top:84%}.point-4{left:25%;top:84%}.point-5{left:10%;top:37%}
.point-2 .compass-point-number,.point-3 .compass-point-number{border-color:#d0ec92;color:#d0ec92}
.compass-point button:hover .compass-point-number,.compass-point button[aria-pressed=true] .compass-point-number{background:#d0ec92;color:#182b22;box-shadow:0 0 0 6px #183c2d,0 0 24px #c9e98635}
.compass-point button:focus-visible{outline:2px solid #d0ec92;outline-offset:4px;border-radius:8px}
.compass-instrument-note{display:flex;align-items:center;justify-content:center;gap:15px;color:#d0ec92;font-size:10px;margin:14px 0 0}
.compass-instrument-note>span{width:25px;height:1px;background:#8da472}
.compass-reading-wrap{border-top:1px solid #a9c19655;padding:28px 0 16px}
.compass-kicker{font-size:11px;color:#d0ec92!important;margin:0 0 24px}
.compass-reading h3{font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.04em;margin:0 0 24px;color:#f2f0e7}
.compass-reading p:not(.compass-kicker){font-size:17px;line-height:1.7;color:#c1d0ba;max-width:440px}
.compass-reading{min-height:290px}
.bearing-pair{display:flex;flex-direction:column;gap:14px;padding-top:20px;font-size:13px;color:#d3deca}
.bearing-pair b{font:11px monospace;color:#d0ec92;padding-right:15px}
.compass-controls{padding-top:22px;border-top:1px solid #a9c19630;margin-top:24px}
.compass-controls p{font-size:12px;color:#a9bca3;margin:0}
.compass-controls button{background:transparent;color:#d0ec92;border:0;border-bottom:1px solid #d0ec9260;padding:10px 0 4px;font:13px inherit;cursor:pointer;margin-top:10px}
.compass-explorer [hidden]{display:none!important}
@media(max-width:900px){.compass-explorer{grid-template-columns:1fr;gap:34px}.compass-instrument{max-width:660px;width:100%;margin:auto}.compass-reading-wrap{max-width:660px;width:100%;margin:auto}.compass-reading{min-height:0}.compass-reading p:not(.compass-kicker){max-width:580px}.compass-reading h3{font-size:38px}}
@media(max-width:500px){.compass-explorer{margin-top:34px}.compass-point{width:96px}.compass-point-label{font-size:10px;max-width:96px}.compass-point-number{width:28px;height:28px;font-size:10px;box-shadow:0 0 0 4px #183c2d}.compass-point button{gap:5px}.point-2{left:87%}.point-5{left:13%}.point-3{top:86%}.point-4{top:86%}.compass-rim-label{font-size:8px}.compass-instrument-note{font-size:8px;letter-spacing:.1em}.compass-reading h3{font-size:32px}.compass-reading p:not(.compass-kicker){font-size:16px}}
@media(prefers-reduced-motion:reduce){.compass-point-number,.compass-needle{transition:none}}