.mission-atlas-mount {
  min-width: 0;
}

.mission-atlas {
  --atlas-grid: rgb(255 255 255 / 0.035);
  --atlas-panel: #071012;
  --atlas-panel-strong: #091719;
  --atlas-line: #334447;
  --atlas-copy: #a6b1ac;
  position: relative;
  min-width: 0;
  padding: 28px;
  overflow: clip;
  border: 1px solid #435255;
  background:
    radial-gradient(circle at 88% 0%, rgb(71 137 139 / 0.16), transparent 28rem),
    linear-gradient(145deg, rgb(11 26 29 / 0.98), rgb(4 8 9 / 0.99));
  box-shadow:
    inset 0 0 0 4px #030607,
    0 28px 70px rgb(0 0 0 / 0.24);
}

.mission-atlas::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(var(--atlas-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--atlas-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.mission-atlas > * {
  position: relative;
  z-index: 1;
}

.mission-atlas-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid #2c3b3e;
}

.mission-atlas-header h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.94;
  text-transform: uppercase;
}

.mission-atlas-header p:last-child {
  max-width: 780px;
  margin: 12px 0 0;
  color: var(--atlas-copy);
  font-size: 0.82rem;
  line-height: 1.65;
}

.mission-atlas-header-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  padding-bottom: 3px;
}

.mission-atlas-header-meta small {
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission-atlas-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mission-atlas-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid #3f4d50;
  background: #091113;
  color: #a8b2ae;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
}

.mission-atlas-chip--status {
  border-color: rgb(185 242 74 / 0.55);
  color: var(--green);
}

.mission-atlas-chip--required {
  border-color: rgb(242 138 33 / 0.55);
  color: #ffad5c;
}

.mission-atlas-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.mission-atlas-filter,
.mission-atlas-phase {
  appearance: none;
  border: 1px solid #344346;
  background: #071012;
  color: #929e99;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}

.mission-atlas-filter {
  display: inline-grid;
  grid-template-columns: auto minmax(22px, auto);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 7px 6px 10px;
}

.mission-atlas-filter b {
  display: grid;
  min-width: 22px;
  min-height: 20px;
  place-items: center;
  border: 1px solid #2d3a3c;
  background: #030707;
  color: #64716e;
  font-size: 0.62rem;
}

.mission-atlas-filter:hover,
.mission-atlas-phase:hover {
  border-color: #708083;
  color: #d7ded9;
  transform: translateY(-1px);
}

.mission-atlas-filter[aria-pressed="true"] {
  border-color: rgb(185 242 74 / 0.56);
  background: rgb(44 69 31 / 0.33);
  color: var(--green);
}

.mission-atlas-filter[aria-pressed="true"] b {
  border-color: rgb(185 242 74 / 0.32);
  color: var(--green);
}

.mission-atlas-filter[aria-pressed="false"] {
  opacity: 0.52;
  text-decoration: line-through;
}

.mission-atlas-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 11px 0 20px;
  padding: 11px;
  border: 1px solid #283638;
  background: rgb(2 6 7 / 0.72);
}

.mission-atlas-phase {
  --phase-color: var(--green);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
}

.mission-atlas-phase::before {
  width: 7px;
  height: 7px;
  border: 1px solid var(--phase-color);
  background: transparent;
  content: "";
  transform: rotate(45deg);
}

.mission-atlas-phase.is-active {
  border-color: var(--phase-color);
  background: color-mix(in srgb, var(--phase-color) 12%, #071012);
  color: var(--phase-color);
}

.mission-atlas-phase.is-active::before {
  background: var(--phase-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--phase-color) 70%, transparent);
}

.mission-atlas-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 18px;
  align-items: start;
}

.mission-atlas-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #415154;
  background: #020505;
  box-shadow:
    inset 0 0 0 3px #0a1213,
    inset 0 16px 50px rgb(0 0 0 / 0.4);
  scrollbar-color: #56676a #071012;
  scrollbar-width: thin;
}

.mission-atlas-viewport:focus-visible {
  outline-offset: 3px;
}

.mission-atlas-canvas {
  position: relative;
  width: max(100%, 780px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgb(38 78 80 / 0.2), transparent 42%),
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px),
    #030708;
  background-size: auto, 20px 20px, 20px 20px, auto;
}

.mission-atlas-canvas::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 7px solid rgb(0 0 0 / 0.28);
  content: "";
  pointer-events: none;
}

