@charset "UTF-8";
:root {
    --hex-black-1: #252423;
    --hex-black-2: #252423;
    --hex-black-3: #252423;
    --hex-black-4: #262422;
    --hex-black-5: #262422;
    --hex-black-6: #262422;
    --hex-black-7: #262422;
    --hex-black-8: #262422;
    --hex-white-1: #f6f4f2;
    --hex-white-2: #cccac9;
    --hex-white-3: #85837e;
    --hex-white-4: #706e69;
    --hex-white-5: #5b5855;
    --hex-white-6: #4a4745;
    --hex-white-7: #3b3937;
    --hex-white-8: #2c2a28;
    --hex-red-1: #ff4b4b;
    --hex-red-2: #d34343;
    --hex-red-3: #883534;
    --hex-red-4: #723130;
    --hex-red-5: #5d2d2c;
    --hex-red-6: #4b2a29;
    --hex-red-7: #3c2726;
    --hex-red-8: #2d2423;
    --hex-corail-1: #ff7d36;
    --hex-corail-2: #d36b32;
    --hex-corail-3: #884c2b;
    --hex-corail-4: #724329;
    --hex-corail-5: #5d3a27;
    --hex-corail-6: #4b3325;
    --hex-corail-7: #3c2d24;
    --hex-corail-8: #2d2723;
    --hex-orange-1: #ffa828;
    --hex-orange-2: #d38e27;
    --hex-orange-3: #885f24;
    --hex-orange-4: #725224;
    --hex-orange-5: #5d4523;
    --hex-orange-6: #4b3a23;
    --hex-orange-7: #3c3123;
    --hex-orange-8: #2d2822;
    --hex-yellow-1: #ffcc2a;
    --hex-yellow-2: #d3aa29;
    --hex-yellow-3: #887025;
    --hex-yellow-4: #725f24;
    --hex-yellow-5: #5d4e24;
    --hex-yellow-6: #4b4123;
    --hex-yellow-7: #3c3523;
    --hex-yellow-8: #2d2922;
    --hex-citrus-1: #f9f640;
    --hex-citrus-2: #cfcc3a;
    --hex-citrus-3: #85842f;
    --hex-citrus-4: #706f2c;
    --hex-citrus-5: #5b5a29;
    --hex-citrus-6: #4a4927;
    --hex-citrus-7: #3b3a25;
    --hex-citrus-8: #2c2b23;
    --hex-lime-1: #b7ff54;
    --hex-lime-2: #9ad34a;
    --hex-lime-3: #678838;
    --hex-lime-4: #587233;
    --hex-lime-5: #4a5c2e;
    --hex-lime-6: #3e4a2a;
    --hex-lime-7: #343b27;
    --hex-lime-8: #292c23;
    --hex-green-1: #8dff55;
    --hex-green-2: #78d34b;
    --hex-green-3: #548839;
    --hex-green-4: #497234;
    --hex-green-5: #3f5c2f;
    --hex-green-6: #374a2b;
    --hex-green-7: #2f3b27;
    --hex-green-8: #282c24;
    --hex-turquoise-1: #00ffaa;
    --hex-turquoise-2: #07d38f;
    --hex-turquoise-3: #148760;
    --hex-turquoise-4: #187152;
    --hex-turquoise-5: #1b5c45;
    --hex-turquoise-6: #1e4a3a;
    --hex-turquoise-7: #203b31;
    --hex-turquoise-8: #232c27;
    --hex-cyan-1: #26f2d5;
    --hex-cyan-2: #26c9b1;
    --hex-cyan-3: #248273;
    --hex-cyan-4: #246d61;
    --hex-cyan-5: #245950;
    --hex-cyan-6: #244841;
    --hex-cyan-7: #243a35;
    --hex-cyan-8: #242b28;
    --hex-sky-1: #05dbe9;
    --hex-sky-2: #0bb6c1;
    --hex-sky-3: #17767c;
    --hex-sky-4: #1a6468;
    --hex-sky-5: #1c5256;
    --hex-sky-6: #1f4446;
    --hex-sky-7: #213738;
    --hex-sky-8: #232a2a;
    --hex-sega-1: #33b3f1;
    --hex-sega-2: #3096c8;
    --hex-sega-3: #2a6481;
    --hex-sega-4: #29566c;
    --hex-sega-5: #284858;
    --hex-sega-6: #263c47;
    --hex-sega-7: #253239;
    --hex-sega-8: #24282a;
    --hex-king-1: #4d9cff;
    --hex-king-2: #4584d3;
    --hex-king-3: #365a87;
    --hex-king-4: #324e71;
    --hex-king-5: #2e425b;
    --hex-king-6: #2b3849;
    --hex-king-7: #28303a;
    --hex-king-8: #25282b;
    --hex-indigo-1: #7c85ff;
    --hex-indigo-2: #6b72d3;
    --hex-indigo-3: #4b4f87;
    --hex-indigo-4: #424571;
    --hex-indigo-5: #3a3b5b;
    --hex-indigo-6: #333349;
    --hex-indigo-7: #2d2d3a;
    --hex-indigo-8: #28262b;
    --hex-lavender-1: #a369ff;
    --hex-lavender-2: #8a5bd3;
    --hex-lavender-3: #5e4287;
    --hex-lavender-4: #513b71;
    --hex-lavender-5: #45345b;
    --hex-lavender-6: #3a2f49;
    --hex-lavender-7: #322a3a;
    --hex-lavender-8: #29252b;
    --hex-purple-1: #c06ddf;
    --hex-purple-2: #a15eb9;
    --hex-purple-3: #6b4479;
    --hex-purple-4: #5b3d66;
    --hex-purple-5: #4d3553;
    --hex-purple-6: #402f44;
    --hex-purple-7: #362a37;
    --hex-purple-8: #2b2529;
    --hex-magenta-1: #e962bf;
    --hex-magenta-2: #c256a0;
    --hex-magenta-3: #7e3f69;
    --hex-magenta-4: #6b395a;
    --hex-magenta-5: #57334a;
    --hex-magenta-6: #472e3e;
    --hex-magenta-7: #3a2933;
    --hex-magenta-8: #2c2528;
    --hex-pink-1: #ff718b;
    --hex-pink-2: #d36276;
    --hex-pink-3: #884651;
    --hex-pink-4: #723e46;
    --hex-pink-5: #5d363c;
    --hex-pink-6: #4b3034;
    --hex-pink-7: #3c2b2c;
    --hex-pink-8: #2d2525;
    --hex-bg-1: #252423;
    --hex-bg-2: #2a2928;
    --hex-bg-3: #2f2e2d;
    --hex-bg-4: #353433;
    --hex-bg-5: #3a3938;
    --hex-bg-6: #3f3e3d;
    --hex-bg-7: #444342;
    --hex-fg-1: #f6f4f2;
    --hex-fg-2: #d5d3d1;
    --hex-fg-3: #b4b1af;
    --hex-fg-4: #93908e;
    --hex-fg-5: #625d5b;
    --hex-fg-6: #474543;
    --hex-fg-7: #393735;
    --hex-fg-8: #2c2a28
}

.theme-color, [data-color] {
    color: var(--hex-current-1)
}

.color-fg, [data-color=fg], a[target=_blank] {
    --hex-current-1: var(--hex-fg-1);
    --hex-current-2: var(--hex-fg-2);
    --hex-current-3: var(--hex-fg-3);
    --hex-current-4: var(--hex-fg-4);
    --hex-current-5: var(--hex-fg-5);
    --hex-current-6: var(--hex-fg-6);
    --hex-current-7: var(--hex-fg-7);
    --hex-current-8: var(--hex-fg-8)
}

.color-red, .color-getting-started, [data-color="0"], .links-list-grid a[href*="./dataset-assets"] {
    --hex-current-1: var(--hex-red-1);
    --hex-current-2: var(--hex-red-2);
    --hex-current-3: var(--hex-red-3);
    --hex-current-4: var(--hex-red-4);
    --hex-current-5: var(--hex-red-5);
    --hex-current-6: var(--hex-red-6);
    --hex-current-7: var(--hex-red-7);
    --hex-current-8: var(--hex-red-8)
}

.color-corail, .color-timer, [data-color="1"], .links-list-grid a[href*="./multimodal-agent"] {
    --hex-current-1: var(--hex-corail-1);
    --hex-current-2: var(--hex-corail-2);
    --hex-current-3: var(--hex-corail-3);
    --hex-current-4: var(--hex-corail-4);
    --hex-current-5: var(--hex-corail-5);
    --hex-current-6: var(--hex-corail-6);
    --hex-current-7: var(--hex-corail-7);
    --hex-current-8: var(--hex-corail-8)
}

.color-orange, .color-animation, [data-color="2"], .links-list-grid a[href*="#backup1"] {
    --hex-current-1: var(--hex-orange-1);
    --hex-current-2: var(--hex-orange-2);
    --hex-current-3: var(--hex-orange-3);
    --hex-current-4: var(--hex-orange-4);
    --hex-current-5: var(--hex-orange-5);
    --hex-current-6: var(--hex-orange-6);
    --hex-current-7: var(--hex-orange-7);
    --hex-current-8: var(--hex-orange-8)
}

