:root, .ttxroot {
  --ttxblack:   black;
  --ttxred:     red;
  --ttxgreen:   lime;
  --ttxyellow:  yellow;
  --ttxblue:    blue;
  --ttxmagenta: fuchsia;
  --ttxcyan:    aqua;
  --ttxwhite:   white;
  --ttxbackground: var(--ttxblack);
  --ttxc00: var(--ttxblack);
  --ttxc01: var(--ttxred);
  --ttxc02: var(--ttxgreen);
  --ttxc03: var(--ttxyellow);
  --ttxc04: var(--ttxblue);
  --ttxc05: var(--ttxmagenta);
  --ttxc06: var(--ttxcyan);
  --ttxc07: var(--ttxwhite);
  --ttxc10: var(--ttxbackground);
  --ttxc11: maroon;
  --ttxc12: green;
  --ttxc13: olive;
  --ttxc14: navy;
  --ttxc15: purple;
  --ttxc16: teal;
  --ttxc17: gray;
  --ttxc20: #FF0055;
  --ttxc21: #FF7700;
  --ttxc22: #00FF77;
  --ttxc23: #FFFFBB;
  --ttxc24: #00CCAA;
  --ttxc25: #550000;
  --ttxc26: #665522;
  --ttxc27: #CC7777;
  --ttxc30: #333333;
  --ttxc31: #FF7777;
  --ttxc32: #77FF77;
  --ttxc33: #FFFF77;
  --ttxc34: #7777FF;
  --ttxc35: #FF77FF;
  --ttxc36: #77FFFF;
  --ttxc37: #DDDDDD;

  --remote-panel-bg: rgba(36, 36, 36, 0.75);
  --remote-panel-border: rgba(68, 68, 68, 0.8);
  --remote-label: rgba(215, 215, 215, 0.9);
  --remote-button-bg: #3a3a3a;
  --remote-button-text: #d5d5d5;
  --remote-bevel-light: #5e5e5e;
  --remote-bevel-dark: #1c1c1c;
  --remote-button-active-bg: #2d2d2d;
  --remote-button-secondary-text: #a2a2a2;
  --remote-button-selected-secondary-text: #bcbcbc;
  --remote-button-led-background: #1a1a1a;

  font-family: "P298 Variable";
  color: var(--ttxwhite);
  background: var(--ttxbackground);
  margin: 0;
  padding: 0;
  vertical-align: top;

  font-synthesis: position;
}

body {
  margin: 0;
  padding: 0;
}

.vhspal {
  --ttxblack:   black;
  --ttxred:     #DD3828;
  --ttxgreen:   #0EBA16;
  --ttxyellow:  #F5D90F;
  --ttxblue:    #1E29D4;
  --ttxmagenta: #FC4CE7;
  --ttxcyan:    #2DD1EB;
  --ttxwhite:   #FDEBED;
}

