:root {
    --grid-margin: 20px;
    --grid-gap: 20px;
    --grid-columns: 6;
    --grid-content-width: calc(100vw - var(--grid-margin) * 2);
    --grid-gaps-width: calc((var(--grid-columns) - 1) * var(--grid-gap));
    --grid-cols-width: calc(var(--grid-content-width) - var(--grid-gaps-width));
    --grid-col-width: calc(var(--grid-cols-width) / var(--grid-columns))
}

@media(min-width: 768px) {
    :root {
        --grid-margin:50px;
        --grid-gap: 20px
    }
}

@media(min-width: 1280px) {
    :root {
        --grid-columns:12
    }
}

@media(min-width: 1920px) {
    :root {
        --grid-margin:100px
    }
}

:root {
    --brand-hue: 200;
    --brand-saturation: 100%;
    --brand-lightness: 50%;
    --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
    --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
    --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
    --text2-light: hsl(var(--brand-hue) 30% 20%);
    --text1-dark: hsl(var(--brand-hue) 15% 85%);
    --text2-dark: hsl(var(--brand-hue) 5% 65%);
    --surface1-light: hsl(var(--brand-hue) 25% 90%);
    --surface2-light: hsl(var(--brand-hue) 20% 99%);
    --surface3-light: hsl(var(--brand-hue) 20% 92%);
    --surface4-light: hsl(var(--brand-hue) 20% 85%);
    --surface1-dark: hsl(var(--brand-hue) 5% 5%);
    --surface2-dark: hsl(var(--brand-hue) 5% 10%);
    --surface3-dark: hsl(var(--brand-hue) 5% 20%);
    --surface4-dark: hsl(var(--brand-hue) 5% 25%);
    --surface-shadow-light: var(--brand-hue) 10% 20%;
    --surface-shadow-dark: var(--brand-hue) 50% 3%;
    --shadow-strength-light: 0.02;
    --shadow-strength-dark: 0.8;
    --saturation-bias: 0;
    --saturation-value: .5;
    --saturation: calc(var(--saturation-value) + var(--saturation-bias));
    --lightness-bias: 0;
    --lightness-value: .5;
    --lightness: calc(var(--lightness-value) + var(--lightness-bias));
    --info-hue: 203;
    --info-saturation-bias: 0;
    --info-lightness-bias: 0;
    --info-hsl: var(--info-hue) calc(100% * (var(--saturation) + var(--info-saturation-bias))) calc(100% * (var(--lightness) + var(--info-lightness-bias)));
    --info: hsl(var(--info-hsl));
    --success-hue: 120;
    --success-saturation-bias: 0;
    --success-lightness-bias: 0;
    --success-hsl: var(--success-hue) calc(100% * (var(--saturation) + var(--success-saturation-bias))) calc(100% * (var(--lightness) + var(--success-lightness-bias)));
    --success: hsl(var(--success-hsl));
    --warning-hue: 40;
    --warning-saturation-bias: 0;
    --warning-lightness-bias: 0;
    --warning-hsl: var(--warning-hue) calc(100% * (var(--saturation) + var(--warning-saturation-bias))) calc(100% * (var(--lightness) + var(--warning-lightness-bias)));
    --warning: hsl(var(--warning-hsl));
    --failure-hue: 2;
    --failure-saturation-bias: 0;
    --failure-lightness-bias: 0;
    --failure-hsl: var(--failure-hue) calc(100% * (var(--saturation) + var(--failure-saturation-bias))) calc(100% * (var(--lightness) + var(--failure-lightness-bias)));
    --failure: hsl(var(--failure-hsl))
}

:root[data-theme=dark] {
    color-scheme: dark;
    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark)
}

:root[data-theme=light] {
    color-scheme: light;
    --brand: var(--brand-light);
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --surface-shadow: var(--surface-shadow-light);
    --shadow-strength: var(--shadow-strength-light)
}

:root {
    --ease: cubic-bezier(0.25,0.1,0.25,1);
    --ease-in: cubic-bezier(0.42,0,1,1);
    --ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
    --ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
    --ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
    --ease-in-out: cubic-bezier(0.42,0,0.58,1);
    --ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
    --ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
    --ease-in-out-expo: cubic-bezier(1,0,0,1);
    --ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
    --ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
    --ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
    --ease-in-out-sine: cubic-bezier(0.445,0.05,0.55,0.95);
    --ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
    --ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
    --ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
    --ease-in-sine: cubic-bezier(0.47,0,0.745,0.715);
    --ease-out: cubic-bezier(0,0,0.58,1);
    --ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
    --ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
    --ease-out-expo: cubic-bezier(0.19,1,0.22,1);
    --ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
    --ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
    --ease-out-quint: cubic-bezier(0.23,1,0.32,1);
    --ease-out-sine: cubic-bezier(0.39,0.575,0.565,1);
    --ease-linear: cubic-bezier(0.25,0.25,0.75,0.75);
    --header-height: 6rem
}

@media(min-width: 768px) {
    :root {
        --header-height:8rem
    }
}

html {
    font-size: 62.5%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: pan-y
}

body,html {
    margin: 0;
    padding: 0
}

* {
    margin: 0
}

*,:after,:before {
    box-sizing: border-box
}

button {
    all: unset
}

canvas,img,picture,svg,video {
    display: block;
    max-width: 100%
}

button,input,select,textarea {
    font: inherit
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    overflow-wrap: break-word
}

a {
    color: inherit
}

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

.sr {
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute
}

@font-face {
    font-family: FiraCode;
    font-style: normal;
    src: local(""),url(/assets/fonts/FiraCode-VF.woff2) format("woff2")
}

