.vom-app,
.vom-demo {
  --vom-black: #080808;
  --vom-panel: #111111;
  --vom-panel-2: #171717;
  --vom-paper: #f7f3ec;
  --vom-white: #fff;
  --vom-orange: #fe5801;
  --vom-orange-2: #ff7a1a;
  --vom-green: #5edf8b;
  --vom-muted: rgba(255, 255, 255, .56);
  --vom-muted-2: rgba(255, 255, 255, .38);
  --vom-line: rgba(255, 255, 255, .12);
  --vom-ease: cubic-bezier(.2, .82, .2, 1);
  --vom-font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --vom-brand: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}

.vom-app,
.vom-app *,
.vom-app *::before,
.vom-app *::after,
.vom-demo,
.vom-demo *,
.vom-demo *::before,
.vom-demo *::after {
  box-sizing: border-box;
}

.vom-app {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--vom-white);
  background:
    radial-gradient(circle at 78% 2%, rgba(254, 88, 1, .1), transparent 24%),
    var(--vom-black);
  font-family: var(--vom-font);
  font-size: 14px;
  line-height: 1.35;
  container: vom-app / size;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

.vom-app button,
.vom-app input,
.vom-app output,
.vom-app time {
  margin: 0;
  color: inherit;
  font: inherit;
}

.vom-app button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.vom-app input {
  -webkit-appearance: none;
  appearance: none;
}

.vom-app input[type="search"]::-webkit-search-decoration,
.vom-app input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.vom-app input,
.vom-app textarea {
  user-select: text;
  -webkit-user-select: text;
}

.vom-app button:focus-visible,
.vom-app input:focus-visible {
  outline: 2px solid var(--vom-orange);
  outline-offset: 3px;
}

.vom-app img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.vom-app :is(h1, h2, h3, p, figure, dl, dd, ul) {
  margin: 0;
}

.vom-app [hidden] {
  display: none !important;
}

.vom-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.vom-view {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(16px, 0, 0) scale(.994);
  transition: opacity .25s var(--vom-ease), transform .38s var(--vom-ease), visibility 0s linear .38s;
}

.vom-view.vom-is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity .28s var(--vom-ease), transform .42s var(--vom-ease), visibility 0s linear;
}

.vom-scroll {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vom-scroll::-webkit-scrollbar {
  display: none;
}

.vom-catalog-scroll {
  padding: 21px 18px 34px;
}

.vom-topbar,
.vom-float-head,
.vom-inner-head,
.vom-search-row,
.vom-section-head,
.vom-film-meta,
.vom-film-card__art,
.vom-primary,
.vom-match,
.vom-time,
.vom-plan-list button {
  display: flex;
  align-items: center;
}

.vom-topbar {
  justify-content: space-between;
  margin-bottom: 30px;
}

.vom-wordmark,
.vom-demo__wordmark {
  font-family: var(--vom-brand);
  font-weight: 900;
  letter-spacing: -.075em;
}

.vom-wordmark {
  color: var(--vom-white);
  font-size: 31px;
  line-height: 1;
}

.vom-wordmark span,
.vom-demo__wordmark span {
  color: var(--vom-orange);
}

.vom-profile {
  position: relative;
  width: 44px;
  height: 44px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 50%;
  background: #2b2b2b !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.vom-profile img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 24%;
}

.vom-profile span {
  position: absolute;
  right: -7px;
  bottom: -4px;
  min-width: 28px;
  padding: 3px 5px;
  color: #1b0a00;
  border: 2px solid var(--vom-black);
  border-radius: 999px;
  background: var(--vom-orange);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
}

.vom-profile.vom-is-active span {
  color: #07160d;
  background: var(--vom-green);
}

.vom-catalog-lead {
  margin-bottom: 22px;
}

.vom-catalog-lead > p,
.vom-eyebrow,
.vom-inner-head > div > span,
.vom-demo__kicker {
  color: var(--vom-orange);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.vom-catalog-lead > p {
  margin-bottom: 9px;
}

.vom-catalog-lead :is(h1, h2) {
  max-width: 330px;
  color: var(--vom-white);
  font-size: clamp(28px, 8.6cqw, 35px);
  font-weight: 730;
  line-height: .99;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.vom-catalog-lead :is(h1, h2) em {
  color: var(--vom-orange);
  font-style: normal;
  font-weight: 520;
}

.vom-search-row {
  gap: 8px;
  margin-bottom: 12px;
}

.vom-search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 15px;
  background: rgba(255, 255, 255, .065);
  transition: border-color .22s ease, background .22s ease;
}

.vom-search:focus-within {
  border-color: rgba(254, 88, 1, .58);
  background: rgba(255, 255, 255, .085);
}

.vom-search > img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.vom-search input {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  height: 44px;
  min-height: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  caret-color: var(--vom-orange);
  font-size: 13px;
}

.vom-search input::placeholder {
  color: rgba(255, 255, 255, .62) !important;
  opacity: 1;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app input[data-vom-search]::placeholder {
  color: rgba(255, 255, 255, .68) !important;
  opacity: 1 !important;
}

.vom-search > button {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, .62);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-size: 18px;
  line-height: 1;
}

.vom-filter-button {
  flex: 0 0 46px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 15px;
  background: rgba(255, 255, 255, .065) !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.vom-filter-button[aria-expanded="true"] {
  border-color: var(--vom-orange) !important;
  background: rgba(254, 88, 1, .16) !important;
}

.vom-filter-button img {
  width: 24px;
  height: 24px;
}

.vom-filter-panel {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--vom-line);
  border-radius: 16px;
  background: #121212;
  animation: vomFilterIn .28s var(--vom-ease) both;
}

.vom-filter-panel > span {
  display: block;
  margin: 0 0 9px 2px;
  color: var(--vom-muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vom-filter-panel > div {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vom-filter-panel > div::-webkit-scrollbar {
  display: none;
}

.vom-filter-panel button {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 7px 11px;
  color: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .035) !important;
  font-size: 10px;
  font-weight: 650;
}

.vom-filter-panel button.vom-is-selected {
  color: #201006;
  border-color: var(--vom-orange) !important;
  background: var(--vom-orange) !important;
}

.vom-feature {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.78 / 1;
  min-height: 164px;
  overflow: hidden;
  margin: 0 0 23px;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 22px;
  background: #202020 !important;
  text-align: left;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .24);
}

.vom-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s var(--vom-ease);
}

.vom-feature__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .12) 35%, rgba(0, 0, 0, .86));
}

