/* Basic  */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
    margin: 0;
  }
/**
   * Render the `main` element consistently in IE.
   */
main {
    display: block;
  }
/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
    background-color: transparent;
  }
/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted; /* 2 */
  }
/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
  strong {
    font-weight: bolder;
  }
/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
/**
   * 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 {
    bottom: -0.25em;
  }
sup {
    top: -0.5em;
  }
/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
    border-style: none;
  }
/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
  input { /* 1 */
    overflow: visible;
  }
/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
  select { /* 1 */
    text-transform: none;
  }
/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
/**
   * Correct the padding in Firefox.
   */
fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
    vertical-align: baseline;
  }
/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
    overflow: auto;
  }
/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type="search"]::-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; /* 1 */
    font: inherit; /* 2 */
  }
/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
    display: block;
  }
/*
   * Add the correct display in all browsers.
   */
summary {
    display: list-item;
  }
/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
    display: none;
  }
/**
   * Add the correct display in IE 10.
   */
[hidden] {
    display: none;
  }
/* Fonts
     ========================================================================== */
@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-regular-webfont.woff2?75ed1573a0428232374b0a00550fec8b) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-regularitalic-webfont.woff2?ad6f13abf357f2b2af4055601d7258b5) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-medium-webfont.woff2?4c8fef82fcd80265b420404779923344) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-mediumitalic-webfont.woff2?61b84896c8917541d88cb35f474bb0e1) format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-bold-webfont.woff2?81100782b3e156f9110751d02d8f12d1) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-bolditalic-webfont.woff2?cc4d74159d5b16ccddd58b2aac67a491) format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
:root {
/* ==========================================================================
   Fonts
   ========================================================================== */
   --font-brand: basier-circle, sans-serif;

   /* Fonts weights */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-bold: 700;

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

   /* Brand
      ========================================================================== */
   --brand-xxtradark: #060a2c;
   --brand-xtradark: #303a8a;
   --brand-dark: #0f1ea2;

   --brand-xtramedium: #5a6f86;
   --brand-xxtramedium: hsl(250, 60%, 57%);
   --brand-mediumlight: color-mix(in srgb, var(--brand) 60%, white);
   --brand-medium: #ccd9e8;
   --brand: hsl(250, 82%, 57%);
   --brand-light: #eaf1f9;
   --brand-xtralight: #f7fafe;

   --orza-pro: var(--secondary);


   /* Secondary
      ========================================================================== */
   --secondary-xtradark: hsl(160, 88%, 17%);
   --secondary-dark: hsl(160, 80%, 38%);
   --secondary: hsl(160, 80%, 45%);
   --secondary-medium: hsl(160, 71%, 86%);
   --secondary-light: hsl(160, 67%, 94%);
   --secondary-xtralight: hsl(160, 65%, 97%);


   /* Secondary
      ========================================================================== */
   --terciary-xtramedium: #777567;
   --terciary-xtralight: #eeecdd;

   /* Neutral
      ========================================================================== */
   --neutral-xxtradark: hsl(255, 13%, 11%);
   --neutral-xtradark: hsl(254, 12%, 21%);
   --neutral-dark: hsl(254, 13%, 32%);
   --neutral: #6c6a76;
   --neutral-medium: #a6a6a8;
   --neutral-light: #dad9dd;
   --neutral-mediumlight: #e6e6e8;
   --neutral-xtralightmedium: #f2f2f2;
   --neutral-xtralight: #fafafa;
   --neutral-white: #ffffff;

   /* Message
      ========================================================================== */
   --destructive-dark: #b90000;
   --destructive: #f06666;
   --destructive-light: #fac9c9;

   --error-dark: #cd0101;
   --error: #f06666;
   --error-light: #f8d4d4;

   --warning: #fffbba;
   --warning-dark: #ffe261;

/* ==========================================================================
   Font sizes
   ========================================================================== */

   /* Font sizes */
   --font-size-1: 13px;
   --font-size-2: 14px;
   --font-size-3: 16px;
   --font-size-4: 19px;
   --font-size-5: 22px;
   --font-size-6: 26px;
   --font-size-7: 42px;
   --font-size-8: 68px;

   /* Font sizes names */
   --font-display: var(--fw-bold)  var(--font-size-8) / 1.12 var(--font-brand);
   --font-title: var(--fw-bold)  var(--font-size-7) / 1.25 var(--font-brand);
   --font-heading: var(--fw-bold) var(--font-size-6) / 1.25 var(--font-brand);
   --font-body-l: var(--font-size-5) / 1.2 var(--font-brand);
   --font-body-m: var(--font-size-4) / 1.37 var(--font-brand);
   --font-body: var(--font-size-3) / 1.45 var(--font-brand);
   --font-caption: var(--font-size-2) / 1.4 var(--font-brand);
   --font-caption-s: var(--font-size-1) / 1.2 var(--font-brand);

   --font-title-variable: clamp(var(--font-size-5),5vw,var(--font-size-7));
   --font-heading-variable: clamp(var(--font-size-5),5vw,var(--font-size-6));
   --font-display-variable: clamp(var(--font-size-6),6vw,var(--font-size-8));

/* ==========================================================================
   Spacing
   ========================================================================== */
   --spacing-0: 0px;
   --spacing-1: 7px;
   --spacing-2: 14px;
   --spacing-3: 28px;
   --spacing-4: 42px;
   --spacing-5: 56px;
   --spacing-6: 70px;
   --spacing-7: 84px;
   --spacing-8: 98px;
   --spacing-9: 112px;
   --spacing-10: 126px;
   --spacing-11: 140px;
   --spacing-12: 154px;
   --spacing-13: 168px;
   --spacing-14: 182px;
   --spacing-15: 196px;
   --spacing-16: 210px;
   --spacing-17: 224px;
   --spacing-18: 238px;
   --spacing-19: 252px;
   --spacing-20: 266px;
   --spacing-21: 280px;
   --spacing-22: 294px;
   --spacing-23: 308px;
   --spacing-24: 322px;


/* ==========================================================================
   Border-radius
   ========================================================================== */
   --border-radius-none: 0;
   --border-radius-s: calc(var(--spacing-1) / 2);
   --border-radius-m: var(--spacing-1);
   --border-radius-ml: var(--spacing-2);
   --border-radius-l: var(--spacing-3);
   --border-radius-xl: 50%;


/* ==========================================================================
   Sizes for layout
   ========================================================================== */
   --menu-width: var(--spacing-18);
   --submenu-width: var(--spacing-20);
   --header-height: 70px;
   --main-options-height: 66px;
   --banner-height: 64px;
}
@media (min-width: 1441px) {
:root {
      --menu-width: var(--spacing-21)
}
   }
/* ==========================================================================
   Breakpoints
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* avoid white bounce space on scroll */
html {
    /* overflow-y: hidden; */
    /* height: 100%; */
}
body {
    /* overflow-y: auto; */
    /* min-height: 100%; */
    font-family: var(--font-brand);
    text-rendering: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
b, strong {
    font-weight: var(--fw-bold);
}
i, em {
    font-style: italic;
}
code {
    word-wrap: break-word;
}
/* Layout */
.ly-dev {
    display: grid;
    grid-template-areas: "header header"
    "nav content";
    grid-template-columns: var(--menu-width)  1fr;
    grid-template-rows: var(--header-height) 1fr;
    min-height: 100vh;
    height: 100vh;
    background-color: var(--neutral-white);
}
.dev-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 3;
}
.dev-nav {
    grid-area: nav;
    position: sticky;
    width: var(--menu-width);
    height: calc(100vh - var(--header-height));
    top: var(--header-height);
    z-index: 2;
    overflow-y: auto;
    transition: ease-in-out 250ms all;
}
@media (max-width: 769px) {
.dev-nav {
        transform: translateX(calc(var(--menu-width) * -1))
}
    }
.dev-main {
    grid-area: content;
    z-index: 1;
    min-width: 0;
}
@media (max-width: 769px) {
.dev-main {
        grid-column: 1 / -1
}
    }
/* State for hide/show navigation */
.is-expanded .dev-nav {
        transform: translateX(0);
    }
