@font-face {
  font-family: "TiVo";
  src: url("/assets/fonts/FranklinGothicLight.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --screen-scale: 1;
  --screen-width: 640px;
  --safe-left: 0px;
  --tivo-fly-duration: 900ms;
  color-scheme: dark;
}

.is-wide {
  --screen-width: 853px;
  --safe-left: 48px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

html {
  view-transition-name: none;
}

body {
  font-family: "TiVo", "Arial Narrow", sans-serif;
  user-select: none;
}

button {
  font: inherit;
}

.viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.tivo-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--screen-width);
  height: 480px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--screen-scale));
  transform-origin: center;
  background: #120400;
  color: #d8d6d3;
  view-transition-name: tivo-screen;
}

.is-tivo-booting .tivo-screen {
  visibility: hidden;
}

.widescreen-matte {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.widescreen-matte img {
  display: block;
  width: 100%;
  height: 100%;
}

.is-wide .widescreen-matte {
  display: block;
}

.is-wide .video-plate {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 128px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 128px),
    transparent 100%
  );
}

.matte-submenu,
.matte-green {
  opacity: 0;
}

.tivo-screen.is-submenu .matte-central {
  opacity: 0;
}

.tivo-screen.is-submenu:not(.is-green) .matte-submenu,
.tivo-screen.is-green .matte-green {
  opacity: 1;
}

.video-plate {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--safe-left);
  display: block;
  width: 640px;
  height: 480px;
  object-fit: fill;
  pointer-events: none;
}

.loop-central {
  opacity: 1;
}

.loop-submenu,
.loop-green {
  opacity: 0;
}

.tivo-screen.is-submenu .loop-central {
  opacity: 0;
}

.tivo-screen.is-submenu:not(.is-green) .loop-submenu,
.tivo-screen.is-green .loop-green {
  opacity: 1;
}

.draw-on-video {
  z-index: 4;
  opacity: 0;
}

.tivo-screen.is-drawing .draw-on-video {
  opacity: 1;
}

.tivo-ui {
  position: absolute;
  z-index: 5;
  inset: 0;
}

.screen-header {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.tivo-home-button {
  position: absolute;
  z-index: 6;
  top: 25px;
  left: calc(var(--safe-left) + 50px);
  width: 82px;
  height: 101px;
  padding: 0;
  border: 0;
  border-radius: 45%;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.is-central .tivo-home-button {
  left: calc(var(--safe-left) + 145px);
  width: 96px;
}

.tivo-home-button:focus-visible {
  outline: 2px solid rgba(255, 228, 95, .95);
  outline-offset: 2px;
}

.screen-header h1 {
  position: absolute;
  top: 43px;
  left: calc(var(--safe-left) + 160px);
  width: 470px;
  margin: 0;
  color: #e6a35b;
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.65px;
  text-shadow:
    0 1px 0 rgba(80, 26, 0, .95),
    1px 2px 2px rgba(0, 0, 0, .8);
  white-space: nowrap;
}

.is-central .screen-header h1 {
  top: 46px;
  left: calc(var(--safe-left) + 256px);
  font-size: 37px;
  letter-spacing: -1.1px;
}

.tivo-menu {
  position: absolute;
  z-index: 5;
  top: 135px;
  left: calc(var(--safe-left) + 76px);
  width: 536px;
  margin: 0;
  padding: 0;
}

.central-menu {
  top: 126px;
}

.tivo-item {
  position: relative;
  display: block;
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #d9d6d3;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.central-menu .tivo-item {
  height: 35px;
}

.tivo-item-label {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 44px;
  font-size: 23px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: -.35px;
  white-space: nowrap;
  text-shadow:
    1px 2px 1px rgba(0, 0, 0, .9),
    0 0 3px rgba(0, 0, 0, .75);
}

.is-submenu .tivo-menu {
  top: 137px;
  width: 536px;
}

.is-submenu .tivo-item {
  height: 34px;
}

.is-submenu .tivo-item-label {
  top: 4px;
  left: 43px;
  font-size: 20px;
  line-height: 27px;
}

.is-recordings .screen-header h1 {
  top: 42px;
  left: calc(var(--safe-left) + 190px);
  width: 410px;
  color: #d7dad6;
  font-size: 31px;
  letter-spacing: -.75px;
}

.is-submenu .recording-menu {
  top: 134px;
  left: calc(var(--safe-left) + 76px);
  width: 536px;
}

.is-submenu .recording-menu .tivo-item {
  height: 35px;
}

.is-submenu .recording-menu .tivo-item-label {
  top: 4px;
  left: 31px;
  max-width: 322px;
  overflow: hidden;
  font-size: 20px;
  line-height: 27px;
  text-overflow: ellipsis;
}

.recording-date,
.recording-channel,
.recording-status {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.recording-status {
  top: 8px;
  left: 5px;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(234, 244, 228, .84);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #f9fff5 0 12%, #c8dbc2 24%, #779f79 61%, #315b45 100%);
  box-shadow:
    0 0 2px rgba(234, 255, 228, .85),
    inset -1px -1px 2px rgba(0, 25, 10, .75);
}

.recording-date {
  top: 5px;
  right: 115px;
  width: 105px;
  color: #d9dcd7;
  font-size: 18px;
  line-height: 27px;
  text-align: right;
  text-shadow:
    1px 2px 1px rgba(0, 0, 0, .9),
    0 0 3px rgba(0, 0, 0, .7);
  white-space: nowrap;
}

.recording-channel {
  top: 8px;
  right: 12px;
  width: 50px;
  color: #d8ded9;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  letter-spacing: -.4px;
  text-align: center;
  text-shadow:
    1px 1px 0 #001c17,
    -1px -1px 0 #001c17,
    1px -1px 0 #001c17,
    -1px 1px 0 #001c17;
  transform: skew(-7deg);
}

.recording-menu .tivo-item::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 67px;
  width: 1px;
  height: 25px;
  background: rgba(202, 220, 211, .15);
}

.recording-menu .tivo-item::before {
  width: calc(545px + var(--safe-left));
}

.recording-menu .tivo-arrow-left {
  left: -33px;
}

.recording-menu .tivo-arrow-up,
.recording-menu .tivo-arrow-down {
  left: -33px;
}

.recording-menu .tivo-arrow-right {
  right: 79px;
}

.program-info {
  position: absolute;
  z-index: 5;
  top: 132px;
  left: calc(var(--safe-left) + 94px);
  width: 500px;
  height: 221px;
  color: #e0e1df;
  pointer-events: none;
}

.program-info[hidden] {
  display: none;
}

.program-info h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -.45px;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .9);
}

