/* Chrome for the painting: a play control and the chapter rail, spliced from the motion exemplar. */
html, body { margin: 0; height: 100%; background: var(--gl-bg); color: var(--gl-text); overflow: hidden; }
body { font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
::selection { background: var(--gl-border-strong); color: var(--gl-text); }

#paint { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: manipulation; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fallback { position: fixed; inset: auto 24px 50% 24px; max-width: 46ch; margin: 0 auto; text-align: center; color: var(--gl-faint); }

.ctl { position: fixed; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; z-index: 6;
  opacity: 0.55; transition: opacity .3s cubic-bezier(.16,1,.3,1); }
.ctl:hover, .ctl:focus-within { opacity: 1; }
.ctl > button { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gl-border-strong);
  background: rgba(0,0,0,0.35); color: var(--gl-text); display: grid; place-items: center; cursor: pointer; }
.ctl > button:hover { border-color: var(--gl-faint); }
.ctl > button:focus-visible, .seg:focus-visible { outline: 1px solid var(--gl-text); outline-offset: 3px; }
.rail { flex: 1; display: flex; gap: 5px; max-width: 520px; margin: 0 auto; }
.seg { flex: 1 1 0; min-width: 0; height: 22px; display: flex; align-items: center; cursor: pointer; background: none; border: 0; padding: 0; }
.seg i { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--gl-border-strong); overflow: hidden; }
.seg i b { display: block; height: 100%; width: 0; background: var(--gl-text); }
.seg:hover i { background: var(--gl-faint); }

.bare .ctl { display: none; }

@media (max-width: 900px) and (orientation: portrait) {
  .ctl { left: 16px; right: 16px; bottom: 16px; gap: 10px; }
  .rail { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .ctl { transition: none; }
}