#atlas {
  position: fixed; z-index: 4; top: 18px; right: 20px; width: 208px;
  color: #3c4138; background: #ded6b9; border: 2px solid #474c40;
  box-shadow: 0 0 0 1px #f0e6c9, 4px 4px 0 #1c251b55;
  font: 10px/1.3 ui-monospace, Menlo, Consolas, monospace;
  user-select: none; touch-action: none;
}
#atlas[data-expanded="true"] { width: min(660px, calc(100vw - 44px)); }
#atlas button { color: #3c4138; background: #ece3c9; border: 1px solid #8d9278; border-radius: 0; font: inherit; text-shadow: none; padding: 3px 6px; cursor: pointer; }
#atlas button:hover, #atlas button[aria-pressed="true"] { background: #c1c8a5; }
#atlas button:focus-visible, #atlas canvas:focus-visible { outline: 2px solid #9f543c; outline-offset: 2px; }
#atlas-toggle { position: absolute; top: 6px; right: 6px; z-index: 1; min-width: 24px; min-height: 22px; font-size: 15px !important; line-height: 1 !important; }
#atlas canvas { display: block; width: 100%; aspect-ratio: 1.45; image-rendering: pixelated; cursor: zoom-in; }
#atlas[data-expanded="true"] canvas { aspect-ratio: 1.65; max-height: calc(100dvh - 154px); cursor: grab; }
#atlas[data-dragging="true"] canvas { cursor: grabbing; }
#atlas-tools { position: absolute; bottom: 8px; right: 8px; display: none; gap: 4px; align-items: center; }
#atlas[data-expanded="true"] #atlas-tools { display: flex; }
#atlas-tools button { min-width: 27px; min-height: 26px; font-size: 14px; }
#journey { right: 246px; }
@media (max-width: 620px) {
  #atlas { top: 12px; right: 12px; width: 170px; }
  #atlas[data-expanded="true"] { width: calc(100vw - 28px); }
  #journey { right: 200px; }
  #journey #stops { max-width: calc(100vw - 220px); }
}