#accessible-player { position: fixed; z-index: 2147483647; inset: auto 0 0; padding: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #15171b; color: #f5f5f0; font: 16px/1.5 system-ui, sans-serif; border-top: 1px solid #b7bac2; }
#accessible-player h1 { font: 600 18px/1.3 system-ui, sans-serif; margin: 0; text-shadow: none; color: #f5f5f0; }
#accessible-player p { margin: 0; }
#accessible-player a { color: #f5d547; text-decoration: underline; }
#accessible-player button { background: #f5d547; color: #15171b; padding: 10px; font: inherit; border: 2px solid; }
#accessible-player :is(a,button,audio):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#accessible-player [hidden] { display: none; }
html.demo-static body > :not(#accessible-player):not(script) { display: none !important; }
html.demo-static #accessible-player { position: static; max-width: 48rem; margin: 10vh auto; padding: 24px; }
html.demo-static body { overflow: auto; background: #15171b; }
html.demo-static #accessible-player audio { width: 100%; }
html.demo-paused *, html.demo-static * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }