:root {
  color-scheme: light;
  --ink: #1d252c;
  --muted: #5a6672;
  --bg: #f7f5f0;
  --panel: #ffffff;
  --line: #d9d4c8;
  --accent: #0f766e;
  --accent-dark: #134e4a;
  --warm: #c2410c;
  --cool: #1d4ed8;
  --good: #15803d;
  --bad: #b91c1c;
  --shadow: 0 18px 45px rgba(29, 37, 44, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--accent-dark);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.site-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 28px clamp(20px, 3vw, 52px) 56px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}

.chip-mark {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 64px;
  height: 34px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  font-size: 0.76rem;
}

.lab-code {
  color: var(--muted);
  font-size: 0.92rem;
}

.course-code-line {
  margin: 16px 0 0;
  color: #99f6e4;
  font-size: 1rem;
  font-weight: 800;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.nav-links a,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
  padding: 22px 0 30px;
}

.hero h1 {
  max-width: 1120px;
  margin: 0;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
}

.hero p {
  max-width: 920px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.18rem;
}

.hero .hero-secondary {
  max-width: 880px;
  margin-top: 8px;
  font-size: 1rem;
}

.eyebrow {
  margin: 0 0 10px !important;
  color: var(--warm) !important;
  font-size: 0.82rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 28px;
  padding: 9px 15px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-weight: 750;
  text-decoration: none;
}

.hero-visual {
  position: relative;
  align-self: stretch;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.hero-visual figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 36px 16px 14px;
  background: linear-gradient(transparent, rgba(17, 24, 39, 0.9));
  color: #fff;
  font-size: 0.88rem;
}

.stack-strip {
  display: grid;
  gap: 8px;
  align-self: stretch;
}

.stack-strip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font-weight: 700;
}

.stack-strip small {
  color: var(--muted);
  font-weight: 650;
}

.section {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.section h2 {
  margin: 0 0 16px;
  font-size: 1.55rem;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
}

.section-heading > p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
}

.lecture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.lecture-weeks {
  display: grid;
  gap: 30px;
}

.lecture-week {
  display: grid;
  gap: 14px;
}

.lecture-week + .lecture-week {
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.lecture-week-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.lecture-week-heading span {
  color: var(--accent-dark);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lecture-week-heading h3 {
  margin: 3px 0 0;
  font-size: 1.3rem;
}

.lecture-week-heading p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  text-align: right;
}

.course-info-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.course-info-block {
  padding: 22px clamp(18px, 2.2vw, 34px);
}

.course-info-block:first-child {
  padding-left: 0;
}

.course-info-block + .course-info-block {
  border-left: 1px solid var(--line);
}

.course-info-block h3 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}

.course-info-block p {
  margin: 0 0 12px;
  color: var(--muted);
}

.course-facts {
  display: grid;
  gap: 7px;
  margin: 0;
}

.course-facts div {
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
}

.course-facts dt {
  color: var(--ink);
  font-weight: 750;
}

.course-facts dd {
  margin: 0;
  color: var(--muted);
}

.evaluation-group + .evaluation-group {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.evaluation-group p {
  margin: 5px 0;
}

.evaluation-group small {
  color: var(--muted);
}

.text-link {
  font-weight: 750;
}

.lecture-card {
  min-height: 170px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(29, 37, 44, 0.04);
}

.lecture-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.lecture-date {
  display: block;
  margin: 10px 0 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.lecture-card p {
  margin: 0 0 14px;
  color: var(--muted);
}

.lab-assignment-card {
  grid-column: 1 / -1;
  padding: 24px;
  border-top: 4px solid var(--accent);
}

.lab-assignment-heading {
  display: grid;
  grid-template-columns: minmax(250px, 0.65fr) minmax(420px, 1.35fr);
  gap: 28px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.lab-assignment-heading h3 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.lab-assignment-heading > p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.55;
}

.lab-program-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.lab-program-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.lab-program-number {
  color: var(--accent-dark);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lab-program-card h4,
.lab-workflow h4 {
  margin: 6px 0 15px;
  font-size: 1.08rem;
}

.lab-contract-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.lab-contract-list > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
}

.lab-contract-list dt {
  color: var(--ink);
  font-weight: 800;
}

.lab-contract-list dd {
  margin: 0;
  color: var(--muted);
}

.lab-requirements,
.lab-workflow ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
}

.lab-path {
  margin: 16px 0 0 !important;
}

.lab-workflow {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--warm);
  border-radius: 8px;
  background: #fff;
}

.lab-workflow h4 {
  margin-top: 0;
}

.lab-reminder {
  margin: 16px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
}

.lab-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .lab-assignment-heading,
  .lab-program-grid {
    grid-template-columns: 1fr;
  }

  .lab-assignment-card {
    padding: 18px;
  }

  .lab-contract-list > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.featured-card {
  border-top: 4px solid var(--accent);
}

.lecture-card.unavailable {
  background: transparent;
  box-shadow: none;
}

.neutral-badge {
  background: #e5e7eb;
  color: #374151;
}

.availability {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7f5f1;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 750;
}

.muted {
  color: var(--muted);
}

.resource-list {
  columns: 2 280px;
  padding-left: 20px;
}

.course-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--line);
  list-style: none;
}

.course-path li {
  display: grid;
  min-height: 112px;
  align-content: center;
  gap: 5px;
  padding: 18px;
  background: var(--bg);
}

.course-path span {
  color: var(--muted);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.site-footer p {
  margin: 0;
}

.image-credit {
  max-width: 520px;
  text-align: right;
}

/* Slide deck */
.deck-body {
  width: 100%;
  overflow: hidden;
  background: #111827;
  color: #f9fafb;
}

.deck {
  min-height: 100vh;
}

.slide {
  display: none;
  min-height: 100vh;
  padding: 74px clamp(22px, 6vw, 84px) 96px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.22), transparent 32%),
    linear-gradient(315deg, rgba(194, 65, 12, 0.15), transparent 34%),
    #111827;
}

.slide.current {
  display: grid;
  align-content: center;
}

.slide.light {
  background: var(--bg);
  color: var(--ink);
}

.slide h1,
.slide h2 {
  max-width: 980px;
  margin: 0 0 24px;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: 0;
}

.slide h3 {
  margin: 22px 0 8px;
  font-size: 1.35rem;
}

.slide .lead {
  max-width: 820px;
  color: #d1d5db;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
}

.slide p,
.slide li {
  max-width: 920px;
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
}

.slide ul,
.slide ol {
  margin: 0;
  padding-left: 1.35em;
}

.slide code {
  padding: 0.08em 0.24em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
}

.light code {
  background: rgba(15, 118, 110, 0.09);
}

.kicker {
  margin-bottom: 12px;
  color: #99f6e4;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.light .kicker {
  color: var(--accent-dark);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.panel {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.light .panel {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline div {
  padding: 12px 14px;
  border-left: 5px solid #5eead4;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 0 7px 7px 0;
}

.truth-table {
  width: min(100%, 620px);
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
}

.truth-table th,
.truth-table td {
  min-width: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.light .truth-table th,
.light .truth-table td {
  border-color: var(--line);
}

.truth-table input {
  width: 54px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: center;
  font: inherit;
}

.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(17, 24, 39, 0.92);
  backdrop-filter: blur(12px);
}

.controls a,
.controls button {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  background: #1f2937;
  color: #f9fafb;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.controls a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-decoration: none;
}

.progress {
  min-width: 82px;
  color: #d1d5db;
  text-align: center;
  font-weight: 750;
}

.poll-form,
.quiz {
  display: grid;
  max-width: 760px;
  gap: 12px;
}

.poll-form input,
.quiz input {
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.poll-form button,
.quiz button,
.reveal {
  width: fit-content;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.poll-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.poll-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.answer {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.32);
}

.answer.visible {
  display: block;
}

.feedback {
  min-height: 28px;
  font-weight: 800;
}

.feedback.good {
  color: var(--good);
}

.feedback.bad {
  color: var(--bad);
}

.note {
  margin-top: 24px;
  padding: 12px 14px;
  border-left: 5px solid var(--warm);
  background: rgba(194, 65, 12, 0.12);
  color: inherit;
  font-size: 1rem;
}

.diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  max-width: 820px;
}

.gate {
  min-height: 74px;
  padding: 14px 20px;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 850;
  text-align: center;
}

.arrow {
  font-size: 2rem;
  font-weight: 900;
}

.title-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.title-route span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  font-weight: 750;
}

.title-route i {
  color: #5eead4;
  font-style: normal;
}

.big-question {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  max-width: 880px;
  align-items: center;
  gap: 18px;
  margin: 28px 0;
}

.big-question span {
  padding: 24px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  text-align: center;
}

.big-question strong {
  color: var(--warm);
  font-size: 3rem;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.panel-number {
  color: #5eead4;
  font-size: 0.86rem;
  font-weight: 800;
}

.light .panel-number {
  color: var(--accent);
}

.prompt {
  margin-top: 24px;
  padding-left: 15px;
  border-left: 5px solid var(--warm);
  font-weight: 700;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1020px;
  margin: 18px 0 22px;
  padding: 1px;
  background: var(--line);
}

.device-grid div {
  display: grid;
  min-height: 94px;
  align-content: center;
  gap: 4px;
  padding: 15px;
  background: var(--bg);
}

.device-grid span {
  color: var(--muted);
}

.image-slide.current {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.image-slide figure {
  position: relative;
  height: min(68vh, 690px);
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #030712;
}

.image-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-slide figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 14px 12px;
  background: linear-gradient(transparent, rgba(3, 7, 18, 0.92));
  color: #f9fafb;
  font-size: 0.82rem;
}

.image-slide figcaption a {
  color: #99f6e4;
}

.image-copy h2 {
  font-size: clamp(2rem, 4.3vw, 4rem);
}

.abstraction-ladder {
  display: grid;
  gap: 7px;
  max-width: 880px;
  margin-bottom: 20px;
}

.abstraction-ladder div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: 50px;
  align-items: center;
  padding: 8px 14px;
  border-left: 6px solid var(--accent);
  background: #fff;
}

.abstraction-ladder div:nth-child(2) {
  margin-left: 5%;
  border-color: var(--cool);
}

.abstraction-ladder div:nth-child(3) {
  margin-left: 10%;
  border-color: var(--warm);
}

.abstraction-ladder div:nth-child(4) {
  margin-left: 15%;
  border-color: #a16207;
}

.abstraction-ladder div:nth-child(5) {
  margin-left: 20%;
  border-color: #6b7280;
}

.abstraction-ladder span {
  color: var(--muted);
}

.comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  max-width: 940px;
  margin: 10px 0 20px;
  background: rgba(255, 255, 255, 0.2);
}

.comparison > div {
  padding: 24px;
  background: #172033;
}

.comparison-label {
  color: #fdba74;
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.accent-label {
  color: #5eead4;
}

.comparison ul {
  margin-top: 14px;
}

.conductivity-scale {
  display: grid;
  grid-template-columns: 1fr auto 1.25fr auto 1fr;
  align-items: stretch;
  gap: 12px;
  max-width: 1000px;
  margin: 28px 0;
}

.conductivity-scale div {
  display: grid;
  align-content: center;
  min-height: 120px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.conductivity-scale .active {
  border-color: var(--accent);
  background: #e7f5f1;
}

.conductivity-scale span {
  color: var(--muted);
}

.conductivity-scale i {
  align-self: center;
  font-style: normal;
  font-size: 1.5rem;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1020px;
  margin: 14px 0 24px;
  background: rgba(255, 255, 255, 0.25);
}

.people-grid div {
  display: grid;
  gap: 8px;
  padding: 22px;
  background: #172033;
}

.people-grid strong {
  color: #5eead4;
  font-size: 1.2rem;
}

.people-grid span {
  color: #d1d5db;
}

.company-tree {
  display: grid;
  max-width: 940px;
  justify-items: center;
  gap: 5px;
  margin-bottom: 18px;
}

.company-tree > div:not(.tree-branches) {
  min-width: min(100%, 470px);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  text-align: center;
}

.company-tree div span {
  display: block;
  color: var(--muted);
}

.company-tree > i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.3rem;
}

.tree-branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.tree-branches span {
  padding: 12px;
  border-top: 4px solid var(--accent);
  background: #fff;
  text-align: center;
}

.integration-story {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1080px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.2);
}

.integration-story div {
  padding: 20px;
  background: #172033;
}

.integration-story span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #374151;
  font-weight: 800;
}

.integration-story .highlight-step {
  background: var(--accent-dark);
}

.role-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 1000px;
  margin: 12px 0 22px;
  background: var(--line);
}

.role-table div {
  display: grid;
  gap: 3px;
  padding: 16px;
  background: var(--bg);
}

.role-table strong {
  color: var(--accent-dark);
  font-size: 1.1rem;
}

.role-table span {
  color: var(--muted);
}

.role-table b {
  font-weight: 650;
}

.boundary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  max-width: 1050px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.18);
}

.boundary > div {
  padding: 22px;
  background: #172033;
}

.boundary > div:nth-child(2) {
  background: var(--accent-dark);
}

.boundary-label {
  color: #d1d5db;
  font-size: 0.83rem;
  font-weight: 800;
  text-transform: uppercase;
}

.active-label {
  color: #99f6e4;
}

.switch-model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
  max-width: 900px;
  margin: 20px 0;
}

.switch-model > div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.signal {
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 800;
}

.signal.low {
  color: var(--cool);
}

.signal.high {
  color: var(--good);
}

.switch-line {
  position: relative;
  height: 34px;
  margin: 8px 12px 22px;
  border-bottom: 4px solid var(--ink);
}

.switch-line::before,
.switch-line::after {
  position: absolute;
  bottom: -8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.switch-line::before {
  left: 0;
}

.switch-line::after {
  right: 0;
}

.open-switch i,
.closed-switch i {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 72%;
  height: 4px;
  background: var(--warm);
  transform-origin: right center;
}

.open-switch i {
  transform: rotate(18deg);
}

.closed-switch i {
  transform: rotate(0);
  background: var(--good);
}

.voltage-bar {
  display: grid;
  grid-template-columns: 1fr 0.45fr 1fr;
  max-width: 980px;
  min-height: 145px;
  margin: 20px 0 26px;
  overflow: hidden;
  border-radius: 8px;
}

.voltage-bar div {
  display: grid;
  align-content: center;
  justify-items: center;
}

.voltage-bar strong {
  font-size: 2.5rem;
}

.zero-zone {
  background: #1d4ed8;
}

.uncertain-zone {
  background: #fbbf24;
  color: #111827;
}

.one-zone {
  background: #15803d;
}

.noise-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 1000px;
  margin: 28px 0;
}

.noise-demo div {
  display: grid;
  min-width: 150px;
  gap: 4px;
  padding: 15px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.noise-demo div span {
  color: var(--muted);
}

.noise-demo .interpreted {
  border-color: var(--cool);
  background: #eff6ff;
}

.noise-demo i {
  color: var(--muted);
  font-style: normal;
}

.bit-pairs {
  display: grid;
  gap: 8px;
  max-width: 940px;
  margin: 16px 0 24px;
}

.bit-pairs div {
  display: grid;
  grid-template-columns: 54px 1fr 54px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.bit-pairs code {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
}

.code-story,
.given {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.code-story code,
.given code {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.operator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.75fr);
  gap: 44px;
  align-items: center;
}

.compact-table {
  max-width: 520px;
}

.expression-display {
  max-width: 1000px;
  margin: 22px 0;
  padding: 24px;
  border-left: 7px solid #5eead4;
  background: rgba(255, 255, 255, 0.08);
}

.expression-display code {
  padding: 0;
  background: transparent;
  font-size: clamp(1.2rem, 3vw, 2rem);
}

.dark-expression {
  border-color: var(--accent);
  background: #fff;
}

.evaluation-steps {
  display: grid;
  gap: 8px;
}

.horizontal-quiz {
  grid-template-columns: minmax(190px, 340px) auto 1fr;
  align-items: center;
}

.secondary-reveal {
  margin-top: 16px;
  background: var(--ink);
}

.truth-anatomy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1000px;
  margin: 16px 0 24px;
  background: rgba(255, 255, 255, 0.25);
}

.truth-anatomy div {
  display: grid;
  min-height: 120px;
  align-content: center;
  gap: 6px;
  padding: 18px;
  background: #172033;
}

.truth-anatomy strong {
  color: #99f6e4;
}

.truth-anatomy span {
  color: #d1d5db;
}

.logic-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 920px;
  margin: 24px 0;
}

.logic-flow div {
  display: grid;
  min-height: 112px;
  place-content: center;
  gap: 6px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  text-align: center;
}

.logic-flow div span {
  color: #d1d5db;
}

.logic-flow i {
  color: #5eead4;
  font-style: normal;
  font-size: 1.8rem;
}

.logic-flow .logic-gate {
  border-radius: 8px 40px 40px 8px;
  background: var(--accent-dark);
}

.nand-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  max-width: 1050px;
  margin: 24px 0;
}

.nand-equation div {
  display: grid;
  min-height: 110px;
  place-content: center;
  gap: 5px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.nand-equation i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.7rem;
}

.nand-equation .nand-result {
  border-color: var(--accent);
  background: #e7f5f1;
}

.nand-equation span {
  color: var(--muted);
}

.output-emphasis {
  background: rgba(94, 234, 212, 0.15);
  color: #99f6e4;
  font-weight: 850;
}

.build-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
}

.build-chain span {
  padding: 10px 13px;
  border: 2px solid var(--accent);
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
}

.build-chain i {
  color: var(--warm);
  font-style: normal;
}

.challenge-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 900px;
  margin: 26px 0;
}

.challenge-line code {
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  font-size: clamp(1.15rem, 3vw, 1.8rem);
}

.light .challenge-line code {
  border-color: var(--line);
  background: #fff;
}

