.spatial-testbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 17px 0 11px;
}

.spatial-testbar button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--portal-line-strong);
  border-radius: 999px;
  background: var(--portal-panel-strong);
  color: var(--portal-text);
  font-size: .76rem;
  font-weight: 750;
}

.spatial-testbar button:hover,
.spatial-testbar button[aria-pressed="true"] {
  border-color: var(--portal-accent);
  box-shadow: 0 0 18px var(--portal-glow);
}

.spatial-testbar small {
  color: var(--portal-muted);
  font-size: .74rem;
  line-height: 1.4;
}

.spatial-journey { display: none; }
.journey-canvas[data-spatial-mode="on"] .spatial-journey { display: block; }
.journey-canvas[data-spatial-mode="on"] .potential-journey { display: none; }

.spatial-journey {
  overflow: hidden;
  border: 1px solid rgba(186, 220, 227, .28);
  border-radius: 18px;
  background: #0c151b;
  color: #f3f8f9;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .18);
}

.spatial-stage {
  position: relative;
  height: clamp(360px, 38vw, 530px);
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 50% 57%;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(70, 146, 169, .17), transparent 45%),
    linear-gradient(180deg, #071016 0%, #13212a 56%, #101c23 100%);
}

.spatial-horizon {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6, 10, 13, .65), transparent 25%),
    radial-gradient(ellipse 44% 15% at 50% 38%, rgba(151, 211, 220, .08), transparent 80%);
  pointer-events: none;
}

.spatial-next-preview {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 15;
  display: grid;
  gap: 4px;
  max-width: 190px;
  padding: 10px 12px;
  border-left: 1px solid rgba(164, 226, 239, .47);
  background: rgba(6, 14, 19, .33);
  text-align: right;
  pointer-events: none;
}

.spatial-next-preview small { color: #a9c9d2; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.spatial-next-preview strong { color: #e9f5f6; font-size: .78rem; font-weight: 620; line-height: 1.25; }

.spatial-floor {
  position: absolute;
  left: -35%;
  top: 48%;
  width: 170%;
  height: 175%;
  transform: rotateX(72deg);
  transform-origin: center top;
  background:
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(159, 221, 235, .06) 97px 98px),
    repeating-linear-gradient(0deg, transparent 0 110px, rgba(159, 221, 235, .07) 111px 112px),
    linear-gradient(180deg, rgba(127, 185, 205, .07), transparent 58%);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 75%, transparent);
  pointer-events: none;
}

.spatial-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.spatial-track path {
  fill: none;
  stroke: rgba(154, 231, 249, .43);
  stroke-width: 1.3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(154, 231, 249, .58));
}

.spatial-track path.is-optional {
  stroke: rgba(193, 213, 226, .48);
  stroke-dasharray: 5 8;
  filter: drop-shadow(0 0 6px rgba(198, 226, 242, .3));
}

.spatial-node {
  position: absolute;
  left: 50%;
  top: 62%;
  display: grid;
  place-items: center;
  width: 178px;
  height: 178px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2f8f9;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1), opacity 600ms ease;
}

.spatial-node:focus-visible { outline: 2px solid #d7f5fb; outline-offset: 4px; }

.spatial-disc {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(185, 237, 247, .78);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 245, 251, .16), rgba(92, 169, 192, .05) 52%, transparent 72%);
  box-shadow: 0 0 0 11px rgba(140, 216, 231, .045), 0 0 35px rgba(141, 219, 239, .15);
  transform: rotateX(67deg);
}

.spatial-disc i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d3f3f7;
  box-shadow: 0 0 18px rgba(198, 244, 255, .9);
}

.spatial-node[data-active="true"] .spatial-disc {
  border-width: 2px;
  box-shadow: 0 0 0 16px rgba(140, 216, 231, .08), 0 0 50px rgba(141, 219, 239, .32);
}

.spatial-node.is-optional .spatial-disc { border-style: dashed; }
.spatial-node.is-planned:not([data-active="true"]) .spatial-disc { opacity: .58; }
.spatial-node:hover .spatial-disc { box-shadow: 0 0 0 16px rgba(140, 216, 231, .09), 0 0 50px rgba(141, 219, 239, .3); }

.spatial-node-label {
  position: absolute;
  left: 50%;
  bottom: 145px;
  display: grid;
  gap: 4px;
  min-width: 180px;
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 2px 15px rgba(0, 0, 0, .9);
}

.spatial-node-label small {
  color: rgba(198, 239, 246, .7);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.spatial-node-label strong {
  font-size: clamp(.95rem, 1.25vw, 1.25rem);
  font-weight: 680;
  line-height: 1.18;
}

.spatial-node:not([data-active="true"]) .spatial-node-label { opacity: 0; }

.spatial-caption {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 18px;
  padding: 21px 25px 13px;
  border-top: 1px solid rgba(197, 226, 232, .15);
}

.spatial-caption > button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(216, 243, 247, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: #f3f8f9;
  font-size: 1.18rem;
}

.spatial-caption > button:hover:not(:disabled) { background: rgba(214, 244, 250, .17); }
.spatial-caption > button:disabled { opacity: .25; cursor: default; }
.spatial-caption-copy { min-width: 0; text-align: center; }
.spatial-caption-copy small { color: #a5cdd5; font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.spatial-caption-copy h3 { margin: 5px 0; font-size: 1.25rem; font-weight: 620; }
.spatial-caption-copy p { margin: 0; color: #afc0c5; font-size: .76rem; }
.spatial-caption-copy span { display: inline-block; margin-top: 7px; color: #c8e7eb; font-size: .69rem; }

.spatial-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 25px 20px;
}

.spatial-action button {
  padding: 8px 11px;
  border: 1px solid rgba(205, 241, 247, .5);
  border-radius: 5px;
  background: rgba(234, 251, 253, .08);
  color: #f1fcfd;
  font-size: .72rem;
  font-weight: 750;
}

.spatial-action button[hidden] { display: none; }
.spatial-action small { color: #829aa1; font-size: .67rem; }
.spatial-journey.is-traveling .spatial-track { opacity: .35; transition: opacity .35s ease; }

@media (max-width: 780px) {
  .spatial-testbar { align-items: flex-start; flex-direction: column; }
  .spatial-stage { height: 390px; }
  .spatial-action { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-node,
  .spatial-track { transition: none; }
}