:root {
  --cream: #F5F1E8;
  --ink: #121212;
  --blue: #1C2A39;
  --brown: #6A4E42;
  --glass: rgba(28, 42, 57, 0.08);
  --shadow: rgba(18, 18, 18, 0.12);
}

.platform-journey {
  --pj-progress: 0;
  position: relative;
  min-height: auto;
  padding: 2rem 0 3rem;
  background:
    radial-gradient(circle at 18% 16%, rgba(28, 42, 57, 0.05), transparent 46%),
    radial-gradient(circle at 82% 74%, rgba(106, 78, 66, 0.08), transparent 55%),
    var(--cream);
  overflow: visible;
}

.platform-journey.pj-enhanced {
  min-height: 330vh;
  padding: 0;
  overflow: clip;
}

.platform-journey.pj-enhanced::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(28, 42, 57, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 42, 57, 0.04) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  mix-blend-mode: multiply;
  opacity: 0.34;
}

.platform-journey-noise {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.08;
  background-image: radial-gradient(rgba(28, 42, 57, 0.26) 0.6px, transparent 0.6px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.platform-journey-stage {
  position: relative;
  z-index: 2;
  width: min(1240px, 94vw);
  height: auto;
  margin-inline: auto;
  display: grid;
  align-items: stretch;
}

.platform-journey.pj-enhanced .platform-journey-stage {
  position: sticky;
  top: 74px;
  height: calc(100vh - 86px);
  align-items: center;
}

.platform-lines {
  position: absolute;
  inset: 10% 0;
  pointer-events: none;
  opacity: 0.36;
  transition: opacity 320ms ease;
}

.platform-lines .line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(28, 42, 57, 0.36), transparent);
  transform-origin: left center;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 3px rgba(65, 101, 137, 0.22));
}

.platform-lines .l1 { top: 20%; left: 3%; width: 45%; }
.platform-lines .l2 { top: 34%; right: 4%; width: 42%; }
.platform-lines .l3 { top: 63%; left: 9%; width: 40%; }
.platform-lines .l4 { top: 76%; right: 8%; width: 34%; }

.pj-worlds {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  z-index: 2;
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-worlds {
  height: 100%;
}

.pj-build-indicator {
  position: absolute;
  right: 0.95rem;
  bottom: 0.95rem;
  z-index: 7;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0.6;
  padding: 0.28rem 0.46rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  background: color-mix(in srgb, var(--cream) 84%, #fff 16%);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pj-build-indicator:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.pj-world {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transform: none;
  filter: saturate(1);
  transition: opacity 220ms cubic-bezier(0.2, 0.9, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
  border-top: 1px solid rgba(28, 42, 57, 0.1);
  padding-top: clamp(0.9rem, 2.2vw, 1.2rem);
  will-change: opacity, transform;
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-world {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px) scale(0.978);
  filter: saturate(0.84) blur(0.22px);
  border-top: none;
  padding-top: 0;
}

.pj-world:first-child {
  border-top: none;
  padding-top: 0;
}

.pj-world.is-revealed {
  opacity: 0.74;
  transform: translateY(8px) scale(0.994);
  filter: saturate(0.98);
}

.pj-world.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(1);
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-world.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
  transform: translateY(0) scale(1);
  filter: saturate(1);
}

.pj-copy,
.pj-preview {
  opacity: 1;
  transform: none;
  transition: opacity 210ms cubic-bezier(0.2, 0.9, 0.2, 1), transform 210ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-copy,
.platform-journey.pj-enhanced.pj-cinematic-ready .pj-preview {
  opacity: 0;
  transform: translateY(20px);
}

.pj-world.is-revealed .pj-copy,
.pj-world.is-revealed .pj-preview {
  opacity: 0.84;
  transform: translateY(4px);
}

.pj-world.is-active .pj-copy,
.pj-world.is-active .pj-preview {
  opacity: 1;
  transform: translateY(0);
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-world.is-active .pj-copy,
.platform-journey.pj-enhanced.pj-cinematic-ready .pj-world.is-active .pj-preview {
  opacity: 1;
  transform: translateY(0);
}

.pj-world .app-window {
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.9, 0.2, 1), border-color 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.pj-world.is-active .app-window {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(12, 31, 54, 0.22);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--blue) 66%);
}

.pj-copy {
  max-width: 520px;
  transform: none;
  opacity: 1;
  will-change: transform, opacity;
}

.pj-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: rgba(18, 18, 18, 0.62);
}

.pj-title {
  margin: 0.5rem 0 0;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.06;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color: var(--blue);
}

.pj-subtitle {
  margin: 0.74rem 0 0;
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  color: rgba(18, 18, 18, 0.75);
  max-width: 48ch;
}

.pj-bullets {
  margin: 0.95rem 0 0;
  padding-left: 1rem;
  color: rgba(18, 18, 18, 0.76);
  display: grid;
  gap: 0.4rem;
  font-size: 0.95rem;
}

.pj-cta {
  margin-top: 1.22rem;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--blue) 80%, var(--brown) 20%);
  color: var(--blue);
  background: color-mix(in srgb, var(--cream) 92%, #fff 8%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow) 60%, transparent);
  transition: border-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.pj-cta:hover,
.pj-cta:focus-visible {
  transform: translateY(-1px);
  color: var(--brown);
  border-color: var(--brown);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shadow) 76%, transparent);
  outline: none;
}

