@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600&display=swap");
/* Hermetic Networks training site - shared styles
   Color roles and rules live in _assets/STYLE.md. Light-mode values come from the Hermetic Brand Kit.
   Dark mode keeps the bright brand cyan for fills, small markers and links, and uses the
   text color for headings and titles; surfaces are navy-tinted and step lighter instead of casting shadows. */

:root{
  --ground:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fb;
  --ink:#141a22; --muted:#57616e; --faint:#8a94a1; --line:#dde3ea;
  --a:#106efd; --a-tint:rgba(16,110,253,.08); --a-line:rgba(16,110,253,.34); --a-ink:#011871; --on-a:#fff; --heading:#011871;
  --ok:#1f7a44; --ok-tint:rgba(31,122,68,.08); --warn:#b26a1c; --warn-tint:rgba(178,106,28,.09);
  --shadow:0 1px 2px rgba(16,26,40,.06), 0 8px 24px rgba(16,26,40,.06);
  --radius:10px;
  --h-font:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --b-font:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#10151c; --surface:#161c24; --surface-2:#1c232c;
    --ink:#dde3ea; --muted:#9ca6b1; --faint:#6c7682; --line:#27303a; --heading:#eef2f6;
    --a:#40cfde; --a-tint:rgba(64,207,222,.10); --a-line:rgba(64,207,222,.30); --a-ink:#40cfde; --on-a:#06232a;
    --ok:#6dbd8b; --ok-tint:rgba(109,189,139,.12); --warn:#d9a35f; --warn-tint:rgba(217,163,95,.12);
    --shadow:0 0 0 1px rgba(255,255,255,.02);
  }
}
:root[data-theme="dark"]{
  --ground:#10151c; --surface:#161c24; --surface-2:#1c232c;
  --ink:#dde3ea; --muted:#9ca6b1; --faint:#6c7682; --line:#27303a; --heading:#eef2f6;
  --a:#40cfde; --a-tint:rgba(64,207,222,.10); --a-line:rgba(64,207,222,.30); --a-ink:#40cfde; --on-a:#06232a;
  --ok:#6dbd8b; --ok-tint:rgba(109,189,139,.12); --warn:#d9a35f; --warn-tint:rgba(217,163,95,.12);
  --shadow:0 0 0 1px rgba(255,255,255,.02);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--b-font); font-size:17px; line-height:1.62;
  font-variant-numeric:tabular-nums lining-nums;
}
img{max-width:100%}

/* ---------- skip link and focus ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--a); color:var(--on-a); padding:10px 16px; z-index:100; border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}
a{color:var(--a-ink); text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--a); outline-offset:2px; border-radius:3px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px;
  padding:10px clamp(16px,3vw,36px);
}
.topbar .brand{display:flex; align-items:center; flex:0 0 auto}
.topbar .brand img{height:34px; width:auto; display:block}
.topbar .brand img.logo-dark{display:none}
:root[data-theme="dark"] .topbar .brand img.logo-dark{display:block}
:root[data-theme="dark"] .topbar .brand img.logo-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topbar .brand img.logo-dark{display:block}
  :root:not([data-theme="light"]) .topbar .brand img.logo-light{display:none}
}
.crumbs{flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--a-ink); text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--faint)}
.themebtn{
  flex:0 0 auto; background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font:600 13px/1 var(--b-font); cursor:pointer; display:flex; gap:7px; align-items:center;
}
.themebtn:hover{border-color:var(--a-line); color:var(--a-ink)}
.themebtn svg{width:15px; height:15px; fill:currentColor}

/* ---------- page head ---------- */
.pagehead{background:var(--surface); border-bottom:1px solid var(--line); padding:clamp(26px,4vw,48px) 0 clamp(22px,3vw,34px)}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(16px,3vw,36px)}
.eyebrow{margin:0 0 10px; font:600 12.5px/1.2 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
h1{
  font-family:var(--h-font); font-stretch:75%; font-weight:800; color:var(--ink);
  font-size:clamp(30px,4.4vw,46px); line-height:1.1; letter-spacing:-.01em; margin:0 0 12px;
}
.lede{margin:0; font-size:clamp(17px,2vw,19.5px); color:var(--muted); max-width:74ch; line-height:1.55}
.metabar{list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 0; padding:0}
.metabar li{font-size:14px; color:var(--muted)}
.metabar b{display:block; font:600 11.5px/1.5 var(--b-font); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.metabar li>span{color:var(--ink); font-weight:600}

/* ---------- layout ---------- */
.layout{max-width:1180px; margin:0 auto; padding:clamp(22px,3vw,38px) clamp(16px,3vw,36px) 60px; display:grid; grid-template-columns:228px minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start}
.layout.solo{grid-template-columns:minmax(0,1fr)}
.toc{position:sticky; top:74px; font-size:14px}
.toc h2{font:600 11.5px/1.4 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; font-stretch:100%}
.toc ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
.toc li a{display:block; padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; color:var(--muted); text-decoration:none; line-height:1.35}
.toc li a:hover{color:var(--a-ink); border-left-color:var(--a-line)}
.toc li a.on{color:var(--a-ink); font-weight:600; border-left-color:var(--a)}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
  .toc ol{display:flex; flex-wrap:wrap; gap:2px 18px; border-left:0}
  .toc li a{padding:3px 0; border-left:0; margin-left:0}
}

/* ---------- sections ---------- */
main{min-width:0}
section{margin:0 0 clamp(34px,4vw,52px); scroll-margin-top:84px}
h2{
  font-family:var(--h-font); font-stretch:75%; font-weight:700; color:var(--heading);
  font-size:clamp(23px,2.7vw,30px); line-height:1.18; margin:0 0 14px;
  display:flex; gap:14px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:10px;
}
h2 .num{
  flex:0 0 auto; font-size:.62em; font-weight:800; color:var(--a); font-variant-numeric:tabular-nums;
  border:1px solid var(--a-line); background:var(--a-tint); border-radius:6px; padding:3px 8px; line-height:1;
}
h3{font-family:var(--h-font); font-stretch:75%; font-weight:700; font-size:clamp(19px,2.1vw,22px); line-height:1.25; margin:30px 0 10px; color:var(--ink)}
h4{font-family:var(--h-font); font-stretch:75%; font-weight:700; font-size:17.5px; margin:22px 0 8px; color:var(--ink)}
h5{font:600 12px/1.5 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:20px 0 8px}
p{margin:0 0 14px; max-width:80ch}
ul,ol{margin:0 0 16px; padding-left:22px; max-width:80ch}
li{margin:0 0 7px}
li::marker{color:var(--faint)}
strong{font-weight:700}
code,.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.92em; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px}
hr{border:0; border-top:1px solid var(--line); margin:34px 0}

