@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #111817;
  --paper: #f1f1e9;
  --muted: #a5ada7;
  --signal: #c3ef58;
  --mono: 'DM Mono', monospace;
  --sans: 'Manrope', sans-serif;
}

* { box-sizing: border-box; }

html, body, .map-shell, #cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body { background: var(--ink); color: var(--paper); font-family: var(--sans); }
.map-shell { position: relative; isolation: isolate; }
#cesiumContainer { position: absolute; inset: 0; }
#cesiumContainer:after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, rgb(17 24 23 / 72%) 0%, rgb(17 24 23 / 24%) 34%, transparent 65%),
              linear-gradient(0deg, rgb(17 24 23 / 60%) 0%, transparent 20%, transparent 82%, rgb(17 24 23 / 46%) 100%);
}

.topbar, .location, .map-controls, .map-footer, .layer-panel { position: absolute; z-index: 2; }
.topbar {
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(241 241 233 / 15%);
}
.brand { display: flex; gap: 12px; align-items: center; color: var(--paper); text-decoration: none; font-size: 13px; font-weight: 800; }
.brand-mark { width: 19px; height: 19px; border: 1px solid var(--signal); border-radius: 50%; position: relative; }
.brand-mark:before, .brand-mark:after { position: absolute; content: ''; background: var(--signal); }
.brand-mark:before { width: 1px; height: 25px; top: -4px; left: 8px; }
.brand-mark:after { width: 25px; height: 1px; top: 8px; left: -4px; }
.brand-divider { color: var(--signal); margin: 0 7px; font-weight: 400; }
.brand-subtitle { color: #b7bdb7; font-size: 10px; font-weight: 500; }
.topbar-meta { display: flex; align-items: center; gap: 9px; font: 10px var(--mono); color: #d0d5cf; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px rgb(195 239 88 / 70%); }

.location { top: 34%; left: 8.5%; max-width: 340px; animation: arrive .65s ease-out both; }
.eyebrow { margin: 0 0 10px; font: 10px var(--mono); color: var(--signal); }
h1 { margin: 0; font-size: 64px; line-height: 1; font-weight: 600; }
h1.long-location { font-size: 48px; }
.country { display: flex; align-items: center; gap: 12px; margin: 15px 0 30px; color: #d0d5cf; font-size: 14px; }
.country-rule { width: 30px; height: 1px; background: rgb(195 239 88 / 70%); }
.location-select-label { display: block; margin-bottom: 7px; color: var(--muted); font: 9px var(--mono); }
.location-select-wrap { position: relative; }
.location-select-wrap select { width: 100%; height: 42px; padding: 0 38px 0 12px; appearance: none; border: 1px solid rgb(241 241 233 / 30%); border-radius: 0; outline: 0; background: rgb(17 24 23 / 78%); color: var(--paper); font: 11px var(--sans); cursor: pointer; }
.location-select-wrap select:hover, .location-select-wrap select:focus-visible { border-color: var(--signal); }
.location-select-wrap select option { background: var(--ink); color: var(--paper); }
.select-chevron { position: absolute; top: 16px; right: 14px; width: 8px; height: 8px; border-right: 1px solid var(--signal); border-bottom: 1px solid var(--signal); transform: rotate(45deg); pointer-events: none; }
.coordinates { display: flex; gap: 22px; padding-top: 14px; border-top: 1px solid rgb(241 241 233 / 24%); color: #c4cbc4; font: 10px var(--mono); }

.map-controls { right: 34px; bottom: 82px; display: flex; flex-direction: column; align-items: center; background: rgb(17 24 23 / 84%); border: 1px solid rgb(241 241 233 / 24%); backdrop-filter: blur(10px); }
.map-controls button { width: 42px; height: 42px; color: var(--paper); background: transparent; border: 0; cursor: pointer; font: 21px var(--sans); transition: color .15s, background .15s; }
.map-controls button:hover { color: var(--signal); background: rgb(241 241 233 / 8%); }
.map-controls .reset-button { font: 10px var(--mono); color: var(--signal); }
.control-divider { width: 24px; height: 1px; background: rgb(241 241 233 / 20%); }
.layers-icon, .layers-icon:before, .layers-icon:after { position: absolute; width: 15px; height: 9px; border: 1px solid currentColor; transform: skewY(-25deg); }
.layers-icon { top: 15px; left: 13px; }
.layers-icon:before, .layers-icon:after { content: ''; left: -1px; background: var(--ink); }
.layers-icon:before { top: -4px; }
.layers-icon:after { top: 4px; }
.layers-toggle:hover .layers-icon, .layers-toggle:hover .layers-icon:before, .layers-toggle:hover .layers-icon:after { color: var(--signal); }
.layer-panel { top: 92px; right: 34px; width: 292px; max-height: calc(100% - 174px); overflow-y: auto; padding: 18px; background: rgb(17 24 23 / 94%); border: 1px solid rgb(241 241 233 / 24%); backdrop-filter: blur(14px); box-shadow: 0 16px 48px rgb(0 0 0 / 28%); }
.layer-panel[hidden], .layer-hint[hidden] { display: none; }
.layer-panel-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; }
.layer-panel-header .eyebrow { margin-bottom: 7px; }
.layer-panel-header h2 { margin: 0; font-size: 19px; font-weight: 600; }
.layer-close { width: 28px; height: 28px; border: 1px solid rgb(241 241 233 / 24%); background: transparent; color: var(--paper); cursor: pointer; font: 20px/1 var(--sans); }
.layer-close:hover { color: var(--signal); border-color: var(--signal); }
.layer-group { min-width: 0; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid rgb(241 241 233 / 18%); }
.layer-group legend { padding: 0; color: var(--muted); font: 9px var(--mono); }
.base-map-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
.base-map-option { position: relative; display: grid; gap: 7px; cursor: pointer; }
.base-map-option input { position: absolute; opacity: 0; }
.base-map-swatch { display: block; height: 68px; border: 1px solid rgb(241 241 233 / 18%); }
.street-swatch { background-color: #2d3e39; background-image: linear-gradient(25deg, transparent 46%, #bec1a7 47%, #bec1a7 50%, transparent 51%), linear-gradient(110deg, transparent 43%, #879284 44%, #879284 47%, transparent 48%), repeating-linear-gradient(0deg, transparent 0 12px, rgb(241 241 233 / 12%) 13px 14px); }
.satellite-swatch { background: radial-gradient(ellipse at 30% 70%, #b4a66e 0 8%, transparent 9%), radial-gradient(ellipse at 75% 30%, #5a7558 0 20%, transparent 21%), linear-gradient(135deg, #415b48, #a08e5c 44%, #45634c 70%, #62715b); }
.base-map-name { color: #c4cbc4; font-size: 11px; }
.base-map-option input:checked + .base-map-swatch { border: 2px solid var(--signal); }
.base-map-option input:checked ~ .base-map-name { color: var(--paper); }
.base-map-option input:focus-visible + .base-map-swatch { outline: 2px solid var(--paper); outline-offset: 2px; }
.overlay-group { margin-top: 17px; }
.layer-option { display: flex; align-items: center; gap: 10px; min-height: 49px; border-bottom: 1px solid rgb(241 241 233 / 10%); cursor: pointer; }
.layer-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--signal); flex: 0 0 auto; }
.layer-option input:disabled { cursor: not-allowed; }
.layer-option-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.layer-option-copy strong { color: #e6e9e3; font-size: 11px; font-weight: 500; }
.layer-option-copy small { color: var(--muted); font-size: 9px; }
.layer-option:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.ion-mark { color: var(--signal); font: 8px var(--mono); }
.layer-hint, .layer-status { margin: 12px 0 0; color: var(--muted); font: 9px/1.6 var(--mono); }
.layer-status:empty { display: none; }
.map-footer { bottom: 0; left: 0; right: 0; height: 50px; padding: 0 38px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgb(241 241 233 / 15%); color: #b4bcb5; font: 9px var(--mono); }
.footer-coordinates { display: flex; gap: 12px; }
.footer-source a { color: inherit; text-decoration: none; }
.footer-source a:hover { color: var(--paper); text-decoration: underline; }
.footer-source > span { color: var(--signal); margin: 0 5px; }
.cesium-viewer-bottom { display: none; }

@keyframes arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .topbar { height: 62px; padding: 0 20px; }
  .location { top: auto; bottom: 13%; left: 22px; max-width: calc(100% - 94px); }
  h1 { font-size: 48px; }
  h1.long-location { font-size: 38px; }
  .country { margin: 11px 0 18px; }
  .location-select-wrap select { height: 40px; }
  .coordinates { gap: 14px; }
  .map-controls { right: 18px; bottom: 90px; }
  .map-controls button { width: 38px; height: 38px; }
  .layers-icon { top: 14px; left: 12px; }
  .layer-panel { top: 74px; right: 16px; width: min(292px, calc(100% - 32px)); max-height: calc(100% - 162px); padding: 15px; }
  .layer-panel-header { padding-bottom: 12px; }
  .layer-group { padding-top: 10px; }
  .base-map-swatch { height: 56px; }
  .overlay-group { margin-top: 12px; }
  .layer-option { min-height: 44px; }
  .map-footer { height: auto; min-height: 56px; padding: 8px 20px; align-items: flex-start; flex-direction: column; gap: 4px; font-size: 8px; }
  .footer-source { font-size: 8px; }
  .footer-coordinates { gap: 8px; }
}