/* KINGQUOC Soul Journey Map — UI v1.0 */

.journey-atlas {
  --journey-gold: #f2cf8d;
  --journey-white: #eef7ff;
  --journey-soul: #c8f3ff;
  --journey-cyan: #75dcff;
  --journey-silver: #c7d2df;
  --journey-void: #f4f7fb;
  --journey-arena: #b692ff;
  --journey-earth: #5fc7ff;
  --journey-organic: #68e1bc;
  --journey-choice: #f0d57d;
  --journey-crimson: #ff617f;
  --journey-violet: #b58aff;
  --journey-surface: rgba(6, 14, 25, .95);
  background:
    radial-gradient(circle at 50% 8%, rgba(240, 209, 144, .09), transparent 29rem),
    radial-gradient(circle at 17% 34%, rgba(57, 170, 226, .1), transparent 39rem),
    radial-gradient(circle at 82% 68%, rgba(151, 57, 126, .1), transparent 42rem),
    linear-gradient(180deg, #040810, #06101c 44%, #050812 100%);
}

.journey-star-field .nebula-a {
  background: #197ba8;
  opacity: .18;
}

.journey-star-field .nebula-b {
  background: #8d2d69;
  opacity: .15;
}

.journey-grid {
  opacity: .1;
  background-size: 112px 112px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 78%);
}

.journey-header {
  border-bottom-color: rgba(116, 218, 255, .18);
  background: rgba(4, 10, 18, .9);
}

.journey-header .primary-nav a[aria-current="page"] {
  color: #dcf7ff;
}

.journey-header .primary-nav a[aria-current="page"]::after {
  width: 100%;
}

.journey-atlas .brand small,
.journey-atlas .primary-nav a,
.journey-atlas .sound-toggle {
  font-size: 13px;
}

.journey-atlas .kicker {
  font-size: clamp(13px, .9vw, 16px);
}

.journey-atlas .fiction-notice,
.journey-atlas .coordinate-bar,
.journey-atlas .coordinate-label,
.journey-atlas .coordinate-code,
.journey-atlas .coordinate-bar li {
  font-size: 13px;
}

.journey-hero {
  min-height: 890px;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .76fr);
}

.journey-hero::before {
  top: 5%;
  left: 1%;
  width: 76%;
  border-color: rgba(117, 220, 255, .08);
  background:
    radial-gradient(circle at 44% 44%, rgba(245, 215, 155, .11), transparent 7%),
    radial-gradient(circle at 44% 44%, transparent 0 22%, rgba(117, 220, 255, .055) 22.2% 22.5%, transparent 22.7%),
    radial-gradient(circle at 44% 44%, transparent 0 37%, rgba(181, 138, 255, .045) 37.2% 37.45%, transparent 37.7%);
  filter: drop-shadow(0 0 90px rgba(94, 196, 238, .08));
}

.journey-hero .kicker,
.journey-section .kicker,
.journey-route-primer .kicker,
.visual-layer .kicker,
.journey-laws .kicker,
.journey-return .kicker {
  color: #8edfff;
}

.journey-hero h1 span {
  color: #f3d59c;
  text-shadow: 0 0 54px rgba(242, 207, 141, .13);
}

.journey-actions .button-primary,
.journey-return .button-primary {
  border-color: #d9eff7;
  background: #d9eff7;
  color: #08121c;
}

.journey-actions .button-primary:hover,
.journey-return .button-primary:hover {
  background: #ffffff;
}

.journey-hero-orbit {
  position: absolute;
  z-index: 0;
  top: 82px;
  right: 33%;
  width: min(37vw, 640px);
  aspect-ratio: 1;
  pointer-events: none;
}

.journey-hero-orbit i {
  position: absolute;
  border: 1px solid rgba(117, 220, 255, .12);
  border-radius: 50%;
  animation: journeyOrbit 22s linear infinite;
}

.journey-hero-orbit i:nth-of-type(1) {
  inset: 2%;
  border-color: rgba(240, 210, 149, .17);
}

.journey-hero-orbit i:nth-of-type(2) {
  inset: 13%;
  animation-direction: reverse;
  animation-duration: 17s;
}

