/* Claude Zero: course styles.
   Tokens and components follow the Nhật Anh AI design system ("woodblock modern"), except the accent: this course uses
   Claude orange where the brand has jade (Nathan, 5 Oct 2026; the token names still say jade, so switching back is a
   change of values only).
   Two layouts share one DOM: .stage (16:9, 1920x1080, scaled to fit, for presenting and recording)
   and .reading (a scrolling column for phones and small windows). */


:root {
  /* design system tokens, light theme (page) */
  --paper: #f4eee1; --paper-sunken: #ebe3d0; --card: #fbf8f1;
  --ink: #0b1a2e; --ink-muted: #4a576b; --rule: #d9cfb9; --control-border: #857b69;
  --jade: #d97757; --jade-hover: #e8a084; --jade-ink: #a64b2a; --on-jade: #061323;
  --deep-wave: #8f4630; --brand-navy: #061323; --brand-cream: #f0e8d5; --brand-edge: #06132300;
  /* Claude orange: only where something means Claude (the mascot, the switch to Claude Code); jade stays the brand */
  --claude: #d97757; --on-claude: #061323;
  --highlight-band: #d9775780; --focus: #a64b2a;
  /* the slide world is always brand navy, so it carries its own dark set */
  --s-bg: #061323; --s-ink: #f0e8d5; --s-muted: #9eabbc; --s-card: #0e2139; --s-card-2: #0b1c31;
  --s-rule: #1e3350; --s-green: #ec9a7a; --s-wave: #8f4630;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --na-dur: 280ms; --na-ease: cubic-bezier(.22,.8,.24,1); --na-spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #061323; --paper-sunken: #0b1c31; --card: #0e2139;
    --ink: #efe7d4; --ink-muted: #9eabbc; --rule: #1e3350; --control-border: #61799c;
    --jade-ink: #ec9a7a; --brand-edge: #1e3350; --focus: #d97757;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #061323; --paper-sunken: #0b1c31; --card: #0e2139;
  --ink: #efe7d4; --ink-muted: #9eabbc; --rule: #1e3350; --control-border: #61799c;
  --jade-ink: #ec9a7a; --brand-edge: #1e3350; --focus: #d97757;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--jade-ink); }
code { font-family: var(--font-mono); }

/* ---------- shared marks ---------- */
.na-display { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; text-wrap: balance; }
.hl {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.5' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  padding: 0 .1em; margin: 0 -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-style: normal;
}
.hl-block {
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' d='M3 5 C52 1.5 118 4.5 197 2.5 C195 10 199 17 196.5 24 C198.5 30 196 34 198 38 C128 39.5 62 36 2.5 38.5 C4.5 31 1 23 3.5 16 C1.5 12 3.5 8 3 5Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  color: var(--on-jade); padding: 0 .14em; font-style: normal;
}
.pop .hl, .hl.pop { animation: na-sweep calc(var(--na-dur)*1.4) var(--na-spring) both; animation-delay: 220ms; }
.pop .hl-block, .hl-block.pop { animation: na-sweep calc(var(--na-dur)*1.2) var(--na-ease) both, na-thump calc(var(--na-dur)*1.4) var(--na-spring) both; animation-delay: 180ms, calc(180ms + var(--na-dur)*1.2); }
@keyframes na-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes na-thump { 0% { transform: none; } 40% { transform: scale(1.1) rotate(-2deg); } 100% { transform: none; } }
@keyframes na-pop { 0% { opacity: 0; transform: translateY(18px) scale(.9); } 100% { opacity: 1; transform: none; } }
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons (page) ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-md); padding: 12px 20px; font: 600 16px/1.2 var(--font-sans); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 150ms var(--na-ease), transform 150ms var(--na-spring); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--jade); color: var(--on-jade); }
.btn-primary:hover { background: var(--jade-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--control-border); }
.btn-secondary:hover { background: var(--paper-sunken); }

/* ---------- home and course pages (paper) ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: 24px 20px 96px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 28px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--font-sans); color: var(--ink); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.brand img.mascot { width: 46px; height: auto; border-radius: 0; }
.label { font: 500 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.hero { background: var(--brand-navy); color: var(--brand-cream); border: 1px solid var(--brand-edge); border-radius: var(--radius-xl); padding: clamp(28px, 6vw, 64px); overflow: hidden; }
.hero .label { color: #9eabbc; }
.hero h1 { font-size: clamp(36px, 6.4vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 18px; }
.hero p { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; max-width: 40em; color: #d9d2c0; margin: 0 0 26px; }
.hero .hl { color: var(--brand-cream); }
.hero-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.hero-row img.mascot { width: clamp(150px, 20vw, 240px); height: auto; }
.hero .btn-secondary { color: var(--brand-cream); border-color: #61799c; }
.hero .btn-secondary:hover { background: #0e2139; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 8px; }
.outcome { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; }
.outcome b { display: block; font: 600 17px/1.35 var(--font-sans); margin: 8px 0 6px; }
.outcome p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.part { margin-top: 48px; }
.part h2 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); margin: 6px 0 8px; }
.part > p { color: var(--ink-muted); margin: 0 0 12px; }
.lessons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lesson-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.lesson-row:hover { background: var(--paper-sunken); }
.lesson-row .n { font: 500 14px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lesson-row b { display: block; font-weight: 600; font-size: 17px; line-height: 1.35; }
.lesson-row small { color: var(--ink-muted); font-size: 14px; }
.lesson-row .tag { font: 500 12px var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.lesson-row .tag.task { color: var(--jade-ink); }
.pages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.page-card { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px; text-decoration: none; color: var(--ink); }
.page-card:hover { border-color: var(--control-border); }
.page-card b { display: block; margin: 6px 0 4px; font-size: 17px; }
.page-card span { color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.footnote { margin-top: 56px; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 760px) {
  .outcomes { grid-template-columns: 1fr; }
  .hero-row { grid-template-columns: 1fr; }
  .hero-row img.mascot { display: none; }
  .lesson-row { grid-template-columns: 40px 1fr; }
  .lesson-row .tag { grid-column: 2; }
}

/* ---------- course page articles (K1..K5) ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 24px 20px 96px; line-height: 1.65; font-size: 17px; }
.article h1 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 10px 0 16px; }
.article h2 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 26px; margin: 40px 0 10px; }
.article .note, .pg-guide .note { background: var(--paper-sunken); border-radius: var(--radius-md); padding: 14px 16px; font-size: 15px; }
.article table, .pg-guide table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.article th, .article td, .pg-guide th, .pg-guide td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.article th, .pg-guide th { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.article ol, .article ul, .pg-guide ol, .pg-guide ul { padding-left: 1.3em; }
.article li, .pg-guide li { margin: 6px 0; }
.cmd-block { position: relative; margin: 12px 0; }
.cmd-block pre { margin: 0; font: 400 15px/1.6 var(--font-mono); background: var(--brand-navy); color: var(--brand-cream); border: 1px solid var(--brand-edge); padding: 16px 96px 16px 16px; border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-btn { position: absolute; top: 10px; right: 10px; font: 600 13px var(--font-sans); background: var(--jade); color: var(--on-jade); border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.copy-btn:hover { background: var(--jade-hover); }
.copy-btn.done { background: var(--brand-cream); }

/* ---------- lesson shell ---------- */
.lesson-shell { position: fixed; inset: 0; background: #02070e; overflow: hidden; }
.lesson-shell.reading-mode { position: static; background: var(--paper); overflow: visible; }
.stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%;
  background: var(--s-bg); color: var(--s-ink); overflow: hidden;
}
.slide { position: absolute; inset: 0; padding: 96px 128px 150px; display: flex; flex-direction: column; }
/* Face-cam safe zone: Nathan's camera sits in the bottom-left corner when recording (about 360x310 at 1080p, plus
   margin, so nothing below y = 720 left of x = 380). Layouts draw into a 1664x700 body, centered and scaled to 92%
   (x 194 to 1726, y 64 to 708), so the content stays centered and ends above the camera; the footer starts right of
   it. A slide whose content runs taller than the body is shrunk to fit (--fit, set by render.js). Press G on a
   presenter slide to show the zone. */