.color-yellow, .color-timeline, [data-color="3"], .links-list-grid a[href*="./future-prediction"] {
    --hex-current-1: var(--hex-yellow-1);
    --hex-current-2: var(--hex-yellow-2);
    --hex-current-3: var(--hex-yellow-3);
    --hex-current-4: var(--hex-yellow-4);
    --hex-current-5: var(--hex-yellow-5);
    --hex-current-6: var(--hex-yellow-6);
    --hex-current-7: var(--hex-yellow-7);
    --hex-current-8: var(--hex-yellow-8)
}

.color-citrus, .color-animatable, [data-color="4"], .links-list-grid a[href*="./action-detection"] {
    --hex-current-1: var(--hex-citrus-1);
    --hex-current-2: var(--hex-citrus-2);
    --hex-current-3: var(--hex-citrus-3);
    --hex-current-4: var(--hex-citrus-4);
    --hex-current-5: var(--hex-citrus-5);
    --hex-current-6: var(--hex-citrus-6);
    --hex-current-7: var(--hex-citrus-7);
    --hex-current-8: var(--hex-citrus-8)
}

.color-lime, .color-draggable, [data-color="5"], .links-list-grid a[href*="./index"] {
    --hex-current-1: var(--hex-lime-1);
    --hex-current-2: var(--hex-lime-2);
    --hex-current-3: var(--hex-lime-3);
    --hex-current-4: var(--hex-lime-4);
    --hex-current-5: var(--hex-lime-5);
    --hex-current-6: var(--hex-lime-6);
    --hex-current-7: var(--hex-lime-7);
    --hex-current-8: var(--hex-lime-8)
}

.color-green, .color-layout, [data-color="6"], .links-list-grid a[href*="./physics-engine"] {
    --hex-current-1: var(--hex-green-1);
    --hex-current-2: var(--hex-green-2);
    --hex-current-3: var(--hex-green-3);
    --hex-current-4: var(--hex-green-4);
    --hex-current-5: var(--hex-green-5);
    --hex-current-6: var(--hex-green-6);
    --hex-current-7: var(--hex-green-7);
    --hex-current-8: var(--hex-green-8)
}

.color-turquoise, .color-scope, [data-color="7"], .links-list-grid a[href*="./solutions-design"] {
    --hex-current-1: var(--hex-turquoise-1);
    --hex-current-2: var(--hex-turquoise-2);
    --hex-current-3: var(--hex-turquoise-3);
    --hex-current-4: var(--hex-turquoise-4);
    --hex-current-5: var(--hex-turquoise-5);
    --hex-current-6: var(--hex-turquoise-6);
    --hex-current-7: var(--hex-turquoise-7);
    --hex-current-8: var(--hex-turquoise-8)
}

.color-cyan, .color-events, [data-color="8"], .links-list-grid a[href*="./embodied-ai"] {
    --hex-current-1: var(--hex-cyan-1);
    --hex-current-2: var(--hex-cyan-2);
    --hex-current-3: var(--hex-cyan-3);
    --hex-current-4: var(--hex-cyan-4);
    --hex-current-5: var(--hex-cyan-5);
    --hex-current-6: var(--hex-cyan-6);
    --hex-current-7: var(--hex-cyan-7);
    --hex-current-8: var(--hex-cyan-8)
}

.color-sky, .color-svg, [data-color="9"], .links-list-grid a[href*="#backup5"] {
    --hex-current-1: var(--hex-sky-1);
    --hex-current-2: var(--hex-sky-2);
    --hex-current-3: var(--hex-sky-3);
    --hex-current-4: var(--hex-sky-4);
    --hex-current-5: var(--hex-sky-5);
    --hex-current-6: var(--hex-sky-6);
    --hex-current-7: var(--hex-sky-7);
    --hex-current-8: var(--hex-sky-8)
}

.color-sega, .color-text, [data-color="10"], .links-list-grid a[href*="./tactical-analysis"] {
    --hex-current-1: var(--hex-sega-1);
    --hex-current-2: var(--hex-sega-2);
    --hex-current-3: var(--hex-sega-3);
    --hex-current-4: var(--hex-sega-4);
    --hex-current-5: var(--hex-sega-5);
    --hex-current-6: var(--hex-sega-6);
    --hex-current-7: var(--hex-sega-7);
    --hex-current-8: var(--hex-sega-8)
}

.color-king, .color-utils, [data-color="11"], .links-list-grid a[href*="#backup6"] {
    --hex-current-1: var(--hex-king-1);
    --hex-current-2: var(--hex-king-2);
    --hex-current-3: var(--hex-king-3);
    --hex-current-4: var(--hex-king-4);
    --hex-current-5: var(--hex-king-5);
    --hex-current-6: var(--hex-king-6);
    --hex-current-7: var(--hex-king-7);
    --hex-current-8: var(--hex-king-8)
}

.color-indigo, .color-easings, [data-color="12"], .links-list-grid a[href*="./pose-estimation"] {
    --hex-current-1: var(--hex-indigo-1);
    --hex-current-2: var(--hex-indigo-2);
    --hex-current-3: var(--hex-indigo-3);
    --hex-current-4: var(--hex-indigo-4);
    --hex-current-5: var(--hex-indigo-5);
    --hex-current-6: var(--hex-indigo-6);
    --hex-current-7: var(--hex-indigo-7);
    --hex-current-8: var(--hex-indigo-8)
}

.color-lavender, .color-waapi, [data-color="13"], .links-list-grid a[href*="./human-reconstruction"] {
    --hex-current-1: var(--hex-lavender-1);
    --hex-current-2: var(--hex-lavender-2);
    --hex-current-3: var(--hex-lavender-3);
    --hex-current-4: var(--hex-lavender-4);
    --hex-current-5: var(--hex-lavender-5);
    --hex-current-6: var(--hex-lavender-6);
    --hex-current-7: var(--hex-lavender-7);
    --hex-current-8: var(--hex-lavender-8)
}

.color-purple, .color-engine, [data-color="14"], .links-list-grid a[href*="#backup7"] {
    --hex-current-1: var(--hex-purple-1);
    --hex-current-2: var(--hex-purple-2);
    --hex-current-3: var(--hex-purple-3);
    --hex-current-4: var(--hex-purple-4);
    --hex-current-5: var(--hex-purple-5);
    --hex-current-6: var(--hex-purple-6);
    --hex-current-7: var(--hex-purple-7);
    --hex-current-8: var(--hex-purple-8)
}

:root {
    --backgroundColor: var(--hex-bg-1);
    --rimColor: #ffc7a8;
    --shadowColor: #212121;
    --worldColor1: #423d3d;
    --outlineColor: #1a1a19;
    --outlineColor: #101010;
    --outlineColorLight: #000000;
    --worldColorLight1: #DAD5D0;
    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .03), 0 0 1px 0 rgba(0, 0, 0, .14), inset 0 1px 0 0 rgba(255, 255, 255, .01);
    --site-header-height: 3.5rem;
    --margin-xxxs: .25rem;
    --margin-xxs: .5rem;
    --margin-xs: .75rem;
    --margin-s: 1rem;
    --margin-m: 1.5rem;
    --margin-l: 4rem;
    --br-xs: .125rem;
    --br-s: .25rem;
    --br-m: .5rem;
    --br-l: .75rem;
    --inset-width: calc(100% + calc(var(--margin-s) * 2));
    --inset-paddings: var(--margin-xs) var(--margin-s);
    --inset-margin: calc(var(--margin-s) * -1);
    --visual-viewport-height: 100dvh;
    --slnt: 0;
    --wdth: 120;
    --wght: 450;
    --font-body: "DIN", Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-code: "Mono", monospace;
    --text-xxxxl: 2.5rem;
    --text-xxxl: 2.5rem;
    --text-xxl: 2rem;
    --text-xl: 1.5rem;
    --text-l: 1.25rem;
    --text-m: 1rem;
    --text-s: 1rem;
    --text-xs: .875rem;
    --text-xxs: .75rem
}

@media (min-width: 900px) {
    :root {
        --site-header-height: 4.5rem;
        --text-xxxxl: 4rem;
        --text-xxxl: 3.25rem;
        --text-xxl: 2.5rem;
        --text-xl: 1.75rem;
        --text-l: 1.25rem;
        --text-m: 1.125rem;
        --text-s: 1rem;
        --text-xs: .875rem;
        --text-xxs: .75rem
    }
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-weight: inherit
}

a {
    color: currentColor
}

input, button {
    touch-action: manipulation
}

:root {
    color-scheme: dark
}

html, body {
    overflow-x: hidden;
    overflow-x: clip;
    width: 100%;
    color: var(--hex-fg-1);
    background-color: var(--hex-bg-1)
}

body {
    scrollbar-gutter: stable
}

::selection {
    background-color: var(--hex-fg-4);
    color: var(--hex-bg-1)
}

#site-header {
    position: sticky;
    z-index: 2;
    top: 0;
    padding-left: var(--margin-s);
    padding-right: var(--margin-s);
    background-color: var(--hex-bg-1)
}

#site-header-content {
    position: static;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: var(--site-header-height);
    border-bottom: 1px solid var(--hex-bg-4)
}

@media (min-width: 900px) {
    #site-header {
        padding-left: var(--margin-m);
        padding-right: var(--margin-m)
    }
}

.heading-logo {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 13rem
}

.header-logo {
    height: var(--site-header-height)
}

@media (max-width: 899px) {
    .heading-logo {
        width: calc(100% - 2.5rem)
    }
}

.heading-logo a {
    display: flex;
    align-items: center;
    height: 100%
}

.heading-logo img {
    width: auto;
    height: 1.5rem
}

.heading-logo span {
    display: none
}

#docs-versions {
    display: none;
    width: 4rem;
    width: 6rem;
    height: 2rem;
    padding: 0;
    font-weight: 400;
    color: var(--hex-fg-4)
}

#docs-versions:hover {
    color: var(--hex-fg-3)
}

#docs-versions .ui-input {
    padding-top: .2em;
    padding-right: 1.5rem;
    padding-right: 1rem;
    padding-left: 0;
    text-align: right;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-family: var(--font-code);
    font-weight: 400;
    color: currentColor
}

#docs-versions:before {
    width: 4rem;
    height: 1.25rem;
    width: 6rem;
    height: 2rem;
    top: calc(var(--site-header-height) * .5 - .625rem);
    left: auto
}

#docs-versions:after {
    right: 0;
    right: -.5rem;
    mask-size: 1rem
}

#site-footer {
    container-type: inline-size;
    z-index: 2;
    padding-left: var(--margin-s);
    padding-right: var(--margin-s);
    padding-bottom: var(--margin-s);
    background-color: var(--hex-bg-1)
}

@media (min-width: 900px) {
    #site-footer {
        padding-left: var(--margin-m);
        padding-right: var(--margin-m);
        padding-bottom: var(--margin-m)
    }
}

#site-footer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--hex-bg-4);
    padding-top: var(--margin-s)
}

.footer-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--margin-m);
    padding-bottom: var(--margin-m)
}

.footer-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    column-gap: var(--margin-m)
}

.footer-logo-block {
    justify-content: flex-end
}

@container (max-width: 899px) {
    .footer-row:has(.footer-logo-block) {
        flex-direction: column-reverse;
    }
}

@container (min-width: 900px) {
    .footer-row {
        flex-wrap: nowrap;
    }

    .footer-block {
        display: flex;
        flex-direction: column;
        width: 100%;
        column-gap: var(--margin-m);
    }
}

.footer-block-links {
    flex-direction: row
}

.email-signup-block .email-signup-form {
    margin-top: var(--margin-xxxs)
}

.footer-logo {
    margin-top: var(--margin-xxxs);
    margin-bottom: var(--margin-xxxs)
}

.footer-copyright {
    color: var(--hex-fg-4);
    font-size: var(--text-xs)
}

.footer-copyright a:not(:hover) {
    text-decoration: none
}

.links-list-heading {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: -1px;
    margin-bottom: 0;
    padding-top: var(--margin-xs);
    padding-bottom: var(--margin-xs);
    color: var(--hex-fg-5)
}

ul.links-list {
    padding-left: 0
}

ul.links-list li a .icon {
    transition: transform .125s ease-out
}

ul.links-list li a:hover .icon {
    transform: translate(.125rem)
}

ul.links-list li a[target*=_blank] .icon {
    rotate: -45deg
}

.links-list:not(:last-child) {
    margin-bottom: 3rem
}

.links-list li {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    list-style: none
}

.links-list li:first-child a {
    border-top-left-radius: var(--br-s);
    border-top-right-radius: var(--br-s)
}

.links-list li:last-child a {
    border-bottom-left-radius: var(--br-s);
    border-bottom-right-radius: var(--br-s)
}

.links-list li:not(:last-child) a {
    margin-bottom: 1px
}

.links-list li a {
    display: flex;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 2.75rem;
    padding-left: var(--margin-s);
    padding-right: var(--margin-xxs);
    padding-top: var(--margin-xxs);
    padding-bottom: var(--margin-xxs);
    text-decoration: none;
    color: var(--hex-fg-3);
    font-weight: 700;
    background-color: var(--hex-bg-2)
}

.links-list li a:before, .links-list li a:after {
    content: "";
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0000;
    border-radius: inherit
}

.links-list li a:hover, .links-list li a:active {
    z-index: 1;
    color: var(--hex-current-1);
    background-color: var(--hex-current-7)
}

.links-list li a:active {
    color: var(--hex-current-2);
    transform: scale(.995)
}

.links-list li a:active:after {
    background-color: #0000001a
}

.links-list li a, .links-list li a:before, .links-list li a:after {
    transition: color .1s ease-out, background-color .1s ease-out, opacity .1s ease-out
}

.links-list li a:hover, .links-list li a:hover:before, .links-list li a:hover:after, .links-list li a:active, .links-list li a:active:before, .links-list li a:active:after {
    transition-duration: 0s
}

.links-list li a img {
    position: absolute;
    left: .75rem;
    width: 1.5rem;
    height: 1.5rem
}

.links-list a:has(img) {
    padding-left: 3rem
}

#site-menu {
    position: relative;
    z-index: 1
}

#site-menu ul {
    display: flex;
    list-style-type: none;
    height: 100%
}

#site-menu li {
    display: flex;
    align-items: center;
    height: 100%
}

#site-menu .main-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: var(--margin-xs);
    padding-right: var(--margin-xs);
    text-decoration: none;
    color: var(--hex-fg-3)
}

#site-menu .main-nav-link.is-active {
    color: var(--hex-fg-1)
}

#site-menu .main-nav-link .icon {
    margin-top: 0;
    margin-right: -.25em;
    margin-left: -.25em
}

#toggle-site-menu {
    display: none
}

#toggle-site-menu .icon {
    margin-top: 0
}

@media (max-width: 1199px) {
    body:has(#site-menu.is-active) #toggle-site-menu {
        position: fixed
    }

    #site-header {
        z-index: 105
    }

    #site-menu {
        overflow: scroll;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        min-height: 100dvh;
        padding-top: calc(var(--site-header-height));
        padding-bottom: calc(var(--site-header-height) + var(--margin-m));
        background-color: var(--hex-bg-1);
        transform: translate(100%)
    }

    #site-menu ul {
        flex-shrink: 0;
        flex-direction: column;
        justify-content: center
    }

    #site-menu li {
        height: auto;
        padding-left: var(--margin-xxs);
        padding-right: var(--margin-s)
    }

    #site-menu .main-nav-link {
        font-size: var(--text-l);
        line-height: 2em
    }

    #site-menu li:has(.main-nav-link.is-active) {
        border-left: 1px solid
    }

    #toggle-site-menu {
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: 9999;
        top: 0;
        right: 0;
        width: var(--site-header-height)
    }

}

@media (min-width: 1200px) {
    #site-menu .main-nav-link {
        height: 100%
    }

    #site-menu .main-nav-link:after {
        pointer-events: none;
        content: "";
        display: block;
        position: absolute;
        bottom: -1px;
        left: var(--margin-xs);
        right: var(--margin-xs);
        height: 1px;
        background-color: transparent
    }

    #site-menu .main-nav-link:hover {
        color: var(--hex-fg-1)
    }

    #site-menu .main-nav-link.is-active:after {
        background-color: currentColor;
        opacity: .65
    }

    #site-menu .main-nav-link:not(.nav-link-retractable) .icon {
        margin-right: var(--margin-xxxs)
    }

    #site-menu .main-nav-link.nav-link-retractable .icon + span {
        display: none
    }
}

.ui-input.copy-button {
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 3rem;
    width: 2.75rem;
    border-top-right-radius: var(--br-s);
    background-color: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--hex-fg-4);
    transition: opacity .125s ease, color .125s ease
}

.ui-input.copy-button:hover {
    color: var(--hex-fg-1)
}

.text-layout .ui-button {
    overflow: visible;
    height: 3rem;
    color: var(--hex-fg-4);
    border: 1px solid var(--hex-fg-5);
    border-radius: var(--br-s);
    padding-left: var(--margin-s);
    padding-right: var(--margin-s);
    transition: transform .125s ease-out;
    line-height: 3rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600
}

.text-layout .ui-button-s {
    height: 2rem;
    line-height: 2rem;
    padding-left: var(--margin-xxs);
    padding-right: var(--margin-xxs)
}

.text-layout .ui-button:hover, .text-layout .ui-button:focus {
    color: var(--hex-fg-3);
    border: 1px solid var(--hex-fg-4)
}

.text-layout .ui-button .icon:last-child {
    margin-left: .25em;
    margin-right: calc(var(--margin-xxs) * -1)
}

.text-layout .ui-button.ui-primary {
    color: var(--hex-red-1);
    border-color: var(--hex-red-2);
    border: none;
    background-color: var(--hex-red-5)
}

.text-layout .ui-button.ui-primary:hover, .text-layout .ui-button.ui-primary:focus {
    color: var(--hex-red-1);
    border-color: var(--hex-red-1)
}

.home-section-medium {
    width: 100%;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto
}

.media {
    display: block;
    width: 100%;
    height: auto
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 100dvh
}

.layout-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.layout-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1500px
}

@media (min-width: 1500px) {
    .layout-container {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
        max-width: 1500px
    }
}

body.show-grid .layout-container:after {
    pointer-events: none;
    content: "";
    display: block;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: .5rem .5rem
}