.journey-hero-orbit i:nth-of-type(3) {
  inset: 25%;
  border-style: dashed;
  border-color: rgba(181, 138, 255, .18);
  animation-duration: 13s;
}

.journey-hero-orbit i:nth-of-type(4) {
  inset: 37%;
  border-color: rgba(237, 248, 255, .28);
  box-shadow: 0 0 48px rgba(117, 220, 255, .08);
  animation-direction: reverse;
  animation-duration: 9s;
}

.journey-hero-orbit i::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dff7ff;
  box-shadow: 0 0 14px rgba(117, 220, 255, .75);
}

.journey-orb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 244, 213, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 33%, #fff, rgba(238, 220, 175, .52) 15%, rgba(101, 209, 248, .2) 39%, transparent 72%);
  box-shadow:
    0 0 25px rgba(255, 239, 198, .36),
    0 0 75px rgba(102, 210, 250, .2);
  transform: translate(-50%, -50%);
  animation: soulBreathe 4.2s ease-in-out infinite;
}

@keyframes journeyOrbit {
  to { transform: rotate(360deg); }
}

@keyframes soulBreathe {
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow:
      0 0 35px rgba(255, 239, 198, .46),
      0 0 95px rgba(102, 210, 250, .27);
  }
}

.journey-sequence {
  position: relative;
  z-index: 3;
  padding: 17px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(148, 203, 229, .18);
  border-radius: 24px;
  background:
    linear-gradient(150deg, rgba(66, 146, 185, .07), transparent 38%),
    rgba(5, 13, 23, .84);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
  backdrop-filter: blur(20px);
}

