.walkthrough-main {
  padding: 28px var(--page-gutter) 0;
}

.walkthrough-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.architecture-reference {
  padding: 24px 0;
  max-width: 760px;
}
.architecture-reference dt {
  margin-top: 20px;
  color: #84e6cc;
}
.architecture-reference dd {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

.walkthrough-scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 16px;
}
.walkthrough-scenes button {
  border: 0;
  background: none;
  padding: 4px 0;
  color: var(--text-secondary);
  font: 12px/1.5 var(--font-mono);
  cursor: pointer;
}
.walkthrough-scenes [aria-pressed="true"] {
  color: var(--bento-accent);
}

.walkthrough-stage:not([data-scene="2"]) [data-architecture-ui],
.walkthrough-stage:not([data-scene="1"]) [data-creation-ui],
.walkthrough-stage:not([data-scene="3"]) [data-lifecycle-ui],
.walkthrough-stage:not([data-scene="4"]) [data-connectivity-ui],
.walkthrough-stage:not([data-scene="5"]) [data-delegation-ui] {
  display: none !important;
}

.architecture-detail {
  left: 5%;
  top: 18%;
  width: 296px;
  min-height: 308px;
}
.architecture-detail .architecture-fact {
  margin-top: 16px;
  color: #84e6cc;
  font: 11px/1.6 var(--font-mono);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.architecture-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 16px;
}
.architecture-services[hidden] {
  display: none;
}
.architecture-services button {
  border: 1px solid var(--bento-line);
  background: #10152e;
  color: var(--text-secondary);
  font: 11px/1.5 var(--font-mono);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.architecture-services [aria-pressed="true"] {
  border-color: #84e6cc;
  color: #84e6cc;
}

.architecture-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.architecture-nodes > * {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 4px 6px;
  background: #0d102be8;
  color: #a7c8ff;
  font: 11px/1.5 var(--font-mono);
  white-space: nowrap;
}
.architecture-nodes button {
  pointer-events: auto;
  cursor: pointer;
}
.architecture-nodes b {
  font-weight: 400;
  color: #84e6cc;
  margin-right: 6px;
}
.architecture-nodes [aria-pressed="true"] {
  color: var(--bento-accent);
}
.architecture-nodes > [hidden] {
  display: none;
}
.architecture-nodes [data-architecture-node^="service-"] {
  font-size: 10px;
}
.architecture-nodes [data-architecture-node^="service-"] b {
  display: none;
}

/* Without WebGL, the same component controls and descriptions form a flat diagram. */
.walkthrough-stage:not(.is-ready)[data-scene="2"] .architecture-nodes {
  inset: 100px 32px auto auto;
  width: 45%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.walkthrough-stage:not(.is-ready)[data-scene="2"] .architecture-nodes > * {
  position: static;
  transform: none;
  border: 1px solid var(--bento-line);
  white-space: normal;
}
.walkthrough-stage[data-scene="2"] #walkthrough-error {
  top: auto;
  bottom: 78px;
}

@media (min-width: 601px) and (max-width: 1100px) {
  .walkthrough-stage[data-scene="5"],
  .walkthrough-stage[data-scene="2"],
  .walkthrough-stage[data-scene="3"],
  .walkthrough-stage[data-scene="4"] {
    height: 1040px;
  }
  .context-bubble.architecture-detail {
    left: 24px;
    top: auto;
    bottom: 90px;
    width: calc(100% - 48px);
    min-height: 230px;
  }
  .architecture-services {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .walkthrough-scenes {
    gap: 16px;
  }
  .walkthrough-scenes button {
    font-size: 11px;
    text-align: left;
  }

  .walkthrough-stage[data-scene="5"],
  .walkthrough-stage[data-scene="2"],
  .walkthrough-stage[data-scene="3"],
  .walkthrough-stage[data-scene="4"] {
    height: 980px;
  }
  .architecture-detail {
    top: auto;
    bottom: 124px;
    min-height: 280px;
  }

  .architecture-nodes button span {
    display: none;
  }
  .architecture-nodes button b {
    margin: 0;
  }
  .architecture-nodes [data-architecture-node^="service-"] b {
    display: inline;
  }
  .architecture-nodes [data-architecture-node="cloud"] {
    display: none;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="2"] .architecture-nodes {
    inset: 88px 16px auto;
    width: auto;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="2"] .architecture-nodes button span {
    display: inline;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="2"] .architecture-nodes button b {
    margin-right: 6px;
  }
  .walkthrough-stage[data-scene="2"] #walkthrough-error {
    bottom: auto;
    top: 40%;
  }
}

.walkthrough-stage {
  position: relative;
  height: max(620px, calc(100svh - 226px));
  border: 1px solid var(--bento-line);
  background: radial-gradient(ellipse at 60% 50%, #20365245, transparent 65%), #0d102b;
  overflow: hidden;
  isolation: isolate;
}

#walkthrough-canvas,
.walkthrough-leaders,
.walkthrough-labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.context-bubble {
  position: absolute;
  z-index: 2;
  width: 276px;
  padding: 20px;
  border: 1px solid #465371;
  border-top: 2px solid #84e6cc;
  background: #10152eee;
}

.context-user {
  left: 5%;
  top: 18%;
}
.context-beam {
  right: 5%;
  bottom: 17%;
  border-top-color: #a7c8ff;
}
.context-bubble .context-kicker {
  font: 10px/1.5 var(--font-mono);
  color: #84e6cc;
  margin: 0 0 8px;
}
.context-beam .context-kicker {
  color: #a7c8ff;
}
.context-bubble h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.context-bubble p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.walkthrough-command {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bento-line);
  font: 13px/1.5 var(--font-mono);
  min-height: 33px;
}
.walkthrough-command span {
  color: #84e6cc;
}
.walkthrough-command code {
  font: inherit;
  color: var(--text-primary);
}
.context-bubble .walkthrough-status {
  color: #a7c8ff;
  font: 11px/1.5 var(--font-mono);
  margin-top: 16px;
  min-height: 3em;
  white-space: pre-line;
}
.walkthrough-stage[data-phase="ready"] .walkthrough-status {
  color: #84e6cc;
}

.walkthrough-leaders,
.walkthrough-labels {
  pointer-events: none;
}

#walkthrough-role-label {
  color: var(--bento-accent);
}
.walkthrough-leaders {
  z-index: 1;
  display: none;
}
.walkthrough-leaders path {
  fill: none;
  stroke: #7283a6;
  stroke-width: 1;
  opacity: 0.65;
}
.walkthrough-labels span {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 11px/1.5 var(--font-mono);
  padding: 3px 6px;
  color: #a7c8ff;
  background: #0d102bd9;
  white-space: nowrap;
}
.walkthrough-labels {
  display: none;
}
.walkthrough-stage.is-ready .walkthrough-labels,
.walkthrough-stage.is-ready .walkthrough-leaders {
  display: block;
}
.walkthrough-stage.is-ready .walkthrough-flat {
  display: none;
}
.walkthrough-flat {
  position: absolute;
  inset: 45% 8% auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #84e6cc;
  font: 13px/1.5 var(--font-mono);
}
.walkthrough-flat span:not(:nth-child(2)) {
  border: 1px solid var(--bento-line);
  padding: 22px;
  background: var(--bento-panel);
}

