deck-pilot {
  display: contents;
}
deck-pilot .rail { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 50; pointer-events: none; background: transparent }
deck-pilot .rail::after { content: ''; display: block; height: 100%; width: var(--deck-progress, 0%); background: var(--color-accent); transition: width 180ms linear }
deck-pilot .hud { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 50; display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-3); color: var(--slide-muted); opacity: 0.35; transition: opacity 150ms linear }
deck-pilot .hud button { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0; padding: 0.15rem 0.45rem; cursor: pointer }
deck-pilot .hud button:hover { color: var(--slide-accent) }
@media (prefers-reduced-motion: reduce) { deck-pilot .rail::after { transition: none } }
@media (prefers-reduced-motion: reduce) { deck-pilot .hud { transition: none } }
@media print { deck-pilot .rail { display: none } }
@media print { deck-pilot .hud { display: none } }
deck-pilot .hud:hover { opacity: 1 }
deck-pilot .hud:focus-within { opacity: 1 }
deck-pilot .hud output { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }