/* Conceptual diagram, deliberately separate from the product's interface. */
.workspace-section .section-heading {
  display: flex;
  align-items: end;
  gap: 48px;
}
.workspace-section #workspace-title {
  font-size: 56px;
  max-width: 700px;
}
.workspace-section .section-heading > p {
  max-width: 340px;
  margin: 0;
  font-size: 18px;
}
.lifecycle-diagram {
  position: relative;
  margin: 0;
  padding: 24px 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(
      ellipse closest-side at 26% 45%,
      rgba(var(--glow), 0.07),
      transparent 100%
    ),
    radial-gradient(
      ellipse closest-side at 75% 45%,
      rgba(88, 219, 161, 0.045),
      transparent 100%
    );
  overflow: visible;
}
.diagram-scope {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto 32px;
  font-size: 13px;
  color: var(--muted);
}
.scope-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scope-label::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid var(--focus);
  transform: rotate(45deg);
}
.diagram-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto;
  padding: 12px 20px;
  background: #1b2736;
  border: 1px solid rgba(var(--glow), 0.4);
  border-radius: 10px;
  box-shadow: 0 0 32px rgba(var(--glow), 0.07);
  color: #dbeaff;
  font-size: 16px;
}
.diagram-project svg {
  width: 24px;
  height: 24px;
  fill: var(--accent);
}
.diagram-routes {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: 100px;
  margin-inline: auto;
  overflow: visible;
}
.diagram-routes path {
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.4s var(--ease);
}
.project-stem {
  stroke: #70849d;
}
.workspace-route {
  stroke: rgba(var(--glow), 0.6);
}
.deployment-route {
  stroke: rgba(136, 219, 177, 0.55);
}
.junction {
  fill: #acbdd1;
}
.diagram-packet {
  filter: drop-shadow(0 0 5px currentColor);
}
.workspace-packet {
  fill: var(--accent);
  color: var(--accent);
  animation: diagram-flow 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.app-packet {
  fill: var(--success);
  color: var(--success);
  animation: diagram-flow 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.packet-follow {
  animation-delay: -2.5s;
}
.diagram-runtimes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1040px;
  margin-inline: auto;
}
.diagram-runtime {
  --node-color: var(--focus);
  --node-face: #122137;
  --node-soft: #1a3453;
  min-width: 0;
  text-align: center;
  position: relative;
}
.deployment-node {
  --node-color: #96d9b7;
  --node-face: #172b24;
  --node-soft: #244536;
}
.runtime-art {
  position: relative;
  width: 180px;
  height: 160px;
  margin: 0 auto 20px;
}
.runtime-art > svg {
  position: relative;
  width: 180px;
  height: 160px;
  stroke: var(--node-color);
  stroke-width: 1.2;
  animation: runtime-lift 6s var(--ease) infinite alternate;
}
.deployment-node .runtime-art > svg {
  animation-delay: -3s;
}
.runtime-halo {
  position: absolute;
  pointer-events: none;
  left: -36px;
  right: -36px;
  bottom: -16px;
  height: 100px;
  background: radial-gradient(
    ellipse closest-side,
    rgba(var(--glow), 0.24),
    transparent 100%
  );
  animation: halo-breathe 5s var(--ease) infinite alternate;
}
.app-halo {
  background: radial-gradient(
    ellipse closest-side,
    rgba(120, 219, 163, 0.2),
    transparent 100%
  );
  animation-delay: -2s;
}
.art-floor {
  fill: var(--node-face);
  stroke: var(--node-color);
  opacity: 0.28;
}
.cube-top {
  fill: var(--node-soft);
}
.cube-left {
  fill: var(--node-face);
}
.cube-right {
  fill: var(--node-soft);
}
.workspace-glyph {
  stroke: var(--focus);
  stroke-width: 2;
}
.cube-detail {
  opacity: 0.35;
}
.workspace-power {
  opacity: 0;
  stroke: #b5c3d3;
  stroke-width: 1.8;
}
.app-stack {
  fill: var(--node-face);
}
.stack-top {
  fill: var(--node-soft);
}
.app-stack-edge {
  opacity: 0.5;
}
.app-symbol {
  stroke-width: 1.5;
}
.app-light {
  fill: var(--success);
  stroke: none;
}
.diagram-node-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.diagram-node-title h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.diagram-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--focus);
  font-size: 13px;
}
.diagram-status::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.app-status {
  color: var(--success);
}
.diagram-runtime > p {
  margin-top: 12px;
  color: #d0d9e5;
  font-size: 16px;
}
.diagram-node-note {
  display: block;
  min-height: 42px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  padding-inline: 12px;
}
.diagram-interaction {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 760px;
  min-height: 94px;
  margin: 24px auto 0;
  padding: 20px 24px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #17202b;
}
.diagram-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 174px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--accent-ink);
  background: var(--accent);
  font-size: 14px;
  font-weight: 500;
}
.diagram-toggle[hidden] {
  display: none;
}
.diagram-toggle svg {
  width: 17px;
  height: 17px;
}
.diagram-toggle:disabled {
  opacity: 0.7;
  cursor: progress;
}
.diagram-toggle:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--glow), 0.16);
}
.diagram-feedback {
  min-width: 0;
}
.diagram-feedback strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}
.diagram-feedback p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}
.diagram-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1040px;
  margin: 32px auto 0;
  color: var(--muted);
  font-size: 12px;
}
.diagram-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}
.diagram-legend i {
  width: 16px;
  height: 2px;
  background: var(--accent);
}
.diagram-legend .legend-app {
  margin-left: 12px;
  background: var(--success);
}
.diagram-noscript {
  max-width: 600px;
  margin: 16px auto 0;
  font-size: 14px;
  color: var(--muted);
}
.workspace-is-stopped .workspace-route {
  stroke: #394655;
}
.workspace-is-stopped .workspace-packet {
  visibility: hidden;
  animation-play-state: paused;
}
.workspace-is-stopped .workspace-node {
  --node-color: #687b91;
  --node-soft: #25303e;
  --node-face: #171f29;
}
.workspace-is-stopped .workspace-node .runtime-art > svg {
  animation-play-state: paused;
}
.workspace-is-stopped .workspace-halo {
  animation: none;
  opacity: 0.15;
}
.workspace-is-stopped .workspace-glyph {
  opacity: 0;
}
.workspace-is-stopped .workspace-power {
  opacity: 1;
}
.workspace-is-stopped #workspace-state {
  color: var(--muted);
}
.workspace-is-stopped .deployment-node .diagram-node-note {
  color: var(--success);
}
.workspace-is-stopped .diagram-interaction {
  border-color: rgba(136, 219, 177, 0.2);
}
.is-changing .workspace-node {
  opacity: 0.6;
}
.diagram-runtime {
  transition: opacity 0.3s var(--ease);
}
[data-motion="paused"] :is(.diagram-packet, .runtime-art > svg, .runtime-halo),
.tab-hidden :is(.diagram-packet, .runtime-art > svg, .runtime-halo) {
  animation-play-state: paused;
}
/* SVG animateMotion owns geometry; CSS only fades the particles at the ends. */
@keyframes diagram-flow {
  0%,
  100% {
    opacity: 0;
  }
  12%,
  88% {
    opacity: 1;
  }
}
@keyframes runtime-lift {
  to {
    transform: translateY(-5px);
  }
}
@keyframes halo-breathe {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
.workspace-details {
  gap: 24px;
}
.capability {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(var(--glow), 0.045), transparent 80%), #171d25;
  transition:
    transform 0.5s var(--ease),
    border-color 0.3s var(--ease);
}
.capability::before {
  content: "";
  position: absolute;
  inset: -40px 40% -40px -40px;
  background: radial-gradient(
    ellipse closest-side,
    rgba(var(--glow), 0.09),
    transparent 100%
  );
  pointer-events: none;
}
.capability:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--glow), 0.45);
}
.capability-visual {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--focus);
}
.capability-visual > svg {
  width: 48px;
  height: 48px;
}
.capability-check {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--success);
  background: #1a382a;
  border: 1px solid rgba(136, 219, 177, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(136, 219, 177, 0.12);
}
.capability-check svg {
  width: 14px;
  height: 14px;
}
.capability h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.capability p {
  font-size: 16px;
  line-height: 1.65;
  margin-top: 12px;
  color: var(--muted);
}
.capability-orbit {
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: capability-orbit 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
[data-motion="paused"] .capability-orbit,
.tab-hidden .capability-orbit {
  animation-play-state: paused;
}
@keyframes capability-orbit {
  from {
    transform: rotate(0deg) translateX(29px);
  }
  to {
    transform: rotate(360deg) translateX(29px);
  }
}
@media (max-width: 1100px) {
  .capability {
    padding: 24px;
    gap: 16px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .capability-visual {
    width: 48px;
    height: 56px;
  }
  .capability-visual > svg {
    width: 40px;
    height: 40px;
  }
  .capability h3 {
    font-size: 20px;
  }
}
@media (max-width: 760px) {
  .capability {
    padding: 20px;
  }
  .capability p {
    font-size: 15px;
  }
}
@media (max-width: 1100px) {
  .workspace-section #workspace-title {
    font-size: 44px;
  }
  .workspace-section .section-heading > p {
    max-width: 280px;
  }
  .lifecycle-diagram {
    padding-inline: 0;
  }
  .diagram-node-title h3 {
    font-size: 22px;
  }
}
@media (max-width: 760px) {
  .workspace-section .section-heading {
    display: block;
  }
  .workspace-section #workspace-title {
    font-size: 36px;
  }
  .workspace-section .section-heading > p {
    max-width: 100%;
    margin-top: 16px;
    font-size: 16px;
  }
  .diagram-scope {
    margin-bottom: 24px;
  }
  .diagram-caption {
    font-size: 12px;
    max-width: 150px;
    text-align: right;
  }
  .diagram-project {
    font-size: 14px;
    padding: 10px 14px;
  }
  .diagram-project svg {
    width: 20px;
    height: 20px;
  }
  .diagram-routes {
    height: 64px;
  }
  .runtime-art {
    width: 126px;
    height: 112px;
    margin-bottom: 12px;
  }
  .runtime-art > svg {
    width: 126px;
    height: 112px;
  }
  .runtime-halo {
    left: -12px;
    right: -12px;
    height: 60px;
  }
  .diagram-node-title {
    flex-direction: column;
    gap: 8px;
  }
  .diagram-node-title h3 {
    font-size: 20px;
  }
  .diagram-runtime > p {
    font-size: 13px;
    margin-top: 12px;
    padding-inline: 8px;
  }
  .diagram-node-note {
    min-height: 54px;
    font-size: 12px;
    padding-inline: 6px;
  }
  .diagram-interaction {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    margin-top: 16px;
  }
  .diagram-toggle {
    width: 100%;
    min-height: 46px;
  }
  .diagram-feedback {
    text-align: center;
    min-height: 66px;
  }
  .diagram-feedback strong {
    font-size: 15px;
  }
  .diagram-feedback p {
    font-size: 13px;
  }
  .diagram-footer {
    margin-top: 24px;
    flex-direction: column;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lifecycle-diagram *,
  .lifecycle-diagram *::before,
  .lifecycle-diagram *::after {
    animation: none !important;
    transition: none !important;
  }
  .diagram-packet {
    display: none;
  }
}