.fgblack   { color: var(--ttxblack)   }
.fgred     { color: var(--ttxred)     }
.fggreen   { color: var(--ttxgreen)   }
.fgyellow  { color: var(--ttxyellow)  }
.fgblue    { color: var(--ttxblue)    }
.fgmagenta { color: var(--ttxmagenta) }
.fgcyan    { color: var(--ttxcyan)    }
.fgwhite   { color: var(--ttxwhite)   }
.bgblack   { background-color: var(--ttxblack);   color: var(--ttxblack);  }
.bgred     { background-color: var(--ttxred);     color: var(--ttxred);    }
.bggreen   { background-color: var(--ttxgreen);   color: var(--ttxgreen);  }
.bgyellow  { background-color: var(--ttxyellow);  color: var(--ttxyellow); }
.bgblue    { background-color: var(--ttxblue);    color: var(--ttxblue);   }
.bgmagenta { background-color: var(--ttxmagenta); color: var(--ttxmagenta);}
.bgcyan    { background-color: var(--ttxcyan);    color: var(--ttxcyan);   }
.bgwhite   { background-color: var(--ttxwhite);   color: var(--ttxwhite);  }
.l2bgenabled.pagebgblack   { background-color: var(--ttxblack)   }
.l2bgenabled.pagebgred     { background-color: var(--ttxred)     }
.l2bgenabled.pagebggreen   { background-color: var(--ttxgreen)   }
.l2bgenabled.pagebgyellow  { background-color: var(--ttxyellow)  }
.l2bgenabled.pagebgblue    { background-color: var(--ttxblue)    }
.l2bgenabled.pagebgmagenta { background-color: var(--ttxmagenta) }
.l2bgenabled.pagebgcyan    { background-color: var(--ttxcyan)    }
.l2bgenabled.pagebgwhite   { background-color: var(--ttxwhite)   }
.fgc00 { color: var(--ttxc00) }
.fgc01 { color: var(--ttxc01) }
.fgc02 { color: var(--ttxc02) }
.fgc03 { color: var(--ttxc03) }
.fgc04 { color: var(--ttxc04) }
.fgc05 { color: var(--ttxc05) }
.fgc06 { color: var(--ttxc06) }
.fgc07 { color: var(--ttxc07) }
.fgc10 { color: var(--ttxc10) }
.fgc11 { color: var(--ttxc11) }
.fgc12 { color: var(--ttxc12) }
.fgc13 { color: var(--ttxc13) }
.fgc14 { color: var(--ttxc14) }
.fgc15 { color: var(--ttxc15) }
.fgc16 { color: var(--ttxc16) }
.fgc17 { color: var(--ttxc17) }
.fgc20 { color: var(--ttxc20) }
.fgc21 { color: var(--ttxc21) }
.fgc22 { color: var(--ttxc22) }
.fgc23 { color: var(--ttxc23) }
.fgc24 { color: var(--ttxc24) }
.fgc25 { color: var(--ttxc25) }
.fgc26 { color: var(--ttxc26) }
.fgc27 { color: var(--ttxc27) }
.fgc30 { color: var(--ttxc30) }
.fgc31 { color: var(--ttxc31) }
.fgc32 { color: var(--ttxc32) }
.fgc33 { color: var(--ttxc33) }
.fgc34 { color: var(--ttxc34) }
.fgc35 { color: var(--ttxc35) }
.fgc36 { color: var(--ttxc36) }
.fgc37 { color: var(--ttxc37) }
.bgc00 { background-color: var(--ttxc00); color: var(--ttxc00); }
.bgc01 { background-color: var(--ttxc01); color: var(--ttxc01); }
.bgc02 { background-color: var(--ttxc02); color: var(--ttxc02); }
.bgc03 { background-color: var(--ttxc03); color: var(--ttxc03); }
.bgc04 { background-color: var(--ttxc04); color: var(--ttxc04); }
.bgc05 { background-color: var(--ttxc05); color: var(--ttxc05); }
.bgc06 { background-color: var(--ttxc06); color: var(--ttxc06); }
.bgc07 { background-color: var(--ttxc07); color: var(--ttxc07); }
.bgc00 { background-color: var(--ttxc00); color: var(--ttxc00); }
.bgc11 { background-color: var(--ttxc11); color: var(--ttxc11); }
.bgc12 { background-color: var(--ttxc12); color: var(--ttxc12); }
.bgc13 { background-color: var(--ttxc13); color: var(--ttxc13); }
.bgc14 { background-color: var(--ttxc14); color: var(--ttxc14); }
.bgc15 { background-color: var(--ttxc15); color: var(--ttxc15); }
.bgc16 { background-color: var(--ttxc16); color: var(--ttxc16); }
.bgc17 { background-color: var(--ttxc17); color: var(--ttxc17); }
.bgc20 { background-color: var(--ttxc20); color: var(--ttxc20); }
.bgc21 { background-color: var(--ttxc21); color: var(--ttxc21); }
.bgc22 { background-color: var(--ttxc22); color: var(--ttxc22); }
.bgc23 { background-color: var(--ttxc23); color: var(--ttxc23); }
.bgc24 { background-color: var(--ttxc24); color: var(--ttxc24); }
.bgc25 { background-color: var(--ttxc25); color: var(--ttxc25); }
.bgc26 { background-color: var(--ttxc26); color: var(--ttxc26); }
.bgc27 { background-color: var(--ttxc27); color: var(--ttxc27); }
.bgc30 { background-color: var(--ttxc30); color: var(--ttxc30); }
.bgc31 { background-color: var(--ttxc31); color: var(--ttxc31); }
.bgc32 { background-color: var(--ttxc32); color: var(--ttxc32); }
.bgc33 { background-color: var(--ttxc33); color: var(--ttxc33); }
.bgc34 { background-color: var(--ttxc34); color: var(--ttxc34); }
.bgc35 { background-color: var(--ttxc35); color: var(--ttxc35); }
.bgc36 { background-color: var(--ttxc36); color: var(--ttxc36); }
.bgc37 { background-color: var(--ttxc37); color: var(--ttxc37); }
.l2bgenabled.pagebgc00 { background-color: var(--ttxc00) }
.l2bgenabled.pagebgc01 { background-color: var(--ttxc01) }
.l2bgenabled.pagebgc02 { background-color: var(--ttxc02) }
.l2bgenabled.pagebgc03 { background-color: var(--ttxc03) }
.l2bgenabled.pagebgc04 { background-color: var(--ttxc04) }
.l2bgenabled.pagebgc05 { background-color: var(--ttxc05) }
.l2bgenabled.pagebgc06 { background-color: var(--ttxc06) }
.l2bgenabled.pagebgc07 { background-color: var(--ttxc07) }
.l2bgenabled.pagebgc10 { background-color: var(--ttxc10) }
.l2bgenabled.pagebgc11 { background-color: var(--ttxc11) }
.l2bgenabled.pagebgc12 { background-color: var(--ttxc12) }
.l2bgenabled.pagebgc13 { background-color: var(--ttxc13) }
.l2bgenabled.pagebgc14 { background-color: var(--ttxc14) }
.l2bgenabled.pagebgc15 { background-color: var(--ttxc15) }
.l2bgenabled.pagebgc16 { background-color: var(--ttxc16) }
.l2bgenabled.pagebgc17 { background-color: var(--ttxc17) }
.l2bgenabled.pagebgc20 { background-color: var(--ttxc20) }
.l2bgenabled.pagebgc21 { background-color: var(--ttxc21) }
.l2bgenabled.pagebgc22 { background-color: var(--ttxc22) }
.l2bgenabled.pagebgc23 { background-color: var(--ttxc23) }
.l2bgenabled.pagebgc24 { background-color: var(--ttxc24) }
.l2bgenabled.pagebgc25 { background-color: var(--ttxc25) }
.l2bgenabled.pagebgc26 { background-color: var(--ttxc26) }
.l2bgenabled.pagebgc07 { background-color: var(--ttxc07) }
.l2bgenabled.pagebgc30 { background-color: var(--ttxc30) }
.l2bgenabled.pagebgc31 { background-color: var(--ttxc31) }
.l2bgenabled.pagebgc32 { background-color: var(--ttxc32) }
.l2bgenabled.pagebgc33 { background-color: var(--ttxc33) }
.l2bgenabled.pagebgc34 { background-color: var(--ttxc34) }
.l2bgenabled.pagebgc35 { background-color: var(--ttxc35) }
.l2bgenabled.pagebgc36 { background-color: var(--ttxc36) }
.l2bgenabled.pagebgc37 { background-color: var(--ttxc37) }