/* @media (prefers-color-scheme: dark) {
    .ly-dev {
        background-color: var(--neutral-xtradark);
    }
} */
/* .wrapper,
.wrapper-s,
.wrapper-m,
.wrapper-l {
    width: 100%;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    margin-left: auto;
    margin-right: auto;
}
.wrapper-s {
    max-width: 768px;
}
.wrapper-m {
    max-width: 960px;
}
.wrapper-l {
    max-width: 1280px;
}
.wrapper-xl {
    max-width: 1440px;
} */
/* delete padding in a div inside the wrapper */
/* .reset-padding {
    margin-left: calc(-1 * var(--spacing-2));
    width: calc(100% + var(--spacing-2) * 2);
}

@media (--screen-m) {
    .wrapper {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    .reset-padding {
        margin-left: calc(-1 * var(--spacing-4));
        width: calc(100% + (var(--spacing-4) * 2));
    }
}

@media (--screen-l) {
    .wrapper{
        padding-left: var(--spacing-9);
        padding-right: var(--spacing-9);
    }
} */
.wrapper-content {
    width: 100%;
    padding-inline: var(--spacing-2);
}
/* @media (--max-screen-ml) {
        padding-inline: var(--spacing-2);
    } */
@media (min-width: 1024px) {
.wrapper-content {
        padding-inline: var(--spacing-3)
}
    }
@media (min-width: 1281px) {
.wrapper-content {
        padding-inline: var(--spacing-4)
}
    }
.wrapper-l {
    width: min(90%, 1200px);
    margin-inline: auto;
}
.wrapper-s{
    width: min(90%, 720px);
    margin-inline: auto;
}
.wrapper-xs {
    width: min(90%, 480px);
    margin-inline: auto;
}
/* Components */
/* Modules */
.dev-header {
    padding: 0 var(--spacing-4);
    background-color: var(--brand);
    box-shadow: 0 1px 10px var(--neutral-dark);
    display: flex;
    /* column-gap: var(--spacing-4); */
    align-items: center;
}
.dev-header.is-landing {
        box-shadow: none;
        padding-block: var(--spacing-1);
        background-color: var(--brand);
    }
@media (max-width: 769px) {
.dev-header {
        padding: 0 var(--spacing-3)
}
    }
/* @media (prefers-color-scheme: dark) {
        --neutral-dark: #000000;
        --brand: var(--neutral-xtradark);
    } */
.dev-header a {
        color: var(--neutral-white);
        text-decoration: none;
    }
.dev-header .doc {
        margin-right: var(--spacing-3);
    }
.dev-header > nav {
        display: flex;
        flex: auto;
        overflow-x: auto;
        will-change: scroll-position;
        scrollbar-width: thin;
    }
.dev-header > nav ul {
            margin: 0 0 0 auto;
            padding: 0;
            list-style: none;
        }
.dev-header > nav a {
            font:var(--font-caption);
            display: inline-block;
            padding: var(--spacing-1) var(--spacing-3);
            background-color: var(--neutral-white);
            color: var(--neutral-xtradark);
            border-radius: var(--border-radius-l);
        }
.dev-header > nav a:hover {
                color: var(--neutral-xtradark);
                background-color: var(--neutral-light);
            }
.dev-header .toggle-nav {
        display: none;
        background-color: transparent;
        border: none;
        margin-right: var(--spacing-2);
        cursor: pointer;
    }
.dev-header .toggle-nav span {
            display: none;
        }
@media (max-width: 769px) {
.dev-header .toggle-nav {
            display: inline-block
    }
        }
.dev-header .toggle-nav svg {
            vertical-align: middle;
        }
.dev-header .toggle-nav svg > *  {
                fill: var(--neutral-white);
            }
.dev-header h1 {
        font-size: clamp(var(--font-size-2), 2vw, var(--font-size-3));
        font-weight: var(--fw-medium);
        /* @media (prefers-color-scheme: dark) {
            --neutral-dark: #000000;
            --brand: var(--neutral-xtradark);
            svg > * {
                fill:#7780ff;
            }
        } */
    }
.dev-header h1 span:not(:last-child){
            position: absolute;
            width: 1px;
            height: 1px;
            border: 0;
            clip: rect(0, 0, 0,0);
            margin: -1px;
            padding: 0;
            overflow: hidden;
        }
@media (max-width: 769px) {
.dev-header h1 span:last-child {
                display: none
        }
            }
.dev-header h1 a {
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
        }
.dev-header h1 a:hover {
                opacity: .7;
            }
.dev-header h1 svg > * {
            fill:var(--neutral-white);
        }
.dev-header .version {
        color: var(--secondary);
        font-weight: var(--fw-regular);
        margin-left: var(--spacing-2);
    }
.dev-header .dev-header-lang {
        margin-left: auto;
        font: var(--font-caption);
        font-weight: var(--fw-regular);
    }
.dev-header .dev-header-lang svg > * {
            fill: var(--neutral-white);
        }