.vom-feature__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  min-height: 25px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(8, 8, 8, .56);
  backdrop-filter: blur(12px);
  font-size: 8px;
  font-weight: 700;
}

.vom-feature__tag i,
.vom-film-hero__available i,
.vom-pro-pill i,
.vom-player-caption i,
.vom-demo__note span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vom-orange);
  box-shadow: 0 0 0 4px rgba(254, 88, 1, .14);
}

.vom-feature__copy {
  position: absolute;
  right: 45px;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vom-feature__copy small {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .55);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

.vom-feature__copy strong {
  color: #fff;
  font-size: 26px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.045em;
}

.vom-feature__copy em {
  margin-top: 4px;
  color: rgba(255, 255, 255, .68);
  font-size: 9px;
  font-style: normal;
}

.vom-feature__arrow {
  position: absolute;
  right: 13px;
  bottom: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #1b0a00;
  border-radius: 50%;
  background: var(--vom-orange);
  font-size: 16px;
}

.vom-section-head {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.vom-section-head h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 690;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.vom-section-head span {
  flex: 0 0 auto;
  color: var(--vom-muted-2);
  font-size: 9px;
}

.vom-film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 10px;
}

.vom-film-card {
  display: block;
  min-width: 0;
  text-align: left;
}

.vom-film-card[hidden] {
  display: none !important;
}

.vom-film-card__art {
  position: relative;
  justify-content: center;
  width: 100%;
  aspect-ratio: .702 / 1;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: #171717;
}

.vom-film-card__art::after {
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .34));
  content: "";
}

.vom-film-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .52s var(--vom-ease), filter .42s ease;
}

.vom-film-card__art i {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 7px;
  min-width: 25px;
  padding: 4px 6px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(8, 8, 8, .62);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(8px);
}

.vom-film-card > strong,
.vom-film-card > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vom-film-card > strong {
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.012em;
}

.vom-film-card > small {
  margin-top: 2px;
  color: var(--vom-muted-2);
  font-size: 9px;
}

.vom-empty {
  padding: 46px 28px 28px;
  color: var(--vom-muted);
  text-align: center;
}

.vom-empty > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin: 0 auto 13px;
  color: var(--vom-orange);
  border: 1px solid rgba(254, 88, 1, .25);
  border-radius: 50%;
  background: rgba(254, 88, 1, .08);
  font-size: 27px;
}

.vom-empty strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 15px;
}

.vom-empty p {
  font-size: 11px;
  line-height: 1.5;
}

.vom-film-scroll {
  padding-bottom: 120px;
}

.vom-film-hero {
  position: relative;
  height: clamp(218px, 65cqw, 274px);
  overflow: hidden;
  background: #1b1b1b;
}

.vom-film-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vom-app[data-vom-film="frog"] .vom-film-hero > img,
.vom-app[data-vom-film="master"] .vom-film-hero > img,
.vom-app[data-vom-film="holop"] .vom-film-hero > img {
  object-position: center 20%;
}

.vom-film-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 28%, rgba(8, 8, 8, .06) 53%, var(--vom-black));
}

.vom-float-head {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 16px;
  left: 16px;
  justify-content: space-between;
}

.vom-float-head > button:first-child,
.vom-inner-head > button {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 50%;
  background: rgba(8, 8, 8, .64) !important;
  backdrop-filter: blur(13px);
}

.vom-float-head > button:first-child img,
.vom-inner-head > button img {
  width: 8px;
  height: 14px;
}

.vom-pro-pill {
  display: flex;
  min-height: 37px;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 999px;
  background: rgba(8, 8, 8, .64) !important;
  backdrop-filter: blur(13px);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .035em;
}

.vom-pro-pill.vom-is-active i {
  background: var(--vom-green);
  box-shadow: 0 0 0 4px rgba(94, 223, 139, .12);
}

.vom-film-hero__available {
  position: absolute;
  z-index: 3;
  bottom: 15px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 650;
}

.vom-film-copy {
  padding: 9px 18px 24px;
}

.vom-eyebrow {
  display: block;
  margin-bottom: 8px;
}

.vom-film-copy h2 {
  color: #fff;
  font-size: clamp(31px, 10.1cqw, 41px);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.052em;
}

.vom-film-meta {
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: var(--vom-muted);
  font-size: 10px;
}

.vom-film-meta b {
  display: grid;
  min-width: 27px;
  min-height: 23px;
  place-items: center;
  padding: 4px 6px;
  color: #fff;
  border: 1px solid var(--vom-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  font-size: 9px;
}

.vom-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 15px 0 17px;
}

.vom-genre-row span {
  padding: 6px 9px;
  color: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  font-size: 9px;
}

.vom-film-synopsis {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  line-height: 1.58;
}

.vom-film-credits {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 15px 0;
  border-block: 1px solid rgba(255, 255, 255, .09);
}

.vom-film-credits div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
}

.vom-film-credits dt {
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
}

