{
  "sourceCommit": "1e83951",
  "unitTests": {
    "pass": 246,
    "fail": 0
  },
  "manifestStaticDeliveryTests": {
    "pass": 21,
    "fail": 0
  },
  "geometry": {
    "cases": 384,
    "failedChecks": 0
  },
  "cases": [
    {
      "browser": "chromium",
      "layout": "classic",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-classic"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(23, 23, 25)",
          "color": "rgb(23, 23, 25)",
          "parentColor": "rgb(23, 23, 25)",
          "legacy": false,
          "label": "Play or pause",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Previous",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Next",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or Pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "classic",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-classic"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(23, 23, 25)",
          "color": "rgb(23, 23, 25)",
          "parentColor": "rgb(23, 23, 25)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "classic",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-classic"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(23, 23, 25)",
          "color": "rgb(23, 23, 25)",
          "parentColor": "rgb(23, 23, 25)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "f7-swipe",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-f7-swipe"
      ],
      "previousX": 4,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 70,
          "height": 70,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Previous",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Next",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "f7-swipe",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-f7-swipe"
      ],
      "previousX": 4,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 70,
          "height": 70,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(0, 0, 0)",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "f7-swipe",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-f7-swipe"
      ],
      "previousX": 4,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 70,
          "height": 70,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "glass-stage",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-glass-stage"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Previous",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Next",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(201, 196, 194)",
          "color": "rgb(201, 196, 194)",
          "parentColor": "rgb(201, 196, 194)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(201, 196, 194)",
          "color": "rgb(201, 196, 194)",
          "parentColor": "rgb(201, 196, 194)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 62,
          "height": 62,
          "visible": true
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(201, 196, 194)",
          "color": "rgb(201, 196, 194)",
          "parentColor": "rgb(201, 196, 194)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "glass-stage",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-glass-stage"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(74, 72, 67)",
          "color": "rgb(74, 72, 67)",
          "parentColor": "rgb(74, 72, 67)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(74, 72, 67)",
          "color": "rgb(74, 72, 67)",
          "parentColor": "rgb(74, 72, 67)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 62,
          "height": 62,
          "visible": true
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(74, 72, 67)",
          "color": "rgb(74, 72, 67)",
          "parentColor": "rgb(74, 72, 67)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "glass-stage",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-glass-stage"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 62,
          "height": 62,
          "visible": true
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "bento-hub",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-bento-hub"
      ],
      "previousX": 0,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "bento-hub",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-bento-hub"
      ],
      "previousX": 0,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(0, 0, 0)",
          "color": "rgb(0, 0, 0)",
          "parentColor": "rgb(0, 0, 0)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(15, 23, 42)",
          "color": "rgb(15, 23, 42)",
          "parentColor": "rgb(15, 23, 42)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(15, 23, 42)",
          "color": "rgb(15, 23, 42)",
          "parentColor": "rgb(15, 23, 42)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "chromium",
      "layout": "bento-hub",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-bento-hub"
      ],
      "previousX": 0,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "classic",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-classic"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(23, 23, 25)",
          "color": "rgb(23, 23, 25)",
          "parentColor": "rgb(23, 23, 25)",
          "legacy": false,
          "label": "Play or pause",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Previous",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Next",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or Pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(243, 241, 237)",
          "color": "rgb(243, 241, 237)",
          "parentColor": "rgb(243, 241, 237)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "classic",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-classic"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(23, 23, 25)",
          "color": "rgb(23, 23, 25)",
          "parentColor": "rgb(23, 23, 25)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "classic",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-classic"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(23, 23, 25)",
          "color": "rgb(23, 23, 25)",
          "parentColor": "rgb(23, 23, 25)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 48,
          "height": 48,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "f7-swipe",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-f7-swipe"
      ],
      "previousX": 4,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 70,
          "height": 70,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Previous",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Next",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(245, 243, 240)",
          "stroke": "rgb(245, 243, 240)",
          "color": "rgb(245, 243, 240)",
          "parentColor": "rgb(245, 243, 240)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "f7-swipe",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-f7-swipe"
      ],
      "previousX": 4,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 70,
          "height": 70,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgba(0, 0, 0, 0.8)",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(27, 26, 24)",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "f7-swipe",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-f7-swipe"
      ],
      "previousX": 4,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 70,
          "height": 70,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-f7-swipe",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-f7-swipe",
          "fill": "rgb(255, 255, 255)",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "glass-stage",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-glass-stage"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Previous",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Next",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(201, 196, 194)",
          "color": "rgb(201, 196, 194)",
          "parentColor": "rgb(201, 196, 194)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(201, 196, 194)",
          "color": "rgb(201, 196, 194)",
          "parentColor": "rgb(201, 196, 194)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 62,
          "height": 62,
          "visible": true
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(201, 196, 194)",
          "color": "rgb(201, 196, 194)",
          "parentColor": "rgb(201, 196, 194)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(227, 226, 231)",
          "color": "rgb(227, 226, 231)",
          "parentColor": "rgb(227, 226, 231)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "glass-stage",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-glass-stage"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(74, 72, 67)",
          "color": "rgb(74, 72, 67)",
          "parentColor": "rgb(74, 72, 67)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(74, 72, 67)",
          "color": "rgb(74, 72, 67)",
          "parentColor": "rgb(74, 72, 67)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 62,
          "height": 62,
          "visible": true
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(74, 72, 67)",
          "color": "rgb(74, 72, 67)",
          "parentColor": "rgb(74, 72, 67)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(27, 26, 24)",
          "color": "rgb(27, 26, 24)",
          "parentColor": "rgb(27, 26, 24)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "glass-stage",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-glass-stage"
      ],
      "previousX": 5,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 64,
          "height": 64,
          "visible": true
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 44,
          "height": 44,
          "visible": true
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 62,
          "height": 62,
          "visible": true
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 46,
          "height": 46,
          "visible": true
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-glass-stage",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "bento-hub",
      "theme": "dark",
      "activeDrawing": [
        "transport-shape-bento-hub"
      ],
      "previousX": 0,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(148, 163, 184)",
          "color": "rgb(148, 163, 184)",
          "parentColor": "rgb(148, 163, 184)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "bento-hub",
      "theme": "light",
      "activeDrawing": [
        "transport-shape-bento-hub"
      ],
      "previousX": 0,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(71, 85, 105)",
          "color": "rgb(71, 85, 105)",
          "parentColor": "rgb(71, 85, 105)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgba(0, 0, 0, 0.8)",
          "color": "rgba(0, 0, 0, 0.8)",
          "parentColor": "rgba(0, 0, 0, 0.8)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(15, 23, 42)",
          "color": "rgb(15, 23, 42)",
          "parentColor": "rgb(15, 23, 42)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(15, 23, 42)",
          "color": "rgb(15, 23, 42)",
          "parentColor": "rgb(15, 23, 42)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    },
    {
      "browser": "webkit",
      "layout": "bento-hub",
      "theme": "contrast",
      "activeDrawing": [
        "transport-shape-bento-hub"
      ],
      "previousX": 0,
      "legacyGlyphs": [],
      "controls": [
        {
          "id": "playBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "prevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "nextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "back10Btn",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "fwd10Btn",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(221, 221, 221)",
          "color": "rgb(221, 221, 221)",
          "parentColor": "rgb(221, 221, 221)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgBack",
          "kind": "back10",
          "href": "#transport-back10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Back 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgPlay",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "stgFwd",
          "kind": "forward10",
          "href": "#transport-forward10-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Forward 10 seconds",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "miniPlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePrevBtn",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Previous track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "servicePlayBtn",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(9, 11, 14)",
          "color": "rgb(9, 11, 14)",
          "parentColor": "rgb(9, 11, 14)",
          "legacy": false,
          "label": "Play",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "serviceNextBtn",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(241, 245, 249)",
          "color": "rgb(241, 245, 249)",
          "parentColor": "rgb(241, 245, 249)",
          "legacy": false,
          "label": "Next track",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvPrev",
          "kind": "previous",
          "href": "#transport-previous-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Previous",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvToggle",
          "kind": "play",
          "href": "#transport-play-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Play or pause",
          "width": 0,
          "height": 0,
          "visible": false
        },
        {
          "id": "rvNext",
          "kind": "next",
          "href": "#transport-next-bento-hub",
          "fill": "none",
          "stroke": "rgb(255, 255, 255)",
          "color": "rgb(255, 255, 255)",
          "parentColor": "rgb(255, 255, 255)",
          "legacy": false,
          "label": "Next",
          "width": 0,
          "height": 0,
          "visible": false
        }
      ],
      "playbackStates": [
        [
          "play",
          "play",
          "play",
          "play"
        ],
        [
          "pause",
          "pause",
          "pause",
          "pause"
        ],
        [
          "play",
          "play",
          "play",
          "play"
        ]
      ],
      "fullscreenStates": [
        "pause",
        "play"
      ],
      "carPlaying": "pause",
      "remoteStates": [
        "play",
        "pause",
        "play"
      ]
    }
  ]
}