@font-face {
    font-family: Mono;
    src: url(../fonts/BerkeleyMono-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Mono;
    src: url(../fonts/BerkeleyMono-Italic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Digital-7;
    src: url(../fonts/Digital-7MonoItalic.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DIN;
    src: url(../fonts/DINish[slnt,wdth,wght].woff2) format("woff2");
    font-variation-settings: "wdth" 125;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: oblique 0deg 12deg;
    font-display: swap
}

html, body {
    font-family: var(--font-body);
    font-weight: 400;
    font-variation-settings: "wdth" 125;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    font-size: var(--text-s);
    text-wrap: pretty
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-body);
    font-size: inherit;
    letter-spacing: inherit
}

strong {
    --wght: bold;
    font-weight: 700
}

i, em {
    font-style: normal;
    font-variation-settings: "slnt" -12, "wdth" 125
}

input, button, select {
    font-family: inherit;
    font-variation-settings: "wdth" 125
}

input[type=number] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "ss01", "ss01"
}

select[disabled], button[disabled], input[disabled] {
    pointer-events: none;
    opacity: .5
}

sup {
    vertical-align: super;
    font-size: .625em
}

pre {
    font-size: inherit
}

code {
    overflow-x: auto;
    font-family: var(--font-code);
    font-size: .875em;
    font-weight: 400;
    line-height: 1.25em
}

p, li {
    line-height: 1.5rem
}

.text-layout ul {
    list-style-type: "-  ";
    padding-left: 1rem
}

.text-layout a code.hljs {
    display: inline;
    border-left: none
}

.text-layout {
    color: var(--hex-fg-3)
}

.text-layout .text-xxxxl, .text-xxxxl {
    font-size: var(--text-xxxxl);
    line-height: .85em;
    letter-spacing: -.025em;
    margin-bottom: 1.5em
}

.text-layout .text-xxxl, .text-xxxl {
    font-size: var(--text-xxxl);
    line-height: .95em;
    letter-spacing: -.025em
}

.text-layout h1, .text-layout .text-xxl, .text-xxl {
    font-size: var(--text-xxl);
    font-weight: 700;
    letter-spacing: -.0125em;
    line-height: .95em
}

.text-layout .text-xl, .text-xl {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.125em;
    color: var(--hex-fg-2)
}

.text-layout h2, .text-layout .text-l, .text-l {
    font-size: var(--text-l);
    font-weight: 700;
    line-height: 1.25em;
    color: var(--hex-fg-2)
}

.text-layout p, .text-layout h3, .text-layout h4, .text-layout li, .text-layout .text-s, .text-s {
    font-size: var(--text-s);
    font-family: inherit
}

.text-layout h3, .text-layout h4 {
    font-weight: 600;
    color: var(--hex-fg-2)
}

.text-layout h5 {
    color: var(--hex-fg-4);
    font-family: inherit;
    font-size: var(--text-s);
    letter-spacing: .0125em
}

.text-layout .text-xs, .text-xs {
    font-size: var(--text-xs);
    line-height: 1.25em;
    letter-spacing: .0125em
}

.text-layout .text-xxs, .text-xxs {
    font-size: var(--text-xxs);
    color: var(--hex-fg-4)
}

.text-layout .text-xxxxl:not(:last-child) {
    margin-bottom: .25em
}

.text-layout .text-xxxl:not(:last-child) {
    margin-bottom: .375em
}

.text-layout .text-xxl:not(:last-child), .text-layout h1:not(:last-child) {
    margin-bottom: 1.25rem
}

.text-layout h2:not(:last-child), .text-layout h3:not(:last-child), .text-layout h4:not(:last-child), .text-layout h5:not(:last-child) {
    margin-bottom: 1rem
}

.text-layout p:not(:last-child), .text-layout ul:not(:last-child) {
    margin-bottom: 1.5rem
}

.text-layout pre {
    margin-top: 1.5rem
}

.text-layout pre:not(:last-child) {
    margin-bottom: 1.5rem
}

.text-layout h1 + h2:not(:first-child) {
    margin-top: 0rem;
    margin-bottom: 1.75rem
}

.text-layout h2:not(:first-child), .text-layout .block:has(h2):not(:last-child) {
    margin-top: 2.25rem
}

.text-layout h3:not(:first-child), .text-layout h4:not(:first-child), .text-layout .block:has(h3):not(:last-child), .text-layout .block:has(h4):not(:last-child) {
    margin-top: 1.75rem
}

.text-layout blockquote:not(:last-child) {
    margin-bottom: 1.75rem
}

.text-layout table:not(:last-child), .text-layout .block:not(:last-child) {
    margin-bottom: 1.75rem
}

.text-ui {
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: 700
}

.text-mono {
    font-family: var(--font-code);
    font-size: var(--text-xs);
    font-weight: 400;
    font-variant-ligatures: none
}

.text-layout a {
    text-decoration: none
}

.text-layout p > a, .text-layout li > a, .text-layout td > a {
    display: inline-flex;
    position: relative;
    color: currentColor;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: var(--hex-current-2)
}

.text-layout p > a:hover, .text-layout li > a:hover, .text-layout td > a:hover {
    color: var(--hex-current-1);
    text-decoration-color: var(--hex-current-1)
}

.text-layout p + pre, .text-layout h2 + pre, .text-layout h3 + pre {
    margin-top: 0
}

.text-layout code {
    position: relative;
    padding: .125em .25em;
    border-radius: var(--br-xs);
    background-color: var(--hex-bg-3);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone
}

.text-layout h2 code {
    padding: .075em .25em;
    border-radius: .25em
}

.text-layout p a:hover code, .text-layout li a:hover code, .text-layout table a:hover code {
    color: var(--hex-current-1);
    background-color: var(--hex-current-6);
    text-decoration: none
}

.text-layout p a:hover code span, .text-layout li a:hover code span, .text-layout table a:hover code span {
    color: var(--hex-current-1)
}

.text-layout pre code.hljs {
    display: block
}

.text-layout pre code {
    position: relative;
    width: 100%;
    padding: var(--margin-s)
}

.text-layout .block {
    position: relative;
    padding: var(--margin-s);
    margin-top: 2.5rem;
    border-radius: var(--br-s)
}

.text-layout .block:before {
    display: block;
    height: 1.25rem;
    position: absolute;
    top: -.625rem;
    padding: .125rem .25rem;
    margin-bottom: .5rem;
    border-radius: var(--br-xs);
    font-weight: 700;
    font-size: var(--text-xxs)
}

.text-layout .block p:not(:last-child) {
    margin-bottom: 1rem
}

.text-layout .block pre {
    width: 100%
}

.text-layout .block h2, .text-layout .block h3 {
    margin-bottom: .75rem
}

.text-layout .block p + pre {
    margin-top: 0
}

.text-layout .block .block {
    margin-top: 1.75rem
}

.text-layout .block .block, .text-layout .block p + pre code {
    border-radius: var(--br-xs)
}

.text-layout .block.info {
    padding-top: var(--margin-m);
    background-color: var(--hex-sega-8);
    box-shadow: inset 0 0 0 1px var(--hex-sega-6)
}

.text-layout .block.info:before {
    content: "INFO";
    color: var(--hex-sega-1);
    background-color: var(--hex-sega-6);
    box-shadow: 0 0 0 1px var(--hex-sega-4)
}

.text-layout .block.info > h2, .text-layout .block.info > h3 {
    color: var(--hex-sega-2)
}

.text-layout .block.info code {
    background-color: var(--hex-sega-7)
}

.text-layout .block.warning {
    padding-top: var(--margin-m);
    background-color: var(--hex-orange-8);
    box-shadow: inset 0 0 0 1px var(--hex-orange-6)
}

.text-layout .block.warning:before {
    content: "WARNING";
    color: var(--hex-orange-1);
    background-color: var(--hex-orange-6);
    box-shadow: 0 0 0 1px var(--hex-orange-4)
}

.text-layout .block.warning > h2, .text-layout .block.warning > h3 {
    color: var(--hex-orange-2)
}

.text-layout .block.warning code {
    background-color: var(--hex-orange-7)
}

.text-layout .block.success {
    background-color: var(--hex-green-8);
    box-shadow: inset 0 0 0 1px var(--hex-green-6)
}

.text-layout .block.success > h2, .text-layout .block.success > h3 {
    color: var(--hex-green-2)
}

.text-layout .block.success code {
    background-color: var(--hex-green-7)
}

.text-layout .block.error {
    background-color: var(--hex-red-8);
    box-shadow: inset 0 0 0 1px var(--hex-red-6)
}

.text-layout .block.error > h2, .text-layout .block.error > h3 {
    color: var(--hex-red-2)
}

.text-layout .block.error code {
    background-color: var(--hex-red-7)
}

.icon {
    pointer-events: none;
    flex-shrink: 0;
    display: inline-block;
    width: 24px;
    height: 24px
}

.icon * {
    transform-box: fill-box;
    transform-origin: 50% 50% 0
}

.icon *[stroke="#FFFFFF"] {
    stroke: currentColor
}

.icon *[fill="#FFFFFF"] {
    fill: currentColor
}

.ui-overlay {
    --overlay-opacity: 0;
    backdrop-filter: blur(calc(var(--overlay-opacity) * 10px))
}

.ui-overlay:before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    opacity: calc(var(--overlay-opacity) * .4);
    background: #000
}

.ui-input {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    height: 100%;
    max-height: var(--site-header-height);
    padding-right: var(--margin-xxxs);
    padding-left: var(--margin-xxxs);
    background: transparent;
    color: var(--hex-current-2, var(--hex-fg-3));
    border: none;
    box-shadow: none;
    outline: none;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    text-align: left;
    line-height: 1;
    font-family: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}

.ui-input span {
    width: 100%;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block
}

.ui-input:has(span + .icon) {
    flex-direction: row-reverse
}

.ui-input .icon + span {
    padding-left: var(--margin-xxs)
}

.ui-input:hover {
    color: var(--hex-current-1)
}

.ui-input:disabled {
    pointer-events: none;
    cursor: not-allowed;
    color: var(--hex-current-6, var(--hex-fg-6))
}

.ui-input:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 transparent
}

.ui-input:focus {
    border-color: transparent;
    color: var(--hex-current-2)
}

.ui-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100%;
    padding-left: var(--margin-xxs);
    padding-right: var(--margin-xxs)
}

.ui-group .ui-button {
    width: 100%
}

.ui-group > .ui-group {
    padding-left: 0;
    padding-right: 0
}

.ui-select {
    position: relative;
    padding-right: 0;
    padding-left: 0
}

.ui-select:after {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: var(--margin-s);
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.75rem;
    -webkit-mask: url(../images/icons/drop-down.svg) no-repeat 50% 50%;
    mask: url(../images/icons/drop-down.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    color: inherit;
    background-color: currentColor
}

.ui-select .ui-input {
    width: 100%;
    height: 100%;
    padding-right: 1.75rem
}

input[type=range], input[type=range]:hover {
    cursor: ew-resize
}

input[type=range][value] {
    position: relative;
    width: 100%;
    height: 2rem;
    appearance: none;
    -webkit-appearance: none
}

input[type=range][value]:focus {
    outline: none
}

input[type=range][value]:after {
    content: "";
    display: block;
    position: absolute
}

input[type=range][value]:after {
    top: calc(1rem - 1px);
    left: calc(1rem - 1px);
    right: calc(1rem - 1px);
    height: 2px;
    background-color: var(--hex-current-3)
}

input[type=range][value]:hover {
    background-color: var(--hex-current-4)
}

input[type=range][value]:hover:after {
    background-color: var(--hex-current-2)
}

input[type=range][value]::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
    -webkit-appearance: none;
    background-color: transparent;
    border-radius: 1rem;
    width: 2rem;
    height: 2rem;
    box-shadow: none;
    background-image: radial-gradient(circle at 50% 50%, currentColor 0%, currentColor 22%, transparent 24%)
}

.hljs {
    color: #abb2bf
}

.hljs-comment, .hljs-quote {
    color: #5c6370;
    color: #ffffff59
}

.hljs-doctag, .hljs-keyword, .hljs-formula {
    color: #c678dd
}

.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
    color: #e06c75
}

.hljs-variable.language_ {
    color: #56b6c2
}

.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
    color: #98c379
}

.hljs-built_in, .hljs-class .hljs-title, .class_.hljs-title {
    color: #e6c07b
}

.hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
    color: #d19a66
}

.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
    color: #61aeee
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.hljs-link {
    text-decoration: underline
}

a, a:hover {
    color: var(--hex-current-1);
    text-decoration-color: var(--hex-current-1)
}

.email-signup-form {
    width: 100%;
    position: relative
}

.email-signup-form form.is-pending {
    pointer-events: none;
    opacity: .5
}

.email-signup-form ul:not(:last-child) {
    margin: 0
}

.email-signup-fields {
    display: none
}

.email-signup-fields.is-active {
    display: flex
}

.email-signup-field {
    flex-grow: 1
}

.email-signup-input {
    width: 100%;
    padding: var(--margin-xs) var(--margin-xs);
    border-radius: var(--br-s) 0px 0px var(--br-s);
    font-size: var(--text-s);
    background-color: var(--hex-bg-4);
    color: var(--hex-fg-1);
    height: 2.75rem
}

.email-signup-input::placeholder {
    color: var(--hex-fg-2)
}

.email-signup-submit {
    font-size: var(--text-s);
    padding: var(--margin-xxs) var(--margin-xs);
    border-radius: 0px var(--br-s) var(--br-s) 0px;
    background-color: var(--hex-fg-2);
    color: var(--hex-bg-4);
    font-weight: 700
}

.email-signup-submit:hover {
    cursor: pointer;
    color: var(--hex-bg-1);
    background-color: var(--hex-fg-1)
}

.email-signup-alert {
    display: none;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    inset: 0;
    padding: var(--margin-xs) var(--margin-xs);
    border-radius: var(--br-s);
    font-size: var(--text-xs);
    min-height: 2.75rem
}

.email-signup-alert p {
    font-size: .8125rem !important;
    font-weight: 600;
    text-align: center
}

.email-signup-alert.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto
}

.email-signup-error {
    color: var(--hex-red-1);
    background-color: var(--hex-red-4)
}

.email-signup-success {
    color: var(--hex-green-1);
    background-color: var(--hex-green-4)
}

body[data-template=learn] #site-header {
    background-color: transparent;
    position: relative
}

#learn {
    --one-cell: 100px;
    --border-color: rgba(255, 255, 255, .75);
    opacity: 0;
    width: 100%;
    flex-direction: column;
    min-height: 100lvh;
    display: flex;
    justify-content: space-between
}

#learn.is-ready {
    opacity: 1
}

#learn:before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(-90deg, rgba(255, 255, 255, .0125) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .0125) 1px, transparent 1px);
    background-size: calc(var(--one-cell) / 10) calc(var(--one-cell) / 10), calc(var(--one-cell) / 10) calc(var(--one-cell) / 10), var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell);
    background-position: calc(var(--one-cell) * .25) -1px;
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
    mask-image: radial-gradient(circle at center, black 30%, transparent 70%)
}

@media (min-width: 500px) {
    #learn:before {
        width: calc(100% + var(--one-cell) * .5);
        left: calc(var(--one-cell) * -.5);
        background-position: calc(var(--one-cell) * 1) -1px
    }
}

#learn-animejs {
    position: relative;
    z-index: 1;
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto
}

#learn-animejs .home-section, #learn-animejs .home-section-content {
    height: auto
}

@media (min-height: 64rem) {
    #learn-animejs .home-section-content {
        max-height: 100%
    }
}

#learn-animejs .home-section-content {
    padding-bottom: var(--margin-l)
}

@media (max-width: 899px) {
    #learn-animejs .home-section-content {
        padding-top: var(--margin-l)
    }
}

#learn-animejs figcaption {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    padding: var(--xxs);
    background-color: #ffffff1a;
    backdrop-filter: blur(10px);
    height: 2.5rem;
    padding-right: var(--margin-s);
    padding-left: var(--margin-s);
    line-height: 2.5rem;
    border-radius: var(--br-m);
    font-weight: 600
}

#learn-animejs figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--br-l);
    box-shadow: 0 0 0 1px #00000040, 0 10px 20px #00000026
}

.learn-header-text .text-xxxl:not(:last-child) {
    margin-bottom: 2rem
}

.learn-header-text p {
    color: var(--hex-fg-2);
    max-width: 40rem
}

.learn-header-text p.text-l {
    color: var(--hex-fg-3)
}

.learn-email-signup {
    margin-top: var(--margin-l);
    margin-bottom: var(--margin-l);
    background: var(--hex-bg-3);
    padding: calc(var(--margin-m) - .375rem) var(--margin-m) var(--margin-m);
    border-radius: var(--br-l)
}

.learn-email-signup h3 {
    color: var(--hex-fg-3)
}

.learn-email-signup h3 span {
    color: var(--hex-fg-2)
}

.learn-email-signup p {
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.word-websites {
    display: inline-block
}

.signup-iframe {
    width: 100% !important;
    height: 220px;
    border: transparent !important;
    background: transparent !important;
    border-radius: var(--br-l);
    margin-bottom: var(--margin-s)
}

[data-template*=easing] #site-header {
    position: relative
}

#easing-editor {
    z-index: 3;
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0
}

#easing-editor.is-ready {
    opacity: 1
}

#easings-navigation {
    width: 100%
}

#easings-navigation .easing-curve-items {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1px
}

#easings-navigation .easing-curve-nav-item {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    width: 7rem;
    height: 100%;
    aspect-ratio: 1/1
}

.easing-pane-controls {
    align-items: center;
    padding: 0;
    margin-right: calc(var(--margin-xxs) * -1)
}

.easing-control-handle {
    transform-box: fill-box;
    transform-origin: 50% 50%
}

.easing-pane-controls .ui-input {
    padding-left: var(--margin-xxxs);
    padding-right: var(--margin-xxxs);
    margin-top: calc(var(--margin-s) * -1.25);
    padding-top: calc(var(--margin-s) * 1);
    margin-bottom: calc(var(--margin-s) * -1.25);
    padding-bottom: calc(var(--margin-s) * 1)
}

.easing-pane-controls .ui-input:active svg {
    border: 1px solid transparent
}

.easing-pane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--margin-s);
    height: 100%;
    width: 100%
}

@media (max-width: 699px) {
    .easing-pane {
        width: 100%;
        padding-left: var(--margin-s);
        padding-right: var(--margin-s);
        padding-bottom: var(--margin-s)
    }
}

@media (min-width: 700px) {
    .easing-pane {
        flex-grow: 1;
        flex-basis: 0;
        width: 30%;
        padding-bottom: var(--margin-s)
    }
}

