:root { font-family: system-ui, sans-serif; color-scheme: light; background: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
#status { margin: 24px; color: #627384; }
.slide { position: relative; width: 100%; overflow: hidden; background: #fff; }
.slide canvas { display: block; width: 100%; height: 100%; }
.slide .textLayer { position: absolute; inset: 0; }
nav { position: fixed; z-index: 2; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; color: #fff; background: #192a3fe6; border-radius: 24px; }
[hidden] { display: none !important; }
button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 24px; background: transparent; color: inherit; font: 26px system-ui; cursor: pointer; }
button:focus-visible { outline: 2px solid #23ae96; outline-offset: 2px; }
button:disabled { opacity: .3; cursor: default; }
output { min-width: 58px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (orientation: landscape) {
  html, body { height: 100%; }
  html { overflow-y: hidden; }
  #slides { display: flex; width: 100%; height: 100dvh; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .slide { flex: none; width: auto; height: 100dvh; }
}
nav.idle { opacity: 0; pointer-events: none; }
nav { transition: opacity .2s; }
nav:has(:focus-visible) { opacity: 1; pointer-events: auto; }