:root{
  --bg:#05060c; --bg-2:#0b0d18; --line:#1a1e33; --line-2:#262b47;
  --ink:#eef0ff; --ink-2:#a9aecf; --ink-3:#6b7095;
  --good:#39ff9a; --bad:#ff4d6d; --accent:#00e5ff;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.reveal-viewport{background:var(--bg);background-image:radial-gradient(1200px 700px at 70% 40%,rgba(30,40,110,.35),transparent 60%),radial-gradient(800px 500px at 10% 100%,rgba(90,0,120,.25),transparent 60%)}
.reveal{font-family:var(--font);font-size:26px;font-weight:300;color:var(--ink)}
.reveal .slides{text-align:left}
.reveal h1,.reveal h2,.reveal h3{font-family:var(--font);text-transform:none;letter-spacing:-.01em;color:var(--ink);font-weight:600;margin:0 0 .3em}
.reveal h1{font-size:2.6em;line-height:1.05}
.reveal h2{font-size:2.3em;line-height:1.05}
.reveal h3{font-size:1.15em}
.reveal p{margin:0 0 .5em;line-height:1.45}
.reveal ul{margin:0;padding-left:1.1em}
.reveal li{margin:.15em 0;line-height:1.35}
.reveal .muted{color:var(--ink-2)}
.reveal section{height:100%;box-sizing:border-box;padding:40px 60px}
.lay{height:100%;box-sizing:border-box}
.reveal .progress{color:var(--accent)}
.reveal .controls{color:var(--ink-3)}
.reveal .slide-number{background:transparent;color:var(--ink-3);font-family:var(--font)}
.reveal a{color:var(--accent)}
.mi{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}

/* eyebrow + solution tag */
.kicker{color:var(--ink-3);font-size:.6em;letter-spacing:.06em;margin-bottom:.4em}
.solution-tag{display:inline-flex;align-items:center;gap:.4em;font-size:.65em;color:var(--ink-2);margin-bottom:.3em}
.solution-tag i{width:.7em;height:.7em;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.solution-tag .scenario{margin-left:.35em;padding:.1em .55em;border-radius:6px;font-weight:600;color:var(--bg);background:var(--c);box-shadow:0 0 12px -2px var(--c)}

/* title */
.title-slide{display:flex;flex-direction:column;justify-content:center;gap:.4em}
.title-slide .big{font-size:4.6em;line-height:.95;font-weight:600}
.title-slide .big em{font-style:normal;color:var(--accent);text-shadow:0 0 30px rgba(0,229,255,.6)}
.title-slide .sub{font-size:1.1em;color:var(--ink-2);max-width:22em}

/* venn */
.venn-slide{display:grid;grid-template-rows:auto 1fr;height:100%}
.venn{width:100%;height:100%}
.venn .vc{fill-opacity:.16;stroke-width:2}
.venn text{font-family:var(--font);fill:var(--ink)}
.venn .vt{font-size:22px;font-weight:600}
.venn .vt.small{font-size:17px;font-weight:300;fill:var(--ink-2)}
.venn .vcore{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:1.5;stroke-dasharray:5 4;filter:drop-shadow(0 0 16px rgba(255,255,255,.55))}
.venn .vcenter{font-size:26px;font-weight:600;fill:#fff;text-shadow:0 0 18px rgba(255,255,255,.9)}
.venn .vt{fill:var(--ink-2)}
.venn .vx{font-size:16px;fill:var(--ink-3)}
.venn .vx b{font-weight:600;fill:var(--bad)}

/* outline */
.outline{display:flex;flex-direction:column;justify-content:center;height:100%}
.outline ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em}
.outline li{display:flex;align-items:center;gap:.7em;font-size:1.25em;color:var(--ink-3)}
.outline li .n{width:1.6em;height:1.6em;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:.6em;color:var(--ink-3);flex:none}
.outline li.done{color:var(--ink-2)}
.outline li.done .n{border-color:var(--ink-3);color:var(--ink-2)}
.outline li.active{color:var(--ink);font-weight:600;font-size:1.9em}
.outline li.active .n{background:var(--c);border-color:var(--c);color:var(--bg);box-shadow:0 0 22px var(--c)}
.outline .bar{height:3px;width:12em;background:var(--c);box-shadow:0 0 16px var(--c);border-radius:3px;margin:0 0 1.2em;transform-origin:left}
.outline li.active:has(.sub){align-items:flex-start}
.outline li.active:has(.sub) .n{margin-top:.25em}
.outline .sub{list-style:none;padding:0;margin:.3em 0 0;display:flex;flex-direction:column;gap:.3em;font-size:.5em;font-weight:300;color:var(--ink-2)}
.outline .sub li{font-size:1em;color:var(--ink-2);gap:.5em}
.outline .sub b{font-weight:600;font-size:.8em;color:var(--bg);background:var(--c);border-radius:5px;padding:.08em .5em;box-shadow:0 0 10px -2px var(--c)}

/* scoring legend */
.legend{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;height:100%}
.metrics{display:flex;flex-direction:column;gap:22px}
.metric{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.metric .ic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--mc);box-shadow:0 0 18px -6px var(--mc);font-size:30px}
.metric b{color:var(--mc);font-weight:600;display:block}
.metric span{color:var(--ink-2);font-size:.8em;line-height:1.35;display:block}

/* bars */
.bars{display:flex;flex-direction:column;gap:22px;width:100%}
.bar-row{display:grid;grid-template-columns:240px 1fr minmax(64px,max-content);gap:16px;align-items:center}
.bar-row label{color:var(--ink-2);font-size:.8em;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:.5em}
.bar-row label .ic{color:var(--mc);font-size:1.25em;display:inline-flex}
.bar-track{height:18px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line);position:relative;overflow:hidden}
.bar-fill{position:absolute;inset:0;width:0;border-radius:9px;background:var(--mc);box-shadow:0 0 18px var(--mc)}
.bar-track .ticks{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.35) calc(10% - 1px) 10%)}
.bar-val{font-weight:600;font-size:1.1em;color:var(--mc);font-variant-numeric:tabular-nums}
.bar-val small{color:var(--ink-3);font-weight:300;font-size:.6em}

