/* ==========================================================================
   Lecture 01 · Mobile App Development with Flutter
   styles.css: tokens, layout, components, slide layouts, print
   Every size inside a slide canvas is in cqw, so slides scale as one unit.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, work offline) ---------- */
@font-face { font-family: "Sora"; src: url("../assets/fonts/sora-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../assets/fonts/sora-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens (dark is the default) ---------- */
:root {
  color-scheme: dark;
  --bg:            #070B14;
  --bg-elev:       #0D1424;
  --surface:       rgba(255,255,255,0.045);
  --surface-brd:   rgba(255,255,255,0.09);
  --text:          #E8EEF7;
  --text-muted:    #8C9BB3;
  --flutter-navy:  #02569B;
  --flutter-sky:   #13B9FD;
  --dart-blue:     #0175C2;
  --accent-warm:   #FFC857;
  --success:       #4ADE80;
  --grad-brand:    linear-gradient(135deg, #13B9FD 0%, #0175C2 50%, #02569B 100%);

  /* Roles derived from the palette (swapped per theme for contrast) */
  --accent-text:   var(--flutter-sky);   /* accent-coloured text */
  --icon-color:    var(--flutter-sky);
  --warm-text:     var(--accent-warm);
  --success-text:  var(--success);
  /* Gradient TEXT uses a lighter ramp: navy on --bg is only 2.6:1 */
  --grad-text:     linear-gradient(120deg, #6FD6FF 0%, #13B9FD 45%, #3D9BEF 100%);
  --grad-solid:    #13B9FD;              /* stands in for gradient text in PDFs */
  --card-hi-bg:    #0E1729;
  --pick-bg:       rgba(19,185,253,0.075);
  --icon-tint:     rgba(19,185,253,0.12);
  --warm-tint:     rgba(255,200,87,0.09);
  --todo-line:     var(--accent-warm);
  --success-tint:  rgba(74,222,128,0.10);
  --success-line:  rgba(74,222,128,0.40);
  --sky-line:      rgba(19,185,253,0.40);
  --glow-sky:      rgba(19,185,253,0.18);
  --glow-navy:     rgba(2,86,155,0.25);
  --grid-line:     rgba(255,255,255,0.04);
  --block-bg:      rgba(255,255,255,0.055);
  --block-brd:     rgba(255,255,255,0.14);
  --block-ink:     rgba(255,255,255,0.22);
  --shadow-rgb:    0,0,0;

  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 450ms;
}

[data-theme="light"] {
  color-scheme: light;
  --bg:            #F5F8FC;
  --bg-elev:       #FFFFFF;
  --surface:       rgba(2,86,155,0.04);
  --surface-brd:   rgba(2,86,155,0.12);
  --text:          #0B1526;
  --text-muted:    #4A5A73;
  /* sky (#13B9FD) is 2.1:1 on the light background, so accent text uses navy */
  --accent-text:   var(--flutter-navy);
  --icon-color:    var(--dart-blue);
  --warm-text:     #8A5A00;
  --success-text:  #166534;
  --grad-text:     linear-gradient(120deg, #0168B0 0%, #02569B 100%);
  --grad-solid:    #02569B;
  --card-hi-bg:    #FFFFFF;
  --pick-bg:       rgba(19,185,253,0.10);
  --icon-tint:     rgba(19,185,253,0.13);
  --warm-tint:     rgba(255,200,87,0.20);
  --todo-line:     #C98A00;
  --success-tint:  rgba(74,222,128,0.16);
  --success-line:  rgba(22,101,52,0.40);
  --sky-line:      rgba(1,117,194,0.40);
  --glow-sky:      rgba(19,185,253,0.16);
  --glow-navy:     rgba(2,86,155,0.10);
  --grid-line:     rgba(2,86,155,0.06);
  --block-bg:      rgba(255,255,255,0.65);
  --block-brd:     rgba(2,86,155,0.16);
  --block-ink:     rgba(2,86,155,0.22);
  --shadow-rgb:    2,40,80;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No-JS fallback: slides stack vertically and snap */
  scroll-snap-type: y mandatory;
}
body { background: var(--bg); }
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
code { font-family: var(--font-mono); font-variant-ligatures: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 4. Slide + 16:9 canvas ---------- */
.slide {
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
}
.slide__canvas {
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: size;            /* all inner sizes use cqw */
  position: relative;
}
/* Padding lives on the inner layer so its cqw values resolve against the canvas */
.slide__inner {
  position: absolute;
  inset: 0;
  padding: 4.5cqw 5.5cqw;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  font-size: 1.45cqw;
  line-height: 1.45;
}
/* Background glows: two soft radial gradients, placed per slide */
.slide__inner::before {
  content: "";
  position: absolute;
  inset: -14cqw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--g1x, 15%) var(--g1y, 20%), var(--glow-sky) 0, transparent 30cqw),
    radial-gradient(circle at var(--g2x, 85%) var(--g2y, 80%), var(--glow-navy) 0, transparent 36cqw);
}
/* Blueprint grid that fades out toward the edges */
.slide__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 45%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 45%, #000 30%, transparent 100%);
}
.slide:nth-of-type(1)  { --g1x: 78%; --g1y: 45%; --g2x: 8%;  --g2y: 92%; }
.slide:nth-of-type(2)  { --g1x: 14%; --g1y: 12%; --g2x: 90%; --g2y: 88%; }
.slide:nth-of-type(3)  { --g1x: 86%; --g1y: 14%; --g2x: 10%; --g2y: 82%; }
.slide:nth-of-type(4)  { --g1x: 88%; --g1y: 72%; --g2x: 6%;  --g2y: 18%; }
.slide:nth-of-type(5)  { --g1x: 82%; --g1y: 12%; --g2x: 18%; --g2y: 94%; }
.slide:nth-of-type(6)  { --g1x: 10%; --g1y: 16%; --g2x: 92%; --g2y: 90%; }
.slide:nth-of-type(7)  { --g1x: 86%; --g1y: 86%; --g2x: 10%; --g2y: 10%; }
.slide:nth-of-type(8)  { --g1x: 80%; --g1y: 50%; --g2x: 6%;  --g2y: 92%; }
.slide:nth-of-type(9)  { --g1x: 50%; --g1y: 4%;  --g2x: 92%; --g2y: 98%; }
.slide:nth-of-type(10) { --g1x: 16%; --g1y: 52%; --g2x: 94%; --g2y: 10%; }
.slide:nth-of-type(11) { --g1x: 50%; --g1y: 96%; --g2x: 10%; --g2y: 10%; }
.slide:nth-of-type(12) { --g1x: 90%; --g1y: 18%; --g2x: 10%; --g2y: 96%; }
.slide:nth-of-type(13) { --g1x: 10%; --g1y: 30%; --g2x: 90%; --g2y: 82%; }
.slide:nth-of-type(14) { --g1x: 50%; --g1y: 100%; --g2x: 92%; --g2y: 8%; }
.slide:nth-of-type(15) { --g1x: 80%; --g1y: 40%; --g2x: 14%; --g2y: 88%; }

.notes { display: none; }

/* ---------- 5. Slide layout template ---------- */
.slide__head { flex: none; margin-bottom: 2.2cqw; }
.kicker {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font: 600 1cqw/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.1cqw;
}
.kicker::before {
  content: "";
  flex: none;
  width: 2.5cqw;
  height: 0.28cqw;
  border-radius: 1cqw;
  background: var(--grad-brand);
}
.title {
  font: 700 3.2cqw/1.12 var(--font-head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lead {
  font-size: 1.75cqw;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 1cqw;
  max-width: 64cqw;
  text-wrap: pretty;
}
.slide__content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.6cqw;
  align-content: center;
}
.slide__foot {
  position: absolute;
  left: 5.5cqw;
  right: 5.5cqw;
  bottom: 1.7cqw;
  height: 1.6cqw;
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  font-size: 0.9cqw;
  line-height: 1;
  color: var(--text-muted);
}
.slide__foot .dot { opacity: 0.6; }
.foot__source { margin-left: auto; margin-right: 7cqw; }

/* ---------- 6. Components ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-brd);
  border-radius: 1.2cqw;
  padding: 1.8cqw;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.card--hi {
  border: max(1.5px, 0.12cqw) solid transparent;
  background:
    linear-gradient(var(--card-hi-bg), var(--card-hi-bg)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 1.6cqw 3.6cqw rgba(var(--shadow-rgb), 0.28), 0 0 4cqw rgba(19,185,253,0.10);
}
.card__title { font: 600 1.6cqw/1.25 var(--font-head); }
.card__text { color: var(--text-muted); }

.icon-tile {
  flex: none;
  width: 4cqw;
  height: 4cqw;
  border-radius: 1cqw;
  display: grid;
  place-items: center;
  background: var(--icon-tint);
  color: var(--icon-color);
}
.icon {
  width: 2.6cqw;
  height: 2.6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1.6cqw; height: 1.6cqw; }
.glyph {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyph--solid { fill: currentColor; stroke: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.5cqw 1.1cqw;
  border-radius: 99cqw;
  border: 1px solid var(--surface-brd);
  background: var(--surface);
  font-size: 1.1cqw;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
}
.chip--warm { border-color: var(--todo-line); background: var(--warm-tint); color: var(--warm-text); font-weight: 600; }
.chip--success { border-color: var(--success-line); background: var(--success-tint); color: var(--success-text); font-weight: 600; }
.chip--sky { border-color: var(--sky-line); background: var(--icon-tint); color: var(--accent-text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 0.9cqw; }
.chip .icon { width: 1.3em; height: 1.3em; flex: none; }

.stat__num {
  display: block;
  font: 700 6cqw/1 var(--font-head);
  letter-spacing: -0.03em;
}
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* keep descenders inside the clipped background */
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Placeholder for content the owner still has to supply */
.todo {
  outline: 1px dashed var(--todo-line);
  outline-offset: 0.12em;
  background: var(--warm-tint);
  border-radius: 0.3em;
  padding: 0 0.22em;
  color: var(--text);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Code block: stays dark in both themes */
.code-block {
  background: #0A1120;
  color: #E8EEF7;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1cqw;
  overflow: hidden;
  box-shadow: 0 1.6cqw 3.6cqw rgba(var(--shadow-rgb), 0.32);
}
.code-block__bar {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  padding: 0.75cqw 1.2cqw;
  background: rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.code-block__dot { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; }
.code-block__dot:nth-child(1) { background: #FF5F57; }
.code-block__dot:nth-child(2) { background: #FEBC2E; }
.code-block__dot:nth-child(3) { background: #28C840; }
.code-block__file { margin-left: 0.9cqw; font: 400 1cqw/1.2 var(--font-mono); color: #8C9BB3; }
.code-block pre {
  margin: 0;
  padding: 0.9cqw 1cqw 0.9cqw 0;
  font: 400 1.15cqw/1.6 var(--font-mono);
  font-variant-ligatures: none;
  tab-size: 2;
  counter-reset: line;
  white-space: normal;      /* only .line keeps whitespace, so source newlines add no blank rows */
}
.code-block code { display: block; }
.line { display: block; position: relative; padding-left: 4.5cqw; white-space: pre; }
.line::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: 2.05cqw;
  width: 1.6cqw;
  text-align: right;
  color: #7C8BA3;
  user-select: none;
}
.line[data-mk]::after {
  content: attr(data-mk);
  position: absolute;
  left: 0.45cqw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.45cqw;
  height: 1.45cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #13B9FD;
  color: #04121F;
  font: 600 0.92cqw/1 var(--font-mono);
  user-select: none;
  box-shadow: 0 0 0 0.25cqw rgba(19,185,253,0.18);
}
.line.is-range {
  background: linear-gradient(90deg, rgba(19,185,253,0.11), rgba(19,185,253,0.03) 70%, transparent);
  box-shadow: inset 0.22cqw 0 0 #13B9FD;
}
.line.is-range::before { color: #9FB0C8; }
.tk-kw   { color: #C792EA; }
.tk-type { color: #13B9FD; }
.tk-str  { color: #A5E075; }
.tk-fn   { color: #FFC857; }
.tk-punc { color: #8C9BB3; }
.tk-ann  { color: #F78C6C; }

/* Inline code chip (stays dark like the code block) */
.kbd {
  display: inline-block;
  font: 600 0.88em/1.3 var(--font-mono);
  padding: 0.12em 0.45em;
  border-radius: 0.35em;
  background: #0A1120;
  color: #E8EEF7;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Phone mockup, pure CSS */
.phone {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 19.5;
  padding: 0.5cqw;
  border-radius: 2.4cqw;
  background: #05070C;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2cqw 4cqw rgba(var(--shadow-rgb), 0.45),
    0 0 6cqw rgba(19,185,253,0.16);
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 1.95cqw;
  overflow: hidden;
  /* Material 3 default theme surface + onSurface */
  background: #FEF7FF;
  color: #1D1B20;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}
.phone__status {
  flex: none;
  height: 2.5cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25cqw 0 1.6cqw;
  font: 600 0.9cqw/1 var(--font-body);
}
.phone__island {
  position: absolute;
  top: 0.55cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 1.25cqw;
  border-radius: 1cqw;
  background: #000;
}
.phone__sys { display: flex; align-items: center; gap: 0.3cqw; }
.phone__bars { display: flex; align-items: flex-end; gap: 0.1cqw; height: 0.7cqw; }
.phone__bars i { display: block; width: 0.16cqw; background: #1D1B20; border-radius: 0.05cqw; }
.phone__bars i:nth-child(1) { height: 35%; }
.phone__bars i:nth-child(2) { height: 55%; }
.phone__bars i:nth-child(3) { height: 78%; }
.phone__bars i:nth-child(4) { height: 100%; }
.phone__battery {
  position: relative;
  width: 1.25cqw;
  height: 0.62cqw;
  border: 1px solid rgba(29,27,32,0.55);
  border-radius: 0.18cqw;
  padding: 0.08cqw;
}
.phone__battery::before { content: ""; display: block; height: 100%; width: 80%; background: #1D1B20; border-radius: 0.08cqw; }
.phone__battery::after { content: ""; position: absolute; right: -0.18cqw; top: 30%; width: 0.1cqw; height: 40%; background: rgba(29,27,32,0.55); border-radius: 0 0.1cqw 0.1cqw 0; }
/* AppBar: M3 surface colour, centred title (iPhone default) */
.m3-appbar {
  flex: none;
  height: 3.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1cqw;
  font: 400 1.4cqw/1.2 var(--font-body);
  letter-spacing: 0;
}
.m3-body {
  flex: 1;
  display: grid;
  place-items: center;
  padding-bottom: 2.5cqw;   /* Center() is relative to the body area */
  font: 400 0.95cqw/1.4 var(--font-body);
  letter-spacing: 0.01em;
}
.phone__home {
  position: absolute;
  bottom: 0.55cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 0.28cqw;
  border-radius: 1cqw;
  background: #1D1B20;
}

/* ---------- 7. Slide layouts ---------- */

/* Slide 1 · Title */
.hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 58fr 42fr; align-items: center; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; padding-right: 2cqw; }
.hero__title {
  font: 700 5.2cqw/1.05 var(--font-head);
  letter-spacing: -0.02em;
}
.hero__lead { font-size: 1.75cqw; margin-top: 2cqw; color: var(--text-muted); }
.hero__people { margin-top: 2.8cqw; }
.hero__people .chip { font-size: 1.2cqw; padding: 0.6cqw 1.3cqw; gap: 0.7cqw; }
.hero__people .chip::before { content: ""; width: 0.55cqw; height: 0.55cqw; border-radius: 50%; background: var(--grad-brand); }
.hero__meta { margin-top: 1.6cqw; font-size: 1.05cqw; color: var(--text-muted); }
.hero__art { position: relative; height: 100%; display: grid; place-items: center; }
.hero__glow {
  position: absolute;
  width: 32cqw;
  height: 32cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(19,185,253,0.40), rgba(19,185,253,0.12) 55%, transparent);
  animation: glow 10s ease-in-out infinite alternate;
}
.hero__logo { position: relative; width: 15cqw; height: calc(15cqw * 202 / 166); filter: drop-shadow(0 1.4cqw 2.6cqw rgba(2,86,155,0.45)); }
.wblock {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.8cqw;
  border-radius: 1cqw;
  background: var(--block-bg);
  border: 1px solid var(--block-brd);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: drift var(--t, 10s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
.wblock i { display: block; border-radius: 0.3cqw; background: var(--block-ink); }
.wblock--1 { top: 9%;  left: 4%;   width: 10cqw; --t: 9s;  --dx: 0.6cqw; --dy: -0.9cqw; }
.wblock--1 i:nth-child(1) { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; flex: none; }
.wblock--1 span { flex: 1; display: grid; gap: 0.4cqw; }
.wblock--1 span i:nth-child(1) { height: 0.45cqw; width: 85%; }
.wblock--1 span i:nth-child(2) { height: 0.45cqw; width: 55%; }
.wblock--2 { top: 16%; right: 2%;  width: 7cqw; height: 2.8cqw; justify-content: center; --t: 11s; --dx: -0.7cqw; --dy: 0.8cqw; --d: -3s; }
.wblock--2 i { width: 70%; height: 0.5cqw; }
.wblock--3 { bottom: 15%; left: 0%; width: 6.4cqw; height: 3.2cqw; --t: 12s; --dx: 0.8cqw; --dy: 0.6cqw; --d: -5s; }
.wblock--3 i { width: 100%; height: 1.4cqw; border-radius: 1cqw; position: relative; }
.wblock--3 i::after { content: ""; position: absolute; right: 0.2cqw; top: 0.2cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--flutter-sky); }
.wblock--4 { bottom: 7%; right: 8%; width: 9cqw; height: 6cqw; flex-direction: column; align-items: stretch; --t: 10s; --dx: -0.5cqw; --dy: -0.8cqw; --d: -2s; }
.wblock--4 i:nth-child(1) { flex: 1; background: linear-gradient(135deg, rgba(19,185,253,0.35), rgba(2,86,155,0.35)); }
.wblock--4 i:nth-child(2) { height: 0.45cqw; width: 60%; }
.wblock--5 { top: 50%; right: -1%; width: 3.6cqw; height: 3.6cqw; justify-content: center; --t: 8s; --dx: 0.5cqw; --dy: 0.9cqw; --d: -4s; }
.wblock--5 i { width: 1.6cqw; height: 1.6cqw; border-radius: 0.4cqw; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 0.6cqw), var(--dy, -0.8cqw), 0); }
}
@keyframes glow {
  from { transform: scale(0.94); opacity: 0.8; }
  to   { transform: scale(1.06); opacity: 1; }
}

/* Slide 2 · Instructors */
.instructors { align-content: center; row-gap: 2.4cqw; }
.person {
  grid-column: span 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.8cqw;
  padding: 2cqw 2.2cqw;
}
.avatar {
  width: 6.6cqw;
  height: 6.6cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 2.4cqw/1 var(--font-head);
  letter-spacing: -0.02em;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0175C2, #02569B);
  box-shadow: 0 0 0 0.35cqw var(--icon-tint), 0 0 0 0.45cqw var(--sky-line);
  object-fit: cover;
}
.person__name { font: 600 1.95cqw/1.2 var(--font-head); }
.person__day { margin-top: 1.2cqw; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1cqw; }
.person__day .chip { font-size: 1.2cqw; }
.person__time { font: 500 1.3cqw/1.2 var(--font-mono); color: var(--text-muted); }
.week { grid-column: 1 / -1; }
.week__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2cqw; }
.day {
  height: 6cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  border-radius: 1cqw;
  border: 1px dashed var(--surface-brd);
  color: var(--text-muted);
  font: 600 1.5cqw/1 var(--font-head);
}
.day.is-on {
  color: var(--text);
  border: max(1.5px, 0.12cqw) solid transparent;
  background:
    linear-gradient(var(--card-hi-bg), var(--card-hi-bg)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 0 3cqw rgba(19,185,253,0.12);
}
.day__who {
  width: 3.2cqw;
  height: 3.2cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 1.15cqw/1 var(--font-head);
  color: #FFFFFF;
  background: linear-gradient(135deg, #0175C2, #02569B);
}
.week__caption { margin-top: 1.3cqw; text-align: center; font-size: 1.35cqw; color: var(--text-muted); }
.contact {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  font-size: 1.3cqw;
  color: var(--icon-color);
}
.contact span { color: var(--text); }

/* Slide 3 · The mobile problem */
.bullets { display: grid; gap: 0.6cqw; font-size: 1.6cqw; line-height: 1.4; }
.bullets li { position: relative; padding-left: 1.8cqw; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.65cqw;
  height: 0.65cqw;
  border-radius: 0.18cqw;
  background: var(--grad-brand);
}
.problem { align-content: center; }
.problem__bullets { margin-top: 1.6cqw; }
.problem__pair { grid-column: span 5; display: grid; gap: 1.2cqw; }
.platform { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5cqw; padding: 1.4cqw 1.8cqw; }
.platform p { font-size: 1.35cqw; color: var(--text-muted); margin-top: 0.2cqw; }
.platform strong { color: var(--text); font-weight: 600; }
.platform .chip { font-family: var(--font-mono); font-weight: 600; }
.arrow {
  position: relative;
  align-self: center;
  height: 0.32cqw;
  border-radius: 1cqw;
  background: var(--grad-brand);
}
.arrow::after {
  content: "";
  position: absolute;
  right: -0.2cqw;
  top: 50%;
  width: 1.3cqw;
  height: 1.3cqw;
  transform: translateY(-50%);
  background: #02569B;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
}
[data-theme="light"] .arrow::after { background: #02569B; }
.problem__arrow { grid-column: span 2; margin: 0 0.6cqw; }
.problem__xp { grid-column: span 5; display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.4cqw; }
.problem__xp .card__title { font-size: 2cqw; }
.xp__line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8cqw; font: 600 1.65cqw/1.3 var(--font-head); }
.xp__line .glyph { color: var(--icon-color); width: 1.4em; }

/* Slide 4 · What is Flutter? */
.whatis__logo { position: absolute; top: 4.4cqw; right: 5.5cqw; width: 5cqw; height: calc(5cqw * 202 / 166); }
.flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6cqw minmax(0, 1fr) 3.6cqw minmax(0, 1fr);
  align-items: stretch;
  gap: 1cqw;
}
.flow .arrow { align-self: center; }
.step { display: flex; flex-direction: column; gap: 0.9cqw; padding: 2cqw 1.9cqw; }
.step__num { position: absolute; top: 1.6cqw; right: 1.8cqw; font: 600 1.1cqw/1 var(--font-mono); color: var(--text-muted); }
.step__title { font: 600 1.9cqw/1.2 var(--font-head); margin-top: 0.5cqw; }
.step__sub { font-size: 1.4cqw; color: var(--text-muted); }
.step__sub--one { white-space: nowrap; }
.facts { grid-column: 1 / -1; margin-top: 1.4cqw; }
.facts .chip { font-size: 1.2cqw; padding: 0.6cqw 1.3cqw; }
.facts .chip::before { content: ""; width: 0.5cqw; height: 0.5cqw; border-radius: 50%; background: var(--flutter-sky); }

/* Slide 5 · Glossary */
.terms { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.term { display: flex; flex-direction: column; gap: 1.1cqw; padding: 1.8cqw 2cqw; }
.term__top { display: flex; align-items: center; gap: 1.2cqw; }
.term__name { font: 600 2.2cqw/1.1 var(--font-head); color: var(--accent-text); }
.term__top .chip { margin-left: auto; font-size: 1cqw; padding: 0.4cqw 0.9cqw; }
.term p { font-size: 1.45cqw; line-height: 1.42; text-wrap: pretty; }
.card__text { text-wrap: pretty; }

/* Slide 6 · Why Flutter? */
.reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.reason { display: flex; flex-direction: column; gap: 1cqw; padding: 2cqw 2.2cqw; }
.reason .card__title { font-size: 1.75cqw; margin-top: 0.4cqw; }

/* Slide 7 · Your first Flutter app */
.firstapp { grid-template-columns: 55.4cqw minmax(0, 1fr); align-content: stretch; align-items: stretch; }
.firstapp__code { display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw; min-height: 0; }
.firstapp__code .chip { font-size: 1.1cqw; }
.firstapp__code .code-block { align-self: stretch; }
.firstapp .code-block pre { font-size: 1.25cqw; line-height: 1.42; }
.firstapp__side { display: flex; align-items: center; justify-content: space-between; gap: 1.4cqw; min-height: 0; }
.legend { flex: 1; display: grid; gap: 1.4cqw; font-size: 1.15cqw; line-height: 1.35; }
.legend li { display: flex; gap: 0.8cqw; align-items: flex-start; }
.legend__mk {
  flex: none;
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #13B9FD;
  color: #04121F;
  font: 600 0.95cqw/1 var(--font-mono);
}
.legend code { display: block; font-size: 1.05cqw; font-weight: 600; color: var(--accent-text); margin-bottom: 0.2cqw; }
.legend div span { color: var(--text-muted); }
.firstapp__phone { height: 35cqw; flex: none; }

/* Slide 8 · Comparison table */
.compare-wrap { grid-column: 1 / -1; position: relative; }
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 1.35cqw;
  line-height: 1.35;
}
.compare .c-label { width: 19%; }
.compare th, .compare td {
  padding: 1.1cqw 1.6cqw;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--surface-brd);
}
.compare thead th { font: 600 1.7cqw/1.2 var(--font-head); padding-top: 1.7cqw; padding-bottom: 1.2cqw; }
.compare tbody th { font: 600 1.3cqw/1.3 var(--font-head); color: var(--text-muted); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare .is-pick { position: relative; background: var(--pick-bg); border-left: 1px solid var(--sky-line); border-right: 1px solid var(--sky-line); }
.compare thead .is-pick { border-radius: 1cqw 1cqw 0 0; color: var(--text); }
.compare thead .is-pick::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 0.32cqw;
  border-radius: 1cqw 1cqw 0 0;
  background: var(--grad-brand);
}
.compare tbody tr:last-child .is-pick { border-radius: 0 0 1cqw 1cqw; border-bottom: 1px solid var(--sky-line); }
.compare td.is-pick { font-weight: 600; }
.compare .glyph { color: var(--warm-text); margin-left: 0.3em; }
.badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  padding: 0.35cqw 1cqw;
  border-radius: 99cqw;
  background: var(--accent-warm);
  color: #1F1500;
  font: 600 1.05cqw/1.2 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0.5cqw 1.2cqw rgba(255,200,87,0.25);
}
.takeaway {
  grid-column: 1 / -1;
  margin-top: 1cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 1.6cqw;
}
.takeaway::before { content: ""; flex: none; width: 0.35cqw; align-self: stretch; border-radius: 1cqw; background: var(--grad-brand); }
.takeaway strong { font-weight: 600; color: var(--accent-text); }

/* Slide 9 · Who uses Flutter? */
.users { align-items: center; }
.users__stat { grid-column: span 4; padding-right: 2cqw; }
.users__stat .stat__num { margin-bottom: 1.2cqw; }
.users__label { font: 600 1.75cqw/1.3 var(--font-head); }
.users__source { margin-top: 1.2cqw; font-size: 0.95cqw; color: var(--text-muted); }
.users__bar { width: 6cqw; height: 0.3cqw; border-radius: 1cqw; background: var(--grad-brand); margin: 1.6cqw 0; }
.wordmarks {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 8cqw;
  gap: 1.2cqw;
}
.wordmark {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1cqw;
  font: 600 1.55cqw/1.2 var(--font-head);
  letter-spacing: -0.01em;
}
.wordmark--wide { grid-column: span 2; }

/* Slide 10 · Flutter in Libya */
.libya { align-items: center; }
.libya__stmt { grid-column: span 7; padding-right: 2cqw; font: 600 2.9cqw/1.25 var(--font-head); letter-spacing: -0.01em; text-wrap: balance; }
.libya__most { display: block; margin-bottom: 0.4cqw; font: 700 8cqw/1 var(--font-head); letter-spacing: -0.03em; }
.libya__card { grid-column: span 5; display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.6cqw; }
.libya__card p { font: 600 1.9cqw/1.35 var(--font-head); text-wrap: balance; }
.closing { grid-column: 1 / -1; margin-top: 2.4cqw; text-align: center; font: 700 2cqw/1.3 var(--font-head); }

/* Slide 11 · Learn by building */
.lead-row { display: flex; align-items: center; gap: 2cqw; margin-top: 1cqw; }
.lead-row .lead { margin-top: 0; max-width: 52cqw; }
.lead-row .chip { flex: none; font-size: 1.15cqw; padding: 0.6cqw 1.2cqw; }
.exams { align-content: center; }
.exam { grid-column: span 6; display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 3cqw; }
.exam .icon-tile { width: 5.6cqw; height: 5.6cqw; border-radius: 1.4cqw; }
.exam .icon { width: 3.2cqw; height: 3.2cqw; }
.exam__title { font: 700 3.4cqw/1.1 var(--font-head); letter-spacing: -0.02em; }
.exam--off .exam__title { color: var(--text-muted); }
.exam--off .icon-tile { background: var(--surface); color: var(--text-muted); }
.tally { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
.tally__item { display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 2.4cqw; }
.tally__num { font: 700 4.2cqw/1 var(--font-head); letter-spacing: -0.02em; }
.tally__label { font: 600 1.8cqw/1.2 var(--font-head); }
.exams__note { grid-column: 1 / -1; margin-top: 0.6cqw; text-align: center; font-size: 1.5cqw; color: var(--text-muted); }

/* Slide 12 · What you'll learn */
.learn { display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw; }
.learn__label { font: 600 1cqw/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.learn__row + .learn__label { margin-top: 1.4cqw; }
.learn__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6cqw; }
.learn__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2cqw 1.8cqw; min-height: 13cqw; }
.topic__name { font: 600 1.6cqw/1.3 var(--font-head); text-wrap: balance; }
.topic--wide { flex-direction: row; align-items: center; min-height: 0; padding: 1.6cqw 2cqw; }
.topic--wide .topic__name { font-size: 1.75cqw; }

/* Slide 13 · Class rules */
.rules { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: stretch; }
.rule { display: flex; flex-direction: column; gap: 1.1cqw; padding: 2.4cqw 2.6cqw 2.6cqw; }
.rule__num { position: absolute; top: 2.4cqw; right: 2.6cqw; font: 600 2.2cqw/1 var(--font-mono); color: var(--accent-text); }
.rule__head { display: flex; align-items: center; gap: 1.4cqw; }
.rule__title { font: 700 2.2cqw/1.2 var(--font-head); }
.rule__text { font-size: 1.6cqw; line-height: 1.4; color: var(--text-muted); text-wrap: pretty; }
.rule .mock { flex: 1; margin-top: 0.6cqw; }

/* Slide 14 · Three friends (funny slide) */
.friends { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; }
.friend { display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw 1.6cqw 2cqw; }
.friend .mock { height: 12cqw; flex: none; }
.friend__name { margin-top: 0.4cqw; font: 600 1.75cqw/1.2 var(--font-head); }
.friend__facts { margin: 0; display: grid; gap: 0.7cqw; }
.friend__facts dt { font: 600 0.9cqw/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.friend__facts dd { margin: 0.15cqw 0 0; font-size: 1.35cqw; line-height: 1.35; }
.friend__punch { font-weight: 600; color: var(--warm-text); }

/* Mock screens: drawn in HTML/CSS, look the same in both themes */
.mock {
  position: relative;
  overflow: hidden;
  border-radius: 0.9cqw;
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
.mock--term, .mock--review { background: #0A1120; color: #C9D4E5; }
.mock pre { margin: 0; padding: 0.8cqw 1cqw; font: 400 0.92cqw/1.45 var(--font-mono); font-variant-ligatures: none; white-space: pre; }
.term__bar {
  display: flex;
  align-items: center;
  gap: 0.45cqw;
  padding: 0.6cqw 1cqw;
  background: rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font: 400 0.9cqw/1.2 var(--font-mono);
  color: #8C9BB3;
}
.term__bar i { width: 0.65cqw; height: 0.65cqw; 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: 0.6cqw; }
.term__status { margin-left: auto; font-style: normal; color: #FFC857; }
.term__prompt { color: #13B9FD; }
.term__dim { color: #7C8BA3; }
.term__wait { display: inline-flex; align-items: center; gap: 0.6cqw; color: #FFC857; font-weight: 600; }
.spin {
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  border: 0.18cqw solid rgba(255,200,87,0.3);
  border-top-color: #FFC857;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Flutter's debug overflow stripes */
.mock--overflow { background: #FEF7FF; color: #1D1B20; font-family: var(--font-body); }
.ovf__bar { padding: 1.1cqw 1.2cqw 0.9cqw; font: 500 1.15cqw/1.2 var(--font-body); }
.ovf__row { display: flex; gap: 0.6cqw; width: max-content; padding: 0 1.2cqw; }
.ovf__row span { padding: 0.45cqw 1cqw; border: 1px solid #79747E; border-radius: 0.5cqw; font: 500 1cqw/1.2 var(--font-body); white-space: nowrap; }
.ovf__tape {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.5cqw;
  background: repeating-linear-gradient(135deg, #FFD600 0 0.45cqw, #000000 0.45cqw 0.9cqw);
}
.ovf__label {
  position: absolute;
  left: 1.2cqw;
  bottom: 1.1cqw;
  padding: 0.3cqw 0.6cqw;
  background: #FFD600;
  color: #000000;
  font: 600 0.9cqw/1.2 var(--font-mono);
}

/* Flutter's debug red error screen */
.mock--red { display: flex; align-items: center; padding: 1.4cqw; background: #C40000; color: #FFFF66; }
.mock--red p { font: 600 1.2cqw/1.45 var(--font-mono); }

/* Code review chat */
.mock--review { display: flex; flex-direction: column; }
.rv__code { padding: 0.8cqw 1cqw; border-bottom: 1px solid rgba(255,255,255,0.07); font: 400 0.92cqw/1.6 var(--font-mono); font-variant-ligatures: none; }
.rv__line { display: block; white-space: pre; }
.rv__ln { display: inline-block; width: 2cqw; color: #7C8BA3; }
.tk-com { color: #7C8BA3; }
.rv__chat { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.6cqw; padding: 1cqw; font-family: var(--font-body); }
.rv__msg {
  align-self: flex-start;
  max-width: 80%;
  padding: 0.55cqw 1cqw 0.65cqw;
  border-radius: 0.9cqw 0.9cqw 0.9cqw 0.2cqw;
  background: #1A2438;
  color: #E8EEF7;
  font-size: 1.15cqw;
  line-height: 1.35;
}
.rv__msg b { display: block; margin-bottom: 0.15cqw; font-size: 0.9cqw; font-weight: 600; color: #13B9FD; }
.rv__msg--you { align-self: flex-end; border-radius: 0.9cqw 0.9cqw 0.2cqw 0.9cqw; background: #0E3A5C; }
.rv__msg--you b { color: #FFC857; }
.dots { display: inline-flex; gap: 0.35cqw; padding: 0.3cqw 0; }
.dots i { width: 0.5cqw; height: 0.5cqw; border-radius: 50%; background: #C9D4E5; animation: typing 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.25cqw); }
}

/* Slide 15 · Wrap-up */
.wrap { align-items: center; }
.wrap__left { grid-column: span 7; }
.checklist { padding: 2.2cqw 2.6cqw 1.6cqw; }
.checklist__title { font: 600 2.2cqw/1.2 var(--font-head); margin-bottom: 0.5cqw; }
.checklist__intro { margin-bottom: 1cqw; font-size: 1.35cqw; color: var(--text-muted); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 1.2cqw;
  padding: 0.85cqw 0;
  border-top: 1px solid var(--surface-brd);
  font-size: 1.5cqw;
  line-height: 1.35;
}
.checklist .icon { flex: none; width: 2.2cqw; height: 2.2cqw; color: var(--success-text); margin-top: -0.1cqw; }
.item__sub { display: block; margin-top: 0.25cqw; font-size: 1.15cqw; color: var(--text-muted); }
.item__sub a { font-family: var(--font-mono); color: var(--accent-text); }
.has-caption { position: relative; display: inline-block; }
.has-caption .caption {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.35cqw;
  font: 400 1.05cqw/1.2 var(--font-body);
  color: var(--text-muted);
  white-space: nowrap;
}
.checklist li.with-caption { padding-bottom: 2.3cqw; }
.checklist .glyph { color: var(--success-text); }
.stuck { margin-top: 1.2cqw; display: flex; align-items: center; gap: 0.8cqw; font-size: 1.35cqw; color: var(--text-muted); }
.stuck .icon { color: var(--icon-color); flex: none; }
.qa { grid-column: span 5; display: flex; flex-direction: column; gap: 2cqw; padding-left: 1.6cqw; }
.qa__big { font: 700 6cqw/1.05 var(--font-head); letter-spacing: -0.02em; }
.next-card { padding: 2cqw 2.2cqw; }
.next-card__label { font: 600 1cqw/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.next-card__title { margin-top: 0.6cqw; font: 600 1.8cqw/1.3 var(--font-head); }
.qa .contact { justify-content: flex-start; }

/* ---------- 8. JS mode: one slide at a time ---------- */
html.js { scroll-snap-type: none; }
.js, .js body { height: 100%; overflow: hidden; }
.js .slide {
  position: absolute;
  inset: 0;
  height: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.js .slide.is-active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
.js .slide__inner { transform: translateX(2cqw); transition: transform var(--dur) var(--ease); }
.js .slide.is-past .slide__inner { transform: translateX(-2cqw); }
.js .slide.is-active .slide__inner { transform: none; }
/* Entrance stagger */
.js [data-anim] {
  opacity: 0;
  transform: translateY(1.2cqw);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js .slide.is-active [data-anim] {
  opacity: 1;
  transform: none;
  transition-delay: calc(140ms + var(--i, 0) * 60ms);
}

/* Chrome added by deck.js */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: max(3px, 0.35vh);
  background: rgba(127,140,160,0.14);
  pointer-events: none;
}
.progress__fill { display: block; height: 100%; width: 0; background: var(--grad-brand); transition: width var(--dur) var(--ease); }
.chrome {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.chrome__frame {
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: size;
  position: relative;
}
.counter {
  position: absolute;
  right: 5.5cqw;
  bottom: 1.7cqw;
  height: 1.6cqw;
  display: flex;
  align-items: center;
  font: 400 0.95cqw/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: opacity 300ms;
}
.counter b { font-weight: 600; color: var(--text); margin-right: 0.35em; }
.counter span { margin-left: 0.35em; }
.counter.is-hidden { opacity: 0; }
.notes-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: 30vh;
  overflow-y: auto;
  padding: clamp(14px, 1.6vw, 32px) clamp(18px, 4vw, 80px);
  background: rgba(5, 8, 15, 0.97);
  color: #E8EEF7;
  border-top: 3px solid #13B9FD;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
  font: 400 clamp(16px, 1.5vw, 30px)/1.55 var(--font-body);
}
.notes-panel[hidden] { display: none; }
.notes-panel__title {
  margin-bottom: 0.5em;
  font: 600 0.62em/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #13B9FD;
}
.notes-panel__body p + p { margin-top: 0.6em; }

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js .slide__inner,
  .js .slide.is-past .slide__inner,
  .js [data-anim] { transform: none !important; }
}

/* ---------- 10. Print / PDF: one slide per 1920x1080 page ---------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body, .js, .js body {
    height: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    background: var(--bg);
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }
  .progress, .chrome, .notes-panel, .notes { display: none !important; }
  .slide, .js .slide {
    position: relative !important;
    inset: auto !important;
    width: 1920px;
    height: 1080px !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }
  .slide:last-of-type { break-after: auto; page-break-after: auto; }
  .slide__canvas { width: 1920px; }
  .slide__inner, .js .slide .slide__inner { transform: none !important; transition: none !important; }
  .js [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
  /* Keep the PDF vector-only. Blurred shadows, filters, masks and clipped-gradient text
     are rasterised by Chrome's PDF output and show up as boxes in some PDF viewers. */
  .card, .wblock { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card--hi, .code-block, .badge, .day.is-on { box-shadow: none !important; }
  .phone { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important; }
  .hero__logo { filter: none; }
  .slide__inner::after { display: none; }   /* the tiled grid shows seams in some PDF viewers */
  .grad-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--grad-solid);
  }
}