:root {
  --ink: oklch(0.245 0.025 155);
  --muted: oklch(0.46 0.025 155);
  --paper: oklch(0.965 0.018 90);
  --surface: oklch(0.992 0.008 90);
  --green: oklch(0.36 0.09 155);
  --green-strong: oklch(0.30 0.085 155);
  --green-soft: oklch(0.91 0.035 150);
  --lime: oklch(0.86 0.16 120);
  --gold: oklch(0.78 0.13 82);
  --red: oklch(0.49 0.14 28);
  --line: oklch(0.30 0.025 155 / 0.14);
  --display: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --content: 1320px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: oklch(0.18 0.018 155); color: var(--ink); font-family: var(--sans); }
button, a { font: inherit; }
button { cursor: pointer; }
.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: -.18em; }

.stage-wrap { position: fixed; inset: 0; background: oklch(0.18 0.018 155); }
.stage { width: 1600px; height: 900px; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; overflow: hidden; transform-origin: center; background: var(--paper); box-shadow: 0 20px 80px oklch(0.08 0.01 155 / .38); }
.slide { position: absolute; inset: 0; padding: 58px 92px 62px; display: none; overflow: hidden; color: var(--ink); }
.slide.active { display: block; }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.slide-heading { width: min(100%, 1120px); margin-inline: auto; text-align: center; }
.kicker { margin-block-end: 16px; color: var(--green); font-size: 16px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.title { margin: 0; font-family: var(--display); font-size: 61px; line-height: 1.03; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.lead { width: min(100%, 960px); margin: 38px auto 0; color: var(--muted); font-size: 30px; line-height: 1.4; text-align: center; }
.slide-number { position: absolute; inset-inline-end: 54px; inset-block-end: 32px; z-index: 3; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.source-mark { position: absolute; inset-inline-start: 54px; inset-block-end: 32px; color: var(--muted); font-size: 13px; }
.progress { position: fixed; z-index: 20; inset-inline-start: 0; inset-block-start: 0; height: 5px; background: var(--lime); transition: width .25s ease; }

.cover { display: none; padding: 0 150px; color: var(--surface); background: var(--green-strong); }
.cover.active { display: grid; place-items: center; }
.cover::before { content: ""; position: absolute; width: 620px; height: 620px; inset-inline-start: 50%; inset-block-start: 50%; border: 92px solid var(--lime); border-radius: 50%; opacity: .13; transform: translate(-50%, -50%); }
.cover-copy { position: relative; z-index: 2; width: min(100%, 1120px); text-align: center; }
.cover .kicker { color: var(--lime); }
.cover .title { white-space: pre-line; font-size: 100px; line-height: .95; }
.cover .subtitle { width: min(100%, 760px); margin: 34px auto 0; color: var(--green-soft); font-size: 28px; line-height: 1.4; }
.cover .motif { position: absolute; inset-inline-start: 50%; inset-block-end: 82px; width: 88px; height: 6px; border-radius: 999px; background: var(--gold); transform: translateX(-50%); }

.statement { padding-block-start: 118px; }
.statement .title { font-size: 80px; }
.stamp { width: fit-content; margin: 48px auto 0; padding: 18px 30px; color: var(--surface); background: var(--green); font-size: 22px; font-weight: 800; transform: rotate(-1deg); }

.gate-grid, .compare-grid, .check-layout, .zone-flow, .equip-list, .sequence-list,
.decision-grid, .cut-layout, .flow-line, .signal-grid, .pillar-grid, .question-list,
.scenario-text, .answers { width: min(100%, var(--content)); margin-inline: auto; }

.gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-block-start: 58px; }
.gate { min-height: 350px; padding: 32px; text-align: center; background: var(--surface); border-block-start: 7px solid var(--green); position: relative; }
.gate-no { color: var(--green); font-family: var(--display); font-size: 27px; }
.gate h3 { margin: 76px 0 18px; font-family: var(--display); font-size: 40px; font-weight: 600; }
.gate p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.42; }
.gate::after { content: "→"; position: absolute; inset-inline-end: -30px; inset-block-start: 154px; z-index: 2; color: var(--gold); font-size: 30px; font-weight: 900; }
.gate:last-child::after { display: none; }

.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-block-start: 46px; }
.compare-col { min-height: 480px; padding: 30px; background: var(--surface); border-block-start: 7px solid var(--green); }
.compare-col.bad { border-color: var(--red); }
.compare-col.warn { border-color: var(--gold); }
.compare-col h3 { margin: 0 0 26px; font-family: var(--display); font-size: 36px; text-align: center; }
.compare-col ul { margin: 0; padding: 0; list-style: none; }
.compare-col li { padding: 16px 0 16px 32px; font-size: 20px; line-height: 1.34; position: relative; }
.compare-col li + li { border-block-start: 1px solid var(--line); }
.compare-col li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--green); font-weight: 900; }
.compare-col.bad li::before { content: "×"; color: var(--red); }
.compare-col.warn li::before { content: "?"; color: oklch(0.48 0.12 82); }

