/*
* Building blocks (CSS custom properties)
*/
:where(:root) {
  --radius-1: 2px;
  --radius-2: 5px;
  --radius-3: 1rem;
  --radius-4: 2rem;
  --radius-round: 1e5px;
 
  --border-size-1: 1px;
  --border-size-2: 2px;
 
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 480px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px;
 
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --gray-5-hsl: 210 11% 71%;
  --gray-12-hsl: 210 40% 2%;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --red-10: #b02525;
  --red-11: #962020;
  --red-12: #7d1a1a;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --green-10: #237032;
  --green-11: #1b5727;
  --green-12: #133d1b;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --blue-10: #145591;
  --blue-11: #114678;
  --blue-12: #0d375e;
  --purple-3: #e599f7;
  --purple-7: #ae3ec9;
 
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
 
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
 
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
 
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
 
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2: 
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3: 
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4: 
    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-5: 
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-6: 
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
 
}
@media (prefers-color-scheme: dark) {
  :where(:root:where(:not(.is-light))) {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
  }
}
:where(:root:where(.is-dark)) {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
  }
:where(:root) {
  /* 4.5px => 5.0px */
  --space-1: clamp(0.281rem, 0.27rem + 0.05vw, 0.313rem);
  /* 9.0px => 10.0px */
  --space-2: clamp(0.563rem, 0.54rem + 0.11vw, 0.625rem);
  /* 13.5px => 15.0px */
  --space-3: clamp(0.844rem, 0.81rem + 0.16vw, 0.938rem);
  /* 18.0px => 20.0px */
  --space-4: clamp(1.125rem, 1.08rem + 0.22vw, 1.250rem);
  /* 27.0px => 30.0px */
  --space-5: clamp(1.688rem, 1.62rem + 0.33vw, 1.875rem);
  /* 36.0px => 40.0px */
  --space-6: clamp(2.250rem, 2.16rem + 0.43vw, 2.500rem);
  /* 54.0px => 60.0px */
  --space-7: clamp(3.375rem, 3.24rem + 0.65vw, 3.750rem);
  /* 72.0px => 80.0px */
  --space-8: clamp(4.500rem, 4.33rem + 0.87vw, 5.000rem);
  /* 108.0px => 120.0px */
  --space-9: clamp(6.750rem, 6.49rem + 1.30vw, 7.500rem);
  /* 4.5px => 10.0px */
  --space-1-2: clamp(0.281rem, 0.16rem + 0.60vw, 0.625rem);
  /* 9.0px => 15.0px */
  --space-2-3: clamp(0.563rem, 0.43rem + 0.65vw, 0.938rem);
  /* 13.5px => 20.0px */
  --space-3-4: clamp(0.844rem, 0.70rem + 0.71vw, 1.250rem);
  /* 18.0px => 30.0px */
  --space-4-5: clamp(1.125rem, 0.86rem + 1.30vw, 1.875rem);
  /* 27.0px => 40.0px */
  --space-5-6: clamp(1.688rem, 1.40rem + 1.41vw, 2.500rem);
  /* 36.0px => 60.0px */
  --space-6-7: clamp(2.250rem, 1.73rem + 2.61vw, 3.750rem);
  /* 54.0px => 80.0px */
  --space-7-8: clamp(3.375rem, 2.81rem + 2.83vw, 5.000rem);
  /* 72.0px => 120.0px */
  --space-8-9: clamp(4.500rem, 3.46rem + 5.22vw, 7.500rem);
  /* 13.5px => 30.0px */
  --space-3-5: clamp(0.844rem, 0.49rem + 1.79vw, 1.875rem);
  /* 18.0px => 40.0px */
  --space-4-6: clamp(1.125rem, 0.65rem + 2.39vw, 2.500rem);
 
  /* 12.5px => 12.8px */
  --font-size--2: clamp(0.781rem, 0.77rem + 0.03vw, 0.800rem);
  /* 15.0px => 16.0px */
  --font-size--1: clamp(0.938rem, 0.92rem + 0.11vw, 1.000rem);
  /* 18.0px => 20.0px */
  --font-size-0: clamp(1.125rem, 1.08rem + 0.22vw, 1.250rem);
  /* 21.6px => 25.0px */
  --font-size-1: clamp(1.350rem, 1.28rem + 0.37vw, 1.563rem);
  /* 25.9px => 31.3px */
  --font-size-2: clamp(1.620rem, 1.50rem + 0.58vw, 1.953rem);
  /* 31.1px => 39.1px */
  --font-size-3: clamp(1.944rem, 1.77rem + 0.87vw, 2.441rem);
  /* 37.3px => 48.8px */
  --font-size-4: clamp(2.333rem, 2.08rem + 1.25vw, 3.052rem);
  /* 44.8px => 61.0px */
  --font-size-5: clamp(2.799rem, 2.45rem + 1.77vw, 3.815rem);
 
  --grid-max-width: 77.50rem;
  --grid-gutter: var(--space-4-6);
  --grid-columns: 12;
 
}
/*
* Resets and base styles (generic styles and element specific styles)
*/
/*
* Based on Open Props: theme.css and theme.light.css
*/
:where(:root) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :where(:root:where(:not(.is-light))) {
    color-scheme: dark;
  }
}
:where(:root:where(.is-dark)) {
    color-scheme: dark;
  }
/*
    * Based on Open Props: normalize.css and normalize.src.css
    */
