/* Screen three is a desktop presentation canvas. */
.slide.is-system { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); --u: calc(100cqw / 1440); }
.is-system > .intro, .is-system > .scene, .is-system > .issue-annotations, .is-system > .issues, .is-system > .takeaway, .is-system > .illustrative, .is-system > #scene-description { display: none; }
.system-screen { position: absolute; inset: 0; }
.system-screen[hidden], .system-piece.is-unrevealed { display: none; }
.system-intro { position: absolute; top: calc(31 * var(--u)); left: calc(70 * var(--u)); right: calc(440 * var(--u)); }
.system-intro h1 { margin: 0; font-size: calc(52 * var(--u)); line-height: 1.04; font-weight: 720; letter-spacing: -.045em; }
.system-intro h1 span { color: var(--purple); }
.system-intro p { margin: calc(13 * var(--u)) 0 0; font-size: calc(23 * var(--u)); line-height: 1.35; color: var(--muted); letter-spacing: -.02em; }
.system-diagram { position: absolute; inset: 0; width: 100%; height: 100%; }
.system-diagram text { font-family: inherit; letter-spacing: -.02em; }
.system-label { fill: #e3eaf0; font-weight: 450; }
.system-stage-label { fill: #f1f4f7; font-weight: 540; }
.system-stage-label, .system-route-label { paint-order: stroke; stroke: var(--bg); stroke-width: 7px; stroke-linejoin: round; }
.system-note { fill: #a7b6c1; }
.system-eyebrow { fill: #83c9f6; letter-spacing: .065em !important; font-weight: 550; }
.system-panel { fill: #10161c; stroke: #364752; stroke-width: 1.15; }
.system-piece.is-current > .system-panel { stroke: #b79acb; stroke-width: 1.7; }
.system-source { fill: #10171d; stroke: #354550; stroke-width: 1; }
.system-source-dot { fill: #83cbf8; }
.system-route { fill: none; stroke: #61baf3; stroke-opacity: .6; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.system-route-nurture { stroke: #c7a1e4; stroke-dasharray: 4 5; stroke-opacity: .7; }
.system-route-update { stroke: #7f939f; stroke-dasharray: 3 5; stroke-width: 1.15; stroke-opacity: .6; }
.system-route-label { fill: #acbcc8; font-weight: 450; }
.system-token-lead { fill: #83d0ff; }
.system-token-nurture { fill: #d4b1ee; }
.system-token-update { fill: #a8bac6; }
.system-database-wall { fill: url(#system-glass); stroke: #819eaf; stroke-width: 1.2; }
.system-database-rim { fill: #1b2933; stroke: #819eaf; stroke-width: 1.2; }
.system-database-line { fill: none; stroke: #688191; stroke-opacity: .8; stroke-width: 1; }
.system-database-name { fill: #e4f1f9; font-weight: 600; letter-spacing: -.05em !important; }
.system-icon, .system-avatar-line, .system-feed-cue { fill: none; stroke: #a8c1d2; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.system-divider { fill: none; stroke: #2e3d48; stroke-width: 1; }
.system-field { fill: #c2cfda; }
.system-check-ring { fill: #142a36; stroke: #416b84; stroke-width: 1; }
.system-check { fill: none; stroke: #8dccef; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.system-wave { stroke: #8ccbf2; stroke-width: 1.8; stroke-linecap: round; }
.system-brief-strip { fill: #1b2934; stroke: #39576c; stroke-width: .8; }
.system-accent-text { fill: #bfdff2; font-weight: 500; }
.system-feed-behind { fill: #15202a; stroke: #2e404d; stroke-width: 1; }
.system-brief-card { fill: #18232e; stroke: #445f72; stroke-width: 1; }
.system-avatar { fill: #223c4e; stroke: #3b617a; stroke-width: .8; }
.system-call-action { fill: #78bce9; }
.system-action-label { fill: #0c1a24; font-weight: 600; }
.system-secondary-action { fill: #1b2934; stroke: #405667; stroke-width: .8; }
.system-nurture-panel { fill: #19171f; stroke: #6c567e; }
.system-nurture-text { fill: #d4b7ea; font-weight: 500; }
.system-manager-panel { fill: #11191f; stroke: #4a626f; }
.system-caption { position: absolute; top: calc(695 * var(--u)); left: calc(70 * var(--u)); right: calc(70 * var(--u)); }
.system-caption h2 { margin: 0; color: #dfc1f1; font-size: calc(24 * var(--u)); line-height: 1.2; letter-spacing: -.025em; font-weight: 550; }
.system-caption p { margin: calc(5 * var(--u)) 0 0; color: #b9c4ce; font-size: calc(19 * var(--u)); line-height: 1.35; letter-spacing: -.015em; }
.system-footnote { position: absolute; bottom: calc(27 * var(--u)); left: calc(70 * var(--u)); margin: 0; color: #7d8a93; font-size: calc(15 * var(--u)); }
.is-system .control:focus-visible { outline-color: #d6a6f2; }