.pj-preview {
  transform: none;
  opacity: 1;
  will-change: transform, opacity;
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-worlds {
  height: 100%;
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-world {
  inset: 0;
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-world.is-active {
  z-index: 3;
}

.platform-journey.pj-enhanced.pj-cinematic-ready .pj-copy {
  transform: none;
  opacity: 1;
}

.platform-journey.pj-enhanced .pj-preview {
  transform: translateY(calc((var(--pj-progress) - 0.5) * 14px));
}

.app-window {
  width: min(760px, 100%);
  margin-left: auto;
  border-radius: 20px;
  border: 1px solid rgba(28, 42, 57, 0.18);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.22));
  box-shadow: 0 18px 34px rgba(18, 18, 18, 0.14);
  padding: 1rem;
  color: var(--blue);
}

.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: var(--glass);
}

.app-head {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(28, 42, 57, 0.78);
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(28, 42, 57, 0.16);
  padding-bottom: 0.5rem;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.panel-card,
.shift-tile,
.perf-badge,
.astra-mission,
.astra-stats span {
  border: 1px solid rgba(28, 42, 57, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
  padding: 0.65rem 0.68rem;
  font-size: 0.84rem;
  color: var(--blue);
}

.panel-card {
  font: inherit;
}

.pj-branch-chip {
  cursor: pointer;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 260ms ease;
}

.pj-branch-chip:hover,
.pj-branch-chip:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brown) 52%, var(--blue) 48%);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--shadow) 56%, transparent);
  outline: none;
}

.kpi-strip {
  margin-top: 0.68rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kpi-strip span {
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: rgba(28, 42, 57, 0.78);
}

.pj-guidance-window {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
}

.pj-guidance-window::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 55%;
  background: linear-gradient(120deg, transparent 8%, color-mix(in srgb, var(--accent) 16%, transparent) 44%, transparent 72%);
  opacity: 0.5;
  transform: translate3d(-14%, -8%, 0);
  animation: pjGuidanceSweep 13s linear infinite;
  pointer-events: none;
}

.pj-guidance-window::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -36%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 34%, transparent), transparent 72%);
  opacity: 0.48;
  pointer-events: none;
  animation: pjGuidancePulse 6.6s ease-in-out infinite;
}

@keyframes pjGuidanceSweep {
  0% { transform: translate3d(-14%, -10%, 0) rotate(0deg); }
  50% { transform: translate3d(12%, 2%, 0) rotate(4deg); }
  100% { transform: translate3d(-14%, -10%, 0) rotate(0deg); }
}

@keyframes pjGuidancePulse {
  0%, 100% { opacity: 0.32; transform: scale(0.96); }
  50% { opacity: 0.58; transform: scale(1.03); }
}