*,
    ::before,
    ::after {
      /* Is a design mistake in CSS, source: https://wiki.csswg.org/ideas/mistakes */
      box-sizing: border-box;
    }
/*
    * Remove default margins because it is more predictable to use layout utilities
    * for consistent spacing.
    *
    * margin: 0 for dialog would not place the dialog in the center of a viewport.
    */
:where(:not(dialog)) {
      margin: 0;
    }
:where(:not(fieldset, progress, meter)) {
      border-width: 0;
      border-style: solid;
      background-origin: border-box;
      background-repeat: no-repeat;
    }
:where(:root) {
      block-size: 100%;
      font-family: var(--font-family-body);

      /*
      * From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
      * Accessibility concerns: Use a minimum value of 1.5 for line-height for main
      * paragraph content. 
      */
      line-height: var(--line-height-body);

      /* 
      * From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust):
      * ...on a properly designed responsive site the text-size-adjust behavior is not
      * needed, so developers can elect to turn it off by specifying a value of none.
      * also see https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
      */
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }
@media (prefers-reduced-motion: no-preference) {
:where(:root) {
        scroll-behavior: smooth;
    }
      }
@media (prefers-reduced-motion: no-preference) {
      :where(:focus-visible) {
        transition: outline-offset 145ms var(--ease-2);
      }
      :where(:not(:active):focus-visible) {
        transition-duration: 0.25s;
      }
    }
:where(:focus-visible) {
      outline-color: var(--focus-color, var(--link-color));
      outline-width: 2px;
      outline-style: solid;
    }
:where(:focus-visible):where(:not(:active)) {
        outline-offset: var(--outline-offset);
      }
:where(body) {
      min-block-size: 100%;
      /* Base font size that inherits. */
      font-size: var(--font-size-body);
      background-color: var(--bg-color-body);
    }
:where(p, h1, h2, h3, h4, h5, h6) {
      /* Soft wrap overflowing words when possible to prevent horizontal scrolling. */
      overflow-wrap: break-word;
    }
/* Set shorter line heights on headings and interactive elements */
:where(button, input, label) {
      line-height: var(--font-lineheight-1);
    }
:where(h1, h2, h3, h4, h5, h6) {
      line-height: var(--line-height-headings);
      font-weight: var(--font-weight-headings);
      text-wrap: balance;
    }
:where(h1) {
      font-size: var(--font-size-h1);
      max-inline-size: var(--max-inline-size-h1, initial);
    }
:where(h2) {
      font-size: var(--font-size-h2);
      max-inline-size: var(--max-inline-size-h2, initial);
    }
:where(h3) {
      font-size: var(--font-size-h3);
    }
:where(h4) {
      font-size: var(--font-size-h4);
    }
:where(h5) {
      font-size: var(--font-size-h5);
    }
:where(h3, h4, h5, h6, dt) {
      max-inline-size: var(--max-inline-size-other-headings, initial);
    }
:where(p, ul, ol, dl, h6) {
      font-size: var(--font-size-0);
    }
:where(a, u, ins, abbr) {
      text-underline-offset: 2px;
    }
:where(a[href],
area,
button,
input:not([type="text"],
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="url"]),
label[for],
select,
summary,
[tabindex]:not([tabindex*="-"])) {
      cursor: pointer;
    }
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
:where(a) {
      padding-inline: var(--space-1);
      margin-inline: calc(var(--space-1) * -1);
      padding-block: var(--space-1);
      margin-block: calc(var(--space-1) * -1);
    }
:where(a):where([href]) {
        color: var(--link-color);
        text-decoration-color: var(--link-color);
      }
:where(a):where([href]):where(:visited) {
          color: var(--link-color-visited);
          text-decoration-color: var(--link-color-visited);
        }
:where(a):where(:not(:hover)) {
        text-decoration: inherit;
      }
:where(img, svg, video, canvas, audio, iframe, embed, object) {
      /* Don't consider these objects as inline. */
      display: block;
    }
:where(img, svg, video) {
      /* Don't overflow from its container */
      max-inline-size: 100%;
      block-size: auto;
    }
:where(svg:not([width])) {
      inline-size: var(--space-8);
    }
:where(code, kbd, samp, pre) {
      font-family: var(--font-mono);
    }
:where(:not(pre) > code, kbd) {
      white-space: nowrap;
    }
:where(pre) {
      white-space: pre;
      min-inline-size: 0;
      max-inline-size: max-content;
      -ms-writing-mode: lr;
          writing-mode: lr;
      direction: ltr;
    }
:where(:not(pre) > code) {
      padding: var(--space-1) var(--space-2);
      background: var(--surface-2);
      border-radius: var(--radius-2);
      -ms-writing-mode: lr;
          writing-mode: lr;
    }
:where(kbd, var) {
      padding: var(--space-1) var(--space-2);
      border-width: var(--border-size-1);
      border-color: var(--surface-4);
      border-radius: var(--radius-2);
    }
:where(mark) {
      border-radius: var(--radius-2);
      padding-inline: var(--space-1);
    }
:where(ol, ul) {
      padding-inline-start: var(--space-6);
    }
:where(li) {
      padding-inline-start: var(--space-2);
    }
:where(li, dd) {
      max-inline-size: var(--max-inline-size-elements, initial);
      text-wrap: pretty;
    }
:where(p) {
      max-inline-size: var(--max-inline-size-p, initial);
      text-wrap: pretty;
    }
:where(dt, summary) {
      font-weight: var(--font-weight-body-bold);
    }
:where(dt:not(:first-of-type)) {
      margin-block-start: var(--space-5);
    }
