/*
SPDX-FileCopyrightText: Copyright © 2026 Idiap Research Institute <contact@idiap.ch>
SPDX-FileContributor: William Droz <william.droz@idiap.ch>
SPDX-License-Identifier: GPL-3.0-only
*/

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --sci-bg: #f7f8fb;
  --sci-bg-deep: #eff4ff;
  --sci-panel: rgba(255, 255, 255, 0.84);
  --sci-ink: #212121;
  --sci-ink-soft: #5a5a5a;
  --sci-accent: #125cf7;
  --sci-accent-bright: #00aeff;
  --sci-accent-hot: #608dfa;
  --sci-accent-glow: rgba(18, 92, 247, 0.28);
  --sci-line: rgba(18, 92, 247, 0.35);
  --sci-grid: rgba(18, 92, 247, 0.1);
  --sci-code-bg: #eff4ff;
  --r-background-color: var(--sci-bg);
  --r-main-font: "Geist", "Segoe UI", sans-serif;
  --r-main-font-size: 40px;
  --r-main-color: var(--sci-ink);
  --r-heading-font: "Geist", "Segoe UI", sans-serif;
  --r-heading-color: var(--sci-ink);
  --r-heading-text-transform: none;
  --r-heading-font-weight: 700;
  --r-link-color: var(--sci-accent);
  --r-link-color-hover: #1147d4;
  --r-selection-background-color: rgba(0, 174, 255, 0.35);
  --r-selection-color: var(--sci-ink);
}

.reveal-viewport,
.reveal {
  color: var(--sci-ink);
  background:
    radial-gradient(ellipse 80% 55% at 8% 0%, rgba(0, 174, 255, 0.18), transparent 52%),
    radial-gradient(ellipse 65% 45% at 100% 100%, rgba(96, 141, 250, 0.14), transparent 48%),
    radial-gradient(circle at 70% 20%, rgba(18, 92, 247, 0.06), transparent 35%),
    linear-gradient(165deg, #ffffff 0%, var(--sci-bg) 42%, var(--sci-bg-deep) 100%);
}

.reveal::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--sci-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sci-grid) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0%, transparent 62%, rgba(18, 92, 247, 0.04) 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.22) 48%, transparent 52%);
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 240%;
  animation: sci-scan 16s linear infinite;
}

@keyframes sci-scan {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0%;
  }
  to {
    background-position: 0 0, 0 0, 0 0, 0 100%;
  }
}

.reveal::before {
  content: "";
  position: fixed;
  z-index: 9999;
  top: 18px;
  right: 22px;
  width: 168px;
  height: 64px;
  pointer-events: none;
  background: url("./idiap_logo.svg") no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95));
}

.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  box-sizing: border-box;
  padding: 1.35em 1.7em 1.25em;
  background-image:
    linear-gradient(var(--sci-accent-bright), var(--sci-accent-bright)),
    linear-gradient(var(--sci-accent-bright), var(--sci-accent-bright)),
    linear-gradient(var(--sci-accent-hot), var(--sci-accent-hot)),
    linear-gradient(var(--sci-accent-hot), var(--sci-accent-hot)),
    linear-gradient(var(--sci-accent), var(--sci-accent)),
    linear-gradient(var(--sci-accent), var(--sci-accent)),
    linear-gradient(var(--sci-accent-bright), var(--sci-accent-bright)),
    linear-gradient(var(--sci-accent-bright), var(--sci-accent-bright));
  background-position:
    left 0.45em top 0.45em, left 0.45em top 0.45em,
    right 0.45em top 0.45em, right 0.45em top 0.45em,
    left 0.45em bottom 0.45em, left 0.45em bottom 0.45em,
    right 0.45em bottom 0.45em, right 0.45em bottom 0.45em;
  background-repeat: no-repeat;
  background-size:
    36px 2px, 2px 36px,
    36px 2px, 2px 36px,
    36px 2px, 2px 36px,
    36px 2px, 2px 36px;
}

.reveal .slides section::before,
.reveal .slides section::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  pointer-events: none;
  background: var(--sci-accent-bright);
  border-radius: 1px;
  box-shadow: 0 0 14px var(--sci-accent-glow), 0 0 2px var(--sci-accent-bright);
  opacity: 0.75;
}

