/* Normalize and reset styles */
@layer base {
    /* poppins-regular - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        src: local(''),
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* poppins-italic - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: italic;
        font-weight: 400;
        src: local(''),
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* poppins-500 - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        src: local(''),
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* poppins-600 - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        src: local(''),
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* poppins-700 - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 700;
        src: local(''),
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('//4585441.fs1.hubspotusercontent-na1.net/hubfs/4585441/raw_assets/public/cylindo/fonts/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
}
@layer base {
  /*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
  */

  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: none;
  }

  ::before,
  ::after {
    --tw-content: '';
  }

  /*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  */

  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
  }

  /*
  1. Remove the margin in all browsers.
  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
  */

  body {
    margin: 0;
    line-height: inherit;
    overflow-x: hidden;
  }

  /*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Ensure horizontal rules are visible by default.
  */

  hr {
    block-size:  0;
    color: inherit;
    border-block-start-width: 1px;
  }

  /*
  Add the correct text decoration in Chrome, Edge, and Safari.
  */

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

  /*
  Remove the default font size and weight for headings.
  */

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

  /*
  Reset links to optimize for opt-in styling instead of opt-out.
  */

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

  /*
  Add the correct font weight in Edge and Safari.
  */

  b,
  strong {
    font-weight: bolder;
  }

  /*
  1. Use the user's configured `mono` font family by default.
  2. Correct the odd `em` font sizing in all browsers.
  */

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
  }

  /*
  Add the correct font size in all browsers.
  */

  small {
    font-size: 80%;
  }

  /*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
  */

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

  sub {
    inset-block-end: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
  */

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

  /*
  1. Change the font styles in all browsers.
  2. Remove the margin in Firefox and Safari.
  3. Remove default padding in all browsers.
  */

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  /*
  Remove the inheritance of text transform in Edge and Firefox.
  */

  button,
  select {
    text-transform: none;
  }

  /*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Remove default button styles.
  */

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
  }

  /*
  Use the modern Firefox focus style for all focusable elements.
  */

  :-moz-focusring {
    outline: auto;
  }

  /*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
  */

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

  /*
  Add the correct vertical alignment in Chrome and Firefox.
  */

  progress {
    vertical-align: baseline;
  }

  /*
  Correct the cursor style of increment and decrement buttons in Safari.
  */

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    block-size:  auto;
  }

  /*
  1. Correct the odd appearance in Chrome and Safari.
  2. Correct the outline style in Safari.
  */

  [type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  /*
  Remove the inner padding in Chrome and Safari on macOS.
  */

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

  /*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to `inherit` in Safari.
  */

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  /*
  Add the correct display in Chrome and Safari.
  */

  summary {
    display: list-item;
  }

  /*
  Removes the default spacing and border for appropriate elements.
  */

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

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

  /*
  Reset default styling for dialogs.
  */
  dialog {
    padding: 0;
  }

  /*
  Prevent resizing textareas horizontally by default.
  */

  textarea {
    resize: vertical;
  }

  /*
  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
  2. Set the default placeholder color to the user's configured gray 400 color.
  */

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
  }

  /*
  Set the default cursor for buttons.
  */

  button,
  [role="button"] {
    cursor: pointer;
  }

  /*
  Make sure disabled buttons don't get the pointer cursor.
  */
  :disabled {
    cursor: default;
  }

  /*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
  */

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

  /*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
  */

  img,
  video {
    max-inline-size: 100%;
    block-size:  auto;
  }

  /* Make elements with the HTML hidden attribute stay hidden by default */
  [hidden] {
    display: none;
  }

  /* Hide elements visually but keep them accessible to screen readers */
  .sr-only {
    display: none;
  }

  /* Enable smooth scrolling behavior */
  html { 
    scroll-behavior: smooth; 
  }

  /* Hide the scrollbar */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide the scrollbar in all browsers */
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hs_cos_wrapper_type_module {
    display: contents;
  }

  [data-hs-anchor="true"] {
    display: block;
    margin-block-start: -4rem;
    block-size: 4rem;
  }
}
@layer base, typography, primitive, widget, module, page, utility, theme, override;

/* ====================================================================================================
    Defaults
==================================================================================================== */
@layer base {
    :root {
        --font-optical-sizing: auto;
        --quotes-spacing: 0.12em; /* Define spacing units */
        --quotes-primary-open: "“";
        --quotes-primary-close: "”";
        --quotes-secondary-open: "‘";
        --quotes-secondary-close: "’";
    }

    body {
        font-optical-sizing: var(--font-optical-sizing);
    }
}