:where(small) {
      font-size: max(0.5em, var(--font-size-0));
    }
:where(hr) {
      margin-block: var(--space-5);
      height: var(--border-size-1);
      background-color: var(--surface-3);
    }
:where(figure) :where(figcaption) {
        margin-block-start: var(--space-3);
        max-inline-size: var(--max-inline-size-elements, initial);
        color: var(--text-color-2);
        font-size: var(--font-size--1);
        text-wrap: balance;
        text-align: center;
      }
:where(blockquote) {
      display: grid;
      gap: var(--space-3);
      border-inline-start-width: var(--border-size-3);
      border-inline-start-color: var(--text-color-2);
      padding-block: var(--space-3);
      padding-inline: var(--space-4);
      max-inline-size: var(--max-inline-size-elements, initial);
      font-style: italic;
    }
:where(summary) {
      background: var(--bg-color-body);
      padding: var(--space-2) var(--space-3);
      margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
      border-radius: var(--radius-default);
    }
:where(details) {
      padding-inline: var(--space-3);
      padding-block: var(--space-2);
      background: var(--surface-1);
      border-radius: var(--radius-default);
    }
:where(details[open] > summary) {
      margin-bottom: var(--space-2);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
:where(del) {
      background: var(--error-alert-bg-color);
      color: var(--error-alert-color);
    }
:where(ins) {
      background: var(--green-1);
      color: var(--green-11);
    }
:where(abbr) {
      text-decoration-color: var(--text-color-2);
    }
:where(dialog) {
      background-color: var(--surface-1);
      color: inherit;
      border-radius: var(--radius-default);
      box-shadow: var(--shadow-6);
    }
:where(dialog)::-ms-backdrop {
        backdrop-filter: blur(25px);
      }
:where(dialog)::backdrop {
        backdrop-filter: blur(25px);
      }
:where(html:has(dialog[open])) {
      overflow: hidden;
    }
:where(menu) {
      padding-inline-start: 0;
      display: flex;
      gap: var(--space-3);
    }
:where(sup) {
      font-size: 0.5em;
    }
/* Anything that has been anchored to should have extra scroll margin */
:where(:target) {
      scroll-margin-block: 5ex;
    }
/*
    * With list-style-type: "" screen readers announce the list as a list, even
    * though there are no visible list markers. Use a list only when it is useful to
    * be announced as a list.
    *
    * Webkit position: https://bugs.webkit.org/show_bug.cgi?id=170179
    * 
    * For reverting this list reset: wrap a list inside a tag with class configured as `classPrefix + "prose"`.
    * This idea asumes that a list is more often needed unstyled and a styled list
    * is more often used in an user generated content.
    */
:where(ul) {
      list-style-type: "";
      margin-inline: 0;
      padding-inline: 0;
    }
:where(ul) :where(li) {
        margin-inline: 0;
        padding-inline: 0;
      }
/* Sources:
* https://layout-breakouts-builder.vercel.app/
* https://www.youtube.com/watch?v=c13gpBrnGEw
*/
/* BASELINE: available since 7/2024 */
/* The calc actually works even without this property declaration. */
/* @property --popout-multiplier { */
/*   syntax: "<number>"; */
/*   inherits: false; */
/*   initial-value: 4; */
/* } */
:is(.p-page-layout, .p-full-bg) {
  --minimum-content-padding: var(--grid-gutter);
  --popout-multiplier: 4;

  /** TRACK WIDTHS **/
  /* 1fr takes as much space as available. Specific values may be used for
   * narrower page layout. */
  --full-max-width: 1fr;
  /* --grid-max-width comes from Utopia grid and is calculated in a way to make
   * something like 12 columns grid possible and aligned with other values in
   * this system. */
  --content-max-width: var(--grid-max-width);
  --popout-max-width: calc(
    var(--grid-max-width) + var(--popout-multiplier) * var(--grid-gutter)
  );
  --inset-max-width: calc(
    var(--grid-max-width) - var(--popout-multiplier) * var(--grid-gutter)
  );

  /** TRACK SIZES **/
  /* Track sizes represent a fraction, that is subtracted from the available space. */

  /* Makes sure the content always have a minimum padding. */
  --full: minmax(var(--minimum-content-padding), var(--full-max-width));
  /* Since the fraction is subtracted twice from the available space the formula
   * uses 0.5 times. */
  --popout: minmax(
    0,
    calc((var(--popout-max-width) - var(--content-max-width)) * 0.5)
  );
  /* The grid-gutter is subtracted as well from the available space in order to
   * align with a definition of a grid in Utopia design. The container is padded
   * with grid-gutter on each side.
   * Source: https://utopia.fyi/grid/
   */
  --content: minmax(
    0,
    calc(
      (var(--content-max-width) - var(--inset-max-width)) *
        0.5 - var(--grid-gutter)
    )
  );
  /* A track that is representing the middle area. This track does not count
   * twice so the formula is different than the others. It makes sure the
   * content has a maximum width. */
  --inset: min(
    var(--inset-max-width),
    100% - var(--minimum-content-padding) * 2
  );

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [popout-start] var(--popout)
    [content-start] var(--content)
    [inset-start] var(--inset) [inset-end]
    var(--content) [content-end]
    var(--popout) [popout-end]
    var(--full) [full-end];

  /* Prevents a situation where there is not enough content to fill the vertical
   * space and rows try to stretch. */
  grid-auto-rows: max-content;
}
/* If not specified with other classes otherwise, the elements inside the layout
 * will span the middle content area. */
:is(.p-page-layout, .p-full-bg) > * {
  grid-column: content;
}
/** CLASSES **/
.p-inset {
  grid-column: inset;
}
.p-inset-start {
  grid-column-start: inset-start;
}
.p-inset-end {
  grid-column-end: inset-end;
}
.p-inset-padded {
  grid-column: inset;
  padding-inline: calc(2 * var(--minimum-content-padding));
}
.p-content {
  grid-column: content;
}
.p-content-start {
  grid-column-start: content-start;
}
.p-content-end {
  grid-column-end: content-end;
}
.p-content-padded {
  grid-column: content;
  padding-inline: calc(2 * var(--minimum-content-padding));
}
@media (max-width: 479.98px) {
  .p-content-padded {
    grid-column: full;
    border-radius: 0;
    padding-inline: var(--minimum-content-padding);
  }
}
.p-popout {
  grid-column: popout;
}
.p-popout-start {
  grid-column-start: popout-start;
}
.p-popout-end {
  grid-column-end: popout-end;
}
.p-popout-padded {
  grid-column: popout;
  padding-inline: calc(2 * var(--minimum-content-padding));
}
.p-full {
  grid-column: full;
  border-radius: 0;
}
.p-full-start {
  grid-column-start: full-start;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.p-full-end {
  grid-column-end: full-end;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Applies the page layout onto itself.
 *
 * Background spans the full width, while the content remains in the middle
 * content track. */
.p-full-bg {
  grid-column: full;
}
/* Spans the full width, content is padded a little on both sides. */
.p-full-padded {
  grid-column: full;
  padding-inline: var(--minimum-content-padding);
}
/**
  * Wraps layout of whole page and pushes a footer to the bottom.
  * 
  * Example:
  * 
  * <div class="p-layout-wrapper">
  *   <header>...</header>
  *   <main>...</main>
  *   <footer>...</footer>
  * </div>
 */
.p-layout-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  /* BASELINE: Dynamic vieport units available since 12/2022. */
  min-height: 100svh;
}
:where(table) {
  width: fit-content;
  caption-side: bottom;
  font-size: var(--font-size--1);
  border-collapse: collapse;
}
:where(:is(thead, tbody) tr) {
  border-bottom: var(--border-2);
}
:where(th) {
  color: var(--text-color-2);
  font-weight: var(--font-weight-6);
}
:where(td) {
  font-weight: var(--font-weight-body);
}
:where(td, th) {
  text-align: start;
  padding: var(--space-2) var(--space-3);
}
:where(:is(td, th):not([align])) {
  text-align: start;
}
:where(table tr:hover td) {
  background-color: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where(table tr:hover td) {
    background-color: var(--surface-1);
}
  }
:where(:root.is-dark) :where(table tr:hover td) {
    background-color: var(--surface-1);
}
:where(table > caption) {
  font-weight: var(--font-weight-body-bold);
  padding-block: var(--space-3);
  color: var(--text-color-2);
}
/* Based on Open Props buttons.css */
/* https://github.com/argyleink/open-props/blob/main/src/extra/buttons.css */
/* Let form controls to look like other elements. */
:where(input[type="file"]::-webkit-file-upload-button) {
  --_font-size: var(--font-size--1);
  --_bg-color: var(--surface-2-inverse);
  --_bg-color-hover: var(--surface-3-inverse);
  --_bg-color-active: var(--surface-2-inverse);
  --_text-color: var(--text-color-1-inverse);
  --_border-color: var(--_bg-color);
  --_icon-size: 3ch;
  --_icon-color: var(--_text-color);

  height: var(--button-height-default);
  font-size: var(--_font-size);
  background-color: var(--_bg-color);
  color: var(--_text-color);
  border: var(--border-size-1) solid var(--_border-color);
  box-shadow:
    var(--shadow-2),
    0 0 1px 1px var(--surface-3);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-2);

  font-family: var(--font-family-body);
  font-weight: var(--font-weight-buttons);
  border-radius: var(--radius-default);
  padding-block: 0.75ch;
  padding-inline: var(--space-3);

  -webkit-user-select: none;

          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
:where(.p-button, button, input:is([type="button"], [type="submit"], [type="reset"])),
:where(input[type="file"]::-webkit-file-upload-button),
:where(input[type="file"]::file-selector-button) {
  --_font-size: var(--font-size--1);
  --_bg-color: var(--surface-2-inverse);
  --_bg-color-hover: var(--surface-3-inverse);
  --_bg-color-active: var(--surface-2-inverse);
  --_text-color: var(--text-color-1-inverse);
  --_border-color: var(--_bg-color);
  --_icon-size: 3ch;
  --_icon-color: var(--_text-color);

  height: var(--button-height-default);
  font-size: var(--_font-size);
  background-color: var(--_bg-color);
  color: var(--_text-color);
  border: var(--border-size-1) solid var(--_border-color);
  box-shadow:
    var(--shadow-2),
    0 0 1px 1px var(--surface-3);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-2);

  font-family: var(--font-family-body);
  font-weight: var(--font-weight-buttons);
  border-radius: var(--radius-default);
  padding-block: 0.75ch;
  padding-inline: var(--space-3);

  -webkit-user-select: none;

          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where(input[type="file"]::-webkit-file-upload-button) {
    --_text-color: var(--text-color-1);
    --_bg-color: var(--surface-3);
    --_bg-color-hover: var(--surface-2);
    --_bg-color-active: var(--surface-3);
    box-shadow: var(--shadow-2);
}
:where(:root:not(.is-light)) :where(.p-button, button, input:is([type="button"], [type="submit"], [type="reset"])), :where(:root:not(.is-light)) :where(input[type="file"]::-webkit-file-upload-button), :where(:root:not(.is-light)) :where(input[type="file"]::file-selector-button) {
    --_text-color: var(--text-color-1);
    --_bg-color: var(--surface-3);
    --_bg-color-hover: var(--surface-2);
    --_bg-color-active: var(--surface-3);
    box-shadow: var(--shadow-2);
}
  }
:where(:root.is-dark) :where(input[type="file"]::-webkit-file-upload-button) {
    --_text-color: var(--text-color-1);
    --_bg-color: var(--surface-3);
    --_bg-color-hover: var(--surface-2);
    --_bg-color-active: var(--surface-3);
    box-shadow: var(--shadow-2);
}
:where(:root.is-dark) :where(.p-button, button, input:is([type="button"], [type="submit"], [type="reset"])), :where(:root.is-dark) :where(input[type="file"]::-webkit-file-upload-button), :where(:root.is-dark) :where(input[type="file"]::file-selector-button) {
    --_text-color: var(--text-color-1);
    --_bg-color: var(--surface-3);
    --_bg-color-hover: var(--surface-2);
    --_bg-color-active: var(--surface-3);
    box-shadow: var(--shadow-2);
}
@media (prefers-reduced-motion: no-preference) {
:where(input[type="file"]::-webkit-file-upload-button) {
    -webkit-transition:
      border-color 120ms var(--ease-3),
      box-shadow 120ms var(--ease-4),
      outline-offset 120ms var(--ease-4);
    transition:
      border-color 120ms var(--ease-3),
      box-shadow 120ms var(--ease-4),
      outline-offset 120ms var(--ease-4);
}
:where(.p-button, button, input:is([type="button"], [type="submit"], [type="reset"])),
:where(input[type="file"]::-webkit-file-upload-button),
:where(input[type="file"]::file-selector-button) {
    -webkit-transition:
      border-color 120ms var(--ease-3),
      box-shadow 120ms var(--ease-4),
      outline-offset 120ms var(--ease-4);
    transition:
      border-color 120ms var(--ease-3),
      box-shadow 120ms var(--ease-4),
      outline-offset 120ms var(--ease-4);
}
  }
/* Importance primary/secondary */
:where(.p-button-secondary) {
  --_text-color: var(--text-color-1);
  --_bg-color: var(--surface-0);
  --_bg-color-hover: var(--surface-2);
  --_bg-color-active: var(--surface-1);
  --_border-color: var(--surface-2);
  box-shadow: var(--shadow-2);
}
/* Variant brand */
:where(.p-button-brand) {
  --_text-color: var(--text-color-1-inverse);
  --_bg-color: var(--brand-color);
  --_bg-color-hover: var(--brand-color-bright);
  --_bg-color-active: var(--brand-color);
}
/* disabled */
[disabled]:where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])) {
    --_bg-color: var(--surface-2);
    --_border-color: var(--surface-2);
    --_text-color: var(--gray-7);
    cursor: not-allowed;
    box-shadow: var(--shadow-1);
  }
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) [disabled]:where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])) {
      --_text-color: var(--gray-5);
  }
    }
