/* Global Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*:not(code, pre) {
    font-family: inherit;
}
:root {
    height: 100%;
    font-size: var(--base-font-size, 10px);
}
body {
    min-height: 100%;
    font-size: var(--body-font-size, 1.6rem);
    font-family: var(
        --font-family,
        system-ui,
        -apple-system,
        "Segoe UI",
        "Open Sans",
        sans-serif
    );
    display: flex;
    flex-direction: column;
}
body > :where(#root, #app, .mu-layout) {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
body:has(> .main_wrapper),
body > :where(#root, #app, .mu-layout):has(.main_wrapper) {
    flex-direction: row;
}
body aside,
body > :where(#root, #app, .mu-layout) aside {
    height: 100vh;
    position: sticky;
    top: 0;
}
body .main_wrapper,
body > :where(#root, #app, .mu-layout) .main_wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    flex-direction: column;
    flex-grow: 1;
}
body main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.rflex {
    display: flex;
    flex-direction: row;
}
.cflex {
    display: flex;
    flex-direction: column;
}
.hide,
.hidden {
    display: none !important;
}
.wrap {
    flex-wrap: wrap;
}
.ais {
    align-items: start;
}
.aie {
    align-items: end;
}
.aic {
    align-items: center;
}
.ass {
    align-self: start;
}
.ase {
    align-self: end;
}
.asc {
    align-self: center;
}
.asst {
    align-self: stretch;
}
.jcs {
    justify-content: start;
}
.jce {
    justify-content: end;
}
.jcc {
    justify-content: center;
}
.jcsb {
    justify-content: space-between;
}
.jcsa {
    justify-content: space-around;
}
.jcse {
    justify-content: space-evenly;
}
.pos-abs {
    position: absolute;
}
.pos-fix {
    position: fixed;
}
.pos-rel {
    position: relative;
}
.pos-sti {
    position: sticky;
}
img {
    object-fit: cover;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
input,
button,
textarea,
select {
    font: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    line-height: var(--line-height-heading);
    font-weight: 600;
}
:is(h1, .h1) {
    font-size: var(--h1-size);
}
:is(h2, .h2) {
    font-size: var(--h2-size);
}
:is(h3, .h3) {
    font-size: var(--h3-size);
}
:is(h4, .h4) {
    font-size: var(--h4-size);
}
:is(h5, .h5) {
    font-size: var(--h5-size);
}
:is(h6, .h6) {
    font-size: var(--h6-size);
}
.bold {
    font-weight: 600;
}
.text-center {
    text-align: center;
}

.circle,
.round {
    border-radius: 50%;
}
.squircle {
    border-radius: var(--radius);
}
.square {
    border-radius: 0 !important;
}
.mu-link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    gap: 7px;
    align-items: center;
}
code.mu-code,
pre.mu-pre {
    padding: 5px 10px 6px;
    border-radius: 8px;
    white-space: normal;
    background: var(--gray_200);
}
code.mu-code {
    font-weight: 600;
    font-size: 0.8em;
}
pre.mu-pre > code.mu-code {
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
}
pre.mu-pre {
    padding: 12px 18px;
    border-radius: 12px;
}
code.mu-code.dark,
pre.mu-pre.dark {
    color: white;
    background: var(--gray_800);
}

i.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.2s;
}