.reveal .slides section::before {
  top: 0.55em;
  left: 0.55em;
}

.reveal .slides section::after {
  right: 0.55em;
  bottom: 0.55em;
}

.reveal .course-title-slide .course-title-logo {
  display: block;
  width: 330px;
  height: auto;
  margin: 0 0 1.1em;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reveal .course-title-slide h1 {
  font-size: 2.5em;
}

.reveal .course-title-slide .course-url {
  margin: 0.65em 0;
  font-size: 1.4em;
  font-weight: 700;
}

.reveal .course-url a {
  text-decoration: underline;
}

.reveal .course-title-slide > p:last-child {
  color: var(--sci-ink-soft);
  font-family: "Geist Mono", monospace;
  font-size: 0.72em;
  letter-spacing: 0.08em;
}

.reveal h1,
.reveal h2,
.reveal h3 {
  color: var(--sci-ink);
  font-family: var(--r-heading-font);
  letter-spacing: 0.045em;
  text-transform: none;
  text-shadow: 0 0 28px rgba(0, 174, 255, 0.2);
}

.reveal h1 {
  margin-bottom: 0.38em;
  padding-bottom: 0.3em;
  font-size: 2.1em;
  background-image: linear-gradient(90deg, var(--sci-accent-bright), var(--sci-accent), transparent 78%);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  border-bottom: 1px solid transparent;
}

.reveal h1::before {
  content: "//";
  margin-right: 0.28em;
  color: var(--sci-accent-bright);
  font-weight: 500;
  text-shadow: 0 0 12px var(--sci-accent-glow);
}

.reveal h2 {
  margin-top: 0.12em;
  color: var(--sci-ink-soft);
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.reveal h2::before {
  content: "◇";
  margin-right: 0.32em;
  color: var(--sci-accent);
}

.reveal h3 {
  color: var(--sci-accent);
  font-size: 0.88em;
}

.reveal p,
.reveal li,
.reveal td,
.reveal th {
  line-height: 1.38;
}

.reveal strong {
  font-weight: 650;
}

.reveal ul,
.reveal ol {
  margin-top: 0.55em;
}

.reveal li {
  margin: 0.22em 0;
}

.reveal ul li::marker {
  color: var(--sci-accent-bright);
}

.reveal ol li::marker {
  color: var(--sci-accent);
  font-family: "Geist Mono", monospace;
  font-weight: 600;
}

.reveal a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.reveal code {
  padding: 0.08em 0.2em;
  color: #1147d4;
  font-family: "Geist Mono", monospace;
  background: rgba(18, 92, 247, 0.08);
  border-radius: 0.12em;
}

.reveal pre {
  width: 100%;
  margin: 0.55em 0;
  background: var(--sci-code-bg);
  border: 1px solid var(--sci-line);
  border-radius: 0.22em;
  box-shadow: 0 12px 30px rgba(33, 33, 33, 0.07);
}

.reveal pre code {
  padding: 0.65em;
  color: var(--sci-ink);
  background: transparent;
}

.reveal .onboarding-slide pre {
  font-size: 0.75em;
}

.reveal .onboarding-slide table {
  font-size: 0.78em;
}

/* macOS troubleshooting supplement; keep other teaching decks unchanged. */
.reveal .macos-uv-slide {
  font-size: 0.88em;
}

.reveal .macos-uv-slide p {
  margin: 0.5em 0;
}

.reveal .macos-uv-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1.5em;
  margin-top: 0.5em;
}

.reveal .macos-uv-columns > * {
  min-width: 0;
}

.reveal .macos-uv-columns p:first-child {
  margin-top: 0;
}

.reveal .macos-uv-columns h3 {
  margin: 0 0 0.6em;
  font-size: 1em;
}

.reveal .macos-uv-columns figure {
  margin: 0;
}

.reveal .macos-uv-columns figure img {
  display: block;
  width: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.reveal .macos-uv-columns figcaption {
  margin-top: 0.55em;
  color: var(--sci-ink-soft);
  font-size: 0.7em;
  line-height: 1.35;
}

.reveal .macos-uv-settings-crop {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 722 / 380;
}

.reveal .macos-uv-columns .macos-uv-settings-crop img {
  position: absolute;
  width: 100%;
  max-width: none;
  left: 0;
  top: 0;
}

.reveal .macos-uv-assistant {
  margin-top: 0.8em;
  padding-top: 0.5em;
  border-top: 1px solid var(--sci-line);
  font-size: 0.86em;
}

.reveal .macos-uv-source {
  color: var(--sci-ink-soft);
  font-size: 0.64em;
}

/* Beginner terminal reference; scoped to its own slides. */
.reveal .terminal-slide {
  font-size: 0.9em;
}

.reveal .terminal-slide p {
  margin: 0.55em 0;
}

.reveal .terminal-columns {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 1.3em;
  margin-top: 0.7em;
}

.reveal .terminal-columns > * {
  min-width: 0;
}

.reveal .terminal-columns ol {
  margin-top: 0;
}

.reveal .terminal-slide figure {
  margin: 0;
}

.reveal .terminal-slide figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  border: 0;
  box-shadow: none;
}

.reveal .terminal-slide .terminal-wide-figure {
  max-width: 1200px;
  margin: 0.7em auto 0;
}

.reveal .terminal-slide .terminal-wide-figure img {
  max-height: 365px;
}

/* Show the profile menu at readable size; the link opens the full screenshot. */
.reveal .terminal-slide .terminal-profile-crop {
  position: relative;
  display: block;
  width: 680px;
  max-width: 100%;
  aspect-ratio: 900 / 796;
  margin: 0 auto;
  overflow: hidden;
}

.reveal .terminal-slide .terminal-profile-crop img {
  position: absolute;
  width: 198.78%;
  max-width: none;
  left: -98.33%;
  top: 0;
}

.reveal .terminal-slide figcaption,
.reveal .terminal-slide .terminal-source {
  margin-top: 0.6em;
  color: var(--sci-ink-soft);
  font-size: 0.65em;
  line-height: 1.4;
}

.reveal .terminal-slide pre code {
  max-height: none;
}

.reveal .lab-code-slide pre {
  font-size: 0.7em;
}

.reveal .lab-code-slide pre code {
  max-height: none;
}

.reveal table {
  width: 100%;
  margin: 0.55em 0;
  font-size: 0.68em;
  border-collapse: collapse;
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.06);
}

.reveal th {
  color: var(--sci-ink);
  font-family: "Geist Mono", monospace;
  background: rgba(0, 174, 255, 0.14);
  border-bottom: 2px solid var(--sci-accent);
}

.reveal td,
.reveal th {
  padding: 0.34em 0.45em;
  border-right: none;
  border-left: none;
}

.reveal tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.8);
}

.reveal tbody tr:nth-child(even) {
  background: rgba(0, 174, 255, 0.05);
}

.reveal .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1em;
  margin-top: 0.6em;
}

.reveal .two-col > div {
  padding: 0.65em 0.8em;
  background: var(--sci-panel);
  border: 1px solid var(--sci-line);
  border-top: 4px solid var(--sci-accent);
  border-radius: 0.28em;
  box-shadow: 0 12px 28px rgba(33, 33, 33, 0.06);
}

.reveal .course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65em;
  margin-top: 0.7em;
}

.reveal .course-card {
  padding: 0.65em 0.75em;
  background: var(--sci-panel);
  border: 1px solid var(--sci-line);
  border-top: 4px solid var(--sci-accent);
  border-radius: 0.28em;
  box-shadow: 0 12px 28px rgba(33, 33, 33, 0.06);
}

.reveal .course-card strong {
  display: block;
  margin-bottom: 0.25em;
  color: var(--sci-accent);
}

.reveal .course-card p,
.reveal .course-card li {
  margin-top: 0;
  font-size: 0.76em;
  line-height: 1.35;
}

.reveal .workflow-row {
  display: flex;
  align-items: stretch;
  gap: 0.35em;
  margin-top: 0.85em;
}

.reveal .workflow-step {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 4.4em;
  padding: 0.55em;
  color: var(--sci-ink);
  text-align: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--sci-line);
  border-radius: 0.25em;
}

.reveal .workflow-arrow {
  align-self: center;
  color: var(--sci-accent-bright);
  font-size: 1.4em;
}

.reveal .human-gate {
  border: 3px solid var(--sci-accent);
  box-shadow: 0 0 24px var(--sci-accent-glow);
}