:where(:root.is-dark) [disabled]:where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])) {
      --_text-color: var(--gray-5);
  }
:where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])):where(:not(:disabled):hover) {
    background-color: var(--_bg-color-hover);
  }
:where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])):where(:not(:disabled):active) {
    background-color: var(--_bg-color-active);
  }
/* icons */
:where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])) > :where(svg) {
    flex-shrink: 0;
    block-size: var(--_icon-size);
    inline-size: var(--_icon-size);
    color: var(--_bg-color);
    fill: var(--_icon-color);
  }
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])) > :where(svg) {
      fill: var(--_icon-color);
  }
    }
:where(:root.is-dark) :where(.p-button,button,input:is([type="button"],[type="submit"],[type="reset"],[type="file"])) > :where(svg) {
      fill: var(--_icon-color);
  }
/* red reset */
:where([type="reset"]) {
  --_text-color: var(--red-9);

  --_bg-color: var(--surface-0);
  --_bg-color-hover: var(--surface-2);
  --_bg-color-active: var(--surface-1);
  --_border-color: var(--surface-2);
  box-shadow: var(--shadow-2);
}
:where([type="reset"]):focus-visible {
    outline-color: var(--red-6);
  }
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where([type="reset"]) {
    --_text-color: var(--red-4);
}
  }
:where(:root.is-dark) :where([type="reset"]) {
    --_text-color: var(--red-4);
}
:where(a.p-button):hover {
    text-decoration: none;
  }
/* file input */
:where(input[type="file"]) {
  max-inline-size: 100%;
  padding-inline: var(--space-1);
  padding-block: 0;
  cursor: initial;
  align-self: flex-start;
  border-radius: var(--radius-2);
  box-shadow: var(--inner-shadow-4);
  color: var(--text-color-1);
  border: 1px solid var(--gray-3);
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-buttons);
  line-height: var(--line-height-headings);
}
.p-dropping:where(input[type="file"]) {
    border: 1px solid transparent;
    box-shadow: none;
    outline: 2px dashed var(--text-color-2);
  }
@media (prefers-reduced-motion: no-preference) {
.p-dropping:where(input[type="file"]) {
      animation: drop-zone 1.5s var(--ease-5) infinite;
  }
    }
:where(input[type="file"]::-webkit-file-upload-button) {
  margin-inline-end: var(--space-2);
  cursor: pointer;
  margin: var(--space-3);
}
:where(input[type="file"]::-webkit-file-upload-button),
:where(input[type="file"]::file-selector-button) {
  margin-inline-end: var(--space-2);
  cursor: pointer;
  margin: var(--space-3);
}
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where(input[type="file"]::-webkit-file-upload-button) {
    border-color: transparent;
}
:where(:root:not(.is-light)) :where(input[type="file"]::-webkit-file-upload-button),
:where(:root:not(.is-light)) :where(input[type="file"]::file-selector-button) {
    border-color: transparent;
}
  }
