<style>
  :host {
    --media-range-background: transparent;

    --media-range-track-height: 1px;
    --media-range-track-background: transparent;

    --media-preview-time-background: transparent;
    --media-preview-time-margin: 0;
    --media-preview-time-padding: 0;
    --media-tooltip-display: none;

    --_c-buttons-image: url('<%= await base64("./assets/CBUTTONS.png") %>');
    --_monoster-image: url('<%= await base64("./assets/MONOSTER.png") %>');

    image-rendering: pixelated;
  }

  media-time-range,
  media-time-range:active,
  media-time-range:hover {
    --media-range-thumb-width: 28px;
    --media-range-thumb-height: 10px;
    --media-range-thumb-border-radius: 0;
    --media-range-thumb-background: 58px 0 url('<%= await base64("./assets/POSBAR.png") %>');
  }

  media-volume-range,
  media-volume-range:active,
  media-volume-range:hover {
    --media-range-thumb-width: 14px;
    --media-range-thumb-height: 10px;
    --media-range-thumb-border-radius: 0;
    --media-range-thumb-background: 53px 443px url('<%= await base64("./assets/BALANCE.png") %>');
  }

  .wrapper {
    position: relative;
    width: 275px;
    height: 116px;
    background: url('<%= await base64("./assets/MAIN.png") %>');
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .controls {
    position: absolute;
    top: 88px;
    left: 16px;
    display: flex;
  }

  media-seek-backward-button {
    display: block;
    overflow: hidden;
    padding: 0;
    width: 23px;
    height: 18px;
  }

  media-seek-backward-button div[slot='icon'] {
    width: 23px;
    height: 18px;
    background: 136px 0 var(--_c-buttons-image);
  }

  media-seek-backward-button:active div[slot='icon'] {
    width: 23px;
    height: 18px;
    background: 136px 18px var(--_c-buttons-image);
  }

  media-play-button {
    display: block;
    overflow: hidden;
    padding: 0;
    width: 23px;
    height: 18px;
  }

  media-play-button.play div[slot='play'] {
    width: 23px;
    height: 18px;
    background: 114px 0 var(--_c-buttons-image);
  }

  media-play-button.play div[slot='pause'] {
    width: 23px;
    height: 18px;
    background: 114px 0 var(--_c-buttons-image);
  }

  media-play-button.play:active div[slot='play'] {
    width: 23px;
    height: 18px;
    background: 114px 18px var(--_c-buttons-image);
  }

  media-play-button.play:active div[slot='pause'] {
    width: 23px;
    height: 18px;
    background: 114px 18px var(--_c-buttons-image);
  }

  media-play-button.pause div[slot='pause'] {
    width: 23px;
    height: 18px;
    background: 91px 0 var(--_c-buttons-image);
  }

  media-play-button.pause div[slot='play'] {
    width: 23px;
    height: 18px;
    background: 91px 0 var(--_c-buttons-image);
  }

  media-play-button.pause:active div[slot='play'] {
    width: 23px;
    height: 18px;
    background: 91px 18px var(--_c-buttons-image);
  }

  media-play-button.pause:active div[slot='pause'] {
    width: 23px;
    height: 18px;
    background: 91px 18px var(--_c-buttons-image);
  }

  media-play-button.stop div[slot='pause'] {
    width: 23px;
    height: 18px;
    background: 68px 0 var(--_c-buttons-image);
  }

  media-play-button.stop div[slot='play'] {
    width: 23px;
    height: 18px;
    background: 68px 0 var(--_c-buttons-image);
  }

  media-play-button.stop:active div[slot='play'] {
    width: 23px;
    height: 18px;
    background: 68px 18px var(--_c-buttons-image);
  }

  media-play-button.stop:active div[slot='pause'] {
    width: 23px;
    height: 18px;
    background: 68px 18px var(--_c-buttons-image);
  }

  media-seek-forward-button {
    display: block;
    overflow: hidden;
    padding: 0;
    width: 23px;
    height: 18px;
  }

  media-seek-forward-button div[slot='icon'] {
    width: 23px;
    height: 18px;
    background: 45px 0 var(--_c-buttons-image);
  }

  media-seek-forward-button:active div[slot='icon'] {
    width: 23px;
    height: 18px;
    background: 45px 18px var(--_c-buttons-image);
  }

  media-fullscreen-button {
    display: block;
    overflow: hidden;
    padding: 0;
    margin-top: 1px;
    margin-left: 6px;
    width: 22px;
    height: 16px;
  }

  media-fullscreen-button div[slot='enter'] {
    width: 23px;
    height: 16px;
    background: 22px 0 var(--_c-buttons-image);
  }

  media-fullscreen-button:active div[slot='enter'] {
    width: 23px;
    height: 16px;
    background: 22px 20px var(--_c-buttons-image);
  }

  media-time-display {
    position: absolute;
    background: black;
    line-height: 20px;
    top: 23px;
    left: 61px;
    padding: 0;
    color: #00e201;
    letter-spacing: -0.04rem;
    font-family: 'winamp-numbers', monaco;
    font-size: 83%;
    font-smooth: never;
    -webkit-font-smoothing: none;
  }

  media-time-range {
    --media-range-bar-color: transparent;
    --media-time-range-buffered-color: transparent;
    position: absolute;
    top: 71px;
    left: 17px;
    background: transparent;
    height: 12px;
    width: 248px;
    padding: 0;
  }

  media-volume-range {
    --media-range-bar-color: transparent;
    position: absolute;
    top: 58px;
    left: 108px;
    background: 0 -2px url('<%= await base64("./assets/VOLUME.png") %>');
    height: 10px;
    width: 68px;
    padding: 0;
  }

  .balance {
    position: absolute;
    top: 58px;
    left: 177px;
    background: -9px -2px url('<%= await base64("./assets/BALANCE.png") %>');
    height: 10px;
    width: 37px;
    padding: 0;
  }

  .monoster {
    position: absolute;
    left: 215px;
    top: 40px;
    width: 50px;
    height: 15px;
    display: flex;
  }

  .monoster :first-child {
    width: 24px;
    height: 13px;
    background: 24px 13px var(--_monoster-image);
  }

  .monoster :last-child {
    width: 26px;
    height: 13px;
    background: 0px 25px var(--_monoster-image);
  }

  marquee {
    position: absolute;
    left: 111px;
    top: 27px;
    width: 153px;
    letter-spacing: 0.02rem;
    font-family: winamp, monaco;
    font-size: 6px;
    line-height: 1;
    color: #00e201;
    font-smooth: never;
    -webkit-font-smoothing: none;
    text-transform: uppercase;
  }

  .kbps {
    position: absolute;
    left: 111px;
    top: 43px;
    width: 153px;
    letter-spacing: 0.02rem;
    font-family: winamp, monaco;
    font-size: 6px;
    line-height: 1;
    color: #00e201;
    font-smooth: never;
    -webkit-font-smoothing: none;
  }

  .khz {
    position: absolute;
    left: 156px;
    top: 43px;
    width: 153px;
    letter-spacing: 0.02rem;
    font-family: winamp, monaco;
    font-size: 6px;
    line-height: 1;
    color: #00e201;
    font-smooth: never;
    -webkit-font-smoothing: none;
  }

  media-play-button.play-pause-indicator {
    display: block;
    overflow: hidden;
    background: none;
    position: absolute;
    top: 28px;
    left: 24px;
    padding: 0;
    width: 9px;
    height: 9px;
  }

  media-play-button.play-pause-indicator div[slot='play'] {
    width: 9px;
    height: 9px;
    background: 0 0 url('<%= await base64("./assets/STOP.png") %>');
  }

  media-play-button.play-pause-indicator div[slot='pause'] {
    width: 9px;
    height: 9px;
    background: 0 0 url('<%= await base64("./assets/PLAY.png") %>');
  }

  media-play-button.vu-meter {
    display: block;
    overflow: hidden;
    background: none;
    position: absolute;
    top: 40px;
    left: 20px;
    padding: 0;
    width: 88px;
    height: 22px;
  }

  media-play-button.vu-meter div[slot='play'] {
    width: 88px;
    height: 22px;
    background: none;
  }

  media-play-button.vu-meter div[slot='pause'] {
    width: 88px;
    height: 22px;
    background: 0 0 url('<%= await base64("./assets/VU.gif") %>');
  }

  .display {
    position: absolute;
    left: 10px;
    top: 22px;
  }

  .eq {
    position: absolute;
    left: 220px;
    top: 57px;
    width: 22px;
    height: 12px;
    background: 0 0 url('<%= await base64("./assets/EQ.png") %>');
  }

  .pl {
    position: absolute;
    left: 243px;
    top: 57px;
    width: 22px;
    height: 12px;
    background: 0 0 url('<%= await base64("./assets/PL.png") %>');
  }

  .loop {
    position: absolute;
    left: 211px;
    top: 89px;
    width: 28px;
    height: 14px;
    background: 0 0 url('<%= await base64("./assets/LOOP.png") %>');
  }

  media-captions-button {
    position: absolute;
    left: 165px;
    top: 89px;
    width: 46px;
    height: 14px;
    padding: 0;
    overflow: hidden;
  }

  media-captions-button div[slot='on'] {
    width: 46px;
    height: 14px;
    background: 0 0 url('<%= await base64("./assets/SHUFFLE.png") %>') no-repeat;
  }

  media-captions-button div[slot='off'] {
    width: 46px;
    height: 14px;
    background: 0 0 url('<%= await base64("./assets/SHUFFLE.png") %>') no-repeat;
  }

  .container {
    width: 275px;
    margin: 0 auto;
    display: flex;
    flex-flow: column-reverse wrap;
  }

  .window {
    width: 275px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .window .top,
  .window .bottom {
    width: 100%;
    height: 20px;
    flex: none;
    display: flex;
    flex: none;
  }

  .window .top :nth-child(1) {
    width: 25px;
    height: 20px;
    flex: none;
    background-image: url('<%= await base64("./assets/WINDOWTL.png") %>');
  }

  .window .top :nth-child(2) {
    height: 20px;
    width: 100%;
    flex-grow: 1;
    background-image: url('<%= await base64("./assets/WINDOWT.png") %>');
    background-repeat: no-repeat;
  }

  .window .top :nth-child(3) {
    width: 25px;
    height: 20px;
    flex: none;
    background-image: url('<%= await base64("./assets/WINDOWTR.png") %>');
  }

  .window .bottom :nth-child(1) {
    width: 125px;
    height: 14px;
    flex: none;
    background-image: url('<%= await base64("./assets/WINDOWBL.png") %>');
  }

  .window .bottom :nth-child(2) {
    height: 14px;
    width: 100%;
    flex-grow: 1;
    background-image: url('<%= await base64("./assets/WINDOWB.png") %>');
    background-repeat: no-repeat;
  }

  .window .bottom :nth-child(3) {
    width: 125px;
    height: 14px;
    flex: none;
    background-image: url('<%= await base64("./assets/WINDOWBR.png") %>');
  }

  .window .center {
    width: 100%;
    height: 108px;
    display: flex;
  }

  .window .center .center-left {
    width: 11px;
    height: 100%;
    flex: none;
    background-image: url('<%= await base64("./assets/WINDOWL.png") %>');
    background-repeat: no-repeat;
    background-position: 0 0;
  }

  .window .center .center-middle {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    overflow: hidden;
  }

  .window .center .center-middle media-controller {
    display: block;
    width: 100%;
    height: 100%;
    background: black;
  }

  .window .center .center-right {
    width: 8px;
    height: 100%;
    flex: none;
    background-image: url('<%= await base64("./assets/WINDOWR.png") %>');
  }
</style>

<div class="container">
  <div class="window">
    <div class="top">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="center">
      <div class="center-left"></div>
      <div class="center-middle">
        <div style="width: 100%; height: 100%; background: green">
          <media-controller id="controller">
            <slot name="media" slot="media"></slot>
            <slot name="poster" slot="poster"></slot>
          </media-controller>
        </div>
      </div>
      <div class="center-right"></div>
    </div>
    <div class="bottom">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="wrapper">
    <div class="controls">
      <media-seek-backward-button mediacontroller="controller">
        <div slot="icon"></div>
      </media-seek-backward-button>
      <media-play-button class="play" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>
      <media-play-button class="pause" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>
      <media-play-button class="stop" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>
      <media-seek-forward-button mediacontroller="controller">
        <div slot="icon"></div>
      </media-seek-forward-button>
      <media-fullscreen-button mediacontroller="controller">
        <div slot="enter"></div>
      </media-fullscreen-button>
    </div>
    <media-time-display mediacontroller="controller"></media-time-display>
    <media-time-range mediacontroller="controller">
      <div slot="preview"></div>
    </media-time-range>
    <media-volume-range mediacontroller="controller"></media-volume-range>
    <img class="header" src="<%= await base64('./assets/HEADER.png') %>" />
    <img class="display" src="<%= await base64('./assets/DISPLAY.png') %>" />
    <div class="eq"></div>
    <div class="pl"></div>
    <div class="loop"></div>
    <media-captions-button mediacontroller="controller">
      <div slot="on"></div>
      <div slot="off"></div>
    </media-captions-button>
    <div class="balance"></div>
    <div class="monoster">
      <div></div>
      <div></div>
    </div>
    <marquee scrolldelay="200">Media Chrome, it really whips the llama's ass!</marquee>
    <div class="kbps">192</div>
    <div class="khz">44</div>
    <media-play-button mediacontroller="controller" class="play-pause-indicator">
      <div slot="play"></div>
      <div slot="pause"></div>
    </media-play-button>
    <media-play-button mediacontroller="controller" class="vu-meter">
      <div slot="play"></div>
      <div slot="pause"></div>
    </media-play-button>
  </div>
</div>
