@charset "UTF-8";
.Ya {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wt {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 20px;
  padding: 20px 28px;
  border-radius: 25px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
}
.Fa {
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  color: #fffc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Xa {
  word-break: break-all;
}
.oe {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.oe button {
  min-width: 180px;
}
.ee {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  border: none;
  border-radius: 15px;
  background-color: #fff3;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.ee:hover {
  color: var(--primary);
  transform: rotate(1turn);
}
.re {
  animation: ie var(--modal-duration, 0.3s) both;
}
.re .wt {
  animation: ne var(--modal-duration, 0.3s) both;
}
.ae {
  animation: se var(--modal-duration, 0.3s) both;
}
.ae .wt {
  animation: le var(--modal-duration, 0.3s) both;
}
@keyframes ie {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes se {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes ne {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes le {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
.kt {
  position: relative;
  gap: 5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fffc;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.kt:hover .vt {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
.Ta {
  opacity: 0.8;
}
.pe {
  background-color: var(--primary);
}
.pe:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 0 10px var(--primary);
  transform: translateY(-1px);
}
.de {
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.de:hover {
  border-color: var(--primary);
  background-color: #fff3;
  transform: translateY(-1px);
}
.xe {
  border: 1px solid var(--primary);
  background-color: transparent;
  color: var(--primary);
}
.xe:hover {
  background-color: var(--primary);
  color: #fffc;
  transform: translateY(-1px);
}
.Ua {
  padding: 0 10px;
  height: 30px;
  font-size: 14px;
}
.Pa {
  padding: 0 15px;
  height: 40px;
  font-size: 16px;
}
.Ma {
  padding: 0 20px;
  height: 50px;
  font-size: 18px;
}
.Ha {
  display: flex;
  justify-content: center;
  align-items: center;
}
.qa {
  animation: fe 1s linear infinite;
}
.Aa {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: currentcolor;
}
.vt {
  position: absolute;
  z-index: -1;
  padding: 0 10px;
  border-radius: 8px;
  background-color: #fff;
  opacity: 0;
  font-size: 12px;
  color: #000000b3;
  white-space: nowrap;
  transition: all 0.3s;
  height: 25px;
  line-height: 25px;
}
.vt:after {
  position: absolute;
  border: 4px solid transparent;
  content: "";
}
.ge {
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  transform: translate3d(0, 10px, 0);
  translate: -50% 0;
}
.ge:after {
  left: 50%;
  top: 100%;
  border-top-color: #fff;
  transform: translate(-50%);
}
.ce {
  left: 50%;
  top: 100%;
  margin-top: 5px;
  transform: translate3d(0, -10px, 0);
  translate: -50% 0;
}
.ce:after {
  left: 50%;
  bottom: 100%;
  border-bottom-color: #fff;
  transform: translate(-50%);
}
@keyframes fe {
  to {
    transform: rotate(1turn);
  }
}
.Ba {
  display: none;
}
#E .zt {
  border-radius: 3px;
  width: 6px;
  height: 25px;
  background-color: #fff;
  cursor: ew-resize;
  transform: translateY(-50%);
}
#E .zt:nth-of-type(1) {
  margin-left: -2px;
}
#E .zt:nth-of-type(2) {
  margin-left: -4px;
}
#E .Da {
  border: 2px solid #ffebf7;
  border-radius: 10px;
  background: transparent;
}
.Za {
  position: fixed;
  inset: 0 0 0 var(--chat-width, 570px);
  z-index: 9999;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
.Ea {
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff9;
}
.St {
  display: flex;
  position: absolute;
  top: 70px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  flex-direction: column;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 25px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.Ga {
  display: flex;
  align-items: center;
  gap: 10px;
}
.Ia {
  font-size: 20px;
  color: #fffc;
}
.Ja {
  display: flex;
  position: relative;
  padding: 5px;
  border-radius: 20px;
  background-color: #ffffff1a;
}
.be {
  position: relative;
  z-index: 9;
  border-radius: 20px;
  background-color: transparent;
  transition: all 0.3s;
}
.be:hover {
  background-color: transparent;
  box-shadow: 0 0 10px transparent;
}
.Ka {
  background-image: linear-gradient(120deg, #f8a0d3 15%, #9efae0 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.La {
  margin-right: 5px;
}
.Oa {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 20px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  background-color: #ffffff1a;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.Qa {
  transform: translate(100%);
}
.Va {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.Wa {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 15px;
}
._a {
  overflow: hidden;
  position: relative;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.ts {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center/cover;
  filter: blur(30px);
  transition: all 0.3s;
}
.os {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.es {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center/contain;
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.rs {
  z-index: 9;
  opacity: 1;
}
.is {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  color: #fffc;
}
.jt {
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: underline;
  font-size: 18px;
  color: #fff;
  transition: all 0.3s;
}
.jt:hover {
  color: var(--primary);
}
.jt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ns {
  width: 100%;
  height: 100%;
}
.as {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ss {
  line-height: 26px;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffb3;
}
.he {
  cursor: pointer;
  text-decoration: underline;
  color: #ffffffe8;
  transition: all 0.3s;
}
.he:hover {
  color: #fff;
}
.ue {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.25em;
}
.ue:after {
  display: block;
  white-space: pre-wrap;
  content: "...\a..\a.";
  animation: Rt 1s infinite step-start both;
}
.ls {
  display: flex;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 99;
  padding: 1px;
  border-radius: 10px;
  height: 30px;
  background-color: #0000004d;
}
.me {
  gap: 5px;
  padding: 0 20px;
  border: none;
  min-width: 125px;
  height: 28px;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.me:hover,
.ps {
  color: #fff;
  border-radius: 9px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.ds {
  border-radius: 5px;
  object-fit: cover;
  width: 15px;
  height: 15px;
}
.xs {
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 10px;
  z-index: 99;
  align-items: flex-start;
  gap: 10px;
}
.ye {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px;
  background-color: #0000004d !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-size: 11px !important;
}
.ye div {
  font-size: 11px !important;
}
.we {
  position: relative;
  margin-left: -10px;
  border-radius: 15px;
  width: 0;
  height: 100%;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  opacity: 0;
  transition: all 0.3s;
}
.we::-webkit-scrollbar {
  opacity: 0;
}
.fs {
  overflow: auto;
  margin-left: 0;
  padding: 15px;
  width: 80px;
  height: 100%;
  opacity: 1;
}
.gs {
  overflow: auto;
  box-sizing: border-box;
  padding-bottom: 60px;
  height: 100%;
}
.Ct {
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #272929;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s;
  width: 50px;
  height: 50px;
}
.Ct:not(:first-child) {
  margin-top: 15px;
}
.Ct:hover,
.cs {
  border-color: #fabde1;
}
.bs {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.hs {
  background-image: linear-gradient(180deg, #272929, #ffffff1a);
}
.us {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ms {
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  height: 30px;
  background-color: #0000004d !important;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ys {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 65px;
  z-index: 99;
  align-items: center;
  gap: 10px;
  padding: 14px 54px 14px 19px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  background-color: #0000004d;
  box-shadow: 0 5px 25px #0000004d;
  -webkit-backdrop-filter: blur(65px);
  backdrop-filter: blur(65px);
  transform: translate(-50%);
  transition: all 0.3s;
  scale: 0;
}
.ws {
  scale: 1;
}
.ke {
  border: none;
  width: 400px;
  height: 25px;
  max-height: 150px;
  background-color: transparent;
  resize: none;
  line-height: 25px;
  font-size: 16px;
  color: #fff;
  transition: all 0.3s;
}
.ke::placeholder {
  color: #fff9;
}
.ks {
  background-color: #fff3;
}
.vs {
  position: absolute;
  right: 10px;
  top: 50%;
  border: none;
  border-radius: 10px;
  background-color: var(--primary);
  cursor: pointer;
  color: #fff;
  transform: translateY(-50%);
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
}
.zs {
  opacity: 0.4;
  cursor: not-allowed;
}
.Ss {
  position: absolute !important;
  left: 100%;
  bottom: 100%;
  margin: 0 0 -10px -10px;
  border-radius: 50%;
  width: 25px !important;
  height: 25px !important;
  background-color: #000000b3 !important;
}
.js {
  display: flex;
  position: absolute;
  right: 10px;
  top: 20px;
  bottom: 20px;
  z-index: 99;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  border-radius: 15px;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: all 0.3s;
}
.Rs {
  opacity: 1;
  transform: translateZ(0);
}
.Cs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  line-height: 25px;
  font-size: 18px;
  color: #fffc;
}
.G {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.G:first-of-type {
  margin-left: auto;
}
.G:hover {
  color: #fff;
}
.G:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.Ns {
  flex: 1;
  padding: 4px;
  border: none;
  border-radius: 2px;
  background-color: transparent;
  resize: none;
  line-height: 25px;
  font-size: 16px;
  color: #fff9;
  transition: all 0.3s;
}
.Ys {
  background-color: #ffffff0d;
  caret-color: #fff;
}
.Fs {
  display: flex;
  position: relative;
  z-index: 9;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.Xs {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: auto;
  transition: all 0.3s;
}
.Ts {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.Us {
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Ps {
  font-size: 14px;
  color: #fffc;
}
.ve {
  color: #fff9;
  white-space: nowrap;
  transition: all 0.3s;
  border-radius: 10px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.ve:hover,
.Ms {
  background-color: #fff3;
  box-shadow: none;
  color: #fff;
}
.ze {
  position: relative;
}
.ze:hover .I {
  opacity: 1;
  pointer-events: auto;
}
.I {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  border-radius: 15px;
  background-color: #0000004d;
  box-shadow: 0 5px 25px #0000004d;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  color: #d74c47;
  white-space: nowrap;
  transition: all 0.3s;
}
.I:before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
  content: "";
}
.I:hover {
  background-color: #ffffff1a;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}
.Hs {
  margin-top: 20px;
  padding: 10px;
  border-radius: 15px;
  background-color: #ffffff0d;
}
.J {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 4px;
  scroll-snap-type: x mandatory;
}
.J::-webkit-scrollbar {
  height: 2px;
}
.J::-webkit-scrollbar-track {
  background-color: transparent;
}
.J::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: transparent;
}
.Se {
  scroll-snap-align: start;
  position: relative;
  flex-shrink: 0;
  width: 155px;
}
.Se:hover .Nt {
  z-index: 9;
  opacity: 1;
}
.je {
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
}
.je:hover,
.qs {
  border-color: #ffebf7;
}
.As {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.Bs {
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  background-color: #00000080;
  font-size: 12px;
  color: #fff9;
  height: 20px;
  line-height: 20px;
}
.Re {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.25em;
}
.Re:after {
  display: block;
  white-space: pre-wrap;
  content: "...\a..\a.";
  animation: Rt 1s infinite step-start both;
}
.Ce {
  display: flex;
  position: relative;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 0 5px;
  border-radius: 10px;
  height: 35px;
  background-color: #ffffff1a;
  cursor: pointer;
  font-size: 12px;
  color: #fff9;
  transition: all 0.3s;
}
.Ce:hover .Ne {
  opacity: 1;
  pointer-events: auto;
}
.Ne {
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.Ds:first-of-type {
  margin-left: auto;
}
.Zs:hover {
  color: #d74c46 !important;
}
.Es {
  position: absolute !important;
  left: 0;
  bottom: 100%;
  background-color: #fff6;
}
.Gs {
  gap: 5px;
  margin-top: 10px;
  padding: 0 10px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  width: 100%;
  height: 35px;
  background-color: transparent;
  cursor: pointer;
  cursor: default;
  font-size: 12px;
  color: #fff3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Is {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 0 5px;
  border-radius: 5px;
  background-color: #00000080;
  font-size: 12px;
  color: #fff9;
  height: 15px;
  line-height: 15px;
}
.Ye {
  position: absolute;
  right: 5px;
  top: 5px;
  border: none;
  border-radius: 5px;
  background-color: #00000080;
  cursor: pointer;
  color: #fffc;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.Ye:hover {
  color: #fff;
}
.Nt {
  position: absolute;
  left: 100%;
  top: 5px;
  z-index: -1;
  margin-left: -10px;
  width: 25px;
  height: 80px;
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Nt:after {
  border-radius: 1px;
  width: 2px;
  height: 100%;
  background-color: #fff6;
  content: "";
}
.Js {
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
}
.Ks {
  position: relative;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  height: 50px;
  background-color: #ffffff1a;
  font-size: 12px;
  color: #ffffff1a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Ls {
  justify-content: flex-start;
  gap: 5px;
  border-style: solid;
  color: #fffc;
  white-space: nowrap;
}
.Os {
  gap: 3px;
  margin-left: 35px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Qs {
  border-radius: 1px;
  width: 2px;
  max-width: 30px;
  min-height: 2px;
  background-color: #fff3;
}
.Yt {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
.Yt:first-of-type {
  margin-left: auto;
}
.Yt:only-child {
  margin-left: 0;
  width: auto;
}
.Vs:hover {
  color: #d74c46 !important;
}
.Ws {
  position: absolute !important;
  right: 0;
  bottom: 100%;
  width: 280px !important;
  background-color: #fff6;
}
.Fe {
  background-color: transparent;
}
.Fe:hover {
  background-color: transparent;
  box-shadow: none;
}
._s {
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  width: 860px;
  height: 450px;
}
.tl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center/cover;
  filter: blur(10px);
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ol {
  z-index: 99;
}
.el {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
}
.rl {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  margin: -15px 0 0 -15px;
  animation: Xe 1s linear infinite;
}
.il {
  display: flex;
  position: relative;
  z-index: 9;
  align-items: center;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  height: 60px;
  transition: all 0.3s;
}
.nl {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.Te {
  border: none;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
}
.Te:hover {
  color: var(--primary);
}
.al {
  position: relative;
  flex: 1;
  border-radius: 10px;
  height: 100%;
}
.sl,
.ll {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 5px;
  padding: 0 10px;
  border-radius: 10px;
  background-color: #00000080;
  font-size: 12px;
  color: #fff9;
  white-space: nowrap;
  transform: translate(-50%);
  transition: all 0.3s;
  height: 25px;
  line-height: 25px;
}
.pl {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  border-radius: 2px;
  width: 4px;
  background-color: #fff;
}
.dl {
  gap: 1px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xl {
  border-radius: 1px;
  width: 2px;
  max-width: 30px;
  min-height: 2px;
  background-color: #fff3;
}
.fl {
  border-radius: 1px;
  width: 2px;
  max-width: 30px;
  min-height: 2px;
  background-color: transparent;
}
.gl {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: transparent;
}
.cl {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.K {
  display: block;
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.K rect {
  fill-opacity: 0.12;
  transition: fill-opacity 0.2s;
}
.K:hover rect,
.K:active rect {
  fill-opacity: 0.28;
}
.Ue {
  animation: Pe var(--modal-duration, 0.3s) both;
}
.Ue .St {
  animation: Me var(--modal-duration, 0.3s) both;
}
.He {
  animation: qe var(--modal-duration, 0.3s) both;
}
.He .St {
  animation: Ae var(--modal-duration, 0.3s) both;
}
@keyframes Pe {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes qe {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes Rt {
  33% {
    transform: translate3d(0, -2em, 0);
  }
  66% {
    transform: translate3d(0, -1em, 0);
  }
}
@keyframes Me {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Ae {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes Xe {
  to {
    transform: rotate(1turn);
  }
}
.Be {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 16px;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  min-height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  transform: translate(-50%);
  transition: background-color 0.2s ease;
}
.Be:hover {
  background-color: #d1287a;
}
.bl {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #f8f7f7;
}
.L {
  position: relative;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.L:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.L:hover {
  color: #fff;
}
.L:hover .Ft {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
.Ft {
  position: absolute;
  z-index: -1;
  padding: 0 10px;
  border-radius: 8px;
  background-color: #232425;
  opacity: 0;
  font-size: 12px;
  color: #fffc;
  white-space: nowrap;
  transition: all 0.3s;
  height: 25px;
  line-height: 25px;
}
.Ft:after {
  position: absolute;
  border: 4px solid transparent;
  content: "";
}
.De {
  right: 100%;
  top: 50%;
  margin-right: 5px;
  transform: translate3d(-10px, 0, 0);
  translate: 0 -50%;
}
.De:after {
  left: 100%;
  top: 50%;
  border-left-color: #232425;
  transform: translateY(-50%);
}
.Ze {
  left: 100%;
  top: 50%;
  margin-left: 5px;
  transform: translate3d(10px, 0, 0);
  translate: 0 -50%;
}
.Ze:after {
  right: 100%;
  top: 50%;
  border-right-color: #232425;
  transform: translateY(-50%);
}
.Ee {
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  transform: translate3d(0, 10px, 0);
  translate: -50% 0;
}
.Ee:after {
  left: 50%;
  top: 100%;
  border-top-color: #232425;
  transform: translate(-50%);
}
.Ge {
  left: 50%;
  top: 100%;
  margin-top: 5px;
  transform: translate3d(0, -10px, 0);
  translate: -50% 0;
}
.Ge:after {
  left: 50%;
  bottom: 100%;
  border-bottom-color: #232425;
  transform: translate(-50%);
}
.hl {
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  border-radius: 10px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.ul {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #272929;
  animation: Xt 0.3s;
  width: 100%;
  height: 100%;
}
.Ie {
  display: block;
  animation: Je 5s linear infinite;
  width: 100%;
  height: 100%;
}
.Ie:before {
  background: url(/oiioii/assets/image-loader-Dndgyi71.png) no-repeat center/cover;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300%;
  height: 300%;
}
.ml {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  gap: 10px;
  animation: Xt 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.yl {
  width: 20%;
  max-width: 50px;
  max-height: 50px;
}
.wl {
  display: flex;
  align-items: center;
  gap: 5px;
}
.kl {
  line-height: 20px;
  font-size: 14px;
  color: #fff6;
}
.vl {
  border: none;
  background-color: transparent;
  cursor: pointer;
  line-height: 20px;
  text-decoration: underline;
  font-size: 14px;
  color: #fff9;
}
.zl {
  filter: blur(5px);
  opacity: 0;
  object-fit: cover;
  transform: scale(1.1);
  transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;
}
.Sl {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
@keyframes Xt {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes Je {
  to {
    transform: rotate(1turn);
  }
}
.jl {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Tt {
  position: relative;
  border-radius: 25px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
}
.Rl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 450px;
  background-color: #fff;
}
.Cl {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  min-height: 20px;
}
.Nl {
  animation: Ke 1s linear infinite;
}
.Yl {
  line-height: 20px;
  font-size: 14px;
  color: #00000080;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}
.Le {
  animation: Oe var(--modal-duration, 0.3s) both;
}
.Le .Tt {
  animation: Qe var(--modal-duration, 0.3s) both;
}
.Ve {
  animation: We var(--modal-duration, 0.3s) both;
}
.Ve .Tt {
  animation: _e var(--modal-duration, 0.3s) both;
}
@keyframes Oe {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes We {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes Qe {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes _e {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes Ke {
  to {
    transform: rotate(1turn);
  }
}
.Fl {
  position: relative;
  padding: 30px 15px 15px;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 15px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.Xl {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.Tl {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: 700;
  font-size: 16px;
  color: #fffc;
  transform: translate3d(-50%, -110%, 0);
}
.Ul {
  position: relative;
  border-radius: 9999px;
  height: 6px;
  background: linear-gradient(90deg, #ffffff1a, #ffffff1a 50%, #ffffff1a);
  cursor: pointer;
}
.Pl {
  border-radius: inherit;
  height: 100%;
  background: #fff9;
}
.Ml {
  position: absolute;
  top: 50%;
  border-radius: 2px;
  width: 6px;
  height: 12px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.Hl {
  transform: translate(-50%, -50%) scale(1.05);
}
.ql {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  background-color: transparent;
}
.Al {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #2a2a2afa;
  box-shadow: 0 4px 16px #0006;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  pointer-events: auto;
}
.Bl {
  display: flex;
  gap: 8px;
}
.tr {
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  min-width: 56px;
  background-color: #ffffff1a;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #fff9;
  transition: all 0.2s ease;
}
.tr:hover {
  border-color: #fff6;
  background-color: #ffffff26;
  color: #fffc;
}
.or {
  border-color: #fff;
  background-color: #fff3;
  color: #fff;
}
.or:hover {
  border-color: #fff;
  background-color: #ffffff40;
}
.er {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background-color: #ef319f;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #f8f7f7;
  transition: background-color 0.2s ease;
}
.er:hover {
  background-color: #d1287a;
}
.Dl {
  display: inline-flex;
}
.Zl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.rr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  width: 100%;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.rr:hover {
  background-color: #ffffff0f;
  color: #ffffffe6;
}
.El {
  align-items: flex-start;
}
.Gl {
  white-space: nowrap;
}
.Il {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.Jl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.Kl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.Ll {
  line-height: 13px;
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff7a;
  white-space: nowrap;
}
.Ol {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  border-radius: 6px;
  height: 20px;
  background: #ef319f;
  line-height: 18px;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.22px;
}
.Ql {
  display: inline-flex;
}
.Vl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.ir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  width: 100%;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
  color: #d74c47;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.ir:hover {
  background-color: #ffffff0f;
  color: #d74c47;
}
.Wl {
  white-space: nowrap;
}
._l {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.tp {
  position: fixed;
  inset: 0 0 0 var(--chat-width, 570px);
  z-index: 9999;
  background-color: #000;
}
.Ut {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  padding: 14px 32px 20px 46px;
  border: none;
  border-radius: 0;
  background-color: #000;
}
.op {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-top: 6px;
  height: 62px;
}
.O {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.O rect {
  fill-opacity: 0.12;
  transition: fill-opacity 0.2s;
}
.O:hover rect,
.O:active rect {
  fill-opacity: 0.28;
}
.ep {
  --video-cover: none;
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  flex: 0 0 auto;
  flex-basis: 58%;
  min-height: 0;
  will-change: flex-basis;
  transition: flex-basis 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rp {
  transition: none;
}
.ip {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1;
  margin-bottom: 12px;
  border: 1px solid var(--Neutral-Border, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  min-height: 0;
  background: var(--Neutral-Surface, #161718);
}
.np {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00000080;
  background-image: var(--video-cover);
  background-position: center;
  background-size: cover;
}
.ap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00000059;
  background-image: var(--video-cover);
  background-position: center;
  background-size: cover;
  filter: blur(40px);
  opacity: 0.95;
  will-change: transform;
  transform: translateZ(0) scale(1.08);
  transform-origin: center;
}
.sp {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.lp {
  display: flex;
  position: absolute;
  left: 24px;
  top: 20px;
  z-index: 2;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  transition: opacity 0.2s;
}
.pp {
  opacity: 0;
  pointer-events: none;
}
.dp {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  line-height: 24px;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  letter-spacing: 0.3px;
}
.xp {
  display: none;
}
.nr {
  display: flex;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #ffffff1f;
  cursor: pointer;
  font-size: 13px;
  color: #fffc;
  transition: background-color 0.2s;
}
.nr:hover {
  background-color: #fff3;
}
.fp {
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 10px;
  z-index: 99;
  align-items: flex-start;
  gap: 10px;
  transition: opacity 0.2s;
}
.ar {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px;
  background-color: #0000004d !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-size: 11px !important;
}
.ar div {
  font-size: 11px !important;
}
.sr {
  position: relative;
  margin-left: -10px;
  border-radius: 15px;
  width: 0;
  height: 100%;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  opacity: 0;
  transition: all 0.3s;
}
.sr::-webkit-scrollbar {
  opacity: 0;
}
.gp {
  overflow: auto;
  margin-left: 0;
  padding: 15px;
  width: 80px;
  height: 100%;
  opacity: 1;
}
.cp {
  overflow: auto;
  box-sizing: border-box;
  padding-bottom: 60px;
  height: 100%;
}
.Pt {
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #272929;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s;
  width: 50px;
  height: 50px;
}
.Pt:not(:first-child) {
  margin-top: 15px;
}
.Pt:hover,
.bp {
  border-color: #fabde1;
}
.hp {
  opacity: 0;
  pointer-events: none;
}
.lr {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 16px;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  min-height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  transform: translate(-50%);
  transition: background-color 0.2s ease;
}
.lr:hover {
  background-color: #d1287a;
}
.up {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #f8f7f7;
}
.mp {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
  background-color: #00000080;
}
.yp {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background-color: #00000080;
  color: #ffffffe6;
}
.wp {
  animation: pr 0.8s linear infinite;
}
@keyframes pr {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.kp {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vp {
  font-size: 16px;
  color: #fff9;
}
.zp {
  display: flex;
  position: absolute;
  left: 20px;
  right: 40px;
  bottom: 16px;
  z-index: 2;
  align-items: center;
  gap: 16px;
  padding: 4px 8px;
  transition: opacity 0.2s;
}
.Sp {
  opacity: 0;
  pointer-events: none;
}
.dr {
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  width: 28px;
  height: 28px;
  background: none;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.2s;
}
.dr:hover {
  opacity: 0.85;
}
.jp {
  position: relative;
  width: 28px;
  height: 28px;
}
.xr {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.xr svg {
  display: block;
}
.Rp {
  opacity: 1;
  transform: scale(1);
}
.Yp {
  display: flex;
  align-items: center;
  line-height: 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28px;
  white-space: nowrap;
}
.Fp,
.Xp {
  color: #ffffffe8;
}
.Tp {
  color: #ffffff7a;
}
.Up {
  overflow: hidden;
  flex: 1;
  margin-left: 16px;
  margin-right: 10px;
  border-radius: 99px;
  height: 4px;
  background-color: #ffffff1f;
  cursor: pointer;
}
.Pp {
  border-radius: 99px;
  height: 100%;
  background-color: #fffc;
  transition: width 0.1s linear;
}
.Mp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 92px;
  background: linear-gradient(180deg, #0000, #0000008c);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.2s;
}
.Hp {
  opacity: 0;
}
.qp {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 16px;
  padding-top: 16px;
  min-height: 0;
}
.Ap {
  height: 1px;
  background-color: #ffffff14;
}
.Bp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 20px;
  padding-right: 14px;
}
.fr {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 0 12px;
  border: none;
  border-radius: 20px;
  height: 36px;
  background-color: #ffffff1a;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 12px;
  color: #ffffffb3;
  transition: background-color 0.2s;
}
.fr:hover {
  background-color: #ffffff2e;
}
.Dp {
  display: none;
}
.Zp {
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
.gr {
  position: relative;
}
.gr:hover .Q {
  opacity: 1;
  pointer-events: auto;
}
.Q {
  display: flex;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 15px;
  background-color: #0000004d;
  box-shadow: 0 5px 25px #0000004d;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  font-weight: 600;
  font-size: 12px;
  color: #d74c47;
  white-space: nowrap;
  transition: all 0.3s;
}
.Q:before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
  content: "";
}
.Q:hover {
  background-color: #ffffff1a;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}
.Ep {
  flex: 1;
  min-width: 8px;
}
.Gp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 6px 8px 6px 20px;
  border-radius: 99px;
  width: 372px;
  height: 48px;
  background-color: #ffffff14;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.Ip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}
.cr {
  flex: 1;
  border: none;
  min-width: 120px;
  outline: none;
  background: transparent;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffdb;
  letter-spacing: 0.28px;
}
.cr::placeholder {
  color: #ffffff7a;
}
.j {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 99px;
  width: 32px;
  height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.2s;
}
.j:hover {
  opacity: 0.9;
}
.j:disabled {
  background-color: #ffffff14;
  cursor: not-allowed;
  color: #fff;
}
.j:disabled svg {
  opacity: 0.2;
}
.j:disabled:hover {
  background-color: #ffffff14;
  opacity: 1;
}
.Jp {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  padding-left: 24px;
  padding-right: 24px;
  min-height: 0;
}
.Kp {
  display: flex;
  align-items: center;
  gap: 16px;
}
.V {
  display: -webkit-box;
  overflow: hidden;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-box-orient: vertical;
  line-height: 18px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 13px;
  color: #ffffff7a;
  transition: color 0.2s;
}
.V:hover {
  color: #ffffffe8;
}
.V:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.V:disabled:hover {
  color: #ffffff7a;
}
.br,
.br:hover {
  color: #ffffffe8;
}
.hr {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 4px 12px;
  border: none;
  border-radius: 10px;
  height: 28px;
  background-color: #ffffff0f;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 13px;
  color: #ffffffb3;
  transition:
    background-color 0.2s,
    color 0.2s,
    opacity 0.2s;
}
.hr:hover {
  background-color: #ffffff1a;
  color: #ffffffe8;
}
.Lp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-height: 18px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 13px;
}
.Op {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.Mt,
.Ht {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 10px;
  height: 28px;
  cursor: pointer;
  line-height: 18px;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 13px;
  transition:
    background-color 0.2s,
    color 0.2s,
    opacity 0.2s;
}
.Mt {
  background-color: #ffffff14;
  color: #ffffffb3;
}
.Mt:hover {
  background-color: #ffffff1f;
  color: #ffffffe8;
}
.Ht {
  background-color: #fff;
  color: #000;
}
.Ht:hover {
  opacity: 0.85;
}
.Qp {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ur {
  margin-bottom: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.Vp .ur {
  opacity: 1;
}
.qt {
  margin-top: 16px;
  opacity: 0.6;
}
.qt .mr,
.qt .yr {
  padding-left: 0;
}
.wr {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
}
.At,
.Bt {
  display: block;
  overflow: auto;
  flex: 1 1 auto;
  padding-right: 8px;
  min-width: 0;
  min-height: 0;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  overflow-wrap: anywhere;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.At::-webkit-scrollbar,
.Bt::-webkit-scrollbar {
  display: none;
}
.wr .At {
  padding-right: 0;
  line-height: 18px;
  font-size: 13px;
  letter-spacing: 0;
}
.mr {
  padding: 0 20px 20px 24px;
  line-height: 18px;
  font-weight: 400;
  font-size: 13px;
  color: #ffffffe8;
  letter-spacing: 0;
  white-space: pre-wrap;
}
.Wp {
  margin-bottom: 14px;
}
._p {
  margin-bottom: 14px;
  color: #ffffffe8;
}
.t0 {
  display: block;
  position: relative;
}
.o0 {
  display: inline-flex;
  position: absolute;
  left: 0;
  top: 0;
  align-items: flex-start;
  pointer-events: none;
}
.e0 {
  color: #5dbcff;
}
.r0 {
  color: #ffffffe8;
}
.i0 {
  line-height: 18px;
  font-family:
    PingFang SC,
    Microsoft YaHei,
    sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #ffffffe8;
  letter-spacing: 0;
}
.n0 {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  min-width: 0;
  min-height: 18px;
  outline: none;
  background: transparent;
  resize: none;
  line-height: 18px;
  text-indent: var(--videoprompt-key-indent, 0);
  font-family:
    PingFang SC,
    Microsoft YaHei,
    sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #ffffffe8;
  letter-spacing: 0;
}
.yr {
  padding: 0 20px 20px 24px;
  line-height: 18px;
  font-weight: 400;
  font-size: 13px;
  color: #ffffffe8;
  letter-spacing: 0;
  white-space: pre-wrap;
}
.kr {
  display: block;
  overflow: auto;
  flex: 1 1 auto;
  padding: 0 8px 0 0;
  border: none;
  min-width: 0;
  min-height: 0;
  outline: none;
  background: transparent;
  opacity: 1;
  resize: none;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  overflow-wrap: anywhere;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kr::-webkit-scrollbar {
  display: none;
}
.a0 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
}
.Bt {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.s0 {
  font-weight: 500;
  font-size: 13px;
  color: #fff9;
}
@keyframes l0 {
  0% {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.p0 {
  display: flex;
  overflow: visible;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  padding-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background-color: #161718;
}
.d0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 12px 20px;
  width: 100%;
}
.x0 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.Dt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 16px;
  height: 16px;
  background: none;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.2s;
}
.Dt:hover {
  opacity: 0.85;
}
.Dt svg {
  width: 16px;
  height: 16px;
}
.f0 {
  display: flex;
  align-items: center;
  line-height: 18px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24px;
  white-space: nowrap;
}
.g0,
.c0 {
  color: #ffffffb3;
}
.b0 {
  color: #ffffff7a;
}
.h0 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vr {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 18px;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
  white-space: nowrap;
}
.vr:hover {
  color: #ffffffe6;
}
.u0 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  height: 32px;
  background-color: #ffffff14;
}
.m0 {
  position: relative;
}
.y0 {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 10;
  margin-bottom: 8px;
  width: 80px;
  height: 32px;
  transform: translate(-50%);
}
.Zt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 28px;
  background: transparent;
  cursor: pointer;
  color: #ffffffb3;
  transition: background-color 0.2s;
}
.Zt:hover {
  background-color: #ffffff0f;
}
.Zt svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.Et {
  display: flex;
  overflow: auto hidden;
  align-items: center;
  gap: 8px;
  padding: 0;
  width: 100%;
  height: 116px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.Et::-webkit-scrollbar {
  display: none;
}
.Et:before {
  scroll-snap-align: start;
  flex: 0 0 12px;
  content: "";
}
.zr {
  overflow: visible;
  scroll-snap-align: start;
  position: relative;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 203px;
  height: 116px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.zr:hover .Gt {
  z-index: 9;
  opacity: 1;
}
.w0 {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
}
.k0 {
  border-color: #fff;
}
.v0 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.z0 {
  width: 100%;
  height: 100%;
  background-color: #ffffff14;
}
.S0 {
  display: flex;
  overflow: hidden;
  position: absolute;
  left: 8px;
  top: 8px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  width: 20px;
  height: 20px;
  background-color: #000c;
  line-height: 15px;
  font-weight: 600;
  font-size: 12px;
  color: #ffffffb3;
}
.It {
  display: flex;
  position: absolute;
  right: 8px;
  top: 8px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  background-color: #00000054;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  color: #fff;
  transition: background-color 0.2s;
}
.It:hover {
  background-color: #00000073;
}
.It svg {
  display: block;
  width: 24px;
  height: 24px;
}
.Gt {
  position: absolute;
  left: 100%;
  top: 50%;
  z-index: -1;
  margin-left: -6px;
  width: 26px;
  height: 90px;
  opacity: 0;
  transform: translateY(-50%);
  transition:
    opacity 0.2s,
    z-index 0s 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Gt:after {
  border-radius: 1px;
  width: 2px;
  height: 100%;
  background-color: #fff6;
  content: "";
}
.Jt {
  cursor: pointer;
  color: #fff;
  transition: background-color 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
}
.Jt:hover {
  background-color: #ffffff2e;
}
.Jt svg {
  display: block;
  width: 20px;
  height: 20px;
}
.Sr {
  animation: jr var(--modal-duration, 0.3s) both;
}
.Sr .Ut {
  animation: Rr var(--modal-duration, 0.3s) both;
}
.Cr {
  animation: Nr var(--modal-duration, 0.3s) both;
}
.Cr .Ut {
  animation: Yr var(--modal-duration, 0.3s) both;
}
@keyframes jr {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Nr {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes Rr {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Yr {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
.j0 {
  display: inline-block;
}
.b {
  position: absolute;
  z-index: 1000;
  border-radius: 8px;
  max-width: 280px;
  background: #fff;
  opacity: 0;
  pointer-events: auto;
  transform: scale(0.95);
  animation: Fr 0.15s ease-out forwards;
}
.b.R0 .R {
  left: 50%;
  bottom: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  transform: translate(-50%);
}
.b.C0 .R {
  left: 50%;
  top: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  transform: translate(-50%);
}
.b.N0 .R {
  right: -4px;
  top: 50%;
  border-left: 5px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.b.Y0 .R {
  left: -4px;
  top: 50%;
  border-right: 5px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.R {
  position: absolute;
  z-index: 1001;
  width: 0;
  height: 0;
}
.Xr {
  padding: 4px 8px;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #000000a3;
  overflow-wrap: break-word;
  word-break: break-all;
}
@keyframes Fr {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 640px) {
  .b {
    max-width: calc(100vw - 32px);
  }
  .Xr {
    padding: 4px 6px;
    font-size: 13px;
  }
}
.F0 {
  display: flex;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  border-radius: 10px;
  background-clip: padding-box;
  box-shadow: 0 0 0 1000px #ffffff1a inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
  caret-color: #fffc;
  transition: background-color 99999s ease-out;
  color-scheme: dark;
}
input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #fff3 inset !important;
}
input:-moz-autofill {
  box-shadow: 0 0 0 1000px #ffffff1a inset !important;
  color: #fffc !important;
  caret-color: #fffc;
}
.X0 {
  display: block;
  line-height: 20px;
  font-weight: 700;
  font-size: 16px;
  color: #fffc;
}
.T0 {
  display: block;
}
.U0 {
  margin-bottom: 10px;
}
.P0 {
  align-items: center;
  gap: 10px;
}
.M0 {
  margin-right: 10px;
}
.H0:after {
  margin-left: 5px;
  color: red;
  content: "*";
}
.q0 {
  position: relative;
}
.A0 {
  flex: 1;
}
.r {
  padding: 14px;
  width: 100%;
  outline: none;
  line-height: 20px;
  font-size: 16px;
  color: #fffc;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color-scheme: dark;
}
.r::placeholder {
  color: #fff6;
}
.r:disabled {
  opacity: 0.3;
}
.r:focus {
  border-color: var(--primary);
  background-color: #fff3;
  box-shadow: 0 0 10px var(--primary);
  transform: translateY(-1px);
}
.r:read-only {
  background-color: #fff3;
}
.r:-webkit-autofill,
.r:-webkit-autofill:hover,
.r:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #ffffff1a inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
  caret-color: #fffc;
}
.r:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #fff3 inset !important;
}
.r:-moz-autofill {
  background-color: #ffffff1a !important;
  color: #fffc !important;
  caret-color: #fffc;
}
.B0 {
  padding-left: 49px;
}
.D0 {
  padding-right: 49px;
}
.Z0 {
  border-color: red;
  box-shadow: 0 0 10px red;
}
.E0 {
  border-color: #1f7a5c;
  box-shadow: 0 0 10px #1f7a5c;
}
.G0 {
  position: absolute;
  left: 15px;
  top: 50%;
  pointer-events: none;
  color: #fff9;
  transform: translateY(-50%);
}
.Kt {
  position: absolute;
  right: 15px;
  top: 50%;
  color: #fff9;
  transform: translateY(-50%);
}
.Kt:has(button, [role="button"], .Tr) {
  cursor: pointer;
  transition: all 0.3s;
}
.Kt:has(button, [role="button"], .Tr):hover {
  color: #fffc;
}
.I0 {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 10px;
  height: 0;
  opacity: 0;
  font-size: 14px;
  color: red;
  transition: all 0.3s;
}
.J0 {
  margin-top: 10px;
  height: 20px;
  opacity: 1;
  line-height: 20px;
}
.K0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.L0 {
  color: var(--primary);
  transition: all 0.3s;
  animation: Lt 1s linear infinite;
}
.O0 {
  border: 3px solid var(--primary-light);
  border-top: 3px solid var(--primary);
  transition: all 0.3s;
  animation: Lt 1s linear infinite;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.Q0 {
  margin-top: 10px;
  height: 30px;
  font-weight: 700;
  font-size: 16px;
  color: #fffc;
}
.Ur {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.25em;
}
.Ur:after {
  display: block;
  white-space: pre-wrap;
  content: "...\a..\a.";
  animation: Pr 1s infinite step-start both;
}
@keyframes Pr {
  33% {
    transform: translate3d(0, -2em, 0);
  }
  66% {
    transform: translate3d(0, -1em, 0);
  }
}
@keyframes Lt {
  to {
    transform: rotate(1turn);
  }
}
.V0 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
}
.h {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
}
.h:focus {
  outline: none;
}
.h:focus-visible {
  outline: none;
}
.h:hover .Ot {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.W0 {
  position: relative;
  transition: all 0.3s;
}
._0 {
  width: 100%;
  height: 100%;
}
.t5 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  margin: -15px 0 0 -15px;
  animation: Mr 1s linear infinite;
}
.o5 {
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}
.Ot {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  align-items: center;
  gap: 16px;
  padding: 16px 12px 8px;
  height: auto;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.e5 {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: none;
}
.Qt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.Qt:hover {
  color: #ffffff91;
}
.Qt:active {
  color: #ffffff80;
}
.r5 {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  line-height: 20px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
}
.Hr {
  position: relative;
  flex: 1;
  height: 20px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
.Hr:before {
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 12px;
  width: 100%;
  height: 4px;
  background-color: #ffffff0f;
  content: "";
  transform: translateY(-50%);
}
.i5 {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  border-radius: 12px;
  height: 4px;
  background-color: #fff;
  transform: translateY(-50%);
}
.Vt {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  border-radius: 8px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px #0000003d;
  opacity: 0;
  cursor: grab;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}
.Vt:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.n5,
.Ot:hover .Vt {
  opacity: 1;
  pointer-events: auto;
}
.qr {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  border: none;
  border-radius: 15px;
  background-color: #fff3;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.qr:hover {
  color: var(--primary);
  transform: rotate(1turn);
}
.Ar {
  animation: Br var(--modal-duration, 0.3s) both;
}
.Ar .h {
  animation: Dr var(--modal-duration, 0.3s) both;
}
.Zr {
  animation: Er var(--modal-duration, 0.3s) both;
}
.Zr .h {
  animation: Gr var(--modal-duration, 0.3s) both;
}
@keyframes Br {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes Er {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes Dr {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Gr {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes Mr {
  to {
    transform: rotate(1turn);
  }
}
.a5 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
}
.W {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
  width: fit-content;
  height: fit-content;
}
.W:hover .Ir {
  opacity: 1;
  pointer-events: auto;
}
.s5,
.l5 {
  padding: 20px;
  font-size: 16px;
  color: #fffc;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.Wt {
  position: relative;
  transition: all 0.3s;
}
.p5 {
  font-size: 16px;
  color: #fffc;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Jr {
  overflow: hidden;
  position: relative;
  background-color: #000;
}
.d5 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.x5 {
  opacity: 1;
}
.f5 {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.g5 {
  opacity: 1;
}
.c5 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin: 0;
  padding: 0;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.b5 {
  opacity: 1;
}
.h5 {
  z-index: 999;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
}
.u5 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  margin: -15px 0 0 -15px;
  animation: Kr 1s linear infinite;
}
.Ir {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 10;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 16px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 0.3s;
}
.m5 {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: none;
}
._t {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
._t:hover {
  color: #ffffff91;
}
._t:active {
  color: #ffffff80;
}
.y5 {
  display: flex;
  align-items: center;
  min-width: 80px;
  line-height: 20px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
}
.to {
  position: relative;
  flex: 1;
  margin-bottom: 6px;
  width: 100%;
  height: 20px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.15s ease;
}
.to:before {
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 12px;
  width: 100%;
  height: 4px;
  background-color: #ffffff0f;
  content: "";
  transform: translateY(-50%);
}
.to:hover .Lr {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1.1);
}
.w5 {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  border-radius: 12px;
  height: 4px;
  background-color: #fff;
  will-change: width;
  transform: translateY(-50%);
}
.Lr {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  border-radius: 8px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px #0000003d;
  opacity: 0;
  cursor: grab;
  pointer-events: none;
  will-change: transform, left;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
  touch-action: none;
}
.k5 {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1.1);
}
.Wt:fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  width: 100vw !important;
  height: 100vh !important;
  box-shadow: none;
}
.Or {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  border: none;
  border-radius: 15px;
  background-color: #fff3;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.Or:hover {
  color: var(--primary);
  transform: rotate(1turn);
}
.Qr {
  animation: Vr var(--modal-duration, 0.3s) both;
}
.Qr .W {
  animation: Wr var(--modal-duration, 0.3s) both;
}
._r {
  animation: ti var(--modal-duration, 0.3s) both;
}
._r .W {
  animation: oi var(--modal-duration, 0.3s) both;
}
@keyframes Vr {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ti {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes Wr {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes oi {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes Kr {
  to {
    transform: rotate(1turn);
  }
}
.o {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 10;
  margin-bottom: 0;
  padding: 16px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  pointer-events: none;
}
.o.ei {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.o:not(.ei) {
  opacity: 1;
  transition: opacity 0.3s;
}
.o .s {
  position: relative;
  margin-bottom: 6px;
  width: 100%;
  height: 20px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
.o .s .v5 {
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 12px;
  width: 100%;
  height: 4px;
  background-color: #ffffff0f;
  transform: translateY(-50%);
}
.o .s .z5 {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  border-radius: 12px;
  height: 4px;
  background-color: #fff;
  will-change: width;
  transform: translateY(-50%);
}
.o .s .C {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  border-radius: 8px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px #0000003d;
  opacity: 0;
  cursor: grab;
  pointer-events: none;
  will-change: transform, left;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
  touch-action: none;
}
.o .s .C:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}
.o .s .C:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.o .s:hover .C,
.o .s.S5 .C {
  opacity: 1;
  pointer-events: auto;
}
.o .oo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: auto;
}
.o .oo .j5,
.o .oo .R5 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.o ._ {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.o ._:hover {
  color: #ffffff91;
}
.o ._:active {
  color: #ffffff80;
}
.o ._.C5 .N5 {
  animation: ri 1s linear infinite;
}
.o .ii {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
  white-space: nowrap;
}
.o .ii .Y5 {
  color: #fff;
}
.o .eo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.o .eo:hover {
  color: #ffffff91;
}
.o .eo:active {
  color: #ffffff80;
}
.o .ro {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.o .ro:hover {
  color: #ffffff91;
}
.o .ro:active {
  color: #ffffff80;
}
@keyframes ri {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.F5 {
  display: inline-block;
  position: relative;
}
.X5 {
  display: flex;
  overflow: hidden;
  line-height: 1;
}
.T5 {
  position: relative;
  width: 1ch;
  font-variant-numeric: tabular-nums;
}
.U5 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}
.P5,
.M5 {
  display: flex;
  align-items: center;
}
.H5 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.q5 {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.ni {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 1000;
  padding: 20px 20px 12px;
  border-radius: 20px;
  min-width: 320px;
  background: #232425;
  box-shadow: 0 12px 40px #00000080;
  animation: A5 0.25s ease-out;
}
.ni:before {
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: transparent;
  content: "";
}
.ai {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.ai .B5 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.io {
  cursor: pointer;
  color: #ffffffb3;
  transition: color 0.2s ease;
}
.io svg {
  color: currentcolor;
}
.io:hover {
  color: #fffc;
}
.D5 {
  font-family:
    SF Pro Display,
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  letter-spacing: -0.5px;
}
.si {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  border: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  transition: color 0.2s ease;
}
.si:hover {
  color: #fffc;
}
.Z5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 8px;
  border-radius: 16px;
  background-color: #ffffff0f;
}
.li {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  width: 100%;
  background: #ef319f0f;
}
.li .tt {
  position: absolute;
  right: 0;
  top: 0;
  height: 27px;
}
.E5 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pi {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #fabde1;
  letter-spacing: 0.24px;
}
.G5 {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.I5 {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
.di {
  width: calc(100% + 8px);
  height: 0.5px;
  background: #ffffff0f;
}
.xi {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
.xi .pi {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
.tt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  min-width: 72px;
  background: #ef319f;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
  transition: all 0.2s ease;
}
.tt:hover {
  background: #ec4899;
  transform: translateY(-1px);
}
.tt span {
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
}
.J5 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 16px;
  background: #ffffff14;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff6;
}
.fi {
  position: relative;
}
.fi .K5 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 32px;
  background: linear-gradient(180deg, #22252500, #222525 84.62%);
}
.gi {
  display: flex;
  overflow-y: scroll;
  position: relative;
  flex-direction: column;
  margin-top: 14px;
  padding-bottom: 16px;
  max-height: 212px;
}
.gi::-webkit-scrollbar {
  display: none;
}
.no {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 8px 12px;
  border-radius: 16px;
  height: 36px;
  background: #ffffff0f;
}
.L5 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.O5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u {
  display: flex;
  flex-direction: column;
}
.u .Q5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 17px 0;
  width: 180px;
  width: 100%;
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.u .di {
  width: 35px;
  height: 0.5px;
  background: #ffffff0f;
}
.u .ao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.u .ao .no {
  padding-right: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: #ffffff0f;
  -webkit-user-select: none;
  user-select: none;
}
.u .ao .no .so {
  filter: blur(5px);
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
.ci {
  opacity: 0.5;
}
.ci .so {
  filter: blur(4px);
  -webkit-user-select: none;
  user-select: none;
}
.so {
  font-family:
    SF Mono,
    Roboto Mono,
    monospace;
  font-weight: 500;
  font-size: 13px;
  color: #ffffffd9;
  letter-spacing: 0.5px;
}
.V5 {
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  width: 72px;
  background: #272929;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff7fb;
  transition: color 0.2s ease;
}
.W5 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff4d;
}
.bi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  border: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  transition: color 0.2s ease;
}
.bi:hover {
  color: #fffc;
}
._5 {
  transform: rotate(360deg);
  animation: hi 1s linear infinite;
}
.m {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}
.m .lo {
  display: flex;
  flex-direction: column;
}
.m .lo .td {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
.m .lo .od {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.m .ui button {
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  background: #ef319f1f;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #ef319f;
  word-break: keep-all;
  transition: all 0.2s ease;
  text-wrap-mode: nowrap;
}
.m .ui button:hover {
  opacity: 0.85;
}
.ed {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.ot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border: none;
  width: 100%;
  height: 36px;
  background: transparent;
  cursor: pointer;
}
.ot .rd {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
}
.ot .id {
  display: flex;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border-radius: 20px;
  min-width: 8px;
  height: 12px;
  background-color: #ef319f;
  line-height: 13px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #fff7fb;
  white-space: nowrap;
}
.ot .nd {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  height: 24px;
  background: #ef319f1f;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #fabde1;
  letter-spacing: 0.24px;
}
.ad {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  width: 100%;
}
.mi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  min-height: 36px;
  max-height: 36px;
  background: linear-gradient(155.369deg, #ff7575 13.14%, #fd69cf 88.607%);
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: opacity 0.2s ease;
}
.mi:hover {
  opacity: 0.9;
}
.yi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid #ef319f;
  border-radius: 16px;
  min-height: 36px;
  max-height: 36px;
  background: #ef319f33;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffebf7;
  transition: all 0.2s ease;
}
.yi:hover {
  background: #ef319f4d;
}
.f {
  display: flex;
  align-items: center;
  gap: 8px;
}
.f .wi {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
.f .wi img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.f .et {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.f .et .sd {
  display: flex;
  align-items: center;
  line-height: 26px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffe8;
  letter-spacing: 0.34px;
}
.f .et .ld {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.f .et .pd {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
@keyframes hi {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.dd {
  display: inline-flex;
  position: relative;
  align-items: center;
}
.ki {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  height: 36px;
  background: #272929;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
.ki:hover {
  opacity: 0.85;
}
.po {
  position: relative;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.91);
  border-radius: 20px;
}
.po img {
  border-radius: 20px;
  width: 20px;
  height: 20px;
  object-fit: cover;
}
.po .xd {
  display: flex;
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border-radius: 20px;
  min-width: 8px;
  height: 12px;
  background-color: #ef319f;
  line-height: 13px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #fff7fb;
  white-space: nowrap;
}
.fd {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: vi 0.2s ease-out;
}
.gd {
  display: flex;
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  min-width: 720px;
  height: 590px;
  min-height: 480px;
  background: #232425;
  box-shadow: 0 24px 64px #00000080;
  animation: zi 0.25s ease-out;
}
.Si {
  overflow: hidden scroll;
  max-height: 240px;
}
.Si::-webkit-scrollbar {
  display: none;
}
.cd {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 16px;
  min-width: 160px;
  background: #232425;
}
.bd {
  flex-basis: 0.5px;
  margin: 20px 0;
  width: 0.5px;
  background-color: #ffffff0f;
}
.ji {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #fff9;
  transition: all 0.15s ease;
}
.ji:hover {
  background: #ffffff0f;
  color: #fffc;
}
.Ri {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #ffffff1a;
  color: #fff;
}
.Ri:hover {
  background: #ffffff1f;
}
.Ci {
  display: flex;
  overflow-y: auto;
  position: relative;
  flex-direction: column;
  flex: 1;
  padding: 24px 20px 12px;
  width: 784px;
}
.Ci::-webkit-scrollbar {
  display: none;
}
.Ni {
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  color: #ffffff80;
  transition: all 0.15s ease;
}
.Ni:hover {
  color: #fffc;
}
.hd {
  margin: 0 0 24px;
  line-height: 23px;
  text-align: left;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffb3;
}
.ud {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #ffffff0a;
}
.md {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}
.do {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-radius: 12px;
  width: 100%;
  background: #00000014;
}
.do .yd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
}
.do img {
  border: 2px solid rgba(255, 255, 255, 0.48);
  border-radius: 24px;
  width: 24px;
  height: 24px;
  background:
    #d3d3d3 50% / cover no-repeat,
    #485045e3;
  opacity: 0.8;
}
.rt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.rt .Yi {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  gap: 8px;
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.rt .Yi svg {
  margin-left: -4px;
  cursor: pointer;
}
.rt .wd {
  font-weight: 600;
  color: #ffffffb3;
}
.N {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.N .kd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.N .vd {
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28px;
  transform: translateY(4px);
}
.N .Fi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  max-height: 27px;
  background: #ef319f;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #f8f7f7;
  transition: all 0.2s ease;
}
.N .Fi:hover {
  opacity: 0.85;
}
.zd {
  line-height: 44px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  color: #ffebf7;
}
.Xi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ec4899, #f472b6);
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
.Xi:hover {
  background: linear-gradient(135deg, #db2777, #ec4899);
  box-shadow: 0 4px 12px #ec489966;
  transform: translateY(-1px);
}
.Sd {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.jd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.Rd {
  line-height: 23px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffb3;
}
.Cd {
  margin-top: -8px;
  margin-bottom: 16px;
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.i {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  width: 550px;
  min-height: 116px;
}
.i .Nd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.i .Yd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
.i .Fd {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.i .Ti {
  display: flex;
  overflow: hidden auto;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 524px;
  max-height: 300px;
}
.i .Ti::-webkit-scrollbar {
  display: none;
}
.i .it {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  flex-basis: 256px;
  gap: 16px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: linear-gradient(90deg, #fabde11f, #9470851f);
}
.i .it .Xd {
  display: inline-block;
  width: 142px;
  line-height: 20px;
  text-transform: uppercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
.i .it .Td {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-top: 2.5px;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: semibold;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0%;
}
.i .it .Ud {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: flex-start;
  align-items: center;
  padding-left: 8px;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1c1c1c8f, #1c1c1c8f 40.62%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.Pd {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.Ui {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.Ui:hover {
  color: #fffc;
}
.Pi {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  min-height: 80px;
}
.Pi::-webkit-scrollbar {
  display: none;
}
.Md {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 48px;
  background-color: #ffffff0f;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #fff6;
}
.Mi {
  display: flex;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffd9;
}
.Mi:last-child {
  border-bottom: none;
}
.Hd {
  min-width: 250px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  text-wrap-mode: nowrap;
  word-break: keep-all;
}
.qd {
  min-width: 180px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  text-wrap-mode: nowrap;
  word-break: keep-all;
}
.Ad {
  flex-basis: 120px;
  min-width: 120px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: keep-all;
  text-wrap-mode: nowrap;
}
.Bd {
  display: inline-block;
  position: relative;
  transform: translate(-10px);
}
.Hi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #323334;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ffffffe8;
  transition: all 0.15s ease;
}
.Hi:hover {
  background: #3c3d3e;
}
.Dd {
  color: #fff9;
  transition: transform 0.2s ease;
}
.Zd {
  transform: rotate(180deg);
}
.qi {
  display: flex;
  overflow: scroll;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 100;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  min-width: 80px;
  max-height: 120px;
  background: #323334;
  box-shadow: 0 8px 24px #0006;
  animation: Ai 0.15s ease;
}
.qi::-webkit-scrollbar {
  display: none;
}
.Bi {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #ffffffb3;
  transition: all 0.1s ease;
}
.Bi:hover {
  background: #ffffff14;
  color: #ffffffe8;
}
.Ed {
  background: #ffffff1a;
  color: #ffffffe8;
}
@keyframes Ai {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.Gd {
  flex-basis: 180px;
  min-width: 180px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: keep-all;
  text-wrap-mode: nowrap;
}
.Id {
  flex: 1;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: keep-all;
  text-wrap-mode: nowrap;
}
.Jd {
  flex: 1;
  text-align: left;
  color: #ffffffb3;
}
.Kd {
  flex: 2;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.Ld {
  flex: 1;
  text-align: right;
}
.Od {
  flex: 1;
  text-align: right;
  color: #ffffffb3;
}
.Qd {
  text-transform: none;
  color: #ffffff7a;
}
.Vd {
  margin: 12px 0 0;
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff36;
  letter-spacing: 0.28px;
}
.Wd {
  margin: -12px 0 24px;
  line-height: 1.6;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff9;
}
._d {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #ffffff0f;
}
.tx {
  font-family:
    SF Mono,
    Roboto Mono,
    Noto Sans SC,
    monospace;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  letter-spacing: 1px;
}
.ox {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #10b981;
}
.Di {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #ffffff1a;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  transition: all 0.15s ease;
}
.Di:hover {
  background: #ffffff26;
}
.ex {
  margin-top: 24px;
  width: 100%;
  line-height: 20px;
  text-align: center;
  font-family:
    PingFang SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.rx {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}
.Zi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.Zi a {
  line-height: 20px;
  text-decoration: underline solid rgba(255, 255, 255, 0.48) auto !important;
  text-underline-position: from-font;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}
.ix {
  display: flex;
  align-items: center;
  margin-left: 12px;
}
.Ei {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border: none;
  width: fit-content;
  background: transparent;
  cursor: pointer;
  text-decoration: none !important;
  color: #ffffff7a;
  transition: color 0.15s ease;
}
.Ei:hover {
  color: #ffffffb3;
}
.nx {
  line-height: 15px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff3d;
}
.ax {
  line-height: 15px;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: inherit;
  white-space: nowrap;
}
.sx {
  color: #8d8d8e;
}
.lx {
  border: none !important;
  height: 30px;
  background: none !important;
}
.px {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 16px;
  padding: 8px 20px;
  border-radius: 16px;
  height: 41px;
  background: #ffffff08;
}
.dx {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffb3;
}
.xx {
  background: linear-gradient(90deg, #4f99f1, #4f99f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.Gi {
  cursor: pointer;
  line-height: 20px;
  text-decoration: underline solid rgba(255, 255, 255, 0.48) auto !important;
  text-underline-position: from-font;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.Gi:hover {
  color: #ffffffb3;
}
.fx {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 160px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.Ii {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
.Ii:hover {
  background: #ffffff14;
  color: #ffffffb3;
}
.gx {
  flex: 1;
  min-width: 80px;
  line-height: 18px;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.cx {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
.bx {
  display: inline-flex !important;
  flex-basis: 256px;
}
.hx {
  height: 16px;
}
@keyframes vi {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zi {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.ux {
  background: var(--gradient, linear-gradient(to right, #ec4899, #a855f7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mx {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  pointer-events: none;
}
.yx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 24px;
  background-color: #fff;
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000000a3;
}
.wx {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: #2d2e2f;
}
.kx {
  position: absolute;
  left: 1px;
  top: 1px;
  border-radius: 6px;
  height: calc(100% - 2px);
  background: #ffffff21;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vx {
  opacity: 0.5;
  cursor: not-allowed;
}
.xo {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff80;
  transition: color 0.2s ease;
}
.xo:hover:not(:disabled) {
  color: #ffffffb8;
}
.xo:disabled {
  cursor: not-allowed;
}
.Ji {
  color: #ffffffe8;
}
.Ji:hover:not(:disabled) {
  color: #ffffffe8;
}
.zx {
  min-width: 280px;
}
.Sx {
  margin: 0 0 12px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
}
.n {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 100%;
}
.n th,
.n td {
  padding: 8px 12px;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 12px;
}
.n th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 500;
  color: #ffffff7a;
}
.n td {
  font-weight: 400;
  color: #ffffffb8;
}
.n tbody tr {
  transition: background-color 0.15s ease;
}
.n tbody tr:hover {
  background-color: #ffffff0a;
}
.n tbody {
  overflow: hidden auto;
  max-height: 180px;
}
.n tbody::-webkit-scrollbar {
  display: none;
}
.jx {
  padding: 16px 12px !important;
  text-align: center !important;
  color: #ffffff5c !important;
}
.Rx {
  display: inline-block;
  cursor: pointer;
}
.y {
  position: absolute;
  z-index: 100000;
  border-radius: 8px;
  background: #ffffff0f;
  box-shadow: 0 4px 24px #0006;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: auto;
  transform: scale(0.95) translateY(4px);
  animation: Ki 0.2s ease-out forwards;
}
.y.Cx {
  transform-origin: bottom center;
}
.y.Nx {
  transform-origin: top center;
}
.y.Yx {
  transform-origin: right center;
}
.y.Fx {
  transform-origin: left center;
}
.Li {
  padding: 16px;
}
@keyframes Ki {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 640px) {
  .y {
    max-width: calc(100vw - 32px);
  }
  .Li {
    padding: 12px;
  }
}
.Xx {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.Tx {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}
.l {
  display: flex;
  overflow-y: auto;
  position: relative;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  background: #ffffff14;
  box-shadow:
    0 20px 60px #0000004d,
    0 0 0 1px #ffffff0d;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
}
.l::-webkit-scrollbar {
  width: 2px;
}
.l::-webkit-scrollbar-track {
  background: transparent;
}
.l::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #fff0;
  transition: background 0.3s ease;
}
.l::-webkit-scrollbar-thumb:hover {
  background: #fff0;
}
.l.fo {
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
.l.fo::-webkit-scrollbar-thumb {
  background: #ffffff21;
}
.l.fo::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
.Oi {
  display: flex;
  position: absolute;
  right: 19px;
  top: 19px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 20px;
  height: 20px;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  color: #ffffffe8;
  transition: opacity 0.2s ease;
}
.Oi:hover {
  opacity: 1;
}
.Ux {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.Px {
  margin: 0;
  width: 100%;
  line-height: 28px;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
.Mx {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  width: 100%;
  background: #ffffff0f;
}
.Qi {
  flex: 1;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff7a;
  transition: all 0.2s ease;
}
.Qi:hover {
  color: #ffffffb3;
}
.Hx {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: #ffffff1a;
  color: #ffffffe8;
}
.p {
  overflow-y: auto;
  flex: 1;
  width: 100%;
  max-height: 600px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
}
.p::-webkit-scrollbar {
  width: 2px;
}
.p::-webkit-scrollbar-track {
  background: transparent;
}
.p::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #fff0;
  transition: background 0.3s ease;
}
.p::-webkit-scrollbar-thumb:hover {
  background: #fff0;
}
.p.go {
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
.p.go::-webkit-scrollbar-thumb {
  background: #ffffff21;
}
.p.go::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
.qx {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.w {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.w label {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffe6;
}
.w textarea {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  min-height: 314px;
  outline: none;
  background-color: #ffffff0d;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
.w textarea::placeholder {
  color: #fff6;
}
.w textarea:hover {
  border-color: #fff3;
  background-color: #ffffff14;
}
.w textarea:focus {
  border-color: #ef319f99;
  background-color: #ffffff14;
  box-shadow: 0 0 0 3px #ef319f26;
}
.d {
  position: relative;
}
.d:after {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(255, 255, 255, 0.6);
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
  transform: translateY(-50%);
  transition: all 0.2s ease;
}
.d:hover:after {
  border-top-color: #ffffffe6;
}
.d:has(select:focus):after {
  border-top-color: #ef319f;
}
.d select {
  padding: 12px 40px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  min-height: 44px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #ffffff0d;
  background-image: none;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
.d select:hover {
  border-color: #fff3;
  background-color: #ffffff14;
}
.d select:focus {
  border-color: #ef319f99;
  background-color: #ffffff14;
  box-shadow: 0 0 0 3px #ef319f26;
}
.d select option {
  background-color: #2d2d2d;
  color: #fff;
}
.Ax {
  display: flex;
  align-items: center;
  gap: 12px;
}
.co {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: auto;
  background-color: #ffffff14;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
.co:hover:not(:disabled) {
  border-color: #ef319f66;
  background-color: #ffffff1f;
}
.co:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.Bx {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.Dx {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.Vi {
  position: relative;
}
.Vi img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.Zx {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #00000080;
  font-size: 12px;
  color: #fff;
}
.Wi {
  display: flex;
  position: absolute;
  right: -6px;
  top: -6px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  background-color: #00000040;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}
.Wi:hover {
  border-color: #ef319f99;
  background-color: #ef319fe6;
}
.nt {
  margin-top: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  width: 100%;
  background-color: #ef319f;
  box-shadow: 0 4px 12px #ef319f4d;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  transition: all 0.2s ease;
}
.nt:hover:not(:disabled) {
  background-color: #fd72a5;
  box-shadow: 0 6px 16px #ef319f73;
  transform: translateY(-1px);
}
.nt:active:not(:disabled) {
  box-shadow: 0 2px 8px #ef319f59;
  transform: translateY(0);
}
.nt:disabled {
  background-color: #ef319f;
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}
.Ex {
  margin-top: 6px;
  font-size: 12px;
  color: #ff6b6b;
}
.Gx {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 600px;
}
.Ix {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 12px;
  width: 100%;
  font-size: 14px;
  color: #ffffff7a;
}
.Jx {
  color: #ffffff7a;
  animation: _i 1s linear infinite;
}
@keyframes _i {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Kx {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 40px 20px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #ffffff7a;
}
.Lx {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  min-height: 600px;
}
.Ox {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  background: #ffffff0f;
}
.Qx {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4px;
  width: 100%;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fabde1;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
}
.Vx {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
}
.tn {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 72px;
  height: 72px;
}
.tn img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.Wx {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: 0 8px;
  min-width: 0;
}
.g {
  overflow: hidden auto;
  padding-right: 4px;
  padding-top: 0;
  padding-bottom: 20px;
  height: 80px;
}
.g::-webkit-scrollbar {
  width: 4px;
}
.g::-webkit-scrollbar-track {
  background: transparent;
}
.g::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #ffffff21;
}
.g::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
.g {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._x {
  margin-bottom: 0;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
}
.on {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  line-height: 20px;
  -webkit-line-clamp: 4;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
}
.g .on {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.tf {
  margin-top: 0;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  white-space: pre-wrap;
}
.of {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
  width: 100%;
}
.Y {
  overflow: hidden auto;
  margin-right: 4px;
  padding: 0 8px 0 4px;
  width: 100%;
  max-height: 188px;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  overflow-wrap: break-word;
  letter-spacing: 0.32px;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.Y::-webkit-scrollbar {
  width: 4px;
}
.Y::-webkit-scrollbar-track {
  border-radius: 2px;
  background: transparent;
}
.Y::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.Y::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
.en {
  display: inline-block;
  overflow: hidden;
  margin-right: 2px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.en img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ef {
  color: #ffffffe8;
}
.rf {
  color: #ffffffb3;
}
.rn {
  display: flex;
  align-items: center;
  padding: 0 8px;
  width: 100%;
  height: 8px;
}
.rn:before {
  width: 100%;
  height: 1px;
  background: #ffffff1a;
  content: "";
}
.if {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #0009;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: in 0.2s ease-out;
}
.nf {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 440px;
  min-height: 360px;
  background-repeat: no-repeat;
  background-size: cover;
  animation: nn 0.3s ease-out;
}
.an {
  display: flex;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: transparent;
  background-color: #353838;
  cursor: pointer;
  transition: all 0.15s ease;
}
.an:hover {
  opacity: 0.85;
}
.af {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 32px;
  width: 100%;
  min-height: 360px;
}
.sf {
  margin-top: 71px;
  opacity: 0.4;
  line-height: 38px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 42px;
  color: #fff8f8;
}
.sn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  height: 74px;
}
.sn .lf {
  width: 74px;
  min-height: 74px;
  background-repeat: no-repeat;
  background-size: 100%;
}
.pf {
  margin-top: 8px;
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #232425;
  letter-spacing: 0.28px;
}
.x {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 50px;
  padding: 0 18px;
  width: 100%;
}
.x .df {
  margin-bottom: 8px;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.x .k {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fdbde44d;
}
.x .k .xf {
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.x .k .at {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.x .k .at .ff {
  line-height: 28px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
.x .k .at .ln {
  padding: 6px 8px;
  border-radius: 8px;
  background: #272929;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  transition: color 0.2s ease;
}
.x .k .at .ln:hover {
  opacity: 0.85;
}
@keyframes in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.pn {
  display: inline-block;
  position: relative;
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  color: var(--text-color);
  paint-order: stroke fill;
}
.pn:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  color: var(--stroke-color);
  content: attr(data-text);
}
.gf {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000000a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cf {
  display: flex;
  overflow: visible;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #232425;
  box-shadow: 0 4px 80px #000000a3;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
.bf {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 20px;
  border-radius: 16px;
  width: 100%;
  min-width: 1170px;
  height: 80px;
}
.hf {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 80px;
}
.uf {
  position: relative;
  width: 1170px;
  height: 100%;
}
.mf {
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  width: 100%;
  min-width: 1170px;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.yf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 43px 18px 25px;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.wf {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kf {
  line-height: 30px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  text-wrap-mode: nowrap;
}
.vf {
  line-height: 26px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  color: #0c0c0e;
  letter-spacing: 0.4px;
}
.zf {
  display: flex;
}
.Sf {
  display: flex;
  position: relative;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}
.jf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
  border-radius: 16px;
  width: 64px;
  height: 60px;
  background: linear-gradient(180deg, #fff, #fff9);
}
.Rf {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.Cf {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: #00000054;
}
.Nf {
  line-height: 66.029px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  color: #000;
}
.Yf {
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #0000007a;
  letter-spacing: 0.24px;
  transform: translateY(-18px);
}
.st {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  line-height: 66.029px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 47.163px;
  color: #ffffffe8;
  transform: translateY(-50%);
}
.st:nth-child(2) {
  left: 80.6837606838%;
}
.st:nth-child(4) {
  left: 88.4615384615%;
}
.st:nth-child(6) {
  left: 96.2393162393%;
}
.bo {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
.bo:hover {
  color: #fffc;
}
.bo:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.Ff {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 24px;
  text-align: center;
}
.Xf {
  line-height: 44px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  color: #ffffffe8;
}
.Tf {
  margin-bottom: 18px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
  letter-spacing: 0.32px;
}
.Uf {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin-top: 16px;
  padding: 0 10px;
  width: 100%;
}
.Pf {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 300px;
  height: 27px;
  line-height: 18px;
  vertical-align: middle;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: regular;
  font-weight: 400;
  font-size: 15px;
  color: #ffffffe8;
  letter-spacing: 0%;
  text-wrap-mode: nowrap;
}
.dn {
  display: flex;
  position: relative;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 128px;
  height: 34px;
  background: #272929;
}
.dn .Mf {
  display: flex;
  position: absolute;
  right: -12.5%;
  top: -6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 8px 8px 8px 2px;
  height: 16px;
  background: linear-gradient(120deg, #e73b5e 13.14%, #b81986 88.61%);
}
.Hf {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 128px;
  width: 50%;
  height: 100%;
  background: #ffffff0f;
  box-shadow: 0 2px 8px #0003;
  transform: translate(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.qf {
  transform: translate(100%);
}
.lt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  height: 28px;
  outline: none;
  background: linear-gradient(120deg, #ff7575e0 13.14%, #fd69cfe0 88.607%);
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  transition: opacity 0.15s ease;
}
.lt:hover {
  opacity: 0.9;
}
.lt span {
  display: flex;
  align-items: center;
  height: 24px;
}
.lt svg {
  color: #fff;
}
.xn {
  position: relative;
  z-index: 1;
  justify-content: center;
  padding: 10px 24px;
  border: none;
  border-radius: 12px;
  min-width: 124px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff7a;
  transition: color 0.15s ease;
}
.xn:hover,
.fn {
  color: #ffffffe8;
}
.fn:hover {
  color: #fff;
}
.Af {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
}
.Bf {
  margin-left: 6px;
  font-weight: 600;
  font-size: 14px;
  color: inherit;
}
.F {
  display: flex;
  align-items: center;
  width: 300px;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
.F span {
  margin-left: 2px;
  line-height: 18px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff7a;
}
.F button {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  height: 28px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffebf7;
  transition: opacity 0.15s ease;
}
.F button:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  padding: 1px;
  border-radius: 8px;
  background: linear-gradient(120deg, #fd9db0 18.31%, #f35ac4 89.15%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
}
.F button:hover {
  opacity: 0.9;
}
.gn {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}
.gn::-webkit-scrollbar {
  display: none;
}
.ho {
  display: flex;
  overflow: visible auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px;
  width: 100%;
}
.ho .Df {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  justify-content: flex-end;
  align-items: flex-start;
}
.ho::-webkit-scrollbar {
  display: none;
}
.cn {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 26px;
  background: #ffffff0f;
  transition: all 0.2s ease;
}
.cn:after {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  border: 2px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(#232425, #232425) padding-box,
    var(
        --plan-border-gradient,
        linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.06) 0%,
          rgba(255, 255, 255, 0.06) 100%
        )
      )
      border-box;
  content: "";
  transition: all 0.2s ease;
}
.e {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 24px 10px;
}
.e .Zf {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  border: none;
  border-radius: 4px 24px 0 16px;
  height: 28px;
  background: #86baff33;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
}
.e .Ef {
  position: absolute;
  right: 5px;
  top: -10px;
  z-index: 0;
  border-radius: 50%;
  width: 28px;
  height: 26px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
}
.e .Gf {
  line-height: 18px;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.e .If {
  line-height: normal;
  text-align: right;
  text-transform: uppercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0;
}
.e .Jf {
  color: #bbbdc1;
}
.e .c {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 6px;
}
.e .c .Kf {
  position: relative;
  top: 1px;
  line-height: 100%;
  vertical-align: middle;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Arial,
    Helvetica Neue,
    Helvetica,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  color: #ffffffe8;
  letter-spacing: 0;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  font-variant-ligatures: none;
}
.e .c .Lf {
  line-height: normal;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  color: #ffffffe8;
}
.e .c .Of {
  display: flex;
  align-items: center;
  line-height: 20px;
  vertical-align: middle;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.02em;
  text-wrap-mode: nowrap;
}
.e .c .Qf {
  display: flex;
  align-items: center;
  line-height: 20px;
  vertical-align: middle;
  text-align: right;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb2;
  letter-spacing: 0.02em;
  text-wrap-mode: nowrap;
}
.e .c .Vf {
  margin-right: 4px;
  line-height: 20px;
  text-decoration: line-through;
  text-align: right;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb2;
  letter-spacing: 0.02em;
}
.e .c .Wf {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 20px;
  height: 20px;
  background:
    linear-gradient(#232425, #232425) padding-box,
    var(--discount-gradient, linear-gradient(135deg, #3fc9dc 0%, #9aa32f 100%))
      border-box;
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  text-wrap-mode: nowrap;
}
.e .bn {
  align-self: flex-start;
  margin-top: 8px;
  width: 100%;
  line-height: 18px;
  text-align: left;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.pt {
  --progress-fill-opacity: 0;
  --progress-percentage: 100%;
  --progress-track-height: 1px;
  width: 100%;
}
.pt._f,
.pt.tg {
  --progress-fill-opacity: 1;
}
.og {
  margin-top: 4px;
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.bn + .pt {
  margin-top: 16px;
}
.X,
.T,
.hn {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
.dt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  height: var(--plan-body-item-height, 88px);
}
.dt .X,
.dt .T {
  padding-top: 16px;
}
.dt .eg {
  margin-top: 8px;
  padding-left: 18px;
  padding-bottom: 12px;
  line-height: 13px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
}
.xt .X {
  line-height: 28px;
  font-weight: 700;
  font-size: 14px;
}
.xt .v {
  margin: 0 24px;
  height: auto;
  min-height: 50px;
}
.xt .v .T {
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
}
.xt .a {
  display: none;
}
.un {
  display: flex;
  align-items: center;
  gap: 4px;
}
.un .rg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  height: 24px;
  background: #ffffff14;
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
  text-wrap-mode: nowrap;
}
.T svg {
  width: 14px;
  height: 14px;
}
.v {
  margin: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.v .X,
.v .T,
.v .hn {
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  height: 44px;
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: #ffffffe8;
}
.a {
  display: flex;
  justify-content: center;
  padding: 12px 16px 16px;
}
.a .ig {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 16px;
  width: 100%;
  height: 44px;
  max-height: 44px;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.a .ng {
  border: none !important;
  background: #ffffff0f !important;
  color: #fff7fb;
}
.a .ag {
  display: flex;
  position: absolute;
  right: 8px;
  bottom: 16px;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.a .uo {
  position: relative;
  margin-bottom: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fffffff2;
  box-shadow: 0 2px 8px #00000026;
  animation: mo 0.3s ease-out;
}
.a .uo span {
  line-height: 1.2;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}
.a .uo:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.95) transparent transparent;
  content: "";
  transform: translate(-50%);
}
.a img {
  height: 114px;
  object-fit: cover;
}
@keyframes mo {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.sg {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 80px;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translate(-50%);
}
.yo {
  position: relative;
  padding: 12px 16px;
  border-radius: 16px;
  width: 256px;
  background: #fffffff2;
  box-shadow: 0 4px 16px #00000026;
  animation: mo 0.3s ease-out;
}
.yo span {
  line-height: 1.4;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #333;
}
.yo:after {
  position: absolute;
  left: 50%;
  bottom: -8px;
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.95) transparent transparent;
  content: "";
  transform: translate(-50%);
}
.mn .X,
.mn .lg {
  padding-right: 0;
}
.pg {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 1440px;
  line-height: 27.28px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 19.486px;
  color: #ffffff7a;
}
.xg {
  line-height: 38px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 28px;
  color: #d1ff47;
}
.fg {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 144px;
}
.yn {
  position: relative;
  border-radius: 4px;
  height: var(--progress-track-height, 4px);
  background: var(--progress-track-color, rgba(255, 255, 255, 0.06));
  cursor: pointer;
}
.wn {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  width: var(--progress-percentage, 0%);
  height: 100%;
  background: var(
    --progress-gradient,
    linear-gradient(to right, #4f8cff, #a855f7)
  );
  opacity: var(--progress-fill-opacity, 1);
  transition:
    width 0.15s ease,
    opacity 0.15s ease;
}
.z {
  position: absolute;
  left: var(--progress-percentage, 0%);
  top: 50%;
  z-index: 1;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  box-shadow: 0 2px 6px #0000004d;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.z:hover {
  box-shadow: 0 2px 10px #0006;
  transform: translate(-50%, -50%) scale(1.15);
}
.z:active {
  cursor: grabbing;
}
.wo .yn {
  opacity: 0.5;
  cursor: not-allowed;
}
.wo .z {
  cursor: not-allowed;
}
.wo .z:hover {
  transform: translate(-50%, -50%);
}
.kn .z {
  box-shadow: 0 2px 12px #00000080;
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.2);
}
.kn .wn {
  transition: none;
}
.gg {
  display: flex;
  position: relative;
  width: 100%;
  height: 5px;
}
.cg {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%);
}
.bg {
  border-radius: 1px;
  width: 1px;
  height: 6px;
  background: #ffffff21;
}
.hg {
  background: #ffffff21;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 10px;
  white-space: nowrap;
}
.ug {
  background: #ffffff21;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 12px;
}
.mg {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
  width: 100%;
  max-width: 908px;
}
.yg {
  margin: 0 0 8px;
  line-height: 32px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #ffffffe8;
}
.wg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kg {
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.vg {
  border-color: transparent;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.13);
}
.vn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.zg {
  flex-shrink: 0;
  line-height: 1;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffffb3;
}
.Sg {
  flex: 1;
  line-height: 25px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
}
.zn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #ffffff7a;
  transform: rotate(0);
  transition:
    transform 0.3s ease,
    color 0.2s ease;
}
.vn:hover .zn {
  color: #ffffffb3;
}
.jg {
  transform: rotate(180deg);
}
.Rg {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.Sn {
  grid-template-rows: 1fr;
}
.t {
  overflow: hidden;
  min-height: 0;
  line-height: 1.7;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 14px;
  color: #ffffffb3;
}
.Sn .t {
  padding-bottom: 16px;
}
.t p {
  margin: 0 0 12px;
}
.t p:last-child {
  margin-bottom: 0;
}
.t strong {
  font-weight: 600;
  color: #ffffffe8;
}
.t a {
  text-decoration: none;
  color: #4a9eff;
  transition: color 0.2s ease;
}
.t a:hover {
  text-decoration: underline;
}
.t ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 4px;
}
.t ul:last-child {
  margin-bottom: 0;
}
.t ul > li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 16px;
}
.t ul > li:before {
  position: absolute;
  left: 0;
  top: 0;
  color: #4a9eff;
  content: "閳?;
}
.t ul > li:last-child {
  margin-bottom: 0;
}
.t ul > li > ul {
  margin-top: 8px;
  margin-bottom: 8px;
}
.t ul > li > ul > li:before {
  color: #ffffff7a;
  content: "閳?;
}
.t ul > li > ul > li > ul > li:before {
  color: #ffffff4d;
  content: "閳?;
}
.t ol {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 20px;
  counter-reset: item;
}
.t ol:last-child {
  margin-bottom: 0;
}
.t ol > li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 8px;
  counter-increment: item;
}
.t ol > li:before {
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  color: #4a9eff;
  content: counter(item) ".";
}
.t ol > li:last-child {
  margin-bottom: 0;
}
.t ol > li > ol {
  margin-top: 8px;
  margin-bottom: 8px;
  counter-reset: subitem;
}
.t ol > li > ol > li {
  counter-increment: subitem;
}
.t ol > li > ol > li:before {
  color: #ffffff7a;
  content: counter(item) "." counter(subitem);
}
.t blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 3px solid #4a9eff;
  border-radius: 0 8px 8px 0;
  background: #ffffff08;
  font-style: italic;
  color: #ffffff7a;
}
.t blockquote p {
  margin: 0;
}
.t table {
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 100%;
  font-size: 13px;
}
.t th,
.t td {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.t th {
  background: #ffffff0f;
  font-weight: 600;
  color: #ffffffe8;
}
.t td {
  background: #ffffff05;
  color: #ffffffb3;
}
.t tr:hover td {
  background: #ffffff0a;
}
.t code {
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffffff14;
  font-family:
    SF Mono,
    Fira Code,
    monospace;
  font-size: 13px;
  color: #ff7eb3;
}
.t pre {
  overflow-x: auto;
  margin: 12px 0;
  padding: 16px;
  border-radius: 8px;
  background: #0000004d;
}
.t pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  color: #ffffffb3;
}
.t h1,
.t h2,
.t h3,
.t h4,
.t h5,
.t h6 {
  margin: 16px 0 8px;
  font-weight: 600;
  color: #ffffffe8;
}
.t h1:first-child,
.t h2:first-child,
.t h3:first-child,
.t h4:first-child,
.t h5:first-child,
.t h6:first-child {
  margin-top: 0;
}
.t h1 {
  font-size: 18px;
}
.t h2 {
  font-size: 16px;
}
.t h3,
.t h4,
.t h5,
.t h6 {
  font-size: 15px;
}
.t hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.t img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}
.Cg {
  padding: 12px 16px;
  border-radius: 8px;
  background: #f5a6231a;
  color: #f5a623;
}
.Ng {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.Yg {
  margin: 0;
  line-height: 1.6;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 13px;
  color: #ffffff7a;
}
.Fg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #f5a623;
}
.Xg {
  flex-shrink: 0;
  font-size: 14px;
}
.U {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.6;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 13px;
  color: #ffffff7a;
}
.U p {
  margin: 0 0 8px;
}
.U p:last-child {
  margin-bottom: 0;
}
.U a {
  text-decoration: none;
  color: #4a9eff;
}
.U a:hover {
  text-decoration: underline;
}
.Tg {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.Ug {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 24px 20px;
  border-radius: 20px;
  width: 320px;
  background: linear-gradient(180deg, #202022, #18181a);
  box-shadow: 0 24px 64px #00000080;
}
.jn {
  display: flex;
  position: absolute;
  right: 12px;
  top: 12px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #ffffff80;
  transition: all 0.15s ease;
}
.jn:hover {
  background: #ffffff14;
  color: #fffc;
}
.Pg {
  margin-bottom: 8px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.Mg {
  margin: 0 0 24px;
  line-height: 44px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #fff;
}
.Hg {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
}
.qg {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.Ag {
  flex-shrink: 0;
  color: #ffffffe8;
}
.Bg {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff7575, #fd69cf);
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
.Dg {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  padding: 36px;
  background: #000000a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: Rn 0.2s ease-out;
}
@keyframes Rn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Cn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.Nn {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  padding: 20px 20px 58px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  width: 100%;
  max-width: 720px;
  background: #232425;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  animation: Cn 0.3s ease-out;
}
.ko {
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
.ko:hover {
  color: #fffc;
}
.ko:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.Zg {
  margin-bottom: 20px;
}
.Eg {
  line-height: 32px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}
.Yn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #ffffff0a;
}
.Gg {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vo {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
.vo:before {
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  z-index: 0;
  border-radius: 50%;
  background: #ffffffe8;
  content: "";
}
.vo:after {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  border-radius: 50%;
  background: #1c1d1e;
  content: "";
}
.Ig {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.Jg {
  display: flex;
  position: relative;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}
.Kg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.Lg {
  line-height: 1.4;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
.Og {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.Qg {
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.5px;
}
.Vg {
  display: flex;
  align-items: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 13px;
  color: #ffffff7a;
}
.zo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ff7eb3;
  transition: color 0.15s ease;
}
.zo:hover {
  color: #ff9ac4;
}
.Fn {
  font-size: 16px;
  transition: transform 0.15s ease;
}
.zo:hover .Fn {
  transform: translate(2px);
}
.Xn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.Wg {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._g {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  line-height: 28px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffebf7;
}
.tc {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.Tn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
  margin-bottom: 16px;
}
.So {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #ffffff0a;
  cursor: pointer;
  transition: all 0.25s ease;
}
.So:hover {
  border-color: #fff3;
}
.So:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ft {
  border-color: transparent;
  background: linear-gradient(129deg, #b68bff00 -2.7%, #cb197866 69.35%);
  box-shadow: 0 0 20px #ef319f;
}
.ft:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(129deg, #b68bff00 -2.7%, #cb197866 69.35%);
  content: "";
}
.ft:after {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}
.ft:hover {
  border-color: transparent;
}
.oc {
  display: flex;
  position: absolute;
  right: -1px;
  top: -1px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px 14.5px;
  border: 1px solid transparent;
  border-radius: 4px 14px 0 16px;
  width: auto;
  height: 23px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.ec {
  position: absolute;
  right: 10px;
  top: -10px;
  z-index: -1;
  border-radius: 50%;
  width: 28px;
  height: 26px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
}
.rc {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ic {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nc {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.ac {
  line-height: 32px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: #ffebf7;
}
.sc {
  line-height: 20px;
  text-align: right;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
}
.jo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.jo span:first-child {
  line-height: 15px;
  text-align: right;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
}
.jo span:last-child {
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffe8;
}
.Un {
  margin-bottom: 20px;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
.Un p {
  margin: 0;
}
.Pn {
  margin-left: 16px;
  line-height: 18px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-transform: lowercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ff9ac4;
  transition: color 0.15s ease;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}
.Pn:hover {
  color: #ff9ac4;
}
.gt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 17px 16px;
  border: none;
  border-radius: 8px;
  width: 284px;
  height: 40px;
  max-height: 52px;
  outline: none;
  background: #ef319f;
  cursor: pointer;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #f8f7f7;
  transition: all 0.25s ease;
}
.gt:hover:not(:disabled) {
  box-shadow: 0 4px 20px #ff757566;
  opacity: 0.9;
  transform: translateY(-1px);
}
.gt:active:not(:disabled) {
  transform: translateY(0);
}
.gt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .Nn {
    padding: 20px;
    max-width: 100%;
  }
  .Tn {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .Yn {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .Xn {
    align-items: flex-start;
  }
}
.lc {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  padding: 36px;
  background: #000000a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: Mn 0.2s ease-out;
}
@keyframes Mn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Hn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.qn {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  padding: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  background: #232425;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  animation: Hn 0.3s ease-out;
}
.Ro {
  display: flex;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
.Ro:hover {
  color: #fffc;
}
.Ro:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.pc {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #232425e6;
}
.dc {
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #fffc;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: An 0.8s linear infinite;
}
@keyframes An {
  to {
    transform: rotate(360deg);
  }
}
.xc {
  margin-bottom: 20px;
  text-align: center;
}
.fc {
  line-height: 28px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
.gc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  min-height: 53px;
  background: #272929;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 14px;
  color: #fff9;
}
.P {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: none;
  border-radius: 12px;
  height: 53px;
  background: #272929;
  cursor: pointer;
  transition: all 0.25s ease;
}
.P:hover {
  background: #2a2b2c;
}
.P:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.Bn {
  border: none;
  background:
    linear-gradient(90deg, #ffffff05, #ffffff05),
    linear-gradient(90deg, #272929, #272929);
}
.Bn:hover {
  background:
    linear-gradient(90deg, #ffffff05, #ffffff05),
    linear-gradient(90deg, #272929, #272929);
}
.bc {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #ffffffb3;
}
.uc {
  width: 20px;
  height: 20px;
}
.Dn {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
}
.mc,
.yc {
  display: flex;
  align-items: center;
  gap: 4px;
}
.Zn {
  border-radius: 4px;
  width: 24px;
  height: 24px;
  object-fit: cover;
}
.En {
  flex-shrink: 0;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
.P:hover .En {
  color: #ffffffb8;
  transform: translate(2px);
}
@media (max-width: 480px) {
  .qn {
    padding: 20px;
    max-width: 100%;
  }
  .P {
    padding: 14px 16px;
  }
  .Dn {
    font-size: 13px;
  }
  .Zn {
    width: 28px;
    height: 18px;
  }
}
.wc {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #000000b3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.kc {
  position: absolute;
  border-radius: 56px;
  width: 388px;
  min-height: 328px;
}
.Gn {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  border: var(--modal-border, 1px solid transparent);
  border-radius: 56px;
  width: 388px;
  min-height: 328px;
  box-shadow: 0 4px 16px #0000003d;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@supports (mask-composite: exclude) {
  .Gn:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(
      --modal-border-gradient,
      linear-gradient(90deg, #4f99f1 0%, #a29afb 100%)
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
.vc {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: auto;
  min-height: 552px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.In {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 120%;
  height: 55%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
  transform: translate(-50%);
}
.In:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(30, 35, 55) 0%, transparent 40%);
  content: "";
}
.zc {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  text-align: center;
}
.M {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
  padding: 6px 12px;
  border: var(--badge-border, 1px solid transparent);
  border-radius: 16px;
  background: var(
    --badge-bg,
    linear-gradient(
      135deg,
      rgba(60, 80, 120, 0.6) 0%,
      rgba(80, 100, 150, 0.4) 100%
    )
  );
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.3px;
}
@supports (mask-composite: exclude) {
  .M {
    border: 1px solid transparent;
  }
  .M:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    padding: 1px;
    border-radius: inherit;
    background: var(
      --badge-border-gradient,
      linear-gradient(90deg, #4f99f1 0%, #a29afb 100%)
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
.M .Sc {
  position: relative;
  z-index: 1;
  color: #78c8ff;
}
.M span {
  position: relative;
  z-index: 1;
}
.jc {
  margin-bottom: 20px;
  line-height: 36px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}
.Rc {
  margin-bottom: 28px;
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.32px;
}
.Cc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.Nc {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 4px 12px rgba(255, 150, 200, 0.3));
}
.Yc {
  display: flex;
  align-items: center;
  margin-left: 12px;
  line-height: 64px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 48px;
  color: #fff;
}
.Fc {
  display: flex;
  justify-content: center;
  width: 100%;
}
.Co,
.No {
  padding: 17px 20px;
  border: none;
  border-radius: 24px;
  width: 292px;
  max-width: 100%;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #fff7fb;
  transition: all 0.2s ease;
}
.Co {
  background: #ffffff36;
}
.Co:hover {
  background: #ffffff1c;
}
.No {
  background: #ffffffe8;
}
.No:hover {
  background: #fffc;
}
.Jn,
.Jn:hover {
  background: var(--confirm-bg);
}
.Xc {
  background: linear-gradient(115deg, #b68bff 18.31%, #6b64f8 89.15%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 24px;
  text-align: center;
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
}
.Tc {
  background: none;
  -webkit-text-fill-color: #fff7fb;
  color: #fff7fb;
}
.Uc {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200000;
  justify-content: center;
  align-items: center;
  background: #000000bf;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.Pc {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 32px;
  width: 400px;
  box-shadow: 0 4px 16px #0000003d;
}
.Kn {
  display: flex;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 32px;
  height: 32px;
  background: transparent;
  cursor: pointer;
  color: #ffffff80;
  transition: color 0.2s ease;
}
.Kn:hover {
  color: #ffffffe6;
}
.Mc {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 32px;
  width: 100%;
  background: #232425e6;
}
.Hc {
  margin-top: 24px;
  margin-bottom: 8px;
  line-height: 38px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}
.qc {
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: -30%;
  z-index: -1;
  width: 640px;
  height: 552px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.6;
}
.Ln {
  margin-bottom: 16px;
  max-width: 320px;
  line-height: 1.5;
  line-height: 23px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  letter-spacing: 0.32px;
}
.Ln strong {
  font-weight: 700;
  color: #ffffffe8;
}
.Ac {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  width: 100%;
}
.Yo {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #ffffff0a;
  cursor: pointer;
  transition: background 0.2s ease;
}
@supports (mask-composite: exclude) {
  .Yo:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    padding: 2px;
    border-radius: inherit;
    background: var(
      --plan-border-gradient,
      linear-gradient(90deg, #4f99f1 0%, #a29afb 100%)
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
.Yo:hover {
  background: #ffffff14;
}
.Bc {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.Dc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.Zc {
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.Ec {
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
}
.On {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  text-decoration: none;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #9fc2ef;
  letter-spacing: 0.28px;
  transition: color 0.2s ease;
}
.On:hover {
  text-decoration: underline;
  color: #9fc2ef;
}
.Gc {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.Ic {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffffe6;
}
.Jc {
  line-height: 32px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: #ffffffe8;
}
.Kc {
  display: flex;
  align-items: center;
  margin-left: 4px;
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.Lc {
  margin-right: 4px;
  line-height: 18px;
  text-decoration-line: line-through;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
.Fo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  background: #ffffff08;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.Fo:hover {
  border-color: #fff3;
  background: #ffffff0f;
}
.Oc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.Qc {
  line-height: 24px;
  text-align: left;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  color: #ffffffe8;
}
.Vc {
  line-height: 18px;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
.Qn {
  color: #fff6;
  transition: color 0.2s ease;
}
.Fo:hover .Qn {
  color: #ffffffb3;
}
.Wc {
  display: flex;
  gap: 12px;
  width: 100%;
}
.Xo,
.Vn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 8px;
  padding: 17px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  transition: all 0.2s ease;
}
.Xo {
  position: relative;
  background: linear-gradient(180deg, #3a2834cc, #261a22e6);
}
@supports (mask-composite: exclude) {
  .Xo:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7575, #fd69cf, #b68bff);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
.Vn {
  background: linear-gradient(90deg, #ff7575, #fd69cf);
}
._c {
  display: flex;
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 16px;
  background: #000000b3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tb {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
  margin: auto 0;
  padding: 0;
  border-radius: 24px;
  width: 767px;
  height: 682px;
  color: #fff;
  transform-origin: center;
}
.ob {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.Wn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.eb {
  opacity: 0;
}
.rb {
  bottom: auto;
  height: auto;
  opacity: 1;
}
._n .Wn,
._n .ta {
  opacity: 0;
}
.ib {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.nb {
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffffe6;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: oa 0.8s linear infinite;
}
@keyframes oa {
  to {
    transform: rotate(360deg);
  }
}
.ab {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  padding: 8px 12px;
  border: none;
  border-radius: 20px;
  background: #00000024;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.ta {
  display: flex;
  position: absolute;
  top: 0;
  right: 160px;
  bottom: 0;
  left: 200px;
  z-index: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-top: 190px;
  padding-bottom: 60px;
  text-align: center;
}
.sb {
  inset: 40% 160px auto 200px;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-50%);
}
.lb {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}
.pb {
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
}
.db {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  height: 76px;
  line-height: 57.709px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 40px;
  color: #524038;
  white-space: pre;
}
.xb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 407px;
  text-align: center;
}
.fb {
  line-height: 56px;
  text-decoration: underline dotted #dfbdae 5%;
  text-underline-position: from-font;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #83685c;
  white-space: pre;
  text-decoration-skip-ink: auto;
  text-underline-offset: 25%;
}
.gb {
  display: inline-block;
  max-width: 100%;
  background: var(
    --accent-gradient,
    linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 56px;
  text-decoration: underline dotted #dfbdae 5%;
  text-underline-position: from-font;
  text-align: center;
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--highlight-font-size, 32px);
  white-space: pre;
  text-decoration-skip-ink: auto;
  text-underline-offset: 25%;
}
.cb {
  margin-top: 12px;
  line-height: 32px;
  text-decoration: underline dotted #dfbdae 5%;
  text-underline-position: from-font;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #83685c;
  white-space: pre-wrap;
  text-decoration-skip-ink: auto;
  text-underline-offset: 25%;
}
.bb {
  display: flex;
  position: absolute;
  left: 52.5%;
  bottom: 140px;
  gap: 28px;
  transform: translate(-52.5%);
}
.ea,
.To,
.ra {
  border: none;
  border-radius: 24px;
  width: 160px;
  height: 40px;
  cursor: pointer;
  line-height: 22px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.ea {
  background: #00000014;
  color: #524038;
}
.To:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.To {
  background: var(
    --accent-gradient,
    linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%)
  );
  color: #ffebf7;
}
.ra {
  background: #232425;
  color: #fff;
}
.hb {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background: #0009;
  animation: ia 0.2s ease;
}
@keyframes ia {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 28px 28px;
  border-radius: 32px;
  width: 360px;
  background: #1c1c1e;
  box-shadow: 0 8px 32px #0006;
  animation: na 0.25s ease;
}
@keyframes na {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mb {
  font-weight: 600;
  font-size: 18px;
  color: #f5f5f5;
}
.yb {
  line-height: 1.6;
  text-align: center;
  font-size: 14px;
  color: #ffffffb3;
}
.wb {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  width: 100%;
}
.kb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 17px 16px;
  border: none;
  border-radius: 20px;
  max-height: 52px;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #fff7fb;
  transition: all 0.2s ease;
}
.aa {
  background: #353838;
  color: #f5f5f5;
}
.aa:hover {
  background: #454848;
}
.sa {
  background: #ef319f;
  color: #fff;
}
.sa:hover {
  background: #b22577;
}
.la {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #00000054;
}
.la:hover {
  opacity: 0.85;
}
.vb {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: 0 auto;
  padding: 12px 24px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  width: fit-content;
  min-width: min(1200px, 100%, 100vw - 40px);
  max-width: min(100%, 100vw - 40px);
  background-color: #9fc2ef1f;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.zb {
  overflow: hidden;
  flex: 1;
  margin: 0;
  min-width: 0;
  line-height: 20px;
  text-overflow: ellipsis;
  text-align: left;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #9fc2efcc;
  letter-spacing: 0.28px;
  white-space: nowrap;
}
.Sb {
  opacity: 1;
  color: #9fc2ef;
}
.pa {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#d9ebff8c, #d9ebff8c);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 1px;
  opacity: 1;
  text-decoration: none;
  font-weight: 800;
  color: #d9ebff;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background-size 0.2s ease;
}
.pa:hover {
  background-size: 100% 1px;
  color: #fff;
}
.da {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0.8;
  cursor: pointer;
  color: #9fc2ef;
  transition: opacity 0.3s;
  width: 20px;
  height: 20px;
}
.da:hover {
  opacity: 1;
}
.jb {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.Rb {
  display: flex;
  position: relative;
  margin-bottom: 8px;
}
.Cb {
  display: flex;
  position: relative;
  gap: 8px;
  border-radius: 12px;
  height: 60px;
}
.Uo {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.Uo[draggable="true"] {
  cursor: grab;
}
.Uo[draggable="true"]:active {
  cursor: grabbing;
}
.Nb {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #353838;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.Yb {
  box-shadow: 0 8px 24px #0006;
  opacity: 0.5;
  transform: scale(1.05);
}
.Fb {
  border-color: #ef319f;
  box-shadow: 0 0 0 2px #ef319f4d;
  transform: scale(1.05);
}
.Xb {
  display: flex;
  position: absolute;
  left: 0.5px;
  top: 0.5px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #00000054;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
}
.Tb {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.Ub {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 999;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.xa {
  display: flex;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 999;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #000000b3;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease;
}
.xa:hover {
  background: #ef319f;
}
.fa {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 5px 16px;
  border-radius: 24px;
  width: 100%;
  height: 24px;
  background: #000000a3;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.fa:hover {
  opacity: 1;
}
.Pb {
  line-height: 15px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.2px;
}
.Mb {
  display: flex;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #45494a;
  box-shadow: 0 8px 28px #0000003d;
}
.Hb {
  display: flex;
  position: absolute;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 100%;
  height: 100%;
  background-color: #45494abf;
}
.qb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.Ab {
  width: 100%;
  min-width: unset;
}
.Bb {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background: #000c;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.Db {
  position: relative;
  padding: 37px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 17px;
  width: auto;
  background-color: #ffffff0f;
  box-shadow: 0 3px 57px #000000a3;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ga {
  display: flex;
  position: absolute;
  right: -20px;
  top: -20px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #0009;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease;
}
.ga:hover {
  background: #ef319f;
}
.Zb {
  display: flex;
  align-items: center;
}
.ca {
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 903px;
}
.ca img {
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  max-height: 544px;
  object-fit: cover;
}
.ba {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 16px;
}
.ba img {
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}
.ha {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ha:hover {
  border-color: #ffffff4d;
}
.Eb {
  padding: 4px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}
.Gb {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 284px;
  max-height: 342px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.Ib {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 12px;
}
.Jb {
  overflow: hidden;
  line-height: 28px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffffe8;
}
.Kb {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.Lb {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 12px;
  color: #fff9;
}
.ua {
  position: relative;
  border-radius: 12px;
  width: 34px;
  height: 20px;
  background: #ffffff1a;
  transition: background 0.2s ease;
}
.ua.Po {
  background: linear-gradient(120deg, #ff7575 13.14%, #d28dfe 88.61%);
}
.Ob {
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  box-shadow: 0 1px 3px #0000004d;
}
.Qb {
  display: flex;
  position: relative;
  margin: 0 12px 12px;
  border: none;
  border-radius: 10px;
  background: #343636;
}
.Vb {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 0;
  border-radius: 8px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: #404242;
}
.ct {
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 16px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
  transition: color 0.2s ease;
}
.ct svg {
  color: inherit;
}
.ct:hover:not(.Po) {
  color: #ffffffb3;
}
.ct.Po {
  color: #fff;
}
.H {
  display: flex;
  overflow: hidden auto;
  scroll-behavior: smooth;
  flex-direction: column;
  flex: 1;
  margin: 0 8px;
  padding: 0 8px 8px;
}
.H::-webkit-scrollbar {
  width: 4px;
}
.H::-webkit-scrollbar-track {
  background: transparent;
}
.H::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff1a;
}
.H::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
.Wb {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bt:hover {
  background: #ffffff0d;
}
.bt.ma {
  background: #ffffff14;
}
.bt.ma .ht {
  color: #fff;
}
.ht {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  background: #ffffff12;
  color: #cacaca;
}
.ht img {
  border-radius: 6px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.ht svg {
  width: 20px;
  height: 20px;
  color: #cacaca;
}
._b {
  border-radius: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff1a;
}
.t2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.o2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ffffffe8;
}
.ut {
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 12px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #fff;
}
.ut.e2 {
  border-radius: 28px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
}
.ut.ya {
  position: relative;
  z-index: 0;
  border-radius: 28px;
  background: #ef319f0f;
}
.ut.ya:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  padding: 1px;
  border-radius: 28px;
  background: linear-gradient(120deg, #ff7575 13.14%, #d28dfe 88.61%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
}
.r2 {
  overflow: hidden;
  line-height: 13px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff7a;
  white-space: nowrap;
}
.i2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  color: #ffffffe8;
}
.n2 {
  position: relative;
}
.Mo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff0f;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffd9;
  transition: background 0.2s ease;
}
.Mo:hover {
  background: #ffffff1a;
}
.Mo svg {
  color: #ffffff80;
}
.a2 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-width: 100px;
  background: #1e2021fa;
  box-shadow: 0 4px 16px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.Ho {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #ffffffbf;
  transition: all 0.15s ease;
}
.Ho:hover {
  background: #ffffff14;
  color: #fff;
}
.Ho.s2 {
  background: #ef319f26;
  color: #ef319f;
}
.l2 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 8px;
}
.p2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  min-width: 320px;
  background: #1e2021fa;
  box-shadow: 0 8px 32px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.d2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.x2 {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
}
.f2 {
  display: flex;
  overflow: hidden;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #ffffff0f;
}
.mt {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  gap: 6px;
  padding: 8px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mt:hover:not(.q) {
  background: #ffffff0f;
}
.mt.q .wa {
  border-color: #ffffffe8;
}
.mt.q .ka {
  color: #ffffffe8;
}
.g2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 8px;
  background: #ffffff1f;
  pointer-events: none;
}
.wa {
  position: relative;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  transition: border-color 0.2s ease;
}
.ka {
  position: relative;
  z-index: 1;
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #eff0f0;
  transition: color 0.2s ease;
}
.c2 {
  display: flex;
  overflow: hidden;
  gap: 8px;
  padding: 4px;
  border-radius: 28px;
  background: #ffffff0f;
}
.qo {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 24px;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #fff9;
  transition: color 0.2s ease;
}
.qo:hover:not(.q) {
  color: #fffc;
}
.qo.q {
  color: #ffffffe8;
}
.b2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 24px;
  background: #ffffff1f;
  pointer-events: none;
}
.S {
  display: inline-flex;
  overflow: hidden;
  align-items: stretch;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: #ffffff0f;
  cursor: pointer;
  transition: all 0.2s ease;
}
.S:hover:not(.A) {
  transform: scale(1.02);
}
.S:hover:not(.A) .va {
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px 0 0 10px;
}
.S:hover:not(.A) .Ao {
  border-radius: 10px 0 0 10px;
  opacity: 0.85;
}
.S:active:not(.A) {
  transform: scale(0.98);
}
.S.A {
  opacity: 0.5;
  cursor: not-allowed;
}
.va {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  height: 32px;
  transition: background 0.2s ease;
}
.h2 {
  flex-shrink: 0;
  color: #fff;
}
.u2 {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.Ao {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  background: #ef319f;
  transition: background 0.2s ease;
}
.Ao svg {
  flex-shrink: 0;
  color: #1a1a1a;
}
.m2 {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.Bo {
  display: inline-flex;
  overflow: visible;
  position: relative;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  background-color: #ffffff14;
  transform: translateY(-1px);
}
.Bo:hover {
  background-color: #ffffff1f;
}
.Bo:hover .Do {
  visibility: visible;
  opacity: 1;
}
.y2 {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  object-fit: cover;
}
.w2 {
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 18px;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 13px;
}
.Do {
  display: flex;
  visibility: hidden;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #000000b3;
  opacity: 0;
  cursor: pointer;
  color: #fff;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.Do:hover {
  background: #ef319f;
}
.Zo {
  overflow: hidden auto;
  min-height: 60px;
  max-height: 120px;
}
.Zo::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}
.Zo::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #ffffff21;
}
.yt {
  min-height: 60px;
  outline: none;
  line-height: 24px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  color: #ffffffe8;
  caret-color: #ffffffe8;
}
.yt::placeholder {
  color: #fff6;
}
.yt [data-slate-placeholder="true"] {
  position: absolute !important;
  top: 0 !important;
  opacity: 0.4;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.yt p {
  margin: 0;
  padding: 0;
}
.k2 {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 526px;
  background: #1e2021fa;
  box-shadow: 0 4px 24px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.z2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.za {
  cursor: pointer;
  line-height: 17px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff7a;
  transition: all 0.2s ease-in-out;
}
.za:hover {
  color: #ffffffb3;
}
.S2 {
  color: #ffffffe8;
}
.B {
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  row-gap: 8px;
  margin-top: 14px;
  min-height: 120px;
  max-height: 120px;
}
.B::-webkit-scrollbar {
  width: 4px;
}
.B::-webkit-scrollbar-track {
  background: transparent;
}
.B::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff1a;
}
.B::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
.j2 {
  display: flex;
  scroll-behavior: smooth;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
  width: 100%;
}
.Eo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 156px;
  min-width: 156px;
  height: 48px;
  background-color: #ffffff0f;
  cursor: pointer;
  transition: opacity 0.1s ease;
}
.Eo:hover {
  opacity: 0.7;
}
.Eo:active {
  opacity: 0.5;
}
.R2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #fff;
}
.C2 {
  flex-shrink: 0;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  background-color: #ffffff0a;
  object-fit: contain;
}
.N2 {
  display: -webkit-box;
  overflow: hidden;
  flex: 1;
  line-height: 18px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffb3;
  -webkit-box-orient: vertical;
}
.Y2 {
  padding: 12px 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #fff6;
}
.F2 {
  border-radius: 8px;
  width: 156px;
  min-width: 156px;
  height: 48px;
  background: #ffffff0d;
  animation: Sa 1.5s ease-in-out infinite;
}
@keyframes Sa {
  0%,
  to {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}
.ja {
  position: relative;
  padding: 12px;
  border: none;
  border-radius: 20px;
  width: 100%;
  background: #262626;
  box-shadow: 0 4px 32px #0000001a;
}
.ja:before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  padding: 1px;
  border: none;
  border-radius: 20px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
  content: "";
}
.X2 {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.Go {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: #ffffff80;
  transition: all 0.2s ease;
}
.Go:hover {
  color: #ffffffbf;
}
.Go.Ra {
  background: #ffffff14;
  color: #fff;
}
.T2 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  border: 2px dashed transparent;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.U2 {
  margin-bottom: 0;
}
.Ca {
  border-color: #ef319f;
  background: #ef319f14;
}
.Ca .Io {
  border-color: #ef319f;
  background: #ef319f26;
  color: #ef319f;
}
.Na {
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #353838;
}
.P2 {
  display: flex;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #00000080;
  font-weight: 500;
  font-size: 11px;
  color: #fff;
}
.M2 {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Jo {
  display: flex;
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #000000b3;
  opacity: 0;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  transition: opacity 0.2s ease;
}
.Na:hover .Jo {
  opacity: 1;
}
.Jo:hover {
  background: #ef319f;
}
.H2 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #0009;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
}
.Io {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  color: #fff9;
  transition: all 0.2s ease;
}
.Io:hover {
  border-color: #fff6;
  background: #ffffff0d;
  color: #fffc;
}
.q2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.Ko {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  background: #ffffff14;
  transition: background 0.2s ease;
}
.Ko:hover {
  background: #ffffff1f;
}
.Ko:hover .Lo {
  opacity: 1;
}
.A2 {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  object-fit: cover;
}
.B2 {
  font-weight: 500;
  font-size: 13px;
  color: #ffffffd9;
}
.Lo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #ffffff26;
  opacity: 0;
  cursor: pointer;
  font-size: 10px;
  color: #ffffffb3;
  transition: all 0.2s ease;
}
.Lo:hover {
  background: #ef319f;
  color: #fff;
}
.D2 {
  min-height: 60px;
  max-height: 120px;
}
.D {
  overflow: hidden auto;
  min-height: 60px;
  max-height: 120px;
  line-height: 24px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  color: #ffffffe8;
  caret-color: #ffffffe8;
}
.D::placeholder {
  color: #fff6;
}
.D:focus-visible {
  outline: none;
}
.D::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}
.D::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #ffffff21;
}
.Z2 {
  margin: 0;
  padding: 0;
}
.E2 {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.Oo {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 2px 8px 2px 4px;
  border-radius: 6px;
  background-color: #ffffff14;
  transform: translateY(1px);
}
.Oo:hover {
  background-color: #ffffff1f;
}
.Oo:hover .Qo {
  visibility: visible;
  opacity: 1;
}
.G2 {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  object-fit: cover;
}
.I2 {
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 18px;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 13px;
}
.Qo {
  visibility: hidden;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 10;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #000000b3;
  opacity: 0;
  cursor: pointer;
  font-size: 10px;
  color: #fff;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.Qo:hover {
  background: #ef319f;
}
.J2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.K2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.L2 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.O2 {
  position: relative;
}
.Vo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff0f;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffd9;
  transition: background 0.2s ease;
}
.Vo:hover {
  background: #ffffff1a;
}
.Vo svg {
  color: #ffffff80;
}
.Q2 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-width: 100px;
  background: #1e2021fa;
  box-shadow: 0 4px 16px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.Wo {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #ffffffbf;
  transition: all 0.15s ease;
}
.Wo:hover {
  background: #ffffff14;
  color: #fff;
}
.Wo.Ra {
  background: #ef319f26;
  color: #ef319f;
}
.V2 {
  margin: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.W2,
._2,
.th {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 8px;
}
._o {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 20px;
  background: #ef319f26;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ef319f;
  transition: background 0.2s ease;
}
._o:hover {
  background: #ef319f40;
}
._o svg {
  color: #ef319f;
}
.te {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff0f;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffd9;
  transition: background 0.2s ease;
}
.te:hover {
  background: #ffffff1a;
}
.te svg {
  color: #ffffff80;
}
.oh {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #ffffff0f;
}
.eh {
  font-size: 14px;
}
.rh {
  font-weight: 600;
  font-size: 13px;
  color: #ffffffe6;
}
.Z {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  background: #ef319f;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}
.Z:hover {
  background: #f542ab;
  transform: scale(1.05);
}
.Z:active {
  transform: scale(0.98);
}
.Z:disabled {
  background: #ef319f66;
  cursor: not-allowed;
}
.Z:disabled:hover {
  transform: none;
}
.tl-container {
  font-size: 12px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 64px;
  --space-10: 72px;
  --radius-0: 2px;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 9px;
  --radius-4: 11px;
  --layer-canvas-hidden: -999999;
  --layer-canvas-background: 100;
  --layer-canvas-grid: 150;
  --layer-watermark: 200;
  --layer-canvas-shapes: 300;
  --layer-canvas-overlays: 500;
  --layer-canvas-blocker: 10000;
  --layer-overlays-collaborator-scribble: 10;
  --layer-overlays-collaborator-brush: 20;
  --layer-overlays-collaborator-shape-indicator: 30;
  --layer-overlays-user-scribble: 40;
  --layer-overlays-user-brush: 50;
  --layer-overlays-user-snapline: 90;
  --layer-overlays-selection-fg: 100;
  --layer-overlays-user-handles: 105;
  --layer-overlays-user-indicator-hint: 110;
  --layer-overlays-custom: 115;
  --layer-overlays-collaborator-cursor-hint: 120;
  --layer-overlays-collaborator-cursor: 130;
  --layer-text-container: 1;
  --layer-text-content: 3;
  --layer-text-editor: 4;
  --layer-error-overlay: 1;
  --layer-error-canvas: 2;
  --layer-error-canvas-after: 3;
  --layer-error-content: 4;
  --tl-zoom: 1;
  --tl-cursor-none: none;
  --tl-cursor-default:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>")
      12 8,
    default;
  --tl-cursor-pointer:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>")
      14 10,
    pointer;
  --tl-cursor-cross:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>")
      16 16,
    crosshair;
  --tl-cursor-move:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>")
      16 16,
    move;
  --tl-cursor-grab:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>")
      16 16,
    grab;
  --tl-cursor-grabbing:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>")
      16 16,
    grabbing;
  --tl-cursor-text:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>")
      4 10,
    text;
  --tl-cursor-zoom-in:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
      16 16,
    zoom-in;
  --tl-cursor-zoom-out:
    url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
      16 16,
    zoom-out;
  --tl-cursor: var(--tl-cursor-default);
  --tl-cursor-resize-edge: ew-resize;
  --tl-cursor-resize-corner: nesw-resize;
  --tl-cursor-ew-resize: ew-resize;
  --tl-cursor-ns-resize: ns-resize;
  --tl-cursor-nesw-resize: nesw-resize;
  --tl-cursor-nwse-resize: nwse-resize;
  --tl-cursor-rotate: pointer;
  --tl-cursor-nwse-rotate: pointer;
  --tl-cursor-nesw-rotate: pointer;
  --tl-cursor-senw-rotate: pointer;
  --tl-cursor-swne-rotate: pointer;
  --tl-scale: calc(1 / var(--tl-zoom));
  --tl-font-draw: "tldraw_draw", sans-serif;
  --tl-font-sans: "tldraw_sans", sans-serif;
  --tl-font-serif: "tldraw_serif", serif;
  --tl-font-mono: "tldraw_mono", monospace;
  --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
  --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
  --tl-text-outline-reference:
    0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
    var(--b) var(--b) 0 var(--color-background),
    var(--a) var(--b) 0 var(--color-background),
    var(--a) var(--a) 0 var(--color-background),
    var(--b) var(--a) 0 var(--color-background);
  --tl-text-outline: var(--tl-text-outline-reference);
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: clip;
  color: var(--color-text);
}
.tl-theme__light {
  --color-snap: hsl(0, 76%, 60%);
  --color-selection-fill: hsl(210, 100%, 56%, 24%);
  --color-selection-stroke: hsl(214, 84%, 56%);
  --color-background: hsl(210, 20%, 98%);
  --color-brush-fill: hsl(0, 0%, 56%, 10.2%);
  --color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
  --color-grid: hsl(0, 0%, 43%);
  --color-low: hsl(204, 16%, 94%);
  --color-low-border: hsl(204, 16%, 92%);
  --color-culled: hsl(204, 14%, 93%);
  --color-muted-none: hsl(0, 0%, 0%, 0%);
  --color-muted-0: hsl(0, 0%, 0%, 2%);
  --color-muted-1: hsl(0, 0%, 0%, 10%);
  --color-muted-2: hsl(0, 0%, 0%, 4.3%);
  --color-hint: hsl(0, 0%, 0%, 5.5%);
  --color-overlay: hsl(0, 0%, 0%, 20%);
  --color-divider: hsl(0, 0%, 91%);
  --color-panel: hsl(0, 0%, 99%);
  --color-panel-contrast: hsl(0, 0%, 100%);
  --color-panel-overlay: hsl(0, 0%, 100%, 82%);
  --color-panel-transparent: hsla(0, 0%, 99%, 0%);
  --color-selected: hsl(214, 84%, 56%);
  --color-selected-contrast: hsl(0, 0%, 100%);
  --color-focus: hsl(219, 65%, 50%);
  --color-text: hsl(0, 0%, 0%);
  --color-text-0: hsl(0, 0%, 11%);
  --color-text-1: hsl(0, 0%, 18%);
  --color-text-3: hsl(204, 4%, 45%);
  --color-text-shadow: hsl(0, 0%, 100%);
  --color-text-highlight: hsl(52, 100%, 50%);
  --color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
  --color-primary: hsl(214, 84%, 56%);
  --color-success: hsl(123, 46%, 34%);
  --color-info: hsl(201, 98%, 41%);
  --color-warning: hsl(27, 98%, 47%);
  --color-danger: hsl(0, 90%, 43%);
  --color-laser: hsl(0, 100%, 50%);
  --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
  --shadow-2:
    0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
    0px 2px 6px hsl(0, 0%, 0%, 0.1),
    inset 0px 0px 0px 1px var(--color-panel-contrast);
  --shadow-3:
    0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
    inset 0px 0px 0px 1px var(--color-panel-contrast);
  --shadow-4:
    0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
    0px 2px 16px hsl(0, 0%, 0%, 6%),
    inset 0px 0px 0px 1px var(--color-panel-contrast);
}
.tl-theme__dark {
  --color-snap: hsl(0, 76%, 60%);
  --color-selection-fill: hsl(209, 100%, 57%, 20%);
  --color-selection-stroke: hsl(214, 84%, 56%);
  --color-background: hsl(240, 5%, 6.5%);
  --color-brush-fill: hsl(0, 0%, 71%, 5.1%);
  --color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
  --color-grid: hsl(0, 0%, 40%);
  --color-low: hsl(260, 4.5%, 10.5%);
  --color-low-border: hsl(207, 10%, 10%);
  --color-culled: hsl(210, 11%, 19%);
  --color-muted-none: hsl(0, 0%, 100%, 0%);
  --color-muted-0: hsl(0, 0%, 100%, 2%);
  --color-muted-1: hsl(0, 0%, 100%, 10%);
  --color-muted-2: hsl(0, 0%, 100%, 5%);
  --color-hint: hsl(0, 0%, 100%, 7%);
  --color-overlay: hsl(0, 0%, 0%, 50%);
  --color-divider: hsl(240, 9%, 22%);
  --color-panel: hsl(235, 6.8%, 13.5%);
  --color-panel-contrast: hsl(245, 12%, 23%);
  --color-panel-overlay: hsl(210, 10%, 24%, 82%);
  --color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
  --color-selected: hsl(217, 89%, 61%);
  --color-selected-contrast: hsl(0, 0%, 100%);
  --color-focus: hsl(217, 76%, 80%);
  --color-text: hsl(210, 17%, 98%);
  --color-text-0: hsl(0, 9%, 94%);
  --color-text-1: hsl(0, 0%, 85%);
  --color-text-3: hsl(204, 4%, 75%);
  --color-text-shadow: hsl(210, 13%, 18%);
  --color-text-highlight: hsl(52, 100%, 41%);
  --color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
  --color-primary: hsl(214, 84%, 56%);
  --color-success: hsl(123, 38%, 57%);
  --color-info: hsl(199, 92%, 56%);
  --color-warning: hsl(36, 100%, 57%);
  --color-danger: hsl(0, 82%, 66%);
  --color-laser: hsl(0, 100%, 50%);
  --shadow-1:
    0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
    inset 0px 0px 0px 1px var(--color-panel-contrast);
  --shadow-2:
    0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
    inset 0px 0px 0px 1px var(--color-panel-contrast);
  --shadow-3:
    0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
    inset 0px 0px 0px 1px var(--color-panel-contrast);
}
.tl-counter-scaled {
  transform: scale(var(--tl-scale));
  transform-origin: top left;
  width: calc(100% * var(--tl-zoom));
  height: calc(100% * var(--tl-zoom));
}
.tl-container,
.tl-container * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  scrollbar-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  outline: none;
}
.tl-container a {
  -webkit-touch-callout: initial;
}
.tl-container__focused {
  outline: 1px solid var(--color-low);
}
input,
*[contenteditable],
*[contenteditable] * {
  -webkit-user-select: text;
  user-select: text;
}
.tl-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: var(--color-text);
  cursor: var(--tl-cursor);
  overflow: clip;
  content-visibility: auto;
  touch-action: none;
  contain: strict;
}
.tl-shapes {
  position: relative;
  z-index: var(--layer-canvas-shapes);
}
.tl-overlays {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  contain: strict;
  pointer-events: none;
  z-index: var(--layer-canvas-overlays);
}
.tl-overlays__item {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  transform-origin: top left;
}
.tl-svg-context {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tl-background__wrapper {
  z-index: var(--layer-canvas-background);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.tl-background {
  background-color: var(--color-background);
  width: 100%;
  height: 100%;
}
.tl-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  pointer-events: none;
  z-index: var(--layer-canvas-grid);
  contain: strict;
}
.tl-grid-dot {
  fill: var(--color-grid);
}
.tl-html-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  contain: layout style size;
}
.tl-collaborator__scribble {
  z-index: var(--layer-overlays-collaborator-scribble);
}
.tl-collaborator__brush {
  z-index: var(--layer-overlays-collaborator-brush);
}
.tl-collaborator__shape-indicator {
  z-index: var(--layer-overlays-collaborator-shape-indicator);
}
.tl-user-scribble {
  z-index: var(--layer-overlays-user-scribble);
}
.tl-user-brush {
  z-index: var(--layer-overlays-user-brush);
}
.tl-user-handles {
  z-index: var(--layer-overlays-user-handles);
}
.tl-user-snapline {
  z-index: var(--layer-overlays-user-snapline);
}
.tl-selection__fg {
  pointer-events: none;
  z-index: var(--layer-overlays-selection-fg);
}
.tl-user-indicator__hint {
  z-index: var(--layer-overlays-user-indicator-hint);
  stroke-width: calc(2.5px * var(--tl-scale));
}
.tl-custom-overlays {
  z-index: var(--layer-overlays-custom);
}
.tl-collaborator__cursor-hint {
  z-index: var(--layer-overlays-collaborator-cursor-hint);
}
.tl-collaborator__cursor {
  z-index: var(--layer-overlays-collaborator-cursor);
}
.tl-cursor {
  overflow: visible;
}
.tl-selection__bg {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background-color: transparent;
  pointer-events: all;
}
.tl-selection__fg__outline {
  fill: none;
  pointer-events: none;
  stroke: var(--color-selection-stroke);
  stroke-width: calc(1.5px * var(--tl-scale));
}
.tl-corner-handle {
  pointer-events: none;
  stroke: var(--color-selection-stroke);
  fill: var(--color-background);
  stroke-width: calc(1.5px * var(--tl-scale));
}
.tl-text-handle {
  pointer-events: none;
  fill: var(--color-selection-stroke);
}
.tl-corner-crop-handle,
.tl-corner-crop-edge-handle {
  pointer-events: none;
  fill: none;
  stroke: var(--color-selection-stroke);
}
.tl-mobile-rotate__bg {
  pointer-events: all;
  cursor: var(--tl-cursor-grab);
}
.tl-mobile-rotate__fg {
  pointer-events: none;
  stroke: var(--color-selection-stroke);
  fill: var(--color-background);
  stroke-width: calc(1.5px * var(--tl-scale));
}
.tl-transparent {
  fill: transparent;
  stroke: transparent;
}
.tl-hidden {
  opacity: 0;
  pointer-events: none;
}
.tl-nametag {
  top: 16px;
  left: 13px;
  width: fit-content;
  height: fit-content;
  max-width: 120px;
  padding: 3px 6px;
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-family: var(--font-body);
  border-radius: var(--radius-2);
  color: var(--color-selected-contrast);
}
.tl-nametag-title {
  top: -2px;
  left: 13px;
  width: fit-content;
  height: fit-content;
  padding: 0 6px;
  max-width: 120px;
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-family: var(--font-body);
  text-shadow: var(--tl-text-outline);
  color: var(--color-selected-contrast);
}
.tl-nametag-chat {
  top: 16px;
  left: 13px;
  width: fit-content;
  height: fit-content;
  color: var(--color-selected-contrast);
  white-space: nowrap;
  position: absolute;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-body);
  opacity: 1;
  border-radius: var(--radius-2);
}
.tl-cursor-chat {
  position: absolute;
  color: var(--color-selected-contrast);
  white-space: nowrap;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-body);
  pointer-events: none;
  z-index: var(--layer-cursor);
  margin-top: 16px;
  margin-left: 13px;
  opacity: 1;
  border: none;
  -webkit-user-select: text;
  user-select: text;
  border-radius: var(--radius-2);
}
.tl-cursor-chat .tl-cursor-chat__bubble {
  padding-right: 12px;
}
.tl-cursor-chat::selection {
  background: var(--color-selected);
  color: var(--color-selected-contrast);
  text-shadow: none;
}
.tl-cursor-chat::placeholder {
  color: var(--color-selected-contrast);
  opacity: 0.7;
}
.tl-text-shape-label {
  position: relative;
  font-weight: 400;
  min-width: 1px;
  padding: 0;
  margin: 0;
  border: none;
  width: fit-content;
  height: fit-content;
  font-variant: normal;
  font-style: normal;
  pointer-events: all;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-shadow: var(--tl-text-outline);
}
.tl-text-wrapper[data-font="draw"] {
  font-family: var(--tl-font-draw);
}
.tl-text-wrapper[data-font="sans"] {
  font-family: var(--tl-font-sans);
}
.tl-text-wrapper[data-font="serif"] {
  font-family: var(--tl-font-serif);
}
.tl-text-wrapper[data-font="mono"] {
  font-family: var(--tl-font-mono);
}
.tl-text-wrapper[data-align="start"],
.tl-text-wrapper[data-align="start-legacy"] {
  text-align: left;
}
.tl-text-wrapper[data-align="middle"],
.tl-text-wrapper[data-align="middle-legacy"] {
  text-align: center;
}
.tl-text-wrapper[data-align="end"],
.tl-text-wrapper[data-align="end-legacy"] {
  text-align: right;
}
.tl-plain-text-wrapper[data-isediting="true"] .tl-text-content {
  opacity: 0;
}
.tl-rich-text-wrapper[data-isediting="true"] .tl-text-content {
  display: none;
}
.tl-text {
  margin: 0;
  padding: 0;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  background: none;
  border-image: none;
  border: 0px;
  caret-color: var(--color-text);
  color: inherit;
  column-count: initial !important;
  display: inline-block;
  font-family: inherit;
  font-feature-settings: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-size: inherit;
  font-stretch: 100%;
  font-style: inherit;
  font-variant: inherit;
  font-variation-settings: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  outline: none;
  overflow-wrap: break-word;
  text-align: inherit;
  text-indent: 0px;
  text-rendering: auto;
  text-shadow: inherit;
  text-transform: none;
  white-space: pre-wrap;
  line-break: normal;
  word-spacing: 0px;
  word-wrap: break-word;
  writing-mode: horizontal-tb !important;
}
.tl-text-measure {
  position: absolute;
  z-index: var(--layer-canvas-hidden);
  top: 0;
  left: 0;
  opacity: 0;
  width: max-content;
  box-sizing: border-box;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  resize: none;
  border: none;
  user-select: none;
  contain: style paint;
  visibility: hidden;
  unicode-bidi: plaintext;
  -webkit-user-select: none;
}
.tl-text-input,
.tl-text-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-width: 1px;
  min-height: 1px;
  outline: none;
}
.tl-text-content__wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  min-height: auto;
}
.tl-text-content {
  overflow: visible;
  pointer-events: none;
}
.tl-text-input {
  resize: none;
  user-select: all;
  -webkit-user-select: text;
  cursor: var(--tl-cursor-text);
}
.tl-text-input:not(.tl-rich-text) {
  overflow: hidden;
}
.tl-text-input::selection {
  background: var(--color-selected);
  color: var(--color-selected-contrast);
  text-shadow: none;
}
.tl-text-label {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  text-shadow: var(--tl-text-outline);
  line-height: inherit;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.tl-text-label[data-hastext="false"][data-isediting="false"]
  > .tl-text-label__inner {
  width: 40px;
  height: 40px;
}
.tl-text-label[data-hastext="true"][data-isediting="false"] .tl-text-content {
  pointer-events: all;
}
.tl-text-label__inner > .tl-text-input.tl-rich-text {
  display: none;
  position: static;
}
.tl-text-wrapper[data-isediting="false"] .tl-text-input,
.tl-arrow-label[data-isediting="false"] .tl-text-input {
  opacity: 0;
  cursor: var(--tl-cursor-default);
}
.tl-rich-text[data-is-ready-for-editing="true"],
.tl-text-wrapper[data-is-ready-for-editing="true"] .tl-text-input {
  cursor: var(--tl-cursor-text);
}
.tl-text-label[data-textwrap="true"] > .tl-text-label__inner {
  max-width: 100%;
}
.tl-text-label[data-isediting="true"] {
  background-color: transparent;
  min-height: auto;
}
.tl-text-wrapper .tl-text-content {
  pointer-events: all;
  z-index: var(--layer-text-content);
}
.tl-text-label__inner > .tl-text-content {
  position: relative;
  top: 0;
  left: 0;
  padding: inherit;
  height: fit-content;
  width: fit-content;
  border-radius: var(--radius-1);
  max-width: 100%;
}
.tl-text-label__inner > .tl-text-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: inherit;
}
.tl-text-wrapper[data-isselected="true"] .tl-text-input {
  z-index: var(--layer-text-editor);
  pointer-events: all;
}
.tl-canvas:is(
    [data-iseditinganything="true"],
    [data-isselectinganything="true"]
  )
  .tl-shape:not(
    [data-shape-type="arrow"],
    [data-shape-type="draw"],
    [data-shape-type="line"],
    [data-shape-type="highlight"],
    [data-shape-is-filled="false"]
  ) {
  pointer-events: all;
}
.tl-rich-text .ProseMirror {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  -webkit-font-variant-ligatures: inherit;
  font-variant-ligatures: inherit;
  font-feature-settings: inherit;
}
.tl-rich-text p {
  margin: 0;
  min-height: 1lh;
}
.tl-rich-text ul,
.tl-rich-text ol {
  text-align: left;
  margin: 0;
  padding-left: 3.25ch;
  list-style: revert;
}
.tl-rich-text ol:has(> li:nth-child(10)) {
  padding-left: 4.25ch;
}
.tl-rich-text ol:has(> li:nth-child(100)) {
  padding-left: 5.25ch;
}
.tl-rich-text h1,
.tl-rich-text h2,
.tl-rich-text h3,
.tl-rich-text h4,
.tl-rich-text h5,
.tl-rich-text h6 {
  margin-top: 5px;
  margin-bottom: 10px;
}
.tl-rich-text a {
  color: var(--color-primary);
  text-decoration: underline;
}
.tl-rich-text[data-is-select-tool-active="false"] a {
  cursor: inherit;
}
.tl-rich-text code {
  font-family: var(--tl-font-mono);
}
.tl-rich-text mark {
  background-color: #fddd00;
  color: currentColor;
  border-radius: 2px;
}
.tl-theme__light .tl-rich-text mark {
  text-shadow: none;
}
.tl-theme__dark .tl-rich-text mark {
  background-color: var(--color-text-highlight);
  color: currentColor;
}
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
      background-color: var(--color-text-highlight-p3);
    }
  }
}
.tl-text-wrapper[data-isediting="true"] .tl-rich-text {
  display: block;
}
.tl-loading {
  background-color: var(--color-background);
  color: var(--color-text-1);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  animation: tl-fade-in 0.2s ease-in-out forwards;
  animation-delay: 0.2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--layer-canvas-blocker);
}
@keyframes tl-fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tl-spinner {
  animation: tl-spin 1s linear infinite;
}
@keyframes tl-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.tl-brush {
  stroke-width: calc(var(--tl-scale) * 1px);
  contain: size layout;
}
.tl-brush__default {
  stroke: var(--color-brush-stroke);
  fill: var(--color-brush-fill);
}
.tl-scribble {
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
  contain: size layout;
}
.tl-snap-indicator,
.tl-snap-point {
  stroke: var(--color-snap);
  stroke-width: calc(1px * var(--tl-scale));
  fill: none;
}
.tl-hyperlink-button {
  background: none;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-1);
  padding: 13px;
  cursor: var(--tl-cursor-pointer);
  border: none;
  outline: none;
  pointer-events: all;
  z-index: 1;
}
.tl-hyperlink-button:after {
  content: "";
  z-index: -1;
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: var(--radius-1);
  background-color: var(--color-background);
  pointer-events: none;
}
.tl-hyperlink-button:focus-visible {
  color: var(--color-selected);
}
.tl-hyperlink__icon {
  width: 15px;
  height: 15px;
  background-color: currentColor;
  pointer-events: none;
}
.tl-hyperlink-button__hidden {
  display: none;
}
.tl-handle {
  pointer-events: all;
}
.tl-handle__bg {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}
.tl-handle__fg {
  fill: var(--color-selected-contrast);
  stroke: var(--color-selection-stroke);
  stroke-width: calc(1.5px * var(--tl-scale));
  pointer-events: none;
}
.tl-handle__create {
  opacity: 0;
}
.tl-handle__clone > .tl-handle__fg {
  fill: var(--color-selection-stroke);
  stroke: none;
}
.tl-handle__bg:active {
  fill: none;
}
@media (pointer: coarse) {
  .tl-handle__bg:active {
    fill: var(--color-selection-fill);
  }
  .tl-handle__create {
    opacity: 1;
  }
}
.tl-rotate-corner:not(:hover),
.tl-resize-handle:not(:hover) {
  cursor: none;
}
.tl-shape-indicator {
  transform-origin: top left;
  fill: none;
  stroke-width: calc(1.5px * var(--tl-scale));
  contain: size layout;
}
.tl-shape {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  transform-origin: top left;
  contain: size layout;
}
.tl-svg-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: top left;
  overflow: visible;
}
.tl-html-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: top left;
  color: var(--color-text-1);
}
.tl-group {
  stroke: var(--color-text);
  stroke-width: calc(1px * var(--tl-scale));
  opacity: 0.5;
}
.tl-arrow-label {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2px;
  height: 2px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-text);
  text-shadow: var(--tl-text-outline);
}
.tl-arrow-label[data-isediting="true"] p {
  opacity: 0;
}
.tl-arrow-label__inner {
  border-radius: var(--radius-1);
  box-sizing: content-box;
  position: relative;
  height: max-content;
  width: max-content;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tl-arrow-label .tl-arrow {
  position: relative;
  height: max-content;
  padding: inherit;
  overflow: visible;
}
.tl-arrow-label textarea {
  padding: inherit;
  min-width: 4px;
}
.tl-arrow-hint {
  stroke: var(--color-text-1);
  fill: none;
  stroke-linecap: round;
  overflow: visible;
}
.tl-arrow-hint-handle {
  fill: var(--color-selected-contrast);
  stroke: var(--color-selection-stroke);
  stroke-width: calc(1.5px * var(--tl-scale));
  r: calc(4px * var(--tl-scale));
}
.tl-arrow-hint-snap {
  stroke: transparent;
  fill: var(--color-selection-fill);
  r: calc(12px * var(--tl-scale));
}
.tl-arrow-hint-snap__none,
.tl-arrow-hint-snap__center,
.tl-arrow-hint-snap__axis {
  display: none;
}
.tl-arrow-hint-snap__edge {
  r: calc(8px * var(--tl-scale));
}
.tl-bookmark__container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid var(--color-panel-contrast);
  background-color: var(--color-panel);
  border-radius: var(--radius-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tl-bookmark__container--safariExport {
  border: 1px solid var(--color-divider);
}
.tl-bookmark__image_container {
  flex: 1 1 100%;
  overflow: hidden;
  border-top-left-radius: var(--radius-1);
  border-top-right-radius: var(--radius-1);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  box-shadow: inset 0 0 0 1px var(--color-divider);
}
.tl-bookmark__image_container > .tl-hyperlink-button:after {
  background-color: var(--color-panel);
}
.tl-bookmark__placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-muted-2);
  border-bottom: 1px solid var(--color-muted-2);
}
.tl-bookmark__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--color-muted-2);
}
.tl-bookmark__copy_container {
  background-color: var(--color-muted-0);
  padding: var(--space-4);
  pointer-events: all;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.tl-bookmark__heading,
.tl-bookmark__description,
.tl-bookmark__link {
  margin: 0;
  width: 100%;
  font-family: inherit;
}
.tl-bookmark__heading {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  padding-bottom: var(--space-2);
  overflow: hidden;
  max-height: 51.2px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.tl-bookmark__description {
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
  max-height: 54px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
  display: -webkit-box;
  color: var(--color-text-2);
  margin: var(--space-2) 0px;
}
.tl-bookmark__heading + .tl-bookmark__link,
.tl-bookmark__description + .tl-bookmark__link {
  margin-top: var(--space-3);
}
.tl-bookmark__link {
  font-size: 12px;
  pointer-events: all;
  display: flex;
  color: var(--color-text-2);
  align-items: center;
  cursor: var(--tl-cursor-pointer);
  width: fit-content;
  max-width: 100%;
}
.tl-bookmark__link > span {
  flex-shrink: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-bookmark__link > .tl-hyperlink__icon {
  margin-right: 8px;
  flex-shrink: 0;
}
.tl-bookmark__link > .tl-bookmark__favicon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tl-image,
.tl-video {
  object-fit: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.tl-video-container,
.tl-image-container,
.tl-embed-container {
  width: 100%;
  height: 100%;
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tl-image-container {
  position: relative;
}
.tl-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.tl-video.tl-video-is-fullscreen {
  object-fit: contain;
  background-size: contain;
}
.tl-note__container {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: all;
  opacity: 1;
  z-index: var(--layer-text-container);
  border-radius: 1px;
}
.tl-note__container > .tl-text-label {
  text-shadow: none;
  color: currentColor;
}
.tl-frame__body {
  stroke-width: calc(1px * var(--tl-scale));
}
.tl-frame__creating {
  stroke: var(--color-selected);
  fill: none;
}
.tl-frame-heading {
  --frame-padding-x: 6px;
  --frame-height: 24px;
  --frame-minimum-width: 32px;
  --frame-offset-width: 16px;
  display: flex;
  align-items: center;
  position: absolute;
  transform-origin: 0% 100%;
  overflow: hidden;
  max-width: 100%;
  min-width: var(--frame-minimum-width);
  height: auto;
  font-size: 12px;
  padding-bottom: 4px;
  pointer-events: all;
}
.tl-frame-heading-hit-area {
  pointer-events: all;
  transform-origin: 0% 100%;
  display: flex;
  height: var(--frame-height);
  width: 100%;
  align-items: center;
  border-radius: var(--radius-1);
}
.tl-frame-label {
  pointer-events: all;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px var(--frame-padding-x);
  border-radius: var(--radius-1);
  position: relative;
  font-size: inherit;
  white-space: pre;
}
.tl-frame-label__editing {
  color: transparent;
  white-space: pre;
  width: auto;
  min-width: var(--frame-minimum-width);
  height: 100%;
  overflow: visible;
  background-color: var(--color-panel);
  border-color: var(--color-selected);
  box-shadow: inset 0 0 0 1.5px var(--color-selected);
}
.tl-frame-name-input {
  position: absolute;
  border: none;
  background: none;
  outline: none;
  padding: 0px var(--frame-padding-x);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  width: 100%;
  color: var(--color-text-1);
  border-radius: var(--radius-1);
  user-select: all;
  -webkit-user-select: text;
  white-space: pre;
  cursor: var(--tl-cursor-text);
}
@media (max-width: 600px) {
  .tl-frame-heading {
    font-size: 16px;
  }
}
.tl-embed {
  border: none;
  border-radius: var(--radius-2);
}
.tl-shape-error-boundary {
  width: 100%;
  height: 100%;
  background-color: var(--color-muted-1);
  border-width: calc(1px * var(--tl-scale));
  border-color: var(--color-muted-1);
  border-style: solid;
  border-radius: calc(var(--radius-1) * var(--tl-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  position: relative;
  pointer-events: all;
  overflow: hidden;
  padding: var(--space-2);
}
.tl-shape-error-boundary:before {
  transform: scale(var(--tl-scale));
  content: "Error";
  font-size: 12px;
  font-family: inherit;
  color: var(--color-text-0);
}
.tl-error-boundary {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-color: var(--color-background);
  color: var(--color-text-1);
  position: absolute;
}
.tl-error-boundary__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: var(--layer-error-overlay);
  background-color: var(--color-overlay);
}
.tl-error-boundary__content * {
  user-select: all;
  -webkit-user-select: text;
  pointer-events: all;
}
.tl-error-boundary__canvas {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: var(--layer-error-canvas);
}
.tl-error-boundary__canvas:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: var(--layer-error-canvas-after);
  pointer-events: all;
}
.tl-error-boundary__content {
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  width: 400px;
  max-height: 100%;
  background-color: var(--color-panel);
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  font-size: 14px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  overflow: auto;
  z-index: var(--layer-error-content);
  gap: 12px;
}
.tl-error-boundary__content__expanded {
  width: 600px;
}
.tl-error-boundary__content h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}
.tl-error-boundary__content h4 {
  border: 1px solid var(--color-low-border);
  margin: -6px 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-2);
  font-weight: 400;
}
.tl-error-boundary__content p {
  line-height: 1.5;
  margin: 0;
}
.tl-error-boundary__content pre {
  background-color: var(--color-muted-2);
  margin-top: 0;
  padding: var(--space-5);
  border-radius: var(--radius-2);
  overflow: auto;
  font-size: 12px;
  max-height: 320px;
}
.tl-error-boundary__content button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: var(--space-4);
  border-radius: var(--radius-3);
  cursor: var(--tl-cursor-pointer);
  color: inherit;
  background-color: transparent;
}
.tl-error-boundary__content a {
  color: var(--color-selected);
  font-weight: 500;
  text-decoration: none;
}
.tl-error-boundary__content__error {
  position: relative;
  margin: -6px 0 0;
}
.tl-error-boundary__content__error button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-panel);
  border-radius: var(--radius-1);
}
.tl-error-boundary__content__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 0 -4px;
}
.tl-error-boundary__content__actions__group {
  display: flex;
  gap: var(--space-4);
}
.tl-error-boundary__content .tl-error-boundary__reset {
  color: var(--color-danger);
}
.tl-error-boundary__content .tl-error-boundary__refresh {
  background-color: var(--color-primary);
  color: var(--color-selected-contrast);
}
.tl-container__focused:not(.tl-container__no-focus-ring)
  .tlui-button.tl-error-boundary__refresh:focus-visible {
  border-radius: 8px;
  outline-offset: 0;
}
.tl-hit-test-blocker {
  position: absolute;
  z-index: var(--layer-canvas-blocker);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}
.tl-hit-test-blocker__hidden {
  display: none;
}
@media (hover: hover) {
  .tl-handle__create:hover {
    opacity: 1;
  }
  .tl-handle__bg:hover {
    cursor: var(--tl-cursor-grab);
    fill: var(--color-selection-fill);
  }
  .tl-bookmark__link:hover,
  .tl-hyperlink-button:hover {
    color: var(--color-selected);
  }
  .tl-error-boundary__content button:hover {
    background-color: var(--color-low);
  }
  .tl-error-boundary__content a:hover {
    color: var(--color-text-1);
  }
  .tl-error-boundary__content .tl-error-boundary__refresh:hover {
    background-color: var(--color-primary);
    opacity: 0.9;
  }
  .tl-canvas[data-iseditinganything="true"]
    .tl-text-wrapper:hover
    .tl-text-input {
    z-index: var(--layer-text-editor);
    pointer-events: all;
  }
}
.tl-container {
  --layer-above: 1;
  --layer-focused-input: 10;
  --layer-menu-click-capture: 250;
  --layer-panels: 300;
  --layer-menus: 400;
  --layer-toasts: 650;
  --layer-cursor: 700;
  --layer-header-footer: 999;
  --layer-following-indicator: 1000;
}
.tlui-button {
  position: relative;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: transparent;
  color: currentColor;
  cursor: pointer;
  pointer-events: all;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  text-rendering: optimizeLegibility;
  font-size: 12px;
  gap: 0px;
  color: var(--color-text-1);
  z-index: 0;
}
.tlui-button:disabled {
  color: var(--color-text-3);
  text-shadow: none;
  cursor: default;
}
.tlui-button:disabled .tlui-kbd {
  color: var(--color-text-3);
}
.tlui-button > * {
  position: relative;
  z-index: var(--layer-above);
}
.tlui-button__label {
  font-size: 12px;
  flex-grow: 2;
  text-align: left;
}
.tl-container__focused:not(.tl-container__no-focus-ring)
  .tlui-button:focus-visible {
  border-radius: 10px;
  outline: 2px solid var(--color-focus);
  outline-offset: -5px;
}
.tl-container__focused:not(.tl-container__no-focus-ring)
  .tlui-button__tool:focus-visible {
  border-radius: 12px;
}
.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
  border-radius: 10px;
  outline: 2px solid var(--color-focus);
  outline-offset: -5px;
}
.tlui-button:after {
  display: block;
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: var(--radius-2);
  background: var(--color-muted-2);
  opacity: 0;
}
.tlui-button__menu[data-highlighted]:after {
  opacity: 1;
}
.tlui-button[data-isactive="true"]:after,
.tlui-button[data-isactive="true"]:not(:disabled, :focus-visible):active:after {
  background: var(--color-hint);
  opacity: 1;
}
.tlui-button[aria-expanded="true"][data-direction="left"]:after {
  background: linear-gradient(
    270deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
  opacity: 1;
}
@media (hover: hover) {
  .tlui-button[aria-expanded="true"][data-direction="left"]:not(:hover):after {
    background: linear-gradient(
      270deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
    opacity: 1;
  }
  .tlui-button:not(:disabled):hover {
    z-index: 1;
  }
  .tlui-button:not(:disabled):hover:after {
    opacity: 1;
  }
}
.tlui-button__icon + .tlui-button__label {
  margin-left: var(--space-2);
}
.tlui-button__low {
  border-radius: var(--radius-3);
  background-color: var(--color-low);
}
.tlui-button__low:after {
  background-color: var(--color-muted-2);
  opacity: 0;
}
@media (hover: hover) {
  .tlui-button__low:hover:after {
    opacity: 1;
  }
}
.tlui-button__primary {
  color: var(--color-primary);
}
.tlui-button__danger {
  color: var(--color-danger);
  text-shadow: none;
}
@media (hover: hover) {
  .tlui-button__primary:not(:disabled, :focus-visible):hover {
    color: var(--color-primary);
  }
  .tlui-button__danger:not(:disabled, :focus-visible):hover {
    color: var(--color-danger);
    text-shadow: none;
  }
}
.tlui-button__panel {
  position: relative;
}
.tlui-button__menu {
  height: 40px;
  min-height: 40px;
  width: 100%;
  gap: 8px;
  margin: -4px 0;
}
.tlui-button__menu:after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: var(--radius-2);
}
.tlui-button__menu > .tlui-icon + .tlui-button__label {
  margin-left: 0;
}
.tlui-button__menu:nth-child(1) {
  margin-top: 0;
}
.tlui-button__menu:nth-last-child(1) {
  margin-bottom: 0;
}
.tlui-button__checkbox {
  padding-left: 8px;
}
.tlui-button__checkbox__indicator {
  width: 15px;
  height: 15px;
}
.tlui-toolbar__lock-button {
  position: absolute;
  top: 4px;
  right: 0;
  pointer-events: all;
  height: 40px;
  width: 40px;
  min-width: 0px;
  border-radius: var(--radius-2);
}
.tlui-toolbar__lock-button:after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
}
.tlui-button__tool {
  position: relative;
  height: 48px;
  width: 48px;
  margin-left: -2px;
  margin-right: -2px;
}
.tlui-button__tool:nth-of-type(1) {
  margin-left: 0;
}
.tlui-button__tool:nth-last-of-type(1) {
  margin-right: 0;
}
.tlui-button__tool:after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 8px;
}
.tlui-button__tool[aria-pressed="true"] {
  color: var(--color-selected-contrast);
}
.tlui-button__tool[aria-pressed="true"]:not(:disabled, :focus-visible):active {
  color: var(--color-selected-contrast);
}
.tlui-button__tool[aria-pressed="true"]:not(:disabled):after {
  background: var(--color-selected);
  opacity: 1;
}
.tlui-layout__mobile .tlui-button__tool {
  height: 48px;
  width: 43px;
}
.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
  height: 16px;
  width: 16px;
}
.tlui-buttons__horizontal {
  display: flex;
  flex-direction: row;
}
.tlui-buttons__horizontal > * {
  margin-left: -2px;
  margin-right: -2px;
}
.tlui-buttons__horizontal > *:nth-child(1) {
  margin-left: 0;
}
.tlui-buttons__horizontal > *:nth-last-child(1) {
  margin-right: 0;
}
.tlui-buttons__grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-auto-flow: row;
  overflow: hidden;
}
.tlui-buttons__grid > .tlui-button {
  margin: -2px;
}
.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
  margin-right: 0;
}
.tlui-buttons__grid > .tlui-button:nth-of-type(4n-3) {
  margin-left: 0;
}
.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
  margin-top: 0;
}
.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
  margin-bottom: 0;
}
.tlui-zoom-menu__button {
  width: 60px;
  min-width: 60px;
  text-align: center;
}
.tlui-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0px, 1fr) auto;
  grid-auto-rows: auto;
  height: 100%;
  max-height: 100%;
  overflow: clip;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  contain: strict;
  z-index: var(--layer-panels);
  transform: translateZ(0);
  --sab: env(safe-area-inset-bottom);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: antialiased;
  text-rendering: optimizeLegibility;
}
.tlui-layout__top {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  min-width: 0px;
  justify-content: space-between;
}
.tlui-layout__top__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 0 1 0;
}
.tlui-layout__top__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100%;
  flex: 0 0 auto;
  min-width: 0px;
}
.tlui-scrollable,
.tlui-scrollable * {
  pointer-events: all;
  touch-action: auto;
  overscroll-behavior: none;
}
.tlui-helper-buttons {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: min-content;
  gap: var(--space-3);
  margin: var(--space-2) var(--space-3);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--layer-panels);
}
.tlui-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
}
.tlui-icon__placeholder {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: transparent;
}
.tlui-icon__small {
  width: 15px;
  height: 15px;
}
.tlui-slider__container {
  width: 100%;
  padding: 0px var(--space-4);
}
.tlui-slider {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  width: 100%;
}
.tlui-slider__track {
  position: relative;
  flex-grow: 1;
  height: 44px;
  cursor: pointer;
}
.tlui-slider__track:after {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  content: "";
  height: 3px;
  width: 100%;
  background-color: var(--color-muted-1);
  border-radius: 14px;
}
.tlui-slider__range {
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  height: 3px;
  background-color: var(--color-selected);
  border-radius: 14px;
}
.tlui-slider__thumb {
  all: unset;
  cursor: grab;
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
  top: -1px;
  background-color: var(--color-panel);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--color-text-1);
}
.tlui-slider__thumb:active {
  cursor: grabbing;
  box-shadow:
    inset 0 0 0 2px var(--color-text-1),
    var(--shadow-1);
}
.tlui-input {
  background: none;
  margin: 0;
  position: relative;
  z-index: var(--layer-above);
  height: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12px;
  font-weight: inherit;
  color: var(--color-text-1);
  padding: var(--space-4);
  padding-left: 0;
  border: none;
  outline: none;
  text-overflow: ellipsis;
  width: 100%;
  user-select: all;
  text-rendering: optimizeLegibility;
  -webkit-user-select: auto !important;
}
.tlui-input__wrapper {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text);
}
.tlui-input__wrapper > .tlui-icon {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  @supports (-webkit-touch-callout: none) {
    .tlui-input {
      font-size: 16px;
    }
  }
}
.tlui-kbd {
  font-family: inherit;
  font-size: 11px;
  line-height: 11px;
  display: grid;
  justify-items: center;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-auto-columns: minmax(1em, auto);
  align-self: bottom;
  color: currentColor;
  margin-left: var(--space-4);
}
.tlui-kbd > span {
  width: 100%;
  text-align: center;
  display: inline;
  margin: 0;
  padding: 2px;
  border-radius: 2px;
}
.tlui-kbd > span:last-child {
  padding-right: 0;
}
.tlui-kbd:not(:last-child) {
  margin-right: var(--space-2);
}
.tlui-focus-button {
  z-index: var(--layer-panels);
  pointer-events: all;
}
.tlui-menu:empty {
  display: none;
}
.tlui-menu {
  z-index: var(--layer-menus);
  height: fit-content;
  width: fit-content;
  border-radius: var(--radius-3);
  pointer-events: all;
  touch-action: auto;
  overflow-y: auto;
  overscroll-behavior: none;
  background-color: var(--color-panel);
  box-shadow: var(--shadow-3);
}
.tlui-menu::-webkit-scrollbar {
  display: none;
}
.tlui-menu__group {
  width: 100%;
}
.tlui-menu__group:empty {
  display: none;
}
.tlui-menu__group {
  border-bottom: 1px solid var(--color-divider);
}
.tlui-menu__group:nth-last-of-type(1) {
  border-bottom: none;
}
.tlui-menu__submenu__trigger[data-state="open"]:after {
  opacity: 1;
  background: linear-gradient(
    90deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
}
.tlui-menu__submenu__trigger[data-direction="left"][data-state="open"]:after {
  opacity: 1;
  background: linear-gradient(
    270deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
}
@media (hover: hover) {
  .tlui-menu__submenu__trigger[data-state="open"]:not(:hover):after {
    opacity: 1;
    background: linear-gradient(
      90deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
  }
  .tlui-menu__submenu__trigger[data-direction="left"][data-state="open"]:not(
      :hover
    ):after {
    opacity: 1;
    background: linear-gradient(
      270deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
  }
}
.tlui-menu[data-size="large"] > .tlui-menu__group {
  min-width: initial;
}
.tlui-menu[data-size="medium"] > .tlui-menu__group {
  min-width: 144px;
}
.tlui-menu[data-size="small"] > .tlui-menu__group {
  min-width: 96px;
}
.tlui-menu[data-size="tiny"] > .tlui-menu__group {
  min-width: 0px;
}
.tlui-menu-click-capture {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--layer-menu-click-capture);
}
.tlui-popover {
  position: relative;
  display: flex;
  align-content: stretch;
}
.tlui-popover__content {
  position: relative;
  max-height: calc(var(--radix-popover-content-available-height) - 8px);
  margin: 0;
  border: none;
  border-radius: var(--radius-3);
  background-color: var(--color-panel);
  box-shadow: var(--shadow-3);
  z-index: var(--layer-menus);
  overflow: hidden;
  overflow-y: auto;
  touch-action: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tlui-menu-zone {
  position: relative;
  z-index: var(--layer-panels);
  width: fit-content;
  border-right: 2px solid var(--color-background);
  border-bottom: 2px solid var(--color-background);
  border-bottom-right-radius: var(--radius-4);
  background-color: var(--color-low);
}
.tlui-menu-zone *[data-state="open"]:after {
  background: linear-gradient(
    180deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
  opacity: 1;
}
@media (hover: hover) {
  .tlui-menu-zone *[data-state="open"]:not(:hover):after {
    background: linear-gradient(
      180deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
    opacity: 1;
  }
}
.tlui-page-menu__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 260px;
  height: fit-content;
  max-height: 50vh;
}
.tlui-page-menu__trigger {
  width: auto;
}
.tlui-page-menu__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
  margin-right: -4px;
}
.tlui-page-menu__header__title {
  color: var(--color-text);
  font-size: 12px;
  flex-grow: 2;
}
.tlui-page-menu__name {
  flex-grow: 2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlui-page-menu__list {
  position: relative;
  flex-direction: column;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: auto;
}
.tlui-page-menu__item {
  position: relative;
}
.tlui-page_menu__item__submenu[data-isediting="true"]
  > .tlui-button[data-state="open"] {
  opacity: 1;
}
@media (hover: hover) {
  .tlui-page-menu__item:hover > .tlui-page_menu__item__submenu > .tlui-button {
    opacity: 1;
  }
}
.tlui-page-menu__item:nth-of-type(n + 2) {
  margin-top: -4px;
}
.tlui-page-menu__item__button {
  width: 100%;
}
.tlui-page-menu__item__button:not(:only-child) {
  flex-grow: 2;
  margin-right: -2px;
}
.tlui-page-menu__item__button > span {
  display: block;
  flex-grow: 2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlui-page-menu__item__button > span {
  padding-right: 28px;
}
@media (hover: hover) {
  .tlui-page-menu__item__button > span {
    padding-right: 0;
  }
  .tlui-page-menu__item:hover > .tlui-page-menu__item__button > span {
    padding-right: 28px;
  }
}
.tlui-page-menu__item__button__checkbox {
  padding-left: 35px;
}
.tlui-page-menu__item__button__check {
  position: absolute;
  left: 0;
  width: 24px;
  padding-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.tlui-page_menu__item__sortable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  z-index: var(--layer-above);
}
.tlui-page_menu__item__sortable__title {
  flex: 1;
}
.tlui-page_menu__item__sortable__title > .tlui-input__wrapper {
  height: 100%;
}
.tlui-page_menu__item__sortable:focus-visible {
  z-index: var(--layer-focused-input);
}
.tlui-page_menu__item__sortable__handle {
  touch-action: none;
  width: 32px;
  min-width: 0px;
  height: 40px;
  cursor: grab;
  color: var(--color-text-3);
  flex-shrink: 0;
  margin-right: -9px;
}
.tlui-page_menu__item__sortable__handle:active {
  cursor: grabbing;
}
.tlui-page-menu__item__input {
  margin-left: 12px;
  height: 100%;
}
.tlui-page_menu__item__submenu {
  pointer-events: all;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  cursor: pointer;
  margin: 0 0 0 -2px;
  z-index: 10;
}
.tlui-page_menu__item__submenu > .tlui-button {
  opacity: 0;
}
.tlui-page_menu__item__sortable:focus-visible
  > .tlui-page_menu__item__submenu
  > .tlui-button,
.tlui-page_menu__item__submenu[data-isediting="true"],
.tlui-page_menu__item__submenu > .tlui-button[data-state="open"],
.tlui-page_menu__item__submenu > .tlui-button:focus-visible {
  opacity: 1;
}
.tlui-page_menu__item__submenu > .tlui-button[data-state="open"]:after {
  background: linear-gradient(
    90deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
  opacity: 1;
}
@media (hover: hover) {
  .tlui-page_menu__item__submenu
    > .tlui-button[data-state="open"]:not(:hover):after {
    background: linear-gradient(
      90deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
    opacity: 1;
  }
}
@media (any-pointer: coarse) {
  .tlui-page_menu__item__submenu > .tlui-button {
    opacity: 1;
  }
}
.tlui-button__icon {
  padding: 0;
}
.tlui-page-menu__item__button .tlui-button__icon {
  margin-right: 4px;
}
@media (hover: hover) {
  .tlui-page_menu__item__submenu[data-isediting="true"] > .tlui-button {
    opacity: 0;
  }
  .tlui-page_menu__item__submenu:hover > .tlui-button {
    opacity: 1;
  }
}
.tl-skip-to-main-content {
  position: fixed;
  top: 48px;
  left: -9999px;
  padding: 8px 16px;
  z-index: var(--layer-toasts);
}
.tl-skip-to-main-content:focus {
  left: 8px;
}
.tlui-offline-indicator {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  color: var(--color-text);
  background-color: var(--color-low);
  border: 3px solid var(--color-background);
  padding: 0px var(--space-5);
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  opacity: 0;
  animation: tl-fade-in;
  animation-duration: 0.12s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
.tlui-style-panel__wrapper {
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-3);
  pointer-events: all;
  background-color: var(--color-panel);
  height: fit-content;
  max-height: 100%;
  margin: 4px 8px 8px;
  touch-action: auto;
  overscroll-behavior: none;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--color-text);
}
.tlui-style-panel__wrapper:only-child {
  margin-top: 8px;
}
.tlui-style-panel {
  position: relative;
  z-index: var(--layer-panels);
  pointer-events: all;
  width: 148px;
  max-width: 148px;
}
.tlui-style-panel::-webkit-scrollbar {
  display: none;
}
.tlui-style-panel .tlui-button.select {
  width: 100%;
}
.tlui-style-panel__section {
  display: flex;
  position: relative;
  flex-direction: column;
}
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
  border-bottom: 1px solid var(--color-divider);
}
.tlui-style-panel__section:empty {
  display: none;
}
.tlui-style-panel__section__common:not(:only-child) {
  margin-bottom: 7px;
  border-bottom: 1px solid var(--color-divider);
}
.tlui-style-panel__row {
  display: flex;
}
.tlui-style-panel__row__extra-button {
  margin-left: -2px;
}
.tlui-style-panel__double-select-picker {
  display: flex;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-left: var(--space-4);
  color: var(--color-text-1);
  font-size: 12px;
}
.tlui-style-panel__double-select-picker-label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 2;
  max-width: 100%;
}
.tlui-style-panel .tlui-button[data-state="open"]:after {
  opacity: 1;
  background: linear-gradient(
    270deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
}
@media (hover: hover) {
  .tlui-style-panel .tlui-button[data-state="open"]:not(:hover):after {
    opacity: 1;
    background: linear-gradient(
      270deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
  }
}
.tlui-layout__bottom {
  grid-row: 2;
}
.tlui-layout__bottom__main {
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tlui-navigation-panel {
  display: flex;
  width: min-content;
  flex-direction: column;
  z-index: var(--layer-panels);
  pointer-events: all;
  position: absolute;
  left: 0;
  bottom: 0;
}
.tlui-navigation-panel:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -2px;
  right: -2px;
  bottom: 0;
  left: 0;
  border-radius: 0;
  border-top: 2px solid var(--color-background);
  border-right: 2px solid var(--color-background);
  border-top-right-radius: var(--radius-4);
  background-color: var(--color-low);
}
.tlui-navigation-panel[data-a11y="true"]:before {
  display: none;
}
.tlui-minimap {
  width: 100%;
  height: 96px;
  min-height: 96px;
  overflow: hidden;
  padding: var(--space-3);
  padding-top: 0;
}
.tlui-minimap__canvas {
  position: relative;
  width: 100%;
  height: 100%;
}
.tlui-toolbar {
  grid-column: 1 / span 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 2;
  padding-bottom: calc(var(--space-3) + var(--sab));
}
.tlui-toolbar__inner {
  position: relative;
  width: fit-content;
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}
.tlui-toolbar__left {
  width: fit-content;
}
.tlui-toolbar__extras {
  position: relative;
  z-index: var(--layer-above);
  width: 100%;
  pointer-events: none;
  top: 6px;
  height: 48px;
}
.tlui-toolbar__extras:empty {
  display: none;
}
.tlui-toolbar__extras__controls {
  display: flex;
  position: relative;
  flex-direction: row;
  z-index: var(--layer-above);
  background-color: var(--color-low);
  border-top-left-radius: var(--radius-4);
  border-top-right-radius: var(--radius-4);
  border: 2px solid var(--color-background);
  margin-left: 8px;
  margin-right: 0;
  pointer-events: all;
  width: fit-content;
}
.tlui-toolbar__tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: var(--radius-4);
  z-index: var(--layer-panels);
  pointer-events: all;
  position: relative;
  background: var(--color-panel);
  box-shadow: var(--shadow-2);
}
.tlui-toolbar__tools__list {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tlui-toolbar__overflow {
  width: 40px;
}
.tlui-layout__mobile .tlui-toolbar__overflow {
  width: 32px;
  padding: 0;
}
.tlui-toolbar *[data-state="open"]:after {
  background: linear-gradient(
    0deg,
    rgba(144, 144, 144, 0) 0%,
    var(--color-muted-2) 100%
  );
  opacity: 1;
}
@media (hover: hover) {
  .tlui-toolbar *[data-state="open"]:not(:hover):after {
    background: linear-gradient(
      0deg,
      rgba(144, 144, 144, 0) 0%,
      var(--color-muted-2) 100%
    );
    opacity: 1;
  }
}
.tlui-layout__mobile .tlui-toolbar {
  transition: transform 0.15s ease-out 0.05s;
}
.tlui-debug-panel {
  background-color: var(--color-low);
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto auto auto;
  justify-content: space-between;
  padding-left: var(--space-4);
  border-top: 1px solid var(--color-background);
  font-size: 12px;
  color: var(--color-text-1);
  z-index: var(--layer-panels);
  pointer-events: all;
}
.tlui-debug-panel__current-state {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tlui-debug-panel__fps {
  margin-right: 8px;
}
.tlui-debug-panel__fps__slow {
  font-weight: 700;
  color: var(--color-danger);
}
.tlui-a11y-audit {
  border-collapse: collapse;
}
.tlui-a11y-audit th,
.tlui-a11y-audit td {
  padding: 8px;
  border: 1px solid var(--color-low-border);
}
.tlui-toast__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  padding: 0px var(--space-3) 64px 0px;
  z-index: var(--layer-toasts);
}
.tlui-toast__viewport > * {
  pointer-events: all;
}
.tlui-toast__icon {
  padding-top: 11px;
  padding-left: var(--space-4);
  color: var(--color-text-1);
}
.tlui-toast__container {
  min-width: 200px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-panel);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-3);
  font-size: 12px;
}
.tlui-toast__container[data-severity="success"] .tlui-icon {
  color: var(--color-success);
}
.tlui-toast__container[data-severity="info"] .tlui-icon {
  color: var(--color-info);
}
.tlui-toast__container[data-severity="warning"] .tlui-icon {
  color: var(--color-warning);
}
.tlui-toast__container[data-severity="error"] .tlui-icon {
  color: var(--color-danger);
}
.tlui-toast__main {
  flex-grow: 2;
  max-width: 280px;
}
.tlui-toast__content {
  padding: var(--space-4);
  display: flex;
  line-height: 1.4;
  flex-direction: column;
  gap: var(--space-3);
}
.tlui-toast__main[data-actions="true"] .tlui-toast__content {
  padding-bottom: var(--space-2);
}
.tlui-toast__title {
  font-weight: 700;
  color: var(--color-text-1);
  line-height: 16px;
}
.tlui-toast__description {
  color: var(--color-text-1);
  padding: var(--space-3);
  margin: 0;
  padding: 0;
}
.tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
  padding-left: 0;
}
.tlui-toast__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 0;
}
.tlui-toast__close {
  align-self: flex-end;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tlui-toast__container[data-state="open"] {
    animation: tlui-slide-in 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
  .tlui-toast__container[data-state="closed"] {
    animation: tlui-fade-out 0.1s ease-in;
  }
  .tlui-toast__container[data-swipe="move"] {
    transform: translate(var(--radix-toast-swipe-move-x));
  }
  .tlui-toast__container[data-swipe="cancel"] {
    transform: translate(0);
    transition: transform 0.2s ease-out;
  }
  .tlui-toast__container[data-swipe="end"] {
    animation: tlui-slide-out 0.1s ease-out;
  }
}
.tlui-dialog__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--layer-canvas-overlays);
  background-color: var(--color-overlay);
  pointer-events: all;
  animation: tl-fade-in 0.12s ease-out;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 0px var(--space-3);
}
.tlui-dialog__content {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: default;
  background-color: var(--color-panel);
  box-shadow: var(--shadow-3);
  border-radius: var(--radius-3);
  font-size: 12px;
  overflow: hidden;
  min-width: 300px;
  max-width: 100%;
  max-height: 80%;
}
.tlui-dialog__header {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0;
  z-index: var(--layer-header-footer);
  padding-left: var(--space-4);
  color: var(--color-text);
  height: 40px;
}
.tlui-dialog__header__title {
  flex: 1;
  font-weight: inherit;
  font-size: 12px;
  margin: 0;
  color: var(--color-text-1);
}
.tlui-dialog__header__close {
  justify-self: flex-end;
}
.tlui-dialog__body {
  padding: var(--space-4) var(--space-4);
  flex: 0 1;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--color-text-1);
  user-select: all;
  -webkit-user-select: text;
}
.tlui-dialog__body a {
  color: var(--color-selected);
}
.tlui-dialog__body ul,
.tlui-dialog__body ol {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tlui-dialog__footer {
  position: relative;
  min-height: 12px;
  z-index: var(--layer-header-footer);
}
.tlui-dialog__footer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) {
  margin-right: -4px;
}
.tlui-edit-link-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text);
}
.tlui-edit-link-dialog__input {
  background-color: var(--color-muted-2);
  flex-grow: 2;
  border-radius: var(--radius-2);
  padding: 0px var(--space-4);
}
.tlui-embed__spacer {
  flex-grow: 2;
  min-height: 0px;
  margin-left: calc(-1 * var(--space-4));
  margin-top: calc(-1 * var(--space-4));
  pointer-events: none;
}
.tlui-embed-dialog__list {
  display: flex;
  flex-direction: column;
  padding: 0px var(--space-3) var(--space-4) var(--space-3);
}
.tlui-embed-dialog__item__image {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--color-selected-contrast);
  border-radius: var(--radius-1);
}
.tlui-embed-dialog__enter {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text-1);
}
.tlui-embed-dialog__input {
  background-color: var(--color-muted-2);
  flex-grow: 2;
  border-radius: var(--radius-2);
  padding: 0px var(--space-4);
}
.tlui-embed-dialog__warning {
  color: var(--color-danger);
  text-shadow: none;
}
.tlui-embed-dialog__instruction__link {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.tlui-embed-dialog__enter a {
  color: var(--color-text-1);
}
.tlui-shortcuts-dialog__header {
  border-bottom: 1px solid var(--color-divider);
}
.tlui-shortcuts-dialog__body {
  position: relative;
  columns: 3;
  column-gap: var(--space-9);
  pointer-events: all;
  touch-action: auto;
  overflow-x: auto;
}
.tlui-shortcuts-dialog__body__tablet {
  columns: 2;
}
.tlui-shortcuts-dialog__body__mobile {
  columns: 1;
}
.tlui-shortcuts-dialog__group {
  break-inside: avoid-column;
  padding-bottom: var(--space-6);
}
.tlui-shortcuts-dialog__group__title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  color: var(--color-text-3);
  height: 32px;
  display: flex;
  align-items: center;
}
.tlui-shortcuts-dialog__group__content {
  display: flex;
  flex-direction: column;
  color: var(--color-text-1);
}
.tlui-shortcuts-dialog__key-pair {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  height: 32px;
}
.tlui-shortcuts-dialog__key-pair__key {
  flex: 1;
  font-size: 12px;
}
.tlui-language-menu {
  max-height: 500px;
}
.tlui-language-menu:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(
    to bottom,
    var(--color-panel-transparent) 0%,
    var(--color-panel) 90%,
    var(--color-panel) 100%
  );
  border-bottom-left-radius: var(--radius-3);
  border-bottom-right-radius: var(--radius-3);
  pointer-events: none;
}
.tlui-actions-menu {
  max-height: calc(100vh - 150px);
}
.tlui-help-menu {
  pointer-events: all;
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  z-index: var(--layer-panels);
  border: 2px solid var(--color-background);
  border-radius: 100%;
}
.tlui-share-zone {
  padding: 2px 4px 0 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  z-index: var(--layer-panels);
  align-items: center;
}
.tlui-people-menu__avatars-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: all;
  border-radius: var(--radius-1);
  padding-right: 1px;
  height: 100%;
}
.tlui-people-menu__avatars {
  display: flex;
  flex-direction: row;
}
.tlui-people-menu__avatar {
  height: 24px;
  width: 24px;
  border: 2px solid var(--color-background);
  background-color: var(--color-low);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--color-selected-contrast);
  z-index: 2;
}
.tlui-people-menu__avatar:nth-of-type(n + 2) {
  margin-left: -12px;
}
.tlui-people-menu__avatars-button[data-state="open"] {
  opacity: 1;
}
@media (hover: hover) {
  .tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
    border-color: var(--color-low);
  }
}
.tlui-people-menu__more {
  min-width: 0px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-1);
  font-family: inherit;
  padding: 0 4px;
}
.tlui-people-menu__more:after {
  border-radius: var(--radius-2);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.tlui-people-menu__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
  height: fit-content;
  max-height: 50vh;
}
.tlui-people-menu__section {
  position: relative;
  flex-direction: column;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: auto;
}
.tlui-people-menu__section:first-child,
.tlui-people-menu__section:last-child {
  flex-shrink: 0;
}
.tlui-people-menu__section:not(:last-child) {
  border-bottom: 1px solid var(--color-divider);
}
.tlui-people-menu__user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tlui-people-menu__user__color {
  flex-shrink: 0;
}
.tlui-people-menu__user__name {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text-1);
  max-width: 100%;
  flex-grow: 1;
  flex-shrink: 100;
}
.tlui-people-menu__user__label {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text-3);
  flex-grow: 100;
  flex-shrink: 0;
  margin-left: 4px;
}
.tlui-people-menu__user__input {
  flex-grow: 2;
  height: 100%;
  padding: 0;
  margin: 0;
}
.tlui-people-menu__user > .tlui-input__wrapper {
  width: auto;
  display: flex;
  align-items: auto;
  flex-grow: 2;
  gap: 8px;
  height: 100%;
  padding: 0;
}
.tlui-people-menu__item {
  position: relative;
}
.tlui-people-menu__item:last-of-type .tlui-button__menu {
  margin-bottom: 0;
}
.tlui-people-menu__item__button {
  padding: 0 11px;
  overflow: hidden;
}
.tlui-people-menu__item > .tlui-button__menu {
  width: auto;
  display: flex;
  align-items: auto;
  justify-content: flex-start;
  flex-grow: 2;
  gap: 11px;
}
.tlui-people-menu__name {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tlui-people-menu__item__follow {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 40px;
  flex-shrink: 0;
}
.tlui-people-menu__item[data-follow="true"],
.tlui-people-menu__item:has(.tlui-button:focus-visible) {
  padding-right: 36px;
}
.tlui-people-menu__item[data-follow="true"] .tlui-people-menu__item__follow,
.tlui-people-menu__item:has(.tlui-button:focus-visible)
  .tlui-people-menu__item__follow {
  opacity: 1;
}
@media (hover: hover) {
  .tlui-people-menu__item__follow {
    opacity: 0;
  }
  .tlui-people-menu__item:hover {
    padding-right: 36px;
  }
  .tlui-people-menu__item:hover .tlui-people-menu__item__follow {
    opacity: 1;
  }
}
.tlui-following-indicator {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-width: 2px;
  border-style: solid;
  z-index: var(--layer-following-indicator);
  pointer-events: none;
}
.tlui-contextual-toolbar {
  position: absolute;
}
.tlui-contextual-toolbar,
.tlui-contextual-toolbar * {
  pointer-events: all;
}
.tlui-contextual-toolbar [data-isactive="true"]:after {
  background-color: var(--color-muted-2);
  opacity: 1;
}
.tlui-contextual-toolbar {
  opacity: 0;
  transition: opacity 0.08s ease-in-out;
}
.tlui-contextual-toolbar,
.tlui-contextual-toolbar * {
  pointer-events: none;
}
.tlui-contextual-toolbar[data-visible="true"] {
  opacity: 1;
  z-index: var(--layer-menus);
}
.tlui-contextual-toolbar[data-interactive="true"],
.tlui-contextual-toolbar[data-interactive="true"] * {
  pointer-events: all;
}
.tlui-rich-text__toolbar-link-input {
  margin-left: 12px;
  width: 148px;
}
.tlui-media__toolbar-alt-text-input {
  margin-left: 12px;
  min-width: 200px;
}
.tlui-contextual-toolbar .tlui-input__wrapper {
  height: 40px;
}
.tlui-image__toolbar .tlui-slider__container {
  width: 125px;
}
.tlui-image__toolbar .tlui-slider {
  height: 100%;
}
.tlui-image__toolbar .tlui-slider__track {
  height: 32px;
}
.tlui-image__toolbar .tlui-slider__thumb {
  width: 14px;
  height: 14px;
}
@keyframes tlui-fade-out {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes tlui-slide-in {
  0% {
    transform: translate(calc(100% + var(--space-3)));
  }
  to {
    transform: translate(0);
  }
}
@keyframes tlui-slide-out {
  0% {
    transform: translate(var(--radix-toast-swipe-end-x));
  }
  to {
    transform: translate(calc(100% + var(--space-3)));
  }
}
.hogi-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}
.hogi-canvas-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: none;
  background:
    radial-gradient(circle at center, #272929 1px, transparent 1px), #0a0a0b;
  background-position:
    0 0,
    0 0;
  background-size:
    20px 20px,
    100% 100%;
}
.hogi-canvas-drawer .tl-background {
  background-color: transparent;
}
.hogi-canvas-drawer .tl-bounds,
.hogi-canvas-drawer .tl-bounds-bg,
.hogi-canvas-drawer .tl-selection,
.hogi-canvas-drawer .tl-brush {
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hogi-canvas-drawer .tl-bounds {
  border-width: 0 !important;
}
.hogi-canvas-drawer .tl-html-container {
  outline: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
.hogi-canvas-drawer .tl-shape,
.hogi-canvas-drawer .tl-html-container.hogi-role-card,
.hogi-canvas-drawer .tl-html-container [class*="hogi-role-card"] {
  pointer-events: auto !important;
}
.hogi-canvas-drawer [class*="tl-indicator"] {
  stroke: transparent !important;
  fill: transparent !important;
}
.hogi-canvas-drawer [class*="tl-selected"] {
  outline: none !important;
  box-shadow: none !important;
}
.hogi-canvas-drawer .tl-handle,
.hogi-canvas-drawer .tl-rotate-handle,
.hogi-canvas-drawer .tl-handle-bg,
.hogi-canvas-drawer .tl-handle-fg {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hogi-canvas-drawer .tlui-navigation-panel {
  display: none !important;
}
.hogi-canvas-drawer .tlui-contextual-toolbar,
.hogi-canvas-drawer .tlui-toolbar-container {
  z-index: 100000 !important;
}
.hogi-canvas-drawer .tlui-menu,
.hogi-canvas-drawer .tlui-context-menu,
.hogi-canvas-drawer .tlui-menu-panel,
.hogi-canvas-drawer [data-testid="context-menu"],
.hogi-canvas-drawer [data-testid="menu-panel"] {
  display: none !important;
  visibility: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hogi-audio-card {
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
  pointer-events: all;
}
.hogi-audio-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.hogi-audio-card-header-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #ef319f;
}
.hogi-audio-card-header-name {
  line-height: 20px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  white-space: nowrap;
}
.hogi-audio-card-header-btn {
  margin-left: auto;
  padding: 10px;
  border-radius: 50%;
  background-color: #1a1d1f;
  opacity: 0;
  cursor: pointer;
  color: #fff;
  transform: translate3d(100%, 0, 0) scale(0.2);
  transition: all 0.3s;
}
.hogi-audio-card-header-btn:hover {
  color: #3c9;
}
.hogi-audio-card-node {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 16px 0 0 60px;
  padding: 10px;
  border: 2px solid #b0b0b0;
  border-radius: 15px;
  width: 380px;
  height: 70px;
  background: #232425;
  background-color: #696969;
}
.hogi-audio-card-node-item {
  border-radius: 2px;
  width: 4px;
  min-height: 4px;
  max-height: 45px;
  background: linear-gradient(to top, #fff, #ccc);
  transform-origin: center bottom;
  animation: audio-card-wave 1.5s ease-in-out infinite;
}
.hogi-audio-card-node .bar-1 {
  height: 29px;
  animation-duration: 2s;
  animation-delay: 346ms;
}
.hogi-audio-card-node .bar-2 {
  height: 13px;
  animation-duration: 1.75s;
  animation-delay: 612ms;
}
.hogi-audio-card-node .bar-3 {
  height: 13px;
  animation-duration: 1.11s;
  animation-delay: 407ms;
}
.hogi-audio-card-node .bar-4 {
  height: 19px;
  animation-duration: 1.8s;
  animation-delay: 451ms;
}
.hogi-audio-card-node .bar-5 {
  height: 25px;
  animation-duration: 1.95s;
  animation-delay: 755ms;
}
.hogi-audio-card-node .bar-6 {
  height: 8px;
  animation-duration: 1.18s;
  animation-delay: 491ms;
}
.hogi-audio-card-node .bar-7 {
  height: 26px;
  animation-duration: 1.27s;
  animation-delay: 304ms;
}
.hogi-audio-card-node .bar-8 {
  height: 31px;
  animation-duration: 1.48s;
  animation-delay: 344ms;
}
.hogi-audio-card-node .bar-9 {
  height: 43px;
  animation-duration: 1.35s;
  animation-delay: 193ms;
}
.hogi-audio-card-node .bar-10 {
  height: 9px;
  animation-duration: 1.79s;
  animation-delay: 251ms;
}
.hogi-audio-card-node .bar-11 {
  height: 35px;
  animation-duration: 1.09s;
  animation-delay: 78ms;
}
.hogi-audio-card-node .bar-12 {
  height: 35px;
  animation-duration: 1.3s;
  animation-delay: 111ms;
}
.hogi-audio-card-node .bar-13 {
  height: 25px;
  animation-duration: 1.32s;
  animation-delay: 641ms;
}
.hogi-audio-card-node .bar-14 {
  height: 34px;
  animation-duration: 1.86s;
  animation-delay: 0.8s;
}
.hogi-audio-card-node .bar-15 {
  height: 10px;
  animation-duration: 1.7s;
  animation-delay: 947ms;
}
.hogi-audio-card-node .bar-16 {
  height: 30px;
  animation-duration: 1.47s;
  animation-delay: 246ms;
}
.hogi-audio-card-node .bar-17 {
  height: 44px;
  animation-duration: 1.63s;
  animation-delay: 268ms;
}
.hogi-audio-card-node .bar-18 {
  height: 34px;
  animation-duration: 1.9s;
  animation-delay: 654ms;
}
.hogi-audio-card-node .bar-19 {
  height: 12px;
  animation-duration: 1.45s;
  animation-delay: 438ms;
}
.hogi-audio-card-node .bar-20 {
  height: 10px;
  animation-duration: 1.42s;
  animation-delay: 846ms;
}
.hogi-audio-card-node .bar-21 {
  height: 9px;
  animation-duration: 1.08s;
  animation-delay: 758ms;
}
.hogi-audio-card-node .bar-22 {
  height: 9px;
  animation-duration: 1.74s;
  animation-delay: 1s;
}
.hogi-audio-card-node .bar-23 {
  height: 28px;
  animation-duration: 1.92s;
  animation-delay: 871ms;
}
.hogi-audio-card-node .bar-24 {
  height: 30px;
  animation-duration: 1.98s;
  animation-delay: 0.36s;
}
.hogi-audio-card-node .bar-25 {
  height: 16px;
  animation-duration: 1.61s;
  animation-delay: 709ms;
}
.hogi-audio-card-node .bar-26 {
  height: 1px;
  animation-duration: 1.55s;
  animation-delay: 405ms;
}
.hogi-audio-card-node .bar-27 {
  height: 9px;
  animation-duration: 1.11s;
  animation-delay: 0.4s;
}
.hogi-audio-card-node .bar-28 {
  height: 1px;
  animation-duration: 1.71s;
  animation-delay: 945ms;
}
.hogi-audio-card-node .bar-29 {
  height: 40px;
  animation-duration: 1.77s;
  animation-delay: 935ms;
}
.hogi-audio-card-node .bar-30 {
  height: 36px;
  animation-duration: 1.81s;
  animation-delay: 678ms;
}
.hogi-audio-card-node .bar-31 {
  height: 9px;
  animation-duration: 1.27s;
  animation-delay: 375ms;
}
.hogi-audio-card-node .bar-32 {
  height: 14px;
  animation-duration: 1.95s;
  animation-delay: 507ms;
}
.hogi-audio-card-node .bar-33 {
  height: 20px;
  animation-duration: 1.37s;
  animation-delay: 704ms;
}
.hogi-audio-card-node .bar-34 {
  height: 41px;
  animation-duration: 1.51s;
  animation-delay: 273ms;
}
.hogi-audio-card-node .bar-35 {
  height: 37px;
  animation-duration: 1.95s;
  animation-delay: 0.9s;
}
.hogi-audio-card-node .bar-36 {
  height: 28px;
  animation-duration: 1.31s;
  animation-delay: 791ms;
}
.hogi-audio-card-node .bar-37 {
  height: 45px;
  animation-duration: 1.82s;
  animation-delay: 732ms;
}
.hogi-audio-card-node .bar-38 {
  height: 23px;
  animation-duration: 1.91s;
  animation-delay: 408ms;
}
.hogi-audio-card-node .bar-39 {
  height: 31px;
  animation-duration: 1.67s;
  animation-delay: 1s;
}
.hogi-audio-card-node .bar-40 {
  height: 8px;
  animation-duration: 1.76s;
  animation-delay: 645ms;
}
@keyframes audio-card-wave {
  0%,
  to {
    opacity: 0.7;
    transform: scaleY(0.3);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.hogi-role-card {
  --role-card-toolbar-height: 56px;
  position: relative;
  padding: 20px;
  border-radius: 32px;
  width: fit-content;
  height: fit-content;
  min-height: 100%;
  background-color: #ffffff0a;
  pointer-events: all;
}
.hogi-role-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.hogi-role-card-header-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #ef319f;
}
.hogi-role-card-header-name {
  line-height: 20px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  white-space: nowrap;
}
.hogi-role-card-add-asset-wrapper {
  visibility: hidden;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1001;
  opacity: 0;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
}
.hogi-role-card-node {
  margin-top: 16px;
  border-radius: 16px;
  width: 100%;
  height: fit-content;
}
.hogi-role-card-node-detail {
  display: grid;
  grid-template-columns: repeat(var(--role-card-grid-cols, 3), 1fr);
  gap: 15px;
  row-gap: 100px;
  margin: 10px 0 0;
  opacity: 1;
  transition: all 0.3s;
}
.hogi-role-card-node-detail.active {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.hogi-role-card-node-detail-item {
  box-sizing: border-box;
  border: none;
  width: 100%;
  background-color: transparent;
}
.hogi-role-card-node-detail-cover-wrap {
  position: relative;
}
.hogi-role-card-node-detail-opt {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;
  gap: 10px;
  opacity: 0.9;
  transition: all 0.2s;
}
.hogi-role-card-node-detail-opt-item {
  padding: 6px;
  border-radius: 50%;
  background-color: #1a1d1f;
  cursor: pointer;
  color: #fff;
}
.hogi-role-card-node-detail-opt-item:hover {
  color: #66f;
}
.hogi-role-card-node-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
}
.hogi-role-card-node-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border-radius: 12px;
  width: 680px;
  height: 150px;
  background-color: #1a1d1f;
  color: #fff;
}
.hogi-role-card-node-detail-header-content {
  flex: 1;
  margin-right: 20px;
  height: 110px;
}
.hogi-role-card-node-detail-title {
  margin: 0 0 6px;
  height: 24px;
  line-height: 24px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.hogi-role-card-node-detail-title-input {
  margin: 0 0 6px;
  padding: 0;
  border: none;
  width: 100%;
  height: 24px;
  outline: none;
  background: transparent;
  line-height: 24px;
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.hogi-role-card-node-detail-title-input::placeholder {
  color: #ffffff80;
}
.hogi-role-card-node-detail-title-input:focus {
  color: #fff;
}
.hogi-role-card-node-detail-desc {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  max-width: 660px;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  line-height: 1.6;
  font-family: inherit;
  font-size: 14px;
  color: #c9c9c9;
  overscroll-behavior: contain;
}
.hogi-role-card-node-detail-desc::-webkit-scrollbar {
  width: 4px;
}
.hogi-role-card-node-detail-desc::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-role-card-node-detail-desc::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff4d;
}
.hogi-role-card-node-detail-desc::-webkit-scrollbar-thumb:hover {
  background: #ffffff80;
}
.hogi-role-card-node-detail-desc-input {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 660px;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  outline: none;
  background: transparent;
  resize: none;
  line-height: 1.6;
  font-family: inherit;
  font-size: 14px;
  color: #c9c9c9;
  overscroll-behavior: contain;
}
.hogi-role-card-node-detail-desc-input::-webkit-scrollbar {
  width: 4px;
}
.hogi-role-card-node-detail-desc-input::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-role-card-node-detail-desc-input::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff4d;
}
.hogi-role-card-node-detail-desc-input::-webkit-scrollbar-thumb:hover {
  background: #ffffff80;
}
.hogi-role-card-node-detail-desc-input::placeholder {
  color: #fff6;
}
.hogi-role-card-node-detail-desc-input:focus {
  color: #c9c9c9;
}
.hogi-role-card-node-detail-panels {
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 18px;
  width: fit-content;
}
.hogi-role-card-node-detail-left {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--role-card-toolbar-height);
  width: fit-content;
}
.hogi-role-card-node-detail-left-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  width: fit-content;
  height: 433px;
  background: #1a1a1a;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hogi-role-card-node-detail-left-wrap:hover:not(.role-in-assets)
  .img-loader-with-history
  .main-image {
  border: 3px solid var(--primary-border, #ef319f);
}
.hogi-role-card-node-detail-left-wrap .img-loader-with-history .main-image {
  border: 3px solid transparent;
  transition: border 0.3s ease-in-out;
}
.hogi-role-card-node-detail-left-wrap.role-highlighted
  .img-loader-with-history
  .main-image {
  border: 3px solid var(--primary-border, #ef319f);
}
.hogi-role-card-node-detail-left-cover {
  height: 100%;
  object-fit: cover;
}
.hogi-role-card-node-detail-left-wrap:not(.role-in-assets)
  .img-loader-with-history
  .main-image:hover
  .hogi-img-loader-cover {
  transform: none !important;
}
.hogi-role-card-node-detail .hogi-role-card-add-asset-wrapper {
  visibility: visible;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.hogi-role-card-node-detail
  .hogi-role-card-add-asset-wrapper:has(.hogi-role-sync-asset-button),
.hogi-role-card-node-detail
  .hogi-role-card-add-asset-wrapper:has(.hogi-role-add-asset-button) {
  right: 6px;
  bottom: 8px;
}
.hogi-role-card-node-detail-left-opt {
  display: none;
  justify-content: flex-start;
  margin-top: 8px;
  width: 100%;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}
.hogi-role-card-node-detail-left-opt.visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hogi-role-card-node-detail-left-opt .hogi-role-card-node-detail-opt-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  color: #ffffff91;
}
.hogi-role-card-node-detail-left-opt
  .hogi-role-card-node-detail-opt-item:hover {
  color: #fff;
}
.hogi-role-card-node-detail-right {
  padding-bottom: var(--role-card-toolbar-height);
  width: fit-content;
}
.hogi-role-card-node-detail-right-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  width: fit-content;
  height: 433px;
  background: #1a1a1a;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hogi-role-card-node-detail-right-cover {
  height: 100%;
  object-fit: contain;
}
.hogi-role-card-node-detail-right-opt {
  display: none;
  justify-content: flex-start;
  margin-top: 8px;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}
.hogi-role-card-node-detail-right-opt.visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hogi-role-card-node-detail-right-opt .hogi-role-card-node-detail-opt-item {
  padding: 6px;
  border-radius: 50%;
  background-color: #1a1d1f;
  cursor: pointer;
  color: #fff;
}
.hogi-role-card-node-detail-right-opt
  .hogi-role-card-node-detail-opt-item:hover {
  color: #66f;
}
.hogi-role-card-node-detail-name {
  overflow: hidden;
  padding: 0 10px;
  height: 40px;
  background: linear-gradient(90deg, #050505, #6b6b6b, #2b2b2b);
  line-height: 40px;
  text-overflow: ellipsis;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.hogi-role-card-active {
  z-index: 9999 !important;
}
.hogi-role-card-toolbar-container {
  position: relative;
  width: fit-content;
}
.hogi-role-card-toolbar-wrapper {
  display: flex;
  overflow: visible;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background-color: #232425;
  box-shadow: 0 4px 24px #00000014;
  white-space: nowrap;
}
.hogi-role-card-toolbar .hogi-role-card-node-detail-toolbar {
  overflow: visible;
  position: absolute;
  width: fit-content;
  max-width: none;
  white-space: nowrap;
}
.hogi-role-card-toolbar-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 10px;
  min-width: 64px;
  height: 36px;
  background-color: #ef319f;
  cursor: pointer;
  transition: all 0.2s;
}
.hogi-role-card-toolbar-tab:hover {
  background-color: #ef319f;
  opacity: 0.8;
}
.hogi-role-card-toolbar-tab.saved {
  background-color: #353838;
}
.hogi-role-card-toolbar-tab.saved:hover {
  background-color: #353838;
  opacity: 0.8;
}
.hogi-role-card-toolbar-tab.saved .hogi-role-card-toolbar-save {
  color: #fff7fb;
}
.hogi-role-card-toolbar-tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #f8f7f7;
}
.saved .hogi-role-card-toolbar-tab-icon {
  color: #fff7fb;
}
.hogi-role-card-toolbar-check-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff7fb;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: transparent;
  color: #fff7fb;
}
.hogi-role-card-toolbar-save {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #f8f7f7;
}
.hogi-role-card-toolbar-btn {
  position: relative;
  border-radius: 8px;
  background-color: transparent !important;
}
.hogi-role-card-toolbar-btn:not(:first-of-type):after {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 2px;
  width: 1px;
  height: 18px;
  background-color: #ffffff0f;
  content: "";
  transform: translateY(-50%);
}
.hogi-role-card-toolbar-btn:hover {
  box-shadow: none !important;
}
.hogi-role-card-toolbar-menu {
  display: flex;
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  z-index: 1000;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 16px;
  min-width: 160px;
  background-color: #111213;
  box-shadow: 0 4px 24px #00000014;
}
.hogi-role-card-toolbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.hogi-role-card-toolbar-menu-item:hover {
  background-color: #ffffff1a;
}
.hogi-role-card-toolbar-menu-item svg {
  flex-shrink: 0;
  color: #ffffff91;
}
.hogi-role-card-toolbar-menu-text {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff91;
  white-space: nowrap;
}
.hogi-role-card-image-list {
  overflow: visible;
  position: relative;
  width: 0;
  height: 90px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}
.hogi-role-card-image-list.visible {
  opacity: 1;
  transform: translateY(0);
}
.hogi-role-card-image-list-container {
  display: flex;
  overflow: auto visible;
  gap: 8px;
  padding: 4px 0;
  -webkit-user-select: none;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.hogi-role-card-image-list-container::-webkit-scrollbar {
  width: 1.5px;
  height: 1.5px;
}
.hogi-role-card-image-list-container::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-role-card-image-list-container::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.hogi-role-card-image-list-container::-webkit-scrollbar-thumb:hover {
  background: #fff6;
}
.hogi-role-card-image-list-item {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 86px;
  transition: opacity 0.2s;
}
.hogi-role-card-image-list-item .hogi-role-card-image-list-item-image {
  border: 1px solid transparent;
  opacity: 0.4 !important;
  transition: all 0.2s;
}
.hogi-role-card-image-list-item.visually-selected
  .hogi-role-card-image-list-item-image {
  border: 2px solid #eff0f0;
  border-radius: 8px;
  opacity: 1 !important;
}
.hogi-role-card-image-list-item-wrapper {
  overflow: visible;
  position: relative;
  padding-top: 4px;
  width: 100%;
  height: 100%;
}
.hogi-role-card-image-list-item-image {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  background-color: #353838;
  object-fit: cover;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: all 0.2s ease;
}
.hogi-role-card-image-list-item-check {
  display: flex;
  position: absolute;
  right: -3px;
  top: -1px;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: #eff0f0;
  color: #353838;
}
.hogi-role-card-image-list-item-choose-btn {
  position: absolute;
  left: 50%;
  bottom: 7px;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background-color: #b02779;
  cursor: pointer;
  line-height: 7px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 8px;
  color: #fabde1;
  white-space: nowrap;
  transform: translate(-50%);
  transition: all 0.2s;
}
.hogi-role-card-image-list-item-choose-btn:hover {
  background-color: #9a2068;
}
.hogi-role-add-asset-button {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  outline: none;
  background: #ef319f;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hogi-role-add-asset-button:hover {
  opacity: 0.9;
}
.hogi-role-add-asset-button:active {
  opacity: 0.8;
}
.hogi-role-add-asset-button__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transform: translateY(1px);
}
.hogi-role-add-asset-button__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hogi-role-add-asset-button__label {
  display: inline-block;
  overflow: hidden;
  margin-left: 2px;
  max-width: 140px;
  opacity: 1;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    max-width 0.25s ease,
    margin-left 0.25s ease;
}
.hogi-role-add-asset-button.is-animating .hogi-role-add-asset-button__label {
  margin-left: 0;
  max-width: 0;
  opacity: 0;
}
.hogi-role-add-asset-button.is-animating .hogi-role-add-asset-button__icon {
  transform: translateY(0);
}
.hogi-role-add-asset-button__spinner {
  display: inline-block;
  border: 2px solid rgba(248, 247, 247, 0.35);
  border-top-color: #f8f7f7;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: hogi-spinner-rotate 0.6s linear infinite;
}
@keyframes hogi-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
.hogi-img-loader {
  display: flex;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: flex-start;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hogi-img-loader-loading {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: img-loader-fade-in 0.3s;
}
.hogi-img-loader-loading-spinner {
  animation: img-loader-pulse 2s infinite;
}
.hogi-img-loader-loading-icon {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  animation: img-loader-spin 1.5s linear infinite;
}
.hogi-img-loader-loading-progress {
  overflow: hidden;
  margin-top: 20px;
  border-radius: 2px;
  width: 80%;
  height: 4px;
  background: #ffffff1a;
}
.hogi-img-loader-loading-bar {
  border-radius: 2px;
  height: 100%;
  background: linear-gradient(90deg, #66f, #f66, #3c9);
  animation: img-loader-progress 1s infinite;
}
.hogi-img-loader-empty {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: img-loader-fade-in 0.3s;
}
.hogi-img-loader-empty-icon {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  animation: img-loader-shake 0.5s;
}
.hogi-img-loader-empty-text {
  margin-top: 10px;
  line-height: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: #f90;
}
.hogi-img-loader-error {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: img-loader-fade-in 0.3s;
}
.hogi-img-loader-error-icon {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  animation: img-loader-shake 0.5s;
}
.hogi-img-loader-error-text {
  margin-top: 10px;
  line-height: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #f66;
}
.hogi-img-loader-cover {
  width: 100%;
  height: 100%;
  filter: blur(5px);
  opacity: 0;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.1);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hogi-img-loader-cover.loaded {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
@keyframes img-loader-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes img-loader-progress {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
@keyframes img-loader-pulse {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
@keyframes img-loader-shake {
  0%,
  to {
    transform: translate(0);
  }
  25% {
    transform: translate(-5px);
  }
  75% {
    transform: translate(5px);
  }
}
@keyframes img-loader-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
._modal_14zdb_7 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
}
._wrapper_14zdb_17 {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 20px;
  padding: 20px 28px;
  border-radius: 25px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
}
._title_14zdb_28 {
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  color: #fffc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._body_14zdb_38 {
  word-break: break-all;
}
._handler_14zdb_42 {
  display: flex;
  justify-content: center;
  gap: 10px;
}
._handler_14zdb_42 button {
  min-width: 180px;
}
._button_14zdb_51 {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  border: none;
  border-radius: 15px;
  background-color: #fff3;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
._button_14zdb_51:hover {
  color: var(--primary);
  transform: rotate(1turn);
}
._show_14zdb_73 {
  animation: _fade-in_14zdb_1 var(--modal-duration, 0.3s) both;
}
._show_14zdb_73 ._wrapper_14zdb_17 {
  animation: _slide-in-up_14zdb_1 var(--modal-duration, 0.3s) both;
}
._hide_14zdb_80 {
  animation: _fade-out_14zdb_1 var(--modal-duration, 0.3s) both;
}
._hide_14zdb_80 ._wrapper_14zdb_17 {
  animation: _slide-in-down_14zdb_1 var(--modal-duration, 0.3s) both;
}
@keyframes _fade-in_14zdb_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fade-out_14zdb_1 {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes _slide-in-up_14zdb_1 {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes _slide-in-down_14zdb_1 {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
._button_1mufr_7 {
  position: relative;
  gap: 5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fffc;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
._button_1mufr_7:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._button_1mufr_7:hover ._text_1mufr_24 {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
._loading_1mufr_30 {
  opacity: 0.8;
}
._variant-primary_1mufr_34 {
  background-color: var(--primary);
}
._variant-primary_1mufr_34:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 0 10px var(--primary);
  transform: translateY(-1px);
}
._variant-secondary_1mufr_42 {
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._variant-secondary_1mufr_42:hover {
  border-color: var(--primary);
  background-color: #fff3;
  transform: translateY(-1px);
}
._variant-outline_1mufr_51 {
  border: 1px solid var(--primary);
  background-color: transparent;
  color: var(--primary);
}
._variant-outline_1mufr_51:hover {
  background-color: var(--primary);
  color: #fffc;
  transform: translateY(-1px);
}
._size-sm_1mufr_62 {
  padding: 0 10px;
  height: 30px;
  font-size: 14px;
}
._size-md_1mufr_67 {
  padding: 0 15px;
  height: 40px;
  font-size: 16px;
}
._size-lg_1mufr_72 {
  padding: 0 20px;
  height: 50px;
  font-size: 18px;
}
._icon_1mufr_78 {
  display: flex;
  justify-content: center;
  align-items: center;
}
._icon-loading_1mufr_83 {
  animation: _spin_1mufr_1 1s linear infinite;
}
._content_1mufr_87 {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: currentcolor;
}
._text_1mufr_24 {
  position: absolute;
  z-index: -1;
  padding: 0 10px;
  border-radius: 8px;
  background-color: #fff;
  opacity: 0;
  font-size: 12px;
  color: #000000b3;
  white-space: nowrap;
  transition: all 0.3s;
  height: 25px;
  line-height: 25px;
}
._text_1mufr_24:after {
  position: absolute;
  border: 4px solid transparent;
  content: "";
}
._text-top_1mufr_113 {
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  transform: translate3d(0, 10px, 0);
  translate: -50% 0;
}
._text-top_1mufr_113:after {
  left: 50%;
  top: 100%;
  border-top-color: #fff;
  transform: translate(-50%);
}
._text-bottom_1mufr_126 {
  left: 50%;
  top: 100%;
  margin-top: 5px;
  transform: translate3d(0, -10px, 0);
  translate: -50% 0;
}
._text-bottom_1mufr_126:after {
  left: 50%;
  bottom: 100%;
  border-bottom-color: #fff;
  transform: translate(-50%);
}
@keyframes _spin_1mufr_1 {
  to {
    transform: rotate(1turn);
  }
}
.range-slider {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  display: block;
  position: relative;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}
.range-slider[data-vertical] {
  height: 100%;
  width: 8px;
}
.range-slider[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.range-slider .range-slider__thumb {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #2196f3;
}
.range-slider .range-slider__thumb:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 6px #2196f380;
}
.range-slider[data-vertical] .range-slider__thumb {
  left: 50%;
}
.range-slider .range-slider__thumb[data-disabled] {
  z-index: 2;
}
.range-slider .range-slider__range {
  position: absolute;
  z-index: 1;
  transform: translateY(-50%);
  top: 50%;
  width: 100%;
  height: 100%;
  background: #51adf6;
}
.range-slider[data-vertical] .range-slider__range {
  left: 50%;
  transform: translate(-50%);
}
.range-slider input[type="range"] {
  -webkit-appearance: none;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: transparent;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.range-slider input[type="range"]::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
}
.range-slider input[type="range"]:focus {
  outline: 0;
}
#cut-control-range .range-slider__thumb {
  border-radius: 3px;
  width: 6px;
  height: 25px;
  background-color: #fff;
  cursor: ew-resize;
  transform: translateY(-50%);
}
#cut-control-range .range-slider__thumb:nth-of-type(1) {
  margin-left: -2px;
}
#cut-control-range .range-slider__thumb:nth-of-type(2) {
  margin-left: -4px;
}
#cut-control-range .range-slider__range {
  border: 2px solid #ffebf7;
  border-radius: 10px;
  background: transparent;
}
._cut-editor_13y02_7 {
  position: fixed;
  inset: 0 0 0 var(--chat-width, 570px);
  z-index: 9999;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
._alert_13y02_15 {
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff9;
}
._wrapper_13y02_22 {
  display: flex;
  position: absolute;
  top: 70px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  flex-direction: column;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 25px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._header_13y02_34 {
  display: flex;
  align-items: center;
  gap: 10px;
}
._header-title_13y02_39 {
  font-size: 20px;
  color: #fffc;
}
._header-nav_13y02_43 {
  display: flex;
  position: relative;
  padding: 5px;
  border-radius: 20px;
  background-color: #ffffff1a;
}
._header-nav-item_13y02_50 {
  position: relative;
  z-index: 9;
  border-radius: 20px;
  background-color: transparent;
  transition: all 0.3s;
}
._header-nav-item_13y02_50:hover {
  background-color: transparent;
  box-shadow: 0 0 10px transparent;
}
._header-nav-item-active_13y02_61 {
  background-image: linear-gradient(120deg, #f8a0d3 15%, #9efae0 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
._header-nav-icon_13y02_66 {
  margin-right: 5px;
}
._header-nav-slider_13y02_69 {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 20px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  background-color: #ffffff1a;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._header-nav-slider-video_13y02_79 {
  transform: translate(100%);
}
._header-action_13y02_82 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
._view_13y02_89 {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 15px;
}
._view-figure_13y02_95 {
  overflow: hidden;
  position: relative;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._view-mask_13y02_104 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center/cover;
  filter: blur(30px);
  transition: all 0.3s;
}
._view-media_13y02_111 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
._view-media-item_13y02_115 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center/contain;
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
._view-media-item-active_13y02_127 {
  z-index: 9;
  opacity: 1;
}
._view-media-text_13y02_131 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  color: #fffc;
}
._view-media-btn_13y02_138 {
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: underline;
  font-size: 18px;
  color: #fff;
  transition: all 0.3s;
}
._view-media-btn_13y02_138:hover {
  color: var(--primary);
}
._view-media-btn_13y02_138:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._view-media-res_13y02_155 {
  width: 100%;
  height: 100%;
}
._view-media-mask_13y02_159 {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}
._view-media-mask-text_13y02_169 {
  line-height: 26px;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffb3;
}
._view-media-mask-text-btn_13y02_179 {
  cursor: pointer;
  text-decoration: underline;
  color: #ffffffe8;
  transition: all 0.3s;
}
._view-media-mask-text-btn_13y02_179:hover {
  color: #fff;
}
._view-media-mask-dot_13y02_188 {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.25em;
}
._view-media-mask-dot_13y02_188:after {
  display: block;
  white-space: pre-wrap;
  content: "...\a..\a.";
  animation: _progressing_13y02_1 1s infinite step-start both;
}
._view-frame_13y02_201 {
  display: flex;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 99;
  padding: 1px;
  border-radius: 10px;
  height: 30px;
  background-color: #0000004d;
}
._view-frame-item_13y02_212 {
  gap: 5px;
  padding: 0 20px;
  border: none;
  min-width: 125px;
  height: 28px;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
._view-frame-item_13y02_212:hover,
._view-frame-item-active_13y02_228 {
  color: #fff;
  border-radius: 9px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._view-frame-img_13y02_234 {
  border-radius: 5px;
  object-fit: cover;
  width: 15px;
  height: 15px;
}
._view-history_13y02_240 {
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 10px;
  z-index: 99;
  align-items: flex-start;
  gap: 10px;
}
._view-history-btn_13y02_250 {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px;
  background-color: #0000004d !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-size: 11px !important;
}
._view-history-btn_13y02_250 div {
  font-size: 11px !important;
}
._view-history-detail_13y02_260 {
  position: relative;
  margin-left: -10px;
  border-radius: 15px;
  width: 0;
  height: 100%;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  opacity: 0;
  transition: all 0.3s;
}
._view-history-detail_13y02_260::-webkit-scrollbar {
  opacity: 0;
}
._view-history-detail-active_13y02_274 {
  overflow: auto;
  margin-left: 0;
  padding: 15px;
  width: 80px;
  height: 100%;
  opacity: 1;
}
._view-history-detail-container_13y02_282 {
  overflow: auto;
  box-sizing: border-box;
  padding-bottom: 60px;
  height: 100%;
}
._view-history-detail-item_13y02_288 {
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #272929;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s;
  width: 50px;
  height: 50px;
}
._view-history-detail-item_13y02_288:not(:first-child) {
  margin-top: 15px;
}
._view-history-detail-item_13y02_288:hover,
._view-history-detail-item-active_13y02_301 {
  border-color: #fabde1;
}
._view-history-detail-item-disabled_13y02_304 {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._view-history-detail-item-mock_13y02_309 {
  background-image: linear-gradient(180deg, #272929, #ffffff1a);
}
._view-history-detail-change_13y02_312 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._view-history-detail-change-btn_13y02_322 {
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  height: 30px;
  background-color: #0000004d !important;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._view-prompt_13y02_334 {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 65px;
  z-index: 99;
  align-items: center;
  gap: 10px;
  padding: 14px 54px 14px 19px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  background-color: #0000004d;
  box-shadow: 0 5px 25px #0000004d;
  -webkit-backdrop-filter: blur(65px);
  backdrop-filter: blur(65px);
  transform: translate(-50%);
  transition: all 0.3s;
  scale: 0;
}
._view-prompt-active_13y02_352 {
  scale: 1;
}
._view-prompt-input_13y02_355 {
  border: none;
  width: 400px;
  height: 25px;
  max-height: 150px;
  background-color: transparent;
  resize: none;
  line-height: 25px;
  font-size: 16px;
  color: #fff;
  transition: all 0.3s;
}
._view-prompt-input_13y02_355::placeholder {
  color: #fff9;
}
._view-prompt-input-active_13y02_370 {
  background-color: #fff3;
}
._view-prompt-btn_13y02_373 {
  position: absolute;
  right: 10px;
  top: 50%;
  border: none;
  border-radius: 10px;
  background-color: var(--primary);
  cursor: pointer;
  color: #fff;
  transform: translateY(-50%);
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
}
._view-prompt-btn-disabled_13y02_390 {
  opacity: 0.4;
  cursor: not-allowed;
}
._view-prompt-hidden_13y02_394 {
  position: absolute !important;
  left: 100%;
  bottom: 100%;
  margin: 0 0 -10px -10px;
  border-radius: 50%;
  width: 25px !important;
  height: 25px !important;
  background-color: #000000b3 !important;
}
._view-desc_13y02_404 {
  display: flex;
  position: absolute;
  right: 10px;
  top: 20px;
  bottom: 20px;
  z-index: 99;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  border-radius: 15px;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: all 0.3s;
}
._view-desc-active_13y02_421 {
  opacity: 1;
  transform: translateZ(0);
}
._view-desc-title_13y02_425 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  line-height: 25px;
  font-size: 18px;
  color: #fffc;
}
._view-desc-btn_13y02_434 {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
._view-desc-btn_13y02_434:first-of-type {
  margin-left: auto;
}
._view-desc-btn_13y02_434:hover {
  color: #fff;
}
._view-desc-btn_13y02_434:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._view-desc-input_13y02_457 {
  flex: 1;
  padding: 4px;
  border: none;
  border-radius: 2px;
  background-color: transparent;
  resize: none;
  line-height: 25px;
  font-size: 16px;
  color: #fff9;
  transition: all 0.3s;
}
._view-desc-input-active_13y02_469 {
  background-color: #ffffff0d;
  caret-color: #fff;
}
._view-action_13y02_473 {
  display: flex;
  position: relative;
  z-index: 9;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
._view-action-video_13y02_481 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: auto;
  transition: all 0.3s;
}
._view-action-video-disabled_13y02_488 {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._view-action-video-btn_13y02_493 {
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
._view-action-video-text_13y02_501 {
  font-size: 14px;
  color: #fffc;
}
._view-action-item_13y02_505 {
  color: #fff9;
  white-space: nowrap;
  transition: all 0.3s;
  border-radius: 10px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._view-action-item_13y02_505:hover,
._view-action-item-active_13y02_513 {
  background-color: #fff3;
  box-shadow: none;
  color: #fff;
}
._view-action-more_13y02_518 {
  position: relative;
}
._view-action-more_13y02_518:hover ._view-action-handler_13y02_521 {
  opacity: 1;
  pointer-events: auto;
}
._view-action-handler_13y02_521 {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  border-radius: 15px;
  background-color: #0000004d;
  box-shadow: 0 5px 25px #0000004d;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  color: #d74c47;
  white-space: nowrap;
  transition: all 0.3s;
}
._view-action-handler_13y02_521:before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
  content: "";
}
._view-action-handler_13y02_521:hover {
  background-color: #ffffff1a;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}
._swiper_13y02_554 {
  margin-top: 20px;
  padding: 10px;
  border-radius: 15px;
  background-color: #ffffff0d;
}
._swiper-detail_13y02_560 {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 4px;
  scroll-snap-type: x mandatory;
}
._swiper-detail_13y02_560::-webkit-scrollbar {
  height: 2px;
}
._swiper-detail_13y02_560::-webkit-scrollbar-track {
  background-color: transparent;
}
._swiper-detail_13y02_560::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: transparent;
}
._swiper-item_13y02_577 {
  scroll-snap-align: start;
  position: relative;
  flex-shrink: 0;
  width: 155px;
}
._swiper-item_13y02_577:hover ._swiper-add_13y02_583 {
  z-index: 9;
  opacity: 1;
}
._swiper-cover_13y02_587 {
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
}
._swiper-cover_13y02_587:hover,
._swiper-cover-active_13y02_592 {
  border-color: #ffebf7;
}
._swiper-mask_13y02_595 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
._swiper-mask-text_13y02_602 {
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  background-color: #00000080;
  font-size: 12px;
  color: #fff9;
  height: 20px;
  line-height: 20px;
}
._swiper-mask-dot_13y02_612 {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.25em;
}
._swiper-mask-dot_13y02_612:after {
  display: block;
  white-space: pre-wrap;
  content: "...\a..\a.";
  animation: _progressing_13y02_1 1s infinite step-start both;
}
._swiper-sound_13y02_625 {
  display: flex;
  position: relative;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 0 5px;
  border-radius: 10px;
  height: 35px;
  background-color: #ffffff1a;
  cursor: pointer;
  font-size: 12px;
  color: #fff9;
  transition: all 0.3s;
}
._swiper-sound_13y02_625:hover ._swiper-sound-action_13y02_640 {
  opacity: 1;
  pointer-events: auto;
}
._swiper-sound-action_13y02_640 {
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
._swiper-sound-btn_13y02_651:first-of-type {
  margin-left: auto;
}
._swiper-sound-btn-delete_13y02_654:hover {
  color: #d74c46 !important;
}
._swiper-sound-volume_13y02_657 {
  position: absolute !important;
  left: 0;
  bottom: 100%;
  background-color: #fff6;
}
._swiper-sound-empty_13y02_663 {
  gap: 5px;
  margin-top: 10px;
  padding: 0 10px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  width: 100%;
  height: 35px;
  background-color: transparent;
  cursor: pointer;
  cursor: default;
  font-size: 12px;
  color: #fff3;
  display: flex;
  justify-content: center;
  align-items: center;
}
._swiper-duration_13y02_680 {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 0 5px;
  border-radius: 5px;
  background-color: #00000080;
  font-size: 12px;
  color: #fff9;
  height: 15px;
  line-height: 15px;
}
._swiper-btn_13y02_692 {
  position: absolute;
  right: 5px;
  top: 5px;
  border: none;
  border-radius: 5px;
  background-color: #00000080;
  cursor: pointer;
  color: #fffc;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
._swiper-btn_13y02_692:hover {
  color: #fff;
}
._swiper-add_13y02_583 {
  position: absolute;
  left: 100%;
  top: 5px;
  z-index: -1;
  margin-left: -10px;
  width: 25px;
  height: 80px;
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
._swiper-add_13y02_583:after {
  border-radius: 1px;
  width: 2px;
  height: 100%;
  background-color: #fff6;
  content: "";
}
._swiper-add-btn_13y02_732 {
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
}
._music_13y02_751 {
  position: relative;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  height: 50px;
  background-color: #ffffff1a;
  font-size: 12px;
  color: #ffffff1a;
  display: flex;
  justify-content: center;
  align-items: center;
}
._music-active_13y02_765 {
  justify-content: flex-start;
  gap: 5px;
  border-style: solid;
  color: #fffc;
  white-space: nowrap;
}
._music-wave_13y02_772 {
  gap: 3px;
  margin-left: 35px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
._music-wave-item_13y02_780 {
  border-radius: 1px;
  width: 2px;
  max-width: 30px;
  min-height: 2px;
  background-color: #fff3;
}
._music-btn_13y02_787 {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
._music-btn_13y02_787:first-of-type {
  margin-left: auto;
}
._music-btn_13y02_787:only-child {
  margin-left: 0;
  width: auto;
}
._music-btn-delete_13y02_799:hover {
  color: #d74c46 !important;
}
._music-volume_13y02_802 {
  position: absolute !important;
  right: 0;
  bottom: 100%;
  width: 280px !important;
  background-color: #fff6;
}
._music-empty_13y02_809 {
  background-color: transparent;
}
._music-empty_13y02_809:hover {
  background-color: transparent;
  box-shadow: none;
}
._cut-video_13y02_817 {
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  width: 860px;
  height: 450px;
}
._cut-video-mask_13y02_825 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center/cover;
  filter: blur(10px);
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
._cut-video-mask-active_13y02_836 {
  z-index: 99;
}
._cut-video-container_13y02_839 {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
}
._cut-video-loader_13y02_845 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  margin: -15px 0 0 -15px;
  animation: _spin_13y02_1 1s linear infinite;
}
._cut-control_13y02_853 {
  display: flex;
  position: relative;
  z-index: 9;
  align-items: center;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  height: 60px;
  transition: all 0.3s;
}
._cut-control-disabled_13y02_864 {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._cut-control-btn_13y02_869 {
  border: none;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
}
._cut-control-btn_13y02_869:hover {
  color: var(--primary);
}
._cut-control-progress_13y02_884 {
  position: relative;
  flex: 1;
  border-radius: 10px;
  height: 100%;
}
._cut-control-progress-left_13y02_890,
._cut-control-progress-right_13y02_890 {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 5px;
  padding: 0 10px;
  border-radius: 10px;
  background-color: #00000080;
  font-size: 12px;
  color: #fff9;
  white-space: nowrap;
  transform: translate(-50%);
  transition: all 0.3s;
  height: 25px;
  line-height: 25px;
}
._cut-control-progress-pointer_13y02_906 {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  border-radius: 2px;
  width: 4px;
  background-color: #fff;
}
._cut-control-wave_13y02_915 {
  gap: 1px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
._cut-control-wave-item_13y02_922 {
  border-radius: 1px;
  width: 2px;
  max-width: 30px;
  min-height: 2px;
  background-color: #fff3;
}
._cut-control-wave-item-disabled_13y02_929 {
  border-radius: 1px;
  width: 2px;
  max-width: 30px;
  min-height: 2px;
  background-color: transparent;
}
._cut-control-range_13y02_936 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: transparent;
}
._cut-control-range-disabled_13y02_943 {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._return-icon_13y02_949 {
  display: block;
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
._return-icon_13y02_949 rect {
  fill-opacity: 0.12;
  transition: fill-opacity 0.2s;
}
._return-icon_13y02_949:hover rect,
._return-icon_13y02_949:active rect {
  fill-opacity: 0.28;
}
._show_13y02_967 {
  animation: _fade-in_13y02_1 var(--modal-duration, 0.3s) both;
}
._show_13y02_967 ._wrapper_13y02_22 {
  animation: _slide-in-up_13y02_1 var(--modal-duration, 0.3s) both;
}
._hide_13y02_974 {
  animation: _fade-out_13y02_1 var(--modal-duration, 0.3s) both;
}
._hide_13y02_974 ._wrapper_13y02_22 {
  animation: _slide-in-down_13y02_1 var(--modal-duration, 0.3s) both;
}
@keyframes _fade-in_13y02_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fade-out_13y02_1 {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes _progressing_13y02_1 {
  33% {
    transform: translate3d(0, -2em, 0);
  }
  66% {
    transform: translate3d(0, -1em, 0);
  }
}
@keyframes _slide-in-up_13y02_1 {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes _slide-in-down_13y02_1 {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes _spin_13y02_1 {
  to {
    transform: rotate(1turn);
  }
}
._history-confirm-btn_13y02_1026 {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 16px;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  min-height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  transform: translate(-50%);
  transition: background-color 0.2s ease;
}
._history-confirm-btn_13y02_1026:hover {
  background-color: #d1287a;
}
._history-confirm-btn-text_13y02_1045 {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #f8f7f7;
}
._icon_mtwch_7 {
  position: relative;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
._icon_mtwch_7:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._icon_mtwch_7:hover {
  color: #fff;
}
._icon_mtwch_7:hover ._text_mtwch_28 {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
._text_mtwch_28 {
  position: absolute;
  z-index: -1;
  padding: 0 10px;
  border-radius: 8px;
  background-color: #232425;
  opacity: 0;
  font-size: 12px;
  color: #fffc;
  white-space: nowrap;
  transition: all 0.3s;
  height: 25px;
  line-height: 25px;
}
._text_mtwch_28:after {
  position: absolute;
  border: 4px solid transparent;
  content: "";
}
._text-left_mtwch_53 {
  right: 100%;
  top: 50%;
  margin-right: 5px;
  transform: translate3d(-10px, 0, 0);
  translate: 0 -50%;
}
._text-left_mtwch_53:after {
  left: 100%;
  top: 50%;
  border-left-color: #232425;
  transform: translateY(-50%);
}
._text-right_mtwch_66 {
  left: 100%;
  top: 50%;
  margin-left: 5px;
  transform: translate3d(10px, 0, 0);
  translate: 0 -50%;
}
._text-right_mtwch_66:after {
  right: 100%;
  top: 50%;
  border-right-color: #232425;
  transform: translateY(-50%);
}
._text-top_mtwch_79 {
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  transform: translate3d(0, 10px, 0);
  translate: -50% 0;
}
._text-top_mtwch_79:after {
  left: 50%;
  top: 100%;
  border-top-color: #232425;
  transform: translate(-50%);
}
._text-bottom_mtwch_92 {
  left: 50%;
  top: 100%;
  margin-top: 5px;
  transform: translate3d(0, -10px, 0);
  translate: -50% 0;
}
._text-bottom_mtwch_92:after {
  left: 50%;
  bottom: 100%;
  border-bottom-color: #232425;
  transform: translate(-50%);
}
._image_7pzkj_7 {
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  border-radius: 10px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._loader_7pzkj_16 {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #272929;
  animation: _fade-in_7pzkj_1 0.3s;
  width: 100%;
  height: 100%;
}
._loader-spinner_7pzkj_25 {
  display: block;
  animation: _spin_7pzkj_1 5s linear infinite;
  width: 100%;
  height: 100%;
}
._loader-spinner_7pzkj_25:before {
  background: url(/oiioii/assets/image-loader-Dndgyi71.png) no-repeat center/cover;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300%;
  height: 300%;
}
._error_7pzkj_42 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  gap: 10px;
  animation: _fade-in_7pzkj_1 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
._error-icon_7pzkj_55 {
  width: 20%;
  max-width: 50px;
  max-height: 50px;
}
._error-info_7pzkj_60 {
  display: flex;
  align-items: center;
  gap: 5px;
}
._error-text_7pzkj_65 {
  line-height: 20px;
  font-size: 14px;
  color: #fff6;
}
._error-btn_7pzkj_70 {
  border: none;
  background-color: transparent;
  cursor: pointer;
  line-height: 20px;
  text-decoration: underline;
  font-size: 14px;
  color: #fff9;
}
._viewer_7pzkj_80 {
  filter: blur(5px);
  opacity: 0;
  object-fit: cover;
  transform: scale(1.1);
  transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;
}
._viewer-loaded_7pzkj_89 {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
@keyframes _fade-in_7pzkj_1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _spin_7pzkj_1 {
  to {
    transform: rotate(1turn);
  }
}
._toast_whn97_7 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
._wrapper_whn97_16 {
  position: relative;
  border-radius: 25px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
}
._container_whn97_23 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 450px;
  background-color: #fff;
}
._icon_whn97_33 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  min-height: 20px;
}
._icon-loading_whn97_40 {
  animation: _spin_whn97_1 1s linear infinite;
}
._text_whn97_44 {
  line-height: 20px;
  font-size: 14px;
  color: #00000080;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}
._show_whn97_55 {
  animation: _fade-in_whn97_1 var(--modal-duration, 0.3s) both;
}
._show_whn97_55 ._wrapper_whn97_16 {
  animation: _slide-in-up_whn97_1 var(--modal-duration, 0.3s) both;
}
._hide_whn97_62 {
  animation: _fade-out_whn97_1 var(--modal-duration, 0.3s) both;
}
._hide_whn97_62 ._wrapper_whn97_16 {
  animation: _slide-in-down_whn97_1 var(--modal-duration, 0.3s) both;
}
@keyframes _fade-in_whn97_1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fade-out_whn97_1 {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes _slide-in-up_whn97_1 {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes _slide-in-down_whn97_1 {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes _spin_whn97_1 {
  to {
    transform: rotate(1turn);
  }
}
.hogi-video-more-anchor {
  display: inline-flex;
}
.hogi-video-more-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.hogi-video-more-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  width: 100%;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
  color: #d74c47;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.hogi-video-more-menu-item:hover {
  background-color: #ffffff0f;
  color: #d74c47;
}
.hogi-video-more-menu-text {
  white-space: nowrap;
}
.hogi-video-more-menu-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
._trigger_blxlf_1 {
  display: inline-block;
}
._tooltip_blxlf_5 {
  position: absolute;
  z-index: 1000;
  border-radius: 8px;
  max-width: 280px;
  background: #fff;
  opacity: 0;
  pointer-events: auto;
  transform: scale(0.95);
  animation: _tooltip-show_blxlf_1 0.15s ease-out forwards;
}
._tooltip_blxlf_5._top_blxlf_16 ._arrow_blxlf_16 {
  left: 50%;
  bottom: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  transform: translate(-50%);
}
._tooltip_blxlf_5._bottom_blxlf_24 ._arrow_blxlf_16 {
  left: 50%;
  top: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  transform: translate(-50%);
}
._tooltip_blxlf_5._left_blxlf_32 ._arrow_blxlf_16 {
  right: -4px;
  top: 50%;
  border-left: 5px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
._tooltip_blxlf_5._right_blxlf_40 ._arrow_blxlf_16 {
  left: -4px;
  top: 50%;
  border-right: 5px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
._arrow_blxlf_16 {
  position: absolute;
  z-index: 1001;
  width: 0;
  height: 0;
}
._content_blxlf_56 {
  padding: 4px 8px;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #000000a3;
  overflow-wrap: break-word;
  word-break: break-all;
}
@keyframes _tooltip-show_blxlf_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 640px) {
  ._tooltip_blxlf_5 {
    max-width: calc(100vw - 32px);
  }
  ._content_blxlf_56 {
    padding: 4px 6px;
    font-size: 13px;
  }
}
._loader_ess4d_7 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
._icon_ess4d_16 {
  color: var(--primary);
  transition: all 0.3s;
  animation: _spin_ess4d_22 1s linear infinite;
}
._spinner_ess4d_22 {
  border: 3px solid var(--primary-light);
  border-top: 3px solid var(--primary);
  transition: all 0.3s;
  animation: _spin_ess4d_22 1s linear infinite;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
._text_ess4d_32 {
  margin-top: 10px;
  height: 30px;
  font-weight: 700;
  font-size: 16px;
  color: #fffc;
}
._text-dot_ess4d_39 {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.25em;
}
._text-dot_ess4d_39:after {
  display: block;
  white-space: pre-wrap;
  content: "...\a..\a.";
  animation: _progressing_ess4d_1 1s infinite step-start both;
}
@keyframes _progressing_ess4d_1 {
  33% {
    transform: translate3d(0, -2em, 0);
  }
  66% {
    transform: translate3d(0, -1em, 0);
  }
}
@keyframes _spin_ess4d_22 {
  to {
    transform: rotate(1turn);
  }
}
._video-player_10bew_7 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
}
._wrapper_10bew_17 {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  background-color: #161718;
  box-shadow: 0 0 10px #000000b3;
}
._wrapper_10bew_17:focus {
  outline: none;
}
._wrapper_10bew_17:focus-visible {
  outline: none;
}
._wrapper_10bew_17:hover ._control_10bew_30 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
._container_10bew_36 {
  position: relative;
  transition: all 0.3s;
}
._video_10bew_7 {
  width: 100%;
  height: 100%;
}
._loader_10bew_46 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  margin: -15px 0 0 -15px;
  animation: _spin_10bew_1 1s linear infinite;
}
._play_10bew_55 {
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}
._control_10bew_30 {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  align-items: center;
  gap: 16px;
  padding: 16px 12px 8px;
  height: auto;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
._control-disabled_10bew_90 {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: none;
}
._control-btn_10bew_95 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
._control-btn_10bew_95:hover {
  color: #ffffff91;
}
._control-btn_10bew_95:active {
  color: #ffffff80;
}
._control-time_10bew_115 {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  line-height: 20px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
}
._control-progress_10bew_125 {
  position: relative;
  flex: 1;
  height: 20px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
._control-progress_10bew_125:before {
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 12px;
  width: 100%;
  height: 4px;
  background-color: #ffffff0f;
  content: "";
  transform: translateY(-50%);
}
._control-point_10bew_144 {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  border-radius: 12px;
  height: 4px;
  background-color: #fff;
  transform: translateY(-50%);
}
._control-thumb_10bew_154 {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  border-radius: 8px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px #0000003d;
  opacity: 0;
  cursor: grab;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}
._control-thumb_10bew_154:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
._control-thumb-active_10bew_173,
._control_10bew_30:hover ._control-thumb_10bew_154 {
  opacity: 1;
  pointer-events: auto;
}
._button_10bew_182 {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  border: none;
  border-radius: 15px;
  background-color: #fff3;
  cursor: pointer;
  color: #fff9;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
._button_10bew_182:hover {
  color: var(--primary);
  transform: rotate(1turn);
}
._show_10bew_204 {
  animation: _fade-in_10bew_1 var(--modal-duration, 0.3s) both;
}
._show_10bew_204 ._wrapper_10bew_17 {
  animation: _slide-in-up_10bew_1 var(--modal-duration, 0.3s) both;
}
._hide_10bew_211 {
  animation: _fade-out_10bew_1 var(--modal-duration, 0.3s) both;
}
._hide_10bew_211 ._wrapper_10bew_17 {
  animation: _slide-in-down_10bew_1 var(--modal-duration, 0.3s) both;
}
@keyframes _fade-in_10bew_1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fade-out_10bew_1 {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes _slide-in-up_10bew_1 {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes _slide-in-down_10bew_1 {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes _spin_10bew_1 {
  to {
    transform: rotate(1turn);
  }
}
._counter-container_cml2k_1 {
  display: inline-block;
  position: relative;
}
._counter-counter_cml2k_6 {
  display: flex;
  overflow: hidden;
  line-height: 1;
}
._counter-digit_cml2k_12 {
  position: relative;
  width: 1ch;
  font-variant-numeric: tabular-nums;
}
._counter-number_cml2k_18 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}
._counter-comma_cml2k_26,
._counter-minus_cml2k_31 {
  display: flex;
  align-items: center;
}
._gradient-container_cml2k_36 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
._bottom-gradient_cml2k_42 {
  position: absolute;
  bottom: 0;
  width: 100%;
}
._credit-panel_11nru_1 {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 1000;
  padding: 20px 20px 12px;
  border-radius: 20px;
  min-width: 320px;
  background: #232425;
  box-shadow: 0 12px 40px #00000080;
  animation: _fade-in-up_11nru_1 0.25s ease-out;
}
._credit-panel_11nru_1:before {
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: transparent;
  content: "";
}
._credit-balance_11nru_24 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}
._credit-balance_11nru_24 ._credit-balance-block_11nru_31 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
._credit-only-balance-link_11nru_38 {
  cursor: pointer;
  color: #ffffffb3;
  transition: color 0.2s ease;
}
._credit-only-balance-link_11nru_38 svg {
  color: currentcolor;
}
._credit-only-balance-link_11nru_38:hover {
  color: #fffc;
}
._credit-amount_11nru_50 {
  font-family:
    SF Pro Display,
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  letter-spacing: -0.5px;
}
._credit-link_11nru_58 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  border: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  transition: color 0.2s ease;
}
._credit-link_11nru_58:hover {
  color: #fffc;
}
._credit-daily-free-bonus_11nru_78 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 8px;
  border-radius: 16px;
  background-color: #ffffff0f;
}
._credit-section_11nru_90 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  width: 100%;
  background: #ef319f0f;
}
._credit-section_11nru_90 ._credit-claim-btn_11nru_101 {
  position: absolute;
  right: 0;
  top: 0;
  height: 27px;
}
._credit-section-info_11nru_108 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._credit-section-title_11nru_114 {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #fabde1;
  letter-spacing: 0.24px;
}
._credit-section-subtitle_11nru_124 {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._credit-section-claimed-count_11nru_134 {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
._credit-section-divider_11nru_144 {
  width: calc(100% + 8px);
  height: 0.5px;
  background: #ffffff0f;
}
._credit-section-invite_11nru_150 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
._credit-section-invite_11nru_150 ._credit-section-title_11nru_114 {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
._credit-claim-btn_11nru_101 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  min-width: 72px;
  background: #ef319f;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
  transition: all 0.2s ease;
}
._credit-claim-btn_11nru_101:hover {
  background: #ec4899;
  transform: translateY(-1px);
}
._credit-claim-btn_11nru_101 span {
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
}
._credit-badge-disabled_11nru_198 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 16px;
  background: #ffffff14;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff6;
}
._credit-codes-container_11nru_211 {
  position: relative;
}
._credit-codes-container_11nru_211 ._credit-codes-mask_11nru_214 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 32px;
  background: linear-gradient(180deg, #22252500, #222525 84.62%);
}
._credit-codes_11nru_211 {
  display: flex;
  overflow-y: scroll;
  position: relative;
  flex-direction: column;
  margin-top: 14px;
  padding-bottom: 16px;
  max-height: 212px;
}
._credit-codes_11nru_211::-webkit-scrollbar {
  display: none;
}
._credit-code-row_11nru_237 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 8px 12px;
  border-radius: 16px;
  height: 36px;
  background: #ffffff0f;
}
._credit-code-row-content_11nru_248 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._credit-codes-first_11nru_254 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._credit-codes-second_11nru_260 {
  display: flex;
  flex-direction: column;
}
._credit-codes-second_11nru_260 ._credit-codes-second-title_11nru_264 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 17px 0;
  width: 180px;
  width: 100%;
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._credit-codes-second_11nru_260 ._credit-section-divider_11nru_144 {
  width: 35px;
  height: 0.5px;
  background: #ffffff0f;
}
._credit-codes-second_11nru_260 ._credit-codes-second-list_11nru_287 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
._credit-codes-second_11nru_260
  ._credit-codes-second-list_11nru_287
  ._credit-code-row_11nru_237 {
  padding-right: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: #ffffff0f;
  -webkit-user-select: none;
  user-select: none;
}
._credit-codes-second_11nru_260
  ._credit-codes-second-list_11nru_287
  ._credit-code-row_11nru_237
  ._credit-code-text_11nru_299 {
  filter: blur(5px);
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._credit-code-locked_11nru_310 {
  opacity: 0.5;
}
._credit-code-locked_11nru_310 ._credit-code-text_11nru_299 {
  filter: blur(4px);
  -webkit-user-select: none;
  user-select: none;
}
._credit-code-text_11nru_299 {
  font-family:
    SF Mono,
    Roboto Mono,
    monospace;
  font-weight: 500;
  font-size: 13px;
  color: #ffffffd9;
  letter-spacing: 0.5px;
}
._credit-code-copy_11nru_326 {
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  width: 72px;
  background: #272929;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff7fb;
  transition: color 0.2s ease;
}
._credit-code-claimed_11nru_340 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff4d;
}
._credit-history-link_11nru_351 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  border: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  transition: color 0.2s ease;
}
._credit-history-link_11nru_351:hover {
  color: #fffc;
}
._credit-claim-btn-loading_11nru_371 {
  transform: rotate(360deg);
  animation: _spin_11nru_1 1s linear infinite;
}
._credit-invite-lock_11nru_376 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}
._credit-invite-lock_11nru_376 ._credit-invite-left_11nru_383 {
  display: flex;
  flex-direction: column;
}
._credit-invite-lock_11nru_376
  ._credit-invite-left_11nru_383
  ._credit-invite-left-title_11nru_387 {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
._credit-invite-lock_11nru_376
  ._credit-invite-left_11nru_383
  ._credit-invite-left-subtitle_11nru_396 {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._credit-invite-lock_11nru_376 ._credit-invite-right_11nru_405 button {
  padding: 6px 8px;
  border: none;
  border-radius: 12px;
  background: #ef319f1f;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #ef319f;
  word-break: keep-all;
  transition: all 0.2s ease;
  text-wrap-mode: nowrap;
}
._credit-invite-lock_11nru_376 ._credit-invite-right_11nru_405 button:hover {
  opacity: 0.85;
}
._credit-claim-btn-tooltip_11nru_427 {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
._credit-system-item_11nru_434 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border: none;
  width: 100%;
  height: 36px;
  background: transparent;
  cursor: pointer;
}
._credit-system-item_11nru_434 ._credit-system-item-content_11nru_445 {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
}
._credit-system-item_11nru_434 ._feedback-badge_11nru_451 {
  display: flex;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border-radius: 20px;
  min-width: 8px;
  height: 12px;
  background-color: #ef319f;
  line-height: 13px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #fff7fb;
  white-space: nowrap;
}
._credit-system-item_11nru_434 ._total-code_11nru_469 {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  height: 24px;
  background: #ef319f1f;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #fabde1;
  letter-spacing: 0.24px;
}
._credit-upgrade-container_11nru_485 {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  width: 100%;
}
._credit-upgrade_11nru_485 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  min-height: 36px;
  max-height: 36px;
  background: linear-gradient(155.369deg, #ff7575 13.14%, #fd69cf 88.607%);
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: opacity 0.2s ease;
}
._credit-upgrade_11nru_485:hover {
  opacity: 0.9;
}
._credit-buy-bento_11nru_518 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid #ef319f;
  border-radius: 16px;
  min-height: 36px;
  max-height: 36px;
  background: #ef319f33;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffebf7;
  transition: all 0.2s ease;
}
._credit-buy-bento_11nru_518:hover {
  background: #ef319f4d;
}
._credit-user_11nru_545 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._credit-user_11nru_545 ._credit-avatar_11nru_550 {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
._credit-user_11nru_545 ._credit-avatar_11nru_550 img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
._credit-user_11nru_545 ._credit-user-info_11nru_561 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._credit-user_11nru_545 ._credit-user-info_11nru_561 ._user-name_11nru_566 {
  display: flex;
  align-items: center;
  line-height: 26px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffe8;
  letter-spacing: 0.34px;
}
._credit-user_11nru_545 ._credit-user-info_11nru_561 ._user-email_11nru_577 {
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._credit-user_11nru_545 ._credit-user-info_11nru_561 ._user-badge_11nru_586 {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
@keyframes _spin_11nru_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._credit-container_4dc8z_1 {
  display: inline-flex;
  position: relative;
  align-items: center;
}
._credit-btn_4dc8z_7 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  height: 36px;
  background: #272929;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._credit-btn_4dc8z_7:hover {
  opacity: 0.85;
}
._credit-avatar_4dc8z_27 {
  position: relative;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.91);
  border-radius: 20px;
}
._credit-avatar_4dc8z_27 img {
  border-radius: 20px;
  width: 20px;
  height: 20px;
  object-fit: cover;
}
._credit-avatar_4dc8z_27 ._reply-badge_4dc8z_39 {
  display: flex;
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border-radius: 20px;
  min-width: 8px;
  height: 12px;
  background-color: #ef319f;
  line-height: 13px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #fff7fb;
  white-space: nowrap;
}
._overlay_1j0qm_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: _fade-in_1j0qm_1 0.2s ease-out;
}
._modal_1j0qm_13 {
  display: flex;
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  min-width: 720px;
  height: 590px;
  min-height: 480px;
  background: #232425;
  box-shadow: 0 24px 64px #00000080;
  animation: _scale-in_1j0qm_1 0.25s ease-out;
}
._table-row-container_1j0qm_26 {
  overflow: hidden scroll;
  max-height: 240px;
}
._table-row-container_1j0qm_26::-webkit-scrollbar {
  display: none;
}
._sidebar_1j0qm_34 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 16px;
  min-width: 160px;
  background: #232425;
}
._divider_1j0qm_43 {
  flex-basis: 0.5px;
  margin: 20px 0;
  width: 0.5px;
  background-color: #ffffff0f;
}
._tab-btn_1j0qm_50 {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #fff9;
  transition: all 0.15s ease;
}
._tab-btn_1j0qm_50:hover {
  background: #ffffff0f;
  color: #fffc;
}
._tab-btn-active_1j0qm_68 {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #ffffff1a;
  color: #fff;
}
._tab-btn-active_1j0qm_68:hover {
  background: #ffffff1f;
}
._content_1j0qm_77 {
  display: flex;
  overflow-y: auto;
  position: relative;
  flex-direction: column;
  flex: 1;
  padding: 24px 20px 12px;
  width: 784px;
}
._content_1j0qm_77::-webkit-scrollbar {
  display: none;
}
._close-btn_1j0qm_91 {
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  color: #ffffff80;
  transition: all 0.15s ease;
}
._close-btn_1j0qm_91:hover {
  color: #fffc;
}
._title_1j0qm_111 {
  margin: 0 0 24px;
  line-height: 23px;
  text-align: left;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffb3;
}
._balance-card_1j0qm_124 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #ffffff0a;
}
._balance-upgrade-btn-container_1j0qm_136 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}
._current-plan_1j0qm_144 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-radius: 12px;
  width: 100%;
  background: #00000014;
}
._current-plan_1j0qm_144 ._current-plan-info_1j0qm_153 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
}
._current-plan_1j0qm_144 img {
  border: 2px solid rgba(255, 255, 255, 0.48);
  border-radius: 24px;
  width: 24px;
  height: 24px;
  background:
    #d3d3d3 50% / cover no-repeat,
    #485045e3;
  opacity: 0.8;
}
._balance-credit-type_1j0qm_174 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}
._balance-credit-type_1j0qm_174 ._balance-credit-type-item_1j0qm_181 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  gap: 8px;
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._balance-credit-type_1j0qm_174 ._balance-credit-type-item_1j0qm_181 svg {
  margin-left: -4px;
  cursor: pointer;
}
._balance-credit-type_1j0qm_174 ._balance-credit-type-item-amount_1j0qm_199 {
  font-weight: 600;
  color: #ffffffb3;
}
._balance-main_1j0qm_204 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
._balance-main_1j0qm_204 ._balance-amount-container_1j0qm_210 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
._balance-main_1j0qm_204 ._balance-upgrade-btn_1j0qm_136 {
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28px;
  transform: translateY(4px);
}
._balance-main_1j0qm_204 ._balance-upgrade_1j0qm_136 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  max-height: 27px;
  background: #ef319f;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #f8f7f7;
  transition: all 0.2s ease;
}
._balance-main_1j0qm_204 ._balance-upgrade_1j0qm_136:hover {
  opacity: 0.85;
}
._balance-amount_1j0qm_210 {
  line-height: 44px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  color: #ffebf7;
}
._claim-btn_1j0qm_261 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ec4899, #f472b6);
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._claim-btn_1j0qm_261:hover {
  background: linear-gradient(135deg, #db2777, #ec4899);
  box-shadow: 0 4px 12px #ec489966;
  transform: translateY(-1px);
}
._expiring-text_1j0qm_282 {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._transactions-header_1j0qm_292 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
._section-title_1j0qm_299 {
  line-height: 23px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffb3;
}
._section-subtitle_1j0qm_310 {
  margin-top: -8px;
  margin-bottom: 16px;
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._invite-codes-container_1j0qm_322 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  width: 550px;
  min-height: 116px;
}
._invite-codes-container_1j0qm_322 ._credit-section-info_1j0qm_333 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
._invite-codes-container_1j0qm_322 ._credit-section-title_1j0qm_339 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
._invite-codes-container_1j0qm_322 ._credit-section-subtitle_1j0qm_351 {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._invite-codes-container_1j0qm_322 ._credit-codes_1j0qm_360 {
  display: flex;
  overflow: hidden auto;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 524px;
  max-height: 300px;
}
._invite-codes-container_1j0qm_322 ._credit-codes_1j0qm_360::-webkit-scrollbar {
  display: none;
}
._invite-codes-container_1j0qm_322 ._credit-code-row_1j0qm_373 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  flex-basis: 256px;
  gap: 16px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: linear-gradient(90deg, #fabde11f, #9470851f);
}
._invite-codes-container_1j0qm_322
  ._credit-code-row_1j0qm_373
  ._credit-code-text_1j0qm_385 {
  display: inline-block;
  width: 142px;
  line-height: 20px;
  text-transform: uppercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._invite-codes-container_1j0qm_322
  ._credit-code-row_1j0qm_373
  ._credit-block-row-item_1j0qm_397 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-top: 2.5px;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: semibold;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0%;
}
._invite-codes-container_1j0qm_322
  ._credit-code-row_1j0qm_373
  ._credit-code-mask_1j0qm_413 {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: flex-start;
  align-items: center;
  padding-left: 8px;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1c1c1c8f, #1c1c1c8f 40.62%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
._credit-all-received_1j0qm_428 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._help-link_1j0qm_444 {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._help-link_1j0qm_444:hover {
  color: #fffc;
}
._table_1j0qm_26 {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  min-height: 80px;
}
._table_1j0qm_26::-webkit-scrollbar {
  display: none;
}
._table-header_1j0qm_474 {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 48px;
  background-color: #ffffff0f;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #fff6;
}
._table-row_1j0qm_26 {
  display: flex;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffd9;
}
._table-row_1j0qm_26:last-child {
  border-bottom: none;
}
._col-details_1j0qm_502 {
  min-width: 250px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  text-wrap-mode: nowrap;
  word-break: keep-all;
}
._col-details-subscribe_1j0qm_514 {
  min-width: 180px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  text-wrap-mode: nowrap;
  word-break: keep-all;
}
._col-type_1j0qm_526 {
  flex-basis: 120px;
  min-width: 120px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: keep-all;
  text-wrap-mode: nowrap;
}
._col-type-dropdown_1j0qm_539 {
  display: inline-block;
  position: relative;
  transform: translate(-10px);
}
._col-type-dropdown-trigger_1j0qm_545 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #323334;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ffffffe8;
  transition: all 0.15s ease;
}
._col-type-dropdown-trigger_1j0qm_545:hover {
  background: #3c3d3e;
}
._col-type-dropdown-icon_1j0qm_564 {
  color: #fff9;
  transition: transform 0.2s ease;
}
._col-type-dropdown-icon-open_1j0qm_569 {
  transform: rotate(180deg);
}
._col-type-dropdown-menu_1j0qm_573 {
  display: flex;
  overflow: scroll;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 100;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  min-width: 80px;
  max-height: 120px;
  background: #323334;
  box-shadow: 0 8px 24px #0006;
  animation: _dropdown-fade-in_1j0qm_1 0.15s ease;
}
._col-type-dropdown-menu_1j0qm_573::-webkit-scrollbar {
  display: none;
}
._col-type-dropdown-item_1j0qm_594 {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #ffffffb3;
  transition: all 0.1s ease;
}
._col-type-dropdown-item_1j0qm_594:hover {
  background: #ffffff14;
  color: #ffffffe8;
}
._col-type-dropdown-item-active_1j0qm_609 {
  background: #ffffff1a;
  color: #ffffffe8;
}
@keyframes _dropdown-fade-in_1j0qm_1 {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._col-date_1j0qm_624 {
  flex-basis: 180px;
  min-width: 180px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: keep-all;
  text-wrap-mode: nowrap;
}
._col-credits_1j0qm_637 {
  flex: 1;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: keep-all;
  text-wrap-mode: nowrap;
}
._col-credits-positive_1j0qm_649 {
  flex: 1;
  text-align: left;
  color: #ffffffb3;
}
._col-code_1j0qm_655 {
  flex: 2;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._col-status_1j0qm_666 {
  flex: 1;
  text-align: right;
}
._col-status-claimed_1j0qm_671 {
  flex: 1;
  text-align: right;
  color: #ffffffb3;
}
._valid-tag_1j0qm_677 {
  text-transform: none;
  color: #ffffff7a;
}
._footer-note_1j0qm_682 {
  margin: 12px 0 0;
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff36;
  letter-spacing: 0.28px;
}
._description_1j0qm_696 {
  margin: -12px 0 24px;
  line-height: 1.6;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff9;
}
._invite-code-card_1j0qm_705 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #ffffff0f;
}
._invite-code-text_1j0qm_715 {
  font-family:
    SF Mono,
    Roboto Mono,
    Noto Sans SC,
    monospace;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  letter-spacing: 1px;
}
._invite-code-status_1j0qm_723 {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #10b981;
}
._copy-btn_1j0qm_730 {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #ffffff1a;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  transition: all 0.15s ease;
}
._copy-btn_1j0qm_730:hover {
  background: #ffffff26;
}
._invited-count_1j0qm_747 {
  margin-top: 24px;
  width: 100%;
  line-height: 20px;
  text-align: center;
  font-family:
    PingFang SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._capsule-tab-block_1j0qm_760 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}
._capsule-tab_1j0qm_760 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
._capsule-tab_1j0qm_760 a {
  line-height: 20px;
  text-decoration: underline solid rgba(255, 255, 255, 0.48) auto !important;
  text-underline-position: from-font;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}
._sub-management-btns_1j0qm_789 {
  display: flex;
  align-items: center;
  margin-left: 12px;
}
._sub-management-btn_1j0qm_789 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border: none;
  width: fit-content;
  background: transparent;
  cursor: pointer;
  text-decoration: none !important;
  color: #ffffff7a;
  transition: color 0.15s ease;
}
._sub-management-btn_1j0qm_789:hover {
  color: #ffffffb3;
}
._sub-management-divider_1j0qm_813 {
  line-height: 15px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff3d;
}
._sub-management-text_1j0qm_821 {
  line-height: 15px;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: inherit;
  white-space: nowrap;
}
._sub-management-icon_1j0qm_831 {
  color: #8d8d8e;
}
._capsule-switch-container_1j0qm_835 {
  border: none !important;
  height: 30px;
  background: none !important;
}
._subscribe-header_1j0qm_841 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 16px;
  padding: 8px 20px;
  border-radius: 16px;
  height: 41px;
  background: #ffffff08;
}
._subscribe-current-member_1j0qm_853 {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffb3;
}
._subscribe-plan-name_1j0qm_865 {
  background: linear-gradient(90deg, #4f99f1, #4f99f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
._subscribe-management-link_1j0qm_872 {
  cursor: pointer;
  line-height: 20px;
  text-decoration: underline solid rgba(255, 255, 255, 0.48) auto !important;
  text-underline-position: from-font;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
._subscribe-management-link_1j0qm_872:hover {
  color: #ffffffb3;
}
._col-order-id_1j0qm_890 {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 160px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._col-order-id-copy_1j0qm_904 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
._col-order-id-copy_1j0qm_904:hover {
  background: #ffffff14;
  color: #ffffffb3;
}
._col-price_1j0qm_919 {
  flex: 1;
  min-width: 80px;
  line-height: 18px;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._subscribe-empty_1j0qm_931 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
._credit-code-row-tooltip_1j0qm_945 {
  display: inline-flex !important;
  flex-basis: 256px;
}
._faq-trigger_1j0qm_950 {
  height: 16px;
}
@keyframes _fade-in_1j0qm_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _scale-in_1j0qm_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._linear-text_h6f20_1 {
  background: var(--gradient, linear-gradient(to right, #ec4899, #a855f7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
._tip-container_19s7y_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  pointer-events: none;
}
._tip-title_19s7y_9 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 24px;
  background-color: #fff;
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000000a3;
}
._capsule-switch_qmjqw_1 {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: #2d2e2f;
}
._indicator_qmjqw_12 {
  position: absolute;
  left: 1px;
  top: 1px;
  border-radius: 6px;
  height: calc(100% - 2px);
  background: #ffffff21;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._disabled_qmjqw_23 {
  opacity: 0.5;
  cursor: not-allowed;
}
._option_qmjqw_28 {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff80;
  transition: color 0.2s ease;
}
._option_qmjqw_28:hover:not(:disabled) {
  color: #ffffffb8;
}
._option_qmjqw_28:disabled {
  cursor: not-allowed;
}
._active_qmjqw_49 {
  color: #ffffffe8;
}
._active_qmjqw_49:hover:not(:disabled) {
  color: #ffffffe8;
}
._popover-subscribe_lgvv6_1 {
  min-width: 280px;
}
._popover-title_lgvv6_5 {
  margin: 0 0 12px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
}
._popover-table_lgvv6_16 {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 100%;
}
._popover-table_lgvv6_16 th,
._popover-table_lgvv6_16 td {
  padding: 8px 12px;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 12px;
}
._popover-table_lgvv6_16 th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 500;
  color: #ffffff7a;
}
._popover-table_lgvv6_16 td {
  font-weight: 400;
  color: #ffffffb8;
}
._popover-table_lgvv6_16 tbody tr {
  transition: background-color 0.15s ease;
}
._popover-table_lgvv6_16 tbody tr:hover {
  background-color: #ffffff0a;
}
._popover-table_lgvv6_16 tbody {
  overflow: hidden auto;
  max-height: 180px;
}
._popover-table_lgvv6_16 tbody::-webkit-scrollbar {
  display: none;
}
._empty-row_lgvv6_51 {
  padding: 16px 12px !important;
  text-align: center !important;
  color: #ffffff5c !important;
}
._trigger_c48dy_1 {
  display: inline-block;
  cursor: pointer;
}
._popover_c48dy_6 {
  position: absolute;
  z-index: 100000;
  border-radius: 8px;
  background: #ffffff0f;
  box-shadow: 0 4px 24px #0006;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: auto;
  transform: scale(0.95) translateY(4px);
  animation: _popover-show_c48dy_1 0.2s ease-out forwards;
}
._popover_c48dy_6._top_c48dy_18 {
  transform-origin: bottom center;
}
._popover_c48dy_6._bottom_c48dy_21 {
  transform-origin: top center;
}
._popover_c48dy_6._left_c48dy_24 {
  transform-origin: right center;
}
._popover_c48dy_6._right_c48dy_27 {
  transform-origin: left center;
}
._content_c48dy_31 {
  padding: 16px;
}
@keyframes _popover-show_c48dy_1 {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 640px) {
  ._popover_c48dy_6 {
    max-width: calc(100vw - 32px);
  }
  ._content_c48dy_31 {
    padding: 12px;
  }
}
._plan-badge_w4trb_1 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
._feedback-modal_1g52m_3 {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}
._feedback-modal-inner_1g52m_18 {
  display: flex;
  overflow-y: auto;
  position: relative;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  background: #ffffff14;
  box-shadow:
    0 20px 60px #0000004d,
    0 0 0 1px #ffffff0d;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
}
._feedback-modal-inner_1g52m_18::-webkit-scrollbar {
  width: 2px;
}
._feedback-modal-inner_1g52m_18::-webkit-scrollbar-track {
  background: transparent;
}
._feedback-modal-inner_1g52m_18::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #fff0;
  transition: background 0.3s ease;
}
._feedback-modal-inner_1g52m_18::-webkit-scrollbar-thumb:hover {
  background: #fff0;
}
._feedback-modal-inner_1g52m_18._feedback-modal-inner-scrolling_1g52m_51 {
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._feedback-modal-inner_1g52m_18._feedback-modal-inner-scrolling_1g52m_51::-webkit-scrollbar-thumb {
  background: #ffffff21;
}
._feedback-modal-inner_1g52m_18._feedback-modal-inner-scrolling_1g52m_51::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._feedback-modal-close_1g52m_61 {
  display: flex;
  position: absolute;
  right: 19px;
  top: 19px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 20px;
  height: 20px;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  color: #ffffffe8;
  transition: opacity 0.2s ease;
}
._feedback-modal-close_1g52m_61:hover {
  opacity: 1;
}
._feedback-modal-header_1g52m_83 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
._feedback-modal-title_1g52m_91 {
  margin: 0;
  width: 100%;
  line-height: 28px;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
._feedback-modal-tabs_1g52m_103 {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  width: 100%;
  background: #ffffff0f;
}
._feedback-modal-tab_1g52m_103 {
  flex: 1;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff7a;
  transition: all 0.2s ease;
}
._feedback-modal-tab_1g52m_103:hover {
  color: #ffffffb3;
}
._feedback-modal-tab-active_1g52m_132 {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: #ffffff1a;
  color: #ffffffe8;
}
._feedback-modal-content_1g52m_139 {
  overflow-y: auto;
  flex: 1;
  width: 100%;
  max-height: 600px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
}
._feedback-modal-content_1g52m_139::-webkit-scrollbar {
  width: 2px;
}
._feedback-modal-content_1g52m_139::-webkit-scrollbar-track {
  background: transparent;
}
._feedback-modal-content_1g52m_139::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #fff0;
  transition: background 0.3s ease;
}
._feedback-modal-content_1g52m_139::-webkit-scrollbar-thumb:hover {
  background: #fff0;
}
._feedback-modal-content_1g52m_139._feedback-modal-content-scrolling_1g52m_161 {
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._feedback-modal-content_1g52m_139._feedback-modal-content-scrolling_1g52m_161::-webkit-scrollbar-thumb {
  background: #ffffff21;
}
._feedback-modal-content_1g52m_139._feedback-modal-content-scrolling_1g52m_161::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._feedback-submit-form_1g52m_171 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
._feedback-submit-item_1g52m_178 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
._feedback-submit-item_1g52m_178 label {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffe6;
}
._feedback-submit-item_1g52m_178 textarea {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  min-height: 314px;
  outline: none;
  background-color: #ffffff0d;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-submit-item_1g52m_178 textarea::placeholder {
  color: #fff6;
}
._feedback-submit-item_1g52m_178 textarea:hover {
  border-color: #fff3;
  background-color: #ffffff14;
}
._feedback-submit-item_1g52m_178 textarea:focus {
  border-color: #ef319f99;
  background-color: #ffffff14;
  box-shadow: 0 0 0 3px #ef319f26;
}
._feedback-select-wrapper_1g52m_219 {
  position: relative;
}
._feedback-select-wrapper_1g52m_219:after {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(255, 255, 255, 0.6);
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
  transform: translateY(-50%);
  transition: all 0.2s ease;
}
._feedback-select-wrapper_1g52m_219:hover:after {
  border-top-color: #ffffffe6;
}
._feedback-select-wrapper_1g52m_219:has(select:focus):after {
  border-top-color: #ef319f;
}
._feedback-select-wrapper_1g52m_219 select {
  padding: 12px 40px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  min-height: 44px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #ffffff0d;
  background-image: none;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-select-wrapper_1g52m_219 select:hover {
  border-color: #fff3;
  background-color: #ffffff14;
}
._feedback-select-wrapper_1g52m_219 select:focus {
  border-color: #ef319f99;
  background-color: #ffffff14;
  box-shadow: 0 0 0 3px #ef319f26;
}
._feedback-select-wrapper_1g52m_219 select option {
  background-color: #2d2d2d;
  color: #fff;
}
._feedback-upload-controls_1g52m_272 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._feedback-upload-btn_1g52m_278 {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: auto;
  background-color: #ffffff14;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-upload-btn_1g52m_278:hover:not(:disabled) {
  border-color: #ef319f66;
  background-color: #ffffff1f;
}
._feedback-upload-btn_1g52m_278:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._feedback-hidden-input_1g52m_300 {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
._feedback-images-preview_1g52m_309 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
._feedback-image-item_1g52m_316 {
  position: relative;
}
._feedback-image-item_1g52m_316 img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
}
._feedback-image-loading_1g52m_327 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #00000080;
  font-size: 12px;
  color: #fff;
}
._feedback-remove-img-btn_1g52m_339 {
  display: flex;
  position: absolute;
  right: -6px;
  top: -6px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  background-color: #00000040;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-remove-img-btn_1g52m_339:hover {
  border-color: #ef319f99;
  background-color: #ef319fe6;
}
._feedback-submit-btn_1g52m_360 {
  margin-top: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  width: 100%;
  background-color: #ef319f;
  box-shadow: 0 4px 12px #ef319f4d;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-submit-btn_1g52m_360:hover:not(:disabled) {
  background-color: #fd72a5;
  box-shadow: 0 6px 16px #ef319f73;
  transform: translateY(-1px);
}
._feedback-submit-btn_1g52m_360:active:not(:disabled) {
  box-shadow: 0 2px 8px #ef319f59;
  transform: translateY(0);
}
._feedback-submit-btn_1g52m_360:disabled {
  background-color: #ef319f;
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}
._feedback-uploading-hint_1g52m_390 {
  margin-top: 6px;
  font-size: 12px;
  color: #ff6b6b;
}
._feedback-history_1g52m_396 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 600px;
}
._feedback-loading_1g52m_403 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 12px;
  width: 100%;
  font-size: 14px;
  color: #ffffff7a;
}
._feedback-loading-icon_1g52m_415 {
  color: #ffffff7a;
  animation: _spin_1g52m_1 1s linear infinite;
}
@keyframes _spin_1g52m_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._feedback-empty_1g52m_428 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 40px 20px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #ffffff7a;
}
._feedback-list_1g52m_440 {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  min-height: 600px;
}
._feedback-item_1g52m_448 {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  background: #ffffff0f;
}
._feedback-new-label_1g52m_456 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4px;
  width: 100%;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fabde1;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
}
._feedback-item-content_1g52m_471 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
}
._feedback-item-image_1g52m_478 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 72px;
  height: 72px;
}
._feedback-item-image_1g52m_478 img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
._feedback-item-text_1g52m_497 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: 0 8px;
  min-width: 0;
}
._feedback-item-text-with-image_1g52m_506 {
  overflow: hidden auto;
  padding-right: 4px;
  padding-top: 0;
  padding-bottom: 20px;
  height: 80px;
}
._feedback-item-text-with-image_1g52m_506::-webkit-scrollbar {
  width: 4px;
}
._feedback-item-text-with-image_1g52m_506::-webkit-scrollbar-track {
  background: transparent;
}
._feedback-item-text-with-image_1g52m_506::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #ffffff21;
}
._feedback-item-text-with-image_1g52m_506::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._feedback-item-text-with-image_1g52m_506 {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._feedback-item-title_1g52m_531 {
  margin-bottom: 0;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
}
._feedback-item-description_1g52m_542 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  line-height: 20px;
  -webkit-line-clamp: 4;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
}
._feedback-item-text-with-image_1g52m_506
  ._feedback-item-description_1g52m_542 {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
._feedback-item-tag_1g52m_566 {
  margin-top: 0;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  white-space: pre-wrap;
}
._feedback-reply_1g52m_576 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
  width: 100%;
}
._feedback-reply-content-wrapper_1g52m_584 {
  overflow: hidden auto;
  margin-right: 4px;
  padding: 0 8px 0 4px;
  width: 100%;
  max-height: 188px;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  overflow-wrap: break-word;
  letter-spacing: 0.32px;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
._feedback-reply-content-wrapper_1g52m_584::-webkit-scrollbar {
  width: 4px;
}
._feedback-reply-content-wrapper_1g52m_584::-webkit-scrollbar-track {
  border-radius: 2px;
  background: transparent;
}
._feedback-reply-content-wrapper_1g52m_584::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
._feedback-reply-content-wrapper_1g52m_584::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._feedback-reply-avatar_1g52m_617 {
  display: inline-block;
  overflow: hidden;
  margin-right: 2px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
._feedback-reply-avatar_1g52m_617 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._feedback-reply-label_1g52m_632 {
  color: #ffffffe8;
}
._feedback-reply-content_1g52m_584 {
  color: #ffffffb3;
}
._feedback-divider_1g52m_640 {
  display: flex;
  align-items: center;
  padding: 0 8px;
  width: 100%;
  height: 8px;
}
._feedback-divider_1g52m_640:before {
  width: 100%;
  height: 1px;
  background: #ffffff1a;
  content: "";
}
._overlay_111mt_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #0009;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: _fade-in_111mt_1 0.2s ease-out;
}
._modal_111mt_13 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 440px;
  min-height: 360px;
  background-repeat: no-repeat;
  background-size: cover;
  animation: _scale-in_111mt_1 0.3s ease-out;
}
._close-btn_111mt_25 {
  display: flex;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: transparent;
  background-color: #353838;
  cursor: pointer;
  transition: all 0.15s ease;
}
._close-btn_111mt_25:hover {
  opacity: 0.85;
}
._modal-content_111mt_46 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 32px;
  width: 100%;
  min-height: 360px;
}
._modal-title_111mt_57 {
  margin-top: 71px;
  opacity: 0.4;
  line-height: 38px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 42px;
  color: #fff8f8;
}
._modal-bonus-box_111mt_70 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  height: 74px;
}
._modal-bonus-box_111mt_70 ._bonus-diamond_111mt_78 {
  width: 74px;
  min-height: 74px;
  background-repeat: no-repeat;
  background-size: 100%;
}
._bonus-description_111mt_85 {
  margin-top: 8px;
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #232425;
  letter-spacing: 0.28px;
}
._bonus-share-box_111mt_97 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 50px;
  padding: 0 18px;
  width: 100%;
}
._bonus-share-box_111mt_97 ._bonus-share-title_111mt_106 {
  margin-bottom: 8px;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
._bonus-share-box_111mt_97 ._bonus-code-container_111mt_116 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fdbde44d;
}
._bonus-share-box_111mt_97
  ._bonus-code-container_111mt_116
  ._bonus-code-slogan_111mt_127 {
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._bonus-share-box_111mt_97
  ._bonus-code-container_111mt_116
  ._bonus-code-inner_111mt_136 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}
._bonus-share-box_111mt_97
  ._bonus-code-container_111mt_116
  ._bonus-code-inner_111mt_136
  ._bonus-code-text_111mt_143 {
  line-height: 28px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
._bonus-share-box_111mt_97
  ._bonus-code-container_111mt_116
  ._bonus-code-inner_111mt_136
  ._bonus-code-copy_111mt_153 {
  padding: 6px 8px;
  border-radius: 8px;
  background: #272929;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  transition: color 0.2s ease;
}
._bonus-share-box_111mt_97
  ._bonus-code-container_111mt_116
  ._bonus-code-inner_111mt_136
  ._bonus-code-copy_111mt_153:hover {
  opacity: 0.85;
}
@keyframes _fade-in_111mt_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _scale-in_111mt_1 {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._stroke-text_1xw34_1 {
  display: inline-block;
  position: relative;
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  color: var(--text-color);
  paint-order: stroke fill;
}
._stroke-text_1xw34_1:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  color: var(--stroke-color);
  content: attr(data-text);
}
._overlay_19e7b_1 {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000000a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
._modal_19e7b_15 {
  display: flex;
  overflow: visible;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #232425;
  box-shadow: 0 4px 80px #000000a3;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
._banner_19e7b_28 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 20px;
  border-radius: 16px;
  width: 100%;
  min-width: 1170px;
  height: 80px;
}
._banner-top-row_19e7b_41 {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 80px;
}
._banner-wrapper_19e7b_48 {
  position: relative;
  width: 1170px;
  height: 100%;
}
._banner-svg_19e7b_54 {
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  width: 100%;
  min-width: 1170px;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
._banner-content_19e7b_66 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 43px 18px 25px;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}
._banner-text_19e7b_76 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
._banner-title_19e7b_82 {
  line-height: 30px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  text-wrap-mode: nowrap;
}
._banner-subtitle_19e7b_93 {
  line-height: 26px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  color: #0c0c0e;
  letter-spacing: 0.4px;
}
._banner-countdown_19e7b_103 {
  display: flex;
}
._countdown-container_19e7b_107 {
  display: flex;
  position: relative;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}
._countdown-item_19e7b_116 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
  border-radius: 16px;
  width: 64px;
  height: 60px;
  background: linear-gradient(180deg, #fff, #fff9);
}
._countdown-comma_19e7b_128 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._countdown-dot_19e7b_134 {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: #00000054;
}
._countdown-number_19e7b_141 {
  line-height: 66.029px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  color: #000;
}
._countdown-label_19e7b_151 {
  line-height: 18px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #0000007a;
  letter-spacing: 0.24px;
  transform: translateY(-18px);
}
._countdown-separator_19e7b_163 {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  line-height: 66.029px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 47.163px;
  color: #ffffffe8;
  transform: translateY(-50%);
}
._countdown-separator_19e7b_163:nth-child(2) {
  left: 80.6837606838%;
}
._countdown-separator_19e7b_163:nth-child(4) {
  left: 88.4615384615%;
}
._countdown-separator_19e7b_163:nth-child(6) {
  left: 96.2393162393%;
}
._close-btn_19e7b_191 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
._close-btn_19e7b_191:hover {
  color: #fffc;
}
._close-btn_19e7b_191:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
._header_19e7b_210 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 24px;
  text-align: center;
}
._title_19e7b_220 {
  line-height: 44px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  color: #ffffffe8;
}
._subtitle_19e7b_230 {
  margin-bottom: 18px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
  letter-spacing: 0.32px;
}
._billing-toggle_19e7b_241 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin-top: 16px;
  padding: 0 10px;
  width: 100%;
}
._business-plan-button_19e7b_252 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 300px;
  height: 27px;
  line-height: 18px;
  vertical-align: middle;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: regular;
  font-weight: 400;
  font-size: 15px;
  color: #ffffffe8;
  letter-spacing: 0%;
  text-wrap-mode: nowrap;
}
._billing-toggle-container_19e7b_271 {
  display: flex;
  position: relative;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 128px;
  height: 34px;
  background: #272929;
}
._billing-toggle-container_19e7b_271 ._discount-badge-container_19e7b_281 {
  display: flex;
  position: absolute;
  right: -12.5%;
  top: -6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 8px 8px 8px 2px;
  height: 16px;
  background: linear-gradient(120deg, #e73b5e 13.14%, #b81986 88.61%);
}
._toggle-indicator_19e7b_295 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 128px;
  width: 50%;
  height: 100%;
  background: #ffffff0f;
  box-shadow: 0 2px 8px #0003;
  transform: translate(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._toggle-indicator-yearly_19e7b_309 {
  transform: translate(100%);
}
._business-plan-toggle_19e7b_313 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  height: 28px;
  outline: none;
  background: linear-gradient(120deg, #ff7575e0 13.14%, #fd69cfe0 88.607%);
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  transition: opacity 0.15s ease;
}
._business-plan-toggle_19e7b_313:hover {
  opacity: 0.9;
}
._business-plan-toggle_19e7b_313 span {
  display: flex;
  align-items: center;
  height: 24px;
}
._business-plan-toggle_19e7b_313 svg {
  color: #fff;
}
._toggle-btn_19e7b_346 {
  position: relative;
  z-index: 1;
  justify-content: center;
  padding: 10px 24px;
  border: none;
  border-radius: 12px;
  min-width: 124px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff7a;
  transition: color 0.15s ease;
}
._toggle-btn_19e7b_346:hover,
._toggle-btn-active_19e7b_370 {
  color: #ffffffe8;
}
._toggle-btn-active_19e7b_370:hover {
  color: #fff;
}
._toggle-btn-yearly_19e7b_377 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
}
._discount-badge_19e7b_281 {
  margin-left: 6px;
  font-weight: 600;
  font-size: 14px;
  color: inherit;
}
._my-bendo_19e7b_391 {
  display: flex;
  align-items: center;
  width: 300px;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
._my-bendo_19e7b_391 span {
  margin-left: 2px;
  line-height: 18px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff7a;
}
._my-bendo_19e7b_391 button {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  height: 28px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffebf7;
  transition: opacity 0.15s ease;
}
._my-bendo_19e7b_391 button:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  padding: 1px;
  border-radius: 8px;
  background: linear-gradient(120deg, #fd9db0 18.31%, #f35ac4 89.15%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
}
._my-bendo_19e7b_391 button:hover {
  opacity: 0.9;
}
._plans-container_19e7b_448 {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}
._plans-container_19e7b_448::-webkit-scrollbar {
  display: none;
}
._plan-wrapper_19e7b_460 {
  display: flex;
  overflow: visible auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px;
  width: 100%;
}
._plan-wrapper_19e7b_460 ._plan-close-wrapper_19e7b_469 {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  justify-content: flex-end;
  align-items: flex-start;
}
._plan-wrapper_19e7b_460::-webkit-scrollbar {
  display: none;
}
._plan-column_19e7b_482 {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 26px;
  background: #ffffff0f;
  transition: all 0.2s ease;
}
._plan-column_19e7b_482:after {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  border: 2px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(#232425, #232425) padding-box,
    var(
        --plan-border-gradient,
        linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.06) 0%,
          rgba(255, 255, 255, 0.06) 100%
        )
      )
      border-box;
  content: "";
  transition: all 0.2s ease;
}
._plan-column-header_19e7b_503 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 24px 10px;
}
._plan-column-header_19e7b_503 ._plan-column-badge_19e7b_510 {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  border: none;
  border-radius: 4px 24px 0 16px;
  height: 28px;
  background: #86baff33;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
}
._plan-column-header_19e7b_503 ._plan-column-badge-icon_19e7b_528 {
  position: absolute;
  right: 5px;
  top: -10px;
  z-index: 0;
  border-radius: 50%;
  width: 28px;
  height: 26px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
}
._plan-column-header_19e7b_503 ._plan-type-desc_19e7b_538 {
  line-height: 18px;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._plan-column-header_19e7b_503 ._plan-type-text_19e7b_548 {
  line-height: normal;
  text-align: right;
  text-transform: uppercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0;
}
._plan-column-header_19e7b_503 ._plan-type-text-free_19e7b_558 {
  color: #bbbdc1;
}
._plan-column-header_19e7b_503 ._plan-type-price_19e7b_561 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 6px;
}
._plan-column-header_19e7b_503
  ._plan-type-price_19e7b_561
  ._plan-type-price-currency_19e7b_567 {
  position: relative;
  top: 1px;
  line-height: 100%;
  vertical-align: middle;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Arial,
    Helvetica Neue,
    Helvetica,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  color: #ffffffe8;
  letter-spacing: 0;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  font-variant-ligatures: none;
}
._plan-column-header_19e7b_503
  ._plan-type-price_19e7b_561
  ._plan-type-price-discount_19e7b_584 {
  line-height: normal;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 32px;
  color: #ffffffe8;
}
._plan-column-header_19e7b_503
  ._plan-type-price_19e7b_561
  ._plan-type-price-currency-unit_19e7b_593 {
  display: flex;
  align-items: center;
  line-height: 20px;
  vertical-align: middle;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.02em;
  text-wrap-mode: nowrap;
}
._plan-column-header_19e7b_503
  ._plan-type-price_19e7b_561
  ._plan-type-price-origin_19e7b_606 {
  display: flex;
  align-items: center;
  line-height: 20px;
  vertical-align: middle;
  text-align: right;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb2;
  letter-spacing: 0.02em;
  text-wrap-mode: nowrap;
}
._plan-column-header_19e7b_503
  ._plan-type-price_19e7b_561
  ._plan-type-price-origin-text_19e7b_620 {
  margin-right: 4px;
  line-height: 20px;
  text-decoration: line-through;
  text-align: right;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb2;
  letter-spacing: 0.02em;
}
._plan-column-header_19e7b_503
  ._plan-type-price_19e7b_561
  ._plan-type-discount-badge_19e7b_632 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 20px;
  height: 20px;
  background:
    linear-gradient(#232425, #232425) padding-box,
    var(--discount-gradient, linear-gradient(135deg, #3fc9dc 0%, #9aa32f 100%))
      border-box;
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  text-wrap-mode: nowrap;
}
._plan-column-header_19e7b_503 ._plan-type-annual-fee_19e7b_650 {
  align-self: flex-start;
  margin-top: 8px;
  width: 100%;
  line-height: 18px;
  text-align: left;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._plan-type-progress-bar_19e7b_664 {
  --progress-fill-opacity: 0;
  --progress-percentage: 100%;
  --progress-track-height: 1px;
  width: 100%;
}
._plan-type-progress-bar_19e7b_664._active_19e7b_670,
._plan-type-progress-bar_19e7b_664._free_19e7b_673 {
  --progress-fill-opacity: 1;
}
._plan-type-yearly-annual-fee_19e7b_677 {
  margin-top: 4px;
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._plan-type-annual-fee_19e7b_650 + ._plan-type-progress-bar_19e7b_664 {
  margin-top: 16px;
}
._plan-column-body-header_19e7b_693,
._plan-column-body-info_19e7b_694,
._plan-column-body-info-short_19e7b_695 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
._plan-column-body-item_19e7b_707 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  height: var(--plan-body-item-height, 88px);
}
._plan-column-body-item_19e7b_707 ._plan-column-body-header_19e7b_693,
._plan-column-body-item_19e7b_707 ._plan-column-body-info_19e7b_694 {
  padding-top: 16px;
}
._plan-column-body-item_19e7b_707 ._plan-column-body-desc_19e7b_719 {
  margin-top: 8px;
  padding-left: 18px;
  padding-bottom: 12px;
  line-height: 13px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
}
._plan-column-first_19e7b_732 ._plan-column-body-header_19e7b_693 {
  line-height: 28px;
  font-weight: 700;
  font-size: 14px;
}
._plan-column-first_19e7b_732 ._plan-column-body-item-short_19e7b_737 {
  margin: 0 24px;
  height: auto;
  min-height: 50px;
}
._plan-column-first_19e7b_732
  ._plan-column-body-item-short_19e7b_737
  ._plan-column-body-info_19e7b_694 {
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
}
._plan-column-first_19e7b_732 ._plan-column-footer_19e7b_747 {
  display: none;
}
._plan-column-body-badge-container_19e7b_751 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._plan-column-body-badge-container_19e7b_751
  ._plan-column-body-badge-text_19e7b_756 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  height: 24px;
  background: #ffffff14;
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
  text-wrap-mode: nowrap;
}
._plan-column-body-info_19e7b_694 svg {
  width: 14px;
  height: 14px;
}
._plan-column-body-item-short_19e7b_737 {
  margin: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
._plan-column-body-item-short_19e7b_737 ._plan-column-body-header_19e7b_693,
._plan-column-body-item-short_19e7b_737 ._plan-column-body-info_19e7b_694,
._plan-column-body-item-short_19e7b_737
  ._plan-column-body-info-short_19e7b_695 {
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  height: 44px;
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: #ffffffe8;
}
._plan-column-footer_19e7b_747 {
  display: flex;
  justify-content: center;
  padding: 12px 16px 16px;
}
._plan-column-footer_19e7b_747 ._plan-column-upgrade-btn_19e7b_805 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 16px;
  width: 100%;
  height: 44px;
  max-height: 44px;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
._plan-column-footer_19e7b_747 ._plan-column-upgrade-btn-self_19e7b_829 {
  border: none !important;
  background: #ffffff0f !important;
  color: #fff7fb;
}
._plan-column-footer_19e7b_747 ._character-container_19e7b_834 {
  display: flex;
  position: absolute;
  right: 8px;
  bottom: 16px;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
._plan-column-footer_19e7b_747 ._speech-bubble_19e7b_843 {
  position: relative;
  margin-bottom: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fffffff2;
  box-shadow: 0 2px 8px #00000026;
  animation: _bubble-pop_19e7b_1 0.3s ease-out;
}
._plan-column-footer_19e7b_747 ._speech-bubble_19e7b_843 span {
  line-height: 1.2;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}
._plan-column-footer_19e7b_747 ._speech-bubble_19e7b_843:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.95) transparent transparent;
  content: "";
  transform: translate(-50%);
}
._plan-column-footer_19e7b_747 img {
  height: 114px;
  object-fit: cover;
}
@keyframes _bubble-pop_19e7b_1 {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
._upgrade-tip-container_19e7b_886 {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 80px;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translate(-50%);
}
._upgrade-tip-bubble_19e7b_897 {
  position: relative;
  padding: 12px 16px;
  border-radius: 16px;
  width: 256px;
  background: #fffffff2;
  box-shadow: 0 4px 16px #00000026;
  animation: _bubble-pop_19e7b_1 0.3s ease-out;
}
._upgrade-tip-bubble_19e7b_897 span {
  line-height: 1.4;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #333;
}
._upgrade-tip-bubble_19e7b_897:after {
  position: absolute;
  left: 50%;
  bottom: -8px;
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.95) transparent transparent;
  content: "";
  transform: translate(-50%);
}
._plan-column-last_19e7b_926 ._plan-column-body-header_19e7b_693,
._plan-column-last_19e7b_926 ._plan-column-body_19e7b_693 {
  padding-right: 0;
}
._qa-panel-container_19e7b_933 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
._qa-panel-title_19e7b_939 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 1440px;
  line-height: 27.28px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 19.486px;
  color: #ffffff7a;
}
._banner-title-strong_19e7b_956 {
  line-height: 38px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 28px;
  color: #d1ff47;
}
._progress-bar_1galz_1 {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 144px;
}
._track_1galz_10 {
  position: relative;
  border-radius: 4px;
  height: var(--progress-track-height, 4px);
  background: var(--progress-track-color, rgba(255, 255, 255, 0.06));
  cursor: pointer;
}
._fill_1galz_18 {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  width: var(--progress-percentage, 0%);
  height: 100%;
  background: var(
    --progress-gradient,
    linear-gradient(to right, #4f8cff, #a855f7)
  );
  opacity: var(--progress-fill-opacity, 1);
  transition:
    width 0.15s ease,
    opacity 0.15s ease;
}
._thumb_1galz_30 {
  position: absolute;
  left: var(--progress-percentage, 0%);
  top: 50%;
  z-index: 1;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  box-shadow: 0 2px 6px #0000004d;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
._thumb_1galz_30:hover {
  box-shadow: 0 2px 10px #0006;
  transform: translate(-50%, -50%) scale(1.15);
}
._thumb_1galz_30:active {
  cursor: grabbing;
}
._disabled_1galz_52 ._track_1galz_10 {
  opacity: 0.5;
  cursor: not-allowed;
}
._disabled_1galz_52 ._thumb_1galz_30 {
  cursor: not-allowed;
}
._disabled_1galz_52 ._thumb_1galz_30:hover {
  transform: translate(-50%, -50%);
}
._dragging_1galz_63 ._thumb_1galz_30 {
  box-shadow: 0 2px 12px #00000080;
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.2);
}
._dragging_1galz_63 ._fill_1galz_18 {
  transition: none;
}
._scale-container_1galz_72 {
  display: flex;
  position: relative;
  width: 100%;
  height: 5px;
}
._scale_1galz_72 {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%);
}
._scale-tick_1galz_88 {
  border-radius: 1px;
  width: 1px;
  height: 6px;
  background: #ffffff21;
}
._scale-label_1galz_95 {
  background: #ffffff21;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 10px;
  white-space: nowrap;
}
._value_1galz_103 {
  background: #ffffff21;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 12px;
}
._qa-panel_1uoq3_2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
  width: 100%;
  max-width: 908px;
}
._panel-title_1uoq3_11 {
  margin: 0 0 8px;
  line-height: 32px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #ffffffe8;
}
._qa-list_1uoq3_23 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._qa-item_1uoq3_29 {
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
._qa-item-expanded_1uoq3_35 {
  border-color: transparent;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.13);
}
._qa-question_1uoq3_40 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
._question-number_1uoq3_53 {
  flex-shrink: 0;
  line-height: 1;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffffb3;
}
._question-text_1uoq3_62 {
  flex: 1;
  line-height: 25px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
}
._question-icon_1uoq3_72 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #ffffff7a;
  transform: rotate(0);
  transition:
    transform 0.3s ease,
    color 0.2s ease;
}
._qa-question_1uoq3_40:hover ._question-icon_1uoq3_72 {
  color: #ffffffb3;
}
._question-icon-expanded_1uoq3_85 {
  transform: rotate(180deg);
}
._qa-answer_1uoq3_89 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
._qa-answer-expanded_1uoq3_95 {
  grid-template-rows: 1fr;
}
._qa-answer-content_1uoq3_99 {
  overflow: hidden;
  min-height: 0;
  line-height: 1.7;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 14px;
  color: #ffffffb3;
}
._qa-answer-expanded_1uoq3_95 ._qa-answer-content_1uoq3_99 {
  padding-bottom: 16px;
}
._qa-answer-content_1uoq3_99 p {
  margin: 0 0 12px;
}
._qa-answer-content_1uoq3_99 p:last-child {
  margin-bottom: 0;
}
._qa-answer-content_1uoq3_99 strong {
  font-weight: 600;
  color: #ffffffe8;
}
._qa-answer-content_1uoq3_99 a {
  text-decoration: none;
  color: #4a9eff;
  transition: color 0.2s ease;
}
._qa-answer-content_1uoq3_99 a:hover {
  text-decoration: underline;
}
._qa-answer-content_1uoq3_99 ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 4px;
}
._qa-answer-content_1uoq3_99 ul:last-child {
  margin-bottom: 0;
}
._qa-answer-content_1uoq3_99 ul > li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 16px;
}
._qa-answer-content_1uoq3_99 ul > li:before {
  position: absolute;
  left: 0;
  top: 0;
  color: #4a9eff;
  content: "閳?;
}
._qa-answer-content_1uoq3_99 ul > li:last-child {
  margin-bottom: 0;
}
._qa-answer-content_1uoq3_99 ul > li > ul {
  margin-top: 8px;
  margin-bottom: 8px;
}
._qa-answer-content_1uoq3_99 ul > li > ul > li:before {
  color: #ffffff7a;
  content: "閳?;
}
._qa-answer-content_1uoq3_99 ul > li > ul > li > ul > li:before {
  color: #ffffff4d;
  content: "閳?;
}
._qa-answer-content_1uoq3_99 ol {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 20px;
  counter-reset: item;
}
._qa-answer-content_1uoq3_99 ol:last-child {
  margin-bottom: 0;
}
._qa-answer-content_1uoq3_99 ol > li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 8px;
  counter-increment: item;
}
._qa-answer-content_1uoq3_99 ol > li:before {
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  color: #4a9eff;
  content: counter(item) ".";
}
._qa-answer-content_1uoq3_99 ol > li:last-child {
  margin-bottom: 0;
}
._qa-answer-content_1uoq3_99 ol > li > ol {
  margin-top: 8px;
  margin-bottom: 8px;
  counter-reset: subitem;
}
._qa-answer-content_1uoq3_99 ol > li > ol > li {
  counter-increment: subitem;
}
._qa-answer-content_1uoq3_99 ol > li > ol > li:before {
  color: #ffffff7a;
  content: counter(item) "." counter(subitem);
}
._qa-answer-content_1uoq3_99 blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 3px solid #4a9eff;
  border-radius: 0 8px 8px 0;
  background: #ffffff08;
  font-style: italic;
  color: #ffffff7a;
}
._qa-answer-content_1uoq3_99 blockquote p {
  margin: 0;
}
._qa-answer-content_1uoq3_99 table {
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 100%;
  font-size: 13px;
}
._qa-answer-content_1uoq3_99 th,
._qa-answer-content_1uoq3_99 td {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
._qa-answer-content_1uoq3_99 th {
  background: #ffffff0f;
  font-weight: 600;
  color: #ffffffe8;
}
._qa-answer-content_1uoq3_99 td {
  background: #ffffff05;
  color: #ffffffb3;
}
._qa-answer-content_1uoq3_99 tr:hover td {
  background: #ffffff0a;
}
._qa-answer-content_1uoq3_99 code {
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffffff14;
  font-family:
    SF Mono,
    Fira Code,
    monospace;
  font-size: 13px;
  color: #ff7eb3;
}
._qa-answer-content_1uoq3_99 pre {
  overflow-x: auto;
  margin: 12px 0;
  padding: 16px;
  border-radius: 8px;
  background: #0000004d;
}
._qa-answer-content_1uoq3_99 pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  color: #ffffffb3;
}
._qa-answer-content_1uoq3_99 h1,
._qa-answer-content_1uoq3_99 h2,
._qa-answer-content_1uoq3_99 h3,
._qa-answer-content_1uoq3_99 h4,
._qa-answer-content_1uoq3_99 h5,
._qa-answer-content_1uoq3_99 h6 {
  margin: 16px 0 8px;
  font-weight: 600;
  color: #ffffffe8;
}
._qa-answer-content_1uoq3_99 h1:first-child,
._qa-answer-content_1uoq3_99 h2:first-child,
._qa-answer-content_1uoq3_99 h3:first-child,
._qa-answer-content_1uoq3_99 h4:first-child,
._qa-answer-content_1uoq3_99 h5:first-child,
._qa-answer-content_1uoq3_99 h6:first-child {
  margin-top: 0;
}
._qa-answer-content_1uoq3_99 h1 {
  font-size: 18px;
}
._qa-answer-content_1uoq3_99 h2 {
  font-size: 16px;
}
._qa-answer-content_1uoq3_99 h3,
._qa-answer-content_1uoq3_99 h4,
._qa-answer-content_1uoq3_99 h5,
._qa-answer-content_1uoq3_99 h6 {
  font-size: 15px;
}
._qa-answer-content_1uoq3_99 hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
._qa-answer-content_1uoq3_99 img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}
._warning-text_1uoq3_306 {
  padding: 12px 16px;
  border-radius: 8px;
  background: #f5a6231a;
  color: #f5a623;
}
._footer-notes_1uoq3_313 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
._footer-note_1uoq3_313 {
  margin: 0;
  line-height: 1.6;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 13px;
  color: #ffffff7a;
}
._footer-note-warning_1uoq3_330 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #f5a623;
}
._warning-icon_1uoq3_337 {
  flex-shrink: 0;
  font-size: 14px;
}
._disclaimer_1uoq3_342 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.6;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 13px;
  color: #ffffff7a;
}
._disclaimer_1uoq3_342 p {
  margin: 0 0 8px;
}
._disclaimer_1uoq3_342 p:last-child {
  margin-bottom: 0;
}
._disclaimer_1uoq3_342 a {
  text-decoration: none;
  color: #4a9eff;
}
._disclaimer_1uoq3_342 a:hover {
  text-decoration: underline;
}
._overlay_14h9g_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
._modal_14h9g_12 {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 24px 20px;
  border-radius: 20px;
  width: 320px;
  background: linear-gradient(180deg, #202022, #18181a);
  box-shadow: 0 24px 64px #00000080;
}
._close-btn_14h9g_23 {
  display: flex;
  position: absolute;
  right: 12px;
  top: 12px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #ffffff80;
  transition: all 0.15s ease;
}
._close-btn_14h9g_23:hover {
  background: #ffffff14;
  color: #fffc;
}
._business-label_14h9g_44 {
  margin-bottom: 8px;
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
._business-title_14h9g_53 {
  margin: 0 0 24px;
  line-height: 44px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #fff;
}
._feature-list_14h9g_62 {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
}
._feature-item_14h9g_71 {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 18px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._feature-check_14h9g_82 {
  flex-shrink: 0;
  color: #ffffffe8;
}
._contact-btn_14h9g_87 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff7575, #fd69cf);
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._overlay_grb4v_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  padding: 36px;
  background: #000000a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: _fade-in_grb4v_1 0.2s ease-out;
}
@keyframes _fade-in_grb4v_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _scale-in_grb4v_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._modal_grb4v_32 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  padding: 20px 20px 58px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  width: 100%;
  max-width: 720px;
  background: #232425;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  animation: _scale-in_grb4v_1 0.3s ease-out;
}
._close-btn_grb4v_48 {
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
._close-btn_grb4v_48:hover {
  color: #fffc;
}
._close-btn_grb4v_48:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
._header_grb4v_72 {
  margin-bottom: 20px;
}
._title_grb4v_76 {
  line-height: 32px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}
._user-info_grb4v_86 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #ffffff0a;
}
._user-profile_grb4v_97 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._avatar-wrapper_grb4v_103 {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
._avatar-wrapper_grb4v_103:before {
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  z-index: 0;
  border-radius: 50%;
  background: #ffffffe8;
  content: "";
}
._avatar-wrapper_grb4v_103:after {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  border-radius: 50%;
  background: #1c1d1e;
  content: "";
}
._avatar_grb4v_103 {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
._avatar-placeholder_grb4v_136 {
  display: flex;
  position: relative;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}
._user-details_grb4v_151 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._user-name_grb4v_157 {
  line-height: 1.4;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
._membership-info_grb4v_165 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
._membership-badge_grb4v_171 {
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.5px;
}
._expiration-text_grb4v_181 {
  display: flex;
  align-items: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 13px;
  color: #ffffff7a;
}
._upgrade-btn_grb4v_189 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ff7eb3;
  transition: color 0.15s ease;
}
._upgrade-btn_grb4v_189:hover {
  color: #ff9ac4;
}
._upgrade-arrow_grb4v_207 {
  font-size: 16px;
  transition: transform 0.15s ease;
}
._upgrade-btn_grb4v_189:hover ._upgrade-arrow_grb4v_207 {
  transform: translate(2px);
}
._balance-info_grb4v_215 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._balance-label_grb4v_221 {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._balance-value_grb4v_231 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  line-height: 28px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffebf7;
}
._bento-icon_grb4v_247 {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
._options-grid_grb4v_253 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
  margin-bottom: 16px;
}
._option-card_grb4v_260 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #ffffff0a;
  cursor: pointer;
  transition: all 0.25s ease;
}
._option-card_grb4v_260:hover {
  border-color: #fff3;
}
._option-card_grb4v_260:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._option-card-selected_grb4v_281 {
  border-color: transparent;
  background: linear-gradient(129deg, #b68bff00 -2.7%, #cb197866 69.35%);
  box-shadow: 0 0 20px #ef319f;
}
._option-card-selected_grb4v_281:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(129deg, #b68bff00 -2.7%, #cb197866 69.35%);
  content: "";
}
._option-card-selected_grb4v_281:after {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}
._option-card-selected_grb4v_281:hover {
  border-color: transparent;
}
._popular-badge_grb4v_310 {
  display: flex;
  position: absolute;
  right: -1px;
  top: -1px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px 14.5px;
  border: 1px solid transparent;
  border-radius: 4px 14px 0 16px;
  width: auto;
  height: 23px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
._plan-column-badge-icon_grb4v_326 {
  position: absolute;
  right: 10px;
  top: -10px;
  z-index: -1;
  border-radius: 50%;
  width: 28px;
  height: 26px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
}
._option-content_grb4v_337 {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
._option-bento_grb4v_346 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._option-bento-icon_grb4v_352 {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
._option-bento-amount_grb4v_358 {
  line-height: 32px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: #ffebf7;
}
._option-price_grb4v_368 {
  line-height: 20px;
  text-align: right;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
}
._option-amount_grb4v_378 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
._option-amount_grb4v_378 span:first-child {
  line-height: 15px;
  text-align: right;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
}
._option-amount_grb4v_378 span:last-child {
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffe8;
}
._disclaimer_grb4v_405 {
  margin-bottom: 20px;
  line-height: 18px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
._disclaimer_grb4v_405 p {
  margin: 0;
}
._disclaimer-link_grb4v_419 {
  margin-left: 16px;
  line-height: 18px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-transform: lowercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ff9ac4;
  transition: color 0.15s ease;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}
._disclaimer-link_grb4v_419:hover {
  color: #ff9ac4;
}
._purchase-btn_grb4v_440 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 17px 16px;
  border: none;
  border-radius: 8px;
  width: 284px;
  height: 40px;
  max-height: 52px;
  outline: none;
  background: #ef319f;
  cursor: pointer;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #f8f7f7;
  transition: all 0.25s ease;
}
._purchase-btn_grb4v_440:hover:not(:disabled) {
  box-shadow: 0 4px 20px #ff757566;
  opacity: 0.9;
  transform: translateY(-1px);
}
._purchase-btn_grb4v_440:active:not(:disabled) {
  transform: translateY(0);
}
._purchase-btn_grb4v_440:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  ._modal_grb4v_32 {
    padding: 20px;
    max-width: 100%;
  }
  ._options-grid_grb4v_253 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  ._user-info_grb4v_86 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._balance-info_grb4v_215 {
    align-items: flex-start;
  }
}
._overlay_1i0xb_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  padding: 36px;
  background: #000000a3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: _fade-in_1i0xb_1 0.2s ease-out;
}
@keyframes _fade-in_1i0xb_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _scale-in_1i0xb_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._modal_1i0xb_32 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  padding: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  background: #232425;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  animation: _scale-in_1i0xb_1 0.3s ease-out;
}
._close-btn_1i0xb_47 {
  display: flex;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
._close-btn_1i0xb_47:hover {
  color: #fffc;
}
._close-btn_1i0xb_47:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
._loading-overlay_1i0xb_71 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #232425e6;
}
._spinner_1i0xb_82 {
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #fffc;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: _spin_1i0xb_82 0.8s linear infinite;
}
@keyframes _spin_1i0xb_82 {
  to {
    transform: rotate(360deg);
  }
}
._header_1i0xb_96 {
  margin-bottom: 20px;
  text-align: center;
}
._title_1i0xb_101 {
  line-height: 28px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
._options-list_1i0xb_110 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._empty-tip_1i0xb_116 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  min-height: 53px;
  background: #272929;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 14px;
  color: #fff9;
}
._option-card_1i0xb_129 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: none;
  border-radius: 12px;
  height: 53px;
  background: #272929;
  cursor: pointer;
  transition: all 0.25s ease;
}
._option-card_1i0xb_129:hover {
  background: #2a2b2c;
}
._option-card_1i0xb_129:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._option-card-selected_1i0xb_151 {
  border: none;
  background:
    linear-gradient(90deg, #ffffff05, #ffffff05),
    linear-gradient(90deg, #272929, #272929);
}
._option-card-selected_1i0xb_151:hover {
  background:
    linear-gradient(90deg, #ffffff05, #ffffff05),
    linear-gradient(90deg, #272929, #272929);
}
._option-left_1i0xb_159 {
  display: flex;
  align-items: center;
  gap: 10px;
}
._option-icon_1i0xb_165 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #ffffffb3;
}
._option-svg_1i0xb_173 {
  width: 20px;
  height: 20px;
}
._option-label_1i0xb_178 {
  line-height: 20px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
}
._option-right_1i0xb_186,
._payment-icons_1i0xb_192 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._payment-icon_1i0xb_192 {
  border-radius: 4px;
  width: 24px;
  height: 24px;
  object-fit: cover;
}
._arrow-icon_1i0xb_205 {
  flex-shrink: 0;
  color: #ffffff7a;
  transition: all 0.15s ease;
}
._option-card_1i0xb_129:hover ._arrow-icon_1i0xb_205 {
  color: #ffffffb8;
  transform: translate(2px);
}
@media (max-width: 480px) {
  ._modal_1i0xb_32 {
    padding: 20px;
    max-width: 100%;
  }
  ._option-card_1i0xb_129 {
    padding: 14px 16px;
  }
  ._option-label_1i0xb_178 {
    font-size: 13px;
  }
  ._payment-icon_1i0xb_192 {
    width: 28px;
    height: 18px;
  }
}
._overlay_5mgah_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  background: #000000b3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
._modal-topup-mask_5mgah_12 {
  position: absolute;
  border-radius: 56px;
  width: 388px;
  min-height: 328px;
}
._modal_5mgah_12 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  border: var(--modal-border, 1px solid transparent);
  border-radius: 56px;
  width: 388px;
  min-height: 328px;
  box-shadow: 0 4px 16px #0000003d;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@supports (mask-composite: exclude) {
  ._modal_5mgah_12:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(
      --modal-border-gradient,
      linear-gradient(90deg, #4f99f1 0%, #a29afb 100%)
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
._modal-bg_5mgah_47 {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: auto;
  min-height: 552px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
._characters-bg_5mgah_58 {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 120%;
  height: 55%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
  transform: translate(-50%);
}
._characters-bg_5mgah_58:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(30, 35, 55) 0%, transparent 40%);
  content: "";
}
._content_5mgah_80 {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  text-align: center;
}
._badge_5mgah_91 {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
  padding: 6px 12px;
  border: var(--badge-border, 1px solid transparent);
  border-radius: 16px;
  background: var(
    --badge-bg,
    linear-gradient(
      135deg,
      rgba(60, 80, 120, 0.6) 0%,
      rgba(80, 100, 150, 0.4) 100%
    )
  );
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.3px;
}
@supports (mask-composite: exclude) {
  ._badge_5mgah_91 {
    border: 1px solid transparent;
  }
  ._badge_5mgah_91:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    padding: 1px;
    border-radius: inherit;
    background: var(
      --badge-border-gradient,
      linear-gradient(90deg, #4f99f1 0%, #a29afb 100%)
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
._badge_5mgah_91 ._badge-icon_5mgah_127 {
  position: relative;
  z-index: 1;
  color: #78c8ff;
}
._badge_5mgah_91 span {
  position: relative;
  z-index: 1;
}
._title_5mgah_137 {
  margin-bottom: 20px;
  line-height: 36px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}
._description_5mgah_149 {
  margin-bottom: 28px;
  line-height: 20px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.32px;
}
._bonus-section_5mgah_161 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
._bonus-icon_5mgah_169 {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 4px 12px rgba(255, 150, 200, 0.3));
}
._bonus-amount_5mgah_178 {
  display: flex;
  align-items: center;
  margin-left: 12px;
  line-height: 64px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 48px;
  color: #fff;
}
._buttons_5mgah_191 {
  display: flex;
  justify-content: center;
  width: 100%;
}
._btn-later_5mgah_197,
._btn-confirm_5mgah_198 {
  padding: 17px 20px;
  border: none;
  border-radius: 24px;
  width: 292px;
  max-width: 100%;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #fff7fb;
  transition: all 0.2s ease;
}
._btn-later_5mgah_197 {
  background: #ffffff36;
}
._btn-later_5mgah_197:hover {
  background: #ffffff1c;
}
._btn-confirm_5mgah_198 {
  background: #ffffffe8;
}
._btn-confirm_5mgah_198:hover {
  background: #fffc;
}
._btn-confirm-topup_5mgah_230,
._btn-confirm-topup_5mgah_230:hover {
  background: var(--confirm-bg);
}
._btn-confirm-text_5mgah_237 {
  background: linear-gradient(115deg, #b68bff 18.31%, #6b64f8 89.15%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 24px;
  text-align: center;
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
}
._btn-confirm-text-topup_5mgah_250 {
  background: none;
  -webkit-text-fill-color: #fff7fb;
  color: #fff7fb;
}
._overlay_17g1g_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200000;
  justify-content: center;
  align-items: center;
  background: #000000bf;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
._modal_17g1g_12 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 32px;
  width: 400px;
  box-shadow: 0 4px 16px #0000003d;
}
._close-btn_17g1g_23 {
  display: flex;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 32px;
  height: 32px;
  background: transparent;
  cursor: pointer;
  color: #ffffff80;
  transition: color 0.2s ease;
}
._close-btn_17g1g_23:hover {
  color: #ffffffe6;
}
._content_17g1g_44 {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 32px;
  width: 100%;
  background: #232425e6;
}
._title_17g1g_56 {
  margin-top: 24px;
  margin-bottom: 8px;
  line-height: 38px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
}
._modal-mask_17g1g_69 {
  position: absolute;
  right: 0;
  bottom: 0;
  left: -30%;
  top: -20%;
  z-index: -1;
  width: 640px;
  height: 552px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.6;
}
._description_17g1g_82 {
  margin-bottom: 16px;
  max-width: 320px;
  line-height: 1.5;
  line-height: 23px;
  text-align: center;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  letter-spacing: 0.32px;
}
._description_17g1g_82 strong {
  font-weight: 700;
  color: #ffffffe8;
}
._plans-list_17g1g_100 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  width: 100%;
}
._plan-card_17g1g_108 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #ffffff0a;
  cursor: pointer;
  transition: background 0.2s ease;
}
@supports (mask-composite: exclude) {
  ._plan-card_17g1g_108:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    padding: 2px;
    border-radius: inherit;
    background: var(
      --plan-border-gradient,
      linear-gradient(90deg, #4f99f1 0%, #a29afb 100%)
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
._plan-card_17g1g_108:hover {
  background: #ffffff14;
}
._plan-info_17g1g_137 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._plan-header_17g1g_143 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._plan-name_17g1g_149 {
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}
._plan-bento_17g1g_159 {
  line-height: 23px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
}
._view-details_17g1g_169 {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  text-decoration: none;
  text-align: right;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #9fc2ef;
  letter-spacing: 0.28px;
  transition: color 0.2s ease;
}
._view-details_17g1g_169:hover {
  text-decoration: underline;
  color: #9fc2ef;
}
._plan-price_17g1g_190 {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
._price-currency_17g1g_196 {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffffe6;
}
._price-amount_17g1g_203 {
  line-height: 32px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: #ffffffe8;
}
._price-period_17g1g_214 {
  display: flex;
  align-items: center;
  margin-left: 4px;
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._price-origin-text_17g1g_228 {
  margin-right: 4px;
  line-height: 18px;
  text-decoration-line: line-through;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._topup-card_17g1g_239 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  background: #ffffff08;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
._topup-card_17g1g_239:hover {
  border-color: #fff3;
  background: #ffffff0f;
}
._topup-info_17g1g_257 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._topup-title_17g1g_263 {
  line-height: 24px;
  text-align: left;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  color: #ffffffe8;
}
._topup-subtitle_17g1g_274 {
  line-height: 18px;
  text-align: left;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._topup-arrow_17g1g_285 {
  color: #fff6;
  transition: color 0.2s ease;
}
._topup-card_17g1g_239:hover ._topup-arrow_17g1g_285 {
  color: #ffffffb3;
}
._buttons_17g1g_293 {
  display: flex;
  gap: 12px;
  width: 100%;
}
._btn-later_17g1g_299,
._btn-upgrade_17g1g_300 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 8px;
  padding: 17px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  transition: all 0.2s ease;
}
._btn-later_17g1g_299 {
  position: relative;
  background: linear-gradient(180deg, #3a2834cc, #261a22e6);
}
@supports (mask-composite: exclude) {
  ._btn-later_17g1g_299:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7575, #fd69cf, #b68bff);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    content: "";
  }
}
._btn-upgrade_17g1g_300 {
  background: linear-gradient(90deg, #ff7575, #fd69cf);
}
._overlay_1f6c9_1 {
  display: flex;
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 16px;
  background: #000000b3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
._modal_1f6c9_15 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
  margin: auto 0;
  padding: 0;
  border-radius: 24px;
  width: 767px;
  height: 682px;
  color: #fff;
  transform-origin: center;
}
._bg-container_1f6c9_32 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
._bg-image_1f6c9_42 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
._bg-image-hidden_1f6c9_54 {
  opacity: 0;
}
._bg-image-share_1f6c9_58 {
  bottom: auto;
  height: auto;
  opacity: 1;
}
._share-preparing-active_1f6c9_64 ._bg-image_1f6c9_42,
._share-preparing-active_1f6c9_64 ._layout_1f6c9_65 {
  opacity: 0;
}
._share-loading_1f6c9_69 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
._share-loading-spinner_1f6c9_79 {
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffffe6;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: _share-loading-spin_1f6c9_79 0.8s linear infinite;
}
@keyframes _share-loading-spin_1f6c9_79 {
  to {
    transform: rotate(360deg);
  }
}
._btn-return-floating_1f6c9_93 {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  padding: 8px 12px;
  border: none;
  border-radius: 20px;
  background: #00000024;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
._layout_1f6c9_65 {
  display: flex;
  position: absolute;
  top: 0;
  right: 160px;
  bottom: 0;
  left: 200px;
  z-index: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-top: 190px;
  padding-bottom: 60px;
  text-align: center;
}
._layout-share_1f6c9_123 {
  inset: 40% 160px auto 200px;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-50%);
}
._title-wrapper_1f6c9_131 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}
._title-icon_1f6c9_139 {
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
}
._title_1f6c9_131 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  height: 76px;
  line-height: 57.709px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 40px;
  color: #524038;
  white-space: pre;
}
._message_1f6c9_166 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 407px;
  text-align: center;
}
._message-line_1f6c9_176 {
  line-height: 56px;
  text-decoration: underline dotted #dfbdae 5%;
  text-underline-position: from-font;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #83685c;
  white-space: pre;
  text-decoration-skip-ink: auto;
  text-underline-offset: 25%;
}
._highlight_1f6c9_192 {
  display: inline-block;
  max-width: 100%;
  background: var(
    --accent-gradient,
    linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 56px;
  text-decoration: underline dotted #dfbdae 5%;
  text-underline-position: from-font;
  text-align: center;
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: var(--highlight-font-size, 32px);
  white-space: pre;
  text-decoration-skip-ink: auto;
  text-underline-offset: 25%;
}
._reward_1f6c9_214 {
  margin-top: 12px;
  line-height: 32px;
  text-decoration: underline dotted #dfbdae 5%;
  text-underline-position: from-font;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #83685c;
  white-space: pre-wrap;
  text-decoration-skip-ink: auto;
  text-underline-offset: 25%;
}
._buttons_1f6c9_231 {
  display: flex;
  position: absolute;
  left: 52.5%;
  bottom: 140px;
  gap: 28px;
  transform: translate(-52.5%);
}
._btn-return_1f6c9_93,
._btn-share_1f6c9_241,
._btn-accept_1f6c9_242 {
  border: none;
  border-radius: 24px;
  width: 160px;
  height: 40px;
  cursor: pointer;
  line-height: 22px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
}
._btn-return_1f6c9_93 {
  background: #00000014;
  color: #524038;
}
._btn-share_1f6c9_241:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._btn-share_1f6c9_241 {
  background: var(
    --accent-gradient,
    linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%)
  );
  color: #ffebf7;
}
._btn-accept_1f6c9_242 {
  background: #232425;
  color: #fff;
}
._overlay_nimar_1 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background: #0009;
  animation: _fade-in_nimar_1 0.2s ease;
}
@keyframes _fade-in_nimar_1 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._modal_nimar_20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 28px 28px;
  border-radius: 32px;
  width: 360px;
  background: #1c1c1e;
  box-shadow: 0 8px 32px #0006;
  animation: _slide-up_nimar_1 0.25s ease;
}
@keyframes _slide-up_nimar_1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._title_nimar_43 {
  font-weight: 600;
  font-size: 18px;
  color: #f5f5f5;
}
._content_nimar_49 {
  line-height: 1.6;
  text-align: center;
  font-size: 14px;
  color: #ffffffb3;
}
._buttons_nimar_56 {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  width: 100%;
}
._btn_nimar_63 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 17px 16px;
  border: none;
  border-radius: 20px;
  max-height: 52px;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #fff7fb;
  transition: all 0.2s ease;
}
._btn-secondary_nimar_84 {
  background: #353838;
  color: #f5f5f5;
}
._btn-secondary_nimar_84:hover {
  background: #454848;
}
._btn-primary_nimar_92 {
  background: #ef319f;
  color: #fff;
}
._btn-primary_nimar_92:hover {
  background: #b22577;
}
._credit-extra-link_7tyoe_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #00000054;
}
._credit-extra-link_7tyoe_1:hover {
  opacity: 0.85;
}
._ad-banner_8robx_7 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: 0 auto;
  padding: 12px 24px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  width: fit-content;
  min-width: min(1200px, 100%, 100vw - 40px);
  max-width: min(100%, 100vw - 40px);
  background-color: #9fc2ef1f;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
._ad-banner-text_8robx_22 {
  overflow: hidden;
  flex: 1;
  margin: 0;
  min-width: 0;
  line-height: 20px;
  text-overflow: ellipsis;
  text-align: left;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #9fc2efcc;
  letter-spacing: 0.28px;
  white-space: nowrap;
}
._ad-banner-highlight_8robx_37 {
  opacity: 1;
  color: #9fc2ef;
}
._ad-banner-link_8robx_41 {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#d9ebff8c, #d9ebff8c);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 1px;
  opacity: 1;
  text-decoration: none;
  font-weight: 800;
  color: #d9ebff;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background-size 0.2s ease;
}
._ad-banner-link_8robx_41:hover {
  background-size: 100% 1px;
  color: #fff;
}
._ad-banner-close_8robx_59 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0.8;
  cursor: pointer;
  color: #9fc2ef;
  transition: opacity 0.3s;
  width: 20px;
  height: 20px;
}
._ad-banner-close_8robx_59:hover {
  opacity: 1;
}
._ad-banner-full_8robx_78 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
._image-sticker-area_15xq3_1 {
  display: flex;
  position: relative;
  margin-bottom: 8px;
}
._img-container_15xq3_7 {
  display: flex;
  position: relative;
  gap: 8px;
  border-radius: 12px;
  height: 60px;
}
._img-item-wrapper_15xq3_15 {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
._img-item-wrapper_15xq3_15[draggable="true"] {
  cursor: grab;
}
._img-item-wrapper_15xq3_15[draggable="true"]:active {
  cursor: grabbing;
}
._img-item_15xq3_15 {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #353838;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
._img-item-dragging_15xq3_38 {
  box-shadow: 0 8px 24px #0006;
  opacity: 0.5;
  transform: scale(1.05);
}
._img-item-drag-over_15xq3_44 {
  border-color: #ef319f;
  box-shadow: 0 0 0 2px #ef319f4d;
  transform: scale(1.05);
}
._img-sort_15xq3_50 {
  display: flex;
  position: absolute;
  left: 0.5px;
  top: 0.5px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #00000054;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
}
._img-src_15xq3_66 {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
._img-remove_15xq3_74 {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 999;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
._img-remove-btn_15xq3_84 {
  display: flex;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 999;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #000000b3;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease;
}
._img-remove-btn_15xq3_84:hover {
  background: #ef319f;
}
._img-ref-mask_15xq3_105 {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 5px 16px;
  border-radius: 24px;
  width: 100%;
  height: 24px;
  background: #000000a3;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._img-ref-mask_15xq3_105:hover {
  opacity: 1;
}
._img-ref-mask-icon_15xq3_126 {
  line-height: 15px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.2px;
}
._upload-loading_15xq3_137 {
  display: flex;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #45494a;
  box-shadow: 0 8px 28px #0000003d;
}
._upload-loading-mask_15xq3_151 {
  display: flex;
  position: absolute;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 100%;
  height: 100%;
  background-color: #45494abf;
}
._upload-loading-file_15xq3_163 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
._upload-progress-bar_15xq3_170 {
  width: 100%;
  min-width: unset;
}
._preview-modal_15xq3_175 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background: #000c;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
._preview-content_15xq3_186 {
  position: relative;
  padding: 37px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 17px;
  width: auto;
  background-color: #ffffff0f;
  box-shadow: 0 3px 57px #000000a3;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
._preview-close_15xq3_197 {
  display: flex;
  position: absolute;
  right: -20px;
  top: -20px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #0009;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease;
}
._preview-close_15xq3_197:hover {
  background: #ef319f;
}
._preview-main_15xq3_218 {
  display: flex;
  align-items: center;
}
._preview-left_15xq3_223 {
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 903px;
}
._preview-left_15xq3_223 img {
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  max-height: 544px;
  object-fit: cover;
}
._preview-right_15xq3_236 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 16px;
}
._preview-right_15xq3_236 img {
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}
._thumbnail_15xq3_250 {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
._thumbnail_15xq3_250:hover {
  border-color: #ffffff4d;
}
._thumbnail-active_15xq3_263 {
  padding: 4px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}
._model-select_gma8r_1 {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 284px;
  max-height: 342px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
._header_gma8r_12 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 12px;
}
._title_gma8r_19 {
  overflow: hidden;
  line-height: 28px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #ffffffe8;
}
._auto-toggle_gma8r_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
._auto-label_gma8r_38 {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-size: 12px;
  color: #fff9;
}
._toggle-switch_gma8r_44 {
  position: relative;
  border-radius: 12px;
  width: 34px;
  height: 20px;
  background: #ffffff1a;
  transition: background 0.2s ease;
}
._toggle-switch_gma8r_44._active_gma8r_52 {
  background: linear-gradient(120deg, #ff7575 13.14%, #d28dfe 88.61%);
}
._toggle-thumb_gma8r_56 {
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  box-shadow: 0 1px 3px #0000004d;
}
._tab-switch_gma8r_67 {
  display: flex;
  position: relative;
  margin: 0 12px 12px;
  border: none;
  border-radius: 10px;
  background: #343636;
}
._tab-indicator_gma8r_76 {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 0;
  border-radius: 8px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: #404242;
}
._tab_gma8r_67 {
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 16px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
  transition: color 0.2s ease;
}
._tab_gma8r_67 svg {
  color: inherit;
}
._tab_gma8r_67:hover:not(._active_gma8r_52) {
  color: #ffffffb3;
}
._tab_gma8r_67._active_gma8r_52 {
  color: #fff;
}
._model-list_gma8r_120 {
  display: flex;
  overflow: hidden auto;
  scroll-behavior: smooth;
  flex-direction: column;
  flex: 1;
  margin: 0 8px;
  padding: 0 8px 8px;
}
._model-list_gma8r_120::-webkit-scrollbar {
  width: 4px;
}
._model-list_gma8r_120::-webkit-scrollbar-track {
  background: transparent;
}
._model-list_gma8r_120::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff1a;
}
._model-list_gma8r_120::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._model-section_gma8r_143 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._model-item_gma8r_149 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}
._model-item_gma8r_149:hover {
  background: #ffffff0d;
}
._model-item_gma8r_149._selected_gma8r_161 {
  background: #ffffff14;
}
._model-item_gma8r_149._selected_gma8r_161 ._model-icon_gma8r_164 {
  color: #fff;
}
._model-icon_gma8r_164 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  background: #ffffff12;
  color: #cacaca;
}
._model-icon_gma8r_164 img {
  border-radius: 6px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
._model-icon_gma8r_164 svg {
  width: 20px;
  height: 20px;
  color: #cacaca;
}
._model-icon-placeholder_gma8r_191 {
  border-radius: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff1a;
}
._model-info_gma8r_198 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
._model-name_gma8r_206 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ffffffe8;
}
._model-badge_gma8r_216 {
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 12px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #fff;
}
._model-badge_gma8r_216._badge-new_gma8r_227 {
  border-radius: 28px;
  background: linear-gradient(120deg, #ff7575 13.14%, #fd69cf 88.61%);
}
._model-badge_gma8r_216._badge-best_gma8r_231 {
  position: relative;
  z-index: 0;
  border-radius: 28px;
  background: #ef319f0f;
}
._model-badge_gma8r_216._badge-best_gma8r_231:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  padding: 1px;
  border-radius: 28px;
  background: linear-gradient(120deg, #ff7575 13.14%, #d28dfe 88.61%);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
}
._model-desc_gma8r_249 {
  overflow: hidden;
  line-height: 13px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff7a;
  white-space: nowrap;
}
._model-check_gma8r_262 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  color: #ffffffe8;
}
._select-wrapper_1nzde_1 {
  position: relative;
}
._select-btn_1nzde_5 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff0f;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffd9;
  transition: background 0.2s ease;
}
._select-btn_1nzde_5:hover {
  background: #ffffff1a;
}
._select-btn_1nzde_5 svg {
  color: #ffffff80;
}
._dropdown_1nzde_26 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-width: 100px;
  background: #1e2021fa;
  box-shadow: 0 4px 16px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
._dropdown-item_1nzde_41 {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #ffffffbf;
  transition: all 0.15s ease;
}
._dropdown-item_1nzde_41:hover {
  background: #ffffff14;
  color: #fff;
}
._dropdown-item_1nzde_41._active_1nzde_53 {
  background: #ef319f26;
  color: #ef319f;
}
._model-select-panel_1nzde_58 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 8px;
}
._aspect-ratio-select_1l5yj_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  min-width: 320px;
  background: #1e2021fa;
  box-shadow: 0 8px 32px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
._section_1l5yj_14 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._section-title_1l5yj_20 {
  line-height: 20px;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
}
._ratio-grid_1l5yj_30 {
  display: flex;
  overflow: hidden;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #ffffff0f;
}
._ratio-item_1l5yj_39 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  gap: 6px;
  padding: 8px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
._ratio-item_1l5yj_39:hover:not(._selected_1l5yj_54) {
  background: #ffffff0f;
}
._ratio-item_1l5yj_39._selected_1l5yj_54 ._ratio-icon_1l5yj_57 {
  border-color: #ffffffe8;
}
._ratio-item_1l5yj_39._selected_1l5yj_54 ._ratio-label_1l5yj_60 {
  color: #ffffffe8;
}
._ratio-indicator_1l5yj_64 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 8px;
  background: #ffffff1f;
  pointer-events: none;
}
._ratio-icon_1l5yj_57 {
  position: relative;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  transition: border-color 0.2s ease;
}
._ratio-label_1l5yj_60 {
  position: relative;
  z-index: 1;
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #eff0f0;
  transition: color 0.2s ease;
}
._duration-grid_1l5yj_95 {
  display: flex;
  overflow: hidden;
  gap: 8px;
  padding: 4px;
  border-radius: 28px;
  background: #ffffff0f;
}
._duration-item_1l5yj_104 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 24px;
  background: transparent;
  cursor: pointer;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #fff9;
  transition: color 0.2s ease;
}
._duration-item_1l5yj_104:hover:not(._selected_1l5yj_54) {
  color: #fffc;
}
._duration-item_1l5yj_104._selected_1l5yj_54 {
  color: #ffffffe8;
}
._duration-indicator_1l5yj_128 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 24px;
  background: #ffffff1f;
  pointer-events: none;
}
._credit-cost_1l4p5_1 {
  display: inline-flex;
  overflow: hidden;
  align-items: stretch;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: #ffffff0f;
  cursor: pointer;
  transition: all 0.2s ease;
}
._credit-cost_1l4p5_1:hover:not(._disabled_1l4p5_12) {
  transform: scale(1.02);
}
._credit-cost_1l4p5_1:hover:not(._disabled_1l4p5_12)
  ._credits-section_1l4p5_15 {
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px 0 0 10px;
}
._credit-cost_1l4p5_1:hover:not(._disabled_1l4p5_12) ._send-section_1l4p5_19 {
  border-radius: 10px 0 0 10px;
  opacity: 0.85;
}
._credit-cost_1l4p5_1:active:not(._disabled_1l4p5_12) {
  transform: scale(0.98);
}
._credit-cost_1l4p5_1._disabled_1l4p5_12 {
  opacity: 0.5;
  cursor: not-allowed;
}
._credits-section_1l4p5_15 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  height: 32px;
  transition: background 0.2s ease;
}
._credits-icon_1l4p5_40 {
  flex-shrink: 0;
  color: #fff;
}
._credits-value_1l4p5_45 {
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
._send-section_1l4p5_19 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  background: #ef319f;
  transition: background 0.2s ease;
}
._send-section_1l4p5_19 svg {
  flex-shrink: 0;
  color: #1a1a1a;
}
._character-chain-tag_1j1ev_1 {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
._character-chain-tag-inner_1j1ev_7 {
  display: inline-flex;
  overflow: visible;
  position: relative;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  background-color: #ffffff14;
  transform: translateY(-1px);
}
._character-chain-tag-inner_1j1ev_7:hover {
  background-color: #ffffff1f;
}
._character-chain-tag-inner_1j1ev_7:hover
  ._character-chain-tag-remove_1j1ev_22 {
  visibility: visible;
  opacity: 1;
}
._character-chain-tag-image_1j1ev_27 {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  object-fit: cover;
}
._character-chain-tag-text_1j1ev_34 {
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 18px;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 13px;
}
._character-chain-tag-remove_1j1ev_22 {
  display: flex;
  visibility: hidden;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #000000b3;
  opacity: 0;
  cursor: pointer;
  color: #fff;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
._character-chain-tag-remove_1j1ev_22:hover {
  background: #ef319f;
}
._slate-editor_vwsj0_1 {
  overflow: hidden auto;
  min-height: 60px;
  max-height: 120px;
}
._slate-editor_vwsj0_1::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}
._slate-editor_vwsj0_1::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #ffffff21;
}
._slate-editable_vwsj0_15 {
  min-height: 60px;
  outline: none;
  line-height: 24px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  color: #ffffffe8;
  caret-color: #ffffffe8;
}
._slate-editable_vwsj0_15::placeholder {
  color: #fff6;
}
._slate-editable_vwsj0_15 [data-slate-placeholder="true"] {
  position: absolute !important;
  top: 0 !important;
  opacity: 0.4;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
._slate-editable_vwsj0_15 p {
  margin: 0;
  padding: 0;
}
._character-refer_77fgk_1 {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 526px;
  background: #1e2021fa;
  box-shadow: 0 4px 24px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
._asset-header_77fgk_11 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
._asset-title-sub_77fgk_18 {
  display: flex;
  align-items: center;
  gap: 14px;
}
._asset-tab_77fgk_24 {
  cursor: pointer;
  line-height: 17px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff7a;
  transition: all 0.2s ease-in-out;
}
._asset-tab_77fgk_24:hover {
  color: #ffffffb3;
}
._asset-tab-active_77fgk_38 {
  color: #ffffffe8;
}
._asset-list_77fgk_42 {
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  row-gap: 8px;
  margin-top: 14px;
  min-height: 120px;
  max-height: 120px;
}
._asset-list_77fgk_42::-webkit-scrollbar {
  width: 4px;
}
._asset-list_77fgk_42::-webkit-scrollbar-track {
  background: transparent;
}
._asset-list_77fgk_42::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff1a;
}
._asset-list_77fgk_42::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._asset-grid_77fgk_67 {
  display: flex;
  scroll-behavior: smooth;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
  width: 100%;
}
._asset-item_77fgk_76 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 156px;
  min-width: 156px;
  height: 48px;
  background-color: #ffffff0f;
  cursor: pointer;
  transition: opacity 0.1s ease;
}
._asset-item_77fgk_76:hover {
  opacity: 0.7;
}
._asset-item_77fgk_76:active {
  opacity: 0.5;
}
._asset-create_77fgk_97 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #fff;
}
._asset-avatar_77fgk_106 {
  flex-shrink: 0;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  background-color: #ffffff0a;
  object-fit: contain;
}
._asset-name_77fgk_115 {
  display: -webkit-box;
  overflow: hidden;
  flex: 1;
  line-height: 18px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffb3;
  -webkit-box-orient: vertical;
}
._asset-footer_77fgk_131 {
  padding: 12px 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #fff6;
}
._loading-skeleton_77fgk_139 {
  border-radius: 8px;
  width: 156px;
  min-width: 156px;
  height: 48px;
  background: #ffffff0d;
  animation: _skeleton-pulse_77fgk_1 1.5s ease-in-out infinite;
}
@keyframes _skeleton-pulse_77fgk_1 {
  0%,
  to {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}
._canvas-chat_noous_1 {
  position: relative;
  padding: 12px;
  border: none;
  border-radius: 20px;
  width: 100%;
  background: #262626;
  box-shadow: 0 4px 32px #0000001a;
}
._canvas-chat_noous_1:before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  padding: 1px;
  border: none;
  border-radius: 20px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
  content: "";
}
._tabs_noous_27 {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
._tab_noous_27 {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: #ffffff80;
  transition: all 0.2s ease;
}
._tab_noous_27:hover {
  color: #ffffffbf;
}
._tab_noous_27._active_noous_47 {
  background: #ffffff14;
  color: #fff;
}
._images-area_noous_52 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  border: 2px dashed transparent;
  border-radius: 12px;
  transition: all 0.2s ease;
}
._sticker-inline_noous_63 {
  margin-bottom: 0;
}
._drag-over_noous_67 {
  border-color: #ef319f;
  background: #ef319f14;
}
._drag-over_noous_67 ._upload-btn_noous_71 {
  border-color: #ef319f;
  background: #ef319f26;
  color: #ef319f;
}
._image-item_noous_77 {
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #353838;
}
._image-index_noous_87 {
  display: flex;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #00000080;
  font-weight: 500;
  font-size: 11px;
  color: #fff;
}
._image-preview_noous_104 {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._image-remove_noous_111 {
  display: flex;
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #000000b3;
  opacity: 0;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  transition: opacity 0.2s ease;
}
._image-item_noous_77:hover ._image-remove_noous_111 {
  opacity: 1;
}
._image-remove_noous_111:hover {
  background: #ef319f;
}
._image-progress_noous_137 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #0009;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
}
._upload-btn_noous_71 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  color: #fff9;
  transition: all 0.2s ease;
}
._upload-btn_noous_71:hover {
  border-color: #fff6;
  background: #ffffff0d;
  color: #fffc;
}
._role-assets-tags_noous_174 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
._role-asset-capsule_noous_181 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  background: #ffffff14;
  transition: background 0.2s ease;
}
._role-asset-capsule_noous_181:hover {
  background: #ffffff1f;
}
._role-asset-capsule_noous_181:hover ._capsule-remove_noous_193 {
  opacity: 1;
}
._capsule-image_noous_197 {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  object-fit: cover;
}
._capsule-name_noous_204 {
  font-weight: 500;
  font-size: 13px;
  color: #ffffffd9;
}
._capsule-remove_noous_193 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #ffffff26;
  opacity: 0;
  cursor: pointer;
  font-size: 10px;
  color: #ffffffb3;
  transition: all 0.2s ease;
}
._capsule-remove_noous_193:hover {
  background: #ef319f;
  color: #fff;
}
._editor-area_noous_231 {
  min-height: 60px;
  max-height: 120px;
}
._slate-editable_noous_236 {
  overflow: hidden auto;
  min-height: 60px;
  max-height: 120px;
  line-height: 24px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  color: #ffffffe8;
  caret-color: #ffffffe8;
}
._slate-editable_noous_236::placeholder {
  color: #fff6;
}
._slate-editable_noous_236:focus-visible {
  outline: none;
}
._slate-editable_noous_236::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}
._slate-editable_noous_236::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #ffffff21;
}
._slate-paragraph_noous_261 {
  margin: 0;
  padding: 0;
}
._role-asset-tag_noous_266 {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
._role-asset-tag-inner_noous_272 {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 2px 8px 2px 4px;
  border-radius: 6px;
  background-color: #ffffff14;
  transform: translateY(1px);
}
._role-asset-tag-inner_noous_272:hover {
  background-color: #ffffff1f;
}
._role-asset-tag-inner_noous_272:hover ._role-asset-tag-remove_noous_286 {
  visibility: visible;
  opacity: 1;
}
._role-asset-tag-image_noous_291 {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  object-fit: cover;
}
._role-asset-tag-text_noous_298 {
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 18px;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 13px;
}
._role-asset-tag-remove_noous_286 {
  visibility: hidden;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 10;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #000000b3;
  opacity: 0;
  cursor: pointer;
  font-size: 10px;
  color: #fff;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
._role-asset-tag-remove_noous_286:hover {
  background: #ef319f;
}
._toolbar_noous_330 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
._toolbar-left_noous_339 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._toolbar-right_noous_345 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._select-wrapper_noous_351 {
  position: relative;
}
._select-btn_noous_355 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff0f;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffd9;
  transition: background 0.2s ease;
}
._select-btn_noous_355:hover {
  background: #ffffff1a;
}
._select-btn_noous_355 svg {
  color: #ffffff80;
}
._dropdown_noous_376 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-width: 100px;
  background: #1e2021fa;
  box-shadow: 0 4px 16px #0006;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
._dropdown-item_noous_391 {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #ffffffbf;
  transition: all 0.15s ease;
}
._dropdown-item_noous_391:hover {
  background: #ffffff14;
  color: #fff;
}
._dropdown-item_noous_391._active_noous_47 {
  background: #ef319f26;
  color: #ef319f;
}
._dropdown-divider_noous_408 {
  margin: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
._model-select-wrapper_noous_413,
._aspect-ratio-select-wrapper_noous_421,
._character-refer-wrapper_noous_429 {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 100;
  margin-bottom: 8px;
}
._workflow-btn_noous_437 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 20px;
  background: #ef319f26;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ef319f;
  transition: background 0.2s ease;
}
._workflow-btn_noous_437:hover {
  background: #ef319f40;
}
._workflow-btn_noous_437 svg {
  color: #ef319f;
}
._asset-btn_noous_458 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff0f;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffd9;
  transition: background 0.2s ease;
}
._asset-btn_noous_458:hover {
  background: #ffffff1a;
}
._asset-btn_noous_458 svg {
  color: #ffffff80;
}
._credits_noous_479 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #ffffff0f;
}
._credits-icon_noous_488 {
  font-size: 14px;
}
._credits-value_noous_492 {
  font-weight: 600;
  font-size: 13px;
  color: #ffffffe6;
}
._send-btn_noous_498 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  background: #ef319f;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}
._send-btn_noous_498:hover {
  background: #f542ab;
  transform: scale(1.05);
}
._send-btn_noous_498:active {
  transform: scale(0.98);
}
._send-btn_noous_498:disabled {
  background: #ef319f66;
  cursor: not-allowed;
}
._send-btn_noous_498:disabled:hover {
  transform: none;
}
.img-loader-with-history {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}
.img-loader-with-history .main-image {
  overflow: hidden;
  flex: 1;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.img-loader-with-history .main-image:hover {
  box-shadow: 0 8px 32px #0003;
}
.img-loader-with-history .main-image:hover .hogi-img-loader-cover {
  transform: scale(1.02);
}
.img-loader-with-history .main-image .history-entry-button {
  display: inline-flex;
  position: absolute;
  right: 8px;
  top: 8px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  height: 27px !important;
  min-height: 27px !important;
  background: #0000004d;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  line-height: 15px;
  text-transform: capitalize;
  font-family:
    Roboto,
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
}
.img-loader-with-history .main-image .history-entry-button:hover {
  box-shadow: none;
  transform: scale(1.05);
}
.img-loader-with-history .main-image .history-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
}
.img-loader-with-history .history-panel {
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-right: -16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 20px 20px 0;
  width: 109px;
  background: #272929;
  animation: slide-in 0.3s ease-out;
}
.img-loader-with-history .history-panel .history-images-container {
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 16px 32px;
  width: 100%;
  scrollbar-width: none;
}
.img-loader-with-history
  .history-panel
  .history-images-container::-webkit-scrollbar {
  display: none;
}
.img-loader-with-history
  .history-panel
  .history-images-container
  .history-thumbnail {
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 80px;
  height: 80px;
  opacity: 0.8;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
}
.img-loader-with-history
  .history-panel
  .history-images-container
  .history-thumbnail:hover {
  opacity: 1;
}
.img-loader-with-history
  .history-panel
  .history-images-container
  .history-thumbnail.selected {
  border: 2px solid #eff0f0;
  opacity: 1;
}
.img-loader-with-history .history-panel .history-panel-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 109px;
  height: 60px;
  background: linear-gradient(transparent, #2225258f);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.img-loader-with-history .history-panel .change-button {
  display: flex;
  position: absolute;
  left: 26px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  min-width: 32px;
  max-height: 32px;
  background: #ef319f;
  cursor: pointer;
  line-height: 16px;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #f8f7f7;
  transition: all 0.2s ease;
}
.img-loader-with-history .history-panel .change-button:hover {
  background: #d42d8a;
  transform: translateY(-1px);
}
.img-loader-with-history .history-panel .change-button:active {
  transform: translateY(0);
}
.img-loader-with-history .history-panel .change-button span {
  text-transform: capitalize;
  white-space: nowrap;
}
.img-loader-with-history .history-panel .history-confirm-btn {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 16px;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  min-height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  transform: translate(-50%);
  transition: background-color 0.2s ease;
}
.img-loader-with-history .history-panel .history-confirm-btn:hover {
  background-color: #d1287a;
}
.img-loader-with-history .history-panel .history-confirm-btn-text {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #f8f7f7;
}
.img-loader-with-history .image-list-panel {
  display: flex;
  visibility: visible;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  box-sizing: border-box;
  padding: 16px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 100%;
  background-color: #1a1a1a;
  opacity: 1;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out,
    width 0.3s ease-in-out,
    padding 0.3s ease-in-out;
}
.img-loader-with-history .image-list-panel.closed {
  visibility: hidden;
  padding: 0;
  opacity: 0;
}
.img-loader-with-history .image-list-panel .history-images-container {
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: flex-start;
  flex: 1;
  gap: 12px;
  box-sizing: border-box;
  padding-bottom: 64px;
  width: 100%;
  height: calc(100% - 80px);
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.img-loader-with-history
  .image-list-panel
  .history-images-container::-webkit-scrollbar {
  display: none;
}
.img-loader-with-history .image-list-panel .history-images-container.dragging {
  cursor: grabbing;
}
.img-loader-with-history
  .image-list-panel
  .history-images-container
  .history-thumbnail {
  box-sizing: border-box;
}
.img-loader-with-history
  .image-list-panel
  .history-images-container
  .history-thumbnail:hover
  .hogi-img-loader-cover {
  transform: scale(1.02);
}
.img-loader-with-history
  .image-list-panel
  .history-images-container
  .history-thumbnail.selected {
  border: 2px solid #eff0f0;
  opacity: 1;
}
.img-loader-with-history .image-list-panel .history-confirm-btn {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 16px;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  min-height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  transform: translate(-50%);
  transition: background-color 0.2s ease;
}
.img-loader-with-history .image-list-panel .history-confirm-btn:hover {
  background-color: #d1287a;
}
.img-loader-with-history .image-list-panel .history-confirm-btn-text {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #f8f7f7;
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(20px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@media (max-width: 768px) {
  .img-loader-with-history .main-image-container {
    width: 280px;
    height: 380px;
  }
  .img-loader-with-history .history-panel {
    width: 90px;
    height: 380px;
  }
  .img-loader-with-history .history-panel .history-images-container {
    gap: 10px;
    padding: 12px 12px 12px 24px;
  }
  .img-loader-with-history
    .history-panel
    .history-images-container
    .history-thumbnail {
    width: 64px;
    height: 64px;
  }
  .img-loader-with-history .history-panel .history-panel-mask {
    width: 90px;
  }
  .img-loader-with-history .history-panel .change-button {
    left: 20px;
    font-size: 11px;
  }
}
.hogi-role-sync-asset-button {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  outline: none;
  background: #ef319f;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hogi-role-sync-asset-button:hover {
  opacity: 0.9;
}
.hogi-role-sync-asset-button:active {
  opacity: 0.8;
}
.hogi-role-sync-asset-button__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}
.hogi-role-sync-asset-button__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hogi-role-sync-asset-button__label {
  display: inline-block;
  margin-left: 2px;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #f8f7f7;
  white-space: nowrap;
}
._action-toast-container_1tsua_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 24px;
  width: fit-content;
  max-width: 600px;
  height: 44px;
  background-color: #fff;
}
._action-toast-text_1tsua_14 {
  overflow: hidden;
  flex: 1;
  padding: 0 4px;
  line-height: 20px;
  text-overflow: ellipsis;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    PingFang SC,
    sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #000000a3;
  letter-spacing: 0;
  white-space: nowrap;
}
._action-toast-button-wrapper_1tsua_30 {
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #ef319f;
  border-radius: 8px;
}
._action-toast-button_1tsua_30 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 4px 6px;
  border: none;
  border-radius: 7px;
  min-width: 32px;
  max-height: 32px;
  background: transparent;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ef319f;
  letter-spacing: 0;
  white-space: nowrap;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
._action-toast-button_1tsua_30:hover {
  background-color: #ef319f0d;
}
._action-toast-button_1tsua_30:active {
  background-color: #ef319f1a;
}
.hogi-script-card {
  position: relative;
  padding: 20px;
  border-radius: 32px;
  width: fit-content;
  height: fit-content;
  min-height: 0;
  background-color: #ffffff0a;
  pointer-events: all;
}
.hogi-script-card.script-highlighted {
  outline: 3px solid transparent;
  animation: script-highlight-fade 5s linear forwards;
}
.hogi-script-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.hogi-script-card-header-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #ef319f;
}
.hogi-script-card-header-name {
  line-height: 20px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  white-space: nowrap;
}
.hogi-script-card-header-btn {
  display: flex;
  align-items: center;
  margin-left: 10px;
  border: none;
  border-radius: 30px;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
}
.hogi-script-card-header-btn:first-of-type {
  margin-left: auto;
}
.hogi-script-card-header-btn:hover {
  padding: 1px;
  background-color: #f5f5f5;
}
.hogi-script-card-header-btn:hover .hogi-script-card-header-btn-icon {
  color: #66f;
}
.hogi-script-card-header-btn:hover .hogi-script-card-header-btn-text {
  padding: 0 10px;
  max-width: 200px;
  opacity: 1;
}
.hogi-script-card-header-btn-icon {
  padding: 10px;
  border-radius: 50%;
  background-color: #1a1a1a;
  color: #fff;
  transition: all 0.3s;
}
.hogi-script-card-header-btn-text {
  overflow: hidden;
  max-width: 0;
  height: 40px;
  opacity: 0;
  line-height: 40px;
  font-size: 14px;
  color: #1a1a1a;
  transition: all 0.3s;
}
.hogi-script-card-content {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
  border-radius: 16px;
  width: 100%;
  height: fit-content;
  background: #232425;
}
.hogi-script-card-content-inner {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  height: fit-content;
  background-color: #161718;
}
.hogi-script-card-summary {
  width: inherit;
}
.hogi-script-card-outline {
  border-radius: 10px;
}
.hogi-script-card-outline-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hogi-script-card-outline-title-name {
  line-height: 23px;
  font-weight: 600;
  font-size: 18px;
  color: #ffffffb2;
}
.hogi-script-card-outline-title-btn {
  margin-left: 10px;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
}
.hogi-script-card-outline-title-btn:first-of-type {
  margin-left: auto;
}
.hogi-script-card-outline-title-btn:hover {
  color: #ef319f;
}
.hogi-script-card-outline-detail {
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 4px solid rgba(255, 255, 255, 0.0588235294);
  width: 900px;
}
.hogi-script-card-outline-detail-item {
  display: flex;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.hogi-script-card-outline-detail-item:not(:first-child) {
  margin-top: 10px;
}
.hogi-script-card-outline-detail-key {
  flex-shrink: 0;
  width: 50px;
  height: 20px;
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.hogi-script-card-outline-detail-value {
  flex: 1;
  line-height: 20px;
  font-size: 14px;
  color: #ffffff80;
}
.hogi-script-card-outline-detail-input {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid #383838;
  border-radius: 12px;
  height: 110px;
  outline: none;
  background-color: #2a2a2a;
  resize: none;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
  transition: all 0.3s;
}
.hogi-script-card-outline-detail-input:disabled {
  padding: 0;
  border-color: transparent;
  background-color: transparent;
}
.hogi-script-card-storyboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.hogi-script-card-storyboard-item {
  border-radius: 10px;
}
.hogi-script-card-storyboard-title {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  transition: all 0.3s;
}
.hogi-script-card-storyboard-detail {
  margin-top: 8px;
}
.hogi-script-card-storyboard-detail-item {
  display: flex;
}
.hogi-script-card-storyboard-detail-item:not(:first-child) {
  margin-top: 10px;
}
.hogi-script-card-storyboard-detail-key {
  flex-shrink: 0;
  width: 50px;
  height: 20px;
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.hogi-script-card-storyboard-detail-value {
  flex: 1;
  padding-left: 12px;
  border-left: 4px solid rgba(255, 255, 255, 0.0588235294);
  line-height: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
.hogi-script-card-storyboard-detail-input {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid #383838;
  border-radius: 12px;
  height: 110px;
  outline: none;
  background-color: #2a2a2a;
  resize: none;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
  transition: all 0.3s;
}
.hogi-script-card-storyboard-detail-input:disabled {
  padding: 0;
  border-color: transparent;
  background-color: transparent;
}
.hogi-script-card-role {
  border-radius: 10px;
  width: inherit;
}
.hogi-script-card-role-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hogi-script-card-role-title-name {
  line-height: 23px;
  font-weight: 600;
  font-size: 18px;
  color: #ffffffb2;
}
.hogi-script-card-role-title-btn {
  margin-left: 10px;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
}
.hogi-script-card-role-title-btn:first-of-type {
  margin-left: auto;
}
.hogi-script-card-role-title-btn:hover {
  color: #ef319f;
}
.hogi-script-card-role-detail {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
}
.hogi-script-card-mask {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #00000080;
}
.hogi-script-card-mask-icon {
  animation: script-card-loading 1s linear infinite;
}
@keyframes script-highlight-fade {
  0% {
    outline: 3px solid var(--primary-border, #ef319f);
  }
  40% {
    outline: 3px solid var(--primary-border, #ef319f);
  }
  to {
    outline: 3px solid transparent;
  }
}
.hogi-role-card-node-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hogi-role-card-node-detail-header-btn {
  padding: 8px;
  border-radius: 8px;
  background-color: #ffffff1a;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s;
}
.hogi-role-card-node-detail-header-btn:hover {
  background-color: #fff3;
  color: #66f;
}
@keyframes script-card-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.hogi-script-card-cast-item-header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  height: 150px;
  background-color: #1a1d1f;
  color: #fff;
}
.hogi-script-card-cast-item-header-content {
  flex: 1;
  height: 110px;
}
.hogi-script-card-cast-item-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hogi-script-card-cast-item-title-row .hogi-script-card-cast-item-title,
.hogi-script-card-cast-item-title-row .hogi-script-card-cast-item-title-input {
  flex: 1;
}
.hogi-script-card-cast-item-actions {
  display: flex;
  visibility: hidden;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}
.hogi-script-card-cast-item-header:hover .hogi-script-card-cast-item-actions,
.hogi-script-card-cast-item-header.is-editing
  .hogi-script-card-cast-item-actions {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.hogi-script-card-cast-item-btn {
  padding: 8px;
  border-radius: 8px;
  background-color: #ffffff1a;
  cursor: pointer;
  color: #fff;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.hogi-script-card-cast-item-btn:hover {
  background-color: #fff3;
  color: #66f;
  transform: translateY(-1px);
}
.hogi-script-card-cast-item-title {
  margin: 0 0 6px;
  height: 24px;
  line-height: 24px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.hogi-script-card-cast-item-title-input {
  margin: 0 0 6px;
  padding: 0;
  border: none;
  width: 100%;
  height: 24px;
  outline: none;
  background: transparent;
  line-height: 24px;
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.hogi-script-card-cast-item-title-input::placeholder {
  color: #ffffff80;
}
.hogi-script-card-cast-item-title-input:focus {
  color: #fff;
}
.hogi-script-card-cast-item-desc {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  max-width: 660px;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  line-height: 1.6;
  font-family: inherit;
  font-size: 14px;
  color: #c9c9c9;
  overscroll-behavior: contain;
}
.hogi-script-card-cast-item-desc::-webkit-scrollbar {
  width: 4px;
}
.hogi-script-card-cast-item-desc::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-script-card-cast-item-desc::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff4d;
}
.hogi-script-card-cast-item-desc::-webkit-scrollbar-thumb:hover {
  background: #ffffff80;
}
.hogi-script-card-cast-item-desc-input {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 660px;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  outline: none;
  background: transparent;
  resize: none;
  line-height: 1.6;
  font-family: inherit;
  font-size: 14px;
  color: #c9c9c9;
  overscroll-behavior: contain;
}
.hogi-script-card-cast-item-desc-input::-webkit-scrollbar {
  width: 4px;
}
.hogi-script-card-cast-item-desc-input::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-script-card-cast-item-desc-input::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff4d;
}
.hogi-script-card-cast-item-desc-input::-webkit-scrollbar-thumb:hover {
  background: #ffffff80;
}
.hogi-script-card-cast-item-desc-input::placeholder {
  color: #fff6;
}
.hogi-script-card-cast-item-desc-input:focus {
  color: #c9c9c9;
}
.hogi-scene-card {
  --scene-card-toolbar-height: 56px;
  position: relative;
  padding: 20px;
  border-radius: 32px;
  width: fit-content;
  height: fit-content;
  min-height: 100%;
  background-color: #ffffff0a;
  pointer-events: all;
}
.hogi-scene-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.hogi-scene-card-header-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #ef319f;
}
.hogi-scene-card-header-name {
  line-height: 20px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  white-space: nowrap;
}
.hogi-scene-card-add-asset-wrapper {
  visibility: hidden;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1001;
  opacity: 0;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
}
.hogi-scene-card-node {
  margin-top: 16px;
  border-radius: 16px;
  width: 100%;
  height: fit-content;
}
.hogi-scene-card-node-detail {
  display: grid;
  grid-template-columns: repeat(var(--scene-card-grid-cols, 3), 1fr);
  gap: 15px;
  row-gap: 100px;
  margin: 10px 0 0;
  opacity: 1;
  transition: all 0.3s;
}
.hogi-scene-card-node-detail.active {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.hogi-scene-card-node-detail-item {
  box-sizing: border-box;
  border: none;
  width: 100%;
  background-color: transparent;
}
.hogi-scene-card-node-detail-cover-wrap {
  position: relative;
}
.hogi-scene-card-node-detail-opt {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;
  gap: 10px;
  opacity: 0.9;
  transition: all 0.2s;
}
.hogi-scene-card-node-detail-opt-item {
  padding: 6px;
  border-radius: 50%;
  background-color: #1a1d1f;
  cursor: pointer;
  color: #fff;
}
.hogi-scene-card-node-detail-opt-item:hover {
  color: #66f;
}
.hogi-scene-card-node-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
}
.hogi-scene-card-node-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border-radius: 12px;
  width: 680px;
  height: 150px;
  background-color: #1a1d1f;
  color: #fff;
}
.hogi-scene-card-node-detail-header-content {
  flex: 1;
  margin-right: 20px;
  height: 110px;
}
.hogi-scene-card-node-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hogi-scene-card-node-detail-header-btn {
  padding: 8px;
  border-radius: 8px;
  background-color: #ffffff1a;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s;
}
.hogi-scene-card-node-detail-header-btn:hover {
  background-color: #fff3;
  color: #66f;
}
.hogi-scene-card-node-detail-title {
  margin: 0 0 6px;
  height: 24px;
  line-height: 24px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.hogi-scene-card-node-detail-title-input {
  margin: 0 0 6px;
  padding: 0;
  border: none;
  width: 100%;
  height: 24px;
  outline: none;
  background: transparent;
  line-height: 24px;
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.hogi-scene-card-node-detail-title-input::placeholder {
  color: #ffffff80;
}
.hogi-scene-card-node-detail-title-input:focus {
  color: #fff;
}
.hogi-scene-card-node-detail-desc {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  max-width: 660px;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  line-height: 1.6;
  font-family: inherit;
  font-size: 14px;
  color: #c9c9c9;
  overscroll-behavior: contain;
}
.hogi-scene-card-node-detail-desc::-webkit-scrollbar {
  width: 4px;
}
.hogi-scene-card-node-detail-desc::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-scene-card-node-detail-desc::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff4d;
}
.hogi-scene-card-node-detail-desc::-webkit-scrollbar-thumb:hover {
  background: #ffffff80;
}
.hogi-scene-card-node-detail-desc-input {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 660px;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  outline: none;
  background: transparent;
  resize: none;
  line-height: 1.6;
  font-family: inherit;
  font-size: 14px;
  color: #c9c9c9;
  overscroll-behavior: contain;
}
.hogi-scene-card-node-detail-desc-input::-webkit-scrollbar {
  width: 4px;
}
.hogi-scene-card-node-detail-desc-input::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-scene-card-node-detail-desc-input::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #ffffff4d;
}
.hogi-scene-card-node-detail-desc-input::-webkit-scrollbar-thumb:hover {
  background: #ffffff80;
}
.hogi-scene-card-node-detail-desc-input::placeholder {
  color: #fff6;
}
.hogi-scene-card-node-detail-desc-input:focus {
  color: #c9c9c9;
}
.hogi-scene-card-node-detail-panels {
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 18px;
  width: fit-content;
}
.hogi-scene-card-node-detail-left {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--scene-card-toolbar-height);
  width: fit-content;
}
.hogi-scene-card-node-detail-left-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  width: fit-content;
  height: 433px;
  background: #1a1a1a;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hogi-scene-card-node-detail-left-wrap:hover:not(.scene-in-assets)
  .img-loader-with-history
  .main-image {
  border: 3px solid var(--primary-border, #ef319f);
}
.hogi-scene-card-node-detail-left-wrap .img-loader-with-history .main-image {
  border: 3px solid transparent;
  transition: border 0.3s ease-in-out;
}
.hogi-scene-card-node-detail-left-wrap.scene-highlighted
  .img-loader-with-history
  .main-image {
  border: 3px solid var(--primary-border, #ef319f);
}
.hogi-scene-card-node-detail-left-cover {
  height: 100%;
  object-fit: cover;
}
.hogi-scene-card-node-detail-left-wrap:not(.scene-in-assets)
  .img-loader-with-history
  .main-image:hover
  .hogi-img-loader-cover {
  transform: none !important;
}
.hogi-scene-card-node-detail .hogi-scene-card-add-asset-wrapper {
  visibility: visible;
  position: absolute;
  right: 8px;
  bottom: 8px;
  opacity: 1;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.hogi-scene-card-node-detail
  .hogi-scene-card-add-asset-wrapper:has(.hogi-scene-sync-asset-button),
.hogi-scene-card-node-detail
  .hogi-scene-card-add-asset-wrapper:has(.hogi-scene-add-asset-button) {
  right: 6px;
  bottom: 8px;
}
.hogi-scene-card-node-detail-left-opt {
  display: none;
  justify-content: flex-start;
  margin-top: 8px;
  width: 100%;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}
.hogi-scene-card-node-detail-left-opt.visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hogi-scene-card-node-detail-left-opt .hogi-scene-card-node-detail-opt-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  color: #ffffff91;
}
.hogi-scene-card-node-detail-left-opt
  .hogi-scene-card-node-detail-opt-item:hover {
  color: #fff;
}
.hogi-scene-card-node-detail-right {
  padding-bottom: var(--scene-card-toolbar-height);
  width: fit-content;
}
.hogi-scene-card-node-detail-right-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  width: fit-content;
  height: 433px;
  background: #1a1a1a;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hogi-scene-card-node-detail-right-cover {
  height: 100%;
  object-fit: contain;
}
.hogi-scene-card-node-detail-right-opt {
  display: none;
  justify-content: flex-start;
  margin-top: 8px;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}
.hogi-scene-card-node-detail-right-opt.visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hogi-scene-card-node-detail-right-opt .hogi-scene-card-node-detail-opt-item {
  padding: 6px;
  border-radius: 50%;
  background-color: #1a1d1f;
  cursor: pointer;
  color: #fff;
}
.hogi-scene-card-node-detail-right-opt
  .hogi-scene-card-node-detail-opt-item:hover {
  color: #66f;
}
.hogi-scene-card-node-detail-name {
  overflow: hidden;
  padding: 0 10px;
  height: 40px;
  background: linear-gradient(90deg, #050505, #6b6b6b, #2b2b2b);
  line-height: 40px;
  text-overflow: ellipsis;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.hogi-scene-card-active {
  z-index: 9999 !important;
}
.hogi-scene-card-toolbar-container {
  position: relative;
  width: fit-content;
}
.hogi-scene-card-toolbar-wrapper {
  display: flex;
  overflow: visible;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background-color: #232425;
  box-shadow: 0 4px 24px #00000014;
  white-space: nowrap;
}
.hogi-scene-card-toolbar .hogi-scene-card-node-detail-toolbar {
  overflow: visible;
  position: absolute;
  width: fit-content;
  max-width: none;
  white-space: nowrap;
}
.hogi-scene-card-toolbar-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 10px;
  min-width: 64px;
  height: 36px;
  background-color: #ef319f;
  cursor: pointer;
  transition: all 0.2s;
}
.hogi-scene-card-toolbar-tab:hover {
  background-color: #ef319f;
  opacity: 0.8;
}
.hogi-scene-card-toolbar-tab.saved {
  background-color: #353838;
}
.hogi-scene-card-toolbar-tab.saved:hover {
  background-color: #353838;
  opacity: 0.8;
}
.hogi-scene-card-toolbar-tab.saved .hogi-scene-card-toolbar-save {
  color: #fff7fb;
}
.hogi-scene-card-toolbar-tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #f8f7f7;
}
.saved .hogi-scene-card-toolbar-tab-icon {
  color: #fff7fb;
}
.hogi-scene-card-toolbar-check-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff7fb;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: transparent;
  color: #fff7fb;
}
.hogi-scene-card-toolbar-save {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #f8f7f7;
}
.hogi-scene-card-toolbar-btn {
  position: relative;
  border-radius: 8px;
  background-color: transparent !important;
}
.hogi-scene-card-toolbar-btn:not(:first-of-type):after {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 2px;
  width: 1px;
  height: 18px;
  background-color: #ffffff0f;
  content: "";
  transform: translateY(-50%);
}
.hogi-scene-card-toolbar-btn:hover {
  box-shadow: none !important;
}
.hogi-scene-card-toolbar-menu {
  display: flex;
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  z-index: 1000;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 16px;
  min-width: 160px;
  background-color: #111213;
  box-shadow: 0 4px 24px #00000014;
}
.hogi-scene-card-toolbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.hogi-scene-card-toolbar-menu-item:hover {
  background-color: #ffffff1a;
}
.hogi-scene-card-toolbar-menu-item svg {
  flex-shrink: 0;
  color: #ffffff91;
}
.hogi-scene-card-toolbar-menu-text {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff91;
  white-space: nowrap;
}
.hogi-scene-card-image-list {
  overflow: visible;
  position: relative;
  width: 0;
  height: 90px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}
.hogi-scene-card-image-list.visible {
  opacity: 1;
  transform: translateY(0);
}
.hogi-scene-card-image-list-container {
  display: flex;
  overflow: auto visible;
  gap: 8px;
  padding: 4px 0;
  -webkit-user-select: none;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.hogi-scene-card-image-list-container::-webkit-scrollbar {
  width: 1.5px;
  height: 1.5px;
}
.hogi-scene-card-image-list-container::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-scene-card-image-list-container::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.hogi-scene-card-image-list-container::-webkit-scrollbar-thumb:hover {
  background: #fff6;
}
.hogi-scene-card-image-list-item {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 86px;
  transition: opacity 0.2s;
}
.hogi-scene-card-image-list-item .hogi-scene-card-image-list-item-image {
  border: 1px solid transparent;
  opacity: 0.4 !important;
  transition: all 0.2s;
}
.hogi-scene-card-image-list-item.visually-selected
  .hogi-scene-card-image-list-item-image {
  border: 2px solid #eff0f0;
  border-radius: 8px;
  opacity: 1 !important;
}
.hogi-scene-card-image-list-item-wrapper {
  overflow: visible;
  position: relative;
  padding-top: 4px;
  width: 100%;
  height: 100%;
}
.hogi-scene-card-image-list-item-image {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  background-color: #353838;
  object-fit: cover;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: all 0.2s ease;
}
.hogi-scene-card-image-list-item-check {
  display: flex;
  position: absolute;
  right: -3px;
  top: -1px;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: #eff0f0;
  color: #353838;
}
.hogi-scene-card-image-list-item-choose-btn {
  position: absolute;
  left: 50%;
  bottom: 7px;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background-color: #b02779;
  cursor: pointer;
  line-height: 7px;
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 8px;
  color: #fabde1;
  white-space: nowrap;
  transform: translate(-50%);
  transition: all 0.2s;
}
.hogi-scene-card-image-list-item-choose-btn:hover {
  background-color: #9a2068;
}
.tl-shape[data-shape-type="video_card"] {
  outline: 1px solid transparent;
}
.hogi-video-toolbar-container {
  position: relative;
  width: fit-content;
}
.hogi-video-toolbar-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background-color: #232425;
  box-shadow: 0 3px 18px #00000014;
}
.hogi-video-toolbar-btn {
  display: flex;
  position: relative;
  z-index: 100001;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 6px;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  color: #ffffff91;
  transition: all 0.2s;
}
.hogi-video-toolbar-btn:hover {
  background-color: #ffffff1a;
  color: #fff;
}
.hogi-video-toolbar-btn.active {
  background-color: #ffffff26;
  color: #fff;
}
.hogi-video-download-anchor {
  display: inline-flex;
}
.hogi-video-download-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.hogi-video-download-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  width: 100%;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.hogi-video-download-menu-item:hover {
  background-color: #ffffff0f;
  color: #ffffffe6;
}
.hogi-video-download-menu-item-hd {
  align-items: flex-start;
}
.hogi-video-download-menu-text {
  white-space: nowrap;
}
.hogi-video-download-menu-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.hogi-video-download-menu-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.hogi-video-download-menu-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.hogi-video-download-menu-subtext {
  line-height: 13px;
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff7a;
  white-space: nowrap;
}
.hogi-video-download-menu-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  border-radius: 6px;
  height: 20px;
  background: #ef319f;
  line-height: 18px;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.22px;
}
.hogi-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 10;
  margin-bottom: 0;
  padding: 16px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  pointer-events: none;
}
.hogi-video-controls.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.hogi-video-controls:not(.hidden) {
  opacity: 1;
  transition: opacity 0.3s;
}
.hogi-video-controls .hogi-video-progress-container {
  position: relative;
  margin-bottom: 6px;
  width: 100%;
  height: 20px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
.hogi-video-controls .hogi-video-progress-container .hogi-video-progress-track {
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 12px;
  width: 100%;
  height: 4px;
  background-color: #ffffff0f;
  transform: translateY(-50%);
}
.hogi-video-controls
  .hogi-video-progress-container
  .hogi-video-progress-filled {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  border-radius: 12px;
  height: 4px;
  background-color: #fff;
  will-change: width;
  transform: translateY(-50%);
}
.hogi-video-controls .hogi-video-progress-container .hogi-video-progress-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  border-radius: 8px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  box-shadow: 0 0 8px #0000003d;
  opacity: 0;
  cursor: grab;
  pointer-events: none;
  will-change: transform, left;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
  touch-action: none;
}
.hogi-video-controls
  .hogi-video-progress-container
  .hogi-video-progress-thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}
.hogi-video-controls
  .hogi-video-progress-container
  .hogi-video-progress-thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.hogi-video-controls
  .hogi-video-progress-container:hover
  .hogi-video-progress-thumb,
.hogi-video-controls
  .hogi-video-progress-container.dragging
  .hogi-video-progress-thumb {
  opacity: 1;
  pointer-events: auto;
}
.hogi-video-controls .hogi-video-controls-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: auto;
}
.hogi-video-controls .hogi-video-controls-bottom .hogi-video-controls-left,
.hogi-video-controls .hogi-video-controls-bottom .hogi-video-controls-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hogi-video-controls .hogi-video-play-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.hogi-video-controls .hogi-video-play-btn:hover {
  color: #ffffff91;
}
.hogi-video-controls .hogi-video-play-btn:active {
  color: #ffffff80;
}
.hogi-video-controls .hogi-video-play-btn.loading .hogi-video-play-btn-loader {
  animation: hogi-video-loader-spin 1s linear infinite;
}
.hogi-video-controls .hogi-video-time {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
  white-space: nowrap;
}
.hogi-video-controls .hogi-video-time .hogi-video-time-current {
  color: #fff;
}
.hogi-video-controls .hogi-video-volume-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.hogi-video-controls .hogi-video-volume-btn:hover {
  color: #ffffff91;
}
.hogi-video-controls .hogi-video-volume-btn:active {
  color: #ffffff80;
}
.hogi-video-controls .hogi-video-fullscreen-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s;
}
.hogi-video-controls .hogi-video-fullscreen-btn:hover {
  color: #ffffff91;
}
.hogi-video-controls .hogi-video-fullscreen-btn:active {
  color: #ffffff80;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls {
  display: none !important;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls-enclosure {
  display: none !important;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls-panel {
  display: none !important;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls-play-button {
  display: none !important;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls-timeline {
  display: none !important;
}
.tl-hogi-video
  video:not(:fullscreen)::-webkit-media-controls-current-time-display {
  display: none !important;
}
.tl-hogi-video
  video:not(:fullscreen)::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls-mute-button {
  display: none !important;
}
.tl-hogi-video video:not(:fullscreen)::-webkit-media-controls-volume-slider {
  display: none !important;
}
.tl-hogi-video
  video:not(:fullscreen)::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
@keyframes hogi-video-loader-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.hogi-video-player-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.hogi-video-center-play-button {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100001;
  justify-content: center;
  align-items: center;
  padding: 25.143px;
  border-radius: 62.857px;
  background: #00000054;
  -webkit-backdrop-filter: blur(4.4px);
  backdrop-filter: blur(4.4px);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s,
    transform 0.3s;
  animation: hogi-video-center-play-fade-in 0.3s ease-out;
}
.hogi-video-center-play-button:hover {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1.05);
}
.hogi-video-center-play-button:active {
  transform: translate(-50%, -50%) scale(0.95);
}
.hogi-video-center-play-button .hogi-video-center-play-button-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 37.714px;
  height: 37.714px;
  color: #fff;
}
@keyframes hogi-video-center-play-fade-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.hogi-image-toolbar-container {
  visibility: hidden;
  position: relative;
  width: fit-content;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}
.hogi-image-toolbar-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background-color: #232425;
  box-shadow: 0 3px 18px #00000014;
}
.hogi-image-toolbar-btn {
  display: flex;
  position: relative;
  z-index: 100001;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 6px;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  color: #ffffff91;
  transition: all 0.2s;
}
.hogi-image-toolbar-btn:hover {
  background-color: #ffffff1a;
  color: #fff;
}
.tl-hogi-image:hover .hogi-image-toolbar-container {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hogi-image-missing-resource {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 40px);
  background: #000;
  font-size: 12px;
  color: #fff;
}
._mind-input_ll7q8_2 {
  position: relative;
  z-index: 2;
  width: 100%;
}
._mind-input_ll7q8_2 input[type="file"] {
  display: none;
}
._mind-input_ll7q8_2 button {
  border: none;
}
._input-bind-style_ll7q8_14 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._layout_ll7q8_20 {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 20px;
  width: 100%;
  box-shadow: 0 4px 32px #0000000a;
}
._layout_ll7q8_20:before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}
._sticker-upload-assets_ll7q8_44,
._sticker-upload-files_ll7q8_45,
._sticker-upload-styles_ll7q8_46 {
  display: flex;
  align-items: center;
  height: 60px;
}
._sticker-upload_ll7q8_44 {
  position: absolute;
  left: 12px;
  top: 0;
  z-index: 1;
}
._sticker-upload-icon_ll7q8_59 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 56px;
  height: 56px;
  background-color: #45494a;
  box-shadow: 0 8px 28px #0006;
  cursor: pointer;
  transform: rotate(-5deg);
}
._sticker-upload-images_ll7q8_72 {
  display: flex;
  position: relative;
  margin-bottom: 8px;
}
._img-container_ll7q8_78 {
  display: flex;
  position: relative;
  gap: 8px;
  border-radius: 12px;
  height: 60px;
}
._img-full_ll7q8_86 {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #353838;
}
._img-sort_ll7q8_95 {
  display: flex;
  position: absolute;
  left: 0.5px;
  top: 0.5px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #00000054;
}
._img-full-src_ll7q8_108 {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
._img-remove_ll7q8_116 {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 999;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
._img-ref-mask_ll7q8_126 {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 5px 16px;
  border-radius: 24px;
  width: 100%;
  height: 24px;
  background: #000000a3;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._img-ref-mask_ll7q8_126:hover {
  opacity: 1;
}
._img-ref-mask-icon_ll7q8_147 {
  line-height: 15px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.2px;
}
._slate-area-editable_ll7q8_158 {
  overflow: hidden auto;
  margin-top: -4px;
  height: 96px;
  line-height: 30px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  color: #ffffffe8;
  caret-color: #ffffff91;
}
._slate-area-editable_ll7q8_158::placeholder {
  color: #ffffff4a;
}
._slate-area-editable_ll7q8_158:focus-visible {
  outline: none;
}
._slate-area-editable_ll7q8_158::-webkit-scrollbar {
  width: 4px;
  height: 8px;
  background-color: transparent;
}
._slate-area-editable_ll7q8_158::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #ffffff21;
}
._slate-area-editable_ll7q8_158::-webkit-scrollbar-track {
  margin-top: 8px;
  margin-bottom: 8px;
}
._toolbar-container_ll7q8_188 {
  margin-top: 8px;
  min-height: 32px;
}
._toolbar-area_ll7q8_193 {
  display: flex;
  position: relative;
  z-index: 20;
  align-items: center;
  width: 100%;
  height: 100%;
}
._area-left_ll7q8_202 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._area-right_ll7q8_208 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  gap: 8px;
}
._v5-switch_ll7q8_216 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: #ffffffc7;
  transition: color 0.2s ease;
}
._v5-switch_ll7q8_216:hover {
  color: #fff;
}
._v5-switch-label_ll7q8_231 {
  line-height: 16px;
  font-size: 12px;
  white-space: nowrap;
}
._v5-switch-track_ll7q8_237 {
  position: relative;
  border-radius: 999px;
  width: 32px;
  height: 18px;
  background: #2b2f30;
  transition: background 0.2s ease;
}
._v5-switch-thumb_ll7q8_246 {
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  transition: transform 0.2s ease;
}
._v5-switch-on_ll7q8_257 {
  color: #fff;
}
._v5-switch-on_ll7q8_257 ._v5-switch-track_ll7q8_237 {
  background: #ef319f;
}
._v5-switch-on_ll7q8_257 ._v5-switch-thumb_ll7q8_246 {
  transform: translate(14px);
}
._input-icon_ll7q8_267 {
  width: 16px;
  height: 16px;
}
._send-button_ll7q8_272 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  width: 32px;
  height: 32px;
  background-color: #ef319f;
  cursor: pointer;
  color: #fff;
}
._send-button_ll7q8_272:disabled {
  background-color: #ef319f;
  opacity: 0.4;
  cursor: not-allowed;
}
._pause-button_ll7q8_289 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  width: 32px;
  height: 32px;
  background-color: #ffffff0f;
  cursor: pointer;
  color: #fff;
}
._pause-button_ll7q8_289:disabled {
  background-color: #ef319f;
  opacity: 0.4;
  cursor: not-allowed;
}
._pause-button_ll7q8_289:hover {
  box-shadow: none;
}
._modal-assets_ll7q8_309 {
  padding: 14px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 17px;
  width: 680px;
  min-width: 300px;
  min-height: 120px;
  background-color: #ffffff0f;
  box-shadow: 0 3px 57px #000000a3;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
._modal-effects_ll7q8_321 {
  overflow: hidden;
  padding: 20px 33px 0;
  border: 0.5px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 24px;
  height: 100%;
  min-height: 404px;
  background-color: #161718;
  box-shadow: 0 4px 80px #000000a3;
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}
._modal-effect-mask_ll7q8_336 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 79px;
  background: linear-gradient(180deg, #28282800, #282828);
}
._reference-side_ll7q8_345 {
  display: flex;
  align-items: center;
}
._reference-side-left_ll7q8_350 {
  display: flex;
  justify-content: center;
  width: 903px;
}
._reference-side-left_ll7q8_350 img {
  border: 0.5px solid rgba(0, 0, 0, 0.0392156863);
  border-radius: 20px;
  max-height: 544px;
  object-fit: cover;
}
._reference-side-right_ll7q8_362 img {
  margin-top: 16px;
}
._reference-side-right-img_ll7q8_366 {
  border: 1px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}
._reference-side-right-img-active_ll7q8_375 {
  padding: 4px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}
._modal-corner-close_ll7q8_385 {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
._reference-side-handle_ll7q8_394 {
  display: flex;
  align-items: center;
  margin-top: 40px;
}
._upload-assets_ll7q8_400,
._upload-files_ll7q8_401,
._upload-styles_ll7q8_402 {
  display: flex;
  overflow-x: scroll;
  gap: 8px;
  width: 100%;
}
._upload-assets_ll7q8_400::-webkit-scrollbar,
._upload-files_ll7q8_401::-webkit-scrollbar,
._upload-styles_ll7q8_402::-webkit-scrollbar {
  display: none;
}
._upload-loading_ll7q8_414 {
  display: flex;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  background-color: #45494a;
  box-shadow: 0 8px 28px #0006;
}
._upload-loading_ll7q8_414 ._upload-loading-mask_ll7q8_427 {
  display: flex;
  position: absolute;
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #45494a;
  opacity: 0.75;
}
._upload-loading_ll7q8_414 ._upload-progress_ll7q8_438 {
  position: absolute;
  z-index: 2;
  margin-top: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
}
._upload-loading_ll7q8_414 img {
  position: absolute;
  width: 20px;
  height: 20px;
  animation: _spin_ll7q8_1 1s linear infinite;
}
._upload-loading_ll7q8_414 ._upload-loading-file_ll7q8_453 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
  object-position: top;
}
@keyframes _spin_ll7q8_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._model-select_ll7q8_469 {
  padding: 4px;
  border-radius: 6px;
  background-color: #ffffff0f;
}
._model-select_ll7q8_469 span {
  line-height: 16px;
  font-weight: 500;
  font-size: 12px;
}
._input-bind-style-name-container_ll7q8_480 {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  max-width: 80px;
  background-color: #ffffff0f;
}
._input-bind-style-name_ll7q8_480 {
  display: -webkit-box;
  overflow: hidden;
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 16px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  -webkit-box-orient: vertical;
}
._modal-assets-mask_ll7q8_505 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #ffffff0f;
  box-shadow: 0 4px 80px #000000a3;
  filter: blur(20px);
}
._drag-hover-mask_ll7q8_517 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  justify-content: center;
  align-items: center;
  border: 2px dashed rgba(0, 0, 0, 0.64);
  border-radius: 20px;
  background: #000000a3;
  pointer-events: none;
}
._drag-hover-text_ll7q8_530 {
  padding: 12px 24px;
  line-height: 24px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffffe8;
}
._toggle-tips-text_ll7q8_539 {
  position: absolute;
  z-index: -1;
  border-radius: 8px;
  height: 25px;
  background-color: #fff;
  opacity: 0;
  line-height: 1.5rem;
  font-weight: 500;
  font-size: 12px;
  color: #000;
  white-space: nowrap;
}
._toggle-tips-text_ll7q8_539:after {
  position: absolute;
  border: 4px solid transparent;
  content: "";
}
._tips-text-content_ll7q8_558 {
  padding: 2px 8px !important;
}
._badge_17keu_1 {
  display: flex;
  position: relative;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 8px;
  width: max-content;
  height: 36px;
  background-color: #ffffff0f;
  cursor: pointer;
}
._upload-menu-badge_17keu_15 {
  display: flex;
  position: absolute;
  right: -8px;
  top: -8px;
  align-items: center;
  padding: 0 4px;
  border-radius: 8px 8px 8px 2px;
  background: linear-gradient(120deg, #ffa8db 13.14%, #e2fed4 88.61%);
  line-height: 16px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #0a0a0b;
}
.hogi-nav-toolbar {
  display: inline-flex;
  overflow: auto;
  position: absolute;
  left: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  gap: 8px;
  margin-top: 20px;
  padding: 4px;
  border: 1px solid #7e7e7e;
  border-radius: 15px;
  width: max-content;
  max-height: calc(100% - 110px);
  background: #000;
  pointer-events: all;
  color: #fff;
}
.hogi-nav-toolbar-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4;
  border: none;
  border-radius: 6px;
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding-inline: 8px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.hogi-nav-toolbar-button:hover {
  background: #ffffff1a;
  transform: scale(1.02);
}
.hogi-nav-toolbar-button:active {
  transform: scale(0.98);
}
.hogi-nav-toolbar-button.selected {
  background: #fff3;
  color: #fff;
}
.hogi-nav-toolbar-shape-label {
  position: absolute;
  padding: calc(10px * var(--tl-scale));
  border-bottom-right-radius: calc(8px * var(--tl-scale));
  background: #000;
  pointer-events: all;
  font-size: calc(12px * var(--tl-scale));
  color: #fff;
  white-space: nowrap;
}
.hogi-points-log-modal {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #0009;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}
.hogi-points-log-modal-inner {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  width: 780px;
  max-width: 90vw;
  max-height: 80vh;
  background: #232425;
  box-shadow:
    0 20px 60px #0000004d,
    0 0 0 1px #ffffff0d;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  pointer-events: auto;
}
.hogi-points-log-modal-close {
  display: flex;
  position: absolute;
  right: 19px;
  top: 19px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 20px;
  height: 20px;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  color: #ffffffe8;
  transition: opacity 0.2s ease;
}
.hogi-points-log-modal-close:hover {
  opacity: 1;
}
.hogi-points-log-modal-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.hogi-points-log-modal-title {
  margin: 0;
  line-height: 28px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
.hogi-points-log-modal-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff0f;
}
.hogi-points-log-modal-summary-item {
  font-size: 14px;
  color: #ffffffb3;
}
.hogi-points-log-modal-summary-item strong {
  margin-left: 4px;
  font-weight: 600;
  color: #ffffffe8;
}
.hogi-points-log-modal-summary-divider {
  color: #fff3;
}
.hogi-points-log-modal-content {
  overflow-y: auto;
  flex: 1;
  width: 100%;
  max-height: 500px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
.hogi-points-log-modal-content::-webkit-scrollbar {
  width: 4px;
}
.hogi-points-log-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-points-log-modal-content::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #ffffff21;
}
.hogi-points-log-modal-content::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
.hogi-points-log-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  color: #fff9;
}
.hogi-points-log-loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  font-size: 13px;
  color: #ffffff80;
}
.hogi-points-log-no-more {
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: #fff6;
}
.hogi-points-log-loading-icon {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.hogi-points-log-empty {
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: #ffffff80;
}
.hogi-points-log-table {
  border-collapse: collapse;
  width: 100%;
}
.hogi-points-log-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1e1e1e;
}
.hogi-points-log-table thead tr th {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: #fff9;
}
.hogi-points-log-table thead tr th:last-child {
  text-align: right;
}
.hogi-points-log-table tbody tr {
  transition: background 0.15s ease;
}
.hogi-points-log-table tbody tr:hover {
  background: #ffffff0a;
}
.hogi-points-log-table tbody tr td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: #fffc;
}
.hogi-points-log-time {
  min-width: 140px;
  color: #ffffff80 !important;
  font-variant-numeric: tabular-nums;
}
.hogi-points-log-reason {
  color: #fffc !important;
}
.hogi-points-log-content {
  min-width: 60px;
  color: #ffffffb3 !important;
}
.hogi-points-log-content-link {
  text-decoration: none;
  color: #60a5fa;
  transition: color 0.15s ease;
}
.hogi-points-log-content-link:hover {
  text-decoration: underline;
  color: #93c5fd;
}
.hogi-points-log-node {
  min-width: 120px;
  color: #ffffffb3 !important;
}
.hogi-points-log-node-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.hogi-points-log-node-tag--role {
  background: #8b5cf633;
  color: #a78bfa;
}
.hogi-points-log-node-tag--storyboard {
  background: #3b82f633;
  color: #60a5fa;
}
.hogi-points-log-node-tag--scene {
  background: #22c55e33;
  color: #4ade80;
}
.hogi-points-log-amount {
  min-width: 80px;
  text-align: right !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f87171 !important;
}
.hogi-opt-toolbar-wrap {
  display: flex;
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 1000;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.hogi-opt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 16px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.hogi-opt-toolbar-feedback {
  display: flex;
  position: absolute;
  right: 294px;
  bottom: 40px;
  z-index: 1000;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 16px;
  background: #272929;
  box-shadow: 0 4px 24px #00000014;
}
.hogi-opt-toolbar-section {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hogi-opt-toolbar-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  background: transparent;
  cursor: pointer;
  color: #fffc;
  transition: all 0.2s ease;
}
.hogi-opt-toolbar-btn:hover {
  background: #ffffff1a;
  color: #fff;
}
.hogi-opt-toolbar-btn.active {
  background: #353838;
  color: #fff;
}
.hogi-opt-toolbar-divider {
  margin: 0 4px;
  width: 1px;
  height: 40px;
  background: #ffffff1a;
}
.hogi-opt-toolbar-zoom-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: transparent;
  cursor: pointer;
  color: #fffc;
  transition: all 0.2s ease;
}
.hogi-opt-toolbar-zoom-btn:hover {
  background: #ffffff1a;
  color: #fff;
}
.hogi-opt-toolbar-zoom-text {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 52px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff7a;
}
.hogi-video-params-panel {
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  width: 100%;
  background: #1a1b1c;
  box-shadow:
    0 8px 32px #0006,
    0 0 0 1px #ffffff14;
  animation: hogi-video-params-panel-fade-in 0.2s ease-out;
}
.hogi-video-params-panel__loading,
.hogi-video-params-panel__error {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px;
  font-size: 13px;
  color: #888;
}
.hogi-video-params-panel__loading-icon {
  animation: hogi-video-params-panel-spin 1s linear infinite;
}
.hogi-video-params-panel__error {
  color: #f87171;
}
.hogi-video-params-panel__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hogi-video-params-panel__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hogi-video-params-panel__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hogi-video-params-panel__section-label {
  font-weight: 500;
  font-size: 12px;
  color: #888;
}
.hogi-video-params-panel__copy-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: #888;
  transition: all 0.15s;
}
.hogi-video-params-panel__copy-btn:hover {
  background: #ffffff1a;
  color: #fff;
}
.hogi-video-params-panel__prompt-input {
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  width: 100%;
  min-height: 100px;
  max-height: 300px;
  background: #ffffff0a;
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
  font-size: 12px;
  color: #e0e0e0;
  transition: border-color 0.15s;
}
.hogi-video-params-panel__prompt-input::placeholder {
  color: #666;
}
.hogi-video-params-panel__prompt-input:focus {
  border-color: #6366f199;
  outline: none;
}
.hogi-video-params-panel__prompt-input::-webkit-scrollbar {
  width: 4px;
}
.hogi-video-params-panel__prompt-input::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-video-params-panel__prompt-input::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.hogi-video-params-panel__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hogi-video-params-panel__option {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 80px;
}
.hogi-video-params-panel__option-label {
  font-weight: 500;
  font-size: 11px;
  color: #888;
}
.hogi-video-params-panel__select {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: #ffffff0a;
  cursor: pointer;
  transition: all 0.15s;
}
.hogi-video-params-panel__select:hover {
  border-color: #fff3;
  background: #ffffff14;
}
.hogi-video-params-panel__select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}
.hogi-video-params-panel__select-icon {
  flex-shrink: 0;
  margin-left: 6px;
  color: #888;
}
.hogi-video-params-panel__dropdown {
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  max-height: 200px;
  background: #242526;
  box-shadow: 0 8px 24px #0006;
}
.hogi-video-params-panel__dropdown::-webkit-scrollbar {
  width: 4px;
}
.hogi-video-params-panel__dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-video-params-panel__dropdown::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.hogi-video-params-panel__dropdown-item {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #ccc;
  transition: all 0.1s;
}
.hogi-video-params-panel__dropdown-item:hover {
  background: #ffffff1a;
  color: #fff;
}
.hogi-video-params-panel__dropdown-item.active {
  background: #6366f133;
  color: #a5b4fc;
}
.hogi-video-params-panel__images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hogi-video-params-panel__image-item {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  width: 56px;
  height: 56px;
  background: #2a2b2c;
}
.hogi-video-params-panel__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hogi-video-params-panel__generate-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  transition: all 0.15s;
}
.hogi-video-params-panel__generate-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.hogi-video-params-panel__generate-btn:active {
  transform: translateY(0);
}
@keyframes hogi-video-params-panel-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hogi-video-params-panel-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.hogi-image-params-panel {
  box-sizing: border-box;
  padding: 16px;
  border-radius: 12px;
  width: 100%;
  background: #2a2b2d;
  box-shadow:
    0 8px 32px #0006,
    0 0 0 1px #ffffff14;
  animation: hogi-image-params-panel-fade-in 0.2s ease-out;
}
.hogi-image-params-panel__loading,
.hogi-image-params-panel__error {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 32px 24px;
  font-size: 13px;
  color: #999;
}
.hogi-image-params-panel__loading-icon {
  animation: hogi-image-params-panel-spin 1s linear infinite;
}
.hogi-image-params-panel__error {
  color: #f87171;
}
.hogi-image-params-panel__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hogi-image-params-panel__tabs {
  display: flex;
  gap: 8px;
}
.hogi-image-params-panel__tab {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #ffffff0d;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: #999;
  transition: all 0.2s;
}
.hogi-image-params-panel__tab:hover {
  background: #ffffff14;
  color: #ccc;
}
.hogi-image-params-panel__tab.active {
  background: #ffffff1f;
  color: #fff;
}
.hogi-image-params-panel__edit-tab,
.hogi-image-params-panel__params-tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hogi-image-params-panel__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hogi-image-params-panel__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hogi-image-params-panel__section-label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.5px;
}
.hogi-image-params-panel__copy-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: #999;
  transition: all 0.2s;
}
.hogi-image-params-panel__copy-btn:hover {
  background: #ffffff14;
  color: #fff;
}
.hogi-image-params-panel__prompt-input {
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  background: #ffffff08;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  font-size: 13px;
  color: #e8e8e8;
  transition: all 0.2s;
}
.hogi-image-params-panel__prompt-input::placeholder {
  color: #666;
}
.hogi-image-params-panel__prompt-input:focus {
  border-color: #ffffff26;
  outline: none;
  background: #ffffff0d;
}
.hogi-image-params-panel__prompt-input::-webkit-scrollbar {
  width: 4px;
}
.hogi-image-params-panel__prompt-input::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-image-params-panel__prompt-input::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.hogi-image-params-panel__options {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.hogi-image-params-panel__option {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
}
.hogi-image-params-panel__option-label {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.5px;
}
.hogi-image-params-panel__select {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #ffffff0d;
  cursor: pointer;
  transition: all 0.2s;
}
.hogi-image-params-panel__select:hover {
  border-color: #ffffff26;
  background: #ffffff14;
}
.hogi-image-params-panel__select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 13px;
  color: #e8e8e8;
  white-space: nowrap;
}
.hogi-image-params-panel__select-icon {
  flex-shrink: 0;
  margin-left: 8px;
  color: #999;
  transition: transform 0.2s;
}
.hogi-image-params-panel__select:hover .hogi-image-params-panel__select-icon {
  color: #ccc;
}
.hogi-image-params-panel__dropdown {
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  max-height: 240px;
  background: #2d2e30;
  box-shadow: 0 12px 32px #00000080;
}
.hogi-image-params-panel__dropdown::-webkit-scrollbar {
  width: 4px;
}
.hogi-image-params-panel__dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.hogi-image-params-panel__dropdown::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
.hogi-image-params-panel__dropdown-item {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
  transition: all 0.15s;
}
.hogi-image-params-panel__dropdown-item:hover {
  background: #ffffff14;
  color: #fff;
}
.hogi-image-params-panel__dropdown-item.active {
  background: #ffffff1f;
  font-weight: 500;
  color: #fff;
}
.hogi-image-params-panel__images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hogi-image-params-panel__image-item {
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 64px;
  height: 64px;
  background: #ffffff08;
  transition: all 0.2s;
}
.hogi-image-params-panel__image-item:hover {
  border-color: #ffffff26;
  transform: scale(1.05);
}
.hogi-image-params-panel__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hogi-image-params-panel__image-uploading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #ffffff0d;
}
.hogi-image-params-panel__image-uploading-icon {
  color: #999;
  animation: hogi-image-params-panel-spin 1s linear infinite;
}
.hogi-image-params-panel__image-remove {
  display: flex;
  position: absolute;
  right: 4px;
  top: 4px;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #0009;
  opacity: 0;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s;
}
.hogi-image-params-panel__image-remove:hover {
  background: #ef4444e6;
}
.hogi-image-params-panel__image-item:hover
  .hogi-image-params-panel__image-remove {
  opacity: 1;
}
.hogi-image-params-panel__image-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: dashed;
  cursor: pointer;
}
.hogi-image-params-panel__image-upload:hover {
  border-color: #ffffff40;
  background: #ffffff14;
}
.hogi-image-params-panel__upload-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}
.hogi-image-params-panel__upload-btn:hover {
  color: #fff;
}
.hogi-image-params-panel__generate-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px #0003;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #1a1b1c;
  transition: all 0.2s;
}
.hogi-image-params-panel__generate-btn:hover:not(:disabled) {
  background: #f0f0f0;
  box-shadow: 0 4px 12px #0000004d;
  transform: translateY(-1px);
}
.hogi-image-params-panel__generate-btn:active:not(:disabled) {
  box-shadow: 0 2px 6px #0003;
  transform: translateY(0);
}
.hogi-image-params-panel__generate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.hogi-image-params-panel__generate-btn svg {
  width: 18px;
  height: 18px;
}
@keyframes hogi-image-params-panel-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hogi-image-params-panel-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.hogi-asset-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  pointer-events: all;
}
.hogi-asset-card-header {
  display: flex;
  position: absolute;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  height: 24px;
}
.hogi-asset-card-header-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #ef319f;
}
.hogi-asset-card-header-name {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  white-space: nowrap;
}
.hogi-asset-card-content {
  display: grid;
  position: absolute;
  left: 0;
  top: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  border-radius: 16px;
  background: #272929;
}
.hogi-asset-card-item {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.hogi-asset-card-item:hover {
  box-shadow: 0 4px 12px #000;
  transform: translateY(-5px);
}
.hogi-asset-card-image {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hogi-asset-card-mask {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #00000080;
}
.hogi-asset-card-mask-icon {
  animation: asset-card-loading 1s linear infinite;
}
@keyframes asset-card-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.hogi-creation-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  pointer-events: all;
}
.hogi-creation-card-header {
  display: flex;
  position: absolute;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  height: 24px;
}
.hogi-creation-card-header-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #ef319f;
}
.hogi-creation-card-header-name {
  line-height: 16px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffe8;
  white-space: nowrap;
}
.hogi-creation-card-content {
  display: grid;
  position: absolute;
  left: 0;
  top: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  border-radius: 16px;
  background: #272929;
}
.hogi-creation-card-item {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.hogi-creation-card-item:hover {
  box-shadow: 0 4px 12px #000;
  transform: translateY(-5px);
}
.hogi-creation-card-image {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hogi-creation-card-mask {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #00000080;
}
.hogi-creation-card-mask-icon {
  animation: creation-card-loading 1s linear infinite;
}
@keyframes creation-card-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.PhotoView-Portal {
  direction: ltr;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  touch-action: none;
  width: 100%;
  z-index: 2000;
}
@keyframes PhotoView__rotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes PhotoView__delayIn {
  0%,
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.PhotoView__Spinner {
  animation: PhotoView__delayIn 0.4s linear both;
}
.PhotoView__Spinner svg {
  animation: PhotoView__rotate 0.6s linear infinite;
}
.PhotoView__Photo {
  cursor: grab;
  max-width: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.PhotoView__Photo:active {
  cursor: grabbing;
}
.PhotoView__icon {
  display: inline-block;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}
.PhotoView__PhotoBox,
.PhotoView__PhotoWrap {
  bottom: 0;
  direction: ltr;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  touch-action: none;
  width: 100%;
}
.PhotoView__PhotoWrap {
  overflow: hidden;
  z-index: 10;
}
.PhotoView__PhotoBox {
  transform-origin: left top;
}
@keyframes PhotoView__fade {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,
.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,
.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,
.PhotoView-Slider__clean .PhotoView-Slider__Overlay,
.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover {
  opacity: 0;
}
.PhotoView-Slider__Backdrop {
  background: #000;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition-property: background-color;
  width: 100%;
  z-index: -1;
}
.PhotoView-Slider__fadeIn {
  animation: PhotoView__fade linear both;
  opacity: 0;
}
.PhotoView-Slider__fadeOut {
  animation: PhotoView__fade linear reverse both;
  opacity: 0;
}
.PhotoView-Slider__BannerWrap {
  align-items: center;
  background-color: #00000080;
  color: #fff;
  display: flex;
  height: 44px;
  justify-content: space-between;
  left: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease-out;
  width: 100%;
  z-index: 20;
}
.PhotoView-Slider__BannerWrap:hover {
  opacity: 1;
}
.PhotoView-Slider__Counter {
  font-size: 14px;
  opacity: 0.75;
  padding: 0 10px;
}
.PhotoView-Slider__BannerRight {
  align-items: center;
  display: flex;
  height: 100%;
}
.PhotoView-Slider__toolbarIcon {
  fill: #fff;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0.75;
  padding: 10px;
  transition: opacity 0.2s linear;
}
.PhotoView-Slider__toolbarIcon:hover {
  opacity: 1;
}
.PhotoView-Slider__ArrowLeft,
.PhotoView-Slider__ArrowRight {
  align-items: center;
  bottom: 0;
  cursor: pointer;
  display: flex;
  height: 100px;
  justify-content: center;
  margin: auto;
  opacity: 0.75;
  position: absolute;
  top: 0;
  transition: opacity 0.2s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 70px;
  z-index: 20;
}
.PhotoView-Slider__ArrowLeft:hover,
.PhotoView-Slider__ArrowRight:hover {
  opacity: 1;
}
.PhotoView-Slider__ArrowLeft svg,
.PhotoView-Slider__ArrowRight svg {
  fill: #fff;
  background: #0000004d;
  box-sizing: content-box;
  height: 24px;
  padding: 10px;
  width: 24px;
}
.PhotoView-Slider__ArrowLeft {
  left: 0;
}
.PhotoView-Slider__ArrowRight {
  right: 0;
}
.hogi-chat {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  line-height: initial;
}
.hogi-chat .hogi-chat-content {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}
.hogi-chat input[type="file"] {
  display: none;
}
.hogi-chat button {
  border: none;
}
.hogi-chat svg {
  box-sizing: initial;
  margin: initial;
  padding: initial;
}
.hogi-chat img {
  image-rendering: auto;
}
.hogi-chat .pause-layout {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}
.hogi-chat .pause-layout .pause-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.hogi-chat .pause-layout .pause-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  width: 32px;
  height: 32px;
  background-color: #ffffff0f;
  cursor: pointer;
  color: #fff;
}
.hogi-chat .pause-layout .pause-button:disabled {
  background-color: #ef319f;
  opacity: 0.4;
  cursor: not-allowed;
}
.hogi-chat .pause-layout .pause-button:hover {
  box-shadow: none;
}
.hogi-chat .pause-layout .input-icon {
  width: 20px;
  height: 20px;
}
._asset-tag_1g42e_1 {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  padding: 2px 6px;
  border-radius: 6px;
  background-color: #2f3136;
  font-family: Roboto, sans-serif;
  font-size: 0.9em;
  color: #fff;
}
._chain-tag_7cylq_1 {
  display: inline-block;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  border-radius: 6px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  color: #fabde1;
}
._chain-tag-text_7cylq_12 {
  line-height: 22px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
}
._style-chain-tag_1ba16_1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
._style-chain-tag_1ba16_1 img {
  margin: 3px 0;
  border-radius: 4px;
  width: 14px;
  height: 14px;
}
._style-chain-tag_1ba16_1 ._style-chain-tag-remove_1ba16_12 {
  visibility: hidden;
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 10;
  width: 18px;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
._style-chain-tag_1ba16_1:hover ._style-chain-tag-remove_1ba16_12 {
  visibility: visible;
  opacity: 1;
}
._style-chain-tag-inner_1ba16_29 {
  display: inline-flex;
  overflow: visible;
  position: relative;
  gap: 4px;
  margin: 8px 2px 0;
  padding: 2px 6px;
  border-radius: 6px;
  background-color: #ffffff0f;
  transform: translateY(3px);
}
._style-chain-tag-text_1ba16_42 {
  display: -webkit-box;
  overflow: hidden;
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 20px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #fabde1;
  white-space: nowrap;
  -webkit-box-orient: vertical;
}
._img-ref-tag_yenpn_1 {
  display: inline-flex;
  align-items: center;
  margin: 0 3px;
  vertical-align: middle;
}
._img-ref-tag-inner_yenpn_8 {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 6px;
  margin: 0 2px;
  padding: 4px 8px;
  border-radius: 8px;
  min-width: 136px;
  height: 24px;
  background-color: #ffffff14;
  transition: all 0.2s ease;
}
._img-ref-tag-inner_yenpn_8:hover {
  background-color: #ffffff1f;
}
._img-ref-tag-inner_yenpn_8:hover ._img-ref-tag-remove_yenpn_24 {
  visibility: visible;
  opacity: 1;
}
._img-ref-tag-index_yenpn_29 {
  display: flex;
  position: absolute;
  top: 0;
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #0000003d;
  line-height: 18px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.24px;
}
._img-ref-tag-cover_yenpn_49 {
  position: relative;
}
._img-ref-tag-cover_yenpn_49 img {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  object-fit: cover;
}
._img-ref-tag-select_yenpn_59 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
._img-ref-tag-select-text_yenpn_69 {
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
}
._img-ref-tag-select-icon_yenpn_79 {
  opacity: 0.6;
  color: #fff;
  transition: transform 0.2s ease;
}
._img-ref-tag-select-icon_yenpn_79._open_yenpn_84 {
  transform: rotate(180deg);
}
._img-ref-tag-remove_yenpn_24 {
  visibility: hidden;
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: 10;
  width: 16px;
  height: 16px;
  opacity: 0;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
._img-ref-tag-dropdown_yenpn_101 {
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: #ffffff0f;
  box-shadow: 0 4px 24px #0006;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: _dropdown-fade-in_yenpn_1 0.15s ease;
}
@keyframes _dropdown-fade-in_yenpn_1 {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._img-ref-tag-option_yenpn_121 {
  padding: 8px 12px 8px 28px;
  cursor: pointer;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
  transition: background-color 0.15s ease;
}
._img-ref-tag-option_yenpn_121:hover {
  background-color: #ffffff1a;
}
._img-ref-tag-option_yenpn_121._selected_yenpn_137 {
  color: #ffffffe8;
}
._placeholder-slate_1a694_1 {
  display: inline-block;
  position: absolute;
  top: var(--placeholder-height, 0);
  align-items: center;
  opacity: 0.5;
  pointer-events: none;
  line-height: 30px;
}
._placeholder-slate_1a694_1:before {
  display: inline-block;
  width: var(--placeholder-width);
  content: "";
}
._slate-area-editable-span_1a694_16 span[data-slate-node="text"] {
  vertical-align: middle;
}
._mention-panel_19d0g_1 {
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  min-width: 128px;
  max-width: 256px;
  background: #ffffff0f;
  box-shadow: 0 4px 80px #000000a3;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: _mention-panel-fade-in_19d0g_1 0.15s ease;
}
@keyframes _mention-panel-fade-in_19d0g_1 {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._mention-panel-list_19d0g_23 {
  overflow-y: auto;
  padding: 8px;
  max-height: 136px;
}
._mention-panel-list_19d0g_23::-webkit-scrollbar {
  display: none;
}
._mention-panel-item_19d0g_32 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
._mention-panel-item_19d0g_32:hover,
._mention-panel-item_19d0g_32._selected_19d0g_41 {
  border-radius: 8px;
  background: #ffffff0f;
}
._mention-panel-item_19d0g_32:hover ._mention-panel-item-index_19d0g_45,
._mention-panel-item_19d0g_32._selected_19d0g_41
  ._mention-panel-item-index_19d0g_45 {
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._mention-panel-item_19d0g_32._selected_19d0g_41 {
  border-radius: 8px;
  background: #ffffff0f;
}
._mention-panel-item_19d0g_32._selected_19d0g_41
  ._mention-panel-item-index_19d0g_45 {
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._mention-panel-item-cover_19d0g_68 {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border-radius: 4px;
  width: 16px;
  height: 16px;
}
._mention-panel-item-cover_19d0g_68 img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._mention-panel-item-index_19d0g_45 {
  flex: 1;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  letter-spacing: 0.28px;
}
._model-select-wrapper_1yj6u_1,
._model-select-wrapper_1yj6u_1 button {
  height: 36px;
}
._plus-button_1yj6u_8 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  width: 32px;
  height: 32px;
  background-color: #ffffff0f;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
._plus-button_1yj6u_8:hover {
  background-color: #ffffff1a;
}
._upload-menu-popover_1yj6u_25 {
  overflow: hidden;
  position: absolute;
  z-index: 10000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: #4b4c4d52;
  box-shadow: 0 4px 4px #00000040;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  opacity: 0;
  transform: scale(0.95);
  animation: _popover-show_1yj6u_1 0.15s ease-out forwards;
}
._upload-menu-content_1yj6u_39 {
  display: flex;
  flex-direction: column;
  padding: 8px;
  width: 230px;
}
._upload-menu-item_1yj6u_46 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
._upload-menu-item_1yj6u_46:hover {
  background-color: #ffffff0f;
}
._upload-menu-item-icon_1yj6u_59 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
._upload-menu-item-text_1yj6u_68 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
._upload-menu-item-title_1yj6u_75 {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._upload-menu-badge_1yj6u_86 {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 8px 8px 8px 2px;
  background: linear-gradient(120deg, #ffa8db 13.14%, #e2fed4 88.61%);
  line-height: 16px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #0a0a0b;
}
._upload-menu-item-desc_1yj6u_100 {
  line-height: 15px;
  font-family: Roboto, sans-serif;
  font-size: 10px;
  color: #ffffff7a;
  letter-spacing: 0.2px;
}
@keyframes _popover-show_1yj6u_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._modal_g1r3a_1 {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #00000054;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
._content_g1r3a_15 {
  overflow: auto;
  border-radius: 24px;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
}
._close-icon_g1r3a_23 {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
._close-icon_g1r3a_23 img {
  width: 100%;
  height: 100%;
}
._asset-title_klob1_2 {
  line-height: 28px;
  font-weight: 700;
  font-size: 20px;
  color: #f0f0f0;
}
._asset-title-sub_klob1_9 {
  display: flex;
  align-items: center;
  gap: 14px;
}
._asset-tab_klob1_15 {
  cursor: pointer;
  line-height: 17px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff7a;
  transition: all 0.2s ease-in-out;
}
._asset-tab_klob1_15:hover {
  color: #ffffffb3;
}
._asset-tab-active_klob1_29 {
  color: #ffffffe8;
}
._asset-more_klob1_33 {
  cursor: pointer;
  line-height: 20px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff4a;
}
._asset-header_klob1_41 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
._asset-list_klob1_48 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  row-gap: 8px;
}
._asset-list_klob1_48::-webkit-scrollbar {
  display: none;
}
._asset-item_klob1_59 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 156px;
  min-width: 156px;
  height: 48px;
  background-color: #ffffff0f;
  cursor: pointer;
  transition: opacity 0.1s ease;
}
._asset-item_klob1_59:hover {
  opacity: 0.7;
}
._asset-item_klob1_59:active {
  opacity: 0.5;
}
._asset-avatar_klob1_80 {
  flex-shrink: 0;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
._asset-name_klob1_88 {
  display: -webkit-box;
  overflow: hidden;
  flex: 1;
  line-height: 18px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffb3;
  -webkit-box-orient: vertical;
}
._asset-effect-list_klob1_104 {
  display: flex;
  overflow: auto;
  overflow-y: scroll;
  scroll-behavior: smooth;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  gap: 12px;
  padding: 8px 8px 16px;
  width: calc(100% + 8px);
}
._asset-effect-list_klob1_104::-webkit-scrollbar {
  display: none;
}
._style-preview-slash_klob1_122 {
  position: absolute;
  left: calc(50% - 4px);
  top: calc(100% + 12px);
  width: 8px;
  height: 34px;
  background: linear-gradient(180deg, #d28dfeb3 8.33%, #ff757500 82.41%);
}
._asset-effect-list-space_klob1_131 ._asset-effect_klob1_104,
._asset-effect-list-space_klob1_131 ._asset-effect-upload-container_klob1_134 {
  width: calc((100% - 24px) / 3);
}
._asset-item-hover_klob1_138 {
  transition: all 0.15s ease-in-out;
}
._asset-item-hover_klob1_138:hover {
  transform: scale(1.02);
}
._asset-effect_klob1_104 {
  display: flex;
  position: relative;
  flex-direction: column;
  opacity: 1;
  transition: all 0.15s ease-in-out;
}
._asset-effect_klob1_104:hover {
  transform: scale(1.02);
}
._asset-effect-upload-container_klob1_134 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc((100% - 60px) / 6);
}
._asset-effect-upload_klob1_134 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 9/16;
  background: #ffffff0a;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
._asset-effect-upload_klob1_134:hover {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: #ffffff0f;
}
._asset-empty-tiptext_klob1_182 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 200px;
  text-align: center;
  font-size: 14px;
  color: #ffffff80;
}
._asset-empty-tiptext-desc_klob1_195 {
  font-size: 12px;
}
._asset-effect-delete-btn_klob1_199 {
  display: flex;
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  background: #1c1c1c99;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
._asset-effect-delete-btn_klob1_199:hover {
  background: #c50303cc;
  transform: scale(1.02);
}
._asset-effect-new-badge_klob1_219 {
  display: flex;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 5px;
  border-radius: 8px 8px 8px 2px;
  background: linear-gradient(135deg, #fa7880, #d989f1);
  box-shadow: 0 2px 4px #0003;
  line-height: 16px;
  font-family:
    Arial,
    Segoe UI,
    sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
}
._asset-effect-img_klob1_239 {
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
._asset-effect-img-selected_klob1_248 {
  border: 2px solid rgb(255, 255, 255);
  border-radius: 8px;
}
._style-card-image-wrapper_klob1_254 {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 9/16;
}
._style-card-skeleton_klob1_263 {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff0a;
}
._style-card-skeleton_klob1_263:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%
  );
  content: "";
  animation: _style-skeleton-shimmer_klob1_1 2s ease-in-out infinite;
}
@keyframes _style-skeleton-shimmer_klob1_1 {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(100%);
  }
}
._spring-card-skeleton_klob1_286 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background-color: #ffffff0f;
}
._spring-card-skeleton_klob1_286:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  content: "";
  animation: _style-skeleton-shimmer_klob1_1 1.8s ease-in-out infinite;
}
._preview-main-image-wrapper_klob1_302 {
  overflow: hidden;
  position: relative;
  border-radius: 24px;
  width: 180px;
  aspect-ratio: 9/16;
}
._preview-main-skeleton_klob1_311 {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border-radius: 18px;
  background-color: #ffffff0a;
}
._preview-main-skeleton_klob1_311:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%
  );
  content: "";
  animation: _style-skeleton-shimmer_klob1_1 2s ease-in-out infinite;
}
._asset-effect-img-preview-wrapper_klob1_327 {
  position: relative;
}
._asset-effect-img-preview-wrapper_klob1_327:before {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: 1;
  border: 3px solid transparent;
  border-radius: var(--wrapper-border-radius, "28px");
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%) border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}
._asset-effect-name_klob1_343 {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
  line-height: 18px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #f0f0f0;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
._selected-indicator_klob1_360 {
  display: flex;
  position: absolute;
  right: 8px;
  top: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background-color: #000;
  font-weight: 700;
  font-size: 14px;
  color: #f0f0f0;
}
._asset-effect-shrink_klob1_376 {
  display: flex;
  position: absolute;
  right: -16px;
  top: 50%;
  z-index: 999;
  justify-content: center;
  align-items: center;
  border-radius: 12px 0 0 12px;
  width: 21px;
  height: 56px;
  background-color: #272929;
  box-shadow: -12px 0 28px #0006;
  cursor: pointer;
}
._asset-effect-list-container_klob1_392 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
._asset-effect-list-container_klob1_392 ._asset-header_klob1_41 {
  margin-bottom: 20px;
}
._asset-empty_klob1_182 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 156px;
  min-width: 156px;
  height: 48px;
  background: #ffffff0f;
  cursor: pointer;
  transition: opacity 0.1s ease;
}
._asset-empty_klob1_182:hover {
  opacity: 0.7;
}
._asset-empty_klob1_182:active {
  opacity: 0.5;
}
._asset-empty-text_klob1_425 {
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffb3;
}
._asset-loading-overlay_klob1_437 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #0009;
}
._asset-loading-spinner_klob1_449 {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: _asset-loading-spin_klob1_449 1s linear infinite;
}
._asset-loading-progress-text_klob1_458 {
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.24px;
}
@keyframes _asset-loading-spin_klob1_449 {
  to {
    transform: rotate(360deg);
  }
}
._loading-skeleton_klob1_470 {
  animation: _skeleton-pulse_klob1_1 1.5s ease-in-out infinite;
}
@keyframes _skeleton-pulse_klob1_1 {
  0%,
  to {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}
._loading-spinner_klob1_482 {
  animation: _spinner-rotate_klob1_1 1s linear infinite;
}
@keyframes _spinner-rotate_klob1_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._loading-circle-container_klob1_495 {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 9/16;
  background-color: #0009;
}
._loading-circle-bg_klob1_509 {
  fill: none;
  stroke: #fff3;
  stroke-width: 8;
}
._loading-circle-progress_klob1_515 {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 0.3s ease;
}
._asset-effect-list-scroll_klob1_526 {
  overflow-y: scroll;
  scroll-behavior: smooth;
  margin: 0 -4px;
  padding: 4px 4px 16px;
  width: calc(100% + 8px);
  height: 440px;
}
._asset-effect-list-scroll-auto_klob1_536 {
  height: auto;
}
._asset-effect-upload-disabled_klob1_541 {
  opacity: 0.6;
  cursor: not-allowed;
}
._asset-effect-shrink-icon_klob1_547 {
  width: 16px;
}
._asset-effect-hover-area_klob1_552 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 5;
  border-radius: 0 0 8px 8px;
  height: 90px;
  cursor: pointer;
}
._asset-effect-overlay_klob1_563 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0 0 8px 8px;
  background: #0009;
  opacity: 0;
  transition: opacity 0.25s ease;
}
._asset-effect-hover-area_klob1_552:hover ._asset-effect-overlay_klob1_563,
._asset-effect-hovered_klob1_573
  ._asset-effect-hover-area_klob1_552
  ._asset-effect-overlay_klob1_563 {
  opacity: 1;
}
._asset-effect-spring-cards_klob1_578 {
  display: flex;
  position: absolute;
  right: 24px;
  bottom: 36px;
  z-index: 6;
  gap: 0;
  pointer-events: none;
}
._asset-effect-spring-card_klob1_578 {
  border: 1.5px solid #fff;
  border-radius: 4px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 3px 10px #0006;
  opacity: 0;
  cursor: pointer;
  will-change: transform, opacity, z-index;
  transform: translate(-30px) rotate(0) scale(0.8);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    z-index 0s;
}
._asset-effect-spring-card_klob1_578:nth-child(1) {
  z-index: 1;
  transition-delay: 0s;
}
._asset-effect-spring-card_klob1_578:nth-child(2) {
  z-index: 2;
  margin-left: -10px;
  transition-delay: 0.06s;
}
._asset-effect-spring-card_klob1_578:nth-child(3) {
  z-index: 3;
  margin-left: -10px;
  transition-delay: 0.12s;
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578,
._asset-effect-spring-cards_klob1_578:hover,
._asset-effect-hovered_klob1_573 ._asset-effect-spring-cards_klob1_578 {
  pointer-events: auto;
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578,
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578,
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578 {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0) rotate(0) scale(1);
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(1),
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578:nth-child(1),
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(1) {
  transform: translate(0) rotate(-15deg) scale(1);
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(2),
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578:nth-child(2),
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(2) {
  transform: translate(4px) rotate(5deg) scale(1);
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(3),
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578:nth-child(3),
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(3) {
  transform: translate(8px) rotate(18deg) scale(1);
}
._asset-effect-spring-card_klob1_578:hover {
  transition:
    transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(1):hover,
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578:nth-child(1):hover,
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(1):hover {
  transform: translate(0) rotate(-15deg) scale(1.1);
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(2):hover,
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578:nth-child(2):hover,
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(2):hover {
  transform: translate(4px) rotate(5deg) scale(1.1);
}
._asset-effect-hover-area_klob1_552:hover
  ~ ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(3):hover,
._asset-effect-spring-cards_klob1_578:hover
  ._asset-effect-spring-card_klob1_578:nth-child(3):hover,
._asset-effect-hovered_klob1_573
  ._asset-effect-spring-cards_klob1_578
  ._asset-effect-spring-card_klob1_578:nth-child(3):hover {
  transform: translate(8px) rotate(18deg) scale(1.1);
}
._style-preview-container_klob1_676 {
  display: flex;
  flex-basis: 100%;
  padding: 16px 0;
  width: 100%;
  animation: _fade-in-preview_klob1_1 0.35s ease;
}
@keyframes _fade-in-preview_klob1_1 {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._style-preview-main_klob1_695 {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
}
._style-preview-main-image_klob1_703 {
  padding: 4px;
  border-radius: 24px;
  width: 240px;
  object-fit: cover;
  aspect-ratio: 9/16;
}
._style-preview-main-wrapper_klob1_711 {
  overflow: visible;
  position: relative;
  padding: 4px;
  border-radius: 24px;
}
._style-preview-main-wrapper_klob1_711:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border: 4px solid transparent;
  border-radius: 24px;
  background: linear-gradient(120deg, #ff7575 13.14%, #d28dfe 88.61%) border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
}
._style-preview-close-btn_klob1_729 {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: linear-gradient(120deg, #ff7575 13.14%, #d28dfe 88.61%);
  box-shadow: 0 4px 16px #c084fc66;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}
._style-preview-close-btn_klob1_729:hover {
  box-shadow: 0 6px 20px #c084fc99;
  transform: translate(-50%, -50%) scale(1.1);
}
._style-preview-close-btn_klob1_729 ._style-preview-shrink_klob1_750 {
  border-radius: 4px;
  width: 20px;
  height: 4px;
  background-color: #fff;
}
._style-preview-title_klob1_758 {
  margin-bottom: 12px;
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
}
._style-preview-waterfall_klob1_769 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  transition: all 0.3s ease;
}
._asset-header-sticky_klob1_779 {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-bottom: 8px;
}
._asset-effect-below-preview_klob1_787 {
  opacity: 0.3;
  pointer-events: none;
  transition: all 0.35s ease;
}
._choose-panel-group_zrgsf_1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._choose-panel-title_zrgsf_7 {
  display: block;
  margin: 12px 0;
  color: #fabde1;
}
._panel_zrgsf_13 {
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  flex: 1;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border ease 0.6s;
}
._panel_zrgsf_13:hover {
  border: 1px solid #fabde1;
}
._panel-disabled_zrgsf_27:hover {
  border: 1px solid transparent;
}
._panel-tag_zrgsf_31 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  width: 100%;
  background-color: #ffffff0f;
  cursor: pointer;
}
._panel-outline_zrgsf_45 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgb(250, 189, 225);
  border-radius: 12px;
}
._panel-title_zrgsf_52 {
  display: flex;
  display: -webkit-box;
  overflow: hidden;
  align-items: center;
  gap: 4px;
  width: 100%;
  line-height: 23px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
  -webkit-box-orient: vertical;
}
._panel-desc_zrgsf_72 {
  cursor: pointer;
  line-height: 23px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
}
._panel-quick-video-tag_zrgsf_82 {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 8px 8px 8px 2px;
  background: linear-gradient(90deg, #ffb6e1, #a8e6e3);
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #0a0a0b;
}
._tag-row-container_1oq1w_1 {
  display: flex;
  position: relative;
  width: 100%;
}
._tag-row_1oq1w_1 {
  display: flex;
  overflow: scroll hidden;
  position: relative;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 32px;
  width: 100%;
  height: max-content;
}
._tag-row_1oq1w_1::-webkit-scrollbar {
  display: none;
}
._tag-row-item-box_1oq1w_21 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._tag-row-item_1oq1w_21 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  width: 110px;
  height: 32px;
  background: #ffffff0f;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff7a;
  transition: all 0.3s ease;
  text-wrap-mode: nowrap;
}
._tag-row-item_1oq1w_21:hover {
  background: #ffffff1f;
}
._tag-row-item-active_1oq1w_54 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ffffff1a;
  color: #ffffffe8;
}
._tag-row-mask_1oq1w_60 {
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  height: 32px;
  background: linear-gradient(90deg, #16171800, #232425);
}
._masonry-container_1lnh9_2 {
  position: relative;
  border-radius: 20px;
}
._masonry-container_1lnh9_2::-webkit-scrollbar {
  display: none;
}
._masonry-item_1lnh9_10 {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
._masonry-item-wrapper_1lnh9_21 {
  overflow: hidden;
  cursor: pointer;
}
._masonry-item-wrapper_1lnh9_21:hover ._masonry-item_1lnh9_10 {
  transform: scale(1.08);
}
._masonry-item-skeleton_1lnh9_30 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff0a;
}
._masonry-item-skeleton_1lnh9_30:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%
  );
  content: "";
  animation: _masonry-skeleton-shimmer_1lnh9_1 2s ease-in-out infinite;
}
@keyframes _masonry-skeleton-shimmer_1lnh9_1 {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(100%);
  }
}
._preview-img-layer_1so2p_1 {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  background: #00000054;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
._preview-img-layer-content_1so2p_13 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 117px 89px;
  width: 100%;
  height: 100%;
}
._preview-img-layer-content_1so2p_13 img {
  width: auto !important;
  max-width: 960px !important;
  height: 100%;
  max-height: 816px !important;
  object-fit: contain;
}
._preview-img-layer-content-img_1so2p_30 {
  width: auto !important;
  height: auto !important;
}
._preview-img-layer-close_1so2p_35 {
  display: flex;
  position: absolute;
  right: 44px;
  top: 60px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 16px;
  width: 40px;
  height: 40px;
  background: #ffffff36;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
._preview-img-layer-close_1so2p_35 img {
  width: 16px !important;
  height: 16px !important;
}
._insert-more-assets_1b56i_1 {
  display: flex;
  overflow-y: scroll;
  flex-direction: column;
  padding: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  height: 700px;
  background-color: #ffffff0f;
  box-shadow: 0 4px 80px #000000a3;
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}
._insert-more-assets_1b56i_1 ._insert-more-assets-header_1b56i_12 {
  display: flex;
  align-items: center;
  gap: 20px;
  line-height: 32px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 24px;
}
._insert-more-assets_1b56i_1 ._insert-more-assets-header-item_1b56i_21 {
  opacity: 0.4;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  color: #ffffffe8;
}
._insert-more-assets_1b56i_1 ._insert-more-assets-header-item-active_1b56i_27 {
  opacity: 1;
}
._insert-more-assets_1b56i_1 ._insert-more-assets-content_1b56i_30 {
  overflow-y: scroll;
  margin-top: 24px;
  height: 600px;
}
._insert-more-assets_1b56i_1 ._asset-list_1b56i_35 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
._insert-more-assets_1b56i_1 ._asset-list_1b56i_35 ._asset-item_1b56i_40 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 23.5%;
  min-height: 140px;
  background-color: #ffffff0f;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
._insert-more-assets_1b56i_1 ._asset-list_1b56i_35 ._asset-item_1b56i_40 img {
  border-radius: 8px;
  width: 40%;
}
._insert-more-assets_1b56i_1
  ._asset-list_1b56i_35
  ._asset-item_1b56i_40
  ._asset-name_1b56i_57 {
  display: -webkit-box;
  overflow: hidden;
  line-height: 18px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  -webkit-box-orient: vertical;
}
._insert-more-assets_1b56i_1
  ._asset-list_1b56i_35
  ._asset-item--scene_1b56i_69 {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
._insert-more-assets_1b56i_1
  ._asset-list_1b56i_35
  ._asset-item--scene_1b56i_69
  img,
._insert-more-assets_1b56i_1
  ._asset-list_1b56i_35
  ._asset-item--scene_1b56i_69
  ._asset-avatar_1b56i_76 {
  border-radius: 8px 8px 0 0;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}
._insert-more-assets_1b56i_1
  ._asset-list_1b56i_35
  ._asset-item--scene_1b56i_69
  ._asset-name_1b56i_57 {
  padding: 8px;
  border-radius: 0 0 8px 8px;
  background-color: #ffffff08;
  text-align: center;
}
._toggle-wrapper_7sol5_1 {
  display: inline-flex;
  height: 34px;
}
._toggle-wrapper_7sol5_1._disabled_7sol5_5 {
  opacity: 0.5;
  cursor: not-allowed;
}
._toggle-track_7sol5_10 {
  display: flex;
  position: relative;
  align-items: center;
  padding-left: 2px;
  padding-right: 3px;
  border: 0.5px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 12px;
  height: 100%;
  background-color: #ffffff0f;
  cursor: pointer;
}
._toggle-slider_7sol5_23 {
  position: absolute;
  z-index: 0;
  border-radius: 8px;
  height: calc(100% - 8px);
  background-color: #353838;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
._toggle-option-withicon_7sol5_32 {
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 4px;
  padding: 0 9px;
  border: none;
  border-radius: 8px;
  height: 100%;
  background: transparent;
  opacity: 0.48;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  transition: all 0.25s ease;
}
._toggle-option-withicon_7sol5_32._active_7sol5_54 {
  opacity: 1;
  font-weight: 600;
  color: #fff;
}
._toggle-option-withicon_7sol5_32:hover:not(:disabled) {
  opacity: 0.7;
}
._toggle-option-withicon_7sol5_32._active_7sol5_54:hover:not(:disabled) {
  opacity: 1;
}
._toggle-option-withicon_7sol5_32:disabled {
  cursor: not-allowed;
}
._toggle-option-withicon_7sol5_32:hover ._toggle-tips-text_7sol5_68 {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
._toggle-option_7sol5_32 {
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 4px;
  padding: 0 9px;
  border: none;
  border-radius: 8px;
  height: 100%;
  background: transparent;
  opacity: 0.48;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  transition: all 0.25s ease;
}
._toggle-option_7sol5_32._active_7sol5_54 {
  opacity: 1;
  font-weight: 600;
  color: #fff;
}
._toggle-option_7sol5_32:hover:not(:disabled) {
  opacity: 0.7;
}
._toggle-option_7sol5_32._active_7sol5_54:hover:not(:disabled) {
  opacity: 1;
}
._toggle-option_7sol5_32:disabled {
  cursor: not-allowed;
}
._toggle-option_7sol5_32:hover ._toggle-tips-text_7sol5_68 {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
._toggle-tips-text_7sol5_68 {
  position: absolute;
  z-index: -1;
  padding: 0 10px;
  border-radius: 8px;
  height: 25px;
  background-color: #fff;
  opacity: 0;
  line-height: 25px;
  font-size: 12px;
  color: #000;
  white-space: nowrap;
  transition: all 0.3s;
}
._toggle-tips-text_7sol5_68:after {
  position: absolute;
  border: 4px solid transparent;
  content: "";
}
._toggle-tips-text-top_7sol5_135 {
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  transform: translate3d(0, 10px, 0);
  translate: -50% 0;
}
._toggle-tips-text-top_7sol5_135:after {
  left: 50%;
  top: 100%;
  border-top-color: #fff;
  transform: translate(-50%);
}
._toggle-tips-text-bottom_7sol5_148 {
  left: 50%;
  top: 100%;
  margin-top: 5px;
  transform: translate3d(0, -10px, 0);
  translate: -50% 0;
}
._toggle-tips-text-bottom_7sol5_148:after {
  left: 50%;
  bottom: 100%;
  border-bottom-color: #fff;
  transform: translate(-50%);
}
._trigger_y0du2_1 {
  display: inline-block;
  cursor: pointer;
}
._popover_y0du2_6 {
  position: absolute;
  z-index: 10000;
  border: 1px solid #fff7fb;
  border-radius: 8px;
  max-width: 300px;
  background: #fff7fb;
  box-shadow:
    0 10px 15px -3px #0000001a,
    0 4px 6px -2px #0000000d;
  opacity: 0;
  transform: scale(0.95);
  animation: _popover-show_y0du2_1 0.15s ease-out forwards;
}
._popover_y0du2_6._top_y0du2_18 ._arrow_y0du2_18 {
  left: 50%;
  bottom: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff7fb;
  transform: translate(-50%);
}
._popover_y0du2_6._bottom_y0du2_26 ._arrow_y0du2_18 {
  left: 50%;
  top: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff7fb;
  transform: translate(-50%);
}
._popover_y0du2_6._left_y0du2_34 ._arrow_y0du2_18 {
  right: -6px;
  top: 50%;
  border-left: 6px solid #fff7fb;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
._popover_y0du2_6._right_y0du2_42 ._arrow_y0du2_18 {
  left: -6px;
  top: 50%;
  border-right: 6px solid #fff7fb;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
._arrow_y0du2_18 {
  position: absolute;
  z-index: 1001;
  width: 0;
  height: 0;
}
._content_y0du2_58 {
  padding: 12px 16px;
  line-height: 1.5;
  font-size: 14px;
  color: #000;
  overflow-wrap: break-word;
}
@keyframes _popover-show_y0du2_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _popover-hide_y0du2_1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media (max-width: 640px) {
  ._popover_y0du2_6 {
    max-width: calc(100vw - 32px);
  }
  ._popover_y0du2_6._left_y0du2_34._arrow_y0du2_18,
  ._popover_y0du2_6._right_y0du2_42._arrow_y0du2_18 {
    display: none;
  }
  ._content_y0du2_58 {
    padding: 8px 12px;
    font-size: 13px;
  }
}
._popover_y0du2_6._borderless_y0du2_98 {
  border: none;
  box-shadow: 0 25px 50px -12px #00000040;
}
._popover_y0du2_6._large_y0du2_103 {
  max-width: 400px;
}
._popover_y0du2_6._large_y0du2_103 ._content_y0du2_58 {
  padding: 16px 20px;
  font-size: 15px;
}
._popover_y0du2_6._small_y0du2_111 {
  max-width: 200px;
}
._popover_y0du2_6._small_y0du2_111 ._content_y0du2_58 {
  padding: 8px 12px;
  font-size: 13px;
}
._asset-box_1mowi_1 {
  display: flex;
  position: relative;
  align-items: center;
  width: 156px;
  height: 64px;
}
._asset-box-inner_1mowi_9 {
  display: flex;
  position: relative;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 8px;
  width: 156px;
  height: 48px;
  background-color: #ffffff0f;
}
._asset-box-name_1mowi_22 {
  display: -webkit-box;
  overflow: hidden;
  line-height: 18px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff91;
  -webkit-box-orient: vertical;
}
._asset-box-delete_1mowi_35 {
  position: absolute;
  right: -4px;
  top: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
._doc-container_b3vqh_1 {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 64px;
}
._doc-card_b3vqh_11 {
  display: flex;
  position: relative;
  align-items: center;
  padding: 4px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 226px;
  height: 48px;
  background: #ffffff0f;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
._doc-card_b3vqh_11:hover {
  background: #ffffff1a;
}
._doc-card_b3vqh_11._doc-card-error_b3vqh_27 {
  border-color: #d74c47;
}
._doc-card-error-text_b3vqh_31 {
  overflow: hidden;
  width: 100%;
  line-height: 18px;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  color: #d74c47;
  letter-spacing: 0.24px;
  white-space: nowrap;
}
._doc-card-icon_b3vqh_43 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
._doc-file-icon_b3vqh_52 {
  width: 40px;
  height: 40px;
  color: #fff;
}
._doc-card-close_b3vqh_58 {
  display: flex;
  position: absolute;
  right: -5px;
  top: -7px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  width: 20px;
  height: 20px;
  background: #0a0a0b;
  cursor: pointer;
  color: #ffffffb3;
  transition: background 0.2s ease;
}
._doc-card-close_b3vqh_58:hover {
  background: #d70000b3;
}
._doc-card-info_b3vqh_80 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  height: 100%;
}
._doc-card-name_b3vqh_88 {
  overflow: hidden;
  width: 100%;
  line-height: 18px;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  white-space: nowrap;
}
._doc-card-size_b3vqh_100 {
  display: flex;
  overflow: hidden;
  align-items: center;
  width: 100%;
  line-height: 18px;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
  white-space: nowrap;
}
._doc-card-progress_b3vqh_114 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 24px 6px 0;
  width: 100%;
}
._doc-card-progress-bar_b3vqh_122 {
  overflow: hidden;
  border-radius: 2px;
  width: 100%;
  height: 4px;
  background-color: #ffffff0f;
}
._doc-card-progress-fill_b3vqh_130 {
  border-radius: 2px;
  height: 100%;
  background: #ffffff4d;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._doc-item_b3vqh_137 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-width: 80px;
  max-width: 120px;
  height: 60px;
  background-color: #353838;
  cursor: pointer;
}
._doc-item_b3vqh_137:hover {
  background-color: #3f4242;
}
._doc-icon_b3vqh_157 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #ef319f33;
  line-height: 14px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: #ef319f;
}
._doc-name_b3vqh_171 {
  overflow: hidden;
  width: 100%;
  line-height: 14px;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 10px;
  color: #ffffffb8;
  white-space: nowrap;
}
._doc-progress_b3vqh_183 {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
}
._doc-remove_b3vqh_190 {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 999;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
._doc-preview_b3vqh_200 {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  width: 65vw;
  min-width: 800px;
  max-width: 1200px;
  height: 80vh;
  min-height: 600px;
  max-height: 1000px;
  background-color: #1e1e1e;
}
._doc-preview-header_b3vqh_213 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 62px;
}
._doc-preview-title_b3vqh_221 {
  overflow: hidden;
  max-width: 70%;
  line-height: 24px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  white-space: nowrap;
}
._doc-preview-close_b3vqh_234 {
  display: flex;
  position: absolute;
  right: 20px;
  top: 50%;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
._doc-preview-close_b3vqh_234:hover {
  opacity: 0.6;
}
._doc-preview-close_b3vqh_234:active {
  opacity: 0.4;
}
._doc-preview-close_b3vqh_234 img {
  width: 24px;
  height: 24px;
}
._doc-preview-content_b3vqh_260 {
  overflow: auto;
  margin: 0 32px 32px;
  height: calc(100% - 94px);
}
._doc-loading_b3vqh_266 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #ffffffa3;
}
._txt-preview_b3vqh_276 {
  overflow: auto;
  margin: 0 auto;
  padding: 16px;
  border-radius: 8px;
  height: 100%;
  background-color: #ffffff0a;
  line-height: 1.6;
  font-family:
    SF Mono,
    Monaco,
    Consolas,
    monospace;
  font-size: 13px;
  color: #ffffffde;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
._md-preview_b3vqh_291 {
  overflow: auto;
  margin: 0 auto;
  padding: 24px;
  border-radius: 8px;
  height: 100%;
  background-color: #ffffff0a;
  line-height: 1.7;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    sans-serif;
  font-size: 14px;
  color: #ffffffde;
}
._md-preview_b3vqh_291 h1,
._md-preview_b3vqh_291 h2,
._md-preview_b3vqh_291 h3,
._md-preview_b3vqh_291 h4,
._md-preview_b3vqh_291 h5,
._md-preview_b3vqh_291 h6 {
  margin: 1.2em 0 0.6em;
  font-weight: 600;
  color: #fff;
}
._md-preview_b3vqh_291 h1:first-child,
._md-preview_b3vqh_291 h2:first-child,
._md-preview_b3vqh_291 h3:first-child,
._md-preview_b3vqh_291 h4:first-child,
._md-preview_b3vqh_291 h5:first-child,
._md-preview_b3vqh_291 h6:first-child {
  margin-top: 0;
}
._md-preview_b3vqh_291 h1 {
  font-size: 1.8em;
}
._md-preview_b3vqh_291 h2 {
  font-size: 1.5em;
}
._md-preview_b3vqh_291 h3 {
  font-size: 1.25em;
}
._md-preview_b3vqh_291 p {
  margin: 0.8em 0;
}
._md-preview_b3vqh_291 ul,
._md-preview_b3vqh_291 ol {
  margin: 0.8em 0;
  padding-left: 1.5em;
}
._md-preview_b3vqh_291 li {
  margin: 0.3em 0;
}
._md-preview_b3vqh_291 code {
  padding: 0.2em 0.4em;
  border-radius: 4px;
  background-color: #ffffff1a;
  font-family:
    SF Mono,
    Monaco,
    Consolas,
    monospace;
  font-size: 0.9em;
}
._md-preview_b3vqh_291 pre {
  overflow-x: auto;
  margin: 1em 0;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #0000004d;
}
._md-preview_b3vqh_291 pre code {
  padding: 0;
  background: none;
}
._md-preview_b3vqh_291 blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  color: #ffffffb3;
}
._md-preview_b3vqh_291 a {
  text-decoration: none;
  color: #58a6ff;
}
._md-preview_b3vqh_291 a:hover {
  text-decoration: underline;
}
._md-preview_b3vqh_291 table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}
._md-preview_b3vqh_291 th,
._md-preview_b3vqh_291 td {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
}
._md-preview_b3vqh_291 th {
  background-color: #ffffff1a;
  font-weight: 600;
}
._md-preview_b3vqh_291 hr {
  margin: 1.5em 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
._md-preview_b3vqh_291 img {
  border-radius: 4px;
  max-width: 100%;
}
._docx-preview_b3vqh_397 {
  overflow: auto;
  margin: 0 auto;
  border-radius: 8px;
  height: 100%;
}
._docx-preview_b3vqh_397 .docx-wrapper {
  background: #ffffff0a;
}
._docx-preview_b3vqh_397 .docx-wrapper p {
  min-height: auto;
  line-height: 1.5;
}
._pdf-preview_b3vqh_411 {
  overflow: auto;
  margin: 0 auto;
  border-radius: 8px;
  height: 100%;
  background-color: #ffffff0a !important;
}
._pdf-page_b3vqh_419 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
._progress-bar_1edmq_1 {
  overflow: hidden;
  border-radius: 4px;
  width: 35px;
  height: 4px;
  background-color: #ffffff5e;
}
._progress-bar-fill_1edmq_9 {
  border-radius: 4px;
  height: 100%;
  background: #fff;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._async-task-bar_183r1_1 {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  z-index: 10;
  justify-content: center;
}
._async-task-bar-center_183r1_10 {
  left: 50%;
  right: auto;
  justify-content: center;
  transform: translate(-50%);
}
._async-task-bar-center_183r1_10 ._expanded_183r1_16 {
  left: 50%;
  right: auto;
  transform: translate(-50%);
}
._collapsed-wrap_183r1_22 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  height: 36px;
  background: #4b4c4d52;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  cursor: pointer;
  transition: background-color 0.2s ease;
  animation: _collapse-in_183r1_1 0.2s ease-out;
}
._collapsed-wrap_183r1_22:hover {
  background: #4b4c4d73;
}
@keyframes _collapse-in_183r1_1 {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._stacked-thumbnails_183r1_50 {
  position: relative;
  bottom: 6px;
  width: 42px;
  height: 36px;
}
._stacked-thumb_183r1_50 {
  display: flex;
  overflow: hidden;
  position: absolute;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 32px;
  height: 32px;
}
._stacked-thumb_183r1_50:after {
  position: absolute;
  left: -1px;
  top: -1px;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: #ffffff1a;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  content: "";
}
._stacked-thumb_183r1_50 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._stacked-thumb_183r1_50:nth-child(1) {
  left: 8px;
  top: 2px;
  transform: rotate(6deg);
}
._stacked-thumb_183r1_50:nth-child(2) {
  left: 0;
  top: 0;
  z-index: 1;
  transform: rotate(-6deg);
}
._collapsed-text_183r1_96 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
._collapsed-count_183r1_103 {
  overflow: hidden;
  line-height: 23px;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
}
._collapsed-status_183r1_113 {
  overflow: hidden;
  line-height: 23px;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff7a;
  letter-spacing: 0.32px;
}
._collapsed-icon_183r1_123 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  color: #ffffff7a;
}
._expanded_183r1_16 {
  display: flex;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  flex-direction: column;
  padding: 0 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  max-height: 268px;
  background: #4b4c4d52;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  animation: _expand-in_183r1_1 0.2s ease-out;
}
@keyframes _expand-in_183r1_1 {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
._expanded-header_183r1_160 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
}
._header-left_183r1_167 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._header-toggle-btn_183r1_173 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 99px;
  width: 20px;
  height: 20px;
  background: #ffffff29;
  cursor: pointer;
  color: #ffffffb3;
  transition: background-color 0.2s ease;
}
._header-toggle-btn_183r1_173:hover {
  background: #ffffff3d;
}
._header-progress_183r1_190 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  line-height: 23px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.32px;
}
._header-count_183r1_201 {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffffe8;
}
._header-status_183r1_207 {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffffb3;
}
._header-more-btn_183r1_213 {
  overflow: hidden;
  padding: 0 10px;
  border: none;
  border-radius: 99px;
  height: 24px;
  background: #ffffff0f;
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 12px;
  color: #ffffffb3;
  transition: background-color 0.2s ease;
}
._header-more-btn_183r1_213:hover {
  background: #ffffff1f;
}
._task-list_183r1_232 {
  display: flex;
  overflow: hidden auto;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}
._task-list_183r1_232::-webkit-scrollbar {
  width: 4px;
}
._task-list_183r1_232::-webkit-scrollbar-track {
  background: transparent;
}
._task-list_183r1_232::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
._task-list_183r1_232::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._task-item_183r1_254 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
._task-item_183r1_254:hover {
  background-color: #ffffff0d;
}
._task-thumbnail_183r1_268 {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 32px;
  height: 32px;
}
._task-thumbnail_183r1_268 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._task-thumbnail--blurred_183r1_282:after {
  position: absolute;
  left: -1px;
  top: -1px;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: #ffffff1a;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  content: "";
}
._task-info_183r1_294 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
._task-title_183r1_304 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  width: 242px;
  line-height: 20px;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._task-title--waiting_183r1_317 {
  color: #ffffff7a;
}
._task-subtitle_183r1_321 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  width: 242px;
  opacity: 0.6;
  line-height: 15px;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff7a;
  letter-spacing: 0.2px;
}
._task-status_183r1_336 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
._task-status-text_183r1_343 {
  overflow: hidden;
  line-height: 18px;
  text-overflow: ellipsis;
  text-align: right;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._task-status-running_183r1_354 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._task-status-waiting_183r1_360,
._task-status-done_183r1_366 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._task-more-btn_183r1_372 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 12px;
  height: 12px;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: color 0.15s ease;
}
._task-more-btn_183r1_372:hover {
  color: #ffffffb3;
}
._task-menu-portal_183r1_390 {
  display: flex;
  position: fixed;
  z-index: 9999;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-radius: 15px;
  width: 150px;
  background-color: #161718;
  box-shadow: 0 6px 20px #00000059;
}
._task-menu-item_183r1_403 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  height: 35px;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #fff9;
  white-space: nowrap;
  transition: all 0.3s;
}
._task-menu-item_183r1_403:hover {
  background-color: #ffffff1a;
}
._task-menu-item--danger_183r1_421 {
  color: #d74c47;
}
._spinner_183r1_425 {
  animation: _spin_183r1_425 1s linear infinite;
}
@keyframes _spin_183r1_425 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._task-thumbnail-placeholder_183r1_437 {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background-color: #ffffff0d;
}
._task-thumbnail-placeholder_183r1_437 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
._task-thumbnail-placeholder--blurred_183r1_454:after {
  position: absolute;
  left: -1px;
  top: -1px;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: #ffffff1a;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  content: "";
}
._mind-output_1a709_1 {
  position: absolute;
  padding: 50px 16px 16px;
  border-radius: 16px;
  width: 100%;
  height: 100%;
}
._mind-output-messages_1a709_10 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 4px;
}
._mind-output-unread_1a709_17 {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 200px;
  z-index: 1000;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px 0 0 8px;
  background: #1d1d1e;
  cursor: pointer;
}
._mind-output-scroll_1a709_33 {
  width: calc(100% + 16px);
  height: 100%;
}
._mind-output-main_1a709_38 {
  overflow: scroll;
  scroll-behavior: smooth;
  padding-right: 16px;
  padding-top: 30px;
  width: 100%;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}
._mind-output-main_1a709_38::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
._mind-output-main_1a709_38::-webkit-scrollbar-track {
  border-radius: 10px;
  background: transparent;
}
._mind-output-main_1a709_38::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #9b9b9b80;
  transition: background 0.3s ease;
}
._mind-output-main_1a709_38::-webkit-scrollbar-thumb:hover {
  background: #9b9b9bb3;
}
._mind-output-main_1a709_38::-webkit-scrollbar-thumb:active {
  background: #9b9b9be6;
}
._act-title_1a709_70 {
  margin-bottom: 12px;
  line-height: 38px;
  font-weight: 700;
  font-size: 28px;
  color: #eff0f0;
}
._act-subtitle_1a709_78 {
  margin-bottom: 40px;
  line-height: 22px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff91;
}
._act-container_1a709_86 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 16px;
  height: 100%;
  text-align: center;
}
._act-quickstart_1a709_98 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
._act-quickstart-badge_1a709_106 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 20px;
  width: auto;
  height: 32px;
  background-color: #353838;
  cursor: pointer;
  line-height: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff91;
}
._mind-output-paused_1a709_124 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._mind-output-paused_1a709_124 ._mind-output-paused-text_1a709_129 {
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffb3;
  letter-spacing: 0.34px;
}
._mind-output-paused_1a709_124 ._mind-output-paused-button_1a709_138 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background-color: #161718;
  cursor: pointer;
  line-height: 20px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  transition: all 0.2s ease-in-out;
}
._mind-output-paused_1a709_124 ._mind-output-paused-button_1a709_138:hover {
  opacity: 0.7;
  transform: scale(0.95);
}
._outline-button_19xsw_1 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background-color: #383838;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._outline-button-icon_19xsw_13 {
  width: 16px;
  height: 16px;
}
._human-cell_19xsw_18 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 16px 0;
  padding-left: 8%;
}
._human-cell-header_19xsw_26 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 16px 0;
}
._human-cell-references_19xsw_33 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
._human-cell-reference-item_19xsw_42 {
  padding: 4px 8px;
  border: 1px solid #2d64b1;
  border-radius: 8px;
  background-color: #2d64b1;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #fff;
}
._human-cell-content_19xsw_52 {
  position: relative;
  padding: 6px 12px;
  border-radius: 16px;
  background-color: #471c35;
  line-height: 22px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
}
._human-cell-reference-item-image_19xsw_63 {
  border-radius: 8px;
  width: 50px;
}
._human-cell-reference-item-text_19xsw_68 {
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #99a1af;
}
._markdown-content-human_19xsw_77 {
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  letter-spacing: 0.32px;
}
._ai-cell_19xsw_87 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-left: 32px;
}
._ai-cell-avatar_19xsw_94 {
  padding: 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
._ai-cell-content_19xsw_102 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding-top: 2px;
  width: 100%;
  font-size: 14px;
}
._ai-cell-content-item_19xsw_112 {
  margin-bottom: 4px;
  border-radius: 16px;
}
._ai-cell-header_19xsw_117 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._ai-cell-header-left_19xsw_123 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._cell-header-left-text_19xsw_129 {
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
}
._ai-cell-header-right_19xsw_136 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._ai-cell-header-right-item_19xsw_142 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._ai-cell-header-right-item-icon_19xsw_148 {
  width: 12px;
  height: 12px;
  color: #fff;
}
._ai-cell-header-right-item-text_19xsw_154 {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #fff;
}
._generic-cell_19xsw_160 {
  margin: 16px 0;
}
._generic-cell-header_19xsw_164 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}
._generic-cell-header-left_19xsw_171 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._generic-cell-header-left_19xsw_171 span {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #fff;
}
._generic-cell-badge-icon_19xsw_182 {
  width: 12px;
  height: 12px;
  color: #fff;
}
._generic-cell-content_19xsw_188 {
  padding: 16px;
  border-radius: 16px;
  background-color: #23232380;
}
._message-meta_19xsw_194 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #ffffff1a;
  font-family: Roboto, sans-serif;
  color: #6a7282;
}
._message-meta-time_19xsw_205,
._message-meta-status_19xsw_213 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._message-meta-status-badge_19xsw_221 {
  background-color: #fff;
}
._tool-call-container_19xsw_225 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  border-radius: 12px;
  width: 100%;
}
._tool-call-item_19xsw_234 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
._tool-call-item-header_19xsw_241 {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #f3f4f6;
}
._tool-call-item-header-left_19xsw_253 {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
._tool-call-item-header-right_19xsw_260 {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  align-items: center;
  gap: 4px;
}
._tool-call-item-header-right-text_19xsw_269 {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #6a7282;
}
._tool-call-name-container_19xsw_275 {
  display: flex;
  flex-direction: column;
}
._tool-call-name_19xsw_275 {
  padding: 0 8px;
  border-radius: 4px;
  width: max-content;
  background: linear-gradient(to right, #ef31a04e, #2d2b29);
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #fff;
}
._tool-call-subtitle_19xsw_290 {
  margin-top: 8px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #6a7282;
}
._tool-call-result-container_19xsw_297 {
  display: flex;
  flex-direction: column;
  width: 100%;
}
._tool-call-result-text_19xsw_303 {
  display: -webkit-box;
  max-height: 4.5rem;
  -webkit-line-clamp: 3;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #99a1af;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
._tool-call-result-text-overflow_19xsw_314 {
  overflow: hidden;
  margin-bottom: 8px;
  text-overflow: ellipsis;
}
._tool-call-result-expand-button_19xsw_320 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  background-color: transparent;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #51a2ff;
  transition: all 0.3s ease;
}
._tool-call-result-expand-button_19xsw_320:hover {
  color: #fff;
}
._tool-call-result-expand-button-icon_19xsw_336 {
  width: 12px;
  height: 12px;
}
._tool-call-result-resources_19xsw_341 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
._tool-call-status-icon_19xsw_347 {
  width: 12px;
  height: 12px;
  color: #6a7282;
}
._tool-call-status-icon-invoking_19xsw_353 {
  width: 12px;
  height: 12px;
  animation: _spin_19xsw_1 1s linear infinite;
}
._tool-call-status-icon-success_19xsw_359 {
  width: 12px;
  height: 12px;
  color: #0f0;
}
._tool-call-status-icon-error_19xsw_365 {
  width: 12px;
  height: 12px;
  color: red;
}
._message-meta-status-icon-sending_19xsw_371 {
  width: 12px;
  height: 12px;
  color: #6a7282;
  animation: _spin_19xsw_1 1s linear infinite;
}
._message-meta-time-icon_19xsw_378 {
  width: 12px;
  height: 12px;
  color: #6a7282;
}
._message-meta-status-icon-sent_19xsw_384,
._message-meta-status-icon-delivered_19xsw_390 {
  width: 12px;
  height: 12px;
  color: #0f0;
}
._message-meta-status-icon-error_19xsw_396 {
  width: 12px;
  height: 12px;
  color: red;
}
@keyframes _spin_19xsw_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._markdown-content_19xsw_77 {
  font-family: Roboto, sans-serif;
  word-break: auto-phrase;
}
._markdown-content_19xsw_77 pre {
  white-space: normal;
}
._custom-invite_19xsw_418,
._custom-invite-host_19xsw_419,
._custom-invite-agent_19xsw_420 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._code-block_19xsw_426 {
  margin: 16px 0;
  padding: 16px;
  border-radius: 16px;
  background-color: #23232380;
  word-break: auto-phrase;
}
._code-block-language_19xsw_434 {
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._code-block-pre_19xsw_439 {
  overflow-x: auto;
}
._code-block-code_19xsw_443 {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  word-break: auto-phrase;
  white-space: pre-wrap;
}
._inline-code_19xsw_450 {
  padding: 2px 6px;
  border-radius: 8px;
  background: #ffffff0f;
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #9fc2ef;
  word-break: auto-phrase;
  text-wrap: auto;
}
._markdown-content-link_19xsw_462 {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  color: #51a2ff;
  word-break: auto-phrase;
  transition: all 0.3s ease;
}
._markdown-content-link_19xsw_462:hover {
  color: #fff;
}
._markdown-content-blockquote_19xsw_473 {
  margin: 16px 0;
  padding-left: 4px;
  border-left: 4px solid rgba(255, 255, 255, 0.2);
  font-family: Roboto, sans-serif;
  font-size: 17px;
}
._markdown-content-em_19xsw_481 {
  display: block;
  margin: 8px 0;
  padding: 4px;
  border-radius: 8px;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: #ffffff7a;
  word-break: auto-phrase;
}
._markdown-content-h1_19xsw_495 {
  margin: 16px 0;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #ffffffe8;
  word-break: auto-phrase;
}
._markdown-content-h2_19xsw_505 {
  margin: 16px 0;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #ffffffe8;
  word-break: auto-phrase;
}
._markdown-content-h3_19xsw_514 {
  margin: 16px 0;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #ffffffe8;
  word-break: auto-phrase;
}
._markdown-content-hr_19xsw_523 {
  margin: 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
}
._markdown-content-li_19xsw_462 {
  list-style: outside;
  margin: 10px 0;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  word-break: auto-phrase;
}
._markdown-content-li_19xsw_462:last-child {
  margin-bottom: 0;
}
._markdown-content-ol_19xsw_541 {
  list-style: decimal !important;
  list-style-type: decimal;
  list-style-position: inside;
  gap: 16px;
  padding-left: 16px;
  font-size: 14px;
}
._markdown-content-ol_19xsw_541 ._markdown-content-li_19xsw_462 {
  list-style: decimal !important;
}
._markdown-content-p_19xsw_553 {
  margin: 10px 0;
  line-height: 26px;
  vertical-align: middle;
  font-family: Roboto, sans-serif;
  font-style: regular;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffe8;
  word-break: break-word;
  letter-spacing: 2%;
}
._markdown-content-p_19xsw_553 img {
  display: none;
}
._markdown-content-strong_19xsw_570 {
  font-family: Roboto, sans-serif;
  font-weight: 600;
  color: #ffffffe8;
  word-break: auto-phrase;
  letter-spacing: 0.32px;
}
._markdown-content-table_19xsw_578 {
  overflow-x: auto;
  margin: 16px 0;
}
._markdown-content-table-table_19xsw_583 {
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  min-width: 100%;
  color: #fffc;
}
._markdown-content-table-td_19xsw_589 {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #fffc;
}
._markdown-content-table-th_19xsw_597,
._markdown-content-table-thead_19xsw_604 {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._markdown-content-ul_19xsw_611 {
  list-style-type: disc;
  list-style-position: inside;
  gap: 16px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._markdown-content-ul_19xsw_611 ._markdown-content-li_19xsw_462 {
  list-style: disc !important;
}
._message-content-renderer-images_19xsw_622 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._message-content-renderer-images-item_19xsw_628 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 16px 0;
}
._message-content-renderer-images-item-image_19xsw_636,
._message-content-renderer-images-item-video_19xsw_644 {
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  border-radius: 8px;
  width: auto;
  height: auto;
  box-shadow: 0 0 10px #0000001a;
}
._message-content-renderer-images-item-video-text_19xsw_652 {
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-size: 14px;
}
._message-content-renderer-images-item-audio_19xsw_658 {
  margin: 16px 0;
}
._message-content-renderer-images-item-audio-text_19xsw_662 {
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-size: 14px;
}
._message-content-renderer-text_19xsw_668 {
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._message-content-renderer-video_19xsw_673 {
  margin: 16px 0;
}
._message-content-renderer-video-video_19xsw_677 {
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  border-radius: 8px;
  width: auto;
  height: auto;
  box-shadow: 0 0 10px #0000001a;
}
._message-content-bind-img_19xsw_685 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 16px 0;
}
._message-content-bind-img-image_19xsw_692 {
  border-radius: 8px;
  width: 80px;
  height: auto;
}
._message-content-renderer-else_19xsw_698 {
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
._message-content-renderer-else-text_19xsw_703 {
  white-space: pre-wrap;
}
._message-content-renderer-images-item-button_19xsw_707 {
  border-radius: 8px;
  width: 80px;
  height: 24px;
  background-color: #51a2ff;
}
._hand-off-tool-call-container_19xsw_714 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
._hand-off-tool-call-container_19xsw_714 ._before-hand-off_19xsw_720 {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
._hand-off-tool-call-container_19xsw_714 ._before-hand-off_19xsw_720 img {
  width: 144px;
}
._hand-off-tool-call-renderer_19xsw_729 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 24px 0 40px;
  padding: 8px 4px;
  border-radius: 16px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
}
span._hand-off-tool-call-renderer-agent_19xsw_743 {
  display: flex;
  align-items: center;
  margin: 0 4px;
  color: #fabde1;
  text-wrap-mode: nowrap;
}
span._hand-off-tool-call-renderer-agent_19xsw_743 img {
  width: 20px;
  height: 20px;
}
._human-message-image-list_19xsw_755 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}
._human-message-image-list-item_19xsw_764 {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  background: #242526;
  object-fit: cover;
  aspect-ratio: 1/1;
  object-position: top;
}
._human-message-document-list_19xsw_774 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
._markdown-content-chain-tag_19xsw_783 {
  vertical-align: text-bottom;
  font-family: Roboto, sans-serif;
  color: #fd72a5;
}
._markdown-content-hide_19xsw_789 {
  display: none;
}
._sora2-tip-card_19xsw_793 {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #fd72a5;
  border-radius: 12px;
  background: #ffffff0d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
._sora2-tip-title_19xsw_802 {
  margin-bottom: 12px;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffe6;
}
._sora2-tip-actions_19xsw_811 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._sora2-tip-btn_19xsw_817 {
  flex: 1;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: #ffffff14;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #ffffffe6;
  transition: all 0.2s ease;
}
._sora2-tip-btn_19xsw_817:hover {
  border-color: #fff6;
  background: #ffffff24;
  color: #fff;
  transform: translateY(-1px);
}
._sora2-tip-btn_19xsw_817:active {
  background: #ffffff1a;
  transform: translateY(0) scale(0.98);
}
._sora2-tip-btn-primary_19xsw_841 {
  border: none;
  background: linear-gradient(90deg, #ff7575, #fd69cf);
  box-shadow: 0 2px 8px #ff75754d;
  color: #fff;
}
._sora2-tip-btn-primary_19xsw_841:hover {
  background: linear-gradient(90deg, #ff8585, #fd79df);
  box-shadow: 0 4px 12px #ff757566;
  transform: translateY(-1px);
}
._sora2-tip-btn-primary_19xsw_841:active {
  background: linear-gradient(90deg, #ff6565, #fd59bf);
  box-shadow: 0 2px 6px #ff75754d;
  transform: translateY(0) scale(0.98);
}
._choose-panel-with-ratio_1od0q_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
._choose-panel-ratio_1od0q_8 {
  display: flex;
  align-items: center;
  width: 100%;
}
._choose-panel-ratio-cover_1od0q_14 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  width: 56px;
  height: 56px;
  background-color: #ffffff0f;
}
._choose-panel-ratio-content_1od0q_25 {
  flex: 1;
}
._choose-panel-ratio-group_1od0q_29 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._choose-panel-ratio-title_1od0q_35 {
  display: block;
  margin: 12px 0;
  font-family: Roboto, sans-serif;
  color: #fabde1;
}
._panel-ratio_1od0q_42 {
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border ease 0.6s;
}
._panel-ratio_1od0q_42:hover {
  border: 1px solid #fabde1;
}
._panel-ratio-disabled_1od0q_55:hover {
  border: 1px solid transparent;
}
._panel-ratio-tag_1od0q_59 {
  display: flex;
  position: relative;
  align-items: center;
  flex: 1;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  width: 100%;
  background-color: #ffffff0f;
  cursor: pointer;
}
._panel-ratio-outline_1od0q_72 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border: 1px solid rgb(250, 189, 225);
  border-radius: 12px;
}
._panel-ratio-title_1od0q_80 {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffffe8;
}
._panel-ratio-desc_1od0q_91 {
  cursor: pointer;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
}
._panel-ratio-content-info_1od0q_100 {
  flex: 1;
}
._aspect-box_1od0q_104 {
  background: linear-gradient(120deg, #fc73c2 13.14%, #89fada 88.61%);
}
._aspect-ratio-group_1od0q_108 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}
._aspect-ratio-group_1od0q_108 ._aspect-ratio-group-item-content_1od0q_114 {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 15px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
}
._aspect-ratio-group_1od0q_108 ._aspect-ratio-group-item_1od0q_114 {
  transition: color ease 0.6s;
}
._aspect-ratio-group_1od0q_108 ._aspect-ratio-group-item_1od0q_114 img {
  width: 16px;
  height: 16px;
}
._aspect-ratio-group_1od0q_108 ._aspect-ratio-group-item-active_1od0q_131 {
  color: #fabde1;
}
._choose-style_qe1tc_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 0;
}
._choose-style-item_qe1tc_8 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 22%;
  cursor: default;
  transition: all ease 0.3s;
}
._choose-style-item_qe1tc_8:hover ._choose-style-item-img_qe1tc_18 {
  border: 2px solid rgb(250, 189, 225);
  border-radius: 8px;
}
._choose-style-item_qe1tc_8 ._choose-style-item-img_qe1tc_18 {
  border: 2px solid transparent;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  aspect-ratio: 9/16;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: all ease 0.3s;
}
._choose-style-item_qe1tc_8 ._choose-style-item-img_qe1tc_18:hover {
  border: 2px solid rgb(250, 189, 225);
  opacity: 0.8;
}
._choose-style-item_qe1tc_8 ._choose-style-item-active_qe1tc_38 {
  border: 2px solid rgb(250, 189, 225);
}
._choose-style-item-last-container_qe1tc_42 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  background-color: #353838;
  background-size: 100% 100%;
  transition: all ease 0.6s;
  aspect-ratio: 1/1;
}
._choose-style-item-last-container_qe1tc_42:hover {
  border: 2px solid rgb(250, 189, 225);
  opacity: 0.8;
}
._choose-style-item-disabled_qe1tc_61 {
  border: 2px solid transparent;
  opacity: 0.2;
}
._choose-style-item-disabled_qe1tc_61:hover ._choose-style-item-img_qe1tc_18 {
  border: 2px solid transparent !important;
  cursor: not-allowed;
}
._choose-style-item-disabled_qe1tc_61
  ._choose-style-item-last-container_qe1tc_42:hover {
  border: 2px solid transparent;
  opacity: 0.8;
}
._choose-style-item-last_qe1tc_42 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 100%;
  height: 52px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
._choose-style-item-last_qe1tc_42 img {
  width: 16px;
  height: 16px;
  outline: none;
}
._choose-style-item-last_qe1tc_42 span {
  line-height: 18px;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
}
._choose-style-item-last_qe1tc_42 ._choose-style-item-active_qe1tc_38 {
  border: 2px solid rgb(250, 189, 225);
}
._choose-style-item-tltle_qe1tc_101 {
  display: -webkit-box;
  overflow: hidden;
  width: 99%;
  line-height: 20px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  -webkit-box-orient: vertical;
}
._choose-style-item_qe1tc_8,
._choose-style-item-last_qe1tc_42 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._choose-style-shuffle_qe1tc_123 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 100%;
  background-color: #ffffff0f;
}
._choose-style-shuffle_qe1tc_123 div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
  transition: all ease 0.3s;
}
._choose-style-shuffle_qe1tc_123 div:hover {
  opacity: 0.85;
}
._choose-style-shuffle_qe1tc_123 svg {
  color: #ffffff7a;
}
._choose-style-shuffle_qe1tc_123 ._choose-style-shuffle-library_qe1tc_155 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  height: 52px;
  font-size: 14px;
}
._choose-style-shuffle_qe1tc_123
  ._choose-style-shuffle-library_qe1tc_155
  ._shuffle-left_qe1tc_164,
._choose-style-shuffle_qe1tc_123
  ._choose-style-shuffle-library_qe1tc_155
  ._shuffle-right_qe1tc_169 {
  display: flex;
  align-items: center;
  width: auto;
}
._choose-style-shuffle_qe1tc_123
  ._choose-style-shuffle-library_qe1tc_155
  ._shuffle-right_qe1tc_169
  ._input-bind-style-name_qe1tc_174 {
  display: -webkit-box;
  overflow: hidden;
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 16px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  -webkit-box-orient: vertical;
}
._choose-style-shuffle_qe1tc_123 ._choose-style-shuffle-library_qe1tc_155 img {
  width: 16px;
}
._choose-style-shuffle_qe1tc_123 ._choose-style-shuffle-library_qe1tc_155 span {
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
}
._bubble_lehl8_2 {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  width: 31%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  line-height: 20px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffe8;
  aspect-ratio: 1/1;
}
._active-bubble_lehl8_21 {
  position: absolute;
  box-sizing: content-box;
  border: 2px solid rgb(250, 189, 225);
  border-radius: 8px;
  width: 100%;
  height: 100%;
}
._blur-bg_lehl8_30 {
  position: absolute;
  z-index: 0;
  border-radius: 12px;
  width: 100px;
  height: 30px;
  animation: _shimmer_lehl8_1 3s ease-in-out infinite;
}
._text_lehl8_39 {
  display: -webkit-box;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 90%;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  text-align: center;
  font-family: Roboto, sans-serif;
}
@keyframes _shimmer_lehl8_1 {
  0%,
  to {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
._motion-panel_foyww_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
._choose-style_1kygk_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
._choose-style_1kygk_1 ._choose-style-item_1kygk_8 {
  display: flex;
  justify-content: flex-start;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}
._choose-style_1kygk_1 ._choose-style-item_1kygk_8:hover {
  opacity: 0.5;
}
._choose-style_1kygk_1 ._choose-style-item-active_1kygk_19 {
  border: 2px solid rgb(250, 189, 225);
}
._choose-style_1kygk_1 ._choose-style-shuffle_1kygk_22 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 100%;
  background-color: #ffffff0f;
}
._choose-style_1kygk_1 ._choose-style-shuffle_1kygk_22 div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
  transition: all ease 0.3s;
}
._choose-style_1kygk_1 ._choose-style-shuffle_1kygk_22 div:hover {
  opacity: 0.85;
}
._choose-style_1kygk_1 ._choose-style-shuffle_1kygk_22 svg {
  color: #ffffff7a;
}
._choose-style_1kygk_1
  ._choose-style-shuffle_1kygk_22
  ._choose-style-shuffle-library_1kygk_54 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  height: 52px;
  font-size: 14px;
}
._choose-style_1kygk_1
  ._choose-style-shuffle_1kygk_22
  ._choose-style-shuffle-library_1kygk_54
  ._shuffle-left_1kygk_63,
._choose-style_1kygk_1
  ._choose-style-shuffle_1kygk_22
  ._choose-style-shuffle-library_1kygk_54
  ._shuffle-right_1kygk_68 {
  display: flex;
  align-items: center;
  width: auto;
}
._choose-style_1kygk_1
  ._choose-style-shuffle_1kygk_22
  ._choose-style-shuffle-library_1kygk_54
  ._shuffle-right_1kygk_68
  ._input-bind-style-name_1kygk_73 {
  display: -webkit-box;
  overflow: hidden;
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 16px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  -webkit-box-orient: vertical;
}
._choose-style_1kygk_1
  ._choose-style-shuffle_1kygk_22
  ._choose-style-shuffle-library_1kygk_54
  img {
  width: 16px;
}
._choose-style_1kygk_1
  ._choose-style-shuffle_1kygk_22
  ._choose-style-shuffle-library_1kygk_54
  span {
  background: linear-gradient(120deg, #f8a0d3 13.14%, #9efae0 88.61%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
._reference-box_1xxyg_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
}
._reference-box_1xxyg_1 ._reference-box-inner_1xxyg_8 {
  display: flex;
  gap: 8px;
}
._reference-box_1xxyg_1 ._reference-box-inner_1xxyg_8 img {
  border-radius: 6px;
  height: 56px;
  background-position: top;
  background-size: cover;
}
._reference-box_1xxyg_1
  ._reference-box-inner_1xxyg_8
  ._reference-box-detail_1xxyg_18 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
._reference-box_1xxyg_1
  ._reference-box-inner_1xxyg_8
  ._reference-box-detail_1xxyg_18
  ._reference-box-detail-name_1xxyg_23 {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
}
._reference-box_1xxyg_1
  ._reference-box-inner_1xxyg_8
  ._reference-box-detail_1xxyg_18
  ._reference-box-detail-desc_1xxyg_33 {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
._long-process-mission-container_k0dz8_1 {
  margin: 12px 0;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffe8;
  letter-spacing: 0.34px;
}
._long-process-mission-content-error_k0dz8_12 {
  display: flex;
  align-items: center;
  margin: 12px 0;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffb3;
  overflow-wrap: break-word;
  word-break: auto-phrase;
  letter-spacing: 0.34px;
}
._long-process-mission-content-count_k0dz8_27 {
  margin: 12px 0;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffb3;
  letter-spacing: 0.34px;
}
._long-process-mission-content-count-call-task-agent_k0dz8_38 {
  line-height: 20px;
  text-align: left;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
}
._long-process-mission-content-result_k0dz8_48 {
  margin: 12px 0;
  min-height: 80px;
}
._progress-table-container_k0dz8_53 {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: 8px;
  background: #ffffff0d;
}
._progress-table_k0dz8_53 {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
._progress-table_k0dz8_53 th,
._progress-table_k0dz8_53 td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
._progress-table_k0dz8_53 th {
  background: #ffffff08;
  font-weight: 500;
  color: #ffffffb3;
  white-space: nowrap;
}
._progress-table_k0dz8_53 th:first-child {
  border-radius: 8px 0 0;
  width: 100px;
}
._progress-table_k0dz8_53 th:nth-child(2) {
  width: 90px;
}
._progress-table_k0dz8_53 th:last-child {
  border-radius: 0 8px 0 0;
}
._progress-table_k0dz8_53 td {
  vertical-align: middle;
  color: #ffffffd9;
}
._progress-table_k0dz8_53 tbody tr:last-child td {
  border-bottom: none;
}
._progress-table_k0dz8_53 tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}
._progress-table_k0dz8_53 tbody tr:last-child td:last-child {
  border-radius: 0 0 8px;
}
._progress-table_k0dz8_53 tbody tr:hover {
  background: #ffffff08;
}
._status-badge_k0dz8_105 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
}
._status-success_k0dz8_113 {
  background: #52c41a26;
  color: #52c41a;
}
._status-failed_k0dz8_118 {
  background: #d74c4726;
  color: #d74c47;
}
._status-processing_k0dz8_123 {
  background: #1890ff26;
  color: #1890ff;
}
._status-pending_k0dz8_128 {
  background: #ffffff1a;
  color: #ffffff80;
}
._result-cell_k0dz8_133 {
  overflow: hidden;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._result-success_k0dz8_140 {
  color: #52c41a;
}
._result-error_k0dz8_144 {
  cursor: help;
  color: #d74c47;
}
._result-pending_k0dz8_149 {
  color: #ffffff4d;
}
._loader_102y2_2 {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.0588235294);
  border-radius: 8px;
  width: 100%;
  height: 100%;
  background-color: #272929;
  opacity: 1;
}
._card-gallery_102y2_12 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._card-gallery_102y2_12 ._card-gallery-item_102y2_17 {
  border-radius: 8px;
  width: 25%;
  aspect-ratio: 1/1;
  min-height: 40px;
}
._card-gallery_102y2_12 ._card-gallery-item_102y2_17 img {
  border-radius: 8px;
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
  object-position: top;
  cursor: pointer;
}
._card-gallery_102y2_12 ._card-gallery-item-loading_102y2_31 {
  height: 100%;
}
._card-gallery-fold_102y2_35 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  min-height: 114px;
  cursor: pointer;
}
._card-gallery-fold_102y2_35 ._card-gallery-fold-item_102y2_43 img {
  border-radius: 8px;
  width: 113px;
  height: 113px;
  object-fit: cover;
}
._card-gallery-fold_102y2_35 ._card-gallery-fold-item_102y2_43:nth-child(1) {
  z-index: 3;
}
._card-gallery-fold_102y2_35 ._card-gallery-fold-item_102y2_43:nth-child(2) {
  position: absolute;
  left: 16px;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: scale(0.9);
}
._card-gallery-fold_102y2_35 ._card-gallery-fold-item_102y2_43:nth-child(3) {
  position: absolute;
  left: 32px;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
}
._card-gallery-fold-play_102y2_69 {
  display: flex;
  position: absolute;
  z-index: 5;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: #00000054;
  -webkit-backdrop-filter: blur(2.4px);
  backdrop-filter: blur(2.4px);
  cursor: pointer;
}
._thumb-cover_102y2_84 {
  display: flex;
  position: relative;
  align-items: center;
  padding: 12px 0;
}
._thumb-cover_102y2_84 ._thumb-cover-book_102y2_90 {
  position: absolute;
  left: 25px;
  z-index: 0;
  padding: 8px;
  border-radius: 6px;
  width: 72px;
  height: 96px;
}
._thumb-cover_102y2_84 ._thumb-cover-book_102y2_90 img {
  position: absolute;
  left: 0;
  top: 3px;
  z-index: -1;
  width: auto;
  height: 76px;
}
._thumb-cover_102y2_84
  ._thumb-cover-book_102y2_90
  ._thumb-cover-book-title_102y2_107 {
  margin-top: 6px;
  line-height: 10px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 8px;
  color: #ffffffb3;
  transform: rotate(-7deg);
}
._thumb-cover_102y2_84 ._thumb-cover-book-info_102y2_116 {
  padding: 12px 12px 12px 112px;
  border-radius: 12px;
  width: 100%;
  background: #ffffff0f;
  box-shadow: 0 4px 24px #0000003d;
}
._thumb-cover_102y2_84
  ._thumb-cover-book-info_102y2_116
  ._thumb-cover-book-author_102y2_124 {
  display: flex;
  flex-direction: column;
}
._thumb-cover_102y2_84
  ._thumb-cover-book-info_102y2_116
  ._thumb-cover-book-author_102y2_124
  h5 {
  margin-bottom: 4px;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
}
._thumb-cover_102y2_84
  ._thumb-cover-book-info_102y2_116
  ._thumb-cover-book-author_102y2_124
  ._thumb-cover-book-details_102y2_136 {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  line-height: 15px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
}
._fold-panel_102y2_148 {
  width: 100%;
}
._fold-panel_102y2_148 ._fold-panel-title_102y2_151 {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
}
._fold-panel_102y2_148 ._fold-panel-title_102y2_151 svg {
  cursor: pointer;
}
._fold-panel_102y2_148 ._fold-panel-content_102y2_163 {
  display: -webkit-box;
  overflow: hidden;
  position: relative;
  padding-top: 18px;
  line-height: 23px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
  -webkit-box-orient: vertical;
}
._fold-panel_102y2_148
  ._fold-panel-content_102y2_163
  ._fold-panel-content-mask_102y2_177 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #16171800, #161718a3);
}
._card-audio-layer_102y2_186,
._card-attach_102y2_192 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._main_1tqol_1 {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
._linear-bg_1tqol_10 {
  position: absolute;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fff0, #fff3);
}
._icon_1tqol_18 {
  animation: _spin_1tqol_1 1s linear infinite;
}
@keyframes _spin_1tqol_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._audio-play-container_1jjq2_1 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
._audio-play_1jjq2_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background-color: #ffffff0f;
}
._audio-play_1jjq2_1 ._audio-play-info_1jjq2_16 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}
._audio-play_1jjq2_1 ._audio-play-info-title_1jjq2_22 {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  max-width: 240px;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
  white-space: nowrap;
  -webkit-box-orient: vertical;
}
._audio-play_1jjq2_1 ._audio-play-icon_1jjq2_38 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #ffffff0f;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
._audio-play_1jjq2_1 ._audio-play-icon_1jjq2_38:hover {
  opacity: 0.8;
}
._audio-play_1jjq2_1 ._audio-play-icon_1jjq2_38 img {
  width: 16px;
  height: 16px;
}
._audio-play_1jjq2_1 ._audio-play-info-detail-duration_1jjq2_56 {
  display: flex;
  position: relative;
  align-items: center;
  gap: 8px;
  height: 16px;
}
._audio-play_1jjq2_1 ._audio-play-info-detail-duration-time_1jjq2_63 {
  display: flex;
  align-items: center;
}
._audio-play_1jjq2_1 ._audio-play-info-detail-duration-time_1jjq2_63 span {
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
}
._audio-play_1jjq2_1
  ._audio-play-info-detail-duration-time_1jjq2_63
  ._audio-play-info-detail-duration-time-contrast_1jjq2_76 {
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff21;
  letter-spacing: 0.24px;
}
._audio-play_1jjq2_1 ._audio-play-info-detail-wave_1jjq2_84 {
  flex: 1;
  padding-right: 20px;
  height: 16px;
}
._audio-play-download_1jjq2_90 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: #ffffff1a;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
._audio-play-download_1jjq2_90:hover {
  opacity: 0.8;
}
._choose-panel-group_1nl09_1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._choose-panel-film-meta-title_1nl09_7 {
  display: block;
  margin: 12px 0;
  font-size: 17px;
  color: #fff;
}
._panel_1nl09_14 {
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  flex: 1;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border ease 0.6s;
}
._panel_1nl09_14:hover {
  border: 1px solid #fabde1;
}
._panel-tag_1nl09_28 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  width: 100%;
  background-color: #ffffff0f;
  cursor: pointer;
}
._panel-outline_1nl09_42 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgb(250, 189, 225);
  border-radius: 12px;
}
._panel-title_1nl09_49 {
  display: flex;
  display: -webkit-box;
  overflow: hidden;
  align-items: center;
  gap: 4px;
  width: 100%;
  line-height: 23px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
  -webkit-box-orient: vertical;
}
._panel-desc_1nl09_69 {
  cursor: pointer;
  line-height: 23px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
}
._aspect-box_1nl09_79 {
  background: linear-gradient(120deg, #fc73c2 13.14%, #89fada 88.61%);
}
._aspect-ratio-group_1nl09_83 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}
._aspect-ratio-group_1nl09_83 ._aspect-ratio-group-item-content_1nl09_89 {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 15px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff7a;
}
._aspect-ratio-group_1nl09_83 ._aspect-ratio-group-item_1nl09_89 {
  transition: color ease 0.6s;
}
._aspect-ratio-group_1nl09_83 ._aspect-ratio-group-item_1nl09_89 img {
  width: 16px;
  height: 16px;
}
._aspect-ratio-group_1nl09_83 ._aspect-ratio-group-item-active_1nl09_106 {
  color: #fabde1;
}
._choose-style-shuffle_1nl09_110 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  border-radius: 16px;
  width: 100%;
  background-color: #ef319f;
}
._choose-style-shuffle_1nl09_110 div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all ease 0.3s;
}
._choose-style-shuffle_1nl09_110 div:hover {
  opacity: 0.85;
}
._choose-style-shuffle_1nl09_110 svg {
  color: #ffffff7a;
}
._choose-style-shuffle_1nl09_110 ._choose-style-shuffle-library_1nl09_143 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  height: 52px;
  font-size: 14px;
}
._choose-style-shuffle_1nl09_110 ._choose-style-shuffle-library_1nl09_143 img {
  width: 16px;
}
._choose-style-shuffle_1nl09_110 ._choose-style-shuffle-library_1nl09_143 span {
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
}
._choose-style-shuffle_1nl09_110 ._shuffle-center_1nl09_161 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._choose-style-shuffle-disabled_1nl09_167 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  border-radius: 8px;
  width: 100%;
  background-color: #272929;
}
._choose-style-shuffle-disabled_1nl09_167 div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  cursor: pointer;
  line-height: 15px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all ease 0.3s;
}
._choose-style-shuffle-disabled_1nl09_167 div:hover {
  opacity: 0.85;
}
._choose-style-shuffle-disabled_1nl09_167 svg {
  color: #ffffff7a;
}
._choose-style-shuffle-disabled_1nl09_167
  ._choose-style-shuffle-library_1nl09_143 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  height: 52px;
  font-size: 14px;
}
._choose-style-shuffle-disabled_1nl09_167
  ._choose-style-shuffle-library_1nl09_143
  img {
  width: 16px;
}
._choose-style-shuffle-disabled_1nl09_167
  ._choose-style-shuffle-library_1nl09_143
  span {
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, sans-serif;
}
._choose-style-shuffle-disabled_1nl09_167 ._shuffle-center_1nl09_161 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._credit-cost-panel_1ivo0_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 8px;
}
._credit-cost-panel_1ivo0_1 ._credit-cost-panel-title_1ivo0_8 {
  margin-bottom: 12px;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffe8;
  letter-spacing: 0.34px;
}
._credit-cost-panel_1ivo0_1 ._cost-highlight_1ivo0_18 {
  color: #fabde1;
}
._credit-cost-panel_1ivo0_1 ._credit-cost-panel-table_1ivo0_21 {
  width: 100%;
}
._credit-cost-panel_1ivo0_1 table {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  margin-bottom: 32px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  width: 100%;
}
._credit-cost-panel_1ivo0_1 table thead {
  display: flex;
  gap: 12px;
  background-color: #ffffff0f;
}
._credit-cost-panel_1ivo0_1 table thead th {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 48px;
  line-height: 18px;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._credit-cost-panel_1ivo0_1 table thead th:nth-child(1) {
  flex: 1;
  padding-left: 12px;
  min-width: 120px;
}
._credit-cost-panel_1ivo0_1 table thead th:nth-child(2) {
  width: 68px;
}
._credit-cost-panel_1ivo0_1 table thead th:nth-child(3) {
  width: 68px;
}
._credit-cost-panel_1ivo0_1 table thead th:nth-child(4) {
  width: 68px;
}
._credit-cost-panel_1ivo0_1 table tbody {
  display: flex;
  flex-direction: column;
}
._credit-cost-panel_1ivo0_1 table tbody tr {
  display: flex;
  gap: 12px;
}
._credit-cost-panel_1ivo0_1 table tbody td {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 48px;
  line-height: 18px;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
}
._credit-cost-panel_1ivo0_1 table tbody td:nth-child(1) {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 2px;
  padding-left: 12px;
  min-width: 120px;
}
._credit-cost-panel_1ivo0_1 table tbody td:nth-child(1) img {
  width: 20px;
}
._credit-cost-panel_1ivo0_1 table tbody td:nth-child(2) {
  width: 68px;
}
._credit-cost-panel_1ivo0_1 table tbody td:nth-child(3) {
  gap: 4px;
  width: 68px;
}
._credit-cost-panel_1ivo0_1 table tbody td:nth-child(4) {
  width: 68px;
}
._credit-cost-panel_1ivo0_1 table tfoot {
  padding: 12px 16px;
  background-color: #ffffff0f;
}
._credit-cost-panel_1ivo0_1 table tfoot p {
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._credit-cost-panel-no-credit-tips_1ivo0_123 {
  margin-bottom: 24px;
  line-height: 26px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #ffffffe8;
  letter-spacing: 0.34px;
}
._credit-cost-panel-footer_1ivo0_135 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
}
._credit-cost-panel-footer_1ivo0_135 ._credit-no-credit_1ivo0_143 {
  padding: 10px 12px;
  border-radius: 16px;
  background: #272929;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff7fb;
  transition: all 0.3s ease;
}
._credit-cost-panel-footer_1ivo0_135 ._credit-no-credit_1ivo0_143:hover {
  opacity: 0.85;
}
._credit-cost-panel-footer_1ivo0_135
  ._credit-cost-panel-footer-confirm_1ivo0_161 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: #ef319f;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #f8f7f7;
  transition: all 0.3s ease;
}
._credit-cost-panel-footer_1ivo0_135
  ._credit-cost-panel-footer-confirm_1ivo0_161:hover {
  opacity: 0.85;
}
._credit-cost-panel-footer_1ivo0_135 ._credit-cost-confirm-disabled_1ivo0_185 {
  opacity: 0.5;
  cursor: not-allowed;
}
._credit-cost-panel-footer_1ivo0_135
  ._credit-cost-confirm-disabled_1ivo0_185:hover {
  opacity: 0.5;
}
._free-cost_1ivo0_193 {
  padding: 0 4px;
  border-radius: 6px;
  background: linear-gradient(0deg, #ef319f0f, #ef319f0f), #ffffff0f;
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #fabde1;
  letter-spacing: 0.24px;
}
._cost-summary-total_1ivo0_207 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
._cost-summary-total_1ivo0_207 ._cost-summary-total-text_1ivo0_213 {
  line-height: 18px;
  text-align: right;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
}
._cost-summary-total_1ivo0_207 ._cost-summary-total-value_1ivo0_223 {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 20px;
  text-align: right;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffebf7;
}
._cost-summary-divider_1ivo0_237 {
  margin-bottom: 8px;
  width: 100%;
  height: 0.5px;
  background: #ffffff0f;
}
._hogi-image-ref-para_3kq4w_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  height: 24px;
  background: #ffffff0f;
}
._hogi-image-ref-para_3kq4w_1 img {
  border-radius: 4px;
  width: 16px;
  height: 16px;
}
._hogi-image-ref-para-ref-type_3kq4w_17 {
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
}
._send-bubble_1bske_1 {
  display: flex;
  position: absolute;
  right: 0;
  bottom: -6.667px;
  align-items: center;
  padding: 0 4px;
  border-radius: 8px;
  height: 16px;
  background: #ffffff36;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
._send-bubble_1bske_1 img {
  width: 12px;
}
._send-bubble-loading_1bske_17 {
  animation: _spin_1bske_1 1s linear infinite;
}
@keyframes _spin_1bske_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._analyze-chapter_1x8ae_1 {
  border-radius: 12px;
  color: #ffffffe8;
}
._analyze-chapter-header_1x8ae_6 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 12px;
  height: 50px;
}
._analyze-chapter-header_1x8ae_6 img {
  width: 20px;
}
._analyze-chapter-header_1x8ae_6 span {
  line-height: 28px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
}
._analyze-chapter-content_1x8ae_23 {
  display: flex;
  flex-direction: column;
  padding: 15px 12px;
}
._analyze-chapter-content-item_1x8ae_29 {
  display: flex;
  flex-direction: column;
}
._analyze-chapter-content-item_1x8ae_29
  ._analyze-chapter-content-item-header_1x8ae_33 {
  display: flex;
  align-items: center;
  gap: 18px;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
}
._analyze-chapter-content-item_1x8ae_29
  ._analyze-chapter-content-item-header_1x8ae_33
  ._analyze-chapter-content-item-header-index_1x8ae_42 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #ffffff0f;
}
._analyze-chapter-content-item_1x8ae_29
  ._analyze-chapter-content-item-description_1x8ae_51 {
  margin-left: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 32px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  border-left-style: dashed;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
}
._analyze-chapter-content-item-content_1x8ae_65 {
  margin: 4px 0;
  color: #fff;
}
._spinning_1x8ae_70 {
  animation: _spin_1x8ae_70 1s linear infinite;
}
@keyframes _spin_1x8ae_70 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._chapter-content_1x8ae_82 {
  display: -webkit-box;
  overflow: hidden;
  position: relative;
  line-height: 23px;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff7a;
  -webkit-box-orient: vertical;
}
._analyze-chapter-content-item-estimated-time_1x8ae_95 {
  margin: 6px 0;
}
._hogi-skeleton_1jzp7_1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._hogi-skeleton-item_1jzp7_7 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 12px;
  background: linear-gradient(90deg, #ffffff0a, #ffffff29);
}
._analyze-tool-call_kxanl_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: #ffffff0f;
}
._analyze-tool-call_kxanl_1::-webkit-scrollbar {
  display: none;
}
._analyze-tool-call_kxanl_1 ._analyze-tool-call-status_kxanl_15 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border-radius: 24px;
  width: 24px;
  height: 24px;
  background-color: #ffffff0f;
}
._analyze-tool-call_kxanl_1 ._analyze-tool-call-status_kxanl_15 img {
  width: 100%;
  height: 100%;
}
._analyze-tool-call_kxanl_1 ._analyze-tool-detail_kxanl_29 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.32px;
}
._analyze-tool-call_kxanl_1 ._analyze-tool-call-code_kxanl_40 {
  margin: 0 4px;
  padding: 2px 6px;
  border-radius: 8px;
  background: #ffffff0f;
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #9fc2ef;
  text-wrap: auto;
}
@keyframes _spin_kxanl_60 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._spinning_kxanl_60 {
  animation: _spin_kxanl_60 1s linear infinite;
}
._think-node_1rfb3_1 {
  display: flex;
  align-items: center;
}
._think-node_1rfb3_1 img {
  margin: 0 8px;
  width: 18px;
}
._think-node_1rfb3_1 span {
  line-height: 18px;
  font-weight: 600;
  font-size: 14px;
}
._think-node_1rfb3_1 ._think-node-dot-1_1rfb3_14 {
  animation: _think-node-dot-animation_1rfb3_1 1s infinite;
}
._think-node_1rfb3_1 ._think-node-dot-2_1rfb3_17 {
  animation: _think-node-dot-animation_1rfb3_1 1s infinite 0.2s;
}
._think-node_1rfb3_1 ._think-node-dot-3_1rfb3_20 {
  animation: _think-node-dot-animation_1rfb3_1 1s infinite 0.4s;
}
@keyframes _think-node-dot-animation_1rfb3_1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
._para-content_1qam8_1 {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
._para-item-prompt_1qam8_7 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 12px;
  border-left: 4px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-size: 16px;
  color: #ffffff7a;
}
._para-content-prompt_1qam8_21 {
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  word-break: auto-phrase;
  letter-spacing: 0.32px;
  text-wrap: wrap;
}
._para-content-prompt_1qam8_21 ._para-content-prefix_1qam8_29 {
  margin-right: 4px;
  padding: 2px 4px 2px 0;
  border-radius: 4px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  color: #ffffffbf;
}
._para-content-slice_1qam8_39 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  font-family: Roboto, sans-serif;
}
._para-item-segment_1qam8_48 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
._para-item-segment_1qam8_48 ._para-item-segment-summary_1qam8_55,
._para-item-segment_1qam8_48 ._para-item-segment-story_1qam8_56,
._para-item-segment_1qam8_48 ._para-item-segment-roles_1qam8_57,
._para-item-segment_1qam8_48 ._para-item-segment-storyboard_1qam8_58 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
._para-item-segment_1qam8_48 ._para-item-segment-main-title_1qam8_64 {
  overflow: hidden;
  line-height: 23px;
  text-overflow: ellipsis;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #ffffffe8;
  letter-spacing: 0.32px;
}
._para-item-segment_1qam8_48 ._para-item-segment-main-content_1qam8_75 {
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  word-break: auto-phrase;
  letter-spacing: 0.32px;
  text-wrap: wrap;
}
._para-item-ul_1qam8_87 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
._para-item-ul_1qam8_87 ._para-item-li_1qam8_93 {
  list-style-type: disc;
  margin: 0 16px;
  text-wrap: wrap;
  word-break: auto-phrase;
}
._para-item-ul_1qam8_87
  ._para-item-li_1qam8_93
  ._para-item-li-content-prefix_1qam8_99 {
  font-family: Roboto, sans-serif;
  font-weight: 500;
  color: #ffffffbf;
}
._prefix-role_1qam8_105 {
  padding: 2px 4px;
  border-radius: 4px;
  background-color: #fee40333;
}
._highlight-code_1qam8_111 {
  margin: 0 4px;
  padding: 2px 6px;
  border-radius: 8px;
  background: #ffffff0f;
  font-family: Roboto, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #9fc2ef;
  text-wrap: auto;
}
._async-task-item_tz50u_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: #4b4c4d52;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
._async-task-item_tz50u_1:hover {
  background-color: #ffffff0d;
}
._async-task-loading_tz50u_18 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff9;
}
._task-thumbnail_tz50u_26 {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 32px;
  height: 32px;
}
._task-thumbnail_tz50u_26 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._task-thumbnail--blurred_tz50u_40:after {
  position: absolute;
  left: -1px;
  top: -1px;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: #ffffff1a;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  content: "";
}
._task-thumbnail-placeholder_tz50u_52 {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background-color: #ffffff0d;
}
._task-thumbnail-placeholder_tz50u_52 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
._task-info_tz50u_70 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
._task-title_tz50u_80 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  line-height: 20px;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
  letter-spacing: 0.28px;
}
._task-title--waiting_tz50u_93 {
  color: #ffffff7a;
}
._task-subtitle_tz50u_97 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  opacity: 0.6;
  line-height: 15px;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff7a;
  letter-spacing: 0.2px;
}
._task-status_tz50u_112 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
}
._task-status-text_tz50u_120 {
  overflow: hidden;
  line-height: 18px;
  text-overflow: ellipsis;
  text-align: right;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff7a;
  letter-spacing: 0.24px;
}
._spinner_tz50u_131 {
  animation: _spin_tz50u_131 1s linear infinite;
}
@keyframes _spin_tz50u_131 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._spinner-container_1jeuq_1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  height: 48px;
  -webkit-user-select: none;
  user-select: none;
  line-height: 26px;
  font-weight: 600;
  font-size: 18px;
}
._spinner-icon_1jeuq_14 {
  width: 40px;
  height: 40px;
}
@keyframes _spin_1jeuq_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._history-loading_9ishs_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20px;
}
._spinner_9ishs_9 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._dot_9ishs_15 {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background-color: #999;
  animation: _bounce_9ishs_1 1.4s infinite ease-in-out both;
}
._dot_9ishs_15:nth-child(1) {
  animation-delay: -0.32s;
}
._dot_9ishs_15:nth-child(2) {
  animation-delay: -0.16s;
}
._dot_9ishs_15:nth-child(3) {
  animation-delay: 0s;
}
@keyframes _bounce_9ishs_1 {
  0%,
  80%,
  to {
    opacity: 0.5;
    transform: scale(0.6);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
._style-drawer_x71nq_1 {
  position: absolute;
  top: 0;
  z-index: 999999;
  padding: 16px;
  border-radius: 20px;
  height: 100%;
  background-color: #161718;
}
._style-drawer-content_x71nq_11 {
  height: 100%;
}
._star-border-container_gjn5y_1 {
  display: flex;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
}
._inner-content_gjn5y_10 {
  position: relative;
  z-index: 1;
  padding: 12px 16px;
  border-radius: 32px;
  background: #232425;
  box-shadow: 0 4px 32px #0000000a;
  line-height: 23px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  letter-spacing: 0.32px;
}
._async-task-modal_fjsqf_2 {
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 10000;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: 800px;
  max-width: 90vw;
  height: 80vh;
  max-height: 800px;
  background: linear-gradient(180deg, #131c2bd9, #1f2937d9);
  box-shadow: 0 8px 32px #0000005e;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
._async-task-modal-header_fjsqf_19 {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #ffffff05;
}
._async-task-modal-title_fjsqf_25 {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-weight: 600;
  font-size: 20px;
  color: #fffffff2;
}
._async-task-modal-subtitle_fjsqf_34 {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 0;
  padding: 0;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #fff9;
  -webkit-box-orient: vertical;
}
._async-task-modal-content_fjsqf_47 {
  overflow-y: auto;
  flex: 1;
  padding: 16px 32px;
}
._async-task-modal-content_fjsqf_47::-webkit-scrollbar {
  width: 8px;
}
._async-task-modal-content_fjsqf_47::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #ffffff05;
}
._async-task-modal-content_fjsqf_47::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #ffffff1a;
}
._async-task-modal-content_fjsqf_47::-webkit-scrollbar-thumb:hover {
  background: #ffffff26;
}
._async-task-modal-loading_fjsqf_68 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 100%;
}
._async-task-modal-loading_fjsqf_68 p {
  margin: 0;
  font-size: 14px;
  color: #fff9;
}
._async-task-modal-messages_fjsqf_82 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}
._async-task-modal-streaming_fjsqf_89 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
  color: #fff9;
}
._async-task-modal-empty_fjsqf_98 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
._async-task-modal-empty_fjsqf_98 p {
  margin: 0;
  font-size: 14px;
  color: #fff6;
}
._async-task-modal-message-generic_fjsqf_110 {
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff0d;
}
._async-task-modal-message-generic_fjsqf_110 p {
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
  color: #ffffffd9;
}
a,
abbr,
address,
area,
article,
aside,
audio,
b,
base,
bdi,
bdo,
blockquote,
body,
br,
button,
canvas,
caption,
cite,
code,
col,
colgroup,
data,
datalist,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
link,
main,
map,
mark,
menu,
menuitem,
meta,
meter,
nav,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
picture,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strong,
style,
sub,
summary,
sup,
svg,
table,
tbody,
td,
template,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
u,
ul,
var,
video,
wbr,
:before,
:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  line-height: 1;
  font-family:
    PingFang SC,
    Microsoft YaHei,
    Source Han Sans,
    sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}
img,
video {
  display: block;
  border: none;
}
dl,
li,
menu,
ol,
ul {
  list-style: none;
}
button,
input,
select,
textarea {
  display: block;
  outline: none;
}
a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
.clear {
  overflow: hidden;
  clear: both;
  height: 0;
  font-size: 0;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  font-size: 0;
  content: "";
}
@font-face {
  src: url(/oiioii/fonts/Roboto-Regular-WRKLzXY7.ttf) format("truetype");
  font-family: Roboto;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url(/oiioii/fonts/Roboto-Medium-cNKjeBYp.ttf) format("truetype");
  font-family: Roboto;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  src: url(/oiioii/fonts/Roboto-Bold-Bw9hF51Y.ttf) format("truetype");
  font-family: Roboto;
  font-weight: 700;
  font-display: swap;
}
:root {
  --background: #111213;
  --foreground: #eff0f0;
  --theme-red: #f66;
  --theme-purple: #66f;
  --theme-blue: #09f;
  --theme-green: #3c9;
  --theme-pink: #ef319f;
  --primary: var(--theme-pink);
  --primary-hover: #55e;
  --primary-light: #88f;
  --top-banner-height: 0px;
}
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-light: var(--primary-light);
  --color-theme-red: var(--theme-red);
  --color-theme-purple: var(--theme-purple);
  --color-theme-blue: var(--theme-blue);
  --color-theme-green: var(--theme-green);
  --color-theme-pink: var(--theme-pink);
}
body {
  background-color: var(--background);
  font-family: Roboto, sans-serif;
  color: var(--foreground);
}
html,
body,
#root {
  overscroll-behavior: none;
}
.theme-red {
  --primary: var(--theme-red);
  --primary-hover: #e55;
  --primary-light: #f88;
}
.theme-purple {
  --primary: var(--theme-purple);
  --primary-hover: #55e;
  --primary-light: #88f;
}
.theme-blue {
  --primary: var(--theme-blue);
  --primary-hover: #08e;
  --primary-light: #3af;
}
.theme-green {
  --primary: var(--theme-green);
  --primary-hover: #2b8;
  --primary-light: #5da;
}
.theme-pink {
  --primary: var(--theme-pink);
  --primary-hover: #d91a8f;
  --primary-light: #f551b5;
}
.hogi-main {
  overflow: hidden auto;
  padding-top: var(--top-banner-height);
  height: 100vh;
  overscroll-behavior: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hogi-main::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.auth-bg-1 {
  background: url(/oiioii/assets/auth-bg-1-Dl0El-ZB.png) no-repeat center/100% auto;
}
.auth-bg-2 {
  position: relative;
  background: url(/oiioii/assets/auth-bg-2-BerW9XMR.png) no-repeat center/50% auto;
}
.auth-bg-2:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 230px;
  height: 200px;
  background: url(/oiioii/assets/auth-bg-2-1-CNGnKrda.png) no-repeat center/100% 100%;
  content: "";
}
.auth-bg-2:after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 310px;
  height: 200px;
  background: url(/oiioii/assets/auth-bg-2-2-fz3GM4we.png) no-repeat center/100% 100%;
  content: "";
}
.tmd-hidden {
  display: none !important;
}
._header_1i6b1_7 {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--top-banner-height);
  z-index: 100000;
  align-items: center;
  padding: 0 clamp(16px, 5vw, 100px);
  height: 70px;
  background-color: #00000080;
  box-shadow: 0 5px 10px #0000004d;
  transition: all 0.6s ease;
}
._logo_1i6b1_22 {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  transition: all 0.3s ease;
}
._logo_1i6b1_22:hover {
  filter: drop-shadow(0 0 10px var(--primary-hover));
  transform: translateY(-1px);
}
._badge_1i6b1_34 {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 0 0 6px;
  border-radius: 15px !important;
  transform: scale(0.7);
  transform-origin: center;
}
._badge_1i6b1_34:hover,
._badge_1i6b1_34:focus,
._badge_1i6b1_34:active {
  border-color: inherit !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  transform: scale(0.7);
}
._beta-icon_1i6b1_55 {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: 7px;
  margin-top: 6px;
  line-height: 0;
  transition: transform 0.3s ease;
}
._beta-icon_1i6b1_55 svg {
  display: block;
}
._logo_1i6b1_22:hover + ._beta-icon_1i6b1_55 {
  transform: translateY(-1px);
}
._beta-icon_1i6b1_55:hover {
  transform: translateY(-1px);
}
._user_1i6b1_78 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
._user_1i6b1_78 :where(button) {
  white-space: nowrap;
}
._login-btn_1i6b1_91,
._join-btn_1i6b1_92,
._social-btn_1i6b1_93 {
  white-space: nowrap;
}
._free-text_1i6b1_97 {
  background-image: linear-gradient(120deg, #f8a0d3 5%, #9efae0 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
._wechat-container_1i6b1_103 {
  display: inline-flex;
  position: relative;
  align-items: center;
}
._wechat-panel_1i6b1_109 {
  position: absolute;
  left: 50%;
  top: calc(100% + 15px);
  z-index: 1000;
  padding: 20px;
  border-radius: 16px;
  background: #2a2d31;
  box-shadow: 0 8px 24px #0006;
  pointer-events: auto;
  transform: translate(-50%);
  animation: _fade-in-down-center_1i6b1_1 0.2s ease-out;
}
._wechat-panel_1i6b1_109:before {
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 15px;
  background: transparent;
  pointer-events: auto;
  content: "";
}
._wechat-panel_1i6b1_109:after {
  position: absolute;
  left: 50%;
  top: -8px;
  border: 8px solid transparent;
  border-bottom-color: #2a2d31;
  content: "";
  transform: translate(-50%);
}
._wechat-image-wrapper_1i6b1_142 {
  display: inline-block;
  position: relative;
}
._wechat-image_1i6b1_142 {
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 200px;
  height: 200px;
  object-fit: cover;
}
._wechat-loading-overlay_1i6b1_156 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
._wechat-text_1i6b1_165 {
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #ffffff14;
  line-height: 1.5;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffe6;
}
._wechat-loading_1i6b1_156 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 200px;
  height: 200px;
}
._loading-spinner_1i6b1_189 {
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-top-color: #646464b3;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: _spin_1i6b1_1 1s linear infinite;
}
._loading-text_1i6b1_198 {
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffb3;
}
@keyframes _spin_1i6b1_1 {
  to {
    transform: rotate(360deg);
  }
}
._avatar-container_1i6b1_211 {
  display: inline-block;
  position: relative;
}
._avatar_1i6b1_211 {
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
._avatar_1i6b1_211:hover {
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-hover);
  transform: scale(1.1);
}
._reply-badge_1i6b1_230 {
  display: flex;
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border-radius: 20px;
  min-width: 8px;
  height: 12px;
  background-color: #ef319f;
  line-height: 13px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #fff7fb;
  white-space: nowrap;
}
._user-panel_1i6b1_252 {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 1000;
  padding: 16px 12px;
  border-radius: 20px;
  min-width: 256px;
  background: #f7f8f8;
  animation: _fade-in-up_1i6b1_1 0.2s ease-out;
}
._user-panel_1i6b1_252:before {
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 5px;
  background: transparent;
  content: "";
}
._user-info_1i6b1_273 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
._user-info_1i6b1_273 ._divider_1i6b1_279 {
  margin-top: 20px;
  width: 100%;
  height: 0.5px;
  background: #0000000a;
}
._panel-avatar_1i6b1_286 {
  border: 2px solid var(--border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
._user-details_1i6b1_293 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}
._user-name_1i6b1_300,
._user-email_1i6b1_301 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  line-height: 23px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #000000e6;
  letter-spacing: 0.32px;
}
._user-name_1i6b1_300 span,
._user-email_1i6b1_301 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._user-email_1i6b1_301 {
  font-weight: 400;
  font-size: 14px;
  color: #00000070;
}
._logout-btn_1i6b1_329 {
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
  border-radius: 12px;
  width: 100%;
  background-color: #fff;
  line-height: 18px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #000000e6;
}
._feedback-btn-wrapper_1i6b1_345 {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
}
._feedback-badge_1i6b1_352 {
  display: flex;
  position: absolute;
  right: 8px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border-radius: 20px;
  min-width: 8px;
  height: 12px;
  background-color: #ef319f;
  line-height: 13px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #fff7fb;
  white-space: nowrap;
}
._social-btn_1i6b1_93 {
  width: 40px;
  height: 36px;
}
._login-btn_1i6b1_91 {
  padding: 10px 16px !important;
  border: none !important;
  border-radius: 10px;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px #fabde1 !important;
  line-height: 18px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fabde1 !important;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
._login-btn_1i6b1_91:hover {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px #fabde1 !important;
  color: #fabde1 !important;
  transform: translateY(-1px) translateZ(0);
}
._join-btn_1i6b1_92 {
  padding: 10px 16px !important;
  border: none !important;
  border-radius: 10px;
  background-color: #ef319f !important;
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #f8f7f7 !important;
}
._join-btn_1i6b1_92:hover {
  background-color: #ef319f !important;
  box-shadow: 0 0 10px #ef319f4d;
  color: #f8f7f7 !important;
  transform: translateY(-1px);
}
._join-btn-outline_1i6b1_422,
._join-btn-outline_1i6b1_422:hover {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px #fabde1 !important;
  color: #fabde1 !important;
}
._waitlist-wrapper_1i6b1_433 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
}
._waitlist-comma_1i6b1_440 {
  position: absolute;
  left: 0;
  top: -8px;
  z-index: 10;
  width: 27px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(4, 209, 192, 0.5));
  pointer-events: none;
}
._waitlist-btn_1i6b1_451 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: #ef319f;
  cursor: pointer;
  line-height: 18px;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: box-shadow 0.3s ease;
}
._waitlist-btn_1i6b1_451:hover {
  box-shadow: 0 0 16px #667eea80;
  color: #fff;
}
._waitlist-arrow_1i6b1_474 {
  position: absolute;
  left: 20%;
  bottom: -73px;
  width: 73px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.6));
  pointer-events: none;
  transform: translate(-50%);
}
@keyframes _fade-in-up_1i6b1_1 {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fade-in-down-center_1i6b1_1 {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%);
  }
}
._invite-modal_1i6b1_506 {
  background: #0a0a0b3d !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
._invite-modal_1i6b1_506 > div {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
._dev-board_ay02u_7,
._trigger_ay02u_11 {
  position: relative;
}
._indicator_ay02u_15 {
  position: absolute;
  right: -2px;
  top: -2px;
  border: 2px solid var(--background);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
}
._modal_ay02u_26 {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #00000080;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
._content_ay02u_38 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  width: 90vw;
  max-width: 600px;
  max-height: 80vh;
  background-color: var(--background);
  box-shadow: 0 20px 40px #0000004d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._header_ay02u_52 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
._title_ay02u_60 {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  color: var(--foreground);
}
._subtitle_ay02u_67 {
  margin: 4px 0 0;
  font-size: 14px;
  color: #fff9;
}
._body_ay02u_73 {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  padding: 24px;
}
._section_ay02u_82 {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background-color: #ffffff1a;
}
._section-header_ay02u_89 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
._section-info_ay02u_96 {
  flex: 1;
}
._section-title_ay02u_100 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
  color: var(--foreground);
}
._section-desc_ay02u_107 {
  margin: 0;
  line-height: 1.4;
  font-size: 14px;
  color: #fff9;
}
._section-content_ay02u_114 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._switch_ay02u_120 {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 24px;
}
._switch_ay02u_120 input {
  width: 0;
  height: 0;
  opacity: 0;
}
._switch_ay02u_120 input:checked + ._slider_ay02u_133 {
  background-color: var(--primary);
}
._switch_ay02u_120 input:checked + ._slider_ay02u_133:before {
  transform: translate(20px);
}
._switch_ay02u_120 input:focus + ._slider_ay02u_133 {
  box-shadow: 0 0 0 2px var(--primary-hover);
}
._slider_ay02u_133 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 24px;
  background-color: #fff3;
  cursor: pointer;
  transition: all 0.3s;
}
._slider_ay02u_133:before {
  position: absolute;
  left: 3px;
  bottom: 3px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background-color: #fff;
  content: "";
  transition: all 0.3s;
}
._slider_ay02u_133:hover {
  background-color: #fff6;
}
._select-label_ay02u_170 {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--foreground);
}
._select_ay02u_170 {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  width: 100%;
  outline: none;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  font-size: 14px;
  color: var(--foreground);
  transition: all 0.3s;
}
._select_ay02u_170:focus {
  border-color: var(--primary);
  background-color: #fff3;
  box-shadow: 0 0 10px var(--primary);
}
._select_ay02u_170 option {
  background-color: var(--background);
  color: var(--foreground);
}
._info_ay02u_201 {
  padding: 16px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background-color: #ffffff1a;
}
._info-warning_ay02u_208 {
  border-color: #ffc10733;
  background-color: #ffc1071a;
}
._info-warning_ay02u_208 ._info-text_ay02u_213 {
  color: #b8860b;
}
._info-warning_ay02u_208 ._info-subtext_ay02u_217 {
  color: #9a7c0a;
}
._info-text_ay02u_213 {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 14px;
  color: var(--primary);
}
._info-subtext_ay02u_217 {
  margin: 0;
  line-height: 1.4;
  font-size: 12px;
  color: #fff9;
}
._info-highlight_ay02u_235 {
  font-weight: 700;
  color: var(--primary);
}
@media (max-width: 768px) {
  ._content_ay02u_38 {
    width: 95vw;
    max-height: 90vh;
  }
  ._header_ay02u_52 {
    padding: 20px;
  }
  ._body_ay02u_73 {
    gap: 20px;
    padding: 20px;
  }
  ._section_ay02u_82 {
    padding: 16px;
  }
  ._section-header_ay02u_89 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
._lang-select_155uu_7 {
  position: relative;
}
._lang-select_155uu_7:hover ._menu_155uu_10 {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
._btn_155uu_16 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s;
}
._btn_155uu_16:hover {
  border-radius: 10px;
  background-color: #272929;
  transform: translateY(-1px);
}
._btn_155uu_16:hover ._btn-flag_155uu_32 {
  filter: drop-shadow(0 0 10px #000);
  transform: scale(1.1);
}
._btn_155uu_16:hover ._btn-text_155uu_36 {
  color: "#FFF7FB";
}
._btn-flag_155uu_32 {
  font-size: 16px;
  transition: all 0.3s;
}
._btn-text_155uu_36 {
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #fffc;
  transition: all 0.3s;
}
._menu_155uu_10 {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99;
  margin-top: 10px;
  padding: 8px;
  border-radius: 20px;
  width: 150px;
  background-color: #f7f8f8;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s;
}
._menu-item_155uu_67 {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #00000070;
  transition: all 0.3s;
}
._menu-item_155uu_67:hover ._menu-flag_155uu_83 {
  transform: scale(1.2);
}
._menu-item_155uu_67:hover ._menu-text_155uu_86 {
  font-weight: 700;
}
._menu-item-active_155uu_89 ._menu-text_155uu_86 {
  font-weight: 700;
  color: #000000e6;
}
._menu-flag_155uu_83 {
  font-size: 16px;
  transition: all 0.3s;
}
._menu-check_155uu_97 {
  margin-left: auto;
  font-weight: 700;
  color: #000000e6;
  animation: _check_155uu_1 0.3s;
}
@keyframes _check_155uu_1 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._card_1b6bj_7 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  padding: 20px 24px;
  border-radius: 40px;
  width: 422px;
  height: 422px;
  background-color: #fff;
}
._close-button_1b6bj_21 {
  display: flex;
  position: absolute;
  right: 24px;
  top: 24.5px;
  justify-content: center;
  align-items: center;
  border: none;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  color: #000000a3;
  transition: all 0.3s;
}
._close-button_1b6bj_21:hover {
  color: #000000e6;
}
._logo_1b6bj_40 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  width: 100%;
}
._logo_1b6bj_40 img {
  width: 118px;
  height: 64px;
  object-fit: contain;
}
._main_1b6bj_53 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
._header_1b6bj_61 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}
._title_1b6bj_70 {
  margin: 0;
  line-height: 44px;
  font-family: Roboto, sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #000000e6;
  white-space: pre-wrap;
}
._description_1b6bj_80 {
  margin: 0;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #00000070;
  letter-spacing: 0.32px;
  white-space: pre-wrap;
}
._code-input-wrapper_1b6bj_91 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border-radius: 16px;
  width: 100%;
  height: 55px;
  background-color: #0000000a;
}
._code-input_1b6bj_91 {
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
  background: transparent;
  line-height: 32px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000000e6;
  caret-color: #000000a3;
}
._code-input_1b6bj_91::placeholder {
  color: #00000070;
}
._code-input_1b6bj_91:focus {
  outline: none;
}
._actions_1b6bj_123 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
._confirm-button_1b6bj_131 {
  border-radius: 20px;
  width: 100%;
  height: 52px;
  max-height: 52px;
  background-color: #ef319f;
  line-height: 20px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
}
._confirm-button_1b6bj_131:hover:not(:disabled) {
  background-color: #d62a8c;
}
._confirm-button_1b6bj_131:disabled {
  background-color: #ef319f;
  opacity: 0.5;
  color: #0000001f;
}
._no-code-link_1b6bj_153 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 17px 16px;
  border: none;
  border-radius: 12px;
  width: 100%;
  height: 52px;
  background: transparent;
  cursor: pointer;
  line-height: 23px;
  text-decoration: underline;
  text-underline-position: from-font;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #471c35;
  letter-spacing: 0.32px;
  transition: all 0.3s;
  text-decoration-skip-ink: auto;
}
._no-code-link_1b6bj_153:hover {
  background-color: #471c350d;
  opacity: 0.8;
}
._feedback-modal_1xtxy_1 {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #0006;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
._feedback-modal-inner_1xtxy_15 {
  display: flex;
  overflow-y: auto;
  position: relative;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  background: #ffffff14;
  box-shadow:
    0 20px 60px #0000004d,
    0 0 0 1px #ffffff0d;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
}
._feedback-modal-inner_1xtxy_15::-webkit-scrollbar {
  width: 2px;
}
._feedback-modal-inner_1xtxy_15::-webkit-scrollbar-track {
  background: transparent;
}
._feedback-modal-inner_1xtxy_15::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #fff0;
  transition: background 0.3s ease;
}
._feedback-modal-inner_1xtxy_15::-webkit-scrollbar-thumb:hover {
  background: #fff0;
}
._feedback-modal-inner_1xtxy_15._feedback-modal-inner-scrolling_1xtxy_47 {
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._feedback-modal-inner_1xtxy_15._feedback-modal-inner-scrolling_1xtxy_47::-webkit-scrollbar-thumb {
  background: #ffffff21;
}
._feedback-modal-inner_1xtxy_15._feedback-modal-inner-scrolling_1xtxy_47::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._feedback-modal-close_1xtxy_57 {
  display: flex;
  position: absolute;
  right: 19px;
  top: 19px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  width: 20px;
  height: 20px;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  color: #ffffffe8;
  transition: opacity 0.2s ease;
}
._feedback-modal-close_1xtxy_57:hover {
  opacity: 1;
}
._feedback-modal-header_1xtxy_79 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
._feedback-modal-title_1xtxy_87 {
  margin: 0;
  width: 100%;
  line-height: 28px;
  text-align: left;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffffe8;
}
._feedback-modal-tabs_1xtxy_99 {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  width: 100%;
  background: #ffffff0f;
}
._feedback-modal-tab_1xtxy_99 {
  flex: 1;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff7a;
  transition: all 0.2s ease;
}
._feedback-modal-tab_1xtxy_99:hover {
  color: #ffffffb3;
}
._feedback-modal-tab-active_1xtxy_128 {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: #ffffff1a;
  color: #ffffffe8;
}
._feedback-modal-content_1xtxy_135 {
  overflow-y: auto;
  flex: 1;
  width: 100%;
  max-height: 600px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0) transparent;
}
._feedback-modal-content_1xtxy_135::-webkit-scrollbar {
  width: 2px;
}
._feedback-modal-content_1xtxy_135::-webkit-scrollbar-track {
  background: transparent;
}
._feedback-modal-content_1xtxy_135::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #fff0;
  transition: background 0.3s ease;
}
._feedback-modal-content_1xtxy_135::-webkit-scrollbar-thumb:hover {
  background: #fff0;
}
._feedback-modal-content_1xtxy_135._feedback-modal-content-scrolling_1xtxy_157 {
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._feedback-modal-content_1xtxy_135._feedback-modal-content-scrolling_1xtxy_157::-webkit-scrollbar-thumb {
  background: #ffffff21;
}
._feedback-modal-content_1xtxy_135._feedback-modal-content-scrolling_1xtxy_157::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._feedback-submit-form_1xtxy_167 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
._feedback-submit-item_1xtxy_174 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
._feedback-submit-item_1xtxy_174 label {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #ffffffe6;
}
._feedback-submit-item_1xtxy_174 textarea {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  min-height: 314px;
  outline: none;
  background-color: #ffffff0d;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-submit-item_1xtxy_174 textarea::placeholder {
  color: #fff6;
}
._feedback-submit-item_1xtxy_174 textarea:hover {
  border-color: #fff3;
  background-color: #ffffff14;
}
._feedback-submit-item_1xtxy_174 textarea:focus {
  border-color: #ef319f99;
  background-color: #ffffff14;
  box-shadow: 0 0 0 3px #ef319f26;
}
._feedback-select-wrapper_1xtxy_215 {
  position: relative;
}
._feedback-select-wrapper_1xtxy_215:after {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(255, 255, 255, 0.6);
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
  transform: translateY(-50%);
  transition: all 0.2s ease;
}
._feedback-select-wrapper_1xtxy_215:hover:after {
  border-top-color: #ffffffe6;
}
._feedback-select-wrapper_1xtxy_215:has(select:focus):after {
  border-top-color: #ef319f;
}
._feedback-select-wrapper_1xtxy_215 select {
  padding: 12px 40px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  min-height: 44px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #ffffff0d;
  background-image: none;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-select-wrapper_1xtxy_215 select:hover {
  border-color: #fff3;
  background-color: #ffffff14;
}
._feedback-select-wrapper_1xtxy_215 select:focus {
  border-color: #ef319f99;
  background-color: #ffffff14;
  box-shadow: 0 0 0 3px #ef319f26;
}
._feedback-select-wrapper_1xtxy_215 select option {
  background-color: #2d2d2d;
  color: #fff;
}
._feedback-upload-controls_1xtxy_268 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._feedback-upload-btn_1xtxy_274 {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: auto;
  background-color: #ffffff14;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-upload-btn_1xtxy_274:hover:not(:disabled) {
  border-color: #ef319f66;
  background-color: #ffffff1f;
}
._feedback-upload-btn_1xtxy_274:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._feedback-hidden-input_1xtxy_296 {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
._feedback-images-preview_1xtxy_305 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
._feedback-image-item_1xtxy_312 {
  position: relative;
}
._feedback-image-item_1xtxy_312 img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  object-fit: cover;
}
._feedback-image-loading_1xtxy_323 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #00000080;
  font-size: 12px;
  color: #fff;
}
._feedback-remove-img-btn_1xtxy_335 {
  display: flex;
  position: absolute;
  right: -6px;
  top: -6px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  background-color: #00000040;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-remove-img-btn_1xtxy_335:hover {
  border-color: #ef319f99;
  background-color: #ef319fe6;
}
._feedback-submit-btn_1xtxy_356 {
  margin-top: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  width: 100%;
  background-color: #ef319f;
  box-shadow: 0 4px 12px #ef319f4d;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  transition: all 0.2s ease;
}
._feedback-submit-btn_1xtxy_356:hover:not(:disabled) {
  background-color: #fd72a5;
  box-shadow: 0 6px 16px #ef319f73;
  transform: translateY(-1px);
}
._feedback-submit-btn_1xtxy_356:active:not(:disabled) {
  box-shadow: 0 2px 8px #ef319f59;
  transform: translateY(0);
}
._feedback-submit-btn_1xtxy_356:disabled {
  background-color: #ef319f;
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}
._feedback-uploading-hint_1xtxy_386 {
  margin-top: 6px;
  font-size: 12px;
  color: #ff6b6b;
}
._feedback-history_1xtxy_392 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 600px;
}
._feedback-loading_1xtxy_399 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 12px;
  width: 100%;
  font-size: 14px;
  color: #ffffff7a;
}
._feedback-loading-icon_1xtxy_411 {
  color: #ffffff7a;
  animation: _spin_1xtxy_1 1s linear infinite;
}
@keyframes _spin_1xtxy_1 {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._feedback-empty_1xtxy_424 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 40px 20px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #ffffff7a;
}
._feedback-list_1xtxy_436 {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  min-height: 600px;
}
._feedback-item_1xtxy_444 {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  background: #ffffff0f;
}
._feedback-new-label_1xtxy_452 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4px;
  width: 100%;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fabde1;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
}
._feedback-item-content_1xtxy_467 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
}
._feedback-item-image_1xtxy_474 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 72px;
  height: 72px;
}
._feedback-item-image_1xtxy_474 img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
._feedback-item-text_1xtxy_493 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: 0 8px;
  min-width: 0;
}
._feedback-item-text-with-image_1xtxy_502 {
  overflow: hidden auto;
  padding-right: 4px;
  padding-top: 0;
  padding-bottom: 20px;
  height: 80px;
}
._feedback-item-text-with-image_1xtxy_502::-webkit-scrollbar {
  width: 4px;
}
._feedback-item-text-with-image_1xtxy_502::-webkit-scrollbar-track {
  background: transparent;
}
._feedback-item-text-with-image_1xtxy_502::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #ffffff21;
}
._feedback-item-text-with-image_1xtxy_502::-webkit-scrollbar-thumb:hover {
  background: #fff3;
}
._feedback-item-text-with-image_1xtxy_502 {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}
._feedback-item-title_1xtxy_527 {
  margin-bottom: 0;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffffb3;
  letter-spacing: 0.28px;
  white-space: pre-wrap;
}
._feedback-item-description_1xtxy_538 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  line-height: 20px;
  -webkit-line-clamp: 4;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
}
._feedback-item-text-with-image_1xtxy_502
  ._feedback-item-description_1xtxy_538 {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
._feedback-item-tag_1xtxy_562 {
  margin-top: 0;
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff7a;
  white-space: pre-wrap;
}
._feedback-reply_1xtxy_572 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
  width: 100%;
}
._feedback-reply-content-wrapper_1xtxy_580 {
  overflow: hidden auto;
  margin-right: 4px;
  padding: 0 8px 0 4px;
  width: 100%;
  max-height: 188px;
  line-height: 23px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffffb3;
  overflow-wrap: break-word;
  letter-spacing: 0.32px;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
._feedback-reply-content-wrapper_1xtxy_580::-webkit-scrollbar {
  width: 4px;
}
._feedback-reply-content-wrapper_1xtxy_580::-webkit-scrollbar-track {
  border-radius: 2px;
  background: transparent;
}
._feedback-reply-content-wrapper_1xtxy_580::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #fff3;
}
._feedback-reply-content-wrapper_1xtxy_580::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._feedback-reply-avatar_1xtxy_613 {
  display: inline-block;
  overflow: hidden;
  margin-right: 2px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
._feedback-reply-avatar_1xtxy_613 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._feedback-reply-label_1xtxy_628 {
  color: #ffffffe8;
}
._feedback-reply-content_1xtxy_580 {
  color: #ffffffb3;
}
._feedback-divider_1xtxy_636 {
  display: flex;
  align-items: center;
  padding: 0 8px;
  width: 100%;
  height: 8px;
}
._feedback-divider_1xtxy_636:before {
  width: 100%;
  height: 1px;
  background: #ffffff1a;
  content: "";
}
._navbar_yfsgw_7 {
  display: flex;
  position: fixed;
  left: 20px;
  top: 50%;
  z-index: 99999;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
  border-radius: 20px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transform: translateY(-50%);
}
._navbar-item_yfsgw_21 {
  border-radius: 15px;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
._navbar-item_yfsgw_21:hover,
._navbar-item-active_yfsgw_30 {
  background-color: #ffffff1a;
}
._navbar-item_yfsgw_21:hover button,
._navbar-item-active_yfsgw_30 button {
  color: #fffc;
}
._modal_6rkjm_1 {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  height: 100%;
  min-height: 280px;
  max-height: 85vh;
  background: transparent;
}
._modal-text_6rkjm_18 {
  display: flex;
  overflow: hidden auto;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 20px;
  width: 100%;
  min-height: 0;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
._modal-text_6rkjm_18::-webkit-scrollbar {
  width: 6px;
}
._modal-text_6rkjm_18::-webkit-scrollbar-track {
  background: transparent;
}
._modal-text_6rkjm_18::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #fff3;
}
._modal-text_6rkjm_18::-webkit-scrollbar-thumb:hover {
  background: #ffffff4d;
}
._title_6rkjm_44 {
  margin: 0;
  width: 100%;
  line-height: 28px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--neutral-content, rgba(255, 255, 255, 0.91));
}
._subtitle_6rkjm_56 {
  margin: 0;
  width: 100%;
  line-height: 26px;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--neutral-contentmedium, rgba(255, 255, 255, 0.7));
  letter-spacing: 0.34px;
}
._modal-footer_6rkjm_67 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 8px;
  width: 100%;
}
._button_6rkjm_78 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  padding: 17px 16px;
  border: none;
  border-radius: 20px;
  min-width: 196px;
  height: 52px;
  min-height: 1px;
  max-height: 52px;
  background: var(--neutral-surfacestrong, #272929);
  cursor: pointer;
  transition: background 0.2s ease;
  text-wrap-mode: nowrap;
}
._button_6rkjm_78:hover {
  background: var(--neutral-surfacestrong-hover, #323434);
}
._button-text_6rkjm_100 {
  line-height: 20px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-contentonmaterial, #fff7fb);
}
._unlock-button_6rkjm_110 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  padding: 17px 16px;
  border: none;
  border-radius: 20px;
  min-width: 196px;
  height: 52px;
  max-height: 52px;
  background: #ef319f;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  text-transform: capitalize;
  font-family:
    Roboto,
    Noto Sans SC,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #f8f7f7;
  transition: background 0.2s ease;
  text-wrap-mode: nowrap;
}
._unlock-button_6rkjm_110:hover {
  background: #b22577;
}
.global-notification-modal .wrapper {
  display: flex !important;
  overflow: hidden !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  min-width: 320px !important;
  max-width: 480px !important;
  min-height: 280px !important;
  max-height: 85vh !important;
}
.global-notification-modal .body {
  display: flex !important;
  overflow: hidden !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}
._plan-banner_guee7_7 {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100000;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  width: 100%;
  height: 40px;
  background-color: transparent;
  background-image: url(/oiioii/assets/plan-banner-bg-CXpqDG6D.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
._plan-banner-main_guee7_25 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 28px;
  margin: 0 auto;
  min-width: 0;
  max-width: 1413px;
}
._plan-banner-text_guee7_35 {
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
  line-height: 23px;
  text-overflow: ellipsis;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #232425;
  letter-spacing: 0.32px;
  white-space: nowrap;
}
._plan-banner-actions_guee7_49 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 14px;
}
._plan-banner-action-btn_guee7_55 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7.727px 9.273px;
  border-radius: 20px;
  min-width: 97px;
  max-width: 137.5px;
  height: 24px;
  max-height: 34px;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.3s;
}
._plan-banner-action-btn-primary_guee7_75 {
  border: none;
  background-color: #232425;
  color: #fff;
}
._plan-banner-action-btn-primary_guee7_75:hover {
  background-color: #2a2c2d;
}
._plan-banner-action-btn-secondary_guee7_83 {
  border: 1.545px solid #232425;
  background-color: transparent;
  color: #232425;
}
._plan-banner-action-btn-secondary_guee7_83:hover {
  background-color: #2324250d;
}
._plan-banner-close_guee7_91 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #232425;
  transition: opacity 0.3s;
  width: 20px;
  height: 20px;
}
._plan-banner-close_guee7_91:hover {
  opacity: 0.7;
}
._banner-title-strong_guee7_109 {
  line-height: 28px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 20px;
  color: #ef319f;
}
@media (max-width: 768px) {
  ._plan-banner_guee7_7 {
    padding: 12px 10px;
  }
  ._plan-banner-main_guee7_25 {
    gap: 14px;
  }
  ._plan-banner-text_guee7_35 {
    line-height: 20px;
    font-size: 14px;
  }
  ._plan-banner-actions_guee7_49 {
    gap: 8px;
  }
  ._plan-banner-action-btn_guee7_55 {
    padding: 6px 8px;
    min-width: auto;
    font-size: 12px;
  }
}
:root {
  --swiper-theme-color: #007aff;
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: #00000026;
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, #00000080, #0000);
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, #00000080, #0000);
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, #00000080, #0000);
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, #00000080, #0000);
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
._home_1jnov_7 {
  background-color: var(--background);
  transition: all 0.3s;
}
._theme_1jnov_12 {
  gap: 20px;
  padding: 72px 0 100px;
  background-image:
    url(/oiioii/assets/home-theme-grid-left-AXoE3Mu_.png),
    url(/oiioii/assets/home-theme-grid-right-Dt3qajWg.png);
  background-repeat: no-repeat, no-repeat;
  background-position:
    left center,
    right center;
  background-size:
    auto 100%,
    auto 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._theme-title_1jnov_28 {
  margin-top: 78px;
}
._theme-subtitle_1jnov_31 {
  background-image: linear-gradient(90deg, #4e4e4e, #eff0f0 65%, #4e4e4e);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 20px;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 18px;
  color: #fff6;
}
._theme-agent_1jnov_40 {
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._theme-agent-item_1jnov_46 {
  position: relative;
  transition: all 0.3s;
}
._theme-agent-item_1jnov_46:nth-child(1) {
  z-index: 4;
  margin-right: -50px;
  margin-bottom: -145px;
  height: 200px;
}
._theme-agent-item_1jnov_46:nth-child(2) {
  z-index: 3;
  margin-right: -10px;
  margin-bottom: -185px;
  height: 160px;
}
._theme-agent-item_1jnov_46:nth-child(3) {
  z-index: 2;
  margin-right: -50px;
  margin-bottom: -120px;
  height: 220px;
}
._theme-agent-item_1jnov_46:nth-child(4) {
  z-index: 1;
  height: 350px;
}
._theme-agent-item_1jnov_46:nth-child(5) {
  z-index: 2;
  margin-left: -60px;
  margin-bottom: -85px;
  height: 260px;
}
._theme-agent-item_1jnov_46:nth-child(6) {
  z-index: 3;
  margin-left: -70px;
  margin-bottom: -100px;
  height: 260px;
}
._theme-agent-item_1jnov_46:nth-child(7) {
  z-index: 4;
  margin-left: -30px;
  margin-bottom: -165px;
  height: 170px;
}
._theme-agent-item_1jnov_46:hover {
  z-index: 5;
}
._theme-agent-item_1jnov_46:hover ._theme-agent-bubble_1jnov_93 {
  z-index: 9;
  opacity: 1;
  transform: translateZ(0);
}
._theme-agent-avatar_1jnov_98 {
  height: 100%;
  transition: all 0.3s;
}
._theme-agent-avatar-hide_1jnov_102 {
  opacity: 0;
}
._theme-agent-anime_1jnov_105 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  filter: blur(10px);
  opacity: 0;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
._theme-agent-anime-active_1jnov_116 {
  z-index: 9;
  filter: blur(0);
  opacity: 1;
}
._theme-agent-shadow_1jnov_121 {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: -30px;
  -webkit-mask-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 0%,
    transparent 80%
  );
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 80%);
  filter: blur(10px);
  opacity: 0.8;
  pointer-events: none;
  transform: scaleY(-1);
  width: 100%;
  height: 100%;
}
._theme-agent-bubble_1jnov_93 {
  left: 100%;
  bottom: 100%;
  z-index: -1;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: all 0.3s;
}
._theme-agent-bubble-1_1jnov_142 {
  margin-left: -50px;
  margin-bottom: 40px;
}
._theme-agent-bubble-2_1jnov_146 {
  left: 50%;
  margin-left: -120px;
  margin-bottom: 50px;
}
._theme-agent-bubble-3_1jnov_151 {
  left: initial;
  right: 100%;
  margin-right: -50px;
}
._theme-agent-bubble-4_1jnov_156 {
  margin-left: -80px;
  margin-bottom: -100px;
}
._theme-agent-bubble-5_1jnov_160 {
  margin-left: -120px;
}
._theme-agent-bubble-6_1jnov_163 {
  left: 50%;
  margin-left: -120px;
  margin-bottom: -10px;
}
._theme-agent-bubble-7_1jnov_168 {
  left: initial;
  right: 100%;
  margin-right: -50px;
  margin-bottom: 20px;
}
._theme-input_1jnov_174 {
  z-index: 9;
  width: 776px;
  height: 128px;
}
._feature_1jnov_180 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._feature-shower_1jnov_187 {
  position: relative;
  width: 1120px;
}
._feature-title_1jnov_191 {
  line-height: 40px;
}
._feature-title-prefix_1jnov_194 {
  text-transform: uppercase;
  font-size: 32px;
  color: var(--primary);
  transition: all 0.3s;
}
._feature-title-text_1jnov_200 {
  margin-left: 10px;
  font-size: 32px;
  color: #fffc;
}
._feature-video_1jnov_205 {
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  border-radius: 40px;
  width: 940px;
  height: 560px;
}
._feature-video-poster_1jnov_213 {
  background-color: var(--foreground);
  object-fit: cover;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
._feature-video-btn_1jnov_220 {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 120px;
  height: 120px;
}
._feature-thumb_1jnov_237 {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 40px;
  flex-direction: column;
  align-items: center;
  padding: 19px;
  width: 240px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 30px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._feature-thumb-item_1jnov_251 {
  border-radius: 15px;
  width: 100%;
  height: 130px;
  background-color: var(--foreground);
  object-fit: cover;
  transition: all 0.3s;
}
._feature-thumb-flag_1jnov_259 {
  margin: 10px 0;
  background-color: #353838;
  color: #fff9;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
._feature-detail_1jnov_270 {
  margin-top: 20px;
  padding-top: 20px;
  width: 100%;
}
._feature-detail-item_1jnov_275 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 14px;
  width: fit-content;
  min-width: 300px;
  max-width: 500px;
  height: 100px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 30px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._feature-detail-item_1jnov_275._swiper-slide-active_1jnov_293 {
  gap: 20px;
  margin-top: 0;
  height: 110px;
  background-color: var(--primary);
}
._feature-detail-avatar_1jnov_299 {
  border-radius: 15px;
  background-color: var(--foreground);
  transform-origin: left bottom;
  transition: all 0.3s;
  width: 60px;
  height: 60px;
}
._swiper-slide-active_1jnov_293 ._feature-detail-avatar_1jnov_299 {
  box-shadow: 0 0 10px #000;
  transform: translate3d(-10px, 0, 0) scale(1.3) rotate(-10deg);
}
._feature-detail-content_1jnov_311 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  height: 60px;
}
._feature-detail-title_1jnov_318 {
  line-height: 30px;
  font-size: 20px;
  color: #fffc;
}
._feature-detail-desc_1jnov_323 {
  line-height: 20px;
  font-size: 16px;
  color: #fffc;
}
._agent_1jnov_329 {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._agent-title_1jnov_337 {
  line-height: 50px;
  font-size: 48px;
  color: #fffc;
}
._agent-subtitle_1jnov_342 {
  margin-top: 20px;
  line-height: 30px;
  font-size: 24px;
  color: #fff6;
}
._agent-detail_1jnov_348 {
  margin-top: 120px;
  width: 100%;
  height: 365px;
}
._agent-detail-item_1jnov_353 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  width: 380px;
  height: 335px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 30px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._agent-detail-item_1jnov_353._swiper-slide-active_1jnov_293 {
  height: 365px;
}
._agent-detail-title_1jnov_370 {
  line-height: 30px;
  font-size: 20px;
  color: #fffc;
}
._agent-detail-desc_1jnov_375 {
  width: 240px;
  line-height: 20px;
  font-size: 16px;
  color: #fff9;
}
._agent-detail-photo_1jnov_381 {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
._agent-detail-photo-item_1jnov_386 {
  overflow: hidden;
  border-radius: 15px;
  width: 160px;
  height: 180px;
}
._agent-detail-photo-item_1jnov_386:only-child {
  width: 100%;
}
._agent-detail-photo-img_1jnov_395 {
  background-color: var(--foreground);
  object-fit: cover;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
._lens_1jnov_403 {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
._lens-item_1jnov_409 {
  position: relative;
  width: 560px;
  height: 600px;
}
._lens-item_1jnov_409:first-child {
  position: relative;
}
._lens-item_1jnov_409:first-child:before {
  position: absolute;
  left: 100%;
  bottom: 123px;
  margin-left: -19px;
  background-color: var(--primary);
  content: "";
  transition: all 0.3s;
  border-radius: 50%;
  width: 34px;
  height: 34px;
}
._lens-item_1jnov_409:first-child:after {
  position: absolute;
  left: 100%;
  bottom: 50px;
  width: 15px;
  height: 180px;
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--primary) 50%,
    transparent 100%
  );
  content: "";
  transition: all 0.3s;
}
._lens-item_1jnov_409:last-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: 55px;
}
._lens-tips_1jnov_445 {
  line-height: 40px;
  font-size: 18px;
  color: #fff6;
}
._lens-figure_1jnov_450 {
  border: 4px solid var(--primary);
  border-radius: 50px;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 560px;
}
._lens-figure-img_1jnov_460 {
  border-radius: 40px;
  background-color: var(--foreground);
  object-fit: cover;
  transition: all 0.3s;
  width: 538px;
  height: 538px;
}
._lens-title_1jnov_468 {
  line-height: 50px;
  font-size: 48px;
  color: #fffc;
}
._lens-subtitle_1jnov_473 {
  margin-top: 10px;
  line-height: 30px;
  font-size: 24px;
  color: #fff6;
}
._lens-input_1jnov_479 {
  height: 275px;
}
._frame_1jnov_483 {
  min-height: 100vh;
  background: url(/oiioii/assets/home-frame-points-CpEuY0Vg.png) no-repeat center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._frame-title_1jnov_491 {
  line-height: 50px;
  font-size: 48px;
  color: #fffc;
}
._frame-subtitle_1jnov_496 {
  margin-top: 20px;
  line-height: 30px;
  font-size: 24px;
  color: #fff6;
}
._frame-card_1jnov_502 {
  margin-top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._frame-card-item_1jnov_508 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 30px;
  background-color: #ffffff1a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._frame-card-item_1jnov_508:first-child {
  transform: translateY(-60px) rotate(-10deg);
  transform-origin: left bottom;
}
._frame-card-item_1jnov_508:last-child {
  transform: rotate(10deg);
  transform-origin: right bottom;
}
._frame-card-flag_1jnov_528 {
  border-radius: 25px;
  background-color: #ffffff1a;
  color: #fff9;
  transform: translateY(-60px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
}
._frame-card-text_1jnov_539 {
  margin-top: 75px;
  line-height: 30px;
  font-size: 24px;
  color: #fff9;
}
._frame-btn_1jnov_545 {
  padding: 0 30px;
  border: none;
  border-radius: 20px;
  height: 50px;
  background-color: var(--primary);
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: #fffc;
  transition: all 0.3s;
}
._vibe_1jnov_558 {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
._vibe-item_1jnov_564 {
  position: relative;
  width: 335px;
  height: 600px;
}
._vibe-item_1jnov_564:nth-child(2) {
  position: relative;
  margin-left: 20px;
}
._vibe-item_1jnov_564:nth-child(2):before {
  position: absolute;
  left: 100%;
  bottom: 193px;
  margin-left: -19px;
  background-color: var(--primary);
  content: "";
  transition: all 0.3s;
  border-radius: 50%;
  width: 34px;
  height: 34px;
}
._vibe-item_1jnov_564:nth-child(2):after {
  position: absolute;
  left: 100%;
  bottom: 50px;
  width: 15px;
  height: 320px;
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--primary) 50%,
    transparent 100%
  );
  content: "";
  transition: all 0.3s;
}
._vibe-item_1jnov_564:last-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: 55px;
  width: 450px;
}
._vibe-tips_1jnov_602 {
  line-height: 40px;
  font-size: 18px;
  color: #fff6;
}
._vibe-figure_1jnov_607 {
  border: 4px solid var(--primary);
  border-radius: 50px;
  width: 335px;
  height: 560px;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
._vibe-figure-img_1jnov_617 {
  border-radius: 40px;
  width: 313px;
  height: 538px;
  background-color: #1c1c1c;
  object-fit: cover;
}
._vibe-title_1jnov_624 {
  line-height: 50px;
  font-size: 48px;
  color: #fffc;
}
._vibe-subtitle_1jnov_629 {
  margin-top: 10px;
  line-height: 30px;
  font-size: 24px;
  color: #fff6;
}
._vibe-input_1jnov_635 {
  height: 225px;
}
._case_1jnov_639 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0;
  min-height: 100vh;
}
._case-title_1jnov_646 {
  line-height: 50px;
  font-size: 48px;
  color: #fffc;
}
._case-detail_1jnov_651 {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  padding: 0 10%;
  width: 100%;
}
._footer_1jnov_659 {
  display: flex;
  justify-content: center;
  margin-left: 100px;
  margin-top: 80px;
  padding: 80px;
  background-color: var(--background);
}
._footer-container_1jnov_667 {
  display: flex;
  justify-content: space-between;
  gap: clamp(48px, 8vw, 128px);
  width: 100%;
  max-width: 1200px;
}
._footer-brand_1jnov_674 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 270px;
}
._footer-logo_1jnov_681 {
  margin-bottom: 16px;
  width: 66px;
  height: 22px;
}
._footer-description_1jnov_686 {
  margin: 0;
  line-height: 15px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #ffffffb3;
  letter-spacing: 0.2px;
  white-space: pre-wrap;
}
._footer-copyright_1jnov_696 {
  margin: auto 0 0;
  line-height: 15px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #ffffffb3;
  letter-spacing: 0.2px;
}
._footer-links_1jnov_706 {
  display: flex;
  justify-content: space-between;
  flex: 1;
  gap: clamp(24px, 4vw, 48px);
}
._footer-section_1jnov_712 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
._footer-title_1jnov_718 {
  margin: 0;
  padding-bottom: 8px;
  line-height: 15px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ffffffe8;
}
._footer-link_1jnov_706 {
  line-height: 18px;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
  transition: color 0.3s;
}
._footer-link_1jnov_706:hover {
  color: #ffffffe8;
}
._footer-contact_1jnov_741 {
  margin: 0;
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
}
._footer-contact_1jnov_741 a {
  text-decoration: none;
  color: #ffffffb3;
  transition: color 0.3s;
}
._footer-contact_1jnov_741 a:hover {
  color: #ffffffe8;
}
._footer-consent_1jnov_758 {
  margin: 8px 0 0;
  line-height: 18px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
}
._footer-social_1jnov_768 {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 18px;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffffb3;
  letter-spacing: 0.24px;
  transition: color 0.3s;
}
._footer-social_1jnov_768:hover {
  color: #ffffffe8;
}
._footer-icon_1jnov_784 {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
._case-detail-item_xh29k_7 {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  border-radius: 10px;
  width: 100%;
}
._case-detail-item_xh29k_7._has-metadata_xh29k_15 ._case-detail-info_xh29k_15 {
  visibility: hidden;
  opacity: 0;
}
._case-detail-item_xh29k_7._has-metadata_xh29k_15:hover
  ._case-detail-info_xh29k_15 {
  visibility: visible;
  margin-top: -1px;
  opacity: 1;
  transition:
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0s;
}
._case-detail-image-wrapper_xh29k_26 {
  display: flex;
  position: relative;
  z-index: 10;
  width: 100%;
}
._case-detail-cover_xh29k_33 {
  overflow: hidden;
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
  box-shadow: -3px 5px 3px #0000001a;
}
._case-detail-cover_xh29k_33 img {
  border-radius: 0 !important;
  object-fit: cover;
}
._case-detail-cover_xh29k_33 > div {
  border-radius: 0 !important;
  height: 100%;
}
._case-detail-cover_xh29k_33 img._viewer_xh29k_48 {
  border-radius: 0 !important;
  object-fit: cover;
}
._case-detail-btn_xh29k_53 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  padding: 12px;
  border: none;
  border-radius: 40px;
  background: #0003;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
._case-detail-btn_xh29k_53:hover {
  background: #0000004d;
  transform: translate(-50%, -50%) scale(1.1);
}
._case-detail-info_xh29k_15 {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 14px;
  margin-top: -85px;
  padding: 10px 16px 8px;
  border: 1px solid #dbdbdb;
  border-top: none;
  min-height: 81px;
  background: #fff;
  box-shadow: 0 1px 2px #0000001a;
  transition:
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.1s,
    visibility 0s linear 0.4s;
}
._case-detail-info-content_xh29k_91 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
._case-detail-category_xh29k_99 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0 8px;
  border-radius: 8px;
  min-width: 102px;
  height: 15px;
  background: #e9e9e9;
  opacity: 0.8;
}
._case-detail-category-text_xh29k_112 {
  line-height: 15px;
  text-align: center;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #999;
  letter-spacing: 0.2px;
}
._case-detail-title-row_xh29k_123 {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
._case-detail-avatar_xh29k_131 {
  flex-shrink: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  object-fit: cover;
}
._case-detail-title_xh29k_123 {
  overflow: hidden;
  line-height: 18px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1b1b1b;
  white-space: nowrap;
}
._case-detail-button_xh29k_151 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  min-height: 32px;
  background: var(--primary, #ef319f);
  cursor: pointer;
  transition: all 0.3s;
}
._case-detail-button_xh29k_151:hover {
  background: var(--primary-hover, #d12a8a);
  transform: translateY(-1px);
}
._case-detail-button_xh29k_151:active {
  transform: translateY(0);
}
._case-detail-button-text_xh29k_171 {
  line-height: 18px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #f8f7f7;
}
._waterfall-layout_chpfw_7 {
  width: 100%;
  max-width: 100%;
}
._waterfall-column_chpfw_12 {
  width: 100%;
}
._waterfall-item_chpfw_16 {
  width: 100%;
  break-inside: avoid;
}
._action-buttons_1stw1_2 {
  display: flex;
  position: relative;
  gap: 10px;
}
._tag_1stw1_8 {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 1;
  padding: 0 4px;
  border-radius: 8px 8px 8px 2px;
  background: linear-gradient(120deg, #ffa8db 13.14%, #e2fed4 88.61%);
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #0a0a0b;
}
._button_1stw1_23 {
  border-radius: 12px !important;
}
._button_1stw1_23 ._button-text_1stw1_29 {
  line-height: 18px;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #ffffffe8;
}
._bubble_19mmx_7 {
  position: absolute;
  width: fit-content;
}
._content_19mmx_12 {
  padding: 10px 15px;
  border-radius: 25px;
  width: 240px;
  background-color: #fff;
}
._title_19mmx_19 {
  line-height: 20px;
  font-size: 16px;
  color: var(--background);
  transition: all 0.3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._desc_19mmx_29 {
  line-height: 20px;
  font-size: 12px;
  color: #00000080;
}
._tail_19mmx_35 {
  position: absolute;
  top: 100%;
  margin-top: -10px;
  background-color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
._tail-left_19mmx_44 {
  left: 25px;
}
._tail-left_19mmx_44:after {
  left: 0;
  margin-left: -5px;
}
._tail-center_19mmx_51 {
  left: 50%;
  transform: translate(-50%);
}
._tail-center_19mmx_51:after {
  right: 0;
  margin-right: -5px;
}
._tail-right_19mmx_59 {
  right: 25px;
}
._tail-right_19mmx_59:after {
  right: 0;
  margin-right: -5px;
}
._tail_19mmx_35:after {
  position: absolute;
  top: 100%;
  background-color: #fff;
  content: "";
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
._user_3byup_7 {
  gap: 20px;
  padding: 72px 0 100px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._input_3byup_18 {
  position: relative;
  margin-top: 60px;
  width: 800px;
}
._project_3byup_24 {
  padding: 20px 0;
  width: 1200px;
}
._project-title_3byup_28 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  color: #fffc;
}
._project-title-link_3byup_35 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 14px;
  color: #fff9;
  transition: all 0.3s;
}
._project-title-link_3byup_35:hover {
  color: #fffc;
}
._project-title-text_3byup_47 {
  line-height: 38px;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
}
._project-detail_3byup_54 {
  display: flex;
  margin-top: 20px;
}
._project-detail-empty_3byup_58 {
  justify-content: center;
  align-items: center;
  height: 190px;
}
._project-item_3byup_63 {
  padding: 9px;
  width: 285px;
  min-height: 190px;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  background-color: #ffffff0d;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
._project-item_3byup_63:not(:first-child) {
  margin-left: 20px;
}
._project-item_3byup_63:hover {
  background-color: #fff3;
  transform: translateY(-1px);
}
._project-cover_3byup_80 {
  display: flex;
  justify-content: space-between;
  height: 110px;
}
._project-cover-item_3byup_85 {
  border-radius: 10px;
  height: 100%;
  background-color: #272929;
  object-fit: cover;
}
._project-cover-item_3byup_85:only-child {
  width: 100%;
}
._project-cover-item_3byup_85:first-child:nth-last-child(2),
._project-cover-item_3byup_85:last-child:nth-child(2) {
  width: calc((100% - 5px) / 2);
}
._project-cover-item_3byup_85:first-child:nth-last-child(3),
._project-cover-item_3byup_85:nth-child(2):nth-last-child(2),
._project-cover-item_3byup_85:last-child:nth-child(3) {
  width: calc((100% - 10px) / 3);
}
._project-cover-empty_3byup_100 {
  border-radius: 10px;
  height: 110px;
  background-color: #ffffff1a;
  color: #fffc;
  display: flex;
  justify-content: center;
  align-items: center;
}
._project-name_3byup_109 {
  margin-top: 5px;
  padding: 0 2px;
  line-height: 30px;
  font-size: 18px;
  color: #fffc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._project-desc_3byup_119 {
  padding: 0 2px;
  line-height: 25px;
  font-size: 12px;
  color: #ffffff7a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._highlight_3byup_129 {
  padding-bottom: 20px;
  width: 1200px;
}
._highlight-title_3byup_133 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  color: #fffc;
}
._highlight-title-text_3byup_140 {
  line-height: 38px;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
}
._highlight-detail_3byup_147 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
._highlight-item_3byup_153 {
  padding: 10px;
  border-radius: 20px;
  width: 285px;
  background-color: #ffffff1a;
  transform-origin: right bottom;
  transition: all 0.3s;
}
._highlight-item_3byup_153:hover {
  transform: scale(1.05) rotate(5deg);
}
._highlight-cover_3byup_164 {
  width: 100%;
  height: 150px;
}
._highlight-name_3byup_168 {
  margin-top: 10px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  color: #fffc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._overlayer-agent_3byup_179 {
  position: absolute;
  z-index: 0;
  width: 160px;
}
._overlayer-agent-mask_3byup_185 {
  position: absolute;
  top: 0;
  z-index: 1;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
._video-grid_kryg4_8 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px 0 0;
  width: 100%;
}
._row_kryg4_18 {
  display: grid;
}
._row-top_kryg4_22,
._row-bottom_kryg4_27 {
  display: flex;
  gap: 16px;
}
._tile_kryg4_32 {
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 24px;
  width: 100%;
  cursor: pointer;
}
._cover_kryg4_42,
._video_kryg4_8 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}
._tile_kryg4_32:hover ._video_kryg4_8,
._tile_kryg4_32:hover ._cover_kryg4_42 {
  transform: scale(1.03);
}
._title_kryg4_70 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  background-color: #00000080;
  font-size: 12px;
  color: #fffc;
}
._error_kryg4_81 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background-color: #0006;
  font-size: 12px;
  color: #fffc;
}

/* === Project Page (from index-VA68PTJL.css) === */
._project_4maua_7{display:flex;flex-direction:column;align-items:center;gap:20px;padding:100px 0;min-height:100vh}
._header_4maua_16{display:flex;justify-content:space-between;align-items:center;width:1200px}
._title_4maua_23{font-size:28px;color:#ffffffe6;height:40px;line-height:40px}
._search_4maua_30{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:10px;height:40px;background-color:#ffffff1a;color:#fff9;transition:all .3s}
._search_4maua_30:focus-within{background-color:#fff3;color:#fffc}
._search-input_4maua_45{border:none;width:200px;outline:none;background-color:transparent;font-size:14px;color:#fffc}
._search-input_4maua_45::placeholder{color:#fff6}
._search-loading_4maua_56{animation:_spin_4maua_1 1s linear infinite}
._detail_4maua_60{display:flex;flex-wrap:wrap;width:1200px}
._item_4maua_66{position:relative;padding:9px;width:285px;min-height:190px;transition:all .3s;border:1px solid rgba(255,255,255,.05);border-radius:20px;background-color:#ffffff0d;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
._item_4maua_66:not(:nth-child(4n-3)){margin-left:20px}
._item_4maua_66:nth-child(n+5){margin-top:30px}
._item_4maua_66:hover{z-index:9;background-color:#fff3;transform:translateY(-1px)}
._empty_4maua_89{gap:10px;border-radius:10px;height:160px;background-color:#272929;cursor:pointer;line-height:25px;font-weight:700;font-size:18px;color:#fffc;display:flex;flex-direction:column;justify-content:center;align-items:center}
._empty-btn_4maua_104{border:none;background-color:#ffffff1a;cursor:pointer;color:#fffc;display:flex;justify-content:center;align-items:center;border-radius:50%;width:25px;height:25px}
._cover_4maua_118{display:flex;justify-content:space-between;height:110px}
._cover-item_4maua_123{border-radius:10px;height:100%;background-color:#272929;object-fit:cover}
._cover-item_4maua_123:only-child{width:100%}
._cover-item_4maua_123:first-child:nth-last-child(2),._cover-item_4maua_123:last-child:nth-child(2){width:calc((100% - 5px)/2)}
._cover-item_4maua_123:first-child:nth-last-child(3),._cover-item_4maua_123:nth-child(2):nth-last-child(2),._cover-item_4maua_123:last-child:nth-child(3){width:calc((100% - 10px) / 3)}
._cover-empty_4maua_138{border-radius:10px;height:110px;background-color:#272929;color:#fffc;display:flex;justify-content:center;align-items:center}
._name_4maua_148{margin-top:5px;padding:0 2px;line-height:30px;font-size:18px;color:#fffc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
._desc_4maua_159{padding:0 2px;line-height:25px;font-size:12px;color:#fff9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
._more_4maua_169{position:absolute;right:8px;bottom:8px}
._more_4maua_169:hover:after{position:absolute;left:100%;top:100%;margin:-20px 0 0 -45px;width:180px;height:100px;content:""}
._more_4maua_169:hover ._handler_4maua_183{z-index:9;opacity:1;transform:scale(1)}
._more_4maua_169:hover ._more-btn_4maua_188{background-color:#fff3}
._more-btn_4maua_188{position:relative;border:none;border:1px solid transparent;border-radius:5px;background-color:transparent;cursor:pointer;color:#fff9;transition:all .3s;display:flex;justify-content:center;align-items:center;width:20px;height:20px}
._more-btn_4maua_188:hover{background-color:#ffffff1a}
._handler_4maua_183{display:flex;overflow:hidden;position:absolute;left:100%;top:100%;z-index:-1;flex-direction:column;gap:5px;margin:10px 0 0 -30px;padding:5px;border-radius:15px;width:180px;background-color:#161718;opacity:0;transform:scale(0);transform-origin:top left;transition:all .3s}
._handler-item_4maua_229{display:flex;align-items:center;gap:10px;padding:0 10px;border:none;border-radius:10px;height:35px;background-color:transparent;cursor:pointer;color:#fff9;transition:all .3s}
._handler-item_4maua_229:hover{background-color:#ffffff1a}
._handler-item-delete_4maua_245{color:#d74c47}
._load-more_4maua_249{display:flex;justify-content:center;align-items:center;width:100%;min-height:60px}
._loading-indicator_4maua_257{display:flex;justify-content:center;align-items:center;gap:5px;padding:0 15px;border-radius:10px;height:40px;background-color:#ffffff1a;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);opacity:.8;font-weight:700;font-size:16px;color:#fffc;transition:all .3s}
._loading-indicator_4maua_257 svg{animation:_spin_4maua_1 1s linear infinite}
@keyframes _spin_4maua_1{to{transform:rotate(1turn)}}

/* === Character / Role List Page (from index-Ccz8VnHy.css) === */

/* Page layout */
._area_mop88_2{display:flex;flex-direction:column;width:100%}
._role-list-grid-header_mop88_8{display:flex;align-items:center;gap:30px;padding-left:30px;height:75px}
._role-list-grid-header_mop88_8 ._role-list-grid-tab_mop88_15{line-height:24px;font-family:Noto Sans,sans-serif;font-style:normal;font-weight:700;font-size:24px;color:#64656e}
._role-list-grid-header_mop88_8 ._role-list-grid-tab-active_mop88_23{color:#c9c9c9}
._role-list-grid-container_mop88_27{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:35px;padding-left:64px}
._role-list-grid-scroll_mop88_35{overflow:hidden auto;padding-top:32px;padding-bottom:32px;height:calc(100vh - 75px)}
._role-list-grid-scroll_mop88_35::-webkit-scrollbar{display:none}

/* Manage button */
._role-list-manage_mop88_721{display:flex;position:absolute;right:32px;top:27px;justify-content:center;align-items:center;gap:4px;padding:10px 16px;border-radius:10px;max-height:36px;background-color:#353838;cursor:pointer}
._role-list-manage_mop88_721:hover{opacity:.85}

/* Role gacha card */
._role-card_2ex3r_2{position:relative;padding:10px;width:267px;cursor:pointer}
._role-card-header_2ex3r_9{position:absolute;left:0;top:0;z-index:20}
._role-card-delete_2ex3r_16{display:flex;position:absolute;right:-4px;top:4px;z-index:10000;justify-content:center;align-items:center;cursor:pointer;transition:transform .2s ease}
._role-card-delete_2ex3r_16 img{width:48px;height:48px}
._role-card-delete_2ex3r_16:hover{transform:scale(1.1)}
._role-card-delete_2ex3r_16:active{transform:scale(.95)}
._role-card-content_2ex3r_38{display:flex;flex-direction:column;justify-content:center;padding-top:16px}
._role-card-content-inner_2ex3r_45{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding-top:35px;border:8px solid #0a0a0a;border-bottom:none;border-radius:16px 16px 0 0;background:#fafafa}
._role-card-image_2ex3r_60{position:relative;z-index:1;border-radius:16px;width:192px;height:245px;background-color:#2e2e2e}
._role-card-image_2ex3r_60 img{position:relative;z-index:1;border:4px solid #151515;border-radius:16px;width:100%;height:100%;object-fit:cover;object-position:top;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
._role-card-image_2ex3r_60 ._role-card-image-mask_2ex3r_80{position:absolute;left:0;top:0;z-index:-1;border-radius:16px;width:100%;height:100%;background:#b6fa0c;transform:rotate(4.36deg) scale(1.06)}
._role-card-name_2ex3r_92{display:-webkit-box;overflow:hidden;margin-bottom:16px;line-height:1;-webkit-line-clamp:2;text-overflow:ellipsis;text-align:center;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:800;font-size:24px;color:#282828;word-break:break-all;-webkit-box-orient:vertical}
._role-card-content-footer_2ex3r_110{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:8px 14px 6px;border:8px solid #0a0a0a;border-top:none;border-radius:0 0 16px 16px;width:100%;background:#161616}
._role-card-footer-left_2ex3r_125{opacity:.5;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:700;font-size:12px;color:#393939;letter-spacing:.48px}
._role-card-footer-right_2ex3r_136{opacity:.5;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:700;font-size:20px;color:#393939;letter-spacing:.8px}
._role-card-image-create_2ex3r_147{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:4px solid #151515;border-radius:16px;width:100%;height:100%;background:#2e2e2e}
._role-card-image-create_2ex3r_147 img{border:none;width:50px;height:50px;outline:none;object-fit:cover}
._role-card-image-create_2ex3r_147 span{line-height:28px;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:400;font-size:20px;color:#6f767e}

/* NO. badge header */
._role-card-header-inner_9vjb9_1{position:relative}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-label_9vjb9_4{display:flex;justify-content:center;align-items:center;border:4px solid #000;border-radius:50%;width:54px;height:54px;background:#161616}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-label_9vjb9_4 span._text_9vjb9_14{line-height:38px;-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#000;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:700;font-size:20px}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-label_9vjb9_4 span._text_9vjb9_14:before{position:absolute;background-color:#fff;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;-webkit-text-fill-color:transparent;content:attr(data-title)}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-number_9vjb9_32{display:inline-block;position:relative;padding:8px 16px 8px 38px}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-number_9vjb9_32 span._text_9vjb9_14{display:block;position:relative;z-index:1;line-height:24px;-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#000;font-family:Roboto,sans-serif;font-style:normal;font-weight:700;font-size:18px}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-number_9vjb9_32 span._text_9vjb9_14:before{position:absolute;background-color:#fff;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;-webkit-text-fill-color:transparent;content:attr(data-title)}
._role-card-header-inner_9vjb9_1 ._role-card-header-inner-number-wrap_9vjb9_57{position:absolute;left:28px;top:8px;z-index:-1}

/* Confirm dialog */
._confirm-dialog-overlay_mop88_638{display:flex;position:fixed;left:0;top:0;z-index:10000;justify-content:center;align-items:center;width:100vw;height:100vh;background:#000000b3;animation:_fade-in_mop88_1 .2s ease-out}
._confirm-dialog_mop88_638{display:flex;overflow:hidden;flex-direction:column;justify-content:center;align-items:center;gap:46px;padding:64px;border-radius:20px;background:#2c2c2c;animation:_scale-in_mop88_1 .3s cubic-bezier(.34,1.56,.64,1)}
._confirm-dialog-title_mop88_665{overflow:hidden;line-height:36px;text-overflow:ellipsis;text-align:center;font-family:Source Han Sans SC,sans-serif;font-style:normal;font-weight:500;font-size:32px;color:#fff;color:var(--color-text-normal, #c7c8ce)}
._confirm-dialog-buttons_mop88_678{display:flex;gap:59px}
._confirm-dialog-button-cancel_mop88_683,._confirm-dialog-button-confirm_mop88_684{padding:16px 48px;border:1px solid rgba(255,255,255,.91);border-radius:12px;min-width:160px;background:#ffffff0f;cursor:pointer;font-family:Noto Sans,sans-serif;font-style:normal;font-weight:600;font-size:20px;transition:all .2s ease}
._confirm-dialog-button-cancel_mop88_683:active,._confirm-dialog-button-confirm_mop88_684:active{transform:scale(.95)}
._confirm-dialog-button-cancel_mop88_683{background:transparent;color:#fff}
._confirm-dialog-button-cancel_mop88_683:hover{border-color:#707070;background:#52525233}
._confirm-dialog-button-confirm_mop88_684{border-color:#b6fa0c;background:#b6fa0c;color:#000}
._confirm-dialog-button-confirm_mop88_684:hover{background:#c8ff2e;box-shadow:0 4px 16px #b6fa0c66}
@keyframes _scale-in_mop88_1{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes _fade-in_mop88_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* Delete dialog */
._delete-dialog-overlay_mop88_750{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;justify-content:center;align-items:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:_fade-in_mop88_1 .2s ease}
._delete-dialog_mop88_750{display:flex;flex-direction:column;gap:8px;padding:24px 16px;border-radius:16px;min-width:340px;max-width:400px;background:#1e1e1e;animation:_scale-in_mop88_1 .2s ease}
._delete-dialog-title_mop88_774{align-self:stretch;line-height:28px;text-align:center;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:700;font-size:20px;color:#ffffffe8}
._delete-dialog-description_mop88_788{align-self:stretch;line-height:26px;text-align:center;font-family:Roboto,sans-serif;font-style:normal;font-weight:400;font-size:17px;color:#ffffffb3;letter-spacing:.34px}
._delete-dialog-buttons_mop88_802{display:flex;gap:16px;margin-top:32px;padding:0 8px}
._delete-dialog-buttons_mop88_802 button{flex:1;padding:16px;border:none;border-radius:20px;cursor:pointer;line-height:20px;text-align:center;text-transform:capitalize;font-family:Roboto,sans-serif;font-style:normal;font-weight:600;font-size:16px;transition:all .2s ease}
._delete-dialog-button-cancel_mop88_824{padding:16px;border-radius:20px;background:#282828;color:#fff}
._delete-dialog-button-cancel_mop88_824:hover{border-color:#606060;background:#3c3c3c}
._delete-dialog-button-confirm_mop88_835{padding:16px;border-radius:20px;background:#e54d4d;color:#fff}
._delete-dialog-button-confirm_mop88_835:hover{background:#f05a5a;box-shadow:0 4px 16px #e54d4d66}