/* Website edition of the supplied 38-slide session. */
/* Keep the original Slack palette and typography. Darken small text only. */
:root { --verify: #94500a; --demo: #725500; }
@media (min-width: 701px) {
  .slide .body { font-size: 2.4cqi; }
  .slide h1 { font-size: 3.8cqi; margin-bottom: 1.7cqi; }
  .cue .big { font-size: 6.4cqi; }
  .cue .tag { margin-bottom: .8em; }
  #slide-11 .body { font-size: 2.2cqi !important; }
  #slide-29 h1 { font-size: 3.4cqi; }
  #slide-29 .body { font-size: 2.1cqi !important; }
}
.slide:not(.dark) [style*="color:var(--daytime)"] { color: #08718f !important; }
.slide.dark.s-evening .div-wrap .ttl .no-in { color: #f46590; }
.slide.dark.s-evening .cue .tag { color: #fff; background: #ba1548; }
.chip { white-space: normal; line-height: 1.35; }
.code, code { white-space: normal; overflow-wrap: anywhere; }
.deck-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 8px 24px; background: #fbfafd; color: #4a154b; border-bottom: 1px solid #ddd3e6; font-size: 14px; font-weight: 700; }
.deck-header a { padding: 10px 6px; }
html.js body.colombo-deck { min-height: 100dvh; }
html.js .frame { inset: 62px 0 64px; }
html.js .frame .slide { width: min(100vw, calc((100dvh - 126px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; max-height: 100%; overflow: auto; }
.deck-controls { display: none; }
html.js .deck-controls { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; z-index: 25; align-items: center; justify-content: center; gap: 12px; padding: 8px; background: #fbfafd; color: #4a154b; border-top: 1px solid #ddd3e6; }
.deck-controls button { min-width: 44px; min-height: 44px; border: 1px solid #4a154b; border-radius: 6px; padding: 8px 12px; background: #4a154b; color: #fbfafd; font: inherit; cursor: pointer; }
.deck-controls button:hover, .deck-controls button[aria-pressed=true] { background: #ecb22e; color: #4a154b; }
.deck-controls button:disabled { background: #eee7f1; color: #6b6273; cursor: default; }
a:focus-visible, button:focus-visible { outline: 3px solid #a7154a; outline-offset: 3px; }
.dark a:focus-visible { outline-color: #ecb22e; }
.deck-controls output { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.deck-progress { position: fixed; left: 0; bottom: 64px; height: 4px; z-index: 26; background: #e01e5a; }
.demo-note { font-size: 1.7cqi; color: #cdbbd6; margin-top: 1.4em; }
html.js .frame .notes { display: none; bottom: 64px; padding: 16px 24px; max-height: 28dvh; background: #fff4db; color: #4b390e; z-index: 23; }
html.js body.show-notes .frame.active .notes { display: block; }
html:not(.js) body .notes { display: block; }
html.js .resource-privacy { position: fixed; left: 12px; bottom: 23px; z-index: 28; color: #4a154b; background: #fbfafd; }
@media (max-width: 700px) {
  .deck-header { padding: 6px 12px; min-height: 60px; }
  .deck-header > span { display: none; }
  html.js .frame { inset: 60px 0 110px; }
  .slide, html.js .frame .slide { width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; padding: 26px 24px 24px; overflow-y: auto; font-size: 17px; }
  .slide::before { width: 5px; }
  .kicker { font-size: 14px; margin-bottom: 12px; }
  h1, .slide.fig h1 { font-size: 29px; margin-bottom: 20px; }
  .body, .slide .body[style] { font-size: 18px !important; min-height: auto; flex: 0 0 auto; }
  .small, .chip, .stage h2, .intro .role, .creds span { font-size: 14px; }
  .title-block .big, .cue .big, .title-block .big.mid, .div-wrap .ttl { font-size: 39px; line-height: 1.16; }
  .title-block .sub, .cue .sub, .div-wrap .say { font-size: 21px; max-width: none; }
  .title-block .who, .div-wrap .runs, .demo-note { font-size: 15px; }
  .cue .tag { font-size: 14px; }
  .cue { flex: 0 0 auto; min-height: auto; margin: 24px 0; }
  .div-wrap .emo { font-size: 38px; }
  .cols, .cols.wide-left, .pair, .shots, .thanks, .intro { grid-template-columns: 1fr; gap: 24px; }
  .five, .five[style] { grid-template-columns: 1fr !important; gap: 18px; }
  .five .it, .stage li { font-size: 18px; }
  .figure { flex: 0 0 auto; min-height: 0; margin: 15px 0; }
  .figure img { width: 100%; max-height: none; }
  .intro .face { width: 144px; height: 144px; }
  .intro .name { font-size: 29px; }
  .intro .role { margin: 12px 0; }
  .stage h2 { margin: 18px 0 10px; }
  .stage ul { gap: 8px; }
  .creds { margin-top: 18px; }
  .creds span { line-height: 1.4; }
  .shot .im img { max-height: none; width: 100%; }
  .thanks-qr img { width: 160px; height: 160px; padding: 8px; }
  .thanks-qr span { font-size: 14px; }
  .thanks-qr { justify-self: start; }
  .foot { font-size: 12px; padding-top: 24px; margin-top: 20px; }
  .foot .src { word-break: normal; overflow-wrap: anywhere; }
  .code, code { font-size: 14px; }
  .deck-controls { flex-wrap: wrap; }
  html.js .deck-controls { height: 110px; align-content: start; gap: 8px; font-size: 14px; }
  .deck-controls button { padding: 8px; }
  .deck-progress { bottom: 110px; }
  html.js .frame .notes { bottom: 110px; }
  html.js .resource-privacy { bottom: 10px; font-size: 12px; }
  html:not(.js) .slide { height: auto; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  html.js body { overflow: visible; }
  .deck-header, .deck-controls, .deck-progress, .resource-privacy { display: none !important; }
  html.js .frame { display: block !important; position: static; break-after: page; }
  .slide, html.js .frame .slide { width: 100%; max-height: none; height: auto; overflow: visible; }
  html.js .frame .notes { display: block; position: static; }
}

/* The shared site control follows the deck palette here. */
.colombo-deck .locale-toggle { padding: 3px; background: #fbfafd; color: #4a154b; border-color: #bba9c5; }
.colombo-deck .locale-toggle::before { background: #4a154b; }
.colombo-deck .locale-option { color: #65536c; }
.colombo-deck .locale-option.is-active { color: #fff; }