.slide-body { position: absolute; top: 64px; left: 50%; width: 1664px; height: 700px; transform: translateX(-50%) scale(calc(.92 * var(--fit, 1))); transform-origin: top center; display: flex; flex-direction: column; }
.face-zone { position: absolute; left: 0; bottom: 0; width: 380px; height: 340px; border: 3px dashed var(--jade); border-left: 0; border-bottom: 0; border-top-right-radius: 24px; background: #d9775714; z-index: 20; pointer-events: none; display: none; }
.stage.show-face .face-zone { display: block; }
.slide-foot {
  position: absolute; left: 394px; right: 195px; bottom: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  font: 500 24px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted);
}
.slide-foot .foot-brand { display: flex; align-items: center; gap: 14px; }
.slide-foot .screen-cue { margin-right: 10px; }
.slide-foot img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--s-rule); }
.slide-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #0b1c31; }
.slide-progress i { display: block; height: 100%; background: var(--jade); transition: width 300ms var(--na-ease); }
.screen-cue { font: 600 24px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-claude); background: var(--claude); padding: 6px 18px; border-radius: 999px; }
.screen-cue.k { background: transparent; color: var(--s-muted); border: 2px solid var(--s-rule); }

/* slide type scale (stage, 1920x1080) */
.slide { --fs-eyebrow: 28px; --fs-title: 84px; --fs-h2: 64px; --fs-lede: 40px; --fs-body: 36px; --fs-small: 29px; --fs-code: 28px; --gap: 30px; }
.eyebrow { font: 500 var(--fs-eyebrow)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-green); margin: 0 0 22px; }
.s-title { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: var(--fs-title); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 var(--gap); max-width: 22ch; text-wrap: balance; }
.s-title.wide { max-width: none; }
.s-title.sm { font-size: 66px; margin-bottom: 28px; max-width: none; }
.s-lede { font-size: var(--fs-lede); line-height: 1.45; color: #d9d2c0; margin: 0 0 var(--gap); max-width: 44ch; }
.s-body { font-size: var(--fs-body); line-height: 1.5; }
/* highlighted words read in cream on the slides, so the band never sits under grey text and looks like a strike */
.slide .hl { color: var(--s-ink); }
/* on a slide only the current step's highlight shows, so there is one marker on screen at a time */
.captions li:not(.on) .hl { background: none; padding: 0; margin: 0; }
.s-title .hl, .statement .hl, .s-title .hl-block, .statement .hl-block { white-space: nowrap; }
.s-small { font-size: var(--fs-small); color: var(--s-muted); line-height: 1.45; }
.beat-hidden { visibility: hidden; }
.pop { animation: na-pop calc(var(--na-dur)*1.15) var(--na-spring) both; }

/* statement */
.statement { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 96px; line-height: 1.12; letter-spacing: -.02em; max-width: 20ch; margin: auto 0; text-wrap: balance; }
.statement.stack { font-size: 80px; max-width: none; }
.statement.stack > span, .pg-statement.stack > span { display: block; }
.statement-sub { font-size: var(--fs-lede); color: var(--s-muted); margin-top: 28px; max-width: 46ch; line-height: 1.45; }

/* list */
.s-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; max-width: 1500px; }
.s-list li { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: baseline; font-size: var(--fs-body); line-height: 1.45; }
.s-list .k { font: 600 30px var(--font-mono); color: var(--s-green); }
.s-list b { font-weight: 600; color: var(--s-ink); }
.s-list .sub { display: block; color: var(--s-muted); font-size: var(--fs-small); margin-top: 6px; }

/* cards */
.s-cards { display: grid; gap: 32px; grid-auto-rows: 1fr; margin-top: 8px; }
.s-cards.n2 { grid-template-columns: repeat(2, 1fr); }
.s-cards.n3 { grid-template-columns: repeat(3, 1fr); }
.s-cards.n4 { grid-template-columns: repeat(4, 1fr); }
.s-card { background: var(--s-card); border: 2px solid var(--s-rule); border-radius: var(--radius-lg); padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; }
.s-card.key { border-color: var(--jade); }
.s-card .art { height: 150px; display: flex; align-items: center; justify-content: center; }
.s-card .art svg { height: 100%; width: auto; max-width: 100%; }
.s-card h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 46px; line-height: 1.12; margin: 0; }
.s-card .tag { font: 500 28px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-green); }
.s-card p { margin: 0; font-size: 30px; line-height: 1.45; color: #d9d2c0; }

/* visual (animation) */
.s-visual { flex: 1; display: grid; grid-template-columns: 1004px 1fr; gap: 52px; min-height: 0; align-items: center; }
.s-visual .side { min-width: 0; display: flex; flex-direction: column; }
.s-visual .side .eyebrow { margin-bottom: 16px; }
.s-visual .side .s-title.sm { font-size: 54px; margin-bottom: 28px; }
.anim-box { position: relative; height: 664px; background: var(--s-card-2); border: 2px solid var(--s-rule); border-radius: var(--radius-xl); overflow: hidden; min-height: 0; }
.anim-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.captions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.captions li { font-size: 28px; line-height: 1.38; color: var(--s-muted); padding-left: 24px; border-left: 4px solid var(--s-rule); transition: color 200ms, border-color 200ms; }
.captions li.on { color: var(--s-ink); border-left-color: var(--jade); }
.captions li b { color: inherit; font-weight: 600; }
.captions li.future { visibility: hidden; }
.s-visual.many .captions { gap: 10px; }
.s-visual.many .captions li { line-height: 1.3; padding-left: 20px; }

/* prompt */
.s-prompt { position: relative; background: var(--s-card); border: 2px solid var(--s-rule); border-radius: var(--radius-lg); padding: 30px 40px; }
.s-prompt .ptitle { font: 500 28px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-green); margin-bottom: 18px; display: flex; gap: 18px; align-items: center; }
.s-prompt .ptitle .pid { color: var(--s-muted); }
.s-prompt .ptitle { padding-right: 190px; }
.reading .s-prompt .ptitle { padding-right: 0; }
.slide a { color: var(--s-green); }
.s-prompt .ptext { font: 400 var(--fs-code)/1.5 var(--font-mono); color: var(--s-ink); white-space: pre-wrap; margin: 0; max-width: 92ch; }
.s-prompt .ptext code { color: var(--s-green); }
.s-copy { position: absolute; top: 20px; right: 28px; font: 600 28px var(--font-sans); background: var(--jade); color: var(--on-jade); border: 0; border-radius: 12px; padding: 14px 24px; cursor: pointer; }
.s-copy:hover { background: var(--jade-hover); }
.s-copy.done { background: var(--brand-cream); }
.cmd-chip { display: inline-block; font: 600 32px var(--font-mono); background: var(--s-card); border: 2px solid var(--s-rule); color: var(--s-green); padding: 10px 22px; border-radius: 12px; }