.pj-guidance-intro,
.pj-guidance-tabs,
.pj-guidance-panel,
.pj-guidance-metrics {
  position: relative;
  z-index: 1;
}

.pj-guidance-intro {
  margin: -0.08rem 0 0.62rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(28, 42, 57, 0.82);
}

.pj-guidance-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.pj-guidance-tab {
  min-width: 0;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(28, 42, 57, 0.18);
  background: color-mix(in srgb, #fff 86%, var(--cream) 14%);
  color: color-mix(in srgb, var(--blue) 78%, #000 22%);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: normal;
  line-height: 1.18;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.pj-guidance-tab:hover,
.pj-guidance-tab:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brown) 52%, var(--blue) 48%);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--shadow) 54%, transparent);
  outline: none;
}

.pj-guidance-tab.is-active {
  background: color-mix(in srgb, #fff 92%, var(--cream) 8%);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--blue) 48%);
  box-shadow: 0 12px 22px color-mix(in srgb, var(--shadow) 60%, transparent);
}

.pj-guidance-panel {
  margin-top: 0.66rem;
  border-radius: 14px;
  border: 1px solid rgba(28, 42, 57, 0.16);
  background: color-mix(in srgb, #fff 84%, var(--cream) 16%);
  padding: 0.76rem 0.84rem 0.84rem;
  transition: opacity 190ms ease, transform 190ms ease;
}

.pj-guidance-panel.is-updating {
  opacity: 0.68;
  transform: translateY(2px);
}

.pj-guidance-step {
  margin: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(28, 42, 57, 0.65);
}

.pj-guidance-title {
  margin: 0.36rem 0 0;
  font-size: 1.22rem;
  color: var(--blue);
}

.pj-guidance-copy {
  min-width: 0;
  margin: 0.44rem 0 0;
  color: rgba(28, 42, 57, 0.82);
  line-height: 1.46;
  overflow-wrap: anywhere;
}

.pj-guidance-list {
  min-width: 0;
  margin: 0.58rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.34rem;
  color: rgba(28, 42, 57, 0.85);
  font-size: 0.84rem;
}

.pj-guidance-list li {
  overflow-wrap: anywhere;
}

.pj-guidance-link {
  margin-top: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.42rem 0.88rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 66%, var(--brown) 34%);
  text-decoration: none;
  color: var(--blue);
  background: color-mix(in srgb, #fff 88%, var(--cream) 12%);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.pj-guidance-link:hover,
.pj-guidance-link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--brown);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow) 58%, transparent);
  outline: none;
}

.pj-guidance-metrics {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.44rem;
}

.pj-guidance-metric {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 0.34rem;
  border-radius: 10px;
  border: 1px solid rgba(28, 42, 57, 0.16);
  background: color-mix(in srgb, #fff 82%, var(--cream) 18%);
  padding: 0.46rem 0.54rem;
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  color: rgba(28, 42, 57, 0.8);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pj-guidance-metric i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 86%, #fff 14%), color-mix(in srgb, var(--accent) 72%, var(--gold) 28%));
  width: var(--metric-value, 62%);
  box-shadow: 0 0 0 1px rgba(28, 42, 57, 0.08);
}

.pj-preview-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 260ms ease;
}

.pj-preview-shell::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 62%;
  background: linear-gradient(120deg, transparent 15%, color-mix(in srgb, var(--accent) 14%, transparent) 48%, transparent 78%);
  opacity: 0.34;
  transform: translate3d(-10%, 0, 0);
  animation: pjPreviewSweep 12.4s linear infinite;
  pointer-events: none;
}

.pj-preview-shell::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -34%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 72%);
  opacity: 0.36;
  pointer-events: none;
  animation: pjPreviewGlow 6.2s ease-in-out infinite;
}

.pj-preview-shell:hover,
.pj-preview-shell:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--blue) 54%);
  box-shadow: 0 22px 34px rgba(10, 26, 44, 0.24);
}

.pj-preview-shell-operis::before {
  background: linear-gradient(130deg, transparent 12%, color-mix(in srgb, var(--blue) 16%, transparent) 45%, transparent 76%);
}

.pj-preview-shell-astra::before {
  background: linear-gradient(128deg, transparent 12%, color-mix(in srgb, var(--brown) 18%, transparent) 46%, transparent 78%);
}

@keyframes pjPreviewSweep {
  0% { transform: translate3d(-14%, -2%, 0) rotate(0deg); }
  50% { transform: translate3d(12%, 4%, 0) rotate(3.5deg); }
  100% { transform: translate3d(-14%, -2%, 0) rotate(0deg); }
}

@keyframes pjPreviewGlow {
  0%, 100% { opacity: 0.28; transform: scale(0.96); }
  50% { opacity: 0.46; transform: scale(1.03); }
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.56rem;
}

.perf-badge {
  background: linear-gradient(140deg, rgba(28, 42, 57, 0.9), rgba(58, 74, 91, 0.96));
  color: #f2f0ea;
  font-weight: 600;
}

.assist-ribbon {
  margin-top: 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: rgba(28, 42, 57, 0.82);
  border-top: 1px dashed rgba(28, 42, 57, 0.25);
  padding-top: 0.58rem;
}

.operis-mini-window {
  border-radius: 14px;
  padding: 0.76rem;
  border-color: color-mix(in srgb, var(--blue) 16%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--cream) 12%);
  box-shadow: 0 14px 30px rgba(10, 26, 44, 0.2);
  aspect-ratio: 1.72 / 1;
}

.operis-mini-window .app-head {
  margin-bottom: 0.6rem;
  padding-bottom: 0.46rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: rgba(28, 42, 57, 0.76);
}

.operis-mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.operis-mini-kpi {
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #fff 82%, var(--cream) 18%);
  padding: 0.46rem 0.56rem;
}

.operis-mini-kpi span {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(28, 42, 57, 0.74);
}

.operis-mini-kpi strong {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--blue);
}

.operis-mini-grid {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: 1fr 0.84fr;
  gap: 0.58rem;
  min-height: 168px;
}

.operis-mini-zones {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  height: 100%;
}

.operis-mini-zoneline {
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 80%, var(--cream) 20%);
  padding: 0.5rem 0.6rem;
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}

.operis-mini-zoneline.active,
.operis-mini-zoneline:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--gold) 48%);
  background: color-mix(in srgb, #fff 90%, var(--cream) 10%);
  transform: translateY(-1px);
}

.pj-preview-shell-operis .operis-mini-zoneline {
  position: relative;
  overflow: hidden;
}

.pj-preview-shell-operis .operis-mini-zoneline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 34%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 66%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 260ms ease;
  pointer-events: none;
}

.pj-preview-shell-operis .operis-mini-zoneline:hover::after,
.pj-preview-shell-operis .operis-mini-zoneline.active::after {
  transform: translateX(120%);
  opacity: 0.55;
}

.operis-mini-zonehead {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(28, 42, 57, 0.9);
}

.operis-mini-stations {
  margin-top: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.operis-mini-stations span {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  padding: 0.12rem 0.36rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(28, 42, 57, 0.78);
  background: color-mix(in srgb, #fff 84%, var(--cream) 16%);
}

.operis-mini-trend {
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 80%, var(--cream) 20%);
  padding: 0.5rem 0.6rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.operis-mini-trendhead {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 42, 57, 0.74);
}

.operis-mini-trend svg {
  margin-top: 0.26rem;
  width: 100%;
  height: 100%;
  min-height: 106px;
}

.operis-mini-trend line {
  stroke: rgba(28, 42, 57, 0.11);
  stroke-width: 1;
}

.operis-mini-trend-path {
  fill: none;
  stroke-width: 2.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: miniTrendBreathe 4.2s ease-in-out infinite;
}

.operis-mini-trend-path.glow {
  stroke-width: 5.8;
  opacity: 0.27;
  filter: url(#miniTrendGlow);
}

.operis-mini-trend-path.p1 {
  stroke: url(#miniTrendPrimary);
}

.operis-mini-trend-path.p2 {
  stroke: url(#miniTrendSecond);
  opacity: 0.88;
  animation-duration: 4.9s;
}

.operis-mini-trend-path.p3 {
  stroke: url(#miniTrendThird);
  opacity: 0.7;
  animation-duration: 5.6s;
}

@keyframes miniTrendBreathe {
  0%,
  100% {
    opacity: 0.78;
    stroke-width: 2.8;
  }

  50% {
    opacity: 1;
    stroke-width: 3.15;
  }
}

.operis-mini-trend-dot {
  opacity: 0.95;
}

.operis-mini-trend-dot.p1 {
  fill: rgba(28, 42, 57, 0.95);
}

.operis-mini-trend-dot.p2 {
  fill: rgba(65, 101, 137, 0.88);
}

.operis-mini-trend-dot.p3 {
  fill: rgba(106, 78, 66, 0.82);
}

.operis-mini-legend {
  margin-top: 0.28rem;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.operis-mini-legend span {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  padding: 0.1rem 0.36rem;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: rgba(28, 42, 57, 0.78);
  background: color-mix(in srgb, #fff 84%, var(--cream) 16%);
}

.operis-mini-legend .l1 {
  border-color: rgba(28, 42, 57, 0.48);
}

.operis-mini-legend .l2 {
  border-color: rgba(65, 101, 137, 0.45);
}

.operis-mini-legend .l3 {
  border-color: rgba(106, 78, 66, 0.45);
}

.operis-mini-window .assist-ribbon {
  margin-top: 0.52rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(28, 42, 57, 0.76);
  border-top: 1px dashed rgba(28, 42, 57, 0.22);
  padding-top: 0.5rem;
}

.operis-mini-cta {
  margin-top: 0.48rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.38rem 0.82rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 64%, var(--brown) 36%);
  background: linear-gradient(140deg, color-mix(in srgb, #fff 88%, var(--cream) 12%), color-mix(in srgb, #fff 80%, var(--cream) 20%));
  color: var(--blue);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.operis-mini-cta:hover,
.operis-mini-cta:focus-visible {
  transform: translateY(-1px);
  border-color: var(--brown);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow) 58%, transparent);
  outline: none;
}

.operis-role-atlas {
  border-radius: 16px;
  padding: 0.82rem;
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}

.operis-role-intro {
  margin: -0.06rem 0 0.58rem;
  color: rgba(28, 42, 57, 0.8);
  font-size: 0.82rem;
  line-height: 1.42;
}

.operis-role-gateway {
  display: grid;
  gap: 0.48rem;
}

.operis-role-gate {
  display: grid;
  gap: 0.26rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  background: color-mix(in srgb, #fff 88%, var(--cream) 12%);
  text-decoration: none;
  color: inherit;
  padding: 0.58rem 0.66rem;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.operis-role-gate:hover,
.operis-role-gate:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--blue) 48%);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--shadow) 54%, transparent);
  background: color-mix(in srgb, #fff 93%, var(--cream) 7%);
  outline: none;
}

.operis-role-gate-kicker {
  margin: 0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(28, 42, 57, 0.62);
}

.operis-role-gate h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--blue);
}

.operis-role-gate p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(28, 42, 57, 0.78);
}

.operis-role-gate span {
  margin-top: 0.14rem;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--brown) 45%);
  padding: 0.16rem 0.46rem;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}

.operis-role-clusters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.44rem;
}

.operis-role-cluster {
  min-height: 38px;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, #fff 88%, var(--cream) 12%);
  color: rgba(28, 42, 57, 0.86);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  white-space: normal;
  line-height: 1.16;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.operis-role-cluster:hover,
.operis-role-cluster:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--blue) 48%);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow) 54%, transparent);
  outline: none;
}

.operis-role-cluster.is-active {
  border-color: color-mix(in srgb, var(--brown) 52%, var(--blue) 48%);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--shadow) 58%, transparent);
  background: color-mix(in srgb, #fff 93%, var(--cream) 7%);
}

.operis-role-stage {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.56rem;
  min-height: 196px;
}