.check-layout { display: grid; grid-template-columns: 1.45fr .72fr; gap: 48px; margin-block-start: 42px; align-items: stretch; }
.checks { display: grid; align-content: center; }
.check-row { display: grid; grid-template-columns: 185px 1fr; gap: 24px; padding: 18px 0; }
.check-row + .check-row { border-block-start: 1px solid var(--line); }
.check-row strong { color: var(--green); font-size: 18px; text-transform: uppercase; letter-spacing: .08em; }
.check-row span { font-size: 21px; line-height: 1.35; }
.aside-block { display: grid; place-items: center; padding: 38px; color: var(--surface); background: var(--green); font-family: var(--display); font-size: 37px; line-height: 1.14; text-align: center; }

.zone-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-block-start: 62px; }
.zone { min-height: 300px; padding: 34px; color: var(--surface); background: var(--green-strong); position: relative; text-align: center; }
.zone:nth-child(2) { background: var(--green); }
.zone:nth-child(3) { background: oklch(0.47 0.085 155); }
.zone::after { content: "→"; position: absolute; inset-inline-end: -27px; inset-block-start: 124px; z-index: 2; color: var(--gold); font-size: 38px; }
.zone:last-child::after { display: none; }
.zone h3 { margin: 66px 0 18px; font-family: var(--display); font-size: 40px; }
.zone p { margin: 0; color: var(--green-soft); font-size: 20px; line-height: 1.5; }
.zone-footer { width: min(100%, 1080px); margin: 32px auto 0; color: var(--green); font-size: 22px; font-weight: 750; text-align: center; }

.equip-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 52px; margin-block-start: 46px; }
.equip-item { padding: 24px 28px; display: grid; grid-template-columns: 150px 1fr; gap: 22px; background: var(--surface); }
.equip-item h3 { margin: 0; color: var(--green); font-family: var(--display); font-size: 30px; }
.equip-item p { margin: 0; font-size: 20px; line-height: 1.4; }
.warning-bar { width: min(100%, var(--content)); margin: 28px auto 0; padding: 16px 26px; color: var(--surface); background: var(--red); font-size: 20px; font-weight: 750; text-align: center; }

.sequence-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-block-start: 68px; }
.sequence-step { min-height: 320px; padding: 28px 24px; background: var(--surface); border-block-start: 6px solid var(--green); position: relative; text-align: center; }
.sequence-step .num { color: var(--green); font-family: var(--display); font-size: 25px; }
.sequence-step h3 { margin: 72px 0 16px; font-family: var(--display); font-size: 34px; }
.sequence-step p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.4; }

.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-block-start: 42px; }
.decision-side { min-height: 380px; padding: 34px 38px; background: var(--surface); border-block-start: 7px solid var(--green); text-align: center; }
.decision-side:last-child { border-color: var(--gold); }
.decision-side .label { color: var(--green); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.decision-side h3 { margin: 48px 0 22px; font-family: var(--display); font-size: 36px; }
.decision-side ul { width: fit-content; margin-inline: auto; text-align: start; }
.decision-side li { margin: 13px 0; font-size: 20px; line-height: 1.35; }
.decision-rule { margin: 26px auto 0; color: var(--red); font-size: 22px; font-weight: 850; text-align: center; }

.cut-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 46px; margin-block-start: 42px; }
.requirements { columns: 2; column-gap: 32px; counter-reset: req; }
.requirement { break-inside: avoid; min-height: 120px; padding: 18px 0 18px 52px; font-size: 20px; line-height: 1.4; position: relative; }
.requirement:nth-child(n+2) { border-block-start: 1px solid var(--line); }
.requirement::before { counter-increment: req; content: counter(req); position: absolute; inset-inline-start: 0; inset-block-start: 15px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--surface); background: var(--green); font-weight: 800; }
.anatomy { padding: 34px; color: var(--surface); background: var(--green-strong); }
.anatomy h3 { margin: 0 0 32px; color: var(--lime); text-transform: uppercase; letter-spacing: .1em; font-size: 16px; text-align: center; }
.anatomy-pair { display: grid; grid-template-columns: 130px 1fr; padding: 20px 0; }
.anatomy-pair + .anatomy-pair { border-block-start: 1px solid oklch(0.98 0.01 150 / .22); }
.anatomy-pair strong { font-family: var(--display); font-size: 26px; }
.anatomy-pair span { color: var(--green-soft); font-size: 18px; }

