/* Poppins */
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* SF Mono */
@font-face { font-family: "SF Mono"; src: url("./webfonts/SFMonoLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Mono"; src: url("./webfonts/SFMonoRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
    color-scheme: light dark;
    
    --dark: #111111;
    --light: #f7f7f4;
    --muted: color-mix(in srgb, light-dark(#111111, #f7f7f4) 60%, transparent);
    --accent: light-dark(#493cff, #c6e5ff);
    --card: light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));
    --card-alt: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));
    
    --background: light-dark(#f7f7f4, #111111);
    --text-color: light-dark(#111111, #f7f7f4);
    --text-color-high-contrast: light-dark(#000000, #ffffff);
    
    --blue: #0081FF;
    --blue-hover: color-mix(in srgb, var(--blue) 80%, transparent);
    --blue-muted: color-mix(in srgb, var(--blue) 15%, transparent);
    
    --pink: #FF6F62;
    --pink-muted: color-mix(in srgb, var(--pink) 20%, transparent);
    
    /*--black: #292929;*/
    --black: #252525;
    --black-hover: color-mix(in srgb, var(--black) 80%, transparent);
    --black-muted: color-mix(in srgb, var(--black) 80%, transparent);
    
    --editor-black: #292929;
    
    --grey: color-mix(in srgb, var(--black) 75%, white);
    --grey-hover: color-mix(in srgb, var(--black) 80%, transparent);
    --grey-muted: color-mix(in srgb, var(--black) 50%, transparent);
    
    /*--border: color-mix(in srgb, var(--grey) 20%, transparent);*/

    --white: #FFFFFF;
    
    --font: "Poppins", sans-serif;
    --font-system: SF Pro Rounded, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    /*--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;*/
    --font-mono: "SF Mono", monospace;
    
    --editor-blue: #0081ff40;
    --editor-coral: #E67D7440;

    --font-size: clamp(16px, calc(0.3vw + 15px), 18px);
    
    --text-small: min(calc(.3 * 1vw + 1rem), 1.54rem); /* same as hackerman.ai */
    --text-smaller: min(calc(.3 * 1vw + 1rem), 1rem);
    
    --font-size-lg: 24px;
    --font-size-sm: 14px;
    
    --darkest: #292929;
    --darker: #5D5D5D;
    /*--dark: #9E9E9E;*/
    /*--light: #F7F7F4;*/
    --light: #F9F9F9;
    
    --border-radius: 14px;
    --border-radius-lg: 18px;
    --border-radius-sm: 8px;
}

body {
    font-family: var(--font-system);
    font-size: var(--font-size);
    font-weight: 400;
    background: var(--background);
    color: var(--text-color);
    width: 100%;
    overflow-x: hidden; /* for safety */
    letter-spacing: -0.15px;
}

@media (prefers-color-scheme: dark) {
    body {
        color-scheme: dark;
        font-weight: 300;
    }
}

.feature-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-bottom: 1rem;*/
    margin-right: 1rem;
    margin-top: 0.25rem;
    /*border-radius: var(--border-radius-sm);*/
    background: var(--muted);
    color: var(--muted);
    font-size: 1.625rem;
    /*float: left;*/
}

.feature-tag {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    justify-content: start;
    padding-bottom: 1rem;
    /*font-size: var(--font-size);*/
    font-size: max(calc(var(--text-small) * 1.4), min(calc(1.25 * 1.2vw + .5rem), 2.75rem));
}

@media (min-width: 1200px) {
    .feature-tag {
        /*font-size: var(--font-size-lg);*/
        justify-content: center;
        padding-bottom: 0;
    }
}

.hero-tags {
    flex-wrap: nowrap;
}

.hero-tags > div {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/*.feature-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0.8vw, 0.625rem);

    white-space: nowrap;
    font-size: clamp(0.65rem, 1.5vw, 1.5rem);
}*/

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

a.logo {
    color: light-dark(#493cff, #c6e5ff);
    font-weight: 900;
    text-decoration: none;
}
.logo {
    display: inline-flex;
    align-items: baseline;
    vertical-align: text-bottom;
    overflow: hidden;
    border-bottom: 0 !important;
    white-space: nowrap;
}

.logo-rest {
    display: inline-block;
    max-width: 1.2em;
    opacity: 1;
    transform: translateX(0);
    overflow: hidden;

    animation: collapse-logo 700ms cubic-bezier(.22, 1, .36, 1) 1200ms forwards;
}

.logo-dot {
    display: inline-block;
}

@keyframes collapse-logo {
    0% {
        max-width: 1.2em;
        opacity: 1;
        transform: translateX(0);
    }

    60% {
        opacity: 0;
        transform: translateX(-0.15em);
    }

    100% {
        max-width: 0;
        opacity: 0;
        transform: translateX(-0.3em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-rest {
        animation: none;
        max-width: 0;
        opacity: 0;
    }
}

/*.bg-linear {
    background: linear-gradient(180deg, var(--light), var(--white));
}*/

/*img.app-icon {
    max-height: 120px;
    width: auto;
    border-radius: 32px;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.6);
}*/

.py-xl {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.pt-xl {
    padding-top: 6rem !important;
}

.pb-xl {
    padding-bottom: 6rem !important;
}

.badge {
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    color: var(--muted);
    font-size: var(--font-size);
    font-weight: 600;
    vertical-align: middle;
    text-decoration: none;
    opacity: 1;
}

.badge.badge-small {
    font-size: var(--font-size-sm);
    background: var(--card-alt);
    color: var(--muted);
    padding: 0.5rem 1rem;
    font-weight: 400;
    margin: 0 0.25rem;
    
    a {
        color: inherit !important;
        text-decoration: none !important;
        border-bottom: none !important;    
    }
}

/*.badge:hover {
    opacity: 0.8;
}*/

.text-small {
    font-size: var(--font-size-sm) !important;
    font-weight: 400;
}

/*.text-smaller {
    font-size: 0.825rem;
}*/

/*.text-smallest {
    font-size: 0.750rem;
}*/

.accent {
    color: var(--accent);
}

a:not(.button, .badge, .logo) {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted;
}

a.no-color {
    color: inherit;
}

a.link:not(.button, .badge) {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted;
    
    i {
        font-size: var(--font-size-sm);
    }
}

a:not(.button, .badge, .logo):hover,
a.link:not(.button, .badge):hover {
    opacity: .75;
}

footer a:not(.button),
.footer-container a:not(.button) {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

footer a:not(.inline, .button) {
    display: block;
    width: fit-content;
}

.article-toc {
    color: var(--muted) !important;
}

.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--font);
    color: var(--text-color);
    letter-spacing: -0.015em;
    font-weight: 400;
    font-size: max(calc(var(--font-size-lg) * 1.4), min(calc(4.25 * 2vw + .5rem), 6rem));
}

.display-1 {
    font-size: max(calc(var(--font-size-lg) * 1.4), min(calc(4.25 * 2vw + .5rem), 8rem));
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 100%;
}

.fw-bold {
    font-weight: 600 !important;
}

.lead {
    /*font-size: max(calc(var(--text-small) * 1.4), min(calc(1.25 * 1.2vw + .5rem), 2.75rem));*/
    font-size: var(--text-small);
    font-style: normal;
    font-weight: 400;
}

.feature-header {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    i {
        font-size: var(--font-size-lg);
        margin-right: 0.5rem;
    }
}

.lead-lg {
    font-size: max(calc(var(--text-small) * 1.4), min(calc(1.25 * 1.2vw + .5rem), 2.75rem)); /* same as hackerman.ai */
    font-style: normal;
    font-weight: 400;
    color: var(--text-color);
}

.lh-normal {
    line-height: normal;
}

.lh-compact {
    line-height: 110%;
}

#use-cases .lead {
    line-height: normal;
}

.text-color {
    color: var(--text-color) !important;
}

.muted {
    color: var(--muted) !important;
}

.dark {
    color: var(--muted);
}

.darker {
    color: var(--darker);
}

.darkest {
    color: var(--darkest);
}

.blue-muted {
    color: var(--blue-hover);
}

.mono,
.mono a {
    font-family: var(--font-mono);
    color: var(--muted);
}

.center-items {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    flex-direction: row;
}

.space-items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    
    margin-bottom: 0;
}

.two-columns {
    column-count: 1;
}

.three-columns {
    column-count: 2;
}

@media (min-width: 992px) {
    .three-columns {
        column-count: 3;
    }
    .fill-available {
        height: -webkit-fill-available;
    }
}

@media screen and (min-width: 1200px) {
    .two-columns {
        column-count: 2;
    }
}

hr {
    margin: 1rem 0;
    color: var(--grey-muted);
    border: 0;
    border-top: 1px solid;
    opacity: 1;
}

.border:not(.border-white) {
    background: var(--card-alt);
    border: none !important;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.lang-list .check-item {
    background: var(--card-alt);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    
    &.unchecked {
        background: transparent !important;
    }
}

.card {
    background: var(--card);
    border: none !important;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    
    .button-black {
        background: var(--dark);
        color: var(--white);
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-outline {
        background: transparent;
        color: var(--text-color);
        border: 1px solid var(--muted) !important;
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-black:hover,
    .button-outline:hover {
        opacity: .85;
        box-shadow: none;
        padding: 0.5rem 1.25rem;
    }
}

.card-alt {
    background: var(--card-alt);
    border: none !important;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    
    .button-black {
        background: var(--dark);
        color: var(--white);
        opacity: 1;
        /*box-shadow: 0px 8px 20px 0px #00000052;*/
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-outline {
        background: transparent;
        color: var(--text-color);
        border: 1px solid var(--muted) !important;
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-black:hover,
    .button-outline:hover {
        opacity: .85;
        box-shadow: none;
        padding: 0.5rem 1.25rem;
    }
}

.card-outline {
    background: transparent;
    border: 1px solid var(--card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    
    .button-black {
        background: var(--dark);
        color: var(--white);
        opacity: 1;
        /*box-shadow: 0px 8px 20px 0px #00000052;*/
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-outline {
        background: transparent;
        color: var(--text-color);
        border: 1px solid var(--muted) !important;
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-black:hover,
    .button-outline:hover {
        opacity: .85;
        box-shadow: none;
        padding: 0.5rem 1.25rem;
    }
}

/*@property --border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}*/

/*.card-gradient {
    --border-angle: 0deg;
    
    border: 2px solid transparent;
    background:
        linear-gradient(var(--background), var(--background)) padding-box,
        conic-gradient(
            from var(--border-angle),
            transparent 0deg,
            transparent 250deg,
            var(--card) 320deg,
            transparent 360deg
        ) border-box;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    
    .button-black {
        background: var(--dark);
        color: var(--white);
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-outline {
        background: transparent;
        color: var(--text-color);
        border: 1px solid var(--muted) !important;
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-black:hover,
    .button-outline:hover {
        opacity: .85;
        box-shadow: none;
        padding: 0.5rem 1.25rem;
    }
}

.card-gradient:hover {
    animation: rotate-border 2s linear infinite;
}

@keyframes rotate-border {
    to {
        --border-angle: 360deg;
    }
}*/

.button-icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
}

.button-icon i {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.button-icon .icon-default {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
}

.button-icon .icon-hover {
    opacity: 0;
    transform: rotateY(-90deg) scale(0.8);
}

.button-icon-swap:hover .icon-default,
.button-icon-swap:focus-visible .icon-default {
    opacity: 0;
    transform: rotateY(90deg) scale(0.8);
}

.button-icon-swap:hover .icon-hover,
.button-icon-swap:focus-visible .icon-hover {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .button-icon i {
        transition: opacity 0.01ms;
        transform: none !important;
    }
}

a.border {
    text-decoration: none;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}

a.border:hover,
a.border:focus {
    opacity: 0.85;
}

a.home-logo {
    display: block;
    border: none;
}

a.home-logo img {
    height: 3.5rem;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.flex-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    
    flex-wrap: wrap;
    
    i {
        font-size: 2rem;
    }
    
    /*.icon {
        width: 2rem;
        height: 2rem;
    }*/
    
    p {
        margin-bottom: 0 !important;
    }
}

.footer-container {
    /*display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;*/
    
    a {
        text-decoration: none;
    }
}

body.use-case-page .footer-container,
body.docs-page .footer-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    
    a {
        text-decoration: none;
    }
}

.button-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    
    height: 50px; /*fixed height*/
    padding: 0.5rem 1.5rem;
    
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    border-radius: var(--border-radius-sm);
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
    
    i {
        font-size: 1.25rem;
    }
}

/* button */
.button-black {
    background: var(--text-color);
    color: var(--background);
    opacity: 1;
    font-weight: 600;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}

.button-shadow {
    box-shadow: 0px 8px 20px 0px #00000052;*/ 
}

.button-shadow:hover,
.button-shadow:focus {
    opacity: 0.80;
    box-shadow: 0px 2px 4px 0px #0000009c;
}

/* button with border */
.button-secondary {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--muted);
    opacity: 1;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}
.button-secondary:hover,
.button-secondary:focus {
    opacity: .85;
}

.text-base {
    line-height: 1;
    font-size: 1.25rem;
}

.floating-lang {
    position: absolute;
    justify-content: space-between;
    
    top: 1.250rem;
    right: 1.250rem;
    
    display: inline-flex;
    gap: 1.5rem;
    padding: 0.5rem 1.5rem;
}

.floating-lang a {
    color: var(--muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
    align-items: center;
    gap: 0.625rem;
    opacity: 1;
    border: none;
}

.floating-lang a:hover,
.floating-lang a:focus {
    /*opacity: 0.8;*/
    color: var(--text-color);
}

/*.floating-button {
    position: fixed;
    justify-content: space-between;
    z-index: 99;
    
    top: 1.250rem;
    left: 1.250rem;
    
    display: inline-flex;
    gap: 1.5rem;
    padding: 0.5rem 1.5rem;
    
    background: rgba(0, 0, 0, 0);
    border-radius: 999px;
    backdrop-filter: blur(20px);
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}*/

/*.floating-button:hover,
.floating-button:focus {
    background: rgba(0,0,0,.05);
}*/

/*.floating-button a,
a.floating-button {
    color: light-dark(var(--muted), var(--light));
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    align-items: center;
    gap: 0.625rem;
    opacity: 1;
    text-decoration: none;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}*/

/*.floating-button a:hover,
.floating-button a:focus,
a.floating-button:hover,
a.floating-button:focus {
    opacity: 0.8;
}*/

.floating-menu {
    position: fixed;
    justify-content: space-between;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.250rem;
    display: inline-flex;
    gap: 1.5rem;
    padding: 0.5rem 1.5rem;
    background: rgba(0,0,0,.05);
    border-radius: 999px;
    backdrop-filter: blur(20px);
}

.floating-menu a,
.floating-menu .lead {
    color: light-dark(var(--muted), var(--light));
    font-size: var(--font-size);
    white-space: nowrap;
    border: none;
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}

.floating-menu .lead {
    text-decoration: underline;
    width: 1.25em;
    text-align: center;
}

.floating-menu svg {
    height: 2rem;
}

@media (min-width: 992px) {
    
    .floating-menu {
        font-size: 1rem;
        
        left: 1.250rem;
        transform: none;
        
        width: auto;
    }
    
    /*.floating-menu a,
    .floating-menu .lead {
        font-size: var(--font-size);
    }*/
    
    .floating-menu svg {
        height: 1rem;
    }

}

.code-snippet {
    position: relative;
    display: inline-block;
    z-index: 0;
    
    font-family: var(--font-mono);
    font-weight: 600;
    color: #6c757d;
    
    /*background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.05) 0 50%,
        transparent 50% 100%
    );*/
}

/*.code-snippet.is-dark {
    color: var(--pink);
}*/

.code-snippet::after {
    content: '';
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 0.5em;
    background: rgba(0,0,0,.05);
    /*background: var(--blue-muted);*/

    z-index: -1;
    pointer-events: none;
}

/*.code-snippet.is-dark::after {
    background: var(--pink-muted);
}*/

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1200px) {
    .use-case-grid {
        grid-template-columns: 1fr;
    }
}

pre {
    font-family: var(--font-mono);
    overflow: hidden;
    font-size: 1rem;
    color: var(--muted);
}

pre code {
    color: var(--text-color);
    padding: 0;
    letter-spacing: normal;
}

pre.break-lines {
    white-space: pre-line;
    font-size: 0.865rem;
    /*min-height: 480px;*/
}

code {
    color: var(--muted);
    font-size: inherit;
    font-family: var(--font-mono);
}

.highlight {
    /*background-color: var(--blue-muted);*/
    color: var(--accent);
    text-decoration: none;
    /*font-size: 1.125rem;*/
    
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* px-1 */
    
    i {
        font-size: 80%;
    }
}

.check-item {
    text-decoration: none;
    
    display: flex;
    align-items: baseline;
    gap: 0.25rem; /* px-1 */
    
    i {
        font-size: var(--font-size-sm);
    }
}

.check-item.unchecked {
    color: var(--muted);
}

.highlight.no-bg {
    background-color: transparent;
}

.highlight.disabled {
    color: var(--muted);
}

.fake-title-bar,
.fake-status-bar {
    font-family: var(--font-system);
    padding: 4px 4px;
    font-size: 12px;
    font-weight: 500;
}

.fake-status-bar {
    padding: 4px 8px;
}

.fake-title-bar {
    text-align: center;
    font-weight: 400;
    
    /*padding-left: 58px;*/

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.fake-title-bar .file-name {
    display: inline-flex;
    align-items: start;
    gap: 4px;
    font-weight: 900;
    letter-spacing: 0.01em;

    img {
        height: 16px;
        opacity: 50%;
    }
}

.fake-title-bar .buffer-list {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    span:not(.active-buffer) {
        opacity: 0.5;
    }
}

.fake-title-bar .inactive {
    opacity: 0.5;
    padding: 4px 8px;
}

.fake-title-bar .buffer-button {
    opacity: 0.5;
    margin-left: 1rem;
    
    padding: 1px 10px;
    
    border: 1px solid var(--muted);
    border-radius: 4px;
}

/*.fake-title-bar .muted {
    opacity: 0.5;
}*/

.fake-title-bar .unsaved {
    color: #FCAF24;
    font-size: 22px;
    line-height: 0;
    vertical-align: sub;
}

.fake-status-bar {
    font-family: var(--font-mono);
    margin-top: 0;
    display: flex;
    justify-content: space-between;
}

.block-cursor {
    background: var(--cursor);
    width: 2px;
    display: inline-block;
    height: 22px;
    position: absolute;
    margin-top: -2px;
    margin-left: 0px;
}

.theme-toggle {
    background: transparent;
    color: var(--muted);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.theme-toggle i {
    font-size: 1.250rem;
    transition: all 160ms ease, color 160ms ease;
}

.theme-toggle.is-dark {
    color: var(--text-color);
}

.editor-preview {
    
    --background: white;
    --text_color: #111111;
    --cursor: #e03526;
    --keyword: #e03526;
    --class: var(--dark);
    --name: #292929;
    --string: #787878;
    --number: #292929;
    --constant: #292929;
    --operator: #292929;
    --type: #1e63e1;
    --special: #493cff;
    --builtin: var(--text_color);
    --comment: #9e9e9e;
    --link: #1e63e1;
    
    .traffic-light.close,
    .traffic-light.minimize,
    .traffic-light.fullscreen {
        background: color-mix(in srgb, var(--text_color) 30%, transparent);
    }
    
    display: flex;
    flex-direction: column;
    height: -webkit-fill-available;
    background: var(--background);
    /*border-radius: var(--border-radius);*/
    border-radius: 9px;
    position: relative;
    border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    overflow: auto;
    
    .tok-default { color: var(--text_color); }
    .tok-keyword { color: var(--keyword); }
    .tok-class { color: var(--class); }
    .tok-name { color: var(--name); }
    .tok-string { color: var(--string); }
    .tok-number { color: var(--number); }
    .tok-constant { color: var(--constant); }
    .tok-operator { color: var(--operator); }
    .tok-comment { color: var(--comment); }
    .tok-code { color: var(--comment); background: color-mix(in srgb, var(--comment) 10%, transparent); }
    .tok-type { color: var(--type); }
    .tok-special { color: var(--special); }
    .tok-link { color: var(--link); background: color-mix(in srgb, var(--link) 10%, transparent); }
    .tok-boolean { color: var(--number); }
    .tok-builtin { color: var(--builtin); }
    
    pre code {
        font-family: var(--font-mono);
        font-weight: 400;
        color: #5d5d5d;
    }
    
    .gutter {
        color: var(--dark);
        opacity: 0.5;
    }
    
    .fake-title-bar,
    .fake-status-bar {
        /*color: var(--text_color);*/
        background: var(--background);
    }
    
    .fake-title-bar {
        color: color-mix(in srgb, var(--text_color) 50%, transparent);
    }
    
    .fake-title-bar .buffer-button {
        border: 1px solid color-mix(in srgb, var(--text_color) 10%, transparent);;
    }
    
    .fake-status-bar,
    .fake-title-bar .inactive {
        color: var(--text_color);
        opacity: 0.5;
    }
    
    .editor-divider {
        background: var(--text_color);
        opacity: 0.1;
    }
    .editor-divider:hover {
        opacity: 0.2;
    }
}

.editor-preview.theme-dark {
    
    --background: #212529;
    --text_color: var(--light);
    --cursor: #c6e5ff;
    --keyword: #E67D74;
    --name: #D0C5A9;
    --class: #D0C5A9;
    --string: #D4BC7D;
    --number: #D699B5;
    --constant: #D699B5;
    --operator: #E0AD82;
    --type: #c6e5ff;
    --special: #c6e5ff;
    --builtin: #E0AD82;
    --comment: #87919D;
    --link: #c6e5ff;
    
    .traffic-light.close,
    .traffic-light.minimize,
    .traffic-light.fullscreen {
        background: color-mix(in srgb, var(--text_color) 30%, transparent);
    }
    
    .tok-default { color: var(--text_color); }
    .tok-keyword { color: var(--keyword); }
    .tok-class { color: var(--class); }
    .tok-name { color: var(--name); }
    .tok-string { color: var(--string); }
    .tok-number { color: var(--number); }
    .tok-constant { color: var(--constant); }
    .tok-operator { color: var(--operator); }
    .tok-comment { color: var(--comment); }
    .tok-code { color: var(--comment); background: color-mix(in srgb, var(--comment) 10%, transparent); }
    .tok-type { color: var(--type); }
    .tok-special { color: var(--special); }
    .tok-link { color: var(--link); background: color-mix(in srgb, var(--link) 10%, transparent); }
    .tok-boolean { color: var(--number); }
    .tok-builtin { color: var(--builtin); }
    
    pre code {
        font-family: var(--font-mono);
        font-weight: 200;
        color: var(--text_color);
    }
    
    .gutter {
        color: var(--text_color);
        opacity: 0.5;
    }
    
    .fake-title-bar {
        color: color-mix(in srgb, var(--text_color) 50%, transparent);
    }
    
    .fake-title-bar .buffer-button {
        border: 1px solid color-mix(in srgb, var(--text_color) 10%, transparent);
    }
    
    .fake-status-bar,
    .fake-title-bar .inactive {
        color: var(--text_color);
        opacity: 0.3;
    }
    
    .editor-divider {
        background: var(--text_color);
        opacity: 0.1;
    }
    .editor-divider:hover {
        opacity: 0.2;
    }
}

.editor-preview pre {
    color: var(--text_color);
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.4;
    white-space: pre;
    height: 100%;
}

.editor-split {
    --split-pos: 38%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--split-pos)) 4px minmax(0, calc(100% - var(--split-pos)));
    align-items: stretch;
    min-height: 420px;
    overflow: hidden;
}

.editor-pane {
    min-width: 0;
    overflow: hidden;
    padding: 0 12px;
}

.editor-pane pre {
    margin: 0;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    white-space: pre;
    font-size: 14px;
}

.indent-guide {
    border-left: 1px solid var(--muted);
    display: inline-block;
    position: absolute;
    height: 24px;
    display: none;
}

.editor-divider {
    position: relative;
    cursor: col-resize;
    user-select: none;
    transition: background 0.15s ease;
    width: 1px;
}

.editor-divider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    /*background: var(--light);*/
    display: none;
}

.editor-divider-handle::before,
.editor-divider-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 999px;
    transform: translateX(-50%);
}

.editor-divider-handle::before {
    top: 10px;
}

.editor-divider-handle::after {
    bottom: 10px;
}

.gutter {
    display: inline-block;
    width: 37px;
    padding-right: 0;
    text-align: right;
    user-select: none;
    
    svg {
        height: 12px;
        width: 12px;
    }
}

.gutter.current-row {
    opacity: 0.8;
}

.traffic-lights {
    display: flex;
    gap: 6px;
    position: absolute;
    top: 6px;
    left: 6px;
}

.traffic-light {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
    position: relative;
    cursor: default;
}

/*.traffic-light.close,
.traffic-light.minimize,
.traffic-light.fullscreen {
    background: var(--muted);
}*/

.media-expand {
    display: block;
    overflow: hidden;
}

.media-expand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    opacity: .85;
}

.media-expand[type=button]:not(:disabled) {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    background-size: cover;
    height: 100%; 
    min-height: 240px;
    cursor: zoom-in;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}

.media-crop {
    display: block;
    width: 100%;
}

.media-expand-img {
    display: inline-block;
    width: 100%;
    height: auto;
    
    object-fit: cover;
    object-position: top center;

    transition: all 0.25s ease;
    
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--border-radius-lg);
    border-bottom-left-radius: var(--border-radius-lg);
}

@media (min-width: 992px) {
    .media-expand-img {
        border-top-right-radius: var(--border-radius-lg);
        border-bottom-right-radius: var(--border-radius-lg);
        border-bottom-left-radius: 0;
    }
}

/*.is-expanded .border {
    background: transparent;
}

.media-expand:hover .media-expand-img {
    transform: scale(1.015);
}

.is-expanded .media-expand {
    cursor: zoom-out !important;
}

.is-expanded .media-expand .media-crop {
    height: auto;
    overflow: visible;
}

.is-expanded .media-expand .media-expand-img {
    height: auto;
    object-fit: contain;
    transform: none;
    
    border-radius: var(--border-radius-lg);
}*/



.editor-preview,
.code-snippet,
.theme-button,
.app-icon {
    transition:
        background-color 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease,
        filter 250ms ease,
        opacity 250ms ease;
}

.editor-preview {
    position: relative;
    overflow: hidden;
}

/* Main preview flash/pop */
.theme-switching .editor-preview {
    animation: theme-pop 520ms cubic-bezier(.2, .8, .2, 1);
}

/* Code gets the sharper glitch */
/*.theme-switching .code-snippet {
    animation: theme-glitch 520ms steps(2, end);
}*/

/* Button should visibly click/change */
.theme-switching .theme-button {
    animation: button-pulse 420ms ease;
}

/* Icon flicker */
/*.theme-switching .app-icon {
    animation: icon-flicker 520ms ease;
}*/

/* Glitch scan overlay */
.theme-switching .editor-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.22) 48%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 54%
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.12) 0px,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px,
            transparent 5px
        );

    mix-blend-mode: difference;
    animation: scan-glitch 520ms linear;
}

/* Side color tear */
.theme-switching .editor-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 21;
    pointer-events: none;

    background: rgba(255, 143, 64, 0.2);
    mix-blend-mode: screen;
    clip-path: inset(42% 0 44% 0);
    animation: color-tear 420ms steps(3, end);
}

@keyframes theme-pop {
    0% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: none;
    }

    20% {
        transform: scale(1.025);
        filter: brightness(1.45) contrast(1.15);
        box-shadow: 0 0 40px rgba(255, 143, 64, 0.35);
    }

    45% {
        transform: scale(0.995) translateX(-2px);
        filter: brightness(0.9) contrast(1.4);
    }

    70% {
        transform: scale(1.01) translateX(2px);
        filter: brightness(1.25);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: none;
    }
}

