html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; }
body.pointer { cursor: default; }
#deck { position: fixed; inset: 0; }
.slide { position: absolute; inset: 0; display: none; }
.slide.on { display: block; }
.slide img.full { width: 100%; height: 100%; object-fit: contain; background: #000; }
.slide.text { background: linear-gradient(#E4FFE4, #F8FFF8); display: none; align-items: center; justify-content: center;
  font-family: "M", system-ui, sans-serif; text-align: center; color: #101710; }
.slide.text.on { display: flex; }
.slide.text h1 { font-weight: 900; font-size: 7vw; margin: 0; color: #0A5F3E; }
.slide.text p { font-weight: 600; font-size: 2.4vw; color: #546554; }
.slide video { width: 100%; height: 100%; object-fit: contain; background: #E4FFE4; display: none; }
.slide.video video { display: block; }
.slide.video .live-wrap { display: none; }
#hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); font: 600 14px system-ui; color: #fff;
  background: rgba(0,0,0,.55); padding: 8px 14px; border-radius: 99px; transition: opacity .4s; pointer-events: none; }
#hint.gone { opacity: 0; }
/* For the person at the laptop only: what the live slide is showing. Hidden on other slides. */
#op { position: fixed; left: 14px; bottom: 10px; font: 600 12px system-ui; color: rgba(84,101,84,.6); pointer-events: none; }

/* Inside the deck the operator line replaces the live screen's own status. */
#deck .conn { display: none; }