/*
 * Snowpulse documentation theme
 *
 * This file intentionally stays independent of Material template internals:
 * it customizes public theme hooks and the small set of `sp-*` classes used by
 * the documentation homepage. Keep core documentation rendering local and
 * dependency-free so offline SDK copies look the same as the hosted site.
 */

:root {
  --sp-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --sp-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  --sp-navy-950: #030914;
  --sp-navy-900: #06111f;
  --sp-navy-850: #081827;
  --sp-navy-800: #0b2033;
  --sp-navy-700: #12324c;
  --sp-ice-50: #f3fcff;
  --sp-ice-100: #ddf8fd;
  --sp-cyan-300: #67e9f5;
  --sp-cyan-400: #20d8ec;
  --sp-cyan-500: #00bdd7;
  --sp-blue-400: #2aa7ff;
  --sp-blue-500: #157ce4;
  --sp-indigo-500: #4f68ff;

  --sp-radius-sm: 0.55rem;
  --sp-radius-md: 0.9rem;
  --sp-radius-lg: 1.4rem;
  --sp-shadow-sm: 0 0.2rem 0.7rem rgba(4, 24, 42, 0.08);
  --sp-shadow-md: 0 1rem 2.8rem rgba(4, 24, 42, 0.13);
  --sp-shadow-glow: 0 0 3rem rgba(20, 206, 231, 0.22);

  --md-text-font-family: var(--sp-font-sans);
  --md-code-font-family: var(--sp-font-mono);
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #071b2d;
  --md-primary-fg-color--light: #123c5c;
  --md-primary-fg-color--dark: #030914;
  --md-accent-fg-color: #007f9c;
  --md-accent-fg-color--transparent: rgba(0, 127, 156, 0.12);
  --md-default-bg-color: #f7fafc;
  --md-default-fg-color: #152b3d;
  --md-default-fg-color--light: #405b70;
  --md-default-fg-color--lighter: #6b8293;
  --md-default-fg-color--lightest: #dbe5eb;
  --md-code-bg-color: #edf4f7;
  --md-code-fg-color: #123047;
  --sp-surface: rgba(255, 255, 255, 0.88);
  --sp-surface-solid: #ffffff;
  --sp-surface-muted: #f1f7fa;
  --sp-border: rgba(17, 65, 91, 0.14);
  --sp-border-strong: rgba(0, 153, 184, 0.32);
  --sp-link: #006f91;
  --sp-link-hover: #00546f;
  --sp-heading: #071b2d;
  --sp-grid-line: rgba(8, 84, 117, 0.045);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #06111f;
  --md-primary-fg-color--light: #102a42;
  --md-primary-fg-color--dark: #020710;
  --md-accent-fg-color: #58e4f2;
  --md-accent-fg-color--transparent: rgba(88, 228, 242, 0.13);
  --md-default-bg-color: #07111d;
  --md-default-fg-color: #e5f2f7;
  --md-default-fg-color--light: #a8c1ce;
  --md-default-fg-color--lighter: #6e8a9a;
  --md-default-fg-color--lightest: #1c3344;
  --md-code-bg-color: #0b1b2a;
  --md-code-fg-color: #dceff5;
  --sp-surface: rgba(9, 25, 39, 0.86);
  --sp-surface-solid: #0a1927;
  --sp-surface-muted: #0c2031;
  --sp-border: rgba(150, 211, 229, 0.14);
  --sp-border-strong: rgba(45, 218, 238, 0.34);
  --sp-link: #67e9f5;
  --sp-link-hover: #a9f5fb;
  --sp-heading: #f0fbff;
  --sp-grid-line: rgba(89, 212, 235, 0.035);
  --sp-shadow-sm: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.22);
  --sp-shadow-md: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------- */