:is(:where(input[type="file"]::-webkit-file-upload-button),:where(input[type="file"]::-webkit-file-upload-button)):active {
    background-color: var(--_bg-color-active);
  }
:is(:where(input[type="file"]::-webkit-file-upload-button),:where(input[type="file"]::file-selector-button)):active {
    background-color: var(--_bg-color-active);
  }
/*
* Forms inputs normalization
*
* This is a simplified version of custom forms by Adam Argyle:
* https://codepen.io/argyleink/pen/RwxJKQa/2256560bf93a131b58b5774e840d51f0
*/
:where(label) {
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-label);
}
/* Let form controls to look like other other elements. */
:where(input:not([type="button"], [type="file"], [type="reset"], [type="submit"]), textarea, select) {
  font: inherit;
  font-size: var(--font-size--1);
  color: inherit;
  letter-spacing: inherit;
  border-radius: var(--input-radius);
}
:where(input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]), select) {
  /* Default height is made the same as button elements */
  height: var(--button-height-default);
}
:where(input, textarea) {
  --input-dark-surface: var(--gray-11);
}
:where([type="text"], [type="number"], [type="password"], [type="url"], [type="email"], [type="tel"], [type="search"], [type="date"], [type="month"], [type="week"], [type="datetime-local"], select, textarea) {
  padding-inline: var(--input-padding-inline, var(--space-2));
  padding-block: var(--input-padding-block, var(--space-1));
}
:where(input:is([type="text"], [type="password"], [type="url"], [type="email"], [type="tel"], [type="search"]), select, textarea) {
  flex-shrink: 1;
  min-inline-size: 5ch;
  max-inline-size: 100%;
}
:where(input:not([disabled], [readonly], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]), select, textarea) {
  background-color: var(--surface-0);
}
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where(input:not([disabled],[readonly],[type="file"],[type="button"],[type="submit"],[type="reset"],[type="checkbox"],[type="radio"]),select,textarea):not(select):is(:hover,:focus-within) {
      background-color: var(--input-dark-surface);
  }
    }
:where(:root.is-dark) :where(input:not([disabled],[readonly],[type="file"],[type="button"],[type="submit"],[type="reset"],[type="checkbox"],[type="radio"]),select,textarea):not(select):is(:hover,:focus-within) {
      background-color: var(--input-dark-surface);
  }
:where(input:not([disabled],[readonly],[type="file"],[type="button"],[type="submit"],[type="reset"],[type="checkbox"],[type="radio"]),select,textarea):not(:focus-within):user-invalid {
    border: 1px solid var(--negative-color);
  }
:where(textarea) {
  min-block-size: 3rem;
  resize: block;
}
:where(input[type="checkbox"], input[type="radio"]) {
  block-size: var(--space-4);
  inline-size: var(--space-4);
}
:-ms-input-placeholder {
  font-style: italic;
}
::placeholder {
  font-style: italic;
}
:where(input[readonly], input[disabled]) {
  background-color: var(--surface-2);
  cursor: not-allowed;
}
:where(input[disabled]) {
  opacity: 0.5;
  box-shadow: none;
}
/* Checkboxes and radio buttons are made bigger on touch devices. */
@media (pointer: coarse) {
  :where(input[type="checkbox"], input[type="radio"]) {
    inline-size: var(--space-5);
    block-size: var(--space-5);
  }
}
:where(select, textarea, input:not([type="button"], [type="submit"], [type="reset"], [type="file"], [type="checkbox"], [type="radio"], [type="color"], [type="range"])) {
  transition:
    background-color 350ms var(--ease-3),
    outline-offset 145ms var(--ease-2);

  box-shadow:
    var(--shadow-2),
    0 0 1px 1px var(--surface-3);
}
@media (prefers-color-scheme: dark) {
:where(:root:not(.is-light)) :where(select, textarea, input:not([type="button"], [type="submit"], [type="reset"], [type="file"], [type="checkbox"], [type="radio"], [type="color"], [type="range"])) {
    box-shadow:
      var(--inner-shadow-2),
      0 1px 0px 0px var(--input-dark-surface) inset,
      0 -0.5px 0px 0px var(--surface-2) inset;
}
  }
:where(:root.is-dark) :where(select, textarea, input:not([type="button"], [type="submit"], [type="reset"], [type="file"], [type="checkbox"], [type="radio"], [type="color"], [type="range"])) {
    box-shadow:
      var(--inner-shadow-2),
      0 1px 0px 0px var(--input-dark-surface) inset,
      0 -0.5px 0px 0px var(--surface-2) inset;
}
/*
* Layout
*/
:where(form) {
  display: grid;
  gap: var(--form-gap, var(--space-4));
}
/**
* A form group wrapping a label, an input and additional hints or messages.
* Vertical layout for all viewports.
*/
:where(.p-form-group) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
:where(.p-form-group) label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: var(--size-content-2);
    text-wrap: balance;
  }