.journey-sequence-item {
  min-height: 102px;
  padding: 16px 19px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(153, 194, 220, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
}

.journey-sequence-item > span {
  color: #89a4b7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.journey-sequence-item strong {
  margin-top: 6px;
  color: #eff8ff;
  font-family: var(--serif);
  font-size: clamp(22px, 1.45vw, 28px);
  font-weight: 400;
  line-height: 1.15;
}

.journey-sequence-item small {
  margin-top: 7px;
  color: #9eafbf;
  font-size: 14px;
  line-height: 1.45;
}

.journey-sequence-item.is-origin {
  border-color: rgba(242, 207, 141, .27);
  background: linear-gradient(90deg, rgba(242, 207, 141, .07), transparent);
}

.journey-sequence-item.is-projection {
  border-color: rgba(117, 220, 255, .23);
  background: linear-gradient(90deg, rgba(117, 220, 255, .06), transparent);
}

.journey-sequence-item.is-embodiment {
  border-color: rgba(95, 199, 255, .23);
  background: linear-gradient(90deg, rgba(44, 144, 205, .07), transparent);
}

.journey-sequence-item.is-transition {
  border-color: rgba(181, 138, 255, .24);
  background:
    linear-gradient(90deg, rgba(103, 219, 188, .055), transparent 42%),
    linear-gradient(270deg, rgba(255, 97, 127, .06), transparent 42%);
}

.journey-sequence-item.is-integration {
  border-color: rgba(103, 225, 188, .25);
  background: linear-gradient(90deg, rgba(103, 225, 188, .065), transparent);
}

.journey-sequence-line {
  width: 1px;
  height: 14px;
  margin: -4px auto;
  background: linear-gradient(#75dcff, rgba(117, 220, 255, .18));
}

.journey-sequence-line.is-fork {
  width: 46%;
  background:
    linear-gradient(90deg, #68e1bc, rgba(238, 247, 255, .65) 50%, #ff617f);
}

.journey-stats dt {
  color: #bcefff;
}

.journey-stats dd {
  font-size: 13px;
}

.journey-fiction-notice {
  border-color: rgba(117, 220, 255, .18);
}

.journey-coordinate-bar {
  border-color: rgba(117, 220, 255, .18);
}

.journey-coordinate-bar a {
  color: inherit;
  text-decoration: none;
}

.journey-coordinate-bar a:hover {
  color: #d9f6ff;
}

.journey-heading > p {
  font-size: 18px;
}

.journey-guardrail {
  border-color: rgba(117, 220, 255, .22);
  background:
    linear-gradient(90deg, rgba(117, 220, 255, .045), transparent 36%),
    rgba(6, 14, 25, .78);
}

.journey-guardrail .scope-symbol {
  border-color: rgba(242, 207, 141, .36);
  color: #f4d89f;
}

.journey-guardrail b,
.journey-guardrail a,
.journey-controls .control-label,
.journey-controls .system-status {
  font-size: 12px;
}

.journey-guardrail p {
  font-size: 16px;
}

.journey-controls {
  grid-template-columns: minmax(0, 1fr);
}

.journey-controls .trace-group {
  grid-row: 2;
}

.journey-controls .system-status {
  grid-row: 3;
}

.journey-controls .lens-button,
.journey-controls .system-control {
  min-height: 46px;
  font-size: 12px;
}

.journey-controls .lens-button:hover,
.journey-controls .lens-button:focus-visible,
.journey-controls .system-control:hover,
.journey-controls .system-control:focus-visible {
  border-color: rgba(117, 220, 255, .55);
  color: #e6f9ff;
}

.journey-controls .lens-button.is-active,
.journey-controls .system-control.is-active {
  border-color: rgba(117, 220, 255, .72);
  background: rgba(58, 159, 205, .15);
  color: #e7faff;
}

.journey-workspace {
  grid-template-columns: minmax(820px, 1.62fr) minmax(440px, .74fr);
}

.journey-viewport {
  min-height: 1730px;
  scrollbar-color: rgba(102, 211, 247, .55) rgba(4, 9, 17, .5);
}

.journey-stage {
  height: 1700px;
  background:
    radial-gradient(circle at 50% 8%, rgba(242, 207, 141, .13), transparent 15%),
    radial-gradient(circle at 50% 33%, rgba(117, 220, 255, .085), transparent 26%),
    radial-gradient(circle at 50% 61%, rgba(73, 169, 222, .09), transparent 22%),
    radial-gradient(circle at 22% 88%, rgba(104, 225, 188, .09), transparent 20%),
    radial-gradient(circle at 80% 88%, rgba(227, 63, 102, .1), transparent 22%),
    linear-gradient(90deg, transparent 49.92%, rgba(226, 240, 248, .095) 50%, transparent 50.08%),
    rgba(4, 10, 18, .94);
}

.journey-stage::after {
  inset: 48px 6% 54px;
  border-color: rgba(117, 220, 255, .11);
  border-radius: 46% 46% 15% 15% / 10% 10% 6% 6%;
  box-shadow:
    inset 0 0 140px rgba(57, 163, 211, .035),
    0 0 90px rgba(57, 163, 211, .025);
}

.journey-stage .stage-coordinate,
.journey-viewport .map-zoom-controls button,
.journey-viewport .map-zoom-controls span {
  font-size: 12px;
}

.journey-band {
  left: 60px;
  right: 20px;
}

.journey-band span {
  font-size: 12px;
}

.band-origin {
  top: 34px;
  height: 372px;
  border-color: rgba(242, 207, 141, .17);
  background: linear-gradient(90deg, transparent, rgba(242, 207, 141, .032), transparent);
}

.band-projection {
  top: 406px;
  height: 390px;
  border-color: rgba(117, 220, 255, .16);
  background: linear-gradient(90deg, transparent, rgba(117, 220, 255, .035), transparent);
}

.band-embodiment {
  top: 796px;
  height: 398px;
  border-color: rgba(95, 199, 255, .17);
  background: linear-gradient(90deg, transparent, rgba(51, 145, 208, .045), transparent);
}

.band-transition {
  top: 1194px;
  height: 116px;
  border-color: rgba(181, 138, 255, .2);
  background: linear-gradient(90deg, transparent, rgba(181, 138, 255, .055), transparent);
}

.band-return {
  top: 1310px;
  right: auto;
  width: 305px;
  height: 352px;
  border-color: rgba(104, 225, 188, .18);
  background: linear-gradient(90deg, rgba(104, 225, 188, .055), transparent);
}

.band-sovereign {
  top: 1310px;
  left: 380px;
  right: auto;
  width: 240px;
  height: 352px;
  border-color: rgba(240, 213, 125, .18);
  background: linear-gradient(90deg, transparent, rgba(240, 213, 125, .045), transparent);
}

.band-godtrix {
  top: 1310px;
  left: 635px;
  height: 352px;
  border-color: rgba(255, 97, 127, .19);
  background: linear-gradient(270deg, rgba(255, 97, 127, .055), transparent);
}

.journey-sector {
  top: 1365px;
  font-size: 12px;
}

.sector-organic {
  left: 33px;
  color: rgba(104, 225, 188, .7);
}

.sector-sovereign {
  left: calc(50% - 15px);
  color: rgba(240, 213, 125, .65);
}

.sector-synthetic {
  right: 26px;
  color: rgba(255, 97, 127, .68);
}

.journey-stage .system-relation[data-family="descent"] {
  stroke: rgba(117, 220, 255, .54);
}

.journey-stage .system-relation[data-family="threshold"] {
  stroke: rgba(204, 218, 231, .48);
  stroke-dasharray: 4 5;
}

.journey-stage .system-relation[data-family="organic"] {
  stroke: rgba(104, 225, 188, .55);
  stroke-dasharray: 9 4;
}

.journey-stage .system-relation[data-family="synthetic"] {
  stroke: rgba(255, 97, 127, .53);
  stroke-dasharray: 4 5;
}

.journey-stage .system-relation[data-family="sovereign"] {
  stroke: rgba(240, 213, 125, .58);
  stroke-dasharray: 11 4 2 4;
}

.journey-stage .system-relation.is-trace {
  stroke: #f7fcff;
  filter: drop-shadow(0 0 9px rgba(117, 220, 255, .92));
}

.journey-stage .system-node {
  width: 212px;
  min-height: 80px;
  padding: 14px 15px 14px 54px;
}

.journey-stage .system-node[data-tone="origin"] {
  --node: var(--journey-gold);
  width: 248px;
}

.journey-stage .system-node[data-tone="first-light"] {
  --node: #ddedff;
}

.journey-stage .system-node[data-tone="soul"] {
  --node: var(--journey-soul);
}

.journey-stage .system-node[data-tone="higher"] {
  --node: var(--journey-silver);
}

.journey-stage .system-node[data-tone="passage"] {
  --node: #8de3ff;
}

.journey-stage .system-node[data-tone="void"] {
  --node: var(--journey-void);
  width: 240px;
  background:
    linear-gradient(105deg, rgba(238, 246, 252, .09), rgba(2, 6, 11, .98) 68%),
    rgba(2, 6, 11, .98);
}

.journey-stage .system-node[data-tone="arena"] {
  --node: var(--journey-arena);
}

.journey-stage .system-node[data-tone="earth"] {
  --node: var(--journey-earth);
}

.journey-stage .system-node[data-tone="human"] {
  --node: var(--journey-white);
  width: 232px;
}

.journey-stage .system-node[data-tone="choice"] {
  --node: var(--journey-choice);
}

.journey-stage .system-node[data-tone="transition"] {
  --node: #c8a7ff;
  width: 240px;
}

.journey-stage .system-node[data-tone="organic"] {
  --node: var(--journey-organic);
}

.journey-stage .system-node[data-tone="synthetic"] {
  --node: var(--journey-crimson);
}

.journey-stage .system-node[data-tone="false-light"] {
  --node: #ffbb8b;
}

.journey-stage .system-node[data-tone="sovereign"] {
  --node: var(--journey-choice);
}

.journey-stage .system-node strong {
  font-size: clamp(17px, 1.08vw, 19px);
}

.journey-stage .system-node small,
.journey-stage .system-node-code {
  font-size: 12px;
}

.journey-stage .system-node-symbol {
  width: 35px;
  height: 35px;
  font-size: 18px;
}

.journey-legend {
  top: 107px;
  width: 240px;
}

.journey-legend h3,
.journey-legend li,
.journey-legend p {
  font-size: 12px;
}

.relation-swatch.descent {
  background: var(--journey-cyan);
}

.relation-swatch.threshold {
  background: repeating-linear-gradient(90deg, #d7e2eb 0 4px, transparent 4px 8px);
}

.relation-swatch.organic {
  background: repeating-linear-gradient(90deg, var(--journey-organic) 0 8px, transparent 8px 11px);
}

.relation-swatch.synthetic {
  background: repeating-linear-gradient(90deg, var(--journey-crimson) 0 4px, transparent 4px 8px);
}

.relation-swatch.sovereign {
  background: repeating-linear-gradient(90deg, var(--journey-choice) 0 10px, transparent 10px 13px);
}

.journey-dossier {
  --dossier-accent: var(--journey-gold);
}

.journey-dossier[data-tone="origin"] { --dossier-accent: var(--journey-gold); }
.journey-dossier[data-tone="first-light"] { --dossier-accent: #ddedff; }
.journey-dossier[data-tone="soul"] { --dossier-accent: var(--journey-soul); }
.journey-dossier[data-tone="higher"] { --dossier-accent: var(--journey-silver); }
.journey-dossier[data-tone="passage"] { --dossier-accent: #8de3ff; }
.journey-dossier[data-tone="void"] { --dossier-accent: var(--journey-void); }
.journey-dossier[data-tone="arena"] { --dossier-accent: var(--journey-arena); }
.journey-dossier[data-tone="earth"] { --dossier-accent: var(--journey-earth); }
.journey-dossier[data-tone="human"] { --dossier-accent: var(--journey-white); }
.journey-dossier[data-tone="choice"] { --dossier-accent: var(--journey-choice); }
.journey-dossier[data-tone="transition"] { --dossier-accent: #c8a7ff; }
.journey-dossier[data-tone="organic"] { --dossier-accent: var(--journey-organic); }
.journey-dossier[data-tone="synthetic"] { --dossier-accent: var(--journey-crimson); }
.journey-dossier[data-tone="false-light"] { --dossier-accent: #ffbb8b; }
.journey-dossier[data-tone="sovereign"] { --dossier-accent: var(--journey-choice); }

.journey-dossier .system-dossier-idline > span,
.journey-dossier .system-dossier-volume,
.journey-dossier .system-dossier-subtitle,
.journey-dossier .system-dossier-fact dt,
.journey-dossier .system-location h3,
.journey-dossier .system-relationships h3,
.journey-dossier .system-guardrail b,
.journey-dossier .system-relation-direction,
.journey-dossier .dossier-parent-link a {
  font-size: 12px;
}

.journey-dossier .system-dossier-role {
  font-size: 18px;
}

.journey-dossier .system-dossier-fact dd,
.journey-dossier .system-guardrail,
.journey-dossier .system-relation-target {
  font-size: 16px;
}

.journey-dossier .system-location li {
  font-size: 13px;
}

.journey-dossier .system-dossier-subtitle {
  letter-spacing: .065em;
}

.journey-dossier .system-dossier-facts {
  grid-template-columns: 1fr 1fr;
}

.journey-dossier .system-dossier-fact {
  padding: 16px;
}

.journey-visual-slot {
  position: relative;
  min-height: 178px;
  margin: 25px 0 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--dossier-accent) 26%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--dossier-accent) 13%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 45%),
    rgba(3, 9, 16, .78);
}

.journey-visual-slot::before,
.journey-visual-slot::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  border: 1px solid color-mix(in srgb, var(--dossier-accent) 27%, transparent);
  border-radius: 50%;
}

.journey-visual-slot::before {
  animation: journeyOrbit 18s linear infinite;
}

.journey-visual-slot::after {
  width: 70px;
  height: 70px;
  border-style: dashed;
  animation: journeyOrbit 12s linear infinite reverse;
}

.journey-visual-slot span {
  position: relative;
  z-index: 2;
  padding: 10px 13px;
  border: 1px solid rgba(191, 218, 235, .16);
  border-radius: 8px;
  background: rgba(4, 11, 19, .86);
  color: #a9bdcc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.journey-reference-links {
  margin-top: 27px;
}

.journey-reference-links h3 {
  margin: 0 0 12px;
  color: #8797aa;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.journey-reference-links ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.journey-reference-links a {
  min-height: 40px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(157, 193, 221, .16);
  border-radius: 8px;
  color: #c6d4df;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.journey-reference-links a:hover,
.journey-reference-links a:focus-visible {
  border-color: color-mix(in srgb, var(--dossier-accent) 55%, transparent);
  color: white;
}

.journey-godtrix-link {
  margin-top: 10px;
}

.journey-godtrix-link a {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 97, 127, .35);
  border-radius: 9px;
  background: rgba(167, 36, 69, .07);
  color: #f5dbe2;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.journey-godtrix-link a:hover,
.journey-godtrix-link a:focus-visible {
  border-color: rgba(255, 97, 127, .65);
  background: rgba(167, 36, 69, .12);
}

.journey-route-grid article {
  min-height: 280px;
  background:
    linear-gradient(135deg, rgba(73, 173, 216, .05), transparent 42%),
    rgba(6, 14, 25, .72);
}

.journey-route-grid article:last-child {
  min-height: 240px;
}

.journey-route-grid article > span,
.journey-route-grid button {
  color: #9fe7ff;
  font-size: 12px;
}

.journey-route-grid h3 {
  font-size: 29px;
}

.journey-route-grid p {
  font-size: 17px;
}

.visual-layer {
  width: var(--synthetic-page);
  margin: 0 auto;
  padding: 92px 0 120px;
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 76px;
  border-top: 1px solid rgba(157, 193, 221, .13);
}

.visual-layer-copy h2 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(48px, 4.2vw, 72px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .96;
}

.visual-layer-copy > p:last-child {
  max-width: 530px;
  margin: 25px 0 0;
  color: #aebdcc;
  font-size: 18px;
  line-height: 1.7;
}

.visual-apertures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.visual-apertures article {
  min-width: 0;
  padding: 14px 14px 22px;
  border: 1px solid rgba(157, 193, 221, .17);
  border-radius: 17px;
  background: rgba(6, 14, 25, .7);
}

.aperture {
  position: relative;
  aspect-ratio: 1.15;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(157, 193, 221, .15);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 50%, rgba(117, 220, 255, .13), transparent 17%),
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(117, 220, 255, .08) 32.3% 32.8%, transparent 33.1%),
    #050c16;
}

.aperture::before,
.aperture::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(117, 220, 255, .18);
  border-radius: 50%;
  animation: journeyOrbit 20s linear infinite;
}

.aperture::after {
  inset: 30%;
  border-style: dashed;
  animation-duration: 13s;
  animation-direction: reverse;
}

.aperture span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e4f8ff;
  box-shadow: 0 0 30px rgba(117, 220, 255, .75);
}

.aperture-origin {
  background:
    radial-gradient(circle at 50% 50%, rgba(242, 207, 141, .22), transparent 17%),
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(242, 207, 141, .11) 32.3% 32.8%, transparent 33.1%),
    #050c16;
}

.aperture-origin::before,
.aperture-origin::after {
  border-color: rgba(242, 207, 141, .22);
}

.aperture-route {
  background:
    linear-gradient(155deg, transparent 38%, rgba(117, 220, 255, .17) 49%, transparent 51%),
    radial-gradient(circle at 50% 50%, rgba(117, 220, 255, .14), transparent 24%),
    #050c16;
}

.aperture-dossier {
  background:
    linear-gradient(rgba(136, 174, 201, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136, 174, 201, .06) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(181, 138, 255, .13), transparent 27%),
    #050c16;
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.visual-apertures article > span {
  display: block;
  margin-top: 17px;
  color: #82d8f8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.visual-apertures h3 {
  margin: 11px 0 0;
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
}

.visual-apertures p {
  margin: 11px 0 0;
  color: #9dacbd;
  font-size: 16px;
  line-height: 1.6;
}

.journey-laws li > span {
  color: #85dffa;
}

.journey-laws p {
  font-size: 17px;
}

.journey-return {
  border-color: rgba(117, 220, 255, .22);
  background:
    radial-gradient(circle at 8% 15%, rgba(117, 220, 255, .09), transparent 30%),
    linear-gradient(120deg, rgba(15, 47, 64, .43), rgba(6, 14, 25, .8));
}

.journey-return > p {
  font-size: 18px;
}

.journey-footer {
  border-top-color: rgba(117, 220, 255, .16);
}

.journey-footer p,
.journey-footer a {
  font-size: 14px;
}

@media (max-width: 1380px) {
  .journey-hero {
    grid-template-columns: minmax(0, 1fr) minmax(410px, .78fr);
  }

  .journey-workspace {
    grid-template-columns: minmax(740px, 1.4fr) minmax(410px, .76fr);
  }

  .journey-dossier .system-dossier-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .journey-hero {
    grid-template-columns: 1fr;
  }

  .journey-hero-orbit {
    top: 50px;
    right: 3%;
    width: min(58vw, 620px);
  }

  .journey-sequence {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }

  .journey-sequence-line {
    display: none;
  }

  .journey-sequence-item {
    min-height: 190px;
  }

  .journey-workspace,
  .visual-layer {
    grid-template-columns: 1fr;
  }

  .journey-dossier .system-dossier-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .journey-hero {
    gap: 42px;
  }

  .journey-hero-orbit {
    top: 95px;
    right: -22%;
    width: 95vw;
    opacity: .48;
  }

  .journey-sequence {
    grid-template-columns: 1fr;
    padding: 11px;
  }

  .journey-sequence-item {
    min-height: 122px;
  }

  .journey-sequence-item > span {
    font-size: 12px;
  }

  .journey-sequence-item small {
    font-size: 15px;
  }

  .journey-stats dd {
    font-size: 12px;
  }

  .journey-heading > p,
  .journey-guardrail p {
    font-size: 17px;
  }

  .journey-traces {
    grid-template-columns: 1fr;
  }

  .journey-traces .system-control:last-child {
    grid-column: auto;
  }

  .journey-viewport {
    min-height: 0;
  }

  .journey-stage {
    height: auto;
    padding-top: 76px;
    background:
      linear-gradient(180deg, rgba(242, 207, 141, .055), rgba(77, 176, 219, .055) 55%, rgba(206, 61, 100, .06)),
      rgba(4, 10, 18, .94);
  }

  .journey-stage .system-node,
  .journey-stage .system-node[data-tone] {
    width: 100%;
    min-height: 94px;
    padding: 16px 16px 16px 61px;
  }

  .journey-stage .system-node strong {
    font-size: 21px;
  }

  .journey-stage .system-node small,
  .journey-stage .system-node-code {
    font-size: 12px;
  }

  .journey-legend {
    width: auto;
  }

  .journey-legend h3,
  .journey-legend li,
  .journey-legend p {
    font-size: 13px;
  }

  .journey-dossier .system-dossier-role,
  .journey-dossier .system-dossier-fact dd,
  .journey-dossier .system-guardrail,
  .journey-dossier .system-relation-target {
    font-size: 17px;
  }

  .journey-dossier .system-dossier-facts {
    grid-template-columns: 1fr;
  }

  .journey-route-grid article,
  .journey-route-grid article:last-child {
    min-height: 245px;
  }

  .visual-layer {
    padding: 76px 0 90px;
    gap: 38px;
  }

  .visual-layer-copy h2 {
    font-size: clamp(44px, 12vw, 62px);
  }

  .visual-layer-copy > p:last-child {
    font-size: 17px;
  }

  .visual-apertures {
    grid-template-columns: 1fr;
  }

  .aperture {
    aspect-ratio: 1.65;
  }

  .visual-apertures h3 {
    font-size: 28px;
  }

  .visual-apertures p,
  .journey-laws p,
  .journey-return > p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-hero-orbit i,
  .journey-orb,
  .journey-visual-slot::before,
  .journey-visual-slot::after,
  .aperture::before,
  .aperture::after {
    animation: none;
  }
}