.tv-osk {
  margin: 0.75rem 0 1rem;
  max-width: 52rem;
}

.tv-osk[hidden] {
  display: none;
}

.tv-osk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
}

.tv-osk-key {
  min-width: 3.05rem;
  min-height: 3.05rem;
  padding: 0 0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(16, 20, 27, 0.92);
  color: var(--tv-text, #f3f5f7);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.tv-osk-key--wide {
  min-width: 8.5rem;
  flex: 1 1 8.5rem;
}

.tv-osk-key:focus,
html.vp-tv-pointer .tv-osk-key:hover,
html.vp-sync-tv .tv-osk-key:hover {
  outline: none;
  border-color: var(--tv-focus, #ffffff);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.45);
  transform: scale(1.04);
}

html.vp-has-color-theme .tv-osk-key:focus,
html.vp-has-color-theme.vp-tv-pointer .tv-osk-key:hover {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.45);
}

html.vp-osk .tv-search-input {
  caret-color: transparent;
}

html.vp-sync-tv .tv-osk {
  margin: 1rem 0 0.4rem;
  max-width: 40rem;
}

html.vp-sync-tv .tv-osk-key {
  min-width: 2.7rem;
  min-height: 2.7rem;
  font-size: 1.05rem;
}