.reveal .week-label {
  display: inline-block;
  margin-bottom: 0.35em;
  padding: 0.18em 0.55em;
  color: #fff;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.55em;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--sci-accent), var(--sci-accent-bright));
  border-radius: 999px;
}

.reveal .source-note {
  margin-top: 0.8em;
  color: var(--sci-ink-soft);
  font-size: 0.55em;
}

/* Native recordings, sized for the 1920 × 1080 course slides. */
.reveal .slides section.video-demo-slide {
  height: 1080px;
  padding: 32px 56px;
}

.reveal .video-demo-slide h1 {
  margin: 0 0 20px;
  padding-bottom: 16px;
  font-size: 64px;
  line-height: 1.15;
}

.reveal .video-demo-slide .course-video {
  display: block;
  box-sizing: border-box;
  width: 1440px;
  max-width: 100%;
  height: 810px;
  max-height: none;
  margin: 0 auto;
  border: 1px solid var(--sci-line);
  border-radius: 12px;
  background: #080808;
  object-fit: contain;
}

.reveal .video-demo-slide .video-demo-link {
  margin: 14px 0 0;
  color: var(--sci-ink-soft);
  font-size: 24px;
  line-height: 1.35;
  text-align: center;
}

/* Shared agent anatomy figure, sized for the 1920 × 1080 course slides. */
.reveal .slides section.agent-anatomy-slide {
  height: 1080px;
  padding: 36px 52px;
}

.reveal .agent-anatomy-slide h1 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: 64px;
  line-height: 1.15;
}

.reveal .agent-anatomy-slide figure {
  width: 100%;
  height: 900px;
  margin: 0;
}

.reveal .agent-anatomy-slide figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Application and agent schematics, kept large enough for projection. */
.reveal .slides section.application-schema-slide {
  height: 1080px;
  padding: 36px 52px;
}

.reveal .application-schema-slide h1 {
  margin: 0 0 12px;
  padding-bottom: 12px;
  font-size: 64px;
  line-height: 1.15;
}

.reveal .application-schema-slide h2 {
  margin: 0 0 18px;
  font-size: 36px;
  line-height: 1.25;
}

.reveal .application-schema-slide figure {
  width: 100%;
  height: 700px;
  margin: 0;
}

.reveal .application-schema-slide figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reveal .application-schema-slide .schema-takeaway {
  margin: 12px 0 0;
  font-size: 30px;
  line-height: 1.3;
}

.reveal .application-schema-slide .source-note {
  margin: 10px 0 0;
  font-size: 23px;
  line-height: 1.3;
}

/*
 * Eight levels of agentic engineering.
 * Add levels-at-N to a slide to illuminate the path through level N.
 */
.reveal .slides section.levels-slide {
  padding: 0.95em 1.45em 0.85em;
}

.reveal .slides section.levels-slide h1 {
  margin-bottom: 0.18em;
}

.reveal .slides section.levels-slide h2 {
  margin: 0.05em 0 0.35em;
}

.reveal .slides section.levels-overview-slide {
  padding: 1em 1.4em 0.85em;
}

.reveal .levels-track {
  --levels-active: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.35em;
  align-items: start;
  width: 100%;
  margin: 0.35em 0 0.7em;
  padding: 0.55em 0.2em 0.15em;
}

.reveal .levels-track::before,
.reveal .levels-track::after {
  content: "";
  position: absolute;
  top: calc(0.55em + 1.15em);
  left: calc(6.25% + 0.15em);
  z-index: 0;
  height: 3px;
  border-radius: 999px;
}

.reveal .levels-track::before {
  right: calc(6.25% + 0.15em);
  background: rgba(18, 92, 247, 0.18);
}

.reveal .levels-track::after {
  width: max(0px, calc((var(--levels-active) - 1) / 7 * (100% - 12.5% - 0.3em)));
  max-width: calc(100% - 12.5% - 0.3em);
  background: linear-gradient(90deg, var(--sci-accent), var(--sci-accent-bright), var(--sci-accent-hot));
  box-shadow: 0 0 14px var(--sci-accent-glow);
  transition: width 0.35s ease;
}