.operis-role-spotlight,
.operis-role-orbit {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  background: color-mix(in srgb, #fff 84%, var(--cream) 16%);
  position: relative;
  overflow: hidden;
}

.operis-role-spotlight {
  padding: 0.66rem 0.72rem;
  display: grid;
  align-content: start;
  gap: 0.44rem;
}

.operis-role-step {
  margin: 0;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(28, 42, 57, 0.66);
}

.operis-role-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--blue);
}

.operis-role-copy {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.42;
  color: rgba(28, 42, 57, 0.82);
  overflow-wrap: anywhere;
}

.operis-role-orbit {
  padding: 0.58rem;
  isolation: isolate;
}

.operis-role-orbit::before {
  content: "";
  position: absolute;
  inset: -20% -8% auto;
  height: 54%;
  background: linear-gradient(118deg, transparent 18%, color-mix(in srgb, var(--accent) 16%, transparent) 48%, transparent 78%);
  opacity: 0.42;
  animation: operisOrbitSweep 11.2s linear infinite;
  pointer-events: none;
}

@keyframes operisOrbitSweep {
  0% { transform: translate3d(-16%, -6%, 0); }
  50% { transform: translate3d(12%, 4%, 0); }
  100% { transform: translate3d(-16%, -6%, 0); }
}

.operis-role-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, #fff 88%, var(--cream) 12%);
  color: rgba(28, 42, 57, 0.86);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.24rem 0.5rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(12, 26, 44, 0.1);
  animation: operisChipFloat 4.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.operis-role-chip.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--blue) 48%);
  box-shadow: 0 8px 16px rgba(12, 26, 44, 0.16);
  background: color-mix(in srgb, #fff 94%, var(--cream) 6%);
}

@keyframes operisChipFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}

.operis-role-foot {
  margin-top: 0.56rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.54rem;
}

.operis-role-count {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(28, 42, 57, 0.72);
}

.operis-role-shuffle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 62%, var(--brown) 38%);
  background: color-mix(in srgb, #fff 90%, var(--cream) 10%);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.78rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.operis-role-shuffle:hover,
.operis-role-shuffle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--brown);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow) 56%, transparent);
  outline: none;
}

.astra-map {
  margin-top: 0.6rem;
  height: 142px;
  border-radius: 12px;
  border: 1px solid rgba(28, 42, 57, 0.16);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.22));
  position: relative;
  overflow: hidden;
}

.astra-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(28, 42, 57, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 42, 57, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
}

.node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 70%, var(--brown) 30%);
  box-shadow: 0 0 0 5px rgba(28, 42, 57, 0.12);
  animation: pjNodePulse 3.6s ease-in-out infinite;
}

.n1 { top: 24%; left: 19%; }
.n2 { top: 38%; left: 62%; }
.n3 { top: 65%; left: 45%; }
.n4 { top: 72%; left: 78%; }
.n5 { top: 45%; left: 30%; }

.n2 { animation-delay: 0.4s; }
.n3 { animation-delay: 0.9s; }
.n4 { animation-delay: 1.2s; }
.n5 { animation-delay: 0.6s; }

@keyframes pjNodePulse {
  0%, 100% { transform: scale(0.94); box-shadow: 0 0 0 4px rgba(28, 42, 57, 0.1); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(28, 42, 57, 0.16); }
}