.spec-implementation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  max-width: 1080px;
  margin: 20px 0;
}

.spec-implementation > div {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 180px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: #172033;
}

.spec-implementation span {
  color: #99f6e4;
  font-size: 0.83rem;
  font-weight: 800;
  text-transform: uppercase;
}

.spec-implementation strong {
  font-size: 1.25rem;
}

.spec-implementation > i {
  align-self: center;
  color: #5eead4;
  font-style: normal;
  font-size: 1.6rem;
}

.spec-implementation p {
  margin: 0;
  color: #d1d5db;
  font-size: 1rem;
}

.hdl-preview {
  display: grid;
  grid-template-columns: minmax(330px, 0.85fr) minmax(0, 1fr);
  gap: 38px;
  align-items: center;
}

.hdl-preview pre {
  margin: 0;
  padding: 22px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  font-size: clamp(0.9rem, 1.8vw, 1.18rem);
}

.hdl-preview pre code {
  padding: 0;
  background: transparent;
}

.claim-list {
  display: grid;
  gap: 9px;
  max-width: 1000px;
  margin-bottom: 22px;
}

.claim-list li {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.exit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1050px;
}

.exit-grid div {
  min-height: 180px;
  padding: 20px;
  border-top: 5px solid var(--accent);
  background: #fff;
}

.exit-grid span {
  color: var(--accent);
  font-weight: 850;
}

.exit-grid p {
  font-weight: 700;
}

.next-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.next-actions > span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  color: #d1d5db;
  font-weight: 700;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1080px;
  background: var(--line);
}

.schedule-grid div {
  display: grid;
  min-height: 170px;
  align-content: center;
  gap: 8px;
  padding: 20px;
  background: #fff;
}

.schedule-grid span,
.staff-grid span,
.course-output strong {
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-grid strong {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
}

.schedule-grid small {
  color: var(--muted);
  font-size: 0.95rem;
}

.schedule-grid .lab-slot {
  border-top: 5px solid var(--warm);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1050px;
  background: rgba(255, 255, 255, 0.22);
}

.staff-grid div {
  display: grid;
  min-height: 210px;
  align-content: center;
  gap: 9px;
  padding: 22px;
  background: #172033;
}

.staff-grid span {
  color: #99f6e4;
}

.staff-grid strong {
  font-size: 1.35rem;
}

.staff-grid p {
  margin: 0;
  color: #d1d5db;
  font-size: 1rem;
}

.course-output,
.switch-to-gate,
.function-count {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  max-width: 1080px;
  margin: 28px 0;
}

.course-output div,
.switch-to-gate div,
.function-count div {
  display: grid;
  min-height: 130px;
  place-content: center;
  gap: 7px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.course-output i,
.switch-to-gate i,
.function-count i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.6rem;
}

.course-output span,
.switch-to-gate span,
.function-count span {
  color: var(--muted);
}

.course-layer-stack {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin: 24px 0 18px;
}

.course-layer-stack div {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent-dark);
  border-radius: 8px;
  background: #fff;
}

.course-layer-stack strong {
  color: var(--accent-dark);
  font-size: 1.08rem;
}

.course-layer-stack span {
  color: var(--muted);
}

.course-promise-slide h2 {
  font-size: clamp(2.6rem, 5.8vw, 4.35rem);
}

.course-promise-slide p {
  margin: 12px 0;
}

.course-promise-slide .course-layer-stack {
  gap: 8px;
  margin: 18px 0 16px;
}

.course-promise-slide .course-layer-stack div {
  min-height: 60px;
  padding-block: 10px;
}

.textbook-entry {
  display: grid;
  gap: 14px;
  max-width: 980px;
  padding: 30px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--accent-dark);
  border-radius: 8px;
  background: #fff;
}

.textbook-entry p {
  margin: 0;
}

.textbook-entry .textbook-authors {
  color: var(--accent-dark);
  font-size: 1.1rem;
  font-weight: 800;
}

.textbook-entry h3 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(1.7rem, 3.5vw, 2.55rem);
  line-height: 1.16;
}

.textbook-entry h3 a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 5px;
}

.isbn-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.isbn-list strong {
  margin-right: 6px;
  color: var(--ink);
}

.outcome-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 1080px;
  background: rgba(255, 255, 255, 0.2);
}

.outcome-list div {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  padding: 14px;
  background: #172033;
}

.outcome-list span {
  color: #5eead4;
  font-weight: 850;
}

.outcome-list p {
  margin: 0;
  color: #e5e7eb;
  font-size: clamp(0.98rem, 1.7vw, 1.18rem);
}

.grade-bars {
  display: grid;
  gap: 12px;
  max-width: 980px;
}

.grade-bars div {
  position: relative;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.grade-bars div::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--share);
  background: rgba(15, 118, 110, 0.15);
  content: "";
}

.grade-bars .major-grade::before {
  background: rgba(194, 65, 12, 0.15);
}

.grade-bars span,
.grade-bars strong {
  position: relative;
  z-index: 1;
  font-size: 1.15rem;
}

.grade-bars strong {
  font-size: 1.4rem;
}

.total-line {
  display: flex;
  max-width: 980px !important;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 2px solid var(--ink);
}

.lab-grade-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: stretch;
  max-width: 1050px;
}

.lab-math {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 22px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: #172033;
  text-align: center;
}

.lab-math span {
  color: #d1d5db;
}

.lab-math strong {
  color: #5eead4;
  font-size: 1.7rem;
}

.lab-math i {
  color: #fdba74;
  font-style: normal;
  font-size: 1.5rem;
}

.grade-summary {
  display: grid;
  align-content: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.grade-summary div {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  background: #172033;
}

.grade-summary .grade-total {
  border-top: 4px solid #5eead4;
  background: var(--accent-dark);
}

.integrity-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  max-width: 1050px;
  background: var(--line);
}

.integrity-split > div {
  min-height: 240px;
  padding: 22px;
  background: #fff;
}

.integrity-split strong {
  font-size: 1.25rem;
}

.integrity-split .permitted {
  border-top: 6px solid var(--good);
}

.integrity-split .not-permitted {
  border-top: 6px solid var(--bad);
}

.learning-loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  max-width: 1080px;
  margin: 20px 0;
}

.learning-loop div {
  min-height: 180px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: #172033;
}

.learning-loop span {
  color: #99f6e4;
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.learning-loop p {
  color: #e5e7eb;
}

.learning-loop i {
  color: #5eead4;
  font-style: normal;
  font-size: 1.5rem;
}

.expectation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1050px;
  background: var(--line);
}

.expectation-grid div {
  display: grid;
  min-height: 130px;
  align-content: center;
  gap: 6px;
  padding: 18px;
  background: #fff;
}

.expectation-grid strong {
  color: var(--accent-dark);
}

.expectation-grid span {
  color: var(--muted);
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  max-width: 1080px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.22);
}

.quote-grid blockquote {
  display: grid;
  min-height: 230px;
  align-content: center;
  gap: 16px;
  margin: 0;
  padding: 24px;
  background: #172033;
}

.quote-grid blockquote p {
  margin: 0;
  color: #f9fafb;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
}

.quote-grid cite {
  color: #99f6e4;
  font-style: normal;
  font-weight: 750;
}

.switch-to-gate .gate-result,
.function-count .count-result {
  border-color: var(--accent);
  background: #e7f5f1;
}

.canonical-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1050px;
  margin: 20px 0;
  background: rgba(255, 255, 255, 0.22);
}

.canonical-steps div {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: start;
  padding: 18px;
  background: #172033;
}

.canonical-steps span {
  color: #5eead4;
  font-weight: 850;
}

.canonical-steps p {
  margin: 0;
  color: #e5e7eb;
}

.row-to-term {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1.4fr;
  gap: 14px;
  align-items: center;
  max-width: 1050px;
  margin: 28px 0;
}

.row-to-term div {
  display: grid;
  min-height: 120px;
  place-content: center;
  gap: 5px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.row-to-term i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.6rem;
}

.row-to-term span {
  color: var(--muted);
}

.row-to-term .term-result {
  border-color: var(--accent);
  background: #e7f5f1;
}

.light-comparison {
  background: var(--line);
}

.light .light-comparison > div {
  background: #fff;
}

.light .light-comparison p {
  color: var(--ink);
}

.light .light-comparison .comparison-label {
  color: var(--warm);
}

.light .light-comparison .accent-label {
  color: var(--accent-dark);
}

.story-section.current {
  align-content: center;
}

.story-section h2 {
  max-width: 1100px;
}

.power-equation,
.story-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 1100px;
  margin: 26px 0;
}

.power-equation span,
.story-equation span {
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
}

.power-equation i,
.story-equation i {
  color: #5eead4;
  font-style: normal;
  font-size: 1.4rem;
}

.source-note {
  color: #9ca3af;
  font-size: 0.88rem !important;
}

.further-reading {
  max-width: 920px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid currentColor;
  color: inherit;
  font-size: 0.95rem !important;
}

.further-reading a {
  color: var(--accent-dark);
  font-weight: 750;
}

.lithography-steps {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.lithography-steps li {
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
}

.reading-slide .image-copy h2 {
  font-size: clamp(2rem, 3.5vw, 3.35rem);
}

.reading-slide .image-copy > p:not(.further-reading) {
  font-size: clamp(1rem, 1.75vw, 1.22rem);
}

.reading-slide .further-reading {
  margin-top: 12px;
  padding-top: 9px;
  font-size: 0.86rem !important;
}

.hotel-story,
.demand-shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  max-width: 1080px;
  margin: 20px 0;
}

.hotel-story div,
.demand-shift div {
  display: grid;
  min-height: 190px;
  align-content: center;
  gap: 7px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: #172033;
}

.hotel-story span,
.demand-shift span {
  color: #99f6e4;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hotel-story p,
.demand-shift p {
  margin: 0;
  color: #e5e7eb;
  font-size: clamp(0.98rem, 1.7vw, 1.16rem);
}

.hotel-story i,
.demand-shift i {
  align-self: center;
  color: #5eead4;
  font-style: normal;
  font-size: 1.6rem;
}

.scale-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1100px;
  margin: 14px 0 22px;
  background: rgba(255, 255, 255, 0.2);
}

.scale-grid div {
  display: grid;
  min-height: 205px;
  align-content: center;
  gap: 7px;
  padding: 19px;
  background: #172033;
}

.scale-grid span {
  color: #5eead4;
  font-weight: 850;
}

.scale-grid strong {
  font-size: 1.16rem;
}

.scale-grid p {
  margin: 0;
  color: #d1d5db;
  font-size: 1rem;
}

.manufacturing-flow,
.supply-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  max-width: 1120px;
  margin: 24px 0;
}

.manufacturing-flow div,
.supply-chain div {
  display: grid;
  min-height: 145px;
  place-content: center;
  gap: 6px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.manufacturing-flow strong,
.supply-chain strong {
  color: var(--accent-dark);
}

.manufacturing-flow span,
.supply-chain span {
  color: var(--muted);
}

.manufacturing-flow i,
.supply-chain i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.5rem;
}

.chip-cycle {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto;
  gap: 10px;
  align-items: center;
  max-width: 1120px;
  margin: 28px 0;
}

.chip-cycle div {
  display: grid;
  min-height: 115px;
  place-content: center;
  padding: 15px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.chip-cycle i {
  color: var(--warm);
  font-style: normal;
  font-size: 1.5rem;
}

.world-contributions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1150px;
  margin: 20px 0;
  background: rgba(255, 255, 255, 0.22);
}

.world-contributions div {
  display: grid;
  min-height: 105px;
  align-content: center;
  gap: 7px;
  padding: 15px;
  background: #172033;
  color: #d1d5db;
}

.world-contributions strong {
  color: #99f6e4;
}

.world-contributions div:last-child {
  grid-column: span 2;
}

.strategy-table {
  display: grid;
  gap: 1px;
  max-width: 1100px;
  background: var(--line);
}

.strategy-table div {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 18px;
  align-items: center;
  min-height: 70px;
  padding: 10px 15px;
  background: var(--bg);
}

.strategy-table strong {
  color: var(--accent-dark);
}

.strategy-table span {
  color: var(--muted);
}

.strategy-table b {
  font-weight: 700;
}

.award-note,
.credit-note {
  max-width: 1050px;
  padding: 14px 16px;
  border-left: 5px solid var(--warm);
  background: rgba(194, 65, 12, 0.1);
  font-size: 1rem;
}

.award-note a,
.credit-note a {
  color: var(--accent-dark);
  font-weight: 750;
}

.image-slide .award-note {
  padding: 12px 14px;
  background: rgba(94, 234, 212, 0.12);
}

.image-slide .award-note a {
  color: #99f6e4;
}

.controlled-path {
  display: grid;
  gap: 14px;
  width: min(100%, 1120px);
  margin: 22px 0;
}

.path-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.65fr) auto minmax(300px, 1.6fr) auto minmax(120px, 0.65fr);
  gap: 14px;
  align-items: center;
  min-height: 135px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  background: #fff;
}

.path-row > i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.5rem;
}

.control-value,
.result-value {
  font-weight: 850;
  text-align: center;
}

.path-off .control-value,
.path-off .result-value {
  color: var(--cool);
}

.path-on .control-value,
.path-on .result-value {
  color: var(--good);
}

.channel-state {
  display: grid;
  gap: 12px;
  text-align: center;
}

.channel-state > span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.channel-state b {
  position: relative;
  height: 7px;
  background: var(--good);
}

.blocked-path b {
  height: 0;
  border-top: 4px dashed var(--cool);
  background: none;
}

.blocked-path b::after {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 5px;
  height: 24px;
  background: var(--warm);
  content: "";
  transform: rotate(25deg);
}

.dependency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1080px;
  margin: 14px 0 22px;
  background: rgba(255, 255, 255, 0.22);
}

.dependency-grid div {
  display: grid;
  min-height: 120px;
  align-content: center;
  gap: 5px;
  padding: 18px;
  background: #172033;
}

.dependency-grid strong {
  color: #99f6e4;
}

.dependency-grid span {
  color: #d1d5db;
}

/* Lecture 1 uses one quiet, light visual system throughout. */
.lecture-one {
  background: var(--bg);
  color: var(--ink);
}

.lecture-one .slide {
  background: var(--bg);
  color: var(--ink);
}

.lecture-one .slide .lead,
.lecture-one .source-note {
  color: var(--muted);
}

.lecture-one .kicker,
.lecture-one .title-route i,
.lecture-one .power-equation i,
.lecture-one .story-equation i,
.lecture-one .hotel-story i,
.lecture-one .demand-shift i,
.lecture-one .scale-grid span,
.lecture-one .world-contributions strong,
.lecture-one .dependency-grid strong {
  color: var(--accent-dark);
}

.lecture-one .title-route span,
.lecture-one .power-equation span,
.lecture-one .story-equation span {
  border-color: var(--line);
  background: #fff;
}

.lecture-one .hotel-story,
.lecture-one .demand-shift,
.lecture-one .scale-grid,
.lecture-one .world-contributions,
.lecture-one .dependency-grid {
  background: var(--line);
}

.lecture-one .hotel-story div,
.lecture-one .demand-shift div,
.lecture-one .scale-grid div,
.lecture-one .world-contributions div,
.lecture-one .dependency-grid div {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.lecture-one .hotel-story span,
.lecture-one .demand-shift span {
  color: var(--warm);
}

.lecture-one .hotel-story p,
.lecture-one .demand-shift p,
.lecture-one .scale-grid p,
.lecture-one .world-contributions div,
.lecture-one .dependency-grid span {
  color: var(--muted);
}

.lecture-one .image-slide .award-note {
  background: rgba(194, 65, 12, 0.1);
}

.lecture-one .image-slide .award-note a,
.lecture-one .further-reading a {
  color: var(--accent-dark);
}

.lecture-one .logic-flow div {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.lecture-one .logic-flow div span {
  color: var(--muted);
}

.lecture-one .logic-flow div code {
  color: var(--accent-dark);
}

.lecture-one .logic-flow i {
  color: var(--accent-dark);
}

.lecture-one .attribution-slide h2 {
  margin-bottom: 16px;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
}

.lecture-one .attribution-slide .three-col {
  gap: 12px;
}

.lecture-one .attribution-slide .panel {
  padding: 14px;
}

.lecture-one .attribution-slide .panel h3 {
  margin: 12px 0 6px;
  font-size: 1.2rem;
}

.lecture-one .attribution-slide .panel p {
  margin: 0;
  font-size: clamp(0.94rem, 1.6vw, 1.12rem);
  line-height: 1.38;
}

.lecture-one .attribution-slide .award-note {
  margin-top: 14px;
  padding-block: 10px;
  font-size: 0.96rem;
}

.lecture-one .logic-flow .logic-gate {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.lecture-one .compact-slide h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4.1vw, 3.65rem);
}

.lecture-one .compact-slide .controlled-path {
  gap: 8px;
  margin: 12px 0;
}

.lecture-one .compact-slide .path-row {
  min-height: 105px;
  padding: 10px 14px;
}

.lecture-one .compact-slide p {
  margin: 8px 0;
  font-size: clamp(0.96rem, 1.55vw, 1.14rem);
}

.lecture-one .compact-slide .further-reading {
  margin-top: 10px;
  padding-top: 9px;
  font-size: 0.88rem !important;
}

/* Lecture 2 uses a single light system and topic-first headings. */
.lecture-two {
  background: var(--bg);
  color: var(--ink);
}

.lecture-two .slide {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-block: 48px 82px;
  padding-inline: clamp(24px, 4vw, 72px);
  background: var(--bg);
  color: var(--ink);
}

.lecture-two .slide.current {
  align-content: start;
}

.lecture-two .title-slide.current {
  align-content: center;
}

.lecture-two .slide h1,
.lecture-two .slide h2 {
  width: 100%;
  max-width: none;
}

.lecture-two .slide h2 {
  margin-bottom: 12px;
  font-size: clamp(2.2rem, 3.4vw, 3.7rem);
}

.lecture-two .slide p,
.lecture-two .slide li {
  max-width: none;
  font-size: clamp(1rem, 1.75vw, 1.25rem);
}

.lecture-two .slide .lead,
.lecture-two .slide-subtitle {
  color: var(--muted);
}

.lecture-two .slide-subtitle {
  width: 100%;
  max-width: none;
  margin: 0 0 22px;
  font-size: clamp(1.16rem, 2.1vw, 1.5rem) !important;
}

.lecture-two .kicker,
.lecture-two .title-route i,
.lecture-two .logic-flow i,
.lecture-two .function-machine i,
.lecture-two .function-count i {
  color: var(--accent-dark);
}

.lecture-two .title-route span,
.lecture-two .logic-flow div,
.lecture-two .function-machine > div,
.lecture-two .code-story code,
.lecture-two .given code {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.lecture-two .logic-flow div span,
.lecture-two .function-machine div span {
  color: var(--muted);
}

.lecture-two .logic-flow div code,
.lecture-two .function-machine div code {
  color: var(--accent-dark);
}

.lecture-two .logic-flow .logic-gate,
.lecture-two .function-machine .function-box {
  border-color: #7dd3fc;
  background: #e0f2fe;
}

.lecture-two code {
  background: rgba(15, 118, 110, 0.09);
}

.definition-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 1120px);
  margin: 22px 0;
  background: var(--line);
}

