/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --tw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --tw-spacing: .25rem;
    --tw-container-3xl: 48rem;
    --tw-container-7xl: 80rem;
    --tw-text-sm: .875rem;
    --tw-text-sm--line-height: calc(1.25 / .875);
    --tw-text-base: 1rem;
    --tw-text-base--line-height: calc(1.5 / 1);
    --tw-text-xl: 1.25rem;
    --tw-text-xl--line-height: calc(1.75 / 1.25);
    --tw-text-4xl: 2.25rem;
    --tw-text-4xl--line-height: calc(2.5 / 2.25);
    --tw-font-weight-normal: 400;
    --tw-font-weight-semibold: 600;
    --tw-font-weight-bold: 700;
    --tw-leading-tight: 1.25;
    --tw-leading-relaxed: 1.625;
    --tw-radius-xl: .75rem;
    --tw-default-font-family: var(--tw-font-sans);
    --tw-default-mono-font-family: var(--tw-font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--tw-default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--tw-default-font-feature-settings, normal);
    font-variation-settings: var(--tw-default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--tw-default-mono-font-feature-settings, normal);
    font-variation-settings: var(--tw-default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer beer {
  body.dark {
    --primary: #cfbcff;
    --on-primary: #381e72;
    --primary-container: #4f378a;
    --on-primary-container: #e9ddff;
    --secondary: #cbc2db;
    --on-secondary: #332d41;
    --secondary-container: #4a4458;
    --on-secondary-container: #e8def8;
    --tertiary: #efb8c8;
    --on-tertiary: #4a2532;
    --tertiary-container: #633b48;
    --on-tertiary-container: #ffd9e3;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffb4ab;
    --background: #1c1b1e;
    --on-background: #e6e1e6;
    --surface: #141316;
    --on-surface: #e6e1e6;
    --surface-variant: #49454e;
    --on-surface-variant: #cac4cf;
    --outline: #948f99;
    --outline-variant: #49454e;
    --shadow: #000;
    --scrim: #000;
    --inverse-surface: #e6e1e6;
    --inverse-on-surface: #313033;
    --inverse-primary: #6750a4;
    --surface-dim: #141316;
    --surface-bright: #3a383c;
    --surface-container-lowest: #0f0e11;
    --surface-container-low: #1c1b1e;
    --surface-container: #201f22;
    --surface-container-high: #2b292d;
    --surface-container-highest: #363438;
  }

  @font-face {
    font-family: Material Symbols Outlined;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/_astro/material-symbols-outlined.B8Tnen9p.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/beercss@5.0.3/dist/cdn/material-symbols-outlined.woff2") format("woff2");
  }

  @font-face {
    font-family: Material Symbols Rounded;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/_astro/material-symbols-rounded.VE-uN7__.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/beercss@5.0.3/dist/cdn/material-symbols-rounded.woff2") format("woff2");
  }

  @font-face {
    font-family: Material Symbols Sharp;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/_astro/material-symbols-sharp.Dk33q42_.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/beercss@5.0.3/dist/cdn/material-symbols-sharp.woff2") format("woff2");
  }

  @font-face {
    font-family: Material Symbols Subset;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/_astro/material-symbols-subset.qXmfdAGZ.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/beercss@5.0.3/dist/cdn/material-symbols-subset.woff2") format("woff2");
  }

  :root {
    --size: 1rem;
    --font: Inter,Roboto,"Helvetica Neue","Arial Nova","Nimbus Sans","Noto Sans",Arial,sans-serif;
    --font-icon: "Material Symbols Outlined";
    --speed1: .1s;
    --speed2: .2s;
    --speed3: .3s;
    --speed4: .4s;
    --active: #80808031;
    --overlay: #00000080;
    --elevate1: 0 .125rem .125rem 0 #00000052;
    --elevate2: 0 .25rem .5rem 0 #0006;
    --elevate3: 0 .375rem .75rem 0 #0000007a;
    --top: env(safe-area-inset-top);
    --bottom: env(safe-area-inset-bottom);
    --left: env(safe-area-inset-left);
    --right: env(safe-area-inset-right);
    --image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==");
  }

  body.dark {
    --image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==");
  }

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

  body {
    color: var(--on-surface);
    background-color: var(--surface);
    font-family: var(--font);
    letter-spacing: .0313rem;
    font-size: .875rem;
    line-height: 1.5rem;
    overflow-x: hidden;
  }

  @media (pointer: fine) {
    body ::-webkit-scrollbar {
      background: none;
      block-size: .4rem;
      inline-size: .4rem;
    }

    body ::-webkit-scrollbar-button {
      background: none;
      block-size: .4rem;
      inline-size: .4rem;
    }

    body ::-webkit-scrollbar-thumb {
      background: none;
      block-size: .4rem;
      inline-size: .4rem;
    }

    body :has(:focus, :hover)::-webkit-scrollbar-thumb {
      background: var(--outline);
      border-radius: 1rem;
    }

    body :is(:focus, :hover)::-webkit-scrollbar-thumb {
      background: var(--outline);
      border-radius: 1rem;
    }
  }

  @media (pointer: coarse) {
    body:has(input[type="range"]:focus), body:has(dialog[open], dialog.active) {
      overflow: hidden;
    }
  }

  @keyframes to-page {
    0% {
      opacity: 0;
      transform: var(--_transform);
    }

    to {
      opacity: 1;
      transform: translate(0);
    }
  }

  @keyframes to-linear-progress {
    0% {
      margin: 0 0 0 -100%;
    }

    50% {
      margin: 0;
    }

    to {
      margin: 0 0 0 100%;
    }
  }

  @keyframes to-indeterminate-progress {
    0% {
      padding: 0 100% 0 0;
    }

    50% {
      padding: 0;
    }

    to {
      padding: 0 0 0 100%;
    }
  }

  @keyframes to-rotate {
    0% {
      transform: rotate(0);
    }

    to {
      transform: rotate(1turn);
    }
  }

  @keyframes to-ripple {
    to {
      opacity: 0;
      transform: scale(4);
    }
  }

  :root, body.light {
    --primary: #6750a4;
    --on-primary: #fff;
    --primary-container: #e9ddff;
    --on-primary-container: #22005d;
    --secondary: #625b71;
    --on-secondary: #fff;
    --secondary-container: #e8def8;
    --on-secondary-container: #1e192b;
    --tertiary: #7e5260;
    --on-tertiary: #fff;
    --tertiary-container: #ffd9e3;
    --on-tertiary-container: #31101d;
    --error: #ba1a1a;
    --on-error: #fff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: #fffbff;
    --on-background: #1c1b1e;
    --surface: #fdf8fd;
    --on-surface: #1c1b1e;
    --surface-variant: #e7e0eb;
    --on-surface-variant: #49454e;
    --outline: #7a757f;
    --outline-variant: #cac4cf;
    --shadow: #000;
    --scrim: #000;
    --inverse-surface: #313033;
    --inverse-on-surface: #f4eff4;
    --inverse-primary: #cfbcff;
    --surface-dim: #ddd8dd;
    --surface-bright: #fdf8fd;
    --surface-container-lowest: #fff;
    --surface-container-low: #f7f2f7;
    --surface-container: #f2ecf1;
    --surface-container-high: #ece7eb;
    --surface-container-highest: #e6e1e6;
  }

  * {
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    color: inherit;
    border-radius: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
  }

  :after, :before {
    all: unset;
  }

  label {
    font-size: .75rem;
  }

  a, b, code, em, i, label, span, strong {
    vertical-align: baseline;
  }

  .button, a, button {
    cursor: pointer;
    outline: inherit;
    border: none;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
  }

  .button, .chip, :is(nav, .tabs, .field) > a, button, i, label {
    -webkit-user-select: none;
    user-select: none;
  }

  :not(.grid, nav, .row) > :not(progress.max) + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*="margin"], .right, .left, .top, .bottom) {
    margin-block-start: 1rem;
  }

  :has( > [class*="margin"]) {
    padding: .1px;
  }

  :is(a, button, .button, .chip, summary):focus-visible {
    outline: .125rem solid var(--primary);
    outline-offset: .25rem;
  }

  :is(nav, .row).group > :focus-visible {
    z-index: 1;
  }

  :is(button, .button, .chip) > :is(span, i, img, svg) {
    pointer-events: none;
  }

  :is(div:not([class]), div[class="active"]):has( > :not(.responsive) ~ :is(menu, .tooltip, input)) {
    display: inline-flex;
  }

  .transparent {
    box-shadow: none !important;
    color: inherit !important;
    background-color: #0000 !important;
  }

  .primary {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
  }

  .primary-text {
    color: var(--primary) !important;
  }

  .primary-border {
    border-color: var(--primary) !important;
  }

  .primary-container {
    background-color: var(--primary-container) !important;
    color: var(--on-primary-container) !important;
  }

  .secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important;
  }

  .secondary-text {
    color: var(--secondary) !important;
  }

  .secondary-border {
    border-color: var(--secondary) !important;
  }

  .secondary-container {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important;
  }

  .tertiary {
    background-color: var(--tertiary) !important;
    color: var(--on-tertiary) !important;
  }

  .tertiary-text {
    color: var(--tertiary) !important;
  }

  .tertiary-border {
    border-color: var(--tertiary) !important;
  }

  .tertiary-container {
    background-color: var(--tertiary-container) !important;
    color: var(--on-tertiary-container) !important;
  }

  .error {
    background-color: var(--error) !important;
    color: var(--on-error) !important;
  }

  .error-text {
    color: var(--error) !important;
  }

  .error-border {
    border-color: var(--error) !important;
  }

  .error-container {
    background-color: var(--error-container) !important;
    color: var(--on-error-container) !important;
  }

  .background {
    background-color: var(--background) !important;
    color: var(--on-background) !important;
  }

  .surface, .surface-bright, .surface-container, .surface-container-high, .surface-container-highest, .surface-container-low, .surface-container-lowest, .surface-dim {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
  }

  .surface-variant {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface-variant) !important;
  }

  .inverse-surface {
    background-color: var(--inverse-surface) !important;
    color: var(--inverse-on-surface) !important;
  }

  .inverse-primary {
    background-color: var(--inverse-primary) !important;
    color: var(--primary) !important;
  }

  .inverse-primary-text {
    color: var(--inverse-primary) !important;
  }

  .inverse-primary-border {
    border-color: var(--inverse-primary) !important;
  }

  .surface-dim {
    background-color: var(--surface-dim) !important;
  }

  .surface-bright {
    background-color: var(--surface-bright) !important;
  }

  .surface-container-lowest {
    background-color: var(--surface-container-lowest) !important;
  }

  .surface-container {
    background-color: var(--surface-container) !important;
  }

  .surface-container-high {
    background-color: var(--surface-container-high) !important;
  }

  .surface-container-highest {
    background-color: var(--surface-container-highest) !important;
  }

  .surface-container-low {
    background-color: var(--surface-container-low) !important;
  }

  .black {
    background-color: #000 !important;
  }

  .black-border {
    border-color: #000 !important;
  }

  .black-text {
    color: #000 !important;
  }

  .white {
    background-color: #fff !important;
  }

  .white-border {
    border-color: #fff !important;
  }

  .white-text {
    color: #fff !important;
  }

  .transparent-border {
    border-color: #0000 !important;
  }

  .transparent-text {
    color: #0000 !important;
  }

  .fill:not(i) {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface-variant) !important;
  }

  .primary > :is(button, a, li).active, nav.primary a.active > i, nav.primary-container > button, nav:is(.max, .tabbed, .toolbar).primary a.active {
    background-color: var(--primary-container) !important;
    color: var(--on-primary-container) !important;
  }

  .primary-container > :is(button, a, li).active, nav.primary-container a.active > i, nav.primary > button, nav:is(.max, .tabbed, .toolbar).primary-container a.active {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
  }

  .secondary > :is(button, a, li).active, nav.secondary a.active > i, nav.secondary-container > button, nav:is(.max, .tabbed, .toolbar).secondary a.active {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important;
  }

  .secondary-container > :is(button, a, li).active, nav.secondary-container a.active > i, nav.secondary > button, nav:is(.max, .tabbed, .toolbar).secondary-container a.active {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important;
  }

  .tertiary > :is(button, a, li).active, nav.tertiary a.active > i, nav.tertiary-container > button, nav:is(.max, .tabbed, .toolbar).tertiary a.active {
    background-color: var(--tertiary-container) !important;
    color: var(--on-tertiary-container) !important;
  }

  .tertiary-container > :is(button, a, li).active, nav.tertiary-container a.active > i, nav.tertiary > button, nav:is(.max, .tabbed, .toolbar).tertiary-container a.active {
    background-color: var(--tertiary) !important;
    color: var(--on-tertiary) !important;
  }

  nav:is(.left, .right, .bottom, .top):not(.max) a.active {
    color: inherit !important;
    background: none !important;
  }

  .middle-align {
    display: flex;
    align-items: center !important;
  }

  .bottom-align {
    display: flex;
    align-items: flex-end !important;
  }

  .top-align {
    display: flex;
    align-items: flex-start !important;
  }

  .left-align {
    text-align: start;
    justify-content: flex-start !important;
  }

  .right-align {
    text-align: end;
    justify-content: flex-end !important;
  }

  .center-align {
    text-align: center;
    justify-content: center !important;
  }

  [class*="blur"], [class*="blur"].light {
    --_blur: 1rem;
    -webkit-backdrop-filter: blur(var(--_blur));
    backdrop-filter: blur(var(--_blur));
    color: var(--on-surface);
    background-color: #ffffff80 !important;
  }

  .dark [class*="blur"], [class*="blur"].dark {
    background-color: #00000080 !important;
  }

  .small-blur {
    --_blur: .5rem;
  }

  .large-blur {
    --_blur: 1.5rem;
  }

  .red, .red6 {
    background-color: #f44336 !important;
  }

  .red-border {
    border-color: #f44336 !important;
  }

  .red-text {
    color: #f44336 !important;
  }

  .red1 {
    background-color: #ffebee !important;
  }

  .red2 {
    background-color: #ffcdd2 !important;
  }

  .red3 {
    background-color: #ef9a9a !important;
  }

  .red4 {
    background-color: #e57373 !important;
  }

  .red5 {
    background-color: #ef5350 !important;
  }

  .red7 {
    background-color: #e53935 !important;
  }

  .red8 {
    background-color: #d32f2f !important;
  }

  .red9 {
    background-color: #c62828 !important;
  }

  .red10 {
    background-color: #b71c1c !important;
  }

  .pink, .pink6 {
    background-color: #e91e63 !important;
  }

  .pink-border {
    border-color: #e91e63 !important;
  }

  .pink-text {
    color: #e91e63 !important;
  }

  .pink1 {
    background-color: #fce4ec !important;
  }

  .pink2 {
    background-color: #f8bbd0 !important;
  }

  .pink3 {
    background-color: #f48fb1 !important;
  }

  .pink4 {
    background-color: #f06292 !important;
  }

  .pink5 {
    background-color: #ec407a !important;
  }

  .pink7 {
    background-color: #d81b60 !important;
  }

  .pink8 {
    background-color: #c2185b !important;
  }

  .pink9 {
    background-color: #ad1457 !important;
  }

  .pink10 {
    background-color: #880e4f !important;
  }

  .purple, .purple6 {
    background-color: #9c27b0 !important;
  }

  .purple-border {
    border-color: #9c27b0 !important;
  }

  .purple-text {
    color: #9c27b0 !important;
  }

  .purple1 {
    background-color: #f3e5f5 !important;
  }

  .purple2 {
    background-color: #e1bee7 !important;
  }

  .purple3 {
    background-color: #ce93d8 !important;
  }

  .purple4 {
    background-color: #ba68c8 !important;
  }

  .purple5 {
    background-color: #ab47bc !important;
  }

  .purple7 {
    background-color: #8e24aa !important;
  }

  .purple8 {
    background-color: #7b1fa2 !important;
  }

  .purple9 {
    background-color: #6a1b9a !important;
  }

  .purple10 {
    background-color: #4a148c !important;
  }

  .deep-purple, .deep-purple6 {
    background-color: #673ab7 !important;
  }

  .deep-purple-border {
    border-color: #673ab7 !important;
  }

  .deep-purple-text {
    color: #673ab7 !important;
  }

  .deep-purple1 {
    background-color: #ede7f6 !important;
  }

  .deep-purple2 {
    background-color: #d1c4e9 !important;
  }

  .deep-purple3 {
    background-color: #b39ddb !important;
  }

  .deep-purple4 {
    background-color: #9575cd !important;
  }

  .deep-purple5 {
    background-color: #7e57c2 !important;
  }

  .deep-purple7 {
    background-color: #5e35b1 !important;
  }

  .deep-purple8 {
    background-color: #512da8 !important;
  }

  .deep-purple9 {
    background-color: #4527a0 !important;
  }

  .deep-purple10 {
    background-color: #311b92 !important;
  }

  .indigo, .indigo6 {
    background-color: #3f51b5 !important;
  }

  .indigo-border {
    border-color: #3f51b5 !important;
  }

  .indigo-text {
    color: #3f51b5 !important;
  }

  .indigo1 {
    background-color: #e8eaf6 !important;
  }

  .indigo2 {
    background-color: #c5cae9 !important;
  }

  .indigo3 {
    background-color: #9fa8da !important;
  }

  .indigo4 {
    background-color: #7986cb !important;
  }

  .indigo5 {
    background-color: #5c6bc0 !important;
  }

  .indigo7 {
    background-color: #3949ab !important;
  }

  .indigo8 {
    background-color: #303f9f !important;
  }

  .indigo9 {
    background-color: #283593 !important;
  }

  .indigo10 {
    background-color: #1a237e !important;
  }

  .blue, .blue6 {
    background-color: #2196f3 !important;
  }

  .blue-border {
    border-color: #2196f3 !important;
  }

  .blue-text {
    color: #2196f3 !important;
  }

  .blue1 {
    background-color: #e3f2fd !important;
  }

  .blue2 {
    background-color: #bbdefb !important;
  }

  .blue3 {
    background-color: #90caf9 !important;
  }

  .blue4 {
    background-color: #64b5f6 !important;
  }

  .blue5 {
    background-color: #42a5f5 !important;
  }

  .blue7 {
    background-color: #1e88e5 !important;
  }

  .blue8 {
    background-color: #1976d2 !important;
  }

  .blue9 {
    background-color: #1565c0 !important;
  }

  .blue10 {
    background-color: #0d47a1 !important;
  }

  .light-blue, .light-blue6 {
    background-color: #03a9f4 !important;
  }

  .light-blue-border {
    border-color: #03a9f4 !important;
  }

  .light-blue-text {
    color: #03a9f4 !important;
  }

  .light-blue1 {
    background-color: #e1f5fe !important;
  }

  .light-blue2 {
    background-color: #b3e5fc !important;
  }

  .light-blue3 {
    background-color: #81d4fa !important;
  }

  .light-blue4 {
    background-color: #4fc3f7 !important;
  }

  .light-blue5 {
    background-color: #29b6f6 !important;
  }

  .light-blue7 {
    background-color: #039be5 !important;
  }

  .light-blue8 {
    background-color: #0288d1 !important;
  }

  .light-blue9 {
    background-color: #0277bd !important;
  }

  .light-blue10 {
    background-color: #01579b !important;
  }

  .cyan, .cyan6 {
    background-color: #00bcd4 !important;
  }

  .cyan-border {
    border-color: #00bcd4 !important;
  }

  .cyan-text {
    color: #00bcd4 !important;
  }

  .cyan1 {
    background-color: #e0f7fa !important;
  }

  .cyan2 {
    background-color: #b2ebf2 !important;
  }

  .cyan3 {
    background-color: #80deea !important;
  }

  .cyan4 {
    background-color: #4dd0e1 !important;
  }

  .cyan5 {
    background-color: #26c6da !important;
  }

  .cyan7 {
    background-color: #00acc1 !important;
  }

  .cyan8 {
    background-color: #0097a7 !important;
  }

  .cyan9 {
    background-color: #00838f !important;
  }

  .cyan10 {
    background-color: #006064 !important;
  }

  .teal, .teal6 {
    background-color: #009688 !important;
  }

  .teal-border {
    border-color: #009688 !important;
  }

  .teal-text {
    color: #009688 !important;
  }

  .teal1 {
    background-color: #e0f2f1 !important;
  }

  .teal2 {
    background-color: #b2dfdb !important;
  }

  .teal3 {
    background-color: #80cbc4 !important;
  }

  .teal4 {
    background-color: #4db6ac !important;
  }

  .teal5 {
    background-color: #26a69a !important;
  }

  .teal7 {
    background-color: #00897b !important;
  }

  .teal8 {
    background-color: #00796b !important;
  }

  .teal9 {
    background-color: #00695c !important;
  }

  .teal10 {
    background-color: #004d40 !important;
  }

  .green, .green6 {
    background-color: #4caf50 !important;
  }

  .green-border {
    border-color: #4caf50 !important;
  }

  .green-text {
    color: #4caf50 !important;
  }

  .green1 {
    background-color: #e8f5e9 !important;
  }

  .green2 {
    background-color: #c8e6c9 !important;
  }

  .green3 {
    background-color: #a5d6a7 !important;
  }

  .green4 {
    background-color: #81c784 !important;
  }

  .green5 {
    background-color: #66bb6a !important;
  }

  .green7 {
    background-color: #43a047 !important;
  }

  .green8 {
    background-color: #388e3c !important;
  }

  .green9 {
    background-color: #2e7d32 !important;
  }

  .green10 {
    background-color: #1b5e20 !important;
  }

  .light-green, .light-green6 {
    background-color: #8bc34a !important;
  }

  .light-green-border {
    border-color: #8bc34a !important;
  }

  .light-green-text {
    color: #8bc34a !important;
  }

  .light-green1 {
    background-color: #f1f8e9 !important;
  }

  .light-green2 {
    background-color: #dcedc8 !important;
  }

  .light-green3 {
    background-color: #c5e1a5 !important;
  }

  .light-green4 {
    background-color: #aed581 !important;
  }

  .light-green5 {
    background-color: #9ccc65 !important;
  }

  .light-green7 {
    background-color: #7cb342 !important;
  }

  .light-green8 {
    background-color: #689f38 !important;
  }

  .light-green9 {
    background-color: #558b2f !important;
  }

  .light-green10 {
    background-color: #33691e !important;
  }

  .lime, .lime6 {
    background-color: #cddc39 !important;
  }

  .lime-border {
    border-color: #cddc39 !important;
  }

  .lime-text {
    color: #cddc39 !important;
  }

  .lime1 {
    background-color: #f9fbe7 !important;
  }

  .lime2 {
    background-color: #f0f4c3 !important;
  }

  .lime3 {
    background-color: #e6ee9c !important;
  }

  .lime4 {
    background-color: #dce775 !important;
  }

  .lime5 {
    background-color: #d4e157 !important;
  }

  .lime7 {
    background-color: #c0ca33 !important;
  }

  .lime8 {
    background-color: #afb42b !important;
  }

  .lime9 {
    background-color: #9e9d24 !important;
  }

  .lime10 {
    background-color: #827717 !important;
  }

  .yellow, .yellow6 {
    background-color: #ffeb3b !important;
  }

  .yellow-border {
    border-color: #ffeb3b !important;
  }

  .yellow-text {
    color: #ffeb3b !important;
  }

  .yellow1 {
    background-color: #fffde7 !important;
  }

  .yellow2 {
    background-color: #fff9c4 !important;
  }

  .yellow3 {
    background-color: #fff59d !important;
  }

  .yellow4 {
    background-color: #fff176 !important;
  }

  .yellow5 {
    background-color: #ffee58 !important;
  }

  .yellow7 {
    background-color: #fdd835 !important;
  }

  .yellow8 {
    background-color: #fbc02d !important;
  }

  .yellow9 {
    background-color: #f9a825 !important;
  }

  .yellow10 {
    background-color: #f57f17 !important;
  }

  .amber, .amber6 {
    background-color: #ffc107 !important;
  }

  .amber-border {
    border-color: #ffc107 !important;
  }

  .amber-text {
    color: #ffc107 !important;
  }

  .amber1 {
    background-color: #fff8e1 !important;
  }

  .amber2 {
    background-color: #ffecb3 !important;
  }

  .amber3 {
    background-color: #ffe082 !important;
  }

  .amber4 {
    background-color: #ffd54f !important;
  }

  .amber5 {
    background-color: #ffca28 !important;
  }

  .amber7 {
    background-color: #ffb300 !important;
  }

  .amber8 {
    background-color: #ffa000 !important;
  }

  .amber9 {
    background-color: #ff8f00 !important;
  }

  .amber10 {
    background-color: #ff6f00 !important;
  }

  .orange, .orange6 {
    background-color: #ff9800 !important;
  }

  .orange-border {
    border-color: #ff9800 !important;
  }

  .orange-text {
    color: #ff9800 !important;
  }

  .orange1 {
    background-color: #fff3e0 !important;
  }

  .orange2 {
    background-color: #ffe0b2 !important;
  }

  .orange3 {
    background-color: #ffcc80 !important;
  }

  .orange4 {
    background-color: #ffb74d !important;
  }

  .orange5 {
    background-color: #ffa726 !important;
  }

  .orange7 {
    background-color: #fb8c00 !important;
  }

  .orange8 {
    background-color: #f57c00 !important;
  }

  .orange9 {
    background-color: #ef6c00 !important;
  }

  .orange10 {
    background-color: #e65100 !important;
  }

  .deep-orange, .deep-orange6 {
    background-color: #ff5722 !important;
  }

  .deep-orange-border {
    border-color: #ff5722 !important;
  }

  .deep-orange-text {
    color: #ff5722 !important;
  }

  .deep-orange1 {
    background-color: #fbe9e7 !important;
  }

  .deep-orange2 {
    background-color: #ffccbc !important;
  }

  .deep-orange3 {
    background-color: #ffab91 !important;
  }

  .deep-orange4 {
    background-color: #ff8a65 !important;
  }

  .deep-orange5 {
    background-color: #ff7043 !important;
  }

  .deep-orange7 {
    background-color: #f4511e !important;
  }

  .deep-orange8 {
    background-color: #e64a19 !important;
  }

  .deep-orange9 {
    background-color: #d84315 !important;
  }

  .deep-orange10 {
    background-color: #bf360c !important;
  }

  .brown, .brown6 {
    background-color: #795548 !important;
  }

  .brown-border {
    border-color: #795548 !important;
  }

  .brown-text {
    color: #795548 !important;
  }

  .brown1 {
    background-color: #efebe9 !important;
  }

  .brown2 {
    background-color: #d7ccc8 !important;
  }

  .brown3 {
    background-color: #bcaaa4 !important;
  }

  .brown4 {
    background-color: #a1887f !important;
  }

  .brown5 {
    background-color: #8d6e63 !important;
  }

  .brown7 {
    background-color: #6d4c41 !important;
  }

  .brown8 {
    background-color: #5d4037 !important;
  }

  .brown9 {
    background-color: #4e342e !important;
  }

  .brown10 {
    background-color: #3e2723 !important;
  }

  .blue-grey, .blue-grey6 {
    background-color: #607d8b !important;
  }

  .blue-grey-border {
    border-color: #607d8b !important;
  }

  .blue-grey-text {
    color: #607d8b !important;
  }

  .blue-grey1 {
    background-color: #eceff1 !important;
  }

  .blue-grey2 {
    background-color: #cfd8dc !important;
  }

  .blue-grey3 {
    background-color: #b0bec5 !important;
  }

  .blue-grey4 {
    background-color: #90a4ae !important;
  }

  .blue-grey5 {
    background-color: #78909c !important;
  }

  .blue-grey7 {
    background-color: #546e7a !important;
  }

  .blue-grey8 {
    background-color: #455a64 !important;
  }

  .blue-grey9 {
    background-color: #37474f !important;
  }

  .blue-grey10 {
    background-color: #263238 !important;
  }

  .grey, .grey6 {
    background-color: #9e9e9e !important;
  }

  .grey-border {
    border-color: #9e9e9e !important;
  }

  .grey-text {
    color: #9e9e9e !important;
  }

  .grey1 {
    background-color: #fafafa !important;
  }

  .grey2 {
    background-color: #f5f5f5 !important;
  }

  .grey3 {
    background-color: #eee !important;
  }

  .grey4 {
    background-color: #e0e0e0 !important;
  }

  .grey5 {
    background-color: #bdbdbd !important;
  }

  .grey7 {
    background-color: #757575 !important;
  }

  .grey8 {
    background-color: #616161 !important;
  }

  .grey9 {
    background-color: #424242 !important;
  }

  .grey10 {
    background-color: #212121 !important;
  }

  .horizontal {
    gap: 1rem;
    display: inline-flex;
    flex-direction: row !important;
    inline-size: auto !important;
    max-inline-size: none !important;
  }

  .horizontal > * {
    margin-block: 0 !important;
  }

  .vertical {
    display: flex;
    flex-direction: column !important;
  }

  :is(a, button, .button, .chip).vertical {
    gap: .25rem;
    padding-block: .5rem;
    display: inline-flex;
    block-size: auto !important;
    max-block-size: none !important;
  }

  .vertical > * {
    margin-inline: 0 !important;
  }

  .no-elevate {
    box-shadow: none !important;
  }

  .elevate, .small-elevate {
    box-shadow: var(--elevate1) !important;
  }

  .medium-elevate {
    box-shadow: var(--elevate2) !important;
  }

  .large-elevate {
    box-shadow: var(--elevate3) !important;
  }

  .round, [class*="-round"] {
    --_round: 2rem;
    border-radius: var(--_round) !important;
  }

  .small-round {
    --_round: .5rem;
  }

  .large-round {
    --_round: 3.5rem;
  }

  .bottom-round, .left-round, .right-round, .square, .top-round {
    border-radius: .5rem !important;
  }

  .no-round {
    border-radius: 0 !important;
  }

  .top-round {
    border-start-start-radius: var(--_round) !important;
    border-start-end-radius: var(--_round) !important;
  }

  .bottom-round {
    border-end-end-radius: var(--_round) !important;
  }

  .bottom-round, .left-round {
    border-end-start-radius: var(--_round) !important;
  }

  .left-round {
    border-start-start-radius: var(--_round) !important;
  }

  .right-round {
    border-start-end-radius: var(--_round) !important;
    border-end-end-radius: var(--_round) !important;
  }

  .circle {
    border-radius: 50%;
  }

  .circle:is(button, .button, .chip) {
    border-radius: var(--_size);
  }

  :is(.circle, .square):is(button, .button, .chip) {
    block-size: var(--_size);
    inline-size: var(--_size);
    padding: 0;
  }

  :is(.circle, .square) > span:not([class]) {
    display: none;
  }

  :is(.circle, .square).round {
    border-radius: 1rem !important;
  }

  .border:not(table, .field, .list, menu, article) {
    box-sizing: border-box;
    border: .0625rem solid var(--outline);
    box-shadow: none;
    background-color: #0000;
  }

  .no-border {
    border-color: #0000 !important;
  }

  .margin, [class*="-margin"]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
    margin: var(--_margin) !important;
  }

  .margin, [class*="-margin"] {
    --_margin: 1rem;
  }

  .no-margin {
    --_margin: 0;
  }

  .auto-margin {
    --_margin: auto;
  }

  .tiny-margin {
    --_margin: .25rem;
  }

  .small-margin {
    --_margin: .5rem;
  }

  .large-margin {
    --_margin: 1.5rem;
  }

  .horizontal-margin, .left-margin {
    margin-inline-start: var(--_margin) !important;
  }

  .horizontal-margin, .right-margin {
    margin-inline-end: var(--_margin) !important;
  }

  .top-margin, .vertical-margin {
    margin-block-start: var(--_margin) !important;
  }

  .bottom-margin, .vertical-margin {
    margin-block-end: var(--_margin) !important;
  }

  .no-opacity {
    opacity: 0 !important;
  }

  .small-opacity {
    opacity: .25 !important;
  }

  .medium-opacity {
    opacity: .5 !important;
  }

  .large-opacity {
    opacity: .75 !important;
  }

  .opacity {
    opacity: 1 !important;
  }

  .padding, [class*="-padding"]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
    padding: var(--_padding) !important;
  }

  .padding, [class*="-padding"] {
    --_padding: 1rem;
  }

  .no-padding {
    --_padding: 0 !important;
  }

  .tiny-padding {
    --_padding: .25rem !important;
  }

  .small-padding {
    --_padding: .5rem !important;
  }

  .large-padding {
    --_padding: 1.5rem !important;
  }

  .horizontal-padding, .left-padding {
    padding-inline-start: var(--_padding) !important;
  }

  .horizontal-padding, .right-padding {
    padding-inline-end: var(--_padding) !important;
  }

  .top-padding, .vertical-padding {
    padding-block-start: var(--_padding) !important;
  }

  .bottom-padding, .vertical-padding {
    padding-block-end: var(--_padding) !important;
  }

  .front {
    z-index: 10 !important;
  }

  .back {
    z-index: -10 !important;
  }

  .left {
    inset-inline-start: 0;
  }

  .right {
    inset-inline-end: 0;
  }

  .top {
    inset-block-start: 0;
  }

  .bottom {
    inset-block-end: 0;
  }

  .center {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  [dir="rtl"] .center {
    transform: translateX(50%);
  }

  .middle {
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .middle.center {
    transform: translate(-50%, -50%);
  }

  [dir="rtl"] .middle.center {
    transform: translate(50%, -50%);
  }

  .responsive {
    inline-size: -webkit-fill-available;
    inline-size: -moz-available;
  }

  @media only screen and (max-width: 600px) {
    :is(.m, .l):not(.s) {
      display: none !important;
    }
  }

  @media only screen and (min-width: 601px) and (max-width: 992px) {
    :is(.s, .l):not(.m) {
      display: none !important;
    }
  }

  @media only screen and (min-width: 993px) {
    :is(.m, .s):not(.l) {
      display: none !important;
    }
  }

  [class*="ripple"]:is(:hover, :focus-visible):after {
    content: "";
    opacity: .1;
    border-radius: inherit;
    background: currentColor;
    position: absolute;
    inset: 0;
  }

  .ripple {
    --_duration: .6s;
  }

  .fast-ripple {
    --_duration: .2s;
  }

  .slow-ripple {
    --_duration: 1.8s;
  }

  .ripple-js {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ripple-js > div {
    opacity: .3;
    animation: to-ripple var(--_duration) linear;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
  }

  .scroll {
    overflow: auto;
  }

  .no-scroll {
    overflow: hidden;
  }

  .shadow {
    background-color: #00000050;
  }

  :is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
    background-color: #0000 !important;
  }

  .left-shadow {
    background-image: linear-gradient(90deg, #000, #0000) !important;
  }

  .right-shadow {
    background-image: linear-gradient(270deg, #000, #0000) !important;
  }

  .bottom-shadow {
    background-image: linear-gradient(0deg, #000, #0000) !important;
  }

  .top-shadow {
    background-image: linear-gradient(#000, #0000) !important;
  }

  [class*="-width"] {
    max-inline-size: 100%;
  }

  .auto-width {
    inline-size: auto;
  }

  .small-width {
    inline-size: 12rem !important;
  }

  .medium-width {
    inline-size: 24rem !important;
  }

  .large-width {
    inline-size: 36rem !important;
  }

  .auto-height {
    block-size: auto;
  }

  .small-height {
    block-size: 12rem !important;
  }

  .medium-height {
    block-size: 24rem !important;
  }

  .large-height {
    block-size: 36rem !important;
  }

  .wrap {
    white-space: normal;
    display: block;
  }

  .no-wrap:not(menu) {
    white-space: nowrap;
    display: flex;
  }

  .tiny-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
    block-size: .5rem;
  }

  :is(.space, .small-space):not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
    block-size: 1rem;
  }

  .medium-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
    block-size: 2rem;
  }

  .large-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
    block-size: 3rem;
  }

  .extra-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
    block-size: 4rem;
  }

  :is(.wave, .chip, .button, button, nav.tabbed a, .tabs > a, nav.toolbar a):not([class*="ripple"]):after, nav:is(.left, .right, .bottom, .top).max a:after, nav:is(.left, .right, .bottom, .top):not(.max) a > i:after {
    content: "";
    z-index: 1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, currentColor 1%, #0000 0);
    background-position: 50%;
    block-size: 100%;
    inline-size: 100%;
    transition: none;
    position: absolute;
    inset: 0;
  }

  :is(.wave, .chip, .button, button, nav.tabbed a, .tabs > a, nav.toolbar a):not([class*="ripple"]):is(:focus-visible, :hover):after, nav:is(.left, .right, .bottom, .top).max a:not(.button, .chip):is(:focus-visible, :hover):after, nav:is(.left, .right, .bottom, .top):not(.max) a:not(.button, .chip):is(:focus-visible, :hover) > i:after {
    opacity: .1;
    transition: background-size var(--speed2) linear;
    background-size: 22500%;
  }

  :is(.wave, .chip, .button, button, nav.tabbed a, .tabs > a, nav.toolbar a, nav.max a):not([class*="ripple"]):active:after, nav:is(.left, .right, .bottom, .top).max a:active:after, nav:is(.left, .right, .bottom, .top):not(.max) a:active > i:after {
    opacity: 0;
    background-size: 0;
    transition: none;
  }

  .no-wave:after, .no-wave:is(:hover, :active):after, menu > li > a:not(.wave):after {
    display: none;
  }

  .tiny-zoom, .zoom {
    zoom: 2;
  }

  .small-zoom {
    zoom: 3;
  }

  .medium-zoom {
    zoom: 4;
  }

  .large-zoom {
    zoom: 5;
  }

  .extra-zoom {
    zoom: 6;
  }

  .badge {
    --_x: 0;
    z-index: 2;
    background-color: var(--error);
    min-block-size: 1rem;
    min-inline-size: 1rem;
    color: var(--on-error);
    transform: translate(var(--_x, 50%),var(--_y, -50%));
    font-size: .6875rem;
    line-height: normal;
    font-family: var(--font);
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    padding: 0 .25rem;
    display: inline-flex;
    position: absolute;
    inset: 50% auto auto 50%;
  }

  .badge, .badge.top {
    --_y: -100%;
  }

  .badge.bottom {
    --_y: 0;
  }

  .badge.left {
    --_x: -100%;
  }

  .badge.right {
    --_x: 0;
  }

  .badge.border {
    border-color: var(--error);
    color: var(--error);
    background-color: var(--surface);
  }

  .badge:is(.circle, .square) {
    text-align: center;
    border-radius: 1rem;
    block-size: auto;
    inline-size: auto;
    padding: 0 .25rem;
  }

  .badge.square {
    border-radius: 0;
  }

  .badge.min > * {
    display: none;
  }

  .badge.min {
    clip-path: circle(18.75%);
  }

  nav:is(.left, .right, .top, .bottom) :is(li, div:has( > menu)) > a > .badge, nav:is(.left, .right, .top, .bottom) > a > .badge {
    inset: 1rem auto auto 50%;
  }

  .badge.none {
    margin: 0 .125rem;
    position: relative;
    transform: none;
    inset: auto !important;
  }

  footer, header {
    border-radius: 0;
    align-content: center;
    padding: 0 1rem;
    display: grid;
  }

  :is(dialog, article) > :is(header, footer) {
    padding-inline: 0;
    inset: 0;
  }

  header {
    min-block-size: 4rem;
  }

  footer {
    min-block-size: 5rem;
  }

  :is(header, footer, menu > *).fixed {
    z-index: 11;
    background-color: inherit;
    position: sticky;
    inset: 0;
  }

  header.fixed {
    inset: calc(var(--_padding, 0)*-1) 0 0 0;
    margin-block-start: calc(var(--_padding, 0)*-1);
  }

  footer.fixed {
    inset: 0 0 calc(var(--_padding, 0)*-1) 0;
    margin-block-end: calc(var(--_padding, 0)*-1);
  }

  :is(header, footer).fixed.min {
    margin-inline: auto;
  }

  dialog > :is(header, footer) {
    background: none;
  }

  dialog > :is(header, footer).fixed {
    background-color: inherit;
  }

  :is(main, header, footer, section).responsive {
    max-inline-size: min(100vw, 75rem);
    margin: 0 auto;
  }

  :is(main, header, footer, section).responsive.max {
    max-inline-size: none;
  }

  :has( > main) > :is(header, footer).fixed {
    box-sizing: content-box;
    z-index: 12;
    position: sticky;
    inset: 0;
    transform: none;
  }

  :has( > main) > header {
    padding-block-start: var(--top, 0);
  }

  :has( > main) > footer {
    padding-block-end: var(--bottom, 0);
  }

  nav.bottom ~ footer, nav.top ~ header {
    padding-block: 0;
  }

  nav.top ~ header.fixed {
    inset-block: calc(var(--top, 0) + 4.5rem) 0;
  }

  nav.bottom ~ footer.fixed {
    inset-block: 0 calc(var(--bottom, 0) + 4.5rem);
  }

  :is(nav, .row) > header {
    background-color: inherit;
  }

  .button, button {
    --_padding: 1rem;
    --_size: 2.5rem;
    box-sizing: content-box;
    block-size: var(--_size);
    color: var(--on-primary);
    padding: 0 var(--_padding);
    background-color: var(--primary);
    border-radius: var(--_round);
    transition: transform var(--speed3),border-radius var(--speed2),padding var(--speed3);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: normal;
    display: inline-flex;
    --_round: calc(var(--_size)/2) !important;
  }

  :is(button, .button).small {
    --_size: 2rem;
    --_padding: .75rem;
  }

  :is(button, .button).large {
    --_size: 3rem;
    --_padding: 1.25rem;
  }

  :is(.button, button):is(.extra, .extend) {
    --_size: 3.5rem;
    --_padding: 1.5rem;
    font-size: 1rem;
  }

  :is(button, .button):is(.square, .circle) {
    --_padding: 0;
  }

  :is(button, .button).border {
    border-color: var(--outline-variant);
    color: var(--primary);
  }

  .extend > span:not([class]) {
    display: none;
  }

  .extend:is(:hover, .active) {
    --_padding: 1.5rem;
    inline-size: auto;
    padding: 0 var(--_padding);
  }

  .extend:is(:hover, .active) > i + span {
    display: inherit;
    margin-inline-start: var(--_padding);
  }

  .extend:is(:hover, .active) > :is(img, svg) + span {
    display: inherit;
    margin-inline-start: calc(1rem + var(--_padding, 0));
  }

  :is(.button, button)[disabled] {
    opacity: .5;
    cursor: not-allowed;
  }

  .button[disabled] {
    pointer-events: none;
  }

  :is(.button, button)[disabled]:after, :is(.button, button)[disabled]:before {
    display: none;
  }

  :is(.button, button):not(.chip, .extend).fill {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important;
  }

  :is(.button, button):not(.chip, .extend).active {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
  }

  :is(.button, button):not(.chip, .extend).fill.active {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important;
  }

  :is(.button, button):not(.chip, .extend).border.active {
    background-color: var(--inverse-surface) !important;
    color: var(--inverse-on-surface) !important;
    border-color: var(--inverse-surface) !important;
  }

  :is(.button, button):not(.chip).active, :is(.button, button):not(.chip):active {
    border-radius: .5rem !important;
  }

  article {
    --_padding: 1rem;
    box-shadow: var(--elevate1);
    background-color: var(--surface-container-low);
    color: var(--on-surface);
    padding: var(--_padding);
    transition: transform var(--speed3),border-radius var(--speed3),padding var(--speed3);
    border-radius: .75rem;
    display: block;
  }

  article.small {
    block-size: 12rem;
  }

  article.medium {
    block-size: 20rem;
  }

  article.large {
    block-size: 32rem;
  }

  article.border {
    box-shadow: none;
  }

  .chip, article.border {
    border: .0625rem solid var(--outline-variant);
  }

  .chip {
    --_padding: .75rem;
    --_size: 2rem;
    box-sizing: border-box;
    block-size: var(--_size);
    min-inline-size: var(--_size);
    color: var(--on-surface-variant);
    padding: 0 var(--_padding);
    transition: transform var(--speed3),border-radius var(--speed3),padding var(--speed3);
    -webkit-user-select: none;
    user-select: none;
    letter-spacing: normal;
    background-color: #0000;
    border-radius: .5rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: normal;
    display: inline-flex;
    --_round: calc(var(--_size)/2) !important;
  }

  .chip.medium {
    --_size: 2.5rem;
    --_padding: 1rem;
  }

  .chip.large {
    --_padding: 1.25rem;
    --_size: 3rem;
  }

  .chip.fill, dialog {
    border: none;
  }

  dialog {
    --_padding: 1.5rem;
    --_top: calc(var(--_padding, 0) + var(--top, 0));
    --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
    visibility: hidden;
    opacity: 0;
    box-shadow: var(--elevate2);
    color: var(--on-surface);
    background-color: var(--surface-container-high);
    padding: var(--_padding);
    z-index: 100;
    max-block-size: 80%;
    min-inline-size: 20rem;
    max-inline-size: 100%;
    transition: all var(--speed3),0s background-color;
    border-radius: 1.75rem;
    outline: none;
    display: block;
    position: fixed;
    inset: 10% auto auto 50%;
    overflow: hidden auto;
    transform: translate(-50%, -4rem);
  }

  dialog.small {
    block-size: 25%;
    inline-size: 25%;
  }

  dialog.medium {
    block-size: 50%;
    inline-size: 50%;
  }

  dialog.large {
    block-size: 75%;
    inline-size: 75%;
  }

  dialog:is(.active, [open]) {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%);
  }

  dialog:popover-open {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%);
  }

  dialog:is(.top, .right, .bottom, .left, .max) {
    --_padding: 1rem;
  }

  dialog:is(.top, .bottom) {
    opacity: 1;
    block-size: auto;
    max-block-size: 100%;
    inline-size: 100%;
    min-inline-size: auto;
  }

  dialog.top {
    border-radius: 0 0 1rem 1rem;
    padding-block-start: var(--_top);
    inset: 0 auto auto 0;
    transform: translateY(-100%);
  }

  dialog.bottom {
    border-radius: 1rem 1rem 0 0;
    padding-block-end: var(--_bottom);
    inset: auto auto 0 0;
    transform: translateY(100%);
  }

  dialog:is(.left, .right) {
    opacity: 1;
    background-color: var(--surface);
    block-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    padding-block: var(--_top) var(--_bottom);
    inset: 0 auto auto 0;
  }

  [dir="rtl"] dialog.right, dialog.left {
    border-radius: 0 1rem 1rem 0;
    inset: 0 auto auto 0;
    transform: translateX(-100%);
  }

  [dir="rtl"] dialog.left, dialog.right {
    border-radius: 1rem 0 0 1rem;
    inset: 0 0 auto auto;
    transform: translateX(100%);
  }

  dialog.max {
    background-color: var(--surface);
    block-size: 100%;
    max-block-size: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    padding-block: var(--_top) var(--_bottom);
    border-radius: 0;
    inset: 0 auto auto 0;
    transform: translateY(4rem);
  }

  dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
    transform: translate(0);
  }

  dialog:popover-open:is(.left, .right, .top, .bottom, .max) {
    transform: translate(0);
  }

  dialog.small:is(.left, .right) {
    inline-size: 20rem;
  }

  dialog.medium:is(.left, .right) {
    inline-size: 32rem;
  }

  dialog.large:is(.left, .right) {
    inline-size: 44rem;
  }

  dialog.small:is(.top, .bottom) {
    block-size: 16rem;
  }

  dialog.medium:is(.top, .bottom) {
    block-size: 24rem;
  }

  dialog.large:is(.top, .bottom) {
    block-size: 32rem;
  }

  [class*="divider"], hr {
    all: unset;
    background-color: var(--outline-variant);
    place-self: center;
    block-size: .0625rem;
    min-block-size: auto;
    min-inline-size: 1.5em;
    display: block;
    inline-size: -webkit-fill-available !important;
  }

  [class*="divider"] + *, hr + * {
    margin: 0 !important;
  }

  .medium-divider, hr.medium {
    margin: 1rem 0 !important;
  }

  .large-divider, hr.large {
    margin: 1.5rem 0 !important;
  }

  .small-divider, hr.small {
    margin: .5rem 0 !important;
  }

  :is(hr, .divider).vertical {
    min-block-size: 1.5rem;
    min-inline-size: auto;
    inline-size: .0625rem !important;
  }

  li:has( > :is(hr, .divider)) {
    all: unset;
    inline-size: -webkit-fill-available !important;
  }

  nav:is(.top, .bottom) li:has( > :is(hr, .divider)) {
    inline-size: auto !important;
  }

  nav:is(.top, .bottom) > :is(hr, .divider) {
    inline-size: .0625rem !important;
  }

  summary {
    cursor: pointer;
    list-style-type: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary > * {
    pointer-events: none;
    margin: 0;
  }

  li > details > summary + .list {
    margin: 0 !important;
  }

  details::details-content {
    transition: all var(--speed2);
    opacity: 0;
    transform: translateY(-1rem);
  }

  details[open]::details-content {
    opacity: 1;
    transform: translateY(0);
  }

  .field {
    --_input: 3rem;
    --_start: 1.2rem;
    --_middle: calc(var(--_input, 0)/2);
    min-block-size: var(--_input);
    border-radius: .25rem .25rem 0 0;
    flex-direction: column;
    display: flex;
  }

  .field.fill {
    --_background: var(--surface-variant);
    background-color: unset !important;
    color: unset !important;
  }

  .field.fill > :is(input, select, textarea) {
    background-color: var(--_background);
    z-index: 0;
  }

  .field.small {
    --_input: 2.5rem;
    --_start: 1rem;
  }

  .field.large {
    --_input: 3.5rem;
    --_start: 1.4rem;
  }

  .field.extra {
    --_input: 4rem;
    --_start: 1.6rem;
  }

  .field.border {
    border-radius: .25rem;
  }

  .field[class*="round"].small {
    border-radius: 1.25rem;
  }

  .field[class*="round"] {
    border-radius: 1.5rem;
  }

  .field[class*="round"].large {
    border-radius: 1.75rem;
  }

  .field[class*="round"].extra {
    border-radius: 2rem;
  }

  .field > :is(i, img, svg, progress.circle, a) {
    inset: calc(var(--_input, 0)/2 - .75rem) auto auto auto;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    margin: auto 0;
    position: absolute;
  }

  .field > :is(a, .front) {
    pointer-events: all !important;
  }

  .field > a > :is(i, img, svg, progress.circle, a) {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  .field > :is(i, img, svg, progress.circle, a) {
    inset: calc(var(--_middle, 0) - .75rem) 1rem auto auto;
  }

  .field:dir(rtl) > :is(i, img, svg, progress.circle, a):first-child {
    inset: calc(var(--_middle, 0) - .75rem) 1rem auto auto;
  }

  :is(.field:dir(rtl) > :is(i, img, svg, progress.circle, a), .field > :is(i, img, svg, progress.circle, a):first-child) {
    inset: calc(var(--_middle, 0) - .75rem) auto auto 1rem;
  }

  .field.invalid > i {
    color: var(--error);
  }

  .field > progress.circle {
    border-width: .1875rem;
  }

  .field > :is(input, textarea, select) {
    all: unset;
    box-sizing: border-box;
    border-radius: inherit;
    min-block-size: var(--_input);
    z-index: 1;
    resize: none;
    text-align: start;
    cursor: text;
    background: none;
    border: .0625rem solid #0000;
    outline: none;
    align-items: center;
    padding: 0 .9375rem;
    font-family: inherit;
    font-size: 1rem;
    display: flex;
    position: relative;
  }

  input::-webkit-date-and-time-value {
    text-align: start;
  }

  :is(input, select, textarea):is(:autofill, :autofill) {
    -webkit-text-fill-color: var(--on-surface);
    -webkit-background-clip: text;
  }

  .field > :is(input, textarea, select):focus {
    border: .125rem solid #0000;
    padding-inline: .875rem;
  }

  .field > textarea:not([rows]) {
    field-sizing: content;
    max-block-size: 12rem;
  }

  :not(.field) > input:is([type^="date"], [type^="time"], [type="month"], [type="week"]), input[type="color"], input[type="file"] {
    opacity: 0;
    border: 0;
    outline: 0;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    z-index: 2 !important;
  }

  input::-webkit-calendar-picker-indicator {
    opacity: 0;
    border: 0;
    outline: 0;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    z-index: 2 !important;
  }

  @media (pointer: fine) {
    .field > input::-webkit-calendar-picker-indicator {
      z-index: -1 !important;
    }
  }

  input::-webkit-inner-spin-button {
    display: none;
  }

  input::-webkit-outer-spin-button {
    display: none;
  }

  input::-webkit-search-cancel-button {
    display: none;
  }

  input::-webkit-search-decoration {
    display: none;
  }

  input::-webkit-search-results-button {
    display: none;
  }

  input::-webkit-search-results-decoration {
    display: none;
  }

  input[type="number"] {
    appearance: textfield;
  }

  .field.border > :is(input, textarea, select) {
    border-color: var(--outline);
  }

  .field.border > :is(input, textarea, select):focus {
    border-color: var(--primary);
  }

  .field[class*="round"] > :is(input, textarea, select) {
    padding-inline: 1.4376rem;
  }

  .field[class*="round"] > :is(input, textarea, select):focus {
    padding-inline: 1.375rem;
  }

  .field.prefix > :is(input, textarea, select) {
    padding-inline-start: 2.9375rem;
  }

  .field.prefix > .slider {
    margin-inline-start: 3.5rem;
  }

  .field.prefix > :is(input, textarea, select):focus {
    padding-inline-start: 2.875rem;
  }

  .field.suffix > :is(input, textarea, select) {
    padding-inline-end: 2.9375rem;
  }

  .field.suffix > .slider {
    margin-inline-end: 3.5rem;
  }

  .field.suffix > :is(input, textarea, select):focus {
    padding-inline-end: 2.875rem;
  }

  .field:not(.border, [class*="round"]) > :is(input, textarea, select) {
    border-block-end-color: var(--outline);
  }

  .field:not(.border, [class*="round"]) > :is(input, textarea, select):focus {
    border-block-end-color: var(--primary);
  }

  .field[class*="round"]:not(.border) > :is(input, textarea, select):focus, .field[class*="round"]:not(.border, .fill) > :is(input, textarea, select) {
    box-shadow: var(--elevate1);
  }

  .field[class*="round"]:not(.border, .fill) > :is(input, textarea, select):focus {
    box-shadow: var(--elevate2);
  }

  .field.invalid:not(.border, [class*="round"]) > :is(input, textarea, select), .field.invalid:not(.border, [class*="round"]) > :is(input, textarea, select):focus {
    border-block-end-color: var(--error);
  }

  .field.invalid.border > :is(input, textarea, select), .field.invalid.border > :is(input, textarea, select):focus {
    border-color: var(--error);
  }

  .field:has( > :disabled) {
    opacity: .5;
    cursor: not-allowed;
  }

  .field > :disabled {
    cursor: not-allowed;
  }

  .field > select {
    -webkit-user-select: none;
    user-select: none;
  }

  @-moz-document url-prefix() {
    .field > select:focus {
      background-color: var(--surface);
    }

    .field.fill > select:focus {
      background-color: var(--surface-variant);
    }

    .field > select:focus + label {
      z-index: 1;
    }
  }

  .field > select > option {
    background-color: var(--surface);
  }

  .field > :is(input, select) {
    padding-block-start: 1rem;
  }

  .field.border:not(.fill) > :is(input, select), .field:not(.label) > :is(input, select) {
    padding-block-start: 0;
  }

  .field > textarea {
    padding-block-start: var(--_start) !important;
  }

  .field > textarea:focus {
    padding-block-start: calc(var(--_start, 0) - .01rem) !important;
  }

  .field.border:not(.fill) > textarea, .field:not(.label) > textarea {
    padding-block-start: calc(var(--_start, 0) - .5rem) !important;
  }

  .field.border:not(.fill) > textarea:focus, .field:not(.label) > textarea:focus {
    padding-block-start: calc(var(--_start, 0) - .51rem) !important;
  }

  .field.label > label {
    --_start: 1rem;
    inset: -.5rem .9375rem 0 var(--_start);
    block-size: calc(var(--_input, 0) + 1rem);
    line-height: calc(var(--_input, 0) + 1rem);
    white-space: nowrap;
    pointer-events: none;
    gap: .25rem;
    font-size: 1rem;
    transition: all .2s;
    display: flex;
    position: absolute;
  }

  .field.label:dir(rtl) > label {
    inset: -.5rem calc(var(--_start) - .0625rem) 0 .9375rem;
  }

  .field.label[class*="round"] > label {
    inset: -.5rem 1.9375rem 0 var(--_start);
  }

  .field.label[class*="round"]:dir(rtl) > label {
    inset: -.5rem var(--_start) 0 1.9375rem;
  }

  .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
    --_start: 1rem;
  }

  .field.label.border.prefix[class*="round"]:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label), .field.label[class*="round"] > label {
    --_start: 1.5rem;
  }

  .field.label.prefix > label {
    --_start: 3rem;
  }

  .field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
    block-size: 2.5rem;
    font-size: .75rem;
    line-height: 2.5rem;
  }

  .field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
    block-size: 1rem;
    line-height: 1rem;
  }

  .field.label.border:not(.fill) > label:after {
    content: "";
    border-block-start: .0625rem solid var(--outline);
    flex: auto;
    block-size: 1rem;
    margin: .5rem 0 0;
    transition: none;
    display: block;
  }

  .field.label.border:not(.fill) > :focus + label:after {
    border-block-start: .125rem solid var(--primary);
  }

  .field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active), .field.label.border:not(.fill) > select {
    clip-path: polygon(-2% -2%, .75rem -2%, .75rem .5rem, calc(100% - 1rem) .5rem, calc(100% - 1rem) -2%, 102% -2%, 102% 102%, -2% 102%);
  }

  .field.label.border:not(.fill):dir(rtl) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active) {
    clip-path: polygon(-2% -2%, 1rem -2%, 1rem .5rem, calc(100% - .75rem) .5rem, calc(100% - .75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
  }

  .field.label.border:not(.fill):dir(rtl) > select {
    clip-path: polygon(-2% -2%, 1rem -2%, 1rem .5rem, calc(100% - .75rem) .5rem, calc(100% - .75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
  }

  .field.label.border[class*="round"]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active), .field.label.border[class*="round"]:not(.fill) > select {
    clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem .5rem, calc(100% - 2rem) .5rem, calc(100% - 2rem) -2%, 102% -2%, 102% 102%, -2% 102%);
  }

  .field.label.border[class*="round"]:not(.fill):dir(rtl) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active) {
    clip-path: polygon(-2% -2%, 2rem -2%, 2rem .5rem, calc(100% - 1.25rem) .5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
  }

  .field.label.border[class*="round"]:not(.fill):dir(rtl) > select {
    clip-path: polygon(-2% -2%, 2rem -2%, 2rem .5rem, calc(100% - 1.25rem) .5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
  }

  .field.label > :focus + label {
    color: var(--primary);
  }

  .field.label.invalid > label, .field.label.invalid > label:after {
    color: var(--error) !important;
    border-color: var(--error) !important;
  }

  .field.label > label > a {
    block-size: inherit;
    line-height: inherit;
    inline-size: 1rem;
  }

  .field.label > label > a > :is(i, img, svg) {
    block-size: 1rem;
    inline-size: 1rem;
    font-size: 1rem;
    line-height: 1rem;
  }

  .field > output {
    align-self: start;
    padding: .25rem 1rem;
    font-size: .75rem;
    line-height: 1.25rem;
    display: inline-block;
    background: none !important;
  }

  .field > output.invalid {
    color: var(--error) !important;
  }

  .field[class*="round"] > output {
    padding: .25rem 1.5rem;
  }

  .field.invalid > output:not(.invalid), .field:not(.invalid) > output.invalid {
    display: none;
  }

  .field.invalid > output.invalid ~ menu, .field:not(.invalid) > output:not(.invalid) ~ menu {
    inset: auto auto 1.75rem 0;
  }

  table td > .field {
    margin: 0;
  }

  fieldset {
    border: .0625rem solid var(--outline-variant);
    border-radius: .25rem;
    padding: 1rem;
  }

  fieldset > legend {
    margin: 0 -.25rem;
    padding: 0 .25rem;
  }

  fieldset > legend + * {
    margin-block-start: 0 !important;
  }

  .grid {
    --_gap: 1rem;
    gap: var(--_gap);
    grid-template-columns: repeat(12, 1fr);
    block-size: auto;
    display: grid;
  }

  .grid.no-space {
    --_gap: 0rem;
  }

  .grid.medium-space {
    --_gap: 1.5rem;
  }

  .grid.large-space {
    --_gap: 2rem;
  }

  .grid > * {
    margin: 0;
  }

  .s1 {
    grid-area: auto / span 1;
  }

  .s2 {
    grid-area: auto / span 2;
  }

  .s3 {
    grid-area: auto / span 3;
  }

  .s4 {
    grid-area: auto / span 4;
  }

  .s5 {
    grid-area: auto / span 5;
  }

  .s6 {
    grid-area: auto / span 6;
  }

  .s7 {
    grid-area: auto / span 7;
  }

  .s8 {
    grid-area: auto / span 8;
  }

  .s9 {
    grid-area: auto / span 9;
  }

  .s10 {
    grid-area: auto / span 10;
  }

  .s11 {
    grid-area: auto / span 11;
  }

  .s12 {
    grid-area: auto / span 12;
  }

  @media only screen and (min-width: 601px) {
    .m1 {
      grid-area: auto / span 1;
    }

    .m2 {
      grid-area: auto / span 2;
    }

    .m3 {
      grid-area: auto / span 3;
    }

    .m4 {
      grid-area: auto / span 4;
    }

    .m5 {
      grid-area: auto / span 5;
    }

    .m6 {
      grid-area: auto / span 6;
    }

    .m7 {
      grid-area: auto / span 7;
    }

    .m8 {
      grid-area: auto / span 8;
    }

    .m9 {
      grid-area: auto / span 9;
    }

    .m10 {
      grid-area: auto / span 10;
    }

    .m11 {
      grid-area: auto / span 11;
    }

    .m12 {
      grid-area: auto / span 12;
    }
  }

  @media only screen and (min-width: 993px) {
    .l1 {
      grid-area: auto / span 1;
    }

    .l2 {
      grid-area: auto / span 2;
    }

    .l3 {
      grid-area: auto / span 3;
    }

    .l4 {
      grid-area: auto / span 4;
    }

    .l5 {
      grid-area: auto / span 5;
    }

    .l6 {
      grid-area: auto / span 6;
    }

    .l7 {
      grid-area: auto / span 7;
    }

    .l8 {
      grid-area: auto / span 8;
    }

    .l9 {
      grid-area: auto / span 9;
    }

    .l10 {
      grid-area: auto / span 10;
    }

    .l11 {
      grid-area: auto / span 11;
    }

    .l12 {
      grid-area: auto / span 12;
    }
  }

  :is(.checkbox, .radio, .switch) > span:before, :is(.checkbox, .radio, .switch) > span > i, i {
    --_size: 1.5rem;
    font-family: var(--font-icon);
    font-style: normal;
    font-weight: 400;
    font-size: var(--_size);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    inline-size: var(--_size);
    min-inline-size: var(--_size);
    block-size: var(--_size);
    min-block-size: var(--_size);
    box-sizing: content-box;
    direction: ltr;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    line-height: normal;
    display: inline-flex;
    overflow: hidden;
  }

  i:has(.badge) {
    overflow: unset;
  }

  i.tiny {
    --_size: 1rem;
  }

  .chip > i, i.small {
    --_size: 1.25rem;
  }

  i.medium {
    --_size: 1.5rem;
  }

  i.large {
    --_size: 1.75rem;
  }

  i.extra {
    --_size: 2rem;
  }

  a.active > i, button.active > i, i.fill {
    font-variation-settings: "FILL" 1;
  }

  i > :is(img, svg) {
    border-radius: inherit;
    block-size: 100%;
    inline-size: 100%;
    padding: inherit;
    background-size: 100%;
    position: absolute;
    inset: 0 auto auto 0;
  }

  i[class*="fa-"] {
    font-size: calc(var(--_size, 0)*.85);
    block-size: auto;
    min-block-size: auto;
    line-height: normal;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  :is(.absolute, .fixed).left.right {
    inline-size: auto;
  }

  :is(.absolute, .fixed).left.right.small {
    block-size: 20rem;
  }

  :is(.absolute, .fixed).left.right.medium {
    block-size: 28rem;
  }

  :is(.absolute, .fixed).left.right.large {
    block-size: 44rem;
  }

  :is(.absolute, .fixed).top.bottom.small {
    inline-size: 20rem;
  }

  :is(.absolute, .fixed).top.bottom.medium {
    inline-size: 28rem;
  }

  :is(.absolute, .fixed).top.bottom.large {
    inline-size: 44rem;
  }

  .list {
    flex-direction: column;
    flex: 1;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .list > li, .list > li > a:only-child, .list > li > details > summary {
    all: unset;
    box-sizing: border-box;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    flex: 1;
    justify-content: flex-start;
    align-self: normal;
    align-items: center;
    gap: 1rem;
    min-block-size: 3.5rem;
    padding: .5rem 1rem;
    display: flex;
    position: relative;
  }

  .list > li:has(ul, ol, details[open], a:only-child) {
    padding: 0;
  }

  .list > li > .list {
    padding: 0 0 0 1rem;
  }

  .list > li > *, .list > li > a:only-child > * {
    margin: 0;
  }

  .list > li > :is(details, .max), .list > li > a:only-child > .max, .list > li > details > summary > .max {
    flex: 1;
  }

  .list.border > li:not(:last-child):before, .list.border > li > details[open] > summary:before {
    content: "";
    background-color: var(--outline-variant);
    block-size: .0625rem;
    inline-size: auto;
    position: absolute;
    inset: auto 0 0;
  }

  .list.no-space > li, .list.no-space > li > details > summary {
    min-block-size: 2.5rem;
  }

  .list.medium-space > li, .list.medium-space > li > details > summary {
    min-block-size: 4.5rem;
  }

  .list.large-space > li, .list.large-space > li > details > summary {
    min-block-size: 5.5rem;
  }

  .list > li:focus-visible, .list > li > a:only-child:focus-visible {
    outline: .125rem solid var(--primary);
    outline-offset: -.25rem;
  }

  :has( > main) {
    box-sizing: border-box;
    background-color: var(--surface);
    grid-template: "left top right"
                   "left header right"
                   "left main right" minmax(0, 1fr)
                   "left footer right"
                   "left bottom right"
                   / auto minmax(0, 1fr) auto;
    min-block-size: 100dvh;
    display: grid;
  }

  nav.left {
    grid-area: left;
  }

  nav.right {
    grid-area: right;
  }

  nav.top {
    grid-area: top;
  }

  nav.bottom {
    grid-area: bottom;
  }

  header {
    grid-area: header;
  }

  footer {
    grid-area: footer;
  }

  main {
    --_padding: .5rem;
    padding: var(--_padding);
    grid-area: main;
    overflow: clip;
  }

  aside {
    z-index: 1;
  }

  aside:not(.fixed, .absolute).right {
    float: right;
  }

  aside:not(.fixed, .absolute).left {
    float: left;
  }

  svg {
    fill: currentColor;
  }

  :is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .square, .responsive) {
    --_size: 3rem;
    object-fit: cover;
    object-position: center;
    transition: transform var(--speed3),border-radius var(--speed3),padding var(--speed3);
    block-size: var(--_size);
    inline-size: var(--_size);
  }

  :is(img, svg, video).round {
    --_round: .5rem;
  }

  :is(img, svg, video).tiny {
    --_size: 2rem;
  }

  :is(img, svg, video).small {
    --_size: 2.5rem;
  }

  :is(img, svg, video).large {
    --_size: 3.5rem;
  }

  :is(img, svg, video).extra {
    --_size: 4rem;
  }

  :is(img, svg, video).responsive {
    --_size: 100%;
    margin: 0 auto;
  }

  :is(img, svg, video).responsive.tiny {
    block-size: 4rem;
    inline-size: 100%;
  }

  :is(img, svg, video).responsive.small {
    block-size: 8rem;
    inline-size: 100%;
  }

  :is(img, svg, video).responsive.medium {
    block-size: 12rem;
    inline-size: 100%;
  }

  :is(img, svg, video).responsive.large {
    block-size: 16rem;
    inline-size: 100%;
  }

  :is(img, svg, video).responsive.extra {
    block-size: 20rem;
    inline-size: 100%;
  }

  :is(img, svg, video).responsive.round {
    --_round: 2rem;
  }

  :is(img, svg, video).empty-state {
    inline-size: 24rem;
    max-inline-size: 100%;
  }

  :is(button, .button, .chip):not(.transparent) > .responsive {
    border: .25rem solid #0000;
  }

  .tabs :is(img, svg):not(.responsive), :is(button, .button, .chip, .field) > :is(img, svg):not(.responsive) {
    min-block-size: 1.5rem;
    max-block-size: 1.5rem;
    min-inline-size: 1.5rem;
    max-inline-size: 1.5rem;
  }

  :is(button, .button, .chip):not(.extend) > .responsive:first-child {
    margin-inline-start: calc(var(--_padding, 0)*-1);
  }

  :is(button, .button, .chip):not(.extend) > .responsive:not(:first-child) {
    margin-inline-end: calc(var(--_padding, 0)*-1);
  }

  :is(button, .button, .chip, .circle, .square, .extend) > .responsive {
    --_size: inherit;
    margin: 0 auto;
  }

  .extend > :is(.responsive, i) {
    z-index: 1;
    margin: 0;
    position: absolute;
    inset-inline: 1rem;
  }

  .extend > .responsive {
    inline-size: 3.5rem;
    inset-inline: 0;
  }

  .extend.border > .responsive {
    inline-size: 3.375rem;
  }

  menu {
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--elevate2);
    background-color: var(--surface-container);
    z-index: 13;
    text-transform: none;
    max-block-size: 50vh;
    inline-size: 100%;
    color: var(--on-surface);
    text-align: start;
    transition: all var(--speed2) var(--speed2);
    border-radius: 1rem;
    flex-direction: column;
    justify-content: flex-start;
    gap: .125rem;
    padding: .25rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: normal;
    display: flex;
    position: absolute;
    inset: auto auto 0 0;
    overflow: hidden auto;
    transform: scale(.8) translateY(120%);
    max-inline-size: none !important;
  }

  menu.no-space {
    gap: 0;
  }

  menu.small-space {
    gap: .25rem;
  }

  menu.medium-space {
    gap: .375rem;
  }

  menu.large-space {
    gap: .5rem;
  }

  menu.extra-space {
    gap: .625rem;
  }

  [dir="rtl"] menu {
    inset: auto 0 0 auto;
  }

  menu.no-wrap {
    white-space: nowrap !important;
    inline-size: max-content !important;
  }

  :not([data-ui]):focus-within > menu, menu.active, menu > li:hover > menu, menu > li > menu:hover {
    opacity: 1;
    visibility: visible;
    transition: all var(--speed2),background-color 0s;
    transform: scale(1) translateY(100%);
  }

  :not([data-ui]):focus-within > menu.top, menu.top.active, menu > li:hover > menu.top, menu > li > menu.top:hover {
    transform: scale(1) translateY(-100%);
  }

  :not([data-ui]):focus-within > menu:is(.min, .max), menu:is(.min, .max).active {
    transform: scale(1);
  }

  menu * {
    white-space: inherit !important;
  }

  menu > li, menu > li > a:only-child {
    all: unset;
    box-sizing: border-box;
    text-align: start;
    align-self: normal;
    align-items: center;
    justify-content: inherit;
    white-space: nowrap;
    cursor: pointer;
    min-block-size: 2.75rem;
    transition: border-radius var(--speed2);
    border-radius: .25rem;
    flex: 1;
    gap: 1rem;
    padding: .5rem 1rem;
    display: flex;
    position: relative;
    margin: 0 !important;
  }

  menu > li:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  menu > li:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }

  menu > li:hover {
    background-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    menu > li:hover {
      background-color: color-mix(in srgb,currentColor 10%,transparent);
    }
  }

  menu > li.active {
    background-color: var(--tertiary-container);
    color: var(--on-tertiary-container);
  }

  menu > li:is(.active, :active) {
    border-radius: .75rem;
  }

  menu > li:has(.field, a:only-child), menu > li > :is(.max, .field), menu > li > a:only-child > .max {
    flex: 1;
    margin: 0;
    padding: 0;
  }

  menu.min {
    inset: 0 0 auto;
    transform: scale(.8);
  }

  [dir="rtl"] menu.min.right, menu.min.left, menu.top.left {
    inset: 0 0 auto auto;
  }

  [dir="rtl"] menu.min.left, menu.min.right, menu.top, menu.top.right {
    inset: 0 auto auto 0;
  }

  menu.max {
    z-index: 100;
    border-radius: 0;
    block-size: 100%;
    min-block-size: auto;
    max-block-size: none;
    position: fixed;
    inset: 0;
    transform: scale(.8);
  }

  menu.max > li {
    flex: none !important;
  }

  menu.no-wrap:is(.min, .max) {
    min-inline-size: 16rem;
  }

  [dir="rtl"] menu.right, [dir="rtl"] menu.top.min.right, menu.left, menu.top.min.left {
    inset: auto 0 0 auto;
  }

  [dir="rtl"] menu.left, [dir="rtl"] menu.top.min.left, menu.right, menu.top.min {
    inset: auto auto 0 0;
  }

  menu.top {
    transform: scale(.8) translateY(-120%);
  }

  menu:has(menu) {
    --_child: 1;
    --_type: 0;
    overflow: unset;
    white-space: nowrap;
    max-block-size: none;
    inline-size: auto;
    min-inline-size: 12rem;
  }

  [dir="rtl"] menu > li > menu.left, menu > li > :is(menu, menu.right) {
    inset: auto auto calc(3rem*(var(--_child, 0) - var(--_type, 0))) 100%;
  }

  [dir="rtl"] menu > li > :is(menu, menu.right), menu > li > menu.left {
    inset: auto 100% calc(3rem*(var(--_child, 0) - var(--_type, 0))) auto;
  }

  [dir="rtl"] menu > li > menu.top.left, menu > li > :is(menu.top, menu.top.right) {
    inset: calc(3rem*(var(--_child, 0) - var(--_type, 0))) auto auto 100%;
  }

  [dir="rtl"] menu > li > :is(menu.top, menu.top.right), menu > li > menu.top.left {
    inset: calc(3rem*(var(--_child, 0) - var(--_type, 0))) 100% auto auto;
  }

  menu.group {
    max-block-size: none;
    inline-size: 100%;
    min-inline-size: auto;
    overflow: unset;
    box-shadow: none;
    background: none;
    padding: .5rem 0;
  }

  menu.group > li {
    box-shadow: none;
    min-block-size: auto;
    padding: 0;
  }

  menu.group > li:hover {
    background: none;
  }

  menu.group > li > menu, menu.group > li > menu:hover {
    opacity: 1;
    visibility: visible;
    z-index: auto;
    border-radius: 1rem 1rem .5rem .5rem;
    flex: 1;
    max-block-size: none;
    transition: none;
    position: relative;
    inset: 0;
    transform: none;
  }

  menu.group > li:last-child > menu {
    border-radius: .5rem .5rem 1rem 1rem;
  }

  menu > li:nth-last-child(2) {
    --_child: 2;
  }

  menu > li:nth-last-child(3) {
    --_child: 3;
  }

  menu > li:nth-last-child(4) {
    --_child: 4;
  }

  menu > li:nth-last-child(5) {
    --_child: 5;
  }

  menu > li:nth-last-child(6) {
    --_child: 6;
  }

  menu > li:nth-last-child(7) {
    --_child: 7;
  }

  menu > li:nth-last-child(8) {
    --_child: 8;
  }

  menu > li:nth-last-child(9) {
    --_child: 9;
  }

  menu > li:nth-last-child(10) {
    --_child: 10;
  }

  menu > li:nth-last-child(11) {
    --_child: 11;
  }

  menu > li:nth-last-of-type(2) {
    --_type: 1;
  }

  menu > li:nth-last-of-type(3) {
    --_type: 2;
  }

  menu > li:nth-last-of-type(4) {
    --_type: 3;
  }

  menu > li:nth-last-of-type(5) {
    --_type: 4;
  }

  menu > li:nth-last-of-type(6) {
    --_type: 5;
  }

  menu > li:nth-last-of-type(7) {
    --_type: 6;
  }

  menu > li:nth-last-of-type(8) {
    --_type: 7;
  }

  menu > li:nth-last-of-type(9) {
    --_type: 8;
  }

  menu > li:nth-last-of-type(10) {
    --_type: 9;
  }

  menu > li:nth-last-of-type(11) {
    --_type: 10;
  }

  @media (pointer: coarse) {
    :not(menu, [data-ui]):hover > menu {
      opacity: 1;
      visibility: visible;
      transform: scale(1) translateY(100%);
    }

    :not(menu, [data-ui]):hover > menu.top {
      transform: scale(1) translateY(-100%);
    }
  }

  nav > :is(ol, ul) {
    all: inherit;
    border-radius: inherit;
    position: absolute;
    inset: 0;
  }

  nav.toolbar > :is(ol, ul) {
    padding: 0;
    position: relative;
  }

  nav > :is(ol, ul) > li {
    all: unset;
    border-radius: inherit;
    block-size: inherit;
    color: inherit;
    flex: 0;
    align-items: center;
    inline-size: 100%;
    display: inline-flex;
  }

  nav:is(.left, .right, .tabbed) > :is(ol, ul) > li {
    inline-size: auto;
  }

  nav.tabbed > :is(ol, ul) > li {
    flex: 1;
  }

  .row, a.row, nav {
    text-align: start;
    white-space: nowrap;
    border-radius: 0;
    justify-content: flex-start;
    align-self: normal;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  a.row, nav.row {
    min-block-size: 3rem;
    margin: 0;
  }

  :is(nav, .row, .max) > :only-child, :is(nav, .row, .max) > span > * {
    margin: 0;
  }

  :is(nav, .row) > :not(header, footer) {
    white-space: normal;
    flex: none;
    margin: 0;
  }

  :is(nav, .row).min {
    display: inline-flex;
  }

  :is(nav, .row).no-space {
    gap: 0;
  }

  :is(nav, .row).tiny-space {
    gap: .5rem;
  }

  :is(nav, .row).medium-space {
    gap: 1.5rem;
  }

  :is(nav, .row).large-space {
    gap: 2rem;
  }

  :is(nav, .row) .max {
    flex: 1;
  }

  :is(nav, .row).wrap {
    flex-wrap: wrap;
    display: flex;
  }

  :is(header, footer) > :is(nav, .row) {
    min-block-size: inherit;
  }

  nav:is(.left, .right, .top, .bottom) {
    --_padding: .5rem;
    --_top: calc(var(--_padding, 0) + var(--top, 0));
    --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
    color: var(--on-surface);
    z-index: 100;
    text-align: center;
    padding: var(--_padding);
    border: 0;
    margin: 0;
    position: sticky;
    inset: 0;
    transform: none;
  }

  nav:is(.left, .right) {
    background-color: var(--surface);
    block-size: 100dvh;
    min-inline-size: 6rem;
    padding-block: var(--_top) var(--_bottom);
    flex-direction: column;
    justify-content: flex-start;
  }

  nav:is(.top, .bottom) {
    background-color: var(--surface-container);
    flex-direction: row;
    justify-content: center;
    block-size: auto;
    min-block-size: 4.5rem;
    padding: .5rem;
    position: sticky;
    inset: 0;
  }

  nav.top {
    block-size: calc(var(--top, 0) + 4.5rem);
    padding-block-start: var(--_top);
  }

  nav.bottom {
    block-size: calc(var(--bottom, 0) + 4.5rem);
    padding-block-end: var(--_bottom);
  }

  nav > header {
    align-items: flex-start;
    gap: 1rem;
    min-block-size: auto;
    margin: 0 0 1rem;
    padding: 0;
    background: none !important;
  }

  nav:is(.top, .bottom) > header {
    flex-direction: row;
    align-items: center;
    margin: 0 1rem 0 0;
  }

  nav > header > * {
    margin: 0;
    transition: none;
  }

  nav.max > header > * {
    transition: all var(--speed1);
  }

  nav > header > .extend:hover {
    --_padding: 0;
    inline-size: var(--_size);
  }

  nav > header > .extend:hover > span:not([class]) {
    display: none;
  }

  nav.max:is(.left, .right, .top, .bottom) {
    inline-size: auto;
    min-inline-size: 12.75rem;
    padding: var(--_top) 1.25rem var(--_bottom) 1.25rem;
    align-items: flex-start;
    gap: 0;
  }

  nav.max > header {
    margin: 0 0 1.25rem;
  }

  nav.max:is(.top, .bottom) > header {
    margin: 0 1.25rem 0 0;
  }

  nav.max > header > .extend {
    --_padding: 1.5rem;
    inline-size: auto;
    padding: 0 var(--_padding);
  }

  nav.max > header > .extend > span:not([class]) {
    margin-inline-start: var(--_padding);
    display: block;
  }

  nav.max > header > .extend > :is(img, svg) + span {
    margin-inline-start: calc(1rem + var(--_padding, 0));
  }

  nav.max:is(.top, .bottom) {
    align-items: center;
    min-inline-size: auto;
    max-inline-size: none;
    padding: 0 .5rem;
  }

  nav:is(.left, .right, .top, .bottom) :is(div:has( > menu)) > a:not(.button, .chip), nav:is(.left, .right, .top, .bottom) a:not(.button, .chip) {
    flex-direction: column;
    gap: .25rem;
    inline-size: 3.5rem;
    font-size: .8rem;
    line-height: normal;
    display: flex;
  }

  nav:not(.max):is(.left, .right, .top, .bottom) :is(div:has( > menu)) > a:not(.button, .chip) > i, nav:not(.max):is(.left, .right, .top, .bottom) a:not(.button, .chip) > i {
    border-radius: 2rem;
    margin: 0 auto;
    padding: .25rem 1rem;
  }

  nav.max:is(.left, .right, .top, .bottom) :is(div:has( > menu)) > a:not(.button, .chip), nav.max:is(.left, .right, .top, .bottom) a:not(.button, .chip) {
    block-size: 3.5rem;
    inline-size: auto;
    font-size: inherit;
    border-radius: 2rem;
    flex-direction: row;
    gap: .5rem;
    padding: 0 1rem;
  }

  nav:is(.left, .right, .top, .bottom) :is(div:has( > menu)) > a.active:not(.button, .chip), nav:is(.left, .right, .top, .bottom) a.active:not(.button, .chip) {
    transition: padding var(--speed1) linear;
  }

  nav.max:is(.top, .bottom) :is(div:has( > menu)) > a:not(.button, .chip), nav.max:is(.top, .bottom) a:not(.button, .chip) {
    gap: .25rem;
    block-size: 2.5rem;
    font-size: .8rem;
  }

  nav.max:is(.left, .right, .top, .bottom) :is(div:has( > menu)) > a.active:not(.button, .chip), nav.max:is(.left, .right, .top, .bottom) a.active:not(.button, .chip), nav:is(.left, .right, .top, .bottom):not(.max) :is(div:has( > menu)) > a.active:not(.button, .chip) > i, nav:is(.left, .right, .top, .bottom):not(.max) a.active:not(.button, .chip) > i {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
  }

  :is(nav, .row):is(.left-align, .top-align, .vertical) {
    justify-content: flex-start;
  }

  :is(nav, .row):is(.right-align, .bottom-align) {
    justify-content: flex-end;
  }

  :is(nav, .row):is(.center-align, .middle-align) {
    justify-content: center;
  }

  :is(nav, .row):is(.left-align, .top-align, .vertical).vertical {
    align-items: flex-start;
  }

  :is(nav, .row):is(.right-align, .bottom-align).vertical {
    align-items: flex-end;
  }

  :is(nav, .row):is(.center-align, .middle-align).vertical {
    align-items: center;
  }

  nav:not(.left, .right) > .space {
    inline-size: .5rem;
  }

  nav:not(.left, .right) > .medium-space {
    inline-size: 1rem;
  }

  nav:not(.left, .right) > .large-space {
    inline-size: 1.5rem;
  }

  nav.tabbed {
    background-color: var(--surface-container);
    gap: 0;
    block-size: 4rem;
    border-radius: 4rem !important;
  }

  nav.tabbed.small {
    block-size: 3rem;
  }

  nav.tabbed.large {
    block-size: 5rem;
  }

  nav.tabbed a {
    border-radius: inherit;
    block-size: inherit;
    flex: 1;
    align-items: center;
    gap: .5rem;
    padding-inline: 1rem;
    font-size: 1rem;
    display: inline-flex;
  }

  nav.tabbed a.active {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
  }

  nav.toolbar {
    background-color: var(--surface-container);
    color: var(--on-surface);
    border-radius: 2rem;
    justify-content: space-around;
    min-block-size: 4rem;
    min-inline-size: 4rem;
    padding: 0 1rem;
  }

  nav.toolbar, nav.toolbar a {
    gap: .5rem;
    display: inline-flex;
  }

  nav.toolbar a {
    border-radius: 1.75rem;
    min-block-size: 2.5rem;
    min-inline-size: 2.5rem;
  }

  nav.toolbar a:has( > :not(i)) {
    padding: 0 1rem;
  }

  nav.toolbar a.active {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
  }

  nav.toolbar.fill {
    background-color: var(--primary-container) !important;
    color: var(--on-primary-container) !important;
  }

  nav.toolbar.fill a.active {
    background-color: var(--surface-container) !important;
    color: var(--on-surface) !important;
  }

  nav.toolbar.vertical {
    align-self: center;
    min-inline-size: 4rem;
    padding: 1rem 0;
    flex-direction: column !important;
    align-items: center !important;
  }

  nav.toolbar.vertical a {
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }

  nav.toolbar.vertical a > :is(div, span):not(.badge, .tooltip) {
    display: none;
  }

  nav.toolbar.max {
    border-radius: 0;
    display: flex;
  }

  nav.group {
    color: var(--on-background) !important;
    background: none !important;
  }

  nav.group > :is(.button, button) {
    border-radius: .5rem;
  }

  nav.group:is(.connected, .split) {
    gap: .125rem;
  }

  nav.group:not(.split) > :is(.button, button):not(.border) {
    background-color: var(--surface-container);
    color: var(--on-surface-container);
  }

  nav.group:not(.split) > :is(.button, button).active {
    background-color: var(--primary);
    color: var(--on-primary);
  }

  nav.group.connected > :is(.button, button):not(.border) {
    background-color: var(--surface-container);
    color: var(--on-surface-container);
  }

  nav.group.connected > :is(.button, button).active {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
  }

  nav.group:is(.connected, .split) > :is(.button, button).active, nav.split > :is(.button, button):active {
    border-radius: 2rem !important;
  }

  :is(.scroll, .no-scroll, .no-space, .tabs, .tabbed) > :focus-visible {
    outline: .125rem solid var(--primary);
    outline-offset: -.125rem;
  }

  nav.split > :is(.button, button):not(.chip, .fill, .border) {
    background-color: var(--primary);
    color: var(--on-primary);
  }

  @media only screen and (max-width: 600px) {
    nav.bottom, nav.top {
      justify-content: space-around;
    }
  }

  .overlay, dialog::backdrop {
    opacity: 0;
    visibility: hidden;
    color: var(--on-surface);
    background-color: var(--overlay);
    z-index: 100;
    transition: all var(--speed3),0s background-color;
    border-radius: 0;
    position: fixed;
    inset: 0;
    display: block !important;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }

  dialog:popover-open::backdrop {
    opacity: 1;
    visibility: visible;
  }

  .overlay + dialog::backdrop, .snackbar::backdrop {
    display: none;
  }

  [popover] {
    border: 0;
  }

  .page {
    --_transform: translate(0);
    opacity: 0;
    display: none;
    position: absolute;
  }

  .page.active {
    opacity: 1;
    display: inherit;
    animation: var(--speed4) to-page ease;
    position: relative;
  }

  .page.active.top {
    --_transform: translateY(-4rem);
  }

  .page.active.bottom {
    --_transform: translateY(4rem);
  }

  .page.active.left {
    --_transform: translate(-4rem);
  }

  .page.active.right {
    --_transform: translate(4rem);
  }

  progress {
    inline-size: 100%;
    block-size: var(--_size);
    color: var(--primary);
    background: var(--image);
    writing-mode: horizontal-tb;
    appearance: none;
    direction: ltr;
    border: none;
    border-radius: 1rem;
    flex: none;
    position: relative;
    overflow: hidden;
  }

  progress, progress.small {
    --_size: .25rem;
  }

  progress.medium {
    --_size: .35rem;
  }

  progress.large {
    --_size: .45rem;
  }

  progress.indeterminate {
    --_value: 100;
    animation: 3.2s infinite to-indeterminate-progress;
  }

  progress:not(.circle, [value]):after {
    content: "";
    clip-path: none;
    background: currentColor;
    block-size: 100%;
    inline-size: 100%;
    animation: 3.2s infinite to-linear-progress;
    position: absolute;
    inset: 0;
  }

  progress:not(.circle, [value])::-moz-progress-bar {
    animation: 3.2s infinite to-linear-progress;
  }

  progress:not(.circle, [value])::-webkit-progress-value {
    animation: 3.2s infinite to-linear-progress;
  }

  progress::-webkit-progress-bar {
    background: none;
  }

  progress::-webkit-progress-value {
    background: currentColor;
  }

  progress::-moz-progress-bar {
    background: currentColor;
  }

  progress.wavy {
    block-size: calc(var(--_size, 0)*2);
    background: none;
    background-image: var(--image);
    background-position: 0;
    background-repeat: repeat-x;
    background-size: auto calc(var(--_size, 0)/2);
  }

  progress.wavy:not(.circle, [value]):after {
    -webkit-mask-image: url("/_astro/wavy.DYnjrnbj.svg");
    mask-image: url("/_astro/wavy.DYnjrnbj.svg");
    -webkit-mask-position: 0;
    mask-position: 0;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }

  progress.wavy::-webkit-progress-value {
    -webkit-mask-image: url("/_astro/wavy.DYnjrnbj.svg");
    mask-image: url("/_astro/wavy.DYnjrnbj.svg");
    -webkit-mask-position: 0;
    mask-position: 0;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }

  progress.wavy::-moz-progress-bar {
    -webkit-mask-image: url("/_astro/wavy.DYnjrnbj.svg");
    mask-image: url("/_astro/wavy.DYnjrnbj.svg");
    -webkit-mask-position: 0;
    mask-position: 0;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }

  progress.circle {
    --_value: attr(value type(<number>),50);
    background: conic-gradient(currentColor calc(var(--_value, 0)*1%),var(--active) 0);
    border-radius: 50%;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    -webkit-mask-image: radial-gradient(circle, #0000 57%, currentColor 60%);
    mask-image: radial-gradient(circle, #0000 57%, currentColor 60%);
  }

  progress.circle::-webkit-progress-value {
    background: none;
  }

  progress.circle::-moz-progress-bar {
    background: none;
  }

  progress.circle.wavy {
    background: conic-gradient(currentColor calc(var(--_value, 0)*1%),var(--active) 0);
    -webkit-mask-image: url("/_astro/wavy-circle.BhSxxy_f.svg");
    mask-image: url("/_astro/wavy-circle.BhSxxy_f.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  progress.circle.small {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  progress.circle.large {
    block-size: 3.5rem;
    inline-size: 3.5rem;
  }

  progress.circle.indeterminate, progress.circle:not([value]) {
    --_value: 50;
    animation: 1s linear infinite to-rotate;
  }

  :is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
    flex: auto;
  }

  progress.max {
    display: unset;
    color: currentColor;
    border-radius: inherit;
    writing-mode: horizontal-tb;
    opacity: .33;
    background: none;
    animation: none;
    position: absolute;
    inset: 0;
    block-size: 100% !important;
    inline-size: 100% !important;
  }

  progress.max[class*="-text"] {
    opacity: 1;
  }

  progress.max + * {
    margin-block-start: 0;
  }

  :is(.button, button, .chip) > progress.circle {
    color: inherit;
  }

  .shape {
    color: var(--on-primary);
    background-color: var(--primary);
    border-radius: 0;
    justify-content: center;
    align-items: center;
    block-size: 3.5rem;
    inline-size: 3.5rem;
    display: flex;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .transparent > .shape > i {
    filter: invert();
  }

  .shape.tiny-space {
    -webkit-mask-size: 90%;
    mask-size: 90%;
  }

  .shape.small-space, .shape.space {
    -webkit-mask-size: 80%;
    mask-size: 80%;
  }

  .shape.medium-space {
    -webkit-mask-size: 70%;
    mask-size: 70%;
  }

  .shape.large-space {
    -webkit-mask-size: 60%;
    mask-size: 60%;
  }

  .shape.extra-space {
    -webkit-mask-size: 50%;
    mask-size: 50%;
  }

  .shape.tiny {
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }

  .shape.medium {
    block-size: 4.5rem;
    inline-size: 4.5rem;
  }

  .shape.large {
    block-size: 5.5rem;
    inline-size: 5.5rem;
  }

  .shape.extra {
    block-size: 6.5rem;
    inline-size: 6.5rem;
  }

  .shape.max, .shape > .responsive, .shape > .responsive > .responsive {
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .shape > .responsive {
    background: inherit;
    color: inherit;
  }

  .shape.rotate {
    animation: 12s linear infinite to-rotate;
  }

  .shape.rotate > * {
    animation: 12s linear infinite reverse to-rotate;
  }

  .shape.fast-rotate {
    animation: 6s linear infinite to-rotate;
  }

  .shape.fast-rotate > * {
    animation: 6s linear infinite reverse to-rotate;
  }

  .shape.slow-rotate {
    animation: 24s linear infinite to-rotate;
  }

  .shape.slow-rotate > * {
    animation: 24s linear infinite reverse to-rotate;
  }

  :is(button, .button, .chip):has( > .shape) > .responsive {
    border: none;
  }

  .shape.arch {
    -webkit-mask-image: url("/_astro/arch.BG_2Uirv.svg");
    mask-image: url("/_astro/arch.BG_2Uirv.svg");
  }

  .shape.arrow {
    -webkit-mask-image: url("/_astro/arrow.CzX7iTXB.svg");
    mask-image: url("/_astro/arrow.CzX7iTXB.svg");
  }

  .shape.boom {
    -webkit-mask-image: url("/_astro/boom.qibSMgDN.svg");
    mask-image: url("/_astro/boom.qibSMgDN.svg");
  }

  .shape.bun {
    -webkit-mask-image: url("/_astro/bun.D5xjQ66t.svg");
    mask-image: url("/_astro/bun.D5xjQ66t.svg");
  }

  .shape.burst {
    -webkit-mask-image: url("/_astro/burst.BfIpcqdF.svg");
    mask-image: url("/_astro/burst.BfIpcqdF.svg");
  }

  .shape.circle {
    -webkit-mask-image: url("/_astro/circle.D1e-JMO1.svg");
    mask-image: url("/_astro/circle.D1e-JMO1.svg");
  }

  .shape.clamshell {
    -webkit-mask-image: url("/_astro/clamshell.BtoI8Min.svg");
    mask-image: url("/_astro/clamshell.BtoI8Min.svg");
  }

  .shape.diamond {
    -webkit-mask-image: url("/_astro/diamond.BT8FQqkp.svg");
    mask-image: url("/_astro/diamond.BT8FQqkp.svg");
  }

  .shape.fan {
    -webkit-mask-image: url("/_astro/fan.lXPOj5Id.svg");
    mask-image: url("/_astro/fan.lXPOj5Id.svg");
  }

  .shape.flower {
    -webkit-mask-image: url("/_astro/flower.BU0IyJco.svg");
    mask-image: url("/_astro/flower.BU0IyJco.svg");
  }

  .shape.gem {
    -webkit-mask-image: url("/_astro/gem.BJQpftgW.svg");
    mask-image: url("/_astro/gem.BJQpftgW.svg");
  }

  .shape.ghost-ish {
    -webkit-mask-image: url("/_astro/ghost-ish.CcXqIjT9.svg");
    mask-image: url("/_astro/ghost-ish.CcXqIjT9.svg");
  }

  .shape.heart {
    -webkit-mask-image: url("/_astro/heart.xy0CMFn2.svg");
    mask-image: url("/_astro/heart.xy0CMFn2.svg");
  }

  .shape.leaf-clover4 {
    -webkit-mask-image: url("/_astro/leaf-clover4.vdRy-UuD.svg");
    mask-image: url("/_astro/leaf-clover4.vdRy-UuD.svg");
  }

  .shape.leaft-clover8 {
    -webkit-mask-image: url("/_astro/leaf-clover8.bIVFUiqO.svg");
    mask-image: url("/_astro/leaf-clover8.bIVFUiqO.svg");
  }

  .shape.loading-indicator {
    -webkit-mask-image: url("/_astro/loading-indicator.CinigV4e.svg");
    mask-image: url("/_astro/loading-indicator.CinigV4e.svg");
  }

  .shape.oval {
    -webkit-mask-image: url("/_astro/oval.DI79fqsg.svg");
    mask-image: url("/_astro/oval.DI79fqsg.svg");
  }

  .shape.pentagon {
    -webkit-mask-image: url("/_astro/pentagon.FQqMjGe1.svg");
    mask-image: url("/_astro/pentagon.FQqMjGe1.svg");
  }

  .shape.pill {
    -webkit-mask-image: url("/_astro/pill.CCfs_phq.svg");
    mask-image: url("/_astro/pill.CCfs_phq.svg");
  }

  .shape.pixel-circle {
    -webkit-mask-image: url("/_astro/pixel-circle.PJ8edfuV.svg");
    mask-image: url("/_astro/pixel-circle.PJ8edfuV.svg");
  }

  .shape.pixel-triangle {
    -webkit-mask-image: url("/_astro/pixel-triangle.C2H9UOJx.svg");
    mask-image: url("/_astro/pixel-triangle.C2H9UOJx.svg");
  }

  .shape.puffy {
    -webkit-mask-image: url("/_astro/puffy.Cccv-J94.svg");
    mask-image: url("/_astro/puffy.Cccv-J94.svg");
  }

  .shape.puffy-diamond {
    -webkit-mask-image: url("/_astro/puffy-diamond.ClX5jVRS.svg");
    mask-image: url("/_astro/puffy-diamond.ClX5jVRS.svg");
  }

  .shape.semicircle {
    -webkit-mask-image: url("/_astro/semicircle.DuCnU4wT.svg");
    mask-image: url("/_astro/semicircle.DuCnU4wT.svg");
  }

  .shape.sided-cookie4 {
    -webkit-mask-image: url("/_astro/sided-cookie4.D3AoUCdP.svg");
    mask-image: url("/_astro/sided-cookie4.D3AoUCdP.svg");
  }

  .shape.sided-cookie6 {
    -webkit-mask-image: url("/_astro/sided-cookie6.ChOD1omV.svg");
    mask-image: url("/_astro/sided-cookie6.ChOD1omV.svg");
  }

  .shape.sided-cookie7 {
    -webkit-mask-image: url("/_astro/sided-cookie7.DiY9NMgS.svg");
    mask-image: url("/_astro/sided-cookie7.DiY9NMgS.svg");
  }

  .shape.sided-cookie9 {
    -webkit-mask-image: url("/_astro/sided-cookie9.C0xPhlKV.svg");
    mask-image: url("/_astro/sided-cookie9.C0xPhlKV.svg");
  }

  .shape.sided-cookie12 {
    -webkit-mask-image: url("/_astro/sided-cookie12.BWhVBCZG.svg");
    mask-image: url("/_astro/sided-cookie12.BWhVBCZG.svg");
  }

  .shape.slanted {
    -webkit-mask-image: url("/_astro/slanted.B5_kan8M.svg");
    mask-image: url("/_astro/slanted.B5_kan8M.svg");
  }

  .shape.soft-boom {
    -webkit-mask-image: url("/_astro/soft-boom.CCpI58j3.svg");
    mask-image: url("/_astro/soft-boom.CCpI58j3.svg");
  }

  .shape.soft-burst {
    -webkit-mask-image: url("/_astro/soft-burst.CZHLyAPS.svg");
    mask-image: url("/_astro/soft-burst.CZHLyAPS.svg");
  }

  .shape.square {
    -webkit-mask-image: url("/_astro/square.Ml5crxM-.svg");
    mask-image: url("/_astro/square.Ml5crxM-.svg");
  }

  .shape.sunny {
    -webkit-mask-image: url("/_astro/sunny.CAfg7jSp.svg");
    mask-image: url("/_astro/sunny.CAfg7jSp.svg");
  }

  .shape.triangle {
    -webkit-mask-image: url("/_astro/triangle.BlOgECko.svg");
    mask-image: url("/_astro/triangle.BlOgECko.svg");
  }

  .shape.very-sunny {
    -webkit-mask-image: url("/_astro/very-sunny.vlAPxAWy.svg");
    mask-image: url("/_astro/very-sunny.vlAPxAWy.svg");
  }

  .checkbox, .radio, .switch {
    --_size: 1.5rem;
    white-space: nowrap;
    cursor: pointer;
    align-items: center;
    block-size: auto;
    inline-size: auto;
    line-height: normal;
    display: inline-flex;
  }

  .switch {
    direction: ltr;
  }

  :is(.checkbox, .radio, .switch).small {
    --_size: 1rem;
  }

  :is(.checkbox, .radio, .switch).large {
    --_size: 2rem;
  }

  :is(.checkbox, .radio, .switch).extra {
    --_size: 2.5rem;
  }

  :is(.checkbox, .radio) > input {
    inline-size: var(--_size);
    block-size: var(--_size);
    opacity: 0;
  }

  .switch > input {
    opacity: 0;
    block-size: 2rem;
    inline-size: 3.25rem;
  }

  :is(.checkbox, .radio, .switch) > span {
    color: var(--on-surface);
    align-items: center;
    min-block-size: .25rem;
    min-inline-size: .25rem;
    font-size: .875rem;
    display: inline-flex;
  }

  :is(.checkbox, .radio) > span:not(:empty) {
    padding-inline-start: .25rem;
  }

  :is(.checkbox, .radio) > span:after, :is(.checkbox, .radio, .switch) > span:before, :is(.checkbox, .radio, .switch) > span > i {
    --_size: inherit;
    content: "";
    inline-size: var(--_size);
    block-size: var(--_size);
    box-sizing: border-box;
    color: var(--primary);
    inset: auto auto auto calc(var(--_size, 0)*-1);
    -webkit-user-select: none;
    user-select: none;
    z-index: 1;
    border-radius: 50%;
    outline: none;
    margin: 0 auto;
    position: absolute;
  }

  [dir="rtl"] :is(.checkbox, .radio) > span:after, [dir="rtl"] :is(.checkbox, .radio) > span:before, [dir="rtl"] :is(.checkbox, .radio) > span > i {
    --_size: inherit;
    inset: auto calc(var(--_size, 0)*-1) auto auto;
  }

  .switch.icon > span > i, .switch > span:before {
    transition: all var(--speed2);
    font-size: calc(var(--_size, 0) - .5rem);
    -webkit-user-select: none;
    user-select: none;
    min-inline-size: var(--_size);
    min-block-size: var(--_size);
    content: "";
    color: var(--surface-variant);
    background-color: var(--outline);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    inset: 50% auto auto 0;
    transform: translate(-3rem, -50%) scale(.6);
  }

  .switch.icon > span > i {
    transform: translate(-3rem, -50%) scale(1);
  }

  .checkbox > span:before {
    content: "check_box_outline_blank";
  }

  .checkbox > input:checked + span:before {
    content: "check_box";
    font-variation-settings: "FILL" 1;
  }

  .checkbox > input:indeterminate + span:before {
    content: "indeterminate_check_box";
  }

  .radio > span:before {
    content: "radio_button_unchecked";
  }

  .radio > input:checked + span:before {
    content: "radio_button_checked";
  }

  :is(.radio, .checkbox, .switch).icon > span:before {
    content: "" !important;
    font-variation-settings: unset !important;
  }

  :is(.checkbox, .radio) > span:after {
    transition: all var(--speed1);
    opacity: 0;
    background-color: currentColor;
    box-shadow: 0 0;
  }

  :is(.checkbox, .radio):hover > input:not(:disabled) + span:after, :is(.checkbox, .radio) > input:not(:disabled):focus + span:after {
    opacity: .1;
    box-shadow: 0 0 0 .5rem;
  }

  .switch.icon > input:not(:disabled):is(:focus, :hover) + span > i, .switch > input:not(:disabled):is(:focus, :hover) + span:before {
    box-shadow: 0 0 0 .5rem var(--active);
  }

  :is(.checkbox, .radio).icon > input:checked + span > i, :is(.checkbox, .radio) > input:checked + span:before {
    color: var(--primary);
  }

  .icon > input:checked + span > i:first-child, .icon > span > i:last-child {
    opacity: 0;
  }

  .icon > input:checked + span > i:last-child, .icon > span > i:first-child {
    opacity: 1;
  }

  .switch > input:checked + span:after {
    background-color: var(--primary);
    border: none;
  }

  .switch.icon > input:checked + span > i, .switch > input:checked + span:before {
    content: "check";
    color: var(--primary);
    background-color: var(--on-primary);
    transform: translate(-1.75rem, -50%) scale(1);
  }

  .switch.icon > input:active:not(:disabled) + span > i, .switch > input:active:not(:disabled) + span:before {
    transform: translate(-3rem, -50%) scale(1.2);
  }

  [dir="rtl"] .switch.icon > input:active:not(:disabled) + span > i, [dir="rtl"] .switch > input:active:not(:disabled) + span:before {
    transform: translate(-3rem, -50%) scale(-1.2);
  }

  .switch.icon > input:active:checked:not(:disabled) + span > i, .switch > input:active:checked:not(:disabled) + span:before {
    transform: translate(-1.75rem, -50%) scale(1.2);
  }

  [dir="rtl"] .switch.icon > input:active:checked:not(:disabled) + span > i, [dir="rtl"] .switch > input:active:checked:not(:disabled) + span:before {
    transform: translate(-1.75rem, -50%) scale(-1.2);
  }

  :is(.checkbox, .radio, .switch) > input:disabled + span {
    opacity: .5;
    cursor: not-allowed;
  }

  .switch > span:after {
    content: "";
    background-color: var(--active);
    border: .125rem solid var(--outline);
    box-sizing: border-box;
    border-radius: 2rem;
    block-size: 2rem;
    inline-size: 3.25rem;
    position: absolute;
    inset: 50% auto auto 0;
    transform: translate(-3.25rem, -50%);
  }

  .field > :is(nav, .row) {
    flex-grow: 1;
    padding: 0 1rem;
  }

  .field.round > :is(nav, .row) {
    flex-grow: 1;
    padding: 0 1.5rem;
  }

  [dir="rtl"] .switch {
    transform: scale(-1);
  }

  [dir="rtl"] .switch.icon > span > i, [dir="rtl"] .switch > span:before {
    transform: translate(-3rem, -50%) scale(-.6);
  }

  [dir="rtl"] .switch.icon > span > i {
    transform: translate(-3rem, -50%) scale(-1);
  }

  [dir="rtl"] .switch.icon > input:checked + span > i, [dir="rtl"] .switch > input:checked + span:before {
    transform: translate(-1.75rem, -50%) scale(-1);
  }

  .switch > :focus-visible + span:after {
    outline: .125rem solid var(--primary);
    outline-offset: .25rem;
  }

  :is(.checkbox, .radio) > :focus-visible + span:before {
    outline: .125rem solid var(--primary);
    outline-offset: .375rem;
  }

  :is(nav, .row) > :is(.checkbox, .radio, .switch) {
    margin: 0 .25rem;
  }

  .slider {
    --_start: 0%;
    --_end: 0%;
    --_value1: "";
    --_value2: "";
    --_track: 1rem;
    --_thumb: max(2.5rem,calc(var(--_track, 0) + .5rem));
    inline-size: auto;
    block-size: var(--_thumb);
    color: var(--primary);
    direction: ltr;
    flex: none;
    margin: 0 1.25rem;
    display: flex;
    align-items: center !important;
  }

  [dir="rtl"] .slider {
    transform: scaleX(-1);
  }

  .slider.vertical {
    inline-size: 100%;
    padding: 50% 0;
    transform: rotate(-90deg);
    flex-direction: row !important;
    margin: .5rem auto !important;
  }

  .slider.tiny {
    --_track: 1rem;
  }

  .slider.small {
    --_track: 1.5rem;
  }

  .slider.medium {
    --_track: 2.5rem;
  }

  .slider.large {
    --_track: 3.5rem;
  }

  .slider.extra {
    --_track: 6rem;
  }

  .slider > input {
    appearance: none;
    box-shadow: none;
    pointer-events: none;
    inline-size: 100%;
    block-size: var(--_track);
    z-index: 1;
    touch-action: none;
    background: none;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    transform: rotate(0);
  }

  .slider > input:only-of-type {
    pointer-events: all;
  }

  .slider > input ~ input {
    position: absolute;
  }

  .slider > input::-webkit-slider-thumb {
    appearance: none;
    box-shadow: none;
    pointer-events: all;
    block-size: var(--_thumb);
    cursor: grab;
    z-index: 1;
    background: currentColor;
    border: none;
    border-radius: .25rem;
    outline: none;
    inline-size: .25rem;
    margin: 0;
  }

  .slider > input::-webkit-slider-thumb:active {
    cursor: grabbing;
  }

  .slider > input::-moz-range-thumb {
    appearance: none;
    box-shadow: none;
    pointer-events: all;
    background: var(--primary);
    cursor: grab;
    border: none;
    border-radius: .25rem;
    outline: none;
    block-size: 2.75rem;
    inline-size: .25rem;
    margin: 0;
  }

  .slider > input::-moz-range-thumb:active {
    cursor: grabbing;
  }

  .slider > input:not(:disabled):focus::-webkit-slider-thumb {
    transform: scaleX(.6);
  }

  .slider > input:not(:disabled):focus::-moz-range-thumb {
    transform: scaleX(.6);
  }

  .slider > input:disabled {
    cursor: not-allowed;
    opacity: 1;
  }

  .slider > input:disabled::-webkit-slider-thumb {
    background: var(--outline);
    cursor: not-allowed;
  }

  .slider > input:disabled::-moz-range-thumb {
    background: var(--outline);
    cursor: not-allowed;
  }

  .slider > input:disabled ~ span:not([class]) {
    background: var(--outline);
  }

  .slider > span:not([class]) {
    block-size: var(--_track);
    color: currentColor;
    z-index: 0;
    inset: calc(50% - var(--_track, 0)/2) calc(var(--_end) + .5rem) auto var(--_start);
    background: currentColor;
    border-radius: 1rem 0 0 1rem;
    position: absolute;
  }

  .slider > input[type="range"] + input[type="range"] ~ span:not([class]) {
    inset: calc(50% - var(--_track, 0)/2) calc(var(--_end) + .5rem) auto calc(var(--_start) + .5rem);
    border-radius: 0;
  }

  .field > .slider, .slider:before {
    inline-size: 100%;
  }

  .slider:before {
    content: "";
    block-size: var(--_track);
    background: var(--active);
    clip-path: polygon(calc(var(--_start, 0) - .5rem) 0,0 0,0 100%,calc(var(--_start, 0) - .5rem) 100%,calc(var(--_start, 0) - .5rem) 0,calc(100% - var(--_end, 0) + .5rem) 0,100% 0,100% 100%,calc(100% - var(--_end, 0) + .5rem) 100%,calc(100% - var(--_end, 0) + .5rem) 0);
    border-radius: 1rem;
    position: absolute;
  }

  .slider:has( > [disabled]):before {
    background: var(--active);
  }

  .slider:has([disabled]) {
    opacity: .62;
  }

  .slider > span > i {
    block-size: auto;
    color: var(--inverse-primary);
    z-index: 1;
    position: absolute;
    inset: 0 auto 0 .5rem;
  }

  .slider:not(.medium, .large, .extra) > span > i {
    display: none;
  }

  .slider.vertical > i {
    transform: rotate(90deg);
  }

  .slider > .tooltip {
    inset: 0 auto auto calc(100% - var(--_end, 0));
    transition: top var(--speed2) ease,opacity var(--speed2) ease;
    border-radius: 2rem;
    padding: .75rem 1rem;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translate(-50%, -25%) !important;
  }

  .slider > .tooltip.bottom {
    inset: auto auto 0 calc(100% - var(--_end, 0));
    transition: bottom var(--speed2) ease,opacity var(--speed2) ease;
    transform: translate(-50%, 25%) !important;
  }

  [dir="rtl"] .slider > .tooltip {
    transform: translate(-50%, -25%) scaleX(-1) !important;
  }

  [dir="rtl"] .slider > .tooltip.bottom {
    transform: translate(-50%, 25%) scaleX(-1) !important;
  }

  .slider > .tooltip + .tooltip {
    inset: .25rem calc(100% - var(--_start, 0)) auto auto;
    transform: translate(50%, -25%) !important;
  }

  .slider > .tooltip + .tooltip.bottom {
    inset: auto calc(100% - var(--_start, 0)) -.25rem auto;
    transform: translate(50%, 25%) !important;
  }

  [dir="rtl"] .slider > .tooltip + .tooltip {
    transform: translate(50%, -25%) scaleX(-1) !important;
  }

  [dir="rtl"] .slider > .tooltip + .tooltip.bottom {
    transform: translate(50%, 25%) scaleX(-1) !important;
  }

  .slider > .tooltip:before {
    content: var(--_value1);
  }

  .slider > .tooltip + .tooltip:before {
    content: var(--_value2);
  }

  .slider > :focus ~ .tooltip {
    inset-block: -1rem auto;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .slider > :focus ~ .tooltip.bottom {
    inset-block: auto -1rem;
  }

  .slider.vertical > .tooltip {
    block-size: 2.5rem;
    inline-size: 2.5rem;
    inset-block: auto;
    margin-block: calc(var(--_thumb, 0)*-1) 0 !important;
    transform: rotate(90deg) translate(-75%, 50%) !important;
  }

  .slider.vertical > .tooltip.bottom {
    inset-block: auto;
    margin-block: 0 calc(var(--_thumb, 0)*-1) !important;
    transform: rotate(90deg) translate(75%, 50%) !important;
  }

  .slider.vertical > .tooltip + .tooltip {
    transform: rotate(90deg) translate(-75%, -50%) !important;
  }

  .slider.vertical > .tooltip + .tooltip.bottom {
    transform: rotate(90deg) translate(75%, -50%) !important;
  }

  :is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
    flex: auto;
  }

  .slider.max, .slider.max.vertical, .slider.max.vertical > input, .slider.max > input {
    all: unset;
    color: var(--primary);
    border-radius: inherit;
    z-index: 2;
    cursor: grab;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    margin: 0 !important;
  }

  .slider.max:before {
    display: none;
  }

  .slider.max.vertical > input {
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
  }

  .slider.max > input::-webkit-slider-thumb {
    opacity: 0;
    block-size: 100vh;
    inline-size: 1rem;
    transform: none !important;
  }

  .slider.max > input::-moz-range-thumb {
    opacity: 0;
    block-size: 100vh;
    inline-size: 1rem;
    transform: none !important;
  }

  .slider.max > span:not([class]) {
    inset: 0 var(--_end) 0 var(--_start);
    color: inherit;
    background: currentColor;
    border-radius: 0;
    block-size: auto !important;
  }

  .slider.max.vertical > span:not([class]) {
    inset: var(--_end) 0 var(--_start) 0;
  }

  .slider > input:focus-visible::-webkit-slider-thumb {
    outline: .1875rem solid var(--primary);
    outline-offset: .25rem;
  }

  .slider > input:focus-visible::-moz-range-thumb {
    outline: .1875rem solid var(--primary);
    outline-offset: .25rem;
  }

  .slider.max > input:focus-visible {
    outline: .1875rem solid var(--primary);
    outline-offset: -.125rem;
  }

  @media (pointer: coarse) {
    .slider > :hover ~ .tooltip {
      opacity: 1 !important;
      visibility: visible !important;
      inset-block: -1rem auto !important;
    }

    .slider > :hover ~ .tooltip.bottom {
      inset-block: auto -1rem !important;
    }
  }

  .snackbar {
    z-index: 200;
    visibility: hidden;
    block-size: auto;
    inline-size: 80%;
    box-shadow: var(--elevate2);
    color: var(--inverse-on-surface);
    background-color: var(--inverse-surface);
    cursor: pointer;
    text-align: start;
    transition: all var(--speed2);
    opacity: 0;
    border-radius: .25rem;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    display: flex;
    position: fixed;
    inset: auto auto 6rem 50%;
    transform: translate(-50%, 1rem);
  }

  .snackbar.top {
    inset: 6rem auto auto 50%;
  }

  .snackbar.active {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%);
  }

  .snackbar:popover-open {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%);
  }

  .snackbar > .max {
    flex: auto;
  }

  @media only screen and (min-width: 993px) {
    .snackbar {
      inline-size: 40%;
    }
  }

  table {
    border-spacing: 0;
    text-align: start;
    inline-size: 100%;
    font-size: .875rem;
  }

  .scroll > table, table :is(thead, tbody, tfoot, tr, th, td) {
    background-color: inherit;
    color: inherit;
  }

  :is(th, td) {
    inline-size: auto;
    text-align: inherit;
    border-radius: 0;
    padding: .5rem;
  }

  :is(th, td) > * {
    vertical-align: middle;
  }

  table.border > tbody > tr:not(:last-child) > td, thead > tr > th {
    border-block-end: .0625rem solid var(--outline);
  }

  tfoot > tr > th {
    border-block-start: .0625rem solid var(--outline);
  }

  table.stripes > tbody > tr:nth-child(odd) {
    background-color: var(--active);
  }

  table.no-space :is(th, td) {
    padding: 0;
  }

  table.medium-space :is(th, td) {
    padding: .75rem;
  }

  table.large-space :is(th, td) {
    padding: 1rem;
  }

  table > .fixed, th.fixed {
    z-index: 1;
    position: sticky;
    inset-block-start: 0;
  }

  tfoot th.fixed, tfoot.fixed {
    inset-block-end: 0;
  }

  :is(td, th).min {
    white-space: nowrap;
    inline-size: .1%;
  }

  .tabs {
    white-space: nowrap;
    border-block-end: .0625rem solid var(--surface-variant);
    border-radius: 0;
    display: flex;
  }

  .tabs:not(.left-align, .right-align, .center-align) {
    justify-content: space-around;
  }

  .tabs > a {
    color: var(--on-surface-variant);
    text-align: center;
    gap: .25rem;
    min-block-size: 3rem;
    inline-size: 100%;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
  }

  .tabs.small > a {
    min-block-size: 2rem;
  }

  .tabs.large > a {
    min-block-size: 4rem;
  }

  .tabs > a.active, .tabs > a.active > i {
    color: var(--primary);
  }

  .tabs > a.active:before {
    content: "";
    background-color: var(--primary);
    block-size: .125rem;
    position: absolute;
    inset: auto 0 0;
  }

  .tabs.min > a.active:before {
    max-inline-size: min(100%, 4rem);
    margin: 0 auto;
  }

  .tabs:is(.left-align, .center-align, .right-align) > a {
    inline-size: auto;
  }

  .tooltip {
    --_space: -.5rem;
    background-color: var(--inverse-surface);
    color: var(--inverse-on-surface);
    text-align: center;
    z-index: 200;
    white-space: nowrap;
    inline-size: auto;
    transition: all var(--speed2);
    border-radius: .25rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: normal;
    display: flex;
    position: absolute;
    inset: 0 auto auto 50%;
    transform: translate(-50%, -100%) scale(.9);
  }

  .tooltip, .tooltip:not(.max):hover {
    visibility: hidden;
    opacity: 0;
  }

  .tooltip.left {
    inset: 50% auto auto 0;
    transform: translate(-100%, -50%) scale(.9);
  }

  .tooltip.right {
    inset: 50% 0 auto auto;
    transform: translate(100%, -50%) scale(.9);
  }

  .tooltip.bottom {
    inset: auto auto 0 50%;
    transform: translate(-50%, 100%) scale(.9);
  }

  .tooltip.small {
    white-space: normal;
    inline-size: 8rem;
  }

  .tooltip.medium {
    white-space: normal;
    inline-size: 12rem;
  }

  .tooltip.large {
    white-space: normal;
    inline-size: 16rem;
  }

  :hover > .tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }

  :hover > .tooltip.left {
    transform: translate(-100%, -50%) scale(1);
  }

  :hover > .tooltip.right {
    transform: translate(100%, -50%) scale(1);
  }

  :hover > .tooltip.bottom {
    transform: translate(-50%, 100%) scale(1);
  }

  .tooltip.no-space {
    --_space: 0;
  }

  .tooltip.medium-space {
    --_space: -1rem;
  }

  .tooltip.large-space {
    --_space: -1.5rem;
  }

  .tooltip:not(.left, .right, .bottom) {
    margin-block-start: var(--_space) !important;
  }

  .tooltip.left, .tooltip.right {
    margin-inline: var(--_space) !important;
  }

  .tooltip.bottom {
    margin-block-end: var(--_space) !important;
  }

  .field > :focus ~ menu ~ .tooltip, :is(button, .button):focus > menu ~ .tooltip, menu:active ~ .tooltip {
    visibility: hidden;
  }

  .slider > .tooltip {
    --_space: -1.25rem;
  }

  .slider.vertical > .tooltip {
    --_space: -.75rem;
  }

  .slider.vertical > .tooltip:is(.left, .right) {
    --_space: -.5rem;
  }

  .tooltip.max {
    font-size: inherit;
    white-space: normal;
    text-align: start;
    inline-size: 20rem;
    box-shadow: var(--elevate2);
    border-radius: .5rem;
    padding: 1rem;
    display: block;
  }

  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    align-items: center;
    font-weight: 400;
    line-height: normal;
    display: block;
  }

  .h1, h1 {
    font-size: 3.5625rem;
  }

  .h2, h2 {
    font-size: 2.8125rem;
  }

  .h3, h3 {
    font-size: 2.25rem;
  }

  .h4, h4 {
    font-size: 2rem;
  }

  .h5, h5 {
    font-size: 1.75rem;
  }

  .h6, h6 {
    font-size: 1.5rem;
  }

  :is(h1, .h1).small {
    font-size: 3.0625rem;
  }

  :is(h2, .h2).small {
    font-size: 2.3125rem;
  }

  :is(h3, .h3).small {
    font-size: 1.75rem;
  }

  :is(h4, .h4).small {
    font-size: 1.5rem;
  }

  :is(h5, .h5).small {
    font-size: 1.25rem;
  }

  :is(h6, .h6).small {
    font-size: 1rem;
  }

  :is(h1, .h1).large {
    font-size: 4.0625rem;
  }

  :is(h2, .h2).large {
    font-size: 3.3125rem;
  }

  :is(h3, .h3).large {
    font-size: 2.75rem;
  }

  :is(h4, .h4).large {
    font-size: 2.5rem;
  }

  :is(h5, .h5).large {
    font-size: 2.25rem;
  }

  :is(h6, .h6).large {
    font-size: 2rem;
  }

  .link {
    color: var(--primary) !important;
  }

  .inverse-link {
    color: var(--inverse-primary) !important;
  }

  .truncate {
    text-overflow: ellipsis;
    flex: inherit;
    overflow: hidden;
  }

  .truncate, .truncate > * {
    white-space: nowrap !important;
  }

  .small-text {
    font-size: .75rem;
  }

  .medium-text {
    font-size: .875rem;
  }

  .large-text {
    font-size: 1rem;
  }

  .upper {
    text-transform: uppercase;
  }

  .lower {
    text-transform: lowercase;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .bold {
    font-weight: 700;
  }

  .overline {
    text-decoration: line-through;
  }

  .underline {
    text-decoration: underline;
  }

  .italic {
    font-style: italic;
  }

  p {
    margin: .5rem 0;
  }

  .no-line {
    line-height: normal;
  }

  .tiny-line {
    line-height: 1.25rem;
  }

  .small-line {
    line-height: 1.5rem;
  }

  .medium-line {
    line-height: 1.75rem;
  }

  .large-line {
    line-height: 2rem;
  }

  .extra-line {
    line-height: 2.25rem;
  }

  pre {
    background-color: var(--surface-container);
    white-space: pre-wrap;
  }

  blockquote, pre {
    border-inline-start: .25rem solid var(--primary);
    border-radius: 0;
    padding: 1rem;
    font-family: inherit;
  }

  code {
    background-color: var(--surface-container);
    white-space: pre-wrap;
    border-radius: 0;
    padding: .25rem;
  }

  blockquote > code, pre > code {
    padding: 0;
  }

  .scroll > code {
    white-space: pre;
  }

  pre:has( > code) {
    text-align: start;
    direction: ltr;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }
}

@layer components;

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

  .tw\:absolute {
    position: absolute;
  }

  .tw\:relative {
    position: relative;
  }

  .tw\:inset-0 {
    inset: 0;
  }

  .tw\:m-0 {
    margin: 0;
  }

  .tw\:mx-0 {
    margin-inline: 0;
  }

  .tw\:mx-0\.5 {
    margin-inline: calc(var(--tw-spacing) * .5);
  }

  .tw\:mx-4 {
    margin-inline: calc(var(--tw-spacing) * 4);
  }

  .tw\:mx-auto\! {
    margin-inline: auto !important;
  }

  .tw\:mt-0 {
    margin-top: 0;
  }

  .tw\:mt-2 {
    margin-top: calc(var(--tw-spacing) * 2);
  }

  .tw\:mt-3 {
    margin-top: calc(var(--tw-spacing) * 3);
  }

  .tw\:mt-4 {
    margin-top: calc(var(--tw-spacing) * 4);
  }

  .tw\:mt-6 {
    margin-top: calc(var(--tw-spacing) * 6);
  }

  .tw\:mt-8 {
    margin-top: calc(var(--tw-spacing) * 8);
  }

  .tw\:mt-8\! {
    margin-top: calc(var(--tw-spacing) * 8) !important;
  }

  .tw\:mr-2 {
    margin-right: calc(var(--tw-spacing) * 2);
  }

  .tw\:mb-0 {
    margin-bottom: 0;
  }

  .tw\:mb-0\! {
    margin-bottom: 0 !important;
  }

  .tw\:mb-1 {
    margin-bottom: var(--tw-spacing);
  }

  .tw\:mb-2 {
    margin-bottom: calc(var(--tw-spacing) * 2);
  }

  .tw\:mb-3 {
    margin-bottom: calc(var(--tw-spacing) * 3);
  }

  .tw\:mb-6 {
    margin-bottom: calc(var(--tw-spacing) * 6);
  }

  .tw\:mb-8 {
    margin-bottom: calc(var(--tw-spacing) * 8);
  }

  .tw\:mb-8\! {
    margin-bottom: calc(var(--tw-spacing) * 8) !important;
  }

  .tw\:mb-12 {
    margin-bottom: calc(var(--tw-spacing) * 12);
  }

  .tw\:ml-6 {
    margin-left: calc(var(--tw-spacing) * 6);
  }

  .tw\:block {
    display: block;
  }

  .tw\:flex {
    display: flex;
  }

  .tw\:flex\! {
    display: flex !important;
  }

  .tw\:grid {
    display: grid;
  }

  .tw\:grid\! {
    display: grid !important;
  }

  .tw\:hidden {
    display: none;
  }

  .tw\:inline {
    display: inline;
  }

  .tw\:inline-flex {
    display: inline-flex;
  }

  .tw\:h-32 {
    height: calc(var(--tw-spacing) * 32);
  }

  .tw\:h-37\.5 {
    height: calc(var(--tw-spacing) * 37.5);
  }

  .tw\:h-45 {
    height: calc(var(--tw-spacing) * 45);
  }

  .tw\:h-full {
    height: 100%;
  }

  .tw\:w-32 {
    width: calc(var(--tw-spacing) * 32);
  }

  .tw\:w-37\.5 {
    width: calc(var(--tw-spacing) * 37.5);
  }

  .tw\:w-45 {
    width: calc(var(--tw-spacing) * 45);
  }

  .tw\:w-full {
    width: 100%;
  }

  .tw\:max-w-3xl {
    max-width: var(--tw-container-3xl);
  }

  .tw\:max-w-7xl\! {
    max-width: var(--tw-container-7xl) !important;
  }

  .tw\:max-w-215\! {
    max-width: calc(var(--tw-spacing) * 215) !important;
  }

  .tw\:max-w-none {
    max-width: none;
  }

  .tw\:min-w-0 {
    min-width: 0;
  }

  .tw\:flex-1 {
    flex: 1;
  }

  .tw\:shrink-0 {
    flex-shrink: 0;
  }

  .tw\:list-none {
    list-style-type: none;
  }

  .tw\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tw\:flex-col {
    flex-direction: column;
  }

  .tw\:flex-row {
    flex-direction: row;
  }

  .tw\:flex-row\! {
    flex-direction: row !important;
  }

  .tw\:flex-wrap {
    flex-wrap: wrap;
  }

  .tw\:items-center {
    align-items: center;
  }

  .tw\:items-start {
    align-items: flex-start;
  }

  .tw\:justify-between {
    justify-content: space-between;
  }

  .tw\:justify-center {
    justify-content: center;
  }

  .tw\:justify-center\! {
    justify-content: center !important;
  }

  .tw\:gap-1 {
    gap: var(--tw-spacing);
  }

  .tw\:gap-2 {
    gap: calc(var(--tw-spacing) * 2);
  }

  .tw\:gap-3 {
    gap: calc(var(--tw-spacing) * 3);
  }

  .tw\:gap-4 {
    gap: calc(var(--tw-spacing) * 4);
  }

  .tw\:gap-5 {
    gap: calc(var(--tw-spacing) * 5);
  }

  .tw\:gap-6 {
    gap: calc(var(--tw-spacing) * 6);
  }

  .tw\:self-center {
    align-self: center;
  }

  .tw\:overflow-hidden {
    overflow: hidden;
  }

  .tw\:rounded-xl {
    border-radius: var(--tw-radius-xl);
  }

  .tw\:border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .tw\:border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .tw\:border-\[color-mix\(in_srgb\,var\(--site-border-color\)_40\%\,transparent\)\] {
    border-color: var(--site-border-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tw\:border-\[color-mix\(in_srgb\,var\(--site-border-color\)_40\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--site-border-color) 40%,transparent);
    }
  }

  .tw\:bg-\[\#00000022\] {
    background-color: #0002;
  }

  .tw\:bg-\[color-mix\(in_srgb\,var\(--site-surface\)_92\%\,black_8\%\)\] {
    background-color: var(--site-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tw\:bg-\[color-mix\(in_srgb\,var\(--site-surface\)_92\%\,black_8\%\)\] {
      background-color: color-mix(in srgb,var(--site-surface) 92%,black 8%);
    }
  }

  .tw\:bg-none {
    background-image: none;
  }

  .tw\:object-cover {
    object-fit: cover;
  }

  .tw\:p-0 {
    padding: 0;
  }

  .tw\:p-4 {
    padding: calc(var(--tw-spacing) * 4);
  }

  .tw\:p-5 {
    padding: calc(var(--tw-spacing) * 5);
  }

  .tw\:p-8 {
    padding: calc(var(--tw-spacing) * 8);
  }

  .tw\:px-0 {
    padding-inline: 0;
  }

  .tw\:px-1 {
    padding-inline: var(--tw-spacing);
  }

  .tw\:pb-3\! {
    padding-bottom: calc(var(--tw-spacing) * 3) !important;
  }

  .tw\:pb-12\! {
    padding-bottom: calc(var(--tw-spacing) * 12) !important;
  }

  .tw\:pl-4 {
    padding-left: calc(var(--tw-spacing) * 4);
  }

  .tw\:text-center {
    text-align: center;
  }

  .tw\:text-4xl {
    font-size: var(--tw-text-4xl);
    line-height: var(--tw-leading, var(--tw-text-4xl--line-height));
  }

  .tw\:text-base {
    font-size: var(--tw-text-base);
    line-height: var(--tw-leading, var(--tw-text-base--line-height));
  }

  .tw\:text-sm {
    font-size: var(--tw-text-sm);
    line-height: var(--tw-leading, var(--tw-text-sm--line-height));
  }

  .tw\:text-xl {
    font-size: var(--tw-text-xl);
    line-height: var(--tw-leading, var(--tw-text-xl--line-height));
  }

  .tw\:text-\[1\.9rem\] {
    font-size: 1.9rem;
  }

  .tw\:text-\[1\.15em\] {
    font-size: 1.15em;
  }

  .tw\:text-\[2rem\] {
    font-size: 2rem;
  }

  .tw\:leading-relaxed {
    --tw-leading: var(--tw-leading-relaxed);
    line-height: var(--tw-leading-relaxed);
  }

  .tw\:leading-tight {
    --tw-leading: var(--tw-leading-tight);
    line-height: var(--tw-leading-tight);
  }

  .tw\:font-bold {
    --tw-font-weight: var(--tw-font-weight-bold);
    font-weight: var(--tw-font-weight-bold);
  }

  .tw\:font-normal {
    --tw-font-weight: var(--tw-font-weight-normal);
    font-weight: var(--tw-font-weight-normal);
  }

  .tw\:font-semibold {
    --tw-font-weight: var(--tw-font-weight-semibold);
    font-weight: var(--tw-font-weight-semibold);
  }

  .tw\:text-\[rgb\(var\(--gray\)\)\] {
    color: rgb(var(--gray));
  }

  .tw\:italic {
    font-style: italic;
  }

  .tw\:no-underline {
    text-decoration-line: none;
  }

  @media (min-width: 40rem) {
    .tw\:sm\:mx-0\.5 {
      margin-inline: calc(var(--tw-spacing) * .5);
    }

    .tw\:sm\:mx-1 {
      margin-inline: var(--tw-spacing);
    }

    .tw\:sm\:block {
      display: block;
    }

    .tw\:sm\:w-\[320px\] {
      width: 320px;
    }

    .tw\:sm\:shrink-0 {
      flex-shrink: 0;
    }

    .tw\:sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tw\:sm\:gap-1\.5 {
      gap: calc(var(--tw-spacing) * 1.5);
    }

    .tw\:sm\:gap-2 {
      gap: calc(var(--tw-spacing) * 2);
    }

    .tw\:sm\:px-1\.5 {
      padding-inline: calc(var(--tw-spacing) * 1.5);
    }
  }

  @media (min-width: 48rem) {
    .tw\:md\:block {
      display: block;
    }

    .tw\:md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tw\:md\:gap-6 {
      gap: calc(var(--tw-spacing) * 6);
    }
  }

  @media (min-width: 64rem) {
    .tw\:lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tw\:lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tw\:lg\:grid-cols-\[18rem_minmax\(0\,1fr\)_11\.25rem\] {
      grid-template-columns: 18rem minmax(0, 1fr) 11.25rem;
    }

    .tw\:lg\:justify-self-end {
      justify-self: flex-end;
    }

    .tw\:lg\:text-\[1\.1rem\] {
      font-size: 1.1rem;
    }

    .tw\:lg\:text-\[1\.15rem\] {
      font-size: 1.15rem;
    }

    .tw\:lg\:text-\[2\.15rem\] {
      font-size: 2.15rem;
    }

    .tw\:lg\:text-\[2\.35rem\] {
      font-size: 2.35rem;
    }
  }

  @media (min-width: 80rem) {
    .tw\:xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .tw\:\[\&_blockquote_p\]\:italic blockquote p {
    font-style: italic;
  }

  .tw\:\[\&_img\]\:mx-auto img {
    margin-inline: auto;
  }

  .tw\:\[\&_img\]\:my-8 img {
    margin-block: calc(var(--tw-spacing) * 8);
  }

  .tw\:\[\&_img\]\:block img {
    display: block;
  }

  .tw\:\[\&_img\]\:max-h-\[50vh\] img {
    max-height: 50vh;
  }

  .tw\:\[\&_img\]\:max-w-4\/5 img {
    max-width: 80%;
  }

  .tw\:\[\&_img\]\:object-contain img {
    object-fit: contain;
  }

  .tw\:\[\&_p\>iframe\]\:mx-auto p > iframe {
    margin-inline: auto;
  }

  .tw\:\[\&_p\>iframe\]\:my-8 p > iframe {
    margin-block: calc(var(--tw-spacing) * 8);
  }

  .tw\:\[\&_p\>iframe\]\:max-h-\[50vh\] p > iframe {
    max-height: 50vh;
  }

  .tw\:\[\&_p\>iframe\]\:max-w-\[85\%\] p > iframe {
    max-width: 85%;
  }

  .tw\:\[\&_p\>iframe\]\:object-contain p > iframe {
    object-fit: contain;
  }

  .tw\:\[\&_p\>img\]\:mx-auto p > img {
    margin-inline: auto;
  }

  .tw\:\[\&_p\>img\]\:my-8 p > img {
    margin-block: calc(var(--tw-spacing) * 8);
  }

  .tw\:\[\&_p\>img\]\:max-h-\[50vh\] p > img {
    max-height: 50vh;
  }

  .tw\:\[\&_p\>img\]\:max-w-\[85\%\] p > img {
    max-width: 85%;
  }

  .tw\:\[\&_p\>img\]\:object-contain p > img {
    object-fit: contain;
  }

  .tw\:\[\&_ul\]\:ml-8 ul {
    margin-left: calc(var(--tw-spacing) * 8);
  }
}

:root {
  --primary: #41ad49;
  --on-primary: #fff;
  --site-surface: var(--surface, var(--pico-background-color, #fff));
  --site-on-surface: var(--on-surface, var(--pico-color, #111));
  --site-primary: var(--primary, var(--pico-primary, #41ad49));
  --site-on-primary: var(--on-primary, #fff);
  --site-border-color: var(--outline, var(--pico-muted-border-color, #d0d7de));
  --site-radius: var(--radius-s, var(--pico-border-radius, .5rem));
}

:root.dark {
  --surface: #1f1f22;
  --on-surface: #f3f4f6;
  --outline: #4b5563;
  --surface-dim: #141416;
  --surface-bright: #34353a;
  --surface-container-lowest: #111214;
  --surface-container-low: #1b1c20;
  --surface-container: #24262b;
  --surface-container-high: #2e3036;
  --surface-container-highest: #393b42;
  --on-surface-variant: #c5c7cf;
  --site-surface: #1f1f22;
  --site-on-surface: #f3f4f6;
  --site-border-color: #4b5563;
}

body {
  font-size: 1.06rem;
}

.reading-progress {
  z-index: 110;
  background: var(--site-surface);
  width: 100%;
  height: .26rem;
  position: fixed;
  top: 0;
  left: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .reading-progress {
    background: color-mix(in srgb, var(--site-surface) 88%, var(--site-border-color) 12%);
  }
}

.reading-progress {
  border-bottom: 1px solid var(--site-border-color);
}

@supports (color: color-mix(in lab, red, red)) {
  .reading-progress {
    border-bottom: 1px solid color-mix(in srgb, var(--site-border-color) 50%, transparent);
  }
}

.reading-progress {
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
}

.reading-progress__bar {
  transform-origin: 0;
  background: linear-gradient(90deg, var(--site-primary), var(--site-primary));
  height: 100%;
  transform: scaleX(0);
}

@supports (color: color-mix(in lab, red, red)) {
  .reading-progress__bar {
    background: linear-gradient(90deg, var(--site-primary), color-mix(in srgb, var(--site-primary) 65%, white 35%));
  }
}

.reading-progress__bar {
  will-change: transform;
  transition: transform .1s linear;
}

a {
  color: var(--site-primary);
  text-decoration: none;
}

a:visited {
  color: var(--site-primary);
}

a:hover {
  color: var(--site-primary);
  text-decoration: underline;
}

.title a:hover {
  text-decoration: none;
}

:where(h1, h2, h3) a {
  color: var(--site-primary);
  text-decoration: none;
}

:where(h1, h2, h3) a:hover {
  color: var(--site-primary);
  text-decoration: underline;
}

.heading-anchor {
  opacity: 0;
  margin-left: .4rem;
  font-size: .75em;
  text-decoration: none;
  transition: opacity .16s;
}

:where(h1, h2, h3):hover .heading-anchor, .heading-anchor:focus-visible {
  opacity: .7;
}

.external-link:after {
  content: " ↗";
  opacity: .75;
  vertical-align: .08em;
  font-size: .85em;
}

.hiddenlink, .hiddenlink a, .hiddenlink:visited, .hiddenlink:hover, .hiddenlink a:visited, .hiddenlink a:hover {
  color: inherit;
}

a[role="button"], a[role="button"]:visited, a[role="button"]:hover {
  border-radius: var(--site-radius);
  background-color: var(--site-primary);
  color: var(--site-on-primary);
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  padding: .7rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
}

a[role="button"]:hover {
  text-decoration: none;
}

a.secondary[role="button"], a.secondary[role="button"]:visited, a.secondary[role="button"]:hover {
  border-color: var(--site-border-color);
  color: var(--site-on-surface);
  background-color: #0000;
}

main.container {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.media-placeholder {
  border: 1px solid var(--site-border-color);
  border-radius: var(--site-radius);
  background-color: var(--site-surface);
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .media-placeholder {
    background-color: color-mix(in srgb, var(--site-surface) 94%, var(--site-border-color) 6%);
  }
}

.media-placeholder {
  background-position: center;
  background-repeat: no-repeat;
}

.media-placeholder--article {
  background-image: none;
}

.media-placeholder--article:before {
  content: "";
  background-color: var(--site-border-color);
  position: absolute;
  inset: 14%;
}

@supports (color: color-mix(in lab, red, red)) {
  .media-placeholder--article:before {
    background-color: color-mix(in srgb, var(--site-border-color) 80%, transparent);
  }
}

.media-placeholder--article:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 68 60%22%3E%3Cellipse fill=%22%23000%22 cx=%2241%22 cy=%2247.2%22 rx=%223%22 ry=%222.8%22/%3E%3Cpath fill=%22%23000%22 d=%22M37 26.5c-5.7 1-8.7-8.5 1-8.5 8.2 0 9.8 14.8-4 15 0 16 22.2 8.2 22-5 0-5.4-3.7-17-18-17-22.2 0-16.4 24.4-1 15.5z%22/%3E%3Cpath fill=%22%23000%22 d=%22M6 28S0 41.3 0 50l.5 3C9.5 19.7 16 32.6 24 31 7.3 16.2 27.3 4 40 4c20.4 0 34 25.5 16 40 13.4-7 12-18.4 12-20 0-5.6-5.3-24-28-24-11.7 0-22.2 5.8-25 15-11.2-.5-11 7.6-9 13zm30 24c-2 1.2-6.4-1-8 2 1.6-.3 3-.8 5 .2-1 1.8-7 2.2-8 4.8 3.4-1.6 6-.4 10-3-.3 1.2-.6 3 0 4 .5-1.2 1.5-2.3 2-3 4.4-2 5.4-1.5 8-2.5 2-.5 2.8-.4 3 0 4 3.4 2.8 3.3 4.5 4.5-.3-2-.7-2-1-3 2 .5 2 2.4 3.5 3-.4-4.6-3.7-7.5-6-7-3-1.2-6.3.5-8 1.6-3-1.7-3.3-1.7-5-1.6z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 68 60%22%3E%3Cellipse fill=%22%23000%22 cx=%2241%22 cy=%2247.2%22 rx=%223%22 ry=%222.8%22/%3E%3Cpath fill=%22%23000%22 d=%22M37 26.5c-5.7 1-8.7-8.5 1-8.5 8.2 0 9.8 14.8-4 15 0 16 22.2 8.2 22-5 0-5.4-3.7-17-18-17-22.2 0-16.4 24.4-1 15.5z%22/%3E%3Cpath fill=%22%23000%22 d=%22M6 28S0 41.3 0 50l.5 3C9.5 19.7 16 32.6 24 31 7.3 16.2 27.3 4 40 4c20.4 0 34 25.5 16 40 13.4-7 12-18.4 12-20 0-5.6-5.3-24-28-24-11.7 0-22.2 5.8-25 15-11.2-.5-11 7.6-9 13zm30 24c-2 1.2-6.4-1-8 2 1.6-.3 3-.8 5 .2-1 1.8-7 2.2-8 4.8 3.4-1.6 6-.4 10-3-.3 1.2-.6 3 0 4 .5-1.2 1.5-2.3 2-3 4.4-2 5.4-1.5 8-2.5 2-.5 2.8-.4 3 0 4 3.4 2.8 3.3 4.5 4.5-.3-2-.7-2-1-3 2 .5 2 2.4 3.5 3-.4-4.6-3.7-7.5-6-7-3-1.2-6.3.5-8 1.6-3-1.7-3.3-1.7-5-1.6z%22/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.media-placeholder--author {
  background-color: #0000;
  background-image: url("/images/author-placeholder.svg?v=10");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 96% 96%;
  border: 0;
  border-radius: 0;
}

.article-title-clamp {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical !important;
  display: -webkit-box !important;
}

.article-author-name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.article-date {
  font-style: italic;
}

.article-card-footer {
  margin-top: .2rem;
}

.article-card-date {
  margin-top: 0;
  margin-bottom: 0;
}

.article-grid-card {
  margin: 0 !important;
  margin-block: 0 !important;
}

.article-readtime {
  opacity: .78;
  margin: .2rem 0 0;
  font-size: .92rem;
  font-weight: 600;
}

.site-pagination {
  justify-content: center;
  width: 100%;
  line-height: 1.35;
  display: flex;
}

main.container :is(.tw\:grid, .tw\:flex) > article {
  margin: 0 !important;
}

main.container :is(.tw\:grid, .tw\:flex) > article > header {
  display: block !important;
}

main.container :is(.tw\:grid, .tw\:flex) > article > header > a {
  display: inline !important;
}

main.container :is(.tw\:grid, .tw\:flex) > article > header > a:has(img, picture, .media-placeholder) {
  display: block !important;
}

.article-derived-summary a {
  font-weight: 600;
}

.article-tags-panel {
  border: 1px solid var(--site-border-color);
  border-radius: var(--site-radius);
  background: var(--site-surface);
  margin-top: 2rem;
  padding: .8rem .9rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .article-tags-panel {
    background: color-mix(in srgb, var(--site-surface) 95%, var(--site-border-color) 5%);
  }
}

.article-tags-row {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .65rem 1.5rem;
  display: grid;
}

.article-tags-col {
  min-width: 0;
}

.article-tags-col--right {
  text-align: right;
}

.article-tags-meta {
  margin: 0;
  font-size: .9rem;
  line-height: 1.35;
}

.article-tags-meta a {
  font-weight: 600;
}

.article-tags-label {
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
  margin: 0 0 .2rem;
  font-size: .74rem;
  font-weight: 700;
  display: block;
}

.article-tags-list {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .article-tags-row {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .article-tags-col--right {
    text-align: left;
  }
}

.js-article-content :where(ul, ol) {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.js-article-content ul {
  list-style-type: disc;
}

.js-article-content ol {
  list-style-type: decimal;
}

.js-article-content li {
  margin: .25rem 0;
}

.js-article-content img {
  margin-inline: auto;
  display: block;
}

.js-article-content {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizelegibility;
  line-height: 1.68;
}

.js-article-content :where(h1, h2, h3, h4) {
  text-wrap: balance;
  line-height: 1.25;
}

.js-article-content p {
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.js-article-content blockquote {
  --quote-indent: clamp(1rem, 3vw, 2rem);
  --quote-mark-offset: .95rem;
  width: calc(100% - var(--quote-indent));
  border-left: 4px solid var(--site-primary);
  margin: 2.15rem 0;
  margin-inline-start: var(--quote-indent);
  margin-inline-end: 0;
  padding: 2.35rem 1.2rem 1.25rem 3.95rem;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .js-article-content blockquote {
    border-left: 4px solid color-mix(in srgb, var(--site-primary) 62%, transparent);
  }
}

.js-article-content blockquote {
  background: var(--site-surface);
  border-radius: .8rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .js-article-content blockquote {
    background: color-mix(in srgb, var(--site-surface) 90%, var(--site-primary) 10%);
  }
}

.js-article-content blockquote {
  box-shadow: 0 1px 0 var(--site-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .js-article-content blockquote {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--site-primary) 22%, transparent);
  }
}

.js-article-content blockquote {
  color: var(--site-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .js-article-content blockquote {
    color: color-mix(in srgb, var(--site-on-surface) 92%, black 8%);
  }
}

.js-article-content blockquote {
  overflow: hidden;
}

.js-article-content blockquote:before {
  content: "“";
  left: var(--quote-mark-offset);
  color: var(--site-primary);
  font-size: clamp(3rem, 7.2vw, 4.9rem);
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: .2rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .js-article-content blockquote:before {
    color: color-mix(in srgb, var(--site-primary) 62%, transparent);
  }
}

.js-article-content blockquote:before {
  pointer-events: none;
}

.js-article-content blockquote :is(p, ul, ol):first-child {
  margin-top: 0;
}

.js-article-content blockquote :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
/*
 * Why all the :is(*, #\#) prefixes?
 *
 * These components are embedded in who-knows-what sites with unpredictable CSS.
 * We need our styles to win against host page selectors like `.content p` or
 * `article a:hover` without using !important everywhere.
 *
 * The :is(*, #\#) trick adds ID-level specificity (0,1,0) without requiring
 * an actual ID in the DOM. Chaining it (2x or 3x) builds enough specificity
 * to beat most host selectors.
 *
 * The #\# is an escaped # character, creating an invalid-but-harmless ID
 * selector that never matches, but still contributes specificity via :is().
 *
 * We also need these overrides to only affect the Component UI elements themselves.
 * Users can provide custom templates to the results and searchbox components,
 * and these must inherit their styles without having to fight ours.
 *
 * It's admittedly a bit of a hack but it does provide best effort styling consistency
 * for the Component UI out in the wild.
 */

:root {
    --pf-text: #1a1a1a;
    --pf-text-secondary: #666;
    --pf-text-muted: #767676;
    --pf-background: #fff;
    --pf-border: #e0e0e0;
    --pf-border-focus: #999;
    --pf-skeleton: #eee;
    --pf-skeleton-shine: #f5f5f5;
    --pf-hover: #f5f5f5;
    --pf-mark: #1a1a1a;
    --pf-scroll-shadow: rgba(0, 0, 0, 0.08);

    --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);

    --pf-error-bg: #fef2f2;
    --pf-error-border: #fecaca;
    --pf-error-text: #dc2626;
    --pf-error-text-secondary: #b91c1c;

    --pf-outline-focus: #0969da;
    --pf-outline-width: 2px;
    --pf-outline-offset: 2px;

    --pf-font:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;

    --pf-input-height: 36px;
    --pf-input-font-size: 16px;
    --pf-summary-font-size: 12px;
    --pf-result-title-font-size: 14px;
    --pf-result-excerpt-font-size: 13px;
    --pf-modal-backdrop: rgba(0, 0, 0, 0.5);
    --pf-results-display: flex;
    --pf-results-flex-direction: column;
    --pf-results-flex-wrap: nowrap;
    --pf-results-columns: none;
    --pf-results-gap: 8px;

    --pf-border-radius: 6px;
    --pf-image-width: 64px;
    --pf-image-height: 48px;

    --pf-icon-search: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
    --pf-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --pf-dropdown-z-index: 9999;

    --pf-modal-max-width: 560px;
    --pf-modal-max-height: min(80dvh, 800px);
    --pf-modal-top: 10dvh;

    --pf-searchbox-max-width: 480px;
    --pf-searchbox-dropdown-max-height: 320px;

    --pf-dropdown-max-height: 280px;
}

[data-pf-theme="dark"] {
    --pf-text: #e5e5e5;
    --pf-text-secondary: #a0a0a0;
    --pf-text-muted: #949494;
    --pf-background: #1a1a1a;
    --pf-border: #333;
    --pf-border-focus: #555;
    --pf-skeleton: #2a2a2a;
    --pf-skeleton-shine: #333;
    --pf-hover: #252525;
    --pf-mark: #e5e5e5;
    --pf-scroll-shadow: rgba(255, 255, 255, 0.1);

    --pf-outline-focus: #58a6ff;

    --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

    --pf-error-bg: #2a1a1a;
    --pf-error-border: #5c2828;
    --pf-error-text: #f87171;
    --pf-error-text-secondary: #ef4444;

    --pf-modal-backdrop: rgba(0, 0, 0, 0.7);
}

pagefind-config,
pagefind-filter-dropdown,
pagefind-filter-pane,
pagefind-input,
pagefind-keyboard-hints,
pagefind-modal,
pagefind-modal-body,
pagefind-modal-footer,
pagefind-modal-header,
pagefind-modal-trigger,
pagefind-results,
pagefind-searchbox,
pagefind-summary {
    all: initial;
    display: block;
    box-sizing: border-box;

    /* Typography baseline */
    font-family:
        var(--pf-font,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            sans-serif);
    font-size: 16px;
    line-height: 1.5;
    color: CanvasText;
    contain: layout style;
}

pagefind-searchbox,
pagefind-filter-dropdown {
    position: relative;
}

pagefind-searchbox:has(.pf-searchbox.open),
pagefind-filter-dropdown:has(.pf-dropdown-trigger.open) {
    z-index: var(--pf-dropdown-z-index);
}

pagefind-config {
    display: none;
}

pagefind-modal-trigger {
    display: inline-block;
}

:is(*, #\#):is(*, #\#) :is([class^="pf-"], [class*=" pf-"]):not(svg, svg *) {
    all: revert;
    box-sizing: border-box;
}

:is(*, #\#):is(*, #\#) :is([class^="pf-"], [class*=" pf-"]):not(svg, svg *)::before,
:is(*, #\#):is(*, #\#) :is([class^="pf-"], [class*=" pf-"]):not(svg, svg *)::after {
    box-sizing: border-box;
}

:is(*, #\#):is(*, #\#):is(*, #\#) [class^="pf-"][hidden],
:is(*, #\#):is(*, #\#):is(*, #\#) [class*=" pf-"][hidden] {
    display: none;
}

[data-pf-hidden] {
    display: none !important;
}

[data-pf-suppressed] {
    opacity: 0 !important;
    pointer-events: none !important;
}

[data-pf-sr-hidden] {
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/*
* Suppress native browser outlines.
* This is only okay because we exhaustively
* provide our own high-contrast custom focus styles.
*/
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-link:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-link:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-link:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-link:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-checkbox-input:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-checkbox-input:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-btn:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-btn:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-options:focus,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-options:focus-visible {
    outline: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-clear:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-btn:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close:focus-visible {
    outline: var(--pf-outline-width) solid var(--pf-outline-focus);
    outline-offset: var(--pf-outline-offset);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-key,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-key,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-footer-key,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-keyboard-key,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-footer-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--pf-hover);
    border: 1px solid var(--pf-border);
    border-radius: 3px;
    font-weight: 500;
    color: var(--pf-text-secondary);
    font-family: var(--pf-font);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-key--sm,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-footer-key {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    padding: 0 3px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-wrapper {
    position: relative;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-wrapper::before,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input-wrapper::before {
    content: "";
    position: absolute;
    background-color: var(--pf-text-muted);
    width: 14px;
    height: 14px;
    top: calc((var(--pf-input-height) - 14px) / 2);
    inset-inline-start: 10px;
    -webkit-mask-image: var(--pf-icon-search);
    mask-image: var(--pf-icon-search);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    pointer-events: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input-wrapper::before {
    z-index: 1;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input {
    width: 100%;
    height: var(--pf-input-height);
    background-color: var(--pf-background);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-border-radius);
    font-family: var(--pf-font, inherit);
    font-size: var(--pf-input-font-size);
    color: var(--pf-text);
    box-sizing: border-box;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input {
    padding: 0;
    padding-inline-start: 32px;
    padding-inline-end: 36px;
    font-weight: 400;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input:focus-visible,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input:focus-visible {
    border-color: var(--pf-outline-focus);
    box-shadow: 0 0 0 var(--pf-outline-width) var(--pf-outline-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::placeholder,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input::placeholder {
    color: var(--pf-text-muted);
}

/* Hide native search clear button - we have our own */
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-decoration,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-cancel-button,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-results-button,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-results-decoration {
    display: none;
    appearance: none;
    -webkit-appearance: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear {
    position: absolute;
    inset-inline-end: 2px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 4px);
    min-width: 44px;
    padding: 0 8px;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--pf-text-muted);
    cursor: pointer;
    border-radius: 4px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear:hover {
    background: var(--pf-hover);
    color: var(--pf-text-secondary);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear[data-pf-suppressed] {
    display: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-summary {
    font-size: var(--pf-summary-font-size);
    color: var(--pf-text-muted);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: var(--pf-results-display);
    flex-direction: var(--pf-results-flex-direction);
    flex-wrap: var(--pf-results-flex-wrap);
    grid-template-columns: var(--pf-results-columns);
    gap: var(--pf-results-gap);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-card {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--pf-background);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-border-radius);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-card:hover {
    border-color: var(--pf-border-focus);
    box-shadow: var(--pf-shadow-sm);
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-result-card:has(.pf-result-link:focus-visible) {
    border-color: var(--pf-outline-focus);
    box-shadow: 0 0 0 var(--pf-outline-width) var(--pf-outline-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-card:has([data-pf-selected]) {
    border-color: var(--pf-border-focus);
    background: var(--pf-hover);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-image {
    width: var(--pf-image-width);
    height: var(--pf-image-height);
    border-radius: 4px;
    object-fit: cover;
    background: var(--pf-skeleton);
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-content {
    flex: 1;
    min-width: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-title {
    font-size: var(--pf-result-title-font-size);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-link {
    color: var(--pf-text);
    text-decoration: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-link:hover {
    text-decoration: underline;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-excerpt {
    font-size: var(--pf-result-excerpt-font-size);
    color: var(--pf-text-secondary);
    margin: 4px 0 0 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-excerpt mark,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-excerpt mark,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result-excerpt mark {
    background: transparent;
    font-weight: 500;
    color: var(--pf-mark);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton {
    background: var(--pf-skeleton);
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton {
        background: linear-gradient(
            90deg,
            var(--pf-skeleton) 25%,
            var(--pf-skeleton-shine) 50%,
            var(--pf-skeleton) 75%
        );
        background-size: 200% 100%;
        animation: pf-shimmer 1.5s infinite;
    }

    @keyframes pf-shimmer {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton-title {
    height: 14px;
    width: 60%;
    margin-bottom: 8px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton-excerpt {
    height: 13px;
    width: 90%;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton-image {
    width: var(--pf-image-width);
    height: var(--pf-image-height);
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--pf-text-muted);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-empty-icon {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.4;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-empty-text {
    font-size: 14px;
    margin: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-error {
    padding: 12px 16px;
    background: var(--pf-error-bg);
    border: 1px solid var(--pf-error-border);
    border-radius: var(--pf-border-radius);
    color: var(--pf-error-text);
    font-size: 13px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-error strong {
    font-weight: 600;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-error small {
    display: block;
    margin-top: 4px;
    color: var(--pf-error-text-secondary);
    font-size: 12px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    padding-inline-start: 12px;
    list-style: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--pf-background);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    font-size: 12px;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    position: relative;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-chip:hover {
    border-color: var(--pf-border-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-heading-chip:has(.pf-heading-link:focus-visible) {
    border-color: var(--pf-outline-focus);
    box-shadow: 0 0 0 var(--pf-outline-width) var(--pf-outline-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-chip:has([data-pf-selected]) {
    border-color: var(--pf-border-focus);
    background: var(--pf-hover);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-link {
    color: var(--pf-text);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.3;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-link::before {
    content: "#";
    color: var(--pf-text-muted);
    margin-inline-end: 4px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-link:hover {
    text-decoration: underline;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-heading-excerpt {
    margin: 0;
    font-size: 12px;
    color: var(--pf-text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-pane {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    background: var(--pf-skeleton);
    border-radius: var(--pf-border-radius);
    border: 1px solid var(--pf-border);
    overflow: hidden;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: none;
    padding: 0;
    margin: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) details.pf-filter-group {
    display: block;
}

:is(*, #\#):is(*, #\#):is(*, #\#) details.pf-filter-group > .pf-filter-options {
    margin-top: 8px;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    details.pf-filter-group
    > .pf-filter-fieldset {
    margin-top: 8px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-group-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pf-text-muted);
    margin: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-group-name,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger-label,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) summary.pf-filter-group-title {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    padding: 4px 0;
    margin: -4px 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    summary.pf-filter-group-title::-webkit-details-marker {
    display: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) summary.pf-filter-group-title::after {
    content: "";
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    margin-inline-start: 8px;
    background: var(--pf-text-muted);
    -webkit-mask-image: var(--pf-icon-arrow);
    mask-image: var(--pf-icon-arrow);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: transform 0.15s;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    details.pf-filter-group:not([open])
    > summary.pf-filter-group-title::after {
    transform: rotate(-90deg);
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    [dir="rtl"]
    details.pf-filter-group:not([open])
    > summary.pf-filter-group-title::after {
    transform: rotate(90deg);
}

:is(*, #\#):is(*, #\#):is(*, #\#) summary.pf-filter-group-title:hover {
    color: var(--pf-text-secondary);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-group-count,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-selected-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pf-text);
    color: var(--pf-background);
    font-size: 11px;
    font-weight: 500;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    flex-shrink: 0;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-group-count {
    margin-inline-start: auto;
    text-transform: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-filter-group-count[data-pf-hidden],
:is(*, #\#):is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-selected-badge[data-pf-hidden] {
    display: inline-flex !important;
    visibility: hidden;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    cursor: pointer;
    font-size: 13px;
    color: var(--pf-text-secondary);
}

@media (pointer: coarse) {
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-checkbox {
        min-height: 44px;
    }
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-checkbox:hover {
    color: var(--pf-text);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-checkbox-input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pf-text);
    cursor: pointer;
    color-scheme: light;
}

:is(*, #\#):is(*, #\#):is(*, #\#) [data-pf-theme="dark"] .pf-checkbox-input {
    color-scheme: dark;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-filter-checkbox:has(.pf-checkbox-input:focus-visible) {
    outline: var(--pf-outline-width) solid var(--pf-outline-focus);
    outline-offset: var(--pf-outline-offset);
    border-radius: 4px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-checkbox-count {
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--pf-text-muted);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--pf-input-height);
    padding: 0 12px;
    background: var(--pf-background);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-border-radius);
    font-size: 13px;
    color: var(--pf-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger:hover {
    border-color: var(--pf-border-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger.open {
    border-color: var(--pf-border-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger.wrap {
    height: auto;
    min-height: var(--pf-input-height);
    padding-top: 6px;
    padding-bottom: 6px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger-label.wrap,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option-label.wrap {
    white-space: normal;
    line-height: 1.3;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-arrow {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    background: var(--pf-text-muted);
    -webkit-mask-image: var(--pf-icon-arrow);
    mask-image: var(--pf-icon-arrow);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger.open .pf-dropdown-arrow {
    transform: rotate(180deg);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    min-width: 180px;
    max-height: var(--pf-dropdown-max-height);
    overflow-y: auto;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-border-radius);
    box-shadow: var(--pf-shadow-md);
    padding: 4px;
    z-index: 100;

    background:
        /* Top shadow cover (moves with content) */
        linear-gradient(var(--pf-background) 30%, transparent) center top,
        /* Bottom shadow cover (moves with content) */
            linear-gradient(transparent, var(--pf-background) 70%) center bottom,
        /* Top shadow (stays fixed) */
            linear-gradient(var(--pf-scroll-shadow), transparent) center top,
        /* Bottom shadow (stays fixed) */
            linear-gradient(transparent, var(--pf-scroll-shadow)) center bottom,
        var(--pf-background);
    background-size:
        100% 40px,
        100% 40px,
        100% 14px,
        100% 14px,
        100% 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll, scroll;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    min-height: 44px;
    font-size: 13px;
    color: var(--pf-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option:hover {
    background: var(--pf-hover);
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option.pf-dropdown-option-focused {
    outline: var(--pf-outline-width) solid var(--pf-outline-focus);
    outline-offset: -2px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option.wrap {
    align-items: flex-start;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--pf-border);
    border-radius: 3px;
    background: var(--pf-background);
    position: relative;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option.wrap
    .pf-dropdown-checkbox {
    margin-top: 2px;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option[aria-selected="true"]
    .pf-dropdown-checkbox {
    background: var(--pf-text);
    border-color: var(--pf-text);
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option[aria-selected="true"]
    .pf-dropdown-checkbox::after {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--pf-background);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option-label {
    flex: 1;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option-count {
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--pf-text-muted);
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option.wrap
    .pf-dropdown-option-count {
    margin-top: 2px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-option-loading {
    pointer-events: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option-loading
    .pf-dropdown-checkbox {
    width: 16px;
    height: 16px;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-option-loading
    .pf-dropdown-option-label {
    height: 13px;
    border-radius: 4px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-error {
    padding: 12px 10px;
    font-size: 13px;
    color: var(--pf-error-text);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-clear {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    margin-inline-start: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pf-border-radius);
    font-size: 12px;
    color: var(--pf-text-secondary);
    cursor: pointer;
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-dropdown-clear:hover:not([aria-disabled="true"]) {
    background: var(--pf-hover);
    border-color: var(--pf-border);
    color: var(--pf-text);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-clear[aria-disabled="true"] {
    color: var(--pf-text-muted);
    cursor: default;
    opacity: 0.4;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-options {
    max-height: var(--pf-dropdown-max-height);
    overflow-y: auto;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--pf-input-height);
    padding: 0 14px;
    background: var(--pf-background);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-border-radius);
    font-size: 14px;
    color: var(--pf-text-muted);
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-btn:hover {
    border-color: var(--pf-border-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-icon {
    width: 14px;
    height: 14px;
    background: var(--pf-text-muted);
    -webkit-mask-image: var(--pf-icon-search);
    mask-image: var(--pf-icon-search);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-text {
    flex: 1;
    text-align: start;
    color: var(--pf-text-muted);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: 8px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-key {
    min-width: 20px;
    height: 18px;
    font-size: 11px;
    border-radius: 4px;
}

/*
  NB: Background scrolling is prevented with the overscroll-behavior: contain
  values below, plus overflow: hidden on the backdrop.
  As of writing, this only works on Chrome 144. Tracking:
  https://bugzilla.mozilla.org/show_bug.cgi?id=1837436
  https://bugs.webkit.org/show_bug.cgi?id=243452
*/

:is(*, #\#):is(*, #\#):is(*, #\#) dialog.pf-modal {
    position: fixed;
    width: 100%;
    max-width: var(--pf-modal-max-width);
    max-height: var(--pf-modal-max-height);
    margin: var(--pf-modal-top) auto;
    padding: 0;
    background: var(--pf-background);
    border: none;
    border-radius: 12px;
    box-shadow: var(--pf-shadow-lg);
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
}

:is(*, #\#):is(*, #\#):is(*, #\#) dialog.pf-modal::backdrop {
    background: var(--pf-modal-backdrop);
    overflow: hidden;
    overscroll-behavior: contain;
}

:is(*, #\#):is(*, #\#):is(*, #\#) dialog.pf-modal[open] {
    display: flex;
}

@media (prefers-reduced-motion: no-preference) {
    :is(*, #\#):is(*, #\#):is(*, #\#) dialog.pf-modal[open] {
        animation: pf-modal-appear 0.15s ease-out;
    }

    @keyframes pf-modal-appear {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

@media (max-width: 640px) {
    :is(*, #\#):is(*, #\#):is(*, #\#) dialog.pf-modal[open] {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        animation: none;
    }

    :is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-header,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-header {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    :is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-body,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-body {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    :is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-footer,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-header,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--pf-border);
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-header-content {
    flex: 1;
    min-width: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--pf-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close:hover {
    background: var(--pf-hover);
    color: var(--pf-text);
}

@media (max-width: 640px) {
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close {
        display: flex;
    }
}

:is(*, #\#):is(*, #\#):is(*, #\#)
    pagefind-modal-header
    .pf-input-wrapper::before,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-header .pf-input-wrapper::before {
    top: 50%;
    transform: translateY(-50%);
}

:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-header .pf-input,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-header .pf-input {
    border: none;
    background: transparent;
    font-size: var(--pf-input-font-size);
    height: 40px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-body,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 16px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-body .pf-summary,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-body .pf-summary {
    margin-bottom: 8px;
}

/* Modal body uses the base card styles - only minor adjustments needed */
:is(*, #\#):is(*, #\#):is(*, #\#)
    pagefind-modal-body
    .pf-result-card:has([data-pf-selected]),
:is(*, #\#):is(*, #\#):is(*, #\#)
    .pf-modal-body
    .pf-result-card:has([data-pf-selected]) {
    background: var(--pf-skeleton);
}

:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-footer,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--pf-border);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--pf-text-muted);
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-footer-hint,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-keyboard-hint {
    display: flex;
    align-items: center;
    gap: 6px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-footer-key,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-keyboard-key {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-keyboard-hints,
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-keyboard-hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--pf-text-muted);
    min-height: 20px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: var(--pf-searchbox-max-width);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input-wrapper {
    position: relative;
}

/* Override trigger-shortcut positioning when inside searchbox */
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input-wrapper .pf-trigger-shortcut {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    margin-inline-start: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input {
    padding: 0;
    padding-inline-start: 32px;
    padding-inline-end: 12px;
}

/* Add padding when shortcut is present */
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input-wrapper:has(.pf-trigger-shortcut) .pf-searchbox-input {
    padding-inline-end: 72px;
}

/* Hide shortcut badge when input is focused */
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input:focus ~ .pf-trigger-shortcut {
    display: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input:focus {
    padding-inline-end: 12px;
    border-color: var(--pf-border-focus);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox.open .pf-searchbox-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: var(--pf-border);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pf-background);
    border: 1px solid var(--pf-border);
    border-top: none;
    border-radius: 0 0 var(--pf-border-radius) var(--pf-border-radius);
    box-shadow: var(--pf-shadow-md);
    max-height: var(--pf-searchbox-dropdown-max-height);
    z-index: 100;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox.open .pf-searchbox-dropdown {
    display: flex;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-results {
    list-style: none;
    padding: 4px;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result {
    display: block;
    padding: 12px 10px;
    min-height: 44px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result:hover {
    background: var(--pf-hover);
}

/* Placeholder skeleton - non-interactive */
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-placeholder {
    cursor: default;
    pointer-events: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-placeholder:hover {
    background: transparent;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result[data-pf-selected] {
    background: var(--pf-hover);
    outline: var(--pf-outline-width) solid var(--pf-outline-focus);
    outline-offset: -2px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--pf-text);
    margin: 0;
    line-height: 1.3;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result-excerpt {
    font-size: 12px;
    color: var(--pf-text-secondary);
    margin: 2px 0 0 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-subresult {
    padding-inline-start: 20px;
    border-inline-start: 2px solid var(--pf-border);
    margin-inline-start: 10px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--pf-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    font-size: 11px;
    color: var(--pf-text-muted);
    flex-shrink: 0;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-footer-hint {
    display: flex;
    align-items: center;
    gap: 4px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-empty {
    padding: 20px 10px;
    text-align: center;
    color: var(--pf-text-muted);
    font-size: 13px;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-loading {
    padding: 16px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--pf-text-muted);
    font-size: 13px;
}

/* Ensure focus indicators are visible in Windows High Contrast Mode */
@media (forced-colors: active) {
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-input:focus-visible,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-input:focus-visible,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear:focus-visible,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-trigger-btn:focus-visible,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-close:focus-visible,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-trigger:focus-visible,
    :is(*, #\#):is(*, #\#):is(*, #\#)
        .pf-result-card:has(.pf-result-link:focus-visible),
    :is(*, #\#):is(*, #\#):is(*, #\#)
        .pf-heading-chip:has(.pf-heading-link:focus-visible),
    :is(*, #\#):is(*, #\#):is(*, #\#)
        .pf-filter-checkbox:has(.pf-checkbox-input:focus-visible),
    :is(*, #\#):is(*, #\#):is(*, #\#)
        .pf-dropdown-option.pf-dropdown-option-focused,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-result[data-pf-selected] {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
    }
}

/* Hide keyboard hints on touch-only devices (no hover capability) */
@media (hover: none) {
    :is(*, #\#):is(*, #\#):is(*, #\#) pagefind-keyboard-hints,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-keyboard-hints,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-footer,
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-modal-footer-hint {
        display: none;
    }
}

@media (max-width: 640px) {
    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-dropdown-menu {
        min-width: unset;
        width: max(180px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        inset-inline-start: unset;
        left: 50%;
        transform: translateX(-50%);
        max-height: min(var(--pf-dropdown-max-height), 50vh);
    }

    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-searchbox-dropdown {
        max-height: min(var(--pf-searchbox-dropdown-max-height), 60vh);
    }

    :is(*, #\#):is(*, #\#):is(*, #\#) .pf-filter-pane {
        padding: 12px;
        gap: 16px;
    }
}
.site-header {
		padding: 1rem;
	}

	.site-header .header-row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		column-gap: 1rem;
		row-gap: 0.9rem;
	}

	.site-header .header-brand {
		flex: 1 1 26rem;
		min-width: 0;
		max-width: 100%;
		flex-wrap: nowrap;
		row-gap: 0;
	}

	.site-header .site-logo {
		width: clamp(56px, 14vw, 80px);
		height: auto;
		flex: 0 0 auto;
	}

	.site-header .site-title {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		font-size: clamp(1.6rem, 5vw, 2.5rem);
		line-height: 1.1;
		margin: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.site-header .site-title a {
		display: block;
		white-space: normal;
	}

	.site-header .internal-links a {
		display: inline-block;
		padding: 0.3rem 0.6rem;
		border-radius: 0.45rem;
		line-height: 1.2;
	}

	.site-header .internal-links {
		font-size: 1.44rem;
	}

	.site-header .internal-links {
		display: block !important;
		position: static !important;
		height: auto !important;
		overflow: visible !important;
		flex: 1 1 auto;
		min-width: 0;
		margin-inline: auto;
	}

	.site-header .internal-links ul {
		display: flex !important;
		position: static !important;
		inset: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 0.5rem 0.8rem !important;
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		flex: 0 1 auto !important;
	}

	.site-header .internal-links li,
	.site-header .internal-links a {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		float: none !important;
		white-space: nowrap;
	}

	.site-header .internal-links li {
		display: block !important;
		width: auto !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.site-header .internal-links {
		align-self: center;
		width: auto;
		margin-top: 0;
	}

	.site-header .header-search {
		flex: 0 1 320px;
		width: min(320px, 100%);
		max-width: 100%;
		margin-top: 0;
		margin-left: auto;
		align-self: center;
	}

	@media (min-width: 1200px) {
		.site-header .header-row {
			display: grid !important;
			grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
			align-items: center;
			column-gap: 1rem;
			row-gap: 0.9rem;
		}

		.site-header .header-brand {
			grid-column: 1;
			justify-self: start;
		}

		.site-header .internal-links {
			grid-column: 2;
			justify-self: center;
			flex: 0 0 auto;
			margin-inline: 0;
			transform: translate(0.45rem, 0.08rem);
		}

		.site-header .internal-links ul {
			flex-wrap: nowrap !important;
			width: auto !important;
		}

		.site-header .header-search {
			grid-column: 3;
			justify-self: end;
			width: 320px;
			margin-left: 0;
		}
	}

	@media (max-width: 640px) {
		.site-header .header-search {
			width: 100%;
			flex-basis: 100%;
		}

		.site-header .site-title {
			font-size: clamp(1.35rem, 7vw, 2rem);
		}
	}

	@media (max-width: 320px) {
		.site-header .site-title {
			font-size: 1.5rem;
		}
	}

	.site-header .internal-links a.active {
		background: color-mix(in srgb, var(--site-primary) 18%, transparent);
		text-decoration: none;
	}

	.site-header .internal-links a:hover {
		background: color-mix(in srgb, var(--site-primary) 10%, transparent);
		text-decoration: none;
	}

	.pagefind-ui__drawer {
		background-color: var(--site-surface, #fff);
		/* Darken the background color of the drawer */
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
		color: var(--site-on-surface, #111);
		padding: 2em;
		max-width: 800px;
	}
	.pagefind-ui__drawer a.pagefind-ui__result-link {
		color: var(--site-on-surface, #111) !important;
	}#theme-switcher {
		display: inline-grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		min-width: 2rem;
		padding: 0;
		border: 0;
		background: transparent;
	}

	#theme-switcher svg {
		width: 1rem;
		height: 1rem;
		color: var(--site-on-surface, currentColor);
	}

	#theme-switcher:focus-visible {
		outline: 2px solid color-mix(in srgb, var(--site-primary) 60%, white 40%);
		outline-offset: 1px;
	}.site-footer {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center;
		gap: 0.75rem;
		padding: 1rem;
	}

	.site-footer .social-links {
		justify-content: center !important;
		gap: 1rem;
	}

	.site-footer .social-links a {
		margin-right: 0 !important;
	}.site-breadcrumb[data-astro-cid-ezvlwyc3] {
  margin: .75rem 0 2rem;
  font-size: .9rem;
  opacity: .88;
}

.site-breadcrumb[data-astro-cid-ezvlwyc3] ol[data-astro-cid-ezvlwyc3] {
  list-style: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  padding: 0;
  margin: 0;
  display: flex !important;
}

.site-breadcrumb[data-astro-cid-ezvlwyc3] li[data-astro-cid-ezvlwyc3] {
  align-items: center;
  min-width: 0;
  display: inline-flex !important;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
}

.site-breadcrumb[data-astro-cid-ezvlwyc3] li[data-astro-cid-ezvlwyc3] + li[data-astro-cid-ezvlwyc3]:before {
  content: "/";
  opacity: .5;
  margin-right: .5rem;
}

.site-breadcrumb[data-astro-cid-ezvlwyc3] span[data-astro-cid-ezvlwyc3][aria-current="page"] {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(58ch, 78vw);
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}