*{box-sizing:border-box}
:root{--chrome-h:40px;--line:rgba(255,255,255,.15);--line-soft:rgba(255,255,255,.08);--surface:rgba(255,255,255,.12);--panel:rgba(10,10,10,.85);--panel-solid:#151515;--field:rgba(0,0,0,.4);--on-accent:#000;--shadow:0 10px 40px rgba(0,0,0,.5);--scrim:rgba(0,0,0,.45)}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font-body)}
h1,h2,h3{font-family:var(--font-display)}
a{color:var(--accent)}
.deck-chrome{position:fixed;top:0;left:0;right:0;height:var(--chrome-h);display:flex;align-items:center;gap:.8rem;padding:0 .8rem;font-size:.85rem;z-index:20;transition:opacity .3s;pointer-events:none}
.deck-chrome>*{pointer-events:auto}
.deck-chrome--hidden{opacity:0;pointer-events:none}
.deck-chrome__home{text-decoration:none;color:var(--fg);opacity:.45;font-size:.8rem}
.deck-chrome__home:hover{opacity:.9}
.pres-badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:var(--surface);font-size:.7rem;letter-spacing:.06em}
.pres-badge--live{background:#d33;color:#fff}
.live-banner{position:fixed;top:var(--chrome-h);left:0;right:0;padding:.4rem;text-align:center;background:var(--accent);color:var(--on-accent);z-index:19}
.live-banner a{color:inherit}
.deck{position:absolute;inset:var(--chrome-h) 0 0 0;overflow:hidden}
/* fullscreen (F11 or the Fullscreen API): drop the top chrome so the slide footer is the only indication.
   The bar's height is a custom property because .stage__inner sizes itself against it further down the
   file — a media query adds no specificity, so an override up here would silently lose to the later rule
   and leave the slide 40px short of the screen it is supposed to fill.
   The slide is 16:9; on a screen of any other shape the leftover strip takes the deck's own background so
   it reads as margin rather than as black bars. */
@media (display-mode: fullscreen){
  :root{--chrome-h:0px}
  .deck-chrome{display:none}
  body,.deck,.stage__inner{background:var(--bg)}
}
:root:fullscreen{--chrome-h:0px}   /* browsers that do not report display-mode for element fullscreen */
.slide{position:absolute;inset:0}
.slide[hidden]{display:none}
.deck[data-transition="fade"] .slide{animation:fadein .35s ease}
.deck[data-transition="slide"] .slide{animation:slidein .35s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
/* An html slide scrolls and its footer is a sibling after .slide-page, sticky to the bottom of the
   scrollport, so `.slide-page` must keep its `min-height:100%` — a deck stylesheet that collapses it
   leaves the footer stranded at the top. Do NOT make this a flex column to force that: it changes the
   cross-axis sizing of every html slide (the channels grid overflowed, the TOC's page went to 0 wide
   and took its QR corner to the middle of the slide with it). */
.slide--html{overflow:auto;overflow-x:hidden}
.slide-page{position:relative;min-height:100%;padding:3rem clamp(1rem,6vw,6rem);max-width:1400px;margin:0 auto;z-index:1}
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.stage--underlay{z-index:0}
.stage__inner{position:relative;aspect-ratio:16/9;width:min(100%,calc((100vh - var(--chrome-h)) * 16 / 9));max-height:100%}
.stage__inner>.slide-svg,.stage__inner>.slide-video{position:absolute;inset:0;width:100%;height:100%;display:block}
.slide-video{object-fit:contain;background:#000}
.slide-footer{position:absolute;left:0;right:0;bottom:0;height:2.8%;display:flex;align-items:center;justify-content:space-between;padding:0 1.2%;font-family:var(--font-body);font-size:1.2cqh;line-height:1;white-space:nowrap;z-index:2;pointer-events:none}
.stage__inner{container-type:size}
.slide--html .slide-footer{position:sticky;height:1.5rem;font-size:.7rem;padding:0 1rem}
.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.overlay .hotspot{fill:transparent;stroke:transparent;pointer-events:all;cursor:pointer;transition:stroke .15s}
.overlay .hotspot:hover,.overlay .hotspot.active{stroke:var(--accent);stroke-width:4;fill:rgba(255,255,255,.04)}
.overlay .hotspot-mark{fill:var(--accent);opacity:.55;pointer-events:none}
.overlay .comment-box{fill:rgba(255,255,255,.03);stroke:var(--accent-2,#e9c46a);stroke-width:3;stroke-dasharray:8 6;pointer-events:all;cursor:pointer}
.overlay .comment-box.active{fill:rgba(255,255,255,.1)}
.overlay .comment-num{font:600 34px var(--font-display);fill:var(--accent-2,#e9c46a);pointer-events:none}
.stage__widgets{position:absolute;inset:0;pointer-events:none}
.stage__widgets .widget{position:absolute;pointer-events:all;background:var(--scrim);border-radius:12px;padding:.6rem;overflow:hidden}
.hotspot-card{position:fixed;z-index:30;max-width:min(420px,90vw);max-height:60vh;overflow:auto;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;box-shadow:var(--shadow);font-size:.95rem}
.hotspot-card[hidden]{display:none}
.hotspot-card__title{font-family:var(--font-display);font-weight:700;margin-bottom:.3rem}
.hotspot-card__links a{display:inline-block;margin:.4rem .6rem 0 0}
.hotspot-card--pinned{border-color:var(--accent)}
[data-hotspot]{border-bottom:2px dotted var(--accent);cursor:help}
/* phone.js lifts .deck-nav / .follow-pill / .comment-toggle above the open answer panel. */
.deck-nav{position:fixed;bottom:2.6rem;right:12px;z-index:20;display:flex;gap:.3rem;transition:bottom .2s}
.deck-nav button,.btn{background:var(--surface);color:var(--fg);border:0;border-radius:8px;padding:.35rem .8rem;font-size:1rem;cursor:pointer}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn[disabled]{opacity:.4;cursor:default}
.follow-pill{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);z-index:25;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.4rem 1rem;font-weight:600;cursor:pointer}
.follow-pill[hidden]{display:none}
.widget h4{margin:0 0 .3rem;font-size:.9rem;opacity:.85}
.widget .bars .bar{display:grid;grid-template-columns:2.2rem 1fr 3rem;align-items:center;gap:.4rem;margin:.2rem 0}
.widget .bars .bar i{display:block;height:1.1rem;background:var(--accent);border-radius:4px;transition:width .4s}
.widget .bars .bar.correct i{background:var(--accent-2,#e9c46a)}
.widget .n{font-size:.75rem;opacity:.7;text-align:right}
.too-small{opacity:.7;font-style:italic;padding:1rem}
.widget .too-small{opacity:.7;font-style:italic;padding:1rem}
.slice{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.3rem}
.slice button{font-size:.7rem;padding:.15rem .5rem}
.slice button.on{background:var(--accent);color:var(--on-accent)}
.wordcloud span{display:inline-block;margin:.15rem .4rem;line-height:1}
.ask-panel{position:fixed;left:0;right:0;bottom:0;max-height:55vh;overflow:auto;background:var(--panel);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:.8rem 1rem;z-index:26}
.ask-panel[hidden]{display:none}
.ask-panel .ask{margin-bottom:1rem}
.ask-panel .prompt{font-family:var(--font-display);font-weight:600;margin-bottom:.4rem}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.choice-grid button{padding:.8rem;font-size:1.1rem}
.choice-grid button.picked{background:var(--accent);color:var(--on-accent)}
canvas.draw{width:100%;height:160px;background:var(--surface);border-radius:8px;touch-action:none}
canvas.draw--prior{height:200px;color:var(--fg)}
.prior-row{display:flex;gap:.4rem;margin:.3rem 0}
.prior-form label{display:block;margin:.6rem 0 .2rem;font-size:.85rem;font-weight:600;opacity:.85}
.prior-tags{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem}
.prior-tags label{display:flex;gap:.4rem;align-items:center;font-weight:400;margin:0;font-size:.9rem}
.prior-tags input{width:1.1rem;height:1.1rem}
.prior-form input.txt{margin-bottom:.1rem}
.prior-form input[hidden]{display:none}
.prior-conf{width:100%}
.prior-agg{position:relative}
.prior-clock{position:absolute;left:0;top:-3.2rem;font:700 clamp(1.4rem,2.6vw,2.4rem)/1 var(--font-body);font-variant-numeric:tabular-nums;opacity:.8}
.prior-clock:empty{display:none}
.prior-clock--low{color:var(--accent);opacity:1}
.prior-plot{width:100%;height:auto;max-height:64vh;display:block;color:var(--fg)}
.prior-hit{cursor:pointer}
.prior-tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;font-size:.85rem;line-height:1.35;max-width:250px;box-shadow:var(--shadow)}
.prior-tip[hidden]{display:none}
.prior-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.8rem;opacity:.85;margin-top:.3rem}
.prior-legend__item{display:inline-flex;align-items:center;gap:.4rem}
.prior-legend i{display:inline-block;width:2rem;height:0;border-top:2px solid currentColor;opacity:.5}
.prior-legend i.mean{border-top:4px solid var(--accent-2,#e9c46a);opacity:1}
.prior-legend i.logu{border-top:2px dashed currentColor;opacity:.9}
.prior-legend i.uni{border-top:2px dotted currentColor;opacity:.9}
input.num,input.txt{width:100%;font-size:1.1rem;padding:.5rem;border-radius:8px;border:1px solid var(--line);background:var(--field);color:var(--fg)}
/* a column: head and composer stay put, only the list of questions scrolls */
.comments-panel{position:fixed;right:0;top:var(--chrome-h);bottom:0;width:min(380px,100vw);background:var(--panel-solid);border-left:1px solid var(--line);padding:.8rem;display:flex;flex-direction:column;overflow:hidden;z-index:28;transform:translateX(100%);transition:transform .25s}
#comment-list{flex:1;min-height:0;overflow:auto}
.comment-form{flex:none;padding-top:.4rem}
.comments-panel.open{transform:none}
.comments-panel__head{flex:none;display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .6rem}
.comments-panel__head h3{margin:0;flex:1}
.comments-panel__close{padding:.35rem .7rem;font-size:1.1rem;line-height:1}
.comment{padding:.5rem 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.comment .who{font-weight:600;opacity:.85}
.comment .num{color:var(--accent-2,#e9c46a);font-weight:700;margin-right:.3rem}
.comment-form textarea{width:100%;min-height:70px;border-radius:8px;border:1px solid var(--line);background:var(--field);color:var(--fg);padding:.4rem}
.comment-form input[name=website]{position:absolute;left:-9999px}
.comment-toggle{position:fixed;bottom:2.6rem;left:12px;z-index:27;transition:bottom .2s}
[data-anchor]{position:relative}
[data-anchor]>.anchor-mark{position:absolute;top:0;right:0;font-size:.75rem;background:var(--surface);border-radius:999px;padding:.1rem .5rem;cursor:pointer}
.present-bar{position:fixed;bottom:0;left:0;right:0;display:flex;gap:.5rem;align-items:center;padding:.5rem .8rem;background:var(--panel);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:26;font-size:.85rem;transition:opacity .3s}
.present-bar--hidden{opacity:0;pointer-events:none}
.present-bar .grow{flex:1}
.present-bar .ia{display:flex;gap:.2rem;align-items:center;padding:.2rem .4rem;border:1px solid var(--line);border-radius:8px}
.present-bar .ia .id{opacity:.7;margin-right:.3rem}
.present-bar .ia button.on{background:var(--accent);color:var(--on-accent)}
.qr-box{position:fixed;top:48px;right:12px;z-index:27;background:#fff;padding:.6rem;border-radius:10px;color:#000;text-align:center;font:600 .9rem var(--font-display)}
.qr-box[hidden]{display:none}
.qr-box svg{width:200px;height:200px;display:block}
.join{max-width:420px;margin:10vh auto;padding:1.5rem}
.join label{display:block;margin:.8rem 0 .3rem;font-weight:600}
.join .tags{display:grid;gap:.4rem}
.join .tags label{display:flex;gap:.5rem;align-items:center;font-weight:400;margin:0;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px}
@media (max-width:700px){.slide-page{padding:1.2rem 1rem}}