.observatory { overflow: hidden; background: #070d12; padding-top: 140px; padding-bottom: 150px; }
.observatory-heading { max-width: 1500px; margin: 0 auto 60px; display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.observatory-heading h2 { margin: 24px 0 0; font-size: clamp(70px, 9vw, 150px); line-height: .85; font-weight: 600; letter-spacing: -.085em; }
.observatory-heading h2 em { color: var(--acid); font-style: normal; }
.observatory-heading>p { max-width: 380px; margin: 0 0 10px; color: #9aafb1; font-size: 17px; line-height: 1.6; }
.observatory-console { position: relative; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(310px,.72fr); min-height: 700px; max-width: 1500px; margin: auto; border: 1px solid rgba(168,221,218,.2); background: #060e13; box-shadow: 0 50px 130px rgba(0,0,0,.3),inset 0 0 100px rgba(72,198,187,.03); }
.globe-viewport { position: relative; min-height: 700px; overflow: hidden; touch-action: pan-y; cursor: grab; background: radial-gradient(circle at 50% 48%,rgba(26,94,104,.23),rgba(4,11,17,.3) 40%,transparent 70%); }
.globe-viewport.is-dragging { cursor: grabbing; }
.globe-viewport canvas { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.globe-backdrop { position: absolute; inset: 0; opacity: .7; background: radial-gradient(circle at 50% 50%,transparent 32%,rgba(21,75,91,.13) 33%,transparent 33.2%,transparent 47%,rgba(21,75,91,.1) 47.2%,transparent 47.4%),linear-gradient(rgba(127,217,220,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(127,217,220,.035) 1px,transparent 1px); background-size: auto,70px 70px,70px 70px; }
.globe-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 200 550px/1 var(--display); color: rgba(71,166,174,.14); }
.globe-viewport.has-webgl .globe-fallback { display: none; }
.globe-axis { position: absolute; z-index: 3; width: 56px; height: 1px; background: var(--acid); box-shadow: 0 0 18px var(--acid); pointer-events: none; }
.globe-axis-a { left: 30px; top: 30px; }.globe-axis-b { right: 30px; bottom: 30px; }
.globe-caption { position: absolute; z-index: 4; left: 30px; color: #92b8bb; font: 500 10px var(--mono); letter-spacing: .14em; pointer-events: none; }
.globe-caption-top { top: 49px; }.globe-caption-bottom { bottom: 40px; }
.observatory-feed { position: relative; z-index: 3; display: flex; flex-direction: column; padding: 35px 30px; border-left: 1px solid rgba(168,221,218,.18); background: linear-gradient(160deg,rgba(12,31,38,.95),rgba(6,14,19,.96)); }
.feed-topline { display: flex; justify-content: space-between; gap: 12px; color: var(--acid); font: 500 10px var(--mono); letter-spacing: .15em; }
.feed-topline>span:first-child { display: flex; align-items: center; gap: 10px; }
#presence-status { color: #8aa6a9; }
.live-indicator { width: 7px; height: 7px; border-radius: 50%; background: #8aa6a9; box-shadow: 0 0 15px #8aa6a9; }
.observatory-console.is-live .live-indicator { background: var(--acid); box-shadow: 0 0 15px var(--acid); animation: livePulse 2s infinite; }
@keyframes livePulse { 50% { opacity: .35; transform: scale(.65); } }
.visitor-total { display: flex; align-items: end; gap: 20px; margin: 60px 0 50px; }
.visitor-total strong { font: 500 clamp(100px,10vw,160px)/.7 var(--display); letter-spacing: -.11em; color: var(--white); }
.visitor-total span { color: #8ca8aa; font: 500 10px/1.5 var(--mono); letter-spacing: .12em; }
.feed-divider { height: 1px; background: rgba(168,221,218,.17); }
.feed-label { margin: 26px 0 20px; color: var(--acid); font: 500 10px var(--mono); letter-spacing: .15em; }
/* Keep the globe and status panel steady even when many country/product rows arrive. */
.presence-feed { flex: 1 1 auto; min-height: 0; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--acid) transparent; }
.presence-feed:focus-visible { outline: 1px solid var(--acid); outline-offset: 4px; }
.feed-empty { max-width: 240px; margin: 0; color: #8aa4a8; font: 400 13px/1.7 var(--mono); }
.signal-entry { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(168,221,218,.1); }
.signal-entry, .feed-empty { flex-shrink: 0; }
.signal-entry:before { content: '✦'; color: var(--acid); text-shadow: 0 0 12px var(--acid); animation: livePulse 2.5s infinite; }
.signal-entry p { margin: 0; color: #d6e5df; font-size: 13px; line-height: 1.5; }
.signal-flag { display: inline-block; margin-left: .12em; font-size: 1.05em; line-height: 1; vertical-align: -.06em; }
.signal-entry a { color: var(--acid); text-decoration: none; }
.signal-entry small { display: block; margin-top: 5px; color: #80989a; font: 400 9px var(--mono); letter-spacing: .11em; }
.feed-disclosure { margin: 35px 0 0; color: #779093; font: 400 10px/1.6 var(--mono); }
html[data-theme="light"] .observatory { background: linear-gradient(#f5efdf,#eee6d6); }
html[data-theme="light"] .observatory-heading>p { color: #53696b; }
html[data-theme="light"] .observatory-console { background: #dfe7dc; border-color: rgba(24,75,82,.25); box-shadow: 0 40px 100px rgba(58,85,67,.13); }
html[data-theme="light"] .globe-viewport { background: radial-gradient(circle at 50% 48%,rgba(255,220,159,.6),rgba(191,226,214,.35) 50%,transparent 75%); }
html[data-theme="light"] .globe-backdrop { filter: sepia(.55); }
html[data-theme="light"] .globe-caption { color: #43646a; }
html[data-theme="light"] .observatory-feed { background: linear-gradient(160deg,rgba(255,250,234,.97),rgba(229,232,215,.96)); border-color: rgba(24,75,82,.2); }
html[data-theme="light"] #presence-status, html[data-theme="light"] .visitor-total span, html[data-theme="light"] .feed-empty, html[data-theme="light"] .feed-disclosure { color: #52696b; }
html[data-theme="light"] .feed-divider, html[data-theme="light"] .signal-entry { border-color: rgba(24,75,82,.16); }
html[data-theme="light"] .signal-entry p { color: #25424a; }
html[data-theme="light"] .signal-entry small { color: #597174; }
@media (max-width: 900px) { .observatory-console { grid-template-columns: 1fr; } .globe-viewport { min-height: 590px; } .observatory-feed { border-left: 0; border-top: 1px solid var(--line); min-height: 400px; } .visitor-total { margin: 40px 0; } }
@media (max-width: 650px) { .observatory { padding: 100px 20px; } .observatory-heading { display: block; } .observatory-heading>p { margin-top: 30px; } .globe-viewport { min-height: 440px; } .globe-fallback { font-size: 350px; } .globe-caption { font-size: 8px; left: 20px; } .globe-caption-top { top: 30px; } .globe-caption-bottom { bottom: 25px; } .observatory-feed { padding: 25px 20px; } }