@keyframes theme-glitch {
    0% {
        transform: translate(0, 0);
        filter: none;
        opacity: 1;
    }

    12% {
        transform: translate(-6px, 2px);
        filter: contrast(1.8) brightness(1.4);
    }

    24% {
        transform: translate(5px, -2px);
        opacity: 0.75;
    }

    36% {
        transform: translate(-3px, -1px) skewX(-3deg);
        filter: hue-rotate(20deg) contrast(1.6);
    }

    52% {
        transform: translate(3px, 2px) skewX(2deg);
        opacity: 1;
    }

    70% {
        transform: translate(-1px, 0);
        filter: brightness(1.25);
    }

    100% {
        transform: translate(0, 0);
        filter: none;
        opacity: 1;
    }
}

@keyframes scan-glitch {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    15% {
        opacity: 1;
    }

    45% {
        opacity: 0.8;
        transform: translateY(20%);
    }

    70% {
        opacity: 1;
        transform: translateY(80%);
    }

    100% {
        opacity: 0;
        transform: translateY(120%);
    }
}

@keyframes color-tear {
    0% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(20% 0 70% 0);
    }

    20% {
        opacity: 1;
        transform: translateX(-12px);
        clip-path: inset(35% 0 52% 0);
    }

    40% {
        transform: translateX(10px);
        clip-path: inset(58% 0 28% 0);
    }

    70% {
        transform: translateX(-5px);
        clip-path: inset(72% 0 18% 0);
    }

    100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0 0 100% 0);
    }
}

