:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #5f6062;
  --ink-soft: #6f7072;
  --muted: #6b6e72;
  --dark: #d10a12;
  --accent: #d10a12;
  --accent-soft: #ffffff;
  --rule: #ececec;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
  --pt-red: #d10a12;
  --pt-gray: #5f6062;
  --pt-light-gray: #f5f5f5;
  --pt-font: "Inter", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body {
  background: #ffffff !important;
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
  font-feature-settings: normal !important;
}

body::before {
  display: none !important;
}

.progress {
  top: auto !important;
  bottom: 0 !important;
  height: 6px !important;
  background: var(--pt-red) !important;
}

.stage {
  background: #ffffff;
}

.stage::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  height: 6px;
  background: rgba(209, 10, 18, 0.18);
  pointer-events: none;
}

.slide {
  padding: 7vh 6vw 8vh !important;
  background: #ffffff !important;
  color: var(--pt-gray) !important;
}

.slide::before {
  content: "";
  position: absolute;
  left: 3.8vw;
  top: 7vh;
  width: 4px;
  height: 62px;
  background: var(--pt-red);
}

.slide::after {
  content: "";
  position: absolute;
  top: 4.4vh;
  right: 5.2vw;
  width: min(178px, 18vw);
  height: 78px;
  background: url("media/Pantheon_Design_Technology-crop.png") top right / contain no-repeat;
  z-index: 6;
  pointer-events: none;
}

.cover,
.closing,
.dark {
  background: var(--pt-red) !important;
  color: #ffffff !important;
}

.cover::before,
.closing::before,
.dark::before {
  display: none;
}

.cover::after,
.closing::after,
.dark::after {
  display: none;
}

.slide-content {
  max-width: 1120px;
}

.slide-content.center {
  margin-inline: auto;
}

.slide-grid,
.slide-grid.wide-left {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr) !important;
  gap: clamp(36px, 6vw, 88px) !important;
}

.bio-slide {
  align-items: center;
}

.portrait-frame {
  margin: 0;
  justify-self: end;
  width: min(360px, 100%);
}

.portrait-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #ffffff;
  box-shadow: 0 0 0 1px #dedede;
}

.portrait-frame figcaption {
  margin-top: 14px;
  color: var(--pt-gray);
  font-family: var(--pt-font);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.25;
  text-align: right;
}