.dev-header .dev-header-lang ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: var(--spacing-2);
        }
.dev-header .dev-header-lang ul li {
                display: flex;  
            }
.dev-header .dev-header-lang a {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-1);
        }
.dev-header .dev-header-lang a:hover {
                opacity: .5;
            }
.dev-header .dev-header-lang .is-active {
            display: none;
        }
.is-expanded .toggle-nav .top {
            transform: rotate(45deg) translateX(4px) translateY(-3px);
        }
.is-expanded .toggle-nav .medium {
            display: none;
        }
.is-expanded .toggle-nav .bottom {
            transform: rotate(-45deg) translateX(-11px) translateY(-4px);
        }
.dev-nav {
    background-color: var(--brand-xtralight);
    border-right: 1px solid var(--brand-light);
}
#nprogress .spinner {
    display: none !important;
}
#nprogress .bar {
    background: var(--brand-light) !important;
}
.dev-nav-list {
    list-style-type: none;
    padding: 0;
    margin: var(--spacing-2) 0 0;
    font: var(--font-caption);
    border-bottom: 1px solid var(--brand-light);
}
.dev-nav-list a {
        display: block;
        text-decoration: none;
        color: var(--brand-dark);
        padding: var(--spacing-1) var(--spacing-4);
        text-transform: initial;
    }
.dev-nav-list a:hover {
            background-color: var(--brand-light);
        }
.dev-nav-list ul {
        list-style-type: none;
        margin: 0;
        margin-top: calc(var(--spacing-2) * -1);
        padding-left: 0;
    }
.dev-nav-list ul a {
            color: var(--brand);
        }
.dev-nav-list ul a::before {
                content: "▸";
                margin-right: var(--spacing-1);
            }
.dev-nav-list ul a:hover {
                color: var(--brand-dark);
            }
.dev-nav-list > li {
        margin-bottom: var(--spacing-2);
    }
.dev-nav-list > li > a {
            font-weight: var(--fw-bold);
            text-transform: uppercase;
        }
.dev-nav-list .is-active {
        color: var(--brand-dark);
        background: var(--brand-light);
    }
/* @media (prefers-color-scheme: dark) {
    .dev-nav {
        --brand-xtralight: #161616;
        --brand-light:  var(--neutral-xtradark);
    }
    .dev-nav-list {
        a {
            --brand-light: #7780ff;
            --brand-dark: var(--neutral-white);
        }
        ul {
            --brand: #7780ff;
           a {
               --brand-dark: #1a1a1b;
            }
        }
    }
} */
.dev-main .dev-secondary-nav ul {
        padding: var(--spacing-3) 0;
    }
@media (max-width: 769px) {
.dev-main .dev-secondary-nav ul {
            padding-block: var(--spacing-1);
            padding-top: var(--spacing-2)
    }
        }
.dev-secondary-nav {
    /* max-width: calc(860px + var(--spacing-5)); */
    max-width: 860px;
    z-index: 2;
    background-color: var(--neutral-white);
    border-bottom: 1px solid var(--neutral-light);
}
/* padding: 0 0 0 var(--spacing-5); */
@media (max-width: 769px) {
.dev-secondary-nav {
        position: sticky;
        top: calc(1.8rem * -1);
        margin-left: calc(var(--spacing-3) * -1);
        /* padding: 0 0 0 var(--spacing-3); */
        padding-inline: var(--spacing-3);
        width: calc(100% + var(--spacing-3) * 2)
}
    }
/* margin: 0 0 0 calc(var(--spacing-5) * -1); */
.dev-secondary-nav ul {
        list-style-type: none;
        margin: 0;
    }
@media (max-width: 769px) {
.dev-secondary-nav ul {
            display: flex;
            gap: var(--spacing-3);
            /* grid-auto-flow: column;
            grid-auto-columns: min-content; */
            overflow-x: auto;
            touch-action: pan-x;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth
    }
        }
.dev-secondary-nav li {
        scroll-snap-align: start;
        font: var(--font-caption);
            display: flex;
            -moz-column-gap: var(--spacing-1);
                 column-gap: var(--spacing-1);
        }
.dev-secondary-nav li::before {
                content: "#";
            }
@media (max-width: 769px) {
.dev-secondary-nav a {
                width: -moz-max-content;
                width: max-content;
                display: inline-block
    }
            }