/* score slide */
.score-slide{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;height:100%;align-items:center}
.score-slide .left{display:flex;flex-direction:column;gap:30px}
.score-slide h2{font-size:1.9em}

/* scatter */
.scatter{position:relative;width:100%;height:100%;min-height:540px;user-select:none}
.scatter svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.scatter svg.dragging{cursor:grabbing}
.scatter text{font-family:var(--font);fill:var(--ink);font-weight:400;pointer-events:none}
.scatter .tick{fill:var(--ink-3);font-size:11px}
.scatter .axis-title{font-size:13px;font-weight:600}
.scatter .lbl{font-size:13px;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.scatter-btns{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;opacity:0;transition:opacity .25s}
.scatter:hover .scatter-btns,.scatter-btns:focus-within{opacity:1}
.scatter-btns button{font:inherit;font-size:13px;padding:6px 12px;border-radius:8px;border:1px solid var(--line-2);background:rgba(5,6,12,.7);color:var(--ink-2);cursor:pointer}
.scatter-btns button:hover{color:var(--ink);border-color:var(--accent)}
.scatter-btns button[aria-pressed="true"]{color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,229,255,.35)}

/* graph */
.graph-slide{display:grid;grid-template-rows:auto 1fr;height:100%;gap:10px}
.graph{position:relative;width:100%;height:100%;min-height:520px}
.graph svg.edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.graph .cols{position:absolute;inset:0;display:grid;gap:44px;align-items:center}
.graph .col{display:flex;flex-direction:column;justify-content:center;gap:26px;min-width:0}
.gnode{position:relative;border:1px solid var(--line-2);border-radius:14px;background:rgba(10,12,22,.85);padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);transform-origin:center}
.gnode.src{border-color:rgba(57,255,154,.35)}
.gnode.tool{border-color:var(--gc,var(--accent));box-shadow:0 0 0 1px var(--gc,var(--accent)) inset,0 0 26px -10px var(--gc,var(--accent)),0 10px 30px rgba(0,0,0,.45)}
.gnode.hw{border-color:var(--ink-2);border-width:2px;background:rgba(20,22,36,.9)}
.gnode.optional{border-style:dashed}
.gnode.is-hidden{opacity:0;pointer-events:none}
.edge.is-hidden{opacity:0}
.gnode .badge{position:absolute;top:-10px;right:12px;font-size:.5em;letter-spacing:.06em;color:var(--ink-3);background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:1px 7px}
.gnode h4{margin:0 0 .2em;font-size:.72em;font-weight:600;color:var(--ink);letter-spacing:.01em}
.gnode.src h4{color:var(--good)}
.gnode ul{margin:0;padding-left:1em;font-size:.62em;color:var(--ink-2)}
.gnode li{margin:.05em 0;line-height:1.3;transition:color .3s}
.gnode li.hl{color:var(--bad);font-weight:600;text-shadow:0 0 14px rgba(255,77,109,.8);position:relative}
.gnode li.hl::marker{color:var(--bad)}
.gnode li.hl .hl-arrow{position:absolute;left:-5.6em;top:50%;transform:translateY(-50%);width:4.6em;height:1.6em;color:var(--bad);filter:drop-shadow(0 0 10px rgba(255,77,109,.95))}
.gnode li.hl .hl-arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gnode{overflow:visible}
.gnode .chips{display:flex;flex-direction:column;gap:6px;margin-top:6px;min-width:0}
.gnode .chips .chip{max-width:100%;white-space:normal;line-height:1.2}
.gnode .chips .chip>span:last-child{min-width:0}
.gnode.question{border-style:dashed;border-color:var(--ink-2);display:flex;align-items:center;justify-content:center;min-height:120px}
.gnode.question .q{font-size:2.6em;font-weight:600;color:var(--ink);text-shadow:0 0 24px rgba(255,255,255,.55)}
.gnode .reveal-box{display:none}
.gnode.revealed{border-style:solid;border-color:#fff;box-shadow:0 0 34px -6px rgba(255,255,255,.7)}
.gnode.revealed .q{display:none}
.gnode.revealed .reveal-box{display:block}
.gnode .hero{display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 6px;color:#fff;text-decoration:none;font-size:1.7em;font-weight:600;letter-spacing:-.01em;text-shadow:0 0 22px rgba(255,255,255,.55)}
.gnode .hero img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,229,255,.5))}
.gnode .hero:hover{color:#fff}
.edge{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.9}
.edge-head{fill:var(--ink-2)}

/* chips (logo + name, linked) */
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.66em;color:var(--ink);white-space:nowrap;text-decoration:none}
a.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip img{width:24px;height:24px;object-fit:contain;border-radius:5px}
.chip img.wide{width:auto;max-width:74px;height:18px}
.chip .mono{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--cc,var(--line-2));color:var(--bg);font-weight:600;font-size:.8em}
.chip.light{background:#e9ebf5;color:#0b0d18;border-color:#e9ebf5}
a.chip.light:hover{color:#0b0d18}
.chip.crown::after{content:'👑';margin-left:2px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}

/* pros / cons */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;margin-top:.4em}
.pc h3{display:flex;align-items:center;gap:.5em;color:var(--c)}
.pc h3 .arrow{width:1.2em;height:1.2em;border-radius:50%;border:2px solid var(--c);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 14px -2px var(--c)}
.pc h3 .arrow svg{width:.7em;height:.7em;fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pc li{color:var(--ink-2);font-size:.85em;margin:.35em 0}
.pc li b{color:var(--ink);font-weight:600}

/* tiles */
.group-title{font-size:.9em;font-weight:600;color:var(--tc);margin:.6em 0 0;display:flex;align-items:center;gap:.5em}
.group-title::before{content:'';width:.55em;height:.55em;border-radius:50%;background:var(--tc);box-shadow:0 0 10px var(--tc)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px}
.tile{border:1px solid var(--line-2);border-radius:16px;padding:22px;background:rgba(10,12,22,.7);border-color:color-mix(in srgb,var(--tc,var(--accent)) 45%,transparent)}
.tile h3{color:var(--tc,var(--accent));margin:0;font-size:1.05em}
.tile .big{font-size:2.4em;font-weight:600;color:var(--tc,var(--accent));line-height:1;margin-bottom:.35em}
.tile .ti{width:52px;height:52px;color:var(--tc,var(--accent));margin-bottom:.4em}
.tile .ti svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px currentColor)}