@keyframes button-pulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(0.92);
        filter: brightness(1.4);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes icon-flicker {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: none;
    }

    15% {
        opacity: 0.15;
        transform: rotate(-5deg) scale(0.9);
        filter: contrast(2);
    }

    30% {
        opacity: 1;
        transform: rotate(4deg) scale(1.15);
    }

    55% {
        opacity: 0.45;
        transform: rotate(-2deg) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: none;
    }
}


/* -------------------------------------------------------------------------- */
/* Use-case / long-form pages                                                 */
/* -------------------------------------------------------------------------- */

body.use-case-page {
    /*background: var(--background);*/
    color: var(--text-color);
}

body.use-case-page #navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 0.625rem 0;
}

.use-case-content {
    width: min(100% - 2rem, 760px);
    margin: 0 auto;
    padding: 6rem 0 6rem;
}

.use-case-content > * {
    max-width: 760px;
}

.use-case-content > h1,
.use-case-content > table,
.use-case-content > pre,
.use-case-content > figure,
.use-case-content > img,
.use-case-content > blockquote,
.use-case-content > .toc,
.use-case-content > .use-case-cta {
    max-width: 760px;
}

/* Headings */

.use-case-content h1,
.use-case-content h2,
.use-case-content h3,
.use-case-content h4 {
    font-family: var(--font);
    color: var(--text-color);
    letter-spacing: -0.015em;
    font-weight: 400;
    
    a {
        color: var(--text-color) !important;
    }
    a:hover {
        color: var(--muted) !important;
    }
}

