:root { --navy: #13294b; --orange: #ed7d31; --r-background-color: #151e2c; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #151e2c; color: #fff; font-family: Arial, sans-serif; }
.reveal { height: calc(100% - 54px); background: #151e2c; }
.reveal .slides { text-align: left; }
.reveal .slides > section { width: 1280px; height: 720px; padding: 0; overflow: hidden; background: #fff; }
.reveal .source-slide { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; max-width: none; max-height: none; object-fit: contain; }
.reveal .source-slide.fragment { transition: none; }
.reveal .print-slide { display: none; }
.reveal .progress { height: 3px; color: var(--orange); }
.web-panel { position: absolute; z-index: 3; display: flex; flex-direction: column; background: white; border: 1px solid #bdc8d5; border-radius: 5px; overflow: hidden; }
.web-toolbar { height: 40px; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #eff3f7; color: #263f5b; font: 13px Arial, sans-serif; }
.web-address { min-width: 0; flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: left; }
.web-toolbar button { flex-shrink: 0; padding: 5px 9px; border: 1px solid #bac7d5; border-radius: 4px; color: #173653; background: white; font: 13px Arial, sans-serif; cursor: pointer; }
.web-toolbar button:hover { background: #dfeaf5; }
.web-toolbar button:focus-visible, .deck-controls button:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.study-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.study-tab[aria-pressed="true"] { color: white; background: var(--navy); border-color: var(--navy); }
.study-tab[aria-pressed="true"]:hover { background: #23476d; }
.web-viewport { position: relative; flex: 1; min-height: 0; }
.web-viewport iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; margin: 0; background: white; }
.web-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; padding: 40px; text-align: center; font: 19px/1.5 Arial, sans-serif; color: #405366; background: #fff; pointer-events: none; }
.web-loading[hidden] { display: none; }
.web-panel.is-expanded { left: 1% !important; top: 1% !important; width: 98% !important; height: 98% !important; z-index: 10; }
.comparison-toolbar { height: 52px; min-height: 52px; padding: 8px 14px; gap: 16px; }
.comparison-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #13294b; font: 700 22px/1.2 Arial, sans-serif; }
.comparison-question-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px 9px; margin: 0; border-bottom: 1px solid #cbd7e4; color: #263f5b; background: #fff; font: 16px/1.3 Arial, sans-serif; }
.comparison-question-form label { font-weight: 700; }
.comparison-question { flex: 1; min-width: 140px; height: 36px; padding: 6px 10px; border: 1px solid #a4b6ca; border-radius: 4px; color: #13294b; background: #fff; font: 18px/1.2 Arial, sans-serif; }
.copy-question { padding: 8px 12px; border: 1px solid #13294b; border-radius: 4px; background: #13294b; color: #fff; font: 16px/1.2 Arial, sans-serif; cursor: pointer; }
.copy-question:hover { background: #23476d; }
.copy-question:focus-visible, .comparison-question:focus-visible { outline: 3px solid #ed7d31; outline-offset: 2px; }
.comparison-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; flex: 1; min-height: 0; background: #bac7d5; }
.comparison-site { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; margin: 0; background: #fff; }
.comparison-site-toolbar { justify-content: space-between; height: 44px; min-height: 44px; padding: 6px 14px; background: #e9f0f8; border-top: 3px solid #13294b; }
.comparison-site-toolbar strong { color: #13294b; font: 700 19px/1.2 Arial, sans-serif; }
.comparison-site[data-version="b"] .comparison-site-toolbar { background: #e6f2ff; border-top-color: #75afe0; }
.comparison-site .web-address[hidden] { display: none; }
.comparison-panel:not(.is-expanded) .comparison-question-form { display: none; }
.comparison-panel:not(.is-expanded) .comparison-title { font-size: 16px; }
.comparison-panel:not(.is-expanded) .comparison-toolbar { gap: 6px; padding: 6px; }
.comparison-panel:not(.is-expanded) .comparison-site-toolbar { padding: 5px 7px; }
.comparison-panel:not(.is-expanded) .comparison-site-toolbar strong { font-size: 15px; }
.reveal.overview .web-panel { pointer-events: none; }
.reveal.overview .web-panel iframe { visibility: hidden; }
.deck-controls { position: fixed; bottom: 0; left: 0; width: 100%; height: 54px; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; background: #151e2c; font: 14px Arial, sans-serif; }
.deck-controls button { color: white; background: #ffffff0d; border: 1px solid #ffffff26; border-radius: 5px; cursor: pointer; min-width: 38px; height: 36px; padding: 0 12px; font: 14px Arial, sans-serif; }
.deck-controls button#previous, .deck-controls button#next { font-size: 28px; padding: 0 8px; }
.deck-controls button:hover { background: #ffffff20; }
.deck-controls button:disabled { opacity: .3; cursor: default; }
.divider { width: 1px; height: 22px; background: #ffffff33; margin: 0 5px; }
#counter { min-width: 56px; text-align: center; color: #fff; }
#notice { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 12px 18px; max-width: 80vw; background: var(--navy); border-radius: 6px; font: 15px/1.4 Arial, sans-serif; }
.reveal .authored-slide { position: absolute; inset: 0; color: #000; font: 32px/1.25 Arial, sans-serif; }
.reveal .authored-slide p, .reveal .authored-slide h1, .reveal .authored-slide h2 { margin: 0; font-family: Arial, sans-serif; text-transform: none; letter-spacing: normal; }
/* Cover photographs retain their original pixels; crops and exposure are presentation styles. */
.reveal .cover-title-revision { background: #13294b; }
.cover-simulation { position: absolute; left: 640px; top: 0; width: 640px; height: 720px; overflow: hidden; background: #e9eef1; }
.cover-simulation-image { position: absolute; inset: 0; overflow: hidden; }
/* Native 3440 x 2144 canvas capture; preserve the seedling and wake framing. */
.reveal .cover-simulation-image img { position: absolute; left: -337.7px; top: 0; width: 1155.224px; height: 720px; max-width: none; max-height: none; margin: 0; border: 0; }
.reveal .cover-title-revision .cover-simulation-caption { position: absolute; left: 36px; top: 42px; right: 30px; color: #13294b; font-size: 36px; line-height: 1.2; font-weight: 400; }
.reveal .cover-title-revision .cover-main-title { position: absolute; left: 69.12px; top: 48px; width: 537.6px; color: #ed7d31; font-size: 48px; line-height: 60.9px; font-weight: 400; }
.reveal .cover-title-revision .cover-subtitle { position: absolute; left: 69.12px; top: 310px; width: 537.6px; color: #fff; font-size: 32px; line-height: 1.2; font-style: italic; font-weight: 400; }
.cover-subtitle span { color: #ed7d31; }
.cover-presenter-row { position: absolute; left: 69.12px; top: 410px; width: 545px; display: flex; align-items: center; gap: 18px; }
.cover-portrait-block { position: relative; flex: 0 0 154px; }
.cover-portrait { position: relative; width: 154px; height: 184.8px; overflow: hidden; }
/* Preserve the complete seedling and pot in the original photograph. */
.reveal .cover-portrait img { position: absolute; left: -349.8px; top: -191.4px; display: block; width: 880px; height: auto; max-width: none; max-height: none; margin: 0; border: 0; filter: brightness(1.16); }
.reveal .cover-title-revision .cover-presenter { color: #fff; font-size: 23px; line-height: 30px; font-weight: 400; white-space: nowrap; }
.cover-group { position: absolute; left: 304px; top: 590px; display: flex; align-items: center; gap: 18px; }
.reveal .cover-group .cover-group-logo { display: block; width: 75px; height: auto; max-width: none; max-height: none; margin: 0; border: 0; }
.reveal .cover-title-revision .cover-group-name { color: #fff; font-size: 24px; line-height: 29px; font-weight: 400; }
.cover-group-name span { display: block; }
.cover-group-name strong { color: #ed7d31; font-weight: 700; }
.reveal .cover-title-revision .cover-photo-credit { position: absolute; left: 0; top: calc(100% + 8px); width: 100%; color: #dce5f0; font-size: 13px; line-height: 17px; font-weight: 400; text-align: center; white-space: nowrap; }
.reveal .authored-slide .slide-heading { position: absolute; left: 97.92px; top: 77px; width: 1170px; font-size: 52px; line-height: 1.15; font-weight: 400; white-space: nowrap; }
.reveal .original-page { position: absolute; right: 96px; bottom: 25px; color: #777; font: 16px/1 Arial, sans-serif; }
.cohort-panel { position: absolute; left: 88.32px; top: 210px; width: 338px; height: 384px; padding: 40px 26px; border-radius: 44px; background: #d2e4f5; display: flex; flex-direction: column; justify-content: space-between; }
.reveal .cohort-panel p { font-size: 32px; line-height: 1.3; }
.assignment-list { position: absolute; left: 480px; top: 212px; width: 720px; }
.assignment-row { min-height: 142px; padding: 0 0 28px; margin: 0 0 26px; border-bottom: 2px solid #d2e4f5; }
.assignment-row:last-child { border-bottom: 0; margin-bottom: 0; }
.reveal .assignment-row h2 { color: #156082; font-size: 32px; line-height: 1.25; font-weight: 700; margin-bottom: 16px; }
.reveal .assignment-row p { font-size: 32px; line-height: 1.25; }
.reveal .closing-summary .slide-heading { font-size: 56px; }
.approach-panel { position: absolute; left: 88.32px; width: 500px; padding: 20px; border-radius: 36px; display: flex; align-items: center; }
.approach-integrated { top: 192px; height: 207px; background: #d2e4f5; }
.approach-continuing { top: 440px; height: 209px; background: #d2e4f5; }
.reveal .approach-panel p { font-size: 32px; line-height: 1.25; }
.summary-lab { left: 640px; top: 192px; width: 552px; height: 457px; }
/* Keep the tank's desktop layout visible in the half-slide preview. */
.summary-lab:not(.is-expanded) iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: top left; }
@media (max-width: 480px) { .deck-controls { gap: 4px; } .deck-controls button { padding: 0 7px; font-size: 12px; } .divider { margin: 0; } }
@media print { .deck-controls, #notice, .web-panel, .screen-slide { display: none !important; } .reveal .print-slide { display: block; } .reveal { height: 100%; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }