[data-demo-playback] .demo-playback-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;top:90px;z-index:8;padding:12px 16px;margin:0 0 16px;background:#fff;color:#09264c;border:1px solid #ccdbe7;border-left:4px solid #2874bb;border-radius:10px;box-shadow:0 4px 16px #09264c0c;font:14px/1.5 Arial,sans-serif;text-align:left}
.demo-playback-bar p{margin:0!important;font:inherit!important;color:inherit!important;flex:1}
.demo-playback-bar button{flex:none;min-height:42px;padding:8px 12px;border:1px solid #ccdbe7;border-radius:8px;background:#eef4f9;color:#09264c;font:600 13px/1.4 Arial,sans-serif;cursor:pointer;white-space:normal}
.demo-playback-bar button:focus-visible{outline:3px solid #2874bb;outline-offset:3px}
.demo-playback-cursor{position:absolute;z-index:9;width:30px;height:38px;pointer-events:none;transition:left .55s ease,top .55s ease;filter:drop-shadow(0 2px 3px #09264c44)}
.demo-playback-cursor[hidden]{display:none!important}
.demo-playback-cursor.is-clicking{transform:scale(.88)}
@media(max-width:680px){[data-demo-playback] .demo-playback-bar{top:76px;align-items:flex-start;padding:10px;gap:8px;font-size:13px}.demo-playback-bar button{max-width:116px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.demo-playback-cursor{transition:none}}
.demo-playback-bar{grid-column:1/-1}
[data-demo-playback] .demo-playback-bar-controls-only{justify-content:flex-end;padding:0;background:transparent;border:0;box-shadow:none}