/* fi-vision app. Visual language from tso-startup (template.html): Fira Sans, Congress Blue, cyan accents,
   900 uppercase headlines, 1280 x 720 canvas scaled to the window. No external requests. */
@font-face{font-family:"Fira Sans";font-weight:300;font-style:normal;font-display:swap;src:url(/theme/fonts/FiraSans-300.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/theme/fonts/FiraSans-400.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/theme/fonts/FiraSans-600.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/theme/fonts/FiraSans-700.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:900;font-style:normal;font-display:swap;src:url(/theme/fonts/FiraSans-900.woff2) format("woff2")}
@font-face{font-family:"Fira Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/theme/fonts/FiraMono-400.woff2) format("woff2")}

:root{--blue:#004388;--cyan:#00A6E2;--ink:#111418;--grey:#6B7785;--pale:#F2F6FA;--line:#DCE3EA;--red:#C8102E;--green:#12795A;
  --ease:cubic-bezier(.16,1,.3,1);--m:120px;--chrome:#0b0f14;--chrome2:#131a22;--chrome3:#1b2430;--chrome-line:#27323f;--chrome-text:#dbe6f2;--drawer:420px}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;font-family:"Fira Sans",Arial,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}
body{min-height:100vh;overflow-x:hidden}
body[data-view=present]{background:#000}
button,input,select{font-family:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:4px;text-transform:uppercase;font-weight:700;color:var(--grey);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.i.f{fill:currentColor;stroke:none}

/* ---------------------------------------------------------------- buttons (chrome) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:3px;border:1px solid var(--chrome-line);background:transparent;color:inherit;font-size:13px;font-weight:600;letter-spacing:.2px;text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1;position:relative}
.btn:hover{background:rgba(255,255,255,.07)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn.primary:hover{background:#0095cc}
.btn.icon{width:36px;padding:0}
.btn[aria-disabled=true]{opacity:.35;pointer-events:none}
.btn .badge{min-width:18px;height:18px;border-radius:9px;background:var(--cyan);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.btn.primary .badge{background:#fff;color:var(--cyan)}
.light .btn{border-color:var(--line);color:var(--ink);background:#fff}
.light .btn:hover{background:var(--pale)}
.light .btn.primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn.big{height:52px;padding:0 26px;font-size:15px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.btn.big svg.i{width:20px;height:20px}
.btn .sl{display:none}
.acts{display:contents}
.hbar .acts{display:flex;gap:8px;flex-wrap:nowrap}

.pager{display:inline-flex;align-items:center;gap:4px}
.count{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:62px;text-align:center;color:#fff}
.stagewrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;position:relative}
.frame{position:relative;flex:none;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.frame>.deck,.thumb>.deck{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#fff;color:var(--ink)}
.rotate{display:none;text-align:center;font-size:12px;color:var(--grey);padding:0 16px 6px;margin:0}
@media (orientation:portrait) and (max-width:699px){.present .rotate{display:block;position:absolute;left:0;right:0;bottom:12px;color:var(--chrome-text)}}
body.drawer-open .present{right:var(--drawer)}
@media (max-width:900px){
  body.drawer-open .present{right:0}
}

.thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.thumb .deck *{animation:none!important;transition:none!important}
.thumb .deck{pointer-events:none}

/* ---------------------------------------------------------------- present */
.present{position:fixed;inset:0;display:flex;flex-direction:column;background:#000;transition:right .3s var(--ease)}
.present .stagewrap{padding:0}
.present .frame{box-shadow:none}
.notes{flex:none;max-height:34vh;overflow:auto;background:#111;color:var(--chrome-text);border-top:3px solid var(--cyan);padding:14px 24px 18px;font-size:15px;line-height:1.5}
.notes h2{margin:0 0 6px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);font-weight:700}
.notes p{margin:0 0 12px;white-space:pre-line}
.notes ul{margin:0 0 12px;padding:0;list-style:none}
.notes li{margin:2px 0}
.notes p.snote{color:#9fb0c2;font-size:13px;font-style:italic;margin-top:-6px}
.notes li i{font-style:normal;color:var(--grey);font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-left:6px}
.navcue{position:absolute;top:0;bottom:0;width:150px;pointer-events:none;opacity:0;transition:opacity .25s;display:flex;align-items:center;justify-content:center;z-index:50}
.navcue.l{left:0;background:linear-gradient(90deg,rgba(0,26,54,.3),rgba(0,26,54,0))}
.navcue.r{right:0;background:linear-gradient(270deg,rgba(0,26,54,.3),rgba(0,26,54,0))}
/* the edge arrow on every slide: a plain chevron (no ring, disc or glow around it) */
.navcue .chev{width:36px;height:72px;overflow:visible;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
/* the click target is the whole half; the cue is faint over the slide and full near the edge */
.deck.cue-l .navcue.l,.deck.cue-r .navcue.r{opacity:.32}
.deck.cue-l.cue-e .navcue.l,.deck.cue-r.cue-e .navcue.r{opacity:1}
.deck.cue-e{cursor:pointer}
/* every slide, once Julian has finished talking: the same chevron turns red and pulses gently (one pulse
   per 1.5 s) until the visitor moves on; reduced motion: a static red chevron */
.deck.go .navcue.r{opacity:1;background:none}
.deck.go .navcue.r .chev{stroke:#E4002B;animation:gopulse 1.5s ease-in-out infinite;will-change:transform,opacity}
@keyframes gopulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.7}}
@media (prefers-reduced-motion:reduce){.deck.go .navcue.r .chev{animation:none}}
/* the pager shows no arrow where there is nowhere to go (first and last slide) */
.pager .btn[aria-disabled=true]{visibility:hidden}

/* presentation bars: hidden off screen, slide in on hover (top edge, bottom edge) or a tap */
.ptop{position:absolute;left:0;right:0;top:0;z-index:70;display:flex;align-items:center;gap:8px;padding:9px 14px;min-height:56px;background:rgba(11,15,20,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--chrome-text);border-bottom:1px solid var(--chrome-line);transform:translateY(-100%);visibility:hidden;transition:transform .32s var(--ease),visibility 0s .32s}
.ptop>*{flex:none}
.ptop .grow{flex:1 1 0}
.ptop .pname{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;margin-left:6px}
.ptop .who{color:var(--chrome-text);margin:0 6px}
.present.show-top .ptop,.ptop:has(:focus-visible){transform:none;visibility:visible;transition:transform .32s var(--ease)}
.pstrip{position:absolute;left:0;right:0;bottom:0;z-index:70;background:rgba(11,15,20,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--chrome-line);transform:translateY(100%);visibility:hidden;transition:transform .34s var(--ease),visibility 0s .34s}
.present.show-strip .pstrip,.pstrip:has(:focus-visible){transform:none;visibility:visible;transition:transform .34s var(--ease)}
.strack{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;padding:10px 16px 14px;scrollbar-width:thin;scrollbar-color:var(--chrome-line) transparent;overscroll-behavior-x:contain}
.sgroup{flex:none;display:flex;flex-direction:column;gap:7px}
.sglabel{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--grey);white-space:nowrap;height:12px;line-height:12px}
.sgrow{display:flex;gap:8px}
.stile{flex:none;position:relative;display:block;width:176px;text-decoration:none;color:#fff;outline-offset:3px}
.stile .thumb{width:176px;box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:.78;transition:opacity .2s,outline-color .2s;outline:2px solid transparent;outline-offset:2px}
.stile:hover .thumb{opacity:1;outline-color:var(--grey)}
.stile.on .thumb{opacity:1;outline:3px solid var(--cyan);outline-offset:2px}
.stile .sn{position:absolute;left:5px;bottom:5px;font-size:10px;font-weight:700;letter-spacing:1px;background:rgba(0,0,0,.62);color:#fff;padding:2px 5px;border-radius:2px;font-variant-numeric:tabular-nums}
.stile.on .sn{background:var(--cyan)}
@media (max-width:900px){.ptop .lbl,.ptop .pname{display:none}.ptop .sl{display:inline}}
@media (max-width:640px){.ptop{gap:6px;padding:6px 8px;flex-wrap:wrap}.ptop .acts .btn .sl{display:none}.ptop .acts .btn{width:36px;padding:0}.ptop .acts .btn[data-act=drawer]{width:auto;padding:0 10px}.ptop .who .wn{max-width:7em}
  .stile,.stile .thumb{width:132px}}
@media (max-height:520px){.ptop{min-height:46px;padding-top:5px;padding-bottom:5px}.strack{padding:6px 10px 8px;gap:14px}.sgroup{gap:4px}.stile,.stile .thumb{width:112px}.stile .sn{font-size:9px}}

/* narration marks: the item the narration names lights up (cyan, slightly larger), then settles back */
[data-item]{transition:color .35s var(--ease),transform .45s var(--ease),background-color .35s,box-shadow .35s,border-color .35s}
.b-bullets li[data-item],.clink{transform-origin:0 50%}
.b-bullets li.hl,.clink.hl{color:var(--cyan);transform:scale(1.045)}
.b-bullets li.hl:before,.cli:has(.clink.hl):before{background:var(--cyan);transform:scale(1.2)}
.b-bullets li:before{transition:background-color .35s,transform .35s}
.tone-dark .b-bullets li.hl,.tone-dark .clink.hl,.blue .b-bullets li.hl{color:#5fd3ff}
.card.hl{transform:scale(1.03);border-top-color:var(--cyan);box-shadow:0 14px 36px rgba(0,166,226,.22)}
.card.hl .ct{color:var(--cyan)}
.b-flow li.hl{background:var(--cyan)!important;color:#fff;transform:scale(1.04)}
.fig.hl{border-top-color:var(--blue);transform:scale(1.04)}
.fig.hl .fv{color:var(--cyan)}
.b-table tr.hl td,.b-table td.hl,.b-table th.hl{color:var(--cyan);background-color:rgba(0,166,226,.08)}
.b-table tr.hl td.em,.b-table td.hl.em{color:var(--cyan)}
.b-table td,.b-table th{transition:color .35s var(--ease),background-color .35s}
.thumb [data-item]{transition:none}
/* the field list on the vision slide: each name opens its field slide */
.clink{display:inline-block;color:inherit;text-decoration:none;position:relative;cursor:pointer}
/* the whole row of a field link is clickable: the margin between rows becomes padding, so the rows touch */
.b-bullets.fields li.cli{margin:0;padding-top:.25em;padding-bottom:.25em;cursor:pointer}
.b-bullets.fields li.cli:before{top:.8em}
a.clink:hover{color:var(--cyan)}
.tone-dark a.clink:hover,.blue a.clink:hover{color:#5fd3ff}
a.clink:after{content:"›";position:absolute;right:-.85em;top:0;opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-4px);font-weight:700}
a.clink:hover:after,a.clink:focus-visible:after{opacity:1;transform:none}

/* ---------------------------------------------------------------- slide canvas (tso-startup) */
.slide{position:absolute;inset:0;overflow:hidden;animation:fadein .5s var(--ease) both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.photo{background:var(--blue);color:#fff}
.paper{background:#fff;color:var(--ink)}
.blue{background:var(--blue);color:#fff}
.k{font-size:12px;letter-spacing:4px;text-transform:uppercase;font-weight:700;color:var(--cyan)}
.blue .k,.photo .k{color:#fff;opacity:.9}
.slide h1{margin:0;font-weight:900;letter-spacing:-.03em;line-height:.94;text-transform:uppercase;text-wrap:balance}
.slide h1 .c,.c{color:var(--cyan)}
.slide b{font-weight:700}
/* one footer on every slide: rule, section label left, page number right (title: author left, month right) */
.foot{position:absolute;left:var(--m);right:var(--m);bottom:40px;display:flex;justify-content:space-between;gap:24px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;--fo:.55;border-top:1px solid color-mix(in srgb,currentColor calc(var(--fo) * 100%),transparent);padding-top:12px;z-index:3}
.foot>span{opacity:var(--fo)}
.photo .foot,.blue .foot{color:#fff}
.L-title .foot{border-top-color:transparent;--fo:.8;text-shadow:0 1px 8px rgba(0,10,30,.6)}
.active-in,.slide .in{animation:in .9s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.d1{animation-delay:.12s!important}.d2{animation-delay:.24s!important}.d3{animation-delay:.36s!important}.d4{animation-delay:.48s!important}

/* editable values: a thin dotted underline (no box, no layout shift), ew-resize cursor; the hint is a
   one-line tooltip above the line on hover or focus */
.tn,.tv{font-weight:700;color:var(--blue);text-decoration:underline dotted var(--cyan);text-decoration-thickness:2px;text-underline-offset:.2em;position:relative;font-variant-numeric:tabular-nums}
.tn{cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:none;border-radius:2px}
.tv{font:inherit;font-weight:700;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:inherit;text-align:inherit;color:var(--blue)}
.blue .tn,.photo .tn,.tone-dark .tn,.blue .tv,.tone-dark .tv{color:#fff}
.tn:hover,.tn.drag,.tv:hover{color:var(--cyan)}
.tn[data-tip]:hover::after,.tn[data-tip]:focus-visible::after,.tv[data-tip]:hover::after,.tv[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font:600 12px/1 "Fira Sans",Arial,sans-serif;letter-spacing:.2px;text-transform:none;color:#fff;background:var(--ink);padding:5px 8px;border-radius:3px;pointer-events:none;z-index:30;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.tn.drag::after{display:none}
.slide .tn{animation:pulse 1.6s .9s ease-out 2}
@keyframes pulse{0%,100%{background-color:rgba(0,166,226,0)}40%{background-color:rgba(0,166,226,.16)}}
.typer{position:fixed;z-index:200;width:150px;height:40px;font-size:18px;font-weight:700;color:var(--blue);border:2px solid var(--cyan);border-radius:3px;padding:0 10px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* ---------------------------------------------------------------- title: tso-startup cinematic title, literal */
.avatar{position:absolute;right:370px;bottom:113px;height:480px;width:293px;cursor:pointer;user-select:none}
.avatar:before{content:"";position:absolute;left:28%;right:26%;bottom:12px;height:27px;border-radius:50%;background:rgba(0,10,30,.55);filter:blur(15px)}
.cine{position:absolute;inset:-10%;overflow:hidden;background:#001a36;pointer-events:auto}
.rig .cine{transform:translateZ(-400px) scale(1.2)}
.cine video,.cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
video.glow{filter:drop-shadow(0 0 10px rgba(0,166,226,.95)) drop-shadow(0 0 22px rgba(0,166,226,.5))}
video.stopped-video{filter:drop-shadow(0 0 10px rgba(225,40,40,.95)) drop-shadow(0 0 22px rgba(225,40,40,.5))}
.cinecredit{position:absolute;left:120px;bottom:14px;font-size:9px;line-height:1.2;color:rgba(255,255,255,.55);white-space:nowrap;z-index:2;pointer-events:none}
.photo .k.cinek{position:absolute;left:114px;top:105px;font-size:15px;opacity:1;white-space:nowrap;transform:rotate(-0.14deg);transform-origin:50% 50%;color:transparent;background-color:rgba(16,12,8,.92);-webkit-background-clip:text;background-clip:text;text-shadow:1px 1px 0 rgba(255,250,240,.8),-1px -1px 0 rgba(0,0,0,.35);z-index:2;pointer-events:none}
.cam{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 55%;overflow:hidden;pointer-events:none}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(6deg);will-change:transform;pointer-events:none}
.layer{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.layer.front{transform:translateZ(60px)}
.cine-title h1{position:absolute;color:#fff;letter-spacing:-3px;line-height:.94}
.avatar.playing video{filter:none}
.nomedia .avatar,.avatar.nomedia{cursor:default}

/* ---------------------------------------------------------------- layouts */
.pad{position:absolute;left:var(--m);right:var(--m);top:64px;bottom:88px;display:flex;flex-direction:column;font-size:calc(18px * var(--fit,1));overflow:hidden}
.pad>.k{font-size:12px;margin-bottom:1em}
.pad h1{font-size:2.6em;margin-bottom:.32em}
.pad.statement{justify-content:center;bottom:110px}
.pad.statement h1{font-size:5.33em;max-width:900px;margin-bottom:.28em}
.pad.statement h1.long{font-size:4em}
.pad.statement h1.xlong{font-size:3.1em}
.pad h1.long{font-size:2.2em}
.pad h1.xlong{font-size:1.9em}
.lead{margin:0 0 1em;font-weight:300;font-size:1.22em;line-height:1.4;max-width:980px;text-wrap:balance}
.nw{white-space:nowrap}
.lc{text-transform:none}
.goal,.desc,.fact,.b-bullets li,.card .cx,.b-flow .fx,.b-note,.ttile .ln,.w-process .caption{text-wrap:pretty}
.card .ct,.b-flow .ft,.ttile .nm,.sov-card .sl,.b-table th,.lres{text-wrap:balance}
.statement .lead{font-size:1.33em;max-width:660px}
.lead b{font-weight:700}
.blocks{display:flex;flex-direction:column;gap:1.05em;flex:1 0 auto}
.blocks>.b-note{margin-top:auto}
/* standard slides with little content: the blocks sit a third of the way down the free space (the rest
   below), the small print stays at the bottom */
.blocks.spread::before{content:"";flex:1 1 0;max-height:120px;margin-bottom:-1.05em}
.blocks.spread::after{content:"";flex:2 1 0;order:1;margin-top:-1.05em}
.blocks.spread>.b-note{order:2;margin-top:0}
.cardframe .blocks.spread::before,.cardframe .blocks.spread::after{display:none}
.pad>.w{margin-bottom:1.05em}

.L-divider .pad,.L-end .pad{justify-content:center;bottom:110px}
.L-divider h1,.L-end h1{font-size:5.33em;max-width:1000px}
.L-divider .pad::before{content:"";display:block;width:84px;height:10px;background:var(--cyan);margin-bottom:34px}
.L-end .pad{align-items:center;text-align:center}
.L-end .lead{margin-left:auto;margin-right:auto}
.L-end .k{margin-bottom:1.4em}

/* the finale (thank-you slide with its own take): full-bleed shot, the headline and the questions in the
   sky at the upper left (clean in every frame), the last frame holds; at the end (.done) the headline
   comes up to full strength */
.L-end.fin .vbg{background:#2a1a10}
.L-end.fin .vbg video{cursor:default}
.fintext{position:absolute;left:var(--m);top:52px;width:540px;z-index:2;color:#fff;text-shadow:0 1px 3px rgba(40,16,0,.35),0 2px 22px rgba(60,24,0,.45);pointer-events:none}
.fintext .k{font-size:11px;letter-spacing:3.5px;margin-bottom:14px;opacity:.92;white-space:nowrap}
.fintext h1{font-size:76px;letter-spacing:-2px;line-height:.94;margin:0 0 16px;color:rgba(255,255,255,.86);transition:color 2.4s var(--ease),text-shadow 2.4s var(--ease)}
.fintext .lead{font-size:21px;line-height:1.36;font-weight:400;max-width:400px;margin:0;text-wrap:balance}
.L-end.fin.done .fintext h1{color:#fff;text-shadow:0 1px 3px rgba(40,16,0,.45),0 4px 34px rgba(60,24,0,.6)}
.L-end.fin .foot{border-top-color:transparent;--fo:.8;text-shadow:0 1px 8px rgba(0,10,30,.6)}
@media (prefers-reduced-motion:reduce){.fintext h1{transition:none}}

/* video layout */
.vbg{position:absolute;inset:0;background:#fff}
.vbg video,.vbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.L-video.tone-dark .vbg{background:var(--blue)}
.vtext{position:absolute;left:0;top:0;bottom:84px;width:560px;padding:64px 28px 0 var(--m);display:flex;flex-direction:column;justify-content:center;font-size:calc(18px * var(--fit,1));overflow:hidden;z-index:2}
.vtext h1{font-size:2.9em;margin-bottom:.32em}
.vtext h1.long{font-size:2.3em}.vtext h1.xlong{font-size:1.9em}
.vtext .k{margin-bottom:1em}
.vtext .lead{font-size:1.15em;max-width:none}
.vtext .blocks{flex:none}
.vtext .b-bullets li{text-wrap:balance}
/* v3 (the offer): the counter's top edge reaches to x 445 px below y 460 px, so the bullets end before it */
.slide[data-id="sell"] .vtext .blocks{max-width:318px}
.tone-light .vtext{color:var(--ink)}
.tone-dark .vtext{color:#fff;text-shadow:0 1px 14px rgba(0,20,50,.35)}
.tone-dark .vtext .k{color:#fff}
/* video slides: the footer stays in the text column (label, then number) instead of floating over the scene */
.L-video .foot{right:auto;width:auto;min-width:200px;justify-content:flex-start;gap:36px;--fo:.7}
.L-video.tone-dark .foot{text-shadow:0 1px 8px rgba(0,20,50,.5)}
.tone-light .foot{color:var(--ink)}
.tone-dark .foot{color:#fff}
.L-video .vbg{cursor:pointer}
/* a click on Julian pauses and continues (title, inside scene, scene videos): an invisible area from his
   head down to the bottom of the frame that follows his head track */
.jhit{position:absolute;left:0;top:0;width:0;height:0;z-index:4;cursor:pointer;background:none;user-select:none;-webkit-user-select:none;pointer-events:auto;outline:none}
.jhit:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.nomedia .jhit,.thumb .jhit{display:none}

/* target layout */
.tgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:48px;align-items:start;margin-bottom:1.1em}
.tgrid.solo{grid-template-columns:minmax(0,1fr)}
.tgrid .thead>.k{font-size:12px;margin-bottom:1em}
.tgrid .thead h1{font-size:2.5em}
/* with the votes (presentation, signed in): the pair sits right of the headline and the goal, above the
   description, and the example widget draws at 87 % so the head column has room for it */
.tgrid.voting{grid-template-columns:minmax(0,1.214fr) minmax(0,1fr)}
.tgrid.voting.solo{grid-template-columns:minmax(0,1fr)}
.tgrid.voting>.w{zoom:.87}
.thead .ttop{display:flex;align-items:flex-start;gap:20px}
.thead .ttl{flex:1;min-width:0}
.goal{font-size:1.28em;font-weight:400;line-height:1.35;margin:0 0 .6em}
.desc{font-size:.95em;font-weight:300;line-height:1.45;margin:0;color:inherit;opacity:.9}
.tfacts{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:22px;margin-top:auto}
/* Julian's slot right of the columns (presentation, the slide has a clip): his box in data/narration.toml
   (the t-* entries: right:120px, width 130px, feet on the footer rule) fills it */
.tfacts.jslot{margin-right:130px}
/* at least 20 px between the middle block (cards, flow) and the SRP column rules; the rest of the free
   height is shared above and below the middle block */
.L-target .blocks.tmid{flex:none;margin:auto 0 20px}
.L-target .blocks.tmid+.tfacts{margin-top:auto}
.tnotes{margin-top:1.4em}
.tnotes .b-note{max-width:none}
.fact{border-top:5px solid var(--cyan);padding-top:.6em;font-size:.82em;line-height:1.4;font-weight:300}
.fact .fl{font-size:.72em;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--grey);margin-bottom:.45em}
.fact ul{margin:0;padding:0;list-style:none}
.fact li{margin:0 0 .3em;padding-left:.9em;position:relative}
.fact li:before{content:"";position:absolute;left:0;top:.55em;width:.38em;height:.38em;background:var(--cyan)}
/* the small pair at a bullet (What it takes, Initiatives): at the right end of its first line, muted
   until hover or focus. Canvas pixels: 28 px tap targets around 14 px glyphs and the totals; the
   buttons reach 4 px above and below the line, and the bullets keep 28 px apart so no two overlap */
.fact li.bv{display:flex;align-items:flex-start;gap:6px;min-height:24px;margin-bottom:4px}
.fact li.bv .bt{flex:1;min-width:0}

/* ---------------------------------------------------------------- blocks */
.blabel{font-size:.62em;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--grey);margin-bottom:.6em}
.blue .blabel,.tone-dark .blabel{color:rgba(255,255,255,.75)}
.b-bullets ul{margin:0;padding:0;list-style:none}
.b-bullets li{position:relative;padding-left:1.1em;margin:0 0 .5em;font-weight:300;font-size:1.05em;line-height:1.4}
.b-bullets li:before{content:"";position:absolute;left:0;top:.55em;width:.42em;height:.42em;background:var(--cyan)}
.b-table table{border-collapse:collapse;width:100%;table-layout:fixed;color:inherit}
.b-table th{color:var(--grey);font-size:.62em;letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid currentColor;padding:.55em .6em;font-weight:700;text-align:left;vertical-align:bottom}
.b-table th{border-bottom-color:var(--ink)}
.blue .b-table th{color:rgba(255,255,255,.8);border-bottom-color:#fff}
.b-table td{border-bottom:1px solid var(--line);padding:.45em .6em;vertical-align:top;line-height:1.3;font-weight:300;font-size:.9em;overflow-wrap:anywhere}
.blue .b-table td{border-bottom-color:rgba(255,255,255,.25)}
.b-table td.num,.b-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.b-table td.em{color:var(--blue);font-weight:700}
.blue .b-table td.em{color:#fff}
.b-table tr.sum td{font-weight:900;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.b-table td:first-child{font-weight:400}
.b-table .caption{font-size:.7em;color:var(--grey);margin-top:.6em;line-height:1.4}
.b-cards{display:grid;gap:18px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.card{display:flex;flex-direction:column;background:var(--pale);color:var(--ink);border-top:6px solid var(--line);padding:1em 1.1em 1.05em;text-decoration:none;position:relative;min-width:0}
.card.accent-blue{border-top-color:var(--blue)}.card.accent-cyan{border-top-color:var(--cyan)}.card.accent-grey{border-top-color:#AAB4BF}
.blue .card{background:rgba(255,255,255,.08);color:#fff}
.card .ct{font-size:1.02em;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;margin-bottom:.45em}
.card .cx{font-size:.84em;font-weight:300;line-height:1.42}
.card .tag{align-self:flex-start;font-size:.58em;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--blue);border:1px solid currentColor;padding:.3em .6em;margin-bottom:.7em}
.blue .card .tag{color:#fff}
.card.link{cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.card.link:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,26,54,.16)}
.card .go{margin-top:auto;padding-top:.7em;font-size:.62em;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--cyan)}
.b-flow{display:flex;gap:0;margin:0;padding:0;list-style:none;align-items:stretch}
.b-flow li{flex:1 1 0;min-width:0;position:relative;background:var(--pale);padding:.85em 1.6em .9em 1.25em;margin-right:.55em;clip-path:polygon(0 0,calc(100% - 1em) 0,100% 50%,calc(100% - 1em) 100%,0 100%,1em 50%)}
.b-flow li:first-child{clip-path:polygon(0 0,calc(100% - 1em) 0,100% 50%,calc(100% - 1em) 100%,0 100%);padding-left:1em}
.b-flow li:nth-child(odd){background:#E3ECF5}
.blue .b-flow li{background:rgba(255,255,255,.12)}.blue .b-flow li:nth-child(odd){background:rgba(255,255,255,.2)}
.b-flow .ft{font-size:.84em;font-weight:900;text-transform:uppercase;line-height:1.1;margin-bottom:.3em}
.b-flow .fx{font-size:.74em;font-weight:300;line-height:1.35}
.b-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.fig{border-top:6px solid var(--cyan);padding-top:.7em}
.fig .fv{font-size:2.5em;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.blue .fig .fv{color:#fff}
.fig .fv .tn{border-bottom-width:4px}
.fig .fl{font-size:.64em;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-top:.7em;line-height:1.35}
.b-note{margin:0;font-size:.68em;line-height:1.45;color:var(--grey);font-weight:400;max-width:1000px}
.blue .b-note{color:rgba(255,255,255,.75)}

/* ---------------------------------------------------------------- interactive widgets */
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--blue);background:#fff}
.seg button{border:0;background:#fff;color:var(--blue);font-size:.72em;letter-spacing:2px;text-transform:uppercase;font-weight:700;padding:.75em 1.15em;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25em;line-height:1}
.seg button+button{border-left:2px solid var(--blue)}
.seg button small{font-size:.86em;letter-spacing:1px;font-weight:400;opacity:.8;text-transform:none}
.seg button[aria-checked=true]{background:var(--blue);color:#fff}
.seg button:hover:not([aria-checked=true]){background:var(--pale)}
.swc{display:inline-flex;align-items:center;gap:.8em;border:0;background:none;color:inherit;cursor:pointer;padding:0;font-size:.82em;font-weight:700;text-align:left;line-height:1.25}
.tg{position:relative;width:3.4em;height:1.8em;border-radius:1em;background:var(--line);transition:background .3s;flex:none}
.tg .knob{position:absolute;top:.2em;left:.2em;width:1.4em;height:1.4em;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:left .3s var(--ease)}
.swc[aria-checked=true] .tg{background:var(--cyan)}
.swc[aria-checked=true] .tg .knob{left:1.8em}

.steps{display:flex;flex-wrap:wrap;gap:.5em 0;margin:0;padding:0;list-style:none;align-items:center}
.steps li{display:inline-flex;align-items:center;gap:.4em;background:var(--pale);border:1.5px solid var(--line);padding:.5em .8em;font-size:.8em;font-weight:400;line-height:1.2;animation:in .6s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.steps li:not(:last-child){margin-right:1.3em}
.steps li:not(:last-child):after{content:"";position:absolute;right:-.95em;top:50%;width:.42em;height:.42em;margin-top:-.23em;border-top:2px solid var(--grey);border-right:2px solid var(--grey);transform:rotate(45deg)}
.steps li{position:relative}
.steps li.ai{background:var(--cyan);border-color:var(--cyan);color:#fff;font-weight:700}
.steps li.gap{background:#fff;border-style:dashed;color:var(--grey);font-style:italic}
.aitag{font-size:.7em;letter-spacing:1.5px;font-weight:900;background:#fff;color:var(--cyan);padding:.15em .35em}
.w-process .steps{margin:1.1em 0 .9em}
.w-process .caption{margin:0;font-size:1.05em;font-weight:700;color:var(--blue)}

.w-sov .zones{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:.8em}
.zone{border:2px dashed var(--line);min-height:9.4em;padding:.8em;display:flex;flex-direction:column;gap:.6em;transition:border-color .2s,background .2s}
.zone.over{border-color:var(--cyan);background:rgba(0,166,226,.06)}
.zlabel{font-size:.62em;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--grey)}
.zcards{display:flex;flex-direction:column;gap:.55em}
.sov-card{display:flex;align-items:center;gap:.6em;border:0;background:var(--blue);color:#fff;font-size:.8em;font-weight:700;text-align:left;padding:.75em .9em;cursor:grab;touch-action:none;user-select:none;line-height:1.2;position:relative;z-index:1}
.sov-card.stays{background:var(--ink)}
.w-sov.on .sov-card.stays{background:var(--cyan)}
.sov-card.dragging{cursor:grabbing;z-index:5;box-shadow:0 18px 40px rgba(0,26,54,.3)}
.grip{width:.7em;height:1.1em;flex:none;background:radial-gradient(circle,rgba(255,255,255,.8) 1.5px,transparent 1.6px) 0 0/.35em .37em}
.sov-msg{margin:0 0 .8em;font-size:.95em;font-weight:700;min-height:2.6em;color:var(--grey);transition:color .3s}
.sov-msg.ok{color:var(--green)}.sov-msg.bad{color:var(--red)}
.sov-bottom{display:flex;align-items:center;justify-content:space-between;gap:1em}
/* while Julian talks the widget plays itself; the viewer tries it after the clip */
.w-sov.auto .sov-card,.w-sov.auto .swc,.w-sov.auto .linkbtn{pointer-events:none}
.w-sov.auto .sov-card{cursor:default}
.linkbtn{border:0;background:none;color:var(--grey);font-size:.62em;letter-spacing:2px;text-transform:uppercase;font-weight:700;cursor:pointer;padding:.4em 0;text-decoration:underline;text-underline-offset:3px}

/* Example tag: every price shows it (Freudenberg red), a small price tag pointing at the price */
.px{white-space:nowrap}
.xtag{display:inline-block;vertical-align:.2em;margin-left:.4em;padding:.22em .55em .2em .85em;font-size:max(.52em,8.5px);line-height:1.2;font-weight:700;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#E4002B;background:#FDE7EB;clip-path:polygon(.45em 0,100% 0,100% 100%,.45em 100%,0 50%);white-space:nowrap;-webkit-user-select:none;user-select:none}

/* Process or role: the active column (tab) in ink and bold, the other one steps back */
.cmp{margin-top:1em;display:flex;flex-direction:column}
.cmp-r{display:grid;grid-template-columns:6.4em minmax(0,1fr) minmax(0,1fr);gap:0 1em;align-items:baseline;border-top:1px solid var(--line);padding:.5em 0;transition:background .3s}
.cmp-r:not(.cmp-h){animation:in .6s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.cmp-h{border-top:0;padding-top:0;align-items:end}
.cmp .rl{font-size:.62em;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--grey);transition:color .3s}
.cmp .cv{font-size:.82em;line-height:1.3;color:var(--grey);opacity:.75;transition:color .3s,opacity .3s}
.cmp .cv.on{color:var(--ink);opacity:1;font-weight:700}
.cmp-h .cv{font-size:.66em;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--grey);border-bottom:3px solid var(--line);padding-bottom:.45em;opacity:1}
.cmp-h .cv.on{color:var(--blue);border-bottom-color:var(--cyan)}
.cmp-r.hl .rl{color:var(--cyan)}
.cmp-r.hl{background:rgba(0,166,226,.07)}

.w-targets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ttile{display:flex;flex-direction:column;background:var(--pale);border-top:6px solid var(--cyan);padding:1em 1.1em;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s;min-width:0}
.ttile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,26,54,.16)}
.ttile .n{font-size:2.3em;font-weight:900;color:var(--blue);letter-spacing:-.04em;line-height:1}
.ttile .nm{font-size:.98em;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;margin:.45em 0 .35em}
.ttile .ln{font-size:.8em;font-weight:300;line-height:1.4}



/* ---------------------------------------------------------------- drawer */
#scrim{position:fixed;inset:0;background:rgba(0,10,20,.4);z-index:90}
#drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer);max-width:100vw;background:#fff;color:var(--ink);z-index:100;transform:translateX(100%);transition:transform .3s var(--ease),visibility 0s .3s;visibility:hidden;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.25)}
#drawer.open{transform:none;visibility:visible;transition:transform .3s var(--ease)}
.dh{flex:none;padding:14px 18px 12px;border-bottom:1px solid var(--line);background:#fff}
.dh .row{display:flex;align-items:center;gap:8px}
.dh h2{margin:0;font-size:13px;letter-spacing:3px;text-transform:uppercase;font-weight:900;margin-right:auto}
.dcount{font-size:12px;font-weight:700;color:var(--grey)}
.dcount.on{color:var(--cyan)}
.dh .tools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dh input[type=search]{flex:1 1 140px;height:34px;border:1px solid var(--line);padding:0 10px;font-size:14px;border-radius:3px}
.dbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;border-radius:3px;white-space:nowrap}
.dbtn:hover{background:var(--pale)}
.dbtn svg.i{width:16px;height:16px}
.dbtn.x{width:34px;padding:0;justify-content:center}
.db{flex:1 1 auto;overflow-y:auto;padding:4px 18px 40px;overscroll-behavior:contain}
.dg{border-bottom:1px solid var(--line);padding:14px 0 6px}
.dg>h3{margin:0 0 8px;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--cyan)}
.field{padding:9px 0 11px;border-radius:3px;transition:background .6s}
.field.flash{background:rgba(0,166,226,.14);transition:none}
.field[hidden]{display:none}
.fl{display:flex;align-items:baseline;gap:8px}
.fl label,.fl .lab{font-size:13px;font-weight:600;line-height:1.3;flex:1 1 auto}
.fv{font-size:13px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.field.changed .fl label:before,.field.changed .fl .lab:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:7px;vertical-align:1px}
.freset{border:0;background:none;color:var(--grey);font-size:11px;font-weight:700;cursor:pointer;padding:0 0 0 4px;text-decoration:underline;visibility:hidden}
.field.changed .freset{visibility:visible}
.fh{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--grey)}
.fc{margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fc input[type=range]{flex:1 1 150px;accent-color:var(--cyan);height:24px;margin:0}
.fc input[type=range].empty{opacity:.3}
.dbtn:disabled{opacity:.4;cursor:default;background:#fff}
.fc input[type=number],.fc input[type=date]{width:112px;height:32px;border:1px solid var(--line);padding:0 8px;font-size:14px;font-weight:600;color:var(--ink);border-radius:3px;background:#fff}
.fc input[type=date]{width:160px}
.fc input::placeholder{color:var(--grey);font-weight:400}
.dseg{display:inline-flex;flex-wrap:wrap;gap:4px}
.dseg button{border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:7px 10px;cursor:pointer;border-radius:3px}
.dseg button[aria-checked=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.dsw{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink)}
.dsw .tg{font-size:12px}
.dsw[aria-checked=true] .tg{background:var(--cyan)}
.dsw[aria-checked=true] .tg .knob{left:1.8em}
.dchk{display:flex;flex-direction:column;gap:6px}
.dchk label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.dchk input{width:17px;height:17px;accent-color:var(--cyan);margin:0}
.olist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.olist li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 8px;border-radius:3px;background:#fff}
.olist li.isoff{background:var(--pale)}
.olist li.isoff .nm{color:var(--grey);text-decoration:line-through}
.olist .on{font-weight:900;color:var(--blue);min-width:18px;font-variant-numeric:tabular-nums}
.olist li.isoff .on{color:var(--grey)}
.olist .nm{flex:1 1 auto;font-size:13px;font-weight:600;line-height:1.25}
.olist .mv{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--ink)}
.olist .mv:disabled{opacity:.3;cursor:default}
.olist .mv svg.i{width:15px;height:15px}
.dfoot{font-size:12px;color:var(--grey);line-height:1.5;padding:16px 0 0}
@media (max-width:900px){#drawer{width:100vw}}


/* ---------------------------------------------------------------- toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 16px;font-size:13px;font-weight:600;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:300;max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.slide,.slide .in,.steps li,.slide .tn{animation:none!important}[data-item],.ptop,.pstrip{transition:none!important}.b-bullets li.hl,.clink.hl,.card.hl,.b-flow li.hl,.fig.hl{transform:none}}

/* ---------------------------------------------------------------- viewer name in the bars */
.who{display:inline-flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.2;white-space:nowrap;min-width:0}
.who .wn{font-weight:700;letter-spacing:.3px;max-width:14em;overflow:hidden;text-overflow:ellipsis}
.who .wout{background:none;border:0;padding:4px 0;margin:0;color:inherit;opacity:.72;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.who .wout:hover{opacity:1;color:var(--cyan)}

/* ---------------------------------------------------------------- per-slide narration (tso-startup) */
.nslot{position:absolute;inset:0;pointer-events:none;z-index:4}
.avatar.slidebot{position:absolute;right:auto;bottom:auto;cursor:pointer;user-select:none;-webkit-user-select:none;pointer-events:auto}
.avatar.slidebot:before{left:30%;right:30%;bottom:2%;height:5%;filter:blur(6px);background:rgba(0,10,30,.45)}
.avatar.slidebot video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block;background:transparent;transition:filter .25s}
.avatar.slidebot:hover video,.avatar.slidebot:focus-visible video{filter:drop-shadow(0 0 10px rgba(0,166,226,.95)) drop-shadow(0 0 22px rgba(0,166,226,.5))}
.avatar.slidebot.stopped video{filter:drop-shadow(0 0 10px rgba(225,40,40,.95)) drop-shadow(0 0 22px rgba(225,40,40,.5))}
.avatar.slidebot:focus-visible{outline:none}
.avatar.slidebot.nomedia{display:none}

/* ---------------------------------------------------------------- inside scene (the email step, greetings) */
#gate{position:fixed;inset:0;z-index:400;background:#000;color:#fff;transition:opacity .5s var(--ease);overscroll-behavior:contain}
#gate[hidden]{display:none}
#gate.out{opacity:0;pointer-events:none}
body.gated{overflow:hidden}
.gstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gframe{position:relative;flex:none;overflow:hidden;background:#001a36}
.gframe>.deck{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#001a36}
.iplane{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s var(--ease)}
.iplane.ready{opacity:1}
.iplane video,.iplane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.iplane .iclip{visibility:hidden}
#gate.clip .iplane .iclip{visibility:visible}
.gshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,16,36,.72) 0,rgba(0,16,36,.5) 38%,rgba(0,16,36,0) 62%);pointer-events:none}
.gscene .gform{position:absolute;left:var(--m);top:150px;width:470px;color:#fff;z-index:5}
.gform[data-kind=done]{top:auto;bottom:110px}
.gk{display:block;margin:0 0 8px;font-size:13px;letter-spacing:4px;text-transform:uppercase;font-weight:700;color:#fff;opacity:.9;text-shadow:0 1px 10px rgba(0,10,30,.55)}
.gin{display:block;box-sizing:border-box;width:100%;height:1.14em;margin:0 0 30px;padding:0 0 .06em;background:transparent;border:0;border-bottom:3px solid rgba(255,255,255,.62);border-radius:0;color:#fff;font:900 52px/1.04 "Fira Sans",Arial,sans-serif;letter-spacing:-1.5px;text-transform:uppercase;caret-color:var(--cyan);outline:0;text-shadow:0 2px 22px rgba(0,10,30,.4);-webkit-appearance:none;appearance:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gin::placeholder{color:rgba(255,255,255,.34);opacity:1}
.gin:focus{border-bottom-color:var(--cyan)}
.gin.pw{letter-spacing:4px}
.gin.pw::placeholder{letter-spacing:8px}
.gin.static{border-bottom-color:transparent;font-size:64px}
.gin.shake{animation:gshake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes gshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}
.gact{display:flex;align-items:center;gap:22px;margin-top:6px;min-height:52px}
.gbtn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 26px;border:0;border-radius:3px;background:var(--cyan);color:#fff;font:700 18px "Fira Sans",Arial,sans-serif;letter-spacing:.3px;cursor:pointer;box-shadow:0 10px 30px rgba(0,10,30,.35)}
.gbtn:hover{background:#0095cc}
.gbtn svg.i{width:20px;height:20px}
/* Continue: the same chevron as the slide arrows (navCue) */
.gbtn svg.gchev{width:10px;height:20px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.gform.busy .gbtn{opacity:.6;pointer-events:none}
.glink{background:none;border:0;padding:6px 0;color:#fff;font:600 16px "Fira Sans",Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.88;text-shadow:0 1px 8px rgba(0,10,30,.6)}
.glink:hover{opacity:1;color:var(--cyan)}
/* the email step: a long address at a readable size, lower case as typed */
.gin.mail{font:600 30px/1.2 "Fira Sans",Arial,sans-serif;letter-spacing:0;text-transform:none;height:1.5em;padding:.12em 0 .08em}
.gin.static.mail{font-size:34px}
.gnote{margin:-14px 0 24px;max-width:470px;font:400 18px/1.45 "Fira Sans",Arial,sans-serif;color:#fff;text-shadow:0 1px 10px rgba(0,10,30,.6)}
.gnote b{font-weight:600;word-break:break-all}
.gnote a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.gnote a:hover{color:var(--cyan)}
.gform[data-kind=sent] .gnote{margin-top:0}
.gresent{color:var(--cyan);font-weight:600}
/* the hint under "Check your inbox": small, quieter than the note */
.gtip{margin:-14px 0 24px;max-width:470px;font:400 15px/1.4 "Fira Sans",Arial,sans-serif;color:#fff;opacity:.82;text-shadow:0 1px 10px rgba(0,10,30,.6)}
.gbtn:disabled{opacity:.55;cursor:default;box-shadow:none}
.gbtn:disabled:hover{background:var(--cyan)}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;white-space:nowrap!important}
/* stacked (portrait phones): the scene on top, the form below at readable sizes */
#gate.stack{overflow-y:auto;background:#001a36}
#gate.stack .gstage{position:static;display:block}
#gate.stack .gframe{box-sizing:content-box;overflow:visible;background:#001a36}
#gate.stack .gframe>.deck{box-shadow:0 10px 30px rgba(0,0,0,.35)}
#gate.stack .gshade{display:none}
#gate.stack .gform{position:static;width:auto;padding:22px 16px 40px}
#gate.stack .gk{font-size:12px;margin-bottom:6px}
#gate.stack .gin{font-size:34px;letter-spacing:-1px;margin-bottom:22px}
#gate.stack .gin.static{font-size:40px}
#gate.stack .gin.mail{font-size:22px;letter-spacing:0;margin-bottom:18px}
#gate.stack .gin.static.mail{font-size:22px}
#gate.stack .gnote{font-size:16px;margin:-6px 0 18px;max-width:none}
#gate.stack .gtip{font-size:14px;margin:-8px 0 18px;max-width:none}
#gate.stack .gact{gap:16px;flex-wrap:wrap;min-height:48px}
#gate.stack .gbtn{height:48px;font-size:16px;padding:0 18px 0 22px}

/* ---------------------------------------------------------------- speech bubbles */
/* the words being spoken, over his head; --bk keeps the text readable when the slide is scaled down,
   --tx (tail below) or --ty (tail at the side) points at the head */
.hbub{position:absolute;left:0;top:0;z-index:6;--bk:1;width:max-content;max-width:calc(330px * var(--bk));background:#fff;color:var(--ink);border-radius:calc(14px * var(--bk));padding:calc(10px * var(--bk)) calc(15px * var(--bk)) calc(11px * var(--bk));box-shadow:0 14px 40px rgba(0,10,30,.35);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;will-change:transform}
.hbub p{margin:0;font:500 calc(19px * var(--bk))/1.32 "Fira Sans",Arial,sans-serif;letter-spacing:0;text-transform:none;text-wrap:balance}
.hbub::after{content:"";position:absolute;left:var(--tx,40px);bottom:calc(-13px * var(--bk));margin-left:calc(-9px * var(--bk));border:calc(9px * var(--bk)) solid transparent;border-top:calc(14px * var(--bk)) solid #fff;border-bottom:0}
.hbub.side-l::after{left:auto;right:calc(-13px * var(--bk));bottom:auto;top:var(--ty,24px);margin:calc(-9px * var(--bk)) 0 0;border:calc(9px * var(--bk)) solid transparent;border-left:calc(14px * var(--bk)) solid #fff;border-right:0}
.hbub.side-r::after{left:calc(-13px * var(--bk));bottom:auto;top:var(--ty,24px);margin:calc(-9px * var(--bk)) 0 0;border:calc(9px * var(--bk)) solid transparent;border-right:calc(14px * var(--bk)) solid #fff;border-left:0}
.hbub.on{opacity:1;visibility:visible;transition:opacity .25s}
.hbub.on.pop p{animation:bpop .3s var(--ease) both}
@keyframes bpop{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
body.nobub .hbub:not(.must){display:none}
.thumb .hbub{display:none}
.nslot .hbub{z-index:7}
.vbg .hbub{z-index:3}

/* ---------------------------------------------------------------- top bar switches (Edit, Bubbles) */
.modes{display:inline-flex;align-items:center;gap:14px;margin:0 6px 0 4px}
.mswitch{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--chrome-text);font:600 13px "Fira Sans",Arial,sans-serif;cursor:pointer;padding:6px 2px;white-space:nowrap}
.mswitch .tg{font-size:10px;background:var(--chrome-line)}
.mswitch[aria-checked=true] .tg{background:var(--cyan)}
.mswitch[aria-checked=true] .tg .knob{left:1.8em}
.mswitch:hover{color:#fff}
@media (max-width:640px){.modes{gap:8px}.mswitch .ml{font-size:12px}}

/* ---------------------------------------------------------------- overview: every slide, grouped by part */
.pgrid{position:absolute;inset:0;z-index:80;background:#090c10;color:var(--chrome-text);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.present.show-grid .pgrid{visibility:visible;opacity:1;transition:opacity .25s}
.gtop{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;padding:12px clamp(16px,3vw,40px);background:rgba(9,12,16,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--chrome-line)}
.gtitle{font-size:12px;letter-spacing:4px;text-transform:uppercase;font-weight:900;color:#fff}
.gmeta{font-size:12px;color:var(--grey);margin-right:auto}
.gbody{padding:8px clamp(16px,3vw,40px) 48px}
.ggroup{margin-top:22px}
.ggroup h2{margin:0 0 12px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--chrome-text)}
.ggroup h2 .gpn{color:var(--cyan)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px 16px}
.gtile{display:block;text-decoration:none;color:var(--chrome-text);outline-offset:4px}
.gtile .thumb{box-shadow:0 8px 22px rgba(0,0,0,.45);outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s}
.gtile:hover .thumb{outline-color:var(--grey)}
.gtile.on .thumb{outline:3px solid var(--cyan)}
.gcap{display:flex;gap:8px;align-items:baseline;margin-top:8px;font-size:13px;line-height:1.3}
.gcap b{color:var(--cyan);font-variant-numeric:tabular-nums;flex:none}
.gcap span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:640px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}}


@media (prefers-reduced-motion:reduce){.hbub.on.pop p,.gin.shake{animation:none}#gate{transition:none}}
/* bubbles over the small per-slide clips wrap earlier, so they cover less of the slide */
.nslot .hbub{max-width:calc(250px * var(--bk))}
.nslot .hbub p{font-size:calc(17px * var(--bk))}
/* the email field fades in when Julian starts to speak */
.gscene .gform[data-kind=ask]{animation:gfade .6s var(--ease) var(--gdelay,0s) both}
@keyframes gfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gscene .gform[data-kind=ask]{animation:none}}
.gtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gmeta{white-space:nowrap}
@media (max-width:480px){.gtitle{letter-spacing:2.5px;font-size:11px}.gmeta{display:none}.gtop .btn{margin-left:auto}}

/* the title on a first visit: Julian waits on the first frame until Play starts him with sound */
.playbtn{display:none}
.slide.await .playbtn{display:inline-flex;align-items:center;gap:10px;position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:30;
  padding:14px 26px 14px 22px;border:0;border-radius:999px;background:var(--cyan);color:#fff;font:700 15px/1 "Fira Sans",Arial,sans-serif;letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,26,54,.45);animation:playpulse 1.5s ease-in-out infinite;will-change:transform}
.slide.await .playbtn::before{content:"";width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
/* a plain gentle scale pulse, like the red arrow on the title: no ring or halo around the button */
@keyframes playpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.slide.await .playbtn{animation:none}}

.thumb .playbtn{display:none!important}
/* the Bubbles switch before the sign-in (no top bar yet) */
.cornerctl{position:fixed;top:12px;right:14px;z-index:90;display:flex;align-items:center;padding:2px 12px;border-radius:20px;background:rgba(11,15,20,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cornerctl .mswitch{color:#fff}
#gate.stack .cornerctl{position:absolute}
/* slide clips: the bubble finds its own width (the app sets max-width) */
.nslot .hbub p{text-wrap:balance}

/* uppercase umlauts (Ü, Ö, Ä) rise above the cap height: give the gate fields room so the dots are not clipped */
.gin{height:1.42em;line-height:1.28;padding:.14em 0 .06em}
#gate.stack .gin{height:1.42em}

/* ---------------------------------------------------------------- glossary: every term, searchable, over the slide */
.pgloss{position:absolute;inset:0;z-index:82;background:#090c10;color:var(--chrome-text);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s;outline:none}
.present.show-gloss .pgloss{visibility:visible;opacity:1;transition:opacity .25s}
.gltop{flex-wrap:wrap;row-gap:10px}
.gltop .gtitle{margin:0}
.gltop .gmeta{margin-right:auto;font-variant-numeric:tabular-nums}
.glfilter{height:36px;width:min(300px,100%);padding:0 12px;border-radius:3px;border:1px solid var(--chrome-line);background:var(--chrome2);color:#fff;font:400 15px/1 "Fira Sans",Arial,sans-serif;-webkit-appearance:none;appearance:none}
.glfilter::placeholder{color:var(--grey)}
.glfilter:focus{border-color:var(--cyan);outline:none}
.glbody{max-width:980px;margin:0 auto;padding:6px clamp(16px,3vw,40px) 64px}
.glnote{margin:18px 0 6px;font-size:13px;line-height:1.5;color:var(--grey)}
.glgroup{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 12px;border-top:1px solid var(--chrome-line);padding:14px 0 6px}
.glL{font-size:22px;font-weight:900;color:var(--cyan);line-height:1.1}
.glgroup dl{margin:0}
.glitem{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:4px 22px;padding:0 0 12px}
.glitem dt{font-weight:700;color:#fff;font-size:15px;line-height:1.45}
.glitem dd{margin:0;font-size:15px;line-height:1.5;color:var(--chrome-text);font-weight:300}
.glitem dd b{font-weight:600}
.glitem[hidden],.glgroup[hidden],.glnone[hidden]{display:none}
.glnone{margin:28px 0;font-size:15px;color:var(--grey)}
@media (max-width:640px){
  .gltop .glfilter{order:5;width:100%;flex:1 1 100%}
  .glgroup{grid-template-columns:28px minmax(0,1fr);gap:0 8px}
  .glL{font-size:18px}
  .glitem{grid-template-columns:minmax(0,1fr);gap:2px;padding-bottom:14px}
  .glitem dt,.glitem dd{font-size:15px}
}
@media (max-width:480px){.gltop .gmeta{display:inline}}
/* the Glossary button makes the top bar longer: Overview and Glossary go icon-only before the bar runs out
   of room (edit mode adds Assumptions), the downloads go icon-only below 820 px, and the bar wraps rather than
   overflowing */
@media (max-width:1240px){.ptop>.btn[data-act=grid] .lbl,.ptop>.btn[data-act=gloss] .lbl{display:none}.ptop>.btn[data-act=grid],.ptop>.btn[data-act=gloss]{width:36px;padding:0}}
@media (max-width:1100px){.ptop{flex-wrap:wrap;row-gap:6px}.ptop .pname{flex-basis:0}}
@media (min-width:641px) and (max-width:820px){.ptop .acts .btn .sl{display:none}.ptop .acts .btn{width:36px;padding:0}.ptop .acts .btn[data-act=drawer]{width:auto;padding:0 10px}}

/* ---------------------------------------------------------------- feedback (top bar, thank-you slide, panel) */
.ptop .fbtop{border-color:rgba(0,166,226,.55)}
.ptop .fbtop:hover{background:rgba(0,166,226,.16)}
@media (max-width:640px){.ptop .fbtop{width:36px;padding:0}.ptop .fbtop .lbl{display:none}}
.fbcta{position:absolute;left:var(--m);bottom:92px;z-index:4;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px 0 20px;border:0;border-radius:3px;background:#fff;color:var(--blue);font:700 14px/1 "Fira Sans",Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 30px rgba(30,12,0,.35);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
.fbcta svg.i{width:20px;height:20px;color:var(--cyan)}
.fbcta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(30,12,0,.45);background:#f4fbff}
.fintext .fbcta{position:relative;left:auto;bottom:auto;margin-top:28px;pointer-events:auto;text-shadow:none}
.fintext .fbcta:hover{transform:translateY(-2px)}
.L-end:not(.fin) .fbcta{left:50%;transform:translateX(-50%);bottom:96px}
.L-end:not(.fin) .fbcta:hover{transform:translate(-50%,-2px)}
/* the Feedback pill in the footer, right after the label (canvas pixels): subtle at rest, clear on hover
   or focus; its height stays inside the footer line, so the rule does not move. Not in thumbnails. */
.fbfoot{display:inline-flex;align-items:center;gap:6px;height:24px;margin:-6px auto -6px -10px;padding:0 11px 0 8px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.7);color:var(--blue);font:600 12px/1 "Fira Sans",Arial,sans-serif;letter-spacing:.2px;text-transform:none;white-space:nowrap;cursor:pointer;
  opacity:.8;touch-action:manipulation;transition:opacity .2s,background-color .2s,border-color .2s,box-shadow .2s}
.fbfoot svg.i{width:15px;height:15px}
.fbfoot:hover,.fbfoot:focus-visible{opacity:1;background:#fff;border-color:var(--blue);box-shadow:0 4px 12px rgba(0,30,70,.14)}
.fbfoot:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.blue .fbfoot,.photo .fbfoot,.tone-dark .fbfoot{color:#fff;background:rgba(8,24,46,.28);border-color:rgba(255,255,255,.4)}
.blue .fbfoot:hover,.blue .fbfoot:focus-visible,.photo .fbfoot:hover,.photo .fbfoot:focus-visible,.tone-dark .fbfoot:hover,.tone-dark .fbfoot:focus-visible{
  background:rgba(8,24,46,.5);border-color:#fff;box-shadow:0 4px 14px rgba(0,10,30,.3)}
.tone-light .fbfoot{color:var(--blue);background:rgba(255,255,255,.7);border-color:var(--line)}
.thumb .fbfoot{display:none}

/* live (tso/live.py): how many people are on this slide, right after the Comment pill (canvas pixels, dimmed
   like the footer, hidden when only you); who else is watching, top right on the title and in the inside
   scene; the bubble "Kerstin just commented" that rises from the pill (screen pixels, over the slide, at
   most 3 stacked); the first name on someone else's floating heart */
.foot:has(.fbpres:not([hidden]))>.fbfoot{margin-right:0}
.fbpres{display:inline-flex;align-items:center;gap:6px;margin-right:auto;font:500 11px/1 "Fira Sans",Arial,sans-serif;letter-spacing:.2px;text-transform:none;white-space:nowrap}
.fbpres[hidden],.lwho[hidden]{display:none}
.pdot{flex:none;width:6px;height:6px;border-radius:50%;background:#2fb36d;animation:pdot 2.4s ease-out infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 rgba(47,179,109,.45)}70%,100%{box-shadow:0 0 0 6px rgba(47,179,109,0)}}
.lwho{position:absolute;top:100px;right:var(--m);z-index:6;display:flex;align-items:center;gap:8px;color:#fff;font:600 13px/1.2 "Fira Sans",Arial,sans-serif;
  letter-spacing:.3px;text-shadow:0 1px 8px rgba(0,10,30,.75);opacity:.92;pointer-events:none;white-space:nowrap}
.thumb .fbpres,.thumb .lwho{display:none}
#lbubs{position:fixed;z-index:150;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.lbub{display:inline-flex;align-items:center;gap:7px;max-height:40px;padding:7px 13px 7px 10px;border-radius:16px;background:#fff;color:var(--blue);
  font:600 13px/1 "Fira Sans",Arial,sans-serif;letter-spacing:.1px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,30,70,.24),0 1px 3px rgba(0,30,70,.12);
  animation:lgrow .25s ease-out,lbub 3s cubic-bezier(.22,.61,.36,1) forwards}
.lbub svg.i{width:15px;height:15px;color:var(--cyan)}
@keyframes lgrow{from{max-height:0}to{max-height:40px}}
@keyframes lbub{0%{opacity:0;transform:translateY(10px) scale(.96)}10%{opacity:1;transform:none}78%{opacity:1;transform:translateY(-8px)}100%{opacity:0;transform:translateY(-20px)}}
.lbub.still{animation:lfade 3s linear forwards}
@keyframes lfade{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
.hfly .hname,.dfly .hname{position:absolute;left:50%;top:100%;margin-top:2px;transform:translateX(-50%);padding:1px 5px;border-radius:6px;background:rgba(8,24,46,.62);
  color:#fff;font:600 10px/1.3 "Fira Sans",Arial,sans-serif;letter-spacing:.2px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.lbub{animation:lfade 3s linear forwards}.pdot{animation:none}}

/* a quick poll (tso/polls.py) at the end of a slide's content, in em so the slide's fit shrinks it: the
   question, one button per option (like the vote pair: small, white, a thin line), how many answered.
   After answering, each button holds its share as a cyan bar and the percentage. */
.poll{display:flex;flex-wrap:wrap;align-items:center;gap:.45em .5em;margin-top:.85em;font-size:.72em;line-height:1.2;flex:none}
.poll .pq{font-weight:700;color:var(--blue);margin-right:.3em}
.popt{position:relative;display:inline-flex;align-items:center;gap:.5em;height:2.15em;padding:0 .95em;border:1px solid var(--line);border-radius:1.08em;background:#fff;
  color:var(--ink);font:500 1em/1 "Fira Sans",Arial,sans-serif;white-space:nowrap;cursor:pointer;overflow:hidden;touch-action:manipulation;
  transition:border-color .2s,box-shadow .2s,color .2s}
.popt:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(0,30,70,.12)}
.popt:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.popt[aria-pressed=true]{border-color:var(--blue);color:var(--blue);font-weight:700}
.pfill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,166,226,.15);transition:width .6s var(--ease);pointer-events:none}
.popt[aria-pressed=true] .pfill{background:rgba(0,166,226,.3)}
.pl,.pp{position:relative}
.pp{font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.pp:empty,.pmeta:empty{display:none}
.pmeta{color:var(--grey);font-size:.92em;white-space:nowrap}
.poll.wait .pmeta{opacity:0}
.thumb .poll{display:none}
/* a phone held upright: the poll under the slide, at screen size (layout() sets top), like the vote pair */
.poll.pdock{display:none}
@media (orientation:portrait) and (max-width:699px){
  .present .frame .poll{display:none}
  .present>.poll.pdock{display:flex;position:absolute;left:16px;right:16px;z-index:60;justify-content:center;margin:0;font-size:13px}
  .pdock .pq{color:#fff;flex-basis:100%;text-align:center;margin:0 0 .2em}
  .pdock .popt{height:2.5em}
  .pdock .pmeta{color:#c6d2de;flex-basis:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.pfill,.popt{transition:none}}

/* the feedback modal: a centred card on a soft blur; a bottom sheet on a phone */
.fbwrap{position:fixed;left:0;top:0;width:100%;height:100%;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.fbback{position:absolute;inset:0;background:rgba(4,14,28,.42);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);opacity:0;transition:opacity .3s var(--ease)}
.fbcard{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:100%;overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);border-radius:16px;
  box-shadow:0 2px 6px rgba(0,20,50,.08),0 28px 70px rgba(0,20,50,.32);padding:24px 28px 22px;transform:translateY(18px) scale(.97);opacity:0;transition:transform .42s var(--ease),opacity .28s var(--ease)}
.fbwrap.on .fbback{opacity:1}
.fbwrap.on .fbcard{transform:none;opacity:1}
.fbgrip{display:none}
.fbhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.fbtitles{min-width:0}
.fbtitles::before{content:"";display:block;width:36px;height:5px;background:var(--cyan);margin-bottom:12px}
.fbcard h2{margin:0;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;color:var(--blue);line-height:1.1}
.fbcard h2:focus{outline:none}
.fbslideline{margin:6px 0 0;font-size:13px;color:var(--grey);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fbx{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--grey);cursor:pointer;margin:-6px -10px 0 0;transition:background-color .15s,color .15s}
.fbx:hover{background:var(--pale);color:var(--ink)}
.fbchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.fbchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1.5px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);font:600 14px/1 "Fira Sans",Arial,sans-serif;cursor:pointer;touch-action:manipulation;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s var(--ease)}
.fbchip::before{content:"";width:0;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);margin:-3px 0 0 -6px;transition:width .2s var(--ease),transform .2s var(--ease),margin .2s var(--ease)}
.fbchip:hover{border-color:var(--cyan)}
.fbchip:active{transform:scale(.96)}
.fbchip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.fbchip[aria-pressed=true]::before{width:5px;transform:rotate(45deg) scale(1);margin:-3px 2px 0 0}
.fbf{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0;position:relative}
.fbf label{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.fbf label .opt{font-weight:400;color:var(--grey);margin-left:6px}
.fbcard input,.fbcard textarea{width:100%;font:400 15px/1.45 "Fira Sans",Arial,sans-serif;color:var(--ink);background:var(--pale);border:1.5px solid transparent;border-radius:10px;padding:10px 13px;transition:border-color .15s,box-shadow .15s,background-color .15s}
.fbcard textarea{resize:vertical;min-height:112px;max-height:40vh}
.fbcard input::placeholder,.fbcard textarea::placeholder{color:#8a96a3;opacity:1}
.fbcard input:hover,.fbcard textarea:hover{border-color:var(--line)}
.fbcard input:focus,.fbcard textarea:focus{outline:none;background:#fff;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,166,226,.16)}
.fbcount{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--grey);font-variant-numeric:tabular-nums;pointer-events:none}
.fbmail{margin-bottom:6px}
.fberr{margin:4px 0 0;color:var(--red);font-size:14px}
.fbact{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:14px}
.fbhint{margin-right:auto;font-size:12px;color:var(--grey)}
.fbsend{height:44px;min-width:128px;padding:0 26px;border:0;border-radius:22px;background:var(--blue);color:#fff;font:700 13px/1 "Fira Sans",Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,67,136,.25);transition:background-color .18s,transform .18s var(--ease),box-shadow .18s}
.fbsend:hover{background:#00366e;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,67,136,.32)}
.fbsend:disabled{opacity:.6;cursor:progress;transform:none}
.fbdone{margin:auto 0;text-align:center;padding:26px 8px 18px;outline:none}
.fbdone h2{margin-top:16px}
.fbdone p{margin:8px 0 0;font-size:16px;color:var(--ink)}
.fbtick{width:64px;height:64px;fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:fbpop .5s var(--ease)}
.fbtick circle{stroke-dasharray:132;stroke-dashoffset:132;animation:fbdraw .55s var(--ease) forwards}
.fbtick path{stroke-dasharray:40;stroke-dashoffset:40;stroke-width:3.5;animation:fbdraw .4s var(--ease) .3s forwards}
@keyframes fbdraw{to{stroke-dashoffset:0}}
@keyframes fbpop{0%{transform:scale(.6)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
/* a phone: a full-width sheet from the bottom; the Send row stays at the bottom of the sheet, which never
   grows past the visual viewport (the keyboard), so Send is always in view */
@media (max-width:600px){
  .fbwrap{align-items:flex-end;padding:0}
  .fbcard{max-width:none;border-radius:18px 18px 0 0;padding:10px 18px 0;transform:translateY(100%);opacity:1;transition:transform .38s var(--ease)}
  .fbgrip{display:block;flex:none;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
  .fbhead{margin-bottom:14px}
  .fbcard h2{font-size:19px}
  .fbchip{height:38px;padding:0 14px}
  .fbcard textarea{min-height:96px}
  .fbact{position:sticky;bottom:0;margin:6px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
  .fbhint{display:none}
  .fbsend{width:100%;height:48px;border-radius:24px}
  .fbdone{padding:22px 8px calc(30px + env(safe-area-inset-bottom))}
}
@media (pointer:coarse){.fbhint{display:none}}
@media (prefers-reduced-motion:reduce){.fbcard,.fbback,.fbcta,.fbfoot,.fbchip,.fbchip::before,.fbsend{transition:none}.fbcard{transform:none}.fbtick,.fbtick circle,.fbtick path{animation:none;stroke-dashoffset:0}}

/* iPhone Safari zooms into any field under 16 px when it is tapped: touch screens get 16 px fields */
@media (pointer:coarse){.fbcard input,.fbcard select,.fbcard textarea,.glfilter,.dh input[type=search],.fc input[type=number],.fc input[type=date]{font-size:16px}}
/* the assumptions drawer takes 420 px of the window: the top bar beside it goes icon-only, as on a narrow
   window, so the downloads stay in view */
@media (min-width:901px) and (max-width:1700px){body.drawer-open .ptop .lbl,body.drawer-open .ptop .pname{display:none}
  body.drawer-open .ptop>.btn[data-act=grid],body.drawer-open .ptop>.btn[data-act=gloss],body.drawer-open .ptop .fbtop{width:36px;padding:0}}

/* ---------------------------------------------------------------- votes on the target slides
   One component in two sizes (canvas pixels): a heart (red disc) and a thumbs-down (white disc), each
   with everyone's total beside it and the viewer's own count as a badge on the disc. Big, right of the
   headline and the goal, its top level with the headline's capitals: the heart disc 48 px, the
   thumbs-down 40 px; the disc scales on hover and pops on a click, the button (the tap target) stays put.
   Small, at every bullet: 14 px line-art glyphs and the totals in 28 px buttons (below). A small slide draws the big pair larger
   (--hk, set by layout(); zoom, so the headline makes room); a phone held upright shows it under the
   slide. The floats fly in .vfx, an overlay over the whole slide. */
.tvote{position:relative;display:flex;flex-direction:column;gap:10px;flex:none;user-select:none;-webkit-user-select:none;z-index:7}
.tvote.hin{margin-top:calc(5.2px * var(--fit,1));zoom:var(--hk,1)}
.bvote{position:relative;display:inline-flex;flex:none;gap:2px;margin:-4px 0;opacity:.6;transition:opacity .2s;user-select:none;-webkit-user-select:none;z-index:2}
.fact li.bv:hover .bvote,.bvote:focus-within{opacity:1}
.vrow{position:relative;display:inline-flex;align-items:center;gap:10px}
.vrow.small{gap:1px}
.vbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;margin:0;border:0;background:none;border-radius:50%;
  color:inherit;cursor:pointer;touch-action:manipulation;font:inherit}
.vbtn:focus-visible{outline:none}
.vbtn:focus-visible .vdisc{outline:3px solid var(--cyan);outline-offset:3px}
.vdisc{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.hbtn .vdisc{background:#E4002B;color:#fff;box-shadow:0 6px 16px rgba(228,0,43,.3),0 2px 5px rgba(80,0,16,.16)}
.dnbtn .vdisc{border:1.5px solid #c5d0dc;background:#fff;color:#5b6b7d;box-shadow:0 2px 6px rgba(0,30,70,.08)}
.vbtn:hover .vdisc{transform:scale(1.08)}
.hbtn:hover .vdisc{box-shadow:0 8px 22px rgba(228,0,43,.4),0 2px 6px rgba(80,0,16,.2)}
.dnbtn:hover .vdisc{border-color:var(--blue);color:var(--blue);box-shadow:0 4px 12px rgba(0,30,70,.14)}
.vbtn:active .vdisc{transform:scale(.95)}
.vicon{fill:currentColor;pointer-events:none}
.vtot{font-weight:900;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;transition:opacity .3s}
.vrow.down .vtot{color:#5b6b7d}
.wait .vtot{opacity:0}
.vfull{display:none;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;pointer-events:none}
.vmine{position:absolute;border-radius:9px;background:#fff;color:#E4002B;font-family:"Fira Sans",Arial,sans-serif;font-weight:800;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,20,50,.25);pointer-events:none}
.dnbtn .vmine{color:#46566a}
.vmine:empty{display:none}
/* big */
.vrow.big .vbtn{width:48px;height:48px}
.vrow.big.heart .vdisc{width:48px;height:48px}
.vrow.big.down .vdisc{width:40px;height:40px}
.vrow.big.heart .vicon{width:24px;height:24px;margin-top:1px}
.vrow.big.down .vicon{width:18px;height:18px;margin-top:2px}
.vrow.big .vtot{font-size:24px;min-width:2ch}
.vrow.big.down .vtot{font-size:20px}
.vrow.big .vfull{font-size:17px}
.vrow.big.down .vfull{font-size:14px}
.vrow.big .vmine{top:-5px;right:-7px;min-width:18px;height:18px;padding:0 4px;font-size:10.5px;line-height:18px}
.vrow.big.down .vmine{top:-6px;right:-9px}
/* small: a line-art glyph followed by the total, one button each (the 28 px tap target, invisible): no
   disc, no badge, no border, no shadow, no round shape; the number at 0.8 of the bullet text, regular
   weight, muted grey like the glyph, a small pop on a click */
.vrow.small .vbtn{width:auto;min-width:28px;height:28px;padding:0 2px;gap:3px;border-radius:4px;background:none;box-shadow:none;color:#6B7785}
.vrow.small .vdisc{width:14px;height:14px;background:none;border:0;box-shadow:none;border-radius:0;color:inherit}
.vrow.small .vicon{width:14px;height:14px;margin:0}
.vrow.small .vtot{font-size:.8em;font-weight:400;color:inherit;letter-spacing:0;min-width:1.2ch;text-align:left}
.vrow.small .vbtn:hover .vdisc,.vrow.small .vbtn:active .vdisc{transform:none;box-shadow:none}
.vrow.small .hbtn:hover,.vrow.small .hbtn:focus-visible{color:#E4002B}
.vrow.small .dnbtn:hover,.vrow.small .dnbtn:focus-visible{color:var(--blue)}
.vrow.small .vbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:0}
.vrow.small .vbtn:focus-visible .vdisc{outline:none}
.vrow.small .vbtn.pop .vdisc{animation:spop .26s var(--ease)}
@keyframes spop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
/* at the cap the small glyph stays (a click only shakes it) */
.vrow.small.full .vbtn .vdisc{background:none;cursor:default}
.vrow.small.full .vicon{display:block}
.vrow.full .hbtn .vdisc{background:#c9203f;cursor:default}
.vrow.full .dnbtn .vdisc{background:#e8edf2;cursor:default}
.vrow.full .vbtn:hover .vdisc{transform:none}
.vrow.full .vicon,.vrow.full .vmine{display:none}
.vrow.full .vfull{display:block}
.vbtn.pop .vdisc{animation:hpop .34s var(--ease)}
.vbtn.nope .vdisc{animation:hnope .36s ease-in-out}
@keyframes hpop{0%{transform:scale(1)}30%{transform:scale(1.2)}62%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes hnope{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
/* the floats: an overlay over the whole slide, above the content; they never take a click */
.vfx{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.vrow>.hfly,.vrow>.dfly{z-index:3}
.hfly{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;will-change:transform,opacity;
  animation:hfly 1.7s cubic-bezier(.22,.61,.36,1) forwards}
.hfly.small{width:15px;height:15px;margin:-7.5px 0 0 -7.5px}
.hfly svg,.dfly svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 2px 3px rgba(0,20,50,.18))}
.hfly.red{color:#E4002B}.hfly.cyan{color:#00A6E2}.hfly.white{color:#fff}
.hfly.white svg{filter:drop-shadow(0 1px 4px rgba(0,20,50,.5))}
@keyframes hfly{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.35) rotate(0)}
  12%{opacity:1;transform:translate3d(calc(var(--sw) * .5),calc(var(--rise) * -.12),0) scale(var(--s)) rotate(calc(var(--rot) * .3))}
  38%{transform:translate3d(calc(var(--sw) * -1 + var(--dx) * .38),calc(var(--rise) * -.4),0) scale(var(--s)) rotate(calc(var(--rot) * -.4))}
  66%{opacity:.85;transform:translate3d(calc(var(--sw) + var(--dx) * .66),calc(var(--rise) * -.7),0) scale(calc(var(--s) * .92)) rotate(var(--rot))}
  100%{opacity:0;transform:translate3d(var(--dx),calc(var(--rise) * -1),0) scale(calc(var(--s) * .6)) rotate(calc(var(--rot) * .5))}
}
.dfly{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0;will-change:transform,opacity;
  animation:dfly .95s cubic-bezier(.33,0,.67,1) forwards}
.dfly.small{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
.dfly.grey{color:#7d8b9b}.dfly.blue{color:#2f6fb3}
.dfly svg{filter:none}
@keyframes dfly{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.6) rotate(0)}
  18%{opacity:.9;transform:translate3d(calc(var(--dx) * .2),calc(var(--fall) * .2 + 8px),0) scale(1) rotate(calc(var(--rot) * .3))}
  100%{opacity:0;transform:translate3d(var(--dx),calc(var(--fall) + 8px),0) scale(.8) rotate(var(--rot))}
}
/* a phone held upright: the big pair under the slide, at screen size (layout() sets top) */
.tvote.dock{display:none}
@media (orientation:portrait) and (max-width:699px){
  .present .frame .tvote.hin{display:none}
  .present>.tvote.dock{display:flex;position:absolute;flex-direction:row;align-items:center;gap:30px;left:0;right:0;width:max-content;max-width:calc(100% - 32px);margin:0 auto;z-index:60}
  .tvote.dock .vtot{color:#fff;font-size:28px}
  .tvote.dock .vrow.down .vtot{color:#c6d2de;font-size:26px}
  .tvote.dock .vrow.big .vbtn,.tvote.dock .vrow.big.heart .vdisc{width:60px;height:60px}
  .tvote.dock .vrow.big.heart .vicon{width:30px;height:30px}
  .tvote.dock .vrow.big.down .vdisc{width:52px;height:52px}
  .tvote.dock .vrow.big.down .vicon{width:24px;height:24px}
}
.thumb .tvote,.thumb .bvote,.thumb .vfx{display:none}
@media (prefers-reduced-motion:reduce){
  .vfx,.vrow>.hfly,.vrow>.dfly{display:none}
  .vdisc,.vtot,.bvote{transition:none}
  .vbtn:hover .vdisc,.vbtn:active .vdisc{transform:none}
  .hbtn.pop .vdisc{animation:hpulse .4s ease-out}
  .dnbtn.pop .vdisc{animation:dpulse .4s ease-out}
  .vrow.small .vbtn.pop .vdisc{animation:none}
  .vbtn.nope .vdisc{animation:none}
}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(228,0,43,.6)}100%{box-shadow:0 0 0 16px rgba(228,0,43,0)}}
@keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(47,111,179,.45)}100%{box-shadow:0 0 0 12px rgba(47,111,179,0)}}

/* ---------------------------------------------------------------- the ranking so far
   One row per target (em, so the slide's fit shrinks it with the text): rank, name with its short line
   under it, a bar for the score (hearts minus thumbs-down; grey when below zero) and the counts. The
   whole row opens the target slide. Numbers and bars wait until the votes are loaded. */
.rank{list-style:none;margin:.3em 0 0;padding:0;display:flex;flex-direction:column;gap:.36em}
.rrow{position:relative}
.rlink{display:grid;grid-template-columns:1.9em minmax(0,1fr) 7.5em 7.6em;align-items:center;column-gap:1.2em;padding:.36em 1em .36em .6em;background:var(--pale);
  border-left:5px solid var(--cyan);color:inherit;text-decoration:none;transition:background-color .2s,border-color .2s}
a.rlink{cursor:pointer}
a.rlink:hover{background:#e5edf5;border-left-color:var(--blue)}
.rlink:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.rn{font-size:1.5em;font-weight:900;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums;text-align:right}
.rname{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rname b{font-size:1em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rline{font-size:.78em;font-weight:300;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar{position:relative;height:.55em;background:#fff;border-radius:.28em;overflow:hidden}
.rfill{position:absolute;left:0;top:0;bottom:0;width:0;background:#E4002B;border-radius:.28em;transition:width .6s var(--ease)}
.rfill.neg{background:#9aa7b5}
.rcount{display:inline-flex;align-items:center;justify-content:flex-end;gap:.28em;font-size:.88em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rcount b{font-weight:700;min-width:1.3em}
.ri{width:1em;height:1em;fill:currentColor;flex:none}
.ri.rheart{color:#E4002B}.ri.rdown{color:#5b6b7d}
.rsep{color:var(--grey);margin:0 .2em}
.rank.wait .rbar,.rank.wait .rcount{visibility:hidden}
.rnote{margin:.9em 0 0;font-size:.74em;line-height:1.45;color:var(--grey);max-width:none}
.rnote.wait{visibility:hidden}
@media (prefers-reduced-motion:reduce){.rfill,.rlink{transition:none}.rrow{transition:none!important;transform:none!important}}
/* the overview's one calm line under the list of targets (app only) */
.vnote{margin:.8em 0 0;font-size:.72em;line-height:1.4;opacity:.75}

/* after the greeting: the start button pulses gently until clicked (no auto-advance; the click lets slide 2 play with sound) */
.gbtn.gready.pulse{animation:readypulse 1.6s ease-in-out infinite}
@keyframes readypulse{0%,100%{box-shadow:0 0 0 0 rgba(0,166,226,.55)}50%{box-shadow:0 0 0 10px rgba(0,166,226,0)}}
@media (prefers-reduced-motion:reduce){.gbtn.gready.pulse{animation:none}}

/* ---------------------------------------------------------------- the live conversation (layout talk)
   Text at the left; at the right the place of the call (.talkbox, 680 x 442: the 16:9 frame, controls).
   The call itself (.talkhost) sits outside the scaled slide over that place, at screen resolution; on a
   phone held upright it docks under the slide. */
.talktext{position:absolute;left:var(--m);top:64px;bottom:88px;width:320px;display:flex;flex-direction:column;justify-content:center;font-size:calc(18px * var(--fit,1));overflow:hidden}
.talktext>.k{font-size:12px;margin-bottom:1em}
.talktext h1{font-size:4em;margin-bottom:.34em}
.talktext .lead{font-size:1.1em;max-width:300px}
/* the contact line under the lead: small print */
.talktext .tnote{margin:1.2em 0 0;max-width:300px;font-size:.78em;line-height:1.45;color:var(--grey)}
.talktext .tnote a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.talktext .tnote a:hover{color:var(--blue)}
.talkbox{position:absolute;left:480px;top:142px;width:680px;height:442px;display:flex;flex-direction:column}
.talkbox .tvid{flex:none;width:680px;height:382.5px;border-radius:6px;background:#0b0f14;display:flex;align-items:center;justify-content:center}
.talkbox .tmsg{color:#9fb0c2;font-size:15px;letter-spacing:1px;text-transform:uppercase;font-weight:600}
.talkhost{position:absolute;z-index:40;font-size:calc(14px * var(--ts,1))}
.talkin{display:flex;flex-direction:column;height:100%}
.talkin .tvid{position:relative;flex:none;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0b0f14;color:#dbe6f2}
.talkin .tcall{position:absolute;inset:0}
.talkin .tremote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0f14}
.talkin .taudio{display:none}
.talkin .tself{position:absolute;right:2.5%;bottom:4%;width:22%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;border:1px solid rgba(219,230,242,.35);background:#1b2430;transform:scaleX(-1)}
.talkin .tself[hidden]{display:none}
.talkin .tmsg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;font-size:max(13px,calc(16px * var(--ts,1)));line-height:1.4}
.talkin .tmsg p{margin:0;max-width:30em;text-wrap:balance}
.talkin .tmsg.twait{pointer-events:none;background:#0b0f14;transition:opacity .4s}
.talkin .tvid.loaded .twait{opacity:0;visibility:hidden}
.talkin .tspin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(219,230,242,.25);border-top-color:var(--cyan);animation:tspin 1s linear infinite}
@keyframes tspin{to{transform:rotate(360deg)}}
.talkin .tctl{flex:none;display:flex;align-items:center;gap:12px;padding-top:calc(14px * var(--ts,1))}
.tbtn{font:600 max(12px,calc(14px * var(--ts,1)))/1 "Fira Sans",Arial,sans-serif;letter-spacing:.3px;height:max(36px,calc(42px * var(--ts,1)));padding:0 1.3em;border-radius:3px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.tbtn:hover{border-color:var(--grey)}
.tbtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.tbtn.primary:hover{background:#00366d}
.tbtn.end{border-color:var(--red);color:var(--red)}
.tbtn.tog.off{background:var(--pale);color:var(--grey)}
.tbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
body.talkdock .present .rotate,body.talkdock .present>.fbslide.dock{display:none}
/* a phone held upright: the slide moves up, the call docks right under it */
body.talkdock .present .stagewrap{align-items:flex-start;padding-top:64px}
body.talkdock .present .frame .talkbox{visibility:hidden}
@media (prefers-reduced-motion:reduce){.talkin .tspin{animation:none}}
/* the ranking leaves room at the right for Julian and his speech bubble (Julian, 2 Oct: they covered the counts) */
.rank,.rnote{margin-right:110px}
@media (max-width:700px){.rank,.rnote{margin-right:0}}

/* the wink when Julian says "plane" in his greeting (Julian, 2 Oct) */
.talkin .twink{position:absolute;top:14px;right:16px;z-index:3;font-size:46px;line-height:1;pointer-events:none;animation:twink 2.2s ease-out forwards}
@keyframes twink{0%{opacity:0;transform:scale(.4) rotate(-12deg)}15%{opacity:1;transform:scale(1.15) rotate(6deg)}30%{transform:scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.talkin .twink{animation:none;opacity:1}}

/* the AI disclosure on the title: subtle, readable on hover */
.cinecredit.ainote{font-size:10px;color:rgba(255,255,255,.5);white-space:nowrap;bottom:12px;pointer-events:auto;transition:color .2s}
.cinecredit.ainote:hover{color:rgba(255,255,255,.85)}

/* the subtitle under the title headline (Julian, 2 Oct) */
.layer.front .cinesub{position:absolute;margin:0;font-size:30px;font-weight:300;line-height:1.2;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* the presenter switch in the top bar: Presenter Julian | Corinna | Mixed (shown once a Corinna clip exists) */
.psw{display:inline-flex;align-items:center;gap:0;font:600 12px "Fira Sans",Arial,sans-serif;color:var(--chrome-text);white-space:nowrap}
.psw .pl{margin-right:7px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey)}
.psw .pseg{border:1px solid var(--chrome-line);background:transparent;color:inherit;font:inherit;height:26px;padding:0 9px;margin-left:-1px;cursor:pointer}
.psw .pseg:first-of-type{border-radius:3px 0 0 3px;margin-left:0}
.psw .pseg:last-of-type{border-radius:0 3px 3px 0}
.psw .pseg:hover{color:#fff;background:rgba(255,255,255,.06)}
.psw .pseg[aria-pressed=true]{background:var(--cyan);border-color:var(--cyan);color:#fff;position:relative}
@media (max-width:1599px){.psw .pl{display:none}.psw .pseg{padding:0 7px}}
.psw .ps{display:none}
@media (max-width:1100px){.psw .pf{display:none}.psw .ps{display:inline}.psw .pseg{padding:0 8px}}
/* the speaker's name over the words of a slide clip's bubble (presenter switch on Corinna or Mixed) */
.hbub[data-speaker]::before{content:attr(data-speaker);display:block;margin:0 0 calc(2px * var(--bk));font:700 calc(11px * var(--bk))/1.2 "Fira Sans",Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue)}
@media (max-width:640px){.psw .pseg{height:24px;padding:0 5px;font-size:11px}}