@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-neue-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-neue-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/open-sans.woff2") format("woff2");
}

/* Use the existing Archivo Black asset for every heading. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/srecon26-archivo-black-400-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  font-family: var(--body-font-family);
  font-synthesis: none;
  --heading-font-family: "Archivo Black", sans-serif;
  --table-font-family: "Open Sans", Arial, sans-serif;
  --body-font-family: "Comic Neue", cursive;
  --surface-background: #b3d9ff;
  --ink: #000000;
  --link: royalblue;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--surface-background);
  color: var(--ink);
}

.fallback-message {
  max-width: 42rem;
  margin: 4rem auto;
  padding: 1rem;
  border: 1px solid #6a7378;
  border-radius: 10px;
  background: var(--surface-background);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.35;
  text-align: center;
}

.touch-navigation { display: none; }
@media screen and (max-width: 900px), screen and (pointer: coarse) {
  .impress-enabled .touch-navigation {
    position: fixed;
    z-index: 1000;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(350px, calc(100% - 24px));
    transform: translateX(-50%);
    pointer-events: none;
    font-family: var(--body-font-family);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .touch-navigation button, .touch-navigation [data-slide-counter] {
    padding: 10px 14px;
    border: 1px solid rgb(0 0 0 / 25%);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  }
  .touch-navigation button { min-width: 90px; min-height: 48px; pointer-events: auto; touch-action: manipulation; cursor: pointer; }
  .touch-navigation button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  .impress-enabled .touch-navigation { width: calc(100% - 24px); }
  .touch-navigation [data-slide-counter] { display: none; }
}

.impress-supported .fallback-message {
  display: none;
}

.impress-not-supported #impress {
  display: none;
}

.step {
  position: relative;
  display: block;
  width: 1020px;
  height: 780px;
  margin: 0;
  padding: 40px 60px;
  color: var(--ink);
  font-family: var(--body-font-family);
  font-size: 30px;
  letter-spacing: -1px;
}

/* Heading, table and body typography applies across the whole deck. */
#impress .step :is(h1, h2, h3, h4, h5, h6, [role="heading"]),
#impress .paper-theme-copy strong,
#impress .diagram-legend-item strong,
#impress .practice-rows dt,
#impress .sociotechnical-heading,
#impress .systems-thinking {
  font-family: var(--heading-font-family);
}

#impress .step :is(h1, h2, h3, h4, h5, h6, [role="heading"]) :where(*):not([aria-hidden="true"], [role="img"]) {
  font-family: inherit;
}

/* Tables take precedence over heading/body styles, including nested links. */
#impress .step table,
#impress .step table :where(*):not(:where(.takeaways-icon, .takeaways-icon *, .boundary-list-emoji, .token-economy-label > [aria-hidden="true"])) {
  font-family: var(--table-font-family);
}

.impress-enabled .step {
  opacity: 1;
}

.notes {
  display: none;
}

p {
  margin: 0.7em;
  text-align: center;
}

a {
  color: var(--link);
  font-family: var(--body-font-family);
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

#impress .step .substep,
#impress .step .ordered-substep {
  opacity: 0;
}

#impress .step .substep.substep-visible,
#impress .step .ordered-substep.substep-visible {
  opacity: 1;
  transition: opacity 1s;
}

/* The shared image pop supplies the overshoot, independently of motion paths. */
#impress .step .image-pop-reveal {
  transition-duration: 180ms;
}

/* Final bibliography, with all source links available on entry. */
.references-slide {
  padding: 36px 46px;
  overflow: hidden;
}

.references-title {
  margin: 0 0 14px;
  font-family: var(--heading-font-family);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -2px;
}

/* Define the discipline before introducing Rasmussen's model. */
.resilience-definition-slide {
  padding: 46px;
}

.resilience-definition-title {
  margin: 0;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -2px;
  text-align: center;
}

.resilience-definition-copy {
  position: absolute;
  top: 50%;
  right: 46px;
  left: 46px;
  margin: 0;
  transform: translateY(-50%);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.7px;
  text-align: left;
}

.resilience-definition-copy strong {
  font-weight: inherit;
}

.resilience-definition-copy .resilience-key-phrase {
  font-size: 54px;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.1em;
}

/* This close-up stays on the canvas after its native substeps are revealed. */
.token-economy-slide {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 36px 46px;
}

.token-economy-title {
  margin: 0;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -2px;
}

.token-economy-table {
  align-self: center;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.token-economy-table :is(th, td) {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.token-economy-table th:first-child {
  width: 37%;
}

.token-economy-table th {
  font-weight: 400;
  letter-spacing: -0.8px;
}

.token-economy-table thead th {
  font-size: 36px;
}

#impress #token-economy .token-economy-table thead,
#impress #token-economy .token-economy-table thead :where(*) {
  font-family: var(--heading-font-family);
  font-weight: 400;
}

#impress #token-economy .token-economy-table tbody,
#impress #token-economy .token-economy-table tbody :where(*):not([aria-hidden="true"]) {
  font-family: var(--body-font-family);
  font-weight: 700;
}

.token-economy-table tbody :is(th, td) {
  letter-spacing: -0.5px;
}

.token-economy-label {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.token-economy-label > span:first-child {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
}

.token-economy-question {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 43px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.7px;
  text-align: center;
  text-wrap: balance;
}

.model-enshittification-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.5px;
  white-space: nowrap;
}

.model-enshittification-title > span[aria-hidden] {
  flex: 0 0 64px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  letter-spacing: 0;
}

.model-enshittification-slide {
  padding: 36px 46px;
}

.model-stage {
  position: absolute;
  transform: translateX(-24px);
}

.model-stage h3 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
}

.model-stage p {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-align: left;
}

.model-stage-users { top: 145px; left: 60px; width: 540px; }
.model-stage-business { top: 240px; left: 240px; width: 660px; }
.model-stage-rent { top: 335px; left: 420px; width: 540px; }

#impress .model-enshittification-slide .model-stage.substep-visible {
  transform: translateX(0);
  transition: opacity 650ms ease, transform 650ms ease;
}

.model-evidence-point {
  position: absolute;
  right: 60px;
  left: 60px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.model-evidence-costs { top: 455px; }
.model-evidence-competition { top: 575px; }

.model-evidence-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
}

.model-evidence-point p {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.35px;
  text-align: left;
}

.model-evidence-point p strong {
  font-weight: inherit;
}

.model-evidence-source {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.model-enshittification-slide .token-economy-credit {
  position: absolute;
  right: 46px;
  bottom: 48px;
  left: 46px;
  margin: 0;
  font-family: var(--body-font-family);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-align: center;
  opacity: 0;
  transition: opacity 650ms ease;
}

.model-enshittification-slide .model-stage-rent.substep-visible ~ .token-economy-credit {
  opacity: 1;
}

.references-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
}

.references-tabs button {
  padding: 4px 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--body-font-family);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}

.references-tabs button[aria-selected="true"] {
  border-bottom-color: var(--link);
  color: var(--link);
}

.references-tabs button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

.references-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  text-align: left;
}