.dev-secondary-nav a:not(:last-child){
            margin-bottom: var(--spacing-1);
        }
@media (max-width: 769px) {
.dev-secondary-nav a:not(:last-child){
                margin-bottom: 0
        }
            }
/* @media (prefers-color-scheme: dark) {
    .dev-secondary-nav {
        background-color: var(--neutral-xtradark);
        border-bottom: 1px solid var(--neutral-dark);
    }
} */
.dev-main {
    position: relative;
    height: 100%;
    padding:var(--spacing-4) var(--spacing-5);
    overflow: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    color: var(--brand-dark);
}
.dev-main h2, .dev-main h3, .dev-main h4 {
        scroll-margin-top: var(--spacing-4);
    }
@media (max-width: 769px) {
.dev-main h2, .dev-main h3, .dev-main h4 {
            scroll-margin-top: var(--spacing-8)
    }
        }
.dev-main a {
        color: var(--brand);
    }
.dev-main a:hover {
            color: var(--neutral);
        }
.dev-main ul {
        margin: 0;
        padding-left: var(--spacing-2);
    }
.dev-main ul li:not(:last-child) {
                margin-bottom: var(--spacing-2);
            }
.dev-main ul li ul {
                margin-top: var(--spacing-2);
                list-style-type: disclosure-closed;
            }
.dev-main h3 {
        font-size: clamp(var(--font-size-4), 2vw, var(--font-size-5));
        margin-bottom: var(--spacing-1);
        margin-top: var(--spacing-5);
        font-weight: var(--fw-medium);
    }
.dev-main h3 + p {
            margin-top: var(--spacing-1);
        }
.dev-main h3::before {
            content: "#";
            margin-right: var(--spacing-1);
            color: var(--neutral);
            font-weight: var(--fw-regular);
        }
.dev-main ul,
    .dev-main p {
        font-size: clamp(var(--font-size-2),s 2vw, var(--font-size-4));
        line-height: 1.42em;
        color: var(--neutral);
    }
@media (prefers-reduced-motion) {
.dev-main {
        scroll-behavior: unset
}
    }
@media (max-width: 769px) {
.dev-main {
        padding: var(--spacing-3)
}
    }
.dev-main .msg {
        padding: var(--spacing-3);
        background-color: var(--neutral-xtralight);
    }
.dev-main .msg.is-warning {
            border-left: var(--spacing-2) solid #ffbf2f;
            color: var(--neutral-dark);
        }
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background-color: var(--neutral-xtradark);
    border-radius: 6px;
}
.dev-main-header {
    max-width: 860px;
    border-bottom: 2px solid var(--brand-light);
    color: var(--neutral);
}
.dev-main-header h2 {
        font-size: clamp(var(--font-size-5), 4vw, var(--font-size-6));
        margin-bottom: var(--spacing-1);
        font-weight: var(--fw-medium);
        margin-top: 0;
    }
.dev-main-header h2 + p {
            margin-top: var(--spacing-1);
        }
.dev-main-header h2 + p {
            font-size: clamp(var(--font-size-3), 4vw, var(--font-size-5));
        }
table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    font: var(--font-caption);
}
/* margin-top: var(--spacing-2); */
table thead tr {
        background-color: var(--brand-light);
        border-radius: var(--border-radius-m);
    }
table thead th {
        font: var(--font-caption);
        color:  var(--brand-dark);
        font-weight: var(--fw-bold);
        letter-spacing: .03rem;
        padding: calc(var(--spacing-1) * 1.5) var(--spacing-2);
    }
table th, table td {
        padding: var(--spacing-2);
    }
table tr {
        border-bottom: 1px solid var(--brand-medium);
    }
.http-post,
.http-get,
.http-patch,
.http-put,
.http-delete,
.http-code {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    color: var(--neutral-white);
    border-radius: 6px;
    min-width: 90px;
    margin-right: var(--spacing-1);
    text-align: center;
    font-weight: var(--fw-bold);
}
.http-post {
    background-color:  rgb(7, 165, 112);
}
.http-get {
    background-color: rgb(179, 36, 179);
}
.http-patch {
    background-color: rgb(228, 159, 32);
}
.http-put {
    background-color: rgb(228, 159, 32);
}
.http-delete {
    background-color: rgb(223, 60, 60);
}
.http-code {
    background-color: rgb(149, 211, 57);
}
/* @media (prefers-color-scheme: dark) {
    .dev-main {
        --brand-dark: #7780ff;
        a {
            --brand: #7780ff;
        }
        .wrapper {
            & > p,
            & > ul {
                --neutral: var(--neutral-light);
            }
        }
    }
    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
        --neutral-xtradark: #000000;
    }
    .dev-main-header {
        --neutral: var(--neutral-light);
        --brand-xtradark: var(--neutral-medium);
        --brand-light: var(--neutral-dark);
    }
    table {
        --brand-medium: var(--neutral-dark);
        --brand-light: var(--neutral-dark);
        --brand-dark: var(--neutral-medium);
        td {
            color: var(--neutral-medium);
        }
    }
} */
.endpoint {
    max-width: 860px;
    margin-bottom: var(--spacing-2);
}
.endpoint ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        color: var(--neutral);
    }
.endpoint ul li:not(:last-child) {
                margin-bottom: var(--spacing-1);
            }
.endpoint ul li::before {
                content: "→";
                margin-right: var(--spacing-1);
            }
.endpoint-header {
    color: var(--brand-dark);
    margin-bottom: var(--spacing-2);
}
.endpoint-request,
.endpoint-response  {
    position: relative;
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--brand-medium);
}
.endpoint-request h4, .endpoint-response h4 {
        color: var(--neutral-dark);
    }
.endpoint-request.has-no-border-bottom, .endpoint-response.has-no-border-bottom {
        border-bottom: none;
    }
.endpoint-description {
    font: var(--font-caption);
    color: var(--neutral-medium);
}
.endpoint-request-info,
.endpoint-response-info {
    width: 100%;
}
.endpoint-request-info h4, .endpoint-response-info h4 {
        margin-top: var(--spacing-4);
    }
.endpoint-request-info h4:not(:first-child), .endpoint-response-info h4:not(:first-child) {
            margin-top: var(--spacing-3);
        }
.endpoint-response-info h4 {
        margin-top: var(--spacing-3);
    }
.endpoint-request-code,
.endpoint-response-code {
    width: 100%;
}
.endpoint-request-code h4, .endpoint-response-code h4 {
        /* margin-top: var(--spacing-4); */
        /* margin-bottom: var(--spacing-2); */
    }
.endpoint-request-code p, .endpoint-response-code p {
        margin-top: var(--spacing-1);
        color: var(--neutral);
        font: var(--font-body);
    }
/* 
@media (prefers-color-scheme: dark) {

    .endpoint-header {
        --brand-dark: #7780ff;
        --neutral: var(--neutral-light);
    }

    .endpoint-description {
        color: var(--neutral);
    }
    .endpoint-request,
    .endpoint-response  {
        --brand-medium: var(--neutral-dark);
        p {
            color: var(--neutral-medium);
        }
        h4 {
            --neutral-dark: var(--neutral-medium);
        }
    }
} */
.dev-landing-banner {
    padding-inline: 10vw;
    padding-block: 16vw;
    min-height: 50vh;
    --background-dev: #121212;
    border-bottom: 1px solid var(--neutral-xtradark);

    background-color: var(--background-dev);
}
@media (min-width: 768px) {
.dev-landing-banner {
    padding-block: 4vw;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        -moz-column-gap: var(--spacing-10);
             column-gap: var(--spacing-10)
}
        .dev-landing-banner div {
            max-width: 540px;
        }
    }
.dev-landing-banner h2 {
        /* font: var(--font-display); */
        font-size: clamp(var(--font-size-4), calc(4vw + 1rem), var(--font-size-8));
        color: var(--neutral-white);
        margin: 0;
    }
.dev-landing-banner p {
        font: var(--font-body-m);
        line-height: 2rem;
        color: var(--neutral-medium);
    }
.dev-landing-banner a {
        display: inline-flex;
        align-items: center;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
        margin-top: var(--spacing-3);
        text-decoration: none;
        color: var(--neutral);
    }
.dev-landing-banner a svg circle{
                stroke: var(--neutral);
            }
.dev-landing-banner a svg path {
                fill: var(--neutral);
            }
.dev-landing-banner a:hover {
            color: var(--neutral-white);
        }
.dev-landing-banner a:hover svg circle{
                    stroke: var(--neutral-white);
                }
.dev-landing-banner a:hover svg path {
                    fill: var(--neutral-white);
                }
.dev-landing-banner-decoration svg {
        height: auto;
        width: 100%;
    }