@media (max-width: 1199px) {
    #easings-navigation {
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: var(--margin-s);
        padding-left: var(--margin-s)
    }

    #easings-navigation .easing-curve-nav-item:last-child {
        padding-right: var(--margin-s);
        width: calc(7rem + var(--margin-s))
    }

    #easings-navigation .easing-curve-nav-item:first-child a {
        border-top-left-radius: var(--margin-s);
        border-bottom-left-radius: var(--margin-s)
    }

    #easings-navigation .easing-curve-nav-item:last-child a {
        border-top-right-radius: var(--margin-s);
        border-bottom-right-radius: var(--margin-s)
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .easing-pane {
        padding-left: var(--margin-s);
        padding-right: calc(var(--margin-s) * .5)
    }

    .easing-pane:last-child {
        padding-left: calc(var(--margin-s) * .5);
        padding-right: var(--margin-s)
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    #easings-navigation {
        margin-top: var(--margin-m);
        padding-left: var(--margin-m)
    }

    #easings-navigation .easing-curve-nav-item:last-child {
        padding-right: var(--margin-m);
        width: calc(7rem + var(--margin-m))
    }

    .easing-pane {
        padding-left: var(--margin-m);
        padding-right: calc(var(--margin-m) * .5);
        padding-bottom: var(--margin-m);
        gap: var(--margin-m)
    }

    .easing-pane:last-child {
        padding-left: calc(var(--margin-m) * .5);
        padding-right: var(--margin-m)
    }
}

@media (min-width: 1200px) {
    #easing-editor {
        flex-wrap: nowrap;
        padding: 0 calc(var(--margin-m) * .5)
    }

    #easings-navigation {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        top: calc(var(--site-header-height) + var(--margin-m) * 1);
        margin-top: var(--margin-m);
        margin-bottom: var(--margin-m);
        flex-grow: 1;
        flex-basis: 0;
        margin-left: calc(var(--margin-m) * .5);
        margin-right: calc(var(--margin-m) * .5);
        width: 16rem;
        height: calc(100lvh - var(--site-header-height) - var(--margin-m) * 2);
        clip-path: inset(0% 0% 0% 0% round var(--br-l))
    }

    .easing-pane {
        gap: var(--margin-m);
        padding-top: var(--margin-m);
        padding-left: calc(var(--margin-m) * .5);
        padding-right: calc(var(--margin-m) * .5);
        padding-bottom: var(--margin-m)
    }

    #easings-navigation .easing-curve-items {
        flex-wrap: wrap
    }

    #easings-navigation .easing-curve-nav-item {
        flex: 0 0 calc((100% - 3px) / 4)
    }

    #easings-navigation .easing-curve-nav-item:first-child a {
        border-top-left-radius: var(--br-l)
    }

    #easings-navigation .easing-curve-nav-item:nth-child(4) a {
        border-top-right-radius: var(--br-l)
    }

    #easings-navigation .easing-curve-nav-item:nth-last-child(4) a {
        border-bottom-left-radius: var(--margin-s)
    }

    #easings-navigation .easing-curve-nav-item:last-child a {
        border-bottom-right-radius: var(--br-l)
    }
}


#easing-editor-container {
    display: flex;
    flex-direction: column
}

#easing-editor .easing-pane-block {
    align-items: center;
    padding: var(--margin-s);
    min-height: 3rem;
    background-color: var(--hex-bg-2)
}

#easing-editor .easing-pane-block:first-child {
    border-top-left-radius: var(--br-l);
    border-top-right-radius: var(--br-l)
}

#easing-editor .easing-pane-block:last-child {
    border-bottom-left-radius: var(--br-l);
    border-bottom-right-radius: var(--br-l)
}

#easing-editor-container h1 {
    margin-bottom: var(--margin-s)
}

#easing-visualizer-container {
    --grid-size: 6.24%;
    --grid-color: #1F1F1E;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: var(--margin-s);
    border-radius: var(--br-s);
    background-color: var(--grid-color);
    background-image: radial-gradient(var(--hex-current-6) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: center;
    background-repeat: repeat;
    box-shadow: inset 0 0 0 4px var(--grid-color)
}

#easing-visualizer-container:after {
    --marker-size: 62.4%;
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1/1;
    background-image: radial-gradient(var(--hex-current-2) 1px, transparent 1px);
    background-size: var(--marker-size) var(--marker-size);
    background-position-x: -33%;
    background-position-y: -33%;
    background-repeat: repeat
}

#easing-curve-container {
    position: relative;
    z-index: 0
}

#easing-editor .lil-gui {
    --background-color: transparent;
    --text-color: currentColor;
    --title-background-color: transparent;
    --title-text-color: currentColor;
    --width: 100%;
    --widget-color: var(--hex-bg-4);
    --hover-color: var(--hex-current-6);
    --focus-color: var(--hex-current-6);
    --number-color: var(--hex-current-1);
    --string-color: #a2db3c;
    --font-size: var(--text-xxs);
    --input-font-size: var(--text-xxs);
    --font-family: var(--font-code);
    --font-family-mono: var(--font-code);
    --padding: 0px;
    --spacing: 4px;
    --widget-height: 20px;
    --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);
    --name-width: calc(33.33% + var(--margin-s) * .5);
    --slider-knob-width: 2px;
    --slider-input-width: 27%;
    --color-input-width: 27%;
    --slider-input-min-width: 45px;
    --color-input-min-width: 45px;
    --folder-indent: 7px;
    --widget-padding: 0 0 0 3px;
    --widget-border-radius: var(--br-s);
    --checkbox-size: calc(1 * var(--widget-height));
    --scrollbar-width: 5px
}

#easing-editor .lil-gui.root > .children {
    overflow: hidden
}

#easing-editor .lil-gui .controller.number .slider .fill {
    opacity: 1
}

#easing-editor .lil-gui .controller {
    margin: 0 0 var(--spacing) 0
}

#easing-editor .lil-gui .controller:last-child {
    margin-bottom: 0
}

#easing-editor .lil-gui .children:empty:before {
    content: "No parameters";
    font-style: normal;
    margin: 0
}

#easing-editor .lil-gui .controller.option .display {
    width: 100%
}

body[data-template=home] {
    background-color: #000;
    scroll-behavior: smooth
}

body[data-template=home] #site-header {
    background-color: transparent;
    position: relative
}

@media (min-width: 900px) {
    body[data-template=home] #site-header-content {
        border-bottom-color: transparent
    }
}

body[data-template=home] .page {
    opacity: 0
}

body[data-template=home] .page.is-ready {
    opacity: 1
}

body[data-template=home] #engine {
    position: fixed;
    width: 100%;
    height: 100lvh
}

#css-renderer {
    --color: var(--hex-red-1);
    color: rgb(var(--color));
    transform: translateZ(0) scale(1.001);
    backface-visibility: hidden
}

#home {
    width: 100%;
    --max-box-width: 21rem;
    flex-direction: column
}

#path-animation {
    pointer-events: none;
    position: fixed;
    z-index: 105;
    left: 0;
    top: 0;
    width: 100%;
    height: 100lvh
}

.home-section-container {
    width: 100%
}

.section-spacer {
    height: 100lvh
}

.section-half-spacer {
    height: 50lvh
}

.home-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100lvh;
    padding-left: var(--margin-s);
    padding-right: var(--margin-s)
}

@media (min-width: 900px) {
    .home-section {
        padding-left: var(--margin-l);
        padding-right: var(--margin-l)
    }
}

.home-section-content {
    position: relative;
    width: 100%;
    height: 100lvh;
    padding-top: var(--margin-s);
    padding-bottom: var(--margin-s)
}

@media (min-width: 900px) {
    .home-section-content {
        padding-top: var(--margin-l);
        padding-bottom: var(--margin-l)
    }
}

.home-section-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.debug .section-spacer {
    box-shadow: 0 0 0 1px #ff0
}

.debug .home-section {
    box-shadow: 0 0 0 1px red
}

.debug .home-section-content {
    box-shadow: 0 0 0 1px green
}

.home-section-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%
}

.home-section-text.home-section-centered {
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100%
}

.home-section-text.home-section-centered p {
    max-width: 100%
}

.home-section-light .text-xxl {
    color: var(--hex-bg-1)
}

.home-section-light .text-xl {
    color: var(--hex-bg-2)
}

.home-section-light .text-m, .home-section-light .text-l {
    color: var(--hex-bg-3)
}

.home-section-text h2 {
    font-size: var(--text-xxxl);
    line-height: .865em
}

.home-section-text h2:not(:last-child) {
    margin-bottom: .365em
}

.home-section-light .home-section-text h2 {
    color: var(--hex-bg-3);
    font-weight: 800
}

.home-section-text p {
    color: var(--hex-fg-2);
    line-height: 1.25em;
    font-weight: 600
}

.home-section-light .home-section-text p {
    color: var(--hex-bg-4)
}

@media (min-width: 900px) {
    .home-section-text {
        max-width: 27rem
    }

    .home-section-text p {
        font-size: var(--text-l);
        max-width: 20rem
    }

    .home-section-text-short p {
        max-width: var(--max-box-width)
    }
}

#intro {
    position: relative
}

#intro .home-section {
    position: relative;
    height: calc(100lvh - var(--site-header-height))
}

#intro .home-section-text h2 {
    color: var(--hex-fg-1);
    margin-bottom: .365em
}

#intro .home-section-text p {
    width: 100%
}

.intro-name {
    display: inline-block;
    color: var(--hex-fg-3);
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: -.865em
}

@media (max-width: 899px) {
    .intro-name {
        display: none
    }
}

#intro .animate-anything-wrapper {
    position: relative;
    display: inline-block
}

.animate-anything {
    position: relative
}

.animate-anything .char {
    transform-origin: 0% 95%
}

.red-dot {
    display: inline-block;
    color: var(--hex-red-1)
}

.animate-anything-dot {
    display: block;
    position: absolute;
    right: -.25em;
    bottom: -.01em
}

