/* =========================================================
   Mobile App Development · Lecture deck styles
   All sizes inside .canvas use cqw so a slide scales as one unit.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg: #070B14;
  --bg-elev: #0D1424;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --brd: rgba(255, 255, 255, 0.09);
  --brd-strong: rgba(255, 255, 255, 0.16);
  --text: #E8EEF7;
  --muted: #8C9BB3;
  --faint: #5E6D86;

  --navy: #02569B;
  --sky: #13B9FD;
  --dart: #0175C2;
  --warm: #FFC857;
  --ok: #4ADE80;
  --bad: #F87171;

  --grad: linear-gradient(135deg, #13B9FD 0%, #0175C2 55%, #02569B 100%);
  --grad-text: linear-gradient(120deg, #5FD3FF 0%, #13B9FD 40%, #2F8BFF 100%);
  --sky-tint: rgba(19, 185, 253, 0.11);
  --sky-brd: rgba(19, 185, 253, 0.28);

  --glow-a: rgba(19, 185, 253, 0.16);
  --glow-b: rgba(2, 86, 155, 0.34);
  --grid-line: rgba(255, 255, 255, 0.035);
  --shadow: 0 1.6cqw 3.4cqw rgba(0, 0, 0, 0.38);

  --code-bg: #0A1120;
  --code-text: #D6E2F0;

  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #F4F7FB;
  --bg-elev: #FFFFFF;
  --surface: rgba(2, 86, 155, 0.035);
  --surface-2: rgba(2, 86, 155, 0.07);
  --brd: rgba(2, 86, 155, 0.13);
  --brd-strong: rgba(2, 86, 155, 0.24);
  --text: #0B1526;
  --muted: #4A5A73;
  --faint: #7C8AA0;
  --sky: #0175C2;
  --warm: #A16207;
  --ok: #15803D;
  --bad: #DC2626;
  --grad-text: linear-gradient(120deg, #0796E0 0%, #0175C2 45%, #02569B 100%);
  --sky-tint: rgba(1, 117, 194, 0.08);
  --sky-brd: rgba(1, 117, 194, 0.25);
  --glow-a: rgba(19, 185, 253, 0.14);
  --glow-b: rgba(2, 86, 155, 0.10);
  --grid-line: rgba(2, 86, 155, 0.05);
  --shadow: 0 1.4cqw 3cqw rgba(11, 21, 38, 0.14);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { background: var(--bg); }
html:not(.js) { scroll-snap-type: y mandatory; overflow-y: scroll; }
html.js, html.js body { height: 100%; overflow: hidden; }
b, strong { font-weight: 600; color: var(--text); }
code { font-family: var(--font-mono); }
ol, ul { list-style: none; }

/* ---------- Slide shell ---------- */
.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--bg);
  isolation: isolate;
}
.slide::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42vw 42vw at var(--ax, 10%) var(--ay, 6%), var(--glow-a), transparent 70%),
    radial-gradient(48vw 48vw at var(--bx, 94%) var(--by, 96%), var(--glow-b), transparent 70%);
}
.slide:nth-of-type(3n+2) { --ax: 88%; --ay: 8%; --bx: 6%; --by: 92%; }
.slide:nth-of-type(3n)   { --ax: 52%; --ay: -6%; --bx: 96%; --by: 60%; }

html.js .slide {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(3vw);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
html.js .slide.is-past { transform: translateX(-3vw); }
html.js .slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.canvas {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  container-type: size;
}
.frame {
  position: absolute;
  inset: 0;
  padding: 3.6cqw 5cqw 4.4cqw;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 72%);
}

/* ---------- Head / footer ---------- */
.head { flex: none; margin-bottom: 2cqw; }
.kicker {
  display: flex;
  align-items: center;
  gap: .8cqw;
  font: 600 .95cqw/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1cqw;
}
.kicker::before {
  content: "";
  width: 2.4cqw;
  height: .24cqw;
  border-radius: 1cqw;
  background: var(--grad);
}
.title {
  font: 700 3cqw/1.12 var(--font-head);
  letter-spacing: -.018em;
}
.title code {
  font-size: .86em;
  font-weight: 600;
  padding: .05em .3em;
  border-radius: .25em;
  background: var(--sky-tint);
  color: var(--sky);
}
.lead {
  font-size: 1.5cqw;
  line-height: 1.45;
  color: var(--muted);
  margin-top: .8cqw;
  max-width: 78cqw;
}
.lead b { color: var(--text); }
.body {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 1.6cqw;
  font-size: 1.45cqw;
  line-height: 1.5;
}
.foot {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 1.7cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85cqw;
  color: var(--faint);
  letter-spacing: .02em;
}
.foot .num { font-family: var(--font-mono); }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.muted { color: var(--muted); }
.small { font-size: 1.05cqw; line-height: 1.45; }

/* ---------- Icons ---------- */
.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.logo { stroke: none; }
.itile {
  display: grid;
  place-items: center;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: .9cqw;
  background: var(--sky-tint);
  color: var(--sky);
  font-size: 1.9cqw;
  flex: none;
}