/* pre-render story slide */
.story-slide{display:grid;grid-template-rows:auto 1fr;height:100%;gap:6px}
.story{width:100%;height:100%;min-height:520px}
.story svg{width:100%;height:100%;display:block}
.story text{font-family:var(--font);fill:var(--ink-2)}
.story .st{opacity:0}
/* gear slide */
.gear-slide{display:grid;grid-template-rows:1fr;height:100%}
.rig{display:flex;align-items:center;justify-content:center;gap:34px;height:100%;padding-bottom:10px}
.gear{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-2);font-size:.7em}
.gear>span{white-space:nowrap}
.gear svg{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gear.hot svg{stroke:var(--accent);filter:drop-shadow(0 0 10px rgba(0,229,255,.55))}
.gear .chipsv{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.swap{position:relative;display:block}
.swap .l2{position:absolute;left:0;top:0;opacity:0}
.gear.stays .swap{text-align:center;width:100%}
.gear.stays .swap.chipswap{min-height:78px;width:380px}
.gear .chipswap .l1,.gear .chipswap .l2{justify-content:center;width:100%}
.gear.stays .swap .l1,.gear.stays .swap .l2{white-space:nowrap}
.gear.comes{opacity:0}

/* camera safe-zone guide (?guide) */
.cam-guide{position:fixed;top:3.7vh;right:2.1vw;width:30vh;height:30vh;border-radius:50%;border:2px dashed rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 24px rgba(0,229,255,.25);pointer-events:none;z-index:50;display:flex;align-items:center;justify-content:center}
.cam-guide span{font:600 12px/1 var(--font);letter-spacing:.08em;color:rgba(255,255,255,.55)}
/* end */
.end{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:.4em}
.end img{width:200px;height:200px;filter:drop-shadow(0 0 30px rgba(0,229,255,.4))}
@media print{.scatter-btns{display:none}}
/* Vizloom surprise header: pill and title swap from "?" to logo + name */
.viz-head .viz-pill{display:inline-flex;align-items:center;gap:.35em;min-width:1.6em;justify-content:center}
.viz-head .viz-pill img{height:1.05em;width:1.05em;object-fit:contain;border-radius:3px}
.viz-head .viz-pill .name{display:none;align-items:center;gap:.35em}
.viz-head.revealed .viz-pill .q{display:none}
.viz-head.revealed .viz-pill .name{display:inline-flex}
.swap-title{position:relative;min-height:1.3em}
.swap-title .t2{display:flex;align-items:center;gap:.4em;opacity:0}
.swap-title .t2 img{width:1.35em;height:1.35em;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,229,255,.5))}
.swap-title .t2 h2{margin:0}
.viz-head.revealed .swap-title .t2{opacity:1}
/* mystery chip: shows "?" until the Vizloom reveal */
.chip.mystery .q{font-weight:700;padding:0 .45em;color:var(--ink);text-shadow:0 0 10px rgba(255,255,255,.55)}
.chip.mystery:not(.revealed){border-style:dashed;border-color:var(--ink-2)}
.chip.mystery:not(.revealed) img,.chip.mystery:not(.revealed)>span:last-child{display:none}
.chip.mystery.revealed .q{display:none}
.chip.mystery.revealed{border-color:#fff;box-shadow:0 0 18px -4px rgba(255,255,255,.7)}
.chip.past{opacity:.45;border-style:dashed}
/* highlighted graph node (red, with the same arrow as highlighted items) */
.gnode.hl{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad) inset,0 0 28px -8px var(--bad),0 10px 30px rgba(0,0,0,.45)}
.gnode.hl h4{color:var(--bad)}
/* recap: the map alone, centered */
.map-slide{display:grid;place-items:center;height:100%}
.map-slide .scatter{width:1000px;max-width:100%;height:100%}
/* label above the outline list */
.outline .outline-title{font-size:.8em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .7em}
/* score given as a range: hatched stretch from the low to the high end */
.bar-range{position:absolute;top:0;bottom:0;width:0;border-radius:0 9px 9px 0;background:repeating-linear-gradient(135deg,var(--mc) 0 5px,transparent 5px 10px);opacity:.75;box-shadow:0 0 14px -2px var(--mc)}
.bar-val{white-space:nowrap}

