:root {
  --paper: #eef0f3;
  --ink: #111827;
  --muted: #667085;
  --blue: #2f5bff;
  --orange: #ff5a36;
  --line: #cbd0da;
  --white: #fff;
  --shadow: 0 18px 48px rgba(17, 24, 39, .16);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
button { font: inherit; }
.deck { position: relative; width: 100vw; height: 100vh; }
.slide { position: absolute; inset: 0; display: none; align-content: center; gap: 1rem; width: 100vw; height: 100vh; padding: clamp(2.75rem, 6vw, 5.5rem) clamp(2.2rem, 8vw, 8rem) 6.8rem; overflow: hidden; }
.slide.active { display: grid; animation: reveal .28s ease-out; }
.slide > * { max-width: 1120px; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eyebrow { color: var(--orange); font-size: clamp(.75rem, 1vw, .92rem); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: .2rem 0 1.4rem; font-size: clamp(3.8rem, 8.6vw, 8.5rem); line-height: .86; letter-spacing: -.075em; }
h1 span { color: var(--blue); }
h2 { margin: .5rem 0 1.5rem; max-width: 1080px; font-size: clamp(2.4rem, 5.2vw, 5.4rem); line-height: .96; letter-spacing: -.055em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); }
p, li { font-size: clamp(1.05rem, 1.75vw, 1.48rem); line-height: 1.42; }
.lede { max-width: 780px; color: var(--muted); font-size: clamp(1.35rem, 2.3vw, 2rem); }
.statement { max-width: 900px; color: #c8d0e3; font-size: clamp(1.45rem, 2.6vw, 2.3rem); }
.caption { max-width: 900px; color: var(--muted); font-size: clamp(.96rem, 1.35vw, 1.18rem); }
.title-slide { background: linear-gradient(90deg, transparent 0 67%, rgba(47,91,255,.13) 67% 68%, transparent 68%), linear-gradient(var(--paper), var(--paper)); }
.title-slide::after { content: ""; position: absolute; right: 8vw; top: 12vh; width: min(22vw, 280px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); mix-blend-mode: multiply; }
.title-index { display: flex; gap: .6rem; margin-top: 2rem; }
.title-index span { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-weight: 750; }
.dark-slide { color: white; background: var(--ink); }
.dark-slide::after { content: ""; position: absolute; right: -8vw; bottom: -24vw; width: 46vw; height: 46vw; border: 3.5vw solid var(--blue); border-radius: 50%; opacity: .75; }
.dark-slide > * { position: relative; z-index: 1; }

.definition-row, .cards, .job-grid, .balance, .fidelity { display: grid; gap: 1rem; margin-top: 1.2rem; }
.definition-row, .cards.three, .fidelity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.definition-row > div { border-top: 3px solid var(--ink); padding-top: 1rem; }
.definition-row span, .job-grid em { color: var(--orange); font-size: .9rem; font-style: normal; font-weight: 850; }
.definition-row p, .cards p, .job-grid p, .fidelity p { color: var(--muted); font-size: clamp(.95rem, 1.35vw, 1.18rem); }
.cards article, .job-grid article, .fidelity article { padding: 1.5rem; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cards b, .fidelity b { display: block; margin-bottom: .7rem; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.cards small { color: var(--blue); font-size: 1rem; font-weight: 800; }

.image-slide { background-position: center; background-size: cover; }
.identity-image { background-image: url("assets/identity-system.png"); }
.environment-image { background-image: url("assets/environmental-system.png"); }
.comparison-image { background-image: url("assets/decorative-vs-instructional.png"); }
.image-copy { width: min(620px, 62vw); padding: clamp(1.3rem, 2.5vw, 2.4rem); backdrop-filter: blur(15px); }
.light-panel { margin-right: auto; color: var(--ink); background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.85); }
.dark-panel { margin-left: auto; color: white; background: rgba(17,24,39,.82); border: 1px solid rgba(255,255,255,.14); }
.image-copy h2 { font-size: clamp(2rem, 4vw, 4.2rem); }
.image-copy p { margin-bottom: 0; font-size: clamp(.98rem, 1.35vw, 1.22rem); }
.bottom-panel { align-self: end; margin: 0 auto; width: min(940px, 82vw); color: white; background: rgba(17,24,39,.84); text-align: center; }
.bottom-panel h2 { margin-bottom: 0; }
.compare-labels { position: absolute; inset: 2.5rem 0 auto; display: grid; max-width: none; grid-template-columns: 1fr 1fr; color: var(--ink); font-size: 1rem; font-weight: 900; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.compare-labels span:last-child { color: white; }

.bridge { display: grid; align-items: center; grid-template-columns: 1fr auto 1fr; gap: 1.3rem; margin-top: 1.8rem; }
.bridge > div { min-height: 170px; padding: 1.7rem; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bridge strong { display: block; margin-bottom: .9rem; color: var(--blue); font-size: 1.25rem; }
.bridge span { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.4; }
.bridge i { color: var(--orange); font-size: 2.7rem; font-style: normal; }
.job-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.job-grid article:nth-child(even) { transform: translateY(1.6rem); }

.filter-list { display: grid; gap: .1rem; margin-top: 1rem; }
.filter-list div { display: grid; grid-template-columns: 210px 1fr; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line); }
.filter-list span { color: var(--blue); font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 850; }
.filter-list p { margin: 0; }
.ecosystem { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 2rem; background: var(--ink); border: 1px solid var(--ink); }
.ecosystem div { min-height: 190px; padding: 1.4rem; background: var(--paper); }
.ecosystem b, .ecosystem span { display: block; }
.ecosystem b { margin-bottom: 4.5rem; color: var(--blue); font-size: 1.25rem; }
.ecosystem span { color: var(--muted); line-height: 1.45; }

.realism-stack { display: grid; gap: .65rem; }
.realism-stack div { display: grid; grid-template-columns: 180px 1fr; padding: 1rem 1.2rem; background: white; border-left: 7px solid var(--blue); }
.realism-stack span { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.consistency-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.consistency-demo > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 1.4rem; background: white; border: 1px solid var(--line); }
.consistency-demo span { height: 92px; background: var(--blue); }
.locked span:nth-child(2) { border-radius: 50%; }
.locked span:nth-child(3) { background: var(--ink); }
.flex span:nth-child(1) { clip-path: polygon(0 0,100% 0,75% 100%,0 78%); }
.flex span:nth-child(2) { height: 65px; align-self: end; background: var(--orange); }
.flex span:nth-child(3) { border-radius: 50% 50% 0 0; }
.consistency-demo small, .consistency-demo b { grid-column: 1 / -1; }
.consistency-demo small { margin-top: .5rem; color: var(--orange); font-weight: 850; text-transform: uppercase; }
.equation { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; font-size: clamp(1.25rem, 2.6vw, 2.3rem); }
.equation span, .equation strong { padding: 1.1rem 1.4rem; background: white; border: 1px solid var(--line); }
.equation b { color: var(--orange); }
.equation strong { color: white; background: var(--blue); }

.balance { grid-template-columns: 1fr 1fr; }
.balance div { min-height: 210px; padding: 1.7rem; background: white; border-top: 9px solid var(--blue); }
.balance .minus { border-color: var(--orange); }
.balance b { font-size: 1.35rem; }
.balance p { color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.25rem); }
.instruction-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.instruction-map div { display: grid; grid-template-columns: 100px 1fr; align-items: center; padding: 1.25rem; background: white; border: 1px solid var(--line); }
.instruction-map span { color: var(--orange); font-weight: 850; text-transform: uppercase; }
.instruction-map b { font-size: clamp(1.1rem, 1.65vw, 1.42rem); }
.annotation-pair { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; }
.annotation-pair article { padding: 1.7rem; background: white; border: 1px solid var(--line); }
.annotation-pair small { display: inline-block; margin-bottom: 1rem; color: white; background: var(--muted); padding: .35rem .6rem; font-weight: 850; }
.annotation-pair .strong { border: 3px solid var(--blue); }
.annotation-pair .strong small { background: var(--blue); }
.annotation-pair p { margin: 0; }

.spread-anatomy { display: grid; grid-template-columns: .72fr 1.4fr .58fr; grid-template-rows: 1fr .55fr; gap: .6rem; height: min(48vh, 390px); padding: .7rem; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.spread-anatomy > div { position: relative; padding: 1rem; background: #e5e8ef; color: var(--muted); font-weight: 800; }
.spread-copy { grid-row: 1 / 3; }
.spread-copy span { display: block; margin-bottom: 2.5rem; color: var(--ink); font-size: 1.6rem; }
.spread-copy i { display: block; width: 85%; height: 5px; margin: .55rem 0; background: #b9c0cd; }
.spread-copy small { position: absolute; bottom: 1rem; }
.spread-visual { grid-row: 1 / 3; background: var(--blue) !important; color: white !important; }
.spread-detail { background: var(--orange) !important; color: white !important; }
.fidelity article { box-shadow: none; border-top: 8px solid var(--blue); }
.fidelity article:nth-child(2) { border-color: #738cff; }
.fidelity article:nth-child(3) { border-color: var(--orange); }
.fidelity span { display: inline-block; margin-bottom: 2.3rem; color: var(--muted); font-weight: 850; text-transform: uppercase; }
.digital-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.digital-points div { padding: 1.35rem; background: white; border-left: 6px solid var(--blue); }
.digital-points b, .digital-points span { display: block; }
.digital-points b { margin-bottom: .45rem; font-size: 1.25rem; }
.digital-points span { color: var(--muted); font-size: 1.05rem; line-height: 1.4; }
.production-flow { display: flex; align-items: center; gap: .8rem; margin: 2rem 0; }
.production-flow span { padding: 1rem 1.1rem; background: white; border: 1px solid var(--line); font-weight: 850; }
.production-flow i { color: var(--orange); font-size: 2rem; font-style: normal; }
.failure-list { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.failure-list span { padding: .85rem 1rem; color: white; background: var(--ink); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 760; }
.failure-list span:nth-child(3n + 2) { background: var(--blue); }
.failure-list span:nth-child(3n) { background: var(--orange); }
.sequence { display: grid; grid-template-columns: repeat(5,1fr); gap: .7rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sequence li { min-height: 180px; padding: 1rem; background: white; border-top: 7px solid var(--blue); }
.sequence span, .sequence b { display: block; }
.sequence span { margin-bottom: 4rem; color: var(--orange); font-size: .9rem; }
.sequence b { font-size: clamp(1rem, 1.4vw, 1.2rem); }
.final-slide { color: white; background: var(--blue); }
.final-slide .eyebrow { color: #ffad99; }
.final-slide h2 { max-width: 1000px; font-size: clamp(2.7rem, 5.8vw, 6rem); }
.final-mark { position: absolute; right: 7vw; bottom: 13vh; display: flex; gap: .6rem; transform: rotate(-12deg); }
.final-mark i { display: block; width: 90px; height: 180px; border-radius: 90px 0 0 90px; background: white; }
.final-mark i:last-child { width: 110px; height: 110px; align-self: end; border-radius: 50%; background: var(--orange); }

.notes { display: none; }
.controls { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto auto minmax(150px,1fr) auto auto auto auto auto; align-items: center; gap: .45rem; min-height: 72px; padding: .75rem 1.1rem; color: white; background: rgba(17,24,39,.95); backdrop-filter: blur(14px); transition: transform .22s ease; }
.controls button, .show-controls { padding: .65rem .8rem; color: white; background: transparent; border: 1px solid #4a5368; border-radius: 5px; cursor: pointer; }
.controls button:hover, .controls button:focus-visible, .show-controls:hover { border-color: white; background: rgba(255,255,255,.08); }
.controls button:disabled { opacity: .35; cursor: default; }
.slide-status { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.slide-status > span { overflow: hidden; color: #b7c0d3; text-overflow: ellipsis; white-space: nowrap; }
.progress-track { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #31394c; }
.progress-bar { width: 3.8%; height: 100%; background: var(--orange); transition: width .25s ease; }
.show-controls { position: fixed; z-index: 19; right: 1rem; bottom: 1rem; display: none; background: var(--ink); }
.controls-collapsed .controls { transform: translateY(100%); }
.controls-collapsed .show-controls { display: block; }
.show-notes .slide.active { padding-right: min(38vw, 520px); }
.show-notes .slide.active .notes { position: fixed; z-index: 15; top: 1rem; right: 1rem; bottom: 5.7rem; display: block; width: min(34vw, 470px); overflow: auto; padding: 1.35rem; color: var(--ink); background: rgba(255,255,255,.97); border: 1px solid var(--line); box-shadow: var(--shadow); }
.notes strong, .notes span { display: block; }
.notes strong { margin-bottom: .7rem; color: var(--blue); }
.notes span { font-size: 1rem; line-height: 1.5; }
.presenter-preview { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.2rem; }
.presenter-preview div { padding: .75rem; background: var(--paper); }
.presenter-preview small { display: block; margin-bottom: .3rem; color: var(--muted); text-transform: uppercase; }
.presenter-preview b { font-size: .88rem; }

.overview { width: min(1120px, 92vw); max-height: 86vh; padding: 0; color: var(--ink); background: var(--paper); border: 0; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.overview::backdrop { background: rgba(17,24,39,.72); }
.overview header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; align-items: start; padding: 1.4rem 1.6rem; background: rgba(238,240,243,.96); border-bottom: 1px solid var(--line); }
.overview h2 { margin: .2rem 0 0; font-size: 2rem; }
.overview header small { color: var(--blue); font-weight: 850; }
.overview header button { color: var(--ink); background: white; border: 1px solid var(--line); font-size: 1.3rem; }
.overview-grid { display: grid; gap: 1.3rem; padding: 1.6rem; }
.overview-section h3 { margin-bottom: .6rem; color: var(--orange); }
.overview-list { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
.overview-list button { min-height: 88px; padding: .8rem; text-align: left; background: white; border: 1px solid var(--line); cursor: pointer; }
.overview-list button[aria-current="true"] { color: white; background: var(--blue); border-color: var(--blue); }
.overview-list small, .overview-list strong { display: block; }
.overview-list small { margin-bottom: .35rem; opacity: .7; }

@media (max-width: 800px) {
  .slide { padding: 2rem 1.35rem 6.5rem; }
  h1 { font-size: clamp(3.1rem, 15vw, 5.5rem); }
  h2 { font-size: clamp(2rem, 9.5vw, 3.6rem); }
  .definition-row, .cards.three, .job-grid, .fidelity, .ecosystem, .sequence { grid-template-columns: 1fr 1fr; }
  .bridge { grid-template-columns: 1fr; }
  .bridge i { transform: rotate(90deg); justify-self: center; }
  .filter-list div { grid-template-columns: 1fr; gap: .3rem; }
  .image-copy { width: 92vw; }
  .production-flow { flex-wrap: wrap; }
  .controls { grid-template-columns: auto minmax(100px,1fr) auto auto; }
  .controls #overviewToggle, .controls #notesToggle, .controls #fullscreenToggle, .controls #printButton { display: none; }
  .overview-list { grid-template-columns: 1fr 1fr; }
}

@media print {
  @page { size: 16in 9in; margin: 0; }
  body { overflow: visible; background: white; }
  .deck { height: auto; }
  .slide, .slide.active { position: relative; display: grid !important; width: 16in; height: 9in; break-after: page; padding-bottom: .75in; animation: none; }
  .controls, .show-controls, .overview, .notes { display: none !important; }
}

@media (prefers-reduced-motion: reduce) { .slide.active { animation: none; } }