/* =========================================================
   HISTORY LAB — THEME v8.4.2 / CHART & CONTENT RECOVERY
   v8.4.1 stability preserved; chart rendering recovery and diagnostic fallback added.
   Purpose: predictable dark surfaces, readable text, semantic
   quiz states, accessible hints, and stable component contrast.
   ========================================================= */

:root{
  --hl-bg:#090c10;
  --hl-panel:#0f172a;
  --hl-panel-2:#172033;
  --hl-card:#1d293b;
  --hl-card-hover:#253349;
  --hl-text:#f8fafc;
  --hl-body:#e5e7eb;
  --hl-muted:#cbd5e1;
  --hl-soft:#94a3b8;
  --hl-border:#334155;
  --hl-border-soft:rgba(148,163,184,.22);
  --hl-accent:#f59e0b;
  --hl-accent-2:#fbbf24;
  --hl-accent-dark:#78350f;
  --hl-accent-surface:#3b2f14;
  --hl-ok:#064e3b;
  --hl-ok-border:#10b981;
  --hl-ok-text:#d1fae5;
  --hl-bad:#7f1d1d;
  --hl-bad-border:#ef4444;
  --hl-bad-text:#fee2e2;
  --hl-info:#172554;
  --hl-info-border:#3b82f6;
  --hl-info-text:#dbeafe;
  --hl-rgb:245,158,11;
}
body.hl-section-2{--hl-rgb:139,134,232}

/* ---------- Base ---------- */
body.hl-v84{
  background:var(--hl-bg)!important;
  color:var(--hl-body)!important;
}
body.hl-v84 ::selection{background:#f59e0b;color:#111827;text-shadow:none}
body.hl-v84 *{box-sizing:border-box}
body.hl-v84 img,body.hl-v84 canvas{max-width:100%}
body.hl-v84 :is(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--hl-accent-2)!important;
  outline-offset:3px;
  border-radius:.55rem;
}