.references-group h3 {
  margin: 0 0 18px;
  font-family: var(--heading-font-family);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.references-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.references-list li {
  margin: 0 0 12px;
}

.references-list a {
  display: block;
  font-family: var(--body-font-family);
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.5px;
  text-align: left;
  text-decoration: none;
}

.references-list strong {
  display: block;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.references-list span {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 22px;
}

/* Title slide: QCon copy in the visual language of the 2024 presentation. */
.title-slide {
  overflow: hidden;
}

.title-heading {
  position: absolute;
  top: 28px;
  right: 34px;
  left: 34px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  text-align: center;
}

.title-heading span {
  display: block;
  max-width: 930px;
  margin: 12px auto 0;
  font-size: 51px;
  line-height: 1.04;
  letter-spacing: -1.5px;
}

.title-model img {
  position: absolute;
  height: auto;
}

.title-model-outline {
  top: 286px;
  left: 310px;
  width: 400px;
}

.title-model-margin {
  top: 291px;
  left: 350px;
  width: 220px;
}

.blocker-lemming {
  image-rendering: pixelated;
  object-fit: contain;
}

.title-model-lemming {
  position: absolute;
  top: 363px;
  left: 450px;
  width: 120px;
}

.title-model-lemming img {
  position: static;
  display: block;
  width: 100%;
}

/* Closing argument: skills, operational control, boundaries and adaptability. */
.practice-slide {
  display: flex;
  flex-direction: column;
  padding: 40px 54px 44px;
  background: var(--surface-background);
}

.practice-title {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -2px;
  text-align: center;
}

.closing-rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 22px;
  margin: 12px 0 8px;
  padding: 0;
  list-style: none;
}

.closing-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.closing-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 88px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.closing-row h3 {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.7px;
}

.closing-row p {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.7px;
  text-align: left;
}

.closing-takeaway {
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.5px;
  text-align: center;
}

.closing-skills .practice-title { min-height: 80px; }
.closing-skills .closing-rows { gap: 8px; margin: 8px 0 6px; }
.closing-skills .closing-row h3 { margin-bottom: 6px; }
.closing-skills .closing-takeaway { min-height: 60px; margin-top: 6px; }

.closing-tool-rows { gap: 38px; }
.closing-tool-rows .closing-row { grid-template-columns: 140px minmax(0, 1fr); gap: 34px; }
.closing-tool-rows .closing-emoji { font-size: 112px; }
.closing-summary-rows { gap: 24px; }
.closing-summary-rows .closing-row { grid-template-columns: 76px minmax(0, 1fr); gap: 24px; }
.closing-summary-rows .closing-emoji { font-size: 68px; }
.closing-lemming { display: block; width: 68px; height: 68px; margin: 0 auto; }
.closing-lemming img { display: block; width: 100%; height: 100%; }
.closing-summary-rows strong { font-family: inherit; font-weight: 700; }
.closing-summary .closing-takeaway { min-height: 70px; max-width: calc(100% - 224px); justify-content: flex-start; text-align: left; }
.closing-summary-content { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: center; }
.closing-summary-content .closing-summary-rows { align-self: stretch; }
.closing-summary-homer { position: absolute; right: 54px; bottom: 44px; width: 200px; margin: 0; opacity: 0; transition: opacity 1s; }
.closing-summary-homer picture, .closing-summary-homer img { display: block; width: 100%; height: auto; }
.closing-summary:has(.closing-takeaway.substep-visible) .closing-summary-homer { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .closing-summary-homer { transition: none; }
}
@media print {
  .closing-summary-homer { opacity: 1 !important; }
}

.closing-human-scene {
  display: grid;
  flex: 1;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 40px;
  min-height: 230px;
  align-items: center;
  margin: 20px 0 24px;
}

.closing-system-visual { position: relative; width: 310px; height: calc(310px * 510 / 547); margin: 0; }
.closing-system-network { position: absolute; top: 0; left: 0; width: 300px; transform: scale(1.0333333333); transform-origin: top left; }
.closing-system-network > img { display: block; width: 300px; height: auto; }
.closing-system-network .social-system-person { z-index: 2; }
.closing-arrow-pulses { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.closing-arrow-pulses .closing-still-point { animation: none; opacity: 1; transform: none; }
.closing-human-scene p {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.7px;
  text-align: left;
}

.closing-humans .closing-takeaway { min-height: 120px; margin-top: 26px; font-size: 40px; }

@media print {
  .closing-arrow-pulses .social-arrow-pulse { animation: none !important; opacity: 1; transform: none; }
  #impress :is(.token-economy-slide, .model-enshittification-slide) { position: relative !important; }
  .model-stage { transform: none !important; }
  .model-enshittification-slide .token-economy-credit { opacity: 1 !important; }
  img.blocker-lemming {
    content: url("/images/qcon26/blocker-lemming.png");
  }
}

.title-speaker {
  position: absolute;
  top: 608px;
  right: 80px;
  left: 80px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 58px;
  font-weight: 400;
  line-height: 1;
}

.title-role,
.title-event {
  position: absolute;
  right: 60px;
  left: 60px;
  margin: 0;
  font-family: var(--body-font-family);
  line-height: 1.15;
}

.title-role {
  top: 624px;
  font-size: 25px;
  font-weight: 700;
}

.title-event {
  top: 674px;
  font-size: 22px;
}

/* WHOAMI: preserve the original SREcon26 composition and typography. */
.whoami-slide {
  font-family: var(--body-font-family);
}

.whoami-heading {
  margin: 8px 0;
  font-family: var(--heading-font-family);
  font-size: 70px;
  font-weight: 300;
  line-height: normal;
  text-align: center;
}

.whoami-slide p {
  margin: 11px;
  font-family: var(--body-font-family);
  font-size: 36px;
  font-weight: 700;
}

.whoami-data-centre { width: 150px; line-height: 0; }
.whoami-data-centre::before { content: ""; position: absolute; inset: 24.231% 4.79% 1.968% 9.112%; background: #fff; }
.whoami-data-centre img { position: relative; display: block; }
.whoami-linkedin { width: 80px; line-height: 0; }
.whoami-linkedin::before { content: ""; position: absolute; inset: 10%; background: #fff; }
.whoami-linkedin img { position: relative; display: block; }
.whoami-bluesky { position: relative; display: block; width: 90px; line-height: 0; }
.whoami-bluesky::before { content: ""; position: absolute; inset: 12%; border-radius: 25%; background: #fff; }
.whoami-bluesky img { position: relative; display: block; }

#impress .whoami-slide .substep {
  transform: scale(0.92);
}

#impress .whoami-slide .substep.substep-visible {
  transform: scale(1);
  transition: opacity 0.3s ease-out, transform 0.4s ease-out;
}

.whoami-career-intro {
  --credits-duration: 3s;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.whoami-career-credits {
  --credits-height: 285px;
  position: absolute;
  top: 445px;
  right: 40px;
  left: 40px;
  height: var(--credits-height);
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.whoami-credits-track {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--body-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.5px;
  text-align: center;
  transform: translateY(var(--credits-height));
}

.whoami-slide:not(:has(.whoami-career-intro ~ .substep.substep-visible)) .whoami-career-intro.substep-visible .whoami-credits-track {
  animation: whoami-credits-roll var(--credits-duration) linear both;
}

.whoami-career-intro.substep-visible .whoami-career-credits {
  animation: whoami-credits-finish 1ms step-end var(--credits-duration) forwards;
}

/* The manager reveal completes the credits before the later logos appear. */
.whoami-slide:has(.whoami-career-intro ~ .substep.substep-visible) .whoami-career-credits {
  animation: none;
  visibility: hidden;
}

@keyframes whoami-credits-roll {
  from { transform: translateY(var(--credits-height)); }
  to { transform: translateY(-100%); }
}

@keyframes whoami-credits-finish {
  from { visibility: visible; }
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce), print {
  .whoami-career-credits {
    top: 150px;
    height: 590px;
    background: var(--surface-background);
    mask-image: none;
    z-index: 1;
    overflow: auto;
    pointer-events: auto;
  }
  .whoami-career-credits .whoami-credits-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    animation: none !important;
    transform: none;
    font-size: 24px;
    line-height: 1.2;
  }
}

@media print {
  .whoami-career-credits { display: none; }
  .whoami-current-role { opacity: 1 !important; }
}

/* Opening hook: capability and control, with room for a pause. */
.opening-hook-slide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 70px 60px;
  overflow: hidden;
}

.opening-hook-slide > p {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -1px;
  text-align: left;
  text-wrap: balance;
}

.impress-enabled .opening-hook-slide > p {
  opacity: 0;
}

.impress-enabled .opening-hook-slide.has-entered > p {
  animation: opening-hook-reveal 600ms ease-out both;
}

.impress-enabled .opening-hook-slide.has-entered > p:nth-of-type(2) {
  animation-delay: 1100ms;
}

.impress-enabled .opening-hook-slide.has-entered > p:nth-of-type(3) {
  animation-delay: 2200ms;
}

.impress-enabled .opening-hook-slide.has-entered > p:nth-of-type(4) {
  animation-delay: 3300ms;
}

@keyframes opening-hook-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Opening summary. */
.takeaways-slide {
  overflow: hidden;
}

.takeaways-title {
  position: absolute;
  top: 20px;
  right: 60px;
  left: 60px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  text-align: center;
}

.takeaways-table {
  position: absolute;
  top: 114px;
  left: 60px;
  width: 900px;
  height: 610px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--table-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -1px;
}

.takeaways-table td {
  padding: 10px 14px;
  vertical-align: middle;
  text-align: left;
}

.takeaways-table .takeaways-icon {
  width: 112px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 58px;
  font-weight: 400;
  text-align: center;
}

.takeaways-table td:last-child {
  padding-left: 24px;
}

.takeaways-flowchart {
  display: block;
  width: 80px;
  height: 74px;
  margin: auto;
  color: #233844;
}

.takeaways-people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  width: 84px;
  margin: auto;
  font-size: 35px;
  line-height: 1;
}

/* A quick key to the symbols used in the Fish diagram. */
.diagram-legend-slide {
  overflow: hidden;
}

.diagram-legend-title {
  position: absolute;
  top: 20px;
  right: 60px;
  left: 60px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  text-align: center;
}

.diagram-legend-grid {
  position: absolute;
  top: 130px;
  left: 70px;
  display: grid;
  width: 880px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 20px;
  font-family: var(--body-font-family);
}

.diagram-legend-item {
  display: flex;
  min-height: 125px;
  align-items: center;
  gap: 18px;
}

.diagram-legend-symbol {
  position: relative;
  display: grid;
  width: 84px;
  height: 76px;
  flex: 0 0 84px;
  place-items: center;
  font-size: 47px;
  line-height: 1;
}

.diagram-legend-margin {
  padding-bottom: 12px;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 4px;
}

.diagram-legend-symbol img {
  width: 52px;
  height: 52px;
}

.diagram-legend-surface svg {
  display: block;
  width: 84px;
  height: 76px;
}

.diagram-legend-item p {
  margin: 0;
  text-align: left;
}

.diagram-legend-item strong,
.diagram-legend-item p span {
  display: block;
}

.diagram-legend-item strong {
  font-size: 29px;
  line-height: 1.05;
}

.diagram-legend-item p span {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.diagram-legend-actions {
  grid-column: 1 / -1;
  min-height: 100px;
}

.diagram-legend-actions-symbol {
  display: block;
  height: 116px;
}

.diagram-legend-actions-symbol img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 60px;
  object-fit: contain;
  transform: translateX(-50%);
}

.diagram-legend-actions-symbol > span {
  position: absolute;
  top: 0;
  font-size: 32px;
  line-height: 1;
}

.diagram-legend-action-hand {
  left: 4px;
}

.diagram-legend-action-chart {
  right: 4px;
}

/* A child-simple translation of Rasmussen's original diagram. */
.plain-model-slide {
  overflow: hidden;
}

#impress #the-fish-diagram :is(.plain-boundary-reveal, .plain-model-margin).is-rendered { opacity: 1; }

.plain-playing-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.plain-playing-surface-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  fill: #b6e2b6;
  fill-opacity: 0.82;
}

.plain-playing-surface-margin {
  fill: #ffad5c;
  fill-opacity: 1;
}

.plain-playing-surface-label {
  position: absolute;
  top: 442px;
  left: 372px;
  z-index: 2;
  width: 285px;
  color: #000;
  font-family: var(--body-font-family);
  font-size: 34px;
  font-weight: 700;
  text-align: center;
}

.plain-playing-surface-shade,
.plain-playing-surface-label {
  transition: opacity 750ms ease;
}

#impress #the-fish-diagram:has(.plain-boundary-motions.substep-visible) .plain-playing-surface-shade,
#impress #the-fish-diagram:has(.plain-boundary-motions.substep-visible) .plain-playing-surface-label {
  opacity: 0;
}