/* output panel: a file as Claude wrote it */
.s-output { background: #fbf8f1; color: #0b1a2e; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.s-output .bar { display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: #ebe3d0; font: 500 28px var(--font-mono); color: #4a576b; }
.s-output .bar .dot { width: 14px; height: 14px; border-radius: 50%; background: #d9cfb9; }
.s-output .body { padding: 28px 36px; font-size: 28px; line-height: 1.5; overflow: hidden; }
.s-output .body h4 { font: 700 30px var(--font-sans); margin: 14px 0 6px; }
.s-output .body h4:first-child { margin-top: 0; }
.s-output .body ul { margin: 0; padding-left: 1.2em; }
.s-output .body table { border-collapse: collapse; width: 100%; font-size: 28px; }
.s-output .body th, .s-output .body td { border-bottom: 1px solid #d9cfb9; padding: 8px 10px; text-align: left; }
.s-output .body th { font: 600 28px var(--font-sans); color: #4a576b; }
.s-output .sample-note { font: 500 28px var(--font-mono); color: #4a576b; padding: 0 36px 20px; letter-spacing: .04em; text-transform: uppercase; }

/* two-column split */
.s-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; min-height: 0; align-items: start; }
.s-split.wide-left { grid-template-columns: 1.3fr 1fr; }
.photo-wrap { display: flex; justify-content: flex-end; }
.s-skills { display: grid; gap: 20px; margin-top: 4px; }
.s-skills.c2 { grid-template-columns: repeat(2, 1fr); }
.s-skills.c3 { grid-template-columns: repeat(3, 1fr); }
.s-skills.c4 { grid-template-columns: repeat(4, 1fr); }
.s-skill-group { background: var(--s-card); border: 2px solid var(--s-rule); border-radius: var(--radius-lg); padding: 20px 28px 22px; }
.s-skill-group .tag { font: 500 26px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-green); margin: 0 0 10px; }
.s-skill-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.s-skill-group li { font: 500 26px/1.4 var(--font-mono); color: var(--s-ink); }
.s-skill-group li.more { color: var(--s-green); }
.reading .s-skills { grid-template-columns: 1fr !important; gap: 14px; }
.reading .s-skill-group .tag, .reading .s-skill-group li { font-size: 14px; }
.s-outro { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 72px; align-items: center; min-height: 0; }
.s-outro-photo .photo { height: 520px; width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); display: block; }
.s-outro .statement { font-size: 84px; margin: 0; max-width: 16ch; }
.s-ctas { display: flex; gap: 24px; margin-top: 44px; }
.slide .s-ctas .cta { color: var(--s-ink); background: var(--s-card); border: 2px solid var(--s-rule); border-radius: 26px; padding: 16px 30px 16px 16px; gap: 22px; box-shadow: none; }
.slide .s-ctas .cta:hover { border-color: var(--cta-c); }
.s-ctas .cta-icon { width: 76px; height: 76px; border-radius: 20px; }
.s-ctas .cta-icon svg { width: 42px; height: 42px; }
.s-ctas .cta-text b { font-size: 32px; }
.s-ctas .cta-text small { font-size: 24px; color: var(--s-muted); }
.s-ctas .cta-go { width: 30px; height: 30px; margin-left: 10px; color: var(--s-muted); }
.s-ctas .cta-text b, .s-ctas .cta-text small { white-space: nowrap; }
/* the closing slide stacks its buttons in one column as wide as the widest */
.s-outro .s-ctas { display: grid; justify-content: start; gap: 18px; margin-top: 40px; }
.s-outro .s-ctas .cta-go { margin-left: auto; }
.s-outro-end { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 52px; color: var(--s-green); margin-top: 44px; }
.photo-wrap .photo { height: 430px; width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); display: block; }
.reading .photo-wrap { justify-content: flex-start; }
.reading .photo-wrap .photo { height: auto; width: 100%; max-width: 360px; }

/* compare columns */
.s-compare { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
.s-col { background: var(--s-card); border: 2px solid var(--s-rule); border-radius: var(--radius-lg); padding: 30px 34px; display: flex; flex-direction: column; gap: 12px; }
.s-col.key { border-color: var(--jade); }
.s-col .art { height: 130px; display: flex; align-items: center; justify-content: center; }
.s-col .art svg { height: 100%; width: auto; }
.s-col h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 44px; line-height: 1.1; margin: 0; }
.s-col .who { font: 500 28px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-green); }
.s-col ul { margin: 0; padding-left: 1.1em; font-size: 29px; line-height: 1.4; color: #d9d2c0; }
.s-col li { margin: 6px 0; }
.s-rule-of-thumb { margin-top: 26px; font-size: 32px; line-height: 1.4; max-width: 1600px; }

/* tips: Hỏi Claude, Khi bị kẹt, Thử ngay */
.s-tips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
.s-tip { background: var(--s-card); border: 2px solid var(--s-rule); border-radius: var(--radius-lg); padding: 34px; }
.s-tip .tag { font: 600 28px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-green); margin-bottom: 14px; }
.s-tip p { margin: 0; font-size: 30px; line-height: 1.45; }

/* demo: the steps done live in Claude Code */
.s-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; max-width: 1560px; }
.s-steps li { counter-increment: st; display: grid; grid-template-columns: 70px 1fr; gap: 22px; align-items: baseline; font-size: 34px; line-height: 1.45; }
.s-steps li::before { content: counter(st); font: 600 30px var(--font-mono); color: var(--on-jade); background: var(--jade); width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.s-steps code { font-size: .88em; color: var(--s-green); }

/* cover */
.cover { justify-content: center; }
.cover .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 80px; }
.cover .mascot { width: 420px; height: auto; }
.cover .s-title { font-size: 116px; max-width: 16ch; }

/* map (V00 fallback list) */
.s-parts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }

/* ---------- reading mode (phones, small windows) ---------- */
.reading-wrap { max-width: 860px; margin: 0 auto; padding: 16px 16px 96px; }
.reading-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 18px; }
.reading-top .btn { padding: 9px 14px; font-size: 14px; }
.reading .slide { position: relative; inset: auto; padding: 28px 24px 30px; border-radius: var(--radius-xl); margin: 0 0 18px; background: var(--s-bg); color: var(--s-ink); overflow: hidden;
  --fs-eyebrow: 12px; --fs-title: clamp(26px, 6.4vw, 40px); --fs-h2: 28px; --fs-lede: 18px; --fs-body: 17px; --fs-small: 15px; --fs-code: 14px; --gap: 18px; }