#walkthrough-error {
  position: absolute;
  top: 54%;
  left: 24px;
  right: 24px;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}
#walkthrough-canvas[hidden] {
  display: none;
}
.walkthrough-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px var(--page-gutter);
  color: var(--text-muted);
  font-size: 11px;
}
.walkthrough-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

@media (max-width: 1000px) {
  .context-bubble {
    width: 246px;
    padding: 16px;
  }
  .context-user {
    left: 24px;
    top: 90px;
  }
  .context-beam {
    right: 24px;
    bottom: 90px;
  }
}

@media (max-width: 600px) {
  #walkthrough-cloud-label {
    margin-top: -44px;
  }
  .walkthrough-main {
    padding-top: 20px;
  }
  .walkthrough-stage {
    height: 810px;
  }

  .context-bubble {
    width: calc(100% - 32px);
    left: 16px;
    right: auto;
  }
  .context-user {
    top: 66px;
  }
  .context-beam {
    bottom: 90px;
  }
  .context-bubble h3 {
    font-size: 17px;
  }
  .walkthrough-flat {
    gap: 8px;
    inset-inline: 16px;
    font-size: 11px;
  }
  .walkthrough-flat span:not(:nth-child(2)) {
    padding: 12px;
  }

  .walkthrough-footer {
    flex-direction: column;
    gap: 8px;
  }
}

/* Connectivity keeps explanations in the scene, with step controls above the canvas. */

