[
  {
    "path": ".github/dependabot.yml",
    "content": "version: 2\nupdates:\n  - package-ecosystem: 'npm'\n    directories:\n      - '/'\n    schedule:\n      interval: 'daily'\n    commit-message:\n      prefix: 'fix'\n      prefix-development: 'chore'\n    groups:\n      prod-dependencies:\n        patterns:\n          - 'media-chrome'\n    allow:\n      - dependency-name: 'media-chrome'\n"
  },
  {
    "path": ".github/release-please/.release-please-manifest.json",
    "content": "{\n  \".\": \"0.3.4\",\n  \"examples/vanilla\": \"1.11.15\",\n  \"examples/remix\": \"1.0.6\",\n  \"scripts/build-theme\": \"0.1.1\",\n  \"site\": \"1.11.15\",\n  \"themes/demuxed-2022\": \"0.1.2\",\n  \"themes/halloween\": \"0.1.2\",\n  \"themes/instaplay\": \"0.1.2\",\n  \"themes/microvideo\": \"0.2.0\",\n  \"themes/minimal\": \"0.2.1\",\n  \"themes/notflix\": \"0.1.2\",\n  \"themes/reelplay\": \"0.1.2\",\n  \"themes/sutro\": \"0.2.1\",\n  \"themes/sutro-audio\": \"0.0.8\",\n  \"themes/tailwind-audio\": \"0.0.13\",\n  \"themes/vimeonova\": \"0.1.2\",\n  \"themes/winamp\": \"0.0.13\",\n  \"themes/x-mas\": \"0.1.2\",\n  \"themes/yt\": \"0.2.1\"\n}\n"
  },
  {
    "path": ".github/release-please/release-please-config.json",
    "content": "{\n  \"bump-minor-pre-major\": true,\n  \"bump-patch-for-minor-pre-major\": false,\n  \"tag-separator\": \"@\",\n  \"include-component-in-tag\": true,\n  \"include-v-in-tag\": false,\n  \"plugins\": [\"node-workspace\"],\n  \"packages\": {\n    \".\": {\n      \"exclude-paths\": [\"examples\", \"scripts\", \"site\"]\n    },\n    \"examples/vanilla\": {},\n    \"examples/remix\": {},\n    \"site\": {},\n    \"scripts/build-theme\": {},\n    \"themes/demuxed-2022\": {},\n    \"themes/halloween\": {},\n    \"themes/instaplay\": {},\n    \"themes/microvideo\": {},\n    \"themes/minimal\": {},\n    \"themes/notflix\": {},\n    \"themes/reelplay\": {},\n    \"themes/sutro\": {},\n    \"themes/sutro-audio\": {},\n    \"themes/tailwind-audio\": {},\n    \"themes/vimeonova\": {},\n    \"themes/winamp\": {},\n    \"themes/x-mas\": {},\n    \"themes/yt\": {}\n  }\n}\n"
  },
  {
    "path": ".github/workflows/cd.yml",
    "content": "name: CD\n\nconcurrency: production\n\non:\n  push:\n    branches:\n      - main\n\njobs:\n  lint:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 24\n          cache: 'npm'\n      - run: npm ci\n      - run: npx -y turbo lint\n\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 24\n          cache: 'npm'\n      - run: npm ci\n      - run: npx -y turbo test\n\n  release:\n    needs: [lint, test]\n    runs-on: ubuntu-latest\n    environment: production\n    permissions:\n      contents: write\n      pull-requests: write\n      id-token: write\n\n    steps:\n      - uses: googleapis/release-please-action@v4\n        id: release\n        with:\n          config-file: .github/release-please/release-please-config.json\n          manifest-file: .github/release-please/.release-please-manifest.json\n\n      - uses: actions/checkout@v4\n        # these if statements ensure that a publication only occurs when\n        # a new release is created:\n        if: ${{ steps.release.outputs.releases_created == 'true' }}\n\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 24\n          registry-url: 'https://registry.npmjs.org'\n        if: ${{ steps.release.outputs.releases_created == 'true' }}\n\n      - run: npm ci\n        if: ${{ steps.release.outputs.releases_created == 'true' }}\n\n      - run: npx -y turbo build\n        if: ${{ steps.release.outputs.releases_created == 'true' }}\n\n      - run: npm exec -c publish-packages\n        if: ${{ steps.release.outputs.releases_created == 'true' }}\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: CI\n\non: [push, pull_request]\n\njobs:\n  lint:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 24\n          cache: 'npm'\n      - run: npm ci\n      - run: npx -y turbo lint\n\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 24\n          cache: 'npm'\n      - run: npm ci\n      - run: npx -y turbo test\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n.turbo/\ndist/\nnode_modules/\nsite/.content-collections/\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\n## [0.3.4](https://github.com/muxinc/player.style/compare/player.style@0.3.3...player.style@0.3.4) (2026-04-15)\n\n\n### Bug Fixes\n\n* **microvideo:** update template.html ([dcf73c5](https://github.com/muxinc/player.style/commit/dcf73c53745e94ee7b95fa18e957c84aa2118b41))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/microvideo bumped from 0.1.3 to 0.2.0\n\n## [0.3.3](https://github.com/muxinc/player.style/compare/player.style@0.3.2...player.style@0.3.3) (2026-04-15)\n\n\n### Bug Fixes\n\n* **deps:** Bump media-chrome ([f1a9d2c](https://github.com/muxinc/player.style/commit/f1a9d2c2319cdd2206e0e25f0326a55599afb39d))\n\n## [0.3.2](https://github.com/muxinc/player.style/compare/player.style@0.3.1...player.style@0.3.2) (2026-03-25)\n\n\n### Bug Fixes\n\n* add smooth transition to volume control appear on hover in microvideo  ([#215](https://github.com/muxinc/player.style/issues/215)) ([5059029](https://github.com/muxinc/player.style/commit/5059029fe61a8c0b0a02851f9dab5f130cd38fec))\n* bump media-chrome from 4.16.1 to 4.17.0 in the prod-dependencies group across 1 directory ([dd2446d](https://github.com/muxinc/player.style/commit/dd2446df855a013da8e55a5af8fdf9440e67f45a))\n* bump media-chrome in the prod-dependencies group across 1 directory ([e5a49b1](https://github.com/muxinc/player.style/commit/e5a49b1f25f56eab88b470984e2de0ff42895e44))\n* Bumped media-chrome to latest release ([6b04fd6](https://github.com/muxinc/player.style/commit/6b04fd67a13c756aaeaa44f77ea6ce4adc23c20d))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/microvideo bumped from 0.1.2 to 0.1.3\n\n## [0.3.1](https://github.com/muxinc/player.style/compare/player.style@0.3.0...player.style@0.3.1) (2025-12-04)\n\n\n### Bug Fixes\n\n* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.1.1 to 0.1.2\n    * @player.style/halloween bumped from 0.1.1 to 0.1.2\n    * @player.style/x-mas bumped from 0.1.1 to 0.1.2\n    * @player.style/instaplay bumped from 0.1.1 to 0.1.2\n    * @player.style/microvideo bumped from 0.1.1 to 0.1.2\n    * @player.style/minimal bumped from 0.2.0 to 0.2.1\n    * @player.style/notflix bumped from 0.1.1 to 0.1.2\n    * @player.style/reelplay bumped from 0.1.1 to 0.1.2\n    * @player.style/sutro bumped from 0.2.0 to 0.2.1\n    * @player.style/sutro-audio bumped from 0.0.7 to 0.0.8\n    * @player.style/tailwind-audio bumped from 0.0.12 to 0.0.13\n    * @player.style/vimeonova bumped from 0.1.1 to 0.1.2\n    * @player.style/winamp bumped from 0.0.12 to 0.0.13\n    * @player.style/yt bumped from 0.2.0 to 0.2.1\n\n## [0.3.0](https://github.com/muxinc/player.style/compare/player.style@0.2.0...player.style@0.3.0) (2025-10-01)\n\n\n### Features\n\n* :minimal theme video title ([#203](https://github.com/muxinc/player.style/issues/203)) ([a01e1a0](https://github.com/muxinc/player.style/commit/a01e1a0a31d861186e002ee0b1b48dd99cd31957))\n\n\n### Bug Fixes\n\n* bump media-chrome in the prod-dependencies group across 1 directory ([#206](https://github.com/muxinc/player.style/issues/206)) ([ff2e40e](https://github.com/muxinc/player.style/commit/ff2e40e3a862b1c43fd4905481eca7d06e9f5c4b))\n* bump media-chrome in the prod-dependencies group across 1 directory ([#208](https://github.com/muxinc/player.style/issues/208)) ([fd06f87](https://github.com/muxinc/player.style/commit/fd06f875b23d7107efc5268f3e9fab1407a5e7aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/minimal bumped from 0.1.1 to 0.2.0\n\n## [0.2.0](https://github.com/muxinc/player.style/compare/player.style@0.1.10...player.style@0.2.0) (2025-08-22)\n\n\n### Features\n\n* Sutro bump for ([75f730b](https://github.com/muxinc/player.style/commit/75f730b3682856b6ec74880dbb6ecb942aa93a63))\n\n\n### Bug Fixes\n\n* upgrade dependencies ([#198](https://github.com/muxinc/player.style/issues/198)) ([bad9d8f](https://github.com/muxinc/player.style/commit/bad9d8f3378895743cc5e0763d7b326fb0d70d94))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/sutro bumped from 0.1.1 to 0.2.0\n    * @player.style/yt bumped from 0.1.1 to 0.2.0\n\n## [0.1.10](https://github.com/muxinc/player.style/compare/player.style@0.1.9...player.style@0.1.10) (2025-08-01)\n\n\n### Bug Fixes\n\n* : Add index.js to Warn Against Naked Imports ([#196](https://github.com/muxinc/player.style/issues/196)) ([6029d09](https://github.com/muxinc/player.style/commit/6029d094737b335d855a1ab9d5766620445b644d))\n* bump media-chrome in the prod-dependencies group across 1 directory ([#189](https://github.com/muxinc/player.style/issues/189)) ([f40edbd](https://github.com/muxinc/player.style/commit/f40edbd387c0a0e10d675767395841587c0c20b1))\n\n## [0.1.9](https://github.com/muxinc/player.style/compare/player.style@0.1.8...player.style@0.1.9) (2025-06-12)\n\n\n### Bug Fixes\n\n* bump media-chrome in the prod-dependencies group across 1 directory ([#185](https://github.com/muxinc/player.style/issues/185)) ([d82ade5](https://github.com/muxinc/player.style/commit/d82ade587e3ee1ef44bf13ece4f122e6ba1dafb0))\n* bump media-chrome in the prod-dependencies group across 1 directory ([#188](https://github.com/muxinc/player.style/issues/188)) ([ec538f8](https://github.com/muxinc/player.style/commit/ec538f804cf490ec0cc0783f44c5757c8006d52c))\n\n## [0.1.8](https://github.com/muxinc/player.style/compare/player.style@0.1.7...player.style@0.1.8) (2025-05-01)\n\n\n### Bug Fixes\n\n* bump media-chrome in the prod-dependencies group across 1 directory ([#183](https://github.com/muxinc/player.style/issues/183)) ([e2c1c98](https://github.com/muxinc/player.style/commit/e2c1c98362ac126e2657688d7b028661f48bf3ab))\n\n## [0.1.7](https://github.com/muxinc/player.style/compare/player.style@0.1.6...player.style@0.1.7) (2025-03-31)\n\n\n### Bug Fixes\n\n* bump media-chrome in the prod-dependencies group across 1 directory ([#176](https://github.com/muxinc/player.style/issues/176)) ([9ed57cc](https://github.com/muxinc/player.style/commit/9ed57ccd4d6d56fc0c81ccef2265d0b114bedbc4))\n\n## [0.1.6](https://github.com/muxinc/player.style/compare/player.style@0.1.5...player.style@0.1.6) (2025-03-14)\n\n\n### Bug Fixes\n\n* bump media-chrome in the prod-dependencies group across 1 directory ([#169](https://github.com/muxinc/player.style/issues/169)) ([e80f7a7](https://github.com/muxinc/player.style/commit/e80f7a704122eb9e9b5994de599552b1a509bc1f))\n\n## [0.1.5](https://github.com/muxinc/player.style/compare/player.style@0.1.4...player.style@0.1.5) (2025-03-05)\n\n\n### Bug Fixes\n\n* dependabot syntax ([bf90fc8](https://github.com/muxinc/player.style/commit/bf90fc808f5dd4102d4947401fb2784af89e3e89))\n\n## [0.1.4](https://github.com/muxinc/player.style/compare/player.style@0.1.3...player.style@0.1.4) (2025-02-13)\n\n\n### Bug Fixes\n\n* upgrade MC ([#162](https://github.com/muxinc/player.style/issues/162)) ([b88abeb](https://github.com/muxinc/player.style/commit/b88abeb86fa078ffa8494cdc71637531eb0296d6))\n\n## [0.1.3](https://github.com/muxinc/player.style/compare/player.style@0.1.2...player.style@0.1.3) (2025-01-29)\n\n\n### Bug Fixes\n\n* upgrade Media Chrome ([#152](https://github.com/muxinc/player.style/issues/152)) ([6b676e4](https://github.com/muxinc/player.style/commit/6b676e451b862cfe642cd02bcf1b46d9b9f48cb1))\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/player.style@0.1.1...player.style@0.1.2) (2025-01-23)\n\n\n### Bug Fixes\n\n* upgrade MC ([#149](https://github.com/muxinc/player.style/issues/149)) ([4ecfd39](https://github.com/muxinc/player.style/commit/4ecfd391b7695ae3bf0daa3d7118dc9c58c0b0a8))\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/player.style@0.1.0...player.style@0.1.1) (2024-12-19)\n\n\n### Bug Fixes\n\n* use ce-la-react, fix React 19+ wrappers ([#146](https://github.com/muxinc/player.style/issues/146)) ([10f29b3](https://github.com/muxinc/player.style/commit/10f29b3f20b1a359300aaa0cd5c1f93a9e0a59dc))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.1.0 to 0.1.1\n    * @player.style/halloween bumped from 0.1.0 to 0.1.1\n    * @player.style/x-mas bumped from 0.1.0 to 0.1.1\n    * @player.style/instaplay bumped from 0.1.0 to 0.1.1\n    * @player.style/microvideo bumped from 0.1.0 to 0.1.1\n    * @player.style/minimal bumped from 0.1.0 to 0.1.1\n    * @player.style/notflix bumped from 0.1.0 to 0.1.1\n    * @player.style/reelplay bumped from 0.1.0 to 0.1.1\n    * @player.style/sutro bumped from 0.1.0 to 0.1.1\n    * @player.style/sutro-audio bumped from 0.0.6 to 0.0.7\n    * @player.style/tailwind-audio bumped from 0.0.11 to 0.0.12\n    * @player.style/vimeonova bumped from 0.1.0 to 0.1.1\n    * @player.style/winamp bumped from 0.0.11 to 0.0.12\n    * @player.style/yt bumped from 0.1.0 to 0.1.1\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/player.style@0.0.14...player.style@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add basics of theme picker ([61152dc](https://github.com/muxinc/player.style/commit/61152dcec3fb6f68a7dccbb581628ea9469dcfa4))\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))\n* add Demuxed 2022 theme ([#20](https://github.com/muxinc/player.style/issues/20)) ([f61ba1c](https://github.com/muxinc/player.style/commit/f61ba1cb1dc39e1f2f3d503c1fb4b26aa25f0759))\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add resize slider and light/dark mode toggle ([57d0b91](https://github.com/muxinc/player.style/commit/57d0b9120fc16dfb2533a46b4652a41396862e93))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n* add tailwind-audio to release pkgs ([9448055](https://github.com/muxinc/player.style/commit/9448055ed3ef1e8ea5087a558686d10e3d5bd745))\n* add Vimeonova color support ([#54](https://github.com/muxinc/player.style/issues/54)) ([e954611](https://github.com/muxinc/player.style/commit/e9546111a87a1974da018fe95d1f50c5fed25720))\n* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))\n* custom colors + hide empty settings menu item ([#85](https://github.com/muxinc/player.style/issues/85)) ([d2815b3](https://github.com/muxinc/player.style/commit/d2815b34b023e7e5829326528fc51c895f42fca7))\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)\n* exclude build-theme ([#129](https://github.com/muxinc/player.style/issues/129)) ([656409b](https://github.com/muxinc/player.style/commit/656409bb39b6224beebef7dd3c3300666082a55a))\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))\n* make themes dev deps, prevent dup deps ([#82](https://github.com/muxinc/player.style/issues/82)) ([bd0e705](https://github.com/muxinc/player.style/commit/bd0e705b3e7cd4042b70d3a9d423f778d1f74185)), closes [#80](https://github.com/muxinc/player.style/issues/80)\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* responsive fullscreen ([#61](https://github.com/muxinc/player.style/issues/61)) ([05343b8](https://github.com/muxinc/player.style/commit/05343b8ddfe6eafec255384d8ab40b63b1a724f0)), closes [#59](https://github.com/muxinc/player.style/issues/59)\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari menu position bug ([554d69d](https://github.com/muxinc/player.style/commit/554d69dfd21ad7f90799db46f50a4f12ac6b7aed))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* Safari Vimeonova play button height ([487c6b1](https://github.com/muxinc/player.style/commit/487c6b131f9ce225f826e80f8c42d83b8932a808)), closes [#103](https://github.com/muxinc/player.style/issues/103)\n* Stop the YT play button from transitioning on load ([#42](https://github.com/muxinc/player.style/issues/42)) ([ebf45cd](https://github.com/muxinc/player.style/commit/ebf45cdc41e23d123667cda1bcd1d5191791356c))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade Media Chrome 4.1.4 ([6673f13](https://github.com/muxinc/player.style/commit/6673f13dc2165fb59b90f660f8b2ee602704f0d1))\n* upgrade Media Chrome 4.2.0 ([8797cf0](https://github.com/muxinc/player.style/commit/8797cf0a0abfe965563eb36e9c1d2a7d933b7526))\n* upgrade Media Chrome 4.2.1 ([7363898](https://github.com/muxinc/player.style/commit/736389836227d207685d8a28a4bce8ee5786d37c))\n* upgrade media-chrome 4.1.1 ([4e231a3](https://github.com/muxinc/player.style/commit/4e231a3d9eecde095446f60578e172ed660c6f2e))\n* upgrade media-chrome v4.1.3 ([9588e41](https://github.com/muxinc/player.style/commit/9588e41239485ae00eeac0d587c0d46ed744ed27))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n* vimeonova issues ([48fa5ff](https://github.com/muxinc/player.style/commit/48fa5ffe4f922468a6fc3518a9fbbb2b2b322084))\n* yt theme media caption button underline ([#128](https://github.com/muxinc/player.style/issues/128)) ([6902420](https://github.com/muxinc/player.style/commit/6902420b78d4178aa35a627add1692e728d3cf7d))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.0.12 to 0.1.0\n    * @player.style/halloween bumped from 0.0.2 to 0.1.0\n    * @player.style/x-mas bumped from 0.0.3 to 0.1.0\n    * @player.style/instaplay bumped from 0.0.7 to 0.1.0\n    * @player.style/microvideo bumped from 0.0.11 to 0.1.0\n    * @player.style/minimal bumped from 0.0.11 to 0.1.0\n    * @player.style/notflix bumped from 0.0.8 to 0.1.0\n    * @player.style/reelplay bumped from 0.0.5 to 0.1.0\n    * @player.style/sutro bumped from 0.0.8 to 0.1.0\n    * @player.style/vimeonova bumped from 0.0.11 to 0.1.0\n    * @player.style/yt bumped from 0.0.12 to 0.1.0\n\n## [0.0.14](https://github.com/muxinc/player.style/compare/player.style@0.0.13...player.style@0.0.14) (2024-12-02)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/x-mas bumped from 0.0.1 to 0.0.3\n    * @player.style/sutro bumped from 0.0.7 to 0.0.8\n\n## [0.0.13](https://github.com/muxinc/player.style/compare/player.style@0.0.12...player.style@0.0.13) (2024-11-11)\n\n\n### Bug Fixes\n\n* exclude build-theme ([#129](https://github.com/muxinc/player.style/issues/129)) ([656409b](https://github.com/muxinc/player.style/commit/656409bb39b6224beebef7dd3c3300666082a55a))\n* yt theme media caption button underline ([#128](https://github.com/muxinc/player.style/issues/128)) ([6902420](https://github.com/muxinc/player.style/commit/6902420b78d4178aa35a627add1692e728d3cf7d))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/yt bumped from 0.0.11 to 0.0.12\n\n## [0.0.12](https://github.com/muxinc/player.style/compare/player.style@0.0.11...player.style@0.0.12) (2024-10-29)\n\n\n### Features\n\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.0.11 to 0.0.12\n    * @player.style/halloween bumped from 0.0.1 to 0.0.2\n    * @player.style/instaplay bumped from 0.0.6 to 0.0.7\n    * @player.style/microvideo bumped from 0.0.10 to 0.0.11\n    * @player.style/minimal bumped from 0.0.10 to 0.0.11\n    * @player.style/notflix bumped from 0.0.7 to 0.0.8\n    * @player.style/reelplay bumped from 0.0.4 to 0.0.5\n    * @player.style/sutro bumped from 0.0.6 to 0.0.7\n    * @player.style/sutro-audio bumped from 0.0.5 to 0.0.6\n    * @player.style/tailwind-audio bumped from 0.0.10 to 0.0.11\n    * @player.style/vimeonova bumped from 0.0.10 to 0.0.11\n    * @player.style/winamp bumped from 0.0.10 to 0.0.11\n    * @player.style/yt bumped from 0.0.10 to 0.0.11\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/player.style@0.0.10...player.style@0.0.11) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Bug Fixes\n\n* upgrade Media Chrome 4.2.1 ([7363898](https://github.com/muxinc/player.style/commit/736389836227d207685d8a28a4bce8ee5786d37c))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.0.10 to 0.0.11\n    * @player.style/instaplay bumped from 0.0.5 to 0.0.6\n    * @player.style/microvideo bumped from 0.0.9 to 0.0.10\n    * @player.style/minimal bumped from 0.0.9 to 0.0.10\n    * @player.style/notflix bumped from 0.0.6 to 0.0.7\n    * @player.style/reelplay bumped from 0.0.3 to 0.0.4\n    * @player.style/sutro bumped from 0.0.5 to 0.0.6\n    * @player.style/sutro-audio bumped from 0.0.4 to 0.0.5\n    * @player.style/tailwind-audio bumped from 0.0.9 to 0.0.10\n    * @player.style/vimeonova bumped from 0.0.9 to 0.0.10\n    * @player.style/winamp bumped from 0.0.9 to 0.0.10\n    * @player.style/yt bumped from 0.0.9 to 0.0.10\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/player.style@0.0.9...player.style@0.0.10) (2024-10-08)\n\n\n### Features\n\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n* Safari Vimeonova play button height ([487c6b1](https://github.com/muxinc/player.style/commit/487c6b131f9ce225f826e80f8c42d83b8932a808)), closes [#103](https://github.com/muxinc/player.style/issues/103)\n* upgrade Media Chrome 4.1.4 ([6673f13](https://github.com/muxinc/player.style/commit/6673f13dc2165fb59b90f660f8b2ee602704f0d1))\n* upgrade Media Chrome 4.2.0 ([8797cf0](https://github.com/muxinc/player.style/commit/8797cf0a0abfe965563eb36e9c1d2a7d933b7526))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.0.9 to 0.0.10\n    * @player.style/instaplay bumped from 0.0.4 to 0.0.5\n    * @player.style/microvideo bumped from 0.0.8 to 0.0.9\n    * @player.style/minimal bumped from 0.0.8 to 0.0.9\n    * @player.style/notflix bumped from 0.0.5 to 0.0.6\n    * @player.style/reelplay bumped from 0.0.2 to 0.0.3\n    * @player.style/sutro bumped from 0.0.4 to 0.0.5\n    * @player.style/sutro-audio bumped from 0.0.3 to 0.0.4\n    * @player.style/tailwind-audio bumped from 0.0.8 to 0.0.9\n    * @player.style/vimeonova bumped from 0.0.8 to 0.0.9\n    * @player.style/winamp bumped from 0.0.8 to 0.0.9\n    * @player.style/yt bumped from 0.0.8 to 0.0.9\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/player.style@0.0.8...player.style@0.0.9) (2024-09-25)\n\n\n### Features\n\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n\n\n### Bug Fixes\n\n* Safari menu position bug ([554d69d](https://github.com/muxinc/player.style/commit/554d69dfd21ad7f90799db46f50a4f12ac6b7aed))\n* upgrade media-chrome 4.1.1 ([4e231a3](https://github.com/muxinc/player.style/commit/4e231a3d9eecde095446f60578e172ed660c6f2e))\n* upgrade media-chrome v4.1.3 ([9588e41](https://github.com/muxinc/player.style/commit/9588e41239485ae00eeac0d587c0d46ed744ed27))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.0.8 to 0.0.9\n    * @player.style/instaplay bumped from 0.0.3 to 0.0.4\n    * @player.style/microvideo bumped from 0.0.7 to 0.0.8\n    * @player.style/minimal bumped from 0.0.7 to 0.0.8\n    * @player.style/reelplay bumped from 0.0.1 to 0.0.2\n    * @player.style/sutro bumped from 0.0.3 to 0.0.4\n    * @player.style/sutro-audio bumped from 0.0.2 to 0.0.3\n    * @player.style/tailwind-audio bumped from 0.0.7 to 0.0.8\n    * @player.style/vimeonova bumped from 0.0.7 to 0.0.8\n    * @player.style/winamp bumped from 0.0.7 to 0.0.8\n    * @player.style/yt bumped from 0.0.7 to 0.0.8\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/player.style@0.0.7...player.style@0.0.8) (2024-09-10)\n\n\n### Features\n\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n\n\n### Bug Fixes\n\n* custom colors + hide empty settings menu item ([#85](https://github.com/muxinc/player.style/issues/85)) ([d2815b3](https://github.com/muxinc/player.style/commit/d2815b34b023e7e5829326528fc51c895f42fca7))\n* make themes dev deps, prevent dup deps ([#82](https://github.com/muxinc/player.style/issues/82)) ([bd0e705](https://github.com/muxinc/player.style/commit/bd0e705b3e7cd4042b70d3a9d423f778d1f74185)), closes [#80](https://github.com/muxinc/player.style/issues/80)\n* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * @player.style/demuxed-2022 bumped from 0.0.7 to 0.0.8\n    * @player.style/instaplay bumped from 0.0.2 to 0.0.3\n    * @player.style/microvideo bumped from 0.0.6 to 0.0.7\n    * @player.style/minimal bumped from 0.0.6 to 0.0.7\n    * @player.style/sutro bumped from 0.0.2 to 0.0.3\n    * @player.style/sutro-audio bumped from 0.0.1 to 0.0.2\n    * @player.style/tailwind-audio bumped from 0.0.6 to 0.0.7\n    * @player.style/vimeonova bumped from 0.0.6 to 0.0.7\n    * @player.style/winamp bumped from 0.0.6 to 0.0.7\n    * @player.style/yt bumped from 0.0.6 to 0.0.7\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/player.style@0.0.6...player.style@0.0.7) (2024-08-15)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n\n\n### Bug Fixes\n\n* add tailwind-audio to release pkgs ([9448055](https://github.com/muxinc/player.style/commit/9448055ed3ef1e8ea5087a558686d10e3d5bd745))\n* add Vimeonova color support ([#54](https://github.com/muxinc/player.style/issues/54)) ([e954611](https://github.com/muxinc/player.style/commit/e9546111a87a1974da018fe95d1f50c5fed25720))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* responsive fullscreen ([#61](https://github.com/muxinc/player.style/issues/61)) ([05343b8](https://github.com/muxinc/player.style/commit/05343b8ddfe6eafec255384d8ab40b63b1a724f0)), closes [#59](https://github.com/muxinc/player.style/issues/59)\n* Stop the YT play button from transitioning on load ([#42](https://github.com/muxinc/player.style/issues/42)) ([ebf45cd](https://github.com/muxinc/player.style/commit/ebf45cdc41e23d123667cda1bcd1d5191791356c))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vimeonova issues ([48fa5ff](https://github.com/muxinc/player.style/commit/48fa5ffe4f922468a6fc3518a9fbbb2b2b322084))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * @player.style/sutro bumped from 0.0.1 to 0.0.2\n    * @player.style/demuxed-2022 bumped from 0.0.6 to 0.0.7\n    * @player.style/instaplay bumped from 0.0.1 to 0.0.2\n    * @player.style/microvideo bumped from 0.0.5 to 0.0.6\n    * @player.style/minimal bumped from 0.0.5 to 0.0.6\n    * @player.style/tailwind-audio bumped from 0.0.5 to 0.0.6\n    * @player.style/vimeonova bumped from 0.0.5 to 0.0.6\n    * @player.style/winamp bumped from 0.0.5 to 0.0.6\n    * @player.style/yt bumped from 0.0.5 to 0.0.6\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/player.style@0.0.5...player.style@0.0.6) (2024-06-21)\n\n\n### Features\n\n* add Demuxed 2022 theme ([#20](https://github.com/muxinc/player.style/issues/20)) ([f61ba1c](https://github.com/muxinc/player.style/commit/f61ba1cb1dc39e1f2f3d503c1fb4b26aa25f0759))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * @player.style/demuxed-2022 bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/player.style@0.0.4...player.style@0.0.5) (2024-06-17)\n\n\n### Bug Fixes\n\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * @player.style/microvideo bumped from 0.0.4 to 0.0.5\n    * @player.style/minimal bumped from 0.0.4 to 0.0.5\n    * @player.style/yt bumped from 0.0.4 to 0.0.5\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/player.style@0.0.3...player.style@0.0.4) (2024-06-17)\n\n\n### Bug Fixes\n\n* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * @player.style/microvideo bumped from 0.0.3 to 0.0.4\n    * @player.style/minimal bumped from 0.0.3 to 0.0.4\n    * @player.style/yt bumped from 0.0.3 to 0.0.4\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/player.style@0.0.2...player.style@0.0.3) (2024-06-14)\n\n\n### Bug Fixes\n\n* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * @player.style/microvideo bumped from 0.0.2 to 0.0.3\n    * @player.style/minimal bumped from 0.0.2 to 0.0.3\n    * @player.style/youtube bumped from 0.0.2 to 0.0.3\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/player.style-v0.0.1...player.style@0.0.2) (2024-06-14)\n\n\n### Features\n\n* add basics of theme picker ([61152dc](https://github.com/muxinc/player.style/commit/61152dcec3fb6f68a7dccbb581628ea9469dcfa4))\n* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add resize slider and light/dark mode toggle ([57d0b91](https://github.com/muxinc/player.style/commit/57d0b9120fc16dfb2533a46b4652a41396862e93))\n* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * @player.style/microvideo bumped from 0.0.1 to 0.0.2\n    * @player.style/minimal bumped from 0.0.1 to 0.0.2\n    * @player.style/youtube bumped from 0.0.1 to 0.0.2\n"
  },
  {
    "path": "LICENSE",
    "content": "Copyright (c) 2024 Mux, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# player.style\n\nVideo and audio player themes built with [Media Chrome](https://media-chrome.org), for every web player and framework.\n\nVisit [player.style](https://player.style).\n\n# Local Development\n\nThis is a monorepo that uses NPM workspaces and Turbo. The root package is also a published package, which currently prevents having identically named NPM scripts in both the root and workspace packages.\n\nFor this reason we use the `turbo` CLI directly in the root directory.\n\n1. Install Turbo globally: `npm install -g turbo`\n1. Clone the repository\n1. Run `npm install`\n1. Run `turbo build`\n\n### Handling Dependency Conflicts with `media-chrome`\n\nIf your project already includes `media-chrome` and you encounter dependency conflicts, you can override the resolution to ensure compatibility.\n\n#### Solution: Using `overrides` in `package.json` (for npm 8+)\n\nIf you're using **npm** 8 or later, you can enforce a specific version of `media-chrome` in your `package.json` by adding an `overrides` field:\n\n```json\n{\n  \"overrides\": {\n    \"media-chrome\": \"<your-desired-version>\"\n  }\n}\n```\n\nIf you’re using **Yarn**, you can enforce a specific version with the resolutions field:\n\n```json\n{\n  \"resolutions\": {\n    \"media-chrome\": \"<your-desired-version>\"\n  }\n}\n```\n"
  },
  {
    "path": "examples/remix/.eslintrc.cjs",
    "content": "/**\n * This is intended to be a basic starting point for linting in your app.\n * It relies on recommended configs out of the box for simplicity, but you can\n * and should modify this configuration to best suit your team's needs.\n */\n\n/** @type {import('eslint').Linter.Config} */\nmodule.exports = {\n  root: true,\n  parserOptions: {\n    ecmaVersion: \"latest\",\n    sourceType: \"module\",\n    ecmaFeatures: {\n      jsx: true,\n    },\n  },\n  env: {\n    browser: true,\n    commonjs: true,\n    es6: true,\n  },\n  ignorePatterns: [\"!**/.server\", \"!**/.client\"],\n\n  // Base config\n  extends: [\"eslint:recommended\"],\n\n  overrides: [\n    // React\n    {\n      files: [\"**/*.{js,jsx,ts,tsx}\"],\n      plugins: [\"react\", \"jsx-a11y\"],\n      extends: [\n        \"plugin:react/recommended\",\n        \"plugin:react/jsx-runtime\",\n        \"plugin:react-hooks/recommended\",\n        \"plugin:jsx-a11y/recommended\",\n      ],\n      settings: {\n        react: {\n          version: \"detect\",\n        },\n        formComponents: [\"Form\"],\n        linkComponents: [\n          { name: \"Link\", linkAttribute: \"to\" },\n          { name: \"NavLink\", linkAttribute: \"to\" },\n        ],\n        \"import/resolver\": {\n          typescript: {},\n        },\n      },\n    },\n\n    // Typescript\n    {\n      files: [\"**/*.{ts,tsx}\"],\n      plugins: [\"@typescript-eslint\", \"import\"],\n      parser: \"@typescript-eslint/parser\",\n      settings: {\n        \"import/internal-regex\": \"^~/\",\n        \"import/resolver\": {\n          node: {\n            extensions: [\".ts\", \".tsx\"],\n          },\n          typescript: {\n            alwaysTryTypes: true,\n          },\n        },\n      },\n      extends: [\n        \"plugin:@typescript-eslint/recommended\",\n        \"plugin:import/recommended\",\n        \"plugin:import/typescript\",\n      ],\n    },\n\n    // Node\n    {\n      files: [\".eslintrc.cjs\"],\n      env: {\n        node: true,\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "examples/remix/.gitignore",
    "content": "node_modules\n\n/.cache\n/build\n.env\n"
  },
  {
    "path": "examples/remix/CHANGELOG.md",
    "content": "# Changelog\n\n## [1.0.6](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.5...test-mux-player-style-remix@1.0.6) (2026-04-15)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from ^0.3.3 to ^0.3.4\n\n## [1.0.5](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.4...test-mux-player-style-remix@1.0.5) (2026-04-15)\n\n\n### Bug Fixes\n\n* **deps:** Bump media-chrome ([f1a9d2c](https://github.com/muxinc/player.style/commit/f1a9d2c2319cdd2206e0e25f0326a55599afb39d))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from ^0.3.2 to ^0.3.3\n\n## [1.0.4](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.3...test-mux-player-style-remix@1.0.4) (2026-03-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from ^0.3.1 to ^0.3.2\n\n## [1.0.3](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.2...test-mux-player-style-remix@1.0.3) (2025-12-04)\n\n\n### Bug Fixes\n\n* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from ^0.3.0 to ^0.3.1\n\n## [1.0.2](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.1...test-mux-player-style-remix@1.0.2) (2025-10-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from ^0.2.0 to ^0.3.0\n\n## [1.0.1](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix-v1.0.0...test-mux-player-style-remix@1.0.1) (2025-08-22)\n\n\n### Bug Fixes\n\n* use ce-la-react, fix React 19+ wrappers ([#146](https://github.com/muxinc/player.style/issues/146)) ([10f29b3](https://github.com/muxinc/player.style/commit/10f29b3f20b1a359300aaa0cd5c1f93a9e0a59dc))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from ^0.1.0 to ^0.2.0\n"
  },
  {
    "path": "examples/remix/README.md",
    "content": "# Welcome to Remix!\n\n- 📖 [Remix docs](https://remix.run/docs)\n\n## Development\n\nRun the dev server:\n\n```shellscript\nnpm run dev\n```\n\n## Deployment\n\nFirst, build your app for production:\n\n```sh\nnpm run build\n```\n\nThen run the app in production mode:\n\n```sh\nnpm start\n```\n\nNow you'll need to pick a host to deploy it to.\n\n### DIY\n\nIf you're familiar with deploying Node applications, the built-in Remix app server is production-ready.\n\nMake sure to deploy the output of `npm run build`\n\n- `build/server`\n- `build/client`\n\n## Styling\n\nThis template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.\n"
  },
  {
    "path": "examples/remix/app/entry.client.tsx",
    "content": "/**\n * By default, Remix will handle hydrating your app on the client for you.\n * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨\n * For more information, see https://remix.run/file-conventions/entry.client\n */\n\nimport { RemixBrowser } from \"@remix-run/react\";\nimport { startTransition, StrictMode } from \"react\";\nimport { hydrateRoot } from \"react-dom/client\";\n\nstartTransition(() => {\n  hydrateRoot(\n    document,\n    <StrictMode>\n      <RemixBrowser />\n    </StrictMode>\n  );\n});\n"
  },
  {
    "path": "examples/remix/app/entry.server.tsx",
    "content": "/**\n * By default, Remix will handle generating the HTTP Response for you.\n * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨\n * For more information, see https://remix.run/file-conventions/entry.server\n */\n\nimport { PassThrough } from \"node:stream\";\n\nimport type { AppLoadContext, EntryContext } from \"@remix-run/node\";\nimport { createReadableStreamFromReadable } from \"@remix-run/node\";\nimport { RemixServer } from \"@remix-run/react\";\nimport { isbot } from \"isbot\";\nimport { renderToPipeableStream } from \"react-dom/server\";\n\nconst ABORT_DELAY = 5_000;\n\nexport default function handleRequest(\n  request: Request,\n  responseStatusCode: number,\n  responseHeaders: Headers,\n  remixContext: EntryContext,\n  // This is ignored so we can keep it in the template for visibility.  Feel\n  // free to delete this parameter in your app if you're not using it!\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  loadContext: AppLoadContext\n) {\n  return isbot(request.headers.get(\"user-agent\") || \"\")\n    ? handleBotRequest(\n        request,\n        responseStatusCode,\n        responseHeaders,\n        remixContext\n      )\n    : handleBrowserRequest(\n        request,\n        responseStatusCode,\n        responseHeaders,\n        remixContext\n      );\n}\n\nfunction handleBotRequest(\n  request: Request,\n  responseStatusCode: number,\n  responseHeaders: Headers,\n  remixContext: EntryContext\n) {\n  return new Promise((resolve, reject) => {\n    let shellRendered = false;\n    const { pipe, abort } = renderToPipeableStream(\n      <RemixServer\n        context={remixContext}\n        url={request.url}\n        abortDelay={ABORT_DELAY}\n      />,\n      {\n        onAllReady() {\n          shellRendered = true;\n          const body = new PassThrough();\n          const stream = createReadableStreamFromReadable(body);\n\n          responseHeaders.set(\"Content-Type\", \"text/html\");\n\n          resolve(\n            new Response(stream, {\n              headers: responseHeaders,\n              status: responseStatusCode,\n            })\n          );\n\n          pipe(body);\n        },\n        onShellError(error: unknown) {\n          reject(error);\n        },\n        onError(error: unknown) {\n          responseStatusCode = 500;\n          // Log streaming rendering errors from inside the shell.  Don't log\n          // errors encountered during initial shell rendering since they'll\n          // reject and get logged in handleDocumentRequest.\n          if (shellRendered) {\n            console.error(error);\n          }\n        },\n      }\n    );\n\n    setTimeout(abort, ABORT_DELAY);\n  });\n}\n\nfunction handleBrowserRequest(\n  request: Request,\n  responseStatusCode: number,\n  responseHeaders: Headers,\n  remixContext: EntryContext\n) {\n  return new Promise((resolve, reject) => {\n    let shellRendered = false;\n    const { pipe, abort } = renderToPipeableStream(\n      <RemixServer\n        context={remixContext}\n        url={request.url}\n        abortDelay={ABORT_DELAY}\n      />,\n      {\n        onShellReady() {\n          shellRendered = true;\n          const body = new PassThrough();\n          const stream = createReadableStreamFromReadable(body);\n\n          responseHeaders.set(\"Content-Type\", \"text/html\");\n\n          resolve(\n            new Response(stream, {\n              headers: responseHeaders,\n              status: responseStatusCode,\n            })\n          );\n\n          pipe(body);\n        },\n        onShellError(error: unknown) {\n          reject(error);\n        },\n        onError(error: unknown) {\n          responseStatusCode = 500;\n          // Log streaming rendering errors from inside the shell.  Don't log\n          // errors encountered during initial shell rendering since they'll\n          // reject and get logged in handleDocumentRequest.\n          if (shellRendered) {\n            console.error(error);\n          }\n        },\n      }\n    );\n\n    setTimeout(abort, ABORT_DELAY);\n  });\n}\n"
  },
  {
    "path": "examples/remix/app/root.tsx",
    "content": "import {\n  Links,\n  Meta,\n  Outlet,\n  Scripts,\n  ScrollRestoration,\n} from \"@remix-run/react\";\nimport type { LinksFunction } from \"@remix-run/node\";\n\nimport \"./tailwind.css\";\n\nexport const links: LinksFunction = () => [\n  { rel: \"preconnect\", href: \"https://fonts.googleapis.com\" },\n  {\n    rel: \"preconnect\",\n    href: \"https://fonts.gstatic.com\",\n    crossOrigin: \"anonymous\",\n  },\n  {\n    rel: \"stylesheet\",\n    href: \"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\",\n  },\n];\n\nexport function Layout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <Meta />\n        <Links />\n      </head>\n      <body>\n        {children}\n        <ScrollRestoration />\n        <Scripts />\n      </body>\n    </html>\n  );\n}\n\nexport default function App() {\n  return <Outlet />;\n}\n"
  },
  {
    "path": "examples/remix/app/routes/_index.tsx",
    "content": "import type { MetaFunction } from \"@remix-run/node\";\nimport MuxPlayer from \"@mux/mux-video-react\";\nimport MuxTheme from \"player.style/yt/react\";\n\nconst PLAYBACK_ID = \"4XN6dqxPTZJPU021TuSGIHPaOuKQkrxHF\";\n\nexport const meta: MetaFunction = () => {\n  return [{ title: \"Test Mux player.style\" }];\n};\n\nexport default function Index() {\n  return (\n    <main className=\"flex flex-col gap-8 items-center justify-center h-screen container mx-auto\">\n      <h1 className=\"text-4xl font-bold text-center\">\n        Mux Video player.style test (Remix)\n      </h1>\n\n      <MuxTheme\n        style={{\n          width: \"100%\",\n        }}\n      >\n        <MuxPlayer\n          poster={`https://image.mux.com/${PLAYBACK_ID}/thumbnail.jpg`}\n          slot=\"media\"\n          className=\"overflow-hidden\"\n          playbackId={PLAYBACK_ID}\n          streamType=\"on-demand\"\n          playsInline\n          disablePictureInPicture={true}\n          disableCookies={true}\n          disableTracking={true}\n        />\n      </MuxTheme>\n    </main>\n  );\n}\n"
  },
  {
    "path": "examples/remix/app/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody {\n  @apply bg-white dark:bg-gray-950;\n\n  @media (prefers-color-scheme: dark) {\n    color-scheme: dark;\n  }\n}\n"
  },
  {
    "path": "examples/remix/package.json",
    "content": "{\n  \"name\": \"test-mux-player-style-remix\",\n  \"version\": \"1.0.6\",\n  \"private\": true,\n  \"sideEffects\": false,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"build\": \"remix vite:build\",\n    \"dev\": \"remix vite:dev\",\n    \"start\": \"remix-serve ./build/server/index.js\",\n    \"typecheck\": \"tsc\"\n  },\n  \"dependencies\": {\n    \"@mux/mux-video-react\": \"^0.13.1\",\n    \"@remix-run/node\": \"^2.15.1\",\n    \"@remix-run/react\": \"^2.15.1\",\n    \"@remix-run/serve\": \"^2.15.1\",\n    \"isbot\": \"^5.1.18\",\n    \"media-chrome\": \"^4.19.0\",\n    \"player.style\": \"^0.3.4\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@remix-run/dev\": \"^2.15.1\",\n    \"@types/react\": \"^18.2.20\",\n    \"@types/react-dom\": \"^18.2.7\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.7.4\",\n    \"@typescript-eslint/parser\": \"^6.7.4\",\n    \"autoprefixer\": \"^10.4.20\",\n    \"eslint\": \"^8.38.0\",\n    \"eslint-import-resolver-typescript\": \"^3.6.1\",\n    \"eslint-plugin-import\": \"^2.28.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.7.1\",\n    \"eslint-plugin-react\": \"^7.33.2\",\n    \"eslint-plugin-react-hooks\": \"^4.6.0\",\n    \"postcss\": \"^8.4.49\",\n    \"tailwindcss\": \"^3.4.17\",\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^6.0.4\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  },\n  \"engines\": {\n    \"node\": \">=20.0.0\"\n  }\n}\n"
  },
  {
    "path": "examples/remix/postcss.config.js",
    "content": "export default {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n"
  },
  {
    "path": "examples/remix/tailwind.config.ts",
    "content": "import type { Config } from \"tailwindcss\";\n\nexport default {\n  content: [\"./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}\"],\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: [\n          \"Inter\",\n          \"ui-sans-serif\",\n          \"system-ui\",\n          \"sans-serif\",\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\",\n        ],\n      },\n    },\n  },\n  plugins: [],\n} satisfies Config;\n"
  },
  {
    "path": "examples/remix/tsconfig.json",
    "content": "{\n  \"include\": [\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \"**/.server/**/*.ts\",\n    \"**/.server/**/*.tsx\",\n    \"**/.client/**/*.ts\",\n    \"**/.client/**/*.tsx\"\n  ],\n  \"compilerOptions\": {\n    \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES2022\"],\n    \"types\": [\"@remix-run/node\", \"vite/client\"],\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"jsx\": \"react-jsx\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"resolveJsonModule\": true,\n    \"target\": \"ES2022\",\n    \"strict\": true,\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"~/*\": [\"./app/*\"]\n    },\n\n    // Vite takes care of building everything, not tsc.\n    \"noEmit\": true\n  }\n}\n"
  },
  {
    "path": "examples/remix/vite.config.ts",
    "content": "import { vitePlugin as remix } from \"@remix-run/dev\";\nimport { defineConfig } from \"vite\";\nimport tsconfigPaths from \"vite-tsconfig-paths\";\n\ndeclare module \"@remix-run/node\" {\n  interface Future {\n    v3_singleFetch: true;\n  }\n}\n\nexport default defineConfig({\n  plugins: [\n    remix({\n      future: {\n        v3_fetcherPersist: true,\n        v3_relativeSplatPath: true,\n        v3_throwAbortReason: true,\n        v3_singleFetch: true,\n        v3_lazyRouteDiscovery: true,\n      },\n    }),\n    tsconfigPaths(),\n  ],\n});\n"
  },
  {
    "path": "examples/vanilla/CHANGELOG.md",
    "content": "# Changelog\n\n## [1.11.15](https://github.com/muxinc/player.style/compare/vanilla@1.11.14...vanilla@1.11.15) (2026-04-15)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.3 to 0.3.4\n\n## [1.11.14](https://github.com/muxinc/player.style/compare/vanilla@1.11.13...vanilla@1.11.14) (2026-04-15)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.2 to 0.3.3\n\n## [1.11.13](https://github.com/muxinc/player.style/compare/vanilla@1.11.12...vanilla@1.11.13) (2026-03-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.1 to 0.3.2\n\n## [1.11.12](https://github.com/muxinc/player.style/compare/vanilla@1.11.11...vanilla@1.11.12) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.0 to 0.3.1\n\n## [1.11.11](https://github.com/muxinc/player.style/compare/vanilla@1.11.10...vanilla@1.11.11) (2025-10-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.2.0 to 0.3.0\n\n## [1.11.10](https://github.com/muxinc/player.style/compare/vanilla@1.11.9...vanilla@1.11.10) (2025-08-22)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.10 to 0.2.0\n\n## [1.11.9](https://github.com/muxinc/player.style/compare/vanilla@1.11.8...vanilla@1.11.9) (2025-08-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.9 to 0.1.10\n\n## [1.11.8](https://github.com/muxinc/player.style/compare/vanilla@1.11.7...vanilla@1.11.8) (2025-06-12)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.8 to 0.1.9\n\n## [1.11.7](https://github.com/muxinc/player.style/compare/vanilla@1.11.6...vanilla@1.11.7) (2025-05-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.7 to 0.1.8\n\n## [1.11.6](https://github.com/muxinc/player.style/compare/vanilla@1.11.5...vanilla@1.11.6) (2025-03-31)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.6 to 0.1.7\n\n## [1.11.5](https://github.com/muxinc/player.style/compare/vanilla@1.11.4...vanilla@1.11.5) (2025-03-14)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.5 to 0.1.6\n\n## [1.11.4](https://github.com/muxinc/player.style/compare/vanilla@1.11.3...vanilla@1.11.4) (2025-03-05)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.4 to 0.1.5\n\n## [1.11.3](https://github.com/muxinc/player.style/compare/vanilla@1.11.2...vanilla@1.11.3) (2025-02-13)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.3 to 0.1.4\n\n## [1.11.2](https://github.com/muxinc/player.style/compare/vanilla@1.11.1...vanilla@1.11.2) (2025-01-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.2 to 0.1.3\n\n## [1.11.1](https://github.com/muxinc/player.style/compare/vanilla@1.11.0...vanilla@1.11.1) (2025-01-23)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.1 to 0.1.2\n\n## [1.11.0](https://github.com/muxinc/player.style/compare/vanilla-v1.10.0...vanilla@1.11.0) (2024-12-19)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n## [1.10.0](https://github.com/muxinc/player.style/compare/vanilla-v1.9.0...vanilla@1.10.0) (2024-12-19)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.0 to 0.1.1\n\n## [1.9.0](https://github.com/muxinc/player.style/compare/vanilla-v1.8.0...vanilla@1.9.0) (2024-12-09)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.14 to 0.1.0\n\n## [1.8.0](https://github.com/muxinc/player.style/compare/vanilla-v1.7.0...vanilla@1.8.0) (2024-12-02)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.13 to 0.0.14\n\n## [1.7.0](https://github.com/muxinc/player.style/compare/vanilla-v1.6.0...vanilla@1.7.0) (2024-11-11)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.12 to 0.0.13\n\n## [1.6.0](https://github.com/muxinc/player.style/compare/vanilla-v1.5.0...vanilla@1.6.0) (2024-10-29)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.11 to 0.0.12\n\n## [1.5.0](https://github.com/muxinc/player.style/compare/vanilla-v1.4.0...vanilla@1.5.0) (2024-10-21)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.10 to 0.0.11\n\n## [1.4.0](https://github.com/muxinc/player.style/compare/vanilla-v1.3.0...vanilla@1.4.0) (2024-10-08)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.9 to 0.0.10\n\n## [1.3.0](https://github.com/muxinc/player.style/compare/vanilla-v1.2.0...vanilla@1.3.0) (2024-09-25)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.8 to 0.0.9\n\n## [1.2.0](https://github.com/muxinc/player.style/compare/vanilla-v1.1.0...vanilla@1.2.0) (2024-09-10)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.7 to 0.0.8\n\n## [1.1.0](https://github.com/muxinc/player.style/compare/vanilla@1.0.4...vanilla@1.1.0) (2024-08-15)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.6 to 0.0.7\n\n## [1.0.4](https://github.com/muxinc/player.style/compare/vanilla@1.0.3...vanilla@1.0.4) (2024-06-21)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.5 to 0.0.6\n\n## [1.0.3](https://github.com/muxinc/player.style/compare/vanilla@1.0.2...vanilla@1.0.3) (2024-06-17)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.4 to 0.0.5\n\n## [1.0.2](https://github.com/muxinc/player.style/compare/vanilla@1.0.1...vanilla@1.0.2) (2024-06-17)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.3 to 0.0.4\n\n## [1.0.1](https://github.com/muxinc/player.style/compare/vanilla@1.0.0...vanilla@1.0.1) (2024-06-14)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.2 to 0.0.3\n\n## 1.0.0 (2024-06-14)\n\n\n### Bug Fixes\n\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.1 to 0.0.2\n"
  },
  {
    "path": "examples/vanilla/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <title>player.style demo</title>\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <style>\n      /* latin-ext */\n      @font-face {\n        font-family: 'JetBrains Mono';\n        font-style: normal;\n        font-weight: 400;\n        font-display: swap;\n        src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2)\n          format('woff2');\n        unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020,\n          U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n      }\n      /* latin */\n      @font-face {\n        font-family: 'JetBrains Mono';\n        font-style: normal;\n        font-weight: 400;\n        font-display: swap;\n        src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2)\n          format('woff2');\n        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304,\n          U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,\n          U+FFFD;\n      }\n    </style>\n    <style>\n      @import 'https://cdn.jsdelivr.net/npm/open-props/open-props.min.css';\n      @import 'https://cdn.jsdelivr.net/npm/open-props/normalize.min.css';\n      @import 'https://cdn.jsdelivr.net/npm/open-props/normalize.light.min.css';\n\n      html {\n        --font-size-0: 0.85rem;\n      }\n\n      body {\n        display: grid;\n        grid-template-rows: auto auto 1fr;\n      }\n\n      header,\n      main,\n      footer {\n        padding-inline: 0.5rem;\n      }\n\n      .inner {\n        max-width: var(--size-lg);\n        height: 100%;\n        margin: 0 auto;\n        border: 1px solid var(--gray-2);\n        border-width: 0 1px;\n      }\n\n      header {\n        border-bottom: 1px solid var(--gray-2);\n      }\n\n      header nav {\n        height: 5rem;\n        display: flex;\n        justify-content: end;\n      }\n\n      header nav a {\n        display: inline-flex;\n        align-items: center;\n        margin: 0;\n        font-family: 'JetBrains Mono', monospace;\n        font-size: 0.875rem;\n        text-transform: uppercase;\n        padding: 1.3rem 2rem;\n        color: #242628;\n        background: var(--gray-0);\n        border-left: 1px solid var(--gray-2);\n      }\n\n      header nav a:hover {\n        text-decoration: none;\n        background: var(--gray-1);\n      }\n\n      main > .inner {\n        display: grid;\n        grid-template-columns: 1fr;\n      }\n\n      @media (width >= 768px) {\n        header,\n        main,\n        footer {\n          padding-inline: 1.5rem;\n        }\n\n        main > .inner {\n          grid-template-columns: 1fr 3fr;\n        }\n\n        section {\n          border-left: 1px solid var(--gray-2);\n        }\n      }\n\n      footer {\n        border-top: 1px solid var(--gray-2);\n      }\n\n      aside,\n      section {\n        background: white;\n        padding: 2rem;\n      }\n\n      h1 {\n        font-size: var(--font-size-3);\n        font-weight: var(--font-weight-7);\n        margin-bottom: 0.25rem;\n      }\n\n      p {\n        font-size: var(--font-size-0);\n        color: var(--gray-6);\n      }\n\n      .row {\n        display: flex;\n        gap: 1rem;\n      }\n\n      .row > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n\n      label {\n        font-size: var(--font-size-0);\n        font-weight: var(--font-weight-6);\n        display: block;\n        margin-top: 1rem;\n        white-space: nowrap;\n      }\n\n      input,\n      select {\n        font-family: 'JetBrains Mono', monospace;\n        font-size: var(--font-size-0);\n        border-radius: 0;\n        background: #fafaf9;\n        margin-top: 0.5rem;\n        padding: 0.5rem 0.7rem;\n        display: block;\n        width: 100%;\n      }\n\n      input {\n        cursor: text;\n      }\n\n      button {\n        font-family: 'JetBrains Mono', monospace;\n        font-size: var(--font-size-0);\n        margin-top: 1rem;\n        background: #e2e4dd;\n        border: 1px solid #00802d;\n        border-radius: var(--radius-round);\n        padding: 0;\n      }\n\n      button > span {\n        display: block;\n        padding: 0.4rem 2rem;\n        border-radius: var(--radius-round);\n        background: #4ca74b;\n        outline: 1px solid #00802d;\n        color: white;\n        text-transform: uppercase;\n        transform: translateY(0);\n        transition: transform 0.12s cubic-bezier(0.7, 0, 0.3, 1);\n      }\n\n      button:focus:not(:focus-visible) {\n        outline: none;\n      }\n\n      button:hover:not(:active) > span {\n        transform: translateY(-3px);\n      }\n\n      /* Right side */\n\n      #blurup-image {\n        width: 100%;\n        aspect-ratio: 16 / 9;\n      }\n\n      #blurup-code {\n        display: block;\n        font-family: 'JetBrains Mono', monospace;\n        font-size: 0.75rem;\n        border-radius: 0;\n        background: #fafaf9;\n        width: 100%;\n        height: 12.5rem;\n        margin-top: 1rem;\n        padding: 0.5rem 0.7rem;\n      }\n\n      .code-group {\n        margin-top: 1rem;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      #copy-button {\n        margin-top: 0;\n      }\n\n      #code-size {\n        font-size: var(--font-size-0);\n        color: var(--gray-6);\n      }\n\n      media-theme-vimeonova {\n        display: block;\n        aspect-ratio: 16 / 9;\n      }\n\n      footer .inner {\n        display: flex;\n        align-items: end;\n        justify-content: center;\n        padding-block: 3rem 2rem;\n        fill: #242628;\n      }\n\n      .mux-svg {\n        width: 2.5rem;\n      }\n    </style>\n\n    <script type=\"module\" src=\"dist/script.js\"></script>\n  </head>\n  <body>\n    <header>\n      <div class=\"inner\">\n        <nav>\n          <a href=\"https://github.com/muxinc/player.style\" target=\"_blank\">GitHub</a>\n        </nav>\n      </div>\n    </header>\n    <main>\n      <div class=\"inner\">\n        <aside>\n          <h1>player.style demo</h1>\n          <p>A fresh collection of media player themes for every use case!</p>\n        </aside>\n        <section>\n          <media-theme-vimeonova>\n            <hls-video\n              slot=\"media\"\n              src=\"https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8\"\n              poster=\"https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp\"\n            ></hls-video>\n          </media-theme-vimeonova>\n        </section>\n      </div>\n    </main>\n    <footer>\n      <div class=\"inner\">\n        <a class=\"mux-link\" href=\"https://www.mux.com/\" target=\"_blank\">\n          <span hidden>Made by Mux</span>\n          <svg class=\"mux-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 77 24\">\n            <path\n              d=\"M47.73 0c-1.64 0-2.97 1.34-2.97 3v9c0 3.31-2.67 6-5.94 6-3.28 0-5.94-2.69-5.94-6V3c0-1.66-1.33-3-2.97-3s-2.97 1.34-2.97 3v9c0 6.62 5.33 12 11.88 12S50.7 18.62 50.7 12V3c.01-1.66-1.32-3-2.97-3M60.92 12l-6.81 6.88a3.02 3.02 0 0 0 0 4.24 2.95 2.95 0 0 0 4.2 0l6.81-6.88 6.81 6.88a2.95 2.95 0 0 0 4.2 0 3.02 3.02 0 0 0 0-4.24L69.32 12l6.81-6.88a3.02 3.02 0 0 0 0-4.24 2.95 2.95 0 0 0-4.2 0l-6.81 6.88L58.3.88a2.95 2.95 0 0 0-4.2 0 3.02 3.02 0 0 0 0 4.24zM21.93.23a2.96 2.96 0 0 0-3.24.65l-6.81 6.88L5.07.88A2.94 2.94 0 0 0 1.83.23 2.99 2.99 0 0 0 0 3v18c0 1.66 1.33 3 2.97 3s2.97-1.34 2.97-3V10.24l3.84 3.88a2.95 2.95 0 0 0 4.2 0l3.84-3.88V21c0 1.66 1.33 3 2.97 3s2.97-1.34 2.97-3V3c.01-1.21-.72-2.31-1.83-2.77\"\n            />\n          </svg>\n        </a>\n      </div>\n    </footer>\n    <script type=\"module\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/vanilla/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"vanilla\",\n  \"version\": \"1.11.15\",\n  \"description\": \"\",\n  \"main\": \"index.html\",\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"start\": \"esbuild --bundle script.js --outfile=dist/script.js --servedir=.\",\n    \"build\": \"esbuild --bundle script.js --outfile=dist/script.js\"\n  },\n  \"dependencies\": {\n    \"hls-video-element\": \"^1.3.0\",\n    \"player.style\": \"0.3.4\"\n  },\n  \"devDependencies\": {\n    \"esbuild\": \"^0.24.0\"\n  }\n}\n"
  },
  {
    "path": "examples/vanilla/script.js",
    "content": "import 'hls-video-element';\nimport 'player.style/vimeonova';\n"
  },
  {
    "path": "index.js",
    "content": "console.warn(\n  '⚠️ Warning: \"player.style\" does not export anything by default.\\n' +\n  'Please import a specific theme, like:\\n' +\n  '  import \"player.style/[theme-id]\";\\n'\n);"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"player.style\",\n  \"version\": \"0.3.4\",\n  \"description\": \"A fresh collection of media player themes for every use case!\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\"\n  },\n  \"files\": [\n    \"index.js\",\n    \"themes/*\",\n    \"!.*\"\n  ],\n  \"type\": \"module\",\n  \"main\": \"index.js\",\n  \"exports\": {\n    \"./*/react\": {\n      \"types\": \"./themes/*/dist/react.d.ts\",\n      \"import\": \"./themes/*/dist/react.js\",\n      \"require\": \"./themes/*/dist/cjs/react.js\",\n      \"default\": \"./themes/*/dist/react.js\"\n    },\n    \"./*.js\": {\n      \"types\": \"./themes/*/dist/media-theme.d.ts\",\n      \"import\": \"./themes/*/dist/media-theme.js\",\n      \"require\": \"./themes/*/dist/cjs/media-theme.js\",\n      \"default\": \"./themes/*/dist/media-theme.js\"\n    },\n    \"./*\": {\n      \"types\": \"./themes/*/dist/media-theme.d.ts\",\n      \"import\": \"./themes/*/dist/media-theme.js\",\n      \"require\": \"./themes/*/dist/cjs/media-theme.js\",\n      \"default\": \"./themes/*/dist/media-theme.js\"\n    },\n    \".\": {\n      \"default\": \"./index.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"*/react\": [\n        \"./themes/*/dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./themes/*/dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"workspaces\": [\n    \".\",\n    \"site\",\n    \"examples/*\",\n    \"scripts/*\",\n    \"themes/*\"\n  ],\n  \"scripts\": {\n    \"dev\": \"chokidar --debounce 50 './themes/*/!(dist|.turbo)' -c 'turbo build --force --filter=./$(dirname {path}) && touch ./site/$(dirname {path}).md'\"\n  },\n  \"dependencies\": {\n    \"media-chrome\": \"~4.19.0\"\n  },\n  \"devDependencies\": {\n    \"@player.style/demuxed-2022\": \"0.1.2\",\n    \"@player.style/halloween\": \"0.1.2\",\n    \"@player.style/x-mas\": \"0.1.2\",\n    \"@player.style/instaplay\": \"0.1.2\",\n    \"@player.style/microvideo\": \"0.2.0\",\n    \"@player.style/minimal\": \"0.2.1\",\n    \"@player.style/notflix\": \"0.1.2\",\n    \"@player.style/reelplay\": \"0.1.2\",\n    \"@player.style/sutro\": \"0.2.1\",\n    \"@player.style/sutro-audio\": \"0.0.8\",\n    \"@player.style/tailwind-audio\": \"0.0.13\",\n    \"@player.style/vimeonova\": \"0.1.2\",\n    \"@player.style/winamp\": \"0.0.13\",\n    \"@player.style/yt\": \"0.2.1\",\n    \"chokidar-cli\": \"^3.0.0\",\n    \"eslint\": \"^8.57.0\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"prettier\": \"^3.4.2\",\n    \"rimraf\": \"^6.0.1\",\n    \"turbo\": \"^2.3.3\",\n    \"typescript\": \"^5\"\n  },\n  \"prettier\": {\n    \"printWidth\": 120,\n    \"singleQuote\": true,\n    \"tabWidth\": 2,\n    \"useTabs\": false,\n    \"semi\": true,\n    \"quoteProps\": \"as-needed\",\n    \"jsxSingleQuote\": false,\n    \"trailingComma\": \"es5\",\n    \"bracketSpacing\": true,\n    \"arrowParens\": \"always\"\n  },\n  \"packageManager\": \"npm@11.0.0\"\n}\n"
  },
  {
    "path": "scripts/build-theme/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/build-theme@0.1.0...build-theme@0.1.1) (2025-12-04)\n\n\n### Bug Fixes\n\n* Tailwind Audio Theme responsive on packaged version ([2793775](https://github.com/muxinc/player.style/commit/27937752623339f5d2cec01fad67cf6ce49d1f72))\n* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/build-theme-v0.0.8...build-theme@0.1.0) (2024-12-19)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Bug Fixes\n\n* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* use ce-la-react, fix React 19+ wrappers ([#146](https://github.com/muxinc/player.style/issues/146)) ([10f29b3](https://github.com/muxinc/player.style/commit/10f29b3f20b1a359300aaa0cd5c1f93a9e0a59dc))\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/player.style@0.0.7...build-theme@0.0.8) (2024-10-29)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Bug Fixes\n\n* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/build-theme-v0.0.6...build-theme@0.0.7) (2024-10-21)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Bug Fixes\n\n* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/build-theme-v0.0.5...build-theme@0.0.6) (2024-10-08)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n\n\n### Bug Fixes\n\n* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/build-theme-v0.0.4...build-theme@0.0.5) (2024-09-25)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n\n\n### Bug Fixes\n\n* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/build-theme-v0.0.3...build-theme@0.0.4) (2024-09-10)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n\n\n### Bug Fixes\n\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/build-theme@0.0.2...build-theme@0.0.3) (2024-08-15)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n\n\n### Bug Fixes\n\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/build-theme-v0.0.1...build-theme@0.0.2) (2024-06-17)\n\n\n### Bug Fixes\n\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n"
  },
  {
    "path": "scripts/build-theme/build.js",
    "content": "#!/usr/bin/env node\nimport { parseArgs } from 'node:util';\nimport process from 'node:process';\nimport { join, dirname } from 'node:path';\nimport { realpath, mkdir, readFile, writeFile } from 'node:fs/promises';\nimport { fileURLToPath } from 'node:url';\nimport ejs from 'ejs';\nimport * as esbuild from 'esbuild';\n\nconst nodePath = await realpath(process.argv[1]);\nconst modulePath = await realpath(fileURLToPath(import.meta.url));\nconst isCLI = nodePath === modulePath;\n\nif (isCLI) cliBuild();\n\nexport async function cliBuild() {\n  const { values, positionals } = parseArgs({\n    options: {},\n    strict: false,\n    allowPositionals: true,\n  });\n\n  await build(positionals, values);\n}\n\nexport async function build() {\n  // read name from package.json\n  const { name } = JSON.parse(await readFile('./package.json', 'utf8'));\n\n  if (name.startsWith('@player.style/')) {\n    const themeName = name.replace('@player.style/', '');\n\n    await mkdir('./dist', { recursive: true });\n\n    // Copy declaration file to dist folder\n    const declaration = await readFile(\n      join(dirname(modulePath), '/templates/media-theme.d.ts'),\n      'utf8'\n    );\n    await writeFile(`./dist/media-theme.d.ts`, populate(declaration, themeName));\n\n    const themeTemplate = await readFile('./template.html', 'utf8');\n    const outThemeTemplate = await ejs.render(\n      themeTemplate,\n      { themeName, base64 },\n      {\n        root: join(process.cwd(), 'dist'),\n        async: true,\n      }\n    );\n    await writeFile(`./dist/media-theme.html`, outThemeTemplate);\n\n    // Copy code file to dist folder and replace vars.\n    const themeCode = await readFile(\n      join(dirname(modulePath), '/templates/media-theme.js'),\n      'utf8'\n    );\n    const indentedThemeTemplate = outThemeTemplate.replace(/^(.)/gm, '    $1').replace(/`/g, '\\\\`');\n    const outThemeCode = themeCode.replace(/{{{theme_template}}}/g, indentedThemeTemplate);\n    await writeFile(`./dist/media-theme.js`, populate(outThemeCode, themeName));\n\n    // React component\n\n    // Copy declaration file to dist folder.\n    const reactDeclaration = await readFile(\n      join(dirname(modulePath), '/templates/react.d.ts'),\n      'utf8'\n    );\n    await writeFile(`./dist/react.d.ts`, populate(reactDeclaration, themeName));\n\n    // Copy code file to dist folder and replace vars.\n    const reactCode = await readFile(join(dirname(modulePath), '/templates/react.js'), 'utf8');\n    await writeFile(`./dist/react.js`, populate(reactCode, themeName));\n\n    // Bundle up ce-la-react dependency.\n    await esbuild.build({\n      entryPoints: ['./dist/react.js'],\n      bundle: true,\n      format: 'esm',\n      external: ['react', './media-theme.js'],\n      outdir: './dist',\n      allowOverwrite: true,\n    });\n\n    // Build CJS files\n    await mkdir('./dist/cjs', { recursive: true });\n    await writeFile(`./dist/cjs/package.json`, JSON.stringify({ type: 'commonjs' }));\n\n    await esbuild.build({\n      entryPoints: ['./dist/media-theme.js', './dist/react.js'],\n      bundle: true,\n      format: 'cjs',\n      external: ['react', 'media-chrome', './media-theme.js'],\n      outdir: './dist/cjs',\n    });\n  }\n}\n\nfunction populate(template, themeName) {\n  return template\n    .replace(/{{{element_name}}}/g, `media-theme-${themeName}`)\n    .replace(/___ClassName___/g, `MediaTheme${pascalCase(themeName)}Element`)\n    .replace(/___ComponentName___/g, `MediaTheme${pascalCase(themeName)}`);\n}\n\nfunction pascalCase(str) {\n  return `-${str}`.replace(/-(\\w)/g, (g) => g[1].toUpperCase());\n}\n\nasync function base64(imageUrl) {\n  const image = await readFile(imageUrl);\n  const ext = imageUrl.split('.').pop().toLowerCase();\n  return `data:image/${ext};base64,${image.toString('base64')}`;\n}\n"
  },
  {
    "path": "scripts/build-theme/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"build-theme\",\n  \"version\": \"0.1.1\",\n  \"type\": \"module\",\n  \"main\": \"./build.js\",\n  \"bin\": {\n    \"build-theme\": \"./build.js\"\n  },\n  \"dependencies\": {\n    \"ce-la-react\": \"^0.3.2\",\n    \"ejs\": \"^3.1.10\",\n    \"esbuild\": \"^0.24.0\"\n  }\n}\n"
  },
  {
    "path": "scripts/build-theme/templates/media-theme.d.ts",
    "content": "import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n   '{{{element_name}}}': ___ClassName___;\n  }\n}\n\ndeclare class ___ClassName___ extends MediaThemeElement {\n  static template: HTMLTemplateElement;\n}\n\nexport default ___ClassName___;\n"
  },
  {
    "path": "scripts/build-theme/templates/media-theme.js",
    "content": "/*\n<{{{element_name}}}>\n  <video\n    slot=\"media\"\n    src=\"https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4\"\n  ></video>\n</{{{element_name}}}>\n*/\n\nimport 'media-chrome';\nimport { globalThis } from 'media-chrome/dist/utils/server-safe-globals.js';\nimport { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';\nimport 'media-chrome/dist/menu/index.js';\n\nconst template = globalThis.document?.createElement?.('template');\nif (template) {\n  template.innerHTML = String.raw/*html*/`\n{{{theme_template}}}\n  `;\n}\n\nclass ___ClassName___ extends MediaThemeElement {\n  static template = template;\n}\n\nif (globalThis.customElements && !globalThis.customElements.get('{{{element_name}}}')) {\n  globalThis.customElements.define('{{{element_name}}}', ___ClassName___);\n}\n\nexport default ___ClassName___;\n"
  },
  {
    "path": "scripts/build-theme/templates/react.d.ts",
    "content": "import ___ClassName___ from './media-theme.js';\n\ndeclare const ___ComponentName___: React.ForwardRefExoticComponent<\n  React.DetailedHTMLProps<React.HTMLAttributes<___ClassName___>, ___ClassName___>\n>;\n\nexport default ___ComponentName___;\n"
  },
  {
    "path": "scripts/build-theme/templates/react.js",
    "content": "'use client';\n\nimport React from 'react';\nimport ThemeElement from './media-theme.js';\n// keep as last import, ce-la-react is bundled.\nimport { createComponent } from 'ce-la-react';\n\nexport default createComponent({\n  react: React,\n  tagName: '{{{element_name}}}',\n  elementClass: ThemeElement,\n});\n"
  },
  {
    "path": "scripts/publish-packages/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"publish-packages\",\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"main\": \"./publish-packages.js\",\n  \"bin\": {\n    \"publish-packages\": \"./publish-packages.js\"\n  }\n}\n"
  },
  {
    "path": "scripts/publish-packages/publish-packages.js",
    "content": "#!/usr/bin/env node\nimport { parseArgs } from 'node:util';\nimport { argv } from 'node:process';\nimport { realpath } from 'node:fs/promises';\nimport { fileURLToPath } from 'node:url';\nimport { exec } from 'node:child_process';\nimport { promisify } from 'node:util';\n\nconst execAsync = promisify(exec);\n\nconst nodePath = await realpath(argv[1]);\nconst modulePath = await realpath(fileURLToPath(import.meta.url));\nconst isCLI = nodePath === modulePath;\n\nif (isCLI) cliPublish();\n\nexport async function cliPublish() {\n  const { values } = parseArgs({\n    options: {},\n    strict: false,\n    allowPositionals: true,\n  });\n\n  await publish(values);\n}\n\nexport async function publish() {\n\n  let remoteVersionsResult;\n  try {\n    remoteVersionsResult = await execAsync(`npm view . version -w . -w themes --json`);\n  } catch (error) {\n    // If the package is not published yet, npm view will fail with something like below on error.stdout:\n    // {\n    //   'player.style': '0.0.3',\n    //   '@player.style/microvideo': '0.0.4',\n    //   '@player.style/minimal': '0.0.4',\n    //   error: {\n    //     '@player.style/ytttt': {\n    //       code: 'E404',\n    //       summary: 'Not Found - GET https://registry.npmjs.org/@player.style%2fytttt - Not found',\n    //       detail: \"'@player.style/ytttt@*' is not in this registry.\\n\" +\n    //         '\\n' +\n    //         'Note that you can also install from a\\n' +\n    //         'tarball, folder, http url, or git url.'\n    //     }\n    //   }\n    // }\n    remoteVersionsResult = error;\n  }\n\n  let newVersionsResult;\n  try {\n    newVersionsResult = await execAsync(`npm pkg get version -w . -w themes --json`);\n  } catch (error) {\n    newVersionsResult = error;\n  }\n\n  const remoteVersions = JSON.parse(remoteVersionsResult.stdout);\n  const newVersions = JSON.parse(newVersionsResult.stdout);\n\n  for (const [pkg, version] of Object.entries(newVersions)) {\n    if (remoteVersions[pkg] === version) {\n      console.log(`Skipping ${pkg}@${version} because it's already published`);\n      continue;\n    }\n\n    console.log(`Publishing ${pkg}@${version}`);\n    await execAsync(`npm publish -w ${pkg} --access public --provenance`);\n  }\n}\n"
  },
  {
    "path": "site/.eslintrc.json",
    "content": "{\n  \"root\": true,\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "site/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n.turbo/\ndist/\n"
  },
  {
    "path": "site/CHANGELOG.md",
    "content": "# Changelog\n\n## [1.11.15](https://github.com/muxinc/player.style/compare/site@1.11.14...site@1.11.15) (2026-04-15)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.3 to 0.3.4\n\n## [1.11.14](https://github.com/muxinc/player.style/compare/site@1.11.13...site@1.11.14) (2026-04-15)\n\n\n### Bug Fixes\n\n* **deps:** Bump media-chrome ([f1a9d2c](https://github.com/muxinc/player.style/commit/f1a9d2c2319cdd2206e0e25f0326a55599afb39d))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.2 to 0.3.3\n\n## [1.11.13](https://github.com/muxinc/player.style/compare/site@1.11.12...site@1.11.13) (2026-03-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.1 to 0.3.2\n\n## [1.11.12](https://github.com/muxinc/player.style/compare/site@1.11.11...site@1.11.12) (2025-12-04)\n\n\n### Bug Fixes\n\n* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.3.0 to 0.3.1\n\n## [1.11.11](https://github.com/muxinc/player.style/compare/site@1.11.10...site@1.11.11) (2025-10-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.2.0 to 0.3.0\n\n## [1.11.10](https://github.com/muxinc/player.style/compare/site@1.11.9...site@1.11.10) (2025-08-22)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.10 to 0.2.0\n\n## [1.11.9](https://github.com/muxinc/player.style/compare/site@1.11.8...site@1.11.9) (2025-08-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.9 to 0.1.10\n\n## [1.11.8](https://github.com/muxinc/player.style/compare/site@1.11.7...site@1.11.8) (2025-06-12)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.8 to 0.1.9\n\n## [1.11.7](https://github.com/muxinc/player.style/compare/site@1.11.6...site@1.11.7) (2025-05-01)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.7 to 0.1.8\n\n## [1.11.6](https://github.com/muxinc/player.style/compare/site@1.11.5...site@1.11.6) (2025-03-31)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.6 to 0.1.7\n\n## [1.11.5](https://github.com/muxinc/player.style/compare/site@1.11.4...site@1.11.5) (2025-03-14)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.5 to 0.1.6\n\n## [1.11.4](https://github.com/muxinc/player.style/compare/site@1.11.3...site@1.11.4) (2025-03-05)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.4 to 0.1.5\n\n## [1.11.3](https://github.com/muxinc/player.style/compare/site@1.11.2...site@1.11.3) (2025-02-13)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.3 to 0.1.4\n\n## [1.11.2](https://github.com/muxinc/player.style/compare/site@1.11.1...site@1.11.2) (2025-01-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.2 to 0.1.3\n\n## [1.11.1](https://github.com/muxinc/player.style/compare/site@1.11.0...site@1.11.1) (2025-01-23)\n\n\n### Bug Fixes\n\n* upgrade MC ([#149](https://github.com/muxinc/player.style/issues/149)) ([4ecfd39](https://github.com/muxinc/player.style/commit/4ecfd391b7695ae3bf0daa3d7118dc9c58c0b0a8))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.1 to 0.1.2\n\n## [1.11.0](https://github.com/muxinc/player.style/compare/site-v1.10.0...site@1.11.0) (2024-12-19)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n## [1.10.0](https://github.com/muxinc/player.style/compare/site-v1.9.0...site@1.10.0) (2024-12-19)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.1.0 to 0.1.1\n\n## [1.9.0](https://github.com/muxinc/player.style/compare/site-v1.8.0...site@1.9.0) (2024-12-09)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.14 to 0.1.0\n\n## [1.8.0](https://github.com/muxinc/player.style/compare/site-v1.7.0...site@1.8.0) (2024-12-02)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.13 to 0.0.14\n\n## [1.7.0](https://github.com/muxinc/player.style/compare/site-v1.6.0...site@1.7.0) (2024-11-11)\n\n\n### Features\n\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.12 to 0.0.13\n\n## [1.6.0](https://github.com/muxinc/player.style/compare/site-v1.5.0...site@1.6.0) (2024-10-29)\n\n\n### Features\n\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.11 to 0.0.12\n\n## [1.5.0](https://github.com/muxinc/player.style/compare/site-v1.4.0...site@1.5.0) (2024-10-21)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.10 to 0.0.11\n\n## [1.4.0](https://github.com/muxinc/player.style/compare/site-v1.3.0...site@1.4.0) (2024-10-08)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)\n* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))\n* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.9 to 0.0.10\n\n## [1.3.0](https://github.com/muxinc/player.style/compare/site-v1.2.0...site@1.3.0) (2024-09-25)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.8 to 0.0.9\n\n## [1.2.0](https://github.com/muxinc/player.style/compare/site-v1.1.0...site@1.2.0) (2024-09-10)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.7 to 0.0.8\n\n## [1.1.0](https://github.com/muxinc/player.style/compare/site@1.0.4...site@1.1.0) (2024-08-15)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n\n\n### Bug Fixes\n\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.6 to 0.0.7\n\n## [1.0.4](https://github.com/muxinc/player.style/compare/site@1.0.3...site@1.0.4) (2024-06-21)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.5 to 0.0.6\n\n## [1.0.3](https://github.com/muxinc/player.style/compare/site@1.0.2...site@1.0.3) (2024-06-17)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.4 to 0.0.5\n\n## [1.0.2](https://github.com/muxinc/player.style/compare/site@1.0.1...site@1.0.2) (2024-06-17)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.3 to 0.0.4\n\n## [1.0.1](https://github.com/muxinc/player.style/compare/site@1.0.0...site@1.0.1) (2024-06-14)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.2 to 0.0.3\n\n## 1.0.0 (2024-06-14)\n\n\n### Features\n\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n\n\n### Bug Fixes\n\n* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))\n* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))\n* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))\n* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * dependencies\n    * player.style bumped from 0.0.1 to 0.0.2\n"
  },
  {
    "path": "site/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "site/app/(home)/page.tsx",
    "content": "import { getCollection, getCollectionTagGroups } from '../_utils/content';\nimport Search from '../_components/Search';\nimport ThemePreview from '../_components/ThemePreview';\nimport TagCheckbox from '../_components/TagCheckbox';\nimport ColorPicker from '../_components/ColorPicker';\nimport ThemeColorPopover from '../_components/ThemeColorPopover';\nimport Grid from '../_components/Grid';\nimport LinkWithUnderline from '../_components/LinkWithUnderline';\n\nconst title = 'player.style - Video & audio player themes for every web player & framework';\nexport const metadata = {\n  title,\n  description: 'Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.',\n  openGraph: {\n    title,\n    url: '/',\n    locale: 'en-US',\n    type: 'website',\n    images: {\n      url: `/player.style@2x.png`,\n      alt: 'player.style logo',\n    },\n  },\n  twitter: {\n    title,\n    site: '@muxhq',\n    images: {\n      url: `/player.style@2x.png`,\n      alt: 'player.style logo',\n    }\n  },\n};\n\ntype HomeProps = {\n  searchParams: Record<string, string | string[]>;\n};\n\nconst steps = [\n  { number: '1', text: 'Find a player theme you love' },\n  { number: '2', text: 'Pick your player and app framework' },\n  { number: '3', text: \"Copy, paste, and you're done\" },\n  { number: '+', text: 'Customize any detail of the player UI using just HTML and CSS' },\n];\n\nexport default async function Home({ searchParams }: HomeProps) {\n  const themes = await getCollection('themes', {\n    searchParams,\n  });\n\n  const tagGroups = await getCollectionTagGroups('themes');\n\n  return (\n    <>\n      <Grid withPadding={false} className=\"text-center\">\n        <div className=\"px-1 py-1.5 sm:p-2 md:p-3\">\n          <h1 className=\"font-display text-3xl sm:text-5xl md:text-6xl tracking-wide leading-heading font-normal uppercase whitespace-pre-line mx-auto max-w-32 mb-0.5 sm:mb-1\">\n            Find your Player\n          </h1>\n          <h2 className=\"font-body text-balance text-md tracking-wide leading-normal font-normal normal-case max-w-24 mx-auto\">\n            Video and audio player themes built with{' '}\n            <LinkWithUnderline href=\"https://media-chrome.org\" target=\"_blank\">\n              Media Chrome\n            </LinkWithUnderline>\n            , for <strong>every web player</strong> and <strong>every web app framework</strong>.\n          </h2>\n        </div>\n        <div className=\"p-1 md:py-1.5 lg:px-3 xl:px-4 bg-white border-ctx-gray border-t\">\n          <div className=\"grid md:grid-cols-4 items-start md:items-center gap-0.5 lg:gap-1\">\n            {steps.map((step, index) => (\n              <div key={index} className=\"flex items-center space-x-0.5 lg:space-x-1\">\n                <div className=\"relative\">\n                  <div className=\"w-1.5 h-1.5 lg:w-2 lg:h-2 border border-blue rounded-1\"></div>\n                  <div className=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-display text-md md:text-lg lg:text-2xl text-blue\">\n                    {step.number}\n                  </div>\n                </div>\n                <p className=\"text-balance text-left text-sm font-medium\">{step.text}</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Grid>\n\n      <div className=\"relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray\">\n        <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n          <div className=\"gap-2 lg:gap-3 items-center py-0.75\">\n            <div className=\"block border-ctx-gray bg-putty-light [&amp;>*]:set-border-ctx-gray [&amp;>*]:set-bg-ctx-putty-light text-black\"></div>\n          </div>\n        </div>\n      </div>\n      <div className=\"relative flex-1 border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray\">\n        <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n          <div className=\"-m-0.5px grid grid-cols-1 lg:grid-cols-3 h-full\">\n            <div className=\"border-ctx border border-b-0 -m-0.5px flex flex-col\">\n              <div className=\"border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex items-center justify-center text-center\">\n                Filter themes\n              </div>\n              <div className=\"border-ctx lg:border-b\">\n                <Search />\n              </div>\n              <div className=\"border-ctx\">\n                {Object.entries(tagGroups)\n                  .filter(([, tags]) => tags.length)\n                  .map(([tagGroup, tags], index) => (\n                    <details key={`details-${index}`} className=\"border-ctx open:border-b -m-0.5px\" open={true}>\n                      <summary className=\"select-none text-sm font-mono uppercase h-2 cursor-pointer border-ctx border-b px-[2.4rem] py-[1.1rem]\">\n                        <span className=\"px-0.75\">{tagGroup}</span>\n                      </summary>\n\n                      <div className=\"p-1\">\n                        {tags.map((name: string, index: number) => (\n                          <TagCheckbox key={`tagcheckbox-${index}`} name={name} group={tagGroup} />\n                        ))}\n                      </div>\n                    </details>\n                  ))}\n              </div>\n              <div className=\"border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex gap-0.25 items-center justify-center text-center\">\n                Set theme colors <ThemeColorPopover />\n              </div>\n              <div className=\"border-ctx lg:border-b p-1 flex flex-col sm:flex-row justify-center gap-0.5\">\n                <div className=\"flex items-center gap-0.25\">\n                  <ColorPicker id=\"primary-color\" defaultValue=\"#ffffff\" />\n                  <label htmlFor=\"primary-color\" className=\"uppercase text-sm font-mono\">\n                    Primary\n                  </label>\n                </div>\n                <div className=\"flex items-center gap-0.25\">\n                  <ColorPicker id=\"secondary-color\" defaultValue=\"#ffffff\" />\n                  <label htmlFor=\"secondary-color\" className=\"uppercase text-sm font-mono\">\n                    Secondary\n                  </label>\n                </div>\n                <div className=\"flex items-center gap-0.25\">\n                  <ColorPicker id=\"accent-color\" defaultValue=\"#ffffff\" />\n                  <label htmlFor=\"accent-color\" className=\"uppercase text-sm font-mono\">\n                    Accent\n                  </label>\n                </div>\n              </div>\n            </div>\n            <div className=\"lg:col-span-2 grid h-min\">\n              {themes.length ? (\n                themes.map((theme, index) => (\n                  <ThemePreview priority={index === 0} key={`theme-${theme._meta.path}`} theme={theme} />\n                ))\n              ) : (\n                <div className=\"-m-0.5px grid flex flex-col items-center\">\n                  <div className=\"p-1 md:p-2 lg:p-4 text-balance\">\n                    <h3 className=\"font-body text-xl md:text-3xl leading-heading font-bold normal-case pb-1 text-center lg:text-left\">\n                      <p>Aw snap! No search results were found.</p>\n                    </h3>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/(home)/page.tsx.orig",
    "content": "import { getCollection, getCollectionTagGroups } from '../_utils/content';\nimport Search from '../_components/Search';\nimport ThemePreview from '../_components/ThemePreview';\nimport TagCheckbox from '../_components/TagCheckbox';\nimport ColorPicker from '../_components/ColorPicker';\nimport ThemeColorPopover from '../_components/ThemeColorPopover';\nimport Grid from '../_components/Grid';\n\ntype HomeProps = {\n  searchParams: Record<string, string | string[]>;\n};\n\nconst steps = [\n  { number: '1', text: 'Find a player theme you love' },\n  { number: '2', text: 'Pick your player and app framework' },\n  { number: '3', text: \"Copy, paste, and you're done\" },\n  { number: '+', text: 'Customize any detail of the player UI using just HTML and CSS' },\n];\n\nexport default async function Home({ searchParams }: HomeProps) {\n  const themes = await getCollection('themes', {\n    searchParams,\n  });\n\n  const tagGroups = await getCollectionTagGroups('themes');\n\n  return (\n    <>\n<<<<<<< HEAD\n      <Hero title=\"Find your Player\" className=\"md:min-h-[253px] lg:min-h-[328px]\">\n        <h2 className=\"mb-1\">Player.style is the home of <strong>video and audio player themes</strong> built with <a className=\"underline\" href=\"https://media-chrome.org\">Media Chrome</a> (by <a className=\"underline\" href=\"https://mux.com\">Mux</a>). They work for <strong><em>any web player</em></strong> (Video.js, Youtube embeds, and more), and with <strong><em>every web app framework</em></strong> (HTML, React, and more).</h2>\n\n        <p className=\"mb-1 text-lg\">\n          <b style={{ color: 'rgb(0, 103, 223)', fontSize: '16px' }}>1.</b> Find a player theme you love.{' '}<br />\n          <b style={{ color: 'rgb(0, 103, 223)', fontSize: '16px' }}>2.</b> Pick your player and app framework. {' '}<br />\n          <b style={{ color: 'rgb(0, 103, 223)', fontSize: '16px' }}>3.</b> Copy, paste, you’re done.\n        </p>\n        <p><b>PLUS</b> Customize any detail of the player UI using just HTML and CSS.{' '}<Link href=\"/about\">Learn more about the project.</Link></p>\n      </Hero>\n=======\n      <Grid withPadding={false} className=\"text-center\">\n        <div className=\"px-1 py-1.5 md:p-2\">\n          <h1 className=\"font-display text-2xl sm:text-3xl md:text-4xl lg:text-5xl tracking-wide leading-heading font-normal uppercase whitespace-pre-line mx-auto max-w-32 mb-0.5\">\n            Find your Player\n          </h1>\n          <h2 className=\"font-body text-balance text-md tracking-wide leading-normal font-normal normal-case max-w-28 mx-auto\">\n            Player.style is the home of video and audio player themes built with{' '}\n            <a className=\"underline\" href=\"https://media-chrome.org\">\n              Media Chrome\n            </a>{' '}\n            by{' '}\n            <a className=\"underline\" href=\"https://mux.com\">\n              Mux\n            </a>\n            . They work for any web player, and with every web app framework.\n          </h2>\n        </div>\n        <div className=\"p-1 md:py-1.5 lg:px-2 bg-white border-ctx-gray border-t\">\n          <div className=\"flex flex-col md:flex-row justify-between items-start md:items-center space-y-0.5 md:space-y-0 md:space-x-0.5 lg:space-x-2\">\n            {steps.map((step, index) => (\n              <div key={index} className=\"flex items-center space-x-0.5 lg:space-x-1\">\n                <div className=\"relative\">\n                  <div className=\"w-1.5 h-1.5 lg:w-2 lg:h-2 border border-blue rounded-1\"></div>\n                  <div className=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-display text-md md:text-2xl text-blue\">\n                    {step.number}\n                  </div>\n                </div>\n                <p className=\"text-balance text-left text-sm font-medium\">{step.text}</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Grid>\n\n      <div className=\"relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray\">\n        <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n          <div className=\"gap-2 lg:gap-3 items-center py-0.75\">\n            <div className=\"block border-ctx-gray bg-putty-light [&amp;>*]:set-border-ctx-gray [&amp;>*]:set-bg-ctx-putty-light text-black\"></div>\n          </div>\n        </div>\n      </div>\n>>>>>>> main\n      <div className=\"relative flex-1 border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray\">\n        <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n          <div className=\"-m-0.5px grid grid-cols-1 lg:grid-cols-3 h-full\">\n            <div className=\"border-ctx border border-b-0 -m-0.5px flex flex-col\">\n              <div className=\"border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex items-center justify-center text-center\">\n                Filter themes\n              </div>\n              <div className=\"border-ctx lg:border-b\">\n                <Search />\n              </div>\n              <div className=\"border-ctx\">\n                {Object.entries(tagGroups)\n                  .filter(([, tags]) => tags.length)\n                  .map(([tagGroup, tags], index) => (\n                    <details\n                      key={`details-${index}`}\n                      className=\"border-ctx open:border-b -m-0.5px\"\n                      open={true}\n                    >\n                      <summary className=\"select-none text-sm font-mono uppercase h-2 cursor-pointer border-ctx border-b px-[2.4rem] py-[1.1rem]\">\n                        <span className=\"px-0.75\">{tagGroup}</span>\n                      </summary>\n\n                      <div className=\"p-1\">\n                        {tags.map((name: string, index: number) => (\n                          <TagCheckbox key={`tagcheckbox-${index}`} name={name} group={tagGroup} />\n                        ))}\n                      </div>\n                    </details>\n                  ))}\n              </div>\n              <div className=\"border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex gap-0.25 items-center justify-center text-center\">\n                Set theme colors <ThemeColorPopover />\n              </div>\n              <div className=\"border-ctx lg:border-b p-1 flex flex-col sm:flex-row justify-center gap-0.5\">\n                <div className=\"flex items-center gap-0.25\">\n                  <ColorPicker id=\"primary-color\" defaultValue=\"#ffffff\" />\n                  <label htmlFor=\"primary-color\" className=\"uppercase text-sm font-mono\">\n                    Primary\n                  </label>\n                </div>\n                <div className=\"flex items-center gap-0.25\">\n                  <ColorPicker id=\"secondary-color\" defaultValue=\"#ffffff\" />\n                  <label htmlFor=\"secondary-color\" className=\"uppercase text-sm font-mono\">\n                    Secondary\n                  </label>\n                </div>\n                <div className=\"flex items-center gap-0.25\">\n                  <ColorPicker id=\"accent-color\" defaultValue=\"#ffffff\" />\n                  <label htmlFor=\"accent-color\" className=\"uppercase text-sm font-mono\">\n                    Accent\n                  </label>\n                </div>\n              </div>\n            </div>\n            <div className=\"lg:col-span-2 grid h-min\">\n              {themes.length ? (\n                themes.map((theme, index) => (\n                  <ThemePreview\n                    priority={index === 0}\n                    key={`theme-${theme._meta.path}`}\n                    theme={theme}\n                  />\n                ))\n              ) : (\n                <div className=\"-m-0.5px grid flex flex-col items-center\">\n                  <div className=\"p-1 md:p-2 lg:p-4 text-balance\">\n                    <h3 className=\"font-body text-xl md:text-3xl leading-heading font-bold normal-case pb-1 text-center lg:text-left\">\n                      <p>Aw snap! No search results were found.</p>\n                    </h3>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/AnalyticsProvider.tsx",
    "content": "'use client';\n\nimport posthog from 'posthog-js';\nimport { PostHogProvider } from 'posthog-js/react';\n\nif (typeof window !== 'undefined') {\n  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,\n    person_profiles: 'always', // 'always' to create profiles for anonymous users\n    capture_pageview: false, // Disable automatic pageview capture, as we capture manually\n    capture_pageleave: true, // Enable pageleave capture\n  });\n}\n\nexport function AnalyticsProvider({ children }: { children: React.ReactNode }) {\n  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;\n}\n"
  },
  {
    "path": "site/app/_components/AuthorLink.tsx",
    "content": "import clsx from 'clsx';\nimport React from 'react';\n\ninterface AuthorImageProps {\n  handle: string;\n  className?: string;\n}\n\nconst AuthorImage: React.FC<AuthorImageProps> = ({ handle, className }) => {\n  const username = handle.replace('@', '');\n  const githubUrl = `https://github.com/${username}`;\n\n  // eslint-disable-next-line @next/next/no-img-element\n  return <img src={`${githubUrl}.png?size=100`} alt={`Avatar for ${handle}`} className={className} />;\n};\n\ninterface AuthorLinkProps {\n  handle: string;\n  className?: string;\n}\n\nconst AuthorLink: React.FC<AuthorLinkProps> = ({ handle, className }) => {\n  const username = handle.replace('@', '');\n  const githubUrl = `https://github.com/${username}`;\n\n  return (\n    <a\n      href={githubUrl}\n      className={clsx('inline-flex gap-0.5 flex-row items-center mb-1 group', className)}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span className=\"rounded-1 overflow-clip\">\n        <AuthorImage handle={handle} className=\"w-2 h-2\" />\n      </span>\n      <span className=\"font-mono leading-mono font-normal\">\n        By{' '}\n        <span className=\"underline-offset-mono decoration-link group-hover:underline group-focus-visible:underline\">\n          {handle}\n        </span>\n      </span>\n    </a>\n  );\n};\n\nexport default AuthorLink;\n"
  },
  {
    "path": "site/app/_components/ButtonPicker.tsx",
    "content": "'use client';\n\nimport { Children, ReactNode, cloneElement } from 'react';\n\ntype ButtonPickerProps = {\n  type: string;\n  children?: ReactNode;\n};\n\nexport default function ButtonPicker(props: ButtonPickerProps) {\n  const { type, children } = props;\n\n  return (\n    <>\n      <div className=\"grid grid-cols-[repeat(auto-fill,5.4rem)] sm:grid-cols-[repeat(auto-fill,max(6rem,100%/10))] gap-0.5 mb-2\">\n        {Children.map(children, (child: any) =>\n          cloneElement(child, {\n            type,\n          })\n        )}\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/ButtonPickerOption.tsx",
    "content": "'use client';\n\nimport clsx from 'clsx';\nimport { useSearchParams, usePathname, useRouter } from 'next/navigation';\n\ntype ButtonPickerOptionProps = {\n  selected?: boolean;\n  title: string;\n  value: string;\n  className?: string;\n};\n\ntype ButtonPickerOptionPropsInternal = ButtonPickerOptionProps & {\n  type: string;\n};\n\nexport default function ButtonPickerOption(props: ButtonPickerOptionProps) {\n  const { type, selected, title, value, className } = props as ButtonPickerOptionPropsInternal;\n  const searchParams = useSearchParams();\n  const pathname = usePathname();\n  const { replace } = useRouter();\n\n  const activeType = searchParams.get(type)?.toString();\n\n  const selectMedia = (term: string) => {\n    const params = new URLSearchParams(searchParams);\n    if (term) {\n      params.set(type, term);\n    } else {\n      // This is a workaround for a bug where the page without a search query\n      // would not trigger a RSC update.\n      // params.delete(type);\n      params.set(type, term);\n    }\n    replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  return (\n    <>\n      <button\n        className={clsx(\n          'font-mono text-xs md:text-sm leading-mono font-normal uppercase p-0.25 aspect-video items-center justify-center bg-white border border-gray text-balance',\n          className,\n          (activeType === value || (!activeType && selected)) && 'active'\n        )}\n        onClick={() => selectMedia(value)}\n      >\n        {title}\n      </button>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Code.tsx",
    "content": "import { codeToHtml } from 'shiki';\nimport clsx from 'clsx';\nimport CopyButton from './CopyButton';\n\ntype CodeProps = {\n  code: string;\n  lang: string;\n  className?: string;\n};\n\nexport default async function Code({ code, lang = 'html', className }: CodeProps) {\n  const html = await codeToHtml(code, {\n    lang,\n    themes: {\n      light: 'github-light',\n      dark: 'github-dark',\n    },\n    transformers: [\n      {\n        pre(node: any) {\n          this.addClassToHast(node, ['p-1', 'font-mono', 'text-sm', 'overflow-x-auto']);\n        },\n      },\n    ],\n  });\n  return (\n    <div className={clsx('relative', className)}>\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n      <CopyButton code={code} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/ColorPicker.tsx",
    "content": "'use client';\n\nimport { useSearchParams, usePathname, useRouter } from 'next/navigation';\nimport clsx from 'clsx';\n\nexport default function ColorPicker({ ...props }) {\n  const searchParams = useSearchParams();\n  const pathname = usePathname();\n  const { replace } = useRouter();\n  const params = new URLSearchParams(searchParams);\n  let color = searchParams.get(props.id)?.toString();\n\n  const onChange = (color: string) => {\n    color = color.replace('#', '');\n    if (color) {\n      params.set(props.id, color);\n    } else {\n      // This is a workaround for a bug where the page without a search query\n      // would not trigger a RSC update.\n      // params.delete(props.id);\n      params.set(props.id, color);\n    }\n    replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  const resetPicker = () => {\n    params.delete(props.id);\n    replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  return (\n    <div className=\"relative w-auto h-auto bg-transparent\">\n      <input\n        type=\"color\"\n        className={clsx('w-1.5 h-1.5 border border-gray rounded-[50%]', props.className)}\n        {...props}\n        value={color ? `#${color}` : props.defaultValue}\n        defaultValue={color}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      {color && (\n        <button\n          aria-label=\"Clear\"\n          className={\n            'w-0.75 h-0.75 text-[0.75rem] font-bold bg-white border border-gray rounded-[50%] absolute top-0 right-0 text-gray-500 hover:text-gray-800 focus:outline-none'\n          }\n          onClick={resetPicker}\n        >\n          <svg className={'w-0.5 h-0.5 scale-50 m-auto'} viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M4.9999 6.40005L2.0829 9.32505C1.89824 9.50838 1.66357 9.60005 1.3789 9.60005C1.09424 9.60005 0.859569 9.50838 0.674902 9.32505C0.491569 9.14172 0.399902 8.90838 0.399902 8.62505C0.399902 8.34172 0.491569 8.10838 0.674902 7.92505L3.5999 5.00005L0.674902 2.10805C0.491569 1.92338 0.399902 1.68872 0.399902 1.40405C0.399902 1.11938 0.491569 0.884715 0.674902 0.700048C0.858236 0.516715 1.09157 0.425049 1.3749 0.425049C1.65824 0.425049 1.89157 0.516715 2.0749 0.700048L4.9999 3.62505L7.8919 0.700048C8.07657 0.516715 8.31123 0.425049 8.5959 0.425049C8.88057 0.425049 9.11524 0.516715 9.2999 0.700048C9.4999 0.900048 9.5999 1.13772 9.5999 1.41305C9.5999 1.68838 9.4999 1.91738 9.2999 2.10005L6.3749 5.00005L9.2999 7.91705C9.48324 8.10172 9.5749 8.33638 9.5749 8.62105C9.5749 8.90572 9.48324 9.14038 9.2999 9.32505C9.0999 9.52505 8.86257 9.62505 8.5879 9.62505C8.31324 9.62505 8.0839 9.52505 7.8999 9.32505L4.9999 6.40005Z\"\n              fill=\"black\"\n            />\n          </svg>\n        </button>\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/CopyButton.tsx",
    "content": "'use client';\n\nimport clsx from 'clsx';\nimport { ReactNode, useRef, useState } from 'react';\n\ntype CopyButtonProps = {\n  code: string;\n  children?: ReactNode;\n};\n\nexport default function CopyButton(props: CopyButtonProps) {\n  const { code } = props;\n  const [copied, setCopied] = useState(false);\n  const copiedTimeoutRef = useRef<NodeJS.Timeout>();\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        className=\"absolute top-0 right-0 p-1 grid place-items-center\"\n        onClick={() => {\n          navigator.clipboard.writeText(code);\n          setCopied(true);\n\n          clearTimeout(copiedTimeoutRef.current);\n          copiedTimeoutRef.current = setTimeout(() => setCopied(false), 1000);\n        }}\n      >\n        <svg\n          className={clsx(\n            'size-0.75 transition duration-short ease-in-out',\n            copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'\n          )}\n          style={{ gridArea: '1 / 1' }}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          strokeWidth={1.5}\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\"\n          />\n        </svg>\n        <svg\n          className={clsx(\n            'size-0.75 transition duration-short ease-in-out',\n            copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'\n          )}\n          style={{ gridArea: '1 / 1' }}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          strokeWidth={1.5}\n          stroke=\"currentColor\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"m4.5 12.75 6 6 9-13.5\" />\n        </svg>\n      </button>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/DocsEmbed.tsx",
    "content": "import Code from './Code';\nimport mediaElements from '@/media-elements';\nimport { findParam } from '@/app/_utils/utils';\n\ntype DocsInstallProps = {\n  searchParams: Record<string, string | string[]>;\n  name: string;\n  theme: any;\n};\n\nexport default async function DocsEmbed(props: DocsInstallProps) {\n  const { searchParams, name, theme } = props;\n\n  const media = findParam(searchParams, 'media') || 'video';\n  const mediaElement = mediaElements[media as keyof typeof mediaElements];\n\n  const framework = findParam(searchParams, 'framework') || 'html';\n  const mediaPackage =\n    mediaElement.package?.[framework as keyof typeof mediaElement.package] ??\n    (mediaElement.package?.default as string);\n\n  const customProperties: CustomProperties = {\n    '--media-primary-color': findParam(searchParams, 'primary-color'),\n    '--media-secondary-color': findParam(searchParams, 'secondary-color'),\n    '--media-accent-color': findParam(searchParams, 'accent-color'),\n  };\n\n  const embed = findParam(searchParams, 'embed') ?? 'packaged';\n\n  let blocks: any[] = [];\n  switch (framework) {\n    case 'js':\n      blocks = jsCode(name, mediaElement, mediaPackage, customProperties, embed, theme);\n      break;\n    case 'react':\n      blocks = reactCode(name, mediaElement, mediaPackage, customProperties, embed, theme);\n      break;\n    case 'vue':\n      blocks = vueCode(name, mediaElement, mediaPackage, customProperties, embed, theme);\n      break;\n    case 'lit':\n      blocks = litCode(name, mediaElement, mediaPackage, customProperties, embed, theme);\n      break;\n    case 'svelte':\n      blocks = svelteCode(name, mediaElement, mediaPackage, customProperties, embed, theme);\n      break;\n    default:\n      blocks = htmlCode(name, mediaElement, mediaPackage, customProperties, embed, theme);\n  }\n\n  return (\n    <>\n      <h4 className=\"text-lg font-medium mb-0\">Embed your player</h4>\n      <p className=\"mb-1\" style={{color: \"#777\"}}>Copy and paste the code below into a page in your project.</p>\n\n      {blocks.map((block, index) => (\n        <Code\n          key={`code-${index}`}\n          className=\"mb-1\"\n          lang={block.lang}\n          code={[].concat(block.code).join('\\n')}\n        />\n      ))}\n    </>\n  );\n}\n\nfunction htmlCode(\n  name: string,\n  mediaElement: any,\n  mediaPackage: string,\n  customProperties: CustomProperties,\n  embed: string,\n  theme: any\n) {\n  let pkgs = [];\n  let templateHtml = '';\n\n  let themeTag = `media-theme-${name}`;\n  let themeAttrs: Record<string, any> = {};\n\n  const mediaTag: string = mediaElement.tag;\n  const mediaAttrs = getMediaAttributes(mediaElement);\n\n  if (mediaElement.tag.includes('-')) {\n    pkgs.push(mediaPackage);\n  }\n\n  if (embed === 'template') {\n    themeAttrs.template = `media-theme-${name}`;\n    themeTag = 'media-theme';\n\n    pkgs.push(`media-chrome`);\n    pkgs.push(`media-chrome/menu`);\n    pkgs.push(`media-chrome/media-theme-element`);\n\n    templateHtml = `\\n<template id=\"media-theme-${name}\">\n${theme.templates.html.content.replace(/^(.)/gm, '  $1')}</template>\\n  `;\n  } else {\n    pkgs.push(`player.style/${name}`);\n  }\n\n  themeAttrs.style = getCustomPropertiesStyle(customProperties);\n\n  return [\n    {\n      lang: 'js',\n      code: [\n        ...pkgs.map(\n          (pkg) => `<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/${pkg}/+esm\"></script>`\n        ),\n        templateHtml,\n        `<${themeTag}${getIndentedAttributes(themeAttrs)} style=\"width:100%\">\n  <${mediaTag}${getIndentedAttributes(mediaAttrs, 2)}></${mediaTag}>\n</${themeTag}>`,\n      ],\n    },\n  ];\n}\n\nfunction jsCode(\n  name: string,\n  mediaElement: any,\n  mediaPackage: string,\n  customProperties: CustomProperties,\n  embed: string,\n  theme: any\n) {\n  let imports = [];\n  let templateHtml = '';\n\n  let themeTag = `media-theme-${name}`;\n  let themeAttrs: Record<string, any> = {};\n\n  const mediaTag: string = mediaElement.tag;\n  const mediaAttrs = getMediaAttributes(mediaElement);\n\n  if (mediaElement.tag.includes('-')) {\n    imports.push(`import '${mediaPackage}';`);\n  }\n\n  if (embed === 'template') {\n    themeAttrs.template = `media-theme-${name}`;\n    themeTag = 'media-theme';\n\n    imports.push(`import 'media-chrome';`);\n    imports.push(`import 'media-chrome/menu';`);\n    imports.push(`import 'media-chrome/media-theme-element';`);\n\n    templateHtml = `<template id=\"media-theme-${name}\">\n${theme.templates.html.content.replace(/^(.)/gm, '    $1')}  </template>\\n\\n  `;\n  } else {\n    imports.push(`import 'player.style/${name}';`);\n  }\n\n  themeAttrs.style = getCustomPropertiesStyle(customProperties);\n\n  return [\n    {\n      lang: 'js',\n      code: [\n        ...imports,\n        '',\n        `const template = document.createElement('template');\ntemplate.innerHTML = \\`\n  ${templateHtml}<${themeTag}${getIndentedAttributes(themeAttrs, 2)} style=\"width: 100%\">\n    <${mediaTag}${getIndentedAttributes(mediaAttrs, 4)}></${mediaTag}>\n  </${themeTag}>\\`;\n\ndocument.body.append(template.content);`,\n      ],\n    },\n  ];\n}\n\nfunction reactCode(\n  name: string,\n  mediaElement: any,\n  mediaPackage: string,\n  customProperties: CustomProperties,\n  embed: string,\n  theme: any\n) {\n  let imports = [];\n  let templateHtml = '';\n\n  let themeTag = `media-theme-${name}`;\n  let themeAttrs = '';\n\n  let mediaTag: string = mediaElement.tag;\n  const mediaAttrs = attrsToJSXProps(getMediaAttributes(mediaElement));\n\n  if (mediaElement.tag.includes('-')) {\n    mediaTag = pascalCase(mediaElement.tag);\n    imports.push(`import ${mediaTag} from '${mediaPackage}';`);\n  }\n\n  if (embed === 'template') {\n    themeAttrs += `\\n        template=\"media-theme-${name}\"`;\n    themeTag = 'media-theme';\n\n    imports.push(`import 'media-chrome/react';`);\n    imports.push(`import 'media-chrome/react/menu';`);\n    imports.push(`import { MediaTheme } from 'media-chrome/react/media-theme';`);\n\n    templateHtml = `<template\n        id=\"media-theme-${name}\"\n        dangerouslySetInnerHTML={{ __html: \\`\n${theme.templates.html.content.trim().replace(/^(.)/gm, '          $1')}\\` }}\n      />\\n\\n      `;\n  }\n\n  themeTag = pascalCase(themeTag);\n\n  if (embed !== 'template') {\n    imports.push(`import ${themeTag} from 'player.style/${name}/react';`);\n  }\n\n  let customPropertiesStyleReact = '';\n  let filteredCustomProperties = Object.entries(customProperties).filter(([_, value]) =>\n    Boolean(value)\n  );\n  filteredCustomProperties.forEach(([property, value], index) => {\n    if (value) {\n      const trailingComma = index < filteredCustomProperties.length - 1 ? ', ' : ' ';\n      customPropertiesStyleReact += `\"${property}\": \"#${value}\"${trailingComma}`;\n    }\n  });\n  if (customPropertiesStyleReact.length) {\n    themeAttrs += `\\n        style={{ ${customPropertiesStyleReact.trim()} }}`;\n  }\n\n  if (themeAttrs.length) themeAttrs += '\\n      ';\n\n  return [\n    {\n      lang: 'jsx',\n      code: [\n        ...imports,\n        '',\n        `export default function Page() {\n  return (\n    <>\n      ${templateHtml}<${themeTag}${themeAttrs} style={{width: \"100%\"}}>\n        <${mediaTag}${getIndentedAttributes(mediaAttrs, 8)}></${mediaTag}>\n      </${themeTag}>\n    </>\n  );\n}`,\n      ],\n    },\n  ];\n}\n\nfunction vueCode(\n  name: string,\n  mediaElement: any,\n  mediaPackage: string,\n  customProperties: CustomProperties,\n  embed: string,\n  theme: any\n) {\n  let imports = [];\n  let templateHtml = '';\n\n  let themeTag = `media-theme-${name}`;\n  let themeAttrs: Record<string, any> = {};\n\n  const mediaTag: string = mediaElement.tag;\n  const mediaAttrs = getMediaAttributes(mediaElement);\n\n  if (mediaElement.tag.includes('-')) {\n    imports.push(`import '${mediaPackage}';`);\n  }\n\n  if (embed === 'template') {\n    themeAttrs.id = `media-theme-${name}`;\n    themeTag = 'media-theme';\n\n    imports.push(`import { onMounted } from 'vue';`);\n    imports.push(`import 'media-chrome';`);\n    imports.push(`import 'media-chrome/menu';`);\n    imports.push(`import 'media-chrome/media-theme-element';`);\n\n    templateHtml = `\\n\n  onMounted(() => {\n    const template = document.createElement('template');\n    template.innerHTML = \\`\n${theme.templates.html.content.replace(/^(.)/gm, '      $1')}    \\`;\n\n    document.querySelector('#media-theme-${name}').template = template;\n  });`;\n  } else {\n    imports.push(`import 'player.style/${name}';`);\n  }\n\n  themeAttrs.style = getCustomPropertiesStyle(customProperties);\n\n  return [\n    {\n      lang: 'vue',\n      code: [\n        `<script setup>\n${imports.join('\\n').replace(/^(.)/gm, '  $1')}${templateHtml}\n</script>`,\n        '',\n        `<template>\n  <${themeTag}${getIndentedAttributes(themeAttrs, 2)} :style=\"{ width: '100%' }\">\n    <${mediaTag}${getIndentedAttributes(mediaAttrs, 4)}></${mediaTag}>\n  </${themeTag}>\n</template>`,\n      ],\n    },\n  ];\n}\n\nfunction litCode(\n  name: string,\n  mediaElement: any,\n  mediaPackage: string,\n  customProperties: CustomProperties,\n  embed: string,\n  theme: any\n) {\n  let imports = [];\n  let templateHtml = '';\n\n  let themeTag = `media-theme-${name}`;\n  let themeAttrs: Record<string, any> = {};\n\n  const mediaTag: string = mediaElement.tag;\n  const mediaAttrs = getMediaAttributes(mediaElement);\n\n  if (mediaElement.tag.includes('-')) {\n    imports.push(`import '${mediaPackage}';`);\n  }\n\n  imports.push(`import { LitElement, html } from 'lit';`);\n\n  if (embed === 'template') {\n    themeAttrs.template = `media-theme-${name}`;\n    themeTag = 'media-theme';\n\n    imports.push(`import 'media-chrome';`);\n    imports.push(`import 'media-chrome/menu';`);\n    imports.push(`import 'media-chrome/media-theme-element';`);\n\n    templateHtml = `<template id=\"media-theme-${name}\">\n${theme.templates.html.content.replace(/^(.)/gm, '        $1')}      </template>\\n\\n      `;\n  } else {\n    imports.push(`import 'player.style/${name}';`);\n  }\n\n  themeAttrs.style = `width: 100%; height: 100%; ${getCustomPropertiesStyle(customProperties) ?? ''}`;\n\n  return [\n    {\n      lang: 'js',\n      code: [\n        ...imports,\n        '',\n        `class MyPage extends LitElement {\n  render() {\n    return html\\`\n      ${templateHtml}<${themeTag}${getIndentedAttributes(themeAttrs, 6)}>\n        <${mediaTag}${getIndentedAttributes(mediaAttrs, 8)}></${mediaTag}>\n      </${themeTag}>\\`;\n  }\n}\n\ncustomElements.define('my-page', MyPage);`,\n      ],\n    },\n  ];\n}\n\nfunction svelteCode(\n  name: string,\n  mediaElement: any,\n  mediaPackage: string,\n  customProperties: CustomProperties,\n  embed: string,\n  theme: any\n) {\n  let imports = [];\n  let templateHtml = '';\n\n  let themeTag = `media-theme-${name}`;\n  let themeAttrs: Record<string, any> = {};\n\n  const mediaTag: string = mediaElement.tag;\n  const mediaAttrs = getMediaAttributes(mediaElement);\n\n  if (mediaElement.tag.includes('-')) {\n    imports.push(`import '${mediaPackage}';`);\n  }\n\n  if (embed === 'template') {\n    themeAttrs.id = `media-theme-${name}`;\n    themeTag = 'media-theme';\n\n    imports.push(`import { onMount } from 'svelte';`);\n    imports.push(`import 'media-chrome';`);\n    imports.push(`import 'media-chrome/menu';`);\n    imports.push(`import 'media-chrome/media-theme-element';`);\n\n    templateHtml = `\\n\n  onMount(() => {\n    const template = document.createElement('template');\n    template.innerHTML = \\`\n${theme.templates.html.content.replace(/^(.)/gm, '      $1')}    \\`;\n\n    document.querySelector('#media-theme-${name}').template = template;\n  });`;\n  } else {\n    imports.push(`import 'player.style/${name}';`);\n  }\n\n  themeAttrs.style = getCustomPropertiesStyle(customProperties);\n\n  return [\n    {\n      lang: 'svelte',\n      code: [\n        `<script>\n${imports.join('\\n').replace(/^(.)/gm, '  $1')}${templateHtml}\n</script>`,\n        '',\n        `<${themeTag}${getIndentedAttributes(themeAttrs)} style=\"width: 100%;\">\n  <${mediaTag}${getIndentedAttributes(mediaAttrs, 2)}></${mediaTag}>\n</${themeTag}>`,\n      ],\n    },\n  ];\n}\n\nfunction pascalCase(str: string) {\n  return `-${str}`.replace(/-(\\w)/g, (g) => g[1].toUpperCase());\n}\n\nfunction camelCase(str: string) {\n  return `${str}`.replace(/-(\\w)/g, (g) => g[1].toUpperCase());\n}\n\nfunction getMediaAttributes(mediaElement: any) {\n  let mediaAttrs: Record<string, any> = {\n    slot: 'media',\n  };\n\n  if (mediaElement.tag === 'mux-video') {\n    mediaAttrs['playback-id'] = mediaElement.playbackId;\n  } else {\n    mediaAttrs.src = mediaElement.src;\n  }\n\n  mediaAttrs.playsinline = '';\n  mediaAttrs.crossorigin = 'anonymous';\n\n  return mediaAttrs;\n}\n\nconst attrsToJSXPropsMap: Record<string, string> = {\n  'playsinline': 'playsInline',\n  'crossorigin': 'crossOrigin',\n};\n\nfunction attrsToJSXProps(attrs: Record<string, any>) {\n  let props: Record<string, any> = {};\n  for (const [attr, value] of Object.entries(attrs)) {\n    delete attrs[attr];\n    const prop = attrsToJSXPropsMap[attr] ?? camelCase(attr);\n    props[prop] = value;\n  }\n  return props;\n}\n\ntype CustomProperties = {\n  '--media-primary-color'?: string;\n  '--media-secondary-color'?: string;\n  '--media-accent-color'?: string;\n};\n\nfunction getCustomPropertiesStyle(customProperties: CustomProperties) {\n  let customPropertiesStyle = '';\n  Object.entries(customProperties).forEach(([property, value]) => {\n    if (value) {\n      customPropertiesStyle += `${property}: #${value}; `;\n    }\n  });\n  if (customPropertiesStyle) {\n    return customPropertiesStyle;\n  }\n}\n\nfunction getIndentedAttributes(attrs: Record<string, any>, indent = 0) {\n  let output = '';\n  const attrSpaces = ' '.repeat(indent + 2);\n  const nextLineSpaces = ' '.repeat(indent);\n  for (const [attr, value] of Object.entries(attrs)) {\n    if (value != null) {\n      if (value.trim()) {\n        output += `\\n${attrSpaces}${attr}=\"${value.trim()}\"`;\n      } else {\n        output += `\\n${attrSpaces}${attr}`;\n      }\n    }\n  }\n  return output ? `${output}\\n${nextLineSpaces}` : '';\n}\n"
  },
  {
    "path": "site/app/_components/DocsInstall.tsx",
    "content": "import Code from './Code';\nimport mediaElements from '@/media-elements';\nimport { findParam } from '@/app/_utils/utils';\n\ntype DocsInstallProps = {\n  searchParams: Record<string, string | string[]>;\n};\n\nexport default async function DocsInstall({ searchParams }: DocsInstallProps) {\n  const media = findParam(searchParams, 'media') || 'video';\n  const mediaElement = mediaElements[media as keyof typeof mediaElements];\n\n  const framework = findParam(searchParams, 'framework') || 'html';\n\n  if (framework === 'html') return null;\n\n  const embed = findParam(searchParams, 'embed') ?? 'packaged';\n\n  let mediaPackage =\n    mediaElement.package?.[framework as keyof typeof mediaElement.package] ??\n    (mediaElement.package?.default as string);\n\n  if (mediaPackage && !mediaPackage.startsWith('@')) {\n    mediaPackage = mediaPackage.split('/')[0];\n  }\n\n  const installs = [embed === 'template' ? 'media-chrome' : 'player.style'];\n\n  if (mediaPackage) {\n    installs.unshift(mediaPackage);\n  }\n\n  return (\n    <>\n      <h4 className=\"text-lg font-medium mb-1\">Install dependencies</h4>\n\n      <div className=\"mb-1\">\n        <Code lang=\"bash\" code={installs.map((item) => `npm install ${item}`).join('\\n')} />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Footer.tsx",
    "content": "export default function Footer() {\n  return (\n    <>\n      <div className=\"overflow-hidden my-1px\">\n        <div className=\"relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray\">\n          <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n            <div className=\"-m-0.5px grid grid-cols-1 px-1 py-2 text-md text-gray-dark\">\n              © {new Date().getFullYear()} player.style\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Grid.tsx",
    "content": "import { ReactNode } from 'react';\nimport clsx from 'clsx';\n\ntype GridProps = {\n  className?: string;\n  withPadding?: boolean;\n  children?: ReactNode;\n};\n\nexport default function Grid({ className, withPadding = true, children }: GridProps) {\n  return (\n    <>\n      <div\n        className={clsx(\n          'relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray',\n          className\n        )}\n      >\n        <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n          <div className={clsx('gap-2 lg:gap-3 items-center', withPadding && 'py-2 px-1 md:p-2 lg:py-3 lg:px-3')}>\n            <div className=\"block border-ctx-gray bg-putty-light [&amp;>*]:set-border-ctx-gray [&amp;>*]:set-bg-ctx-putty-light text-black\">\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Hero.tsx",
    "content": "import Grid from './Grid';\nimport clsx from 'clsx';\n\ntype HeroProps = {\n  title: string;\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport default function Hero(props: HeroProps) {\n  return (\n    <>\n      <Grid className={clsx('text-center', props.className)}>\n        <h1 className=\"font-display text-2xl sm:text-4xl md:text-5xl lg:text-6xl tracking-wide leading-heading font-normal uppercase whitespace-pre-line mx-auto max-w-32 mb-1\">\n          {props.title}\n        </h1>\n        <div>\n          <p className=\"font-body text-md tracking-wide leading-normal font-normal normal-case max-w-30 mx-auto\">\n            {props.children}\n          </p>\n        </div>\n      </Grid>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Link/Link.client.tsx",
    "content": "'use client';\n\nimport NextLink from 'next/link';\nimport { useSearchParams } from 'next/navigation';\nimport { ParsedUrlQueryInput } from 'querystring';\nimport { ComponentPropsWithoutRef } from 'react';\n\ntype LinkProps = ComponentPropsWithoutRef<typeof NextLink>;\nexport default function ClientLink({ href, ...rest }: LinkProps) {\n  const searchParams = useSearchParams();\n\n  let _href: LinkProps['href'] =\n    typeof href === 'string'\n      ? {\n          pathname: href,\n        }\n      : href;\n\n  // if it's a local link, persist searchParams colors\n  const isLocalLink = _href.pathname?.startsWith('/');\n  if (isLocalLink && !_href.query) {\n    const query: ParsedUrlQueryInput = {};\n\n    const primaryColor = searchParams.get('primary-color');\n    if (primaryColor) query['primary-color'] = primaryColor;\n\n    const secondaryColor = searchParams.get('secondary-color');\n    if (secondaryColor) query['secondary-color'] = secondaryColor;\n\n    const accentColor = searchParams.get('accent-color');\n    if (accentColor) query['accent-color'] = accentColor;\n\n    _href.query = query;\n  }\n\n  return <NextLink {...rest} href={_href} />;\n}\n"
  },
  {
    "path": "site/app/_components/Link/Link.server.tsx",
    "content": "import NextLink from 'next/link';\nimport ClientLink from './Link.client';\nimport { ComponentPropsWithoutRef, Suspense } from 'react';\n\ntype LinkProps = ComponentPropsWithoutRef<typeof NextLink>;\n\n// useSearchParams requires Suspense.\n// In SSR it renders fallback.\n// On hydration, ClientLink comes in.\nexport default function Link(props: LinkProps) {\n  return (\n    <Suspense fallback={<NextLink {...props} />}>\n      <ClientLink {...props} />\n    </Suspense>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Link/index.ts",
    "content": "export { default } from './Link.server';\n"
  },
  {
    "path": "site/app/_components/LinkWithUnderline.tsx",
    "content": "import { ComponentPropsWithoutRef } from 'react';\nimport Link from './Link';\nimport clsx from 'clsx';\n\nexport default function LinkWithUnderline({ className, ...rest }: ComponentPropsWithoutRef<typeof Link>) {\n  return (\n    <Link\n      className={clsx(\n        'decoration-link underline underline-offset-normal hover:no-underline focus-visible:no-underline',\n        className\n      )}\n      {...rest}\n    />\n  );\n}\n"
  },
  {
    "path": "site/app/_components/MediaTheme.tsx",
    "content": "'use client';\n\nimport { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport 'media-chrome';\nimport { useSearchParams } from 'next/navigation';\nimport { MediaTheme } from 'media-chrome/dist/react/media-theme.js';\nimport 'media-chrome/dist/menu/index.js';\n\ntype MediaThemeProps = {\n  name: string;\n  theme: any;\n  children?: ReactNode;\n  className?: string;\n  defaultDuration?: number;\n  mediaTitle?: string;\n  mediaByline?: string;\n};\n\nexport default function MediaThemeComponent(props: MediaThemeProps) {\n  const { name, theme, children, className, defaultDuration, ...rest } = props;\n  const searchParams = useSearchParams();\n\n  const accentColor = searchParams.get('accent-color')\n    ? `#${searchParams.get('accent-color')}`\n    : theme.accentColor;\n\n  const primaryColor = searchParams.get('primary-color')\n    ? `#${searchParams.get('primary-color')}`\n    : theme.primaryColor;\n\n  const secondaryColor = searchParams.get('secondary-color')\n    ? `#${searchParams.get('secondary-color')}`\n    : theme.secondaryColor;\n\n  return (\n    <>\n      <template\n        id={`media-theme-${name}`}\n        dangerouslySetInnerHTML={{ __html: `${theme.templates.html.content}` }}\n      />\n      <MediaTheme\n        className={clsx('block w-full h-full', className, theme.themeProps?.className)}\n        key={theme.templates.html.content}\n        template={`media-theme-${name}`}\n        defaultDuration={defaultDuration}\n        style={{\n          '--media-accent-color': accentColor,\n          '--media-primary-color': primaryColor,\n          '--media-secondary-color': secondaryColor,\n        }}\n        {...theme.templates.html.props}\n        {...rest}\n      >\n        {children}\n      </MediaTheme>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/MobileNav.tsx",
    "content": "'use client';\n\nimport clsx from 'clsx';\nimport { useState } from 'react';\nimport { NavLink } from './NavLink';\n\nexport default function MobileNav() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div data-state=\"closed\" className=\"h-full block lg:hidden\">\n      <button\n        className={clsx('relative z-20 px-0.75 md:px-1 h-full group transition-colors ease-in-out-energetic duration-medium', open && 'bg-charcoal text-white')}\n        type=\"button\"\n        aria-expanded={open}\n        data-state={open ? 'open' : 'closed'}\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"sr-only\">Toggle navigation menu</span>\n        <svg\n          role=\"img\"\n          width=\"28\"\n          height=\"28\"\n          viewBox=\"0 0 28 28\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          data-state={open ? 'open' : 'closed'}\n          className=\"group/x transition-transform transform-gpu origin-center ease-in-out-energetic duration-medium group-active:-rotate-[10deg] data-[state=closed]:group-active:rotate-[10deg]\"\n        >\n          <title>X</title>\n          <path\n            d=\"M5 5L23 23\"\n            className=\"stroke-current transition-transform transform-gpu origin-center ease-in-out-energetic duration-medium group-data-[state=closed]/x:-translate-y-[15%] group-data-[state=closed]/x:rotate-[135deg]\"\n            vectorEffect=\"non-scaling-stroke\"\n          ></path>\n          <path\n            d=\"M5 23L23 5\"\n            className=\"stroke-current transition-transform transform-gpu origin-center ease-in-out-energetic duration-medium group-data-[state=closed]/x:translate-y-[15%] group-data-[state=closed]/x:rotate-45\"\n            vectorEffect=\"non-scaling-stroke\"\n          ></path>\n        </svg>\n      </button>\n      <nav\n        className=\"z-20 overflow-clip absolute -left-0.5px md:left-1/2 -right-0.5px top-[calc(100%-0.5px)] mb-0.5 duration-medium ease-in-out-energetic transition-[height] data-[state=open]:h-[170px] data-[state=closed]:h-0\"\n        data-orientation=\"vertical\"\n        data-state={open ? 'open' : 'closed'}\n      >\n        <NavLink\n          className=\"bg-charcoal text-white hover:bg-black focus-visible:bg-black w-full min-h-2 px-1 py-0.5 border-y border-x border-black flex items-center justify-between\"\n          href=\"/\"\n          onClick={() => setOpen(false)}\n        >\n          Themes\n        </NavLink>\n        <NavLink\n          className=\"bg-charcoal text-white hover:bg-black focus-visible:bg-black w-full min-h-2 px-1 py-0.5 border-b border-x border-black flex items-center justify-between\"\n          href=\"/about\"\n          onClick={() => setOpen(false)}\n        >\n          About\n        </NavLink>\n        <a\n          className=\"bg-charcoal text-white hover:bg-black focus-visible:bg-black w-full min-h-2 px-1 py-0.5 border-b border-x border-black flex items-center justify-between\"\n          href=\"https://github.com/muxinc/player.style/issues/new\"\n          target=\"_blank\"\n          onClick={() => setOpen(false)}\n        >\n          Feedback ⧉\n        </a>\n      </nav>\n    </div>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/MuxLogo.tsx",
    "content": "type MuxLogoProps = {\n  className?: string;\n};\n\nexport default function MuxLogo({ className }: MuxLogoProps) {\n  return (\n    <svg\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"70\"\n      height=\"19\"\n      viewBox=\"0 0 70 19\"\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M10.67 9.73H9.65v2.14h1.02c.34 0 .62-.09.82-.28.2-.19.3-.44.3-.76s-.1-.6-.3-.8c-.2-.2-.47-.3-.82-.3Zm-.05-.8c.31 0 .57-.08.75-.25.18-.17.28-.4.28-.7 0-.3-.09-.52-.28-.69-.19-.17-.43-.25-.75-.25h-.98v1.9h.01l.97-.01Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M60.54 0H9.46C4.24 0 0 4.23 0 9.45c0 5.22 4.24 9.46 9.46 9.46h51.08c5.22 0 9.46-4.23 9.46-9.46S65.76 0 60.54 0ZM12.21 12.2c-.36.33-.85.49-1.46.49H8.71V6.2h1.91c.61 0 1.09.15 1.45.45.35.3.53.71.53 1.22 0 .36-.09.66-.27.9-.18.24-.42.41-.74.49.36.09.64.27.85.56.21.28.31.63.31 1.05 0 .56-.18 1-.54 1.33Zm4.26-1.9v2.4h-.98v-2.4l-1.93-4.1h1l1.15 2.46a4 4 0 0 1 .19.45c.05.14.08.25.1.32.02-.07.05-.18.1-.32s.11-.29.18-.45L17.4 6.2h1l-1.93 4.1Zm17.8 3.47a1.44 1.44 0 0 1-2.88 0V8.61l-1.86 1.86c-.56.56-1.47.56-2.03 0l-1.86-1.86v5.16a1.44 1.44 0 0 1-2.88 0V5.14c0-.58.35-1.11.89-1.33.54-.22 1.16-.1 1.57.31l3.3 3.3 3.3-3.3c.41-.41 1.03-.53 1.57-.31h-.01c.54.22.89.75.89 1.33v8.63ZM47.3 9.45c0 3.17-2.58 5.75-5.75 5.75s-5.75-2.58-5.75-5.75V5.14a1.44 1.44 0 0 1 2.88 0v4.31a2.88 2.88 0 0 0 5.76 0V5.14c0-.8.64-1.43 1.43-1.44h-.01.02c.79 0 1.43.65 1.43 1.44v4.31h-.01Zm12.32 3.3a1.436 1.436 0 0 1-2.03 2.03l-3.3-3.3-3.3 3.3a1.436 1.436 0 0 1-2.03-2.03l3.3-3.3-3.3-3.3a1.436 1.436 0 0 1 2.03-2.03l3.3 3.3 3.3-3.3a1.436 1.436 0 0 1 2.03 2.03l-3.3 3.3 3.3 3.3Z\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/NavBar.tsx",
    "content": "import Link from './Link';\nimport PlayerStyleLogo from './PlayerStyleLogo';\nimport MuxLogo from './MuxLogo';\nimport { NavLink } from './NavLink';\nimport MobileNav from './MobileNav';\n\nexport default function NavBar() {\n  return (\n    <>\n      <div className=\"h-[57px] md:h-[85px] border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray -top-1px z-50\">\n        <div className=\"col-start-2 col-end-3 border-x border-ctx-gray\">\n          <div className=\"-m-0.5px grid-cols-1 relative h-2 md:h-3 flex items-center justify-between\">\n            <div className=\"flex items-center text-sm relative -top-1px md:-top-2px\">\n              <Link className=\"block relative pl-1 pr-0.25 md:pr-0.5\" href=\"/\">\n                <PlayerStyleLogo className=\"w-[130px] h-[26px] md:w-[170px] md:h-[34px]\" />\n                <span className=\"sr-only\">player.style</span>\n              </Link>\n              <a\n                className=\"relative top-[1px] text-blue-core hover:text-pink\"\n                href=\"https://mux.link/player-style\"\n                target=\"_blank\"\n              >\n                <span className=\"sr-only\">Made by Mux</span>\n                <MuxLogo className=\"fill-current w-[60px] md:w-[70px]\" />\n              </a>\n            </div>\n            <MobileNav />\n            <nav\n              aria-label=\"Main\"\n              data-orientation=\"horizontal\"\n              dir=\"ltr\"\n              className=\"border-ctx -m-0.5px self-stretch hidden lg:flex\"\n            >\n              <div className=\"relative\">\n                <ul data-orientation=\"horizontal\" className=\"h-full flex\" dir=\"ltr\">\n                  <li className=\"flex items-stretch whitespace-nowrap -mx-0.25 first:ml-0 last:mr-0 xl:mx-0\">\n                    <NavLink className=\"flex items-center p-1 hover:bg-blue-core hover:text-white\" href=\"/\">\n                      Themes\n                    </NavLink>\n                  </li>\n                  <li className=\"flex items-stretch whitespace-nowrap -mx-0.25 first:ml-0 last:mr-0 xl:mx-0\">\n                    <NavLink className=\"flex items-center p-1 hover:bg-blue-core hover:text-white\" href=\"/about\">\n                      About\n                    </NavLink>\n                  </li>\n                  <li className=\"flex items-stretch whitespace-nowrap -mx-0.25 first:ml-0 last:mr-0 xl:mx-0\">\n                    <a\n                      className=\"flex items-center p-1 hover:bg-blue-core hover:text-white\"\n                      href=\"https://github.com/muxinc/player.style/issues/new\"\n                      target=\"_blank\"\n                    >\n                      Feedback ↗\n                    </a>\n                  </li>\n                </ul>\n              </div>\n            </nav>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/NavLink.tsx",
    "content": "'use client';\n\nimport Link from './Link';\nimport { usePathname } from 'next/navigation';\nimport { MouseEventHandler } from 'react';\n\ntype NavLinkProps = {\n  href: string;\n  className?: string;\n  children: React.ReactNode;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n};\n\nexport const NavLink = ({ href, children, onClick, ...props }: NavLinkProps) => {\n  const pathname = usePathname();\n  const active = ' underline underline-offset-normal decoration-link';\n  const isActive = pathname === href;\n\n  if (isActive) {\n    props.className += active;\n  }\n\n  return (\n    <Link href={href} onClick={onClick} {...props}>\n      {children}\n    </Link>\n  );\n};\n"
  },
  {
    "path": "site/app/_components/PlayerHero.tsx",
    "content": "'use client';\n\nimport Video from '@/app/_components/Video';\nimport MediaTheme from '@/app/_components/MediaTheme';\nimport { FormEvent, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport mediaAssets from '@/media-assets';\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation';\n\ntype PlayerHeroProps = {\n  theme: any;\n  params: any;\n};\n\nconst MIN_PLAYER_WIDTH = 300;\nconst DEFAULT_ASSET = 'landscape';\n\nexport default function PlayerHero(props: PlayerHeroProps) {\n  const { theme } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const playerContainer = useRef<HTMLDivElement>(null);\n\n  const [minWidth, setMinWidth] = useState(0);\n  const [width, setWidth] = useState(100);\n  const [isLightMode, setLightMode] = useState(false);\n\n  const onWindowResize = () => {\n    if (!playerContainer.current?.offsetWidth) return;\n    setMinWidth((MIN_PLAYER_WIDTH / playerContainer.current?.offsetWidth) * 100);\n  };\n\n  useEffect(() => {\n    onWindowResize();\n    globalThis.addEventListener('resize', onWindowResize);\n\n    return () => {\n      globalThis.removeEventListener('resize', onWindowResize);\n    };\n  }, []);\n\n  const onInput = (event: FormEvent<HTMLInputElement>) => {\n    setWidth(parseInt(event.currentTarget.value, 10));\n  };\n\n  const searchParams = useSearchParams();\n  const pathname = usePathname();\n  const { replace } = useRouter();\n\n  const asset = (searchParams.get('asset') ?? theme.defaultAsset ?? DEFAULT_ASSET) as keyof typeof mediaAssets;\n  const assetItem = mediaAssets[asset];\n  const isPortrait = assetItem.aspectRatio < 1;\n\n  const setOrientation = (orientation: string) => {\n    // Reset sizing input to 100%.\n    setWidth(100);\n    changeAsset(orientation);\n    // Add a delay so that the player has time to resize.\n    setTimeout(onWindowResize, 100);\n  };\n\n  const changeAsset = (asset?: string) => {\n    if (asset === theme.defaultAsset) asset = '';\n\n    const params = new URLSearchParams(searchParams);\n    if (asset) {\n      params.set('asset', asset);\n    } else {\n      params.delete('asset');\n    }\n    replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  const hasFeature = (feature: string) => theme.tagGroups?.features.includes(feature);\n\n  return (\n    <>\n      <div\n        ref={container}\n        className={\n          isLightMode\n            ? 'set-bg-ctx-white set-border-ctx-gray text-black'\n            : 'set-bg-ctx-charcoal set-border-ctx-black text-white'\n        }\n      >\n        <div className=\"relative border-y -mt-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-ctx border-ctx z-10\">\n          <div className=\"col-start-2 col-end-3 border-x border-ctx\">\n            <div className=\"-m-0.5px grid grid-cols-1 h-2\"></div>\n          </div>\n        </div>\n        <div className=\"relative grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-ctx border-ctx z-10\">\n          <div className=\"col-start-2 col-end-3 border-x border-ctx\">\n            <div\n              ref={playerContainer}\n              className={clsx(\n                'flex items-center justify-center dark max-h-[719px] mx-auto overflow-hidden',\n                theme.audio && 'max-w-full sm:p-1 md:p-2'\n              )}\n              style={{\n                aspectRatio: !theme.audio ? assetItem.aspectRatio : undefined,\n                width: theme.audio ? assetItem.aspectRatio * 719 : undefined,\n              }}\n            >\n              <div\n                className=\"@container max-w-full\"\n                style={{\n                  aspectRatio: !theme.audio ? assetItem.aspectRatio : undefined,\n                  width: `${width}%`,\n                  minWidth: MIN_PLAYER_WIDTH,\n                }}\n              >\n                <MediaTheme\n                  name={props.params.slug}\n                  theme={theme}\n                  defaultDuration={assetItem.duration}\n                  mediaTitle={assetItem.title}\n                  mediaByline={assetItem.byline}\n                >\n                  {/* eslint-disable-next-line @next/next/no-img-element */}\n                  <img slot=\"poster\" src={assetItem.poster} alt=\"\" />\n                  <Video\n                    className=\"block\"\n                    slot=\"media\"\n                    src={assetItem.src}\n                    poster={!theme.audio ? assetItem.poster : undefined}\n                  >\n                    <track\n                      label=\"thumbnails\"\n                      default\n                      kind=\"metadata\"\n                      src={assetItem.thumbnails}\n                      // Use key so the track element is replaced if src changes.\n                      // custom-media-element doesn't support track attr changes.\n                      key={assetItem.thumbnails}\n                    />\n                    {assetItem.chapters && hasFeature('chapters') && (\n                      <track default kind=\"chapters\" src={assetItem.chapters} key={assetItem.chapters} />\n                    )}\n                  </Video>\n                </MediaTheme>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"relative border-y -mt-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-ctx border-ctx z-10\">\n          <div className=\"col-start-2 col-end-3 border-x border-ctx flex justify-between p-1\">\n            <div className=\"flex items-center gap-1\">\n              <div className=\"hidden sm:flex items-center border-r border-black pr-1\">\n                <label htmlFor=\"player-size\" className=\"mr-0.5\">\n                  Size\n                </label>\n                <input\n                  type=\"range\"\n                  id=\"player-size\"\n                  min={Math.round(minWidth)}\n                  max=\"100\"\n                  value={width}\n                  onInput={onInput}\n                />\n              </div>\n              <div className=\"flex gap-0.5\">\n                <button onClick={() => setOrientation('landscape')} title=\"Show landscape\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"32\"\n                    height=\"20\"\n                    viewBox=\"0 0 32 20\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    className={clsx('size-1.25 transition-opacity duration-short', isPortrait && 'opacity-30')}\n                  >\n                    <rect width=\"30\" height=\"18\" x=\"1\" y=\"1\" rx=\"3\" />\n                    <path strokeLinecap=\"round\" d=\"M27 7v6\" />\n                  </svg>\n                </button>\n                <button onClick={() => setOrientation('portrait')} title=\"Show portrait\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 20 32\"\n                    stroke=\"currentColor\"\n                    className={clsx('size-1.25 transition-opacity duration-short', !isPortrait && 'opacity-30')}\n                  >\n                    <rect width=\"30\" height=\"18\" x=\"19\" y=\"1\" rx=\"3\" transform=\"rotate(90 19 1)\" />\n                    <path strokeLinecap=\"round\" d=\"M13 27H7\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n            <div className=\"flex gap-0.5 md:gap-1\">\n              <button onClick={() => setLightMode(true)} title=\"Light mode\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  className={clsx(\n                    'size-1 transition-opacity duration-short',\n                    !isLightMode ? 'opacity-30' : 'opacity-100'\n                  )}\n                >\n                  <circle cx=\"12\" cy=\"12\" r=\"5\" />\n                  <path d=\"M12 4V0M12 24v-4M17.657 6.343l2.828-2.828M3.515 20.485l2.828-2.828M17.657 17.657l2.828 2.828M3.515 3.515l2.828 2.828M20 12h4M0 12h4\" />\n                </svg>\n              </button>\n              <button onClick={() => setLightMode(false)} title=\"Dark mode\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  className={clsx(\n                    'size-1 transition-opacity duration-short',\n                    isLightMode ? 'opacity-30' : 'opacity-100'\n                  )}\n                >\n                  <path d=\"m23 16.229.456.206a.5.5 0 0 0-.662-.662zM7.771 1l.456.206a.5.5 0 0 0-.662-.662zm15.023 14.773a11 11 0 0 1-4.531.973v1c1.761 0 3.435-.38 4.943-1.062zm-4.531.973c-6.08 0-11.009-4.929-11.009-11.009h-1c0 6.632 5.377 12.009 12.009 12.009zM7.254 5.737c0-1.616.348-3.15.973-4.531L7.316.794a12 12 0 0 0-1.062 4.943zM1.5 11.492A11.01 11.01 0 0 1 7.977 1.456L7.565.544C3.4 2.428.5 6.621.5 11.492zM12.509 22.5C6.429 22.5 1.5 17.571 1.5 11.492h-1C.5 18.124 5.876 23.5 12.509 23.5zm10.035-6.477A11.01 11.01 0 0 1 12.51 22.5v1c4.87 0 9.063-2.9 10.947-7.065z\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/PlayerStyleLogo.tsx",
    "content": "type PlayerStyleLogoProps = {\n  className?: string;\n};\n\nexport default function PlayerStyleLogo({ className }: PlayerStyleLogoProps) {\n  return (\n    <svg\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 150 30\"\n      width=\"150\"\n      height=\"30\"\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M14.664 11.78c.627 1.199.935 2.608.935 4.216s-.314 2.96-.935 4.158c-.628 1.198-1.493 2.127-2.601 2.78-1.109.653-2.37.98-3.78.98-1.147 0-2.146-.211-2.992-.634-.845-.423-1.524-1-2.024-1.723v8.225H0V8.264h2.844l.391 2.3c1.25-1.653 2.934-2.48 5.048-2.48 1.41 0 2.671.32 3.78.955 1.108.634 1.973 1.55 2.6 2.748v-.006Zm-2.39 4.223c0-1.531-.416-2.774-1.255-3.722-.84-.949-1.929-1.423-3.28-1.423-1.352 0-2.441.468-3.268 1.403-.826.936-1.242 2.166-1.242 3.671s.416 2.812 1.242 3.78c.827.967 1.916 1.448 3.268 1.448 1.351 0 2.44-.48 3.28-1.448.839-.968 1.255-2.21 1.255-3.722v.013Zm9.219-13.428v21.166h-3.267V2.575h3.267Zm18.02 21.166H37.79c-1.006 0-1.736-.211-2.178-.634-.442-.423-.666-1.038-.666-1.845-1.166 1.774-2.87 2.659-5.113 2.659-1.736 0-3.126-.404-4.17-1.211-1.05-.807-1.57-1.916-1.57-3.325 0-1.595.564-2.819 1.692-3.67 1.127-.86 2.774-1.288 4.926-1.288h3.901v-.936c0-.864-.3-1.55-.91-2.043-.601-.494-1.44-.743-2.51-.743-.949 0-1.73.205-2.345.621-.615.416-.98.961-1.102 1.646h-3.203c.16-1.55.846-2.754 2.056-3.613 1.211-.858 2.793-1.287 4.747-1.287 2.076 0 3.677.48 4.805 1.454 1.127.967 1.691 2.357 1.691 4.17v6.105c0 .724.346 1.09 1.025 1.09h.634v2.844l.013.006Zm-8.95-6.893c-1.005 0-1.78.199-2.325.59-.544.39-.813.973-.813 1.736 0 .666.256 1.198.768 1.601.513.404 1.218.602 2.102.602 1.351 0 2.402-.365 3.158-1.089.756-.724 1.147-1.69 1.166-2.902v-.544H30.57l-.006.006Zm16.509 3.357 4.203-11.941h3.478L47.74 26.163c-.365.929-.699 1.64-1 2.133-.3.493-.672.865-1.12 1.121-.443.25-1.039.378-1.782.378h-3.504v-2.87h2.3c.628 0 1.057-.096 1.3-.288.244-.192.494-.622.756-1.288l.635-1.48L39.276 8.27h3.479l4.324 11.941-.007-.006Zm11.775-11.14c1.14-.654 2.44-.98 3.914-.98 1.473 0 2.806.3 3.946.91a6.7 6.7 0 0 1 2.69 2.568c.654 1.108.994 2.409 1.013 3.901 0 .404-.032.814-.09 1.237H58.648v.18c.084 1.35.506 2.42 1.269 3.202.768.788 1.78 1.179 3.055 1.179 1.006 0 1.858-.237 2.537-.711.686-.474 1.14-1.147 1.358-2.012h3.267c-.281 1.576-1.044 2.864-2.28 3.87-1.243 1.006-2.787 1.512-4.638 1.512-1.614 0-3.017-.327-4.215-.98a6.844 6.844 0 0 1-2.78-2.768c-.654-1.192-.98-2.569-.98-4.138 0-1.57.32-2.992.954-4.19.634-1.198 1.524-2.127 2.658-2.78h-.006Zm6.893 2.6c-.756-.634-1.71-.954-2.857-.954-1.07 0-1.992.327-2.768.98-.775.654-1.223 1.525-1.345 2.614h8.315c-.14-1.127-.59-2.012-1.345-2.646v.007Zm15.855-.352h-1.454c-1.352 0-2.326.436-2.934 1.313-.602.878-.91 1.993-.91 3.338v7.77H73.03V8.265h2.902l.365 2.325a4.948 4.948 0 0 1 1.724-1.71c.704-.416 1.652-.621 2.844-.621h.724v3.055h.006Zm2.659 8.495c.602 0 1.108.192 1.511.576.404.385.603.878.603 1.48s-.199 1.096-.602 1.48c-.404.384-.91.577-1.512.577-.603 0-1.102-.193-1.5-.577-.39-.384-.589-.878-.589-1.48s.199-1.095.59-1.48c.39-.384.89-.576 1.499-.576ZM98.02 7.854c-2.863 0-4.631 2.088-4.631 4.023 0 1.384.403 2.377 2.928 4.946 1.909 1.953 2.408 2.504 2.408 3.517 0 1.012-.877 1.985-2.55 1.985-1.396 0-2.594-.538-3.773-1.69l-.16-.16-1.377 1.274.14.173c1.186 1.448 2.82 2.178 4.857 2.178 2.94 0 4.843-1.55 4.843-3.96 0-1.62-.756-2.478-3.133-4.945-1.864-1.94-2.165-2.639-2.165-3.549 0-1.204.974-2.05 2.377-2.05 1.024 0 1.96.231 3.036.743l.218.103.756-1.62-.205-.11c-1.224-.634-1.948-.858-3.562-.858h-.007Zm14.92 11.012-1.358-.878-.134.193c-.929 1.37-2.819 3.235-4.017 3.99-.064-.3-.077-.666-.077-1.095 0-.602.058-1.396.173-2.293l1.057-8.719h4.741l.237-1.838h-4.741l.667-5.292-1.807.09-.871 5.253-2.62.198-.199 1.519 2.582.064-1.012 7.732c-.205 1.473-.314 2.857-.314 3.882 0 1.134.211 2.428 1.845 2.428 1.633 0 4.618-2.838 5.752-5.042l.103-.192h-.007Zm12.973-10.871-1.858.263.045.25c.205 1.095.307 2.107.307 2.94 0 3.248-.755 5.701-3.081 9.84-1.025-4.139-3.145-10.404-4.657-13.146l-.103-.18-1.793.654.102.23c1.723 3.992 3.946 10.328 4.882 14.793-1.871 2.697-4.184 4.106-7.483 4.56l-.256.033.378 1.762.218-.026c4.375-.551 7.373-2.831 10.358-7.886 2.973-5.093 3.556-7.81 3.556-10.775 0-1.096-.231-2.415-.545-3.152l-.07-.167v.007Zm7.995 13.517c-.673.25-1.871.621-2.704.82a20.36 20.36 0 0 1 .135-1.896l2.024-17.194c.071-.61.109-1.224.109-1.685 0-.462-.07-.968-.186-1.358l-.051-.193-1.505.135-2.358 19.98-.051.41c-.083.693-.16 1.288-.16 1.782 0 1.262.448 1.8 1.492 1.8 1.275 0 2.806-.526 3.908-1.34l.16-.12-.608-1.205-.199.077-.006-.013Zm13.754-3.46-.135.193c-1.96 2.754-3.747 3.984-5.797 3.984-1.339 0-2.883-.48-2.966-4.177 5.618-2.19 8.469-4.663 8.469-7.335 0-1.32-.551-2.895-3.171-2.895-4.51 0-7.419 3.99-7.419 10.166 0 4.056 1.615 6.118 4.805 6.118 2.831 0 5.15-1.505 7.514-4.881l.141-.199-1.441-.96v-.014Zm-4.017-8.494c1.121 0 1.538.41 1.538 1.518 0 1.185-1.685 3.216-6.4 5.112.295-3.927 2.261-6.636 4.862-6.636v.006Z\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/PostHogPageView.tsx",
    "content": "'use client';\n\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport { useEffect } from 'react';\nimport { usePostHog } from 'posthog-js/react';\n\nexport default function PostHogPageView(): null {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  const posthog = usePostHog();\n\n  useEffect(() => {\n    // Track pageviews\n    if (pathname && posthog) {\n      let url = window.origin + pathname;\n      if (searchParams.toString()) {\n        url = url + `?${searchParams.toString()}`;\n      }\n      posthog.capture('$pageview', {\n        $current_url: url,\n      });\n    }\n  }, [pathname, searchParams, posthog]);\n\n  return null;\n}\n"
  },
  {
    "path": "site/app/_components/Search.tsx",
    "content": "'use client';\n\nimport { useRef } from 'react';\nimport { useSearchParams, usePathname, useRouter } from 'next/navigation';\nimport { useDebouncedCallback } from 'use-debounce';\nimport clsx from 'clsx';\n\nexport default function Search() {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const searchParams = useSearchParams();\n  const pathname = usePathname();\n  const { replace } = useRouter();\n\n  const handleSearch = (term: string) => {\n    const params = new URLSearchParams(searchParams);\n    if (term) {\n      params.set('search', term);\n    } else {\n      // This is a workaround for a bug where the page without a search query\n      // would not trigger a RSC update.\n      // params.delete('search');\n      params.set('search', term);\n    }\n    replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  const handleSearchDebounced = useDebouncedCallback(handleSearch, 300);\n  const search = searchParams.get('search')?.toString();\n\n  return (\n    <>\n      <div className=\"relative w-full p-1\">\n        <span className=\"inline-flex flex-col relative w-full h-full\">\n          <input\n            ref={inputRef}\n            className=\"rounded-none min-h-2 border border-gray focus:border-current p-0.5 bg-white dark:bg-charcoal text-black dark:text-white px-1 !rounded-1\"\n            placeholder=\"Search...\"\n            type=\"text\"\n            onChange={(event) => handleSearchDebounced(event.target.value)}\n            defaultValue={search}\n          />\n        </span>\n        <span\n          className={clsx(\n            search && 'hidden',\n            'absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer'\n          )}\n        >\n          <svg\n            role=\"img\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"none\"\n            viewBox=\"0 0 42 42\"\n          >\n            <title>Search</title>\n            <circle\n              cx=\"25.5\"\n              cy=\"16.5\"\n              r=\"13\"\n              className=\"stroke-current\"\n              vectorEffect=\"non-scaling-stroke\"\n            ></circle>\n            <path\n              d=\"M16.5 25.5 3 39\"\n              className=\"stroke-current\"\n              vectorEffect=\"non-scaling-stroke\"\n            ></path>\n          </svg>\n        </span>\n        <button\n          className={clsx(\n            !search && 'hidden',\n            'absolute top-1/2 -translate-y-1/2 cursor-pointer right-2'\n          )}\n          onClick={() => {\n            if (!inputRef.current) return;\n            inputRef.current.focus();\n            inputRef.current.value = '';\n            handleSearch('');\n          }}\n        >\n          <svg\n            role=\"img\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"none\"\n            viewBox=\"0 0 42 42\"\n            strokeLinecap=\"square\"\n            strokeMiterlimit=\"1.5\"\n          >\n            <title>X</title>\n            <path\n              d=\"M1 1l40 40M41 1L1 41\"\n              className=\"stroke-current\"\n              vectorEffect=\"non-scaling-stroke\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/TagCheckbox.tsx",
    "content": "'use client';\n\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation';\n\ntype TagCheckboxProps = {\n  name: string;\n  group: string;\n};\n\nexport default function TagCheckbox({ name, group }: TagCheckboxProps) {\n  const searchParams = useSearchParams();\n  const pathname = usePathname();\n  const { replace } = useRouter();\n\n  const handleTag = (term: string, checked: boolean) => {\n    const params = new URLSearchParams(searchParams);\n    params.delete(group, term);\n\n    if (checked) {\n      params.append(group, term);\n    }\n\n    replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  const value = name.toLowerCase();\n\n  return (\n    <>\n      <div key={`tag-${value}`} className=\"flex items-center py-0.25\">\n        <input\n          className=\"appearance-none flex items-center justify-center rounded-none border border-gray-dark mr-0.5 border border-gray-dark w-1 h-1 relative after:hidden after:checked:block after:content-empty after:border after:border-green-dark after:bg-green after:absolute after:w-0.5 after:h-0.5 after:rounded-1\"\n          type=\"checkbox\"\n          id={`tag-${value}`}\n          value={value}\n          onChange={(e) => {\n            handleTag(e.target.value, e.target.checked);\n          }}\n          defaultChecked={searchParams.getAll(group).includes(value)}\n        />\n        <label className=\"select-none uppercase font-mono text-sm\" htmlFor={`tag-${value}`}>\n          {name}\n        </label>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/ThemeColorPopover.tsx",
    "content": "'use client';\nimport * as Popover from '@radix-ui/react-popover';\nimport LinkWithUnderline from './LinkWithUnderline';\n\nfunction InfoIcon() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" role=\"img\" className=\"w-0.5 h-0.5\">\n      <title>Info</title>\n      <circle\n        cx=\"8\"\n        cy=\"8\"\n        r=\"7.5\"\n        className=\"stroke-gray group-hover:stroke-current group-focus:stroke-current group-data-[state=open]:stroke-current\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n      <path\n        className=\"fill-gray group-hover:fill-current group-focus:fill-current group-data-[state=open]:fill-current\"\n        d=\"M8.5 5V3.5H7V5zm0 1.25v5H10v1H6v-1h1.5v-4h-1v-1z\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n    </svg>\n  );\n}\n\nexport default function ThemeColorPopover() {\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button aria-label=\"Update dimensions\" className=\"group\">\n          <InfoIcon />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          side=\"bottom\"\n          collisionPadding={7}\n          sideOffset={7}\n          className=\"bg-black text-white px-0.5 pb-0.5 pt-1 text-sm max-w-12\"\n        >\n          <p className=\"mb-0.5\">\n            You can usually customize a theme with{' '}\n            <LinkWithUnderline href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\">\n              CSS custom properties\n            </LinkWithUnderline>\n            . Use this panel to configure the following:\n          </p>\n          <ul className=\"list-disc ml-1 mb-0.5\">\n            <li>\n              <code className=\"text-xs font-mono whitespace-nowrap bg-charcoal px-0.25 py-2px\">\n                --media-primary-color\n              </code>\n            </li>\n            <li>\n              <code className=\"text-xs font-mono whitespace-nowrap bg-charcoal px-0.25 py-2px\">\n                --media-secondary-color\n              </code>\n            </li>\n            <li>\n              <code className=\"text-xs font-mono whitespace-nowrap bg-charcoal px-0.25 py-2px\">\n                --media-accent-color\n              </code>\n            </li>\n          </ul>\n          <p className=\"mb-0.5\">\n            You can read more about customizing themes by visiting the{' '}\n            <LinkWithUnderline href=\"https://www.media-chrome.org/docs/en/reference/styling\">\n              Media Chrome Styling Reference\n            </LinkWithUnderline>\n            .\n          </p>\n          <Popover.Close\n            aria-label=\"Close\"\n            className=\"absolute top-0 right-0 flex items-center justify-center w-1 h-1 hover:bg-charcoal focus:bg-charcoal\"\n          >\n            &times;\n          </Popover.Close>\n          <Popover.Arrow className=\"fill-black stroke-gray\" />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/ThemePreview.tsx",
    "content": "import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport Video from '@/app/_components/Video';\nimport MediaTheme from '@/app/_components/MediaTheme';\nimport AuthorLink from './AuthorLink';\nimport mediaAssets from '@/media-assets';\n\nimport type { Theme } from 'content-collections';\nimport Link from './Link';\n\ntype ThemePreviewProps = {\n  key: string;\n  children?: ReactNode;\n  priority: boolean;\n  theme: Theme;\n};\n\nconst DEFAULT_ASSET = 'landscape';\n\nexport default function ThemePreview(props: ThemePreviewProps) {\n  const { theme } = props;\n\n  const asset = (theme.defaultAsset ?? DEFAULT_ASSET) as keyof typeof mediaAssets;\n  const assetItem = mediaAssets[asset];\n  const hasFeature = (feature: string) => theme.tagGroups?.features.includes(feature);\n\n  return (\n    <>\n      <div className=\"bg-white border-ctx border -m-0.5px relative grid gap-x-2 gap-y-1 p-1 pb-2 md:px-2 md:py-1.5\">\n        <div className={clsx('w-full', theme.audio ? 'py-2' : undefined)}>\n          <div\n            className=\"@container max-h-[480px] mx-auto\"\n            style={{\n              aspectRatio: !theme.audio ? assetItem.aspectRatio : undefined,\n            }}\n          >\n            <MediaTheme\n              name={theme._meta.path}\n              theme={theme}\n              defaultDuration={assetItem.duration}\n              mediaTitle={assetItem.title}\n              mediaByline={assetItem.byline}\n            >\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img slot=\"poster\" src={assetItem.poster} alt=\"\" />\n              <Video\n                className=\"block\"\n                slot=\"media\"\n                src={assetItem.src}\n                poster={!theme.audio ? assetItem.poster : undefined}\n                preload=\"none\"\n              >\n                <track default label=\"thumbnails\" kind=\"metadata\" src={assetItem.thumbnails} />\n                {assetItem.chapters && hasFeature('chapters') && (\n                  <track default kind=\"chapters\" src={assetItem.chapters} key={assetItem.chapters} />\n                )}\n              </Video>\n            </MediaTheme>\n          </div>\n        </div>\n        <div>\n          <Link\n            href={`/themes/${theme._meta.path}`}\n            className=\"group cursor-pointer flex items-center justify-between gap-0.5 mb-0.5\"\n          >\n            <h2 className=\"text-xl md:text-4xl leading-heading font-bold [text-wrap:balance] underline-offset-heading decoration-link group-hover:underline group-focus-visible:underline\">\n              {theme.title}\n            </h2>\n            <div className=\"px-0.5 py-0.25 rounded-4 font-mono leading-mono tracking-wide text-xs uppercase bg-putty-light border border-ctx group-hover:bg-blue group-hover:text-white group-hover:border-blue-dark group-focus-visible:bg-blue group-focus-visible:text-white group-focus-visible:border-blue-dark\">\n              View theme\n            </div>\n          </Link>\n          <p className=\"mb-0.5 font-body text-md text-pretty tracking-wide leading-normal font-normal normal-case max-w-26 pr-1\">\n            {theme.description}\n          </p>\n          <AuthorLink handle={theme.author} />\n        </div>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/_components/Video.tsx",
    "content": "'use client';\n\nimport '@mux/mux-video';\nimport { DetailedHTMLProps, VideoHTMLAttributes } from 'react';\n\ndeclare global {\n  namespace JSX {\n    interface IntrinsicElements {\n      'mux-video': any;\n    }\n  }\n}\n\ntype VideoProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {\n  className?: string;\n  slot?: string;\n  children?: React.ReactNode;\n};\n\nexport default function Video({ className, ...props }: VideoProps) {\n  return (\n    <mux-video\n      suppressHydrationWarning\n      crossOrigin=\"anonymous\"\n      playsInline\n      cast-src={props.src}\n      class={className}\n      {...props}\n    >\n      {props.children}\n    </mux-video>\n  );\n}\n"
  },
  {
    "path": "site/app/_utils/content.ts",
    "content": "import deepMerge from 'deepmerge';\nimport { allThemes, allPlayers, allFeatures, allFrameworks } from 'content-collections';\nimport { Meta } from '@content-collections/core';\nimport flexsearch from 'flexsearch';\n\nconst { Document } = flexsearch;\n\nconst allCollections = {\n  themes: allThemes,\n  players: allPlayers,\n  features: allFeatures,\n  frameworks: allFrameworks,\n};\n\ntype Collections = typeof allCollections;\ntype CollectionName = keyof Collections;\ntype CollectionOptions = {\n  slug?: string;\n  searchParams?: Record<string, string | string[]>;\n};\n\nexport async function getCollection<K extends CollectionName>(\n  name: K,\n  options: CollectionOptions = {}\n) {\n  const collection = allCollections[name as CollectionName];\n  return filterCollection(collection, options) as Promise<Collections[K]>;\n}\n\nexport async function getEntry<K extends CollectionName>(collection: K, slug: string) {\n  return (await getCollection(collection, { slug }))[0] as Collections[K][number];\n}\n\nexport async function getCollectionTagGroups(name: CollectionName) {\n  const collection = await getCollection(name);\n  const tagGroups = collection.map((item: any) => item.tagGroups).flat();\n  return deepMerge.all(tagGroups, {\n    arrayMerge: (a, b) => Array.from(new Set([...a, ...b])),\n  });\n}\n\nfunction includesIgnoreCase(array: string[], value: string) {\n  return array.some((item) => item.toLowerCase() === value.toLowerCase());\n}\n\nasync function filterCollection<T extends { _meta: Meta }>(\n  collection: T[],\n  options: CollectionOptions = {}\n) {\n  const searchParams = options.searchParams || {};\n\n  collection = collection.filter((item: { _meta: Meta }) => {\n    if (options.slug && item._meta.path !== options.slug) return false;\n    return true;\n  });\n\n  collection.sort((a: any, b: any) => {\n    return new Date(b.date).getTime() - new Date(a.date).getTime();\n  });\n\n  if (searchParams.search) {\n    const search = `${searchParams.search}`.toLowerCase();\n    const index = new Document({\n      tokenize: 'forward',\n      document: {\n        id: '_meta:path',\n        index: ['title', 'description', 'author'],\n      },\n    });\n    collection.forEach((item) => index.add(item));\n    const results = index.search(search);\n    const ids = [...new Set(results.flatMap(({ result }) => result))];\n    return ids.map((id) => collection.find((item) => item._meta.path === id));\n  }\n\n  for (let [tagGroup, selectedTags] of Object.entries(searchParams)) {\n    const selectedTagsArray = Array.isArray(selectedTags) ? selectedTags : [selectedTags];\n    collection = collection.filter((item: any) => {\n      if (!item.tagGroups[tagGroup]) return true;\n      return selectedTagsArray.some((tag: string) =>\n        includesIgnoreCase(item.tagGroups[tagGroup], tag)\n      );\n    });\n  }\n\n  return collection;\n}\n"
  },
  {
    "path": "site/app/_utils/utils.ts",
    "content": "export function findParam(searchParams: Record<string, string | string[]>, name: string) {\n  const param = searchParams[name];\n  if (Array.isArray(param)) {\n    return param[0];\n  }\n  return param;\n}\n"
  },
  {
    "path": "site/app/about/page.tsx",
    "content": "import Grid from '../_components/Grid';\nimport LinkWithUnderline from '../_components/LinkWithUnderline';\n\nconst P = ({ children }: { children: React.ReactNode }) => (\n  <p className=\"font-body tracking-wide text-md leading-normal last:mb-0 mb-1 font-normal normal-case [text-wrap:pretty] mx-auto w-full max-w-26\">\n    {children}\n  </p>\n);\n\nconst LI = ({ children }: { children: React.ReactNode }) => (\n  <li className=\"font-body tracking-wide text-md leading-normal mb-0.25 last:mb-0 font-normal normal-case [text-wrap:pretty] mx-auto w-full max-w-26\">\n    {children}\n  </li>\n);\n\nexport default function About() {\n  return (\n    <>\n      <Grid withPadding={false}>\n        <div className=\"bg-white py-2 px-1 md:py-3 md:px-2 lg:py-4 lg:px-3 min-h-[calc(100vh-theme(spacing.7))]\">\n          <h1 className=\"font-body text-2xl md:text-4xl leading-heading-2 md:leading-heading font-bold normal-case [text-wrap:pretty] mx-auto w-full max-w-26 mb-1\">\n            About\n          </h1>\n          <P>\n            Who loves video players? We do! We just want them to be… prettier. Like, all of them. More polished, too.\n            And what if your player looked like it was made for your website? 🙀 And what if it just worked with your\n            dev framework? 🤯\n          </P>\n          <P>\n            We might be shooting for the stars, but we&rsquo;re also building on top of the magical{' '}\n            <LinkWithUnderline href=\"https://media-chrome.org\" target=\"_blank\">\n              media chrome\n            </LinkWithUnderline>{' '}\n            ecosystem of player components, which does a few things for us:\n          </P>\n          <ol className=\"list-decimal ml-1 mb-1\">\n            <LI>\n              It uses web components which are compatible across web dev frameworks. Yes, even React (which can be\n              grumpy about web components).\n            </LI>\n            <LI>\n              It allows us to separate the player UI from the player streaming technology, so skins can be used across\n              “players” rather than being player-specific.\n            </LI>\n          </ol>\n          <P>It&rsquo;s a brave new world…</P>\n          <P>\n            The player.style team built Video.js and contributed to most of your favorite streaming site players, so\n            this ain&rsquo;t our first rotoscope. And we all work at{' '}\n            <LinkWithUnderline href=\"https://mux.link/player-style\">Mux</LinkWithUnderline>, in case you&rsquo;re\n            looking for some video hosting to pair with your player. We hope player.style helps you find the ideal\n            player for whatever you&rsquo;re trying to do with video.\n          </P>\n          <P>\n            Help us get the word out! TwiX it or something. If you share player.style, you&rsquo;ll get one theme for\n            free! (They&rsquo;re all free, but the first one will be <em>really</em> free).\n          </P>\n          <P>\n            Sincerely,\n            <br />\n            The player.stylyzers\n          </P>\n        </div>\n      </Grid>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/demo/page.tsx",
    "content": "import Grid from '../_components/Grid';\nimport MuxVideo from '@mux/mux-video-react';\nimport MediaTheme from 'player.style/microvideo/react';\n\nexport default function Demo() {\n  return (\n    <>\n      <Grid>\n        <MediaTheme className=\"aspect-video block w-full\">\n          <MuxVideo\n            suppressHydrationWarning\n            className=\"w-full h-full\"\n            slot=\"media\"\n            src=\"https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8\"\n            poster=\"https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp\"\n          ></MuxVideo>\n        </MediaTheme>\n      </Grid>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/features/[slug]/page.tsx",
    "content": "import type { Metadata } from 'next';\nimport Grid from '@/app/_components/Grid';\nimport { getEntry } from '@/app/_utils/content';\n\nexport async function generateMetadata(props: any): Promise<Metadata> {\n  const entry = await getEntry('features', props.params.slug);\n\n  return {\n    title: `player.style - ${entry.title}`,\n    description: entry.description,\n  };\n}\n\nexport default async function Page(props: any) {\n  const entry = await getEntry('features', props.params.slug);\n\n  return (\n    <>\n      <div className=\"flex-1\">\n        <Grid>\n          <h1 className=\"text-3xl font-bold mb-0.5\">{entry.title}</h1>\n          <p className=\"text-lg mb-0.5 md:mr-8\">{entry.description}</p>\n        </Grid>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/layout.tsx",
    "content": "import type { Metadata } from 'next';\nimport clsx from 'clsx';\nimport fontVariableClassNames from './styles/fonts';\nimport './styles/globals.css';\n\nimport { AnalyticsProvider } from './_components/AnalyticsProvider';\nimport NavBar from './_components/NavBar';\nimport Footer from './_components/Footer';\nimport dynamic from 'next/dynamic';\nimport { Suspense } from 'react';\n\nconst PostHogPageView = dynamic(() => import('./_components/PostHogPageView'), {\n  ssr: false,\n});\n\nexport const metadata: Metadata = {\n  title: 'player.style',\n  description: 'A fresh collection of media player themes for every use case!',\n};\n\nexport default function RootLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <html lang=\"en\" className={clsx(fontVariableClassNames, 'min-w-[20rem]')}>\n      <AnalyticsProvider>\n        <head>\n          <link rel=\"icon\" href=\"/favicon.ico\" sizes=\"any\" />\n          <link rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\" />\n        </head>\n        <body className=\"flex flex-col min-h-screen font-body antialiased bg-putty selection:bg-pink-neon/60\">\n          <Suspense>\n            <PostHogPageView />\n          </Suspense>\n          <NavBar />\n          {children}\n          <Footer />\n        </body>\n      </AnalyticsProvider>\n    </html>\n  );\n}\n"
  },
  {
    "path": "site/app/players/[slug]/page.tsx",
    "content": "import type { Metadata } from 'next';\nimport Grid from '@/app/_components/Grid';\nimport { getEntry } from '@/app/_utils/content';\n\nexport async function generateMetadata(props: any): Promise<Metadata> {\n  const entry = await getEntry('players', props.params.slug);\n\n  return {\n    title: `player.style - ${entry.title} player`,\n    description: entry.description,\n  };\n}\n\nexport default async function Page(props: any) {\n  const entry = await getEntry('players', props.params.slug);\n\n  return (\n    <>\n      <div className=\"flex-1\">\n        <Grid>\n          <h1 className=\"text-3xl font-bold mb-0.5\">{entry.title}</h1>\n          <p className=\"text-lg mb-0.5 md:mr-8\">{entry.description}</p>\n        </Grid>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/app/styles/fonts/index.ts",
    "content": "import localFont from 'next/font/local';\n\nconst Aeonik = localFont({\n  variable: '--body',\n  src: [\n    { path: './Aeonik/Aeonik-Bold.woff2', weight: '700', style: 'normal' },\n    { path: './Aeonik/Aeonik-BoldItalic.woff2', weight: '700', style: 'italic' },\n    { path: './Aeonik/Aeonik-RegularItalic.woff2', weight: '400', style: 'italic' },\n    { path: './Aeonik/Aeonik-Regular.woff2', weight: '400', style: 'normal' },\n  ],\n  display: 'swap',\n  fallback: ['\"Helvetica Neue\"', 'Helvetica', 'sans-serif'],\n});\n\nconst Rotonto = localFont({\n  variable: '--display',\n  src: './Rotonto/Rotonto-Regular.woff2',\n  display: 'auto',\n  fallback: ['\"Helvetica Neue\"', 'Helvetica', 'sans-serif'],\n});\n\nconst JetBrainsMono = localFont({\n  variable: '--mono',\n  src: './JetBrains/JetBrainsMono-Regular.woff2',\n  display: 'swap',\n  fallback: ['monaco', 'monospace'],\n});\n\nconst Knewave = localFont({\n  variable: '--font-knewave',\n  src: './Knewave/Knewave-Regular.woff2',\n  display: 'auto',\n  fallback: ['\"Helvetica Neue\"', 'Helvetica', 'sans-serif'],\n});\n\nconst fontVariableClassNames = [\n  Aeonik.variable,\n  Rotonto.variable,\n  JetBrainsMono.variable,\n  Knewave.variable,\n].join(' ');\n\nexport default fontVariableClassNames;\n"
  },
  {
    "path": "site/app/styles/globals.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  body *[id] {\n    @apply scroll-mt-4;\n  }\n}\n\n:not(:defined) {\n  visibility: hidden;\n}\n\ninput[type='range'] {\n  --color: currentcolor; /* active color */\n  --bg-color: #ababab; /* background color */\n  --length: 4px; /* line thickness */\n  --thumb-height: 14px; /* thumb height */\n  --thumb-width: 14px; /* thumb width */\n\n  width: 120px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background: none;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n/* chromium */\ninput[type='range' i]::-webkit-slider-thumb {\n  height: var(--thumb-height);\n  width: var(--thumb-width);\n  background: var(--color);\n  border: none;\n  border-image: linear-gradient(90deg, var(--color) 50%, var(--bg-color) 0) 0 1 /\n    calc(50% - var(--length) / 2) 100vw / 0 100vw;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 50%;\n}\n/* Firefox */\ninput[type='range']::-moz-range-thumb {\n  height: var(--thumb-height);\n  width: var(--thumb-width);\n  background: var(--color);\n  border: none;\n  border-image: linear-gradient(90deg, var(--color) 50%, var(--bg-color) 0) 0 1 /\n    calc(50% - var(--length) / 2) 100vw / 0 100vw;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 50%;\n}\n\ninput[type='color']::-webkit-color-swatch {\n  border-radius: 50%;\n  border: none;\n}\n\ninput[type='color']::-moz-color-swatch {\n  border-radius: 50%;\n  border: none;\n}\n\ninput[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n"
  },
  {
    "path": "site/app/themes/[slug]/page.tsx",
    "content": "import type { Metadata } from 'next';\nimport PlayerHero from '@/app/_components/PlayerHero';\nimport Grid from '@/app/_components/Grid';\nimport ButtonPicker from '@/app/_components/ButtonPicker';\nimport ButtonPickerOption from '@/app/_components/ButtonPickerOption';\nimport { getEntry } from '@/app/_utils/content';\nimport { findParam } from '@/app/_utils/utils';\nimport DocsInstall from '@/app/_components/DocsInstall';\nimport DocsEmbed from '@/app/_components/DocsEmbed';\nimport AuthorLink from '@/app/_components/AuthorLink';\nimport ThemeColorPopover from '@/app/_components/ThemeColorPopover';\nimport ColorPicker from '@/app/_components/ColorPicker';\nimport LinkWithUnderline from '@/app/_components/LinkWithUnderline';\n\ntype ThemePageProps = {\n  params: {\n    slug: string;\n  };\n  searchParams: Record<string, string | string[]>;\n};\n\nexport async function generateMetadata(props: ThemePageProps): Promise<Metadata> {\n  const entry = await getEntry('themes', props.params.slug);\n\n  let title = `${entry.title} theme`;\n  let description = entry.description;\n\n  const frameworkId = findParam(props.searchParams, 'framework');\n\n  if (frameworkId) {\n    const framework = await getEntry('frameworks', frameworkId);\n    if (framework) title = `${framework.title} ${title}`;\n  }\n\n  const playerId = findParam(props.searchParams, 'media');\n\n  if (playerId) {\n    const player = await getEntry('players', playerId);\n    if (player) title = `${title} for ${player.title}`;\n  }\n\n  return {\n    title: `player.style - ${title}`,\n    description,\n  };\n}\n\nexport default async function Page(props: ThemePageProps) {\n  const entry = await getEntry('themes', props.params.slug);\n\n  return (\n    <>\n      <div className=\"flex-1\">\n        <PlayerHero theme={entry} {...props} />\n        <Grid>\n          <h1 className=\"text-4xl font-bold mb-0.5\">{entry.title}</h1>\n          <p className=\"text-lg mb-0.5 md:mr-8\">{entry.description}</p>\n          <AuthorLink handle={entry.author} className=\"mb-1\" />\n\n          <hr className=\"border-putty mb-2\" />\n\n          <h3 className=\"text-2xl font-semibold mb-1\">Customize theme</h3>\n\n          <h4 className=\"text-lg font-medium mb-1\">\n            Pick theme colors <ThemeColorPopover />\n          </h4>\n\n          <div className=\"flex flex-col sm:flex-row gap-0.5 mb-2\">\n            <div className=\"flex items-center gap-0.25\">\n              <ColorPicker id=\"primary-color\" defaultValue=\"#ffffff\" />\n              <label htmlFor=\"primary-color\" className=\"uppercase text-sm font-mono\">\n                Primary\n              </label>\n            </div>\n            <div className=\"flex items-center gap-0.25\">\n              <ColorPicker id=\"secondary-color\" defaultValue=\"#ffffff\" />\n              <label htmlFor=\"secondary-color\" className=\"uppercase text-sm font-mono\">\n                Secondary\n              </label>\n            </div>\n            <div className=\"flex items-center gap-0.25\">\n              <ColorPicker id=\"accent-color\" defaultValue=\"#ffffff\" />\n              <label htmlFor=\"accent-color\" className=\"uppercase text-sm font-mono\">\n                Accent\n              </label>\n            </div>\n          </div>\n\n          <h3 className=\"text-2xl font-semibold mb-1\">Use theme</h3>\n\n          <h4 className=\"text-lg font-medium mb-0\">Pick your media type or player</h4>\n          <p className=\"mb-1\" style={{ color: '#777' }}>\n            Are we missing something?{' '}\n            <LinkWithUnderline href=\"https://github.com/muxinc/player.style/issues\" target=\"_blank\">\n              Tell us.\n            </LinkWithUnderline>\n          </p>\n\n          <ButtonPicker type=\"media\">\n            <ButtonPickerOption\n              selected\n              title=\"Video file\"\n              value=\"\"\n              className=\"hover:bg-yellow hover:border-yellow [&.active]:bg-yellow [&.active]:border-yellow\"\n            />\n            <ButtonPickerOption\n              title=\"Audio file\"\n              value=\"audio\"\n              className=\"hover:bg-yellow hover:border-yellow [&.active]:bg-yellow [&.active]:border-yellow\"\n            />\n            <ButtonPickerOption\n              title=\"HLS\"\n              value=\"hls\"\n              className=\"hover:bg-orange hover:border-orange [&.active]:bg-orange [&.active]:border-orange\"\n            />\n            <ButtonPickerOption\n              title=\"DASH\"\n              value=\"dash\"\n              className=\"hover:bg-blue hover:border-blue [&.active]:bg-blue [&.active]:border-blue\"\n            />\n            <ButtonPickerOption\n              title=\"Mux\"\n              value=\"mux\"\n              className=\"hover:bg-pink hover:border-pink [&.active]:bg-pink [&.active]:border-pink\"\n            />\n            <ButtonPickerOption\n              title=\"YouTube\"\n              value=\"youtube\"\n              className=\"hover:bg-red hover:border-red [&.active]:bg-red [&.active]:border-red\"\n            />\n            <ButtonPickerOption\n              title=\"Vimeo\"\n              value=\"vimeo\"\n              className=\"hover:bg-blue hover:border-blue-neon [&.active]:bg-blue [&.active]:border-blue-neon\"\n            />\n            <ButtonPickerOption\n              title=\"Wistia\"\n              value=\"wistia\"\n              className=\"hover:bg-blue hover:border-blue [&.active]:bg-blue [&.active]:border-blue\"\n            />\n            <ButtonPickerOption\n              title=\"Cloudflare\"\n              value=\"cloudflare\"\n              className=\"hover:bg-orange hover:border-orange-neon [&.active]:bg-orange [&.active]:border-orange-neon\"\n            />\n            <ButtonPickerOption\n              title=\"JW Player\"\n              value=\"jwplayer\"\n              className=\"hover:bg-red hover:border-red [&.active]:bg-red [&.active]:border-red\"\n            />\n            <ButtonPickerOption\n              title=\"Video.js\"\n              value=\"videojs\"\n              className=\"hover:bg-gray hover:border-gray [&.active]:bg-gray [&.active]:border-gray\"\n            />\n          </ButtonPicker>\n\n          <h4 className=\"text-lg font-medium mb-0\">Pick your app framework</h4>\n          <p className=\"mb-1\" style={{ color: '#777' }}>\n            Are we missing something?{' '}\n            <LinkWithUnderline href=\"https://github.com/muxinc/player.style/issues\" target=\"_blank\">\n              Tell us.\n            </LinkWithUnderline>\n          </p>\n\n          <ButtonPicker type=\"framework\">\n            <ButtonPickerOption\n              selected\n              title=\"HTML\"\n              value=\"\"\n              className=\"hover:bg-yellow hover:border-yellow [&.active]:bg-yellow [&.active]:border-yellow\"\n            />\n            <ButtonPickerOption\n              title=\"JS\"\n              value=\"js\"\n              className=\"hover:bg-yellow hover:border-yellow [&.active]:bg-yellow [&.active]:border-yellow\"\n            />\n            <ButtonPickerOption\n              title=\"React\"\n              value=\"react\"\n              className=\"hover:bg-blue hover:border-blue [&.active]:bg-blue [&.active]:border-blue\"\n            />\n            <ButtonPickerOption\n              title=\"Vue\"\n              value=\"vue\"\n              className=\"hover:bg-green hover:border-green [&.active]:bg-green [&.active]:border-green\"\n            />\n            <ButtonPickerOption\n              title=\"Lit\"\n              value=\"lit\"\n              className=\"hover:bg-blue hover:border-blue [&.active]:bg-blue [&.active]:border-blue\"\n            />\n            <ButtonPickerOption\n              title=\"Svelte\"\n              value=\"svelte\"\n              className=\"hover:bg-orange hover:border-orange [&.active]:bg-orange [&.active]:border-orange\"\n            />\n          </ButtonPicker>\n\n          <h4 className=\"text-lg font-medium mb-0\">Embed method</h4>\n          <p className=\"mb-1\" style={{ color: '#777' }}>\n            Choose <strong>Packaged</strong> for automatic minor version updates or <strong>Open</strong> to customize{' '}\n            <em>anything</em> using HTML/CSS and{' '}\n            <LinkWithUnderline href=\"https://www.media-chrome.org/docs/\" target=\"_blank\">\n              Media Chrome\n            </LinkWithUnderline>\n            .\n          </p>\n\n          <ButtonPicker type=\"embed\">\n            <ButtonPickerOption\n              selected\n              title=\"Packaged\"\n              value=\"\"\n              className=\"hover:bg-yellow hover:border-yellow [&.active]:bg-yellow [&.active]:border-yellow\"\n            />\n            <ButtonPickerOption\n              title=\"Open\"\n              value=\"template\"\n              className=\"hover:bg-yellow hover:border-yellow [&.active]:bg-yellow [&.active]:border-yellow\"\n            />\n          </ButtonPicker>\n\n          <DocsInstall searchParams={props.searchParams} />\n          <DocsEmbed searchParams={props.searchParams} theme={entry} name={props.params.slug} />\n        </Grid>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "site/content-collections.ts",
    "content": "import * as fs from 'fs/promises';\nimport { join } from 'path';\nimport { defineCollection, defineConfig } from '@content-collections/core';\n\ntype Template = {\n  file: string;\n  type: string;\n  content?: string;\n};\n\nconst themes = defineCollection({\n  name: 'themes',\n  directory: 'themes',\n  include: '**/*.md',\n  schema: (z) => ({\n    title: z.string(),\n    date: z.string(),\n    description: z.string(),\n    author: z.string(),\n    audio: z.optional(z.boolean()),\n    themeProps: z.optional(z.record(z.string(), z.any())),\n    defaultAsset: z.optional(z.string()),\n    tagGroups: z.optional(\n      z.object({\n        media: z.array(z.string()),\n        framework: z.array(z.string()),\n        features: z.array(z.string()),\n      })\n    ),\n  }),\n  transform: async (doc) => {\n    const slug = doc._meta.path;\n    const packagesDir = join(process.cwd(), '..', 'themes');\n    // const source = await fs.readFile(join(packagesDir, slug, 'package.json'), 'utf8');\n    // const json = JSON.parse(source);\n\n    const templates = { html: { file: 'dist/media-theme.html', type: 'html' } } as Record<string, Template>;\n\n    for (const [template, options] of Object.entries(templates)) {\n      const content = await fs.readFile(join(packagesDir, slug, options.file), 'utf8');\n      templates[template].content = content;\n    }\n\n    return {\n      templates,\n      ...doc,\n    };\n  },\n});\n\nconst features = defineCollection({\n  name: 'features',\n  directory: 'features',\n  include: '**/*.md',\n  schema: (z) => ({\n    title: z.string(),\n    description: z.string(),\n  }),\n});\n\nconst players = defineCollection({\n  name: 'players',\n  directory: 'players',\n  include: '**/*.md',\n  schema: (z) => ({\n    title: z.string(),\n    description: z.string(),\n    tagGroups: z.optional(\n      z.object({\n        media: z.optional(z.array(z.string())),\n        features: z.optional(z.array(z.string())),\n      })\n    ),\n  }),\n});\n\nconst frameworks = defineCollection({\n  name: 'frameworks',\n  directory: 'frameworks',\n  include: '**/*.md',\n  schema: (z) => ({\n    title: z.string(),\n    description: z.string(),\n  }),\n});\n\nexport default defineConfig({\n  collections: [themes, players, features, frameworks],\n});\n"
  },
  {
    "path": "site/features/airplay.md",
    "content": "---\ntitle: Airplay\ndescription: Airplay allows these themes to \"stream\" content — like video and audio — to Airplay-ready devices.\n---\n"
  },
  {
    "path": "site/features/audio-tracks.md",
    "content": "---\ntitle: Audio Tracks\ndescription: Audio tracks are a way to provide multiple audio options for a single video.\n---\n"
  },
  {
    "path": "site/features/google-cast.md",
    "content": "---\ntitle: Google Cast\ndescription: Google Cast allows these themes to \"stream\" content — like video and audio — to Cast-ready devices.\n---\n"
  },
  {
    "path": "site/features/timeline-chapters.md",
    "content": "---\ntitle: Timeline Chapters\ndescription: Timeline chapters allow you to organize your timeline into sections, making it easier for your users to navigate.\n---\n"
  },
  {
    "path": "site/features/timeline-thumbnails.md",
    "content": "---\ntitle: Timeline Thumbnails\ndescription: Timeline thumbnails allow you to display a preview image when hovering over the timeline.\n---\n"
  },
  {
    "path": "site/frameworks/html.md",
    "content": "---\ntitle: HTML\ndescription: HTML is the standard markup language for creating Web pages.\n---\n"
  },
  {
    "path": "site/frameworks/js.md",
    "content": "---\ntitle: JavaScript\ndescription: JavaScript is a programming language that is used to make web pages interactive.\n---\n"
  },
  {
    "path": "site/frameworks/lit.md",
    "content": "---\ntitle: Lit\ndescription: Lit is a simple and fast library for building web components.\n---\n"
  },
  {
    "path": "site/frameworks/react.md",
    "content": "---\ntitle: React\ndescription: React is a JavaScript library for building user interfaces.\n---\n"
  },
  {
    "path": "site/frameworks/svelte.md",
    "content": "---\ntitle: Svelte\ndescription: Svelte is a radical new approach to building user interfaces.\n---\n"
  },
  {
    "path": "site/frameworks/vue.md",
    "content": "---\ntitle: Vue\ndescription: Vue is a JavaScript framework for building user interfaces.\n---\n"
  },
  {
    "path": "site/media-assets.ts",
    "content": "const mediaAssets = {\n  landscape: {\n    playbackId: 'fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ',\n    src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',\n    poster: 'https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp?time=52',\n    thumbnails: 'https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/storyboard.vtt',\n    chapters: '/landscape-test-chapters.vtt',\n    aspectRatio: 16 / 9,\n    title: 'Landscape Promo',\n    byline: 'by Mux',\n    duration: 63.11\n  },\n  portrait: {\n    playbackId: '1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM',\n    src: 'https://stream.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM.m3u8',\n    poster: 'https://image.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM/thumbnail.webp',\n    thumbnails: 'https://image.mux.com/1EFcsL5JET00t00mBv01t00xt00T4QeNQtsXx2cKY6DLd7RM/storyboard.vtt',\n    chapters: null,\n    aspectRatio: 9 / 16,\n    title: 'Portrait Promo',\n    byline: 'by Mux',\n    duration: 20\n  }\n};\n\nexport default mediaAssets;\n"
  },
  {
    "path": "site/media-elements.ts",
    "content": "const mediaElements = {\n  video: {\n    tag: 'video',\n    src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/low.mp4',\n    package: undefined,\n  },\n  audio: {\n    tag: 'audio',\n    src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/low.mp4',\n    package: undefined,\n  },\n  hls: {\n    tag: 'hls-video',\n    src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',\n    package: {\n      default: 'hls-video-element',\n      react: 'hls-video-element/react',\n    },\n  },\n  dash: {\n    tag: 'dash-video',\n    src: 'https://player.vimeo.com/external/648359100.mpd?s=a4419a2e2113cc24a87aef2f93ef69a8e4c8fb0c',\n    package: {\n      default: 'dash-video-element',\n      react: 'dash-video-element/react',\n    },\n  },\n  mux: {\n    tag: 'mux-video',\n    src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',\n    playbackId: 'fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ',\n    package: {\n      default: '@mux/mux-video',\n      react: '@mux/mux-video-react',\n    },\n  },\n  youtube: {\n    tag: 'youtube-video',\n    src: 'https://www.youtube.com/watch?v=uxsOYVWclA0',\n    package: {\n      default: 'youtube-video-element',\n      react: 'youtube-video-element/react',\n    },\n  },\n  vimeo: {\n    tag: 'vimeo-video',\n    src: 'https://vimeo.com/648359100',\n    package: {\n      default: 'vimeo-video-element',\n      react: 'vimeo-video-element/react',\n    },\n  },\n  wistia: {\n    tag: 'wistia-video',\n    src: 'https://wesleyluyten.wistia.com/medias/oifkgmxnkb',\n    package: {\n      default: 'wistia-video-element',\n      react: 'wistia-video-element/react',\n    },\n  },\n  cloudflare: {\n    tag: 'cloudflare-video',\n    src: 'https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4',\n    package: {\n      default: 'cloudflare-video-element',\n      react: 'cloudflare-video-element/react',\n    },\n  },\n  jwplayer: {\n    tag: 'jwplayer-video',\n    src: 'https://cdn.jwplayer.com/players/C8YE48zj-IxzuqJ4M.html',\n    package: {\n      default: 'jwplayer-video-element',\n      react: 'jwplayer-video-element/react',\n    },\n  },\n  videojs: {\n    tag: 'videojs-video',\n    src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',\n    package: {\n      default: 'videojs-video-element',\n      react: 'videojs-video-element/react',\n    },\n  },\n} as const;\n\nexport default mediaElements;\n"
  },
  {
    "path": "site/next.config.mjs",
    "content": "import remarkGfm from 'remark-gfm';\nimport createMDX from '@next/mdx';\nimport { withContentCollections } from '@content-collections/next';\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  // Configure `pageExtensions`` to include MDX files\n  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],\n  // Optionally, add any other Next.js config below\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 'picsum.photos',\n      },\n    ],\n  },\n};\n\nconst withMDX = createMDX({\n  // Add markdown plugins here, as desired\n  options: {\n    remarkPlugins: [remarkGfm],\n    rehypePlugins: [],\n  },\n});\n\n// Wrap MDX and Next.js config with each other\nexport default withContentCollections(withMDX(nextConfig));\n"
  },
  {
    "path": "site/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"site\",\n  \"version\": \"1.11.15\",\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"@mdx-js/loader\": \"^3.1.0\",\n    \"@mdx-js/react\": \"^3.1.0\",\n    \"@mux/mux-video\": \"0.28.2\",\n    \"@mux/mux-video-react\": \"^0.28.2\",\n    \"@next/mdx\": \"^14.2.12\",\n    \"@radix-ui/react-popover\": \"^1.1.4\",\n    \"clsx\": \"^2.1.1\",\n    \"deepmerge\": \"^4.3.1\",\n    \"flexsearch\": \"^0.7.43\",\n    \"hls-video-element\": \"^1.5.10\",\n    \"media-chrome\": \"^4.19.0\",\n    \"next\": \"14.2.12\",\n    \"next-mdx-remote\": \"^5.0.0\",\n    \"player.style\": \"0.3.4\",\n    \"posthog-js\": \"^1.202.5\",\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\",\n    \"rehype-pretty-code\": \"^0.14.0\",\n    \"rehype-slug\": \"^6.0.0\",\n    \"remark-gfm\": \"^4.0.0\",\n    \"shiki\": \"^1.24.3\",\n    \"use-debounce\": \"^10.0.4\"\n  },\n  \"devDependencies\": {\n    \"@content-collections/core\": \"0.6.0\",\n    \"@content-collections/next\": \"0.2.0\",\n    \"@tailwindcss/container-queries\": \"^0.1.1\",\n    \"@types/mdx\": \"^2.0.13\",\n    \"@types/node\": \"^22\",\n    \"@types/react\": \"^18\",\n    \"@types/react-dom\": \"^18\",\n    \"eslint\": \"^8\",\n    \"eslint-config-next\": \"14.2.8\",\n    \"postcss\": \"^8\",\n    \"tailwindcss\": \"^3.4.17\",\n    \"typescript\": \"^5\"\n  }\n}\n"
  },
  {
    "path": "site/players/cloudflare.md",
    "content": "---\ntitle: Cloudflare\ndescription: This is the Cloudflare player.\n---\n"
  },
  {
    "path": "site/players/dash.md",
    "content": "---\ntitle: Dash.js\ndescription: This is the Dash.js player.\ntagGroups:\n  features:\n    - timeline-chapters\n    - timeline-thumbnails\n---\n"
  },
  {
    "path": "site/players/hls.md",
    "content": "---\ntitle: Hls.js\ndescription: This is the Hls.js player.\ntagGroups:\n  features:\n    - audio-tracks\n    - timeline-chapters\n    - timeline-thumbnails\n---\n"
  },
  {
    "path": "site/players/jwplayer.md",
    "content": "---\ntitle: JW Player\ndescription: This is the JW player.\n---\n"
  },
  {
    "path": "site/players/mux.md",
    "content": "---\ntitle: Mux Video\ndescription: Mux Video is a Mux-flavored HTML5 video element.\ntagGroups:\n  features:\n    - audio-tracks\n    - timeline-chapters\n    - timeline-thumbnails\n---\n"
  },
  {
    "path": "site/players/vimeo.md",
    "content": "---\ntitle: Vimeo\ndescription: This is the Vimeo player.\n---\n"
  },
  {
    "path": "site/players/wistia.md",
    "content": "---\ntitle: Wistia\ndescription: This is the Wistia player.\n---\n"
  },
  {
    "path": "site/players/youtube.md",
    "content": "---\ntitle: YouTube\ndescription: This is the YouTube player.\n---\n"
  },
  {
    "path": "site/postcss.config.mjs",
    "content": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n  plugins: {\n    tailwindcss: {},\n  },\n};\n\nexport default config;\n"
  },
  {
    "path": "site/public/landscape-test-chapters.vtt",
    "content": "WEBVTT\r\n\r\n1\r\n00:00:00.000 --> 00:00:16.000\r\nIntro\r\n\r\n2\r\n00:00:16.000 --> 00:00:18.000\r\nLoading...\r\n\r\n3\r\n00:00:18.000 --> 00:00:36.000\r\nStock footage\r\n\r\n4\r\n00:00:36.000 --> 00:00:39.000\r\nPalm tree\r\n\r\n5\r\n00:00:39.000 --> 00:00:59.000\r\nMore stock footage\r\n\r\n6\r\n00:00:59.000 --> 00:01:03.110\r\nOutro\r\n"
  },
  {
    "path": "site/tailwind.config.js",
    "content": "/**\n * in this design system, the border of an element\n * should correspond to the background-color of its parent.\n * For example, if we have a orange-colored grid area containing blue cards,\n * the border of the cards will be orange, not blue.\n * And if we have a green-colored card containing pink buttons (ew),\n * the border of the buttons will be green, not pink.\n *\n * As long as we're at it, we add some utilities that allow us to set the background color of elements\n * to the background color of their parenting grid/card using the same system\n */\nimport flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';\nimport plugin from 'tailwindcss/plugin';\nimport containerQueries from '@tailwindcss/container-queries';\n\nconst context = plugin(({ matchUtilities, addUtilities, theme }) => {\n  matchUtilities(\n    {\n      'set-border-ctx': (value) => ({ '--mux-border-ctx': value }),\n      'set-bg-ctx': (value) => ({ '--mux-bg-ctx': value }),\n      /* elements using this class will inherit border color from the nearest card or grid as fallback */\n      'border-ctx': (value) => ({\n        'border-color': `var(--mux-border-ctx, ${value})`,\n      }),\n      /* similarly for backgrounds... */\n      'bg-ctx': (value) => ({\n        'background-color': `var(--mux-bg-ctx, ${value})`,\n      }),\n      /* and for and stroke fill (which uses the background context) */\n      'fill-ctx': (value) => ({\n        fill: `var(--mux-bg-ctx, ${value})`,\n      }),\n      'stroke-ctx': (value) => ({\n        stroke: `var(--mux-bg-ctx, ${value})`,\n      }),\n    },\n    {\n      values: flattenColorPalette(theme('colors')),\n      type: ['color', 'any'],\n    }\n  );\n  addUtilities({\n    /* for cases where you want to inherit colors without providing a fallback value... */\n    '.border-ctx': { 'border-color': `var(--mux-border-ctx)` },\n    '.bg-ctx': { 'background-color': `var(--mux-bg-ctx)` },\n    '.fill-ctx': { fill: `var(--mux-bg-ctx)` },\n    '.stroke-ctx': { stroke: `var(--mux-bg-ctx)` },\n    /* and for the odd case where you want the text color to match the border ctx */\n    '.text-border-ctx': { color: `var(--mux-border-ctx)` },\n  });\n});\n\n/**\n * And now for a simple one. Kerning/Ligature fix.\n * By default, browsers disable kerning and ligatures on spaced out fonts.\n * Usually, this is a good thing. Imagine a ligature that joined ff together.\n * What would happen if the word \"taffy\" was spaced out?  t  a   ff   y. That's bad.\n * But in our case, .tracking-wide is mild,\n * and in our body font, our kerning and ligs still look good. Therefore...\n */\nconst ligatures = plugin(({ addBase }) => {\n  addBase({\n    '.font-body.tracking-wide': {\n      'font-feature-settings': \"'kern', 'dlig'\",\n    },\n  });\n});\n\n/** One more simple one. I want scroll bars to be dark in dark mode */\nconst darkColorScheme = plugin(({ addBase }) => {\n  addBase({\n    '.dark': {\n      'color-scheme': 'dark',\n    },\n  });\n});\n\n/** And another one. I want nested numbered lists to be alphabetic */\nconst nestedDecimalLists = plugin(({ addBase }) => {\n  addBase({\n    '.list-decimal .list-decimal': {\n      'list-style-type': 'lower-alpha',\n    },\n  });\n});\n\n/** And another one. our build grids come with some other background implications */\nconst buildGrids = plugin(({ addUtilities }) => {\n  addUtilities({\n    '.bg-build-black': {\n      'background-size': '56px 56px',\n      'background-position': 'center 0',\n    },\n    '.bg-build-charcoal': {\n      'background-size': '56px 56px',\n      'background-position': 'center 0',\n    },\n    '.bg-build-gray': {\n      'background-size': '56px 56px',\n      'background-position': 'center 0',\n    },\n    '.bg-build-putty': {\n      'background-size': '56px 56px',\n      'background-position': 'center 0',\n    },\n    '.bg-build-white': {\n      'background-size': '56px 56px',\n      'background-position': 'center 0',\n    },\n  });\n});\n\nconst spacing = {\n  '1/8': '12.5%',\n  '1/6': 'calc(100%/6)',\n  0: '0',\n  '0.5px': '0.5px',\n  '1px': '1px',\n  '1.5px': '1.5px',\n  '2px': '2px',\n  '3px': '3px',\n  0.125: '0.21875rem', // 3.5px\n  0.25: '0.4375rem', // 7px\n  0.5: '0.875rem', // 14px\n  0.75: '1.3125rem', // 21px\n  1: '1.75rem', // 28px\n  1.25: '2.125rem', // 34px\n  1.5: '2.625rem', // 42px\n  2: '3.5rem', // 56px\n  2.5: '4.375rem', // 70px\n  3: '5.25rem', // 84px\n  3.5: '6.125rem', // 98px\n  4: '7rem', // 112px\n  4.5: '8.25rem', // 132px\n  5: '8.75rem', // 140px\n  6: '10.5rem', // 168px\n  7: '12.25rem', // 196px\n  8: '14rem', // 224px\n  9: '15.75rem', // 252px\n  10: '17.5rem', // 280px\n  11: '19.25rem', // 308px\n  12: '21rem', // 336px\n  13: '22.75rem', // 364px\n  14: '24.5rem', // 392px\n  15: '26.25rem', // 420px\n  16: '28rem', // 448px\n  17: '29.75rem', // 476px\n  18: '31.5rem', // 504px\n  20: '35rem', // 560px\n  21: '36.75rem', // 588px\n  22: '38.5rem', // 616px\n  24: '42rem', // 672px\n  26: '45.5rem', // 728px\n  28: '49rem', // 784px\n  32: '56rem', // 896px\n  36: '63rem', // 1008px\n  39: '68.25rem', // 1092px\n  48: '80rem', // 1280px\n};\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n  safelist: [\n    '@[480px]:h-[98px]',                // Sutro audio\n    '@[0px]:h-[88px]', '@md:h-[64px]',  // Tailwind audio\n    '@[0px]:h-[264px]'                  // Winamp\n  ],\n  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],\n  darkMode: 'class',\n  plugins: [context, ligatures, darkColorScheme, nestedDecimalLists, buildGrids, containerQueries],\n  theme: {\n    extend: {\n      gridTemplateColumns: ({ theme }) => ({\n        // on xs, 1/2 column of padding on either side of our content\n        xs: `${theme('spacing[0.5]')} minmax(0, 1fr) ${theme('spacing[0.5]')}`,\n        'build-2': `repeat(auto-fill, minmax(0,${theme('spacing.2')}))`, // we use spacing-2 to avoid getting misaligned with the background by half a block\n        // on sm, 1 column of padding alongside 16+ columns of content\n        sm: `${theme('spacing.1')} minmax(0, 1fr) ${theme('spacing.1')}`,\n        // on md, 1 columns of padding alongside 26+ columns of content\n        // since it's still 1 cols of spacing, we don't write a special class.\n        // on lg, 2 columns of padding alongside 36+ columns of content\n        lg: `${theme('spacing.2')} minmax(0, 1fr) ${theme('spacing.2')}`,\n        // on xl, 2+ columns of padding, 48 columns of content\n        xl: `1fr min(${theme('spacing.48')},100% - ${theme('spacing.4')}) 1fr`,\n      }),\n      gridAutoRows: {\n        build: '28px',\n      },\n      content: {\n        empty: \"''\",\n      },\n      minHeight: spacing,\n      width: (theme) => ({\n        'full-1px': 'calc(100% + 1px)',\n        'full-2px': 'calc(100% + 2px)',\n        'full-1': `calc(100% + ${theme('spacing.1')})`,\n      }),\n      height: (theme) => ({\n        'full-1px': 'calc(100% + 1px)',\n        'full-2px': 'calc(100% + 2px)',\n        'full-1': `calc(100% + ${theme('spacing.1')})`,\n      }),\n      transformOrigin: {\n        'left-center': 'left center',\n        'right-center': 'right center',\n      },\n      keyframes: ({ theme }) => ({\n        'perspective-spin': {\n          '0%': { transform: 'translateZ(calc(var(--mux-logo-perspective) / -4)) rotateY(0deg)' },\n          '100%': { transform: 'translateZ(calc(var(--mux-logo-perspective) / -4)) rotateX(90deg)' },\n        },\n        // todo: replace these animations with --animate-height\n        'radix-collapsible-content-down': {\n          '0%': { height: 0 },\n          '100%': { height: 'var(--radix-collapsible-content-height)' },\n        },\n        'radix-collapsible-content-up': {\n          '0%': { height: 'var(--radix-collapsible-content-height)' },\n          '100%': { height: 0 },\n        },\n        'radix-accordion-content-down': {\n          '0%': { height: 0 },\n          '100%': { height: 'var(--radix-accordion-content-height)' },\n        },\n        'radix-accordion-content-up': {\n          '0%': { height: 'var(--radix-accordion-content-height)' },\n          '100%': { height: 0 },\n        },\n        'from-right': {\n          '0%': { transform: `translate3d(calc(100% + ${theme('spacing.1')}), 0, 0)` },\n          '100%': { transform: 'translate3d(0, 0, 0)' },\n        },\n        'to-right': {\n          '0%': { transform: 'translate3d(0, 0, 0)' },\n          '100%': { transform: `translate3d(calc(100% + ${theme('spacing.1')}), 0, 0)` },\n        },\n        'from-top': {\n          '0%': { transform: 'translate3d(0, -100%, 0)' },\n          '100%': { transform: 'translate3d(0, 0, 0)' },\n        },\n        'to-top': {\n          '0%': { transform: 'translate3d(0, 0, 0)' },\n          '100%': { transform: 'translate3d(0, -100%, 0)' },\n        },\n        'from-bottom': {\n          '0%': { transform: 'translate3d(0, 100%, 0)' },\n          '100%': { transform: 'translate3d(0, 0, 0)' },\n        },\n        'from-bottom-0.5': {\n          '0%': { transform: `translateY(${theme('spacing[0.5]')})` },\n          '100%': { transform: 'translateY(0)' },\n        },\n        'to-bottom': {\n          '0%': { transform: 'translate3d(0, 0, 0)' },\n          '100%': { transform: 'translate3d(0, 100%, 0)' },\n        },\n        appear: {\n          '0%': { opacity: 0 },\n          '100%': { opacity: 1 },\n        },\n        disappear: {\n          '0%': { opacity: 0 },\n          '100%': { opacity: 1 },\n        },\n        rotate: {\n          '0%': { transform: 'rotate(0deg)' },\n          '100%': { transform: 'rotate(360deg)' },\n        },\n        'scale-in': {\n          '0%': { transform: 'scale(0.75)' },\n          '100%': { transform: 'scale(1.01)' },\n        },\n        'scale-out': {\n          '0%': { transform: 'scale(1.01)' },\n          '100%': { transform: 'scale(1.2)' },\n        },\n        'clip-in': {\n          '0%': { clipPath: 'inset(0 0 100% 0)' },\n          '100%': { clipPath: 'inset(0 0 0 0)' },\n        },\n        'clip-out': {\n          '0%': { clipPath: 'inset(0 0 0 0)' },\n          '100%': { clipPath: 'inset(0 0 100% 0)' },\n        },\n        'fly-in': {\n          '0%': { transform: 'translateY(100%)', opacity: 0 },\n          '100%': { transform: 'translateY(0)', opacity: 1 },\n        },\n        'fly-in-0.125': {\n          '0%': { transform: `translate3d(0, ${theme('spacing[0.125]')}, 0)`, opacity: 0 },\n          '100%': { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n        },\n        'fly-out': {\n          '0%': { transform: 'translateY(0)', opacity: 1 },\n          '100%': { transform: 'translateY(-100%)', opacity: 0 },\n        },\n        'fly-out-0.125': {\n          '0%': { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n          '100%': { transform: `translate3d(0, ${theme('spacing[0.125]')}, 0)`, opacity: 0 },\n        },\n        'height-down': {\n          '0%': { height: 0 },\n          '100%': { height: 'var(--animate-height)' },\n        },\n        'height-up': {\n          '0%': { height: 'var(--animate-height)' },\n          '100%': { height: 0 },\n        },\n        blink: {\n          '0%': { opacity: 0 },\n          '50%': { opacity: 1 },\n          '100%': { opacity: 0 },\n        },\n        'lava-lamp': {\n          '0%': { backgroundColor: theme('colors.gray.dark') },\n          '45%': { backgroundColor: theme('colors.gray.dark') },\n          '60%': { backgroundColor: theme('colors.yellow.DEFAULT') },\n          '75%': { backgroundColor: theme('colors.gray.dark') },\n          '100%': { backgroundColor: theme('colors.gray.dark') },\n        },\n        'lava-lamp-light': {\n          '0%': { backgroundColor: `var(--mux-lava-lamp-base, ${theme('colors.blue.DEFAULT')})` },\n          '19%': { backgroundColor: `var(--mux-lava-lamp-base, ${theme('colors.blue.DEFAULT')})` },\n          '34%': { backgroundColor: `var(--mux-lava-lamp-accent, ${theme('colors.pink.DEFAULT')})` },\n          '52%': { backgroundColor: `var(--mux-lava-lamp-accent, ${theme('colors.pink.DEFAULT')})` },\n          '67%': { backgroundColor: `var(--mux-lava-lamp-accent, ${theme('colors.purple.DEFAULT')})` },\n          '85%': { backgroundColor: `var(--mux-lava-lamp-accent, ${theme('colors.purple.DEFAULT')})` },\n          '100%': { backgroundColor: `var(--mux-lava-lamp-base, ${theme('colors.blue.DEFAULT')})` },\n        },\n      }),\n      animation: ({ theme }) => ({\n        'perspective-spin': `perspective-spin 0.5s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'radix-collapsible-content-down': `radix-collapsible-content-down 0.2s ${theme(\n          'transitionTimingFunction.in-out-energetic'\n        )}`,\n        'radix-collapsible-content-up': `radix-collapsible-content-up 0.2s ${theme(\n          'transitionTimingFunction.in-out-energetic'\n        )}`,\n        'radix-accordion-content-down': `radix-accordion-content-down 0.2s ${theme(\n          'transitionTimingFunction.in-out-energetic'\n        )}`,\n        'radix-accordion-content-up': `radix-accordion-content-up 0.2s ${theme(\n          'transitionTimingFunction.in-out-energetic'\n        )}`,\n        'from-right': `from-right 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'to-right': `to-right 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'from-top': `from-top 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'to-top': `to-top 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'from-bottom': `from-bottom 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'from-bottom-0.5': `from-bottom-0.5 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'to-bottom': `to-bottom 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        appear: `appear 0.2s step-end`,\n        'fade-in': `appear 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        disappear: `disappear 0.2s step-end`,\n        'fade-out': `disappear 0.2s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'scale-in': `scale-in 0.5s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'scale-in-ease-out': `scale-in 0.15s ${theme('transitionTimingFunction.out-energetic')}`,\n        'scale-out': `scale-out 0.5s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'clip-in': `clip-in 0.3s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'clip-out': `clip-out 0.3s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'fly-in': `fly-in 0.3s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'fly-in-0.125': `fly-in-0.125 0.125s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'fly-out': `fly-out 0.3s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        'fly-out-0.125': `fly-out-0.125 0.125s ${theme('transitionTimingFunction.in-out-energetic')}`,\n        blink: `blink 1s steps(1, end) infinite`,\n        'lava-lamp': `lava-lamp 15s ease infinite`,\n        'lava-lamp-light': `lava-lamp-light 15s ease infinite`,\n      }),\n      backgroundImage: {\n        'build-black':\n          'url(\"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTYgNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgNTZWME0yOCA1NlYwTTU2IDU2VjBNNTYgMjhIME01NiAyOEgwTTU2IDBIME01NiA1NkgwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIC8+PC9zdmc+\")',\n        'build-charcoal':\n          'url(\"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTYgNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgNTZWME0yOCA1NlYwTTU2IDU2VjBNNTYgMjhIME01NiAyOEgwTTU2IDBIME01NiA1NkgwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyNDI2MjgiIC8+PC9zdmc+\")',\n        'build-gray':\n          'url(\"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTYgNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgNTZWME0yOCA1NlYwTTU2IDU2VjBNNTYgMjhIME01NiAyOEgwTTU2IDBIME01NiA1NkgwIiBmaWxsPSJub25lIiBzdHJva2U9IiM4MjhDOTciIC8+PC9zdmc+\")',\n        'build-putty':\n          'url(\"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTYgNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAgNTZWME0yOCA1NlYwTTU2IDU2VjBNNTYgMjhIME01NiAyOEgwTTU2IDBIME01NiA1NkgwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMmU0ZGQiIC8+Cjwvc3ZnPg==\")',\n        'build-white':\n          'url(\"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTYgNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAgNTZWME0yOCA1NlYwTTU2IDU2VjBNNTYgMjhIME01NiAyOEgwTTU2IDBIME01NiA1NkgwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIC8+Cjwvc3ZnPg==\")',\n        'check-dark': `url(\"data:image/svg+xml;base64,PCEtLSBlbmNvZGUgd2l0aCBodHRwczovL2Jhc2U2NC5ndXJ1L2NvbnZlcnRlci9lbmNvZGUvaW1hZ2Uvc3ZnIGFuZCBhZGQgdG8gdGFpbHdpbmQuY29uZmlnIC0tPgo8c3ZnIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxMy41IiBmaWxsPSIjRjRGNkY0IiBzdHJva2U9IiMwMDAiIC8+CiAgPHBhdGggZD0iTTIxIDlMMTEgMTlsLTQtNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiAvPgo8L3N2Zz4=\")`,\n        'check-light': `url(\"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIxIDlMMTEgMTlsLTQtNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiAvPgogIDxjaXJjbGUgY3g9IjE0IiBjeT0iMTQiIHI9IjEzLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgLz4KPC9zdmc+\")`,\n      },\n      supports: {\n        dvh: 'height: 100dvh',\n        clamp: 'font-size: clamp(100px, 1vw, 200px)',\n      },\n      zIndex: {\n        60: '60',\n      },\n    },\n    fontFamily: {\n      display: ['var(--display)'],\n      body: ['var(--body)'],\n      mono: ['var(--mono)'],\n    },\n    lineHeight: {\n      heading: '1.15',\n      'heading-2': '1.2',\n      'heading-4': '1.4',\n      mono: '1.2',\n      code: '1.6',\n      normal: '1.5',\n      1: '1.75rem',\n    },\n    letterSpacing: {\n      normal: '0em',\n      wide: '0.02em',\n    },\n    fontSize: {\n      // todo: how cool would it be to use vw here? It'll just take some thinking on how to provide fallbacks\n      '6xl': '4.125rem', // 66px\n      '5xl': '3.125rem', // 50px\n      '4xl': '2.25rem', // 36px\n      '3xl': '2rem', // 32px\n      '2xl': '1.75rem', // 28px\n      xl: '1.5rem', // 24px\n      lg: '1.3125rem', // 21px\n      md: '1.125rem', // 18px\n      base: '1rem', // 16px\n      sm: '0.875rem', // 14px\n      xs: '0.75rem', // 12px\n    },\n    transitionTimingFunction: {\n      'in-out-energetic': 'cubic-bezier(.7,0,.3,1)',\n      'out-energetic': 'cubic-bezier(.2,.3,.65,1)',\n    },\n    transitionDuration: {\n      short: '0.12s',\n      medium: '0.2s',\n      long: '0.24s',\n      'even-longer': '0.3s',\n    },\n    screens: {\n      // only use px here.\n      // if you update screens, you may have to update\n      // -> mux.com/app/_components/NextImage\n      xs: '0px',\n      sm: '504px', // 1/16/1 (18)\n      md: '784px', // 1/26/1 (28)\n      lg: '1176px', // 2/38/2 (42)\n      xl: '1456px', // 2/48/2 (52)\n    },\n    colors: {\n      transparent: 'transparent',\n      current: 'currentColor',\n      putty: {\n        light: '#F4F6F4',\n        DEFAULT: '#e2e4dd',\n        dark: '#E2E4DD',\n        deep: '#d0d2c8',\n      },\n      white: '#ffffff',\n      gray: {\n        DEFAULT: '#828C97',\n        underline: '#707A85',\n        dark: '#565e67',\n        'text-dark': '#adb9c6',\n      },\n      charcoal: '#242628',\n      black: '#000000',\n      orange: {\n        neon: '#ff8e0a',\n        DEFAULT: '#ff6100',\n        dark: '#ba4300',\n      },\n      pink: {\n        neon: '#fb68ec',\n        DEFAULT: '#fa50b5',\n        dark: '#b14886',\n      },\n      red: {\n        neon: '#ff5c38',\n        DEFAULT: '#ea3737',\n        dark: '#ba1704',\n      },\n      yellow: {\n        neon: '#ffdb08',\n        DEFAULT: '#ffb200',\n        dark: '#bd8209',\n      },\n      green: {\n        neon: '#1be349',\n        DEFAULT: '#00BE43',\n        dark: '#00802d',\n      },\n      blue: {\n        neon: '#16a6ff',\n        DEFAULT: '#0482FF',\n        dark: '#004e9b',\n        core: '#0067DF'\n      },\n      purple: {\n        neon: '#cb75ff',\n        DEFAULT: '#ac39f2',\n        dark: '#7c32ab',\n      },\n    },\n    borderRadius: {\n      none: '0',\n      0.25: '0.4375rem', // 7px\n      0.5: '0.875rem', // 14px\n      1: '1.75rem', // 28px\n      1.5: '2.625rem', // 42px\n      2: '3.5rem', // 56px\n      4: '7rem', // 112px\n    },\n    spacing,\n    textUnderlineOffset: {\n      mono: '0.125em', // leading 1.2\n      heading: '0.22em', // leading 1.15\n      'heading-2': '0.23em', // leading 1.2\n      'heading-4': '0.28em', // leading 1.4\n      normal: '0.3em', // leading 1.5\n      code: '0.125em', // leading 1.6\n    },\n    textDecorationThickness: {\n      link: 'max(0.05em,0.05rem)',\n    },\n    minWidth: {\n      none: 'none',\n      ...spacing,\n    },\n    maxWidth: {\n      none: 'none',\n      full: '100%',\n      ...spacing,\n    },\n  },\n};\n"
  },
  {
    "path": "site/themes/demuxed-2022.md",
    "content": "---\ntitle: Demuxed 2022\nauthor: '@maveio'\ndate: '2022'\ndescription: A media player theme created for Demuxed 2022.\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n    - airplay\n    - google cast\n---\n"
  },
  {
    "path": "site/themes/halloween.md",
    "content": "---\ntitle: Halloween\nauthor: '@muxinc'\ndate: 2024-10\ndescription: Bring the spooky season to your video player with this Halloween theme.\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n---\n"
  },
  {
    "path": "site/themes/instaplay.md",
    "content": "---\ntitle: Instaplay\nauthor: '@muxinc'\ndate: 2024-07\ndescription: Instaplay is a mobile-first theme inspired by playback experiences you can find in popular social media apps.\ndefaultAsset: portrait\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n---\n"
  },
  {
    "path": "site/themes/microvideo.md",
    "content": "---\ntitle: Microvideo\nauthor: '@muxinc'\ndate: '2022'\ndescription: This theme optimizes for shorter content that doesn't need the robust playback controls that longer content typically requires.\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n    - airplay\n    - google cast\n---\n"
  },
  {
    "path": "site/themes/minimal.md",
    "content": "---\ntitle: Minimal\nauthor: '@muxinc'\ndate: '2022'\ndescription: This theme pares down the Mux Player experience to the bare bones controls viewers need, ideal for those that want a simpler player experience.\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n    - airplay\n    - google cast\n---\n"
  },
  {
    "path": "site/themes/notflix.md",
    "content": "---\ntitle: Notflix\nauthor: '@heff'\ndate: '2024'\ndescription: Everything but the big red N and long bus rides to Los Gatos.\ntagGroups:\n  media:\n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n---\n"
  },
  {
    "path": "site/themes/reelplay.md",
    "content": "---\ntitle: Reelplay\nauthor: '@davekiss'\ndate: '2024'\ndescription: Reelplay is a nostalgic media player inspired by media players of a bygone era\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features: []\n---\n"
  },
  {
    "path": "site/themes/sutro-audio.md",
    "content": "---\ntitle: Sutro Audio\nauthor: '@muxinc'\ndate: 2024-07\ndescription: A sleek and modern theme lovingly named after our favorite SF TV antenna, which is neither sleek nor modern.\naudio: true\nthemeProps:\n  className: '@[480px]:h-[98px]'\ntagGroups:\n  media: \n    - Audio\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features: []\n---\n"
  },
  {
    "path": "site/themes/sutro.md",
    "content": "---\ntitle: Sutro\nauthor: '@muxinc'\ndate: 2025-01\ndescription: A sleek and modern theme lovingly named after our favorite SF TV antenna, which is neither sleek nor modern.\ntagGroups:\n  media:\n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n  features:\n    - timeline thumbnails\n    - airplay\n    - google cast\n    - chapters\n    - tooltips\n---\n"
  },
  {
    "path": "site/themes/tailwind-audio.md",
    "content": "---\ntitle: Tailwind Audio\nauthor: '@luwes'\ndate: '2023'\ndescription: A slick, minimal audio player theme made with Tailwind CSS.\naudio: true\nthemeProps:\n  className: '@[0px]:h-[88px] @md:h-[64px]'\ntagGroups:\n  media: \n    - Audio\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features: []\n---\n"
  },
  {
    "path": "site/themes/vimeonova.md",
    "content": "---\ntitle: Vimeonova\nauthor: '@luwes'\ndate: '2024'\ndescription: A fresh take on the classic Vimeo player design.\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - timeline thumbnails\n    - airplay\n    - google cast\n---\n"
  },
  {
    "path": "site/themes/winamp.md",
    "content": "---\ntitle: Winamp\nauthor: '@maveio'\ndate: '2022'\ndescription: A retro theme inspired by the classic Winamp media player\naudio: true\nthemeProps:\n  className: '@[0px]:h-[264px]'\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features: []\n---\n"
  },
  {
    "path": "site/themes/x-mas.md",
    "content": "---\ntitle: X-mas\nauthor: '@qualabs'\ndate: 2024-12\ndescription: A festive Christmas theme for the player with cozy red and green tones, twinkling lights, and a warm holiday vibe—perfect for spreading seasonal cheer!\ntagGroups:\n  media:\n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n    - Svelte\n  features:\n    - google cast\n    - airplay\n---\n"
  },
  {
    "path": "site/themes/yt.md",
    "content": "---\ntitle: YT\nauthor: '@heff'\ndate: '2024'\ndescription: An homage to the modern, ubiquitous YouTube player. Recreated with web components, or at least as close as we could get.\ntagGroups:\n  media: \n    - Video\n  framework:\n    - HTML\n    - React\n    - Next.js\n    - Vue\n  features:\n    - timeline thumbnails\n    - chapters\n---\n"
  },
  {
    "path": "site/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"target\": \"esnext\",\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./*\"],\n      \"content-collections\": [\"./.content-collections/generated\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "themes/demuxed-2022/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.1.1...@player.style/demuxed-2022@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.1.0...@player.style/demuxed-2022@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.12...@player.style/demuxed-2022@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.12](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.11...@player.style/demuxed-2022@0.0.12) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.10...@player.style/demuxed-2022@0.0.11) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.9...@player.style/demuxed-2022@0.0.10) (2024-10-08)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.8...@player.style/demuxed-2022@0.0.9) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.7...@player.style/demuxed-2022@0.0.8) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.0.6...@player.style/demuxed-2022@0.0.7) (2024-08-15)\n\n\n### Bug Fixes\n\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022-v0.0.5...@player.style/demuxed-2022@0.0.6) (2024-06-21)\n\n\n### Features\n\n* add Demuxed 2022 theme ([#20](https://github.com/muxinc/player.style/issues/20)) ([f61ba1c](https://github.com/muxinc/player.style/commit/f61ba1cb1dc39e1f2f3d503c1fb4b26aa25f0759))\n"
  },
  {
    "path": "themes/demuxed-2022/package.json",
    "content": "{\n  \"name\": \"@player.style/demuxed-2022\",\n  \"version\": \"0.1.2\",\n  \"description\": \"A media player theme created for Demuxed 2022\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/demuxed-2022\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/demuxed-2022/template.html",
    "content": "<style>\n  :host {\n    --media-primary-color: black;\n    --media-tertiary-color: var(--media-accent-color, #7596CC);\n    --media-text-color: white;\n    --media-control-hover-background: transparent;\n\n    --media-range-track-height: 6px;\n    --media-range-bar-color: white;\n    --media-range-track-background: rgba(0,0,0,0.4);\n    --media-range-track-border-radius: 9999px;\n\n    --media-range-thumb-background: var(--media-tertiary-color);\n    --media-range-thumb-width: 14px;\n    --media-range-thumb-height: 14px;\n    --media-tooltip-display: none;\n  }\n\n  :host([mediastreamtype=\"live\"]) media-time-range,\n  :host([mediastreamtype=\"live\"]) media-time-display {\n    opacity: 0;\n  }\n\n  media-control-bar {\n    position: relative;\n    margin: 30px;\n    padding: 10px 14px;\n    border-radius: 9999px;\n    background: rgba(0,0,0,0.2);\n    align-items: center;\n  }\n\n  media-control-bar :first-child {\n    margin: 0 5px 0 0;\n  }\n\n  media-control-bar :last-child {\n    margin: 0 0 0 5px;\n  }\n\n  .small-button {\n    position: relative;\n    flex: none;\n    margin: 0 5px;\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    height: 32px;\n    width: 32px;\n    background: var(--media-secondary-color, white);\n    border-radius: 9999px;\n  }\n\n  .small-button svg {\n    position: absolute;\n    overflow: hidden;\n    width: 100%;\n    height: 20px;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  .small-button:hover {\n    box-shadow: 0 0 0 calc(2px) var(--media-tertiary-color);\n  }\n\n  div[slot=\"centered-chrome\"] media-play-button {\n    position: relative;\n    flex: none;\n    display: flex;\n    margin-bottom: 10px;\n    align-items: center;\n    justify-items: center;\n    height: 96px;\n    width: 96px;\n    background: rgb(0 0 0 / 0.8);\n    border-radius: 9999px;\n  }\n\n  div[slot=\"centered-chrome\"] media-play-button:hover {\n    box-shadow: 0 0 0 calc(2px) var(--media-tertiary-color);\n  }\n\n  div[slot=\"centered-chrome\"] media-play-button svg {\n    fill: #fff;\n    height: 64px;\n  }\n\n  media-time-range {\n    --media-secondary-color: transparent;\n    height: 32px;\n    margin: 0 8px 0 0;\n  }\n\n  media-volume-range {\n    height: 100%;\n  }\n\n  media-time-display {\n    --media-secondary-color: transparent;\n    min-width: 92px;\n    padding: 0 6px 3px 8px;\n  }\n\n  media-time-display, media-preview-time-display {\n    font-size: 14px;\n    font-family: sofia-pro, sans-serif;\n  }\n\n  .demuxed-gradient-bottom {\n    padding-top: 37px;\n    position: absolute;\n    width: 100%;\n    height: 200px;\n    bottom: 0;\n    pointer-events: none;\n    background-position: bottom;\n    background-repeat: repeat-x;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==\");\n  }\n\n  div[slot=\"top-chrome\"] {\n    width: calc(100% - 36px);\n    display: flex;\n    flex-direction: row-reverse;\n    padding-right: 36px;\n  }\n\n  div[slot=\"top-chrome\"] .small-button {\n    margin: 32px 8px;\n  }\n\n  media-controller[breakpointsm] .media-volume-wrapper {\n    position: relative;\n    padding-left: 6px;\n  }\n\n  .media-volume-range-wrapper {\n    width: 122px;\n    height: 34px;\n    overflow: hidden;\n    opacity: 0;\n    transform: rotate(-90deg);\n    position: absolute;\n    top: -75px;\n    left: -52px;\n    border-left: 16px solid transparent;\n  }\n\n  media-volume-range {\n    border-radius: 0 9999px 9999px 0;\n    background: rgba(0,0,0,0.2);\n    --media-range-track-width: 80px;\n  }\n\n  media-mute-button:hover + .media-volume-range-wrapper,\n  media-mute-button:focus + .media-volume-range-wrapper,\n  media-mute-button:focus-within + .media-volume-range-wrapper,\n  .media-volume-range-wrapper:hover,\n  .media-volume-range-wrapper:focus,\n  .media-volume-range-wrapper:focus-within {\n    opacity: 1;\n  }\n\n  media-controller:not([breakpointsm]) media-control-bar {\n    position: static;\n    background: transparent;\n    margin: 0;\n    padding: 22px 15px;\n  }\n\n  media-controller:not([breakpointsm]) media-time-display,\n  media-controller:not([breakpointsm]) .media-volume-range-wrapper {\n    display: none;\n  }\n\n  media-controller:not([breakpointsm]) .small-button {\n    display: none;\n    width: 48px;\n    height: 48px;\n  }\n\n  media-controller:not([breakpointsm]) .small-button svg {\n    transform: scale(1.4);\n  }\n\n  media-controller:not([breakpointsm]) div[slot=\"top-chrome\"] {\n    width: calc(100% - 13px);\n    padding-right: 13px;\n  }\n\n  media-controller:not([breakpointsm]) div[slot=\"top-chrome\"] .small-button {\n    display: flex;\n    margin: 22px 7px;\n  }\n\n  media-controller:not([breakpointsm]) media-fullscreen-button.small-button {\n    display: flex;\n  }\n\n  media-controller:not([breakpointsm]) media-airplay-button[mediaairplayunavailable].small-button {\n    display: none;\n  }\n\n  media-controller:not([breakpointsm]) media-cast-button[mediacastunavailable].small-button {\n    display: none;\n  }\n\n  media-controller:not([breakpointsm]) media-mute-button.small-button {\n    display: flex;\n  }\n\n  media-controller:not([breakpointsm]) media-captions-button.small-button {\n    position: absolute;\n    top: 22px;\n    left: 16px;\n  }\n\n  media-controller:not([breakpointsm]) div[slot=\"centered-chrome\"] media-play-button {\n    z-index: 1;\n    height: 72px;\n    width: 72px;\n  }\n\n  media-controller:not([breakpointsm]) div[slot=\"centered-chrome\"] media-play-button svg {\n    margin-left: -2px;\n    height: 48px;\n  }\n</style>\n\n<media-controller\n  breakpoints=\"xs:360 sm:600 md:760 lg:960 xl:1100\"\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n  <div class=\"demuxed-gradient-bottom\"></div>\n  <div slot=\"top-chrome\">\n    <media-cast-button class=\"small-button\">\n      <svg slot=\"enter\" viewBox=\"0 0 26 26\"><path d=\"M2.5 18.5v3h3c0-1.7-1.34-3-3-3ZM2.5 14.5v2c2.76 0 5 2.2 5 5h2c0-3.87-3.13-7-7-7Z\"/><path d=\"M2.5 10.5v2c4.97 0 9 4 9 9h2c0-6.08-4.93-11-11-11Z\"/><path d=\"M22.5 3.5h-18c-1.1 0-2 .9-2 2v3h2v-3h18v14h-7v2h7c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2Z\"/></svg>\n      <svg slot=\"exit\" viewBox=\"0 0 26 26\"><path d=\"M2.5 18.5v3h3c0-1.7-1.34-3-3-3ZM2.5 14.5v2c2.76 0 5 2.2 5 5h2c0-3.87-3.13-7-7-7Z\"/><path d=\"M2.5 10.5v2c4.97 0 9 4 9 9h2c0-6.08-4.93-11-11-11Z\"/><path d=\"M22.5 3.5h-18c-1.1 0-2 .9-2 2v3h2v-3h18v14h-7v2h7c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2Z\"/></svg>\n    </media-cast-button>\n    <media-airplay-button class=\"small-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 23 23\"><path d=\"M20.88 3.5H2.62a.87.87 0 0 0-.87.87v13.26a.87.87 0 0 0 .87.87h3.4l1.73-2h-4v-11h16v11h-4l1.72 2h3.4a.87.87 0 0 0 .87-.87V4.37a.87.87 0 0 0-.86-.87Zm-8.75 11.44a.5.5 0 0 0-.76 0l-4.91 5.73a.5.5 0 0 0 .38.83h9.82a.501.501 0 0 0 .38-.83l-4.91-5.73Z\"/></svg>\n    </media-airplay-button>\n  </div>\n  <div slot=\"centered-chrome\">\n    <media-play-button>\n      <svg slot=\"play\" viewBox=\"0 0 16 16\"><path d=\"M13.6 7.2 5.1 3c-.6-.3-1.2.1-1.2.7v8.5c0 .6.7 1 1.2.7l8.5-4.2c.6-.3.6-1.1 0-1.5z\"/></svg>\n      <svg slot=\"pause\" viewBox=\"0 0 16 16\"><path d=\"M11.8 14c-.5 0-.9-.4-.9-.9V2.9c0-.5.4-.9.9-.9s.9.4.9.9v10.2c0 .5-.4.9-.9.9zM4.1 14c-.5 0-.9-.4-.9-.9V2.9c0-.5.4-.9.9-.9s.9.4.9.9v10.2c-.1.5-.5.9-.9.9z\"/></svg>\n    </media-play-button>\n  </div>\n  <media-control-bar>\n    <media-play-button class=\"small-button\">\n      <svg slot=\"play\" viewBox=\"0 0 16 16\"><path d=\"M13.6 7.2 5.1 3c-.6-.3-1.2.1-1.2.7v8.5c0 .6.7 1 1.2.7l8.5-4.2c.6-.3.6-1.1 0-1.5z\"/></svg>\n      <svg slot=\"pause\" viewBox=\"0 0 16 16\"><path d=\"M11.8 14c-.5 0-.9-.4-.9-.9V2.9c0-.5.4-.9.9-.9s.9.4.9.9v10.2c0 .5-.4.9-.9.9zM4.1 14c-.5 0-.9-.4-.9-.9V2.9c0-.5.4-.9.9-.9s.9.4.9.9v10.2c-.1.5-.5.9-.9.9z\"/></svg>\n    </media-play-button>\n    <div class=\"media-volume-wrapper\">\n      <media-mute-button class=\"small-button\">\n        <svg slot=\"off\" viewBox=\"0 0 16 16\"><path d=\"M7 2.2 4.2 5.1v.1H1.4c-.5 0-.9.4-.9.9V10c0 .5.4.9.9.9h2.8L7 13.8c.3.3.8.1.8-.3v-11c0-.4-.5-.6-.8-.3ZM13.4 8l2-2\" fill-rule=\"nonzero\"/><path d=\"M15.622 5.479a.606.606 0 0 1 0 .857l-4.286 4.286a.606.606 0 1 1-.857-.857l4.286-4.286a.606.606 0 0 1 .857 0Z\"/><path d=\"M10.479 5.479a.606.606 0 0 0 0 .857l4.286 4.286a.606.606 0 1 0 .857-.857l-4.286-4.286a.606.606 0 0 0-.857 0Z\"/></svg>\n        <svg slot=\"low\" viewBox=\"0 0 16 16\"><path d=\"m7.1 2.2-2.8 3H1.5c-.5 0-.9.4-.9.9V10c0 .5.4.9.9.9h2.8l2.8 2.9c.3.3.8.1.8-.3v-11c0-.4-.5-.6-.8-.3zM10.3 11.4c-.2 0-.3-.1-.4-.2-.3-.3-.3-.6 0-.9.6-.6 1-1.4 1-2.3s-.4-1.6-1-2.3c-.3-.3-.3-.6 0-.9.3-.3.6-.3.9 0 .9.8 1.4 2 1.4 3.2s-.5 2.3-1.4 3.2c-.2.2-.4.2-.5.2z\"/></svg>\n        <svg slot=\"medium\" viewBox=\"0 0 16 16\"><path d=\"m7.1 2.2-2.8 3H1.5c-.5 0-.9.4-.9.9V10c0 .5.4.9.9.9h2.8l2.8 2.9c.3.3.8.1.8-.3v-11c0-.4-.5-.6-.8-.3zM12.6 13.8c-.2 0-.3-.1-.4-.2-.3-.3-.3-.6 0-.9 1.3-1.2 2-2.8 2-4.5s-.7-3.3-2-4.5c-.3-.3-.3-.6 0-.9.3-.3.6-.3.9 0 1.5 1.5 2.3 3.4 2.3 5.4 0 2.1-.8 4-2.3 5.4-.2.1-.4.2-.5.2z\"/><path d=\"M10.3 11.4c-.2 0-.3-.1-.4-.2-.3-.3-.3-.6 0-.9.6-.6 1-1.4 1-2.3s-.4-1.6-1-2.3c-.3-.3-.3-.6 0-.9.3-.3.6-.3.9 0 .9.8 1.4 2 1.4 3.2s-.5 2.3-1.4 3.2c-.2.2-.4.2-.5.2z\"/></svg>\n        <svg slot=\"high\" viewBox=\"0 0 16 16\"><path d=\"m7.1 2.2-2.8 3H1.5c-.5 0-.9.4-.9.9V10c0 .5.4.9.9.9h2.8l2.8 2.9c.3.3.8.1.8-.3v-11c0-.4-.5-.6-.8-.3zM12.6 13.8c-.2 0-.3-.1-.4-.2-.3-.3-.3-.6 0-.9 1.3-1.2 2-2.8 2-4.5s-.7-3.3-2-4.5c-.3-.3-.3-.6 0-.9.3-.3.6-.3.9 0 1.5 1.5 2.3 3.4 2.3 5.4 0 2.1-.8 4-2.3 5.4-.2.1-.4.2-.5.2z\"/><path d=\"M10.3 11.4c-.2 0-.3-.1-.4-.2-.3-.3-.3-.6 0-.9.6-.6 1-1.4 1-2.3s-.4-1.6-1-2.3c-.3-.3-.3-.6 0-.9.3-.3.6-.3.9 0 .9.8 1.4 2 1.4 3.2s-.5 2.3-1.4 3.2c-.2.2-.4.2-.5.2z\"/></svg>\n      </media-mute-button>\n      <div class=\"media-volume-range-wrapper\">\n        <media-volume-range></media-volume-range>\n      </div>\n    </div>\n    <media-time-display showduration></media-time-display>\n    <media-time-range>\n      <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n      <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n    </media-time-range>\n    <media-captions-button class=\"small-button\">\n      <svg slot=\"off\" viewBox=\"0 0 16 16\"><path d=\"M12.6 13.7H3.4C2 13.7.8 12.6.8 11.1V4.9c0-1.4 1.1-2.6 2.6-2.6h9.3c1.4 0 2.6 1.1 2.6 2.6v6.2c-.1 1.5-1.3 2.6-2.7 2.6z\"/><path fill=\"#fff\" d=\"M4.7 8H3.2c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h1.5c.2 0 .4.2.4.4s-.2.4-.4.4zM12.5 8H6.7c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h5.7c.2 0 .4.2.4.4s-.1.4-.3.4zM7.7 10.2H3.2c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h4.6c.2 0 .4.2.4.4-.1.2-.3.4-.5.4zM12.5 10.2H9.8c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h2.7c.2 0 .4.2.4.4s-.2.4-.4.4z\"/></svg>\n      <svg slot=\"on\" viewBox=\"0 0 16 16\"><path d=\"M4.7 8H3.2c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h1.5c.2 0 .4.2.4.4s-.2.4-.4.4zM12.5 8H6.7c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h5.7c.2 0 .4.2.4.4s-.1.4-.3.4zM7.7 10.2H3.2c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h4.6c.2 0 .4.2.4.4-.1.2-.3.4-.5.4zM12.5 10.2H9.8c-.2 0-.4-.2-.4-.4s.2-.4.4-.4h2.7c.2 0 .4.2.4.4s-.2.4-.4.4z\"/></svg>\n    </media-captions-button>\n    <media-pip-button class=\"small-button\">\n      <svg slot=\"enter\" viewBox=\"0 0 16 16\"><path d=\"M14.2 13.1H1.8c-.4 0-.7-.3-.7-.7V3.5c0-.4.3-.7.7-.7h12.3c.4 0 .7.3.7.7v8.9c.1.5-.2.7-.6.7zM2.5 11.8h11V4.3h-11v7.5z\"/><path d=\"M7.2 7.3h5.1v3.1H7.2z\"/></svg>\n      <svg slot=\"exit\" viewBox=\"0 0 16 16\"><path d=\"M14.2 13.1H1.8c-.4 0-.7-.3-.7-.7V3.5c0-.4.3-.7.7-.7h12.3c.4 0 .7.3.7.7v8.9c.1.5-.2.7-.6.7zM2.5 11.8h11V4.3h-11v7.5z\"/><path d=\"M7.2 7.3h5.1v3.1H7.2z\"/></svg>\n    </media-pip-button>\n    <media-fullscreen-button class=\"small-button\">\n      <svg slot=\"enter\" viewBox=\"0 0 16 16\"><path d=\"M2.9 6.6c-.4 0-.7-.3-.7-.7v-3c0-.4.3-.7.7-.7h3c.4 0 .7.3.7.7s-.2.7-.6.7H3.6V6c0 .3-.3.6-.7.6zM13.1 6.6c-.4 0-.7-.3-.7-.7V3.6H10c-.4 0-.7-.3-.7-.7s.3-.7.7-.7h3c.4 0 .7.3.7.7v3c.1.4-.2.7-.6.7zM6 13.8H3c-.4 0-.7-.3-.7-.7v-3c0-.4.3-.7.7-.7.4 0 .7.3.7.7v2.4H6c.4 0 .7.3.7.7-.1.3-.4.6-.7.6zM13.1 13.8h-3c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2.4V10c0-.4.3-.7.7-.7.4 0 .7.3.7.7v3c-.1.5-.4.8-.8.8z\"/></svg>\n      <svg slot=\"exit\" viewBox=\"0 0 16 16\"><path d=\"M2.9 6.6c-.4 0-.7-.3-.7-.7v-3c0-.4.3-.7.7-.7h3c.4 0 .7.3.7.7s-.2.7-.6.7H3.6V6c0 .3-.3.6-.7.6zM13.1 6.6c-.4 0-.7-.3-.7-.7V3.6H10c-.4 0-.7-.3-.7-.7s.3-.7.7-.7h3c.4 0 .7.3.7.7v3c.1.4-.2.7-.6.7zM6 13.8H3c-.4 0-.7-.3-.7-.7v-3c0-.4.3-.7.7-.7.4 0 .7.3.7.7v2.4H6c.4 0 .7.3.7.7-.1.3-.4.6-.7.6zM13.1 13.8h-3c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2.4V10c0-.4.3-.7.7-.7.4 0 .7.3.7.7v3c-.1.5-.4.8-.8.8z\"/></svg>\n    </media-fullscreen-button>\n  </media-control-bar>\n</media-controller>\n"
  },
  {
    "path": "themes/halloween/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/halloween@0.1.1...@player.style/halloween@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/halloween@0.1.0...@player.style/halloween@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/halloween@0.0.2...@player.style/halloween@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/halloween-v0.0.1...@player.style/halloween@0.0.2) (2024-10-29)\n\n\n### Features\n\n* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n"
  },
  {
    "path": "themes/halloween/package.json",
    "content": "{\n  \"name\": \"@player.style/halloween\",\n  \"version\": \"0.1.2\",\n  \"description\": \"Bring the spooky season to your video player with this Halloween theme.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/halloween\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/halloween/template.html",
    "content": "<style>\n  :host {\n    --_primary-color: var(--media-primary-color, #000);\n    --_secondary-color: var(--media-secondary-color, rgb(38 38 38 / 0.75));\n    --_accent-color: var(--media-accent-color, #fff);\n    --media-icon-color: var(--_primary-color);\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-font-weight: bold;\n    --media-tooltip-display: none;\n    font-size: 16px;\n    color: var(--_primary-color);\n  }\n\n  media-controller {\n    display: block;\n    overflow: hidden;\n    container: media-theme-instaplay / inline-size;\n  }\n\n  media-play-button {\n    --media-button-icon-transform: translateY(-.5em);\n    --media-control-height: 5em;\n    transition: transform .15s;\n  }\n\n  media-play-button:active {\n    transform: scale(3);\n  }\n\n  media-play-button .pause,\n  media-play-button .play {\n    opacity: 0;\n  }\n\n  media-play-button:not([mediapaused]) .pause {\n    opacity: 1;\n  }\n\n  media-play-button[mediapaused] .play {\n    opacity: 1;\n  }\n\n  media-play-button .face {\n    transition: fill .2s;\n  }\n\n  media-play-button:not([mediapaused]) .face {\n    fill: #FFE194;\n  }\n\n  .media-time-range-wrapper {\n    display: grid;\n    flex-grow: 1;\n  }\n\n  .media-time-range-wrapper > * {\n    width: 100%;\n    grid-area: 1 / 1;\n  }\n\n  .web::part(thumb) {\n    display: none;\n  }\n\n  .spider::part(track) {\n    display: none;\n  }\n\n  .spider {\n    pointer-events: none;\n  }\n\n  @keyframes spider-walk {\n    0% {\n      transform: rotate(0deg);\n    }\n    33% {\n      transform: rotate(-.3deg);\n    }\n    66% {\n      transform: rotate(.2deg);\n    }\n  }\n\n  media-controller:not([mediapaused]) .spider {\n    animation: spider-walk .5s ease infinite;\n    transform-origin: 100% 50%;\n  }\n\n  :is(media-time-range, media-volume-range)::part(thumb) {\n    transition: left .15s ease-out;\n  }\n\n  :is(media-time-range, media-volume-range)::part(progress) {\n    transition: width .15s ease-out;\n  }\n\n  media-time-range {\n    --media-range-track-height: 50px;\n    --media-range-padding-left: 30px;\n    --media-range-padding-right: 30px;\n    --media-preview-time-background: var(--_secondary-color);\n    --media-preview-time-background: transparent;\n    --media-preview-thumbnail-border-radius: 0;\n  }\n\n  media-time-range::part(thumb) {\n    background: no-repeat url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 55 48\"><path fill=\"black\" fill-rule=\"evenodd\" d=\"M35.684 26.797c-1.554.75-3.21 1.103-4.939 1.094 1.596.371 3.242.007 4.939-1.094Zm-10.97 1.866c-2.966 2.771-7.28 1.102-12.134-4.329 4.923 4.808 9.375 6.236 12.133 4.329Zm6.198-9.145 2.131-2.131 7.183-.466c2.777.794 5.554 2.798 8.33 4.89-2.498-2.585-5.057-4.994-8.049-6.161l-7.977.41-3.586 3.71 1.864-6.506 6.979-5.36c5.473.835 11.042 4 16.638 7.787-5.374-4.51-10.794-8.572-16.537-9.507L29.696 12.1l-2.05 7.156.153-9.444-5.68-9.8c-4.702-.16-9.51 1.417-14.335 3.29 4.487-1.07 9.004-1.892 13.676-1.484l4.971 8.442.18 8.591L22.55 8.113 10.838 7.094C9.733 7.136 2.82 12.64 0 18.223c1.611-2.556 9.446-8.904 11.442-9.452l10.236.9 3.766 9.04C20.157 13.56 14.426 20.13 11.568 24c2.901 3.913 8.58 10.428 13.862 5.302l-3.752 9.007-10.236.9C9.446 38.661 1.612 32.313 0 29.758c2.821 5.584 9.733 11.086 10.838 11.128l11.712-1.019 4.05-10.706.007-.001.004-.011v.02l-.18 8.571-4.971 8.442c-4.672.408-9.19-.415-13.676-1.484 4.826 1.873 9.633 3.45 14.335 3.29l5.68-9.8-.154-9.444 2.05 7.156 8.193 5.916c5.743-.935 11.163-4.997 16.537-9.507-5.596 3.787-11.165 6.952-16.638 7.788l-6.979-5.36-1.864-6.507 3.586 3.71 7.977.41c2.992-1.167 5.551-3.576 8.05-6.161-2.777 2.092-5.554 4.096-8.331 4.89l-7.183-.466-2.131-2.132.096.014c2.744.325 5.21-.769 5.974-3.582-.723.87-1.756 1.485-2.968 1.081.109-.672.531-1.612 1.118-1.994-.572-.336-1.015-1.361-1.118-1.994 1.212-.404 2.245.212 2.968 1.081-.764-2.813-3.23-3.907-5.974-3.582a2.824 2.824 0 0 0-.096.014Z\" clip-rule=\"evenodd\"/><circle cx=\"30.5\" cy=\"21.5\" r=\".5\" fill=\"red\"/><circle cx=\"31.75\" cy=\"22.75\" r=\".75\" fill=\"red\"/><circle cx=\"30.5\" cy=\"26.5\" r=\".5\" fill=\"red\"/><circle cx=\"31.75\" cy=\"24.75\" r=\".75\" fill=\"red\"/></svg>');\n    width: 35px;\n    height: 35px;\n    transform: translate(-8px, -13px);\n  }\n\n  media-time-range::part(track) {\n    background: repeat-x url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"35\" viewBox=\"0 0 185 14\"><path fill=\"rgb(38 38 38 / 0.25)\" d=\"M0 3.5v1h50c12 0 50-.5 50-.5s-27.5-1-52-.5-48 0-48 0Z\"/><path fill=\"rgb(38 38 38 / 0.25)\" d=\"M185 3.5v1h-50c-12 0-50-.5-50-.5s27.5-1 52-.5 48 0 48 0Z\"/><path fill=\"rgb(38 38 38 / 0.25)\" d=\"M85 3.5c-4.8-4.8-14 0-16.5 2 0 0 12.092-8.652 17.5 0 2.5 4 9-5 15.5-4.7 7.763 0 9.5 12.2 18 12.7 13 .765 18-15 27-9.5 2 1.5 2.5 3 2.5 3l.5 4s.25-1.5.25-2.75-.25-1.75-.75-2.75c-1-1.5-1.5-2.5-6-3-7.52-.836-15 12-23.5 10s-10.4-12-18-12C92 .5 91 9.5 85 3.5Z\"/></svg>');\n  }\n\n  media-time-range::part(buffered) {\n    background: repeat-x url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"35\" viewBox=\"0 0 185 14\"><path fill=\"rgb(38 38 38 / 0.35)\" d=\"M0 3.5v1h50c12 0 50-.5 50-.5s-27.5-1-52-.5-48 0-48 0Z\"/><path fill=\"rgb(38 38 38 / 0.35)\" d=\"M185 3.5v1h-50c-12 0-50-.5-50-.5s27.5-1 52-.5 48 0 48 0Z\"/><path fill=\"rgb(38 38 38 / 0.35)\" d=\"M85 3.5c-4.8-4.8-14 0-16.5 2 0 0 12.092-8.652 17.5 0 2.5 4 9-5 15.5-4.7 7.763 0 9.5 12.2 18 12.7 13 .765 18-15 27-9.5 2 1.5 2.5 3 2.5 3l.5 4s.25-1.5.25-2.75-.25-1.75-.75-2.75c-1-1.5-1.5-2.5-6-3-7.52-.836-15 12-23.5 10s-10.4-12-18-12C92 .5 91 9.5 85 3.5Z\"/></svg>');\n  }\n\n  media-time-range::part(progress) {\n    background: repeat-x url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"35\" viewBox=\"0 0 185 14\"><path fill=\"rgb(255 255 255 / 0.9)\" d=\"M0 3.5v1h50c12 0 50-.5 50-.5s-27.5-1-52-.5-48 0-48 0Z\"/><path fill=\"rgb(255 255 255 / 0.9)\" d=\"M185 3.5v1h-50c-12 0-50-.5-50-.5s27.5-1 52-.5 48 0 48 0Z\"/><path fill=\"rgb(255 255 255 / 0.9)\" d=\"M85 3.5c-4.8-4.8-14 0-16.5 2 0 0 12.092-8.652 17.5 0 2.5 4 9-5 15.5-4.7 7.763 0 9.5 12.2 18 12.7 13 .765 18-15 27-9.5 2 1.5 2.5 3 2.5 3l.5 4s.25-1.5.25-2.75-.25-1.75-.75-2.75c-1-1.5-1.5-2.5-6-3-7.52-.836-15 12-23.5 10s-10.4-12-18-12C92 .5 91 9.5 85 3.5Z\"/></svg>');\n  }\n\n  media-time-range::part(preview-box) {\n    /* Add more space so thumb doesn't hide preview. */\n    --media-preview-box-margin: 0 0 20px;\n    display: grid;\n  }\n\n  media-preview-thumbnail,\n  media-preview-time-display {\n    grid-area: 1 / 1;\n  }\n\n  media-preview-time-display {\n    place-self: end center;\n    position: relative;\n    line-height: 2;\n  }\n\n  @container (inline-size >=384px) {\n    [role='button'],\n    media-controller {\n      font-size: 17px;\n    }\n\n    media-time-range::part(preview-box) {\n      --media-preview-box-margin: 0 0 1em;\n    }\n  }\n\n  .media-volume-wrapper {\n    position: relative;\n    width: 1em;\n  }\n\n  [mediavolumeunavailable] .media-volume-wrapper {\n    display: none;\n  }\n\n  .media-volume-range-wrapper {\n    display: grid;\n    transform: rotate(-90deg) translateY(-50%) scale(0.6);\n    transform-origin: 0 0;\n    position: absolute;\n    top: 2em;\n    left: -.3em;\n  }\n\n  .media-volume-range-wrapper > * {\n    grid-area: 1 / 1;\n  }\n\n  media-volume-range {\n    --media-range-track-height: 0.75em;\n    --media-range-padding: 1em;\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    width: 5em;\n    height: 1.5em;\n    border-radius: 2px;\n    animation: candle-anim 2s ease infinite;\n  }\n\n  /* https://codepen.io/dykoode/pen/qBPoOBR  */\n  @keyframes candle-anim {\n    0% {\n      transform: scale(1);\n    }\n    50% {\n      transform: scale(1.1);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  media-volume-range::part(thumb) {\n    width: 30px;\n    height: 30px;\n    border-radius: 0 50% 50%;\n    transform: scale(.5) rotate(135deg);\n    background: #FFE194;\n  }\n\n  media-volume-range::part(progress) {\n    background: #EEEBDD;\n  }\n\n  [mediavolumelevel=\"off\"] media-volume-range {\n    animation: none;\n  }\n\n  [mediavolumelevel=\"off\"] media-volume-range::part(thumb) {\n    background: #000;\n    border-radius: 50%;\n  }\n\n  [mediavolumelevel=\"medium\"] media-volume-range::part(thumb) {\n    box-shadow: -6px -6px 0 10px #FFB319;\n  }\n\n  [mediavolumelevel=\"high\"] media-volume-range::part(thumb) {\n    box-shadow: -6px -6px 0 10px #FFB319, -14px -14px 0 20px #F88F01;\n  }\n\n  .candle {\n    animation: none;\n  }\n\n  .candle::part(thumb) {\n    display: none;\n  }\n\n  .flame::part(track) {\n    display: none;\n  }\n</style>\n\n<media-controller\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <div slot=\"centered-chrome\">\n    <media-play-button mediapaused>\n      <svg slot=\"icon\" aria-hidden=\"true\" width=\"48\" height=\"48\" fill=\"none\" viewBox=\"0 0 48 48\">\n        <g>\n          <path fill=\"#FF8000\" fill-rule=\"evenodd\" d=\"M21.252 11.127c-2.784.412-6.001 1.646-7.288 2.816-1.761 1.603-3.986 4.736-5.337 7.51-.653 1.36-.717 1.35-.41-.053.505-2.278 1.412-4.04 3.322-6.476.442-.57.833-1.15.864-1.297.275-1.076-2.658-.844-5.178.411-2.932 1.466-5.369 4.42-6.54 7.921C.18 23.478 0 24.669 0 26.463c0 5.811 1.888 11.517 4.862 14.702.95 1.013 1.74 1.635 2.869 2.226 1.086.57 1.898.843 3.154 1.065.759.126 1.096.242 1.518.517 2.331 1.518 5.274 2.183 8.3 1.856 1.056-.116 1.214-.105 2.058.105 1.023.254 1.909.232 2.794-.073.422-.148.644-.148 1.55-.053 1.446.158 2.353.148 3.682-.053 1.74-.253 3.407-.875 4.799-1.782.422-.275.76-.39 1.519-.517 3.765-.644 6.58-2.995 8.553-7.14 1.54-3.249 2.331-6.93 2.342-10.853.01-1.846-.2-3.112-.76-4.715-1.17-3.301-3.596-6.254-6.244-7.583-.896-.454-2.32-.802-3.111-.76l-.601.032.58.306c1.234.643 2.363 2.204 2.995 4.124.623 1.845 1.023 4.651 1.002 6.898l-.01 1.223-.148-1.181c-.169-1.382-.58-3.301-.96-4.451-.358-1.076-1.17-2.785-1.73-3.607-1.054-1.582-2.89-3.112-4.535-3.797-.843-.348-1.867-.623-2.352-.623h-.295l.327.37c.76.864 1.371 2.731 1.635 5.01l.074.58-.338-.58c-1.519-2.637-2.848-4.082-4.767-5.2-1.783-1.034-3.017-1.35-5.4-1.392-.981-.022-1.93-.01-2.11.01ZM19 27.6a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm14.5 3.1a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z\" clip-rule=\"evenodd\"/>\n          <g>\n            <path fill=\"#0BB037\" d=\"M30.375.158c-.727.074-1.444.137-1.592.137-.222.01-.56.359-1.846 1.92l-1.571 1.909-1.224.728-1.234.717-1.698 2.51c-.928 1.371-1.677 2.52-1.656 2.542.021.021.253-.032.507-.116 1.096-.38 2.14-.527 3.617-.527 1.72 0 2.658.2 3.987.854.443.221.812.38.812.348.01-.032-.095-1.129-.232-2.436l-.232-2.374.991-2.14c.538-1.182 1.023-2.163 1.055-2.184.042-.02 1.181.274 2.542.675l2.468.717.063 1.097c.042.601.074 1.646.085 2.31l.01 1.213-1.107.559c-.612.295-1.15.548-1.213.548-.18 0-1.044-.58-1.055-.706 0-.064.169-.56.37-1.097.21-.538.358-1.013.347-1.065-.042-.116-2.489 1.93-2.5 2.077-.01.064.623.739 1.403 1.52l1.414 1.402 1.592-1.013c.876-.57 1.614-1.065 1.635-1.107.106-.158 1.234-6.254 1.192-6.381C37.21 2.563 32.316-.011 31.989 0c-.158.01-.886.074-1.614.158Z\"/>\n          </g>\n          <g class=\"face\">\n            <path d=\"M29.48 37v1.411l-2.44 1.619v-2.795h-6.08v2.795l-2.44-1.619v-1.41S11.286 36.058 8 34c0 0 .091 3.088 4.491 6.148l.966-1.942 2.23 1.723-.271 1.483S18.85 42.648 22.348 43v-2.677h3.304V43c3.497-.352 6.932-1.588 6.932-1.588l-.27-1.483 2.23-1.723.965 1.942C39.909 37.088 40 34 40 34c-3.285 2.058-10.52 3-10.52 3Z\"/>\n            <path d=\"M15 21c-2.761 0-5 2.35-5 5.25 0 2.1 1.173 3.91 2.869 4.75a3.813 3.813 0 0 1-1.446-3.017c0-2.074 1.601-3.756 3.577-3.756s3.578 1.682 3.578 3.756A3.817 3.817 0 0 1 17.133 31C18.826 30.16 20 28.35 20 26.25c0-2.9-2.239-5.25-5-5.25Z\"/>\n            <path d=\"M33.5 20c-3.037 0-5.5 2.35-5.5 5.25 0 2.1 1.29 3.91 3.155 4.75-.965-.685-1.59-1.78-1.59-3.017 0-2.074 1.761-3.756 3.935-3.756 2.173 0 3.936 1.682 3.936 3.756 0 1.237-.626 2.332-1.59 3.017C37.71 29.16 39 27.35 39 25.25c0-2.9-2.463-5.25-5.5-5.25Z\"/>\n            <path class=\"play\" d=\"M28 30.999 22 28v6l6-3.001Z\"/>\n            <g class=\"pause\">\n              <path fill-rule=\"evenodd\" d=\"M25 28h1l2 5.226-3 .756V28Z\" clip-rule=\"evenodd\"/>\n              <path fill-rule=\"evenodd\" d=\"M24 28h-1l-2 5.226 3 .756V28Z\" clip-rule=\"evenodd\"/>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </media-play-button>\n  </div>\n\n  <media-control-bar>\n    <div class=\"media-time-range-wrapper\">\n      <!-- It's impossible to do an animation on the thumb alone because\n      of shadow dom so we duplicate, make 1 animate and only show the thumb\n      and use the other for the static track. -->\n      <media-time-range class=\"web\">\n        <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n        <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n      </media-time-range>\n      <media-time-range class=\"spider\">\n        <div slot=\"preview\"></div>\n      </media-time-range>\n    </div>\n    <div class=\"media-volume-wrapper\">\n      <div class=\"media-volume-range-wrapper\">\n        <!-- It's impossible to do an animation on the thumb alone because\n        of shadow dom so we duplicate, make 1 animate and only show the thumb\n        and use the other for the static track. -->\n        <media-volume-range class=\"flame\"></media-volume-range>\n        <media-volume-range class=\"candle\"></media-volume-range>\n      </div>\n    </div>\n  </media-control-bar>\n\n  <slot></slot>\n</media-controller>\n"
  },
  {
    "path": "themes/instaplay/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.1.1...@player.style/instaplay@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.1.0...@player.style/instaplay@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.0.7...@player.style/instaplay@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.0.6...@player.style/instaplay@0.0.7) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.0.5...@player.style/instaplay@0.0.6) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.0.4...@player.style/instaplay@0.0.5) (2024-10-08)\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.0.3...@player.style/instaplay@0.0.4) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.0.2...@player.style/instaplay@0.0.3) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/instaplay-v0.0.1...@player.style/instaplay@0.0.2) (2024-08-15)\n\n\n### Features\n\n* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))\n\n\n### Bug Fixes\n\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n"
  },
  {
    "path": "themes/instaplay/package.json",
    "content": "{\n  \"name\": \"@player.style/instaplay\",\n  \"version\": \"0.1.2\",\n  \"description\": \"Instaplay is a mobile-first theme inspired by playback experiences you can find in popular social media apps.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/instaplay\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/instaplay/template.html",
    "content": "<style>\n  :host {\n    --_primary-color: var(--media-primary-color, #fff);\n    --_secondary-color: var(--media-secondary-color, rgb(38 38 38 / 0.75));\n    --_accent-color: var(--media-accent-color, #fff);\n    --media-icon-color: var(--_primary-color);\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-range-thumb-opacity: 0;\n    --media-control-height: 1.2em;\n    --media-font-weight: bold;\n    --media-tooltip-display: none;\n    font-size: 16px;\n    color: var(--_primary-color);\n  }\n\n  @supports (color: color-mix(in srgb, red, blue)) {\n    :host {\n      --_secondary-color: color-mix(\n        in srgb,\n        var(--media-secondary-color, rgb(38 38 38)) 75%,\n        transparent\n      );\n      --_accent-color: color-mix(in srgb, var(--media-accent-color, #fff) 75%, transparent);\n    }\n  }\n\n  .spacer {\n    flex: 1;\n  }\n\n  media-controller {\n    display: block;\n    overflow: hidden;\n    container: media-theme-instaplay / inline-size;\n  }\n\n  media-control-bar {\n    margin: 0.4em 0.8em;\n  }\n\n  media-play-button,\n  media-mute-button {\n    padding: .3em;\n    border-radius: 50%;\n    --media-control-background: var(--_secondary-color);\n    --media-control-hover-background: var(--_secondary-color);\n  }\n\n  @supports (color: color-mix(in srgb, red, blue)) {\n    media-play-button,\n    media-mute-button {\n      --media-control-hover-background: color-mix(in srgb, var(--_secondary-color) 85%, transparent);\n    }\n  }\n\n  media-play-button {\n    --media-button-icon-transform: translateX(.05em);\n    display: none;\n    padding: .7em;\n  }\n\n  media-play-button[mediapaused] {\n    display: block;\n    line-height: 1;\n  }\n\n  media-time-range {\n    --media-range-track-height: 4px;\n    --media-range-bar-color: var(--_accent-color);\n    --media-range-track-background: rgb(38 38 38 / 0.25);\n    --media-time-range-buffered-color: rgb(38 38 38 / 0.3);\n    --media-range-padding-left: 0;\n    --media-range-padding-right: 0;\n    --media-preview-time-background: var(--_secondary-color);\n    --media-preview-box-margin: 0 0 3px;\n    --media-preview-time-background: transparent;\n    --media-preview-thumbnail-border-radius: 4px;\n\n    width: 100%;\n    height: 8px;\n    bottom: -3px;\n  }\n\n  media-time-range::part(preview-box) {\n    /* Add more space so thumb doesn't hide preview. */\n    --media-preview-box-margin: 0 0 20px;\n    display: grid;\n  }\n\n  media-preview-thumbnail,\n  media-preview-time-display {\n    grid-area: 1 / 1;\n  }\n\n  media-preview-time-display {\n    place-self: end center;\n    position: relative;\n    line-height: 2;\n  }\n\n  @container (inline-size >=384px) {\n    [role='button'],\n    media-controller {\n      font-size: 17px;\n    }\n\n    media-time-range {\n      bottom: -2px;\n    }\n\n    media-time-range::part(preview-box) {\n      --media-preview-box-margin: 0 0 0.5em;\n    }\n  }\n</style>\n\n<media-controller\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <media-play-button slot=\"centered-chrome\">\n    <svg slot=\"play\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path fill-rule=\"evenodd\" d=\"M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z\" clip-rule=\"evenodd\" />\n    </svg>\n  </media-play-button>\n\n  <media-control-bar noautohide>\n    <div class=\"spacer\"></div>\n    <media-mute-button></media-mute-button>\n  </media-control-bar>\n\n  <media-time-range noautohide>\n    <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n    <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n  </media-time-range>\n\n  <slot></slot>\n</media-controller>\n"
  },
  {
    "path": "themes/microvideo/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.2.0](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.1.3...@player.style/microvideo@0.2.0) (2026-04-15)\n\n\n### Features\n\n* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))\n\n\n### Bug Fixes\n\n* add smooth transition to volume control appear on hover in microvideo  ([#215](https://github.com/muxinc/player.style/issues/215)) ([5059029](https://github.com/muxinc/player.style/commit/5059029fe61a8c0b0a02851f9dab5f130cd38fec))\n* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n* **microvideo:** update template.html ([dcf73c5](https://github.com/muxinc/player.style/commit/dcf73c53745e94ee7b95fa18e957c84aa2118b41))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.1.3](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.1.2...@player.style/microvideo@0.1.3) (2026-03-25)\n\n\n### Bug Fixes\n\n* add smooth transition to volume control appear on hover in microvideo  ([#215](https://github.com/muxinc/player.style/issues/215)) ([5059029](https://github.com/muxinc/player.style/commit/5059029fe61a8c0b0a02851f9dab5f130cd38fec))\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.1.1...@player.style/microvideo@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.1.0...@player.style/microvideo@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.11...@player.style/microvideo@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.10...@player.style/microvideo@0.0.11) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.9...@player.style/microvideo@0.0.10) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.8...@player.style/microvideo@0.0.9) (2024-10-08)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.7...@player.style/microvideo@0.0.8) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.6...@player.style/microvideo@0.0.7) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.5...@player.style/microvideo@0.0.6) (2024-08-15)\n\n\n### Bug Fixes\n\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.4...@player.style/microvideo@0.0.5) (2024-06-17)\n\n\n### Bug Fixes\n\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.1 to ^0.0.2\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.3...@player.style/microvideo@0.0.4) (2024-06-17)\n\n\n### Bug Fixes\n\n* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.0.2...@player.style/microvideo@0.0.3) (2024-06-14)\n\n\n### Bug Fixes\n\n* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/microvideo-v0.0.1...@player.style/microvideo@0.0.2) (2024-06-14)\n\n\n### Features\n\n* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))\n\n\n### Bug Fixes\n\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n"
  },
  {
    "path": "themes/microvideo/package.json",
    "content": "{\n  \"name\": \"@player.style/microvideo\",\n  \"version\": \"0.2.0\",\n  \"description\": \"This theme optimizes for shorter content that doesn't need the robust playback controls that longer content typically requires.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/microvideo\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/microvideo/template.html",
    "content": "<style>\n  :host {\n    --_primary-color: var(--media-primary-color, rgb(255 255 255 / 0.9));\n    --_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));\n    --_volume-range-expand-width: 70px;\n    --_volume-range-expand-height: 42px;\n\n    --media-icon-color: var(--_primary-color);\n    --media-range-thumb-background: var(--_primary-color);\n    --media-range-bar-color: var(--_primary-color);\n    --media-range-thumb-opacity: 0;\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-control-padding: 5px 5px;\n    --media-preview-time-text-shadow: none;\n    --media-tooltip-display: none;\n\n    color: var(--_primary-color);\n  }\n\n  @supports (color: color-mix(in srgb, red, blue)) {\n    :host {\n      --_secondary-color: color-mix(in srgb, var(--media-secondary-color, #000) 75%, transparent);\n    }\n  }\n\n  [disabled]:not(media-live-button) {\n    opacity: 60%;\n    cursor: not-allowed;\n  }\n\n  [breakpointsm] {\n    --media-control-padding: 9px 5px;\n  }\n\n  [breakpointmd] {\n    --media-control-padding: 9px 7px;\n  }\n\n  media-time-range,\n  media-live-button,\n  media-time-display,\n  media-text-display,\n  media-playback-rate-button[role='button'] {\n    color: inherit;\n  }\n\n  media-controller::part(centered-layer) {\n    display: grid;\n    justify-content: unset;\n    padding-bottom: 6px;\n  }\n\n  :host([streamtype=live]:not([targetlivewindow])) media-controller::part(centered-layer),\n  :host([mediastreamtype=live]:not([mediatargetlivewindow])) media-controller::part(centered-layer) {\n    padding-bottom: 0;\n  }\n\n  media-loading-indicator {\n    place-self: center;\n    /* Stack the grid items on top of each other */\n    grid-area: 1 / 1;\n  }\n\n  media-control-bar {\n    place-self: var(--_control-bar-place-self, end center);\n    grid-area: 1 / 1;\n    position: relative;\n    margin: 10px;\n    gap: 4px;\n    align-items: start;\n  }\n\n  :host([controlbarplace$=\"end\"]) media-control-bar {\n    align-items: end;\n  }\n\n  .control-group {\n    background: var(--_secondary-color);\n    position: relative;\n    display: inline-flex;\n    border-radius: 5px;\n  }\n\n  :host([controlbarvertical]) :is(media-control-bar, .control-group) {\n    flex-direction: column;\n    width: 40px;\n  }\n\n  .volume-group {\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n  }\n\n  :host([controlbarplace$=\"end\"]) .volume-group {\n    flex-direction: row;\n  }\n\n  :host([controlbarplace$=\"end\"]) .volume-group:first-child .volume-range-span {\n    --_volume-range-padding-left: 10px;\n  }\n\n  :host([controlbarvertical]) .volume-group {\n    flex-direction: column;\n  }\n\n  :host([controlbarvertical][controlbarplace^=\"end\"]) .volume-group {\n    flex-direction: column-reverse;\n  }\n\n  :host([controlbarvertical][controlbarplace^=\"end\"]) .volume-group:first-child .volume-range-span {\n    --_volume-range-padding-top: 10px;\n  }\n\n  .volume-range-span {\n    display: inline-flex;\n    position: relative;\n    overflow: hidden;\n    width: 0;\n    transition: width .2s ease-in-out , height .2s ease-in-out;\n  }\n\n  .volume-group:hover .volume-range-span,\n  [keyboardcontrol] .volume-group:focus-within .volume-range-span {\n    width: var(--_volume-range-expand-width);\n    padding-left: var(--_volume-range-padding-left);\n    padding-top: var(--_volume-range-padding-top);\n  }\n\n  :host([controlbarvertical]) .volume-range-span {\n    --_volume-range-padding-left: 0 !important;\n    display: inline-flex;\n    height: 0;\n  }\n\n  :host([controlbarvertical]) .volume-group:hover .volume-range-span,\n  :host([controlbarvertical]) [keyboardcontrol] .volume-group:focus-within .volume-range-span {\n    height: var(--_volume-range-expand-height);\n    width: auto;\n    max-width: 40px;\n  }\n\n  media-volume-range {\n    --media-range-track-border-radius: 2px;\n    --media-range-track-background: rgba(255, 255, 255, .2);\n\n    width: var(--_volume-range-expand-width);\n    display: var(--controls, var(--volume-range, inline-block));\n    border-radius: 5px;\n  }\n\n  :host([controlbarvertical]) media-volume-range {\n    width: var(--_volume-range-expand-height);\n    transform: rotate(-90deg);\n  }\n\n  media-control-bar:has(.volume-group:hover),\n  [keyboardcontrol] media-control-bar:has(.volume-group:focus-within) {\n    top: var(--_control-bar-offset-top, 0);\n    left: var(--_control-bar-offset-left, - var(--_volume-range-expand-width));\n  }\n\n  :host([controlbarplace$=\"start\"]),\n  :host([controlbarplace$=\"end\"]) {\n    --_control-bar-offset-left: 0;\n  }\n\n  :host([controlbarvertical]) {\n    --_control-bar-offset-left: 0;\n  }\n\n  :host([controlbarvertical][controlbarplace^=\"center\"]) {\n    --_control-bar-offset-top: - var(--_volume-range-expand-height);\n  }\n\n  media-time-range {\n    --media-range-track-height: 6px;\n    --media-range-track-transition: height .1s linear;\n    --media-range-track-background: rgba(20, 20, 30, .25);\n    --media-time-range-buffered-color: rgba(20, 20, 30, .3);\n    --media-range-track-box-shadow: 0 -1px 0 rgba(20, 20, 30, .07);\n    --media-range-padding-left: 0;\n    --media-range-padding-right: 0;\n    --media-preview-time-background: var(--_secondary-color);\n    --media-preview-box-margin: 0 0 3px;\n\n    display: var(--controls, var(--time-range, inline-block));\n    width: 100%;\n    height: 10px;\n    bottom: -2px;\n  }\n\n  media-live-button {\n    --media-control-background: var(--_secondary-color);\n    --media-control-hover-background: var(--_secondary-color);\n    border-radius: 5px;\n  }\n\n  media-live-button::before {\n    content: '';\n    width: 5px;\n  }\n\n  media-live-button::after {\n    content: '';\n    width: 7px;\n  }\n\n  /* Turn some buttons off by default */\n  media-seek-backward-button {\n    display: var(--media-control-display, var(--media-seek-backward-button-display, none));\n  }\n\n  media-seek-forward-button {\n    display: var(--media-control-display, var(--media-seek-forward-button-display, none));\n  }\n\n  media-pip-button {\n    display: var(--media-control-display, var(--media-pip-button-display, none));\n  }\n</style>\n\n<template partial=\"PlayButton\">\n  <media-play-button\n    part=\"play button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"play\">\n      <path d=\"m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z\" />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"pause\">\n      <path\n        d=\"M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z\"\n      />\n    </svg>\n  </media-play-button>\n</template>\n\n<template partial=\"SeekBackwardButton\">\n  <media-seek-backward-button\n    seekoffset=\"{{backwardseekoffset ?? 10}}\"\n    part=\"seek-backward button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 22 24\" slot=\"icon\">\n      <path d=\"M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z\" />\n      <text class=\"value\" transform=\"translate(2.5 21)\" style=\"font-size: 8px; font-family: 'ArialMT', 'Arial'\">\n        {{backwardseekoffset ?? 10}}\n      </text>\n    </svg>\n  </media-seek-backward-button>\n</template>\n\n<template partial=\"SeekForwardButton\">\n  <media-seek-forward-button\n    seekoffset=\"{{forwardseekoffset ?? 10}}\"\n    part=\"seek-forward button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 22 24\" slot=\"icon\">\n      <path d=\"M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z\" />\n      <text class=\"value\" transform=\"translate(10 21)\" style=\"font-size: 8px; font-family: 'ArialMT', 'Arial'\">\n        {{forwardseekoffset ?? 10}}\n      </text>\n    </svg>\n  </media-seek-forward-button>\n</template>\n\n<template partial=\"MuteButton\">\n  <media-mute-button part=\"mute button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"high\">\n      <path\n        d=\"m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"medium\">\n      <path\n        d=\"m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"low\">\n      <path\n        d=\"m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"off\">\n      <path\n        d=\"m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z\"\n      />\n    </svg>\n  </media-mute-button>\n</template>\n\n<template partial=\"CaptionsButton\">\n  <media-captions-button\n    part=\"captions button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"on\">\n      <path\n        d=\"M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"off\">\n      <path\n        d=\"M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z\"\n      />\n    </svg>\n  </media-captions-button>\n</template>\n\n<template partial=\"PipButton\">\n  <media-pip-button part=\"pip button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"enter\">\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"exit\">\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z\"\n      />\n    </svg>\n  </media-pip-button>\n</template>\n\n<template partial=\"AirplayButton\">\n  <media-airplay-button part=\"airplay button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"icon\">\n      <path\n        d=\"M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z\"\n      />\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\"\n      />\n    </svg>\n  </media-airplay-button>\n</template>\n\n<template partial=\"CastButton\">\n  <media-cast-button part=\"cast button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"enter\">\n      <path d=\"M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z\" />\n      <path d=\"M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z\" />\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"exit\">\n      <path d=\"M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z\" />\n      <path d=\"M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z\" />\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\"\n      />\n      <path d=\"M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z\" />\n    </svg>\n  </media-cast-button>\n</template>\n\n<template partial=\"FullscreenButton\">\n  <media-fullscreen-button\n    part=\"fullscreen button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"enter\">\n      <path\n        d=\"M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"exit\">\n      <path\n        d=\"M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z\"\n      />\n    </svg>\n  </media-fullscreen-button>\n</template>\n\n<template partial=\"LiveButton\">\n  <media-live-button\n    part=\"live seek-live button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <span slot=\"text\">Live</span>\n  </media-live-button>\n</template>\n\n<template partial=\"TimeRange\">\n  <media-time-range\n    part=\"time range\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  ></media-time-range>\n</template>\n\n<template partial=\"VolumeRange\">\n  <span class=\"volume-range-span\">\n    <media-volume-range\n      part=\"volume range\"\n      disabled=\"{{disabled}}\"\n      aria-disabled=\"{{disabled}}\"\n    ></media-volume-range>\n  </span>\n</template>\n\n<!--\n  controlbarplace targets the place-self CSS property of the controlbar.\n  e.g. controlbarplace=\"center center\" will center the controlbar.\n-->\n\n<media-controller\n  style=\"--_control-bar-place-self:{{controlbarplace ?? 'unset'}}\"\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-loading-indicator slot=\"centered-chrome\" noautohide></media-loading-indicator>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <template if=\"streamtype == 'on-demand'\">\n\n    <media-control-bar slot=\"centered-chrome\">\n      <div class=\"control-group\">\n        {{>PlayButton}}\n        {{>SeekBackwardButton}}\n        {{>SeekForwardButton}}\n        <span class=\"volume-group\">\n          {{>MuteButton}}\n          {{>VolumeRange}}\n        </span>\n        {{>CaptionsButton}}\n        {{>AirplayButton}}\n        {{>CastButton}}\n        {{>PipButton}}\n        {{>FullscreenButton}}\n      </div>\n    </media-control-bar>\n    {{>TimeRange}}\n\n  </template>\n\n  <template if=\"streamtype == 'live'\">\n\n    <template if=\"!targetlivewindow\">\n\n      <media-control-bar slot=\"centered-chrome\">\n        {{>LiveButton}}\n        <div class=\"control-group\">\n          <span class=\"volume-group\">\n            {{>MuteButton}}\n            {{>VolumeRange}}\n          </span>\n          {{>CaptionsButton}}\n          {{>AirplayButton}}\n          {{>CastButton}}\n          {{>PipButton}}\n          {{>FullscreenButton}}\n        </div>\n      </media-control-bar>\n\n    </template>\n\n    <template if=\"targetlivewindow > 0\">\n\n      <media-control-bar slot=\"centered-chrome\">\n        {{>LiveButton}}\n        <div class=\"control-group\">\n          {{>PlayButton}}\n          {{>SeekBackwardButton}}\n          {{>SeekForwardButton}}\n          <span class=\"volume-group\">\n            {{>MuteButton}}\n            {{>VolumeRange}}\n          </span>\n          {{>CaptionsButton}}\n          {{>AirplayButton}}\n          {{>CastButton}}\n          {{>PipButton}}\n          {{>FullscreenButton}}\n        </div>\n      </media-control-bar>\n      {{>TimeRange}}\n\n    </template>\n\n  </template>\n\n  <slot></slot>\n\n</media-controller>\n"
  },
  {
    "path": "themes/minimal/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.2.1](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.2.0...@player.style/minimal@0.2.1) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.2.0](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.1.1...@player.style/minimal@0.2.0) (2025-10-01)\n\n\n### Features\n\n* :minimal theme video title ([#203](https://github.com/muxinc/player.style/issues/203)) ([a01e1a0](https://github.com/muxinc/player.style/commit/a01e1a0a31d861186e002ee0b1b48dd99cd31957))\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.1.0...@player.style/minimal@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.11...@player.style/minimal@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.10...@player.style/minimal@0.0.11) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.9...@player.style/minimal@0.0.10) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.8...@player.style/minimal@0.0.9) (2024-10-08)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.7...@player.style/minimal@0.0.8) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.6...@player.style/minimal@0.0.7) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.5...@player.style/minimal@0.0.6) (2024-08-15)\n\n\n### Bug Fixes\n\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.4...@player.style/minimal@0.0.5) (2024-06-17)\n\n\n### Bug Fixes\n\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.1 to ^0.0.2\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.3...@player.style/minimal@0.0.4) (2024-06-17)\n\n\n### Bug Fixes\n\n* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.0.2...@player.style/minimal@0.0.3) (2024-06-14)\n\n\n### Bug Fixes\n\n* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/minimal-v0.0.1...@player.style/minimal@0.0.2) (2024-06-14)\n\n\n### Features\n\n* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))\n\n\n### Bug Fixes\n\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n"
  },
  {
    "path": "themes/minimal/package.json",
    "content": "{\n  \"name\": \"@player.style/minimal\",\n  \"version\": \"0.2.1\",\n  \"description\": \"This theme pares down the Mux Player experience to the bare bones controls viewers need, ideal for those that want a simpler player experience.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/minimal\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/minimal/template.html",
    "content": "<style>\n  :host {\n    --_primary-color: var(--media-primary-color, #fff);\n    --_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));\n\n    --media-icon-color: var(--_primary-color);\n    --media-range-thumb-background: var(--_primary-color);\n    --media-range-bar-color: var(--_primary-color);\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-range-track-border-radius: 3px;\n    --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);\n    --media-range-track-background: rgba(255, 255, 255, 0.5);\n    --media-range-thumb-opacity: 0;\n    --media-preview-thumbnail-border-radius: 2px;\n    --media-tooltip-display: none;\n\n    color: var(--_primary-color);\n  }\n\n  @supports (color: color-mix(in srgb, red, blue)) {\n    :host {\n      --_secondary-color: color-mix(in srgb, var(--media-secondary-color, #000) 75%, transparent);\n    }\n  }\n\n  media-control-bar {\n    --media-control-padding: 2px;\n    background: var(--_secondary-color);\n    align-items: center;\n    height: 30px;\n    border-radius: 4px;\n    margin: 0 5px 5px;\n    padding-inline: 2px;\n  }\n\n  media-controller[breakpointsm] media-control-bar {\n    --media-control-padding: 4px;\n    height: 38px;\n    border-radius: 8px;\n    padding-inline: 5px;\n  }\n\n  media-controller[breakpointmd] media-control-bar {\n    height: 46px;\n    margin: 0 8px 8px;\n  }\n\n  media-controller[breakpointlg] media-control-bar,\n  media-controller[breakpointxl] media-control-bar {\n    padding-inline: 7px;\n  }\n\n  .live-controls-left {\n    margin-right: auto;\n  }\n\n  media-time-range,\n  media-live-button,\n  media-time-display,\n  media-text-display,\n  media-playback-rate-button[role='button'] {\n    color: inherit;\n  }\n\n  [disabled]:not(media-live-button) {\n    opacity: 60%;\n    cursor: not-allowed;\n  }\n\n  ${/* Turn some buttons off by default */''}\n  media-seek-backward-button {\n    display: var(--media-control-display, var(--media-seek-backward-button-display, none));\n  }\n\n  media-seek-forward-button {\n    display: var(--media-control-display, var(--media-seek-forward-button-display, none));\n  }\n\n  media-pip-button {\n    display: var(--media-control-display, var(--media-pip-button-display, none));\n  }\n</style>\n\n<template partial=\"PlayButton\">\n  <media-play-button part=\"play button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"play\">\n      <path d=\"m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z\" />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"pause\">\n      <path\n        d=\"M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z\"\n      />\n    </svg>\n  </media-play-button>\n</template>\n\n<template partial=\"MuteButton\">\n  <media-mute-button part=\"mute button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"high\">\n      <path\n        d=\"m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"medium\">\n      <path\n        d=\"m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"low\">\n      <path\n        d=\"m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"off\">\n      <path\n        d=\"m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z\"\n      />\n    </svg>\n  </media-mute-button>\n</template>\n\n<template partial=\"CaptionsButton\">\n  <media-captions-button part=\"captions button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"on\">\n      <path\n        d=\"M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"off\">\n      <path\n        d=\"M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z\"\n      />\n    </svg>\n  </media-captions-button>\n</template>\n\n<template partial=\"FullscreenButton\">\n  <media-fullscreen-button part=\"fullscreen button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"enter\">\n      <path\n        d=\"M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" slot=\"exit\">\n      <path\n        d=\"M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z\"\n      />\n    </svg>\n  </media-fullscreen-button>\n</template>\n\n<template partial=\"LiveButton\">\n  <media-live-button part=\"live seek-live button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <span slot=\"text\" style=\"font-weight: normal\">Live</span>\n    <svg\n      slot=\"indicator\"\n      width=\"8\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style=\"width: 8px; height: 8px; margin-right: 2px\"\n    >\n      <rect width=\"8\" height=\"8\" rx=\"2\" />\n    </svg>\n  </media-live-button>\n</template>\n\n<template partial=\"PipButton\">\n  <media-pip-button part=\"pip button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"enter\">\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"exit\">\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z\"\n      />\n    </svg>\n  </media-pip-button>\n</template>\n\n<template partial=\"SeekBackwardButton\">\n  <media-seek-backward-button\n    seekoffset=\"{{backwardseekoffset ?? 10}}\"\n    part=\"seek-backward button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 22 24\" slot=\"icon\">\n      <path d=\"M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z\" />\n      <text class=\"value\" transform=\"translate(2.5 21)\" style=\"font-size: 8px; font-family: 'ArialMT', 'Arial'\">\n        {{backwardseekoffset ?? 10}}\n      </text>\n    </svg>\n  </media-seek-backward-button>\n</template>\n\n<template partial=\"SeekForwardButton\">\n  <media-seek-forward-button\n    seekoffset=\"{{forwardseekoffset ?? 10}}\"\n    part=\"seek-forward button\"\n    disabled=\"{{disabled}}\"\n    aria-disabled=\"{{disabled}}\"\n  >\n    <svg aria-hidden=\"true\" viewBox=\"0 0 22 24\" slot=\"icon\">\n      <path d=\"M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z\" />\n      <text class=\"value\" transform=\"translate(10 21)\" style=\"font-size: 8px; font-family: 'ArialMT', 'Arial'\">\n        {{forwardseekoffset ?? 10}}\n      </text>\n    </svg>\n  </media-seek-forward-button>\n</template>\n\n<template partial=\"AirplayButton\">\n  <media-airplay-button part=\"airplay button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"icon\">\n      <path d=\"M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z\" />\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\"\n      />\n    </svg>\n  </media-airplay-button>\n</template>\n\n<template partial=\"CastButton\">\n  <media-cast-button part=\"cast button\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\">\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"enter\">\n      <path d=\"M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z\" />\n      <path d=\"M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z\" />\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\"\n      />\n    </svg>\n    <svg aria-hidden=\"true\" viewBox=\"0 0 26 24\" slot=\"exit\">\n      <path d=\"M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z\" />\n      <path d=\"M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z\" />\n      <path\n        d=\"M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\"\n      />\n      <path d=\"M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z\" />\n    </svg>\n  </media-cast-button>\n</template>\n\n<template partial=\"TimeRange\">\n  <media-time-range part=\"time range\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\"></media-time-range>\n</template>\n\n<template partial=\"VolumeRange\">\n  <media-volume-range part=\"volume range\" disabled=\"{{disabled}}\" aria-disabled=\"{{disabled}}\"></media-volume-range>\n</template>\n\n<media-controller\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-loading-indicator slot=\"centered-chrome\" noautohide></media-loading-indicator>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <div slot=\"top-chrome\">\n    <template if=\"videotitle\">\n      <template if=\"videotitle != true\">\n        <media-text-display part=\"top title display\" class=\"title-display\">{{videotitle}}</media-text-display>\n      </template>\n    </template>\n    <template if=\"!videotitle\">\n      <template if=\"title\">\n        <media-text-display part=\"top title display\" class=\"title-display\">{{title}}</media-text-display>\n      </template>\n    </template>\n  </div>\n\n  <template if=\"streamtype == 'on-demand'\">\n    <template if=\"!breakpointsm\">\n      <media-control-bar>\n        {{>PlayButton}} {{>TimeRange}} {{>MuteButton}} {{>CaptionsButton}} {{>FullscreenButton}}\n      </media-control-bar>\n    </template>\n\n    <template if=\"breakpointsm\">\n      <media-control-bar>\n        {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeRange}}\n        <template if=\"breakpointmd\">\n          <media-time-display></media-time-display>\n        </template>\n        {{>MuteButton}} {{>VolumeRange}} {{>CaptionsButton}} {{>AirplayButton}} {{>CastButton}} {{>PipButton}}\n        {{>FullscreenButton}}\n      </media-control-bar>\n    </template>\n  </template>\n\n  <template if=\"streamtype == 'live'\">\n    <media-control-bar>\n      <div class=\"live-controls-left\">\n        {{>LiveButton}}\n        <template if=\"!targetlivewindow\">\n          <template if=\"breakpointsm\">\n            <media-time-display></media-time-display>\n          </template>\n        </template>\n      </div>\n      <template if=\"targetlivewindow > 0\">\n        <template if=\"breakpointsm\">{{>TimeRange}}</template>\n      </template>\n      <div class=\"live-controls-right\">\n        <template if=\"targetlivewindow > 0\"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>\n        {{>MuteButton}} {{>VolumeRange}} {{>CaptionsButton}} {{>AirplayButton}} {{>CastButton}} {{>PipButton}}\n        {{>FullscreenButton}}\n      </div>\n    </media-control-bar>\n  </template>\n\n  <slot></slot>\n</media-controller>\n"
  },
  {
    "path": "themes/notflix/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/notflix@0.1.1...@player.style/notflix@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/notflix@0.1.0...@player.style/notflix@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/notflix@0.0.8...@player.style/notflix@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/notflix@0.0.7...@player.style/notflix@0.0.8) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/notflix@0.0.6...@player.style/notflix@0.0.7) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/notflix-v0.0.5...@player.style/notflix@0.0.6) (2024-10-08)\n\n\n### Features\n\n* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n"
  },
  {
    "path": "themes/notflix/package.json",
    "content": "{\n  \"name\": \"@player.style/notflix\",\n  \"version\": \"0.1.2\",\n  \"description\": \"This player theme is inspired by Netflix's video player.\",\n  \"author\": \"@heff\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/notflix\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/notflix/template.html",
    "content": "<style>\n  :host {\n    --_primary-color: var(--media-primary-color, #fff);\n    --_secondary-color: var(--media-secondary-color, rgb(0 0 0 / 0.75));\n    --_accent-color: var(--media-accent-color, #ea3323);\n    --_panel-background: rgb(38 38 38);\n\n    --media-control-hover-background: transparent;\n    --media-control-background: transparent;\n    --media-tooltip-display: none;\n  }\n\n  media-controller {\n    --media-primary-color: var(--_primary-color, #fff);\n    --media-font-size: 10px;\n    font-size: var(--media-font-size);\n  }\n\n  media-controller[breakpointmd] {\n    --media-font-size: 12px;\n  }\n\n  media-controller[breakpointlg] {\n    --media-font-size: 14px;\n  }\n\n  media-controller[breakpointxl] {\n    --media-font-size: 16px;\n  }\n\n  media-time-range,\n  media-volume-range {\n    --media-range-thumb-background: var(--_accent-color);\n    --media-range-bar-color: var(--_accent-color);\n    --media-range-track-background: gray;\n    --media-range-thumb-height: 1em;\n    --media-range-thumb-width: 1em;\n  }\n\n  .time-bar {\n    height: 0.4em;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 0.4em;\n    box-sizing: border-box;\n  }\n\n  .time-bar media-time-display {\n    padding: 0 0.4em 0 0;\n  }\n\n  media-time-range {\n    --media-time-range-buffered-color: #d3d3d3;\n    --media-range-track-pointer-border-right: 2px solid #fff;\n    --media-range-track-height: 0.25em;\n    --media-preview-border-radius: 0;\n    --media-preview-background: rgb(38, 38, 38);\n    --media-preview-thumbnail-box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1em;\n    --media-preview-time-padding: 0.5em 9px;\n    --media-box-margin: 0 0 0.8em;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  media-time-range:hover {\n    --media-range-track-height: 0.4em;\n  }\n\n  media-control-bar {\n    --media-button-icon-transition: transform 0.2s ease;\n    padding: 0 0.4em;\n  }\n\n  media-control-bar *:hover {\n    --media-button-icon-transform: scale(1.3);\n    --media-button-icon-transition: transform 0.15s;\n  }\n\n  [role='button'] {\n    --media-button-icon-height: 2em;\n    padding: 1.5em 0.9em;\n  }\n\n  .control-bar-title {\n    flex-shrink: 999;\n    margin: 0 auto;\n    font-size: 1.2em;\n    white-space: nowrap;\n    justify-content: space-around;\n    overflow: hidden;\n  }\n\n  media-controller[breakpointmd] .control-bar-title {\n    width: auto;\n    padding-right: 15%;\n  }\n\n  .media-volume-wrapper {\n    position: relative;\n  }\n\n  .media-volume-range-wrapper {\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n      opacity 0.1s,\n      visibility 0.1s;\n    transform: rotate(-90deg) translateY(50%);\n    transform-origin: 0 0;\n    position: absolute;\n    top: 0.7em;\n    left: 0.5em;\n  }\n\n  media-mute-button:hover + .media-volume-range-wrapper,\n  media-mute-button:focus + .media-volume-range-wrapper,\n  media-mute-button:focus-within + .media-volume-range-wrapper,\n  .media-volume-range-wrapper:hover,\n  .media-volume-range-wrapper:focus,\n  .media-volume-range-wrapper:focus-within {\n    transition:\n      opacity 0.1s 0.2s,\n      visibility 0s;\n    opacity: 1;\n    visibility: visible;\n  }\n\n  media-volume-range {\n    --media-range-track-height: 0.5em;\n    --media-range-padding: 1em;\n    --media-control-background: var(--_panel-background);\n    --media-control-hover-background: var(--_panel-background);\n    width: 7em;\n    height: 1.5em;\n    border-radius: 2px;\n  }\n\n  media-captions-menu-button svg {\n    translate: 0 3%;\n  }\n\n  [role='menu'] {\n    --media-control-background: var(--_panel-background);\n    --media-font-size: 1.2em;\n    margin-bottom: 15px;\n    right: 10px;\n    border-radius: 2px;\n  }\n\n  [breakpointmd] [role='menu'] {\n    margin-bottom: 25px;\n    right: 15px;\n  }\n\n  [role='menu'] [slot='header'] {\n    padding: 0.4em 2em 0 1em;\n    font-weight: 500;\n    letter-spacing: 0.01rem;\n    font-size: 1.2em;\n    line-height: 1.5;\n    border: none;\n  }\n\n  [role='menu']::part(menu-item) {\n    padding: 0.2em 2em 0.2em 1em;\n    font-size: 1em;\n    line-height: 1.7;\n    color: rgb(179 179 179);\n  }\n\n  [role='menu']::part(menu-item checked) {\n    color: white;\n  }\n</style>\n\n<media-controller\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n  breakpoints=\"sm:384 md:576 lg:768 xl:1440\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-loading-indicator slot=\"centered-chrome\" noautohide></media-loading-indicator>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <div class=\"time-bar\">\n    <media-time-range></media-time-range>\n    <media-time-display remaining></media-time-display>\n  </div>\n  <media-control-bar>\n    <media-play-button>\n      <svg aria-hidden=\"true\" slot=\"play\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          d=\"M5 2.69127C5 1.93067 5.81547 1.44851 6.48192 1.81506L23.4069 11.1238C24.0977 11.5037 24.0977 12.4963 23.4069 12.8762L6.48192 22.1849C5.81546 22.5515 5 22.0693 5 21.3087V2.69127Z\"\n        ></path>\n      </svg>\n      <svg aria-hidden=\"true\" slot=\"pause\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.5 3C4.22386 3 4 3.22386 4 3.5V20.5C4 20.7761 4.22386 21 4.5 21H9.5C9.77614 21 10 20.7761 10 20.5V3.5C10 3.22386 9.77614 3 9.5 3H4.5ZM14.5 3C14.2239 3 14 3.22386 14 3.5V20.5C14 20.7761 14.2239 21 14.5 21H19.5C19.7761 21 20 20.7761 20 20.5V3.5C20 3.22386 19.7761 3 19.5 3H14.5Z\"\n        ></path>\n      </svg>\n    </media-play-button>\n    <media-seek-backward-button seekoffset=\"10\">\n      <svg aria-hidden=\"true\" slot=\"icon\" fill=\"none\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11.0198 2.04817C13.3222 1.8214 15.6321 2.39998 17.5557 3.68532C19.4794 4.97066 20.8978 6.88324 21.5694 9.09717C22.241 11.3111 22.1242 13.6894 21.2388 15.8269C20.3534 17.9643 18.7543 19.7286 16.714 20.8192C14.6736 21.9098 12.3182 22.2592 10.0491 21.8079C7.77999 21.3565 5.73759 20.1323 4.26989 18.3439C2.80219 16.5555 2 14.3136 2 12L0 12C-2.74181e-06 14.7763 0.962627 17.4666 2.72387 19.6127C4.48511 21.7588 6.93599 23.2278 9.65891 23.7694C12.3818 24.3111 15.2083 23.8918 17.6568 22.5831C20.1052 21.2744 22.0241 19.1572 23.0866 16.5922C24.149 14.0273 24.2892 11.1733 23.4833 8.51661C22.6774 5.85989 20.9752 3.56479 18.6668 2.02238C16.3585 0.479973 13.5867 -0.214321 10.8238 0.0578004C8.71195 0.265799 6.70517 1.02858 5 2.2532V1H3V5C3 5.55228 3.44772 6 4 6H8V4H5.99999C7.45608 2.90793 9.19066 2.22833 11.0198 2.04817ZM2 4V7H5V9H1C0.447715 9 0 8.55228 0 8V4H2ZM14.125 16C13.5466 16 13.0389 15.8586 12.6018 15.5758C12.1713 15.2865 11.8385 14.8815 11.6031 14.3609C11.3677 13.8338 11.25 13.2135 11.25 12.5C11.25 11.7929 11.3677 11.1758 11.6031 10.6488C11.8385 10.1217 12.1713 9.71671 12.6018 9.43388C13.0389 9.14463 13.5466 9 14.125 9C14.7034 9 15.2077 9.14463 15.6382 9.43388C16.0753 9.71671 16.4116 10.1217 16.6469 10.6488C16.8823 11.1758 17 11.7929 17 12.5C17 13.2135 16.8823 13.8338 16.6469 14.3609C16.4116 14.8815 16.0753 15.2865 15.6382 15.5758C15.2077 15.8586 14.7034 16 14.125 16ZM14.125 14.6501C14.5151 14.6501 14.8211 14.4637 15.043 14.0909C15.2649 13.7117 15.3759 13.1814 15.3759 12.5C15.3759 11.8186 15.2649 11.2916 15.043 10.9187C14.8211 10.5395 14.5151 10.3499 14.125 10.3499C13.7349 10.3499 13.4289 10.5395 13.207 10.9187C12.9851 11.2916 12.8741 11.8186 12.8741 12.5C12.8741 13.1814 12.9851 13.7117 13.207 14.0909C13.4289 14.4637 13.7349 14.6501 14.125 14.6501ZM8.60395 15.8554V10.7163L7 11.1405V9.81956L10.1978 9.01928V15.8554H8.60395Z\"\n        ></path>\n      </svg>\n    </media-seek-backward-button>\n    <media-seek-forward-button seekoffset=\"10\">\n      <svg aria-hidden=\"true\" slot=\"icon\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M6.4443 3.68532C8.36795 2.39998 10.6778 1.8214 12.9802 2.04817C14.8093 2.22833 16.5439 2.90793 18 4H16V6H20C20.5523 6 21 5.55229 21 5V1H19V2.2532C17.2948 1.02859 15.2881 0.2658 13.1762 0.057802C10.4133 -0.214319 7.64154 0.479975 5.33316 2.02238C3.02478 3.56479 1.32262 5.85989 0.516718 8.51661C-0.289188 11.1733 -0.148981 14.0273 0.913451 16.5922C1.97588 19.1572 3.8948 21.2744 6.34325 22.5831C8.79169 23.8918 11.6182 24.3111 14.3411 23.7694C17.064 23.2278 19.5149 21.7588 21.2761 19.6127C23.0374 17.4666 24 14.7763 24 12L22 12C22 14.3136 21.1978 16.5555 19.7301 18.3439C18.2624 20.1323 16.22 21.3565 13.9509 21.8079C11.6818 22.2592 9.32641 21.9098 7.28604 20.8192C5.24567 19.7286 3.64657 17.9643 2.76121 15.8269C1.87585 13.6894 1.75901 11.3111 2.4306 9.09718C3.10219 6.88324 4.52065 4.97067 6.4443 3.68532ZM22 4V7H19V9H23C23.5523 9 24 8.55229 24 8V4H22ZM12.6018 15.5758C13.0389 15.8586 13.5466 16 14.125 16C14.7034 16 15.2078 15.8586 15.6382 15.5758C16.0753 15.2865 16.4116 14.8815 16.6469 14.3609C16.8823 13.8338 17 13.2135 17 12.5C17 11.7929 16.8823 11.1759 16.6469 10.6488C16.4116 10.1217 16.0753 9.71671 15.6382 9.43389C15.2078 9.14463 14.7034 9 14.125 9C13.5466 9 13.0389 9.14463 12.6018 9.43389C12.1713 9.71671 11.8385 10.1217 11.6031 10.6488C11.3677 11.1759 11.25 11.7929 11.25 12.5C11.25 13.2135 11.3677 13.8338 11.6031 14.3609C11.8385 14.8815 12.1713 15.2865 12.6018 15.5758ZM15.043 14.0909C14.8211 14.4637 14.5151 14.6501 14.125 14.6501C13.7349 14.6501 13.429 14.4637 13.207 14.0909C12.9851 13.7117 12.8741 13.1814 12.8741 12.5C12.8741 11.8186 12.9851 11.2916 13.207 10.9187C13.429 10.5395 13.7349 10.3499 14.125 10.3499C14.5151 10.3499 14.8211 10.5395 15.043 10.9187C15.2649 11.2916 15.3759 11.8186 15.3759 12.5C15.3759 13.1814 15.2649 13.7117 15.043 14.0909ZM8.60395 10.7163V15.8554H10.1978V9.01929L7 9.81956V11.1405L8.60395 10.7163Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </media-seek-forward-button>\n    <div class=\"media-volume-wrapper\">\n      <media-mute-button>\n        <svg aria-hidden=\"true\" slot=\"high\" fill=\"none\" role=\"img\" viewBox=\"0 0 24 24\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M24 12C24 8.28693 22.525 4.72597 19.8995 2.10046L18.4853 3.51468C20.7357 5.76511 22 8.81736 22 12C22 15.1826 20.7357 18.2348 18.4853 20.4852L19.8995 21.8995C22.525 19.2739 24 15.713 24 12ZM11 3.99995C11 3.59549 10.7564 3.23085 10.3827 3.07607C10.009 2.92129 9.57889 3.00685 9.29289 3.29285L4.58579 7.99995H1C0.447715 7.99995 0 8.44767 0 8.99995V15C0 15.5522 0.447715 16 1 16H4.58579L9.29289 20.7071C9.57889 20.9931 10.009 21.0786 10.3827 20.9238C10.7564 20.7691 11 20.4044 11 20V3.99995ZM5.70711 9.70706L9 6.41417V17.5857L5.70711 14.2928L5.41421 14H5H2V9.99995H5H5.41421L5.70711 9.70706ZM16.0001 12C16.0001 10.4087 15.368 8.88254 14.2428 7.75732L12.8285 9.17154C13.5787 9.92168 14.0001 10.9391 14.0001 12C14.0001 13.0608 13.5787 14.0782 12.8285 14.8284L14.2428 16.2426C15.368 15.1174 16.0001 13.5913 16.0001 12ZM17.0709 4.92889C18.9462 6.80426 19.9998 9.3478 19.9998 12C19.9998 14.6521 18.9462 17.1957 17.0709 19.071L15.6567 17.6568C17.157 16.1565 17.9998 14.1217 17.9998 12C17.9998 9.87823 17.157 7.8434 15.6567 6.34311L17.0709 4.92889Z\"\n          ></path>\n        </svg>\n        <svg aria-hidden=\"true\" slot=\"medium\" role=\"img\" viewBox=\"0 0 24 24\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M11 4.00003C11 3.59557 10.7564 3.23093 10.3827 3.07615C10.009 2.92137 9.57889 3.00692 9.29289 3.29292L4.58579 8.00003H1C0.447715 8.00003 0 8.44774 0 9.00003V15C0 15.5523 0.447715 16 1 16H4.58579L9.29289 20.7071C9.57889 20.9931 10.009 21.0787 10.3827 20.9239C10.7564 20.7691 11 20.4045 11 20V4.00003ZM5.70711 9.70714L9 6.41424V17.5858L5.70711 14.2929L5.41421 14H5H2V10H5H5.41421L5.70711 9.70714ZM17.0709 4.92897C18.9462 6.80433 19.9998 9.34787 19.9998 12C19.9998 14.6522 18.9462 17.1957 17.0709 19.0711L15.6567 17.6569C17.157 16.1566 17.9998 14.1218 17.9998 12C17.9998 9.87831 17.157 7.84347 15.6567 6.34318L17.0709 4.92897ZM14.2428 7.7574C15.368 8.88262 16.0001 10.4087 16.0001 12C16.0001 13.5913 15.368 15.1175 14.2428 16.2427L12.8285 14.8285C13.5787 14.0783 14.0001 13.0609 14.0001 12C14.0001 10.9392 13.5787 9.92176 12.8285 9.17161L14.2428 7.7574Z\"\n          ></path>\n        </svg>\n        <svg aria-hidden=\"true\" slot=\"low\" role=\"img\" viewBox=\"0 0 24 24\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M11 4.00003C11 3.59557 10.7564 3.23093 10.3827 3.07615C10.009 2.92137 9.57889 3.00692 9.29289 3.29292L4.58579 8.00003H1C0.447715 8.00003 0 8.44774 0 9.00003V15C0 15.5523 0.447715 16 1 16H4.58579L9.29289 20.7071C9.57889 20.9931 10.009 21.0787 10.3827 20.9239C10.7564 20.7691 11 20.4045 11 20V4.00003ZM5.70711 9.70714L9 6.41424V17.5858L5.70711 14.2929L5.41421 14H5H2V10H5H5.41421L5.70711 9.70714ZM16.0001 12C16.0001 10.4087 15.368 8.88262 14.2428 7.7574L12.8285 9.17161C13.5787 9.92176 14.0001 10.9392 14.0001 12C14.0001 13.0609 13.5787 14.0783 12.8285 14.8285L14.2428 16.2427C15.368 15.1175 16.0001 13.5913 16.0001 12Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n        <svg aria-hidden=\"true\" slot=\"off\" role=\"img\" viewBox=\"0 0 24 24\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M11 4.00003C11 3.59557 10.7564 3.23093 10.3827 3.07615C10.009 2.92137 9.57889 3.00692 9.29289 3.29292L4.58579 8.00003H1C0.447715 8.00003 0 8.44774 0 9.00003V15C0 15.5523 0.447715 16 1 16H4.58579L9.29289 20.7071C9.57889 20.9931 10.009 21.0787 10.3827 20.9239C10.7564 20.7691 11 20.4045 11 20V4.00003ZM5.70711 9.70714L9 6.41424V17.5858L5.70711 14.2929L5.41421 14H5H2V10H5H5.41421L5.70711 9.70714ZM15.2929 9.70714L17.5858 12L15.2929 14.2929L16.7071 15.7071L19 13.4142L21.2929 15.7071L22.7071 14.2929L20.4142 12L22.7071 9.70714L21.2929 8.29292L19 10.5858L16.7071 8.29292L15.2929 9.70714Z\"\n          ></path>\n        </svg>\n      </media-mute-button>\n      <div class=\"media-volume-range-wrapper\">\n        <media-volume-range></media-volume-range>\n      </div>\n    </div>\n    <media-text-display class=\"control-bar-title\">\n      <slot name=\"title\">\n        <template if=\"mediatitle\"> {{mediatitle}} </template>\n      </slot>\n    </media-text-display>\n    <media-captions-menu-button>\n      <svg aria-hidden=\"true\" slot=\"icon\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M1 3C1 2.44772 1.44772 2 2 2H22C22.5523 2 23 2.44772 23 3V17C23 17.5523 22.5523 18 22 18H19V21C19 21.3688 18.797 21.7077 18.4719 21.8817C18.1467 22.0557 17.7522 22.0366 17.4453 21.8321L11.6972 18H2C1.44772 18 1 17.5523 1 17V3ZM3 4V16H12H12.3028L12.5547 16.1679L17 19.1315V17V16H18H21V4H3ZM10 9L5 9V7L10 7V9ZM19 11H14V13H19V11ZM12 13L5 13V11L12 11V13ZM19 7H12V9H19V7Z\"\n        ></path>\n      </svg>\n    </media-captions-menu-button>\n    <media-captions-menu anchor=\"auto\" hidden>\n      <div slot=\"header\">Subtitles</div>\n    </media-captions-menu>\n    <media-fullscreen-button>\n      <svg aria-hidden=\"true\" slot=\"enter\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M0 5C0 3.89543 0.895431 3 2 3H9V5H2V9H0V5ZM22 5H15V3H22C23.1046 3 24 3.89543 24 5V9H22V5ZM2 15V19H9V21H2C0.895431 21 0 20.1046 0 19V15H2ZM22 19V15H24V19C24 20.1046 23.1046 21 22 21H15V19H22Z\"\n        ></path>\n      </svg>\n      <svg aria-hidden=\"true\" slot=\"exit\" role=\"img\" viewBox=\"0 0 24 24\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M24 8H19V3H17V9V10H18H24V8ZM0 16H5V21H7V15V14H6H0V16ZM7 10H6H0V8H5V3H7V9V10ZM19 21V16H24V14H18H17V15V21H19Z\"\n        ></path>\n      </svg>\n    </media-fullscreen-button>\n  </media-control-bar>\n</media-controller>\n"
  },
  {
    "path": "themes/reelplay/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.1.1...@player.style/reelplay@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.1.0...@player.style/reelplay@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.0.5...@player.style/reelplay@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.0.4...@player.style/reelplay@0.0.5) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.0.3...@player.style/reelplay@0.0.4) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.0.2...@player.style/reelplay@0.0.3) (2024-10-08)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/reelplay-v0.0.1...@player.style/reelplay@0.0.2) (2024-09-25)\n\n\n### Features\n\n* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n"
  },
  {
    "path": "themes/reelplay/assets/fonts.css",
    "content": "@font-face {\n    font-family: pixelify;\n    src: url('./PixelifySans-Regular.ttf') format('truetype');\n}"
  },
  {
    "path": "themes/reelplay/package.json",
    "content": "{\n  \"name\": \"@player.style/reelplay\",\n  \"version\": \"0.1.2\",\n  \"description\": \"Reelplay is a nostalgic media player inspired by media players of a bygone era\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/reelplay\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/reelplay/template.html",
    "content": "<style>\n  :host {\n    --_primary-color: var(--media-primary-color, #fff);\n    --_secondary-color: var(--media-secondary-color, rgb(38 38 38 / 0.75));\n    --_accent-color: var(--media-accent-color, #fff);\n    --media-icon-color: var(--_primary-color);\n    --media-control-background: #ccc;\n    --media-control-hover-background: transparent;\n    --media-control-height: 1.2em;\n    --media-tooltip-display: none;\n    image-rendering: pixelated;\n    font-size: 16px;\n    color: var(--_primary-color);\n    container: media-theme-instaplay / inline-size;\n    --_play-active-image: url('<%= await base64(\"./assets/play-active.png\") %>');\n    --_play-inactive-image: url('<%= await base64(\"./assets/play-inactive.png\") %>');\n    --_play-green-image: url('<%= await base64(\"./assets/play-green.png\") %>');\n    --_pause-active-image: url('<%= await base64(\"./assets/pause-active.png\") %>');\n    --_pause-inactive-image: url('<%= await base64(\"./assets/pause-inactive.png\") %>');\n    --_stop-active-image: url('<%= await base64(\"./assets/stop-active.png\") %>');\n    --_stop-inactive-image: url('<%= await base64(\"./assets/stop-inactive.png\") %>');\n    --_speaker-active-image: url('<%= await base64(\"./assets/speaker-active.png\") %>');\n    --_speaker-inactive-image: url('<%= await base64(\"./assets/speaker-inactive-2.png\") %>');\n    --_stop-green-image: url('<%= await base64(\"./assets/stop-green.png\") %>');\n    --_range-thumb-image: url('<%= await base64(\"./assets/range-thumb.png\") %>');\n    --_seek-image: url('<%= await base64(\"./assets/seek.png\") %>');\n    --_handle-image: url('<%= await base64(\"./assets/handle.png\") %>');\n    --_embossed: 0 -1px 0 0 #7b7b7b, /* Top part of top border */ 0 -2px 0 0 #000,\n      /* Bottom part of top border */ -1px 0 0 0 #7b7b7b, /* Left border color */ 1px 0 0 0 white,\n      /* Right border color */ 0 1px 0 0 white;\n    /* Bottom border color */\n  }\n\n  .spacer {\n    flex: 1;\n  }\n\n  media-controller {\n    display: block;\n    overflow: hidden;\n  }\n\n  div[slot='top-chrome'],\n  media-control-bar {\n    width: 100%;\n  }\n\n  media-control-bar {\n    border-top: 1px solid #fff;\n    box-shadow: 0 -1px 0 0 #7b7b7b;\n  }\n\n  media-control-bar {\n    padding-left: 20px;\n    background: #ccc 5px center var(--_handle-image) no-repeat;\n  }\n\n  media-time-range {\n    width: 100%;\n    --media-range-thumb-transform: translateX(-6px);\n  }\n\n  media-time-range[mediacurrenttime^='0'],\n  media-time-range[mediacurrenttime^='1.'],\n  media-time-range[mediacurrenttime^='2.'] {\n    --media-range-thumb-transform: translateX(6px);\n  }\n\n  media-volume-range {\n    --media-range-thumb-transform: translateX(-6px);\n  }\n\n  media-volume-range[mediavolume='0'],\n  media-volume-range[mediavolume^='0.0'] {\n    --media-range-thumb-transform: translateX(6px);\n  }\n\n  media-volume-range[mediavolume^='0.1'] {\n    --media-range-thumb-transform: translateX(5px);\n  }\n\n  media-volume-range[mediavolume^='0.2'] {\n    --media-range-thumb-transform: translateX(3px);\n  }\n\n  media-volume-range[mediavolume^='0.3'] {\n    --media-range-thumb-transform: translateX(2px);\n  }\n\n  media-volume-range[mediavolume^='0.4'] {\n    --media-range-thumb-transform: translateX(1px);\n  }\n\n  media-volume-range[mediavolume^='0.5'] {\n    --media-range-thumb-transform: translateX(0px);\n  }\n\n  media-volume-range[mediavolume^='0.6'] {\n    --media-range-thumb-transform: translateX(1px);\n  }\n\n  media-volume-range[mediavolume^='0.7'] {\n    --media-range-thumb-transform: translateX(-2px);\n  }\n\n  media-volume-range[mediavolume^='0.8'] {\n    --media-range-thumb-transform: translateX(-3px);\n  }\n\n  media-volume-range[mediavolume^='0.9'] {\n    --media-range-thumb-transform: translateX(-4px);\n  }\n\n  media-volume-range,\n  media-time-range {\n    --media-range-track-background: linear-gradient(\n          to right,\n          #000 1px,\n          transparent 1px,\n          transparent 7px\n        )\n        7px 50% / 7px 3px repeat-x,\n      #c6c6c6;\n\n    --media-range-track-height: 13px;\n    --media-range-track-border-radius: 0;\n    --media-range-track-box-shadow: var(--_embossed);\n\n    --media-range-thumb-transition: transform 0.1s;\n    --media-range-thumb-background: 0 0 var(--_range-thumb-image);\n    --media-range-thumb-width: 13px;\n    --media-range-thumb-height: 13px;\n    --media-range-bar-color: linear-gradient(to right, #000 1px, transparent 1px, transparent 7px)\n        7px 50% / 7px 3px repeat-x,\n      #008484;\n    --media-range-thumb-border-radius: 0;\n  }\n\n  media-time-range::part(preview-box) {\n    /* Add more space so thumb doesn't hide preview. */\n    --media-preview-box-margin: 0 0 20px;\n    display: grid;\n  }\n\n  media-time-range::part(appearance) {\n    color: red;\n  }\n\n  media-preview-thumbnail,\n  media-preview-time-display {\n    grid-area: 1 / 1;\n  }\n\n  media-preview-time-display {\n    place-self: end center;\n    position: relative;\n    line-height: 2;\n  }\n\n  media-play-button.play div[slot='play'] {\n    width: 14px;\n    height: 13px;\n    background: 0 0 var(--_play-active-image);\n  }\n\n  media-play-button.play div[slot='pause'] {\n    width: 14px;\n    height: 13px;\n    background: 0 0 var(--_play-inactive-image);\n    cursor: not-allowed;\n  }\n\n  media-play-button.pause div[slot='play'] {\n    width: 14px;\n    height: 13px;\n    background: 0 0 var(--_pause-inactive-image);\n    cursor: not-allowed;\n  }\n\n  media-play-button.pause div[slot='pause'] {\n    width: 14px;\n    height: 13px;\n    background: 0 0 var(--_pause-active-image);\n  }\n\n  media-play-button.stop div[slot='play'] {\n    width: 14px;\n    height: 13px;\n    background: 0 0 var(--_stop-inactive-image);\n    cursor: not-allowed;\n  }\n\n  media-play-button.stop div[slot='pause'] {\n    width: 14px;\n    height: 13px;\n    background: 0 0 var(--_stop-active-image);\n  }\n\n  media-play-button.status {\n    background-color: #000;\n    margin-right: 3px;\n    --media-button-padding: 1px;\n  }\n\n  media-play-button.status div[slot='play'] {\n    width: 13px;\n    height: 13px;\n    background: 0 0 var(--_stop-green-image) no-repeat;\n  }\n\n  media-play-button.status div[slot='pause'] {\n    width: 13px;\n    height: 13px;\n    background: 0 0 var(--_play-green-image);\n  }\n\n  media-seek-backward-button,\n  media-seek-forward-button {\n    --media-button-padding: 0;\n  }\n\n  media-seek-backward-button span[slot='icon'] {\n    width: 4px;\n    height: 7px;\n    background: 0 0 var(--_seek-image);\n  }\n\n  media-seek-forward-button span[slot='icon'] {\n    width: 4px;\n    height: 7px;\n    background: 0 0 var(--_seek-image);\n    transform: rotate(180deg);\n  }\n\n  media-mute-button span[slot='off'] {\n    width: 11px;\n    height: 16px;\n    background: 0 0 var(--_speaker-inactive-image);\n  }\n\n  media-mute-button span[slot='low'],\n  media-mute-button span[slot='medium'],\n  media-mute-button span[slot='high'] {\n    width: 11px;\n    height: 16px;\n    background: 0 0 var(--_speaker-active-image);\n  }\n\n  media-time-display {\n    background: black;\n    color: #00ff00;\n    --media-font-family: monaco;\n    --media-font-weight: 300;\n    --media-font-size: 13px;\n    --media-control-padding: 0;\n  }\n\n  .bottom-bar {\n    border-top: 1px solid #fff; /* Top pixel color */\n    box-shadow: 0 -1px 0 0 #7b7b7b; /* Bottom pixel color */\n    background: #ccc 5px center var(--_handle-image) no-repeat;\n    width: 100%;\n    padding: 4px 20px;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    gap: 3px;\n    font-family: monaco;\n  }\n\n  .bottom-bar > div {\n    background: black;\n    padding: 5px;\n    align-self: stretch;\n    box-shadow: var(--_embossed);\n    color: #00ff00;\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n  }\n\n  .bottom-bar a {\n    color: #00ff00;\n  }\n\n  .top-bar {\n    font-family: monaco, sans-serif;\n    height: 18px;\n    width: 100%;\n    background: linear-gradient(to right, #000084, #0884ce);\n    color: #fff;\n    line-height: 1;\n    font-size: 11px;\n    display: flex;\n    align-items: center;\n    padding-left: 10px;\n    box-sizing: border-box;\n  }\n</style>\n\n<media-controller\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <div slot=\"top-chrome\">\n    <div class=\"top-bar\">\n      <span>ReelPlay: Welcome!</span>\n    </div>\n\n    <media-control-bar>\n      <media-play-button class=\"play\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n\n      <media-play-button class=\"pause\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n\n      <media-play-button class=\"stop\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n\n      <media-seek-backward-button>\n        <span slot=\"icon\"></span>\n      </media-seek-backward-button>\n\n      <media-time-range noautohide>\n        <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n        <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n      </media-time-range>\n\n      <media-seek-forward-button>\n        <span slot=\"icon\"></span>\n      </media-seek-forward-button>\n\n      <div class=\"spacer\"></div>\n      <media-mute-button>\n        <span slot=\"high\"></span>\n        <span slot=\"medium\"></span>\n        <span slot=\"low\"></span>\n        <span slot=\"off\"></span>\n      </media-mute-button>\n      <media-volume-range></media-volume-range>\n    </media-control-bar>\n  </div>\n\n  <div class=\"bottom-bar\">\n    <div>\n      <media-play-button class=\"status\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n      <span>32.1 Kbps</span>\n    </div>\n\n    <div>\n      <media-time-display showduration></media-time-display>\n    </div>\n\n    <div>\n      <span>Theme by @davekiss</span>\n    </div>\n    <div>\n      <span>Powered by <a href=\"https://mux.com\" title=\"Mux\">Mux</a></span>\n    </div>\n  </div>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n\n  <slot></slot>\n</media-controller>\n"
  },
  {
    "path": "themes/sutro/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.2.1](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.2.0...@player.style/sutro@0.2.1) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.2.0](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.1.1...@player.style/sutro@0.2.0) (2025-08-22)\n\n\n### Features\n\n* Sutro bump for ([75f730b](https://github.com/muxinc/player.style/commit/75f730b3682856b6ec74880dbb6ecb942aa93a63))\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.1.0...@player.style/sutro@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.8...@player.style/sutro@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n* custom colors + hide empty settings menu item ([#85](https://github.com/muxinc/player.style/issues/85)) ([d2815b3](https://github.com/muxinc/player.style/commit/d2815b34b023e7e5829326528fc51c895f42fca7))\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.7...@player.style/sutro@0.0.8) (2024-12-02)\n\n\n### Bug Fixes\n\n* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.6...@player.style/sutro@0.0.7) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.5...@player.style/sutro@0.0.6) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.4...@player.style/sutro@0.0.5) (2024-10-08)\n\n\n### Features\n\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.3...@player.style/sutro@0.0.4) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.0.2...@player.style/sutro@0.0.3) (2024-09-10)\n\n\n### Bug Fixes\n\n* custom colors + hide empty settings menu item ([#85](https://github.com/muxinc/player.style/issues/85)) ([d2815b3](https://github.com/muxinc/player.style/commit/d2815b34b023e7e5829326528fc51c895f42fca7))\n* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/sutro-v0.0.1...@player.style/sutro@0.0.2) (2024-08-15)\n\n\n### Bug Fixes\n\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n"
  },
  {
    "path": "themes/sutro/package.json",
    "content": "{\n  \"name\": \"@player.style/sutro\",\n  \"version\": \"0.2.1\",\n  \"description\": \"A sleek and modern theme lovingly named after our favorite SF TV antenna, which is neither sleek nor modern.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/sutro\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/sutro/template.html",
    "content": "<!-- Sutro -->\n<style>\n  :host {\n    --_primary-color: var(--media-primary-color, #fff);\n    --_secondary-color: var(--media-secondary-color, transparent);\n    --_accent-color: var(--media-accent-color, #fff);\n  }\n\n  media-controller {\n    --base: 18px;\n\n    font-size: calc(0.75 * var(--base));\n    font-family: Roboto, Arial, sans-serif;\n    --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n\n    --media-primary-color: #fff;\n    --media-secondary-color: transparent;\n    --media-menu-background: rgba(28, 28, 28, 0.6);\n    --media-text-color: var(--_primary-color);\n    --media-control-hover-background: var(--media-secondary-color);\n\n    --media-range-track-height: calc(0.125 * var(--base));\n    --media-range-thumb-height: var(--base);\n    --media-range-thumb-width: var(--base);\n    --media-range-thumb-border-radius: var(--base);\n\n    --media-control-height: calc(2 * var(--base));\n  }\n\n  media-controller[breakpointmd] {\n    --base: 20px;\n  }\n\n  /* The biggest size controller is tied to going fullscreen\n      instead of a player width. */\n  media-controller[mediaisfullscreen] {\n    --base: 24px;\n  }\n\n  .media-button {\n    --media-control-hover-background: var(--_secondary-color);\n    --media-tooltip-background: rgb(28 28 28 / .24);\n    --media-text-content-height: 1.2;\n    --media-tooltip-padding: .7em 1em;\n    --media-tooltip-distance: 8px;\n    --media-tooltip-container-margin: 18px;\n    position: relative;\n    padding: 0;\n    opacity: 0.9;\n    transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);\n  }\n\n  .media-button svg {\n    fill: none;\n    stroke: var(--_primary-color);\n    stroke-width: 1;\n    stroke-linecap: 'round';\n    stroke-linejoin: 'round';\n  }\n\n  svg .svg-shadow {\n    stroke: #000;\n    stroke-opacity: 0.15;\n    stroke-width: 2px;\n    fill: none;\n  }\n</style>\n\n<media-controller\n  breakpoints=\"md:480\"\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <slot name=\"centered-chrome\" slot=\"centered-chrome\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <!-- Controls Gradient -->\n  <style>\n    .media-gradient-bottom {\n      position: absolute;\n      bottom: 0;\n      width: 100%;\n      height: calc(8 * var(--base));\n      pointer-events: none;\n    }\n\n    .media-gradient-bottom::before {\n      content: '';\n      --gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,\n        hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,\n        hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,\n        hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,\n        hsl(0 0% 0%) 100%;\n\n      position: absolute;\n      inset: 0;\n      opacity: 0.7;\n      background: linear-gradient(to bottom, var(--gradient-steps));\n    }\n  </style>\n  <div class=\"media-gradient-bottom\"></div>\n\n  <!-- Settings Menu -->\n  <style>\n    media-settings-menu {\n      --media-menu-icon-height: 20px;\n      --media-menu-item-icon-height: 20px;\n      --media-settings-menu-min-width: calc(10 * var(--base));\n      --media-menu-transform-in: translateY(0) scale(1);\n      --media-menu-transform-out: translateY(20px) rotate(3deg) scale(1);\n      padding-block: calc(0.15 * var(--base));\n      margin-right: 10px;\n      margin-bottom: 17px;\n      border-radius: 8px;\n      z-index: 2;\n      user-select: none;\n    }\n\n    media-settings-menu-item,\n    [role='menu']::part(menu-item) {\n      --media-icon-color: var(--_primary-color);\n      margin-inline: calc(0.45 * var(--base));\n      height: calc(1.6 * var(--base));\n      font-size: calc(0.7 * var(--base));\n      font-weight: 400;\n      padding: 0;\n      padding-left: calc(0.4 * var(--base));\n      padding-right: calc(0.1 * var(--base));\n      border-radius: 6px;\n      text-shadow: none;\n    }\n\n    [slot='submenu']::part(back button) {\n      font-size: calc(0.7 * var(--base));\n    }\n\n    media-settings-menu-item:hover {\n      --media-icon-color: #000;\n      color: #000;\n      background-color: #fff;\n    }\n\n    media-settings-menu-item:hover [slot='submenu']::part(menu-item),\n    [slot='submenu']::part(back indicator) {\n      --media-icon-color: var(--_primary-color);\n    }\n\n    media-settings-menu-item:hover [slot='submenu']::part(menu-item):hover {\n      --media-icon-color: #000;\n      color: #000;\n      background-color: #fff;\n    }\n\n    media-settings-menu-item[submenusize='0'] {\n      display: none;\n    }\n\n    /* Also hide if only 'Auto' is added. */\n    .quality-settings[submenusize='1'] {\n      display: none;\n    }\n  </style>\n  <media-settings-menu hidden anchor=\"auto\">\n    <media-settings-menu-item>\n      Playback Speed\n      <media-playback-rate-menu slot=\"submenu\" hidden>\n        <div slot=\"title\">Playback Speed</div>\n      </media-playback-rate-menu>\n    </media-settings-menu-item>\n    <media-settings-menu-item class=\"quality-settings\">\n      Quality\n      <media-rendition-menu slot=\"submenu\" hidden>\n        <div slot=\"title\">Quality</div>\n      </media-rendition-menu>\n    </media-settings-menu-item>\n    <media-settings-menu-item>\n      Subtitles/CC\n      <media-captions-menu slot=\"submenu\" hidden>\n        <div slot=\"title\">Subtitles/CC</div>\n      </media-captions-menu>\n    </media-settings-menu-item>\n  </media-settings-menu>\n\n  <!-- Control Bar -->\n  <style>\n    media-control-bar {\n      position: absolute;\n      height: calc(2 * var(--base));\n      line-height: calc(2 * var(--base));\n      bottom: var(--base);\n      left: var(--base);\n      right: var(--base);\n    }\n  </style>\n  <media-control-bar>\n    <!-- Play/Pause -->\n    <style>\n      @keyframes bounce-scale-play {\n        0% {\n          transform: scale(0.75, 0.75);\n        }\n        50% {\n          transform: scale(115%, 115%);\n        }\n        100% {\n          transform: scale(1, 1);\n        }\n      }\n\n      .media-button {\n        border-radius: 25%;\n        backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(0);\n        -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(0);\n        transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s, box-shadow 0.3s;\n      }\n\n      .media-button:hover {\n        /* background-color: rgba(0, 0, 0, 0.05); */\n        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;\n        /* hue-rotate(120deg) */\n        backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);\n        -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);\n        transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;\n      }\n\n      media-play-button #icon-play {\n        opacity: 0;\n        transform-box: view-box;\n        transform-origin: center center;\n        transform: scale(0.5, 0.5);\n        transition: all 0.5s;\n      }\n\n      media-play-button[mediapaused] #icon-play {\n        opacity: 1;\n        transform: scale(1, 1);\n        animation: 0.35s bounce-scale-play ease-in-out;\n      }\n\n      @keyframes bounce-pause-left {\n        0% {\n          font-size: 10px;\n        }\n        50% {\n          font-size: 3px;\n        }\n        100% {\n          font-size: 4px;\n        }\n      }\n\n      @keyframes bounce-pause-right {\n        0% {\n          font-size: 10px;\n          transform: translateX(-8px);\n        }\n        50% {\n          font-size: 3px;\n          transform: translateX(1px);\n        }\n        100% {\n          font-size: 4px;\n          transform: translateX(0);\n        }\n      }\n\n      media-play-button #pause-left,\n      media-play-button #pause-right {\n        /* Using font-size to animate height because using scale was resulting in unexpected positioning */\n        font-size: 4px;\n        opacity: 1;\n        transform: translateX(0);\n        transform-box: view-box;\n      }\n\n      media-play-button:not([mediapaused]) #pause-left {\n        animation: 0.3s bounce-pause-left ease-out;\n      }\n\n      media-play-button:not([mediapaused]) #pause-right {\n        animation: 0.3s bounce-pause-right ease-out;\n      }\n\n      media-play-button[mediapaused] #pause-left,\n      media-play-button[mediapaused] #pause-right {\n        opacity: 0;\n        font-size: 10px;\n      }\n\n      media-play-button[mediapaused] #pause-right {\n        transform-origin: right center;\n        transform: translateX(-8px);\n      }\n    </style>\n    <media-play-button mediapaused class=\"media-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n        <!-- <use class=\"svg-shadow\" xlink:href=\"#icon-play\"></use> -->\n        <g>\n          <path\n            id=\"icon-play\"\n            d=\"M20.7131 14.6976C21.7208 15.2735 21.7208 16.7265 20.7131 17.3024L12.7442 21.856C11.7442 22.4274 10.5 21.7054 10.5 20.5536L10.5 11.4464C10.5 10.2946 11.7442 9.57257 12.7442 10.144L20.7131 14.6976Z\"\n          />\n        </g>\n        <!-- <use class=\"svg-shadow\" xlink:href=\"#icon-pause\"></use> -->\n        <g id=\"icon-pause\">\n          <rect id=\"pause-left\" x=\"10.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n          <rect id=\"pause-right\" x=\"17.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n        </g>\n      </svg>\n    </media-play-button>\n\n    <!-- Volume/Mute -->\n    <style>\n      media-mute-button {\n        position: relative;\n      }\n\n      media-mute-button .muted-path {\n        transition: clip-path 0.2s ease-out;\n      }\n\n      media-mute-button #muted-path-2 {\n        transition-delay: 0.2s;\n      }\n\n      media-mute-button .muted-path {\n        clip-path: inset(0);\n      }\n\n      media-mute-button:not([mediavolumelevel='off']) #muted-path-1 {\n        clip-path: inset(0 0 100% 0);\n      }\n\n      media-mute-button:not([mediavolumelevel='off']) #muted-path-2 {\n        clip-path: inset(0 0 100% 0);\n      }\n\n      media-mute-button .muted-path {\n        opacity: 0;\n      }\n\n      media-mute-button[mediavolumelevel='off'] .muted-path {\n        opacity: 1;\n      }\n\n      media-mute-button .vol-path {\n        opacity: 1;\n        transition: opacity 0.4s;\n      }\n\n      media-mute-button[mediavolumelevel='off'] .vol-path {\n        opacity: 0;\n      }\n\n      media-mute-button[mediavolumelevel='low'] #vol-high-path,\n      media-mute-button[mediavolumelevel='medium'] #vol-high-path {\n        opacity: 0;\n      }\n\n      media-volume-range {\n        --media-range-track-background: rgba(255, 255, 255, 0.2);\n        --media-range-thumb-opacity: 0;\n      }\n\n      @keyframes volume-in {\n        0% {\n          visibility: hidden;\n          opacity: 0;\n          transform: translateY(50%) rotate(1deg);\n        }\n        50% {\n          visibility: visible;\n          opacity: 1;\n          transform: rotate(-2deg);\n        }\n        100% {\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0) rotate(0deg);\n        }\n      }\n\n      @keyframes volume-out {\n        0% {\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0) rotate(0deg);\n        }\n        50% {\n          opacity: 1;\n          transform: rotate(0deg);\n        }\n        100% {\n          visibility: hidden;\n          opacity: 0;\n          transform: translateY(50%) rotate(1deg);\n        }\n      }\n\n      .media-volume-range-wrapper {\n        opacity: 0;\n        visibility: hidden;\n\n        position: absolute;\n        top: -100%;\n        left: calc(2 * var(--base));\n\n        width: calc(10 * var(--base));\n        height: calc(2.5 * var(--base));\n        transform-origin: center left;\n      }\n\n      media-volume-range {\n        /*\n          Hide range and animation until mediavolume attribute is set.\n          'visibility' didn't work, hovering over media-volume-range-wrapper\n          caused it to show. Should require mute-button:hover.\n        */\n        opacity: 0;\n        transition: opacity 0s 1s;\n\n        width: calc(10 * var(--base));\n        height: var(--base);\n        padding: 0;\n        border-radius: calc(0.25 * var(--base));\n        overflow: hidden;\n        background: rgba(0, 0, 0, 0.2);\n\n        --media-range-bar-color: var(--media-accent-color);\n\n        --media-range-padding-left: 0;\n        --media-range-padding-right: 0;\n\n        --media-range-track-width: calc(10 * var(--base));\n        --media-range-track-height: var(--base);\n        --media-range-track-border-radius: calc(0.25 * var(--base));\n        --media-range-track-backdrop-filter: blur(10px) brightness(80%);\n\n        /* This makes zero volume still show some of the bar.\n           I can't make the bar have curved corners otherwise though. */\n        --media-range-thumb-width: var(--base);\n        --media-range-thumb-border-radius: calc(0.25 * var(--base));\n\n        /* The Sutro design has a gradient like this, but not sure I like it */\n        /* --media-range-thumb-box-shadow: 10px 0px 20px rgba(255, 255, 255, 0.5); */\n      }\n\n      media-volume-range[mediavolume] {\n        opacity: 1;\n      }\n\n      [keyboardcontrol] media-volume-range:focus {\n        /* TODO: This appears to be creating a think outline */\n        outline: 1px solid rgba(27, 127, 204, 0.9);\n      }\n\n      media-mute-button:hover + .media-volume-range-wrapper,\n      media-mute-button:focus + .media-volume-range-wrapper,\n      media-mute-button:focus-within + .media-volume-range-wrapper,\n      .media-volume-range-wrapper:hover,\n      .media-volume-range-wrapper:focus,\n      .media-volume-range-wrapper:focus-within {\n        animation: 0.3s volume-in forwards ease-out;\n      }\n\n      .media-volume-range-wrapper:not(:hover, :focus-within) {\n        animation: 0.3s volume-out ease-out;\n      }\n\n      /* When keyboard navigating the volume range and wrapper need to always be visible\n        otherwise focus state can't land on it. This is ok when keyboard navigating because\n        the hovering issues aren't a concern, unless you happen to be keyboard AND mouse navigating.\n      */\n      [keyboardcontrol] .media-volume-range-wrapper,\n      [keyboardcontrol] .media-volume-range-wrapper:focus-within,\n      [keyboardcontrol] .media-volume-range-wrapper:focus-within media-volume-range {\n        visibility: visible;\n      }\n    </style>\n    <media-mute-button class=\"media-button\" notooltip>\n      <use class=\"svg-shadow\" xlink:href=\"#vol-paths\"></use>\n      <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n        <g id=\"vol-paths\">\n          <path\n            id=\"speaker-path\"\n            d=\"M16.5 20.486v-8.972c0-1.537-2.037-2.08-2.802-.745l-1.026 1.79a2.5 2.5 0 0 1-.8.85l-1.194.78A1.5 1.5 0 0 0 10 15.446v1.11c0 .506.255.978.678 1.255l1.194.782a2.5 2.5 0 0 1 .8.849l1.026 1.79c.765 1.334 2.802.792 2.802-.745Z\"\n          />\n          <path\n            id=\"vol-low-path\"\n            class=\"vol-path\"\n            d=\"M18.5 18C19.6046 18 20.5 17.1046 20.5 16C20.5 14.8954 19.6046 14 18.5 14\"\n          />\n          <path\n            id=\"vol-high-path\"\n            class=\"vol-path\"\n            d=\"M18 21C20.7614 21 23 18.7614 23 16C23 13.2386 20.7614 11 18 11\"\n          />\n          <path id=\"muted-path-1\" class=\"muted-path\" d=\"M23 18L19 14\" />\n          <path id=\"muted-path-2\" class=\"muted-path\" d=\"M23 14L19 18\" />\n        </g>\n      </svg>\n    </media-mute-button>\n    <div class=\"media-volume-range-wrapper\">\n      <media-volume-range></media-volume-range>\n    </div>\n\n    <!-- Time Display -->\n    <style>\n      media-time-display {\n        position: relative;\n        padding: calc(0.5 * var(--base));\n        font-size: calc(0.7 * var(--base));\n        border-radius: calc(0.5 * var(--base));\n      }\n\n      media-controller[breakpointmd] media-time-display:not([showduration]) {\n        display: none;\n      }\n\n      media-controller:not([breakpointmd]) media-time-display[showduration] {\n        display: none;\n      }\n    </style>\n    <media-time-display></media-time-display>\n    <media-time-display showduration></media-time-display>\n\n    <!-- Time Range / Progress Bar -->\n    <style>\n      media-time-range {\n        height: calc(2 * var(--base));\n        border-radius: calc(0.25 * var(--base));\n\n        --media-range-track-backdrop-filter: invert(10%) blur(5px) brightness(110%);\n        --media-range-track-background: rgba(255, 255, 255, 0.2);\n        --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);\n        --media-range-track-border-radius: calc(0.25 * var(--base));\n\n        --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);\n        --media-range-bar-color: var(--media-accent-color);\n\n        --media-range-thumb-background: var(--media-accent-color);\n        --media-range-thumb-transition: opacity 0.1s linear;\n        --media-range-thumb-opacity: 0;\n\n        --media-preview-thumbnail-border: calc(0.125 * var(--base)) solid #fff;\n        --media-preview-thumbnail-border-radius: calc(0.5 * var(--base));\n        --media-preview-thumbnail-min-width: calc(8 * var(--base));\n        --media-preview-thumbnail-max-width: calc(10 * var(--base));\n        --media-preview-thumbnail-min-height: calc(5 * var(--base));\n        --media-preview-thumbnail-max-height: calc(7 * var(--base));\n        --media-preview-box-margin: 0 0 -10px;\n      }\n      media-time-range:hover {\n        --media-range-thumb-opacity: 1;\n        --media-range-track-height: calc(0.25 * var(--base));\n      }\n\n      media-preview-thumbnail {\n        margin-bottom: 5px;\n      }\n\n      media-preview-chapter-display {\n        font-size: calc(0.6 * var(--base));\n        padding-block: 0;\n      }\n\n      media-preview-time-display {\n        font-size: calc(0.65 * var(--base));\n        padding-top: 0;\n      }\n    </style>\n    <media-time-range>\n      <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n      <media-preview-chapter-display slot=\"preview\"></media-preview-chapter-display>\n      <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n    </media-time-range>\n\n    <!-- Subtitles/CC Button -->\n    <style>\n      media-captions-button {\n        position: relative;\n      }\n\n      media-controller:not([breakpointmd]) media-captions-button {\n        display: none;\n      }\n\n      media-captions-button svg :is(path, rect) {\n        stroke: none;\n        fill: var(--_primary-color);\n      }\n\n      /* Disble the captions button when no subtitles are available */\n      media-captions-button:not([mediasubtitleslist]) svg {\n        opacity: 0.3;\n      }\n\n      media-captions-button #cc-underline {\n        opacity: 1;\n      }\n\n      media-captions-button[mediasubtitleslist][aria-checked='true'] #cc-underline {\n        opacity: 1;\n      }\n\n      media-captions-button #cc-underline {\n        transition: clip-path 0.15s ease-out;\n      }\n\n      media-captions-button #cc-underline {\n        clip-path: inset(0 100% 0 0);\n      }\n\n      media-captions-button[aria-checked='true'] #cc-underline {\n        clip-path: inset(0 0 0 0);\n      }\n    </style>\n    <media-captions-button class=\"media-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n        <use class=\"svg-shadow\" xlink:href=\"#cc-icon\"></use>\n        <g id=\"cc-icon\">\n          <path\n            class=\"cc-c\"\n            d=\"M15.6634 14.3574H14.5636C14.4985 14.0523 14.3847 13.7842 14.2221 13.5532C14.0624 13.3222 13.8673 13.1283 13.6367 12.9715C13.409 12.8118 13.1562 12.692 12.8783 12.6122C12.6004 12.5323 12.3107 12.4924 12.0091 12.4924C11.4592 12.4924 10.961 12.6264 10.5146 12.8945C10.0711 13.1625 9.71776 13.5575 9.45463 14.0794C9.19445 14.6012 9.06436 15.2414 9.06436 16C9.06436 16.7586 9.19445 17.3988 9.45463 17.9206C9.71776 18.4425 10.0711 18.8375 10.5146 19.1055C10.961 19.3736 11.4592 19.5076 12.0091 19.5076C12.3107 19.5076 12.6004 19.4677 12.8783 19.3878C13.1562 19.308 13.409 19.1896 13.6367 19.0328C13.8673 18.8731 14.0624 18.6778 14.2221 18.4468C14.3847 18.2129 14.4985 17.9449 14.5636 17.6426H15.6634C15.5806 18.0903 15.4298 18.491 15.2111 18.8446C14.9923 19.1982 14.7203 19.499 14.3951 19.7471C14.0698 19.9924 13.7047 20.1792 13.2996 20.3075C12.8976 20.4358 12.4674 20.5 12.0091 20.5C11.2345 20.5 10.5456 20.3175 9.94246 19.9525C9.33932 19.5875 8.8648 19.0684 8.51888 18.3954C8.17296 17.7224 8 16.924 8 16C8 15.076 8.17296 14.2776 8.51888 13.6046C8.8648 12.9316 9.33932 12.4125 9.94246 12.0475C10.5456 11.6825 11.2345 11.5 12.0091 11.5C12.4674 11.5 12.8976 11.5642 13.2996 11.6925C13.7047 11.8208 14.0698 12.009 14.3951 12.2571C14.7203 12.5024 14.9923 12.8018 15.2111 13.1554C15.4298 13.5062 15.5806 13.9068 15.6634 14.3574Z\"\n          />\n          <path\n            class=\"cc-c\"\n            d=\"M24 14.3574H22.9002C22.8351 14.0523 22.7213 13.7842 22.5587 13.5532C22.399 13.3222 22.2039 13.1283 21.9733 12.9715C21.7456 12.8118 21.4928 12.692 21.2149 12.6122C20.937 12.5323 20.6473 12.4924 20.3457 12.4924C19.7958 12.4924 19.2976 12.6264 18.8511 12.8945C18.4077 13.1625 18.0543 13.5575 17.7912 14.0794C17.531 14.6012 17.4009 15.2414 17.4009 16C17.4009 16.7586 17.531 17.3988 17.7912 17.9206C18.0543 18.4425 18.4077 18.8375 18.8511 19.1055C19.2976 19.3736 19.7958 19.5076 20.3457 19.5076C20.6473 19.5076 20.937 19.4677 21.2149 19.3878C21.4928 19.308 21.7456 19.1896 21.9733 19.0328C22.2039 18.8731 22.399 18.6778 22.5587 18.4468C22.7213 18.2129 22.8351 17.9449 22.9002 17.6426H24C23.9172 18.0903 23.7664 18.491 23.5476 18.8446C23.3289 19.1982 23.0569 19.499 22.7316 19.7471C22.4064 19.9924 22.0413 20.1792 21.6362 20.3075C21.2341 20.4358 20.804 20.5 20.3457 20.5C19.5711 20.5 18.8822 20.3175 18.279 19.9525C17.6759 19.5875 17.2014 19.0684 16.8555 18.3954C16.5095 17.7224 16.3366 16.924 16.3366 16C16.3366 15.076 16.5095 14.2776 16.8555 13.6046C17.2014 12.9316 17.6759 12.4125 18.279 12.0475C18.8822 11.6825 19.5711 11.5 20.3457 11.5C20.804 11.5 21.2341 11.5642 21.6362 11.6925C22.0413 11.8208 22.4064 12.009 22.7316 12.2571C23.0569 12.5024 23.3289 12.8018 23.5476 13.1554C23.7664 13.5062 23.9172 13.9068 24 14.3574Z\"\n          />\n          <rect id=\"cc-underline\" x=\"8\" y=\"23\" width=\"16\" height=\"1\" rx=\"0.5\" />\n        </g>\n      </svg>\n    </media-captions-button>\n\n    <!-- Settings Menu Button -->\n    <style>\n      media-settings-menu-button svg {\n        transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);\n        transform: rotateZ(0deg);\n      }\n      media-settings-menu-button[aria-expanded='true'] svg {\n        transform: rotateZ(30deg);\n      }\n    </style>\n    <media-settings-menu-button class=\"media-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n        <use class=\"svg-shadow\" xlink:href=\"#settings-icon\"></use>\n        <g id=\"settings-icon\">\n          <path\n            d=\"M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z\"\n          />\n          <path\n            d=\"M21.0176 13.0362L20.9715 12.9531C20.8445 12.7239 20.7797 12.4629 20.784 12.1982L20.8049 10.8997C20.8092 10.6343 20.675 10.3874 20.4545 10.2549L18.5385 9.10362C18.3186 8.97143 18.0472 8.9738 17.8293 9.10981L16.7658 9.77382C16.5485 9.90953 16.2999 9.98121 16.0465 9.98121H15.9543C15.7004 9.98121 15.4513 9.90922 15.2336 9.77295L14.1652 9.10413C13.9467 8.96728 13.674 8.96518 13.4535 9.09864L11.5436 10.2545C11.3242 10.3873 11.1908 10.6336 11.1951 10.8981L11.216 12.1982C11.2203 12.4629 11.1555 12.7239 11.0285 12.9531L10.9831 13.0351C10.856 13.2645 10.6715 13.4535 10.4493 13.5819L9.36075 14.2109C9.13763 14.3398 8.99942 14.5851 9 14.8511L9.00501 17.152C9.00559 17.4163 9.1432 17.6597 9.36476 17.7883L10.4481 18.4167C10.671 18.546 10.8559 18.7364 10.9826 18.9673L11.0313 19.0559C11.1565 19.284 11.2203 19.5431 11.2161 19.8059L11.1951 21.1003C11.1908 21.3657 11.325 21.6126 11.5456 21.7452L13.4615 22.8964C13.6814 23.0286 13.9528 23.0262 14.1707 22.8902L15.2342 22.2262C15.4515 22.0905 15.7001 22.0188 15.9535 22.0188H16.0457C16.2996 22.0188 16.5487 22.0908 16.7664 22.227L17.8348 22.8959C18.0534 23.0327 18.326 23.0348 18.5465 22.9014L20.4564 21.7455C20.6758 21.6127 20.8092 21.3664 20.8049 21.1019L20.784 19.8018C20.7797 19.5371 20.8445 19.2761 20.9715 19.0469L21.0169 18.9649C21.144 18.7355 21.3285 18.5465 21.5507 18.4181L22.6393 17.7891C22.8624 17.6602 23.0006 17.4149 23 17.1489L22.995 14.848C22.9944 14.5837 22.8568 14.3403 22.6352 14.2117L21.5493 13.5818C21.328 13.4534 21.1442 13.2649 21.0176 13.0362Z\"\n          />\n        </g>\n      </svg>\n    </media-settings-menu-button>\n\n    <!-- PIP/Mini Player Button -->\n    <style>\n      media-controller:not([breakpointmd]) media-pip-button {\n        display: none;\n      }\n    </style>\n    <media-pip-button class=\"media-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n        <use class=\"svg-shadow\" xlink:href=\"#pip-icon\"></use>\n        <g id=\"pip-icon\">\n          <path\n            d=\"M12 22H9.77778C9.34822 22 9 21.6162 9 21.1429V10.8571C9 10.3838 9.34822 10 9.77778 10L22.2222 10C22.6518 10 23 10.3838 23 10.8571V12.5714\"\n          />\n          <path\n            d=\"M15 21.5714V16.4286C15 16.1919 15.199 16 15.4444 16H22.5556C22.801 16 23 16.1919 23 16.4286V17V21.5714C23 21.8081 22.801 22 22.5556 22H20.3333H17.6667H15.4444C15.199 22 15 21.8081 15 21.5714Z\"\n          />\n        </g>\n      </svg>\n    </media-pip-button>\n\n    <!-- Airplay Button -->\n    <media-airplay-button class=\"media-button\">\n      <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\" slot=\"icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 20h1.722c.43 0 .778-.32.778-.714v-8.572c0-.394-.348-.714-.778-.714H9.778c-.43 0-.778.32-.778.714v1.429\"/>\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.5 20H9.778c-.43 0-.778-.32-.778-.714v-8.572c0-.394.348-.714.778-.714h12.444c.43 0 .778.32.778.714v1.429\"/>\n        <path stroke-linejoin=\"round\" d=\"m16 19 3.464 3.75h-6.928L16 19Z\"/>\n      </svg>\n    </media-airplay-button>\n\n    <!-- Cast Button -->\n    <media-cast-button class=\"media-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n        <use class=\"svg-shadow\" xlink:href=\"#cast-icon\"></use>\n        <g id=\"cast-icon\">\n          <path\n            d=\"M18.5 21.833h4.167c.46 0 .833-.373.833-.833V11a.833.833 0 0 0-.833-.833H9.333A.833.833 0 0 0 8.5 11v1.111m0 8.056c.92 0 1.667.746 1.667 1.666M8.5 17.667a4.167 4.167 0 0 1 4.167 4.166\"\n          />\n          <path d=\"M8.5 15.167a6.667 6.667 0 0 1 6.667 6.666\" />\n        </g>\n      </svg>\n    </media-cast-button>\n\n    <!-- Fullscreen Button -->\n    <style>\n      /* Having trouble getting @property to work in the shadow dom\n         to clean this up. Like https://codepen.io/luwes/pen/oNRyZyx */\n\n      media-fullscreen-button .fs-arrow {\n        translate: 0% 0%;\n      }\n      media-fullscreen-button:hover .fs-arrow {\n        animation: 0.35s up-left-bounce cubic-bezier(0.34, 1.56, 0.64, 1);\n      }\n      media-fullscreen-button:hover #fs-enter-top,\n      media-fullscreen-button:hover #fs-exit-bottom {\n        animation-name: up-right-bounce;\n      }\n\n      media-fullscreen-button:hover #fs-enter-bottom,\n      media-fullscreen-button:hover #fs-exit-top {\n        animation-name: down-left-bounce;\n      }\n\n      @keyframes up-left-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: -4% -4%;\n        }\n      }\n      @keyframes up-right-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: 4% -4%;\n        }\n      }\n      @keyframes down-left-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: -4% 4%;\n        }\n      }\n      @keyframes down-right-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: 4% 4%;\n        }\n      }\n    </style>\n    <media-fullscreen-button class=\"media-button\">\n      <svg slot=\"enter\" viewBox=\"0 0 32 32\">\n        <use class=\"svg-shadow\" xlink:href=\"#fs-enter-paths\"></use>\n        <g id=\"fs-enter-paths\">\n          <g id=\"fs-enter-top\" class=\"fs-arrow\">\n            <path d=\"M18 10H22V14\" />\n            <path d=\"M22 10L18 14\" />\n          </g>\n          <g id=\"fs-enter-bottom\" class=\"fs-arrow\">\n            <path d=\"M14 22L10 22V18\" />\n            <path d=\"M10 22L14 18\" />\n          </g>\n        </g>\n      </svg>\n      <svg slot=\"exit\" viewBox=\"0 0 32 32\">\n        <use class=\"svg-shadow\" xlink:href=\"#fs-exit-paths\"></use>\n        <g id=\"fs-exit-paths\">\n          <g id=\"fs-exit-top\" class=\"fs-arrow\">\n            <path d=\"M22 14H18V10\" />\n            <path d=\"M22 10L18 14\" />\n          </g>\n          <g id=\"fs-exit-bottom\" class=\"fs-arrow\">\n            <path d=\"M10 18L14 18V22\" />\n            <path d=\"M14 18L10 22\" />\n          </g>\n        </g>\n      </svg>\n    </media-fullscreen-button>\n  </media-control-bar>\n</media-controller>\n"
  },
  {
    "path": "themes/sutro-audio/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.7...@player.style/sutro-audio@0.0.8) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.6...@player.style/sutro-audio@0.0.7) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.5...@player.style/sutro-audio@0.0.6) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.4...@player.style/sutro-audio@0.0.5) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.3...@player.style/sutro-audio@0.0.4) (2024-10-08)\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.2...@player.style/sutro-audio@0.0.3) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio-v0.0.1...@player.style/sutro-audio@0.0.2) (2024-09-10)\n\n\n### Features\n\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n\n\n### Bug Fixes\n\n* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n"
  },
  {
    "path": "themes/sutro-audio/package.json",
    "content": "{\n  \"name\": \"@player.style/sutro-audio\",\n  \"version\": \"0.0.8\",\n  \"description\": \"A sleek and modern theme lovingly named after our favorite SF TV antenna, which is neither sleek nor modern.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/sutro-audio\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/sutro-audio/template.html",
    "content": "<!-- Sutro Audio -->\n<style>\n  :host {\n    --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-tooltip-display: none;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  media-controller {\n    --base: 20px;\n    --media-range-track-height: calc(0.125 * var(--base));\n    --media-control-height: calc(2 * var(--base));\n\n    -webkit-font-smoothing: antialiased;\n    border-radius: 16px;\n    overflow: hidden;\n    background: var(--media-secondary-color, #17507B);\n    font-size: calc(0.75 * var(--base));\n    font-family: Roboto, Arial, sans-serif;\n  }\n\n  media-controller[breakpointmd] {\n    --base: 20px;\n    min-height: 84px;\n  }\n\n  .info,\n  media-control-bar {\n    transition: opacity 0.3s ease-in-out;\n  }\n\n  media-controller:has(media-time-range[dragging]) :is(.info, media-control-bar) {\n    opacity: 0.4;\n  }\n\n  .media-button {\n    --media-control-hover-background: rgba(255, 255, 255, 0.12);\n    border-radius: 8px;\n    position: relative;\n    padding: 0;\n  }\n\n  .media-button svg {\n    fill: none;\n    stroke: var(--media-primary-color, #fff);\n    stroke-width: 1;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .bg-shape1,\n  .bg-shape2 {\n    position: absolute;\n    width: 50%;\n    height: 100%;\n    max-height: 132px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    filter: blur(80px);\n    mix-blend-mode: plus-lighter;\n    opacity: 0.24;\n  }\n\n  .bg-shape2 {\n    right: 0;\n  }\n</style>\n\n<media-controller\n  audio\n  breakpoints=\"md:480\"\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n\n  <svg class=\"bg-shape1\" viewBox=\"0 0 193 115\">\n    <path fill=\"#fff\" d=\"M50.117 51.13c-40.5-6.5-28 13.5-44 30.5-32.5 51.5 75 32.001 77 13.5 2-18.5 45-19.5 86-3.5 41 16.001 16.5-21 12.5-68s-37-14.5-66.5 16.5-24.5 17.5-65 11Z\"/>\n  </svg>\n\n  <svg class=\"bg-shape2\" viewBox=\"0 0 178 138\">\n    <path fill=\"#fff\" d=\"M26.386 103.374C-14.708 79.891-.175 60.583 18.869 34.491c43.6-58.446 66.15-36.529 139.819 20.352 73.668 56.88-88.202 102.802-73.668 74.623 14.533-28.18-17.54-2.61-58.634-26.092Z\"/>\n  </svg>\n\n  <style>\n    .controls {\n      position: relative;\n      z-index: 1;\n      box-sizing: border-box;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      padding: 16px 16px 6px;\n    }\n\n    [breakpointmd] .controls {\n      min-height: 84px;\n      display: grid;\n      align-items: center;\n      grid-template-columns: repeat(3, 1fr);\n      padding: 16px;\n    }\n\n    .info {\n      display: grid;\n      align-items: end;\n      margin-bottom: 16px;\n    }\n\n    .info div {\n      grid-area: 1 / 1;\n    }\n\n    [breakpointmd] .info {\n      display: flex;\n      align-items: center;\n      margin-bottom: 0;\n    }\n\n    .info-text {\n      position: relative;\n      padding: 16px;\n    }\n\n    .info h1,\n    .info h2 {\n      font-family: var(--media-font-family);\n      line-height: 1.2;\n      margin: 0;\n      font-weight: 400;\n      color: var(--media-primary-color, #fff);\n    }\n\n    .title {\n      font-size: 14px;\n    }\n\n    .byline {\n      font-size: 14px;\n      opacity: 0.6;\n    }\n\n    .info-poster {\n      position: relative;\n      width: 100%;\n      aspect-ratio: 1;\n      border-radius: 6px;\n      overflow: hidden;\n      box-shadow:\n        rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n        rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,\n        rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;\n    }\n\n    [breakpointmd] .info-poster {\n      width: 52px;\n    }\n\n    slot[name='poster']::slotted(*) {\n      object-fit: cover;\n      aspect-ratio: 1;\n    }\n\n    .poster-gradient {\n      --gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,\n        hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%,\n        hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%,\n        hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,\n        hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,\n        hsl(0 0% 0%) 100%;\n\n      position: absolute;\n      bottom: 0;\n      width: 100%;\n      height: 100px;\n      background: linear-gradient(to bottom, var(--gradient-steps));\n    }\n\n    [breakpointmd] .poster-gradient {\n      display: none;\n    }\n  </style>\n  <div class=\"controls\">\n    <div class=\"info\">\n      <div class=\"info-poster\">\n        <slot name=\"poster\"></slot>\n        <div class=\"poster-gradient\"></div>\n      </div>\n      <div class=\"info-text\">\n        <template if=\"mediatitle\">\n          <h1 class=\"title\">{{mediatitle}}</h1>\n        </template>\n        <template if=\"mediabyline\">\n          <h2 class=\"byline\">{{mediabyline}}</h2>\n        </template>\n      </div>\n    </div>\n\n    <!-- Control Bar -->\n    <style>\n      media-control-bar {\n        margin: auto;\n      }\n    </style>\n    <media-control-bar>\n      <!-- Playback Rate -->\n      <media-playback-rate-button class=\"media-button\"></media-playback-rate-button>\n\n      <!-- Seek Backward -->\n      <media-seek-backward-button class=\"media-button\" seekoffset=\"10\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"32\"\n          height=\"32\"\n          fill=\"none\"\n          viewBox=\"0 0 32 32\"\n        >\n          <path d=\"m10 13 3-3\" />\n          <path\n            stroke=\"none\"\n            fill=\"currentColor\"\n            d=\"m11.88 16.08-.95 5.793H9.72l.76-4.631h-.033L9 18.074l.179-1.087 1.564-.908h1.137ZM14.12 22c-.48 0-.874-.119-1.18-.356-.308-.24-.518-.585-.63-1.036-.11-.45-.112-.993-.008-1.626.106-.632.288-1.17.545-1.616.259-.445.58-.783.96-1.015A2.441 2.441 0 0 1 15.101 16c.477 0 .87.117 1.177.35.307.235.517.573.631 1.016.116.444.121.982.017 1.616-.104.635-.286 1.178-.545 1.629-.259.449-.58.793-.964 1.033a2.412 2.412 0 0 1-1.296.356Zm.168-1.016c.33 0 .619-.167.867-.5.247-.334.426-.835.536-1.502.072-.438.088-.803.047-1.095-.039-.294-.127-.515-.265-.662a.698.698 0 0 0-.534-.22c-.325 0-.614.165-.866.497-.25.33-.428.823-.536 1.48-.073.445-.089.816-.048 1.114.041.296.13.519.269.668.138.147.314.22.53.22Z\"\n          />\n          <path\n            d=\"M19.277 22h2.017c.39 0 .706-.432.706-.964v-7.072c0-.532-.316-.964-.706-.964H10\"\n          />\n        </svg>\n      </media-seek-backward-button>\n\n      <!-- Play/Pause -->\n      <style>\n        @keyframes bounce-scale-play {\n          0% {\n            transform: scale(0.75, 0.75);\n          }\n          50% {\n            transform: scale(115%, 115%);\n          }\n          100% {\n            transform: scale(1, 1);\n          }\n        }\n\n        media-play-button #icon-play {\n          opacity: 0;\n          transform-box: view-box;\n          transform-origin: center center;\n          transform: scale(0.5, 0.5);\n          transition: all 0.5s;\n        }\n\n        media-play-button[mediapaused] #icon-play {\n          opacity: 1;\n          transform: scale(1, 1);\n          animation: 0.35s bounce-scale-play ease-in-out;\n        }\n\n        @keyframes bounce-pause-left {\n          0% {\n            font-size: 10px;\n          }\n          50% {\n            font-size: 3px;\n          }\n          100% {\n            font-size: 4px;\n          }\n        }\n\n        @keyframes bounce-pause-right {\n          0% {\n            font-size: 10px;\n            transform: translateX(-8px);\n          }\n          50% {\n            font-size: 3px;\n            transform: translateX(1px);\n          }\n          100% {\n            font-size: 4px;\n            transform: translateX(0);\n          }\n        }\n\n        media-play-button #pause-left,\n        media-play-button #pause-right {\n          /* Using font-size to animate height because using scale was resulting in unexpected positioning */\n          font-size: 4px;\n          opacity: 1;\n          transform: translateX(0);\n          transform-box: view-box;\n        }\n\n        media-play-button:not([mediapaused]) #pause-left {\n          animation: 0.3s bounce-pause-left ease-out;\n        }\n\n        media-play-button:not([mediapaused]) #pause-right {\n          animation: 0.3s bounce-pause-right ease-out;\n        }\n\n        media-play-button[mediapaused] #pause-left,\n        media-play-button[mediapaused] #pause-right {\n          opacity: 0;\n          font-size: 10px;\n        }\n\n        media-play-button[mediapaused] #pause-right {\n          transform-origin: right center;\n          transform: translateX(-8px);\n        }\n      </style>\n      <media-play-button mediapaused class=\"media-button\">\n        <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n          <g>\n            <path\n              id=\"icon-play\"\n              d=\"M20.7131 14.6976C21.7208 15.2735 21.7208 16.7265 20.7131 17.3024L12.7442 21.856C11.7442 22.4274 10.5 21.7054 10.5 20.5536L10.5 11.4464C10.5 10.2946 11.7442 9.57257 12.7442 10.144L20.7131 14.6976Z\"\n            />\n          </g>\n          <g id=\"icon-pause\">\n            <rect id=\"pause-left\" x=\"10.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n            <rect id=\"pause-right\" x=\"17.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n          </g>\n        </svg>\n      </media-play-button>\n\n      <!-- Seek Forward -->\n      <media-seek-forward-button class=\"media-button\" seekoffset=\"10\">\n        <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n          <path d=\"m22 13-3-3\" />\n          <path\n            stroke=\"none\"\n            fill=\"currentColor\"\n            d=\"m17.88 16.08-.95 5.793h-1.21l.76-4.631h-.033L15 18.074l.179-1.087 1.564-.908h1.137ZM20.12 22c-.48 0-.874-.119-1.18-.356-.308-.24-.518-.585-.63-1.036-.11-.45-.112-.993-.008-1.626.106-.632.288-1.17.545-1.616.259-.445.58-.783.96-1.015A2.441 2.441 0 0 1 21.101 16c.477 0 .87.117 1.177.35.307.235.517.573.631 1.016.116.444.121.982.017 1.616-.104.635-.286 1.178-.545 1.629-.259.449-.58.793-.964 1.033a2.412 2.412 0 0 1-1.296.356Zm.168-1.016c.33 0 .619-.167.866-.5.248-.334.427-.835.537-1.502.073-.438.088-.803.047-1.095-.039-.294-.127-.515-.265-.662a.698.698 0 0 0-.534-.22c-.326 0-.614.165-.866.497-.25.33-.428.823-.536 1.48-.073.445-.088.816-.048 1.114.041.296.13.519.269.668.137.147.314.22.53.22Z\"\n          />\n          <path\n            d=\"M12.723 22h-2.017c-.39 0-.706-.432-.706-.964v-7.072c0-.532.316-.964.706-.964H22\"\n          />\n        </svg>\n      </media-seek-forward-button>\n\n      <!-- Volume/Mute -->\n      <style>\n        media-mute-button {\n          position: relative;\n          z-index: 1;\n        }\n\n        media-mute-button .muted-path {\n          transition: clip-path 0.2s ease-out;\n        }\n\n        media-mute-button #muted-path-2 {\n          transition-delay: 0.2s;\n        }\n\n        media-mute-button .muted-path {\n          clip-path: inset(0);\n        }\n\n        media-mute-button:not([mediavolumelevel='off']) #muted-path-1 {\n          clip-path: inset(0 0 100% 0);\n        }\n\n        media-mute-button:not([mediavolumelevel='off']) #muted-path-2 {\n          clip-path: inset(0 0 100% 0);\n        }\n\n        media-mute-button .muted-path {\n          opacity: 0;\n        }\n\n        media-mute-button[mediavolumelevel='off'] .muted-path {\n          opacity: 1;\n        }\n\n        media-mute-button .vol-path {\n          opacity: 1;\n          transition: opacity 0.4s;\n        }\n\n        media-mute-button[mediavolumelevel='off'] .vol-path {\n          opacity: 0;\n        }\n\n        media-mute-button[mediavolumelevel='low'] #vol-high-path,\n        media-mute-button[mediavolumelevel='medium'] #vol-high-path {\n          opacity: 0;\n        }\n      </style>\n      <media-mute-button class=\"media-button\">\n        <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n          <g id=\"vol-paths\">\n            <path\n              id=\"speaker-path\"\n              d=\"M16.5 20.486v-8.972c0-1.537-2.037-2.08-2.802-.745l-1.026 1.79a2.5 2.5 0 0 1-.8.85l-1.194.78A1.5 1.5 0 0 0 10 15.446v1.11c0 .506.255.978.678 1.255l1.194.782a2.5 2.5 0 0 1 .8.849l1.026 1.79c.765 1.334 2.802.792 2.802-.745Z\"\n            />\n            <path\n              id=\"vol-low-path\"\n              class=\"vol-path\"\n              d=\"M18.5 18C19.6046 18 20.5 17.1046 20.5 16C20.5 14.8954 19.6046 14 18.5 14\"\n            />\n            <path\n              id=\"vol-high-path\"\n              class=\"vol-path\"\n              d=\"M18 21C20.7614 21 23 18.7614 23 16C23 13.2386 20.7614 11 18 11\"\n            />\n            <path id=\"muted-path-1\" class=\"muted-path\" d=\"M23 18L19 14\" />\n            <path id=\"muted-path-2\" class=\"muted-path\" d=\"M23 14L19 18\" />\n          </g>\n        </svg>\n      </media-mute-button>\n\n    </media-control-bar>\n\n    <!-- Time Display -->\n    <style>\n      .times {\n        display: flex;\n        gap: 3px;\n        font-size: calc(0.7 * var(--base));\n      }\n\n      .time-display {\n        padding: 0;\n        line-height: 1;\n      }\n\n      [breakpointmd] .times {\n        display: block;\n      }\n\n      [breakpointmd] .time-display {\n        display: block;\n        text-align: right;\n        line-height: 1.2;\n      }\n\n      [breakpointmd] media-duration-display {\n        opacity: 0.6;\n      }\n\n      .small-time-range {\n        width: 100%;\n        height: calc(2 * var(--base));\n        border-radius: calc(0.25 * var(--base));\n\n        --media-range-track-backdrop-filter: invert(10%) blur(5px) brightness(110%);\n        --media-range-track-background: rgba(255, 255, 255, 0.2);\n        --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);\n        --media-range-track-border-radius: calc(0.25 * var(--base));\n\n        --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);\n        --media-range-bar-color: rgb(255, 255, 255);\n\n        --media-range-thumb-background: #fff;\n        --media-range-thumb-transition: opacity 0.1s linear;\n        --media-range-thumb-height: 12px;\n        --media-range-thumb-width: 12px;\n        --media-range-thumb-border-radius: 12px;\n      }\n\n      [breakpointmd] .small-time-range {\n        display: none;\n      }\n    </style>\n    <div class=\"times\">\n      <media-time-display class=\"time-display\"></media-time-display>\n      <media-time-range class=\"small-time-range\">\n        <span slot=\"preview\"></span>\n      </media-time-range>\n      <media-duration-display class=\"time-display\"></media-duration-display>\n    </div>\n  </div>\n\n  <!-- Time Range / Progress Bar -->\n  <style>\n    .big-time-range {\n      --media-range-track-height: 4px;\n      --media-range-track-background: rgba(255, 255, 255, 0.25);\n      --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);\n      --media-time-range-buffered-color: rgba(255, 255, 255, 0.3);\n      --media-range-track-box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07);\n      --media-range-padding-left: 0;\n      --media-range-padding-right: 0;\n      --media-preview-time-background: var(--_secondary-color);\n      --media-preview-box-margin: 0 0 3px;\n      --media-range-thumb-transform: translateY(-3px);\n      --media-range-thumb-height: 12px;\n      --media-range-thumb-width: 6px;\n      --media-range-thumb-border-radius: 2px;\n\n      display: none;\n      position: absolute;\n      left: 15px;\n      width: calc(100% - 30px);\n      height: 10px;\n      bottom: -3px;\n    }\n\n    [breakpointmd] .big-time-range {\n      display: block;\n    }\n\n    media-preview-time-display {\n      font-size: calc(0.65 * var(--base));\n      line-height: 1;\n    }\n  </style>\n  <media-time-range class=\"big-time-range\">\n    <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n  </media-time-range>\n</media-controller>\n"
  },
  {
    "path": "themes/tailwind-audio/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.0.13](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.12...@player.style/tailwind-audio@0.0.13) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.0.12](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.11...@player.style/tailwind-audio@0.0.12) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.10...@player.style/tailwind-audio@0.0.11) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.9...@player.style/tailwind-audio@0.0.10) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.8...@player.style/tailwind-audio@0.0.9) (2024-10-08)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.7...@player.style/tailwind-audio@0.0.8) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.6...@player.style/tailwind-audio@0.0.7) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio-v0.0.5...@player.style/tailwind-audio@0.0.6) (2024-08-15)\n\n\n### Features\n\n* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))\n\n\n### Bug Fixes\n\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n"
  },
  {
    "path": "themes/tailwind-audio/package.json",
    "content": "{\n  \"name\": \"@player.style/tailwind-audio\",\n  \"version\": \"0.0.13\",\n  \"description\": \"A slick, minimal audio player theme made with Tailwind CSS.\",\n  \"author\": \"@luwes\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/tailwind-audio\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"prebuild\": \"tailwindcss -i ./styles.css --minify -o ./dist/styles.css\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/container-queries\": \"^0.1.0\",\n    \"build-theme\": \"^0.1.1\",\n    \"tailwindcss\": \"^3.2.4\"\n  }\n}\n"
  },
  {
    "path": "themes/tailwind-audio/styles.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "themes/tailwind-audio/tailwind.config.js",
    "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./**/*.{html,js}'],\n  theme: {\n    extend: {\n      colors: {\n        // todo: needs more sub variants because slate-500, slate-700 and slate-900 is used.\n        //       ideally 3 shades of each color would be created via CSS.\n        // primary: 'var(--media-primary-color, rgb(51 65 85 / var(--tw-bg-opacity)))',\n        secondary: 'var(--media-secondary-color, #fff)',\n        accent: 'var(--media-accent-color, rgb(79 70 229))',\n      },\n    },\n  },\n  plugins: [require('@tailwindcss/container-queries')],\n};\n"
  },
  {
    "path": "themes/tailwind-audio/template.html",
    "content": "<style>\n  <%- await include('/styles.css') -%>\n</style>\n\n<svg class=\"hidden\">\n  <symbol\n    id=\"backward\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <path\n      d=\"M8 5L5 8M5 8L8 11M5 8H13.5C16.5376 8 19 10.4624 19 13.5C19 15.4826 18.148 17.2202 17 18.188\"\n    ></path>\n    <path d=\"M5 15V19\"></path>\n    <path\n      d=\"M8 18V16C8 15.4477 8.44772 15 9 15H10C10.5523 15 11 15.4477 11 16V18C11 18.5523\n        10.5523 19 10 19H9C8.44772 19 8 18.5523 8 18Z\"\n    ></path>\n  </symbol>\n\n  <symbol id=\"play\" viewBox=\"0 0 24 24\">\n    <path\n      fill-rule=\"evenodd\"\n      d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0\n        3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\"\n      clip-rule=\"evenodd\"\n    />\n  </symbol>\n\n  <symbol id=\"pause\" viewBox=\"0 0 24 24\">\n    <path\n      fill-rule=\"evenodd\"\n      d=\"M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0\n      01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0\n      01-.75.75H15a.75.75 0 01-.75-.75V5.25z\"\n      clip-rule=\"evenodd\"\n    />\n  </symbol>\n\n  <symbol id=\"forward\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M16 5L19 8M19 8L16 11M19 8H10.5C7.46243 8 5 10.4624 5 13.5C5 15.4826 5.85204 17.2202 7 18.188\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n    <path d=\"M13 15V19\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    <path\n      d=\"M16 18V16C16 15.4477 16.4477 15 17 15H18C18.5523 15 19 15.4477 19 16V18C19 18.5523 18.5523 19 18\n      19H17C16.4477 19 16 18.5523 16 18Z\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n  </symbol>\n\n  <symbol id=\"high\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0\n      001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276\n      2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06\n      8.25 8.25 0 000-11.668.75.75 0 010-1.06z\"\n    ></path>\n    <path\n      d=\"M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0\n      010-1.06z\"\n    ></path>\n  </symbol>\n\n  <symbol id=\"off\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0\n      001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276\n      2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72\n      1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z\"\n    />\n  </symbol>\n</svg>\n\n<media-controller\n  audio\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n  class=\"@container block w-full shadow-xl shadow-black/5\"\n  style=\"\n    --media-background-color: transparent;\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-tooltip-display: none;\n  \"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n\n  <media-time-range\n    class=\"block @md:hidden w-full h-2 min-h-0 p-0 bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2\"\n    style=\"\n      --media-range-track-background: transparent;\n      --media-time-range-buffered-color: rgb(0 0 0 / 0.02);\n      --media-range-bar-color: var(--media-accent-color, rgb(79 70 229));\n      --media-range-track-height: 0.5rem;\n      --media-range-thumb-background: var(--media-accent-color, rgb(79 70 229));\n      --media-range-thumb-box-shadow: 0 0 0 2px var(--media-secondary-color, rgb(255 255 255 / 0.9));\n      --media-range-thumb-width: 0.25rem;\n      --media-range-thumb-height: 1rem;\n      --media-preview-time-text-shadow: transparent;\n    \"\n  >\n    <media-preview-time-display\n      slot=\"preview\"\n      class=\"text-slate-600 text-xs\"\n    ></media-preview-time-display>\n  </media-time-range>\n\n  <media-control-bar\n    class=\"h-20 @md:h-16 px-4 w-full flex items-center justify-between @md:rounded-md @md:ring-1 @md:ring-slate-700/10 bg-secondary\"\n  >\n    <media-seek-backward-button\n      seekoffset=\"10\"\n      class=\"w-8 h-8 p-0 group rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2\"\n    >\n      <svg\n        slot=\"icon\"\n        aria-hidden=\"true\"\n        class=\"w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700\"\n      >\n        <use href=\"#backward\" />\n      </svg>\n    </media-seek-backward-button>\n\n    <media-play-button\n      class=\"h-10 w-10 p-2 mx-3 rounded-full bg-slate-700 hover:bg-slate-900 focus:outline-none focus:ring-slate-700 focus:ring-2 focus:ring-offset-2\"\n      style=\"--media-primary-color: #fff\"\n    >\n      <svg slot=\"play\" aria-hidden=\"true\" class=\"relative left-px\">\n        <use href=\"#play\" />\n      </svg>\n      <svg slot=\"pause\" aria-hidden=\"true\">\n        <use href=\"#pause\" />\n      </svg>\n    </media-play-button>\n\n    <media-seek-forward-button\n      seekoffset=\"10\"\n      class=\"w-8 h-8 p-0 group relative rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2\"\n    >\n      <svg\n        slot=\"icon\"\n        aria-hidden=\"true\"\n        class=\"w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700\"\n      >\n        <use href=\"#forward\" />\n      </svg>\n    </media-seek-forward-button>\n\n    <div class=\"hidden @md:block h-full border-l border-slate-700/10 mx-4\"></div>\n\n    <media-time-display\n      class=\"hidden @md:block text-slate-500 text-sm rounded-md focus:outline-none focus:ring-slate-700 focus:ring-2\"\n    ></media-time-display>\n\n    <media-time-range\n      class=\"hidden @md:block h-2 min-h-0 p-0 m-2 rounded-md bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2\"\n      style=\"\n        --media-range-track-background: transparent;\n        --media-time-buffered-color: rgb(0 0 0 / 0.02);\n        --media-range-bar-color: var(--media-accent-color, rgb(79 70 229));\n        --media-range-track-border-radius: 4px;\n        --media-range-track-height: 0.5rem;\n        --media-range-thumb-background: var(--media-accent-color, rgb(79 70 229));\n        --media-range-thumb-box-shadow: 0 0 0 2px var(--media-secondary-color, rgb(255 255 255 / 0.9));\n        --media-range-thumb-width: 0.25rem;\n        --media-range-thumb-height: 1rem;\n        --media-preview-time-text-shadow: transparent;\n      \"\n    >\n      <media-preview-time-display\n        slot=\"preview\"\n        class=\"text-slate-600 text-xs\"\n      ></media-preview-time-display>\n    </media-time-range>\n\n    <media-duration-display\n      class=\"hidden @md:block text-slate-500 text-sm\"\n    ></media-duration-display>\n\n    <media-playback-rate-button\n      class=\"text-slate-500 rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2\"\n    ></media-playback-rate-button>\n\n    <media-mute-button\n      class=\"group relative order-first @md:order-none rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2\"\n    >\n      <svg\n        slot=\"high\"\n        aria-hidden=\"true\"\n        class=\"h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700\"\n      >\n        <use href=\"#high\" />\n      </svg>\n      <svg\n        slot=\"medium\"\n        aria-hidden=\"true\"\n        class=\"h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700\"\n      >\n        <use href=\"#high\" />\n      </svg>\n      <svg\n        slot=\"low\"\n        aria-hidden=\"true\"\n        class=\"h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700\"\n      >\n        <use href=\"#high\" />\n      </svg>\n      <svg\n        slot=\"off\"\n        aria-hidden=\"true\"\n        class=\"h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700\"\n      >\n        <use href=\"#off\" />\n      </svg>\n    </media-mute-button>\n  </media-control-bar>\n</media-controller>\n"
  },
  {
    "path": "themes/vimeonova/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.1.1...@player.style/vimeonova@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.1.0...@player.style/vimeonova@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.0.11...@player.style/vimeonova@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.0.10...@player.style/vimeonova@0.0.11) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.0.9...@player.style/vimeonova@0.0.10) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.0.8...@player.style/vimeonova@0.0.9) (2024-10-08)\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n* Safari Vimeonova play button height ([487c6b1](https://github.com/muxinc/player.style/commit/487c6b131f9ce225f826e80f8c42d83b8932a808)), closes [#103](https://github.com/muxinc/player.style/issues/103)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.0.7...@player.style/vimeonova@0.0.8) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.0.6...@player.style/vimeonova@0.0.7) (2024-09-10)\n\n\n### Features\n\n* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/vimeonova-v0.0.5...@player.style/vimeonova@0.0.6) (2024-08-15)\n\n\n### Features\n\n* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))\n\n\n### Bug Fixes\n\n* add Vimeonova color support ([#54](https://github.com/muxinc/player.style/issues/54)) ([e954611](https://github.com/muxinc/player.style/commit/e9546111a87a1974da018fe95d1f50c5fed25720))\n* responsive fullscreen ([#61](https://github.com/muxinc/player.style/issues/61)) ([05343b8](https://github.com/muxinc/player.style/commit/05343b8ddfe6eafec255384d8ab40b63b1a724f0)), closes [#59](https://github.com/muxinc/player.style/issues/59)\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n* vimeonova issues ([48fa5ff](https://github.com/muxinc/player.style/commit/48fa5ffe4f922468a6fc3518a9fbbb2b2b322084))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n"
  },
  {
    "path": "themes/vimeonova/package.json",
    "content": "{\n  \"name\": \"@player.style/vimeonova\",\n  \"version\": \"0.1.2\",\n  \"description\": \"A fresh take on the classic Vimeo player design.\",\n  \"author\": \"@luwes\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/vimeonova\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/vimeonova/template.html",
    "content": "<style>\n  :host {\n    --vimeonova-black: 23 35 34;\n    --vimeonova-primary-color: var(--media-primary-color, rgb(253 244 255));\n    --vimeonova-secondary-color: var(--media-secondary-color, rgb(--vimeonova-black / 0.75));\n    --vimeonova-accent-color: var(--media-accent-color, rgb(0 186 115));\n    --vimeonova-control-bar-height: 32px;\n    --vimeonova-control-bar-border-radius: 0.125em;\n    --vimeonova-play-button-border-radius: 0.25em;\n\n    --media-control-background: var(--vimeonova-secondary-color);\n    --media-control-hover-background: var(--vimeonova-secondary-color);\n    --media-icon-color: var(--vimeonova-primary-color);\n    --media-menu-border-radius: 0.25em;\n    --media-tooltip-display: none;\n\n    color: var(--vimeonova-primary-color);\n  }\n\n  @supports (color: color-mix(in srgb, red, blue)) {\n    :host {\n      --vimeonova-secondary-color: color-mix(\n        in srgb,\n        var(--media-secondary-color, rgb(23 35 34)) 75%,\n        transparent\n      );\n    }\n  }\n\n  media-controller {\n    display: block;\n    container: media-theme-vimeonova / inline-size;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: 1px;\n    margin: 0.625em;\n  }\n\n  .title,\n  .byline {\n    display: inline-block;\n    background: var(--vimeonova-secondary-color);\n    margin: 0;\n    padding: 0.18em 0.24em;\n    line-height: 1;\n    font-size: 0.8em;\n    font-weight: normal;\n  }\n\n  .title {\n    color: var(--vimeonova-accent-color);\n    font-size: 1.3em;\n    font-weight: bold;\n  }\n\n  .byline {\n    color: var(--vimeonova-accent-color);\n  }\n\n  .control-bar-container {\n    position: relative;\n    overflow: visible;\n    display: flex;\n    align-items: end;\n    padding: 0.35em;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  @container (inline-size >=384px) {\n    .control-bar-container {\n      column-gap: 0.625em;\n      padding: 0.625em;\n    }\n  }\n\n  .control-bar-right {\n    flex-grow: 1;\n  }\n\n  media-control-bar {\n    background: var(--media-control-background);\n    height: var(--vimeonova-control-bar-height);\n    border-bottom-left-radius: var(--vimeonova-control-bar-border-radius);\n    border-bottom-right-radius: var(--vimeonova-control-bar-border-radius);\n    width: 100%;\n  }\n\n  media-control-bar [role='button'],\n  media-control-bar [role='switch'] {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-button-icon-active-transform: scale(1.2);\n    --media-button-icon-transition: transform 0.2s ease;\n    color: var(--vimeonova-primary-color);\n    padding: 0.3125em 0.35em;\n  }\n\n  media-control-bar svg {\n    fill: none;\n  }\n\n  media-control-bar svg:active {\n    transform: scale(1.2);\n  }\n\n  media-play-button {\n    --media-control-background: var(--vimeonova-secondary-color);\n    --media-control-hover-background: var(--vimeonova-accent-color);\n    --media-button-icon-height: 100%;\n    display: none;\n    border-radius: var(--vimeonova-play-button-border-radius);\n    color: var(--vimeonova-primary-color);\n    width: 65px;\n    height: 40px;\n    padding: 0.3125em 0.625em;\n  }\n\n  [slot='centered-chrome'] media-play-button {\n    display: block;\n    position: relative;\n    top: -30%;\n  }\n\n  media-play-button:active {\n    --media-control-hover-background: var(--vimeonova-accent-color);\n  }\n\n  @supports (color: color-mix(in srgb, red, blue)) {\n    media-play-button:active {\n      --media-control-hover-background: color-mix(\n        in srgb,\n        var(--vimeonova-accent-color) 80%,\n        transparent\n      );\n    }\n  }\n\n  media-time-range {\n    --media-range-padding: 0;\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-time-range-buffered-color: dimgray;\n    --media-range-track-background: rgb(var(--vimeonova-black) / 0.5);\n    --media-range-track-border-radius: 0;\n    --media-range-bar-color: var(--vimeonova-accent-color);\n    --media-range-thumb-background: none;\n    --media-range-thumb-width: 0px;\n    --media-range-thumb-height: 0px;\n    --media-range-track-height: 10px;\n    --media-preview-thumbnail-border-radius: 2px;\n    --media-preview-thumbnail-border: 4px solid var(--vimeonova-secondary-color);\n    --media-box-margin: 0;\n    --media-preview-time-background: rgb(var(--vimeonova-black) / 1);\n    padding-inline: 10px;\n  }\n\n  media-time-range.small {\n    --media-box-padding-left: 2px;\n    --media-box-padding-right: 2px;\n    --media-range-track-height: 5px;\n    --media-range-track-border-radius: var(--vimeonova-control-bar-border-radius)\n      var(--vimeonova-control-bar-border-radius) 0 0;\n    height: 5px;\n    width: 100%;\n    padding: 0;\n  }\n\n  @keyframes buffer {\n    100% {\n      --media-range-track-background: rgb(var(--vimeonova-black) / 0.5)\n        url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\"><style>@keyframes buffer { 100% { transform: translateX(-10px); }}%3C/style><defs><pattern id=\"buffer-pattern\" patternUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><line x1=\"5\" y1=\"-1\" x2=\"-5\" y2=\"10\" stroke-width=\"2\" stroke=\"dimgray\" stroke-linecap=\"butt\" /><line x1=\"10\" y1=\"-1\" x2=\"0\" y2=\"10\" stroke-width=\"2\" stroke=\"dimgray\" stroke-linecap=\"butt\" /><line x1=\"15\" y1=\"-1\" x2=\"5\" y2=\"10\" stroke-width=\"2\" stroke=\"dimgray\" stroke-linecap=\"butt\" /></pattern></defs><rect width=\"110%\" height=\"100%\" fill=\"url(%23buffer-pattern)\" style=\"animation: buffer 250ms linear infinite;\" /></svg>');\n    }\n  }\n\n  [medialoading]:not([mediapaused]) media-time-range {\n    animation: 1000000s 0.5s buffer reverse;\n  }\n\n  media-time-range.large {\n    display: none;\n    height: var(--vimeonova-control-bar-height);\n    flex-grow: 10000;\n  }\n\n  media-time-range > * {\n    position: relative;\n    bottom: -11px;\n  }\n\n  media-time-range.small > * {\n    bottom: 3px;\n  }\n\n  @container (inline-size >=384px) {\n    [slot='centered-chrome'] media-play-button {\n      display: none;\n    }\n\n    .control-bar-container media-play-button {\n      display: block;\n    }\n\n    media-time-range.small {\n      border-top-left-radius: var(--vimeonova-control-bar-border-radius);\n      border-top-right-radius: var(--vimeonova-control-bar-border-radius);\n    }\n  }\n\n  @container (inline-size >=484px) {\n    media-control-bar {\n      border-radius: var(--vimeonova-control-bar-border-radius);\n    }\n\n    media-time-range.small {\n      display: none;\n    }\n\n    media-time-range.large {\n      display: block;\n    }\n  }\n\n  media-preview-time-display,\n  media-time-display {\n    --media-preview-time-background: var(--vimeonova-primary-color);\n    padding: 2px 4px;\n    border-radius: 0;\n    line-height: normal;\n    color: rgb(var(--vimeonova-black) / 1);\n    font-family: Verdana, sans-serif;\n    font-size: 10px;\n    box-shadow: rgb(0 0 0 / 0.7) 1px 1px 0px 0px;\n    text-shadow: none;\n  }\n\n  media-preview-thumbnail {\n    max-width: 213px;\n    max-height: 200px;\n  }\n\n  media-preview-time-display {\n    margin-top: 5px;\n    min-width: auto;\n    --media-preview-time-background: rgb(var(--vimeonova-black) / 1);\n    color: var(--vimeonova-primary-color);\n  }\n\n  [part='arrow'] {\n    --media-box-arrow-background: rgb(var(--vimeonova-black) / 1);\n    --media-box-arrow-height: 4px;\n    --media-box-arrow-width: 4px;\n    --media-box-arrow-offset: 0px;\n    left: 1px;\n  }\n\n  [part='arrow'][slot='current']::before {\n    --media-box-arrow-background: var(--vimeonova-primary-color);\n  }\n\n  [part='arrow']::before {\n    content: '';\n    border-color: transparent;\n    border-top-color: var(--media-box-arrow-background, var(--_control-background));\n    border-width: var(\n      --media-box-arrow-border-width,\n      var(--media-box-arrow-height, 5px) var(--media-box-arrow-width, 6px) 0\n    );\n    border-style: solid;\n    position: absolute;\n    bottom: 0.5px;\n    margin-left: calc((var(--media-box-arrow-width) + 1px) * -1);\n  }\n\n  media-volume-range {\n    --media-range-track-background-color: rgb(var(--vimeonova-black) / 0.8);\n    --media-range-track-border-radius: 1px;\n    --media-range-bar-color: var(--vimeonova-accent-color);\n    --media-range-thumb-background: none;\n    --media-range-thumb-width: 0px;\n    --media-range-thumb-height: 0px;\n    --media-range-track-height: 6px;\n    height: var(--vimeonova-control-bar-height);\n    background: var(--vimeonova-secondary-color);\n    border-radius: var(--media-menu-border-radius);\n  }\n\n  .media-volume-wrapper {\n    position: relative;\n  }\n\n  .media-volume-range-wrapper {\n    width: 122px;\n    height: 34px;\n    overflow: hidden;\n    opacity: 0;\n    transform: rotate(-90deg);\n    position: absolute;\n    top: -80px;\n    left: -52px;\n    border-left: 16px solid transparent;\n    visibility: hidden;\n  }\n\n  @container (inline-size >=484px) {\n    .media-volume-range-wrapper {\n      top: -77px;\n    }\n  }\n\n  media-mute-button:hover + .media-volume-range-wrapper,\n  media-mute-button:focus + .media-volume-range-wrapper,\n  media-mute-button:focus-within + .media-volume-range-wrapper,\n  .media-volume-range-wrapper:hover,\n  .media-volume-range-wrapper:focus,\n  .media-volume-range-wrapper:focus-within {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  [role='menu'] {\n    position: absolute;\n    margin-bottom: 10px;\n  }\n\n  @container (inline-size >=484px) {\n    [role='menu'] {\n      margin-bottom: 7px;\n    }\n  }\n\n  .spacer {\n    flex-grow: 1;\n    height: 100%;\n  }\n</style>\n\n<media-controller\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <div slot=\"top-chrome\" class=\"header\">\n    <template if=\"mediatitle\">\n      <h1 class=\"title\">{{mediatitle}}</h1>\n    </template>\n    <template if=\"mediabyline\">\n      <h2 class=\"byline\">{{mediabyline}}</h2>\n    </template>\n  </div>\n\n  <div slot=\"centered-chrome\">\n    <media-play-button>\n      <svg\n        slot=\"play\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1\"\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n        <path d=\"M7 4v16l13 -8z\"></path>\n      </svg>\n      <svg\n        slot=\"pause\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1\"\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n        <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"0\"></rect>\n        <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"0\"></rect>\n      </svg>\n    </media-play-button>\n  </div>\n\n  <div class=\"control-bar-container\" id=\"vimeonova-bounds\">\n    <media-play-button>\n      <svg\n        slot=\"play\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1\"\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n        <path d=\"M7 4v16l13 -8z\"></path>\n      </svg>\n      <svg\n        slot=\"pause\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1\"\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n        <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"0\"></rect>\n        <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"0\"></rect>\n      </svg>\n    </media-play-button>\n\n    <div class=\"control-bar-right\">\n      <media-time-range class=\"small\">\n        <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n        <div part=\"arrow\" slot=\"preview\"></div>\n        <media-time-display slot=\"current\"></media-time-display>\n        <div part=\"arrow\" slot=\"current\"></div>\n      </media-time-range>\n      <media-control-bar>\n        <media-time-range class=\"large\" bounds=\"vimeonova-bounds\">\n          <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n          <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n          <div part=\"arrow\" slot=\"preview\"></div>\n          <media-time-display slot=\"current\"></media-time-display>\n          <div part=\"arrow\" slot=\"current\"></div>\n        </media-time-range>\n        <div class=\"spacer\"></div>\n        <media-captions-menu-button>\n          <svg slot=\"on\" aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <path\n              fill=\"currentColor\"\n              fill-rule=\"evenodd\"\n              d=\"M2 8a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4h-.532l-2.2 2.64a1 1 0 0 1-1.536 0l-2.2-2.64H5.999A4 4 0 0 1 2 15V8Zm13.57.183a3.333 3.333 0 0 1 2.338.826.82.82 0 0 1-1.083 1.232 1.693 1.693 0 0 0-2.336.097 1.674 1.674 0 0 0 0 2.324 1.692 1.692 0 0 0 2.336.097.82.82 0 0 1 1.083 1.232 3.333 3.333 0 0 1-4.6-.191 3.314 3.314 0 0 1 0-4.6m2.261-1.017c-.856.035-1.666.4-2.261 1.017Zm-6.7-.005a3.338 3.338 0 0 1 2.342.828.825.825 0 0 1-1.089 1.239 1.688 1.688 0 0 0-2.33.097 1.669 1.669 0 0 0 0 2.316 1.688 1.688 0 0 0 2.33.097.825.825 0 1 1 1.09 1.24 3.338 3.338 0 0 1-4.608-.192 3.319 3.319 0 0 1 0-4.606m2.265-1.02a3.347 3.347 0 0 0-2.265 1.02Z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n          <svg slot=\"off\" aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <path\n              stroke=\"currentColor\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.6\"\n              d=\"M17.367 9.625a2.513 2.513 0 0 0-3.469.144 2.494 2.494 0 0 0 0 3.461 2.513 2.513 0 0 0 3.469.145m-6.7-3.75a2.513 2.513 0 0 0-3.469.144 2.494 2.494 0 0 0 0 3.461 2.512 2.512 0 0 0 3.469.145\"\n            />\n            <path\n              fill=\"currentColor\"\n              d=\"M17 18v-1h-.468l-.3.36L17 18Zm-5 0 .768-.64-.3-.36H12v1Zm2.5 3-.768.64a1 1 0 0 0 1.536 0L14.5 21ZM6 6h12V4H6v2Zm14 2v7h2V8h-2ZM4 15V8H2v7h2Zm14 2h-1v2h1v-2Zm-6 0H6v2h6v-2Zm4.232.36-2.5 3 1.536 1.28 2.5-3-1.536-1.28Zm-.964 3-2.5-3-1.536 1.28 2.5 3 1.536-1.28ZM2 15a4 4 0 0 0 4 4v-2a2 2 0 0 1-2-2H2Zm18 0a2 2 0 0 1-2 2v2a4 4 0 0 0 4-4h-2Zm-2-9a2 2 0 0 1 2 2h2a4 4 0 0 0-4-4v2ZM6 4a4 4 0 0 0-4 4h2a2 2 0 0 1 2-2V4Z\"\n            />\n          </svg>\n        </media-captions-menu-button>\n        <media-playback-rate-menu-button></media-playback-rate-menu-button>\n        <div class=\"media-volume-wrapper\">\n          <media-mute-button>\n            <svg\n              slot=\"high\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 24 25\"\n              stroke-width=\"1.8\"\n              stroke=\"currentColor\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n              <path d=\"M15 8a5 5 0 0 1 0 8\"></path>\n              <path d=\"M17.7 5a9 9 0 0 1 0 14\"></path>\n              <path\n                d=\"M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            <svg\n              slot=\"medium\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 24 25\"\n              stroke-width=\"1.8\"\n              stroke=\"currentColor\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n              <path d=\"M15 8a5 5 0 0 1 0 8\"></path>\n              <path d=\"M17.7 5a9 9 0 0 1 0 14\"></path>\n              <path\n                d=\"M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            <svg\n              slot=\"low\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 24 25\"\n              stroke-width=\"1.8\"\n              stroke=\"currentColor\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n              <path d=\"M15 8a5 5 0 0 1 0 8\"></path>\n              <path\n                d=\"M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            <svg\n              slot=\"off\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 24 25\"\n              stroke-width=\"1.8\"\n              stroke=\"currentColor\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n              <path\n                d=\"M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5\"\n              ></path>\n              <path d=\"M16 10l4 4m0 -4l-4 4\"></path>\n            </svg>\n          </media-mute-button>\n          <div class=\"media-volume-range-wrapper\">\n            <media-volume-range></media-volume-range>\n          </div>\n        </div>\n        <media-rendition-menu-button>\n          <svg slot=\"icon\" class=\"media-hd-icon\" aria-hidden=\"true\" viewBox=\"0 0 28 24\">\n            <path\n              fill=\"currentColor\"\n              d=\"M19.866 18.971h-5.458L16.728 5h5.239c1.437 0 2.638.289 3.602.866.964.578 1.648 1.403 2.053 2.477.405 1.073.485 2.351.239 3.834-.237 1.428-.716 2.649-1.44 3.663a7.076 7.076 0 0 1-2.756 2.326c-1.114.537-2.38.805-3.8.805Zm-1.133-3.22h1.378c.691 0 1.308-.12 1.849-.361.546-.246 1-.655 1.364-1.228.369-.578.635-1.367.798-2.367.155-.946.15-1.676-.013-2.19-.164-.519-.476-.878-.935-1.078-.46-.205-1.053-.307-1.78-.307h-1.406l-1.255 7.531ZM0 18.971 2.32 5h3.792l-.9 5.458h5.02L11.134 5h3.794l-2.32 13.971H8.814l.9-5.457h-5.02l-.901 5.457H0Z\"\n            />\n          </svg>\n          <svg slot=\"icon\" class=\"media-sd-icon hidden\" aria-hidden=\"true\" viewBox=\"0 0 28 24\">\n            <path\n              fill=\"currentColor\"\n              d=\"M19.857 18.967H14.41L16.725 5.02h5.23c1.434 0 2.633.288 3.595.864.962.577 1.646 1.401 2.05 2.472.404 1.072.483 2.347.238 3.827-.236 1.426-.715 2.645-1.437 3.657a7.062 7.062 0 0 1-2.75 2.322c-1.113.536-2.377.804-3.794.804Zm-1.13-3.214h1.375c.69 0 1.306-.12 1.846-.361.545-.246.999-.654 1.362-1.226.367-.577.633-1.364.797-2.363.154-.944.15-1.673-.014-2.186-.164-.517-.474-.876-.933-1.076-.459-.204-1.051-.306-1.777-.306H19.98l-1.253 7.518Zm-8.496-6.374c.041-.45-.068-.801-.327-1.056-.258-.258-.694-.388-1.307-.388-.39 0-.717.046-.98.136-.26.091-.461.216-.607.375-.14.159-.229.343-.265.551a.792.792 0 0 0 .007.45.85.85 0 0 0 .279.36c.14.11.324.207.551.294.232.086.507.163.824.231l1.09.245c.744.164 1.369.38 1.872.647.509.263.909.577 1.199.94.29.363.481.77.572 1.219.095.45.098.94.007 1.47-.155.918-.51 1.694-1.07 2.33-.558.635-1.286 1.119-2.185 1.45-.899.331-1.939.497-3.119.497-1.207 0-2.233-.18-3.078-.538-.84-.363-1.448-.917-1.825-1.662-.372-.748-.463-1.704-.272-2.866h3.595c-.054.426-.009.785.136 1.076.146.29.38.51.702.66.322.15.724.225 1.205.225.409 0 .758-.05 1.049-.15.29-.1.52-.238.688-.415.168-.177.27-.38.306-.606a.741.741 0 0 0-.109-.559c-.109-.163-.306-.31-.592-.442s-.68-.252-1.178-.361l-1.335-.3c-1.185-.272-2.08-.722-2.683-1.348-.604-.627-.817-1.485-.64-2.574.145-.89.51-1.666 1.096-2.329.59-.667 1.34-1.185 2.247-1.553.913-.372 1.923-.558 3.03-.558 1.126 0 2.068.188 2.826.565.763.377 1.31.906 1.642 1.587.336.68.426 1.48.272 2.397h-3.623Z\"\n            />\n          </svg>\n          <svg slot=\"icon\" class=\"media-4k-icon hidden\" aria-hidden=\"true\" viewBox=\"0 0 28 24\">\n            <path\n              fill=\"currentColor\"\n              d=\"M13.163 18.887 15.47 5h3.77l-.922 5.615h.19L23.606 5H28l-5.696 6.184 3.499 7.703H21.3l-2.224-5.207-1.546 1.654-.596 3.553h-3.77ZM0 16.717l.488-2.929L7.54 5h2.658l-.65 3.906h-1.52L4.232 13.68l-.027.108h8.246l-.489 2.93H0Zm6.401 2.17.516-3.065.298-1.274L8.788 5h3.526L10.01 18.887H6.4Z\"\n            />\n          </svg>\n        </media-rendition-menu-button>\n        <media-pip-button>\n          <svg\n            slot=\"enter\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"2\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n            <path d=\"M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4\"></path>\n            <rect x=\"14\" y=\"14\" width=\"7\" height=\"5\" rx=\"1\" fill=\"currentColor\"></rect>\n            <line x1=\"7\" y1=\"9\" x2=\"11\" y2=\"13\"></line>\n            <path d=\"M8 13h3v-3\"></path>\n          </svg>\n          <svg\n            slot=\"exit\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"2\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n            <path d=\"M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4\"></path>\n            <rect x=\"14\" y=\"14\" width=\"7\" height=\"5\" rx=\"1\" fill=\"currentColor\"></rect>\n            <line x1=\"7\" y1=\"9\" x2=\"11\" y2=\"13\"></line>\n            <path d=\"M7 12v-3h3\"></path>\n          </svg>\n        </media-pip-button>\n        <media-airplay-button></media-airplay-button>\n        <media-cast-button>\n          <svg\n            slot=\"enter\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"2\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n            <line x1=\"3\" y1=\"19\" x2=\"3.01\" y2=\"19\"></line>\n            <path d=\"M7 19a4 4 0 0 0 -4 -4\"></path>\n            <path d=\"M11 19a8 8 0 0 0 -8 -8\"></path>\n            <path d=\"M15 19h3a3 3 0 0 0 3 -3v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -2.8 2\"></path>\n          </svg>\n          <svg\n            slot=\"exit\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"2\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n            <path d=\"M3 19h.01\"></path>\n            <path d=\"M7 19a4 4 0 0 0 -4 -4\"></path>\n            <path d=\"M11 19a8 8 0 0 0 -8 -8\"></path>\n            <path\n              d=\"M15 19h3a3 3 0 0 0 .875 -.13m1.997 -2.002a3 3 0 0 0 .128 -.868v-8a3 3 0 0 0 -3 -3h-9m-3.865 .136a3 3 0 0 0 -1.935 1.864\"\n            ></path>\n            <path d=\"M3 3l18 18\"></path>\n          </svg>\n        </media-cast-button>\n        <media-fullscreen-button>\n          <svg slot=\"enter\" aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <path\n              stroke=\"currentColor\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M15 5h4v4M15 9l4-4M9 19H5v-4M5 19l4-4M15 19h4v-4M15 15l4 4M9 5H5v4M5 5l4 4\"\n            />\n          </svg>\n          <svg slot=\"exit\" aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <path\n              stroke=\"currentColor\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M5 9h4V5M4.5 4.5 9 9M5 15h4v4M4.5 19.5 9 15M19 9h-4V5M15 9l4.5-4.5M19 15h-4v4M15 15l4.5 4.5\"\n            />\n          </svg>\n        </media-fullscreen-button>\n      </media-control-bar>\n    </div>\n  </div>\n\n  <media-captions-menu anchor=\"auto\" hidden></media-captions-menu>\n  <media-playback-rate-menu anchor=\"auto\" hidden></media-playback-rate-menu>\n  <media-rendition-menu anchor=\"auto\" hidden></media-rendition-menu>\n</media-controller>\n"
  },
  {
    "path": "themes/winamp/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.0.13](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.12...@player.style/winamp@0.0.13) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.0.12](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.11...@player.style/winamp@0.0.12) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.10...@player.style/winamp@0.0.11) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.9...@player.style/winamp@0.0.10) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.8...@player.style/winamp@0.0.9) (2024-10-08)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.7...@player.style/winamp@0.0.8) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.6...@player.style/winamp@0.0.7) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/winamp-v0.0.5...@player.style/winamp@0.0.6) (2024-08-15)\n\n\n### Features\n\n* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))\n\n\n### Bug Fixes\n\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n"
  },
  {
    "path": "themes/winamp/assets/fonts.css",
    "content": "@font-face {\n  font-family: winamp-numbers;\n  src: url('./winamp-numbers.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: winamp;\n  src: url('./winamp.ttf') format('truetype');\n}\n"
  },
  {
    "path": "themes/winamp/package.json",
    "content": "{\n  \"name\": \"@player.style/winamp\",\n  \"version\": \"0.0.13\",\n  \"description\": \"A retro theme inspired by the classic Winamp media player.\",\n  \"author\": \"@muxinc\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/winamp\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/winamp/template.html",
    "content": "<style>\n  :host {\n    --media-range-background: transparent;\n\n    --media-range-track-height: 1px;\n    --media-range-track-background: transparent;\n\n    --media-preview-time-background: transparent;\n    --media-preview-time-margin: 0;\n    --media-preview-time-padding: 0;\n    --media-tooltip-display: none;\n\n    --_c-buttons-image: url('<%= await base64(\"./assets/CBUTTONS.png\") %>');\n    --_monoster-image: url('<%= await base64(\"./assets/MONOSTER.png\") %>');\n\n    image-rendering: pixelated;\n  }\n\n  media-time-range,\n  media-time-range:active,\n  media-time-range:hover {\n    --media-range-thumb-width: 28px;\n    --media-range-thumb-height: 10px;\n    --media-range-thumb-border-radius: 0;\n    --media-range-thumb-background: 58px 0 url('<%= await base64(\"./assets/POSBAR.png\") %>');\n  }\n\n  media-volume-range,\n  media-volume-range:active,\n  media-volume-range:hover {\n    --media-range-thumb-width: 14px;\n    --media-range-thumb-height: 10px;\n    --media-range-thumb-border-radius: 0;\n    --media-range-thumb-background: 53px 443px url('<%= await base64(\"./assets/BALANCE.png\") %>');\n  }\n\n  .wrapper {\n    position: relative;\n    width: 275px;\n    height: 116px;\n    background: url('<%= await base64(\"./assets/MAIN.png\") %>');\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n\n  .controls {\n    position: absolute;\n    top: 88px;\n    left: 16px;\n    display: flex;\n  }\n\n  media-seek-backward-button {\n    display: block;\n    overflow: hidden;\n    padding: 0;\n    width: 23px;\n    height: 18px;\n  }\n\n  media-seek-backward-button div[slot='icon'] {\n    width: 23px;\n    height: 18px;\n    background: 136px 0 var(--_c-buttons-image);\n  }\n\n  media-seek-backward-button:active div[slot='icon'] {\n    width: 23px;\n    height: 18px;\n    background: 136px 18px var(--_c-buttons-image);\n  }\n\n  media-play-button {\n    display: block;\n    overflow: hidden;\n    padding: 0;\n    width: 23px;\n    height: 18px;\n  }\n\n  media-play-button.play div[slot='play'] {\n    width: 23px;\n    height: 18px;\n    background: 114px 0 var(--_c-buttons-image);\n  }\n\n  media-play-button.play div[slot='pause'] {\n    width: 23px;\n    height: 18px;\n    background: 114px 0 var(--_c-buttons-image);\n  }\n\n  media-play-button.play:active div[slot='play'] {\n    width: 23px;\n    height: 18px;\n    background: 114px 18px var(--_c-buttons-image);\n  }\n\n  media-play-button.play:active div[slot='pause'] {\n    width: 23px;\n    height: 18px;\n    background: 114px 18px var(--_c-buttons-image);\n  }\n\n  media-play-button.pause div[slot='pause'] {\n    width: 23px;\n    height: 18px;\n    background: 91px 0 var(--_c-buttons-image);\n  }\n\n  media-play-button.pause div[slot='play'] {\n    width: 23px;\n    height: 18px;\n    background: 91px 0 var(--_c-buttons-image);\n  }\n\n  media-play-button.pause:active div[slot='play'] {\n    width: 23px;\n    height: 18px;\n    background: 91px 18px var(--_c-buttons-image);\n  }\n\n  media-play-button.pause:active div[slot='pause'] {\n    width: 23px;\n    height: 18px;\n    background: 91px 18px var(--_c-buttons-image);\n  }\n\n  media-play-button.stop div[slot='pause'] {\n    width: 23px;\n    height: 18px;\n    background: 68px 0 var(--_c-buttons-image);\n  }\n\n  media-play-button.stop div[slot='play'] {\n    width: 23px;\n    height: 18px;\n    background: 68px 0 var(--_c-buttons-image);\n  }\n\n  media-play-button.stop:active div[slot='play'] {\n    width: 23px;\n    height: 18px;\n    background: 68px 18px var(--_c-buttons-image);\n  }\n\n  media-play-button.stop:active div[slot='pause'] {\n    width: 23px;\n    height: 18px;\n    background: 68px 18px var(--_c-buttons-image);\n  }\n\n  media-seek-forward-button {\n    display: block;\n    overflow: hidden;\n    padding: 0;\n    width: 23px;\n    height: 18px;\n  }\n\n  media-seek-forward-button div[slot='icon'] {\n    width: 23px;\n    height: 18px;\n    background: 45px 0 var(--_c-buttons-image);\n  }\n\n  media-seek-forward-button:active div[slot='icon'] {\n    width: 23px;\n    height: 18px;\n    background: 45px 18px var(--_c-buttons-image);\n  }\n\n  media-fullscreen-button {\n    display: block;\n    overflow: hidden;\n    padding: 0;\n    margin-top: 1px;\n    margin-left: 6px;\n    width: 22px;\n    height: 16px;\n  }\n\n  media-fullscreen-button div[slot='enter'] {\n    width: 23px;\n    height: 16px;\n    background: 22px 0 var(--_c-buttons-image);\n  }\n\n  media-fullscreen-button:active div[slot='enter'] {\n    width: 23px;\n    height: 16px;\n    background: 22px 20px var(--_c-buttons-image);\n  }\n\n  media-time-display {\n    position: absolute;\n    background: black;\n    line-height: 20px;\n    top: 23px;\n    left: 61px;\n    padding: 0;\n    color: #00e201;\n    letter-spacing: -0.04rem;\n    font-family: 'winamp-numbers', monaco;\n    font-size: 83%;\n    font-smooth: never;\n    -webkit-font-smoothing: none;\n  }\n\n  media-time-range {\n    --media-range-bar-color: transparent;\n    --media-time-range-buffered-color: transparent;\n    position: absolute;\n    top: 71px;\n    left: 17px;\n    background: transparent;\n    height: 12px;\n    width: 248px;\n    padding: 0;\n  }\n\n  media-volume-range {\n    --media-range-bar-color: transparent;\n    position: absolute;\n    top: 58px;\n    left: 108px;\n    background: 0 -2px url('<%= await base64(\"./assets/VOLUME.png\") %>');\n    height: 10px;\n    width: 68px;\n    padding: 0;\n  }\n\n  .balance {\n    position: absolute;\n    top: 58px;\n    left: 177px;\n    background: -9px -2px url('<%= await base64(\"./assets/BALANCE.png\") %>');\n    height: 10px;\n    width: 37px;\n    padding: 0;\n  }\n\n  .monoster {\n    position: absolute;\n    left: 215px;\n    top: 40px;\n    width: 50px;\n    height: 15px;\n    display: flex;\n  }\n\n  .monoster :first-child {\n    width: 24px;\n    height: 13px;\n    background: 24px 13px var(--_monoster-image);\n  }\n\n  .monoster :last-child {\n    width: 26px;\n    height: 13px;\n    background: 0px 25px var(--_monoster-image);\n  }\n\n  marquee {\n    position: absolute;\n    left: 111px;\n    top: 27px;\n    width: 153px;\n    letter-spacing: 0.02rem;\n    font-family: winamp, monaco;\n    font-size: 6px;\n    line-height: 1;\n    color: #00e201;\n    font-smooth: never;\n    -webkit-font-smoothing: none;\n    text-transform: uppercase;\n  }\n\n  .kbps {\n    position: absolute;\n    left: 111px;\n    top: 43px;\n    width: 153px;\n    letter-spacing: 0.02rem;\n    font-family: winamp, monaco;\n    font-size: 6px;\n    line-height: 1;\n    color: #00e201;\n    font-smooth: never;\n    -webkit-font-smoothing: none;\n  }\n\n  .khz {\n    position: absolute;\n    left: 156px;\n    top: 43px;\n    width: 153px;\n    letter-spacing: 0.02rem;\n    font-family: winamp, monaco;\n    font-size: 6px;\n    line-height: 1;\n    color: #00e201;\n    font-smooth: never;\n    -webkit-font-smoothing: none;\n  }\n\n  media-play-button.play-pause-indicator {\n    display: block;\n    overflow: hidden;\n    background: none;\n    position: absolute;\n    top: 28px;\n    left: 24px;\n    padding: 0;\n    width: 9px;\n    height: 9px;\n  }\n\n  media-play-button.play-pause-indicator div[slot='play'] {\n    width: 9px;\n    height: 9px;\n    background: 0 0 url('<%= await base64(\"./assets/STOP.png\") %>');\n  }\n\n  media-play-button.play-pause-indicator div[slot='pause'] {\n    width: 9px;\n    height: 9px;\n    background: 0 0 url('<%= await base64(\"./assets/PLAY.png\") %>');\n  }\n\n  media-play-button.vu-meter {\n    display: block;\n    overflow: hidden;\n    background: none;\n    position: absolute;\n    top: 40px;\n    left: 20px;\n    padding: 0;\n    width: 88px;\n    height: 22px;\n  }\n\n  media-play-button.vu-meter div[slot='play'] {\n    width: 88px;\n    height: 22px;\n    background: none;\n  }\n\n  media-play-button.vu-meter div[slot='pause'] {\n    width: 88px;\n    height: 22px;\n    background: 0 0 url('<%= await base64(\"./assets/VU.gif\") %>');\n  }\n\n  .display {\n    position: absolute;\n    left: 10px;\n    top: 22px;\n  }\n\n  .eq {\n    position: absolute;\n    left: 220px;\n    top: 57px;\n    width: 22px;\n    height: 12px;\n    background: 0 0 url('<%= await base64(\"./assets/EQ.png\") %>');\n  }\n\n  .pl {\n    position: absolute;\n    left: 243px;\n    top: 57px;\n    width: 22px;\n    height: 12px;\n    background: 0 0 url('<%= await base64(\"./assets/PL.png\") %>');\n  }\n\n  .loop {\n    position: absolute;\n    left: 211px;\n    top: 89px;\n    width: 28px;\n    height: 14px;\n    background: 0 0 url('<%= await base64(\"./assets/LOOP.png\") %>');\n  }\n\n  media-captions-button {\n    position: absolute;\n    left: 165px;\n    top: 89px;\n    width: 46px;\n    height: 14px;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  media-captions-button div[slot='on'] {\n    width: 46px;\n    height: 14px;\n    background: 0 0 url('<%= await base64(\"./assets/SHUFFLE.png\") %>') no-repeat;\n  }\n\n  media-captions-button div[slot='off'] {\n    width: 46px;\n    height: 14px;\n    background: 0 0 url('<%= await base64(\"./assets/SHUFFLE.png\") %>') no-repeat;\n  }\n\n  .container {\n    width: 275px;\n    margin: 0 auto;\n    display: flex;\n    flex-flow: column-reverse wrap;\n  }\n\n  .window {\n    width: 275px;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .window .top,\n  .window .bottom {\n    width: 100%;\n    height: 20px;\n    flex: none;\n    display: flex;\n    flex: none;\n  }\n\n  .window .top :nth-child(1) {\n    width: 25px;\n    height: 20px;\n    flex: none;\n    background-image: url('<%= await base64(\"./assets/WINDOWTL.png\") %>');\n  }\n\n  .window .top :nth-child(2) {\n    height: 20px;\n    width: 100%;\n    flex-grow: 1;\n    background-image: url('<%= await base64(\"./assets/WINDOWT.png\") %>');\n    background-repeat: no-repeat;\n  }\n\n  .window .top :nth-child(3) {\n    width: 25px;\n    height: 20px;\n    flex: none;\n    background-image: url('<%= await base64(\"./assets/WINDOWTR.png\") %>');\n  }\n\n  .window .bottom :nth-child(1) {\n    width: 125px;\n    height: 14px;\n    flex: none;\n    background-image: url('<%= await base64(\"./assets/WINDOWBL.png\") %>');\n  }\n\n  .window .bottom :nth-child(2) {\n    height: 14px;\n    width: 100%;\n    flex-grow: 1;\n    background-image: url('<%= await base64(\"./assets/WINDOWB.png\") %>');\n    background-repeat: no-repeat;\n  }\n\n  .window .bottom :nth-child(3) {\n    width: 125px;\n    height: 14px;\n    flex: none;\n    background-image: url('<%= await base64(\"./assets/WINDOWBR.png\") %>');\n  }\n\n  .window .center {\n    width: 100%;\n    height: 108px;\n    display: flex;\n  }\n\n  .window .center .center-left {\n    width: 11px;\n    height: 100%;\n    flex: none;\n    background-image: url('<%= await base64(\"./assets/WINDOWL.png\") %>');\n    background-repeat: no-repeat;\n    background-position: 0 0;\n  }\n\n  .window .center .center-middle {\n    width: 100%;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .window .center .center-middle media-controller {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: black;\n  }\n\n  .window .center .center-right {\n    width: 8px;\n    height: 100%;\n    flex: none;\n    background-image: url('<%= await base64(\"./assets/WINDOWR.png\") %>');\n  }\n</style>\n\n<div class=\"container\">\n  <div class=\"window\">\n    <div class=\"top\">\n      <div></div>\n      <div></div>\n      <div></div>\n    </div>\n    <div class=\"center\">\n      <div class=\"center-left\"></div>\n      <div class=\"center-middle\">\n        <div style=\"width: 100%; height: 100%; background: green\">\n          <media-controller id=\"controller\">\n            <slot name=\"media\" slot=\"media\"></slot>\n            <slot name=\"poster\" slot=\"poster\"></slot>\n          </media-controller>\n        </div>\n      </div>\n      <div class=\"center-right\"></div>\n    </div>\n    <div class=\"bottom\">\n      <div></div>\n      <div></div>\n      <div></div>\n    </div>\n  </div>\n  <div class=\"wrapper\">\n    <div class=\"controls\">\n      <media-seek-backward-button mediacontroller=\"controller\">\n        <div slot=\"icon\"></div>\n      </media-seek-backward-button>\n      <media-play-button class=\"play\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n      <media-play-button class=\"pause\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n      <media-play-button class=\"stop\" mediacontroller=\"controller\">\n        <div slot=\"play\"></div>\n        <div slot=\"pause\"></div>\n      </media-play-button>\n      <media-seek-forward-button mediacontroller=\"controller\">\n        <div slot=\"icon\"></div>\n      </media-seek-forward-button>\n      <media-fullscreen-button mediacontroller=\"controller\">\n        <div slot=\"enter\"></div>\n      </media-fullscreen-button>\n    </div>\n    <media-time-display mediacontroller=\"controller\"></media-time-display>\n    <media-time-range mediacontroller=\"controller\">\n      <div slot=\"preview\"></div>\n    </media-time-range>\n    <media-volume-range mediacontroller=\"controller\"></media-volume-range>\n    <img class=\"header\" src=\"<%= await base64('./assets/HEADER.png') %>\" />\n    <img class=\"display\" src=\"<%= await base64('./assets/DISPLAY.png') %>\" />\n    <div class=\"eq\"></div>\n    <div class=\"pl\"></div>\n    <div class=\"loop\"></div>\n    <media-captions-button mediacontroller=\"controller\">\n      <div slot=\"on\"></div>\n      <div slot=\"off\"></div>\n    </media-captions-button>\n    <div class=\"balance\"></div>\n    <div class=\"monoster\">\n      <div></div>\n      <div></div>\n    </div>\n    <marquee scrolldelay=\"200\">Media Chrome, it really whips the llama's ass!</marquee>\n    <div class=\"kbps\">192</div>\n    <div class=\"khz\">44</div>\n    <media-play-button mediacontroller=\"controller\" class=\"play-pause-indicator\">\n      <div slot=\"play\"></div>\n      <div slot=\"pause\"></div>\n    </media-play-button>\n    <media-play-button mediacontroller=\"controller\" class=\"vu-meter\">\n      <div slot=\"play\"></div>\n      <div slot=\"pause\"></div>\n    </media-play-button>\n  </div>\n</div>\n"
  },
  {
    "path": "themes/x-mas/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/x-mas@0.1.1...@player.style/x-mas@0.1.2) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/x-mas@0.1.0...@player.style/x-mas@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/x-mas@0.0.3...@player.style/x-mas@0.1.0) (2024-12-09)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/x-mas-v0.0.2...@player.style/x-mas@0.0.3) (2024-12-02)\n\n\n### Features\n\n* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))\n"
  },
  {
    "path": "themes/x-mas/package.json",
    "content": "{\n  \"name\": \"@player.style/x-mas\",\n  \"version\": \"0.1.2\",\n  \"description\": \"A festive Christmas theme for the player with cozy red and green tones, twinkling lights, and a warm holiday vibe—perfect for spreading seasonal cheer!\",\n  \"author\": \"@qualabs\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/x-mas\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/x-mas/template.html",
    "content": "<style>\n  :host {\n    --media-primary-color: black;\n    --media-tertiary-color: var(--media-accent-color, #7596cc);\n    --media-text-color: white;\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n\n    --media-range-track-height: 6px;\n    --media-range-bar-color: repeating-linear-gradient(45deg, #e72d33, #e72d33 6px, #ffffff 6px, #ffffff 12px);\n    --media-range-track-background: rgba(255, 255, 255, 0.4);\n    --media-range-track-border-radius: 9999px;\n\n    --media-range-thumb-background: var(--media-tertiary-color);\n    --media-range-thumb-width: 14px;\n    --media-range-thumb-height: 14px;\n    --media-tooltip-display: none;\n  }\n\n  :host([mediastreamtype='live']) media-time-range,\n  :host([mediastreamtype='live']) media-time-display {\n    opacity: 0;\n  }\n\n  media-control-bar {\n    position: relative;\n    margin: 0.5rem;\n    padding: 0.5rem;\n    align-items: center;\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  .icon-button {\n    position: relative;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    height: 2rem;\n    width: 2rem;\n    transition: ease-in-out 0.2s;\n    padding: 0;\n  }\n\n  .icon-button * {\n    transition: ease-in-out 0.2s all;\n  }\n\n  .icon-button:hover svg {\n    transition: ease-in-out 0.3s;\n    transform: scale(1.05);\n  }\n\n  .icon-button:hover svg .ornament {\n    transform: scale(1.2) translate(-4px, 0px);\n  }\n\n  .icon-button svg {\n    position: absolute;\n    overflow: hidden;\n    width: 100%;\n    height: 1.25rem;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  div[slot='centered-chrome'] {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    overflow: hidden;\n  }\n\n  div[slot='centered-chrome'] > media-play-button {\n    flex: none;\n    display: flex;\n    margin-bottom: 10px;\n    align-items: center;\n    justify-items: center;\n    height: 70%;\n    width: 20%;\n    margin-top: -1rem;\n    border-radius: 9999px;\n  }\n\n  div[slot='centered-chrome'] > media-play-button > svg {\n    height: 100%;\n    filter: drop-shadow(0px 0px 36px #00000069);\n  }\n\n  media-time-range {\n    --media-secondary-color: transparent;\n    height: 100%;\n  }\n\n  media-time-range {\n    --media-range-track-height: 0.5rem;\n    --media-preview-time-background: var(--_secondary-color);\n    --media-preview-time-background: transparent;\n    --media-preview-thumbnail-border-radius: 0;\n  }\n\n  media-time-range::part(thumb) {\n    background: no-repeat\n      url('data:image/svg+xml,<svg  viewBox=\"0 0 27 45\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.095 40.061C11.1593 41.2534 11.2235 42.4458 11.2877 43.6369C11.2931 43.7333 11.3814 43.8296 11.3493 43.9113C11.079 44.6072 11.5594 44.5911 11.6236 44.6072C12.4333 44.8066 16.4134 44.7156 16.4991 44.1682C16.3358 42.1126 16.1725 40.0556 16.0106 38C15.1019 38.2998 11.724 39.076 11 39.8723\" fill=\"%23123342\"/><path d=\"M4.87324 29.1051C3.9565 31.5515 2.37063 33.7423 0.33374 35.3777C1.04839 36.5808 2.07085 37.6488 3.37033 38.1667C4.66982 38.6846 6.26774 38.5695 7.33302 37.6635C8.12262 38.7662 9.15578 39.7619 10.4499 40.1674C11.744 40.5729 13.3272 40.2544 14.1235 39.157C14.2105 39.0366 14.2988 38.9001 14.4394 38.8519C14.6321 38.7863 14.8328 38.9134 14.9974 39.0339C15.8178 39.6348 16.7359 40.2745 17.7476 40.1755C19.1047 40.043 19.9505 38.6846 20.5848 37.4775C22.4384 38.6886 25.1377 38.3768 26.6674 36.7762C24.1514 33.8989 22.1386 30.5812 20.7481 27.02C18.6992 27.8203 16.412 27.4643 14.2132 27.4001C10.9852 27.3051 7.73853 27.8752 4.73673 29.0636\" fill=\"%23099667\"/><path d=\"M4.55073 29.0156C3.84947 30.8758 2.75073 32.5848 1.35622 34.0021C0.958749 34.4063 0.538525 34.785 0.0968875 35.141C-0.0155293 35.232 -0.0262356 35.4287 0.044694 35.5465C0.646927 36.5529 1.44455 37.4683 2.45496 38.0826C3.46538 38.6968 4.66181 38.9471 5.82747 38.7276C6.47119 38.6058 7.06807 38.3208 7.56993 37.9005L7.04398 37.8323C7.72249 38.7745 8.55223 39.651 9.60012 40.1783C10.5757 40.6681 11.7106 40.8247 12.7638 40.4901C13.263 40.3309 13.7341 40.0659 14.1048 39.6925C14.1958 39.6015 14.2775 39.5025 14.3564 39.3994C14.4046 39.3365 14.5023 39.1719 14.5545 39.1639C14.6147 39.1532 14.7847 39.2897 14.8516 39.3392C14.9827 39.4342 15.1139 39.5306 15.2464 39.6229C15.7549 39.9762 16.309 40.3055 16.9179 40.446C17.5268 40.5865 18.0769 40.5209 18.6162 40.276C19.6909 39.7862 20.348 38.6473 20.8739 37.6463L20.4162 37.7667C21.9686 38.7678 24.035 38.7852 25.6597 37.942C26.12 37.7025 26.5443 37.3853 26.9056 37.0119C27.0368 36.8754 27.0261 36.6773 26.9056 36.5382C24.9745 34.326 23.3457 31.8541 22.0677 29.2097C21.7063 28.4629 21.3744 27.7027 21.072 26.9305C21.0118 26.7753 20.8431 26.6267 20.6598 26.6963C18.6978 27.4511 16.5633 27.1567 14.517 27.0751C12.3664 26.9894 10.2064 27.1888 8.10792 27.6679C6.92888 27.9369 5.7726 28.2969 4.64843 28.7399C4.4798 28.8055 4.36337 28.9634 4.41423 29.1521C4.45839 29.3127 4.65646 29.4519 4.82642 29.3863C6.81379 28.6034 8.90688 28.0788 11.0308 27.8553C12.0974 27.7429 13.172 27.7027 14.244 27.7349C15.316 27.767 16.3371 27.862 17.385 27.8673C18.5533 27.874 19.739 27.7643 20.8378 27.3414L20.4256 27.1072C21.5243 29.9149 22.9898 32.5728 24.7965 34.9871C25.3157 35.6816 25.8604 36.3561 26.4305 37.0106V36.5368C25.3077 37.6985 23.5505 38.1361 21.9967 37.7333C21.5524 37.6182 21.1376 37.4348 20.7521 37.1859C20.6049 37.0909 20.3761 37.1511 20.2944 37.3063C19.8635 38.1267 19.3657 39.0448 18.552 39.548C18.1558 39.7929 17.6915 39.904 17.2284 39.8263C16.6583 39.73 16.1497 39.4289 15.6773 39.109C15.2049 38.7892 14.612 38.1936 14.0566 38.7049C13.8773 38.8708 13.7582 39.097 13.5789 39.2669C13.4156 39.4222 13.2323 39.548 13.0342 39.655C12.2098 40.0953 11.2007 40.094 10.3348 39.7768C9.20532 39.362 8.30733 38.4533 7.6181 37.495C7.48428 37.3104 7.26881 37.2796 7.09216 37.4268C6.34271 38.0544 5.28278 38.2512 4.33393 38.0906C3.31147 37.9166 2.41481 37.3599 1.69615 36.6265C1.2786 36.1996 0.923954 35.7205 0.617484 35.2092L0.565291 35.6147C2.17927 34.3139 3.51891 32.6691 4.4691 30.8263C4.74211 30.2977 4.98166 29.7517 5.19044 29.1949C5.25468 29.0263 5.11951 28.8282 4.95624 28.7827C4.76887 28.7305 4.60828 28.847 4.54404 29.0169L4.55073 29.0156Z\" fill=\"%23099667\"/><path d=\"M8.20285 18.6639C6.47243 21.8571 4.74202 25.0503 3.01294 28.2448C4.56135 29.7664 7.34366 29.7664 8.89207 28.2448C9.05802 28.0815 9.26679 27.8875 9.49029 27.957C9.67765 28.0159 9.75795 28.2314 9.83289 28.4134C10.2611 29.464 11.3813 30.1907 12.5148 30.1545C13.6484 30.1184 14.719 29.3221 15.0803 28.2461C15.1432 28.0601 15.2329 27.8286 15.4283 27.8219C15.5287 27.8179 15.6183 27.8821 15.6973 27.9437C16.2621 28.3907 16.7465 28.942 17.3568 29.3261C17.9657 29.7115 18.766 29.9096 19.4057 29.5764C20.2636 29.1294 20.4429 27.9704 20.3077 27.0122C20.9595 27.5542 21.6527 28.1163 22.4891 28.2595C23.3256 28.4027 24.3266 27.945 24.4658 27.1086C21.5925 24.7157 19.3736 21.548 18.1049 18.0309C14.885 17.7432 11.6302 17.8556 8.43705 18.3628\" fill=\"%2319BC8A\"/><path d=\"M7.9141 18.4952C6.56644 20.9831 5.21744 23.471 3.86978 25.9602C3.48702 26.6655 3.10561 27.3708 2.72286 28.0761C2.65327 28.2059 2.66665 28.3759 2.77505 28.4816C3.86041 29.5348 5.45298 29.9122 6.91975 29.6245C7.64243 29.4826 8.32362 29.1628 8.89106 28.6944C9.02489 28.5833 9.13998 28.4454 9.27916 28.3411C9.40764 28.2447 9.40362 28.2768 9.46786 28.4106C9.54682 28.5766 9.60838 28.7492 9.70206 28.9085C9.80913 29.0932 9.93894 29.2658 10.0821 29.4251C10.6175 30.0233 11.3776 30.398 12.1739 30.477C12.9702 30.5559 13.7598 30.2722 14.3794 29.7824C14.6765 29.5482 14.9321 29.2578 15.1262 28.9339C15.2319 28.7599 15.3162 28.5712 15.3845 28.3799C15.4045 28.3223 15.4206 28.2648 15.4474 28.2099C15.4514 28.2032 15.4862 28.1323 15.4889 28.139C15.541 28.2193 15.2961 28.0587 15.442 28.1724C16.1486 28.7211 16.7375 29.4505 17.5686 29.8212C18.4719 30.2254 19.5479 30.1718 20.1796 29.3341C20.6908 28.6556 20.735 27.7335 20.6252 26.9238L20.0658 27.249C20.8434 27.8954 21.74 28.6275 22.808 28.6194C23.6658 28.6141 24.616 28.1015 24.7833 27.1968C24.8034 27.0857 24.7927 26.9506 24.6977 26.8716C22.4855 25.0248 20.6694 22.7323 19.3766 20.1574C19.0153 19.4374 18.6967 18.6986 18.4237 17.9412C18.3689 17.7899 18.2591 17.7096 18.1012 17.6949C15.5772 17.4714 13.0331 17.4902 10.5117 17.7538C9.78638 17.8301 9.0637 17.9251 8.3437 18.0389C8.1657 18.067 8.06533 18.2905 8.10949 18.4511C8.16169 18.6411 8.34236 18.7134 8.52169 18.6853C10.9842 18.2958 13.4841 18.1473 15.976 18.2343C16.6853 18.2583 17.3946 18.3038 18.1012 18.3654L17.7787 18.1192C18.7918 20.9162 20.3763 23.4924 22.4226 25.6524C22.99 26.2506 23.5922 26.8154 24.2252 27.344L24.1396 27.0188C24.0218 27.6558 23.338 27.9717 22.7223 27.9476C21.8913 27.9155 21.1552 27.2851 20.5396 26.7739C20.2679 26.5477 19.936 26.7672 19.9802 27.0991C20.0618 27.7027 20.019 28.4374 19.6389 28.942C19.1866 29.5442 18.3675 29.4826 17.7559 29.1695C17.3866 28.9808 17.0694 28.7131 16.7629 28.4374C16.6037 28.2942 16.4457 28.147 16.2851 28.0051C16.1152 27.8539 15.9345 27.6746 15.7338 27.5648C15.533 27.4551 15.2988 27.4551 15.1101 27.5822C14.9388 27.6973 14.8505 27.8847 14.7809 28.0707C14.6604 28.3919 14.5172 28.6863 14.2857 28.946C13.8361 29.4505 13.191 29.7931 12.5085 29.8145C11.8259 29.8359 11.1367 29.5428 10.6509 29.053C10.3926 28.7921 10.224 28.4896 10.0808 28.1537C9.90549 27.7455 9.53076 27.4725 9.08377 27.6759C8.75455 27.8258 8.5257 28.1497 8.22994 28.3544C7.97031 28.5351 7.68793 28.685 7.39083 28.7934C5.999 29.2993 4.3248 29.0517 3.24479 28.0038L3.29699 28.4093C4.64465 25.9214 5.99365 23.4335 7.34131 20.9443C7.72406 20.239 8.10548 19.5337 8.48823 18.8285C8.69299 18.4497 8.11619 18.1111 7.91009 18.4912L7.9141 18.4952Z\" fill=\"%2319BC8A\"/><path d=\"M2.78417 28.5285C4.65243 30.5547 7.7827 30.2978 9.28427 27.9959L9.42345 28.3893C9.8236 29.5443 11.0455 30.3767 12.262 30.3245C13.4678 30.2804 14.6093 29.3462 14.9064 28.1792L15.0496 27.6131L15.3882 28.0869C16.0614 29.0224 17.0598 29.8467 18.2348 29.9378C19.3242 30.0234 20.6009 29.2097 20.6437 28.0481L20.6558 27.6426L20.9422 27.9169C22.1734 29.0719 24.4672 28.6289 25.2367 27.1313C24.5556 28.8283 22.077 29.377 20.7026 28.1819L21.001 28.0508C21.0051 29.4667 19.549 30.4972 18.204 30.4236C16.851 30.3526 15.7108 29.4546 14.9479 28.4041L15.4297 28.3117C15.2544 29.021 14.8288 29.65 14.2681 30.097C12.44 31.6013 9.73795 30.7367 9.00189 28.5272L9.38598 28.5941C8.97646 29.0986 8.45319 29.5001 7.87237 29.7745C6.14463 30.623 3.90968 30.0809 2.78149 28.5272L2.78417 28.5285Z\" fill=\"%23123342\"/><path d=\"M7.26876 17.2359C9.5733 13.2183 11.7454 9.1245 13.7782 4.9624C14.6709 9.42695 16.9112 13.4887 19.122 17.4688C17.8493 18.6184 15.6211 18.4564 14.529 17.1329C14.1422 17.8448 13.5935 18.5167 12.8387 18.8084C12.0826 19.1001 11.0976 18.8967 10.6935 18.1941C10.0042 18.7843 8.97374 18.6826 8.09181 18.4725C7.80675 18.4042 7.50831 18.3213 7.30087 18.1152C7.09344 17.9091 7.01716 17.5397 7.21656 17.3242\" fill=\"%232EBF8F\"/><path d=\"M7.55658 17.4047C9.35525 14.269 11.0723 11.0879 12.7063 7.86397C13.1667 6.95661 13.6191 6.04523 14.066 5.13117L13.4544 5.05087C14.1611 8.56524 15.6961 11.8414 17.377 14.9824C17.8534 15.8723 18.3419 16.7543 18.8317 17.6362L18.8839 17.2307C17.7196 18.2652 15.755 18.0752 14.7646 16.8948C14.6268 16.7302 14.3364 16.7864 14.2387 16.963C13.88 17.6161 13.3675 18.3 12.622 18.5275C12.0452 18.7042 11.3092 18.5743 10.9799 18.0243C10.8608 17.8262 10.6186 17.8195 10.454 17.9561C9.97889 18.3508 9.28298 18.3455 8.70617 18.2545C8.39435 18.205 8.05309 18.1528 7.76268 18.0243C7.61948 17.9614 7.31435 17.7219 7.45085 17.5586C7.56728 17.4207 7.58602 17.2213 7.45085 17.0848C7.33175 16.9657 7.09487 16.9456 6.9771 17.0848C6.66126 17.4622 6.71747 18.0029 7.06141 18.3482C7.40535 18.6935 7.8858 18.7778 8.32476 18.8621C9.22409 19.0347 10.189 19.0414 10.9277 18.4285L10.4018 18.3602C10.8689 19.1418 11.8632 19.4121 12.7144 19.1953C13.6699 18.9517 14.3605 18.1287 14.8168 17.299L14.2909 17.3672C15.5234 18.8367 17.9391 18.9638 19.3563 17.7031C19.4687 17.6041 19.4781 17.4221 19.4085 17.2976C17.6968 14.2169 15.9691 11.108 14.8623 7.7462C14.5518 6.8027 14.2936 5.84448 14.0982 4.87021C14.0433 4.59585 13.611 4.53697 13.4866 4.78991C11.8993 8.03795 10.2292 11.2445 8.47599 14.4056C7.98216 15.2955 7.48297 16.1815 6.9771 17.0634C6.76297 17.4381 7.34111 17.7754 7.55524 17.4007L7.55658 17.4047Z\" fill=\"%232EBF8F\"/><path d=\"M6.91821 17.6532C7.68372 18.8938 9.43822 19.2123 10.5222 18.2166L10.7163 18.0427L10.8742 18.2635C11.4831 19.1253 12.7786 19.3595 13.6271 18.7131C14.0031 18.4589 14.24 18.056 14.402 17.6438C14.8409 17.945 15.316 18.2086 15.8339 18.3531C16.8939 18.6797 18.9267 18.7734 19.3496 17.4766C19.2345 18.5017 18.0234 18.8604 17.1401 18.9219C16.1792 18.9888 15.2036 18.7493 14.3752 18.2514L14.7553 18.1337C14.5853 18.5432 14.2962 18.8925 13.9456 19.1521C12.875 19.9912 11.2021 19.6714 10.4794 18.5298L10.8314 18.5766C9.56536 19.6339 7.53383 19.207 6.91821 17.6532Z\" fill=\"%230F3548\"/><path d=\"M9.01115 16.5106C8.93888 16.1613 9.14632 15.8254 9.49293 15.7397C9.56654 16.089 9.35643 16.4236 9.01115 16.5106Z\" fill=\"%23FFE4C7\"/><path d=\"M10.6453 13.6156C10.6801 12.9759 10.9223 12.3709 11.3439 11.8892C11.4027 12.5329 11.1337 13.1927 10.6453 13.6156Z\" fill=\"%23FFE4C7\"/><path d=\"M14.1196 11.1118C14.4729 11.5227 14.6737 12.0165 14.6978 12.5572C14.228 12.2587 13.9858 11.6511 14.1196 11.1118Z\" fill=\"%23FFE4C7\"/><path d=\"M15.8555 15.8359C16.281 15.9564 16.6103 16.2174 16.819 16.6068C16.3587 16.6563 15.909 16.295 15.8555 15.8359Z\" fill=\"%23FFE4C7\"/><path d=\"M12.7704 15.4512C13.0434 15.7028 13.0862 16.1136 12.8667 16.4147C12.591 16.1631 12.5522 15.7523 12.7704 15.4512Z\" fill=\"%23FFE4C7\"/><path d=\"M11.5154 23.2578C11.668 23.6954 11.5516 24.1879 11.2183 24.5091C11.0644 24.0715 11.1835 23.5803 11.5154 23.2578Z\" fill=\"%23FFE4C7\"/><path d=\"M7.45631 26.436C7.54999 26.974 7.05884 27.5375 6.51147 27.5134C6.78583 27.0905 7.07356 26.7653 7.45631 26.436Z\" fill=\"%23FFE4C7\"/><path d=\"M8.92045 21.0444C8.9325 21.549 8.67555 22.0308 8.24595 22.2984C8.23123 21.7939 8.4922 21.3121 8.92045 21.0444Z\" fill=\"%23FFE4C7\"/><path d=\"M17.3047 26.5347C17.745 26.8933 18.0849 27.2895 18.366 27.7833C17.7758 27.7017 17.2913 27.1289 17.3047 26.5347Z\" fill=\"%23FFE4C7\"/><path d=\"M16.8188 20.4624C17.0544 20.7635 17.1695 21.0432 17.2069 21.4246C16.7733 21.3818 16.5378 20.7943 16.8188 20.4624Z\" fill=\"%23FFE4C7\"/><path d=\"M20.5808 25.4736C20.9716 25.4361 21.3343 25.6757 21.448 26.0517C21.0572 26.0905 20.6959 25.8483 20.5808 25.4736Z\" fill=\"%23FFE4C7\"/><path d=\"M14.0996 23.8433C14.4556 24.1511 14.6095 24.6409 14.4877 25.0959C14.1304 24.7894 13.9805 24.2983 14.0996 23.8433Z\" fill=\"%23FFE4C7\"/><path d=\"M12.1201 26.9937C12.3155 27.4701 12.3128 28.0362 12.0077 28.4658C11.811 27.9893 11.8177 27.4246 12.1201 26.9937Z\" fill=\"%23FFE4C7\"/><path d=\"M11.5419 33.2109C11.6369 33.8386 11.5272 34.5091 11.1324 35.019C11.036 34.3913 11.1484 33.7208 11.5419 33.2109Z\" fill=\"%23FFE4C7\"/><path d=\"M5.256 31.7446C5.10745 32.4459 4.50521 33.0428 3.80127 33.1806C4.21614 32.6185 4.69124 32.1541 5.256 31.7446Z\" fill=\"%23FFE4C7\"/><path d=\"M7.57405 35.2173C7.44155 35.8971 6.88215 36.4847 6.20898 36.6479C6.573 36.0778 7.02267 35.6094 7.57405 35.2173Z\" fill=\"%23FFE4C7\"/><path d=\"M15.2291 30.536C15.6788 30.8853 16.0281 31.3778 16.376 31.8168C16.4978 31.9533 16.5888 32.1219 16.7829 32.162C16.5915 32.2852 16.3426 32.1366 16.1793 32.0282C15.6962 31.6602 15.3549 31.1289 15.2278 30.5347L15.2291 30.536Z\" fill=\"%23FFE4C7\"/><path d=\"M16.147 35.6929C16.5097 36.0837 16.883 36.5775 17.227 36.9816C17.3447 37.1275 17.4665 37.2707 17.583 37.4407C17.3809 37.3992 17.2002 37.3082 17.0329 37.1958C16.5444 36.8545 16.1697 36.3005 16.147 35.6929Z\" fill=\"%23FFE4C7\"/><path d=\"M20.582 31.8354C21.0277 32.1138 21.3542 32.5059 21.5389 32.9971C21.0103 32.8793 20.5981 32.3761 20.582 31.8354Z\" fill=\"%23FFE4C7\"/><path d=\"M23.2737 35.8931C23.8063 35.9533 24.2841 36.2772 24.533 36.7509C24.0004 36.692 23.5239 36.3655 23.2737 35.8931Z\" fill=\"%23FFE4C7\"/><path d=\"M14.1757 0.300113L14.6013 1.60896C14.6588 1.7883 14.8261 1.91008 15.0148 1.91008H16.3906C16.8121 1.91008 16.9874 2.44941 16.6462 2.697L15.5327 3.50533C15.3801 3.61641 15.3159 3.8118 15.3748 3.99113L15.8004 5.29998C15.9302 5.70013 15.4725 6.03337 15.1312 5.78578L14.0178 4.97745C13.8652 4.86637 13.6591 4.86637 13.5065 4.97745L12.3931 5.78578C12.0518 6.03337 11.5941 5.70013 11.7239 5.29998L12.1495 3.99113C12.207 3.8118 12.1441 3.61507 11.9916 3.50533L10.8781 2.697C10.5369 2.44941 10.7122 1.91008 11.1337 1.91008H12.5095C12.6982 1.91008 12.8655 1.7883 12.923 1.60896L13.3486 0.300113C13.4784 -0.100038 14.0459 -0.100038 14.1757 0.300113Z\" fill=\"%23F8B000\"/><path d=\"M8.5054 14.6304C8.98435 14.6304 9.37261 14.2422 9.37261 13.7632C9.37261 13.2843 8.98435 12.896 8.5054 12.896C8.02645 12.896 7.63818 13.2843 7.63818 13.7632C7.63818 14.2422 8.02645 14.6304 8.5054 14.6304Z\" fill=\"%23E72D33\"/><path d=\"M19.2051 24.3179C19.2051 23.7184 18.7193 23.2339 18.1211 23.2339C17.5229 23.2339 17.0371 23.7197 17.0371 24.3179C17.0371 24.9161 17.5229 25.4019 18.1211 25.4019C18.7193 25.4019 19.2051 24.9161 19.2051 24.3179Z\" fill=\"%23E72D33\"/><path d=\"M8.7945 33.5723C8.7945 32.9727 8.3087 32.4883 7.71048 32.4883C7.11227 32.4883 6.62646 32.9741 6.62646 33.5723C6.62646 34.1705 7.11227 34.6563 7.71048 34.6563C8.3087 34.6563 8.7945 34.1705 8.7945 33.5723Z\" fill=\"%23E72D33\"/><path d=\"M16.313 11.3765C16.313 10.9375 15.9571 10.5815 15.5181 10.5815C15.0791 10.5815 14.7231 10.9375 14.7231 11.3765C14.7231 11.8155 15.0791 12.1714 15.5181 12.1714C15.9571 12.1714 16.313 11.8155 16.313 11.3765Z\" fill=\"%23E72D33\"/><path d=\"M9.22805 25.5484C9.707 25.5484 10.0953 25.1601 10.0953 24.6812C10.0953 24.2022 9.707 23.814 9.22805 23.814C8.7491 23.814 8.36084 24.2022 8.36084 24.6812C8.36084 25.1601 8.7491 25.5484 9.22805 25.5484Z\" fill=\"%23E72D33\"/><path d=\"M16.7466 35.5973C17.465 35.5973 18.0474 35.0149 18.0474 34.2964C18.0474 33.578 17.465 32.9956 16.7466 32.9956C16.0282 32.9956 15.4458 33.578 15.4458 34.2964C15.4458 35.0149 16.0282 35.5973 16.7466 35.5973Z\" fill=\"%23E72D33\"/><path d=\"M13.2764 14.0518C13.2764 13.6128 12.9204 13.2568 12.4815 13.2568C12.0425 13.2568 11.6865 13.6128 11.6865 14.0518C11.6865 14.4907 12.0425 14.8467 12.4815 14.8467C12.9204 14.8467 13.2764 14.4907 13.2764 14.0518Z\" fill=\"%23F8B000\"/><path d=\"M3.80546 27.2105C4.44406 27.2105 4.96174 26.6928 4.96174 26.0542C4.96174 25.4156 4.44406 24.8979 3.80546 24.8979C3.16686 24.8979 2.64917 25.4156 2.64917 26.0542C2.64917 26.6928 3.16686 27.2105 3.80546 27.2105Z\" fill=\"%23F8B000\"/><path d=\"M11.9756 39.7906C12.6142 39.7906 13.1319 39.2729 13.1319 38.6343C13.1319 37.9957 12.6142 37.478 11.9756 37.478C11.337 37.478 10.8193 37.9957 10.8193 38.6343C10.8193 39.2729 11.337 39.7906 11.9756 39.7906Z\" fill=\"%23F8B000\"/><path d=\"M22.5308 31.6197C23.0896 31.6197 23.5425 31.1667 23.5425 30.6079C23.5425 30.0492 23.0896 29.5962 22.5308 29.5962C21.972 29.5962 21.519 30.0492 21.519 30.6079C21.519 31.1667 21.972 31.6197 22.5308 31.6197Z\" fill=\"%23F8B000\"/></svg>');\n    width: 2.4rem;\n    height: 4rem;\n    margin-bottom: 1rem;\n    margin-left: -1rem;\n  }\n\n  media-controller:not([breakpointsm]) media-time-range::part(thumb) {\n    width: 1.4rem;\n    height: 3rem;\n    margin-bottom: -0.5rem;\n  }\n\n  media-time-range::part(preview-box) {\n    --media-preview-box-margin: 0 0 20px;\n    display: grid;\n  }\n\n  media-volume-range {\n    height: 100%;\n  }\n\n  media-time-display {\n    --media-secondary-color: transparent;\n    min-width: 92px;\n    padding: 0 6px 3px 8px;\n  }\n\n  media-time-display,\n  media-preview-time-display {\n    font-size: 0.75rem;\n    font-family: sofia-pro, sans-serif;\n  }\n\n  .gradient-bottom {\n    position: absolute;\n    width: 100%;\n    height: 40%;\n    bottom: 0;\n    pointer-events: none;\n    background: linear-gradient(0deg, #000000d8, transparent);\n  }\n\n  div[slot='top-chrome'] {\n    width: 100%;\n    display: flex;\n    flex-direction: row-reverse;\n    padding: 0.5rem;\n    box-sizing: border-box;\n    background: linear-gradient(0deg, transparent, #000000d9);\n    height: 40%;\n  }\n\n  div[slot='top-chrome'] > svg {\n    width: 40%;\n    position: absolute;\n    top: -0.5rem;\n  }\n\n  div[slot='top-chrome'] > svg:nth-child(1) {\n    right: -0.5rem;\n  }\n  div[slot='top-chrome'] > svg:nth-child(2) {\n    left: -0.5rem;\n  }\n\n  media-controller {\n    overflow: hidden;\n  }\n\n  media-controller[breakpointsm] .media-volume-wrapper {\n    position: relative;\n  }\n\n  .media-volume-range-wrapper {\n    width: 122px;\n    height: 2rem;\n    overflow: hidden;\n    opacity: 0;\n    transform: rotate(-90deg);\n    position: absolute;\n    top: -4.5rem;\n    left: -3rem;\n  }\n\n  media-volume-range {\n    border-radius: 0 9999px 9999px 0;\n    --media-range-thumb-width: 1rem;\n    --media-range-thumb-height: 1rem;\n    --media-range-track-width: 80px;\n    --media-range-thumb-background: url('data:image/svg+xml,<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"%23FFE4C7\"/><mask id=\"mask0_38_340\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"8\" height=\"8\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"%23F3E0A5\"/></mask><g mask=\"url(%23mask0_38_340)\"><path d=\"M12 0C12 2.20914 10.2091 4 8 4C5.79086 4 4 2.20914 4 0C4 -2.20914 5.79086 -4 8 -4C10.2091 -4 12 -2.20914 12 0Z\" fill=\"%23E72D33\"/><path d=\"M4 0C4 2.20914 2.20914 4 0 4C-2.20914 4 -4 2.20914 -4 0C-4 -2.20914 -2.20914 -4 0 -4C2.20914 -4 4 -2.20914 4 0Z\" fill=\"%23A82E28\"/><path d=\"M4 8C4 10.2091 2.20914 12 0 12C-2.20914 12 -4 10.2091 -4 8C-4 5.79086 -2.20914 4 0 4C2.20914 4 4 5.79086 4 8Z\" fill=\"%23E72D33\"/><path d=\"M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z\" fill=\"%23BE1A1E\"/></g></svg>')\n      no-repeat center/cover;\n  }\n\n  media-mute-button:hover + .media-volume-range-wrapper,\n  media-mute-button:focus + .media-volume-range-wrapper,\n  media-mute-button:focus-within + .media-volume-range-wrapper,\n  .media-volume-range-wrapper:hover,\n  .media-volume-range-wrapper:focus,\n  .media-volume-range-wrapper:focus-within {\n    opacity: 1;\n  }\n\n  media-controller:not([breakpointsm]) media-control-bar {\n    position: static;\n    background: transparent;\n    margin: 0;\n    padding: 1rem;\n  }\n\n  media-controller:not([breakpointsm]) media-time-display,\n  media-controller:not([breakpointsm]) .media-volume-range-wrapper {\n    display: none;\n  }\n\n  media-controller:not([breakpointsm]) .icon-button {\n    display: none;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: block;\n  }\n\n  media-controller:not([breakpointsm]) div[slot='top-chrome'] .icon-button {\n    display: flex;\n    margin: 22px 7px;\n  }\n\n  media-controller:not([breakpointsm]) media-fullscreen-button.icon-button {\n    display: flex;\n  }\n\n  media-controller:not([breakpointsm]) media-airplay-button[mediaairplayunavailable].icon-button {\n    display: none;\n  }\n\n  media-controller:not([breakpointsm]) media-cast-button[mediacastunavailable].icon-button {\n    display: none;\n  }\n\n  media-controller:not([breakpointsm]) media-mute-button.icon-button {\n    display: flex;\n  }\n\n  media-controller:not([breakpointsm]) media-captions-button.icon-button {\n    position: absolute;\n    top: 22px;\n    left: 16px;\n  }\n\n  media-controller:not([breakpointsm]) div[slot='centered-chrome'] media-play-button {\n    z-index: 1;\n    height: 100%;\n    width: max-content;\n    margin-top: -20%;\n    padding: 0;\n    top: 0;\n    max-width: 25%;\n  }\n\n  media-controller:not([breakpointsm]) div[slot='centered-chrome'] media-play-button #wire {\n    display: none;\n  }\n</style>\n\n<media-controller\n  breakpoints=\"xs:360 sm:600 md:760 lg:960 xl:1100\"\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n  <div class=\"gradient-bottom\"></div>\n  <div slot=\"top-chrome\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 310 169\">\n      <g id=\"Capa 6\">\n        <path\n          id=\"Subtract\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14.4487 22.3701C7.82084 14.8303 3.22023 6.9963 0 0H2.20656C5.33853 6.63628 9.73442 13.9779 15.9509 21.0497L15.951 21.0499C39.3762 47.7134 77.1691 57.508 109.823 58.2301C119.797 58.4507 129.264 57.8237 137.661 56.5818C135.029 52.5298 133.516 48.291 133.58 44.1444C133.66 39.0177 136.153 33.7581 139.731 29.7628C143.302 25.7754 148.096 22.891 152.921 22.7503C158.102 22.5995 163.632 25.6037 167.6 29.4451C169.599 31.3801 171.255 33.5756 172.301 35.7824C173.341 37.9769 173.821 40.2759 173.311 42.3577C172.637 45.1114 170.205 47.5893 166.727 49.7352C163.211 51.9043 158.444 53.8467 152.769 55.4545C149.244 56.453 145.354 57.3267 141.172 58.046C144.27 61.9817 148.508 65.7636 153.517 69.0839C164.417 76.3091 178.826 81.2594 192.715 80.9202C206.534 80.5824 215.128 75.1287 222.864 70.136L223.188 69.9267C230.779 65.025 237.774 60.5087 248.037 62.5695L248.037 62.5696C261.008 65.1794 267.628 75.9561 274.173 86.6711L274.273 86.8344C280.869 97.633 287.466 108.433 300.191 112.599C303.35 113.633 306.57 114.152 309.81 114.25V116.251C306.378 116.153 302.948 115.606 299.569 114.5L299.569 114.5C286.139 110.104 279.198 98.7375 272.715 88.1205L272.466 87.7137C265.827 76.8438 259.621 66.9404 247.643 64.5303C238.18 62.6303 231.809 66.7428 224.068 71.7393L223.948 71.8163C216.171 76.8361 207.175 82.5674 192.764 82.9196C178.403 83.2704 163.598 78.1657 152.412 70.7509C146.905 67.1004 142.243 62.8684 138.934 58.4117C130.171 59.7705 120.24 60.461 109.779 60.2297C76.8655 59.5018 38.4036 49.6364 14.4487 22.3701ZM139.84 56.2418C144.335 55.5036 148.493 54.587 152.224 53.5303C157.795 51.9519 162.372 50.0718 165.677 48.0331C169.019 45.9711 170.885 43.856 171.368 41.8821C171.729 40.4089 171.423 38.5992 170.493 36.639C169.57 34.6911 168.073 32.6859 166.209 30.8822C162.453 27.2462 157.418 24.6203 152.979 24.7495C148.884 24.8689 144.568 27.3594 141.221 31.097C137.881 34.8267 135.65 39.6422 135.58 44.1754C135.52 48.0549 137.037 52.1779 139.84 56.2418Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector (Stroke)\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M241.16 74.1517C241.919 70.3946 242.659 66.6469 243.388 62.9082L245.351 63.2913C244.621 67.0323 243.881 70.7844 243.12 74.547C241.289 83.6609 239.419 92.6853 237.498 101.62L235.542 101.2C237.461 92.2744 239.33 83.2588 241.159 74.1528L241.16 74.1517Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector (Stroke)_2\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M203.418 90.8279C205.138 86.3874 205.226 82.3542 205.072 79.8411L207.068 79.7183C207.233 82.4051 207.142 86.7517 205.282 91.551L205.282 91.5515C204.471 93.6413 203.494 95.3657 202.582 96.7344L200.918 95.625C201.765 94.3538 202.668 92.7584 203.417 90.8284\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector (Stroke)_3\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M242.72 90.4939C240.469 83.6873 240.716 77.7271 241.147 74.2275L243.132 74.472C242.723 77.7924 242.491 83.432 244.619 89.8653C245.883 93.6765 247.604 96.6704 249.089 98.7971L247.45 99.9425C245.876 97.6892 244.057 94.5232 242.721 90.4946L242.72 90.4939Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group\">\n          <path\n            id=\"Vector\"\n            d=\"M236.805 114.696C239.322 122.379 241.849 130.065 244.366 137.749C244.634 138.566 244.906 139.405 244.782 140.252C244.655 141.191 244.069 141.986 243.444 142.699C241.312 145.088 238.52 146.815 236.456 149.264C234.392 151.713 233.183 155.375 234.877 158.096C236.844 161.263 241.42 161.34 245.058 160.513C255.689 158.082 264.699 151.272 273.358 144.647C273.943 144.204 274.551 143.714 274.807 143.027C275.09 142.244 274.847 141.371 274.594 140.579C270.533 127.606 265.048 115.079 258.29 103.288C250.804 105.299 243.62 108.426 237.045 112.524\"\n            fill=\"#DE2D35\"\n          />\n          <path\n            id=\"Vector_2\"\n            d=\"M233.261 105.744C231.74 104.736 229.425 105.959 229.067 107.757C228.712 109.546 229.986 111.399 231.675 112.09C230.001 113.391 229.458 115.958 230.47 117.823C231.481 119.689 233.915 120.651 235.933 119.96C236.413 122.573 239.809 123.846 242.261 122.846C244.726 121.84 246.219 119.279 246.84 116.692C250.872 118.103 255.834 115.271 256.667 111.084C257.258 111.698 258.205 111.796 259.059 111.735C262.029 111.548 265.038 109.745 265.935 106.9C266.832 104.055 264.874 100.466 261.904 100.271C261.796 98.5856 261.244 96.9365 260.319 95.5189C260.069 95.1411 259.777 94.7627 259.38 94.5425C258.424 94.017 257.165 94.5805 256.567 95.497C255.963 96.4013 255.854 97.542 255.76 98.6247C254.878 96.9701 252.842 96.0311 251.014 96.4418C249.185 96.8525 247.739 98.5771 247.652 100.448C247.342 98.6675 245.466 97.326 243.683 97.6041C241.9 97.8822 240.523 99.7389 240.779 101.526C239.768 100.313 237.828 100.021 236.504 100.867C235.18 101.713 234.631 103.606 235.306 105.029\"\n            fill=\"#FFE4C7\"\n          />\n          <path\n            id=\"Vector_3\"\n            d=\"M269.282 127.829C265.321 129.708 262.915 133.743 262.071 137.937C261.226 142.132 261.509 147.374 264.836 150.45C265.816 151.354 267.293 149.897 266.314 148.992C263.467 146.366 263.365 141.721 264.138 138.181C264.911 134.64 266.906 131.251 270.322 129.63C271.53 129.063 270.488 127.272 269.289 127.842L269.282 127.829Z\"\n            fill=\"#FFE4C7\"\n          />\n          <g id=\"Group_2\">\n            <path\n              id=\"Vector_4\"\n              d=\"M259.759 116.467C260.835 116.083 261.324 116.69 260.694 117.65C259.609 118.032 259.141 117.42 259.759 116.467Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_5\"\n              d=\"M263.9 126.626C265.047 126.56 265.34 127.281 264.457 128.027C263.311 128.093 263.027 127.375 263.9 126.626Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_6\"\n              d=\"M255.748 124.441C257.112 124.724 257.778 126.062 257.163 127.315C255.797 127.042 255.135 125.685 255.748 124.441Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_7\"\n              d=\"M247.653 123.204C248.834 123.199 249.243 124.106 248.431 124.975C247.247 124.989 246.85 124.075 247.653 123.204Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_8\"\n              d=\"M252.516 134.186C253.964 134.73 254.654 136.291 254.064 137.718C252.613 137.184 251.936 135.615 252.516 134.186Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_9\"\n              d=\"M248.349 144.945C249.737 145.524 250.307 147.064 249.618 148.401C248.228 147.832 247.66 146.282 248.349 144.945Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_10\"\n              d=\"M255.855 148.499C257.487 148.977 258.348 150.864 257.614 152.407C256.211 151.575 255.549 150.104 255.855 148.499Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_11\"\n              d=\"M241.524 154.307C242.67 154.241 242.963 154.962 242.092 155.702C240.946 155.767 240.662 155.049 241.524 154.307Z\"\n              fill=\"#FFE4C7\"\n            />\n          </g>\n        </g>\n        <path\n          id=\"Vector_12\"\n          d=\"M244.37 65.0699C245.458 65.0699 246.34 64.1879 246.34 63.0999C246.34 62.0119 245.458 61.1299 244.37 61.1299C243.282 61.1299 242.4 62.0119 242.4 63.0999C242.4 64.1879 243.282 65.0699 244.37 65.0699Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector_13\"\n          d=\"M203.56 95.4898C204.648 95.4898 205.53 94.6078 205.53 93.5198C205.53 92.4318 204.648 91.5498 203.56 91.5498C202.472 91.5498 201.59 92.4318 201.59 93.5198C201.59 94.6078 202.472 95.4898 203.56 95.4898Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_3\">\n          <path\n            id=\"Vector_14\"\n            opacity=\"0.4\"\n            d=\"M198.56 113.51C197.36 110.76 196.58 106.43 198.65 100.44L207.19 101.44C207.19 101.44 208.25 108.25 203.94 114.11C202.51 116.06 199.52 115.73 198.56 113.51Z\"\n            fill=\"#2EBF8F\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"0.4;1;0.4\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_15\"\n            d=\"M207.19 101.45L198.65 100.45L199.07 96.9C199.35 94.54 201.48 92.86 203.84 93.13C206.2 93.41 207.88 95.54 207.61 97.9L207.19 101.45Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_16\"\n            d=\"M200.09 103.04C201.17 105.61 201.54 108.44 200.27 111.02C198.73 108.78 198.37 105.27 200.09 103.04Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector (Stroke)_4\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M106.047 68.6183C107.448 65.007 107.526 61.714 107.392 59.6652L109.388 59.5347C109.534 61.7659 109.451 65.3729 107.912 69.3416L107.912 69.3416C107.242 71.0695 106.435 72.5056 105.668 73.64L104.011 72.52C104.704 71.4943 105.438 70.1904 106.047 68.6183Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector_17\"\n          d=\"M106.32 72.53C107.214 72.53 107.94 71.8047 107.94 70.91C107.94 70.0153 107.214 69.29 106.32 69.29C105.425 69.29 104.7 70.0153 104.7 70.91C104.7 71.8047 105.425 72.53 106.32 72.53Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_4\">\n          <path\n            id=\"Vector_18\"\n            d=\"M102.21 87.3496C101.23 85.0896 100.58 81.5196 102.29 76.5996L109.31 77.4196C109.31 77.4196 110.18 83.0296 106.64 87.8396C105.46 89.4396 103.01 89.1696 102.21 87.3496Z\"\n            fill=\"#2EBF8F\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"1;0.4;1\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_19\"\n            d=\"M109.31 77.4298L102.29 76.6098L102.63 73.6898C102.86 71.7498 104.61 70.3598 106.55 70.5898C108.49 70.8198 109.88 72.5698 109.65 74.5098L109.31 77.4298Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_20\"\n            d=\"M103.47 78.73C104.61 80.8 104.91 83.22 103.62 85.29C102.1 83.51 101.82 80.51 103.47 78.73Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector_21\"\n          d=\"M36.0997 58.8899C36.9944 58.8899 37.7197 58.1646 37.7197 57.2699C37.7197 56.3752 36.9944 55.6499 36.0997 55.6499C35.205 55.6499 34.4797 56.3752 34.4797 57.2699C34.4797 58.1646 35.205 58.8899 36.0997 58.8899Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_5\">\n          <path\n            id=\"Vector_22\"\n            d=\"M39.7698 73.82C37.8798 72.23 35.7098 69.34 35.0398 64.17L41.6898 61.77C41.6898 61.77 44.9698 66.39 43.9598 72.28C43.6198 74.24 41.3098 75.09 39.7798 73.82H39.7698Z\"\n            fill=\"#F8B000\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"1;0.4;1\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_23\"\n            d=\"M41.6798 61.7701L35.0298 64.1701L34.0298 61.4001C33.3698 59.5601 34.3198 57.5401 36.1498 56.8801C37.9898 56.2201 40.0098 57.1701 40.6698 59.0001L41.6698 61.7701H41.6798Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_24\"\n            d=\"M37.0396 65.5503C38.9796 66.8903 40.3296 68.9203 40.1096 71.3603C37.9496 70.4403 36.3596 67.8903 37.0396 65.5503Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector (Stroke)_5\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M177.647 91.3913C175.788 86.592 175.696 82.2454 175.862 79.5586L177.858 79.6814C177.703 82.1946 177.792 86.228 179.512 90.6687C180.261 92.5987 181.164 94.1941 182.012 95.4653L180.348 96.5747C179.435 95.206 178.459 93.4816 177.648 91.3918L177.647 91.3913Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector_25\"\n          d=\"M179.37 95.3301C180.458 95.3301 181.34 94.4481 181.34 93.3601C181.34 92.2721 180.458 91.3901 179.37 91.3901C178.282 91.3901 177.4 92.2721 177.4 93.3601C177.4 94.4481 178.282 95.3301 179.37 95.3301Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_6\">\n          <path\n            id=\"Vector_26\"\n            d=\"M184.37 113.36C185.57 110.61 186.35 106.28 184.28 100.29L175.74 101.29C175.74 101.29 174.68 108.1 178.99 113.96C180.42 115.91 183.41 115.58 184.37 113.36Z\"\n            fill=\"#DE2D35\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"1;0.4;1\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_27\"\n            d=\"M175.74 101.29L184.28 100.29L183.86 96.7399C183.58 94.3799 181.45 92.6999 179.09 92.9699C176.73 93.2499 175.05 95.3799 175.32 97.7399L175.74 101.29Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_28\"\n            d=\"M182.84 102.88C184.56 105.11 184.2 108.62 182.66 110.86C181.39 108.28 181.76 105.45 182.84 102.88Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector (Stroke)_6\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M146.127 76.2214C144.268 71.4221 144.176 67.0755 144.342 64.3887L146.338 64.5115C146.183 67.0247 146.272 71.0581 147.992 75.4988C148.741 77.4288 149.644 79.0242 150.492 80.2954L148.828 81.4048C147.915 80.0361 146.939 78.3117 146.128 76.2219L146.127 76.2214Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector_29\"\n          d=\"M147.85 80.1597C148.938 80.1597 149.82 79.2777 149.82 78.1897C149.82 77.1017 148.938 76.2197 147.85 76.2197C146.762 76.2197 145.88 77.1017 145.88 78.1897C145.88 79.2777 146.762 80.1597 147.85 80.1597Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_7\">\n          <path\n            id=\"Vector_30\"\n            opacity=\"0.4\"\n            d=\"M152.84 98.1901C154.04 95.4401 154.82 91.1101 152.75 85.1201L144.21 86.1201C144.21 86.1201 143.15 92.9301 147.46 98.7901C148.89 100.74 151.88 100.41 152.84 98.1901Z\"\n            fill=\"#F8B000\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"0.4;1;0.4\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_31\"\n            d=\"M144.21 86.12L152.75 85.12L152.33 81.57C152.05 79.21 149.92 77.53 147.56 77.8C145.2 78.08 143.52 80.21 143.79 82.57L144.21 86.12Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_32\"\n            d=\"M151.32 87.71C153.04 89.94 152.68 93.45 151.14 95.69C149.87 93.11 150.24 90.28 151.32 87.71Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector (Stroke)_7\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M63.4571 61.0107C61.9677 57.1614 61.8961 53.6747 62.0317 51.5269L64.0277 51.6528C63.9033 53.6249 63.9717 56.7979 65.3221 60.2885C65.9122 61.8113 66.6157 63.0656 67.2793 64.0515L65.6201 65.1682C64.8837 64.074 64.1072 62.6884 63.4573 61.0112L63.4571 61.0107Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector_33\"\n          d=\"M65.0197 64.0599C65.8813 64.0599 66.5797 63.3615 66.5797 62.4999C66.5797 61.6384 65.8813 60.9399 65.0197 60.9399C64.1582 60.9399 63.4597 61.6384 63.4597 62.4999C63.4597 63.3615 64.1582 64.0599 65.0197 64.0599Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_8\">\n          <path\n            id=\"Vector_34\"\n            opacity=\"0.4\"\n            d=\"M68.9897 78.3898C69.9397 76.1998 70.5597 72.7598 68.9197 68.0098L62.1397 68.7998C62.1397 68.7998 61.2997 74.2098 64.7197 78.8598C65.8597 80.4098 68.2297 80.1498 68.9997 78.3798L68.9897 78.3898Z\"\n            fill=\"#DE2D35\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"0.4;1;0.4\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_35\"\n            d=\"M62.1398 68.7999L68.9198 68.0099L68.5898 65.1899C68.3698 63.3199 66.6698 61.9799 64.7998 62.1999C62.9298 62.4199 61.5898 64.1199 61.8098 65.9899L62.1398 68.8099V68.7999Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_36\"\n            d=\"M67.7798 70.0698C69.4298 71.8098 69.1498 74.6698 67.6398 76.4098C66.3498 74.4098 66.6398 72.0598 67.7798 70.0698Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector (Stroke)_8\"\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11.0572 25.1308C9.56781 21.2816 9.49623 17.7948 9.63178 15.647L11.6278 15.7729C11.5034 17.745 11.5718 20.9181 12.9222 24.4086C13.5123 25.9314 14.2158 27.1857 14.8794 28.1716L13.2202 29.2883C12.4837 28.1942 11.7073 26.8085 11.0573 25.1313L11.0572 25.1308Z\"\n          fill=\"white\"\n        />\n        <path\n          id=\"Vector_37\"\n          d=\"M12.6198 28.1898C13.4814 28.1898 14.1798 27.4914 14.1798 26.6298C14.1798 25.7683 13.4814 25.0698 12.6198 25.0698C11.7583 25.0698 11.0598 25.7683 11.0598 26.6298C11.0598 27.4914 11.7583 28.1898 12.6198 28.1898Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_9\">\n          <path\n            id=\"Vector_38\"\n            opacity=\"0.4\"\n            d=\"M16.5898 42.5099C17.5398 40.3199 18.1598 36.8799 16.5198 32.1299L9.73983 32.9199C9.73983 32.9199 8.89983 38.3299 12.3198 42.9799C13.4598 44.5299 15.8298 44.2699 16.5998 42.4999L16.5898 42.5099Z\"\n            fill=\"#2EBF8F\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"0.4;1;0.4\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_39\"\n            d=\"M9.72986 32.92L16.5099 32.13L16.1799 29.31C15.9599 27.44 14.2599 26.1 12.3899 26.32C10.5199 26.54 9.17986 28.24 9.39986 30.11L9.72986 32.93V32.92Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_40\"\n            d=\"M15.3799 34.1899C17.0299 35.9299 16.7499 38.7899 15.2399 40.5299C13.9499 38.5299 14.2399 36.1799 15.3799 34.1899Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector (Stroke)_9\"\n          d=\"M35.6211 39C36.6526 40.6259 38.4834 44.5114 37.5551 47.0467C36.3947 50.2158 34.9142 49.5908 34.814 52.255C34.7338 54.3864 35.8344 56.9731 36.3947 58\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n      </g>\n    </svg>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 289 148\" fill=\"none\">\n      <g id=\"Capa 9\">\n        <path\n          id=\"Vector\"\n          d=\"M289 0C285 8 276.5 19.1406 274.25 21.71C272.63 23.56 267.13 29.66 254.93 38.3C232.12 54.44 209.72 70.38 191.99 63.52C180.52 59.08 177.4 47.58 164.1 47.29C162.29 47.25 156.84 47.2 152.1 50.61C146.54 54.6 145.79 60.58 144.11 64.45C137.99 78.59 111.76 82.58 96.6999 81.92C65.4999 80.56 60.4499 59.76 41.5999 63.55C16.6499 68.57 26.39 98.36 0 107\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_2\"\n          d=\"M45.0801 63.1001C45.8101 66.8401 46.5501 70.5901 47.3101 74.3501C49.1401 83.4601 51.0101 92.4801 52.9301 101.41\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_3\"\n          d=\"M83.3801 79.77C83.2201 82.37 83.3101 86.56 85.1001 91.18C85.8801 93.19 86.8201 94.85 87.7001 96.17\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_4\"\n          d=\"M47.3099 74.3501C47.7299 77.7601 47.9699 83.5601 45.7799 90.1801C44.4799 94.1001 42.7099 97.1801 41.1799 99.3701\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_5\"\n          d=\"M85.8899 95.4898C86.9779 95.4898 87.8599 94.6078 87.8599 93.5198C87.8599 92.4318 86.9779 91.5498 85.8899 91.5498C84.8019 91.5498 83.9199 92.4318 83.9199 93.5198C83.9199 94.6078 84.8019 95.4898 85.8899 95.4898Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group\">\n          <path\n            id=\"Vector_6\"\n            d=\"M90.88 113.51C92.08 110.76 92.86 106.43 90.79 100.44L82.25 101.44C82.25 101.44 81.19 108.25 85.5 114.11C86.93 116.06 89.92 115.73 90.88 113.51Z\"\n            fill=\"#2EBF8F\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"1;0.3;1\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_7\"\n            d=\"M82.25 101.44L90.79 100.44L90.37 96.8898C90.09 94.5298 87.96 92.8498 85.6 93.1198C83.24 93.3998 81.56 95.5298 81.83 97.8898L82.25 101.44Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_8\"\n            d=\"M89.3601 103.04C91.0801 105.27 90.7201 108.78 89.1801 111.02C87.9101 108.44 88.2801 105.61 89.3601 103.04Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector_9\"\n          d=\"M253.35 58.8899C254.245 58.8899 254.97 58.1646 254.97 57.2699C254.97 56.3752 254.245 55.6499 253.35 55.6499C252.455 55.6499 251.73 56.3752 251.73 57.2699C251.73 58.1646 252.455 58.8899 253.35 58.8899Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_2\">\n          <path\n            id=\"Vector_10\"\n            opacity=\"0.3\"\n            d=\"M249.67 73.82C251.56 72.23 253.73 69.34 254.4 64.17L247.75 61.77C247.75 61.77 244.47 66.39 245.48 72.28C245.82 74.24 248.13 75.09 249.66 73.82H249.67Z\"\n            fill=\"#F8B000\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"0.3;1;0.3\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_11\"\n            d=\"M247.76 61.7598L254.41 64.1598L255.41 61.3898C256.07 59.5498 255.12 57.5298 253.29 56.8698C251.45 56.2098 249.43 57.1598 248.77 58.9898L247.77 61.7598H247.76Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_12\"\n            d=\"M252.4 65.5498C253.08 67.8898 251.49 70.4398 249.33 71.3598C249.11 68.9298 250.45 66.8998 252.4 65.5498Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector_13\"\n          d=\"M112.45 81C112.597 83.378 112.514 87.2104 110.877 91.436C110.164 93.2744 109.305 94.7927 108.5 96\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_14\"\n          d=\"M110.07 95.3301C111.158 95.3301 112.04 94.4481 112.04 93.3601C112.04 92.2721 111.158 91.3901 110.07 91.3901C108.982 91.3901 108.1 92.2721 108.1 93.3601C108.1 94.4481 108.982 95.3301 110.07 95.3301Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_3\">\n          <path\n            id=\"Vector_15\"\n            d=\"M105.08 113.35C103.88 110.6 103.1 106.27 105.17 100.28L113.71 101.28C113.71 101.28 114.77 108.09 110.46 113.95C109.03 115.9 106.04 115.57 105.08 113.35Z\"\n            fill=\"#DE2D35\"\n            fill-opacity=\"0.3\"\n          >\n            <animate\n              attributeName=\"fill-opacity\"\n              values=\"0.3;1;0.3\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_16\"\n            d=\"M113.71 101.29L105.17 100.29L105.59 96.7399C105.87 94.3799 108 92.6999 110.36 92.9699C112.72 93.2499 114.4 95.3799 114.13 97.7399L113.71 101.29Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_17\"\n            d=\"M106.61 102.88C107.69 105.45 108.06 108.28 106.79 110.86C105.25 108.62 104.89 105.11 106.61 102.88Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector_18\"\n          d=\"M144.11 64.4399C144.27 67.0399 144.18 71.2299 142.39 75.8499C141.61 77.8599 140.67 79.5199 139.79 80.8399\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_19\"\n          d=\"M141.6 80.1602C142.688 80.1602 143.57 79.2782 143.57 78.1902C143.57 77.1022 142.688 76.2202 141.6 76.2202C140.512 76.2202 139.63 77.1022 139.63 78.1902C139.63 79.2782 140.512 80.1602 141.6 80.1602Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_4\">\n          <path\n            id=\"Vector_20\"\n            d=\"M136.6 98.1804C135.4 95.4304 134.62 91.1004 136.69 85.1104L145.23 86.1104C145.23 86.1104 146.29 92.9203 141.98 98.7803C140.55 100.73 137.56 100.4 136.6 98.1804Z\"\n            fill=\"#F8B000\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"1;0.3;1\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_21\"\n            d=\"M145.23 86.1102L136.69 85.1102L137.11 81.5602C137.39 79.2002 139.52 77.5202 141.88 77.7902C144.24 78.0702 145.92 80.2002 145.65 82.5602L145.23 86.1102Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_22\"\n            d=\"M138.13 87.71C139.21 90.28 139.58 93.11 138.31 95.69C136.77 93.45 136.41 89.94 138.13 87.71Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector_23\"\n          d=\"M278.82 15.71C278.95 17.77 278.88 21.1 277.46 24.77C276.84 26.37 276.1 27.69 275.4 28.73\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <path\n          id=\"Vector_24\"\n          d=\"M276.82 28.1801C277.682 28.1801 278.38 27.4816 278.38 26.6201C278.38 25.7585 277.682 25.0601 276.82 25.0601C275.958 25.0601 275.26 25.7585 275.26 26.6201C275.26 27.4816 275.958 28.1801 276.82 28.1801Z\"\n          fill=\"white\"\n        />\n        <g id=\"Group_5\">\n          <path\n            id=\"Vector_25\"\n            d=\"M272.85 42.5099C271.9 40.3199 271.28 36.8799 272.92 32.1299L279.7 32.9199C279.7 32.9199 280.54 38.3299 277.12 42.9799C275.98 44.5299 273.61 44.2699 272.84 42.4999L272.85 42.5099Z\"\n            fill=\"#2EBF8F\"\n          >\n            <animate\n              attributeName=\"opacity\"\n              values=\"1;0.3;1\"\n              begin=\"0s\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              fill=\"freeze\"\n              calcMode=\"linear\"\n              keyTimes=\"0;0.5;1\"\n            />\n          </path>\n          <path\n            id=\"Vector_26\"\n            d=\"M279.71 32.92L272.93 32.13L273.26 29.31C273.48 27.44 275.18 26.1 277.05 26.32C278.92 26.54 280.26 28.24 280.04 30.11L279.71 32.93V32.92Z\"\n            fill=\"white\"\n          />\n          <path\n            id=\"Vector_27\"\n            d=\"M274.07 34.1899C275.22 36.1799 275.5 38.5299 274.21 40.5299C272.69 38.7899 272.42 35.9299 274.07 34.1899Z\"\n            fill=\"#FFFCF7\"\n          />\n        </g>\n        <path\n          id=\"Vector_28\"\n          d=\"M254.93 38.2998C252.6 42.3498 252.72 44.8998 253.35 46.5198C254.03 48.2698 255.26 48.8198 255.65 50.6098C256.16 52.9698 254.73 55.3098 253.35 56.9898\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"10\"\n        />\n        <g id=\"Group_6\">\n          <g id=\"Group_7\">\n            <path\n              id=\"Vector_29\"\n              d=\"M35.6399 145.2C34.4599 144.02 34.1399 142.16 34.9699 140.62C40.5899 130.17 46.4099 119.37 47.8899 107.69C48.0499 106.43 47.6999 105.68 47.5799 105.62C47.0999 105.38 46.0999 105.17 45.6899 105.17C42.1299 106.09 40.3599 109.95 39.5099 113.05C38.9399 115.11 36.7999 116.32 34.7399 115.75C32.6799 115.18 31.4699 113.04 32.0399 110.98C34.0499 103.73 38.2899 98.98 43.9799 97.61C46.3899 97.03 49.4999 97.92 50.9999 98.66C54.3999 100.33 56.1599 104.16 55.5899 108.66C53.9299 121.77 47.4899 133.74 41.8099 144.29C40.7999 146.18 38.4399 146.88 36.5599 145.87C36.2199 145.69 35.9199 145.46 35.6599 145.2H35.6399Z\"\n              fill=\"#FFE4C7\"\n            />\n            <g id=\"Group_8\">\n              <path\n                id=\"Vector_30\"\n                d=\"M31.9999 111.12C31.5199 113.14 32.7099 115.19 34.7299 115.75C36.4799 116.24 38.2899 115.43 39.1399 113.92C36.9599 112.68 34.5299 111.32 31.9999 111.12Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_31\"\n                d=\"M40.6499 108.95C39.9699 106.44 38.1199 104.18 35.6499 103.3C34.7899 104.46 34.0199 105.76 33.3799 107.22C35.9099 107.64 38.3599 108.87 40.5799 110.11C40.6799 109.9 40.7799 109.7 40.8799 109.5C40.7899 109.34 40.7099 109.16 40.6499 108.96V108.95Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_32\"\n                d=\"M45.5799 97.4299C45.0299 97.4299 44.4799 97.4899 43.9699 97.6099C41.9999 98.0799 40.1999 98.9699 38.6099 100.22C40.9099 101.5 42.7499 103.59 43.8499 105.99C44.1099 105.82 44.3799 105.67 44.6599 105.54C45.7699 102.97 46.2399 100.19 45.5899 97.4199L45.5799 97.4299Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_33\"\n                d=\"M54.8499 102.77C54.0599 100.96 52.7499 99.5199 50.9999 98.6599C50.6699 98.4999 50.2599 98.3299 49.7999 98.1699C50.1999 101.62 49.4099 105.03 47.8699 108.18C50.5999 106.9 53.0499 105.21 54.8499 102.77Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_34\"\n                d=\"M54.86 112.98C55.15 111.56 55.4 110.12 55.58 108.67C55.62 108.39 55.64 108.12 55.66 107.85C53.18 110.1 50.15 111.69 46.92 112.93C46.71 113.83 46.47 114.72 46.22 115.6C49.16 114.92 52.14 114.22 54.86 112.98Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_35\"\n                d=\"M47.7498 132.8C48.5098 131.22 49.2598 129.61 49.9598 127.97C46.9498 128.65 43.8198 128.96 40.8798 129.18C40.1298 130.74 39.3498 132.28 38.5598 133.81C41.6398 133.78 44.8098 133.6 47.7398 132.79L47.7498 132.8Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_36\"\n                d=\"M34.5998 143.28C37.3598 143.25 40.1198 143.12 42.7798 142.48C43.6698 140.82 44.5698 139.12 45.4698 137.39C42.4798 137.82 39.3798 137.86 36.4598 137.86C35.9698 138.78 35.4698 139.7 34.9798 140.62C34.5198 141.47 34.4198 142.41 34.6098 143.28H34.5998Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_37\"\n                d=\"M51.8298 123.33C52.5198 121.48 53.1498 119.59 53.6998 117.68C50.8098 118.67 47.7798 119.33 44.7798 120.07C44.1798 121.73 43.5098 123.37 42.8098 125C45.7998 124.74 48.9798 124.3 51.8398 123.32L51.8298 123.33Z\"\n                fill=\"#DE2D35\"\n              />\n            </g>\n          </g>\n          <g id=\"Group_9\">\n            <path\n              id=\"Vector_38\"\n              d=\"M26.3599 135.47C27.5399 136.65 29.3999 136.97 30.9399 136.14C41.3799 130.51 52.1799 124.69 63.8599 123.2C65.1199 123.04 65.8699 123.39 65.9299 123.51C66.1699 123.99 66.3799 124.99 66.3799 125.4C65.4599 128.96 61.5999 130.73 58.4999 131.59C56.4399 132.16 55.2299 134.3 55.7999 136.36C56.3699 138.42 58.5099 139.63 60.5699 139.06C67.8199 137.04 72.5699 132.8 73.9299 127.11C74.5099 124.7 73.6199 121.59 72.8799 120.09C71.2099 116.69 67.3799 114.93 62.8699 115.51C49.7599 117.18 37.7999 123.63 27.2499 129.31C25.3699 130.33 24.6599 132.68 25.6799 134.56C25.8599 134.9 26.0899 135.2 26.3499 135.46L26.3599 135.47Z\"\n              fill=\"#FFE4C7\"\n            />\n            <g id=\"Group_10\">\n              <path\n                id=\"Vector_39\"\n                d=\"M60.4398 139.1C58.4198 139.58 56.3698 138.39 55.8098 136.37C55.3198 134.62 56.1198 132.81 57.6398 131.96C58.8798 134.14 60.2398 136.56 60.4398 139.1Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_40\"\n                d=\"M62.5997 130.44C65.1197 131.12 67.3697 132.97 68.2597 135.44C67.0997 136.3 65.7997 137.07 64.3397 137.72C63.9097 135.19 62.6897 132.74 61.4497 130.52C61.6497 130.42 61.8597 130.32 62.0597 130.22C62.2197 130.31 62.3997 130.39 62.5997 130.45V130.44Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_41\"\n                d=\"M74.1198 125.5C74.1198 126.05 74.0598 126.6 73.9398 127.11C73.4698 129.08 72.5798 130.88 71.3298 132.47C70.0498 130.17 67.9598 128.33 65.5498 127.24C65.7198 126.98 65.8698 126.71 65.9998 126.43C68.5598 125.32 71.3398 124.85 74.1198 125.49V125.5Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_42\"\n                d=\"M68.7799 116.24C70.5899 117.03 72.0299 118.34 72.8899 120.09C73.0499 120.42 73.2199 120.83 73.3799 121.29C69.9299 120.89 66.5199 121.69 63.3699 123.22C64.6499 120.49 66.3299 118.04 68.7799 116.23V116.24Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_43\"\n                d=\"M58.5697 116.24C59.9897 115.95 61.4297 115.7 62.8797 115.51C63.1597 115.47 63.4297 115.45 63.6997 115.43C61.4497 117.91 59.8697 120.94 58.6197 124.17C57.7197 124.38 56.8297 124.62 55.9497 124.87C56.6197 121.93 57.3297 118.94 58.5597 116.23L58.5697 116.24Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_44\"\n                d=\"M38.7497 123.35C40.3297 122.59 41.9397 121.84 43.5697 121.14C42.8897 124.15 42.5797 127.28 42.3597 130.22C40.7997 130.97 39.2597 131.75 37.7297 132.54C37.7597 129.46 37.9397 126.29 38.7497 123.36V123.35Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_45\"\n                d=\"M28.2798 136.51C28.3098 133.75 28.4398 130.99 29.0798 128.33C30.7398 127.44 32.4398 126.53 34.1698 125.64C33.7398 128.63 33.6998 131.73 33.6998 134.65C32.7798 135.14 31.8598 135.64 30.9398 136.13C30.0898 136.59 29.1498 136.69 28.2798 136.5V136.51Z\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_46\"\n                d=\"M48.2198 119.27C50.0698 118.58 51.9598 117.95 53.8698 117.4C52.8898 120.29 52.2298 123.32 51.4798 126.33C49.8198 126.93 48.1798 127.6 46.5498 128.3C46.8098 125.31 47.2498 122.13 48.2198 119.27Z\"\n                fill=\"#DE2D35\"\n              />\n            </g>\n          </g>\n          <g id=\"Group_11\">\n            <path\n              id=\"Vector_47\"\n              d=\"M46.7699 126.56C47.9999 123.53 48.0999 120.16 46.9399 117.15C46.6099 116.17 45.9999 115.2 45.3099 115.37C44.9899 115.41 44.6599 115.73 44.4299 116.14C43.7299 117.5 43.7399 119.17 43.8099 120.69C43.9699 122.81 44.6999 124.9 45.8899 126.75C43.2599 123.91 41.9999 119.32 43.5799 115.66C44.2599 114.25 46.0499 113.86 47.0299 115.23C49.1299 118.61 48.8399 123.26 46.7699 126.57V126.56Z\"\n              fill=\"white\"\n            />\n            <path\n              id=\"Vector_48\"\n              d=\"M47.3599 126.42C48.7499 124.16 51.3699 121.51 54.3899 122.57C56.5599 123.34 57.3799 126.27 55.4799 127.77C54.6899 128.44 53.7299 128.8 52.7699 128.91C50.8399 129.17 48.8599 128.43 47.6199 127.07C49.1099 128.13 50.9699 128.48 52.6399 128.14C55.3299 127.7 56.9099 124.95 54.0399 123.46C51.4499 122.51 49.1699 124.66 47.3599 126.43V126.42Z\"\n              fill=\"white\"\n            />\n            <path\n              id=\"Vector_49\"\n              d=\"M42.72 121.2C44.59 124.34 46.75 126.81 49.6 129.1C46.09 128.12 43.21 124.81 42.72 121.2Z\"\n              fill=\"white\"\n            />\n            <path\n              id=\"Vector_50\"\n              d=\"M46.7698 127.24C46.4998 132.48 46.0298 138.29 49.1898 142.76C51.2998 145.95 55.8998 147.74 59.3698 145.71C59.8998 145.39 60.4098 144.88 60.3598 144.27C60.3098 143.7 59.3598 143.14 58.9498 143.73C59.3398 143.01 60.4798 143.51 60.6198 144.22C60.7698 145.02 60.1998 145.69 59.6498 146.11C55.9698 148.68 50.7198 146.88 48.3698 143.33C45.0598 138.59 45.6998 132.57 46.7698 127.24Z\"\n              fill=\"white\"\n            />\n            <path\n              id=\"Vector_51\"\n              d=\"M47.0999 127.23C39.9099 128.04 35.3599 120.74 29.0099 119.03C27.8799 118.85 26.8799 119.85 25.9799 120.79C25.0999 121.75 24.3799 122.9 24.2399 124.18C24.0799 125.44 24.5499 126.87 25.7199 127.61C24.4299 127.07 23.7299 125.56 23.7499 124.15C23.8499 121.73 26.4299 117.9 29.0999 118.08C35.8799 119.58 39.8499 127.03 47.0999 127.22V127.23Z\"\n              fill=\"white\"\n            />\n          </g>\n        </g>\n        <g id=\"Group_12\">\n          <g id=\"Group_13\">\n            <path\n              id=\"Vector_52\"\n              d=\"M183.4 106.45C183.4 106.45 206.09 109.4 216.85 102.73C216.85 102.73 197.46 98.6698 183.4 106.45Z\"\n              fill=\"#123342\"\n            />\n            <g id=\"Group_14\">\n              <path\n                id=\"Vector_53\"\n                d=\"M185.95 101.54C195.45 99.1802 205.19 97.7502 214.97 97.2802C211.84 85.8002 207.04 74.7802 200.78 64.6602C198.25 70.6602 194.12 75.8102 190.66 81.3302C187.2 86.8502 184.33 93.1202 184.78 99.6102\"\n                fill=\"#DE2D35\"\n              />\n              <path\n                id=\"Vector_54\"\n                d=\"M186.55 103.72C195.87 101.42 205.37 100.02 214.97 99.5501C216.42 99.4801 217.55 98.1701 217.14 96.7001C213.94 85.0401 209.07 73.8401 202.72 63.5401C201.92 62.2501 199.53 61.9101 198.83 63.5401C193.63 75.6301 181.69 85.4301 182.52 99.6301C182.69 102.51 187.19 102.53 187.02 99.6301C186.25 86.5301 197.89 77.0301 202.71 65.8201H198.82C204.98 75.8101 209.67 86.5901 212.78 97.9001L214.95 95.0501C204.97 95.5401 195.04 96.9901 185.34 99.3901C182.53 100.08 183.72 104.43 186.54 103.73L186.55 103.72Z\"\n                fill=\"#DE2D35\"\n              />\n            </g>\n            <g id=\"Group_15\">\n              <path\n                id=\"Vector_55\"\n                d=\"M200.18 65.09C197.73 63.83 195.62 61.9 194.16 59.56C193.84 59.05 193.62 58.23 194.16 57.96C194.5 57.79 194.9 58 195.22 58.21C196.98 59.39 198.46 60.98 199.51 62.83C199.2 61.2 199.61 59.44 200.61 58.11C200.9 57.72 201.34 57.34 201.81 57.44C202.6 57.61 202.54 58.75 202.29 59.52C201.84 60.88 201.38 62.25 200.93 63.61C202.23 63.17 203.53 62.73 204.83 62.29C205.48 62.07 206.41 61.97 206.66 62.61C206.89 63.21 206.23 63.76 205.65 64.03C204.33 64.66 202.93 65.1 201.49 65.34\"\n                fill=\"#FFE4C7\"\n              />\n              <path\n                id=\"Vector_56\"\n                d=\"M200.75 64.1099C198.53 62.9499 196.59 61.2699 195.24 59.1599C195.12 58.9799 195.07 58.7699 194.97 58.5999C194.93 58.5499 194.93 58.5199 194.96 58.5199C195.21 58.4699 195.03 58.6399 194.41 59.0199C194.45 59.0799 194.6 59.1399 194.66 59.1699C195.18 59.5099 195.66 59.9099 196.12 60.3299C197.08 61.2299 197.89 62.2399 198.54 63.3799C199.19 64.5199 200.81 63.7199 200.6 62.5099C200.45 61.6599 200.56 60.7699 200.85 59.9599C200.98 59.6099 201.15 59.2899 201.35 58.9799C201.41 58.8899 201.69 58.6199 201.71 58.5399L201.76 58.5099C201.58 58.5499 201.43 58.4899 201.33 58.3499C201.26 58.3999 201.49 57.8599 201.33 58.4499C201.3 58.5699 201.32 58.7099 201.3 58.8399C201.22 59.2699 201.04 59.6899 200.9 60.1099C200.55 61.1699 200.2 62.2299 199.84 63.2899C199.58 64.0799 200.43 64.9399 201.23 64.6799C202.15 64.3699 203.06 64.0599 203.98 63.7499C204.41 63.6099 204.84 63.4399 205.27 63.3199C205.37 63.2899 205.49 63.2599 205.59 63.2399C205.69 63.2399 205.79 63.2399 205.9 63.2399C205.87 63.2699 205.83 63.2599 205.8 63.2099C205.6 63.1299 205.54 62.9399 205.63 62.6599C205.61 62.6999 205.58 62.7399 205.53 62.7699C205.42 62.7999 205.27 62.9499 205.15 63.0099C204.77 63.2099 204.36 63.3699 203.96 63.5099C203.06 63.8399 202.13 64.0799 201.18 64.2499C200.58 64.3599 200.24 65.0899 200.39 65.6399C200.56 66.2699 201.17 66.5299 201.78 66.4299C203.17 66.1799 204.5 65.7599 205.79 65.1899C206.97 64.6699 208.25 63.6099 207.68 62.1699C207.21 60.9799 205.83 60.8499 204.74 61.1299C203.35 61.4899 201.98 62.0499 200.62 62.5099L202.01 63.8999C202.49 62.4399 203.14 60.9499 203.47 59.4499C203.73 58.2499 203.51 56.6899 202.11 56.3499C200.57 55.9699 199.47 57.5399 198.94 58.7499C198.32 60.1499 198.17 61.6299 198.43 63.1399L200.49 62.2699C199.59 60.7099 198.42 59.2899 197.02 58.1599C196.32 57.5899 195.49 56.8399 194.53 56.7899C193.57 56.7399 192.73 57.5499 192.72 58.5399C192.72 59.3999 193.16 60.1399 193.64 60.8199C194.16 61.5599 194.73 62.2599 195.36 62.9099C196.59 64.1799 198.05 65.2599 199.62 66.0799C200.9 66.7499 202.04 64.8099 200.76 64.1399L200.75 64.1099Z\"\n                fill=\"#FFE4C7\"\n              />\n            </g>\n            <path\n              id=\"Vector_57\"\n              d=\"M183.4 106.45C183.4 106.45 179.19 96.5 182.79 94.93C182.79 94.93 210.28 90.22 215.43 93.67C215.43 93.67 218.75 97.36 216.85 102.73C216.85 102.73 194.36 101.08 183.4 106.45Z\"\n              fill=\"#FFE4C7\"\n              stroke=\"#FFE4C7\"\n              stroke-width=\"2\"\n              stroke-miterlimit=\"10\"\n            />\n            <g id=\"Group_16\">\n              <path\n                id=\"Vector_58\"\n                d=\"M186.05 96.1196C187.28 97.9696 187.66 100.11 187.11 102.27C185.3 100.84 184.83 98.0696 186.05 96.1196Z\"\n                fill=\"#123342\"\n              />\n              <path\n                id=\"Vector_59\"\n                d=\"M192.62 98.1499C193.85 98.7299 193.95 100.12 192.82 100.86C191.59 100.29 191.49 98.8899 192.62 98.1499Z\"\n                fill=\"#123342\"\n              />\n              <path\n                id=\"Vector_60\"\n                d=\"M200.07 95.4297C201.31 96.9797 201.36 99.1797 200.16 100.77C198.91 99.2197 198.88 97.0197 200.07 95.4297Z\"\n                fill=\"#123342\"\n              />\n              <path\n                id=\"Vector_61\"\n                d=\"M206.23 94.3198C208.39 95.4798 209.23 98.5498 207.95 100.65C206.73 98.6798 206.18 96.6398 206.23 94.3198Z\"\n                fill=\"#123342\"\n              />\n              <path\n                id=\"Vector_62\"\n                d=\"M211.07 94.2598C212.94 94.7898 213.87 96.9698 213.49 98.7698C213.35 99.3698 213.09 99.9598 212.59 100.4C212.35 99.7798 212.22 99.2698 212.07 98.7798C211.69 97.3098 211.28 95.8098 211.06 94.2598H211.07Z\"\n                fill=\"#123342\"\n              />\n            </g>\n          </g>\n          <g id=\"Group_17\">\n            <path\n              id=\"Vector_63\"\n              d=\"M189.31 90.1997C188.33 89.0097 188.66 87.3597 190.04 86.6597C191.03 87.8497 190.68 89.4997 189.31 90.1997Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_64\"\n              d=\"M193.06 81.7397C192.5 80.3897 193.32 79.0497 194.79 78.9697C195.36 80.3197 194.52 81.6497 193.06 81.7397Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_65\"\n              d=\"M197.96 73.7597C197.25 72.6897 197.87 71.7197 199.14 71.9297C199.86 72.9997 199.23 73.9697 197.96 73.7597Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_66\"\n              d=\"M199 89.8296C197.79 88.6796 198.03 86.6896 199.48 85.8696C200.4 87.1796 200.2 88.7796 199 89.8296Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_67\"\n              d=\"M200.98 79.3297C199.94 78.6297 200.15 77.7697 201.41 77.6597C202.46 78.3597 202.23 79.2097 200.98 79.3297Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_68\"\n              d=\"M204.04 73.5498C205.91 73.5598 207.14 75.8698 206.1 77.4298C204.72 76.4598 204.08 75.2298 204.04 73.5498Z\"\n              fill=\"#FFE4C7\"\n            />\n            <path\n              id=\"Vector_69\"\n              d=\"M208.23 86.3398C209.88 86.9498 210.67 88.8598 209.91 90.4498C208.37 89.6598 207.7 87.9798 208.23 86.3398Z\"\n              fill=\"#FFE4C7\"\n            />\n          </g>\n        </g>\n      </g>\n    </svg>\n  </div>\n  <div slot=\"centered-chrome\">\n    <media-play-button>\n      <svg slot=\"play\" width=\"90\" height=\"259\" viewBox=\"0 0 90 259\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g id=\"Group\">\n          <g id=\"Capa 2\">\n            <g id=\"Capa 1\">\n              <path\n                id=\"wire\"\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M78.5023 11.8951C79.7101 7.83089 80.5625 3.84468 81.1439 0L83.1657 0C82.5708 4.0221 81.6867 8.20063 80.4195 12.4645C76.7802 24.7187 71.5704 33.0015 66.0397 40.2502C64.2498 42.596 62.4438 44.8141 60.6532 47.0133C60.1079 47.683 59.5641 48.351 59.0226 49.0203C48.4244 86.5587 52.7705 112.03 58.6414 128.301L58.6414 128.301C60.5983 133.728 63.0063 138.918 65.4168 143.979C65.7175 144.611 66.0184 145.24 66.3184 145.868L66.321 145.874C68.4186 150.263 70.4771 154.571 72.1638 158.817C76.025 168.536 78.0243 178.134 74.1119 188.125C72.6871 191.771 70.4087 194.687 68.2691 197.426C67.7208 198.128 67.1817 198.818 66.6683 199.506C64.1212 202.918 62.0735 206.406 61.9605 211.383L60.9607 211.36L61.9604 211.383C61.7792 219.328 66.2795 225.964 70.0544 230.293L68.5471 231.607C64.6819 227.175 59.7622 220.052 59.961 211.337C60.088 205.744 62.4252 201.847 65.0656 198.309C65.6324 197.55 66.2074 196.813 66.7774 196.082L66.7779 196.081C68.8938 193.368 70.9416 190.743 72.2493 187.396L72.2496 187.395C75.8871 178.106 74.0964 169.099 70.3051 159.555C68.6454 155.378 66.6188 151.136 64.5181 146.74L64.518 146.74C64.217 146.109 63.9144 145.476 63.6112 144.839C61.1989 139.774 58.7532 134.507 56.7601 128.979C50.9905 112.989 46.737 88.4842 55.8815 52.9813C53.7837 55.702 51.7497 58.5377 49.835 61.6799C39.7154 78.2966 31.585 105.885 43.3415 153.249L41.4004 153.731C29.5368 105.935 37.6864 77.783 48.1268 60.6397C51.5386 55.0405 55.3869 50.3122 59.2052 45.6208C60.9753 43.446 62.7389 41.2791 64.4496 39.037C69.8814 31.9181 74.9516 23.8509 78.5023 11.8951Z\"\n                fill=\"white\"\n              >\n                <animate\n                  attributeName=\"d\"\n                  values=\"M78.5023 11.8951C79.7101 7.83089 80.5625 3.84468 81.1439 0L83.1657 0C82.5708 4.0221 81.6867 8.20063 80.4195 12.4645C76.7802 24.7187 71.5704 33.0015 66.0397 40.2502C64.2498 42.596 62.4438 44.8141 60.6532 47.0133C60.1079 47.683 59.5641 48.351 59.0226 49.0203C48.4244 86.5587 52.7705 112.03 58.6414 128.301L58.6414 128.301C60.5983 133.728 63.0063 138.918 65.4168 143.979C65.7175 144.611 66.0184 145.24 66.3184 145.868L66.321 145.874C68.4186 150.263 70.4771 154.571 72.1638 158.817C76.025 168.536 78.0243 178.134 74.1119 188.125C72.6871 191.771 70.4087 194.687 68.2691 197.426C67.7208 198.128 67.1817 198.818 66.6683 199.506C64.1212 202.918 62.0735 206.406 61.9605 211.383L60.9607 211.36L61.9604 211.383C61.7792 219.328 66.2795 225.964 70.0544 230.293L68.5471 231.607C64.6819 227.175 59.7622 220.052 59.961 211.337C60.088 205.744 62.4252 201.847 65.0656 198.309C65.6324 197.55 66.2074 196.813 66.7774 196.082L66.7779 196.081C68.8938 193.368 70.9416 190.743 72.2493 187.396L72.2496 187.395C75.8871 178.106 74.0964 169.099 70.3051 159.555C68.6454 155.378 66.6188 151.136 64.5181 146.74L64.518 146.74C64.217 146.109 63.9144 145.476 63.6112 144.839C61.1989 139.774 58.7532 134.507 56.7601 128.979C50.9905 112.989 46.737 88.4842 55.8815 52.9813C53.7837 55.702 51.7497 58.5377 49.835 61.6799C39.7154 78.2966 31.585 105.885 43.3415 153.249L41.4004 153.731C29.5368 105.935 37.6864 77.783 48.1268 60.6397C51.5386 55.0405 55.3869 50.3122 59.2052 45.6208C60.9753 43.446 62.7389 41.2791 64.4496 39.037C69.8814 31.9181 74.9516 23.8509 78.5023 11.8951Z;M80.5023 11.8951C81.7101 7.83089 82.5625 3.84468 83.1439 0L85.1657 0C84.5708 4.0221 83.6867 8.20063 82.4195 12.4645C78.7802 24.7187 73.5704 33.0015 68.0397 40.2502C66.2498 42.596 64.4438 44.8141 62.6532 47.0133C62.1079 47.683 61.5641 48.351 61.0226 49.0203C50.4244 86.5587 54.7705 112.03 60.6414 128.301L60.6414 128.301C62.5983 133.728 65.0063 138.918 67.4168 143.979C67.7175 144.611 68.0184 145.24 68.3184 145.868L68.321 145.874C70.4186 150.263 72.4771 154.571 74.1638 158.817C78.025 168.536 80.0243 178.134 76.1119 188.125C74.6871 191.771 72.4087 194.687 70.2691 197.426C69.7208 198.128 69.1817 198.818 68.6683 199.506C66.1212 202.918 64.0735 206.406 63.9605 211.383L62.9607 211.36L63.9604 211.383C63.7792 219.328 68.2795 225.964 72.0544 230.293L70.5471 231.607C66.6819 227.175 61.7622 220.052 61.961 211.337C62.088 205.744 64.4252 201.847 67.0656 198.309C67.6324 197.55 68.2074 196.813 68.7774 196.082L68.7779 196.081C70.8938 193.368 72.9416 190.743 74.2493 187.396L74.2496 187.395C77.8871 178.106 76.0964 169.099 72.3051 159.555C70.6454 155.378 68.6188 151.136 66.5181 146.74L66.518 146.74C66.217 146.109 65.9144 145.476 65.6112 144.839C63.1989 139.774 60.7532 134.507 58.7601 128.979C52.9905 112.989 48.737 88.4842 57.8815 52.9813C55.7837 55.702 53.7497 58.5377 51.835 61.6799C41.7154 78.2966 33.585 105.885 45.3415 153.249L43.4004 153.731C31.5368 105.935 39.6864 77.783 50.1268 60.6397C53.5386 55.0405 57.3869 50.3122 61.2052 45.6208C62.9753 43.446 64.7389 41.2791 66.4496 39.037C71.8814 31.9181 76.9516 23.8509 80.5023 11.8951Z;M78.5023 11.8951C79.7101 7.83089 80.5625 3.84468 81.1439 0L83.1657 0C82.5708 4.0221 81.6867 8.20063 80.4195 12.4645C76.7802 24.7187 71.5704 33.0015 66.0397 40.2502C64.2498 42.596 62.4438 44.8141 60.6532 47.0133C60.1079 47.683 59.5641 48.351 59.0226 49.0203C48.4244 86.5587 52.7705 112.03 58.6414 128.301L58.6414 128.301C60.5983 133.728 63.0063 138.918 65.4168 143.979C65.7175 144.611 66.0184 145.24 66.3184 145.868L66.321 145.874C68.4186 150.263 70.4771 154.571 72.1638 158.817C76.025 168.536 78.0243 178.134 74.1119 188.125C72.6871 191.771 70.4087 194.687 68.2691 197.426C67.7208 198.128 67.1817 198.818 66.6683 199.506C64.1212 202.918 62.0735 206.406 61.9605 211.383L60.9607 211.36L61.9604 211.383C61.7792 219.328 66.2795 225.964 70.0544 230.293L68.5471 231.607C64.6819 227.175 59.7622 220.052 59.961 211.337C60.088 205.744 62.4252 201.847 65.0656 198.309C65.6324 197.55 66.2074 196.813 66.7774 196.082L66.7779 196.081C68.8938 193.368 70.9416 190.743 72.2493 187.396L72.2496 187.395C75.8871 178.106 74.0964 169.099 70.3051 159.555C68.6454 155.378 66.6188 151.136 64.5181 146.74L64.518 146.74C64.217 146.109 63.9144 145.476 63.6112 144.839C61.1989 139.774 58.7532 134.507 56.7601 128.979C50.9905 112.989 46.737 88.4842 55.8815 52.9813C53.7837 55.702 51.7497 58.5377 49.835 61.6799C39.7154 78.2966 31.585 105.885 43.3415 153.249L41.4004 153.731C29.5368 105.935 37.6864 77.783 48.1268 60.6397C51.5386 55.0405 55.3869 50.3122 59.2052 45.6208C60.9753 43.446 62.7389 41.2791 64.4496 39.037C69.8814 31.9181 74.9516 23.8509 78.5023 11.8951Z\"\n                  begin=\"0s\"\n                  dur=\"1.6s\"\n                  repeatCount=\"indefinite\"\n                  fill=\"freeze\"\n                  calcMode=\"linear\"\n                  keyTimes=\"0;0.5;1\"\n                />\n              </path>\n              <g id=\"Group_2\">\n                <g id=\"Group_3\">\n                  <g id=\"Group_4\">\n                    <path\n                      id=\"Vector\"\n                      d=\"M67.2034 222.486C79.5753 210.114 79.5752 190.056 67.2034 177.684C54.8316 165.312 34.773 165.312 22.4011 177.684C10.0293 190.056 10.0293 210.114 22.4011 222.486C34.7729 234.858 54.8316 234.858 67.2034 222.486Z\"\n                      fill=\"#2EBF8F\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M67.2034 222.486C79.5753 210.114 79.5752 190.056 67.2034 177.684C54.8316 165.312 34.773 165.312 22.4011 177.684C10.0293 190.056 10.0293 210.114 22.4011 222.486C34.7729 234.858 54.8316 234.858 67.2034 222.486Z;M68.3373 223.271C81.1432 211.349 81.8598 191.303 69.9378 178.497C58.0159 165.691 37.97 164.975 25.1641 176.897C12.3583 188.819 11.6417 208.865 23.5636 221.67C35.4856 234.476 55.5315 235.193 68.3373 223.271Z;M67.2034 222.486C79.5753 210.114 79.5752 190.056 67.2034 177.684C54.8316 165.312 34.773 165.312 22.4011 177.684C10.0293 190.056 10.0293 210.114 22.4011 222.486C34.7729 234.858 54.8316 234.858 67.2034 222.486Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                    <g id=\"Group_5\">\n                      <path\n                        id=\"Vector_2\"\n                        d=\"M24.3608 175.88C16.9908 182.11 12.5508 191.61 13.1708 201.98C13.5608 208.58 15.9508 214.58 19.7108 219.45C15.7208 205.18 17.8308 189.76 24.3608 175.88Z\"\n                        fill=\"#FFE4C7\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M24.3608 175.88C16.9908 182.11 12.5508 191.61 13.1708 201.98C13.5608 208.58 15.9508 214.58 19.7108 219.45C15.7208 205.18 17.8308 189.76 24.3608 175.88Z;M27.1873 175.164C19.5995 181.127 14.8229 190.462 15.0721 200.848C15.2261 207.457 17.4002 213.539 20.9838 218.54C17.5061 204.137 20.1656 188.802 27.1873 175.164Z;M24.3608 175.88C16.9908 182.11 12.5508 191.61 13.1708 201.98C13.5608 208.58 15.9508 214.58 19.7108 219.45C15.7208 205.18 17.8308 189.76 24.3608 175.88Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_3\"\n                        d=\"M51.5907 231.01C52.1507 230.09 52.6707 229.17 53.1507 228.24C62.7307 209.72 57.5107 188.17 51.9507 173.78C51.2207 172.56 50.4907 171.34 49.7707 170.11C46.5807 170.24 43.4007 170.38 40.2107 170.51C37.5607 173.88 29.4107 185.13 29.3507 201.64C29.2907 216.91 36.2007 227.61 38.7707 231.23C40.2907 231.59 42.2307 231.9 44.4707 231.92C47.3707 231.95 49.8107 231.49 51.5807 231.01L51.5907 231.01Z\"\n                        fill=\"#2EBF8F\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M51.5907 231.01C52.1507 230.09 52.6707 229.17 53.1507 228.24C62.7307 209.72 57.5107 188.17 51.9507 173.78C51.2207 172.56 50.4907 171.34 49.7707 170.11C46.5807 170.24 43.4007 170.38 40.2107 170.51C37.5607 173.88 29.4107 185.13 29.3507 201.64C29.2907 216.91 36.2007 227.61 38.7707 231.23C40.2907 231.59 42.2307 231.9 44.4707 231.92C47.3707 231.95 49.8107 231.49 51.5807 231.01L51.5907 231.01Z;M52.4305 231.232C53.023 230.332 53.5756 229.432 54.0885 228.519C64.324 210.353 59.8771 188.631 54.8347 174.051C54.1488 172.806 53.4628 171.561 52.7872 170.306C49.5946 170.322 46.4117 170.348 43.2191 170.364C40.4504 173.637 31.9037 184.589 31.2539 201.086C30.6484 216.344 37.1718 227.284 39.6108 230.994C41.117 231.408 43.0447 231.787 45.2825 231.887C48.1796 232.02 50.6345 231.648 52.4205 231.231L52.4305 231.232Z;M51.5907 231.01C52.1507 230.09 52.6707 229.17 53.1507 228.24C62.7307 209.72 57.5107 188.17 51.9507 173.78C51.2207 172.56 50.4907 171.34 49.7707 170.11C46.5807 170.24 43.4007 170.38 40.2107 170.51C37.5607 173.88 29.4107 185.13 29.3507 201.64C29.2907 216.91 36.2007 227.61 38.7707 231.23C40.2907 231.59 42.2307 231.9 44.4707 231.92C47.3707 231.95 49.8107 231.49 51.5807 231.01L51.5907 231.01Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_4\"\n                        d=\"M65.9407 176.5C71.3607 191.37 71.5907 207.28 67.3007 222.38C73.4107 216.2 76.9807 207.55 76.4207 198.2C75.9007 189.52 71.9407 181.88 65.9407 176.5Z\"\n                        fill=\"#FFE4C7\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M65.9407 176.5C71.3607 191.37 71.5907 207.28 67.3007 222.38C73.4107 216.2 76.9807 207.55 76.4207 198.2C75.9007 189.52 71.9407 181.88 65.9407 176.5Z;M68.7185 177.269C73.6038 192.323 73.2653 208.231 68.4386 223.168C74.7655 217.211 78.6422 208.694 78.4166 199.33C78.207 190.637 74.5225 182.86 68.7185 177.269Z;M65.9407 176.5C71.3607 191.37 71.5907 207.28 67.3007 222.38C73.4107 216.2 76.9807 207.55 76.4207 198.2C75.9007 189.52 71.9407 181.88 65.9407 176.5Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                    </g>\n                    <g id=\"Group_6\">\n                      <path\n                        id=\"Vector_5\"\n                        d=\"M38.243 159.225L47.7062 158.659C50.8605 158.471 53.5687 160.873 53.7572 164.028L54.0966 169.708L33.2239 170.955L32.8844 165.275C32.6959 162.121 35.0987 159.413 38.253 159.224L38.243 159.225Z\"\n                        fill=\"#F8B000\"\n                        stroke=\"#F8B000\"\n                        stroke-width=\"0.7\"\n                        stroke-miterlimit=\"10\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M38.243 159.225L47.7062 158.659C50.8605 158.471 53.5687 160.873 53.7572 164.028L54.0966 169.708L33.2239 170.955L32.8844 165.275C32.6959 162.121 35.0987 159.413 38.253 159.224L38.243 159.225Z;M41.6554 159.016L51.1327 158.789C54.2918 158.713 56.9123 161.211 56.9881 164.37L57.1244 170.059L36.2204 170.56L36.0841 164.871C36.0084 161.712 38.5063 159.092 41.6654 159.016L41.6554 159.016Z;M38.243 159.225L47.7062 158.659C50.8605 158.471 53.5687 160.873 53.7572 164.028L54.0966 169.708L33.2239 170.955L32.8844 165.275C32.6959 162.121 35.0987 159.413 38.253 159.224L38.243 159.225Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_6\"\n                        d=\"M40.6808 160.09C40.1808 158.87 39.5808 157.5 40.0108 156.18C39.9408 156.39 40.0608 156.08 40.1008 156.03C40.1308 155.98 40.2608 155.8 40.1508 155.94C40.2308 155.84 40.3208 155.74 40.4208 155.65C40.4608 155.61 40.7008 155.4 40.6008 155.48C40.8008 155.33 41.0108 155.19 41.2308 155.07C41.3408 155.01 41.4608 154.95 41.5708 154.9C41.7508 154.82 41.6408 154.86 41.8308 154.79C42.0708 154.71 42.3108 154.63 42.5608 154.58C42.6808 154.55 42.8008 154.53 42.9308 154.51C42.7608 154.54 43.0908 154.5 43.1608 154.5C43.2708 154.5 43.3908 154.5 43.5008 154.5C43.5908 154.5 43.8308 154.55 43.6308 154.5C43.9808 154.58 44.0008 154.58 44.2508 154.72C44.2708 154.73 44.4408 154.86 44.3508 154.79C44.2708 154.73 44.4008 154.84 44.4008 154.84C44.4908 154.92 44.5708 155.01 44.6508 155.1C44.7608 155.23 44.5808 154.99 44.6708 155.14C44.7008 155.18 44.7308 155.23 44.7608 155.27C44.8408 155.39 44.9108 155.52 44.9708 155.65C45.1108 155.92 45.1108 155.94 45.2208 156.23C45.3308 156.52 45.4308 156.83 45.5308 157.12C45.9808 158.51 45.8708 159.99 45.2908 161.33C45.0708 161.85 45.1308 162.46 45.6708 162.77C46.1108 163.03 46.8808 162.92 47.1108 162.39C47.8308 160.72 48.1508 158.89 47.7108 157.09C47.5308 156.34 47.2408 155.59 46.9308 154.89C46.6708 154.3 46.3108 153.72 45.8208 153.29C44.6808 152.31 43.1608 152.24 41.7608 152.62C40.4408 152.98 39.1108 153.73 38.3408 154.89C37.1908 156.64 37.9408 158.9 38.6608 160.65C38.8808 161.18 39.3608 161.55 39.9508 161.38C40.4508 161.24 40.9008 160.62 40.6808 160.09Z\"\n                        fill=\"#F8B000\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M40.6808 160.09C40.1808 158.87 39.5808 157.5 40.0108 156.18C39.9408 156.39 40.0608 156.08 40.1008 156.03C40.1308 155.98 40.2608 155.8 40.1508 155.94C40.2308 155.84 40.3208 155.74 40.4208 155.65C40.4608 155.61 40.7008 155.4 40.6008 155.48C40.8008 155.33 41.0108 155.19 41.2308 155.07C41.3408 155.01 41.4608 154.95 41.5708 154.9C41.7508 154.82 41.6408 154.86 41.8308 154.79C42.0708 154.71 42.3108 154.63 42.5608 154.58C42.6808 154.55 42.8008 154.53 42.9308 154.51C42.7608 154.54 43.0908 154.5 43.1608 154.5C43.2708 154.5 43.3908 154.5 43.5008 154.5C43.5908 154.5 43.8308 154.55 43.6308 154.5C43.9808 154.58 44.0008 154.58 44.2508 154.72C44.2708 154.73 44.4408 154.86 44.3508 154.79C44.2708 154.73 44.4008 154.84 44.4008 154.84C44.4908 154.92 44.5708 155.01 44.6508 155.1C44.7608 155.23 44.5808 154.99 44.6708 155.14C44.7008 155.18 44.7308 155.23 44.7608 155.27C44.8408 155.39 44.9108 155.52 44.9708 155.65C45.1108 155.92 45.1108 155.94 45.2208 156.23C45.3308 156.52 45.4308 156.83 45.5308 157.12C45.9808 158.51 45.8708 159.99 45.2908 161.33C45.0708 161.85 45.1308 162.46 45.6708 162.77C46.1108 163.03 46.8808 162.92 47.1108 162.39C47.8308 160.72 48.1508 158.89 47.7108 157.09C47.5308 156.34 47.2408 155.59 46.9308 154.89C46.6708 154.3 46.3108 153.72 45.8208 153.29C44.6808 152.31 43.1608 152.24 41.7608 152.62C40.4408 152.98 39.1108 153.73 38.3408 154.89C37.1908 156.64 37.9408 158.9 38.6608 160.65C38.8808 161.18 39.3608 161.55 39.9508 161.38C40.4508 161.24 40.9008 160.62 40.6808 160.09Z;M44.0607 159.967C43.6046 158.73 43.0539 157.34 43.5308 156.036C43.4533 156.243 43.5843 155.938 43.6261 155.889C43.6579 155.84 43.7942 155.665 43.6793 155.801C43.7628 155.704 43.8563 155.607 43.9595 155.521C44.0009 155.482 44.2482 155.281 44.1454 155.358C44.3506 155.215 44.5655 155.082 44.7897 154.97C44.9017 154.914 45.0238 154.859 45.1355 154.813C45.3183 154.739 45.2069 154.775 45.3993 154.712C45.642 154.641 45.8847 154.569 46.1363 154.528C46.2573 154.502 46.3779 154.487 46.5086 154.471C46.3376 154.495 46.6688 154.467 46.7388 154.47C46.8487 154.474 46.9686 154.478 47.0786 154.482C47.1685 154.485 47.4066 154.544 47.2085 154.486C47.5554 154.579 47.5754 154.58 47.8202 154.728C47.8399 154.739 48.0051 154.875 47.9177 154.802C47.8399 154.739 47.9659 154.854 47.9659 154.854C48.0529 154.937 48.1297 155.03 48.2064 155.122C48.3117 155.256 48.1404 155.01 48.225 155.163C48.2535 155.204 48.2817 155.255 48.3103 155.296C48.3859 155.419 48.4512 155.552 48.5066 155.684C48.6368 155.958 48.6361 155.978 48.7357 156.272C48.8352 156.566 48.9241 156.879 49.0137 157.173C49.4137 158.578 49.2509 160.053 48.6234 161.371C48.385 161.883 48.4232 162.495 48.9518 162.824C49.3822 163.1 50.1556 163.017 50.4044 162.496C51.1836 160.853 51.5688 159.035 51.1934 157.221C51.0403 156.465 50.7772 155.705 50.4925 154.994C50.2537 154.395 49.9146 153.803 49.4403 153.355C48.3361 152.335 46.8195 152.211 45.4068 152.541C44.0748 152.853 42.7189 153.555 41.9079 154.687C40.6962 156.395 41.3649 158.68 42.022 160.455C42.2229 160.992 42.6894 161.379 43.2851 161.231C43.7897 161.109 44.2616 160.505 44.0607 159.967Z;M40.6808 160.09C40.1808 158.87 39.5808 157.5 40.0108 156.18C39.9408 156.39 40.0608 156.08 40.1008 156.03C40.1308 155.98 40.2608 155.8 40.1508 155.94C40.2308 155.84 40.3208 155.74 40.4208 155.65C40.4608 155.61 40.7008 155.4 40.6008 155.48C40.8008 155.33 41.0108 155.19 41.2308 155.07C41.3408 155.01 41.4608 154.95 41.5708 154.9C41.7508 154.82 41.6408 154.86 41.8308 154.79C42.0708 154.71 42.3108 154.63 42.5608 154.58C42.6808 154.55 42.8008 154.53 42.9308 154.51C42.7608 154.54 43.0908 154.5 43.1608 154.5C43.2708 154.5 43.3908 154.5 43.5008 154.5C43.5908 154.5 43.8308 154.55 43.6308 154.5C43.9808 154.58 44.0008 154.58 44.2508 154.72C44.2708 154.73 44.4408 154.86 44.3508 154.79C44.2708 154.73 44.4008 154.84 44.4008 154.84C44.4908 154.92 44.5708 155.01 44.6508 155.1C44.7608 155.23 44.5808 154.99 44.6708 155.14C44.7008 155.18 44.7308 155.23 44.7608 155.27C44.8408 155.39 44.9108 155.52 44.9708 155.65C45.1108 155.92 45.1108 155.94 45.2208 156.23C45.3308 156.52 45.4308 156.83 45.5308 157.12C45.9808 158.51 45.8708 159.99 45.2908 161.33C45.0708 161.85 45.1308 162.46 45.6708 162.77C46.1108 163.03 46.8808 162.92 47.1108 162.39C47.8308 160.72 48.1508 158.89 47.7108 157.09C47.5308 156.34 47.2408 155.59 46.9308 154.89C46.6708 154.3 46.3108 153.72 45.8208 153.29C44.6808 152.31 43.1608 152.24 41.7608 152.62C40.4408 152.98 39.1108 153.73 38.3408 154.89C37.1908 156.64 37.9408 158.9 38.6608 160.65C38.8808 161.18 39.3608 161.55 39.9508 161.38C40.4508 161.24 40.9008 160.62 40.6808 160.09Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                    </g>\n                  </g>\n                  <g id=\"Group_7\" style=\"mix-blend-mode: multiply\" opacity=\"0.48\">\n                    <path\n                      id=\"Vector_7\"\n                      d=\"M71.7308 210.69C62.4008 218.91 49.5108 220.66 38.2608 215.58C27.4008 210.67 20.6108 199.92 20.6808 188.02C20.7008 184.47 21.2908 181.03 22.3408 177.76C16.2008 183.94 12.6208 192.6 13.1808 201.98C14.2208 219.45 29.2308 232.76 46.7008 231.72C61.5208 230.83 73.3408 219.9 75.9508 205.94C74.7808 207.64 73.3908 209.24 71.7408 210.69L71.7308 210.69Z\"\n                      fill=\"#2EBF8F\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M71.7308 210.69C62.4008 218.91 49.5108 220.66 38.2608 215.58C27.4008 210.67 20.6108 199.92 20.6808 188.02C20.7008 184.47 21.2908 181.03 22.3408 177.76C16.2008 183.94 12.6208 192.6 13.1808 201.98C14.2208 219.45 29.2308 232.76 46.7008 231.72C61.5208 230.83 73.3408 219.9 75.9508 205.94C74.7808 207.64 73.3908 209.24 71.7408 210.69L71.7308 210.69Z;M73.2834 211.644C63.6657 219.526 50.7214 220.814 39.6601 215.335C28.9824 210.041 22.5808 199.055 23.0759 187.165C23.2227 183.618 23.9352 180.201 25.1013 176.971C18.7445 182.928 14.8574 191.454 15.0819 200.848C15.4972 218.344 30.0221 232.182 47.5181 231.767C62.3605 231.407 74.5634 220.906 77.6704 207.048C76.4404 208.705 74.9942 210.254 73.2934 211.645L73.2834 211.644Z;M71.7308 210.69C62.4008 218.91 49.5108 220.66 38.2608 215.58C27.4008 210.67 20.6108 199.92 20.6808 188.02C20.7008 184.47 21.2908 181.03 22.3408 177.76C16.2008 183.94 12.6208 192.6 13.1808 201.98C14.2208 219.45 29.2308 232.76 46.7008 231.72C61.5208 230.83 73.3408 219.9 75.9508 205.94C74.7808 207.64 73.3908 209.24 71.7408 210.69L71.7308 210.69Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                  </g>\n                </g>\n                <path\n                  id=\"Vector_8\"\n                  d=\"M37.9809 189.81C36.2909 190.88 36.3609 194.05 36.5609 200.36C36.7909 207.74 36.9109 211.43 38.9709 212.42C41.3409 213.56 44.7509 210.77 49.7809 206.67C53.2609 203.83 55.0909 202.3 55.0109 200.19C54.9309 197.95 52.7409 196.45 49.1809 194.08C44.7609 191.13 40.4609 188.26 37.9909 189.82L37.9809 189.81Z\"\n                  fill=\"#FFE4C7\"\n                >\n                  <animate\n                    attributeName=\"d\"\n                    values=\"M37.9809 189.81C36.2909 190.88 36.3609 194.05 36.5609 200.36C36.7909 207.74 36.9109 211.43 38.9709 212.42C41.3409 213.56 44.7509 210.77 49.7809 206.67C53.2609 203.83 55.0909 202.3 55.0109 200.19C54.9309 197.95 52.7409 196.45 49.1809 194.08C44.7609 191.13 40.4609 188.26 37.9909 189.82L37.9809 189.81Z;M40.3007 189.572C38.5736 190.581 38.5303 193.751 38.5048 200.065C38.471 207.448 38.4591 211.14 40.4824 212.203C42.8102 213.427 46.3176 210.76 51.4909 206.843C55.0701 204.129 56.9536 202.665 56.9491 200.554C56.9491 198.312 54.8141 196.735 51.341 194.239C47.0293 191.133 42.8345 188.112 40.3104 189.582L40.3007 189.572Z;M37.9809 189.81C36.2909 190.88 36.3609 194.05 36.5609 200.36C36.7909 207.74 36.9109 211.43 38.9709 212.42C41.3409 213.56 44.7509 210.77 49.7809 206.67C53.2609 203.83 55.0909 202.3 55.0109 200.19C54.9309 197.95 52.7409 196.45 49.1809 194.08C44.7609 191.13 40.4609 188.26 37.9909 189.82L37.9809 189.81Z\"\n                    begin=\"0s\"\n                    dur=\"1.6s\"\n                    repeatCount=\"indefinite\"\n                    fill=\"freeze\"\n                    calcMode=\"linear\"\n                    keyTimes=\"0;0.5;1\"\n                  />\n                </path>\n              </g>\n              <g id=\"Group_8\">\n                <g id=\"Group_9\">\n                  <g id=\"Group_10\">\n                    <g id=\"Group_11\">\n                      <path\n                        id=\"Vector_9\"\n                        d=\"M67.7287 258.222C74.6214 258.154 80.1535 252.511 80.0849 245.618C80.0163 238.725 74.3731 233.193 67.4804 233.262C60.5877 233.33 55.0556 238.973 55.1242 245.866C55.1927 252.759 60.836 258.291 67.7287 258.222Z\"\n                        fill=\"#DE2D35\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M67.7287 258.222C74.6214 258.154 80.1535 252.511 80.0849 245.618C80.0163 238.725 74.3731 233.193 67.4804 233.262C60.5877 233.33 55.0556 238.973 55.1242 245.866C55.1927 252.759 60.836 258.291 67.7287 258.222Z;M69.7287 258.222C76.6214 258.154 82.1535 252.511 82.0849 245.618C82.0163 238.725 76.3731 233.193 69.4804 233.262C62.5877 233.33 57.0556 238.973 57.1242 245.866C57.1927 252.759 62.836 258.291 69.7287 258.222Z;M67.7287 258.222C74.6214 258.154 80.1535 252.511 80.0849 245.618C80.0163 238.725 74.3731 233.193 67.4804 233.262C60.5877 233.33 55.0556 238.973 55.1242 245.866C55.1927 252.759 60.836 258.291 67.7287 258.222Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <g id=\"Group_12\">\n                        <path\n                          id=\"Vector_10\"\n                          d=\"M61.6409 236.872C62.878 236.668 64.1464 236.407 65.4045 236.616C67.9675 237.044 68.9854 238.73 70.0189 240.881C70.7706 242.437 71.6371 242.781 73.1822 242.097C74.2889 241.601 75.2807 241.1 76.4813 240.85C77.3217 240.677 78.1673 240.604 78.9973 240.641C77.3269 236.914 73.8608 234.085 69.5283 233.406C65.394 232.764 61.4216 234.231 58.6968 237.002C59.5737 237.363 60.7743 237.013 61.6409 236.872Z\"\n                          fill=\"#FFE4C7\"\n                        >\n                          <animate\n                            attributeName=\"d\"\n                            values=\"M61.6409 236.872C62.878 236.668 64.1464 236.407 65.4045 236.616C67.9675 237.044 68.9854 238.73 70.0189 240.881C70.7706 242.437 71.6371 242.781 73.1822 242.097C74.2889 241.601 75.2807 241.1 76.4813 240.85C77.3217 240.677 78.1673 240.604 78.9973 240.641C77.3269 236.914 73.8608 234.085 69.5283 233.406C65.394 232.764 61.4216 234.231 58.6968 237.002C59.5737 237.363 60.7743 237.013 61.6409 236.872Z;M63.6409 236.872C64.878 236.668 66.1464 236.407 67.4045 236.616C69.9675 237.044 70.9854 238.73 72.0189 240.881C72.7706 242.437 73.6371 242.781 75.1822 242.097C76.2889 241.601 77.2807 241.1 78.4813 240.85C79.3217 240.677 80.1673 240.604 80.9973 240.641C79.3269 236.914 75.8608 234.085 71.5283 233.406C67.394 232.764 63.4216 234.231 60.6968 237.002C61.5737 237.363 62.7743 237.013 63.6409 236.872Z;M61.6409 236.872C62.878 236.668 64.1464 236.407 65.4045 236.616C67.9675 237.044 68.9854 238.73 70.0189 240.881C70.7706 242.437 71.6371 242.781 73.1822 242.097C74.2889 241.601 75.2807 241.1 76.4813 240.85C77.3217 240.677 78.1673 240.604 78.9973 240.641C77.3269 236.914 73.8608 234.085 69.5283 233.406C65.394 232.764 61.4216 234.231 58.6968 237.002C59.5737 237.363 60.7743 237.013 61.6409 236.872Z\"\n                            begin=\"0s\"\n                            dur=\"1.6s\"\n                            repeatCount=\"indefinite\"\n                            fill=\"freeze\"\n                            calcMode=\"linear\"\n                            keyTimes=\"0;0.5;1\"\n                          />\n                        </path>\n                        <path\n                          id=\"Vector_11\"\n                          d=\"M73.9286 245.85C71.3709 246.847 68.8183 245.981 67.2836 243.679C66.7198 242.833 66.5267 241.471 65.7959 240.771C65.0077 240.02 63.7862 240.301 62.8362 240.448C60.6072 240.782 58.4201 241.225 56.4887 240.056C55.8988 241.205 55.4812 242.468 55.2724 243.815C55.1419 244.655 55.1001 245.49 55.1367 246.304C55.8309 246.263 56.567 246.017 57.1307 245.876C58.5401 245.516 59.9652 245.041 61.4268 244.921C64.3656 244.676 66.2031 246.524 67.7377 248.768C68.4268 249.776 69.1315 250.83 70.4574 250.856C71.7154 250.877 72.9995 250.439 74.2262 250.214C75.9853 249.891 77.6714 249.927 79.0912 250.648C79.4932 249.713 79.7855 248.711 79.9473 247.656C80.1091 246.602 80.1352 245.563 80.0413 244.551C78.0316 243.914 75.9331 245.073 73.9391 245.85L73.9286 245.85Z\"\n                          fill=\"#FFE4C7\"\n                        >\n                          <animate\n                            attributeName=\"d\"\n                            values=\"M73.9286 245.85C71.3709 246.847 68.8183 245.981 67.2836 243.679C66.7198 242.833 66.5267 241.471 65.7959 240.771C65.0077 240.02 63.7862 240.301 62.8362 240.448C60.6072 240.782 58.4201 241.225 56.4887 240.056C55.8988 241.205 55.4812 242.468 55.2724 243.815C55.1419 244.655 55.1001 245.49 55.1367 246.304C55.8309 246.263 56.567 246.017 57.1307 245.876C58.5401 245.516 59.9652 245.041 61.4268 244.921C64.3656 244.676 66.2031 246.524 67.7377 248.768C68.4268 249.776 69.1315 250.83 70.4574 250.856C71.7154 250.877 72.9995 250.439 74.2262 250.214C75.9853 249.891 77.6714 249.927 79.0912 250.648C79.4932 249.713 79.7855 248.711 79.9473 247.656C80.1091 246.602 80.1352 245.563 80.0413 244.551C78.0316 243.914 75.9331 245.073 73.9391 245.85L73.9286 245.85Z;M75.9286 245.85C73.3709 246.847 70.8183 245.981 69.2836 243.679C68.7198 242.833 68.5267 241.471 67.7959 240.771C67.0077 240.02 65.7862 240.301 64.8362 240.448C62.6072 240.782 60.4201 241.225 58.4887 240.056C57.8988 241.205 57.4812 242.468 57.2724 243.815C57.1419 244.655 57.1001 245.49 57.1367 246.304C57.8309 246.263 58.567 246.017 59.1307 245.876C60.5401 245.516 61.9652 245.041 63.4268 244.921C66.3656 244.676 68.2031 246.524 69.7377 248.768C70.4268 249.776 71.1315 250.83 72.4574 250.856C73.7154 250.877 74.9995 250.439 76.2262 250.214C77.9853 249.891 79.6714 249.927 81.0912 250.648C81.4932 249.713 81.7855 248.711 81.9473 247.656C82.1091 246.602 82.1352 245.563 82.0413 244.551C80.0316 243.914 77.9331 245.073 75.9391 245.85L75.9286 245.85Z;M73.9286 245.85C71.3709 246.847 68.8183 245.981 67.2836 243.679C66.7198 242.833 66.5267 241.471 65.7959 240.771C65.0077 240.02 63.7862 240.301 62.8362 240.448C60.6072 240.782 58.4201 241.225 56.4887 240.056C55.8988 241.205 55.4812 242.468 55.2724 243.815C55.1419 244.655 55.1001 245.49 55.1367 246.304C55.8309 246.263 56.567 246.017 57.1307 245.876C58.5401 245.516 59.9652 245.041 61.4268 244.921C64.3656 244.676 66.2031 246.524 67.7377 248.768C68.4268 249.776 69.1315 250.83 70.4574 250.856C71.7154 250.877 72.9995 250.439 74.2262 250.214C75.9853 249.891 77.6714 249.927 79.0912 250.648C79.4932 249.713 79.7855 248.711 79.9473 247.656C80.1091 246.602 80.1352 245.563 80.0413 244.551C78.0316 243.914 75.9331 245.073 73.9391 245.85L73.9286 245.85Z\"\n                            begin=\"0s\"\n                            dur=\"1.6s\"\n                            repeatCount=\"indefinite\"\n                            fill=\"freeze\"\n                            calcMode=\"linear\"\n                            keyTimes=\"0;0.5;1\"\n                          />\n                        </path>\n                        <path\n                          id=\"Vector_12\"\n                          d=\"M68.8549 256.139C69.7736 256.426 70.2434 257.178 70.2747 257.935C72.9369 257.35 75.3277 255.909 77.0816 253.863C75.4008 253.216 72.6342 254.469 71.0682 254.589C68.3381 254.792 66.3702 253.378 64.8512 251.217C64.1882 250.272 63.5462 248.862 62.2777 248.653C61.1032 248.46 59.6834 249.087 58.5715 249.379C57.6946 249.609 56.7706 249.833 55.8467 249.943C56.1703 250.846 56.6036 251.702 57.1204 252.501C61.6043 250.862 64.8146 254.865 68.8549 256.139Z\"\n                          fill=\"#FFE4C7\"\n                        >\n                          <animate\n                            attributeName=\"d\"\n                            values=\"M68.8549 256.139C69.7736 256.426 70.2434 257.178 70.2747 257.935C72.9369 257.35 75.3277 255.909 77.0816 253.863C75.4008 253.216 72.6342 254.469 71.0682 254.589C68.3381 254.792 66.3702 253.378 64.8512 251.217C64.1882 250.272 63.5462 248.862 62.2777 248.653C61.1032 248.46 59.6834 249.087 58.5715 249.379C57.6946 249.609 56.7706 249.833 55.8467 249.943C56.1703 250.846 56.6036 251.702 57.1204 252.501C61.6043 250.862 64.8146 254.865 68.8549 256.139Z;M70.8549 256.139C71.7736 256.426 72.2434 257.178 72.2747 257.935C74.9369 257.35 77.3277 255.909 79.0816 253.863C77.4008 253.216 74.6342 254.469 73.0682 254.589C70.3381 254.792 68.3702 253.378 66.8512 251.217C66.1882 250.272 65.5462 248.862 64.2777 248.653C63.1032 248.46 61.6834 249.087 60.5715 249.379C59.6946 249.609 58.7706 249.833 57.8467 249.943C58.1703 250.846 58.6036 251.702 59.1204 252.501C63.6043 250.862 66.8146 254.865 70.8549 256.139Z;M68.8549 256.139C69.7736 256.426 70.2434 257.178 70.2747 257.935C72.9369 257.35 75.3277 255.909 77.0816 253.863C75.4008 253.216 72.6342 254.469 71.0682 254.589C68.3381 254.792 66.3702 253.378 64.8512 251.217C64.1882 250.272 63.5462 248.862 62.2777 248.653C61.1032 248.46 59.6834 249.087 58.5715 249.379C57.6946 249.609 56.7706 249.833 55.8467 249.943C56.1703 250.846 56.6036 251.702 57.1204 252.501C61.6043 250.862 64.8146 254.865 68.8549 256.139Z\"\n                            begin=\"0s\"\n                            dur=\"1.6s\"\n                            repeatCount=\"indefinite\"\n                            fill=\"freeze\"\n                            calcMode=\"linear\"\n                            keyTimes=\"0;0.5;1\"\n                          />\n                        </path>\n                      </g>\n                    </g>\n                    <g id=\"Group_13\">\n                      <path\n                        id=\"Vector_13\"\n                        d=\"M68.5031 229.457L72.1909 230.031C73.4185 230.222 74.259 231.373 74.0678 232.6L73.7233 234.813L65.5842 233.546L65.9288 231.333C66.1199 230.105 67.2704 229.265 68.4979 229.456L68.5031 229.457Z\"\n                        fill=\"#F8B000\"\n                        stroke=\"#F8B000\"\n                        stroke-width=\"0.83\"\n                        stroke-miterlimit=\"10\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M68.5031 229.457L72.1909 230.031C73.4185 230.222 74.259 231.373 74.0678 232.6L73.7233 234.813L65.5842 233.546L65.9288 231.333C66.1199 230.105 67.2704 229.265 68.4979 229.456L68.5031 229.457Z;M70.5031 229.457L74.1909 230.031C75.4185 230.222 76.259 231.373 76.0678 232.6L75.7233 234.813L67.5842 233.546L67.9288 231.333C68.1199 230.105 69.2704 229.265 70.4979 229.456L70.5031 229.457Z;M68.5031 229.457L72.1909 230.031C73.4185 230.222 74.259 231.373 74.0678 232.6L73.7233 234.813L65.5842 233.546L65.9288 231.333C66.1199 230.105 67.2704 229.265 68.4979 229.456L68.5031 229.457Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_14\"\n                        d=\"M69.5803 229.846C69.5699 229.783 69.5594 229.715 69.549 229.653C69.5438 229.606 69.5177 229.444 69.5333 229.574C69.5177 229.433 69.502 229.298 69.502 229.157C69.502 229.094 69.502 229.026 69.502 228.964C69.502 228.937 69.502 228.911 69.5072 228.88C69.5124 228.786 69.4811 228.984 69.5072 228.89C69.5281 228.833 69.5385 228.77 69.5542 228.708C69.5542 228.697 69.5855 228.614 69.5542 228.687C69.5229 228.77 69.5803 228.635 69.5907 228.619C69.6012 228.598 69.6168 228.577 69.6273 228.556C69.6586 228.488 69.5333 228.656 69.5907 228.603C69.6221 228.572 69.6534 228.541 69.6795 228.509C69.7578 228.431 69.5751 228.577 69.669 228.515C69.716 228.489 69.7578 228.457 69.8048 228.431C69.8309 228.415 69.857 228.405 69.8778 228.395C69.9666 228.348 69.8413 228.41 69.8413 228.41C69.8413 228.395 69.9457 228.374 69.9614 228.368C70.0658 228.332 70.1754 228.311 70.285 228.29C70.4468 228.259 70.191 228.29 70.3111 228.29C70.3633 228.29 70.4155 228.28 70.4625 228.28C70.5564 228.28 70.6922 228.311 70.7809 228.295C70.7652 228.295 70.6243 228.264 70.7287 228.295C70.7496 228.295 70.7652 228.306 70.7861 228.306C70.8279 228.316 70.8696 228.332 70.9114 228.342C70.974 228.342 70.9427 228.353 70.9114 228.342C70.8279 228.337 70.901 228.342 70.9375 228.358C70.9584 228.368 70.9793 228.384 70.9949 228.395C71.0993 228.457 70.9584 228.337 70.9845 228.389C70.9897 228.405 71.021 228.426 71.0315 228.436C71.1254 228.52 71.0001 228.405 71.0106 228.405C71.021 228.405 71.0837 228.525 71.0889 228.53C71.162 228.656 71.068 228.447 71.0993 228.551C71.115 228.609 71.1359 228.666 71.1515 228.723C71.1724 228.812 71.1672 228.969 71.2142 229.047C71.2142 229.047 71.1985 228.917 71.2089 228.995C71.2089 229.021 71.2142 229.042 71.2194 229.068C71.2246 229.131 71.235 229.198 71.2403 229.266C71.2559 229.428 71.2507 229.585 71.2455 229.752C71.2455 229.825 71.2455 229.736 71.2507 229.726C71.2455 229.773 71.235 229.82 71.2246 229.867C71.2089 229.945 71.1881 230.018 71.1672 230.091C71.1463 230.164 71.115 230.237 71.0889 230.31C71.0628 230.383 71.0889 230.3 71.0993 230.289C71.0784 230.331 71.0576 230.378 71.0367 230.42C70.9584 230.566 70.8749 230.707 70.7757 230.843C70.5773 231.119 70.7183 231.574 71.0106 231.73C71.3447 231.908 71.684 231.793 71.898 231.495C72.3312 230.89 72.6027 230.117 72.5453 229.371C72.4983 228.729 72.4148 228.034 71.9658 227.538C71.5482 227.084 70.8696 226.949 70.2746 227.016C69.6795 227.084 69.027 227.272 68.6459 227.758C68.0769 228.473 68.1761 229.381 68.3223 230.222C68.3797 230.556 68.8077 230.775 69.1209 230.676C69.4811 230.561 69.6377 230.237 69.5751 229.877L69.5803 229.846Z\"\n                        fill=\"#F8B000\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M69.5803 229.846C69.5699 229.783 69.5594 229.715 69.549 229.653C69.5438 229.606 69.5177 229.444 69.5333 229.574C69.5177 229.433 69.502 229.298 69.502 229.157C69.502 229.094 69.502 229.026 69.502 228.964C69.502 228.937 69.502 228.911 69.5072 228.88C69.5124 228.786 69.4811 228.984 69.5072 228.89C69.5281 228.833 69.5385 228.77 69.5542 228.708C69.5542 228.697 69.5855 228.614 69.5542 228.687C69.5229 228.77 69.5803 228.635 69.5907 228.619C69.6012 228.598 69.6168 228.577 69.6273 228.556C69.6586 228.488 69.5333 228.656 69.5907 228.603C69.6221 228.572 69.6534 228.541 69.6795 228.509C69.7578 228.431 69.5751 228.577 69.669 228.515C69.716 228.489 69.7578 228.457 69.8048 228.431C69.8309 228.415 69.857 228.405 69.8778 228.395C69.9666 228.348 69.8413 228.41 69.8413 228.41C69.8413 228.395 69.9457 228.374 69.9614 228.368C70.0658 228.332 70.1754 228.311 70.285 228.29C70.4468 228.259 70.191 228.29 70.3111 228.29C70.3633 228.29 70.4155 228.28 70.4625 228.28C70.5564 228.28 70.6922 228.311 70.7809 228.295C70.7652 228.295 70.6243 228.264 70.7287 228.295C70.7496 228.295 70.7652 228.306 70.7861 228.306C70.8279 228.316 70.8696 228.332 70.9114 228.342C70.974 228.342 70.9427 228.353 70.9114 228.342C70.8279 228.337 70.901 228.342 70.9375 228.358C70.9584 228.368 70.9793 228.384 70.9949 228.395C71.0993 228.457 70.9584 228.337 70.9845 228.389C70.9897 228.405 71.021 228.426 71.0315 228.436C71.1254 228.52 71.0001 228.405 71.0106 228.405C71.021 228.405 71.0837 228.525 71.0889 228.53C71.162 228.656 71.068 228.447 71.0993 228.551C71.115 228.609 71.1359 228.666 71.1515 228.723C71.1724 228.812 71.1672 228.969 71.2142 229.047C71.2142 229.047 71.1985 228.917 71.2089 228.995C71.2089 229.021 71.2142 229.042 71.2194 229.068C71.2246 229.131 71.235 229.198 71.2403 229.266C71.2559 229.428 71.2507 229.585 71.2455 229.752C71.2455 229.825 71.2455 229.736 71.2507 229.726C71.2455 229.773 71.235 229.82 71.2246 229.867C71.2089 229.945 71.1881 230.018 71.1672 230.091C71.1463 230.164 71.115 230.237 71.0889 230.31C71.0628 230.383 71.0889 230.3 71.0993 230.289C71.0784 230.331 71.0576 230.378 71.0367 230.42C70.9584 230.566 70.8749 230.707 70.7757 230.843C70.5773 231.119 70.7183 231.574 71.0106 231.73C71.3447 231.908 71.684 231.793 71.898 231.495C72.3312 230.89 72.6027 230.117 72.5453 229.371C72.4983 228.729 72.4148 228.034 71.9658 227.538C71.5482 227.084 70.8696 226.949 70.2746 227.016C69.6795 227.084 69.027 227.272 68.6459 227.758C68.0769 228.473 68.1761 229.381 68.3223 230.222C68.3797 230.556 68.8077 230.775 69.1209 230.676C69.4811 230.561 69.6377 230.237 69.5751 229.877L69.5803 229.846Z;M71.5803 229.846C71.5699 229.783 71.5594 229.715 71.549 229.653C71.5438 229.606 71.5177 229.444 71.5333 229.574C71.5177 229.433 71.502 229.298 71.502 229.157C71.502 229.094 71.502 229.026 71.502 228.964C71.502 228.937 71.502 228.911 71.5072 228.88C71.5124 228.786 71.4811 228.984 71.5072 228.89C71.5281 228.833 71.5385 228.77 71.5542 228.708C71.5542 228.697 71.5855 228.614 71.5542 228.687C71.5229 228.77 71.5803 228.635 71.5907 228.619C71.6012 228.598 71.6168 228.577 71.6273 228.556C71.6586 228.488 71.5333 228.656 71.5907 228.603C71.6221 228.572 71.6534 228.541 71.6795 228.509C71.7578 228.431 71.5751 228.577 71.669 228.515C71.716 228.489 71.7578 228.457 71.8048 228.431C71.8309 228.415 71.857 228.405 71.8778 228.395C71.9666 228.348 71.8413 228.41 71.8413 228.41C71.8413 228.395 71.9457 228.374 71.9614 228.368C72.0658 228.332 72.1754 228.311 72.285 228.29C72.4468 228.259 72.191 228.29 72.3111 228.29C72.3633 228.29 72.4155 228.28 72.4625 228.28C72.5564 228.28 72.6922 228.311 72.7809 228.295C72.7652 228.295 72.6243 228.264 72.7287 228.295C72.7496 228.295 72.7652 228.306 72.7861 228.306C72.8279 228.316 72.8696 228.332 72.9114 228.342C72.974 228.342 72.9427 228.353 72.9114 228.342C72.8279 228.337 72.901 228.342 72.9375 228.358C72.9584 228.368 72.9793 228.384 72.9949 228.395C73.0993 228.457 72.9584 228.337 72.9845 228.389C72.9897 228.405 73.021 228.426 73.0315 228.436C73.1254 228.52 73.0001 228.405 73.0106 228.405C73.021 228.405 73.0837 228.525 73.0889 228.53C73.162 228.656 73.068 228.447 73.0993 228.551C73.115 228.609 73.1359 228.666 73.1515 228.723C73.1724 228.812 73.1672 228.969 73.2142 229.047C73.2142 229.047 73.1985 228.917 73.2089 228.995C73.2089 229.021 73.2142 229.042 73.2194 229.068C73.2246 229.131 73.235 229.198 73.2403 229.266C73.2559 229.428 73.2507 229.585 73.2455 229.752C73.2455 229.825 73.2455 229.736 73.2507 229.726C73.2455 229.773 73.235 229.82 73.2246 229.867C73.2089 229.945 73.1881 230.018 73.1672 230.091C73.1463 230.164 73.115 230.237 73.0889 230.31C73.0628 230.383 73.0889 230.3 73.0993 230.289C73.0784 230.331 73.0576 230.378 73.0367 230.42C72.9584 230.566 72.8749 230.707 72.7757 230.843C72.5773 231.119 72.7183 231.574 73.0106 231.73C73.3447 231.908 73.684 231.793 73.898 231.495C74.3312 230.89 74.6027 230.117 74.5453 229.371C74.4983 228.729 74.4148 228.034 73.9658 227.538C73.5482 227.084 72.8696 226.949 72.2746 227.016C71.6795 227.084 71.027 227.272 70.6459 227.758C70.0769 228.473 70.1761 229.381 70.3223 230.222C70.3797 230.556 70.8077 230.775 71.1209 230.676C71.4811 230.561 71.6377 230.237 71.5751 229.877L71.5803 229.846Z;M69.5803 229.846C69.5699 229.783 69.5594 229.715 69.549 229.653C69.5438 229.606 69.5177 229.444 69.5333 229.574C69.5177 229.433 69.502 229.298 69.502 229.157C69.502 229.094 69.502 229.026 69.502 228.964C69.502 228.937 69.502 228.911 69.5072 228.88C69.5124 228.786 69.4811 228.984 69.5072 228.89C69.5281 228.833 69.5385 228.77 69.5542 228.708C69.5542 228.697 69.5855 228.614 69.5542 228.687C69.5229 228.77 69.5803 228.635 69.5907 228.619C69.6012 228.598 69.6168 228.577 69.6273 228.556C69.6586 228.488 69.5333 228.656 69.5907 228.603C69.6221 228.572 69.6534 228.541 69.6795 228.509C69.7578 228.431 69.5751 228.577 69.669 228.515C69.716 228.489 69.7578 228.457 69.8048 228.431C69.8309 228.415 69.857 228.405 69.8778 228.395C69.9666 228.348 69.8413 228.41 69.8413 228.41C69.8413 228.395 69.9457 228.374 69.9614 228.368C70.0658 228.332 70.1754 228.311 70.285 228.29C70.4468 228.259 70.191 228.29 70.3111 228.29C70.3633 228.29 70.4155 228.28 70.4625 228.28C70.5564 228.28 70.6922 228.311 70.7809 228.295C70.7652 228.295 70.6243 228.264 70.7287 228.295C70.7496 228.295 70.7652 228.306 70.7861 228.306C70.8279 228.316 70.8696 228.332 70.9114 228.342C70.974 228.342 70.9427 228.353 70.9114 228.342C70.8279 228.337 70.901 228.342 70.9375 228.358C70.9584 228.368 70.9793 228.384 70.9949 228.395C71.0993 228.457 70.9584 228.337 70.9845 228.389C70.9897 228.405 71.021 228.426 71.0315 228.436C71.1254 228.52 71.0001 228.405 71.0106 228.405C71.021 228.405 71.0837 228.525 71.0889 228.53C71.162 228.656 71.068 228.447 71.0993 228.551C71.115 228.609 71.1359 228.666 71.1515 228.723C71.1724 228.812 71.1672 228.969 71.2142 229.047C71.2142 229.047 71.1985 228.917 71.2089 228.995C71.2089 229.021 71.2142 229.042 71.2194 229.068C71.2246 229.131 71.235 229.198 71.2403 229.266C71.2559 229.428 71.2507 229.585 71.2455 229.752C71.2455 229.825 71.2455 229.736 71.2507 229.726C71.2455 229.773 71.235 229.82 71.2246 229.867C71.2089 229.945 71.1881 230.018 71.1672 230.091C71.1463 230.164 71.115 230.237 71.0889 230.31C71.0628 230.383 71.0889 230.3 71.0993 230.289C71.0784 230.331 71.0576 230.378 71.0367 230.42C70.9584 230.566 70.8749 230.707 70.7757 230.843C70.5773 231.119 70.7183 231.574 71.0106 231.73C71.3447 231.908 71.684 231.793 71.898 231.495C72.3312 230.89 72.6027 230.117 72.5453 229.371C72.4983 228.729 72.4148 228.034 71.9658 227.538C71.5482 227.084 70.8696 226.949 70.2746 227.016C69.6795 227.084 69.027 227.272 68.6459 227.758C68.0769 228.473 68.1761 229.381 68.3223 230.222C68.3797 230.556 68.8077 230.775 69.1209 230.676C69.4811 230.561 69.6377 230.237 69.5751 229.877L69.5803 229.846Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                    </g>\n                  </g>\n                  <g id=\"Group_14\">\n                    <path\n                      id=\"Vector_15\"\n                      d=\"M71.569 239.43C72.4042 239.43 72.4042 238.135 71.569 238.135C70.7338 238.135 70.7338 239.43 71.569 239.43Z\"\n                      fill=\"#DE2D35\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M71.569 239.43C72.4042 239.43 72.4042 238.135 71.569 238.135C70.7338 238.135 70.7338 239.43 71.569 239.43Z;M73.569 239.43C74.4042 239.43 74.4042 238.135 73.569 238.135C72.7338 238.135 72.7338 239.43 73.569 239.43Z;M71.569 239.43C72.4042 239.43 72.4042 238.135 71.569 238.135C70.7338 238.135 70.7338 239.43 71.569 239.43Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                    <path\n                      id=\"Vector_16\"\n                      d=\"M63.2746 242.927C64.1098 242.927 64.1098 241.633 63.2746 241.633C62.4394 241.633 62.4394 242.927 63.2746 242.927Z\"\n                      fill=\"#DE2D35\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M63.2746 242.927C64.1098 242.927 64.1098 241.633 63.2746 241.633C62.4394 241.633 62.4394 242.927 63.2746 242.927Z;M65.2746 242.927C66.1098 242.927 66.1098 241.633 65.2746 241.633C64.4394 241.633 64.4394 242.927 65.2746 242.927Z;M63.2746 242.927C64.1098 242.927 64.1098 241.633 63.2746 241.633C62.4394 241.633 62.4394 242.927 63.2746 242.927Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                    <path\n                      id=\"Vector_17\"\n                      d=\"M75.0925 248.22C75.9277 248.22 75.9277 246.926 75.0925 246.926C74.2573 246.926 74.2573 248.22 75.0925 248.22Z\"\n                      fill=\"#DE2D35\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M75.0925 248.22C75.9277 248.22 75.9277 246.926 75.0925 246.926C74.2573 246.926 74.2573 248.22 75.0925 248.22Z;M77.0925 248.22C77.9277 248.22 77.9277 246.926 77.0925 246.926C76.2573 246.926 76.2573 248.22 77.0925 248.22Z;M75.0925 248.22C75.9277 248.22 75.9277 246.926 75.0925 246.926C74.2573 246.926 74.2573 248.22 75.0925 248.22Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                  </g>\n                </g>\n                <g id=\"Group_15\" style=\"mix-blend-mode: multiply\" opacity=\"0.48\">\n                  <path\n                    id=\"Vector_18\"\n                    d=\"M77.0868 252.072C72.8064 254.458 67.6961 254.051 63.7915 251.154C60.0227 248.356 58.3053 243.647 59.3284 239.069C59.6312 237.702 60.148 236.428 60.8266 235.259C57.9451 237.122 55.8415 240.16 55.2725 243.814C54.2128 250.626 58.8743 257.01 65.6864 258.07C71.4649 258.968 76.9302 255.752 79.107 250.595C78.5119 251.148 77.8437 251.65 77.0868 252.072Z\"\n                    fill=\"#DE2D35\"\n                    fill-opacity=\"0.6\"\n                  >\n                    <animate\n                      attributeName=\"d\"\n                      values=\"M77.0868 252.072C72.8064 254.458 67.6961 254.051 63.7915 251.154C60.0227 248.356 58.3053 243.647 59.3284 239.069C59.6312 237.702 60.148 236.428 60.8266 235.259C57.9451 237.122 55.8415 240.16 55.2725 243.814C54.2128 250.626 58.8743 257.01 65.6864 258.07C71.4649 258.968 76.9302 255.752 79.107 250.595C78.5119 251.148 77.8437 251.65 77.0868 252.072Z;M79.0868 252.072C74.8064 254.458 69.6961 254.051 65.7915 251.154C62.0227 248.356 60.3053 243.647 61.3284 239.069C61.6312 237.702 62.148 236.428 62.8266 235.259C59.9451 237.122 57.8415 240.16 57.2725 243.814C56.2128 250.626 60.8743 257.01 67.6864 258.07C73.4649 258.968 78.9302 255.752 81.107 250.595C80.5119 251.148 79.8437 251.65 79.0868 252.072Z;M77.0868 252.072C72.8064 254.458 67.6961 254.051 63.7915 251.154C60.0227 248.356 58.3053 243.647 59.3284 239.069C59.6312 237.702 60.148 236.428 60.8266 235.259C57.9451 237.122 55.8415 240.16 55.2725 243.814C54.2128 250.626 58.8743 257.01 65.6864 258.07C71.4649 258.968 76.9302 255.752 79.107 250.595C78.5119 251.148 77.8437 251.65 77.0868 252.072Z\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                  </path>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n      <svg\n        slot=\"pause\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"90\"\n        height=\"259\"\n        viewBox=\"0 0 90 259\"\n        fill=\"none\"\n        style=\"&#10;\"\n      >\n        <g id=\"Group\">\n          <g id=\"Capa 2\">\n            <g id=\"Capa 1\">\n              <path\n                id=\"wire\"\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M78.5023 11.8951C79.7101 7.83089 80.5625 3.84468 81.1439 0L83.1657 0C82.5708 4.0221 81.6867 8.20063 80.4195 12.4645C76.7802 24.7187 71.5704 33.0015 66.0397 40.2502C64.2498 42.596 62.4438 44.8141 60.6532 47.0133C60.1079 47.683 59.5641 48.351 59.0226 49.0203C48.4244 86.5587 52.7705 112.03 58.6414 128.301L58.6414 128.301C60.5983 133.728 63.0063 138.918 65.4168 143.979C65.7175 144.611 66.0184 145.24 66.3184 145.868L66.321 145.874C68.4186 150.263 70.4771 154.571 72.1638 158.817C76.025 168.536 78.0243 178.134 74.1119 188.125C72.6871 191.771 70.4087 194.687 68.2691 197.426C67.7208 198.128 67.1817 198.818 66.6683 199.506C64.1212 202.918 62.0735 206.406 61.9605 211.383L60.9607 211.36L61.9604 211.383C61.7792 219.328 66.2795 225.964 70.0544 230.293L68.5471 231.607C64.6819 227.175 59.7622 220.052 59.961 211.337C60.088 205.744 62.4252 201.847 65.0656 198.309C65.6324 197.55 66.2074 196.813 66.7774 196.082L66.7779 196.081C68.8938 193.368 70.9416 190.743 72.2493 187.396L72.2496 187.395C75.8871 178.106 74.0964 169.099 70.3051 159.555C68.6454 155.378 66.6188 151.136 64.5181 146.74L64.518 146.74C64.217 146.109 63.9144 145.476 63.6112 144.839C61.1989 139.774 58.7532 134.507 56.7601 128.979C50.9905 112.989 46.737 88.4842 55.8815 52.9813C53.7837 55.702 51.7497 58.5377 49.835 61.6799C39.7154 78.2966 31.585 105.885 43.3415 153.249L41.4004 153.731C29.5368 105.935 37.6864 77.783 48.1268 60.6397C51.5386 55.0405 55.3869 50.3122 59.2052 45.6208C60.9753 43.446 62.7389 41.2791 64.4496 39.037C69.8814 31.9181 74.9516 23.8509 78.5023 11.8951Z\"\n                fill=\"white\"\n              >\n                <animate\n                  attributeName=\"d\"\n                  values=\"M78.5023 11.8951C79.7101 7.83089 80.5625 3.84468 81.1439 0L83.1657 0C82.5708 4.0221 81.6867 8.20063 80.4195 12.4645C76.7802 24.7187 71.5704 33.0015 66.0397 40.2502C64.2498 42.596 62.4438 44.8141 60.6532 47.0133C60.1079 47.683 59.5641 48.351 59.0226 49.0203C48.4244 86.5587 52.7705 112.03 58.6414 128.301L58.6414 128.301C60.5983 133.728 63.0063 138.918 65.4168 143.979C65.7175 144.611 66.0184 145.24 66.3184 145.868L66.321 145.874C68.4186 150.263 70.4771 154.571 72.1638 158.817C76.025 168.536 78.0243 178.134 74.1119 188.125C72.6871 191.771 70.4087 194.687 68.2691 197.426C67.7208 198.128 67.1817 198.818 66.6683 199.506C64.1212 202.918 62.0735 206.406 61.9605 211.383L60.9607 211.36L61.9604 211.383C61.7792 219.328 66.2795 225.964 70.0544 230.293L68.5471 231.607C64.6819 227.175 59.7622 220.052 59.961 211.337C60.088 205.744 62.4252 201.847 65.0656 198.309C65.6324 197.55 66.2074 196.813 66.7774 196.082L66.7779 196.081C68.8938 193.368 70.9416 190.743 72.2493 187.396L72.2496 187.395C75.8871 178.106 74.0964 169.099 70.3051 159.555C68.6454 155.378 66.6188 151.136 64.5181 146.74L64.518 146.74C64.217 146.109 63.9144 145.476 63.6112 144.839C61.1989 139.774 58.7532 134.507 56.7601 128.979C50.9905 112.989 46.737 88.4842 55.8815 52.9813C53.7837 55.702 51.7497 58.5377 49.835 61.6799C39.7154 78.2966 31.585 105.885 43.3415 153.249L41.4004 153.731C29.5368 105.935 37.6864 77.783 48.1268 60.6397C51.5386 55.0405 55.3869 50.3122 59.2052 45.6208C60.9753 43.446 62.7389 41.2791 64.4496 39.037C69.8814 31.9181 74.9516 23.8509 78.5023 11.8951Z;M80.5023 11.8951C81.7101 7.83089 82.5625 3.84468 83.1439 0L85.1657 0C84.5708 4.0221 83.6867 8.20063 82.4195 12.4645C78.7802 24.7187 73.5704 33.0015 68.0397 40.2502C66.2498 42.596 64.4438 44.8141 62.6532 47.0133C62.1079 47.683 61.5641 48.351 61.0226 49.0203C50.4244 86.5587 54.7705 112.03 60.6414 128.301L60.6414 128.301C62.5983 133.728 65.0063 138.918 67.4168 143.979C67.7175 144.611 68.0184 145.24 68.3184 145.868L68.321 145.874C70.4186 150.263 72.4771 154.571 74.1638 158.817C78.025 168.536 80.0243 178.134 76.1119 188.125C74.6871 191.771 72.4087 194.687 70.2691 197.426C69.7208 198.128 69.1817 198.818 68.6683 199.506C66.1212 202.918 64.0735 206.406 63.9605 211.383L62.9607 211.36L63.9604 211.383C63.7792 219.328 68.2795 225.964 72.0544 230.293L70.5471 231.607C66.6819 227.175 61.7622 220.052 61.961 211.337C62.088 205.744 64.4252 201.847 67.0656 198.309C67.6324 197.55 68.2074 196.813 68.7774 196.082L68.7779 196.081C70.8938 193.368 72.9416 190.743 74.2493 187.396L74.2496 187.395C77.8871 178.106 76.0964 169.099 72.3051 159.555C70.6454 155.378 68.6188 151.136 66.5181 146.74L66.518 146.74C66.217 146.109 65.9144 145.476 65.6112 144.839C63.1989 139.774 60.7532 134.507 58.7601 128.979C52.9905 112.989 48.737 88.4842 57.8815 52.9813C55.7837 55.702 53.7497 58.5377 51.835 61.6799C41.7154 78.2966 33.585 105.885 45.3415 153.249L43.4004 153.731C31.5368 105.935 39.6864 77.783 50.1268 60.6397C53.5386 55.0405 57.3869 50.3122 61.2052 45.6208C62.9753 43.446 64.7389 41.2791 66.4496 39.037C71.8814 31.9181 76.9516 23.8509 80.5023 11.8951Z;M78.5023 11.8951C79.7101 7.83089 80.5625 3.84468 81.1439 0L83.1657 0C82.5708 4.0221 81.6867 8.20063 80.4195 12.4645C76.7802 24.7187 71.5704 33.0015 66.0397 40.2502C64.2498 42.596 62.4438 44.8141 60.6532 47.0133C60.1079 47.683 59.5641 48.351 59.0226 49.0203C48.4244 86.5587 52.7705 112.03 58.6414 128.301L58.6414 128.301C60.5983 133.728 63.0063 138.918 65.4168 143.979C65.7175 144.611 66.0184 145.24 66.3184 145.868L66.321 145.874C68.4186 150.263 70.4771 154.571 72.1638 158.817C76.025 168.536 78.0243 178.134 74.1119 188.125C72.6871 191.771 70.4087 194.687 68.2691 197.426C67.7208 198.128 67.1817 198.818 66.6683 199.506C64.1212 202.918 62.0735 206.406 61.9605 211.383L60.9607 211.36L61.9604 211.383C61.7792 219.328 66.2795 225.964 70.0544 230.293L68.5471 231.607C64.6819 227.175 59.7622 220.052 59.961 211.337C60.088 205.744 62.4252 201.847 65.0656 198.309C65.6324 197.55 66.2074 196.813 66.7774 196.082L66.7779 196.081C68.8938 193.368 70.9416 190.743 72.2493 187.396L72.2496 187.395C75.8871 178.106 74.0964 169.099 70.3051 159.555C68.6454 155.378 66.6188 151.136 64.5181 146.74L64.518 146.74C64.217 146.109 63.9144 145.476 63.6112 144.839C61.1989 139.774 58.7532 134.507 56.7601 128.979C50.9905 112.989 46.737 88.4842 55.8815 52.9813C53.7837 55.702 51.7497 58.5377 49.835 61.6799C39.7154 78.2966 31.585 105.885 43.3415 153.249L41.4004 153.731C29.5368 105.935 37.6864 77.783 48.1268 60.6397C51.5386 55.0405 55.3869 50.3122 59.2052 45.6208C60.9753 43.446 62.7389 41.2791 64.4496 39.037C69.8814 31.9181 74.9516 23.8509 78.5023 11.8951Z\"\n                  begin=\"0s\"\n                  dur=\"1.6s\"\n                  repeatCount=\"indefinite\"\n                  fill=\"freeze\"\n                  calcMode=\"linear\"\n                  keyTimes=\"0;0.5;1\"\n                />\n              </path>\n              <g id=\"Group_2\">\n                <g id=\"Group_3\">\n                  <g id=\"Group_4\">\n                    <path\n                      id=\"Vector\"\n                      d=\"M67.2034 222.486C79.5753 210.114 79.5752 190.056 67.2034 177.684C54.8316 165.312 34.773 165.312 22.4011 177.684C10.0293 190.056 10.0293 210.114 22.4011 222.486C34.7729 234.858 54.8316 234.858 67.2034 222.486Z\"\n                      fill=\"#DE2D35\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M67.2034 222.486C79.5753 210.114 79.5752 190.056 67.2034 177.684C54.8316 165.312 34.773 165.312 22.4011 177.684C10.0293 190.056 10.0293 210.114 22.4011 222.486C34.7729 234.858 54.8316 234.858 67.2034 222.486Z;M68.3362 223.272C81.1426 211.35 81.8601 191.305 69.9388 178.498C58.0175 165.692 37.9716 164.974 25.1652 176.895C12.3587 188.817 11.6412 208.863 23.5625 221.669C35.4839 234.476 55.5297 235.193 68.3362 223.272Z;M67.2034 222.486C79.5753 210.114 79.5752 190.056 67.2034 177.684C54.8316 165.312 34.773 165.312 22.4011 177.684C10.0293 190.056 10.0293 210.114 22.4011 222.486C34.7729 234.858 54.8316 234.858 67.2034 222.486Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                    <g id=\"Group_5\">\n                      <path\n                        id=\"Vector_2\"\n                        d=\"M24.3608 175.88C16.9908 182.11 12.5508 191.61 13.1708 201.98C13.5608 208.58 15.9508 214.58 19.7108 219.45C15.7208 205.18 17.8308 189.76 24.3608 175.88Z\"\n                        fill=\"#FFE4C7\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M24.3608 175.88C16.9908 182.11 12.5508 191.61 13.1708 201.98C13.5608 208.58 15.9508 214.58 19.7108 219.45C15.7208 205.18 17.8308 189.76 24.3608 175.88Z;M27.1883 175.163C19.6001 181.125 14.8231 190.46 15.0718 200.846C15.2255 207.455 17.3993 213.537 20.9827 218.538C17.5057 204.135 20.1659 188.8 27.1883 175.163Z;M24.3608 175.88C16.9908 182.11 12.5508 191.61 13.1708 201.98C13.5608 208.58 15.9508 214.58 19.7108 219.45C15.7208 205.18 17.8308 189.76 24.3608 175.88Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_3\"\n                        d=\"M51.5907 231.01C52.1507 230.09 52.6707 229.17 53.1507 228.24C62.7307 209.72 57.5107 188.17 51.9507 173.78C51.2207 172.56 50.4907 171.34 49.7707 170.11C46.5807 170.24 43.4007 170.38 40.2107 170.51C37.5607 173.88 29.4107 185.13 29.3507 201.64C29.2907 216.91 36.2007 227.61 38.7707 231.23C40.2907 231.59 42.2307 231.9 44.4707 231.92C47.3707 231.95 49.8107 231.49 51.5807 231.01L51.5907 231.01Z\"\n                        fill=\"#DE2D35\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M51.5907 231.01C52.1507 230.09 52.6707 229.17 53.1507 228.24C62.7307 209.72 57.5107 188.17 51.9507 173.78C51.2207 172.56 50.4907 171.34 49.7707 170.11C46.5807 170.24 43.4007 170.38 40.2107 170.51C37.5607 173.88 29.4107 185.13 29.3507 201.64C29.2907 216.91 36.2007 227.61 38.7707 231.23C40.2907 231.59 42.2307 231.9 44.4707 231.92C47.3707 231.95 49.8107 231.49 51.5807 231.01L51.5907 231.01Z;M52.4288 231.232C53.0213 230.332 53.5739 229.432 54.0869 228.519C64.3232 210.354 59.8774 188.631 54.8357 174.051C54.1499 172.806 53.464 171.561 52.7884 170.306C49.5958 170.321 46.4128 170.348 43.2202 170.363C40.4514 173.636 31.9042 184.588 31.2536 201.085C30.6474 216.343 37.1702 227.283 39.6091 230.993C41.1153 231.407 43.0429 231.786 45.2808 231.887C48.1778 232.02 50.6327 231.648 52.4188 231.231L52.4288 231.232Z;M51.5907 231.01C52.1507 230.09 52.6707 229.17 53.1507 228.24C62.7307 209.72 57.5107 188.17 51.9507 173.78C51.2207 172.56 50.4907 171.34 49.7707 170.11C46.5807 170.24 43.4007 170.38 40.2107 170.51C37.5607 173.88 29.4107 185.13 29.3507 201.64C29.2907 216.91 36.2007 227.61 38.7707 231.23C40.2907 231.59 42.2307 231.9 44.4707 231.92C47.3707 231.95 49.8107 231.49 51.5807 231.01L51.5907 231.01Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_4\"\n                        d=\"M65.9407 176.5C71.3607 191.37 71.5907 207.28 67.3007 222.38C73.4107 216.2 76.9807 207.55 76.4207 198.2C75.9007 189.52 71.9407 181.88 65.9407 176.5Z\"\n                        fill=\"#FFE4C7\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M65.9407 176.5C71.3607 191.37 71.5907 207.28 67.3007 222.38C73.4107 216.2 76.9807 207.55 76.4207 198.2C75.9007 189.52 71.9407 181.88 65.9407 176.5Z;M68.7195 177.27C73.6041 192.324 73.2648 208.232 68.4374 223.169C74.7646 217.211 78.6417 208.695 78.4165 199.331C78.2074 190.637 74.5232 182.861 68.7195 177.27Z;M65.9407 176.5C71.3607 191.37 71.5907 207.28 67.3007 222.38C73.4107 216.2 76.9807 207.55 76.4207 198.2C75.9007 189.52 71.9407 181.88 65.9407 176.5Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                    </g>\n                    <g id=\"Group_6\">\n                      <path\n                        id=\"Vector_5\"\n                        d=\"M38.243 159.225L47.7062 158.659C50.8605 158.471 53.5687 160.873 53.7572 164.028L54.0966 169.708L33.2239 170.955L32.8844 165.275C32.6959 162.121 35.0987 159.413 38.253 159.224L38.243 159.225Z\"\n                        fill=\"#F8B000\"\n                        stroke=\"#F8B000\"\n                        stroke-width=\"0.7\"\n                        stroke-miterlimit=\"10\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M38.243 159.225L47.7062 158.659C50.8605 158.471 53.5687 160.873 53.7572 164.028L54.0966 169.708L33.2239 170.955L32.8844 165.275C32.6959 162.121 35.0987 159.413 38.253 159.224L38.243 159.225Z;M41.6573 159.015L51.1346 158.789C54.2937 158.713 56.9142 161.211 56.9898 164.37L57.1258 170.059L36.2218 170.559L36.0857 164.87C36.0102 161.711 38.5082 159.091 41.6673 159.015L41.6573 159.015Z;M38.243 159.225L47.7062 158.659C50.8605 158.471 53.5687 160.873 53.7572 164.028L54.0966 169.708L33.2239 170.955L32.8844 165.275C32.6959 162.121 35.0987 159.413 38.253 159.224L38.243 159.225Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_6\"\n                        d=\"M40.6808 160.09C40.1808 158.87 39.5808 157.5 40.0108 156.18C39.9408 156.39 40.0608 156.08 40.1008 156.03C40.1308 155.98 40.2608 155.8 40.1508 155.94C40.2308 155.84 40.3208 155.74 40.4208 155.65C40.4608 155.61 40.7008 155.4 40.6008 155.48C40.8008 155.33 41.0108 155.19 41.2308 155.07C41.3408 155.01 41.4608 154.95 41.5708 154.9C41.7508 154.82 41.6408 154.86 41.8308 154.79C42.0708 154.71 42.3108 154.63 42.5608 154.58C42.6808 154.55 42.8008 154.53 42.9308 154.51C42.7608 154.54 43.0908 154.5 43.1608 154.5C43.2708 154.5 43.3908 154.5 43.5008 154.5C43.5908 154.5 43.8308 154.55 43.6308 154.5C43.9808 154.58 44.0008 154.58 44.2508 154.72C44.2708 154.73 44.4408 154.86 44.3508 154.79C44.2708 154.73 44.4008 154.84 44.4008 154.84C44.4908 154.92 44.5708 155.01 44.6508 155.1C44.7608 155.23 44.5808 154.99 44.6708 155.14C44.7008 155.18 44.7308 155.23 44.7608 155.27C44.8408 155.39 44.9108 155.52 44.9708 155.65C45.1108 155.92 45.1108 155.94 45.2208 156.23C45.3308 156.52 45.4308 156.83 45.5308 157.12C45.9808 158.51 45.8708 159.99 45.2908 161.33C45.0708 161.85 45.1308 162.46 45.6708 162.77C46.1108 163.03 46.8808 162.92 47.1108 162.39C47.8308 160.72 48.1508 158.89 47.7108 157.09C47.5308 156.34 47.2408 155.59 46.9308 154.89C46.6708 154.3 46.3108 153.72 45.8208 153.29C44.6808 152.31 43.1608 152.24 41.7608 152.62C40.4408 152.98 39.1108 153.73 38.3408 154.89C37.1908 156.64 37.9408 158.9 38.6608 160.65C38.8808 161.18 39.3608 161.55 39.9508 161.38C40.4508 161.24 40.9008 160.62 40.6808 160.09Z\"\n                        fill=\"#F8B000\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M40.6808 160.09C40.1808 158.87 39.5808 157.5 40.0108 156.18C39.9408 156.39 40.0608 156.08 40.1008 156.03C40.1308 155.98 40.2608 155.8 40.1508 155.94C40.2308 155.84 40.3208 155.74 40.4208 155.65C40.4608 155.61 40.7008 155.4 40.6008 155.48C40.8008 155.33 41.0108 155.19 41.2308 155.07C41.3408 155.01 41.4608 154.95 41.5708 154.9C41.7508 154.82 41.6408 154.86 41.8308 154.79C42.0708 154.71 42.3108 154.63 42.5608 154.58C42.6808 154.55 42.8008 154.53 42.9308 154.51C42.7608 154.54 43.0908 154.5 43.1608 154.5C43.2708 154.5 43.3908 154.5 43.5008 154.5C43.5908 154.5 43.8308 154.55 43.6308 154.5C43.9808 154.58 44.0008 154.58 44.2508 154.72C44.2708 154.73 44.4408 154.86 44.3508 154.79C44.2708 154.73 44.4008 154.84 44.4008 154.84C44.4908 154.92 44.5708 155.01 44.6508 155.1C44.7608 155.23 44.5808 154.99 44.6708 155.14C44.7008 155.18 44.7308 155.23 44.7608 155.27C44.8408 155.39 44.9108 155.52 44.9708 155.65C45.1108 155.92 45.1108 155.94 45.2208 156.23C45.3308 156.52 45.4308 156.83 45.5308 157.12C45.9808 158.51 45.8708 159.99 45.2908 161.33C45.0708 161.85 45.1308 162.46 45.6708 162.77C46.1108 163.03 46.8808 162.92 47.1108 162.39C47.8308 160.72 48.1508 158.89 47.7108 157.09C47.5308 156.34 47.2408 155.59 46.9308 154.89C46.6708 154.3 46.3108 153.72 45.8208 153.29C44.6808 152.31 43.1608 152.24 41.7608 152.62C40.4408 152.98 39.1108 153.73 38.3408 154.89C37.1908 156.64 37.9408 158.9 38.6608 160.65C38.8808 161.18 39.3608 161.55 39.9508 161.38C40.4508 161.24 40.9008 160.62 40.6808 160.09Z;M44.0625 159.967C43.6065 158.73 43.0559 157.339 43.5328 156.035C43.4553 156.243 43.5863 155.937 43.6281 155.889C43.6599 155.84 43.7962 155.664 43.6813 155.8C43.7648 155.703 43.8583 155.607 43.9615 155.52C44.0029 155.482 44.2503 155.28 44.1475 155.357C44.3527 155.214 44.5676 155.082 44.7917 154.97C44.9038 154.914 45.0259 154.858 45.1376 154.812C45.3203 154.738 45.209 154.774 45.4014 154.711C45.6441 154.64 45.8868 154.568 46.1384 154.527C46.2594 154.502 46.38 154.486 46.5107 154.471C46.3397 154.495 46.6709 154.466 46.7409 154.469C46.8508 154.473 46.9707 154.477 47.0807 154.481C47.1706 154.484 47.4087 154.543 47.2106 154.486C47.5575 154.578 47.5775 154.579 47.8223 154.728C47.8419 154.739 48.0072 154.874 47.9197 154.801C47.8419 154.738 47.9679 154.853 47.9679 154.853C48.055 154.936 48.1317 155.029 48.2085 155.122C48.3137 155.256 48.1424 155.009 48.227 155.163C48.2556 155.204 48.2838 155.255 48.3123 155.296C48.388 155.418 48.4533 155.551 48.5086 155.683C48.6388 155.958 48.6381 155.978 48.7377 156.272C48.8372 156.565 48.9261 156.879 49.0156 157.172C49.4156 158.577 49.2528 160.052 48.6252 161.371C48.3867 161.883 48.4249 162.494 48.9534 162.823C49.3839 163.099 50.1573 163.017 50.4061 162.495C51.1854 160.852 51.5706 159.035 51.1953 157.22C51.0423 156.464 50.7793 155.704 50.4945 154.994C50.2558 154.395 49.9168 153.802 49.4425 153.355C48.3382 152.335 46.8217 152.21 45.409 152.54C44.077 152.853 42.721 153.555 41.91 154.686C40.6981 156.394 41.3668 158.679 42.0238 160.454C42.2247 160.992 42.6911 161.378 43.2868 161.23C43.7915 161.108 44.2634 160.504 44.0625 159.967Z;M40.6808 160.09C40.1808 158.87 39.5808 157.5 40.0108 156.18C39.9408 156.39 40.0608 156.08 40.1008 156.03C40.1308 155.98 40.2608 155.8 40.1508 155.94C40.2308 155.84 40.3208 155.74 40.4208 155.65C40.4608 155.61 40.7008 155.4 40.6008 155.48C40.8008 155.33 41.0108 155.19 41.2308 155.07C41.3408 155.01 41.4608 154.95 41.5708 154.9C41.7508 154.82 41.6408 154.86 41.8308 154.79C42.0708 154.71 42.3108 154.63 42.5608 154.58C42.6808 154.55 42.8008 154.53 42.9308 154.51C42.7608 154.54 43.0908 154.5 43.1608 154.5C43.2708 154.5 43.3908 154.5 43.5008 154.5C43.5908 154.5 43.8308 154.55 43.6308 154.5C43.9808 154.58 44.0008 154.58 44.2508 154.72C44.2708 154.73 44.4408 154.86 44.3508 154.79C44.2708 154.73 44.4008 154.84 44.4008 154.84C44.4908 154.92 44.5708 155.01 44.6508 155.1C44.7608 155.23 44.5808 154.99 44.6708 155.14C44.7008 155.18 44.7308 155.23 44.7608 155.27C44.8408 155.39 44.9108 155.52 44.9708 155.65C45.1108 155.92 45.1108 155.94 45.2208 156.23C45.3308 156.52 45.4308 156.83 45.5308 157.12C45.9808 158.51 45.8708 159.99 45.2908 161.33C45.0708 161.85 45.1308 162.46 45.6708 162.77C46.1108 163.03 46.8808 162.92 47.1108 162.39C47.8308 160.72 48.1508 158.89 47.7108 157.09C47.5308 156.34 47.2408 155.59 46.9308 154.89C46.6708 154.3 46.3108 153.72 45.8208 153.29C44.6808 152.31 43.1608 152.24 41.7608 152.62C40.4408 152.98 39.1108 153.73 38.3408 154.89C37.1908 156.64 37.9408 158.9 38.6608 160.65C38.8808 161.18 39.3608 161.55 39.9508 161.38C40.4508 161.24 40.9008 160.62 40.6808 160.09Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                    </g>\n                  </g>\n                  <g id=\"Group_7\" style=\"mix-blend-mode: multiply\" opacity=\"0.48\">\n                    <path\n                      id=\"Vector_7\"\n                      d=\"M71.7308 210.69C62.4008 218.91 49.5108 220.66 38.2608 215.58C27.4008 210.67 20.6108 199.92 20.6808 188.02C20.7008 184.47 21.2908 181.03 22.3408 177.76C16.2008 183.94 12.6208 192.6 13.1808 201.98C14.2208 219.45 29.2308 232.76 46.7008 231.72C61.5208 230.83 73.3408 219.9 75.9508 205.94C74.7808 207.64 73.3908 209.24 71.7408 210.69L71.7308 210.69Z\"\n                      fill=\"#DE2D35\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M71.7308 210.69C62.4008 218.91 49.5108 220.66 38.2608 215.58C27.4008 210.67 20.6108 199.92 20.6808 188.02C20.7008 184.47 21.2908 181.03 22.3408 177.76C16.2008 183.94 12.6208 192.6 13.1808 201.98C14.2208 219.45 29.2308 232.76 46.7008 231.72C61.5208 230.83 73.3408 219.9 75.9508 205.94C74.7808 207.64 73.3908 209.24 71.7408 210.69L71.7308 210.69Z;M73.2827 211.645C63.6646 219.526 50.7203 220.814 39.6592 215.335C28.9818 210.039 22.5807 199.053 23.0763 187.163C23.2233 183.616 23.936 180.2 25.1023 176.969C18.7451 182.926 14.8577 191.452 15.0818 200.846C15.4962 218.342 30.0204 232.181 47.5165 231.766C62.3588 231.407 74.5622 220.907 77.6699 207.049C76.4399 208.706 74.9935 210.255 73.2927 211.645L73.2827 211.645Z;M71.7308 210.69C62.4008 218.91 49.5108 220.66 38.2608 215.58C27.4008 210.67 20.6108 199.92 20.6808 188.02C20.7008 184.47 21.2908 181.03 22.3408 177.76C16.2008 183.94 12.6208 192.6 13.1808 201.98C14.2208 219.45 29.2308 232.76 46.7008 231.72C61.5208 230.83 73.3408 219.9 75.9508 205.94C74.7808 207.64 73.3908 209.24 71.7408 210.69L71.7308 210.69Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                  </g>\n                </g>\n                <g id=\"Group 74\">\n                  <rect\n                    id=\"Rectangle 21\"\n                    x=\"35\"\n                    y=\"189.256\"\n                    width=\"6.66667\"\n                    height=\"24.4444\"\n                    rx=\"3.33333\"\n                    fill=\"#FFE4C7\"\n                  >\n                    <animate\n                      attributeName=\"x\"\n                      values=\"35;37.342;35\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                    <animate\n                      attributeName=\"y\"\n                      values=\"189.256;188.911;189.256\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                    <animateTransform\n                      attributeName=\"transform\"\n                      type=\"rotate\"\n                      values=\"0 35 189.256;2.05 37.342 188.911;0 35 189.256\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                  </rect>\n                  <rect id=\"Rectangle 22\" x=\"48\" y=\"189\" width=\"6.66667\" height=\"24.4444\" rx=\"3.33333\" fill=\"#FFE4C7\">\n                    <animate\n                      attributeName=\"x\"\n                      values=\"48;50.3428;48\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                    <animate\n                      attributeName=\"y\"\n                      values=\"189;189.12;189\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                    <animateTransform\n                      attributeName=\"transform\"\n                      type=\"rotate\"\n                      values=\"0 48 189;2.05 50.3428 189.12;0 48 189\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                  </rect>\n                </g>\n              </g>\n              <g id=\"Group_8\">\n                <g id=\"Group_9\">\n                  <g id=\"Group_10\">\n                    <g id=\"Group_11\">\n                      <path\n                        id=\"Vector_8\"\n                        d=\"M67.7287 258.222C74.6214 258.154 80.1535 252.511 80.0849 245.618C80.0163 238.725 74.3731 233.193 67.4804 233.262C60.5877 233.33 55.0556 238.973 55.1242 245.866C55.1927 252.759 60.836 258.291 67.7287 258.222Z\"\n                        fill=\"#2EBF8F\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M67.7287 258.222C74.6214 258.154 80.1535 252.511 80.0849 245.618C80.0163 238.725 74.3731 233.193 67.4804 233.262C60.5877 233.33 55.0556 238.973 55.1242 245.866C55.1927 252.759 60.836 258.291 67.7287 258.222Z;M69.7287 258.222C76.6214 258.154 82.1535 252.511 82.0849 245.618C82.0163 238.725 76.3731 233.193 69.4804 233.262C62.5877 233.33 57.0556 238.973 57.1242 245.866C57.1927 252.759 62.836 258.291 69.7287 258.222Z;M67.7287 258.222C74.6214 258.154 80.1535 252.511 80.0849 245.618C80.0163 238.725 74.3731 233.193 67.4804 233.262C60.5877 233.33 55.0556 238.973 55.1242 245.866C55.1927 252.759 60.836 258.291 67.7287 258.222Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <g id=\"Group_12\">\n                        <path\n                          id=\"Vector_9\"\n                          d=\"M61.6409 236.872C62.878 236.668 64.1464 236.407 65.4045 236.616C67.9675 237.044 68.9854 238.73 70.0189 240.881C70.7706 242.437 71.6371 242.781 73.1822 242.097C74.2889 241.601 75.2807 241.1 76.4813 240.85C77.3217 240.677 78.1673 240.604 78.9973 240.641C77.3269 236.914 73.8608 234.085 69.5283 233.406C65.394 232.764 61.4216 234.231 58.6968 237.002C59.5737 237.363 60.7743 237.013 61.6409 236.872Z\"\n                          fill=\"#FFE4C7\"\n                        >\n                          <animate\n                            attributeName=\"d\"\n                            values=\"M61.6409 236.872C62.878 236.668 64.1464 236.407 65.4045 236.616C67.9675 237.044 68.9854 238.73 70.0189 240.881C70.7706 242.437 71.6371 242.781 73.1822 242.097C74.2889 241.601 75.2807 241.1 76.4813 240.85C77.3217 240.677 78.1673 240.604 78.9973 240.641C77.3269 236.914 73.8608 234.085 69.5283 233.406C65.394 232.764 61.4216 234.231 58.6968 237.002C59.5737 237.363 60.7743 237.013 61.6409 236.872Z;M63.6409 236.872C64.878 236.668 66.1464 236.407 67.4045 236.616C69.9675 237.044 70.9854 238.73 72.0189 240.881C72.7706 242.437 73.6371 242.781 75.1822 242.097C76.2889 241.601 77.2807 241.1 78.4813 240.85C79.3217 240.677 80.1673 240.604 80.9973 240.641C79.3269 236.914 75.8608 234.085 71.5283 233.406C67.394 232.764 63.4216 234.231 60.6968 237.002C61.5737 237.363 62.7743 237.013 63.6409 236.872Z;M61.6409 236.872C62.878 236.668 64.1464 236.407 65.4045 236.616C67.9675 237.044 68.9854 238.73 70.0189 240.881C70.7706 242.437 71.6371 242.781 73.1822 242.097C74.2889 241.601 75.2807 241.1 76.4813 240.85C77.3217 240.677 78.1673 240.604 78.9973 240.641C77.3269 236.914 73.8608 234.085 69.5283 233.406C65.394 232.764 61.4216 234.231 58.6968 237.002C59.5737 237.363 60.7743 237.013 61.6409 236.872Z\"\n                            begin=\"0s\"\n                            dur=\"1.6s\"\n                            repeatCount=\"indefinite\"\n                            fill=\"freeze\"\n                            calcMode=\"linear\"\n                            keyTimes=\"0;0.5;1\"\n                          />\n                        </path>\n                        <path\n                          id=\"Vector_10\"\n                          d=\"M73.9286 245.85C71.3709 246.847 68.8183 245.981 67.2836 243.679C66.7198 242.833 66.5267 241.471 65.7959 240.771C65.0077 240.02 63.7862 240.301 62.8362 240.448C60.6072 240.782 58.4201 241.225 56.4887 240.056C55.8988 241.205 55.4812 242.468 55.2724 243.815C55.1419 244.655 55.1001 245.49 55.1367 246.304C55.8309 246.263 56.567 246.017 57.1307 245.876C58.5401 245.516 59.9652 245.041 61.4268 244.921C64.3656 244.676 66.2031 246.524 67.7377 248.768C68.4268 249.776 69.1315 250.83 70.4574 250.856C71.7154 250.877 72.9995 250.439 74.2262 250.214C75.9853 249.891 77.6714 249.927 79.0912 250.648C79.4932 249.713 79.7855 248.711 79.9473 247.656C80.1091 246.602 80.1352 245.563 80.0413 244.551C78.0316 243.914 75.9331 245.073 73.9391 245.85L73.9286 245.85Z\"\n                          fill=\"#FFE4C7\"\n                        >\n                          <animate\n                            attributeName=\"d\"\n                            values=\"M73.9286 245.85C71.3709 246.847 68.8183 245.981 67.2836 243.679C66.7198 242.833 66.5267 241.471 65.7959 240.771C65.0077 240.02 63.7862 240.301 62.8362 240.448C60.6072 240.782 58.4201 241.225 56.4887 240.056C55.8988 241.205 55.4812 242.468 55.2724 243.815C55.1419 244.655 55.1001 245.49 55.1367 246.304C55.8309 246.263 56.567 246.017 57.1307 245.876C58.5401 245.516 59.9652 245.041 61.4268 244.921C64.3656 244.676 66.2031 246.524 67.7377 248.768C68.4268 249.776 69.1315 250.83 70.4574 250.856C71.7154 250.877 72.9995 250.439 74.2262 250.214C75.9853 249.891 77.6714 249.927 79.0912 250.648C79.4932 249.713 79.7855 248.711 79.9473 247.656C80.1091 246.602 80.1352 245.563 80.0413 244.551C78.0316 243.914 75.9331 245.073 73.9391 245.85L73.9286 245.85Z;M75.9286 245.85C73.3709 246.847 70.8183 245.981 69.2836 243.679C68.7198 242.833 68.5267 241.471 67.7959 240.771C67.0077 240.02 65.7862 240.301 64.8362 240.448C62.6072 240.782 60.4201 241.225 58.4887 240.056C57.8988 241.205 57.4812 242.468 57.2724 243.815C57.1419 244.655 57.1001 245.49 57.1367 246.304C57.8309 246.263 58.567 246.017 59.1307 245.876C60.5401 245.516 61.9652 245.041 63.4268 244.921C66.3656 244.676 68.2031 246.524 69.7377 248.768C70.4268 249.776 71.1315 250.83 72.4574 250.856C73.7154 250.877 74.9995 250.439 76.2262 250.214C77.9853 249.891 79.6714 249.927 81.0912 250.648C81.4932 249.713 81.7855 248.711 81.9473 247.656C82.1091 246.602 82.1352 245.563 82.0413 244.551C80.0316 243.914 77.9331 245.073 75.9391 245.85L75.9286 245.85Z;M73.9286 245.85C71.3709 246.847 68.8183 245.981 67.2836 243.679C66.7198 242.833 66.5267 241.471 65.7959 240.771C65.0077 240.02 63.7862 240.301 62.8362 240.448C60.6072 240.782 58.4201 241.225 56.4887 240.056C55.8988 241.205 55.4812 242.468 55.2724 243.815C55.1419 244.655 55.1001 245.49 55.1367 246.304C55.8309 246.263 56.567 246.017 57.1307 245.876C58.5401 245.516 59.9652 245.041 61.4268 244.921C64.3656 244.676 66.2031 246.524 67.7377 248.768C68.4268 249.776 69.1315 250.83 70.4574 250.856C71.7154 250.877 72.9995 250.439 74.2262 250.214C75.9853 249.891 77.6714 249.927 79.0912 250.648C79.4932 249.713 79.7855 248.711 79.9473 247.656C80.1091 246.602 80.1352 245.563 80.0413 244.551C78.0316 243.914 75.9331 245.073 73.9391 245.85L73.9286 245.85Z\"\n                            begin=\"0s\"\n                            dur=\"1.6s\"\n                            repeatCount=\"indefinite\"\n                            fill=\"freeze\"\n                            calcMode=\"linear\"\n                            keyTimes=\"0;0.5;1\"\n                          />\n                        </path>\n                        <path\n                          id=\"Vector_11\"\n                          d=\"M68.8549 256.139C69.7736 256.426 70.2434 257.178 70.2747 257.935C72.9369 257.35 75.3277 255.909 77.0816 253.863C75.4008 253.216 72.6342 254.469 71.0682 254.589C68.3381 254.792 66.3702 253.378 64.8512 251.217C64.1882 250.272 63.5462 248.862 62.2777 248.653C61.1032 248.46 59.6834 249.087 58.5715 249.379C57.6946 249.609 56.7706 249.833 55.8467 249.943C56.1703 250.846 56.6036 251.702 57.1204 252.501C61.6043 250.862 64.8146 254.865 68.8549 256.139Z\"\n                          fill=\"#FFE4C7\"\n                        >\n                          <animate\n                            attributeName=\"d\"\n                            values=\"M68.8549 256.139C69.7736 256.426 70.2434 257.178 70.2747 257.935C72.9369 257.35 75.3277 255.909 77.0816 253.863C75.4008 253.216 72.6342 254.469 71.0682 254.589C68.3381 254.792 66.3702 253.378 64.8512 251.217C64.1882 250.272 63.5462 248.862 62.2777 248.653C61.1032 248.46 59.6834 249.087 58.5715 249.379C57.6946 249.609 56.7706 249.833 55.8467 249.943C56.1703 250.846 56.6036 251.702 57.1204 252.501C61.6043 250.862 64.8146 254.865 68.8549 256.139Z;M70.8549 256.139C71.7736 256.426 72.2434 257.178 72.2747 257.935C74.9369 257.35 77.3277 255.909 79.0816 253.863C77.4008 253.216 74.6342 254.469 73.0682 254.589C70.3381 254.792 68.3702 253.378 66.8512 251.217C66.1882 250.272 65.5462 248.862 64.2777 248.653C63.1032 248.46 61.6834 249.087 60.5715 249.379C59.6946 249.609 58.7706 249.833 57.8467 249.943C58.1703 250.846 58.6036 251.702 59.1204 252.501C63.6043 250.862 66.8146 254.865 70.8549 256.139Z;M68.8549 256.139C69.7736 256.426 70.2434 257.178 70.2747 257.935C72.9369 257.35 75.3277 255.909 77.0816 253.863C75.4008 253.216 72.6342 254.469 71.0682 254.589C68.3381 254.792 66.3702 253.378 64.8512 251.217C64.1882 250.272 63.5462 248.862 62.2777 248.653C61.1032 248.46 59.6834 249.087 58.5715 249.379C57.6946 249.609 56.7706 249.833 55.8467 249.943C56.1703 250.846 56.6036 251.702 57.1204 252.501C61.6043 250.862 64.8146 254.865 68.8549 256.139Z\"\n                            begin=\"0s\"\n                            dur=\"1.6s\"\n                            repeatCount=\"indefinite\"\n                            fill=\"freeze\"\n                            calcMode=\"linear\"\n                            keyTimes=\"0;0.5;1\"\n                          />\n                        </path>\n                      </g>\n                    </g>\n                    <g id=\"Group_13\">\n                      <path\n                        id=\"Vector_12\"\n                        d=\"M68.5031 229.457L72.1909 230.031C73.4185 230.222 74.259 231.373 74.0678 232.6L73.7233 234.813L65.5842 233.546L65.9288 231.333C66.1199 230.105 67.2704 229.265 68.4979 229.456L68.5031 229.457Z\"\n                        fill=\"#F8B000\"\n                        stroke=\"#F8B000\"\n                        stroke-width=\"0.83\"\n                        stroke-miterlimit=\"10\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M68.5031 229.457L72.1909 230.031C73.4185 230.222 74.259 231.373 74.0678 232.6L73.7233 234.813L65.5842 233.546L65.9288 231.333C66.1199 230.105 67.2704 229.265 68.4979 229.456L68.5031 229.457Z;M70.5031 229.457L74.1909 230.031C75.4185 230.222 76.259 231.373 76.0678 232.6L75.7233 234.813L67.5842 233.546L67.9288 231.333C68.1199 230.105 69.2704 229.265 70.4979 229.456L70.5031 229.457Z;M68.5031 229.457L72.1909 230.031C73.4185 230.222 74.259 231.373 74.0678 232.6L73.7233 234.813L65.5842 233.546L65.9288 231.333C66.1199 230.105 67.2704 229.265 68.4979 229.456L68.5031 229.457Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                      <path\n                        id=\"Vector_13\"\n                        d=\"M69.5803 229.846C69.5699 229.783 69.5594 229.715 69.549 229.653C69.5438 229.606 69.5177 229.444 69.5333 229.574C69.5177 229.433 69.502 229.298 69.502 229.157C69.502 229.094 69.502 229.026 69.502 228.964C69.502 228.937 69.502 228.911 69.5072 228.88C69.5124 228.786 69.4811 228.984 69.5072 228.89C69.5281 228.833 69.5385 228.77 69.5542 228.708C69.5542 228.697 69.5855 228.614 69.5542 228.687C69.5229 228.77 69.5803 228.635 69.5907 228.619C69.6012 228.598 69.6168 228.577 69.6273 228.556C69.6586 228.488 69.5333 228.656 69.5907 228.603C69.6221 228.572 69.6534 228.541 69.6795 228.509C69.7578 228.431 69.5751 228.577 69.669 228.515C69.716 228.489 69.7578 228.457 69.8048 228.431C69.8309 228.415 69.857 228.405 69.8778 228.395C69.9666 228.348 69.8413 228.41 69.8413 228.41C69.8413 228.395 69.9457 228.374 69.9614 228.368C70.0658 228.332 70.1754 228.311 70.285 228.29C70.4468 228.259 70.191 228.29 70.3111 228.29C70.3633 228.29 70.4155 228.28 70.4625 228.28C70.5564 228.28 70.6922 228.311 70.7809 228.295C70.7652 228.295 70.6243 228.264 70.7287 228.295C70.7496 228.295 70.7652 228.306 70.7861 228.306C70.8279 228.316 70.8696 228.332 70.9114 228.342C70.974 228.342 70.9427 228.353 70.9114 228.342C70.8279 228.337 70.901 228.342 70.9375 228.358C70.9584 228.368 70.9793 228.384 70.9949 228.395C71.0993 228.457 70.9584 228.337 70.9845 228.389C70.9897 228.405 71.021 228.426 71.0315 228.436C71.1254 228.52 71.0001 228.405 71.0106 228.405C71.021 228.405 71.0837 228.525 71.0889 228.53C71.162 228.656 71.068 228.447 71.0993 228.551C71.115 228.609 71.1359 228.666 71.1515 228.723C71.1724 228.812 71.1672 228.969 71.2142 229.047C71.2142 229.047 71.1985 228.917 71.2089 228.995C71.2089 229.021 71.2142 229.042 71.2194 229.068C71.2246 229.131 71.235 229.198 71.2403 229.266C71.2559 229.428 71.2507 229.585 71.2455 229.752C71.2455 229.825 71.2455 229.736 71.2507 229.726C71.2455 229.773 71.235 229.82 71.2246 229.867C71.2089 229.945 71.1881 230.018 71.1672 230.091C71.1463 230.164 71.115 230.237 71.0889 230.31C71.0628 230.383 71.0889 230.3 71.0993 230.289C71.0784 230.331 71.0576 230.378 71.0367 230.42C70.9584 230.566 70.8749 230.707 70.7757 230.843C70.5773 231.119 70.7183 231.574 71.0106 231.73C71.3447 231.908 71.684 231.793 71.898 231.495C72.3312 230.89 72.6027 230.117 72.5453 229.371C72.4983 228.729 72.4148 228.034 71.9658 227.538C71.5482 227.084 70.8696 226.949 70.2746 227.016C69.6795 227.084 69.027 227.272 68.6459 227.758C68.0769 228.473 68.1761 229.381 68.3223 230.222C68.3797 230.556 68.8077 230.775 69.1209 230.676C69.4811 230.561 69.6377 230.237 69.5751 229.877L69.5803 229.846Z\"\n                        fill=\"#F8B000\"\n                      >\n                        <animate\n                          attributeName=\"d\"\n                          values=\"M69.5803 229.846C69.5699 229.783 69.5594 229.715 69.549 229.653C69.5438 229.606 69.5177 229.444 69.5333 229.574C69.5177 229.433 69.502 229.298 69.502 229.157C69.502 229.094 69.502 229.026 69.502 228.964C69.502 228.937 69.502 228.911 69.5072 228.88C69.5124 228.786 69.4811 228.984 69.5072 228.89C69.5281 228.833 69.5385 228.77 69.5542 228.708C69.5542 228.697 69.5855 228.614 69.5542 228.687C69.5229 228.77 69.5803 228.635 69.5907 228.619C69.6012 228.598 69.6168 228.577 69.6273 228.556C69.6586 228.488 69.5333 228.656 69.5907 228.603C69.6221 228.572 69.6534 228.541 69.6795 228.509C69.7578 228.431 69.5751 228.577 69.669 228.515C69.716 228.489 69.7578 228.457 69.8048 228.431C69.8309 228.415 69.857 228.405 69.8778 228.395C69.9666 228.348 69.8413 228.41 69.8413 228.41C69.8413 228.395 69.9457 228.374 69.9614 228.368C70.0658 228.332 70.1754 228.311 70.285 228.29C70.4468 228.259 70.191 228.29 70.3111 228.29C70.3633 228.29 70.4155 228.28 70.4625 228.28C70.5564 228.28 70.6922 228.311 70.7809 228.295C70.7652 228.295 70.6243 228.264 70.7287 228.295C70.7496 228.295 70.7652 228.306 70.7861 228.306C70.8279 228.316 70.8696 228.332 70.9114 228.342C70.974 228.342 70.9427 228.353 70.9114 228.342C70.8279 228.337 70.901 228.342 70.9375 228.358C70.9584 228.368 70.9793 228.384 70.9949 228.395C71.0993 228.457 70.9584 228.337 70.9845 228.389C70.9897 228.405 71.021 228.426 71.0315 228.436C71.1254 228.52 71.0001 228.405 71.0106 228.405C71.021 228.405 71.0837 228.525 71.0889 228.53C71.162 228.656 71.068 228.447 71.0993 228.551C71.115 228.609 71.1359 228.666 71.1515 228.723C71.1724 228.812 71.1672 228.969 71.2142 229.047C71.2142 229.047 71.1985 228.917 71.2089 228.995C71.2089 229.021 71.2142 229.042 71.2194 229.068C71.2246 229.131 71.235 229.198 71.2403 229.266C71.2559 229.428 71.2507 229.585 71.2455 229.752C71.2455 229.825 71.2455 229.736 71.2507 229.726C71.2455 229.773 71.235 229.82 71.2246 229.867C71.2089 229.945 71.1881 230.018 71.1672 230.091C71.1463 230.164 71.115 230.237 71.0889 230.31C71.0628 230.383 71.0889 230.3 71.0993 230.289C71.0784 230.331 71.0576 230.378 71.0367 230.42C70.9584 230.566 70.8749 230.707 70.7757 230.843C70.5773 231.119 70.7183 231.574 71.0106 231.73C71.3447 231.908 71.684 231.793 71.898 231.495C72.3312 230.89 72.6027 230.117 72.5453 229.371C72.4983 228.729 72.4148 228.034 71.9658 227.538C71.5482 227.084 70.8696 226.949 70.2746 227.016C69.6795 227.084 69.027 227.272 68.6459 227.758C68.0769 228.473 68.1761 229.381 68.3223 230.222C68.3797 230.556 68.8077 230.775 69.1209 230.676C69.4811 230.561 69.6377 230.237 69.5751 229.877L69.5803 229.846Z;M71.5803 229.846C71.5699 229.783 71.5594 229.715 71.549 229.653C71.5438 229.606 71.5177 229.444 71.5333 229.574C71.5177 229.433 71.502 229.298 71.502 229.157C71.502 229.094 71.502 229.026 71.502 228.964C71.502 228.937 71.502 228.911 71.5072 228.88C71.5124 228.786 71.4811 228.984 71.5072 228.89C71.5281 228.833 71.5385 228.77 71.5542 228.708C71.5542 228.697 71.5855 228.614 71.5542 228.687C71.5229 228.77 71.5803 228.635 71.5907 228.619C71.6012 228.598 71.6168 228.577 71.6273 228.556C71.6586 228.488 71.5333 228.656 71.5907 228.603C71.6221 228.572 71.6534 228.541 71.6795 228.509C71.7578 228.431 71.5751 228.577 71.669 228.515C71.716 228.489 71.7578 228.457 71.8048 228.431C71.8309 228.415 71.857 228.405 71.8778 228.395C71.9666 228.348 71.8413 228.41 71.8413 228.41C71.8413 228.395 71.9457 228.374 71.9614 228.368C72.0658 228.332 72.1754 228.311 72.285 228.29C72.4468 228.259 72.191 228.29 72.3111 228.29C72.3633 228.29 72.4155 228.28 72.4625 228.28C72.5564 228.28 72.6922 228.311 72.7809 228.295C72.7652 228.295 72.6243 228.264 72.7287 228.295C72.7496 228.295 72.7652 228.306 72.7861 228.306C72.8279 228.316 72.8696 228.332 72.9114 228.342C72.974 228.342 72.9427 228.353 72.9114 228.342C72.8279 228.337 72.901 228.342 72.9375 228.358C72.9584 228.368 72.9793 228.384 72.9949 228.395C73.0993 228.457 72.9584 228.337 72.9845 228.389C72.9897 228.405 73.021 228.426 73.0315 228.436C73.1254 228.52 73.0001 228.405 73.0106 228.405C73.021 228.405 73.0837 228.525 73.0889 228.53C73.162 228.656 73.068 228.447 73.0993 228.551C73.115 228.609 73.1359 228.666 73.1515 228.723C73.1724 228.812 73.1672 228.969 73.2142 229.047C73.2142 229.047 73.1985 228.917 73.2089 228.995C73.2089 229.021 73.2142 229.042 73.2194 229.068C73.2246 229.131 73.235 229.198 73.2403 229.266C73.2559 229.428 73.2507 229.585 73.2455 229.752C73.2455 229.825 73.2455 229.736 73.2507 229.726C73.2455 229.773 73.235 229.82 73.2246 229.867C73.2089 229.945 73.1881 230.018 73.1672 230.091C73.1463 230.164 73.115 230.237 73.0889 230.31C73.0628 230.383 73.0889 230.3 73.0993 230.289C73.0784 230.331 73.0576 230.378 73.0367 230.42C72.9584 230.566 72.8749 230.707 72.7757 230.843C72.5773 231.119 72.7183 231.574 73.0106 231.73C73.3447 231.908 73.684 231.793 73.898 231.495C74.3312 230.89 74.6027 230.117 74.5453 229.371C74.4983 228.729 74.4148 228.034 73.9658 227.538C73.5482 227.084 72.8696 226.949 72.2746 227.016C71.6795 227.084 71.027 227.272 70.6459 227.758C70.0769 228.473 70.1761 229.381 70.3223 230.222C70.3797 230.556 70.8077 230.775 71.1209 230.676C71.4811 230.561 71.6377 230.237 71.5751 229.877L71.5803 229.846Z;M69.5803 229.846C69.5699 229.783 69.5594 229.715 69.549 229.653C69.5438 229.606 69.5177 229.444 69.5333 229.574C69.5177 229.433 69.502 229.298 69.502 229.157C69.502 229.094 69.502 229.026 69.502 228.964C69.502 228.937 69.502 228.911 69.5072 228.88C69.5124 228.786 69.4811 228.984 69.5072 228.89C69.5281 228.833 69.5385 228.77 69.5542 228.708C69.5542 228.697 69.5855 228.614 69.5542 228.687C69.5229 228.77 69.5803 228.635 69.5907 228.619C69.6012 228.598 69.6168 228.577 69.6273 228.556C69.6586 228.488 69.5333 228.656 69.5907 228.603C69.6221 228.572 69.6534 228.541 69.6795 228.509C69.7578 228.431 69.5751 228.577 69.669 228.515C69.716 228.489 69.7578 228.457 69.8048 228.431C69.8309 228.415 69.857 228.405 69.8778 228.395C69.9666 228.348 69.8413 228.41 69.8413 228.41C69.8413 228.395 69.9457 228.374 69.9614 228.368C70.0658 228.332 70.1754 228.311 70.285 228.29C70.4468 228.259 70.191 228.29 70.3111 228.29C70.3633 228.29 70.4155 228.28 70.4625 228.28C70.5564 228.28 70.6922 228.311 70.7809 228.295C70.7652 228.295 70.6243 228.264 70.7287 228.295C70.7496 228.295 70.7652 228.306 70.7861 228.306C70.8279 228.316 70.8696 228.332 70.9114 228.342C70.974 228.342 70.9427 228.353 70.9114 228.342C70.8279 228.337 70.901 228.342 70.9375 228.358C70.9584 228.368 70.9793 228.384 70.9949 228.395C71.0993 228.457 70.9584 228.337 70.9845 228.389C70.9897 228.405 71.021 228.426 71.0315 228.436C71.1254 228.52 71.0001 228.405 71.0106 228.405C71.021 228.405 71.0837 228.525 71.0889 228.53C71.162 228.656 71.068 228.447 71.0993 228.551C71.115 228.609 71.1359 228.666 71.1515 228.723C71.1724 228.812 71.1672 228.969 71.2142 229.047C71.2142 229.047 71.1985 228.917 71.2089 228.995C71.2089 229.021 71.2142 229.042 71.2194 229.068C71.2246 229.131 71.235 229.198 71.2403 229.266C71.2559 229.428 71.2507 229.585 71.2455 229.752C71.2455 229.825 71.2455 229.736 71.2507 229.726C71.2455 229.773 71.235 229.82 71.2246 229.867C71.2089 229.945 71.1881 230.018 71.1672 230.091C71.1463 230.164 71.115 230.237 71.0889 230.31C71.0628 230.383 71.0889 230.3 71.0993 230.289C71.0784 230.331 71.0576 230.378 71.0367 230.42C70.9584 230.566 70.8749 230.707 70.7757 230.843C70.5773 231.119 70.7183 231.574 71.0106 231.73C71.3447 231.908 71.684 231.793 71.898 231.495C72.3312 230.89 72.6027 230.117 72.5453 229.371C72.4983 228.729 72.4148 228.034 71.9658 227.538C71.5482 227.084 70.8696 226.949 70.2746 227.016C69.6795 227.084 69.027 227.272 68.6459 227.758C68.0769 228.473 68.1761 229.381 68.3223 230.222C68.3797 230.556 68.8077 230.775 69.1209 230.676C69.4811 230.561 69.6377 230.237 69.5751 229.877L69.5803 229.846Z\"\n                          begin=\"0s\"\n                          dur=\"1.6s\"\n                          repeatCount=\"indefinite\"\n                          fill=\"freeze\"\n                          calcMode=\"linear\"\n                          keyTimes=\"0;0.5;1\"\n                        />\n                      </path>\n                    </g>\n                  </g>\n                  <g id=\"Group_14\">\n                    <path\n                      id=\"Vector_14\"\n                      d=\"M71.569 239.43C72.4042 239.43 72.4042 238.135 71.569 238.135C70.7338 238.135 70.7338 239.43 71.569 239.43Z\"\n                      fill=\"#2EBF8F\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M71.569 239.43C72.4042 239.43 72.4042 238.135 71.569 238.135C70.7338 238.135 70.7338 239.43 71.569 239.43Z;M73.569 239.43C74.4042 239.43 74.4042 238.135 73.569 238.135C72.7338 238.135 72.7338 239.43 73.569 239.43Z;M71.569 239.43C72.4042 239.43 72.4042 238.135 71.569 238.135C70.7338 238.135 70.7338 239.43 71.569 239.43Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                    <path\n                      id=\"Vector_15\"\n                      d=\"M63.2746 242.927C64.1098 242.927 64.1098 241.633 63.2746 241.633C62.4394 241.633 62.4394 242.927 63.2746 242.927Z\"\n                      fill=\"#2EBF8F\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M63.2746 242.927C64.1098 242.927 64.1098 241.633 63.2746 241.633C62.4394 241.633 62.4394 242.927 63.2746 242.927Z;M65.2746 242.927C66.1098 242.927 66.1098 241.633 65.2746 241.633C64.4394 241.633 64.4394 242.927 65.2746 242.927Z;M63.2746 242.927C64.1098 242.927 64.1098 241.633 63.2746 241.633C62.4394 241.633 62.4394 242.927 63.2746 242.927Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                    <path\n                      id=\"Vector_16\"\n                      d=\"M75.0925 248.22C75.9277 248.22 75.9277 246.926 75.0925 246.926C74.2573 246.926 74.2573 248.22 75.0925 248.22Z\"\n                      fill=\"#2EBF8F\"\n                    >\n                      <animate\n                        attributeName=\"d\"\n                        values=\"M75.0925 248.22C75.9277 248.22 75.9277 246.926 75.0925 246.926C74.2573 246.926 74.2573 248.22 75.0925 248.22Z;M77.0925 248.22C77.9277 248.22 77.9277 246.926 77.0925 246.926C76.2573 246.926 76.2573 248.22 77.0925 248.22Z;M75.0925 248.22C75.9277 248.22 75.9277 246.926 75.0925 246.926C74.2573 246.926 74.2573 248.22 75.0925 248.22Z\"\n                        begin=\"0s\"\n                        dur=\"1.6s\"\n                        repeatCount=\"indefinite\"\n                        fill=\"freeze\"\n                        calcMode=\"linear\"\n                        keyTimes=\"0;0.5;1\"\n                      />\n                    </path>\n                  </g>\n                </g>\n                <g id=\"Group_15\" style=\"mix-blend-mode: multiply\" opacity=\"0.48\">\n                  <path\n                    id=\"Vector_17\"\n                    d=\"M77.0868 252.072C72.8064 254.458 67.6961 254.051 63.7915 251.154C60.0227 248.356 58.3053 243.647 59.3284 239.069C59.6312 237.702 60.148 236.428 60.8266 235.259C57.9451 237.122 55.8415 240.16 55.2725 243.814C54.2128 250.626 58.8743 257.01 65.6864 258.07C71.4649 258.968 76.9302 255.752 79.107 250.595C78.5119 251.148 77.8437 251.65 77.0868 252.072Z\"\n                    fill=\"#2EBF8F\"\n                  >\n                    <animate\n                      attributeName=\"d\"\n                      values=\"M77.0868 252.072C72.8064 254.458 67.6961 254.051 63.7915 251.154C60.0227 248.356 58.3053 243.647 59.3284 239.069C59.6312 237.702 60.148 236.428 60.8266 235.259C57.9451 237.122 55.8415 240.16 55.2725 243.814C54.2128 250.626 58.8743 257.01 65.6864 258.07C71.4649 258.968 76.9302 255.752 79.107 250.595C78.5119 251.148 77.8437 251.65 77.0868 252.072Z;M79.0868 252.072C74.8064 254.458 69.6961 254.051 65.7915 251.154C62.0227 248.356 60.3053 243.647 61.3284 239.069C61.6312 237.702 62.148 236.428 62.8266 235.259C59.9451 237.122 57.8415 240.16 57.2725 243.814C56.2128 250.626 60.8743 257.01 67.6864 258.07C73.4649 258.968 78.9302 255.752 81.107 250.595C80.5119 251.148 79.8437 251.65 79.0868 252.072Z;M77.0868 252.072C72.8064 254.458 67.6961 254.051 63.7915 251.154C60.0227 248.356 58.3053 243.647 59.3284 239.069C59.6312 237.702 60.148 236.428 60.8266 235.259C57.9451 237.122 55.8415 240.16 55.2725 243.814C54.2128 250.626 58.8743 257.01 65.6864 258.07C71.4649 258.968 76.9302 255.752 79.107 250.595C78.5119 251.148 77.8437 251.65 77.0868 252.072Z\"\n                      begin=\"0s\"\n                      dur=\"1.6s\"\n                      repeatCount=\"indefinite\"\n                      fill=\"freeze\"\n                      calcMode=\"linear\"\n                      keyTimes=\"0;0.5;1\"\n                    />\n                  </path>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </media-play-button>\n  </div>\n  <media-control-bar>\n    <media-time-range>\n      <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n      <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n    </media-time-range>\n    <div class=\"media-volume-wrapper\">\n      <media-mute-button class=\"icon-button\">\n        <svg slot=\"off\" viewBox=\"0 0 23 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n            fill=\"#F8B000\"\n          />\n          <mask\n            id=\"mask0_32_117\"\n            style=\"mask-type: alpha\"\n            maskUnits=\"userSpaceOnUse\"\n            x=\"0\"\n            y=\"0\"\n            width=\"16\"\n            height=\"18\"\n          >\n            <path\n              d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n              fill=\"#E64622\"\n            />\n          </mask>\n          <g mask=\"url(#mask0_32_117)\">\n            <rect x=\"6.75\" y=\"1.98242\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 1.98242)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"6.60352\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 6.60352)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"11.2246\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 11.2246)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"15.8457\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 15.8457)\" fill=\"#E72D33\" />\n          </g>\n          <path\n            d=\"M3.75 6.86133L4.13197 8.19974L5.48205 7.86133L4.51393 8.86133L5.48205 9.86133L4.13197 9.52291L3.75 10.8613L3.36803 9.52291L2.01795 9.86133L2.98607 8.86133L2.01795 7.86133L3.36803 8.19974L3.75 6.86133Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M18.7071 6.29289C18.3166 5.90237 17.6834 5.90237 17.2929 6.29289C16.9024 6.68342 16.9024 7.31658 17.2929 7.70711L18.5858 9L17.2929 10.2929C16.9024 10.6834 16.9024 11.3166 17.2929 11.7071C17.6834 12.0976 18.3166 12.0976 18.7071 11.7071L20 10.4142L21.2929 11.7071C21.6834 12.0976 22.3166 12.0976 22.7071 11.7071C23.0976 11.3166 23.0976 10.6834 22.7071 10.2929L21.4142 9L22.7071 7.70711C23.0976 7.31658 23.0976 6.68342 22.7071 6.29289C22.3166 5.90237 21.6834 5.90237 21.2929 6.29289L20 7.58579L18.7071 6.29289Z\"\n            fill=\"#F8B000\"\n          />\n        </svg>\n        <svg slot=\"low\" viewBox=\"0 0 23 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6117 5.41744C17.9334 5.203 18.368 5.28992 18.5824 5.61159C19.1762 6.50218 19.45 7.64604 19.45 8.74988C19.45 9.85372 19.1762 10.9976 18.5824 11.8882C18.368 12.2098 17.9334 12.2968 17.6117 12.0823C17.29 11.8679 17.2031 11.4333 17.4176 11.1116C17.8238 10.5022 18.05 9.64604 18.05 8.74988C18.05 7.85372 17.8238 6.99758 17.4176 6.38817C17.2031 6.0665 17.29 5.63189 17.6117 5.41744Z\"\n            fill=\"#F8B000\"\n          />\n          <path\n            d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n            fill=\"#F8B000\"\n          />\n          <mask\n            id=\"mask0_33_150\"\n            style=\"mask-type: alpha\"\n            maskUnits=\"userSpaceOnUse\"\n            x=\"0\"\n            y=\"0\"\n            width=\"16\"\n            height=\"18\"\n          >\n            <path\n              d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n              fill=\"#E64622\"\n            />\n          </mask>\n          <g mask=\"url(#mask0_33_150)\">\n            <rect x=\"6.75\" y=\"1.98242\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 1.98242)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"6.60352\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 6.60352)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"11.2246\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 11.2246)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"15.8457\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 15.8457)\" fill=\"#E72D33\" />\n          </g>\n          <path\n            d=\"M3.75 6.86133L4.13197 8.19974L5.48205 7.86133L4.51393 8.86133L5.48205 9.86133L4.13197 9.52291L3.75 10.8613L3.36803 9.52291L2.01795 9.86133L2.98607 8.86133L2.01795 7.86133L3.36803 8.19974L3.75 6.86133Z\"\n            fill=\"#E72D33\"\n          />\n        </svg>\n\n        <svg\n          slot=\"medium\"\n          viewBox=\"0 0 23 18\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6117 5.41744C17.9334 5.203 18.368 5.28992 18.5824 5.61159C19.1762 6.50218 19.45 7.64604 19.45 8.74988C19.45 9.85372 19.1762 10.9976 18.5824 11.8882C18.368 12.2098 17.9334 12.2968 17.6117 12.0823C17.29 11.8679 17.2031 11.4333 17.4176 11.1116C17.8238 10.5022 18.05 9.64604 18.05 8.74988C18.05 7.85372 17.8238 6.99758 17.4176 6.38817C17.2031 6.0665 17.29 5.63189 17.6117 5.41744Z\"\n            fill=\"#F8B000\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M20.2198 3.83116C20.3605 3.69071 20.5511 3.61182 20.7498 3.61182C20.9486 3.61182 21.1392 3.69071 21.2798 3.83116L21.2818 3.83316L21.2848 3.83516L21.2918 3.84216L21.3118 3.86216L21.3738 3.93116C21.4238 3.98816 21.4938 4.06916 21.5748 4.17216C22.4988 5.37313 22.9998 6.84588 22.9998 8.36116C22.9998 9.87643 22.4988 11.3492 21.5748 12.5502C21.4911 12.657 21.403 12.7605 21.3108 12.8602L21.2908 12.8802L21.2848 12.8872L21.2818 12.8892L21.2808 12.8902L20.7708 12.3822L21.2808 12.8922C21.1401 13.0329 20.9493 13.1119 20.7503 13.1119C20.5514 13.1119 20.3605 13.0329 20.2198 12.8922C20.0791 12.7515 20.0001 12.5606 20.0001 12.3617C20.0001 12.1627 20.0791 11.9719 20.2198 11.8312L20.2188 11.8322L20.2168 11.8332L20.2218 11.8282L20.2548 11.7922C20.2868 11.7575 20.3332 11.7018 20.3938 11.6252C21.0265 10.7993 21.4056 9.80744 21.4851 8.77015C21.5647 7.73287 21.3412 6.69482 20.8418 5.78216C20.7115 5.54196 20.5616 5.31286 20.3938 5.09716C20.3395 5.02698 20.2822 4.95925 20.2218 4.89416L20.2168 4.88916C20.0774 4.74822 19.9994 4.5578 20 4.35954C20.0006 4.16128 20.0796 3.9713 20.2198 3.83116Z\"\n            fill=\"#F8B000\"\n          />\n          <path\n            d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n            fill=\"#F8B000\"\n          />\n          <mask\n            id=\"mask0_33_176\"\n            style=\"mask-type: alpha\"\n            maskUnits=\"userSpaceOnUse\"\n            x=\"0\"\n            y=\"0\"\n            width=\"16\"\n            height=\"18\"\n          >\n            <path\n              d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n              fill=\"#E64622\"\n            />\n          </mask>\n          <g mask=\"url(#mask0_33_176)\">\n            <rect x=\"6.75\" y=\"1.98242\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 1.98242)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"6.60352\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 6.60352)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"11.2246\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 11.2246)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"15.8457\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 15.8457)\" fill=\"#E72D33\" />\n          </g>\n          <path\n            d=\"M3.75 6.86133L4.13197 8.19974L5.48205 7.86133L4.51393 8.86133L5.48205 9.86133L4.13197 9.52291L3.75 10.8613L3.36803 9.52291L2.01795 9.86133L2.98607 8.86133L2.01795 7.86133L3.36803 8.19974L3.75 6.86133Z\"\n            fill=\"#E72D33\"\n          />\n        </svg>\n        <svg slot=\"high\" viewBox=\"0 0 23 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M17.6117 5.41744C17.9334 5.203 18.368 5.28992 18.5824 5.61159C19.1762 6.50218 19.45 7.64604 19.45 8.74988C19.45 9.85372 19.1762 10.9976 18.5824 11.8882C18.368 12.2098 17.9334 12.2968 17.6117 12.0823C17.29 11.8679 17.2031 11.4333 17.4176 11.1116C17.8238 10.5022 18.05 9.64604 18.05 8.74988C18.05 7.85372 17.8238 6.99758 17.4176 6.38817C17.2031 6.0665 17.29 5.63189 17.6117 5.41744Z\"\n            fill=\"#F8B000\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M20.2198 3.83116C20.3605 3.69071 20.5511 3.61182 20.7498 3.61182C20.9486 3.61182 21.1392 3.69071 21.2798 3.83116L21.2818 3.83316L21.2848 3.83516L21.2918 3.84216L21.3118 3.86216L21.3738 3.93116C21.4238 3.98816 21.4938 4.06916 21.5748 4.17216C22.4988 5.37313 22.9998 6.84588 22.9998 8.36116C22.9998 9.87643 22.4988 11.3492 21.5748 12.5502C21.4911 12.657 21.403 12.7605 21.3108 12.8602L21.2908 12.8802L21.2848 12.8872L21.2818 12.8892L21.2808 12.8902L20.7708 12.3822L21.2808 12.8922C21.1401 13.0329 20.9493 13.1119 20.7503 13.1119C20.5514 13.1119 20.3605 13.0329 20.2198 12.8922C20.0791 12.7515 20.0001 12.5606 20.0001 12.3617C20.0001 12.1627 20.0791 11.9719 20.2198 11.8312L20.2188 11.8322L20.2168 11.8332L20.2218 11.8282L20.2548 11.7922C20.2868 11.7575 20.3332 11.7018 20.3938 11.6252C21.0265 10.7993 21.4056 9.80744 21.4851 8.77015C21.5647 7.73287 21.3412 6.69482 20.8418 5.78216C20.7115 5.54196 20.5616 5.31286 20.3938 5.09716C20.3395 5.02698 20.2822 4.95925 20.2218 4.89416L20.2168 4.88916C20.0774 4.74822 19.9994 4.5578 20 4.35954C20.0006 4.16128 20.0796 3.9713 20.2198 3.83116Z\"\n            fill=\"#F8B000\"\n          />\n          <path\n            d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n            fill=\"#F8B000\"\n          />\n          <mask\n            id=\"mask0_33_176c\"\n            style=\"mask-type: alpha\"\n            maskUnits=\"userSpaceOnUse\"\n            x=\"0\"\n            y=\"0\"\n            width=\"16\"\n            height=\"18\"\n          >\n            <path\n              d=\"M14.5 1.71821C13.75 0.575091 12.95 -0.509788 11.787 0.257212L5.788 4.21321C5.74701 4.24011 5.69903 4.25437 5.65 4.25421H2.75C2.02065 4.25421 1.32118 4.54394 0.805456 5.05967C0.289731 5.57539 0 6.27487 0 7.00421V10.7182C0 11.4476 0.289731 12.147 0.805456 12.6628C1.32118 13.1785 2.02065 13.4682 2.75 13.4682H5.65C5.69879 13.4685 5.74641 13.4831 5.787 13.5102L11.787 17.4652C12.95 18.2322 13.75 17.1472 14.5 16.0042C15.25 14.8612 15.8222 11.3848 15.75 8.36121C15.687 5.72219 15.25 2.86133 14.5 1.71821Z\"\n              fill=\"#E64622\"\n            />\n          </mask>\n          <g mask=\"url(#mask0_33_176c)\">\n            <rect x=\"6.75\" y=\"1.98242\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 1.98242)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"6.60352\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 6.60352)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"11.2246\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 11.2246)\" fill=\"#E72D33\" />\n            <rect x=\"6.75\" y=\"15.8457\" width=\"3\" height=\"3\" transform=\"rotate(-45 6.75 15.8457)\" fill=\"#E72D33\" />\n          </g>\n          <path\n            d=\"M3.75 6.86133L4.13197 8.19974L5.48205 7.86133L4.51393 8.86133L5.48205 9.86133L4.13197 9.52291L3.75 10.8613L3.36803 9.52291L2.01795 9.86133L2.98607 8.86133L2.01795 7.86133L3.36803 8.19974L3.75 6.86133Z\"\n            fill=\"#E72D33\"\n          />\n        </svg>\n      </media-mute-button>\n      <div class=\"media-volume-range-wrapper\">\n        <media-volume-range></media-volume-range>\n      </div>\n    </div>\n    <media-cast-button class=\"icon-button\">\n      <svg slot=\"enter\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M0 11.7013C0 11.2029 0.404067 10.7988 0.902508 10.7988C3.05675 10.7988 5.12276 11.6546 6.64603 13.1779C8.16931 14.7012 9.02508 16.7672 9.02508 18.9214C9.02508 19.4198 8.62101 19.8239 8.12257 19.8239C7.62413 19.8239 7.22006 19.4198 7.22006 18.9214C7.22006 17.2459 6.55447 15.639 5.36969 14.4542C4.18492 13.2694 2.57803 12.6038 0.902508 12.6038C0.404067 12.6038 0 12.1998 0 11.7013ZM0 15.3114C0 14.8129 0.404067 14.4089 0.902508 14.4089C2.09931 14.4089 3.24709 14.8843 4.09336 15.7306C4.93962 16.5768 5.41505 17.7246 5.41505 18.9214C5.41505 19.4198 5.01098 19.8239 4.51254 19.8239C4.0141 19.8239 3.61003 19.4198 3.61003 18.9214C3.61003 18.2033 3.32478 17.5147 2.81702 17.0069C2.30926 16.4991 1.62059 16.2139 0.902508 16.2139C0.404067 16.2139 0 15.8098 0 15.3114ZM0 18.9214C0 18.423 0.404067 18.0189 0.902508 18.0189H0.911533C1.40997 18.0189 1.81404 18.423 1.81404 18.9214C1.81404 19.4198 1.40997 19.8239 0.911533 19.8239H0.902508C0.404067 19.8239 0 19.4198 0 18.9214Z\"\n          fill=\"#F8B000\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M2.70752 5.38363C2.46816 5.38363 2.23861 5.47871 2.06935 5.64797C1.9001 5.81722 1.80502 6.04678 1.80502 6.28614V8.54241C1.80502 9.04085 1.40095 9.44491 0.902508 9.44491C0.404067 9.44491 0 9.04085 0 8.54241V6.28614C0 5.56806 0.285256 4.87939 0.793015 4.37163C1.30077 3.86387 1.98944 3.57861 2.70752 3.57861H15.3426C16.0607 3.57861 16.7494 3.86387 17.2571 4.37163C17.7649 4.87939 18.0502 5.56806 18.0502 6.28614V17.1162C18.0502 17.8343 17.7649 18.523 17.2571 19.0307C16.7494 19.5385 16.0607 19.8238 15.3426 19.8238H11.7326C11.2342 19.8238 10.8301 19.4197 10.8301 18.9212C10.8301 18.4228 11.2342 18.0187 11.7326 18.0187H15.3426C15.582 18.0187 15.8115 17.9237 15.9808 17.7544C16.1501 17.5851 16.2451 17.3556 16.2451 17.1162V6.28614C16.2451 6.04678 16.1501 5.81722 15.9808 5.64797C15.8115 5.47871 15.582 5.38363 15.3426 5.38363H2.70752Z\"\n          fill=\"#F8B000\"\n        />\n        <g class=\"ornament\">\n          <path\n            d=\"M14.7027 8.14523C14.3999 8.68205 13.7193 8.8718 13.1825 8.56906C12.6457 8.26632 12.456 7.58573 12.7587 7.04892L12.8539 6.88019C13.1566 6.34337 13.8372 6.15362 14.374 6.45636C14.9108 6.75909 15.1006 7.43969 14.7978 7.9765L14.7027 8.14523Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M9.13434 7.47241C8.91344 8.56228 11.5007 7.98191 12.1601 7.58021C12.4023 7.43264 12.5637 7.20765 12.5066 6.84742C12.4796 6.67756 11.9826 6.39726 11.1842 5.94699C10.3858 5.49672 9.62208 5.06602 9.13434 7.47241Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M8.73703 2.82816C8.34107 3.36358 11.7567 6.49318 12.4707 6.47466C13.1847 6.45613 13.0932 5.93476 13.1006 5.74009C13.1081 5.54541 12.3677 1.59508 11.7215 1.35393C11.0752 1.11278 10.674 2.42702 10.4047 2.60322C9.69609 3.06676 9.3982 1.93412 8.73703 2.82816Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M16.1802 11.5325C15.3618 12.2855 14.5198 9.77111 14.5224 8.99903C14.5233 8.71539 14.6324 8.4609 14.9702 8.32338C15.1295 8.25854 15.6265 8.53884 16.4249 8.98912C17.2233 9.43939 17.9871 9.87008 16.1802 11.5325Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M20.3596 9.46932C20.1063 10.0852 15.6609 8.78152 15.3074 8.16092C14.9538 7.54033 15.4473 7.34892 15.6101 7.24181C15.7728 7.1347 19.5364 5.72441 20.0771 6.15265C20.6178 6.58089 19.7007 7.60422 19.6893 7.92588C19.6592 8.77207 20.7826 8.44095 20.3596 9.46932Z\"\n            fill=\"#E72D33\"\n          />\n        </g>\n      </svg>\n    </media-cast-button>\n    <media-airplay-button class=\"icon-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 22 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M2.45453 6.57942C2.23753 6.57942 2.02943 6.6626 1.87599 6.81065C1.72255 6.95871 1.63635 7.15951 1.63635 7.36889V15.2636C1.63635 15.473 1.72255 15.6738 1.87599 15.8218C2.02943 15.9699 2.23754 16.053 2.45453 16.053H3.27271C3.72457 16.053 4.09088 16.4065 4.09088 16.8425C4.09088 17.2785 3.72457 17.632 3.27271 17.632H2.45453C1.80355 17.632 1.17923 17.3825 0.718915 16.9383C0.258601 16.4941 0 15.8917 0 15.2636V7.36889C0 6.74075 0.258601 6.13834 0.718915 5.69418C1.17923 5.25002 1.80355 5.00049 2.45453 5.00049H15.5453C16.1963 5.00049 16.8206 5.25002 17.281 5.69418C17.7413 6.13834 17.9999 6.74075 17.9999 7.36889V15.2636C17.9999 15.8917 17.7413 16.4941 17.281 16.9383C16.8207 17.3825 16.1963 17.632 15.5453 17.632H14.7272C14.2753 17.632 13.909 17.2785 13.909 16.8425C13.909 16.4065 14.2753 16.053 14.7272 16.053H15.5453C15.7623 16.053 15.9704 15.9699 16.1239 15.8218C16.2773 15.6738 16.3635 15.473 16.3635 15.2636V7.36889C16.3635 7.15951 16.2773 6.95871 16.1239 6.81065C15.9704 6.6626 15.7623 6.57942 15.5453 6.57942H2.45453ZM8.99994 13.6846C9.24276 13.6846 9.47303 13.7887 9.62848 13.9687L13.7194 18.7055C13.9226 18.9408 13.9664 19.2684 13.8318 19.5458C13.6971 19.8232 13.4083 20.0004 13.0908 20.0004H4.90906C4.59159 20.0004 4.30278 19.8232 4.16813 19.5458C4.03347 19.2684 4.07728 18.9408 4.28052 18.7055L8.3714 13.9687C8.52685 13.7887 8.75712 13.6846 8.99994 13.6846ZM6.6559 18.4215H11.344L8.99994 15.7073L6.6559 18.4215Z\"\n          fill=\"#F8B000\"\n        />\n        <g class=\"ornament\">\n          <path\n            d=\"M15.0427 8.91031C14.5817 9.4732 13.7516 9.55574 13.1887 9.09467C12.6258 8.63359 12.5433 7.8035 13.0043 7.24061L13.1493 7.06368C13.6103 6.50079 14.4404 6.41825 15.0033 6.87932C15.5662 7.34039 15.6487 8.17048 15.1877 8.73338L15.0427 8.91031Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M8.703 6.99743C8.22484 8.22018 11.3518 8.07038 12.2003 7.73703C12.5119 7.61456 12.7453 7.38564 12.752 6.95508C12.7552 6.75205 12.234 6.32515 11.3968 5.63938C10.5596 4.95361 9.75876 4.29766 8.703 6.99743Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M9.18367 1.51522C8.61445 2.05757 11.9518 6.39086 12.786 6.51425C13.6202 6.63765 13.6195 6.01267 13.6677 5.78777C13.7159 5.56286 13.6567 0.818075 12.954 0.40642C12.2513 -0.00523493 11.5179 1.44186 11.1689 1.59212C10.2507 1.98741 10.1341 0.609609 9.18367 1.51522Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M16.0736 13.1499C14.9689 13.8595 14.5 10.7642 14.6597 9.86673C14.7184 9.53703 14.8969 9.26318 15.3177 9.17182C15.5162 9.12873 16.0373 9.55564 16.8745 10.2414C17.7117 10.9272 18.5126 11.5831 16.0736 13.1499Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M21.3534 11.5987C20.9337 12.2635 16.0281 9.84488 15.7429 9.05131C15.4576 8.25774 16.0705 8.13531 16.2815 8.04377C16.4925 7.95223 21.156 7.07596 21.698 7.68379C22.24 8.29163 20.9656 9.29566 20.8871 9.66745C20.6803 10.6455 22.0541 10.4885 21.3534 11.5987Z\"\n            fill=\"#E72D33\"\n          />\n        </g>\n      </svg>\n    </media-airplay-button>\n    <media-fullscreen-button class=\"icon-button\">\n      <svg\n        slot=\"enter\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        viewBox=\"0 0 24 18\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M2.07622 5.19169H4.21092C4.60391 5.19169 4.92249 4.87311 4.92249 4.48012C4.92249 4.08714 4.60391 3.76855 4.21092 3.76855H1.72043C1.43735 3.76855 1.16586 3.88101 0.965697 4.08118C0.76553 4.28134 0.653076 4.55283 0.653076 4.83591V7.3264C0.653076 7.71939 0.971657 8.03797 1.36465 8.03797C1.75763 8.03797 2.07622 7.71939 2.07622 7.3264V5.19169ZM16.3076 4.48012C16.3076 4.08714 16.6262 3.76855 17.0192 3.76855H19.5097C19.7928 3.76855 20.0642 3.88101 20.2644 4.08118C20.4646 4.28134 20.577 4.55283 20.577 4.83591V7.3264C20.577 7.71939 20.2584 8.03797 19.8655 8.03797C19.4725 8.03797 19.1539 7.71939 19.1539 7.3264V5.19169H17.0192C16.6262 5.19169 16.3076 4.87311 16.3076 4.48012ZM1.36465 13.7305C1.75763 13.7305 2.07622 14.0491 2.07622 14.4421V16.5768H4.21092C4.60391 16.5768 4.92249 16.8954 4.92249 17.2884C4.92249 17.6814 4.60391 17.9999 4.21092 17.9999H1.72043C1.43735 17.9999 1.16587 17.8875 0.965697 17.6873C0.765529 17.4872 0.653076 17.2157 0.653076 16.9326V14.4421C0.653076 14.0491 0.971657 13.7305 1.36465 13.7305ZM19.8655 13.7305C20.2584 13.7305 20.577 14.0491 20.577 14.4421V16.9326C20.577 17.2157 20.4646 17.4872 20.2644 17.6873C20.0642 17.8875 19.7927 17.9999 19.5097 17.9999H17.0192C16.6262 17.9999 16.3076 17.6814 16.3076 17.2884C16.3076 16.8954 16.6262 16.5768 17.0192 16.5768H19.1539V14.4421C19.1539 14.0491 19.4725 13.7305 19.8655 13.7305Z\"\n          fill=\"#F8B000\"\n        />\n        <g class=\"ornament\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.9493 0.454102C16.9493 0.454102 16.7169 0.996495 15.7587 1.4497C14.8005 1.90291 14.2537 1.70678 14.2537 1.70678C14.2537 1.70678 14.7158 2.59238 14.6521 3.56069C14.5883 4.52901 14.1108 4.96761 14.1108 4.96761C14.1108 4.96761 14.5781 5.06187 15.4235 5.97615C16.2688 6.89043 16.5693 7.44305 16.5693 7.44305C16.5693 7.44305 16.7132 6.87136 17.4059 6.33029C18.0986 5.78921 18.6067 5.85163 18.6067 5.85163C18.6067 5.85163 18.1178 5.18376 18.1815 4.21544C18.2453 3.24712 18.7317 2.73595 18.7317 2.73595C18.7317 2.73595 17.9919 2.46086 17.5871 1.85857C17.1822 1.25628 16.9493 0.454102 16.9493 0.454102ZM16.5698 7.62643C16.5698 7.62643 17.067 7.94423 17.3578 8.96351C17.6486 9.98279 17.3658 10.4903 17.3658 10.4903C17.3658 10.4903 18.315 10.1788 19.2599 10.3997C20.2049 10.6206 20.5597 11.1633 20.5597 11.1633C20.5597 11.1633 20.7289 10.7176 21.7689 10.0328C22.8088 9.34792 23.4031 9.14166 23.4031 9.14166C23.4031 9.14166 22.8625 8.90639 22.4417 8.13468C22.0209 7.36297 22.1654 6.87195 22.1654 6.87195C22.1654 6.87195 21.4267 7.24531 20.4818 7.02443C19.5368 6.80355 19.1119 6.24023 19.1119 6.24023C19.1119 6.24023 18.7198 6.92518 18.0595 7.22634C17.3992 7.5275 16.5698 7.62643 16.5698 7.62643Z\"\n            fill=\"#19BC8A\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.6497 7.65115C16.1972 7.1963 16.199 6.4607 16.6539 6.00813C17.1087 5.55557 17.8443 5.55742 18.2969 6.01227C18.7495 6.46712 18.7476 7.20272 18.2928 7.65529C17.8379 8.10785 17.1023 8.106 16.6497 7.65115ZM15.4451 9.82401C14.9926 9.36916 14.9944 8.63356 15.4493 8.18099C15.9041 7.72843 16.6397 7.73028 17.0923 8.18513C17.5449 8.63998 17.543 9.37559 17.0882 9.82815C16.6333 10.2807 15.8977 10.2789 15.4451 9.82401ZM14.1224 6.1351C13.6675 6.58766 13.6657 7.32326 14.1182 7.77811C14.5708 8.23296 15.3064 8.23482 15.7613 7.78225C16.2161 7.32969 16.218 6.59408 15.7654 6.13923C15.3128 5.68438 14.5772 5.68253 14.1224 6.1351Z\"\n            fill=\"#E72D33\"\n          />\n        </g>\n      </svg>\n\n      <svg\n        slot=\"exit\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        viewBox=\"0 0 23 18\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0.711534 6.16083L2.84626 6.16083L2.84626 4.02611C2.84626 3.63312 3.16484 3.31453 3.55783 3.31453C3.95083 3.31453 4.26941 3.63312 4.26941 4.02611L4.26941 6.51662C4.26941 6.7997 4.15695 7.07119 3.95679 7.27136C3.75662 7.47153 3.48513 7.58398 3.20205 7.58398L0.711534 7.58398C0.318542 7.58398 -4.17495e-05 7.2654 -4.17152e-05 6.87241C-4.16808e-05 6.47942 0.318542 6.16083 0.711534 6.16083Z\"\n          fill=\"#F8B000\"\n        />\n        <path\n          d=\"M2.84638 16.886L2.84638 14.7513L0.711656 14.7513C0.318664 14.7513 8.05726e-05 14.4327 8.05679e-05 14.0397C8.05632e-05 13.6467 0.318664 13.3281 0.711656 13.3281L3.20217 13.3281C3.48525 13.3281 3.75674 13.4406 3.95691 13.6407C4.15708 13.8409 4.26953 14.1124 4.26953 14.3955L4.26953 16.886C4.26953 17.279 3.95095 17.5976 3.55796 17.5976C3.16496 17.5976 2.84638 17.279 2.84638 16.886Z\"\n          fill=\"#F8B000\"\n        />\n        <path\n          d=\"M19.3067 14.7513L17.1719 14.7513L17.1719 16.886C17.1719 17.279 16.8533 17.5976 16.4604 17.5976C16.0674 17.5976 15.7488 17.279 15.7488 16.886L15.7488 14.3955C15.7488 14.1124 15.8612 13.8409 16.0614 13.6407C16.2616 13.4406 16.5331 13.3281 16.8161 13.3281L19.3067 13.3281C19.6996 13.3281 20.0182 13.6467 20.0182 14.0397C20.0182 14.4327 19.6996 14.7513 19.3067 14.7513Z\"\n          fill=\"#F8B000\"\n        />\n        <path\n          d=\"M17.0032 4.08568L17.0032 6.2204L19.138 6.2204C19.5309 6.2204 19.8495 6.53899 19.8495 6.93198C19.8495 7.32497 19.5309 7.64355 19.138 7.64355L16.6474 7.64355C16.3644 7.64355 16.0929 7.5311 15.8927 7.33093C15.6925 7.13076 15.5801 6.85927 15.5801 6.57619L15.5801 4.08568C15.5801 3.69269 15.8987 3.3741 16.2917 3.3741C16.6846 3.3741 17.0032 3.69269 17.0032 4.08568Z\"\n          fill=\"#F8B000\"\n        />\n        <g class=\"ornament\">\n          <path\n            d=\"M16.7046 8.50954C16.4138 7.49025 15.9166 7.17245 15.9166 7.17245C15.9166 7.17245 16.746 7.07351 17.4063 6.77235C18.0666 6.47119 18.4587 5.78624 18.4587 5.78624C18.4587 5.78624 18.8837 6.34956 19.8286 6.57044C20.7736 6.79132 21.5123 6.41796 21.5123 6.41796C21.5123 6.41796 21.3678 6.90898 21.7886 7.6807C22.2094 8.45241 22.7499 8.68769 22.7499 8.68769C22.7499 8.68769 22.1557 8.89395 21.1157 9.57883C20.0758 10.2637 19.9065 10.7094 19.9065 10.7094C19.9065 10.7094 19.5517 10.1667 18.6068 9.94579C17.6618 9.72491 16.7127 10.0363 16.7127 10.0363C16.7127 10.0363 16.9954 9.52882 16.7046 8.50954Z\"\n            fill=\"#19BC8A\"\n          />\n          <path\n            d=\"M15.1056 0.995608C16.0638 0.542398 16.2962 0 16.2962 0C16.2962 0 16.5292 0.802185 16.934 1.40448C17.3389 2.00677 18.0786 2.28186 18.0786 2.28186C18.0786 2.28186 17.5922 2.79304 17.5284 3.76137C17.4647 4.72969 17.9536 5.39757 17.9536 5.39757C17.9536 5.39757 17.4456 5.33515 16.7529 5.87623C16.0601 6.41731 15.9162 6.989 15.9162 6.989C15.9162 6.989 15.6158 6.43637 14.7704 5.52209C13.925 4.60781 13.4577 4.51355 13.4577 4.51355C13.4577 4.51355 13.9352 4.07494 13.999 3.10662C14.0627 2.13829 13.6006 1.25269 13.6006 1.25269C13.6006 1.25269 14.1474 1.44882 15.1056 0.995608Z\"\n            fill=\"#19BC8A\"\n          />\n          <path\n            d=\"M15.9965 7.19726C15.5439 6.74241 15.5457 6.0068 16.0006 5.55423C16.4555 5.10166 17.1911 5.10352 17.6436 5.55837C18.0962 6.01322 18.0943 6.74884 17.6395 7.2014C17.1846 7.65397 16.449 7.65212 15.9965 7.19726Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M14.7918 9.36999C14.3393 8.91514 14.3411 8.17953 14.796 7.72696C15.2508 7.27439 15.9865 7.27624 16.439 7.7311C16.8916 8.18595 16.8897 8.92156 16.4349 9.37413C15.98 9.8267 15.2444 9.82485 14.7918 9.36999Z\"\n            fill=\"#E72D33\"\n          />\n          <path\n            d=\"M13.465 7.3242C13.0125 6.86935 13.0143 6.13374 13.4692 5.68117C13.924 5.2286 14.6597 5.23045 15.1122 5.68531C15.5648 6.14016 15.5629 6.87577 15.1081 7.32834C14.6532 7.78091 13.9176 7.77905 13.465 7.3242Z\"\n            fill=\"#E72D33\"\n          />\n        </g>\n      </svg>\n    </media-fullscreen-button>\n  </media-control-bar>\n</media-controller>\n"
  },
  {
    "path": "themes/yt/CHANGELOG.md",
    "content": "# Changelog\n\n## [0.2.1](https://github.com/muxinc/player.style/compare/@player.style/yt@0.2.0...@player.style/yt@0.2.1) (2025-12-04)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.1.0 to ^0.1.1\n\n## [0.2.0](https://github.com/muxinc/player.style/compare/@player.style/yt@0.1.1...@player.style/yt@0.2.0) (2025-08-22)\n\n\n### Features\n\n* : Add centered chrome with animated play button in YT theme ([#195](https://github.com/muxinc/player.style/issues/195)) ([25ba33b](https://github.com/muxinc/player.style/commit/25ba33bec122c7174dd2ee8505b5056d60672dc6))\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/@player.style/yt@0.1.0...@player.style/yt@0.1.1) (2024-12-19)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.8 to ^0.1.0\n\n## [0.1.0](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.12...@player.style/yt@0.1.0) (2024-12-09)\n\n\n### Features\n\n* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))\n\n## [0.0.12](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.11...@player.style/yt@0.0.12) (2024-11-11)\n\n\n### Bug Fixes\n\n* yt theme media caption button underline ([#128](https://github.com/muxinc/player.style/issues/128)) ([6902420](https://github.com/muxinc/player.style/commit/6902420b78d4178aa35a627add1692e728d3cf7d))\n\n## [0.0.11](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.10...@player.style/yt@0.0.11) (2024-10-29)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.7 to ^0.0.8\n\n## [0.0.10](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.9...@player.style/yt@0.0.10) (2024-10-21)\n\n\n### Features\n\n* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.6 to ^0.0.7\n\n## [0.0.9](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.8...@player.style/yt@0.0.9) (2024-10-08)\n\n\n### Features\n\n* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))\n\n\n### Bug Fixes\n\n* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.5 to ^0.0.6\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.7...@player.style/yt@0.0.8) (2024-09-25)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.4 to ^0.0.5\n\n## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.6...@player.style/yt@0.0.7) (2024-09-10)\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.3 to ^0.0.4\n\n## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.5...@player.style/yt@0.0.6) (2024-08-15)\n\n\n### Bug Fixes\n\n* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))\n* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))\n* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))\n* Stop the YT play button from transitioning on load ([#42](https://github.com/muxinc/player.style/issues/42)) ([ebf45cd](https://github.com/muxinc/player.style/commit/ebf45cdc41e23d123667cda1bcd1d5191791356c))\n* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.2 to ^0.0.3\n\n## [0.0.5](https://github.com/muxinc/player.style/compare/@player.style/yt@0.0.4...@player.style/yt@0.0.5) (2024-06-17)\n\n\n### Bug Fixes\n\n* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))\n\n\n### Dependencies\n\n* The following workspace dependencies were updated\n  * devDependencies\n    * build-theme bumped from ^0.0.1 to ^0.0.2\n\n## [0.0.4](https://github.com/muxinc/player.style/compare/@player.style/yt-v0.0.3...@player.style/yt@0.0.4) (2024-06-17)\n\n\n### Bug Fixes\n\n* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))\n\n## [0.0.3](https://github.com/muxinc/player.style/compare/@player.style/youtube@0.0.2...@player.style/youtube@0.0.3) (2024-06-14)\n\n\n### Bug Fixes\n\n* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))\n\n## [0.0.2](https://github.com/muxinc/player.style/compare/@player.style/youtube-v0.0.1...@player.style/youtube@0.0.2) (2024-06-14)\n\n\n### Features\n\n* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))\n* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))\n* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))\n\n\n### Bug Fixes\n\n* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))\n"
  },
  {
    "path": "themes/yt/package.json",
    "content": "{\n  \"name\": \"@player.style/yt\",\n  \"version\": \"0.2.1\",\n  \"description\": \"An homage to the modern, ubiquitous YouTube player. Recreated with web components, or at least as close as we could get.\",\n  \"author\": \"@heff\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/muxinc/player.style#readme\",\n  \"bugs\": {\n    \"url\": \"https://github.com/muxinc/player.style/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/muxinc/player.style.git\",\n    \"directory\": \"themes/yt\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"types\": \"./dist/media-theme.d.ts\",\n  \"main\": \"./dist/media-theme.js\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/media-theme.d.ts\",\n      \"import\": \"./dist/media-theme.js\",\n      \"require\": \"./dist/cjs/media-theme.js\",\n      \"default\": \"./dist/media-theme.js\"\n    },\n    \"./react\": {\n      \"types\": \"./dist/react.d.ts\",\n      \"import\": \"./dist/react.js\",\n      \"require\": \"./dist/cjs/react.js\",\n      \"default\": \"./dist/react.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"react\": [\n        \"./dist/react.d.ts\"\n      ],\n      \"*\": [\n        \"./dist/media-theme.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"clean\": \"rimraf dist\",\n    \"build\": \"build-theme\"\n  },\n  \"peerDependencies\": {\n    \"media-chrome\": \">=1.0.0\"\n  },\n  \"devDependencies\": {\n    \"build-theme\": \"^0.1.1\"\n  }\n}\n"
  },
  {
    "path": "themes/yt/template.html",
    "content": "<style>\n  media-controller {\n    font-size: 13px;\n    font-family: Roboto, Arial, sans-serif;\n    --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    --media-secondary-color: transparent;\n    --media-menu-background: rgba(28, 28, 28, 0.9);\n    --media-control-hover-background: var(--media-secondary-color);\n    --media-range-track-height: 3px;\n    --media-range-thumb-height: 13px;\n    --media-range-thumb-width: 13px;\n    --media-range-thumb-border-radius: 13px;\n    --media-preview-thumbnail-border: 2px solid #fff;\n    --media-preview-thumbnail-border-radius: 2px;\n    --media-tooltip-display: none;\n  }\n\n  /* The biggest size controller is tied to going fullscreen\n      instead of a player width */\n  media-controller[mediaisfullscreen] {\n    font-size: 17px;\n    --media-range-thumb-height: 20px;\n    --media-range-thumb-width: 20px;\n    --media-range-thumb-border-radius: 10px;\n    --media-range-track-height: 4px;\n  }\n\n  .yt-button {\n    position: relative;\n    display: inline-block;\n    width: 36px;\n    padding: 0 2px;\n    height: 100%;\n    opacity: 0.9;\n    transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);\n  }\n  [breakpointmd] .yt-button {\n    width: 48px;\n  }\n  [mediaisfullscreen] .yt-button {\n    width: 54px;\n  }\n\n  .yt-button svg {\n    height: 100%;\n    width: 100%;\n    fill: var(--media-primary-color, #fff);\n    fill-rule: evenodd;\n  }\n\n  .svg-shadow {\n    stroke: #000;\n    stroke-opacity: 0.15;\n    stroke-width: 2px;\n    fill: none;\n  }\n</style>\n\n<media-controller\n  breakpoints=\"md:480\"\n  defaultsubtitles=\"{{defaultsubtitles}}\"\n  defaultduration=\"{{defaultduration}}\"\n  gesturesdisabled=\"{{disabled}}\"\n  hotkeys=\"{{hotkeys}}\"\n  nohotkeys=\"{{nohotkeys}}\"\n  defaultstreamtype=\"on-demand\"\n>\n  <slot name=\"media\" slot=\"media\"></slot>\n  <slot name=\"poster\" slot=\"poster\"></slot>\n  <slot name=\"centered-chrome\" slot=\"centered-chrome\"></slot>\n  <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n  <!-- Gradient -->\n  <style>\n    .yt-gradient-bottom {\n      padding-top: 37px;\n      position: absolute;\n      width: 100%;\n      height: 170px;\n      bottom: 0;\n      pointer-events: none;\n      background-position: bottom;\n      background-repeat: repeat-x;\n      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');\n    }\n  </style>\n  <div class=\"yt-gradient-bottom\"></div>\n\n  <!-- Settings Menu -->\n  <style>\n    media-settings-menu {\n      position: absolute;\n      border-radius: 12px;\n      right: 12px;\n      bottom: 61px;\n      z-index: 70;\n      will-change: width, height;\n      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);\n      transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);\n      user-select: none;\n      --media-settings-menu-min-width: 220px;\n    }\n    [mediaisfullscreen] media-settings-menu {\n      --media-settings-menu-min-width: 320px;\n      right: 24px;\n      bottom: 70px;\n    }\n    media-settings-menu-item {\n      height: 40px;\n      font-size: 13px;\n      font-weight: 500;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    [mediaisfullscreen] media-settings-menu-item {\n      font-size: 20px;\n      height: 50px;\n    }\n\n    media-settings-menu-item[submenusize='0'] {\n      display: none;\n    }\n\n    /* Also hide if only 'Auto' is added. */\n    .quality-settings[submenusize='1'] {\n      display: none;\n    }\n  </style>\n  <media-settings-menu hidden anchor=\"auto\">\n    <media-settings-menu-item>\n      Playback Speed\n      <media-playback-rate-menu slot=\"submenu\" hidden>\n        <div slot=\"title\">Playback Speed</div>\n      </media-playback-rate-menu>\n    </media-settings-menu-item>\n    <media-settings-menu-item class=\"quality-settings\">\n      Quality\n      <media-rendition-menu slot=\"submenu\" hidden>\n        <div slot=\"title\">Quality</div>\n      </media-rendition-menu>\n    </media-settings-menu-item>\n    <media-settings-menu-item>\n      Subtitles/CC\n      <media-captions-menu slot=\"submenu\" hidden>\n        <div slot=\"title\">Subtitles/CC</div>\n      </media-captions-menu>\n    </media-settings-menu-item>\n  </media-settings-menu>\n\n  <!-- Time Range / Progress Bar -->\n  <style>\n    media-time-range {\n      position: absolute;\n      bottom: 36px;\n      width: 100%;\n      height: 5px;\n      --media-range-track-background: rgba(255, 255, 255, 0.2);\n      --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);\n      --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);\n      --media-range-bar-color: var(--media-accent-color, rgb(229, 9, 20));\n      --media-range-thumb-border-radius: 13px;\n      --media-range-thumb-background: var(--media-accent-color, #f00);\n      --media-range-thumb-transition: transform 0.1s linear;\n      --media-range-thumb-transform: scale(0) translate(0%, 0%);\n    }\n    media-time-range:hover {\n      --media-range-track-height: 5px;\n      --media-range-thumb-transform: scale(1) translate(0%, 0%);\n    }\n    [breakpointmd] media-time-range {\n      bottom: 47px;\n    }\n    [mediaisfullscreen] media-time-range {\n      bottom: 52.5px;\n      height: 8px;\n    }\n    [mediaisfullscreen] media-time-range:hover {\n      --media-range-track-height: 8px;\n    }\n\n    media-preview-thumbnail {\n      margin-bottom: 5px;\n    }\n\n    media-preview-chapter-display {\n      padding-block: 0;\n    }\n\n    media-preview-time-display {\n      padding-top: 0;\n    }\n  </style>\n  <media-time-range>\n    <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n    <media-preview-chapter-display slot=\"preview\"></media-preview-chapter-display>\n    <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n  </media-time-range>\n\n  <!-- Control Bar -->\n  <style>\n    media-control-bar {\n      position: absolute;\n      height: 36px;\n      line-height: 36px;\n      bottom: 0;\n      left: 12px;\n      right: 12px;\n    }\n    [breakpointmd] media-control-bar {\n      height: 48px;\n      line-height: 48px;\n    }\n    [mediaisfullscreen] media-control-bar {\n      height: 54px;\n      line-height: 54px;\n    }\n  </style>\n  <media-control-bar>\n    <!-- Play/Pause -->\n    <style>\n      media-play-button {\n        --media-button-icon-width: 30px;\n        padding: 6px 10px;\n      }\n\n      media-play-button #icon-play,\n      media-play-button #icon-pause {\n        filter: drop-shadow(0 0 2px #00000080);\n      }\n\n      media-play-button :is(#play-p1, #play-p2, #pause-p1, #pause-p2) {\n        transition: clip-path 0.25s ease-in;\n      }\n\n      /* Slow down the play icon part hiding slightly\n          to achieve the morphing look a little better */\n      media-play-button:not([mediapaused]) #play-p2,\n      media-play-button:not([mediapaused]) #play-p2 {\n        transition: clip-path 0.35s ease-in;\n      }\n\n      /* Show icon */\n      media-play-button :is(#pause-p1, #pause-p2),\n      media-play-button[mediapaused] :is(#play-p1, #play-p2) {\n        clip-path: inset(0);\n      }\n\n      /* Hide icon wth clip path mask */\n      media-play-button #play-p1 {\n        clip-path: inset(0 100% 0 0);\n      }\n      media-play-button #play-p2 {\n        clip-path: inset(0 20% 0 100%);\n      }\n      media-play-button[mediapaused] #pause-p1 {\n        clip-path: inset(50% 0 50% 0);\n      }\n      media-play-button[mediapaused] #pause-p2 {\n        clip-path: inset(50% 0 50% 0);\n      }\n    </style>\n    <media-play-button mediapaused class=\"yt-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <g id=\"icon-play\">\n        <g id=\"play-icon\">\n          <path id=\"play-p1\" d=\"M18.5 14L12 10V26L18.5 22V14Z\" />\n          <path id=\"play-p2\" d=\"M18 13.6953L25 18L18 22.3086V13.6953Z\" />\n        </g>\n        <g id=\"pause-icon\">\n          <path id=\"pause-p1\" d=\"M16 10H12V26H16V10Z\" />\n          <path id=\"pause-p2\" d=\"M21 10H25V26H21V10Z\" />\n        </g>\n        </g>\n      </svg>\n    </media-play-button>\n\n    <!-- Volume/Mute -->\n    <style>\n      media-mute-button :is(#icon-muted, #icon-volume) {\n        transition: clip-path 0.3s ease-out;\n      }\n      media-mute-button #icon-muted {\n        clip-path: inset(0 0 100% 0);\n      }\n      media-mute-button[mediavolumelevel='off'] #icon-muted {\n        clip-path: inset(0);\n      }\n      media-mute-button #icon-volume {\n        clip-path: inset(0);\n      }\n      media-mute-button[mediavolumelevel='off'] #icon-volume {\n        clip-path: inset(100% 0 0 0);\n      }\n\n      media-mute-button #volume-high,\n      media-mute-button[mediavolumelevel='off'] #volume-high {\n        opacity: 1;\n        transition: opacity 0.3s;\n      }\n      media-mute-button[mediavolumelevel='low'] #volume-high,\n      media-mute-button[mediavolumelevel='medium'] #volume-high {\n        opacity: 0.2;\n      }\n\n      media-volume-range {\n        height: 36px;\n        --media-range-track-background: rgba(255, 255, 255, 0.2);\n      }\n\n      media-mute-button + media-volume-range {\n        width: 0;\n        overflow: hidden;\n        transition: width 0.2s ease-in;\n      }\n\n      /* Expand volume control in all relevant states */\n      media-mute-button:hover + media-volume-range,\n      media-mute-button:focus + media-volume-range,\n      media-mute-button:focus-within + media-volume-range,\n      media-volume-range:hover,\n      media-volume-range:focus,\n      media-volume-range:focus-within {\n        width: 70px;\n      }\n    </style>\n    <media-mute-button class=\"yt-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <use class=\"svg-shadow\" xlink:href=\"#icon-volume\"></use>\n        <g id=\"icon-volume\">\n          <path id=\"speaker\" d=\"M13 15H9V21H13L18 26V10L13 15Z\" />\n          <path\n            id=\"volume-low\"\n            d=\"M20 22.0323C21.4818 21.2959 22.5 19.7669 22.5 18C22.5 16.2332 21.4818 14.7041 20 13.9678V22.0323Z\"\n          />\n          <path\n            id=\"volume-high\"\n            d=\"M20 9.22302V11.2899C22.8915 12.1505 25 14.829 25 18C25 21.171 22.8915 23.8495 20 24.7101V26.777C24.008 25.8675 27 22.2832 27 18C27 13.7168 24.008 10.1325 20 9.22302Z\"\n          />\n        </g>\n        <g id=\"icon-muted\">\n          <path\n            d=\"M10.2207 8.80817L8.80762 10.2213L13.2929 14.7065L13 14.9995H9V20.9995H13L18 25.9995V19.4136L22.1922 23.6058C21.5401 24.0942 20.8 24.4715 20 24.7096V26.7764C21.3453 26.4712 22.5761 25.8646 23.6177 25.0314L25.7782 27.1918L27.1924 25.7776L27.1913 25.7766L27.1902 25.7776L10.2207 8.80817Z\"\n          />\n          <path\n            d=\"M25.8817 22.3478C26.5944 21.0589 27 19.5766 27 17.9995C27 13.7163 24.008 10.132 20 9.22247V11.2894C22.8915 12.1499 25 14.8284 25 17.9995C25 19.0177 24.7826 19.9851 24.3917 20.8578L25.8817 22.3478Z\"\n          />\n          <path\n            d=\"M22.4139 18.88C22.4704 18.5952 22.5 18.3008 22.5 17.9995C22.5 16.2326 21.4818 14.7036 20 13.9672V16.4661L22.4139 18.88Z\"\n          />\n          <path d=\"M18 14.4661V9.99945L15.7667 12.2328L18 14.4661Z\" />\n        </g>\n      </svg>\n    </media-mute-button>\n    <media-volume-range></media-volume-range>\n\n    <!-- Time Display -->\n    <style>\n      media-time-display {\n        padding-top: 6px;\n        padding-bottom: 6px;\n        font-size: 13px;\n      }\n\n      [mediaisfullscreen] media-time-display {\n        font-size: 20px;\n      }\n    </style>\n    <media-time-display showduration></media-time-display>\n\n    <!-- Control Spacer -->\n    <style>\n      .control-spacer {\n        flex-grow: 1;\n      }\n    </style>\n    <span class=\"control-spacer\"></span>\n\n    <!-- Subtitles/CC Button -->\n    <style>\n      media-captions-button {\n        position: relative;\n      }\n\n      /* Disble the captions button when no subtitles are available */\n      media-captions-button:not([mediasubtitleslist]) svg {\n        opacity: 0.3;\n      }\n\n      media-captions-button[mediasubtitleslist]:after {\n        content: '';\n        display: block;\n        position: absolute;\n        width: 0;\n        height: 3px;\n        border-radius: 3px;\n        background-color: var(--media-accent-color, #f00);\n        bottom: 19%;\n        left: 50%;\n        transition:\n          all 0.1s cubic-bezier(0, 0, 0.2, 1),\n          width 0.1s cubic-bezier(0, 0, 0.2, 1);\n      }\n\n      media-captions-button[mediasubtitleslist][aria-checked='true']:after {\n        left: 25%;\n        width: 50%;\n        transition:\n          left 0.25s cubic-bezier(0, 0, 0.2, 1),\n          width 0.25s cubic-bezier(0, 0, 0.2, 1);\n      }\n\n      media-captions-button[mediasubtitleslist][aria-checked='true']:after {\n        left: 25%;\n        width: 50%;\n\n        transition:\n          left 0.25s cubic-bezier(0, 0, 0.2, 1),\n          width 0.25s cubic-bezier(0, 0, 0.2, 1);\n      }\n    </style>\n    <media-captions-button class=\"yt-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <use class=\"svg-shadow\" xlink:href=\"#cc-icon\"></use>\n        <path\n          id=\"cc-icon\"\n          d=\"M9 13.4124C9 12.0801 10.0801 11 11.4124 11H24.5876C25.9199 11 27 12.0801 27 13.4124V22.5876C27 23.9199 25.9199 25 24.5876 25H11.4124C10.0801 25 9 23.9199 9 22.5876V13.4124ZM12 16.1134C12 15.4985 12.4985 15 13.1134 15H15.8866C16.5015 15 17 15.4985 17 16.1134V19.8866C17 20.5015 16.5015 21 15.8866 21H13.1134C12.4985 21 12 20.5015 12 19.8866V16.1134ZM13.5517 16.4545H15.4483V19.5455H13.5517V16.4545ZM17 17H15.4483V19H17V17ZM20.1134 15C19.4985 15 19 15.4985 19 16.1134V19.8866C19 20.5015 19.4985 21 20.1134 21H22.8866C23.5015 21 24 20.5015 24 19.8866V16.1134C24 15.4985 23.5015 15 22.8866 15H20.1134ZM22.4483 16.4545H20.5517V19.5455H22.4483V16.4545ZM22.4483 17H24V19H22.4483V17Z\"\n        />\n      </svg>\n    </media-captions-button>\n\n    <!-- Settings Menu Button -->\n    <style>\n      media-settings-menu-button svg {\n        transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);\n        transform: rotateZ(0deg);\n      }\n      media-settings-menu-button[aria-expanded='true'] svg {\n        transform: rotateZ(30deg);\n      }\n    </style>\n    <media-settings-menu-button class=\"yt-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <use class=\"svg-shadow\" xlink:href=\"#settings-icon\"></use>\n        <path\n          id=\"settings-icon\"\n          d=\"M11.8153 12.0477L14.2235 12.9602C14.6231 12.6567 15.0599 12.3996 15.5258 12.1971L15.9379 9.66561C16.5985 9.50273 17.2891 9.41632 18 9.41632C18.7109 9.41632 19.4016 9.50275 20.0622 9.66566L20.4676 12.1555C20.9584 12.3591 21.418 12.6227 21.8372 12.9372L24.1846 12.0477C25.1391 13.0392 25.8574 14.2597 26.249 15.6186L24.3196 17.1948C24.3531 17.4585 24.3704 17.7272 24.3704 18C24.3704 18.2727 24.3531 18.5415 24.3196 18.8051L26.249 20.3814C25.8574 21.7403 25.1391 22.9607 24.1846 23.9522L21.8372 23.0628C21.4179 23.3772 20.9584 23.6408 20.4676 23.8445L20.0622 26.3343C19.4016 26.4972 18.7109 26.5836 18 26.5836C17.2891 26.5836 16.5985 26.4972 15.9379 26.3344L15.5258 23.8029C15.0599 23.6003 14.6231 23.3433 14.2236 23.0398L11.8154 23.9523C10.8609 22.9608 10.1426 21.7404 9.75098 20.3815L11.7633 18.7375C11.7352 18.4955 11.7208 18.2495 11.7208 18C11.7208 17.7505 11.7352 17.5044 11.7633 17.2625L9.75098 15.6185C10.1426 14.2596 10.8609 13.0392 11.8153 12.0477ZM18 20.75C19.5188 20.75 20.75 19.5188 20.75 18C20.75 16.4812 19.5188 15.25 18 15.25C16.4812 15.25 15.25 16.4812 15.25 18C15.25 19.5188 16.4812 20.75 18 20.75Z\"\n        />\n      </svg>\n    </media-settings-menu-button>\n\n    <!-- PIP/Mini Player Button -->\n    <media-pip-button class=\"yt-button\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <use class=\"svg-shadow\" xlink:href=\"#pip-icon\"></use>\n        <path d=\"M25 17H17V23H25V17Z\" />\n        <path\n          id=\"pip-icon\"\n          d=\"M7 11C7 9.89543 7.89545 9 9 9H27.0161C28.1207 9 29.0161 9.89543 29.0161 11V24.8837C29.0161 25.9883 28.1207 26.8837 27.0162 26.8837H9C7.89545 26.8837 7 25.9883 7 24.8837V11ZM9 11H27V25H9V11Z\"\n        />\n      </svg>\n    </media-pip-button>\n\n    <!-- Fullscreen Button -->\n    <style>\n      /* Having trouble getting @property to work in the shadow dom\n         to clean this up. Like https://codepen.io/luwes/pen/oNRyZyx */\n\n      media-fullscreen-button path {\n        translate: 0% 0%;\n      }\n      media-fullscreen-button:hover path {\n        animation: 0.35s up-left-bounce cubic-bezier(0.34, 1.56, 0.64, 1);\n      }\n      media-fullscreen-button:hover .urbounce {\n        animation-name: up-right-bounce;\n      }\n      media-fullscreen-button:hover .dlbounce {\n        animation-name: down-left-bounce;\n      }\n      media-fullscreen-button:hover .drbounce {\n        animation-name: down-right-bounce;\n      }\n\n      @keyframes up-left-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: -4% -4%;\n        }\n      }\n      @keyframes up-right-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: 4% -4%;\n        }\n      }\n      @keyframes down-left-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: -4% 4%;\n        }\n      }\n      @keyframes down-right-bounce {\n        0% {\n          translate: 0 0;\n        }\n        50% {\n          translate: 4% 4%;\n        }\n      }\n    </style>\n    <media-fullscreen-button class=\"yt-button\">\n      <svg slot=\"enter\" viewBox=\"0 0 36 36\">\n        <use class=\"svg-shadow\" xlink:href=\"#fs-enter-paths\"></use>\n        <g id=\"fs-enter-paths\">\n          <path class=\"ulbounce\" d=\"M11 15H9V9H15V11H11V15Z\" />\n          <path class=\"urbounce\" d=\"M21 11L21 9L27 9L27 15L25 15L25 11L21 11Z\" />\n          <path class=\"dlbounce\" d=\"M15 25L15 27L9 27L9 21L11 21L11 25L15 25Z\" />\n          <path class=\"drbounce\" d=\"M25 21L27 21L27 27L21 27L21 25L25 25L25 21Z\" />\n        </g>\n      </svg>\n      <svg slot=\"exit\" viewBox=\"0 0 36 36\">\n        <use class=\"svg-shadow\" xlink:href=\"#fs-exit-paths\"></use>\n        <g id=\"fs-exit-paths\">\n          <path class=\"drbounce\" d=\"M14 9L16 9L16 16L9 16L9 14L14 14L14 9Z\" />\n          <path class=\"dlbounce\" d=\"M27 14L27 16L20 16L20 9L22 9L22 14L27 14Z\" />\n          <path class=\"urbounce\" d=\"M9 22L9 20L16 20L16 27L14 27L14 22L9 22Z\" />\n          <path class=\"ulbounce\" d=\"M22 27H20V20H27V22H22V27Z\" />\n        </g>\n      </svg>\n    </media-fullscreen-button>\n  </media-control-bar>\n\n  <style>\n    media-controller[mediacurrenttime^='0'] .desktop-centered-animation svg {\n      display: none !important;\n      animation-name: none !important;\n      opacity: 0 !important;\n    }\n\n    @media (width <= 768px) {\n      .desktop-centered-animation {\n        display: none;\n      }\n    }\n\n    .desktop-centered-animation media-play-button {\n      width: 48px;\n      height: 48px;\n      position: relative;\n    }\n\n    .desktop-centered-animation media-play-button > svg {\n      width: 3rem;\n      height: 3rem;\n      opacity: 0;\n      transform: scale(1);\n      pointer-events: none;\n      display: none;\n      animation: none !important;\n    }\n\n    media-controller:not([mediacurrenttime^='0']) .desktop-centered-animation media-play-button > svg[slot='play'],\n    media-controller:not([mediacurrenttime^='0']) .desktop-centered-animation media-play-button > svg[slot='pause'] {\n      display: block;\n      animation: fadeScale 1s ease-out forwards;\n    }\n\n    @keyframes fadeScale {\n      0% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: scale(2);\n      }\n    }\n\n    .mobile-centered-controls {\n      display: flex;\n      align-self: stretch;\n      align-items: center;\n      flex-flow: row nowrap;\n      justify-content: center;\n      margin: -5% auto 0;\n      width: 100%;\n      gap: 1rem;\n    }\n\n    .mobile-centered-controls [role='button'] {\n      --media-icon-color: var(--media-primary-color, #fff);\n      background: rgba(0, 0, 0, 0.5);\n      --media-button-icon-width: 36px;\n      --media-button-icon-height: 36px;\n      border-radius: 50%;\n      user-select: none;\n      aspect-ratio: 1;\n    }\n\n    .mobile-centered-controls media-play-button {\n      width: 5rem;\n    }\n\n    .mobile-centered-controls :is(media-seek-backward-button, media-seek-forward-button) {\n      width: 3rem;\n      padding: 0.5rem;\n    }\n\n    @media (width >= 768px) {\n      .mobile-centered-controls {\n        display: none;\n      }\n    }\n  </style>\n\n  <div class=\"mobile-centered-controls\" slot=\"centered-chrome\">\n    <media-seek-backward-button></media-seek-backward-button>\n    <media-play-button></media-play-button>\n    <media-seek-forward-button></media-seek-forward-button>\n  </div>\n\n  <div class=\"desktop-centered-animation\" slot=\"centered-chrome\">\n    <media-play-button>\n      <svg slot=\"pause\" width=\"41\" height=\"41\" viewBox=\"0 0 41 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"20.5\" cy=\"20.5\" r=\"20.5\" fill=\"black\" fill-opacity=\"0.8\" />\n        <path d=\"M28 20.5L16 27.8612L16 13.1388L28 20.5Z\" fill=\"#D9D9D9\" />\n      </svg>\n\n      <svg slot=\"play\" width=\"41\" height=\"41\" viewBox=\"0 0 41 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"20.5\" cy=\"20.5\" r=\"20.5\" fill=\"black\" fill-opacity=\"0.8\" />\n        <path d=\"M17.7674 13H14V28.0698H17.7674V13Z\" fill=\"#D9D9D9\" />\n        <path d=\"M22.4768 13H26.2442V28.0698H22.4768V13Z\" fill=\"#D9D9D9\" />\n      </svg>\n    </media-play-button>\n  </div>\n</media-controller>\n"
  },
  {
    "path": "turbo.json",
    "content": "{\n  \"$schema\": \"https://turborepo.org/schema.json\",\n  \"extends\": [\"//\"],\n  \"ui\": \"stream\",\n  \"tasks\": {\n    \"i18n\": {},\n    \"clean\": {\n      \"cache\": false\n    },\n    \"lint\": {\n      \"outputs\": []\n    },\n    \"test\": {\n      \"outputs\": [\"coverage/**/*\"],\n      \"dependsOn\": [\"^build\"]\n    },\n    \"dev\": {\n      \"interactive\": false,\n      \"persistent\": true,\n      \"cache\": false,\n      \"dependsOn\": [\"^build\"]\n    },\n    \"build\": {\n      \"interactive\": false,\n      \"inputs\": [\n        \"$TURBO_DEFAULT$\",\n        \"!README.md\",\n        \"template.html\",\n        \"./**/*.js\",\n        \"./**/*.ts\",\n        \"./**/*.d.ts\"\n      ],\n      \"outputs\": [\"dist/**/*\", \".next/**/*\"],\n      \"dependsOn\": [\"^build\"]\n    }\n  }\n}\n"
  }
]