:root { color-scheme: dark; font-family: Inter, Manrope, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0c100d; }
#map { display: block; width: 100%; height: 100%; cursor: grab; image-rendering: pixelated; touch-action: none; }
#map:active { cursor: grabbing; }
.topbar { position: fixed; z-index: 2; top: 20px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.brand, nav, .coordinates, .tools, .poi-card { border: 1px solid #ffffff1a; background: #101612e8; box-shadow: 0 12px 35px #0007; backdrop-filter: blur(12px); }
.brand { display: flex; gap: 11px; align-items: center; padding: 9px 14px 9px 10px; border-radius: 7px; }
.brand-mark { width: 32px; height: 32px; display: block; background: conic-gradient(from 90deg, #8ba960, #476d3d, #b7bf7c, #8ba960); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.brand div { display: grid; line-height: 1.1; }
.brand strong { font-size: 14px; letter-spacing: .02em; }
.brand small { color: #8f9a90; font: 9px ui-monospace, monospace; margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }
nav { display: flex; padding: 4px; border-radius: 7px; pointer-events: auto; }
nav button { border: 0; color: #8f9991; background: none; padding: 8px 15px; border-radius: 4px; font: 650 12px Inter, system-ui, sans-serif; cursor: pointer; }
nav button.active { color: #eef2eb; background: #788c5960; box-shadow: inset 0 0 0 1px #a6bd7560; }
.coordinates { position: fixed; z-index: 2; left: 24px; bottom: 38px; display: flex; gap: 14px; border-radius: 5px; padding: 8px 11px; color: #c4cdc5; font: 10px ui-monospace, monospace; }
#zoom { color: #77827a; border-left: 1px solid #ffffff1c; padding-left: 14px; }
.tools { position: fixed; z-index: 2; right: 24px; top: 92px; display: grid; padding: 4px; border-radius: 7px; }
.tools button { width: 34px; height: 34px; padding: 0; border: 0; border-bottom: 1px solid #ffffff12; background: transparent; color: #aeb7b0; font: 20px ui-monospace, monospace; cursor: pointer; }
.tools button:last-child { border: 0; }
.tools button:hover, .tools button.active { color: #dce9ca; background: #869c6030; }
.poi-card { position: fixed; z-index: 3; min-width: 210px; padding: 15px 34px 14px 16px; border-radius: 6px; pointer-events: none; }
.poi-card button { position: absolute; top: 5px; right: 7px; border: 0; background: none; color: #89928b; font-size: 17px; pointer-events: auto; cursor: pointer; }
.poi-card small { display: block; color: #83916f; font: 8px ui-monospace, monospace; letter-spacing: .13em; }
.poi-card strong { display: block; margin-top: 4px; font-size: 13px; text-transform: capitalize; }
.poi-card span { display: block; margin-top: 5px; color: #909b92; font: 9px ui-monospace, monospace; }
.loading { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: #0c100d; color: #899589; font: 11px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; transition: opacity .3s; }
.loading.hidden { opacity: 0; pointer-events: none; }
footer { position: fixed; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); color: #6f7971; font: 9px ui-monospace, monospace; white-space: nowrap; }
footer i { display: inline-block; width: 2px; height: 2px; margin: 0 8px 2px; border-radius: 50%; background: #778178; }
@media (max-width: 640px) {
  .topbar { top: 10px; left: 10px; right: 10px; align-items: flex-start; }
  .brand small { display: none; }
  .brand { padding-right: 10px; }
  nav { max-width: 48%; overflow-x: auto; }
  nav button { padding: 8px 10px; }
  .tools { right: 10px; top: 76px; }
  .coordinates { left: 10px; bottom: 12px; }
  footer { display: none; }
}