/* Foundations                                                                */
/* -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body,
input,
button,
textarea,
select {
  font-family: var(--sp-font-sans);
}

body {
  background-color: var(--md-default-bg-color);
  background-image:
    linear-gradient(var(--sp-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sp-grid-line) 1px, transparent 1px),
    radial-gradient(circle at 18% 4%, rgba(21, 162, 215, 0.09), transparent 28rem);
  background-position: center top;
  background-size: 4rem 4rem, 4rem 4rem, auto;
  color: var(--md-default-fg-color);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(21, 188, 215, 0.32);
  color: var(--sp-heading);
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 0.16rem solid var(--sp-cyan-400);
  outline-offset: 0.18rem;
  border-radius: 0.2rem;
}

.md-grid {
  max-width: 90rem;
}

.md-main__inner {
  margin-top: 1.15rem;
}

.md-content__inner {
  padding-bottom: 4rem;
}

.md-content__inner::before {
  height: 0;
}

/* -------------------------------------------------------------------------- */
/* Header, tabs, navigation, and search                                       */
/* -------------------------------------------------------------------------- */

.md-header {
  background:
    radial-gradient(circle at 75% -140%, rgba(34, 216, 236, 0.4), transparent 45%),
    linear-gradient(105deg, var(--sp-navy-950), #08243c 62%, #063f5a);
  box-shadow: 0 0.35rem 1.4rem rgba(0, 7, 18, 0.25);
}

.md-header__inner {
  min-height: 3.2rem;
}

.md-header__button.md-logo {
  margin: 0.2rem 0.35rem 0.2rem 0;
  padding: 0.25rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  filter: drop-shadow(0 0.15rem 0.5rem rgba(27, 220, 239, 0.3));
  height: 2rem;
  width: 2rem;
}

.md-header__title {
  font-weight: 760;
  letter-spacing: -0.025em;
}

.md-header__topic:first-child {
  font-weight: inherit;
}

.md-tabs {
  background: rgba(4, 16, 29, 0.94);
  border-top: 1px solid rgba(116, 226, 241, 0.09);
  box-shadow: 0 0.35rem 1.2rem rgba(0, 7, 18, 0.14);
}

.md-tabs__link {
  font-weight: 650;
  letter-spacing: 0.015em;
  opacity: 0.72;
  transition: color 160ms ease, opacity 160ms ease;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover,
.md-tabs__link:focus-visible {
  color: var(--sp-cyan-300);
  opacity: 1;
}

.md-search__form {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.md-search__form:hover,
.md-search__input:focus-within {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(95, 229, 244, 0.36);
}

.md-search__output {
  border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md);
}

.md-search-result__meta {
  background-color: var(--sp-surface-muted);
}

.md-search-result__link:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-nav__title,
.md-nav__link {
  letter-spacing: -0.005em;
}

.md-nav__title {
  color: var(--sp-heading);
  font-weight: 760;
}

.md-nav__item .md-nav__link--active {
  color: var(--sp-link);
  font-weight: 720;
}

.md-nav__link:hover,
.md-nav__link:focus-visible {
  color: var(--sp-link-hover);
}

.md-sidebar--secondary .md-nav__link {
  border-left: 0.1rem solid transparent;
  padding-left: 0.65rem;
}

.md-sidebar--secondary .md-nav__link--active {
  border-left-color: var(--sp-cyan-400);
}

.md-nav__source {
  background-color: #061827;
}

/* -------------------------------------------------------------------------- */
/* Documentation typography and content primitives                           */
/* -------------------------------------------------------------------------- */

.md-typeset {
  color: var(--md-default-fg-color);
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--sp-heading);
  font-weight: 760;
  letter-spacing: -0.028em;
  line-height: 1.16;
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  margin-bottom: 1.15rem;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--sp-border);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  margin-top: 2.8rem;
  padding-bottom: 0.55rem;
}

.md-typeset h2::after {
  background: linear-gradient(90deg, var(--sp-cyan-400), var(--sp-blue-500));
  border-radius: 99px;
  content: "";
  display: block;
  height: 0.16rem;
  margin-bottom: -0.64rem;
  margin-top: 0.52rem;
  width: 3.2rem;
}

.md-typeset h3 {
  font-size: 1.15rem;
  margin-top: 2rem;
}