.reveal .levels-at-1 .levels-track { --levels-active: 1; }
.reveal .levels-at-2 .levels-track { --levels-active: 2; }
.reveal .levels-at-3 .levels-track { --levels-active: 3; }
.reveal .levels-at-4 .levels-track { --levels-active: 4; }
.reveal .levels-at-5 .levels-track { --levels-active: 5; }
.reveal .levels-at-6 .levels-track { --levels-active: 6; }
.reveal .levels-at-7 .levels-track { --levels-active: 7; }
.reveal .levels-at-8 .levels-track,
.reveal .levels-at-all .levels-track { --levels-active: 8; }

.reveal .levels-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
  min-width: 0;
  text-align: center;
}

.reveal .levels-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 2.3em;
  box-sizing: border-box;
  color: var(--sci-ink-soft);
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid rgba(18, 92, 247, 0.28);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(33, 33, 33, 0.06);
  font-family: "Geist Mono", monospace;
  font-size: 0.52em;
  font-weight: 500;
}

.reveal .levels-label {
  max-width: 7.8em;
  color: var(--sci-ink-soft);
  font-size: 0.42em;
  font-weight: 500;
  line-height: 1.25;
}

.reveal .levels-at-1 .levels-node:nth-child(-n + 1) .levels-dot,
.reveal .levels-at-2 .levels-node:nth-child(-n + 2) .levels-dot,
.reveal .levels-at-3 .levels-node:nth-child(-n + 3) .levels-dot,
.reveal .levels-at-4 .levels-node:nth-child(-n + 4) .levels-dot,
.reveal .levels-at-5 .levels-node:nth-child(-n + 5) .levels-dot,
.reveal .levels-at-6 .levels-node:nth-child(-n + 6) .levels-dot,
.reveal .levels-at-7 .levels-node:nth-child(-n + 7) .levels-dot,
.reveal .levels-at-8 .levels-node:nth-child(-n + 8) .levels-dot,
.reveal .levels-at-all .levels-node .levels-dot {
  color: #fff;
  background: linear-gradient(145deg, #1147d4, var(--sci-accent));
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.12), 0 0 16px var(--sci-accent-glow);
}

.reveal .levels-at-1 .levels-node:nth-child(1) .levels-dot,
.reveal .levels-at-2 .levels-node:nth-child(2) .levels-dot,
.reveal .levels-at-3 .levels-node:nth-child(3) .levels-dot,
.reveal .levels-at-4 .levels-node:nth-child(4) .levels-dot,
.reveal .levels-at-5 .levels-node:nth-child(5) .levels-dot,
.reveal .levels-at-6 .levels-node:nth-child(6) .levels-dot,
.reveal .levels-at-7 .levels-node:nth-child(7) .levels-dot,
.reveal .levels-at-8 .levels-node:nth-child(8) .levels-dot {
  transform: scale(1.12);
  background: linear-gradient(145deg, var(--sci-accent), var(--sci-accent-bright));
  box-shadow: 0 0 0 5px rgba(0, 174, 255, 0.16), 0 0 28px rgba(0, 174, 255, 0.35);
  animation: sci-pulse 2.4s ease-in-out infinite;
}

.reveal .levels-at-1 .levels-node:nth-child(1) .levels-label,
.reveal .levels-at-2 .levels-node:nth-child(2) .levels-label,
.reveal .levels-at-3 .levels-node:nth-child(3) .levels-label,
.reveal .levels-at-4 .levels-node:nth-child(4) .levels-label,
.reveal .levels-at-5 .levels-node:nth-child(5) .levels-label,
.reveal .levels-at-6 .levels-node:nth-child(6) .levels-label,
.reveal .levels-at-7 .levels-node:nth-child(7) .levels-label,
.reveal .levels-at-8 .levels-node:nth-child(8) .levels-label {
  color: var(--sci-ink);
  font-weight: 600;
}

.reveal .levels-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7em;
  margin-top: 0.15em;
}

.reveal .levels-overview-card {
  min-height: 4.2em;
  padding: 0.45em 0.55em;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(18, 92, 247, 0.24);
  border-radius: 0.28em;
  box-shadow: 0 8px 20px rgba(33, 33, 33, 0.05);
}

.reveal .levels-overview-card strong {
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.52em;
  letter-spacing: 0.06em;
}

.reveal .levels-overview-card span {
  display: block;
  color: var(--sci-ink-soft);
  font-size: 0.48em;
  line-height: 1.3;
}