.slide-num {
  top: 7.2vh !important;
  left: calc(3.8vw + 18px) !important;
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
  font-size: clamp(0.92rem, 1.35vw, 1.18rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.slide-num span,
.counter span {
  color: var(--pt-gray) !important;
  font-weight: 400 !important;
}

.cover .slide-num,
.closing .slide-num,
.dark .slide-num,
.cover .slide-num span,
.closing .slide-num span,
.dark .slide-num span {
  color: rgba(255, 255, 255, 0.82) !important;
}

.kicker {
  display: block !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.cover .kicker,
.closing .kicker,
.dark .kicker {
  color: #ffffff !important;
}

h1,
h1.long,
h1.wide,
h2 {
  color: inherit !important;
  font-family: var(--pt-font) !important;
  font-variation-settings: normal !important;
  letter-spacing: 0 !important;
}

h1,
h1.long,
h1.wide {
  max-width: 18ch !important;
  margin-bottom: 1.4rem !important;
  font-size: clamp(3.2rem, 6.6vw, 6.6rem) !important;
  font-weight: 800 !important;
  line-height: 0.96 !important;
}

h1 em {
  color: inherit !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

.cover h1,
.closing h1,
.dark h1 {
  max-width: 16ch !important;
  color: #ffffff !important;
}

.body-text,
.pull-quote,
.read-body,
.read-body p,
.course-table,
.orientation-card,
.quiz-card,
.limit,
.method,
.question,
.tree-root,
.tree-node,
.prompt-card,
.card,
.row-card {
  font-family: var(--pt-font) !important;
}

.body-text {
  max-width: 760px;
  color: var(--pt-gray) !important;
  font-size: clamp(1.4rem, 2.1vw, 2.05rem) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
}

.cover .body-text,
.closing .body-text,
.dark .body-text,
.cover .pull-quote,
.closing .pull-quote,
.dark .pull-quote {
  color: #ffffff !important;
}

.pull-quote {
  color: var(--pt-gray) !important;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

.pull-quote strong,
.body-text strong,
.read-body strong {
  color: inherit !important;
  font-weight: 800 !important;
}

.meta-strip,
.button-row,
.cta-row {
  gap: 0.7rem !important;
}

.cta-row {
  margin-top: 1.8rem !important;
}

.chip,
.button,
.button.secondary,
.nav button {
  border-radius: 0 !important;
  font-family: var(--pt-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.chip {
  border: 1px solid currentColor !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.button {
  border: 2px solid var(--pt-red) !important;
  background: var(--pt-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.cover .button,
.closing .button,
.dark .button {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: var(--pt-red) !important;
}

.button.secondary {
  background: transparent !important;
  color: inherit !important;
}

.cover .button.secondary,
.closing .button.secondary,
.dark .button.secondary {
  color: #ffffff !important;
}

.course-table,
.orientation-grid,
.quiz-grid,
.limit-grid,
.method-grid,
.question-grid,
.tree,
.prompt-grid,
.card-grid {
  gap: 14px !important;
}

.orientation-card,
.row-card,
.quiz-card,
.limit,
.method,
.question,
.tree-root,
.tree-node,
.prompt-card,
.card,
.fact,
.promise,
.module-card,
.source-card,
.level-grid .level {
  border: 1px solid #dedede !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--pt-gray) !important;
}

.orientation-card h2,
.row-card b,
.quiz-card h2,
.limit h2,
.method h2,
.question h2,
.tree-root b,
.tree-node b,
.prompt-card h2,
.card h2,
.fact h2,
.promise h2,
.module-card h2,
.source-card h2,
.level-grid .level h2 {
  color: var(--pt-gray) !important;
  font-size: clamp(1.35rem, 2.1vw, 2.05rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
}

.orientation-card b,
.row-card em,
.quiz-card b,
.fact b,
.promise b,
.module-card .tag,
.level-grid .level b,
.mark {
  color: var(--pt-red) !important;
}

/* The .tree-root in osaka is meant to sit on a dark background and uses
   pale-cream text for its inner span. Pantheon flips the tree-root to a
   white card, so the inner subtitle would otherwise be near-invisible
   (white-ish on white). Force it back to the same gray used by tree-nodes. */
.tree-root span,
.tree-node span,
.fact p,
.promise p,
.module-card p,
.level-grid .level p {
  color: var(--pt-gray) !important;
}

/* The .level pattern is shared between two layouts:
   - architecture (.level-num + .level-body) on dark slides → keep osaka styling
   - index map (b + h2 + p) on light slides → the osaka 2-col grid (line 502
     of osaka-course.css) squeezes the description into a 7.6rem column,
     breaking the layout. Force a simple block flow only for that variant. */
.level-grid .level {
  display: block !important;
  padding: 1.05rem !important;
}

.level-grid .level b {
  display: block !important;
  margin-bottom: 0.45rem;
}

.mark {
  background: var(--pt-red) !important;
}

.big-num {
  color: rgba(209, 10, 18, 0.08) !important;
  font-family: var(--pt-font) !important;
  font-weight: 800 !important;
}

.read-title {
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
}

.read-title em {
  color: var(--pt-red) !important;
}

.read-body {
  color: var(--pt-gray) !important;
  font-size: clamp(1.1rem, 1.55vw, 1.45rem) !important;
  line-height: 1.45 !important;
}

.cover-meta {
  color: rgba(255, 255, 255, 0.86) !important;
  font-family: var(--pt-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.nav {
  bottom: 20px !important;
}

.nav button {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(95, 96, 98, 0.22) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--pt-gray) !important;
  box-shadow: none !important;
}

.nav button:hover {
  background: var(--pt-red) !important;
  color: #ffffff !important;
}

.counter {
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
  letter-spacing: 0 !important;
}

.cover .counter,
.closing .counter,
.dark .counter {
  color: #ffffff !important;
}

/* On .dark slides Pantheon flips the background to solid red. The osaka
   .architecture .level cards and .stat boxes keep their cream-translucent
   styling, which on red reads as a muddy pink-cream. Re-align them to a
   coherent white-on-red treatment that matches the rest of the dark slide. */
.dark .architecture .level {
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

.dark .architecture .level-num {
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.32) !important;
}

.dark .architecture .level-body h2 {
  color: #ffffff !important;
}

.dark .architecture .level-body p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.dark .stat {
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

.dark .stat b {
  color: #ffffff !important;
}

.dark .stat span {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Some decision-trees end with a single full-width tree-node sitting outside
   a .tree-split — Modulo 2 ("Avanzato") and Modulo 6 ("Replicabilità
   economica"). Without an explicit marker the asymmetry reads as a layout
   bug. The .solo modifier dichiara la scelta come intenzionale, marcando il
   nodo singolare con un bordo superiore accent. */
.tree > .tree-node.solo {
  border-top: 4px solid var(--pt-red) !important;
}

/* Keep the mobile breakpoint in sync with osaka-course.css (which switches
   to single-column at 980px). Below 980px the layout flips to single
   column and slides become tall enough to overflow vertically — without
   bridging the breakpoint, the slide-num and Pantheon logo end up sitting
   on top of the content because the slide is still centered and unscrollable. */
@media (max-width: 980px) {
  html:not(.viewport-fixed) {
  .slide {
    padding: 86px 24px 76px !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }

  /* `safe center` keeps short hero/closing slides visually centered, but
     falls back to flex-start when the content is taller than the padding
     box. Without `safe`, a tall .dark slide would push its kicker up under
     the slide-num and remain unreachable even with overflow-y: auto. */
  .cover,
  .closing,
  .dark {
    justify-content: safe center !important;
  }

  .slide::before {
    left: 24px;
    top: 44px;
    height: 48px;
  }

  .slide::after {
    top: 28px;
    right: 22px;
    width: 112px;
    height: 48px;
  }

  .slide-num {
    top: 48px !important;
    left: 38px !important;
    max-width: calc(100% - 180px);
    font-size: 0.9rem !important;
  }

  .slide:not(.cover):not(.closing):not(.dark) .slide-content {
    margin-top: 42px;
  }

  .cover-meta {
    display: none !important;
  }

  .nav {
    transform: translateX(-50%) scale(0.88) !important;
    transform-origin: bottom center !important;
  }

  .orientation-grid,
  .quiz-grid,
  .limit-grid,
  .method-grid,
  .question-grid,
  .prompt-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  .bio-slide {
    grid-template-columns: 1fr !important;
  }

  .portrait-frame {
    justify-self: start;
    width: min(250px, 76vw);
  }

  .portrait-frame figcaption {
    text-align: left;
  }

  h1,
  h1.long,
  h1.wide {
    font-size: clamp(2.7rem, 12vw, 4.2rem) !important;
  }

  .body-text {
    font-size: clamp(1.18rem, 5.2vw, 1.7rem) !important;
  }

  .pull-quote {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
  }
  }
}

/* Paper Pantheon system layer
   Canonical mood: gallery / pop, pure white with cadmium red and black. */
:root {
  --pt-white: #ffffff;
  --pt-black: #111111;
  --pt-red: #cc1a1a;
  --pt-red-dark: #a81414;
  --pt-text: #111111;
  --pt-gray: #626262;
  --pt-muted: #9a9a9a;
  --pt-line: #e6e6e6;
  --pt-soft: #f6f6f6;
  --pt-font: "Inter", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body {
  background: var(--pt-white) !important;
  color: var(--pt-text) !important;
  font-family: var(--pt-font) !important;
}

.slide {
  padding: 68px 72px 64px !important;
  background: var(--pt-white) !important;
  color: var(--pt-text) !important;
}

.slide:not(.cover) {
  justify-content: flex-start !important;
  overflow-y: auto !important;
}

.slide::before {
  left: 72px !important;
  top: 104px !important;
  width: calc(100% - 144px) !important;
  height: 2px !important;
  background: var(--pt-red) !important;
}

.slide::after {
  display: none !important;
}

.slide-content {
  width: min(1136px, 100%) !important;
  max-width: 1136px !important;
}

.slide-num {
  top: 50px !important;
  left: 72px !important;
  max-width: calc(100% - 360px);
  color: var(--pt-red) !important;
  font-family: var(--pt-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.slide-num span,
.counter span {
  color: var(--pt-muted) !important;
  font-weight: 500 !important;
}

.kicker {
  margin-bottom: 14px !important;
  color: var(--pt-red) !important;
  font-family: var(--pt-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

h1,
h1.long,
h1.wide,
h2,
.read-title {
  color: inherit !important;
  font-family: var(--pt-font) !important;
  letter-spacing: 0 !important;
  font-variation-settings: normal !important;
}

h1,
h1.long,
h1.wide {
  max-width: 16ch !important;
  margin-bottom: 22px !important;
  font-size: clamp(38px, 4.7vw, 68px) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
}

h1 em {
  color: inherit !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.body-text {
  max-width: 760px !important;
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
  font-size: clamp(19px, 1.65vw, 25px) !important;
  line-height: 1.32 !important;
}

.pull-quote {
  max-width: 900px !important;
  padding-left: 28px !important;
  border-left: 4px solid var(--pt-red) !important;
  color: var(--pt-text) !important;
  font-family: var(--pt-font) !important;
  font-size: clamp(28px, 3.45vw, 48px) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

.slide:not(.cover) .slide-content {
  margin-top: 76px !important;
}

.dark,
.closing {
  background: var(--pt-red) !important;
  color: var(--pt-white) !important;
}

.dark::before,
.closing::before {
  background: rgba(255, 255, 255, 0.82) !important;
}

.dark .slide-num,
.closing .slide-num,
.dark .slide-num span,
.closing .slide-num span,
.dark .kicker,
.closing .kicker,
.dark .body-text,
.closing .body-text,
.dark .pull-quote,
.closing .pull-quote {
  color: var(--pt-white) !important;
}

.dark .pull-quote,
.closing .pull-quote {
  border-left-color: var(--pt-white) !important;
}

.orientation-card,
.row-card,
.quiz-card,
.limit,
.method,
.question,
.tree-root,
.tree-node,
.prompt-card,
.card,
.fact,
.promise,
.module-card,
.source-card,
.level-grid .level,
.stat,
.architecture .level {
  border: 1px solid var(--pt-line) !important;
  border-radius: 0 !important;
  background: var(--pt-white) !important;
  box-shadow: none !important;
  color: var(--pt-text) !important;
}

.orientation-card h2,
.row-card b,
.quiz-card h2,
.limit h2,
.method h2,
.question h2,
.tree-root b,
.tree-node b,
.prompt-card h2,
.card h2,
.fact h2,
.promise h2,
.module-card h2,
.source-card h2,
.level-grid .level h2 {
  color: var(--pt-text) !important;
  font-family: var(--pt-font) !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
}

.fact p,
.promise p,
.module-card p,
.level-grid .level p,
.limit p,
.method p,
.question p,
.source-card p,
.tree-root span,
.tree-node span,
.row-card span {
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
}

.mark {
  width: 28px !important;
  height: 3px !important;
  background: var(--pt-red) !important;
}

.chip,
.button,
.button.secondary,
.nav button {
  border-radius: 0 !important;
  font-family: var(--pt-font) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.chip {
  border: 1px solid currentColor !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.button {
  border: 2px solid var(--pt-red) !important;
  background: var(--pt-red) !important;
  color: var(--pt-white) !important;
}

.button.secondary {
  background: transparent !important;
  color: inherit !important;
}

.cover .button {
  border-color: var(--pt-red) !important;
  background: var(--pt-red) !important;
  color: var(--pt-white) !important;
}

.cover .button.secondary {
  color: var(--pt-text) !important;
}

.dark .architecture .level,
.dark .stat {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  color: var(--pt-white) !important;
}

.dark .architecture .level-num {
  border-right-color: rgba(255, 255, 255, 0.34) !important;
  color: var(--pt-white) !important;
}

.dark .architecture .level-body h2,
.dark .stat b {
  color: var(--pt-white) !important;
}

.dark .architecture .level-body p,
.dark .stat span {
  color: rgba(255, 255, 255, 0.82) !important;
}

.pt-icon {
  color: var(--pt-red);
}

.pt-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pt-cover {
  display: grid !important;
  grid-template-columns: minmax(300px, 31.25vw) 1fr !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--pt-white) !important;
  color: var(--pt-text) !important;
}

.pt-cover::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: min(400px, 31.25vw) !important;
  height: auto !important;
  background: var(--pt-black) !important;
  z-index: 0 !important;
}

.pt-cover::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: min(400px, 31.25vw) !important;
  width: 4px !important;
  height: auto !important;
  background: var(--pt-red) !important;
  z-index: 2 !important;
}

.pt-cover .slide-content {
  grid-column: 2 !important;
  align-self: center !important;
  width: min(740px, calc(100vw - min(400px, 31.25vw) - 140px)) !important;
  margin-left: 70px !important;
  z-index: 3 !important;
}

.pt-cover .slide-num {
  top: 52px !important;
  left: 52px !important;
  z-index: 4 !important;
  max-width: min(300px, 23vw) !important;
  color: var(--pt-red) !important;
}

.pt-cover .slide-num span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.54) !important;
  letter-spacing: 0.12em !important;
}

.pt-cover .kicker {
  color: var(--pt-red) !important;
}

.pt-cover h1,
.pt-cover h1.long,
.pt-cover h1.wide {
  max-width: 10ch !important;
  color: var(--pt-text) !important;
  font-size: clamp(56px, 5.6vw, 84px) !important;
  line-height: 0.95 !important;
}

.pt-cover .body-text {
  max-width: 590px !important;
  color: var(--pt-gray) !important;
  font-size: clamp(18px, 1.55vw, 24px) !important;
  line-height: 1.34 !important;
}

.pt-cover .meta-strip {
  margin-top: 56px !important;
  align-items: center !important;
}

.pt-cover .chip {
  color: var(--pt-muted) !important;
}

.pt-cover .pt-cover-index {
  margin-left: auto;
  border-color: transparent !important;
}

.pt-cover .cover-meta {
  position: absolute !important;
  left: 52px !important;
  right: auto !important;
  bottom: 48px !important;
  z-index: 4 !important;
  display: block !important;
  width: min(300px, 23vw) !important;
  color: rgba(255, 255, 255, 0.54) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.pt-cover .cover-meta span {
  display: block;
}

.pt-cover .cover-meta span + span {
  margin-top: 8px;
}

.pt-cover-number {
  position: absolute;
  left: -8px;
  bottom: -34px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.045);
  font-family: var(--pt-font);
  font-size: clamp(190px, 27vw, 330px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.8;
  pointer-events: none;
}

.pt-cover-icon {
  position: absolute;
  right: 72px;
  top: 52px;
  z-index: 4;
  width: 42px;
  height: 42px;
}

.cover-visual {
  position: absolute;
  right: 86px;
  top: 190px;
  z-index: 2;
  width: min(560px, 30vw);
  margin: 0;
  border: 1px solid var(--pt-line);
  background: var(--pt-white);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 24px 54px rgba(0, 0, 0, 0.12);
}

.cover-visual::before {
  content: "";
  position: absolute;
  inset: -14px auto auto -14px;
  width: 42%;
  height: 46%;
  border-top: 4px solid var(--pt-red);
  border-left: 4px solid var(--pt-red);
  pointer-events: none;
}

.cover-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cover-visual figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 7px;
  background: rgba(17, 17, 17, 0.72);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: right;
}

.visual-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.82fr) !important;
  gap: clamp(34px, 4.5vw, 64px) !important;
}

.media-slide .slide-content {
  margin-top: 58px !important;
}

.media-slide h1,
.media-slide h1.long,
.media-slide h1.wide {
  max-width: 14ch !important;
  margin-bottom: 18px !important;
  font-size: clamp(38px, 3.7vw, 56px) !important;
  line-height: 0.98 !important;
}

.media-slide .body-text {
  max-width: 48ch !important;
  font-size: clamp(18px, 1.45vw, 23px) !important;
  line-height: 1.3 !important;
}

.media-slide .pull-quote {
  max-width: 22ch !important;
  margin-top: 18px !important;
  padding-left: 22px !important;
  font-size: clamp(24px, 2.45vw, 36px) !important;
  line-height: 1.08 !important;
}

.course-visual {
  position: relative;
  align-self: center;
  width: 100%;
  margin: 0;
  border: 1px solid var(--pt-line);
  background: var(--pt-white);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 22px 44px rgba(0, 0, 0, 0.10);
}

.course-visual::before {
  content: "";
  position: absolute;
  inset: -14px auto auto -14px;
  width: 42%;
  height: 46%;
  border-top: 4px solid var(--pt-red);
  border-left: 4px solid var(--pt-red);
  pointer-events: none;
}

.course-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  outline: 0 !important;
}

.course-visual figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--pt-gray);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: right;
}

.dark .course-visual {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.20);
}

.dark .course-visual::before {
  border-color: var(--pt-white);
}

.dark .course-visual figcaption {
  background: rgba(17, 17, 17, 0.72);
  color: rgba(255, 255, 255, 0.78);
}

.visual-tags {
  margin-top: 22px !important;
}

.module-progress {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 !important;
  width: min(1136px, 100%) !important;
  min-height: 170px;
  align-items: start;
}

.has-module-progress .slide-content {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 44px !important;
  align-items: start !important;
}

.has-module-progress .slide-content > div:first-child {
  max-width: 760px;
}

.module-progress::before {
  content: "";
  position: absolute;
  top: 41px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: var(--pt-line);
}

.module-progress__step {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  min-height: 150px !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
}

.module-progress__step b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border: 1px solid var(--pt-line);
  border-radius: 50%;
  background: var(--pt-white);
  color: var(--pt-muted) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.module-progress__step.is-completed b {
  border-color: var(--pt-black);
  background: var(--pt-black);
  color: var(--pt-white) !important;
  font-size: 0 !important;
}

.module-progress__step.is-completed b::before {
  content: "";
  width: 13px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.module-progress__step.is-active b {
  border: 8px solid rgba(204, 26, 26, 0.12);
  background: var(--pt-red);
  color: var(--pt-white) !important;
}

.module-progress__step.is-active::after {
  content: "SEI QUI";
  position: absolute;
  top: 58px;
  padding: 5px 8px;
  background: var(--pt-red);
  color: var(--pt-white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.module-progress__step::before {
  content: attr(data-label);
  order: 2;
  color: var(--pt-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.module-progress__step span {
  order: 3;
  max-width: 21ch;
  margin-top: 8px;
  color: var(--pt-muted) !important;
  font-size: 12px;
  line-height: 1.25;
}

.module-progress__step em {
  order: 4;
  margin-top: 8px;
  color: var(--pt-red) !important;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.module-progress__step.is-next {
  opacity: 0.44;
}

.pt-quiz {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.has-pt-quiz h1,
.has-pt-quiz h1.long,
.has-pt-quiz h1.wide {
  max-width: none !important;
  font-size: clamp(36px, 4vw, 58px) !important;
}

.has-pt-quiz .quiz-grid {
  gap: 14px !important;
}

.pt-quiz h2 {
  margin-bottom: 12px !important;
  color: var(--pt-text) !important;
  font-size: clamp(20px, 1.65vw, 26px) !important;
  line-height: 1.15 !important;
}

.pt-quiz .options {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.pt-quiz .options li {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

.pt-quiz-option {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 13px 18px;
  border: 1px solid var(--pt-line);
  background: var(--pt-white);
  color: var(--pt-gray);
  cursor: pointer;
  font-family: var(--pt-font);
  font-size: 16px;
  line-height: 1.28;
  text-align: left;
}

.pt-option-letter {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--pt-line);
  border-radius: 50%;
  color: var(--pt-muted);
  font-size: 13px;
  font-weight: 800;
}

.pt-quiz-option:hover,
.pt-quiz-option:focus-visible {
  border-color: var(--pt-black);
  color: var(--pt-text);
  outline: none;
}

.pt-quiz-option.is-selected {
  border-color: var(--pt-black);
  background: var(--pt-black);
  color: var(--pt-white);
}

.pt-quiz-option.is-correct {
  border-color: var(--pt-red);
}

.pt-quiz-option.is-correct .pt-option-letter,
.pt-quiz-option.is-selected .pt-option-letter {
  border-color: var(--pt-red);
  background: var(--pt-red);
  color: var(--pt-white);
}

.pt-quiz .feedback {
  margin-top: 12px;
  padding: 12px 16px 12px 20px;
  border-left: 4px solid var(--pt-black);
  background: var(--pt-soft);
  color: var(--pt-gray);
  font-size: 14px;
  line-height: 1.4;
}

.module-map {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.module-card {
  min-height: 184px !important;
  padding-bottom: 44px !important;
}

.module-card .launch {
  right: 18px !important;
  bottom: 14px !important;
  color: var(--pt-red) !important;
  font-family: var(--pt-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

.nav {
  bottom: 18px !important;
  gap: 12px !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.nav button {
  display: grid;
  place-items: center;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--pt-line) !important;
  background: var(--pt-white) !important;
  color: var(--pt-text) !important;
}

.nav button:hover,
.nav button:focus-visible {
  border-color: var(--pt-red) !important;
  background: var(--pt-red) !important;
  color: var(--pt-white) !important;
  outline: none;
}

.counter {
  min-width: 70px !important;
  color: var(--pt-gray) !important;
  font-family: var(--pt-font) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 980px) {
  html:not(.viewport-fixed) {
  .slide {
    padding: 92px 24px 78px !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }

  .slide::before {
    left: 24px !important;
    right: 24px !important;
    top: 76px !important;
    width: calc(100% - 48px) !important;
  }

  .slide-num {
    top: 42px !important;
    left: 24px !important;
    max-width: calc(100% - 48px) !important;
  }

  h1,
  h1.long,
  h1.wide {
    font-size: clamp(42px, 12vw, 62px) !important;
  }

  .body-text {
    font-size: clamp(19px, 5vw, 24px) !important;
  }

  .pt-cover {
    display: flex !important;
    min-height: 100%;
    padding: 128px 24px 88px !important;
    background: var(--pt-white) !important;
  }

  .pt-cover::before {
    width: 100% !important;
    height: 112px !important;
    inset: 0 0 auto 0 !important;
  }

  .pt-cover::after {
    top: 112px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 4px !important;
  }

  .pt-cover .slide-content {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .pt-cover .slide-num {
    top: 30px !important;
    left: 24px !important;
    max-width: calc(100% - 130px) !important;
  }

  .pt-cover .slide-num span {
    display: inline;
    margin-top: 0;
    margin-left: 8px;
  }

  .pt-cover-number {
    left: auto;
    right: 16px;
    top: 22px;
    bottom: auto;
    font-size: 92px;
    color: rgba(255, 255, 255, 0.08);
  }

  .pt-cover .cover-meta,
  .pt-cover-icon {
    display: none !important;
  }

  .pt-cover .meta-strip {
    margin-top: 32px !important;
  }

  .module-progress {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0;
  }

  .module-progress::before,
  .module-progress__step.is-active::after {
    display: none;
  }

  .module-progress__step {
    grid-template-columns: 64px 1fr !important;
    justify-items: start;
    align-items: center;
    min-height: 86px !important;
    padding: 10px 0 !important;
    text-align: left;
  }

  .module-progress__step b {
    grid-column: 1;
    grid-row: span 3;
    margin-bottom: 0;
  }

  .module-progress__step::before {
    grid-column: 2;
    grid-row: 1;
  }

  .module-progress__step span {
    grid-column: 2;
    grid-row: 2;
  }

  .module-progress__step em {
    grid-column: 2;
    grid-row: 3;
  }

  .module-progress__step::before,
  .module-progress__step span,
  .module-progress__step em {
    order: initial;
    max-width: none;
    margin-top: 0;
  }

  .quiz-grid,
  .module-map {
    grid-template-columns: 1fr !important;
  }
  }
}

/* Interface polish layer: small interaction and rendering details. */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h1.long,
h1.wide,
h2,
.read-title,
.pt-quiz h2,
.module-progress__step::before {
  text-wrap: balance;
}

.body-text,
.pull-quote,
.read-body,
.read-body p,
.orientation-card p,
.fact p,
.promise p,
.module-card p,
.level-grid .level p,
.limit p,
.method p,
.question p,
.source-card p,
.tree-root span,
.tree-node span,
.row-card span,
.pt-quiz .feedback,
.pt-quiz-option {
  text-wrap: pretty;
}

.orientation-card,
.row-card,
.quiz-card,
.limit,
.method,
.question,
.tree-root,
.tree-node,
.prompt-card,
.card,
.fact,
.promise,
.module-card,
.source-card,
.level-grid .level,
.architecture .level,
.pt-quiz-option {
  min-width: 0 !important;
  overflow: hidden;
}

.orientation-card h2,
.row-card b,
.quiz-card h2,
.limit h2,
.method h2,
.question h2,
.tree-root b,
.tree-node b,
.prompt-card h2,
.card h2,
.fact h2,
.promise h2,
.module-card h2,
.source-card h2,
.level-grid .level h2,
.architecture .level-body h2 {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.limit h2,
.method h2,
.question h2,
.fact h2,
.promise h2,
.module-card h2,
.source-card h2 {
  font-size: clamp(22px, 1.85vw, 30px) !important;
  line-height: 1.04 !important;
}

.slide-num,
.counter,
.counter span,
.row-card b,
.row-card em,
.stat b,
.big-num,
.pt-cover-number,
.pt-cover-index,
.module-progress__step b,
.module-progress__step em,
.pt-field-title b,
.module-card .tag,
.module-card .launch {
  font-variant-numeric: tabular-nums;
}

.portrait-frame img,
.slide img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.dark img,
.closing img {
  outline-color: rgba(255, 255, 255, 0.1);
}

.orientation-card,
.row-card,
.quiz-card,
.limit,
.method,
.question,
.tree-root,
.tree-node,
.prompt-card,
.card,
.fact,
.promise,
.module-card,
.source-card,
.level-grid .level,
.stat,
.architecture .level,
.pt-quiz-option {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.045) !important;
}

.dark .architecture .level,
.dark .stat {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 38px rgba(0, 0, 0, 0.12) !important;
}

.button,
.nav button,
.pt-quiz-option,
.module-card.available {
  transition-property: transform, border-color, background-color, color, box-shadow, opacity;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 14px 28px rgba(204, 26, 26, 0.16);
}

.button:active,
.nav button:active,
.pt-quiz-option:active,
.module-card.available:active {
  transform: scale(0.96);
}

.nav {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.12) !important;
}

.nav button {
  width: 40px !important;
  height: 40px !important;
}

.nav button:hover,
.nav button:focus-visible {
  box-shadow: 0 10px 22px rgba(204, 26, 26, 0.18);
}

.pt-quiz-option:hover,
.pt-quiz-option:focus-visible {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.08) !important;
}

.pt-quiz-option.is-selected {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 18px 36px rgba(0, 0, 0, 0.12) !important;
}

.pt-quiz .feedback {
  animation: pt-feedback-in 180ms cubic-bezier(0.2, 0, 0, 1);
}

.module-card.available:hover,
.module-card.available:focus-within {
  border-color: var(--pt-red) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 18px 38px rgba(204, 26, 26, 0.12) !important;
}

.module-card.available a {
  display: block;
  min-height: 100%;
}

.module-card.available a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.module-card.available a:focus-visible {
  outline: none;
}

.module-card.available:has(a:focus-visible) {
  border-color: var(--pt-red) !important;
  box-shadow:
    0 0 0 3px rgba(204, 26, 26, 0.18),
    0 18px 38px rgba(204, 26, 26, 0.12) !important;
}

a:focus-visible,
button:focus-visible,
audio:focus-visible {
  outline: 3px solid var(--pt-red);
  outline-offset: 3px;
}

.audio-panel {
  display: grid;
  align-self: center;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--pt-line);
  background: var(--pt-soft);
  color: var(--pt-text);
}

.audio-label {
  color: var(--pt-text);
  font-family: var(--pt-font);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
}

.audio-panel audio {
  display: block;
  width: 100%;
  min-width: 320px;
  accent-color: var(--pt-red);
}

.audio-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--pt-line);
  color: var(--pt-gray);
  font-size: 0.95rem;
  font-weight: 700;
}

/* In the fixed 1920x1080 viewport, the content should use the stage, not the
   old review-column width that left large empty areas on desktop. */
html.viewport-fixed .slide:not(.cover):not(.longread) {
  justify-content: safe center !important;
  overflow-y: auto !important;
}

html.viewport-fixed .slide:not(.cover) .slide-content {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
}

html.viewport-fixed .slide:not(.cover) .slide-grid,
html.viewport-fixed .slide:not(.cover) .slide-grid.wide-left {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 0.85fr) !important;
  gap: 96px !important;
}

html.viewport-fixed .slide:not(.cover) .slide-grid.wide-left {
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, 0.76fr) !important;
}

html.viewport-fixed .slide:not(.cover) .visual-grid {
  grid-template-columns: minmax(0, 0.86fr) minmax(620px, 1fr) !important;
  gap: 80px !important;
}

html.viewport-fixed .slide:not(.cover) .course-table,
html.viewport-fixed .slide:not(.cover) .table-list,
html.viewport-fixed .slide:not(.cover) .short-list {
  width: 100% !important;
  max-width: none !important;
}

html.viewport-fixed .slide:not(.cover) .orientation-grid,
html.viewport-fixed .slide:not(.cover) .quiz-grid,
html.viewport-fixed .slide:not(.cover) .limit-grid,
html.viewport-fixed .slide:not(.cover) .method-grid,
html.viewport-fixed .slide:not(.cover) .question-grid,
html.viewport-fixed .slide:not(.cover) .prompt-grid,
html.viewport-fixed .slide:not(.cover) .card-grid,
html.viewport-fixed .slide:not(.cover) .source-grid,
html.viewport-fixed .slide:not(.cover) .stat-board,
html.viewport-fixed .slide:not(.cover) .module-map {
  width: 100% !important;
  max-width: none !important;
}

html.viewport-fixed .slide:not(.cover) .slide-content.center,
html.viewport-fixed .slide.longread:not(.cover) .slide-content {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
}

html.viewport-fixed .slide.longread {
  justify-content: flex-start !important;
  overflow-y: auto !important;
}

html.viewport-fixed .slide.longread:not(.cover) .slide-content {
  margin-top: 76px !important;
}

@keyframes pt-feedback-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    transform: none !important;
    transition: none !important;
  }

  .button,
  .nav button,
  .pt-quiz-option,
  .module-card.available,
  .pt-quiz .feedback {
    animation: none;
    transition-duration: 1ms;
  }
}