/* ====================================================================================================
    Reset
==================================================================================================== */
@layer base {
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol,
    ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    button {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
}


/* ====================================================================================================
    Localization
==================================================================================================== */
@layer base {
    blockquote,
    q {
        quotes: var(--quotes-primary-open) var(--quotes-primary-close) var(--quotes-secondary-open) var(--quotes-secondary-close);
    }

    blockquote:not(:has(p))::before,
    q:not(:has(p))::before,
    blockquote:has(p) p:first-of-type::before,
    q:has(p) p:first-of-type::before {
        content: open-quote;
        margin-inline-end: var(--quotes-spacing);
    }

    blockquote:not(:has(p))::after,
    q:not(:has(p))::after,
    blockquote:has(p) p:last-of-type::after,
    q:has(p) p:last-of-type::after {
        content: close-quote;
        margin-inline-start: var(--quotes-spacing);
    }
}
/* ====================================================================================================
    Fluid Sizing
==================================================================================================== */
@layer base {
    :root {
        --rem: 16; /* Pixel per REM for General Fluid Sizing */
        --s-min: 400; /* Screen Size Min for General Fluid Sizing */
        --s-max: 1400; /* Screen Size Max for General Fluid Sizing */
    }

    body * {
        /* ----------------------------------------------------------------------------------------
            Text Formatting
        */

        /* font-size: fs */
        --fs-v: calc(((100 * (var(--fs-max) - var(--fs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --fs-r: calc((((var(--s-min) * var(--fs-max)) - (var(--s-max) * var(--fs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --fs: clamp(calc((var(--fs-min) / var(--rem)) * 1rem), calc(var(--fs-v) + var(--fs-r) * 1rem), calc((var(--fs-max) / var(--rem)) * 1rem));

        /* line-height: lh */
        --lh-v: calc(((100 * (var(--lh-max) - var(--lh-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --lh-r: calc((((var(--s-min) * var(--lh-max)) - (var(--s-max) * var(--lh-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --lh: clamp(calc((var(--lh-min) / var(--rem)) * 1rem), calc(var(--lh-v) + var(--lh-r) * 1rem), calc((var(--lh-max) / var(--rem)) * 1rem));

        /* letter-spacing: ls */
        --ls-v: calc(((100 * (var(--ls-max) - var(--ls-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ls-r: calc((((var(--s-min) * var(--ls-max)) - (var(--s-max) * var(--ls-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ls: clamp(calc((var(--ls-min) / var(--rem)) * 1rem), calc(var(--ls-v) + var(--ls-r) * 1rem), calc((var(--ls-max) / var(--rem)) * 1rem));

        /* word-spacing: ws */
        --ws-v: calc(((100 * (var(--ws-max) - var(--ws-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ws-r: calc((((var(--s-min) * var(--ws-max)) - (var(--s-max) * var(--ws-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ws: clamp(calc((var(--ws-min) / var(--rem)) * 1rem), calc(var(--ws-v) + var(--ws-r) * 1rem), calc((var(--ws-max) / var(--rem)) * 1rem));

        /* text-indent: ti */
        --ti-v: calc(((100 * (var(--ti-max) - var(--ti-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ti-r: calc((((var(--s-min) * var(--ti-max)) - (var(--s-max) * var(--ti-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ti: clamp(calc((var(--ti-min) / var(--rem)) * 1rem), calc(var(--ti-v) + var(--ti-r) * 1rem), calc((var(--ti-max) / var(--rem)) * 1rem));

        /* text-decoration-thickness: tdt */
        --tdt-v: calc(((100 * (var(--tdt-max) - var(--tdt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --tdt-r: calc((((var(--s-min) * var(--tdt-max)) - (var(--s-max) * var(--tdt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --tdt: clamp(calc((var(--tdt-min) / var(--rem)) * 1rem), calc(var(--tdt-v) + var(--tdt-r) * 1rem), calc((var(--tdt-max) / var(--rem)) * 1rem));

        /* text-underline-offset: tuo */
        --tuo-v: calc(((100 * (var(--tuo-max) - var(--tuo-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --tuo-r: calc((((var(--s-min) * var(--tuo-max)) - (var(--s-max) * var(--tuo-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --tuo: clamp(calc((var(--tuo-min) / var(--rem)) * 1rem), calc(var(--tuo-v) + var(--tuo-r) * 1rem), calc((var(--tuo-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Margin
        */

        /* margin: m */
        --m-v: calc(((100 * (var(--m-max) - var(--m-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --m-r: calc((((var(--s-min) * var(--m-max)) - (var(--s-max) * var(--m-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --m: clamp(calc((var(--m-min) / var(--rem)) * 1rem), calc(var(--m-v) + var(--m-r) * 1rem), calc((var(--m-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Padding
        */

        /* padding: p */
        --p-v: calc(((100 * (var(--p-max) - var(--p-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --p-r: calc((((var(--s-min) * var(--p-max)) - (var(--s-max) * var(--p-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --p: clamp(calc((var(--p-min) / var(--rem)) * 1rem), calc(var(--p-v) + var(--p-r) * 1rem), calc((var(--p-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Border Width
        */

        /* border-width: bw */
        --bw-v: calc(((100 * (var(--bw-max) - var(--bw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bw-r: calc((((var(--s-min) * var(--bw-max)) - (var(--s-max) * var(--bw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bw: clamp(calc((var(--bw-min) / var(--rem)) * 1rem), calc(var(--bw-v) + var(--bw-r) * 1rem), calc((var(--bw-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Border Radius
        */

        /* border-radius: br */
        --br-v: calc(((100 * (var(--br-max) - var(--br-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --br-r: calc((((var(--s-min) * var(--br-max)) - (var(--s-max) * var(--br-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --br: clamp(calc((var(--br-min) / var(--rem)) * 1rem), calc(var(--br-v) + var(--br-r) * 1rem), calc((var(--br-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Outline
        */

        /* outline-width: ow */
        --ow-v: calc(((100 * (var(--ow-max) - var(--ow-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ow-r: calc((((var(--s-min) * var(--ow-max)) - (var(--s-max) * var(--ow-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ow: clamp(calc((var(--ow-min) / var(--rem)) * 1rem), calc(var(--ow-v) + var(--ow-r) * 1rem), calc((var(--ow-max) / var(--rem)) * 1rem));

        /* outline-offset: oo */
        --oo-v: calc(((100 * (var(--oo-max) - var(--oo-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --oo-r: calc((((var(--s-min) * var(--oo-max)) - (var(--s-max) * var(--oo-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --oo: clamp(calc((var(--oo-min) / var(--rem)) * 1rem), calc(var(--oo-v) + var(--oo-r) * 1rem), calc((var(--oo-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Inset
        */

        /* inset: i */
        --i-v: calc(((100 * (var(--i-max) - var(--i-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --i-r: calc((((var(--s-min) * var(--i-max)) - (var(--s-max) * var(--i-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --i: clamp(calc((var(--i-min) / var(--rem)) * 1rem), calc(var(--i-v) + var(--i-r) * 1rem), calc((var(--i-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Grid, Flex and Columns
        */

        /* grid-auto-columns: gac */
        --gac-v: calc(((100 * (var(--gac-max) - var(--gac-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --gac-r: calc((((var(--s-min) * var(--gac-max)) - (var(--s-max) * var(--gac-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --gac: clamp(calc((var(--gac-min) / var(--rem)) * 1rem), calc(var(--gac-v) + var(--gac-r) * 1rem), calc((var(--gac-max) / var(--rem)) * 1rem));

        /* grid-auto-rows: gar */
        --gar-v: calc(((100 * (var(--gar-max) - var(--gar-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --gar-r: calc((((var(--s-min) * var(--gar-max)) - (var(--s-max) * var(--gar-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --gar: clamp(calc((var(--gar-min) / var(--rem)) * 1rem), calc(var(--gar-v) + var(--gar-r) * 1rem), calc((var(--gar-max) / var(--rem)) * 1rem));

        /* gap: g */
        --g-v: calc(((100 * (var(--g-max) - var(--g-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --g-r: calc((((var(--s-min) * var(--g-max)) - (var(--s-max) * var(--g-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --g: clamp(calc((var(--g-min) / var(--rem)) * 1rem), calc(var(--g-v) + var(--g-r) * 1rem), calc((var(--g-max) / var(--rem)) * 1rem));

        /* column-gap: cg */
        --cg-v: calc(((100 * (var(--cg-max) - var(--cg-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --cg-r: calc((((var(--s-min) * var(--cg-max)) - (var(--s-max) * var(--cg-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --cg: clamp(calc((var(--cg-min) / var(--rem)) * 1rem), calc(var(--cg-v) + var(--cg-r) * 1rem), calc((var(--cg-max) / var(--rem)) * 1rem));

        /* row-gap: rg */
        --rg-v: calc(((100 * (var(--rg-max) - var(--rg-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --rg-r: calc((((var(--s-min) * var(--rg-max)) - (var(--s-max) * var(--rg-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --rg: clamp(calc((var(--rg-min) / var(--rem)) * 1rem), calc(var(--rg-v) + var(--rg-r) * 1rem), calc((var(--rg-max) / var(--rem)) * 1rem));

        /* column-width: cw */
        --cw-v: calc(((100 * (var(--cw-max) - var(--cw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --cw-r: calc((((var(--s-min) * var(--cw-max)) - (var(--s-max) * var(--cw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --cw: clamp(calc((var(--cw-min) / var(--rem)) * 1rem), calc(var(--cw-v) + var(--cw-r) * 1rem), calc((var(--cw-max) / var(--rem)) * 1rem));

        /* column-rule-width: crw */
        --crw-v: calc(((100 * (var(--crw-max) - var(--crw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --crw-r: calc((((var(--s-min) * var(--crw-max)) - (var(--s-max) * var(--crw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --crw: clamp(calc((var(--crw-min) / var(--rem)) * 1rem), calc(var(--crw-v) + var(--crw-r) * 1rem), calc((var(--crw-max) / var(--rem)) * 1rem));

        /* flex-basis: fb */
        --fb-v: calc(((100 * (var(--fb-max) - var(--fb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --fb-r: calc((((var(--s-min) * var(--fb-max)) - (var(--s-max) * var(--fb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --fb: clamp(calc((var(--fb-min) / var(--rem)) * 1rem), calc(var(--fb-v) + var(--fb-r) * 1rem), calc((var(--fb-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Background
        */

        /* background-position-x: bpx */
        --bpx-v: calc(((100 * (var(--bpx-max) - var(--bpx-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bpx-r: calc((((var(--s-min) * var(--bpx-max)) - (var(--s-max) * var(--bpx-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bpx: clamp(calc((var(--bpx-min) / var(--rem)) * 1rem), calc(var(--bpx-v) + var(--bpx-r) * 1rem), calc((var(--bpx-max) / var(--rem)) * 1rem));

        /* background-position-y: bpy */
        --bpy-v: calc(((100 * (var(--bpy-max) - var(--bpy-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bpy-r: calc((((var(--s-min) * var(--bpy-max)) - (var(--s-max) * var(--bpy-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bpy: clamp(calc((var(--bpy-min) / var(--rem)) * 1rem), calc(var(--bpy-v) + var(--bpy-r) * 1rem), calc((var(--bpy-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Scroll
        */

        /* scroll-margin: sm */
        --sm-v: calc(((100 * (var(--sm-max) - var(--sm-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --sm-r: calc((((var(--s-min) * var(--sm-max)) - (var(--s-max) * var(--sm-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --sm: clamp(calc((var(--sm-min) / var(--rem)) * 1rem), calc(var(--sm-v) + var(--sm-r) * 1rem), calc((var(--sm-max) / var(--rem)) * 1rem));

        /* scroll-padding: sp */
        --sp-v: calc(((100 * (var(--sp-max) - var(--sp-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --sp-r: calc((((var(--s-min) * var(--sp-max)) - (var(--s-max) * var(--sp-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --sp: clamp(calc((var(--sp-min) / var(--rem)) * 1rem), calc(var(--sp-v) + var(--sp-r) * 1rem), calc((var(--sp-max) / var(--rem)) * 1rem));
    }
}

/* ====================================================================================================
    Fluid Sizing
==================================================================================================== */
@layer base {
    body * {
        /* ----------------------------------------------------------------------------------------
            Block
        */

        /* height: bs */
        --h-v: calc(((100 * (var(--h-max) - var(--h-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --h-r: calc((((var(--s-min) * var(--h-max)) - (var(--s-max) * var(--h-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --h: clamp(calc((var(--h-min) / var(--rem)) * 1rem), calc(var(--h-v) + var(--h-r) * 1rem), calc((var(--h-max) / var(--rem)) * 1rem));

        /* min-height: minh */
        --minh-v: calc(((100 * (var(--minh-max) - var(--minh-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --minh-r: calc((((var(--s-min) * var(--minh-max)) - (var(--s-max) * var(--minh-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --minh: clamp(calc((var(--minh-min) / var(--rem)) * 1rem), calc(var(--minh-v) + var(--minh-r) * 1rem), calc((var(--minh-max) / var(--rem)) * 1rem));

        /* max-height: maxh */
        --maxh-v: calc(((100 * (var(--maxh-max) - var(--maxh-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --maxh-r: calc((((var(--s-min) * var(--maxh-max)) - (var(--s-max) * var(--maxh-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --maxh: clamp(calc((var(--maxh-min) / var(--rem)) * 1rem), calc(var(--maxh-v) + var(--maxh-r) * 1rem), calc((var(--maxh-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Width
        */

        /* width: is */
        --w-v: calc(((100 * (var(--w-max) - var(--w-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --w-r: calc((((var(--s-min) * var(--w-max)) - (var(--s-max) * var(--w-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --w: clamp(calc((var(--w-min) / var(--rem)) * 1rem), calc(var(--w-v) + var(--w-r) * 1rem), calc((var(--w-max) / var(--rem)) * 1rem));

        /* min-width: minw */
        --minw-v: calc(((100 * (var(--minw-max) - var(--minw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --minw-r: calc((((var(--s-min) * var(--minw-max)) - (var(--s-max) * var(--minw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --minw: clamp(calc((var(--minw-min) / var(--rem)) * 1rem), calc(var(--minw-v) + var(--minw-r) * 1rem), calc((var(--minw-max) / var(--rem)) * 1rem));

        /* max-width: maxw */
        --maxw-v: calc(((100 * (var(--maxw-max) - var(--maxw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --maxw-r: calc((((var(--s-min) * var(--maxw-max)) - (var(--s-max) * var(--maxw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --maxw: clamp(calc((var(--maxw-min) / var(--rem)) * 1rem), calc(var(--maxw-v) + var(--maxw-r) * 1rem), calc((var(--maxw-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Margin
        */

        /* margin-block-start: mt */
        --mt-v: calc(((100 * (var(--mt-max) - var(--mt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mt-r: calc((((var(--s-min) * var(--mt-max)) - (var(--s-max) * var(--mt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mt: clamp(calc((var(--mt-min) / var(--rem)) * 1rem), calc(var(--mt-v) + var(--mt-r) * 1rem), calc((var(--mt-max) / var(--rem)) * 1rem));

        /* margin-block-end: mgb */
        --mgb-v: calc(((100 * (var(--mgb-max) - var(--mgb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mgb-r: calc((((var(--s-min) * var(--mgb-max)) - (var(--s-max) * var(--mgb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mgb: clamp(calc((var(--mgb-min) / var(--rem)) * 1rem), calc(var(--mgb-v) + var(--mgb-r) * 1rem), calc((var(--mgb-max) / var(--rem)) * 1rem));

        /* margin-inline-start: ml */
        --ml-v: calc(((100 * (var(--ml-max) - var(--ml-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ml-r: calc((((var(--s-min) * var(--ml-max)) - (var(--s-max) * var(--ml-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ml: clamp(calc((var(--ml-min) / var(--rem)) * 1rem), calc(var(--ml-v) + var(--ml-r) * 1rem), calc((var(--ml-max) / var(--rem)) * 1rem));

        /* margin-inline-end: mr */
        --mr-v: calc(((100 * (var(--mr-max) - var(--mr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mr-r: calc((((var(--s-min) * var(--mr-max)) - (var(--s-max) * var(--mr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mr: clamp(calc((var(--mr-min) / var(--rem)) * 1rem), calc(var(--mr-v) + var(--mr-r) * 1rem), calc((var(--mr-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Padding
        */

        /* padding-top: pt */
        --pt-v: calc(((100 * (var(--pt-max) - var(--pt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pt-r: calc((((var(--s-min) * var(--pt-max)) - (var(--s-max) * var(--pt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pt: clamp(calc((var(--pt-min) / var(--rem)) * 1rem), calc(var(--pt-v) + var(--pt-r) * 1rem), calc((var(--pt-max) / var(--rem)) * 1rem));

        /* padding-bottom: pb */
        --pb-v: calc(((100 * (var(--pb-max) - var(--pb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pb-r: calc((((var(--s-min) * var(--pb-max)) - (var(--s-max) * var(--pb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pb: clamp(calc((var(--pb-min) / var(--rem)) * 1rem), calc(var(--pb-v) + var(--pb-r) * 1rem), calc((var(--pb-max) / var(--rem)) * 1rem));

        /* padding-left: pl */
        --pl-v: calc(((100 * (var(--pl-max) - var(--pl-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pl-r: calc((((var(--s-min) * var(--pl-max)) - (var(--s-max) * var(--pl-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pl: clamp(calc((var(--pl-min) / var(--rem)) * 1rem), calc(var(--pl-v) + var(--pl-r) * 1rem), calc((var(--pl-max) / var(--rem)) * 1rem));

        /* padding-right: pr */
        --pr-v: calc(((100 * (var(--pr-max) - var(--pr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pr-r: calc((((var(--s-min) * var(--pr-max)) - (var(--s-max) * var(--pr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pr: clamp(calc((var(--pr-min) / var(--rem)) * 1rem), calc(var(--pr-v) + var(--pr-r) * 1rem), calc((var(--pr-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Border Width
        */

        /* border-top-width: btw */
        --btw-v: calc(((100 * (var(--btw-max) - var(--btw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --btw-r: calc((((var(--s-min) * var(--btw-max)) - (var(--s-max) * var(--btw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --btw: clamp(calc((var(--btw-min) / var(--rem)) * 1rem), calc(var(--btw-v) + var(--btw-r) * 1rem), calc((var(--btw-max) / var(--rem)) * 1rem));

        /* border-bottom-width: bbwth */
        --bbwth-v: calc(((100 * (var(--bbwth-max) - var(--bbwth-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bbwth-r: calc((((var(--s-min) * var(--bbwth-max)) - (var(--s-max) * var(--bbwth-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bbwth: clamp(calc((var(--bbwth-min) / var(--rem)) * 1rem), calc(var(--bbwth-v) + var(--bbwth-r) * 1rem), calc((var(--bbwth-max) / var(--rem)) * 1rem));

        /* border-left-width: blw */
        --blw-v: calc(((100 * (var(--blw-max) - var(--blw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --blw-r: calc((((var(--s-min) * var(--blw-max)) - (var(--s-max) * var(--blw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --blw: clamp(calc((var(--blw-min) / var(--rem)) * 1rem), calc(var(--blw-v) + var(--blw-r) * 1rem), calc((var(--blw-max) / var(--rem)) * 1rem));

        /* border-right-width: bbrw */
        --bbrw-v: calc(((100 * (var(--bbrw-max) - var(--bbrw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bbrw-r: calc((((var(--s-min) * var(--bbrw-max)) - (var(--s-max) * var(--bbrw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bbrw: clamp(calc((var(--bbrw-min) / var(--rem)) * 1rem), calc(var(--bbrw-v) + var(--bbrw-r) * 1rem), calc((var(--bbrw-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Border Radius
        */

        /* border-top-left-radius: btlr */
        --btlr-v: calc(((100 * (var(--btlr-max) - var(--btlr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --btlr-r: calc((((var(--s-min) * var(--btlr-max)) - (var(--s-max) * var(--btlr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --btlr: clamp(calc((var(--btlr-min) / var(--rem)) * 1rem), calc(var(--btlr-v) + var(--btlr-r) * 1rem), calc((var(--btlr-max) / var(--rem)) * 1rem));

        /* border-top-right-radius: btrr */
        --btrr-v: calc(((100 * (var(--btrr-max) - var(--btrr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --btrr-r: calc((((var(--s-min) * var(--btrr-max)) - (var(--s-max) * var(--btrr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --btrr: clamp(calc((var(--btrr-min) / var(--rem)) * 1rem), calc(var(--btrr-v) + var(--btrr-r) * 1rem), calc((var(--btrr-max) / var(--rem)) * 1rem));

        /* border-bottom-right-radius: bbrr */
        --bbrr-v: calc(((100 * (var(--bbrr-max) - var(--bbrr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bbrr-r: calc((((var(--s-min) * var(--bbrr-max)) - (var(--s-max) * var(--bbrr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bbrr: clamp(calc((var(--bbrr-min) / var(--rem)) * 1rem), calc(var(--bbrr-v) + var(--bbrr-r) * 1rem), calc((var(--bbrr-max) / var(--rem)) * 1rem));

        /* border-bottom-left-radius: bblr */
        --bblr-v: calc(((100 * (var(--bblr-max) - var(--bblr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bblr-r: calc((((var(--s-min) * var(--bblr-max)) - (var(--s-max) * var(--bblr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bblr: clamp(calc((var(--bblr-min) / var(--rem)) * 1rem), calc(var(--bblr-v) + var(--bblr-r) * 1rem), calc((var(--bblr-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Inset
        */

        /* inset-top: ibt */
        --ibt-v: calc(((100 * (var(--ibt-max) - var(--ibt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ibt-r: calc((((var(--s-min) * var(--ibt-max)) - (var(--s-max) * var(--ibt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ibt: clamp(calc((var(--ibt-min) / var(--rem)) * 1rem), calc(var(--ibt-v) + var(--ibt-r) * 1rem), calc((var(--ibt-max) / var(--rem)) * 1rem));

        /* inset-bottom: ibb */
        --ibb-v: calc(((100 * (var(--ibb-max) - var(--ibb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ibb-r: calc((((var(--s-min) * var(--ibb-max)) - (var(--s-max) * var(--ibb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ibb: clamp(calc((var(--ibb-min) / var(--rem)) * 1rem), calc(var(--ibb-v) + var(--ibb-r) * 1rem), calc((var(--ibb-max) / var(--rem)) * 1rem));

        /* inset-left: il */
        --il-v: calc(((100 * (var(--il-max) - var(--il-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --il-r: calc((((var(--s-min) * var(--il-max)) - (var(--s-max) * var(--il-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --il: clamp(calc((var(--il-min) / var(--rem)) * 1rem), calc(var(--il-v) + var(--il-r) * 1rem), calc((var(--il-max) / var(--rem)) * 1rem));

        /* inset-right: ir */
        --ir-v: calc(((100 * (var(--ir-max) - var(--ir-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ir-r: calc((((var(--s-min) * var(--ir-max)) - (var(--s-max) * var(--ir-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ir: clamp(calc((var(--ir-min) / var(--rem)) * 1rem), calc(var(--ir-v) + var(--ir-r) * 1rem), calc((var(--ir-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Scroll
        */

        /* scroll-margin-block-start: smt */
        --smt-v: calc(((100 * (var(--smt-max) - var(--smt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smt-r: calc((((var(--s-min) * var(--smt-max)) - (var(--s-max) * var(--smt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smt: clamp(calc((var(--smt-min) / var(--rem)) * 1rem), calc(var(--smt-v) + var(--smt-r) * 1rem), calc((var(--smt-max) / var(--rem)) * 1rem));

        /* scroll-margin-block-end: smb */
        --smbt-v: calc(((100 * (var(--smbt-max) - var(--smbt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smbt-r: calc((((var(--s-min) * var(--smbt-max)) - (var(--s-max) * var(--smbt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smbt: clamp(calc((var(--smbt-min) / var(--rem)) * 1rem), calc(var(--smbt-v) + var(--smbt-r) * 1rem), calc((var(--smbt-max) / var(--rem)) * 1rem));

        /* scroll-margin-inline-start: sml */
        --sml-v: calc(((100 * (var(--sml-max) - var(--sml-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --sml-r: calc((((var(--s-min) * var(--sml-max)) - (var(--s-max) * var(--sml-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --sml: clamp(calc((var(--sml-min) / var(--rem)) * 1rem), calc(var(--sml-v) + var(--sml-r) * 1rem), calc((var(--sml-max) / var(--rem)) * 1rem));

        /* scroll-margin-inline-end: smr */
        --smr-v: calc(((100 * (var(--smr-max) - var(--smr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smr-r: calc((((var(--s-min) * var(--smr-max)) - (var(--s-max) * var(--smr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smr: clamp(calc((var(--smr-min) / var(--rem)) * 1rem), calc(var(--smr-v) + var(--smr-r) * 1rem), calc((var(--smr-max) / var(--rem)) * 1rem));

        /* scroll-padding-top: spt */
        --spt-v: calc(((100 * (var(--spt-max) - var(--spt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spt-r: calc((((var(--s-min) * var(--spt-max)) - (var(--s-max) * var(--spt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spt: clamp(calc((var(--spt-min) / var(--rem)) * 1rem), calc(var(--spt-v) + var(--spt-r) * 1rem), calc((var(--spt-max) / var(--rem)) * 1rem));

        /* scroll-padding-bottom: spbt */
        --spbt-v: calc(((100 * (var(--spbt-max) - var(--spbt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spbt-r: calc((((var(--s-min) * var(--spbt-max)) - (var(--s-max) * var(--spbt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spbt: clamp(calc((var(--spbt-min) / var(--rem)) * 1rem), calc(var(--spbt-v) + var(--spbt-r) * 1rem), calc((var(--spbt-max) / var(--rem)) * 1rem));

        /* scroll-padding-left: spl */
        --spl-v: calc(((100 * (var(--spl-max) - var(--spl-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spl-r: calc((((var(--s-min) * var(--spl-max)) - (var(--s-max) * var(--spl-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spl: clamp(calc((var(--spl-min) / var(--rem)) * 1rem), calc(var(--spl-v) + var(--spl-r) * 1rem), calc((var(--spl-max) / var(--rem)) * 1rem));

        /* scroll-padding-right: spr */
        --spr-v: calc(((100 * (var(--spr-max) - var(--spr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spr-r: calc((((var(--s-min) * var(--spr-max)) - (var(--s-max) * var(--spr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spr: clamp(calc((var(--spr-min) / var(--rem)) * 1rem), calc(var(--spr-v) + var(--spr-r) * 1rem), calc((var(--spr-max) / var(--rem)) * 1rem));
    }
}

/* ====================================================================================================
    Fluid Sizing
==================================================================================================== */
@layer base {
    body * {
        /* ----------------------------------------------------------------------------------------
            Block
        */

        /* block-size: bs */
        --bs-v: calc(((100 * (var(--bs-max) - var(--bs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bs-r: calc((((var(--s-min) * var(--bs-max)) - (var(--s-max) * var(--bs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bs: clamp(calc((var(--bs-min) / var(--rem)) * 1rem), calc(var(--bs-v) + var(--bs-r) * 1rem), calc((var(--bs-max) / var(--rem)) * 1rem));

        /* min-block-size: minbs */
        --minbs-v: calc(((100 * (var(--minbs-max) - var(--minbs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --minbs-r: calc((((var(--s-min) * var(--minbs-max)) - (var(--s-max) * var(--minbs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --minbs: clamp(calc((var(--minbs-min) / var(--rem)) * 1rem), calc(var(--minbs-v) + var(--minbs-r) * 1rem), calc((var(--minbs-max) / var(--rem)) * 1rem));

        /* max-block-size: maxbs */
        --maxbs-v: calc(((100 * (var(--maxbs-max) - var(--maxbs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --maxbs-r: calc((((var(--s-min) * var(--maxbs-max)) - (var(--s-max) * var(--maxbs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --maxbs: clamp(calc((var(--maxbs-min) / var(--rem)) * 1rem), calc(var(--maxbs-v) + var(--maxbs-r) * 1rem), calc((var(--maxbs-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Inline
        */

        /* inline-size: is */
        --is-v: calc(((100 * (var(--is-max) - var(--is-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --is-r: calc((((var(--s-min) * var(--is-max)) - (var(--s-max) * var(--is-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --is: clamp(calc((var(--is-min) / var(--rem)) * 1rem), calc(var(--is-v) + var(--is-r) * 1rem), calc((var(--is-max) / var(--rem)) * 1rem));

        /* min-inline-size: minis */
        --minis-v: calc(((100 * (var(--minis-max) - var(--minis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --minis-r: calc((((var(--s-min) * var(--minis-max)) - (var(--s-max) * var(--minis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --minis: clamp(calc((var(--minis-min) / var(--rem)) * 1rem), calc(var(--minis-v) + var(--minis-r) * 1rem), calc((var(--minis-max) / var(--rem)) * 1rem));

        /* max-inline-size: maxis */
        --maxis-v: calc(((100 * (var(--maxis-max) - var(--maxis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --maxis-r: calc((((var(--s-min) * var(--maxis-max)) - (var(--s-max) * var(--maxis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --maxis: clamp(calc((var(--maxis-min) / var(--rem)) * 1rem), calc(var(--maxis-v) + var(--maxis-r) * 1rem), calc((var(--maxis-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Margin
        */

        /* margin-block: mb */
        --mb-v: calc(((100 * (var(--mb-max) - var(--mb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mb-r: calc((((var(--s-min) * var(--mb-max)) - (var(--s-max) * var(--mb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mb: clamp(calc((var(--mb-min) / var(--rem)) * 1rem), calc(var(--mb-v) + var(--mb-r) * 1rem), calc((var(--mb-max) / var(--rem)) * 1rem));

        /* margin-block-start: mbs */
        --mbs-v: calc(((100 * (var(--mbs-max) - var(--mbs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mbs-r: calc((((var(--s-min) * var(--mbs-max)) - (var(--s-max) * var(--mbs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mbs: clamp(calc((var(--mbs-min) / var(--rem)) * 1rem), calc(var(--mbs-v) + var(--mbs-r) * 1rem), calc((var(--mbs-max) / var(--rem)) * 1rem));

        /* margin-block-end: mbe */
        --mbe-v: calc(((100 * (var(--mbe-max) - var(--mbe-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mbe-r: calc((((var(--s-min) * var(--mbe-max)) - (var(--s-max) * var(--mbe-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mbe: clamp(calc((var(--mbe-min) / var(--rem)) * 1rem), calc(var(--mbe-v) + var(--mbe-r) * 1rem), calc((var(--mbe-max) / var(--rem)) * 1rem));

        /* margin-inline: mi */
        --mi-v: calc(((100 * (var(--mi-max) - var(--mi-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mi-r: calc((((var(--s-min) * var(--mi-max)) - (var(--s-max) * var(--mi-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mi: clamp(calc((var(--mi-min) / var(--rem)) * 1rem), calc(var(--mi-v) + var(--mi-r) * 1rem), calc((var(--mi-max) / var(--rem)) * 1rem));

        /* margin-inline-start: mis */
        --mis-v: calc(((100 * (var(--mis-max) - var(--mis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mis-r: calc((((var(--s-min) * var(--mis-max)) - (var(--s-max) * var(--mis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mis: clamp(calc((var(--mis-min) / var(--rem)) * 1rem), calc(var(--mis-v) + var(--mis-r) * 1rem), calc((var(--mis-max) / var(--rem)) * 1rem));

        /* margin-inline-end: mie */
        --mie-v: calc(((100 * (var(--mie-max) - var(--mie-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --mie-r: calc((((var(--s-min) * var(--mie-max)) - (var(--s-max) * var(--mie-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --mie: clamp(calc((var(--mie-min) / var(--rem)) * 1rem), calc(var(--mie-v) + var(--mie-r) * 1rem), calc((var(--mie-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Padding
        */

        /* padding-block: pb */
        --pb-v: calc(((100 * (var(--pb-max) - var(--pb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pb-r: calc((((var(--s-min) * var(--pb-max)) - (var(--s-max) * var(--pb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pb: clamp(calc((var(--pb-min) / var(--rem)) * 1rem), calc(var(--pb-v) + var(--pb-r) * 1rem), calc((var(--pb-max) / var(--rem)) * 1rem));

        /* padding-block-start: pbs */
        --pbs-v: calc(((100 * (var(--pbs-max) - var(--pbs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pbs-r: calc((((var(--s-min) * var(--pbs-max)) - (var(--s-max) * var(--pbs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pbs: clamp(calc((var(--pbs-min) / var(--rem)) * 1rem), calc(var(--pbs-v) + var(--pbs-r) * 1rem), calc((var(--pbs-max) / var(--rem)) * 1rem));

        /* padding-block-end: pbe */
        --pbe-v: calc(((100 * (var(--pbe-max) - var(--pbe-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pbe-r: calc((((var(--s-min) * var(--pbe-max)) - (var(--s-max) * var(--pbe-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pbe: clamp(calc((var(--pbe-min) / var(--rem)) * 1rem), calc(var(--pbe-v) + var(--pbe-r) * 1rem), calc((var(--pbe-max) / var(--rem)) * 1rem));

        /* padding-inline: pi */
        --pi-v: calc(((100 * (var(--pi-max) - var(--pi-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pi-r: calc((((var(--s-min) * var(--pi-max)) - (var(--s-max) * var(--pi-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pi: clamp(calc((var(--pi-min) / var(--rem)) * 1rem), calc(var(--pi-v) + var(--pi-r) * 1rem), calc((var(--pi-max) / var(--rem)) * 1rem));

        /* padding-inline-start: pis */
        --pis-v: calc(((100 * (var(--pis-max) - var(--pis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pis-r: calc((((var(--s-min) * var(--pis-max)) - (var(--s-max) * var(--pis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pis: clamp(calc((var(--pis-min) / var(--rem)) * 1rem), calc(var(--pis-v) + var(--pis-r) * 1rem), calc((var(--pis-max) / var(--rem)) * 1rem));

        /* padding-inline-end: pie */
        --pie-v: calc(((100 * (var(--pie-max) - var(--pie-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --pie-r: calc((((var(--s-min) * var(--pie-max)) - (var(--s-max) * var(--pie-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --pie: clamp(calc((var(--pie-min) / var(--rem)) * 1rem), calc(var(--pie-v) + var(--pie-r) * 1rem), calc((var(--pie-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Border Width
        */

        /* border-block-width: bbw */
        --bbw-v: calc(((100 * (var(--bbw-max) - var(--bbw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bbw-r: calc((((var(--s-min) * var(--bbw-max)) - (var(--s-max) * var(--bbw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bbw: clamp(calc((var(--bbw-min) / var(--rem)) * 1rem), calc(var(--bbw-v) + var(--bbw-r) * 1rem), calc((var(--bbw-max) / var(--rem)) * 1rem));

        /* border-block-start-width: bbsw */
        --bbsw-v: calc(((100 * (var(--bbsw-max) - var(--bbsw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bbsw-r: calc((((var(--s-min) * var(--bbsw-max)) - (var(--s-max) * var(--bbsw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bbsw: clamp(calc((var(--bbsw-min) / var(--rem)) * 1rem), calc(var(--bbsw-v) + var(--bbsw-r) * 1rem), calc((var(--bbsw-max) / var(--rem)) * 1rem));

        /* border-block-end-width: bbew */
        --bbew-v: calc(((100 * (var(--bbew-max) - var(--bbew-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bbew-r: calc((((var(--s-min) * var(--bbew-max)) - (var(--s-max) * var(--bbew-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bbew: clamp(calc((var(--bbew-min) / var(--rem)) * 1rem), calc(var(--bbew-v) + var(--bbew-r) * 1rem), calc((var(--bbew-max) / var(--rem)) * 1rem));

        /* border-inline-width: biw */
        --biw-v: calc(((100 * (var(--biw-max) - var(--biw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --biw-r: calc((((var(--s-min) * var(--biw-max)) - (var(--s-max) * var(--biw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --biw: clamp(calc((var(--biw-min) / var(--rem)) * 1rem), calc(var(--biw-v) + var(--biw-r) * 1rem), calc((var(--biw-max) / var(--rem)) * 1rem));

        /* border-inline-start-width: bisw */
        --bisw-v: calc(((100 * (var(--bisw-max) - var(--bisw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bisw-r: calc((((var(--s-min) * var(--bisw-max)) - (var(--s-max) * var(--bisw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bisw: clamp(calc((var(--bisw-min) / var(--rem)) * 1rem), calc(var(--bisw-v) + var(--bisw-r) * 1rem), calc((var(--bisw-max) / var(--rem)) * 1rem));

        /* border-inline-end-width: biew */
        --biew-v: calc(((100 * (var(--biew-max) - var(--biew-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --biew-r: calc((((var(--s-min) * var(--biew-max)) - (var(--s-max) * var(--biew-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --biew: clamp(calc((var(--biew-min) / var(--rem)) * 1rem), calc(var(--biew-v) + var(--biew-r) * 1rem), calc((var(--biew-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Border Radius
        */

        /* border-start-start-radius: bssr */
        --bssr-v: calc(((100 * (var(--bssr-max) - var(--bssr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bssr-r: calc((((var(--s-min) * var(--bssr-max)) - (var(--s-max) * var(--bssr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bssr: clamp(calc((var(--bssr-min) / var(--rem)) * 1rem), calc(var(--bssr-v) + var(--bssr-r) * 1rem), calc((var(--bssr-max) / var(--rem)) * 1rem));

        /* border-start-end-radius: bser */
        --bser-v: calc(((100 * (var(--bser-max) - var(--bser-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --bser-r: calc((((var(--s-min) * var(--bser-max)) - (var(--s-max) * var(--bser-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --bser: clamp(calc((var(--bser-min) / var(--rem)) * 1rem), calc(var(--bser-v) + var(--bser-r) * 1rem), calc((var(--bser-max) / var(--rem)) * 1rem));

        /* border-end-end-radius: beer */
        --beer-v: calc(((100 * (var(--beer-max) - var(--beer-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --beer-r: calc((((var(--s-min) * var(--beer-max)) - (var(--s-max) * var(--beer-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --beer: clamp(calc((var(--beer-min) / var(--rem)) * 1rem), calc(var(--beer-v) + var(--beer-r) * 1rem), calc((var(--beer-max) / var(--rem)) * 1rem));

        /* border-end-start-radius: besr */
        --besr-v: calc(((100 * (var(--besr-max) - var(--besr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --besr-r: calc((((var(--s-min) * var(--besr-max)) - (var(--s-max) * var(--besr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --besr: clamp(calc((var(--besr-min) / var(--rem)) * 1rem), calc(var(--besr-v) + var(--besr-r) * 1rem), calc((var(--besr-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Inset
        */

        /* inset-block: ib */
        --ib-v: calc(((100 * (var(--ib-max) - var(--ib-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ib-r: calc((((var(--s-min) * var(--ib-max)) - (var(--s-max) * var(--ib-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ib: clamp(calc((var(--ib-min) / var(--rem)) * 1rem), calc(var(--ib-v) + var(--ib-r) * 1rem), calc((var(--ib-max) / var(--rem)) * 1rem));

        /* inset-block-start: ibs */
        --ibs-v: calc(((100 * (var(--ibs-max) - var(--ibs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ibs-r: calc((((var(--s-min) * var(--ibs-max)) - (var(--s-max) * var(--ibs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ibs: clamp(calc((var(--ibs-min) / var(--rem)) * 1rem), calc(var(--ibs-v) + var(--ibs-r) * 1rem), calc((var(--ibs-max) / var(--rem)) * 1rem));

        /* inset-block-end: ibe */
        --ibe-v: calc(((100 * (var(--ibe-max) - var(--ibe-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ibe-r: calc((((var(--s-min) * var(--ibe-max)) - (var(--s-max) * var(--ibe-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ibe: clamp(calc((var(--ibe-min) / var(--rem)) * 1rem), calc(var(--ibe-v) + var(--ibe-r) * 1rem), calc((var(--ibe-max) / var(--rem)) * 1rem));

        /* inset-inline: ii */
        --ii-v: calc(((100 * (var(--ii-max) - var(--ii-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --ii-r: calc((((var(--s-min) * var(--ii-max)) - (var(--s-max) * var(--ii-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --ii: clamp(calc((var(--ii-min) / var(--rem)) * 1rem), calc(var(--ii-v) + var(--ii-r) * 1rem), calc((var(--ii-max) / var(--rem)) * 1rem));

        /* inset-inline-start: iis */
        --iis-v: calc(((100 * (var(--iis-max) - var(--iis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --iis-r: calc((((var(--s-min) * var(--iis-max)) - (var(--s-max) * var(--iis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --iis: clamp(calc((var(--iis-min) / var(--rem)) * 1rem), calc(var(--iis-v) + var(--iis-r) * 1rem), calc((var(--iis-max) / var(--rem)) * 1rem));

        /* inset-inline-end: iie */
        --iie-v: calc(((100 * (var(--iie-max) - var(--iie-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --iie-r: calc((((var(--s-min) * var(--iie-max)) - (var(--s-max) * var(--iie-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --iie: clamp(calc((var(--iie-min) / var(--rem)) * 1rem), calc(var(--iie-v) + var(--iie-r) * 1rem), calc((var(--iie-max) / var(--rem)) * 1rem));

        /* ----------------------------------------------------------------------------------------
            Scroll
        */

        /* scroll-margin-block: smb */
        --smb-v: calc(((100 * (var(--smb-max) - var(--smb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smb-r: calc((((var(--s-min) * var(--smb-max)) - (var(--s-max) * var(--smb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smb: clamp(calc((var(--smb-min) / var(--rem)) * 1rem), calc(var(--smb-v) + var(--smb-r) * 1rem), calc((var(--smb-max) / var(--rem)) * 1rem));

        /* scroll-margin-block-start: smbs */
        --smbs-v: calc(((100 * (var(--smbs-max) - var(--smbs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smbs-r: calc((((var(--s-min) * var(--smbs-max)) - (var(--s-max) * var(--smbs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smbs: clamp(calc((var(--smbs-min) / var(--rem)) * 1rem), calc(var(--smbs-v) + var(--smbs-r) * 1rem), calc((var(--smbs-max) / var(--rem)) * 1rem));

        /* scroll-margin-block-end: smbe */
        --smbe-v: calc(((100 * (var(--smbe-max) - var(--smbe-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smbe-r: calc((((var(--s-min) * var(--smbe-max)) - (var(--s-max) * var(--smbe-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smbe: clamp(calc((var(--smbe-min) / var(--rem)) * 1rem), calc(var(--smbe-v) + var(--smbe-r) * 1rem), calc((var(--smbe-max) / var(--rem)) * 1rem));

        /* scroll-margin-inline: smi */
        --smi-v: calc(((100 * (var(--smi-max) - var(--smi-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smi-r: calc((((var(--s-min) * var(--smi-max)) - (var(--s-max) * var(--smi-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smi: clamp(calc((var(--smi-min) / var(--rem)) * 1rem), calc(var(--smi-v) + var(--smi-r) * 1rem), calc((var(--smi-max) / var(--rem)) * 1rem));

        /* scroll-margin-inline-start: smis */
        --smis-v: calc(((100 * (var(--smis-max) - var(--smis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smis-r: calc((((var(--s-min) * var(--smis-max)) - (var(--s-max) * var(--smis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smis: clamp(calc((var(--smis-min) / var(--rem)) * 1rem), calc(var(--smis-v) + var(--smis-r) * 1rem), calc((var(--smis-max) / var(--rem)) * 1rem));

        /* scroll-margin-inline-end: smie */
        --smie-v: calc(((100 * (var(--smie-max) - var(--smie-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --smie-r: calc((((var(--s-min) * var(--smie-max)) - (var(--s-max) * var(--smie-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --smie: clamp(calc((var(--smie-min) / var(--rem)) * 1rem), calc(var(--smie-v) + var(--smie-r) * 1rem), calc((var(--smie-max) / var(--rem)) * 1rem));

        /* scroll-padding-block: spb */
        --spb-v: calc(((100 * (var(--spb-max) - var(--spb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spb-r: calc((((var(--s-min) * var(--spb-max)) - (var(--s-max) * var(--spb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spb: clamp(calc((var(--spb-min) / var(--rem)) * 1rem), calc(var(--spb-v) + var(--spb-r) * 1rem), calc((var(--spb-max) / var(--rem)) * 1rem));

        /* scroll-padding-block-start: spbs */
        --spbs-v: calc(((100 * (var(--spbs-max) - var(--spbs-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spbs-r: calc((((var(--s-min) * var(--spbs-max)) - (var(--s-max) * var(--spbs-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spbs: clamp(calc((var(--spbs-min) / var(--rem)) * 1rem), calc(var(--spbs-v) + var(--spbs-r) * 1rem), calc((var(--spbs-max) / var(--rem)) * 1rem));

        /* scroll-padding-block-end: spbe */
        --spbe-v: calc(((100 * (var(--spbe-max) - var(--spbe-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spbe-r: calc((((var(--s-min) * var(--spbe-max)) - (var(--s-max) * var(--spbe-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spbe: clamp(calc((var(--spbe-min) / var(--rem)) * 1rem), calc(var(--spbe-v) + var(--spbe-r) * 1rem), calc((var(--spbe-max) / var(--rem)) * 1rem));

        /* scroll-padding-inline: spi */
        --spi-v: calc(((100 * (var(--spi-max) - var(--spi-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spi-r: calc((((var(--s-min) * var(--spi-max)) - (var(--s-max) * var(--spi-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spi: clamp(calc((var(--spi-min) / var(--rem)) * 1rem), calc(var(--spi-v) + var(--spi-r) * 1rem), calc((var(--spi-max) / var(--rem)) * 1rem));

        /* scroll-padding-inline-start: spis */
        --spis-v: calc(((100 * (var(--spis-max) - var(--spis-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spis-r: calc((((var(--s-min) * var(--spis-max)) - (var(--s-max) * var(--spis-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spis: clamp(calc((var(--spis-min) / var(--rem)) * 1rem), calc(var(--spis-v) + var(--spis-r) * 1rem), calc((var(--spis-max) / var(--rem)) * 1rem));

        /* scroll-padding-inline-end: spie */
        --spie-v: calc(((100 * (var(--spie-max) - var(--spie-min))) / (var(--s-max) - var(--s-min))) * 1vw);
        --spie-r: calc((((var(--s-min) * var(--spie-max)) - (var(--s-max) * var(--spie-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
        --spie: clamp(calc((var(--spie-min) / var(--rem)) * 1rem), calc(var(--spie-v) + var(--spie-r) * 1rem), calc((var(--spie-max) / var(--rem)) * 1rem));
    }
}

/* ====================================================================================================
    Defaults
==================================================================================================== */
@layer base {
    :root {
        --grid-s-min: 400; /* Screen Size Min for Fluid Sizing of the Grid */
        --grid-s-max: 1400; /* Screen Size Max for Fluid Sizing of the Grid */
        --grid-rem: 16; /* Pixel per REM for Fluid Sizing of the Grid */
        --grid-width-max: 1400; /* Maximum Grid Width */
        --grid-columns: 12; /* Number of Grid Columns */
        --grid-padding: 10; /* Grid Padding */
        --frame-width-min: 0; /* Minimum Frame Width */
        --frame-width-max: 100; /* Maximum Frame Width */
        --column-gap-min: 10; /* Minimum Column Gap Width */
        --column-gap-max: 100; /* Maximum Column Gap Width */
        --row-gap-min: 10; /* Minimum Row Gap Width */
        --row-gap-max: 100; /* Maximum Row Gap Width */

        --module-padding-block-start-min: 0;
        --module-padding-block-start-max: 0;
        --module-padding-block-end-min: 0;
        --module-padding-block-end-max: 0;
        --module-margin-block-start-min: 0;
        --module-margin-block-start-max: 0;
        --module-margin-block-end-min: 0;
        --module-margin-block-end-max: 0;

        --autolayout-width: 320px;
    }
}

/* ====================================================================================================
    Grid Sizing
==================================================================================================== */
@layer base {
    :root {
        --row-gap-v: calc(((100 * (var(--row-gap-max) - var(--row-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --row-gap-r: calc((((var(--grid-s-min) * var(--row-gap-max)) - (var(--grid-s-max) * var(--row-gap-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --row-gap: clamp(calc((var(--row-gap-min) / var(--grid-rem)) * 1rem), calc(var(--row-gap-v) + var(--row-gap-r) * 1rem), calc((var(--row-gap-max) / var(--grid-rem)) * 1rem));

        --column-gap-v: calc(((100 * (var(--column-gap-max) - var(--column-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --column-gap-r: calc((((var(--grid-s-min) * var(--column-gap-max)) - (var(--grid-s-max) * var(--column-gap-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --column-gap: clamp(calc((var(--column-gap-min) / var(--grid-rem)) * 1rem), calc(var(--column-gap-v) + var(--column-gap-r) * 1rem), calc((var(--column-gap-max) / var(--grid-rem)) * 1rem));
    }
}

/* ====================================================================================================
    Grid
==================================================================================================== */
@layer base {
    .module-grid {
        --module-margin-block-start-v: calc(((100 * (var(--module-margin-block-start-max) - var(--module-margin-block-start-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --module-margin-block-start-r: calc((((var(--grid-s-min) * var(--module-margin-block-start-max)) - (var(--grid-s-max) * var(--module-margin-block-start-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --module-margin-block-start: clamp(calc((var(--module-margin-block-start-min) / var(--grid-rem)) * 1rem), calc(var(--module-margin-block-start-v) + var(--module-margin-block-start-r) * 1rem), calc((var(--module-margin-block-start-max) / var(--grid-rem)) * 1rem));

        --module-margin-block-end-v: calc(((100 * (var(--module-margin-block-end-max) - var(--module-margin-block-end-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --module-margin-block-end-r: calc((((var(--grid-s-min) * var(--module-margin-block-end-max)) - (var(--grid-s-max) * var(--module-margin-block-end-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --module-margin-block-end: clamp(calc((var(--module-margin-block-end-min) / var(--grid-rem)) * 1rem), calc(var(--module-margin-block-end-v) + var(--module-margin-block-end-r) * 1rem), calc((var(--module-margin-block-end-max) / var(--grid-rem)) * 1rem));

        --module-padding-block-start-v: calc(((100 * (var(--module-padding-block-start-max) - var(--module-padding-block-start-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --module-padding-block-start-r: calc((((var(--grid-s-min) * var(--module-padding-block-start-max)) - (var(--grid-s-max) * var(--module-padding-block-start-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --module-padding-block-start: clamp(calc((var(--module-padding-block-start-min) / var(--grid-rem)) * 1rem), calc(var(--module-padding-block-start-v) + var(--module-padding-block-start-r) * 1rem), calc((var(--module-padding-block-start-max) / var(--grid-rem)) * 1rem));

        --module-padding-block-end-v: calc(((100 * (var(--module-padding-block-end-max) - var(--module-padding-block-end-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --module-padding-block-end-r: calc((((var(--grid-s-min) * var(--module-padding-block-end-max)) - (var(--grid-s-max) * var(--module-padding-block-end-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --module-padding-block-end: clamp(calc((var(--module-padding-block-end-min) / var(--grid-rem)) * 1rem), calc(var(--module-padding-block-end-v) + var(--module-padding-block-end-r) * 1rem), calc((var(--module-padding-block-end-max) / var(--grid-rem)) * 1rem));

        background: var(--cs-backdrop);
        position: relative;
        display: grid;
        width: 100dvw;
        gap: 0;

        --module-grid-rows: [row-start] minmax(0, min-content) [row-end];

        grid-template-rows:
            [module-start]
            var(--module-margin-block-start)
            [frame-start]
            var(--module-padding-block-start)
            var(--module-grid-rows)
            var(--module-padding-block-end)
            [frame-end]
            var(--module-margin-block-end)
            [module-end];

        --column-width: [col-start] minmax(0, calc(((var(--grid-width-max) * 1px) - ((var(--grid-columns) - 1) * var(--column-gap))) / var(--grid-columns))) [col-end];
        --gap-half: calc(var(--column-gap) / 2);
        --split-gap: var(--gap-half) [gap] var(--gap-half);
        --column-repeat: repeat(calc((var(--grid-columns) / 2) - 1), var(--column-width) var(--split-gap));
        --columns: var(--column-repeat) var(--column-width) var(--split-gap) var(--column-repeat) var(--column-width);
        --frame-width: minmax(calc(var(--frame-width-min) * 1px), calc(var(--frame-width-max) * 1px));

        grid-template-columns:
            [screen-start]
            calc(var(--grid-padding) * 1px)
            [padding-start]
            1fr
            [frame-start]
            var(--frame-width)
            var(--columns)
            var(--frame-width)
            [frame-end]
            1fr
            [padding-end]
            calc(var(--grid-padding) * 1px)
            [screen-end];

        /* ----------------------------------------------------------------------------------------
            Backdrop & Background
        */
        &::before {
            content: "";
            position: relative;
            background: var(--cs-background);
            z-index: 1;
            grid-column: screen-start / screen-end;
            grid-row: module-start / module-end;
        }

        &::after {
            content: "";
            position: relative;
            z-index: 2;
            grid-column: frame-start / frame-end;
            grid-row: frame-start / frame-end;
        }

        &.framed {
            &::before {
                background: var(--cs-backdrop);
            }
            &::after {
                background: var(--cs-background);
            }
        }
        
        & .background {
            background: var(--cs-background);
        }

        & > * {
            z-index: 3;
        }
    }

    /* ----------------------------------------------------------------------------------------
        Card Grid
    */
    .autolayout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--autolayout-width), 1fr));
        column-gap: var(--column-gap);
        row-gap: var(--row-gap);
        max-inline-size: 100%;
    }
}

@layer base, typography, primitive, widget, module, page, utility, theme, override;

/* ====================================================================================================
    Header Defaults
==================================================================================================== */
@layer base {
    :root {
        --header-banner-height-min: 0;
        --header-banner-height-max: 0;
        --header-mainnav-height-min: 0;
        --header-mainnav-height-max: 0;
        --header-subnav-height-min: 0;
        --header-subnav-height-max: 0;

        --anchor-space-min: 0;
        --anchor-space-max: 0;
    }
}

/* ====================================================================================================
    Header Sizing
==================================================================================================== */
@layer base {
    :root {
        --header-banner-height-v: calc(((100 * (var(--header-banner-height-max) - var(--header-banner-height-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --header-banner-height-r: calc((((var(--grid-s-min) * var(--header-banner-height-max)) - (var(--grid-s-max) * var(--header-banner-height-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --header-banner-height: clamp(calc((var(--header-banner-height-min) / var(--grid-rem)) * 1rem), calc(var(--header-banner-height-v) + var(--header-banner-height-r) * 1rem), calc((var(--header-banner-height-max) / var(--grid-rem)) * 1rem));

        --header-mainnav-height-v: calc(((100 * (var(--header-mainnav-height-max) - var(--header-mainnav-height-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --header-mainnav-height-r: calc((((var(--grid-s-min) * var(--header-mainnav-height-max)) - (var(--grid-s-max) * var(--header-mainnav-height-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --header-mainnav-height: clamp(calc((var(--header-mainnav-height-min) / var(--grid-rem)) * 1rem), calc(var(--header-mainnav-height-v) + var(--header-mainnav-height-r) * 1rem), calc((var(--header-mainnav-height-max) / var(--grid-rem)) * 1rem));

        --header-subnav-height-v: calc(((100 * (var(--header-subnav-height-max) - var(--header-subnav-height-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --header-subnav-height-r: calc((((var(--grid-s-min) * var(--header-subnav-height-max)) - (var(--grid-s-max) * var(--header-subnav-height-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --header-subnav-height: clamp(calc((var(--header-subnav-height-min) / var(--grid-rem)) * 1rem), calc(var(--header-subnav-height-v) + var(--header-subnav-height-r) * 1rem), calc((var(--header-subnav-height-max) / var(--grid-rem)) * 1rem));

        --header-height: calc(var(--header-banner-height) + var(--header-mainnav-height) + var(--header-subnav-height));

        --anchor-space-v: calc(((100 * (var(--anchor-space-max) - var(--anchor-space-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
        --anchor-space-r: calc((((var(--grid-s-min) * var(--anchor-space-max)) - (var(--grid-s-max) * var(--anchor-space-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
        --anchor-space: clamp(calc((var(--anchor-space-min) / var(--grid-rem)) * 1rem), calc(var(--anchor-space-v) + var(--anchor-space-r) * 1rem), calc((var(--anchor-space-max) / var(--grid-rem)) * 1rem));
    }
}
/* ====================================================================================================
    Layout
==================================================================================================== */
@layer theme {
    :root {
        --s-min: 400; /* Screen Size Min for General Fluid Sizing */
        --s-max: 1504; /* Screen Size Max for General Fluid Sizing */
        --rem: 16; /* Pixel per REM for General Fluid Sizing */

        --grid-s-min: 400; /* Screen Size Min for Fluid Sizing of the Grid */
        --grid-s-max: 1504; /* Screen Size Max for Fluid Sizing of the Grid */
        --grid-rem: 16; /* Pixel per REM for Fluid Sizing of the Grid */

        --grid-width-max: 1504;
        --grid-columns: 12;

        --grid-padding: 10;

        --frame-width-min: 0;
        --frame-width-max: 100;

        --column-gap-min: 10;
        --column-gap-max: 40;

        --row-gap-min: 0;
        --row-gap-max: 40;

        --header-mainnav-height-min: 40;
        --header-mainnav-height-max: 80;

        --anchor-space-min: 60;
        --anchor-space-max: 100;

        --spacing: 0;
        --spacing-p: 1;
        --spacing-0_5: 2;
        --spacing-1: 4;
        --spacing-1_5: 6;
        --spacing-2: 8;
        --spacing-2_5: 10;
        --spacing-3: 12;
        --spacing-3_5: 14;
        --spacing-4: 16;
        --spacing-5: 20;
        --spacing-6: 24;
        --spacing-7: 28;
        --spacing-8: 32;
        --spacing-9: 36;
        --spacing-10: 40;
        --spacing-11: 44;
        --spacing-12: 48;
        --spacing-14: 56;
        --spacing-16: 64;
        --spacing-20: 80;
        --spacing-24: 96;
        --spacing-28: 112;
        --spacing-32: 128;
        --spacing-36: 144;
        --spacing-40: 160;
        --spacing-44: 176;
        --spacing-48: 192;
        --spacing-52: 208;
        --spacing-56: 224;
        --spacing-60: 240;
        --spacing-64: 256;
        --spacing-72: 288;
        --spacing-80: 320;
        --spacing-96: 384;
        --spacing-112: 448;
        --spacing-128: 512;

        --spacing-xs-min: var(--spacing-2);
        --spacing-xs-max: var(--spacing-4);

        --spacing-sm-min: var(--spacing-4);
        --spacing-sm-max: var(--spacing-8);

        --spacing-md-min: var(--spacing-6);
        --spacing-md-max: var(--spacing-12);

        --spacing-lg-min: var(--spacing-16);
        --spacing-lg-max: var(--spacing-32);

        --spacing-xl-min: var(--spacing-32);
        --spacing-xl-max: var(--spacing-64);

        --spacing-2xl-min: var(--spacing-64);
        --spacing-2xl-max: var(--spacing-128);

        --autolayout-width: 320px;

        /* Font Families */
        --font-base: 'Poppins', sans-serif;
        --font-headings: 'Poppins', sans-serif;
        --font-code: 'Courier New', monospace;
        
        /* Font Sizes */
        --font-size-base: 16px;
        --font-size-h1: 2.5rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.75rem;
        --font-size-h4: 1.5rem;
        --font-size-h5: 1.25rem;
        --font-size-h6: 1rem;
        --font-size-blockquote: 1.25rem;
        --font-size-small: 0.875rem;

        /* Others */
        --line-height-base: 1.45;
        --line-height-headings: 1.1;
    }
}

@layer theme {
    /* xs */
    .module-mbs-xs {
        --module-margin-block-start-min: var(--spacing-xs-min);
        --module-margin-block-start-max: var(--spacing-xs-max);
    }
    .module-mbe-xs {
        --module-margin-block-end-min: var(--spacing-xs-min);
        --module-margin-block-end-max: var(--spacing-xs-max);
    }
    .module-pbs-xs {
        --module-padding-block-start-min: var(--spacing-xs-min);
        --module-padding-block-start-max: var(--spacing-xs-max);
    }
    .module-pbe-xs {
        --module-padding-block-end-min: var(--spacing-xs-min);
        --module-padding-block-end-max: var(--spacing-xs-max);
    }
    /* sm */
    .module-mbs-sm {
        --module-margin-block-start-min: var(--spacing-sm-min);
        --module-margin-block-start-max: var(--spacing-sm-max);
    }
    .module-mbe-sm {
        --module-margin-block-end-min: var(--spacing-sm-min);
        --module-margin-block-end-max: var(--spacing-sm-max);
    }
    .module-pbs-sm {
        --module-padding-block-start-min: var(--spacing-sm-min);
        --module-padding-block-start-max: var(--spacing-sm-max);
    }
    .module-pbe-sm {
        --module-padding-block-end-min: var(--spacing-sm-min);
        --module-padding-block-end-max: var(--spacing-sm-max);
    }
    /* md */
    .module-mbs-md {
        --module-margin-block-start-min: var(--spacing-md-min);
        --module-margin-block-start-max: var(--spacing-md-max);
    }
    .module-mbe-md {
        --module-margin-block-end-min: var(--spacing-md-min);
        --module-margin-block-end-max: var(--spacing-md-max);
    }
    .module-pbs-md {
        --module-padding-block-start-min: var(--spacing-md-min);
        --module-padding-block-start-max: var(--spacing-md-max);
    }
    .module-pbe-md {
        --module-padding-block-end-min: var(--spacing-md-min);
        --module-padding-block-end-max: var(--spacing-md-max);
    }
    /* lg */
    .module-mbs-lg {
        --module-margin-block-start-min: var(--spacing-lg-min);
        --module-margin-block-start-max: var(--spacing-lg-max);
    }
    .module-mbe-lg {
        --module-margin-block-end-min: var(--spacing-lg-min);
        --module-margin-block-end-max: var(--spacing-lg-max);
    }
    .module-pbs-lg {
        --module-padding-block-start-min: var(--spacing-lg-min);
        --module-padding-block-start-max: var(--spacing-lg-max);
    }
    .module-pbe-lg {
        --module-padding-block-end-min: var(--spacing-lg-min);
        --module-padding-block-end-max: var(--spacing-lg-max);
    }
    /* xl */
    .module-mbs-xl {
        --module-margin-block-start-min: var(--spacing-xl-min);
        --module-margin-block-start-max: var(--spacing-xl-max);
    }
    .module-mbe-xl {
        --module-margin-block-end-min: var(--spacing-xl-min);
        --module-margin-block-end-max: var(--spacing-xl-max);
    }
    .module-pbs-xl {
        --module-padding-block-start-min: var(--spacing-xl-min);
        --module-padding-block-start-max: var(--spacing-xl-max);
    }
    .module-pbe-xl {
        --module-padding-block-end-min: var(--spacing-xl-min);
        --module-padding-block-end-max: var(--spacing-xl-max);
    }
    /* 2xl */
    .module-mbs-2xl {
        --module-margin-block-start-min: var(--spacing-2xl-min);
        --module-margin-block-start-max: var(--spacing-2xl-max);
    }
    .module-mbe-2xl {
        --module-margin-block-end-min: var(--spacing-2xl-min);
        --module-margin-block-end-max: var(--spacing-2xl-max);
    }
    .module-pbs-2xl {
        --module-padding-block-start-min: var(--spacing-2xl-min);
        --module-padding-block-start-max: var(--spacing-2xl-max);
    }
    .module-pbe-2xl {
        --module-padding-block-end-min: var(--spacing-2xl-min);
        --module-padding-block-end-max: var(--spacing-2xl-max);
    }
}

/* ====================================================================================================
    Colors
==================================================================================================== */

@layer theme {
    :root {
        --c-white: #FFFFFF;
        --c-gray-50: #EDEDED;
        --c-gray-100: #DBDBDB;
        --c-gray-300: #ABABAB;
        --c-gray-500: #828282;
        --c-gray-700: #525252;
        --c-gray-900: #1C1C1C;
        --c-black: #000000;

        --c-text-black: rgba(0, 0, 0, 0.87);
        --c-text-white: rgba(255, 255, 255, 0.87);

        --c-chaos-red: #e2161d;
        --c-chaos-blue: #0DB5FF;
        --c-chaos-blue-hover: #17a2df;

        --c-chaos-tag-pill-gray: rgba(246, 246, 246, 1);
        --c-chaos-tag-pill-blue-background: rgba(235, 248, 255, 1);
        --c-chaos-tag-pill-blue-border: rgba(13, 181, 255, 1);

        --c-chaos-cylindo: #00B0BD;
        --c-chaos-cylindo-darker: #008c97;
        --c-chaos-cloud: #17A2DF;
        --c-chaos-cosmos: #714AB5;
        --c-chaos-enscape: #F7941D;
        --c-chaos-player: #12988B;
        --c-chaos-v-ray: #2857AF;
        --c-chaos-corona: #F3712B;
        --c-chaos-cylindo: #00B0BD;
        --c-chaos-phoenix: #F3B830;
        --c-chaos-scans: #9E3988;
        --c-chaos-vantage: #77B22A;

        --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.04), 0 15px 30px rgba(0, 0, 0, 0.03), 0 20px 40px rgba(0, 0, 0, 0.02), 0 30px 60px -15px rgba(0, 0, 0, 0.01);
    }

    /* ------------------------------------------------------------------------------------------------
        Light Mode
    ------------------------------------------------------------------------------------------------ */
    /* Light Color Schemes */
    body, .csl-chaos-standard {
        /* BASIC */
        /* Background */
        --cs-background: var(--c-white);
        /* Text */
        --cs-standard: var(--c-text-black);
        --cs-highlight: var(--c-chaos-cylindo);
        --cs-subtle: var(--c-gray-500);
        /* Links */
        --cs-link: var(--c-chaos-blue);
        --cs-link-hover: var(--c-chaos-blue-hover);

        /* LABELS */
        /* Neutral Label */
        --cs-label-neutral-background: var(--c-gray-500);
        --cs-label-neutral-color: var(--c-text-white);
        --cs-label-neutral-shadow-color: rgba(0, 0, 0, 0.2);
        /* Highlight Label */
        --cs-label-highlight-background: var(--c-chaos-red);
        --cs-label-highlight-color: var(--c-text-white);
        --cs-label-highlight-shadow-color: rgba(0, 0, 0, 0.2);
        /* Info Label */
        --cs-label-info-background: var(--c-chaos-cylindo);
        --cs-label-info-color: var(--c-text-white);
        --cs-label-info-shadow-color: rgba(0, 0, 0, 0.2);

        /* BUTTONS */
        /* Primary Button */
        --cs-button-primary-background: var(--c-chaos-blue);
        --cs-button-primary-background-hover: var(--c-chaos-blue-hover);
        --cs-button-primary-color: var(--c-white);
        --cs-button-primary-color-hover: var(--c-white);
        --cs-button-primary-border: var(--c-chaos-blue);
        --cs-button-primary-border-hover: var(--c-chaos-blue-hover);
        /* Secondary Button */
        --cs-button-secondary-background: transparent;
        --cs-button-secondary-background-hover: var(--c-gray-900);
        --cs-button-secondary-color: var(--c-gray-900);
        --cs-button-secondary-color-hover: var(--c-white);
        --cs-button-secondary-border: var(--c-gray-900);
        --cs-button-secondary-border-hover: var(--c-gray-900);

        /* FORMS */
        /* Input */
        --cs-input-border: var(--c-gray-50);
        --cs-input-border-focus: var(--c-chaos-blue);
        --cs-input-background: var(--c-white);
        --cs-input-color: var(--c-gray-900);
        --cs-input-placeholder: var(--c-gray-100);
        --cs-error: var(--c-chaos-red);
    }

    .csl-chaos-light-gray {
        /* BASIC */
        /* Background */
        --cs-background: var(--c-gray-50);
        /* Text */
        --cs-standard: var(--c-text-black);
        --cs-highlight: var(--c-chaos-cylindo);
        --cs-subtle: var(--c-gray-700);
        /* Links */
        --cs-link: var(--c-chaos-blue);
        --cs-link-hover: var(--c-chaos-blue-hover);

        /* LABELS */
        /* Neutral Label */
        --cs-label-neutral-background: var(--c-gray-500);
        --cs-label-neutral-color: var(--c-text-white);
        --cs-label-neutral-shadow-color: rgba(0, 0, 0, 0.2);
        /* Highlight Label */
        --cs-label-highlight-background: var(--c-chaos-red);
        --cs-label-highlight-color: var(--c-text-white);
        --cs-label-highlight-shadow-color: rgba(0, 0, 0, 0.2);
        /* Info Label */
        --cs-label-info-background: var(--c-chaos-cylindo);
        --cs-label-info-color: var(--c-text-white);
        --cs-label-info-shadow-color: rgba(0, 0, 0, 0.2);

        /* BUTTONS */
        /* Primary Button */
        --cs-button-primary-background: var(--c-chaos-blue);
        --cs-button-primary-background-hover: var(--c-chaos-blue-hover);
        --cs-button-primary-color: var(--c-white);
        --cs-button-primary-color-hover: var(--c-white);
        --cs-button-primary-border: var(--c-chaos-blue);
        --cs-button-primary-border-hover: var(--c-chaos-blue-hover);
        /* Secondary Button */
        --cs-button-secondary-background: transparent;
        --cs-button-secondary-background-hover: var(--c-gray-900);
        --cs-button-secondary-color: var(--c-gray-900);
        --cs-button-secondary-color-hover: var(--c-white);
        --cs-button-secondary-border: var(--c-gray-900);
        --cs-button-secondary-border-hover: var(--c-gray-900);

        /* FORMS */
        /* Input */
        --cs-input-border: var(--c-gray-50);
        --cs-input-border-focus: var(--c-chaos-blue);
        --cs-input-background: var(--c-white);
        --cs-input-color: var(--c-gray-900);
        --cs-input-placeholder: var(--c-gray-100);
        --cs-error: var(--c-chaos-red);
    }

    .csl-chaos-dark-gray {
        /* BASIC */
        /* Background */
        --cs-background: var(--c-gray-900);
        /* Text */
        --cs-standard: var(--c-white);
        --cs-highlight: var(--c-chaos-red);
        --cs-subtle: var(--c-gray-300);
        /* Links */
        --cs-link: var(--c-chaos-blue);
        --cs-link-hover: var(--c-chaos-blue-hover);
    
        /* LABELS */
        /* Neutral Label */
        --cs-label-neutral-background: var(--c-gray-500);
        --cs-label-neutral-color: var(--c-text-white);
        --cs-label-neutral-shadow-color: rgba(255, 255, 255, 0.2);
        /* Highlight Label */
        --cs-label-highlight-background: var(--c-chaos-red);
        --cs-label-highlight-color: var(--c-text-white);
        --cs-label-highlight-shadow-color: rgba(255, 255, 255, 0.2);
        /* Info Label */
        --cs-label-info-background: var(--c-chaos-cylindo);
        --cs-label-info-color: var(--c-text-white);
        --cs-label-info-shadow-color: rgba(255, 255, 255, 0.2);
    
        /* BUTTONS */
        /* Primary Button */
        --cs-button-primary-background: var(--c-chaos-blue);
        --cs-button-primary-background-hover: var(--c-chaos-blue-hover);
        --cs-button-primary-color: var(--c-white);
        --cs-button-primary-color-hover: var(--c-white);
        --cs-button-primary-border: var(--c-chaos-blue);
        --cs-button-primary-border-hover: var(--c-chaos-blue-hover);
        /* Secondary Button */
        --cs-button-secondary-background: transparent;
        --cs-button-secondary-background-hover: var(--c-white);
        --cs-button-secondary-color: var(--c-white);
        --cs-button-secondary-color-hover: var(--c-gray-900);
        --cs-button-secondary-border: var(--c-white);
        --cs-button-secondary-border-hover: var(--c-white);
    
        /* FORMS */
        /* Input */
        --cs-input-border: var(--c-gray-700);
        --cs-input-border-focus: var(--c-chaos-blue);
        --cs-input-background: var(--c-gray-900);
        --cs-input-color: var(--c-text-white);
        --cs-input-placeholder: var(--c-gray-500);
        --cs-error: var(--c-chaos-red);
    }

    .csl-chaos-black {
        /* BASIC */
        /* Background */
        --cs-background: var(--c-black);
        /* Text */
        --cs-standard: var(--c-text-white);
        --cs-highlight: var(--c-chaos-red);
        --cs-subtle: var(--c-gray-300);
        /* Links */
        --cs-link: var(--c-chaos-blue);
        --cs-link-hover: var(--c-chaos-blue-hover);
    
        /* LABELS */
        /* Neutral Label */
        --cs-label-neutral-background: var(--c-gray-500);
        --cs-label-neutral-color: var(--c-text-white);
        --cs-label-neutral-shadow-color: rgba(255, 255, 255, 0.2);
        /* Highlight Label */
        --cs-label-highlight-background: var(--c-chaos-red);
        --cs-label-highlight-color: var(--c-text-white);
        --cs-label-highlight-shadow-color: rgba(255, 255, 255, 0.2);
        /* Info Label */
        --cs-label-info-background: var(--c-chaos-cylindo);
        --cs-label-info-color: var(--c-text-white);
        --cs-label-info-shadow-color: rgba(255, 255, 255, 0.2);
    
        /* BUTTONS */
        /* Primary Button */
        --cs-button-primary-background: var(--c-chaos-blue);
        --cs-button-primary-background-hover: var(--c-chaos-blue-hover);
        --cs-button-primary-color: var(--c-white);
        --cs-button-primary-color-hover: var(--c-white);
        --cs-button-primary-border: var(--c-chaos-blue);
        --cs-button-primary-border-hover: var(--c-chaos-blue-hover);
        /* Secondary Button */
        --cs-button-secondary-background: transparent;
        --cs-button-secondary-background-hover: var(--c-white);
        --cs-button-secondary-color: var(--c-white);
        --cs-button-secondary-color-hover: var(--c-gray-900);
        --cs-button-secondary-border: var(--c-white);
        --cs-button-secondary-border-hover: var(--c-white);
    
        /* FORMS */
        /* Input */
        --cs-input-border: var(--c-gray-700);
        --cs-input-border-focus: var(--c-chaos-blue);
        --cs-input-background: var(--c-gray-900);
        --cs-input-color: var(--c-text-black);
        --cs-input-placeholder: var(--c-gray-500);
        --cs-error: var(--c-chaos-red);
    }

    .csl-cylindo-dark {
        /* BASIC */
        /* Background */
        --cs-background: var(--c-chaos-cylindo-darker);
        /* Text */
        --cs-standard: var(--c-text-white);
        --cs-highlight: var(--c-chaos-red);
        --cs-subtle: var(--c-gray-300);
        /* Links */
        --cs-link: var(--c-chaos-blue);
        --cs-link-hover: var(--c-chaos-blue-hover);
    
        /* LABELS */
        /* Neutral Label */
        --cs-label-neutral-background: var(--c-gray-500);
        --cs-label-neutral-color: var(--c-text-white);
        --cs-label-neutral-shadow-color: rgba(255, 255, 255, 0.2);
        /* Highlight Label */
        --cs-label-highlight-background: var(--c-chaos-red);
        --cs-label-highlight-color: var(--c-text-white);
        --cs-label-highlight-shadow-color: rgba(255, 255, 255, 0.2);
        /* Info Label */
        --cs-label-info-background: var(--c-chaos-cylindo);
        --cs-label-info-color: var(--c-text-white);
        --cs-label-info-shadow-color: rgba(255, 255, 255, 0.2);
    
        /* BUTTONS */
        /* Primary Button */
        --cs-button-primary-background: var(--c-chaos-blue);
        --cs-button-primary-background-hover: var(--c-chaos-blue-hover);
        --cs-button-primary-color: var(--c-white);
        --cs-button-primary-color-hover: var(--c-white);
        --cs-button-primary-border: var(--c-chaos-blue);
        --cs-button-primary-border-hover: var(--c-chaos-blue-hover);
        /* Secondary Button */
        --cs-button-secondary-background: transparent;
        --cs-button-secondary-background-hover: var(--c-white);
        --cs-button-secondary-color: var(--c-white);
        --cs-button-secondary-color-hover: var(--c-gray-900);
        --cs-button-secondary-border: var(--c-white);
        --cs-button-secondary-border-hover: var(--c-white);
    
        /* FORMS */
        /* Input */
        --cs-input-border: var(--c-gray-700);
        --cs-input-border-focus: var(--c-chaos-blue);
        --cs-input-background: var(--c-gray-900);
        --cs-input-color: var(--c-text-black);
        --cs-input-placeholder: var(--c-gray-500);
        --cs-error: var(--c-chaos-red);
    }

    .csl-white-input {
        /* FORMS */
        /* Input */
        --cs-input-border: var(--c-gray-700);
        --cs-input-border-focus: var(--c-chaos-blue);
        --cs-input-background: var(--c-white);
        --cs-input-color: var(--c-text-black);
        --cs-input-placeholder: var(--c-gray-500);
        --cs-error: var(--c-chaos-red);
        
    }

    /* Light Backdrop Colors */
    .bdl-white,
    body {
        --cs-backdrop: var(--c-white);
    }
    .bdl-light-gray {
        --cs-backdrop: var(--c-gray-200);
    }

    /* ------------------------------------------------------------------------------------------------
        Dark Mode
    ------------------------------------------------------------------------------------------------ */
    .dark .csd-1,
    body.dark {
        --cs-background: var(--c-black);
        --cs-background-blur: var(--c-black-8);
        --cs-standard: var(--c-text-white);
        --cs-highlight: var(--c-white);
    }

    .dark .csd-2 {
        --cs-background: var(--c-black);
        --cs-background-blur: var(--c-black-8);
        --cs-standard: var(--c-text-white);
        --cs-highlight: var(--c-white);
    }

    /* Dark Background Colors */
    .dark .bgd-1,
    body {
        --cs-backdrop: var(--c-white);
    }
    .dark .bgd-2 {
        --cs-backdrop: var(--c-gray-200);
    }
    .dark .bgd-2 {
        --cs-backdrop: var(--primary-200);
    }
}

/* ====================================================================================================
    Languages
==================================================================================================== */
@layer theme {
    :lang(en) {
        --dir: ltr;
        --writing-mode: horizontal-tb;
        --quotes-spacing: 0.12;
        --quotes-primary-open: "“";
        --quotes-primary-close: "”";
        --quotes-secondary-open: "‘";
        --quotes-secondary-close: "’";
    }
}

/* ====================================================================================================
    Buttons
==================================================================================================== */
.button, input[type="submit"], button[type="submit"] {
    --button-padding-inline: 34px;
    --button-padding-block: var(--pb);
    --pb-min: 4;
    --pb-max: 8;
    --button-border-width: 2px;
    --button-border-radius: 9999px;
}

.button.small, input[type="submit"].small, button[type="submit"].small {
    --button-padding-inline: calc(var(--button-padding-inline) - 2 * (var(--button-border-width)));
    --button-padding-block: calc(var(--button-padding-block) - 2 * (var(--button-border-width)));
}

/* ====================================================================================================
    Labels
==================================================================================================== */
.label {
    --label-font-size-min: 12;
    --label-font-size-max: 16;
    --label-font-weight: 400;
    --label-padding-inline-start-min: 20;
    --label-padding-inline-start-max: 20;
    --label-padding-inline-end-min: 20;
    --label-padding-inline-end-max: 20;
    --label-padding-block-min: 4;
    --label-padding-block-max: 4;
    --label-border-radius: 0;
    --label-shadow-x-position: 0;
    --label-shadow-y-position: 0;
    --label-shadow-blur: 0;
    --label-shadow-spread: 0;
}

.label-large {
    --label-font-size-min: 16;
    --label-font-size-max: 23;
    --label-font-weight: 600;
    --label-padding-inline-start-min: 20;
    --label-padding-inline-start-max: 35;
    --label-padding-inline-end-min: 20;
    --label-padding-inline-end-max: 20;
    --label-padding-block-min: 4;
    --label-padding-block-max: 4;
}
@layer typography {
    .typography-marketing {
        & .preline {
            font-family: var(--font-base);
            font-weight: 300;
            font-style: normal;
            text-transform: uppercase;
            max-inline-size: 60ch;
            font-size: var(--fs);
            --fs-min: 12;
            --fs-max: 20;
            line-height: 1.5;
            letter-spacing: 0.1em;
        }

        &.hero {
            & h1, .h1 {
                font-family: var(--font-headings);
                font-weight: 900;
                font-style: normal;
                max-inline-size: 30ch;
                font-size: var(--fs);
                --fs-min: 40;
                --fs-max: 90;
                line-height: 0.9;
                letter-spacing: -0.02em;
                padding-block-end: 0.5em;
            }
        }

        & h1, .h1 {
            font-family: var(--font-headings);
            font-weight: 900;
            font-style: normal;
            max-inline-size: 20ch;
            font-size: var(--fs);
            --fs-min: 40;
            --fs-max: 80;
            line-height: 1.2;
            padding-block-end: 0.5em;
            color: var(--cs-standard);
        }

        & h2, .h2 {
            font-family: var(--font-base);
            font-weight: 900;
            font-style: normal;
            max-inline-size: 20ch;
            font-size: var(--fs);
            --fs-min: 30;
            --fs-max: 50;
            line-height: 1;
            color: var(--cs-standard);
        }

        & h3, .h3 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 25ch;
            font-size: var(--fs);
            --fs-min: 25;
            --fs-max: 30;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & h4, .h4 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 40ch;
            font-size: var(--fs);
            --fs-min: 25;
            --fs-max: 30;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & h5, .h5 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 25ch;
            font-size: var(--fs);
            --fs-min: 20;
            --fs-max: 25;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & h6, .h6 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 25ch;
            font-size: var(--fs);
            --fs-min: 20;
            --fs-max: 25;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & p {
            font-family: var(--font-base);
            font-weight: 300;
            font-style: normal;
            max-inline-size: 50ch;
            font-size: var(--fs);
            --fs-min: 16;
            --fs-max: 20;
            line-height: 1.5;
            color: var(--cs-standard);
        }

        & strong, b {
            font-family: var(--font-base);
            font-weight: 700;
        }

        & blockquote {
            font-weight: 800;
            font-size: var(--fs);
            --fs-min: 20;
            --fs-max: 25;
            color: var(--cs-standard);
        }

        & code, pre span {
            font-family: var(--font-code);
            font-size: var(--fs);
            --fs-min: 16;
            --fs-max: 18;
        }

        &.typography-large {
            & p {
                font-family: var(--font-base);
                font-weight: 300;
                font-style: normal;
                max-inline-size: 50ch;
                font-size: var(--fs);
                --fs-min: 18;
                --fs-max: 26;
                line-height: 1.5;
                color: var(--cs-standard);
            }
        }

        &.typography-small {
            & .preline {
                font-family: var(--font-base);
                font-weight: 300;
                font-style: normal;
                text-transform: none;
                max-inline-size: 60ch;
                font-size: var(--fs);
                --fs-min: 12;
                --fs-max: 12;
                line-height: 1.5;
                letter-spacing: 0.005em;
            }

            & h2, .h2 {
                font-family: var(--font-base);
                font-weight: 600;
                font-style: normal;
                max-inline-size: 30ch;
                font-size: var(--fs);
                --fs-min: 18;
                --fs-max: 25;
                line-height: 1.2;
                color: var(--cs-standard);
            }

            p {
                font-size: var(--fs);
                --fs-min: 12;
                --fs-max: 14;
                line-height: 1.5;
                letter-spacing: 0.05em;
                max-inline-size: 55ch;
                margin-block-end: 0.5em;
                color: var(--cs-standard);
            }
        }

        /* Margins */
        &.typography-margins {
            & .preline {
                margin-block-end: 0.75em;
            }

            & h1, .h1 {
                margin-block-end: 0.25em;
            }

            & h2, .h2, h3, .h3){
                margin-block-end: 1em;
            }

            & h4, .h4, h5, .h5, h6, .h6 {
                margin-block-end: 0.5em;
            }

            /* Paragraph */
            & p {
                margin-block-end: 1em;
            }
        }
    }
}
@layer typography {
    .typography-marketing-small {
        & .preline {
            font-family: var(--font-base);
            font-weight: 300;
            font-style: normal;
            text-transform: uppercase;
            max-inline-size: 60ch;
            font-size: var(--fs);
            --fs-min: 12;
            --fs-max: 20;
            line-height: 1.5;
            letter-spacing: 0.1em;
        }

        &.hero {
            & h1, .h1 {
                font-family: var(--font-headings);
                font-weight: 900;
                font-style: normal;
                max-inline-size: 30ch;
                font-size: var(--fs);
                --fs-min: 40;
                --fs-max: 90;
                line-height: 0.9;
                letter-spacing: -0.02em;
                padding-block-end: 0.5em;
            }
        }

        & h1, .h1 {
            font-family: var(--font-headings);
            font-weight: 900;
            font-style: normal;
            max-inline-size: 20ch;
            font-size: var(--fs);
            --fs-min: 40;
            --fs-max: 80;
            line-height: 1.2;
            padding-block-end: 0.5em;
            color: var(--cs-standard);
        }

        & h2, .h2 {
            font-family: var(--font-base);
            font-weight: 900;
            font-style: normal;
            max-inline-size: 20ch;
            font-size: var(--fs);
            --fs-min: 30;
            --fs-max: 50;
            line-height: 1;
            color: var(--cs-standard);
        }

        & h3, .h3 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 25ch;
            font-size: var(--fs);
            --fs-min: 25;
            --fs-max: 30;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & h4, .h4 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 40ch;
            font-size: var(--fs);
            --fs-min: 16;
            --fs-max: 17.3;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & h5, .h5 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 25ch;
            font-size: var(--fs);
            --fs-min: 20;
            --fs-max: 25;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & h6, .h6 {
            font-family: var(--font-base);
            font-weight: 600;
            font-style: normal;
            max-inline-size: 25ch;
            font-size: var(--fs);
            --fs-min: 20;
            --fs-max: 25;
            line-height: 1.1;
            color: var(--cs-standard);
        }

        & p {
            font-family: var(--font-base);
            font-weight: 300;
            font-style: normal;
            max-inline-size: 50ch;
            font-size: var(--fs);
            --fs-min: 16;
            --fs-max: 17.3;
            line-height: 1.5;
            color: var(--cs-standard);
        }

        & strong, b {
            font-family: var(--font-base);
            font-weight: 700;
        }

        & blockquote {
            font-weight: 800;
            font-size: var(--fs);
            --fs-min: 20;
            --fs-max: 25;
            color: var(--cs-standard);
        }

        & code, pre span {
            font-family: var(--font-code);
            font-size: var(--fs);
            --fs-min: 16;
            --fs-max: 18;
        }

        &.typography-large {
            & p {
                font-family: var(--font-base);
                font-weight: 300;
                font-style: normal;
                max-inline-size: 50ch;
                font-size: var(--fs);
                --fs-min: 18;
                --fs-max: 26;
                line-height: 1.5;
                color: var(--cs-standard);
            }
        }

        &.typography-small {
            & .preline {
                font-family: var(--font-base);
                font-weight: 300;
                font-style: normal;
                text-transform: none;
                max-inline-size: 60ch;
                font-size: var(--fs);
                --fs-min: 12;
                --fs-max: 12;
                line-height: 1.5;
                letter-spacing: 0.005em;
            }

            & h2, .h2 {
                font-family: var(--font-base);
                font-weight: 600;
                font-style: normal;
                max-inline-size: 30ch;
                font-size: var(--fs);
                --fs-min: 18;
                --fs-max: 25;
                line-height: 1.2;
                color: var(--cs-standard);
            }

            p {
                font-size: var(--fs);
                --fs-min: 12;
                --fs-max: 14;
                line-height: 1.5;
                letter-spacing: 0.05em;
                max-inline-size: 55ch;
                margin-block-end: 0.5em;
                color: var(--cs-standard);
            }
        }

        /* Margins */
        &.typography-margins {
            & .preline {
                margin-block-end: 0.75em;
            }

            & h1, .h1 {
                margin-block-end: 0.25em;
            }

            & h2, .h2, h3, .h3){
                margin-block-end: 1em;
            }

            & h4, .h4, h5, .h5, h6, .h6 {
                margin-block-end: 0.5em;
            }

            /* Paragraph */
            & p {
                margin-block-end: 1em;
            }
        }
    }
}
@layer typography {
    .typography-blogpost {
        & h1 {
            font-size: var(--fs);
            --fs-max: 44;
            --fs-min: 24;
            font-weight: 700;
            line-height: 1.2;
            margin-block-end: .5em;
        }

        & p.subline {
            font-size: 17px;
            color: var(--cs-subtle);

            & a {
                color: var(--cs-subtle);
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }   
            }
        }

        & h2, & h3, & h4, & h5 {
            font-weight: bold;
            margin-block: 2em 0.5em;
            line-height: 1.3;
        }

        & h2 {
            font-size: var(--fs);
            --fs-max: 34;
            --fs-min: 20;
        }

        & h3 {
            font-size: var(--fs);
            --fs-max: 26;
            --fs-min: 17;
        }

        & h4 {
            font-size: var(--fs);
            --fs-max: 22;
            --fs-min: 17;
        }

        & h5 {
            font-size: var(--fs);
            --fs-max: 20;
            --fs-min: 17;
            text-transform: uppercase;
        }

        & p:not(.subline) {
            font-size: 17px;
            color: var(--cs-standard);
            line-height: 1.5;
            margin-block-end: 1em;
        }

        & blockquote {
            margin: 1em 0;
            padding: 0.5em 1em;
            border-left: 4px solid var(--cs-highlight);
            background-color: var(--cs-light);
            font-style: italic;
            color: var(--cs-subtle);

            & p:last-of-type {
                margin-block-end: 0;
            }
        }

        & ul {
            margin-block: 1em;
            padding-inline-start: 1.5em;
            list-style-type: disc; /* Bullet style */
            list-style-position: outside; /* Position bullets outside */
        }

        & ul ul {
            list-style-type: circle; /* Nested list style */
        }

        & ol {
            margin-block: 1em;
            padding-inline-start: 1.5em;
            list-style-type: decimal; /* Numbered list */
            list-style-position: outside; /* Position numbers outside */
        }

        & ol ol {
            list-style-type: lower-alpha; /* Nested numbered list */
        }

        & li {
            margin-bottom: 0.5em;
            line-height: 1.5;
        }

        & table {
            width: 100%;
            border-collapse: collapse;
            margin-block: 1em;
        }

        & th, & td {
            padding: 0.75em;
            border: 1px solid var(--cs-subtle);
            text-align: left;
        }

        & pre {
            background-color: var(--cs-light);
            padding: 1em;
            overflow-x: auto;
            margin-block: 1em;
            border-radius: 4px;
        }

        & code {
            background-color: var(--cs-light);
            padding: 0.2em 0.4em;
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace;
        }

        & img {
            max-width: 100%;
            height: auto;
            margin-block: 1em 2em;
        }

        & a:not([data-hs-anchor="true"]) {
            color: var(--cs-link);
            text-decoration: underline;
        }
    }
}

/* Styles */
@layer base {
    body {
        position: relative;
        display: grid;
        grid-template-rows: var(--header-height) 1fr auto;
        min-block-size:  100dvh;
    }
    
    body > header {
        grid-row: 1;
        z-index: 9998;
        inline-size: 100%;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    
    main {
        grid-row: 2;
    }
    
    body > footer {
        grid-row: 3;
    }
}
html {
    scroll-padding-top: var(--anchor-space);
}
@layer primitive {
    .button {
        font-family: var(--font-base);
        font-style: normal;
        font-size: 13px;
        font-weight: 700;
        line-height: 155%;
        display: flex;
        padding-inline: var(--button-padding-inline);
        padding-block: var(--button-padding-block);
        justify-content: center;
        align-items: center;
        transition: all 300ms ease-in-out;
        box-sizing: border-box;
        border-style: solid;
        border-width: var(--button-border-width);
        border-radius: var(--button-border-radius);
        & span {
            text-align: center;
            white-space: nowrap;
        }
        &.button-primary {
            color: var(--cs-button-primary-color);
            background: var(--cs-button-primary-background);
            border-color: var(--cs-button-primary-background);
            &:hover {
                color: var(--cs-button-primary-color-hover);
                background: var(--cs-button-primary-background-hover);
                border-color: var(--cs-button-primary-background-hover);
            }
        }
        &.button-secondary {
            color: var(--cs-button-secondary-color);
            background: var(--cs-button-secondary-background);
            border-color: var(--cs-button-secondary-border);
            &:hover {
                color: var(--cs-button-secondary-color-hover);
                background: var(--cs-button-secondary-background-hover);
                border-color: var(--cs-button-secondary-border-hover);
            }
        }
    }
}
@layer primitive {
    .label {
        display: inline-block;
        font-size: var(--fs);
        --fs-min: var(--label-font-size-min);
        --fs-max: var(--label-font-size-max);
        font-weight: var(--label-font-weight);
        padding-inline-start: var(--pis);
        --pis-min: var(--label-padding-inline-start-min);
        --pis-max: var(--label-padding-inline-start-max);
        padding-inline-end: var(--pie);
        --pie-min: var(--label-padding-inline-end-min);
        --pie-max: var(--label-padding-inline-end-max);
        padding-block: var(--pb);
        --pb-min: var(--label-padding-block-min);
        --pb-max: var(--label-padding-block-max);
        border-radius: var(--label-border-radius);
        background: var(--cs-label-neutral-background);
        color: var(--cs-label-neutral-color);
        box-shadow: var(--label-shadow-x-position) var(--label-shadow-y-position) var(--label-shadow-blur) var(--label-shadow-spread) var(--cs-label-neutral-shadow-color);
        &.label-highlight {
            background: var(--cs-label-highlight-background);
            color: var(--cs-label-highlight-color);
            box-shadow: var(--label-shadow-x-position) var(--label-shadow-y-position) var(--label-shadow-blur) var(--label-shadow-spread) var(--cs-label-highlight-shadow-color);
        }
        &.label-info {
            background: var(--cs-label-info-background);
            color: var(--cs-label-info-color);
            box-shadow: var(--label-shadow-x-position) var(--label-shadow-y-position) var(--label-shadow-blur) var(--label-shadow-spread) var(--cs-label-info-shadow-color);
        }
    }
}
@layer primitive {
    form {
        font-family: var(--font-base);

        & label {
            /* Your styling for form labels goes here */
            display: block;
            font-size: 12px;
            margin-block-end: 10px;
        }

        & .hs-error-msgs {
            color: var(--cs-error);
            font-style: italic;
            margin-block-start: 5px;
        }

        /* Form Input */
        & input[type="text"], input[type="email"], input[type="password"], textarea {
            /* Your styling for form inputs goes here */
            background-color: var(--cs-input-background);
            color: var(--cs-input-color);
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
            &::placeholder {
                color: var(--cs-input-placeholder);
            }
            &:focus {
                outline: none;
                border-color: var(--cs-input-border);
                box-shadow: 0 0 3px 2px var(--cs-input-border-focus);
            }
        }

        /* Form Select */
        & select {
            /* Your styling for form select goes here */
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }

        /* Form Checkbox */
        & input[type="checkbox"] {
            /* Your styling for form checkboxes goes here */
            margin-right: 5px;
        }

        /* Form Radio Button */
        & input[type="radio"] {
            /* Your styling for form radio buttons goes here */
            margin-right: 5px;
        }

        /* Form Submit Button */
        & input[type="submit"], button[type="submit"] {
            /* Your styling for form submit buttons goes here */
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        & input[type="submit"], button[type="submit"] {
            font-family: var(--font-base);
            font-style: normal;
            font-size: 13px;
            font-weight: 700;
            line-height: 155%;
            display: flex;
            padding-inline: var(--button-padding-inline);
            padding-block: var(--button-padding-block);
            justify-content: center;
            align-items: center;
            transition: all 300ms ease-in-out;
            box-sizing: border-box;
            border-style: solid;
            border-width: var(--button-border-width);
            border-radius: var(--button-border-radius);
        }

        & .legal-consent-container {
            margin-block: 10px;
            display: flex;
            gap: 10px;
            & input[type="checkbox"] {
                margin-right: 5px;
            }
            & label {
                font-size: 12px;
            }
        }

        & .hs-richtext {
            & p {
                font-size: 14px;
                margin-bottom: 10px;
                line-height: 1.5;
            }
            & a {
                color: var(--cs-link);
                text-decoration: none;
                &:hover {
                    color: var(--cs-link-hover);
                }
            }
        }
    }
    .submit-primary {
        & form {
            & input[type="submit"], button[type="submit"] {
                color: var(--cs-button-primary-color);
                background: var(--cs-button-primary-background);
                border-color: var(--cs-button-primary-background);
                &:hover {
                    color: var(--cs-button-primary-color);
                    background: var(--cs-button-primary-background-hover);
                    border-color: var(--cs-button-primary-background-hover);
                }
            }
        }
    }
    .submit-secondary {
        & form {
            & input[type="submit"], button[type="submit"] {
                color: var(--cs-button-secondary-color);
                background: var(--cs-button-secondary-background);
                border-color: var(--cs-button-secondary-border);
                &:hover {
                    color: var(--cs-button-secondary-color-hover);
                    background: var(--cs-button-secondary-background-hover);
                    border-color: var(--cs-button-secondary-border-hover);
                }
            }
        }
    }
}