.reveal .levels-point {
  margin: 0.15em 0 0.35em;
  padding: 0.42em 0.65em;
  color: var(--sci-ink-soft);
  background: rgba(0, 174, 255, 0.09);
  border-left: 4px solid var(--sci-accent-bright);
  font-size: 0.78em;
  line-height: 1.32;
}

.reveal .levels-source {
  margin: 0.55em 0 0;
  color: var(--sci-ink-soft);
  font-size: 0.42em;
  line-height: 1.35;
}

.reveal .slides > section:first-child:not(.macos-uv-slide) {
  text-align: center;
}

.reveal .slides > section:first-child:not(.macos-uv-slide) h1 {
  position: relative;
  display: inline-block;
  padding: 0.15em 0.45em 0.3em;
  font-size: 2.4em;
  background-image: none;
  border-bottom: none;
}

.reveal .slides > section:first-child:not(.macos-uv-slide) h1::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sci-accent-bright), var(--sci-accent), transparent);
  box-shadow: 0 0 18px var(--sci-accent-glow);
}

.reveal .slides > section:first-child:not(.macos-uv-slide) h2 {
  margin-top: 0.65em;
  color: var(--sci-accent);
  font-size: 1.05em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 18px var(--sci-accent-glow);
}

.reveal .slides > section:first-child:not(.macos-uv-slide) h2::before {
  display: none;
}

.reveal .progress {
  height: 4px;
  background: rgba(18, 92, 247, 0.14);
}

.reveal .progress span {
  background: linear-gradient(90deg, var(--sci-accent), var(--sci-accent-bright), var(--sci-accent-hot));
  box-shadow: 0 0 14px var(--sci-accent-glow);
}

.reveal .controls {
  color: var(--sci-accent);
}

/* Opt-in teaching cue: reserve space for the mascot beside the instructions. */
.reveal .teaching-cue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
  align-items: center;
  gap: 1.2em;
  text-align: left;
}

.reveal .teaching-cue > div {
  min-width: 0;
}

.reveal .teaching-cue > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reveal .teaching-cue-label {
  color: var(--sci-accent);
  font-size: 0.68em;
  letter-spacing: 0.06em;
}

/* Small cues accompany an existing activity without covering its text. */
.reveal .teaching-cue-compact {
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 40px;
}

.reveal .teaching-cue-character,
.reveal .teaching-cue-compact > .teaching-cue-print {
  width: 288px;
  height: 288px;
  margin: 0;
}

.reveal .teaching-cue-character > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reveal .teaching-cue > .teaching-cue-print,
.print-pdf .reveal .teaching-cue-character {
  display: none;
}

.print-pdf .reveal .teaching-cue > .teaching-cue-print {
  display: block;
}

@media print {
  .reveal .teaching-cue-character {
    display: none;
  }

  .reveal .teaching-cue > .teaching-cue-print {
    display: block;
  }
}

.reveal .teaching-sprite-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5em;
  margin: 0.7em 0;
}

.reveal .teaching-sprite-grid figure {
  margin: 0;
  min-width: 0;
  text-align: center;
}

.reveal .teaching-sprite-grid img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0.35em;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reveal .teaching-sprite-grid figcaption {
  color: var(--sci-ink-soft);
  font-size: 0.6em;
  line-height: 1.35;
}

.reveal .slide-number {
  right: 1.2em;
  bottom: 1em;
  padding: 0.15em 0.45em;
  color: var(--sci-ink-soft);
  font-family: "Geist Mono", monospace;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--sci-line);
  box-shadow: 0 0 12px rgba(0, 174, 255, 0.12);
}

.reveal .course-home {
  position: fixed;
  z-index: 30;
  bottom: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--sci-accent);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--sci-line);
  border-radius: 8px;
  text-decoration: none;
}

.reveal .course-home svg {
  width: 20px;
  height: 20px;
}

.reveal .course-home:hover,
.reveal .course-home:focus-visible {
  color: var(--r-link-color-hover);
  background: var(--sci-bg-deep);
  border-color: currentColor;
}

.reveal .course-home:focus-visible {
  outline: 2px solid var(--sci-accent);
  outline-offset: 3px;
}

.print-pdf .reveal .course-home {
  display: none;
}

@media print {
  .reveal .course-home {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal::after,
  .reveal .levels-dot {
    animation: none;
  }
}