:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light dark;
  --color-text: light-dark(#1f2328, #e6edf3);
  --color-text-muted: light-dark(#57606a, #9da7b3);
  --color-surface: light-dark(#ffffff, #0d1117);
  --color-border: light-dark(#d0d7de, #30363d);
  --color-border-strong: light-dark(#8a949f, #58606b);
  --color-brand: light-dark(#0969da, #58a6ff);
  --color-brand-strong: light-dark(#0550ae, #79c0ff);
  --color-focus: light-dark(#0969da, #79c0ff);
  --color-on-action: light-dark(#ffffff, #0d1117);
  --color-danger: light-dark(#b42318, #ff7b72);
  --color-danger-strong: light-dark(#912018, #ffa198);
  --color-on-danger: light-dark(#ffffff, #0d1117);
  --color-warning: light-dark(#b36b00, #d29922);
  --color-warning-strong: light-dark(#8c5300, #f2cc60);
  --color-on-warning: light-dark(#ffffff, #0d1117);
  --color-success: light-dark(#1a7f37, #3fb950);
  --color-success-strong: light-dark(#116329, #56d364);
  --color-on-success: light-dark(#ffffff, #0d1117);
  --color-page-background: light-dark(#f0f6fd, #121a25);

  --color-surface-success: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  --color-border-success: color-mix(in srgb, var(--color-success) 40%, var(--color-border));

  --color-surface-warning: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  --color-border-warning: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));

  --color-surface-danger: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  --color-border-danger: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));

  --color-shadow: light-dark(rgb(15 23 42 / 0.12), rgb(0 0 0 / 0.45));
  --color-shadow-strong: light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.55));
  --shadow-1: 0 1px 2px var(--color-shadow);
  --shadow-2: 0 8px 24px var(--color-shadow-strong);

  --selection-background: color-mix(in srgb, var(--color-brand) 30%, transparent);
  --color-surface-alt: color-mix(in srgb, var(--color-brand) 14%, transparent);
  --color-button-secondary-background: var(--color-page-background);
  --color-button-secondary-background-hover: var(--color-surface);
  --color-button-secondary-border: var(--color-border);
  --color-button-secondary-border-hover: var(--color-border-strong);
  --color-button-secondary-text: var(--color-text);
  --overlay-background: color-mix(in srgb, var(--color-surface) 90%, transparent);

  --color-loading-skeleton-base: var(--color-surface-alt);
  --color-loading-skeleton-highlight: color-mix(in srgb,
      var(--color-text-muted) 16%,
      var(--color-surface-alt));
  --color-loading-sweep: color-mix(in srgb, var(--color-brand) 14%, transparent);
  --color-loading-spinner-track: color-mix(in srgb, var(--color-brand) 25%, transparent);

  --text-xs: 0.75rem;
  --text-s: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-m: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  --h1: clamp(1.8rem, 1.56rem + 1.15vw, 2.58rem);
  --h2: clamp(1.6rem, 1.41rem + 0.84vw, 2.14rem);
  --h3: clamp(1.42rem, 1.29rem + 0.6vw, 1.8rem);
  --h4: clamp(1.26rem, 1.17rem + 0.44vw, 1.54rem);

  --h1-compact: clamp(1.5rem, 1.35rem + 0.7vw, 1.8rem);
  --h2-compact: clamp(1.35rem, 1.2rem + 0.55vw, 1.6rem);
  --h3-compact: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --h4-compact: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);

  --h3-size-s: 1.3rem;
  --h3-line-height-s: 1.2;

  --heading-font-family: var(--font-brand);
  --heading-line-height: calc(4px + 2ex);
  --heading-font-weight: 650;
  --heading-text-wrap: balance;

  --text-font-family: var(--font-ui);
  --text-line-height: calc(8px + 2ex);
  --text-font-weight: 400;
  --text-text-wrap: pretty;
  --text-max-width: 66ch;

  --space-compact: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
  --space-layout: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --space-section: 3rem;

  --control-min-block-size: 2.75rem;
  --control-min-block-size-compact: 2.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.375rem;
  --space-s: 0.625rem;
  --button-content-gap: var(--space-xs);
  --button-icon-gap: 0.5em;
  --button-icon-size: 1em;

  --label-gap: var(--space-2xs);
  --label-padding-block: 0.25rem;
  --label-padding-inline: 0.5rem;
  --label-font-size: var(--text-s);
  --label-line-height: 1;
  --label-icon-size: 0.875rem;

  --brand-logo-size-xs: 9rem;
  --brand-logo-size-sm: 12rem;
  --brand-logo-size-md: 16rem;
  --brand-logo-size-lg: 20rem;

  --tracking-support: 0.02em;

  --content-width-xl: 72rem;
  --content-width-lg-2: 48rem;
  --content-width-lg: 42rem;
  --content-width-md-2: 36rem;
  --content-width-md: 34rem;
  --content-width-sm-2: 28rem;
  --content-width-sm: 22rem;

  --content-width-max-xl: min(100%, var(--content-width-xl));
  --content-width-max-lg-2: min(100%, var(--content-width-lg-2));
  --content-width-max-lg: min(100%, var(--content-width-lg));
  --content-width-max-md-2: min(100%, var(--content-width-md-2));
  --content-width-max-md: min(100%, var(--content-width-md));
  --content-width-max-sm-2: min(100%, var(--content-width-sm-2));
  --content-width-max-sm: min(100%, var(--content-width-sm));

  --page-gutter: clamp(1.75rem, 1.25rem + 1.5vw, 3rem);

  --space-loading-stack: var(--space-s);
  --size-loading-line: 0.875rem;
  --size-loading-mark: 3rem;
  --size-loading-spinner: 2rem;
  --size-loading-ring-stroke: 2px;
  --opacity-loading-idle: 0.15;
  --angle-loading-sheen: 110deg;

  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-pill: 999rem;

  --layer-overlay: 40;
  --overlay-anchor-gap: var(--space-2xs);
  --overlay-padding: 0.75rem;
  --overlay-radius: var(--radius-m);
  --overlay-border: 1px solid var(--color-border);
  --overlay-shadow: var(--shadow-2);
  --overlay-edge-offset: var(--page-gutter);

  --focus-ring-width: 2px;
  --focus-ring-style: solid;
  --focus-ring-offset: 2px;

  --motion-duration-fast: 160ms;
  --motion-duration-normal: 220ms;
  --motion-duration-slow: 320ms;
  --motion-ease-standard: ease;

  --motion-duration-loading-spin: 900ms;
  --motion-duration-loading-shimmer: 1100ms;
  --motion-duration-loading-sweep: 1100ms;
  --motion-duration-loading-dots: 1200ms;
  --motion-delay-loading-dot-step: 200ms;
}

:root[data-color-scheme="dark"] {
  color-scheme: dark;
}

:root[data-color-scheme="light"] {
  color-scheme: light;
}
:root {
  
  --color-brand: light-dark(#4A7C59, #88B79A);
  
  --color-brand-strong: light-dark(#375E43, #A4CDB3);
  
  --color-focus: light-dark(#4A7C59, #A4CDB3);
  
  --color-on-action: light-dark(#ffffff, #0d1117);

  --color-page-background: light-dark(#f4f7f5, #141b1f);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-root, 100%);
}

::selection {
  background-color: var(--selection-background);
}

body {
  background-color: var(--color-page-background);
  margin: 0;
  min-block-size: 100dvh;
  padding: var(--page-gutter);
  color: var(--color-text);
  font-family: var(--text-font-family);
  font-size: var(--text-m);
  font-weight: var(--text-font-weight);
  line-height: var(--text-line-height);
  text-wrap: var(--text-text-wrap);
  --shell-content-width: var(--content-width-max-xl);
}

body> :is(header, main, footer, section) {
  inline-size: var(--shell-content-width);
  margin-inline: auto;
}

body> :is(header, main, footer, section)~ :is(header, main, footer, section) {
  margin-block-start: var(--space-compact);
}

main {
  display: grid;
  gap: var(--space-section);
}

:where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure, pre, table, form, fieldset, hr, section, legend) {
  margin: 0;
  padding: 0;
}

:where(h1, h2, h3, h4) {
  color: var(--color-text);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  text-wrap: var(--heading-text-wrap);
}

@supports (text-box: trim-both cap alphabetic) {
  :where(h1, h2, h3, h4) {
    text-box: trim-both cap alphabetic;
  }
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

:is(svg.icon) {
  block-size: 1rem;
  inline-size: 1rem;
  fill: currentColor;
}

:where(main, section, article, aside)>header {
  display: grid;
  gap: var(--space-compact);
}

:where(p, dt, dd, blockquote, figcaption) {
  max-inline-size: var(--text-max-width);
}

:where(p, dt, dd, blockquote, figcaption, li, a, span) {
  overflow-wrap: anywhere;
}

:where(ul, ol) {
  padding-inline-start: 1em;
}

:where(ul, ol) :where(ul, ol) {
  margin-block-start: 0.5rem;
}

:where(time) {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

:where(code):not(pre code) {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--text-s);
  padding: 0.08em 0.35em;
}

nav :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

form,
section {
  display: grid;
  gap: var(--space-compact);
}

form[hidden],
section[hidden],
button[hidden] {
  display: none;
}

form :where(button, input:is([type="button"], [type="submit"], [type="reset"])) {
  justify-self: start;
}

:where(input:not([type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="color"],
    [type="file"],
    [type="image"]),
  select,
  textarea) {
  inline-size: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  color: var(--color-text);
  font: inherit;
  line-height: 1.35;
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
}

textarea {
  min-block-size: 8rem;
  resize: vertical;
}

:where(input:not([type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="color"],
    [type="file"],
    [type="image"]),
  textarea)::placeholder {
  color: var(--color-text-muted);
}

:where(input:not([type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="color"],
    [type="file"],
    [type="image"]),
  select,
  textarea):focus-visible {
  border-color: var(--color-brand);
}

table {
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  border-spacing: 0;
  inline-size: 100%;
}

table>caption {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: 600;
  margin-block-end: var(--space-2xs);
  text-align: start;
}

thead {
  background-color: var(--color-surface-alt);
}

thead :where(th, td) {
  border-block-end-color: var(--color-text);
  font-weight: 600;
  vertical-align: bottom;
}

th,
td {
  border-block-end: 1px solid var(--color-border);
  padding-block: 0.5rem;
  padding-inline: 0.5rem;
  text-align: left;
  vertical-align: top;
}

tr:last-child> :where(th, td) {
  border-block-end: 0;
}

@supports (text-box: trim-both cap alphabetic) {
  :where(th) {
    text-box: trim-both cap alphabetic;
  }
}

label {
  color: var(--color-text);
  cursor: pointer;
  display: inline-block;
  font-size: var(--text-s);
  font-weight: 600;
}

:is(label:has(> input:is([type="checkbox"], [type="radio"]))) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

:where(input:not([type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="color"],
    [type="file"],
    [type="image"]),
  select,
  textarea):is([aria-invalid="true"], :user-invalid) {
  border-color: var(--color-danger);
}

:where(input:not([type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="color"],
    [type="file"],
    [type="image"]),
  select,
  textarea):disabled {
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter) {
  accent-color: var(--color-brand);
}

:where(input[type="checkbox"], input[type="radio"]) {
  block-size: 1rem;
  inline-size: 1rem;
  margin: 0;
  min-inline-size: 1rem;
}

:where(a[href]:has(> img:only-child),
  a[href]:has(> picture:only-child),
  a[href]:has(> svg:only-child)) {
  text-decoration: none;
}

:where(a[href]) {
  color: var(--color-brand);
  text-decoration-color: currentColor;
  text-decoration-line: underline;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-thickness var(--motion-duration-fast) var(--motion-ease-standard);
}

:where(a[href]):visited {
  color: var(--color-brand-strong);
}

:where(a[href]):is(:hover, :focus-visible) {
  color: var(--color-brand-strong);
  text-decoration-thickness: 0.12em;
}

:where(a[href]):active {
  color: var(--color-brand-strong);
}

:where(a[href][target="_blank"])::after {
  color: currentColor;
  content: "\2197";
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
  margin-inline-start: 0.2em;
  text-decoration: none;
  transform: translateY(-0.05em);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-compact);
  border: 1px solid var(--color-border);
  min-inline-size: 0;
  padding: 0.75rem;
}

fieldset>label:not(:has(> input:is([type="checkbox"], [type="radio"]))) {
  flex: 1 1 100%;
}

legend {
  color: var(--color-text);
  padding-inline: var(--space-2xs);
}

:where(a[href],
  area[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [contenteditable="true"]):focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

summary {
  cursor: pointer;
}

@keyframes details-smooth-close {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

details.is-closing summary~* {
  animation: details-smooth-close 0.25s ease-out forwards;
}

* {
  scrollbar-color: var(--color-brand) var(--color-surface-alt);
}

*::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-brand);
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background-color: var(--color-brand-strong);
}

*::-webkit-scrollbar-corner {
  background: var(--color-surface-alt);
}

@media (forced-colors: active) {

  :where(a[href],
    area[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"]),
    [contenteditable="true"]):focus-visible {
    outline-color: Highlight;
  }

  :where(input:not([type="hidden"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="color"],
      [type="file"],
      [type="image"]),
    select,
    textarea) {
    border-color: ButtonText;
    box-shadow: none;
  }

  :where(button,
    input:is([type="button"], [type="submit"], [type="reset"])) {
    border-color: ButtonText;
    box-shadow: none;
  }

  * {
    scrollbar-color: auto;
  }
}
:root[data-font-size="100"] {
  --font-size-root: 100%;
}

:root[data-font-size="110"] {
  --font-size-root: 110%;
}

:root[data-font-size="125"] {
  --font-size-root: 125%;
}

body[data-shell-variant="max-sm"] {
  --shell-content-width: var(--content-width-max-sm);
}

body[data-shell-variant="max-lg"] {
  --shell-content-width: var(--content-width-max-lg);
}

body[data-shell-variant] {
  --h1: var(--h1-compact);
  --h2: var(--h2-compact);
  --h3: var(--h3-compact);
  --h4: var(--h4-compact);
}

body[data-shell-variant]>header.brand-header>a {
  justify-self: center;
}

body[data-shell-variant]>header.brand-header {
  justify-items: center;
  text-align: center;
}

body[data-v-align="center"] {
  display: grid;
  align-content: center;
  align-content: safe center;
}

@media (max-height: 42rem) {
  body[data-v-align="center"] {
    align-content: start;
  }
}

[data-layout="key-value"] {
  container-type: inline-size;
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(auto, max-content) minmax(0, 1fr);
  margin-block-start: var(--space-s);
  line-height: 1.6;
  font-size: var(--text-s);
}

[data-layout="key-value"]>div {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
}

@container (min-width: 18rem) {
  [data-layout="key-value"]>div {
    grid-template-columns: subgrid;
  }
}

[data-layout="key-value"] dt {
  color: var(--color-text-muted);
}

[data-layout="key-value"] dd {
  margin-inline-start: 0;
}

[data-width="max-xl"] {
  max-inline-size: var(--content-width-max-xl);
}

[data-width="max-lg-2"] {
  max-inline-size: var(--content-width-max-lg-2);
}

[data-width="max-lg"] {
  max-inline-size: var(--content-width-max-lg);
}

[data-width="max-md-2"] {
  max-inline-size: var(--content-width-max-md-2);
}

[data-width="max-md"] {
  max-inline-size: var(--content-width-max-md);
}

[data-width="max-sm-2"] {
  max-inline-size: var(--content-width-max-sm-2);
}

[data-width="max-sm"] {
  max-inline-size: var(--content-width-max-sm);
}

[data-stack="compact-s"] {
  display: grid;
  gap: var(--space-s);
}

[data-stack="compact-s"] p {
  line-height: 1.2;
}

[data-stack="compact"] {
  display: grid;
  gap: var(--space-compact);
}

[data-stack="section"] {
  display: grid;
  gap: var(--space-section);
}

aside:not([data-aside-plain]) {
  display: grid;
  gap: var(--space-compact);
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: var(--space-compact);
}

:is(aside:not([data-aside-plain]), .aside) :where(h2, h3, h4) {
  font-size: var(--text-m);
}

:is(aside:not([data-aside-plain]), .aside) :where(p, li, dt, dd) {
  font-size: var(--text-s);
}

:is(aside:not([data-aside-plain]), .aside) :where(ul, ol) {
  padding-inline-start: 1.75em;
}

:is(aside:not([data-aside-plain])) :where(h2, h3, h4) {
  letter-spacing: var(--tracking-support);
}

:is(aside:not([data-aside-plain])) :where(p, li, dt, dd) {
  color: var(--color-text-muted);
}

[data-standout-icon] {
  inline-size: max-content;
  display: flex;
  background-color: var(--color-surface-alt);
  padding: var(--space-xs);
  border-radius: var(--radius-s);
  flex-shrink: 0;
}

[data-standout-icon] svg.icon {
  fill: var(--color-brand-strong);
  color: var(--color-brand-strong);
}

[data-surface="panel"] {
  --surface-space: var(--space-compact);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--surface-space);
}

section[data-surface="panel"] {
  gap: var(--surface-space);
}

[data-surface="well"] {
  --surface-space: var(--space-compact);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--surface-space);
  display: grid;
  gap: var(--space-s);
}

[data-surface="brand"] {
  --surface-space: var(--space-compact);
  background-color: var(--color-brand);
  color: var(--color-on-action);
  border: 1px solid var(--color-brand-strong);
  border-radius: var(--radius-m);
  padding: var(--surface-space);
  display: grid;
  gap: var(--space-s);
}

[data-has-aside="true"] {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

[data-has-aside="true"]>section {
  flex: 2 1 22rem;
  min-inline-size: 0;
}

[data-has-aside="true"]>aside {
  flex: 1 0 14rem;
}

[data-widget="summary"] {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-compact);
  display: grid;
  gap: var(--space-s);
}

[data-widget="summary"] h2 {
  font-size: var(--text-m);
  border-block-end: 1px solid var(--color-border);
  padding-block-end: var(--space-xs);
}

[data-widget="summary"]> :empty {
  display: none;
}

[data-widget="summary"]>p {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  margin: 0;
}

[data-widget="summary"]>p:last-of-type {
  border-block-start: 1px dashed var(--color-border);
  padding-block-start: var(--space-s);
  font-size: var(--text-m);
  font-weight: 600;
  color: var(--color-text);
}

[data-widget="summary"] button {
  margin-block-start: var(--space-s);
  inline-size: 100%;
}

:where(button[data-button-style="primary"]),
:where(button[data-button-style="secondary"]),
input:is([type="button"], [type="submit"], [type="reset"]) {
  --button-background: var(--color-brand);
  --button-background-hover: var(--color-brand-strong);
  --button-border: var(--color-brand);
  --button-border-hover: var(--color-brand-strong);
  --button-text: var(--color-on-action);
  --button-text-hover: var(--button-text);
  align-items: center;
  appearance: none;
  background: var(--button-background);
  border: 1px solid var(--button-border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
  color: var(--button-text);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--text-font-family);
  font-size: var(--text-m);
  font-weight: 600;
  gap: var(--button-content-gap);
  justify-content: center;
  line-height: 1.15;
  margin: 0;
  min-block-size: var(--control-min-block-size);
  padding-block: 0.5rem;
  padding-inline: 1rem;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
  vertical-align: middle;
}

:where(button[data-button-style="secondary"]) {
  --button-background: var(--color-button-secondary-background);
  --button-background-hover: var(--color-button-secondary-background-hover);
  --button-border: var(--color-button-secondary-border);
  --button-border-hover: var(--color-button-secondary-border-hover);
  --button-text: var(--color-button-secondary-text);
  --button-text-hover: var(--color-button-secondary-text);
}

:where(button[data-button-style="primary"]),
input:is([type="button"], [type="submit"], [type="reset"]) {
  --button-background: var(--color-brand);
  --button-background-hover: var(--color-brand-strong);
  --button-border: var(--color-brand);
  --button-border-hover: var(--color-brand-strong);
  --button-text: var(--color-on-action);
  --button-text-hover: var(--color-on-action);
}

:where(button[data-button-style="primary"], button[data-button-style="secondary"]):hover,
input:is([type="button"], [type="submit"], [type="reset"]):hover {
  background: var(--button-background-hover);
  border-color: var(--button-border-hover);
  box-shadow: var(--shadow-2);
  color: var(--button-text-hover);
}

:where(button[data-button-style="primary"], button[data-button-style="secondary"]):active,
input:is([type="button"], [type="submit"], [type="reset"]):active {
  transform: translateY(1px);
}

:where(button[data-button-style="primary"], button[data-button-style="secondary"]):is(:disabled, [aria-disabled="true"]),
input:is([type="button"], [type="submit"], [type="reset"]):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

:is(button[data-button-icon]) {
  gap: var(--button-icon-gap);
}

:is(button[data-button-icon] > :is(svg.icon)) {
  inline-size: var(--button-icon-size);
  block-size: var(--button-icon-size);
  flex: none;
}

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {

  :root:not([data-motion]) *,
  :root:not([data-motion]) *::before,
  :root:not([data-motion]) *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
body[data-shell-variant]>main>section[data-surface="panel"] {
  background-color: var(--color-surface);
}
.input-context-field {
  position: absolute;
  inset-block-start: auto;
  inset-inline-start: -9999rem;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

:where([data-submit-pending-label="busy"]:not([hidden])) {
  align-items: center;
  display: inline-flex;
  gap: var(--button-content-gap);
}
:where([data-loading-dots]) {
  display: inline-flex;
  justify-content: flex-start;
}

:where([data-loading-dot]) {
  opacity: var(--opacity-loading-idle);
  animation: loading-dots-pulse var(--motion-duration-loading-dots) infinite;
}

:where([data-loading-dot]:nth-child(2)) {
  animation-delay: var(--motion-delay-loading-dot-step);
}

:where([data-loading-dot]:nth-child(3)) {
  animation-delay: calc(var(--motion-delay-loading-dot-step) * 2);
}

@keyframes loading-dots-pulse {

  0%,
  20% {
    opacity: var(--opacity-loading-idle);
  }

  40%,
  80% {
    opacity: 1;
  }

  100% {
    opacity: var(--opacity-loading-idle);
  }
}

:root[data-motion="reduced"] :where([data-loading-dot]) {
  animation: none;
  opacity: 1;
}

:root:not([data-global-wait-visible="true"]) :where([data-global-wait-layer] [data-loading-dot]) {
  animation-play-state: paused;
}

:root[data-global-wait-visible="true"] :where([data-global-wait-layer] [data-loading-dot]) {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) :where([data-loading-dot]) {
    animation: none;
    opacity: 1;
  }
}
:where([data-global-wait-layer]) {
  position: fixed;
  inset: 0;
  z-index: calc(var(--layer-overlay) + 2);
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background: var(--overlay-background);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-standard),
    visibility 0s linear var(--motion-duration-fast);
}

:root[data-global-wait-visible="true"] :where([data-global-wait-layer]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

:where([data-global-wait-panel]) {
  display: grid;
  justify-items: center;
  gap: var(--space-loading-stack);
  text-align: center;
}

:where([data-global-wait-mark]) {
  inline-size: var(--size-loading-mark);
  block-size: var(--size-loading-mark);
  display: block;
}

:where([data-global-wait-label]) {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}
:where([data-loading-ring]) {
  inline-size: var(--size-loading-spinner);
  block-size: var(--size-loading-spinner);
  display: inline-block;
  border-radius: var(--radius-pill);
  border: var(--size-loading-ring-stroke) solid var(--color-loading-spinner-track);
  border-top-color: var(--color-brand);
  animation: loading-ring-spin var(--motion-duration-loading-spin) linear infinite;
}

@keyframes loading-ring-spin {
  to {
    transform: rotate(1turn);
  }
}

:root[data-motion="reduced"] :where([data-loading-ring]) {
  animation: none;
}

:root:not([data-global-wait-visible="true"]) :where([data-global-wait-layer] [data-loading-ring]) {
  animation-play-state: paused;
}

:root[data-global-wait-visible="true"] :where([data-global-wait-layer] [data-loading-ring]) {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) :where([data-loading-ring]) {
    animation: none;
  }
}
.skip-link {
  background: Canvas;
  border: 0.125rem solid CanvasText;
  border-radius: var(--radius-s);
  box-shadow: none;
  color: CanvasText;
  font-size: 1rem;
  font-weight: 600;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  line-height: 1;
  opacity: 0;
  padding: 0.75rem 1rem;
  pointer-events: none;
  position: fixed;
  text-decoration: none;
  transform: translateY(-140%);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
  z-index: 10000;
}

.skip-link:focus,
.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
[data-utility-dock] {
  position: fixed;
  inset-block-start: var(--overlay-edge-offset);
  inset-inline-end: 0;
  z-index: var(--layer-overlay);
  background-color: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-inline-end: 0;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  padding: var(--space-s);
  line-height: 1rem;
}

@media (max-width: 468px) {
  [data-utility-dock] {
    inset-block-start: unset;
    inset-block-end: var(--overlay-edge-offset);
  }
}

[data-utility-dock-items] {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-compact);
  margin: 0;
  padding: 0;
}

[data-utility-dock]:not(:has([data-utility-dock-items] > li)) {
  display: none;
}

[data-utility-dock-item] {
  appearance: none;
  border: 0;
  color: var(--color-brand-strong);
  cursor: pointer;
}

button[data-utility-dock-item][data-button-style="icon"] {
  inline-size: unset;
  block-size: 1rem;
  min-inline-size: unset;
  min-block-size: unset;
}
[data-flyout-label] {
  position: relative;
}

[data-flyout-label]::after {
  content: attr(aria-label);
  position: absolute;
  inset-inline-end: calc(100% + var(--space-s));
  inset-block-start: 50%;
  transform: translateY(-50%) translateX(0.25rem);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--color-surface);
  border: var(--overlay-border);
  border-radius: var(--radius-s);
  box-shadow: var(--overlay-shadow);
  color: var(--color-text);
  font-size: var(--label-font-size);
  font-weight: var(--text-font-weight);
  line-height: var(--label-line-height);
  padding-block: var(--label-padding-block);
  padding-inline: var(--label-padding-inline);
  white-space: nowrap;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

[data-flyout-label]:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-flyout-label]::after {
    transition: none;
  }
}
:root:not(.js) [data-preferences-tray] {
  display: none;
}

[data-preferences-tray] {
  position: relative;
  z-index: var(--layer-overlay);
}

[data-preferences-tray]>summary {
  color: var(--color-brand-strong);
  align-items: center;
  background: transparent;
  border-radius: var(--radius-m);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

[data-preferences-tray]>summary::marker {
  content: "";
}

[data-preferences-tray]>summary::-webkit-details-marker {
  display: none;
}

[data-preferences-tray]>form {
  background: var(--color-surface);
  border: var(--overlay-border);
  border-radius: var(--overlay-radius);
  box-shadow: var(--overlay-shadow);
  padding: var(--overlay-padding);
  inline-size: min(var(--content-width-sm), calc(100vw - (var(--page-gutter) * 2)));
  inset-block-start: calc(100% + var(--overlay-anchor-gap));
  inset-inline-end: 0;
  position: absolute;
  max-block-size: calc(100dvh - (var(--overlay-edge-offset) * 2) - var(--control-min-block-size-compact) - var(--overlay-anchor-gap));
  overflow: auto;
}

@media (max-width: 468px) {
  [data-preferences-tray]>form {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--overlay-anchor-gap));
  }
}
.brand-header {
  display: grid;
  gap: var(--space-compact);
}

.brand-header-logo {
  --brand-header-logo-size-xs: var(--brand-logo-size-xs);
  --brand-header-logo-size-sm: var(--brand-logo-size-sm);
  --brand-header-logo-size-md: var(--brand-logo-size-md);
  --brand-header-logo-size-lg: var(--brand-logo-size-lg);
  --brand-header-logo-max-inline-size: var(--brand-header-logo-size-sm);
  --brand-header-logo-fluid-inline-size: 56vw;
  display: block;
  block-size: auto;
  max-inline-size: 100%;
  inline-size: var(--brand-header-logo-max-inline-size);
}

body[data-shell-variant] .brand-header-logo {
  inline-size: clamp(var(--brand-header-logo-size-xs),
      var(--brand-header-logo-fluid-inline-size),
      var(--brand-header-logo-max-inline-size));
}

.brand-header-logo[data-logo-size="xs"] {
  --brand-header-logo-max-inline-size: var(--brand-header-logo-size-xs);
}

.brand-header-logo[data-logo-size="sm"] {
  --brand-header-logo-max-inline-size: var(--brand-header-logo-size-sm);
}

.brand-header-logo[data-logo-size="md"] {
  --brand-header-logo-max-inline-size: var(--brand-header-logo-size-md);
}

.brand-header-logo[data-logo-size="lg"] {
  --brand-header-logo-max-inline-size: var(--brand-header-logo-size-lg);
}


.brand-header-logo--light {
  display: block;
}

.brand-header-logo--dark {
  display: none;
}


:root[data-color-scheme="dark"] .brand-header-logo--light {
  display: none;
}

:root[data-color-scheme="dark"] .brand-header-logo--dark {
  display: block;
}

:root[data-color-scheme="light"] .brand-header-logo--light {
  display: block;
}

:root[data-color-scheme="light"] .brand-header-logo--dark {
  display: none;
}


@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) .brand-header-logo--light {
    display: none;
  }

  :root:not([data-color-scheme]) .brand-header-logo--dark {
    display: block;
  }
}

.brand-header-subline:empty {
  display: none;
}