/* ---------- Generic components ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: 1.1cqw;
  padding: 1.6cqw;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.card--hl {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    var(--grad) border-box;
}
.card h3 {
  font: 600 1.55cqw/1.25 var(--font-head);
  letter-spacing: -.01em;
}
.card p { color: var(--muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5cqw;
  font: 600 .82cqw/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky);
  padding: .45cqw .8cqw;
  border-radius: 99px;
  background: var(--sky-tint);
  border: 1px solid var(--sky-brd);
  white-space: nowrap;
}
.badge--warm { color: var(--warm); background: rgba(255, 200, 87, .1); border-color: rgba(255, 200, 87, .32); }
.badge--ok { color: var(--ok); background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .3); }

.chips { display: flex; flex-wrap: wrap; gap: .7cqw; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .6cqw;
  padding: .55cqw 1.05cqw;
  border-radius: 99px;
  border: 1px solid var(--brd);
  background: var(--surface);
  font-size: 1.05cqw;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
.chip .ico { font-size: 1.2cqw; color: var(--sky); }
.avatar {
  display: grid;
  place-items: center;
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font: 700 .75cqw/1 var(--font-head);
}

kbd {
  font: 600 .82em/1 var(--font-mono);
  padding: .22em .48em;
  border-radius: .35em;
  background: var(--surface-2);
  border: 1px solid var(--brd-strong);
  border-bottom-width: 2px;
  color: var(--text);
  white-space: nowrap;
}
.path {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: .1em .42em;
  border-radius: .35em;
  background: var(--sky-tint);
  color: var(--sky);
  border: 1px solid var(--sky-brd);
  white-space: nowrap;
}

.steps { counter-reset: s; display: grid; gap: .85cqw; align-content: start; }
.steps > li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2.1cqw 1fr;
  gap: 1cqw;
  align-items: start;
}
.steps > li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 2.1cqw;
  height: 2.1cqw;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font: 700 .95cqw/1 var(--font-head);
}
.steps--tight { gap: .6cqw; }

.callout {
  display: flex;
  gap: 1cqw;
  align-items: flex-start;
  padding: 1cqw 1.3cqw;
  border-radius: .9cqw;
  border: 1px solid var(--brd);
  background: var(--surface);
  font-size: 1.12cqw;
  line-height: 1.45;
}
.callout > .ico { font-size: 1.6cqw; margin-top: .05cqw; color: var(--sky); }
.callout--warn { border-color: rgba(255, 200, 87, .35); background: rgba(255, 200, 87, .07); }
.callout--warn > .ico { color: var(--warm); }
.callout--ok { border-color: rgba(74, 222, 128, .32); background: rgba(74, 222, 128, .07); }
.callout--ok > .ico { color: var(--ok); }
.callout--info { border-color: var(--sky-brd); background: var(--sky-tint); }

.todo {
  outline: 1px dashed var(--warm);
  outline-offset: .25cqw;
  background: rgba(255, 200, 87, .08);
  border-radius: .3cqw;
  padding: 0 .3cqw;
}

/* ---------- Terminal / code ---------- */
.term {
  background: var(--code-bg);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .9cqw;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--code-text);
}
.term__bar {
  display: flex;
  align-items: center;
  gap: .45cqw;
  padding: .65cqw .9cqw;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font: 500 .8cqw/1 var(--font-body);
  color: #8C9BB3;
}
.term__bar i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #FF5F57; }
.term__bar i:nth-child(2) { background: #FEBC2E; }
.term__bar i:nth-child(3) { background: #28C840; }
.term__bar span { margin-left: .6cqw; }
.term__bar .grow { flex: 1; }
.term pre {
  margin: 0;
  padding: 1cqw 1.2cqw;
  font: 400 1.14cqw/1.6 var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}
.term pre > span.ln { display: block; }
.t-p { color: #13B9FD; }
.t-c { color: #6B7A93; }
.t-ok { color: #4ADE80; }
.t-bad { color: #F87171; }
.t-warn { color: #FFC857; }
.t-dim { color: #8C9BB3; }
.t-b { color: #fff; font-weight: 600; }
.cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  background: #13B9FD;
  vertical-align: -.15em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Entrance stagger ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(1.4cqw); }
  to { opacity: 1; transform: none; }
}
html.js .slide.is-active .stagger > * {
  animation: rise .6s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

/* =========================================================
   Slide-specific layouts
   ========================================================= */

/* 1 · Title */
.frame--title {
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  align-items: center;
  gap: 3cqw;
}
.hero {
  font: 700 4.3cqw/1.06 var(--font-head);
  letter-spacing: -.028em;
  margin-bottom: 1.4cqw;
}
.lead--hero { font-size: 1.65cqw; margin: 0 0 2.4cqw; }
.title-right { position: relative; height: 40cqw; }
.logo-glow {
  position: absolute;
  top: 6%;
  left: 18%;
  width: 26cqw;
  height: 26cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 185, 253, .38), transparent 65%);
  filter: blur(1.5cqw);
}
.logo--hero {
  position: absolute;
  top: 2cqw;
  left: 12cqw;
  width: 18cqw;
  height: 23cqw;
  filter: drop-shadow(0 1.5cqw 2.5cqw rgba(2, 86, 155, .55));
  animation: drift 10s ease-in-out infinite;
}
@keyframes drift { 50% { transform: translateY(-1cqw) rotate(-2deg); } }
.term--title {
  position: absolute;
  left: 0;
  right: 1cqw;
  bottom: 1cqw;
}
.term--title pre { font-size: .98cqw; }
.keys {
  margin-top: 2.2cqw;
  font-size: .95cqw;
  color: var(--faint);
}
.keys kbd { font-size: .8cqw; }

/* 2 · Journey */
.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4cqw;
  align-content: start;
  align-self: center;
}
.journey::before {
  content: "";
  position: absolute;
  top: 3.2cqw;
  left: 10%;
  right: 10%;
  height: .2cqw;
  background: var(--grad);
  opacity: .55;
}
.stop { display: grid; justify-items: center; text-align: center; gap: .5cqw; }
.stop__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--brd-strong);
  color: var(--sky);
  font-size: 2.7cqw;
}
.stop__n {
  position: absolute;
  top: -.5cqw;
  right: -.5cqw;
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font: 700 .85cqw/1.9cqw var(--font-head);
  text-align: center;
}
.stop h3 { font: 600 1.65cqw/1.25 var(--font-head); margin-top: 1cqw; }
.stop p { font-size: 1.28cqw; line-height: 1.4; color: var(--muted); max-width: 16cqw; }
.goal { align-self: end; }
.goal.callout { font-size: 1.35cqw; padding: 1.4cqw 1.6cqw; }
.goal.callout > .ico { font-size: 2cqw; }

/* 3 · Toolkit */
.tools { grid-template-columns: repeat(4, 1fr); }
.tool { display: flex; flex-direction: column; gap: .9cqw; }
.tool__src { margin-top: auto; padding-top: .9cqw; border-top: 1px solid var(--brd); font: 500 1cqw/1.3 var(--font-mono); color: var(--sky); }
.tool__n {
  position: absolute;
  top: 1.2cqw;
  right: 1.4cqw;
  font: 600 1.6cqw/1 var(--font-mono);
  color: var(--faint);
  opacity: .7;
}
.tool p { font-size: 1.3cqw; line-height: 1.45; }
.tool .logo { width: 2.2cqw; height: 2.6cqw; }
.reqs {
  display: grid;
  grid-template-columns: auto repeat(5, 1fr);
  gap: 1.4cqw;
  align-items: center;
  padding: 1.2cqw 1.6cqw;
}
.reqs h4 { font: 600 1.2cqw/1.2 var(--font-head); }
.req { display: flex; align-items: center; gap: .7cqw; font-size: 1.02cqw; line-height: 1.35; }
.req .ico { font-size: 1.6cqw; color: var(--sky); }
.stack { display: grid; gap: 1.2cqw; align-content: start; }

/* 4 · Git & VS Code */
.two { grid-template-columns: 1fr 1fr; }
.stepcard { display: grid; gap: 1.3cqw; align-content: start; }
.stepcard__top { display: flex; align-items: center; gap: 1cqw; }
.stepcard__top h3 { margin-top: .3cqw; }
.ext {
  display: grid;
  grid-template-columns: 3.4cqw 1fr auto;
  gap: 1cqw;
  align-items: center;
  padding: 1cqw 1.2cqw;
  border-radius: .8cqw;
  background: var(--code-bg);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--code-text);
  box-shadow: var(--shadow);
}
.ext .logo { width: 2.8cqw; height: 3.4cqw; }
.ext h4 { font: 600 1.15cqw/1.3 var(--font-body); color: #fff; }
.ext small { display: block; font-size: .85cqw; color: #8C9BB3; line-height: 1.4; }
.ext small b { color: #2AAAFF; font-weight: 600; }
.btn-mock {
  display: inline-block;
  background: #0078D4;
  color: #fff;
  font: 600 .88cqw/1 var(--font-body);
  padding: .55cqw 1cqw;
  border-radius: .3cqw;
  white-space: nowrap;
}
.btn-mock--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #D6E2F0; }

/* 5 · Flutter SDK via VS Code */
.sdk { grid-template-columns: 1fr 1.05fr; grid-template-rows: 1fr auto; }
.sdk .steps { font-size: 1.36cqw; }
.mock-col { display: grid; gap: 1cqw; align-content: start; }
.palette {
  background: #181C24;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .8cqw;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: #C9D4E3;
}
.palette__input {
  margin: .7cqw;
  padding: .6cqw .9cqw;
  font: 400 1.05cqw/1.3 var(--font-mono);
  color: #fff;
  border: 1px solid #0078D4;
  border-radius: .35cqw;
  background: #10141B;
}
.palette__item {
  display: flex;
  justify-content: space-between;
  padding: .55cqw 1.3cqw;
  font-size: 1.02cqw;
}
.palette__item small { color: #6B7A93; font-size: .85cqw; }
.palette__item mark { background: none; color: #2AAAFF; font-weight: 600; }
.palette__item.is-sel { background: #04395E; color: #fff; box-shadow: inset 0 0 0 1px #0078D4; }
.toast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4cqw .8cqw;
  align-items: center;
  padding: .85cqw 1cqw;
  background: #20252F;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .6cqw;
  font-size: .95cqw;
  line-height: 1.4;
  color: #D6E2F0;
  box-shadow: var(--shadow);
}
.toast > .ico { color: #2AAAFF; font-size: 1.3cqw; }
.toast--ok > .ico { color: #4ADE80; }
.toast__btns { grid-column: 2; display: flex; gap: .5cqw; }
.sdk__bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.6cqw; }

/* 6 · Android Studio */
.android { grid-template-columns: 1.05fr .95fr; }
.win {
  background: #1E1F22;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .8cqw;
  overflow: hidden;
  color: #DFE1E5;
  box-shadow: var(--shadow);
  align-self: start;
}
.win__title {
  padding: .75cqw 1.2cqw;
  font: 500 .9cqw/1 var(--font-body);
  color: #9DA0A8;
  background: #2B2D30;
  border-bottom: 1px solid #393B40;
}
.win__title b { color: #DFE1E5; }
.tabs { display: flex; gap: 1.6cqw; padding: 0 1.2cqw; border-bottom: 1px solid #393B40; }
.tab { padding: .75cqw 0; font-size: .98cqw; color: #9DA0A8; }
.tab.is-on { color: #fff; box-shadow: inset 0 -2px 0 #3574F0; }
.checks { padding: .9cqw 1.2cqw; display: grid; gap: .5cqw; }
.checks li {
  display: flex;
  align-items: center;
  gap: .8cqw;
  font-size: 1.05cqw;
  padding: .2cqw .5cqw;
  margin: 0 -.5cqw;
  border-radius: .4cqw;
}
.cbox {
  display: grid;
  place-items: center;
  width: 1.25cqw;
  height: 1.25cqw;
  border-radius: .22cqw;
  background: #3574F0;
  color: #fff;
  font-size: .9cqw;
}
.cbox .ico { stroke-width: 3; }
.checks li.is-key { background: rgba(255, 200, 87, .12); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .35); }
.checks li .flag { margin-left: auto; color: #FFC857; font-size: .8cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.win__foot {
  display: flex;
  justify-content: flex-end;
  gap: .6cqw;
  padding: .8cqw 1.2cqw;
  border-top: 1px solid #393B40;
}
.wbtn { font-size: .88cqw; padding: .45cqw 1.1cqw; border-radius: .3cqw; border: 1px solid #4E5157; color: #DFE1E5; }
.wbtn--pri { background: #3574F0; border-color: #3574F0; color: #fff; }

/* 7 · Devices */
.devices { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
.option { display: grid; gap: 1cqw; align-content: start; }
.option__top { display: flex; align-items: center; gap: 1cqw; }
.option__top p { font-size: 1.1cqw; }
.option .steps { font-size: 1.38cqw; line-height: 1.45; gap: 1cqw; }
.option .steps > li::before { width: 2cqw; height: 2cqw; font-size: .9cqw; }
.option .steps > li { grid-template-columns: 2cqw 1fr; }
.tips { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }

/* 8 · flutter doctor */
.doctor { grid-template-columns: 1.4fr .85fr; }
.doctor .term pre { font-size: 1.1cqw; line-height: 1.6; }
.legend { display: grid; gap: .9cqw; align-content: start; }
.legend__row { display: flex; align-items: center; gap: 1cqw; font-size: 1.32cqw; }
.legend .callout { font-size: 1.22cqw; }
.legend__sym {
  display: grid;
  place-items: center;
  width: 3.2cqw;
  height: 2.3cqw;
  border-radius: .5cqw;
  font: 600 1.05cqw/1 var(--font-mono);
  background: var(--code-bg);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* 9 · Mac compare table */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.38cqw;
  line-height: 1.4;
  border: 1px solid var(--brd);
  border-radius: 1cqw;
  overflow: hidden;
  background: var(--surface);
}
.tbl th, .tbl td {
  padding: 1.05cqw 1.5cqw;
  text-align: left;
  border-bottom: 1px solid var(--brd);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl thead th {
  font: 600 .92cqw/1.2 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
.tbl thead th .ico { font-size: 1.15cqw; vertical-align: -.2em; margin-right: .4cqw; color: var(--sky); }
.tbl td:first-child { font-weight: 600; width: 26%; }
.tbl .same { color: var(--ok); font-weight: 500; }
.tbl .same .ico { vertical-align: -.15em; margin-right: .3cqw; }
.mac1 { grid-template-rows: auto auto; align-content: start; }

/* 10 · iPhone extras */
.ios { grid-template-columns: .9fr 1.1fr; }
.ios .term pre { font-size: 1.04cqw; }

/* 11 · AI prompt */
.ai { grid-template-rows: 1fr auto; }
.prompt { display: flex; flex-direction: column; min-height: 0; }
.prompt .term__bar { padding: .55cqw .9cqw; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .5cqw;
  font: 600 .9cqw/1 var(--font-body);
  padding: .5cqw 1cqw;
  border-radius: .45cqw;
  background: var(--grad);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform .15s var(--ease), filter .15s;
}
.copy-btn:hover { filter: brightness(1.12); }
.copy-btn:active { transform: scale(.97); }
.copy-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.copy-btn.is-done { background: #16A34A; }
.copy-btn .ico { font-size: 1.05cqw; }
.prompt pre {
  flex: 1;
  min-height: 0;
  overflow: auto;
  font: 400 1.04cqw/1.5 var(--font-mono);
  padding: 1.1cqw 1.5cqw;
}
.prompt .pn { color: #13B9FD; font-weight: 600; }
.prompt .pk { color: #FFC857; font-weight: 600; }
.prompt .pc { color: #A5E075; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.rules .callout { font-size: 1.15cqw; padding: .9cqw 1.2cqw; }
.agents { margin-top: .9cqw; }

/* 12 · Problems */
.probs { align-content: start; }
.tbl--probs td { padding: .9cqw 1.4cqw; font-size: 1.26cqw; }
.tbl--probs td:first-child { width: 40%; font-weight: 500; }
.err {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--bad);
}
.tbl--probs td:first-child .muted { font-family: var(--font-body); font-size: .92em; }
.tbl--probs code {
  font-size: .9em;
  padding: .05em .35em;
  border-radius: .3em;
  background: var(--sky-tint);
  color: var(--sky);
}

/* 13 · Create project */
.create { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
.naming {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  flex-wrap: wrap;
  padding: 1cqw 1.4cqw;
}
.naming h4 { font: 600 1.15cqw/1 var(--font-head); margin-right: .4cqw; }
.name-ok, .name-bad {
  display: inline-flex;
  align-items: center;
  gap: .45cqw;
  font: 500 1cqw/1 var(--font-mono);
  padding: .5cqw .8cqw;
  border-radius: .5cqw;
}
.name-ok { color: var(--ok); background: rgba(74, 222, 128, .08); border: 1px solid rgba(74, 222, 128, .28); }
.name-bad { color: var(--bad); background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .28); }
.name-bad small { font-family: var(--font-body); color: var(--muted); font-size: .85cqw; }

/* 14 · Project tree */
.inside { grid-template-columns: 1.1fr .9fr; }
.tree {
  font: 400 1.32cqw/1 var(--font-mono);
  padding: 1.4cqw 1.8cqw;
  display: grid;
  gap: .25cqw;
  align-content: start;
}
.tree .row {
  display: grid;
  grid-template-columns: 19cqw 1fr;
  align-items: center;
  min-height: 2.9cqw;
  padding: 0 .6cqw;
  margin: 0 -.6cqw;
  border-radius: .4cqw;
}
.tree .g { color: var(--faint); white-space: pre; }
.tree .d { color: var(--sky); font-weight: 600; }
.tree .f { color: var(--text); }
.tree .note { font: 400 1.15cqw/1.3 var(--font-body); color: var(--muted); }
.tree .row.is-star { background: rgba(255, 200, 87, .1); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .3); }
.tree .row.is-star .note { color: var(--warm); font-weight: 600; }
.tree .row.is-gear .note { color: var(--text); }
.facts { display: grid; gap: 1.1cqw; align-content: start; }
.fact { display: grid; grid-template-columns: auto 1fr; gap: 1.1cqw; align-items: start; padding: 1.3cqw 1.4cqw; }
.fact h3 { font: 600 1.45cqw/1.3 var(--font-mono); }
.fact p { font-size: 1.25cqw; line-height: 1.45; margin-top: .3cqw; }

/* 15 · Run & hot reload */
.run { grid-template-columns: 1.2fr .8fr; align-items: start; }
.run { grid-template-columns: 1.25fr .75fr; }
.run .steps { font-size: 1.5cqw; line-height: 1.5; gap: 1.4cqw; align-self: center; }
.phone-wrap { display: grid; justify-items: center; gap: 1.2cqw; position: relative; }
.phone {
  position: relative;
  width: 15.5cqw;
  aspect-ratio: 9 / 19.5;
  border-radius: 2.3cqw;
  background: #05070C;
  padding: .5cqw;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2cqw 4cqw rgba(0, 0, 0, .5);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.85cqw;
  overflow: hidden;
  background: #FEF7FF;
  color: #1D1B20;
  display: flex;
  flex-direction: column;
  font-family: Roboto, var(--font-body);
}
.phone__island {
  position: absolute;
  top: .75cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 4.2cqw;
  height: 1.15cqw;
  border-radius: 99px;
  background: #000;
  z-index: 3;
}
.app-top { background: #D0BCFF; padding: 2.6cqw 1.2cqw 1.1cqw; position: relative; }
.app-title { position: relative; height: 1.5cqw; font-size: 1.02cqw; font-weight: 500; }
.app-title span { position: absolute; inset: 0; white-space: nowrap; }
.app-title .t-new { opacity: 0; color: #21005D; font-weight: 700; }
.app-body {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .6cqw;
  padding: 0 1.2cqw;
  font-size: .82cqw;
  line-height: 1.4;
}
.app-count { font-size: 2.6cqw; font-weight: 400; line-height: 1; }
.fab {
  position: absolute;
  right: 1.1cqw;
  bottom: 1.5cqw;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: .95cqw;
  background: #EADDFF;
  color: #4F378B;
  display: grid;
  place-items: center;
  font-size: 1.7cqw;
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .2);
}
.fab .ico { stroke-width: 2.4; }
.reload-pill {
  position: absolute;
  top: 7cqw;
  right: -4.2cqw;
  z-index: 4;
  opacity: 0;
  background: #2B2414;
  border-color: rgba(255, 200, 87, .55);
  color: #FFC857;
  box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .35);
}
.diff {
  font: 400 .88cqw/1.6 var(--font-mono);
  padding: .7cqw 1cqw;
  white-space: pre;
}
.diff .del { color: #F87171; display: block; }
.diff .add { color: #4ADE80; display: block; }
html.js .slide.is-active .t-old { animation: oldTitle 7s ease-in-out infinite 1.2s; }
html.js .slide.is-active .t-new { animation: newTitle 7s ease-in-out infinite 1.2s; }
html.js .slide.is-active .reload-pill { animation: pill 7s ease-in-out infinite 1.2s; }
@keyframes oldTitle { 0%, 40% { opacity: 1; } 46%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes newTitle { 0%, 40% { opacity: 0; } 46%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pill {
  0%, 38% { opacity: 0; transform: translateY(.6cqw) scale(.9); }
  44%, 62% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(-.4cqw); }
}

/* 16 · Wrap-up */
.wrap { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.checklist { display: grid; gap: 1.4cqw; margin-top: 1.6cqw; }
.checklist li {
  display: grid;
  grid-template-columns: 2cqw 1fr;
  gap: 1cqw;
  align-items: start;
  font-size: 1.5cqw;
  line-height: 1.45;
}
.checklist li::before {
  content: "";
  width: 1.55cqw;
  height: 1.55cqw;
  margin-top: .2cqw;
  border-radius: .4cqw;
  border: 2px solid var(--sky);
}
.qa { display: grid; align-content: center; gap: 1.6cqw; }
.qa__big { font: 700 6cqw/1 var(--font-head); letter-spacing: -.03em; }
.next h4 {
  font: 600 .85cqw/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: .7cqw;
}
.next p { font: 600 1.5cqw/1.3 var(--font-head); color: var(--text); }

/* =========================================================
   Deck chrome (outside the canvas — viewport units)
   ========================================================= */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 50;
  background: rgba(127, 127, 127, .12);
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  transition: width .45s var(--ease);
}
html:not(.js) .progress { display: none; }

.notes { display: none; }
.notes-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  max-height: 34vh;
  overflow: auto;
  padding: 18px 32px 24px;
  background: rgba(7, 11, 20, .95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #E8EEF7;
  font: 400 clamp(15px, 1.35vw, 21px)/1.55 var(--font-body);
}
.notes-panel[hidden] { display: none; }
.notes-panel h4 {
  font: 600 12px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #13B9FD;
  margin-bottom: 10px;
}
.notes-panel p + p { margin-top: 8px; }

.hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 55;
  transform: translate(-50%, 8px);
  padding: 10px 18px;
  border-radius: 99px;
  background: rgba(13, 20, 36, .92);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #C9D4E3;
  font: 500 13px/1 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s, transform .4s;
}
.hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.hint kbd { font-size: 11px; color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body, html.js, html.js body { height: auto !important; overflow: visible !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide, html.js .slide {
    position: relative !important;
    width: 1920px !important;
    height: 1080px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    break-after: page;
    page-break-after: always;
  }
  .canvas { width: 1920px !important; height: 1080px !important; }
  .progress, .notes-panel, .hint, .copy-btn { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card, .notes-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Inline code in prose */
.body code, .callout code, .lead code, .small code {
  font-size: .9em;
  color: var(--sky);
}

/* =========================================================
   v2 · Screenshot + step-by-step components
   ========================================================= */

/* ---------- Real screenshots in a browser frame ---------- */
.shot {
  margin: 0;
  border-radius: .9cqw;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: start;
}
.shot__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: .45cqw;
  padding: .55cqw .8cqw;
  background: #E9EDF2;
  border-bottom: 1px solid #D5DBE3;
}
.shot__bar i { width: .65cqw; height: .65cqw; border-radius: 50%; background: #FF5F57; }
.shot__bar i:nth-child(2) { background: #FEBC2E; }
.shot__bar i:nth-child(3) { background: #28C840; }
.shot__url {
  margin-left: .8cqw;
  flex: 1;
  display: flex;
  align-items: center;
  gap: .45cqw;
  background: #fff;
  border-radius: 99px;
  padding: .3cqw .9cqw;
  font: 500 .85cqw/1.2 var(--font-body);
  color: #3C4043;
}
.shot__url .ico { font-size: .85cqw; color: #5F6368; }
.shot img { display: block; width: 100%; height: auto; }
.shot--crop img { height: var(--crop-h, 14cqw); object-fit: cover; object-position: top left; }
.shot-src { font-size: .85cqw; color: var(--faint); margin-top: .5cqw; }

/* ---------- Big readable steps ---------- */
.bigsteps { font-size: 1.5cqw; line-height: 1.45; gap: 1.3cqw; }
.bigsteps > li { grid-template-columns: 2.4cqw 1fr; }
.bigsteps > li::before { width: 2.4cqw; height: 2.4cqw; font-size: 1.05cqw; margin-top: -.1cqw; }
.bigsteps--pins > li::before { background: #FFB300; color: #1B1B1B; }
.side { display: grid; gap: 1.3cqw; align-content: start; }
.split { grid-template-columns: 1.3fr .7fr; align-items: start; }
.split--wide-right { grid-template-columns: 1.1fr .9fr; align-items: start; }
.mockcol { display: grid; gap: .9cqw; align-content: start; }
.cap {
  display: block;
  font-size: 1.3cqw;
  line-height: 1.4;
  color: var(--muted);
}
.cap b { color: var(--text); }
.n {
  display: inline-grid;
  place-items: center;
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: #FFB300;
  color: #1B1B1B;
  font: 700 .95cqw/1 var(--font-head);
  flex: none;
}
.copied { display: grid; gap: .4cqw; padding: 1.2cqw 1.4cqw; }
.copied small { font-size: 1cqw; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.copied code { font: 600 1.7cqw/1.2 var(--font-mono); color: var(--ok); }
.arrow-mid { display: grid; place-items: center; color: var(--sky); font-size: 2.6cqw; }
.arrow-mid .ico { stroke-width: 2.2; }
.row-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }

/* ---------- Windows 11 look-alike windows ---------- */
.w11 {
  position: relative;
  background: #F9F9F9;
  color: #1B1B1B;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: .7cqw;
  box-shadow: 0 1.6cqw 3.2cqw rgba(0, 0, 0, .45);
  font-family: "Segoe UI Variable Text", "Segoe UI", var(--font-body);
  font-size: .95cqw;
  line-height: 1.35;
  align-self: start;
}
.w11__title {
  display: flex;
  align-items: center;
  gap: .6cqw;
  height: 2.5cqw;
  padding-left: 1cqw;
  font-size: .88cqw;
  background: #EEF0F4;
  border-radius: .7cqw .7cqw 0 0;
  border-bottom: 1px solid #E3E3E3;
}
.w11__title .ico { font-size: 1.1cqw; }
.ctl { margin-left: auto; display: flex; height: 100%; }
.ctl span { width: 3cqw; display: grid; place-items: center; font-size: .8cqw; color: #444; }
.w11__body { padding: 1.1cqw 1.3cqw 1.2cqw; }
.w11__foot {
  display: flex;
  justify-content: flex-end;
  gap: .6cqw;
  padding: .9cqw 1.3cqw;
  background: #F0F0F0;
  border-top: 1px solid #E3E3E3;
  border-radius: 0 0 .7cqw .7cqw;
}
.w11 h5 { font-size: .95cqw; font-weight: 600; margin: 0 0 .5cqw; }
.wb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.6cqw;
  padding: .38cqw .9cqw;
  border-radius: .3cqw;
  background: #FDFDFD;
  border: 1px solid #CFCFCF;
  border-bottom-color: #B5B5B5;
  font-size: .88cqw;
  color: #1B1B1B;
  white-space: nowrap;
}
.wb--pri { background: #005FB8; border-color: #00539F; color: #fff; }
.wbtns { display: flex; justify-content: flex-end; gap: .6cqw; margin-top: .7cqw; }
.hot { outline: .22cqw solid #FFB300; outline-offset: .14cqw; border-radius: .3cqw; }
.pin {
  position: absolute;
  top: -1cqw;
  right: -1cqw;
  z-index: 5;
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: #FFB300;
  color: #1B1B1B;
  font: 700 1cqw/2cqw var(--font-head);
  text-align: center;
  box-shadow: 0 0 0 .3cqw rgba(255, 179, 0, .3), 0 .3cqw .8cqw rgba(0, 0, 0, .3);
  font-style: normal;
}
.pin--left { right: auto; left: -1cqw; }

/* lists inside dialogs */
.wlist { background: #fff; border: 1px solid #DADADA; border-radius: .25cqw; font-size: .86cqw; }
.wlist .r {
  position: relative;
  display: grid;
  grid-template-columns: 6.2cqw 1fr;
  gap: .6cqw;
  padding: .3cqw .7cqw;
  white-space: nowrap;
}
.wlist .r > span { overflow: hidden; text-overflow: ellipsis; }
.wlist .r.h { background: #F3F3F3; color: #5F5F5F; font-weight: 600; border-bottom: 1px solid #E5E5E5; }
.wlist .r.sel { background: #CCE4F7; }
.wlist--one .r { grid-template-columns: 1fr; }
.wlist .r.edit { background: #fff; box-shadow: inset 0 0 0 .15cqw #005FB8; font-family: var(--font-mono); font-weight: 600; }
.wlist .caret { display: inline-block; width: 1px; height: 1em; background: #1B1B1B; vertical-align: -.15em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.dim { opacity: .55; }

/* File Explorer */
.ex-bar {
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: .55cqw .8cqw;
  background: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
}
.ex-nav { display: flex; gap: .8cqw; color: #777; font-size: .95cqw; }
.ex-addr {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: .45cqw;
  height: 2.1cqw;
  padding: 0 .7cqw;
  background: #fff;
  border: 1px solid #DCDCDC;
  border-radius: .3cqw;
  font-size: .9cqw;
  white-space: nowrap;
}
.ex-addr .sep { color: #8A8A8A; }
.ex-addr.is-edit { border-color: #005FB8; box-shadow: inset 0 -.15cqw 0 #005FB8; }
.ex-addr .selected { background: #0078D4; color: #fff; padding: .05cqw .2cqw; font-family: "Segoe UI", var(--font-body); }
.ex-search { width: 8cqw; height: 2.1cqw; display: flex; align-items: center; gap: .4cqw; padding: 0 .6cqw; border: 1px solid #DCDCDC; background: #fff; border-radius: .3cqw; font-size: .82cqw; color: #8A8A8A; }
.ex-files { background: #fff; font-size: .9cqw; padding: .3cqw 0 .6cqw; border-radius: 0 0 .7cqw .7cqw; }
.ex-files .r {
  position: relative;
  display: grid;
  grid-template-columns: 1.6cqw 1fr 10cqw;
  align-items: center;
  gap: .5cqw;
  padding: .38cqw 1cqw;
}
.ex-files .r.h { color: #5F5F5F; font-size: .8cqw; border-bottom: 1px solid #EEE; margin-bottom: .2cqw; }
.ex-files .r.sel { background: #CCE4F7; }
.ex-files .r .t { color: #6B6B6B; font-size: .82cqw; }
.fi { width: 1.3cqw; height: 1.3cqw; stroke-width: 1.2; }
.fi--dir { fill: #FFC83D; stroke: #D9A21B; }
.fi--file { fill: #fff; stroke: #8A8A8A; }
.fi--zip { fill: #FFE7A3; stroke: #C98F00; }
.fi--bat { fill: #E6EEF8; stroke: #4F7BB5; }

/* Context menu */
.ctx {
  position: absolute;
  z-index: 4;
  width: 15cqw;
  padding: .4cqw;
  background: #F9F9F9;
  border: 1px solid #D5D5D5;
  border-radius: .6cqw;
  box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .3);
  font-size: .92cqw;
}
.ctx > div { position: relative; display: flex; align-items: center; gap: .7cqw; padding: .45cqw .8cqw; border-radius: .35cqw; }
.ctx > div.hot { background: #E1EEFB; }
.ctx hr { border: 0; border-top: 1px solid #E5E5E5; margin: .3cqw .2cqw; }
.ctx .ico { font-size: 1.05cqw; color: #444; }

/* Extract wizard */
.wiz h4 { color: #1E3287; font-size: 1.25cqw; font-weight: 400; margin: .2cqw 0 1.3cqw; }
.wiz label { display: block; font-size: .9cqw; margin-bottom: .45cqw; }
.wiz .field { display: flex; gap: .6cqw; align-items: center; }
.winput {
  position: relative;
  flex: 1;
  height: 2.2cqw;
  display: flex;
  align-items: center;
  padding: 0 .7cqw;
  background: #fff;
  border: 1px solid #C8C8C8;
  border-bottom: .15cqw solid #005FB8;
  border-radius: .3cqw;
  font-size: .95cqw;
  font-family: var(--font-mono);
  font-weight: 600;
}
.wcheck { display: flex; align-items: center; gap: .6cqw; margin-top: 1.1cqw; font-size: .88cqw; }
.wcheck i { width: 1.15cqw; height: 1.15cqw; border-radius: .2cqw; background: #005FB8; color: #fff; display: grid; place-items: center; font-style: normal; font-size: .75cqw; }

/* Start-menu search */
.wsearch { padding-bottom: .8cqw; }
.wsearch__box {
  position: relative;
  margin: 1cqw 1cqw .8cqw;
  height: 2.6cqw;
  display: flex;
  align-items: center;
  gap: .7cqw;
  padding: 0 1.1cqw;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #DADADA;
  border-bottom: .15cqw solid #005FB8;
  font-size: 1.05cqw;
}
.wsearch__box .ico { color: #555; }
.wsearch h6 { font-size: .82cqw; font-weight: 600; color: #5F5F5F; margin: .5cqw 1.3cqw .4cqw; }
.wres {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9cqw;
  margin: 0 .7cqw;
  padding: .65cqw .9cqw;
  border-radius: .45cqw;
  font-size: .98cqw;
}
.wres small { display: block; color: #5F5F5F; font-size: .8cqw; }
.wres.hot { background: #E1EEFB; }
.cp-ico {
  display: grid;
  place-items: center;
  width: 2.3cqw;
  height: 2.3cqw;
  border-radius: .45cqw;
  background: linear-gradient(135deg, #5AB0F2, #0F6CBD);
  color: #fff;
  font-size: 1.2cqw;
  flex: none;
}
.cp-ico--gray { background: linear-gradient(135deg, #9AA4B2, #5F6B7A); }

/* Slide-specific v2 layouts */
.gitvs { grid-template-columns: 1fr 1fr; }
.extract { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-items: start; }
.envs { grid-template-columns: .95fr auto 1.15fr; align-items: start; gap: 1.2cqw; }
.mac { grid-template-columns: 1.05fr .95fr; align-items: start; }
.mac .term pre { font-size: 1.04cqw; }
.studio { grid-template-columns: 1fr 1fr; align-items: start; }
.studio .win { font-size: .95cqw; }
.studio .checks li { font-size: .95cqw; padding: .12cqw .5cqw; }
.w11 b, .w11 strong, .win b { color: inherit; }

.cap .n { vertical-align: -.35cqw; margin-right: .35cqw; }
.cap .n ~ .n { margin-left: .8cqw; }

/* =========================================================
   v3 · Light-first theme + code-walk components (lectures 3+)
   ========================================================= */
html[data-theme="light"] {
  --bg: #F5F7FB;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EEF3F9;
  --brd: #DFE6EF;
  --brd-strong: #C6D2E1;
  --text: #0E1A2B;
  --muted: #4B5B73;
  --faint: #8592A6;
  --glow-a: rgba(19, 185, 253, .13);
  --glow-b: rgba(2, 86, 155, .07);
  --grid-line: rgba(2, 86, 155, .05);
  --shadow: 0 1cqw 2.6cqw rgba(15, 35, 70, .14);
}
html[data-theme="light"] .card {
  box-shadow: 0 .3cqw 1.2cqw rgba(15, 35, 70, .06);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ---------- Code panels (auto-highlighted by deck.js) ---------- */
.code { align-self: start; }
.code pre {
  font: 400 1.12cqw/1.62 var(--font-mono);
  padding: .9cqw 1.3cqw 1cqw .5cqw;
  white-space: pre;
  counter-reset: line;
  overflow: hidden;
}
.code--sm pre { font-size: 1cqw; line-height: 1.55; }
.code--lg pre { font-size: 1.3cqw; }
.code .ln {
  display: block;
  position: relative;
  padding-left: 3.2cqw;
  border-radius: .25cqw;
  transition: opacity .35s var(--ease), background .35s;
}
.code .ln::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: 0;
  width: 2.2cqw;
  text-align: right;
  color: #4B5A73;
}
.code--nonum .ln { padding-left: .8cqw; }
.code--nonum .ln::before { display: none; }
.code.has-hl .ln { opacity: .33; }
.code.has-hl .ln.is-hl { opacity: 1; background: rgba(19, 185, 253, .14); box-shadow: inset .22cqw 0 0 #13B9FD; }
.ln.g1 { background: rgba(19, 185, 253, .14); box-shadow: inset .25cqw 0 0 #13B9FD; }
.ln.g2 { background: rgba(255, 200, 87, .13); box-shadow: inset .25cqw 0 0 #FFC857; }
.ln.g3 { background: rgba(74, 222, 128, .12); box-shadow: inset .25cqw 0 0 #4ADE80; }
.ln.g4 { background: rgba(199, 146, 234, .14); box-shadow: inset .25cqw 0 0 #C792EA; }
.tk-kw { color: #569CD6; }
.tk-type { color: #4EC9B0; }
.tk-fn { color: #DCDCAA; }
.tk-str { color: #CE9178; }
.tk-num { color: #B5CEA8; }
.tk-prop, .tk-var { color: #9CDCFE; }
.tk-ann { color: #D7BA7D; }
.tk-com { color: #6A9955; }
.tk-key { color: #569CD6; }
.tk-val { color: #CE9178; }

/* ---------- Code walk: code left, explanation right ---------- */
.walk { grid-template-columns: 1.08fr .92fr; align-items: start; gap: 2.2cqw; }
.explain { display: grid; gap: 1.2cqw; align-content: start; }
.explain .big-code {
  display: inline-block;
  font: 600 1.5cqw/1.3 var(--font-mono);
  color: var(--sky);
  background: var(--sky-tint);
  border: 1px solid var(--sky-brd);
  border-radius: .6cqw;
  padding: .55cqw 1cqw;
  justify-self: start;
}
.explain .say { font-size: 1.45cqw; line-height: 1.5; }
.explain .say p + p { margin-top: .7cqw; }
.explain .say code, .explain li code { color: var(--sky); font-size: .92em; }
.defs { display: grid; gap: .8cqw; }
.def {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9cqw;
  align-items: baseline;
  font-size: 1.32cqw;
  line-height: 1.45;
}
.def > code {
  font: 600 1.15cqw/1.3 var(--font-mono);
  color: var(--sky);
  background: var(--sky-tint);
  border-radius: .4cqw;
  padding: .2cqw .6cqw;
  white-space: nowrap;
}
.legend-groups { display: grid; gap: .9cqw; align-content: start; }
.lg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4cqw 1cqw;
  padding: 1cqw 1.3cqw;
  border-radius: .9cqw;
  background: var(--surface);
  border: 1px solid var(--brd);
  border-left: .4cqw solid var(--c, #13B9FD);
}
.lg .n { background: var(--c, #13B9FD); }
.lg b { font: 600 1.35cqw/1.3 var(--font-head); }
.lg > span:not(.n) { grid-column: 2; font-size: 1.18cqw; color: var(--muted); line-height: 1.4; }
.lg > .n { align-self: center; }

/* ---------- Phones (content sized in em from --pw) ---------- */
.ph {
  --pw: 15cqw;
  position: relative;
  flex: none;
  width: var(--pw);
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--pw) * .15);
  background: #05070C;
  padding: calc(var(--pw) * .03);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 2cqw 4cqw rgba(15, 35, 70, .28);
}
.ph__scr {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pw) * .12);
  overflow: hidden;
  background: #FEF7FF;
  color: #1D1B20;
  display: flex;
  flex-direction: column;
  font-family: Roboto, "Segoe UI", var(--font-body);
  font-size: calc(var(--pw) * .062);
  line-height: 1.3;
}
.ph__island {
  position: absolute;
  top: calc(var(--pw) * .045);
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: calc(var(--pw) * .075);
  border-radius: 99px;
  background: #000;
  z-index: 3;
}
.ph__status { height: calc(var(--pw) * .16); flex: none; }
.ph--black .ph__scr { background: #000; }
.ph .appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: calc(var(--pw) * .17) 1em .8em;
  background: var(--ab, #FEF7FF);
  color: var(--abf, #1D1B20);
  font-size: 1.12em;
  font-weight: 500;
  white-space: nowrap;
}
.ph .appbar.is-center { justify-content: center; }
.ph .pbody {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: 1em;
  text-align: center;
}
.ph .err-text {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 900;
  font-size: 1.95em;
  line-height: 1.12;
  color: rgba(255, 0, 0, .82);
  text-decoration: underline double #FFFF00;
  text-underline-offset: .12em;
  text-align: left;
}
.ph .plain-text { font-size: 1.05em; }
.ph .debug {
  position: absolute;
  top: calc(var(--pw) * .1);
  right: calc(var(--pw) * -.13);
  z-index: 4;
  transform: rotate(45deg);
  background: rgba(183, 28, 28, .8);
  color: #fff;
  font: 700 calc(var(--pw) * .068)/1 var(--font-body);
  letter-spacing: .04em;
  padding: .3em 2.4em;
}
.ph .box {
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: .8em;
  padding: 1.2em 1.1em;
  background: var(--bx, #FFC107);
  color: #1D1B20;
}
.ph-cap { margin-top: 1cqw; text-align: center; font-size: 1.15cqw; color: var(--muted); }
.ph-cap b { color: var(--text); }
.phones { display: flex; gap: 3cqw; justify-content: center; align-items: flex-start; }
.ph-col { display: grid; justify-items: center; }
.ph-col .badge { margin-bottom: .9cqw; }

/* Scaffold zone wireframe */
.zone {
  display: grid;
  place-items: center;
  border: .14cqw dashed #0175C2;
  background: rgba(1, 117, 194, .07);
  color: #0175C2;
  font: 600 .78em/1.2 var(--font-mono);
  border-radius: .5em;
  text-align: center;
}
.zone--appbar { margin: calc(var(--pw) * .16) .6em .5em; height: 2.6em; }
.zone--body { flex: 1; margin: 0 .6em .5em; }
.zone--fab { position: absolute; right: 1.1em; bottom: 4.6em; width: 3.6em; height: 3.6em; border-radius: 1em; background: rgba(255, 179, 0, .14); border-color: #C98F00; color: #8A6200; font-size: .72em; }
.zone--nav { height: 2.8em; margin: 0 .6em .9em; }

/* ---------- Widget tree (org chart) ---------- */
.wt { display: flex; justify-content: center; }
.wt ul { position: relative; display: flex; justify-content: center; padding-top: 1.7cqw; }
.wt > ul { padding-top: 0; }
.wt li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.7cqw .7cqw 0;
}
.wt li::before, .wt li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 1.7cqw;
  border-top: .14cqw solid var(--brd-strong);
}
.wt li::after { right: auto; left: 50%; border-left: .14cqw solid var(--brd-strong); }
.wt li:only-child { padding-top: 0; }
.wt li:only-child::before, .wt li:only-child::after { display: none; }
.wt li:first-child::before, .wt li:last-child::after { border: 0 none; }
.wt li:last-child::before { border-right: .14cqw solid var(--brd-strong); border-radius: 0 .6cqw 0 0; }
.wt li:first-child::after { border-radius: .6cqw 0 0 0; }
.wt ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 1.7cqw;
  border-left: .14cqw solid var(--brd-strong);
}
.wt > ul > li { padding-top: 0; }
.wt > ul > li::before, .wt > ul > li::after { display: none; }
.nd {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15cqw;
  padding: .6cqw 1.2cqw;
  border-radius: .7cqw;
  background: var(--surface);
  border: 1px solid var(--brd-strong);
  box-shadow: 0 .3cqw .9cqw rgba(15, 35, 70, .08);
  font: 600 1.18cqw/1.2 var(--font-mono);
  color: var(--text);
  white-space: nowrap;
}
.nd small { font: 500 .78cqw/1.2 var(--font-body); color: var(--muted); }
.nd--ours { border-color: #FFC857; background: #FFF8E6; }
.nd--root { background: var(--surface-2); color: var(--muted); }
.nd--hl { border-color: #13B9FD; box-shadow: 0 0 0 .25cqw rgba(19, 185, 253, .18); }
.slot { font: 500 .85cqw/1 var(--font-mono); color: var(--sky); margin-bottom: .4cqw; }

/* ---------- Box model (Container) ---------- */
.bm { font-family: var(--font-mono); }
.bm__lbl { position: absolute; top: .45cqw; left: .8cqw; font: 600 .9cqw/1 var(--font-mono); }
.bm__margin {
  position: relative;
  padding: 2.6cqw;
  border: .16cqw dashed #C98F00;
  border-radius: 1cqw;
  background: rgba(255, 200, 87, .12);
}
.bm__margin > .bm__lbl { color: #8A6200; }
.bm__box {
  position: relative;
  padding: 2.6cqw;
  border-radius: .9cqw;
  background: #2196F3;
}
.bm__box > .bm__lbl { color: #fff; }
.bm__pad {
  position: relative;
  padding: 2.6cqw;
  border-radius: .6cqw;
  background: rgba(255, 255, 255, .28);
  border: .14cqw dashed rgba(255, 255, 255, .85);
}
.bm__pad > .bm__lbl { color: #fff; }
.bm__child {
  display: grid;
  place-items: center;
  min-height: 4cqw;
  border-radius: .5cqw;
  background: #fff;
  color: #0E1A2B;
  font: 600 1.15cqw/1 var(--font-mono);
}

/* ---------- Quick-check cards (click to reveal) ---------- */
.quiz { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(14.5cqw, auto); gap: 1.6cqw; align-content: start; }
.qcard {
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: 1cqw;
  padding: 1.8cqw 2cqw;
  box-shadow: 0 .3cqw 1.2cqw rgba(15, 35, 70, .06);
}
.qcard summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1cqw;
  align-items: start;
  font: 600 1.8cqw/1.35 var(--font-head);
}
.qcard summary::-webkit-details-marker { display: none; }
.qcard summary small { display: block; font: 500 1.1cqw/1.3 var(--font-body); color: var(--faint); margin-top: .4cqw; }
.qcard[open] summary small { display: none; }
.qcard summary:focus-visible { outline: 2px solid var(--sky); outline-offset: .4cqw; border-radius: .3cqw; }
.qcard .qn {
  display: grid;
  place-items: center;
  width: 3cqw;
  height: 3cqw;
  border-radius: .7cqw;
  background: var(--grad);
  color: #fff;
  font: 700 1.1cqw/1 var(--font-head);
}
.qcard .ans {
  margin: 1.2cqw 0 0 4cqw;
  padding: 1cqw 1.3cqw;
  border-radius: .7cqw;
  background: rgba(74, 222, 128, .1);
  border: 1px solid rgba(74, 222, 128, .35);
  font-size: 1.6cqw;
  line-height: 1.4;
}
.qcard .ans code { color: var(--ok); font-weight: 600; }

/* ---------- Text style samples ---------- */
.tsx { display: grid; gap: .7cqw; align-content: start; }
.tsx__row {
  display: grid;
  grid-template-columns: 19cqw 1fr;
  gap: 1.2cqw;
  align-items: center;
  padding: .7cqw 1.1cqw;
  border-radius: .7cqw;
  background: var(--surface);
  border: 1px solid var(--brd);
}
.tsx__row code { font: 600 1.05cqw/1.3 var(--font-mono); color: var(--sky); }
.tsx__row .sample { font-family: Roboto, "Segoe UI", var(--font-body); color: #1D1B20; font-size: 1.4cqw; }

/* Misc */
.row2 { grid-template-columns: 1fr 1fr; }
.center-stack { display: grid; justify-items: center; align-content: start; gap: 1cqw; }
.vs { display: grid; place-items: center; color: var(--sky); font-size: 2.4cqw; align-self: center; }
.vs .ico { stroke-width: 2.2; }
.poster {
  display: grid;
  place-items: center;
  width: 12cqw;
  height: 8.5cqw;
  border-radius: .8cqw;
  font: 700 1.6cqw/1.1 var(--font-head);
  text-align: center;
}
.poster--still { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); color: #0D47A1; }
.poster--live { background: #0E1A2B; color: #4ADE80; font-family: var(--font-mono); font-size: 3.4cqw; }
.example-list { display: flex; flex-wrap: wrap; gap: .6cqw; }

/* =========================================================
   v4 · Layout demos, phone form widgets, images (lectures 5–8)
   ========================================================= */

/* ---------- Live flex demos (main/cross axis) ---------- */
.fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; align-content: start; }
.fx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fx {
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: .8cqw;
  padding: .9cqw 1cqw 1cqw;
  box-shadow: 0 .3cqw 1cqw rgba(15, 35, 70, .05);
}
.fx > code { display: block; font: 600 1cqw/1.3 var(--font-mono); color: var(--sky); }
.fx__box {
  display: flex;
  margin-top: .7cqw;
  padding: .45cqw;
  border-radius: .5cqw;
  background: var(--surface-2);
  border: 1px dashed var(--brd-strong);
}
.fx__box--row { flex-direction: row; height: 4.2cqw; align-items: center; }
.fx__box--col { flex-direction: column; height: 13cqw; }
.fx__box i {
  flex: none;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: .4cqw;
  background: #13B9FD;
}
.fx__box i:nth-child(2) { background: #0175C2; }
.fx__box i:nth-child(3) { background: #02569B; }
.fx__box--col i { width: 2.2cqw; height: 2.2cqw; }
.fx__box--col i:nth-child(2) { width: 4.6cqw; }
.fx__box--col i:nth-child(3) { width: 3.2cqw; }

/* Axis diagram */
.axis {
  position: relative;
  display: flex;
  gap: .8cqw;
  padding: 1.4cqw;
  border-radius: .9cqw;
  background: var(--surface);
  border: 1px solid var(--brd);
}
.axis--col { flex-direction: column; align-items: flex-start; width: 16cqw; }
.axis--row { flex-direction: row; align-items: flex-start; }
.axis .blk {
  display: grid;
  place-items: center;
  min-width: 6cqw;
  height: 3.2cqw;
  padding: 0 1cqw;
  border-radius: .5cqw;
  background: var(--sky-tint);
  border: 1px solid var(--sky-brd);
  color: var(--sky);
  font: 600 1.05cqw/1 var(--font-mono);
}
.arrow {
  position: absolute;
  background: var(--c, #F59E0B);
  border-radius: 99px;
}
.arrow::after { content: ""; position: absolute; border: .7cqw solid transparent; }
.arrow--down { width: .25cqw; top: 1cqw; bottom: 1.6cqw; right: -2cqw; }
.arrow--down::after { bottom: -1.2cqw; left: 50%; transform: translateX(-50%); border-top-color: var(--c, #F59E0B); }
.arrow--right { height: .25cqw; left: 1cqw; right: 1.6cqw; bottom: -2cqw; }
.arrow--right::after { right: -1.2cqw; top: 50%; transform: translateY(-50%); border-left-color: var(--c, #F59E0B); }
.arrow-lbl { position: absolute; font: 700 1cqw/1.2 var(--font-mono); color: var(--c, #B45309); white-space: nowrap; }

/* Padding / EdgeInsets demo */
.pad-demo { display: grid; gap: .9cqw; justify-items: start; }
.pad-demo__outer {
  border-radius: .7cqw;
  background: repeating-linear-gradient(45deg, rgba(74, 222, 128, .22) 0 .5cqw, rgba(74, 222, 128, .1) .5cqw 1cqw);
  border: 1px dashed #16A34A;
}
.pad-demo__inner {
  display: grid;
  place-items: center;
  padding: .7cqw 1.4cqw;
  border-radius: .45cqw;
  background: #2196F3;
  color: #fff;
  font: 600 1cqw/1 var(--font-mono);
}

/* Expanded demo */
.exp-row { display: flex; gap: .5cqw; padding: .5cqw; border-radius: .6cqw; background: var(--surface-2); border: 1px dashed var(--brd-strong); }
.exp-row > div {
  display: grid;
  place-items: center;
  height: 4.2cqw;
  border-radius: .45cqw;
  color: #fff;
  font: 600 .95cqw/1.2 var(--font-mono);
  text-align: center;
}
.exp-fixed { width: 8cqw; flex: none; background: #94A3B8; }
.exp-1 { flex: 1; background: #13B9FD; }
.exp-2 { flex: 2; background: #0175C2; }

/* Overflow stripes */
.overflow-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6cqw;
  padding: .7cqw;
  border-radius: .5cqw;
  background: #fff;
  border: 1px solid var(--brd);
  overflow: hidden;
  font: 600 1cqw/1 var(--font-mono);
}
.overflow-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.2cqw;
  background: repeating-linear-gradient(45deg, #FFEB3B 0 .4cqw, #000 .4cqw .8cqw);
}

/* ---------- Phone UI pieces (em units) ---------- */
.ph .col { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: 1em 1.1em; }
.ph .col.is-center { justify-content: center; }
.ph .rowx { display: flex; align-items: center; gap: .6em; }
.ph .m-title { font-size: 1.55em; font-weight: 700; line-height: 1.2; color: #1D1B20; }
.ph .m-sub { font-size: .85em; color: #49454F; }
.ph .m-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .75em .8em;
  border: .1em solid #79747E;
  border-radius: .35em;
  color: #49454F;
  font-size: .9em;
  white-space: nowrap;
}
.ph .m-field .lbl {
  position: absolute;
  top: -.7em;
  left: .7em;
  padding: 0 .3em;
  background: #FEF7FF;
  color: #6750A4;
  font-size: .75em;
}
.ph .m-field.is-focus { border: .16em solid #6750A4; }
.ph .m-field .ico { width: 1.25em; height: 1.25em; color: #49454F; }
.ph .m-field .grow { flex: 1; }
.ph .m-under { padding: .7em .2em .5em; border-bottom: .1em solid #79747E; color: #49454F; font-size: .9em; }
.ph .m-filled { padding: .75em .8em; border-radius: .35em .35em 0 0; background: #E7E0EC; border-bottom: .12em solid #49454F; color: #49454F; font-size: .9em; }
.ph .m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  height: 2.7em;
  padding: 0 1.4em;
  border-radius: 99px;
  font-size: .92em;
  font-weight: 500;
  white-space: nowrap;
}
.ph .m-btn--elev { background: #F7F2FA; color: #6750A4; box-shadow: 0 .1em .3em rgba(0, 0, 0, .3); }
.ph .m-btn--fill { background: #2196F3; color: #fff; }
.ph .m-btn--text { color: #6750A4; padding: 0 .6em; }
.ph .m-btn--out { border: .1em solid #79747E; color: #6750A4; }
.ph .m-btn--dis { background: rgba(29, 27, 32, .12); color: rgba(29, 27, 32, .38); }
.ph .m-btn.is-wide { width: 100%; }
.ph .m-iconbtn { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: #49454F; }
.ph .m-iconbtn .ico { width: 1.4em; height: 1.4em; }
.ph .m-avatar {
  display: grid;
  place-items: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: var(--av, linear-gradient(135deg, #64B5F6, #1565C0));
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  overflow: hidden;
  flex: none;
}
.ph .ico-m { width: 1.4em; height: 1.4em; color: var(--ic, #49454F); flex: none; }
.ph .snack {
  position: absolute;
  left: .8em;
  right: .8em;
  bottom: 1.1em;
  padding: .9em 1em;
  border-radius: .3em;
  background: #322F35;
  color: #F5EFF7;
  font-size: .85em;
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .3);
}
.ph .m-card {
  border-radius: .8em;
  background: #fff;
  box-shadow: 0 .15em .5em rgba(0, 0, 0, .15);
  padding: 1em;
}
.ph .m-divider { height: .06em; background: #CAC4D0; }

/* A drawn "photo" (sky, sun, hills) */
.scenic {
  background:
    radial-gradient(ellipse 85% 48% at 28% 104%, #43A047 98%, transparent 100%),
    radial-gradient(ellipse 75% 40% at 88% 104%, #2E7D32 98%, transparent 100%),
    radial-gradient(circle at 74% 30%, #FFD54F 0 10%, transparent 11%),
    linear-gradient(#4FC3F7, #E1F5FE);
}
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.fit { display: grid; gap: .6cqw; justify-items: center; }
.fit code { font: 600 1.05cqw/1.3 var(--font-mono); color: var(--sky); }
.fit__frame {
  width: 13cqw;
  height: 13cqw;
  border-radius: .6cqw;
  border: .14cqw dashed var(--brd-strong);
  background-color: var(--surface-2);
  background-repeat: no-repeat;
  background-position: center;
}
.fit__img { background-image: var(--img); }

/* Icon gallery */
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.icon-card {
  display: grid;
  justify-items: center;
  gap: .6cqw;
  padding: 1.1cqw .6cqw;
  border-radius: .8cqw;
  background: var(--surface);
  border: 1px solid var(--brd);
}
.icon-card .ico { font-size: 2.6cqw; color: var(--ic, #0175C2); }
.icon-card code { font: 600 .95cqw/1.2 var(--font-mono); color: var(--muted); }

/* Button gallery */
.btn-gallery { display: grid; gap: .9cqw; }
.btn-row {
  display: grid;
  grid-template-columns: 13cqw 12cqw 1fr;
  gap: 1.2cqw;
  align-items: center;
  padding: .8cqw 1.1cqw;
  border-radius: .8cqw;
  background: var(--surface);
  border: 1px solid var(--brd);
}
.btn-row code { font: 600 1.05cqw/1.2 var(--font-mono); color: var(--sky); }
.btn-row span { font-size: 1.15cqw; color: var(--muted); }
.mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4cqw;
  height: 3cqw;
  padding: 0 1.6cqw;
  border-radius: 99px;
  font: 500 1.05cqw/1 Roboto, "Segoe UI", var(--font-body);
  justify-self: start;
  white-space: nowrap;
}
.mbtn--elev { background: #F7F2FA; color: #6750A4; box-shadow: 0 .1cqw .35cqw rgba(0, 0, 0, .3); }
.mbtn--text { color: #6750A4; }
.mbtn--out { border: .1cqw solid #79747E; color: #6750A4; }
.mbtn--icon { width: 3cqw; padding: 0; color: #49454F; }
.mbtn--icon .ico { font-size: 1.6cqw; }

/* Keyboard type chips */
.kb { display: flex; flex-wrap: wrap; gap: .35cqw; padding: .6cqw; border-radius: .6cqw; background: #D1D5DB; }
.kb span { display: grid; place-items: center; min-width: 1.9cqw; height: 2.2cqw; padding: 0 .4cqw; border-radius: .3cqw; background: #fff; font: 500 .9cqw/1 var(--font-body); color: #111; box-shadow: 0 .08cqw 0 rgba(0, 0, 0, .3); }
.kb--num { display: grid; grid-template-columns: repeat(3, 1fr); width: 10cqw; }

/* Video list on wrap-up slides */
.videos { display: grid; gap: .8cqw; }
.video {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1cqw;
  align-items: center;
  padding: .8cqw 1.1cqw;
  border-radius: .8cqw;
  background: var(--surface);
  border: 1px solid var(--brd);
  color: var(--text);
  text-decoration: none;
  font-size: 1.15cqw;
  line-height: 1.3;
}
.video:hover { border-color: var(--sky-brd); }
.video .yt { display: grid; place-items: center; width: 2.6cqw; height: 1.9cqw; border-radius: .5cqw; background: #FF0000; color: #fff; }
.video .yt .ico { font-size: 1cqw; fill: #fff; stroke: none; }
.video small { font: 600 .95cqw/1 var(--font-mono); color: var(--muted); }

/* Step tag for build-it slides */
.step-tag { display: inline-flex; gap: .5cqw; align-items: center; font: 700 .9cqw/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--grad); padding: .45cqw .9cqw; border-radius: 99px; justify-self: start; }
.fit__img { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%234FC3F7'/><stop offset='1' stop-color='%23E1F5FE'/></linearGradient></defs><rect width='400' height='250' fill='url(%23s)'/><circle cx='300' cy='70' r='28' fill='%23FFD54F'/><ellipse cx='110' cy='265' rx='220' ry='115' fill='%2343A047'/><ellipse cx='350' cy='270' rx='180' ry='100' fill='%232E7D32'/></svg>"); }
.fit { align-content: start; }

/* =========================================================
   v5 · Custom widgets (lecture 8)
   ========================================================= */

/* Yellow "this is our widget" tag on phone parts */
.ph .is-tag { position: relative; outline: .14em dashed #FFB300; outline-offset: .2em; }
.ph .is-tag::after {
  content: attr(data-tag);
  position: absolute;
  top: -.85em;
  right: .5em;
  padding: .12em .45em;
  border-radius: .3em;
  background: #FFB300;
  color: #1B1B1B;
  font: 700 .62em/1.2 var(--font-mono);
  white-space: nowrap;
}

/* Class (cookie cutter) → each use (cookies) */
.cutter { grid-template-columns: .95fr auto 1.15fr; grid-template-rows: auto auto; align-items: stretch; align-content: start; gap: 1.6cqw 1.2cqw; }
.cutter .card { display: grid; gap: 1cqw; align-content: start; }
.cutter .card .badge { justify-self: start; }
.cutter .card p { font-size: 1.3cqw; line-height: 1.45; }
.cutter > .callout { grid-column: 1 / -1; font-size: 1.3cqw; }

/* Before / after counters */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.stat { display: grid; gap: .35cqw; padding: 1.1cqw 1.4cqw; }
.stat small { font: 600 .85cqw/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat b { font: 700 2.4cqw/1.05 var(--font-head); }
.stat span { font-size: 1.1cqw; line-height: 1.35; color: var(--muted); }
.stat--bad b { color: var(--bad); }
.stat--ok b { color: var(--ok); }

/* Project tree with longer file names */
.tree--wide .row { grid-template-columns: 24cqw 1fr; }

/* =========================================================
   v6 · Meme break slides (captions drawn on the template)
   ========================================================= */
.meme-slide { grid-template-columns: auto 1fr; gap: 3cqw; align-items: center; }
.meme {
  position: relative;
  margin: 0;
  width: var(--mw, 38cqw);
  container-type: inline-size;
  border-radius: .9cqw;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.meme img { display: block; width: 100%; height: auto; }
.meme .cap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.12;
  padding: .3em;
  overflow-wrap: anywhere;
}
.meme .cap--impact {
  font-family: Impact, "Anton", "Arial Black", sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: .07em #000;
  paint-order: stroke fill;
  text-shadow: 0 0 .12em #000, 0 0 .12em #000;
  letter-spacing: .01em;
}
.meme .cap--ink { font-family: "Inter", Arial, sans-serif; font-weight: 700; color: #111; }
.meme .cap > span { min-width: 0; }
.meme .cap code { font-family: var(--font-mono); font-size: .86em; text-transform: none; }

/* Anakin & Padme (4 panels, 2 × 2) */
.meme--anakin .c1 { left: 1%; width: 48%; top: 34%; height: 15%; font-size: 4.2cqw; }
.meme--anakin .c2 { left: 51%; width: 48%; top: 34%; height: 15%; font-size: 4.2cqw; }
.meme--anakin .c3 { left: 51%; width: 48%; top: 84%; height: 15%; font-size: 4.2cqw; }

/* Gru's Plan (4 panels, text on the boards) */
.meme--gru .cap { width: 18.5%; height: 40%; font-size: 2.2cqw; }
.meme--gru .c1 { left: 28.5%; top: 7%; }
.meme--gru .c2 { left: 79.5%; top: 7%; }
.meme--gru .c3 { left: 28.5%; top: 57%; }
.meme--gru .c4 { left: 79.5%; top: 57%; }

/* This Is Fine (2 panels side by side; the bubble already says it) */
.meme--fine .c1 { left: 1%; width: 48%; top: 3%; height: 24%; font-size: 3.5cqw; }
.meme--fine .c2 { left: 1%; width: 48%; top: 73%; height: 25%; font-size: 3.1cqw; }

/* Two Buttons (portrait; labels on the two tilted plates) */
.meme--buttons .c1 { left: 6%; width: 36%; top: 7.5%; height: 9%; font-size: 6.4cqw; transform: rotate(-11deg); }
.meme--buttons .c2 { left: 44%; width: 34%; top: 4%; height: 8%; font-size: 6.4cqw; transform: rotate(-11deg); }
.meme--buttons .c3 { left: 3%; width: 94%; top: 84%; height: 12%; font-size: 6cqw; }

/* Drake (text in the white right column) */
.meme--drake .cap { left: 50%; width: 50%; height: 50%; padding: 1.2em; font-size: 4.3cqw; }
.meme--drake .c1 { top: 0; }
.meme--drake .c2 { top: 50%; }

/* Always Has Been (one wide picture) */
.meme--always .c1 { left: 1%; width: 62%; top: 2%; height: 26%; font-size: 3.6cqw; }
.meme--always .c2 { left: 56%; width: 43%; top: 80%; height: 18%; font-size: 4.2cqw; }

/* The right-hand column */
.meme-side { display: grid; gap: 1.2cqw; align-content: center; }
.meme-side .badge { justify-self: start; }
.meme-side .say { font-size: 1.5cqw; line-height: 1.5; }
.meme-link { font-size: 1cqw; color: var(--faint); }
.meme-link a { color: var(--sky); text-decoration: none; }

/* =========================================================
   Lecture 09 · Show code exactly as typed
   JetBrains Mono turns => into a single arrow glyph (and ++, != …).
   Students copy what they see, so switch those ligatures off.
   (!important: the font shorthand in .code pre would reset it.)
   ========================================================= */
code, pre, kbd, .path, .nd, .err { font-variant-ligatures: none !important; }

/* =========================================================
   v8 · Shared fixes (all decks)
   ========================================================= */
/* Show code exactly as typed: no => != == ligatures (the font shorthand resets it, hence !important) */
.canvas pre, .canvas code, .canvas kbd, .notes-panel code { font-variant-ligatures: none !important; }
/* Code inside meme captions stays readable on the light boards in dark mode */
.meme .cap--ink code { color: #0B57A0; }