@font-face {
  font-family: 'Manrope';
  src: url('/fonts/ManropeVariable.ttf') format('truetype');
  font-display: swap;
  font-weight: 200 800;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGroteskVariable.ttf') format('truetype');
  font-display: swap;
  font-weight: 300 700;
}

:root {
  --boot-background: #0e0e10;
  --boot-login-background: linear-gradient(138deg, #080a0d 0%, #11151a 54%, #17110d 100%);
  --boot-text: #f6f5f7;
  --boot-muted: #99969e;
  --boot-line: #302e32;
  --boot-accent: #ff9f43;
  color-scheme: dark;
  background: var(--boot-background);
}

:root[data-theme='light'] {
  --boot-background: #f6f8fa;
  --boot-login-background: linear-gradient(138deg, #f9fafb 0%, #edf1f4 56%, #f4e9e1 100%);
  --boot-text: #17181b;
  --boot-muted: #6c7179;
  --boot-line: #d9dde2;
  color-scheme: light;
}


html,
body,
#root { min-height: 100%; margin: 0; background: var(--boot-background); }

.boot-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--boot-text);
  background-color: var(--boot-background);
  background-image: var(--boot-login-background);
  background-size: 100% 100%;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

.boot-loader::before {
  position: absolute;
  inset: 0;
  content: '';
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--boot-background) 48%, transparent), var(--boot-background)),
    linear-gradient(color-mix(in srgb, var(--boot-line) 28%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--boot-line) 28%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  pointer-events: none;
}

.boot-loader::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: min(58vw, 900px);
  height: min(42vh, 430px);
  content: '';
  background: linear-gradient(145deg, transparent 42%, color-mix(in srgb, var(--boot-accent) 38%, transparent));
  clip-path: polygon(36% 100%, 100% 0, 100% 100%);
  opacity: .48;
  pointer-events: none;
}

.boot-loader__brand,
.boot-loader__message { position: relative; z-index: 2; pointer-events: none; }