.definition-strip div {
  display: grid;
  min-height: 112px;
  align-content: center;
  gap: 7px;
  padding: 18px;
  background: #fff;
}

.definition-strip strong {
  color: var(--accent-dark);
}

.definition-strip span {
  color: var(--muted);
}

.lecture-two .bit-pairs {
  width: min(100%, 1040px);
}

.lecture-two .bit-pairs div {
  border-color: var(--line);
  background: #fff;
}

.function-machine {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(180px, 0.65fr) auto minmax(210px, 1fr);
  gap: 14px;
  align-items: center;
  width: min(100%, 1120px);
  margin: 24px 0;
}

.function-machine > div {
  display: grid;
  min-height: 122px;
  place-content: center;
  gap: 8px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.function-machine i {
  font-style: normal;
  font-size: 1.6rem;
}

.function-machine .function-box strong {
  font-size: 2.2rem;
}

.lecture-two .operator-layout,
.truth-table-intro,
.exercise-layout,
.canonical-layout {
  width: 100%;
}

.truth-table-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.truth-table-intro > table,
.lecture-two .operator-layout > table,
.exercise-layout > div:last-child,
.canonical-example {
  justify-self: end;
}

.operator-copy {
  display: grid;
  gap: 18px;
}

.operator-copy p {
  margin: 0;
}

.content-marker {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-dark);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.truth-row-quiz {
  grid-template-columns: minmax(180px, 300px) auto;
  align-items: center;
}

.lecture-two .truth-table {
  background: #fff;
  color: var(--ink);
}

.lecture-two .truth-table th,
.lecture-two .truth-table td {
  border-color: var(--line);
}

.math-expression {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15em;
}

.overline {
  display: inline-block;
  border-top: 1.5px solid currentColor;
  line-height: 1;
}

.overline-group {
  display: inline-block;
  padding-top: 0.12em;
  border-top: 1.5px solid currentColor;
  line-height: 1;
}

.next-step {
  width: 100%;
  margin: 18px 0 0;
  padding: 10px 14px;
  border-left: 5px solid var(--warm);
  background: #fff7ed;
  color: var(--ink);
  font-size: clamp(0.92rem, 1.45vw, 1.08rem) !important;
}

.next-step strong {
  color: var(--warm);
}

.notation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 920px);
  margin: 20px 0;
  background: var(--line);
}

.notation-grid div {
  display: grid;
  min-height: 112px;
  place-content: center;
  gap: 5px;
  padding: 16px;
  background: #fff;
  text-align: center;
}

.notation-grid span,
.notation-grid small {
  color: var(--muted);
}

.notation-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}

.lecture-two .light-expression,
.lecture-two .compact-expression {
  border-color: var(--accent);
  background: #fff;
}

.exercise-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.75fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.exercise-slide h2 {
  margin-bottom: 6px !important;
}

.compact-expression {
  margin: 14px 0 18px;
  padding: 16px 18px;
}

.exercise-table {
  max-width: 520px;
}

.exercise-table th,
.exercise-table td {
  padding: 6px 10px;
  font-size: 1rem;
}

.exercise-table input {
  width: 48px;
  min-height: 32px;
}

.lecture-two .canonical-slide {
  padding-top: 48px;
}

.lecture-two .canonical-slide h2 {
  font-size: clamp(2.05rem, 3.8vw, 3.35rem);
}

.lecture-two .canonical-slide .slide-subtitle {
  margin-bottom: 14px;
}

.canonical-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.72fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.canonical-slide > p:last-child {
  margin: 12px 0 0;
}

.lecture-two .canonical-steps {
  grid-template-columns: 1fr;
  width: 100%;
  margin: 0;
  background: var(--line);
}

.lecture-two .canonical-steps div {
  min-height: auto;
  padding: 13px 16px;
  background: #fff;
}

.lecture-two .canonical-steps span {
  color: var(--accent-dark);
}

.lecture-two .canonical-steps p {
  color: var(--ink);
  font-size: 1rem;
}

.canonical-example {
  display: grid;
  gap: 14px;
}

.canonical-conclusion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: 100%;
  margin-top: 12px;
  background: var(--line);
}

.canonical-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.canonical-conclusion p {
  margin: 0;
  padding: 10px 13px;
  background: #fff;
  font-size: 0.92rem;
}

.canonical-conclusion strong {
  color: var(--accent-dark);
}

.canonical-example .truth-table th,
.canonical-example .truth-table td {
  padding: 5px 9px;
  font-size: 0.94rem;
}

.selected-row {
  background: #dcfce7;
  font-weight: 800;
}

.second-selected-row {
  background: #dbeafe;
}

.row-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-left: 5px solid var(--accent);
  background: #fff;
}

.row-result span {
  color: var(--muted);
}

.row-result strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}

.xor-layout {
  grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1.22fr);
}

.derived-functions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.derived-functions-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.derived-functions-grid h3 {
  margin: 0 0 8px;
  color: var(--accent-dark);
}

.derived-functions-grid p {
  margin: 6px 0 12px;
  font-size: 1rem;
}

.derived-functions-grid .function-expression {
  min-height: 34px;
  font-size: 1.25rem;
}

.mini-function-table {
  width: 100%;
}

.mini-function-table th,
.mini-function-table td {
  min-width: 0;
  padding: 5px 7px;
  font-size: 0.92rem;
}

.practice-list {
  display: grid;
  gap: 1px;
  width: min(100%, 1100px);
  margin: 18px 0;
  background: var(--line);
}

.practice-list div {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 13px 16px;
  background: #fff;
}

.practice-list span {
  color: var(--accent-dark);
  font-weight: 850;
}

.practice-list p {
  margin: 0;
}

.practice-layout {
  display: grid;
  grid-template-columns: minmax(500px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  width: 100%;
}

.practice-layout .practice-list {
  margin-top: 0;
}

.practice-table {
  max-width: 620px;
  justify-self: start;
}

.practice-table th,
.practice-table td {
  min-width: 58px;
  padding: 5px 7px;
  font-size: 0.94rem;
}

.practice-table input {
  width: 42px;
  min-height: 30px;
}

.compact-answer {
  width: 100%;
}

.compact-answer p {
  margin: 5px 0;
}

.equivalence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 0.85fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  width: 100%;
}

.equivalence-layout > div:last-child {
  justify-self: end;
}

.equivalence-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  font-size: 1.35rem;
}

.equivalence-pair > .math-expression {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.de-morgan-laws {
  display: grid;
  gap: 1px;
  width: 100%;
  margin: 12px 0;
  background: var(--line);
}

.de-morgan-laws > div {
  padding: 13px 15px;
  background: #fff;
}

.de-morgan-laws strong {
  color: var(--accent-dark);
}

.de-morgan-laws p {
  margin: 7px 0 0;
  font-size: 1.25rem;
}

.equivalence-table {
  max-width: 660px;
}

.equivalence-table input {
  width: 48px;
  min-height: 32px;
}

.equivalence-exercise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin: 8px 0 0;
  background: var(--line);
}

.equivalence-exercise-grid > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: start;
  min-height: 78px;
  padding: 9px 11px;
  background: #fff;
}

.equivalence-exercise-grid > div > span {
  color: var(--accent-dark);
  font-weight: 850;
}

.equivalence-exercise-grid p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.equivalence-exercise-grid code {
  overflow-wrap: anywhere;
}

.equivalence-practice-slide .secondary-reveal {
  margin-top: 10px;
}

.equivalence-answers {
  display: none;
  grid-template-columns: auto 1fr;
  gap: 18px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
}

.equivalence-answers.visible {
  display: grid;
}

.equivalence-answers p {
  margin: 0;
  font-size: 0.9rem;
}

.lecture-two .function-count {
  margin: 18px 0;
}

.lecture-two .function-count div {
  border-color: var(--line);
  background: #fff;
}

.example-note {
  color: var(--muted);
}

.function-reference {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.function-reference th,
.function-reference td {
  padding: 8px 14px;
  border: 1px solid var(--line);
  text-align: left;
}

.function-reference th {
  color: var(--accent-dark);
}

.function-reference thead th span {
  display: block;
  white-space: nowrap;
}

.function-reference tbody th {
  min-width: 190px;
  color: var(--ink);
  text-align: left;
}

.row-reveals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.row-reveals button {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--accent-dark);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.inline-answer {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.inline-answer.visible {
  display: inline;
}

.reference-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin-bottom: 10px;
}

.reference-toolbar p {
  margin: 0;
}

.standard-functions-slide {
  padding-top: 20px !important;
}

.lecture-two .standard-functions-slide h2 {
  margin-bottom: 4px;
  font-size: clamp(2rem, 3.1vw, 2.9rem);
}

.lecture-two .standard-functions-slide .slide-subtitle {
  margin-bottom: 12px;
  font-size: clamp(1rem, 1.75vw, 1.25rem) !important;
}

.standard-functions-slide .function-reference th,
.standard-functions-slide .function-reference td {
  padding: 3px 7px;
  line-height: 1.1;
}

.standard-functions-slide .reference-toolbar {
  margin-bottom: 6px;
}

.standard-functions-slide .reference-toolbar p {
  font-size: 0.82rem;
}

.standard-functions-slide .function-reference tbody th {
  font-size: 0.86rem;
}

.standard-functions-slide .row-reveals {
  gap: 3px;
  margin-top: 1px;
}

.standard-functions-slide .row-reveals button {
  padding: 1px 4px;
  font-size: 0.57rem;
  line-height: 1;
}

.standard-functions-slide .next-step {
  margin-top: 7px;
  padding-block: 7px;
}

.universality-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  width: 100%;
  margin: 14px 0;
}

.universality-path > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.universality-path span {
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.universality-path strong {
  font-size: 1.35rem;
}

.universality-path p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.universality-path > i {
  align-self: center;
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.6rem;
}

.practical-implication {
  width: 100%;
  padding: 11px 15px;
  border-left: 6px solid var(--warm);
  background: #fff7ed;
}

.practical-implication strong {
  color: var(--warm);
}

.practical-implication p {
  margin: 6px 0 0;
}

.lecture-preview-slide .prompt {
  margin-top: 24px;
}

/* Lecture 3 extends the Lecture 2 theme with gate, HDL, and specification diagrams. */
.lecture-three .slide h2 {
  font-size: clamp(2.05rem, 3.15vw, 3.45rem);
}

.lecture-three .spec-implementation {
  width: 100%;
  max-width: none;
}

.lecture-stack-map,
.hdl-motivation-grid,
.bus-concept-layout,
.bus-mux-layout,
.reduction-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: 24px 0;
}