#intro .home-section-text .red-dot .char {
    opacity: 1 !important
}

@media (max-width: 899px) {
    #intro h2 {
        margin-top: .25em
    }

    #intro h2 br {
        display: none
    }
}

@media (min-width: 900px) {
    #intro .home-section-text {
        align-items: flex-start;
        text-align: left;
        height: 100%;
        margin-bottom: var(--margin-l)
    }

    #intro .home-section-text h2 {
        font-size: var(--text-xxxxl)
    }
}

#intro .home-section-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.fixed-container {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

.heading-links {
    z-index: 1;
    will-change: transform
}

.heading-links .layout-container {
    justify-content: space-between;
    padding-left: var(--margin-s);
    padding-right: var(--margin-s);
    padding-bottom: var(--margin-s)
}

@media (min-width: 900px) {
    .heading-links .layout-container {
        padding-left: var(--margin-l);
        padding-right: var(--margin-l);
        padding-bottom: var(--margin-l)
    }
}

.heading-links .ui-group {
    justify-content: flex-start;
    padding: 0
}

pre.npm-install, pre.npm-install:not(:last-child) {
    margin: 0;
    margin-right: 1rem
}

pre.npm-install code {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    padding-right: 2.75rem;
    height: 3rem
}

.learn-more.ui-button {
    position: relative;
    overflow: hidden
}

.learn-more.ui-button .icon:nth-child(1) {
    position: absolute;
    right: var(--margin-xxs);
    top: -.25em
}

.learn-more.ui-button .icon:last-child {
    margin-left: var(--margin-xxxs)
}

@media (max-width: 899px) {
    pre.npm-install {
        display: none
    }
}

#modules {
    scroll-margin-top: -50lvh
}

.feature-section {
    scroll-margin-top: -45lvh
}

.feature-section {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
    height: 100lvh
}

.feature-section.is-in-view {
    pointer-events: auto;
    z-index: 1
}

.feature-section .home-section-content {
    padding-top: var(--margin-s);
    padding-bottom: 0;
    height: 100%;
    max-height: 100%
}

.home-section-text-heading {
    width: calc(100% - var(--margin-s) * 2);
    margin-bottom: var(--margin-m)
}

@media (max-width: 899px) {
    .feature-section h2 {
        font-size: var(--text-xxl)
    }

    .feature-section .home-section-text {
        opacity: 0;
        position: fixed;
        top: var(--margin-s)
    }
}

@media (min-width: 900px) {
    .feature-section .home-section-text {
        position: absolute;
        padding-top: var(--margin-m);
        bottom: 0
    }
}

.feature-section .home-section-text h2 {
    color: var(--hex-current-1)
}

.feature-section .home-section-text p {
    color: var(--hex-fg-2)
}

.feature-section .home-section-text p strong {
    font-weight: inherit
}

.feature-section ul.feature-links {
    display: none
}

.home-section-text ul.feature-links {
    display: block;
    position: relative;
    width: 100%;
    padding-top: var(--margin-s);
    padding-left: 0
}

@media (min-width: 900px) {
    .feature-section ul.feature-links:before {
        content: "";
        display: block;
        max-width: 16rem;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background-color: var(--hex-fg-3);
        transform: scaleX(var(--scaleX));
        transform-origin: 0 0
    }

    .feature-section ul.feature-links {
        --scaleX: 0;
        opacity: 0
    }
}

ul.feature-links li {
    list-style-type: none;
    position: relative
}

ul.feature-links li a {
    text-decoration: none;
    font-size: var(--text-s);
    padding-left: 1.75rem;
    color: var(--hex-fg-3)
}

ul.feature-links li a .icon {
    position: absolute;
    top: 0;
    left: -.125rem;
    color: var(--hex-fg-4);
    transition: transform .125s ease-out
}

ul.feature-links li a:hover .icon {
    transform: translate(.125rem)
}

ul.feature-links li a:hover, ul.feature-links li a:hover .icon {
    color: var(--hex-current-1)
}

.feature-section-demo-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh
}

@media (min-width: 900px) {
    .feature-section-demo-wrapper {
        position: fixed
    }
}

.feature-demo, .feature-section-demo {
    opacity: .001;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    aspect-ratio: 1/1;
    width: 400px;
    height: auto;
    transform: translate(-50%, -50%);
    color: var(--hex-current-1)
}

.debug .feature-demo {
    box-shadow: 0 0 0 1px #ff320080
}

.ui-label {
    margin-right: var(--margin-xxs)
}

.toolbox-labels-container {
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    justify-self: center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100lvh
}

.toolbox-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100lvh;
    max-height: 45lvh;
    min-height: 15rem
}

@media (min-width: 900px) {
    .toolbox-labels-container {
        height: 100%
    }

    .toolbox-labels {
        max-height: 64rem
    }
}

.toolbox-labels ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    margin: 0 !important;
    font-family: var(--font-code);
    font-size: var(--text-xxs)
}

.toolbox-labels, .toolbox-labels ul {
    position: absolute
}

.toolbox-labels ul.toolbox-labels-left {
    left: var(--margin-s);
    bottom: var(--margin-s)
}

.toolbox-labels ul.toolbox-labels-right {
    align-items: flex-end;
    right: var(--margin-s);
    top: var(--margin-s);
    text-align: right
}

@media (min-width: 900px) {
    .toolbox-labels ul {
        font-size: var(--text-xs)
    }

    .toolbox-labels ul.toolbox-labels-left {
        left: var(--margin-l);
        bottom: var(--margin-l)
    }

    .toolbox-labels ul.toolbox-labels-right {
        right: var(--margin-l);
        top: var(--margin-l)
    }
}

.toolbox-labels ul li {
    list-style: none;
    line-height: 1.25em;
    margin-bottom: .25em;
    padding-left: .25em;
    padding-right: .25em;
    border-radius: var(--br-xs);
    will-change: opacity
}

.module-label-point {
    width: 1px;
    height: 1px
}

.module-label-point, .module-label-text div, .toolbox-labels ul li {
    font-family: var(--font-code);
    font-size: var(--text-xs);
    color: var(--hex-bg-4);
    opacity: 0;
    will-change: transform, opacity
}

.module-label-text.module-stagger, .module-label-text.module-timer, .module-label-text.module-animation, .module-label-text.module-easings, .module-label-text.module-scope {
    display: none
}

.module-label-text div {
    border-radius: var(--br-xs);
    background-color: var(--worldColorLight1);
    line-height: .8
}

#engine .output {
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px
}

.output-progress, .output-progress-bg {
    width: 100%;
    height: 100%;
    backface-visibility: hidden
}

.output-progress path, .output-progress-bg path {
    stroke: var(--hex-current-1)
}

.output-progress-bg path {
    filter: drop-shadow(0 0 6px var(--hex-current-1))
}

.output-progress path {
    filter: drop-shadow(0 0 4px var(--hex-current-2))
}

.output-progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .125
}

.grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: currentColor
}

.dotted-grid-canvas {
    z-index: 0
}

.clock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden
}

.tick {
    opacity: .5;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 10px;
    color: var(--hex-red-1);
    background-color: currentColor;
    backface-visibility: hidden;
    transform-origin: 100% 0%;
    will-change: transform, opacity
}

.shape {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 4px solid currentColor;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    will-change: transform
}

.circle {
    border-radius: 50%
}

.shape.fill {
    background-color: currentColor
}

.square {
    border-radius: 10px
}

.svg-tracks {
    perspective: 750px;
    transform: scale(.85)
}

.svg-tracks, .svg-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.svg-track {
    transform-style: preserve-3d
}

.svg-tracks-pool {
    opacity: 0
}

.svg-track-car {
    stroke-linecap: round;
    stroke-linejoin: round
}

.svg-car {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid currentColor;
    transform-origin: 50%
}

.clock-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    scale: .8
}

.timeline-playhead {
    --height: 158px;
    width: 2px;
    height: var(--height);
    background: currentColor;
    margin-top: calc(var(--height) * -1);
    transform-origin: 50% 100% 0px;
    will-change: transform
}

#sphere-animation {
    overflow: visible;
    width: 60%;
    height: 60%;
    color: var(--hex-red-10)
}

#sphere-animation path {
    opacity: .75;
    stroke-width: 2;
    stroke: currentColor
}

#responsive-demo {
    transform: translate(-50%, -50%) scale(.7)
}

.responsive-viewport {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px dotted var(--hex-current-4);
    border-radius: 50px
}

.responsive-viewport .circle {
    --diam: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--diam);
    height: var(--diam);
    margin: calc(var(--diam) * -.5) 0 0 calc(var(--diam) * -.5);
    border-radius: 20px;
    background-color: currentColor;
    will-change: transform
}

.responsive-viewport .shape {
    border: none
}

#draggable-demo {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--hex-current-1)
}

.draggable-container {
    position: relative;
    width: 70%;
    height: 70%;
    max-width: 40vw;
    max-height: 40vw
}

.draggable-container:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    border: 4px dashed var(--hex-current-4)
}

#draggable-demo .draggable {
    width: 100%;
    height: 100%;
    color: var(--hex-current-1);
    background-color: currentColor;
    will-change: transform;
    border-radius: 50%;
    cursor: grab
}

#draggable-demo .draggable:after {
    scale: 2
}

ul.modules-list {
    padding-left: 0rem;
    display: flex;
    flex-wrap: wrap
}

.modules-list li {
    list-style: none;
    width: 33%;
    font-size: var(--text-xxs);
    color: var(--hex-fg-3);
    line-height: 1.25em
}

