.asciinema-player-theme-koda {
  /* Foreground (default text) color */
  --term-color-foreground: var(--theme-foreground);

  /* Background color */
  --term-color-background: var(--theme-background-alt);

  /* Palette of 16 standard ANSI colors */
  --term-color-0:  var(--theme-light, var(--t-gray-8)) var(--theme-dark,  var(--t-gray-1));
  --term-color-1:  var(--theme-light, var(--t-red-6)) var(--theme-dark,  var(--t-red-3));
  --term-color-2:  var(--theme-light, var(--t-green-6)) var(--theme-dark,  var(--t-green-3));
  --term-color-3:  var(--theme-light, var(--t-yellow-6)) var(--theme-dark,  var(--t-yellow-3));
  --term-color-4:  var(--theme-light, var(--t-blue-6)) var(--theme-dark,  var(--t-blue-3));
  --term-color-5:  var(--theme-light, var(--t-purple-6)) var(--theme-dark,  var(--t-purple-3));
  --term-color-6:  var(--theme-light, var(--t-cyan-6)) var(--theme-dark,  var(--t-cyan-3));
  --term-color-7:  var(--theme-light, var(--t-gray-1)) var(--theme-dark,  var(--t-gray-8));

  --term-color-8:   var(--t-gray-5);
  --term-color-9:   var(--theme-light, var(--t-red-5)) var(--theme-dark,  var(--t-red-2));
  --term-color-10:  var(--theme-light, var(--t-green-5)) var(--theme-dark,  var(--t-green-2));
  --term-color-11:  var(--theme-light, var(--t-yellow-5)) var(--theme-dark,  var(--t-yellow-2));
  --term-color-12:  var(--theme-light, var(--t-blue-5)) var(--theme-dark,  var(--t-blue-2));
  --term-color-13:  var(--theme-light, var(--t-purple-5)) var(--theme-dark,  var(--t-purple-2));
  --term-color-14:  var(--theme-light, var(--t-cyan-5)) var(--theme-dark,  var(--t-cyan-2));
  --term-color-15:  var(--theme-light, var(--t-white)) var(--theme-dark,  var(--t-black));
}

.asciinema {
  position: relative;

  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  & pre {
    box-shadow: none;
  }
}

.ap-wrapper .asciinema-overlay {
  position: absolute;

  font-family: IosevkaCustom;

  display: flex;
  justify-content: center;
  width: 100%;

  & .keypresses {
    display: flex;
    justify-content: center;

    gap: 0.2rem;
  }

  & .keypresses .keypress {
    display: flex;
    align-items: center;

    & svg {
      height: 1em;
    }
  }
}

.ap-player .ap-overlay-start .ap-play-button svg {
  filter: var(--theme-light, drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4))) var(--theme-dark, brightness(.8) contrast(1.1));
}