.use-case-content h1 {
    font-weight: 600;
    margin: 0 0 2rem;
    font-size: calc(1.475rem + 2.7vw); /* Bootstrap-ish display-4 scale */
}

.use-case-content h2 {
    margin: 5rem 0 1.25rem;
    font-size: calc(1.325rem + 0.9vw);
}

.use-case-content h3 {
    margin: 3rem 0 1rem;
    font-size: calc(1.275rem + 0.3vw);
}

.use-case-content h4 {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
}

/* Body text */

.use-case-content p,
.use-case-content li {
    font-family: var(--font-system);
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
}

.use-case-content p {
    margin: 0 0 1.35rem;
    /*margin: 0 0 1rem;*/
}

/*.use-case-content > p:first-of-type {
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--dark);
}*/

.use-case-content strong {
    color: var(--text-color);
    font-weight: 600;
}

.use-case-content em {
    color: var(--muted);
    font-style: normal;
    font-size: var(--font-size);
}

.use-case-content .muted {
    color: var(--muted);
}

.use-case-content a:not(.button, .badge) {
    /*color: var(--darker);
    text-decoration: none;*/
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted;
}

.use-case-content a:not(.button, .badge):hover,
.use-case-content a:not(.button, .badge):focus {
    /*color: var(--dark);*/
    /*color: var(--blue-hover);*/
    opacity: .75;
}

