.videocontainer {
  background-color: black;
  border: var(--foreground) 1px solid;
  cursor: default;
  display: flex;
  font-family: "Franklin Sub";
  font-weight: bold;
  font-size: .9rem;
  overflow: hidden;
  position: relative;
}
.videocontainer.is-loading .backdrop {
  background-color: #2228;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.videocontainer.is-loading::after {
  align-self: center;
  animation: spin 2s ease infinite;
  border: 3px solid var(--foreground);
  border-radius: 50%;
  border-top: none;
  border-right: none;
  content: "";
  justify-self: center;
  position: absolute;
  inset: 0;
  width: 2.5em;
  height: 2.5em;
  z-index: 10;
}
@media (max-width: 45em) {
  .videocontainer {
    margin-inline: -1em;
  }
}

.chapters {
  cursor: pointer;
  display: none;
  letter-spacing: .3em;
  position: absolute;
  text-shadow: 3px 1px 1px rgba(0, 0, 0, 1);
  top: 0;
  right: 1em;
  text-align: right;
  z-index: 10;
}
.chapters svg {
  width: 3em;
  height: auto;
}
.chapters:hover svg :where(.chapters__graphic-2, .chapters__graphic-3) {
  fill: var(--badge-02);
}
.chapters__graphic-1 {
  fill: #241A2D;
}
.chapters__graphic-1, .chapters__graphic-2 {
  stroke-width: 0px;
}
.chapters__graphic-2 {
  fill: #DCC38D;
}
.chapters__graphic-3 {
  fill: #DCC38D;
  font-size: 6pt;
  letter-spacing: 0;
}

#chapters-list {
  background-color: #241A2D;
  color: #DCC38D;
  font-size: 1.2rem;
  letter-spacing: initial;
  overflow: hidden;
  text-shadow: initial;
  transition: all 250ms linear;
  visibility: hidden;
  height: 0;
}
#chapters-list.show {
  visibility: visible;
}
#chapters-list > div {
  padding: .4em 1em;
}
#chapters-list > div:hover {
  color: var(--foreground);
}
#chapters-list > div span {
  display: table-cell;
}
#chapters-list > div span + span {
  padding-left: .5em;
}
#chapters-list > div span:nth-child(2) {
  cursor: pointer;
}

video {
  align-self: center;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.progress-bar {
  background-color: #444;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 7px;
}
.loop-section {
  background-color: var(--badge-02);
  mix-blend-mode: exclusion;
  position: absolute;
  top: 0;
  height: inherit;
}
.handle {
  background-color: var(--foreground);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
  opacity: 0;
  position: absolute;
  top: -.3em;
  left: -.4em;
  visibility: hidden;
  width: .8em;
  height: 1em;
}
.progress-bar:hover .handle {
  opacity: 1 !important;
  visibility: visible !important;
}
.progress {
  background-color: #DCC38D;
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
}
.tooltip {
  background-color: #27192EDD;
  border-radius: 4px;
  color: #DCC38D;
  display: none;
  padding: .5em;
  position: absolute;
  bottom: 1.1em;
  left: 0;
}
.tooltip::after {
  border: 7px solid;
  border-color: #241A2D transparent transparent;
  content: "";
  position: absolute;
  bottom: -1.9em;
  left: .5em;
  height: 1em;
}

.videocontrols {
  background-color: #27192EDD;
  color: #DCC38D;
  padding: 0 .5em;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(0);
  transition: all 200ms linear;
  visibility: visible;
  width: 100%;
}
.videocontrols *::selection {
  background-color: transparent;
}
.videocontrols.hidden {
  opacity: 0;
  transform: translateY(100%);
  transition: all 200ms linear;
  visibility: hidden;
  width: 100%;
}
.videocontrols p {
  margin: 0;
}

.board {
  align-items: center;
  display: flex;
  height: 3em;
}
.board > * + *:not(.skip-next) {
  margin-left: 1em;
}
.board .time-display {
  align-items: center;
  display: flex;
  gap: .2em;
  margin-left: 1.75em;
}

.playbutton {
  cursor: pointer;
  flex-grow: 0;
}
.playbutton.paused .playbutton__pause,
.playbutton .playbutton__play {
  display: none;
}
.playbutton .playbutton__pause,
.playbutton.paused .playbutton__play {
  display: block;
}
.playbutton svg {
  fill: #DCC38D;
  width: auto;
  height: 3em;
}
.playbutton:hover svg {
  fill: var(--badge-02);
}

.board .skip-next {
  cursor: pointer;
  display: none;
}
.board .skip-next svg {
  fill: #DCC38D;
  width: auto;
  height: 3em;
}
.board .skip-next:hover svg {
  fill: var(--badge-02);
}

.volume-control__graphic-1 {
  stroke: #DBC28C;
  stroke-width: .75px;
}
.volume-control__graphic-1, .volume-control__graphic-2 {
  fill: none;
  stroke-miterlimit: 10;
}
.volume-control__graphic-2 {
  stroke: #241A2D;
}
.volume-control__graphic-3 {
  fill: #241A2D;
}
.volume-control__graphic-3, .volume-control__graphic-4 {
  stroke-width: 0px;
}
.volume-control__graphic-4 {
  fill: #DBC28C;
}
#poti {
  width: auto;
  height: 2em;
}
#poti.muted .volume-control__graphic-4 {
  fill: #DBC28C55 !important;
}
.volume-control:hover .vol-knob .volume-control__graphic-2 {
  fill: var(--badge-02);
}
@media (max-width: 67.5em) {
  #poti {
    display: none;
  }
}

.right {
  justify-content: flex-end;
  display: flex;
  flex-grow: 1;
  gap: 1.5em;
  margin-right: 1em;
}
.right > * + * {
  margin-left: 1em;
}