.lecture-stack-map > div,
.hdl-motivation-grid > div,
.bus-card,
.bus-chip {
  display: grid;
  min-height: 125px;
  place-content: center;
  gap: 7px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.lecture-stack-map .active-layer {
  border: 2px solid var(--accent);
  background: #e0f2fe;
}

.lecture-stack-map span,
.hdl-motivation-grid strong,
.bus-card span,
.bus-chip span {
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lecture-stack-map strong,
.hdl-motivation-grid strong,
.bus-chip strong {
  font-size: 1.25rem;
}

.lecture-stack-map small,
.hdl-motivation-grid p {
  color: var(--muted);
}

.lecture-stack-map > i,
.hdl-motivation-grid > i,
.bus-concept-layout > i,
.bus-mux-layout > i,
.reduction-layout > i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.6rem;
}

.gate-definition-layout {
  display: grid;
  grid-template-columns: minmax(480px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  width: 100%;
}

.gate-contract-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.gate-contract-card strong {
  padding: 25px 20px;
  border: 2px solid var(--accent);
  border-radius: 8px 36px 36px 8px;
  background: #e0f2fe;
}

.gate-contract-card i {
  color: var(--accent-dark);
  font-style: normal;
}

.gate-contract-card span,
.definition-copy strong {
  color: var(--accent-dark);
  font-weight: 850;
}

.gate-contract-card code {
  display: block;
  margin-top: 5px;
}

.definition-copy p {
  margin: 0 0 16px;
}

.gate-symbol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.gate-symbol-grid figure {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: center;
  min-height: 140px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.gate-symbol-grid figcaption {
  color: var(--accent-dark);
  font-size: 1.2rem;
  font-weight: 850;
}

.gate-svg,
.circuit-svg {
  width: 100%;
  overflow: visible;
}

.gate-svg path,
.gate-svg circle,
.circuit-svg path,
.circuit-svg circle {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.gate-svg .gate-shape,
.circuit-svg .gate-shape,
.circuit-svg .not-shape,
.circuit-svg .or-shape {
  fill: #e0f2fe;
  stroke: var(--accent-dark);
}

.gate-svg .gate-bubble,
.circuit-svg .gate-bubble {
  fill: #fff;
}

.gate-svg .gate-extra {
  stroke: var(--accent-dark);
}

.three-way-grid,
.drawing-question-grid,
.drawing-answer-grid,
.multiway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}

.circuit-panel,
.drawing-question-grid > div,
.multiway-grid > div {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.circuit-panel > strong,
.multiway-grid > div > strong {
  color: var(--accent-dark);
  font-size: 1.12rem;
}

.circuit-panel .circuit-svg {
  height: 265px;
}

.circuit-svg text {
  fill: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 750;
}

.circuit-svg .wire-label {
  fill: var(--accent-dark);
  font-size: 14px;
}

.circuit-panel p {
  margin: 0;
  text-align: center;
}

.drawing-question-grid > div {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  align-items: center;
}

.drawing-question-grid > div > span {
  grid-row: 1 / 3;
  color: var(--accent-dark);
  font-size: 1.5rem;
  font-weight: 900;
}

.drawing-question-grid p,
.drawing-question-grid button {
  margin: 0;
}

.drawing-answer-grid {
  margin-top: 12px;
}

.circuit-answer {
  margin: 0;
  padding: 8px 14px;
}

.circuit-answer .circuit-svg {
  height: 225px;
}

.gate-drawing-exercise .circuit-answer .circuit-svg {
  height: 180px;
}

.hdl-code-layout,
.hdl-anatomy-layout,
.hdl-trace-layout,
.mux-layout,
.mux-short-layout,
.dmux-layout {
  display: grid;
  grid-template-columns: minmax(470px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  width: 100%;
}

.hdl-code-layout pre,
.hdl-anatomy-layout pre,
.hdl-trace-layout pre,
.hdl-test-layout pre {
  margin: 0;
  padding: 18px;
  overflow: auto;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #111827;
  color: #f8fafc;
  font-size: clamp(0.76rem, 1.35vw, 1rem);
  line-height: 1.45;
}

.lecture-three pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.lecture-three pre mark {
  padding: 1px 3px;
  background: #fde68a;
  color: #111827;
}

.hdl-correspondence,
.api-facts,
.signal-trace {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.hdl-correspondence > div,
.api-facts > div,
.signal-trace > div {
  padding: 14px 16px;
  background: #fff;
}

.hdl-correspondence span,
.api-facts strong {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hdl-correspondence p {
  margin: 5px 0 0;
  font-size: 0.95rem;
}

.api-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.signal-trace > div {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 9px;
  align-items: center;
  text-align: center;
}

.signal-trace span {
  color: var(--accent-dark);
}

.hdl-test-layout {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) auto minmax(260px, 0.65fr) auto minmax(260px, 0.7fr);
  gap: 16px;
  align-items: center;
  width: 100%;
}

.hdl-test-layout > div {
  min-width: 0;
}

.hdl-test-layout > div > span,
.test-verdict > span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hdl-test-layout > i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.5rem;
}

.test-verdict {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.test-verdict p {
  font-size: 0.94rem;
}

.spec-contract-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr 0.7fr 2fr;
  gap: 1px;
  width: 100%;
  margin: 20px 0;
  background: var(--line);
}

.spec-contract-grid > div {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 16px;
  background: #fff;
}

.spec-contract-grid span {
  color: var(--accent-dark);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.compact-comparison {
  width: 100%;
  max-width: none;
}

.compact-comparison > div {
  min-height: 115px;
}

.gate-api-grid,
.wide-api-grid,
.homework-layout,
.tutorial-grid,
.two-rule-cards {
  display: grid;
  gap: 14px;
  width: 100%;
}

.gate-api-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gate-api-grid > div,
.wide-api-grid > div,
.homework-layout > div,
.tutorial-grid > div,
.two-rule-cards > div {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.gate-api-grid strong,
.wide-api-grid strong,
.homework-layout strong,
.two-rule-cards strong {
  color: var(--accent-dark);
  font-size: 1.15rem;
}

.gate-api-grid span,
.homework-layout span,
.two-rule-cards span {
  color: var(--muted);
  font-size: 0.92rem;
}

.mux-layout,
.dmux-layout {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.8fr);
}

.mux-layout > table,
.dmux-layout > table,
.mux-short-layout > table {
  justify-self: end;
}

.chip-symbol {
  position: relative;
  display: grid;
  width: 250px;
  min-height: 150px;
  place-content: center;
  margin: 26px auto;
  border: 3px solid var(--accent-dark);
  border-radius: 9px;
  background: #e0f2fe;
}

.chip-symbol strong {
  font-size: 1.35rem;
}

.chip-symbol .pin {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
}

.chip-symbol .pin::after {
  position: absolute;
  width: 40px;
  height: 2px;
  background: var(--ink);
  content: "";
}

.mux-symbol .pin-a,
.mux-symbol .pin-b,
.dmux-symbol .pin-in { left: -55px; }
.mux-symbol .pin-a { top: 32px; }
.mux-symbol .pin-b { bottom: 32px; }
.mux-symbol .pin-a::after,
.mux-symbol .pin-b::after,
.dmux-symbol .pin-in::after { left: 18px; top: 10px; }
.mux-symbol .pin-out { right: -60px; top: 64px; }
.mux-symbol .pin-out::after { right: 25px; top: 10px; }
.chip-symbol .pin-sel { bottom: -36px; left: 108px; }
.chip-symbol .pin-sel::after { width: 2px; height: 27px; left: 11px; bottom: 20px; }

.dmux-symbol .pin-in { top: 64px; }
.dmux-symbol .pin-aout,
.dmux-symbol .pin-bout { right: -48px; }
.dmux-symbol .pin-aout { top: 32px; }
.dmux-symbol .pin-bout { bottom: 32px; }
.dmux-symbol .pin-aout::after,
.dmux-symbol .pin-bout::after { right: 14px; top: 10px; }

.mux-rule {
  text-align: center;
}

.mux-truth-table th,
.mux-truth-table td {
  padding: 5px 10px;
  font-size: 0.94rem;
}

.mux-short-layout {
  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
}

.selection-question {
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--warm);
  background: #fff;
}

.selection-question p {
  margin-top: 0;
}

.bus-concept-layout,
.bus-mux-layout,
.reduction-layout {
  grid-template-columns: 1fr auto 0.9fr auto 1fr;
}

.bus-lines {
  display: grid;
  gap: 10px;
}

.bus-lines code {
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.wide-api-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wide-api-grid p {
  margin: 0;
  font-size: 0.94rem;
}

.two-rule-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.two-rule-cards > div {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.two-rule-cards span {
  grid-column: 1 / -1;
}

.input-stack {
  display: grid;
  gap: 7px;
}

.input-stack code {
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.multiway-grid > div > code {
  display: block;
  margin: 12px 0;
  overflow-wrap: anywhere;
}

.multiway-grid table {
  width: 100%;
}

.selector-math {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 14px;
  border-left: 5px solid var(--accent);
  background: #e7f5f1;
}

.selector-math span {
  color: var(--muted);
}

.homework-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.build-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0;
  padding: 0 !important;
  background: var(--line);
  counter-reset: build-step;
  list-style: none;
}

.build-workflow li {
  min-height: 110px;
  padding: 15px;
  background: #fff;
  counter-increment: build-step;
}

.build-workflow li::before {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-weight: 900;
  content: counter(build-step);
}

.tutorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tutorial-grid > div {
  grid-template-columns: 38px 1fr;
  min-height: 150px;
}

.tutorial-grid > div > span {
  color: var(--accent-dark);
  font-size: 1.5rem;
  font-weight: 900;
}

.tutorial-grid p {
  margin: 0;
}

.tutorial-answers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.tutorial-answers.visible {
  display: grid;
}

.tutorial-answers p {
  margin: 0;
  font-size: 0.92rem;
}

/* Lecture 3 revision: explicit definitions, contracts, and standalone labels. */
.lecture-three .next-step {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: 82px;
  width: auto;
  max-width: min(100%, 760px);
  justify-self: end;
  align-self: end;
  margin: 0;
  text-align: right;
}

.primitive-composite-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-bottom: 14px;
}

.primitive-composite-copy p {
  margin: 0;
  padding: 12px 15px;
  border-left: 5px solid var(--accent);
  background: #fff;
  font-size: 0.95rem !important;
}

.primitive-composite-slide .circuit-panel {
  padding: 12px 15px;
}

.primitive-composite-slide .circuit-panel .circuit-svg {
  height: 205px;
}

.primitive-composite-slide .circuit-panel p {
  font-size: 0.95rem;
}

.gate-practice-grid > div {
  min-height: 190px;
}

.example-label {
  margin: 8px 0 7px !important;
  color: var(--warm);
  font-size: 0.78rem !important;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contract-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 7px;
  background: #fff;
}

.contract-card span {
  font-size: 0.82rem;
  line-height: 1.35;
}

.contract-card b {
  color: var(--accent-dark);
}

.featured-contract {
  grid-template-columns: 1fr;
  gap: 4px;
  width: 100%;
  padding: 13px 16px;
}

.basic-contract-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.specification-slide .slide-subtitle {
  margin-bottom: 5px;
}

.mux-complete-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.62fr) minmax(420px, 0.9fr) minmax(280px, 0.7fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
  width: 100%;
}

.selector-symbol {
  width: 100%;
  max-height: 280px;
  overflow: visible;
}

.selector-symbol path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.selector-symbol .selector-shape {
  fill: #e0f2fe;
  stroke: var(--accent-dark);
}

.selector-symbol .arrow-head {
  fill: var(--ink);
  stroke: none;
}

.selector-symbol text {
  fill: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.selector-symbol .symbol-name {
  font-size: 19px;
}

.mux-side-content {
  display: grid;
  gap: 16px;
}

.mux-side-content .truth-table {
  width: 100%;
}

.mux-side-content .selection-question {
  padding: 13px;
}

.mux-side-content .selection-question p,
.mux-side-content .answer p {
  margin: 0 0 7px;
  font-size: 0.9rem;
}

.mux-exercise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin: 18px 0;
}

.mux-exercise-grid > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  min-height: 145px;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.mux-exercise-grid > div > span {
  grid-row: 1 / 3;
  color: var(--accent-dark);
  font-size: 1.5rem;
  font-weight: 900;
}

.mux-exercise-grid p {
  margin: 0;
}

.mux-contract {
  grid-template-columns: 1fr;
  gap: 4px;
}

.dmux-layout {
  align-items: start;
}

.dmux-layout > div {
  min-width: 0;
}

.dmux-layout .selector-symbol {
  display: block;
  width: min(100%, 360px);
  height: 150px;
  margin: 0 auto 14px;
}

.abbreviated-dmux {
  margin-top: 12px;
}

.dmux-slide .truth-table th,
.dmux-slide .truth-table td {
  padding: 5px 8px;
}

.dmux-slide .dmux-layout p {
  margin: 0 0 6px;
  font-size: 0.94rem;
}

.dmux-layout > div:last-child {
  display: grid;
  gap: 20px;
}

.new-term {
  padding: 1px 5px;
  background: #ccfbf1;
  color: var(--accent-dark);
}

.multibit-overview-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.82fr) minmax(0, 1.18fr);
  gap: 20px;
  width: 100%;
}

.not16-example,
.other-multibit-contracts {
  min-width: 0;
}

.not16-example > p:last-child {
  padding: 12px;
  background: #fff;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.bit-example {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 12px;
  padding: 12px;
  background: #fff;
  font-size: 0.88rem;
}

.bit-example code {
  justify-self: start;
  font-variant-numeric: tabular-nums;
}

.other-multibit-contracts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.other-multibit-contracts .example-label {
  grid-column: 1 / -1;
}

.multibit-overview-slide .prompt {
  margin-top: 12px;
}

.reduction-layout + .contract-card {
  grid-template-columns: 1fr;
  gap: 4px;
}

.mux-labelled-grid,
.dmux-labelled-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(330px, 1fr) minmax(225px, 0.65fr) minmax(300px, 0.95fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}

.representation-panel {
  min-width: 0;
}

.representation-label {
  margin: 0 0 8px !important;
  color: var(--accent-dark);
  font-size: 0.75rem !important;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.representation-panel .truth-table {
  width: 100%;
}

.representation-panel .selector-symbol {
  display: block;
  width: 100%;
  height: 220px;
}

.mux-labelled-grid .mux-truth-table th,
.mux-labelled-grid .mux-truth-table td,
.dmux-labelled-grid .truth-table th,
.dmux-labelled-grid .truth-table td {
  padding: 5px 7px;
  font-size: 0.88rem;
}

.mux-prediction-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 5px solid var(--warm);
  background: #fff;
}

.mux-prediction-row p {
  margin: 0;
  font-size: 0.94rem !important;
}

.mux-prediction-row .answer {
  margin: 0;
  padding: 7px 10px;
}

.mux-prediction-row .answer.visible {
  display: block;
}

.dmux-labelled-grid .symbol-panel .selector-symbol {
  height: 230px;
}

.multiway-grid .contract-card {
  min-height: 155px;
}

.selector-explanation {
  margin-top: 16px;
  padding: 15px;
  border-left: 5px solid var(--accent);
  background: #e7f5f1;
}

.selector-explanation p {
  margin: 7px 0 0;
  font-size: 0.92rem;
}

.homework-requirements {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
  padding: 16px;
  border-left: 5px solid var(--warm);
  background: #fff;
}

.homework-requirements ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding-left: 22px;
}

.homework-requirements li {
  font-size: 0.9rem !important;
}

.review-question-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.review-question-grid > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  min-height: 150px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.review-question-grid span {
  color: var(--accent-dark);
  font-size: 1.3rem;
  font-weight: 900;
}

.review-question-grid p {
  margin: 0;
  font-size: 0.96rem !important;
}

/* Lecture 5: binary representation, addition, and two's complement. */
.arithmetic-lecture .next-step {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: 82px;
  width: auto;
  max-width: min(100%, 820px);
  margin: 0;
  text-align: right;
}

.place-value-layout,
.pattern-count-layout,
.word-size-layout,
.general-count-grid,
.worked-addition-layout,
.overflow-layout,
.signed-map-layout {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: 100%;
}

.place-value-layout {
  grid-template-columns: minmax(420px, 0.9fr) auto minmax(0, 1.1fr);
}

.place-value-layout > i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.8rem;
}

.place-number,
.expansion-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.place-number > span {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}

.digit-row,
.weight-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}

.binary-number .digit-row,
.binary-number .weight-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.digit-row b {
  padding: 10px;
  border: 1px solid var(--line);
  background: #e0f2fe;
  font-size: 1.6rem;
}

.weight-row small {
  padding: 8px;
  color: var(--muted);
}

.expansion-card p {
  margin: 0 0 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem !important;
}

.expansion-card strong {
  color: var(--accent-dark);
  font-size: 1.5rem;
}

.bit-pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 20px 0;
}

.bit-pattern-grid > div {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.bit-pattern-grid strong {
  color: var(--accent-dark);
}

.bit-pattern-grid code {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.bit-pattern-grid span {
  color: var(--muted);
}

.word-size-layout {
  grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
}

.word-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.word-examples div {
  display: grid;
  gap: 8px;
  min-height: 120px;
  align-content: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  text-align: center;
}

.word-examples strong {
  color: var(--accent-dark);
}

.word-examples code {
  overflow-wrap: anywhere;
  letter-spacing: 0.04em;
}

.pattern-count-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
}

.choice-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 0.7fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.choice-chain div,
.count-result {
  display: grid;
  gap: 7px;
  place-content: center;
  min-height: 145px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.choice-chain i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.5rem;
}

.choice-chain span,
.count-result span {
  color: var(--muted);
}

.count-result {
  border-top: 5px solid var(--accent);
}

.count-result strong {
  color: var(--accent-dark);
  font-size: 1.7rem;
}

.count-result p {
  margin: 0;
  font-size: 0.95rem !important;
}

.general-count-grid {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.8fr);
}

.question-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--warm);
  background: #fff;
}

.question-card p {
  margin: 0;
}

.question-card input {
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.question-card button {
  justify-self: start;
}

.significance-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

.annotated-bits {
  display: grid;
  grid-template-columns: repeat(5, 70px);
}

.annotated-bits b {
  display: grid;
  min-height: 76px;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 2rem;
}

.annotated-bits b:first-child,
.annotated-bits b:last-child {
  background: #ccfbf1;
  color: var(--accent-dark);
}

.bit-callout {
  display: grid;
  gap: 4px;
  text-align: center;
}

.bit-callout strong {
  color: var(--accent-dark);
}

.bit-callout span {
  color: var(--muted);
}

.bit-callout i {
  color: var(--warm);
  font-style: normal;
  font-size: 1.7rem;
}

.two-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.two-facts div {
  padding: 14px;
  border-left: 5px solid var(--accent);
  background: #fff;
}

.two-facts p {
  margin: 5px 0 0;
  font-size: 0.95rem !important;
}

.addition-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 20px 0;
}

.addition-rule-grid div {
  display: grid;
  gap: 10px;
  min-height: 175px;
  place-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.addition-rule-grid code {
  font-size: 1.45rem;
}

.addition-rule-grid span {
  color: var(--muted);
}

.addition-rule-grid .carry-case {
  border-top-color: var(--warm);
  background: #fff7ed;
}

.worked-addition-layout,
.overflow-layout {
  grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1.25fr);
}

.column-addition {
  display: grid;
  justify-content: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: 800 1.8rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
}

.column-addition span,
.column-addition strong {
  display: block;
}

.column-addition .carry-line {
  color: var(--warm);
  text-align: right;
}

.column-addition i {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--ink);
}

.addition-steps {
  display: grid;
  gap: 8px;
  margin: 0;
}

.addition-steps li {
  padding: 8px 12px;
  background: #fff;
}

.check-line,
.verification-line {
  padding: 13px 15px;
  border-left: 5px solid var(--accent);
  background: #fff;
}

.overflow-copy {
  padding: 18px;
  border-left: 6px solid var(--warm);
  background: #fff7ed;
}

.addition-exercise-grid,
.signed-exercise-grid {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 18px 0;
}

.addition-exercise-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.addition-exercise-grid > div,
.signed-exercise-grid > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  align-content: center;
  min-height: 135px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.addition-exercise-grid span,
.signed-exercise-grid span {
  grid-row: 1 / 3;
  color: var(--accent-dark);
  font-size: 1.35rem;
  font-weight: 900;
}

.addition-exercise-grid p {
  margin: 0;
  font-size: 1.3rem !important;
}

.addition-exercise-grid small {
  color: var(--muted);
}