@media (max-width: 769px) {
.dev-landing-banner-decoration svg {
            display: none
    }
        }
.dev-landing-content-bg {
    --background-dev: #000;
    background-color: #121212;
}
.dev-landing-ly-columns {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: var(--spacing-18);
         column-gap: var(--spacing-18);
    row-gap: var(--spacing-5);
    padding-block: var(--spacing-10);
}
.dev-landing-ly-columns > div {
       flex-grow: 1;
       flex-basis: 0;
    }
.dev-landing-ly-columns > div > svg {
        margin-bottom: var(--spacing-3);
       }
.dev-landing-ly-columns > div:first-child h2 {
                color: #f37a53;
            }
@media (min-width: 768px) {
                .dev-landing-ly-columns > div:first-child::after {
                    position: absolute;
                    content: "";
                    width: 1px;
                    height: 100%;
                    background-color: var(--neutral-xtradark);
                    left: 50%;
                    top: 0;
                }
            }
.dev-landing-ly-columns a {
        display: inline-flex;
        align-items: center;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
        margin-top: var(--spacing-3);
        text-decoration: none;
        color: var(--neutral);
    }
.dev-landing-ly-columns a svg circle{
                stroke: var(--neutral);
            }
.dev-landing-ly-columns a svg path {
                fill: var(--neutral);
            }
.dev-landing-ly-columns a:hover {
            color: var(--neutral-white);
        }
.dev-landing-ly-columns a:hover svg circle{
                    stroke: var(--neutral-white);
                }
.dev-landing-ly-columns a:hover svg path {
                    fill: var(--neutral-white);
                }
.dev-landing-ly-columns h2 {
        font: var(--font-title);
        font-weight: var(--fw-regular);
        margin: 0;
        color: var(--secondary);
    }
.dev-landing-ly-columns h2 + p {
            color: var(--neutral-medium);
            font: var(--font-body-m);
            line-height: 2rem;
        }
.footer {
    font: var(--font-caption);
    background-color: var(--neutral-xtralight);
    border-top: 1px solid var(--neutral-mediumlight);
}
.footer ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
.footer ul li:not(:last-child) {
                margin-bottom: calc(var(--spacing-1) * 1.25);
            }
.footer .logo {
        width: 100px;
        -webkit-margin-before: var(--spacing-7);
                margin-block-start: var(--spacing-7);
        margin-bottom: var(--spacing-3);
    }
.footer .logo > * {
            fill: var(--neutral-xtradark);
        }
.footer .logo:hover {
            opacity: .7;
        }
.footer h4 {
        font: var(--font-caption);
        font-weight: var(--fw-medium);
        margin-top: 0;
        margin-bottom: calc(var(--spacing-1) * .75);
    }
.footer a {
        text-decoration: none;
        color: var(--neutral);
    }
.footer a:hover {
            color: var(--brand);
        }
.footer-container {
    --columns: 2;
    display: grid;
    grid: auto/repeat(var(--columns),1fr);
    grid-template-rows: repeat(3, auto);
    align-items: start;
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-3);
}
@media (min-width: 768px) {
.footer-container {
        --columns: 4
}
    }
@media (min-width: 960px) {
.footer-container {
        --columns: 6
}
    }
.footer-social {
    background-color: var(--neutral-mediumlight);
    border-top: 1px solid var(--neutral-light);
    padding-block: var(--spacing-4);
}
/* transform: translateY(var(--spacing-7)); */
.footer-social > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-2);
    }
.footer-social ul {
        display: flex;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
    }
.footer-social ul li:not(:last-child) {
                margin-bottom: 0;
            }
.footer-social ul:first-child{
            gap: var(--spacing-2);
            flex-wrap: wrap;
        }
.footer-social svg {
        width: auto;
        height: 20px;
    }
.footer-social svg > * {
            fill: var(--neutral);
        }
.footer-social a {
        color: var(--neutral-xtradark);
    }
.footer-social a:hover svg > * {
                    fill: var(--brand);
                }
.footer-social a span {
            position: absolute;
            width: 1px;
            height: 1px;
            border: 0;
            clip: rect(0, 0, 0,0);
            margin: -1px;
            padding: 0;
            overflow: hidden;
        }
/* Specific pages */
/* Utilities */
/* Vendors */
/* TODO: move to utilities and layout */
.overflow-scroll {
    overflow-x: auto;
}
.wrapper {
    width: min(90%, 860px);
}