html:has(.mousike-entry) { color-scheme: dark; background: #080609; }

body.mousike-entry {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #080609;
  background-image:
    radial-gradient(ellipse at 50% 47%, #160b20 0%, transparent 53%),
    repeating-radial-gradient(ellipse 130% 81% at 15% 114%,
      transparent 0%, transparent 8.8%, #a765e31c 9%, transparent 9.25%, transparent 12%),
    repeating-radial-gradient(ellipse 118% 85% at 112% -21%,
      transparent 0%, transparent 13.8%, #8052b41f 14%, transparent 14.25%, transparent 18%);
  color: #f4efff;
  font-family: Inter, system-ui, sans-serif;
}

.mousike-splash {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.mousike-entry-logo {
  display: grid;
  justify-items: center;
  gap: clamp(.5rem, 1.5vw, .875rem);
}

.mousike-entry-logo img {
  display: block;
  height: auto;
}

.mousike-entry-symbol { width: 83%; }

/* The approved wordmark export includes a thin slice of the symbol above the lettering. */
.mousike-entry-wordmark {
  width: 100%;
  clip-path: inset(4% 0 0);
}

.mousike-splash-logo {
  width: min(74vw, 86vh, 340px);
  animation: mousike-logo-in 340ms ease-out both;
}

.mousike-splash-status {
  position: absolute;
  inset: auto 1rem max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
}

.mousike-splash-status a { color: #ddc6ff; }

@keyframes mousike-logo-in {
  from { opacity: .8; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mousike-splash-logo { animation: none; }
}

.mousike-entry--login .ax-shell {
  align-items: center;
  padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
           max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}

.mousike-entry--login .ax-panel--branded {
  --ax-color-surface: #17121e;
  --ax-color-text: #f7f2fc;
  --ax-color-muted: #cfc2dc;
  --ax-color-border: #63536e;
  --ax-color-primary: #e7caff;
  --ax-color-primary-text: #1b0d28;
  --ax-color-focus: #d4a5ff;
  --ax-color-danger: #ffb7c2;
  --ax-color-danger-bg: #351521;
  width: min(100%, 420px);
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ax-color-text);
}

.mousike-entry-brand {
  margin: 0 0 clamp(1.5rem, 5vw, 2rem);
  text-align: center;
}

.mousike-entry-brand .mousike-entry-logo {
  width: min(62vw, 236px);
  margin: 0 auto clamp(1.5rem, 5vw, 2.25rem);
}

.mousike-entry-brand h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.mousike-entry--login .ax-button {
  min-height: 56px;
  padding: .75rem 1.125rem;
  border-radius: 999px;
}

.mousike-entry--login .ax-button:focus-visible,
.mousike-password summary:focus-visible {
  outline: 2px solid var(--ax-color-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .mousike-entry--login .ax-button--primary:not(:disabled):hover {
    background: #f1e0ff;
  }

  .mousike-password summary:hover { color: #fff; }
}

.mousike-entry--login [data-passkey-status] {
  margin: .875rem 0 0;
  color: var(--ax-color-muted);
  font-size: .875rem;
  text-align: center;
}

.mousike-entry--login [data-passkey-status]:empty { display: none; }

.mousike-password { margin-top: .75rem; }

.mousike-password summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .5rem .75rem;
  border-radius: 12px;
  color: var(--ax-color-muted);
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  list-style: none;
  text-align: center;
}

.mousike-password summary::-webkit-details-marker { display: none; }
.mousike-password summary::after {
  width: .42rem;
  height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.mousike-password[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.mousike-entry--login .ax-form { gap: .875rem; }
.mousike-password .ax-form { margin-top: .75rem; }

.mousike-entry--login .ax-field__label { color: var(--ax-color-muted); }

.mousike-entry--login .ax-field__input {
  min-height: 52px;
  border-radius: 14px;
  padding-inline: 1rem;
  font-size: 1rem;
}

.mousike-entry--login .ax-field__input:focus {
  box-shadow: 0 0 0 3px #d4a5ff33;
}

.mousike-entry--login .ax-panel--branded:has(> [data-access-passkey-login]:not([hidden])) .mousike-password .ax-button {
  border: 1px solid var(--ax-color-border);
  background: var(--ax-color-surface);
  color: var(--ax-color-text);
}

.mousike-entry--login .ax-footer {
  margin-top: 1.5rem;
  padding-top: 0;
}

.mousike-entry--login .ax-footer__name { display: none; }