/* "My experience": every app in a sparse cloud, loosely clustered around a small category label */
.cloud-slide{display:grid;place-items:center;height:100%}
.cloud{position:relative;width:1180px;height:670px;margin:0 auto}
.cloud .cl{position:absolute}
.cloud .cl-t{display:block;font-size:.5em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .55em .2em}
.cloud .chips-row{gap:17px 12px}
.cloud .chip{font-size:.62em;position:relative}
.cloud .chip:nth-child(2n){top:7px}
.cloud .chip:nth-child(3n){left:10px;top:-4px}
.cloud .chip.crown::after{content:none}
/* score bars without the numeric value (Vizloom: ranges are shown by the bars alone) */
.bars.no-vals .bar-val{display:none}
.bars.no-vals .bar-row{grid-template-columns:240px 1fr}

/* title and closing slides */
.title-lay{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center}
.title-main h1{font-size:3.4em;line-height:1.02;margin:0 0 .25em;text-shadow:0 0 40px rgba(0,229,255,.25)}
.byline{font-size:1.05em;color:var(--ink-2);margin:0}
.byline b{color:var(--ink);font-weight:600}
.reveal .title-lay .title-brand{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:.5em;color:var(--ink);text-decoration:none;font-weight:600;font-size:1.1em}
.reveal .title-brand img{width:2em;height:2em;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,229,255,.5))}
.reveal .title-lay .title-brand:hover{color:var(--accent)}
.closing-lay{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.1em}
.closing-lay h1{font-size:3.2em;margin:0}
.reveal .closing-lay .closing-cta{display:inline-flex;align-items:center;gap:.7em;color:var(--ink-2);text-decoration:none;font-size:1.25em;padding:.5em 1em;border-radius:16px;border:1px solid var(--line-2);background:rgba(10,12,22,.7);box-shadow:0 0 34px -10px rgba(255,255,255,.6)}
.closing-cta img{width:2.2em;height:2.2em;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,229,255,.5))}
.closing-cta b{color:var(--ink);font-weight:600}
.reveal .closing-lay .closing-cta:hover{border-color:var(--accent);color:var(--ink)}
/* "How does it do that?" */
.how-slide{grid-template-rows:auto 1fr auto}
.pills{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:6px}
.pills .pl-t{font-size:.55em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
.pill{font-size:.7em;padding:.35em .9em;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--ink)}
.depth-slide{display:grid;grid-template-rows:auto 1fr auto;height:100%;gap:10px}
.depth{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-content:center}
.depth-track{position:absolute;left:0;right:0;top:calc(50% - 2px);height:4px;border-radius:4px;background:linear-gradient(90deg,#39ff9a,#00e5ff,#b266ff,#ff8a3d);opacity:.55;box-shadow:0 0 18px rgba(0,229,255,.35)}
.depth-stop{position:relative;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;text-align:center;gap:14px;min-height:300px}
.depth-stop b{align-self:end;font-size:1.25em;font-weight:600;color:var(--c);text-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent)}
.depth-stop i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px var(--bg),0 0 22px var(--c)}
.depth-stop span{align-self:start;font-size:.78em;color:var(--ink-2);line-height:1.3;max-width:15em}
.afterflow{display:flex;align-items:center;justify-content:center;gap:26px;padding-bottom:4px}
.af-step{display:flex;align-items:center;gap:14px;border:1px solid var(--line-2);border-radius:14px;background:rgba(10,12,22,.8);padding:12px 18px}
.af-step b{display:block;font-size:.85em;font-weight:600}
.af-step small{display:block;font-size:.62em;color:var(--ink-2)}
.af-ic{width:40px;height:40px;color:var(--accent)}
.af-ic svg,.af-arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.af-arrow{width:48px;height:24px;color:var(--ink-3)}
/* ?transparent: no ground behind the slides, so an export keeps its alpha channel */
html.transparent,html.transparent body,html.transparent .reveal-viewport{background:transparent!important;background-image:none!important}