.reading .slide-body { position: static; transform: none; width: auto; height: auto; }
.reading .slide-foot, .reading .slide-progress { display: none; }
.reading .s-title.sm { font-size: var(--fs-title); margin-bottom: var(--gap); }
.reading .screen-cue { display: inline-block; font-size: 11px; padding: 6px 10px; margin-bottom: 14px; }
.reading .beat-hidden { visibility: visible; }
.reading .pop { animation: none; }
.reading .statement { font-size: clamp(28px, 7vw, 44px); margin: 8px 0; }
.reading .statement-sub { font-size: 17px; }
.reading .s-list { gap: 14px; }
.reading .s-list li { grid-template-columns: 34px 1fr; gap: 10px; }
.reading .s-list .k { font-size: 15px; }
.reading .s-cards, .reading .s-compare, .reading .s-tips, .reading .s-split, .reading .s-visual { grid-template-columns: 1fr !important; grid-auto-flow: row; gap: 14px; }
.reading .s-card, .reading .s-col, .reading .s-tip, .reading .s-prompt { padding: 18px; border-width: 1px; }
.reading .s-card .art, .reading .s-col .art { height: 120px; }
.reading .s-card h3, .reading .s-col h3 { font-size: 24px; }
.reading .s-card .tag, .reading .s-col .who, .reading .s-tip .tag, .reading .s-prompt .ptitle { font-size: 12px; }
.reading .s-card p, .reading .s-col ul, .reading .s-tip p { font-size: 16px; }
.reading .anim-box { aspect-ratio: 5 / 3; border-width: 1px; }
.reading .captions li { font-size: 16px; padding-left: 12px; border-left-width: 3px; }
.reading .captions li.future { visibility: visible; }
.reading .s-copy { position: static; font-size: 14px; padding: 9px 14px; border-radius: 8px; margin-top: 12px; }
.reading .s-output .bar { font-size: 12px; padding: 10px 14px; }
.reading .s-output .body { font-size: 15px; padding: 14px 16px; }
.reading .s-output .body h4 { font-size: 16px; }
.reading .s-output .body table { font-size: 13px; }
.reading .s-output .body th { font-size: 11px; }
.reading .s-output .sample-note { font-size: 11px; padding: 0 16px 12px; }
.reading .s-steps li { grid-template-columns: 34px 1fr; gap: 10px; font-size: 16px; }
.reading .s-steps li::before { width: 26px; height: 26px; font-size: 13px; }
.reading .cmd-chip { font-size: 15px; padding: 6px 10px; }
.reading .cover .row { grid-template-columns: 1fr; }
.reading .cover .mascot { width: 140px; }
.reading .cover .s-title { font-size: clamp(30px, 8vw, 48px); }
.reading .s-rule-of-thumb { font-size: 17px; }
.anim-controls { display: none; }
.reading .anim-controls { display: flex; gap: 8px; margin-top: 10px; }
.reading .anim-controls button { font: 600 14px var(--font-sans); border-radius: 8px; border: 1px solid #61799c; background: transparent; color: var(--s-ink); padding: 8px 12px; cursor: pointer; }

/* ---------- presenter helpers ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--brand-cream); color: var(--brand-navy); font: 600 15px var(--font-sans); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: opacity 200ms; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; }
.help { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,7,14,.72); z-index: 40; }
.help.on { display: flex; }
.help .box { background: var(--s-card); color: var(--s-ink); border: 1px solid var(--s-rule); border-radius: 16px; padding: 28px 32px; font-size: 16px; line-height: 1.8; min-width: 360px; }
.help kbd { font: 600 14px var(--font-mono); background: #0b1c31; border: 1px solid var(--s-rule); border-radius: 6px; padding: 2px 8px; }
.blank { position: absolute; inset: 0; background: var(--s-bg); z-index: 30; display: none; }
.blank.on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .pop, .pop .hl, .hl.pop, .pop .hl-block, .hl-block.pop { animation: none !important; }
  .slide-progress i, .captions li { transition: none; }
}

/* ---------- viewer page: one scrollable page per lesson ---------- */
.pg { max-width: 820px; margin: 0 auto; padding: 20px 20px 96px; font-size: 18px; line-height: 1.7; }
.pg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 28px; }
.pg-head { padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.pg-eyebrow { font: 500 13px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--jade-ink); margin: 0 0 10px; }
.pg-h1 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(32px, 5.4vw, 48px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 14px; text-wrap: pretty; }
.pg-h2 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(25px, 3.6vw, 32px); line-height: 1.18; margin: 0 0 14px; text-wrap: pretty; }
.pg-lede { font-size: 19px; color: var(--ink-muted); margin: 0 0 18px; }
.pg .hl { color: var(--ink); }
.pg-sec { padding: 40px 0 8px; position: relative; }
.pg-sec + .pg-sec { border-top: 1px solid var(--rule); }
.pg-sec.in > * { animation: na-pop calc(var(--na-dur) * 1.15) var(--na-spring) both; }
.pg-sec.in > *:nth-child(2) { animation-delay: 70ms; } .pg-sec.in > *:nth-child(3) { animation-delay: 140ms; } .pg-sec.in > *:nth-child(n+4) { animation-delay: 210ms; }
.pg-statement { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.18; letter-spacing: -.015em; margin: 0 0 14px; text-wrap: pretty; }
.pg-prose p { margin: 0 0 14px; }
.pg-prose { margin: 0 0 6px; }
.pg-where { display: inline-block; font: 600 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--claude); color: var(--on-claude); padding: 5px 10px; border-radius: 999px; margin-bottom: 12px; }
.pg-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-list li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: baseline; }
.pg-list .k { font: 600 14px var(--font-mono); color: var(--jade-ink); }
.pg-list .sub { display: block; color: var(--ink-muted); font-size: 16px; margin-top: 2px; }
.pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
/* 4 cards: 2 by 2, not 3 and 1 */
.pg-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pg-card { background: var(--brand-navy); color: var(--brand-cream); border: 1px solid var(--brand-edge); border-radius: var(--radius-lg); padding: 20px; }
.pg-card.key { box-shadow: inset 0 0 0 2px var(--jade); }
.pg-card .art { height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.pg-card .art svg { height: 100%; width: auto; }
.pg-card .tag { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #ec9a7a; }
.pg-card h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 22px; line-height: 1.2; margin: 6px 0 6px; }
.pg-card p, .pg-card ul { margin: 0; font-size: 15.5px; line-height: 1.55; color: #d9d2c0; }
.pg-card ul { padding-left: 1.1em; }
.pg-card .hl { color: var(--brand-cream); }
.pg-note { background: var(--paper-sunken); border-radius: var(--radius-md); padding: 14px 16px; font-size: 16px; margin: 16px 0 0; }
.pg-visual { margin: 10px -40px 0; }
.pg-frame { background: var(--brand-navy); border: 1px solid var(--brand-edge); border-radius: var(--radius-xl); overflow: hidden; }
.pg-anim { position: relative; aspect-ratio: 1000 / 660; background: var(--brand-navy); }
.pg-anim svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the replay (and, on phones, full-screen) buttons sit in a strip inside the frame, under the art */
.pg-anim-bar { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 10px; }
.pg-anim-btn { font: 600 13px/1 var(--font-sans); color: #d9d2c0; background: #f0e8d512; border: 1px solid #f0e8d52e; border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: background-color 150ms var(--na-ease), color 150ms var(--na-ease); }
.pg-anim-btn:hover { background: #f0e8d526; color: var(--brand-cream); }
.pg-anim-btn span { display: inline-block; margin-right: 2px; }
/* full-screen view of an animation (mostly for phones) */
.pg-zoom-close { display: none; }
.pg-visual.zoom { position: fixed; inset: 0; margin: 0; z-index: 60; overflow: hidden; background: var(--brand-navy); display: flex; align-items: center; justify-content: center; }
.pg-visual.zoom .pg-frame { display: contents; }
.pg-visual.zoom .pg-anim-bar { display: none; }
.pg-visual.zoom .pg-anim { width: min(100vw, calc(100vh * 1000 / 660)); cursor: pointer; }
.pg-visual.zoom .pg-zoom-close { display: block; position: fixed; top: 12px; right: 12px; z-index: 61; font: 600 15px var(--font-sans); background: var(--brand-cream); color: var(--brand-navy); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
@media (orientation: portrait) and (max-width: 760px) {
  .pg-visual.zoom .pg-anim { width: min(calc(100vh - 24px), calc((100vw - 24px) * 1000 / 660)); max-width: none; transform: rotate(90deg); flex: none; }
  .pg-visual.zoom .pg-zoom-close { top: auto; bottom: 12px; right: 12px; }
}
body.zoomed { overflow: hidden; }
@media (min-width: 900px) { .pg-zoom-btn { display: none; } }
.pg-steps { margin: 10px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; color: var(--ink-muted); }
.pg-steps li { cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.pg-steps li.on { color: var(--ink); background: var(--highlight-band); }
.pg-copy { position: relative; margin: 14px 0; background: var(--brand-navy); color: var(--brand-cream); border: 1px solid var(--brand-edge); border-radius: var(--radius-md); padding: 16px 18px 18px; }
.pg-copy-head { display: flex; gap: 12px; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #ec9a7a; margin: 0 96px 10px 0; }
.pg-copy-head .pid { color: #9eabbc; }
.pg-copy pre { margin: 0; font: 400 15px/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-copy pre code { color: #ec9a7a; }
.pg-copy-btn { position: absolute; top: 12px; right: 12px; font: 600 13px var(--font-sans); background: var(--jade); color: var(--on-jade); border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.pg-copy-btn:hover { background: var(--jade-hover); }
.pg-copy-btn.done { background: var(--brand-cream); }
.pg-output { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; margin: 14px 0; }
.pg-output .bar { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--paper-sunken); font: 500 13px var(--font-mono); color: var(--ink-muted); }
.pg-output .bar em { font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.pg-output .body { padding: 14px 18px; font-size: 16px; line-height: 1.6; overflow-x: auto; }
.pg-output .body h4 { margin: 10px 0 4px; font-size: 16px; } .pg-output .body h4:first-child { margin-top: 0; }
.pg-output .body ul { margin: 0; padding-left: 1.2em; }
.pg-output .body pre { margin: 0; font: 14.5px/1.6 var(--font-mono); white-space: pre; overflow-x: auto; } /* V2: folder trees and file samples */
.pg-output .body img.shot { display: block; width: 100%; margin: 0; border-radius: 6px; }
.pg-output .body table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.pg-output .body th, .pg-output .body td { border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: left; vertical-align: top; }
.pg-output .body th { font: 600 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.pg-outputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pg-demo { margin: 8px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 8px; }
.pg-table th, .pg-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pg-table th { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pg-mini-copy { font: 600 12px var(--font-sans); background: var(--jade); color: var(--on-jade); border: 0; border-radius: 6px; padding: 5px 9px; cursor: pointer; }
.pg-mini-copy.done { background: var(--paper-sunken); color: var(--ink); }
.pg-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.pg-tip { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 16px; }
.pg-tip .tag { font: 600 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--jade-ink); }
.pg-tip p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; }
.pg-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; margin-top: 8px; }
.pg-photo img { width: 100%; border-radius: var(--radius-xl); display: block; }
.pg-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .pg-visual { margin-left: 0; margin-right: 0; } }
@media (max-width: 640px) {
  .pg { font-size: 17px; }
  .pg-split { grid-template-columns: 1fr; }
  .pg-photo img { max-width: 320px; }
  .pg-copy pre { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pg-sec.in > * { animation: none !important; } }

/* viewer page: course sidebar. The lesson list grouped by part, collapsible: open by default on wide screens (the page
   moves right to make room), closed on narrower ones, where it opens over the page. */
.pg-shell { --side: 288px; }
.pg-side {
  position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--side); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper-sunken); border-right: 1px solid var(--rule); padding: 0 0 32px;
  transform: translateX(-100%); visibility: hidden; transition: transform 220ms var(--na-ease), visibility 0s linear 220ms;
}
.side-open .pg-side { transform: none; visibility: visible; transition: transform 220ms var(--na-ease); }
.pg-side-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 12px 20px; background: var(--paper-sunken); border-bottom: 1px solid var(--rule); }
.pg-side-home { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.pg-side-home:hover { color: var(--ink); }
.pg-side-btn, .pg-side-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 600 14px var(--font-sans); cursor: pointer; transition: background-color 150ms var(--na-ease), border-color 150ms var(--na-ease); }
.pg-side-btn:hover, .pg-side-open:hover { border-color: var(--control-border); background: var(--card); }
.pg-side-btn span { font-size: 18px; line-height: 1; }
.pg-side-open { position: fixed; z-index: 35; top: 14px; left: 14px; box-shadow: 0 4px 14px #06132314; }
.side-open .pg-side-open { visibility: hidden; }
.pg-side-group { padding: 22px 12px 6px; }
.pg-side-group + .pg-side-group { border-top: 1px solid var(--rule); }
.pg-side-part { margin: 0 8px 10px; font: 700 16px/1.3 var(--font-sans); color: var(--ink); }
.pg-side-part span { display: block; margin-bottom: 3px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--jade-ink); }
.pg-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-item { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: baseline; padding: 8px 8px; border-radius: 8px; text-decoration: none; color: var(--ink-muted); font-size: 14px; line-height: 1.4; transition: background-color 150ms var(--na-ease), color 150ms var(--na-ease); }
.pg-item .num { font: 500 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.pg-item:hover { background: var(--paper); color: var(--ink); }
.pg-item.now { color: var(--ink); font-weight: 600; }
.pg-item.now .num { color: var(--jade-ink); }
.pg-side-scrim { display: none; }
@media (min-width: 1120px) {
  .pg-shell.side-open { padding-left: var(--side); }
}
@media (max-width: 1119px) {
  .side-open .pg-side { box-shadow: 0 0 48px #0613232e; }
  .side-open .pg-side-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: #06132333; }
  .pg-nav { padding-left: 48px; }
  .pg-side-open .lbl { display: none; }
}
@media (max-width: 640px) { .pg-shell { --side: min(300px, 86vw); } .pg-side-open { top: 12px; left: 12px; } }
@media (prefers-reduced-motion: reduce) { .pg-side, .side-open .pg-side { transition: none; } }
@media (min-width: 1120px) and (max-width: 1239px) { .side-open .pg-visual { margin-left: 0; margin-right: 0; } }
@media (max-width: 640px) { .pg-nav .brand span { white-space: nowrap; } }

/* light and dark toggle (viewer pages, home, course pages) */
.pg-nav-end, .topbar-end { display: flex; align-items: center; gap: 10px; }
.theme-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; transition: background-color 150ms var(--na-ease), border-color 150ms var(--na-ease); }
.theme-btn:hover { background: var(--paper-sunken); border-color: var(--control-border); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .topbar .brand span { white-space: nowrap; } .topbar-end { gap: 8px; } .topbar-end .btn { padding: 8px 12px; font-size: 14px; } }

/* viewer page: prose sections with a photo beside the text, and the course video slot */
/* skills to try (L20): groups by domain, each skill with its link, maker and what it does */
.pg-skill-group { margin-top: 22px; }
.pg-skill-group h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 21px; margin: 0 0 8px; }
.pg-skills { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pg-skills li { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.pg-skills .name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-skills .name a { align-self: flex-start; font: 600 15px var(--font-mono); overflow-wrap: anywhere; }
.pg-skills .name small { font-size: 13px; color: var(--ink-muted); }
.pg-skills .what { font-size: 16px; line-height: 1.5; }
@media (max-width: 640px) { .pg-skills li { grid-template-columns: 1fr; gap: 4px; } }
/* outro (the course's last section): photo under the heading, follow/subscribe buttons, the sign-off last */
.pg-outro-photo img { display: block; width: 200px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); margin: 6px 0 18px; }
.pg-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.cta { --cta-c: var(--jade); display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 10px 16px 10px 10px; box-shadow: 0 1px 2px rgba(6, 19, 35, .06); transition: transform 180ms var(--na-ease), border-color 180ms var(--na-ease), box-shadow 180ms var(--na-ease); }
.cta-facebook { --cta-c: #0866ff; }
.cta-youtube { --cta-c: #ff0033; }
.cta:hover { transform: translateY(-2px); border-color: var(--cta-c); box-shadow: 0 6px 18px rgba(6, 19, 35, .10); }
.cta:active { transform: translateY(0) scale(.98); }
.cta-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cta-c); color: #fff; }
.cta-email .cta-icon { color: var(--on-jade); }
.cta-icon svg { display: block; width: 24px; height: 24px; }
.cta-icon img { display: block; width: 32px; height: 32px; }
.cta-course { --cta-c: var(--brand-navy); }
.cta-text { display: flex; flex-direction: column; gap: 2px; }
.cta-text b { font-weight: 600; font-size: 16px; }
.cta-text small { font: 500 13px var(--font-mono); color: var(--ink-muted); }
.cta-go { flex: none; width: 18px; height: 18px; margin-left: 6px; color: var(--ink-muted); transition: transform 180ms var(--na-ease), color 180ms var(--na-ease); }
.cta:hover .cta-go { transform: translate(2px, -2px); color: var(--cta-c); }
@media (prefers-reduced-motion: reduce) { .cta, .cta-go { transition: none; } .cta:hover { transform: none; } }
.pg-newsletter { margin-top: 28px; background: var(--paper-sunken); border-radius: var(--radius-lg); padding: 20px 22px; }
.pg-newsletter h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 22px; margin: 0; }
.pg-newsletter p { margin: 6px 0 0; }
.pg-newsletter .pg-ctas { margin-top: 14px; }
.s-newsletter { display: flex; align-items: center; gap: 36px; margin-top: 28px; }
.s-newsletter > p { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 44px; margin: 0; }
.s-newsletter .s-ctas { margin-top: 0; }
.pg-outro-end { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 28px; line-height: 1.25; margin: 28px 0 0; }
@media (max-width: 640px) { .pg-outro-photo img { width: 150px; } .pg-ctas .cta { flex: 1 1 100%; } .pg-ctas .cta-go { margin-left: auto; } }
.pg-photo-side { float: right; width: 190px; margin: 4px 0 12px 24px; }
.pg-photo-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.pg-sec.has-photo::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) { .pg-photo-side { width: 128px; margin-left: 16px; } }
.pg-video { position: relative; aspect-ratio: 16 / 9; margin: 12px 0 6px; border-radius: var(--radius-md); overflow: hidden; background: var(--brand-navy); }
.pg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-video.soon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-video.soon span { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(6, 19, 35, .85); color: #f0e8d5; font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pg-mark img { display: block; width: 150px; height: auto; margin: 2px 0 18px; }
.pg-video.pending { display: flex; align-items: center; justify-content: center; background: var(--paper-sunken); border: 1px dashed var(--control-border); }
.pg-video.pending span { font: 500 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* the brand's jade marker, used beyond the key phrases: behind the current lesson in the sidebar, and as a low marker
   under links in the text (full height on hover), instead of an underline */
.pg-item.now .t > span, .pg-sec a:not(.btn):not(.cta), .pg-note a, .article a:not(.btn):not(.brand) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.5' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E") no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pg-item.now .t > span { background-size: 100% 100%; padding: 0 .12em; margin: 0 -.12em; }
.pg-card a:not(.btn) { color: var(--brand-cream); }
.pg-sec a:not(.btn):not(.cta), .pg-note a, .article a:not(.btn):not(.brand) {
  color: var(--ink); text-decoration: none; font-weight: 500; background-size: 100% 45%; background-position: 0 100%; padding: 0 .06em;
  transition: background-size 180ms var(--na-ease);
}
.pg-sec a:not(.btn):not(.cta):hover, .pg-note a:hover, .article a:not(.btn):not(.brand):hover { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .pg-sec a:not(.btn):not(.cta), .pg-note a, .article a:not(.btn):not(.brand) { transition: none; } }

/* no lonely last word: the renderer glues the last two words of course text; text-wrap: pretty covers the hand-written
   HTML (home, course pages) in browsers that support it */
p, li, td, .s-lede, .statement-sub, .captions li, .s-card p { text-wrap: pretty; }
/* page headings fill the line (pretty, not balance), and a highlighted phrase never splits across lines */
.pg-h1 .hl, .pg-h2 .hl, .pg-statement .hl { white-space: nowrap; }

/* a prompt on a slide shown as its idea in one line (deck gist) */
.s-prompt.gist .pgist { font-size: 40px; line-height: 1.35; margin: 0; max-width: 34ch; text-wrap: balance; }
.s-prompt.gist .pmore { margin: 18px 0 0; font: 500 28px var(--font-mono); letter-spacing: .04em; color: var(--s-muted); }

/* on navy a half-transparent orange turns brown, so the marker is stronger there; cream text on it stays readable
   (about 4:1 on slides, where text is 24px and up; about 4.9:1 on dark pages and navy cards) */
.slide .hl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.75' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E"); }
.hero .hl, .pg-card .hl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.65' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pg .hl, :root:not([data-theme="light"]) .article .hl, :root:not([data-theme="light"]) .pg-item.now .t > span, :root:not([data-theme="light"]) .pg-sec a:not(.btn):not(.cta), :root:not([data-theme="light"]) .pg-note a, :root:not([data-theme="light"]) .article a:not(.btn):not(.brand) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.65' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .pg .hl, :root[data-theme="dark"] .article .hl, :root[data-theme="dark"] .pg-item.now .t > span, :root[data-theme="dark"] .pg-sec a:not(.btn):not(.cta), :root[data-theme="dark"] .pg-note a, :root[data-theme="dark"] .article a:not(.btn):not(.brand) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.65' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E"); }

/* lesson tour slides (L00): the lesson's animation large, title and a small explainer beside it */
.s-visual.lesson .side .s-title.sm { font-size: 60px; }
.s-visual.lesson .side .s-lede { font-size: 34px; line-height: 1.4; color: var(--s-muted); margin: 0; max-width: none; }
.anim-box.art-row { display: flex; align-items: center; justify-content: center; gap: 56px; padding: 40px; }
.anim-box.art-row .art { flex: 0 0 auto; width: 250px; height: 220px; display: flex; align-items: center; justify-content: center; }
.anim-box.art-row .art svg { position: static; inset: auto; height: 100%; width: 100%; }

/* a deck shown as a sample result (Việc 1): small 16:9 slides in a grid */
.deck-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.deck-mini .sl { aspect-ratio: 16 / 9; background: #061323; color: #f0e8d5; border-radius: 8px; padding: 6% 7%; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; font-size: .62em; line-height: 1.3; }
.deck-mini .sl small { font-family: var(--font-mono); font-size: .85em; letter-spacing: .06em; text-transform: uppercase; color: #ec9a7a; }
.deck-mini .sl b { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 1.5em; line-height: 1.15; }
.deck-mini .sl.t { background: #d97757; color: #061323; }
.deck-mini .sl.t small { color: #061323; }
.deck-link { margin: 10px 0 0; font-family: var(--font-mono); font-size: .8em; color: #4a576b; }
.pg-output .deck-mini { font-size: 24px; }
.s-output .deck-mini { font-size: 36px; }
.s-output .deck-mini.three { grid-template-columns: repeat(3, 1fr); }
.s-output .deck-link { font-size: 24px; }
@media (max-width: 640px) { .pg-output .deck-mini { grid-template-columns: 1fr; } }
.s-output .deck-mini.two { font-size: 40px; grid-template-columns: repeat(2, 640px); justify-content: start; }

/* edit mode (local copy only, press E): text you can change is outlined on hover; a small editor opens on click */
.edit-banner { position: fixed; z-index: 90; left: 50%; top: 10px; transform: translateX(-50%); background: #d97757; color: #061323; font: 600 14px var(--font-sans); padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 20px #0613233d; }
.edit-banner kbd { font: 600 12px var(--font-mono); background: #f0e8d5; border-radius: 4px; padding: 1px 6px; }
.edit-banner[hidden] { display: none; }
body.editing [data-src] { cursor: text; border-radius: 4px; transition: outline-color 120ms; outline: 2px dashed transparent; outline-offset: 3px; }
body.editing [data-src]:hover { outline-color: #d97757; }
.edit-pop { position: fixed; z-index: 95; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 48px #0613234d; padding: 12px; font: 15px/1.5 var(--font-sans); }
.edit-pop textarea { width: 100%; box-sizing: border-box; font: 15px/1.5 var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--control-border); border-radius: 8px; padding: 10px; resize: vertical; }
.edit-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-muted); }
.edit-hint code, .edit-hint kbd { font: 500 11px var(--font-mono); background: var(--paper-sunken); border-radius: 4px; padding: 1px 5px; }
.edit-msg { margin: 6px 0 0; font-size: 13px; color: #b3452a; }
.edit-msg:empty { display: none; }
.edit-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.edit-row button { font: 600 14px var(--font-sans); border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--control-border); background: transparent; color: var(--ink); }
.edit-row .edit-save { background: #d97757; border-color: #d97757; color: #061323; }
.edit-row button:disabled { opacity: .6; cursor: default; }
.edit-saved { pointer-events: none; position: fixed; z-index: 96; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--brand-cream); color: var(--brand-navy); font: 600 14px var(--font-sans); padding: 10px 16px; border-radius: 10px; }

/* guide pages in the lesson layout (K1 Chuẩn bị) and real screenshots with an orange ring on the part to click */
.pg-guide { font-size: 17px; line-height: 1.65; }
.pg-guide > p:first-child { margin: 24px 0 0; }
.pg-guide .pg-sec { scroll-margin-top: 16px; }
.pg-guide h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 21px; margin: 28px 0 8px; }
.pg-guide .footnote { margin-top: 20px; }
.pg-item.guide .num { letter-spacing: 0; }
.shot { margin: 18px 0 24px; }
.shot.narrow { max-width: 380px; }
.shot-img { position: relative; border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; background: #F8F6F1; }
.shot img { display: block; width: 100%; height: auto; }
.shot-ring { position: absolute; border: 3px solid var(--jade); border-radius: 14px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--jade) 22%, transparent); pointer-events: none; }
.shot figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

/* handson slide: a hands-on stretch in one slide, with a link to its guide section */
.s-guide { margin: 46px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.s-guide-link { display: inline-flex; align-items: center; gap: 16px; padding: 20px 34px; border-radius: 999px; background: var(--jade); color: var(--on-jade); font: 600 34px/1.1 var(--font-sans); text-decoration: none; }
.slide .s-guide-link { color: var(--on-jade); }
.s-guide-link:hover { background: var(--s-green); }
.s-handson { display: grid; grid-template-columns: 1fr 480px; gap: 56px; align-items: center; }
.s-handson-art svg { display: block; width: 100%; height: auto; }
.s-handson-art p { display: flex; justify-content: space-between; margin: 10px 18px 0; font: 500 26px/1.2 var(--font-mono); color: var(--s-muted); }
.s-guide-path { font: 500 26px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--s-muted); }

/* the guide over the presenter slide, in browsers that can't open a new tab (the Claude app's built-in browser) */
.guide-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--paper); }
.guide-overlay-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #061323; color: #9eabbc; font: 500 13px/1.2 var(--font-mono); letter-spacing: .04em; }
.guide-overlay-bar .btn { padding: 8px 14px; font-size: 14px; }
.guide-overlay iframe { flex: 1; width: 100%; border: 0; background: var(--paper); }

/* logos layout: tools as app-icon tiles (white, so every brand reads on navy and cream), in labelled groups */
.s-logos { display: flex; gap: 64px; align-items: flex-start; margin-top: 16px; }
.s-logo-label { font: 500 28px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-green); margin: 0 0 24px; }
.s-logo-row { display: flex; gap: 28px; }
.s-logo { width: 196px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.s-logo .tile { width: 120px; height: 120px; border-radius: 28px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.s-logo .tile img { width: 72px; height: 72px; }
.s-logo b { font: 600 32px/1.2 var(--font-sans); color: var(--s-ink); }
.s-logo small { font: 400 28px/1.2 var(--font-sans); color: var(--s-muted); }
.s-logo.here .tile { box-shadow: 0 0 0 6px var(--jade); }
.s-logo em { margin-top: 6px; font: 700 28px/1.2 var(--font-sans); font-style: normal; color: var(--on-jade); background: var(--jade); border-radius: 999px; padding: 4px 16px; }
.s-logos-sub { margin-top: 44px; }
/* three groups (L00/27): smaller tiles so all of them still fit one row */
.s-logos.g3 { gap: 40px; }
.s-logos.g3 .s-logo-row { gap: 16px; }
.s-logos.g3 .s-logo { width: 160px; }
.s-logos.g3 .s-logo .tile { width: 104px; height: 104px; border-radius: 24px; }
.s-logos.g3 .s-logo .tile img { width: 62px; height: 62px; }
.s-logos.g3 .s-logo b { font-size: 30px; }
.s-logo em, .pg-logo em { white-space: nowrap; }
.pg-logos { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 10px 0 16px; }
.pg-logo-label { font: 500 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--jade-ink); margin: 0 0 10px; }
.pg-logo-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pg-logo { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.3; }
.pg-logo .tile { width: 56px; height: 56px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--rule); margin-bottom: 4px; }
.pg-logo .tile img { width: 34px; height: 34px; }
.pg-logo b { font-size: 14px; font-weight: 600; }
.pg-logo small { font-size: 12px; color: var(--ink-muted); }
.pg-logo.here .tile { box-shadow: 0 0 0 3px var(--jade); }
.pg-logo em { margin-top: 2px; font: 700 11px/1.2 var(--font-sans); font-style: normal; color: var(--on-jade); background: var(--jade); border-radius: 999px; padding: 2px 8px; }


/* ---------- the one-page guide (V2, course.onePage) ---------- */
.pg-one .pg-head .pg-video { margin-top: 18px; }
.pg-one .pg-head .pg-note { margin: 6px 0 0; }
.pg-lesson { padding-top: 48px; scroll-margin-top: 16px; }
.pg-lesson > .pg-lede { margin-bottom: 0; }
.pg-lesson .pg-sec { padding: 26px 0 4px; }
.pg-lesson .pg-sec + .pg-sec { border-top: 0; }
.pg-lesson + .pg-lesson { margin-top: 24px; border-top: 1px solid var(--rule); }
.pg-h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(20px, 2.6vw, 24px); line-height: 1.2; margin: 0 0 10px; text-wrap: pretty; }
.pg-h3 .hl { white-space: nowrap; }

/* galleries of real examples (V2): `gallery` in js/page.js */
.pg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 6px; }
.pg-gallery.c1 { grid-template-columns: 1fr; } .pg-gallery.c2 { grid-template-columns: repeat(2, 1fr); } .pg-gallery.c4 { grid-template-columns: repeat(4, 1fr); }
.pg-gallery figure { margin: 0; }
.pg-gallery img, .pg-gallery video { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--rule); background: var(--paper-sunken); }
.pg-gallery.tall img, .pg-gallery.tall video { aspect-ratio: 9 / 16; object-fit: cover; }
/* gallery images enlarge on click (js/page.js zoom) */
.pg-gallery img { cursor: zoom-in; }
.pg-gallery .pg-open { display: block; }
.pg-gallery .pg-open img { cursor: pointer; transition: border-color .15s, transform .15s; }
.pg-gallery .pg-open:hover img, .pg-gallery .pg-open:focus-visible img { border-color: var(--jade); transform: translateY(-2px); }
.pg-ext { color: var(--jade-ink); }
@media (prefers-reduced-motion: reduce) { .pg-gallery .pg-open img { transition: none; } .pg-gallery .pg-open:hover img { transform: none; } }
.pg-zoom { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 19, 35, .92); cursor: zoom-out; animation: pg-zoom-in .15s ease-out; }
.pg-zoom:focus { outline: none; }
.pg-zoom figure { margin: 0; max-width: min(1400px, 100%); display: flex; flex-direction: column; align-items: center; }
.pg-zoom img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: var(--radius-md); }
.pg-zoom figcaption { margin-top: 12px; font-size: 16px; line-height: 1.45; color: #f0e8d5; text-align: center; }
@keyframes pg-zoom-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pg-zoom { animation: none; } }
.pg-gallery figcaption { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.pg-gallery.flow { gap: 34px; }
.pg-gallery.flow figure { position: relative; }
.pg-gallery.flow figure + figure::before { content: "→"; position: absolute; left: -26px; top: 28%; font: 600 20px var(--font-mono); color: var(--jade-ink); }
.pg-source { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
@media (max-width: 640px) {
  .pg-gallery, .pg-gallery.c4 { grid-template-columns: repeat(2, 1fr); }
  .pg-gallery.c1, .pg-gallery.c2, .pg-gallery.flow { grid-template-columns: 1fr; }
  .pg-gallery.flow figure + figure::before { content: "↓"; left: 50%; top: -28px; }
}

/* the way back to nhatanh.ai: in the top bar and at the foot of the sidebar (js/page.js, SITE) */
.pg-site-link { font: 500 13px var(--font-mono); letter-spacing: .02em; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.pg-site-link:hover, .pg-site-link:focus-visible { color: var(--ink); }
.pg-side { padding-bottom: 0; }
.pg-side-foot { position: sticky; bottom: 0; z-index: 2; margin: 16px 0 0; padding: 12px 20px 14px; background: var(--paper-sunken); border-top: 1px solid var(--rule); }
.pg-side-foot a { font: 500 12.5px var(--font-mono); color: var(--ink-muted); text-decoration: none; }
.pg-side-foot a:hover, .pg-side-foot a:focus-visible { color: var(--ink); }

/* the email box (js/signup.js): end of each lesson, the guides' closing section, L20's skills section */
.pg-signup { margin-top: 28px; background: var(--paper-sunken); border-radius: var(--radius-lg); padding: 22px 24px; }
.pg-signup h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 22px; margin: 0; }
.pg-signup p { margin: 6px 0 0; }
.pg-signup-form { display: flex; gap: 10px; margin-top: 16px; }
.pg-signup-input { flex: 1 1 auto; min-width: 0; font: 400 16px/1.2 var(--font-sans); color: var(--ink); background: var(--card); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 12px 14px; }
.pg-signup-input:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
.pg-signup-form .btn { flex: none; justify-content: center; }
.pg-signup-form .btn:disabled { opacity: .7; cursor: default; }
.pg-signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pg-signup .pg-signup-fine { margin-top: 10px; font-size: 13.5px; color: var(--ink-muted); }
.pg-signup.done h3 { color: var(--jade-ink); }
@media (max-width: 640px) { .pg-signup { padding: 18px; } .pg-signup-form { flex-direction: column; } }