#error {
  color: orange;
  font-size: .75rem;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 45em) {
  #error {
    display: none;
  }
}

@keyframes blink {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

#error.blink {
  animation: blink 600ms linear;
  animation-iteration-count: infinite;
}

.speed-control {
  column-gap: .5em;
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  position: relative;
}
.speed-control:hover .speed-control__graphic-1 {
  fill: var(--badge-02);
}
.speed-control svg {
  align-self: center;
  grid-row-start: 1;
  grid-row-end: 3;
  width: auto;
  height: 1.8em;
}
@media (orientation: portrait) and (max-width: 45em) {
  .speed-control svg {
    visibility: hidden;
  }
}
.speed-control__graphic-1 {
  fill: #DCC38D;
  stroke-width: 0px;
}
.speed-display {
  color: var(--badge-02);
}
.speed-control div {
  background-color: #27192EDD;
  opacity: 0;
  padding-inline: .5em;
  position: absolute;
  bottom: 5.3em;
  left: 0;
  transform: rotate(270deg);
  transition: all 500ms ease-out;
  visibility: hidden;
  width: 8em;
}
.speed-control:is(:hover) .slider,
.speed-control .slider.is-visible {
  opacity: 1;
  visibility: visible;
}
.speed-control input[type=range] {
  appearance: none;
  background-color: transparent;
  margin: .25em 0;
  width: 100%;
  height: 3em;
}
.speed-control input[type=range]:focus {
  outline: none;
}
.speed-control input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--badge-02);
  border: .1em solid var(--badge-02);
  cursor: pointer;
  width: 100%;
  height: .25em;
}
.speed-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--badge-02);
  border-radius: 0;
  box-shadow: 1px 1px 2px var(--main);
  cursor: pointer;
  margin-top: -1em;
  width: .5em;
  height: 2em;
}
.speed-control input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: var(--badge-02);
}
.speed-control input[type=range]::-moz-range-track {
  background-color: var(--badge-02);
  border: .1em solid var(--badge-02);
  cursor: pointer;
  width: 100%;
  height: .25em;
}
.speed-control input[type=range]::-moz-range-thumb {
  background-color: var(--badge-02);
  border-radius: 0;
  box-shadow: 1px 1px 2px var(--main);
  cursor: pointer;
  width: .5em;
  height: 2em;
}
.speed-control input[type=range]::-ms-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
  cursor: pointer;
  width: 100%;
  height: .25em;
}
.speed-control input[type=range]::-ms-fill-lower {
  background-color: var(--badge-02);
  border: 2px solid var(--badge-02);
}
.speed-control input[type=range]::-ms-fill-upper {
  background-color: var(--badge-02);
  border: 2px solid var(--badge-02);
}
.speed-control input[type=range]::-ms-thumb {
  background-color: var(--badge-02);
  box-shadow: 1px 1px 2px var(--main);
  cursor: pointer;
  margin-top: 1px;
  width: .5em;
  height: 2em;
}
.speed-control input[type=range]:focus::-ms-fill-lower {
  background-color: var(--badge-02);
}
.speed-control input[type=range]:focus::-ms-fill-upper {
  background-color: var(--badge-02);
}

.looper {
  display: flex;
  gap: 1.2em;
}
@media ((orientation: portrait) and (max-width: 45em)) or ((min-width: 68em) and (max-width: 80em)) {
  .looper {
    display: none;
  }
}
.looper button {
  background-color: transparent;
  border: none;
  padding: 0;
}
.looper :is(.set-a, .set-b) {
  color: #dbc28c;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: "Franklin Sub", sans-serif;
  font-size: .9rem;
}
.looper :where(.set-a, .set-b, .active) {
  color: white;
}
.looper :where(button.is-set, .is-looping) {
  color: green;
}
.looper .inactive {
  filter: contrast(.2) brightness(.6);
}

.loop {
  cursor: pointer;
}
.loop.off .loop__graphic-1 {
  fill: #444;
}
.loop:hover:not(.inactive) :where(.loop__graphic-1, .loop__graphic-2) {
  fill: var(--badge-02);
}
.loop svg {
  transform: translateX(.25em);
  width: auto;
  height: 2.2em;
}
.loop__graphic-1 {
  font-family: "Franklin Sub", sans-serif;
  font-size: .65rem;
}
.loop__graphic-1, .loop__graphic-2 {
  fill: #DBC28C;
}
.loop__graphic-2 {
  stroke-width: 0px;
}

.save {
  cursor: pointer;
}
.save:hover:not(.inactive) .save__graphic-1 {
  fill: var(--badge-02);
}
.save svg {
  width: auto;
  height: 1.3em;
}
.save__graphic-1 {
  fill: #DBC28C;
  stroke-width: 0px;
}

.clear {
  cursor: pointer;
}
.clear:hover:not(.inactive) .clear__graphic-1 {
  fill: var(--badge-02);
}
.clear svg {
  width: auto;
  height: 1.6em;
}
.clear__graphic-1 {
  fill: #DBC28C;
  stroke-width: 0px;
}

.fullscreen {
  align-self: center;
  cursor: pointer;
}
.fullscreen .fullscreen__close-full,
.fullscreen.is-full .fullscreen__open-full {
  display: none;
}
.fullscreen .fullscreen__open-full,
.fullscreen.is-full .fullscreen__close-full {
  display: block;
}
.fullscreen__graphic-1 {
  fill: #DBC28C;
  stroke-width: 0px;
}
.fullscreen svg {
  width: auto;
  height: 1.5em;
}
.fullscreen:hover svg :where(.fullscreen__graphic-1) {
  fill: var(--badge-02);
}