/* ---------- Lesson layout ---------- */
body.hl-v84.hl-ds2 main{
  max-width:900px!important;
  margin-inline:auto!important;
  padding-inline:18px!important;
  font-size:17px!important;
  line-height:1.68!important;
  color:var(--hl-body)!important;
}
body.hl-v84.hl-ds2 main>section{
  width:100%!important;
  max-width:900px!important;
  margin:1.55rem auto!important;
  padding:clamp(1.1rem,2.5vw,1.65rem)!important;
  background:linear-gradient(145deg,#111827,#0f172a)!important;
  color:var(--hl-body)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:20px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.20)!important;
}
body.hl-v84.hl-ds2 main>section.hl-hero{
  margin-top:2.35rem!important;
  padding:clamp(1.5rem,3.2vw,2.25rem)!important;
  min-height:0!important;
  background:
    radial-gradient(circle at 86% 18%,rgba(var(--hl-rgb),.13),transparent 22rem),
    linear-gradient(135deg,#1a2339,#111827 62%,#0f172a)!important;
  border-color:rgba(var(--hl-rgb),.32)!important;
  border-radius:24px!important;
  color:var(--hl-body)!important;
}
body.hl-v84.hl-ds2 main>section:not(.hl-hero)>.hl-h2,
body.hl-v84.hl-ds2 main>section:not(.hl-hero)>h2{
  border-left:4px solid var(--hl-accent)!important;
  padding-left:.72rem!important;
}

/* Old secondary sticky headers must not cover the course bar. */
body.hl-v84.hl-ds2 header.sticky{position:relative!important;top:auto!important;z-index:20!important}
body.hl-v84.hl-ds2 header.sticky[class*="bg-"]{
  background:#111827!important;color:#e5e7eb!important;border-color:rgba(148,163,184,.20)!important;
}
body.hl-v84.hl-ds2 header.sticky :is(h1,h2,h3,h4,p,a,span,button){color:#e5e7eb!important}

/* ---------- Typography ---------- */
body.hl-v84.hl-ds2 .hl-h1,
body.hl-v84.hl-ds2 main>section.hl-hero h1{
  font-size:clamp(2.25rem,4.8vw,3rem)!important;
  line-height:1.08!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  color:var(--hl-text)!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2 .hl-h2{
  font-size:clamp(1.75rem,3.5vw,2.15rem)!important;
  line-height:1.16!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  color:var(--hl-text)!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2 .hl-h3{
  font-size:clamp(1.2rem,2.1vw,1.38rem)!important;
  line-height:1.26!important;
  font-weight:700!important;
  color:var(--hl-text)!important;
}
body.hl-v84.hl-ds2 .hl-h4{
  font-size:1.05rem!important;
  line-height:1.34!important;
  font-weight:600!important;
  color:var(--hl-text)!important;
}
body.hl-v84.hl-ds2 main :is(p,li,dd,dt){line-height:1.65!important}
body.hl-v84.hl-ds2 main :is(.text-xs,[class*="text-[9px]"],[class*="text-[10px]"],[class*="text-[11px]"],[class*="text-[12px]"],[class*="text-[13px]"]){
  font-size:14px!important;line-height:1.5!important;
}
body.hl-v84.hl-ds2 main .text-sm{font-size:15px!important;line-height:1.58!important}
body.hl-v84.hl-ds2 main .border-l-4>p{color:var(--hl-muted)!important}

/* ---------- Canonical dark cards ---------- */
body.hl-v84.hl-ds2 main :is(.hl-card,.hl-light-surface){
  background:linear-gradient(145deg,var(--hl-card),var(--hl-panel-2))!important;
  color:var(--hl-body)!important;
  border-color:rgba(148,163,184,.24)!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2 main :is(.hl-card,.hl-light-surface) :is(h1,h2,h3,h4,h5,h6){color:var(--hl-text)!important;text-shadow:none!important}
body.hl-v84.hl-ds2 main :is(.hl-card,.hl-light-surface) :is(p,li,dd,dt,label,small,td,th){color:var(--hl-body)!important;text-shadow:none!important}
body.hl-v84.hl-ds2 main :is(.hl-card,.hl-light-surface) strong{color:inherit}

/* Legacy pale teaching surfaces: darken large content cards globally. */
body.hl-v84.hl-ds2 main :is(
  [class~="bg-white"],
  [class~="bg-amber-50"],[class~="bg-amber-100"],[class~="bg-yellow-50"],[class~="bg-yellow-100"],
  [class~="bg-orange-50"],[class~="bg-orange-100"],[class~="bg-stone-50"],[class~="bg-stone-100"],
  [class~="bg-slate-50"],[class~="bg-slate-100"],[class~="bg-gray-50"],[class~="bg-gray-100"],
  [class~="bg-blue-50"],[class~="bg-blue-100"],[class~="bg-indigo-50"],[class~="bg-indigo-100"],
  [class~="bg-purple-50"],[class~="bg-purple-100"],[class~="bg-green-50"],[class~="bg-green-100"],
  [class~="bg-emerald-50"],[class~="bg-emerald-100"],[class~="bg-teal-50"],[class~="bg-teal-100"],
  [class~="bg-cyan-50"],[class~="bg-cyan-100"],
  [class~="bg-amberCard"],[class~="bg-cardBg"],[class~="bg-cream"],[class~="bg-creamLight"],
  [class~="bg-egyptSand"],[class~="bg-lightCream"],[class~="bg-mesoAmber"],[class~="bg-mesoCard"],
  [class~="bg-mesoSand"],[class~="bg-paper"],[class~="bg-papyrusBg"],[class~="bg-papyrusLight"],
  [class~="bg-papyrusWhite"],[class~="bg-pyramidSand"],[class~="bg-sandBg"],[class~="bg-silk"],[class~="bg-warmSand"]
):not(button):not(a):not(span){
  background:linear-gradient(145deg,var(--hl-card),var(--hl-panel-2))!important;
  color:var(--hl-body)!important;
  border-color:rgba(148,163,184,.24)!important;
}
body.hl-v84.hl-ds2 main :is(
  [class~="bg-white"],
  [class~="bg-amber-50"],[class~="bg-amber-100"],[class~="bg-yellow-50"],[class~="bg-yellow-100"],
  [class~="bg-orange-50"],[class~="bg-orange-100"],[class~="bg-stone-50"],[class~="bg-stone-100"],
  [class~="bg-slate-50"],[class~="bg-slate-100"],[class~="bg-gray-50"],[class~="bg-gray-100"],
  [class~="bg-blue-50"],[class~="bg-blue-100"],[class~="bg-indigo-50"],[class~="bg-indigo-100"],
  [class~="bg-purple-50"],[class~="bg-purple-100"],[class~="bg-green-50"],[class~="bg-green-100"],
  [class~="bg-emerald-50"],[class~="bg-emerald-100"],[class~="bg-teal-50"],[class~="bg-teal-100"],
  [class~="bg-cyan-50"],[class~="bg-cyan-100"],
  [class~="bg-amberCard"],[class~="bg-cardBg"],[class~="bg-cream"],[class~="bg-creamLight"],
  [class~="bg-egyptSand"],[class~="bg-lightCream"],[class~="bg-mesoAmber"],[class~="bg-mesoCard"],
  [class~="bg-mesoSand"],[class~="bg-paper"],[class~="bg-papyrusBg"],[class~="bg-papyrusLight"],
  [class~="bg-papyrusWhite"],[class~="bg-pyramidSand"],[class~="bg-sandBg"],[class~="bg-silk"],[class~="bg-warmSand"]
):not(button):not(a):not(span) :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,label,small,td,th){
  color:var(--hl-body)!important;text-shadow:none!important;
}

/* Light gradient teaching cards were a recurring source of white-on-white text. */
body.hl-v84.hl-ds2 main :is(
  [class*="from-amber-50"],[class*="from-amber-100"],[class*="from-yellow-50"],[class*="from-yellow-100"],
  [class*="from-orange-50"],[class*="from-orange-100"],[class*="from-stone-50"],[class*="from-stone-100"],
  [class*="from-slate-50"],[class*="from-slate-100"],[class*="from-gray-50"],[class*="from-gray-100"],
  [class*="from-blue-50"],[class*="from-blue-100"],[class*="from-indigo-50"],[class*="from-indigo-100"],
  [class*="from-purple-50"],[class*="from-purple-100"],[class*="from-green-50"],[class*="from-green-100"],
  [class*="from-emerald-50"],[class*="from-emerald-100"],[class*="from-teal-50"],[class*="from-teal-100"]
){
  background:linear-gradient(145deg,var(--hl-card),var(--hl-panel-2))!important;
  color:var(--hl-body)!important;border-color:rgba(148,163,184,.24)!important;
}
body.hl-v84.hl-ds2 main :is(
  [class*="from-amber-50"],[class*="from-amber-100"],[class*="from-yellow-50"],[class*="from-yellow-100"],
  [class*="from-orange-50"],[class*="from-orange-100"],[class*="from-stone-50"],[class*="from-stone-100"],
  [class*="from-slate-50"],[class*="from-slate-100"],[class*="from-gray-50"],[class*="from-gray-100"],
  [class*="from-blue-50"],[class*="from-blue-100"],[class*="from-indigo-50"],[class*="from-indigo-100"],
  [class*="from-purple-50"],[class*="from-purple-100"],[class*="from-green-50"],[class*="from-green-100"],
  [class*="from-emerald-50"],[class*="from-emerald-100"],[class*="from-teal-50"],[class*="from-teal-100"]
) :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,label,small){color:var(--hl-body)!important}

/* ---------- Text utility cleanup on dark surfaces ---------- */
body.hl-v84.hl-ds2 main :is(
  .text-slate-500,.text-slate-600,.text-slate-700,.text-slate-800,.text-slate-900,.text-slate-950,
  .text-stone-500,.text-stone-600,.text-stone-700,.text-stone-800,.text-stone-900,.text-stone-950,
  .text-gray-500,.text-gray-600,.text-gray-700,.text-gray-800,.text-gray-900,.text-gray-950,
  .text-zinc-500,.text-zinc-600,.text-zinc-700,.text-zinc-800,.text-zinc-900,.text-zinc-950
):not([class*="bg-"]){color:var(--hl-muted)!important}

body.hl-v84.hl-ds2 main :is(
  .text-amber-700,.text-amber-800,.text-amber-900,.text-amber-950,
  .text-ochre-700,.text-ochre-800,.text-ochre-900,.text-ochre-950,
  .text-copper-600,.text-copper-700,.text-copper-800,.text-copper-900,.text-copper-950,
  .text-terracotta,.text-terracotta-600,.text-terracotta-700,.text-terracotta-800,.text-terracotta-900,.text-terracotta-950,
  .text-orange-800,.text-orange-900,.text-orange-950,
  .text-saffron-700,.text-saffron-800,.text-saffron-900,.text-saffron-950,
  .text-bronzePrimary,.text-primaryBrown,.text-mesoBrick,.text-mesoClay
):not([class*="bg-"]){color:#fdba74!important}

body.hl-v84.hl-ds2 main :is(
  .text-blue-800,.text-blue-900,.text-blue-950,.text-sky-800,.text-sky-900,.text-sky-950,
  .text-indigo-800,.text-indigo-900,.text-indigo-950,.text-mesoLapis,.text-babylonBlue
):not([class*="bg-"]){color:#93c5fd!important}

body.hl-v84.hl-ds2 main :is(
  .text-emerald-700,.text-emerald-800,.text-emerald-900,.text-emerald-950,
  .text-green-700,.text-green-800,.text-green-900,.text-green-950,
  .text-teal-700,.text-teal-800,.text-teal-900,.text-teal-950,
  .text-mesoRiver,.text-mesoTeal,.text-oasisTeal
):not([class*="bg-"]){color:#6ee7b7!important}

body.hl-v84.hl-ds2 main :is(
  .text-purple-800,.text-purple-900,.text-purple-950,.text-violet-800,.text-violet-900,.text-violet-950
):not([class*="bg-"]){color:#d8b4fe!important}

body.hl-v84.hl-ds2 main :is(
  .text-red-800,.text-red-900,.text-red-950,.text-rose-800,.text-rose-900,.text-rose-950,
  .text-crimson-700,.text-crimson-900,.text-crimson-950,.text-ironRed,.text-china-red,.text-imperial-red,.text-qin-red
):not([class*="bg-"]){color:#fca5a5!important}

body.hl-v84.hl-ds2 main :is(.text-goldAccent,.text-imperial-gold,.text-qin-gold,.text-china-gold,.text-mesoGold,.text-bronzeLight){color:#fde68a!important}
body.hl-v84.hl-ds2 main :is(.text-darkText,.text-bronzeDark,.text-mesoDark){color:var(--hl-body)!important}
body.hl-v84.hl-ds2 main :is(.text-clay-600,.text-clay-700,.text-clay-800,.text-clay-900,.text-cave-600,.text-cave-700,.text-cave-900,.text-steppe-800,.text-steppe-900):not([class*="bg-"]){color:#e2e8f0!important}

/* ---------- Chips, tabs, badges ---------- */
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-amber-100"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-amber-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-yellow-100"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-yellow-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-stone-100"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-stone-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-slate-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-sky-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-emerald-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-copper-200"],
body.hl-v84.hl-ds2 main :is(span,button,a)[class~="bg-terracotta-200"]{
  color:#172033!important;text-shadow:none!important;
}

/* Status pills in §6/§7: final authority over legacy text-stone-* classes. */
body.hl-v84.hl-ds2 main .hl-status-badge,
body.hl-v84.hl-ds2 main .hl-status-badge[class*="text-"],
body.hl-v84.hl-ds2 main .hl-status-badge *{
  color:#fde68a!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2 main .hl-status-badge{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 1 auto!important;max-width:48%!important;min-width:112px!important;
  white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
  line-height:1.22!important;font-size:.82rem!important;font-weight:800!important;
  padding:.46rem .72rem!important;
  background:#3b2f14!important;border:1px solid #d97706!important;border-radius:999px!important;
}
body.hl-v84.hl-ds2 main #economy-info>div:first-child,
body.hl-v84.hl-ds2 main #stage-info>div:first-child{gap:.8rem!important;align-items:flex-start!important;flex-wrap:wrap!important}
body.hl-v84.hl-ds2 main #economy-info>div:first-child .hl-h4,
body.hl-v84.hl-ds2 main #stage-info>div:first-child .hl-h4{min-width:0!important;flex:1 1 auto!important}

/* Dynamic comparison tabs in §6/§7 and recipe tabs in §16. */
body.hl-v84.hl-ds2 main :is(.hl-v84-tab,.tab-btn,.recipe-tab){
  background:#172033!important;color:#cbd5e1!important;border:1px solid #334155!important;
  box-shadow:none!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2 main :is(.hl-v84-tab,.tab-btn,.recipe-tab):hover{
  background:#223047!important;color:#f8fafc!important;border-color:#64748b!important;
}
body.hl-v84.hl-ds2 main :is(.hl-v84-tab,.tab-btn,.recipe-tab).active,
body.hl-v84.hl-ds2 main .recipe-tab[class~="bg-orange-500"],
body.hl-v84.hl-ds2 main .recipe-tab[class~="bg-amber-600"]{
  background:#92400e!important;color:#fff7ed!important;border-color:#d97706!important;
}
body.hl-v84.hl-ds2 main :is(.hl-v84-tab,.tab-btn,.recipe-tab).active *{color:inherit!important}

/* §9 Eneolithic period label: readable, wraps, never clips. */
body.hl-v84.hl-ds2 main .hl-v7-period-pill,
body.hl-v84.hl-ds2 main .hl-v7-period-pill[class*="text-"]{
  display:inline-flex!important;max-width:100%!important;width:auto!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
  background:#3b2f14!important;color:#fde68a!important;border:1px solid #d97706!important;
  line-height:1.35!important;padding:.62rem .92rem!important;border-radius:1rem!important;
  letter-spacing:.035em!important;text-transform:none!important;font-size:.84rem!important;
}

/* Hero metric cards: long Ukrainian words must fit. */
body.hl-v84.hl-ds2 main .hl-hero .hl-card{min-width:0!important;overflow:hidden!important}
body.hl-v84.hl-ds2 main .hl-hero .hl-card .font-black{
  font-size:clamp(1.15rem,1.75vw,1.65rem)!important;line-height:1.15!important;
  overflow-wrap:anywhere!important;hyphens:auto!important;
}
body.hl-v84.hl-ds2 main .hl-hero .hl-card .uppercase{
  font-size:clamp(11px,.9vw,13px)!important;line-height:1.25!important;letter-spacing:.025em!important;overflow-wrap:anywhere!important;
}

/* ---------- Hints and callouts ---------- */
body.hl-v84.hl-ds2 main :is(.hl-v84-hint,.hl-v7-hint){
  background:#3b2f14!important;color:#fde68a!important;border:1px solid #d97706!important;
  border-radius:.78rem!important;padding:.72rem .88rem!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2 main :is(.hl-v84-hint,.hl-v7-hint) :is(span,p,strong,b,em,small){color:#fde68a!important}
body.hl-v84.hl-ds2 main .hl-v6-music-note{
  background:linear-gradient(145deg,#2b2118,#201b17)!important;color:#fff7ed!important;
  border:1px solid #b45309!important;padding:.75rem!important;
}
body.hl-v84.hl-ds2 main .hl-v6-music-note :is(p,span,em){color:#fff7ed!important}
body.hl-v84.hl-ds2 main .hl-v6-music-note :is(strong,b){color:#fbbf24!important}
body.hl-v84.hl-ds2 main .hl-v6-art-site-info{
  background:linear-gradient(145deg,#202839,#182133)!important;color:#e5e7eb!important;border-color:#475569!important;
}
body.hl-v84.hl-ds2 main .hl-v6-art-site-info :is(h4,strong){color:#fdba74!important}
body.hl-v84.hl-ds2 main .hl-v6-art-site-info p{color:#e2e8f0!important}
body.hl-v84.hl-ds2 main .hl-v6-art-sites .hl-h3{color:#f8fafc!important}

/* Small custom pale notes that intentionally stay light use dark text. */
body.hl-v84.hl-ds2 main :is(.hl-v84-light-note,[class~="bg-ochre-50"],[class~="bg-copper-50"],[class~="bg-saffron-50"]):not(.hl-card):not(.hl-light-surface):not(.hl-v6-music-note){
  background:#fff7ed!important;color:#3f2a16!important;border-color:#f59e0b!important;
}
body.hl-v84.hl-ds2 main :is(.hl-v84-light-note,[class~="bg-ochre-50"],[class~="bg-copper-50"],[class~="bg-saffron-50"]):not(.hl-card):not(.hl-light-surface):not(.hl-v6-music-note) :is(p,span,strong,b,h1,h2,h3,h4,li,small){color:#3f2a16!important}

/* ---------- Historian Lab ---------- */
body.hl-v84.hl-ds2 .historylab-activity{
  max-width:900px!important;margin-inline:auto!important;
  background:radial-gradient(circle at 92% 10%,rgba(var(--hl-rgb),.10),transparent 20rem),linear-gradient(135deg,#111827,#172033)!important;
  border:1px solid rgba(var(--hl-rgb),.34)!important;border-radius:24px!important;box-shadow:0 18px 48px rgba(0,0,0,.26)!important;
}
body.hl-v84.hl-ds2 .historylab-activity :is(h1,h2,h3,h4,p,li){color:#f1f5f9!important}
body.hl-v84.hl-ds2 .historylab-activity button{
  background:#172033!important;color:#f8fafc!important;border-color:#475569!important;
}
body.hl-v84.hl-ds2 .historylab-activity button:hover{background:#223047!important;border-color:var(--hl-accent-2)!important}
body.hl-v84.hl-ds2 .historylab-activity .hl-answer{color:#fcd34d!important}

/* ---------- §10 Bronze smelting simulator ---------- */
body.hl-v84.hl-ds2 main .hl-v7-simulator{
  background:linear-gradient(145deg,#1d293b,#172033)!important;
  border:1px solid #475569!important;color:#e5e7eb!important;
}
body.hl-v84.hl-ds2 main .hl-v7-simulator :is(h1,h2,h3,h4,label,strong,b,p,span):not([class*="bg-"]){color:#e5e7eb!important}
body.hl-v84.hl-ds2 main .hl-v7-simulator .hl-h3{color:#f8fafc!important}
body.hl-v84.hl-ds2 main .hl-v7-simulator input[type="range"]{accent-color:#f59e0b!important}
body.hl-v84.hl-ds2 main .hl-v7-simulator button{
  background:#78350f!important;color:#fff7ed!important;border:1px solid #b45309!important;
}
body.hl-v84.hl-ds2 main .hl-v7-simulator button:hover{background:#92400e!important}

/* ---------- Tables ---------- */
body.hl-v84.hl-ds2 main .overflow-x-auto{border-radius:1rem}
body.hl-v84.hl-ds2 main table{
  background:#172033!important;color:#e5e7eb!important;border-collapse:separate!important;border-spacing:0!important;
  border-color:#334155!important;
}
body.hl-v84.hl-ds2 main table thead :is(th,td){background:#0f172a!important;color:#f8fafc!important;border-color:#475569!important}
body.hl-v84.hl-ds2 main table tbody tr{background:#172033!important}
body.hl-v84.hl-ds2 main table tbody tr:nth-child(even){background:#1b2638!important}
body.hl-v84.hl-ds2 main table :is(td,th){border-color:#334155!important}
body.hl-v84.hl-ds2 main table tbody td{color:#e5e7eb!important}
body.hl-v84.hl-ds2 main table tbody td:first-child{color:#fdba74!important;font-weight:800!important}
body.hl-v84.hl-ds2 main table caption{color:#cbd5e1!important}

/* §9 Eneolithic comparison — preserve two thematic columns without losing contrast. */
body.hl-v84.hl-ds2 main .hl-v6-eneolithic-table{background:#172033!important;color:#e5e7eb!important}
body.hl-v84.hl-ds2 main .hl-v6-eneolithic-table thead th:nth-child(2){background:#4a2618!important;color:#fff7ed!important}
body.hl-v84.hl-ds2 main .hl-v6-eneolithic-table thead th:nth-child(3){background:#3e321c!important;color:#fef3c7!important}
body.hl-v84.hl-ds2 main .hl-v6-eneolithic-table tbody td:nth-child(2){background:rgba(16,185,129,.055)!important}
body.hl-v84.hl-ds2 main .hl-v6-eneolithic-table tbody td:nth-child(3){background:rgba(245,158,11,.055)!important}
body.hl-v84.hl-ds2 main .hl-v6-eneolithic-table strong{color:#f8fafc!important}

/* ---------- §13 Sumerian social pyramid ---------- */
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid{
  background:linear-gradient(145deg,#1d293b,#172033)!important;border-color:#475569!important;
}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.hl-h3{color:#f8fafc!important}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div{
  color:#fff!important;border:1px solid rgba(255,255,255,.17)!important;box-shadow:none!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div:nth-child(1){background:#7c2d12!important}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div:nth-child(2){background:#713f12!important}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div:nth-child(3){background:#115e59!important}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div:nth-child(4){background:#365314!important}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div:nth-child(5){background:#475569!important}
body.hl-v84.hl-ds2 main .hl-v6-sumer-pyramid>.space-y-2>div *{color:inherit!important}

/* ---------- §14 Hammurabi ---------- */
body.hl-v84.hl-ds2 main .hl-v7-hammurabi-card{
  background:linear-gradient(145deg,#2a2118,#1c1917)!important;border-color:#92400e!important;color:#f8fafc!important;
}
body.hl-v84.hl-ds2 main .hl-v7-hammurabi-card :is(h3,p,li,strong,b){color:#f8fafc!important}
body.hl-v84.hl-ds2 main .hl-v7-hammurabi-card li::marker{color:#f59e0b!important}
body.hl-v84.hl-ds2 main .hl-v7-social-card{
  background:linear-gradient(145deg,#1d293b,#172033)!important;color:#e5e7eb!important;border-width:2px!important;
}
body.hl-v84.hl-ds2 main .hl-v7-social-card :is(h3,p,strong,b){color:#e5e7eb!important}
body.hl-v84.hl-ds2 main .hl-v7-social-card h3{color:#f8fafc!important}
body.hl-v84.hl-ds2 main .hl-v7-social-card>div:last-child{background:#111827!important;color:#e5e7eb!important;border-color:#475569!important}
body.hl-v84.hl-ds2 main .hl-v7-social-card>div:last-child *{color:inherit!important}
body.hl-v84.hl-ds2 main .hl-v7-social-avilum{border-color:#d97706!important}
body.hl-v84.hl-ds2 main .hl-v7-social-mushkenum{border-color:#0d9488!important}
body.hl-v84.hl-ds2 main .hl-v7-social-vardum{border-color:#64748b!important}
body.hl-v84.hl-ds2 main .hl-v7-social-avilum>div:first-child>span:first-child{background:#92400e!important;color:#fff7ed!important}
body.hl-v84.hl-ds2 main .hl-v7-social-mushkenum>div:first-child>span:first-child{background:#0f766e!important;color:#f0fdfa!important}
body.hl-v84.hl-ds2 main .hl-v7-social-vardum>div:first-child>span:first-child{background:#475569!important;color:#f8fafc!important}

/* ---------- §18 Mesopotamian pantheon ---------- */
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card{
  background:linear-gradient(145deg,#1d293b,#182235)!important;border:1px solid #3b4b63!important;color:#e5e7eb!important;min-height:220px!important;
}
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card:hover{border-color:#f59e0b!important;background:#202d42!important;transform:translateY(-2px)!important}
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card .hl-h3{color:#f8fafc!important}
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card p:first-of-type{color:#fbbf24!important;font-weight:700!important}
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card p:last-of-type{color:#cbd5e1!important}
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card>div:first-child>span:last-child{
  background:#0f172a!important;color:#e2e8f0!important;border:1px solid #475569!important;padding:.28rem .55rem!important;border-radius:.55rem!important;
}
body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon>div:first-child>span{background:#1e293b!important;color:#e2e8f0!important;border-color:#475569!important}

/* ---------- §19 Forest-steppe vs Steppe ---------- */
body.hl-v84.hl-ds2 main .hl-v6-forest-card{
  background:linear-gradient(145deg,#12382f,#172a2b)!important;border-color:#10b981!important;color:#ecfdf5!important;
}
body.hl-v84.hl-ds2 main .hl-v6-forest-card :is(h3,p,li,span,strong,b){color:#ecfdf5!important}
body.hl-v84.hl-ds2 main .hl-v6-forest-card .bg-emerald-600{background:#047857!important;color:#fff!important}
body.hl-v84.hl-ds2 main .hl-v6-steppe-card{
  background:linear-gradient(145deg,#352516,#261b13)!important;border-color:#d97706!important;color:#fff7ed!important;
}
body.hl-v84.hl-ds2 main .hl-v6-steppe-card :is(h3,p,li,span,strong,b){color:#fff7ed!important}
body.hl-v84.hl-ds2 main .hl-v6-steppe-card .bg-amber-700{background:#b45309!important;color:#fff!important}

/* ---------- §23 Egyptian social hierarchy ---------- */
body.hl-v84.hl-ds2 main .hl-v6-egypt-society{background:linear-gradient(145deg,#1d293b,#172033)!important}
body.hl-v84.hl-ds2 main .hl-v6-egypt-society button{
  color:#fff!important;border-color:rgba(255,255,255,.17)!important;text-align:left!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2 main .hl-v6-egypt-society button>span{color:#fff!important}
body.hl-v84.hl-ds2 main .hl-v6-egypt-society button>span:last-child{
  background:rgba(2,6,23,.35)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;
}
body.hl-v84.hl-ds2 main #lvl-pharaoh{background:#78350f!important}
body.hl-v84.hl-ds2 main #lvl-nobles{background:#854d0e!important}
body.hl-v84.hl-ds2 main #lvl-scribes{background:#075985!important}
body.hl-v84.hl-ds2 main #lvl-craftsmen{background:#047857!important}
body.hl-v84.hl-ds2 main #lvl-peasants{background:#365314!important}
body.hl-v84.hl-ds2 main #lvl-slaves{background:#475569!important}
body.hl-v84.hl-ds2 main #social-detail{background:#111827!important;border-color:#475569!important}
body.hl-v84.hl-ds2 main #social-detail :is(h4,p,strong,b){color:#e5e7eb!important}

/* ---------- §24 Papyrus + vocabulary, plus flip cards site-wide ---------- */
body.hl-v84.hl-ds2 main .hl-v6-papyrus-steps>.space-y-3>.hl-card{
  background:#1b2638!important;border-color:#475569!important;color:#e2e8f0!important;
}
body.hl-v84.hl-ds2 main .hl-v6-papyrus-steps>.space-y-3>.hl-card>span:first-child{background:#92400e!important;color:#fff7ed!important}
body.hl-v84.hl-ds2 main .hl-v6-papyrus-steps>.space-y-3>.hl-card b{color:#fbbf24!important}
body.hl-v84.hl-ds2 main .hl-v6-papyrus-steps>.space-y-3>.hl-card p{color:#e2e8f0!important}
body.hl-v84.hl-ds2 main .flip-card-front{
  background:linear-gradient(145deg,#1d293b,#172033)!important;color:#f8fafc!important;border-color:#475569!important;
}
body.hl-v84.hl-ds2 main .flip-card-front :is(.font-bold,h3,h4,strong){color:#f8fafc!important;text-shadow:none!important}
body.hl-v84.hl-ds2 main .flip-card-front :is([class*="text-[10px]"],small){color:#cbd5e1!important}
body.hl-v84.hl-ds2 main .flip-card-front:hover{border-color:#f59e0b!important}
body.hl-v84.hl-ds2 main .flip-card-back{background:#2a2118!important;color:#fff7ed!important;border:1px solid #92400e!important}
body.hl-v84.hl-ds2 main .flip-card-back *{color:inherit!important}

/* ---------- Quiz / knowledge-check system ---------- */
body.hl-v84.hl-ds2 main #quiz,
body.hl-v84.hl-ds2 main .quiz-shell{
  max-width:900px!important;margin-inline:auto!important;
  background:radial-gradient(circle at 90% 10%,rgba(var(--hl-rgb),.09),transparent 22rem),linear-gradient(135deg,#172033,#0f172a)!important;
  border:1px solid rgba(var(--hl-rgb),.30)!important;color:var(--hl-body)!important;
}
body.hl-v84.hl-ds2 main :is(.quiz-q-box,.quiz-q,.hl-v84-quiz-question){
  background:#151f30!important;color:#e5e7eb!important;border:1px solid #334155!important;
}
body.hl-v84.hl-ds2 main :is(.quiz-q-box,.quiz-q,.hl-v84-quiz-question)>p:first-child{color:#f8fafc!important}

/* Base answer button. High specificity intentionally beats legacy #quiz button rules. */
body.hl-v84.hl-ds2 main #quiz button.hl-v84-quiz-option,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option,
body.hl-v84.hl-ds2 main :is(.quiz-opt,.q-btn){
  background:#1e293b!important;color:#f8fafc!important;border:1px solid #475569!important;
  box-shadow:none!important;text-shadow:none!important;opacity:1;
}
body.hl-v84.hl-ds2 main #quiz button.hl-v84-quiz-option:hover:not(:disabled),
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option:hover:not(:disabled),
body.hl-v84.hl-ds2 main :is(.quiz-opt,.q-btn):hover:not(:disabled){
  background:#26354a!important;border-color:#f59e0b!important;color:#fff!important;transform:translateY(-1px);
}

/* Selected-only state used by §4–§5 style quizzes. */
body.hl-v84.hl-ds2 main #quiz button.hl-v84-quiz-option.is-selected,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option.is-selected,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-amber-600"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-orange-600"]{
  background:#92400e!important;color:#fff7ed!important;border:2px solid #f59e0b!important;opacity:1!important;
}

/* Correct state from all current JS conventions. */
body.hl-v84.hl-ds2 main #quiz button.hl-v84-quiz-option.is-correct,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option.is-correct,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-emerald-50"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-emerald-100"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-emerald-500"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-emerald-600"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-green-600"]{
  background:var(--hl-ok)!important;color:var(--hl-ok-text)!important;border:2px solid var(--hl-ok-border)!important;opacity:1!important;
}

/* Wrong state. */
body.hl-v84.hl-ds2 main #quiz button.hl-v84-quiz-option.is-wrong,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option.is-wrong,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-rose-50"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-rose-100"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-rose-500"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-rose-600"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-red-600"]{
  background:var(--hl-bad)!important;color:var(--hl-bad-text)!important;border:2px solid var(--hl-bad-border)!important;opacity:1!important;
}

/* Non-selected disabled answers remain readable, not ghosted to invisibility. */
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option:disabled:not(.is-correct):not(.is-wrong):not(.is-selected){
  background:#172033!important;color:#cbd5e1!important;border-color:#334155!important;opacity:.72!important;
}

body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback).is-correct,
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback)[class*="bg-emerald"],
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback)[class*="bg-green"]{
  background:var(--hl-ok)!important;color:var(--hl-ok-text)!important;border:1px solid var(--hl-ok-border)!important;
}
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback).is-wrong,
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback)[class*="bg-rose"],
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback)[class*="bg-red"]{
  background:var(--hl-bad)!important;color:var(--hl-bad-text)!important;border:1px solid var(--hl-bad-border)!important;
}
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback):not(.hidden){padding:.7rem .85rem!important;border-radius:.75rem!important}
body.hl-v84.hl-ds2 main :is(.quiz-feedback,.quiz-exp,.hl-v84-quiz-feedback) *{color:inherit!important}

/* Score cards: visible before and after answering. */
body.hl-v84.hl-ds2 main :is(#quiz-score,#quiz-score-text,#scoreText,[id*="quiz-result"],[id*="quiz-final"],[id="test-result"]){
  color:#fbbf24!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2 main [id*="quiz-final-msg"]{color:#e5e7eb!important}

/* ---------- Charts ---------- */
body.hl-v84.hl-ds2 main .chart-container{background:transparent!important;color:#cbd5e1!important}
body.hl-v84.hl-ds2 main canvas{max-width:100%!important}

/* ---------- Footer — shared base (Stage 3.1P.1) ---------- */
body.hl-v84 .historylab-footer{
  width:100%;
  max-width:1180px;
  margin:42px auto 0;
  padding:0 22px 30px;
  font-family:var(--hl-font-body);
}
body.hl-v84 .historylab-footer__inner{
  border-top:1px solid rgba(148,163,184,.30)!important;
  padding-top:22px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:26px;
  color:#94a3b8!important;
  font-size:13px;
  line-height:1.6;
}
body.hl-v84 .historylab-footer p{margin:0 0 6px}
body.hl-v84 :is(.historylab-footer__brand,.historylab-footer__copy,.historylab-footer__title){color:#cbd5e1!important}
body.hl-v84 .historylab-footer__brand{font-size:15px;font-weight:800;margin-bottom:5px}
body.hl-v84 .historylab-footer__copy{font-weight:650}
body.hl-v84 .historylab-footer__title{font-weight:800;margin-bottom:5px}
body.hl-v84 .historylab-footer__note{color:#94a3b8!important;font-size:12px}
body.hl-v84 .historylab-footer__textbook{color:#94a3b8!important}
body.hl-v84 .historylab-footer__textbook strong{color:#cbd5e1!important}
@media(max-width:720px){
  body.hl-v84 .historylab-footer__inner{grid-template-columns:minmax(0,1fr);gap:14px}
  body.hl-v84 .historylab-footer{margin-top:30px;padding-left:.75rem!important;padding-right:.75rem!important}
}

/* ---------- Landing pages ---------- */
body.hl-v84.historylab-evolved:not(.hl-ds2){background:#090c10!important;color:#e5e7eb!important}
body.hl-v84.historylab-evolved:not(.hl-ds2) :is(h1,h2,h3){color:#f8fafc}

/* ---------- Responsive ---------- */
@media(max-width:720px){
  body.hl-v84.hl-ds2 main{padding-inline:12px!important;font-size:16px!important}
  body.hl-v84.hl-ds2 main>section{border-radius:16px!important;padding:1rem!important}
  body.hl-v84.hl-ds2 main>section.hl-hero{margin-top:1.25rem!important;border-radius:18px!important;padding:1.25rem!important}
  body.hl-v84.hl-ds2 main>section.hl-hero .hl-h1,body.hl-v84.hl-ds2 main>section.hl-hero h1{font-size:2.05rem!important}
  body.hl-v84.hl-ds2 main .hl-status-badge{max-width:100%!important;min-width:0!important}
  body.hl-v84.hl-ds2 main .hl-v7-period-pill{font-size:.8rem!important}
  body.hl-v84.hl-ds2 main table{min-width:680px}
  body.hl-v84.hl-ds2 main .overflow-x-auto{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  body.hl-v84.hl-ds2 main .hl-v6-meso-pantheon .god-card{min-height:0!important}
}

/* =========================================================
   THEME v8.1 — QUIZ STABILITY + INTERACTION CONTRAST
   ========================================================= */

/* §5 uses a custom selected colour rather than amber. Treat it as a selected answer. */
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class*="bg-[#2c4c3e]"],
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option.is-selected{
  background:#92400e!important;
  color:#fff7ed!important;
  border:2px solid #f59e0b!important;
  opacity:1!important;
}

/* §31 uses crimson for an incorrect answer. */
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option[class~="bg-crimson-600"]{
  background:var(--hl-bad)!important;
  color:var(--hl-bad-text)!important;
  border:2px solid var(--hl-bad-border)!important;
  opacity:1!important;
}

/* Clear immediate feedback for the compact §1–§2 quizzes. */
body.hl-v84.hl-ds2 main .hl-v84-inline-feedback{
  margin-top:.6rem!important;
  padding:.68rem .82rem!important;
  border-radius:.75rem!important;
  font-size:.9rem!important;
  font-weight:700!important;
  line-height:1.45!important;
  background:#172033!important;
  color:#e5e7eb!important;
  border:1px solid #475569!important;
}
body.hl-v84.hl-ds2 main .hl-v84-inline-feedback.is-correct{
  background:var(--hl-ok)!important;
  color:var(--hl-ok-text)!important;
  border-color:var(--hl-ok-border)!important;
}
body.hl-v84.hl-ds2 main .hl-v84-inline-feedback.is-wrong{
  background:var(--hl-bad)!important;
  color:var(--hl-bad-text)!important;
  border-color:var(--hl-bad-border)!important;
}

/* Radio-button tests (§33–§35): make the whole selected row visibly selected. */
body.hl-v84.hl-ds2 main .quiz-q label{
  background:#172033!important;
  color:#e5e7eb!important;
  border:1px solid #334155!important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;
}
body.hl-v84.hl-ds2 main .quiz-q label:hover{
  background:#223047!important;
  color:#f8fafc!important;
  border-color:#64748b!important;
}
body.hl-v84.hl-ds2 main .quiz-q label:has(input[type="radio"]:checked){
  background:#3b2f14!important;
  color:#fff7ed!important;
  border:2px solid #f59e0b!important;
}
body.hl-v84.hl-ds2 main .quiz-q input[type="radio"]{
  accent-color:#f59e0b!important;
  width:1rem;
  height:1rem;
  flex:0 0 auto;
}

/* Semantic result panels for radio tests and score cards. */
body.hl-v84.hl-ds2 main :is(#test-result,#quiz-result)[class*="bg-emerald"],
body.hl-v84.hl-ds2 main :is(#quizResult)[class*="bg-emerald"]{
  background:var(--hl-ok)!important;
  color:var(--hl-ok-text)!important;
  border:1px solid var(--hl-ok-border)!important;
}
body.hl-v84.hl-ds2 main :is(#test-result,#quiz-result)[class*="bg-rose"],
body.hl-v84.hl-ds2 main :is(#quizResult)[class*="bg-rose"]{
  background:var(--hl-bad)!important;
  color:var(--hl-bad-text)!important;
  border:1px solid var(--hl-bad-border)!important;
}
body.hl-v84.hl-ds2 main :is(#test-result,#quiz-result)[class*="bg-amber"],
body.hl-v84.hl-ds2 main :is(#quizResult)[class*="bg-amber"]{
  background:#3b2f14!important;
  color:#fde68a!important;
  border:1px solid #d97706!important;
}
body.hl-v84.hl-ds2 main :is(#test-result,#quiz-result,#quizResult) *{color:inherit!important}

/* Disabled alternatives remain visibly disabled without looking broken. */
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option:disabled{
  cursor:default!important;
}
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option:disabled.is-correct,
body.hl-v84.hl-ds2 main button.hl-v84-quiz-option:disabled.is-wrong{
  opacity:1!important;
}

/* §3 quiz running/final score panel. */
body.hl-v84.hl-ds2 main .hl-v84-quiz-summary{
  max-width:42rem!important;
  margin:1rem auto 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.75rem!important;
  flex-wrap:wrap!important;
  padding:.8rem 1rem!important;
  border-radius:.9rem!important;
  background:#172033!important;
  color:#e5e7eb!important;
  border:1px solid #475569!important;
}
body.hl-v84.hl-ds2 main .hl-v84-quiz-summary.is-finished{
  background:#3b2f14!important;
  color:#fde68a!important;
  border-color:#d97706!important;
}
body.hl-v84.hl-ds2 main .hl-v84-quiz-summary button{
  background:#92400e!important;
  color:#fff7ed!important;
  border:1px solid #f59e0b!important;
  padding:.48rem .75rem!important;
  border-radius:.65rem!important;
  font-weight:800!important;
}


/* =========================================================
   v8.4 FINAL COMPONENT CONTRACT
   This is the only shared contrast authority. Page-native CSS
   may define layout, but semantic states below own foreground /
   background pairs to prevent white-on-white and dark-on-dark.
   ========================================================= */

/* Landing pages: remove the old light-card island look. */
body.hl-v84:not(.hl-ds2){background:#090c10!important;color:#e5e7eb!important}
body.hl-v84:not(.hl-ds2) :is(.card,.quick,.panel,.chapter-card){
  background:linear-gradient(145deg,#172033,#111827)!important;
  color:#e5e7eb!important;
  border-color:#334155!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
body.hl-v84:not(.hl-ds2) :is(.card,.quick,.panel,.chapter-card) :is(h1,h2,h3,h4,h5,h6){color:#f8fafc!important}
body.hl-v84:not(.hl-ds2) :is(.card,.quick,.panel,.chapter-card) :is(p,li,small,span){color:#cbd5e1!important}
body.hl-v84:not(.hl-ds2) .card.disabled,
body.hl-v84:not(.hl-ds2) .card[aria-disabled="true"]{opacity:.72!important;background:#111827!important}
body.hl-v84:not(.hl-ds2) .card :is(a,button){color:#f8fafc}

/* Semantic tabs: JS changes state, CSS changes color. */
body.hl-v84 .hl-v84-tab{transition:background-color .18s,border-color .18s,color .18s,transform .18s!important}
body.hl-v84 .hl-v84-tab.is-inactive,
body.hl-v84 .hl-v84-tab:not(.is-active):not(.active){
  background:#1d293b!important;color:#e2e8f0!important;border-color:#475569!important;
}
body.hl-v84 .hl-v84-tab.is-active,
body.hl-v84 .hl-v84-tab.active{
  background:#92400e!important;color:#fff7ed!important;border-color:#f59e0b!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.2)!important;
}

/* Light accent surfaces must use dark foregrounds. */
body.hl-v84 main :is(
  [class~="bg-amber-300"],[class~="bg-amber-400"],[class~="bg-yellow-300"],[class~="bg-yellow-400"],
  [class~="bg-orange-200"],[class~="bg-orange-300"],[class~="bg-amber-200"],[class~="bg-yellow-200"]
){color:#2b1807!important;text-shadow:none!important}
body.hl-v84 main :is(
  [class~="bg-amber-300"],[class~="bg-amber-400"],[class~="bg-yellow-300"],[class~="bg-yellow-400"],
  [class~="bg-orange-200"],[class~="bg-orange-300"],[class~="bg-amber-200"],[class~="bg-yellow-200"]
) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,small,label){color:#2b1807!important;text-shadow:none!important}

/* Explicit museum/papyrus cards: if a page intentionally keeps a light surface,
   force a readable ink colour rather than inheriting the dark-theme foreground. */
body.hl-v84 main :is(.hl-v84-light,[class~="bg-ochre-50"],[class~="bg-papyrusWhite"]){
  background:#fff7ed!important;color:#3f2a16!important;border-color:#f59e0b!important;
}
body.hl-v84 main :is(.hl-v84-light,[class~="bg-ochre-50"],[class~="bg-papyrusWhite"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,small,label){
  color:#3f2a16!important;text-shadow:none!important;
}

/* §13 ziggurat: keep three distinct levels without sacrificing contrast. */
body.hl-v84 main [class~="bg-amber-400"]{color:#2b1807!important}
body.hl-v84 main [class~="bg-orange-600"]{color:#fff7ed!important}
body.hl-v84 main [class~="bg-stone-700"]{color:#f8fafc!important}

/* Canonical quiz contract: states are visual and do not depend on legacy utility order. */
body.hl-v84 .hl-v84-quiz-option,
body.hl-v84 .hl-v84-quiz-option{
  background:#1e293b!important;color:#f8fafc!important;border-color:#475569!important;
  opacity:1!important;filter:none!important;
}
body.hl-v84 .hl-v84-quiz-option.is-selected,
body.hl-v84 .hl-v84-quiz-option.is-selected{
  background:#3b2f14!important;color:#fde68a!important;border-color:#f59e0b!important;
}
body.hl-v84 .hl-v84-quiz-option.is-correct,
body.hl-v84 .hl-v84-quiz-option.is-correct{
  background:#064e3b!important;color:#d1fae5!important;border-color:#10b981!important;
}
body.hl-v84 .hl-v84-quiz-option.is-wrong,
body.hl-v84 .hl-v84-quiz-option.is-wrong{
  background:#7f1d1d!important;color:#fee2e2!important;border-color:#ef4444!important;
}
body.hl-v84 .hl-v84-quiz-option:disabled,
body.hl-v84 .hl-v84-quiz-option:disabled{opacity:.78!important;cursor:not-allowed!important}
body.hl-v84 .hl-v84-quiz-option.is-correct:disabled,
body.hl-v84 .hl-v84-quiz-option.is-wrong:disabled,
body.hl-v84 .hl-v84-quiz-option.is-correct:disabled,
body.hl-v84 .hl-v84-quiz-option.is-wrong:disabled{opacity:1!important}

/* Radio quiz cards (§33–§35). */
body.hl-v84 label:has(input[type="radio"]:checked){
  background:#3b2f14!important;color:#fde68a!important;border-color:#f59e0b!important;
}
body.hl-v84 label:has(input[type="radio"]:checked) :is(span,p,strong){color:inherit!important}

/* Hints: never use success green for a hint. */
body.hl-v84 .hl-v84-hint,body.hl-v84 .hl-v84-hint,body.hl-v84 .hl-hint{
  background:#3b2f14!important;color:#fde68a!important;border:1px solid #b45309!important;
}
body.hl-v84 :is(.hl-v84-hint,.hl-v84-hint,.hl-hint) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,small){color:#fde68a!important}

/* Tables: one readable system across all comparison lessons. */
body.hl-v84 table.hl-v84-table{background:#172033!important;color:#e5e7eb!important;border-color:#475569!important}
body.hl-v84 table.hl-v84-table thead,
body.hl-v84 table.hl-v84-table thead tr{background:#0f172a!important;color:#f8fafc!important}
body.hl-v84 table.hl-v84-table :is(th,td){color:#e5e7eb!important;border-color:#475569!important;background:transparent!important}
body.hl-v84 table.hl-v84-table th:first-child,
body.hl-v84 table.hl-v84-table td:first-child{color:#fdba74!important;font-weight:700!important}
body.hl-v84 table.hl-v84-table tbody tr:nth-child(even){background:#1b2739!important}
body.hl-v84 table.hl-v84-table tbody tr:nth-child(odd){background:#172033!important}

/* Missing crimson shades from the Vedic lesson are normalized to real red tokens. */
body.hl-v84 .text-crimson-600{color:#f87171!important}

/* Footer contrast. */
body.hl-v84 footer{color:#cbd5e1!important}
body.hl-v84 footer :is(p,span,small){color:#94a3b8!important}
body.hl-v84 footer :is(h1,h2,h3,h4,strong,a){color:#e2e8f0!important}

/* Chart captions / legends get a readable fallback even before Chart.js tuning runs. */
body.hl-v84 canvas+*, body.hl-v84 .chart-note{color:#cbd5e1!important}

@media(max-width:700px){
  body.hl-v84.hl-ds2 main{font-size:16px!important;padding-inline:12px!important}
  body.hl-v84 .hl-v84-tab{white-space:normal!important;overflow-wrap:anywhere!important}
}


/* =========================================================
   THEME v8.4 — FEEDBACK & CHART CONTRAST CLEANUP
   One semantic contract for all single-choice information tabs.
   Page scripts may change content, but they no longer own visual state.
   ========================================================= */
body.hl-v84{
  --hl-choice-bg:#1d293b;
  --hl-choice-hover:#26354a;
  --hl-choice-border:#475569;
  --hl-choice-text:#e2e8f0;
  --hl-choice-active-bg:#92400e;
  --hl-choice-active-border:#f59e0b;
  --hl-choice-active-text:#fff7ed;
}
body.hl-v84.hl-section-2{
  --hl-choice-active-bg:#3730a3;
  --hl-choice-active-border:#818cf8;
  --hl-choice-active-text:#eef2ff;
}

/* Standard information selectors. Never return to white/cream after a click. */
body.hl-v84 main .hl-v84-choice{
  background:var(--hl-choice-bg)!important;
  color:var(--hl-choice-text)!important;
  border-color:var(--hl-choice-border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  opacity:1!important;
  filter:none!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
body.hl-v84 main .hl-v84-choice *{color:inherit!important;text-shadow:none!important}
body.hl-v84 main .hl-v84-choice:hover:not(:disabled){
  background:var(--hl-choice-hover)!important;
  color:#f8fafc!important;
  border-color:#64748b!important;
}
body.hl-v84 main .hl-v84-choice.is-active,
body.hl-v84 main .hl-v84-choice[aria-pressed="true"]{
  background:var(--hl-choice-active-bg)!important;
  color:var(--hl-choice-active-text)!important;
  border-color:var(--hl-choice-active-border)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hl-choice-active-border) 32%,transparent)!important;
  transform:translateY(-1px)!important;
}
body.hl-v84 main .hl-v84-choice.is-inactive,
body.hl-v84 main .hl-v84-choice[aria-pressed="false"]{
  background:var(--hl-choice-bg)!important;
  color:var(--hl-choice-text)!important;
  border-color:var(--hl-choice-border)!important;
  transform:none!important;
}
body.hl-v84 main .hl-v84-choice:disabled{opacity:.68!important;cursor:not-allowed!important}

/* Category-coloured controls (social tiers, varnas, hotspots) keep their own
   palette; selection is communicated by an accessible focus ring, not by
   replacing the category colour. */
body.hl-v84 main .hl-v84-preserve-choice{
  transition:outline-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .16s ease!important;
}
body.hl-v84 main .hl-v84-preserve-choice.is-active,
body.hl-v84 main .hl-v84-preserve-choice[aria-pressed="true"]{
  outline:3px solid #fbbf24!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(245,158,11,.16)!important;
  transform:translateY(-1px)!important;
  filter:none!important;
}
body.hl-v84 main .hl-v84-preserve-choice.is-inactive,
body.hl-v84 main .hl-v84-preserve-choice[aria-pressed="false"]{
  outline:0 solid transparent!important;
  transform:none!important;
}

/* Runtime-recognised hint component. This explicitly overrides old amber-200
   foreground utilities that caused dark-on-dark hint text in §10. */
body.hl-v84 main .hl-v84-hint,
body.hl-v84 main .hl-v84-hint[class*="bg-"],
body.hl-v84 main :is(.hl-v84-hint,.hl-hint,.hl-v84-hint) *{
  background:#3b2f14!important;
  color:#fde68a!important;
  border-color:#d97706!important;
  text-shadow:none!important;
}
body.hl-v84 main .hl-v84-hint{
  border:1px solid #d97706!important;
  border-radius:.75rem!important;
  padding:.58rem .76rem!important;
}

/* Result colours are reserved for assessment, never for ordinary tabs. */
body.hl-v84 main .hl-v84-quiz-option.is-correct{background:#064e3b!important;color:#d1fae5!important;border-color:#10b981!important}
body.hl-v84 main .hl-v84-quiz-option.is-wrong{background:#7f1d1d!important;color:#fee2e2!important;border-color:#ef4444!important}
body.hl-v84 main .hl-v84-quiz-option.is-selected{background:#3b2f14!important;color:#fde68a!important;border-color:#f59e0b!important}

/* Avoid accidental light inactive buttons from legacy JS even during the same
   click frame. Semantic classes take final authority. */
body.hl-v84 main button.hl-v84-choice:is(
  [class~="bg-white"],[class~="bg-slate-100"],[class~="bg-stone-100"],[class~="bg-amber-50"],[class~="bg-amber-100"],
  [class~="bg-sky-50"],[class~="bg-sky-100"],[class~="bg-emerald-50"],[class~="bg-emerald-100"],
  [class~="bg-rose-50"],[class~="bg-rose-100"],[class~="bg-cyan-50"],[class~="bg-cyan-100"]
){background:var(--hl-choice-bg)!important;color:var(--hl-choice-text)!important}
body.hl-v84 main button.hl-v84-choice.is-active:is(
  [class~="bg-white"],[class~="bg-slate-100"],[class~="bg-stone-100"],[class~="bg-amber-50"],[class~="bg-amber-100"],
  [class~="bg-sky-50"],[class~="bg-sky-100"],[class~="bg-emerald-50"],[class~="bg-emerald-100"],
  [class~="bg-rose-50"],[class~="bg-rose-100"],[class~="bg-cyan-50"],[class~="bg-cyan-100"]
){background:var(--hl-choice-active-bg)!important;color:var(--hl-choice-active-text)!important}

@media(max-width:700px){
  body.hl-v84 main .hl-v84-choice{white-space:normal!important;overflow-wrap:anywhere!important;min-width:0!important}
}

/* v8.4 final specificity guard: legacy page selectors often include both
   hl-card and a pale bg-* utility with !important. Semantic interaction state
   must win even against those older rules. */
body.hl-v84.hl-ds2 main button.hl-v84-choice,
body.hl-v84.hl-ds2 main button.hl-v84-choice.is-inactive,
body.hl-v84.hl-ds2 main button.hl-v84-choice[aria-pressed="false"]{
  background:#1d293b!important;
  color:#e2e8f0!important;
  border-color:#475569!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2 main button.hl-v84-choice.is-active,
body.hl-v84.hl-ds2 main button.hl-v84-choice[aria-pressed="true"]{
  background:var(--hl-choice-active-bg)!important;
  color:var(--hl-choice-active-text)!important;
  border-color:var(--hl-choice-active-border)!important;
}
body.hl-v84.hl-ds2 main button.hl-v84-choice :is(span,strong,b,small,p),
body.hl-v84.hl-ds2 main button.hl-v84-choice.is-inactive :is(span,strong,b,small,p),
body.hl-v84.hl-ds2 main button.hl-v84-choice.is-active :is(span,strong,b,small,p){
  color:inherit!important;
  text-shadow:none!important;
}


/* =========================================================
   THEME v8.4 — FEEDBACK & CHART CONTRAST CLEANUP
   Final-authority rules for dynamic feedback, ziggurat labels,
   chart readability and the course home CTA palette.
   ========================================================= */

:root{
  --hl-feedback-success-bg:#064e3b;
  --hl-feedback-success-text:#d1fae5;
  --hl-feedback-success-border:#10b981;
  --hl-feedback-warning-bg:#3b2f14;
  --hl-feedback-warning-text:#fde68a;
  --hl-feedback-warning-border:#f59e0b;
  --hl-feedback-error-bg:#7f1d1d;
  --hl-feedback-error-text:#fee2e2;
  --hl-feedback-error-border:#ef4444;
  --hl-chart-steel:#94a3b8;
}

/* Dynamic feedback must never inherit pale legacy surfaces with pale text. */
body.hl-v84 main .hl-v84-feedback{
  border-width:1px!important;
  border-style:solid!important;
  border-radius:.85rem!important;
  padding:.85rem 1rem!important;
  text-shadow:none!important;
  opacity:1!important;
}
body.hl-v84 main .hl-v84-feedback.is-success,
body.hl-v84 main #smelt-result[class*="bg-emerald"],
body.hl-v84 main #smelt-result[class*="bg-green"]{
  background:var(--hl-feedback-success-bg)!important;
  color:var(--hl-feedback-success-text)!important;
  border-color:var(--hl-feedback-success-border)!important;
}
body.hl-v84 main .hl-v84-feedback.is-warning,
body.hl-v84 main #smelt-result[class*="bg-amber"],
body.hl-v84 main #smelt-result[class*="bg-yellow"],
body.hl-v84 main #smelt-result[class*="bg-orange"]{
  background:var(--hl-feedback-warning-bg)!important;
  color:var(--hl-feedback-warning-text)!important;
  border-color:var(--hl-feedback-warning-border)!important;
}
body.hl-v84 main .hl-v84-feedback.is-error,
body.hl-v84 main #smelt-result[class*="bg-rose"],
body.hl-v84 main #smelt-result[class*="bg-red"]{
  background:var(--hl-feedback-error-bg)!important;
  color:var(--hl-feedback-error-text)!important;
  border-color:var(--hl-feedback-error-border)!important;
}
body.hl-v84 main :is(.hl-v84-feedback,#smelt-result) :is(span,p,strong,b,em,small){
  color:inherit!important;
  background:transparent!important;
  text-shadow:none!important;
}

/* §13: the bright top tier needs deliberately dark type. */
body.hl-v84.hl-ds2 main .hl-v84-zig-top{
  background:#fbbf24!important;
  border-color:#d97706!important;
  color:#2b1807!important;
}
body.hl-v84.hl-ds2 main .hl-v84-zig-top .hl-v84-zig-label{
  color:#2b1807!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2 main .hl-v84-zig-top:hover{
  background:#fcd34d!important;
  border-color:#f59e0b!important;
}

/* Chart canvases sit on dark cards; keep chart area unobstructed. */
body.hl-v84.hl-ds2 main .chart-container,
body.hl-v84.hl-ds2 main .chart-container canvas{
  background:transparent!important;
}

/* Protect selected interaction buttons from low-contrast legacy foreground utilities. */
body.hl-v84 main .hl-v84-choice.is-active :is(span,strong,b,small,p),
body.hl-v84 main .hl-v84-preserve-choice.is-active :is(span,strong,b,small,p){
  color:inherit!important;
  text-shadow:none!important;
}


/* =========================================================
   Theme v8.4.2 — Chart & Content Recovery
   Final-authority rules: readable hints + non-destructive chart fallback.
   ========================================================= */
body.hl-v842 main .hl-v84-hint,
body.hl-v842 main .hl-v84-hint[class*="bg-"],
body.hl-v842 main :is(.hl-v84-hint,.hl-hint){
  display:block;
  background:#3b2f14!important;
  color:#fde68a!important;
  border:1px solid #d97706!important;
  border-radius:.8rem!important;
  padding:.75rem .9rem!important;
  text-shadow:none!important;
}
body.hl-v842 main :is(.hl-v84-hint,.hl-hint) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,b,em,small){
  color:#fde68a!important;
  text-shadow:none!important;
}
body.hl-v842 main .hl-v842-chart-fallback{
  margin:.75rem auto 0;
  max-width:36rem;
  padding:.75rem .9rem;
  border:1px solid rgba(245,158,11,.55);
  border-radius:.8rem;
  background:#3b2f14;
  color:#fde68a;
  font-size:.9rem;
  line-height:1.5;
  text-align:center;
}
body.hl-v842 main .chart-container canvas{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}

/* Course landing and lesson catalogues: readable descriptions and white CTAs.
   Restricted to index pages; lesson content and quiz colours are unaffected. */
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card p{
  color:#cbd5e1!important;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card .text-slate-500{
  color:#94a3b8!important;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a{
  color:#ffffff!important;
  background-color:var(--hl-cta-bg,#334155)!important;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a :is(span,i){
  color:inherit!important;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a:is(:hover,:focus-visible,:active){
  color:#ffffff!important;
  background-color:var(--hl-cta-hover,#1e293b)!important;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-amber-600{--hl-cta-bg:#b45309;--hl-cta-hover:#92400e}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-orange-600{--hl-cta-bg:#c2410c;--hl-cta-hover:#9a3412}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-yellow-600{--hl-cta-bg:#a16207;--hl-cta-hover:#854d0e}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-purple-600{--hl-cta-bg:#7e22ce;--hl-cta-hover:#6b21a8}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-indigo-600{--hl-cta-bg:#4338ca;--hl-cta-hover:#3730a3}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-rose-600{--hl-cta-bg:#be123c;--hl-cta-hover:#9f1239}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-red-600{--hl-cta-bg:#b91c1c;--hl-cta-hover:#991b1b}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-emerald-600{--hl-cta-bg:#047857;--hl-cta-hover:#065f46}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-teal-600{--hl-cta-bg:#0f766e;--hl-cta-hover:#115e59}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-cyan-600{--hl-cta-bg:#0e7490;--hl-cta-hover:#155e75}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a.bg-blue-600{--hl-cta-bg:#1d4ed8;--hl-cta-hover:#1e40af}

/* Stage 1: reading comfort and responsive layout on the three index pages. */
body.hl-v84.hl-home header h1{
  line-height:1.1;
  overflow-wrap:break-word;
}
body.hl-v84:not(.hl-ds2) #cardsGrid{
  grid-template-columns:minmax(0,1fr);
  gap:1.25rem;
  align-items:stretch;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card{
  min-width:0;
  padding:1.25rem;
  row-gap:1.25rem;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card h3{
  margin-bottom:.75rem;
  line-height:1.35;
  overflow-wrap:break-word;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card p{
  font-size:.9375rem;
  line-height:1.6;
  margin-bottom:1rem;
  overflow-wrap:break-word;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card .flex-wrap{
  font-size:.75rem;
  line-height:1.5;
  gap:.5rem;
  margin-bottom:0;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card .flex-wrap>span{
  max-width:100%;
  overflow-wrap:break-word;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card .text-slate-500{
  font-size:.8125rem;
  line-height:1.5;
}
body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card>a{
  margin-top:auto;
  min-height:2.75rem;
  padding-inline:.75rem;
}
@media(min-width:768px){
  body.hl-v84:not(.hl-ds2) #cardsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
  }
  body.hl-v84:not(.hl-ds2) #cardsGrid .topic-card{padding:1.5rem}
}
@media(min-width:1200px){
  body.hl-v84:not(.hl-ds2) #cardsGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}


/* Stage 2.2B — Interactive Text Fit Cleanup
   Keeps interactive labels readable without clipping on narrow cards/screens. */
body.hl-v84 main :is(button,[role="button"]){
  min-width:0;
}
body.hl-v84 main :is(.symbol-btn,.pillar-btn,.clay-btn,.pyramid-tier,.varna-tab-btn,.quiz-opt,.court-opt,.q-btn,.q2-btn){
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
  text-wrap:pretty;
  line-height:1.3;
}
body.hl-v84 main :is(.symbol-btn,.pillar-btn,.clay-btn,.pyramid-tier,.varna-tab-btn){
  min-height:2.75rem;
}
body.hl-v84 main .hl-interactive-label{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  text-wrap:balance;
  overflow-wrap:anywhere;
  line-height:1.25;
  font-size:clamp(.68rem,1vw,.78rem);
}
body.hl-v84 main .hl-symbol-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}
body.hl-v84 main .hl-symbol-button{
  display:flex;
  min-width:0;
  min-height:6.75rem;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.42rem;
  padding:.75rem .5rem;
  text-align:center;
  line-height:1.15;
  overflow-wrap:anywhere;
}
body.hl-v84 main .hl-symbol-button .hl-symbol-icon{
  display:block;
  font-size:1.7rem;
  line-height:1;
}
body.hl-v84 main .hl-symbol-button .hl-symbol-label{
  display:block;
  max-width:100%;
  font-size:clamp(.9rem,1.15vw,1.08rem);
  font-weight:700;
  line-height:1.15;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
@media(max-width:460px){
  body.hl-v84 main .hl-symbol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84 main .hl-symbol-button{min-height:6rem}
}

/* Stage 2.2C — unified hero heading accent */
:root {
  --hl-hero-accent: #f6c56f;
}
.hl-hero-accent {
  color: var(--hl-hero-accent) !important;
}

/* Stage 2.2C Part II fix — hero accent inside legacy sticky headers */
body.hl-v84.hl-ds2 .hl-hero-accent,
body.hl-v84.hl-ds2 header.sticky .hl-hero-accent,
body.hl-v84.hl-ds2 header.sticky :is(h1,h2,h3,h4,p,a,span,button).hl-hero-accent {
  color: var(--hl-hero-accent) !important;
}


/* Stage 2.2D.1 — Eyebrow Contrast & Legacy Cleanup */
body.hl-v84 .hl-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: .42rem !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: .4rem .82rem !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(253, 230, 138, .48) !important;
  background: #111827 !important;
  color: #fde68a !important;
  font-size: clamp(.72rem, .69rem + .12vw, .82rem) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.hl-v84 .hl-eyebrow :is(span,i,svg) {
  color: inherit !important;
}


/* Stage 2.2E — Unified Navigation Color System
   One interaction language for secondary section menus and tab navigation. */
:root{
  --hl-nav-bg:#1e293b;
  --hl-nav-bg-hover:#273449;
  --hl-nav-border:#475569;
  --hl-nav-text:#e5e7eb;
  --hl-nav-active:#b45309;
  --hl-nav-active-border:#f59e0b;
  --hl-nav-active-text:#fff7ed;
  --hl-nav-cta:#c2410c;
  --hl-nav-cta-hover:#ea580c;
  --hl-nav-focus:#fbbf24;
}

/* Ordinary in-page navigation links in lesson headers. */
body.hl-v84 header nav a[href^="#"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.4rem!important;
  min-height:2.25rem!important;
  padding:.46rem .72rem!important;
  border:1px solid var(--hl-nav-border)!important;
  border-radius:.58rem!important;
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  text-decoration:none!important;
  transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s!important;
}
body.hl-v84 header nav a[href^="#"] :is(i,span,svg){color:inherit!important}
body.hl-v84 header nav a[href^="#"]:hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84 header nav a[href^="#"]:focus-visible{
  outline:2px solid var(--hl-nav-focus)!important;
  outline-offset:2px!important;
  border-color:var(--hl-nav-focus)!important;
}
body.hl-v84 header nav a[href^="#"].active,
body.hl-v84 header nav a[href^="#"].is-active,
body.hl-v84 header nav a[href^="#"][aria-current="true"],
body.hl-v84 header nav a[href^="#"][aria-current="page"]{
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.18)!important;
}

/* Knowledge-check links are a consistent CTA rather than a navigation state. */
body.hl-v84 header a[href="#quiz"],
body.hl-v84 header a[href="#quiz-section"]{
  background:var(--hl-nav-cta)!important;
  color:#fff7ed!important;
  border:1px solid #fb923c!important;
  box-shadow:none!important;
}
body.hl-v84 header a[href="#quiz"]:hover,
body.hl-v84 header a[href="#quiz-section"]:hover{
  background:var(--hl-nav-cta-hover)!important;
  color:#fff!important;
  border-color:#fdba74!important;
}
body.hl-v84 header a[href="#quiz"] :is(i,span,svg),
body.hl-v84 header a[href="#quiz-section"] :is(i,span,svg){color:inherit!important}

/* Interactive tabs: same inactive / hover / active language everywhere. */
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab){
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  border-color:var(--hl-nav-border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab) :is(i,span,svg){color:inherit!important}
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab):hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab):focus-visible{
  outline:2px solid var(--hl-nav-focus)!important;
  outline-offset:2px!important;
  border-color:var(--hl-nav-focus)!important;
}
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab).active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab).is-active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab).tab-active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab).active-jade,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[aria-selected="true"]{
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.18)!important;
}

/* Test tabs keep CTA identity even when not selected. */
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"],
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"]{
  background:var(--hl-nav-cta)!important;
  color:#fff7ed!important;
  border-color:#fb923c!important;
}
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"]:hover,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"]:hover{
  background:var(--hl-nav-cta-hover)!important;
  color:#fff!important;
  border-color:#fdba74!important;
}

@media(max-width:640px){
  body.hl-v84 header nav a[href^="#"]{padding:.42rem .62rem!important;font-size:.78rem!important}
}

/* Stage 2.2E compatibility for legacy tab widgets that drive navigation-like content. */
body.hl-v84 :is(.river-tab,.city-tab,.geo-tab,.sc-tab-btn,.site-btn){
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  border-color:var(--hl-nav-border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transition:background-color .18s,border-color .18s,color .18s!important;
}
body.hl-v84 :is(.river-tab,.city-tab,.geo-tab,.sc-tab-btn,.site-btn) :is(i,span,svg){color:inherit!important}
body.hl-v84 :is(.river-tab,.city-tab,.geo-tab,.sc-tab-btn,.site-btn):hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84 :is(.river-tab,.city-tab,.geo-tab,.sc-tab-btn,.site-btn):focus-visible{
  outline:2px solid var(--hl-nav-focus)!important;
  outline-offset:2px!important;
  border-color:var(--hl-nav-focus)!important;
}
body.hl-v84 .river-tab[class*="bg-oasisTeal"],
body.hl-v84 .city-tab[class*="bg-mesoLapis"],
body.hl-v84 .geo-tab[class*="bg-mesoRiver"],
body.hl-v84 .sc-tab-btn[class*="bg-mesoLapis"],
body.hl-v84 .site-btn.is-active,
body.hl-v84 .site-btn.active{
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.18)!important;
}

/* Unified scrollbar for horizontally scrollable tab bars. */
body.hl-v84 .custom-scrollbar{scrollbar-color:var(--hl-nav-active) #0f172a!important}
body.hl-v84 .custom-scrollbar::-webkit-scrollbar-track{background:#0f172a!important}
body.hl-v84 .custom-scrollbar::-webkit-scrollbar-thumb{
  background:var(--hl-nav-active)!important;
  border-color:#0f172a!important;
}
body.hl-v84 .custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--hl-nav-active-border)!important}


/* Stage 2.2E.1 — Navigation Coverage & Hint Contrast Cleanup */
:root{
  --hl-hint-bg:#29210f;
  --hl-hint-border:#f59e0b;
  --hl-hint-text:#fde68a;
}
body.hl-v84 .hl-hint{
  display:block!important;
  width:100%!important;
  padding:.72rem .88rem!important;
  border:1px solid var(--hl-hint-border)!important;
  border-radius:.78rem!important;
  background:var(--hl-hint-bg)!important;
  color:var(--hl-hint-text)!important;
  font-size:.84rem!important;
  line-height:1.55!important;
  font-weight:650!important;
  box-shadow:none!important;
  text-shadow:none!important;
  overflow-wrap:anywhere!important;
}
body.hl-v84 .hl-hint :is(span,p,strong,b,em,small){
  color:inherit!important;
}
body.hl-v84 .hl-hint :is(strong,b){font-weight:800!important}

/* Button-based lesson navigation (notably §31) follows the same system as links/tabs. */
body.hl-v84 header nav button.hl-nav-item{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.4rem!important;
  min-height:2.25rem!important;
  border:1px solid var(--hl-nav-border)!important;
}

/* Reserved hook for the upcoming local SVG icon system. */
body.hl-v84 .hl-nav-icon{
  width:1.05em!important;
  height:1.05em!important;
  flex:0 0 auto!important;
  color:currentColor!important;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}


/* Stage 2.2E.2 — Navigation Terminology & Structure Standardization */
body.hl-v84 .hl-secondary-header{
  background:#0f172a!important;
  border-bottom:1px solid rgba(148,163,184,.25)!important;
  box-shadow:none!important;
}
body.hl-v84 .hl-secondary-nav{
  display:flex!important;
  align-items:center!important;
  gap:.5rem!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:.55rem .75rem!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--hl-nav-active) #0f172a!important;
}
body.hl-v84 .hl-secondary-nav a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:2.25rem!important;
  padding:.46rem .72rem!important;
  border:1px solid var(--hl-nav-border)!important;
  border-radius:.58rem!important;
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  font-size:.82rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
body.hl-v84 .hl-secondary-nav a:hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84 .hl-secondary-nav a.is-active,
body.hl-v84 .hl-secondary-nav a[aria-current="true"]{
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
}

/* Knowledge check is now a normal navigation item; it becomes gold only when active. */
body.hl-v84 header a[href="#quiz"],
body.hl-v84 header a[href="#quiz-section"],
body.hl-v84 header a[href="#sec-quiz"],
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"],
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"]{
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  border-color:var(--hl-nav-border)!important;
  box-shadow:none!important;
}
body.hl-v84 header a[href="#quiz"]:hover,
body.hl-v84 header a[href="#quiz-section"]:hover,
body.hl-v84 header a[href="#sec-quiz"]:hover,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"]:hover,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"]:hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84 header a[href="#quiz"].is-active,
body.hl-v84 header a[href="#quiz-section"].is-active,
body.hl-v84 header a[href="#sec-quiz"].is-active,
body.hl-v84 header a[href="#quiz"][aria-current="true"],
body.hl-v84 header a[href="#quiz-section"][aria-current="true"],
body.hl-v84 header a[href="#sec-quiz"][aria-current="true"],
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"].active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"].is-active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[id*="quiz"][aria-selected="true"],
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"].active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"].is-active,
body.hl-v84 :is(.hl-v84-tab,.tab-btn,.recipe-tab)[data-tab*="quiz"][aria-selected="true"]{
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.18)!important;
}


/* Stage 2.2E.3 — Responsive Navigation & Scroll Behavior */
:root{
  --hl-anchor-offset:9rem;
  --hl-nav-scroll-track:#0f172a;
  --hl-nav-scroll-thumb:#b45309;
  --hl-nav-scroll-thumb-hover:#f59e0b;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body.hl-v84 .hl-secondary-nav{scroll-behavior:auto!important}
}

/* Keep in-page targets below the stacked sticky course/lesson navigation. */
body.hl-v84 :is(section[id],article[id],main>[id],main>div[id]){
  scroll-margin-top:var(--hl-anchor-offset)!important;
}

/* One responsive secondary-navigation component on every lesson. */
body.hl-v84 .hl-secondary-nav{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.5rem!important;
  width:100%!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:.5rem .75rem!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--hl-nav-scroll-thumb) var(--hl-nav-scroll-track)!important;
  white-space:nowrap!important;
}
body.hl-v84 .hl-secondary-nav::-webkit-scrollbar{height:6px!important}
body.hl-v84 .hl-secondary-nav::-webkit-scrollbar-track{
  background:var(--hl-nav-scroll-track)!important;
  border-radius:999px!important;
}
body.hl-v84 .hl-secondary-nav::-webkit-scrollbar-thumb{
  background:var(--hl-nav-scroll-thumb)!important;
  border:1px solid var(--hl-nav-scroll-track)!important;
  border-radius:999px!important;
}
body.hl-v84 .hl-secondary-nav::-webkit-scrollbar-thumb:hover{
  background:var(--hl-nav-scroll-thumb-hover)!important;
}
body.hl-v84 .hl-secondary-nav > :is(a,button){
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.4rem!important;
  min-height:2.3rem!important;
  padding:.46rem .72rem!important;
  white-space:nowrap!important;
  line-height:1.2!important;
  margin:0!important;
}

/* The China tab bars keep their sticky behavior, but no longer have a unique orange scrollbar/decorative strip. */
body.hl-v84 .hl-secondary-nav-shell{
  background:#0f172a!important;
  color:#e5e7eb!important;
  border-color:rgba(148,163,184,.28)!important;
  box-shadow:none!important;
}
body.hl-v84 .hl-secondary-nav-shell .hl-secondary-nav{
  border:0!important;
  background:transparent!important;
}

/* The lesson identity and the section nav may share a header: force the nav onto its own stable row. */
body.hl-v84 header .hl-secondary-nav{
  flex-basis:100%!important;
}

@media(max-width:900px){
  :root{--hl-anchor-offset:8rem}
  body.hl-v84 .hl-secondary-nav{
    gap:.38rem!important;
    padding:.42rem .5rem!important;
  }
  body.hl-v84 .hl-secondary-nav > :is(a,button){
    min-height:2.15rem!important;
    padding:.4rem .62rem!important;
    font-size:.78rem!important;
  }
}
@media(max-width:520px){
  :root{--hl-anchor-offset:7.5rem}
  body.hl-v84 .hl-secondary-nav > :is(a,button){font-size:.75rem!important}
}

/* Stage 2.2F — Responsive Content Cleanup
   Prevents lesson content from exceeding the viewport on phones/tablets/200% zoom
   while preserving intentional local scrolling for tables and secondary navigation. */
html,
body.hl-v84{
  max-width:100%;
}
body.hl-v84{
  overflow-x:hidden;
  overflow-x:clip;
}
body.hl-v84 main{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  overflow-x:clip;
}
body.hl-v84 main > *{
  min-width:0;
  max-width:100%;
}
body.hl-v84 main :is(section,article,aside,header,footer,div){
  min-width:0;
}
body.hl-v84 main :is(.grid,.flex) > *{
  min-width:0;
}
body.hl-v84 main :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,button,a){
  overflow-wrap:break-word;
  word-break:normal;
}
body.hl-v84 main :is(img,canvas,svg,video,iframe){
  max-width:100%!important;
}
body.hl-v84 main img,
body.hl-v84 main video{
  height:auto!important;
}
body.hl-v84 main .chart-container{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body.hl-v84 main .overflow-x-auto{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
/* Tables may remain wider than a phone, but only inside their own scroll container. */
body.hl-v84 main .overflow-x-auto > table{
  max-width:none!important;
}
/* Decorative absolutely-positioned blobs must never enlarge the document canvas. */
body.hl-v84 main .absolute.pointer-events-none{
  max-width:none!important;
}

@media(max-width:720px){
  body.hl-v84.hl-ds2 main{
    padding-left:.75rem!important;
    padding-right:.75rem!important;
  }
  body.hl-v84.hl-ds2 main > section{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body.hl-v84.hl-ds2 main :is(.p-10,.p-8){padding:1.15rem!important}
  body.hl-v84.hl-ds2 main .p-6{padding:1rem!important}
  body.hl-v84.hl-ds2 main .px-8{padding-left:1rem!important;padding-right:1rem!important}
  body.hl-v84.hl-ds2 main .px-6{padding-left:1rem!important;padding-right:1rem!important}
  body.hl-v84.hl-ds2 main .gap-8{gap:1.25rem!important}
  body.hl-v84.hl-ds2 main .gap-6{gap:1rem!important}
  body.hl-v84.hl-ds2 main :is(.hl-h1,h1){
    max-width:100%!important;
    line-height:1.14!important;
    text-wrap:balance;
  }
  body.hl-v84.hl-ds2 main :is(.hl-h2,h2){
    max-width:100%!important;
    font-size:clamp(1.35rem,6.2vw,1.8rem)!important;
    line-height:1.2!important;
    text-wrap:pretty;
  }
  body.hl-v84.hl-ds2 main :is(.hl-h3,h3){
    max-width:100%!important;
    line-height:1.25!important;
    text-wrap:pretty;
  }
  body.hl-v84.hl-ds2 main .hl-card{
    max-width:100%!important;
    min-width:0!important;
  }
  body.hl-v84.hl-ds2 main table{
    min-width:560px!important;
  }
  body.hl-v84 .historylab-footer{
    padding-left:.75rem!important;
    padding-right:.75rem!important;
  }
}

@media(max-width:460px){
  body.hl-v84.hl-ds2 main{
    padding-left:.625rem!important;
    padding-right:.625rem!important;
  }
  body.hl-v84.hl-ds2 main > section,
  body.hl-v84.hl-ds2 main > section.hl-hero{
    padding:.9rem!important;
    border-radius:14px!important;
  }
  body.hl-v84.hl-ds2 main > section.hl-hero :is(.hl-h1,h1){
    font-size:clamp(1.65rem,8.2vw,2rem)!important;
    line-height:1.12!important;
  }
  body.hl-v84.hl-ds2 main :is(.p-10,.p-8,.p-6){padding:.875rem!important}
  body.hl-v84.hl-ds2 main :is(.px-8,.px-6,.px-5){padding-left:.875rem!important;padding-right:.875rem!important}
  body.hl-v84.hl-ds2 main .hl-eyebrow{
    font-size:.7rem!important;
    padding:.36rem .68rem!important;
  }
  body.hl-v84.hl-ds2 main table{
    min-width:520px!important;
  }
}



/* Stage 2.3A — Core & Navigation Icons */
/* Local mask-based SVG icons. Color always follows currentColor. */
body.hl-v84 .hl-icon{
  --hl-icon:none;
  display:inline-block!important;
  width:1.08em!important;
  height:1.08em!important;
  min-width:1.08em!important;
  flex:0 0 1.08em!important;
  vertical-align:-.14em!important;
  background-color:currentColor!important;
  -webkit-mask:var(--hl-icon) center / contain no-repeat!important;
  mask:var(--hl-icon) center / contain no-repeat!important;
  color:inherit!important;
}
body.hl-v84 .hl-icon--home{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxMS41IDEyIDRsOSA3LjUiLz48cGF0aCBkPSJNNS41IDEwLjVWMjBoMTN2LTkuNSIvPjxwYXRoIGQ9Ik05LjUgMjB2LTZoNXY2Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--contents{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSA2aDExTTkgMTJoMTFNOSAxOGgxMSIvPjxjaXJjbGUgY3g9IjQuNSIgY3k9IjYiIHI9IjEiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjQuNSIgY3k9IjEyIiByPSIxIiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48Y2lyY2xlIGN4PSI0LjUiIGN5PSIxOCIgcj0iMSIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--previous{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMTQuNSA1LTcgNyA3IDciLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--next{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOS41IDUgNyA3LTcgNyIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--quiz{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41djNNMjAuNSAxMmgtM00xMiAyMC41di0zTTMuNSAxMmgzIi8+PHBhdGggZD0ibTguNSAxMiAyLjIgMi4yIDQuOC01Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--book{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMy41IDUuNWMzLTEgNS41LS42IDguNSAxLjJ2MTJjLTMtMS44LTUuNS0yLjItOC41LTEuMnoiLz48cGF0aCBkPSJNMjAuNSA1LjVjLTMtMS01LjUtLjYtOC41IDEuMnYxMmMzLTEuOCA1LjUtMi4yIDguNS0xLjJ6Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--timeline{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgN3Y1bDMuNSAyIi8+PHBhdGggZD0iTTUuNSA0LjUgMy41IDYuNU0xOC41IDQuNWwyIDIiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--map{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMy41IDYgNS0yIDcgMiA1LTJ2MTRsLTUgMi03LTItNSAyeiIvPjxwYXRoIGQ9Ik04LjUgNHYxNE0xNS41IDZ2MTQiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--people{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSI5IiBjeT0iOCIgcj0iMyIvPjxjaXJjbGUgY3g9IjE2LjUiIGN5PSI5IiByPSIyLjIiLz48cGF0aCBkPSJNMy41IDE5Yy41LTQgMi44LTYgNS41LTZzNSAyIDUuNSA2Ii8+PHBhdGggZD0iTTE0IDE0YzMtLjYgNS42IDEgNi41IDQuNSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--tools{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMTQuNSA0IDUuNSA1LjUtMyAzTDExLjUgN3oiLz48cGF0aCBkPSJtMTIuNSA4LjUtOCA4YTIuMSAyLjEgMCAwIDAgMyAzbDgtOCIvPjxwYXRoIGQ9Ik00IDUuNSA4LjUgMTAiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--wheat{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMjFWNSIvPjxwYXRoIGQ9Ik0xMiA4Yy0zIDAtNC0xLjUtNC0zIDMgMCA0IDEuNSA0IDNaTTEyIDExYzMgMCA0LTEuNSA0LTMtMyAwLTQgMS41LTQgM1pNMTIgMTRjLTMgMC00LTEuNS00LTMgMyAwIDQgMS41IDQgM1pNMTIgMTdjMyAwIDQtMS41IDQtMy0zIDAtNCAxLjUtNCAzWiIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--dwelling{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxMS41IDEyIDVsOSA2LjUiLz48cGF0aCBkPSJNNSAxMC41VjIwaDE0di05LjUiLz48cGF0aCBkPSJNOCAyMHYtNWgzdjVNMTQgMTNoM3YzaC0zeiIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--landscape{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxNy41IiBjeT0iNi41IiByPSIyLjUiLz48cGF0aCBkPSJtMyAxOSA1LjUtOCA0IDUgMi41LTMgNiA2eiIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--science{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAzaDZNMTAgM3Y1bC01IDlhMiAyIDAgMCAwIDEuOCAzaDEwLjRBMiAyIDAgMCAwIDE5IDE3bC01LTlWMyIvPjxwYXRoIGQ9Ik03LjUgMTVoOSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--animal{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iMS42IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjgiIHI9IjEuNiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PGNpcmNsZSBjeD0iNS41IiBjeT0iMTIiIHI9IjEuNSIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PGNpcmNsZSBjeD0iMTguNSIgY3k9IjEyIiByPSIxLjUiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAxMC41Yy0zIDAtNS41IDIuNS01IDUuMi41IDIuNiAzIDMuOCA1IDIuMyAyIDEuNSA0LjUuMyA1LTIuMy41LTIuNy0yLTUuMi01LTUuMloiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--city{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAyMFY5aDZ2MTFNOSAyMFY0aDZ2MTZNMTUgMjB2LThoNnY4Ii8+PHBhdGggZD0iTTUgMTJoMk01IDE1aDJNMTEgN2gyTTExIDEwaDJNMTEgMTNoMk0xNyAxNWgyTTE3IDE4aDIiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--religion{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMyA5IDktNSA5IDUiLz48cGF0aCBkPSJNNSAxMGgxNE02IDEwdjhNMTAgMTB2OE0xNCAxMHY4TTE4IDEwdjhNNCAxOWgxNiIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--culture{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAxIDAgMCAxN2gxLjVhMS44IDEuOCAwIDAgMCAwLTMuNkgxMmExLjggMS44IDAgMCAxIDAtMy42aDNhNS41IDUuNSAwIDAgMCA1LjUtNS41QTQuMyA0LjMgMCAwIDAgMTYuMiAzLjV6Ii8+PGNpcmNsZSBjeD0iNy41IiBjeT0iMTAiIHI9IjEiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjkuNSIgY3k9IjYuOCIgcj0iMSIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PGNpcmNsZSBjeD0iMTQiIGN5PSI2LjMiIHI9IjEiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--music{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAxOFY2bDktMnYxMiIvPjxjaXJjbGUgY3g9IjYuNSIgY3k9IjE4IiByPSIyLjUiLz48Y2lyY2xlIGN4PSIxNS41IiBjeT0iMTYiIHI9IjIuNSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--chart{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCAyMFYxMGg0djEwTTEwIDIwVjVoNHYxNU0xNiAyMHYtN2g0djciLz48cGF0aCBkPSJNMyAyMGgxOCIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--state{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMyA5IDktNSA5IDVNNSAxMGgxNE02IDEwdjhNMTAgMTB2OE0xNCAxMHY4TTE4IDEwdjhNNCAxOWgxNiIvPjxwYXRoIGQ9Ik05IDRoNiIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--water{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA4YzIgMiA0IDIgNiAwczQtMiA2IDAgNCAyIDYgME0zIDEzYzIgMiA0IDIgNiAwczQtMiA2IDAgNCAyIDYgME0zIDE4YzIgMiA0IDIgNiAwczQtMiA2IDAgNCAyIDYgMCIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--writing{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA0aDEyYTIgMiAwIDAgMSAyIDJ2MTFIOGEzIDMgMCAwIDAtMyAzeiIvPjxwYXRoIGQ9Ik01IDR2MTZNOSA4aDZNOSAxMWg2TTkgMTRoNCIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--trade{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA4aDEzbC0zLTNNMjAgMTZIN2wzIDMiLz48cGF0aCBkPSJtMTcgNSAzIDMtMyAzTTcgMTNsLTMgMyAzIDMiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--war{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNSA0IDYuNSA2LjVNMTkgNGwtNi41IDYuNU04LjUgMTMuNSA0IDE4bDIgMiA0LjUtNC41TTE1LjUgMTMuNSAyMCAxOGwtMiAyLTQuNS00LjUiLz48cGF0aCBkPSJtNCA0IDMgLjUuNSAzTTIwIDRsLTMgLjUtLjUgMyIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--law{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNHYxNk02IDdoMTJNNC41IDdsLTMgNmg2ek0xOS41IDdsLTMgNmg2ek04IDIwaDgiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--school{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMyAxMCA5LTUgOSA1LTkgNXoiLz48cGF0aCBkPSJNNiAxMnY1YzMgMiA5IDIgMTIgMHYtNU0yMSAxMHY2Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--star{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMTIgMyAyLjMgNS4zTDIwIDlsLTQuMiAzLjggMS4yIDUuNy01LTIuOS01IDIuOSAxLjItNS43TDQgOWw1LjctLjd6Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--crown{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNCA4IDQgNCA0LTcgNCA3IDQtNC0yIDEwSDZ6Ii8+PHBhdGggZD0iTTYgMThoMTIiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--ship{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNHYxME0xMiA1bC02IDhoNk0xMyA3bDUgNmgtNSIvPjxwYXRoIGQ9Ik00IDE1aDE2bC0yLjUgNEg2LjV6Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--fortress{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCAyMFY4aDRWNWgzdjNoMlY1aDN2M2g0djEyIi8+PHBhdGggZD0iTTMgMjBoMThNOCAyMHYtNWgzdjVNMTUgMTJoMk02IDEyaDIiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--philosophy{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTQuMjUgNC4yNSAwIDAgMSAwIDguNSA0LjI1IDQuMjUgMCAwIDAgMCA4LjUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjcuOCIgcj0iMSIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNi4yIiByPSIxIiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48L3N2Zz4K")}

/* Stage 4.0C — Historical Object Icon Expansion */
body.hl-v84 .hl-icon--coin{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI1Ii8+PHBhdGggZD0iTTkuNSA5LjVoNU05IDEyaDZNOS41IDE0LjVoNSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--road{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOC41IDMuNSA0IDIwLjVNMTUuNSAzLjUgMjAgMjAuNSIvPjxwYXRoIGQ9Ik0xMiA1djNNMTIgMTF2M00xMiAxN3YzIi8+PHBhdGggZD0iTTUuMiAxNmgxMy42Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--aqueduct{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA2aDE4TTQgNnYxNE0yMCA2djE0TTQgMTBoMTYiLz48cGF0aCBkPSJNNCAyMHYtM2EzIDMgMCAwIDEgNiAwdjNNMTAgMjB2LTNhMyAzIDAgMCAxIDYgMHYzTTE2IDIwdi0zYTIgMiAwIDAgMSA0IDB2MyIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--theatre{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA1LjVjMi41LTEuMyA1LjItMS4zIDcuNyAwdjUuMmMwIDQtMiA2LjQtMy45IDcuOC0xLjktMS40LTMuOC0zLjgtMy44LTcuOHoiLz48cGF0aCBkPSJNMTIuMyA1LjVjMi41LTEuMyA1LjItMS4zIDcuNyAwdjUuMmMwIDQtMiA2LjQtMy44IDcuOC0xLjYtMS4yLTMuMi0zLjEtMy43LTYiLz48cGF0aCBkPSJNNi4yIDloLjAxTTkuNCA5aC4wMU02LjMgMTNjMSAuOCAyIC44IDMgME0xNC41IDloLjAxTTE3LjcgOWguMDFNMTQuNSAxNGMxLTEgMi4xLTEgMy4yIDAiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--pottery{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAzLjVoNk05LjUgMy41djNjMCAxLjQtLjcgMi4xLTEuNyAzLjJDNi42IDExIDYgMTIuNyA2IDE1YzAgMy40IDIuNSA1LjUgNiA1LjVzNi0yLjEgNi01LjVjMC0yLjMtLjYtNC0xLjgtNS4zLTEtMS4xLTEuNy0xLjgtMS43LTMuMnYtMyIvPjxwYXRoIGQ9Ik04LjUgOEg2LjhBMi44IDIuOCAwIDAgMCA0IDEwLjhjMCAyLjEgMS40IDMuNCAzLjMgMy44TTE1LjUgOGgxLjdhMi44IDIuOCAwIDAgMSAyLjggMi44YzAgMi4xLTEuNCAzLjQtMy4zIDMuOE04IDEzaDgiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--column{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA0aDE0TTcgN2gxME04IDd2MTFNMTIgN3YxMU0xNiA3djExTTYgMThoMTJNNCAyMWgxNiIvPjxwYXRoIGQ9Ik02IDQgNSA3aDE0bC0xLTMiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--inscription{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAzLjVoMTBsMiAyVjIwSDVWNS41eiIvPjxwYXRoIGQ9Ik04IDhoOE04IDExaDZNOCAxNGg4TTggMTdoNSIvPjxwYXRoIGQ9Ik03IDMuNXYyaDEwdi0yIi8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--settlement{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMyAxMiA0LjUtNCA0LjUgNE00LjUgMTF2OGg2di04TTEyIDEzbDQtMy41IDUgNC41TTEzLjUgMTJ2N2g2di02LjMiLz48cGF0aCBkPSJNNi41IDE5di00aDJ2NE0xNS41IDE5di0zaDJ2M00zIDIwaDE4Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--topic{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgOHY1TTEyIDE2LjVoLjAxIi8+PC9zdmc+Cg==")}

/* Secondary navigation icons have one optical size across all lesson generations. */
body.hl-v84 .hl-secondary-nav .hl-nav-icon{
  width:1.05rem!important;
  height:1.05rem!important;
  min-width:1.05rem!important;
  flex-basis:1.05rem!important;
  opacity:.96!important;
}
body.hl-v84 .hl-secondary-nav .hl-nav-label{
  display:inline-block!important;
  color:inherit!important;
}
body.hl-v84 .hl-secondary-nav :is(i[class*="fa-"],.fa-solid,.fa-regular){display:none!important}

/* Global course navigation uses the same icon family. */
body.hl-v84 .lesson-course-nav .hl-icon{
  width:1.05rem!important;
  height:1.05rem!important;
  min-width:1.05rem!important;
  flex-basis:1.05rem!important;
}
body.hl-v84 .lesson-course-nav .lcn-disabled .hl-icon{opacity:1!important}
@media(max-width:700px){
  body.hl-v84 .lesson-course-nav .hl-icon{
    width:1.12rem!important;
    height:1.12rem!important;
    min-width:1.12rem!important;
    flex-basis:1.12rem!important;
  }
}


/* Stage 2.3B — Contents & Section Icons */
body.hl-v84 .hl-icon--search{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iNi41Ii8+PHBhdGggZD0ibTE1LjUgMTUuNSA1IDUiLz48L3N2Zz4=")}
body.hl-v84 .hl-icon--filter{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA1aDE2bC02LjIgNy4yVjE5bC0zLjYgMXYtNy44eiIvPjwvc3ZnPg==")}
body.hl-v84 .hl-icon--clock{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgN3Y1bDMuNSAyIi8+PC9zdmc+")}
body.hl-v84 .hl-icon--layers{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMTIgNCA4IDQtOCA0LTgtNHoiLz48cGF0aCBkPSJtNCAxMiA4IDQgOC00TTQgMTZsOCA0IDgtNCIvPjwvc3ZnPg==")}
body.hl-v84 .hl-icon--dna{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAzYzAgNSAxMCA1IDEwIDEwcy00IDYtMTAgOE0xNyAzYzAgNS0xMCA1LTEwIDEwczQgNiAxMCA4Ii8+PHBhdGggZD0iTTguNSA2aDdNNy41IDEwaDlNNy41IDE0aDlNOC41IDE4aDciLz48L3N2Zz4=")}
body.hl-v84 .hl-icon--fire{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMjFjLTQgMC03LTIuOC03LTYuNSAwLTMuMiAyLjEtNS4yIDQuMi03LjUuMiAyIDEuMSAzLjMgMi4zIDQuMi4zLTMuNiAyLjMtNi4xIDQuMS04LjIuNyAzLjIgMy40IDUuNyAzLjQgOS42QzE5IDE3LjMgMTYuMiAyMSAxMiAyMVoiLz48cGF0aCBkPSJNMTIgMjBjLTEuOCAwLTMuMi0xLjMtMy4yLTMgMC0xLjMuOC0yLjMgMS44LTMuNC4yIDEuMi43IDEuOCAxLjQgMi4zLjQtMS40IDEuMi0yLjUgMi0zLjUuNCAxLjQgMS4zIDIuNSAxLjMgNC4xIDAgMi0xLjQgMy41LTMuMyAzLjVaIi8+PC9zdmc+")}
body.hl-v84 .hl-icon--check{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJtOC4yIDEyLjIgMi41IDIuNiA1LjQtNS42Ii8+PC9zdmc+")}
body.hl-v84 .hl-icon--warning{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMy41IDIxIDIwSDN6Ii8+PHBhdGggZD0iTTEyIDl2NU0xMiAxNy4yaC4wMSIvPjwvc3ZnPg==")}
body.hl-v84 .hl-icon--food{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSAxMWgxNGE3IDcgMCAwIDEtMTQgMFoiLz48cGF0aCBkPSJNNyAyMGgxME04IDdjMC0xIDEtMS41IDEtMi41TTEyIDdjMC0xIDEtMS41IDEtMi41TTE2IDdjMC0xIDEtMS41IDEtMi41Ii8+PC9zdmc+")}
body.hl-v84 .hl-eyebrow .hl-eyebrow-icon{width:.95em!important;height:.95em!important;min-width:.95em!important;flex-basis:.95em!important;}
body.hl-v84 .lesson-course-nav .hl-lesson-identity-icon{width:.95rem!important;height:.95rem!important;min-width:.95rem!important;flex-basis:.95rem!important;margin-right:.28rem!important;vertical-align:-.11em!important;}
body.hl-v84 .hl-contents-card-icon{width:1.12em!important;height:1.12em!important;min-width:1.12em!important;flex-basis:1.12em!important;}
body.hl-v84 .hl-section-heading-icon{width:1.05em!important;height:1.05em!important;min-width:1.05em!important;flex-basis:1.05em!important;}
body.hl-v84 .hl-search-icon{pointer-events:none!important;}
body.hl-v84 .hl-home .card .hl-section-card-mark{display:inline-flex;align-items:center;justify-content:center;width:2.65rem;height:2.65rem;border-radius:.9rem;background:rgba(246,197,111,.11);color:#f6c56f;margin-bottom:.8rem;}
body.hl-v84 .hl-home .card .hl-section-card-mark .hl-icon{width:1.35rem!important;height:1.35rem!important;min-width:1.35rem!important;flex-basis:1.35rem!important;}


/* Stage 2.3B.1 — Local SVG Rendering & 200% Header Fix */
/*
   History Lab icons are embedded above as data: SVG masks so the icon layer works
   identically from file:// and HTTP/Netlify. Source SVGs remain in assets/icons/.
*/

/* Desktop zoom / medium compact mode: keep useful text labels visible. */
@media (min-width:481px) and (max-width:700px){
  body.hl-v84 .lesson-course-nav .lcn-current{display:none!important;}
  body.hl-v84 .lesson-course-nav .lcn-label{display:inline!important;}
  body.hl-v84 .lesson-course-nav .lcn-inner{padding:7px 8px!important;gap:8px!important;}
  body.hl-v84 .lesson-course-nav a{padding:8px 9px!important;font-size:12px!important;gap:5px!important;}
}

/* True phone mode: icon-only global controls preserve maximum content width. */
@media (max-width:480px){
  body.hl-v84 .lesson-course-nav .lcn-current{display:none!important;}
  body.hl-v84 .lesson-course-nav .lcn-label{display:none!important;}
  body.hl-v84 .lesson-course-nav .lcn-inner{padding:7px 7px!important;gap:6px!important;}
  body.hl-v84 .lesson-course-nav a{padding:8px!important;font-size:12px!important;}
}


/* Stage 2.3B.2 — Lesson Identity & Core Color Consistency */
/* Core course-navigation colors are shared; lesson-local CSS must not override them. */
.lesson-course-nav .lcn-home {
  background: #ffffff !important;
  color: #0f172a !important;
}
.lesson-course-nav .lcn-home:hover,
.lesson-course-nav .lcn-home:focus-visible {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Canonical local lesson-identity icon. Eyebrow icons keep their compact sizing. */
.hl-local-lesson-icon:not(.hl-eyebrow-icon) {
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  flex: 0 0 1.6rem;
  vertical-align: -0.18em;
}
@media (max-width: 480px) {
  .hl-local-lesson-icon:not(.hl-eyebrow-icon) {
    width: 1.4rem;
    height: 1.4rem;
    min-width: 1.4rem;
    flex-basis: 1.4rem;
  }
}
/* Stage 2.3C — Content Icon Harmonization */
/* Repeated semantic content symbols share the same local SVG family as navigation.
   Unique historical/decorative emoji intentionally remain untouched. */
body.hl-v84 .hl-icon--idea{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAxOGg2Ii8+PHBhdGggZD0iTTEwIDIxaDQiLz48cGF0aCBkPSJNOC4yIDE1LjJBNiA2IDAgMSAxIDE1LjggMTUuMmMtLjkuNy0xLjMgMS4zLTEuNSAyLjNoLTQuNmMtLjItMS0uNi0xLjYtMS41LTIuM1oiLz48cGF0aCBkPSJNMTIgM1YxLjhNNC44IDUuMmwtLjktLjlNMTkuMiA1LjJsLjktLjlNMyAxMkgxLjhNMjIuMiAxMkgyMSIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--repeat{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgN2gtOWE2IDYgMCAwIDAtNS42IDMuOCIvPjxwYXRoIGQ9Im0xNyA0IDMgMy0zIDMiLz48cGF0aCBkPSJNNCAxN2g5YTYgNiAwIDAgMCA1LjYtMy44Ii8+PHBhdGggZD0ibTcgMjAtMy0zIDMtMyIvPjwvc3ZnPgo=")}
body.hl-v84 .hl-icon--pin{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTBjMCA1LTggMTEtOCAxMVM0IDE1IDQgMTBhOCA4IDAgMSAxIDE2IDBaIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMCIgcj0iMi40Ii8+PC9zdmc+Cg==")}
body.hl-v84 .hl-icon--close{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJtOSA5IDYgNk0xNSA5bC02IDYiLz48L3N2Zz4K")}
body.hl-v84 .hl-icon--shield{--hl-icon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMy41IDE5IDZ2NS4yYzAgNC40LTIuOCA3LjctNyA5LjMtNC4yLTEuNi03LTQuOS03LTkuM1Y2WiIvPjxwYXRoIGQ9Ik0xMiA3djkiLz48L3N2Zz4K")}
body.hl-v84 .hl-content-icon{
  width:1em!important;
  height:1em!important;
  min-width:1em!important;
  flex-basis:1em!important;
  vertical-align:-.12em!important;
  margin-inline:.04em!important;
}
body.hl-v84 .hl-content-icon--sm{width:.88em!important;height:.88em!important;min-width:.88em!important;flex-basis:.88em!important}
body.hl-v84 .hl-content-icon--lg{width:1.18em!important;height:1.18em!important;min-width:1.18em!important;flex-basis:1.18em!important}


/* Stage 2.3C.1 — Content Icon & Interaction Polish */
/* Interactive content tabs use component state instead of legacy light Tailwind
   background classes. This prevents dark-on-dark text in §16/§17. */
body.hl-v84.hl-ds2 main :is(.recipe-tab,.sc-tab-btn){
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  border:1px solid var(--hl-nav-border)!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2 main :is(.recipe-tab,.sc-tab-btn):hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84.hl-ds2 main :is(.recipe-tab,.sc-tab-btn).is-active,
body.hl-v84.hl-ds2 main :is(.recipe-tab,.sc-tab-btn)[aria-selected="true"]{
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.18)!important;
}

/* Metadata pills must never split a Ukrainian word between arbitrary letters.
   The general responsive rule may wrap prose anywhere, but not compact badges. */
body.hl-v84 main .hl-meta-badge,
body.hl-v84 main .flex.justify-between > span:last-child[class*="rounded"][class*="px-"]{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  flex-shrink:0!important;
  max-width:100%!important;
}
body.hl-v84 main .hl-badge-row{
  gap:.5rem!important;
}
body.hl-v84 main .hl-badge-row > :first-child{
  min-width:0!important;
  overflow-wrap:break-word!important;
}
@media(max-width:480px){
  body.hl-v84 main .hl-badge-row{
    flex-wrap:wrap!important;
  }
  body.hl-v84 main .hl-badge-row > .hl-meta-badge{
    margin-left:auto!important;
  }
}


/* Stage 2.3C.2 — Typography, Wrapping & Page Title Cleanup */
/* Do not split Ukrainian words or leave punctuation hanging in headings and controls.
   Prose may still break long unspaced tokens when necessary. */
body.hl-v84 main :is(h1,h2,h3,h4,h5,h6){
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-wrap:balance;
}
body.hl-v84 main :is(button,a,label){
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
body.hl-v84 main :is(p,li,dt,dd){
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

/* §3 comparison cards: let the date badge move as a whole instead of squeezing
   the human name into arbitrary letter fragments. */
body.hl-v84 main .hl-human-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:.75rem!important;
}
body.hl-v84 main .hl-human-card-head > :first-child{
  flex:1 1 16rem!important;
  min-width:0!important;
}
body.hl-v84 main .hl-human-card-head > .hl-human-date-badge{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
body.hl-v84 main .hl-human-name{
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}

/* §3 archaeological-site filters: wrap whole controls, never the word inside them. */
body.hl-v84 main .hl-site-filter-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.5rem!important;
  min-width:0!important;
}
body.hl-v84 main .hl-site-filter-row .site-filter-btn{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

/* Small safety net for compact badges/chips site-wide. */
body.hl-v84 main :is(.hl-meta-badge,[class*="rounded-full"][class*="px-"],[class*="rounded-md"][class*="px-"]){
  word-break:normal!important;
}


/* Stage 2.3C.2 final wrap guard */
body.hl-v84 main :is(
  .hl-v84-tab,.tab-btn,.recipe-tab,.sc-tab-btn,.site-btn,.site-filter-btn,
  .hl-v84-choice,.symbol-btn,.pillar-btn,.clay-btn,.pyramid-tier,.varna-tab-btn,
  .quiz-opt,.court-opt,.q-btn,.q2-btn,.hl-interactive-label,.hl-symbol-button,
  .hl-symbol-label,.hl-status-badge,.hl-v7-period-pill,.hl-meta-badge
){
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
body.hl-v84 main :is(.hl-hint,.hl-eyebrow){
  overflow-wrap:normal!important;
  word-break:normal!important;
}
body.hl-v84.hl-ds2 main :is(.hl-status-badge,.hl-v7-period-pill){
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}


/* Stage 2.3C.3 — Eyebrow & Badge Consistency */
/* One eyebrow component across every lesson hero. The thematic hero background
   remains page-specific; the eyebrow itself is deliberately system-owned. */
body.hl-v84 main .hl-eyebrow{
  isolation:isolate!important;
  margin-inline:auto;
}
body.hl-v84 main .hl-eyebrow > .hl-eyebrow-icon{
  color:inherit!important;
  margin:0!important;
}

/* Compact metadata and long message/status pills are different components.
   Metadata stays on one line when it fits; message badges wrap at word boundaries. */
body.hl-v84 main .hl-meta-badge{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  flex-shrink:0!important;
  max-width:100%!important;
}
body.hl-v84 main .hl-message-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:.35rem!important;
  width:fit-content!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  line-height:1.35!important;
  flex-shrink:1!important;
}
body.hl-v84 main .hl-message-badge > .hl-icon{
  flex:0 0 auto!important;
}
body.hl-v84 main .hl-message-row > .hl-message-badge{
  flex:1 1 100%!important;
}
/* Undo the older heuristic nowrap rule for non-metadata rounded pills. */
body.hl-v84 main .flex.justify-between > span:last-child[class*="rounded"][class*="px-"]:not(.hl-meta-badge){
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  flex-shrink:1!important;
}
@media(max-width:480px){
  body.hl-v84 main .hl-meta-badge{
    max-width:100%!important;
    white-space:normal!important;
    flex-shrink:1!important;
  }
  body.hl-v84 main .hl-message-badge{
    width:100%!important;
  }
}


/* =========================================================
   Stage 2.4A — Quiz Visual Shell
   One visual language for all 35 knowledge checks.
   Page scripts still own answers, scoring and feedback logic.
   ========================================================= */
body.hl-v84 main .hl-quiz-shell{
  --hl-quiz-bg:#0f172a;
  --hl-quiz-bg-2:#111827;
  --hl-quiz-card:#172033;
  --hl-quiz-option:#1e293b;
  --hl-quiz-option-hover:#273449;
  --hl-quiz-border:#334155;
  --hl-quiz-border-strong:#475569;
  --hl-quiz-text:#f8fafc;
  --hl-quiz-muted:#cbd5e1;
  --hl-quiz-accent:#f59e0b;
  --hl-quiz-accent-soft:#fde68a;
  max-width:960px!important;
  margin-inline:auto!important;
  padding:clamp(1rem,2.2vw,2rem)!important;
  border:1px solid rgba(245,158,11,.28)!important;
  border-radius:1.5rem!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(245,158,11,.10),transparent 22rem),
    linear-gradient(145deg,var(--hl-quiz-bg-2),var(--hl-quiz-bg))!important;
  color:var(--hl-quiz-text)!important;
  box-shadow:0 18px 45px rgba(2,6,23,.28)!important;
}
body.hl-v84 main .hl-quiz-shell.hl-light-surface,
body.hl-v84 main .hl-quiz-shell.hl-card{
  background:
    radial-gradient(circle at 92% 8%,rgba(245,158,11,.10),transparent 22rem),
    linear-gradient(145deg,var(--hl-quiz-bg-2),var(--hl-quiz-bg))!important;
  color:var(--hl-quiz-text)!important;
}
body.hl-v84 main .hl-quiz-head{
  width:min(100%,48rem)!important;
  max-width:48rem!important;
  margin:0 auto 1.25rem!important;
  padding:0 0 1rem!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.25rem!important;
  border:0!important;
  border-bottom:1px solid rgba(148,163,184,.22)!important;
  background:transparent!important;
  text-align:center!important;
}
body.hl-v84 main .hl-quiz-title-wrap{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  text-align:center!important;
}
body.hl-v84 main .hl-quiz-title{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.65rem!important;
  margin:0!important;
  color:var(--hl-quiz-text)!important;
  font-size:clamp(1.4rem,2.5vw,2rem)!important;
  line-height:1.15!important;
  text-wrap:balance;
}
body.hl-v84 main .hl-quiz-title-icon{
  width:1.05em!important;
  height:1.05em!important;
  flex:0 0 auto!important;
  color:#fbbf24!important;
}
body.hl-v84 main .hl-quiz-legacy-marker{display:none!important}
body.hl-v84 main .hl-quiz-subtitle{
  margin:.55rem auto 0!important;
  max-width:42rem!important;
  color:var(--hl-quiz-muted)!important;
  font-size:.95rem!important;
  line-height:1.55!important;
  text-align:center!important;
}
body.hl-v84 main .hl-quiz-score{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:100%!important;
  margin:.65rem auto 0!important;
  padding:.42rem .72rem!important;
  border:1px solid rgba(245,158,11,.38)!important;
  border-radius:999px!important;
  background:#29210f!important;
  color:var(--hl-quiz-accent-soft)!important;
  font-size:.82rem!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:normal!important;
}
body.hl-v84 main .hl-quiz-body{
  width:min(100%,48rem)!important;
  margin-inline:auto!important;
}
body.hl-v84 main .hl-quiz-card{
  min-width:0!important;
  padding:clamp(.9rem,2vw,1.25rem)!important;
  border:1px solid var(--hl-quiz-border)!important;
  border-radius:1rem!important;
  background:var(--hl-quiz-card)!important;
  color:var(--hl-quiz-text)!important;
  box-shadow:none!important;
}
body.hl-v84 main .hl-quiz-card + .hl-quiz-card{margin-top:.85rem!important}
body.hl-v84 main .hl-quiz-question-text{
  margin:0 0 .8rem!important;
  color:var(--hl-quiz-text)!important;
  font-size:clamp(.96rem,1.6vw,1.08rem)!important;
  font-weight:800!important;
  line-height:1.45!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:pretty;
}
body.hl-v84 main .hl-quiz-options{
  min-width:0!important;
  gap:.55rem!important;
}
body.hl-v84 main .hl-quiz-option{
  width:100%;
  min-width:0!important;
  min-height:44px!important;
  padding:.7rem .82rem!important;
  border:1px solid var(--hl-quiz-border-strong)!important;
  border-radius:.75rem!important;
  background:var(--hl-quiz-option)!important;
  color:#e5e7eb!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-size:.9rem!important;
  font-weight:650!important;
  line-height:1.4!important;
  text-align:left!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease!important;
}
body.hl-v84 main button.hl-quiz-option{display:flex!important;align-items:flex-start!important}
body.hl-v84 main label.hl-quiz-option{display:flex!important;align-items:flex-start!important;gap:.65rem!important;cursor:pointer!important}
body.hl-v84 main .hl-quiz-option:hover:not(:disabled){
  background:var(--hl-quiz-option-hover)!important;
  color:#fff!important;
  border-color:#64748b!important;
  transform:translateY(-1px);
}
body.hl-v84 main .hl-quiz-option:focus-visible{
  outline:3px solid rgba(251,191,36,.95)!important;
  outline-offset:2px!important;
  border-color:#f59e0b!important;
}
body.hl-v84 main label.hl-quiz-option:has(input[type="radio"]:checked){
  background:#3b2f14!important;
  color:#fff7ed!important;
  border:2px solid #f59e0b!important;
}
body.hl-v84 main .hl-quiz-radio{
  width:1rem!important;
  height:1rem!important;
  margin-top:.12rem!important;
  flex:0 0 auto!important;
  accent-color:#f59e0b!important;
}
body.hl-v84 main .hl-quiz-option.is-selected,
body.hl-v84 main .hl-quiz-option[class~="bg-amber-600"],
body.hl-v84 main .hl-quiz-option[class~="bg-orange-600"],
body.hl-v84 main .hl-quiz-option[class*="bg-[#2c4c3e]"]{
  background:#3b2f14!important;
  color:#fde68a!important;
  border:2px solid #f59e0b!important;
  opacity:1!important;
}
body.hl-v84 main .hl-quiz-option.is-correct,
body.hl-v84 main .hl-quiz-option[class~="bg-emerald-50"],
body.hl-v84 main .hl-quiz-option[class~="bg-emerald-100"],
body.hl-v84 main .hl-quiz-option[class~="bg-emerald-500"],
body.hl-v84 main .hl-quiz-option[class~="bg-emerald-600"],
body.hl-v84 main .hl-quiz-option[class~="bg-green-500"],
body.hl-v84 main .hl-quiz-option[class~="bg-green-600"]{
  background:#064e3b!important;
  color:#d1fae5!important;
  border:2px solid #10b981!important;
  opacity:1!important;
}
body.hl-v84 main .hl-quiz-option.is-wrong,
body.hl-v84 main .hl-quiz-option[class~="bg-rose-50"],
body.hl-v84 main .hl-quiz-option[class~="bg-rose-100"],
body.hl-v84 main .hl-quiz-option[class~="bg-rose-500"],
body.hl-v84 main .hl-quiz-option[class~="bg-rose-600"],
body.hl-v84 main .hl-quiz-option[class~="bg-red-500"],
body.hl-v84 main .hl-quiz-option[class~="bg-red-600"],
body.hl-v84 main .hl-quiz-option[class~="bg-crimson-600"]{
  background:#7f1d1d!important;
  color:#fee2e2!important;
  border:2px solid #ef4444!important;
  opacity:1!important;
}
body.hl-v84 main .hl-quiz-option:disabled:not(.is-correct):not(.is-wrong):not(.is-selected){
  opacity:.7!important;
  cursor:default!important;
}
body.hl-v84 main .hl-quiz-feedback:not(.hidden){
  display:block;
  margin-top:.65rem!important;
  padding:.7rem .82rem!important;
  border:1px solid #475569!important;
  border-radius:.75rem!important;
  background:#111827!important;
  color:#cbd5e1!important;
  font-size:.86rem!important;
  font-weight:650!important;
  line-height:1.5!important;
}
body.hl-v84 main .hl-quiz-shell .hl-v84-inline-feedback{
  margin-top:.65rem!important;
  padding:.7rem .82rem!important;
  border-radius:.75rem!important;
  font-size:.86rem!important;
  line-height:1.5!important;
}
body.hl-v84 main .hl-quiz-feedback.is-correct,
body.hl-v84 main .hl-quiz-feedback[class~="bg-emerald-50"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-emerald-100"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-emerald-600"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-green-600"]{
  background:#064e3b!important;color:#d1fae5!important;border-color:#10b981!important;
}
body.hl-v84 main .hl-quiz-feedback.is-wrong,
body.hl-v84 main .hl-quiz-feedback[class~="bg-rose-50"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-rose-100"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-rose-600"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-red-600"],
body.hl-v84 main .hl-quiz-feedback[class~="bg-crimson-600"]{
  background:#7f1d1d!important;color:#fee2e2!important;border-color:#ef4444!important;
}
body.hl-v84 main .hl-quiz-result:not(.hidden){
  margin:1rem auto 0!important;
  padding:1rem!important;
  max-width:48rem!important;
  border:1px solid rgba(245,158,11,.38)!important;
  border-radius:1rem!important;
  background:#1b2638!important;
  color:#e5e7eb!important;
  text-align:center!important;
}
body.hl-v84 main .hl-quiz-result *{color:inherit!important}
body.hl-v84 main :is(.hl-quiz-submit,.hl-quiz-reset){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  max-width:100%!important;
  padding:.72rem 1rem!important;
  border-radius:.8rem!important;
  font-weight:800!important;
  line-height:1.2!important;
}
body.hl-v84 main .hl-quiz-submit{
  width:100%!important;
  background:#92400e!important;
  color:#fff7ed!important;
  border:1px solid #f59e0b!important;
}
body.hl-v84 main .hl-quiz-submit:hover{background:#b45309!important}
body.hl-v84 main .hl-quiz-reset{
  background:#1e293b!important;
  color:#fde68a!important;
  border:1px solid #64748b!important;
}
@media(max-width:760px){
  body.hl-v84 main .hl-quiz-shell{padding:1rem!important;border-radius:1.1rem!important}
  body.hl-v84 main .hl-quiz-card{padding:.9rem!important}
  body.hl-v84 main .hl-quiz-options{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  body.hl-v84 main .hl-quiz-option{font-size:.92rem!important;min-height:46px!important}
}
@media(prefers-reduced-motion:reduce){
  body.hl-v84 main .hl-quiz-option{transition:none!important}
  body.hl-v84 main .hl-quiz-option:hover:not(:disabled){transform:none!important}
}


/* Stage 2.4B — Feedback, Result & Reset Behavior */
body.hl-v84 main .hl-quiz-progress{
  width:min(100%,48rem)!important;
  margin:0 auto 1rem!important;
  padding:.5rem .75rem!important;
  border:1px solid rgba(148,163,184,.28)!important;
  border-radius:.75rem!important;
  background:#111827!important;
  color:#cbd5e1!important;
  font-size:.8rem!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-align:center!important;
}
body.hl-v84 main .hl-quiz-feedback.is-neutral,
body.hl-v84 main .hl-quiz-generated-feedback.is-neutral{
  background:#172033!important;
  color:#cbd5e1!important;
  border-color:#475569!important;
}
body.hl-v84 main .hl-quiz-summary{
  width:min(100%,48rem)!important;
  margin:1rem auto 0!important;
  padding:1rem!important;
  border:1px solid rgba(245,158,11,.42)!important;
  border-radius:1rem!important;
  background:#1b2638!important;
  color:#e5e7eb!important;
  text-align:center!important;
}
body.hl-v84 main .hl-quiz-summary.hidden{display:none!important}
body.hl-v84 main .hl-quiz-summary.is-success{background:#063f35!important;border-color:#10b981!important;color:#d1fae5!important}
body.hl-v84 main .hl-quiz-summary.is-warning{background:#29210f!important;border-color:#f59e0b!important;color:#fef3c7!important}
body.hl-v84 main .hl-quiz-summary.is-error{background:#4b1717!important;border-color:#ef4444!important;color:#fee2e2!important}
body.hl-v84 main .hl-quiz-summary-score{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.55rem!important;
  font-size:1.05rem!important;
  line-height:1.3!important;
}
body.hl-v84 main .hl-quiz-summary-score .hl-icon{width:1.05em!important;height:1.05em!important;flex:0 0 auto!important}
body.hl-v84 main .hl-quiz-summary p{margin:.45rem 0 0!important;color:inherit!important;font-size:.86rem!important;line-height:1.45!important}
body.hl-v84 main .hl-quiz-actions{
  width:min(100%,48rem)!important;
  margin:.85rem auto 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.hl-v84 main .hl-quiz-system-reset{
  gap:.5rem!important;
  min-width:12rem!important;
  background:#1e293b!important;
  color:#fde68a!important;
  border:1px solid #64748b!important;
}
body.hl-v84 main .hl-quiz-system-reset:hover{background:#273449!important;border-color:#f59e0b!important;color:#fff7ed!important}
body.hl-v84 main .hl-quiz-system-reset .hl-icon{width:1em!important;height:1em!important;flex:0 0 auto!important}
body.hl-v84 main .hl-quiz-legacy-reset{display:none!important}
body.hl-v84 main label.hl-quiz-option:has(input[type="radio"]:disabled){cursor:default!important}
body.hl-v84 main label.hl-quiz-option.is-correct{background:#064e3b!important;color:#d1fae5!important;border:2px solid #10b981!important}
body.hl-v84 main label.hl-quiz-option.is-wrong{background:#7f1d1d!important;color:#fee2e2!important;border:2px solid #ef4444!important}
@media(max-width:760px){
  body.hl-v84 main .hl-quiz-summary,body.hl-v84 main .hl-quiz-progress{width:100%!important}
  body.hl-v84 main .hl-quiz-system-reset{width:100%!important}
}


/* =========================================================
   Stage 2.4C — Quiz Accessibility & Responsive Audit
   Keyboard/focus, non-colour state cues, readable disabled
   controls, and resilient phone / 200% layouts.
   ========================================================= */
body.hl-v84 main .hl-quiz-shell{
  width:min(100%,960px)!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  scroll-margin-top:8rem!important;
}
body.hl-v84 main .hl-quiz-body,
body.hl-v84 main .hl-quiz-card,
body.hl-v84 main .hl-quiz-options,
body.hl-v84 main .hl-quiz-feedback,
body.hl-v84 main .hl-quiz-summary,
body.hl-v84 main .hl-quiz-result{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.hl-v84 main .hl-quiz-question-text,
body.hl-v84 main .hl-quiz-option{
  overflow-wrap:break-word!important;
  word-break:normal!important;
  hyphens:auto;
}
body.hl-v84 main .hl-quiz-option{
  position:relative!important;
  gap:.6rem!important;
  min-height:44px!important;
}
body.hl-v84 main .hl-quiz-option .hl-quiz-state-indicator{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:1.2rem!important;
  height:1.2rem!important;
  margin-left:auto!important;
  flex:0 0 1.2rem!important;
}
body.hl-v84 main .hl-quiz-option .hl-quiz-state-indicator .hl-icon{
  width:1rem!important;
  height:1rem!important;
}
body.hl-v84 main .hl-quiz-option.is-correct .hl-quiz-state-indicator{color:#6ee7b7!important}
body.hl-v84 main .hl-quiz-option.is-wrong .hl-quiz-state-indicator{color:#fecaca!important}
body.hl-v84 main .hl-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
body.hl-v84 main .hl-quiz-option:disabled:not(.is-correct):not(.is-wrong):not(.is-selected),
body.hl-v84 main label.hl-quiz-option:has(input[type="radio"]:disabled):not(.is-correct):not(.is-wrong){
  opacity:1!important;
  background:#172033!important;
  color:#cbd5e1!important;
  border-color:#334155!important;
  cursor:default!important;
}
body.hl-v84 main label.hl-quiz-option:has(input[type="radio"]:focus-visible),
body.hl-v84 main .hl-quiz-submit:focus-visible,
body.hl-v84 main .hl-quiz-system-reset:focus-visible,
body.hl-v84 main .hl-quiz-summary:focus-visible,
body.hl-v84 main .hl-quiz-result:focus-visible,
body.hl-v84 main .hl-quiz-title:focus-visible{
  outline:3px solid #fbbf24!important;
  outline-offset:3px!important;
}
body.hl-v84 main .hl-quiz-radio{
  width:1.125rem!important;
  height:1.125rem!important;
  min-width:1.125rem!important;
  min-height:1.125rem!important;
}
body.hl-v84 main .hl-quiz-progress[role="status"]{
  min-height:2.25rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.hl-v84 main :is(.hl-quiz-submit,.hl-quiz-system-reset){
  min-height:44px!important;
  touch-action:manipulation;
}
body.hl-v84 main .hl-quiz-summary[tabindex="-1"],
body.hl-v84 main .hl-quiz-result[tabindex="-1"],
body.hl-v84 main .hl-quiz-title[tabindex="-1"]{
  scroll-margin-top:8rem!important;
}
@media(max-width:760px){
  body.hl-v84 main .hl-quiz-shell{width:100%!important;padding:1rem!important}
  body.hl-v84 main .hl-quiz-head,
  body.hl-v84 main .hl-quiz-body,
  body.hl-v84 main .hl-quiz-progress,
  body.hl-v84 main .hl-quiz-summary,
  body.hl-v84 main .hl-quiz-actions{width:100%!important;max-width:100%!important}
  body.hl-v84 main .hl-quiz-options{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  body.hl-v84 main .hl-quiz-option{min-height:46px!important;padding:.72rem .78rem!important}
}
@media(max-width:480px){
  body.hl-v84 main .hl-quiz-shell{padding:.8rem!important;border-radius:1rem!important}
  body.hl-v84 main .hl-quiz-card{padding:.8rem!important;border-radius:.85rem!important}
  body.hl-v84 main .hl-quiz-title{font-size:1.32rem!important}
  body.hl-v84 main .hl-quiz-subtitle{font-size:.9rem!important}
  body.hl-v84 main .hl-quiz-option{font-size:.9rem!important;padding:.72rem!important}
  body.hl-v84 main .hl-quiz-feedback,
  body.hl-v84 main .hl-quiz-summary{padding:.8rem!important}
}
@media(prefers-reduced-motion:reduce){
  body.hl-v84 main .hl-quiz-shell,
  body.hl-v84 main .hl-quiz-summary,
  body.hl-v84 main .hl-quiz-result{scroll-behavior:auto!important}
}


/* Stage 2.5A — Semantic Structure & Keyboard */
.hl-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100000;
  max-width: calc(100vw - 1.5rem);
  padding: .7rem 1rem;
  border: 2px solid #f59e0b;
  border-radius: .75rem;
  background: #0f172a;
  color: #fff7ed;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(-180%);
  transition: transform .16s ease;
}
.hl-skip-link:focus,
.hl-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
}
#main-content:focus { outline: none; }

/* Legacy card-like controls retain their original appearance but gain a clear keyboard focus cue. */
.hl-keyboard-control[role="button"] { cursor: pointer; }
.hl-keyboard-control[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="button"][tabindex="0"]:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  .hl-skip-link { transition: none; }
}


/* =========================================================
   Content Images Pass 1 — Image Component & Pilot Pages
   ========================================================= */
.hl-media-card {
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 1.25rem;
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.hl-media-card__visual {
  min-width: 0;
  background: rgba(2, 6, 23, .55);
}
.hl-media-card__frame {
  position: relative;
  width: 100%;
  min-height: 15rem;
  overflow: hidden;
  background: #0f172a;
}
.hl-media-card__frame--scene { aspect-ratio: 16 / 9; }
.hl-media-card__frame--artifact { aspect-ratio: 4 / 3; }
.hl-media-card__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.hl-media-card__frame--artifact .hl-media-card__image {
  object-fit: contain;
  background: #111827;
}
.hl-media-card__body {
  min-width: 0;
  padding: 1.1rem 1.2rem 1.25rem;
  align-self: center;
}
.hl-media-card__type {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  margin-bottom: .6rem;
  padding: .28rem .65rem;
  border: 1px solid rgba(245, 158, 11, .55);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(120, 53, 15, .22);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: normal;
}
.hl-media-card__title {
  margin: 0 0 .5rem;
  color: #f8fafc;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.25;
  font-weight: 800;
  text-wrap: balance;
}
.hl-media-card__text {
  margin: 0;
  color: #dbeafe;
  line-height: 1.65;
}
.hl-media-card__caption {
  padding: .7rem .9rem .8rem;
  border-top: 1px solid rgba(148, 163, 184, .18);
  color: #cbd5e1;
  font-size: .78rem;
  line-height: 1.5;
}
.hl-media-card__caption a {
  color: #f6c56f;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}
.hl-media-card__caption a:hover { color: #fde68a; }
.hl-media-card__caption a:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
  border-radius: .2rem;
}
.hl-media-card__note {
  display: block;
  margin-top: .35rem;
  color: #94a3b8;
}
@media (min-width: 820px) {
  .hl-media-card--split {
    grid-template-columns: minmax(0, 1.08fr) minmax(16rem, .92fr);
    align-items: stretch;
  }
  .hl-media-card--split .hl-media-card__body {
    padding: 1.35rem 1.5rem;
  }
  .hl-media-card--reverse .hl-media-card__visual { order: 2; }
  .hl-media-card--reverse .hl-media-card__body { order: 1; }
}
@media (max-width: 700px) {
  .hl-media-card { margin: 1.1rem 0; border-radius: 1rem; }
  .hl-media-card__frame { min-height: 11rem; }
  .hl-media-card__body { padding: 1rem; }
  .hl-media-card__caption { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-media-card *, .hl-media-card *::before, .hl-media-card *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   Content Images Pass 2 — Rollout to Remaining Lessons
   ========================================================= */
.hl-media-card[data-historylab-media="content"] {
  contain: layout paint;
}
.hl-media-card__image {
  color: transparent;
}
@media (max-width: 520px) {
  .hl-media-card__frame--scene,
  .hl-media-card__frame--artifact { min-height: 10rem; }
}


/* =========================================================
   Content Images Pass 2.1 — Chart & Media Reliability Fix
   ========================================================= */
/* The generic responsive image rule uses height:auto!important. Media cards
   are framed components, so they need their image to fill the frame and let
   object-fit control cropping/containment. */
.hl-media-card .hl-media-card__image,
body.hl-v84 main .hl-media-card__image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}
body.hl-v84 main .hl-media-card__frame--artifact .hl-media-card__image {
  object-fit: contain !important;
  object-position: center center;
}
body.hl-v84 main .hl-media-card__frame--scene .hl-media-card__image {
  object-fit: cover !important;
  object-position: center center;
}

/* Long timeline/status messages wrap; compact metadata pills still use the
   separate hl-meta-badge rules. */
body.hl-v84 main .hl-message-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
  line-height: 1.35;
}

/* Definition rows such as §8 keep the label readable instead of squeezing it
   into a 2–3-character column. */
body.hl-v84 main .hl-definition-row {
  align-items: flex-start;
}
body.hl-v84 main .hl-definition-label {
  flex: 0 0 min(10.5rem, 38%);
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.hl-v84 main .hl-definition-row > :not(.hl-definition-label) {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 620px) {
  body.hl-v84 main .hl-definition-row {
    flex-direction: column;
    gap: .45rem;
  }
  body.hl-v84 main .hl-definition-label {
    flex: 0 1 auto;
    width: 100%;
  }
}


/* =========================================================
   Chart Sizing & Label Polish
   Local chart runtime must honor the lesson-defined chart box.
   ========================================================= */
body.hl-v84 main .chart-container > canvas,
body.hl-v842 main .chart-container > canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
}
@media(max-width:720px){
  body.hl-v84 main .chart-container,
  body.hl-v842 main .chart-container{
    min-height:240px;
  }
}


/* =========================================================
   Institution Identity — Харківський ліцей № 99
   ========================================================= */
body.hl-v84 .historylab-footer__institution{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:.35rem;
  padding-top:1rem;
  border-top:1px solid rgba(148,163,184,.22);
  min-width:0;
}
body.hl-v84 .historylab-footer__institution-logo{
  flex:0 0 auto;
  width:58px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 5px 16px rgba(2,6,23,.22);
}
body.hl-v84 .historylab-footer__institution-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
body.hl-v84 .historylab-footer__institution-text{min-width:0}
body.hl-v84 .historylab-footer__institution-kicker{
  color:#fbbf24!important;
  font-size:.69rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.15rem;
}
body.hl-v84 .historylab-footer__institution-name{
  color:#f8fafc!important;
  font-size:.95rem;
  line-height:1.3;
  font-weight:800;
}
body.hl-v84 .historylab-footer__institution-note{
  color:#94a3b8!important;
  font-size:.78rem;
  line-height:1.45;
  margin-top:.15rem;
}

body.hl-v84 .hl-institution-identity{
  display:flex;
  align-items:center;
  gap:1rem;
  max-width:100%;
  min-width:0;
  margin:0 0 1.25rem;
  padding:.95rem 1.1rem;
  border:1px solid rgba(245,158,11,.30);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.92));
  box-shadow:0 12px 30px rgba(2,6,23,.18);
}
body.hl-v84 .hl-institution-identity__logo{
  flex:0 0 auto;
  width:78px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  border-radius:15px;
  background:#f8fafc;
  border:1px solid rgba(251,191,36,.45);
}
body.hl-v84 .hl-institution-identity__logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
body.hl-v84 .hl-institution-identity__content{min-width:0}
body.hl-v84 .hl-institution-identity__kicker{
  color:#fbbf24!important;
  font-size:.72rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:.22rem;
}
body.hl-v84 .hl-institution-identity__name{
  color:#f8fafc!important;
  font-size:clamp(1.02rem,2vw,1.28rem);
  line-height:1.25;
  font-weight:900;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
body.hl-v84 .hl-institution-identity__note{
  color:#cbd5e1!important;
  font-size:.86rem;
  line-height:1.45;
  margin-top:.2rem;
}
@media(max-width:700px){
  body.hl-v84 .hl-institution-identity{padding:.8rem .85rem;gap:.8rem;border-radius:15px}
  body.hl-v84 .hl-institution-identity__logo{width:66px;height:54px}
  body.hl-v84 .historylab-footer__institution{align-items:flex-start}
}
@media(max-width:430px){
  body.hl-v84 .hl-institution-identity__logo{width:58px;height:48px}
  body.hl-v84 .hl-institution-identity__note{font-size:.78rem}
  body.hl-v84 .historylab-footer__institution-logo{width:52px;height:44px}
}

/* ================================================================
   Chart Legend & Scheme Polish
   Adaptive legend layout is handled by historylab-chart-local.js.
   Preserve the intended aspect ratio of the two hand-drawn canvas
   schemes when their cards narrow at 200% zoom / phone widths.
   ================================================================ */
body.hl-v84 main #catalCanvas,
body.hl-v84 main #clanCanvas {
  display:block;
  width:100% !important;
  max-width:340px !important;
  height:auto !important;
}
body.hl-v84 main #catalCanvas { aspect-ratio:17 / 10; }
body.hl-v84 main #clanCanvas { aspect-ratio:34 / 21; }

/* =========================================================
   Stage 2.5B — Contrast, Motion & Reflow
   Scope: accessibility hardening only. Existing visual systems,
   navigation, icons, quiz UI, content images and institution identity
   remain structurally unchanged.
   ========================================================= */

/* Contrast: keep secondary/supporting copy safely readable on dark cards
   without changing thematic accents or semantic quiz states. */
body.hl-v84.hl-ds2 main :is(.text-slate-400,.text-gray-400,.text-stone-400,.text-zinc-400),
body.hl-v84 .historylab-footer :is(.text-slate-400,.text-gray-400,.text-stone-400,.text-zinc-400){
  color:#aebdd0!important;
}
body.hl-v84.hl-ds2 main :is(a:not([class*="bg-"]),button:not([class*="bg-"])):focus-visible{
  outline-color:#fbbf24!important;
  outline-width:3px!important;
  outline-offset:3px!important;
}

/* Motion: provide a site-wide reduced-motion path, including legacy inline
   flip cards, hover lifts, pulse effects and smooth scrolling. */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto!important}
  body.hl-v84 *,
  body.hl-v84 *::before,
  body.hl-v84 *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  body.hl-v84 :is(.card-hover,.god-card,.hl-card,.hl-v84-tab,.tab-btn,.recipe-tab,.hl-quiz-option):hover{
    transform:none!important;
  }
  body.hl-v84 .flip-card-inner{
    transition:none!important;
  }
}

/* Reflow: the document itself never scrolls sideways. Components that truly
   need extra inline space keep local scrolling. */
body.hl-v84 :is(.lesson-course-nav,.hl-secondary-header,.hl-secondary-nav-shell),
body.hl-v84 :is(.lesson-course-nav .lcn-inner,.hl-secondary-nav){
  max-width:100%!important;
  min-width:0!important;
}
body.hl-v84 .lesson-course-nav .lcn-inner{
  overflow:hidden;
}
body.hl-v84 main :is(pre,.hl-code-block){
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
body.hl-v84 main :is(table,svg,canvas,img,video,iframe){
  min-width:0;
}
body.hl-v84 main :is(.overflow-x-auto,.hl-secondary-nav){
  touch-action:pan-x pan-y;
}

/* At narrow CSS viewports (including desktop browsers at 200% zoom), large
   two-column/grid teaching layouts collapse cleanly while table wrappers
   remain locally scrollable. */
@media (max-width:700px){
  body.hl-v84.hl-ds2 main :is(.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-5,.grid-cols-6){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.hl-v84.hl-ds2 main :is(.md\:grid-cols-2,.md\:grid-cols-3,.lg\:grid-cols-2,.lg\:grid-cols-3){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.hl-v84.hl-ds2 main :is(.flex-row,.md\:flex-row,.lg\:flex-row):not(.hl-secondary-nav):not(.hl-definition-row){
    min-width:0;
  }
  body.hl-v84 main .chart-container{
    overflow:hidden!important;
  }
  body.hl-v84 main .hl-media-card__body,
  body.hl-v84 main .hl-media-card__caption{
    overflow-wrap:anywhere;
  }
}

/* Very narrow widths: lesson prev/home/next controls may compress, but must
   stay inside the viewport and retain their existing navigation structure. */
@media (max-width:480px){
  body.hl-v84 .lesson-course-nav .lcn-inner{
    width:100%!important;
    justify-content:space-between!important;
  }
  body.hl-v84 .lesson-course-nav a,
  body.hl-v84 .lesson-course-nav .lcn-disabled{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:34%!important;
  }
  body.hl-v84 .lesson-course-nav :is(.lcn-label,.lcn-current){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Stage 2.5B — Browser QA Motion Specificity Fix
   Some legacy component transitions use !important with stronger selectors.
   Raise reduced-motion specificity without changing normal-motion styling. */
@media (prefers-reduced-motion: reduce){
  html body.hl-v84[class] :is(a[href],button,[role="button"],[class]){
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  html body.hl-v84[class] .hl-secondary-nav{
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   Stage 3.1C — Section III Design & Interaction Consistency
   ========================================================= */
/* Lesson §60 identity: one stable lime accent across primary section headings. */
body.hl-v84.hl-ds2.hl-section-3.hl-s3-lesson60{
  --hl-accent:#84cc16;
  --hl-accent-2:#bef264;
  --hl-rgb:132,204,22;
}
/* Topic tags are metadata, not buttons. */
body.hl-v84.hl-ds2.hl-section-3 main .lesson-badge{
  display:inline-flex!important;align-items:center!important;gap:.35rem!important;
  padding:.16rem .42rem!important;border:0!important;border-left:3px solid rgba(56,189,248,.75)!important;
  border-radius:.25rem!important;background:transparent!important;box-shadow:none!important;
  color:#cbd5e1!important;font-size:.72rem!important;font-weight:800!important;line-height:1.35!important;
  cursor:default!important;pointer-events:none!important;text-transform:none!important;
}
body.hl-v84.hl-ds2.hl-section-3 main .lesson-badge--gold{border-left-color:#f59e0b!important;color:#fde68a!important}
body.hl-v84.hl-ds2.hl-section-3 main :is(.lesson-badge--slate,.lesson-badge--indigo){border-left-color:#94a3b8!important;color:#dbeafe!important}

/* Canonical teaching cards for Section III. */
body.hl-v84.hl-ds2.hl-section-3 main :is(.hl-s3-teaching-card,.timeline-item,.battle-card,.reform-card,.laconic-box,.war-step,.path-step){
  background:linear-gradient(145deg,#172033,#111827)!important;
  color:#e2e8f0!important;border-color:#475569!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2.hl-section-3 main :is(.hl-s3-teaching-card,.timeline-item,.battle-card,.reform-card,.laconic-box,.war-step,.path-step) :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:#f8fafc!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2.hl-section-3 main :is(.hl-s3-teaching-card,.timeline-item,.battle-card,.reform-card,.laconic-box,.war-step,.path-step) :is(p,li,span,small){
  color:#dbe4f0!important;text-shadow:none!important;
}
body.hl-v84.hl-ds2.hl-section-3 main :is(.timeline-item,.battle-card,.reform-card,.war-step,.path-step) :is(.battle-date,.reform-date){color:#7dd3fc!important}
body.hl-v84.hl-ds2.hl-section-3 main .timeline-dot{box-shadow:0 0 0 4px rgba(56,189,248,.16)!important}
body.hl-v84.hl-ds2.hl-section-3 main .timeline-item:nth-child(2) .timeline-dot{box-shadow:0 0 0 4px rgba(245,158,11,.16)!important}
body.hl-v84.hl-ds2.hl-section-3 main .timeline-item:nth-child(3) .timeline-dot{box-shadow:0 0 0 4px rgba(148,163,184,.16)!important}
/* Sky teaching surfaces were not covered by the legacy light-surface normalizer. */
body.hl-v84.hl-ds2.hl-section-3 main [class~="bg-sky-50"]:not(button):not(a):not(span){
  background:linear-gradient(145deg,#172033,#111827)!important;color:#e2e8f0!important;border-color:#475569!important;
}
body.hl-v84.hl-ds2.hl-section-3 main [class~="bg-sky-50"]:not(button):not(a):not(span) :is(h1,h2,h3,h4,p,li,strong,b,span){color:#e2e8f0!important}

/* Compact flip dictionary — keeps the established History Lab interaction. */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary{margin-top:1.75rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .flip-card{height:9.5rem;background:transparent;perspective:1000px;min-width:0}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .45s ease;transform-style:preserve-3d}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary :is(.flip-card-front,.flip-card-back){position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;border-radius:.85rem;display:flex;align-items:center;justify-content:center;padding:1rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .flip-card-front{flex-direction:column;gap:.35rem;background:linear-gradient(145deg,#1d293b,#172033)!important;border:1px solid #475569!important;color:#f8fafc!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .flip-card-back{transform:rotateY(180deg);background:#2a2118!important;border:1px solid #92400e!important;color:#fff7ed!important;font-size:.9rem;line-height:1.45}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .hl-s3-term{font-weight:900;color:#f8fafc!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .hl-s3-flip-hint{font-size:.75rem!important;color:#cbd5e1!important}

/* Consistent media sizing and attribution. */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media{margin:1.35rem auto;max-width:920px}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--artifact,
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--plan{max-width:720px}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media img{display:block;width:100%!important;max-width:100%!important;max-height:480px;object-position:center;border-radius:.8rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--scene img{object-fit:cover}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--artifact img,
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--plan img{object-fit:contain;background:#111827}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media figcaption{margin-top:.55rem;color:#cbd5e1!important;font-size:.9rem!important;line-height:1.5!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-attribution{display:block;margin-top:.25rem;color:#94a3b8!important;font-size:.82rem!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-attribution a{color:#7dd3fc!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
body.hl-v84.hl-ds2.hl-section-3 main .hl-media-card{max-width:920px;margin-inline:auto}
body.hl-v84.hl-ds2.hl-section-3 main .hl-media-card__frame--artifact{max-width:720px;margin-inline:auto}

/* One primary quiz action across the section. */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-quiz-cta{
  width:100%!important;background:#075985!important;color:#fff!important;border:1px solid #0ea5e9!important;
  min-height:48px!important;padding:.78rem 1rem!important;border-radius:.75rem!important;font-weight:800!important;
  box-shadow:0 8px 20px rgba(2,132,199,.18)!important;
}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-quiz-cta:hover{background:#0c4a6e!important;border-color:#38bdf8!important}

/* Polis scheme accessibility/legibility. */
body.hl-v84.hl-ds2.hl-section-3 main .polis-map .wall{display:flex;align-items:flex-start;justify-content:center}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-wall-label{transform:translateY(-.8rem);padding:.12rem .5rem;border-radius:.35rem;background:#0f172a;color:#cbd5e1!important;font-size:.72rem!important;font-weight:800;letter-spacing:.03em}

@media (min-width:768px){
  body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:520px){
  body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary-grid{grid-template-columns:1fr}
  body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary .flip-card-inner{transition:none!important}
}
/* Stage 3.1C media boxes reserve space before lazy images load. */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--scene img{aspect-ratio:16 / 9}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--artifact img{aspect-ratio:4 / 3}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-media--plan img{aspect-ratio:1 / 1}


/* =========================================================
   Stage 3.1D — Interactive Learning & Editorial Polish
   Section III mini-games: one compact active-learning task per lesson.
   ========================================================= */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-game{
  margin:1.75rem 0;padding:1.25rem;border:1px solid #334155;border-radius:1rem;
  background:linear-gradient(145deg,#0f172a,#111827);color:#e2e8f0;box-shadow:0 10px 24px rgba(15,23,42,.12)
}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.85rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:0 0 2.5rem;border-radius:.75rem;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.1);color:#fbbf24}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-kicker{font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fbbf24}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-title{margin:.12rem 0 0;color:#f8fafc!important;font-family:var(--hl-font-heading);font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:800;line-height:1.25}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-intro{margin:0 0 1rem;color:#cbd5e1!important;font-size:.94rem;line-height:1.55}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-rounds{display:grid;grid-template-columns:1fr;gap:.8rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-round{min-width:0;padding:.9rem;border:1px solid #334155;border-radius:.85rem;background:rgba(2,6,23,.38)}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-prompt{margin:0 0 .7rem;color:#f8fafc!important;font-weight:800;line-height:1.45}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choices{display:flex;flex-wrap:wrap;gap:.5rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice{min-height:44px;min-width:0;padding:.55rem .78rem;border:1px solid #64748b;border-radius:.7rem;background:#1e293b;color:#e2e8f0;font:inherit;font-size:.88rem;font-weight:750;line-height:1.3;cursor:pointer;text-align:left}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice:hover:not(:disabled){border-color:#38bdf8;background:#0f3044}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice.is-correct{border-color:#34d399!important;background:#064e3b!important;color:#ecfdf5!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice.is-wrong{border-color:#fb7185!important;background:#4c0519!important;color:#fff1f2!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice:disabled{cursor:default;opacity:.92}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-feedback{min-height:1.25rem;margin-top:.55rem;color:#cbd5e1!important;font-size:.82rem;line-height:1.4}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-feedback.is-good{color:#a7f3d0!important}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-feedback.is-bad{color:#fecdd3!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid #334155}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-score{color:#e2e8f0!important;font-size:.88rem;font-weight:800}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-reset{min-height:44px;padding:.55rem .9rem;border:1px solid #475569;border-radius:.7rem;background:#172033;color:#f8fafc;font-weight:800;cursor:pointer}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-reset:hover{border-color:#f59e0b;background:#292117}
@media(min-width:760px){body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-rounds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-game{padding:1rem}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choices{flex-direction:column}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice{width:100%}}
@media(prefers-reduced-motion:reduce){body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-choice,body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-mini-reset{transition:none!important}}


/* Stage 3.1E — Structure & Visual Consistency Polish */
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-period-badge{
  display:inline-flex!important;align-items:center!important;white-space:nowrap!important;
  font-size:clamp(.62rem,1.2vw,.75rem)!important;line-height:1.25!important;max-width:100%;
}
body.hl-v84.hl-ds2.hl-section-3 main .hl-quiz-subtitle{
  margin:.35rem 0 1rem!important;color:#cbd5e1!important;font-size:.88rem!important;line-height:1.5!important;
}
body.hl-v84.hl-ds2.hl-section-3 main section[id="test"] .hl-quiz-subtitle,
body.hl-v84.hl-ds2.hl-section-3 main section[id="quiz"] .hl-quiz-subtitle{color:#cbd5e1!important}

/* Ukrainian instructional plan replacing the English-labelled house image. */
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan{
  position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;grid-template-rows:auto auto auto;
  grid-template-areas:"rooms rooms rooms" "work court shop" "entry court shop";
  gap:.55rem;padding:1rem;border:1px solid #475569;border-radius:1rem;
  background:linear-gradient(145deg,#172033,#0f172a);min-height:18rem;color:#e2e8f0;
}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__zone{
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  min-width:0;padding:.8rem;border:1px solid #64748b;border-radius:.8rem;background:#1e293b;
}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__zone strong{color:#f8fafc!important;font-size:.93rem}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__zone span{color:#cbd5e1!important;font-size:.75rem;line-height:1.35;margin-top:.2rem}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__rooms{grid-area:rooms}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__work{grid-area:work}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__court{grid-area:court;background:#22344b;border-style:dashed;border-color:#94a3b8}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__shop{grid-area:shop}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan__entry{grid-area:entry;background:#2a2118;border-color:#92400e}

/* True schematic of a Greek colony-polis: spatial relation, not five equal cards. */
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:"acropolis acropolis port" "walls agora port" "chora chora chora";
  gap:.65rem;padding:1.1rem;border:1px solid #475569;border-radius:1rem;
  background:linear-gradient(145deg,#111827,#172033);color:#e2e8f0;overflow:hidden;
}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__node{
  position:relative;z-index:1;padding:.8rem .9rem;border-radius:.8rem;border:1px solid #64748b;background:#1e293b;min-width:0;
}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__node strong{display:block;color:#f8fafc!important;margin-bottom:.2rem}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__node span{display:block;color:#cbd5e1!important;font-size:.8rem;line-height:1.4}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__acropolis{grid-area:acropolis;max-width:62%;justify-self:center;border-color:#38bdf8;background:#0c4a6e}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__agora{grid-area:agora;justify-self:center;width:min(100%,22rem);border-color:#f59e0b;background:#78350f}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__port{grid-area:port;align-self:stretch;border-color:#22d3ee;background:#164e63}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__chora{grid-area:chora;border-color:#4ade80;background:#14532d;text-align:center}
body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__walls{
  grid-area:walls;min-height:6rem;border:2px dashed #94a3b8;border-radius:1rem;display:flex;align-items:flex-start;justify-content:center;
  padding:.5rem;color:#cbd5e1;font-size:.75rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
}
body.hl-v84.hl-ds2.hl-section-3.hl-s3-lesson44 main .compare-strip{grid-template-columns:1fr!important}
body.hl-v84.hl-ds2.hl-section-3.hl-s3-lesson44 main .compare-chip{
  display:grid!important;grid-template-columns:minmax(7.5rem,.34fr) minmax(0,1fr)!important;gap:.7rem!important;align-items:start!important;
  background:#0f172a!important;border:1px dashed #64748b!important;color:#e2e8f0!important;
}
body.hl-v84.hl-ds2.hl-section-3.hl-s3-lesson44 main .compare-chip strong{margin:0!important;color:#f8fafc!important}
body.hl-v84.hl-ds2.hl-section-3.hl-s3-lesson44 main .compare-chip span{color:#cbd5e1!important}
@media(max-width:640px){
  body.hl-v84.hl-ds2.hl-section-3 .hl-s3-house-plan{grid-template-columns:1fr 1fr;grid-template-areas:"rooms rooms" "court court" "work shop" "entry entry";min-height:auto}
  body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan{grid-template-columns:1fr;grid-template-areas:"acropolis" "walls" "agora" "port" "chora"}
  body.hl-v84.hl-ds2.hl-section-3 .hl-s3-colony-plan__acropolis{max-width:none;width:100%}
  body.hl-v84.hl-ds2.hl-section-3.hl-s3-lesson44 main .compare-chip{grid-template-columns:1fr!important}
}


/* =========================================================
   Stage 3.1F — Learning Interactions Expansion
   Reusable Match / Classification / Timeline / Hotspot patterns.
   ========================================================= */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-learning-interaction{
  margin:1.75rem 0;padding:1.2rem;border:1px solid #334155;border-radius:1rem;
  background:linear-gradient(145deg,#101827,#172033);color:#e2e8f0;box-shadow:0 10px 24px rgba(15,23,42,.11)
}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.75rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:0 0 2.5rem;border-radius:.75rem;border:1px solid rgba(56,189,248,.35);background:rgba(14,165,233,.10);color:#7dd3fc}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-kicker{font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7dd3fc}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-title{margin:.12rem 0 0!important;color:#f8fafc!important;font-family:var(--hl-font-heading)!important;font-size:clamp(1.25rem,2.2vw,1.7rem)!important;font-weight:800!important;line-height:1.25!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-intro{margin:0 0 1rem!important;color:#cbd5e1!important;font-size:.94rem;line-height:1.55}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-label{margin-bottom:.45rem;color:#94a3b8;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:1rem;padding-top:.8rem;border-top:1px solid #334155}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-feedback{color:#cbd5e1!important;font-size:.86rem;font-weight:750;line-height:1.4}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-feedback.is-good{color:#a7f3d0!important}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-feedback.is-bad{color:#fecdd3!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-reset{min-height:44px;padding:.55rem .9rem;border:1px solid #475569;border-radius:.7rem;background:#172033;color:#f8fafc;font:inherit;font-weight:800;cursor:pointer}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-reset:hover{border-color:#38bdf8;background:#0f3044}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-li-reset:focus-visible,body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-learning-interaction button:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
/* hotspot */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-btn{min-height:48px;padding:.7rem .8rem;border:1px solid #64748b;border-radius:.75rem;background:#1e293b;color:#e2e8f0;font:inherit;font-weight:800;text-align:left;cursor:pointer}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-btn:hover,body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-btn[aria-pressed="true"]{border-color:#38bdf8;background:#0c4a6e;color:#f0f9ff}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-detail{min-height:6rem;padding:.9rem;border:1px solid #475569;border-radius:.8rem;background:#0b1220}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-detail strong{display:block;color:#f8fafc!important;margin-bottom:.25rem}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-detail p{margin:0!important;color:#cbd5e1!important;font-size:.88rem;line-height:1.5}
/* match */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-list{display:grid;gap:.5rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-item{min-height:48px;padding:.65rem .75rem;border:1px solid #64748b;border-radius:.75rem;background:#1e293b;color:#e2e8f0;font:inherit;font-size:.88rem;font-weight:760;text-align:left;cursor:pointer}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-item.is-selected{border-color:#fbbf24;background:#3b2d12;color:#fef3c7}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-item.is-matched{border-color:#34d399;background:#064e3b;color:#ecfdf5}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-item.is-wrong{border-color:#fb7185;background:#4c0519;color:#fff1f2}
/* classify */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-item{padding:.85rem;border:1px solid #475569;border-radius:.8rem;background:#0b1220;min-width:0}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-item>p{margin:0 0 .6rem!important;color:#f8fafc!important;font-weight:800;line-height:1.4}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-choices{display:flex;flex-wrap:wrap;gap:.45rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-choice{min-height:44px;padding:.5rem .7rem;border:1px solid #64748b;border-radius:.65rem;background:#1e293b;color:#e2e8f0;font:inherit;font-size:.84rem;font-weight:750;cursor:pointer}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-choice.is-correct{border-color:#34d399;background:#064e3b;color:#ecfdf5}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-choice.is-wrong{border-color:#fb7185;background:#4c0519;color:#fff1f2}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-feedback{min-height:1.2rem;margin-top:.5rem;color:#94a3b8!important;font-size:.78rem;line-height:1.35}
/* timeline */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-bank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-event{min-height:50px;padding:.65rem .75rem;border:1px solid #64748b;border-radius:.75rem;background:#1e293b;color:#e2e8f0;font:inherit;font-size:.86rem;font-weight:760;text-align:left;cursor:pointer}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-event.is-done{border-color:#34d399;background:#064e3b;color:#ecfdf5}.hl-s3-timeline-event.is-wrong{border-color:#fb7185!important;background:#4c0519!important;color:#fff1f2!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-track{margin-top:.9rem;padding:.7rem;border-left:3px solid #38bdf8;background:#0b1220;border-radius:0 .75rem .75rem 0}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-sequence{display:flex;flex-wrap:wrap;gap:.45rem;min-height:2rem}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-step{padding:.4rem .55rem;border-radius:.55rem;background:#164e63;color:#ecfeff;font-size:.78rem;font-weight:800}
/* §44: city wall is an enclosing boundary, chora stays outside; port sits at the edge. */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-interactive .hl-s3-colony-plan{display:block;padding:0;border:0;background:transparent;overflow:visible}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__citywall{position:relative;display:grid;grid-template-columns:1fr 1.1fr .85fr;grid-template-areas:"acro acro port" "agora agora port";gap:.65rem;padding:2rem .8rem .8rem;border:3px dashed #94a3b8;border-radius:1rem;background:#111827}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__walllabel{position:absolute;top:.35rem;left:.7rem;color:#cbd5e1;font-size:.7rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__acropolis{grid-area:acro;max-width:65%;justify-self:center;width:100%}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__agora{grid-area:agora;width:min(100%,23rem);justify-self:center}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__port{grid-area:port;align-self:stretch;position:relative;border-color:#22d3ee!important;background:linear-gradient(90deg,#164e63 0 72%,#075985 72% 100%)!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__chora{display:block;width:100%;margin-top:.7rem;text-align:center;border-color:#4ade80!important;background:#14532d!important}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__node strong{display:block;color:#f8fafc!important;margin-bottom:.2rem}body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__node span{display:block;color:#cbd5e1!important;font-size:.8rem;line-height:1.4}
@media(min-width:760px){body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-layout{grid-template-columns:.9fr 1.1fr}}
@media(max-width:640px){
 body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-learning-interaction{padding:1rem}
 body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-hotspot-controls,body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-match-grid,body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-classify-grid,body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-timeline-bank{grid-template-columns:1fr}
 body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__citywall{grid-template-columns:1fr;grid-template-areas:"acro" "agora" "port";padding-top:2.2rem}
 body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-colony-plan__acropolis{max-width:none}
}
@media(prefers-reduced-motion:reduce){body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-learning-interaction button{transition:none!important}}


/* =========================================================
   Stage 3.1F.2 — Section III Visual System & Flip Recovery
   Canonical dark teaching surfaces + defensive flip behavior.
   ========================================================= */
/* Large lesson-specific information cards must follow the dark Section III surface system.
   Small metadata pills, form fields, images and assessment feedback keep their semantic colors. */
body.hl-v84.hl-ds2.hl-section-3 main :is(
  .hl46-state,.hl47-light,
  .rome48-light,.rome48-mag-card,
  .rome49-light,.rome49-compare-card,.rome49-time,
  .rome50-light,.rome50-food-card
){
  background:linear-gradient(145deg,#172033,#111827)!important;
  color:#e2e8f0!important;
  border-color:#475569!important;
  text-shadow:none!important;
}
body.hl-v84.hl-ds2.hl-section-3 main :is(
  .hl46-state,.hl47-light,
  .rome48-light,.rome48-mag-card,
  .rome49-light,.rome49-compare-card,.rome49-time,
  .rome50-light,.rome50-food-card
) :is(h1,h2,h3,h4,h5,h6,strong,b){color:#f8fafc!important;text-shadow:none!important}
body.hl-v84.hl-ds2.hl-section-3 main :is(
  .hl46-state,.hl47-light,
  .rome48-light,.rome48-mag-card,
  .rome49-light,.rome49-compare-card,.rome49-time,
  .rome50-light,.rome50-food-card
) :is(p,li,span,small){color:#cbd5e1!important;text-shadow:none!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome48-mag-card .count{background:#075985!important;color:#fff!important}
body.hl-v84.hl-ds2.hl-section-3 main .historylab-memory__num{background:#075985!important;color:#fff!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome49-time b{color:#fdba74!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome49-compare-card--pat{border-top-color:#f59e0b!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome49-compare-card--pleb{border-top-color:#38bdf8!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome50-food-card--wealthy{border-top-color:#f59e0b!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome50-food-card--common{border-top-color:#38bdf8!important}
body.hl-v84.hl-ds2.hl-section-3 main .rome50-name-example{color:#f8fafc!important;text-shadow:none!important}

/* Defensive flip recovery: every Section III flip-card uses the canonical flip mechanics.
   The semantic .hl-s3-glossary wrapper remains required by the template and QA. */
body.hl-v84.hl-ds2.hl-section-3 main .flip-card{height:9.5rem;background:transparent!important;perspective:1000px;min-width:0}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .45s ease;transform-style:preserve-3d}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card :is(.flip-card-front,.flip-card-back){position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:.85rem;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card .flip-card-front{flex-direction:column;gap:.35rem;background:linear-gradient(145deg,#1d293b,#172033)!important;border:1px solid #475569!important;color:#f8fafc!important}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card .flip-card-back{transform:rotateY(180deg);background:#2a2118!important;border:1px solid #92400e!important;color:#fff7ed!important;font-size:.9rem;line-height:1.45}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card .flip-card-back :is(strong,span,p){color:inherit!important}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card .hl-s3-term{font-weight:900;color:#f8fafc!important}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card .hl-s3-flip-hint{font-size:.75rem!important;color:#cbd5e1!important}
body.hl-v84.hl-ds2.hl-section-3 main .flip-card:focus-visible{outline:3px solid #fbbf24!important;outline-offset:3px!important}
@media (prefers-reduced-motion:reduce){body.hl-v84.hl-ds2.hl-section-3 main .flip-card-inner{transition:none!important}}

/* Stage 3.1F.2 — glossary reflow: two columns on tablet, four only on wide screens.
   Wider desktop cards receive extra height so definitions are never clipped. */
@media (min-width:768px) and (max-width:1023px){
  body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (min-width:1024px){
  body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-glossary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.hl-v84.hl-ds2.hl-section-3 main .flip-card{height:14rem!important}
}

/* Stage 3.1M.2 — source attribution normalization */
.historylab-source-line{display:block;margin-top:.45rem;font-size:.78rem;line-height:1.45;color:#94a3b8;overflow-wrap:anywhere}.historylab-source-line a{color:#7dd3fc;text-decoration:underline;text-underline-offset:2px}.historylab-source-line a:focus-visible{outline:2px solid #38bdf8;outline-offset:2px;border-radius:.15rem}

/* =========================================================
   Stage 4.0A — Home Index System Unification & Course Completion
   ========================================================= */
body.hl-v84.hl-home{
  margin:0;
  min-height:100vh;
  background:#090c10!important;
  color:#e5e7eb!important;
}
body.hl-v84.hl-home .hl-home-shell,
body.hl-v84.hl-home .hl-home-main{
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto;
}
body.hl-v84.hl-home .hl-home-hero{
  padding:64px 0 36px;
  background:
    radial-gradient(circle at 16% 10%,rgba(245,158,11,.12),transparent 30%),
    radial-gradient(circle at 82% 20%,rgba(56,189,248,.09),transparent 28%),
    linear-gradient(180deg,#111827 0,#090c10 100%);
  border-bottom:1px solid rgba(148,163,184,.12);
}
body.hl-v84.hl-home .hl-home-hero .hl-eyebrow{
  margin-bottom:1.05rem;
}
body.hl-v84.hl-home .hl-home-hero h1{
  margin:0;
  max-width:920px;
  color:#f8fafc!important;
  font-family:var(--hl-font-heading)!important;
  font-size:clamp(2.55rem,6vw,4.9rem);
  font-weight:800;
  line-height:1.05!important;
  letter-spacing:-.025em;
  text-wrap:balance;
}
body.hl-v84.hl-home .hl-home-lead{
  max-width:790px;
  margin:1.25rem 0 0;
  color:#cbd5e1!important;
  font-size:1.1rem;
  line-height:1.72;
}
body.hl-v84.hl-home .hl-home-main{
  padding:0 0 36px;
}
body.hl-v84.hl-home .hl-institution-identity{
  margin:1.6rem 0 0;
}
body.hl-v84.hl-home .hl-home-stats{
  display:grid;
  grid-template-columns:.72fr .82fr 1.22fr 1.45fr;
  gap:14px;
  margin:1.35rem 0 1.65rem;
}
body.hl-v84.hl-home .hl-home-stat{
  min-width:0;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.1rem;
  border:1px solid #334155;
  border-radius:18px;
  background:linear-gradient(145deg,#111827,#0f172a);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
body.hl-v84.hl-home .hl-home-stat>strong:first-child{
  color:#fbbf24!important;
  font-family:var(--hl-font-heading)!important;
  font-size:2rem;
  line-height:1;
}
body.hl-v84.hl-home .hl-home-stat>span:last-child{
  margin-top:.4rem;
  color:#94a3b8!important;
  font-size:.86rem;
  line-height:1.35;
}
body.hl-v84.hl-home .hl-home-stat--text{
  position:relative;
  padding-left:3.35rem;
}
body.hl-v84.hl-home .hl-home-stat--text>.hl-icon{
  position:absolute;
  left:1rem;
  top:1.08rem;
  width:1.5rem!important;
  height:1.5rem!important;
  color:#7dd3fc!important;
}
body.hl-v84.hl-home .hl-home-stat--text>strong{
  color:#f8fafc!important;
  font-size:.96rem;
  line-height:1.35;
}
body.hl-v84.hl-home .hl-home-sections{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
body.hl-v84.hl-home .hl-home-section-card{
  --home-accent:#f59e0b;
  --home-accent-soft:#fbbf24;
  --home-cta:#92400e;
  --home-cta-hover:#b45309;
  min-width:0;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto auto;
  min-height:500px;
  padding:1.75rem;
  border:1px solid #334155;
  border-top:3px solid var(--home-accent);
  border-radius:22px;
  background:linear-gradient(155deg,#172033 0,#101827 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
body.hl-v84.hl-home .hl-home-section-card--two{
  --home-accent:#818cf8;
  --home-accent-soft:#a5b4fc;
  --home-cta:#3730a3;
  --home-cta-hover:#4338ca;
}
body.hl-v84.hl-home .hl-home-section-card--three{
  --home-accent:#22d3ee;
  --home-accent-soft:#67e8f9;
  --home-cta:#0e7490;
  --home-cta-hover:#0891b2;
}
body.hl-v84.hl-home .hl-home-section-card__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.7rem;
  height:2.7rem;
  margin-bottom:.9rem;
  border:1px solid color-mix(in srgb,var(--home-accent) 45%,#334155);
  border-radius:.9rem;
  background:color-mix(in srgb,var(--home-accent) 12%,transparent);
  color:var(--home-accent-soft)!important;
}
body.hl-v84.hl-home .hl-home-section-card__mark .hl-icon{
  width:1.38rem!important;
  height:1.38rem!important;
  color:inherit!important;
}
body.hl-v84.hl-home .hl-home-section-card__eyebrow{
  color:var(--home-accent-soft)!important;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
body.hl-v84.hl-home .hl-home-section-card h2{
  margin:.8rem 0 1rem;
  color:#f8fafc!important;
  font-family:var(--hl-font-heading)!important;
  font-size:clamp(1.55rem,2.2vw,2rem);
  font-weight:800;
  line-height:1.18;
  overflow-wrap:break-word;
}
body.hl-v84.hl-home .hl-home-section-card>p{
  margin:0;
  color:#cbd5e1!important;
  font-size:.98rem;
  line-height:1.68;
}
body.hl-v84.hl-home .hl-home-section-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.38rem;
  align-items:center;
  margin-top:1.25rem;
  padding-top:1.05rem;
  border-top:1px solid rgba(148,163,184,.16);
  color:#94a3b8!important;
  font-size:.86rem;
}
body.hl-v84.hl-home .hl-home-section-card__meta strong{
  color:#cbd5e1!important;
}
body.hl-v84.hl-home .hl-home-section-card__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:48px;
  margin-top:1rem;
  padding:.78rem 1rem;
  border:1px solid var(--home-accent)!important;
  border-radius:13px;
  background:var(--home-cta)!important;
  color:#fff!important;
  font-weight:850;
  text-decoration:none!important;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease!important;
}
body.hl-v84.hl-home .hl-home-section-card__cta:hover,
body.hl-v84.hl-home .hl-home-section-card__cta:focus-visible{
  background:var(--home-cta-hover)!important;
  border-color:var(--home-accent-soft)!important;
  transform:translateY(-1px);
}
body.hl-v84.hl-home .hl-home-section-card__cta .hl-icon{
  width:1.05rem!important;
  height:1.05rem!important;
  color:inherit!important;
}
body.hl-v84.hl-home .hl-home-complete{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2rem;
  margin-top:1.9rem;
  padding:1.55rem 1.65rem;
  border:1px solid rgba(100,116,139,.58);
  border-radius:20px;
  background:
    radial-gradient(circle at 5% 40%,rgba(34,197,94,.07),transparent 28%),
    linear-gradient(135deg,#172033,#111827);
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}
body.hl-v84.hl-home .hl-home-complete>div{
  min-width:0;
}
body.hl-v84.hl-home .hl-home-complete__kicker{
  display:flex;
  align-items:center;
  gap:.42rem;
  margin-bottom:.35rem;
  color:#86efac!important;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.hl-v84.hl-home .hl-home-complete__kicker .hl-icon{
  width:1rem!important;
  height:1rem!important;
  color:inherit!important;
}
body.hl-v84.hl-home .hl-home-complete strong{
  color:#f8fafc!important;
  font-size:1.12rem;
  line-height:1.35;
}
body.hl-v84.hl-home .hl-home-complete p{
  max-width:760px;
  margin:.45rem 0 0;
  color:#cbd5e1!important;
  line-height:1.58;
}
body.hl-v84.hl-home .hl-home-start{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:50px;
  padding:.8rem 1.15rem;
  border:1px solid rgba(245,158,11,.72);
  border-radius:13px;
  background:#1b2434;
  color:#fff!important;
  font-weight:850;
  text-decoration:none!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
body.hl-v84.hl-home .hl-home-start:hover,
body.hl-v84.hl-home .hl-home-start:focus-visible{
  border-color:#fbbf24;
  background:#78350f;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(120,53,15,.24);
}
body.hl-v84.hl-home .hl-home-start:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
body.hl-v84.hl-home .hl-home-start .hl-icon{
  width:1rem!important;
  height:1rem!important;
  color:inherit!important;
}
body.hl-v84.hl-home .historylab-footer{
  margin-top:0;
}
@media(max-width:1000px){
  body.hl-v84.hl-home .hl-home-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84.hl-home .hl-home-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84.hl-home .hl-home-section-card--three{grid-column:1/-1;min-height:0}
  body.hl-v84.hl-home .hl-home-complete{gap:1.25rem;padding:1.4rem 1.45rem}
}
@media(max-width:720px){
  body.hl-v84.hl-home .hl-home-shell,
  body.hl-v84.hl-home .hl-home-main{width:min(100% - 24px,1180px)}
  body.hl-v84.hl-home .hl-home-hero{padding:42px 0 28px}
  body.hl-v84.hl-home .hl-home-hero h1{font-size:clamp(2.1rem,12vw,3rem)}
  body.hl-v84.hl-home .hl-home-lead{font-size:1rem;line-height:1.62}
  body.hl-v84.hl-home .hl-home-stats{grid-template-columns:1fr 1fr;gap:10px}
  body.hl-v84.hl-home .hl-home-stat{min-height:92px;padding:.85rem .9rem}
  body.hl-v84.hl-home .hl-home-stat--text{grid-column:1/-1;min-height:82px;padding-left:3.15rem}
  body.hl-v84.hl-home .hl-home-sections{grid-template-columns:1fr;gap:14px}
  body.hl-v84.hl-home .hl-home-section-card,
  body.hl-v84.hl-home .hl-home-section-card--three{grid-column:auto;min-height:0;padding:1.25rem}
  body.hl-v84.hl-home .hl-home-main{padding-bottom:28px}
  body.hl-v84.hl-home .hl-home-complete{display:block;margin-top:1.5rem;padding:1.2rem}
  body.hl-v84.hl-home .hl-home-start{margin-top:1rem;width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  body.hl-v84.hl-home .hl-home-section-card__cta,
  body.hl-v84.hl-home .hl-home-start{transition-duration:.01ms!important;transform:none!important}
}


/* Stage 4.0B — Section Index System Unification & Media Recovery */
body.hl-v84.hl-section-index{background:#090c10!important;color:#e5e7eb!important}
body.hl-v84.hl-section-index .lesson-course-nav{position:sticky;top:0;z-index:9999;background:rgba(15,23,42,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.12)}
body.hl-v84.hl-section-index .lesson-course-nav .lcn-inner{max-width:1180px;margin:auto;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:hidden}
body.hl-v84.hl-section-index .lesson-course-nav .lcn-group{display:flex;align-items:center;gap:7px;min-width:0}
body.hl-v84.hl-section-index .lesson-course-nav a,body.hl-v84.hl-section-index .lesson-course-nav .lcn-disabled{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border-radius:9px;color:#e2e8f0;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
body.hl-v84.hl-section-index .lesson-course-nav a:hover{background:rgba(255,255,255,.11);color:#fff}
body.hl-v84.hl-section-index .lesson-course-nav .lcn-current{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hl-v84.hl-section-index.hl-section-1 .lcn-current{color:#fbbf24}
body.hl-v84.hl-section-index.hl-section-2 .lcn-current{color:#c4b5fd}
body.hl-v84.hl-section-index.hl-section-3 .lcn-current{color:#7dd3fc}
body.hl-v84.hl-section-index .hl-section-index-hero{padding:40px 1rem;position:relative;overflow:hidden;border-bottom:1px solid rgba(148,163,184,.22)}
body.hl-v84.hl-section-index.hl-section-1 .hl-section-index-hero{background:linear-gradient(90deg,#78350f,#431407 48%,#0f172a)}
body.hl-v84.hl-section-index.hl-section-2 .hl-section-index-hero{background:linear-gradient(90deg,#451a03,#0f172a 50%,#312e81)}
body.hl-v84.hl-section-index.hl-section-3 .hl-section-index-hero{background:linear-gradient(90deg,#082f49,#0f172a 48%,#451a03)}
body.hl-v84.hl-section-index .hl-section-index-hero__inner{width:min(100%,1180px);margin:auto;text-align:center}
body.hl-v84.hl-section-index .hl-section-index-hero h1{font-family:var(--hl-font-heading);font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.08;color:#fff;margin:.75rem auto 1rem;max-width:980px}
body.hl-v84.hl-section-index .hl-section-index-hero__subtitle{font-size:clamp(.95rem,1.6vw,1.1rem);line-height:1.6;max-width:960px;margin:auto;color:#dbeafe;font-weight:650}
body.hl-v84.hl-section-index .hl-section-index-search{position:relative;max-width:520px;margin:1.6rem auto 0}
body.hl-v84.hl-section-index .hl-section-index-search input{width:100%;background:rgba(15,23,42,.9);color:#f8fafc;border:1px solid rgba(148,163,184,.38);border-radius:16px;padding:.8rem 1rem .8rem 2.8rem}
body.hl-v84.hl-section-index .hl-section-index-search .hl-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#94a3b8}
body.hl-v84.hl-section-index .hl-section-index-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
body.hl-v84.hl-section-index .hl-section-index-stat{min-height:104px;background:rgba(15,23,42,.82);border:1px solid #1e293b;border-radius:18px;padding:1rem 1.1rem;display:flex;align-items:center;gap:1rem}
body.hl-v84.hl-section-index .hl-section-index-stat__icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:flex;align-items:center;justify-content:center}
body.hl-v84.hl-section-index .hl-section-index-stat__label{font-size:.73rem;text-transform:uppercase;color:#94a3b8;font-weight:750}
body.hl-v84.hl-section-index .hl-section-index-stat__value{font-family:var(--hl-font-heading);font-size:1.2rem;line-height:1.25;color:#fff;font-weight:800;margin-top:.15rem}
body.hl-v84.hl-section-index .hl-section-index-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
body.hl-v84.hl-section-index .hl-section-index-heading__eyebrow{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
body.hl-v84.hl-section-index.hl-section-1 .hl-section-index-heading__eyebrow{color:#fbbf24}
body.hl-v84.hl-section-index.hl-section-2 .hl-section-index-heading__eyebrow{color:#c4b5fd}
body.hl-v84.hl-section-index.hl-section-3 .hl-section-index-heading__eyebrow{color:#7dd3fc}
body.hl-v84.hl-section-index .hl-section-index-heading h2{font-family:var(--hl-font-heading);font-size:clamp(1.8rem,3vw,2.35rem);color:#fff;margin:.25rem 0 0}
body.hl-v84.hl-section-index .hl-section-index-heading__meta{font-size:.78rem;color:#64748b;white-space:nowrap}
body.hl-v84.hl-section-index .hl-region-filter{background:rgba(15,23,42,.72);border:1px solid #1e293b;border-radius:18px;padding:.7rem .85rem;display:flex;align-items:center;gap:.55rem;overflow-x:auto}
body.hl-v84.hl-section-index .hl-region-filter__label{display:inline-flex;align-items:center;gap:.4rem;color:#94a3b8;font-size:.82rem;font-weight:750;white-space:nowrap}
body.hl-v84.hl-section-index .hl-region-filter button{border:0;border-radius:999px;padding:.58rem .82rem;background:#1e293b;color:#cbd5e1;font-size:.78rem;font-weight:800;white-space:nowrap;cursor:pointer}
body.hl-v84.hl-section-index .hl-region-filter button[aria-pressed="true"]{background:#4338ca;color:#fff}
body.hl-v84.hl-section-index.hl-section-3 .hl-region-filter button[aria-pressed="true"]{background:#0369a1}
/* Stage 4.0C — Section Outro Banner & Copy Unification */
body.hl-v84.hl-section-index .hl-section-index-outro{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(440px,.94fr);align-items:center;gap:2rem;background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.92));border:1px solid rgba(148,163,184,.22);border-radius:24px;padding:2rem 2.2rem}
body.hl-v84.hl-section-index .hl-section-index-outro--section2,body.hl-v84.hl-section-index .hl-section-index-outro--section3{grid-template-columns:minmax(0,1.06fr) minmax(440px,.94fr)}
body.hl-v84.hl-section-index .hl-section-index-outro__copy{min-width:0}
body.hl-v84.hl-section-index .hl-section-index-outro__kicker{display:block;font-size:.8rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#fbbf24}
body.hl-v84.hl-section-index .hl-section-index-outro h3{font-family:var(--hl-font-heading);font-size:clamp(1.45rem,2.4vw,2.15rem);line-height:1.22;color:#fff;margin:.4rem 0 .75rem}
body.hl-v84.hl-section-index .hl-section-index-outro p{color:#94a3b8;line-height:1.7;margin:0;max-width:700px}
body.hl-v84.hl-section-index .hl-section-index-outro__media{width:100%;min-width:0;max-width:100%;display:block;justify-self:end;overflow:hidden;border-radius:14px}
body.hl-v84.hl-section-index .hl-section-index-outro__media img{width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:14px;border:1px solid rgba(148,163,184,.22);display:block;box-shadow:0 12px 28px rgba(2,6,23,.28)}
body.hl-v84.hl-section-index .topic-card a.bg-amber-700{background:#b45309!important}
body.hl-v84.hl-section-index .topic-card a.bg-red-700{background:#b91c1c!important}
body.hl-v84.hl-section-index .topic-card a.bg-indigo-700{background:#4338ca!important}
body.hl-v84.hl-section-index .topic-card a.bg-lime-700{background:#4d7c0f!important}
body.hl-v84.hl-section-index .topic-card a.bg-sky-700{background:#0369a1!important}
@media(max-width:1100px){body.hl-v84.hl-section-index .hl-section-index-outro{grid-template-columns:1fr;gap:1.35rem}body.hl-v84.hl-section-index .hl-section-index-outro__media{justify-self:stretch}body.hl-v84.hl-section-index .hl-section-index-outro__media img{height:auto;aspect-ratio:auto;object-fit:contain}}
@media(max-width:900px){body.hl-v84.hl-section-index .hl-section-index-stats{grid-template-columns:1fr 1fr}body.hl-v84.hl-section-index .hl-section-index-stat:last-child{grid-column:1/-1}}
@media(max-width:700px){body.hl-v84.hl-section-index .hl-section-index-stats{grid-template-columns:1fr}body.hl-v84.hl-section-index .hl-section-index-stat:last-child{grid-column:auto}body.hl-v84.hl-section-index .hl-section-index-heading{align-items:flex-start;flex-direction:column;gap:.35rem}body.hl-v84.hl-section-index .hl-section-index-heading__meta{white-space:normal}body.hl-v84.hl-section-index .hl-section-index-outro{padding:1.35rem}body.hl-v84.hl-section-index .hl-section-index-outro h3{font-size:clamp(1.35rem,7vw,1.8rem)}body.hl-v84.hl-section-index .hl-section-index-outro__media img{height:auto;aspect-ratio:auto;object-fit:contain}}
@media(max-width:440px){body.hl-v84.hl-section-index .hl-section-index-outro{padding:1.15rem;border-radius:20px}}
body.hl-v84.hl-section-index.hl-section-3 #topicsGrid + .hl-section-index-outro{margin-top:2.5rem}

/* =========================================================
   Stage 4.0C — Card Identity & Hover Unification Pass
   Lesson Identity rule:
   accent = lesson identity; icon = lesson meaning; region = filter metadata.
   The same accent now drives badge, icon tile, title response, glow and CTA.
   ========================================================= */
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]{
  --hl-ci-bg:#64748b;
  --hl-ci-text:#cbd5e1;
  --hl-ci-cta:#475569;
  --hl-ci-cta-hover:#334155;
  --hl-ci-glow:rgba(100,116,139,.08);
  --hl-ci-glow-hover:rgba(100,116,139,.18);
  --hl-ci-border:rgba(148,163,184,.28);
  --hl-ci-border-hover:rgba(148,163,184,.56);
  --hl-ci-shadow:rgba(15,23,42,.48);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-amber{--hl-ci-bg:#f59e0b;--hl-ci-text:#fbbf24;--hl-ci-cta:#b45309;--hl-ci-cta-hover:#92400e;--hl-ci-glow:rgba(245,158,11,.08);--hl-ci-glow-hover:rgba(245,158,11,.18);--hl-ci-border:rgba(245,158,11,.28);--hl-ci-border-hover:rgba(245,158,11,.56);--hl-ci-shadow:rgba(180,83,9,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-orange{--hl-ci-bg:#f97316;--hl-ci-text:#fb923c;--hl-ci-cta:#c2410c;--hl-ci-cta-hover:#9a3412;--hl-ci-glow:rgba(249,115,22,.08);--hl-ci-glow-hover:rgba(249,115,22,.18);--hl-ci-border:rgba(249,115,22,.28);--hl-ci-border-hover:rgba(249,115,22,.56);--hl-ci-shadow:rgba(194,65,12,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-purple{--hl-ci-bg:#a855f7;--hl-ci-text:#c084fc;--hl-ci-cta:#7e22ce;--hl-ci-cta-hover:#6b21a8;--hl-ci-glow:rgba(168,85,247,.08);--hl-ci-glow-hover:rgba(168,85,247,.18);--hl-ci-border:rgba(168,85,247,.28);--hl-ci-border-hover:rgba(168,85,247,.56);--hl-ci-shadow:rgba(126,34,206,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-rose{--hl-ci-bg:#f43f5e;--hl-ci-text:#fb7185;--hl-ci-cta:#be123c;--hl-ci-cta-hover:#9f1239;--hl-ci-glow:rgba(244,63,94,.08);--hl-ci-glow-hover:rgba(244,63,94,.18);--hl-ci-border:rgba(244,63,94,.28);--hl-ci-border-hover:rgba(244,63,94,.56);--hl-ci-shadow:rgba(190,18,60,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-emerald{--hl-ci-bg:#10b981;--hl-ci-text:#34d399;--hl-ci-cta:#047857;--hl-ci-cta-hover:#065f46;--hl-ci-glow:rgba(16,185,129,.08);--hl-ci-glow-hover:rgba(16,185,129,.18);--hl-ci-border:rgba(16,185,129,.28);--hl-ci-border-hover:rgba(16,185,129,.56);--hl-ci-shadow:rgba(4,120,87,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-cyan{--hl-ci-bg:#06b6d4;--hl-ci-text:#22d3ee;--hl-ci-cta:#0e7490;--hl-ci-cta-hover:#155e75;--hl-ci-glow:rgba(6,182,212,.08);--hl-ci-glow-hover:rgba(6,182,212,.18);--hl-ci-border:rgba(6,182,212,.28);--hl-ci-border-hover:rgba(6,182,212,.56);--hl-ci-shadow:rgba(14,116,144,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-teal{--hl-ci-bg:#14b8a6;--hl-ci-text:#2dd4bf;--hl-ci-cta:#0f766e;--hl-ci-cta-hover:#115e59;--hl-ci-glow:rgba(20,184,166,.08);--hl-ci-glow-hover:rgba(20,184,166,.18);--hl-ci-border:rgba(20,184,166,.28);--hl-ci-border-hover:rgba(20,184,166,.56);--hl-ci-shadow:rgba(15,118,110,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-indigo{--hl-ci-bg:#6366f1;--hl-ci-text:#818cf8;--hl-ci-cta:#4338ca;--hl-ci-cta-hover:#3730a3;--hl-ci-glow:rgba(99,102,241,.08);--hl-ci-glow-hover:rgba(99,102,241,.18);--hl-ci-border:rgba(99,102,241,.28);--hl-ci-border-hover:rgba(99,102,241,.56);--hl-ci-shadow:rgba(67,56,202,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-yellow{--hl-ci-bg:#eab308;--hl-ci-text:#facc15;--hl-ci-cta:#a16207;--hl-ci-cta-hover:#854d0e;--hl-ci-glow:rgba(234,179,8,.08);--hl-ci-glow-hover:rgba(234,179,8,.18);--hl-ci-border:rgba(234,179,8,.28);--hl-ci-border-hover:rgba(234,179,8,.56);--hl-ci-shadow:rgba(161,98,7,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-blue{--hl-ci-bg:#3b82f6;--hl-ci-text:#60a5fa;--hl-ci-cta:#1d4ed8;--hl-ci-cta-hover:#1e40af;--hl-ci-glow:rgba(59,130,246,.08);--hl-ci-glow-hover:rgba(59,130,246,.18);--hl-ci-border:rgba(59,130,246,.28);--hl-ci-border-hover:rgba(59,130,246,.56);--hl-ci-shadow:rgba(29,78,216,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-red{--hl-ci-bg:#ef4444;--hl-ci-text:#f87171;--hl-ci-cta:#b91c1c;--hl-ci-cta-hover:#991b1b;--hl-ci-glow:rgba(239,68,68,.08);--hl-ci-glow-hover:rgba(239,68,68,.18);--hl-ci-border:rgba(239,68,68,.28);--hl-ci-border-hover:rgba(239,68,68,.56);--hl-ci-shadow:rgba(185,28,28,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-sky{--hl-ci-bg:#0ea5e9;--hl-ci-text:#38bdf8;--hl-ci-cta:#0369a1;--hl-ci-cta-hover:#075985;--hl-ci-glow:rgba(14,165,233,.08);--hl-ci-glow-hover:rgba(14,165,233,.18);--hl-ci-border:rgba(14,165,233,.28);--hl-ci-border-hover:rgba(14,165,233,.56);--hl-ci-shadow:rgba(3,105,161,.30)}
body.hl-v84.hl-section-index .topic-card.hl-card-accent-lime{--hl-ci-bg:#84cc16;--hl-ci-text:#a3e635;--hl-ci-cta:#4d7c0f;--hl-ci-cta-hover:#3f6212;--hl-ci-glow:rgba(132,204,22,.08);--hl-ci-glow-hover:rgba(132,204,22,.18);--hl-ci-border:rgba(132,204,22,.28);--hl-ci-border-hover:rgba(132,204,22,.56);--hl-ci-shadow:rgba(77,124,15,.30)}

body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] > .absolute.top-0.right-0{
  background:var(--hl-ci-glow)!important;
  transition:background-color .2s ease,opacity .2s ease!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] > div:not(.absolute) > .flex.items-center.justify-between.mb-4 > span:first-child{
  background:color-mix(in srgb,var(--hl-ci-bg) 20%,#0f172a 80%)!important;
  color:var(--hl-ci-text)!important;
  border-color:var(--hl-ci-border)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] > div:not(.absolute) > .w-14.h-14{
  background:var(--hl-ci-bg)!important;
  color:#020617!important;
  box-shadow:0 10px 24px -8px var(--hl-ci-shadow)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] h3{
  transition:color .2s ease!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] > a{
  background:var(--hl-ci-cta)!important;
  color:#fff!important;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]:is(:hover,:focus-within){
  transform:translateY(-2px);
  border-color:var(--hl-ci-border-hover)!important;
  box-shadow:0 16px 34px -22px var(--hl-ci-shadow);
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]:is(:hover,:focus-within) > .absolute.top-0.right-0{
  background:var(--hl-ci-glow-hover)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]:is(:hover,:focus-within) h3{
  color:var(--hl-ci-text)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]:is(:hover,:focus-within) > div:not(.absolute) > .flex.items-center.justify-between.mb-4 > span:first-child{
  border-color:var(--hl-ci-border-hover)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]:is(:hover,:focus-within) > div:not(.absolute) > .w-14.h-14{
  box-shadow:0 12px 28px -8px var(--hl-ci-shadow)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] > a:is(:hover,:focus-visible,:active){
  background:var(--hl-ci-cta-hover)!important;
  box-shadow:0 10px 24px -10px var(--hl-ci-shadow)!important;
}
body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"] > a:focus-visible{
  outline:3px solid #f8fafc!important;
  outline-offset:3px!important;
}
@media (prefers-reduced-motion:reduce){
  body.hl-v84.hl-section-index .topic-card[class*="hl-card-accent-"]:is(:hover,:focus-within){transform:none!important}
}

/* =========================================================
   Stage 4.0C — Lesson Navigation Shell Unification Pass
   Canonical shell for §§1–60. Lesson pages only; section indexes keep
   their existing navigation treatment.
   ========================================================= */
body.hl-v84:not(.hl-section-index) .lesson-course-nav{
  position:sticky!important;
  top:0!important;
  z-index:9999!important;
  width:100%!important;
  background:rgba(15,23,42,.97)!important;
  border-bottom:1px solid rgba(148,163,184,.20)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  font-family:var(--hl-font-body)!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-inner{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:10px 24px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  overflow:hidden!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-group{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-group--primary{
  justify-self:start!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-group--steps{
  justify-self:end!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav a,
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-disabled{
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:9px 12px!important;
  border-radius:11px!important;
  border:1px solid transparent!important;
  color:#e2e8f0!important;
  text-decoration:none!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-home{
  background:#fff!important;
  border-color:#fff!important;
  color:#0f172a!important;
  box-shadow:0 1px 2px rgba(2,6,23,.18)!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-home:is(:hover,:focus-visible){
  background:#f1f5f9!important;
  border-color:#e2e8f0!important;
  color:#0f172a!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-contents{
  background:rgba(30,41,59,.48)!important;
  border-color:rgba(148,163,184,.22)!important;
  color:#e2e8f0!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-contents:is(:hover,:focus-visible),
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-step:is(:hover,:focus-visible){
  background:rgba(51,65,85,.72)!important;
  border-color:rgba(148,163,184,.36)!important;
  color:#fff!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-step{
  background:transparent!important;
  border-color:transparent!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-current{
  min-width:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fbbf24!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-current-label{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.hl-v84.hl-s3-lesson60 .lesson-course-nav .lcn-current{
  color:#bef264!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-disabled{
  opacity:.38!important;
  background:transparent!important;
  border-color:transparent!important;
  cursor:default!important;
  pointer-events:none!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-course-end{
  padding-inline:10px!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav a:focus-visible{
  outline:3px solid #f8fafc!important;
  outline-offset:2px!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .hl-icon{
  width:1.05rem!important;
  height:1.05rem!important;
  min-width:1.05rem!important;
  flex:0 0 1.05rem!important;
}
body.hl-v84:not(.hl-section-index) .lesson-course-nav .hl-lesson-identity-icon{
  width:.95rem!important;
  height:.95rem!important;
  min-width:.95rem!important;
  flex-basis:.95rem!important;
  margin-right:.3rem!important;
}

/* Tablet and desktop at ~200% zoom: keep the useful controls, remove the
   decorative center identity before it can force horizontal overflow. */
@media (max-width:900px){
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    padding:9px 14px!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-current{
    display:none!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-group--steps{
    grid-column:2!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav a,
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-disabled{
    min-height:42px!important;
    padding:8px 10px!important;
    font-size:13px!important;
  }
}

/* Phone: icon-only navigation prevents reflow while accessible names remain
   on every actionable control through aria-label. */
@media (max-width:560px){
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-inner{
    padding:7px 9px!important;
    gap:8px!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-group{
    gap:5px!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav a,
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-disabled{
    min-height:40px!important;
    min-width:40px!important;
    padding:8px!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-label{
    display:none!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .lcn-course-end{
    display:none!important;
  }
  body.hl-v84:not(.hl-section-index) .lesson-course-nav .hl-icon{
    width:1.12rem!important;
    height:1.12rem!important;
    min-width:1.12rem!important;
    flex-basis:1.12rem!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.hl-v84:not(.hl-section-index) .lesson-course-nav a{
    transition:none!important;
  }
}

/* Stage 4.0C — §3 Site Card Metadata Reflow Fix
   Keep the culture badge and the map/location label as intact units.
   When they cannot share one row (including ~200% zoom), the location wraps
   as a whole to a second, right-aligned line instead of colliding with badge. */
body.hl-v84.hl-section-1 .site-card .hl-site-card-meta{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  column-gap:.65rem!important;
  row-gap:.45rem!important;
  min-width:0!important;
}
body.hl-v84.hl-section-1 .site-card .hl-site-card-type{
  flex:0 0 auto!important;
  max-width:100%!important;
  white-space:nowrap!important;
}
body.hl-v84.hl-section-1 .site-card .hl-site-card-location{
  display:inline-flex!important;
  align-items:center!important;
  gap:.28rem!important;
  flex:0 0 auto!important;
  max-width:100%!important;
  margin-left:auto!important;
  white-space:nowrap!important;
  line-height:1.25!important;
  text-align:right!important;
}
body.hl-v84.hl-section-1 .site-card .hl-site-card-location .hl-icon{
  flex:0 0 auto!important;
  margin-right:0!important;
}

/* =========================================================
   Stage 4.0C — Lesson Hero System Unification
   One hero geometry for §§1–60; theme modifiers only change palette.
   Migration coverage: §§1–60 complete.
   ========================================================= */
body.hl-v84:not(.hl-section-index) .hl-lesson-hero{
  --hl-lh-accent:#d97706;
  --hl-lh-accent-text:#fbbf24;
  --hl-lh-bg-start:#21170d;
  --hl-lh-bg-end:#0f172a;
  --hl-lh-glow:rgba(217,119,6,.20);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  color:#fff;
  background:
    radial-gradient(circle at 88% 18%,var(--hl-lh-glow),transparent 31rem),
    linear-gradient(115deg,var(--hl-lh-bg-start),var(--hl-lh-bg-end) 68%);
  border-bottom:4px solid var(--hl-lh-accent);
  box-shadow:0 18px 42px rgba(2,6,23,.22);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-5rem;
  bottom:-8rem;
  width:22rem;
  height:22rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--hl-lh-accent) 24%,transparent);
  opacity:.42;
  pointer-events:none;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__inner{
  width:min(calc(100% - 2rem),72rem);
  margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) 0 clamp(1.8rem,3.5vw,2.6rem);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:1.75rem;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__copy{min-width:0}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  max-width:100%;
  color:var(--hl-lh-accent-text);
  font-size:.75rem;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__kicker .hl-icon{
  width:1.05rem;
  height:1.05rem;
  min-width:1.05rem;
  color:var(--hl-lh-accent-text);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__kicker > span:last-child{
  min-width:0;
  overflow-wrap:anywhere;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__title{
  margin:.65rem 0 .75rem;
  max-width:64rem;
  color:#fff;
  font-family:var(--hl-font-heading);
  font-size:clamp(2rem,4.15vw,3.35rem);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:700;
  overflow-wrap:break-word;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__accent{color:var(--hl-lh-accent-text)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__lead{
  margin:0;
  max-width:58rem;
  color:#dbe7f5;
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.6;
  font-weight:550;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__number{
  display:grid;
  place-items:center;
  width:5.4rem;
  height:5.4rem;
  border-radius:1.35rem;
  background:color-mix(in srgb,var(--hl-lh-accent) 18%,#0f172a 82%);
  border:1px solid color-mix(in srgb,var(--hl-lh-accent) 42%,transparent);
  color:var(--hl-lh-accent-text);
  font-family:var(--hl-font-heading);
  font-size:1.25rem;
  font-weight:800;
  box-shadow:0 12px 28px rgba(2,6,23,.18);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.7rem;
  margin-top:1.8rem;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stat{
  min-width:0;
  padding:.82rem .9rem .78rem;
  border:1px solid rgba(203,213,225,.17);
  border-radius:.95rem;
  background:rgba(15,23,42,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(5px);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stat strong{
  display:block;
  color:#fff;
  font-size:clamp(1rem,1.45vw,1.28rem);
  line-height:1.22;
  font-weight:850;
  overflow-wrap:break-word;
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stat span{
  display:block;
  margin-top:.27rem;
  color:#9fb5d2;
  font-size:.75rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}

/* Pilot theme families */
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--paleolithic{
  --hl-lh-accent:#d97706;
  --hl-lh-accent-text:#fbbf24;
  --hl-lh-bg-start:#21170d;
  --hl-lh-bg-end:#101827;
  --hl-lh-glow:rgba(217,119,6,.23);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--bronze{
  --hl-lh-accent:#b45309;
  --hl-lh-accent-text:#fbbf24;
  --hl-lh-bg-start:#26160b;
  --hl-lh-bg-end:#18162d;
  --hl-lh-glow:rgba(99,102,241,.14);
}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--greece{
  --hl-lh-accent:#0ea5e9;
  --hl-lh-accent-text:#fbbf24;
  --hl-lh-bg-start:#082f49;
  --hl-lh-bg-end:#0f172a;
  --hl-lh-glow:rgba(14,165,233,.22);
}

/* Lesson Hero thematic families — §§1–35 */
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--origins{--hl-lh-accent:#ea580c;--hl-lh-accent-text:#fdba74;--hl-lh-bg-start:#2a160b;--hl-lh-bg-end:#111827;--hl-lh-glow:rgba(234,88,12,.20)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--early-humans{--hl-lh-accent:#9333ea;--hl-lh-accent-text:#d8b4fe;--hl-lh-bg-start:#21132d;--hl-lh-bg-end:#0f172a;--hl-lh-glow:rgba(147,51,234,.20)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--mesolithic{--hl-lh-accent:#059669;--hl-lh-accent-text:#6ee7b7;--hl-lh-bg-start:#0d261d;--hl-lh-bg-end:#111827;--hl-lh-glow:rgba(5,150,105,.20)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--neolithic{--hl-lh-accent:#65a30d;--hl-lh-accent-text:#bef264;--hl-lh-bg-start:#19230d;--hl-lh-bg-end:#14201b;--hl-lh-glow:rgba(101,163,13,.19)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--society{--hl-lh-accent:#0f766e;--hl-lh-accent-text:#5eead4;--hl-lh-bg-start:#102522;--hl-lh-bg-end:#111827;--hl-lh-glow:rgba(15,118,110,.21)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--spiritual{--hl-lh-accent:#be123c;--hl-lh-accent-text:#fda4af;--hl-lh-bg-start:#2a111a;--hl-lh-bg-end:#1b1730;--hl-lh-glow:rgba(190,18,60,.18)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--eneolithic{--hl-lh-accent:#c2410c;--hl-lh-accent-text:#fdba74;--hl-lh-bg-start:#2b180e;--hl-lh-bg-end:#18202b;--hl-lh-glow:rgba(194,65,12,.22)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--civilization{--hl-lh-accent:#4f46e5;--hl-lh-accent-text:#a5b4fc;--hl-lh-bg-start:#171735;--hl-lh-bg-end:#101827;--hl-lh-glow:rgba(79,70,229,.20)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--mesopotamia{--hl-lh-accent:#b45309;--hl-lh-accent-text:#fbbf24;--hl-lh-bg-start:#26180d;--hl-lh-bg-end:#171832;--hl-lh-glow:rgba(99,102,241,.13)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--steppe-bronze{--hl-lh-accent:#b45309;--hl-lh-accent-text:#f59e0b;--hl-lh-bg-start:#24170e;--hl-lh-bg-end:#17202d;--hl-lh-glow:rgba(180,83,9,.20)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--egypt{--hl-lh-accent:#ca8a04;--hl-lh-accent-text:#fde047;--hl-lh-bg-start:#28200b;--hl-lh-bg-end:#082f49;--hl-lh-glow:rgba(14,116,144,.17)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--phoenicia{--hl-lh-accent:#7e22ce;--hl-lh-accent-text:#d8b4fe;--hl-lh-bg-start:#271235;--hl-lh-bg-end:#083344;--hl-lh-glow:rgba(126,34,206,.17)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--israel{--hl-lh-accent:#a16207;--hl-lh-accent-text:#fde68a;--hl-lh-bg-start:#29200f;--hl-lh-bg-end:#172033;--hl-lh-glow:rgba(161,98,7,.18)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--hittite{--hl-lh-accent:#b91c1c;--hl-lh-accent-text:#fca5a5;--hl-lh-bg-start:#2b1111;--hl-lh-bg-end:#21180f;--hl-lh-glow:rgba(185,28,28,.18)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--persia{--hl-lh-accent:#be123c;--hl-lh-accent-text:#fda4af;--hl-lh-bg-start:#2b111b;--hl-lh-bg-end:#2a200d;--hl-lh-glow:rgba(190,18,60,.18)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--steppe{--hl-lh-accent:#d97706;--hl-lh-accent-text:#fbbf24;--hl-lh-bg-start:#21170d;--hl-lh-bg-end:#10243a;--hl-lh-glow:rgba(14,116,144,.15)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--india{--hl-lh-accent:#ea580c;--hl-lh-accent-text:#fdba74;--hl-lh-bg-start:#2a160c;--hl-lh-bg-end:#21183a;--hl-lh-glow:rgba(79,70,229,.15)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--china{--hl-lh-accent:#b91c1c;--hl-lh-accent-text:#fbbf24;--hl-lh-bg-start:#2b0f12;--hl-lh-bg-end:#17120d;--hl-lh-glow:rgba(185,28,28,.20)}


@media(max-width:900px){
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__number{display:none}
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__top{grid-template-columns:1fr}
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__inner{
    width:min(calc(100% - 1.5rem),72rem);
    padding:1.65rem 0 1.45rem;
  }
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__title{
    font-size:clamp(1.72rem,8.7vw,2.15rem);
    line-height:1.14;
  }
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__lead{font-size:.98rem;line-height:1.55}
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stats{grid-template-columns:1fr;gap:.55rem;margin-top:1.25rem}
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero__stat{padding:.72rem .8rem}
}
@media(prefers-reduced-motion:reduce){
  body.hl-v84:not(.hl-section-index) .hl-lesson-hero *{scroll-behavior:auto!important}
}


/* Stage 4.0C — Section III Hero Theme Families */
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--rome{--hl-lh-accent:#b45309;--hl-lh-accent-text:#fbbf24;--hl-lh-bg-start:#2b1114;--hl-lh-bg-end:#111827;--hl-lh-glow:rgba(127,29,29,.23)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--frontier{--hl-lh-accent:#a16207;--hl-lh-accent-text:#fde68a;--hl-lh-bg-start:#27200f;--hl-lh-bg-end:#1f2937;--hl-lh-glow:rgba(161,98,7,.18)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--late-rome{--hl-lh-accent:#7c3aed;--hl-lh-accent-text:#c4b5fd;--hl-lh-bg-start:#24152f;--hl-lh-bg-end:#172033;--hl-lh-glow:rgba(124,58,237,.18)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--migration{--hl-lh-accent:#dc2626;--hl-lh-accent-text:#fca5a5;--hl-lh-bg-start:#2b1114;--hl-lh-bg-end:#17314a;--hl-lh-glow:rgba(220,38,38,.17)}
body.hl-v84:not(.hl-section-index) .hl-lesson-hero--slavs{--hl-lh-accent:#65a30d;--hl-lh-accent-text:#bef264;--hl-lh-bg-start:#18240d;--hl-lh-bg-end:#164e63;--hl-lh-glow:rgba(101,163,13,.20)}

/* =========================================================
   Stage 4.0C — Secondary Navigation Shell Unification §§1–60
   One shell, one track, one responsive alignment rule.
   Desktop: compact rows center when they fit.
   Narrow/200%: the max-content track starts at the left edge and scrolls locally.
   ========================================================= */
body.hl-v84 .hl-secondary-nav-shell{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  background:rgba(15,23,42,.97)!important;
  color:#e5e7eb!important;
  border:0!important;
  border-bottom:1px solid rgba(148,163,184,.24)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px)!important;
}
body.hl-v84 .hl-secondary-nav{
  display:block!important;
  width:100%!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:.55rem .75rem!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--hl-nav-scroll-thumb) var(--hl-nav-scroll-track)!important;
  white-space:nowrap!important;
  background:transparent!important;
  border:0!important;
}
body.hl-v84 .hl-secondary-nav__track{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  gap:.5rem!important;
  width:max-content!important;
  min-width:0!important;
  margin-inline:auto!important;
  padding:0!important;
}
body.hl-v84 .hl-secondary-nav__track > :is(a,button){
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42rem!important;
  min-height:2.35rem!important;
  margin:0!important;
  padding:.48rem .78rem!important;
  border:1px solid var(--hl-nav-border)!important;
  border-radius:.62rem!important;
  background:var(--hl-nav-bg)!important;
  color:var(--hl-nav-text)!important;
  box-shadow:none!important;
  font-size:.82rem!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transform:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
body.hl-v84 .hl-secondary-nav__track > :is(a,button):hover{
  background:var(--hl-nav-bg-hover)!important;
  color:#fff!important;
  border-color:var(--hl-nav-active-border)!important;
}
body.hl-v84 .hl-secondary-nav__track > a:is(.is-active,[aria-current="true"]),
body.hl-v84 .hl-secondary-nav__track > button:is(.active,.is-active,[aria-selected="true"]){
  background:var(--hl-nav-active)!important;
  color:var(--hl-nav-active-text)!important;
  border-color:var(--hl-nav-active-border)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.16)!important;
}
body.hl-v84 .hl-secondary-nav__track > :is(a,button):focus-visible{
  outline:2px solid #fff!important;
  outline-offset:2px!important;
}
body.hl-v84 .hl-secondary-nav__track .hl-nav-icon,
body.hl-v84 .hl-secondary-nav__track > :is(a,button) > .hl-icon{
  width:1.05em!important;
  height:1.05em!important;
  flex:0 0 auto!important;
  color:currentColor!important;
}
@media(max-width:900px){
  body.hl-v84 .hl-secondary-nav{
    padding:.46rem .5rem!important;
  }
  body.hl-v84 .hl-secondary-nav__track{
    margin-inline:0!important;
    gap:.38rem!important;
  }
  body.hl-v84 .hl-secondary-nav__track > :is(a,button){
    min-height:2.2rem!important;
    padding:.42rem .66rem!important;
    font-size:.78rem!important;
  }
}
@media(max-width:520px){
  body.hl-v84 .hl-secondary-nav__track > :is(a,button){font-size:.75rem!important}
}
@media(prefers-reduced-motion:reduce){
  html body.hl-v84[class] .hl-secondary-nav{scroll-behavior:auto!important}
}
/* Keep the secondary shell visibly stacked below the canonical course nav. */
body.hl-v84:not(.hl-section-index) .hl-secondary-nav-shell{
  top:64px!important;
  z-index:9000!important;
}
@media(max-width:900px){
  body.hl-v84:not(.hl-section-index) .hl-secondary-nav-shell{top:60px!important}
}
@media(max-width:560px){
  body.hl-v84:not(.hl-section-index) .hl-secondary-nav-shell{top:54px!important}
}


/* Stage 4.0C — Flip Card Accessibility Recovery §§54–60 */
body.hl-v84 button.flip-card:focus-visible{
  outline:3px solid #fbbf24!important;
  outline-offset:3px!important;
  border-radius:1rem;
}


/* Stage 4.0C — §§33–35 Continuous Lesson Structure Unification */
body.hl-v84 main > .hl-continuous-section{
  display:block!important;
  width:100%;
  max-width:100%;
}
body.hl-v84 main > .hl-continuous-section + .hl-continuous-section{
  margin-top:2.5rem;
}
@media(max-width:640px){
  body.hl-v84 main > .hl-continuous-section + .hl-continuous-section{margin-top:2rem}
}


/* Stage 4.0C — Section III Content Metadata Row Normalization §§36–60 */
.hl-section-3 .hl-s3-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem}
.hl-section-3 .hl-s3-meta-row__section{display:inline-flex;align-items:center;gap:.4rem}
.hl-section-3 .hl-s3-meta-row__section .hl-icon{width:1rem;height:1rem;flex:0 0 auto}
.hl-section-3 .hl-s3-meta-row__keywords{font-weight:750;letter-spacing:.01em}
@media (max-width:560px){.hl-section-3 .hl-s3-meta-row{gap:.4rem;margin-bottom:.85rem}.hl-section-3 .hl-s3-meta-row .lesson-badge{white-space:normal;line-height:1.35}.hl-section-3 .hl-s3-meta-row__keywords{max-width:100%}}


/* Stage 4.0C — Section II Targeted Diagram Completion §§19, 20, 33–35 */
body.hl-v84 .hl-learning-diagram{
  --hl-diagram-accent:#f59e0b;
  --hl-diagram-rgb:245,158,11;
  margin:1.5rem 0 1.75rem;
  padding:1.25rem;
  border:1px solid rgba(var(--hl-diagram-rgb),.36);
  border-radius:1.25rem;
  background:
    radial-gradient(circle at 92% 8%,rgba(var(--hl-diagram-rgb),.12),transparent 18rem),
    linear-gradient(145deg,#111827,#172033);
  box-shadow:0 16px 38px rgba(0,0,0,.22);
  color:var(--hl-body);
  overflow:hidden;
}
body.hl-v84 .hl-learning-diagram__head{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.6rem}
body.hl-v84 .hl-learning-diagram__icon{width:2rem;height:2rem;flex:0 0 auto;color:var(--hl-diagram-accent);margin-top:.1rem}
body.hl-v84 .hl-learning-diagram__kicker{font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em;color:var(--hl-diagram-accent);margin-bottom:.2rem}
body.hl-v84 .hl-learning-diagram__title{margin:0!important;color:#fff!important;font-size:clamp(1.05rem,2vw,1.35rem)!important;line-height:1.25!important}
body.hl-v84 .hl-learning-diagram__lead{margin:.5rem 0 1rem!important;color:#cbd5e1!important;max-width:70ch}
body.hl-v84 .hl-learning-diagram__caption{display:block;margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(148,163,184,.22);color:#cbd5e1;font-size:.86rem;line-height:1.55}
body.hl-v84 .hl-learning-diagram__caption b{color:#fff}

/* §19 — spatial route */
body.hl-v84 .hl-diagram-route{display:grid;gap:.65rem}
body.hl-v84 .hl-diagram-route__axis{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-left:8.25rem;color:#94a3b8;font-size:.72rem;font-weight:750;text-align:center}
body.hl-v84 .hl-diagram-route__axis span{padding:.3rem .35rem;border-bottom:1px dashed rgba(148,163,184,.35)}
body.hl-v84 .hl-diagram-route__row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;align-items:center}
body.hl-v84 .hl-diagram-route__name{font-weight:850;color:#fff}
body.hl-v84 .hl-diagram-route__track{display:grid;grid-template-columns:repeat(3,1fr);min-height:3.25rem;padding:.25rem;background:rgba(15,23,42,.62);border:1px solid rgba(148,163,184,.22);border-radius:.8rem}
body.hl-v84 .hl-diagram-route__bar{grid-column:var(--bar-start)/var(--bar-end);display:flex;flex-direction:column;justify-content:center;min-width:0;padding:.55rem .7rem;border-radius:.62rem;background:linear-gradient(90deg,rgba(var(--hl-diagram-rgb),.30),rgba(var(--hl-diagram-rgb),.12));border:1px solid rgba(var(--hl-diagram-rgb),.55);color:#fff}
body.hl-v84 .hl-diagram-route__bar--2{background:linear-gradient(90deg,rgba(56,189,248,.25),rgba(56,189,248,.10));border-color:rgba(56,189,248,.5)}
body.hl-v84 .hl-diagram-route__bar--3{background:linear-gradient(90deg,rgba(52,211,153,.25),rgba(52,211,153,.10));border-color:rgba(52,211,153,.5)}
body.hl-v84 .hl-diagram-route__bar b{font-size:.84rem;line-height:1.3}
body.hl-v84 .hl-diagram-route__bar small{margin-top:.15rem;color:#cbd5e1;font-size:.72rem;line-height:1.35}
body.hl-v84 .hl-diagram-route__marker{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:8.25rem;padding:.65rem .8rem;border-radius:.75rem;background:rgba(245,158,11,.08);border:1px dashed rgba(245,158,11,.45);font-size:.78rem;color:#cbd5e1}
body.hl-v84 .hl-diagram-route__marker .hl-icon{width:1.05rem;height:1.05rem;color:#fbbf24}
body.hl-v84 .hl-diagram-route__marker b{color:#fff}

/* §20 — Nile cycle */
body.hl-v84 .hl-diagram-cycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;counter-reset:cycle}
body.hl-v84 .hl-diagram-cycle__step{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num icon" "title title" "text text";align-content:start;gap:.35rem .55rem;min-width:0;padding:.9rem;border:1px solid rgba(var(--hl-diagram-rgb),.30);border-radius:1rem;background:rgba(15,23,42,.68)}
body.hl-v84 .hl-diagram-cycle__step:not(:last-child)::after{content:"→";position:absolute;right:-.62rem;top:50%;z-index:2;transform:translateY(-50%);color:var(--hl-diagram-accent);font-weight:900;font-size:1.05rem}
body.hl-v84 .hl-diagram-cycle__num{grid-area:num;display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:999px;background:rgba(var(--hl-diagram-rgb),.18);border:1px solid rgba(var(--hl-diagram-rgb),.5);color:#fff;font-weight:900}
body.hl-v84 .hl-diagram-cycle__step>.hl-icon{grid-area:icon;width:1.6rem;height:1.6rem;justify-self:end;color:var(--hl-diagram-accent)}
body.hl-v84 .hl-diagram-cycle__step>b{grid-area:title;color:#fff;font-size:.92rem}
body.hl-v84 .hl-diagram-cycle__step>small{grid-area:text;color:#cbd5e1;line-height:1.45;font-size:.78rem}

/* §33 — spatial China scheme */
body.hl-v84 .hl-diagram-geo{display:grid;grid-template-columns:.8fr 1.35fr .8fr;grid-template-rows:auto auto;gap:.6rem;align-items:stretch}
body.hl-v84 .hl-diagram-geo__zone,body.hl-v84 .hl-diagram-geo__core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:7rem;padding:.85rem;border-radius:1rem;text-align:center;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.65)}
body.hl-v84 .hl-diagram-geo__zone .hl-icon,body.hl-v84 .hl-diagram-geo__core .hl-icon{width:1.55rem;height:1.55rem;color:var(--hl-diagram-accent)}
body.hl-v84 .hl-diagram-geo__zone b,body.hl-v84 .hl-diagram-geo__core b{color:#fff;font-size:.88rem}
body.hl-v84 .hl-diagram-geo__zone small,body.hl-v84 .hl-diagram-geo__core small{color:#cbd5e1;font-size:.75rem;line-height:1.4}
body.hl-v84 .hl-diagram-geo__zone--west{grid-column:1;grid-row:1}
body.hl-v84 .hl-diagram-geo__zone--north{grid-column:2;grid-row:1;border-color:rgba(250,204,21,.45);background:linear-gradient(145deg,rgba(113,63,18,.42),rgba(15,23,42,.7))}
body.hl-v84 .hl-diagram-geo__zone--east{grid-column:3;grid-row:1 / span 2}
body.hl-v84 .hl-diagram-geo__zone--desert{grid-column:1;grid-row:2}
body.hl-v84 .hl-diagram-geo__zone--south{grid-column:2;grid-row:2;border-color:rgba(52,211,153,.42);background:linear-gradient(145deg,rgba(6,78,59,.34),rgba(15,23,42,.7))}
body.hl-v84 .hl-diagram-geo__core{grid-column:1 / -1;grid-row:3;min-height:auto;width:auto;padding:.7rem .9rem;border-color:rgba(255,255,255,.30);background:#111827;box-shadow:0 8px 24px rgba(0,0,0,.22)}

/* §34 — timeline */
body.hl-v84 .hl-diagram-timeline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin:0;padding:0;list-style:none}
body.hl-v84 .hl-diagram-timeline::before{content:"";position:absolute;left:7%;right:7%;top:1.25rem;height:2px;background:linear-gradient(90deg,rgba(var(--hl-diagram-rgb),.35),var(--hl-diagram-accent),rgba(var(--hl-diagram-rgb),.35))}
body.hl-v84 .hl-diagram-timeline li{position:relative;z-index:1;display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:2.8rem .85rem .9rem;border:1px solid rgba(148,163,184,.22);border-radius:1rem;background:rgba(15,23,42,.72)}
body.hl-v84 .hl-diagram-timeline li::before{content:"";position:absolute;top:.85rem;left:50%;width:.8rem;height:.8rem;transform:translateX(-50%);border-radius:999px;background:var(--hl-diagram-accent);box-shadow:0 0 0 5px rgba(var(--hl-diagram-rgb),.15)}
body.hl-v84 .hl-diagram-timeline__date{color:var(--hl-diagram-accent);font-size:.78rem;font-weight:900}
body.hl-v84 .hl-diagram-timeline li b{color:#fff;font-size:.9rem}
body.hl-v84 .hl-diagram-timeline li small{color:#cbd5e1;font-size:.75rem;line-height:1.45}

/* §35 — culture synthesis matrix */
body.hl-v84 .hl-diagram-matrix{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem}
body.hl-v84 .hl-diagram-matrix__item{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-width:0;padding:.9rem;border:1px solid rgba(var(--hl-diagram-rgb),.30);border-radius:1rem;background:rgba(15,23,42,.68)}
body.hl-v84 .hl-diagram-matrix__item .hl-icon{width:1.5rem;height:1.5rem;color:var(--hl-diagram-accent)}
body.hl-v84 .hl-diagram-matrix__item b{color:#fff;font-size:.88rem}
body.hl-v84 .hl-diagram-matrix__item small{color:#cbd5e1;font-size:.74rem;line-height:1.4}
body.hl-v84 .hl-diagram-matrix__item em{margin-top:auto;padding-top:.35rem;color:#fde68a;font-size:.72rem;line-height:1.35;font-style:normal}

@media(max-width:900px){
  body.hl-v84 .hl-diagram-cycle{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84 .hl-diagram-cycle__step::after{display:none}
  body.hl-v84 .hl-diagram-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84 .hl-diagram-timeline::before{display:none}
  body.hl-v84 .hl-diagram-timeline li{padding:1rem}
  body.hl-v84 .hl-diagram-timeline li::before{display:none}
  body.hl-v84 .hl-diagram-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84 .hl-diagram-matrix__item:last-child{grid-column:1 / -1}
}
@media(max-width:640px){
  body.hl-v84 .hl-learning-diagram{padding:1rem;border-radius:1rem}
  body.hl-v84 .hl-learning-diagram__head{gap:.65rem}
  body.hl-v84 .hl-learning-diagram__icon{width:1.65rem;height:1.65rem}
  body.hl-v84 .hl-diagram-route__axis{display:none}
  body.hl-v84 .hl-diagram-route__row{grid-template-columns:1fr;gap:.3rem}
  body.hl-v84 .hl-diagram-route__track{grid-template-columns:1fr}
  body.hl-v84 .hl-diagram-route__bar,body.hl-v84 .hl-diagram-route__bar--2,body.hl-v84 .hl-diagram-route__bar--3{grid-column:1!important}
  body.hl-v84 .hl-diagram-route__marker{margin-left:0}
  body.hl-v84 .hl-diagram-geo{grid-template-columns:1fr;grid-template-rows:auto}
  body.hl-v84 .hl-diagram-geo__zone,body.hl-v84 .hl-diagram-geo__core{grid-column:1!important;grid-row:auto!important;min-height:auto;width:auto;justify-self:stretch}
  body.hl-v84 .hl-diagram-geo__core{order:-1}
  body.hl-v84 .hl-diagram-cycle,body.hl-v84 .hl-diagram-timeline,body.hl-v84 .hl-diagram-matrix{grid-template-columns:1fr}
  body.hl-v84 .hl-diagram-matrix__item:last-child{grid-column:auto}
}

/* Stage 4.0C — Section III Learning Diagram Expansion */
body.hl-v84 .hl-s3-learning-expansion{margin-top:1.35rem;margin-bottom:1.6rem}

body.hl-v84 .hl-diagram-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
body.hl-v84 .hl-diagram-flow__step{position:relative;display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:.95rem;border:1px solid rgba(var(--hl-diagram-rgb),.30);border-radius:1rem;background:rgba(15,23,42,.68)}
body.hl-v84 .hl-diagram-flow__step:not(:last-child)::after{content:"→";position:absolute;right:-.62rem;top:50%;z-index:2;transform:translateY(-50%);color:var(--hl-diagram-accent);font-weight:900;font-size:1.05rem}
body.hl-v84 .hl-diagram-flow__step>.hl-icon{width:1.45rem;height:1.45rem;color:var(--hl-diagram-accent)}
body.hl-v84 .hl-diagram-flow__step>b{color:#fff;font-size:.9rem;line-height:1.3}
body.hl-v84 .hl-diagram-flow__step>small{color:#cbd5e1;font-size:.76rem;line-height:1.45}

body.hl-v84 .hl-diagram-polis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:.65rem;align-items:stretch}
body.hl-v84 .hl-diagram-polis__node,body.hl-v84 .hl-diagram-polis__core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:6.2rem;padding:.8rem;border-radius:1rem;text-align:center;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.66)}
body.hl-v84 .hl-diagram-polis__node .hl-icon,body.hl-v84 .hl-diagram-polis__core .hl-icon{width:1.5rem;height:1.5rem;color:var(--hl-diagram-accent)}
body.hl-v84 .hl-diagram-polis__node b,body.hl-v84 .hl-diagram-polis__core b{color:#fff;font-size:.9rem}
body.hl-v84 .hl-diagram-polis__node small,body.hl-v84 .hl-diagram-polis__core small{color:#cbd5e1;font-size:.75rem;line-height:1.4}
body.hl-v84 .hl-diagram-polis__core{grid-column:2;grid-row:2;border-color:rgba(var(--hl-diagram-rgb),.62);background:linear-gradient(145deg,rgba(var(--hl-diagram-rgb),.23),rgba(15,23,42,.78));box-shadow:0 10px 26px rgba(0,0,0,.18)}
body.hl-v84 .hl-diagram-polis__node--top{grid-column:2;grid-row:1}
body.hl-v84 .hl-diagram-polis__node--left{grid-column:1;grid-row:2}
body.hl-v84 .hl-diagram-polis__node--right{grid-column:3;grid-row:2}
body.hl-v84 .hl-diagram-polis__node--bottom{grid-column:1 / -1;grid-row:3;min-height:auto}

body.hl-v84 .hl-diagram-route-map{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;padding-top:.2rem}
body.hl-v84 .hl-diagram-route-map--5{grid-template-columns:repeat(5,minmax(0,1fr))}
body.hl-v84 .hl-diagram-route-map::before{content:"";position:absolute;left:7%;right:7%;top:1rem;height:2px;background:linear-gradient(90deg,rgba(var(--hl-diagram-rgb),.25),var(--hl-diagram-accent),rgba(var(--hl-diagram-rgb),.25))}
body.hl-v84 .hl-diagram-route-map__stop{position:relative;z-index:1;display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:2rem .8rem .85rem;border:1px solid rgba(148,163,184,.22);border-radius:1rem;background:rgba(15,23,42,.70);text-align:center}
body.hl-v84 .hl-diagram-route-map__dot{position:absolute;top:.58rem;left:50%;width:.8rem;height:.8rem;transform:translateX(-50%);border-radius:999px;background:var(--hl-diagram-accent);box-shadow:0 0 0 5px rgba(var(--hl-diagram-rgb),.16)}
body.hl-v84 .hl-diagram-route-map__stop b{color:#fff;font-size:.88rem;line-height:1.3}
body.hl-v84 .hl-diagram-route-map__stop small{color:#cbd5e1;font-size:.74rem;line-height:1.4}
body.hl-v84 .hl-diagram-route-map__stop--cluster{border-color:rgba(var(--hl-diagram-rgb),.48);background:linear-gradient(145deg,rgba(var(--hl-diagram-rgb),.16),rgba(15,23,42,.72))}

@media(max-width:900px){
  body.hl-v84 .hl-diagram-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84 .hl-diagram-flow__step::after{display:none}
  body.hl-v84 .hl-diagram-route-map,body.hl-v84 .hl-diagram-route-map--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hl-v84 .hl-diagram-route-map::before{display:none}
  body.hl-v84 .hl-diagram-route-map__stop{padding:1rem}
  body.hl-v84 .hl-diagram-route-map__dot{position:static;align-self:center;transform:none;margin-bottom:.15rem}
}
@media(max-width:640px){
  body.hl-v84 .hl-diagram-flow{grid-template-columns:1fr}
  body.hl-v84 .hl-diagram-polis{grid-template-columns:1fr;grid-template-rows:auto}
  body.hl-v84 .hl-diagram-polis__node,body.hl-v84 .hl-diagram-polis__core{grid-column:1!important;grid-row:auto!important;min-height:auto}
  body.hl-v84 .hl-diagram-route-map,body.hl-v84 .hl-diagram-route-map--5{grid-template-columns:1fr}
}

/* Stage 4.0C — Critical Maps & Media Reliability Pass */
body.hl-v84 .hl-media-fallback[hidden]{display:none!important}
body.hl-v84 .hl-media-fallback{display:grid;gap:.65rem;align-content:center;justify-items:start;min-height:clamp(12rem,34vw,23rem);padding:1.25rem 1.35rem;border:1px dashed rgba(148,163,184,.38);border-radius:1rem;background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(30,41,59,.92));color:#cbd5e1;text-align:left}
body.hl-v84 .hl-media-fallback__heading{display:flex;align-items:center;gap:.55rem;color:#e2e8f0;font-size:.84rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
body.hl-v84 .hl-media-fallback__heading .hl-icon{width:1.2rem;height:1.2rem;color:var(--hl-accent,#f59e0b)}
body.hl-v84 .hl-media-fallback__title{color:#fff;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:850;line-height:1.25}
body.hl-v84 .hl-media-fallback p{max-width:72ch;margin:0;color:#cbd5e1;line-height:1.65}
body.hl-v84 .hl-media-fallback__source{display:inline-flex;align-items:center;min-height:2.4rem;padding:.45rem .7rem;border:1px solid rgba(148,163,184,.3);border-radius:.65rem;color:#e2e8f0;text-decoration:none;font-weight:750}
body.hl-v84 .hl-media-fallback__source:hover,body.hl-v84 .hl-media-fallback__source:focus-visible{border-color:var(--hl-accent,#f59e0b);color:#fff;outline:none;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
body.hl-v84 img.hl-critical-media--failed{display:none!important}
@media(max-width:640px){body.hl-v84 .hl-media-fallback{min-height:11rem;padding:1rem}}


/* Final Browser QA Fix Pass — quiz reset and result-state clarity */
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-quiz-reset{
  width:100%;min-height:44px;margin-top:.65rem;padding:.7rem 1rem;border-radius:.75rem;
  border:1px solid #475569;background:#0f172a;color:#e2e8f0;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background-color .18s ease,border-color .18s ease;
}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-quiz-reset:hover{background:#1e293b;border-color:#94a3b8}
body.hl-v84.hl-ds2.hl-section-3 main .hl-s3-quiz-reset:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}

body.hl-v84.hl-ds2.hl-section-2 #quiz-final-msg[data-hl-quiz-level="strong"]{
  border-color:#6ee7b7!important;background:#ecfdf5!important;color:#064e3b!important;
}
body.hl-v84.hl-ds2.hl-section-2 #quiz-final-msg[data-hl-quiz-level="developing"]{
  border-color:#fcd34d!important;background:#fffbeb!important;color:#78350f!important;
}
body.hl-v84.hl-ds2.hl-section-2 #quiz-final-msg[data-hl-quiz-level="retry"]{
  border-color:#fda4af!important;background:#fff1f2!important;color:#881337!important;
}