button {
  background-color: var(--remote-button-bg);
  color: var(--remote-button-text);
  border: 2px solid;
  border-top-color: var(--remote-bevel-light);
  border-left-color: var(--remote-bevel-light);
  border-right-color: var(--remote-bevel-dark);
  border-bottom-color: var(--remote-bevel-dark);
  font-family: inherit;
  padding: 4px 7px;
  margin: 0 5px 5px 0;
}
button:active {
  border-top-color: var(--remote-bevel-dark);
  border-left-color: var(--remote-bevel-dark);
  border-right-color: var(--remote-bevel-light);
  border-bottom-color: var(--remote-bevel-light);
  background-color: var(--remote-button-active-bg);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

@media (pointer: coarse) {
  input[type="range"] {
    height: 28px;
  }
}
input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: var(--remote-button-active-bg);
  box-shadow: inset 1px 1px 0 var(--remote-bevel-dark),
              inset -1px -1px 0 var(--remote-bevel-light);
}
input[type="range"]::-moz-range-track {
  height: 10px;
  background: var(--remote-button-active-bg);
  box-shadow: inset 1px 1px 0 var(--remote-bevel-dark),
              inset -1px -1px 0 var(--remote-bevel-light);
}
input[type="range"]::-moz-range-progress {
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 20px;
  margin-top: -5px;
  background: var(--remote-button-bg);
  box-shadow: inset 1.5px 1.5px 0 var(--remote-bevel-light),
              inset -1.5px -1.5px 0 var(--remote-bevel-dark);
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: var(--remote-button-bg);
  box-shadow: inset 1.5px 1.5px 0 var(--remote-bevel-light),
              inset -1.5px -1.5px 0 var(--remote-bevel-dark);
}

em, i {
  font-style: oblique 8deg;
}

/* Safari is the worst */

_::-webkit-full-page-media, _:future,
:root, button {
  font-variation-settings: "slnt" 0;
}

_::-webkit-full-page-media, _:future,
em, i {
  font-variation-settings: "slnt" -8;
}

@media not all and (min-resolution:.001dpcm) { @media {
  :root, button {
    font-variation-settings: "slnt" 0;
  }
  em, i {
    font-variation-settings: "slnt" -8;
  }
}}