.spatial-testbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 5px;
}

.spatial-testbar > button,
.spatial-mode-group {
  min-height: 61px;
  border: 1px solid var(--portal-line-strong);
  border-radius: 11px;
  background: var(--portal-panel-strong);
}

.spatial-testbar > button {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  font-size: .79rem;
}

.spatial-testbar > button small,
.spatial-mode-group > span {
  color: var(--portal-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.spatial-mode-group {
  display: grid;
  grid-template-columns: 1fr 1.48fr;
  align-items: center;
  gap: 4px;
  padding: 8px;
}

.spatial-mode-group > span { grid-column: 1 / -1; padding-left: 7px; }

.spatial-mode-group button {
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--portal-text);
  font-size: .72rem;
  white-space: nowrap;
}

.spatial-mode-group button[aria-pressed="true"] {
  border-color: var(--portal-line-strong);
  background: var(--portal-panel);
}

.spatial-testbar button[aria-pressed="true"] { border-color: var(--portal-accent); }
.spatial-mode-note { margin: 0 0 13px; color: var(--portal-muted); font-size: .69rem; }
.spatial-stage:focus-visible { outline: 2px solid #cdebf1; outline-offset: -3px; }
.spatial-stage-signature {
  position: absolute;
  top: 22px;
  left: 23px;
  z-index: 15;
  display: grid;
  gap: 3px;
  color: rgba(224, 244, 247, .88);
  pointer-events: none;
}

.spatial-stage-signature span { font-size: .7rem; font-weight: 850; letter-spacing: .18em; }
.spatial-stage-signature small { color: rgba(183, 217, 226, .58); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; }
.spatial-wheel-hint {
  position: absolute;
  right: 23px;
  bottom: 16px;
  z-index: 15;
  color: rgba(214, 232, 235, .62);
  font-size: .63rem;
  letter-spacing: .045em;
  pointer-events: none;
}

.spatial-zoom {
  position: absolute;
  left: 23px;
  bottom: 16px;
  z-index: 25;
  padding: 8px 11px;
  border: 1px solid rgba(218, 244, 247, .42);
  border-radius: 5px;
  background: rgba(13, 28, 34, .67);
  color: #e7f4f5;
  font-size: .67rem;
  font-weight: 750;
  backdrop-filter: blur(8px);
}
.spatial-zoom[hidden] { display: none; }
.spatial-zoom:hover { background: rgba(189, 232, 238, .17); }

.spatial-insight { display: none; }
.spatial-node { cursor: pointer; }
.spatial-node[data-active="true"] { filter: drop-shadow(0 0 12px rgba(204, 243, 249, .36)); }

/* Variant 2: a complete, oblique overview, with one highlighted position. */
.spatial-journey[data-mode="aerial"] .spatial-stage {
  height: clamp(520px, 50vw, 690px);
  background:
    radial-gradient(ellipse 65% 85% at 62% 51%, rgba(179, 219, 221, .14), transparent 75%),
    repeating-radial-gradient(ellipse 30% 30% at 53% 42%, rgba(210, 238, 239, .048) 0 1px, transparent 2px 27px),
    linear-gradient(145deg, #0c1b22, #172d32 55%, #07141b);
}

.spatial-journey[data-mode="aerial"] .spatial-floor {
  inset: 5%;
  width: 90%;
  height: 90%;
  transform: rotateX(21deg) rotateZ(-3deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(220, 246, 249, .065) 64px 65px),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(220, 246, 249, .065) 64px 65px);
  mask-image: radial-gradient(ellipse, #000 40%, transparent 75%);
}

.spatial-journey[data-mode="aerial"] .spatial-track path { stroke-width: 2; stroke: rgba(223, 246, 247, .68); }
.spatial-journey[data-mode="aerial"] .spatial-track path.is-optional { stroke: rgba(184, 229, 234, .38); stroke-dasharray: 5 7; }
.spatial-journey[data-mode="aerial"] .spatial-next-preview { display: none; }
.spatial-journey[data-mode="aerial"] .spatial-node { width: 144px; height: 96px; }
.spatial-journey[data-mode="aerial"] .spatial-disc { width: 48px; height: 48px; transform: rotateX(36deg); background: rgba(13, 28, 34, .9); }
.spatial-journey[data-mode="aerial"] .spatial-disc i { width: 7px; height: 7px; }
.spatial-journey[data-mode="aerial"] .spatial-node-label {
  bottom: -5px;
  min-width: 136px;
  max-width: 146px;
  gap: 2px;
  opacity: 1;
}

.spatial-journey[data-mode="aerial"] .spatial-node-label small { font-size: .53rem; }
.spatial-journey[data-mode="aerial"] .spatial-node-label strong { font-size: .72rem; line-height: 1.1; }
.spatial-journey[data-mode="aerial"] .spatial-node:not([data-active="true"]) .spatial-node-label { opacity: .66; }
.spatial-journey[data-mode="aerial"] .spatial-node[data-active="true"] .spatial-disc { background: #d5f3f4; border-color: #fff; box-shadow: 0 0 0 9px rgba(198, 238, 244, .12), 0 0 34px rgba(220, 250, 255, .6); }
.spatial-journey[data-mode="aerial"] .spatial-node[data-active="true"] .spatial-disc i { background: #14222a; }

/* Variant 3: top-down project layers. A new step moves the next floorplate to the top. */
.spatial-journey[data-mode="strata"] .spatial-stage {
  height: clamp(450px, 42vw, 570px);
  background:
    radial-gradient(circle at 50% 51%, rgba(177, 228, 237, .14), transparent 47%),
    linear-gradient(145deg, #101d25, #071018);
}

.spatial-journey[data-mode="strata"] .spatial-floor {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background:
    linear-gradient(90deg, rgba(197, 232, 237, .07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(197, 232, 237, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000 20%, transparent 79%);
}

.spatial-journey[data-mode="strata"] .spatial-horizon {
  inset: 16% 26%;
  border: 1px solid rgba(181, 231, 238, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(167, 219, 224, .025), 0 0 0 82px rgba(167, 219, 224, .025);
}

.spatial-journey[data-mode="strata"] .spatial-node {
  width: min(33vw, 360px);
  height: 176px;
  border: 1px solid rgba(193, 237, 243, .48);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(35, 60, 69, .87), rgba(11, 26, 34, .96));
  box-shadow: 19px 22px 0 rgba(5, 11, 15, .38), 0 22px 50px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
}

.spatial-journey[data-mode="strata"] .spatial-node[data-active="true"] { border-color: #d9f2f5; box-shadow: 18px 22px 0 rgba(10, 26, 30, .6), 0 0 45px rgba(174, 229, 236, .27); }
.spatial-journey[data-mode="strata"] .spatial-node::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 39%;
  height: 74px;
  border: 1px solid rgba(193, 232, 238, .28);
  background:
    linear-gradient(90deg, transparent 43%, rgba(193, 232, 238, .26) 43% 44%, transparent 44%),
    linear-gradient(0deg, transparent 53%, rgba(193, 232, 238, .26) 53% 55%, transparent 55%),
    linear-gradient(90deg, transparent 76%, rgba(193, 232, 238, .26) 76% 78%, transparent 78%);
  opacity: .78;
  pointer-events: none;
}
.spatial-journey[data-mode="strata"] .spatial-disc { position: absolute; left: 21px; top: 21px; width: 38px; height: 38px; transform: none; background: rgba(158, 222, 234, .1); }
.spatial-journey[data-mode="strata"] .spatial-disc i { width: 7px; height: 7px; }
.spatial-journey[data-mode="strata"] .spatial-node-label { left: 23px; bottom: 20px; min-width: 0; width: calc(100% - 46px); transform: none; text-align: left; opacity: 1; }
.spatial-journey[data-mode="strata"] .spatial-node-label strong { font-size: 1.23rem; }
.spatial-journey[data-mode="strata"] .spatial-node:not([data-active="true"]) .spatial-node-label { opacity: .75; }
.spatial-journey[data-mode="strata"] .spatial-next-preview { top: auto; bottom: 25px; right: 25px; }

/* Variant 4: a navigable spatial header and its content occupy one surface. */
.spatial-journey[data-mode="immersive"] .spatial-stage {
  height: clamp(470px, 43vw, 600px);
  background:
    radial-gradient(ellipse 55% 72% at 35% 55%, rgba(163, 213, 226, .16), transparent 70%),
    linear-gradient(135deg, #071016, #1a2d32 70%, #0d191e);
}

.spatial-journey[data-mode="immersive"] .spatial-stage::before {
  content: "";
  position: absolute;
  left: 1%;
  top: 12%;
  width: 62%;
  height: 80%;
  border: 1px solid rgba(219, 244, 245, .22);
  border-radius: 50%;
  transform: rotate(-22deg) rotateX(62deg);
  box-shadow: 0 0 0 35px rgba(196, 230, 235, .025), 0 0 0 95px rgba(196, 230, 235, .018), inset 0 0 44px rgba(169, 227, 236, .07);
  pointer-events: none;
  animation: spatial-orbit 22s ease-in-out infinite alternate;
}

@keyframes spatial-orbit {
  from { transform: rotate(-22deg) rotateX(62deg) scale(1); }
  to { transform: rotate(-15deg) rotateX(66deg) scale(1.035); }
}

.spatial-journey[data-mode="immersive"] .spatial-floor { top: 59%; transform: rotateX(72deg) rotateZ(-18deg); opacity: .47; }
.spatial-journey[data-mode="immersive"] .spatial-node { width: 150px; height: 150px; }
.spatial-journey[data-mode="immersive"] .spatial-disc { width: 106px; height: 106px; transform: rotateX(54deg); }
.spatial-journey[data-mode="immersive"] .spatial-node-label { bottom: 122px; min-width: 135px; max-width: 150px; opacity: 1; }
.spatial-journey[data-mode="immersive"] .spatial-node-label strong { font-size: .84rem; }
.spatial-journey[data-mode="immersive"] .spatial-node:not([data-active="true"]) .spatial-node-label { opacity: .45; }
.spatial-journey[data-mode="immersive"] .spatial-next-preview { display: none; }
.spatial-journey[data-mode="immersive"] .spatial-insight {
  position: absolute;
  top: 18%;
  right: 4%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(37%, 330px);
  min-height: 62%;
  padding: clamp(19px, 3vw, 36px);
  border: 1px solid rgba(214, 239, 242, .32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(231, 247, 249, .14), rgba(15, 32, 39, .4));
  box-shadow: 0 25px 60px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .15);
  backdrop-filter: blur(17px);
}

.spatial-insight small { color: #b5d9df; font-size: .61rem; font-weight: 800; letter-spacing: .13em; }
.spatial-insight h3 { margin: auto 0 9px; color: #f2fbfb; font-size: clamp(1.35rem, 2vw, 2.2rem); font-weight: 570; line-height: 1.06; }
.spatial-insight p { margin: 0; color: #c3d5d8; font-size: .8rem; line-height: 1.45; }
.spatial-insight > span { margin: 16px 0 26px; color: #b4d6de; font-size: .66rem; }
.spatial-insight button { align-self: flex-start; padding: 8px 10px; border: 1px solid rgba(215, 243, 247, .5); border-radius: 4px; background: rgba(232, 248, 250, .09); color: #fff; font-size: .73rem; font-weight: 730; }
.spatial-insight button[hidden] { display: none; }
.spatial-journey[data-mode="immersive"] .spatial-action { display: none; }

@media (max-width: 950px) {
  .spatial-testbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spatial-journey[data-mode="aerial"] .spatial-node { width: 108px; }
  .spatial-journey[data-mode="aerial"] .spatial-node-label { min-width: 100px; max-width: 108px; }
  .spatial-journey[data-mode="aerial"] .spatial-node-label strong { font-size: .62rem; }
}

@media (max-width: 650px) {
  .spatial-testbar { gap: 5px; }
  .spatial-testbar > button { font-size: .69rem; }
  .spatial-journey[data-mode="aerial"] .spatial-stage { height: 550px; }
  .spatial-journey[data-mode="aerial"] .spatial-node { width: 72px; }
  .spatial-journey[data-mode="aerial"] .spatial-disc { width: 33px; height: 33px; }
  .spatial-journey[data-mode="aerial"] .spatial-node-label { min-width: 71px; max-width: 72px; }
  .spatial-journey[data-mode="aerial"] .spatial-node-label small { display: none; }
  .spatial-journey[data-mode="aerial"] .spatial-node-label strong { font-size: .51rem; }
  .spatial-journey[data-mode="strata"] .spatial-node { width: 240px; }
  .spatial-journey[data-mode="immersive"] .spatial-insight { top: 12%; right: 4%; width: 52%; min-height: 72%; padding: 15px; }
  .spatial-journey[data-mode="immersive"] .spatial-insight h3 { font-size: 1.13rem; }
  .spatial-journey[data-mode="immersive"] .spatial-insight p { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-journey .spatial-node { transition: none; }
  .spatial-journey[data-mode="immersive"] .spatial-stage::before { animation: none; }
}