.plain-model-outline {
  position: absolute;
  top: 126px;
  left: 160px;
  z-index: 1;
  width: 700px;
  height: auto;
}

.plain-boundary-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.plain-boundary-motions,
.plain-barrier-motion {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.plain-economic-motion {
  --barrier-inward-x: -105px;
  --barrier-inward-y: 70px;
  --barrier-outward-x: 42.5px;
  --barrier-outward-y: -27.5px;
}

.plain-workload-motion {
  --barrier-inward-x: -90px;
  --barrier-inward-y: -60px;
  --barrier-outward-x: 37.5px;
  --barrier-outward-y: 25px;
}

.plain-barrier-moving {
  opacity: 0;
}

#impress #the-fish-diagram .plain-boundary-motions.substep-visible {
  transition: opacity 120ms linear;
}

#impress #the-fish-diagram:has(.plain-boundary-motions.substep-visible) .plain-economic-reveal .plain-model-outline,
#impress #the-fish-diagram:has(.plain-boundary-motions.substep-visible) .plain-workload-reveal .plain-model-outline {
  opacity: 0.24;
  transition: opacity 180ms linear;
}

.plain-boundary-motions.substep-visible .plain-barrier-moving {
  animation: plain-barrier-shift 4.8s cubic-bezier(0.3, 0, 0.7, 1) both;
}

/* Finish fading the playing surface before the first boundary moves. */
.plain-boundary-motions.substep-visible .plain-economic-motion .plain-barrier-moving {
  animation-delay: 750ms;
}

/* Start the workload boundary one second after the economic boundary. */
.plain-boundary-motions.substep-visible .plain-workload-motion .plain-barrier-moving {
  animation-delay: 1750ms;
}