.vom-film-credits dd {
  color: rgba(255, 255, 255, .77);
  font-size: 9px;
  line-height: 1.42;
}

.vom-language-card {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(254, 88, 1, .18);
  border-radius: 15px;
  background: rgba(254, 88, 1, .07);
}

.vom-language-card > span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #211007;
  border-radius: 11px;
  background: var(--vom-orange);
  font-size: 10px;
  font-weight: 850;
}

.vom-language-card strong,
.vom-language-card small {
  display: block;
}

.vom-language-card strong {
  color: #fff;
  font-size: 10px;
}

.vom-language-card small {
  margin-top: 2px;
  color: rgba(255, 255, 255, .62);
  font-size: 8px;
  line-height: 1.4;
}

.vom-language-card > i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #07150d;
  border-radius: 50%;
  background: var(--vom-green);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.vom-sticky-action {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 18px 13px;
  background: linear-gradient(transparent, rgba(8, 8, 8, .96) 25%, var(--vom-black) 54%);
}

.vom-primary {
  width: 100%;
  min-height: 49px;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 12px 17px !important;
  color: #261006 !important;
  border: 1px solid var(--vom-orange) !important;
  border-radius: 15px !important;
  background: var(--vom-orange) !important;
  box-shadow: 0 12px 30px rgba(254, 88, 1, .16) !important;
  font-size: 11px;
  font-weight: 800;
}

.vom-primary > i {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  font-size: 14px;
  font-style: normal;
}

.vom-sticky-action > small {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: rgba(255, 255, 255, .56);
  font-size: 7px;
}

.vom-sticky-action > small i {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
}

.vom-sync-scroll {
  padding: 19px 18px 28px;
}

.vom-inner-head {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.vom-inner-head > button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .06) !important;
}

.vom-inner-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.vom-inner-head > div > span {
  display: block;
  margin-bottom: 2px;
  font-size: 7px;
}

.vom-inner-head h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
}

.vom-sync-quality {
  flex: 0 0 auto;
  padding: 6px 8px;
  color: var(--vom-orange);
  border: 1px solid rgba(254, 88, 1, .2);
  border-radius: 999px;
  background: rgba(254, 88, 1, .08);
  font-size: 7px;
  font-weight: 750;
}

.vom-app[data-vom-sync-state="synced"] .vom-sync-quality {
  color: var(--vom-green);
  border-color: rgba(94, 223, 139, .2);
  background: rgba(94, 223, 139, .08);
}

.vom-mic-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 11px;
  border: 1px solid rgba(254, 88, 1, .16);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(254, 88, 1, .11), rgba(254, 88, 1, .035));
}

.vom-mic-note__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(254, 88, 1, .15);
}

.vom-mic-note__icon i,
.vom-listening-orbit > i {
  position: relative;
  width: 10px;
  height: 17px;
  border: 2px solid var(--vom-orange);
  border-radius: 8px;
}

.vom-mic-note__icon i::after,
.vom-listening-orbit > i::after {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 16px;
  height: 11px;
  border: 2px solid var(--vom-orange);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  content: "";
  transform: translateX(-50%);
}

.vom-mic-note strong,
.vom-mic-note small {
  display: block;
}

.vom-mic-note strong {
  color: #fff;
  font-size: 9px;
  line-height: 1.35;
}

.vom-mic-note small {
  margin-top: 2px;
  color: var(--vom-muted-2);
  font-size: 7px;
  line-height: 1.38;
}

.vom-sync-film {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 92px;
  margin-bottom: 14px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}

.vom-sync-film > img {
  width: 66px;
  height: 86px;
  border-radius: 10px;
  object-fit: cover;
}

.vom-sync-film span,
.vom-sync-film small,
.vom-sync-film p {
  display: block;
}

.vom-sync-film span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.vom-sync-film small {
  margin-top: 4px;
  color: var(--vom-muted-2);
  font-size: 8px;
}

.vom-sync-film p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: rgba(255, 255, 255, .48);
  font-size: 8px;
}

.vom-sync-film p i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--vom-orange);
}

.vom-listening-stage {
  display: grid;
  min-height: 310px;
  align-content: center;
  justify-items: center;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 23px;
  background:
    radial-gradient(circle at 50% 43%, rgba(254, 88, 1, .13), transparent 36%),
    rgba(255, 255, 255, .025);
  text-align: center;
}

.vom-listening-orbit {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  margin-bottom: 19px;
}

.vom-listening-orbit > span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(254, 88, 1, .2);
  border-radius: 50%;
  animation: vomListenPulse 1.8s ease-out infinite;
}

.vom-listening-orbit > span:nth-child(2) { animation-delay: .55s; }
.vom-listening-orbit > span:nth-child(3) { animation-delay: 1.1s; }

.vom-listening-orbit > i {
  width: 18px;
  height: 30px;
  border-width: 3px;
  border-radius: 12px;
}

.vom-listening-orbit > i::after {
  top: 15px;
  width: 28px;
  height: 19px;
  border-width: 3px;
  border-top: 0;
}

.vom-listening-stage > strong {
  color: #fff;
  font-size: 17px;
  font-weight: 710;
  letter-spacing: -.025em;
}

.vom-listening-stage > p {
  margin-top: 5px;
  color: var(--vom-muted-2);
  font-size: 9px;
}

.vom-signal-bars {
  display: flex;
  height: 28px;
  align-items: center;
  gap: 4px;
  margin-top: 17px;
}

.vom-signal-bars i {
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: var(--vom-orange);
  animation: vomSignal 720ms ease-in-out infinite alternate;
}