.use-case-content ul,
.use-case-content ol {
    margin: 1.25rem 0 2rem;
    padding-left: 1.35rem;
}

.use-case-content li {
    margin: 0.55rem 0;
    padding-left: 0.25rem;
}

.use-case-content li::marker {
    color: var(--muted);
}

.use-case-content hr {
    margin: 4rem 0;
    color: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    border: 0;
    border-top: 1px solid;
    opacity: 1;
}

.use-case-content blockquote {
    margin: 2.5rem 0;
    padding: 1.5rem;
    /*background: var(--background);*/
    border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    border-radius: var(--border-radius);
}

.use-case-content blockquote p {
    margin-bottom: 0;
    color: var(--text-color);
    font-size: 1.125rem;
}

/* Inline code */

/*.use-case-content :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--blue);
    background: var(--blue-muted);
    border-radius: 7px;
    padding: 0.15rem 0.4rem;
}*/

/* Code blocks */

.use-case-content pre {
    margin: 1.35rem 0;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--card-alt);
    color: var(--text-color);
    border-radius: var(--border-radius);
    font-family: var(--font-mono);
}

.use-case-content pre code {
    display: block;
    padding: 0;
    background: transparent;
    color: var(--muted);
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    white-space: break-spaces;
}

/* Tables */

.use-case-content table {
    width: 100%;
    margin: 2.5rem 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    padding: 0 1rem;
    background: var(--card-alt);
    border-radius: var(--border-radius);
}

.use-case-content th,
.use-case-content td {
    padding: 1rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    font-family: var(--font-system);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding-right: 1.75rem;
    
    /*vertical-align: middle;*/
    
    /*strong {
        color: var(--accent);
    }*/
}

.use-case-content th:first-child,
.use-case-content td:first-child {
    white-space: nowrap;
    width: 1%;
}

.use-case-content th {
    color: var(--muted);
    font-weight: 400;
    /*background: var(--background);*/
    font-size: var(--font-size);
}

.use-case-content td {
    color: var(--text-color);
}

.use-case-content tr:last-child td {
    border-bottom: 0;
}

/* Images */

.use-case-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2.5rem 0;
    border-radius: var(--border-radius);
}

.use-case-content figure {
    margin: 2.5rem 0;
}

.use-case-content figure img {
    margin: 0;
}

.use-case-content figcaption {
    margin-top: 0.75rem;
    font-family: var(--font-system);
    font-size: var(--text-smaller);
    color: var(--muted);
    text-align: center;
}

/* Markdown TOC */

.use-case-content .toc {
    margin: 2.5rem 0 4rem;
    padding: 1.5rem;
    border: 1px solid var(--card);
    border-radius: var(--border-radius);
}

.use-case-content .toc::before {
    content: "On this page";
    display: block;
    margin-bottom: 0.875rem;
    font-family: var(--font-system);
    font-size: var(--text-smaller);
    font-weight: 600;
    color: var(--muted);
}