.flow-line { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-block-start: 62px; }
.flow-step { min-height: 335px; padding: 30px 20px; background: var(--surface); border-block-start: 6px solid var(--green); position: relative; text-align: center; }
.flow-step::after { content: "→"; position: absolute; inset-inline-end: -18px; inset-block-start: 47px; z-index: 2; color: var(--red); font-size: 26px; font-weight: 900; }
.flow-step:last-child::after { display: none; }
.flow-step .num { color: var(--green); font-weight: 800; }
.flow-step h3 { margin: 92px 0 14px; font-family: var(--display); font-size: 27px; }
.flow-step p { color: var(--muted); font-size: 17px; line-height: 1.4; }

.signal-grid, .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-block-start: 58px; }
.signal, .pillar { min-height: 320px; padding: 30px 26px; background: var(--surface); border-block-start: 7px solid var(--green); text-align: center; }
.signal h3, .pillar h3 { margin: 76px 0 18px; font-family: var(--display); font-size: 35px; }
.signal p, .pillar p { margin: 0; color: var(--muted); font-size: 19px; line-height: 1.42; }
.caveat { margin: 30px auto 0; color: var(--green); font-size: 22px; font-weight: 800; text-align: center; }
.pillar:nth-child(2) { border-color: oklch(0.46 0.10 155); }
.pillar:nth-child(3) { border-color: var(--gold); }
.pillar:nth-child(4) { border-color: var(--red); }

.scenario-text { margin-block-start: 44px; font-family: var(--display); font-size: 37px; line-height: 1.37; text-align: center; text-wrap: balance; }
.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 28px; margin-block-start: 28px; opacity: 0; transform: translateY(12px); transition: .3s ease; }
.answers.visible { opacity: 1; transform: none; }
.answer { padding: 14px 18px 14px 42px; background: var(--surface); font-size: 17px; position: relative; }
.answer::before { content: "×"; position: absolute; inset-inline-start: 18px; color: var(--red); font-weight: 900; }
.reveal-button { display: block; min-height: 48px; margin: 30px auto 0; border: 0; padding: 0 24px; color: var(--surface); background: var(--green); font-weight: 800; }

.question-list { margin-block-start: 42px; }
.question-row { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 20px 28px; background: var(--surface); }
.question-row + .question-row { margin-block-start: 14px; }
.question-row strong { color: var(--green); font-family: var(--display); font-size: 27px; }
.question-row span { font-size: 24px; }
.closing-line { width: fit-content; margin: 28px auto 0; padding: 16px 26px; color: var(--surface); background: var(--green); font-family: var(--display); font-size: 26px; }

.audience-help { position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: 30; display: flex; gap: 12px; opacity: 0; transition: opacity .2s; }
body:hover .audience-help, .audience-help:focus-within { opacity: 1; }
.audience-help button { width: 44px; height: 44px; border: 1px solid oklch(0.96 0.01 150 / .25); color: var(--surface); background: oklch(0.16 0.015 155 / .82); border-radius: 50%; display: grid; place-items: center; }
.audience-help .icon { width: 20px; height: 20px; }

@media (max-width: 720px) { .audience-help { opacity: 1; } }

@media print {
  html, body { overflow: visible; background: var(--surface); }
  .stage-wrap { position: static; display: block; background: var(--surface); }
  .stage { width: 1600px; height: auto; transform: none !important; box-shadow: none; }
  .slide { position: relative; display: block !important; width: 1600px; height: 900px; page-break-after: always; }
  .progress, .audience-help { display: none !important; }
}