.md-typeset p,
.md-typeset li {
  text-wrap: pretty;
}

.md-typeset a {
  color: var(--sp-link);
  font-weight: 580;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.md-typeset a:hover {
  color: var(--sp-link-hover);
  text-decoration-color: currentColor;
}

.md-typeset strong {
  color: var(--sp-heading);
  font-weight: 720;
}

.md-typeset hr {
  border-bottom-color: var(--sp-border);
  margin-block: 2.6rem;
}

.md-typeset blockquote {
  background: linear-gradient(90deg, var(--md-accent-fg-color--transparent), transparent);
  border-left: 0.2rem solid var(--sp-cyan-400);
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
  color: var(--md-default-fg-color--light);
  margin-inline: 0;
  padding: 0.75rem 1rem;
}

.md-typeset kbd {
  background-color: var(--sp-surface-solid);
  border-color: var(--sp-border);
  border-radius: 0.35rem;
  box-shadow: 0 0.12rem 0 var(--sp-border);
}

.md-typeset :not(pre) > code {
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--sp-border);
  border-radius: 0.32rem;
  color: var(--md-code-fg-color);
  font-size: 0.84em;
  padding: 0.08em 0.3em;
  white-space: break-spaces;
}

.md-typeset pre {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-sm);
  max-width: 100%;
  overflow-x: auto;
}

.md-typeset pre > code {
  font-family: var(--sp-font-mono);
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  scrollbar-width: thin;
}

.md-typeset .highlight span.filename {
  background-color: var(--sp-surface-muted);
  border: 1px solid var(--sp-border);
  border-bottom: 0;
  border-radius: var(--sp-radius-md) var(--sp-radius-md) 0 0;
  color: var(--md-default-fg-color--light);
  font-family: var(--sp-font-mono);
}

.md-typeset .highlight span.filename + pre {
  border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md);
}

.md-code__button,
.md-clipboard {
  color: var(--md-default-fg-color--light);
}

.md-code__button:hover,
.md-code__button:focus-visible,
.md-clipboard:hover,
.md-clipboard:focus {
  color: var(--sp-cyan-500);
}

/* Horizontally scroll wide data rather than compressing it beyond legibility. */
.md-typeset__scrollwrap {
  margin-inline: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  scrollbar-width: thin;
}

.md-typeset__table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.md-typeset table:not([class]) {
  background-color: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-collapse: separate;
  border-radius: var(--sp-radius-md);
  border-spacing: 0;
  box-shadow: var(--sp-shadow-sm);
  margin-inline: 0;
  min-width: min(38rem, 100%);
  overflow: hidden;
  width: 100%;
}