.use-case-content .toc,
.use-case-content .toc ul {
    list-style: none;
    padding-left: 0;
}

.use-case-content .toc li {
    margin: 0.35rem 0;
    padding-left: 0;
    line-height: 1.35;
}

.use-case-content .toc a {
    /*font-size: 1rem;*/
    color: var(--muted);
    border-bottom: 0;
}

.use-case-content .toc a:hover,
.use-case-content .toc a:focus {
    opacity: .75;
}

@media (min-width: 1200px) {
    .use-case-content h1 {
        /*font-size: 3.5rem;*/
        /*font-size: max(calc(var(--font-size-lg) * 1.4), min(calc(4.25 * 2vw + .5rem), 6rem));*/
    }
}

@media (max-width: 768px) {
    .use-case-content {
        width: min(100% - 1.5rem, 760px);
        padding: 5rem 0 5rem;
    }

    /*.use-case-content h1 {
        font-size: 2.5rem;
    }*/

    .use-case-content h2 {
        margin-top: 4rem;
    }

    .use-case-content p,
    .use-case-content li {
        /*font-size: 1.05rem;*/
        line-height: 1.7;
    }

    .use-case-content > p:first-of-type {
        font-size: var(--font-size);
    }

    .use-case-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .use-case-content pre {
        border-radius: var(--border-radius);
    }
}