/* ---------- cards and callouts ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.2vw,24px); box-shadow:var(--shadow); margin:0 0 20px}
.card>:last-child{margin-bottom:0}
.card h3,.card h4{margin-top:0}
.grid{display:grid; gap:16px; margin:0 0 20px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grid .card{margin:0}

.note{border-left:3px solid var(--a); background:var(--a-tint); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:0 0 20px}
.note>:last-child{margin-bottom:0}
.note .tag,.aside .tag,.answer .tag{display:block; font:700 11.5px/1.5 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--a-ink); margin-bottom:5px}
.aside{border-left:3px solid var(--warn); background:var(--warn-tint); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:0 0 20px}
.aside .tag{color:var(--warn)}
.answer{border-left:3px solid var(--ok); background:var(--ok-tint); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:10px 0 20px}
.answer .tag{color:var(--ok)}

.say{background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius); padding:14px 18px; margin:0 0 18px}
.say .tag{display:block; font:700 11.5px/1.5 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-bottom:5px}

.model-flag{display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--b-font); letter-spacing:.09em; text-transform:uppercase; color:var(--warn); border:1px solid var(--warn); border-radius:999px; padding:4px 9px; vertical-align:middle}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:15px}
caption{text-align:left; padding:12px 16px 0; font:600 12px/1.5 var(--b-font); letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
th,td{padding:9px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--surface-2); font:700 12.5px/1.4 var(--b-font); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
tr.total td{font-weight:700; background:var(--surface-2); border-top:2px solid var(--line)}
tr.sub td{font-weight:600}
tr.grand td{font-weight:800; background:var(--a-tint); border-top:2px solid var(--a-line); border-bottom:0}
td.indent{padding-left:34px}
.neg{color:var(--warn)}
.pos{color:var(--ok)}

/* agenda */
table.agenda td:first-child{white-space:nowrap; font-weight:700; color:var(--a-ink); width:1%}
table.agenda td:nth-child(2){font-weight:600; white-space:nowrap}

/* ---------- figures ---------- */
figure{margin:0 0 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(14px,2vw,22px); box-shadow:var(--shadow)}
figure svg{display:block; width:100%; height:auto; overflow:visible}
figcaption{margin-top:12px; font-size:13.5px; color:var(--muted); line-height:1.5}
figcaption b{color:var(--ink)}
.chart-key{display:flex; flex-wrap:wrap; gap:8px 20px; margin:12px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--muted)}
.chart-key li{display:flex; align-items:center; gap:7px; margin:0}
.chart-key i{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
svg text{font-family:var(--b-font); fill:var(--muted)}
svg .lbl{font-size:12px}
svg .lbl-b{font-size:12px; font-weight:700; fill:var(--ink)}
svg .val{font-size:12.5px; font-weight:700; fill:var(--ink)}
svg .ttl{font-size:13px; font-weight:700; fill:var(--ink)}
svg .halo{paint-order:stroke fill; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round}
svg .in{fill:#fff; font-size:12px; font-weight:700}
svg .lead{stroke:var(--faint); stroke-width:1}
svg .ax{stroke:var(--line); stroke-width:1}
svg .gl{stroke:var(--line); stroke-width:1; stroke-dasharray:3 4}
svg .bx{fill:var(--surface-2); stroke:var(--line); stroke-width:1.5}
svg .bx-a{fill:var(--a-tint); stroke:var(--a); stroke-width:1.5}
svg .arw{stroke:var(--a); stroke-width:2; fill:none}

/* ---------- KPI tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:14px; margin:0 0 22px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.tile .k{font:600 11.5px/1.4 var(--b-font); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.tile .v{font-family:var(--h-font); font-stretch:75%; font-weight:800; font-size:clamp(21px,2.1vw,27px); line-height:1.06; color:var(--a-ink); margin:0; overflow-wrap:anywhere}
.tile .s{margin:5px 0 0; font-size:13px; color:var(--muted); line-height:1.4}

/* ---------- checks, steps, glossary ---------- */
ol.steps{counter-reset:st; list-style:none; padding:0; max-width:none}
ol.steps>li{counter-increment:st; position:relative; padding:0 0 2px 42px; margin:0 0 16px}
ol.steps>li::before{
  content:counter(st); position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%;
  background:var(--a-tint); border:1px solid var(--a-line); color:var(--a-ink);
  font:700 13px/26px var(--b-font); text-align:center;
}
ol.check{counter-reset:ck; list-style:none; padding:0}
ol.check>li{counter-increment:ck; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px 14px 52px; position:relative; margin:0 0 12px; box-shadow:var(--shadow)}
ol.check>li::before{content:"Q" counter(ck); position:absolute; left:16px; top:14px; font:800 13px/1.5 var(--b-font); color:var(--a)}
ol.check>li>:last-child{margin-bottom:0}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:0; margin:0 0 12px}
details summary{cursor:pointer; padding:12px 18px; font-weight:600; list-style-position:inside}
details[open] summary{border-bottom:1px solid var(--line)}
details .body{padding:14px 18px}
details .body>:last-child{margin-bottom:0}
dl.gloss{margin:0 0 20px; display:grid; grid-template-columns:minmax(150px,230px) 1fr; gap:0}
dl.gloss dt{font-weight:700; padding:11px 16px 11px 0; border-top:1px solid var(--line)}
dl.gloss dd{margin:0; padding:11px 0; border-top:1px solid var(--line); color:var(--muted)}
@media (max-width:640px){dl.gloss{grid-template-columns:1fr} dl.gloss dd{padding-top:0; border-top:0}}

/* ---------- session / program cards ---------- */
.stack{display:grid; gap:12px; margin:0 0 24px}
.row{display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; box-shadow:var(--shadow); text-decoration:none; color:inherit}
a.row:hover{border-color:var(--a-line); background:var(--a-tint)}
.row.hi{background:var(--a-tint); border-color:var(--a-line); border-left:4px solid var(--a)}
a.row.hi:hover{background:var(--a); border-color:var(--a); color:var(--on-a)}
a.row.hi:hover .no,a.row.hi:hover .d,a.row.hi:hover .pill{color:var(--on-a); border-color:var(--on-a); background:transparent}
.row.pre{background:var(--warn-tint); border-color:var(--warn); border-left:4px solid var(--warn)}
.row.pre .no{color:var(--warn)}
.row .no{font-family:var(--h-font); font-stretch:75%; font-weight:800; font-size:24px; color:var(--a); line-height:1}
.row .t{font-weight:700; margin:0 0 3px; font-size:16.5px; color:var(--heading)}
.row .d{margin:0; font-size:14px; color:var(--muted); line-height:1.45}
.row .go{display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center}
.row .go a{display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:var(--a-ink); white-space:nowrap; text-decoration:none; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2)}
.row .go a:hover{border-color:var(--a-line); background:var(--a-tint)}
.pill{display:inline-block; font:700 11px/1 var(--b-font); letter-spacing:.07em; text-transform:uppercase; padding:5px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--surface-2); white-space:nowrap}
.pill.live{color:var(--ok); border-color:var(--ok); background:var(--ok-tint)}
.pill.next{color:var(--a-ink); border-color:var(--a-line); background:var(--a-tint)}
@media (max-width:640px){
  .row{grid-template-columns:40px minmax(0,1fr); gap:12px}
  .row .go,.row .pill{grid-column:2}
}
.phase{margin:0 0 34px}
.phase>h3{display:flex; gap:12px; align-items:baseline; margin-bottom:6px}
.phase>h3 .ph{font:700 11.5px/1 var(--b-font); letter-spacing:.1em; text-transform:uppercase; color:var(--a); border:1px solid var(--a-line); background:var(--a-tint); border-radius:999px; padding:5px 10px; font-stretch:100%}

