.app {
  position: relative;
  min-height: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app > .app__header {
  position: relative;
  width: 100%;
  height: var(--s-8);
  flex: 0 0 var(--s-8);
  z-index: 4;
  background: var(--c-surface);
  padding: var(--s-1) var(--s-2);
  display: flex;
}
.app > .app__header > .app__header__logo {
  width: auto;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0 var(--s-3);
  height: var(--s-6);
}
.app > .app__header > .app__header__logo > i {
  font-size: var(--fs-24);
}
.app > .app__header > .app__header__logo > h1 {
  font-size: var(--fs-24);
  font-weight: var(--fw-400);
  color: #000;
}
.app > .app__content {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}
.app > .app__content > .app__main__start {
  padding-top: var(--s-8);
  width: var(--s-12);
  flex: 0 0 var(--s-12);
  display: flex;
  align-items: first baseline;
  justify-content: center;
  z-index: 3;
}
.app > .app__content > .app__main__start > i {
  font-size: var(--fs-18);
  color: var(--c-text-2);
}
.app > .app__content > .app__main {
  flex: 1 1 auto;
  padding: 0 var(--s-3) var(--s-3) 0;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
.app > .app__content > .app__main > .app__main__inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-surface-2);
  display: flex;
  gap: var(--s-2);
  padding: var(--s-1);
  border-radius: var(--r-16);
  overflow: hidden;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content > .app__main__content__header {
  height: var(--s-9);
  padding-bottom: var(--s-3);
  z-index: 2;
  background: linear-gradient(0deg, rgba(233, 238, 246, 0) 0, var(--c-surface-2) 30%);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content > .app__main__content__body {
  margin: -24px 0 -40px;
  align-items: center;
  display: flex;
  overflow-y: auto;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  scrollbar-color: var(--c-surface) transparent;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content > .app__main__content__body > .app__main__content__body__inner {
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: var(--s-2);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content > .app__main__content__body > .app__main__content__body__inner > .app__main__content__body__inner__start {
  height: var(--s-8);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content > .app__main__content__body > .app__main__content__body__inner > .app__main__content__body__inner__end {
  height: var(--s-8);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__content > .app__main__content__footer {
  display: flex;
  justify-content: center;
  padding-top: var(--s-2);
  z-index: 2;
  background: linear-gradient(180deg, rgba(233, 238, 246, 0) 0, var(--c-surface-2) 50%);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar {
  width: 574px;
  flex: 0 0 574px;
  background: var(--c-surface);
  border-radius: var(--r-16);
  overflow: hidden;
  transition: flex-basis 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease, padding 150ms ease;
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__header {
  height: var(--s-8);
  padding-bottom: var(--s-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  background: linear-gradient(0deg, rgba(233, 238, 246, 0) 0, var(--c-surface) 30%);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__header > h2 {
  flex: 1 1 auto;
  font-size: var(--fs-24);
  font-weight: var(--fw-400);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__header > i {
  font-size: var(--fs-24);
  margin-right: var(--s-1);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__header > .app__main__sidebar__header__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-2);
  font-size: var(--fs-18);
  font-weight: var(--fw-500);
  cursor: pointer;
  user-select: none;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__header > .app__main__sidebar__header__close {
  width: 40px;
  height: 40px;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  overflow-y: auto;
  margin: -24px 0 -24px 0;
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__body > .app__main__sidebar__body__inner > .app__main__sidebar__body__inner__start {
  height: var(--s-2);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__body > .app__main__sidebar__body__inner > .app__main__sidebar__body__inner__end {
  height: var(--s-2);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar > .app__main__sidebar__footer {
  display: flex;
  justify-content: center;
  padding-top: var(--s-2);
  z-index: 2;
  background: linear-gradient(180deg, rgba(233, 238, 246, 0) 0, var(--c-surface) 50%);
}
.app > .app__content > .app__main > .app__main__inner > .app__main__sidebar.is-hidden {
  flex-basis: 0;
  opacity: 0;
  padding: 0;
}