:root {
  color-scheme: dark;
  --background: #100f0f;
  --text: #cecdc3;
  --muted: #878580;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--background);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: grid; place-items: center; overflow: hidden; }
#deck { width: min(100vw, 177.777778dvh); aspect-ratio: 16 / 9; position: relative; container-type: inline-size; }
.slide { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; mask-size: 100% 100%; mask-repeat: no-repeat; }
[hidden] { display: none !important; }
h1, h2, p, pre { margin: 0; font: inherit; }
h1, h2 { text-align: center; font-size: 4.2cqw; font-weight: 400; line-height: 1.35; }
h2 { font-size: 3.8cqw; white-space: nowrap; }
.typewriter { display: inline-block; white-space: pre; text-align: left; }
.title { color: #fc3; }
.ascii-title { display: block; font-size: 1.52cqw; line-height: 1; }
.ascii-title pre { white-space: pre; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.ascii-title pre + pre { margin-top: -3em; }
.date { position: absolute; bottom: 3.2cqw; width: 100%; text-align: center; font-size: 1.45cqw; color: var(--muted); }
/* The question starts centered, then makes room for the examples. */
.question-slide h2 { transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.question-slide.expanded h2 { transform: translateY(-18.4cqw) scale(.72); }
.examples { position: absolute; top: 22cqw; left: 6cqw; width: 34cqw; margin: 0; font-size: 2cqw; line-height: 1.85; }
.examples > div { display: grid; grid-template-columns: 12cqw minmax(0, 1fr); gap: 1.8cqw; }
.examples dt { color: var(--muted); }
.examples dd { margin: 0; }
.client-server-diagram { position: absolute; top: 17cqw; left: 43cqw; width: 52.3cqw; margin: 0; }
.client-server-scene { position: relative; width: 136ch; height: 36em; font-size: .64cqw; line-height: 1; }
.client-server-art { position: absolute; font: inherit; white-space: pre; color: var(--muted); user-select: none; }
.client-server-laptop { left: 0; top: 6em; }
.client-server-rack { left: 98ch; top: 6em; }
.client-server-label { position: absolute; top: 0; text-align: center; }
.client-server-label p { font-size: 1.3cqw; line-height: 1.35; }
.client-server-label-client { left: 0; width: 64ch; }
.client-server-label-server { left: 98ch; width: 38ch; }
.client-server-screen-label, .client-server-data-label { position: absolute; text-align: center; color: #fc3; }
.client-server-screen-label { left: 11ch; top: 12em; width: 44ch; }
.client-server-data-label { left: 100ch; top: 18em; width: 32ch; }
.client-server-screen-label p, .client-server-data-label p { font-size: .95cqw; line-height: 1.2; }
.client-server-flow-label { position: absolute; left: 64ch; width: 34ch; text-align: center; color: var(--muted); }
.client-server-flow-label p { font-size: 1cqw; line-height: 1.4; }
.client-server-request-label { top: 12.7em; }
.client-server-response-label { top: 18.7em; }
.client-server-wire { left: 64ch; color: #575653; }
.client-server-request-wire, .client-server-request-packet { top: 16em; }
.client-server-response-wire, .client-server-response-packet { top: 22em; }
.client-server-packet { left: 64ch; color: #fc3; }
.news-slide { display: flex; flex-direction: column; align-items: stretch; padding: 4cqw 5cqw; gap: 3cqw; }
.news-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3.2cqw; transform: translateY(-50%) scale(1.18); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.news-slide.expanded h2 { transform: translateY(-24cqw); }
.news-columns { margin-top: 7cqw; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 4cqw; align-items: start; }
.headlines { display: grid; gap: 2.3cqw; }
.news-meta { font-size: 1.15cqw; color: var(--muted); margin-bottom: .55cqw; }
.headlines h3 { font: inherit; font-size: 1.85cqw; line-height: 1.25; margin: 0 0 .6cqw; }
.headlines article > p:last-child { font-size: 1.3cqw; line-height: 1.4; color: var(--muted); }
.headlines a { color: inherit; text-decoration: none; }
.headlines a:hover, .headlines a:focus-visible { color: #fc3; }
.unidraw-panel { border-left: 1px solid #403e3c; padding-left: 2.5cqw; }
.unidraw-panel h3 { font: inherit; font-size: 2.2cqw; margin: 0; }
.unidraw-panel a { color: inherit; text-decoration: none; }
.unidraw-panel a:hover, .unidraw-panel a:focus-visible { color: #fc3; }
.unidraw-period { color: var(--muted); font-size: 1.2cqw; margin-top: .6cqw; }
.recovery-duration { font-size: 2.05cqw; color: #fc3; margin-top: 1.8cqw; }
.incident-list { list-style: none; margin: 2cqw 0 0; padding: 0; display: grid; gap: 1.7cqw; }
.incident-list li { display: grid; grid-template-columns: 5.2cqw 1fr; gap: 1.2cqw; font-size: 1.45cqw; line-height: 1.45; }
.incident-list time { color: #d0a215; }
.doom-fire { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 1.05cqw; line-height: .85; white-space: pre; pointer-events: none; user-select: none; color: #da702c; background: linear-gradient(to bottom, #af3029, #da702c 55%, #fc3); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* Map paper white to Flexoki black and ink to the deck's warm foreground. */
.presentation-filters { position: absolute; width: 0; height: 0; pointer-events: none; }
/* Preserve the bitmap proportions while panning between three views. */
.infrastructure-image { filter: url(#infrastructure-flexoki); position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform-origin: 50% 0; transform: translate(-50%, 0) scale(2); }
.infrastructure-slide.is-middle .infrastructure-image { transform: translate(-50%, -50%) scale(2); }
.infrastructure-slide.is-bottom .infrastructure-image { transform: translate(-50%, -100%) scale(2); }
.access-slide { padding: 4cqw 7cqw; display: flex; flex-direction: column; }
.access-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3.2cqw; transform: translateY(-50%) scale(1.18); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.access-slide.expanded h2 { transform: translateY(-24cqw); }
.access-columns { flex: 1; min-height: 0; margin-top: 7cqw; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 37fr); gap: 4cqw; align-items: center; }
.access-countries article + article { margin-top: 1.35cqw; }
.access-countries h3 { font: inherit; font-size: 1.8cqw; font-weight: 600; margin: 0 0 .45cqw; }
.access-countries a { color: inherit; text-decoration: none; }
.access-countries a:hover, .access-countries a:focus-visible { color: #fc3; }
.access-meta { font-size: 1.05cqw; color: var(--muted); margin-bottom: .65cqw; }
.access-countries article > p:last-child { font-size: 1.3cqw; line-height: 1.4; color: #b7b5ac; }
.heartbeat { font-size: .85cqw; line-height: 1.15; white-space: pre; color: #fc3; pointer-events: none; user-select: none; }
.services-slide { padding: 4cqw 7cqw; display: flex; flex-direction: column; align-items: stretch; }
.services-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3.2cqw; transform: translateY(-50%) scale(1.18); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.services-slide.expanded h2 { transform: translateY(-24cqw); }
.service-list { flex: 1; min-height: 0; margin-top: 7cqw; display: grid; align-content: center; }
.service-row { display: grid; grid-template-columns: 15cqw 11cqw minmax(0, 1fr); gap: 3cqw; align-items: center; min-height: 7.4cqw; border-bottom: 1px solid #282726; }
.service-row:last-child { border-bottom: 0; }
.service-row h3 { font: inherit; font-size: 2.4cqw; margin: 0; }
.service-row a { color: inherit; text-decoration: none; }
.service-row a:hover, .service-row a:focus-visible { color: #fc3; }
.service-wire { font-size: 1.45cqw; line-height: 1; color: var(--muted); white-space: pre; }
.is-cut .service-wire { color: #fc3; }
.service-message { display: grid; align-items: center; min-height: 5cqw; }
.service-preview, .service-event { grid-area: 1 / 1; }
.service-preview { font-size: 1.7cqw; color: var(--muted); white-space: pre; }
.is-cut .service-preview { color: #fc3; }
.service-reason { font-size: 1.7cqw; line-height: 1.3; color: #fc3; }
.service-consequence { margin-top: .55cqw; font-size: 1.2cqw; line-height: 1.45; color: #b7b5ac; }
.service-event { animation: service-reveal 300ms ease-out both; }
.local-slide h2, .building-slide h2 { font-size: 3.1cqw; color: #fc3; }
.architecture-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3.2cqw; transform: translateY(-50%) scale(1.18); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.architecture-slide.expanded h2 { transform: translateY(-24cqw); }
.architecture-body { position: absolute; inset: 11cqw 7cqw 4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; }
.architecture-mode { display: grid; text-align: center; font-size: 2.1cqw; color: #fc3; }
.architecture-mode span { grid-area: 1 / 1; }
.architecture-diagram { position: relative; flex: none; width: 240ch; height: 72em; margin-inline: auto; font-size: .5cqw; line-height: 1; }
.architecture-art { position: absolute; font: inherit; line-height: 1; white-space: pre; pointer-events: none; user-select: none; }
.architecture-cloud { left: 80ch; top: 0; color: var(--muted); }
.architecture-device { top: 20em; color: #b7b5ac; }
.device-left { left: 2ch; }
.device-right { left: 174ch; }
.architecture-wire { top: 18em; color: #575653; }
.wire-left { left: 62ch; }
.wire-right { left: 150ch; }
.diagram-label { position: absolute; display: grid; transform: translateX(-50%); white-space: nowrap; text-align: center; color: var(--muted); }
.diagram-label span { grid-area: 1 / 1; font-size: 1.45cqw; line-height: 1.3; }
.cloud-label { left: 50%; top: 22em; }
.device-label { top: 48em; }
.device-label span { font-size: 1.65cqw; }
.device-label-left { left: 14.166667%; }
.device-label-right { left: 85.833333%; }
.connection-label { top: 15em; }
.connection-label span { font-size: 1.25cqw; }
.connection-label-left { left: 24.166667%; }
.connection-label-right { left: 75%; }
.cloud-label-cloud, .device-label-local { color: #fc3; }
.primary-db { --travel-columns: 80; left: 104ch; top: 6em; color: #fc3; background: var(--background); transition: left 1100ms steps(var(--travel-columns), end), top 1100ms steps(19, end), opacity 200ms; }
.db-right { --travel-columns: 92; opacity: 0; }
.backup-db { left: 104ch; top: 6em; color: var(--muted); background: var(--background); opacity: 0; transition: opacity 400ms; }
.architecture-slide .local-state { opacity: 0; transition: opacity 250ms; }
.architecture-slide .cloud-state { opacity: 1; transition: opacity 150ms; }
.architecture-slide.is-local .db-left { left: 24ch; top: 25em; }
.architecture-slide.is-local .db-right { left: 196ch; top: 25em; opacity: 1; }
.architecture-slide.is-local .backup-db { opacity: 1; transition-delay: 600ms; }
.architecture-slide.is-local .local-state { opacity: 1; transition-delay: 450ms; }
.architecture-slide.is-local .cloud-state { opacity: 0; }
/* Reserve space for the second cloud from the first step onward. */
.additional-sync { position: absolute; inset: 0; visibility: hidden; }
.secondary-cloud { top: 45em; }
.secondary-db { left: 104ch; top: 51em; color: var(--muted); background: var(--background); }
.secondary-cloud-label { left: 50%; top: 67em; }
.multi-bottom-left { left: 62ch; }
.multi-bottom-right { left: 150ch; }
.multi-bottom-left, .multi-bottom-right { top: 42em; }
.architecture-slide.is-multisync .additional-sync { visibility: visible; }
/* Direct synchronization is an additional route, alongside both servers. */
.peer-sync { position: absolute; inset: 0; visibility: hidden; }
.peer-wire { left: 66ch; top: 34em; color: #fc3; }
.peer-label { left: 50%; top: 29em; color: #fc3; }
.peer-label span { font-size: 1.65cqw; }
.architecture-slide.is-p2p .peer-sync { visibility: visible; }
/* User ideals stay visible while the developer points are revealed. */
.principles-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3.2cqw; transform: translateY(-50%) scale(1.18); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.principles-slide.expanded h2 { transform: translateY(-24cqw); }
.principles-body { position: absolute; inset: 12cqw 7cqw 7cqw; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 6cqw; row-gap: 3cqw; align-content: center; }
.principle-group:first-child { grid-column: 1; grid-row: 1 / 3; }
.principle-group:nth-child(2) { grid-column: 2; grid-row: 1; }
.principle-group:nth-child(3) { grid-column: 2; grid-row: 2; }
.principle-group.is-unrevealed, .principle-group li.is-unrevealed { visibility: hidden; }
.principle-group h3 { margin: 0 0 2.1cqw; font: inherit; font-size: 1.65cqw; color: #fc3; }
.principle-group h3::before { content: '[ '; color: var(--muted); }
.principle-group h3::after { content: ' ]'; color: var(--muted); }
.principle-group ol { display: grid; gap: 1.65cqw; padding: 0; margin: 0; list-style: none; }
.principle-group li { display: grid; grid-template-columns: 2.4cqw 1fr; gap: 1cqw; align-items: baseline; }
.principle-number { font-size: 1.25cqw; color: #fc3; }
.principle-group h4 { margin: 0; font: inherit; font-size: 1.8cqw; line-height: 1.4; }
/* Three independent failure domains, with the recovery path beside each. */
.resilience-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3cqw; transform: translateY(-50%) scale(1.1); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.resilience-slide.expanded h2 { transform: translateY(-24cqw); }
.resilience-body { position: absolute; inset: 12cqw auto 5cqw 50%; width: max-content; transform: translateX(-50%); display: grid; grid-template-rows: repeat(3, 1fr); gap: 1.5cqw; }
.resilience-level { display: grid; grid-template-columns: 16cqw 18cqw 4cqw max-content; gap: 1.5cqw; align-items: center; }
.resilience-level.is-unrevealed { visibility: hidden; }
.resilience-art { font-size: .62cqw; line-height: 1; white-space: pre; color: var(--muted); user-select: none; }
.resilience-risk h3 { margin: 0 0 .8cqw; font: inherit; font-size: 2.1cqw; }
.resilience-risk p { color: var(--muted); font-size: 1.15cqw; line-height: 1.5; }
.resilience-arrow { color: #575653; font-size: 1.45cqw; line-height: 1; white-space: pre; }
.resilience-defense { color: #fc3; font-size: 1.85cqw; line-height: 1.6; white-space: pre-line; }
/* Two local histories diverge while the network is unavailable. */
.sync-problem-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3cqw; transform: translateY(-50%) scale(1.1); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.sync-problem-slide.expanded h2 { transform: translateY(-24cqw); }
.sync-problem-body { position: absolute; inset: 11cqw 7cqw 4cqw; display: grid; place-items: center; }
.sync-scene { position: relative; width: 176ch; height: 54em; font-size: .72cqw; line-height: 1; }
.sync-art { position: absolute; font: inherit; line-height: 1; white-space: pre; user-select: none; }
.sync-state-label { position: absolute; top: 0; width: 100%; display: grid; text-align: center; color: var(--muted); }
.sync-state { grid-area: 1 / 1; font-size: 1.35cqw; line-height: 1.4; visibility: hidden; }
.sync-problem-slide[data-sync-stage="1"] .sync-state[data-stage="1"],
.sync-problem-slide[data-sync-stage="2"] .sync-state[data-stage="2"],
.sync-problem-slide[data-sync-stage="3"] .sync-state[data-stage="3"] { visibility: visible; }
.sync-laptop { top: 8em; color: #b7b5ac; }
.sync-laptop-left { left: 0; }
.sync-laptop-right { left: 112ch; }
.sync-screen { position: absolute; top: 14em; width: 40ch; }
.sync-screen-left { left: 13ch; }
.sync-screen-right { left: 125ch; }
.sync-screen p { font-size: 1.2cqw; line-height: 1.5; white-space: nowrap; }
.sync-note-title { margin-bottom: 1.15cqw; }
.sync-base { color: var(--muted); }
.sync-problem-slide[data-sync-stage="2"] .sync-base,
.sync-problem-slide[data-sync-stage="3"] .sync-base { text-decoration: line-through; opacity: .55; }
.sync-edit { margin-top: 1cqw; color: #fc3; visibility: hidden; }
.sync-problem-slide[data-sync-stage="2"] .sync-edit,
.sync-problem-slide[data-sync-stage="3"] .sync-edit { visibility: visible; }
.sync-peer-wire { left: 64ch; top: 20em; color: var(--muted); }
.sync-wire-broken { visibility: hidden; color: #fc3; }
.sync-problem-slide[data-sync-stage="2"] .sync-wire-connected { visibility: hidden; }
.sync-problem-slide[data-sync-stage="2"] .sync-wire-broken { visibility: visible; }
.sync-connection-label { position: absolute; left: 50%; top: 16em; transform: translateX(-50%); display: grid; text-align: center; justify-items: center; }
.sync-connection-label span { grid-area: 1 / 1; font-size: 1.05cqw; color: var(--muted); }
.sync-link-offline { visibility: hidden; }
.sync-problem-slide[data-sync-stage="2"] .sync-link-online { visibility: hidden; }
.sync-problem-slide[data-sync-stage="2"] .sync-link-offline { visibility: visible; color: #fc3; }
.sync-branch { top: 35em; color: #575653; visibility: hidden; }
.sync-branch-left { left: 32ch; }
.sync-branch-right { left: 88ch; }
.sync-merge-stem { left: 50%; top: 45em; transform: translateX(-50%); }
.sync-merge-question { position: absolute; left: 50%; top: 33.12cqw; width: max-content; transform: translateX(-50%); text-align: center; white-space: pre-line; color: #fc3; font-size: 1.75cqw; line-height: 1.4; visibility: hidden; }
.sync-problem-slide[data-sync-stage="3"] .sync-branch,
.sync-problem-slide[data-sync-stage="3"] .sync-merge-question { visibility: visible; }
/* A quiet acronym slide, then three examples in a single row. */
.crdt-acronym { text-align: left; font-size: 4.7cqw; line-height: 1.4; white-space: normal; }
.crdt-word { display: block; }
.crdt-initial { color: #fc3; }
.crdt-slide h2 { position: absolute; left: 0; top: 4cqw; width: 100%; font-size: 3.8cqw; color: #fc3; }
.crdt-examples { position: absolute; inset: 12cqw 7cqw 6cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 4cqw; }
.crdt-example { position: relative; display: grid; align-content: start; gap: 1.2cqw; }
.crdt-example header { display: grid; gap: .5cqw; text-align: center; }
.crdt-example h3 { margin: 0; font: inherit; font-size: 1.85cqw; }
.crdt-type { color: var(--muted); font-size: 1.1cqw; }
.crdt-example-art { justify-self: center; font-size: 1.05cqw; line-height: 1.25; white-space: pre; color: #fc3; }
.crdt-caption { font-size: 1.05cqw; line-height: 1.4; color: var(--muted); text-align: center; }
.crdt-source { position: absolute; top: 100%; left: 0; width: 100%; margin-top: .7cqw; text-align: center; font-size: .9cqw; line-height: 1.4; color: var(--muted); }
.crdt-source a { color: inherit; text-decoration: none; }
.crdt-source a:hover, .crdt-source a:focus-visible { color: #fc3; }
.crdt-example-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The brand mark stays on a real monospace grid; only its ink animates. */
.automerge-brand { width: 86cqw; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7cqw; }
.automerge-copy { display: grid; gap: 2.3cqw; }
.automerge-heading { display: grid; gap: .7cqw; }
.automerge-repo { width: fit-content; font-size: 1.2cqw; line-height: 1.4; color: var(--muted); text-decoration: none; }
.automerge-repo:hover, .automerge-repo:focus-visible { color: #fc3; }
.automerge-slide h2 { text-align: left; font-size: 4cqw; line-height: 1.2; color: #fc3; }
.automerge-intro { font-size: 1.9cqw; line-height: 1.5; text-wrap: balance; }
.automerge-details { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1cqw; font-size: 1.4cqw; line-height: 1.5; color: var(--muted); }
.automerge-details li { position: relative; padding-left: 1.6em; }
.automerge-details li::before { content: ">"; position: absolute; left: 0; color: #fc3; }
.automerge-logo { display: grid; font-size: .66cqw; line-height: 1; }
.automerge-logo pre { grid-area: 1 / 1; font: inherit; white-space: pre; user-select: none; pointer-events: none; }
.automerge-mark { color: #fc3; }
.automerge-glint-soft { color: #fff0c2; }
.automerge-glint-bright { color: #fff; }
.automerge-merge-slide h2 { position: absolute; top: 3.6cqw; width: 100%; color: var(--text); font-size: 3.2cqw; }
.merge-legend { position: absolute; top: 9cqw; width: 100%; text-align: center; font-size: 1.05cqw; color: var(--muted); }
.merge-inputs { position: absolute; top: 13.2cqw; left: 12cqw; right: 12cqw; display: flex; justify-content: space-between; }
.merge-document { width: 27cqw; }
.merge-document h3 { font: inherit; font-size: 1.2cqw; line-height: 1.4; color: var(--muted); margin: 0 0 .7cqw; }
.merge-document pre { font-size: 1.35cqw; line-height: 1.25; white-space: pre; }
.merge-document code { font: inherit; }
.merge-key { color: var(--muted); }
.merge-changed { color: #fc3; }
.merge-outcome { position: absolute; inset: 30cqw 0 0; display: flex; flex-direction: column; align-items: center; }
.merge-outcome.is-unrevealed { visibility: hidden; }
.merge-path { color: var(--muted); font-size: 1.2cqw; line-height: 1; white-space: pre; margin-bottom: .7cqw; }
.merge-result { width: max-content; }
.merge-result h3 { color: #fc3; }
.shared-sync-slide h2 { position: absolute; top: 3.6cqw; width: 100%; font-size: 3cqw; color: var(--text); }
.shared-sync-scene { position: absolute; top: 10.5cqw; left: 50%; transform: translateX(-50%); }
.shared-app-names { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.4cqw; }
.shared-app-names h3 { font: inherit; font-size: 1.6cqw; margin: 0; text-align: center; }
.shared-sync-grid { position: relative; display: grid; font-size: .88cqw; line-height: 1.08; }
.shared-sync-grid pre { grid-area: 1 / 1; font: inherit; white-space: pre; user-select: none; }
.shared-sync-byte { position: absolute; font: inherit; line-height: 1.08; color: #fc3; background: var(--background); transform: translateX(-50%); opacity: 0; user-select: none; pointer-events: none; }
.shared-sync-art, .shared-sync-additions { color: var(--muted); }
.shared-sync-accent { color: #fc3; }
.shared-sync-slide[data-infra-stage="0"] .shared-sync-additions { visibility: hidden; }
.shared-provider-single, .shared-provider-multiple { position: absolute; bottom: -.6cqw; left: 0; width: 100%; text-align: center; font-size: 1.1cqw; color: var(--text); }
.shared-provider-multiple { display: grid; grid-template-columns: repeat(3, 1fr); color: var(--muted); }
.shared-sync-caption { position: absolute; bottom: 2.7cqw; width: 100%; text-align: center; }
.shared-sync-caption h3 { font: inherit; font-size: 1.65cqw; color: #fc3; margin: 0 0 .6cqw; }
.shared-sync-caption p { font-size: 1.15cqw; color: var(--muted); }
/* Plaintext and keys stay on devices. Only ciphertext crosses the relay. */
.security-slide h2 { position: absolute; top: 3.4cqw; width: 100%; font-size: 3.1cqw; line-height: 1.35; color: #fc3; white-space: pre-line; }
.security-slide .security-question { top: 50%; transform: translateY(-50%); font-size: 3.8cqw; color: var(--text); white-space: nowrap; }
.security-slide.is-expanded .security-question { top: 3.4cqw; transform: translateY(0); font-size: 3.1cqw; }
.security-visual { position: absolute; inset: 0; }
.security-scene { position: absolute; top: 14cqw; left: 50%; transform: translateX(-50%); width: 214ch; height: 43em; font-size: .64cqw; line-height: 1; }
.security-art { position: absolute; font: inherit; white-space: pre; user-select: none; color: var(--muted); }
.security-laptop { top: 3em; }
.security-laptop-left { left: 0; }
.security-laptop-right { left: 150ch; }
.security-label { position: absolute; top: 0; width: 64ch; text-align: center; }
.security-label p { font-size: 1.2cqw; line-height: 1.4; }
.security-label-left { left: 0; }
.security-label-right { left: 150ch; }
.security-label-server { left: 89ch; width: 36ch; }
.security-document { position: absolute; top: 6.4cqw; width: 15cqw; font-size: 1.05cqw; line-height: 1.7; white-space: pre-line; color: #fc3; }
.security-document-left { left: 5cqw; }
.security-document-right { left: 62.6cqw; }
.security-relay-art { left: 90ch; top: 8em; }
.security-payload { position: absolute; left: 94ch; top: 12em; }
.security-payload pre { font-size: .95cqw; line-height: 1.6; color: #fc3; }
.security-wire { top: 17em; color: #575653; }
.security-wire-left { left: 64ch; }
.security-wire-right { left: 124ch; }
.security-transform { position: absolute; top: 13em; width: 26ch; text-align: center; }
.security-transform p { font-size: .95cqw; line-height: 1.4; color: var(--muted); }
.security-transform-left { left: 64ch; }
.security-transform-right { left: 124ch; }
.security-packet { top: 17em; color: #fc3; background: var(--background); opacity: 0; }
.security-packet-left { left: 64ch; }
.security-packet-right { left: 124ch; }
.security-relay-label { position: absolute; top: 24em; left: 89ch; width: 36ch; text-align: center; }
.security-relay-label p:first-child { color: #fc3; font-size: 1.15cqw; line-height: 1.5; }
.security-relay-label p + p { color: var(--muted); font-size: 1cqw; line-height: 1.5; }
.security-key { top: 30.5em; color: #fc3; }
.security-key-left { left: 15ch; }
.security-key-right { left: 165ch; }
.security-key-caption { position: absolute; top: 39.5em; width: 64ch; text-align: center; }
.security-key-caption p { color: var(--muted); font-size: 1.05cqw; line-height: 1.4; }
.security-key-caption-left { left: 0; }
.security-key-caption-right { left: 150ch; }
.security-slide[data-security-stage="0"] .security-protected { visibility: hidden; }
.security-implementation { position: absolute; top: 43cqw; left: 9cqw; width: 82cqw; display: grid; gap: 1cqw; text-align: center; font-size: 1.7cqw; }
.security-repo { color: #fc3; font-size: inherit; text-decoration: none; }
.security-repo:hover, .security-repo:focus-visible { color: #fc3; }
/* Keep every problem's place reserved while the speaker reveals the list. */
.challenges-slide h2 { position: absolute; left: 0; top: 50%; width: 100%; font-size: 3.2cqw; transform: translateY(-50%) scale(1.18); transition: transform 550ms cubic-bezier(.22, 1, .36, 1); }
.challenges-slide.expanded h2 { transform: translateY(-24cqw); }
.challenges-list { position: absolute; inset: 13cqw 13cqw 6cqw; display: grid; align-content: center; gap: 2.7cqw; padding: 0; margin: 0; list-style: none; }
.challenge-item { display: grid; grid-template-columns: 4cqw 1fr; gap: 1.6cqw; align-items: baseline; }
.challenge-item.is-unrevealed { visibility: hidden; }
.challenge-marker { color: #fc3; font-size: 1.7cqw; }
.challenge-item h3 { margin: 0; font: inherit; font-size: 2.1cqw; line-height: 1.35; }
.challenge-item p { margin-top: .65cqw; color: var(--muted); font-size: 1.2cqw; line-height: 1.5; }
.end-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.end-layout { position: absolute; inset: 8cqw 5cqw; display: grid; grid-template-columns: 48cqw minmax(0, 1fr); gap: 6cqw; align-items: center; }
.end-art { font: inherit; font-size: 1.3cqw; line-height: 1; color: #fc3; white-space: pre; user-select: none; }
.end-resources { display: grid; gap: 2.6cqw; margin: 0; padding: 0; list-style: none; }
.end-resources a { display: grid; gap: .65cqw; color: var(--text); text-decoration: none; width: fit-content; }
.end-resource-name { font-size: 2.1cqw; line-height: 1.25; }
.end-resource-url { color: var(--muted); font-size: 1.1cqw; line-height: 1.4; }
.end-resources a:hover .end-resource-name, .end-resources a:focus-visible .end-resource-name { color: #fc3; }
.end-resources a:focus-visible { outline: 1px solid #fc3; outline-offset: .6cqw; }
.end-presentation { position: absolute; bottom: 3.5cqw; left: 5cqw; right: 5cqw; display: grid; gap: .6cqw; margin: 0; text-align: center; color: var(--muted); font-size: 1.1cqw; }
.end-presentation[hidden] { display: none; }
.end-presentation a { color: #fc3; font-size: 1.5cqw; text-decoration: none; width: fit-content; justify-self: center; }
.end-presentation a:hover { text-decoration: underline; }
.end-presentation a:focus-visible { outline: 1px solid #fc3; outline-offset: .6cqw; }
@keyframes service-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .question-slide h2, .news-slide h2, .access-slide h2, .services-slide h2, .local-slide h2, .architecture-slide h2, .principles-slide h2, .resilience-slide h2, .sync-problem-slide h2, .crdt-slide h2,
  .challenges-slide h2, .architecture-slide .primary-db, .architecture-slide .backup-db, .architecture-slide .local-state, .architecture-slide .cloud-state { transition: none; }
  .service-event { animation: none; }
}
@media print {
  .client-server-diagram[hidden] { display: block !important; }
  .client-server-packet { display: none !important; }
  .client-server-diagram * { mask-image: none !important; }
  .end-title { display: none !important; }
  .end-slide * { mask-image: none !important; }
  .challenges-slide h2 { transform: translateY(-24cqw) !important; }
  .challenge-item.is-unrevealed { visibility: visible !important; }
  .challenges-slide * { mask-image: none !important; }
  .security-slide .security-question { top: 3.4cqw; transform: none; font-size: 3.1cqw; }
  .security-visual[hidden] { display: block !important; }
  .shared-sync-byte { display: none !important; }
  .security-slide .security-protected { visibility: visible !important; }
  .security-packet { display: none !important; }
  .security-slide [data-security-copy="2"] { display: grid !important; }
  .security-slide * { mask-image: none !important; }
  .shared-sync-additions { visibility: visible !important; }
  .shared-sync-slide [data-infra-copy="0"] { display: none !important; }
  .shared-sync-slide [data-infra-copy="1"] { display: grid !important; }
  .shared-sync-slide * { mask-image: none !important; }
  .merge-outcome.is-unrevealed { visibility: visible !important; }
  .automerge-merge-slide * { mask-image: none !important; }
  .crdt-slide * { animation: none !important; transition: none !important; mask-image: none !important; }
  .crdt-acronym::after { content: none; }
  .infrastructure-slide .infrastructure-image { transform: translate(-50%, 0) !important; }
  .doom-fire { display: none !important; }
  .slide, h2 { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; mask-image: none !important; }
  .question-slide h2 { transform: translateY(-18.4cqw) scale(.72) !important; }
  .examples[hidden] { display: block !important; }
  .examples > div { opacity: 1 !important; }
  .news-columns[hidden] { display: grid !important; }
  .news-columns { opacity: 1 !important; }
  .news-slide h2 { transform: translateY(-24cqw) !important; }
  .news-slide, .news-slide[hidden] { display: flex !important; }
  .access-slide, .access-slide[hidden] { display: flex !important; }
  .access-slide h2 { transform: translateY(-24cqw) !important; }
  .access-columns, .access-columns[hidden] { display: grid !important; opacity: 1 !important; }
  .services-slide, .services-slide[hidden] { display: flex !important; }
  .services-slide h2 { transform: translateY(-24cqw) !important; }
  .service-list, .service-list[hidden] { display: grid !important; opacity: 1 !important; }
  .service-preview { display: none !important; }
  .service-event, .service-event[hidden] { display: block !important; opacity: 1 !important; animation: none; }
  .sync-problem-slide h2 { transform: translateY(-24cqw) !important; }
  .sync-problem-slide * { animation: none !important; transition: none !important; mask-image: none !important; }
  .sync-problem-body[hidden] { display: grid !important; }
  .sync-state { visibility: hidden !important; }
  .sync-state[data-stage="3"], .sync-edit, .sync-branch, .sync-merge-question, .sync-wire-connected, .sync-link-online { visibility: visible !important; }
  .sync-wire-broken, .sync-link-offline { visibility: hidden !important; }
  .sync-edit::after { content: attr(aria-label); }
  .sync-edit .typewriter { display: none; }
  .resilience-slide h2 { transform: translateY(-24cqw) !important; }
  .resilience-slide * { transition: none !important; animation: none !important; mask-image: none !important; }
  .resilience-level { visibility: visible !important; }
  .principles-slide h2 { transform: translateY(-24cqw) !important; }
  .principles-slide * { animation: none !important; transition: none !important; mask-image: none !important; }
  .principle-group[hidden] { display: block !important; }
  .principle-group, .principle-group li { visibility: visible !important; }
  .architecture-slide h2 { transform: translateY(-24cqw) !important; }
  .architecture-slide * { transition: none !important; animation: none !important; }
  .architecture-body, .architecture-body[hidden] { display: flex !important; opacity: 1 !important; }
  .architecture-slide .cloud-state { display: none !important; }
  .architecture-slide .local-state, .architecture-slide .backup-db { opacity: 1 !important; }
  .architecture-slide .db-left { left: 24ch !important; top: 25em !important; }
  .architecture-slide .db-right { left: 196ch !important; top: 25em !important; opacity: 1 !important; }
  .additional-sync, .peer-sync { visibility: visible; }
  h2::after { content: attr(aria-label); }
  h2 .typewriter { display: none; }
  @page { size: 16in 9in; margin: 0; }
  body { height: auto; display: block; overflow: visible; }
  #deck { width: 100%; }
  .slide, .slide[hidden] { display: grid !important; position: relative; width: 100%; aspect-ratio: 16 / 9; break-after: page; background: var(--background); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ascii-title { display: none !important; }
  .fallback { display: inline !important; }
}