.vom-signal-bars i:nth-child(2), .vom-signal-bars i:nth-child(6) { animation-delay: 100ms; }
.vom-signal-bars i:nth-child(3), .vom-signal-bars i:nth-child(5) { animation-delay: 220ms; }
.vom-signal-bars i:nth-child(4) { animation-delay: 330ms; }

.vom-player {
  padding: 13px 13px 17px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 23px;
  background:
    radial-gradient(circle at 50% 31%, rgba(254, 88, 1, .1), transparent 32%),
    rgba(255, 255, 255, .025);
  animation: vomPlayerIn .48s var(--vom-ease) both;
}

.vom-match {
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(94, 223, 139, .16);
  border-radius: 13px;
  background: rgba(94, 223, 139, .055);
}

.vom-match > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: #07140c;
  border-radius: 9px;
  background: var(--vom-green);
}

.vom-match > span i {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.vom-match p {
  flex: 1 1 auto;
  min-width: 0;
}

.vom-match strong,
.vom-match small {
  display: block;
}

.vom-match strong {
  color: #fff;
  font-size: 9px;
}

.vom-match small {
  margin-top: 1px;
  overflow: hidden;
  color: rgba(255, 255, 255, .37);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vom-match > b {
  color: var(--vom-green);
  font-size: 10px;
}

.vom-waveform {
  position: relative;
  height: 132px;
  overflow: hidden;
  margin: 13px 0 3px;
}

.vom-waveform::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--vom-black), transparent 12%, transparent 88%, var(--vom-black));
  content: "";
  pointer-events: none;
}

.vom-waveform > img {
  width: 100%;
  height: 100%;
  opacity: .88;
  object-fit: contain;
}

.vom-waveform > span {
  position: absolute;
  z-index: 2;
  top: 14px;
  bottom: 14px;
  left: var(--vom-progress);
  width: 1px;
  background: rgba(255, 255, 255, .75);
  transition: left 1s linear;
}

.vom-waveform > span i {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.vom-time {
  gap: 8px;
  color: rgba(255, 255, 255, .42);
  font-size: 7px;
}

.vom-time > span {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.vom-time > span i {
  display: block;
  width: var(--vom-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--vom-orange);
  transition: width 1s linear;
}

.vom-play-control {
  position: relative;
  display: grid;
  width: 61px;
  height: 61px;
  place-items: center;
  margin: 14px auto 8px;
  border: 0 !important;
  border-radius: 50%;
  background: var(--vom-paper) !important;
  box-shadow: 0 13px 28px rgba(0, 0, 0, .32) !important;
  transition: transform .2s ease, background .2s ease;
}

.vom-play-control > img {
  width: 38px;
  height: 38px;
}

.vom-play-control > i {
  display: none;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #262626;
}

.vom-play-control:not(.vom-is-playing) > img { display: none; }
.vom-play-control:not(.vom-is-playing) > i { display: block; }

.vom-player-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .5);
  font-size: 8px;
}

.vom-player-caption i {
  background: var(--vom-green);
  box-shadow: 0 0 0 4px rgba(94, 223, 139, .1);
}

.vom-player-caption.vom-is-paused i {
  background: rgba(255, 255, 255, .35);
  box-shadow: none;
}

.vom-resync {
  display: block;
  margin: 12px auto 0;
  padding: 5px 8px;
  color: var(--vom-orange) !important;
  font-size: 8px;
  font-weight: 650;
}

.vom-sheet-layer {
  position: absolute;
  z-index: 60;
  inset: 0;
}

.vom-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .72) !important;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity .28s ease;
}

.vom-pro-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: calc(100% - 42px);
  overflow-y: auto;
  padding: 14px 18px 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 92% 0, rgba(254, 88, 1, .17), transparent 29%),
    #141414;
  box-shadow: 0 -25px 70px rgba(0, 0, 0, .42);
  opacity: 0;
  transform: translate3d(0, 102%, 0);
  transition: opacity .28s ease, transform .46s var(--vom-ease);
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.vom-pro-sheet::-webkit-scrollbar { display: none; }

.vom-sheet-layer.vom-is-open .vom-sheet-backdrop { opacity: 1; }
.vom-sheet-layer.vom-is-open .vom-pro-sheet { opacity: 1; transform: translate3d(0, 0, 0); }

.vom-sheet-handle {
  display: block;
  width: 37px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.vom-sheet-close {
  position: absolute;
  top: 15px;
  right: 16px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, .055) !important;
  font-size: 19px;
  line-height: 1;
}

.vom-pro-sheet header > span {
  color: var(--vom-orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}

.vom-pro-sheet header h2 {
  margin-top: 4px;
  color: #fff;
  font-family: var(--vom-brand);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.065em;
}

.vom-pro-sheet header h2 em {
  color: var(--vom-orange);
  font-size: 15px;
  font-style: normal;
  letter-spacing: -.02em;
}

.vom-pro-sheet header p {
  max-width: 280px;
  margin-top: 8px;
  color: rgba(255, 255, 255, .5);
  font-size: 9px;
  line-height: 1.48;
}

.vom-pro-sheet ul {
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 13px 0;
  list-style: none;
}

.vom-pro-sheet li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
}

.vom-pro-sheet li i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #1c0b03;
  border-radius: 50%;
  background: var(--vom-orange);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.vom-plan-list {
  display: grid;
  gap: 7px;
  margin-bottom: 11px;
}

.vom-plan-list button {
  position: relative;
  width: 100%;
  min-height: 65px;
  gap: 8px;
  padding: 10px 11px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .035) !important;
  text-align: left;
}

.vom-plan-list button.vom-is-selected {
  border-color: rgba(254, 88, 1, .6) !important;
  background: rgba(254, 88, 1, .08) !important;
}

.vom-plan-list button > span {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 25px;
}