/* ---------- program cards (homepage) ---------- */
.filterbar{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.filterbtn{font:700 12.5px/1 var(--b-font); letter-spacing:.03em; padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer}
.filterbtn:hover{border-color:var(--a-line); color:var(--a-ink)}
.filterbtn.on{background:var(--a); border-color:var(--a); color:var(--on-a)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px; margin:0 0 24px}
.prog{display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); text-decoration:none; color:inherit}
a.prog:hover{border-color:var(--a-line); background:var(--a-tint)}
.prog.hi{background:var(--a-tint); border-color:var(--a-line); border-top:4px solid var(--a)}
a.prog.hi:hover{background:var(--a); border-color:var(--a); color:var(--on-a)}
a.prog.hi:hover .d,a.prog.hi:hover .pill{color:var(--on-a); border-color:var(--on-a); background:transparent}
.prog.off{color:var(--faint); cursor:default}
.prog .t{font-weight:700; font-size:17px; margin:0; color:var(--heading)}
.prog.off .t{color:inherit}
.prog .d{margin:0; font-size:14px; color:var(--muted); line-height:1.5; flex:1 1 auto}
.prog.off .d{color:var(--faint)}
.prog .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.pill.cert{color:var(--ok); border-color:var(--ok); background:var(--ok-tint)}
.cards.filter-cert .prog:not([data-cert]){display:none}

