:root{
  --bg:#f7f4ee; --ink:#22303a; --primary:#15616d; --primary2:#1f7a8c;
  --accent:#e07a3f; --muted:#6b7b85; --card:#ffffff; --pyc:#1f7a8c;
  --line:#ddd3c4; --red:#d6453b; --blue:#1f6feb; --green:#2ca24c;
}
.reveal{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;color:var(--ink);background:var(--bg);}
.reveal .slides{text-align:left;}
.reveal .slides section{height:100%;padding:0;}
.reveal h2{text-transform:none;}

/* ---------- pinyin ruby ---------- */
.reveal ruby{ruby-position:over;-webkit-ruby-position:before;ruby-align:center;}
.reveal rt{font-size:.42em;color:var(--pyc);font-weight:600;
  font-family:"Arial","Helvetica Neue",sans-serif;line-height:.95;
  letter-spacing:.01em;margin-bottom:-.06em;}
.reveal .zh{font-weight:700;}
.reveal .en{color:var(--muted);font-weight:500;}

/* ---------- generic content layout ---------- */
.slidewrap{position:absolute;inset:0;padding:58px 80px;box-sizing:border-box;
  display:flex;flex-direction:column;}
.shead{display:flex;align-items:baseline;gap:18px;border-bottom:3px solid var(--primary);
  padding-bottom:12px;flex:0 0 auto;background:var(--bg);position:relative;z-index:5;}
