*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  scrollbar-gutter: stable;
}

body {
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;    
  height: 100dvh;
}

body {
  font-family: var(--msm-font);
  font-size: var(--msm-text-body);
  font-weight: var(--msm-weight-regular);
  line-height: var(--msm-leading-body);
  letter-spacing: var(--msm-tracking-body);
  color: var(--msm-text-primary);
  background-color: var(--msm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--msm-dur-base) var(--msm-ease-out),
    color var(--msm-dur-base) var(--msm-ease-out);
}

body[data-theme="light"] {
  background-color: #000000;
}

@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]) {
    background-color: #000000;
  }
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--msm-accent);
  outline-offset: 2px;
}

.msm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: color-mix(in srgb, var(--msm-accent) 24%, transparent);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--msm-hairline-strong) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--msm-hairline-strong);
  border-radius: var(--msm-radius-pill);
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  html:has(body:not([data-theme="light"])) {
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  }
}

html:has(body[data-theme="dark"]) {
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

html:has(body[data-theme="light"]) {
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

@media (prefers-color-scheme: light) {
  html:has(body:not([data-theme="dark"])) {
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  }
}

body[data-theme="light"] .msm-page::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
}

@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]) .msm-page::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

.msm-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transition: filter 1400ms var(--msm-ease-out);
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .msm-bg {
    filter: brightness(0.32) saturate(0.7);
    -webkit-mask-image: linear-gradient(to bottom, black 78%, rgba(0, 0, 0, 0.55) 100%);
    mask-image: linear-gradient(to bottom, black 78%, rgba(0, 0, 0, 0.55) 100%);
  }
}

body[data-theme="dark"] .msm-bg {
  filter: brightness(0.32) saturate(0.7);
  -webkit-mask-image: linear-gradient(to bottom, black 78%, rgba(0, 0, 0, 0.55) 100%);
  mask-image: linear-gradient(to bottom, black 78%, rgba(0, 0, 0, 0.55) 100%);
}

@keyframes msm-bg-alive {
  0%, 100% { filter: saturate(1.10) brightness(1.02); transform: scale(1.012); }
  50%      { filter: saturate(1.26) brightness(1.05); transform: scale(1.028); }
}

@keyframes msm-bg-alive-dark {
  0%, 100% { filter: brightness(0.33) saturate(0.72); transform: scale(1.012); }
  50%      { filter: brightness(0.37) saturate(0.82); transform: scale(1.028); }
}

body[data-state="searching"] .msm-bg {
  animation: none; 
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"])[data-state="searching"] .msm-bg {
    animation-name: none; 
  }
}

body[data-theme="dark"][data-state="searching"] .msm-bg {
  animation-name: none; 
}

@keyframes msm-bg-drift {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1.06) rotate(-0.4deg); }
  to   { transform: translate3d( 1.6%,  1.4%, 0) scale(1.10) rotate( 0.4deg); }
}

.msm-page::before {
  content: "";
  position: fixed;
  inset: -14vmax; 
  z-index: -1;
  pointer-events: none;
  background:
    
    radial-gradient(46vmax 40vmax at 20% 24%, rgba(222, 215, 245, 0.95), rgba(222, 215, 245, 0) 66%),
    radial-gradient(50vmax 44vmax at 82% 20%, rgba(201, 216, 247, 0.95), rgba(201, 216, 247, 0) 66%),
    radial-gradient(48vmax 42vmax at 24% 78%, rgba(230, 222, 249, 0.92), rgba(230, 222, 249, 0) 66%),
    radial-gradient(44vmax 38vmax at 78% 82%, rgba(212, 228, 251, 0.92), rgba(212, 228, 251, 0) 66%),
    linear-gradient(180deg, #f8f7fc 0%, #eef0f9 100%);
  filter: blur(60px);
  animation: msm-bg-drift 40s ease-in-out infinite alternate;
}

body[data-theme="light"] .msm-page::before {
  background:
    radial-gradient(46vmax 40vmax at 20% 24%, rgba(222, 215, 245, 0.34), rgba(222, 215, 245, 0) 66%),
    radial-gradient(50vmax 44vmax at 82% 20%, rgba(201, 216, 247, 0.30), rgba(201, 216, 247, 0) 66%),
    radial-gradient(48vmax 42vmax at 24% 78%, rgba(230, 222, 249, 0.30), rgba(230, 222, 249, 0) 66%),
    radial-gradient(44vmax 38vmax at 78% 82%, rgba(212, 228, 251, 0.26), rgba(212, 228, 251, 0) 66%),
    linear-gradient(180deg, #000000 0%, #1c1c1e 100%);
}

@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]) .msm-page::before {
    background:
      radial-gradient(46vmax 40vmax at 20% 24%, rgba(222, 215, 245, 0.34), rgba(222, 215, 245, 0) 66%),
      radial-gradient(50vmax 44vmax at 82% 20%, rgba(201, 216, 247, 0.30), rgba(201, 216, 247, 0) 66%),
      radial-gradient(48vmax 42vmax at 24% 78%, rgba(230, 222, 249, 0.30), rgba(230, 222, 249, 0) 66%),
      radial-gradient(44vmax 38vmax at 78% 82%, rgba(212, 228, 251, 0.26), rgba(212, 228, 251, 0) 66%),
      linear-gradient(180deg, #000000 0%, #1c1c1e 100%);
  }
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .msm-page::before {
    opacity: 0.16;
    filter: blur(60px) saturate(0.75);
  }
}

body[data-theme="dark"] .msm-page::before {
  opacity: 0.16;
  filter: blur(60px) saturate(0.75);
}

body[data-bg="gl"] .msm-page::before {
  content: none;
}

body.msm-bg_off .msm-page::before {
  content: none;
}

body.msm-bg_off {
  background-color: #17131f;
  background-image: linear-gradient(160deg, #101014 0%, #17131f 100%);
}

body[data-theme="light"].msm-bg_off {
  background-color: #ded7f5;
  background-image: linear-gradient(160deg, #f8f7fc 0%, #ded7f5 55%, #c9d8f7 100%);
  color: var(--msm-text-primary);
}

@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]).msm-bg_off {
    background-color: #ded7f5;
    background-image: linear-gradient(160deg, #f8f7fc 0%, #ded7f5 55%, #c9d8f7 100%);
    color: var(--msm-text-primary);
  }
}