/* ---------- next-session link (bottom of a session page) ---------- */
.nextup{display:flex; justify-content:flex-end; margin:0 0 4px}
.nextup a{display:inline-flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 22px; box-shadow:var(--shadow); text-decoration:none; color:inherit; max-width:100%}
.nextup a:hover{border-color:var(--a-line); background:var(--a-tint)}
.nextup a:hover .ttl{color:var(--a-ink)}
.nextup .lbl{display:block; font:700 11.5px/1.4 var(--b-font); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.nextup .ttl{font-weight:700; font-size:16px; color:var(--ink)}
.nextup .arrow{flex:0 0 auto; font-size:20px; color:var(--a)}
@media (max-width:640px){.nextup{justify-content:stretch} .nextup a{width:100%}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:var(--surface); padding:26px 0 40px; margin-top:20px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between}
footer p{margin:0; font-size:13.5px; color:var(--muted)}
footer .tag{font:700 12px/1.5 var(--b-font); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* ---------- print ---------- */
@media print{
  :root{--ground:#fff; --surface:#fff; --surface-2:#fff; --ink:#000; --muted:#333; --line:#bbb; --shadow:none}
  .topbar,.toc,.themebtn,.skip{display:none!important}
  body{font-size:11pt}
  .layout{grid-template-columns:1fr; padding:0}
  section,figure,.card,ol.check>li,.row{break-inside:avoid}
  a{color:#000; text-decoration:none}
  details{border:0} details[open] summary{border:0}
}

/* ---------- chart series (validated categorical palette) ---------- */
:root{ --c1:#1668FD; --c2:#00A08C; --c3:#8B4FD1; --c4:#B8701C; --grid:rgba(20,26,34,.10); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --c1:#3C8DF5; --c2:#14A08D; --c3:#9B6EEA; --c4:#BE7A32; --grid:rgba(231,236,242,.13); }
}
:root[data-theme="dark"]{ --c1:#3C8DF5; --c2:#14A08D; --c3:#9B6EEA; --c4:#BE7A32; --grid:rgba(231,236,242,.13); }
svg .gl{stroke:var(--grid); stroke-dasharray:none; stroke-width:1}
svg .s1{fill:var(--c1)} svg .s2{fill:var(--c2)} svg .s3{fill:var(--c3)} svg .s4{fill:var(--c4)}
svg .sneg{fill:var(--warn)} svg .spos{fill:var(--ok)} svg .smut{fill:var(--faint)}
svg .base{stroke:var(--muted); stroke-width:1.25}
svg .conn{stroke:var(--faint); stroke-width:1; stroke-dasharray:2 3}
.key-c1{background:var(--c1)} .key-c2{background:var(--c2)} .key-c3{background:var(--c3)} .key-c4{background:var(--c4)}
.key-neg{background:var(--warn)} .key-pos{background:var(--ok)} .key-mut{background:var(--faint)}

/* ---------- block fills (stacked composition charts with labels inside) ---------- */
:root{ --b1:#0B4FC0; --b2:#00806F; --b3:#66359F; --b4:#8A4E12; --b5:#3F4A5A; --on-block:#ffffff; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --b1:#3C8DF5; --b2:#14A08D; --b3:#9B6EEA; --b4:#BE7A32; --b5:#8A96A5; --on-block:#0d1218; }
}
:root[data-theme="dark"]{ --b1:#3C8DF5; --b2:#14A08D; --b3:#9B6EEA; --b4:#BE7A32; --b5:#8A96A5; --on-block:#0d1218; }
svg .b1{fill:var(--b1)} svg .b2{fill:var(--b2)} svg .b3{fill:var(--b3)} svg .b4{fill:var(--b4)} svg .b5{fill:var(--b5)}
svg .in{fill:var(--on-block)}
.key-b1{background:var(--b1)} .key-b2{background:var(--b2)} .key-b3{background:var(--b3)}
.key-b4{background:var(--b4)} .key-b5{background:var(--b5)}

/* ---------- small screens: charts scroll rather than shrink to illegibility ---------- */
@media (max-width:760px){
  figure{overflow-x:auto; -webkit-overflow-scrolling:touch}
  figure svg{min-width:620px}
  figure figcaption,figure .chart-key{position:sticky; left:0}
  .metabar{gap:10px 18px}
  h2{flex-wrap:wrap}
}

/* ---------- action card: the short list that stays open while the work is done ---------- */
.actioncard{background:var(--surface); border:2px solid var(--a); border-radius:var(--radius); padding:clamp(16px,2.2vw,24px); box-shadow:var(--shadow); margin:0 0 22px}
.actioncard h4{margin:0 0 4px; font-size:19px; color:var(--a-ink)}
.actioncard .ac-h{margin:18px 0 6px; font:600 11.5px/1.5 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.actioncard .ac-h:first-of-type{margin-top:14px}
ul.ac{list-style:none; margin:0; padding:0; max-width:none}
ul.ac li{position:relative; padding:5px 0 5px 30px; margin:0; border-bottom:1px solid var(--line); line-height:1.45}
ul.ac li:last-child{border-bottom:0}
ul.ac li::before{content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border:2px solid var(--a-line); border-radius:4px; background:var(--surface-2)}
.actioncard .ac-n{margin:14px 0 0; font-size:13.5px; color:var(--muted)}
@media print{.actioncard{break-inside:avoid} ul.ac li::before{border-color:#666}}

/* ---------- reading block ---------- */
.reading{background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--a-ink); border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin:0 0 22px}
.reading .tag{display:block; font:700 11.5px/1.5 var(--b-font); letter-spacing:.11em; text-transform:uppercase; color:var(--a-ink); margin-bottom:8px}
.reading ul{margin:0; padding-left:20px; max-width:none}
.reading li{margin:0 0 7px; line-height:1.5}
.reading .src{margin:10px 0 0; font-size:13.5px; color:var(--muted)}

/* ---------- review questions: multiple choice with feedback ---------- */
.rq{border:0; padding:0; margin:0 0 6px; min-width:0}
.rq legend{padding:0; margin:0 0 12px; font-weight:600; line-height:1.5; max-width:80ch}
.rq label{display:flex; gap:12px; align-items:flex-start; padding:9px 14px; margin:0 0 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); cursor:pointer; line-height:1.5; max-width:80ch}
.rq label:hover{border-color:var(--a-line)}
.rq label:has(input:focus-visible){outline:3px solid var(--a); outline-offset:2px}
.rq input{flex:0 0 auto; margin:5px 0 0; width:16px; height:16px; accent-color:var(--a)}
.rq label.right{border-color:var(--ok); background:var(--ok-tint)}
.rq label.wrong{border-color:var(--warn); background:var(--warn-tint)}
.rq .opt-k{font-weight:700; color:var(--muted); flex:0 0 auto}
.answer[hidden]{display:none}
.answer.wrong{border-left-color:var(--warn); background:var(--warn-tint)}
.answer.wrong .tag{color:var(--warn)}
.answer .why{font-weight:600}
.answer .reveal{display:inline-block; margin-top:6px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font:600 13px/1 var(--b-font); cursor:pointer}
.answer .reveal:hover{border-color:var(--a-line); color:var(--a-ink)}
@media print{
  .answer[hidden]{display:block}
  .answer .full[hidden]{display:block}
  .answer .reveal{display:none}
  .rq label{break-inside:avoid}
}

/* ---------- app shortcut (homepage Library pill) ---------- */
.pagehead .wrap.has-app{position:relative}
@media (min-width:701px){.pagehead .wrap.has-app{padding-right:calc(clamp(16px,3vw,36px) + 290px)}}
.appicon{
  position:absolute; right:clamp(16px,3vw,36px); top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:14px; padding:11px 32px 11px 12px; border-radius:999px; text-decoration:none;
  background:linear-gradient(180deg,#ffffff 0%,#f2f5fa 100%); border:1px solid rgba(16,26,40,.1);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(16,26,40,.06), 0 12px 26px -10px rgba(16,26,40,.22);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
.appicon .ico{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(180deg,#f0f6ff 0%,#dfe9fb 100%); box-shadow:inset 0 0 0 1px rgba(16,110,253,.12), inset 0 1px 0 #fff}
.appicon .ico svg{width:36px; height:36px; filter:drop-shadow(0 2px 2px rgba(1,24,113,.22))}
.appicon .label{font:700 19px/1 var(--h-font); letter-spacing:-.005em; color:#141a22}
.appicon:hover,.appicon:focus-visible{transform:translateY(calc(-50% - 2px)); border-color:rgba(16,110,253,.32);
  box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(16,26,40,.08), 0 18px 34px -12px rgba(16,110,253,.4)}
.appicon:active{transform:translateY(-50%) scale(.98)}
.appicon:focus-visible{outline:3px solid var(--a); outline-offset:3px}
:root[data-theme="dark"] .appicon{border-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 #fff, 0 14px 30px -10px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .appicon{border-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 #fff, 0 14px 30px -10px rgba(0,0,0,.6)}}
@media (max-width:700px){
  .appicon{position:static; transform:none; margin:0 0 18px; padding:8px 24px 8px 8px; gap:12px}
  .appicon:hover,.appicon:focus-visible{transform:translateY(-2px)}
  .appicon .ico{width:44px; height:44px}
  .appicon .ico svg{width:30px; height:30px}
  .appicon .label{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.appicon{transition:none}}

/* ---------- dark mode: pictures ----------
   Bright screenshots and diagrams glare on a dark page; take the edge off them. */
:root[data-theme="dark"] main img{filter:brightness(.9)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) main img{filter:brightness(.9)} }
/* Dark mode: a large solid accent fill glares, so hovered highlight cards deepen their tint instead. */
:root[data-theme="dark"] a.prog.hi:hover,:root[data-theme="dark"] a.row.hi:hover{background:rgba(64,207,222,.14); border-color:var(--a); color:var(--ink)}
:root[data-theme="dark"] a.prog.hi:hover .d,:root[data-theme="dark"] a.prog.hi:hover .pill,:root[data-theme="dark"] a.row.hi:hover .no,:root[data-theme="dark"] a.row.hi:hover .d,:root[data-theme="dark"] a.row.hi:hover .pill{color:var(--a-ink); border-color:var(--a-line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) a.prog.hi:hover,:root:not([data-theme="light"]) a.row.hi:hover{background:rgba(64,207,222,.14); border-color:var(--a); color:var(--ink)}
  :root:not([data-theme="light"]) a.prog.hi:hover .d,:root:not([data-theme="light"]) a.prog.hi:hover .pill,:root:not([data-theme="light"]) a.row.hi:hover .no,:root:not([data-theme="light"]) a.row.hi:hover .d,:root:not([data-theme="light"]) a.row.hi:hover .pill{color:var(--a-ink); border-color:var(--a-line)}
}

/* =====================================================================================
   Framer-style theme, rolled out 2026-10-03. See _assets/STYLE.md.
   Dark grey boxes on a textured dark background (cube pattern by default; html[data-bg]
   can pick grid, dots, glow or plain), mac-style buttons and segmented controls, Inter type,
   brand cyan for accents. Light mode uses the same layout on pale surfaces.
   ===================================================================================== */

body{
  --ground:#f3f4f6; --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#eceef2;
  --ink:#16181d; --muted:#5d6370; --faint:#9096a1; --line:rgba(16,24,40,.08); --line-2:rgba(16,24,40,.15);
  --heading:#0b0d12; --pat:rgba(16,24,40,.06); --glow-a:rgba(64,207,222,.20); --glow-b:rgba(16,110,253,.12);
  --btn:linear-gradient(#ffffff,#eef0f3); --btn-edge:rgba(16,24,40,.16); --btn-hi:rgba(255,255,255,.95); --btn-ink:#16181d; --btn-shadow:0 1px 2px rgba(16,24,40,.12);
  --well:rgba(16,24,40,.05);
  --cube:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2745.03%27%20height%3D%2778%27%20viewBox%3D%270%200%2045.03%2078%27%3E%3Cpath%20d%3D%27M0%20-26L22.52%20-13L22.52%2013L0%2026L-22.52%2013L-22.52%20-13ZM0%200L-22.52%20-13M0%200L22.52%20-13M0%200L0%2026M45.03%20-26L67.55%20-13L67.55%2013L45.03%2026L22.52%2013L22.52%20-13ZM45.03%200L22.52%20-13M45.03%200L67.55%20-13M45.03%200L45.03%2026M22.52%2013L45.03%2026L45.03%2052L22.52%2065L0%2052L0%2026ZM22.52%2039L0%2026M22.52%2039L45.03%2026M22.52%2039L22.52%2065M0%2052L22.52%2065L22.52%2091L0%20104L-22.52%2091L-22.52%2065ZM0%2078L-22.52%2065M0%2078L22.52%2065M0%2078L0%20104M45.03%2052L67.55%2065L67.55%2091L45.03%20104L22.52%2091L22.52%2065ZM45.03%2078L22.52%2065M45.03%2078L67.55%2065M45.03%2078L45.03%20104%27%20fill%3D%27none%27%20stroke%3D%27rgba(16%2C24%2C40%2C0.07)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  --v2-radius:18px;
  --v2-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --v2-head:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--ground); color:var(--ink); font-family:var(--v2-font); font-size:17px; letter-spacing:-.006em;
}
:root[data-theme="dark"] body{
  --ground:#0a0c10; --surface:#15171c; --surface-2:#1b1e24; --surface-3:#23262d;
  --ink:#e6e8ec; --muted:#a0a5ae; --faint:#6b707a; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --heading:#f5f6f8; --pat:rgba(255,255,255,.05); --glow-a:rgba(64,207,222,.13); --glow-b:rgba(16,110,253,.17);
  --btn:linear-gradient(#3b3e45,#2c2f35); --btn-edge:rgba(255,255,255,.10); --btn-hi:rgba(255,255,255,.10); --btn-ink:#eceef1; --btn-shadow:0 1px 2px rgba(0,0,0,.45);
  --well:rgba(0,0,0,.28);
  --a:#40cfde; --a-ink:#40cfde; --on-a:#06232a;
  --cube:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2745.03%27%20height%3D%2778%27%20viewBox%3D%270%200%2045.03%2078%27%3E%3Cpath%20d%3D%27M0%20-26L22.52%20-13L22.52%2013L0%2026L-22.52%2013L-22.52%20-13ZM0%200L-22.52%20-13M0%200L22.52%20-13M0%200L0%2026M45.03%20-26L67.55%20-13L67.55%2013L45.03%2026L22.52%2013L22.52%20-13ZM45.03%200L22.52%20-13M45.03%200L67.55%20-13M45.03%200L45.03%2026M22.52%2013L45.03%2026L45.03%2052L22.52%2065L0%2052L0%2026ZM22.52%2039L0%2026M22.52%2039L45.03%2026M22.52%2039L22.52%2065M0%2052L22.52%2065L22.52%2091L0%20104L-22.52%2091L-22.52%2065ZM0%2078L-22.52%2065M0%2078L22.52%2065M0%2078L0%20104M45.03%2052L67.55%2065L67.55%2091L45.03%20104L22.52%2091L22.52%2065ZM45.03%2078L22.52%2065M45.03%2078L67.55%2065M45.03%2078L45.03%20104%27%20fill%3D%27none%27%20stroke%3D%27rgba(255%2C255%2C255%2C0.06)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{
    --ground:#0a0c10; --surface:#15171c; --surface-2:#1b1e24; --surface-3:#23262d;
    --ink:#e6e8ec; --muted:#a0a5ae; --faint:#6b707a; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
    --heading:#f5f6f8; --pat:rgba(255,255,255,.05); --glow-a:rgba(64,207,222,.13); --glow-b:rgba(16,110,253,.17);
    --btn:linear-gradient(#3b3e45,#2c2f35); --btn-edge:rgba(255,255,255,.10); --btn-hi:rgba(255,255,255,.10); --btn-ink:#eceef1; --btn-shadow:0 1px 2px rgba(0,0,0,.45);
    --well:rgba(0,0,0,.28);
    --a:#40cfde; --a-ink:#40cfde; --on-a:#06232a;
    --cube:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2745.03%27%20height%3D%2778%27%20viewBox%3D%270%200%2045.03%2078%27%3E%3Cpath%20d%3D%27M0%20-26L22.52%20-13L22.52%2013L0%2026L-22.52%2013L-22.52%20-13ZM0%200L-22.52%20-13M0%200L22.52%20-13M0%200L0%2026M45.03%20-26L67.55%20-13L67.55%2013L45.03%2026L22.52%2013L22.52%20-13ZM45.03%200L22.52%20-13M45.03%200L67.55%20-13M45.03%200L45.03%2026M22.52%2013L45.03%2026L45.03%2052L22.52%2065L0%2052L0%2026ZM22.52%2039L0%2026M22.52%2039L45.03%2026M22.52%2039L22.52%2065M0%2052L22.52%2065L22.52%2091L0%20104L-22.52%2091L-22.52%2065ZM0%2078L-22.52%2065M0%2078L22.52%2065M0%2078L0%20104M45.03%2052L67.55%2065L67.55%2091L45.03%20104L22.52%2091L22.52%2065ZM45.03%2078L22.52%2065M45.03%2078L67.55%2065M45.03%2078L45.03%20104%27%20fill%3D%27none%27%20stroke%3D%27rgba(255%2C255%2C255%2C0.06)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  }
}

/* ---------- background: soft glows behind, a texture on top that fades out down the page ---------- */
body::before,body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none}
body::before{
  background:
    radial-gradient(900px 620px at 8% -12%, var(--glow-a), transparent 62%),
    radial-gradient(820px 700px at 100% 4%, var(--glow-b), transparent 60%),
    radial-gradient(1100px 760px at 50% 125%, var(--glow-b), transparent 62%);
}
body::after{
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 80%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 80%);
}
html[data-bg="grid"] body::after{background-image:linear-gradient(var(--pat) 1px,transparent 1px),linear-gradient(90deg,var(--pat) 1px,transparent 1px); background-size:44px 44px; background-position:-1px -1px}
html[data-bg="dots"] body::after{background-image:radial-gradient(var(--pat) 1.2px,transparent 1.6px); background-size:20px 20px}
body::after{background-image:var(--cube); background-size:45.03px 78px}
html[data-bg="plain"] body::before{opacity:.35}
html[data-bg="plain"] body::after,html[data-bg="glow"] body::after{background-image:none}

/* ---------- type ---------- */
body h1,body h2,body h3{font-family:var(--v2-head); font-stretch:100%; color:var(--heading)}
body h1{font-weight:600; font-size:clamp(36px,5vw,60px); line-height:1.04; letter-spacing:-.035em; margin:0 0 16px}
body h2{font-weight:600; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.025em; border:0; padding:0; margin:0 0 18px; align-items:center}
body .cathead h2{margin:0}
body h2 .num{font:600 12px/1 var(--v2-font); color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 9px; letter-spacing:0}
body .eyebrow{font:600 12px/1 var(--v2-font); letter-spacing:.08em; color:var(--muted); display:flex; align-items:center; gap:8px}
body .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--a); box-shadow:0 0 10px var(--a)}
body .lede{color:var(--muted); font-size:clamp(17px,1.6vw,19px); line-height:1.55; letter-spacing:-.01em}
body a{color:var(--a-ink)}

/* ---------- chrome ---------- */
body .topbar{background:color-mix(in srgb,var(--ground) 72%,transparent); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
body .crumbs{color:var(--muted)}
body .pagehead{background:transparent; border:0; padding:clamp(48px,8vw,104px) 0 clamp(28px,4vw,44px)}
body .metabar{gap:12px; margin-top:30px}
body .metabar li{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px; color:var(--ink)}
body .metabar b{color:var(--faint); font:600 10.5px/1.6 var(--v2-font); letter-spacing:.08em}
body .metabar li>span{font-weight:600}
body footer{background:transparent; border-top:1px solid var(--line); color:var(--muted)}

/* ---------- mac-style buttons ---------- */
body .themebtn,body .mbtn{
  background:var(--btn); color:var(--btn-ink); border:1px solid var(--btn-edge); border-radius:8px;
  box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow); padding:6px 12px; font:500 13px/1 var(--v2-font); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; transition:filter .15s;
}
body .themebtn:hover,body .mbtn:hover{filter:brightness(1.08); color:var(--btn-ink); border-color:var(--btn-edge)}
body .themebtn:active,body .mbtn:active{filter:brightness(.94); box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
body .mbtn.primary{background:linear-gradient(#5ad9e6,#2fbccd); color:#04252b; border-color:rgba(0,0,0,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.35), 0 0 22px rgba(64,207,222,.18)}

/* Library shortcut: a large mac-style button with a glowing icon tile. */
body:not(#v2) .appicon{background:var(--btn); border:1px solid var(--btn-edge); border-radius:16px; padding:10px 22px 10px 10px; gap:14px;
  box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow), 0 14px 34px -14px rgba(0,0,0,.6); transition:transform .25s cubic-bezier(.2,.7,.2,1), filter .2s}
body:not(#v2) .appicon:hover,body:not(#v2) .appicon:focus-visible{filter:brightness(1.08); border-color:var(--btn-edge); box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow), 0 18px 40px -14px rgba(0,0,0,.65), 0 0 0 1px color-mix(in srgb,var(--a) 25%,transparent)}
body:not(#v2) .appicon:active{filter:brightness(.95)}
body:not(#v2) .appicon .ico{width:48px; height:48px; border-radius:12px;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--a) 26%,transparent), transparent 70%), var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--btn-hi), 0 0 20px color-mix(in srgb,var(--a) 16%,transparent)}
body:not(#v2) .appicon .ico svg{width:34px; height:34px}
body:not(#v2) .appicon .label{font:600 16.5px/1.2 var(--v2-head); letter-spacing:-.015em; color:var(--btn-ink)}
body .appicon .label small{display:block; font:500 12.5px/1.3 var(--v2-font); letter-spacing:0; color:var(--muted); margin-top:3px}
body .appicon .chev{width:16px; height:16px; margin-left:4px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
body .appicon:hover .chev{transform:translateX(3px); stroke:var(--ink)}

/* Segmented control, the macOS way. */
body .filterbar{display:inline-flex; gap:2px; padding:3px; margin:0; background:var(--well); border:1px solid var(--line); border-radius:10px}
body .filterbtn{border:0; background:transparent; color:var(--muted); border-radius:7px; padding:6px 13px; font:500 13px/1.2 var(--v2-font); cursor:pointer}
body .filterbtn:hover{color:var(--ink); background:transparent; border:0}
body .filterbtn.on{background:var(--btn); color:var(--btn-ink); box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow), 0 0 0 1px var(--btn-edge)}

/* ---------- dark grey boxes ---------- */
body .cards{gap:22px; margin:0}
body .prog{background:var(--surface); border:1px solid var(--line); border-radius:var(--v2-radius); padding:28px 28px 24px; box-shadow:none; gap:12px; transition:transform .2s ease, background .2s ease, border-color .2s ease}
body:not(#v2) a.prog:hover{background:var(--surface-2); border-color:var(--line-2); transform:translateY(-2px); color:inherit}
body .prog .t{font:600 19px/1.2 var(--v2-head); letter-spacing:-.02em; color:var(--heading)}
body .prog .d{color:var(--muted); font-size:14.5px; line-height:1.55}
body:not(#v2) .prog.hi{background:linear-gradient(180deg, color-mix(in srgb,var(--a) 10%,var(--surface)) 0%, var(--surface) 70%); border:1px solid color-mix(in srgb,var(--a) 30%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--a) 45%,transparent)}
body:not(#v2) a.prog.hi:hover{background:linear-gradient(180deg, color-mix(in srgb,var(--a) 14%,var(--surface-2)) 0%, var(--surface-2) 70%); border-color:color-mix(in srgb,var(--a) 45%,transparent); color:inherit}
body:not(#v2) a.prog.hi:hover .d{color:var(--muted)}
body .prog.off{opacity:.5}
body:not(#v2) .pill,body:not(#v2) a.prog:hover .pill{background:var(--surface-3); border:1px solid var(--line); color:var(--muted); border-radius:999px; font:600 10.5px/1 var(--v2-font); letter-spacing:.07em; padding:6px 10px}
body .pill.next::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--a); margin-right:6px; vertical-align:1px}
body:not(#v2) .pill.cert{color:var(--a-ink); border-color:color-mix(in srgb,var(--a) 32%,transparent); background:color-mix(in srgb,var(--a) 8%,transparent)}

body .note{background:var(--surface); border:1px solid var(--line); border-radius:var(--v2-radius); padding:22px 28px; margin-top:48px}
body .note .tag{color:var(--a-ink); font:600 11px/1.6 var(--v2-font); letter-spacing:.08em}


/* ---------- cards, upgraded: icon tile, arrow, pointer spotlight, glowing top edge ---------- */
body .prog{position:relative; overflow:hidden; isolation:isolate}
body .prog>*{position:relative; z-index:1}
body .prog::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--a) 10%,transparent), transparent 65%)}
body .prog::after{content:""; position:absolute; left:20px; right:20px; top:0; height:1px; z-index:0; opacity:0; transition:opacity .3s;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 80%,transparent),transparent)}
body a.prog:hover::before,body a.prog:hover::after,body a.prog:focus-visible::before,body a.prog:focus-visible::after{opacity:1}
body .pico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:8px; color:var(--a);
  background:linear-gradient(180deg,var(--surface-3),var(--surface-2)); box-shadow:inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--btn-hi), 0 4px 14px -6px rgba(0,0,0,.5)}
body .pico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
body a.prog:hover .pico{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 35%,transparent), inset 0 1px 0 var(--btn-hi), 0 0 18px -4px color-mix(in srgb,var(--a) 45%,transparent)}
body .prog .meta{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
body .parrow{margin-left:auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--muted);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .2s, color .2s, transform .2s}
body .parrow svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
body a.prog:hover .parrow,body a.prog:focus-visible .parrow{background:var(--a); color:var(--on-a); box-shadow:0 0 16px -2px color-mix(in srgb,var(--a) 60%,transparent); transform:translateX(2px)}
body .prog.off{opacity:1}
body .prog.off .pico,body .prog.off .t,body .prog.off .d{opacity:.45}
body:not(#v2) .pill.soon{background:transparent; border:1px dashed var(--line-2); color:var(--faint)}

/* ---------- "New" pill: the latest addition, in place of a subtitle ---------- */
body .newlist{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
body .newpill{display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 5px; border-radius:999px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink); font:500 14px/1.2 var(--v2-font); transition:border-color .2s, background .2s}
body .newpill .nb{background:var(--a); color:var(--on-a); border-radius:999px; padding:4px 9px; font:700 11px/1 var(--v2-font); letter-spacing:.06em; text-transform:uppercase; box-shadow:0 0 14px -2px color-mix(in srgb,var(--a) 55%,transparent)}
body .newpill svg{width:15px; height:15px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s, stroke .2s}
body .newpill:hover{border-color:color-mix(in srgb,var(--a) 45%,transparent); background:var(--surface-2); color:var(--heading)}
body .newpill:hover svg{transform:translateX(3px); stroke:var(--a)}

/* ---------- course catalog ---------- */
body .cathead{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px}
body .catfilters{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:8px}
body .chips{display:flex; flex-wrap:wrap; gap:8px}
body .chip{border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; padding:6px 13px; font:500 13px/1.2 var(--v2-font); cursor:pointer; transition:background .15s, color .15s, border-color .15s}
body .chip:hover{color:var(--ink); border-color:var(--line-2)}
body .chip.on{color:var(--a); border-color:color-mix(in srgb,var(--a) 45%,transparent); background:color-mix(in srgb,var(--a) 10%,transparent)}
body .catsearch{display:flex; align-items:center; gap:8px; min-width:min(260px,100%); padding:0 12px; height:36px; border-radius:9px; background:var(--well); border:1px solid var(--line)}
body .catsearch:focus-within{border-color:color-mix(in srgb,var(--a) 50%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 18%,transparent)}
body .catsearch svg{width:16px; height:16px; fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; flex:0 0 auto}
body .catsearch input{flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:400 14px/1 var(--v2-font)}
body .catsearch input::placeholder{color:var(--faint)}
body .catgroup{margin-top:34px}
body .catgroup h3{display:flex; align-items:center; gap:10px; margin:0 0 14px; font:600 13px/1 var(--v2-font); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
body .catgroup h3 span{font:600 11px/1 var(--v2-font); letter-spacing:0; color:var(--faint); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 7px}
body .catempty{margin-top:30px; color:var(--muted); display:flex; align-items:center; gap:12px}
/* Filter bar stays in reach while scrolling a long list. */
body .catbar{position:sticky; top:54px; z-index:20; margin:0 -14px; padding:12px 14px 10px; border-radius:14px;
  background:color-mix(in srgb,var(--ground) 78%,transparent); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px)}
body .catbar .catfilters{margin:0}
body .chip{display:inline-flex; align-items:center; gap:7px}
body .chip .n{font:600 11px/1 var(--v2-font); color:var(--faint); background:var(--surface-2); border-radius:999px; padding:2px 6px; min-width:18px; text-align:center}
body .chip.on .n{color:var(--on-a); background:var(--a)}
body .chip.none{opacity:.45}
body .catsearch kbd{font:600 11px/1 var(--v2-font); color:var(--faint); border:1px solid var(--line-2); border-radius:5px; padding:2px 6px}
body .catsearch .x{display:none; border:0; background:var(--surface-3); color:var(--muted); width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:14px; line-height:1; padding:0}
body .catsearch.has kbd{display:none}
body .catsearch.has .x{display:grid; place-items:center}
body .catsearch input::-webkit-search-cancel-button{display:none}
body .catsummary{margin:10px 0 0; font:400 13px/1.4 var(--v2-font); color:var(--muted); display:flex; align-items:center; gap:12px; min-height:18px}
body .catsummary b{color:var(--ink); font-weight:600}
body .linkish{border:0; background:none; padding:0; color:var(--a); font:500 13px/1 var(--v2-font); cursor:pointer}
body .linkish:hover{text-decoration:underline}
body mark{background:color-mix(in srgb,var(--a) 28%,transparent); color:inherit; border-radius:3px; padding:0 1px}
body [data-catalog].fresh .catgroup{animation:catin .28s ease both}
@keyframes catin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
body .catempty{display:block; line-height:1.9}
body .catempty[hidden]{display:none}
body .catempty .mbtn{margin-left:6px}
/* Desktop: search sits beside the chips so the floating bar stays short. */
body .catbar .catfilters{flex-wrap:nowrap; align-items:flex-start}
body .catbar .chips{flex:1 1 auto}
body .catbar .catsearch{flex:0 0 250px}
@media (prefers-reduced-motion:reduce){ body [data-catalog].fresh .catgroup{animation:none} }

/* Keep card width steady even when a group has one or two courses. */
body .catgroup .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:700px){
  body .catsearch{width:100%}
  body .catsearch kbd{display:none}
  body .catbar .catfilters{flex-direction:column; align-items:stretch}
  body .catbar .catsearch{flex:0 0 auto}
  body .catbar{top:50px; margin:0 -16px; padding:10px 16px 8px; border-radius:0}
  /* Phones: chips scroll sideways in one row instead of stacking. */
  body .chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  body .chips::-webkit-scrollbar{display:none}
  body .chip{flex:0 0 auto}
}

/* ---------- inner pages: program lists, sessions, guides ---------- */
body h3{font-family:var(--v2-head); font-weight:600; letter-spacing:-.015em; font-stretch:100%}
body h4{font-family:var(--v2-head); font-weight:600; letter-spacing:-.01em}
body .layout{gap:clamp(28px,4vw,56px)}
body main section{margin-bottom:clamp(40px,5vw,64px)}

/* Section list in the sidebar: a quiet panel, the current section marked in cyan. */
body .toc{top:72px; background:var(--surface); border:1px solid var(--line); border-radius:var(--v2-radius); padding:18px 16px}
body .toc h2{display:block; font:600 11px/1.4 var(--v2-font); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
body .toc ol{border-left:1px solid var(--line)}
body .toc li a{color:var(--muted); font-size:13.5px; border-left-width:2px}
body .toc li a:hover{color:var(--ink); border-left-color:var(--line-2)}
body .toc li a.on{color:var(--heading); border-left-color:var(--a); font-weight:600}

/* Session rows: dark grey boxes like the course cards. */
body .stack{gap:14px}
body:not(#v2) .row{background:var(--surface); border:1px solid var(--line); border-radius:var(--v2-radius); padding:18px 22px; box-shadow:none; transition:background .2s, border-color .2s, transform .2s}
body:not(#v2) a.row:hover{background:var(--surface-2); border-color:var(--line-2); transform:translateY(-1px); color:inherit}
body:not(#v2) a.row:hover .no,body:not(#v2) a.row:hover .d,body:not(#v2) a.row:hover .pill{color:inherit; border-color:var(--line)}
body:not(#v2) a.row:hover .no{color:var(--a)}
body:not(#v2) a.row:hover .d{color:var(--muted)}
body .row .no{font:600 20px/1 var(--v2-head); letter-spacing:-.02em; font-stretch:100%; color:var(--a)}
body .row .t{font:600 17px/1.3 var(--v2-head); letter-spacing:-.015em}
body .row .d{font-size:14px; line-height:1.5; color:var(--muted)}
body:not(#v2) .row.hi,body:not(#v2) a.row.hi:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--a) 9%,var(--surface)),var(--surface) 65%); border:1px solid color-mix(in srgb,var(--a) 28%,transparent)}
body:not(#v2) .row.pre,body:not(#v2) a.row.pre:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 11%,var(--surface)),var(--surface) 65%); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
body .row.pre .no{color:var(--warn)}
/* Instructor / Learner / Slides links become mac buttons. */
body:not(#v2) .row .go a{background:var(--btn); color:var(--btn-ink); border:1px solid var(--btn-edge); border-radius:8px; box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow); padding:6px 12px; font:500 13px/1 var(--v2-font); transition:filter .15s}
body:not(#v2) .row .go a:hover{filter:brightness(1.08); background:var(--btn); color:var(--btn-ink); border-color:var(--btn-edge)}
body:not(#v2) .row .go a:active{filter:brightness(.94)}

/* Callouts: tinted panels with a soft edge instead of a heavy left bar. */
body:not(#v2) .note,body:not(#v2) .aside,body:not(#v2) .answer,body:not(#v2) .reading{border-radius:14px; padding:18px 22px; box-shadow:none}
body:not(#v2) .note{background:color-mix(in srgb,var(--a) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--a) 22%,transparent)}
body:not(#v2) .aside{background:color-mix(in srgb,var(--warn) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)}
body:not(#v2) .answer{background:color-mix(in srgb,var(--ok) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)}
body:not(#v2) .reading{background:var(--surface); border:1px solid var(--line)}
body .note .tag,body .aside .tag,body .answer .tag,body .reading .tag{font:600 11px/1.6 var(--v2-font); letter-spacing:.08em}

/* Tables, figures, stat tiles, action cards, next-up links. */
body:not(#v2) table{background:var(--surface); border:1px solid var(--line); border-radius:14px; border-collapse:separate; border-spacing:0; overflow:hidden}
body:not(#v2) thead th{background:var(--surface-2); font:600 11.5px/1.4 var(--v2-font); letter-spacing:.06em; color:var(--muted)}
body:not(#v2) tbody tr:last-child td{border-bottom:0}
body:not(#v2) figure{background:var(--surface); border:1px solid var(--line); border-radius:var(--v2-radius); box-shadow:none}
body:not(#v2) .tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:none}
body .tile .v{font-family:var(--v2-head); font-stretch:100%; font-weight:600; letter-spacing:-.025em}
body:not(#v2) .actioncard{background:linear-gradient(180deg,color-mix(in srgb,var(--a) 8%,var(--surface)),var(--surface) 70%); border:1px solid color-mix(in srgb,var(--a) 32%,transparent); border-radius:var(--v2-radius); box-shadow:none}
body .actioncard h4{color:var(--heading)}
body:not(#v2) .nextup a{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:none; transition:background .2s, border-color .2s}
body:not(#v2) .nextup a:hover{background:var(--surface-2); border-color:var(--line-2)}
body .phase>h3 .ph{border-radius:999px; font:600 10.5px/1 var(--v2-font); letter-spacing:.08em; padding:5px 9px}
body code,body .mono{background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 5px}
body pre code{border:0; padding:0; background:none}
body:not(#v2) pre{background:var(--surface); border:1px solid var(--line); border-radius:14px}

/* Inter's tabular-number setting also widens hyphens ("Twenty - one"), so keep tabular
   figures to the places that line numbers up: tables, stats, counts. */
body{font-variant-numeric:normal}
body table,body .metabar,body .tile .v,body .chip .n,body .catgroup h3 span,body .row .no,body .catsummary{font-variant-numeric:tabular-nums}
@media (max-width:700px){
  /* One-line breadcrumb that trims from the end, so the top bar stays slim. */
  body .crumbs{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px}
  body .crumbs>*{display:inline}
  body .toc{padding:16px 14px}
  body .toc li a{padding-left:12px}
}

/* ---------- session cards: a course's sessions as a grid, grouped into parts ----------
   <section class="spart"><div class="spart-h"><span class="k">Part 1</span><h3>…</h3><p>…</p></div>
   <div class="scards"><article class="scard">…</article></div></section> */
.spart{margin:0 0 clamp(36px,4vw,52px)}
.spart-h{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 14px; margin:0 0 16px}
.spart-h .k{font:600 11px/1 var(--v2-font); letter-spacing:.08em; text-transform:uppercase; color:var(--a); border:1px solid color-mix(in srgb,var(--a) 35%,transparent); background:color-mix(in srgb,var(--a) 8%,transparent); border-radius:999px; padding:5px 9px}
.spart-h h3{margin:0; font-size:clamp(20px,2vw,24px)}
.spart-h p{grid-column:1/-1; margin:2px 0 0; color:var(--muted); font-size:15px}
.spart-h .k{justify-self:start}
.scards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.scard{position:relative; display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 24px 22px; transition:background .2s, border-color .2s, transform .2s}
.scard:hover{background:var(--surface-2); border-color:var(--line-2); transform:translateY(-2px)}
.scard::after{content:""; position:absolute; left:20px; right:20px; top:0; height:1px; opacity:0; transition:opacity .3s; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 80%,transparent),transparent)}
.scard:hover::after{opacity:1}
.scard .top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.scard .num{font:600 15px/1 var(--v2-head); letter-spacing:-.01em; color:var(--a); width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--surface-3),var(--surface-2)); box-shadow:inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--btn-hi)}
.scard .dom{font:500 11.5px/1.2 var(--v2-font); color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 10px; text-align:right}
.scard .dom b{color:var(--a); font-weight:600}
.scard h4{margin:4px 0 0; font:600 20px/1.2 var(--v2-head); letter-spacing:-.02em; color:var(--heading)}
.scard .d{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; flex:1 1 auto}
.scard .acts{display:flex; gap:8px; padding-top:6px}
.scard .acts a{flex:1 1 0; justify-content:center; text-decoration:none; padding:9px 12px; font-size:13.5px}
.scard .acts svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:700px){ .scards{grid-template-columns:1fr; gap:16px} .scard{padding:20px} }

/* Catalog: the "Select several" switch under the chips. */
body .catbar .chipcol{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px}
body .multi{display:inline-flex; align-items:center; gap:8px; width:max-content; font:500 13px/1 var(--v2-font); color:var(--muted); cursor:pointer; user-select:none}
body .multi input{appearance:none; -webkit-appearance:none; margin:0; width:16px; height:16px; border-radius:5px; border:1px solid var(--line-2); background:var(--well); display:grid; place-items:center; cursor:pointer}
body .multi input:checked{background:var(--a); border-color:var(--a)}
body .multi input:checked::after{content:""; width:8px; height:4px; border-left:2px solid var(--on-a); border-bottom:2px solid var(--on-a); transform:translateY(-1px) rotate(-45deg)}
body .multi input:focus-visible{outline:2px solid var(--a); outline-offset:2px}
body .multi:hover{color:var(--ink)}
/* "Select several" as its own pill at the end of the chip row; segmented control sits above the chips. */
body .catbar .chipcol>.filterbar{align-self:flex-start}
body .chips .multi{border:1px dashed var(--line-2); border-radius:999px; padding:5px 13px 5px 9px; background:transparent; font:500 13px/1.2 var(--v2-font)}
body .chips .multi:has(input:checked){border-style:solid; border-color:color-mix(in srgb,var(--a) 45%,transparent); color:var(--a); background:color-mix(in srgb,var(--a) 10%,transparent)}
body .cathead{margin-bottom:14px}
@media (max-width:700px){
  /* Phones: chips wrap onto several lines instead of scrolling sideways. */
  body .chips{flex-wrap:wrap; overflow:visible; margin:0; padding:0}
  body .chip{flex:0 1 auto}
}
@media (max-width:700px){ body .catbar{position:static} }

/* Homepage: big search under the headline, tighter gap to the course list, outlined filter box. */
body .hero-search{max-width:640px; height:54px; margin:22px 0 4px; padding:0 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
body .hero-search svg{width:20px; height:20px}
body .hero-search input{font-size:17px}
body .hero-search:focus-within{border-color:color-mix(in srgb,var(--a) 55%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 16%,transparent), 0 10px 30px -14px rgba(0,0,0,.5)}
body .hero-search+.newlist{margin-top:14px}
body .pagehead:has(.hero-search){padding-bottom:clamp(8px,1.5vw,16px)}
body:has(.hero-search) .layout{padding-top:clamp(8px,1.5vw,16px)}
body .catbar{border:1px solid var(--line)}
body .catbar .catfilters{justify-content:flex-start}
@media (max-width:700px){ body .hero-search{height:50px} body .catbar{margin:0; padding:12px; border-radius:14px} }