.playback-dock{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(var(--playback-nav-clearance,80px) + 8px);width:min(calc(100% - 24px),496px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#fff;border:1px solid var(--purple);border-radius:16px;box-shadow:0 5px 22px #30294424;color:var(--ink);font-size:1rem}
.playback-dock[hidden]{display:none}
.playback-dock span{min-width:0;line-height:1.4}
.playback-dock button{flex:none;min-height:48px;padding:10px 18px;border:0;border-radius:12px;background:var(--purple);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.playback-dock button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
body.has-playback .app-shell{padding-bottom:calc(var(--playback-nav-clearance,80px) + var(--playback-dock-height,72px) + 24px)}
body.has-playback #toast{bottom:calc(var(--playback-nav-clearance,80px) + var(--playback-dock-height,72px) + 16px)}
@media(max-width:340px){.playback-dock{gap:8px;padding:8px}.playback-dock button{padding:10px 12px}}