@font-face{font-family:"Playfair Display";font-weight:400;font-display:swap;src:url(/fonts/playfair-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:700;font-display:swap;src:url(/fonts/playfair-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(/fonts/unbounded-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:700;font-display:swap;src:url(/fonts/unbounded-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-weight:400;font-display:swap;src:url(/fonts/oswald-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-weight:600;font-display:swap;src:url(/fonts/oswald-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Comfortaa";font-weight:500;font-display:swap;src:url(/fonts/comfortaa-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Comfortaa";font-weight:700;font-display:swap;src:url(/fonts/comfortaa-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-weight:400;font-display:swap;src:url(/fonts/exo-2-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-weight:600;font-display:swap;src:url(/fonts/exo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-weight:800;font-display:swap;src:url(/fonts/exo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:600;font-display:swap;src:url(/fonts/eb-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:400;font-display:swap;src:url(/fonts/alegreya-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:800;font-display:swap;src:url(/fonts/alegreya-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Bitter";font-weight:400;font-display:swap;src:url(/fonts/bitter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bitter";font-weight:600;font-display:swap;src:url(/fonts/bitter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bitter";font-weight:800;font-display:swap;src:url(/fonts/bitter-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:400;font-display:swap;src:url(/fonts/literata-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:700;font-display:swap;src:url(/fonts/literata-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(/fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:900;font-display:swap;src:url(/fonts/nunito-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:700;font-display:swap;src:url(/fonts/source-serif-4-latin-700-normal.woff2) format("woff2")}

/* ---------- generated slide designs: variables come from slide-design.js ---------- */
.slide{--k:calc(var(--s-fs,1) * var(--fit,1));position:absolute;inset:0;background:var(--s-bgimg,none),var(--s-bg);background-color:var(--s-bg);color:var(--s-ink);font-family:var(--s-body);overflow:hidden}
.slide .orn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.slide .content{position:absolute;inset:72px 96px 80px 96px;display:flex;flex-direction:column}
.slide .eyebrow{font-family:var(--s-body);font-size:calc(20px*var(--k));letter-spacing:.14em;text-transform:uppercase;color:var(--s-accent);font-weight:700;align-self:flex-start}
.slide h2{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(58px*var(--k));line-height:1.1;margin:12px 0 0;text-wrap:balance;text-transform:var(--s-tt);letter-spacing:var(--s-ls)}
.slide .foot{z-index:1;position:absolute;left:96px;right:96px;bottom:30px;display:flex;justify-content:space-between;font-size:16px;color:var(--s-muted);letter-spacing:.06em}
@media (prefers-reduced-motion:no-preference){.slide .content>*{animation:rise .5s ease both}.slide .content>*:nth-child(2){animation-delay:.06s}.slide .content>*:nth-child(3){animation-delay:.12s}.slide .content>*:nth-child(4){animation-delay:.18s}}
@keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}

/* text box sitting on a card over a patterned background */
.slide .content.card{background:var(--s-bg);border-radius:max(var(--s-r),16px);box-shadow:0 30px 70px -24px rgba(0,0,0,.45);padding:44px 56px 76px}
.slide .content.s-note{border-radius:3px;transform:rotate(-.5deg);box-shadow:0 18px 30px -12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.2)}
.slide .orn.top{z-index:2}
.slide[data-comp=neon] h2,.slide[data-comp=neon] .q,.slide[data-comp=neon] .hl{text-shadow:0 0 24px color-mix(in srgb,var(--s-accent) 55%,transparent)}
.slide[data-comp=chalk] h2,.slide[data-comp=chalk] .q,.slide[data-comp=chalk] .hl{text-shadow:0 0 1.5px currentColor}
/* arch window: the statement sits centred inside the arch */
.slide[data-comp=arch].s-hero .content{align-items:center;text-align:center;justify-content:center}
.slide[data-comp=arch].s-hero .content>*{align-self:center}
/* hero title treatments on the last word */
.slide[data-tstyle=accent] .lw{color:var(--s-accent)}
.slide[data-tstyle=wavy] .lw{text-decoration:underline wavy var(--s-accent);text-decoration-thickness:.07em;text-underline-offset:.18em;text-decoration-skip-ink:none}
.slide[data-tstyle=box] .lw{background:var(--s-accent);color:var(--s-onacc);padding:0 .18em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.slide[data-tstyle=outline] .lw{color:transparent;-webkit-text-stroke:.035em var(--s-accent)}
.slide[data-title=block].c-title h2 .lw{color:inherit;background:none;-webkit-text-stroke:0;text-decoration:none}
/* heading treatments */
.slide[data-head=bar] h2::before{content:"";display:block;width:72px;height:8px;border-radius:4px;background:var(--s-accent);margin-bottom:18px}
.slide[data-head=pill] .eyebrow{background:var(--s-accent);color:var(--s-onacc);padding:6px 16px;border-radius:999px;letter-spacing:.08em}
.slide[data-head=line] .eyebrow{display:flex;align-items:center;gap:14px}
.slide[data-head=line] .eyebrow::before{content:"";width:48px;height:2px;background:var(--s-accent)}
.slide[data-head=line] h2{padding-bottom:16px;border-bottom:2px solid var(--s-line)}

/* title */
.slide.c-title .content{justify-content:center}
.slide.c-title h2{font-size:calc(88px*var(--k));max-width:960px}
.slide.c-title .meta{margin-top:28px;font-size:calc(26px*var(--k));color:var(--s-muted)}
.slide[data-title=center].c-title .content{align-items:center;text-align:center}
.slide[data-title=center].c-title h2{max-width:1000px}
.slide[data-title=bottom].c-title .content{justify-content:flex-end}
.slide[data-title=block].c-title .content>h2{background:var(--s-accent);color:var(--s-onacc);padding:36px 44px;border-radius:var(--s-r);max-width:1000px}
.slide[data-title=block].c-title .content>h2::before{display:none}
/* centered layouts for single-statement slides */
.slide[data-align=center].c-question .content,.slide[data-align=center].c-highlight .content{align-items:center;text-align:center}
/* steps */
.slide .steps{margin-top:calc(40px*var(--k));display:grid;gap:calc(18px*var(--k));counter-reset:s}
.slide .steps div{display:grid;grid-template-columns:calc(72px*var(--k)) 1fr;align-items:center;font-size:calc(32px*var(--k))}
.slide .steps div::before{counter-increment:s;content:counter(s);font-family:var(--s-display);font-weight:800;font-size:calc(40px*var(--k));color:var(--s-accent)}
.slide[data-num=circle] .steps div::before,.slide[data-num=square] .steps div::before,.slide[data-num=outline] .steps div::before{display:grid;place-items:center;width:calc(52px*var(--k));height:calc(52px*var(--k));font-size:calc(26px*var(--k));background:var(--s-accent);color:var(--s-onacc);border-radius:50%}
.slide[data-num=square] .steps div::before{border-radius:calc(var(--s-r)/2)}
.slide[data-num=outline] .steps div::before{background:none;color:var(--s-accent);border:2px solid var(--s-accent)}
.slide .steps div span{border-bottom:1px solid var(--s-line);padding-bottom:calc(14px*var(--k))}
/* big question */
.slide.c-question .content{justify-content:center;align-items:flex-start}
.slide.c-question .q{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(72px*var(--k));line-height:1.12;max-width:1040px;text-wrap:balance}
.slide.c-question .q::before{content:"?";display:block;font-size:calc(140px*var(--k));line-height:.8;color:var(--s-accent);margin-bottom:10px}
/* key concept */
.slide .concept{margin-top:calc(44px*var(--k));display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.slide .concept .term{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(80px*var(--k));color:var(--s-accent);line-height:1;max-width:560px;overflow-wrap:normal;word-break:normal;hyphens:none;text-transform:var(--s-tt)}
.slide .concept .def{font-size:calc(32px*var(--k));line-height:1.4;border-left:3px solid var(--s-accent);padding-left:36px}
.slide[data-card=fill] .concept .def{border:0;background:var(--s-panel);padding:28px 34px;border-radius:var(--s-r)}
/* timeline */
.slide .timeline{position:relative;margin-top:calc(84px*var(--k));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:32px}
.slide .timeline::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--s-line)}
.slide .timeline .pt{position:relative;padding-top:64px}
.slide .timeline .pt::before{content:"";position:absolute;top:10px;left:0;width:24px;height:24px;border-radius:50%;background:var(--s-accent);box-shadow:0 0 0 6px var(--s-bg)}
.slide[data-num=square] .timeline .pt::before{border-radius:4px;transform:rotate(45deg)}
.slide .timeline .yr{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(52px*var(--k));color:var(--s-accent)}
.slide .timeline .tx{font-size:calc(25px*var(--k));line-height:1.35;margin-top:8px}
/* cluster */
.slide .cluster{position:relative;flex:1;margin-top:10px;min-height:0}
.slide .cluster svg{position:absolute;inset:0;width:100%;height:100%}
.slide .cluster .node{position:absolute;transform:translate(-50%,-50%);font-size:calc(26px*var(--k));padding:12px 22px;border:1.5px solid var(--s-line);border-radius:max(var(--s-r),12px);background:var(--s-bg);white-space:nowrap}
.slide .cluster .hub{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(32px*var(--k));background:var(--s-accent);color:var(--s-onacc);border-color:var(--s-accent)}
/* highlight */
.slide.c-highlight .content{justify-content:center}
.slide .hl{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(60px*var(--k));line-height:1.25;max-width:1060px;text-wrap:balance}
.slide .hl mark{background:none;color:var(--s-accent);box-shadow:inset 0 -0.18em 0 var(--s-mark)}
/* comparison */
.slide .compare{margin-top:calc(40px*var(--k));display:grid;grid-template-columns:1fr 80px 1fr;align-items:stretch}
.slide .compare .col{display:grid;gap:14px;align-content:start}
.slide[data-card=fill] .compare .col{background:var(--s-panel);padding:26px 30px;border-radius:var(--s-r)}
.slide[data-card=outline] .compare .col{border:2px solid var(--s-line);padding:26px 30px;border-radius:var(--s-r)}
.slide[data-card=side] .compare .col{border-left:6px solid var(--s-accent);padding-left:26px}
.slide .compare .col h3{font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(38px*var(--k));margin:0 0 6px;color:var(--s-accent);text-transform:var(--s-tt)}
.slide .compare .col p{margin:0;font-size:calc(26px*var(--k));line-height:1.35;padding-bottom:12px;border-bottom:1px solid var(--s-line)}
.slide .compare .col p:last-child{border-bottom:0}
.slide .compare .vs{display:grid;place-items:center;font-family:var(--s-display);font-size:calc(30px*var(--k));color:var(--s-muted)}
/* quote slot */
.slide .slot{margin-top:40px;flex:1;border:2px dashed var(--s-line);border-radius:max(var(--s-r),10px);display:grid;place-items:center;text-align:center;padding:40px}
.slide .slot b{display:block;font-family:var(--s-display);font-size:calc(44px*var(--k));color:var(--s-accent);margin-bottom:12px}
.slide .slot span{font-size:calc(26px*var(--k));color:var(--s-muted);max-width:760px;display:block;line-height:1.4}
/* table */
.slide .tbl{margin-top:calc(36px*var(--k));width:100%;border-collapse:collapse;font-size:calc(27px*var(--k))}
.slide .tbl th{text-align:left;font-size:calc(18px*var(--k));letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted);font-weight:700;padding:0 16px 12px 0;border-bottom:2px solid var(--s-accent)}
.slide .tbl td{padding:calc(16px*var(--k)) 16px calc(16px*var(--k)) 0;border-bottom:1px solid var(--s-line);vertical-align:top}
.slide .tbl td:first-child{font-family:var(--s-display);font-weight:var(--s-dw);color:var(--s-accent);width:240px}
.slide[data-card=fill] .tbl tbody tr:nth-child(odd){background:var(--s-panel)}
.slide[data-card=fill] .tbl td:first-child{padding-left:14px}
.slide .tbl3{font-size:calc(23px*var(--k))}
.slide .tbl3 td:first-child{width:auto}
/* summary */
.slide .sum{margin-top:calc(40px*var(--k));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:28px}
.slide .sum div{border-top:3px solid var(--s-accent);padding-top:18px;font-size:calc(27px*var(--k));line-height:1.35}
.slide[data-card=fill] .sum div{border:0;background:var(--s-panel);padding:26px;border-radius:var(--s-r)}
.slide[data-card=outline] .sum div{border:2px solid var(--s-line);padding:26px;border-radius:var(--s-r)}
.slide[data-card=side] .sum div{border:0;border-left:6px solid var(--s-accent);padding:4px 0 4px 22px}
.slide .sum div b{display:block;font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(34px*var(--k));margin-bottom:8px}
/* mini task */
.slide .task{margin-top:calc(36px*var(--k));display:grid;grid-template-columns:1.1fr .9fr;gap:48px}
.slide .task ol{margin:0;padding-left:34px;font-size:calc(27px*var(--k));line-height:1.45;display:grid;gap:10px}
.slide .task ol li::marker{color:var(--s-accent);font-weight:800}
.slide .task .box{background:var(--s-panel);border-radius:var(--s-r);padding:28px 30px;font-size:calc(24px*var(--k));line-height:1.4}
.slide[data-card=outline] .task .box{background:none;border:2px solid var(--s-accent)}
.slide .task .box b{display:block;font-size:calc(18px*var(--k));letter-spacing:.12em;text-transform:uppercase;color:var(--s-accent);margin-bottom:10px}

/* ---------- design gallery ---------- */
.dgal{margin-top:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--panel)}
.dgal-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.dgal-top .grow{flex:1}
.dgal-moods{display:flex;flex-wrap:wrap;gap:6px}
.dgal-moods button{font:inherit;font-size:.85rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer}
.dgal-moods button[aria-pressed=true]{background:var(--acc,var(--purple));border-color:transparent;color:#fff}
.dgal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.dthumb{all:unset;cursor:pointer;display:block;border-radius:10px;overflow:hidden;outline:2px solid transparent;outline-offset:2px;position:relative}
.dthumb:hover,.dthumb:focus-visible{outline-color:var(--acc,var(--purple))}
.dthumb[aria-current=true]{outline-color:var(--acc,var(--purple))}
.dthumb .frame{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.dthumb .frame>div{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0}
.dthumb .cap{display:block;font-size:.8rem;padding:6px 2px 2px;color:var(--muted)}
.dthumb .slide .content>*{animation:none}

/* ================= layout variety ================= */
.slide .hd{display:flex;flex-direction:column;align-items:flex-start}
/* heading placement */
.slide[data-hdr=center] .hd{align-items:center;text-align:center}
.slide[data-hdr=band]:not(.s-hero) .hd{margin:calc(var(--t)*-1) calc(var(--r)*-1) 8px calc(var(--l)*-1);padding:44px var(--r) 30px var(--l);background:var(--s-accent);color:var(--s-onacc)}
.slide[data-hdr=band]:not(.s-hero) .hd .eyebrow{color:var(--s-onacc);opacity:.85;background:none;padding:0}
.slide[data-hdr=band]:not(.s-hero) .hd h2{border-color:color-mix(in srgb,var(--s-onacc) 40%,transparent)}
.slide[data-hdr=band]:not(.s-hero) .hd h2::before{background:var(--s-onacc)}
.slide[data-hdr=side]:is(.c-steps,.c-concept,.c-summary,.c-task,.c-comparison) .content{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);column-gap:56px;align-content:center;align-items:center}
.slide[data-hdr=side]:is(.c-steps,.c-concept,.c-summary,.c-task,.c-comparison) .content>:not(.hd){margin-top:0}
.slide[data-hdr=side]:is(.c-steps,.c-concept,.c-summary,.c-task,.c-comparison) .hd h2{font-size:calc(50px*var(--k))}
.slide[data-hdr=side].c-concept .concept,.slide[data-hdr=side].c-summary .sum,.slide[data-hdr=side].c-task .task,.slide[data-hdr=side].c-comparison .compare{grid-template-columns:1fr;grid-auto-flow:row}
.slide[data-hdr=side].c-comparison .compare .vs{padding:8px 0}

/* steps */
.slide[data-v=tiles] .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.slide[data-v=tiles] .steps div,.slide[data-v=row] .steps div,.slide[data-v=stairs] .steps div{background:var(--s-panel);border-radius:max(var(--s-r),10px);padding:22px 24px;font-size:calc(27px*var(--k))}
.slide[data-v=tiles] .steps div span,.slide[data-v=row] .steps div span,.slide[data-v=stairs] .steps div span{border:0;padding:0}
.slide[data-v=row] .steps{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:26px;align-items:stretch;margin-top:auto;margin-bottom:auto}
.slide[data-v=row] .steps div{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:14px;position:relative;padding:28px 24px;border-top:6px solid var(--s-accent)}
.slide[data-v=row] .steps div:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;border:9px solid transparent;border-left:12px solid var(--s-accent)}
.slide[data-v=row] .steps div::before{font-size:calc(54px*var(--k))}
.slide[data-v=stairs] .steps{gap:12px}
.slide[data-v=stairs] .steps div{border-left:8px solid var(--s-accent);padding:14px 22px}
.slide[data-v=stairs] .steps div:nth-child(2){margin-left:7%}.slide[data-v=stairs] .steps div:nth-child(3){margin-left:14%}
.slide[data-v=stairs] .steps div:nth-child(4){margin-left:21%}.slide[data-v=stairs] .steps div:nth-child(5){margin-left:28%}.slide[data-v=stairs] .steps div:nth-child(6){margin-left:35%}
/* concept */
.slide[data-v=center] .concept{grid-template-columns:1fr;justify-items:center;text-align:center;gap:28px;margin-top:auto;margin-bottom:auto}
.slide[data-v=center] .concept .term{font-size:calc(96px*var(--k));max-width:none}
.slide[data-v=center] .concept .def{border:0;padding:24px 0 0;border-top:3px solid var(--s-accent);max-width:860px}
.slide[data-v=block] .concept{align-items:stretch;gap:0;flex:1;margin-bottom:10px}
.slide[data-v=block] .concept .term{background:var(--s-accent);color:var(--s-onacc);display:grid;place-items:center;padding:40px 48px;border-radius:var(--s-r) 0 0 var(--s-r);text-align:center}
.slide[data-v=block] .concept .def{border:0;background:var(--s-panel);padding:40px 48px;border-radius:0 var(--s-r) var(--s-r) 0;display:grid;align-items:center}
/* comparison */
.slide[data-v=cards] .compare .col{background:var(--s-panel);padding:0 0 22px;border-radius:var(--s-r);overflow:hidden;border:0}
.slide[data-v=cards] .compare .col h3{background:var(--s-accent);color:var(--s-onacc);padding:18px 28px;margin:0 0 8px}
.slide[data-v=cards] .compare .col p{padding:0 28px 12px}
.slide[data-v=vs] .compare{grid-template-columns:1fr 120px 1fr}
.slide[data-v=vs] .compare .vs{align-self:center;justify-self:center;width:96px;height:96px;border-radius:50%;background:var(--s-accent);color:var(--s-onacc);font-weight:800;font-size:calc(32px*var(--k));text-transform:uppercase}
.slide[data-v=vs] .compare .col:last-child{text-align:right}
.slide[data-v=vs] .compare .col h3{font-size:calc(48px*var(--k))}
/* timeline */
.slide[data-v=v] .timeline{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:18px;margin-top:calc(34px*var(--k))}
.slide[data-v=v] .timeline::before{left:11px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
.slide[data-v=v] .timeline .pt{padding:0 0 0 56px;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:26px;align-items:baseline}
.slide[data-v=v] .timeline .pt::before{top:calc(50% - 12px)}
.slide[data-v=v] .timeline .yr{font-size:calc(40px*var(--k))}
.slide[data-v=v] .timeline .tx{margin:0}
.slide[data-v=cards] .timeline{margin-top:calc(44px*var(--k));gap:22px}
.slide[data-v=cards] .timeline::before,.slide[data-v=cards] .timeline .pt::before{display:none}
.slide[data-v=cards] .timeline .pt{padding:30px 28px;background:var(--s-panel);border-radius:var(--s-r);border-bottom:6px solid var(--s-accent)}
.slide[data-v=cards] .timeline .yr{font-size:calc(64px*var(--k))}
/* summary */
.slide .sum{counter-reset:c}
.slide[data-v=list] .sum{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
.slide[data-v=list] .sum div{border:0;border-bottom:1px solid var(--s-line);padding:18px 0;display:grid;grid-template-columns:90px 1fr;column-gap:10px;background:none;border-radius:0}
.slide[data-v=list] .sum div::before{counter-increment:c;content:counter(c,decimal-leading-zero);grid-row:span 2;font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(46px*var(--k));color:var(--s-accent);line-height:1}
.slide[data-v=list] .sum div b{margin-bottom:2px}
.slide[data-v=circles] .sum div{border:0;background:none;padding:0;text-align:center}
.slide[data-v=circles] .sum div::before{counter-increment:c;content:counter(c);display:grid;place-items:center;width:calc(96px*var(--k));height:calc(96px*var(--k));margin:0 auto 18px;border-radius:50%;background:var(--s-accent);color:var(--s-onacc);font-family:var(--s-display);font-weight:var(--s-dw);font-size:calc(44px*var(--k))}
/* table */
.slide[data-v=zebra] .tbl tbody tr:nth-child(odd){background:var(--s-panel)}
.slide[data-v=zebra] .tbl td:first-child,.slide[data-v=zebra] .tbl th:first-child{padding-left:16px}
.slide[data-v=zebra] .tbl td{border-bottom:0}
.slide[data-v=rows] .tbl thead{display:none}
.slide[data-v=rows] .tbl,.slide[data-v=rows] .tbl tbody{display:grid;gap:12px}
.slide[data-v=rows] .tbl tr{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:minmax(180px,.8fr);align-items:center;background:var(--s-panel);border-radius:max(var(--s-r),8px);padding:14px 24px;border-left:6px solid var(--s-accent)}
.slide[data-v=rows] .tbl td{border:0;padding:0 16px 0 0}
/* task */
.slide[data-v=stack] .task{grid-template-columns:1fr;gap:22px}
.slide[data-v=stack] .task ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0;list-style-position:inside}
.slide[data-v=stack] .task ol li{background:var(--s-panel);border-radius:max(var(--s-r),8px);padding:16px 20px;font-size:calc(25px*var(--k))}
.slide[data-v=stack] .task .box{background:none;border:0;border-left:6px solid var(--s-accent);border-radius:0;padding:4px 0 4px 24px}
/* cluster */
.slide[data-v=tree] .cluster svg,.slide[data-v=bubbles] .cluster svg{display:none}
.slide[data-v=tree] .cluster{display:grid;grid-template-columns:auto 1fr;column-gap:90px;row-gap:14px;align-content:center;align-items:center;margin-top:24px}
.slide[data-v=tree] .cluster .node{position:relative!important;left:auto!important;top:auto!important;transform:none!important;justify-self:start;grid-column:2}
.slide[data-v=tree] .cluster .hub{grid-column:1;grid-row:1/span 8;align-self:center;padding:22px 34px}
.slide[data-v=tree] .cluster .node:not(.hub)::before{content:"";position:absolute;right:100%;top:50%;width:70px;height:2px;background:var(--s-accent);opacity:.6}
.slide[data-v=bubbles] .cluster{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:16px 18px}
.slide[data-v=bubbles] .cluster .node{position:static!important;transform:none!important;background:var(--s-panel);border:0;padding:16px 28px;border-radius:999px;font-size:calc(28px*var(--k))}
.slide[data-v=bubbles] .cluster .hub{flex:0 0 100%;order:-1;background:none;color:var(--s-accent);text-align:center;font-size:calc(64px*var(--k));padding:0 0 10px}
.slide[data-v=bubbles] .cluster .node:nth-child(even):not(.hub){background:var(--s-accent);color:var(--s-onacc)}
/* question */
.slide.c-question .q{position:relative}
.slide[data-v=mark] .q::before{position:absolute;right:-40px;top:50%;transform:translateY(-50%);font-size:calc(560px*var(--k));opacity:.14;margin:0;z-index:-1}
.slide[data-v=mark].c-question .content{isolation:isolate}
.slide[data-v=side] .q{display:grid;grid-template-columns:auto 1fr;gap:52px;align-items:center}
.slide[data-v=side] .q::before{margin:0;background:var(--s-accent);color:var(--s-onacc);border-radius:var(--s-r);padding:30px 54px;font-size:calc(180px*var(--k));line-height:1}
/* highlight */
.slide[data-v=quote] .hl{border-left:8px solid var(--s-accent);padding-left:44px}
.slide[data-v=quote] .hl::before{content:"“";display:block;font-size:calc(180px*var(--k));line-height:.55;color:var(--s-accent);margin-bottom:6px}

/* ---------- covers (lesson cards, live preview) ---------- */
.sd-cover{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;container-type:inline-size}
.sd-cover>.sd-in{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0}
.sd-cover .slide .content>*{animation:none}

/* ---------- slide motion ---------- */
.viewport .sprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12);z-index:3;pointer-events:none}
.viewport .sprog i{display:block;height:100%;width:0;background:var(--s-accent,#7253E0);transition:width .45s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){
  .slide.in-r{animation:sIn-r .5s cubic-bezier(.2,.8,.2,1)}
  .slide.in-l{animation:sIn-l .5s cubic-bezier(.2,.8,.2,1)}
  .slide.in-fade{animation:sFade .6s ease}
  .slide.in-r .orn,.slide.in-l .orn,.slide.in-fade .orn{animation:ornIn .9s cubic-bezier(.2,.8,.2,1)}
  @keyframes sIn-r{from{opacity:.2;transform:translateX(60px)}to{opacity:1;transform:none}}
  @keyframes sIn-l{from{opacity:.2;transform:translateX(-60px)}to{opacity:1;transform:none}}
  @keyframes sFade{from{opacity:0;filter:blur(6px);transform:scale(1.02)}to{opacity:1;filter:none;transform:none}}
  @keyframes ornIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
  /* the key words of a statement land a beat later */
  .slide .lw{display:inline-block;animation:lwIn .6s cubic-bezier(.3,1.5,.5,1) .25s both}
  @keyframes lwIn{from{opacity:0;transform:translateY(.3em) scale(.9)}to{opacity:1;transform:none}}
  .slide .hl mark{animation:markIn .8s ease .3s both}
  @keyframes markIn{from{box-shadow:inset 0 0 0 var(--s-mark)}to{box-shadow:inset 0 -0.18em 0 var(--s-mark)}}
  .slide .steps>div,.slide .sum>div,.slide .timeline .pt,.slide .tbl tbody tr,.slide .cluster .node:not(.hub),.slide .task ol li{animation:itemIn .5s cubic-bezier(.2,.8,.2,1) both}
  .slide .steps>div:nth-child(2),.slide .sum>div:nth-child(2),.slide .timeline .pt:nth-child(2),.slide .tbl tbody tr:nth-child(2),.slide .cluster .node:nth-of-type(3),.slide .task ol li:nth-child(2){animation-delay:.12s}
  .slide .steps>div:nth-child(3),.slide .sum>div:nth-child(3),.slide .timeline .pt:nth-child(3),.slide .tbl tbody tr:nth-child(3),.slide .cluster .node:nth-of-type(4),.slide .task ol li:nth-child(3){animation-delay:.2s}
  .slide .steps>div:nth-child(4),.slide .timeline .pt:nth-child(4),.slide .tbl tbody tr:nth-child(4),.slide .cluster .node:nth-of-type(5),.slide .task ol li:nth-child(4){animation-delay:.28s}
  .slide .steps>div:nth-child(5),.slide .tbl tbody tr:nth-child(5),.slide .cluster .node:nth-of-type(6),.slide .task ol li:nth-child(5){animation-delay:.36s}
  .slide .tbl tbody tr:nth-child(6),.slide .cluster .node:nth-of-type(7){animation-delay:.44s}
  @keyframes itemIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .slide .cluster .node:not(.hub){animation-name:nodeIn}
  @keyframes nodeIn{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%)}}
  .slide .cluster .hub{animation:hubIn .5s cubic-bezier(.3,1.6,.5,1) both}
  @keyframes hubIn{from{transform:translate(-50%,-50%) scale(.4)}to{transform:translate(-50%,-50%)}}
  .slide .cluster svg line{stroke-dasharray:500;stroke-dashoffset:500;animation:draw .8s ease .15s forwards}
  .slide .timeline::before{transform-origin:left;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
  @keyframes grow{from{transform:scaleX(0)}to{transform:none}}
  @keyframes draw{to{stroke-dashoffset:0}}
  .slide.c-question .q::before{animation:qBounce 1s cubic-bezier(.3,1.6,.5,1) both}
  @keyframes qBounce{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:none}}
  /* covers and thumbnails stay still */
  .sd-cover .slide *,.dthumb .slide *{animation:none!important}
  .sd-cover .slide .cluster svg line,.dthumb .slide .cluster svg line{stroke-dashoffset:0}
}

/* ---------- pictures on slides ---------- */
.slide .s-pic{position:absolute;z-index:1;border-radius:max(var(--s-r),14px);overflow:hidden;box-shadow:0 26px 50px -24px rgba(0,0,0,.55);background:var(--s-panel)}
.slide .s-pic img{width:100%;height:100%;object-fit:cover;display:block}
.slide .s-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .s-empty{display:grid;place-items:center;font-size:120px;background:var(--s-panel)}
.slide .s-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78))}
.slide.c-image .content{justify-content:flex-end;color:#fff}
.slide.c-image h2{color:#fff;font-size:calc(60px*var(--k));text-shadow:0 2px 20px rgba(0,0,0,.4)}
.slide.c-image .cap{font-size:calc(26px*var(--k));line-height:1.4;margin-top:12px;max-width:900px;color:rgba(255,255,255,.88)}
.slide.has-pic .concept{grid-template-columns:minmax(0,1fr);gap:24px}
.slide.has-pic .concept .term{max-width:none}
.slide.has-pic .sum{grid-auto-flow:row}
.slide.has-pic .task{grid-template-columns:minmax(0,1fr);gap:20px}
@media (prefers-reduced-motion:no-preference){
  .slide.in-r .s-pic,.slide.in-l .s-pic{animation:picIn .7s cubic-bezier(.2,.8,.2,1) .1s both}
  .slide.c-image.in-r .s-photo,.slide.c-image.in-l .s-photo{animation:kb 9s ease-out both}
  @keyframes picIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes kb{from{transform:scale(1.08)}to{transform:none}}
  .sd-cover .slide .s-pic,.dthumb .slide .s-pic,.sd-cover .slide .s-photo,.dthumb .slide .s-photo{animation:none!important}
}