:is(body[data-chapter="3"], .course-chapter-stage) { --course-infra-deploy: var(--map-unclear); --course-infra-request: var(--map-line); --course-infra-service: var(--map-line); --course-infra-event: var(--course-resource); --course-infra-monitor: #9a67bc; }
html[data-theme="dark"] :is(body[data-chapter="3"], .course-chapter-stage) { --course-infra-monitor: #c9a5e5; }
body[data-chapter="3"] .course-intro { width: 420px; }
.course-infra-cluster, .course-infra-services { position: absolute; display: none; border: 1px dashed var(--map-border); border-radius: 24px; pointer-events: none; }
.course-infra-cluster { left: 1550px; top: 176px; width: 782px; height: 756px; }
.course-infra-services { left: 2040px; top: 325px; width: 275px; height: 560px; border-style: dotted; }
.course-infra-services { border-color: transparent; }
.course-infra-services::before, .course-infra-services::after { content: ''; position: absolute; inset: -1px; border: 2px dotted; border-radius: inherit; pointer-events: none; }
.course-infra-services::before { border-color: var(--course-infra-monitor); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 67%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 67%); }
.course-infra-services::after { border-color: var(--course-infra-event); -webkit-mask-image: linear-gradient(to bottom, transparent 33%, #000 72%, #000 100%); mask-image: linear-gradient(to bottom, transparent 33%, #000 72%, #000 100%); }
:is(body[data-chapter="3"], .course-chapter-stage) .course-infra-services > span { z-index: 1; color: var(--course-infra-monitor); }
.course-infra-services__anchor { position: absolute; z-index: 1; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--map-bg); }
.course-infra-services__anchor--metrics { top: -4px; border: 2px solid var(--course-infra-monitor); }
.course-infra-services__anchor--events { bottom: -4px; border: 2px solid var(--course-infra-event); }
.course-infra-services.is-processing-event { background: color-mix(in srgb, var(--course-infra-event) 7%, transparent); }
.course-infra-cluster > span, .course-infra-services > span { position: absolute; left: 16px; top: 10px; color: var(--map-muted); font-size: .63rem; font-weight: 700; }
body[data-chapter="3"] :is(.course-infra-cluster, .course-infra-services), .course-chapter-stage :is(.course-infra-cluster, .course-infra-services) { display: block; }
body[data-chapter="3"] .course-node[data-node^="app-"] .questions-map-card__question { min-height: 71px; }
.course-chapter-stage .course-node[data-node^="app-"] .questions-map-card__question { display: flex; align-items: center; justify-content: center; min-height: 71px; }
.course-infra-node-detail { display: block; color: var(--map-muted); font-size: .6rem; font-weight: 650; line-height: 1.15; }
.course-chapter-stage .course-infra-node-detail { position: absolute; right: 0; bottom: 18px; left: 0; text-align: center; }
body[data-chapter="3"] .course-node[data-node^="app-"][data-offline="true"] .course-infra-node-detail { color: #b95650; }
.course-infra-service-version { display: block; color: var(--map-muted); font-size: .58rem; font-weight: 700; line-height: 1.1; }
body[data-chapter="3"] .course-node[data-node^="svc-"].is-stale .questions-map-card__question { border-color: color-mix(in srgb, #d39b48 64%, var(--map-border)); }
body[data-chapter="3"] .course-node[data-node^="svc-"].is-stale .course-infra-service-version { color: #b47b2e; }
.course-infra-readiness { display: flex; justify-content: space-between; gap: .5rem; font-size: .68rem; }
.course-infra-readiness span { color: var(--map-muted); }
.course-infra-readiness strong { color: var(--map-text); }
.course-infra-node-stack { display: grid; gap: .38rem; }
body[data-chapter="3"] .course-tool[data-tool="developer"] .course-tool__icon { color: var(--course-blue); }
body[data-chapter="3"] .course-tool[data-state="done"] { border-color: color-mix(in srgb, #32966d 65%, var(--map-border)); }
body[data-chapter="3"] .course-tool[data-state="failed"] { border-color: #c66b64; color: #b95650; }
body[data-chapter="3"] .course-tool.is-faulty { border-color: #c66b64; color: #b95650; }
:is(body[data-chapter="3"], .course-chapter-stage) :is(.course-tools__links > path, .course-lines path.is-infra-runtime)[data-infra-kind="deploy"], .course-infra-legend [data-kind="deploy"] { --course-infra-line-color: var(--course-infra-deploy); }
:is(body[data-chapter="3"], .course-chapter-stage) :is(.course-tools__links > path, .course-lines path.is-infra-runtime)[data-infra-kind="request"], .course-infra-legend [data-kind="request"] { --course-infra-line-color: var(--course-infra-request); }
:is(body[data-chapter="3"], .course-chapter-stage) :is(.course-tools__links > path, .course-lines path.is-infra-runtime)[data-infra-kind="service"], .course-infra-legend [data-kind="service"] { --course-infra-line-color: var(--course-infra-service); }
:is(body[data-chapter="3"], .course-chapter-stage) :is(.course-tools__links > path, .course-lines path.is-infra-runtime)[data-infra-kind="event"], .course-infra-legend [data-kind="event"] { --course-infra-line-color: var(--course-infra-event); }
:is(body[data-chapter="3"], .course-chapter-stage) :is(.course-tools__links > path, .course-lines path.is-infra-runtime)[data-infra-kind="monitor"], .course-infra-legend [data-kind="monitor"] { --course-infra-line-color: var(--course-infra-monitor); }
:is(body[data-chapter="3"], .course-chapter-stage) .course-tools__links > path[data-infra-kind] { stroke: var(--course-infra-line-color); opacity: .64; }
body[data-chapter="3"] .course-tools__links { pointer-events: none; }
body[data-chapter="3"] .course-tools__links > path { pointer-events: stroke; }
.course-infra-legend { position: absolute; top: 87px; left: 2440px; display: flex; flex-wrap: wrap; gap: .3rem .7rem; width: 340px; color: var(--map-muted); font-size: .58rem; font-weight: 650; pointer-events: none; }
.course-infra-legend span { display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap; }
.course-infra-legend span::before { content: ''; width: 13px; border-top: 2px dotted var(--course-infra-line-color); }
body[data-chapter="3"] .course-tool.is-processing { animation: course-infra-pulse .65s ease-in-out; }
@keyframes course-infra-pulse { 50% { background: color-mix(in srgb, var(--course-blue) 18%, var(--map-surface)); } }
body[data-chapter="3"] .course-tools__links path.is-deploying,
body[data-chapter="3"] .course-lines path.is-deploying { stroke: var(--course-infra-line-color, var(--course-blue)); opacity: 1; stroke-width: 2.2; stroke-dasharray: 3 7; animation: course-infra-route .5s linear infinite; }
.course-tools__links marker path { fill: none; stroke: var(--map-muted); }
@keyframes course-infra-route { to { stroke-dashoffset: -30; } }
body[data-chapter="3"] .course-lines path.is-infra-runtime { stroke: var(--course-infra-line-color, var(--map-muted)); stroke-width: 1.4; stroke-dasharray: 3 8; opacity: .62; }
body[data-chapter="3"] .course-lines path.is-infra-runtime.is-active-route { stroke: var(--map-line); stroke-width: 1.8; opacity: .95; }
body[data-chapter="3"] .course-lines path.is-infra-runtime.is-deploying { stroke: var(--map-line); stroke-width: 2.2; opacity: 1; }
body[data-chapter="3"] .course-canvas[data-primary-route="false"] .course-lines path.is-primary-route { opacity: 0; pointer-events: none; }
body[data-chapter="3"] .course-lines path.is-primary-route { transition: opacity .3s ease; }
body[data-chapter="3"] .course-canvas:not([data-fallback-route="true"]) .course-lines path.is-backup-route { opacity: 0; pointer-events: none; }
body[data-chapter="3"] .course-lines path.is-backup-route { transition: opacity .3s ease; }
body[data-chapter="3"] .course-node[data-node^="app-"] .questions-map-card__question { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; }
.course-infra-version { color: var(--map-muted); font-size: .58rem; font-weight: 700; }
.course-chapter-stage .course-infra-version { position: absolute; right: 0; bottom: 5px; left: 0; text-align: center; }
body[data-chapter="3"] .course-node.is-faulty .course-infra-version { color: #b95650; }
.course-infra-phase { display: block; height: 1rem; margin-top: .3rem; overflow: hidden; color: var(--map-muted); font-size: .67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.course-infra-phase[data-tone="error"] { color: #b95650; }
.course-infra-phase[data-tone="ok"] { color: #23865e; }
.course-infra-phase[data-tone="warning"] { color: #b47b2e; }
.course-infra-viz { display: grid; align-content: start; gap: .5rem; min-height: 0; margin: .35rem 0 .25rem; padding: .65rem; border: 1px solid var(--map-border); border-radius: 16px; background: color-mix(in srgb, var(--course-blue) 4%, var(--map-bg)); }
.course-infra-viz__row { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-width: 0; padding: .5rem .65rem; border: 1px solid var(--map-border); border-radius: 11px; background: var(--map-bg); font-size: .7rem; }
.course-infra-viz__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-infra-viz__row small { flex: none; color: var(--map-muted); font-size: .65rem; }
.course-infra-viz__row[data-tone="error"] { border-color: color-mix(in srgb, #c66b64 55%, var(--map-border)); }
.course-infra-viz__row[data-tone="ok"] { border-color: color-mix(in srgb, #32966d 45%, var(--map-border)); }
.course-infra-viz__row[data-tone="warning"] { border-color: color-mix(in srgb, #d39b48 55%, var(--map-border)); }
.course-infra-code { min-width: 0; margin: 0; padding: .65rem; overflow-x: auto; border: 1px solid var(--map-border); border-radius: 11px; background: var(--map-surface); color: var(--map-text); font: .65rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.course-infra-note { margin: 0; color: var(--map-muted); font-size: .68rem; line-height: 1.45; }
.course-infra-guide p { margin: 0 0 .5rem; }
.course-infra-guide dl { display: grid; gap: 0; margin: 0; }
.course-infra-guide dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--map-border); font-size: .69rem; line-height: 1.35; }
.course-infra-guide dt { color: var(--map-muted); font-weight: 700; }
.course-infra-guide dd { min-width: 0; margin: 0; color: var(--map-text); }
.course-infra-log { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.course-infra-log li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .1rem; border-bottom: 1px solid var(--map-border); color: var(--map-text); font-size: .69rem; }
.course-infra-log li:last-child { border-bottom: 0; }
.course-infra-log code { flex: none; color: var(--course-blue); font-size: inherit; }
.course-infra-log li[data-tone="error"] code { color: #b95650; }
.course-infra-log li[data-tone="ok"] code { color: #23865e; }
.course-infra-network { display: grid; flex: 1; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: .55rem; min-width: 0; min-height: 0; margin-top: .55rem; }
.course-infra-network__list { display: grid; align-content: start; gap: .3rem; min-width: 0; }
.course-infra-network__list button { display: flex; align-items: center; justify-content: space-between; gap: .3rem; min-width: 0; padding: .45rem .5rem; border: 1px solid transparent; border-radius: 11px; background: color-mix(in srgb, var(--map-text) 4%, var(--map-bg)); color: var(--map-text); font: inherit; font-size: .69rem; text-align: left; cursor: pointer; }
.course-infra-network__list button.is-current { border-color: var(--map-selected-border); background: var(--map-selected-bg); }
.course-infra-network__list button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-infra-network__list button small { flex: none; color: var(--map-muted); font-size: .61rem; }
.course-infra-network__list button[data-tone="error"] small { color: #b95650; }
.course-infra-network__list button[data-tone="ok"] small { color: #23865e; }
.course-infra-network__detail { min-width: 0; padding: .65rem; overflow-y: auto; border: 1px solid var(--map-border); border-radius: 13px; background: var(--map-bg); color: var(--map-text); font-size: .7rem; line-height: 1.45; }
.course-infra-network__detail strong { display: block; margin-bottom: .4rem; font-size: .76rem; }
.course-infra-network__detail p { margin: 0; color: var(--map-muted); }
@media (prefers-reduced-motion: reduce) { body[data-chapter="3"] .course-tool.is-processing, body[data-chapter="3"] .course-tools__links path.is-deploying, body[data-chapter="3"] .course-lines path.is-deploying { animation: none; } }