.horizontal-answer {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.horizontal-answer.visible {
  display: grid;
}

.horizontal-answer p {
  margin: 0;
  font-size: 0.92rem;
}

.signed-motivation-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

.signed-motivation-grid div {
  min-height: 155px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.signed-motivation-grid i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.6rem;
}

.signed-map-layout {
  grid-template-columns: minmax(320px, 1fr) 0.65fr minmax(320px, 1fr);
}

.signed-table {
  width: 100%;
}

.sign-divider {
  display: grid;
  gap: 7px;
  text-align: center;
}

.sign-divider span {
  color: var(--muted);
}

.sign-divider strong {
  color: var(--accent-dark);
}

.sign-divider i {
  color: var(--warm);
  font-style: normal;
  font-size: 1.7rem;
}

.negative-table tbody {
  background: #fff7ed;
}

.signed-conversion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.conversion-case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.conversion-case > span {
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.conversion-case > strong {
  justify-self: end;
}

.conversion-case > code {
  grid-row: 2 / 4;
  padding: 12px;
  font-size: 1.65rem;
  letter-spacing: 0.08em;
}

.conversion-case p {
  margin: 0;
  font-size: 0.92rem !important;
}

.negative-case {
  border-top-color: var(--warm);
  background: #fff7ed;
}

.titled-method-box,
.alternative-conversion {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.titled-method-box > strong,
.alternative-conversion > strong {
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.alternative-conversion > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.alternative-conversion i {
  color: var(--accent-dark);
  font-style: normal;
}

.rule-line {
  margin: 24px 0 0 !important;
  padding: 11px 14px;
  border-left: 5px solid var(--accent);
  background: #e7f5f1;
  font-size: 0.94rem !important;
}

.alternative-method-reveal {
  margin-top: 18px;
}

.alternative-conversion.pause-step {
  margin-top: 18px;
}

.signed-count-grid {
  display: grid;
  grid-template-columns: 1fr 0.55fr 1fr;
  gap: 16px;
  width: 100%;
  margin: 20px 0;
}

.signed-count-grid div {
  display: grid;
  gap: 8px;
  min-height: 150px;
  place-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
  text-align: center;
}

.signed-count-grid span,
.signed-count-grid small {
  color: var(--muted);
}

.signed-count-grid strong {
  color: var(--accent-dark);
  font-size: 1.65rem;
}

.range-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  border-left: 6px solid var(--warm);
  background: #fff7ed;
}

.range-result strong {
  font-size: 1.35rem;
}

.negation-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin: 22px 0;
}

.negation-flow div {
  display: grid;
  gap: 10px;
  min-height: 145px;
  place-content: center;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.negation-flow i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.5rem;
}

.negation-flow span {
  color: var(--muted);
}

.negation-flow code {
  font-size: 1.45rem;
  letter-spacing: 0.08em;
}

.negation-flow .negative-result {
  border-top: 5px solid var(--warm);
  background: #fff7ed;
}

.signed-addition-layout {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1.2fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: 22px 0;
}

.signed-addition-layout div {
  display: grid;
  gap: 8px;
  min-height: 145px;
  place-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.signed-addition-layout > i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.8rem;
}

.signed-addition-layout code {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.signed-addition-layout .signed-sum {
  border-top: 5px solid var(--accent);
}

.subtraction-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.25fr auto 1.25fr auto 1.55fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 22px 0;
}

.subtraction-flow div {
  display: grid;
  gap: 8px;
  min-height: 140px;
  place-content: center;
  padding: 15px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.subtraction-flow i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.4rem;
}

.subtraction-flow span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.subtraction-flow code {
  font-size: 1.22rem;
  letter-spacing: 0.05em;
}

.subtraction-flow .subtraction-result {
  border-top: 5px solid var(--accent);
}

.subtraction-flow .subtraction-result strong {
  color: var(--accent-dark);
  font-size: 1.4rem;
}

.signed-exercise-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.signed-exercise-grid > div {
  min-height: 110px;
}

.two-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin: 20px 0;
}

.two-problem-grid > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  min-height: 170px;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.two-problem-grid span {
  color: var(--accent-dark);
  font-size: 1.35rem;
  font-weight: 900;
}

.two-problem-grid p {
  margin: 0;
}

.remember-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.remember-grid div {
  min-height: 170px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.remember-grid strong {
  color: var(--accent-dark);
}

.remember-grid p {
  font-size: 0.95rem !important;
}

/* Lecture 5 compact layouts: use the projector width and avoid sparse slides. */
.place-value-comparison,
.word-capacity-layout,
.proof-question-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}

.place-value-case {
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.place-value-case h3 {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.place-value-case .place-number {
  padding: 12px;
}

.place-value-case .place-number > span {
  margin-bottom: 8px;
  font-size: 1.55rem;
}

.place-value-case .digit-row b {
  padding: 7px;
  font-size: 1.3rem;
}

.place-value-case .weight-row small {
  padding: 6px 3px;
}

.place-expansion {
  max-width: none !important;
  margin: 12px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem !important;
}

.place-expansion strong {
  color: var(--accent-dark);
}

.word-capacity-layout {
  align-items: stretch;
}

.word-capacity-layout > div {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.word-capacity-layout p {
  margin-top: 0;
  font-size: 1rem !important;
}

.word-width-strip,
.choice-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.word-width-strip span,
.choice-summary span {
  padding: 8px 10px;
  background: #e7f5f1;
  color: var(--accent-dark);
  font-weight: 800;
}

.capacity-example {
  display: grid;
  gap: 13px;
}

.capacity-example > strong {
  color: var(--accent-dark);
}

.choice-summary i {
  color: var(--accent-dark);
  font-style: normal;
  font-weight: 900;
}

.capacity-example .count-result {
  min-height: 112px;
}

.significance-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: min(100%, 900px);
  margin-inline: auto;
}

.significance-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.significance-labels .msb-callout {
  justify-self: start;
}

.significance-labels .lsb-callout {
  justify-self: end;
}

.significance-labels .bit-callout {
  align-items: center;
}

.annotated-bits {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}

.combined-addition-slide .addition-rule-grid {
  gap: 12px;
  margin: 6px 0 12px;
}

.combined-addition-slide .addition-rule-grid div {
  min-height: 92px;
  gap: 5px;
  padding: 10px;
}

.combined-addition-slide .addition-rule-grid code {
  font-size: 1.15rem;
}

.combined-addition-slide .worked-addition-layout {
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1.45fr);
  gap: 18px;
}

.combined-addition-slide .column-addition {
  padding: 12px;
  font-size: 1.35rem;
}

.combined-addition-slide .addition-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.combined-addition-slide .addition-steps li {
  padding: 5px 8px;
  font-size: 0.84rem;
}

.combined-addition-slide .check-line {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 0.9rem !important;
}

.combined-addition-slide > p {
  margin: 0 0 10px;
  font-size: 1rem !important;
}

.addition-example-button {
  justify-self: start;
}

.addition-example-reveal {
  margin-top: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.addition-example-reveal h3 {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.pause-step {
  display: none !important;
}

.pause-step.visible {
  display: block !important;
}

.alternative-conversion.pause-step.visible {
  display: grid !important;
}

.representation-exercise-slide > p,
.compact-number-exercise-slide > p,
.signed-addition-exercise-slide > p {
  max-width: none;
  margin: 0 0 12px;
  font-size: 1rem !important;
}

.representation-exercise-grid,
.number-problem-grid,
.signed-addition-problems {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 10px 0 18px;
}

.representation-exercise-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.number-problem-grid,
.signed-addition-problems {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.representation-exercise-grid > div,
.number-problem-grid > div,
.signed-addition-problems > div {
  display: grid;
  min-height: 112px;
  place-content: center;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.representation-exercise-grid span,
.number-problem-grid span,
.signed-addition-problems span {
  color: var(--accent-dark);
  font-weight: 900;
}

.representation-exercise-grid strong,
.number-problem-grid code {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}

.four-answer-grid,
.signed-addition-answer-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.four-answer-grid.visible,
.signed-addition-answer-grid.visible {
  display: grid;
}

.four-answer-grid p,
.signed-addition-answer-grid p {
  margin: 0;
  padding: 10px;
  font-size: 0.82rem !important;
}

.proof-question-layout {
  align-items: start;
}

.proof-question-layout > div {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.proof-question-layout p,
.proof-question-layout li {
  font-size: 1rem !important;
}

.proof-hint-title {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-dark);
}

.proof-question-layout .answer {
  margin-top: 12px;
  padding: 12px;
}

.signed-addition-problems > div {
  align-content: center;
}

.signed-addition-problems small {
  color: var(--muted);
}

.signed-addition-answer-grid {
  margin-top: 10px;
  padding: 10px;
}

.combined-negation-exercise-slide .number-problem-grid {
  margin-block: 8px 12px;
}

.combined-negation-exercise-slide .number-problem-grid > div {
  min-height: 88px;
}

.negation-reveal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.negation-proof-question {
  display: block;
  margin-top: 50px;
  padding: 10px 14px;
  border-left: 5px solid var(--warm);
  background: #fff;
}

.negation-proof-question p {
  max-width: none;
  margin: 0;
  font-size: 0.92rem !important;
}

.negation-proof-question button {
  margin-top: 10px;
}

.negation-proof-answer {
  margin-top: 10px;
  padding: 10px 14px;
}

.negation-proof-answer p {
  max-width: none;
  margin: 4px 0;
  font-size: 0.86rem !important;
}

.arithmetic-lecture .summary-slide .remember-grid div {
  min-height: 128px;
  padding: 15px;
}

.twos-complement-advantages {
  margin-top: 18px;
}

.twos-complement-advantages ol {
  margin: 0;
  padding-left: 1.35rem;
}

.twos-complement-advantages li {
  max-width: none;
  margin: 6px 0;
  font-size: 0.98rem !important;
}

/* Lecture 4: Boolean-laws and logic-design tutorial. */
.tutorial-lecture .slide h2 {
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  white-space: normal;
}

.tutorial-lecture .next-step {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: 82px;
  width: auto;
  max-width: min(100%, 820px);
  margin: 0;
  text-align: right;
}

.four-view-path,
.simplification-principle,
.simplification-chain {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.four-view-path > div,
.simplification-principle > div,
.simplification-chain > div {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.four-view-path > i,
.simplification-principle > i,
.simplification-chain > i {
  align-self: center;
  color: var(--accent-dark);
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 900;
}

.four-view-path strong,
.simplification-principle strong,
.simplification-chain span,
.law-card-grid span,
.de-morgan-tutorial-grid span,
.truth-table-task-grid span,
.guided-problem-grid > div > span,
.independent-problem-grid span,
.additional-design-grid span {
  color: var(--accent-dark);
  font-weight: 900;
}

.four-view-path span,
.simplification-principle p,
.simplification-chain p,
.simplification-chain small {
  margin: 6px 0 0;
}

.laws-table {
  width: 100%;
  table-layout: fixed;
  font-size: clamp(0.82rem, 1.3vw, 1.15rem);
}

.laws-table th,
.laws-table td {
  min-width: 0;
  padding: 8px 14px;
  font-size: clamp(0.9rem, 1.45vw, 1.12rem);
}

.laws-table th:first-child { width: 20%; }

.supplemental-law-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.supplemental-law-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  background: #fff;
}

.supplemental-law-grid span {
  color: var(--accent-dark);
  font-weight: 850;
}

.supplemental-law-grid p { margin: 0; }

.laws-table tbody th {
  color: var(--accent-dark);
  text-align: left;
}

.law-card-grid,
.de-morgan-tutorial-grid,
.truth-table-task-grid,
.guided-problem-grid,
.independent-problem-grid,
.three-artifact-grid,
.additional-design-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}

.law-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.de-morgan-tutorial-grid,
.independent-problem-grid,
.additional-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.truth-table-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guided-problem-grid,
.three-artifact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.take-home {
  margin: 12px 0 0 !important;
  padding: 12px 14px;
  border-left: 5px solid var(--warm);
  background: #fff;
}

.laws-overview-slide .take-home {
  margin-top: 45px !important;
  padding: 9px 14px 8px;
  border-top: 1px solid rgba(44, 62, 80, 0.18);
  border-left-color: var(--warm);
  background: rgba(255, 255, 255, 0.78);
}

.laws-overview-slide .laws-table th,
.laws-overview-slide .laws-table td {
  padding-block: 5px;
}

.laws-overview-slide .supplemental-law-grid {
  margin-top: 8px;
}

.laws-overview-slide .supplemental-law-grid > div {
  padding-block: 7px;
}

.law-card-grid > div,
.de-morgan-tutorial-grid > div,
.truth-table-task-grid > div,
.guided-problem-grid > div,
.independent-problem-grid > div,
.three-artifact-grid > div,
.additional-design-grid > div {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.law-card-grid p,
.de-morgan-tutorial-grid p,
.truth-table-task-grid p,
.guided-problem-grid p,
.independent-problem-grid p,
.three-artifact-grid p,
.additional-design-grid p {
  margin: 8px 0;
}

.simplification-chain {
  grid-template-columns: 1fr auto 1.35fr auto 0.8fr;
  margin-top: 18px;
}

.answer.simplification-chain { display: none; }
.answer.simplification-chain.visible { display: grid; }

.follow-up-heading {
  margin: 16px 0 10px;
  color: var(--accent-dark);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.combined-guided-slide .guided-problem-grid > div {
  padding-block: 12px;
}

.combined-guided-slide .guided-problem-grid p {
  margin-block: 5px;
}

.combined-simplification-slide .challenge-problem-list > div {
  padding-block: 11px;
}

.guided-problem-grid .answer { margin-top: 10px; }

.challenge-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.challenge-problem-list > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.challenge-problem-list span {
  color: var(--accent-dark);
  font-size: 1.3rem;
  font-weight: 900;
}

.challenge-problem-list p { margin: 0; }

.four-artifact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.four-artifact-grid > div {
  min-width: 0;
  min-height: 160px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: #fff;
}

.four-artifact-grid strong { color: var(--accent-dark); }
.four-artifact-grid p { margin-bottom: 0; }

.design-deliverables {
  margin-top: 0 !important;
}

.concept-introduction {
  margin: 0 0 12px !important;
  padding-left: 12px;
  border-left: 5px solid var(--warm);
}

.compact-artifact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin-bottom: 12px;
  padding: 1px;
  background: var(--line);
}

.compact-artifact-strip span {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  background: #fff;
  color: var(--muted);
  font-size: 0.78rem;
}

.compact-artifact-strip b {
  color: var(--accent-dark);
}

.expanded-design-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.expanded-design-grid > div {
  padding: 12px 14px;
}

.expanded-design-grid strong {
  display: block;
  margin-top: 5px;
}

.expanded-design-grid p {
  font-size: 0.88rem !important;
}

.threshold-layout,
.circuit-reading-layout,
.design-contract-layout,
.dmux4-task-layout,
.hdl-assignment-layout {
  display: grid;
  gap: 22px;
  align-items: start;
  width: 100%;
}

.threshold-layout,
.design-contract-layout { grid-template-columns: 0.8fr 1.2fr; }
.circuit-reading-layout { grid-template-columns: 1.35fr 0.65fr; }
.dmux4-task-layout { grid-template-columns: 0.9fr 1.1fr; }
.hdl-assignment-layout { grid-template-columns: 0.8fr 1.1fr 0.9fr; }

.threshold-layout > div,
.circuit-reading-layout > div,
.design-tasks,
.dmux4-task-layout > div,
.hdl-checklist {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.threshold-answer pre,
.hdl-assignment-layout pre { margin: 12px 0 0; }

.circuit-reading-layout .circuit-svg {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.design-contract-layout .contract-card { grid-template-columns: 1fr; }

.design-tasks ol,
.dmux4-task-layout ol,
.hdl-checklist ol {
  margin: 0;
  padding-left: 1.25rem;
}

.chip-name-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.chip-name-list code {
  padding: 10px;
  border: 1px solid var(--line);
  background: #fff;
}

@media (min-width: 900px) {
  .lecture-two .slide h2 {
    white-space: nowrap;
  }

  .lecture-two .canonical-slide h2 {
    font-size: clamp(1.75rem, 2.65vw, 3.25rem);
  }
}

.lecture-two .light-comparison {
  background: var(--line);
}

.lecture-two .light-comparison > div {
  background: #fff;
  color: var(--ink);
}

.lecture-two .light-comparison .comparison-label {
  color: var(--warm);
}

.lecture-two .light-comparison .accent-label {
  color: var(--accent-dark);
}

.lecture-two .spec-implementation {
  background: var(--line);
}

.lecture-two .spec-implementation div {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.lecture-two .spec-implementation span {
  color: var(--accent-dark);
}

.lecture-two .spec-implementation p {
  color: var(--muted);
}

.lecture-two .exit-grid div {
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
}

@media (max-width: 760px) {
  .place-value-comparison,
  .word-capacity-layout,
  .proof-question-layout,
  .combined-addition-slide .worked-addition-layout,
  .representation-exercise-grid,
  .number-problem-grid,
  .signed-addition-problems,
  .four-answer-grid,
  .signed-addition-answer-grid {
    grid-template-columns: 1fr;
  }

  .negation-reveal-row {
    grid-template-columns: 1fr;
  }

  .negation-proof-question {
    align-items: flex-start;
  }

  .twos-complement-advantages {
    grid-template-columns: 1fr;
  }

  .combined-addition-slide .addition-steps {
    grid-template-columns: 1fr;
  }

  .lecture-three .next-step,
  .arithmetic-lecture .next-step,
  .tutorial-lecture .next-step {
    position: static;
    justify-self: end;
    margin-top: 18px;
  }

  .lecture-three .slide h2 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .arithmetic-lecture .slide h2 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lecture-stack-map,
  .hdl-motivation-grid,
  .gate-definition-layout,
  .three-way-grid,
  .drawing-question-grid,
  .drawing-answer-grid,
  .hdl-code-layout,
  .hdl-anatomy-layout,
  .hdl-trace-layout,
  .hdl-test-layout,
  .spec-contract-grid,
  .gate-api-grid,
  .mux-layout,
  .mux-short-layout,
  .dmux-layout,
  .bus-concept-layout,
  .wide-api-grid,
  .bus-mux-layout,
  .two-rule-cards,
  .reduction-layout,
  .multiway-grid,
  .homework-layout,
  .build-workflow,
  .tutorial-grid,
  .tutorial-answers {
    grid-template-columns: 1fr;
  }

  .primitive-composite-copy,
  .featured-contract,
  .basic-contract-grid,
  .mux-complete-layout,
  .mux-exercise-grid,
  .mux-contract,
  .multibit-overview-grid,
  .other-multibit-contracts,
  .reduction-layout + .contract-card,
  .homework-requirements,
  .homework-requirements ol,
  .review-question-grid {
    grid-template-columns: 1fr;
  }

  .mux-labelled-grid,
  .dmux-labelled-grid {
    grid-template-columns: 1fr;
  }

  .mux-prediction-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .place-value-layout,
  .bit-pattern-grid,
  .word-size-layout,
  .word-examples,
  .pattern-count-layout,
  .choice-chain,
  .general-count-grid,
  .significance-diagram,
  .two-facts,
  .addition-rule-grid,
  .worked-addition-layout,
  .overflow-layout,
  .addition-exercise-grid,
  .signed-motivation-grid,
  .signed-map-layout,
  .signed-conversion-grid,
  .signed-count-grid,
  .negation-flow,
  .signed-addition-layout,
  .subtraction-flow,
  .signed-exercise-grid,
  .two-problem-grid,
  .remember-grid {
    grid-template-columns: 1fr;
  }

  .four-view-path,
  .simplification-principle,
  .simplification-chain,
  .law-card-grid,
  .de-morgan-tutorial-grid,
  .truth-table-task-grid,
  .guided-problem-grid,
  .independent-problem-grid,
  .challenge-problem-list,
  .three-artifact-grid,
  .four-artifact-grid,
  .supplemental-law-grid,
  .compact-artifact-strip,
  .threshold-layout,
  .circuit-reading-layout,
  .design-contract-layout,
  .dmux4-task-layout,
  .additional-design-grid,
  .hdl-assignment-layout {
    grid-template-columns: 1fr;
  }

  .four-view-path > i,
  .simplification-principle > i,
  .simplification-chain > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .alternative-conversion {
    grid-template-columns: 1fr;
  }

  .place-value-layout > i,
  .choice-chain > i,
  .signed-motivation-grid > i,
  .negation-flow > i,
  .signed-addition-layout > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .annotated-bits {
    grid-template-columns: repeat(5, minmax(42px, 1fr));
  }

  .range-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .other-multibit-contracts .example-label {
    grid-column: auto;
  }

  .selector-symbol {
    width: min(100%, 340px);
  }

  .gate-symbol-grid {
    grid-template-columns: 1fr;
  }

  .lecture-stack-map > *,
  .gate-definition-layout > *,
  .gate-symbol-grid > *,
  .three-way-grid > *,
  .drawing-question-grid > *,
  .drawing-answer-grid > *,
  .hdl-code-layout > *,
  .hdl-anatomy-layout > *,
  .hdl-trace-layout > *,
  .hdl-test-layout > *,
  .gate-api-grid > *,
  .mux-layout > *,
  .mux-short-layout > *,
  .dmux-layout > *,
  .wide-api-grid > *,
  .multiway-grid > *,
  .homework-layout > *,
  .tutorial-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  .gate-symbol-grid figure {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lecture-three pre,
  .lecture-three table {
    max-width: 100%;
  }

  .lecture-stack-map > i,
  .hdl-motivation-grid > i,
  .hdl-test-layout > i,
  .bus-concept-layout > i,
  .bus-mux-layout > i,
  .reduction-layout > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .gate-contract-card {
    grid-template-columns: 1fr;
  }

  .gate-contract-card i {
    transform: rotate(90deg);
  }

  .mux-layout > table,
  .dmux-layout > table,
  .mux-short-layout > table {
    justify-self: stretch;
  }

  .circuit-panel .circuit-svg,
  .circuit-answer .circuit-svg {
    height: auto;
  }

  .topbar,
  .hero,
  .two-col,
  .diagram,
  .section-heading,
  .image-slide.current,
  .operator-layout,
  .hdl-preview {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    min-height: auto;
    gap: 20px;
    padding: 28px 0 22px;
  }

  .hero-visual,
  .hero-visual img {
    height: 220px;
    min-height: 220px;
  }

  .section-heading,
  .site-footer {
    display: grid;
  }

  .lecture-week-heading {
    display: grid;
    gap: 7px;
  }

  .lecture-week-heading p {
    text-align: left;
  }

  .image-credit {
    text-align: left;
  }

  .course-path,
  .course-info-grid,
  .definition-strip,
  .comparison,
  .device-grid,
  .three-col,
  .people-grid,
  .integration-story,
  .role-table,
  .boundary,
  .truth-anatomy,
  .exit-grid,
  .schedule-grid,
  .staff-grid,
  .outcome-list,
  .course-layer-stack div,
  .integrity-split,
  .expectation-grid,
  .quote-grid,
  .canonical-steps,
  .scale-grid,
  .world-contributions,
  .dependency-grid {
    grid-template-columns: 1fr;
  }

  .function-machine,
  .truth-table-intro,
  .exercise-layout,
  .canonical-layout,
  .xor-layout,
  .practice-layout,
  .notation-grid,
  .derived-functions-grid,
  .equivalence-layout,
  .canonical-conclusion,
  .equivalence-exercise-grid,
  .universality-path {
    grid-template-columns: 1fr;
  }

  .universality-path > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .reference-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .function-machine i {
    transform: rotate(90deg);
    text-align: center;
  }

  .truth-row-quiz {
    grid-template-columns: 1fr;
  }

  .exercise-layout {
    align-items: start;
  }

  .course-info-block,
  .course-info-block:first-child {
    padding: 18px 0;
  }

  .course-info-block + .course-info-block {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .slide {
    padding: 64px 18px 94px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .slide > *,
  .operator-layout > *,
  .hdl-preview > * {
    min-width: 0;
  }

  .slide.current {
    align-content: start;
  }

  .image-slide figure {
    height: 42vh;
    min-height: 280px;
  }

  .big-question,
  .conductivity-scale,
  .logic-flow,
  .nand-equation,
  .spec-implementation,
  .course-output,
  .switch-to-gate,
  .function-count,
  .learning-loop,
  .row-to-term,
  .hotel-story,
  .demand-shift,
  .manufacturing-flow,
  .supply-chain,
  .chip-cycle,
  .path-row {
    grid-template-columns: 1fr;
  }

  .big-question strong,
  .conductivity-scale i,
  .logic-flow i,
  .nand-equation i,
  .spec-implementation > i,
  .course-output i,
  .switch-to-gate i,
  .function-count i,
  .learning-loop i,
  .row-to-term i,
  .hotel-story i,
  .demand-shift i,
  .manufacturing-flow i,
  .supply-chain i,
  .chip-cycle i,
  .path-row > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .path-row {
    gap: 7px;
  }

  .world-contributions div:last-child {
    grid-column: auto;
  }

  .switch-model {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .voltage-bar {
    grid-template-columns: 1fr;
    min-height: 280px;
  }

  .horizontal-quiz {
    grid-template-columns: 1fr;
  }

  .expression-display,
  .challenge-line {
    max-width: 100%;
  }

  .expression-display code,
  .challenge-line code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .truth-table {
    width: 100%;
    table-layout: fixed;
  }

  .truth-table th,
  .truth-table td {
    min-width: 0;
    padding: 9px 5px;
  }

  .truth-table input {
    width: min(48px, 90%);
  }

  .tree-branches {
    grid-template-columns: 1fr;
  }

  .lab-grade-layout {
    grid-template-columns: 1fr;
  }

  .strategy-table div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .abstraction-ladder div,
  .abstraction-ladder div:nth-child(n) {
    margin-left: 0;
  }

  .controls {
    padding: 8px 10px;
  }
}

/* Lectures 6-7: adders and the Hack ALU */
.signed-view-grid,
.paired-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.signed-view-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-top: 18px;
}

.signed-view-grid > div,
.theorem-box,
.proof-pair-row > p,
.conclusion-step {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.signed-view-grid > div {
  display: grid;
  align-content: start;
  gap: 12px;
  max-width: 1040px;
}

.signed-view-grid strong {
  color: var(--accent-dark);
  font-size: 1.25rem;
}

.signed-view-grid p {
  margin: 0;
  font-size: 1.1rem !important;
}

.theorem-box {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-block: 12px;
  border-top: 5px solid var(--accent);
}

.theorem-box > strong {
  color: var(--accent-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.theorem-box p {
  max-width: none;
  margin: 0;
}

.center-equation {
  justify-self: center;
  padding: 10px 16px;
  border: 1px solid rgba(22, 101, 52, 0.22);
  background: rgba(220, 252, 231, 0.48);
  text-align: center;
}

.theorem-slide h2 {
  margin-bottom: 8px;
}

.theorem-slide .next-step {
  bottom: 74px;
}

.paired-proof-slide h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 3.1vw, 2.85rem);
  white-space: normal;
}

.lecture-two .unsigned-addition-proof-slide h2 {
  font-size: clamp(1.8rem, 2.65vw, 2.35rem);
  white-space: normal !important;
  overflow-wrap: normal;
}

.paired-proof-grid {
  align-items: start;
  gap: 10px 18px;
}

.paired-proof-grid > .panel-label {
  margin: 0;
}

.compact-proof-grid {
  margin-top: 10px;
  gap: 6px 14px;
}

.compact-proof-grid .proof-pair-row {
  gap: 14px;
}

.compact-proof-grid .proof-pair-row > p {
  padding-block: 8px;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.compact-proof-grid .proof-pair-row span {
  top: 8px;
}

.proof-complete {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 2px 0 0;
  padding: 8px 14px;
  border-left: 5px solid var(--accent);
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent-dark);
  font-weight: 850;
}

.proof-complete.visible {
  display: block !important;
}

.proof-pair-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.proof-pair-row.pause-step.visible {
  display: grid !important;
}

.proof-pair-row > p {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 54px;
  font-size: 1rem !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.proof-pair-row code,
.center-equation code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.proof-pair-row span {
  position: absolute;
  top: 12px;
  left: 14px;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
}

.unsigned-addition-proof-slide .proof-pair-row > p {
  padding-block: 9px;
}

.conclusion-step {
  margin: 10px 0 0;
  border-left: 5px solid var(--warm);
  color: var(--accent-dark);
}

.conclusion-step.visible {
  display: block !important;
}

.proof-followup-exercise {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--warm);
  border-radius: 8px;
  background: #fff;
}

.proof-followup-exercise strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-dark);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.proof-followup-exercise p {
  margin: 0;
}

.proof-followup-exercise.visible {
  display: block !important;
}

.addition-bridge-layout,
.chip-study-grid,
.wide-chip-grid,
.alu-spec-layout,
.full-alu-contract {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 24px;
  align-items: center;
}

.addition-bridge-layout .column-addition { justify-self: center; }

.aligned-addition {
  justify-content: start;
}

.aligned-addition .carry-line {
  text-align: left;
}

.bridge-questions { display: grid; gap: 14px; }
.bridge-questions p { margin: 0; }
.bridge-questions > strong,
.prompt {
  color: var(--accent-dark);
}

.adder-hierarchy,
.ripple-adder-diagram,
.alu-motivation-flow,
.alu-trace-flow,
.lab-chip-sequence {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 28px;
}

.adder-hierarchy > div,
.ripple-adder-diagram > div,
.alu-motivation-flow > div,
.alu-trace-flow > div,
.lab-chip-sequence > div {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.adder-hierarchy > i,
.ripple-adder-diagram > i,
.alu-motivation-flow > i,
.alu-trace-flow > i,
.lab-chip-sequence > i {
  align-self: center;
  color: var(--accent-dark);
  font-style: normal;
  font-weight: 850;
}

.adder-hierarchy span,
.ripple-adder-diagram span,
.alu-motivation-flow span,
.alu-trace-flow span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adder-hierarchy strong { color: var(--accent-dark); font-size: 1.1rem; }

.chip-study-slide > p,
.wide-chip-study > p { margin: 0 0 14px; max-width: none; }

.chip-study-grid {
  grid-template-columns: minmax(250px, 0.95fr) minmax(250px, 0.95fr) minmax(230px, 0.8fr);
  align-items: start;
  gap: 18px;
}

.vertical-spec,
.chip-figure,
.alu-pseudocode,
.complete-alu-interface {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vertical-spec > strong,
.panel-label,
.chip-figure figcaption {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-dark);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.vertical-spec dl { display: grid; gap: 9px; margin: 0; }
.vertical-spec dl > div { display: grid; gap: 2px; }
.vertical-spec dt { color: var(--muted); font-size: 0.78rem; font-weight: 850; }
.vertical-spec dd { margin: 0; font-size: 0.9rem; line-height: 1.32; }

.compact-truth-table th,
.compact-truth-table td { padding: 5px 10px; text-align: center; }
.full-adder-study .compact-truth-table th,
.full-adder-study .compact-truth-table td { padding-block: 2px; font-size: 0.79rem; }

.full-adder-study h2 { margin-bottom: 8px; font-size: clamp(2.2rem, 4vw, 3.35rem); }
.full-adder-study > p { margin-bottom: 8px; font-size: 0.94rem !important; }
.full-adder-study .chip-study-grid { gap: 14px; }
.full-adder-study .vertical-spec,
.full-adder-study .chip-figure { padding-block: 10px; }
.full-adder-study .vertical-spec dl { gap: 6px; }
.full-adder-study .chip-figure svg { max-height: 205px; }

.chip-figure { margin: 0; }
.chip-figure svg { width: 100%; height: auto; }
.chip-figure svg line,
.chip-figure svg rect { stroke: #173e35; stroke-width: 3; fill: #f4fbf8; }
.chip-figure svg text { fill: #173e35; font: 700 13px system-ui, sans-serif; }
.chip-figure svg .chip-name { font-size: 14px; font-weight: 900; text-anchor: middle; }

.adder-design-questions,
.full-adder-hints,
.implementation-prompts,
.inc16-options,
.interface-facts,
.status-output-grid,
.alu-program-problems,
.alu-tutorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.adder-design-questions > div,
.full-adder-hints > div,
.implementation-prompts > div,
.inc16-options > div,
.interface-facts > div,
.status-output-grid > div,
.alu-program-problems > div,
.alu-tutorial-grid > div {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.adder-design-questions span,
.implementation-prompts span,
.alu-program-problems span,
.alu-tutorial-grid span {
  color: var(--accent-dark);
  font-weight: 900;
}

.adder-design-questions p,
.full-adder-hints p,
.implementation-prompts p,
.inc16-options p,
.interface-facts p,
.status-output-grid p,
.alu-tutorial-grid p { margin: 6px 0 0; font-size: 0.9rem; }

.adder-answer-grid.visible {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: center;
}
.adder-answer-grid pre,
.adder-answer-grid p { margin: 0; }

.compact-adder-exercise h2 { margin-bottom: 6px; }
.compact-adder-exercise > p { margin-block: 4px 8px; font-size: 0.9rem !important; }
.compact-adder-exercise .adder-design-questions,
.compact-adder-exercise .full-adder-hints { margin-block: 10px; }
.compact-adder-exercise .adder-design-questions > div,
.compact-adder-exercise .full-adder-hints > div { padding: 10px 14px; }
.compact-adder-exercise .answer { margin-top: 8px; padding: 10px 14px; }
.compact-adder-exercise .answer pre { font-size: 0.75rem; line-height: 1.25; }

.ripple-adder-diagram { margin-block: 28px 20px; }
.ripple-adder-diagram > div { min-height: 112px; }
.ripple-adder-diagram > i { font-size: 0.75rem; }
.ripple-adder-diagram .ellipsis-chip { min-width: 90px; font-size: 2rem; }

.wide-chip-grid { grid-template-columns: minmax(255px, 0.92fr) minmax(420px, 1.55fr) minmax(210px, 0.72fr); align-items: start; }
.behavior-table th,
.behavior-table td { padding: 7px 8px; font-size: 0.78rem; text-align: center; }
.table-note { max-width: none; margin: 8px 0 0; color: var(--muted); font-size: 0.8rem !important; }
.compact-chip-figure { align-self: center; }

.implementation-prompts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inc16-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.alu-purpose-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0;
}
.alu-purpose-grid > div { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.alu-purpose-grid span { color: var(--accent-dark); font-weight: 900; }

.hack-alu-interface {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(330px, 1.35fr) minmax(110px, 0.42fr);
  align-items: center;
  max-width: 840px;
  margin: 28px auto;
}
.alu-inputs { display: grid; gap: 38px; }
.alu-inputs span,
.alu-output { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.alu-inputs span { justify-content: flex-end; }
.alu-inputs i,
.alu-output i { color: var(--accent-dark); font-size: 2rem; font-style: normal; }
.alu-chip { position: relative; display: grid; place-items: center; gap: 10px; min-height: 210px; padding: 30px; border: 4px solid #173e35; background: #f4fbf8; text-align: center; }
.alu-chip > strong { color: #173e35; font-size: 2rem; }
.alu-chip > small { color: var(--muted); }
.control-pins { position: absolute; top: -35px; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); }
.control-pins code { padding: 5px 7px; border: 1px solid var(--accent); border-radius: 5px; background: #fff; }
.large-interface { margin: 40px auto 12px; }
.large-interface .alu-chip { min-height: 180px; }
.large-interface + .interface-facts { margin-block: 8px; }
.large-interface + .interface-facts > div { padding-block: 10px; }
.large-interface + .interface-facts p { font-size: 0.84rem; }

.alu-motivation-flow > div { min-height: 150px; }
.interface-facts { margin-top: 18px; }

.control-explanation-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
  width: 100%;
  margin-top: 34px;
}

.mini-alu-interface {
  grid-template-columns: minmax(100px, 0.72fr) minmax(210px, 1.15fr) minmax(80px, 0.36fr);
  margin: 28px 0 0;
}

.mini-alu-interface .alu-chip {
  min-height: 180px;
  padding: 24px 18px;
}

.mini-alu-interface .control-pins {
  flex-wrap: wrap;
  justify-content: center;
  width: min(260px, 100%);
  top: -58px;
}

.control-pause-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}

.control-pause-list li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.control-pause-list li.pause-step.visible {
  display: list-item !important;
}

.control-pause-list span {
  color: var(--muted);
}

.control-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.control-stage-grid > div { display: grid; gap: 13px; padding: 20px; border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 8px; background: #fff; }
.control-stage-grid span { color: var(--accent-dark); font-weight: 900; }

.alu-pipeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.alu-pipeline > div { display: grid; place-items: center; gap: 5px; min-height: 74px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.alu-pipeline > i { color: var(--accent-dark); font-size: 0.78rem; font-style: normal; font-weight: 850; text-align: center; }
.alu-pipeline span { color: var(--muted); font-size: 0.75rem; }
.alu-pipeline .pipeline-merge { grid-column: 2 / 4; margin-top: 6px; border-top: 5px solid var(--accent); }
.alu-pipeline .pipeline-final-arrow { grid-column: 4; }
.alu-pipeline .pipeline-result { grid-column: 5; border-top: 5px solid var(--accent); }
.alu-lecture .slide:has(.alu-pipeline) h2 { margin-bottom: 6px; font-size: clamp(2.25rem, 4vw, 3.4rem); }
.alu-lecture .slide:has(.alu-pipeline) > p { margin-top: 12px; font-size: 0.9rem !important; }

.alu-spec-layout { grid-template-columns: minmax(310px, 0.9fr) minmax(430px, 1.1fr); align-items: stretch; }
.alu-pseudocode { margin: 0; font-size: 0.9rem; line-height: 1.35; }

.full-width-spec {
  width: min(100%, 1120px);
  padding-block: 10px;
}

.full-width-spec dl {
  gap: 6px;
}

.full-width-spec dl > div:last-child {
  margin-top: 2px;
}

.full-width-spec .alu-pseudocode {
  margin-top: 4px;
  line-height: 1.2;
}

.alu-spec-slide h2 {
  margin-bottom: 8px;
  font-size: clamp(2.15rem, 3.8vw, 3.25rem);
}

.ordered-control-text {
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.ordered-control-text p {
  margin: 0 0 12px;
}

.ordered-control-text p:last-child {
  margin: 12px 0 0;
}

.ordered-control-text ol {
  margin: 0;
  padding-left: 1.3rem;
}

.alu-trace-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr) auto minmax(0, 0.9fr); }
.alu-trace-flow > div { min-height: 158px; }
.alu-trace-flow p { margin: 0; font-size: 0.84rem; }

.control-exercise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.control-exercise-grid > div { display: grid; place-items: center; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.control-exercise-grid span { color: var(--accent-dark); font-weight: 900; }
.control-exercise-grid code { font-size: 1.12rem; letter-spacing: 0.16em; }

.status-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
.status-output-grid > div { padding: 22px; border-top: 5px solid var(--accent); }
.status-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.status-examples span { padding: 13px; border-radius: 7px; background: #eef7f3; text-align: center; font-size: 0.85rem; }

.full-alu-contract { grid-template-columns: minmax(390px, 1.1fr) minmax(420px, 1fr); }
.complete-alu-interface { display: grid; gap: 20px; }
.complete-alu-interface .control-row,
.complete-alu-interface .flag-row { display: flex; justify-content: center; gap: 12px; }
.complete-alu-interface .control-row { flex-wrap: wrap; }
.complete-alu-interface .control-row i { flex-basis: 100%; color: var(--accent-dark); font-style: normal; text-align: center; }
.complete-alu-interface .data-row { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; }
.complete-alu-interface .data-row > span { display: flex; align-items: center; justify-content: center; gap: 8px; }
.complete-alu-interface .data-row > strong { display: grid; place-items: center; min-height: 120px; border: 3px solid #173e35; background: #f4fbf8; color: #173e35; font-size: 1.5rem; }
.complete-alu-interface .flag-row::before { content: "↓"; color: var(--accent-dark); }

.alu-function-table { width: min(100%, 940px); margin: 8px auto 0; }
.alu-table-slide { grid-template-columns: minmax(0, 1fr); }
.alu-table-slide h2 { white-space: normal !important; }
.alu-function-table th,
.alu-function-table td { padding: 2px 13px; font-size: 0.76rem; text-align: center; }
.alu-function-table th:last-child,
.alu-function-table td:last-child { border-left: 3px solid var(--accent); }
.binary-function-table-slide .alu-function-table th,
.binary-function-table-slide .alu-function-table td { padding-block: 9px; font-size: 0.9rem; }
.or-derivation { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.or-derivation p { margin: 0; }

.alu-program-problems { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.five-alu-problems { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.alu-program-problems > div { display: grid; place-items: center; gap: 8px; text-align: center; }
.six-answer-grid.visible { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.six-answer-grid p { margin: 0; text-align: center; }

#control-bits-answer.visible {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#control-bits-answer p {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.flag-exercise-table th,
.flag-exercise-table td { padding: 8px 12px; text-align: center; }
.flag-exercise-table { width: 100%; }

.implementation-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin: 24px 0;
}
.implementation-pipeline > div { padding: 18px; border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 8px; background: #fff; }
.implementation-pipeline p { margin: 8px 0 0; font-size: 0.88rem; }
.alu-tutorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.lab-chip-sequence > div { min-height: 90px; padding: 12px; }
.lab-chip-sequence span { color: var(--accent-dark); font-weight: 900; }

/* Lectures 8-10: sequential logic, memory, and program counter. */
.sequential-lecture .comparison-panels,
.sequential-lecture .state-motivation-grid,
.sequential-lecture .address-example-grid,
.sequential-lecture .address-split-grid,
.sequential-lecture .feedback-grid,
.sequential-lecture .pc-construction-grid,
.sequential-lecture .debug-case,
.sequential-lecture .priority-reveal {
  display: grid;
  gap: 18px;
}

.sequential-lecture .comparison-panels,
.sequential-lecture .feedback-grid,
.sequential-lecture .debug-case {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sequential-lecture .state-motivation-grid,
.sequential-lecture .address-example-grid,
.sequential-lecture .pc-construction-grid,
.sequential-lecture .priority-reveal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sequential-lecture .comparison-panels > div,
.sequential-lecture .state-motivation-grid > div,
.sequential-lecture .address-example-grid > div,
.sequential-lecture .address-split-grid > div,
.sequential-lecture .feedback-grid > div,
.sequential-lecture .pc-construction-grid > div,
.sequential-lecture .debug-case > div,
.sequential-lecture .priority-reveal > div,
.delay-card,
.read-write-card,
.prompt-box,
.priority-stack {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.sequential-lecture .comparison-panels span,
.sequential-lecture .state-motivation-grid span,
.sequential-lecture .pc-construction-grid span,
.sequential-lecture .address-example-grid span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sequential-lecture .comparison-panels strong,
.sequential-lecture .state-motivation-grid strong,
.sequential-lecture .address-example-grid strong,
.sequential-lecture .address-split-grid strong,
.sequential-lecture .feedback-grid strong,
.sequential-lecture .pc-construction-grid strong,
.sequential-lecture .debug-case strong,
.sequential-lecture .priority-reveal strong,
.delay-card strong,
.read-write-card strong,
.prompt-box strong,
.priority-stack > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-weight: 900;
}

.sequential-lecture .comparison-panels p,
.sequential-lecture .state-motivation-grid p,
.sequential-lecture .address-example-grid p,
.sequential-lecture .address-split-grid p,
.sequential-lecture .feedback-grid p,
.sequential-lecture .pc-construction-grid p,
.sequential-lecture .debug-case p,
.sequential-lecture .priority-reveal p,
.delay-card p,
.read-write-card p,
.prompt-box p,
.priority-stack p {
  margin: 0;
  font-size: 0.98rem !important;
}

.clock-layout,
.bit-construction,
.ram8-diagram,
.pc-interface {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 26px;
  align-items: center;
}

.clock-strip {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.clock-strip span {
  color: var(--accent-dark);
  font-size: 1.3rem;
  font-weight: 900;
}

.clock-strip i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--accent-dark), var(--accent-dark) 18px, transparent 18px, transparent 34px);
}

.timing-table,
.address-table {
  width: min(100%, 980px);
  margin-top: 16px;
}

.timing-table th,
.timing-table td,
.address-table th,
.address-table td {
  padding: 8px 14px;
  text-align: center;
}

.timing-table td.pause-step,
.address-table td.pause-step {
  display: table-cell !important;
  visibility: hidden;
}

.timing-table td.pause-step.visible,
.address-table td.pause-step.visible {
  display: table-cell !important;
  visibility: visible;
}

.dff-grid {
  grid-template-columns: minmax(280px, 0.95fr) minmax(220px, 0.75fr) minmax(260px, 0.8fr);
}

.sequential-circuit {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.sequential-circuit figcaption {
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.sequential-circuit svg {
  width: 100%;
  height: auto;
}

.sequential-circuit text {
  fill: #173e35;
  font: 800 17px system-ui, sans-serif;
}

.sequential-circuit line {
  stroke: #173e35;
  stroke-width: 4;
}

.prompt-box {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.read-write-card {
  display: grid;
  gap: 10px;
}

.register-array,
.memory-hierarchy-line,
.lab-chip-sequence.sequential-lab-sequence {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(95px, 1fr);
  gap: 12px;
  align-items: center;
  margin: 24px 0;
}

.register-array > div,
.memory-hierarchy-line > div {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.register-array i,
.memory-hierarchy-line i {
  color: var(--accent-dark);
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.register-array span {
  color: var(--muted);
  font-weight: 850;
}

.exit-grid,
.three-answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.answer.three-answer-grid {
  display: none;
}

.answer.three-answer-grid.visible {
  display: grid;
}

.ram-contract-grid,
.pc-contract-grid {
  grid-template-columns: minmax(300px, 0.95fr) minmax(330px, 1fr) minmax(220px, 0.7fr);
}

.ram8-diagram {
  grid-template-columns: minmax(220px, 0.8fr) minmax(240px, 1fr) minmax(220px, 0.8fr);
}

.ram-bank {
  display: grid;
  gap: 7px;
}

.ram-bank span {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 850;
  text-align: center;
}

.ram8-question {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7ed;
}

.long-hierarchy {
  grid-auto-columns: minmax(86px, 1fr);
}

.pc-interface {
  grid-template-columns: minmax(170px, 0.55fr) minmax(220px, 0.8fr) minmax(170px, 0.55fr);
  max-width: 900px;
  margin: 24px auto;
}

.pc-inputs,
.pc-output {
  display: grid;
  gap: 12px;
  align-items: center;
}

.pc-inputs span,
.pc-output {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--accent-dark);
  font-weight: 900;
}

.pc-output {
  justify-content: flex-start;
}

.pc-inputs i,
.pc-output i {
  font-size: 1.8rem;
  font-style: normal;
}

.pc-chip {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 22px;
  border: 4px solid #173e35;
  background: #f4fbf8;
}

.pc-chip strong {
  color: #173e35;
  font-size: 2.3rem;
}

.pc-chip small {
  color: var(--muted);
}

.priority-stack {
  display: grid;
  gap: 9px;
}

.priority-stack div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
}

.priority-stack span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 900;
}

.center-question {
  width: min(100%, 720px);
  margin: 36px auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.center-question code {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.pc-hierarchy {
  margin-top: 36px;
}

.sequential-tutorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sequential-lab-sequence {
  grid-auto-flow: initial;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.sequential-lab-sequence > div {
  min-height: 82px;
  padding: 8px;
}

.sequential-lecture .next-step {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: 82px;
  width: auto;
  max-width: min(100%, 760px);
  justify-self: end;
  align-self: end;
  margin: 0;
  text-align: right;
}

.expanded-clock-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
}

.clock-figure,
.feedback-figure {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.clock-figure figcaption,
.feedback-figure figcaption {
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.clock-figure svg,
.feedback-figure svg {
  width: 100%;
  height: auto;
}

.clock-figure line,
.clock-figure path,
.feedback-figure path,
.feedback-figure rect {
  stroke: #173e35;
  stroke-width: 4;
}

.feedback-figure rect {
  fill: #f4fbf8;
}

.clock-figure text,
.feedback-figure text {
  fill: #173e35;
  font: 800 18px system-ui, sans-serif;
}

.clock-figure .cycle-band rect {
  fill: rgba(15, 118, 110, 0.06);
  stroke: none;
}

.clock-figure .cycle-line {
  stroke: #c2410c;
  stroke-width: 3;
  stroke-dasharray: 8 7;
}

.feedback-figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.feedback-figure p {
  margin: 10px 0 0;
  font-size: 0.96rem !important;
}

.bit-trace-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(460px, 1fr);
  gap: 22px;
  align-items: start;
}

.bit-trace-layout .chip-figure {
  align-self: stretch;
}

.book-image-layout,
.dff-study-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 24px;
  align-items: center;
}

.dff-study-layout {
  grid-template-columns: minmax(260px, 0.75fr) minmax(220px, 0.55fr) minmax(430px, 1.2fr);
  align-items: stretch;
}

.book-figure {
  display: grid;
  place-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.book-figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.book-figure figcaption {
  width: 100%;
  color: var(--accent-dark);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.wide-book-figure img {
  max-height: 465px;
  object-fit: contain;
}

.symbol-book-figure img {
  max-height: 190px;
  object-fit: contain;
}

.symbol-book-figure {
  align-content: center;
}

.cycle-book-figure img {
  max-height: 230px;
  object-fit: contain;
}

.centered-book-figure img {
  max-height: 330px;
  object-fit: contain;
}

.ram-concept-figure img {
  max-height: 420px;
  object-fit: contain;
}

.ram-symbol-figure img {
  max-height: 245px;
  object-fit: contain;
}

.ram-recursive-figure img {
  max-height: 405px;
  object-fit: contain;
}

.pc-symbol-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: center;
  margin-top: 18px;
}

.pc-symbol-figure img {
  max-height: 210px;
  object-fit: contain;
}

.pc-contract-grid {
  grid-template-columns: minmax(360px, 1fr) minmax(260px, 0.72fr) minmax(320px, 0.86fr);
}

.pc-spec-card dl {
  gap: 7px;
}

.pc-function {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
  white-space: pre-wrap;
}

.pc-function code {
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.pc-example-figure {
  width: min(100%, 1120px);
  margin: 10px auto 0;
}

.pc-example-figure img {
  max-height: 420px;
  object-fit: contain;
}

.chapter-hierarchy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}

.hierarchy-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.hierarchy-panel strong {
  display: block;
  margin-bottom: 14px;
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.hierarchy-panel ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.25em;
}

.hierarchy-panel li {
  font-size: 1rem !important;
}

.comparison-stack {
  display: grid;
  gap: 16px;
}

.comparison-stack > div,
.feedback-text-grid > div,
.explanation-list {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.comparison-stack span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comparison-stack strong,
.feedback-text-grid strong {
  display: block;
  margin: 6px 0 8px;
  color: var(--accent-dark);
  font-weight: 900;
}

.comparison-stack p,
.feedback-text-grid p,
.explanation-list li {
  margin: 0;
  font-size: 0.98rem !important;
}

.feedback-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.explanation-list ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 1.25em;
}

.invalid-register-layout,
.correct-register-layout {
  grid-template-columns: minmax(360px, 0.85fr) minmax(420px, 1fr);
}

/* Lectures 11-13: machine language. */
.machine-lecture .next-step {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: 82px;
  width: auto;
  max-width: min(100%, 760px);
  margin: 0;
  text-align: right;
}

/* Lecture 12: Hack instruction set, symbols, and memory-mapped I/O. */
.lecture-twelve .recap-image-layout,
.lecture-twelve .compute-spec-layout,
.lecture-twelve .jump-spec-layout,
.lecture-twelve .screen-spec-grid,
.lecture-twelve .keyboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
  align-items: center;
}

.lecture-twelve .architecture-figure img {
  max-height: 480px;
  object-fit: contain;
}

.lecture-twelve .wide-machine-figure img {
  max-height: 490px;
  object-fit: contain;
}

.lecture-twelve .assembly-recap-slide .wide-machine-figure figcaption,
.lecture-twelve .add-worked-slide .add-example-figure figcaption {
  display: none;
}

.lecture-twelve .add-example-figure {
  width: min(100%, 900px);
  padding: 10px;
}

.lecture-twelve .termination-note {
  margin: 0 0 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.96rem !important;
}

.lecture-twelve .add-example-figure img {
  max-height: 560px;
  object-fit: contain;
}

.lecture-twelve .add-worked-slide {
  padding-top: 30px;
}

.lecture-twelve .add-worked-slide .next-step {
  width: 360px;
  max-width: 360px;
}

.lecture-twelve .instruction-form {
  width: min(100%, 880px);
  margin: 18px auto;
}

.lecture-twelve .instruction-form code {
  font-size: 1.12rem;
  line-height: 1.5;
}

.lecture-twelve .instruction-format-figure {
  width: min(100%, 1020px);
  margin: 18px auto;
  padding: 12px 18px;
}

.lecture-twelve .instruction-format-figure img {
  width: 100%;
  max-height: 145px;
  object-fit: contain;
}

.lecture-twelve .c-instruction-overview-slide .instruction-form {
  margin: 8px auto;
}

.lecture-twelve .c-instruction-overview-slide .instruction-format-figure {
  margin: 8px auto 12px;
}

.lecture-twelve .c-instruction-overview-slide .field-semantics-grid {
  gap: 12px;
}

.lecture-twelve .c-instruction-overview-slide .field-semantics-grid > div {
  padding: 11px 14px;
}

.lecture-twelve .compact-instruction-note {
  margin: 12px 0 0;
  font-size: 0.96rem !important;
}

.lecture-twelve .binary-example-line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}

.lecture-twelve .binary-example-line code {
  font-size: 1.25rem;
  font-weight: 900;
}

.lecture-twelve .purpose-list {
  display: grid;
  gap: 16px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  counter-reset: purpose;
}

.lecture-twelve .purpose-list li {
  display: grid;
  grid-template-columns: minmax(210px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  counter-increment: purpose;
}

.lecture-twelve .purpose-list li::before {
  content: counter(purpose);
  position: absolute;
  color: transparent;
}

.lecture-twelve .purpose-list span {
  font-size: 1rem;
}

.lecture-twelve .purpose-code {
  margin: 0;
  padding: 10px 14px;
  overflow: visible;
}

.lecture-twelve .purpose-code code {
  font-size: 0.98rem;
  line-height: 1.45;
}

.lecture-twelve .field-semantics-grid,
.lecture-twelve .encoding-example-stack,
.lecture-twelve .assembly-binary-grid,
.lecture-twelve .line-by-line-list,
.lecture-twelve .warning-box {
  display: grid;
  gap: 16px;
}

.lecture-twelve .field-semantics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lecture-twelve .field-semantics-grid > div,
.lecture-twelve .encoding-example-stack > div,
.lecture-twelve .assembly-binary-grid > div,
.lecture-twelve .warning-box {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lecture-twelve .field-semantics-grid strong,
.lecture-twelve .encoding-example-stack span,
.lecture-twelve .assembly-binary-grid span,
.lecture-twelve .warning-box strong {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-dark);
  font-weight: 900;
}

.lecture-twelve .field-semantics-grid p,
.lecture-twelve .warning-box p {
  margin: 0;
  font-size: 0.94rem !important;
}

.lecture-twelve .compute-spec-layout {
  grid-template-columns: minmax(520px, 1fr) minmax(320px, 0.72fr);
  align-items: start;
}

.lecture-twelve .c-field-reminder-figure {
  margin: 0 0 10px;
  padding: 8px 12px;
}

.lecture-twelve .c-field-reminder-figure img {
  width: 100%;
  max-height: 82px;
  object-fit: contain;
}

.lecture-twelve .c-field-reminder-figure figcaption {
  font-size: 0.72rem;
}

.lecture-twelve .binary-field-example {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--warm);
  border-radius: 8px;
  background: #fff;
}

.lecture-twelve .binary-field-example > strong {
  color: var(--accent-dark);
}

.lecture-twelve .binary-field-example > code {
  width: fit-content;
  font-size: 1.05rem;
  font-weight: 900;
}

.lecture-twelve .binary-field-example p {
  margin: 0;
  font-size: 0.9rem !important;
}

.lecture-twelve .compute-table-figure {
  padding: 8px 12px;
}

.lecture-twelve .compute-table-figure img {
  max-height: 495px;
  object-fit: contain;
}

.lecture-twelve .encoding-example-stack {
  margin: 22px 0;
}

.lecture-twelve .encoding-example-stack > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 18px;
  align-items: center;
}

.lecture-twelve .encoding-example-stack strong,
.lecture-twelve .encoding-example-stack small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lecture-twelve .destination-figure {
  width: min(100%, 1040px);
  margin: 0 auto 16px;
  padding: 10px 16px;
}

.lecture-twelve .destination-figure img {
  max-height: 330px;
  object-fit: contain;
}

.lecture-twelve .field-spec-example-layout {
  display: grid;
  grid-template-columns: minmax(500px, 1fr) minmax(380px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.lecture-twelve .field-spec-example-layout .destination-figure {
  margin: 0;
}

.lecture-twelve .destination-notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
  width: min(100%, 1040px);
  margin: 0 auto;
}

.lecture-twelve .assembly-binary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0;
}

.lecture-twelve .assembly-binary-grid pre {
  margin-top: 10px;
}

.lecture-twelve .line-by-line-list {
  gap: 10px;
  margin-top: 18px;
}

.lecture-twelve .line-by-line-list li {
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: #fff;
  font-size: 1rem !important;
}

.lecture-twelve .jump-spec-layout {
  grid-template-columns: minmax(500px, 1fr) minmax(350px, 0.8fr);
  align-items: start;
}

.lecture-twelve .jump-table-figure img,
.lecture-twelve .jump-example-figure img {
  max-height: 390px;
  object-fit: contain;
}

.lecture-twelve .jump-example-figure {
  width: min(100%, 1040px);
  margin: 0 auto 14px;
}

.lecture-twelve .compact-method-box {
  width: min(100%, 1040px);
  margin: 14px auto 0;
  padding: 14px 18px;
}

.lecture-twelve .conflict-panels {
  margin-bottom: 20px;
}

.lecture-twelve .warning-box {
  border-left: 6px solid var(--warm);
}

.lecture-twelve .predefined-symbol-table {
  width: 100%;
  max-width: none;
  margin-top: 20px;
}

.lecture-twelve .predefined-symbol-table th,
.lecture-twelve .predefined-symbol-table td {
  padding: 12px 16px;
}

.lecture-twelve .screen-spec-grid {
  align-items: stretch;
}

.lecture-twelve .screen-formula-box {
  margin: 0;
}

.lecture-twelve .screen-formula-box code {
  display: block;
  margin: 8px 0 18px;
  font-size: 1.15rem;
  font-weight: 900;
}

.lecture-twelve .keyboard-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: start;
}

.lecture-twelve .keyboard-figure img {
  max-height: 390px;
  object-fit: contain;
}

.lecture-twelve .fun-lab-box {
  margin: 18px 0 0;
  padding: 13px 17px;
  border-left: 6px solid var(--warm);
}

.lecture-twelve .fun-lab-box p {
  margin: 4px 0 0;
  font-size: 1rem !important;
}

.lecture-twelve .machine-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lecture-twelve .instruction-type-answer {
  margin-top: 24px;
}

.lecture-twelve .instruction-type-answer.pause-step.visible {
  display: grid !important;
  gap: 18px;
}

.lecture-twelve .instruction-type-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.lecture-twelve .instruction-type-figures figure {
  padding: 12px 18px;
}

.lecture-twelve .instruction-type-figures img {
  width: 100%;
  max-height: 175px;
  object-fit: contain;
}

.lecture-twelve .instruction-type-rule {
  margin: 0;
  padding: 15px 18px;
  border-left: 6px solid var(--warm);
}

.lecture-twelve .instruction-type-rule p {
  margin: 5px 0 0;
  font-size: 1rem !important;
}

.machine-bullet-list {
  display: grid;
  gap: 14px;
  margin: 20px 0;
  padding-left: 1.25em;
}

.machine-bullet-list li {
  font-size: clamp(1rem, 1.7vw, 1.2rem) !important;
}

.machine-bullet-list.compact-list {
  gap: 10px;
  margin: 14px 0;
}

.machine-bullet-list.compact-list li {
  font-size: 1rem !important;
}

.machine-lecture .model-box ul,
.machine-lecture .machine-panels ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 1.15em;
}

.machine-lecture .model-box li,
.machine-lecture .machine-panels li {
  font-size: 0.94rem !important;
}

.machine-lecture .machine-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.machine-lecture .machine-panels > div {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.machine-lecture .machine-panels > div > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.machine-lecture .machine-panels > div > strong {
  display: block;
  margin-bottom: 9px;
  color: var(--accent-dark);
  font-weight: 900;
}

.machine-lecture .machine-panels p {
  margin: 0;
  font-size: 0.98rem !important;
}

.instruction-example {
  margin: 20px auto;
  text-align: center;
}

.instruction-example code {
  color: var(--accent-dark);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.code-explanation-grid,
.hack-example-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

.indirect-flow,
.memory-selection-flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr max-content 1fr max-content 1fr;
  gap: 14px;
  align-items: center;
  margin: 28px 0;
}

.indirect-flow.no-arrows {
  grid-auto-flow: initial;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.indirect-flow > div,
.memory-selection-flow > div {
  min-height: 104px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.indirect-flow span,
.memory-selection-flow span {
  display: block;
  margin-bottom: 7px;
  color: var(--warm);
  font-weight: 900;
}

.indirect-flow i,
.memory-selection-flow i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 1.8rem;
  font-weight: 900;
}

.command-example-list div {
  margin-top: 7px;
}

.command-example-list small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.35;
}

.hack-program-block {
  width: min(100%, 560px);
  margin: 18px auto !important;
  text-align: left;
}

.hack-program-block code {
  font-size: 1.18rem !important;
  line-height: 1.5 !important;
}

.line-explanation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.line-explanation-grid > div {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.line-explanation-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.line-explanation-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
}

.line-explanation-grid p {
  margin: 0;
  font-size: 0.98rem !important;
}

.assembly-label {
  display: block;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.register-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.register-note-grid .titled-method-box {
  padding: 14px 18px;
}

.register-note-grid .titled-method-box p {
  font-size: 0.92rem !important;
}

.memory-notation-reminder {
  margin: 0 0 14px;
}

.goto-zero-note {
  margin-top: 18px !important;
  padding: 14px 18px !important;
}

.goto-zero-note p {
  font-size: 0.94rem !important;
}

.goto-answer {
  margin: 22px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.goto-answer > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-dark);
}

.goto-answer pre {
  width: min(100%, 460px);
  margin-bottom: 12px;
}

.goto-answer ol {
  display: grid;
  gap: 8px;
}

.center-code {
  width: min(100%, 620px);
  margin: 0 auto 20px !important;
  text-align: center;
}

.hack-example-grid {
  grid-template-columns: minmax(250px, 0.7fr) minmax(300px, 0.8fr) minmax(300px, 1fr);
  gap: 18px;
}

.hack-example-grid > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.hack-example-grid .asm-code {
  padding: 10px 14px;
}

.hack-example-grid .asm-code code {
  font-size: 0.82rem;
  line-height: 1.12;
}

.hack-program-example-slide .prompt {
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.9rem !important;
}

.hack-program-example-slide .hack-example-grid {
  margin-top: 8px;
}

.hack-program-example-slide .hack-example-grid .asm-code code {
  font-size: 0.72rem;
  line-height: 1;
}

.hack-program-example-slide .hack-example-grid .asm-code {
  line-height: 1;
}

.machine-lecture .machine-question-grid,
.machine-lecture .hack-view-grid,
.machine-lecture .adm-grid,
.machine-lecture .a-instruction-grid,
.machine-lecture .c-question-grid,
.machine-lecture .bit-field-grid,
.machine-lecture .comp-family-grid,
.machine-lecture .dest-grid,
.machine-lecture .before-after-grid,
.machine-lecture .encoding-grid,
.machine-lecture .idiom-grid,
.machine-lecture .symbol-grid,
.machine-lecture .io-map-grid,
.machine-lecture .exercise-card-grid,
.machine-lecture .legal-grid {
  display: grid;
  gap: 16px;
}

.machine-lecture .machine-question-grid,
.machine-lecture .memory-view-grid,
.machine-lecture .a-instruction-grid,
.machine-lecture .before-after-grid,
.machine-lecture .encoding-grid,
.machine-lecture .jump-flow,
.machine-lecture .program-explain-grid,
.machine-lecture .lookup-and-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.machine-lecture .hack-view-grid,
.machine-lecture .adm-grid,
.machine-lecture .c-question-grid,
.machine-lecture .dest-grid,
.machine-lecture .symbol-grid,
.machine-lecture .io-map-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.machine-lecture .bit-field-grid,
.machine-lecture .comp-family-grid,
.machine-lecture .idiom-grid,
.machine-lecture .exercise-card-grid,
.machine-lecture .legal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.machine-lecture .fill-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.machine-lecture .machine-question-grid > div,
.machine-lecture .model-box,
.machine-lecture .adm-grid > div,
.machine-lecture .c-question-grid > div,
.machine-lecture .bit-field-grid > div,
.machine-lecture .comp-family-grid > div,
.machine-lecture .dest-grid > div,
.machine-lecture .before-after-grid > div,
.machine-lecture .idiom-grid > div,
.machine-lecture .symbol-grid > div,
.machine-lecture .io-map-grid > div,
.machine-lecture .exercise-card-grid > div,
.machine-lecture .legal-grid > div,
.loop-blocks > div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.machine-lecture .machine-question-grid strong,
.machine-lecture .model-box strong,
.machine-lecture .adm-grid strong,
.machine-lecture .c-question-grid strong,
.machine-lecture .bit-field-grid strong,
.machine-lecture .comp-family-grid strong,
.machine-lecture .dest-grid strong,
.machine-lecture .before-after-grid strong,
.machine-lecture .idiom-grid strong,
.machine-lecture .symbol-grid strong,
.machine-lecture .io-map-grid strong,
.machine-lecture .exercise-card-grid strong,
.machine-lecture .legal-grid strong,
.loop-blocks strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-weight: 900;
}

.machine-lecture .machine-question-grid p,
.machine-lecture .machine-question-grid li,
.machine-lecture .model-box p,
.machine-lecture .adm-grid p,
.machine-lecture .c-question-grid p,
.machine-lecture .bit-field-grid p,
.machine-lecture .dest-grid p,
.machine-lecture .before-after-grid p,
.machine-lecture .idiom-grid p,
.machine-lecture .symbol-grid p,
.machine-lecture .io-map-grid p,
.machine-lecture .exercise-card-grid p,
.loop-blocks p {
  margin: 0;
  font-size: 0.96rem !important;
}

.machine-lecture .model-box span,
.machine-lecture .comp-family-grid span,
.machine-lecture .dest-grid span,
.machine-lecture .symbol-grid span,
.machine-lecture .exercise-card-grid span,
.loop-blocks span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.machine-lecture pre {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
  white-space: pre-wrap;
}

.machine-lecture pre code {
  padding: 0;
  background: transparent;
  font-size: 0.98rem;
  line-height: 1.38;
}

.translation-line,
.machine-model-diagram {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 28px 0;
}

.translation-line i,
.machine-model-diagram i {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 2rem;
  font-weight: 900;
}

.translation-line code,
.translation-line strong {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.machine-model-diagram .model-box {
  min-width: 220px;
  text-align: center;
}

.compact-machine-table {
  width: min(100%, 520px);
}

.compact-machine-table th,
.compact-machine-table td,
.jump-table th,
.jump-table td {
  padding: 7px 12px;
  font-size: 0.96rem;
}

.machine-lecture .titled-method-box {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.machine-lecture .titled-method-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
}

.machine-lecture .titled-method-box p {
  margin: 0;
  font-size: 1rem !important;
}

.binary-word,
.c-formula,
.instruction-bits {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.binary-word code,
.c-formula code,
.instruction-bits span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  font-weight: 900;
}

.binary-word strong {
  color: var(--accent-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.15rem, 2.5vw, 1.9rem);
  letter-spacing: 0.06em;
}

.binary-word span,
.binary-word small {
  color: var(--muted);
  font-weight: 850;
}

.c-formula {
  width: min(100%, 760px);
  margin: 0 auto 24px;
}

.instruction-bits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

.instruction-bits span {
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
}

.instruction-bits .prefix { background: #134e4a; }
.instruction-bits .comp,
.instruction-bits span:nth-child(2) { background: #1d4ed8; }
.instruction-bits .dest { background: #c2410c; }
.instruction-bits .jump { background: #15803d; }

.program-explain-grid .asm-code,
.program-slide .asm-code {
  font-size: 1rem;
}

.trace-list {
  display: grid;
  gap: 12px;
  align-content: center;
}

.trace-list li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem !important;
}

.machine-lecture .legal-grid > div {
  display: grid;
  place-items: center;
  min-height: 112px;
  text-align: center;
}

.machine-lecture .legal-grid code {
  font-size: 1.35rem;
}

.loop-blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.big-translation {
  grid-auto-columns: max-content;
}

@media (max-width: 900px) {
  .lecture-twelve .recap-image-layout,
  .lecture-twelve .compute-spec-layout,
  .lecture-twelve .jump-spec-layout,
  .lecture-twelve .screen-spec-grid,
  .lecture-twelve .keyboard-layout,
  .lecture-twelve .field-semantics-grid,
  .lecture-twelve .assembly-binary-grid,
  .lecture-twelve .machine-summary-grid {
    grid-template-columns: 1fr;
  }

  .lecture-twelve .purpose-list li,
  .lecture-twelve .encoding-example-stack > div {
    grid-template-columns: 1fr;
  }

  .lecture-twelve .binary-example-line {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    text-align: center;
  }

  .code-explanation-grid,
  .hack-example-grid,
  .machine-lecture .machine-panels,
  .line-explanation-grid,
  .register-note-grid,
  .indirect-flow.no-arrows {
    grid-template-columns: 1fr;
  }

  .indirect-flow,
  .memory-selection-flow {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
  }

  .indirect-flow i,
  .memory-selection-flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .machine-lecture .machine-question-grid,
  .machine-lecture .memory-view-grid,
  .machine-lecture .a-instruction-grid,
  .machine-lecture .before-after-grid,
  .machine-lecture .encoding-grid,
  .machine-lecture .jump-flow,
  .machine-lecture .program-explain-grid,
  .machine-lecture .lookup-and-task,
  .machine-lecture .hack-view-grid,
  .machine-lecture .adm-grid,
  .machine-lecture .c-question-grid,
  .machine-lecture .dest-grid,
  .machine-lecture .symbol-grid,
  .machine-lecture .io-map-grid,
  .machine-lecture .bit-field-grid,
  .machine-lecture .comp-family-grid,
  .machine-lecture .idiom-grid,
  .machine-lecture .exercise-card-grid,
  .machine-lecture .legal-grid,
  .machine-lecture .fill-grid,
  .loop-blocks {
    grid-template-columns: 1fr;
  }

  .translation-line,
  .machine-model-diagram {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
  }

  .translation-line i,
  .machine-model-diagram i {
    transform: rotate(90deg);
  }
}

@media (max-width: 900px) {
  .sequential-lecture .comparison-panels,
  .sequential-lecture .state-motivation-grid,
  .sequential-lecture .address-example-grid,
  .sequential-lecture .address-split-grid,
  .sequential-lecture .feedback-grid,
  .sequential-lecture .pc-construction-grid,
  .sequential-lecture .debug-case,
  .sequential-lecture .priority-reveal,
  .clock-layout,
  .bit-construction,
  .expanded-clock-layout,
  .feedback-figure-grid,
  .bit-trace-layout,
  .book-image-layout,
  .dff-study-layout,
  .feedback-text-grid,
  .pc-symbol-layout,
  .chapter-hierarchy-grid,
  .ram8-diagram,
  .pc-interface,
  .exit-grid,
  .three-answer-grid,
  .sequential-tutorial-grid {
    grid-template-columns: 1fr;
  }

  .register-array,
  .memory-hierarchy-line,
  .lab-chip-sequence.sequential-lab-sequence {
    grid-auto-flow: row;
  }
}
.lab-rule-box { margin-top: 28px; }

@media (max-width: 900px) {
  .addition-bridge-layout,
  .chip-study-grid,
  .wide-chip-grid,
  .alu-spec-layout,
  .full-alu-contract,
  .hack-alu-interface,
  .control-explanation-layout,
  .control-stage-grid,
  .implementation-pipeline {
    grid-template-columns: 1fr;
  }

  .adder-hierarchy,
  .ripple-adder-diagram,
  .alu-motivation-flow,
  .alu-trace-flow,
  .lab-chip-sequence {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
  }

  .adder-hierarchy > i,
  .ripple-adder-diagram > i,
  .alu-motivation-flow > i,
  .alu-trace-flow > i,
  .lab-chip-sequence > i { transform: rotate(90deg); }

  .adder-design-questions,
  .full-adder-hints,
  .implementation-prompts,
  .interface-facts,
  .alu-tutorial-grid,
  .alu-purpose-grid,
  .alu-program-problems,
  .six-answer-grid.visible { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .alu-inputs { grid-auto-flow: column; }
  .alu-pipeline { grid-template-columns: 1fr; }
  .alu-pipeline .pipeline-merge,
  .alu-pipeline .pipeline-final-arrow,
  .alu-pipeline .pipeline-result { grid-column: 1; }
}

@media print {
  .deck-body {
    overflow: visible;
    background: #fff;
    color: #000;
  }

  .slide,
  .slide.current {
    display: block;
    min-height: 100vh;
    page-break-after: always;
    background: #fff !important;
    color: #000 !important;
  }

  .controls {
    display: none;
  }
}