.shead .num{color:var(--accent);font-weight:800;font-size:30px;}
.shead h2{margin:0;font-size:40px;color:var(--primary);font-weight:800;line-height:1.5;}
.shead h2 rt{color:#7fb8c0;font-size:.36em;}
.shead .sub{color:var(--muted);font-size:27px;font-weight:600;}
/* `safe center`: vertically centre when content fits, fall back to flex-start
   when it overflows — so tall content never spills upward into the header. */
.sbody{flex:1;display:flex;flex-direction:column;justify-content:safe center;align-items:center;
  min-height:0;padding-top:18px;overflow:hidden;}
/* the JS auto-fit (engine.py) scales overflowing bodies down to fit; `overflow:hidden`
   is the no-JS fallback so content clips at the frame instead of bleeding past it. */
.center{display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  text-align:center;flex:1;width:100%;min-height:0;overflow:hidden;}

/* ---------- title slide ---------- */
.title-bg{position:absolute;inset:0;background:
  radial-gradient(120% 120% at 80% 0%, #2a93a6 0%, var(--primary) 55%, #0e4853 100%);}
.title-inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;}
.title-inner .big{font-size:112px;font-weight:800;letter-spacing:.04em;}
.title-inner .big rt{color:#bfe6ec;font-size:.32em;}
.title-inner .who{font-size:42px;margin-top:30px;opacity:.95;}
.title-inner .who rt{color:#bfe6ec;font-size:.4em;}

.title-split{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;gap:80px;color:#fff;padding:0 90px;box-sizing:border-box;}
.title-text{text-align:left;}
.title-text .big{font-size:104px;font-weight:800;letter-spacing:.04em;}
.title-text .big rt{color:#bfe6ec;font-size:.32em;}
.title-text .who{font-size:40px;margin-top:26px;opacity:.95;}
.title-text .who rt{color:#bfe6ec;font-size:.4em;}
.title-en{font-size:34px;color:#bfe6ec;letter-spacing:.08em;margin-top:6px;}
.title-portrait{width:300px;height:400px;border-radius:20px;background-size:cover;
  background-position:center top;box-shadow:0 14px 40px rgba(0,0,0,.35);
  border:5px solid rgba(255,255,255,.9);flex:0 0 auto;}

/* ---------- photo column (content + photo) ---------- */
/* base photo-frame: gives it a default size when used standalone (outside .photo-col) */
.photo-frame{width:480px;height:360px;border-radius:14px;background-size:contain;
  background-repeat:no-repeat;background-position:center;background-color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.10);border:4px solid #fff;flex:0 0 auto;}
.photo-col{gap:64px;}
.photo-col .photo-frame{width:440px;height:330px;border-radius:16px;background-size:cover;
  background-position:center;box-shadow:0 10px 30px rgba(0,0,0,.18);
  border:5px solid #fff;flex:0 0 auto;}
.photo-col .dialog{gap:22px;}
.photo-col .vocab{flex:0 0 auto;}

/* ---------- section divider ---------- */
.divider-bg{position:absolute;inset:0;background:linear-gradient(135deg,#b4543b,#8f3f2c);}
.divider-inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;text-align:center;gap:8px;}
.dv-kicker{font-size:30px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;}
.dv-big{font-size:150px;font-weight:800;line-height:1.1;}
.dv-big rt{color:#ffd9c2;font-size:.3em;}
.dv-en{font-size:34px;opacity:.92;font-weight:600;}

/* ---------- big vocab ---------- */
.vocab{font-size:150px;font-weight:800;text-align:center;line-height:1.35;}
.vocab rt{font-size:.3em;}
.gloss{font-size:42px;color:var(--muted);text-align:center;margin-top:20px;}
.gloss.small{font-size:32px;margin-top:8px;}

/* ---------- dialog / sentence lines ---------- */
.dialog{gap:24px;}
.line{font-size:54px;line-height:1.7;display:flex;align-items:flex-start;}
.line .sp{color:var(--accent);font-weight:800;margin-right:8px;}
.line .zh rt{font-size:.34em;}
.trz{display:inline-block;vertical-align:top;}
.en-tr{font-size:max(19px,.42em);color:var(--muted);font-weight:500;line-height:1.2;margin-top:3px;}
/* compact dialog (4+ lines) — shrink so 5 lines fit in 720px viewport */
.dialog.compact{gap:8px;}
.dialog.compact .line{font-size:32px;line-height:1.3;}
.dialog.compact .line .zh rt{font-size:.36em;}
.dialog.compact .en-tr{font-size:max(18px,.5em);margin-top:1px;}

/* ---------- pinyin alphabet chart (slide 9) ---------- */
.pingrid{display:flex;flex-direction:column;gap:18px;width:100%;max-width:1140px;
  margin:0 auto;flex:1;justify-content:center;}
.pinrow{display:flex;flex-direction:column;gap:8px;}
.pinhead{font-size:24px;font-weight:800;letter-spacing:.02em;}
.pinpills{display:flex;flex-wrap:wrap;gap:6px 8px;}
.pinpill{display:inline-flex;align-items:center;justify-content:center;
  min-width:54px;padding:6px 10px;background:#fff;border:1.5px solid var(--line);
  border-radius:8px;font-size:28px;font-weight:700;color:var(--primary);
  font-family:"Arial",sans-serif;}

/* ---------- pills (letters / finals) ---------- */
.pillwrap{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;
  gap:16px;max-width:1000px;margin:0 auto;}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:64px;
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:12px 20px;font-size:40px;font-weight:700;color:var(--primary);
  box-shadow:0 2px 0 rgba(0,0,0,.04);}

/* ---------- tables ---------- */
table.cn{border-collapse:collapse;margin:0 auto;font-size:34px;background:var(--card);
  box-shadow:0 6px 24px rgba(0,0,0,.06);}
table.cn th{background:var(--primary);color:#fff;padding:30px 24px 14px;font-size:27px;font-weight:700;}
table.cn th rt{color:#bfe6ec;}
table.cn td{border:1px solid var(--line);padding:13px 24px 11px;text-align:center;vertical-align:middle;}
table.cn td .zh{font-weight:700;}
table.cn td .en{font-size:max(16px,.72em);}
.vowtable td{font-size:46px;font-weight:700;color:var(--ink);font-family:"Arial",sans-serif;
  padding:13px 30px;}

/* ---------- picture-vocab card grid ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px 22px;
  width:100%;align-content:center;}
.cardgrid.cols4{grid-template-columns:repeat(4,1fr);}
.card{display:flex;flex-direction:column;align-items:center;gap:5px;}
.card-img{width:100%;max-width:150px;aspect-ratio:4/3;border-radius:12px;background-size:cover;
  background-position:center;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.card-num{background:var(--primary);color:#fff;font-size:64px;font-weight:800;}
.card-zh{font-size:38px;font-weight:700;}
.card-zh rt{font-size:.44em;}
.card-gloss{font-size:26px;color:var(--muted);}
/* click-to-reveal quiz cards — toggle opacity in a fixed-size slot => no reflow */
.card.quiz{cursor:pointer;transition:transform .15s;}
.card.quiz:hover .card-img{transform:scale(1.04);box-shadow:0 8px 22px rgba(0,0,0,.22);}
/* answer slot: fixed height, hint + answer stacked in the same place */
.card .qa{position:relative;width:100%;height:32px;margin-top:0;text-align:center;}
.card .qa .qhint,.card .qa .answer{position:absolute;left:0;right:0;top:0;
  transition:opacity .15s;line-height:1.15;}
.card .qhint{font-size:34px;font-weight:800;color:#c9beac;opacity:1;}
.card .answer{font-size:28px;font-weight:700;color:var(--accent);opacity:0;}
.card.quiz.revealed .qhint{opacity:0;}
.card.quiz.revealed .answer{opacity:1;}
/* quiz='all': photo hidden behind a same-size ? placeholder (opacity toggle) */
.card.qhide .imgslot{position:relative;width:100%;max-width:150px;aspect-ratio:4/3;margin:0 auto;}
.card.qhide .imgslot .card-img,.card.qhide .imgslot .qbox{position:absolute;inset:0;
  width:100%;height:100%;max-width:none;transition:opacity .15s;}
.card.qhide .qbox{display:flex;align-items:center;justify-content:center;border-radius:12px;
  border:3px dashed var(--line);background:#fff;font-size:44px;font-weight:800;
  color:#c9beac;box-sizing:border-box;opacity:1;}
.card.qhide .imgslot .card-img{opacity:0;background-size:contain;background-repeat:no-repeat;background-color:#fff;}
.card.qhide.revealed .qbox{opacity:0;}
.card.qhide.revealed .imgslot .card-img{opacity:1;}

/* ---------- tone slides ---------- */
.tone-card{display:flex;align-items:center;justify-content:center;gap:60px;flex:1;
  width:100%;max-width:980px;margin:0 auto;overflow:hidden;}
.tone-left{text-align:center;flex:0 0 auto;}
.tone-num{font-size:68px;font-weight:800;color:var(--primary);}
.tone-en{font-size:40px;color:var(--accent);font-weight:700;margin-top:10px;}
.tone-aid{font-size:38px;color:var(--muted);margin-top:26px;white-space:nowrap;}
.tone-vowel{font-size:200px;font-weight:800;color:var(--red);line-height:1;flex:0 0 auto;
  font-family:"Arial",sans-serif;}

/* ---------- misc ---------- */
.footnote{font-size:36px;color:var(--muted);margin-top:30px;text-align:center;}

/* classroom-activity intro slide */
.activity{gap:6px;}
/* the '活动 N · Activity N' badge lives in the header, pushed to the right edge and
   aligned on the header baseline (the .shead uses align-items:baseline). */
.shead.act-head .act-badge{margin-left:auto;align-self:baseline;
  background:var(--accent);color:#fff;font-weight:800;font-size:26px;
  padding:8px 24px;border-radius:30px;line-height:1;}
.shead.act-head .act-badge rt{color:#ffe2cf;}
.act-name{font-size:52px;font-weight:800;margin-top:14px;}
.act-name .act-en{font-size:max(20px,.5em);color:var(--muted);font-weight:600;}
.activity .act-steps{counter-reset:step;list-style:none;font-size:30px;line-height:1.35;
  text-align:left;margin:20px 0 0;padding:0;}
.act-steps li{margin:14px 0;padding-left:42px;position:relative;}
.act-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:.1em;
  width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;
  font-size:.6em;display:flex;align-items:center;justify-content:center;font-weight:800;}

/* lesson-ending review + farewell slide */
.review-intro{font-size:38px;font-weight:800;color:var(--primary);margin-bottom:18px;}
.review-list{list-style:none;font-size:34px;line-height:1.5;text-align:left;margin:0;padding:0;}
.review-list li{margin:12px 0;padding-left:34px;position:relative;}
.review-list li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:12px;
  border-radius:50%;background:var(--accent);}
.review-list .en{font-size:max(20px,.62em);}
.closing-bye{font-size:72px;font-weight:800;color:var(--accent);margin-top:34px;text-align:center;}
.closing-bye .en-tr{font-size:max(15px,.34em);color:var(--muted);font-weight:600;}
.reveal .controls{color:var(--primary);}
.reveal .progress{color:var(--accent);}
.twocol{display:flex;gap:60px;align-items:center;justify-content:center;flex:1;width:100%;}

.phrasegrid{display:grid;grid-template-columns:auto auto;gap:20px 100px;
  justify-content:center;align-content:center;height:100%;}
.phrasegrid .line{margin:0;}

/* ---------- audio play buttons ---------- */
.audplay{display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;background:var(--primary);color:#fff;
  cursor:pointer;font-size:24px;transition:transform .12s,background .12s;
  box-shadow:0 4px 14px rgba(0,0,0,.18);vertical-align:middle;margin:0 6px;}
.audplay:hover{background:var(--primary2);transform:scale(1.08);}
.audplay:active{transform:scale(.96);}
.audplay i{pointer-events:none;}
.audplay audio{display:none;}
.audplay.sm{width:38px;height:38px;font-size:17px;}
.audplay.xs{width:30px;height:30px;font-size:13px;margin:0 4px;}

/* ---------- photo-only slide ---------- */
.photo-slide{display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  flex:1;width:100%;gap:18px;min-height:0;overflow:hidden;}
.bigphoto{max-width:100%;max-height:500px;width:auto;height:auto;object-fit:contain;
  border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.10);}
.bigphoto.plain{box-shadow:none;border-radius:0;}
.bleed-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#fff;overflow:hidden;}
.bleed-wrap .bigphoto{max-width:100%;max-height:720px;border-radius:0;box-shadow:none;}
.bleed-wrap img{max-width:100%;max-height:720px;}
.ph-caption{text-align:center;margin-top:6px;}
.ph-zh{font-size:48px;font-weight:800;color:var(--primary);line-height:1.2;}
.ph-en{font-size:32px;color:var(--muted);margin-top:4px;}

/* ---------- tone quad (ā á ǎ à 2×2 grid with audio) ---------- */
.tone-quad{display:grid;grid-template-columns:1fr 1fr;gap:30px 60px;
  place-items:center;width:100%;max-width:1100px;margin:0 auto;flex:1;}
.tone-cell{display:flex;align-items:center;gap:18px;justify-content:center;width:100%;}
.tone-vow{font-size:120px;font-weight:800;color:var(--red);font-family:"Arial",sans-serif;
  line-height:1;white-space:nowrap;}
/* multi-char syllable labels (e.g. b-ā-bā) — auto-shrink so they stay on one line */
.tone-cell .tone-vow.syll{font-size:74px;}
.audplay.placeholder{background:#d6cfbf;cursor:default;box-shadow:none;}
.audplay.placeholder:hover{background:#d6cfbf;transform:none;}
.audplay.placeholder i{opacity:.4;}
.quad-intro{text-align:center;font-size:24px;color:var(--muted);margin-bottom:14px;}

/* ---------- single-finals grid (ɑ o e i u ü) ---------- */
.bigvow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 80px;
  place-items:center;width:100%;max-width:900px;margin:0 auto;flex:1;}
.bigvow{font-size:140px;font-weight:800;color:var(--primary);font-family:"Arial",sans-serif;
  line-height:1;}

/* ---------- inline video ---------- */
.video-slide{display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  flex:1;width:100%;gap:14px;min-height:0;overflow:hidden;}
.bigvideo{max-width:96%;max-height:480px;width:auto;height:auto;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);background:#000;}
.vid-note{font-size:22px;color:var(--muted);text-align:center;max-width:900px;flex:0 0 auto;}

/* Quarto blanks the menu open-button glyph and expects an SVG it doesn't ship —
   supply the hamburger here (teal, visible on the light background). */
.reveal .slide-menu-button .fas::before{
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2315616d" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');
}