.connectivity-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.connectivity-nodes span {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 3px 6px;
  font: 11px/1.5 var(--font-mono);
  color: #a7c8ff;
  background: #0d102be8;
  white-space: pre;
  text-align: center;
}
.connectivity-nodes .is-selected {
  color: var(--bento-accent);
}
.connectivity-nodes [data-connectivity-node="prod"],
.connectivity-nodes [data-connectivity-node="dev"],
.connectivity-nodes [data-connectivity-node="cloud"] {
  color: #84e6cc;
}
.connectivity-nodes [data-connectivity-node].is-muted {
  color: #747b8d;
  background: transparent;
}
.context-bubble.connectivity-detail {
  top: 64px;
  left: 24px;
  width: 286px;
  min-height: 360px;
  padding: 16px;
}
.connectivity-detail .connectivity-fact {
  margin-top: 12px;
  color: #84e6cc;
  font: 11px/1.6 var(--font-mono);
}
.connectivity-command {
  margin: 12px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bento-line);
}
.connectivity-detail pre {
  font: 12px/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.connectivity-detail .connectivity-auth {
  font: 11px/1.6 var(--font-mono);
  color: #84e6cc;
  white-space: pre-line;
}
.connectivity-audit {
  margin-top: 12px;
  padding: 8px 0 0 12px;
  border-top: 1px solid var(--bento-line);
  border-left: 2px solid #465371;
}
.connectivity-audit.is-arriving {
  border-left-color: #84e6cc;
  background: #84e6cc0b;
}
.connectivity-audit pre {
  margin: 8px 0;
  color: #a7c8ff;
  min-height: 2.4em;
}
.connectivity-audit .connectivity-audit-kind {
  color: #a7c8ff;
  font: 11px/1.5 var(--font-mono);
}
.connectivity-audit .connectivity-risk {
  margin-top: 8px;
  color: #84e6cc;
  font: 11px/1.5 var(--font-mono);
}
.walkthrough-stage:not(.is-ready)[data-scene="4"] .connectivity-nodes {
  inset: 100px 24px auto 350px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.walkthrough-stage:not(.is-ready)[data-scene="4"] .connectivity-nodes span {
  position: static;
  transform: none;
  border: 1px solid var(--bento-line);
  white-space: normal;
}
.connectivity-nodes span[hidden] {
  display: none;
}
.walkthrough-stage[data-scene="4"] #walkthrough-error {
  top: auto;
  bottom: 80px;
}
@media (max-width: 1100px) {
  .context-bubble.connectivity-detail {
    top: auto;
    bottom: 120px;
    width: calc(100% - 48px);
    min-height: 340px;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="4"] .connectivity-nodes {
    inset: 100px 24px auto;
  }
}
@media (max-width: 600px) {
  .walkthrough-scenes {
    gap: 8px 16px;
  }
  .context-bubble.connectivity-detail {
    left: 16px;
    width: calc(100% - 32px);
    bottom: 140px;
    min-height: 360px;
  }

  .connectivity-nodes span {
    font-size: 10px;
    padding: 2px 4px;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="4"] .connectivity-nodes {
    inset: 112px 16px auto;
    grid-template-columns: repeat(3, 1fr);
  }
  .walkthrough-stage[data-scene="4"] #walkthrough-error {
    top: 40px;
    bottom: auto;
    margin: 0;
    font: 11px/1.5 var(--font-mono);
  }
}

.lifecycle-detail .connectivity-fact {
  white-space: pre-line;
}
.lifecycle-detail #lifecycle-build {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bento-line);
  font: 12px/1.45 var(--font-mono);
}
.lifecycle-detail .lifecycle-status {
  margin-top: 12px;
  color: #a7c8ff;
  font: 11px/1.5 var(--font-mono);
}
.lifecycle-nodes [data-lifecycle-node$="home"] {
  color: #84e6cc;
}
.architecture-reference pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.walkthrough-stage:not(.is-ready)[data-scene="3"] .lifecycle-nodes {
  inset: 100px 24px auto 390px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.walkthrough-stage:not(.is-ready)[data-scene="3"] .lifecycle-nodes span {
  position: static;
  transform: none;
  border: 1px solid var(--bento-line);
  white-space: normal;
}
.walkthrough-stage[data-scene="3"] #walkthrough-error {
  top: auto;
  bottom: 80px;
}
@media (min-width: 1101px) {
  .context-bubble.lifecycle-detail {
    width: 340px;
  }
}
@media (max-width: 1100px) {
  .walkthrough-stage:not(.is-ready)[data-scene="3"] .lifecycle-nodes {
    inset: 100px 24px auto;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .context-bubble.lifecycle-detail {
    bottom: 90px;
    min-height: 230px;
  }
}
@media (max-width: 600px) {
  .lifecycle-detail #lifecycle-build {
    font-size: 12px;
  }
  .context-bubble.lifecycle-detail {
    bottom: 104px;
    min-height: 320px;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="3"] .lifecycle-nodes {
    inset: 112px 16px auto;
  }
  .walkthrough-stage[data-scene="3"] #walkthrough-error {
    top: 40px;
    bottom: auto;
    margin: 0;
    font: 11px/1.5 var(--font-mono);
  }
}

/* Approval state is local to each plan; requester privileges never change. */
.context-bubble.delegation-detail {
  width: 300px;
  min-height: 350px;
}
.delegation-detail .delegation-scope {
  margin-top: 8px;
  font: 11px/1.6 var(--font-mono);
  color: #a7c8ff;
}
.delegation-detail #delegation-result {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bento-line);
  color: #a7c8ff;
}
.delegation-detail.is-approved #delegation-status {
  color: #cadf4c;
}
.walkthrough-stage:not(.is-ready)[data-scene="5"] .delegation-nodes {
  inset: 100px 24px auto 350px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.walkthrough-stage:not(.is-ready)[data-scene="5"] .delegation-nodes span {
  position: static;
  transform: none;
  border: 1px solid var(--bento-line);
  white-space: normal;
}
.walkthrough-stage[data-scene="5"] #walkthrough-error {
  top: auto;
  bottom: 80px;
}
@media (max-width: 1100px) {
  .context-bubble.delegation-detail {
    width: calc(100% - 48px);
    min-height: 300px;
    bottom: 100px;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="5"] .delegation-nodes {
    inset: 112px 24px auto;
  }
}
@media (max-width: 600px) {
  .context-bubble.delegation-detail {
    width: calc(100% - 32px);
    min-height: 350px;
    bottom: 104px;
  }
  .walkthrough-stage:not(.is-ready)[data-scene="5"] .delegation-nodes {
    inset: 112px 16px auto;
  }
  .walkthrough-stage[data-scene="5"] #walkthrough-error {
    top: 40px;
    bottom: auto;
    margin: 0;
    font: 11px/1.5 var(--font-mono);
  }
}

.delegation-nodes .delegation-task {
  border: 1px solid #84e6cc55;
  color: #84e6cc;
  padding: 6px 8px;
}

/* Every scene shares one paginator and explicit playback controls. */
.walkthrough-navigation {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.walkthrough-steps {
  flex: 1 1 540px;
  min-width: 0;
}
.walkthrough-navigation .walkthrough-steps > div {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.walkthrough-pager,
.walkthrough-controls {
  display: flex;
  gap: 6px;
}
.walkthrough-controls {
  margin-left: auto;
}
.walkthrough-navigation button {
  border: 1px solid var(--bento-line);
  background: #10152e;
  color: var(--text-secondary);
  font: 11px/1.5 var(--font-mono);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}
.walkthrough-navigation [aria-pressed="true"] {
  border-color: #84e6cc;
  color: #84e6cc;
}
.walkthrough-navigation button:hover:not(:disabled) {
  color: var(--bento-accent);
}
.walkthrough-navigation button:focus-visible {
  outline: 2px solid #84e6cc;
  outline-offset: 3px;
}
.walkthrough-navigation button:disabled {
  opacity: 0.4;
  cursor: default;
}
.walkthrough-navigation [hidden] {
  display: none;
}
@media (min-width: 601px) and (max-width: 1100px) {
  .context-bubble.architecture-detail,
  .context-bubble.lifecycle-detail,
  .context-bubble.delegation-detail {
    bottom: 128px;
  }
}
@media (max-width: 600px) {
  .walkthrough-navigation {
    left: 16px;
    right: 16px;
    bottom: 20px;
    gap: 12px;
  }
  .walkthrough-navigation .walkthrough-steps > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .walkthrough-navigation button {
    padding: 8px 6px;
    font-size: 10px;
  }
  .context-beam {
    bottom: 124px;
  }
  .context-bubble.architecture-detail,
  .context-bubble.connectivity-detail {
    bottom: 156px;
  }
}

.delegation-proposal {
  position: absolute;
  z-index: 2;
  width: min(230px, calc(100% - 32px));
  padding: 10px 12px;
  border: 1px solid #84e6cc66;
  background: #10152ef5;
  color: #a7c8ff;
  font: 10px/1.5 var(--font-mono);
}
.delegation-proposal[hidden] {
  display: none;
}
.delegation-proposal strong {
  color: #84e6cc;
  font-weight: 400;
}
.delegation-proposal pre {
  margin: 6px 0 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.walkthrough-stage:not(.is-ready) .delegation-proposal {
  display: none;
}
.delegation-detail.is-denied {
  border-top-color: #ff7f88;
}
.delegation-detail.is-denied #delegation-status,
.delegation-detail.is-denied #delegation-result,
.delegation-nodes .is-denied {
  color: #ff7f88;
}

.delegation-proposal.is-denied {
  border-color: #ff7f8888;
  color: #ff7f88;
}
.delegation-proposal.is-denied strong {
  color: #ff7f88;
}
@media (max-width: 1100px) {
  .context-bubble.architecture-detail,
  .context-bubble.lifecycle-detail,
  .context-bubble.delegation-detail {
    bottom: max(128px, calc(var(--walkthrough-nav-height, 92px) + 40px));
  }
}
@media (max-width: 600px) {
  .context-bubble.architecture-detail,
  .context-bubble.connectivity-detail {
    bottom: max(156px, calc(var(--walkthrough-nav-height, 116px) + 40px));
  }
}