@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --graphite: #141b20; --surface: #202b32; --paper: #f3f0e8; --muted: #b5c1c5;
  --amber: #f1b65a; --teal: #75d7c7; --lavender: #b6b9ef; --red: #ff9083; --ink: #18252c;
  --r-background-color: var(--graphite); --r-main-font: "IBM Plex Sans", sans-serif;
  --r-main-color: var(--paper); --r-main-font-size: 34px; --r-heading-font: "IBM Plex Sans", sans-serif;
  --r-heading-color: var(--paper); --r-heading-text-transform: none; --r-heading-text-shadow: none;
  --r-link-color: var(--teal); --r-selection-background-color: #438375;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--graphite); color: var(--paper); font-family: "IBM Plex Sans", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.reveal { font-family: "IBM Plex Sans", sans-serif; }
.reveal .slides { text-align: left; }
.reveal .slides > section { height: 900px; padding: 0; }
.slide-frame {
  position: relative; width: 1600px; height: 900px; padding: 62px 88px 42px;
  display: grid; grid-template-rows: 28px auto 1fr 68px; gap: 22px;
  overflow: hidden; background: var(--graphite); color: var(--paper);
}
.slide-frame.light { background: var(--paper); color: var(--ink); --muted: #46565d; --teal: #176f64; --lavender: #545895; }
.reveal h1, .reveal h2, .reveal h3, .reveal p, .reveal figure, .reveal ul,
.slide-frame h1, .slide-frame h2, .slide-frame h3, .slide-frame p, .slide-frame figure, .slide-frame ul {
  margin: 0; color: inherit; font-family: inherit; text-shadow: none; text-transform: none;
}
.kicker { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 22px; color: var(--muted); letter-spacing: .03em; }
.optional-badge { color: var(--lavender); }
.headline { font-size: 76px; font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.subtitle { margin-top: 12px !important; font-size: 32px; color: var(--muted) !important; }
.slide-body { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.supporting { font-size: 32px; line-height: 1.35; color: var(--muted) !important; max-width: 1330px; }
.position-label { font: 24px/1.35 "IBM Plex Mono", monospace; color: var(--muted); margin-bottom: 22px; }
footer { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid #60737d55; padding-top: 12px; gap: 24px; }
.footer-copy { display: flex; flex-direction: column; align-items: start; gap: 5px; }
.evidence-caption { font-size: 24px; line-height: 1.25; max-width: 1160px; color: var(--muted); }
.citations { display: flex; gap: 10px; flex: none; }
.citations button { padding: 0; background: none; border: 0; border-bottom: 1px solid; font: 24px "IBM Plex Mono", monospace; color: var(--teal); }
.slide-index { font: 22px "IBM Plex Mono", monospace; color: var(--muted); white-space: nowrap; }
.layout-hero, .layout-landing { grid-template-rows: 28px 1fr 68px; }
.layout-hero .slide-body { display: grid; grid-template-columns: 58% 42%; align-items: center; gap: 0; }
.layout-hero .headline { font-size: 80px; }
.is-opening .headline { font-size: 112px; }
.hero-subtitle { font-size: 34px; line-height: 1.35; margin-top: 32px !important; color: var(--muted) !important; max-width: 760px; }
.byline { font: 24px "IBM Plex Mono", monospace; margin-top: 48px !important; color: var(--muted) !important; }
.atlas { position: relative; height: 600px; }
.atlas-planes { position: absolute; width: 300px; height: 500px; left: 0; top: 54px; }
.atlas-plane { position: absolute; inset: auto 0; top: calc((4 - var(--level)) * 62px); height: 250px; transform: perspective(1300px) rotateX(54deg) rotateZ(-30deg); z-index: var(--level); background: #2b3a43; border: 1px solid #93a7b66b; box-shadow: 8px 9px 0 #0f151ab3; opacity: .8; }
.atlas-plane span { position: absolute; top: 22px; left: 24px; font: 26px "IBM Plex Mono", monospace; color: var(--paper); }
.atlas-plane i { position: absolute; width: 132px; height: 132px; left: 98px; top: 98px; border: 1px solid currentColor; border-radius: 50%; opacity: .28; }
.atlas-plane.active { opacity: 1; background: #344b54; border-color: var(--teal); }
.atlas-plane.intent.active { background: #614a2f; border-color: var(--amber); }
.atlas-plane.evidence.active { background: #414765; border-color: var(--lavender); }
.atlas-key { position: absolute; left: 342px; top: 100px; width: 252px; display: grid; gap: 20px; }
.atlas-key > div { display: grid; gap: 3px; opacity: .8; }
.atlas-key strong { font-size: 30px; font-weight: 500; }
.atlas-key span { font-size: 24px; line-height: 1.2; color: var(--muted); }
.atlas-key .active { opacity: 1; }
.atlas-key .context.active strong { color: var(--teal); }
.atlas-key .intent.active strong { color: var(--amber); }
.atlas-key .evidence.active strong { color: var(--lavender); }
.atlas-caption { position: absolute; bottom: 15px; left: 0; font-size: 22px; color: var(--muted) !important; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 100%; }
.comparison-card { background: var(--surface); border-top: 3px solid #82949d; padding: 30px 36px 34px; }
.comparison-card h2 { font-size: 42px; font-weight: 500; line-height: 1.14; margin-bottom: 26px; }
.comparison-card ul { list-style: none; display: grid; gap: 18px; padding: 0; font-size: 34px; line-height: 1.2; }
.comparison-card li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 17px 6px 0; background: currentColor; }
.comparison-card.amber { border-color: var(--amber); }
.comparison-card.teal { border-color: var(--teal); }
.comparison-card.lavender { border-color: var(--lavender); }
.comparison-card.red { border-color: var(--red); }
.comparison-card.amber .position-label { color: var(--amber); }
.comparison-card.teal .position-label { color: var(--teal); }
.comparison-card.lavender .position-label { color: var(--lavender); }
.comparison-card.red .position-label { color: var(--red); }
.light .comparison-card { background: #e8e6dc; }
.boundary { position: relative; gap: 70px; }
.ownership-seam { position: absolute; height: 100%; left: 50%; border-left: 2px dashed #9cacb7; }
.layer-rows { display: grid; gap: 14px; }
.layer-row { display: grid; grid-template-columns: 74px 260px 1fr; gap: 20px; align-items: center; padding: 19px 26px; border: 1px solid #586f7b77; font-size: 32px; min-height: 80px; }
.row-number { font: 24px "IBM Plex Mono", monospace; color: var(--teal); }
.layer-row strong { font-weight: 500; }
.layer-row > span:last-child { color: var(--muted); }
.network-chart { width: 100%; height: 380px; flex: none; overflow: visible; }
.network-chart .svg-label { font-size: 36px; }
.connection { stroke: var(--teal); stroke-width: 2; opacity: .6; }
.network-node { fill: var(--surface); stroke: #788f9a; stroke-width: 1; }
.network-center { fill: #244e49; stroke: var(--teal); stroke-width: 2; }
.island-sea { fill: #193b40; }
.island-ripple { fill: none; stroke: var(--teal); stroke-width: 2; opacity: .45; transform-box: fill-box; transform-origin: center; }
.island-sand { fill: #c9a96f; stroke: var(--amber); stroke-width: 2; }
.palm-trunk { fill: #9d7345; stroke: #d8af6b; stroke-width: 1; }
.palm-fronds { fill: #4b9a78; stroke: #75d7c7; stroke-width: 2; }
.palm-coconut { fill: #6e4f32; stroke: #c9a96f; stroke-width: 1; }
body:not(.flat) .present .island-ripple { animation: island-tide 6s ease-in-out infinite; }
body:not(.flat) .present .island-ripple.ripple-two { animation-delay: -3s; }
@keyframes island-tide { 0%, 100% { transform: scale(.97); opacity: .25; } 50% { transform: scale(1.07); opacity: .65; } }
.svg-label { fill: var(--paper); font: 34px "IBM Plex Sans", sans-serif; }
.flow { display: flex; align-items: center; width: 100%; gap: 14px; }
.flow article { flex: 1; align-self: stretch; padding: 36px 24px; border: 1px solid #7f949f77; display: flex; flex-direction: column; gap: 42px; min-width: 0; }
.flow-number { font: 24px "IBM Plex Mono", monospace; color: var(--teal); }
.flow h2 { font-size: 34px; font-weight: 500; line-height: 1.15; }
.flow-arrow { color: var(--muted); font-size: 28px; }
.quotation { padding: 0; }
.quotation blockquote { margin: 0; padding: 0 0 0 30px; border-left: 3px solid var(--teal); box-shadow: none; width: 100%; background: none; font-size: 52px; font-style: normal; font-weight: 400; line-height: 1.2; }
.quotation blockquote::before { content: "\201c"; }
.quotation blockquote::after { content: "\201d"; }
.quotation figcaption { margin-top: 26px; padding-left: 33px; font-size: 28px; font-weight: 500; }
.quotation figcaption span { display: block; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--muted); margin-top: 5px; }
.quotation .position-label { margin-bottom: 16px; }
.compact blockquote { font-size: 38px; line-height: 1.23; padding-left: 24px; }
.compact figcaption { padding-left: 27px; font-size: 26px; margin-top: 18px; }
.debate { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.debate .quotation { align-self: start; }
.landing-headline { font-size: 100px; line-height: 1.07; letter-spacing: -.035em; font-weight: 500; margin-bottom: 20px !important; }
.landing-headline.amber { color: var(--amber); }
.landing-headline.teal { color: var(--teal); }
.landing-headline.lavender { color: var(--lavender); }
.campaign-scene { display: flex; gap: 42px; perspective: 1800px; padding: 4px 24px; }
.campaign-card { flex: 1; padding: 24px; background: #ede8da; color: var(--ink); box-shadow: 12px 18px 0 #0b1016; transform: rotateY(-9deg); }
.campaign-card.card-1 { transform: translateY(-10px); }
.campaign-card.card-2 { transform: rotateY(9deg); }
.campaign-card .position-label { font-size: 20px; color: #596268; margin-bottom: 15px; }
.campaign-card h2 { font-size: 36px; font-weight: 500; margin-top: 16px; }
.reveal .slides .fragment.custom { opacity: 1; visibility: inherit; transform: none; }
.campaign-shift { position: relative; height: 390px; }
.demo-view, .customer-view { position: absolute; inset: 0; transition: opacity 350ms, transform 350ms; }
.customer-view { opacity: 0; visibility: hidden; transform: translateY(18px); }
.campaign-shift.visible .demo-view, .flat .campaign-shift .demo-view { opacity: 0; visibility: hidden; transform: translateY(-18px); }
.campaign-shift.visible .customer-view, .flat .campaign-shift .customer-view { opacity: 1; visibility: inherit; transform: none; }
.customer-needs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.customer-needs article { padding: 22px 28px; border-left: 4px solid var(--teal); background: var(--surface); }
.customer-needs article.amber { border-color: var(--amber); }
.customer-needs h2 { font-size: 38px; font-weight: 500; line-height: 1.15; }
.customer-needs p { font-size: 30px; line-height: 1.25; margin-top: 12px; color: var(--muted); }
.intent-graphic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.intent-step { padding: 30px; border: 2px solid #718b98; background: var(--surface); transition: border-color 350ms, background 350ms; }
.intent-step h2 { font-size: 60px; font-weight: 500; margin: 28px 0 18px; }
.intent-step p { font-size: 32px; line-height: 1.3; color: var(--muted); }
.intent-step.is-complete, .intent-step.visible, .flat .intent-step { border-color: var(--amber); background: #322a20; }
.intent-step.is-complete .flow-number, .intent-step.visible .flow-number, .flat .intent-step .flow-number { color: var(--amber); }
.connection-build .connection { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 3; transition: stroke-dashoffset 500ms; }
.connection-build .network-node { transition: fill 350ms, stroke 350ms; }
.connection-build.visible .connection, .flat .connection-build .connection { stroke-dashoffset: 0; }
.connection-build.visible .network-node, .flat .connection-build .network-node { fill: #244e49; stroke: var(--teal); }
.pipeline-graphic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pipeline-step { position: relative; padding: 28px 22px; border: 2px solid #718b98; background: var(--surface); transition: border-color 350ms, background 350ms; }
.pipeline-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -19px; top: 46%; color: var(--muted); font-size: 28px; }
.pipeline-step h2 { font-size: 34px; line-height: 1.15; font-weight: 500; margin-top: 24px; min-height: 78px; }
.pipeline-check { display: block; width: 58px; height: 58px; margin: 20px 0; fill: none; stroke: #718b98; stroke-width: 2; }
.pipeline-check path { stroke: var(--teal); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 450ms; }
.step-state { display: block; font: 26px "IBM Plex Mono", monospace; }
.step-wait { color: var(--muted); }
.step-done { display: none; color: var(--teal); }
.pipeline-step.is-complete, .pipeline-step.visible, .flat .pipeline-step { border-color: var(--teal); background: #1c3532; }
.pipeline-step.is-complete .pipeline-check, .pipeline-step.visible .pipeline-check, .flat .pipeline-check { stroke: var(--teal); }
.pipeline-step.is-complete .pipeline-check path, .pipeline-step.visible .pipeline-check path, .flat .pipeline-check path { stroke-dashoffset: 0; }
.pipeline-step.is-complete .step-wait, .pipeline-step.visible .step-wait, .flat .step-wait { display: none; }
.pipeline-step.is-complete .step-done, .pipeline-step.visible .step-done, .flat .step-done { display: inline; }
.layout-memory .slide-body { gap: 18px; }
.layout-memory .quotation .position-label { display: none; }
.layout-memory .compact blockquote { font-size: 42px; }
.layout-memory .compact figcaption { font-size: 26px; margin-top: 14px; }
.memory-graphic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.memory-step { position: relative; padding: 20px 24px; border-top: 3px solid #718b98; background: var(--surface); transition: border-color 350ms, background 350ms; }
.memory-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -21px; top: 42%; color: var(--muted); font-size: 28px; }
.memory-step h2 { font-size: 34px; font-weight: 500; margin: 14px 0 10px; }
.memory-step p { font-size: 28px; line-height: 1.2; color: var(--muted); }
.memory-step.is-complete, .memory-step.visible, .flat .memory-step { border-color: var(--teal); background: #1c3532; }
.memory-return { width: 100%; height: 48px; flex: none; }
.memory-return .svg-label { font-size: 28px; }
.memory-return .connection { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms; }
.memory-return.visible .connection, .flat .memory-return .connection { stroke-dashoffset: 0; }
.graphic-arrow { align-self: center; text-align: center; font-size: 58px; color: var(--muted); transition: color 350ms; }
.moat-graphic { display: grid; grid-template-columns: 42% 58%; height: 380px; gap: 0; }
.moat-castle { display: block; width: 100%; height: 255px; }
.moat-label { text-align: center; font-size: 32px; line-height: 1.2; }
.moat-water { fill: none; stroke: var(--teal); stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms, fill 350ms; }
.moat-context.visible .moat-water, .flat .moat-water { fill: #193e38; stroke-dashoffset: 0; }
.moat-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 22px; }
.moat-records > div { display: grid; gap: 6px; border-top: 2px solid #718b98; padding-top: 8px; transition: border-color 350ms; }
.moat-records strong { font-size: 32px; line-height: 1.1; font-weight: 500; }
.moat-records span { font-size: 28px; line-height: 1.1; color: var(--muted); }
.moat-context.visible .moat-records > div, .flat .moat-records > div { border-color: var(--teal); }
.moat-action { display: grid; grid-template-columns: 58px 1fr 58px 1fr; gap: 12px; align-items: center; }
.moat-card { padding: 26px; background: var(--surface); border: 2px solid #718b98; min-height: 280px; transition: border-color 350ms; }
.moat-card .position-label { font-size: 22px; margin-bottom: 20px; }
.moat-card h2 { font-size: 48px; font-weight: 500; line-height: 1.1; }
.moat-card p { font-size: 28px; line-height: 1.25; color: var(--muted); margin-top: 22px; }
.moat-action.visible .graphic-arrow, .flat .moat-action .graphic-arrow { color: var(--teal); }
.moat-action.visible .moat-card, .flat .moat-card { border-color: var(--lavender); }
.moat-action.visible .decision, .flat .moat-card.decision { border-color: var(--amber); }
.bottleneck-graphic { width: 100%; height: 380px; flex: none; }
.bottleneck-graphic .svg-label { font-size: 36px; }
.draft-card { fill: #244e49; stroke: var(--teal); stroke-width: 2; }
.draft-lines { stroke: var(--teal); stroke-width: 2; fill: none; }
.queue-extra { opacity: 0; visibility: hidden; transition: opacity 350ms; }
.queue-build.visible .queue-extra, .flat .queue-extra { opacity: 1; visibility: inherit; }
.gate-brick, .reviewer-panel { fill: var(--surface); stroke: #718b98; stroke-width: 2; transition: fill 350ms, stroke 350ms; }
.reviewer-icon { stroke: var(--amber); stroke-width: 3; fill: none; }
.gate-label, .gate-note { fill: var(--paper); font: 28px "IBM Plex Sans", sans-serif; }
.gate-note { fill: var(--amber); font-size: 32px; opacity: 0; transition: opacity 350ms; }
.human-gate.visible .gate-brick, .flat .gate-brick { fill: #413324; stroke: var(--amber); }
.human-gate.visible .reviewer-panel, .flat .reviewer-panel { stroke: var(--amber); }
.human-gate.visible .gate-note, .flat .gate-note { opacity: 1; }
.delivered-check { stroke: var(--teal); stroke-width: 4; fill: none; }
.review-graphic { display: grid; gap: 26px; }
.review-chain { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; gap: 14px; }
.review-card { position: relative; padding: 32px; background: var(--surface); border-top: 3px solid var(--lavender); min-height: 260px; }
.review-card h2 { font-size: 44px; line-height: 1.15; font-weight: 500; }
.review-card p { font-size: 32px; line-height: 1.25; margin-top: 26px; color: var(--muted); }
.review-handoff { border-color: var(--amber); transition: border-color 350ms; }
.dispatch-state { position: absolute; inset: 32px; transition: opacity 350ms; }
.automatic-dispatch { opacity: 0; visibility: hidden; }
.review-handoff.visible, .flat .review-handoff { border-color: var(--teal); }
.review-handoff.visible .manual-dispatch, .flat .manual-dispatch { opacity: 0; visibility: hidden; }
.review-handoff.visible .automatic-dispatch, .flat .automatic-dispatch { opacity: 1; visibility: inherit; }
.review-approval { font-size: 28px; color: var(--amber) !important; }
.verification-graphic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.verification-step { padding: 30px; border: 2px solid #718b98; background: var(--surface); transition: border-color 350ms, background 350ms; }
.verification-step h2 { font-size: 48px; font-weight: 500; margin: 30px 0 22px; }
.verification-step p { font-size: 32px; line-height: 1.3; color: var(--muted); }
.verification-step.is-complete { border-color: var(--amber); background: #322a20; }
.verification-step.visible, .flat .verification-step:not(.is-complete) { border-color: var(--lavender); background: #2a2f46; }
.verification-step .flow-number { color: var(--lavender); }
.verification-step.is-complete .flow-number { color: var(--amber); }
.driving-graphic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 46px; height: 400px; flex: none; }
.driver-supervision { font-size: 30px; line-height: 1.2; color: var(--amber) !important; }
.driving-road { display: block; width: 100%; height: 280px; overflow: visible; }
.driving-car { transform: translateX(0); transition: transform 500ms ease-in-out; }
.drive-progress, .drive-sensors { fill: none; stroke: var(--teal); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms; }
.road-illustration.visible .driving-car, .flat .driving-car { transform: translateX(245px); }
.road-illustration.visible .drive-progress, .road-illustration.visible .drive-sensors,
.flat .drive-progress, .flat .drive-sensors { stroke-dashoffset: 0; }
.driving-caption { font-size: 28px; line-height: 1.25; color: var(--muted) !important; }
.collision-comparison .position-label { font-size: 24px; margin-bottom: 14px; }
.collision-heading { font-size: 32px; font-weight: 500; line-height: 1.2; }
.collision-row { display: grid; grid-template-columns: 1fr 180px; gap: 8px 20px; align-items: center; margin-top: 18px; }
.collision-row h3 { font-size: 30px; font-weight: 400; line-height: 1.2; }
.collision-value { grid-column: 2; grid-row: 1 / 3; font-size: 54px; font-weight: 500; text-align: right; line-height: 1.2; }
.collision-track { height: 14px; border-left: 2px solid var(--muted); background: #344b54; }
.collision-bar { height: 14px; background: var(--lavender); }
.collision-bar.fsd { background: var(--teal); }
.comparison-ratio { display: flex; align-items: center; gap: 24px; margin-top: 22px !important; }
.comparison-ratio strong { font-size: 60px; line-height: 1.1; font-weight: 500; }
.comparison-ratio span { font-size: 28px; line-height: 1.2; }
.collision-comparison .collision-bar, .collision-comparison .comparison-ratio { opacity: .35; transition: opacity 350ms; }
.collision-comparison.visible .collision-bar, .collision-comparison.visible .comparison-ratio,
.flat .collision-bar, .flat .comparison-ratio { opacity: 1; }
.driving-limit { font-size: 28px; line-height: 1.25; color: var(--muted) !important; margin-top: 16px !important; }
.speaker-cues { padding-left: 24px; }
.speaker-cues li { margin: 14px 0; }
body:not(.flat) .present .atlas-plane { animation: atlas-settle 500ms ease-out both; animation-delay: calc(var(--level) * 30ms); }
@keyframes atlas-settle { from { transform: perspective(1300px) rotateX(54deg) rotateZ(-30deg) translateY(18px); } to { transform: perspective(1300px) rotateX(54deg) rotateZ(-30deg); } }
.campaign-art { position: relative; height: 180px; overflow: hidden; background: #dd9c42; }
.campaign-art span { position: absolute; width: 180px; height: 180px; border: 2px solid #18252c; border-radius: 50%; left: 80px; top: 50px; }
.campaign-art i { position: absolute; width: 160px; height: 160px; border: 2px solid #18252c; left: 45px; top: 15px; transform: rotate(-22deg); }
.art-1 { background: #83b9ad; }
.art-2 { background: #a1a8cf; }
.economics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
.economics-card { display: grid; grid-template-columns: 42% 58%; grid-template-rows: auto 1fr; padding: 30px; background: #e7e4d9; }
.economics-card .position-label { grid-column: 1 / -1; font-size: 22px; }
.equation { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 8px; font-size: 34px; }
.equation > span:first-child { font-size: 72px; font-weight: 500; }
.equation-rule { height: 2px; width: 180px; background: #718186; }
.outcome-cost { font-size: 100px; font-weight: 500; letter-spacing: -.045em; color: var(--teal); align-self: center; }
.outcome-cost span { display: block; font-size: 26px; letter-spacing: 0; color: var(--ink); margin-top: 10px; }
.formula { font: 30px "IBM Plex Mono", monospace; color: var(--muted) !important; }
.risk-chart { display: grid; gap: 38px; }
.risk-row { display: grid; grid-template-columns: 370px 1fr 235px; align-items: center; gap: 30px; }
.risk-label { display: grid; gap: 6px; }
.risk-label strong { font-size: 32px; font-weight: 500; }
.risk-label span { font: 24px "IBM Plex Mono", monospace; color: var(--muted); }
.risk-track { height: 58px; border-left: 2px solid #657c88; }
.risk-bar { height: 58px; background: var(--teal); min-width: 1px; }
.risk-bar.failure { background: #b54e46; }
.risk-value { font-size: 52px; font-weight: 500; }
.risk-value span { display: block; font-size: 23px; font-weight: 400; color: var(--muted); }
.benchmark-grid { display: grid; grid-template-columns: 58% 42%; align-items: center; }
.benchmark-chart { width: 100%; overflow: visible; }
.chart-heading, .axis-label, .point-label { font: 31px "IBM Plex Sans", sans-serif; fill: var(--ink); }
.chart-heading { font-weight: 500; }
.point-label { font-size: 29px; }
.chart-grid { stroke: #6c7d8540; stroke-width: 1; }
.benchmark-point { fill: #176f64; stroke: var(--paper); stroke-width: 1; }
.error-bar { stroke: #176f64; stroke-width: 2; fill: none; }
.label-leader { stroke: #637981; stroke-width: 1; fill: none; }
.aa-chart { display: block; width: 100%; height: 470px; flex: none; overflow: visible; }
.aa-axis-title, .aa-tick, .aa-model-label, .aa-lab-label, .aa-legend-title { fill: var(--ink); font: 32px "IBM Plex Sans", sans-serif; }
.aa-axis-title, .aa-legend-title { font-weight: 500; }
.aa-model-label, .aa-lab-label { font-size: 30px; }
.aa-model-label { paint-order: stroke; stroke: var(--paper); stroke-width: 7; stroke-linejoin: round; }
.aa-series { fill: none; stroke-width: 3; opacity: .8; }
.aa-point:focus { outline: none; }
.aa-point:focus .aa-marker, .aa-point:hover .aa-marker { stroke: var(--ink); stroke-width: 3; }
.benchmark-reading { padding-left: 26px; }
.benchmark-reading .position-label { font-size: 24px; margin-bottom: 12px; }
.benchmark-reading table { width: 100%; font-size: 28px; border-collapse: collapse; }
.benchmark-reading th { text-align: left; font-weight: 400; }
.benchmark-reading td { text-align: right; font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.benchmark-reading th, .benchmark-reading td { padding: 8px 4px; border-bottom: 1px solid #7b8d9644; vertical-align: top; }
.benchmark-reading thead { font-size: 24px; color: var(--muted); }
.chart-note { font-size: 24px; line-height: 1.3; color: var(--muted) !important; margin-top: 16px !important; }
.blocked-evidence { border: 2px solid #b54e46; padding: 40px; }
.blocked-evidence h2 { font-size: 46px; margin-bottom: 24px; font-weight: 500; }
.blocked-evidence p { font-size: 34px; line-height: 1.35; }
.aws-visual-grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 38px; align-items: center; }
.aws-workbench { display: grid; gap: 24px; }
.aws-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.aws-metrics strong { font-size: 56px; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.aws-metrics p { font-size: 26px; line-height: 1.25; color: var(--muted); margin-top: 10px; }
.layout-aws .compact blockquote { font-size: 36px; }
.layout-aws .compact figcaption { margin-top: 14px; }
.aws-reading .chart-note { margin-top: 22px !important; }
.workflow-machine { display: block; width: 100%; height: 190px; }
.work-rail { stroke: #718b98; stroke-width: 5; fill: none; }
.work-station { fill: #e7e4d9; stroke: #718b98; stroke-width: 2; }
.work-label { fill: var(--ink); font: 32px "IBM Plex Sans", sans-serif; }
.packet-top { fill: #83b9ad; stroke: #176f64; stroke-width: 2; }
.packet-face { fill: #d5e4dc; stroke: #176f64; stroke-width: 2; }
.work-packet { transform: translateX(0); transition: transform 500ms ease-in-out; }
.workflow-run.visible .work-packet, .flat .work-packet { transform: translateX(567px); }
.graphic-caption { font-size: 26px; line-height: 1.25; color: var(--muted) !important; }
.graphic-svg-note { fill: var(--muted); font: 26px "IBM Plex Sans", sans-serif; }
.factory-room { display: grid; gap: 18px; }
.factory-room .compact blockquote { font-size: 36px; }
.factory-room .compact figcaption { font-size: 26px; margin-top: 14px; }
.factory-room .compact figcaption span { font-size: 24px; }
.factory-line { display: block; width: 100%; height: 155px; }
.factory-building { fill: #e7e4d9; stroke: #637981; stroke-width: 3; }
.factory-package { transform: translateX(0); transition: transform 500ms ease-in-out; }
.factory-checkpoint.visible .factory-package, .flat .factory-package { transform: translateX(350px); }
.factory-trace { fill: none; stroke: var(--teal); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms; }
.factory-checkpoint.visible .factory-trace, .flat .factory-trace { stroke-dashoffset: 0; }
.release-barrier { stroke: #9b4b22; stroke-width: 5; }
.release-owner { fill: none; stroke: #9b4b22; stroke-width: 3; }
.factory-caption { font-size: 28px; line-height: 1.25; color: var(--muted) !important; }
.black-box-lab { display: grid; grid-template-columns: 35% 1fr; gap: 46px; align-items: center; }
.mystery-box { padding: 0 32px; }
.mystery-cube { position: relative; height: 220px; width: 290px; background: var(--surface); border: 2px solid var(--lavender); transform: perspective(900px) rotateY(-12deg) rotateX(5deg); box-shadow: 20px 18px 0 #090f15; display: grid; place-items: center; }
.mystery-cube span { font: 74px "IBM Plex Mono", monospace; color: var(--lavender); }
.mystery-cube i { position: absolute; inset: 14px; border: 1px dashed #718b98; }
.mystery-label { font-size: 32px; margin-top: 34px !important; margin-bottom: 10px !important; }
.probe-board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.probe-card { position: relative; border: 2px solid #718b98; padding: 28px 22px; min-height: 150px; transition: border-color 350ms, background 350ms; }
.probe-card h2 { font-size: 34px; font-weight: 500; line-height: 1.2; }
.probe-card p { font-size: 28px; line-height: 1.25; color: var(--muted); margin-top: 16px; max-width: 310px; }
.probe-icon { position: absolute; right: 16px; top: 5px; width: 72px; height: 28px; }
.probe-icon path { fill: none; stroke: var(--lavender); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms; }
.probe-card.visible, .flat .probe-card { border-color: var(--lavender); background: #272c3d; }
.probe-card.visible .probe-icon path, .flat .probe-icon path { stroke-dashoffset: 0; }
.pit-stop-graphic { display: block; width: 100%; height: 320px; }
.pit-label { fill: var(--paper); font: 34px "IBM Plex Sans", sans-serif; }
.pit-floor { stroke: #718b98; stroke-width: 3; }
.pit-cart { fill: #344b54; stroke: var(--teal); stroke-width: 3; }
.pit-wheel { fill: var(--graphite); stroke: #718b98; stroke-width: 4; }
.pit-chip { fill: #614a2f; stroke: var(--amber); stroke-width: 3; transform: translateY(0); transition: transform 500ms; }
.pit-chip path { fill: none; }
.pit-upgrade.visible .pit-chip, .flat .pit-chip { transform: translateY(-18px); }
.bug-observations { opacity: 0; transition: opacity 350ms; }
.pit-upgrade.visible .bug-observations, .flat .bug-observations { opacity: 1; }
.bug-poles { stroke: #718b98; stroke-width: 3; }
.bug-flags { fill: #64362f; stroke: var(--red); stroke-width: 2; }
.brake-assembly { fill: none; stroke: var(--lavender); stroke-width: 4; opacity: .3; transition: opacity 350ms; }
.confidence-path { fill: none; stroke: var(--lavender); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms; }
.pit-brakes.visible .brake-assembly, .flat .brake-assembly { opacity: 1; }
.pit-brakes.visible .confidence-path, .flat .confidence-path { stroke-dashoffset: 0; }
.closing-synthesis { display: grid; gap: 32px; }
.closing-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.closing-card { border-top: 2px solid #718b98; padding: 20px 0 0; }
.synthesis-prism { width: 160px; height: 65px; border: 2px solid var(--teal); background: #244e49; transform: skewY(-6deg); box-shadow: 12px 12px 0 #0a1218; position: relative; margin-bottom: 28px; }
.synthesis-prism i { position: absolute; inset: 12px; border: 1px solid currentColor; color: var(--teal); }
.synthesis-1 .synthesis-prism { background: #614a2f; border-color: var(--amber); }
.synthesis-1 .synthesis-prism i { color: var(--amber); }
.synthesis-2 .synthesis-prism { background: #414765; border-color: var(--lavender); }
.synthesis-2 .synthesis-prism i { color: var(--lavender); }
.closing-card h2 { font-size: 42px; font-weight: 500; }
.closing-card p { font-size: 32px; line-height: 1.3; color: var(--muted); margin-top: 10px; }
.authority-pass { display: flex; justify-content: center; align-items: center; gap: 48px; min-height: 126px; border-top: 1px dashed #718b98; padding-top: 24px; }
.authority-stamp { border: 3px double var(--amber); padding: 14px 22px; color: var(--amber); font: 38px "IBM Plex Mono", monospace; opacity: .2; transform: rotate(-9deg) translateY(14px); transition: opacity 350ms, transform 500ms; }
.authority-pass.visible .authority-stamp, .flat .authority-stamp { opacity: 1; transform: rotate(-6deg); }
.authority-caption { font-size: 30px; line-height: 1.3; color: var(--muted) !important; }
.question-board { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.question-card { padding: 22px 28px; border: 1px solid #718b98; background: var(--surface); }
.question-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: var(--teal); }
.question-card-top svg { width: 50px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }
.question-card-top span { font: 26px "IBM Plex Mono", monospace; }
.question-card h2 { font-size: 36px; line-height: 1.2; font-weight: 400; }
body:not(.flat) .present .question-card { animation: question-arrive 350ms ease-out both; animation-delay: calc(var(--card) * 45ms); }
@keyframes question-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.flat .mystery-cube, .flat .synthesis-prism { transform: none; box-shadow: none; }
.toolbar { position: fixed; z-index: 10; left: 14px; right: 14px; bottom: 8px; display: flex; align-items: center; gap: 8px; opacity: .15; transition: opacity 160ms; font-size: 12px; }
.toolbar:hover, .toolbar:focus-within { opacity: 1; }
.toolbar button, .toolbar a { color: #e9ece7; background: #24323ceb; border: 1px solid #6a8693; border-radius: 4px; padding: 6px 9px; text-decoration: none; }
.toolbar-hint { margin-left: auto; color: #bac8cd; }
dialog { background: var(--graphite); color: var(--paper); border: 1px solid #718b98; border-radius: 12px; padding: 28px; max-width: 850px; width: calc(100% - 56px); max-height: 85vh; overflow: auto; font-size: 18px; }
dialog::backdrop { background: #050a10bb; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.dialog-head h2 { font-size: 28px; font-weight: 500; margin: 0; }
.dialog-head button { background: var(--surface); color: var(--paper); border: 1px solid #718b98; border-radius: 5px; padding: 7px 14px; }
.source-card { padding: 28px 0; border-bottom: 1px solid #718b9877; }
.source-card .position-label { font-size: 15px; margin-bottom: 10px; }
.source-card h3 { font-size: 24px; font-weight: 500; margin: 0; }
.source-card p { font-size: 18px; line-height: 1.45; color: var(--muted); margin: 12px 0; }
.source-card a { color: var(--teal); overflow-wrap: anywhere; }
.source-card .checked-date { font-size: 14px; }
.chapter-link { display: block; width: 100%; text-align: left; background: var(--surface); color: var(--paper); border: 1px solid #607888; border-radius: 7px; margin-top: 18px; padding: 20px; font-size: 24px; }
.chapter-link span { font: 15px "IBM Plex Mono", monospace; color: var(--muted); display: block; margin-top: 8px; }
.load-error { margin: 60px; padding: 30px; border: 2px solid var(--red); font-size: 26px; }
.read-page { overflow: auto; background: #e7e4da; color: var(--ink); }
.read-intro { padding: 42px; max-width: 1100px; margin: auto; }
.read-intro h1 { font-size: 42px; font-weight: 500; }
.read-intro p { font-size: 18px; line-height: 1.5; }
.read-intro a { color: #176f64; }
.read-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 0 32px 48px; }
.read-card { min-width: 0; background: #f8f5ed; box-shadow: 0 2px 12px #18252c1f; border-radius: 6px; overflow: hidden; }
.read-thumbnail { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--graphite); }
.read-thumbnail section { position: absolute; inset: 0; width: 1600px; height: 900px; }
.read-thumbnail .slide-frame { transform-origin: top left; transform: scale(var(--read-scale, .3)); }
.read-thumbnail aside { display: none; }
.read-notes { padding: 24px; font-size: 17px; line-height: 1.5; }
.read-notes h2 { margin: 0 0 12px; font-size: 22px; font-weight: 500; }
.read-notes p { margin: 10px 0; }
.read-notes .budget { font-family: "IBM Plex Mono", monospace; font-size: 14px; }
.read-sources { max-width: 1050px; margin: 0 auto; padding: 0 30px 50px; }
.read-sources .source-card p { color: #46565d; }
.read-sources .source-card a { color: #176f64; }
.flat .atlas-planes { transform: none; width: 250px; height: 385px; top: 100px; left: 30px; }
.flat .atlas-plane { height: 68px; inset: auto 0 auto; top: calc((4 - var(--level)) * 78px); transform: none; box-shadow: none; }
.flat .atlas-plane span { top: 18px; left: 18px; }
.flat .atlas-plane i { display: none; }
.flat .atlas-key { left: 310px; top: 100px; gap: 20px; }
.flat .campaign-card { transform: none; box-shadow: none; }
.flat *, .flat *::before, .flat *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .atlas-planes { transform: none; width: 250px; height: 385px; top: 100px; left: 30px; }
  .atlas-plane { height: 68px; inset: auto 0 auto; top: calc((4 - var(--level)) * 78px); transform: none; box-shadow: none; }
  .atlas-plane span { top: 18px; left: 18px; }
  .atlas-plane i { display: none; }
  .atlas-key { left: 310px; top: 100px; gap: 20px; }
  .campaign-card { transform: none; box-shadow: none; }
}
@media (max-width: 800px) { .read-grid { grid-template-columns: 1fr; padding: 0 16px 30px; } .toolbar-hint { display: none; } }
@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .campaign-shift .demo-view { opacity: 0 !important; visibility: hidden !important; }
  .campaign-shift .customer-view { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .intent-step { border-color: var(--amber); background: #322a20; }
  .connection-build .connection, .pipeline-check path, .memory-return .connection { stroke-dashoffset: 0 !important; }
  .pipeline-step, .memory-step { border-color: var(--teal); background: #1c3532; }
  .moat-water { fill: #193e38; stroke-dashoffset: 0 !important; }
  .moat-records > div { border-color: var(--teal); }
  .moat-action .graphic-arrow { color: var(--teal); }
  .moat-card { border-color: var(--lavender); }
  .moat-card.decision { border-color: var(--amber); }
  .queue-extra { opacity: 1 !important; visibility: visible !important; }
  .gate-brick { fill: #413324; stroke: var(--amber); }
  .reviewer-panel { stroke: var(--amber); }
  .gate-note { opacity: 1 !important; }
  .review-handoff { border-color: var(--teal); }
  .manual-dispatch { opacity: 0 !important; visibility: hidden !important; }
  .automatic-dispatch { opacity: 1 !important; visibility: visible !important; }
  .verification-step:not(.is-complete) { border-color: var(--lavender); background: #2a2f46; }
  .driving-car { transform: translateX(245px) !important; }
  .drive-progress, .drive-sensors { stroke-dashoffset: 0 !important; }
  .collision-comparison .collision-bar, .collision-comparison .comparison-ratio { opacity: 1 !important; }
  .step-wait { display: none !important; }
  .step-done { display: inline !important; }
  .work-packet { transform: translateX(567px) !important; }
  .factory-package { transform: translateX(350px) !important; }
  .factory-trace, .probe-icon path, .confidence-path { stroke-dashoffset: 0 !important; }
  .probe-card { border-color: var(--lavender); background: #272c3d; }
  .pit-chip { transform: translateY(-18px) !important; }
  .bug-observations, .brake-assembly, .authority-stamp { opacity: 1 !important; }
  .authority-stamp { transform: rotate(-6deg) !important; }
  .mystery-cube, .synthesis-prism { transform: none; box-shadow: none; }
  .toolbar, dialog { display: none !important; }
  .atlas-planes { transform: none; width: 250px; height: 385px; top: 100px; left: 30px; }
  .atlas-plane { height: 68px; inset: auto 0 auto; top: calc((4 - var(--level)) * 78px); transform: none; box-shadow: none; }
  .atlas-plane i { display: none; }
  .atlas-key { left: 310px; top: 100px; }
  .campaign-card { transform: none; box-shadow: none; }
  .read-grid { display: block; }
  .read-card { break-inside: avoid; margin-bottom: 28px; box-shadow: none; }
  .read-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}