@font-face {
  font-family: Poppins;
  src: url("candy-poppins-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("candy-poppins-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("candy-poppins-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --bg: #0d0a0f;
  --panel: #1b1720;
  --pink: #f85f9e;
  --muted: #aaa4af;
  --line: #302a35;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-padding-top: 85px;
}

body {
  color: #fff;
  background: var(--bg);
  margin: 0;
  font-family: Poppins, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

button, input, textarea, select {
  font: inherit;
}

button, a, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}

button, a {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #ff8db8;
}

a:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #ff8db8;
}

button:focus, a:focus, input:focus, textarea:focus, select:focus {
  outline-color: #ff8db8;
}

button:disabled {
  opacity: .55;
  cursor: wait;
}

input, textarea, select {
  color: #fff;
  background: #29232f;
  border: 1px solid #4a4051;
  border-radius: 9px;
  max-width: 100%;
  padding: 12px;
}

input::placeholder, textarea::placeholder {
  color: #a8a0ad;
}

button span, a span {
  pointer-events: none;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

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

.muted {
  color: var(--muted);
}

.icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 25px;
  line-height: 1;
  display: inline-flex;
}

.pink-button {
  color: #160a13;
  text-align: center;
  white-space: normal;
  background: #f762a3;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 13px 22px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
}

.pink-button > .icon {
  margin-right: 9px;
}

.small-button {
  min-height: 38px;
  padding: 9px 15px;
}

.outline-button {
  border: 1px solid #54445b;
  border-radius: 10px;
  padding: 10px 15px;
}

.badge {
  color: #ffc4df;
  background: #403043;
  border-radius: 8px;
  margin: 12px 0 0;
  padding: 5px 10px;
  font-size: 11px;
  display: inline-block;
}

.modal-brand span, .footer-logo span, .mobile-logo span, .side-logo strong > span {
  color: #fa68a6;
}

.sidebar {
  z-index: 45;
  background: #1b1720;
  border-right: 1px solid #29242e;
  flex-direction: column;
  width: 100px;
  padding: 16px 6px 20px;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.side-logo {
  justify-content: center;
  align-items: center;
  height: 48px;
  display: flex;
}

.candy-mark {
  color: #ff78b3;
  font: 700 32px Poppins, Arial, sans-serif;
}

.side-logo strong {
  display: none;
}

.sidebar nav {
  margin-top: 18px;
}

.nav-item {
  color: #ddd5e1;
  text-align: center;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 8px 2px;
  font-size: 10px;
  line-height: 1.3;
  display: flex;
}

.nav-item .icon {
  margin-bottom: 6px;
}

.nav-item:hover {
  color: #ff97c2;
  background: #302438;
}

.sidebar [data-action="premium"] {
  color: #ff86b4;
  background: #44273a;
  margin-top: 10px;
}

.side-bottom {
  text-align: center;
  color: #9c929f;
  margin-top: auto;
  padding-top: 24px;
}

.side-bottom small {
  display: none;
}

.side-bottom button {
  margin: 10px auto;
  font-size: 10px;
  display: block;
}

.topbar {
  z-index: 40;
  background: #0d0a0f;
  border-bottom: 1px solid #ffffff09;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 28px;
  display: flex;
  position: fixed;
  top: 0;
  left: 100px;
  right: 0;
}

.category-tabs {
  align-items: center;
  height: 100%;
  display: flex;
}

.category-tab {
  color: #b9b0bf;
  white-space: nowrap;
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

.category-tab.active, .category-tab:hover {
  color: #ff77b1;
}

.category-tab.active:after {
  content: "";
  background: #ff67aa;
  border-radius: 2px;
  height: 2px;
  position: absolute;
  bottom: 9px;
  left: 24px;
  right: 24px;
}

.top-actions {
  align-items: center;
  max-width: 56%;
  display: flex;
}

.login-button {
  padding: 10px 0;
  font-weight: 600;
}

.menu-toggle, .mobile-logo {
  display: none;
}

.drawer-backdrop {
  z-index: 44;
  background: #000000a6;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bottom-nav {
  display: none;
}

main {
  min-width: 0;
  margin: 64px 0 0 100px;
  overflow: hidden;
}

.content-width {
  width: 100%;
  max-width: 1392px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

.hero {
  isolation: isolate;
  height: 560px;
  position: relative;
}

.hero-slide {
  background: linear-gradient(100deg, #291c36 0%, #45263f 60%, #44223c 100%);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hero-slide:after {
  content: "";
  background: linear-gradient(0deg, #0d0a0f 0%, #0000 37%), linear-gradient(90deg, #120819f2 0%, #1d0c1d8f 55%, #0000 75%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.slide-2 {
  background: #132e35;
}

.slide-3 {
  background: #332444;
}

.hero-art {
  width: 49%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.hero-art .portrait {
  opacity: .7;
  width: 100%;
  height: 100%;
}

.hero-copy {
  z-index: 2;
  max-width: 660px;
  padding: 70px 45px 150px;
  position: relative;
}

.hero-eyebrow {
  color: #ff9fc7;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.hero-copy h2 {
  letter-spacing: -1.6px;
  margin: 16px 0;
  font-size: max(29px, min(3.3vw, 52px));
  line-height: 1.15;
}

.hero-copy p {
  color: #e0cddd;
  max-width: 430px;
  font-size: 16px;
}

.hero-copy .pink-button {
  margin-top: 18px;
}

.hero-copy .pink-button > span + span {
  margin-left: 25px;
}

.carousel-controls {
  z-index: 3;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 171px;
  left: 48px;
}

.carousel-controls > button {
  color: #dcc7da;
  width: 25px;
  height: 28px;
  padding: 0;
  font-size: 24px;
}

.carousel-controls .carousel-dot {
  width: 17px;
  position: relative;
}

.carousel-dot:after {
  content: "";
  background: #685467;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 11px;
  left: 5px;
}

.carousel-dot[aria-pressed="true"]:after {
  background: #fd6fa9;
  border-radius: 5px;
  width: 16px;
  left: 0;
}

.characters {
  z-index: 4;
  margin-top: -145px;
  position: relative;
}

.filters {
  align-items: center;
  min-width: 0;
  margin-bottom: 18px;
  display: flex;
}

.search-wrap {
  background: #1b1720;
  border: 1px solid #38313e;
  border-radius: 25px;
  flex-shrink: 0;
  align-items: center;
  width: 170px;
  height: 40px;
  margin-right: 14px;
  padding: 0 12px;
  display: flex;
}

.search-wrap .icon {
  margin-right: 6px;
  font-size: 23px;
}

.search-wrap input {
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 12px;
}

.filter-buttons {
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.filter-buttons::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  white-space: nowrap;
  background: #28212f;
  border-radius: 25px;
  height: 40px;
  padding: 0 19px;
  font-weight: 500;
}

.filter-chip[aria-pressed="true"] {
  color: #1c0e18;
  background: #f58dba;
}

.character-row {
  grid-gap: 16px;
  scrollbar-color: #513147 #19121e;
  grid-template-rows: repeat(2, 300px);
  grid-auto-columns: 180px;
  grid-auto-flow: column;
  padding-bottom: 12px;
  display: grid;
  overflow: auto;
}

.character-card {
  background: #251c29;
  border-radius: 18px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.character-photo {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.character-photo:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(0deg, #0e0712fa, #0000 75%);
  position: absolute;
  top: 35%;
  bottom: 0;
  left: 0;
  right: 0;
}

.portrait {
  background-image: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  width: 100%;
  height: 100%;
  min-height: 1px;
}

.portrait-0 {
  background-position: 0 0;
}

.portrait-1 {
  background-position: 33.3333% 0;
}

.portrait-2 {
  background-position: 66.6667% 0;
}

.portrait-3 {
  background-position: 100% 0;
}

.portrait-4 {
  background-position: 0 100%;
}

.portrait-5 {
  background-position: 33.3333% 100%;
}

.portrait-6 {
  background-position: 66.6667% 100%;
}

.portrait-7 {
  background-position: 100% 100%;
}

.character-photo .portrait {
  transition: transform .3s;
}

.card-tag {
  color: #27101e;
  z-index: 2;
  background: #ff6fa8;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  top: 11px;
  left: 10px;
}

.card-bottom {
  z-index: 2;
  padding: 13px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.card-bottom strong {
  font-size: 19px;
}

.card-description {
  color: #ddd0dc;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}

.save-button {
  z-index: 3;
  background: #120917a6;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 19px;
  position: absolute;
  top: 8px;
  right: 8px;
}

.save-button[aria-pressed="true"] {
  color: #ff83b8;
}

.recommended {
  margin-top: 40px;
  margin-bottom: 30px;
}

.recommended h2 {
  margin: 0 0 20px;
  font-size: 22px;
}

.recommend-grid {
  grid-gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.recommend-grid .character-card {
  height: 310px;
}

.faq {
  max-width: 1000px;
  margin-top: 65px;
  margin-bottom: 60px;
}

.faq h2 {
  text-align: center;
  margin-bottom: 28px;
  font-size: 28px;
}

.faq details {
  background: #18131e;
  border: 1px solid #342b3c;
  border-radius: 12px;
  margin-bottom: 10px;
}

.faq summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary > span:last-child {
  color: #e191b7;
  margin-left: 15px;
  font-size: 24px;
}

.faq details p {
  color: #bbb0c1;
  margin: 0;
  padding: 0 18px 20px;
  font-size: 13px;
}

.faq details[open] summary > span:last-child {
  transform: rotate(45deg);
}

footer {
  border-top: 1px solid #2c2333;
  max-width: 1392px;
  margin: auto;
  padding: 35px 32px 40px;
}

.footer-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-logo {
  letter-spacing: -1.5px;
  font-size: 30px;
  font-weight: 700;
}

footer h2 {
  font-size: 18px;
}

footer p, footer small {
  max-width: 900px;
  font-size: 11px;
}

.footer-links {
  flex-wrap: wrap;
  margin: 22px -7px;
  display: flex;
}

.footer-links button {
  color: #e0d4e5;
  margin: 4px 7px;
  padding: 5px 0;
  font-size: 12px;
}

.copyright {
  color: #786c7f;
  margin-top: 24px;
}

.language-wrap {
  max-width: 180px;
  position: relative;
}

.language-trigger {
  background: #231b29;
  border: 1px solid #43364b;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
}

.language-options {
  z-index: 42;
  background: #28202e;
  border: 1px solid #4c3a57;
  border-radius: 10px;
  width: 205px;
  max-height: 340px;
  padding: 7px;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  overflow-y: auto;
  box-shadow: 0 15px 50px #0008;
}

.language-options button {
  text-align: left;
  border-radius: 6px;
  width: 100%;
  padding: 9px;
  font-size: 13px;
  display: block;
}

.language-options button:hover {
  background: #563447;
}

.profile {
  padding-top: 28px;
  padding-bottom: 35px;
}

.back-link {
  color: #d2b8ce;
  margin-bottom: 24px;
  display: inline-block;
}

.profile-layout {
  grid-gap: 44px;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1fr);
  max-width: 1090px;
  margin: auto;
  display: grid;
}

.profile-media {
  background: #231c29;
  border-radius: 20px;
  align-self: start;
  overflow: hidden;
}

.profile-portrait {
  cursor: zoom-in;
  width: 100%;
  height: 530px;
  padding: 0;
  display: block;
  overflow: hidden;
}

.profile-portrait .portrait {
  width: 100%;
  height: 100%;
}

.profile-media-footer {
  color: #a89aaf;
  padding: 13px 18px;
  font-size: 10px;
}

.profile-copy h1 {
  margin: 18px 0;
  font-size: 44px;
  line-height: 1.1;
}

.profile-copy h1 small {
  color: #a292ab;
  font-size: 25px;
  font-weight: 400;
}

.availability {
  color: #c2a2cb;
  font-size: 11px;
}

.availability > span {
  color: #c8bdcf;
}

.profile-bio {
  color: #c4b5cd;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.8;
}

.profile-actions {
  align-items: stretch;
  display: flex;
}

.profile-actions > .pink-button {
  flex: 1;
}

.profile-actions > .outline-button {
  margin-left: 12px;
  font-size: 25px;
}

.profile-info {
  border-top: 1px solid #332a39;
  margin-top: 28px;
  padding-top: 8px;
}

.profile-info h2 {
  margin: 20px 0 8px;
  font-size: 14px;
}

.profile-info p {
  color: #c5b7cc;
  font-size: 13px;
}

.profile-tags {
  flex-wrap: wrap;
  margin-left: -5px;
  display: flex;
}

.profile-tags span {
  background: #271b30;
  border: 1px solid #45334e;
  border-radius: 24px;
  margin: 3px 5px;
  padding: 6px 12px;
  font-size: 11px;
}

.profile-info blockquote {
  color: #dcc9e1;
  background: #211726;
  border-left: 3px solid #e56caa;
  border-radius: 0 10px 10px 0;
  margin: 10px 0 0;
  padding: 12px 18px;
  font-size: 13px;
}

.mini-notice {
  margin-top: 20px;
  font-size: 10px;
}

.chat-shell {
  grid-template-columns: 260px minmax(0, 1fr);
  max-width: none;
  height: calc(100vh - 64px);
  min-height: 680px;
  max-height: 1100px;
  padding: 0;
  display: grid;
}

.chat-characters {
  background: #151018;
  border-right: 1px solid #302537;
  padding: 24px 12px;
  overflow-y: auto;
}

.chat-characters h2 {
  margin: 0 0 20px;
  padding: 0 12px;
  font-size: 20px;
}

.chat-person {
  border-radius: 12px;
  align-items: center;
  margin-bottom: 5px;
  padding: 12px;
  display: flex;
}

.chat-person.active {
  background: #382139;
}

.chat-person > span {
  min-width: 0;
  margin-left: 12px;
}

.chat-person small {
  color: #aa98b3;
  margin-top: 5px;
  font-size: 10px;
  display: block;
}

.avatar {
  border-radius: 12px;
  flex-shrink: 0;
  width: 44px;
  height: 58.6667px;
}

.chat-conversation {
  background: radial-gradient(at 100% 0, #29152d 0, #0000 55%);
  flex-direction: column;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.chat-heading {
  border-bottom: 1px solid #33253a;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  min-height: 88px;
  padding: 14px 24px;
  display: flex;
}

.chat-profile-link {
  align-items: center;
  min-width: 0;
  display: flex;
}

.chat-profile-link strong {
  font-size: 20px;
}

.chat-profile-link small {
  color: #b5a2c0;
  font-size: 10px;
  display: block;
}

.chat-heading > .outline-button {
  max-width: 130px;
  margin-left: 10px;
  font-size: 10px;
}

.chat-notice {
  color: #af97ba;
  background: #221727;
  padding: 10px 24px;
  font-size: 10px;
}

.message-list {
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  min-height: 150px;
  padding: 28px;
  display: flex;
  overflow-y: auto;
}

.message {
  word-wrap: break-word;
  overflow-wrap: break-word;
  background: #2b1e32;
  border-radius: 16px;
  align-self: flex-start;
  max-width: 75%;
  margin: 0 0 16px;
  padding: 12px 17px;
}

.message strong {
  color: #e194bd;
  font-size: 10px;
}

.message p {
  margin: 4px 0 0;
  font-size: 14px;
}

.message.sent {
  background: #6d3457;
  align-self: flex-end;
}

.message.sent strong {
  color: #f6ccdf;
}

.topic-list {
  flex-shrink: 0;
  padding: 10px 24px;
  display: flex;
  overflow-x: auto;
}

.topic-list button {
  white-space: nowrap;
  color: #e0bddc;
  border: 1px solid #634064;
  border-radius: 25px;
  padding: 8px 13px;
  font-size: 11px;
}

.topic-list button + button {
  margin-left: 8px;
}

#chat-form {
  background: #231528;
  border: 1px solid #50324f;
  border-radius: 26px;
  flex-shrink: 0;
  align-items: center;
  margin: 4px 24px 12px;
  padding: 8px;
  display: flex;
}

#message {
  resize: none;
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  max-height: 90px;
  padding: 7px 10px;
  font-size: 14px;
}

.send-button {
  border-radius: 50%;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  margin-left: 7px;
  padding: 0;
}

.send-button .icon {
  margin: 0;
  font-size: 19px;
}

.chat-status {
  color: #eabbd8;
  margin: 0 0 8px;
  padding: 0 28px;
  font-size: 11px;
}

.modal-open {
  overflow: hidden;
}

.modal {
  z-index: 60;
  -webkit-overflow-scrolling: touch;
  background: #060309cc;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.modal-panel {
  background: #211827;
  border: 1px solid #4a3555;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  padding: 32px;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 30px 100px #0008;
}

.modal-panel h2 {
  margin: 10px 36px 17px 0;
  font-size: 25px;
  line-height: 1.25;
}

.modal-panel > p {
  font-size: 14px;
  line-height: 1.8;
}

.modal-close {
  z-index: 2;
  background: #35253e;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 27px;
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 12px;
}

.modal-panel > .pink-button {
  margin-top: 15px;
}

.modal-brand {
  letter-spacing: -1px;
  font-size: 28px;
  display: block;
}

.modal-panel form {
  margin-top: 22px;
}

.modal-panel label {
  margin: 16px 0 7px;
  font-size: 12px;
  display: block;
}

.modal-panel input, .modal-panel select {
  width: 100%;
  min-height: 46px;
}

.modal-panel form > .pink-button {
  width: 100%;
  margin-top: 22px;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 120px;
}

.password-wrap button {
  color: #e7b0ce;
  width: 110px;
  min-height: 35px;
  font-size: 10px;
  position: absolute;
  top: 5px;
  right: 6px;
}

.auth-tabs {
  background: #33263b;
  border-radius: 9px;
  padding: 4px;
  display: flex;
}

.auth-tabs button {
  white-space: normal;
  border-radius: 6px;
  width: 50%;
  padding: 9px;
  font-size: 13px;
}

.auth-tabs button.active {
  color: #ffc6df;
  background: #684059;
}

.form-status {
  color: #f1cee0;
  background: #3c293f;
  border-left: 2px solid #e87cb3;
  padding: 10px;
  font-size: 12px !important;
}

.collection-panel {
  max-width: 850px;
}

.saved-grid {
  grid-gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.saved-grid .character-card {
  height: 270px;
}

.saved-grid .card-bottom strong {
  font-size: 17px;
}

.gallery-panel {
  border-radius: 18px;
  width: 100%;
  max-width: 510px;
  height: 80vh;
  max-height: 760px;
  position: relative;
  overflow: hidden;
}

#gallery-image {
  width: 100%;
  height: 100%;
}

#created-character {
  background: #34223d;
  border-radius: 12px;
  margin-top: 15px;
  padding: 20px;
}

#created-character .custom-avatar {
  text-align: center;
  background: #734260;
  border-radius: 14px;
  width: 48px;
  height: 48px;
  margin-right: 15px;
  font-size: 30px;
  line-height: 48px;
  display: inline-block;
}

#custom-name {
  overflow-wrap: break-word;
}

#custom-interest {
  font-size: 12px;
}

#create-form > small {
  margin-top: 20px;
  display: block;
}

@media (min-width: 1500px) {
  .sidebar {
    width: 220px;
    padding: 22px 18px;
  }

  .side-logo {
    justify-content: flex-start;
  }

  .side-logo strong {
    letter-spacing: -1px;
    margin-left: 12px;
    font-size: 25px;
    display: block;
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 50px;
    padding: 12px;
    font-size: 14px;
  }

  .nav-item .icon {
    width: 25px;
    margin: 0 17px 0 0;
  }

  .side-bottom {
    text-align: left;
  }

  .side-bottom small {
    font-size: 10px;
    display: block;
  }

  .side-bottom button {
    margin: 10px 0;
  }

  .topbar {
    left: 220px;
  }

  main {
    margin-left: 220px;
  }

  .hero-copy {
    max-width: 760px;
    padding-left: max(45px, 50vw - 778px);
  }

  .hero-art {
    width: 42%;
  }

  .character-row {
    grid-template-rows: repeat(2, 333px);
    grid-auto-columns: 200px;
  }
}

@media (max-width: 1100px) {
  .topbar {
    padding-left: 15px;
    padding-right: 15px;
  }

  .category-tab {
    padding-left: 14px;
    padding-right: 14px;
  }

  .top-actions > * + * {
    margin-left: 12px;
  }

  .top-actions .pink-button {
    font-size: 11px;
  }

  .profile-layout {
    grid-gap: 25px;
  }

  .profile-copy h1 {
    font-size: 38px;
  }

  .chat-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .chat-heading {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 70px;
  }

  .sidebar {
    z-index: 50;
    width: 240px;
    padding: 20px 14px;
    transition: transform .2s;
    transform: translateX(-100%);
  }

  .drawer-open .sidebar {
    transform: translateX(0);
  }

  .sidebar .side-logo {
    justify-content: flex-start;
  }

  .side-logo strong {
    margin-left: 10px;
    font-size: 25px;
    display: block;
  }

  .sidebar .nav-item {
    text-align: left;
    flex-direction: row;
    justify-content: flex-start;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .nav-item .icon {
    width: 25px;
    margin: 0 13px 0 0;
  }

  .side-bottom {
    text-align: left;
  }

  .side-bottom button {
    margin: 7px 10px;
    font-size: 11px;
    display: inline-block;
  }

  .side-bottom small {
    display: block;
  }

  .topbar {
    height: 53px;
    padding: 0 12px;
    left: 0;
  }

  .menu-toggle {
    width: 32px;
    height: 34px;
    padding: 0;
    display: block;
  }

  .menu-toggle > span:last-child {
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .menu-toggle .icon {
    font-size: 22px;
  }

  .mobile-logo {
    letter-spacing: -1px;
    margin-left: 8px;
    font-size: 20px;
    font-weight: 700;
    display: block;
  }

  .category-tabs {
    margin-left: auto;
  }

  .category-tab {
    padding: 15px 9px;
    font-size: 11px;
  }

  .category-tab.active:after {
    bottom: 7px;
    left: 9px;
    right: 9px;
  }

  .top-actions {
    display: none;
  }

  main {
    margin: 53px 0 0;
    padding-bottom: 92px;
  }

  .content-width {
    padding-left: 11px;
    padding-right: 11px;
  }

  .hero {
    height: 190px;
  }

  .hero-copy {
    max-width: 68%;
    padding: 20px 15px 28px;
  }

  .hero-copy h2 {
    letter-spacing: -.7px;
    margin: 6px 0;
    font-size: 25px;
    line-height: 1.15;
  }

  .hero-eyebrow {
    letter-spacing: .5px;
    font-size: 7px;
  }

  .hero-copy p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 7px 0;
    font-size: 9px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
  }

  .hero-copy .pink-button {
    min-height: 29px;
    margin-top: 5px;
    padding: 7px 11px;
    font-size: 9px;
  }

  .hero-copy .pink-button > span + span {
    margin-left: 9px;
  }

  .hero-art {
    width: 44%;
    height: 100%;
    right: 0;
  }

  .hero-slide:after {
    background: linear-gradient(0deg, #0d0a0f, #0000 18%), linear-gradient(90deg, #221427 0%, #20102399 60%, #0000);
  }

  .carousel-controls {
    bottom: 9px;
    left: 15px;
  }

  .carousel-controls > button {
    height: 17px;
    font-size: 18px;
  }

  .carousel-dot:after {
    width: 5px;
    height: 5px;
    top: 6px;
  }

  .characters {
    margin-top: 15px;
  }

  .characters h1 {
    margin: 0 0 13px;
    font-size: 16px;
    line-height: 24px;
  }

  .filters {
    align-items: center;
    margin-bottom: 13px;
  }

  .search-wrap {
    width: 38px;
    height: 38px;
    margin-right: 8px;
    padding: 0 7px;
    transition: width .15s;
    overflow: hidden;
  }

  .search-wrap:focus-within {
    width: 150px;
  }

  .search-wrap .icon {
    min-width: 22px;
    margin: 0;
    font-size: 23px;
  }

  .search-wrap input {
    min-width: 110px;
    margin-left: 8px;
    font-size: 11px;
  }

  .filter-chip {
    height: 38px;
    padding: 0 15px;
    font-size: 11px;
  }

  .filter-chip + .filter-chip {
    margin-left: 7px;
  }

  .character-row {
    grid-gap: 10px;
    grid-template-rows: repeat(2, calc(55.555vw - 21.6667px));
    grid-auto-columns: calc(33.333vw - 13px);
    margin-right: -11px;
    padding-right: 11px;
  }

  .character-card {
    border-radius: 12px;
  }

  .card-bottom {
    padding: 8px;
  }

  .card-bottom strong {
    font-size: 14px;
  }

  .card-bottom strong small {
    font-size: 10px;
  }

  .card-description {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.35;
  }

  .card-tag {
    padding: 2px 4px;
    font-size: 7px;
    top: 7px;
    left: 6px;
  }

  .save-button {
    width: 25px;
    height: 25px;
    font-size: 17px;
    top: 5px;
    right: 5px;
  }

  .recommended {
    margin-top: 28px;
    margin-bottom: 25px;
  }

  .recommended h2 {
    margin-bottom: 14px;
    font-size: 18px;
  }

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

  .recommend-grid .character-card {
    height: 280px;
  }

  .recommend-grid .card-bottom strong {
    font-size: 19px;
  }

  .recommend-grid .card-description {
    font-size: 10px;
  }

  .faq {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .faq h2 {
    margin-bottom: 20px;
    font-size: 22px;
  }

  .faq summary {
    padding: 15px;
    font-size: 13px;
  }

  .faq details p {
    padding: 0 15px 17px;
    font-size: 12px;
  }

  footer {
    padding: 25px 15px 15px;
  }

  .footer-logo {
    font-size: 25px;
  }

  footer h2 {
    font-size: 16px;
  }

  .language-wrap {
    max-width: 155px;
  }

  .language-trigger {
    padding: 8px;
    font-size: 11px;
  }

  .language-trigger > span {
    margin: 0 9px;
  }

  .language-options {
    width: 185px;
    max-height: 300px;
  }

  .footer-links {
    margin-top: 18px;
  }

  .footer-links button {
    font-size: 11px;
  }

  footer p, footer small {
    font-size: 10px;
  }

  .bottom-nav {
    bottom: 12px;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 42;
    background: #2a2030;
    border: 1px solid #4d3b53;
    border-radius: 35px;
    justify-content: space-around;
    align-items: center;
    min-height: 66px;
    padding: 9px 6px;
    display: flex;
    position: fixed;
    box-shadow: 0 8px 30px #0009;
  }

  .bottom-item {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 0 3px;
    font-size: 9px;
    line-height: 1.3;
    display: flex;
  }

  .bottom-item .icon {
    margin-bottom: 4px;
    font-size: 23px;
  }

  .bottom-item:hover {
    color: #ff90bd;
  }

  .profile {
    padding-top: 20px;
  }

  .profile-layout {
    display: block;
  }

  .back-link {
    margin-bottom: 15px;
  }

  .profile-media {
    max-width: 450px;
    margin: auto;
  }

  .profile-portrait {
    height: 460px;
  }

  .profile-copy {
    padding: 25px 4px 0;
  }

  .profile-copy h1 {
    margin: 12px 0;
    font-size: 34px;
  }

  .profile-copy h1 small {
    font-size: 23px;
  }

  .profile-bio {
    font-size: 14px;
  }

  .profile-info {
    margin-top: 24px;
  }

  .profile-info h2 {
    font-size: 13px;
  }

  .profile-media-footer {
    padding: 10px 13px;
    font-size: 9px;
  }

  .modal {
    padding: 12px;
  }

  .modal-panel {
    border-radius: 17px;
    max-height: 90vh;
    padding: 25px 20px;
  }

  .modal-panel h2 {
    margin-right: 25px;
    font-size: 23px;
  }

  .modal-panel > p {
    font-size: 12px;
  }

  .modal-brand {
    font-size: 25px;
  }

  .modal-panel label {
    font-size: 12px;
  }

  .modal-panel input {
    font-size: 14px;
  }

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

  .saved-grid .character-card {
    height: 240px;
  }

  .saved-grid .card-description {
    font-size: 9px;
  }

  .gallery-panel {
    height: 76vh;
  }

  .chat-shell {
    height: calc(100vh - 145px);
    min-height: 550px;
    max-height: none;
    display: block;
  }

  .chat-characters {
    display: none;
  }

  .chat-conversation {
    height: 100%;
  }

  .chat-heading {
    min-height: 68px;
    padding: 9px 12px;
  }

  .chat-profile-link strong {
    font-size: 16px;
  }

  .chat-profile-link small {
    font-size: 9px;
  }

  .chat-heading .avatar {
    border-radius: 10px;
    width: 34px;
    height: 45.333px;
  }

  .chat-heading > .outline-button {
    max-width: 105px;
    padding: 7px;
    font-size: 9px;
  }

  .chat-notice {
    padding: 9px 13px;
    font-size: 9px;
  }

  .message-list {
    padding: 18px 12px;
  }

  .message {
    border-radius: 14px;
    max-width: 83%;
    padding: 10px 13px;
  }

  .message p {
    font-size: 13px;
  }

  .topic-list {
    padding: 8px 12px;
  }

  .topic-list button {
    padding: 7px 10px;
    font-size: 10px;
  }

  #chat-form {
    margin: 4px 12px 10px;
    padding: 6px;
  }

  #message {
    font-size: 13px;
  }

  .send-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .chat-status {
    padding: 0 17px;
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .mobile-logo {
    margin-left: 4px;
    font-size: 18px;
  }

  .category-tab {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
  }

  .hero-copy h2 {
    font-size: 22px;
  }

  .hero-copy {
    max-width: 71%;
  }

  .recommended .character-card {
    height: 250px;
  }

  .profile-portrait {
    height: 415px;
  }
}

.icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.brand-image {
  width: 130px;
  height: auto;
  display: block;
}

.side-logo > .brand-image {
  display: none;
}

.footer-logo {
  object-fit: contain;
  width: 118px;
  height: 25px;
}

.hero-art .portrait, .profile-portrait .portrait, #gallery-image > .portrait {
  height: 0;
  padding-top: 133.333%;
}

.character-photo .portrait {
  transform-origin: 50% 0;
  height: 0;
  padding-top: 133.333%;
  transform: scale(1.25);
}

.sidebar {
  background: #18151b;
}

.pink-button {
  background: #f97187;
}

.small-button {
  background: #ee5876;
}

.hero-copy .pink-button {
  color: #fff;
  background: #f53b70;
}

.filter-chip[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(163deg, #1a1a1a, #2a1e21);
  border: 2px solid #e75275;
}

.card-tag {
  background: #f97187;
}

.hero-copy, .card-description, .nav-item, .profile-copy, .message {
  overflow-wrap: break-word;
}

.side-bottom > .quick-language {
  color: #e3c8df;
  font-size: 15px;
}

.chat-heading .outline-button {
  line-height: 1.4;
}

.hero-copy .pink-button {
  max-width: 100%;
}

@media (min-width: 1500px) {
  .side-logo > .brand-image {
    display: block;
  }

  .side-logo > .candy-mark {
    display: none;
  }
}

@media (max-width: 767px) {
  .mobile-logo .brand-image {
    width: 92px;
  }

  .side-logo > .brand-image {
    margin-left: 10px;
    display: block;
  }

  .side-logo > .candy-mark {
    display: none;
  }

  .hero, .hero-slide {
    height: auto;
    min-height: 190px;
  }

  .hero-copy {
    min-height: 190px;
    padding-bottom: 35px;
  }

  .hero-copy p {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }

  .hero-art {
    overflow: hidden;
  }

  .card-description {
    font-size: 9px;
  }

  .chat-heading .outline-button {
    white-space: normal;
  }

  .chat-profile-link {
    flex: 1;
  }

  .chat-profile-link > span {
    min-width: 0;
  }

  .chat-profile-link strong {
    overflow-wrap: break-word;
    display: block;
  }

  .category-tab {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .topbar .category-tabs {
    max-width: 58%;
  }

  .topbar .category-tab {
    max-width: 90px;
  }

  .topbar .mobile-logo {
    margin-left: 5px;
  }

  .topbar .category-tab {
    padding-left: 6px;
    padding-right: 6px;
  }
}

.sidebar-auth {
  display: none;
}

.hero-copy h2 {
  font-size: 42px;
  font-size: max(29px, min(3.3vw, 52px));
}

.chat-shell {
  grid-template-columns: 340px minmax(0, 1fr);
}

@media (max-width: 1100px) {
  .chat-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .sidebar {
    overflow-y: auto;
  }

  .sidebar-auth {
    flex-direction: column;
    margin: 16px 6px 0;
    display: flex;
  }

  .sidebar-auth button {
    min-height: 35px;
    margin-bottom: 7px;
    padding: 8px;
    font-size: 12px;
  }

  .hero-copy h2 {
    font-size: 25px;
  }

  .chat-shell {
    display: block;
  }

  .sidebar .side-bottom {
    padding-top: 15px;
  }

  .sidebar nav {
    margin-top: 12px;
  }

  .sidebar .nav-item {
    min-height: 44px;
  }

  .sidebar [data-action="premium"] {
    margin-top: 4px;
  }
}

@media (max-width: 360px) {
  .hero-copy h2 {
    font-size: 22px;
  }
}

.drawer-close {
  display: none;
}

@media (max-width: 767px) {
  .drawer-close {
    background: #33283a;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 26px;
    display: block;
    position: absolute;
    top: 12px;
    right: 10px;
  }

  .sidebar > .side-logo {
    margin-top: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.portrait, .hero-art .portrait, .profile-portrait .portrait, #gallery-image > .portrait, .character-photo .portrait {
  background-position: top;
  background-size: cover;
  height: 100%;
  padding-top: 0;
  transform: none;
}

.portrait-0 {
  background-image: url("character-corinne.jpg");
  background-position: top;
}

.portrait-1 {
  background-image: url("character-margot.jpg");
  background-position: top;
}

.portrait-2 {
  background-image: url("character-carolina.jpg");
  background-position: top;
}

.portrait-3 {
  background-image: url("character-diana.jpg");
  background-position: top;
}

.portrait-4 {
  background-image: url("character-alma.jpg");
  background-position: top;
}

.portrait-5 {
  background-image: url("character-suzu.jpg");
  background-position: top;
}

.portrait-6 {
  background-image: url("character-mila.jpg");
  background-position: top;
}

.portrait-7 {
  background-image: url("character-delilah.jpg");
  background-position: top;
}

.portrait-8 {
  background-image: url("character-charles.jpg");
  background-position: top;
}

.portrait-9 {
  background-image: url("character-kenji.jpg");
  background-position: top;
}

.portrait-10 {
  background-image: url("character-erik.jpg");
  background-position: top;
}

.portrait-11 {
  background-image: url("character-marisol.jpg");
  background-position: top;
}

.portrait-12 {
  background-image: url("character-elowen.jpg");
  background-position: top;
}

@media (max-width: 767px) {
  .character-row {
    grid-auto-columns: calc(33.333vw - 13px);
  }

  .hero-copy {
    min-height: 190px;
  }

  .hero-art .portrait {
    height: 100%;
  }
}

:root {
  --pink: #ec748c;
  --panel: #1b1b1b;
  --line: #333;
  --muted: #999;
}

body {
  font-family: Poppins, Arial, sans-serif;
}

.pink-button {
  color: #fff;
  background: #ec748c;
  font-size: 13px;
}

.pink-button:hover {
  background: #f08ba0;
}

.nav-icon {
  object-fit: contain;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.topbar {
  z-index: 45;
  background: #131313;
  border-bottom: 1px solid #353535;
  justify-content: flex-start;
  height: 64px;
  padding: 0 32px;
  left: 0;
}

.header-brand {
  align-items: center;
  width: 184px;
  min-width: 184px;
  display: flex;
}

.menu-toggle {
  width: 28px;
  height: 32px;
  margin-right: 24px;
  padding: 0;
  display: block;
}

.menu-toggle > .nav-icon {
  width: 24px;
  height: 24px;
}

.menu-toggle > span {
  display: none;
}

.brand-link, .brand-image {
  width: 106px;
  height: auto;
  display: block;
}

.category-tabs {
  height: 64px;
  margin-left: 8px;
}

.category-tab {
  color: #ddd;
  align-items: center;
  height: 100%;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.category-tab img {
  width: 19px;
  height: 19px;
  margin-right: 5px;
}

.category-tab.active {
  color: #e87a92;
}

.category-tab.active:after {
  background: #e77b92;
  height: 4px;
  bottom: 0;
  left: 0;
  right: 0;
}

.top-actions {
  max-width: none;
  margin-left: auto;
}

.top-actions > * + * {
  margin-left: 8px;
}

.small-button {
  background: #ee5876;
  border-radius: 25px;
  min-height: 34px;
  padding: 8px 14px;
  font-size: 12px;
}

.login-button {
  border: 1px solid #3a3a3a;
  border-radius: 24px;
  padding: 7px 15px;
  font-size: 12px;
}

.sidebar {
  z-index: 44;
  background: #131313;
  border-color: #363636;
  width: 220px;
  padding: 24px;
  top: 64px;
}

.sidebar > nav {
  margin: 0;
}

.nav-item {
  text-align: left;
  color: #eee;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  display: flex;
}

.nav-item > .nav-icon {
  width: 17px;
  height: 17px;
  margin-right: 9px;
}

.nav-item.active, .nav-item:hover {
  color: #fff;
  background: #303030;
}

.nav-item em {
  background: #c8475b;
  border-radius: 12px;
  margin-left: auto;
  padding: 1px 4px;
  font-size: 9px;
  font-style: normal;
}

.sidebar .nav-item[data-action="premium"] {
  color: #e4cf98;
  background: none;
  margin-top: 8px;
}

.side-footer {
  margin-top: auto;
  padding-top: 32px;
}

.language-trigger, .more-trigger {
  text-align: left;
  background: none;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.language-trigger > span {
  margin: 0;
}

.language-trigger > span:first-child {
  margin-right: 8px;
}

.language-options {
  background: #252525;
  border-color: #3a3a3a;
  width: auto;
  min-width: 150px;
  left: 0;
  right: 0;
}

.more-wrap {
  margin-top: 8px;
  position: relative;
}

.more-trigger .nav-icon {
  width: 17px;
  height: 17px;
  margin-right: 9px;
}

.more-options {
  z-index: 51;
  background: #242424;
  border: 1px solid #363636;
  border-radius: 9px;
  width: 190px;
  padding: 6px;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
}

.more-options button {
  text-align: left;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  display: block;
}

.side-legal {
  color: #aaa;
  flex-wrap: wrap;
  justify-content: center;
  margin: 16px -5px -5px;
  font-size: 8px;
  display: flex;
}

.side-legal button {
  padding: 3px 5px;
  font-size: 8px;
}

.side-legal > span {
  padding-top: 3px;
}

.drawer-close, .sidebar-auth {
  display: none;
}

main {
  margin-left: 220px;
}

.sidebar-collapsed .sidebar {
  width: 100px;
  padding: 24px 15px;
}

.sidebar-collapsed .nav-item {
  flex-direction: column;
  justify-content: center;
  min-height: 55px;
  padding: 8px 4px;
  font-size: 9px;
}

.sidebar-collapsed .nav-item .nav-icon {
  width: 21px;
  height: 21px;
  margin: 0 0 5px;
}

.sidebar-collapsed .nav-item em, .sidebar-collapsed .side-legal, .sidebar-collapsed .side-footer .language-trigger > span:last-child, .sidebar-collapsed .more-trigger > span {
  display: none;
}

.sidebar-collapsed main {
  margin-left: 100px;
}

.sidebar-collapsed .language-trigger, .sidebar-collapsed .more-trigger {
  justify-content: center;
  padding: 8px;
}

.sidebar-collapsed .more-trigger img {
  margin: 0;
}

.hero {
  max-width: 1500px;
  height: 560px;
  min-height: 0;
  margin: 0 auto;
}

.hero-slide {
  height: 100%;
  min-height: 0;
}

.hero-slide:after {
  display: none;
}

.hero-background {
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.slide-1 .hero-background {
  background-image: url("banner-1-safe.jpg");
}

.slide-2 .hero-background {
  filter: brightness(.65) saturate(.65);
  background-image: url("banner-5-desktop.jpg");
}

.slide-3 .hero-background {
  background-image: url("banner-3-safe.jpg");
}

.slide-4 .hero-background {
  background-image: url("banner-4-safe.jpg");
}

.slide-5 .hero-background {
  background-image: url("banner-5-desktop.jpg");
}

.hero-scrim {
  background: linear-gradient(0deg, #0d0a0f 1%, #0d0a0f80 22%, #0000 45%), linear-gradient(90deg, #0d0a0fc7, #0d0a0f66 30%, #0000 58%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-copy {
  text-align: center;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 370px;
  max-width: none;
  height: 331px;
  min-height: 0;
  padding: 0;
  display: flex;
  position: absolute;
  top: 0;
  left: 72px;
}

.hero-wordmark-slot {
  justify-content: center;
  align-items: flex-end;
  width: 348px;
  height: 160px;
  margin-bottom: 13px;
  display: flex;
}

.hero-wordmark {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  max-height: 160px;
}

.hero-subtitle {
  white-space: nowrap;
  text-shadow: 0 1px 4px #0008;
  height: 24px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
}

.hero-subtitle em {
  color: #ff8a00;
  font-style: normal;
  font-weight: 800;
}

.hero-copy .hero-cta {
  background: #f53b70;
  border: 1px solid #ffffff4d;
  border-radius: 999px;
  max-width: none;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 38px;
  font-size: 15px;
  box-shadow: 0 8px 22px #ee587659;
}

.slide-5 .hero-subtitle {
  display: none;
}

.slide-5 .hero-wordmark-slot {
  margin-bottom: 22px;
}

.hero-chinese-wordmark {
  text-shadow: 0 2px 8px #0008;
  letter-spacing: -2px;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.2;
}

.halloween-wordmark {
  color: #ffad18;
  font-family: Georgia, serif;
  transform: rotate(-5deg);
}

.live-wordmark {
  color: #ecd39b;
  font-family: Georgia, serif;
  font-style: italic;
}

.slide-2 .hero-subtitle {
  white-space: normal;
  max-width: 280px;
  font-size: 11px;
  line-height: 17px;
}

.hero-arrow {
  z-index: 4;
  color: #fff9;
  width: 50px;
  font: 38px Arial, sans-serif;
  position: absolute;
  top: 0;
  bottom: 164px;
}

.previous-arrow {
  left: 0;
}

.next-arrow {
  right: 0;
}

.hero-arrow:hover {
  color: #fff;
  background: #0003;
}

.carousel-controls {
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-controls .carousel-dot {
  width: 24px;
  min-width: 24px;
  height: 24px;
}

.carousel-dot:after {
  background: #fff6;
  border-radius: 5px;
  width: 15px;
  height: 4px;
  top: 10px;
  left: 5px;
}

.carousel-dot[aria-pressed="true"]:after {
  background: #f0829b;
  width: 15px;
  left: 5px;
}

.characters {
  margin-top: -164px;
}

.characters h1 {
  margin: 14px 0 18px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.explore-prefix {
  color: #f37c98;
}

.heading-chevron {
  color: #aaa;
  margin-left: 6px;
  font-size: 24px;
  font-weight: 400;
}

.filters {
  height: 40px;
  margin-bottom: 12px;
  position: relative;
}

.search-wrap {
  background: #272727;
  border: 0;
  width: 170px;
  height: 40px;
  margin-right: 30px;
  padding: 0 20px;
}

.search-wrap > .icon {
  color: #c4c4c4;
  margin-right: 9px;
  font-size: 23px;
}

.search-wrap input {
  font-size: 13px;
}

.filter-buttons {
  min-width: 0;
}

.filter-chip {
  background: #272727;
  border: 2px solid #0000;
  flex-shrink: 0;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
}

.filter-chip + .filter-chip {
  margin-left: 8px;
}

.filter-chip .nav-icon {
  width: 18px;
  height: 18px;
  margin-right: 7px;
}

.filter-chip[aria-pressed="true"] {
  background: linear-gradient(163deg, #1a1a1a, #2a1e21);
  border-color: #e75275;
}

.filter-scroll {
  z-index: 2;
  background: linear-gradient(90deg, #0000, #151515 75%);
  width: 24px;
  height: 40px;
  font-size: 28px;
  position: absolute;
  top: 0;
  right: 0;
}

.character-row {
  grid-gap: 16px;
  scrollbar-width: none;
  grid-template-rows: repeat(2, 300px);
  grid-auto-columns: 180px;
}

.character-row::-webkit-scrollbar {
  display: none;
}

.character-card {
  background: #151218;
  border-radius: 18px;
}

.character-photo:after {
  background: linear-gradient(#0000, #0e0e0ee6);
  height: 48%;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

.character-photo:hover .portrait {
  transform: scale(1.05);
}

.card-bottom {
  padding: 12px;
}

.card-bottom strong {
  font-size: 18px;
  line-height: 24px;
}

.card-bottom strong small {
  color: #ddd;
  font-size: 14px;
  font-weight: 500;
}

.card-description {
  -webkit-line-clamp: 2;
  color: #aeaeae;
  -webkit-box-orient: vertical;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 17px;
  display: -webkit-box;
  overflow: hidden;
}

.card-tag {
  background: #f07594;
  border-radius: 0 0 7px;
  padding: 3px 7px;
  font-size: 10px;
  top: 0;
  left: 0;
}

.card-capabilities {
  z-index: 3;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
}

.card-capabilities .nav-icon, .card-capabilities .icon {
  background: #444b;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  padding: 3px;
  font-size: 16px;
}

.save-button {
  background: #242424bb;
  width: 25px;
  height: 25px;
  font-size: 17px;
  top: auto;
  bottom: 10px;
  right: 8px;
}

.category-grid .character-row {
  grid-gap: 24px;
  grid-template-rows: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-columns: auto;
  grid-auto-flow: row;
  overflow: visible;
}

.category-grid .character-card {
  max-width: 300px;
  height: 380px;
}

.shorts-card {
  background: linear-gradient(150deg, #302461, #750b9b, #15111f);
  border: 2px solid #dbaaff;
  border-radius: 18px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px 9px 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.shorts-card > strong {
  color: #d2feff;
  text-shadow: 0 0 8px #69d9ff;
  z-index: 2;
  text-align: center;
  font-size: 24px;
  line-height: 1.15;
}

.shorts-card .pink-button {
  z-index: 2;
  border-radius: 25px;
  width: 100%;
  min-height: 34px;
  padding: 5px 12px;
}

.film-strip {
  background: #1116;
  border-top: 10px dashed #97909d;
  border-bottom: 10px dashed #97909d;
  display: flex;
  position: absolute;
  top: 50px;
  bottom: 30px;
  left: -60px;
  right: -60px;
  transform: rotate(-20deg);
}

.film-strip i {
  background-size: cover;
  border: 4px solid #333;
  width: 85px;
  height: 130px;
  margin: 10px 3px;
}

.film-strip i:first-child {
  background-image: url("character-corinne.jpg");
}

.film-strip i:nth-child(2) {
  background-image: url("character-carolina.jpg");
}

.film-strip i:nth-child(3) {
  background-image: url("character-margot.jpg");
}

.experiences {
  margin-top: 40px;
}

.experiences h2, .live-section h2 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
}

.experience-grid {
  grid-gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.experience-card {
  text-align: left;
  background: #222;
  border-radius: 16px;
  height: 220px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.experience-art {
  background-position: center;
  background-size: cover;
  transition: transform .2s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.experience-card:hover .experience-art {
  transform: scale(1.03);
}

.experience-card:after {
  content: "";
  background: linear-gradient(#0000, #000c);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.experience-card strong {
  z-index: 2;
  max-width: 80%;
  font-size: 19px;
  line-height: 1.3;
  position: absolute;
  bottom: 20px;
  left: 16px;
}

.experience-card > span:last-child {
  z-index: 2;
  font-size: 22px;
  position: absolute;
  bottom: 20px;
  right: 14px;
}

.experience-1 .experience-art {
  background-image: url("banner-3-safe.jpg");
}

.experience-2 .experience-art {
  background-image: url("banner-4-safe.jpg");
}

.experience-3 .experience-art {
  background-image: url("banner-5-desktop.jpg");
}

.experience-4 .experience-art {
  background-image: url("character-corinne.jpg");
}

.live-section {
  margin-top: 42px;
}

.live-row {
  padding-bottom: 10px;
  display: flex;
  overflow: auto;
}

.live-row > a {
  border-radius: 14px;
  flex-shrink: 0;
  width: 125px;
  height: 180px;
  margin-right: 12px;
  display: block;
  position: relative;
  overflow: hidden;
}

.live-row > a:after {
  content: "";
  background: linear-gradient(#0000 45%, #000c);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.live-row strong {
  z-index: 2;
  font-size: 13px;
  position: absolute;
  bottom: 12px;
  left: 10px;
}

.live-row strong small {
  color: #bbb;
  font-weight: 400;
}

.live-see-all {
  text-align: center;
  border: 1px solid #363636;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 125px;
  min-width: 125px;
  height: 180px;
  font-size: 12px;
  display: flex;
}

.live-see-all .nav-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
}

.faq {
  margin-top: 70px;
}

.faq h2 {
  font-size: 30px;
}

.faq details {
  background: #191919;
  border-color: #303030;
  border-radius: 10px;
}

.faq summary {
  padding: 18px 22px;
  font-size: 16px;
}

.faq details p {
  color: #b7b7b7;
  padding: 0 22px 22px;
  font-size: 14px;
  line-height: 1.8;
}

.seo {
  color: #c8c8c8;
  max-width: 1130px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.seo h2 {
  color: #fff;
  margin: 35px 0 15px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
}

.seo p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
}

footer {
  color: #c2c2c2;
  background: #131313;
  border-top: 1px solid #303030;
  flex-wrap: wrap;
  max-width: none;
  margin-top: 35px;
  padding: 45px 28px 30px;
  display: flex;
}

.footer-brand {
  width: 32%;
  padding-right: 40px;
}

.footer-logo {
  width: 118px;
  height: 25px;
}

.footer-brand > .language-wrap {
  width: 150px;
  margin: 18px 0;
}

.footer-brand p {
  margin: 15px 0;
  font-size: 11px;
  line-height: 1.7;
}

.footer-brand > strong {
  font-size: 11px;
}

.footer-columns {
  justify-content: space-between;
  width: 68%;
  padding-top: 6px;
  display: flex;
}

.footer-columns h3 {
  color: #fff;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
}

.footer-columns button {
  color: #aaa;
  text-align: left;
  max-width: 135px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 11px;
  display: block;
}

.footer-columns button:hover {
  color: #ed8aa2;
}

.footer-disclosure {
  color: #888;
  width: 100%;
  margin-top: 20px;
  font-size: 10px;
  line-height: 1.6;
}

.footer-disclosure p, .footer-disclosure small {
  max-width: 950px;
  font-size: 10px;
}

.chat-shell {
  background: #131313;
  grid-template-columns: 340px minmax(0, 1fr) 30%;
  height: calc(100vh - 64px);
  min-height: 600px;
  max-height: none;
}

.chat-characters {
  background: #1a1a1a;
  border-color: #343434;
  padding: 24px 12px;
}

.chat-list-title {
  justify-content: space-between;
  align-items: center;
  margin: 0 12px 20px;
  display: flex;
}

.chat-list-title h2 {
  margin: 0;
  font-size: 20px;
}

.chat-list-title button > span {
  display: none;
}

.chat-person {
  border-radius: 10px;
  margin-bottom: 7px;
  padding: 12px;
}

.chat-person.active, .chat-person:hover {
  background: #303030;
}

.avatar {
  border-radius: 50%;
  width: 58px;
  height: 58px;
}

.chat-person > span {
  margin-left: 14px;
}

.chat-person strong {
  font-size: 13px;
}

.chat-person small {
  -webkit-line-clamp: 2;
  color: #9a9a9a;
  -webkit-box-orient: vertical;
  font-size: 11px;
  display: -webkit-box;
  overflow: hidden;
}

.chat-conversation {
  background: #131313;
}

.chat-heading {
  border-color: #333;
  height: 88px;
  min-height: 88px;
  padding: 16px 24px;
}

.chat-profile-link > span {
  margin-left: 14px;
}

.chat-profile-link strong {
  font-size: 20px;
  line-height: 30px;
}

.chat-profile-link small {
  color: #999;
}

.chat-tools {
  align-items: center;
  display: flex;
}

.chat-tools button {
  padding: 6px;
}

.chat-tools .icon {
  font-size: 20px;
}

.message-list {
  padding: 18px 16px;
  font-family: Roboto, Arial, sans-serif;
}

.message {
  background: #252525;
  border-radius: 24px 24px 24px 4px;
  max-width: 75%;
  padding: 10px 16px;
}

.message p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.message strong {
  color: #b7b7b7;
  font: 10px Poppins, Arial, sans-serif;
}

.message.sent {
  background: #794754;
  border-radius: 24px 24px 4px;
}

.topic-list {
  padding: 8px 12px;
}

.topic-list button {
  color: #aaa;
  border-color: #3b3b3b;
  padding: 6px 10px;
  font-size: 10px;
}

#chat-form {
  background: linear-gradient(#262626e6, #2e2e2ee6);
  border: 1px solid #404040;
  border-radius: 26px;
  margin: 7px 16px 5px;
  padding: 12px;
}

#chat-form > button[type="button"] {
  color: #aaa;
  margin-right: 8px;
  padding: 0;
}

#message {
  max-height: 100px;
  padding: 2px;
  font-size: 15px;
}

#message::placeholder {
  color: gray;
}

.send-button {
  color: #ec8097;
  background: none;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  margin-left: 10px;
  padding: 0;
}

.send-button .icon {
  font-size: 22px;
}

.chat-bottom {
  color: #888;
  justify-content: space-between;
  align-items: center;
  padding: 3px 16px 12px;
  font-size: 8px;
  display: flex;
}

.chat-bottom small {
  max-width: 72%;
  font-size: 8px;
}

.chat-bottom button {
  font-size: 8px;
  text-decoration: underline;
}

.chat-right {
  background: #171717;
  border-left: 1px solid #323232;
  padding-bottom: 25px;
  overflow-y: auto;
}

.profile-portrait {
  border-radius: 0;
  height: 360px;
}

.chat-right > h2 {
  margin: 20px 0;
  padding: 0 20px;
  font-size: 24px;
}

.chat-right h2 small {
  color: #aaa;
  font-size: 18px;
}

.chat-right > h3, .chat-right > p, .chat-right > .mini-notice {
  padding: 0 20px;
}

.chat-right > h3 {
  margin-top: 25px;
  font-size: 14px;
}

.chat-right > p {
  color: #bbb;
  font-size: 13px;
  line-height: 1.8;
}

.chat-right dl {
  grid-gap: 12px;
  grid-template-columns: 1fr 1fr;
  padding: 0 20px;
  display: grid;
}

.chat-right dl dt {
  color: #999;
  font-size: 10px;
}

.chat-right dl dd {
  margin: 5px 0 0;
  font-size: 12px;
}

.chat-right > .outline-button {
  margin: 5px 20px;
  font-size: 22px;
}

.chat-right > .mini-notice {
  margin-top: 20px;
  display: block;
}

body[data-page="chat"] footer, body[data-page="character"] footer, body[data-page="chat"] .bottom-nav, body[data-page="character"] .bottom-nav {
  display: none;
}

.modal {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 80;
  background: #0009;
}

.modal-panel {
  background: #1b1b1b;
  border: 1px solid #333;
  border-radius: 10px;
}

.modal-close {
  background: none;
  border-radius: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  font: 23px Arial, sans-serif;
  top: 10px;
  right: 10px;
}

.auth-panel {
  border: 0;
  max-width: 819px;
  min-height: 573px;
  max-height: 95vh;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.auth-art {
  flex-shrink: 0;
  width: 412px;
  position: relative;
}

.auth-art > img:first-child {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.auth-logo {
  width: 50%;
  height: auto;
  position: absolute;
  bottom: 35px;
  left: 25%;
}

.auth-content {
  flex-direction: column;
  width: 407px;
  min-width: 0;
  padding: 40px;
  display: flex;
}

.auth-content h2 {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 26px;
}

.auth-content .sr-only {
  display: none;
}

.auth-content form {
  margin: 0;
}

.auth-field {
  background: #252525;
  border: 1px solid #333;
  border-radius: 10px;
  align-items: center;
  height: 46px;
  margin-bottom: 14px;
  padding-left: 10px;
  display: flex;
}

.auth-field > span {
  color: #999;
  flex-shrink: 0;
  width: 25px;
  font-size: 18px;
}

.auth-field input {
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: 10px 4px;
  font-size: 12px;
}

.auth-field [data-password-toggle] {
  color: #ddd;
  width: 30px;
  height: 35px;
  min-height: 35px;
  margin-right: 8px;
  padding: 0;
  font-size: 18px;
  position: static;
}

.password-hint {
  color: #8d8d8d;
  margin: -8px 0 16px;
  font-size: 12px;
}

.auth-content form > .pink-button {
  width: 100%;
  min-height: 44px;
  margin: 0;
  font-size: 12px;
}

.social-divider {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  margin: 25px 0 20px;
  font-size: 12px;
  display: flex;
}

.social-divider:before, .social-divider:after {
  content: "";
  background: #393939;
  width: 25%;
  height: 1px;
  margin: 0 10px;
}

.social-google {
  color: #525966;
  background: #fff;
  border-radius: 10px;
  width: 100%;
  height: 44px;
  font-size: 14px;
}

.social-google b {
  color: #4285f4;
  margin-right: 10px;
  font: bold 23px Arial, sans-serif;
}

.social-row {
  margin-top: 10px;
  display: flex;
}

.social-row button {
  border-radius: 9px;
  width: 50%;
  height: 44px;
  font-size: 15px;
}

.social-discord {
  background: #7c8ed8;
  margin-right: 10px;
}

.social-x {
  color: #151515;
  background: #fff;
  font-size: 28px !important;
}

.auth-legal {
  text-align: center;
  color: #999;
  margin: 20px 0;
  font-size: 9px;
  line-height: 1.5;
}

.auth-tabs {
  text-align: center;
  background: none;
  border-top: 1px solid #303030;
  border-radius: 0;
  margin: 0 -40px -20px;
  padding: 20px 15px 0;
  font-size: 11px;
  display: block;
}

.auth-tabs button {
  color: #d46c81;
  border-radius: 0;
  width: auto;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
}

.auth-tabs button.active {
  background: none;
}

.auth-content .form-status {
  color: #edb6c3;
  background: #3b282f;
  margin: 0 0 12px;
  padding: 9px;
  font-size: 11px;
}

@media (max-width: 1199px) and (min-width: 1024px) {
  .chat-shell {
    grid-template-columns: 280px minmax(0, 1fr) 29%;
  }

  .chat-heading {
    padding: 12px;
  }

  .chat-tools button {
    padding: 4px;
  }

  .chat-profile-link strong {
    font-size: 17px;
  }

  .chat-profile-link .avatar {
    width: 44px;
    height: 44px;
  }

  .experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .sidebar {
    z-index: 49;
    width: 240px;
    padding-top: 60px;
    top: 0;
    transform: translateX(-100%);
  }

  .drawer-open .sidebar {
    transform: translateX(0);
  }

  .drawer-close {
    width: 28px;
    height: 28px;
    font-size: 27px;
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .sidebar-auth {
    flex-direction: column;
    margin-top: 18px;
    display: flex;
  }

  .sidebar-auth button {
    padding: 10px;
    font-size: 12px;
  }

  .side-footer {
    padding-top: 20px;
  }

  .topbar {
    padding: 0 15px;
  }

  .header-brand {
    width: 150px;
    min-width: 150px;
  }

  .menu-toggle {
    margin-right: 15px;
  }

  .brand-link, .brand-image {
    width: 104px;
  }

  .category-tabs {
    margin-left: 0;
  }

  .category-tab {
    padding: 0 14px;
  }

  .top-actions .small-button, .top-actions .login-button {
    font-size: 10px;
  }

  .sidebar-collapsed main, main {
    margin-left: 0;
  }

  .bottom-nav {
    bottom: 12px;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: 46;
    background: #141219eb;
    border: 1px solid #ffffff2e;
    border-radius: 35px;
    justify-content: space-around;
    min-height: 66px;
    padding: 7px 6px;
    display: flex;
    position: fixed;
    box-shadow: inset 0 1px #ffffff19;
  }

  .bottom-item {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
    padding: 0 3px;
    font-size: 10px;
    line-height: 1.2;
    display: flex;
  }

  .bottom-item .nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
  }

  main {
    padding-bottom: 95px;
  }

  .chat-shell {
    height: calc(100vh - 64px);
    min-height: 500px;
    display: block;
  }

  .chat-characters, .chat-right {
    display: none;
  }

  .chat-conversation {
    height: 100%;
  }

  body[data-page="chat"] main, body[data-page="character"] main {
    padding-bottom: 0;
  }

  .show-profile .chat-right {
    z-index: 50;
    background: #171717;
    width: 100%;
    padding-bottom: 30px;
    display: block;
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .show-profile .chat-right .profile-portrait {
    max-width: 450px;
    height: 430px;
    margin: auto;
  }

  .profile-panel-close {
    z-index: 52;
    background: #202020;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 26px;
    position: fixed;
    top: 75px;
    right: 15px;
  }

  .auth-art {
    display: none;
  }

  .auth-panel {
    max-width: 407px;
    min-height: 0;
  }

  .auth-content {
    width: 100%;
  }

  .category-grid .character-row {
    grid-gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-grid .character-card {
    height: 330px;
  }

  .footer-brand {
    width: 40%;
  }

  .footer-columns {
    flex-wrap: wrap;
    width: 60%;
  }

  .footer-columns > div {
    width: 33%;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .topbar {
    height: 53px;
    padding: 0 12px;
  }

  .header-brand {
    width: 132px;
    min-width: 132px;
  }

  .menu-toggle {
    width: 23px;
    height: 30px;
    margin-right: 14px;
  }

  .menu-toggle .nav-icon {
    width: 23px;
    height: 23px;
  }

  .brand-link, .brand-image {
    width: 95px;
  }

  .topbar .category-tabs, .category-tabs {
    max-width: none;
    height: 53px;
    margin-left: auto;
  }

  .topbar .category-tab, .category-tab {
    white-space: nowrap;
    max-width: none;
    padding: 0 9px;
    font-size: 11px;
    line-height: 1.5;
  }

  .category-tab img {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }

  .category-tab.active:after {
    height: 3px;
  }

  .top-actions {
    display: none;
  }

  main {
    margin-top: 53px;
  }

  .hero, .hero-slide {
    height: 190px;
    min-height: 0;
  }

  .hero-copy {
    width: 150px;
    max-width: none;
    height: 138px;
    min-height: 0;
    padding: 0;
    top: 0;
    left: 24px;
  }

  .hero-wordmark-slot {
    width: 140px;
    height: 63px;
    margin-bottom: 8px;
  }

  .hero-wordmark {
    max-width: 140px;
    max-height: 63px;
  }

  .hero-subtitle {
    height: 13px;
    margin-bottom: 8px;
    font-size: 9px;
    line-height: 13px;
  }

  .hero-copy .hero-cta {
    height: 26px;
    min-height: 26px;
    padding: 0 13px;
    font-size: 10px;
    box-shadow: 0 4px 12px #ee58764d;
  }

  .hero-chinese-wordmark {
    letter-spacing: -1px;
    font-size: 28px;
  }

  .slide-2 .hero-subtitle {
    max-width: 150px;
    font-size: 8px;
    line-height: 11px;
  }

  .slide-5 .hero-wordmark-slot {
    margin-bottom: 12px;
  }

  .hero-scrim {
    background: linear-gradient(0deg, #0d0a0f66, #0000 30%), linear-gradient(90deg, #0d0a0fbd, #0d0a0f80 28%, #0000 66%);
  }

  .hero-arrow {
    display: none;
  }

  .carousel-controls {
    bottom: 11px;
    left: 50%;
  }

  .carousel-controls .carousel-dot {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }

  .hero-background {
    background-position: 65%;
  }

  .slide-5 .hero-background, .slide-2 .hero-background {
    background-image: url("banner-5-mobile.jpg");
    background-position: center;
  }

  .characters {
    margin-top: 16px;
  }

  .characters h1 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 24px;
  }

  .heading-chevron {
    margin-left: 1px;
    font-size: 21px;
  }

  .filters {
    height: 40px;
    margin-bottom: 12px;
  }

  .search-wrap {
    width: 38px;
    height: 38px;
    margin-right: 10px;
    padding: 0 8px;
  }

  .search-wrap:focus-within {
    width: 155px;
  }

  .search-wrap > .icon {
    min-width: 22px;
    margin-right: 8px;
    font-size: 23px;
  }

  .search-wrap input {
    min-width: 105px;
    font-size: 13px;
  }

  .filter-chip {
    padding: 0 12px;
    font-size: 13px;
  }

  .filter-chip + .filter-chip {
    margin-left: 8px;
  }

  .filter-scroll {
    width: 20px;
  }

  .character-row {
    grid-gap: 10px;
    grid-template-rows: repeat(2, 195px);
    grid-auto-columns: 117px;
  }

  .character-card {
    border-radius: 12px;
  }

  .card-bottom {
    padding: 8px;
  }

  .card-bottom strong {
    font-size: 12.5px;
    line-height: 17px;
  }

  .card-bottom strong small {
    font-size: 10px;
  }

  .card-description {
    margin-top: 3px;
    font-size: 10px;
    line-height: 14px;
  }

  .card-tag {
    padding: 2px 5px;
    font-size: 8px;
  }

  .card-capabilities {
    top: 6px;
    right: 5px;
  }

  .card-capabilities .nav-icon, .card-capabilities .icon {
    width: 19px;
    height: 19px;
    margin-bottom: 3px;
    font-size: 13px;
  }

  .save-button {
    width: 21px;
    height: 21px;
    font-size: 15px;
    bottom: 5px;
    right: 5px;
  }

  .shorts-card {
    border-radius: 12px;
    padding: 15px 5px;
  }

  .shorts-card > strong {
    font-size: 18px;
  }

  .shorts-card .pink-button {
    min-height: 26px;
    font-size: 10px;
  }

  .film-strip {
    top: 40px;
    bottom: 25px;
    left: -60px;
    right: -60px;
  }

  .film-strip i {
    width: 65px;
    height: 90px;
  }

  .category-grid .character-row {
    grid-gap: 8px;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    margin: 0;
    padding: 0;
  }

  .category-grid .character-card {
    max-width: none;
    height: 280px;
  }

  .category-grid .card-bottom strong {
    font-size: 16px;
  }

  .category-grid .card-description {
    font-size: 11px;
    line-height: 16px;
  }

  .experiences {
    margin-top: 30px;
  }

  .experiences h2, .live-section h2 {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 28px;
  }

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

  .experience-card {
    border-radius: 12px;
    height: 170px;
  }

  .experience-card strong {
    font-size: 15px;
    bottom: 15px;
    left: 12px;
  }

  .experience-card > span:last-child {
    font-size: 18px;
    bottom: 14px;
    right: 9px;
  }

  .live-section {
    margin-top: 30px;
  }

  .live-row > a, .live-see-all {
    width: 105px;
    min-width: 105px;
    height: 150px;
  }

  .live-row strong {
    font-size: 11px;
  }

  .faq {
    margin-top: 40px;
  }

  .faq h2 {
    font-size: 23px;
  }

  .faq summary {
    padding: 15px;
    font-size: 13px;
  }

  .faq details p {
    padding: 0 15px 18px;
    font-size: 12px;
  }

  .seo {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .seo h2 {
    margin: 25px 0 12px;
    font-size: 20px;
  }

  .seo p {
    font-size: 12px;
    line-height: 1.8;
  }

  footer {
    padding: 30px 15px;
  }

  .footer-brand {
    width: 100%;
    max-width: 480px;
    padding-right: 0;
  }

  .footer-columns {
    width: 100%;
    margin-top: 25px;
  }

  .footer-columns > div {
    width: 33%;
  }

  .footer-columns h3 {
    font-size: 11px;
  }

  .footer-columns button {
    font-size: 10px;
  }

  .footer-disclosure {
    margin-top: 5px;
  }

  .chat-shell {
    height: calc(100vh - 53px);
    min-height: 520px;
  }

  .chat-heading {
    height: 68px;
    min-height: 68px;
    padding: 12px 16px;
  }

  .chat-profile-link .avatar {
    width: 44px;
    height: 44px;
  }

  .chat-profile-link strong {
    font-size: 20px;
  }

  .chat-profile-link small {
    font-size: 9px;
  }

  .chat-tools button {
    padding: 4px;
  }

  .chat-tools .icon {
    font-size: 19px;
  }

  .message-list {
    padding: 14px 12px;
  }

  .message {
    max-width: 75%;
    padding: 8px 16px;
  }

  .message p {
    font-size: 16px;
  }

  .topic-list {
    padding: 7px 12px;
  }

  .topic-list button {
    font-size: 10px;
  }

  #chat-form {
    margin: 5px 12px;
    padding: 12px;
  }

  #message {
    font-size: 15px;
  }

  .chat-bottom {
    padding: 4px 12px 10px;
  }

  .show-profile .chat-right {
    top: 53px;
  }

  .profile-panel-close {
    top: 64px;
  }

  .auth-panel {
    max-width: 335px;
    min-height: 0;
    padding: 0;
  }

  .auth-content {
    padding: 28px 20px;
  }

  .auth-content h2 {
    margin-bottom: 18px;
    font-size: 18px;
  }

  .auth-tabs {
    margin: 0 -20px -10px;
    padding-top: 18px;
  }

  .social-divider {
    margin: 22px 0 18px;
  }

  .auth-legal {
    margin: 17px 0;
    font-size: 8px;
    line-height: 1.5;
  }

  .auth-field input, .auth-content form > .pink-button {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .topbar {
    padding: 0 8px;
  }

  .header-brand {
    width: 122px;
    min-width: 122px;
  }

  .menu-toggle {
    margin-right: 10px;
  }

  .brand-image, .brand-link {
    width: 89px;
  }

  .topbar .category-tab {
    padding: 0 6px;
    font-size: 10px;
  }

  .category-tab img {
    width: 12px;
    height: 12px;
  }

  .characters h1 {
    font-size: 16px;
  }

  .character-row {
    grid-template-rows: repeat(2, 167px);
    grid-auto-columns: 100px;
  }
}

.characters h1 {
  height: 24px;
  margin-top: 20px;
  font-size: 22px;
  line-height: 24px;
}

.heading-chevron {
  vertical-align: top;
  line-height: 24px;
}

.category-tabs {
  margin-left: 22px;
}

.brand-image, .brand-link {
  width: 100px;
}

.menu-toggle {
  margin-right: 27px;
}

.private-card .character-photo {
  text-align: left;
  padding: 0;
}

.private-card .portrait {
  filter: blur(8px) brightness(.55);
  transform: scale(1.1);
}

.private-lock {
  z-index: 3;
  background: #222a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
  position: absolute;
  top: 40%;
  left: calc(50% - 22px);
}

.private-lock .nav-icon {
  width: 26px;
  height: 26px;
}

.private-card .card-bottom strong {
  font-size: 15px;
}

.private-card .card-description {
  font-size: 10px;
}

@media (max-width: 1023px) {
  .category-tabs {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .characters h1 {
    height: auto;
    margin-top: 0;
    font-size: 18px;
  }

  .category-tabs {
    margin-left: auto;
  }

  .brand-image, .brand-link {
    width: 95px;
  }

  .menu-toggle {
    margin-right: 14px;
  }

  .private-card .card-bottom strong {
    font-size: 11px;
  }

  .private-card .card-description {
    font-size: 8px;
  }
}

@media (max-width: 360px) {
  .characters h1 {
    font-size: 16px;
  }

  .brand-image, .brand-link {
    width: 89px;
  }

  .menu-toggle {
    margin-right: 10px;
  }
}

.mobile-category {
  display: none;
}

.chat-profile-link .avatar {
  border-radius: 50%;
}

.topic-list {
  scrollbar-width: none;
}

.topic-list::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .topbar {
    padding: 0 8px;
  }

  .header-brand {
    width: 140px;
    min-width: 140px;
  }

  .menu-toggle {
    width: 32px;
    height: 48px;
    margin-right: 4px;
  }

  .brand-link, .brand-image {
    width: 100px;
    height: 30px;
  }

  .topbar .category-tabs {
    display: none;
  }

  .mobile-category {
    width: 45px;
    margin: 0;
    display: block;
    position: relative;
  }

  .mobile-category > button {
    align-items: center;
    width: 45px;
    height: 40px;
    padding: 0;
    display: flex;
  }

  .mobile-category > button > img:first-child {
    width: 24px;
    height: 24px;
  }

  .mobile-category > button > img:last-child {
    width: 12px;
    height: 12px;
    margin-left: 3px;
  }

  .mobile-category-options {
    background: #242424;
    border: 1px solid #363636;
    border-radius: 10px;
    min-width: 145px;
    padding: 6px;
    position: absolute;
    top: 45px;
    left: 0;
  }

  .mobile-category-options button {
    text-align: left;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    display: block;
  }

  .characters h1 {
    font-size: 16px;
  }

  .card-description {
    font-size: 10px;
  }

  .character-row > [data-grid-slot="2"] {
    order: 4 !important;
  }

  .character-row > [data-grid-slot="4"] {
    order: 2 !important;
  }

  .character-row > [data-grid-slot="5"] {
    order: 6 !important;
  }

  .character-row > [data-grid-slot="6"] {
    order: 7 !important;
  }

  .character-row > [data-grid-slot="7"] {
    order: 5 !important;
  }
}

@media (min-width: 1024px) {
  .category-tab {
    justify-content: center;
    width: 93px;
    padding: 0;
    font-size: 16px;
  }

  .category-tab img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}

.character-card:not(.private-card) .card-description {
  display: none;
}

.character-card:not(.private-card) .card-bottom strong {
  font-size: 18px;
  line-height: 24px;
}

.character-card:not(.private-card) .card-bottom {
  padding-bottom: 16px;
}

.character-card:not(.private-card):hover .card-description, .character-card:not(.private-card):focus-within .card-description {
  display: -webkit-box;
}

.hero-slide:not([hidden]) {
  animation: .3s ease-out banner-fade;
}

@keyframes banner-fade {
  from {
    opacity: .55;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .character-card:not(.private-card) .card-bottom strong {
    font-size: 12px;
    line-height: 16px;
  }

  .character-card:not(.private-card) .card-bottom {
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide:not([hidden]) {
    animation: none;
  }
}

body[data-page="shorts"] .category-tabs, body[data-page="shorts"] .mobile-category, body[data-page="short"] .category-tabs, body[data-page="short"] .mobile-category {
  display: none;
}

body[data-page="shorts"], body[data-page="short"] {
  background: #100d0e;
}

body[data-page="shorts"].sidebar-collapsed .nav-item > span, body[data-page="short"].sidebar-collapsed .nav-item > span {
  display: none;
}

body[data-page="shorts"].sidebar-collapsed .nav-item .nav-icon, body[data-page="short"].sidebar-collapsed .nav-item .nav-icon {
  width: 24px;
  height: 24px;
  margin: 0;
}

body[data-page="shorts"] .nav-item.active, body[data-page="short"] .nav-item.active {
  color: #eb738b;
  background: #303030;
}

.shorts-hero {
  background: #20181e;
  height: calc(48.6vw - 48.6px);
  min-height: 400px;
  max-height: 668px;
  position: relative;
  overflow: hidden;
}

.shorts-topline {
  z-index: 2;
  align-items: center;
  display: flex;
  position: absolute;
  top: 20px;
  left: 60px;
  right: 60px;
}

.shorts-back {
  margin-left: -30px;
  margin-right: 20px;
  font: 36px Arial, sans-serif;
}

.shorts-brand {
  letter-spacing: -.8px;
  align-items: center;
  font-size: 23px;
  font-weight: 600;
  display: flex;
}

.shorts-brand img {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}

.shorts-brand strong {
  color: #ec748c;
}

.shorts-home {
  background: #ffffff13;
  border-radius: 30px;
  min-height: 36px;
  margin-left: auto;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
}

.shorts-feature {
  background-position: right 25%;
  background-repeat: no-repeat;
  background-size: auto 135%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.shorts-feature:after {
  content: "";
  background: linear-gradient(90deg, #100d0e 2%, #100d0eef 24%, #100d0e88 50%, #100d0e33 100%), linear-gradient(0deg, #100d0e, #0000 40%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.shorts-feature-copy {
  z-index: 1;
  width: 46%;
  max-width: 500px;
  position: absolute;
  top: 24%;
  left: 60px;
}

.shorts-feature-copy > small {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ec748c;
  font-size: 11px;
  font-weight: 600;
}

.shorts-feature-copy h1, .shorts-feature-copy h2 {
  letter-spacing: -1px;
  margin: 14px 0 18px;
  font-size: 38px;
  line-height: 1.15;
}

.shorts-feature-copy p {
  color: #bbb;
  max-width: 420px;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
}

.shorts-play {
  color: #131313;
  background: #fff;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
}

.shorts-play > span[aria-hidden] {
  margin-right: 10px;
  font-size: 16px;
}

.shorts-carousel {
  z-index: 3;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 17%;
  left: 55px;
}

.shorts-carousel > button {
  color: #ddd;
  width: 30px;
  height: 30px;
  font: 24px Arial, sans-serif;
}

.shorts-carousel .shorts-banner-dot {
  width: 28px;
  padding: 10px 2px;
  font-size: 0;
}

.shorts-banner-dot:after {
  content: "";
  background: #777;
  border-radius: 2px;
  height: 3px;
  display: block;
}

.shorts-banner-dot[aria-pressed="true"]:after {
  background: #fff;
}

.shorts-content {
  padding: 0 60px 60px;
}

.shorts-filters {
  white-space: nowrap;
  padding: 6px 0 15px;
  display: flex;
  overflow-x: auto;
}

.shorts-filters button {
  color: #bcb4be;
  background: #171316;
  border: 1px solid #343033;
  border-radius: 22px;
  min-height: 34px;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 600;
}

.shorts-filters button + button {
  margin-left: 8px;
}

.shorts-filters button[aria-pressed="true"] {
  color: #131313;
  background: #fff;
  border-color: #fff;
}

.shorts-content > h2, .short-related > h2 {
  margin: 16px 0 4px;
  font-size: 21px;
  line-height: 30px;
}

.shorts-content > h2 {
  color: #f27e94;
}

.shorts-media-note {
  color: #999;
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.5;
}

.shorts-grid {
  grid-gap: 20px 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  display: grid;
}

.short-card {
  background: #241d22;
  border: 1px solid #393037;
  border-radius: 9px;
  height: 0;
  padding-top: 143%;
  display: block;
  position: relative;
  overflow: hidden;
}

.short-card > img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.short-card:after {
  content: "";
  background: linear-gradient(#0000, #000c);
  height: 65%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.short-card-badge {
  z-index: 2;
  color: #151515;
  text-transform: uppercase;
  background: #fff;
  border-radius: 0 0 8px;
  padding: 4px 8px;
  font-size: 8px;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0;
}

.short-card-copy {
  z-index: 2;
  position: absolute;
  bottom: 12px;
  left: 9px;
  right: 8px;
}

.short-card-copy strong {
  text-shadow: 0 2px 5px #000;
  font-size: 15px;
  line-height: 1.2;
  display: block;
}

.short-card-copy small {
  color: #ddd;
  margin-top: 6px;
  font-size: 8px;
  display: block;
}

.short-card-play {
  z-index: 2;
  color: #fff;
  opacity: 0;
  background: #0005;
  border: 1px solid #ffffff70;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding-left: 2px;
  font-size: 17px;
  display: flex;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}

.short-card:hover .short-card-play, .short-card:focus .short-card-play {
  opacity: 1;
}

.short-card:hover {
  border-color: #ec748c;
}

.short-detail {
  max-width: 1500px;
  margin: auto;
  padding: 24px 40px 60px;
}

.short-detail-back {
  color: #ccc;
  margin: 0 0 20px;
  font-size: 13px;
  display: inline-block;
}

.short-detail-grid {
  grid-gap: 36px;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr);
  display: grid;
}

.short-watch {
  background: #181518;
  border: 1px solid #332c32;
  border-radius: 12px;
  min-width: 0;
  padding: 14px;
}

.short-video-frame {
  background: #080808;
  border-radius: 9px;
  max-width: 420px;
  height: calc(100vh - 285px);
  min-height: 360px;
  max-height: 700px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.short-video-frame video {
  object-fit: contain;
  background: #080808;
  width: 100%;
  height: 100%;
  display: block;
}

.short-video-overlay {
  z-index: 2;
  background: #0004;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.short-video-overlay > span[aria-hidden] {
  color: #161116;
  background: #ffffffda;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  padding-left: 5px;
  font-size: 27px;
  display: flex;
}

.short-video-caption {
  text-align: center;
  text-shadow: 0 2px 4px #000;
  background: #0006;
  border-radius: 7px;
  padding: 10px 8px;
  font-size: 15px;
  font-weight: 600;
  position: absolute;
  bottom: 20px;
  left: 14px;
  right: 14px;
}

.short-video-controls {
  align-items: center;
  padding: 14px 0 12px;
  display: flex;
}

.short-video-controls button {
  white-space: nowrap;
  padding: 8px;
  font-size: 11px;
}

.short-video-controls button:first-child {
  color: #ec748c;
  min-width: 54px;
}

.short-video-controls time {
  color: #bbb;
  white-space: nowrap;
  margin: 0 10px 0 4px;
  font-size: 10px;
}

.short-video-controls input {
  accent-color: #ec748c;
  flex: 1;
  width: 100%;
  min-width: 30px;
  height: 24px;
  min-height: 0;
  margin: 0 8px 0 0;
  padding: 0;
  display: block;
}

.short-watch .shorts-media-note {
  margin-bottom: 12px;
}

.short-next {
  color: #fff;
  text-align: center;
  background: #ec748c;
  border-radius: 8px;
  padding: 11px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.short-details-copy {
  min-width: 0;
  padding-top: 16px;
}

.short-details-copy > .short-card-badge {
  color: #ef99ac;
  background: #38232b;
  border-radius: 4px;
  margin-bottom: 12px;
  display: inline-block;
  position: static;
}

.short-details-copy h1 {
  margin: 0 0 13px;
  font-size: 32px;
  line-height: 1.2;
}

.short-details-copy > p {
  color: #aaa;
  font-size: 13px;
  line-height: 1.8;
}

.short-details-copy h2 {
  margin: 28px 0 13px;
  font-size: 17px;
}

.short-episodes {
  display: flex;
}

.short-episodes > a {
  text-align: center;
  background: #211b20;
  border: 1px solid #373039;
  border-radius: 8px;
  width: 50%;
  padding: 17px;
  font-size: 14px;
  display: block;
}

.short-episodes > a + a {
  margin-left: 10px;
}

.short-episodes small {
  color: #999;
  margin-top: 7px;
  font-size: 11px;
  display: block;
}

.short-episodes [aria-current="true"] {
  color: #ec748c;
  background: #35212a;
  border-color: #ec748c;
}

.short-related {
  margin-top: 38px;
}

.short-related > h2 {
  margin-bottom: 17px;
}

#short-player-status {
  color: #efadbd;
  font-size: 12px;
  line-height: 1.5;
}

#short-retry {
  min-height: 34px;
  margin: 6px 0 14px;
  padding: 8px 16px;
  font-size: 12px;
}

@media (max-width: 1199px) {
  .shorts-topline {
    left: 35px;
    right: 35px;
  }

  .shorts-feature-copy {
    left: 35px;
  }

  .shorts-carousel {
    left: 30px;
  }

  .shorts-content {
    padding: 0 35px 40px;
  }

  .shorts-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .short-detail {
    padding: 20px 25px 50px;
  }

  .short-detail-grid {
    grid-gap: 24px;
  }

  .short-details-copy h1 {
    font-size: 27px;
  }
}

@media (max-width: 1023px) {
  .shorts-hero {
    height: 52vw;
    min-height: 390px;
  }

  .shorts-feature-copy h1, .shorts-feature-copy h2 {
    font-size: 32px;
  }

  .shorts-topline {
    top: 18px;
  }

  .shorts-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .short-detail-grid {
    grid-gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr);
  }

  .short-video-frame {
    height: 560px;
  }

  .short-video-controls {
    flex-wrap: wrap;
  }

  .short-video-controls input {
    flex: none;
    width: calc(100% - 70px);
    margin-left: 4px;
  }

  .short-video-controls button:last-child {
    margin-left: auto;
  }

  .short-detail {
    padding-bottom: 110px;
  }
}

@media (max-width: 767px) {
  .shorts-topline {
    top: 13px;
    left: 22px;
    right: 14px;
  }

  .shorts-back {
    margin-left: -10px;
    margin-right: 10px;
    font-size: 29px;
  }

  .shorts-brand {
    letter-spacing: -.5px;
    font-size: 17px;
  }

  .shorts-brand img {
    width: 23px;
    height: 23px;
    margin-right: 5px;
  }

  .shorts-home {
    min-height: 30px;
    padding: 7px 11px;
    font-size: 11px;
  }

  .shorts-hero {
    height: 410px;
    min-height: 0;
  }

  .shorts-feature {
    background-position: 75% 0;
    background-size: auto 115%;
  }

  .shorts-feature:after {
    background: linear-gradient(0deg, #100d0e 0%, #100d0ecc 28%, #0000 78%), linear-gradient(90deg, #100d0eaa, #100d0e22);
  }

  .shorts-feature-copy {
    width: auto;
    max-width: none;
    top: auto;
    bottom: 68px;
    left: 18px;
    right: 18px;
  }

  .shorts-feature-copy > small {
    letter-spacing: 1.5px;
    font-size: 9px;
  }

  .shorts-feature-copy h1, .shorts-feature-copy h2 {
    max-width: 290px;
    margin: 10px 0;
    font-size: 28px;
    line-height: 1.15;
  }

  .shorts-feature-copy p {
    max-width: 300px;
    margin-bottom: 14px;
    font-size: 11px;
    line-height: 1.6;
  }

  .shorts-play {
    border-radius: 7px;
    min-height: 35px;
    padding: 8px 23px;
    font-size: 12px;
  }

  .shorts-carousel {
    bottom: 21px;
    left: 13px;
  }

  .shorts-carousel > button {
    width: 24px;
    height: 24px;
    font-size: 20px;
  }

  .shorts-carousel .shorts-banner-dot {
    width: 25px;
  }

  .shorts-content {
    padding: 0 14px 35px;
  }

  .shorts-filters {
    padding: 0 0 12px;
  }

  .shorts-filters button {
    min-height: 32px;
    padding: 7px 14px;
    font-size: 11px;
  }

  .shorts-filters button + button {
    margin-left: 6px;
  }

  .shorts-content > h2, .short-related > h2 {
    margin: 13px 0 5px;
    font-size: 19px;
    line-height: 26px;
  }

  .shorts-media-note {
    margin-bottom: 12px;
    font-size: 9px;
  }

  .shorts-grid {
    grid-gap: 12px 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .short-card {
    border-radius: 7px;
    padding-top: 153%;
  }

  .short-card-badge {
    padding: 3px 6px;
    font-size: 7px;
  }

  .short-card-copy {
    bottom: 9px;
    left: 7px;
    right: 6px;
  }

  .short-card-copy strong {
    font-size: 12px;
    line-height: 1.15;
  }

  .short-card-copy small {
    margin-top: 5px;
    font-size: 7px;
  }

  .short-card-play {
    opacity: 1;
    width: 30px;
    height: 30px;
    font-size: 13px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
  }

  .short-detail {
    padding: 17px 12px 30px;
  }

  .short-detail-back {
    margin: 0 0 14px;
    font-size: 12px;
  }

  .short-detail-grid {
    flex-direction: column;
    display: flex;
  }

  .short-watch {
    border-radius: 10px;
    padding: 10px;
  }

  .short-video-frame {
    max-width: 400px;
    height: calc(100vh - 250px);
    min-height: 320px;
    max-height: 620px;
  }

  .short-video-controls {
    flex-wrap: nowrap;
    padding: 10px 0;
  }

  .short-video-controls button {
    padding: 8px 3px;
    font-size: 10px;
  }

  .short-video-controls button:first-child {
    min-width: 44px;
  }

  .short-video-controls time {
    margin: 0 7px 0 2px;
    font-size: 9px;
  }

  .short-video-controls input {
    flex: 1;
    width: auto;
    margin: 0 5px 0 0;
  }

  .short-video-controls button:last-child {
    margin-left: 0;
  }

  .short-video-caption {
    font-size: 12px;
    bottom: 16px;
    left: 10px;
    right: 10px;
  }

  .short-details-copy {
    padding: 0 4px;
  }

  .short-details-copy h1 {
    font-size: 25px;
  }

  .short-details-copy > p {
    font-size: 12px;
  }

  .short-details-copy h2 {
    margin: 20px 0 12px;
    font-size: 16px;
  }

  .short-episodes > a {
    padding: 15px;
    font-size: 13px;
  }

  .short-related {
    margin-top: 27px;
  }

  .short-detail .short-related > h2 {
    margin-bottom: 14px;
  }

  body[data-page="short"] main {
    padding-bottom: 90px;
  }
}

@media (max-width: 359px) {
  .shorts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shorts-feature-copy h1, .shorts-feature-copy h2 {
    font-size: 25px;
  }

  .short-video-controls time {
    margin-right: 5px;
    font-size: 8px;
  }

  .short-video-controls button {
    font-size: 9px;
  }
}

.short-player-exit {
  display: none;
}

.player-expanded {
  overflow: hidden;
}

.player-expanded .short-watch {
  z-index: 110;
  background: #080808;
  border: 0;
  border-radius: 0;
  padding: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.player-expanded .short-video-frame {
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: calc(100vh - 60px);
  min-height: 0;
  max-height: none;
}

.player-expanded .short-video-controls {
  background: #080808;
  height: 60px;
  margin: 0;
  padding: 10px 5px;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
}

.player-expanded .short-watch > .shorts-media-note, .player-expanded .short-watch > .short-next {
  display: none;
}

.player-expanded .short-player-exit {
  z-index: 120;
  color: #fff;
  background: #151515cc;
  border: 1px solid #fff5;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 29px;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 14px;
  right: 14px;
}

body[data-page="shorts"] .sidebar [data-action="discover"], body[data-page="short"] .sidebar [data-action="discover"], .premium-sparkle {
  display: none;
}

body[data-page="shorts"] .sidebar .nav-item[data-action="premium"], body[data-page="short"] .sidebar .nav-item[data-action="premium"] {
  margin-top: 0;
  position: relative;
}

@media (min-width: 1024px) {
  body[data-page="shorts"].sidebar-collapsed .sidebar, body[data-page="short"].sidebar-collapsed .sidebar {
    width: 100px;
    padding: 24px 24px 20px;
    overflow: visible;
  }

  body[data-page="shorts"].sidebar-collapsed .sidebar > nav, body[data-page="short"].sidebar-collapsed .sidebar > nav {
    scrollbar-width: none;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-page="shorts"].sidebar-collapsed .sidebar > nav::-webkit-scrollbar {
    display: none;
  }

  body[data-page="short"].sidebar-collapsed .sidebar > nav::-webkit-scrollbar {
    display: none;
  }

  body[data-page="shorts"].sidebar-collapsed .nav-item, body[data-page="short"].sidebar-collapsed .nav-item {
    border-radius: 10px;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    margin: 0 0 8px;
    padding: 0;
    position: relative;
  }

  body[data-page="shorts"].sidebar-collapsed .nav-item:last-child, body[data-page="short"].sidebar-collapsed .nav-item:last-child {
    margin-bottom: 0;
  }

  body[data-page="shorts"].sidebar-collapsed .sidebar .nav-item[data-action="premium"], body[data-page="short"].sidebar-collapsed .sidebar .nav-item[data-action="premium"] {
    background: linear-gradient(0deg, #5b4514 2%, #0000 98%);
    margin-top: 0;
  }

  body[data-page="shorts"].sidebar-collapsed .premium-sparkle, body[data-page="short"].sidebar-collapsed .premium-sparkle {
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    transform: scaleX(-1);
  }

  body[data-page="shorts"].sidebar-collapsed .side-footer, body[data-page="short"].sidebar-collapsed .side-footer {
    border-top: 1px solid #363636;
    flex-shrink: 0;
    margin: 0 -24px;
    padding: 24px 24px 0;
  }

  body[data-page="shorts"].sidebar-collapsed .language-trigger, body[data-page="short"].sidebar-collapsed .language-trigger, body[data-page="shorts"].sidebar-collapsed .more-trigger, body[data-page="short"].sidebar-collapsed .more-trigger {
    border-radius: 10px;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  body[data-page="shorts"].sidebar-collapsed .language-trigger > span:first-child, body[data-page="short"].sidebar-collapsed .language-trigger > span:first-child {
    width: 24px;
    height: 24px;
    margin: 0;
    display: block;
  }

  body[data-page="shorts"].sidebar-collapsed .language-trigger img, body[data-page="short"].sidebar-collapsed .language-trigger img {
    width: 24px;
    height: 24px;
    display: block;
  }

  body[data-page="shorts"].sidebar-collapsed .more-trigger .nav-icon, body[data-page="short"].sidebar-collapsed .more-trigger .nav-icon {
    width: 24px;
    height: 24px;
    margin: 0;
  }

  body[data-page="shorts"].sidebar-collapsed .language-options, body[data-page="short"].sidebar-collapsed .language-options {
    width: 170px;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
  }

  body[data-page="shorts"].sidebar-collapsed .more-options, body[data-page="short"].sidebar-collapsed .more-options {
    width: 196px;
  }

  body[data-page="shorts"]:not(.sidebar-collapsed) .shorts-hero {
    height: calc(48.6vw - 106.92px);
  }
}

.sidebar .language-trigger img {
  width: 14px;
  height: 14px;
  display: block;
}

.shorts-topline {
  height: 36px;
  display: block;
  top: 14px;
  left: 16px;
  right: 16px;
}

.shorts-feature-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.shorts-back {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  font-size: 30px;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.shorts-back:hover {
  background: #ffffff0c;
}

.shorts-brand {
  height: 26px;
  display: block;
  position: absolute;
  top: 5px;
  left: 52px;
}

.shorts-brand img {
  width: auto;
  height: 26px;
  margin: 0;
  display: block;
}

.shorts-home {
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  display: flex;
  position: absolute;
  top: 0;
  left: calc(50% - 46px);
}

.shorts-home img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.shorts-feature {
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.shorts-feature:before {
  content: "";
  background-image: inherit;
  filter: blur(18px) brightness(.35);
  background-position: 50% 30%;
  background-size: cover;
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -18px;
  right: -18px;
}

.shorts-feature-art {
  background-position: 50% 22%;
  background-size: cover;
  width: 66%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 30%);
  mask-image: linear-gradient(90deg, #0000, #000 30%);
}

.shorts-feature:after {
  background: linear-gradient(0deg, #100d0e, #0000 45%), linear-gradient(90deg, #100d0e 0%, #100d0eaa 40%, #0000 80%);
}

.shorts-feature-copy {
  flex-direction: column;
  align-items: flex-start;
  width: 50%;
  max-width: 640px;
  display: flex;
  top: auto;
  bottom: 17%;
}

.shorts-feature-copy h1, .shorts-feature-copy h2 {
  margin: 14px 0;
  line-height: 1.15;
}

.shorts-feature-copy p {
  max-width: 640px;
  margin: 0 0 18px;
  line-height: 20px;
}

.shorts-play {
  border-radius: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

.shorts-carousel {
  align-items: center;
  height: 23px;
  bottom: 73px;
  left: 60px;
}

.shorts-carousel .shorts-banner-dot {
  width: 22px;
  height: 23px;
  padding: 10px 0;
}

.shorts-carousel .shorts-banner-dot + .shorts-banner-dot {
  margin-left: 6px;
}

.shorts-carousel .shorts-banner-dot[aria-pressed="true"] {
  width: 34px;
}

.shorts-banner-dot:after {
  border-radius: 4px;
  height: 3px;
}

.shorts-content {
  padding-bottom: 40px;
}

.shorts-filters {
  flex-shrink: 0;
  height: 40px;
  margin-top: 10px;
  padding: 0 0 6px;
}

.shorts-filters button {
  color: #b9b0bb;
  background: #ffffff0a;
  border-color: #ffffff17;
  height: 34px;
  min-height: 34px;
  padding: 0 15px;
  font-size: 13px;
  line-height: 18px;
}

.shorts-content > h2 {
  color: #fff;
  margin: 22px 0 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 23px;
}

.short-explore-prefix {
  color: #ed6c88;
}

.shorts-content > .shorts-media-note {
  margin: 14px 0 0;
}

.short-card {
  border: 0;
  padding-top: 143.023%;
  box-shadow: inset 0 0 0 1px #393037;
}

.shorts-feature:not([hidden]) {
  animation: .7s short-hero-fade;
}

@keyframes short-hero-fade {
  from {
    opacity: .3;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shorts-feature:not([hidden]) {
    animation: none;
  }
}

@media (max-width: 1199px) {
  .shorts-carousel {
    left: 35px;
  }
}

@media (max-width: 1023px) {
  .shorts-topline {
    left: 14px;
    right: 14px;
  }

  .shorts-brand {
    left: 42px;
  }

  .shorts-home {
    display: none;
  }

  .shorts-feature-copy {
    width: 60%;
    left: 35px;
  }

  .shorts-feature-copy p {
    font-size: 12px;
  }

  .shorts-filters {
    height: 42px;
    padding-bottom: 10px;
  }

  .shorts-filters button {
    height: 32px;
    min-height: 32px;
    padding: 0 13px;
    font-size: 12.5px;
  }

  .shorts-feature-track {
    height: 100%;
    padding: 0 max(12px,calc((100% - var(--short-phone-height, 410px)*.707)/2));
    padding-left: calc((100% - var(--short-phone-height, 410px)*.707)/2);
    padding-right: calc((100% - var(--short-phone-height, 410px)*.707)/2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .shorts-feature-track::-webkit-scrollbar {
    display: none;
  }

  .shorts-feature, .shorts-feature[hidden] {
    flex: 0 0 calc(var(--short-phone-height, 410px)*.707);
    scroll-snap-align: center;
    border-radius: 16px;
    height: 100%;
    animation: none;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    overflow: hidden;
    display: block !important;
  }

  .shorts-feature + .shorts-feature {
    margin-left: 6px;
  }

  .shorts-feature:before {
    display: none;
  }

  .shorts-feature-art {
    background-position: top;
    background-size: cover;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .shorts-feature:after {
    background: linear-gradient(0deg, #100d0ee6, #0000 55%);
  }

  .shorts-feature-copy {
    text-align: center;
    align-items: center;
    width: auto;
    max-width: none;
    bottom: 20px;
    left: 12px;
    right: 12px;
  }

  .shorts-feature-copy > small, .shorts-feature-copy > p {
    display: none;
  }

  .shorts-feature-copy h1, .shorts-feature-copy h2 {
    max-width: 86%;
    margin: 0 0 14px;
    font-size: 25px;
    line-height: 1.15;
  }

  .shorts-carousel {
    display: none;
  }
}

@media (max-width: 767px) {
  .shorts-topline {
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .shorts-brand {
    height: 24px;
    top: 6px;
    left: 42px;
  }

  .shorts-brand img {
    height: 24px;
  }

  .shorts-feature-art {
    background-position: top;
    background-size: cover;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .shorts-feature:after {
    background: linear-gradient(0deg, #100d0e, #100d0eaa 35%, #0000 85%);
  }

  .shorts-feature-copy {
    width: auto;
    bottom: 20px;
    left: 12px;
    right: 12px;
  }

  .shorts-feature-copy h1, .shorts-feature-copy h2 {
    max-width: 86%;
    margin: 0 0 14px;
    font-size: 23px;
  }

  .shorts-feature-copy p {
    margin-bottom: 14px;
    font-size: 11px;
    line-height: 1.6;
  }

  .shorts-play {
    height: 35px;
    min-height: 35px;
    padding: 0 20px;
    font-size: 12px;
  }

  .shorts-carousel {
    bottom: 20px;
    left: 18px;
  }

  .shorts-content > h2 {
    margin: 20px 0 12px;
    font-size: 19px;
    line-height: 23px;
  }

  .shorts-card-copy strong {
    font-size: 12px;
  }

  .short-card {
    padding-top: 153%;
  }
}

.shorts-topline {
  z-index: 43;
  background: linear-gradient(#110d0ceb 0%, #110d0c8c 55%, #0000 100%);
  height: 63px;
  position: fixed;
  top: 64px;
  left: 100px;
  right: 0;
}

.shorts-back {
  top: 13.5px;
  left: 16px;
}

.shorts-brand {
  top: 18.5px;
  left: 70px;
}

.shorts-home {
  top: 13.5px;
}

.shorts-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.short-card {
  padding-top: 142.857%;
}

@media (min-width: 1024px) {
  body[data-page="shorts"]:not(.sidebar-collapsed) .shorts-topline {
    left: 220px;
  }
}

@media (max-width: 1023px) {
  body[data-page="shorts"] .topbar, body[data-page="shorts"] .sidebar, body[data-page="shorts"] .drawer-backdrop {
    display: none;
  }

  body[data-page="shorts"] main {
    margin-top: 52px;
    margin-top: calc(52px + env(safe-area-inset-top));
  }

  .shorts-topline {
    height: 52px;
    height: calc(52px + env(safe-area-inset-top));
    background: #110d0c;
    top: 0;
    left: 0;
    right: 0;
  }

  .shorts-back {
    top: 8px;
    left: 6px;
    top: calc(8px + env(safe-area-inset-top));
  }

  .shorts-brand {
    top: 26px;
    left: 50%;
    top: calc(26px + env(safe-area-inset-top));
    height: 24px;
    transform: translate(-50%, -50%);
  }

  .shorts-brand img {
    height: 24px;
  }

  .shorts-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .shorts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}