.vom-plan-list button > span > i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  transform: translateY(-50%);
}

.vom-plan-list button.vom-is-selected > span > i {
  border: 5px solid var(--vom-orange);
  background: #fff;
}

.vom-plan-list strong,
.vom-plan-list small {
  display: block;
}

.vom-plan-list strong {
  color: #fff;
  font-size: 10px;
}

.vom-plan-list small {
  margin-top: 2px;
  color: var(--vom-muted-2);
  font-size: 7px;
}

.vom-plan-list em {
  flex: 0 0 auto;
  padding: 3px 6px;
  color: #1b0a00;
  border-radius: 999px;
  background: var(--vom-orange);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.vom-plan-list button > b {
  flex: 0 0 auto;
  color: #fff;
  font-size: 12px;
}

.vom-pro-note {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .27);
  font-size: 7px;
  text-align: center;
}

.vom-toast {
  position: absolute;
  z-index: 90;
  top: 14px;
  right: 13px;
  left: 13px;
  display: flex;
  min-height: 55px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background: rgba(25, 25, 25, .93);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
  opacity: 0;
  backdrop-filter: blur(16px);
  transform: translate3d(0, -14px, 0);
  transition: opacity .22s ease, transform .32s var(--vom-ease);
}

.vom-toast.vom-is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.vom-toast > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #1a0b03;
  border-radius: 10px;
  background: var(--vom-orange);
  font-size: 12px;
  font-weight: 900;
}

.vom-toast strong,
.vom-toast small {
  display: block;
}

.vom-toast strong {
  color: #fff;
  font-size: 10px;
}

.vom-toast small {
  margin-top: 1px;
  color: var(--vom-muted-2);
  font-size: 8px;
}

.vom-app[data-vom-inactive] .vom-view,
.vom-app[data-vom-inactive] .vom-sheet-layer,
.vom-app[data-vom-inactive] .vom-toast {
  pointer-events: none !important;
}

.vom-demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(74px, 8vw, 132px) clamp(22px, 5vw, 76px);
  color: #fff;
  background:
    radial-gradient(circle at 75% 48%, rgba(254, 88, 1, .13), transparent 28%),
    radial-gradient(circle at 13% 18%, rgba(255, 255, 255, .035), transparent 24%),
    #070707;
  font-family: var(--vom-font);
  -webkit-font-smoothing: antialiased;
}

.vom-demo__shell {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .7fr);
  gap: clamp(48px, 8vw, 126px);
  align-items: center;
  width: min(100%, 1280px);
  margin: 0 auto;
}

.vom-demo__intro {
  position: relative;
  z-index: 2;
}

.vom-demo__wordmark {
  margin-bottom: clamp(48px, 7vw, 88px);
  color: #fff;
  font-size: clamp(37px, 4.7vw, 66px);
  line-height: 1;
}

.vom-demo__kicker {
  margin: 0 0 16px;
}

.vom-demo__intro h2 {
  max-width: 790px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 5.6vw, 80px);
  font-weight: 580;
  line-height: .96;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.vom-demo__lead {
  max-width: 600px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, .52);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.58;
}

.vom-demo__flow {
  display: flex;
  max-width: 570px;
  align-items: center;
  gap: 10px;
  margin-top: 38px;
}

.vom-demo__flow > span {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  gap: 5px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.vom-demo__flow b {
  color: var(--vom-orange);
  font-size: 10px;
  letter-spacing: .08em;
}

.vom-demo__flow small {
  overflow: hidden;
  color: rgba(255, 255, 255, .61);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vom-demo__flow > i {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .22);
  font-size: 13px;
  font-style: normal;
}

.vom-demo__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 21px 0 0;
  color: rgba(255, 255, 255, .34);
  font-size: 10px;
}

.vom-demo__stage {
  position: relative;
  display: grid;
  justify-items: center;
}

.vom-demo__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(254, 88, 1, .12);
  border-radius: 45% 55% 63% 37% / 56% 42% 58% 44%;
  background: rgba(254, 88, 1, .025);
  transform: translate(-50%, -52%) rotate(-14deg);
  animation: vomHalo 13s linear infinite;
}

.vom-phone {
  position: relative;
  z-index: 2;
  width: min(100%, 407px);
  aspect-ratio: 407 / 846;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 58px;
  background: linear-gradient(145deg, #3a3a3d, #0e0f11 37%, #2c2d31 78%, #0c0d0f);
  box-shadow: 0 52px 100px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .2);
}

.vom-phone::before,
.vom-phone::after {
  position: absolute;
  left: -4px;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: #34363b;
  content: "";
}

.vom-phone::before { top: 146px; height: 76px; }
.vom-phone::after { top: 238px; height: 112px; }

.vom-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 49px;
  background: var(--vom-black);
}

.vom-phone__island {
  position: absolute;
  z-index: 90;
  top: 9px;
  left: 50%;
  width: 112px;
  height: 31px;
  border-radius: 999px;
  background: #030303;
  transform: translateX(-50%);
}

.vom-phone__status {
  position: absolute;
  z-index: 86;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.vom-phone__viewport {
  position: absolute;
  inset: 44px 0 23px;
  overflow: hidden;
}

.vom-phone__home {
  position: absolute;
  z-index: 88;
  bottom: 7px;
  left: 50%;
  width: 110px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  transform: translateX(-50%);
}

.vom-demo__status {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .35);
  font-size: 10px;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .vom-feature:hover > img { transform: scale(1.035); }
  .vom-film-card:hover .vom-film-card__art img { transform: scale(1.035); }
  .vom-filter-button:hover { border-color: rgba(254, 88, 1, .45) !important; transform: translateY(-1px); }
  .vom-primary:hover { background: #ff6b12 !important; transform: translateY(-1px); }
  .vom-play-control:hover { transform: scale(1.04); }
}

@container vom-app (max-height: 650px) {
  .vom-catalog-scroll { padding-top: 16px; }
  .vom-topbar { margin-bottom: 19px; }
  .vom-catalog-lead { margin-bottom: 16px; }
  .vom-feature { min-height: 146px; }
  .vom-film-hero { height: 211px; }
  .vom-listening-stage { min-height: 252px; }
  .vom-waveform { height: 100px; }
  .vom-play-control { width: 54px; height: 54px; margin-top: 10px; }
  .vom-sync-scroll { padding-top: 14px; }
  .vom-inner-head, .vom-mic-note, .vom-sync-film { margin-bottom: 10px; }
}

@media (max-width: 920px) {
  .vom-demo__shell {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .vom-demo__intro {
    max-width: 780px;
  }

  .vom-demo__wordmark {
    margin-bottom: 48px;
  }

  .vom-demo__stage {
    justify-self: center;
    width: min(100%, 530px);
  }

  .vom-demo__halo {
    width: min(92vw, 590px);
  }
}

@media (max-width: 520px) {
  .vom-demo {
    padding: 64px 14px 76px;
  }

  .vom-demo__intro {
    padding: 0 6px;
  }

  .vom-demo__intro h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .vom-demo__lead {
    font-size: 14px;
  }

  .vom-demo__flow {
    gap: 6px;
  }

  .vom-demo__flow > i {
    display: none;
  }

  .vom-demo__flow small {
    font-size: 8px;
  }

  .vom-phone {
    width: min(100%, 390px);
    border-radius: 53px;
  }

  .vom-phone__screen {
    border-radius: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vom-app *,
  .vom-app *::before,
  .vom-app *::after,
  .vom-demo *,
  .vom-demo *::before,
  .vom-demo *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .vom-feature__tag,
  .vom-float-head > button,
  .vom-pro-pill,
  .vom-sheet-backdrop,
  .vom-toast {
    backdrop-filter: none;
  }
}

@keyframes vomFilterIn {
  from { opacity: 0; transform: translate3d(0, -7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes vomListenPulse {
  0% { opacity: .8; transform: scale(.38); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes vomSignal {
  from { height: 5px; opacity: .45; }
  to { height: 25px; opacity: 1; }
}

@keyframes vomPlayerIn {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes vomHalo {
  to { transform: translate(-50%, -52%) rotate(346deg); }
}

/* Defensive scoping against Brawus global typography, forms and media direction. */
.vom-app,
.vom-app *,
.vom-demo,
.vom-demo * {
  font-family: var(--vom-font) !important;
}

.vom-app .vom-wordmark,
.vom-app .vom-pro-sheet header h2,
.vom-demo .vom-demo__wordmark {
  font-family: var(--vom-brand) !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app,
html.brawus-v2-html body#body.brawus-v2 .vom-app *,
html.brawus-v2-html body#body.brawus-v2 .vom-demo,
html.brawus-v2-html body#body.brawus-v2 .vom-demo * {
  font-family: var(--vom-font) !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-wordmark,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-pro-sheet header h2,
html.brawus-v2-html body#body.brawus-v2 .vom-demo .vom-demo__wordmark {
  font-family: var(--vom-brand) !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app :is(h1, h2, h3, strong, b),
html.brawus-v2-html body#body.brawus-v2 .vom-demo :is(h1, h2, h3, strong, b) {
  color: inherit !important;
  text-transform: none !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-catalog-lead :is(h1, h2) em {
  color: var(--vom-orange) !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app :is(button, input),
body.brawus-v2 .vom-app :is(button, input) {
  min-height: 0;
  border-radius: initial;
  box-shadow: none;
  font-family: var(--vom-font) !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-primary,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-sticky-action .vom-primary {
  min-height: 49px !important;
  color: #261006 !important;
  border-radius: 15px !important;
  background: var(--vom-orange) !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app input[type="search"] {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app img,
html.brawus-v2-html body#body.brawus-v2 .vom-app img.ed-real-media,
html.brawus-v2-html body#body.brawus-v2 .vom-app button:hover img.ed-real-media,
html.brawus-v2-html body#body.brawus-v2 .vom-demo .vom-app img,
html.brawus-v2-html body#body.brawus-v2 .vom-demo .vom-app img.ed-real-media {
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-feature > img,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-film-card__art img,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-film-hero > img,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-sync-film > img,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-profile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.brawus-v2 .vom-app,
body.brawus-v2 .vom-app[data-voiceover-app] {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
}

/* Canonical semantic checkmark supplied by the client. */
html body [data-voiceover-app] .vom-language-card > i > svg { width: 11px !important; height: 11px !important; color: currentColor; }
html body [data-voiceover-app] .vom-match > span i > svg { width: 13px !important; height: 13px !important; color: currentColor; }
html body [data-voiceover-app] .vom-pro-sheet li i > svg { width: 11px !important; height: 11px !important; color: currentColor; }
html body [data-voiceover-app] .vom-toast > span > svg { width: 13px !important; height: 13px !important; color: currentColor; }

/* Voice Over interaction and layout polish · 2026-08-23d */
.vom-view {
  transform: scale(.994);
  transform-origin: center;
}

.vom-app {
  --vom-black: #090a0b;
  --vom-panel: #141516;
  --vom-panel-2: #1a1b1d;
  --vom-orange: #ff642f;
  --vom-orange-2: #ff7b4e;
  --vom-line: rgba(255, 255, 255, .105);
  background:
    radial-gradient(circle at 86% -4%, rgba(255, 100, 47, .1), transparent 29%),
    linear-gradient(180deg, #0b0c0d, #090a0b 54%);
}

.vom-topbar {
  margin-bottom: 34px;
}

.vom-wordmark {
  min-height: 44px !important;
  display: inline-flex;
  align-items: center;
}

.vom-profile {
  width: 48px;
  height: 48px;
  border-radius: 15px !important;
  background: #242629 !important;
}

html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-profile {
  border-radius: 15px !important;
  background: #242629 !important;
}

.vom-catalog-lead {
  margin-bottom: 24px;
}

.vom-catalog-lead :is(h1, h2) {
  max-width: 350px;
  font-size: clamp(31px, 9.4cqw, 39px);
  line-height: .97;
}

.vom-search-row {
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}

.vom-search,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-search {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 8px 0 15px;
  border-color: rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: #151719;
}

.vom-search input,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-search input[type="search"] {
  height: 50px !important;
  font-size: 14px;
}

.vom-search > button,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-search > button {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 11px;
}

.vom-filter-button,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-filter-button {
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  flex-basis: 52px;
  border-color: rgba(255, 255, 255, .13) !important;
  border-radius: 14px !important;
  background: #151719 !important;
}

.vom-filter-button[aria-expanded="true"],
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-filter-button[aria-expanded="true"] {
  border-color: rgba(255, 100, 47, .75) !important;
  background: #2a1812 !important;
}

.vom-filter-panel {
  margin-bottom: 18px;
  padding: 14px;
  border-color: rgba(255, 255, 255, .12);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(255, 100, 47, .07), transparent 40%),
    #151719;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.vom-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vom-filter-panel__head span,
.vom-filter-panel__head small {
  display: block;
}

.vom-filter-panel__head span {
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: -.015em;
}

.vom-filter-panel__head small {
  margin-top: 2px;
  color: rgba(255, 255, 255, .68);
  font-size: 9px;
}

.vom-filter-panel__head > button,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-filter-panel__head > button {
  min-width: 72px;
  min-height: 44px !important;
  padding: 0 10px;
  color: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .035) !important;
  font-size: 10px;
  font-weight: 650;
}

.vom-filter-panel > div[role="group"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
}

.vom-filter-panel button[data-vom-genre],
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-filter-panel button[data-vom-genre] {
  position: relative;
  min-height: 44px !important;
  padding: 0 12px 0 17px;
  color: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .085) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .025) !important;
  text-align: left;
}

.vom-filter-panel button[data-vom-genre]::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .13);
  content: "";
}

.vom-filter-panel button[data-vom-genre].vom-is-selected,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-filter-panel button[data-vom-genre].vom-is-selected {
  color: #fff;
  border-color: rgba(255, 100, 47, .38) !important;
  background: rgba(255, 100, 47, .11) !important;
}

.vom-filter-panel button[data-vom-genre].vom-is-selected::before {
  background: var(--vom-orange);
}

.vom-feature {
  border-radius: 18px !important;
  background: #202020 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
}

html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-feature {
  border-radius: 18px !important;
  background: #202020 !important;
}

.vom-film-card__art {
  border-radius: 15px;
}

.vom-film-hero {
  height: clamp(228px, 67cqw, 282px);
}

.vom-float-head {
  top: 16px;
  gap: 10px;
}

.vom-float-head > button:first-child,
.vom-inner-head > button,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-float-head > button:first-child,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-inner-head > button {
  width: 50px;
  height: 44px;
  min-height: 44px !important;
  border-color: rgba(255, 255, 255, .15) !important;
  border-radius: 13px !important;
  background: rgba(16, 17, 18, .86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 10px 24px rgba(0, 0, 0, .22) !important;
}

.vom-pro-pill,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-pro-pill {
  min-height: 44px !important;
  padding: 0 14px;
  border-radius: 13px !important;
  background: rgba(16, 17, 18, .86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 10px 24px rgba(0, 0, 0, .22) !important;
  font-size: 10px;
}

.vom-film-copy {
  padding: 12px 18px 30px;
}

.vom-film-copy h2 {
  max-width: 12ch;
  text-wrap: balance;
}

.vom-film-meta {
  margin-top: 12px;
}

.vom-genre-row span {
  border-radius: 8px;
  background: #151719;
}

.vom-language-card {
  min-height: 68px;
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(255, 100, 47, .12), rgba(255, 100, 47, .035));
}

.vom-primary,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-primary,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-sticky-action .vom-primary {
  min-height: 54px !important;
  border-radius: 14px !important;
}

.vom-sync-scroll {
  padding: 18px 16px 30px;
}

.vom-inner-head {
  gap: 11px;
  margin-bottom: 16px;
}

.vom-inner-head > button {
  flex-basis: 50px;
}

.vom-inner-head h2 {
  font-size: 21px;
  letter-spacing: -.04em;
}

.vom-sync-quality {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 8px;
}

.vom-mic-note {
  min-height: 62px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-color: rgba(255, 100, 47, .14);
  border-radius: 14px;
  background: #151311;
}

.vom-mic-note strong {
  font-size: 10px;
}

.vom-mic-note small {
  color: rgba(255, 255, 255, .64);
  font-size: 8px;
}

.vom-sync-film {
  min-height: 76px;
  grid-template-columns: 50px minmax(0, 1fr);
  margin-bottom: 12px;
  padding: 8px 11px 8px 8px;
  border-radius: 14px;
  background: #121416;
}

.vom-sync-film > img {
  width: 50px;
  height: 60px;
  border-radius: 9px;
}

.vom-sync-film span {
  font-size: 14px;
}

.vom-sync-film small {
  color: rgba(255, 255, 255, .64);
}

.vom-sync-film p {
  margin-top: 7px;
}

.vom-listening-stage {
  min-height: 326px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 100, 47, .14), transparent 34%),
    #111315;
}

.vom-player {
  padding: 12px 12px 14px;
  border-color: rgba(255, 255, 255, .105);
  border-radius: 20px;
  background:
    radial-gradient(circle at 54% 38%, rgba(255, 100, 47, .105), transparent 38%),
    #111315;
}

.vom-match {
  min-height: 58px;
  padding: 9px 10px;
  border-color: rgba(94, 223, 139, .13);
  border-radius: 12px;
  background: #121a15;
}

.vom-match > span {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
}

.vom-match strong {
  font-size: 10px;
}

.vom-match small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .64);
  font-size: 8px;
}

.vom-match > b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.vom-waveform {
  position: relative;
  height: 154px;
  margin: 13px 0 7px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, .035) 38px 39px),
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .08));
}

.vom-waveform::after {
  z-index: 4;
  background: linear-gradient(90deg, #111315, transparent 7%, transparent 93%, #111315);
}

.vom-waveform__bars {
  position: absolute;
  z-index: 1;
  inset: 20px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.vom-waveform__bars i {
  width: 4px;
  height: 46%;
  flex: 1 1 4px;
  max-width: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  transform: scaleY(.62);
  transform-origin: center;
  animation: vomLiveWave var(--vom-duration) ease-in-out infinite alternate;
  animation-delay: var(--vom-delay);
  animation-play-state: paused;
}

.vom-waveform__bars i:nth-child(3n + 1) { height: 72%; }
.vom-waveform__bars i:nth-child(4n + 2) { height: 38%; }
.vom-waveform__bars i:nth-child(5n + 3) { height: 88%; }
.vom-waveform__bars i:nth-child(7n + 4) { height: 56%; }

.vom-app[data-vom-playing="true"] .vom-waveform__bars i {
  color: var(--vom-orange);
  background: currentColor;
  animation-play-state: running;
}

.vom-waveform > .vom-waveform__playhead {
  top: 13px;
  bottom: 13px;
  left: var(--vom-progress);
  transition: none;
}

.vom-time {
  min-height: 22px;
  gap: 9px;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.vom-time > span {
  height: 4px;
}

.vom-time > span i {
  transition: none;
}

.vom-transport {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.vom-play-control,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-play-control {
  width: 54px;
  height: 54px;
  min-height: 54px !important;
  margin: 0;
  border-radius: 15px !important;
  background: var(--vom-orange) !important;
  box-shadow: 0 13px 26px rgba(255, 100, 47, .17) !important;
}

.vom-play-control > img {
  width: 32px;
  height: 32px;
}

.vom-play-control > i {
  border-left-color: #1a0b06;
}

.vom-player-caption {
  min-width: 0;
  justify-content: flex-start;
  color: rgba(255, 255, 255, .7);
  text-align: left;
}

.vom-player-caption > span,
.vom-player-caption strong,
.vom-player-caption small {
  display: block;
  min-width: 0;
}

.vom-player-caption strong {
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vom-player-caption small {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 255, 255, .62);
  font-size: 7px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vom-resync,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-resync {
  width: 44px;
  height: 44px;
  min-height: 44px !important;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .035) !important;
  font-size: 20px;
}

.vom-sheet-close,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-sheet-close {
  width: 44px;
  height: 44px;
  min-height: 44px !important;
  border-radius: 13px !important;
}

.vom-plan-list button,
html.brawus-v2-html body#body.brawus-v2 .vom-app .vom-plan-list button {
  min-height: 62px !important;
}

@container vom-app (max-width: 340px) {
  .vom-catalog-scroll { padding-inline: 14px; }
  .vom-sync-scroll { padding-inline: 12px; }
  .vom-catalog-lead :is(h1, h2) { font-size: 31px; }
  .vom-filter-panel { padding: 12px; }
  .vom-filter-panel__head small { display: none; }
  .vom-film-copy { padding-inline: 15px; }
  .vom-player { padding-inline: 10px; }
  .vom-waveform { height: 136px; }
  .vom-waveform__bars { gap: 2px; inset-inline: 9px; }
  .vom-waveform__bars i { width: 3px; }
  .vom-transport { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 8px; }
  .vom-play-control { width: 52px; height: 52px; }
}

@container vom-app (max-height: 650px) {
  .vom-sync-scroll { padding-top: 12px; }
  .vom-inner-head { margin-bottom: 9px; }
  .vom-mic-note { min-height: 54px; margin-bottom: 8px; }
  .vom-sync-film { min-height: 66px; margin-bottom: 8px; }
  .vom-sync-film > img { height: 50px; }
  .vom-waveform { height: 116px; }
  .vom-match { min-height: 52px; }
  .vom-transport { margin-top: 7px; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .vom-waveform__bars i {
    animation: none !important;
    transform: scaleY(.76);
  }
}

@keyframes vomLiveWave {
  0% { opacity: .55; transform: scaleY(.48); }
  45% { opacity: .92; transform: scaleY(1); }
  100% { opacity: .68; transform: scaleY(.66); }
}

.vom-demo__wordmark {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vom-demo__wordmark-icon {
  display: block;
  width: 54px !important;
  max-width: none !important;
  height: 54px !important;
  flex: 0 0 54px;
  border: 1px solid rgba(254,88,1,.22);
  border-radius: 17px;
  object-fit: cover !important;
}

.vom-wordmark {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.vom-wordmark__icon {
  display: block;
  width: 26px !important;
  max-width: none !important;
  height: 26px !important;
  flex: 0 0 26px;
  border-radius: 8px;
  object-fit: cover !important;
}

@media (max-width: 520px) {
  .vom-demo__wordmark-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px;
    border-radius: 14px;
  }
}