.mission-atlas-floor {
  position: absolute;
  z-index: 0;
  border: 1px solid rgb(93 112 115 / 0.32);
  background: linear-gradient(90deg, rgb(11 26 29 / 0.46), rgb(7 13 14 / 0.28));
  pointer-events: none;
}

.mission-atlas-floor:nth-of-type(even) {
  background: linear-gradient(90deg, rgb(13 32 34 / 0.4), rgb(5 10 11 / 0.24));
}

.mission-atlas-floor > span {
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 2px 5px;
  border-left: 2px solid #516164;
  background: rgb(3 7 8 / 0.78);
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mission-atlas-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mission-atlas-lines--connections { z-index: 1; }
.mission-atlas-lines--route { z-index: 2; }

.mission-atlas-node {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2px;
  align-content: center;
  min-width: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #556568;
  background: rgb(6 16 18 / 0.88);
  color: #d9e0dc;
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 0 0 2px rgb(0 0 0 / 0.35),
    0 6px 15px rgb(0 0 0 / 0.26);
  transition:
    opacity 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.mission-atlas-node:hover {
  z-index: 6;
  border-color: #a7b5b7;
  background: rgb(12 34 37 / 0.96);
  transform: translateY(-2px);
}

.mission-atlas-node.is-selected {
  z-index: 6;
  border-color: var(--green);
  background: rgb(27 50 31 / 0.96);
  box-shadow:
    inset 0 0 0 2px rgb(185 242 74 / 0.15),
    0 0 0 2px rgb(185 242 74 / 0.12),
    0 10px 25px rgb(0 0 0 / 0.4);
}

.mission-atlas-node.is-route-dimmed {
  opacity: 0.3;
}

.mission-atlas-node-type {
  overflow: hidden;
  color: #a1aca7;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mission-atlas-node strong {
  align-self: center;
  overflow: hidden;
  font-size: clamp(0.55rem, 0.82vw, 0.7rem);
  line-height: 1.13;
  text-overflow: ellipsis;
}

.mission-atlas-node-steps {
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.mission-atlas-node--start { border-color: #65a9ff; }
.mission-atlas-node--finish,
.mission-atlas-node--objective { border-color: rgb(242 138 33 / 0.78); }
.mission-atlas-node--hub { border-color: rgb(185 242 74 / 0.6); }
.mission-atlas-node--hazard,
.mission-atlas-node--breach,
.mission-atlas-node--combat { border-color: rgb(239 86 77 / 0.68); }
.mission-atlas-node--control,
.mission-atlas-node--gate { border-color: rgb(214 227 90 / 0.6); }
.mission-atlas-node--stairs,
.mission-atlas-node--elevator,
.mission-atlas-node--transition { border-color: rgb(90 169 255 / 0.62); }

.mission-atlas-marker,
.mission-atlas-connector {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition:
    filter 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.mission-atlas-marker:hover,
.mission-atlas-connector:hover,
.mission-atlas-marker.is-selected,
.mission-atlas-connector.is-selected {
  filter: brightness(1.18);
  transform: translate(-50%, -50%) scale(1.14);
}

.mission-atlas-marker {
  z-index: 5;
  width: 30px;
  height: 30px;
  background: #081012;
  color: #d6e35a;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.5);
}

.mission-atlas-marker b {
  font-size: 0.62rem;
}

.mission-atlas-marker small {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #526164;
  border-radius: 50%;
  background: #020505;
  color: #e7ece7;
  font-size: 0.4rem;
}

.mission-atlas-marker--switch { color: #d6e35a; }
.mission-atlas-marker--key-item { color: #f28a21; }
.mission-atlas-marker--enemy { color: #ef564d; }
.mission-atlas-marker--trigger { color: #b9f24a; }
.mission-atlas-marker--hazard { color: #ff6460; }
.mission-atlas-marker--supply { color: #5aa9ff; }
.mission-atlas-marker--landmark { color: #b99cff; }

.mission-atlas-marker.is-selected {
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.12),
    0 0 24px currentColor;
}

.mission-atlas-connector {
  z-index: 4;
  width: 25px;
  height: 25px;
  background: rgb(3 8 9 / 0.94);
  color: #92a0a3;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.48);
}

.mission-atlas-connector span {
  font-size: 0.62rem;
}

.mission-atlas-connector--stairs,
.mission-atlas-connector--ladder,
.mission-atlas-connector--elevator { color: #5aa9ff; }
.mission-atlas-connector--breach { color: #ef564d; }
.mission-atlas-connector--gate { color: #f28a21; }
.mission-atlas-connector--transition { color: #b99cff; }
.mission-atlas-connector--passage { color: #5d6c6f; }

.mission-atlas-marker[hidden],
.mission-atlas-connector[hidden] {
  display: none;
}

.mission-atlas-detail {
  position: sticky;
  top: 94px;
  min-width: 0;
  min-height: 440px;
  max-height: min(720px, calc(100vh - 118px));
  padding: 20px;
  overflow: auto;
  border: 1px solid #3b4b4e;
  background:
    linear-gradient(rgb(255 255 255 / 0.018) 1px, transparent 1px),
    #061012;
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 3px #030607;
  scrollbar-color: #56676a #071012;
  scrollbar-width: thin;
}

.mission-atlas-detail-header {
  padding-bottom: 15px;
  border-bottom: 1px solid #2b393c;
}

.mission-atlas-detail-header h4 {
  margin: 0 0 12px;
  color: #eef2ed;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.6vw, 2.45rem);
  font-style: italic;
  line-height: 0.98;
  text-transform: uppercase;
}

.mission-atlas-detail-copy {
  margin: 16px 0 0;
  color: #a5b0ac;
  font-size: 0.76rem;
  line-height: 1.65;
}

.mission-atlas-detail-hint {
  margin: 18px 0 0;
  padding: 10px;
  border-left: 2px solid #4e5e61;
  background: #040a0b;
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.55;
  text-transform: uppercase;
}

.mission-atlas-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  background: #273538;
}

.mission-atlas-detail-stats > div {
  padding: 10px;
  background: #071012;
}

.mission-atlas-detail-stats dt {
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mission-atlas-detail-stats dd {
  margin: 2px 0 0;
  color: var(--green);
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
}

.mission-atlas-detail-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #29373a;
}

.mission-atlas-detail-block h5 {
  margin: 0 0 10px;
  color: #dce2dd;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mission-atlas-phase-list,
.mission-atlas-detail-list,
.mission-atlas-connection-list,
.mission-atlas-detail-route {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission-atlas-phase-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 9px;
  align-items: start;
}

.mission-atlas-phase-list i {
  --phase-color: var(--green);
  width: 7px;
  height: 7px;
  margin-top: 5px;
  background: var(--phase-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--phase-color) 70%, transparent);
  transform: rotate(45deg);
}

.mission-atlas-phase-list strong,
.mission-atlas-phase-list span {
  display: block;
}

.mission-atlas-phase-list strong {
  color: #d7ddd8;
  font-size: 0.7rem;
}

.mission-atlas-phase-list span {
  margin-top: 2px;
  color: #7f8c88;
  font-size: 0.64rem;
  line-height: 1.45;
}

.mission-atlas-detail-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px;
  background: #050b0c;
}

.mission-atlas-mini-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #d6e35a;
  font-family: var(--mono);
  font-size: 0.62rem;
}

.mission-atlas-mini-icon--key-item { color: #f28a21; }
.mission-atlas-mini-icon--enemy { color: #ef564d; }
.mission-atlas-mini-icon--trigger { color: #b9f24a; }
.mission-atlas-mini-icon--hazard { color: #ff6460; }
.mission-atlas-mini-icon--supply { color: #5aa9ff; }
.mission-atlas-mini-icon--landmark { color: #b99cff; }

.mission-atlas-detail-list strong,
.mission-atlas-detail-list small {
  display: block;
}

.mission-atlas-detail-list strong {
  color: #d9dfda;
  font-size: 0.69rem;
}

.mission-atlas-detail-list small {
  margin-top: 2px;
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.mission-atlas-connection-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-left: 2px solid #536366;
  background: #050b0c;
}

.mission-atlas-connection-list li > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #435255;
  border-radius: 50%;
  color: #94a1a3;
  font-family: var(--mono);
  font-size: 0.62rem;
}

.mission-atlas-connection-list p {
  margin: 0;
  color: #cbd3ce;
  font-size: 0.66rem;
  line-height: 1.35;
}

.mission-atlas-connection-list small {
  grid-column: 2;
  color: #f2a65b;
  font-family: var(--mono);
  font-size: 0.66rem;
}

.mission-atlas-detail-route {
  counter-reset: none;
}

.mission-atlas-detail-route li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid #1e2a2c;
}

.mission-atlas-detail-route li:last-child {
  border-bottom: 0;
}

.mission-atlas-detail-route li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgb(185 242 74 / 0.42);
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 900;
}

.mission-atlas-detail-route p {
  margin: 0;
  color: #9da9a4;
  font-size: 0.72rem;
  line-height: 1.5;
}

.mission-atlas-detail-route a {
  display: inline-block;
  margin-top: 5px;
  color: #8fc0ff;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.mission-atlas-state-change {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid rgb(242 138 33 / 0.35);
  background: rgb(54 30 8 / 0.28);
}

.mission-atlas-state-change span {
  color: #d49a64;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mission-atlas-state-change strong {
  color: #ffc07c;
  font-size: 0.7rem;
  line-height: 1.4;
}

.mission-atlas-endpoints {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.mission-atlas-endpoints span {
  padding: 8px;
  border: 1px solid #2d3c3f;
  background: #040a0b;
  color: #b8c2bd;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: center;
}

.mission-atlas-endpoints i {
  color: var(--green);
  font-family: var(--mono);
  font-style: normal;
  text-align: center;
}

.mission-atlas-detail-media {
  margin: 18px 0 0;
  padding: 8px;
  border: 1px solid #374649;
  background: #020404;
}

.mission-atlas-detail-media img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mission-atlas-detail-media figcaption {
  margin-top: 7px;
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.mission-atlas-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #29383a;
}

.mission-atlas-legend > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #929e99;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mission-atlas-legend > p {
  flex: 1 1 100%;
  margin: 5px 0 0;
  color: #929e99;
  font-size: 0.64rem;
  line-height: 1.5;
}

.mission-atlas-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #738184;
  background: #071012;
}

.mission-atlas-legend-swatch--route {
  width: 18px;
  height: 3px;
  border: 0;
  background: var(--green);
  box-shadow: 0 0 8px rgb(185 242 74 / 0.35);
}

.mission-atlas-legend-swatch--node { background: #0d2629; }
.mission-atlas-legend-swatch--connector {
  border-radius: 50%;
  background: #081012;
}
.mission-atlas-legend-swatch--switch { border-color: #d6e35a; border-radius: 50%; }
.mission-atlas-legend-swatch--key-item { border-color: #f28a21; border-radius: 50%; }
.mission-atlas-legend-swatch--enemy { border-color: #ef564d; border-radius: 50%; }
.mission-atlas-legend-swatch--trigger { border-color: #b9f24a; border-radius: 50%; }

.mission-atlas--error {
  min-height: 220px;
  display: grid;
  align-content: center;
}

.mission-atlas--error h3 {
  margin: 0;
  color: #ef7c76;
  font-family: var(--display);
  font-size: 2rem;
  font-style: italic;
  text-transform: uppercase;
}

.mission-atlas--error p:last-child {
  max-width: 680px;
  color: #9ba6a2;
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .mission-atlas-phase.is-active {
    background: #10201a;
  }
}

@media (max-width: 1120px) {
  .mission-atlas {
    padding: 22px;
  }

  .mission-atlas-workspace {
    grid-template-columns: 1fr;
  }

  .mission-atlas-detail {
    position: relative;
    top: auto;
    display: block;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .mission-atlas {
    padding: 17px;
  }

  .mission-atlas-header {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .mission-atlas-header-meta {
    justify-items: start;
  }

  .mission-atlas-controls,
  .mission-atlas-phases {
    flex-wrap: nowrap;
    margin-inline: -17px;
    padding-inline: 17px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .mission-atlas-controls {
    padding-bottom: 5px;
  }

  .mission-atlas-filter,
  .mission-atlas-phase {
    flex: 0 0 auto;
  }

  .mission-atlas-canvas {
    width: 780px;
  }

  .mission-atlas-legend {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .mission-atlas {
    padding: 14px;
  }

  .mission-atlas-controls,
  .mission-atlas-phases {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .mission-atlas-header h3 {
    font-size: 2rem;
  }

  .mission-atlas-header p:last-child {
    font-size: 0.75rem;
  }

  .mission-atlas-detail {
    padding: 16px;
  }

  .mission-atlas-detail-stats {
    grid-template-columns: 1fr 1fr;
  }

  .mission-atlas-legend > span {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-atlas-filter,
  .mission-atlas-phase,
  .mission-atlas-node,
  .mission-atlas-marker,
  .mission-atlas-connector {
    transition: none;
  }
}