/* -------------------------------------------------------------------------- */
/* Documentation pages                                                       */
/* -------------------------------------------------------------------------- */

body.docs-page {
    /*background: var(--background);*/
    color: var(--text-color);
}

body.docs-page #navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 0.625rem 0;
}

/*body.docs-page .use-case-content {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(760px, 760px);
    column-gap: 2rem;
    align-items: start;

    width: min(100% - 4rem, 1120px);
    margin: 0 auto;
    padding: 6rem;
}*/

/*
Everything goes in the main content column by default.
*/

body.docs-page .use-case-content > * {
    grid-column: 2;
    min-width: 0;
    max-width: 760px;
}

/*
The first top-level list becomes the sidebar.
*/

/*body.docs-page .use-case-content > ul:first-of-type {
    grid-column: 1;
    grid-row: 1 / span 1000;
    position: fixed;
    top: 6rem;
    left: 6rem;
    margin: 0;
    padding: 0 1rem 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
}*/

/*
The first top-level list becomes the documentation sidebar.
*/

body.docs-page .use-case-content > ul:first-of-type {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(420px - 1rem); 
    max-height: 100vh;
    min-height: 100%;
    margin: 0;
    padding: 0 1rem 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
    padding: 1rem 1rem 6rem 1rem;
    overflow-x: hidden;
    background: var(--card-alt);
}

body.docs-page .use-case-content > ul:first-of-type {
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
}

/* Chrome/Safari */
body.docs-page .use-case-content > ul:first-of-type::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.docs-page .use-case-content > ul:first-of-type::-webkit-scrollbar-track {
    background: transparent;
}

body.docs-page .use-case-content > ul:first-of-type::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 999px;
}

body.docs-page .use-case-content > ul:first-of-type::-webkit-scrollbar-thumb:hover {
    background: var(--black);
}

@media (prefers-reduced-motion: reduce) {
    body.docs-page .use-case-content > ul:first-of-type {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/*
Sidebar heading generated in CSS.
*/

body.docs-page .use-case-content > ul:first-of-type::before {
    content: "Contents";
    display: block;

    margin-bottom: 1rem;

    color: var(--text-color);
    font-family: var(--font-system);
    font-size: var(--font-size);
}

/*
Reset every list level inside the sidebar.
*/

body.docs-page .use-case-content > ul:first-of-type ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
Top-level entries.
*/

body.docs-page .use-case-content > ul:first-of-type > li {
    margin: 0;
    padding: 0;

    font-size: var(--text-smaller);
    line-height: 1.35;
    
    a > code {
        white-space: nowrap;
    }
}

/*body.docs-page .use-case-content > ul:first-of-type > li + li {
    margin-top: 0.25rem;
}*/

/*
Nested entries.
*/

body.docs-page .use-case-content > ul:first-of-type li li {
    margin: 0;
    padding: 0;

    /*font-size: var(--text-smaller);*/
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

body.docs-page .use-case-content > ul:first-of-type li > ul {
    margin: 0.125rem 0 0.375rem;
    padding-left: 0.875rem;
    border-left: 1px solid var(--card);
}

body.docs-page .use-case-content > ul:first-of-type li li > ul {
    padding-left: 0.75rem;
}

/*
Links.
*/

body.docs-page .use-case-content > ul:first-of-type a {
    display: block;
    padding: 0.25rem 0;
    color: var(--muted);
    border-bottom: 0;
    overflow-wrap: anywhere;
}

body.docs-page .use-case-content > ul:first-of-type > li > a {
    color: var(--muted);
    /*font-size: var(--text-smaller);*/
    font-size: var(--font-size-sm);
}

body.docs-page .use-case-content > ul:first-of-type a:hover,
body.docs-page .use-case-content > ul:first-of-type a:focus {
    opacity: .75;
}

/*
Hide the Markdown heading immediately before the sidebar.
*/

body.docs-page .use-case-content > h2:first-of-type {
    display: none;
}

@media (max-width: 1600px) {
    body.docs-page .use-case-content > ul:first-of-type {
        position: static;
        width: auto;
        max-height: none;
        margin: 0 0 4rem;
        padding: 1.25rem;
        overflow: visible;
        background: var(--background);
        border: 1px solid var(--card);
        border-radius: var(--border-radius);
    }
}