.md-typeset table:not([class]) th {
  background: linear-gradient(180deg, var(--sp-surface-muted), var(--sp-surface-solid));
  color: var(--sp-heading);
  font-size: 0.74rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-bottom-color: var(--sp-border);
  border-left-color: var(--sp-border);
  padding: 0.8rem 0.9rem;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:hover td {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .admonition,
.md-typeset details {
  background-color: var(--sp-surface);
  border-color: var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-sm);
  overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
  border-bottom: 1px solid var(--sp-border);
  font-weight: 700;
}

.md-typeset .tabbed-labels {
  border-bottom-color: var(--sp-border);
}

.md-typeset .tabbed-labels > label {
  font-weight: 650;
}

.md-typeset .tabbed-labels > label:hover,
.md-typeset .tabbed-labels > label:focus-visible,
.md-typeset .tabbed-labels > label[for]:has(+ input:checked) {
  color: var(--sp-link);
}

.md-typeset .headerlink {
  color: var(--sp-cyan-500);
}

/* -------------------------------------------------------------------------- */
/* Snowpulse homepage                                                         */
/* -------------------------------------------------------------------------- */

.sp-hero {
  background:
    radial-gradient(circle at 88% 22%, rgba(51, 224, 241, 0.2), transparent 26%),
    radial-gradient(circle at 72% 115%, rgba(55, 91, 255, 0.28), transparent 40%),
    linear-gradient(125deg, #04101d 2%, #08283f 56%, #064762 100%);
  border: 1px solid rgba(100, 232, 247, 0.21);
  border-radius: clamp(1.1rem, 2.5vw, 1.8rem);
  box-shadow: 0 1.7rem 4.5rem rgba(3, 17, 32, 0.25), var(--sp-shadow-glow);
  color: #dff8fc;
  isolation: isolate;
  margin: 0 0 clamp(2.6rem, 6vw, 5rem);
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.8rem) clamp(1.4rem, 6vw, 5rem);
  padding-right: clamp(1.4rem, 29vw, 20rem);
  position: relative;
}

.sp-hero::before {
  background-image:
    linear-gradient(rgba(92, 227, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 227, 243, 0.06) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  content: "";
  inset: 0;
  -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, 0.9), transparent 80%);
  mask-image: linear-gradient(115deg, rgba(0, 0, 0, 0.9), transparent 80%);
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.sp-hero::after {
  aspect-ratio: 1;
  background:
    radial-gradient(circle, transparent 0 24%, rgba(71, 224, 241, 0.18) 24.3% 24.9%, transparent 25.2% 39%, rgba(71, 224, 241, 0.1) 39.3% 40%, transparent 40.3%),
    url("../assets/images/snowpulse-mark.png") center / 46% auto no-repeat;
  content: "";
  filter: drop-shadow(0 0 1.8rem rgba(25, 217, 239, 0.28));
  opacity: 0.95;
  pointer-events: none;
  position: absolute;
  right: clamp(-5rem, -3vw, -1rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(20rem, 39vw, 31rem);
  z-index: -1;
}

.sp-hero > * {
  position: relative;
  z-index: 1;
}

.md-typeset .sp-hero .sp-eyebrow {
  align-items: center;
  color: var(--sp-cyan-300);
  display: flex;
  font-size: 0.69rem;
  font-weight: 780;
  gap: 0.55rem;
  letter-spacing: 0.15em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.sp-eyebrow::before {
  background: linear-gradient(90deg, var(--sp-cyan-400), var(--sp-blue-400));
  border-radius: 99px;
  box-shadow: 0 0 0.8rem rgba(32, 216, 236, 0.65);
  content: "";
  height: 0.42rem;
  width: 0.42rem;
}

.md-typeset .sp-hero h1 {
  color: #f4fdff;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  letter-spacing: -0.058em;
  line-height: 0.98;
  margin: 0;
  max-width: 12ch;
  overflow-wrap: normal;
  text-shadow: 0 0.2rem 1.8rem rgba(0, 0, 0, 0.24);
  word-break: normal;
}

.md-typeset .sp-hero .sp-hero__lede {
  color: #b9dbe5;
  font-size: clamp(0.98rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  margin: 1.35rem 0 0;
  max-width: 41rem;
}

.sp-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.65rem;
}

.md-typeset .sp-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(187, 239, 247, 0.32);
  border-radius: 0.7rem;
  color: #e9fbfe;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 720;
  gap: 0.45rem;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1.05rem;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.md-typeset .sp-button:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(187, 239, 247, 0.58);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-0.12rem);
}

.md-typeset .sp-button--primary {
  background: linear-gradient(120deg, var(--sp-cyan-400), #27bdf2 52%, #5b78ff);
  border-color: transparent;
  box-shadow: 0 0.6rem 1.7rem rgba(8, 190, 219, 0.24);
  color: #03131f;
}

.md-typeset .sp-button--primary:hover {
  background: linear-gradient(120deg, #7af2fb, #58d3fc 52%, #8396ff);
  border-color: transparent;
  box-shadow: 0 0.8rem 2rem rgba(8, 190, 219, 0.34);
  color: #02101a;
}

.sp-platforms {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.4rem;
}

.md-typeset .sp-platform {
  background: rgba(0, 8, 17, 0.2);
  border: 1px solid rgba(173, 232, 241, 0.16);
  border-radius: 99px;
  color: #aacdd7;
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 680;
  letter-spacing: 0.045em;
  padding: 0.25rem 0.58rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.md-typeset .sp-platform:hover {
  background: rgba(74, 219, 237, 0.12);
  border-color: rgba(84, 229, 244, 0.38);
  color: #e6fcff;
  text-decoration: none;
}

.sp-feature-grid,
.sp-doc-grid {
  margin-block: 1.3rem 3.4rem;
}

.md-typeset .grid.cards > ul {
  gap: 1rem;
}

.md-typeset .grid.cards > ul > li {
  background:
    linear-gradient(135deg, rgba(29, 207, 229, 0.055), transparent 52%),
    var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-sm);
  margin: 0;
  overflow: hidden;
  padding: 1.25rem;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.md-typeset .grid.cards > ul > li::before {
  background: linear-gradient(180deg, var(--sp-cyan-400), var(--sp-blue-500));
  border-radius: 0 99px 99px 0;
  content: "";
  height: 2.8rem;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 1.15rem;
  transition: opacity 180ms ease;
  width: 0.15rem;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--sp-border-strong);
  box-shadow: var(--sp-shadow-md);
  transform: translateY(-0.18rem);
}

.md-typeset .grid.cards > ul > li:hover::before {
  opacity: 1;
}

.md-typeset .grid.cards > ul > li > :first-child {
  margin-top: 0;
}

.md-typeset .grid.cards > ul > li > :last-child {
  margin-bottom: 0;
}

.md-typeset .grid.cards > ul > li > p > strong:first-child,
.md-typeset .grid.cards > ul > li > strong:first-child {
  color: var(--sp-heading);
  font-size: 0.98rem;
  letter-spacing: -0.015em;
}

.md-typeset .sp-feature-grid > ul > li {
  min-height: 10.25rem;
}

.sp-feature__number {
  color: var(--sp-link);
  display: block;
  font-family: var(--sp-font-mono);
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  margin-bottom: 1.2rem;
}

.md-typeset .sp-doc-grid > ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.md-typeset .sp-doc-grid > ul > li {
  min-height: 8rem;
}

.md-typeset .sp-doc-grid a,
.md-typeset .sp-feature-grid a {
  font-weight: 680;
}

.sp-callout {
  background:
    radial-gradient(circle at 95% 0, rgba(57, 221, 239, 0.18), transparent 38%),
    linear-gradient(120deg, var(--sp-navy-900), #0a3650);
  border: 1px solid rgba(55, 211, 231, 0.25);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-md);
  color: #bcdce5;
  margin-top: 3.5rem;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  position: relative;
}

.sp-callout::before {
  background-image:
    linear-gradient(rgba(77, 222, 238, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 222, 238, 0.05) 1px, transparent 1px);
  background-size: 1.7rem 1.7rem;
  content: "";
  inset: 0;
  -webkit-mask-image: linear-gradient(110deg, transparent 20%, #000);
  mask-image: linear-gradient(110deg, transparent 20%, #000);
  pointer-events: none;
  position: absolute;
}

.sp-callout > * {
  position: relative;
}

.md-typeset .sp-callout h2,
.md-typeset .sp-callout h3 {
  border: 0;
  color: #f1fdff;
  margin-top: 0;
}

.md-typeset .sp-callout h2::after {
  display: none;
}

.md-typeset .sp-callout .sp-callout__link {
  color: var(--sp-cyan-300);
  display: inline-flex;
  font-weight: 720;
  margin-top: 0.5rem;
}

.md-typeset .sp-callout .sp-callout__link:hover {
  color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Footer and utility surfaces                                                */
/* -------------------------------------------------------------------------- */

.md-footer {
  background-color: var(--sp-navy-950);
  border-top: 1px solid rgba(111, 221, 236, 0.12);
}

.md-footer-meta {
  background-color: #020711;
}

.md-footer__link:hover {
  color: var(--sp-cyan-300);
}

.md-top {
  background: linear-gradient(120deg, #08324b, #07556b);
  border: 1px solid rgba(116, 230, 243, 0.24);
  border-radius: 99px;
  box-shadow: var(--sp-shadow-md);
  color: #effdff;
}

.md-top:hover,
.md-top:focus {
  background: linear-gradient(120deg, #0b415e, #08758a);
}

/* -------------------------------------------------------------------------- */
/* Responsive and accessibility behavior                                     */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background:
      radial-gradient(circle at 90% -30%, rgba(32, 216, 236, 0.32), transparent 52%),
      linear-gradient(120deg, var(--sp-navy-950), #09334c);
    color: #effcff;
  }

  /* Material raises the primary navigation's active-label specificity on
     compact layouts; keep that label readable in both Snowpulse palettes. */
  .md-nav--primary .md-nav__item .md-nav__link.md-nav__link--active {
    color: var(--sp-link);
  }
}

@media screen and (max-width: 60em) {
  .sp-hero {
    padding-right: clamp(1.4rem, 7vw, 4rem);
  }

  .sp-hero::after {
    opacity: 0.2;
    right: -7rem;
    width: 28rem;
  }

  .md-typeset .sp-hero h1,
  .md-typeset .sp-hero .sp-hero__lede {
    max-width: 42rem;
  }
}

@media screen and (max-width: 44.984375em) {
  body {
    background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, auto;
  }

  .md-main__inner {
    margin-top: 0.55rem;
  }

  .md-typeset {
    font-size: 0.78rem;
  }

  .md-typeset h1 {
    font-size: clamp(1.9rem, 10vw, 2.7rem);
  }

  .sp-hero {
    border-radius: 1rem;
    margin-inline: -0.35rem;
    padding: 2rem 1.25rem;
  }

  .md-typeset .sp-hero h1 {
    font-size: clamp(2.25rem, 14vw, 3.4rem);
    max-width: 9ch;
  }

  .sp-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .md-typeset .sp-button {
    width: 100%;
  }

  .md-typeset .grid.cards > ul {
    gap: 0.75rem;
  }

  .md-typeset .grid.cards > ul > li {
    padding: 1rem;
  }

  .md-typeset table:not([class]) {
    min-width: 32rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sp-hero::after {
    animation: sp-float 8s ease-in-out infinite;
  }

  .sp-eyebrow::before {
    animation: sp-pulse 2.8s ease-in-out infinite;
  }

  @keyframes sp-float {
    0%,
    100% {
      transform: translateY(-50%);
    }
    50% {
      transform: translateY(calc(-50% - 0.45rem));
    }
  }

  @keyframes sp-pulse {
    0%,
    100% {
      box-shadow: 0 0 0.35rem rgba(32, 216, 236, 0.45);
      opacity: 0.82;
    }
    50% {
      box-shadow: 0 0 1rem rgba(32, 216, 236, 0.8);
      opacity: 1;
    }
  }
}

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

@media (forced-colors: active) {
  .sp-hero,
  .sp-callout,
  .md-typeset .grid.cards > ul > li,
  .md-typeset table:not([class]),
  .md-typeset pre {
    border: 1px solid CanvasText;
  }

  .sp-hero::before,
  .sp-hero::after,
  .sp-callout::before {
    display: none;
  }

  .md-typeset .sp-button,
  .md-typeset .sp-platform {
    border: 1px solid LinkText;
  }
}

@media print {
  body {
    background: #ffffff;
  }

  .sp-hero,
  .sp-callout {
    background: #ffffff;
    border: 1px solid #aac0cb;
    box-shadow: none;
    color: #173246;
  }

  .sp-hero::before,
  .sp-hero::after,
  .sp-callout::before {
    display: none;
  }

  .md-typeset .sp-hero h1,
  .md-typeset .sp-callout h2,
  .md-typeset .sp-callout h3 {
    color: #071b2d;
  }

  .md-typeset .grid.cards > ul > li {
    break-inside: avoid;
    box-shadow: none;
  }
}