.surface1 {
    background-color: var(--surface1);
    color: var(--text2)
}

.surface2 {
    background-color: var(--surface2);
    color: var(--text2)
}

.surface3 {
    background-color: var(--surface3);
    color: var(--text1)
}

.surface4 {
    background-color: var(--surface4);
    color: var(--text1)
}

.rad-shadow {
    box-shadow: 0 2.8px 2.2px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow)/calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow)/var(--shadow-strength))
}

body {
    font-family: FiraCode,monospace;
    font-style: normal;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text2);
    background-color: var(--surface2)
}

section {
    margin: 5rem 0
}

h1,h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text1);
    margin: 1rem 0
}

h1>span,h2>span {
    display: block
}

p {
    margin: 1rem 0
}

ol,ul {
    padding-left: 3ch;
    margin: 1rem 0 1rem 1ch
}

ol li,ul li {
    position: relative;
    margin: 1rem 0
}

ol li:first-child,ul li:first-child {
    margin-top: 0
}

ol li:last-child,ul li:last-child {
    margin-bottom: 0
}

ol li:before,ul li:before {
    content: "-";
    position: absolute;
    left: -2ch
}

ol li p,ul li p {
    margin: 0
}

a {
    color: var(--text1);
    -webkit-text-decoration: solid underline #888 1px;
    text-decoration: solid underline #888 1px;
    text-underline-position: under
}

a:hover {
    color: var(--info);
    -webkit-text-decoration-color: var(--info);
    text-decoration-color: var(--info);
    text-decoration-thickness: 2px
}

a:hover,strong {
    font-weight: 700
}

@media(min-width: 768px) {
    h1>span,h2>span {
        display:inline
    }
}

.GridOverlay_gridOverlay__Mtkrr {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    background-color: lime;
    opacity: .15;
    visibility: hidden
}

.GridOverlay_visible__oJZd_ {
    visibility: visible
}

.GridOverlay_col__dqVn6 {
    display: none;
    background-color: blue
}

.GridOverlay_col1__oAj9L {
    grid-column: 1/span 1
}

.GridOverlay_col2__P06P3 {
    grid-column: 2/span 1
}

.GridOverlay_col3__iZfqH {
    grid-column: 3/span 1
}

.GridOverlay_col4__FaYDU {
    grid-column: 4/span 1
}

.GridOverlay_col5__WK0Zt {
    grid-column: 5/span 1
}

.GridOverlay_col6__vnyy6 {
    grid-column: 6/span 1
}

.GridOverlay_col7__jBePP {
    grid-column: 7/span 1
}

.GridOverlay_col8__xezcE {
    grid-column: 8/span 1
}

.GridOverlay_col9__A1Ov6 {
    grid-column: 9/span 1
}

.GridOverlay_col10__3TgJn {
    grid-column: 10/span 1
}

.GridOverlay_col11__tyjTi {
    grid-column: 11/span 1
}

.GridOverlay_col12___bmfa {
    grid-column: 12/span 1
}

.GridOverlay_col1__oAj9L,.GridOverlay_col2__P06P3,.GridOverlay_col3__iZfqH,.GridOverlay_col4__FaYDU,.GridOverlay_col5__WK0Zt,.GridOverlay_col6__vnyy6 {
    display: block
}

@media(min-width: 1280px) {
    .GridOverlay_col10__3TgJn,.GridOverlay_col11__tyjTi,.GridOverlay_col12___bmfa,.GridOverlay_col7__jBePP,.GridOverlay_col8__xezcE,.GridOverlay_col9__A1Ov6 {
        display:block
    }
}

.grid_container__ZwXiO {
    display: grid;
    width: calc(100% - var(--grid-margin)*2)!important;
    margin-left: var(--grid-margin)!important;
    margin-right: var(--grid-margin)!important;
    grid-gap: 0 var(--grid-gap);
    grid-template-columns: repeat(var(--grid-columns),minmax(0,1fr));
    grid-template-rows: auto
}

.app_main__R8ziC {
    padding: var(--grid-margin);
    opacity: 0
}

.app_transition-appear__cc4Ed,.app_transition-in__LxHa_ {
    -webkit-animation: app_fadeIn__KL72H .3s ease-in-out forwards;
    animation: app_fadeIn__KL72H .3s ease-in-out forwards
}

.app_transition-out__k6p3q {
    -webkit-animation: app_fadeOut__RCxDp .3s ease-in-out forwards;
    animation: app_fadeOut__RCxDp .3s ease-in-out forwards
}

.app_transition-idle__KcdWa {
    opacity: 1
}

@-webkit-keyframes app_fadeIn__KL72H {
    to {
        opacity: 1
    }
}

@keyframes app_fadeIn__KL72H {
    to {
        opacity: 1
    }
}

@-webkit-keyframes app_fadeOut__RCxDp {
    to {
        opacity: 0
    }
}

@keyframes app_fadeOut__RCxDp {
    to {
        opacity: 0
    }
}


#toasts-container {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translate(-50%)
}

#toasts-container>p {
    padding: .5rem;
    margin: 0;
    border-radius: .5rem;
    color: #000;
    background-color: #0f5
}

#toasts-container.failure>p {
    background-color: #d63838
}

.toastfade {
    -webkit-animation: toastfade 1.68s linear forwards;
    animation: toastfade 1.68s linear forwards
}

@keyframes toastfade {
    0%,to {
        opacity: 0
    }

    4%,96% {
        opacity: 1
    }
}

@-webkit-keyframes toastfade {
    0%,to {
        opacity: 0
    }

    4%,96% {
        opacity: 1
    }
}