.boot-loader__brand { display: flex; align-items: center; gap: 15px; }
.boot-loader__symbol { width: 58px; height: 58px; display: grid; place-items: center; color: var(--boot-accent); filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--boot-accent) 20%, transparent)); }
.boot-loader__symbol svg { width: 100%; height: 100%; overflow: visible; }
.boot-loader__frame { fill: color-mix(in srgb, var(--boot-accent) 5%, transparent); stroke: currentColor; stroke-width: 2.25; }
.boot-loader__fold { fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 2.25; }
.boot-loader__prompt { fill: none; stroke: var(--boot-text); stroke-linecap: square; stroke-linejoin: miter; stroke-width: 2.6; }
.boot-loader__cursor { fill: none; stroke: var(--boot-text); stroke-linecap: square; stroke-width: 2.6; animation: boot-cursor 1.05s steps(1, end) infinite; }
.boot-loader__wordmark { display: flex; align-items: baseline; gap: 7px; font-family: 'Space Grotesk', Manrope, sans-serif; font-size: clamp(27px, 5vw, 34px); line-height: 1; }
.boot-loader__wordmark strong { font-weight: 700; }
.boot-loader__wordmark span { color: var(--boot-muted); font-weight: 470; }
.boot-loader__message { width: min(100%, 520px); min-height: 42px; margin: 27px 0 0; color: var(--boot-muted); font-size: 13px; line-height: 1.55; text-align: center; text-wrap: balance; }
/* Hide progress in a previously cached HTML shell too. */
.boot-loader__progress { display: none; }
.boot-loader { touch-action: none; }
.boot-loader__cosmos { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

@keyframes boot-cursor { 0%, 48% { opacity: 1; } 49%, 100% { opacity: .12; } }

@media (prefers-reduced-motion: reduce) {
  .boot-loader__cursor { animation-duration: 2.4s; }
}

/* Surface palettes also apply before the application bundle starts. */
:root[data-theme='dark']:not([data-theme-variant]), :root[data-theme='dark'][data-theme-variant=''] { --boot-background: #121519; --boot-login-background: #121519; --boot-text: #f2f5f8; --boot-muted: #aeb9c6; --boot-line: #343e4a; }
:root[data-theme='light']:not([data-theme-variant]), :root[data-theme='light'][data-theme-variant=''] { --boot-background: #f3f5f8; --boot-login-background: #f3f5f8; --boot-text: #202a36; --boot-muted: #526174; --boot-line: #d5dde7; }
:root[data-theme='graphite']:not([data-theme-variant]), :root[data-theme='graphite'][data-theme-variant=''] { --boot-background: #22252a; --boot-login-background: #22252a; --boot-text: #f4f6f9; --boot-muted: #bcc5d0; --boot-line: #4c5663; }
:root[data-theme-variant='pearl'] { --boot-background: #e8ecf0; --boot-login-background: #e8ecf0; --boot-text: #26313d; --boot-muted: #526174; --boot-line: #c7d1dc; }
:root[data-theme-variant='oled'] { --boot-background: #000000; --boot-login-background: #000000; --boot-text: #f4f7fa; --boot-muted: #acb7c5; --boot-line: #2d3642; }
:root[data-theme-variant='titanium'] { --boot-background: #2d333b; --boot-login-background: #2d333b; --boot-text: #f5f7fa; --boot-muted: #d0d7e0; --boot-line: #5a6879; }
:root[data-theme-variant='frost'] { --boot-background: #e9f1f6; --boot-login-background: #e9f1f6; --boot-text: #223441; --boot-muted: #506575; --boot-line: #c5d6e1; }
:root[data-theme-variant='midnight'] { --boot-background: #101727; --boot-login-background: #101727; --boot-text: #eff4fc; --boot-muted: #b5c4dc; --boot-line: #344965; }
:root[data-theme-variant='ocean'] { --boot-background: #102229; --boot-login-background: #102229; --boot-text: #edf6f9; --boot-muted: #b3cbd4; --boot-line: #3a5664; }
:root[data-theme-variant='forest'] { --boot-background: #14231f; --boot-login-background: #14231f; --boot-text: #f0f6f0; --boot-muted: #bfd1c1; --boot-line: #425c4b; }
:root[data-theme-variant='dusk'] { --boot-background: #211c29; --boot-login-background: #211c29; --boot-text: #f7f1fa; --boot-muted: #d0bfdc; --boot-line: #574963; }
:root[data-theme-variant='sand'] { --boot-background: #f2ede4; --boot-login-background: #f2ede4; --boot-text: #342f29; --boot-muted: #675c4f; --boot-line: #d7ccbc; }
:root[data-theme-variant='paper'] { --boot-background: #f3f3ee; --boot-login-background: #f3f3ee; --boot-text: #2b322b; --boot-muted: #566151; --boot-line: #cfd5c7; }

/* Match the selected accent before the app mounts. */
:root[data-accent='orange'] { --boot-accent: #ffaf58; }
:root[data-theme='light'][data-accent='orange'] { --boot-accent: #a74400; }
:root[data-accent='amber'] { --boot-accent: #ffcf40; }
:root[data-theme='light'][data-accent='amber'] { --boot-accent: #825c00; }
:root[data-accent='lemon'] { --boot-accent: #e7f34a; }
:root[data-theme='light'][data-accent='lemon'] { --boot-accent: #616800; }
:root[data-accent='coral'] { --boot-accent: #ffab96; }
:root[data-theme='light'][data-accent='coral'] { --boot-accent: #ad3d2a; }
:root[data-accent='red'] { --boot-accent: #ffa9a9; }
:root[data-theme='light'][data-accent='red'] { --boot-accent: #bd2538; }
:root[data-accent='rose'] { --boot-accent: #ffa5cc; }
:root[data-theme='light'][data-accent='rose'] { --boot-accent: #b12565; }
:root[data-accent='fuchsia'] { --boot-accent: #f4a5f3; }
:root[data-theme='light'][data-accent='fuchsia'] { --boot-accent: #a02b99; }
:root[data-accent='violet'] { --boot-accent: #cfb3ff; }
:root[data-theme='light'][data-accent='violet'] { --boot-accent: #793ac4; }
:root[data-accent='indigo'] { --boot-accent: #bcb9ff; }
:root[data-theme='light'][data-accent='indigo'] { --boot-accent: #5044ba; }
:root[data-accent='electric'] { --boot-accent: #aebdff; }
:root[data-theme='light'][data-accent='electric'] { --boot-accent: #3044c5; }
:root[data-accent='blue'] { --boot-accent: #8fc4ff; }
:root[data-theme='light'][data-accent='blue'] { --boot-accent: #1763b4; }
:root[data-accent='sky'] { --boot-accent: #60d1ff; }
:root[data-theme='light'][data-accent='sky'] { --boot-accent: #006995; }
:root[data-accent='cyan'] { --boot-accent: #45e0e5; }
:root[data-theme='light'][data-accent='cyan'] { --boot-accent: #006e74; }
:root[data-accent='emerald'] { --boot-accent: #50e7a0; }
:root[data-theme='light'][data-accent='emerald'] { --boot-accent: #087146; }
:root[data-accent='lime'] { --boot-accent: #b5ed4d; }
:root[data-theme='light'][data-accent='lime'] { --boot-accent: #4a6d00; }
:root[data-accent='copper'] { --boot-accent: #dfb996; }
:root[data-theme='light'][data-accent='copper'] { --boot-accent: #895125; }
:root[data-accent='terracotta'] { --boot-accent: #e3b6a7; }
:root[data-theme='light'][data-accent='terracotta'] { --boot-accent: #984e39; }
:root[data-accent='cocoa'] { --boot-accent: #cbbeb1; }
:root[data-theme='light'][data-accent='cocoa'] { --boot-accent: #745742; }
:root[data-accent='plum'] { --boot-accent: #ddb4d2; }
:root[data-theme='light'][data-accent='plum'] { --boot-accent: #863d73; }
:root[data-accent='lavender'] { --boot-accent: #c3bbe5; }
:root[data-theme='light'][data-accent='lavender'] { --boot-accent: #6a5796; }
:root[data-accent='steel'] { --boot-accent: #b1c2d4; }
:root[data-theme='light'][data-accent='steel'] { --boot-accent: #48617d; }
:root[data-accent='teal'] { --boot-accent: #96cac5; }
:root[data-theme='light'][data-accent='teal'] { --boot-accent: #286c68; }
:root[data-accent='mint'] { --boot-accent: #b0edcf; }
:root[data-theme='light'][data-accent='mint'] { --boot-accent: #386d57; }
:root[data-accent='jade'] { --boot-accent: #aec6af; }
:root[data-theme='light'][data-accent='jade'] { --boot-accent: #486b4a; }
:root[data-accent='olive'] { --boot-accent: #c1c493; }
:root[data-theme='light'][data-accent='olive'] { --boot-accent: #626630; }

/* Fade the sky itself into the existing surface; native status-bar settings stay intact. */
.boot-loader::before,
.boot-loader__cosmos {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(env(safe-area-inset-top, 0px) + 20px), #000 calc(env(safe-area-inset-top, 0px) + 200px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(env(safe-area-inset-top, 0px) + 20px), #000 calc(env(safe-area-inset-top, 0px) + 200px));
}