:is(:where(.p-form-group) label):not(:last-child):has([type="radio"],[type="checkbox"]) {
      margin-block-end: var(--space-2);
    }
:where(.p-form-group) input:is([type="radio"],[type="checkbox"]) {
    flex-shrink: 0;
  }
/**
* Fieldset groups form controls with consistent spacing, max width and a heading
* (legend).
*
* Structure:
* <fieldset>
*   <legend>Title</legend>
*   <!-- form controls -->
*   <footer>
*     <menu><!-- actions --></menu>
*   </footer>
* </fieldset>
*/
:where(fieldset) {
  display: grid;
  gap: var(--space-3);
  max-inline-size: var(--size-content-2);
  border: none;
  padding-inline: 0;
}
:where(fieldset) :where(legend) {
    color: var(--text-color-2);
    font-weight: var(--font-weight-body-bold);
    font-size: var(--font-size-0);
    padding-inline: 0;
    margin-block-end: var(--space-3);
    text-wrap: balance;
  }
:where(fieldset) :where(footer) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
  }
:is(:where(fieldset) :where(footer)) :where(menu:only-child) {
      margin-inline-start: auto;
    }
.p-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}
.p-grid {
  display: grid;
  gap: var(--grid-gutter);
}
.p-auto-grid {
  --auto-grid-min: var(--size-content-2);
  --auto-grid-repeat: auto-fit;

  display: grid;
  column-gap: var(--grid-gutter);
  row-gap: var(--space-3-4);
  grid-template-columns: repeat(
    var(--auto-grid-repeat),
    minmax(min(100%, var(--auto-grid-min)), 1fr)
  );
}
.p-flow > * + * {
  --flow-space: 1em;

  margin-block-start: var(--flow-space);
}
.p-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
}
.p-stack {
  --stack-space: var(--space-5);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.p-stack:only-child {
    block-size: 100%;
  }
.p-stack  > * + * {
    margin-block-start: var(--stack-space);
  }
.p-cluster {
  --cluster-space: var(--space-3);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space);
}
.p-switcher {
  --switcher-space: var(--space-6);
  --switcher-treshold: var(--size-content-3);

  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-space);
}
.p-switcher  > * {
    /*
     * Applying different flex-grow for each child allows for different
     * proportions, if needed.
     */
    flex-grow: 1;
    /*
     * The calc function produces very large positive or negative number.
     * In case it is negative, this rule will be ignored by the browser.
     * In case it is positive, it grabs an equal amount of space for each child.
     */
    flex-basis: calc(
      (var(--switcher-treshold) - 100%) *
        999
    );
  }
.p-secondary-text-regular {
  font-size: var(--font-size--1);
}
.p-additional-text-regular {
  font-size: var(--font-size--2);
}
.p-base-text-bold {
  font-weight: var(--font-weight-body-bold);
  font-size: var(--font-size-0);
}
.p-secondary-text-bold {
  font-weight: var(--font-weight-body-bold);
  font-size: var(--font-size--1);
}
.p-additional-text-bold {
  font-weight: var(--font-weight-body-bold);
  font-size: var(--font-size--2);
}
.p-input-text {
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-body);
}
.p-heading-1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-headings);
}
.p-heading-2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-headings);
}
.p-heading-3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-headings);
}
.p-heading-4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-headings);
}
:where(.p-prose) {
  /* centered text with maximal width (the measure) */
  max-inline-size: var(--size-measure, var(--size-content-3));
  margin-inline: auto;

  /* like p-flow utility but bigger vertical gaps */
}
:where(.p-prose) * + *:not(figcaption,hr,li,.p-not-prose *) {
    margin-block-start: 1.2em;
  }
:where(.p-prose) :where(ul) {
    list-style-type: disc;
    padding-inline: revert-layer;
    margin-inline: revert-layer;
  }
:is(:where(.p-prose) :where(ul,ol)) p {
      margin-block-start: revert-layer;
    }
:is(:where(.p-prose) :where(ul,ol)) :where(ul,ol) {
      margin-block-start: revert-layer;
    }
:is(:where(.p-prose) :where(ul,ol)) :where(li) {
      margin-block-start: 0.5em;
    }
:is(:is(:where(.p-prose) :where(ul,ol)) :where(li))::marker {
        color: var(--text-color-2);
      }
:where(.p-prose) :where(pre) {
    font-size: var(--font-size--1);
    padding-inline: var(--space-4);
    padding-block: var(--space-3);
    margin-block: var(--space-6);
    background-color: var(--text-color-1-inverse);
    overflow-x: auto;
    max-inline-size: 100%;
  }