.modules-list .size {
    display: none;
    margin-left: .25em;
    font-family: var(--font-code);
    font-size: var(--text-xxs);
    color: var(--hex-fg-4)
}

.label-dot {
    margin-right: .5rem;
    position: relative;
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--hex-current-1)
}

.box-heading {
    display: flex;
    justify-content: space-between
}

.box-heading h3:not(:last-child) {
    margin-bottom: .5rem
}

.box-heading .size {
    font-family: var(--font-code)
}

.chart {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    border-radius: var(--br-s);
    margin-bottom: var(--margin-xs);
    background-color: var(--hex-bg-4)
}

.chart-bar {
    height: .75rem;
    width: 100%;
    background-color: var(--hex-current-1);
    will-change: width
}

@media (max-width: 899px) {
    ul.modules-list {
        display: none
    }

    .chart {
        margin-bottom: var(--margin-xxxs)
    }

    .chart-bar {
        height: 1rem
    }
}

@media (min-width: 900px) {
    [data-card] funding-level p {
        letter-spacing: -.015em;
        white-space: nowrap
    }
}

#get-started .home-section {
    height: auto;
    padding-top: calc(var(--margin-l) * 2);
    padding-bottom: var(--margin-l)
}

#get-started .home-section-content {
    height: auto
}

#get-started .home-section-text {
    margin-bottom: 2.5rem
}

@media (min-width: 900px) {
    #get-started .home-section {
        height: 100lvh;
        padding-bottom: 0
    }
}

ul.links-list-grid {
    overflow: hidden;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 45rem;
    gap: 1px
}

ul.links-list-grid li {
    display: block;
    width: 100%
}

ul.links-list-grid a {
    margin: 0;
    text-align: left;
    text-decoration: none;
    color: var(--hex-fg-3)
}

ul.links-list-grid li a {
    position: relative;
    padding-left: 2.5rem
}

ul.links-list-grid li:not(:last-child) a {
    margin: 0
}

@media (min-width: 900px) {
    ul.links-list-grid {
        border-radius: 0;
        gap: var(--margin-xxs)
    }

    ul.links-list-grid li {
        width: calc(33.3333333333% - var(--margin-xxs))
    }

    ul.links-list-grid a {
        border-radius: var(--br-s)
    }
}

.links-list-grid a span.label-dot {
    position: absolute;
    left: 1rem;
    top: 1.125rem;
    color: var(--hex-current-1);
    margin: 0
}

.fixed-section {
    opacity: .001;
    pointer-events: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    padding: 0;
    will-change: opacity
}

@media (min-width: 900px) {
    .fixed-section {
        flex-direction: row;
        justify-content: center;
        align-items: center
    }
}

@media (min-height: 64rem) {
    .home-section-content {
        max-height: 64rem
    }
}

.fixed-section .home-section-content {
    max-width: 1500px;
    width: 100%;
    height: 100dvh;
    padding: var(--margin-s)
}

.sticky-section {
    position: sticky;
    top: 0
}

@media (min-width: 900px) {
    .fixed-section .home-section-content {
        padding: var(--margin-l)
    }
}

.sub-nav {
    pointer-events: none;
    overflow: hidden;
    position: fixed;
    z-index: 10;
    right: var(--margin-s);
    left: var(--margin-s);
    bottom: var(--margin-s);
    width: calc(100% - var(--margin-s) * 2);
    height: 10rem;
    border-radius: var(--br-l)
}

.home-progress-card {
    opacity: 0;
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    border-radius: var(--br-l);
    background-color: var(--hex-bg-3)
}

@media (min-width: 900px) {
    .sub-nav {
        left: auto;
        height: 16rem;
        width: var(--max-box-width);
        right: var(--margin-l);
        bottom: var(--margin-l)
    }
}

@media (min-width: 1500px) {
    .sub-nav {
        right: calc((100% - 1500px + var(--margin-l) * 2) / 2)
    }
}

@media (min-height: 64rem) and (min-width: 900px) {
    .sub-nav {
        bottom: calc((100lvh - 64rem + var(--margin-l) * 2) / 2)
    }
}

.scroll-bar {
    position: relative;
    display: flex;
    width: calc(100% - 2rem);
    height: .75rem;
    top: .865rem;
    left: 1rem;
    background-size: .7692307692% .5rem;
    background-image: linear-gradient(to right, rgba(255, 255, 255, .15) 1px, transparent 1px)
}

@media (min-width: 900px) {
    .scroll-bar {
        background-size: 1.5384615385% .5rem
    }
}

.scroll-button {
    pointer-events: none;
    position: relative;
    z-index: -1;
    opacity: .5;
    display: flex;
    justify-content: space-evenly;
    width: 16.6666666667%;
    height: .75rem;
    top: 0;
    border-left: 1px solid #FFF
}

.scroll-button:last-child {
    border-right: 1px solid #FFF
}

.scroll-cursor {
    position: absolute;
    z-index: 100;
    flex-shrink: 0;
    top: -.125rem;
    width: 3px;
    height: 1rem;
    background-color: var(--hex-red-1);
    border-radius: 3px;
    will-change: transform
}

.scroll-cursor:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 100;
    inset: -.5rem;
    background: transparent
}

.scroll-cursor-ghost {
    opacity: 0;
    background-color: var(--hex-red-2);
    pointer-events: none
}

[data-card] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem;
    width: 100%;
    padding: calc(var(--margin-xs) - 2px) var(--margin-s) var(--margin-xs) var(--margin-s);
    border-radius: var(--br-l);
    background-color: var(--hex-bg-3)
}

[data-card] .ui-input.copy-button {
    border-top-right-radius: var(--br-l)
}

.sub-nav pre {
    line-height: 1em
}

.sub-nav pre code {
    background-color: transparent;
    font-size: var(--text-xxs);
    line-height: 1em
}

@supports (-moz-orient: block) {
    .svg-car {
        opacity: 0
    }

    .responsive-viewport, .shape {
        border-radius: 0 !important
    }
}

.links-list .dotted-grid {
    width: calc(1rem + 1px);
    height: calc(1rem + 1px);
    top: 1rem;
    right: calc(1rem - 1px);
    color: currentColor
}

.dotted-grid:before, .square-grid:after, .square-grid:before {
    opacity: .5;
    pointer-events: none;
    content: "";
    position: absolute;
    z-index: 0
}

.dotted-grid:before {
    top: .5px;
    left: 1px;
    width: calc(100% - 1px);
    height: calc(100% - 1px)
}

.scroll-content .square-grid:before, .square-grid.scroll-content:before {
    box-shadow: none;
    opacity: .25
}

.grid {
    display: flex
}

.grid:before {
    pointer-events: none;
    opacity: .5;
    content: "";
    display: block;
    position: absolute;
    inset: 0 -1px -1px 0
}

.grid.medium {
    position: relative;
    width: 100%;
    height: 4rem
}

.grid.large {
    width: 100%;
    height: 7rem
}

.grid.medium.padded {
    padding: 1rem
}

.grid.large.padded {
    padding: 2rem
}

.scroll-container .grid.large {
    height: 12rem
}

.scroll-container .padded {
    padding: 5rem 2rem 4rem
}

.scroll-container {
    overscroll-behavior: contain;
    position: absolute;
    top: -3.5rem;
    left: -1.5rem;
    width: calc(100% + 3rem);
    height: calc(100% + 5rem);
    border-radius: var(--br-l);
    mask-image: linear-gradient(rgba(0, 0, 0, .25), rgb(0, 0, 0) 4rem);
    scrollbar-width: thin;
    scrollbar-color: currentColor transparent
}

.scroll-container.scroll-x {
    overflow-x: auto
}

.scroll-container.scroll-y {
    overflow-y: auto
}

.scroll-content {
    position: relative;
    display: flex;
    flex-direction: column
}

.scroll-container.scroll-x > .scroll-content {
    width: 46rem
}

.scroll-container.scroll-x.scroll-y > .scroll-content {
    width: 46rem;
    height: 36rem
}

.scroll-container.scroll-y:not(.scroll-x) > .scroll-content {
    width: calc(100% - 1px)
}

.scroll-container.scroll-x:not(.scroll-y) > .scroll-content {
    flex-direction: row;
    justify-content: space-between;
    height: calc(100% - 1px)
}

.scroll-section {
    display: flex;
    align-items: center;
    width: 22rem;
    height: 12rem
}

.scroll-section.sticky {
    position: sticky;
    z-index: 1;
    top: 0;
    left: 0
}

.perspective {
    perspective: 400px
}

.perspective .square, .perspective .circle {
    transform-style: preserve-3d
}

.draggable {
    display: flex;
    position: relative;
    z-index: 100
}

.draggable:first-child:not(:last-child) {
    margin-right: 1rem
}

.draggable:after {
    content: "";
    pointer-events: none;
    position: relative;
    align-self: center;
    margin: auto;
    display: block;
    width: 20px;
    height: 20px;
    background-image: radial-gradient(circle at center, #000 1px, transparent 0), radial-gradient(circle at center, #000 1px, transparent 0);
    background-size: 5px 5px
}

.draggable.is-disabled {
    color: var(--hex-red-1);
    opacity: .5
}

.dotted-grid:before {
    background-image: radial-gradient(currentColor .5px, transparent .5px);
    background-size: calc(0.5rem - 1px) calc(0.5rem - 1px);
    background-position: -3px -3px
}