/* ===== ?light: the deck over a light background. Tokens flip, glows become shadows, boxes and pills get a solid-ish ground ===== */
html.light{--bg:#f5f6fa;--bg-2:#ffffff;--line:#c9cddb;--line-2:#a9afc6;--ink:#000000;--ink-2:#000000;--ink-3:#1a1a1a;--good:#0b9a58;--bad:#d8103f;--accent:#0079a8}
html.light .reveal-viewport{background:var(--bg);background-image:radial-gradient(1200px 700px at 70% 40%,rgba(120,140,220,.22),transparent 60%),radial-gradient(800px 500px at 10% 100%,rgba(170,120,220,.18),transparent 60%)}
html.light.transparent .reveal-viewport{background:transparent;background-image:none}
html.light .reveal h1,html.light .reveal h2,html.light .reveal h3{color:var(--ink)}
html.light .title-main h1,html.light .title-slide .big em{text-shadow:none}
html.light .kicker,html.light .solution-tag{color:var(--ink-2)}
/* boxes and pills: a translucent white ground with a visible edge */
html.light .chip{background:rgba(255,255,255,.82);border-color:rgba(20,22,40,.28);color:var(--ink)}
html.light .chip .mono{color:#fff}
html.light .gnode{background:rgba(255,255,255,.86);border-color:var(--line-2);box-shadow:0 8px 24px rgba(20,22,40,.12)}
html.light .gnode.src{border-color:rgba(11,154,88,.6)}
html.light .gnode.tool{box-shadow:0 0 0 1px var(--gc,var(--accent)) inset,0 8px 24px rgba(20,22,40,.12)}
html.light .gnode.hw{background:rgba(255,255,255,.92);border-color:var(--ink-2)}
html.light .gnode .badge{background:#fff}
html.light .gnode.question .q,html.light .gnode .hero,html.light .chip.mystery .q{text-shadow:none;color:var(--ink)}
html.light .gnode.revealed{border-color:var(--ink);box-shadow:0 8px 28px rgba(20,22,40,.2)}
html.light .gnode .hero img,html.light .swap-title .t2 img,html.light .title-brand img,html.light .closing-cta img{filter:none}
html.light .tile{background:rgba(255,255,255,.82);border-color:color-mix(in srgb,var(--tc,var(--accent)) 55%,transparent)}
html.light .tile .ti svg{filter:none}
html.light .metric .ic{background:rgba(255,255,255,.85);box-shadow:0 4px 14px -4px var(--mc)}
html.light .af-step,html.light .closing-cta,html.light .pill{background:rgba(255,255,255,.85);border-color:var(--line-2);box-shadow:none}
html.light .pill{color:var(--ink)}
html.light .bar-track{background:rgba(20,22,40,.10);border-color:var(--line-2)}
html.light .bar-track .ticks{background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.55) calc(10% - 1px) 10%)}
html.light .bar-fill{box-shadow:none}
/* graphs and diagrams */
html.light .edge-head{fill:#ff5a00}
html.light .gear svg{stroke:var(--ink);fill:rgba(255,255,255,.85)}
html.light .gear{color:var(--ink)}
html.light .gear.hot svg{stroke:var(--accent);filter:none}
html.light .venn .vcore{fill:rgba(255,255,255,.7);stroke:var(--ink);filter:none}
html.light .venn .vcenter{fill:var(--ink);text-shadow:none}
html.light .venn .vc{fill-opacity:.14}
html.light .scatter .lbl{stroke:#fff}
html.light .cloud .cl-t{color:var(--ink-2)}
html.light .outline li,html.light .outline li .n{color:var(--ink-3)}
html.light .outline li.done{color:var(--ink-2)}
html.light .outline li.active{color:var(--ink)}
html.light .outline li.active .n{color:#fff;box-shadow:none}
html.light .outline .bar{box-shadow:none}
html.light .solution-tag i,html.light .solution-tag .scenario,html.light .outline .sub b{box-shadow:none;color:#fff}
html.light .depth-stop b{text-shadow:none}
html.light .depth-stop i{box-shadow:0 0 0 5px var(--bg)}
html.light .depth-track{opacity:.8;box-shadow:none}
html.light .story-slide,html.light .cloud .chip{color:var(--ink)}
html.light .gnode li.hl{text-shadow:none}
html.light .reveal .progress{background:rgba(20,22,40,.12)}
html.light .reveal .progress span{background:var(--accent)}
/* white wordmark logos become black silhouettes on the light chips; light-background logos lose their special ground */
html.light .chip img.wide,html.light .chip img[src*="modul8"],html.light .chip img[src*="max-jitter"],html.light .chip img[src*="davinci"]{filter:brightness(0)}
html.light .chip.light{background:rgba(255,255,255,.82);border-color:rgba(20,22,40,.28)}
html.light .chip img[src*="virtualdj"]{filter:none}
html.light .chip img[src*="synesthesia"]{filter:brightness(0)}
html.light .reveal .closing-lay .closing-cta{background:rgba(255,255,255,.85);border-color:var(--line-2);color:var(--ink-2);box-shadow:0 8px 24px rgba(20,22,40,.12)}
/* light mode over a non-uniform background: free-standing text sits on a translucent white plate; SVG text gets a white halo */
html.light .reveal h1,html.light .reveal h2,html.light .kicker,html.light .byline,html.light .outline-title,html.light .metric b,html.light .metric span,html.light .depth-stop b,html.light .depth-stop span,html.light .cloud .cl-t,html.light .pc li,html.light .pills .pl-t{width:fit-content;max-width:100%;padding:.05em .3em;margin-left:-.3em;border-radius:.3em;background:rgba(255,255,255,.8)}
html.light .reveal h2{margin-bottom:.35em}
html.light .swap-title .t2 h2{margin-left:0}
html.light .solution-tag,html.light .outline li,html.light .bar-row label,html.light .bar-val,html.light .gear>span,html.light .pc h3,html.light .title-brand span{padding:.05em .3em;border-radius:.3em;background:rgba(255,255,255,.8)}
html.light .outline li.active{padding-right:.5em}
html.light .depth-stop span{max-width:15em}
html.light .venn text,html.light .story text,html.light [data-guess] text,html.light .scatter text{paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:5px;stroke-linejoin:round}
html.light .story .ef{stroke:none}
html.light .outline li,html.light .pc h3{width:fit-content}

/* intro slide */
.intro-lay{height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.1em}
.intro{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7em}
.intro li{display:flex;align-items:center;gap:.7em;font-size:1.2em}
.intro .ic{width:1.8em;height:1.8em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);font-weight:600;box-shadow:0 0 22px var(--accent);flex:none}
.intro img{width:1.8em;height:1.8em;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,229,255,.5));flex:none}
.intro small{display:block;font-size:.55em;color:var(--ink-2);letter-spacing:.04em}
.intro b{font-weight:600;color:var(--ink)}
html.light .intro .ic{box-shadow:none;color:#fff}
html.light .intro img{filter:none}
html.light .intro li>span:not(.ic){padding:.05em .4em;border-radius:.3em;background:rgba(255,255,255,.8)}

/* sound correlation example: a three-stop scale with an arrow, legend underneath */
.scale-lay{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4em}
.depth.scale{width:1000px;grid-template-columns:repeat(3,1fr)}
.depth.scale .depth-track{right:18px;background:linear-gradient(90deg,#ff4d6d,#ffe43c,#39ff9a)}
.depth.scale .depth-track::after{content:'';position:absolute;right:-18px;top:50%;transform:translateY(-50%);border-left:20px solid #39ff9a;border-top:11px solid transparent;border-bottom:11px solid transparent;filter:drop-shadow(0 0 10px rgba(57,255,154,.6))}
.depth.scale .depth-stop{min-height:170px}
.scale-legend{display:flex;align-items:center;gap:.5em;font-size:1.1em;font-weight:600;color:var(--ink-2)}
.scale-legend .ic{width:1.5em;height:1.5em;color:var(--good);display:inline-flex}
.scale-legend .ic svg{width:100%;height:100%}
html.light .depth.scale .depth-track{background:linear-gradient(90deg,#d8103f,#c98f00,#0b9a58)}
html.light .depth.scale .depth-track::after{border-left-color:#0b9a58;filter:none}
html.light .scale-legend{padding:.05em .4em;border-radius:.3em;background:rgba(255,255,255,.8);color:var(--ink)}
html.light .depth.scale .depth-stop span{display:none}
/* group titles sit on a pill so they read over a busy background */
.group-title{width:fit-content;padding:.3em .8em .3em .65em;border-radius:999px;background:rgba(10,12,22,.72);border:1px solid var(--line-2)}
html.light .group-title{background:rgba(255,255,255,.85);border-color:var(--line-2)}
/* five tiles in a row: tighter spacing and smaller titles */
.tiles.tight{gap:16px}
.tiles.tight .tile{padding:18px}
.tiles.tight .tile h3{font-size:.9em;line-height:1.15}
.tiles.tight .tile .ti,.tiles.tight .tile .ti svg{width:44px;height:44px}