/*
* Settings are placed at the end since it is expected
* to be overridden by the user.
*/
/*
* Default values for semantic props (i.e. design tokens).
*/
:where(:root) {
  /* text */
  --font-family-body: sans-serif;
  --font-size-body: var(--font-size-0);
  --font-size-h1: var(--font-size-4);
  --font-size-h2: var(--font-size-3);
  --font-size-h3: var(--font-size-2);
  --font-size-h4: var(--font-size-1);
  --font-size-h5: var(--font-size-0);
  --font-weight-body-bold: var(--font-weight-6);
  --font-weight-body: var(--font-weight-4);
  --font-weight-headings: var(--font-weight-6);
  --font-weight-light: var(--font-weight-3);
  --line-height-body: var(--font-lineheight-3);
  --line-height-headings: var(--font-lineheight-1);

  /* colors */
  --text-color-1: var(--gray-12);
  --text-color-2: var(--gray-7);
  --text-color-1-inverse: var(--gray-1);
  --text-color-2-inverse: var(--gray-4);

  --surface-0: white;
  --surface-1: var(--gray-1);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);
  --surface-0-inverse: var(--gray-10);
  --surface-1-inverse: var(--gray-9);
  --surface-2-inverse: var(--gray-8);
  --surface-3-inverse: var(--gray-7);
  --surface-4-inverse: var(--gray-6);

  --accent-color: var(--brand-color);
  --caret-color: var(--brand-color);
  --focus-color: var(--brand-color);

  --text-color-body: var(--text-color-1);
  --text-color-headings: var(--text-color-1);
  --bg-color-body: var(--surface-0);

  --link-color: var(--blue-8);
  --link-color-visited: var(--purple-7);

  --positive-color: var(--green-9);
  --negative-color: var(--red-8);

  --error-alert-color: var(--red-11);
  --error-alert-bg-color: var(--red-1);

  --positive-alert-color: var(--green-11);
  --positive-alert-bg-color: var(--green-1);

  --scrollthumb-color: var(--gray-7);

  /* a11y */
  --outline-offset: 2px;

  /* forms and inputs */
  --input-radius: var(--radius-default);
  --font-weight-label: var(--font-weight-5);

  /* buttons */
  --button-height-default: 2.25rem;
  --font-weight-buttons: var(--font-weight-6);

  /* borders */
  --border-size-default: var(--border-size-1);
  --radius-default: var(--radius-2);
  --border-1: var(--border-size-1) solid var(--surface-2);
  --border-2: var(--border-size-1) solid var(--surface-3);
  --border-3: var(--border-size-1) solid var(--surface-4);
  --border-4: var(--border-size-1) solid var(--text-color-2);
  --border-5: var(--border-size-1) solid var(--text-color-1);

  /* inline-size */
  /* keep max-inline-size initial by default, this is opt-in */
  /* --max-inline-size-h1: var(--size-header-1); */
  /* --max-inline-size-h2: var(--size-header-2); */
  /* --max-inline-size-other-headings: var(--size-header-3); */
  /* --max-inline-size-elements: var(--size-content-2); */
  /* --max-inline-size-p: var(--size-content-3); */
}
@media (prefers-color-scheme: dark) {
  :where(:root:where(:not(.is-light))) {
    --text-color-1: var(--gray-1);
    --text-color-2: var(--gray-4);
    --text-color-1-inverse: var(--gray-12);
    --text-color-2-inverse: var(--gray-7);

    --surface-0: var(--gray-10);
    --surface-1: var(--gray-9);
    --surface-2: var(--gray-8);
    --surface-3: var(--gray-7);
    --surface-4: var(--gray-6);
    --surface-0-inverse: white;
    --surface-1-inverse: var(--gray-1);
    --surface-2-inverse: var(--gray-2);
    --surface-3-inverse: var(--gray-3);
    --surface-4-inverse: var(--gray-4);

    --bg-color-body: var(--surface-1);

    --scrollthumb-color: var(--gray-6);

    --positive-color: var(--green-6);
    --negative-color: var(--red-6);
    --error-alert-color: var(--red-1);
    --error-alert-bg-color: var(--red-11);
    --positive-alert-color: var(--green-11);
    --positive-alert-bg-color: var(--green-1);

    --link-color: var(--blue-4);
    --link-color-visited: var(--purple-3);

    --focus-color: var(--brand-color-bright);
  }
}
:where(:root:where(.is-dark)) {
    --text-color-1: var(--gray-1);
    --text-color-2: var(--gray-4);
    --text-color-1-inverse: var(--gray-12);
    --text-color-2-inverse: var(--gray-7);

    --surface-0: var(--gray-10);
    --surface-1: var(--gray-9);
    --surface-2: var(--gray-8);
    --surface-3: var(--gray-7);
    --surface-4: var(--gray-6);
    --surface-0-inverse: white;
    --surface-1-inverse: var(--gray-1);
    --surface-2-inverse: var(--gray-2);
    --surface-3-inverse: var(--gray-3);
    --surface-4-inverse: var(--gray-4);

    --bg-color-body: var(--surface-1);

    --scrollthumb-color: var(--gray-6);

    --positive-color: var(--green-6);
    --negative-color: var(--red-6);
    --error-alert-color: var(--red-1);
    --error-alert-bg-color: var(--red-11);
    --positive-alert-color: var(--green-11);
    --positive-alert-bg-color: var(--green-1);

    --link-color: var(--blue-4);
    --link-color-visited: var(--purple-3);

    --focus-color: var(--brand-color-bright);
  }
/*
* Based on Open Props: brand.css
*
* Default values for brand specific props.
*/
:where(:root) {
  --font-family-body: sans-serif;

  --brand-color: var(--blue-7);
  --brand-color-dim: var(--blue-8);
  --brand-color-bright: var(--blue-5);

  scrollbar-color: var(--scrollthumb-color) transparent;
  accent-color: var(--brand-color, var(--link-color));
  caret-color: var(--brand-color, var(--link-color));
  color: var(--text-color-1);
  background-color: var(--bg-color-body);
}

/*# sourceMappingURL=puleo.post.css.map */