.program-description {
  width: 267px;
  max-height: 88px;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -.25px;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .9);
}

.program-still {
  position: absolute;
  top: 39px;
  right: 0;
  width: 208px;
  height: 117px;
  overflow: hidden;
  margin: 0;
  border: 2px solid rgba(222, 231, 237, .9);
  border-radius: 2px;
  background: #050608;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(30, 53, 74, .7);
}

.program-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.program-keep {
  position: absolute;
  top: 112px;
  left: 0;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .9);
}

.program-keep-orb {
  position: absolute;
  top: -1px;
  left: -22px;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(234, 244, 228, .9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff 0 12%, #d7efcf 26%, #78ad72 62%, #2d6548 100%);
  box-shadow: 0 0 3px rgba(234, 255, 228, .9);
}

.program-metadata {
  position: absolute;
  right: 1px;
  bottom: 20px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .95);
}

.program-metadata div {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.program-metadata dt {
  font-weight: 700;
}

.program-metadata dt::after {
  content: ":";
}

.program-metadata dd {
  margin: 0;
}

.is-submenu .program-actions {
  top: 333px;
  width: 536px;
}

.is-submenu .program-actions .tivo-item-label {
  left: 54px;
  font-size: 20px;
}

.is-program-info .screen-help {
  opacity: 0;
}

.tivo-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -2px;
  left: calc(-1 * (var(--safe-left) + 76px));
  width: calc(612px + var(--safe-left));
  height: 39px;
  opacity: 0;
  background:
    url("/assets/img/tivo/native/blueright_v6_240_c.png") right top / 24px 39px no-repeat,
    url("/assets/img/tivo/native/bluecolorscheme_v6_240_c.png") left top / calc(100% - 24px) 39px no-repeat;
}

.tivo-item.is-selected::before {
  opacity: 1;
}

.tivo-arrow {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 24px;
  display: none;
  pointer-events: none;
}

.tivo-item.is-selected .tivo-arrow {
  display: block;
}

.tivo-arrow-left,
.tivo-arrow-right {
  top: 6px;
  background: url("/assets/img/tivo/native/ArrowRight-256.9.png") center / 22px 24px no-repeat;
}

.tivo-arrow-left {
  left: -33px;
  transform: rotate(180deg);
}

.tivo-arrow-right {
  right: 7px;
}

.tivo-arrow-up,
.tivo-arrow-down {
  left: -33px;
  background: url("/assets/img/tivo/native/ArrowDown-256.9.png") center / 22px 24px no-repeat;
}

.tivo-arrow-up {
  top: -24px;
  transform: rotate(180deg);
}

.tivo-arrow-down {
  top: 32px;
}

.tivo-item.is-selected .tivo-item-label {
  color: #e5e3e1;
  text-shadow:
    1px 2px 1px rgba(0, 0, 0, .85),
    0 0 2px rgba(0, 0, 0, .7);
}

.tivo-item.has-message .tivo-item-label::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -38px;
  width: 33px;
  height: 29px;
  background: url("/assets/img/tivo/native/mail.png") center / 33px 29px no-repeat;
}

.tivo-item-label .tivo-asterisk {
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-left: 7px;
  background: url("/assets/img/tivo/native/asterisk.png") center / 14px 13px no-repeat;
}

.screen-help {
  position: absolute;
  z-index: 5;
  right: calc(var(--screen-width) - var(--safe-left) - 640px + 68px);
  bottom: 15px;
  margin: 0;
  color: rgba(220, 232, 226, .82);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.15px;
  text-shadow: 1px 1px 2px #001;
  opacity: 0;
}

.is-submenu .screen-help {
  opacity: 0;
}

.is-recordings .screen-help {
  right: auto;
  bottom: 21px;
  left: calc(var(--safe-left) + 206px);
  opacity: 1;
  color: rgba(218, 228, 222, .8);
  font-size: 12px;
}

.standard-site {
  display: none;
}

.site-home-link {
  position: fixed;
  z-index: 10;
  bottom: 12px;
  right: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 3px;
  color: rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .72);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.site-home-link:hover,
.site-home-link:focus-visible {
  color: #fff;
  border-color: #fff;
}

.site-home-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tivo-screen.is-drawing .screen-header,
.tivo-screen.is-drawing .tivo-menu,
.tivo-screen.is-drawing .tivo-home-button,
.tivo-screen.is-drawing .screen-help {
  visibility: hidden;
}

::view-transition-group(tivo-screen) {
  animation-duration: 240ms;
  animation-timing-function: steps(10, end);
}

::view-transition-old(tivo-screen) {
  z-index: 1;
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(tivo-screen) {
  z-index: 2;
  mix-blend-mode: normal;
}

html[data-transition-style="wipe"][data-wipe="forward"]::view-transition-new(tivo-screen) {
  animation: tivo-wipe-forward 240ms steps(10, end) both;
}

html[data-transition-style="wipe"][data-wipe="back"]::view-transition-new(tivo-screen) {
  animation: tivo-wipe-back 240ms steps(10, end) both;
}

html[data-transition-style="fly"] .tivo-ui {
  view-transition-name: tivo-ui;
}

html[data-transition-style="fly"]::view-transition-group(tivo-ui) {
  z-index: 4;
  animation: none;
}

html[data-transition-style="fly"]::view-transition-old(tivo-ui),
html[data-transition-style="fly"]::view-transition-new(tivo-ui) {
  mix-blend-mode: normal;
}

html[data-transition-style="fly"][data-fly-out="right"]::view-transition-old(tivo-ui) {
  animation: tivo-fly-out-right var(--tivo-fly-duration) linear both;
}

html[data-transition-style="fly"][data-fly-in="right"]::view-transition-new(tivo-ui) {
  animation: tivo-fly-in-right var(--tivo-fly-duration) linear both;
}

html[data-transition-style="fly"][data-fly-out="disappear"]::view-transition-old(tivo-ui) {
  animation: tivo-ui-disappear var(--tivo-fly-duration) steps(1, end) both;
}

html[data-transition-style="fly"][data-fly-in="appear"]::view-transition-new(tivo-ui) {
  animation: tivo-ui-appear var(--tivo-fly-duration) steps(1, end) both;
}

html[data-transition-style="fly"][data-wipe]::view-transition-old(tivo-screen) {
  animation: tivo-background-out var(--tivo-fly-duration) steps(1, end) both;
}

html[data-transition-style="fly"][data-wipe]::view-transition-new(tivo-screen) {
  animation: tivo-background-in var(--tivo-fly-duration) steps(1, end) both;
}

@keyframes tivo-wipe-forward {
  from {
    clip-path: inset(0 0 0 100%);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes tivo-wipe-back {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes tivo-fly-out-right {
  0% {
    transform: translateX(0);
  }

  5.2% {
    transform: translateX(1%);
  }

  10.4% {
    transform: translateX(7%);
  }

  15.6% {
    transform: translateX(28%);
  }

  20.8% {
    transform: translateX(78%);
  }

  22%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes tivo-fly-in-right {
  0%,
  49% {
    transform: translateX(100%);
  }

  50% {
    transform: translateX(100%);
  }

  55.2% {
    transform: translateX(75%);
  }

  60.4% {
    transform: translateX(51%);
  }

  65.6% {
    transform: translateX(32%);
  }

  70.8% {
    transform: translateX(18%);
  }

  76% {
    transform: translateX(9%);
  }

  81.2% {
    transform: translateX(4%);
  }

  86.4% {
    transform: translateX(1.5%);
  }

  91.6% {
    transform: translateX(0.3%);
  }

  96.8% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes tivo-ui-disappear {
  0% {
    opacity: 1;
  }

  1%,
  100% {
    opacity: 0;
  }
}

@keyframes tivo-ui-appear {
  0%,
  61% {
    opacity: 0;
  }

  62%,
  100% {
    opacity: 1;
  }
}

@keyframes tivo-background-out {
  0%,
  61% {
    opacity: 1;
  }

  62%,
  100% {
    opacity: 0;
  }
}

@keyframes tivo-background-in {
  0%,
  61% {
    opacity: 0;
  }

  62%,
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(tivo-screen),
  ::view-transition-old(tivo-screen),
  ::view-transition-new(tivo-screen),
  ::view-transition-group(tivo-ui),
  ::view-transition-old(tivo-ui),
  ::view-transition-new(tivo-ui) {
    animation: none;
  }
}