@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap");

:root {
  --site-shell-bg: #020202;
  --site-shell-border: rgba(255, 255, 255, .075);
  --site-shell-muted: #74747e;
  --site-shell-ease: cubic-bezier(.16, 1, .3, 1);
}

html.site-shell-enabled,
html.site-shell-enabled body { min-height: 100%; }
html.site-shell-enabled body {
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html.site-shell-enabled body > .top-nav,
html.site-shell-enabled body > .hub-tool-nav,
html.site-shell-enabled main.shell > header.top,
html.site-shell-enabled main.shell > header.site-header,
html.site-shell-enabled #main-header,
html.site-shell-enabled body > a.back,
html.site-shell-enabled footer.site-footer,
html.site-shell-enabled body > footer:not(.site-shell-footer) { display: none !important; }

.site-shell-header,
.site-shell-header *,
.site-shell-menu-layer,
.site-shell-menu-layer *,
.site-shell-footer,
.site-shell-footer * { box-sizing: border-box; }
.site-shell-menu-layer { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.2; color: #fff; -webkit-font-smoothing: antialiased; }
.site-shell-menu-layer a { color: inherit; text-decoration: none; }

.site-shell-header {
  position: relative;
  z-index: 1000;
  left: 50%;
  width: 100vw;
  min-height: 76px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 0 0 24px;
  padding: 14px 32px;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--site-shell-border);
  background: rgba(2, 2, 2, .9);
  color: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
  backdrop-filter: blur(18px);
  -webkit-font-smoothing: antialiased;
}
.site-shell-header a { color: inherit; text-decoration: none; }
.site-shell-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #777781 !important;
  font-size: .87rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  transition: color .25s ease;
}
.site-shell-back:hover { color: #fff !important; }
.site-shell-back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s var(--site-shell-ease); }
.site-shell-back:hover svg { transform: translateX(-4px); }
.site-shell-brand { grid-column: 2; justify-self: center; display: grid; justify-items: center; gap: 5px; min-width: 0; }
.site-shell-logo { display: inline-flex; align-items: center; gap: 11px; line-height: 1; transition: transform .3s var(--site-shell-ease); }
.site-shell-logo:hover { transform: scale(1.04); }
.site-shell-logo img { display: block; width: auto; height: 40px; max-height: none; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.site-shell-logo span { color: #fff; font-family: Outfit, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.site-shell-page-label { color: #73737d; font-size: .6rem; font-weight: 780; letter-spacing: .28em; line-height: 1.15; text-align: center; text-transform: uppercase; }
/* Discord button: 3D bevel, glass sheen on hover, press on click (matches the main pages) */
.site-shell-discord {
  --bevel: 4px;
  --bevel-colour: #3139a8;
  position: relative;
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 10px 18px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(145deg, #5865f2, #404eed);
  box-shadow:
    0 var(--bevel) 0 var(--bevel-colour),
    0 calc(var(--bevel) + 3px) 20px rgba(88, 101, 242, .45),
    inset 0 2px 0 rgba(255, 255, 255, .25);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.site-shell-discord::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .15) 55%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.site-shell-discord:hover::before { left: 140%; }
.site-shell-discord:hover {
  background: linear-gradient(145deg, #6974f5, #4f5bf0);
  box-shadow:
    0 var(--bevel) 0 var(--bevel-colour),
    0 calc(var(--bevel) + 5px) 24px rgba(88, 101, 242, .55),
    inset 0 2px 0 rgba(255, 255, 255, .3);
}
.site-shell-discord:active {
  transform: translateY(calc(var(--bevel) - 1px));
  box-shadow:
    0 1px 0 var(--bevel-colour),
    0 2px 8px rgba(88, 101, 242, .4),
    inset 0 2px 0 rgba(255, 255, 255, .2);
}
.site-shell-discord > * { position: relative; z-index: 1; }
.site-shell-discord svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.site-shell-toggle,
.site-shell-scrim,
.site-shell-drawer { display: none; }

/* Footer: matches the homepage footer */
.site-shell-footer {
  position: relative;
  left: 50%;
  width: 100vw;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 32px 0;
  transform: translateX(-50%);
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: rgba(3, 3, 6, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
.site-shell-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}
.site-shell-footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.site-shell-footer-brand img { display: block; width: auto; height: 28px; object-fit: contain; }
.site-shell-footer-brand span { font-family: Outfit, Inter, ui-sans-serif, sans-serif; font-size: 1.125rem; font-weight: 700; letter-spacing: -.025em; }
.site-shell-footer-copy { margin: 0; color: #6b7280; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.site-shell-footer nav { display: flex; align-items: center; gap: 24px; }
.site-shell-footer nav a { color: #9ca3af; font-size: .75rem; font-weight: 500; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; transition: color .2s ease; }
.site-shell-footer nav a:hover { color: #fff; }

@media (max-width: 767px) {
  .site-shell-footer-inner { flex-direction: column; padding: 0 16px; text-align: center; }
}

@media (max-width: 700px) {
  html.site-shell-enabled body.site-shell-menu-open { overflow: hidden !important; }
  .site-shell-header { min-height: 66px; grid-template-columns: 44px 1fr 44px; gap: 10px; margin-bottom: 14px; padding: 11px 14px; }
  .site-shell-back { width: 42px; height: 42px; justify-content: center; border: 1px solid var(--site-shell-border); border-radius: 10px; }
  .site-shell-back span, .site-shell-header > .site-shell-discord { display: none; }
  .site-shell-brand { grid-column: 2; gap: 4px; }
  .site-shell-logo { gap: 8px; }
  .site-shell-logo img { width: auto; height: 32px; }
  .site-shell-logo span { font-size: 1.22rem; }
  .site-shell-page-label { max-width: 175px; overflow: hidden; font-size: .52rem; letter-spacing: .2em; text-overflow: ellipsis; white-space: nowrap; }
  .site-shell-toggle {
    position: relative;
    z-index: 130;
    grid-column: 3;
    justify-self: end;
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--site-shell-border);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
  }
  .site-shell-toggle:hover,
  .site-shell-toggle[aria-expanded="true"] { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
  .site-shell-toggle span { width: 18px; height: 2px; border-radius: 2px; background: #ddd; transition: transform .3s var(--site-shell-ease), opacity .2s ease; }
  .site-shell-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-shell-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-shell-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-shell-scrim {
    position: fixed;
    z-index: 110;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(0,0,0,.62);
    opacity: 0;
    visibility: hidden;
    cursor: default;
    backdrop-filter: blur(0);
    transition: opacity .35s ease, visibility .35s, backdrop-filter .45s ease;
  }
  .site-shell-scrim.open { opacity: 1; visibility: visible; backdrop-filter: blur(5px); }
  .site-shell-drawer {
    position: fixed;
    z-index: 120;
    top: 0;
    right: 0;
    width: min(88vw, 370px);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 92px 18px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,.09);
    background: radial-gradient(circle at 85% 2%, rgba(88,101,242,.16), transparent 18rem), linear-gradient(165deg, #111116 0%, #09090c 52%, #050506 100%);
    box-shadow: -28px 0 70px rgba(0,0,0,.58);
    opacity: 0;
    visibility: hidden;
    transform: translateX(104%);
    transition: transform .5s var(--site-shell-ease), opacity .3s ease, visibility .5s;
  }
  .site-shell-drawer.open { opacity: 1; visibility: visible; transform: translateX(0); }
  .site-shell-drawer-head { padding: 0 8px 22px; border-bottom: 1px solid rgba(255,255,255,.075); }
  .site-shell-drawer-kicker { display: block; margin-bottom: 8px; color: #777782; font-size: .64rem; font-weight: 780; letter-spacing: .2em; text-transform: uppercase; }
  .site-shell-drawer-head > strong { display: block; color: #fff; font-size: 1.65rem; letter-spacing: -.045em; }
  .site-shell-drawer-head p { max-width: 250px; margin: 8px 0 0; color: #777782; font-size: .78rem; line-height: 1.55; }
  .site-shell-drawer-links { display: grid; gap: 8px; margin-top: 20px; }
  .site-shell-drawer-links a { position: relative; display: flex; align-items: center; min-height: 72px; padding: 14px 42px 14px 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: rgba(255,255,255,.025); color: #fff; text-decoration: none; transition: transform .3s var(--site-shell-ease), border-color .25s ease, background .25s ease; }
  .site-shell-drawer-links a::after { content: "\2192"; position: absolute; right: 16px; color: #656571; font-size: 1rem; transition: color .25s ease, transform .3s var(--site-shell-ease); }
  .site-shell-drawer-links a:hover { transform: translateX(-3px); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.055); }
  .site-shell-drawer-links a:hover::after { color: #fff; transform: translateX(3px); }
  .site-shell-drawer-links strong,
  .site-shell-drawer-links small { display: block; }
  .site-shell-drawer-links strong { color: #f2f2f5; font-size: .88rem; font-weight: 690; }
  .site-shell-drawer-links small { margin-top: 5px; color: #6f6f79; font-size: .68rem; }
  .site-shell-drawer .site-shell-mobile-discord { --bevel: 5px; width: 100%; min-height: 48px; margin-top: auto; margin-bottom: 5px; padding: 13px 16px; border-radius: 12px; font-size: 15px; }
  .site-shell-drawer-foot { padding: 15px 4px 0; color: #4f4f58; font-size: .62rem; letter-spacing: .04em; text-align: center; }
  .site-shell-footer { padding: 32px 0 max(32px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .site-shell-header *, .site-shell-footer *, .site-shell-scrim, .site-shell-drawer { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   Space backdrop
   Painted straight from this stylesheet, so it is on screen the
   moment the page appears - nothing waits for a script. A tiny
   blurred copy of the picture is built into this file and shows
   instantly, then the full picture loads on top of it, so there is
   no flash. It is fixed (never scrolls) and uses "cover", which
   crops rather than stretches.
   --------------------------------------------------------------- */
html {
  background-color: #04040a;
  /* Nothing should ever push the page sideways. "clip" does the job without
     breaking sticky headers the way overflow-x: hidden can. */
  overflow-x: clip;
}
/* Pictures never grow past their box, even if a stylesheet is slow to arrive. */
img, svg, video { max-width: 100%; }
body { background-color: transparent !important; background-image: none !important; }
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #04040a;
  background-image:
    linear-gradient(rgba(4, 4, 10, .30), rgba(4, 4, 10, .55)),
    url("/assets/space-bg.webp?v=20260923"),
    url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAgCdASooABcAPrVYpk6nJSOiJWgA4BaJaQAAKUNx6AD+9ZO29lvxj/e6TcQkhkbjEAAA");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (max-width: 820px) {
  /* On a phone the picture sits across the top at its own shape
     (never squashed) and fades into the page colour underneath. */
  html::before {
    background-image:
      linear-gradient(to bottom, rgba(4, 4, 10, .18) 0%, rgba(4, 4, 10, .34) 38%, rgba(4, 4, 10, .9) 64%, #04040a 74%),
      url("/assets/space-bg-sm.webp?v=20260923"),
      url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAgCdASooABcAPrVYpk6nJSOiJWgA4BaJaQAAKUNx6AD+9ZO29lvxj/e6TcQkhkbjEAAA");
    background-size: auto, 100% auto, 100% auto;
    background-position: center, top center, top center;
  }
}