@keyframes plain-barrier-shift {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  38% {
    opacity: 1;
    transform: translate(var(--barrier-inward-x), var(--barrier-inward-y));
  }

  73% {
    opacity: 1;
    transform: translate(var(--barrier-outward-x), var(--barrier-outward-y));
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.plain-point-reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.plain-model-point {
  position: absolute;
  top: 386.5px;
  left: 494.5px;
  z-index: 4;
  width: 35px;
  height: auto;
  animation: operating-point-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

.plain-point-label {
  position: absolute;
  top: 340px;
  left: 392px;
  width: 240px;
  font-family: var(--body-font-family);
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.plain-roaming-point-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.plain-roaming-point-position {
  position: absolute;
  top: 386.5px;
  left: 494.5px;
  display: block;
  width: 35px;
  height: 35px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.plain-roaming-point-position.is-moving {
  transition: transform 6000ms ease-in-out;
}

body.impress-on-error-margin #the-fish-diagram .plain-roaming-point-position {
  visibility: hidden;
}

.plain-roaming-point {
  display: block;
  width: 100%;
  height: 100%;
  animation: operating-point-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

#impress #the-fish-diagram:has(.plain-roaming-point-reveal.substep-visible) .plain-point-reveal .plain-model-point {
  opacity: 0.45;
  filter: grayscale(0.35);
  animation: none;
  transform: scale(1);
  transition: opacity 650ms ease, filter 650ms ease;
}

@keyframes operating-point-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

.plain-boundary {
  position: absolute;
  z-index: 5;
  width: 270px;
  font-family: var(--body-font-family);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.05;
}

.plain-boundary p {
  margin: 0;
  text-align: left;
}

.plain-boundary-name {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

#the-fish-diagram .plain-boundary-name,
#ai-fish-diagram .plain-boundary-name,
#the-fish-diagram .plain-margin-label,
#the-fish-diagram .plain-point-label {
  font-family: var(--heading-font-family);
  font-weight: 400;
}

.plain-boundary-emoji {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.plain-boundary-performance .plain-boundary-emoji {
  margin-top: 10px;
}

.plain-boundary-economic .plain-boundary-emoji,
.plain-boundary-workload .plain-boundary-emoji {
  margin-bottom: 5px;
}

.plain-boundary-performance {
  top: 142px;
  left: 34px;
}

.plain-boundary-economic {
  top: 95px;
  right: 28px;
  width: 238px;
}

.plain-boundary-workload {
  right: 28px;
  bottom: 116px;
  width: 300px;
}

.plain-model-margin img {
  position: absolute;
  top: 131px;
  left: 230px;
  z-index: 2;
  width: 385px;
  height: auto;
}

.plain-margin-label {
  position: absolute;
  top: 270px;
  left: 270px;
  z-index: 3;
  font-family: var(--body-font-family);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.plain-guardian-actions {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

#impress #the-fish-diagram .plain-guardian-actions.substep-visible {
  transition: none;
}

.plain-guardian-icon {
  position: absolute;
  display: block;
  opacity: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 35px;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.plain-guardian-margin {
  width: 38.25px;
  max-width: 38.25px;
  height: 50.4px;
  filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.25));
}

.plain-gradient-arrows {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#impress #the-fish-diagram .plain-gradient-arrows {
  transition: none;
}

.plain-gradient-cost {
  color: #328ab7;
}

.plain-gradient-effort {
  color: #a569b5;
}

.plain-gradient-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.plain-gradient-arrows.substep-visible .plain-gradient-arrow {
  animation: plain-gradient-draw 1800ms ease-in-out both;
}

.plain-gradient-arrowhead,
.plain-gradient-label {
  opacity: 0;
}

.plain-gradient-arrows.substep-visible .plain-gradient-arrowhead,
.plain-gradient-arrows.substep-visible .plain-gradient-label {
  animation: plain-gradient-finish 350ms ease-out 1800ms both;
}

.plain-gradient-label {
  fill: currentColor;
  stroke: var(--surface-background);
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: var(--body-font-family);
  font-size: 24px;
  font-weight: 700;
  text-anchor: middle;
}

@keyframes plain-gradient-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes plain-gradient-finish {
  to {
    opacity: 1;
  }
}

/* “The Model”: a faithful, locally hosted adaptation of the SREcon24 slide. */
.model-portrait,
.model-original,
.domain-icon {
  position: absolute;
  height: auto;
}

.model-portrait {
  top: 50px;
  left: 150px;
  width: 150px;
}

.regular-text {
  position: absolute;
  font-family: var(--body-font-family);
  font-size: 25px;
}

.model-person {
  top: 265px;
  left: 0;
  width: 450px;
  margin: 0;
  text-align: center;
}

.model-original {
  top: 50px;
  right: 40px;
  width: 500px;
}

.model-paper-link {
  position: absolute;
  top: 435px;
  right: 10px;
  width: 550px;
  margin: 0;
  font-family: var(--body-font-family);
  font-size: 32px;
  line-height: 1.15;
}

.model-slide .regular-text {
  font-size: 32px;
  line-height: 1.2;
}

.model-slide :is(.model-person, .model-paper-link, .sociotechnical-hierarchical, .sociotechnical-multidisciplinary) {
  font-weight: 700;
}

.domain-icon {
  width: 120px;
}

.domain-radioactive {
  bottom: 200px;
  left: 50px;
}

.domain-ship {
  bottom: 200px;
  left: 300px;
}

.domain-hospital {
  bottom: 50px;
  left: 150px;
}

.sociotechnical-heading {
  top: 540px;
  right: 20px;
  width: 490px;
  margin: 0;
  text-align: left;
}

.sociotechnical-hierarchical {
  top: 590px;
  right: 20px;
  width: 430px;
  margin: 0;
  text-align: left;
}

.sociotechnical-multidisciplinary {
  top: 640px;
  right: 20px;
  width: 430px;
  margin: 0;
  text-align: left;
}

.systems-thinking {
  top: 700px;
  right: 20px;
  width: 490px;
  margin: 0;
  text-align: left;
}

/* The wider research landscape surrounding Rasmussen's boundary model. */
.paper-themes-slide {
  overflow: hidden;
}

.paper-themes-title {
  position: absolute;
  top: 18px;
  right: 45px;
  left: 45px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.7px;
  text-align: center;
}

.paper-themes-lede {
  position: absolute;
  top: 82px;
  right: 70px;
  left: 70px;
  margin: 0;
  font-family: var(--body-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.paper-themes-figure {
  position: absolute;
  top: 260px;
  left: 30px;
  width: 240px;
  height: auto;
  margin: 0;
  overflow: visible;
  background: #fff;
  box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
  transform: rotate(-1deg);
}

.paper-themes-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.paper-themes-figure figcaption {
  position: relative;
  padding: 7px 10px 8px;
  background: rgb(255 255 255 / 90%);
  font-family: var(--body-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

.paper-themes-list {
  position: absolute;
  top: 190px;
  right: 40px;
  left: 300px;
}

.paper-theme {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0 0 16px;
  text-align: left;
}

.impress-enabled .paper-themes-slide .paper-theme {
  opacity: 0;
}

.impress-enabled .paper-themes-slide.has-entered .paper-theme {
  animation: paper-theme-reveal 600ms ease-out both;
}

.impress-enabled .paper-themes-slide.has-entered .paper-theme:nth-child(2) {
  animation-delay: 1100ms;
}

.impress-enabled .paper-themes-slide.has-entered .paper-theme:nth-child(3) {
  animation-delay: 2200ms;
}

.impress-enabled .paper-themes-slide.has-entered .paper-theme:nth-child(4) {
  animation-delay: 3300ms;
}

.impress-enabled .paper-themes-slide.has-entered .paper-theme:nth-child(5) {
  animation-delay: 4400ms;
}

.impress-enabled .paper-themes-slide.is-rendered .paper-theme {
  animation: none;
  opacity: 1;
}

@keyframes paper-theme-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.paper-theme-emoji {
  display: block;
  width: 42px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 34px;
  line-height: 1;
  text-align: center;
}

.paper-theme-copy {
  margin: 0;
  text-align: left;
}

.paper-theme-copy strong,
.paper-theme-copy span {
  display: block;
}

.paper-theme-copy strong {
  font-family: var(--heading-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.paper-theme-copy span {
  margin-top: 5px;
  font-family: var(--body-font-family);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0;
}

/* SREcon24 socio-technical-system definition and visual explanation. */
.social-wiki-slide,
.social-systems-slide,
.complex-system-slide {
  overflow: hidden;
}

.social-wiki-title {
  margin: 0.5em 0;
  font-family: var(--heading-font-family);
  font-size: 64px;
  font-weight: 400;
  text-align: center;
}

.social-wiki-definition {
  position: absolute;
  top: 175px;
  left: 40px;
  right: 40px;
  margin: 0;
  height: auto;
  font-family: var(--body-font-family);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.social-wiki-visual img {
  position: absolute;
  height: auto;
}

.social-wiki-visual .social-separated {
  top: 380px;
  left: 50px;
  transform: scale(1.1);
  transform-origin: top left;
}

.social-wiki-visual .social-together {
  top: 373px;
  right: 20px;
  width: 300px;
  height: 288px;
}

.social-wiki-visual .social-together-complex {
  top: 0;
  left: 0;
  width: 300px;
}

.complex-system-slide .social-together.complex-system-reveal {
  top: 42%;
  right: auto;
  left: 50%;
  width: 340px;
  height: 223px;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center;
}

.complex-system-slide .social-systems-title {
  font-size: 64px;
}

.complex-ai-coping {
  position: absolute;
  right: 30px;
  bottom: 80px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0;
  text-align: center;
}

.complex-system-slide .complex-ai-image {
  position: static;
  display: block;
  width: 128px;
  height: auto;
  flex: 0 0 128px;
  margin: 0;
}

.complex-ai-coping figcaption {
  margin: 0;
  font-family: var(--body-font-family);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  text-wrap: wrap;
}

.social-system-network {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 300px;
  height: 288px;
  transform: translate(-50%, -50%) scale(0.52);
  transform-origin: center;
}

.social-fish-overlay-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.impress-enabled .complex-system-slide :is(.social-fish-piece, .social-system-network, .complex-ai-coping) {
  opacity: 0;
}

.impress-enabled .complex-system-slide.present .social-fish-piece {
  animation: social-fish-piece-reveal 1200ms ease-in-out both;
}

.impress-enabled .complex-system-slide.is-fish-rendered .social-fish-piece {
  opacity: 1;
  animation: none;
}

.impress-enabled .complex-system-slide.present .social-system-network {
  animation: complex-network-reveal 1100ms ease-in-out 1200ms both;
}

.impress-enabled .complex-system-slide.present .complex-ai-coping {
  animation: complex-ai-reveal 600ms ease-out 2300ms both;
}

.impress-enabled .complex-system-slide.is-rendered :is(.social-fish-piece, .social-system-network, .complex-ai-coping) {
  opacity: 1;
  animation: none;
}

@keyframes complex-network-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes complex-ai-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes social-fish-piece-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.social-fish-outline {
  top: 0;
  left: 0;
  width: 340px;
  filter: drop-shadow(0.5px 0 0 #111) drop-shadow(-0.5px 0 0 #111)
    drop-shadow(0 0.5px 0 #111) drop-shadow(0 -0.5px 0 #111);
}

.social-fish-error-margin {
  top: 2.43px;
  left: 34px;
  width: 187px;
  filter: drop-shadow(0.25px 0 0 #111) drop-shadow(-0.25px 0 0 #111)
    drop-shadow(0 0.25px 0 #111) drop-shadow(0 -0.25px 0 #111);
}

.before-continue-slide {
  overflow: hidden;
}

.before-continue-title {
  position: absolute;
  top: 22px;
  right: 60px;
  left: 60px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
}

.before-continue-row {
  position: absolute;
  top: 145px;
  left: 110px;
  display: grid;
  grid-template-columns: 270px 80px 1fr;
  align-items: center;
  width: 800px;
  height: 230px;
}

.before-continue-row img {
  display: block;
  height: auto;
  margin: auto;
}

.before-continue-ai {
  width: 216px;
}

.before-continue-equals {
  width: 50px;
}

.before-continue-row p {
  margin: 0;
  font-family: var(--body-font-family);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
}

.before-continue-complexity {
  top: 405px;
}

.before-continue-complex {
  width: 250px;
}

.social-systems-slide img,
.complex-system-slide img {
  position: absolute;
  height: auto;
}

.social-systems-title {
  position: absolute;
  top: 20px;
  right: 50px;
  left: 50px;
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.5px;
  text-align: center;
}

.social-separated {
  position: absolute;
  top: 90px;
  left: 50px;
  width: 450px;
  height: 280px;
}

.social-separated-subjects,
.social-separated-magnifiers {
  position: absolute;
  inset: 0;
}

.social-people-heads {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  width: 190px;
  height: 190px;
  padding: 16px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 55px;
  line-height: 1;
}

.social-magnifier {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 190px;
  border: 8px solid #000;
  border-radius: 50%;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 67px;
  line-height: 1;
}

.social-magnifier::after {
  position: absolute;
  bottom: -51px;
  width: 18px;
  height: 78px;
  border-radius: 9px;
  background: #000;
  content: "";
}

.social-magnifier-people {
  position: absolute;
  top: 0;
  left: 0;
}

.social-magnifier-people::after {
  left: -15px;
  transform: rotate(47deg);
}

.social-complex-image {
  top: 30px;
  left: 295px;
  width: 140px;
}

.social-magnifier-complex {
  position: absolute;
  top: 0;
  left: 270px;
  width: 190px;
  height: 190px;
  border-width: 8px;
}

.social-magnifier-complex::after {
  right: -15px;
  transform: rotate(-47deg);
}

.social-together {
  position: absolute;
  top: 63px;
  right: 70px;
  width: 250px;
  height: 240px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}

.complex-system-slide .social-together-complex {
  top: 0;
  left: 0;
  width: 300px;
}

.social-system-person {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid #111;
  border-radius: 50%;
  background: #fff;
  font-size: 36px;
}

.social-wiki-visual .social-system-person,
.complex-system-slide .social-system-person {
  z-index: 2;
}

.complex-system-slide .social-arrow-pulses {
  z-index: 3;
}

.social-wiki-visual .social-system-person,
.complex-system-slide .social-system-person {
  width: 63.25px;
  height: 63.25px;
  margin: -4.125px 0 0 -4.125px;
  border-width: 2.3px;
  font-size: 49.45px;
}

.social-arrow-pulses {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#impress .step .social-arrow-pulses.substep-visible {
  transition: none;
}

.social-arrow-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff36c 0 18%, #ff9500 40%, #ff5200 78%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #b33e00, 0 0 12px 3px rgb(255 106 0 / 75%);
  animation: social-arrow-pulse 1600ms ease-in-out both;
}

@keyframes social-arrow-pulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }

  30%,
  75% {
    opacity: 1;
    transform: scale(1.5);
  }

  55% {
    opacity: 0.8;
    transform: scale(0.85);
  }
}

body.impress-on-social-and-systems-wiki .social-system-person,
body.impress-on-complex-system-and-boundaries .social-system-person {
  animation: social-wiki-head-pulse 2.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes social-wiki-head-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.social-system-person-one {
  top: 115px;
  left: -5px;
}

.social-system-person-two {
  top: 79px;
  left: 147px;
}

.social-system-person-three {
  top: 161px;
  left: 243px;
}

.social-system-person-four {
  top: 227px;
  left: 103px;
}

#social-and-systems .social-systems-title {
  top: 20px;
  font-size: 55px;
}

.social-hierarchy-content {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 858px;
  height: 100%;
  transform: translateX(-50%);
}

.social-hierarchy-model {
  bottom: 198px;
  left: 264px;
  width: 264px;
}

.social-hierarchy-label {
  position: absolute;
  bottom: 115px;
  left: 198px;
  width: 422.4px;
  height: auto;
  margin: 0;
  font-family: var(--body-font-family);
  font-size: 30.8px;
  line-height: 1.05;
  text-align: center;
}

.social-hierarchy-label strong,
.social-hierarchy-label small {
  display: block;
}

.social-hierarchy-label small {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.social-hierarchy-research {
  bottom: 187px;
  left: 13.2px;
  width: 264px;
}

.social-hierarchy-environment {
  right: auto;
  bottom: 187.5px;
  left: 501.6px;
  width: 343.2px;
}

.social-context-reveal img {
  position: absolute;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .impress-enabled .opening-hook-slide > p,
  .impress-enabled .opening-hook-slide.has-entered > p,
  .impress-enabled .paper-themes-slide .paper-theme,
  .impress-enabled .paper-themes-slide.has-entered .paper-theme {
    animation: none;
    opacity: 1;
  }

  .impress-enabled .complex-system-slide :is(.social-fish-piece, .social-system-network, .complex-ai-coping),
  .impress-enabled .complex-system-slide.present :is(.social-fish-piece, .social-system-network, .complex-ai-coping) {
    animation: none;
    opacity: 1;
  }

  .plain-gradient-arrows.substep-visible .plain-gradient-arrow {
    animation: none;
    stroke-dashoffset: 0;
  }

  .plain-gradient-arrows.substep-visible .plain-gradient-arrowhead,
  .plain-gradient-arrows.substep-visible .plain-gradient-label {
    animation: none;
    opacity: 1;
  }

  .plain-boundary-motions.substep-visible :is(.plain-economic-motion, .plain-workload-motion) .plain-barrier-moving {
    animation-delay: 0ms;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .social-arrow-pulse {
    animation: none;
    opacity: 1;
  }
}

/* AI arrives at one operating state before the camera opens onto its constraints. */
.ai-journey-slide { background: var(--surface-background); }
#impress .ai-journey-slide:not(.active) { opacity: 0; pointer-events: none; }
@media screen {
  #impress .expertise-erosion-slide:not(.active) {
    opacity: 1;
    background: transparent;
  }
  #impress .expertise-sequence-slide.has-entered:not(.active) {
    opacity: 1;
    background: transparent;
  }
  #impress .ai-arrival-slide:not(.active):has(.ai-arrival-reveal.substep-visible) {
    opacity: 1;
    background: transparent;
    z-index: 1;
  }
  .ai-arrival-slide:not(.active) .ai-arrival-point { visibility: hidden; }
  .ai-arrival-slide:not(.active) .ai-arrival-reveal.substep-visible .ai-arrival-ball { animation: none; transform: none; opacity: 0.45; }
  .ai-arrival-slide:not(.active) .ai-arrival-reveal.substep-visible .ai-arrival-question { animation: none; opacity: 1; }
}
.ai-arrival-slide { --ai-arrival-duration: 2400ms; overflow: hidden; }
.ai-arrival-point { position: absolute; top: 320px; left: 440px; width: 140px; height: 140px; opacity: 1; }
.ai-arrival-slide:has(.ai-arrival-reveal.substep-visible) .ai-arrival-point { animation: ai-arrival-point-fade 600ms ease-out var(--ai-arrival-duration) both; }
.ai-arrival-reveal { position: absolute; inset: 0; }
.ai-arrival-ball { position: absolute; top: 310px; left: 430px; width: 160px; height: 160px; object-fit: contain; }
.ai-arrival-reveal.substep-visible .ai-arrival-ball { animation: ai-ball-roll-in var(--ai-arrival-duration) cubic-bezier(0.18, 0.65, 0.3, 1) both; }
.ai-arrival-question,
.ai-fish-question { position: absolute; left: 60px; right: 60px; margin: 0; font-family: var(--body-font-family); font-size: 38px; font-weight: 700; line-height: 1.15; text-align: center; }
.ai-arrival-question { top: 565px; }
.ai-arrival-reveal.substep-visible .ai-arrival-question { animation: ai-question-arrive 2800ms ease both; }
.ai-fish-question { bottom: 35px; visibility: hidden; }
.ai-fish-question span { white-space: nowrap; }
.ai-fish-question.substep-visible { visibility: visible; }
@keyframes ai-ball-roll-in { from { transform: translateX(-650px) rotate(-720deg); } to { transform: translateX(0) rotate(0); } }
@keyframes ai-arrival-point-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes ai-question-arrive { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }
.ai-fish-model { position: absolute; inset: 0; }
.ai-fish-slide { background: transparent; }
.impress-enabled #ai-fish-diagram:not(.is-rendered) .ai-fish-model { opacity: 0; }
.impress-enabled #ai-fish-diagram.active.present:not(.is-rendered) .ai-fish-model { animation: ai-fish-diagram-reveal 500ms ease-in-out 500ms both; }
#impress #ai-fish-diagram.is-rendered { opacity: 1; }
.impress-enabled #ai-fish-diagram.is-rendered .ai-fish-model { opacity: 1; animation: none; }
@keyframes ai-fish-diagram-reveal { from { opacity: 0; } to { opacity: 1; } }
.ai-fish-margin { position: absolute; top: 131px; left: 230px; width: 385px; height: auto; }
.ai-fish-slide .plain-boundary-workload { bottom: 158px; }
/* Match the arrival ball's canvas diameter: 160px at scale 7 equals 44.8px at scale 25. */
.ai-roaming-point-position { --ai-ball-diameter: 44.8px; position: absolute; top: calc(404px - var(--ai-ball-diameter) / 2); left: calc(512px - var(--ai-ball-diameter) / 2); width: var(--ai-ball-diameter); height: var(--ai-ball-diameter); will-change: transform; }
.ai-roaming-point-position.is-moving { transition: transform 6000ms linear; }
.ai-roaming-point { display: block; width: 100%; height: 100%; object-fit: contain; }
body.impress-on-ai-margin-pressure .ai-roaming-point-position { visibility: hidden; }
/* Presenter-controlled pressure scene, independent of the roaming model point. */
.ai-margin-pressure-slide { --ai-margin-ball-diameter: 131.36576px; padding: 0; }
.ai-margin-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ai-margin-pressure-slide.has-entered .ai-margin-scene { opacity: 1; }
.ai-margin-lemming { position: absolute; z-index: 1; left: 660px; bottom: 50px; width: 208px; height: 208px; opacity: 1; transition: opacity 400ms ease; }
.ai-margin-lemming img { display: block; width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.ai-margin-pressure-slide.is-pressure-complete .ai-margin-lemming { opacity: 0; }
.ai-margin-start-reference { position: absolute; z-index: 2; left: calc(940px - var(--ai-margin-ball-diameter) / 2); top: calc(350px - var(--ai-margin-ball-diameter) / 2); width: var(--ai-margin-ball-diameter); height: var(--ai-margin-ball-diameter); object-fit: contain; opacity: 0.45; }
.ai-margin-reference-label { position: absolute; z-index: 5; top: 205px; left: 710px; width: 300px; height: 85px; margin: 0; opacity: 0; pointer-events: none; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; text-align: center; white-space: nowrap; }
.ai-margin-reference-label svg { position: absolute; inset: 0; width: 300px; height: 85px; }
.ai-margin-pressure-slide.has-entered .ai-margin-reference-label { opacity: 1; }
.ai-margin-point { --margin-point-x: 940px; --margin-point-y: 350px; position: absolute; z-index: 4; left: calc(var(--margin-point-x) - var(--ai-margin-ball-diameter) / 2); top: calc(var(--margin-point-y) - var(--ai-margin-ball-diameter) / 2); width: var(--ai-margin-ball-diameter); height: var(--ai-margin-ball-diameter); }
.ai-margin-point::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--surface-background); }
.ai-margin-point img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.ai-margin-trail { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.ai-margin-trail-path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 1 13; stroke-linecap: round; }
.ai-margin-rain { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.ai-margin-bucket { position: absolute; top: 0; left: var(--rain-x); width: 82px; height: 123px; object-fit: contain; opacity: 0; }
.ai-margin-pressure-slide.is-raining .ai-margin-bucket { animation: ai-slop-rain 2600ms cubic-bezier(0.45, 0, 0.65, 1) var(--rain-delay) both; }
.ai-margin-pressure-slide.is-pressure-complete .ai-margin-bucket { animation: none; opacity: 1; transform: translate3d(var(--rain-sway), var(--rain-floor), 0) rotate(var(--rain-tilt)); }
.ai-margin-warning { position: absolute; z-index: 5; top: 292px; left: 505px; display: flex; width: 72px; height: 72px; margin: 0; opacity: 0; pointer-events: none; }
.ai-margin-pressure-slide.has-crossed-margin .ai-margin-warning { opacity: 1; }
.ai-margin-red-light { flex: 0 0 72px; width: 72px; height: 72px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 72px; font-weight: 400; line-height: 1; letter-spacing: 0; text-align: center; }
.ai-margin-pressure-slide.has-crossed-margin .ai-margin-red-light { animation: ai-margin-red-alert 1200ms ease-in-out infinite; }
.ai-margin-sre-panic { position: absolute; z-index: 5; top: 30px; left: 260px; width: 220px; margin: 0; pointer-events: none; text-align: center; }
.ai-margin-sre-panic picture, .ai-margin-sre-panic img { display: block; width: 100%; height: auto; }
.ai-margin-sre-panic figcaption { margin-top: 10px; font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.ai-margin-pressure-trigger { position: absolute; width: 0; height: 0; pointer-events: none; }
.ai-margin-explanation { position: absolute; z-index: 2; top: 405px; left: 60px; width: 350px; opacity: 0; pointer-events: none; }
.ai-margin-pressure-slide.has-entered .ai-margin-explanation { opacity: 1; }
.ai-margin-explanation h2 { margin: 0 0 16px; font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -1.1px; white-space: nowrap; }
.ai-margin-explanation ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ai-margin-explanation li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: 26px; font-weight: 700; line-height: 1.17; letter-spacing: -0.45px; }
.ai-margin-explanation li > [aria-hidden] { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 30px; line-height: 1; letter-spacing: 0; }
.ai-margin-summary { padding: 0; background: transparent; }
.ai-margin-summary:not(.active) { pointer-events: none; }
@keyframes ai-slop-rain {
  0% { opacity: 0; transform: translate3d(var(--rain-start-x), -155px, 0) rotate(-14deg); }
  5% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(var(--rain-sway), var(--rain-floor), 0) rotate(var(--rain-tilt)); }
}
@keyframes ai-margin-red-alert {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 4px rgb(230 0 0 / 35%)); }
  50% { opacity: 1; filter: drop-shadow(0 0 16px rgb(230 0 0 / 75%)); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-margin-red-light { animation: none !important; opacity: 1; }
}
@media screen {
  .expertise-erosion-slide.active, .expertise-sequence-slide.active { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .impress-enabled #ai-fish-diagram.active .ai-fish-model,
  .impress-enabled #ai-fish-diagram.active.present .ai-fish-model { animation: none; opacity: 1; }
  .ai-arrival-reveal.substep-visible .ai-arrival-ball,
  .ai-arrival-reveal.substep-visible .ai-arrival-question { animation: none; }
  .ai-arrival-slide:has(.ai-arrival-reveal.substep-visible) .ai-arrival-point { animation: none; opacity: 0; }
}

/* Fish-diagram close-ups contain plain content in the diagram's coordinate space. */
.boundary-detail-slide {
  padding: 36px 46px;
  height: 780px;
}
.boundary-detail-icon { position: absolute; left: 42px; top: 35px; width: 105px; height: 110px; font-size: 86px; line-height: 1.2; text-align: center; }
img.boundary-detail-icon { height: auto; }
#error-margin .error-margin-lemming { left: 65px; width: 60px; height: 60px; }
.error-margin-lemming img { display: block; width: 100%; height: 100%; }
.boundary-detail-title { margin: 0 0 0 130px; font-family: var(--heading-font-family); font-weight: 500; font-size: 46px; line-height: 1.08; letter-spacing: -1.5px; }
.boundary-detail-lede { margin: 18px 0 0 130px; font-size: 26px; line-height: 1.22; text-align: left; letter-spacing: -0.6px; }
.boundary-detail-no-icon .boundary-detail-title,
.boundary-detail-no-icon .boundary-detail-lede { margin-left: 0; }
.boundary-detail-grid { position: absolute; left: 46px; right: 46px; top: 215px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.boundary-detail-copy { padding: 18px 18px 12px; }
.boundary-detail-copy h3 { margin: 0 0 18px; font-family: var(--heading-font-family); font-size: 34px; line-height: 1.05; letter-spacing: -0.5px; }
.boundary-detail-copy ul { margin: 0; padding-left: 25px; }
.boundary-detail-copy li { margin: 0 0 20px; font-size: 25px; line-height: 1.25; letter-spacing: -0.5px; }
.boundary-detail-copy li:last-child { margin-bottom: 8px; }
.boundary-detail-copy .boundary-emoji-list { padding-left: 0; list-style: none; }
.boundary-emoji-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.boundary-list-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 30px; line-height: 1; letter-spacing: 0; text-align: center; }
.boundary-list-icon { display: block; width: 30px; height: 30px; object-fit: contain; }
#economic-boundary-actions .boundary-action-entry:has(> .boundary-exit-sign) { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
:is(#workload-boundary, #economic-boundary-actions) .boundary-exit-sign { position: relative; display: block; width: 64px; line-height: 0; }
:is(#workload-boundary, #economic-boundary-actions) .boundary-exit-sign::before { content: ""; position: absolute; inset: 10.6% 7.5%; border-radius: 2.5px; background: #fff; }
:is(#workload-boundary, #economic-boundary-actions) .boundary-exit-sign .boundary-list-icon { position: relative; width: 64px; height: auto; }
.ai-pressure-slide .boundary-detail-copy li { font-size: 24px; margin-bottom: 17px; }
.ai-pressure-slide small { font-size: 18px; letter-spacing: 0; }
.boundary-detail-conclusion { position: absolute; bottom: 77px; left: 46px; right: 46px; margin: 0; font-family: var(--body-font-family); font-size: 28px; font-weight: 700; line-height: 1.18; text-align: left; }
.ai-pressure-slide .boundary-detail-conclusion { top: 620px; bottom: 36px; display: flex; align-items: center; justify-content: center; font-size: 32px; text-align: center; }
#error-margin .boundary-detail-conclusion { bottom: 48px; text-align: center; }
.boundary-detail-source { position: absolute; bottom: 25px; left: 46px; right: 46px; margin: 0; font-size: 17px; letter-spacing: 0; line-height: 1.2; text-align: left; }
.boundary-detail-source a { font-family: inherit; }
.boundary-action-table { position: absolute; top: 205px; left: 46px; right: 46px; width: 928px; border-collapse: collapse; font-size: 23px; line-height: 1.23; letter-spacing: -0.5px; }
.boundary-action-table th { padding: 12px 16px; text-align: left; font-family: var(--table-font-family); font-size: 28px; }
.boundary-action-table td { padding: 14px 16px; text-align: left; vertical-align: top; }
.boundary-action-table th:first-child { width: 42%; }
.boundary-action-table strong { font-weight: 650; }
:is(#economic-boundary-actions, #workload-boundary-actions, #error-margin) .boundary-action-table td { padding-block: 12px; }
#error-margin .boundary-action-table td { padding-block: 9px; }
.boundary-action-table .boundary-action-entry { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }

:is(#economic-boundary, #economic-boundary-actions, #workload-boundary, #workload-boundary-actions, #performance-boundary, #error-margin, #ai-economic-pressure, #ai-workload-pressure) :is(.boundary-detail-lede, .boundary-detail-copy li, .boundary-detail-conclusion, .boundary-action-table th, .boundary-action-table td) {
  font-weight: 700;
}

#workload-boundary .boundary-detail-grid {
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}

#workload-boundary .boundary-detail-copy h3 {
  min-height: 2.1em;
}

#workload-boundary .boundary-detail-copy:last-child .boundary-emoji-list li {
  grid-template-columns: 64px minmax(0, 1fr);
}

#workload-boundary .boundary-detail-copy:last-child .boundary-list-emoji {
  justify-self: center;
}

#ai-workload-pressure .workslop-chain p {
  font-weight: 700;
}

#ai-economic-pressure .boundary-detail-copy strong {
  font-weight: inherit;
}

#impress :is(#economic-boundary-actions, #workload-boundary-actions, #error-margin) .boundary-action-table,
#impress :is(#economic-boundary-actions, #workload-boundary-actions, #error-margin) .boundary-action-table :where(*):not(:where(.boundary-list-emoji)) {
  font-family: var(--body-font-family);
}

#impress :is(#economic-boundary-actions, #workload-boundary-actions, #error-margin) .boundary-action-table thead,
#impress :is(#economic-boundary-actions, #workload-boundary-actions, #error-margin) .boundary-action-table thead :where(*) {
  font-family: var(--heading-font-family);
  font-weight: 400;
}

.workload-proxy-figure { justify-self: center; width: 211.5px; margin: 0; }
.workload-proxy-figure img { display: block; width: 211.5px; height: 211.5px; object-fit: contain; }
.workload-slop-figure { justify-self: center; width: 120px; margin: 0; }
.workload-slop-figure img { display: block; width: 120px; height: 180px; object-fit: contain; }
.workload-recovery-figure { justify-self: center; width: 140px; margin: 0; font-size: 130px; line-height: 1; letter-spacing: 0; text-align: center; }
.workslop-chain { position: absolute; top: 180px; left: 46px; right: 46px; display: grid; grid-template-columns: minmax(0, 1fr) 235px; grid-auto-rows: 140px; column-gap: 39px; row-gap: 28px; align-items: center; }
.workslop-chain > div { margin: 0; padding: 12px 0 12px 20px; }
.workslop-chain h3 { margin: 0 0 12px; font-family: var(--heading-font-family); font-size: 31px; line-height: 1.1; }
.workslop-chain p { margin: 0; font-size: 24px; line-height: 1.35; text-align: left; letter-spacing: -0.6px; }
.expertise-erosion-slide { padding: 36px 46px; }
.expertise-erosion-title { position: absolute; top: 20px; left: 46px; right: 46px; margin: 0; font-family: var(--heading-font-family); font-weight: 400; font-size: 64px; line-height: 1.05; letter-spacing: -2px; text-align: center; }
.expertise-erosion-book { position: absolute; left: 90px; top: 135px; width: 230px; margin: 0; }
.expertise-erosion-book img { display: block; width: 100%; height: auto; }
.expertise-erosion-book figcaption { width: 230px; margin-top: 24px; font-size: 24px; font-weight: 700; line-height: 1.18; letter-spacing: -0.35px; text-align: left; }
.expertise-erosion-book figcaption a { font-family: inherit; }
.expertise-erosion-quote { position: absolute; left: 370px; right: 46px; top: 135px; margin: 0; font-size: 24px; font-weight: 700; line-height: 1.28; letter-spacing: -0.35px; }
.expertise-erosion-quote p { margin: 0; text-align: left; }
.expertise-erosion-reverse-book { position: absolute; right: 90px; bottom: 60px; width: 250px; margin: 0; }
.expertise-erosion-reverse-book img { display: block; width: 100%; height: auto; }
.expertise-erosion-worse { position: absolute; left: 370px; top: 500px; width: 240px; margin: 0; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-align: right; white-space: nowrap; }
.expertise-erosion-citation {
  position: absolute;
  right: 46px;
  bottom: 24px;
  left: 46px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
}
/* One scene on entry, followed by three presenter-controlled replacements. */
.expertise-sequence-slide { --expertise-network-scale: 1.65; --expertise-network-width: calc(300px * var(--expertise-network-scale)); }
.expertise-sequence-visuals, .expertise-people-scene { position: absolute; inset: 0; opacity: 1; transition: opacity 800ms ease; }
.expertise-people-network { position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%) scale(var(--expertise-network-scale)); }
.expertise-people-network > img { display: block; width: 300px; height: auto; }
.expertise-people-network .social-system-person { z-index: 2; }
.expertise-arrow-pulses { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.expertise-shrug-scene { position: absolute; top: 50%; left: 50%; width: calc(var(--expertise-network-width) + 272px); display: flex; align-items: center; gap: 36px; margin: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity 800ms ease; }
.expertise-sequence-shrug { flex: 0 0 100px; font-size: 100px; line-height: 1; letter-spacing: 0; text-align: center; }
.expertise-shrug-network { position: relative; flex: 0 0 var(--expertise-network-width); }
.expertise-shrug-network > img { display: block; width: 100%; height: auto; }
.expertise-fire { position: absolute; top: 63%; left: 50%; font-size: 180px; line-height: 1; transform: translate(-50%, -50%); opacity: 0; transition: opacity 600ms ease; }
.expertise-sequence-slide:has(.expertise-shrug-trigger.substep-visible) .expertise-people-scene { opacity: 0; }
.expertise-sequence-slide:has(.expertise-shrug-trigger.substep-visible) .expertise-shrug-scene { opacity: 1; }
.expertise-sequence-slide:has(.expertise-fire-trigger.substep-visible) .expertise-fire { opacity: 1; }
.expertise-sequence-slide.active:has(.expertise-fire-trigger.substep-visible) .expertise-fire { animation: expertise-fire-glow 1600ms ease-in-out infinite; }
.expertise-sequence-slide:has(.expertise-fine-scene.substep-visible) .expertise-sequence-visuals { opacity: 0; pointer-events: none; }
.expertise-sequence-slide:has(.expertise-fine-scene.substep-visible) .expertise-fire { animation: none; }
.expertise-fine-scene { position: absolute; inset: 90px; margin: 0; }
.expertise-fine-scene picture, .expertise-fine-scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes expertise-fire-glow { from, to { filter: drop-shadow(0 0 8px #ff9700); } 50% { filter: drop-shadow(0 0 22px #ff3c00) drop-shadow(0 0 38px #ffd74a); } }
@media (prefers-reduced-motion: reduce) {
  .expertise-sequence-slide :is(.expertise-sequence-visuals, .expertise-people-scene, .expertise-shrug-scene, .expertise-fire, .expertise-fine-scene) { transition: none !important; }
  .expertise-sequence-slide .expertise-fire { animation: none !important; filter: drop-shadow(0 0 10px #ff9700); }
}

@media print {
  #impress .plain-gradient-arrows .plain-gradient-arrow {
    animation: none;
    stroke-dashoffset: 0;
  }

  #impress .plain-gradient-arrows :is(.plain-gradient-arrowhead, .plain-gradient-label) {
    animation: none;
    opacity: 1;
  }

  .ai-margin-scene { opacity: 1 !important; }
  .ai-margin-explanation { opacity: 1 !important; }
  .ai-margin-reference-label { opacity: 1 !important; }
  .ai-margin-summary { display: none !important; }
  .ai-margin-pressure-slide.is-raining .ai-margin-bucket { animation: none !important; opacity: 1; transform: translate3d(var(--rain-sway), var(--rain-floor), 0) rotate(var(--rain-tilt)); }
  .ai-margin-red-light { animation: none !important; }
  .expertise-sequence-visuals { display: none; }
  .expertise-fine-scene { opacity: 1 !important; }
  html,
  body {
    overflow: visible !important;
    background: var(--surface-background) !important;
  }

  #impress,
  .step {
    position: static !important;
    transform: none !important;
  }

  #impress :is(.ai-margin-pressure-slide, .ai-margin-summary, .closing-summary) { position: relative !important; }

  .step {
    page-break-after: always;
    opacity: 1 !important;
  }

  .references-slide {
    height: auto;
    overflow: visible;
  }

  .references-tabs {
    display: none;
  }

  .references-page[hidden] {
    display: block !important;
  }

  .references-page + .references-page {
    break-before: page;
    page-break-before: always;
  }

  .references-page::before {
    display: block;
    margin-bottom: 18px;
    font-family: var(--heading-font-family);
    font-size: 32px;
  }

  #references-qcon::before { content: "QCon sources"; }
  #references-srecon26::before { content: "SREcon26 sources"; }
  #references-tokens::before { content: "Token economy sources"; }
  #references-resilience::before { content: "Resilience sources"; }

  .substep,
  .ordered-substep {
    opacity: 1 !important;
  }

  .ai-fish-model {
    animation: none !important;
    opacity: 1 !important;
  }

  .ai-fish-question { visibility: visible !important; }

  .ai-arrival-point {
    animation: none !important;
    opacity: 0 !important;
  }

  .ai-arrival-ball,
  .ai-arrival-question {
    animation: none !important;
  }

  .impress-enabled .opening-hook-slide > p,
  .impress-enabled .paper-themes-slide .paper-theme {
    animation: none !important;
    opacity: 1 !important;
  }

  .impress-enabled .complex-system-slide :is(.social-fish-piece, .social-system-network, .complex-ai-coping) {
    animation: none !important;
    opacity: 1 !important;
  }

  .fallback-message {
    display: none !important;
  }
}