.astra-stats {
  margin-top: 0.64rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.platform-journey[data-world='operis'] {
  background:
    radial-gradient(circle at 24% 22%, rgba(28, 42, 57, 0.09), transparent 48%),
    radial-gradient(circle at 80% 74%, rgba(106, 78, 66, 0.10), transparent 56%),
    var(--cream);
}

.platform-journey[data-world='astra'] {
  background:
    radial-gradient(circle at 20% 18%, rgba(28, 42, 57, 0.12), transparent 52%),
    radial-gradient(circle at 78% 72%, rgba(106, 78, 66, 0.08), transparent 58%),
    var(--cream);
}

.platform-journey[data-world='astra'] .platform-lines {
  opacity: 0.2;
}

.platform-journey[data-world='astra'] .node {
  background: color-mix(in srgb, var(--blue) 58%, var(--brown) 42%);
}

.platform-journey.pj-fallback {
  min-height: auto;
  padding: 2rem 0;
}

.platform-journey.pj-fallback .platform-lines {
  display: none;
}

.platform-journey.pj-fallback .platform-journey-stage {
  height: auto;
}

.platform-journey.pj-fallback .pj-worlds {
  display: grid;
  gap: 1rem;
}

.platform-journey.pj-fallback .pj-world {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(28, 42, 57, 0.12);
  padding-top: 1rem;
}

.platform-journey.pj-fallback .pj-copy,
.platform-journey.pj-fallback .pj-preview {
  transform: none !important;
  opacity: 1 !important;
}

.pj-lane-overlay {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 440ms cubic-bezier(0.22, 1, 0.36, 1), visibility 440ms step-end;
  will-change: opacity;
}

.platform-journey[data-lane='operis'] .pj-lane-overlay,
.platform-journey[data-lane='astra'] .pj-lane-overlay {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 540ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s step-start;
}

.pj-lane-parallax {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(28, 42, 57, 0.08), transparent 48%),
    radial-gradient(circle at 78% 75%, rgba(106, 78, 66, 0.12), transparent 60%),
    var(--cream);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.01);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 880ms cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-journey[data-lane='operis'] .pj-lane-parallax {
  opacity: 0.98;
  transform: translate3d(10px, 0, 0) scale(1);
}

.platform-journey[data-lane='astra'] .pj-lane-parallax {
  opacity: 0.98;
  transform: translate3d(-10px, 0, 0) scale(1);
}

.pj-lane-track {
  position: absolute;
  inset: 0;
  width: 300vw;
  display: flex;
  transform: translate3d(-100vw, 0, 0);
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1), filter 280ms ease;
  will-change: transform, filter;
}

.platform-journey[data-lane='operis'] .pj-lane-track {
  transform: translate3d(0, 0, 0);
}

.platform-journey[data-lane='astra'] .pj-lane-track {
  transform: translate3d(-200vw, 0, 0);
}

.platform-journey.pj-lane-animating .pj-lane-track {
  filter: blur(0.55px);
}

.platform-journey.pj-lane-animating .pj-lane-shell {
  opacity: 0.98;
}

.pj-lane {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(1.2rem, 2.8vw, 2.8rem);
  box-sizing: border-box;
  contain: paint;
}

.pj-lane-center {
  background: transparent;
}

.pj-lane-shell {
  position: relative;
  width: min(1020px, 100%);
  min-height: min(76vh, 760px);
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.76), rgba(245, 241, 232, 0.62));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 28px 56px rgba(14, 20, 28, 0.2);
  padding: clamp(1.2rem, 3.2vw, 2.6rem);
  display: grid;
  align-content: start;
  gap: 0.9rem;
  color: var(--blue);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.pj-lane-title {
  margin-top: 0.2rem;
}

.pj-lane-shell-grid {
  margin-top: 0.4rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.pj-lane-tile {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  background: color-mix(in srgb, #fff 78%, var(--cream) 22%);
  padding: 0.84rem;
}

.pj-lane-tile h3 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pj-lane-tile p {
  margin: 0.48rem 0 0;
  color: rgba(18, 18, 18, 0.78);
  font-size: 0.94rem;
}

.pj-lane-back {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.4rem);
  left: clamp(1rem, 2.5vw, 1.4rem);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  background: color-mix(in srgb, #fff 80%, var(--cream) 20%);
  color: var(--blue);
  box-shadow: 0 10px 20px rgba(18, 18, 18, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.pj-lane-back:hover,
.pj-lane-back:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brown) 44%, var(--blue) 56%);
  box-shadow: 0 14px 22px rgba(18, 18, 18, 0.18);
  outline: none;
}

body.pj-lane-open {
  overflow-x: clip;
}

body.pj-lane-open .platform-journey-stage {
  transform: translate3d(0, 0, 0) scale(0.98);
  filter: saturate(0.92) blur(0.5px);
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1), filter 340ms ease;
}

body.pj-lane-open .platform-journey-noise {
  transform: translate3d(0, 0, 0) scale(1.02);
  opacity: 0.11;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

@media (max-width: 1024px) {
  .pj-world {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .pj-copy {
    max-width: none;
  }

  .app-window {
    margin-left: 0;
    border-radius: 18px;
  }

  .operis-mini-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .operis-mini-window {
    aspect-ratio: auto;
  }

  .pj-lane-shell-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .platform-journey {
    min-height: auto;
    padding: 1.4rem 0;
  }

  .platform-journey-stage {
    height: auto;
  }

  .platform-lines {
    display: none;
  }

  .pj-world {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin-bottom: 0.72rem;
    padding-top: 0.78rem;
    gap: 0.9rem;
  }

  .pj-title {
    font-size: clamp(1.92rem, 9.4vw, 2.5rem);
  }

  .pj-subtitle {
    font-size: 0.95rem;
    line-height: 1.48;
  }

  .pj-bullets {
    margin-top: 0.7rem;
    gap: 0.3rem;
    font-size: 0.9rem;
  }

  .pj-cta {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.9rem;
  }

  .app-window {
    border-radius: 16px;
    padding: 0.82rem;
  }

  .pj-guidance-intro {
    font-size: 0.82rem;
    margin-bottom: 0.52rem;
  }

  .pj-guidance-panel {
    padding: 0.68rem 0.72rem 0.74rem;
  }

  .pj-guidance-title {
    font-size: 1.08rem;
  }

  .pj-guidance-copy {
    font-size: 0.9rem;
  }

  .pj-guidance-list {
    font-size: 0.82rem;
    gap: 0.3rem;
  }

  .pj-guidance-link {
    width: 100%;
    min-height: 40px;
  }

  .pj-guidance-metric {
    font-size: 0.63rem;
    padding: 0.42rem 0.5rem;
  }

  .operis-mini-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operis-mini-kpi:last-child {
    grid-column: 1 / -1;
  }

  .operis-mini-cta {
    width: 100%;
    min-height: 40px;
  }

  .operis-role-gate {
    padding: 0.54rem 0.6rem;
  }

  .operis-role-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .operis-role-shuffle {
    width: 100%;
  }

  .astra-map {
    height: 126px;
  }

  .pj-copy,
  .pj-preview {
    opacity: 1;
    transform: none;
  }

  .pj-worlds {
    display: grid;
    gap: 1rem;
  }

  .pj-lane {
    padding: 0.8rem;
  }

  .pj-lane-shell {
    min-height: calc(100vh - 1.6rem);
    border-radius: 24px;
  }

  .panel-grid,
  .pj-guidance-metrics,
  .ops-grid,
  .astra-stats {
    grid-template-columns: 1fr;
  }

  .pj-guidance-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .pj-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .pj-guidance-step {
    font-size: 0.62rem;
  }

  .operis-mini-window .app-head,
  .pj-guidance-window .app-head {
    font-size: 0.76rem;
    letter-spacing: 0.09em;
  }

  .operis-role-gate h3 {
    font-size: 0.86rem;
  }

  .pj-guidance-tabs {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-lines {
    opacity: 0.14;
  }

  .pj-world,
  .pj-copy,
  .pj-preview {
    transition-duration: 80ms;
    transform: none;
  }

  .operis-mini-trend-path {
    animation: none;
  }

  .pj-guidance-window::before,
  .pj-guidance-window::after {
    animation: none;
  }

  .pj-preview-shell::before,
  .pj-preview-shell::after,
  .node,
  .operis-role-orbit::before,
  .operis-role-chip {
    animation: none;
  }

  .pj-lane-overlay,
  .pj-lane-track,
  .pj-lane-parallax,
  body.pj-lane-open .platform-journey-stage,
  body.pj-lane-open .platform-journey-noise {
    transition-duration: 40ms !important;
    animation: none !important;
    filter: none !important;
  }
}