.observer-panel{--orbit:#8b78b5;background:white;border:1px solid #dfe7ef;border-top:4px solid var(--orbit);border-radius:18px;padding:25px;margin-bottom:24px}.observer-sun{--orbit:#c99b36}.observer-panel>header{display:flex;justify-content:space-between;gap:20px;align-items:center}.observer-panel h2{font-size:1.4rem;margin:0 0 6px}.observer-panel header p:not(.moon-eyebrow){font-size:.83rem;color:#748999;margin:0}.observer-time{font-size:.73rem;color:#718799}.observer-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);gap:40px;align-items:center;margin-top:25px}.observer-chart{text-align:center;min-width:0}.observer-chart .sky-compass{width:100%;max-width:570px;height:auto}.looking-top,.looking-bottom{font-size:.67rem;letter-spacing:.1em;font-weight:700;color:#8597a5;margin:0}.observer-chart .sky-orbit{fill:none;stroke:var(--orbit);stroke-width:1.6;stroke-dasharray:3 4}.observer-chart .sky-hour{fill:var(--orbit)}.observer-chart .sky-hour.below{opacity:.3}.observer-chart .sky-now-ray{stroke:var(--orbit);stroke-width:1.4}.observer-chart .sky-now-halo{fill:white;stroke:var(--orbit);stroke-width:1.5}.observer-chart .sky-cardinal{font-size:12px;fill:#5b788c;font-weight:750}.observer-chart .sky-hour-label{font-size:9px;fill:#5e7a8d;paint-order:stroke;stroke:white;stroke-width:2px}.observer-controls label{display:block;font-size:.77rem;font-weight:650;color:#5d798e;margin:13px 0 7px}.observer-controls select,.observer-controls input[type=number]{border:1px solid #cbd9e3;border-radius:9px;padding:10px;background:white;color:#24475f;font:inherit}.observer-controls select{width:100%}.heading-value{display:flex;gap:10px;align-items:center}.heading-value input{width:110px}.observer-controls input[type=range]{width:100%;margin:18px 0;accent-color:var(--orbit)}.relative-position{padding:17px;background:#f1edf7;border-radius:12px}.observer-sun .relative-position{background:#fff6e4}.relative-position span,.relative-position small{display:block;font-size:.7rem;color:#7b8191}.relative-position strong{display:block;font-size:1.2rem;color:var(--orbit);margin:5px 0}.observer-details,.observer-help,.observer-below{font-size:.77rem;color:#6d8497;line-height:1.6}.observer-below{padding:11px;border-radius:8px;background:#f1f4f7}.observer-legend{font-size:.72rem;line-height:1.6;color:#8398a7;border-top:1px solid #e5edf3;padding-top:16px;margin-top:22px}.observer-panel :focus-visible{outline:3px solid #dcb466;outline-offset:3px}@media(max-width:760px){.observer-panel{padding:19px}.observer-panel>header{flex-direction:column;align-items:flex-start;gap:12px}.observer-layout{grid-template-columns:1fr;gap:22px}.observer-chart .sky-compass{max-width:480px}}

.phone-compass{padding:14px;border:1px solid #dce5ed;border-radius:12px;background:#f7fafc}.phone-compass button{width:100%;border:0;border-radius:9px;padding:12px;background:var(--orbit);color:white;font:inherit;font-weight:650;cursor:pointer;min-height:44px}.phone-compass button:disabled{opacity:.6}.phone-compass p{font-size:.74rem;color:#617d90;line-height:1.5;margin:9px 0 0}.phone-compass [data-phone-status]{font-weight:650}

.observer-location{padding:1rem;border:1px solid #85bdb5;border-radius:16px;background:#edf7f5;margin-bottom:1rem}.observer-location button{padding:.7rem 1rem;border:0;border-radius:10px;background:#146c63;color:white;cursor:pointer}.observer-location a{display:inline-block;margin-top:.7rem}.observer-location small{display:block;line-height:1.5}.observer-location button:disabled{opacity:.6}