.survival{max-width:800px;margin:0 auto;padding:20px}.survival .card{margin-bottom:20px}.compass{position:relative;width:224px;height:224px;margin:28px auto;border:3px solid #0f766e;border-radius:50%;background:#f0fdfa}.compass-rose{position:absolute;inset:0;transition:transform .1s linear}.compass-rose span{position:absolute;font-weight:700;font-size:24px;color:#164e49}.compass-rose .north{top:10px;left:50%;transform:translateX(-50%);color:#b91c1c}.compass-rose .south{bottom:10px;left:50%;transform:translateX(-50%)}.compass-rose .east{right:12px;top:50%;transform:translateY(-50%)}.compass-rose .west{left:12px;top:50%;transform:translateY(-50%)}.pointer{position:absolute;top:75px;left:50%;transform:translateX(-50%);font-size:44px;color:#0f766e}.compass-heading{text-align:center;font-size:30px;font-weight:700}.compass-actions{display:flex;gap:12px;flex-wrap:wrap}.compass-actions button{min-height:48px}.survival .muted{line-height:1.6}.directions-guide{max-width:800px;margin:0 auto;padding:20px}.directions-guide section{margin:24px 0}.directions-guide h2{color:#0f766e}.directions-guide li{margin:8px 0}@media(max-width:360px){.survival,.directions-guide{padding:12px}.compass{width:196px;height:196px}.pointer{top:62px}}

/* Bearing updates never resize text or move the controls below them. */
.compass-heading{height:1.5em;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}#compass-status{height:6em;line-height:1.5;overflow:auto}@media(min-width:42rem){#compass-status{height:3em}}@media(prefers-reduced-motion:reduce){.compass-rose{transition:none}}