html {
  color-scheme: dark;
  background: #080808;
  color: #f4f4f4;
}
html[data-theme='light'] {
  color-scheme: light;
  background: #f5f5f5;
  color: #181818;
}
body {
  margin: 0;
}
.member-page-loading {
  box-sizing: border-box;
  min-height: min(560px, 68dvh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--muted, #b5b5b5);
  font:
    14px/1.65 Arial,
    'PingFang TC',
    'Microsoft JhengHei',
    sans-serif;
}
html[data-theme='light'] .member-page-loading {
  color: var(--muted, #5f5f5f);
}
.member-loading-mark {
  width: 42px;
  height: 48px;
  overflow: hidden;
  display: block;
}
.member-loading-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.3);
  filter: brightness(0) invert(1);
}
html[data-theme='light'] .member-loading-mark img {
  filter: brightness(0);
}
.member-loading-track {
  display: block;
  width: 104px;
  height: 3px;
  border-radius: 4px;
  background: var(--line, #343434);
  overflow: hidden;
}
html[data-theme='light'] .member-loading-track {
  background: var(--line, #d6d6d6);
}
.member-loading-track::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--ink, #f4f4f4);
  border-radius: inherit;
  animation: member-loading-slide 1.1s ease-in-out infinite alternate;
}
html[data-theme='light'] .member-loading-track::after {
  background: var(--ink, #181818);
}
@keyframes member-loading-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}
#member-startup {
  padding: max(56px, env(safe-area-inset-top, 0px)) 20px 0;
}
.member-startup-recovery {
  display: none;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 24px 32px;
  font:
    14px/1.7 Arial,
    sans-serif;
}
.member-startup-recovery a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
}
.member-startup-recovery a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
#member-startup[data-failed='true'] .member-loading-track {
  display: none;
}
#member-startup[data-failed='true'] .member-startup-recovery {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .member-loading-track::after {
    animation: none;
    transform: translateX(75%);
  }
}
