:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #202331; color: #f5f6fa; }
aside {
  position: fixed;
  z-index: 10;
  top: 1rem;
  left: 1rem;
  width: min(24rem, calc(100vw - 2rem));
  padding: 1rem;
  border-radius: .75rem;
  background: rgba(22, 24, 34, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .35);
}
aside header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
aside.collapsed { width: auto; }
aside.collapsed #panel-content { display: none; }
h1 { margin: 0; font-size: 1.2rem; }
#panel-toggle { width: auto; margin: 0; padding: .35rem .55rem; font-size: .8rem; }
p { margin: .5rem 0; }
.map-state { color: #b7bdd0; font-size: .8rem; }
label { display: block; margin-top: .75rem; font-size: .85rem; color: #b7bdd0; }
.toggle { display: flex; align-items: center; gap: .5rem; color: #d7dbea; }
.toggle input { margin: 0; }
select, button {
  width: 100%;
  margin-top: .25rem;
  padding: .6rem;
  border: 1px solid #4e5672;
  border-radius: .4rem;
  background: #292e40;
  color: inherit;
}
.location-selectors { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .4rem; }
.location-selectors select { min-width: 0; }
.swap-locations {
  display: block;
  width: auto;
  margin: .55rem 0 0 auto;
  padding: .35rem .6rem;
  background: #30364a;
  border-color: #4e5672;
  font-size: .78rem;
}
button { margin-top: 1rem; cursor: pointer; background: #3d68d8; border-color: #5c7fe0; }
button:disabled, select:disabled { opacity: .55; cursor: wait; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: .75rem 0 0; font-size: .85rem; }
dt { color: #aeb5c9; }
dd { margin: 0; text-align: right; }
details { margin-top: .75rem; border-top: 1px solid rgba(174, 181, 201, .25); padding-top: .6rem; }
summary { color: #b7bdd0; cursor: pointer; font-size: .8rem; user-select: none; }
.attribution {
  display: grid;
  gap: .2rem;
  margin-top: .9rem;
  border-top: 1px solid rgba(174, 181, 201, .18);
  padding-top: .65rem;
  color: rgba(183, 189, 208, .72);
  font-size: .66rem;
  line-height: 1.35;
}
.attribution a { color: inherit; text-decoration-color: rgba(183, 189, 208, .4); }
.attribution a:hover { color: #e0e4f2; }
#map { width: 100vw; height: 100vh; background: rgb(72, 78, 102); }
.ol-zoom { left: auto; right: .5rem; }
.ol-rotate { left: auto; right: .5rem; top: 4.25rem; }
.ol-mouse-position { right: .5rem; top: .5rem; background: rgba(0,0,0,.6); padding: .25rem .4rem; }