body { margin: 0; color: #171717; background: white; font: 15px/1.45 system-ui, sans-serif; }
main { max-width: 1160px; margin: 32px auto; padding: 0 18px; }
a { color: inherit; text-underline-offset: 2px; }
h1 { font-size: 23px; font-weight: 600; margin: 18px 0 6px; }
h2 { font-size: 17px; font-weight: 600; }
p { margin: 10px 0; }
.intro, .hint, .sources { color: #666; }
.hint { font-size: 13px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#mode-label { margin-right: auto; }
button, input { font: inherit; border: 1px solid #aaa; border-radius: 5px; padding: 7px 10px; background: white; color: #171717; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .5; }
button[aria-pressed="true"], #connect { color: white; background: #171717; }
button:focus-visible, input:focus-visible, #custom:focus-visible { outline: 2px solid #287a44; outline-offset: 2px; }
.status { min-height: 1.5em; color: #666; font-size: 13px; }
.status[data-error="true"] { color: #bc3f32; }
.viewer { width: 100%; height: 65vh; min-height: 400px; max-height: 900px; position: relative; background: #101010; border: 1px solid #ddd; box-sizing: border-box; }
.viewer:fullscreen { width: 100vw; height: 100vh; max-height: none; border: none; }
#official, #custom { width: 100%; height: 100%; display: block; border: 0; }
#custom canvas { touch-action: none; }
#custom .cesium-widget-credits { background: #fff; color: #171717; padding: 10px 10px 5px; box-sizing: border-box; max-width: 100%; font-size: 10px; }
#custom .cesium-credit-logoContainer { margin-right: 18px; }
#custom .cesium-credit-textContainer { white-space: normal; overflow-wrap: anywhere; }
#custom .cesium-widget-credits a { color: #171717; }
#fps { font: 13px ui-monospace, monospace; color: #666; }
.touch-controls { display: flex; flex-wrap: wrap; gap: 12px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 13px; color: #666; padding: 0 0 5px; }
[data-hold] { touch-action: none; min-width: 42px; min-height: 42px; user-select: none; }
[data-held="true"] { background: #171717; color: white; }
details, .sources { border-top: 1px solid #ddd; margin-top: 24px; padding-top: 14px; }
summary { cursor: pointer; }
form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
#api-key { flex: 1; min-width: 200px; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  main { margin: 24px auto; padding: 0 12px; }
  h1 { font-size: 21px; }
  .viewer { height: 60vh; min-height: 340px; }
  form label { width: 100%; }
  #mode-label { width: 100%; }
}