:root {
  --ink: #24313a;
  --paper: #f6f4ed;
  --red-lane: #f5c9c5;
  --blue-lane: #c8def3;
  --red-car: #e93b3b;
  --blue-car: #2369e8;
  --cell-width: 146px;
  --cluster-left: 230px;
  --lane-top-y: 55px;
  --lane-gap: 132px;
}

html,
body {
  background: var(--paper);
}

.reveal {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.reveal .slides section.highway-slide {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  text-align: left;
}

.reveal .slides section.abstract-slide {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  text-align: left;
  --cell-width: 112px;
  --lane-gap: 112px;
}

.reveal .slides section.comparison-slide {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  text-align: left;
  --cell-width: 96px;
  --lane-gap: 76px;
}

.reveal .slides section.transducer-slide {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  text-align: left;
  --cell-width: 96px;
  --lane-gap: 76px;
  --scan-step: 0;
  --scan-accent: #7a63c7;
}

.reveal .slides section.code-slide {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  text-align: left;
}

.reveal .slides section.research-slide {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  text-align: left;
}

.slide-frame {
  display: grid;
  grid-template-rows: 274px 248px 1fr;
  width: 100%;
  height: 100%;
}

.slide-frame h1 {
  align-self: start;
  box-sizing: border-box;
  width: 890px;
  height: auto;
  margin: 0;
  padding: 42px 0 0 70px;
  color: #1f2d35;
  font-size: 46px;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}

.state-question .slide-frame h1 {
  width: 1100px;
  font-size: 38px;
  line-height: 1.08;
}

.objective-note {
  width: 1140px;
  margin: 38px 0 0 70px;
  color: #33434d;
  font-size: 26px;
  font-weight: 520;
  line-height: 1.2;
  white-space: nowrap;
}

.abstract-frame {
  display: grid;
  grid-template-columns: 590px 430px;
  grid-template-rows: 274px 1fr;
  column-gap: 120px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 42px 70px 0;
}

.reveal .slides section.abstract-slide .abstract-title {
  width: 590px;
  margin: 0;
  color: #1f2d35;
  font-size: 42px;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

.comparison-frame {
  display: grid;
  grid-template-rows: 76px 152px 58px 152px;
  row-gap: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 34px 70px 0;
}

.reveal .slides section.comparison-slide .comparison-title {
  align-self: end;
  width: 900px;
  margin: 0;
  color: #1f2d35;
  font-size: 34px;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

.reveal .slides section.comparison-slide .comparison-title-new {
  align-self: center;
}

.transducer-frame {
  position: relative;
  display: grid;
  grid-template-rows: 54px 152px 220px auto;
  row-gap: 18px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 34px 70px 0;
}

.reveal .slides section.transducer-slide .transducer-title {
  align-self: start;
  width: 900px;
  margin: 0;
  color: #1f2d35;
  font-size: 34px;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

.comparison-slide .comparison-new {
  opacity: 1;
}

.comparison-slide.is-entering-from-prior .comparison-new {
  opacity: 0;
}

.comparison-slide.is-entering-from-prior.present .comparison-new {
  animation: comparisonNewAppear 280ms ease 720ms forwards;
}

@keyframes comparisonNewAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rules-card {
  align-self: start;
  box-sizing: border-box;
  width: 430px;
  border: 4px solid #20282f;
  border-radius: 8px;
  padding: 20px 24px 18px;
  background: #fff;
}

.rules-card h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 8px;
  color: #1f2d35;
  font-size: 30px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.rules-card .rule-heading-red {
  color: var(--red-car);
}

.rules-card .rule-heading-blue {
  margin-top: 18px;
  color: var(--blue-car);
}

.movement-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateY(1px);
}

.hint-token {
  display: block;
  width: 23px;
  height: 23px;
  border: 3px solid #20282f;
  border-radius: 50%;
  background: currentColor;
  box-sizing: border-box;
}

.hint-arrow {
  display: block;
  min-width: 22px;
  color: currentColor;
  font-size: 31px;
  font-weight: 820;
  line-height: 0.9;
  text-align: center;
}

.rules-card ul {
  margin: 0;
  padding-left: 26px;
  color: #33434d;
  font-size: 22px;
  font-weight: 520;
  line-height: 1.22;
}

.rules-card li {
  white-space: nowrap;
}

.pebble-board {
  grid-column: 1 / 3;
  justify-self: start;
  align-self: start;
  position: relative;
  width: calc(100% + 70px);
  height: 224px;
  margin-top: 28px;
  margin-left: 0;
  overflow: hidden;
}

.move-counter {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 280px;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #20282f;
  text-align: center;
}

.move-counter-value {
  display: block;
  width: 2ch;
  font-size: 118px;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  line-height: 0.85;
  letter-spacing: 0;
}

.move-counter-label {
  display: block;
  margin-top: 12px;
  color: #3f4b52;
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pebble-grid {
  position: absolute;
  left: 310px;
  top: 0;
  width: calc(100% - 310px);
  height: calc(2 * var(--lane-gap));
  background:
    repeating-linear-gradient(
      90deg,
      rgba(32, 40, 47, 0.62) 0 2px,
      transparent 2px var(--cell-width)
    ),
    linear-gradient(
      180deg,
      rgba(32, 40, 47, 0.62) 0 2px,
      var(--red-lane) 2px calc(var(--lane-gap) - 1px),
      rgba(32, 40, 47, 0.62) calc(var(--lane-gap) - 1px) calc(var(--lane-gap) + 1px),
      var(--blue-lane) calc(var(--lane-gap) + 1px) calc(2 * var(--lane-gap) - 2px),
      rgba(32, 40, 47, 0.62) calc(2 * var(--lane-gap) - 2px) calc(2 * var(--lane-gap))
    );
}

.pebble-grid::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  background: linear-gradient(90deg, rgba(246, 244, 237, 0), var(--paper));
  pointer-events: none;
}

.pebble {
  position: absolute;
  z-index: 2;
  left: calc(var(--col) * var(--cell-width) + var(--cell-width) / 2);
  top: calc(var(--lane) * var(--lane-gap) + var(--lane-gap) / 2);
  width: 66px;
  height: 66px;
  border: 5px solid #20282f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.pebble-red {
  background: var(--red-car);
}

.pebble-blue {
  background: var(--blue-car);
}

.comparison-slide .comparison-board {
  width: calc(100% + 70px);
  height: calc(2 * var(--lane-gap));
  margin-top: 0;
}

.transducer-slide .transducer-board {
  grid-column: auto;
  width: 1210px;
  height: calc(2 * var(--lane-gap));
  margin-top: 0;
}

.comparison-slide .move-counter {
  width: 230px;
}

.comparison-slide .move-counter-value {
  font-size: 82px;
  line-height: 0.82;
}

.comparison-slide .move-counter-label {
  margin-top: 8px;
  font-size: 18px;
}

.comparison-slide .pebble-grid,
.transducer-slide .pebble-grid {
  left: 270px;
  width: calc(100% - 270px);
}

.comparison-slide .pebble-grid::after,
.transducer-slide .pebble-grid::after {
  width: 300px;
}

.comparison-slide .pebble,
.transducer-slide .pebble {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.input-scan-frame {
  position: absolute;
  z-index: 6;
  left: 270px;
  top: 0;
  width: var(--cell-width);
  height: calc(2 * var(--lane-gap));
  border: 5px solid var(--scan-accent);
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(calc(var(--scan-step) * var(--cell-width)));
  transition: transform 260ms ease, opacity 180ms ease;
  pointer-events: none;
}

.transducer-slide.is-scanning .input-scan-frame {
  opacity: 1;
}

.transducer-table {
  --state-label-width: 270px;
  position: relative;
  display: grid;
  grid-template-columns: var(--state-label-width) repeat(5, var(--cell-width));
  grid-template-rows: repeat(5, 40px);
  align-self: start;
  width: calc(var(--state-label-width) + 5 * var(--cell-width));
  min-height: 200px;
  margin: 0;
  color: #24313a;
  opacity: 1;
}

.moves-summary-slide.present .transducer-table,
.reconstruction-slide.present .transducer-table {
  animation: none;
}

@keyframes transducerDetailsAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.state-row-label,
.state-cell {
  display: flex;
  align-items: center;
  height: 40px;
  border-top: 2px solid rgba(32, 40, 47, 0.5);
  box-sizing: border-box;
}

.state-row-label {
  padding-right: 24px;
  justify-content: flex-end;
  color: #33434d;
  font-size: 23px;
  font-weight: 680;
  line-height: 1;
  text-transform: none;
}

.state-row-label.red-backlog {
  color: var(--red-car);
}

.state-row-label.blue-backlog {
  color: var(--blue-car);
}

.state-row-label.total-delay {
  color: #20282f;
  font-weight: 780;
}

.state-cell {
  justify-content: center;
  border-left: 2px solid rgba(32, 40, 47, 0.5);
  color: transparent;
  font-size: 26px;
  font-weight: 720;
  line-height: 1;
  transition: color 220ms ease, transform 220ms ease;
  transform: translateY(0);
}

.state-cell:nth-last-child(-n + 5) {
  border-bottom: 2px solid rgba(32, 40, 47, 0.5);
}

.state-cell.is-visible {
  color: #1f2d35;
}

.state-cell.total-delay {
  font-size: 30px;
  font-weight: 820;
}

.state-cell.total-delay-final.is-visible {
  background: rgba(122, 99, 199, 0.18);
}

.state-scan-frame {
  position: absolute;
  z-index: 5;
  left: var(--state-label-width);
  top: 0;
  width: var(--cell-width);
  height: 200px;
  border: 5px solid var(--scan-accent);
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(calc(var(--scan-step) * var(--cell-width)));
  transition: transform 260ms ease, opacity 180ms ease;
  pointer-events: none;
}

.transducer-slide.is-scanning .state-scan-frame {
  opacity: 1;
}

.transducer-explanation {
  width: 1180px;
  margin: 2px 0 0 0;
  color: #263640;
  font-size: 30px;
  font-weight: 620;
  line-height: 1.16;
  letter-spacing: 0;
  white-space: normal;
  opacity: 1;
}

.moves-summary-slide.present .transducer-explanation,
.reconstruction-slide.present .transducer-explanation {
  opacity: 1;
  animation: none;
}

.reconstruction-slide .transducer-explanation {
  white-space: nowrap;
}

.reconstruction-arrow {
  position: absolute;
  left: 822px;
  top: 272px;
  z-index: 7;
  width: 250px;
  height: 204px;
  overflow: visible;
  pointer-events: none;
}

.reconstruction-arrow path {
  fill: rgba(122, 99, 199, 0.24);
  stroke: var(--scan-accent);
  stroke-width: 7px;
  stroke-linejoin: round;
}

.moves-summary-box {
  position: absolute;
  left: 880px;
  top: 280px;
  z-index: 8;
  box-sizing: border-box;
  width: 300px;
  border: 4px solid #20282f;
  border-radius: 8px;
  padding: 18px 22px;
  background: #fff;
  color: #1f2d35;
  font-size: 19px;
  font-weight: 720;
  line-height: 1.32;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
}

.moves-summary-indent {
  padding-left: 21px;
}

.moves-summary-arrow {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.moves-summary-arrow-line {
  fill: none;
  stroke: var(--scan-accent);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#summary-arrowhead);
}

.summary-arrowhead-shape {
  fill: var(--scan-accent);
}

.moves-summary-slide.present .moves-summary-box,
.moves-summary-slide.present .moves-summary-arrow {
  animation: transducerDetailsAppear 260ms ease 520ms both;
}

.code-frame {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 42px 70px 0;
}

.reveal .slides section.code-slide h1 {
  margin: 0 0 18px;
  color: #1f2d35;
  font-size: 46px;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}

.reveal .slides section.code-slide pre {
  box-sizing: border-box;
  width: 1060px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reveal .slides section.code-slide code {
  max-height: none;
  color: #1f2d35;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  font-weight: 560;
  line-height: 1.18;
  letter-spacing: 0;
  white-space: pre;
  tab-size: 4;
}

.reveal .slides section.code-slide code.hljs {
  padding: 0;
  background: transparent;
}

.research-frame {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 42px 70px 0;
}

.reveal .slides section.research-slide h1 {
  margin: 0 0 34px;
  color: #1f2d35;
  font-size: 46px;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}

.research-content {
  width: 1060px;
  color: #253640;
}

.research-list,
.research-list ul {
  margin: 0;
  padding-left: 34px;
}

.research-list {
  color: #33434d;
  font-size: 24px;
  font-weight: 560;
  line-height: 1.28;
}

.research-list > li {
  margin: 0 0 22px;
}

.research-list ul {
  margin-top: 8px;
}

.research-list li li {
  margin: 4px 0;
}

.research-topic {
  color: #1f2d35;
  font-weight: 760;
}

.final-highway-slide .slide-frame {
  grid-template-rows: 118px 150px 238px 1fr;
}

.final-highway-slide .slide-frame h1 {
  padding-top: 42px;
}

.summary-points {
  box-sizing: border-box;
  width: 1080px;
  margin: 0;
  padding: 0 0 0 104px;
  color: #33434d;
  font-size: 27px;
  font-weight: 560;
  line-height: 1.28;
}

.summary-points li {
  margin: 0 0 15px;
}

.final-highway-slide .highway-scene {
  align-self: start;
}

.highway-scene {
  position: relative;
  width: 100%;
  height: 248px;
  overflow: hidden;
  background: var(--paper);
  border-top: 5px solid #20282f;
  border-bottom: 5px solid #20282f;
  box-sizing: border-box;
}

.state-no-space .highway-scene {
  overflow: visible;
}

.highway {
  position: absolute;
  inset: 0;
}

.highway-main {
  --cluster-left: 300px;
}

.lane {
  position: absolute;
  left: 0;
  width: 100%;
  height: 74px;
  opacity: 0;
  transition: opacity 420ms ease;
}

.lane-red {
  top: 18px;
  background-color: var(--red-lane);
}

.lane-blue {
  top: 150px;
  background-color: var(--blue-lane);
}

.lane-separator {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 118px;
  height: 8px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 48px, #20282f 48px 96px, transparent 96px 148px);
  background-size: 148px 8px;
  animation: dashScroll 0.35s linear infinite;
}

.state-lanes .lane,
.state-cars .lane,
.state-switch .lane,
.state-no-space .lane,
.state-slowdown .lane,
.state-question .lane {
  opacity: 1;
}

.traffic {
  position: absolute;
  z-index: 3;
  left: 96px;
  top: 0;
  width: 1280px;
  height: 248px;
}

.car {
  position: absolute;
  left: calc(var(--cluster-left) + var(--col) * var(--cell-width));
  top: calc(var(--lane-top-y) + var(--lane) * var(--lane-gap));
  width: 106px;
  height: 62px;
  transform: translate(-50%, -50%);
  --car-paint: var(--paper);
}

.car-red {
  --target-paint: var(--red-car);
}

.car-blue {
  --target-paint: var(--blue-car);
}

.state-cars .car,
.state-switch .car,
.state-no-space .car,
.state-slowdown .car,
.state-question .car {
  --car-paint: var(--target-paint);
}

.blocked-markers {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.blocked-marker {
  position: absolute;
  left: calc(96px + var(--cluster-left) + var(--col) * var(--cell-width));
  top: 252px;
  width: 76px;
  height: 72px;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}

.blocked-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  width: 8px;
  height: 42px;
  border-radius: 4px;
  background: #20282f;
  transform: translateX(-50%);
}

.blocked-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  border-left: 23px solid transparent;
  border-right: 23px solid transparent;
  border-bottom: 34px solid #20282f;
  transform: translateX(-50%);
}

.state-no-space.present .blocked-marker {
  animation: blockedArrowIn 0.55s cubic-bezier(0.2, 0.9, 0.2, 1.15) forwards;
}

.state-no-space.present .blocked-marker:nth-child(2) {
  animation-delay: 0.22s;
}

.car-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.car-shell {
  fill: var(--car-paint);
  stroke: #20282f;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 420ms ease;
}

.car-window {
  fill: var(--paper);
  stroke: #20282f;
  stroke-width: 4;
  stroke-linejoin: round;
}

.wheel {
  fill: #11171d;
  stroke: #11171d;
  stroke-width: 2;
}

@keyframes dashScroll {
  from { background-position-x: 0; }
  to { background-position-x: 148px; }
}

@keyframes blockedArrowIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

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

  .state-no-space.present .blocked-marker {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}